🔺می‌خواید ببینید یک وب‌سایت از چه فونت‌هایی استفاده می‌کنه؟ این ابزار رو ببینید:
https://fonty.io

#links

🔺برای نام‌گذاری تایپ‌ها توی تایپ‌اسکریپت چه استانداردهایی وجود داره؟

۱. از حالت PascalCase استفاده کنیم. مثلاً User یا UserActivity

۲. از اسم‌هایی که برای شما و بقیه توسعه‌دهنده‌ها خوانا و واضح هستن استفاده کنیم. مثلاً CustomerRecord بجای Record

۳. از حالت مفرد بجای جمع استفاده کنیم. مثلاً UserActivity بجای UserActivities. اگه نیاز به حالت جمع بود می‌تونیم براحتی از UserActivity[] استفاده کنیم

۴. اگه از اینترفیس‌ها استفاده می‌کنین، از حرف I ابتدای اسم استفاده کنیم (اختیاری). مثلاً IBook

۵. از اسم‌های کلی (جنرال) برای تایپ‌های مشابه خودداری کنیم. و بهتره تایپ‌ها کاربرد مشخصی داشته باشن (اصل چهارم اصول سالید)

۶. قانون Hungarian notation. یعنی از آوردن نوع تایپ توی اسم تایپ خودداری کنیم. مثلاً UserNameString

۷. برای جنریک‌ها اشکالی نداره که از اسم‌های خوانا استفاده کنیم. مثلاً func<TItem> بجای func<T>

مقالات تایپ‌اسکریپت:
ditty.ir/c/typenoscript

#typenoscript

این پکیج رو آپدیت کردیم و چند تا ویژگی اضافه کردیم. از جمله قابلیت نمایش پیام‌های دلخواه وقتی یک Regex با خطا مواجه میشه.

همچنین آموزش استفاده از اون توی ری‌اکت رو هم قرار دادم.

ممنون میشم حمایت کنین 😉✌️👇
https://github.com/upjs/facile-validator
#tools

یک نمونه دیگه از این دست سوالات رو میتونین اینجا پیدا کنین:
https://github.com/viraptor/reverse-interview


که به فارسی هم ترجمه شده:
https://github.com/Kaaveh/reverse-interview/blob/master/translations/PERSIAN.md

#links

🔺منظور از Shallow Rendering توی برنامه های فرانت‌اند چیه؟ 🤔

ـ Shallow Rendering یک تکنیک تست‌نویسی هست که بیشتر توی فریم‌ورک‌های Component-Based مثل ویو و ری‌اکت دیده میشه

- وقتی می‌خوایم یک کامپوننت رو با تکنیک Shallow Rendering تست کنیم، هنگام تست فقط خود کامپوننت رندر میشه و کامپوننت‌های داخلی اون کامپوننت رندر نمیشن تا توجه و تمرکز روی خود کامپوننت والد باشه

- با این کار، تست کردن راحت‌تر، سریع‌تر و دقیق‌تر خواهد بود. اما باید بدونیم که استفاده از Shallow Rendering همیشه خوب نیست.

از معایب Shallow Rendering اینه که:
- ممکنه رفتارهای اون کامپوننت رو توی محیط‌های واقعی نادیده بگیریم
- اگه کامپوننت به کامپوننت‌های داخلی وابستگی داشته باشه ممکنه حتی باعث سخت‌تر شدن تست بشه
- باعث نادیده گرفته‌شدن خیلی از تعامل‌های بین کامپوننت والد و فرزندها میشه که باعث میشه تست کمتر قابل اعتماد باشه
- پس بهتره از این تکنیک هم مثل هر چیز دیگه‌ای با آگاهی استفاده کنیم
#testing

🔺عملگر Non-null Assertion توی تایپ‌اسکریپت چیه؟ 🤔

- توی این عکس اگه به انتهای خط اول نگاه کنین، یک علامت تعجب انتهای اون عبارت قرار گرفته

- این عملگر به تایپ‌اسکریپت میگه که ما مطمئن هستیم این عبارت Null نیست و لطفاً توی ادامه Null بودن اون رو بررسی نکن

- بدون اون عملگر، تایپ‌اسکریپت توی خط ۳ خطا نشون میداد که:
'el' is possibly 'null'

- این کد رو می‌تونید توی این صفحه اجرا کنین
#typenoscript

🔺معیار LCP از Core Web Vitals

- گوگل با LCP مدت زمانی که طول می‌کشه بزرگترین المنت توی Viewport لود بشه رو اندازه‌گیری می‌کنه

- دلایلی مثل غیر بهینه‌بودنِ سرور و تصاویر و فایل‌های جاوااسکریپتی و فونت‌ها می‌تونن امتیاز پایینی برای LCP رقم بزنن

- با استفاده از تکنیک‌هایی مثل SSR و SSG و بهینه‌سازی تصاویر و ریسورس‌ها می‌تونیم یک LCP عالی داشته باشیم

- توی این پست بیشتر با دلایل LCP ضعیف و با نکاتی برای بهبود اون آشنا می‌شیم:
ditty.ir/535

#performance

روحتون شـــاد، در یــاد ما زنــده خواهید مــاند 🌹💚

#ps752
#iWillLightACandleToo

🔺هزاران آیکون SVG 👌

• https://iconbuddy.app
• https://fonty.io
• https://iconoir.com
• https://healthicons.org
• https://atlasicons.vectopus.com
• https://www.mingcute.com

#links

🔺سوال مصاحبه: چرا توی JSX ری‌اکت، برای رندر کردن یک لیست از ()forEach. بجای ()map. استفاده نمی‌کنیم؟

- جوابتون رو توی کامنت‌ها به اشتراک بذارین👇👏

#quiz

🔺ترفند: توی کنسول کروم و فایرفاکس می‌تونیم با استفاده از 0$ به آخرین المنتی که توی تب Inspect انتخاب شده دسترسی داشته باشیم
#tricks

🔺یه نکتهٔ ریز ری‌اکتی که دوست داشتم براتون به اشتراک بذارم

- همونطور که می‌دونیم وقتی توی یک کامپوننت والد تغییری رخ میده (مثلاً State بروز میشه)، باعث میشه کامپوننت‌های فرزند Re-render بشن. برای جلوگیری از این اتفاق می‌تونیم از React.memo تو کامپوننت فرزند استفاده کنیم


- کامپوننتی که از React.memo استفاده می‌کنه، فقط زمانی Re-render میشه که تغییری توی Props اون رخ بده


- حالا فرض کنیم می‌خوایم از کامپوننت والد به فرزند یک آبجکت یا یک تابع (Callback) رو پاس بدیم. اینجا حتی اگه تغییری توی این آبجکت یا تابع رخ نده، در صورت ری‌-رندر شدن کامپوننت والد، کامپوننت‌های فرزند در هر صورت (با memo یا بدون اون) ری-رندر میشن


- دلیل این اتفاق اینه که توی Re-render هایی که برای یک کامپوننت رخ میده، تمام State ها از نو ساخته میشن و بنابراین اگه یک State از نوع آبجکت داشته باشیم، اون آبجکت توی رندر اولیه کاملاً متفاوت هست با آبجکتی که توی رندرهای بعدی داریم. گرچه ممکنه تغییری توی ظاهر آبجکت رخ نده، می‌دونیم که دو آبجکت با ظاهر یکسان با هم برابر نیستن


- بنابراین اگه یک کامپوننت فرزند داره از React.memo استفاده می‌کنه و در صورتی که داریم یک آبجکت یا تابع (توابع هم نوعی آبجکت هستن) رو به اون کامپوننت پاس می‌دیم، با Re-render شدن کامپوننت والد، کامپوننت فرزند باز هم Re-render میشه. چون React.memo می‌بینه که پراپرتی‌ها با هم برابر نیستن {} ==! {}


- اینجاست که هوک‌های useCallback و useMemo به کارمون میان. این هوک‌ها تضمین می‌کنن که توی رندرهای متعدد، مقدارها و توابع ما بدون تغییر باقی می‌مونن و توی هر رندر دقیقاً همون مقدار پیشین رو برمی‌گردونن (از useRef هم میشه استفاده کرد)


- بنابراین، اگه جایی از برنامه پرفورمنس برامون اهمیت داره و به کامپوننت‌های فرزند داریم مقادیر غیر Primitive (آبجکت، آرایه، تابع کال‌بک) پاس می‌دیم، بهتره به این نکته توجه کنیم


- مثال عملی رو می‌تونید از اینجا ببینید:
https://bit.ly/3O9oTIm


پ.ن: این فقط یکی از کاربردهای useMemo هست. کاربرد اصلی اون کش کردن خروجی توابع هست.
#react #tricks

🔺نویسندهٔ کتاب You Don't Know JS، آقای کایل سیمپسون یه جایی درباره رجکت شدنش توی مصاحبه با یه شرکت معروف صحبت می‌کرد و می‌گفت اون شرکت با دلیل اینکه «فکر نمی‌کنیم به اندازهٔ کافی جاوااسکریپت بلد باشی» من رو رد کردن.

- داستان‌های جالبی رو از رجکت شدن افراد توی مصاحبه‌های شغلی اینجا می‌تونین ببینین:
https://rejected.us

#interview

🔺می‌خواید به صورت عملی ببینید #جاوااسکریپت چطوری عملیات Async رو مدیریت می‌کنه؟ اینجا رو ببینید:👇
https://www.jsv9000.app

#links

🔺همینطور که به روز ولنتاین نزدیک می‌شیم، بد نیست کدهای HTTP رو با مثال‌هایی از این روز یاد بگیریم:
HTTP codes as Valentine’s Day comics

#fun

🔺 تجربه مصاحبه

دوستان توی #مصاحبه وقتی از شما سوالی میشه، فوراً شروع نکنین به جواب دادن. سعی کنین اطلاعات بیشتری از سوال بدست بیارین.

مثلاً از شما پرسیده میشه که بزرگترین چالشی که توی آخرین پروژه‌تون داشتین چی بوده. شما اینجا بهتره تلاش کنین که منظور سوال رو متوجه بشین. چه نوع چالشی منظورش هست؟ فنی؟ ارتباطی؟

یک جواب مناسب می‌تونه این باشه:
«راستش توی پروژه قبلی چالش‌های مختلفی داشتیم. هم فنی و هم غیر فنی. اما میشه لطفاً مشخص کنین که چه نوع چالشی منظورتون هست؟»

با این کار هم سوال رو دقیق‌تر متوجه میشین و می‌تونین جواب مناسب‌تری بدین، و هم زمان بیشتری برای فکر کردن به جواب بدست میارین.

#tips

🔺تجربهٔ مصاحبه

فرض کنین چنین سوالی ازتون پرسیده میشه: «برای شروع یک پروژه چه ابزارهایی رو انتخاب می‌کنید؟»

- جواب غلط: «من برای شروع یک پروژه از Next.js و GraphQL و تایپ‌اسکریپت و تیلویند و استوری‌بوک و [+۱۰۰ ابزار دیگه که نشون بدیم چقدر خفن و با کاربلد هستیم]»

- چرا این جواب غلطه؟ چون با حداقل اطلاعات و چشم‌بسته داریم چنین جوابی رو می‌دیم و بنابراین نشون‌دهندهٔ تعصب هست. شما برای شغل ری‌اکتی اقدام کردین و مصاحبه‌کننده قطعاً می‌دونه که شما در حالت عادی از چنین ابزارهایی استفاده می‌کنین. یک مصاحبه‌شونده و یک مصاحبه‌کنندهٔ سالم از تعصب خوشش نمیاد. و تعصب هم یعنی یک هم‌تیمی مغرور و غیر قابل انعطاف.

- جواب درست: «کاملاً بستگی داره. من قبل از شروع پروژه بررسی می‌کنم که موضوع پروژه چیه، چقدر زمان و بودجه در نظر گرفته شده. در واقع باید ابتدا اولویت‌ها رو بررسی کنیم و همچنین ببینیم افرادی که توی پروژه دخیل هستن چه مهارت‌هایی دارن. و براساس این اطلاعات حتی شاید مجبور بشیم با ابزارهایی کار کنیم که تابحال تجربهٔ نداشتیم.»

- در واقع بهتره که از تکنیک پست قبل هم استفاده کنین. مثلاً به مصاحبه‌کننده بگید که «کاملاً بستگی داره» و ازش بخواین که بیشتر توضیح بده. مثلاً:
«راستش بسته به اینکه موضوع پروژه و نیازهای ما چه چیزهایی هستن، ابزارهای متفاوتی رو میشه به کار گرفت. امکانش هست لطفاً بیشتر درباره این موارد توضیح بدین تا جواب بهتری می‌تونم بدم؟» اون هم مشتاقانه جواب میده «بله بله! البته! ببینید، ... » و شما هم زمان بیشتری بدست میارین تا به سوال فکر کنین و هم جواب مرتبط‌تری می‌دین :)
#tips

🔺ـReact Strict DOM چیه؟ 🤔

- اگه تجربه توسعه برنامه‌های موبایلی با React Native رو داشته باشین، می‌دونین که استفاده از کامپوننت‌های ری‌اکت نسخه وب توی نِیتیو خیلی هم ساده نیست. و باید از یک‌سری کامپوننت‌های خاص استفاده کرد

- مثلاً توی نیتیو نمی‌تونیم از div استفاده کنیم و بجاش باید از المنت View استفاده کرد

- اما فیسبوک این پکیج (که فعلاً آزمایشی هست) رو چند روز پیش منتشر کرده که اجازه میده کامپوننت‌هایی داشته باشیم که به قول معروف Universal و عمومی‌تر هستن و کمک می‌کنن راحت‌تر بتونیم از کامپوننت‌های موجود بین برنامه‌های وب و نیتیو استفاده کنیم

- برای مثال بجای استفاده از <div> و یا <View>، از یک المنت مشترک به اسم <html.div> استفاده می‌کنیم. و این ابزار پشت پرده کار تبدیل رو به‌صورت خودکار انجام میده

🔗 مشاهده نمونه
#react

🔺آشنایی با ویژگی‌های جدید جاوااسکریپت (ES14)

- توی اکمااسکریپت ١۴ ویژگی‌های جالبی رو داریم از جمله چند متد کاربردی مربوط به آرایه‌ها

- توی این پست با این ویژگی‌ها که توی جدیدترین نسخه‌های جاوااسکریپت و تایپ‌اسکریپت در دسترس هستن آشنا بشیم:
https://ditty.ir/536

#javanoscript

سال قبل کلی پیام از شما گرفتم که مشکلات و دغدغه‌هاتون رو با من در میون گذاشتین. اگه بخوام همه این تجربه رو توی یک جمله خلاصه کنم، میشه: «یکمی بیشتر با هم مهربون باشیم»

سال نو همگی دوستان مبارک باشه 👋

#1403

🔺ترفند ری‌اکتی

- توی ری‌اکت وقتی از useState استفاده می‌کنیم، برای مقدار اولیه اون، بجای پاس دادن مقدار به‌صورت مستقیم می‌تونیم اون رو توی یک تابع محصور کنیم (مثل عکس)

- توی عکس همونطور که می‌بینیم، تابعی داریم به اسم heavyCalculation که مثلاً کار سنگینی انجام میده و می‌خوایم خروجی اون رو به عنوان مقدار useState قرار بدیم

- می‌تونستیم این کار رو بدون استفاده از تابع هم انجام بدیم، که توی این حالت باید بدونیم که هر بار که این کامپوننت رندر میشه، تابع پاس داده‌شده هم مجدد اجرا میشه. که اگه عملیات ما سنگین باشه باعث افت عملکرد کامپوننت میشه

- حالا وقتی که تابع یا یک عملیات سنگین رو توی یک تابع محصور می‌کنیم، ری‌اکت توی رندر ابتدایی، این تابع رو اجرا و توی رندرهای بعدی از خروجی این تابع (که توی رندر ابتدایی محاسبه شده) استفاده می‌کنه. یعنی فقط یک بار اجرای اون عملیات سنگین

- از این ترفند بهتره زمانی استفاده کنیم که واقعاً عملیات سنگینی داریم که هر بار اجرای اون، عملکرد کامپوننت رو تحت تأثیر قرار میده

- مشاهدهٔ نمونه عملی

#react