همگام‌سازی تب‌ها با استفاده از Broadcast Channel API 🤩

برای مثال، اگر کاربر در یک تب کالا را به سبد خرید اضافه کند، این عمل ممکن است برای اعمال در تب‌های دیگر برنامه مفید باشد.

مزایای استفاده از Broadcast Channel API:

⏺️ همگام‌سازی آنی
به محض اینکه پیامی در یک تب ارسال شود، تب‌های دیگر فوراً آن را دریافت کرده و می‌توانند پردازش کنند.

⏺️ API ساده و راحت
Broadcast Channel ساده در استفاده است و به راحتی می‌توان آن را در پروژه‌های موجود ادغام کرد.

⏺️ محلی بودن داده‌ها
همه پیام‌ها به صورت محلی بین تب‌ها منتقل می‌شوند که بار روی سرورها را کاهش می‌دهد.

👆 نمونه‌های پیاده‌سازی را می‌توان روی صفحه مشاهده کرد.

در نتیجه، Broadcast Channel API یک ابزار عالی برای حل مشکلات همگام‌سازی داده‌ها بین تب‌های یک وب‌اپلیکیشن است، اما برای موارد پیچیده‌تر، مانند همگام‌سازی داده‌ها بین کاربران مختلف یا دستگاه‌های مختلف، بهتر است از رویکردهای دیگری استفاده شود. 👍

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

طراحی به طور بنیادین به معنای جدا کردن اجزاء است... به گونه‌ای که بتوان آن‌ها را دوباره کنار هم قرار داد. جدا کردن چیزها به اجزایی که می‌توانند ترکیب شوند، این است چیستی طراحی .

— ریچ هیکی

طراحی پروژه‌ یعنی جداسازی سیستم به گونه‌ای که بتوان آن را دوباره سرهم کرد. جداسازی به قطعاتی که می‌توانند دوباره به یک کل تبدیل شوند.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

مرتب‌سازی عمودی عناصر با استفاده از ویژگی align-content 🐾

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

اما چقدر تعجب کردم وقتی فهمیدم که ویژگی align-content اکنون نه تنها با کانتینرهای flexbox و grid کار می‌کند، بلکه برای عناصر بلوکی نیز قابل استفاده است! این خبر فوق‌العاده‌ای است، به خصوص با توجه به اینکه پشتیبانی از این ویژگی به ۸۱ درصد رسیده است (طبق داده‌های Can I use) (https://caniuse.com/mdn-css_properties_align-content_block_context).

<div class="main-container">
  <div class="text">align-content</div>
</div>

.main-container {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  align-content: center;
}

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

Regulex
یک ابزار آنلاین برای تجسم عبارات منظم (Regular Expressions) در جاوا اسکریپت است که این عبارات را به نمودارهایی تبدیل می‌کند و به درک آسان‌تر الگوهای پیچیده کمک می‌کند.


🔗https://jex.im/regulex/#!flags=&re=%5E(a%7Cb)*%3F%24
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

Tree Shaking & Code Splitting
‏Tree shaking، که با نام حذف کدهای مرده نیز شناخته می‌شود، به معنای حذف کدهای استفاده‌نشده در ساخت نهایی است. این موضوع بسیار مهم است که تا حد ممکن کد کمتری به کاربران نهایی ارسال شود. با تحلیل استاتیک کدهای منبع، می‌توانیم تعیین کنیم چه کدهایی استفاده نمی‌شوند و آن‌ها را از باندل نهایی حذف کنیم.


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

ویدیو دوبله شده در مورد Shadow DOM [+لینک]
شما را قادر می‌سازد تا یک درخت DOM را به یک عنصر متصل کنید و قسمت‌های داخلی این درخت را از جاوا اسکریپت و CSS دام اصلی پنهان کنید.

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

زبان‌ها از الگوهای مختلفی برای بیان تعداد موارد (اعداد اصلی یا کاردینال) و همچنین ترتیب موارد (اعداد ترتیبی یا اوردینال) استفاده می‌کنند. انگلیسی چهار حالت برای بیان اعداد ترتیبی دارد: "th"، "st"، "nd"، "rd" که به ترتیب در توالی زیر به کار می‌روند: 0th، 1st، 2nd، 3rd، 4th، 5th، ...، 21st، 22nd، 23rd، 24th، 25th و به همین ترتیب ادامه پیدا می‌کند. اما در زبان فارسی فقط یک فرم برای اعداد ترتیبی وجود دارد.

در جاوا اسکریپت، کلاسی به نام Intl.PluralRules وجود دارد (با پشتیبانی ۹۵٪) (https://caniuse.com/?search=Intl.PluralRules) که به سادگی به شما امکان می‌دهد تا فرم مناسب کلمه را بر اساس عدد تعیین کنید. این کلاس از زبان‌های مختلف، از جمله روسی، پشتیبانی می‌کند و می‌تواند به طور خودکار فرم صحیح اسم را انتخاب کند.

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

عناصر جدید HTML، یعنی <dialog> و پاپ‌اوور، شباهت‌های زیادی با یکدیگر دارند. هر دو برای نمایش محتوا به صورت موقتی و تعاملی استفاده می‌شوند و به کاربران امکان می‌دهند اطلاعات یا تعاملات خاصی را بدون ترک صفحه اصلی تجربه کنند.

هر دو عنصر می‌توانند به راحتی برای ارائه اطلاعات اضافی، پیام‌های مهم، یا حتی فرم‌های تعاملی به کار روند و به طور کلی برای بهبود تجربه کاربری در وب اپلیکیشن‌ها مفید هستند.

با این حال، تفاوت‌های کلیدی بین آن‌ها در نحوه‌ی مدیریت تعامل و فوکوس وجود دارد.

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

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

تفاوت کلیدی بین این دو عنصر در تأثیر آن‌ها بر فوکوس است: دیالوگ‌ها فوکوس را به اولین عنصر موجود در داخل خود منتقل می‌کنند، در حالی که پاپ‌اوورها فوکوس را بر روی المانی که آن‌ها را باز کرده است نگه می‌دارند. این تفاوت در طراحی رابط‌های کاربری مهم است تا تعامل و دسترسی مناسب برای کاربران فراهم شود. علاوه بر این، پاپ‌اوور می‌تواند فقط با روش‌های HTML مدیریت شود، در حالی که <dialog> نیازمند جاوا اسکریپت است.

<button popovertarget="my-popover">Open Popover</button>

<div popover id="my-popover">Hello!</div>

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

#ثقلین

امیرالمؤمنین عليه السلام:

خردمند کسی است كه دمى را در كارهاى بى فایده هدر نمی دهد و آنچه را براى هميشه همراه او نمى ماند، ذخيره نسازد
العاقِلُ مَن لا يُضيعُ لَهُ نَفَسًا فيما لا يَنفَعُهُ، ولا يَقتَني ما لا يَصحَبُهُ

غررالحكم حدیث2163

@raefipourfans

سایت icones.js.org برای انتخاب آیکون‌ها بسیار کاربردی است. اگرچه امکان جستجو بر اساس پارامترهای دقیق وجود ندارد، اما قابلیت کپی مستقیم آیکون‌ها به صورت SVG بسیار خوب طراحی شده است.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

بهبود دسترسی منو در سایت: دسترسی به زیرمنو با استفاده از کلید تب؟ 🤨

تصور کنید یک منوی استاندارد در سایت دارید که یکی از آیتم‌ها شامل زیرمنو است. همه چیز زیبا، کاربردی و راحت به نظر می‌رسد، اما یک مشکل وجود دارد: کاربری که به جای ماوس، ترجیح می‌دهد از کیبورد برای ناوبری استفاده کند و با کمک کلید Tab بین آیتم‌های منو جابه‌جا شود، به راحتی می‌تواند بین آیتم‌های اصلی منو حرکت کند اما نمی‌تواند به زیرمنو دسترسی پیدا کند! 😥

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

چه باید کرد؟ آیا این یک اشکال است؟ بله، اما رفع آن بسیار ساده است. کافی است از CSS pseudoclass به نام :focus-within استفاده کنید. 👍

چگونه می‌توان به این هدف رسید:

.dropdown:focus-within .submenu {
  display: block;
}

زمانی که کاربر به آیتم "Services" می‌رسد و کلید Tab را فشار می‌دهد، فوکوس به زیرمنو منتقل می‌شود و زیرمنو بلافاصله باز می‌شود.

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

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

Headroom.js
یک کتابخانه سبک جاوا اسکریپت است که به شما این امکان را می‌دهد تا دیدگاه هدرها (سرصفحه‌ها) را در صفحه هنگام اسکرول کردن مدیریت کنید. این کتابخانه هدر را زمانی که کاربر به سمت پایین اسکرول می‌کند "پنهان" می‌کند و هنگامی که کاربر صفحه را به سمت بالا اسکرول می‌کند، آن را دوباره نمایش می‌دهد.

این قابلیت می‌تواند به بهبود تجربه کاربری کمک کند و فضای صفحه را در هنگام مرور محتوا بیشتر کند. با استفاده از Headroom.js، می‌توانید هدرها را به شکلی زیبا و کاربردی مدیریت کنید تا همواره توجه کاربر را جلب کنند.

🔗https://github.com/WickyNilliams/headroom.js
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

ScrollReveal
یک کتابخانه برای انیمیشن عناصر در هنگام اسکرول صفحه است. این کتابخانه به شما کمک می‌کند تا افکت‌های ظهور (fade-in) را اضافه کنید و به تدریج محتوا را نمایش دهید وقتی که به منطقه دید کاربر می‌رسد.

با استفاده از ScrollReveal، می‌توانید تجربه کاربری جذاب‌تری ایجاد کنید و محتوای خود را به صورت داینامیک و بصری جالب‌تر نمایش دهید. این ابزار به ویژه در وب‌سایت‌هایی که محتوای بصری زیادی دارند، می‌تواند بسیار مؤثر باشد.

🔗https://scrollrevealjs.org/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

#ثقلین

امام على عليه السلام:

مِن تَوفيقِ الحُرِّ اكتِسابُهُ المالَ مِن حِلِّهِ
از نشانه‌های توفیق انسان آزاده اين است كه مال را از راه‌حلال به دست آورد

غررالحكم حدیث9393

@raefipourfans

در CSS انیمیشن‌های مبتنی بر اسکرول (scroll-driven animations) وجود دارند که امکان ایجاد انیمیشن‌های پیچیده و زیبا را تقریباً بدون نیاز به جاوااسکریپت فراهم می‌کنند.


🔗https://scroll-driven-animations.style/#
🔗https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations

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

چطور یک پیش‌نمایش زیبا برای سایت خود در پیام‌رسان‌ها و شبکه‌های اجتماعی ایجاد کنیم؟

وقتی لینکی از سایتتان را به اشتراک می‌گذارید، پیش‌نمایشی که نمایش داده می‌شود باید جذاب و چشم‌نواز باشد، نه مجموعه‌ای از متن‌های بی‌ربط یا تصاویر تصادفی. برای دستیابی به این پیش‌نمایش حرفه‌ای، فقط نیاز به چند مرحله ساده داریم!
راه‌حل: استفاده از متا تگ‌های Open Graph
متا تگ‌های Open Graph یک استاندارد جهانی هستند که توسط شبکه‌های اجتماعی و پیام‌رسان‌ها برای نمایش منظم و جذاب لینک‌های سایت به کار می‌روند. با اضافه کردن چند خط کد در بخش <head> صفحه خود، می‌توانید کنترل کاملی بر نحوه نمایش لینک‌هایتان داشته باشید.

مراحل تنظیم پیش‌نمایش
۱. افزودن تگ‌های Open Graph
در <head>: - og:title: عنوان صفحه که باید کوتاه و جذاب باشد.
در - og:description: توضیحی مختصر که اطلاعات اصلی صفحه را با زبانی جذاب منتقل کند.
در - og:image: لینک به تصویری باکیفیت که پیش‌نمایش را جذاب‌تر کند.
در - og:url: لینک اصلی صفحه که به اشتراک گذاشته می‌شود.

۲. تست و آزمایش پیش‌نمایش: ابزارهای زیر به شما کمک می‌کنند تا مطمئن شوید پیش‌نمایش‌ها به درستی نمایش داده می‌شوند:

‏metatags.io: این سایت ابزاری برای تولید و اعتبارسنجی تگ‌های متا دارد و به شما امکان می‌دهد پیش‌نمایش خود را دقیقاً همانطور که می‌خواهید تنظیم کنید (شامل فرمت‌های Open Graph، Twitter و JSON-LD).

‏opengraph.xyz: با وارد کردن لینک سایتتان، این ابزار نحوه نمایش آن را در شبکه‌های اجتماعی به شما نشان می‌دهد.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ایجاد دکمه‌های سفارشی برای انتخاب فایل 😌
آپلود فایل در سایت یکی از رایج‌ترین نیازها در طراحی وب است. با این حال، دکمه پیش‌فرض <input type="file"> اغلب با طراحی کلی سایت هم‌خوانی ندارد. تا پیش از این، برای رفع این مشکل، معمولاً اینپوت اصلی را پنهان می‌کردیم و یک دکمه سفارشی با رویداد کلیک می‌ساختیم. 🦈

ولی وقتی که با پسوکلاس ::file-selector-button آشنا شدم، واقعاً شگفت‌زده شدم! این پسوکلاس اجازه می‌دهد بدون پیچیدگی‌های اضافه، دکمه آپلود فایل را به دلخواه خود استایل‌دهی کنید. جالب‌تر اینکه، پشتیبانی این ویژگی در مرورگرهای مدرن به حدود نود و پنج درصد رسیده است! (مشاهده در: caniuse.com) 🤩

‏چگونگی استفاده از ::file-selector-button
با استفاده از این روش، می‌توان دکمه انتخاب فایل را به گونه‌ای طراحی کرد که کاملاً با استایل و تم سایت هماهنگ شود.

نتیجه
پسوکلاس ::file-selector-button به شما این امکان را می‌دهد که دکمه‌های پیش‌فرض آپلود فایل را بدون هیچ افتی در عملکرد و کارایی، با ظاهری شخصی‌سازی شده ایجاد کنید. 👍

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

اگر در پروژه‌تان فایل‌های JSON دارید، گاهی اوقات کار با JSON5 ساده‌تر و کاربردی‌تر است، چون از مواردی مانند کامنت‌ها و انتقال خطوط پشتیبانی می‌کند. برای این کار، مراحل زیر را انجام دهید:

۱) نصب پلاگین Vite: ابتدا پلاگین vite-plugin-json5 را نصب کنید.

۲) نصب افزونه JSON5 برای VS Code: برای دسترسی به هایلایت سینتکس در ویرایشگر، افزونه JSON5 را به VS Code اضافه کنید.

۳) پیکربندی TypeScript: برای اینکه TypeScript با JSON5 مشکلی نداشته باشد، در فایل index.d.ts این خط کد را اضافه کنید:

declare module "*.json5" {
  const value: any;
  export default value;
}

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

#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript