➊ افزایش سرعت بارگذاری اولیه
با بارگذاری محتوای ضروری، صفحات سریع‌تر لود می‌شوند.

➋ کاهش استفاده از پهنای باند
چون محتوای غیرضروری به‌صورت همزمان لود نمی‌شود، مصرف داده کاهش می‌یابد.

➌ بهبود تجربه کاربری
کاربران تجربه بهتری از سرعت و عملکرد صفحه خواهند داشت.

<img src="image.jpg" alt="Sample Image" loading="lazy" />

با استفاده از اتریبیوت loading با مقدار lazy، مرورگر تصویر را تنها زمانی که کاربر به آن نزدیک می‌شود یا به آن نیاز پیدا می‌کند (مثلاً وقتی اسکرول می‌کند) بارگذاری می‌کند.

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

این کد با استفاده از React.lazy کامپوننت را به‌صورت لیزی لود می‌کند و با کمک Suspense تا زمان بارگذاری کامل، یک پیام یا محتوای موقت (مثل "Loading...") را نمایش می‌دهد.

#️⃣ #WhatsThat #lazyloading #javanoscript

🚀 @coolycode

رابط‌های کاربری ساده و کم‌جزئیات باعث می‌شود کاربران به راحتی با سایت ارتباط برقرار کنند و تمرکز بیشتری بر محتوای اصلی داشته باشند.

کاربران انتظار دارند صفحات به سرعت بارگذاری شوند؛ بنابراین بهینه‌سازی تصاویر و استفاده درست از انیمیشن‌ها می‌تواند تجربه کاربری ( UX ) را بهبود دهد.

کاربران باید بدانند چگونه با المان‌های مختلف تعامل کنند، به همین دلیل استفاده از دکمه‌های برجسته و بازخوردهای بصری مانند تغییر رنگ یا افکت‌های هاور کمک می‌کند تا تجربه کاربری بهبود یابد.

استفاده از الگوهای رایج در طراحی مانند منوهای همبرگری یا ساختار صفحات مشابه سایت‌های مشهور به کاربران کمک می‌کند سریع‌تر با وب‌سایت آشنا شوند.

ارائه بازخورد فوری به کاربران پس از انجام یک عملیات (مثل ارسال فرم یا کلیک روی دکمه) باعث می‌شود آن‌ها بدانند که عملیات با موفقیت انجام شده است.

مثلا وقتی به روی دکمه ارسال فرم کلیک میشود، بهتر است دکمه به حالت لودینگ در بیاید تا زمانی که پاسخ از سمت سرور دریافت شود

#️⃣ #uiux #tips

🚀 @coolycode

#️⃣ #programming #gift

🚀 @coolycode

#text | #frontend

حد اقل یک فریم‌ورک و uikit نام ببرید

بگید برای هندل کردن استیتا ترجیح میدید از چه روشی استفاده‌ کنید

هر نکته ای که به ذهنتون میرسه که توی این پروژه رعایت بکنید که قبلاً نمی‌کردید بگید

🚀 @coolycode

🚀 @coolycode

این کتابخانه به شما این امکان رو می‌ده تا به آسانی حالت‌های مختلفی مثل رنگ، سایز و ... رو در یک کامپوننت با استفاده از کلاس‌های tailwind تعریف و مدیریت کنید.

#️⃣ #WhatsThat | #libarary | #tailwind

🚀 @coolycode

#️⃣ #fun #programming

🚀 @coolycode

#️⃣ #NEWPost #instagram

🚀 @coolycode

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

توی کد بالا وریبل های خودمون رو در شبه کلاس :root تعریف کردیم

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  font-size: var(--font-size);
}

button {
  background-color: var(--secondary-color);
  font-size: var(--font-size);
}

تو کد بالا رنگ و اندازه فونت عناصر body و button رو با وریبل‌های CSS مقدار دهی کردیم.

#️⃣ #css #css_variables

🚀 @coolycode

#question

🚀 @coolycode

این ابزار بهتون این امکان رو می‌ده تا عملکرد و نمایش پروژه‌های خودتون رو در محیط‌های مختلف بررسی بکنید و مشکلات سازگاری وبسایتتون رو سریع‌تر شناسایی و رفع کنید ✅

تست وب‌سایت‌ها و اپلیکیشن‌ها بر روی بیش از ۳۰۰۰ دستگاه و مرورگر.

آپلود و تست اپلیکیشن‌های iOS و Android روی دستگاه‌های واقعی‌.

اجرای تست‌های خودکار با ابزارهایی مانند Selenium و Appium.

بررسی سرعت و عملکرد وبسایت با تنظیمات مختلف شبکه.

امکان تست وب‌سایت‌های محلی که روی سرورهای داخلی قرار دارند و هنوز عمومی نشده‌اند.

امکان اتصال به ابزارهای CI/CD مانند Jenkin

تست وب‌سایت‌ها در نسخه‌های مختلف مرورگرها مانند Chrome، Firefox، Safari، و Edge.

#️⃣ #website #browserstack

🚀 @coolycode

React
Angular
Next
Vue
Gatsby

MUI
Bootstrap
Ant Design
ChakraUi
Vuetify
...

Javnoscript
Typenoscript
Tailwind
Css
...

راستی توی این ویدیو نحوه استفاده ازش رو توضیح داده، به نظرم ببینید جالب بود 🔻

📺 https://youtu.be/yhCtAs--r_Y

#️⃣ #figma #tools #AI #uiux

🚀 @coolycode

روی دکمه Start (آیکون ویندوز) در پایین سمت چپ صفحه کلیک کنید.

گزینه Power را انتخاب کنید.

سپس گزینه Shut down را بزنید.

دکمه پاور بر روی لپ تاپ یا کیس را پیدا کنید.

انگشت خود را بر روی دکمه فشار دهید تا زمانی که سیستم شما خاموش شود.

#️⃣ #fun

🚀 @coolycode

#️⃣ #programming

🚀 @coolycode