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

🆔@IR_javascript
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Neural Noise

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

🔗https://codepen.io/ksenia-k/pen/vYwgrWv
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript
یک گزینه دیگر برای بک‌اند هوشمند به عنوان جایگزینی برای Firebase و Supabase

(https://www.convex.dev/).

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

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

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
اگر بخواهیم در مورد مهارت‌های ضروری یک فرانت‌اند توسعه‌دهنده صحبت کنیم، یکی از آنها UML است .

توانایی خواندن و ساختن ۳-۴ نوع نمودار اصلی، در توصیف ساختار برنامه، جریان اجرای کد، توانایی فرموله‌بندی و اجرای یک کار بسیار کمک می‌کند.

نمایش بصری، درک و تجزیه سیستم‌های پیچیده را بسیار آسان‌تر می‌کند.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
1
سینتکس جدید برای کوئری‌های مدیا (media queries)

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript
3
تیم‌سازی

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

امروز اولین روزه و حس‌های متفاوتی دارم.

‏از یه طرف، یه جوری عجیبه:
دیدن همکارا تو یه محیط غیررسمی، شناختنشون از یه زاویه کاملا متفاوت که هیچ ربطی به کار نداره؛
تغییر روتین همیشگی روز کاری.

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

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

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

نظر شما درباره تیم‌سازی چیه؟ به نظرتون کمک می‌کنه تیم متحد بشه یا بیشتر جنبه تفریحی داره؟

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript
👍1
استفاده از console.table() برای دیباگ (قالب‌بندی) داده‌ها در کنسول

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

برای اینکه بهتر بتونم این داده‌ها رو ببینم، از console.table() استفاده می‌کنم.

‏console.table() یه آرایه از آبجکت‌ها یا یه آبجکت رو می‌گیره و اون رو به صورت یه جدول توی کنسول نمایش می‌ده.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
👍4🔥1
‏:in-range و :out-of-range

این هفته با یه چالش جالب برخورد کردم. باید یه فرم طراحی می‌کردم که فقط مقدار رو دریافت نکنه، بلکه همزمان نشون بده که اگه مشکلی پیش اومد. یادم افتاد به این شبه کلاس‌های کاربردی :in-range و :out-of-range.

اینا شبه کلاس‌هایی هستن که به المان‌های <input> اعمال می‌شن وقتی مقدارشون توی محدوده مشخصی قرار بگیره. مثلاً اگه یه فیلد برای وارد کردن عدد با ویژگی‌های min و max داشته باشیم، CSS

:in-range وقتی مقدار وارد شده توی این محدوده قرار بگیره فعال میشه؛
:out-of-range برعکس، وقتی مقدار وارد شده از این محدوده خارج بشه فعال میشه. یعنی اگه کاربر بخواد عددی بزرگتر یا کوچکتر از اون چیزی که انتظار داریم وارد کنه، این شبه کلاس فعال میشه.

input:in-rage {
border-color: green;
}

input:out-of-range {
border-color: red;
}


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript
👍5
تفاوت میان یک توسعه‌دهنده میانی و مبتدی:

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

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

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