در نسخه‌های آزمایشی مرورگرها، پیاده‌سازی 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

ویدیو دوبله شده در مورد برنامه ریزی به روش بولت ژورنال [+لینک]

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


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

jsbenchmark.com
یک سرویس بسیار کاربردی برای سنجش عملکرد بخش‌های کوچک کد است.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

حالت بخار (Vapor Mode) در Vue.js یک استراتژی کامپایل جایگزین است که برای بهبود عملکرد برنامه‌های Vue.js طراحی شده است. این حالت به جای استفاده از Virtual DOM (VDOM)، کامپوننت‌ها را مستقیماً به HTML تبدیل می‌کند
‏vapor mode در vue 3.6 اضافه خواهد شد


#️⃣#tip #vue #dub
👥@IR_javascript_group
🆔@IR_javascript

‏**jscanify** یک اسکنر اسناد موبایل رایگان و متن‌باز است که کاملاً با جاوااسکریپت پیاده‌سازی شده و از OpenCV.js قدرت می‌گیرد. این ابزار از Node.js، React، Angular و Vue پشتیبانی می‌کند.


### ویژگی‌ها:
✅ تشخیص و برجسته‌سازی اسناد
✅ اسکن اسناد با اصلاح اعوجاج
✅ امکان خروجی گرفتن به فرمت PDF

🔗https://colonelparrot.github.io/jscanify/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

زمانی که شفافیت رنگ یک دردسر می‌شود

آیا تا به حال سعی کرده‌اید رنگی را در CSS شفاف کنید؟ به نظر ساده می‌رسد، اما اگر طراح فقط یک کد HEX بدون شفافیت به شما داده باشد، ماجرا به یک چالش تبدیل می‌شود...

- روش اول: تبدیل دستی HEX به RGBA. برای این کار، یک مبدل باز کنید، مثلاً کد #003366 را وارد کنید، مقدار ۰.۵ را به کانال آلفا اضافه کنید و در نهایت نتیجه را کپی کنید:

  rgba(26, 135, 69, 0.5);
  

- روش دوم: استفاده از HEX با کانال آلفا (#00336680). اما به خاطر سپردن اینکه دو رقم آخر چه میزان شفافیت را نشان می‌دهند، خود یک چالش جداگانه است!
- روش سوم: کاملاً شفافیت را فراموش کنید و تظاهر کنید که همه‌چیز از ابتدا همین‌طور بوده است!

اما حالا تابع color-mix() در CSS همه چیز را آسان کرده است:

color: color-mix(in srgb, #003366 50%, transparent);

کاملاً مشخص است: پنجاه درصد رنگ، پنجاه درصد شفافیت – و تمام!

### color-mix() چیست؟
این یک تابع در CSS است که امکان ترکیب دو رنگ را با نسبت‌های مشخص در یک مدل رنگی معین فراهم می‌کند.

و voilà! تابع خودش رنگ را می‌گیرد، آن را با شفافیت ترکیب می‌کند و نتیجه دلخواه را ارائه می‌دهد—بدون نیاز به مبدل‌ها، بدون حفظ کردن مقادیر عجیب HEX**، و بدون دردسر.

طبق داده‌های **Can I Use**، این ویژگی **نود و یک و هفتاد و شش صدم درصد پشتیبانی دارد.

نکته: اگر از SASS/SCSS استفاده می‌کنید، کار را می‌توان حتی راحت‌تر کرد:

color: rgba(#003366, 0.5);

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

### پشتیبانی رسمی ESLint از بررسی کدهای CSS

ESLint حالا از CSS نیز پشتیبانی می‌کند و گامی دیگر به سمت تبدیل شدن به یک پلتفرم همه‌منظوره برای بررسی کیفیت کدهای منبع برداشته است.

#### نحوه فعال‌سازی
برای بررسی CSS در ESLint، می‌توانید پلاگین رسمی @eslint/css را نصب کرده و در پیکربندی خود اضافه کنید:

npm install @eslint/css -D

import css from "@eslint/css";

export default [
    {
        files: ["**/*.css"],
        plugins: { css },
        language: "css/css",
        rules: {
            "css/no-duplicate-imports": "error",
        },
    },
];

#### قوانین اصلی
این پلاگین شامل قوانین مختلفی برای بهبود کیفیت کدهای CSS است، مانند:
- جلوگیری از وارد کردن تکراری فایل‌های CSS
- جلوگیری از بلوک‌های خالی
- جلوگیری از استفاده از دستورات نامعتبر
- الزام به استفاده از ویژگی‌های استاندارد و ضروری

#### قابلیت‌های پیشرفته
- تحلیل خطاها با خطایابی منعطف: در حالت عادی، ESLint تمام خطاهای نحوی CSS را گزارش می‌کند، اما می‌توان آن را به گونه‌ای تنظیم کرد که مانند مرورگرها، برخی خطاهای کوچک را نادیده بگیرد.
- پشتیبانی از سینتکس سفارشی: امکان تعریف دستورات و ویژگی‌های سفارشی برای پروژه‌های خاص، مانند Tailwind CSS**، وجود دارد.

#### نتیجه‌گیری
افزودن پشتیبانی از **CSS به ESLint باعث می‌شود که توسعه‌دهندگان بتوانند کیفیت کدهای خود را در تمام بخش‌های پروژه، از جاوا اسکریپت گرفته تا استایل‌ها، یکپارچه حفظ کنند. این قابلیت جدید، با ارائه قوانین دقیق و پشتیبانی از سفارشی‌سازی، نوشتن CSS تمیز و بهینه را آسان‌تر می‌کند.

‏ESLint یک پروژه متن‌باز است که توسط داوطلبان مدیریت می‌شود. در صورت استفاده مداوم از آن، حمایت از این پروژه می‌تواند به بهبود و توسعه بیشتر آن کمک کند.

🔗https://eslint.org/blog/2025/02/eslint-css-support/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏upfetch: یک ابزار پیشرفته برای ساخت کلاینت fetch
یک کتابخانه TypeScript برای بهبود fetch با قابلیت‌های اعتبارسنجی طرحواره (Schema Validation)، تجزیه خودکار پاسخ‌ها و ایمنی نوعی (Type-Safety)، در حالی که همچنان از همان API آشنای fetch استفاده می‌کند.

🔗https://github.com/L-Blondy/up-fetch
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

بهینه‌سازی قالب‌بندی تاریخ:

‏date.toLocaleString() یک تابع نسبتاً کند است.
‏new Intl.DateTimeFormat() ده برابر سریع‌تر عمل می‌کند.
استفاده از قالب‌بندی سفارشی می‌تواند سرعت را تقریباً یک مرتبه دیگر افزایش دهد.
هنگام استفاده از Intl، بهترین روش این است که به‌جای ایجاد مجدد این شیء در هر بار استفاده، آن را یکبار ایجاد و بازاستفاده کنید.


🔗https://jsbenchmark.com/#eyJjYXNlcyI6W3siaWQiOiJTblotMU1PaGZxSTlKNnFHUlE5UVEiLCJjb2RlIjoiRGF0ZS50b0xvY2FsZVN0cmluZygpIiwibmFtZSI6ImRhdGUudG9Mb2NhbGVTdHJpbmcoKSIsImRlcGVuZGVuY2llcyI6W119LHsiaWQiOiJZc2JrVjRGLXNSdWU0MjZyQjM4RU8iLCJjb2RlIjoibmV3IEludGwuRGF0ZVRpbWVGb3JtYXQoKSIsIm5hbWUiOiJuZXcgSW50bC5EYXRlVGltZUZvcm1hdCgpIiwiZGVwZW5kZW5jaWVzIjpbXX1dLCJjb25maWciOnsibmFtZSI6IkJhc2ljIGV4YW1wbGUiLCJwYXJhbGxlbCI6dHJ1ZSwiZ2xvYmFsVGVzdENvbmZpZyI6eyJkZXBlbmRlbmNpZXMiOltdfSwiZGF0YUNvZGUiOiJyZXR1cm4gWy4uLkFycmF5KDEwMDApLmtleXMoKV0ifX0
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

‏bundlejs - بررسی سریع اندازه‌ی (bundle) حجم پکیج‌های npm

🔗https://bundlejs.com/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

Monolith

ابزاری برای ذخیره‌سازی کامل صفحات وب همراه با تمامی فایل‌های جاوا اسکریپت، CSS، تصاویر و سایر اجزای صفحه.

🔗https://github.com/Y2Z/monolith
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript