ویدیو دوبله شده ساخت برنامه های پیشرفته وب با اسفاده از Workbox [+لینک]

✨ این دوره بخشی از دوره Udemy – Progressive Web Apps (PWA) – The Complete Guide 2022-11 ولی در این سرفصل توضیحات مفصلی در مورد workbox آورده شده است


🔗https://www.aparat.com/playlist/11523920
#️⃣ #dub
👥@IR_javascript_group
🆔@IR_javascript

object-to-formdata

یک ماژول جاوااسکریپت راحت برای سریالایز کردن اشیاء به نمونه‌های FormData


🔗https://github.com/therealparmesh/object-to-formdata
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

دکمه Gooey با فیلتر SVG

یک دکمه اورجینال با افکت کشسان (الاستیک) هنگام هاور کردن و تغییر رنگ.

🔗https://codepen.io/simeydotme/pen/pomRJeE
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

حذف رفرش ناخواسته در دستگاه‌های موبایل ❔

شاید متوجه شده باشید که در دستگاه‌های موبایل می‌توان سایت را با کشیدن محتوا به سمت پایین، زمانی که صفحه را تا بالاترین نقطه اسکرول کرده‌اید، رفرش کرد؟ این ویژگی "کشیدن برای رفرش" (pull-to-refresh) نام دارد و گاهی در مکان‌های نامناسب فعال می‌شود، به‌ویژه اگر در صفحه عناصری قابل اسکرول وجود داشته باشند — مانند پنجره‌های مودال یا کانتینرهای کوچک محتوا. 🫤

این مشکل را می‌توان به‌سادگی با استفاده از ویژگی overscroll-behavior: none; حل کرد.

این ویژگی تمام اثرات جانبی اسکرول مانند "کشیدن برای رفرش" یا پرش‌های اینرسی را به‌طور کامل غیرفعال می‌کند، که به کنترل بهتر تعامل با محتوا کمک می‌کند.

با این حال، یک نقطه ضعف کوچک هم وجود دارد — انیمیشن بازگشت (bounce-back) در هنگام رسیدن به انتهای باکس اسکرول از بین می‌رود، که ممکن است باعث شود تجربه کاربری کمی ثابت‌تر و "خشک‌تر" به نظر برسد…

اما گاهی اوقات، کنترل رفتار اهمیت بیشتری نسبت به جلوه‌های بصری دارد، به‌ویژه اگر هدف ایجاد تجربه کاربری قابل پیش‌بینی باشد. 👍

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

#ثقلین

امام علی علیه السلام:

...فَلا تَحمِل هَمَّ سَنَتِكَ عَلى‏ هَمِّ يَومِكَ، وكَفاكَ كُلَّ يَومٍ ما هُوَ فيهِ، فَإِن تَكُنِ السَّنَةُ مِن عُمُرِكَ، فَإِنَّ اللَّهَ عزّوجلّ سَيَأتيكَ في كُلِّ غَدٍ بِجَديدِ ما قَسَمَ لَكَ، وإن لَم تَكُنِ السَّنَةُ مِن عُمُرِكَ ، فَما تَصنَعُ بِغَمِّ وهَمِّ ما لَيسَ لَكَ

...در يك روز، نگران يك سال نباش؛ كه غم هر روز، برای آن روز کافی است. اگر يك سال از عمرت مانده باشد، خداوند عزّوجلّ از پس هر روز، روزىِ تازه ‏ات را خواهد داد، و اگر يك سال از عمرت نمانده باشد. پس چرا غم و اندوهِ زمانى را مى‏خورى كه از آنِ تو نيست؟!

حکمت 379 نهج البلاغه

@raefipourfans

در هنگام کدنویسی علاوه بر flex و grid، گزینه‌های دیگری هم برای ایجاد قالب واکنش‌گرا وجود دارد.

به عنوان مثال، ویژگی کمتر استفاده شده display: contents به نوعی "کانتینر" را حذف می‌کند و تمام فرزندان آن به یک سطح بالاتر منتقل می‌شوند.

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

پیکا یک کتابخانه جاوااسکریپت برای مقیاس‌گذاری تصاویر در مرورگر است که آن را برای برنامه‌هایی که به پردازش باکیفیت تصاویر بدون نیاز به درخواست‌های سروری نیاز دارند، مفید می‌کند.
با استفاده از پیکا می‌توانید:

اندازه آپلود تصاویر بزرگ را کاهش داده و زمان آپلود را ذخیره کنید.
منابع سرور را برای پردازش تصاویر ذخیره کنید.
در مرورگر تصاویر بندانگشتی تولید کنید.
🔗https://github.com/nodeca/pica
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

جدول جالبی است

گوگل بررسی می‌کند که کدام سایت‌ها آزمون Web Vitals (https://web.dev/articles/vitals) آن‌ها را می‌گذرانند.

همانطور که می‌بینیم، نتایج Vue به مراتب بهتر از Nuxt با رندر سمت سرور (SSR) است، در حالی که یکی از دلایل جذب کاربران به Nuxt بهبود شاخص‌های وب بود.


و اگر به آمار سال دوهزار میلادی بازگردیم، می‌توانیم ببینیم که React در آن زمان ده برابر Vue بوده است. اکنون این نسبت تقریباً ۲ برابر است.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

Bolt.new
یک سایت توسعه وب مبتنی بر هوش مصنوعی است که به شما امکان می‌دهد برنامه‌های فول استک را مستقیماً از مرورگر خود ایجاد، اجرا، ویرایش و منتشر کنید، بدون نیاز به تنظیمات محلی. اگر قصد دارید توسعه وب مبتنی بر هوش مصنوعی خود را با استفاده از کد منبع باز Bolt بسازید، این ابزار بسیار مناسب است.

🔗https://bolt.new/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

همگام‌سازی تب‌ها با استفاده از 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