دکمه‌های با افکت درخشش

مجموعه‌ای از انیمیشن‌های CSS برای دکمه‌ها که با استفاده از دکمه‌های رادیویی بین آن‌ها جابه‌جا می‌شوند.

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

سلام به همه دوستان عزیز! 🌟
با کلی هیجان و خوشحالی اعلام می‌کنم که کانال آپارات ما راه‌اندازی شد! [+لینک] 🎉
از این به بعد قراره کلی محتوای جذاب و متنوع، از جمله ویدیوهای دوبله‌شده، کلیپ‌های با کیفیت بالا و هر چیزی که تو دنبالش هستی، رو روی آپارات آپلود کنیم! 🎥✨

🔗 لینک‌ها همیشه در دسترس شما قرار می‌گیرند تا بتونید به راحتی هر وقت خواستید ویدیوها رو ببینید و بدون نگرانی از مصرف حجم اینترنت از تماشای اونا لذت ببرید. 😎👌


پس حتماً کانال رو دنبال کنید تا از آخرین ویدیوها باخبر بشید و هیچی رو از دست ندید. 💥
منتظر نظرات و پیشنهادات خفنتون هستم. ❤️
پس بزن بریم! 🎬

ویدیو دوبله شده در مورد Module Federation

ده دقیقه زمان بگذارید تا سه اپلیکیشن با استفاده از Module Federation ایجاد کنید و یک Micro-Frontend را بین SolidJS و React به اشتراک بگذارید.

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

ویدیو دوبله شده در مورد UML

‏UML (زبان مدل‌سازی یکپارچه) یک زبان مهندسی نرم‌افزار است که برای استانداردسازی روش‌های بصری‌سازی طراحی سیستم‌ها توسعه یافته است. نمودارهای کلاس UML ساختار سیستم را با نمایش کلاس‌ها و روابط بین آن‌ها توصیف می‌کنند.

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

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

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

‏Omgopass — کتابخانه‌ای کوچک برای تولید رمزهای عبور

⏺ بسیار سریع: 600 برابر سریع‌تر از password-generator
⏺ بسیار سبک: 322 بایت (مینیمایز شده و فشرده)
⏺ ایمن: از API رمزنگاری قوی برای تولید اعداد تصادفی به جای Math.random استفاده می‌کند
⏺ هیچ وابستگی ندارد
⏺ از Node.js و مرورگرها پشتیبانی می‌کند

🔗https://omgovich.github.io/omgopass/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

⚙️ چرا npm ممکن است وابستگی‌ها را حذف کند؟ به بررسی جزئیات مربوط به فلگ legacy-peer-deps می‌پردازیم!

اخیراً با مشکلی مواجه شدم: روی یک لپ‌تاپ npm وابستگی‌ها را حذف می‌کرد، در حالی که روی لپ‌تاپ دیگر همه چیز به درستی کار می‌کرد. بعد از چندین بررسی و تست، دلیل را پیدا کردم - استفاده از فلگ legacy-peer-deps. 😬

فلگ legacy-peer-deps چیست و چگونه کار می‌کند؟

تا نسخه ۷ npm، هنگام نصب بسته‌ها، npm وابستگی‌های peer را بررسی نمی‌کرد که این امکان را می‌داد تا تعارض‌های احتمالی بین آن‌ها نادیده گرفته شوند و بسته‌ها بدون محدودیت نصب شوند. اما از نسخه ۷ به بعد، npm شروع به بررسی وابستگی‌های peer کرد تا از تعارض نسخه‌های کتابخانه‌ها جلوگیری کند.

‏✔️ legacy-peer-deps=true رفتار قدیمی را فعال می‌کند: npm تعارض‌های وابستگی‌های peer را نادیده می‌گیرد و بسته‌ها را بدون توجه به ناسازگاری نسخه‌ها نصب می‌کند. این حالت زمانی مفید است که نیاز به نصب سریع بسته‌ها دارید و نمی‌خواهید به صورت دستی تعارض‌ها را حل کنید.

‏✔️ legacy-peer-deps=false npm سعی می‌کند تعارض‌های وابستگی‌های peer را رفع کند. اگر وابستگی‌ها ناسازگار باشند، نصب بسته متوقف می‌شود. این به جلوگیری از مشکلات مربوط به ناسازگاری نسخه‌ها کمک می‌کند.

📌 وابستگی‌های peer چیست؟ این یک نوع خاص از وابستگی است که نشان می‌دهد یک بسته نیاز به نسخه خاصی از یک کتابخانه دیگر دارد، اما آن را به صورت خودکار نصب نمی‌کند. این بدان معنی است که پروژه‌ای که از این بسته استفاده می‌کند، باید خودش از نسخه صحیح وابستگی‌های peer اطمینان حاصل کند.

👀 هنگام استفاده از فلگ --legacy-peer-deps که بررسی نسخه‌های وابستگی‌های peer را دور می‌زند، احتیاط کنید. از آن فقط زمانی استفاده کنید که مطمئن هستید نسخه‌های مختلف وابستگی‌ها می‌توانند به درستی با هم کار کنند.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

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

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


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

شبه کلاس empty

این شبه کلاس عناصری را انتخاب می‌کند که شامل هیچ عنصر یا متنی نیستند. به زبان ساده، این شبه کلاس عناصری را پیدا می‌کند که "خالی" هستند.

چه زمانی به کار می‌آید؟ ☑️ مخفی کردن بلوک‌های خالی: می‌توانید از استایل‌هایی استفاده کنید که عناصر خالی را که نیازی به نمایش آن‌ها نیست، مخفی کنید.

div:empty {    display: none;}

☑️ افزودن استایل به عناصر خالی: اگر بلوک خالی است، می‌توانید استایل‌هایی اضافه کنید تا نشان دهید که در حال حاضر محتوایی در آن نیست.

❕ به چه نکاتی توجه کنیم؟ شبه کلاس عناصری را انتخاب می‌کند که هیچ عنصر یا متنی درون آن‌ها وجود نداشته باشد.
برای مثال: <div></div> یک عنصر خالی محسوب می‌شود، اما <div> </div> دیگر خالی نیست، زیرا یک فاصله درون آن قرار دارد.

در نهایت،
برای کار با محتوای پویا مفید است تا بتوانید نمایش بلوک‌های بدون محتوا را مدیریت کنید.


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

⚜️ میلاد ختم الرسول پیامبر مهربانی حضرت محمد (ص)

⚜️ میلاد جامع علم و عمل و عبادت پرچم دار شاهراه ولایت علوى
حضرت امام جعفر صادق(ع)

بر همگان تبریک و تهنیت باد


#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

‏
امکانات 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