🔺از تگ 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