🔺الگوی Event Delegation توی جاوااسکریپت چیه؟ 🤔

- از این الگو هنگام کار با DOM و مدیریت کردن رویدادها استفاده می‌کنیم و با اون می‌تونیم کدهایی تمیزتر و با قابلیت توسعهٔ بیشتری داشته باشیم

- برای مثال چندین المنت مشابه داریم و می‌خوایم onclick همهٔ این المنت‌ها رو مدیریت کنیم. این الگو کمک می‌کنه این کار رو با نوشتن کدهای کمتر و خواناتر انجام بدیم 👌

- با این الگو اینجا آشنا بشین:
https://ditty.ir/492

#javanoscript

🔺اگه یک ورودی از نوع number داریم، می‌تونیم هنگام خوندن مقدار اون، از valueAsNumber استفاده کنیم تا چیزی که تحویل می‌گیریم از نوع number باشه (اگه از value. استفاده کنیم، خروجی همیشه string هست)

- همچنین اگه نوع ورودی date هست، می‌تونیم از valueAsDate استفاده کنیم تا چیزی که تحویل می‌گیریم نوعی از آبجکت Date باشه

#html #javanoscript

🔺اعتبارسنجی فرم‌های HTML آسون‌تر از همیشه 😋

- با کمک دوستان، ابزاری رو توسعه دادیم که بتونیم با کمترین کد و به ساده‌ترین حالت، یک فرم HTML رو اعتبارسنجی کنیم (مثل عکس)

- اسمش رو گذاشتیم Facile Validator (فَسیل ولیدیتور) که اون رو به تازگی و به صورت رسمی ریلیز کردیم

- مستندات انگلیسی
- مستندات فارسی
- دمو

- خوشحال می‌شیم استفاده کنین، معرفی کنین و با Star هاتون توی گیت‌هاب از پروژه حمایت کنین 🌹

#tools

🔺چرا از await توی حلقه‌ها استفاده نکنیم؟ 🤔

- یکی از هدف‌های async/await پیاده‌سازی قابلیت پردازش موازی و مدیریت کردن عملیات ناهمگام هست

- وقتی توی هر پیمایشِ حلقه از await استفاده می‌کنیم، یه جورایی مزیت‌های پردازش موازی رو نادیده گرفتیم

- توی این شرایط، عملیات موازی نیست. بلکه متوالی هست. چونکه پیمایش بعدی باید صبر کنه تا عملیات ناهمگام فعلی تموم بشه. پس بهتره کاری کنیم که عملیات ناهمگام بصورت موازی اجرا بشن

- بهتره توی حقله منتظر نتیجهٔ عملیات ناهمگام نباشیم. تک تک این عملیات رو توی یک آرایه قرار بدیم و نهایتاً بیرون از حلقه از ()Promise.all استفاده کنیم تا از مزیت پردازش‌های موازی استفاده کرده باشیم (مثل عکس)

ویرایش: منظور از پردازش موازی، اجرای موازی عملیات ناهمگام هست

- منبع ۱
- منبع ۲
#javanoscript

🔺توابع Pure و Impure چی هستن؟ 🤔

- این یکی از رایج‌ترین سوالات مصاحبه هست و می‌تونه تا حد زیادی سطح مصاحبه‌شونده رو مشخص کنه

- تابع Pure به تابعی گفته میشه که خروجی اون با توجه به ورودی که می‌گیره قابل پیش‌بینی هست. همچنین با اطلاعات بیرون از حوزهٔ خودش (مثل متغیرها و توابع دیگه) کاری نداره و حواسش به کار خودش هست

- تابع Impure به تابعی گفته میشه که خروجی اون معمولاً غیر قابل پیش‌بینی هست و همچنین نسبت به اطلاعات و دنیای بیرون از خودش کنجکاو هست و توی کار اونها دخالت می‌کنه

- با این توابع و همچنین مفاهیمی مثل Side Effect توی این پست آشنا بشیم:
ditty.ir/488

#tips

🔺ـ Node و Element توی دام (DOM) چه تفاوتی دارن؟ 🤔

- همونطور که می‌دونیم یک صفحهٔ HTML از اجزای مختلفی مثل تگ‌ها، متن‌ها، کامنت‌ها و ... تشکیل میشه

- برای دسترسی به این اجزا و کار کردن با اونها، مرورگر برای ما آبجکت DOM که یک رابط بین HTML و جاوااسکریپت هست رو می‌سازه. با DOM می‌تونیم به همهٔ این اجزا دسترسی داشته باشیم و تغییراتی توی صفحه بدیم

- به این اجزایی که توی DOM وجود دارن به طور کلی گفته میشه Node. مثلاً متن توی تگ p، کامنت‌ها و خودِ المنت‌ها همگی نوعی Node هستن

- اعضایی مثل div و img یک نوع خاص از Node هستن که بهشون گفته میشه Element

- برای مثال توی تصویر، یک المنت p داریم و در مجموع ۴ تا Node:
۱. کامنت
۲. المنت p
۳. اتریـبـیـوت class
۴. متن بین تگ‌های باز و بستهٔ p

#tips #html

🔺منظور از Stateless بودن REST چیه؟ 🤔

- همونطور که می‌دونیم رِست یک معماری مبتنی بر HTTP و شامل قوانینی هست برای ساختن وب‌سرویس‌ها. و یک برنامهٔ RESTful به برنامه‌ای گفته میشه که از این قوانین تبعیت می‌کنه

- یکی از قوانین برنامهٔ رِست‌فول اینه که هر درخواستی که از کلاینت به سمت سرور زده میشه، باید توی خودش همهٔ اطلاعاتی که سرور برای دادنِ پاسخ مناسب لازم داره رو داشته باشه

- به عبارت دیگه، هر درخواست باید کاملاً مستقل از درخواست‌های دیگه عمل کنه و سرور برای فهمیدن یک درخواست نباید وابسته به درخواست‌های دیگه باشه

- وابستگی درخواست‌ها چه زمانی به وجود میاد؟ زمانی که سرور اطلاعاتی از یک درخواست رو ذخیره کرده تا برای درخواست‌های بعدی از اون استفاده کنه و اینجاست که قانون Stateless بودن نقض میشه

- برای مثال توی یک برنامه‌ای که می‌خواد از قوانین رست تبعیت کنه می‌خوایم نظر ارسال کنیم. اینجا هر درخواست توی خودش علاوه بر متن نظر، باید اطلاعات مربوط به شناسایی و احراز هویت کاربر (مثلاً توکن JWT) رو همیشه به همراه داشته باشه

- توی این برنامه قانون رست زمانی نقض میشه که سرور اطلاعات مربوط به احراز هویت رو (مثلاً به وسیلهٔ قابلیت Session ها) توی خودش ذخیره کنه تا برای درخواست‌های بعدی دیگه نیازی به ارسال اطلاعات احراز هویت نباشه

- پ.ن: منظور از State اطلاعاتی هست که توی برنامه در جریانه. مثل اطلاعات کاربری، تم، زبان و ... .

#tips

🔺چطوری می‌تونیم یک ماژول جاوااسکریپتی رو تحت شرایط خاصی Import کنیم؟ 🤔

- توی جاوااسکریپت قابلیتی وجود داره به اسم Dynamic Imports که اجازه میده با انعطاف و اختیارات بیشتری یک ماژول رو لود و استفاده کنیم 💯

- توی جدیدترین پست دیتی با این ویژگی بیشتر آشنا بشین:
ditty.ir/498

#javanoscript

🔺یکی از کاربردی‌ترین قابلیت‌های توی VS Code قابلیت Expand Selection هست

- مثلاً اگه بخوایم کدهای بین بلاک‌ها، پرانتزها یا تگ‌ها رو انتخاب کنیم، خیلی راحت می‌تونیم از دکمه‌های Shift+Alt+Right روی کیبورد استفاده کنیم

- همچنین یه افزونه جدید و جالب برای VS Code معرفی شده به اسم Smart Clicks که کمک می‌کنه با یک دابل‌کلیک ماوس کارهای مشابهی انجام بدیم:
https://github.com/antfu/vscode-smart-clicks

#tips

🔺توی DOM می‌تونیم از متد matches استفاده کنیم برای اینکه متوجه بشیم آیا یک المنت با Selector مد نظر ما همخونی داره یا نه

- اگه المنت با Selector همخونی داشته باشه خروجی true هست. در غیر این صورت false

#tips 💯

🔺با Emmet خیلی راحت می‌تونیم یک کد HTML رو Wrap کنیم توی یک تگ دیگه 👌

- توی VS Code دکمه F1 رو بزنین و بعد دنبال گزینه Emmet: Wrap With Abbreviation بگردین

#tips

🔺توی ورژن جدید Facile Validator میشه از Regex برای اعتبارسنجی ورودی‌ها استفاده کرد

- همچنین یک قابلیت به اسم X-Prefixed Rules اضافه شده که اجازه میده کار تعریف کردن آرگومان برای قوانین رو توی جاوااسکریپت انجام بدیم

- مستندات و صفحه رسمی:
https://github.com/upjs/facile-validator

#tools

🔺مقدارهای justify-content برای CSS Flexbox به زبان ساده :))

https://codepen.io/alvaromontoro/pen/vYdyOxe

#css

🔺رنگ‌ها و Gradient های خوشگل رو از این وبسایت بگیرین:
https://colors.dopely.top/gradients

#links

🔺ـ Tree Shaking یعنی چی؟ 🤔

- وقتی با ابزارهایی مثل وب‌پک می‌خوایم از یک برنامهٔ جاوااسکریپتی بیلد بگیریم، تکنیک Tree Shaking با حذف کدهای اضافی و بلااستفاده (به قول معروف Dead Code) بهمون کمک می‌کنه تا حجم کدهای کمتری توی باندل نهایی قرار بگیره که در نتیجه سرعت برنامه بالاتر میره

- برای مثال اگه توی برنامه import/export هایی داشته باشیم که هیچ جایی استفاده نمیشن، ابزارهایی مثل وب‌پک هنگام باندل کردن برنامه با آنالیزهایی که انجام میدن متوجه این import/export ها میشن و اونها از خروجی نهایی حذف می‌کنن

- به این مرحله از عملیات باندل کردن به اصطلاح گفته میشه Tree Shaking یا Dead Code Elimination

عکس از Unsplash
#tips

🔺توی این نظرسنجی، بیشتر شرکت‌کننده‌ها درباره Core Web Vitals که یک موضوعِ داغ و مهم توی دنیای امروز فرانت‌اند هست، گفتن اطلاعی ندارن

- خبر خوب اینه که دوست خوبم، صالح فدائی یکی از با دانش‌ترین دولوپرهایی که می‌شناسم، قراره توی یک همایش درباره Core Web Vitals صحبت کنه 👋

- پیشنهاد می‌کنم این همایش رو از دست ندین. برای اطلاعات بیشتر این پست رو ببینین:
https://news.1rj.ru/str/quera_ir/1692

- صالح توی گروه دیتی هست. سوالی داشتین توی گروه بپرسین

#frontend

🔺سایپرس (Cypress) یکی از جالب‌ترین و مدرن‌ترین ابزارهای تست End to End برنامه‌های فرانت هست. یکی از دوستان زحمت کشیده و داره آموزش‌هایی از این ابزار به صورت ویدئویی و رایگان منتشر می‌کنه. پیشنهاد می‌کنم سری به این کانال بزنین:
https://news.1rj.ru/str/automationcamp

#links

🔺توابع Debounce و Throttle چه فرقی با هم دارن؟ 🤔

- هر دو تابع شباهت‌های زیادی دارن و برای به تاخیر انداختن اجرای یک قطعه کد به کار میرن. به قول معروف برای Rate Limiting

- تابع Throttle مشخص میکنه که کدهای ما توی یک بازه زمانی مشخص فقط یک بار اجرا بشه

- مثلاً می‌خوایم یک قطعه کد توی بازه زمانی ۱۰ ثانیه، حداکثر یک‌بار اجرا بشه. اینجا از تابع Throttle استفاده می‌کنیم

- با تابع Debounce می‌تونیم مطمئن بشیم که یک قطعه کد دوباره اجرا نمیشه مگر اینکه مقدار مشخصی از زمان گذشته باشه

- معروف‌ترین مثال Debounce برای پیاده‌سازی جستجوی لحظه‌ای هست. ابتدا صبر می‌کنیم تا کاربر دست از تایپ کردن بکشه و بعد جستجو رو شروع می‌کنیم. مثلاً می‌گیم اگه از آخرین تایپ کاربر ۱ ثانیه گذشته بود جستجو رو شروع کن. در غیر این صورت، جستجو رو به تعویق بنداز

- به زودی توی دیتی نحوه پیاده‌سازی این توابع رو قرار میدم (منابع)

#tips