میزان حافظه‌ای که وب‌سایت‌های مختلف مانند واتساپ، تلگرام، اسلک و برخی وب‌سایت‌های دیگر اشغال می‌کنند

Chrome DevTools -> Memory -> Total JS heap size

Web WhatsApp - 170MB
Slack - 125 MB
VK.com - 120MB
Dzen.ru - 70MB
Nuxt.com - 40MB
Google Calendar - 40MB
Google.com  - 30MB
Web Telegram - 25MB
Vuejs.org, vue-faq.org - 5-10MB

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

‏Preview.js یک افزونه برای VSCode و JetBrains است که به شما اجازه می‌دهد پیش‌نمایش کد را بدون نیاز به رفتن به مرورگر، مستقیماً در محیط ویرایشگر ببینید. این افزونه از فریمورک‌های محبوب مانند Vue، React و Svelte پشتیبانی می‌کند (برای لیست کامل به مستندات رسمی مراجعه کنید).

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

در پروژه‌ای که روی آن کار می‌کردم، Preview.js با Vuetify مشکل داشت و ممکن است با کتابخانه‌های دیگر نیز مشکلاتی ایجاد کند. به طور کلی، این افزونه به تنظیمات بیشتری نیاز دارد.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ویو 3.5.0 منتشر شد (ویدیو دوبله شده)

بهینه سازی‌های زیادی در واکنش‌گرایی انجام شده است،
پشتیبانی از وب کامپوننت‌ها بهبود یافته است،
امکان دیستراکچر کردن props‌ها اضافه شده است،
استفاده از Teleport به تعویق افتاده (defer) است، useTemplateRef()، app.onUnmount()، useId() و بسیاری از ویژگی‌ها و رفع باگ‌های کوچک دیگر اضافه شده‌اند.


🔗https://blog.vuejs.org/posts/vue-3-5
🔗 https://github.com/vuejs/core/blob/main/CHANGELOG.md
#️⃣#tip #dub #vue
👥@IR_javascript_group
🆔@IR_javascript

Lazy.js

‏Lazy.js یک کتابخانه جاوا اسکریپت است که ابزارهایی برای کار با مجموعه‌های داده (آرایه‌ها، اشیاء) فراهم می‌کند و محاسبات تنبل را برای افزایش کارایی تضمین می‌کند.


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

اانیمیشن صفحه لغو اشتراک

تعاملی صفحه لغو اشتراک GSAP.


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

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

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

‏Macy.js یک کتابخانه برای ایجاد طرح‌بندی‌های شبکه‌ای (grid layout) در برنامه‌های وب است. این کتابخانه برای ساده‌سازی کار ایجاد شبکه‌های تطبیقی طراحی شده است، که این امر به ویژه برای گالری‌های تصویر، پرتفولیوها و سایر سایت‌های محتوایی مفید است.

🔗http://macyjs.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

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

در سیستم‌های کنترل نسخه، مونو‌ریپو یک استراتژی توسعه نرم‌افزار است که در آن کد چندین پروژه در یک مخزن ذخیره می‌شود.


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

unwatermark

واترمارک را به صورت رایگان از هر تصویری حذف می‌کند. مستقیماً در مرورگر کار می‌کند.

🔗https://unwatermark.ai/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

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

مجموعه‌ای از انیمیشن‌های 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