فایل .gitattributes در گیت

ممکنه پیش بیاد یه پروژه رو کلون کنیم، بعد ببینیم یه سری فایل EOL (End Of Line) عجیب‌غریب باز می‌شن یا وقتی diff می‌گیریم پر از تغییرات بی‌ربطه. توی این موقعیت فایل .gitattributes می‌تونه کمک‌مون کنه.

فرض کنید توی یه تیمی کار می‌کنیم که اعضاش رو ویندوز، مک و لینوکس هستن. هر کی با ادیتور و تنظیمات خودش. حالا یه نفر یه فایل .bat می‌نویسه که رو ویندوز باید با CRLF باشه، ولی یکی دیگه با LF کامیتش می‌کنه، و اسکریپت دیگه اجرا نمی‌شه. یا مثلا یه فایل go رو که باید با LF باشه، یکی دیگه با CRLF ذخیره کرده. با .gitattributes می‌تونیم از این ناهماهنگی‌ها جلوگیری کنیم و یه سری قانون برای Git تعریف کنیم که همه اعضای تیم رعایتش کنن.

توی این مثال تعریف کردم که:
- فایل‌های .bat باید همیشه با CRLF باشن.
- فایل‌های go فقط با LF ذخیره بشن.
- فایل‌های .png و .noscript هم باینری در نظر گرفته بشن تا Git نخواد روشون diff بگیره.

@techstuff100

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

@techstuff100

قفل خوش‌بینانه و بدبینانه (Pessimistic / Optimistic Locking)

گاهی وقتا نیاز داریم مطمئن باشیم داده‌ای که داریم تغییرش می‌دیم، وسط کار توسط کس دیگه‌ای دستکاری نشده. چنین مواقعی قفل‌گذاری (Locking) می‌تونه کمکمون کنه.۲ تا از انواع قفل، قفل خوش‌بینانه (Optimistic) و بدبینانه (Pessimistic) هستن.

قفل بدبینانه از همون اول همه‌چی رو قفل میکنه تا مشکلی پیش نیاد. برای کارهای حساس مثل تراکنش مالی مناسبه یا وقتایی که رقابت روی آپدیت داده‌ها زیاده. ولی در عوض ممکنه سرعت سیستم بیاد پایین و کاربرای دیگه پشت صف بمونن. قفل خوش‌بینانه اما فرض می‌کنه که معمولا مشکلی پیش نمیاد، پس به همه اجازه می‌ده داده رو بخونن و تغییر بدن، و آخر سر بررسی می‌کنه که کسی وسطش تغییری نداده باشه. این روش تو جاهایی که بیشتر عملیات خوندنیه خیلی خوب جواب می‌ده.

لینک مقاله:
https://newsletter.systemdesigncodex.com/p/pessimistic-vs-optimistic-locking

@techstuff100

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

@techstuff100

هدر Content-Disposition

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

توی عکس اول، وقتی کاربر بره به /download، فایل با اسم report.pdf دانلود میشه.

مقادیری که می‌تونیم به این هدر بدیم:
یک. inline: فایل رو توی مرورگر نشون میده (پیش‌فرض).
دو. attachment: فایل رو دانلود می‌کنه.

همینطور توی فرم‌هایی که multipart/form-data دارن هم استفاده میشه. برای هر بخش (مثلا فایل)، یه هدر Content-Disposition فرستاده میشه (عکس دوم). این‌جا name اسم فیلد فرم و filename اسم فایلیه که آپلود میشه.

پ.ن: مثال اول مربوط به دانلود فایل از سروره، و مثال دوم مربوط به آپلود فایل از کلاینت توی فرمه. ربطی به هم ندارن ولی جفتشون از Content-Disposition استفاده می‌کنن.


@techstuff100

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

@techstuff100

کتاب Building Micro-Frontends فصل ۱

مطالبی که توی فصل اول صحبت شده:
- چشم‌انداز فرانت‌اند
- اپلیکیشن‌های Micro-Frontend
- اپلیکیشن‌های SPA
- اپلیکیشن‌های isomorphic
- وب‌سایت‌های استاتیک
- معماری Jamstack

#Building_Micro_Frontends

@techstuff100

یکی از پلاگین‌های کاربردی Webpack بدون شک Module Federation هست که از نسخه ۵ به Webpack اضافه شده. این پلاگین امکان اشتراک‌گذاری و بارگذاری ماژول‌ها بین چند پروژه یا چند بخش از یک پروژه رو فراهم می‌کنه و یکی از مهم‌ترین کاربردهاش در معماری Micro Frontend هست.

توی این ویدیو به‌صورت ساده توضیح دادم که این پلاگین چیه و چطوری می‌تونیم ازش توی یه پروژه واقعی استفاده کنیم. قدم‌به‌قدم از مفاهیم پایه تا پیاده‌سازی عملی جلو می‌ریم.

لینک ویدئو:
https://www.youtube.com/watch?v=uvzu54M8ef8&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=3

@techstuff100

کتاب Building Micro-Frontends فصل ۲

مطالبی که توی فصل دوم صحبت شده:
- مشکل اپلیکیشن‌های Monolith
- حرکت به سمت Microservices
- از Monolith تا Microservices
- معرفی Micro-Frontendها
- اصول Microservices و کاربردشون توی Micro-Frontends

پ.ن: خلاصه فصل قبل رو با این هشتگ می‌تونین پیدا کنین:
#Building_Micro_Frontends

@techstuff100

موس‌پوینتر لحظه‌ای در Canva؛ از WebSocket تا WebRTC

توی Canva برای پیاده‌سازی قابلیت نمایش لحظه‌ای موس کاربران روی وایت‌برد، چالش اصلی scalability و پایداری زیرساخت بود؛ چون همه کاربران باید موقعیت موس خودشون رو هم‌زمان ارسال کنن. توی فاز اول، با ترکیب WebSocket و Redis یه معماری backend-centric ساختن که از طریق PubSub و Streams داده‌ها رو بین سرورها جابجا می‌کرد.

اما برای کاهش latency و بار روی سرورها، تو فاز دوم رفتن سراغ WebRTC تا کلاینت‌ها مستقیما با هم ارتباط بگیرن. با استفاده از mesh topology، هر کلاینت به بقیه وصل می‌شه و موقعیت موس‌ها از طریق DataChannel رد و بدل می‌شه. در نهایت با یه لایه abstraction تونستن به‌صورت تدریجی از WebSocket به WebRTC مهاجرت کنن.

مقاله

پ.ن: آرزوی سلامتی و امنیت برای همه ❤️

@techstuff100

لرنا (Lerna) یکی از ابزارهاییه که برای مدیریت پروژه‌های مونوریپو جاوااسکریپتی استفاده میشه.

توی این ویدیو درباره این صحبت کردم که Lerna چیه و چطوری می‌تونیم ازش توی یه پروژه مونوریپو جاوااسکریپتی استفاده کنیم. لرنا رو راه‌اندازی می‌کنیم، اسکریپت‌ها رو کش می‌کنیم، پکیج‌ها رو ورژن می‌زنیم و پابلیش‌شون می‌کنیم.

لینک ویدئو:
https://www.youtube.com/watch?v=LoFhDi5dbIg&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=3

@techstuff100

کتاب Building Micro-Frontends فصل ۳

مطالبی که توی فصل سوم صحبت شده:
- معماری‌ها و چالش‌های Micro-Frontend
- چارچوب تصمیم‌گیری برای معماری Micro-Frontend
- مشخص کردن Micro-Frontend ها
- میکروفرانت‌اند‌ها و DDD
- ترکیب Micro-Frontend‌ها
- مسیریابی Micro-Frontend‌ها (routing)
- ارتباط بین مایکروفرانت‌اندها

پ.ن: خلاصه فصل‌‌های قبل رو با این هشتگ می‌تونین پیدا کنین:
#Building_Micro_Frontends

@techstuff100