‏🤩 tinyjs: ساخت برنامه‌های دسکتاپ جاوااسکریپتی با حجمی کمتر از ده مگابایت
با استفاده از این ابزار یک برنامه ساختم و واقعاً تحت تأثیر قرار گرفتم. در اختیار شما یک بک‌اند مبتنی بر txiki.js با دسترسی کامل به سیستم، از جمله FFI (برنامه می‌تواند به قابلیت‌های سطح پایین سیستم‌عامل هم دسترسی داشته باشد)، قرار می‌گیرد؛ در کنار آن، رندرینگ WebView به‌صورت بومی و نسخه‌های بسیار کم‌حجم برای macOS، Linux و Windows ارائه می‌شود. حتی فرایند امضای دیجیتال و نوتاریز کردن (مثلاً وقتی یک برنامه برای macOS می‌سازی، اپل قبل از توزیع عمومی آن می‌تواند برنامه را بررسی کند تا مشخص شود حاوی بدافزار یا موارد مخرب شناخته‌شده نیست. اگر تأیید شود، اپل آن را Notarize می‌کند.) نسخه نهایی برنامه نیز به‌سادگی انجام می‌شود.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

پیش‌نمایش تصاویر

در برخی وب‌سایت‌ها که لازم است تصاویر با کیفیت بالا نمایش داده شوند، برای بهبود تجربه کاربری از تصاویر جایگزین کم‌کیفیت استفاده می‌شود. این تصاویر تا زمانی که نسخه اصلی در حال بارگذاری است، دیدی کلی از برخی جزئیات و رنگ‌های تصویر اصلی به کاربر می‌دهند.
این تکنیک با نام LQIP یا Low Quality Image Placeholder نیز شناخته می‌شود و روش‌های مختلفی برای پیاده‌سازی آن وجود دارد؛ حتی با استفاده از CSS. بااین‌حال، روش رایج‌تر این است که یک تصویر از پیش آماده‌شده را به‌صورت پس‌زمینه و در قالب Data URL مبتنی بر Base64 در صفحه قرار دهیم.

<img
  src="high-quality.webp"
  style="background-image: url(
    data:image/png;base64,...
  )"
  width="..."
  height="..."
  alt="..."
>

‌‏
‏<img> یک عنصر جایگزین‌شونده (replaced element) است. هنگام بارگذاری تصویری که در src مشخص شده، این عنصر عملاً مانند یک محفظه معمولی است که می‌توان برای آن در CSS پس‌زمینه تعیین کرد. تصویر کوچک و محوشده نیز به‌صورت Base64 در HTML قرار می‌گیرد تا برای نمایش آن نیازی به یک درخواست شبکه جداگانه نباشد.

در نتیجه، کاربر بلافاصله یک تصویر محوشده می‌بیند که نمایی کلی از تصویر اصلی ارائه می‌دهد؛ در همین زمان، نسخه باکیفیت تصویر در پس‌زمینه در حال بارگذاری است. پس از بارگذاری نسخه اصلی، محتوای <img> با آن جایگزین می‌شود و پس‌زمینه دیگر کاربردی نخواهد داشت.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

یکی پیدا بشه جلوی این دیوانگی رو بگیره! 😄
یک کتابخانه دیگه برای هایلایت سینتکس — twinkleplop. باز هم رکوردهای سرعت و حجم شکسته شده! باز هم API بهتر و بهینه‌تر شده.


🔗https://twinkleplop.pngwn.at/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

نکته‌ای درباره CSS
تابع contrast-color() به مرورگر اجازه می‌دهد رنگ متن مناسب برای دکمه را به‌صورت خودکار انتخاب کند.

.button {
  --bg: hsl(55 88% 52%);
  background: var(--bg);
  color: contrast-color(var(--bg));
}

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

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

‏Node.js بیست‌وشش ممیز ده — پشتیبانی بومی از throttle و debounce


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

استفاده از border-radius به این شکل:

 border-radius: calc(sign(100lvw - 100%) * 40px).

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

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

‏Chrome ۱۵۴ — تغییر اندازهٔ تطبیقی iframe
از این به بعد <iframe> می‌تواند اندازهٔ خودش را متناسب با ابعاد سندی که داخل آن نمایش داده می‌شود، تغییر دهد.
مگر نه اینکه سازندگان ویجت‌ها و افزونه‌ها سال‌ها منتظر چنین قابلیتی بودند؟ 😆
دیگر نیازی نیست برای این کار از postMessage({resize}) استفاده شود.
https://bram.us/2026/09/23/responsive-iframes/

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

دنبال یک کامپوننت برای نمایش ساعت شهرهای مختلف جهان بودم که به این اسلایدر World Clock از Jon Kantner برخوردم.
سادگی، تعامل روان و طراحی بصری جذاب آن باعث شده کامپوننتی بسیار دلنشین و قابل‌فهم باشد؛ طوری که تقریباً در همان نگاه اول می‌توان نحوهٔ کار با آن را متوجه شد.
قطعاً منبع الهام خیلی خوبی است. :)
https://codepen.io/jkantner/pen/pvjNNVz

#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

برش متن برای یک خط
وقتی می‌خواهیم متن فقط در یک خط نمایش داده شود، می‌توانیم ویژگی white-space را روی مقدار nowrap تنظیم کنیم. اگر متن طولانی باشد و عرض کانتینر، مثلاً، سیصد پیکسل باشد، متن همچنان در یک خط باقی می‌ماند، اما از محدودهٔ کانتینر خارج می‌شود.
برای برش متن می‌توان از ویژگی‌های زیر استفاده کرد:

.truncated-text {
  width: 300px;
  overflow: hidden; /* هر چیزی را که از محدودهٔ کانتینر خارج شود، مخفی می‌کند */
  text-overflow: ellipsis; /* متن مخفی‌شده را با سه‌نقطه جایگزین می‌کند */
  white-space: nowrap; /* متن را در یک خط نگه می‌دارد */
}

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

🔐 از localStorage به HttpOnly Cookie؛ معماری احراز هویت در SPA چطور عوض می‌شود
بیشتر SPAها JWT را در localStorage نگه می‌دارند و در هر درخواست به هدر Authorization اضافه می‌کنند. ساده است، ولی این روش دیگر «بهترین روش» نیست.
مشکل کجاست؟
هر کد JavaScript که در صفحه اجرا شود، از جمله کدی که از طریق XSS تزریق شده، می‌تواند با localStorage.getItem() توکن را بردارد و به سرور خودش بفرستد. علاوه بر این، فرانت‌اند مجبور است ذخیره، تمدید و ارسال توکن را هم خودش مدیریت کند، در حالی که مرورگر برای این کار سازوکار داخلی دارد.
راه‌حل: HttpOnly Cookie
سرور نشست را می‌سازد و با Set-Cookie به مرورگر می‌دهد. مرورگر خودش کوکی را نگه می‌دارد و با هر درخواست مناسب می‌فرستد و JavaScript اصلاً به آن دسترسی ندارد. نکته مهم این است که HttpOnly جلوی خود XSS را نمی‌گیرد، فقط اجازه نمی‌دهد اعتبارنامه خوانده و به بیرون منتقل شود.

📎 ترجمه کامل این مقاله در بخش نظرات موجود است.

🔗https://habr.com/ru/companies/gnivc/articles/1082540/
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

این پکیج با دستور npm i math نصب می‌شود
قابلیت‌های بسیار متنوعی به آن اضافه شده است: بردارها، ماتریس‌ها و کواترنیون‌ها، هندسهٔ دوبعدی و سه‌بعدی، ری‌کست و فرستوم، مثلث‌بندی و Quickhull، توابع Easing و Spring، اعداد تصادفی Seed‌شده، چندین نوع Noise، رنگ‌ها و سینماتیک معکوس.
رابط برنامه‌نویسی کاربردی (API) با تمرکز بر کارایی طراحی شده است. توابع نتیجه را در out که از قبل به آن‌ها داده شده می‌نویسند و در هر فراخوانی شیء جدیدی ایجاد نمی‌کنند؛ داده‌ها نیز به‌صورت آرایه‌های معمولی باقی می‌مانند و قالب آرگومان‌ها و مقادیر بازگشتی یکدست است.
علاوه بر این، همه‌چیز به نقاط ورود جداگانه تقسیم شده و به‌درستی Tree-shaking می‌شود.
بنابراین می‌توان از math در کنار WebGL، WebGPU، Wasm یا حتی رندرر اختصاصی استفاده کرد؛ خود کتابخانه هم یک دنیای شیءمحور دیگر را به پروژه تحمیل نمی‌کند.

#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

در macOS، بعد از کلیک روی یک گزینهٔ منو، منو بلافاصله ناپدید نمی‌شود. ابتدا گزینهٔ انتخاب‌شده برای لحظه‌ای کوتاه چشمک می‌زند: هایلایت آن محو می‌شود، دوباره برمی‌گردد و بعد منو بسته می‌شود.
به این ترتیب، سیستم فرصت پیدا می‌کند نشان دهد که دقیقاً کدام گزینه اجرا شده است. در وب، منو معمولاً همان لحظهٔ کلیک بسته می‌شود و چنین بازخوردی وجود ندارد.
در CSS، پیاده‌سازی این افکت ساده است:

.menu-item:target {
  animation: blink 150ms linear;
}

.menu:has(.menu-item:target) {
  animation: close 150ms step-end forwards;
}

یعنی گزینهٔ انتخاب‌شده چشمک می‌زند و منو نیز همان صد و پنجاه میلی‌ثانیه صبر می‌کند و بعد مخفی می‌شود.
حتی یک نمونهٔ CodePen هم برایش ساخته‌ام:
https://codepen.io/editor/alinaki/pen/01a0f12b-8d69-7192-90d7-b8b7562ef482
بدون JavaScript هم می‌توان این رفتار را با :target و :has() پیاده کرد؛ گزینهٔ انتخاب‌شده در URL fragment نگه داشته می‌شود. برای یک نمونهٔ نمایشی کاملاً مناسب است،



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

بررسی املای متن
ویژگی spellcheck به مرورگر اعلام می‌کند که آیا باید املاء و دستور زبان متن را بررسی کند یا خیر.
این ویژگی برای تگ‌های input و textarea و همچنین عناصری که ویژگی contenteditable برای آن‌ها تنظیم شده است، قابل استفاده است.
همچنین می‌توان با استفاده از شبه‌عنصر ::spelling-error، بخش‌هایی از متن را که اشتباه املایی دارند، استایل‌دهی کرد. (پشتیبانی: ۸۶٫۰۱٪)

::spelling-error {
  background-color: yellow;
}

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