ارتباط بین پنجرهها با postMessage
این متد جاوااسکریپت، بهمون اجازه میده از یه صفحه وب (مثلا یه iframe) به یه صفحه دیگه (مثلا parentش) پیام بفرستیم. توی این پست به همراه مثال توضیحش دادم.
@techstuff100
این متد جاوااسکریپت، بهمون اجازه میده از یه صفحه وب (مثلا یه iframe) به یه صفحه دیگه (مثلا parentش) پیام بفرستیم. توی این پست به همراه مثال توضیحش دادم.
@techstuff100
👍15👏1🎉1
فایل .gitattributes در گیت
ممکنه پیش بیاد یه پروژه رو کلون کنیم، بعد ببینیم یه سری فایل EOL (End Of Line) عجیبغریب باز میشن یا وقتی diff میگیریم پر از تغییرات بیربطه. توی این موقعیت فایل .gitattributes میتونه کمکمون کنه.
فرض کنید توی یه تیمی کار میکنیم که اعضاش رو ویندوز، مک و لینوکس هستن. هر کی با ادیتور و تنظیمات خودش. حالا یه نفر یه فایل .bat مینویسه که رو ویندوز باید با CRLF باشه، ولی یکی دیگه با LF کامیتش میکنه، و اسکریپت دیگه اجرا نمیشه. یا مثلا یه فایل go رو که باید با LF باشه، یکی دیگه با CRLF ذخیره کرده. با .gitattributes میتونیم از این ناهماهنگیها جلوگیری کنیم و یه سری قانون برای Git تعریف کنیم که همه اعضای تیم رعایتش کنن.
توی این مثال تعریف کردم که:
- فایلهای .bat باید همیشه با CRLF باشن.
- فایلهای go فقط با LF ذخیره بشن.
- فایلهای .png و .noscript هم باینری در نظر گرفته بشن تا Git نخواد روشون diff بگیره.
@techstuff100
ممکنه پیش بیاد یه پروژه رو کلون کنیم، بعد ببینیم یه سری فایل EOL (End Of Line) عجیبغریب باز میشن یا وقتی diff میگیریم پر از تغییرات بیربطه. توی این موقعیت فایل .gitattributes میتونه کمکمون کنه.
فرض کنید توی یه تیمی کار میکنیم که اعضاش رو ویندوز، مک و لینوکس هستن. هر کی با ادیتور و تنظیمات خودش. حالا یه نفر یه فایل .bat مینویسه که رو ویندوز باید با CRLF باشه، ولی یکی دیگه با LF کامیتش میکنه، و اسکریپت دیگه اجرا نمیشه. یا مثلا یه فایل go رو که باید با LF باشه، یکی دیگه با CRLF ذخیره کرده. با .gitattributes میتونیم از این ناهماهنگیها جلوگیری کنیم و یه سری قانون برای Git تعریف کنیم که همه اعضای تیم رعایتش کنن.
توی این مثال تعریف کردم که:
- فایلهای .bat باید همیشه با CRLF باشن.
- فایلهای go فقط با LF ذخیره بشن.
- فایلهای .png و .noscript هم باینری در نظر گرفته بشن تا Git نخواد روشون diff بگیره.
@techstuff100
👍11
از 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