🔺یکی از کاربردی‌ترین قابلیت‌های توی 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

🔺متد reduceRight کاملاً مشابه reduce عمل می‌کنه با این تفاوت که از راست به چپ پیمایش انجام میده

- تا به‌ حال جایی مجبور شدین از reduceRight استفاده کنین؟

- برای آشنایی با متد reduce این پست رو بخونین:
https://ditty.ir/p/XolQJ

پ.ن: زحمت کد توی عکس رو تماماً GitHub Copilot کشیده 😁

#javanoscript

🔺۳ ابزاری که توی هر پروژه‌ای استفاده می‌کنی رو کامنت کن 👏👇
#misc

🔺پیاده‌سازی توابع Throttle و Debounce توی جاوااسکریپت با جزییات فراوان:
https://ditty.ir/499

#javanoscript

🔺دوستان زحمت کشیدن و یک پکیج اختصاصی برای عمل تفریق توی جاوااسکریپت طراحی کردن: 😄
https://www.npmjs.com/package/subtract

#links

🔺در راستای زحمات دوستان، یک پکیج وجود داره به اسم is-odd با ۲۰۰هزار دانلود هفتگی که برای تشخیص عدد فرد استفاده میشه:
https://www.npmjs.com/package/is-odd

- یک پکیج دیگه وجود داره به اسم is-even که برای تشخیص عدد زوج استفاده میشه، ۴۲۹هزار نصب هفتگی داره و توی خودش داره به شکل زیر از پکیج is-odd استفاده می‌کنه:

var isOdd = require('is-odd');

module.exports = function isEven(i) {
  return !isOdd(i);
};

#tips

🔺آقای مارتین فاولر میگه: یک برنامه‌نویس بد کدی می‌نویسه که فقط یک کامپیوتر بتونه اون رو درک کنه. اما یک برنامه‌نویس خوب کدی می‌نویسه که یک انسان بتونه اون رو متوجه بشه!

- توی Code Review هایی که انجام میدم و رزومه‌هایی که بررسی می‌کنم، معمولاً اولین و مهمترین معیار برای قبولی کد، تمیزی و خوانایی اون هست. و کار کردن کد اولویت دوم

- می‌خوایم با چند مقاله آشنا بشیم که کمک می‌کنن کدهای تمیزتر و خواناتری داشته باشیم:

• Clean Code Explained – A Practi...
• Clean Code concepts adapted for...
• Clean Code Practice: How to write...
• JavaScript Clean Coding Best P...
• Function parameters in JavaScript
• Keeping your code clean
• Best Practices for Using Modern...
• Best practices for cross node/w...
• Writing Clean Code
• Writing Clean Code and The Pra...
• Clean code, dirty code, human...
• Practical Ways to Write Better...
• The Must-Know Clean Code Princ...

منبع

#javanoscript

🔺آمار نظرسنجی Stackoverflow سال ۲۰۲۲ هم منتشر شد

» نکته‌هایی از این آمار:

• برای دهمین سال پیاپی و طبق معمول، جاوااسکریپت پر استفاده‌ترین زبان
• دیتابیس MySQL پراستفاده‌ترین دیتابیس
• نود جی‌اس و ری‌اکت پراستفاده‌ترین فریم‌ورک‌های وب
• وی‌اس کد (VS Code) پراستفاده‌ترین IDE
• زبان Rust دوست‌داشتنی‌ترین زبان و MATLAB ترسناک‌ترین
• دوست‌داشتنی‌ترین دیتابیس PostgreSQL
• دوست‌داشتنی‌ترین فریم‌ورک‌های وب Phoenix و Svelte و Deno
• ترسناک‌ترین‌ فریم‌ورک‌های وب Angular.js و Drupal و jQuery
• دوست‌داشتنی‌ترین ابزارها Docker و Kubernetes
• دوست‌داشتنی‌ترین IDE ها Neovim و VS Code
• ترسناک‌ترین‌ IDE ها NetBeans و Eclipse

• به طور میانگین، از سال ۲۰۲۱ تا ۲۰۲۲ میزان دستمزدها ۲۳٪ افزایش داشته
• زبان‌های Clojure و Erlang و #F پردرآمدترین زبان‌ها


» آمار با جزییات کامل
#stats

🔺توی #تایپ‌اسکریپت اگه بخوایم یک مقدار رو غیر قابل تغییر یا Immutable کنیم، راه‌های زیادی وجود داره که یکی از جالب‌ترین اونها استفاده از Const Assertion هست

- با این ویژگی اینجا آشنا بشین:
ditty.ir/500 💯

#typenoscript

🔺توی تایپ‌اسکریپت، Narrowing یعنی چی؟ 🤔

- اگه مستندات و آموزش‌های تایپ‌اسکریپت رو خونده باشین، حتماً واژه Narrowing رو زیاد دیدین

- معنی تحت‌اللفظی این واژه یعنی محدود کردن یا باریک کردن

- تایپ‌اسکریپت با عملیات Narrowing کاری می‌کنه که یک تایپ به شکل یک تایپ خاص‌تر و مشخص‌تر برای ما در دسترس باشه

- توی عکس همونطور که می‌بینیم، پارامتر x ممکنه رشته باشه یا عدد. توی این کد دو عملیات Narrowing انجام گرفته: یکی برای بلاک if و یکی هم برای else

- با این ویژگی، با پارامتر x توی بلاک if فقط به صورت رشته رفتار میشه. برای مثال اگه متد toFixed رو صدا بزنیم خطا می‌گیریم. چون توی این بلاک، x فقط به صورت رشته قابل دسترس هست

- همچنین توی بلاک else تایپ‌اسکریپت می‌دونه که نوع x دیگه رشته نیست و قطعاً عددی هست. پس با اون مثل یک عدد رفتار می‌کنه
#typenoscript

🔺به این ویدئوی کوتاه نگاه کنین، می‌خوایم درباره یک اصل از Core Web Vitals صحبت کنیم

- کاربر قصد داره روی دکمه خاکستری بزنه، اما درست قبل از کلیک، یک باکس سفید بالای فرم نمایش داده میشه و کاربر ناخواسته دکمهٔ آبی رو کلیک می‌کنه 🤦‍♂️

- گوگل توی سومین اصل Core Web Vitals درباره Cumulative Layout Shift (مخفف: CLS) صحبت می‌کنه و میگه توی یک صفحهٔ ضعیف، بخاطر لود شدن مرحله به مرحلهٔ المنت‌ها (مثل لود شدن یک عکس سنگین) شیفت‌ها و جابجایی‌های ناخواسته‌ای رخ میده که برای کاربر گیج‌کننده هست که در نتیجه UX و امتیاز اون صفحه پایین میاد

- گوگل با مطرح کردن مباحثی مثل Core Web Vitals داره میگه که User Experience بیشتر از هر موقع دیگه‌ای اهمیت داره و در نتیجه یک صفحه وب زمانی امتیاز خوبی می‌گیره که یک کاربر توی اون احساس راحتی کنه

- منبع ویدئو
#tips