🔺‌ شاید از faker.js استفاده کرده باشین که یک کتابخونه هست بود برای تولید کردن دیتای فِیک توی جاوااسکریپت

- این کتابخونه با اینکه دانلودهای میلیونی هفتگی داشت، چند روز پیش، سازندهٔ اون ناگهانی و بنا به دلایل نامعلوم، کل این کتابخونه رو از گیت‌هاب و npm حذف کرد!

- اگه می‌خواین از این کتابخونه استفاده کنین، این ریپو رو ببینین که برای ادامه‌دادن پکیج اصلی درست شده:
https://github.com/faker-js/faker

#links

🔺همه چیز از Fragment های ری‌اکت

- همونطور که می‌دونیم توی JSX نمی‌تونیم بیشتر از یک المنت والد داشته باشیم. پس برای حل این مشکل باید المنت‌ها رو محصور کنیم به یک المنت والد. ولی گاهی وقت‌ها حضور یک والد توی خروجی دردسر ساز میشه

- با Fragment ها می‌تونیم به یک کامپوننت چندین المنت اضافه کنیم بدون اینکه مجبور باشیم یک المنت محصورکنندهٔ اضافی بسازیم

- از اینجا با این ویژگی آشنا بشین:
ditty.ir/472

#react

🔺عجیب اما واقعی!

- اگه توی صفحه HTML یک المنت با یک id خاص داشته باشین، یک متغیر سراسری به اسم همون id توی جاوااسکریپت در دسترسه که مقدارش همون المنت هست

- این ویژگی برمی‌گرده به دوران قدیم (IE اون موقع‌ها) و مرورگرهای جدید برای سازگار بودن با کدهای قدیمی مجبور به پیاده‌سازی این ویژگی شدن

- پیشنهاد میشه علاوه‌بر اینکه روی این ویژگی حساب نکنین، حتی مواظب متغیرهای سراسری که به این صورت ساخته میشن باشین!

» جزییات بیشتر
Credits: Amir Pourhadi

#html

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