رقصنده با کد – Telegram
رقصنده با کد
780 subscribers
1.69K photos
850 videos
207 files
666 links
Here are some interesting things I've come across during my learning process. That's it. Admin ID:
@alithecodeguy
Download Telegram
مقایسه SWR و ReactQuery از نظر pagination
#reactquery #swr
مقایسه SWR و ReactQuery از نظر infiniteScroll یا infiniteQueries
هر چند که ReactQuery آپشن‌های بیشتری در اختیار میذاره ولی احساس میکنم در اکثر موارد فقط اضافه کاریه و پیاده سازی SWR بهتره
#reactquery #swr
یک مدت پیش یک مصاحبه‌ای داشتم که نفر مصاحبه کننده بسیار انسان مسلطی بود. یکی از سوالها این بود که 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
Media is too big
VIEW IN TELEGRAM
در ادامه پست قبل در خصوص cherry-pick ، پیشنهاد میکنم حتما این ویدیو رو هم ببینین
#git #cherry_pick @alithecodeguy
Media is too big
VIEW IN TELEGRAM
بدون ابزار ثانویه ، چه جوری چند نفر همزمان میتونن از طریق گیت‌هاب روی یک پروژه کار کنن؟
مشروح و با مثال عملی توی این ودیو توضیح داده.
این رو میتونید با cherry-pick که توی پست قبلی اومده ترکیب کنید و یک solution کامل بدست بیارید.
#git #team_work @alithecodeguy
چطوری رنگ بک گراند کامنت ، و آیکون های وی اس کد رو عوض کنیم .کافیه توی فولدر ستینگ این تنظیماتی که توی کامنت هست اضافه کنید
چند روز قبل یه بنده خدایی یه کدی داد توی ۴ ساعت بزنم ، اگر دیزاین داشت ، میشد بهش گفت اپ کوچیک و کامل.
از چیزایی که توی ریدمی بود بین ۱۲ تا ۴ صبح ، کد رو با تایپ اسکریپت و تیلویند و ریکت هوک‌فرم زدم ، فرداش گفت باید میپرسیدی چیکار باید کنی ، هدف من سوال پرسیدن شما بود 😑
درک کردن بعضی‌ها واقعا سخته.
دوستان گرامی اینترنت متاسفانه وضع افتضاحی داره. هم گوشی هم ADSL. تماس های تصویری به دفعات قطع میشه. جلسه امروز رفت برای هفته آینده ببینم بیخیال میشن یا نه.
formik_vs_react-hook-form.pdf
1.8 MB
مقایسه تخصصی Formik و React Hook Form
(ترجمه خودمه)
#react #formik #react_hook_form #form
اینکه ریکت رو به ورژن ۱۸ آپدیت کنید ، دلیل نمیشه زیرساخت جدیدش که concurrency باشه به صورت خودکار استفاده بشه. برای استفاده از زیرساخت جدید حتما باید از ویژگی‌های جدیدش استفاده کنید.
#react #react18
گویا پروژه‌هامو رو فعلا نبریم روی ریکت ۱۸ بهتره.
۱۷ رو ادامه بدیم تا ببینیم چی پیش میاد
#react
ایشون Deno هستن که به عنوان جایگزینی برای NodeJs ظهور پیدا کرد ولی خب زورش فعلا به NodeJs نمیرسه ولی از اونجا که بازار آی تی بالا پایین زیاد داره ، ممکنه بیاد جای واقعیش رو پیدا کنه.
یه نیم نگاهی بهش کنید ضرر نداره.
#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
هر چی بیشتر ریکت میخونم بیشتر متوجه میشم چه قدر این صفحه رو درک نکردم.
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
وقتی سمت کلاینت fetch میزنید ، خطاها رو توی همون then بگیرید و نذارید به catch برسه.
#fetch #tip
فرق Debounce با Throttle توی جاوااسکریپت چیه؟
تکنیک Throttle یعنی اینکه یک فانکشن خاص توی تایم فریمی خاصی مثلا هر پنج ثانیه بیشتر از یکبار قابل اجرا نباشه.
تکنیک Debounce یعنی فانکشن خاصی بعد از تایم فریم خاصی اتفاق بیفته.
درظاهر یک هدف رو دارن ولی اگر دقت کنید کلا دو تا چیز مختلفن.
اینایی که گفتم برای جاوا اسکریپت بود و روی هر فریم ورکی میتونید پیادش کنید یا از کتابخونه‌های مختلف استفاده کنید. اگر هم از چیزی مثل ریکت استفاده میکنید به نظرم از هیچ کدوم استفاده نکنید و برید سراغ useDefferedValue
#react #debounce #throttle #hooks #js
اتمیک دیزاین چیه؟ خوندشنو برای همه پیشنهاد میکنم. بیشتر یه طرز تفکره
https://bradfrost.com/blog/post/atomic-web-design/
#atomic_design