Tech Stuff

کلاس‌های مختص screen readerها توی Tailwind یه کلاس داریم به اسم sr-only که باعث می‌شه یه المان از صفحه مخفی بشه، ولی همچنان برای screen readerها قابل دسترس باشه. همون‌طور که می‌بینید، ChatGPT هم ازش استفاده کرده. حالا اگه بخوایم یه المان sr-only شده رو دوباره قابل نمایش کنیم، می‌تونیم از کلاس not-sr-only استفاده کنیم. @techstuff100

آشنایی با Pub/Sub Messaging ا Pub/Sub Messaging یه روش ارتباطی غیرهمزمانه که توی سیستم‌های توزیع‌شده، مخصوصا معماری‌های ابری و میکروسرویس‌ها کاربرد زیادی داره. با این مدل، سرویس‌ها می‌تونن بدون نیاز به ارتباط مستقیم، پیام‌ها رو رد و بدل کنن. این روش باعث مقیاس‌پذیری بهتر، کاهش وابستگی بین سرویس‌ها و پردازش هم‌زمان درخواست‌ها می‌شه. کاربردش هم توی مواردی مثل اعلان‌های لحظه‌ای، پردازش هم‌زمان داده‌ها و هماهنگی بین سرویس‌های سرورلس دیده می‌شه. این سیستم از Publisher، Subscriber، Message و Topic تشکیل شده. Publisher پیام‌ها رو روی یه Topic منتشر می‌کنه و Subscriberهایی که به اون Topic علاقه دارن، پیام رو دریافت می‌کنن. این روش یه ارتباط یک‌به‌چند و بدون وابستگی ایجاد می‌کنه، که باعث افزایش انعطاف‌پذیری سیستم می‌شه. لینک مقاله: https://aws.amazon.com/what-is/pub-sub-messaging/ @techstuff100

اولین پست Medium‌م منتشر شد! چند وقت پیش درگیر ستاپ کردن Flipper Debugger برای یه پروژه React Native بودم. ستاپش یه مقدار زمان برد و به یه سری خطا و چالش خوردم، ولی با خوندن داکیومنت‌ها و گشتن توی Issues پروژه تونستم راهش بندازم. گفتم تجربه‌ام رو توی یه مقاله مدیوم بنویسم که هم خطاهایی که خوردم رو توضیح بدم، هم روش حلشون رو. شاید به درد بقیه هم بخوره. لینک مقاله: https://medium.com/@seyed-mahdii-jalali/setting-up-flipper-debugger-for-react-native-android-projects-aba186b0b855 پ.ن: این اولین تجربه‌م توی نوشتن و انتشار پست توی مدیومه. اگه دوست داشتین، بهش claps بدین و حمایتش کنین. اگه هم نکته‌ای برای بهتر شدنش به ذهنتون رسید، ممنون میشم بهم بگین. @techstuff100

وابستگی چرخشی (Circular Dependency) زمانی اتفاق میفته که دو ماژول یا ماژول‌های بیشتری به همدیگه وابسته باشن، طوری که عملا یک حلقه بسته ایجاد می‌کنن. این موضوع می‌تونه باعث مشکلات جدی در اجرای کد بشه. توی این پست به همراه مثال بررسی‌ش کردم. @techstuff100

نحوه عملکرد CDN و تاثیرش در بهبود عملکرد پروژه‌های وب شبکه توزیع محتوا یا CDN، سیستمی از سرورهای توزیع‌شده هست که محتوای وب رو به کاربران نزدیک‌تر (از نظر جغرافیایی) ارائه می‌کنن و سرعت لود سایت رو افزایش میدن. عملکرد اصلی CDN ذخیره و ارائه محتوای استاتیک و داینامیک به کاربرانه. این کار با استفاده از Origin Server (سرور اصلی که همه محتوا اونجا نگهداری میشه)، Edge Servers (سرورهای توزیع شده در مناطق مختلف جغرافیایی)، Caching (ذخیره‌سازی محتوا روی سرورهای لبه برای کاهش درخواست‌های مکرر) و DNS Routing (هدایت کاربران به نزدیک‌ترین سرور لبه) انجام میشه. سه روش استفاده از CDN برای پروژه‌مون داریم. Remote hosting که ساده و سریعه و از caching جهانی بهره می‌بره، Local hosting که کنترل کامل و امنیت بیشتری داره و Hybrid hosting که ترکیبی از این دو روشه. برای سایت‌های با مخاطب جهانی، Remote CDN گزینه بهتریه، اما اگه امنیت یا سفارشی‌سازی براتون مهمه، Local hosting مناسب‌تره. لینک مقاله: https://www.freecodecamp.org/news/how-cdns-improve-performance-in-front-end-projects @techstuff100

الگوی BUILD-OPERATE-CHECK در تست‌نویسی توی تست‌نویسی، خیلی وقت‌ها تست‌هامون شلوغ و نامنظم میشن و فهمیدن اینکه چی به چیه سخت میشه. الگوی BUILD-OPERATE-CHECK که توی کتاب Clean Code هم بهش اشاره شده، یه راه حل ساده‌ست که به تست‌هامون ساختار میده. این الگو تست‌های ما رو به سه بخش تقسیم می‌کنه: ۱. قسمت BUILD (ساخت): در این مرحله داده‌های ورودی و مورد نیاز برای تست رو آماده می‌کنیم. ۲. قسمت OPERATE (اجرا): عملیات اصلی که می‌خوایم تست کنیم رو اجرا می‌کنیم. ۳. قسمت CHECK (بررسی): نتایج به دست آومده رو با نتایج مورد انتظار مقایسه می‌کنیم. فرض کنید توی React می‌خوایم یک دکمه Toggle ساده رو تست کنیم. کد رو در نظر بگیرید. @techstuff100

آشنایی با Rate Limiting این مسئله وجود داره که یه سری کاربر یا سرویس، منابع سیستم رو به خودشون اختصاص میدن و بقیه کاربرها نمی‌تونن درست از سرویس استفاده کنن. مثلا یه API داریم که یهو یه کاربر شروع می‌کنه به ارسال درخواست‌های زیاد و کل سیستم رو کند می‌کنه. یا بدتر از اون، ممکنه با DoS attack روبرو بشیم که عملا سرویس‌مون رو از دسترس خارج کنه. یکی از راه‌حل‌ها می‌تونه Rate Limiting باشه. با استفاده از الگوریتم‌هایی مثل Token Bucket یا Sliding Window می‌تونیم تعداد درخواست‌ها رو محدود و کنترل کنیم. مثلا می‌تونیم بگیم هر کاربر در هر دقیقه فقط ۱۰۰ تا درخواست می‌تونه بفرسته. یا می‌تونیم برای هر endpoint مشخص کنیم چقدر traffic قبول می‌کنه. این‌جوری هم جلوی سوءاستفاده رو می‌گیریم، هم تجربه کاربری بهتر میشه و هم هزینه‌های سرور رو می‌تونیم کنترل کنیم. لینک مقاله: https://www.solo.io/topics/rate-limiting @techstuff100

ریاضی پشت پرده فیلترهای Blur وقتی برای عکس‌هامون از فیلتر blur استفاده می‌کنیم، در واقع یک عملیات ریاضی پیچیده به اسم Convolution روی عکس انجام میشه. این عملیات با استفاده از یک ماتریس کوچیک به اسم kernel، برای هر پیکسل، مقدار پیکسل‌های اطرافش رو می‌خونه و با یک فرمول خاص ترکیبشون می‌کنه. معروف‌ترین نوع blur یعنی Gaussian Blur، از تابع گوسی استفاده می‌کنه. این فیلتر به جای اینکه همه پیکسل‌های اطراف رو یکسان در نظر بگیره، به پیکسل‌های نزدیک‌تر وزن بیشتری میده و همین باعث میشه blur طبیعی‌تری ایجاد بشه. این فیلتر علاوه بر ویرایش عکس و شبکه‌های اجتماعی، توی حوزه‌های بازی‌سازی (برای Motion Blur)، عکاسی حرفه‌ای (برای ایجاد عمق میدان)، و حتی رمزنگاری و حریم خصوصی داده‌ها هم کاربرد داره. لینک مقاله: https://readmedium.com/en/https:/medium.com/puzzle-sphere/math-behind-image-blur-instagram-snapchat-gaussian-function-quantum-mechanics-convolution-kernel-average-45757b744e83 @techstuff100

دیزاین پترن Compound Components در React توی این پست درباره یه راه حل تمیز و اصولی برای ساخت کامپوننت‌های انعطاف‌پذیر با استفاده از Compound Components صحبت می‌کنم. با این الگو می‌تونیم کامپوننت‌های پیچیده رو به اجزای کوچکتر و قابل ترکیب تبدیل کنیم. ✅ چندتا نکته: — این الگو برای همه موارد مناسب نیست. وقتی ازش استفاده کنید که واقعا نیاز به انعطاف‌پذیری بالا دارید. — اجزای compound component معمولا فقط در کنار هم معنی میدن و نباید جدا استفاده بشن. — استفاده از Context باعث می‌شه نیازی به prop drilling نداشته باشیم. @techstuff100

مدیریت state در React: از useState تا useReducer مدیریت stateها توی کامپوننت‌های React گاهی خیلی پیچیده میشه. مخصوصا وقتی از useStateهای متعدد برای state های مرتبط استفاده می‌کنیم. نتیجه‌ش میشه یه کامپوننت شلوغ که نگهداریش سخته. وقتی stateها به هم وابسته‌ن، آپدیت کردنشون با useStateهای جداگانه می‌تونه دردسرساز بشه. هر تغییر کوچیک نیاز به کلی کد داره و پیدا کردن باگ‌ها هم سخت‌تر میشه؛ چون trace کردن تغییرات state خیلی پیچیده‌ست. توی همچین وضعیتی، useReducer خیلی بکارمون میاد. به جای اینکه state‌های مرتبط رو با useState‌های جدا مدیریت کنیم، می‌تونیم همه‌شون رو توی یه آبجکت بذاریم و با یه reducer مدیریتشون کنیم. حتی می‌تونیم یه قدم جلوتر بریم و یه custom hook بسازیم که جزئیات پیاده‌سازی reducer رو مخفی کنه و یه interface تمیز به کامپوننت‌هامون بده. این جوری کدمون هم تمیزتر میشه، هم نگهداریش راحت‌تر. لینک مقاله: https://thetshaped.dev/p/how-to-use-reducer-in-react-for-better-and-simpler-state-management @techstuff100

نکته حرفه‌ای React: چطور یک کامپوننت سنگین با children رو memoize کنیم؟ مموایز کردن کامپوننت‌های سنگین که children دارن، یه چالش جالبه که خیلی‌ها توش اشتباه می‌کنن. اکثرا فکر می‌کنن اگه هم برای children و هم کامپوننت سنگین از memo استفاده کنن کافیه. (کد ۱) راه‌حل درست اینه که children رو با useMemo مموایز کنیم. چون children در نهایت یک آبجکته و با هر بار رندر، یک آبجکت جدید ساخته میشه. (کد ۲) @techstuff100

آشنایی با Database Sharding: وقتی دیتابیس بزرگ میشه چیکار کنیم؟ وقتی اپلیکیشن‌مون رشد می‌کنه و تعداد کاربرها و حجم دیتا زیاد میشه، یه نقطه‌ای میرسه که دیتابیس دیگه نمی‌کشه و response time میره بالا. این دقیقا همون جاییه که Database Sharding به کمکمون میاد. تو Sharding میایم دیتابیس رو به تیکه‌های کوچکتر (shard) تقسیم می‌کنیم و روی چند تا سرور پخششون می‌کنیم. این کار رو می‌تونیم به روش‌های مختلفی مثل Range-based، Hash-based یا حتی Geo-based انجام بدیم. این کار پیچیدگی‌های خودش رو داره؛ مثلا باید حواسمون باشه که دیتا به صورت متوازن بین سرورها توزیع بشه تا hotspot نداشته باشیم. لینک مقاله: https://aws.amazon.com/what-is/database-sharding/ @techstuff100

تفاوت any و unknown توی TypeScript توی TypeScript، وقتی نمی‌دونیم یه مقدار دقیقا چه نوعی داره، معمولا از any استفاده می‌کنیم. در کنارش یه گزینه دیگه هم داریم: unknown. می‌تونیم اینطوری مقایسه‌شون کنیم: any یعنی «بی‌خیال تایپ شو و هر کاری دوست داری بکن» آزادی کامل میده، ولی ریسک کرش بالا میره. unknown یعنی «من نمی‌دونم تایپش چیه، ولی قبل از استفاده باید مطمئن بشی» یه جورایی جلوی اشتباهات رو می‌گیره و کد امن‌تر میشه. مثال رو ببینید. @techstuff100

هوک useImperativeHandle در React توی این پست، درباره یک چالش رایج توی ری‌اکت صحبت کردم: چطور از توابع و استیت‌های یک کامپوننت فرزند در کامپوننت والد استفاده کنیم، بدون اینکه کل ساختار کامپوننت رو به هم بریزیم. برای حل این مسئله از هوک useImperativeHandle استفاده می‌کنم و به همراه مثال توضیحش میدم. @techstuff100

چطور توکن‌ها رو توی مرورگر امن نگه داریم؟ برای ذخیره access token‌ها توی مرورگر، روش‌های مختلفی مثل localStorage، sessionStorage و کوکی‌ها و ... رو  داریم. اما واقعیت اینه که هر کدوم از اینها نقاط ضعف و قوت خودشون رو دارن و اگه درست پیاده‌سازی نشن، احتمال حملات XSS و CSRF بالا میره. جالبه بدونید هیچ روش واقعا امنی برای ذخیره توکن‌ها توی مرورگر وجود نداره و همشون به نوعی آسیب‌پذیرن. یکی از بهترین روش‌ها استفاده از کوکی‌هاست؛ البته با ست کردن اتربیوت‌هایی مثل HttpOnly و SameSite=Strict. همچنین میشه از الگوی Token Handler استفاده کرد که با رمزنگاری توکن‌ها و مدیریتشون از طریق بک‌اند، ریسک حملات رو به حداقل رسوند. لینک مقاله: https://readmedium.com/en/https:/curity.medium.com/best-practices-for-storing-access-tokens-in-the-browser-6b3d515d9814 @techstuff100

مدیریت تغییرات در node_modules با Patch Package گاهی وقتا پیش میاد که مجبور باشیم به دلیل باگی توی یه پکیج npm، یه تغییر دستی توی node_modules بدیم. توی همچین موقعیتی، patch-package بکارمون میاد که تغییراتمون ماندگار بشه. توی این پست، با یه مثال عملی، استفاده ازش رو توضیح دادم. @techstuff100

توی نسخه جدید React یه کامپایلر اومده که قراره خیلی از دردسرهای memoization رو حل کنه. اما واقعا چقدر خوب کار می‌کنه و روی پروژه‌های واقعی کارآمده؟ طبق تست‌های انجام شده از این کامپایلر روی یک پروژه واقعی با ۱۵ هزار خط کد: ۱. روی initial load سایت تقریبا هیچ تاثیر منفی نداشت! یعنی با اینکه همه چیز رو مموایز می‌کنه، سنگین‌تر نشده. ۲. روی interactions performance خیلی خوب جواب داده. ۳. ❌ نمی‌تونیم به صورت کامل، مموایز کردن دستی رو بذاریم کنار، چون: - طبق داکیومنت React، کتابخونه‌های خارجی باید قبل از استفاده با کامپایلر، کامپایل شده باشن و فعلا خیلی از کتابخونه‌های محبوب هنوز کامپایل نشدن. - کدهای قدیمی ممکنه درست کار نکنن. - گاهی کد ما نیاز به بهینه‌سازی دستی داره (برای حالت‌ها و نیاز‌های خاص) نتیجه‌گیری: اگه performance اپ براتون در اولویت اول نیست، فعال کردن کامپایلر می‌تونه نتایج قابل قبولی بده. ولی اگه می‌خواید بهترین عملکرد ممکن رو داشته باشید، هنوز هم باید memoization دستی رو بلد باشید. مقاله: https://www.developerway.com/posts/how-react-compiler-performs-on-real-code @techstuff100

اپلیکیشن حال خوب | Good Mood چند وقتی میشه که یه بخشی از وقت آزادم رو مشغول توسعه یه برنامه بودم که حس و حال بهتری به روزای آدم‌ها بده. نتیجه‌ش شد یه اپ به اسم حال خوب! این برنامه صبح بهمون صبح بخیر می‌گه، شب‌ها شب بخیر می‌گه، و توی طول روز برامون نوتیف‌های مثبت و انگیزشی می‌فرسته. هدفش اینه که یه حال خوب بهمون بده و انرژی بیشتری برای روزمون داشته باشیم. فعلا نسخه MVP رو برای اندروید منتشر کردم و تا چند روز دیگه نسخه iOS هم منتشر میشه. ایده اولیه‌ست و تازه اول راهه. خیلی دوست دارم شما هم نصبش کنین تا با فیدبک و کمک شما کم‌کم تکمیلش کنم. از این لینک می‌تونین نصبش کنین: http://cafebazaar.ir/app/?id=com.seyedmahdii.goodmood&ref=share @techstuff100

توی این پست درباره Progressive Hydration و ترکیبش با Lazy Loading برای بهبود performance صحبت کردم. این روش به طور موثری زمان بارگذاری صفحات رو کاهش می‌ده و تجربه کاربری سریع‌تر و روان‌تری رو فراهم می‌کنه. @techstuff100

ادامه: ۴. کمک گرفتن از دیگران: از کسی که بهش اعتماد داریم و می‌دونیم که صلاحیت داره، کمک بخوایم. این افراد معمولا با دیدگاه‌های بیرونی‌شون، می‌تونن به ما یادآوری کنن که چرا شایسته موفقیت‌هامون هستیم. @techstuff100