🔺ـReact Strict DOM چیه؟ 🤔

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

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

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

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

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

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

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

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

#javanoscript

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

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

#1403

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

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

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

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

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

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

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

#react

🔺توی جاوااسکریپت و مبحث پرامیس‌ها، تفاوت متدهای race و any چیه؟ متد all و allSettled چطور؟ 🤔

- این متدها که از Promise به صورت استاتیک قابل دسترس هستن (یعنی مثلاً ()Promise.resolve یا ()Promise.race) کاربردهای زیادی دارن و بهمون کمک می‌کنن یک برنامهٔ سریع‌تر و پویاتر داشته باشیم. توی این پست این متدها رو بررسی می‌کنیم و با مثال‌هایی از کاربرد اونها توی دنیای واقعی آشنا می‌شیم:
ditty.ir/537

#javanoscript

🔺تصاویر، فونت‌ها، اسکریپت‌ها و فایل‌های یک برنامهٔ فرانت‌اندی رو چطوری مدیریت کنیم؟ 🤔

- یکی از مهارت‌هایی که به‌عنوان توسعه‌دهندهٔ فرانت‌اند باید اون رو بلد باشیم، نحوهٔ مدیریت Asset های برنامه هست

- توی این پست نکته‌ها و تجربیاتی رو برای مدیریت Asset ها (فایل‌ها و تصاویر و ...) توی برنامه‌های فرانت‌اند براتون به اشتراک گذاشتم:
ditty.ir/540

#tips

🔺 توی برنامه‌های فرانت‌اندی، آیا تفاوت Building و Bundling رو می‌دونیم؟ 🤔 تفاوت Minify و Uglify چطور؟

- توی این پست دیتی می‌خوایم ۶ واژه که شبیه به هم هستن رو بررسی کنیم:
ditty.ir/543

#frontend

🔺با HTTP Caching و نحوهٔ کارکرد اون توی مرورگر آشنا بشیم

- توی این پست می‌خوایم با چند هدر HTTP آشنا بشیم که بطور اختصاصی برای Caching و مدیریت ذخیره‌سازی اطلاعات استفاده میشن

- این تکنیک با حذف کردن درخواست‌های HTTP اضافی، استفاده از پهنای باند رو به شکل قابل توجهی کاهش میده که نتیجهٔ اون افزایش سرعت و عملکرد برنامه‌های فرانت‌اندی هست

- جدیدترین پست دیتی:
ditty.ir/545

#frontend

🔺سرویس‌ ورکر (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