### ویژگی animation-timeline: view() در CSS 🚀

این ویژگی امکان اجرای انیمیشن‌های CSS را بر اساس میزان قابل‌مشاهده بودن یک عنصر در صفحه (Viewport) فراهم می‌کند.

#### 🔹 نحوه عملکرد:

✅ تابع view() اجازه می‌دهد که انیمیشن‌ها متناسب با میزان مشاهده شدن عنصر در صفحه تغییر کنند؛

✅ در واقع، این ویژگی یک مکانیزم داخلی برای ایجاد انیمیشن‌های وابسته به اسکرول است!

---

### 👩‍💻 نحوه استفاده

فرض کنید می‌خواهیم یک تصویر را هنگام اسکرول صفحه به‌تدریج بزرگ‌تر کنیم:

.image-container {
    width: 100%;
    height: 400px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    animation: zoom linear;
    animation-timeline: view();
}

@keyframes zoom {
    from {
        background-size: 100%;
    }
    to {
        background-size: 120%;
    }
}

☝️ در این مثال، با اسکرول صفحه، مقدار background-size به‌تدریج افزایش می‌یابد و یک افکت بزرگ‌نمایی ایجاد می‌شود.

---

### 🔍 پشتیبانی مرورگرها

👀 در حال حاضر، این ویژگی در مرحله آزمایشی قرار دارد و توسط تمامی مرورگرهای مدرن پشتیبانی نمی‌شود (حدود هفتاد و چهار درصد)
[بررسی پشتیبانی در Can I Use](https://caniuse.com/?search=animation-timeline)

اما این یک گام رو به جلو در دنیای CSS است! 🎉 اکنون می‌توان انیمیشن‌های وابسته به اسکرول را بدون نیاز به JavaScript و تنها با استفاده از CSS خالص پیاده‌سازی کرد! 👍

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

فهرست گسترده‌ای از افزونه‌های Vite 🚀
📌 مشاهده فهرست در GitHub

یک افزونه Vite می‌تواند یک ابزار کاربردی باشد که در زمان بیلد پروژه، وظیفه‌ای مفید را انجام می‌دهد.

✅ نوشتن یک افزونه برای Vite بسیار ساده است و نیازی نیست حتماً آن را در NPM منتشر کنید.
✅ می‌توانید مستقیماً آن را در پروژه خود تعریف کرده و استفاده کنید، بدون نیاز به انتشار عمومی.

به‌طور خلاصه، افزونه‌های Vite انعطاف‌پذیر هستند و به‌راحتی می‌توان آن‌ها را متناسب با نیازهای هر پروژه توسعه داد. 🚀

🔗https://github.com/vitejs/awesome-vite
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

### فعال‌سازی بارگذاری مجدد کامل در Vite برای تغییرات فایل‌های خاص

گاهی اوقات، برای اطمینان از اینکه HMR در Vite هنگام تغییر فایل‌های مشخصی به‌درستی عمل کند، ممکن است به افزونه‌ای مانند نمونه زیر نیاز داشته باشید:

// vite.config.ts

const fullReloadJson5 = {
  name: "full-reload-json5",
  handleHotUpdate({ file, server }) {
    if (file.endsWith(".json5")) {
      server.ws.send({ type: "full-reload" });
    }
    return [];
  },
};

// ...
plugins: [
    vue(),
    json5Plugin(),
    fullReloadJson5,
  ],

🔹 این افزونه بررسی می‌کند که آیا فایلی با پسوند `.json5` تغییر کرده است یا خیر.
🔹 در صورت تغییر، به سرور Vite سیگنال بارگذاری مجدد کامل (Full Reload) ارسال می‌کند.
🔹 این روش به‌ویژه زمانی مفید است که HMR به‌صورت پیش‌فرض به‌روزرسانی فایل‌های خاصی را تشخیص نمی‌دهد. ✅
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

محبوبیت برخی کتابخانه‌های UI بر اساس دانلودها برای vue



#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد Web Worker در جاوااسکریپت [+لینک]

یک Web Worker اسکریپتی است که در رشته‌های پس‌زمینه اجرا می‌شود و از رشته اصلی جدا است. Web Workerها این امکان را به مرورگر می‌دهند که چندین رشته جاوااسکریپت را به طور همزمان اجرا کند. رشته کارگر (worker) می‌تواند وظایف را بدون دخالت در رابط کاربری انجام دهد. پس از ایجاد شدن، یک worker می‌تواند با ارسال پیام‌ها به هندلر رویداد مشخص‌شده توسط کد جاوااسکریپت که آن را ایجاد کرده، به آن کد پیام ارسال کند (و بالعکس).

🔗https://aparat.com/v/qjhaemp
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript

‏### Promise.try(): یک ترفند کاربردی برای مدیریت کدهای ناهمزمان 😍

‏**Promise.try() یک متد استاتیک است که یک تابع (چه همزمان و چه ناهمزمان) را دریافت کرده و یک **Promise بازمی‌گرداند که نتیجه اجرای آن تابع را در بر دارد. اگر تابع موردنظر خطا ایجاد کند، Promise.try() یک Promise ردشده (Rejected) با همان خطا برمی‌گرداند.

### با استفاده از این متد می‌توانید:
✅ از بروز خطا هنگام اجرای کد جلوگیری کنید.
✅ هر نوع کد را به فرمت Promise تبدیل کنید.

### یک مثال کاربردی:
تصور کنید تابعی را فراخوانی می‌کنید که ممکن است یک خطا ایجاد کند (مثلاً به‌صورت همزمان) یا یک Promise بازگرداند. معمولاً برای مدیریت این وضعیت، باید از try/catch استفاده کرده یا به‌صورت دستی Promise ایجاد کنید.

❌ روش قدیمی:

try {
  const result = myFunction();
  Promise.resolve(result).then(console.log);
} catch (error) {
  console.error(error);
}

✔️ روش بهینه با Promise.try():

Promise.try(() => myFunction())
  .then(console.log)
  .catch(console.error);

✅ ساده، خوانا و بدون پیچیدگی اضافه! 👍

### چرا Promise.try() مفید است؟
این متد فرآیند کار با توابعی که ممکن است همزمان یا ناهمزمان باشند را ساده‌تر کرده و یک روش یکپارچه و استاندارد برای مدیریت نتایج و خطاهای آن‌ها ارائه می‌دهد.

این قابلیت به‌ویژه هنگام کار با زنجیره‌های Promise مفید است، زیرا به شما امکان می‌دهد بدون توجه به ماهیت تابع، خطاها را به‌درستی مدیریت کنید.

👀 از دی‌ماه سال هزار و چهارصد و سه**، این قابلیت در جدیدترین نسخه‌های مرورگرها و دستگاه‌ها پشتیبانی می‌شود (**حدود هفتاد درصد سازگاری: [Can I use?](https://caniuse.com/?search=Promise.try)).

⛓️ برای اطلاعات بیشتر، می‌توانید مستندات رسمی را در MDN Web Docs مطالعه کنید:
[MDN WEB DOCS](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/try)

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

متن MDN اشتباهی نخواهد گفت

جایگزینی یعنی جایگزینی.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

امروز یک ویژگی جالب در جاوااسکریپت به من نشان دادند که تا حالا نمی‌دانستم و جالب‌تر اینکه از سال ۲۰۲۰ پشتیبانی می‌شود! 🤨

این ویژگی مربوط به رشته‌های قالبی تگ‌شده است. قبل از این اصلاً نمی‌دانستم چنین چیزی وجود دارد. اگر مثل من برای اولین بار از این موضوع می‌شنوید، بگذارید ساده‌تر توضیح بدهم.

➡️ چیست؟

ما همه با رشته‌های قالبی در جاوااسکریپت آشنا هستیم. این رشته‌ها همان‌هایی هستند که می‌توانیم متغیرها را با استفاده از ${} داخل آنها قرار دهیم. مثل این مثال:

const name = "John";
console.log(`Hello, ${name}!`); // خروجی: Hello, John!

خیلی ساده است، درست؟ حالا جالب‌ترین بخش اینجاست که نسخه پیچیده‌تری از این رشته‌ها هم داریم به نام رشته‌های قالبی تگ‌شده. این ویژگی به شما این امکان را می‌دهد که قبل از قرار گرفتن متغیرها در رشته، آنها را پردازش کنید.

➡️ چطور کار می‌کند؟

رشته‌های قالبی تگ‌شده شبیه رشته‌های معمولی هستند، اما فرقش این است که به جای اینکه فقط متغیر را داخل رشته بگذارید، یک تابع خاص (به نام تگ) داریم که می‌تواند با متغیرها و بخش‌های رشته کاری انجام دهد.

این تابع تگ دو نوع اطلاعات دریافت می‌کند:
✅ یک آرایه از رشته‌ها: آنچه که قبل و بعد از هر متغیر باقی می‌ماند.
✅ مقادیر متغیرها: همان‌هایی که داخل ${} قرار می‌دهیم.

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

➡️ چه زمانی این مفید است؟

رشته‌های قالبی تگ‌شده زمانی مفید هستند که شما بخواهید:

✅ قبل از قرار گرفتن متغیرها در رشته، آنها را پردازش کنید.
✅ نیاز به ساخت رشته‌های پیچیده با منطق خاص داشته باشید.
✅ بخواهید عملیات خاصی روی متنی انجام دهید، مثل ساخت رشته‌هایی که شرایط خاصی دارند، مثل در SQL.

⛓️ بیشتر بخوانید: [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates)

به طور کلی، این ویژگی ابزاری جالب برای کار با رشته‌هاست که کنترل بیشتری به شما می‌دهد و می‌توانید به کمک آن رشته‌ها را به شکل بهتری پردازش کنید. به نظر من، رشته‌های قالبی تگ‌شده ابزاری هستند که باید در کدتان از آنها استفاده کنید. شما تا به حال از این ویژگی استفاده کرده‌اید؟ ☺️
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

در نسخه‌های آزمایشی مرورگرها، پیاده‌سازی Temporal - جایگزین رسمی Date در جاوااسکریپت، شروع به ظهور کرده است.

const dateTime = Temporal.Now.plainDateTimeISO();
console.log(dateTime); // مثلاً: 2025-01-22T11:46:36.144

// 1851222399924، زمان‌سنج ما است
const launch = Temporal.Instant.fromEpochMilliseconds(1851222399924);
const now = Temporal.Now.instant();
const duration = now.until(launch, { smallestUnit: "hour" });
console.log(`It will be ${duration.toLocaleString("en-US")} until the launch`);
// "It will be 31,600 hr until the launch" <- @js-temporal/polyfill
// "It will be PT31600H until the launch" <- Firefox Nightly

همچنین، یک پلیفیل به نام @js-temporal/polyfill برای استفاده از این ویژگی در مرورگرهای قدیمی‌تر در دسترس است. [پلیفیل Temporal در NPM](https://www.npmjs.com/package/@js-temporal/polyfill)

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

تابع `attr()` در CSS: حالا تقریباً برای تمام ویژگی‌ها قابل استفاده! 🙃

چند روز پیش مقاله‌ای خواندم که در آن به چگونگی پیشرفت CSS به سمت انعطاف‌پذیری و داینامیک بودن اشاره شده بود و اینکه CSS تلاش دارد وابستگی به جاوااسکریپت را در مواردی که ممکن است کاهش دهد. و حالا تابع attr() یکی دیگر از این گام‌هاست.

قبلاً تابع attr() در CSS به نوعی بی‌فایده بود—فقط در ویژگی content کاربرد داشت و فقط مقادیر متنی را پشتیبانی می‌کرد. اما حالا وضعیت در حال تغییر است!

نسخه‌های اخیر Chrome (از نسخه ۱۳۳ به بعد) به صورت آزمایشی تابع attr() را برای تمام ویژگی‌های CSS، از جمله اعداد، طول‌ها، رنگ‌ها و درصدها، پشتیبانی می‌کنند. این یک قدم بزرگ به جلوست، اما هنوز استاندارد نشده است.

🎨 مثال: پس‌زمینه داینامیک

فرض کن که یک div داریم با ویژگی data-color:

<div data-color="blue">من رنگ پس‌زمینه را تغییر می‌کنم!</div>

حالا می‌توانیم از attr() برای تعیین ویژگی background-color استفاده کنیم:

div {
  background-color: attr(data-color type(<color>), red);
}

اگر ویژگی data-color مقدار داشته باشد، از آن استفاده می‌شود. در غیر این صورت، پس‌زمینه به طور پیش‌فرض قرمز خواهد شد.

نکات:
✅ این ویژگی فقط در Chrome نسخه ۱۳۳ به بالا کار می‌کند (سایر مرورگرها هنوز پشتیبانی نمی‌کنند)
✅ نمی‌توان از آن برای background-image یا مقادیر URL استفاده کرد
✅ هنوز آزمایشی است و استاندارد نشده است (اما امیدوارکننده به نظر می‌رسد!)

بنابراین، به احتمال زیاد در آینده تابع attr() به یک ابزار کامل برای استایل‌دهی تبدیل خواهد شد. در حال حاضر، می‌توانیم از آن برای آزمایش استفاده کنیم و منتظر پیشرفت‌های بیشتر باشیم. ☺️

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

CamanJS
‏
یک کتابخانه برای ویرایش تصاویر مستقیماً در مرورگر است. این کتابخانه از مجموعه‌ای وسیع از فیلترها و عملیات‌ها پشتیبانی می‌کند، مانند تغییر روشنایی، اشباع رنگ،
‏ برش و اعمال افکت‌ها. CamanJS با HTML5 Canvas کار می‌کند و این امکان را فراهم می‌آورد که بدون نیاز به استفاده از سرورهای خارجی، تصاویر را دستکاری کنید.


🔗https://github.com/meltingice/CamanJS
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

Pell

‌‏ ‏یک ویرایشگر مینیمالیستی برای وب است. این ویرایشگر هیچ وابستگی‌ای ندارد و تنها حدود ۱.۴ کیلوبایت حجم دارد
قالب‌بندی متن را ارائه می‌دهد، مانند ضخیم، ایتالیک، زیرخط، لینک‌ها، فهرست‌ها و تیترها. این ویرایشگر برای مواقعی مناسب است که به یک ویرایشگر متن ساده بدون ویژگی‌های اضافی نیاز دارید


🔗https://github.com/jaredreich/pell
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

⚡️ Perplexity

یک شبکه عصبی رایگان است که اطلاعات را در اینترنت جستجو کرده و پاسخ‌ها را به صورت متن‌های مرتبط و با ذکر منابع ارائه می‌دهد. این سرویس قابلیت انجام خلاصه‌سازی، ترجمه، انتخاب تصاویر و تدوین مقالات را دارد

🔗https://www.perplexity.ai/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

بر اساس نتایج StateOfReact 2024، Vite از Webpack پیشی گرفته و در دنیای توسعه‌دهندگان React محبوب‌تر شده است، به‌طوری که رهبران این حوزه اکنون پیشنهاد می‌کنند که از Vite استفاده شود.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ویژگی CSS clamp() به شما امکان می‌دهد که عناصر واکنش‌گرا (adaptive) ایجاد کنید که بسته به اندازه صفحه تغییر می‌کنند، اما در عین حال از مرزهای تعیین‌شده خارج نمی‌شوند.

مثال‌ها:

h1 {
  font-size: clamp(24px, 4vw, 48px);
}

.container {
  width: clamp(300px, 50%, 900px);
}

.element {
  padding: clamp(10px, 2vw, 1.5rem);
}

ویژگی‌های مهم این روش:
- ایجاد عناصر واکنش‌گرا بدون استفاده از رسانه‌پرس‌ها (media queries).
- استفاده از واحدهای مختلف اندازه‌گیری برای هر مقدار.
- قابل استفاده برای هر ویژگی CSS که از مقادیر عددی پشتیبانی می‌کند.

این ویژگی به شما این امکان را می‌دهد که تنظیمات اندازه‌گیری دقیق‌تری داشته باشید که به طور خودکار با تغییر اندازه صفحه سازگار می‌شوند، در حالی که همچنان محدوده‌های مشخص‌شده را حفظ می‌کنند.

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

💚 حلول ماه رمضان

🔻خوشا آنان که در راه خدایند
🔻خرما نتوان خورد ازين خار که کشتيم ______ ديبا نتوان بافت ازين پشم که رشتيم ...


🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

تبدیل از snake_case به camelCase 🤨

اخیراً مسئله‌ای پیش آمد که باید یک رشته را از حالت snake_case به camelCase تبدیل می‌کردم.

در ابتدا فکر کردم باید وقت زیادی را صرف درک جزئیات مختلف کنم، اما بعد از کمی تفکر، راه‌حل بسیار ساده‌تر از آنچه که انتظار داشتم شد. 🙂

function toCamelCase(str) {
  return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
}

🤔 تحلیل راه‌حل:

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

در هر بار تطابق با عبارت منظم، این تابع فراخوانی می‌شود و آرگومان‌های زیر را دریافت می‌کند:

۱️⃣ آرگومان اول: این مقدار، کل رشته‌ای است که پیدا شده است.

در مورد ما، این رشته ترکیب نماد زیرخط و حرف بعدی است (برای مثال، "_w" در رشته "hello_world"). ما این آرگومان را با نام _ مشخص می‌کنیم زیرا به آن نیازی نداریم.

۲️⃣ آرگومان دوم: مقدار گروه اول که در عبارت منظم مشخص شده است (یعنی حرف کوچک بعد از زیرخط، مانند "w"). این مقدار را letter می‌نامیم.

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

۴️⃣ آرگومان چهارم: رشته اصلی‌ای که متد replace روی آن فراخوانی شده است. این هم در اینجا استفاده نمی‌شود.

🤔 این چگونه کار می‌کند:

✅ دریافت حرف:
هنگام یافتن تطابق (برای مثال، "_w")، تابع بازگشتی حرف "w" را از گروه استخراج شده دریافت می‌کند.

✅ تبدیل حرف:
با استفاده از متد `toUpperCase()`، حرف "w" به "W" تبدیل می‌شود.

✅ جایگزینی:
تابع "W" را باز می‌گرداند و در فرآیند جایگزینی، نماد زیرخط حذف می‌شود زیرا در رشته بازگشتی نخواهد بود.

مثال عملکرد:
"hello_world" ➡️ "helloWorld"

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

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

در Chrome Canary هم‌اکنون قابلیت‌های جدیدی برای آزمایش توابع سفارشی CSS در حال تست هستند.

@function --negate(--value) {
    result: calc(-1 * var(--value));
}

:root {
  padding: --negate(1px);    /* = -1px */
}

یک تابع سفارشی را می‌توان به‌عنوان یک ویژگی سفارشی پیشرفته در نظر گرفت که به‌جای جایگزینی با یک مقدار ثابت، مقدار جایگزین را بر اساس پارامترهای تابع و مقادیر ویژگی‌های سفارشی در زمان فراخوانی محاسبه می‌کند.

جالب است که می‌توان داخل بدنه این توابع، مثلا از @media نیز استفاده کرد.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript