🔺سرویس‌ ورکر (Service Worker) چیه؟ 🤔

- سرویس ورکر به اسکریپت‌هایی گفته میشه که پشتِ پردهٔ برنامه‌های فرانت‌اندی اجرا میشن. به طوری که کاربر و Main Thread وجود اونها رو حس نمی‌کنه

- با سرویس‌ورکرها می‌تونیم:

• به شکل حرفه‌ای ریسورس‌ها رو کش کنیم و برنامه‌های آفلاین داشته باشیم
• عملیات و پردازش‌های سنگین انجام بدیم
• به کاربرا Push Notification ارسال کنیم
• و ...

- مهمترین هدف سرویس‌ورکر کم کردن حجم کارهای Main Thread هست. کارهایی که باعث افت کیفیت و سرعت برنامه‌های ما می‌شدن

- توی این قسمت می‌خوایم با سرویس‌ورکرها آشنا بشیم و ببینیم که چطوری می‌تونیم از این تکنیک برای Cache کردن ریسورس‌هامون استفاده کنیم:
ditty.ir/546

#frontend

🔺قابلیت Type Predicate توی تایپ‌اسکریپت چیه؟ 🤔

- تایپ‌اسکریپت یه قابلیت کاربردی داره به اسم Type Predicate که کمک می‌کنه نوع یک مقدار به شکل یک خاص‌تر و مشخص‌تر برای ما در دسترس باشه

- برای مثال توی شرایطی که نوع یک مقدار ممکنه عدد باشه یا رشته، این قابلیت به ما کمک می‌کنه که از نوع اون مقدار قطعیت داشته باشیم. به قول معروف عملیات Narrowing رو برامون راحت‌تر می‌کنه

- توی این پست ابتدا با مفهوم Narrowing آشنا می‌شیم و بعد Type Predicate رو بررسی می‌کنیم:
ditty.ir/549

#typenoscript

درود دوستان و همراهان خوب دیتی 👋

- من بعد از مدت زیادی که بسیار مشغله داشتم برگشتم و قصد دارم طبق روال قبل مرتب فعالیت داشته باشم و براتون چیزهای خوب خوب بنویسم

- مدتیه که پست‌های آموزشی ری‌اکت رو دارم منتشر می‌کنم که شامل پست‌های آموزشی کوتاه میشه حاصل تجارب شخصی من از محیط کاری و همچنین مصاحبه‌ها هست، و تا الان ۱۴ قسمت از اون منتشر شده و البته که قسمت‌های جذاب زیادی از اون هم توی راهه 💥

- پست‌ها رو می‌تونید از اینجا ببینید:
https://ditty.ir/series/react-101

- این پست‌ها رو طوری نوشتم که بتونید ازشون برای آمادگی مصاحبه‌ها استفاده کنین

#react

🔺بایدها و نبایدهای memo توی #ری‌اکت

- توی دنیای توسعه #نرم‌افزار تکنیک‌های بهینه‌سازی یک شمشیر دولبه هستن و استفاده نادرست ازشون ممکنه نتیجه عکس بده و برنامه رو غیر بهینه و توسعه رو پیچیده‌تر کنه!

- توی ری‌اکت شاید memo ویژگی خیلی قدرتمندی به حساب بیاد و کمک ‌کنه از رندرهای اضافی جلوگیری کنیم، اما قبل از استفاده از اون باید نکته‌هایی رو در نظر داشته باشیم، که توی این پست اونها رو بررسی می‌کنیم:
ditty.ir/567

#react

می‌دونستید توی تگ <select> میشه از تگ <hr> برای جدا کردن آپشن‌ها استفاده کرد؟ 👌

<select>
  <option>1</option>
  <option>2</option>
  <hr>
  <option>3</option>
  <option>4</option>
  <hr>
  <option>5</option>
  <option>6</option>
</select>

منبع | دمو

#tricks

🔺سندروم خودویرانگری چیه؟! 🤔

- یکی از مشکلات خیلی شایع که باهاش مواجه هستیم سندروم ایمپاستر (Imposter Syndrome) هست که متأسفانه تا حد زیادی مانع پیشرفت و دستیابی به موفقیت‌ها میشه

- توی این حالت شخص نمی‌تونه به اندازه کافی احساس خوب بودن کنه و حتی وقتی که شواهد این رو نشون میده، شخص نمی‌تونه دستاوردها و توانایی‌های خودش رو بپذیره و همیشه با یک حس شک و تردید به اونها نگاه می‌کنه

- اینکه همیشه حس‌های مثل شک به خود، دسته‌کم گرفتن توانایی‌ها، کار کردن بیش از حد و مقایسه خودمون با دیگران رو داشته باشیم، همگی نشونه‌ای از این سندروم هست

- توی این پست می‌خوایم درباره اون بیشتر صحبت کنیم، مثال بزنیم و راه‌های مقابله با اون رو تمرین کنیم:
ditty.ir/570

#softwareEngineering

یک لیست بلند و بالا از وبسایت‌هایی که دوره‌های آموزشی رایگان به‌همراه گواهی ارائه میدن 🥇
https://free-certifications.com

#links

🔺گیت و ۶ تا از مهمترین تجربیات من

- تجربیات و نکاتی رو از استفاده از Git رو براتون به اشتراک گذاشتم که کمک می‌کنن با این ابزار به شکل بهتر و موثرتری استفاده کنیم:

ditty.ir/572

#git

🔺هنرِ Code Review 📝

- یکی از کارهای مهمی که تقریباً همهٔ ما هر روز اون رو انجام می‌دیم و تأثیر قابل توجهی توی تیم و روند توسعهٔ برنامه داره انجام Code Review هست که کمتر کسی اون رو بهمون یاد داده یا منبع مشخصی برای یادگیری اون هست.

- اما طبق تجریبات خودم و دیگران سعی کردم توی جدیدترین پست دیتی 10+ نکتهٔ مهم برای بررسی کدهای یک هم‌تیمی رو بررسی کنم:
ditty.ir/575

#tips

🔺جزییات و نکات پیاده‌سازی تکنیک‌های Debounce و Throttle توی ری‌اکت

- این دو از تکنیک‌های پرکاربرد بهینه‌سازی و افزایش سرعت و کیفیت هر برنامه‌ای هستن و به قول معروف برای Rate Limiting به کار میرن

- تکنیک Debounce تضمین می‌کنه یک قطعه کد زمانی اجرا بشه که یک مدت زمان مشخصی از آخرین تلاش برای اجرای اون گذشته باشه. مثلاً یک تابع ده بار پشت سر هم فراخونی میشه، اما می‌خوایم اجرای واقعی اون موقعی باشه که ۵ ثانیه از آخرین فراخونی گذشته باشه.
آشنایی با این تکنیک:
ditty.ir/577

- تکنیک Throttle هم تضمین می‌کنه که کدهای ما توی یک بازه زمانی مشخص فقط یک بار اجرا بشن. مثلاً می‌خوایم یک تابع توی هر بازه زمانی ۵ ثانیه فقط یک بار اجرا بشه. پیاده‌سازی این تکنیک:
ditty.ir/573

#react

🔺از ۱۱۴ تگ HTML چند تا رو می‌تونید از حفظ نام ببرین؟ 👇
https://codepen.io/plfstr/full/zYqQeRw


- من حدود ۴۰ تا 👀

#links

توی قسمت قبل با مهارت‌های انجام یک Code Review خوب آشنا شدیم. اما این برای اینکه این پروسه خوب و کامل انجام بشه کافی نیست

- وقتی درخواست Code Review می‌دیم هم می‌بایست یک سری نکات رو رعایت کنیم تا انجام این به راحت‌ترین و مؤثرترین شکل انجام بگیره

توی این قسمت می‌خوایم با مهارت‌های درخواست Code Review آشنا بشیم:
https://ditty.ir/p/5jPdX

#imse

آرایه با عضو اجباری توی تایپ‌اسکریپت؟ 🤔

برای مثال چکار کنیم وقتی می‌خوایم یک تایپ برای یک آرایه داشته باشیم که:

۱. اعضای اون عددی باشن
۲. می‌خوایم کاربر رو مجبور کنیم که حتماً این آرایه رو خالی نذاره

از ترفند خط ۶ عکس استفاده می‌کنیم 👌

#typenoscript

یه نویسندهٔ جدید و خوش ذوق به دیتی اضافه شده به اسم امیررضا 😉🔥

- بیشتر درباره ری‌اکت می‌نویسه. از پست‌هاش استفاده کنین:

- هرچیزی که باید از کاستوم هوک ها بدونیم
- هدف از ساخت Suspense کامپوننت‌ها چیه؟
- هرچیزی که باید از هوک useDeferredValue بدونیم
- چه روش‌هایی برای دیباگ کردن برنامه ری‌اکتی می‌شناسین؟

#react

🔺قابلیت Locked scrolling توی VS Code

- گاهی اوقات حین اینکه دو تا فایل رو با همدیگه مقایسه می‌کنیم، می‌خوایم با اسکرول توی یک فایل، اون فایل هم به‌صورت خودکار اسکرول بشه

- کافیه Command Palette رو باز کنیم و بنویسیم:

View: Toggle Locked Scrolling Across Editors

- پ.ن: Command Palette با دکمه‌های Ctrl+Shift+P (توی مک P⇧⌘) باز میشه

#tips

🔺کد ریویو (Code Review) با هوش مصنوعی

- توی شرکت قبلی که بودم یه ابراز هوش مصنوعی اضافه شده بود به اسم CodeRabbit که وقتی توی گیت‌هاب یه PR می‌ساختیم، خودش به صورت خودکار میومد کدها رو چک می‌کرد و به قول معروف Code Review انجام میداد

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

- این ابزار واقعاً کمک‌کننده بود. چون خیلی از ماها وقتی کد ریویو انجام می‌دیم، زمان زیادی رو صرف می‌کنیم برای بررسی خط به خط کدها تا انواع مختلف خطاها رو گزارش بدیم، و امان از روزی که یک PR با ۳۰۰ فایل سر راهمون قرار می‌گرفت 🙈

- عیبی که این ابزار داره اینه که اولاً پولی هست و شاید استفاده از ایران راحت نباشه (البته ۱۴ روز استفاده رایگان داره). دوم اینکه دوستانی که به توی PR ها ایرادهای الکی می‌گیرن بیکار میشن 😄

پست مرتبط:
هنرِ درخواست Code Review - مهارت‌هایی برای درخواست بررسی کدها از یک هم‌تیمی

#tools

🔺وایب کدینگ (Vibe Coding) چیه که همه جا دارن دربارش صحبت می‌کنن؟

- وقتی این رو از ChatGPT پرسیدم حس کردم یه یکمی در جریان موضوع نیست. مثلاً گفت:

مدلی از کدنویسی که شخص خیلی ریلکس و با آرامش کدنویسی می‌کنه، موزیک ملایم پخش میشه، تم‌های جذاب ادیتور و ابزارهای کار مثل ماوس و کیبورد جالبی استفاده میشه.

- اما در واقع عبارت Vibe Coding که کمتر از ۳ ماه میشه که سر زبون‌ها افتاده، روشی برای توسعهٔ نرم‌افزار هست که شخص کاملاً با وابستگی به AI توسعه رو انجام میده. یعنی مسئله رو برای AI شرح می‌دیم و اون برامون کدها رو تولید می‌کنه. یعنی همون کاری که بیشتر ماها هر روز داریم انجام می‌دیم :)

- توی این روش، افراد تازه‌کار می‌تونن کدهایی در سطح افراد باتجربه بنویسن. به نظر من اولویت‌ها برای تشخیص یک توسعه‌دهندهٔ خوب داره عوض میشه. به نظر شما مهندس نرم‌افزار خوب توی عصر هوش مصنوعی چه ویژگی‌هایی داره؟

🔺سوال مصاحبه: چه زمانی از SSR استفاده کنیم؟ چه زمانی از SSG و چه زمانی از CSR؟

ـ SSR که مخفف Server-side Rendering هست برای زمانی مناسبه که سئو اهمیت داره. مثلاً برای بلاگ‌ها و صفحاتی که برای جذب کاربر طراحی شده (Marketing Pages). به این دلیل که موتورهای جستجو راحت‌تر می‌تونن محتویات صفحه رو بخونن

- اگه محتویات صفحات ما داینامیک نیستن و در گذر زمان خیلی تغییر نمی‌کنه و همچنین تعامل زیادی با کاربر نداره، اما همچنان سئو اهمیت داره، بهتره که از SSG یا Static Site Generation استفاده کنیم. چون صفحات ما یک بار تولید و کش میشن و تا زمانی که نیاز نباشه، از همون محتویات کش شده استفاده میشه

- اما اگه می‌خوایم یک دشبرد طراحی کنیم و یا مثلاً محتویات صفحه بعد از احراز هویت به کاربر نمایش داده میشه، از CSR یا همون Client-side Rendering استفاده کنیم. به این دلیل که برنامهٔ ما بعد از لود اولیه خیلی سریع‌تر می‌تونه عمل کنه

- بعضی وقت‌ها هم لازمه بعضی از این روش‌ها رو با هم ترکیب کنیم. که این روش با عنوان ISR یا Incremental Static Regeneration شناخته میشه. توی ISR صفحه‌ها مثل SSG ساخته میشن، اما بعد از مدتی توی بازه‌های زمانی مشخص به طور خودکار محتویات اونها بروز میشه. توی این روش، صفحه‌ها سرعتی به اندازه SSG ها دارن، اما مثل SSR همیشه بروز هستن

#ux

🔺ـ Subresource Integrity چیه؟ 🤔

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

- وقتی یه اسکریپت توی صفحه لود میشه، می‌تونه به همهٔ اطلاعات صفحه دسترسی داشته باشه. و اگه مثلاً اون CDN هک بشه، هکر می‌تونه محتویات ریسورس رو دستکاری کنه به‌طوری که به‌راحتی می‌تونه اطلاعات هر کاربری رو بخونه

- برای جلوگیری از این اتفاق، مرورگرها یک قابلیت امنیتی دارن به اسم Subresouce Integrity یا به‌طور خلاصه SRI

- توی این پست با این ویژگی و نحوهٔ پیاده‌سازی اون بیشتر آشنا می‌شیم:
ditty.ir/587

#frontend