از Accessibility Tree View تو DevTools کروم میتونیم برای بررسی دسترسیپذیری سایتمون استفاده کنیم. این ابزار نشون میده یه المنت چجوری توسط screen reader خونده میشه؛ مثل role، name و ARIA attributes.
از DevTools پنل Elements و دکمه accessibility میتونیم فعالش کنیم.
@techstuff100
از DevTools پنل Elements و دکمه accessibility میتونیم فعالش کنیم.
@techstuff100
👍14👏1
قفل خوشبینانه و بدبینانه (Pessimistic / Optimistic Locking)
گاهی وقتا نیاز داریم مطمئن باشیم دادهای که داریم تغییرش میدیم، وسط کار توسط کس دیگهای دستکاری نشده. چنین مواقعی قفلگذاری (Locking) میتونه کمکمون کنه.۲ تا از انواع قفل، قفل خوشبینانه (Optimistic) و بدبینانه (Pessimistic) هستن.
قفل بدبینانه از همون اول همهچی رو قفل میکنه تا مشکلی پیش نیاد. برای کارهای حساس مثل تراکنش مالی مناسبه یا وقتایی که رقابت روی آپدیت دادهها زیاده. ولی در عوض ممکنه سرعت سیستم بیاد پایین و کاربرای دیگه پشت صف بمونن. قفل خوشبینانه اما فرض میکنه که معمولا مشکلی پیش نمیاد، پس به همه اجازه میده داده رو بخونن و تغییر بدن، و آخر سر بررسی میکنه که کسی وسطش تغییری نداده باشه. این روش تو جاهایی که بیشتر عملیات خوندنیه خیلی خوب جواب میده.
لینک مقاله:
https://newsletter.systemdesigncodex.com/p/pessimistic-vs-optimistic-locking
@techstuff100
گاهی وقتا نیاز داریم مطمئن باشیم دادهای که داریم تغییرش میدیم، وسط کار توسط کس دیگهای دستکاری نشده. چنین مواقعی قفلگذاری (Locking) میتونه کمکمون کنه.۲ تا از انواع قفل، قفل خوشبینانه (Optimistic) و بدبینانه (Pessimistic) هستن.
قفل بدبینانه از همون اول همهچی رو قفل میکنه تا مشکلی پیش نیاد. برای کارهای حساس مثل تراکنش مالی مناسبه یا وقتایی که رقابت روی آپدیت دادهها زیاده. ولی در عوض ممکنه سرعت سیستم بیاد پایین و کاربرای دیگه پشت صف بمونن. قفل خوشبینانه اما فرض میکنه که معمولا مشکلی پیش نمیاد، پس به همه اجازه میده داده رو بخونن و تغییر بدن، و آخر سر بررسی میکنه که کسی وسطش تغییری نداده باشه. این روش تو جاهایی که بیشتر عملیات خوندنیه خیلی خوب جواب میده.
لینک مقاله:
https://newsletter.systemdesigncodex.com/p/pessimistic-vs-optimistic-locking
@techstuff100
👍6
اصول DRY ،AHA و WET
تو این پست دربارهی سه اصل مهم برنامهنویسی صحبت کردم و با مثال توضیح دادم که همیشه abstraction بهترین راه نیست و چه وقتایی بهتره تکرار داشته باشیم.
@techstuff100
تو این پست دربارهی سه اصل مهم برنامهنویسی صحبت کردم و با مثال توضیح دادم که همیشه abstraction بهترین راه نیست و چه وقتایی بهتره تکرار داشته باشیم.
@techstuff100
👍15❤1🔥1
Tech Stuff
اصول DRY ،AHA و WET تو این پست دربارهی سه اصل مهم برنامهنویسی صحبت کردم و با مثال توضیح دادم که همیشه abstraction بهترین راه نیست و چه وقتایی بهتره تکرار داشته باشیم. @techstuff100
Sandi Metz
The Wrong Abstraction — Sandi Metz
I've been thinking about the consequences of the "wrong abstraction." My RailsConf 2014 "all the little things" talk included a section where I asserted: > duplication is far cheaper than the wrong abstraction And in the summary, I went on to advise: >
❤5🔥1
هدر Content-Disposition
یه فایل داریم و میخوایم اون رو از سرور بفرستیم به کلاینت. انتظار داریم وقتی کاربر روی لینک کلیک میکنه، فایل با اسم مشخصی دانلود بشه، نه اینکه باز بشه توی مرورگر یا با یه اسم دیگه ذخیره بشه. با هدر Content-Disposition میتونیم این رفتار رو تنظیم کنیم.
توی عکس اول، وقتی کاربر بره به /download، فایل با اسم report.pdf دانلود میشه.
مقادیری که میتونیم به این هدر بدیم:
یک. inline: فایل رو توی مرورگر نشون میده (پیشفرض).
دو. attachment: فایل رو دانلود میکنه.
همینطور توی فرمهایی که multipart/form-data دارن هم استفاده میشه. برای هر بخش (مثلا فایل)، یه هدر Content-Disposition فرستاده میشه (عکس دوم). اینجا name اسم فیلد فرم و filename اسم فایلیه که آپلود میشه.
پ.ن: مثال اول مربوط به دانلود فایل از سروره، و مثال دوم مربوط به آپلود فایل از کلاینت توی فرمه. ربطی به هم ندارن ولی جفتشون از Content-Disposition استفاده میکنن.
@techstuff100
یه فایل داریم و میخوایم اون رو از سرور بفرستیم به کلاینت. انتظار داریم وقتی کاربر روی لینک کلیک میکنه، فایل با اسم مشخصی دانلود بشه، نه اینکه باز بشه توی مرورگر یا با یه اسم دیگه ذخیره بشه. با هدر Content-Disposition میتونیم این رفتار رو تنظیم کنیم.
توی عکس اول، وقتی کاربر بره به /download، فایل با اسم report.pdf دانلود میشه.
مقادیری که میتونیم به این هدر بدیم:
یک. inline: فایل رو توی مرورگر نشون میده (پیشفرض).
دو. attachment: فایل رو دانلود میکنه.
همینطور توی فرمهایی که multipart/form-data دارن هم استفاده میشه. برای هر بخش (مثلا فایل)، یه هدر Content-Disposition فرستاده میشه (عکس دوم). اینجا name اسم فیلد فرم و filename اسم فایلیه که آپلود میشه.
پ.ن: مثال اول مربوط به دانلود فایل از سروره، و مثال دوم مربوط به آپلود فایل از کلاینت توی فرمه. ربطی به هم ندارن ولی جفتشون از Content-Disposition استفاده میکنن.
@techstuff100
👍9❤2🔥2👏2
چند وقتیه کتاب Building Micro-Frontends رو شروع کردم. Luca Mezzalira به نکات خوبی توش اشاره میکنه. سعی میکنم خلاصه هر فصل رو قرار بدم.
@techstuff100
@techstuff100
❤17👍3🔥2
Tech Stuff
چند وقتیه کتاب Building Micro-Frontends رو شروع کردم. Luca Mezzalira به نکات خوبی توش اشاره میکنه. سعی میکنم خلاصه هر فصل رو قرار بدم. @techstuff100
Building Micro-Frontends Chapter 1.pdf
998.8 KB
کتاب Building Micro-Frontends فصل ۱
مطالبی که توی فصل اول صحبت شده:
- چشمانداز فرانتاند
- اپلیکیشنهای Micro-Frontend
- اپلیکیشنهای SPA
- اپلیکیشنهای isomorphic
- وبسایتهای استاتیک
- معماری Jamstack
#Building_Micro_Frontends
@techstuff100
مطالبی که توی فصل اول صحبت شده:
- چشمانداز فرانتاند
- اپلیکیشنهای Micro-Frontend
- اپلیکیشنهای SPA
- اپلیکیشنهای isomorphic
- وبسایتهای استاتیک
- معماری Jamstack
#Building_Micro_Frontends
@techstuff100
❤17👍4🤔1
یکی از پلاگینهای کاربردی Webpack بدون شک Module Federation هست که از نسخه ۵ به Webpack اضافه شده. این پلاگین امکان اشتراکگذاری و بارگذاری ماژولها بین چند پروژه یا چند بخش از یک پروژه رو فراهم میکنه و یکی از مهمترین کاربردهاش در معماری Micro Frontend هست.
توی این ویدیو بهصورت ساده توضیح دادم که این پلاگین چیه و چطوری میتونیم ازش توی یه پروژه واقعی استفاده کنیم. قدمبهقدم از مفاهیم پایه تا پیادهسازی عملی جلو میریم.
لینک ویدئو:
https://www.youtube.com/watch?v=uvzu54M8ef8&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=3
@techstuff100
توی این ویدیو بهصورت ساده توضیح دادم که این پلاگین چیه و چطوری میتونیم ازش توی یه پروژه واقعی استفاده کنیم. قدمبهقدم از مفاهیم پایه تا پیادهسازی عملی جلو میریم.
لینک ویدئو:
https://www.youtube.com/watch?v=uvzu54M8ef8&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=3
@techstuff100
❤11🔥2
Building Micro-Frontends Chapter 2.pdf
1.4 MB
کتاب Building Micro-Frontends فصل ۲
مطالبی که توی فصل دوم صحبت شده:
- مشکل اپلیکیشنهای Monolith
- حرکت به سمت Microservices
- از Monolith تا Microservices
- معرفی Micro-Frontendها
- اصول Microservices و کاربردشون توی Micro-Frontends
پ.ن: خلاصه فصل قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
مطالبی که توی فصل دوم صحبت شده:
- مشکل اپلیکیشنهای Monolith
- حرکت به سمت Microservices
- از Monolith تا Microservices
- معرفی Micro-Frontendها
- اصول Microservices و کاربردشون توی Micro-Frontends
پ.ن: خلاصه فصل قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
❤15👍2🤔1
موسپوینتر لحظهای در Canva؛ از WebSocket تا WebRTC
توی Canva برای پیادهسازی قابلیت نمایش لحظهای موس کاربران روی وایتبرد، چالش اصلی scalability و پایداری زیرساخت بود؛ چون همه کاربران باید موقعیت موس خودشون رو همزمان ارسال کنن. توی فاز اول، با ترکیب WebSocket و Redis یه معماری backend-centric ساختن که از طریق PubSub و Streams دادهها رو بین سرورها جابجا میکرد.
اما برای کاهش latency و بار روی سرورها، تو فاز دوم رفتن سراغ WebRTC تا کلاینتها مستقیما با هم ارتباط بگیرن. با استفاده از mesh topology، هر کلاینت به بقیه وصل میشه و موقعیت موسها از طریق DataChannel رد و بدل میشه. در نهایت با یه لایه abstraction تونستن بهصورت تدریجی از WebSocket به WebRTC مهاجرت کنن.
مقاله
پ.ن: آرزوی سلامتی و امنیت برای همه ❤️
@techstuff100
توی Canva برای پیادهسازی قابلیت نمایش لحظهای موس کاربران روی وایتبرد، چالش اصلی scalability و پایداری زیرساخت بود؛ چون همه کاربران باید موقعیت موس خودشون رو همزمان ارسال کنن. توی فاز اول، با ترکیب WebSocket و Redis یه معماری backend-centric ساختن که از طریق PubSub و Streams دادهها رو بین سرورها جابجا میکرد.
اما برای کاهش latency و بار روی سرورها، تو فاز دوم رفتن سراغ WebRTC تا کلاینتها مستقیما با هم ارتباط بگیرن. با استفاده از mesh topology، هر کلاینت به بقیه وصل میشه و موقعیت موسها از طریق DataChannel رد و بدل میشه. در نهایت با یه لایه abstraction تونستن بهصورت تدریجی از WebSocket به WebRTC مهاجرت کنن.
مقاله
پ.ن: آرزوی سلامتی و امنیت برای همه ❤️
@techstuff100
❤10👍1🔥1
لرنا (Lerna) یکی از ابزارهاییه که برای مدیریت پروژههای مونوریپو جاوااسکریپتی استفاده میشه.
توی این ویدیو درباره این صحبت کردم که Lerna چیه و چطوری میتونیم ازش توی یه پروژه مونوریپو جاوااسکریپتی استفاده کنیم. لرنا رو راهاندازی میکنیم، اسکریپتها رو کش میکنیم، پکیجها رو ورژن میزنیم و پابلیششون میکنیم.
لینک ویدئو:
https://www.youtube.com/watch?v=LoFhDi5dbIg&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=3
@techstuff100
توی این ویدیو درباره این صحبت کردم که Lerna چیه و چطوری میتونیم ازش توی یه پروژه مونوریپو جاوااسکریپتی استفاده کنیم. لرنا رو راهاندازی میکنیم، اسکریپتها رو کش میکنیم، پکیجها رو ورژن میزنیم و پابلیششون میکنیم.
لینک ویدئو:
https://www.youtube.com/watch?v=LoFhDi5dbIg&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x&index=3
@techstuff100
❤6👏2🔥1
Building Micro-Frontends Chapter 3.pdf
2.1 MB
کتاب Building Micro-Frontends فصل ۳
مطالبی که توی فصل سوم صحبت شده:
- معماریها و چالشهای Micro-Frontend
- چارچوب تصمیمگیری برای معماری Micro-Frontend
- مشخص کردن Micro-Frontend ها
- میکروفرانتاندها و DDD
- ترکیب Micro-Frontendها
- مسیریابی Micro-Frontendها (routing)
- ارتباط بین مایکروفرانتاندها
پ.ن: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
مطالبی که توی فصل سوم صحبت شده:
- معماریها و چالشهای Micro-Frontend
- چارچوب تصمیمگیری برای معماری Micro-Frontend
- مشخص کردن Micro-Frontend ها
- میکروفرانتاندها و DDD
- ترکیب Micro-Frontendها
- مسیریابی Micro-Frontendها (routing)
- ارتباط بین مایکروفرانتاندها
پ.ن: خلاصه فصلهای قبل رو با این هشتگ میتونین پیدا کنین:
#Building_Micro_Frontends
@techstuff100
❤14👏1
آشنایی با SystemJS و importmap در جاوااسکریپت
توی این ویدیو درباره این صحبت کردم که SystemJS چیه و چطوری میتونه به ما کمک کنه که ماژولهای جاوااسکریپتی رو توی مرورگر لود کنیم. با ایمپورت داینامیک شروع میکنیم، بعد میریم سراغ importmap و پروژه رو با SystemJS تغییر میدیم. SystemJS اینجا بهکار میاد چون حتی وقتی مرورگر از importmap پشتیبانی نکنه هم ماژولها رو لود میکنه و با همه مرورگرهای مدرن سازگاره. تفاوت بین UMD و ESM رو بررسی میکنیم و در آخر babel رو به پروژه اضافه میکنیم.
ویدئو یوتوب:
https://www.youtube.com/watch?v=jPcTelWAO8Q&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x
@techstuff100
توی این ویدیو درباره این صحبت کردم که SystemJS چیه و چطوری میتونه به ما کمک کنه که ماژولهای جاوااسکریپتی رو توی مرورگر لود کنیم. با ایمپورت داینامیک شروع میکنیم، بعد میریم سراغ importmap و پروژه رو با SystemJS تغییر میدیم. SystemJS اینجا بهکار میاد چون حتی وقتی مرورگر از importmap پشتیبانی نکنه هم ماژولها رو لود میکنه و با همه مرورگرهای مدرن سازگاره. تفاوت بین UMD و ESM رو بررسی میکنیم و در آخر babel رو به پروژه اضافه میکنیم.
ویدئو یوتوب:
https://www.youtube.com/watch?v=jPcTelWAO8Q&list=PL1bBcWODwsLMYe8Gor4PDwT5U5CK_S36x
@techstuff100
❤6👏2
ویژگی sandbox در iframe
گاهی وقتا موقع نمایش یه صفحه خارجی با iframe توی سایت خودمون، نمیخوایم اون صفحه هر کاری دلش خواست بکنه؛ مثلا اسکریپت اجرا کنه، فرم بفرسته یا به کوکیها و localStorage دسترسی داشته باشه. با sandbox میتونیم روی iframe محدودیت بذاریم.
وقتی از sandbox استفاده میکنیم، مرورگر بهصورت پیشفرض همه قابلیتهای حساس صفحه داخل iframe رو غیرفعال میکنه. اما میتونیم با اضافه کردن چندتا مقدار خاص، اجازه بدیم فقط بعضی چیزا فعال باشن. توی این مثال، فقط اجازه اجرای اسکریپتها و ارسال فرم داده شده. بقیه چیزا مثل باز کردن popup یا دسترسی به storage غیرفعال هستن.
@techstuff100
گاهی وقتا موقع نمایش یه صفحه خارجی با iframe توی سایت خودمون، نمیخوایم اون صفحه هر کاری دلش خواست بکنه؛ مثلا اسکریپت اجرا کنه، فرم بفرسته یا به کوکیها و localStorage دسترسی داشته باشه. با sandbox میتونیم روی iframe محدودیت بذاریم.
وقتی از sandbox استفاده میکنیم، مرورگر بهصورت پیشفرض همه قابلیتهای حساس صفحه داخل iframe رو غیرفعال میکنه. اما میتونیم با اضافه کردن چندتا مقدار خاص، اجازه بدیم فقط بعضی چیزا فعال باشن. توی این مثال، فقط اجازه اجرای اسکریپتها و ارسال فرم داده شده. بقیه چیزا مثل باز کردن popup یا دسترسی به storage غیرفعال هستن.
@techstuff100
❤13👍3👏2