Tech Stuff

بهبود پرفورمنس با will-change در CSS توی این پست درباره will-change در CSS صحبت کردم. این پراپرتی کمک می‌کنه مرورگر از قبل برای تغییرات سنگین آماده بشه و رندر روان‌تری داشته باشیم. بیشتر به درد انیمیشن‌ها، transitionها و تعاملات UI می‌خوره. پست درباره اینه که کِی و چطوری ازش استفاده کنیم که واقعا به پرفورمنس کمک کنه، نه این‌که برعکس دردسر درست کنه. @techstuff100

بهبود پرفورمنس اسکرول با Passive Event Listener توی این پست درباره passive event listener صحبت کردم. این گزینه کمک می‌کنه اسکرول و تعامل‌های کاربر روان‌تر اجرا بشن. @techstuff100

دانلود زودتر منابع مهم با rel=preload توی این پست درباره‌ی "rel="preload صحبت کردم. باهاش می‌تونیم دانلود منابع مهم مثل CSS و JavaScript رو زودتر از روند عادی مرورگر شروع کنیم، بدون این‌که روی اعمال شدن یا اجرای اون‌ها تاثیر بذاریم. همین‌طور توضیح دادم as چه نقشی داره و چرا مشخص کردن درستش برای عملکرد و cache مرورگر مهمه. @techstuff100

معماری Master–Slave در دیتابیس‌ها ا Replication یعنی اینکه یه کپی از دیتابیس رو روی چندتا نود (replica) داشته باشیم. اما وقتی یه چیزی روی دیتابیس نوشته میشه، چطور همه replicaها همون دیتا رو داشته باشن؟ راه‌حل رایج، مدل Master–Slave هست. توی این مدل، Master مسئول نوشتن دیتا هست و بعد تغییرات رو برای Slaveها می‌فرسته تا همه هماهنگ بمونن. نوشتن فقط روی Master انجام میشه، خوندن می‌تونه از Slaveها هم باشه. اما انتقال دیتا از Master به Slave می‌تونه شکل‌های مختلفی داشته باشه: توی حالت async، نود Master به محض نوشتن، response رو به کلاینت میده و Slaveها بعدا آپدیت میشن. توی حالت sync، نود Master صبر می‌کنه تا همه Slaveها آپدیت بشن و بعد response بده. حالت semi-sync هم یه چیزی بین این دوتاست. هرکدومش یه تعادل بین سرعت، سازگاری و ریسک از دست رفتن دیتا ایجاد می‌کنن. مقاله: https://www.enjoyalgorithms.com/blog/master-slave-replication-databases @techstuff100

کدی که کار می‌کنه کافی نیست! خیلی وقت‌ها توی پروژه‌ها فقط دنبال این هستیم که یه فیچر کار کنه و سریع تحویل بدیم. این روند اولش خوب پیش میره، ولی کم‌کم باعث پیچیدگی و کند شدن کار میشه... . #A_Philosophy_of_Software_Design @techstuff100

پیچیدگی (complexity) در سیستم‌های نرم‌افزاری تو طراحی نرم‌افزار، یکی از مهم‌ترین کارها اینه که بفهمیم چی سیستم رو پیچیده می‌کنه و چطور میشه جلوی این پیچیدگی رو گرفت. کتاب A Philosophy of Software Design تعریف خیلی کاربردی‌ای از complexity میده و نشونه‌ها و علت‌هاش رو بررسی کرده. #A_Philosophy_of_Software_Design @techstuff100

تایپ Function در TypeScript توی تایپ‌اسکریپت یه تایپ گلوبال به اسم Function داریم. این تایپ همه ویژگی‌های عمومی توابع جاوااسکریپت مثل bind و call رو پوشش میده؛ اما مشکلش اینه که وقتی ازش استفاده می‌کنیم، هر نوع تابعی رو قبول می‌کنه و موقع صدا زدن هم خروجی (return type) رو any در نظر می‌گیره. این باعث می‌شه چک‌های تایپ‌اسکریپت عملا بی‌اثر بشن. اینجا تایپ‌اسکریپت هیچ کنترلی روی ورودی‌ها و خروجی نداره. برای همین بهتره که تایپ توابع رو دقیق مشخص کنیم. ولی اگه زمان کافی برای این کار نداشتیم، استفاده ازش برای تایپ توابع، از تایپ any بهتره. @techstuff100

دیروز بعد ۲ ماه، آموزشی سربازیم توی نیروی دریایی ارتش تموم شد. توی این ۲ ماه مثل قبل نتونستم فعالیت کنم و یسری از کارهام عقب افتادن یا با تاخیر تونستم انجامشون بدم. توی مدتی که پادگان بودم، به امریه دانش‌بنیان و پروژه جایگزین خدمتم فکر می‌کردم که هر کدوم به یه دلیلی رد شدن. به وقت و انرژی که صرفشون کردم و تهش هم به نتیجه نرسیدن. با این حال از هر کدوم‌شون چیزایی یاد گرفتم، تجربه شدن و قطعا بی‌فایده نبودن و نکات مثبت خودشون رو داشتن. ماه اول آموزشی رو توی سلف پادگان بودم. با اینکه سختی‌ها و فشار کاری خودش رو داشت، برام تجربه جدیدی بود: شستن روزانه چندصد تا یغلوی، تمیز کردن میزها، جارو و طی زدن سلف، تحویل غذا از آشپزخونه، گرفتن نون از خبازخونه، کف‌پارتی و ... . توی آموزشی با آدم‌های خفنی آشنا شدم؛ هر کسی بیرون پادگان توی حوزه خودش کار می‌کرد و برای خودش کسی بود. چیزی که شاید وقتی لباس سربازی می‌پوشیم کمتر بهش توجه میشه اینه که هر کدوم از این سربازها بیرون از پادگان شخصیت و هویت خودشون رو دارن. توی زمان بیکاریم توی پادگان تونستم وقت بیشتری رو به مطالعه اختصاص بدم و کتاب Leaders Eat Last و همینطور نصف کتاب A Philosophy of Software Design رو بخونم (که کم‌کم پستشون رو میذارم). از این به بعد اگه شرایط درست پیش بره، سعی می‌کنم مثل قبل خدمت فعالیتم رو ادامه بدم و مرتب پست بذارم. #سربازی

آشنایی با Dynamic Remotes در پروژه‌های میکروفرانت‌اند توی این ویدیو Dynamic Remotes در Module Federation رو بررسی کردم که چطور میشه ریموت‌ها رو در زمان اجرا (runtime) لود کرد، نه موقع build. می‌بینیم که Host چطور بدون تعریف remotes در کانفیگ، می‌تونه هر ریموتی رو فقط موقع نیاز لود کنه. ویدئوی یوتوب: https://www.youtube.com/watch?v=W1cvFRd1nRk&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x @techstuff100

بهینه‌سازی performance در Twitter Lite توی این مقاله از چالش‌های performance توی Twitter Lite گفته میشه؛ مثل کند بودن لود اول، اجرای کند کامپوننت‌ها، تصاویر حجیم، re-renderهای غیرضروری و حتی مشکلات Service Worker. تیم توییتر با کارهایی مثل code splitting، بهینه‌سازی تصاویر، کنترل re-render و تعویق رجیستر Service Worker، قدم‌به‌قدم این bottleneckها رو رفع کردن و نتیجه‌ش یه PWA سریع و scalable روی React شده. مقاله با اینکه برای چند سال پیشه ولی نکات خیلی خوبی توش هست. لینک مقاله. @techstuff100

ریفکتور پروژه‌های چندزبانه با i18n-check پروژه‌های چندزبانه بعد از مدتی شلوغ و نامرتب میشن. کلیدهای استفاده نشده، ترجمه‌های گمشده و کلیدهای اضافی باعث میشن نگهداری پروژه سخت‌تر بشه. توی این پست راه‌حل کاملی برای ریفکتور کردنشون ارائه دادم. اسکریپت‌هایی که استفاده کردم: لینک @techstuff100

استفاده از act API در تست‌های React توی React، تابع act برای شبیه‌سازی رفتار واقعی مرورگر توی تست استفاده می‌شه. جزئیاتش رو توی این پست بخونید. @techstuff100

سوال مصاحبه React: پیاده‌سازی useEffect از صفر توی این چالش از شما خواسته میشه useEffect رو از صفر پیاده‌سازی کنید. تمرکز اصلی روی مدیریت dependencyهاست؛ اینکه بر اساس آرایه dependencyها چه زمانی افکت اجرا بشه و چه زمانی تابع cleanup فراخوانی بشه. مصاحبه‌کننده برای روشن‌تر شدن سوال، به چندتا نکته اشاره کرده: پیاده‌سازی باید رایج‌ترین موارد رو پوشش بده، زمان مصاحبه یک ساعته، تاکید روی dependency handling هست (نه روی جزئیات زمان‌بندی اجرای افکت) و ترجیح داده شده که کد با TypeScript نوشته بشه. به‌جای پریدن مستقیم به کدنویسی، توصیه میشه اول مسئله رو تحلیل کنید: روی وایت‌بورد یا با یک دیاگرام جریان وابستگی‌ها و lifecycle افکت‌ها رو رسم کنید، edge caseها (مثل آرایه dependency خالی یا undefined، نیاز به cleanup و ...) رو مشخص کنید و بعد وارد پیاده‌سازی بشید. مقاله: https://freedium.cfd/https://levelup.gitconnected.com/interview-challenge-could-you-write-useeffect-from-scratch-e2fe0f12b7e7 @techstuff100

توی فرایند توسعه نرم‌افزار، به ابزارهایی نیاز داریم که باهاش بتونیم بر اساس دیتا تصمیم‌گیری کنیم. مثلا ببینیم کدوم رنگ دکمه بیشتر کلیک میخوره، کدوم layout فروش بیشتری داره، یا کدوم نسخه از اپلیکیشن engagement بهتری ایجاد می‌کنه. Statsig یکی از پلتفرم‌هایی است که این فرایند رو خیلی آسون کرده. علاوه بر A/B Testing، قابلیت‌های دیگه‌ای مثل Analytics، Feature Gates، Session Replays و خیلی چیزهای دیگه بهمون میده که سرعت توسعه رو بالا می‌بره. توی این ویدیو بطور کامل این موارد به همراه قابلیت‌های دیگه Statsig مثل Dynamic Configs، Layers و Holdouts رو بررسی می‌کنم. ویدئوی یوتوب: https://www.youtube.com/watch?v=kVd4OP6hgAw&list=PL1bBcWODwsLOgA1PLZ8tNca7VMFNPPdm- @techstuff100

مهاجرت تدریجی با Strangler Fig این پست درباره برای مهاجرت از سیستم‌های Legacy به سیستم جدیده. Strangler Fig pattern کمک می‌کنه بخش به بخش سیستم رو جایگزین کنیم و همزمان سیستم قدیمی هم کار کنه. @techstuff100

استراتژی‌های Caching با Workbox ورک‌باکس (Workbox) یک کتابخونه قدرتمند برای ساخت PWA هست که توسط گوگل توسعه داده شده و پکیج‌های معروفی مثل next-pwa هم ازش استفاده می‌کنن. Workbox استراتژی‌های کشینگ، background sync، پشتیبانی از حالت آفلاین و ... رو خیلی ساده کرده. توی این ویدئو Workbox رو به پروژه اضافه می‌کنیم، فایل‌ها و روت‌های مهم رو precache می‌کنیم، فرایند routing رو بررسی می‌کنیم، assetهای استاتیک و APIهامون رو با استراتژی‌های caching، کش و درنهایت background sync رو اضافه می‌کنیم. ویدئوی یوتوب: https://www.youtube.com/watch?v=-dVW58yqtHQ&list=PL1bBcWODwsLMUPOu1Vz7orH2brAgKlWAU @techstuff100

اینکه پست‌های کتاب توسط نویسنده‌ش دیده شد خیلی برام ارزشمند بود. @techstuff100