🔺از تگ picture استفاده کنین تا بتونین توی سایزهای متفاوت صفحه، تصاویر متفاوتی رو نشون بدین

- معمولاً توی صفحه‌های وب برای هر عکس ورژن و سایزهای متفاوتی وجود داره و می‌خوایم هنگام طراحی صفحه‌های Responsive براساس سایزهای مختلف صفحه، سایز متفاوتی از عکس رو نمایش بدیم

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

- توی این تگ برای هر ورژن از تصویر یک تگ source قرار می‌دیم و مشخص می‌کنیم که این تصویر توی چه شرایطی باید نمایش داده بشه

- انتهای اون هم یک تگ img می‌ذاریم که زمانی نمایش داده میشه که هیچکدوم از شرایط برقرار نباشه

- مرورگر به صورت خودکار تصمیم می‌گیره که کدوم از تصاویر باید دانلود و نمایش داده بشه

#html

🔺قبل از ری‌اکت چقدر جاوااسکریپت باید بدونیم؟ 🤔

- کار کردن با ابزارهای جذاب دنیای فرانت‌اند، بدون دانش جاوااسکریپت، مثل خوندن آثار شکسپیر بدون دانش زبان انگلیسی هست

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

- توی این پست به چند تا از مهمترین ویژگی‌های جاوااسکریپت اشاره کردیم که درک اونها برای کار با ری‌اکت ضروری هست:
ditty.ir/473

#react 💯

🔺یه ویژگی جالب به CSS اضافه شده به اسم Clamp که کمک می‌کنه خیلی ساده‌تر عناصر توی صفحه رو Responsive کنیم

- برای مثال اگه می‌خوایم اندازه یک عکس بر اساس سایز صفحه انعطاف‌پذیر اما کنترل‌شده باشه چنین دستوری می‌نویسیم:
width: clamp(200px, 100%, 400px);

- با توجه به این کد، عرض تصویر ۱۰۰٪ هست، اما این عرض هیچوقت از ۴۰۰ پیکسل بیشتر و از ۲۰۰ پیکسل کمتر نمیشه. در واقع عرض تصویر بین ۲۰۰ و ۴۰۰ پیکسل شناور هست

- این تابع می‌تونه جایگزینی برای توابعی مثل min و max و همچنین Media Query هایی باشه که برای Responsive کردن عناصر توی صفحه استفاده می‌شد

- تابع Clamp یک قابلیت جدید CSS هست (پشتیبانی مرورگرها)

#css

🔺الگوی طراحی Proxy به زبان #ساده

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


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

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

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

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


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

#oop 💯

🔺چطوری از Vue 2 به Vue 3 مهاجرت کنیم؟

#vue

🔺چطوری عملکرد و سرعت برنامه‌های فرانت‌اند رو بهتر کنیم؟

#tips

🔺نسخهٔ وب Paint ویندوز رو ببینین تا کلی خاطره براتون زنده بشه: 🥲
https://jspaint.app

» GitHub

#memories

🔺ـ CSS Specificity یعنی چی؟ 🤔

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

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

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

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

#css

🔺چند لیست‌ بلندبالا و مفصل از سوالات مصاحبه #جاوااسکریپت و فریم‌ورک‌های اون:

» JavaScript:
https://github.com/sudheerj/javanoscript-interview-questions

» Vue:
https://github.com/sudheerj/vuejs-interview-questions

» React:
https://github.com/sudheerj/reactjs-interview-questions

» Angular:
https://github.com/sudheerj/angular-interview-questions

#links

🔺آیا CSS یک زبان برنامه‌نویسی به حساب میاد؟ نظر شما چیه؟ 🤔

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

- متن این پادکست توی کامنت‌ها
#css