وب سایتی برای ایجاد یک SVG متحرک برای اسکلت ها


🔗skeletonreact.com
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

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

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



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

MicroModal.js

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

🔗https://micromodal.vercel.app/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد شبکه عصبی با جاوااسکریپت brain js [+لینک]

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


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

داده های جعلی (آدرس، نام، اعداد و اطلاعات دیگر) را با استفاده از کتابخانه Faker تولید می کند. عالی برای تست سریع

🔗https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

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

✨ یک اپلیکیشن ساده وانیلا جی‌اس (جاوااسکریپت پایه) ایجاد خواهیم کرد و آن را با کمک CLI Workbox گوگل به یک PWA تبدیل خواهیم کرد. این باید به ساده‌سازی فرآیند درک و کار با اپلیکیشن‌های وب پیشرفته کمک کند.

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

ایجاد گالری تصاویر با استفاده از CSS Grid 🤩

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

استفاده از ویژگی CSS grid-auto-flow: dense که بهینه‌سازی موثر جای‌گذاری عناصر در شبکه را فراهم می‌کند. این روش به‌طور خودکار فضاهای خالی را پر می‌کند و چیدمانی هماهنگ‌تر و کامل‌تر از تصاویر ایجاد می‌کند.

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

یک پروژه کوچک : CodePen (https://codepen.io/katrin_profrontend/pen/BaXBwqg?editors=0110)



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

ویدیو دوبله شده در برنامه‌نویسی جم‌استک [+لینک]

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

این دوره به دو بخش تقسیم شده است: ۱- توضیحات نظری [نقشه‌ها با استفاده از @eraserlabs ] ۲- ساخت دو پروژه
الف) ساخت یک وب‌سایت / API | استقرار در نتلیفای
ب) ساخت یک اپلیکیشن یک صفحه‌ای با Next.JS ۱۴.۱ / استقرار در ورسل


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

ویژگی enterkeyhint 😊

آیا تا به حال متوجه شده‌اید که کیبورد دستگاه شما گاهی نشان می‌دهد چه اتفاقی می‌افتد اگر دکمه Enter را فشار دهید؟ برای مثال، "ارسال"، "جستجو" یا "بعدی".

همه این موارد را می‌توان با استفاده از ویژگی enterkeyhint کنترل کرد که به کاربر دستورالعمل‌های دقیق‌تری می‌دهد و تعامل با فرم‌ها را در دستگاه‌های موبایل راحت‌تر می‌کند. 😁

  <input id="input-default" type="text" enterkeyhint="enter" >

⬆️ مقادیر ممکن به همراه نمونه‌هایی از کیبوردها در تصویر بالا آورده شده است.

👀 این ویژگی توسط همه مرورگرهای مدرن (93%) پشتیبانی می‌شود. می‌توانید بررسی کنید: Can I use (https://caniuse.com/?search=enterkeyhint)


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

ویدیو دوبله شده در مورد پروتکل‌های URL عجیب [+لینک]

✨ تا به حال در وب روی لینکی کلیک کرده‌اید و ناگهان یک نرم‌افزار یا اپلیکیشن روی کامپیوتر یا موبایل‌تان باز شده است؟

🔗 پروتکل‌های مختلف URL نقش مهمی در هدایت کاربران به منابع و برنامه‌های مختلف دارند. از پروتکل‌های معروف مانند HTTP و HTTPS که برای وب‌سایت‌ها استفاده می‌شوند، تا پروتکل‌های مخصوصی مانند steam:// برای پلتفرم‌های بازی، spotify:// برای سرویس‌های موسیقی و zoom:// برای جلسات آنلاین.

✅ همچنین، پروتکل‌های خاصی مانند magnet:// برای دانلودهای BitTorrent و پروتکل‌های مایکروسافت و ویندوز شامل ms-clock:// و ms-calculator:// به ما امکانات بیشتری می‌دهند.

💬 پروتکل تلگرام: که به شکل tg:// هست. این پروتکل این امکان را می‌دهد که به راحتی به چت‌ها، گروه‌ها و کانال‌های تلگرام هدایت شوند.

🔍 در این ویدیو به تفصیل درباره این پروتکل‌ها و تفاوت بین پروتکل‌های رسمی و خصوصی صحبت شده است. همچنین، روند ثبت‌نام و ادغام پروتکل‌های خصوصی بدون نیاز به ثبت‌نام رسمی توضیح داده می‌شود.

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

.NoSleep.js

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


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

ویدیو دوبله شده ساخت برنامه های پیشرفته وب با اسفاده از 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