Ditty | دیتی – Telegram
Ditty | دیتی
3.19K subscribers
194 photos
20 videos
4 files
387 links
دیتی | دنیای ساده‌شدهٔ برنامه‌نویسی وب
https://ditty.ir
Download Telegram
🔺توی جاوااسکریپت، داخل یک Destructuring می‌تونیم باز هم Destructuring داشته باشیم (عکس شمارهٔ 2)

- عکس شمارهٔ 1 حالت بدون Destructuring هست. به نظر شما کدوم روش خواناتر یا در کل مناسب‌تر هست؟ 1 یا 2؟

- از لینک زیر با Destructuring جاوااسکریپت آشنا بشین:
ditty.ir/459

#javanoscript
👍20🔥9
Ditty | دیتی
🔺الگوی طراحی Facade به زبان #ساده - اگه با کد، کلاس، ابزار، کتابخونه و یا هر چیزی سر و کار داریم که پیاده‌سازی طولانی و پیچیده‌ای داره، با این الگو می‌تونیم اون پیچیدگی‌ها رو مخفی کنیم تا کدهای ساده‌تر و با قابلیت استفاده مجدد داشته باشیم - از لینک زیر با…
🔺الگوی طراحی Proxy به زبان #ساده

- با الگوی پراکسی که یکی از پرکاربردترین الگوها توی دنیای نرم‌افزار هست، می‌تونیم دسترسی‌ها به یک آبجکت یا سرویس رو مدیریت و نظارت کنیم تا بتونیم ویژگی‌های دلخواهمون (که سرویس اصلی فاقد اون هست) رو پیاده‌سازی کنیم


- مثلاً:
» اگه آبجکتی داریم که کارهای حساسی انجام میده، با پراکسی می‌تونیم دسترسی‌ها به اون آبجکت رو کنترل کنیم

» اگه سرویسی داریم که ویژگی‌های مد نظرمون رو ارائه نمیده، با الگوی پراکسی می‌تونیم ویژگی‌های دلخواهمون رو بهش اضافه کنیم

» اگه سرویسی داریم که عملیات سنگینی انجام میده، با پراکسی می‌تونیم خروجی عملیات مشابه رو کش کنیم تا از هدر رفت منابع جلوگیری بشه

» اگه کلاسی داریم که نمونه‌سازی از اون سنگین هست، با پراکسی می‌تونیم عملیات نمونه‌سازی از اون رو به تعویق بندازیم (Lazy init)


- از لینک زیر با این الگو و کاربردهای اون آشنا بشین:
ditty.ir/474

#oop 💯
🔥10👍7
🔺با معروف‌ترین کدهای HTTP اینجا آشنا بشین:
ditty.ir/72

- اگه با عکس‌های حیوانات بهتر یاد می‌گیرین اینجاها رو ببینین:
» httpstatusdogs.com 🐶
» https://http.cat 😺

#links
😁7👍4
Migration-Guide-Cheat-Sheet.pdf
1021.6 KB
🔺چطوری از Vue 2 به Vue 3 مهاجرت کنیم؟

#vue
🎉5🤩4👍3🔥3
Frontend Performance Cheatsheet.pdf
221.4 KB
🔺چطوری عملکرد و سرعت برنامه‌های فرانت‌اند رو بهتر کنیم؟

#tips
🔥14👍7🤩4
🔺نسخهٔ وب Paint ویندوز رو ببینین تا کلی خاطره براتون زنده بشه: 🥲
https://jspaint.app

» GitHub

#memories
😢11😱4👍1
🔺قدرت نفوذ (Specificity) کدوم سلکتور CSS نسبت به بقیه بالاتر هست و اعمال میشه؟ 🤔

(ترتیب اعمال سلکتورها رو می‌تونین توی کامنت‌ها بگین)
Anonymous Quiz
24%
div { }
5%
.div { }
23%
div#id { }
12%
div:is(#id) { }
15%
div:where(#id) { }
👍17🔥5🎉5👎2🤩2
🔺ـ CSS Specificity یعنی چی؟ 🤔

- اگه حتی مقدار خیلی کمی هم با CSS کار کرده باشین، حتماً دیدین که Rule هایی که توی بعضی از سلکتورها می‌نویسیم، نسبت به بقیه Rule ها قدرت بیشتری دارن و در نتیجه روی المنت اعمال میشن

- به این قضیه میگن CSS Specificity. هر چی Specificity یک دستور بالاتر باشه، قدرت بیشتری داره تا روی المنت اعمال بشه

- برای اینکه متوجه بشین کدوم دستور CSS بالاترین میزان نفوذ و اعمال شدن یا به قول معروف Specificity رو داره، این دمو رو ببینین:

https://www.matuzo.at/blog/2022/specificity/

#css
👍13🔥6
🔺از کدوم Package Manager برای پروژه‌هات استفاده می‌کنی؟
Anonymous Poll
78%
NPM
2%
PNPM
29%
YARN
3%
Others
👍11
Is CSS a programing language?
The Vanilla JS Podcast
🔺آیا CSS یک زبان برنامه‌نویسی به حساب میاد؟ نظر شما چیه؟ 🤔

- آقای Chris Ferdinandi، مدرس معروفی که بیشتر با آموزش‌های Vanilla JS شناخته شده، توی این پادکست کوتاه، یک بار برای همیشه به این سوال رایج که آیا CSS یک زبان برنامه‌نویسی هست یا خیر، مفصل جواب داده :))

- متن این پادکست توی کامنت‌ها
#css
👍16😁8🔥2😢1
🔺توی کنسول مرورگر با $ می‌تونیم درست مثل jQuery المنت‌ها رو انتخاب کنیم

- استفاده از $ این یک میان‌بر برای document.querySelector هست

- استفاده از $$ این یک میان‌بر برای document.querySelectorAll هست
#tips
👍54🤩113👏2
🔺ـ fetch API که اون رو توی جاوااسکریپت نسخه مرورگرها می‌شناختیم، به تازگی به Node.js هم اضافه شده 🎉

- با fetch API می‌تونیم درخواست‌های HTTP رو خیلی راحت‌تر و بدون استفاده از کتابخونه‌های خارجی انجام بدیم

- برای آشنایی با fetch API این پست دیتی رو ببینین:
https://ditty.ir/154

#javanoscript
🤩16👍4😱21
🔺توی CSS دو روش جدیدتر و البته کوتاه‌تر برای انتخاب کردن چندتایی المنت‌ها معرفی شده که اون توابع ()where: و ()is: هستن

- با این توابع می‌تونیم به صورت گروهی و یکجا چندین المنت رو انتخاب کنیم. کاری که قبلاً امکان‌پذیر نبود و باید المنت‌ها رو تک تک انتخاب می‌کردیم

- این ۲ تابع کارایی مشابهی دارن. اما باید بدونیم که المنت‌هایی که با where انتخاب می‌کنیم، پایین‌ترین میزان Specificity رو دارن. اما Specificity توی is بستگی به المنت‌هایی داره که انتخاب می‌کنیم

- این دو تابع نسبتاً جدید هستن و بنابراین پشتیبانی مرورگرها اهمیت داره:
https://developer.mozilla.org/en-US/docs/Web/CSS/:where

#css
👍362👏2