Tech Stuff

یکی از پلاگین‌های کاربردی Webpack بدون شک Module Federation هست که از نسخه ۵ به Webpack اضافه شده. این پلاگین امکان اشتراک‌گذاری و بارگذاری ماژول‌ها بین چند پروژه یا چند بخش از یک پروژه رو فراهم می‌کنه و یکی از مهم‌ترین کاربردهاش در معماری Micro Frontend هست. توی این ویدیو به‌صورت ساده توضیح دادم که این پلاگین چیه و چطوری می‌تونیم ازش توی یه پروژه واقعی استفاده کنیم. قدم‌به‌قدم از مفاهیم پایه تا پیاده‌سازی عملی جلو می‌ریم. لینک ویدئو: https://www.youtube.com/watch?v=uvzu54M8ef8&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=3 @techstuff100

چند وقتیه کتاب Building Micro-Frontends رو شروع کردم. Luca Mezzalira به نکات خوبی توش اشاره می‌کنه. سعی می‌کنم خلاصه هر فصل رو قرار بدم. @techstuff100

هدر Content-Disposition یه فایل داریم و می‌خوایم اون رو از سرور بفرستیم به کلاینت. انتظار داریم وقتی کاربر روی لینک کلیک می‌کنه، فایل با اسم مشخصی دانلود بشه، نه اینکه باز بشه توی مرورگر یا با یه اسم دیگه ذخیره بشه. با هدر Content-Disposition می‌تونیم این رفتار رو تنظیم کنیم. توی عکس اول، وقتی کاربر بره به /download، فایل با اسم report.pdf دانلود میشه. مقادیری که می‌تونیم به این هدر بدیم: یک. inline: فایل رو توی مرورگر نشون میده (پیش‌فرض). دو. attachment: فایل رو دانلود می‌کنه. همینطور توی فرم‌هایی که multipart/form-data دارن هم استفاده میشه. برای هر بخش (مثلا فایل)، یه هدر Content-Disposition فرستاده میشه (عکس دوم). این‌جا name اسم فیلد فرم و filename اسم فایلیه که آپلود میشه. پ.ن: مثال اول مربوط به دانلود فایل از سروره، و مثال دوم مربوط به آپلود فایل از کلاینت توی فرمه. ربطی به هم ندارن ولی جفتشون از Content-Disposition استفاده می‌کنن. @techstuff100

برای ساخت این پست از این مقاله و این ویدئو کمک گرفته شده. @techstuff100

اصول DRY ،AHA و WET تو این پست درباره‌ی سه اصل مهم برنامه‌نویسی صحبت کردم و با مثال توضیح دادم که همیشه abstraction‌ بهترین راه نیست و چه وقتایی بهتره تکرار داشته باشیم. @techstuff100

قفل خوش‌بینانه و بدبینانه (Pessimistic / Optimistic Locking) گاهی وقتا نیاز داریم مطمئن باشیم داده‌ای که داریم تغییرش می‌دیم، وسط کار توسط کس دیگه‌ای دستکاری نشده. چنین مواقعی قفل‌گذاری (Locking) می‌تونه کمکمون کنه.۲ تا از انواع قفل، قفل خوش‌بینانه (Optimistic) و بدبینانه (Pessimistic) هستن. قفل بدبینانه از همون اول همه‌چی رو قفل میکنه تا مشکلی پیش نیاد. برای کارهای حساس مثل تراکنش مالی مناسبه یا وقتایی که رقابت روی آپدیت داده‌ها زیاده. ولی در عوض ممکنه سرعت سیستم بیاد پایین و کاربرای دیگه پشت صف بمونن. قفل خوش‌بینانه اما فرض می‌کنه که معمولا مشکلی پیش نمیاد، پس به همه اجازه می‌ده داده رو بخونن و تغییر بدن، و آخر سر بررسی می‌کنه که کسی وسطش تغییری نداده باشه. این روش تو جاهایی که بیشتر عملیات خوندنیه خیلی خوب جواب می‌ده. لینک مقاله: https://newsletter.systemdesigncodex.com/p/pessimistic-vs-optimistic-locking @techstuff100

از Accessibility Tree View تو DevTools کروم می‌تونیم برای بررسی دسترسی‌پذیری سایت‌مون استفاده کنیم. این ابزار نشون می‌ده یه المنت چجوری توسط screen reader خونده میشه؛ مثل role، name و ARIA attributes. از DevTools پنل Elements و دکمه accessibility می‌تونیم فعالش کنیم. @techstuff100

فایل .gitattributes در گیت ممکنه پیش بیاد یه پروژه رو کلون کنیم، بعد ببینیم یه سری فایل EOL (End Of Line) عجیب‌غریب باز می‌شن یا وقتی diff می‌گیریم پر از تغییرات بی‌ربطه. توی این موقعیت فایل .gitattributes می‌تونه کمک‌مون کنه. فرض کنید توی یه تیمی کار می‌کنیم که اعضاش رو ویندوز، مک و لینوکس هستن. هر کی با ادیتور و تنظیمات خودش. حالا یه نفر یه فایل .bat می‌نویسه که رو ویندوز باید با CRLF باشه، ولی یکی دیگه با LF کامیتش می‌کنه، و اسکریپت دیگه اجرا نمی‌شه. یا مثلا یه فایل go رو که باید با LF باشه، یکی دیگه با CRLF ذخیره کرده. با .gitattributes می‌تونیم از این ناهماهنگی‌ها جلوگیری کنیم و یه سری قانون برای Git تعریف کنیم که همه اعضای تیم رعایتش کنن. توی این مثال تعریف کردم که: - فایل‌های .bat باید همیشه با CRLF باشن. - فایل‌های go فقط با LF ذخیره بشن. - فایل‌های .png و .svg هم باینری در نظر گرفته بشن تا Git نخواد روشون diff بگیره. @techstuff100

ارتباط بین پنجره‌ها با postMessage این متد جاوااسکریپت، بهمون اجازه می‌ده از یه صفحه‌ وب (مثلا یه iframe) به یه صفحه دیگه (مثلا parentش) پیام بفرستیم. توی این پست به همراه مثال توضیحش دادم. @techstuff100

سوال ۳ @techstuff100

فضای مصاحبه و رفتار مصاحبه‌کننده خوب بود؛ ولی با اینکه سوال رو حل کرده بودم، در پایان مصاحبه حس خوبی نداشتم. حدود یک ماه از مصاحبه گذشت و خبری از ایمیل پذیرش یا رد شدن نیومد. فکر کردم که رد شدم و تقریبا بی‌خیال قضیه شده بودم که دوباره تماس گرفتن برای هماهنگی مصاحبه دوم (مصاحبه فنی) که اواخر شهریور برگزار شد. این مصاحبه یک ساعته بود و از طریق Skype انجام شد. برخی از سوال‌هایی که پرسیده شد: ۱. مفهوم event loop ۲. اسکوپ‌ها (scope) و TDZ ۳. خروجی کد (پست بعدی) ۴. روش‌های ذخیره‌سازی داده در مرورگر و تفاوت‌هاشون ۵. هدر set-cookie ۶. مفهوم event bubbling ۷. استفاده از preventDefault برای تگ‌های a ۸. مفاهیم debounce و throttle ۹. پوزیشن‌های CSS ۱۰. قوانین هوک‌ها ۱۱. توضیح useEffect و useLayoutEffect و تفاوت‌هاشون ۱۲. توضیح توابع cleanup در useEffect ۱۳. توضیح event batching ۱۴. مفاهیم LCP، CLS و Performance وب ۱۵. مفاهیم و جزئیات memo و useMemo و ۳-۴ تا سوال دیگه که دقیق یادم نیست. فرایند مصاحبه بیشتر شبیه به یک گفت‌وگوی فنی بود و در فضایی صمیمی پیش رفت. مصاحبه‌کننده هم بسیار حرفه‌ای و خوش‌برخورد بودن. نتیجه‌ی مصاحبه حدود یک هفته بعد از طریق ایمیل اعلام شد. این مصاحبه برام تجربه خیلی خوبی بود و چیزهای زیادی یاد گرفتم. @techstuff100

تجربه مصاحبه با دیجی‌کالا تابستون ۱۴۰۳ برای موقعیت شغلی Front-End Engineer در دیجی‌کالا رزومه فرستادم. اواخر مرداد، تیم Talent Acquisition باهام تماس گرفتن و برای دو روز بعد، مصاحبه الگوریتمی به صورت live coding تنظیم شد. طول مصاحبه الگوریتمی ۳۰ دقیقه بود و از طریق MS Teams برگزار شد. یکی از مصاحبه‌کننده‌ها سر وقت حاضر شد، ولی برای مصاحبه‌کننده دوم حدود ۳ دقیقه منتظر موندیم. چون ایشون حاضر نشدن، مصاحبه رو دونفره شروع کردیم. مصاحبه فقط شامل یک سوال بود: آرایه‌ای از رشته‌ها داده شده، و باید پیدا می‌کردیم چندتا از این رشته‌ها معکوسشون (reverse) هم داخل آرایه وجود داره. مثلا برای آرایه زیر، جواب ۲ هست: ["ac", "bc", "ca", "cb", "zz"] راه‌حلی که پیاده‌سازی کردم اینطوری بود که یه شمارنده‌ count و یه آبجکت (در JS) یا هش‌مپ برای ذخیره وجود هر عضو (یعنی حالت flag) تعریف کردم. یه بار روی آرایه لوپ زدم، و اگه عضو فعلی داخل هش‌مپ نبود، reverse اون عضو رو توی هش‌مپ true کردم. در غیر این صورت، مقدار count رو افزایش دادم. طبیعتا پیچیدگی زمانی O(n) می‌شد. @techstuff100

توی نسخه‌های قبل موقع unmount شدن المنت، React اون تابع رو با null صدا می‌زد. توی React 19 می‌تونیم برای توابع ref‌مون یه تابع cleanup تعریف کنیم که در این صورت، اون مرحله صدا زدن تابع با null موقع unmount اسکیپ میشه. @techstuff100

فرستادن تابع به ref در React توی React می‌تونیم به جای استفاده از useRef، یه تابع مستقیم به ref بدیم و رفتار المنت‌ها رو موقع رندر و unmount مدیریت کنیم. @techstuff100

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

ساخت تایپ‌های deep immutable در تایپ‌اسکریپت گاهی وقت‌ها لازم داریم مطمئن باشیم که یک آبجکت بعد از مقداردهی اولیه مقادیرش تغییر نکنه. توی این پست با const assertion و Object.freeze بررسی می‌کنم که چطوری میشه یه آبجکت رو هم در زمان کامپایل و هم در زمان اجرا فریز کرد. @techstuff100

پشت صحنه کوئری‌های SQL وقتی یه کوئری مثل SELECT name, age FROM users WHERE city = 'New York'; رو اجرا می‌کنیم، پشت صحنه چند تا مرحله اتفاق میفته که باعث میشه دیتابیس بتونه بهترین و سریع‌ترین نتیجه رو برگردونه. این مسیر از چک کردن دسترسی کاربر شروع می‌شه، بعدش کوئری بررسی و بهینه‌سازی می‌شه، و در نهایت به موتور ذخیره‌سازی می‌رسه که داده‌ها رو از دیسک می‌خونه. اما چطور این فرآیند سریع و بهینه انجام می‌شه؟ دیتابیس از چند تا بخش هوشمند مثل Query Optimizer (که بهترین روش اجرای کوئری رو انتخاب می‌کنه) و Execution Engine (که مراحل اجرای کوئری رو هماهنگ می‌کنه) استفاده می‌کنه. مثلا، Lock Manager از تداخل دسترسی‌ها جلوگیری می‌کنه و Buffer Manager اول حافظه رو چک می‌کنه تا از خوندن غیرضروری از دیسک جلوگیری بشه. لینک مقاله: https://newsletter.systemdesigncodex.com/p/the-journey-of-a-sql-query-through @techstuff100

هوک useInsertionEffect در React توی این پست درباره‌ی useInsertionEffect صحبت کردم، اینکه کِی بهش نیاز داریم و چه کمکی به ما می‌کنه، به همراه یک مثال برای درک بهتر رفتارش در مقایسه با useEffect و useLayoutEffect. @techstuff100

ایندکس دیتابیس (Database Index) چیه و چرا مهمه؟ فرض کنیم یه جدول با میلیون‌ها رکورد داریم و می‌خوایم یه داده خاص رو سریع پیدا کنیم. بدون index، این کار مثل پیدا کردن یه اسم تو یه کتاب هزار صفحه‌ای بدون فهرسته. اما با استفاده از index، می‌تونیم خیلی سریع‌تر اطلاعات موردنظر رو پیدا کنیم، درست مثل اینکه یه کتاب فهرست‌دار رو باز کنیم و مستقیم بریم سراغ صفحه‌ای که لازم داریم. ایندکس‌ها در دیتابیس یه جور جدول کمکی هستن که اطلاعات کلیدی رو نگه می‌دارن تا جستجوها سریع‌تر انجام بشه. به‌صورت پیش‌فرض، کلیدهای اصلی (Primary Keys) همیشه ایندکس می‌شن؛ اما می‌تونیم برای ستون‌های دیگه هم index دستی بسازیم. البته باید حواسمون باشه که هر تغییری تو جدول باعث آپدیت شدن ایندکس‌ها بشه و ممکنه سرعت INSERT/UPDATE رو کمی کاهش بده. پس بهتره فقط برای ستون‌هایی که زیاد جستجو می‌شن، ایندکس بذاریم. مقاله: https://www.codecademy.com/article/sql-indexes @techstuff100