Ditty | دیتی
3.14K subscribers
194 photos
20 videos
4 files
387 links
دیتی | دنیای ساده‌شدهٔ برنامه‌نویسی وب
https://ditty.ir
Download Telegram
Media is too big
VIEW IN TELEGRAM
🔺ـ Function Expression توی جاوااسکریپت چیه و چه کاربردهای منحصر به فردی داره؟ 🤔

- نسخه متنی:
https://ditty.ir/p/JmDWX

#javascript
👏25👍92🤩1
This media is not supported in your browser
VIEW IN TELEGRAM
🔺توی جاوااسکریپت متدهای seal و freeze چه فرقی با هم دارن؟ 🤔

#javascript
👍316🔥5
🔺۲ متد جدید قراره به جاوااسکریپت اضافه بشه به اسم‌های findLast و findLastIndex که مشابه متدهای find و findIndex هستن، اما از انتهای آرایه شروع به جستجو می‌کنن

- اطلاعات بیشتر:
github.com/tc39/proposal-array-find-from-last

#javascript
👍26🔥19
🔺این کد رو یکی از دوستان منتشر کرد و گفته بود این سوالی بود که توی مصاحبه ازش پرسیدن

- توی این کد باید بدونیم که حلقهٔ while هیچوقت به پایان نمی‌رسه. به این دلیل که هیچوقت نوبت به اجرای setTimeout نمی‌رسه که x رو false کنه

- دلیل این اتفاق رو می‌دونین؟ توی کامنت‌ها بگین 👇👏

#javascript
👍44🤔41🎉1
🔺الگوی Event Delegation توی جاوااسکریپت چیه؟ 🤔

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

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

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

#javascript
👍15🔥8👎1😁1
🔺اگه یک ورودی از نوع number داریم، می‌تونیم هنگام خوندن مقدار اون، از valueAsNumber استفاده کنیم تا چیزی که تحویل می‌گیریم از نوع number باشه (اگه از value. استفاده کنیم، خروجی همیشه string هست)

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

#html #javascript
👍79🔥18🤩5
🔺چرا از await توی حلقه‌ها استفاده نکنیم؟ 🤔

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

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

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

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

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

- منبع ۱
- منبع ۲
#javascript
🔥33👍216
🔺چطوری می‌تونیم یک ماژول جاوااسکریپتی رو تحت شرایط خاصی Import کنیم؟ 🤔

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

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

#javascript
👍24🔥7🥰1
🔺متد reduceRight کاملاً مشابه reduce عمل می‌کنه با این تفاوت که از راست به چپ پیمایش انجام میده

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

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

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

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

- توی 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...

منبع

#javascript
🔥37👍209
🔺اگه توی جاوااسکریپت تازه کار هستین، پیشنهاد می‌کنم یکی از پرطرفدارترین قسمت‌های «جاوااسکریپت برای مبتدیان» توی دیتی که ساختن SPA با Vanilla JS (جاوااسکریپت خام) هست رو ببینین و بررسی کنین:
» Demo
» Source Code
» Video

#javascript
🔥18👍62
🔺به جاوااسکریپت یک متد جدید اضافه شده به اسم hasOwn که کارایی اون خیلی شبیه به hasOwnProperty هست و به زودی قراره به عنوان جایگزین این متد معرفی بشه

- این متد از آبجکتِ Object در دسترس هست و بررسی می‌کنه که آیا یک پراپرتی توی یک آبجکت وجود داره یا نه

- توی این پست به صورت اختصاصی با این متد و تفاوت‌های اون با hasOwnProperty آشنا بشین:
ditty.ir/503 💯

#javascript
🔥21👍6👏2
🔺از sendBeacon جاوااسکریپت چی می‌دونیم؟

- اگه توی یک صفحه وب، قصد داریم اطلاعات کوچیک که بیشتر جنبهٔ آماری دارن رو به سرور ارسال کنیم، بهتره sendBeacon رو به Ajax ترجیح بدیم. چون توی بعضی شرایط Ajax محدودیت‌هایی داره و قابل اطمینان نیست

- متد sendBeacon که یک Web API هست، شباهت‌هایی به ای‌جکس داره و اطلاعات رو بصورت Async به سرور می‌فرسته. اما ویژگی‌ها و کاربرد منحصر به فردی داره که توی پست زیر می‌تونید با اون آشنا بشید:
ditty.ir/506

#javascript
👎179👍408💔1
🔺۳ ترفند برای اینکه Import های قشنگ‌تری توی #جاوااسکریپت داشته باشیم:

https://antoine-mesnil.medium.com/3-tips-to-tidy-up-your-es6-imports

#javascript
👍15
🔺توی جاوااسکریپت آبجکت‌های Map و WeakMap چی هستن و چرا معرفی شدن؟🤔

- آبجکت‌های Map و WeakMap توی شرایطی معرفی شدن که با آبجکت‌های معمولی می‌تونستیم تقریباً هر کاری انجام بدیم! اما توی برنامه‌های مدرن، توی بعضی از شرایط خاص استفاده از آبجکت‌های معمولی باعث کاهش #سرعت و توسعه‌پذیری برنامه میشد که به همین علت Data Structure های مختلفی مثل Map و WeakMap معرفی شدن

- توی جدیدترین پست دیتی با مجموعه‌های Map و WeakMap آشنا می‌شیم و تفاوتشون رو با آبجکت‌های معمولی مقایسه می‌کنیم:
 ditty.ir/513

#javascript
24👍8🎉4👌2