دیزاین پترن Compound Components در React
توی این پست درباره یه راه حل تمیز و اصولی برای ساخت کامپوننتهای انعطافپذیر با استفاده از Compound Components صحبت میکنم. با این الگو میتونیم کامپوننتهای پیچیده رو به اجزای کوچکتر و قابل ترکیب تبدیل کنیم.
✅ چندتا نکته:
— این الگو برای همه موارد مناسب نیست. وقتی ازش استفاده کنید که واقعا نیاز به انعطافپذیری بالا دارید.
— اجزای compound component معمولا فقط در کنار هم معنی میدن و نباید جدا استفاده بشن.
— استفاده از Context باعث میشه نیازی به prop drilling نداشته باشیم.
@techstuff100
توی این پست درباره یه راه حل تمیز و اصولی برای ساخت کامپوننتهای انعطافپذیر با استفاده از Compound Components صحبت میکنم. با این الگو میتونیم کامپوننتهای پیچیده رو به اجزای کوچکتر و قابل ترکیب تبدیل کنیم.
✅ چندتا نکته:
— این الگو برای همه موارد مناسب نیست. وقتی ازش استفاده کنید که واقعا نیاز به انعطافپذیری بالا دارید.
— اجزای compound component معمولا فقط در کنار هم معنی میدن و نباید جدا استفاده بشن.
— استفاده از Context باعث میشه نیازی به prop drilling نداشته باشیم.
@techstuff100
👍8🤔2
ریاضی پشت پرده فیلترهای 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
وقتی برای عکسهامون از فیلتر 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
👍13🔥1
آشنایی با Rate Limiting
این مسئله وجود داره که یه سری کاربر یا سرویس، منابع سیستم رو به خودشون اختصاص میدن و بقیه کاربرها نمیتونن درست از سرویس استفاده کنن. مثلا یه API داریم که یهو یه کاربر شروع میکنه به ارسال درخواستهای زیاد و کل سیستم رو کند میکنه. یا بدتر از اون، ممکنه با DoS attack روبرو بشیم که عملا سرویسمون رو از دسترس خارج کنه.
یکی از راهحلها میتونه Rate Limiting باشه. با استفاده از الگوریتمهایی مثل Token Bucket یا Sliding Window میتونیم تعداد درخواستها رو محدود و کنترل کنیم. مثلا میتونیم بگیم هر کاربر در هر دقیقه فقط ۱۰۰ تا درخواست میتونه بفرسته. یا میتونیم برای هر endpoint مشخص کنیم چقدر traffic قبول میکنه. اینجوری هم جلوی سوءاستفاده رو میگیریم، هم تجربه کاربری بهتر میشه و هم هزینههای سرور رو میتونیم کنترل کنیم.
لینک مقاله:
https://www.solo.io/topics/rate-limiting
@techstuff100
این مسئله وجود داره که یه سری کاربر یا سرویس، منابع سیستم رو به خودشون اختصاص میدن و بقیه کاربرها نمیتونن درست از سرویس استفاده کنن. مثلا یه API داریم که یهو یه کاربر شروع میکنه به ارسال درخواستهای زیاد و کل سیستم رو کند میکنه. یا بدتر از اون، ممکنه با DoS attack روبرو بشیم که عملا سرویسمون رو از دسترس خارج کنه.
یکی از راهحلها میتونه Rate Limiting باشه. با استفاده از الگوریتمهایی مثل Token Bucket یا Sliding Window میتونیم تعداد درخواستها رو محدود و کنترل کنیم. مثلا میتونیم بگیم هر کاربر در هر دقیقه فقط ۱۰۰ تا درخواست میتونه بفرسته. یا میتونیم برای هر endpoint مشخص کنیم چقدر traffic قبول میکنه. اینجوری هم جلوی سوءاستفاده رو میگیریم، هم تجربه کاربری بهتر میشه و هم هزینههای سرور رو میتونیم کنترل کنیم.
لینک مقاله:
https://www.solo.io/topics/rate-limiting
@techstuff100
👍4👏1
الگوی BUILD-OPERATE-CHECK در تستنویسی
توی تستنویسی، خیلی وقتها تستهامون شلوغ و نامنظم میشن و فهمیدن اینکه چی به چیه سخت میشه. الگوی BUILD-OPERATE-CHECK که توی کتاب Clean Code هم بهش اشاره شده، یه راه حل سادهست که به تستهامون ساختار میده. این الگو تستهای ما رو به سه بخش تقسیم میکنه:
۱. قسمت BUILD (ساخت): در این مرحله دادههای ورودی و مورد نیاز برای تست رو آماده میکنیم.
۲. قسمت OPERATE (اجرا): عملیات اصلی که میخوایم تست کنیم رو اجرا میکنیم.
۳. قسمت CHECK (بررسی): نتایج به دست آومده رو با نتایج مورد انتظار مقایسه میکنیم.
فرض کنید توی React میخوایم یک دکمه Toggle ساده رو تست کنیم. کد رو در نظر بگیرید.
@techstuff100
توی تستنویسی، خیلی وقتها تستهامون شلوغ و نامنظم میشن و فهمیدن اینکه چی به چیه سخت میشه. الگوی BUILD-OPERATE-CHECK که توی کتاب Clean Code هم بهش اشاره شده، یه راه حل سادهست که به تستهامون ساختار میده. این الگو تستهای ما رو به سه بخش تقسیم میکنه:
۱. قسمت BUILD (ساخت): در این مرحله دادههای ورودی و مورد نیاز برای تست رو آماده میکنیم.
۲. قسمت OPERATE (اجرا): عملیات اصلی که میخوایم تست کنیم رو اجرا میکنیم.
۳. قسمت CHECK (بررسی): نتایج به دست آومده رو با نتایج مورد انتظار مقایسه میکنیم.
فرض کنید توی React میخوایم یک دکمه Toggle ساده رو تست کنیم. کد رو در نظر بگیرید.
@techstuff100
👍7🔥1👏1
نحوه عملکرد 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
شبکه توزیع محتوا یا 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
👍9❤1
وابستگی چرخشی (Circular Dependency) زمانی اتفاق میفته که دو ماژول یا ماژولهای بیشتری به همدیگه وابسته باشن، طوری که عملا یک حلقه بسته ایجاد میکنن. این موضوع میتونه باعث مشکلات جدی در اجرای کد بشه. توی این پست به همراه مثال بررسیش کردم.
@techstuff100
@techstuff100
👍4👏1
اولین پست Mediumم منتشر شد!
چند وقت پیش درگیر ستاپ کردن Flipper Debugger برای یه پروژه React Native بودم. ستاپش یه مقدار زمان برد و به یه سری خطا و چالش خوردم، ولی با خوندن داکیومنتها و گشتن توی Issues پروژه تونستم راهش بندازم. گفتم تجربهام رو توی یه مقاله مدیوم بنویسم که هم خطاهایی که خوردم رو توضیح بدم، هم روش حلشون رو. شاید به درد بقیه هم بخوره.
لینک مقاله:
https://medium.com/@seyed-mahdii-jalali/setting-up-flipper-debugger-for-react-native-android-projects-aba186b0b855
پ.ن: این اولین تجربهم توی نوشتن و انتشار پست توی مدیومه. اگه دوست داشتین، بهش claps بدین و حمایتش کنین. اگه هم نکتهای برای بهتر شدنش به ذهنتون رسید، ممنون میشم بهم بگین.
@techstuff100
چند وقت پیش درگیر ستاپ کردن Flipper Debugger برای یه پروژه React Native بودم. ستاپش یه مقدار زمان برد و به یه سری خطا و چالش خوردم، ولی با خوندن داکیومنتها و گشتن توی Issues پروژه تونستم راهش بندازم. گفتم تجربهام رو توی یه مقاله مدیوم بنویسم که هم خطاهایی که خوردم رو توضیح بدم، هم روش حلشون رو. شاید به درد بقیه هم بخوره.
لینک مقاله:
https://medium.com/@seyed-mahdii-jalali/setting-up-flipper-debugger-for-react-native-android-projects-aba186b0b855
پ.ن: این اولین تجربهم توی نوشتن و انتشار پست توی مدیومه. اگه دوست داشتین، بهش claps بدین و حمایتش کنین. اگه هم نکتهای برای بهتر شدنش به ذهنتون رسید، ممنون میشم بهم بگین.
@techstuff100
🔥10👍2👏2
آشنایی با Pub/Sub Messaging
ا Pub/Sub Messaging یه روش ارتباطی غیرهمزمانه که توی سیستمهای توزیعشده، مخصوصا معماریهای ابری و میکروسرویسها کاربرد زیادی داره. با این مدل، سرویسها میتونن بدون نیاز به ارتباط مستقیم، پیامها رو رد و بدل کنن. این روش باعث مقیاسپذیری بهتر، کاهش وابستگی بین سرویسها و پردازش همزمان درخواستها میشه. کاربردش هم توی مواردی مثل اعلانهای لحظهای، پردازش همزمان دادهها و هماهنگی بین سرویسهای سرورلس دیده میشه.
این سیستم از Publisher، Subscriber، Message و Topic تشکیل شده. Publisher پیامها رو روی یه Topic منتشر میکنه و Subscriberهایی که به اون Topic علاقه دارن، پیام رو دریافت میکنن. این روش یه ارتباط یکبهچند و بدون وابستگی ایجاد میکنه، که باعث افزایش انعطافپذیری سیستم میشه.
لینک مقاله:
https://aws.amazon.com/what-is/pub-sub-messaging/
@techstuff100
ا Pub/Sub Messaging یه روش ارتباطی غیرهمزمانه که توی سیستمهای توزیعشده، مخصوصا معماریهای ابری و میکروسرویسها کاربرد زیادی داره. با این مدل، سرویسها میتونن بدون نیاز به ارتباط مستقیم، پیامها رو رد و بدل کنن. این روش باعث مقیاسپذیری بهتر، کاهش وابستگی بین سرویسها و پردازش همزمان درخواستها میشه. کاربردش هم توی مواردی مثل اعلانهای لحظهای، پردازش همزمان دادهها و هماهنگی بین سرویسهای سرورلس دیده میشه.
این سیستم از Publisher، Subscriber، Message و Topic تشکیل شده. Publisher پیامها رو روی یه Topic منتشر میکنه و Subscriberهایی که به اون Topic علاقه دارن، پیام رو دریافت میکنن. این روش یه ارتباط یکبهچند و بدون وابستگی ایجاد میکنه، که باعث افزایش انعطافپذیری سیستم میشه.
لینک مقاله:
https://aws.amazon.com/what-is/pub-sub-messaging/
@techstuff100
🔥4👏1