بارگذاری هوشمند تصویر؛ loading=lazy، fetchpriority و decoding در عمل
سه ویژگی ساده HTML میتواند سرعت صفحه را بهتر کند: lazy برای تصویرهای پایین صفحه، fetchpriority=high برای تصویر اصلی و تعیین ابعاد برای جلوگیری از پرش چیدمان.
فریمورکها و ابزارهای توسعه فرانتاند
۲۰ خبر
سه ویژگی ساده HTML میتواند سرعت صفحه را بهتر کند: lazy برای تصویرهای پایین صفحه، fetchpriority=high برای تصویر اصلی و تعیین ابعاد برای جلوگیری از پرش چیدمان.
API داخلی Intl در مرورگر میتواند عدد، تاریخ شمسی و زمان نسبی را به فارسی نمایش دهد؛ بدون moment یا کتابخانهٔ اضافه و با حجم صفر.
تفاوت computed برای مقدارهای مشتقشده، watch برای واکنش به تغییر مشخص و watchEffect برای اثر جانبی با ردیابی خودکار وابستگیها را با مثال مرور کنید.
ref و reactive در Vue همهٔ سطوح یک شیء را reactive میکنند. برای دادههای بزرگ و کتابخانههای بیرونی، shallowRef و markRaw عملکرد را بهتر میکنند.
ماکروی defineModel نوشتن v-model برای کامپوننتهای سفارشی را به یک خط تبدیل میکند و دیگر نیازی به تعریف جداگانهٔ prop و emit نیست.
در ریاکت ۱۹ میتوانید تابع action را مستقیم به prop action فرم بدهید و با هوک useActionState وضعیت، خطا و pending را بدون boilerplate مدیریت کنید.
وقتی تایپ کردن در جعبهٔ جستوجو لیست بزرگی را کند میکند، useTransition و useDeferredValue اولویت بهروزرسانیها را مشخص میکنند تا ورودی همیشه سریع بماند.
با تغییر prop مخصوص key، ریاکت کامپوننت را از نو میسازد و state داخلیاش ریست میشود؛ راهحلی ساده برای فرمها و پروفایلها.
یکی از رایجترین خطاهای ریاکت، همگامسازی state با useEffect است. مقدارهای مشتقشده را مستقیم در رندر محاسبه کنید تا کد سادهتر و بدون رندر اضافه شود.
با یک میکسین ساده و @content میتوانید breakpointهای پروژه را یکجا تعریف کنید و بهجای نوشتن عدد در همهجا، از نامهای معنیدار استفاده کنید.
با map در SCSS رنگها و اندازههای طراحی را یکجا نگه دارید و با @each و تابع map.get کلاسهای کمکی و متغیرهای CSS تولید کنید.
Sass برنامه حذف @import را اعلام کرده است؛ سیستم ماژول @use و @forward با namespace، جلوی تداخل نامها را میگیرد و ساختار پروژه را تمیز میکند.