یک مدت پیش یک مصاحبهای داشتم که نفر مصاحبه کننده بسیار انسان مسلطی بود. یکی از سوالها این بود که stateهای سمت سرور رو چطوری سمت کلاینت هندل میکنیم؟
خیلی برام عجیب بود. تا حالا نشنیده بودم state سمت سرور هندل بشه. نتونستم جواب بدم.
تا که امروز به این لینک رسیدم
https://kreitech.io/blog/managing-react-server-state-a-simpler-approach/
و البته این
https://clevertech.biz/insights/why-we-choose-react-query-as-a-server-state-management-solution
تهش فهمیدم منظورش همون دیتاهایی هست که توسط API گرفته میشه و ذخیره و cache میشه و اگه اینکه تغییر کرد چه اتفاقی بیفته و چه جوری بیشه از تغییراتش مطلع شد.
——-
خلاصه منظورم اینه که با الفاظ آشنا بشید. خودم مدت طولانیه که درگیر swr , react query هستم ولی نمیدونستم توی استفاده بهش چی میگن.
#interview #server_state
خیلی برام عجیب بود. تا حالا نشنیده بودم state سمت سرور هندل بشه. نتونستم جواب بدم.
تا که امروز به این لینک رسیدم
https://kreitech.io/blog/managing-react-server-state-a-simpler-approach/
و البته این
https://clevertech.biz/insights/why-we-choose-react-query-as-a-server-state-management-solution
تهش فهمیدم منظورش همون دیتاهایی هست که توسط API گرفته میشه و ذخیره و cache میشه و اگه اینکه تغییر کرد چه اتفاقی بیفته و چه جوری بیشه از تغییراتش مطلع شد.
——-
خلاصه منظورم اینه که با الفاظ آشنا بشید. خودم مدت طولانیه که درگیر swr , react query هستم ولی نمیدونستم توی استفاده بهش چی میگن.
#interview #server_state
Media is too big
VIEW IN TELEGRAM
اگر تیمی کار میکنید باید با cherry_pick توی git آشنا باشید.
پیشنهاد میکنم این ویدیو رو ببینید.
#git #cherry_pick @alithecodeguy
پیشنهاد میکنم این ویدیو رو ببینید.
#git #cherry_pick @alithecodeguy
Media is too big
VIEW IN TELEGRAM
در ادامه پست قبل در خصوص cherry-pick ، پیشنهاد میکنم حتما این ویدیو رو هم ببینین
#git #cherry_pick @alithecodeguy
#git #cherry_pick @alithecodeguy
Media is too big
VIEW IN TELEGRAM
بدون ابزار ثانویه ، چه جوری چند نفر همزمان میتونن از طریق گیتهاب روی یک پروژه کار کنن؟
مشروح و با مثال عملی توی این ودیو توضیح داده.
این رو میتونید با cherry-pick که توی پست قبلی اومده ترکیب کنید و یک solution کامل بدست بیارید.
#git #team_work @alithecodeguy
مشروح و با مثال عملی توی این ودیو توضیح داده.
این رو میتونید با cherry-pick که توی پست قبلی اومده ترکیب کنید و یک solution کامل بدست بیارید.
#git #team_work @alithecodeguy
چند روز قبل یه بنده خدایی یه کدی داد توی ۴ ساعت بزنم ، اگر دیزاین داشت ، میشد بهش گفت اپ کوچیک و کامل.
از چیزایی که توی ریدمی بود بین ۱۲ تا ۴ صبح ، کد رو با تایپ اسکریپت و تیلویند و ریکت هوکفرم زدم ، فرداش گفت باید میپرسیدی چیکار باید کنی ، هدف من سوال پرسیدن شما بود 😑
درک کردن بعضیها واقعا سخته.
از چیزایی که توی ریدمی بود بین ۱۲ تا ۴ صبح ، کد رو با تایپ اسکریپت و تیلویند و ریکت هوکفرم زدم ، فرداش گفت باید میپرسیدی چیکار باید کنی ، هدف من سوال پرسیدن شما بود 😑
درک کردن بعضیها واقعا سخته.
دوستان گرامی اینترنت متاسفانه وضع افتضاحی داره. هم گوشی هم ADSL. تماس های تصویری به دفعات قطع میشه. جلسه امروز رفت برای هفته آینده ببینم بیخیال میشن یا نه.
ایشون Deno هستن که به عنوان جایگزینی برای NodeJs ظهور پیدا کرد ولی خب زورش فعلا به NodeJs نمیرسه ولی از اونجا که بازار آی تی بالا پایین زیاد داره ، ممکنه بیاد جای واقعیش رو پیدا کنه.
یه نیم نگاهی بهش کنید ضرر نداره.
#deno
یه نیم نگاهی بهش کنید ضرر نداره.
#deno
خیلی چیزا به ریکت ۱۸ اضافه شده از جمله هوک useTransition و هوک useDefferedValue.
هر دوش برای این به کار میره که اولویت render یک state به خصوص رو از بقیه stateها بیارن پایینتر.
ولی اینکه چه فرقی با هم دارن رو سخت میشه از روی داکیومنت اصلی متوجه شد.
این لینک خیلی کوتاه و مشروح و عملی این تفاوت رو شرح داده.
https://academind.com/tutorials/react-usetransition-vs-usedeferredvalue#:~:text=As%20mentioned%20above%2C%20the%20difference,same%20goal%20in%20the%20end.
——————
useTransition() gives you full control since you decide which code should be wrapped and treated as "low priority". Sometimes though, you might not have access to the actual state updating code (e.g., because it's performed by some third-party library). Or, for some reason, you can't use useTransition().
In such cases, you could use useDeferredValue() instead.
With useDeferredValue(), you don't wrap the state updating code but instead the value that's in the end generated or changed because of the state update (either the state value itself or some value that's computed based on the state value
——————
#react #react18 #hooks
هر دوش برای این به کار میره که اولویت render یک state به خصوص رو از بقیه stateها بیارن پایینتر.
ولی اینکه چه فرقی با هم دارن رو سخت میشه از روی داکیومنت اصلی متوجه شد.
این لینک خیلی کوتاه و مشروح و عملی این تفاوت رو شرح داده.
https://academind.com/tutorials/react-usetransition-vs-usedeferredvalue#:~:text=As%20mentioned%20above%2C%20the%20difference,same%20goal%20in%20the%20end.
——————
useTransition() gives you full control since you decide which code should be wrapped and treated as "low priority". Sometimes though, you might not have access to the actual state updating code (e.g., because it's performed by some third-party library). Or, for some reason, you can't use useTransition().
In such cases, you could use useDeferredValue() instead.
With useDeferredValue(), you don't wrap the state updating code but instead the value that's in the end generated or changed because of the state update (either the state value itself or some value that's computed based on the state value
——————
#react #react18 #hooks
هر چی بیشتر ریکت میخونم بیشتر متوجه میشم چه قدر این صفحه رو درک نکردم.
https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html
#ract #react18
https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html
#ract #react18
تا حالا کلمه CORS یا crossorigin رو شنیدید؟
بیاید یک بار واسه همیشه باهاش آشنا بشیم شررش کنده بشه. خداییش خودمو خیلی جاها اذیت کرده 😅
آقا جون بعضی وقتا یه وب پیچ یا کلاینت میخواد به منابعی دسترسی پیدا کنه که روی دامین خودش نیست ، مثلا میخواد فونت رو از یک سایت لود کنه ، عکس رو از یه دامین دیگه و همینجور الی آخر.
خب این قضیه دو طرف باید هندل بشه. اول اینکه اون سرور ثانویه که میخواد این منابع رو در اختیار بذاره تایین میکنه کی میتونه دسترسی داشته باشه کی نمیتونه. هندل کردن این قضیه بر عهده بک انده. باید بیاد cors policy رو هندل کنه که همه access allow origin رو * میذارن میره ولی به شدت کار اشتباهیه. توی پروداکشن درستش کنید.
حالا سمت فرانت هم این قضیه باید هندل بشه. میان روی چیزایی مثل تگ noscript یه attribute اضافه میکنن به اسم crossorigin که دوتا مقدار anonymous و use-credentials رو میگیره.
قصد آموزش عمیقش رو ندارم. فقط معرفی بود و اینکه ببینید چیز عجیبی نیست ولی خیلی سرطانه.
یه سرچ ساده بزنید اوکیه.
#cors
بیاید یک بار واسه همیشه باهاش آشنا بشیم شررش کنده بشه. خداییش خودمو خیلی جاها اذیت کرده 😅
آقا جون بعضی وقتا یه وب پیچ یا کلاینت میخواد به منابعی دسترسی پیدا کنه که روی دامین خودش نیست ، مثلا میخواد فونت رو از یک سایت لود کنه ، عکس رو از یه دامین دیگه و همینجور الی آخر.
خب این قضیه دو طرف باید هندل بشه. اول اینکه اون سرور ثانویه که میخواد این منابع رو در اختیار بذاره تایین میکنه کی میتونه دسترسی داشته باشه کی نمیتونه. هندل کردن این قضیه بر عهده بک انده. باید بیاد cors policy رو هندل کنه که همه access allow origin رو * میذارن میره ولی به شدت کار اشتباهیه. توی پروداکشن درستش کنید.
حالا سمت فرانت هم این قضیه باید هندل بشه. میان روی چیزایی مثل تگ noscript یه attribute اضافه میکنن به اسم crossorigin که دوتا مقدار anonymous و use-credentials رو میگیره.
قصد آموزش عمیقش رو ندارم. فقط معرفی بود و اینکه ببینید چیز عجیبی نیست ولی خیلی سرطانه.
یه سرچ ساده بزنید اوکیه.
#cors
فرق Debounce با Throttle توی جاوااسکریپت چیه؟
تکنیک Throttle یعنی اینکه یک فانکشن خاص توی تایم فریمی خاصی مثلا هر پنج ثانیه بیشتر از یکبار قابل اجرا نباشه.
تکنیک Debounce یعنی فانکشن خاصی بعد از تایم فریم خاصی اتفاق بیفته.
درظاهر یک هدف رو دارن ولی اگر دقت کنید کلا دو تا چیز مختلفن.
اینایی که گفتم برای جاوا اسکریپت بود و روی هر فریم ورکی میتونید پیادش کنید یا از کتابخونههای مختلف استفاده کنید. اگر هم از چیزی مثل ریکت استفاده میکنید به نظرم از هیچ کدوم استفاده نکنید و برید سراغ useDefferedValue
#react #debounce #throttle #hooks #js
تکنیک Throttle یعنی اینکه یک فانکشن خاص توی تایم فریمی خاصی مثلا هر پنج ثانیه بیشتر از یکبار قابل اجرا نباشه.
تکنیک Debounce یعنی فانکشن خاصی بعد از تایم فریم خاصی اتفاق بیفته.
درظاهر یک هدف رو دارن ولی اگر دقت کنید کلا دو تا چیز مختلفن.
اینایی که گفتم برای جاوا اسکریپت بود و روی هر فریم ورکی میتونید پیادش کنید یا از کتابخونههای مختلف استفاده کنید. اگر هم از چیزی مثل ریکت استفاده میکنید به نظرم از هیچ کدوم استفاده نکنید و برید سراغ useDefferedValue
#react #debounce #throttle #hooks #js
اتمیک دیزاین چیه؟ خوندشنو برای همه پیشنهاد میکنم. بیشتر یه طرز تفکره
https://bradfrost.com/blog/post/atomic-web-design/
#atomic_design
https://bradfrost.com/blog/post/atomic-web-design/
#atomic_design
Media is too big
VIEW IN TELEGRAM
ترجمه فارسی ۳۳ بخش اول
آماده برای پرینت
https://github.com/alithecodeguy/persian-javanoscript.info
#js #github
آماده برای پرینت
https://github.com/alithecodeguy/persian-javanoscript.info
#js #github
اگر دارید نیرو جذب میکنید ، سوالاتی نپرسید که خودتون بعد ۶ ماه جوابشو پیدا کردید. حالا توی لول سنیور شاید یه مقدار منطقی باشه ولی توی لول جونیور و میدل ، اخلاقی نیست.