‏
امکانات CSS: ویژگی mix-blend-mode به ما اجازه می‌دهد تا پس‌زمینه سفید یک تصویر را "حذف" کنیم.

.hide-background {
  mix-blend-mode: multiply;
  filter: contrast(1);
}

در این حالت، خود تصویر رنگ پس‌زمینه پشت تصویر را به خود می‌گیرد.

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

در سال گذشته، دنیای API development ecosystem (که postman در این دسته قرار داره) دچار تحولی چشمگیر شده است.

نرم‌افزار Yaak (React, Tauri) به صورت منبع باز منتشر شد، Bruno (Next.js, Tauri) نیز عرضه و با سرعت در حال پیشرفت است، و در نهایت نسخه دسکتاپ Hoppscotch (Vue 3, Tauri) نیز به بازار آمده است.

هنوز Hoppscotch در مرحله آلفا قرار دارد، اما عملکرد بسیار خوبی دارد و مشکلات مربوط به پروکسی درخواست‌ها نیز برطرف شده است. حجم این نرم‌افزار تنها ۱۰ مگابایت است (در مقایسه با ۱۲۰ مگابایت برای Yaak و ۴۰ مگابایت برای Bruno). در تصویر می‌توانید مشاهده کنید که هر کدام از این برنامه‌ها در حالت بیکار چه میزان از حافظه استفاده می‌کنند. اینجا یک نمایش ویژه از قدرت Tauri داریم.

‏Yaak و Bruno به‌طور کامل آفلاین هستند، بنابراین رابط کاربری آن‌ها با سرعت بالایی کار می‌کند. از سوی دیگر، Hoppscotch داده‌ها را در فضای ابری همگام‌سازی می‌کند که کمی تأخیر به همراه دارد، اما همچنان تجربه کاربری خوبی ارائه می‌دهد.

از نظر قابلیت‌ها، Hoppscotch پیشتاز است و پس از آن Bruno قرار دارد.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد الگوهای معماری کلاینت [+لینک]

معماری کلاینت نقش مهمی در طراحی و توسعه نرم‌افزارهای مدرن دارد و تعیین می‌کند که چگونه برنامه‌های کاربردی سمت کلاینت (مانند اپلیکیشن‌های وب، موبایل و دسکتاپ) داده‌ها را مدیریت، نمایش و با سرور ارتباط برقرار می‌کنند. انتخاب الگوی مناسب برای معماری کلاینت می‌تواند بر عملکرد، مقیاس‌پذیری و کارایی برنامه تأثیر بگذارد. در ادامه، به بررسی مهم‌ترین الگوهای معماری کلاینت پرداخته و مزایا و معایب هر یک را بیان می‌کنیم.

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

ابزار بررسی کنتراست رنگ (Color Contrast Checker) — بررسی کنتراست رنگ‌ها

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

کنتراست مناسب برای متن‌های کوچک حدود ۱۸ است. کنتراست عالی برای متن‌های بزرگ بالاتر از ۱۸ و برای متن‌های بولد بالاتر از ۱۴ است.

🔗https://coolors.co/contrast-checker/112a46-acc8e5
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد معماری MVC و MVVM [+لینک]

در این ویدیو درباره الگوهای معماری MVC و MVVM صحبت خواهیم کرد. بحث خواهیم کرد که معماری MVC چه نیازی دارد و چه مشکلاتی را حل می‌کند. با مثال‌هایی به بررسی MVC در نود و جاوااسکریپت خواهیم پرداخت.



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

وب سایتی برای ایجاد یک 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