جاوااسکریپت | JavaScript
511 subscribers
654 photos
140 videos
3 files
512 links
کانال @IR_javascript حاوی اطلاعات مفید در حوزه برنامه نویس فرانت که بصورت روزانه بروز می‌شود.
در این کانال شما به:
[1] مطالب تازه
[2] تحلیل‌های عمیق
[3] نکات آموزشی
[4] چالش
[5] ابزار و راهنمایی‌های کاربردی
دسترسی خواهید داشت.

🆔@IR_javascript
Download Telegram
تفاوت میان یک توسعه‌دهنده میانی و مبتدی:

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

البته، همه چیز به ویژگی‌های خاص کار و شرکت بستگی دارد، اما می‌خواهم دیدگاه خودم را در مورد تفاوت بین این دو سطح با شما به اشتراک بگذارم.

1️⃣ مسئولیت‌پذیری:
وقتی تازه کار خود را در توسعه فرانت‌اند شروع می‌کنید، اغلب وظایف مشخصی با دستورالعمل‌های دقیق و تحت نظارت دقیق به شما محول می‌شود. در این مرحله، مهم است که یاد بگیرید، به دستورالعمل‌ها عمل کنید و تجربه کسب کنید. با این حال، با افزایش مهارت‌های حرفه‌ای، متوجه می‌شوید که اکنون نه تنها می‌توانید وظایف را انجام دهید، بلکه مسئولیت موفقیت‌آمیز بودن آن‌ها را نیز بر عهده بگیرید. یک توسعه‌دهنده میانی تصمیم‌گیری می‌کند، در برنامه‌ریزی شرکت می‌کند و حتی پروژه‌های کوچکی را مدیریت می‌کند و از عواقب اقدامات خود آگاه است.

2️⃣ درک فناوری‌ها و رویکردهای کاری:
در سطح مبتدی، معمولاً با ابزارها و رویکردهای اساسی کار می‌کنید و از طرح‌های آماده پیروی می‌کنید. اما زمانی فرا می‌رسد که توسعه‌دهنده شروع به درک عمیق‌تری می‌کند: چگونگی ساختار یک برنامه، چگونگی تعامل اجزای مختلف با یکدیگر و چگونگی بهینه‌سازی کد.

3️⃣ ارتباطات و کار گروهی:
در سطح میانی، شما نه تنها در یک تیم کار می‌کنید، بلکه به طور فعال با همکاران خود تعامل دارید، به آن‌ها در حل مشکلات کمک می‌کنید و مسائل پیچیده را برای مبتدیان توضیح می‌دهید. شما قادر هستید دیدگاه خود را بیان کنید، بحث‌های سازنده‌ای داشته باشید.

4️⃣ استقلال در کار:
یک توسعه‌دهنده مبتدی معمولاً به راهنمایی و دستورالعمل‌های دقیق نیاز دارد تا پیشرفت کند. یک توسعه‌دهنده میانی می‌تواند به تنهایی کار کند، تصمیمات مستقل بگیرد. او می‌داند چه زمانی باید از دیگران کمک بگیرد و چه زمانی می‌تواند به تنهایی از پس کار برآید و از ابتکار عمل نمی‌ترسد.

5️⃣ تأثیر بر محصول و تفکر پروژه محور:
بر خلاف یک توسعه‌دهنده مبتدی که بر انجام وظایف فردی تمرکز می‌کند، یک توسعه‌دهنده میانی می‌داند که هر وظیفه بخشی از یک پروژه بزرگ‌تر است. او تلاش می‌کند توسعه آینده را در نظر بگیرد و کدی بنویسد که نگهداری آن آسان‌تر باشد.

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

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript
2
‏emoji-mart یک کتابخانه برای پیاده‌سازی یک انتخابگر ایموجی زیبا و کاربرپسند است.

این کتابخانه به شما امکان می‌دهد به سرعت انتخابگر ایموجی را با استایل‌ها و تنظیمات از پیش تعریف شده به پروژه خود اضافه کنید:
☑️ از تم‌های مختلف، امکان فیلتر کردن و
☑️ ایموجی‌هایی با سبک‌های مختلف (مانند اپل، گوگل، توییتر و غیره) پشتیبانی می‌کند.

🔗https://www.npmjs.com/package/emoji-mart
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
👍21
میزان حافظه‌ای که وب‌سایت‌های مختلف مانند واتساپ، تلگرام، اسلک و برخی وب‌سایت‌های دیگر اشغال می‌کنند

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
2
This media is not supported in your browser
VIEW IN TELEGRAM
‏Preview.js یک افزونه برای VSCode و JetBrains است که به شما اجازه می‌دهد پیش‌نمایش کد را بدون نیاز به رفتن به مرورگر، مستقیماً در محیط ویرایشگر ببینید. این افزونه از فریمورک‌های محبوب مانند Vue، React و Svelte پشتیبانی می‌کند (برای لیست کامل به مستندات رسمی مراجعه کنید).

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

در پروژه‌ای که روی آن کار می‌کردم، Preview.js با Vuetify مشکل داشت و ممکن است با کتابخانه‌های دیگر نیز مشکلاتی ایجاد کند. به طور کلی، این افزونه به تنظیمات بیشتری نیاز دارد.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
3
Media is too big
VIEW IN TELEGRAM
ویو 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
2
Lazy.js

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


🔗https://github.com/dtao/lazy.js
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
اانیمیشن صفحه لغو اشتراک

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


🔗https://codepen.io/agathaco/pen/NyQgQX
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript
👍3
‏Rete.js یک ابزار قدرتمند برای توسعه‌دهندگان است که به آن‌ها اجازه می‌دهد تا رابط‌های کاربری بصری و تعاملی برای ساخت و ویرایش نمودارهای گرافیکی ایجاد کنند. این فریمورک به طور گسترده در صنایع مختلف از جمله بازی‌سازی، طراحی گرافیک، و توسعه نرم‌افزارهای صنعتی استفاده می‌شود. با استفاده از Rete.js، توسعه‌دهندگان می‌توانند به کاربران خود امکان دهند تا به صورت بصری منطق برنامه‌های خود را مدل‌سازی کنند، که این امر باعث افزایش بهره‌وری و کاهش پیچیدگی توسعه می‌شود.

🔗https://retejs.org/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
1
‏Macy.js یک کتابخانه برای ایجاد طرح‌بندی‌های شبکه‌ای (grid layout) در برنامه‌های وب است. این کتابخانه برای ساده‌سازی کار ایجاد شبکه‌های تطبیقی طراحی شده است، که این امر به ویژه برای گالری‌های تصویر، پرتفولیوها و سایر سایت‌های محتوایی مفید است.

🔗http://macyjs.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
Media is too big
VIEW IN TELEGRAM
ویدیو دوبله شده در مورد monorepo

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


#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript
🔥2👍1
unwatermark

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

🔗https://unwatermark.ai/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
دکمه‌های با افکت درخشش

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

🔗https://codepen.io/simeydotme/pen/BaeZJqd
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript
👍31
سلام به همه دوستان عزیز! 🌟
با کلی هیجان و خوشحالی اعلام می‌کنم که کانال آپارات ما راه‌اندازی شد! [+لینک] 🎉
از این به بعد قراره کلی محتوای جذاب و متنوع، از جمله ویدیوهای دوبله‌شده، کلیپ‌های با کیفیت بالا و هر چیزی که تو دنبالش هستی، رو روی آپارات آپلود کنیم! 🎥

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


پس حتماً کانال رو دنبال کنید تا از آخرین ویدیوها باخبر بشید و هیچی رو از دست ندید. 💥
منتظر نظرات و پیشنهادات خفنتون هستم. ❤️
پس بزن بریم! 🎬
1
جاوااسکریپت | JavaScript pinned «سلام به همه دوستان عزیز! 🌟 با کلی هیجان و خوشحالی اعلام می‌کنم که کانال آپارات ما راه‌اندازی شد! [+لینک] 🎉 از این به بعد قراره کلی محتوای جذاب و متنوع، از جمله ویدیوهای دوبله‌شده، کلیپ‌های با کیفیت بالا و هر چیزی که تو دنبالش هستی، رو روی آپارات آپلود کنیم!…»
Media is too big
VIEW IN TELEGRAM
ویدیو دوبله شده در مورد Module Federation

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

🎬https://www.aparat.com/v/ohl4uw0
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript
ویژگی‌های type="number" و inputmode="numeric"

در ظاهر، این دو ویژگی مشابه به نظر می‌رسند، اما در واقع تفاوت‌های مهمی دارند.

تفاوت اصلی این است که type="number" ورودی را به مقادیر عددی محدود می‌کند و به صورت خودکار اعتبارسنجی انجام می‌دهد، در حالی که inputmode="numeric" فقط صفحه‌کلید مناسب برای وارد کردن اعداد را تنظیم می‌کند و مانع از ورود سایر کاراکترها نمی‌شود.


#️⃣#tip #html
👥@IR_javascript_group
🆔@IR_javascript
👍4
Media is too big
VIEW IN TELEGRAM
ویدیو دوبله شده در مورد UML

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

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

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

#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript
👍2
برگه تقلب مبانی SQL

این برگه تقلب حاوی تمام نمونه های اصلی پرس و جوهای SQL و همچنین توضیحاتی برای آنها به زبان انگلیسی است.
#️⃣#tip
👥@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
👍4