Ditty | دیتی – Telegram
Ditty | دیتی
3.17K 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

#javanoscript
👏25👍92🤩1
🔺«رابطه نقشه برداری به شی» یعنی چی؟ 🤔

- همون ORM خودمونه که ویکی‌پدیا زحمت کشیده اسم اون رو فارسی ‌سازی کرده 😁

ــ ORM مخفف Object-Relational Mapping و تکنیکی هست که اجازه میده با استفاده از کدها و دستورات زبانی که داریم کار می‌کنیم با دیتابیس ارتباط برقرار کنیم، اطلاعات رو بخونیم و تغییر بدیم بدون اینکه با کدهای خام SQL سر و کار داشته باشیم

- از خوبی‌های استفاده از ORM اینه که یک لایه انتزاعی درست میشه. اگه در آینده نوع دیتابیس و ساختار دستورات SQL عوض بشه، لازم نیست کدهای برنامه‌ای که نوشتیم تغییر کنه

- یک خوبی دیگه استفاده از ORM اینه که برای مثال توی یک فایل جاوااسکریپتی برای کار با دیتابیس فقط با کدهای جاوااسکریپتی سر و کار داریم و پیچیدگی‌ها از قبل مخفی و کپسوله (Encapsulated) شدن

- از ORM های معروف میشه به Prisma و مانگوس (Mongoose) برای node و الوکوئنت برای لاراول اشاره کرد (البته مانگوس ODM هست ولی هدف مشابهی داره)

#tips
👍21😁3🔥1
Ditty | دیتی
🔺«رابطه نقشه برداری به شی» یعنی چی؟ 🤔 - همون ORM خودمونه که ویکی‌پدیا زحمت کشیده اسم اون رو فارسی ‌سازی کرده 😁 ــ ORM مخفف Object-Relational Mapping و تکنیکی هست که اجازه میده با استفاده از کدها و دستورات زبانی که داریم کار می‌کنیم با دیتابیس ارتباط برقرار…
🔺جا داره با چندتا معادلِ فارسی ویکی‌پدیا برای اصطلاحات لاتین دنیای برنامه‌نویسی آشنا بشیم 😁

- رابطه نقشه برداری به شی: Object-Relational Mapping
- الگوی ثبت کُنشور (کُنِش‌وَر): Active record pattern
- جدول درهمک‌سازی یا جدول چکیده‌سازی: Hash Table
- درهمش پایسته: Continuous integration
- خط لوله استقرار: Deployment pipeline
- پشته تماس یا پشته فراخوانی: Call Stack
- مدل شیءگرای سند یا دام: DOM - Document Object Model
- ائتلاف وب جهان‌گستر یا کنسرسیوم وب جهان‌گستر:World Wide Web Consortium یا W3C
- شیوه‌نامه آبشاری: (Cascading Style Sheets (CSS
- زبان نشانه‌گذاری ابرمتنی یا زنگام: HTML
- نگاره‌سازی برداری مقیاس‌پذیر: SVG
- حواله (برنامه‌نویسی شیءگرا): Forwarding
- الگوی طراحی آذینگر: Decorator Pattern
#fun
🤯25😁9👍5👎5
🔺توی این وبسایت می‌تونین کلی کتاب درباره زبان‌ها و فریم‌ورک‌های مختلف پیدا کنین:
https://goalkicker.com

- کتاب‌های جالبی هستن و بیشتر بدرد دوره کردن می‌خورن 👌

#links
🔥19👍105👏4🤯1
This media is not supported in your browser
VIEW IN TELEGRAM
🔺تفاوت Unit Test و Integration Test

- هر دو پنجره سالم هستن و به تنهایی درست کار می‌کنن. ولی مشکل و ناسازگاری زمانی به وجود میاد که کنار هم قرار می‌گیرن

» Credits
#tips
👏26👍7😁4
🔺بازی‌هایی که با هدف یادگیری Flexbox و Grid طراحی شدن:

Flexbox Froggy
Flexbox Defense
Knights of the Flexbox Table
Flex Box Adventure
Flexbox Zombies
Grid Garden
Grid Attack

» Credits
#links
👍26🤩3🎉21🤬1
🔺اسکریپت‌های defer و async چی هستن و چه فرقی با هم دارن؟ 🤔

- اینها Attribute هایی هستن که ما توی HTML به تگ‌های noscript نسبت می‌دیم

ــ defer به مرورگر میگه منتظر نباش تا من لود بشم. بنابراین مرورگر میره به ادامه پردازش صفحه می‌پردازه. اون اسکریپت توی بک‌گراند لود میشه و به محض اینکه DOM به‌طور کامل ساخته شد اجرا میشه. defer باعث وقفه توی کار مرورگر نمیشه

ــ async هم توی بک‌گراند لود و به محض لود شدن اجرا میشه. DOM و بقیه اسکریپت‌ها منتظر این اسکریپت نمی‌مونن و کاملاً مستقل از همدیگه به کارشون می‌پردازن. به بیان ساده‌تر، اسکریپت async به محض اینکه لود شد اجرا میشه

- توی defer یک اسکریپت زمانی اجرا میشه که DOM کاملاً توسط مرورگر پردازش شده باشه. اما async به این توجه نمی‌کنه که آیا DOM لود شده یا نه و یا مرورگر هنوز مشغول پردازش صفحه هست یا نه

- این Attribute ها فقط باید به تگ‌های noscript نسبت داده بشن که قراره یک اسکریپت خارجی رو لود کنن

- جزییات بیشتر:
https://ditty.ir/490

#tips
👍41👏3🤩2🔥1🥰1😁1
🔺توکن JWT رو کجا ذخیره می‌کنی؟
Anonymous Poll
39%
Cookie
61%
Local Storage
👍11🤯8🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
🔺توی جاوااسکریپت متدهای seal و freeze چه فرقی با هم دارن؟ 🤔

#javanoscript
👍316🔥5
🔺خروجی چیه؟ 🤔
- با این ایموجی‌ها نشون بدین:

ــ 1 👍
ــ 2 👏
#quiz
👏156👍100👎4🔥4
🔺با اون زبان و ابزار و فریم‌ورک و کتابخونه و ... که می‌خوای توی ۱۴۰۱ بترکونی، سال جدید رو تبریک بگو 👇👏😉🎉

#HAPPYNEWYEAR
🔥18👍4👏1😁1🎉1
🔺دوستان و همراهان عزیز، امیدوارم سال قشنگی داشته باشین و هر چی #باگ دارین به #فیچر تبدیل بشه 😉🌹🤲

#HAPPYNEWYEAR
🎉405🔥4😁3
🔺توی CSS یک تابع وجود داره به اسم element که از یک المنت توی صفحه، یک تصویر تولید می‌کنه که برای مثال می‌تونه به عنوان تصویر توی پراپرتی background-image قرار بگیره

- هر وقت المنت مد نظر آپدیت بشه، اون تصویر هم آپدیت میشه

- در حال حاضر فقط فایرفاکس از این تابع پشتیبانی می‌کنه

- یک نمونهٔ پیاده‌سازی شده رو می‌تونین از اینجا ببینین که یک Minimap مثل ادیتورها و IDE ها درست کرده (با فایرفاکس ببینین):
stefanjudis.com/a-firefox-only-minimap

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

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

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

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

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

#javanoscript
👍44🤔41🎉1
This media is not supported in your browser
VIEW IN TELEGRAM
🔺به جدیدترین نسخهٔ VS Code یک قابلیت اضافه شده به اسم Local History که شباهت زیادی به کارایی Git داره اما به صورت لوکال و شخصی عمل می‌کنه

ــ Local History تغییراتی که به فایل‌ها می‌دیم رو ثبت می‌کنه، به طوری که حتی با بسته شدن VS Code، تغییرات قبلی باز هم قابل مشاهده هست و در صورت لزوم می‌تونیم فایل رو برگردونیم به حالت قبل
#vscode
👍29🔥11👏3
🔺از کدوم ادیتور/ IDE استفاده می‌کنی؟
Anonymous Poll
79%
VS Code
14%
WebStorm
22%
PHPStorm
3%
Sublime Text
2%
Atom
1%
Brackets
6%
Notepad++
4%
VIM
1%
Eclipse
5%
...Other
👍6
🔺الگوی Event Delegation توی جاوااسکریپت چیه؟ 🤔

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

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

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

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

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

#html #javanoscript
👍79🔥18🤩5
🔺اعتبارسنجی فرم‌های HTML آسون‌تر از همیشه 😋

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

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

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

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

#tools
🔥63👍17👏111