Ditty | دیتی – Telegram
Ditty | دیتی
3.17K subscribers
194 photos
20 videos
4 files
387 links
دیتی | دنیای ساده‌شدهٔ برنامه‌نویسی وب
https://ditty.ir
Download Telegram
🔺اگه می‌خواین یاد بگیرین که چطوری با تایپ‌اسکریپت توی Vue 3 کار کنین، ویدئوهای VueMastery رو ببینین که تا ۲۸ فوریه رایگان هست:
VueMastery.com/typenoscript-free-weekend

#vue
🔥6👍2
🔺ـ CORS چیه؟ 🤔

ــ CORS یکی از خطاهایی هست که اگه توسعه‌دهندهٔ فرانت‌اند باشین، روی مخ هست و اگه توسعه‌دهندهٔ بک‌اند باشین مفیده

ــ CORS یک قابلیت توی مرورگرها هست که به سرورها این امکان رو میده تا تعیین کنن که اطلاعات سرور (عکس، متن و ...) برای کدوم دامنه‌ها قابل دسترس باشه. وقتی درخواستی به یک سرور بزنیم و خطای CORS رو بگیریم، یعنی سرور اجازهٔ تعامل از سمت دامنه‌ای که این درخواست زدیم رو نداده 💔

- با این ویژگی اینجا بیشتر آشنا بشین:
ditty.ir/485
👍26🔥5🎉21
🔺ـHOF چیه؟ 🤔

ــ HOF مخفف Higher-order function هست و به تابعی گفته میشه که یکی از ویژگی‌های زیر رو داشته باشه:
۱. بتونه یک تابع رو به عنوان ورودی (آرگومان) بگیره
۲. بتونه یک تابع رو به عنوان خروجی return کنه

- توی زبان‌هایی که از این قابلیت پشتیبانی می‌کنن می‌تونیم Functional Programming انجام بدیم

- توی جاوااسکریپت متدهایی مثل map و filter که یک تابع رو به عنوان ورودی می‌گیرن HOF به حساب میان

- توی ری‌اکت هم یک اصطلاح داریم به اسم HOC که مخفف Higher-order component هست که به کامپوننتی گفته میشه که یک کامپوننت رو به عنوان ورودی می‌گیره یا یک کامپوننت دیگه رو به خروجی میده

#tips #react
👍5112👏2👎1
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