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

🆔@IR_javascript
Download Telegram
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
⚙️ چرا 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
1
ویدیو دوبله شده در مورد میکرو فرانت [+لینک]

اگر تا به حال اصطلاح "میکرو فرانت‌اند" (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
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
⚜️ میلاد ختم الرسول پیامبر مهربانی حضرت محمد (ص)

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

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


#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
7👍1🤔1
معماری برنامه های مدرن فرانت اند [+لینک]
ویدیو دوبله شده در مورد معماری فرانت اند
در این ویدیو به 5 نوع معماری اپلیکیشن frontend خواهیم پرداخت. بیایید در مورد مزایا و معایب، در مورد زمان استفاده از یک یا نوع دیگری از معماری برنامه های کاربردی frontend صحبت کنیم.



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

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

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


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

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript
👍71
در سال گذشته، دنیای 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
👍21