جاوااسکریپت | JavaScript

<mermaid-element> یک کتابخانهٔ کاربردی دیگر. براموس یک عنصر سفارشی (Custom Element) توسعه داده است که می‌توان سینتکس نمودارهای Mermaid را درون آن قرار داد و نمودار به‌صورت خودکار در صفحه رندر می‌شود. اگر با Mermaid آشنایی ندارید، باید گفت که Mermaid ابزاری است که سینتکس متنی مانند sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later! را به یک نمودار توالی (Sequence Diagram) تبدیل می‌کند. علاوه بر نمودارهای توالی، بیش از سی نوع نمودار مختلف را نیز پشتیبانی می‌کند؛ نمودارهایی که می‌توان از آن‌ها در مستندسازی و فرایندهای کاری مختلف استفاده کرد. 🔗https://www.bram.us/2026/09/10/introducing-mermaid-element-a-custom-element-to-display-mermaid-diagrams/ #️⃣#npm_module 👥@IR_javascript_group 🆔@IR_javascript`

MicroLighter اول اینکه بر پایهٔ TextMate کار می‌کند؛ بنابراین اگر به گرامر خاصی نیاز داشته باشید، اضافه کردن آن نسبتاً ساده است. دوم اینکه حجم آن تنها دو کیلوبایت به‌صورت gzip است که واقعاً کم محسوب می‌شود. کتابخانه‌های دیگری که من می‌شناسم، معمولاً چیزی بین هفت تا سیصد کیلوبایت حجم دارند. سوم اینکه در HTML شما «دست‌کاری اضافه» ایجاد نمی‌کند. دلیلش این است که در پشت صحنه از Custom Highlight API استفاده می‌کند؛ یعنی برای نشانه‌گذاری بخش‌های مختلف کد، تعداد زیادی span و div به ساختار HTML اضافه نمی‌کند، بلکه از قابلیت‌های داخلی مرورگر استفاده می‌کند تا بعداً بتواند با ::highlight(token) در CSS، استایل مناسب را روی بخش‌های مختلف اعمال کند. احتمالاً در اینجا دوباره می‌گویید: «پس حتماً به‌جز Chrome و آن هم پشت یک فلگ، جای دیگری کار نمی‌کند!» من هم تا همین امروز صبح همین تصور را داشتم. اما ظاهراً از مارس سال دو هزار و بیست‌وشش این API در تمام مرورگرهای اصلی به‌طور کامل قابل استفاده است. بنابراین می‌توانید یک راهکار بارگذاری هوشمند داشته باشید؛ به این صورت که برای مرورگرهای مدرن از MicroLighter استفاده کنید و برای مرورگرهای قدیمی‌تر یک هایلایتر جایگزین در نظر بگیرید. یا اگر هایلایت کردن کد در برنامهٔ شما بیشتر یک قابلیت جانبی و تکمیلی است، می‌توانید فقط MicroLighter را بارگذاری کنید و کار را ساده نگه دارید 🔗https://davatron5000.github.io/microlighter/ #️⃣#npm_module 👥@IR_javascript_group 🆔@IR_javascript`

‏Uppy شش: آپلودکنندهٔ ماژولار فایل برای جاوااسکریپت امکان آپلود قابل‌ادامه از دیسک، دراپ‌باکس یا گوگل‌درایو، همراه با بسته‌های سازگار برای React، Vue، Svelte و Angular. تمرکز این نسخه بر ساده‌سازی و پاک‌سازی ساختار است؛ از جمله بازنویسی افزونهٔ S3 و کاهش تعداد بسته‌هایی که باید مدیریت شوند. 🔗https://uppy.io/blog/uppy-6.0/ #️⃣#npm_module 👥@IR_javascript_group 🆔@IR_javascript`

دیگر به initial-scale نیازی ندارید احتمالاً در جایی از کدهای رابط کاربری‌تان، عبارت <meta name="viewport" content="width=device-width,initial-scale=1"> وجود دارد. تقریباً همه این مورد را دارند؛ چون Emmet آن را به‌صورت خودکار اضافه می‌کند و قالب‌های مختلف Bootstrap هم همین کار را انجام می‌دهند. اما نکته اینجاست که می‌توانید initial-scale را حذف کنید. این ویژگی در گذشته لازم بود تا چرخاندن صفحه در آیفون رفتاری مشابه سایر گوشی‌های هوشمند داشته باشد. اما اپل مدت‌هاست این ناسازگاری را برطرف کرده است. پس می‌توانیم چند بایت از حجم کد را هم صرفه‌جویی کنیم. 🔗https://quirksmode.org/quirksblog/2026/0902-initial.html #️⃣#tip 👥@IR_javascript_group 🆔@IR_javascript`

‏TanStack کتابخانهٔ Hotkeys را منتشر کرده است؛ کتابخانه‌ای برای مدیریت میانبرهای صفحه‌کلید. بله، مدت‌هاست کتابخانه‌هایی مثل react-hotkeys-hook، hotkeys-js و Mousetrap وجود دارند و بعضی از آن‌ها قابلیت‌هایی مثل scope، ref، sequence و ضبط ماکرو را هم ارائه می‌کنند. اما در TanStack Hotkeys همهٔ این قابلیت‌ها از ابتدا به‌عنوان بخشی از یک سیستم فرمان واحد در نظر گرفته شده‌اند. اسکوپ ها, توالی کلیدها، تشخیص نگه‌داشتن کلید، رویداد keyup، تغییر مجدد میانبرها (rebinding)، مدیریت تداخل میانبرها، استفاده از Mod برای پشتیبانی از Ctrl/Cmd، نمایش ترکیب کلیدها متناسب با پلتفرم، کار با عناصر قابل ویرایش و حتی DevTools. تقریباً همهٔ این قابلیت‌ها را می‌شد پیش از این، هرکدام در جایی پیدا کرد. سؤال این است که برای اینکه همهٔ این امکانات را یک‌جا داشته باشید، چند کتابخانه و چه مقدار کد اختصاصی باید در اطراف یک keydown ساده جمع می‌کردید. آه، بله؛ طبیعتاً Framework-agnostic هم هست. فعلاً در مرحلهٔ Alpha است، اما بد نیست مستنداتش را بخوانید؛ دست‌کم برای اینکه ببینید مدیریت میانبرهای صفحه‌کلید در عمل چه تعداد جزئیات و ظرافت دارد. 🔗https://tanstack.com/hotkeys/latest #️⃣#npm_module 👥@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