نحوه تشخیص وضعیت اتصال به شبکه در JavaScript

می‌توانیم از رویدادهای online و offline برای دریافت اطلاعیه‌ها در مورد تغییرات وضعیت اتصال به شبکه استفاده کنیم.

window.addEventListener('offline', (event) => {
  console.log('User is offline');
});

window.addEventListener('online', (event) => {
  console.log('User is online');
});

#️⃣#tip
🆔@IR_javascript

شبه‌کلاس ::firstletter

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


#️⃣#tip #css
🆔@IR_javascript

Skating bunny

🔗https://codepen.io/Yakudoo/pen/poqazQo
#️⃣#code
🆔@IR_javascript

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

راه حل:

می‌توانید از کد زیر استفاده کنید:

.box:has(> :nth-child(5):last-child) {
  background-color: green;
}

#️⃣#tip #css
🆔@IR_javascript

Draw With WebGL Flowers 2

🔗https://codepen.io/ksenia-k/pen/RwqrxBG
#️⃣#code
🆔@IR_javascript

‏Codeium یک ابزار هوش مصنوعی قدرتمند است که به برنامه‌نویسان در انجام وظایف مختلف، از جمله نوشتن کد، رفع اشکال و تست، کمک می‌کند. این ابزار با استفاده از یادگیری ماشین و پردازش زبان طبیعی، می‌تواند کد را به طور خودکار تکمیل کند، اشکالات را شناسایی کند و راه حل‌های خلاقانه ارائه دهد.
در نظرسنجی اخیر Stack Overflow، Codeium به عنوان پربازده‌ترین و کاربرپسندترین دستیار هوش مصنوعی برای برنامه‌نویسی انتخاب شد. این نظرسنجی از بیش از 10000 توسعه‌دهنده در سراسر جهان نظرسنجی کرد و نشان داد که Codeium به طور قابل توجهی به برنامه‌نویسان در انجام وظایف خود کمک می‌کند.

🔗https://stackoverflow.blog/2024/05/29/developers-get-by-with-a-little-help-from-ai-stack-overflow-knows-code-assistant-pulse-survey-results/
#️⃣#tool
🆔@IR_javascript

شبه عنصر ::first-line
این شبه عنصر به شما امکان می دهد اولین خط عنصر متنی را به صورت جداگانه استایل دهید. این عنصر اغلب برای ایجاد جلوه های تایپوگرافی مانند افزایش اندازه فونت یا تغییر رنگ اولین خط استفاده می شود.

خواص قابل قبول:

color: رنگ اولین خط
background-color: رنگ پس زمینه
font-family: قلم اولین خط
font-size: اندازه فونت
font-weight: ضخامت فونت
line-height: ارتفاع خط
text-decoration: تزیین متن (زیرخط، خط خطی)
text-transform: تبدیل متن (حروف بزرگ، حروف کوچک)
word-spacing: فاصله بین کلمات
letter-spacing: فاصله بین حروف
text-indent: فرورفتگی اولین خط
در عمل، این شبه عنصر اغلب برای عناوین مقالات و پست ها استفاده می شود.
#️⃣#tip #css
🆔@IR_javascript

فشرده سازی کد
افزونه Better Minify در vs_code به شما امکان می دهد کدهای HTML، CSS، JS و بسیاری از زبان های دیگر را فشرده کنید.

هنگام استفاده از دستور "minify files" بر روی یک فایل انتخابی، فایلی با نام "نام فایل.min.ext" در دایرکتوری فعلی ایجاد می شود.

#️⃣#tool
🆔@IR_javascript

‏Draggabilly
‌‏Draggabilly یک کتابخانه JavaScript سبک وزن است که به شما امکان می دهد عناصر HTML را در صفحات وب قابل کشیدن و رها کردن کنید. این کتابخانه از انواع مختلف ورودی، از جمله صفحه نمایش های لمسی پشتیبانی می کند، که آن را برای استفاده در همه دستگاه های مدرن مناسب می کند.


🔗https://draggabilly.desandro.com/

#️⃣#npm_module
🆔@IR_javascript

هر آنچه برای ساخت آسان وب‌سایت‌های ریسپانسیو و بی‌نقص نیاز دارید، در این نرم افزار وجود دارد

تمامی دستگاه‌ها به طور همزمان
تمامی دستگاه‌ها را به صورت همزمان و در کنار هم مشاهده کنید. دیگر نیازی به کلنجار رفتن با ابزار تغییر سایز مرورگر نیست. همه چیز به طور همزمان در یک نگاه قابل مشاهده است.

تعاملات آینه شده
هر کلیک، اسکرول یا ناوبری که در یک دستگاه انجام می‌دهید، به صورت لحظه‌ای در تمام دستگاه‌ها تکرار می‌شود.

تعویض سریع بین محیط‌های مختلف
ترکیب‌های دستگاهی مورد علاقه خود را به عنوان «مجموعه پیش‌نمایش» ذخیره کنید و هنگام تست به سرعت بین آن‌ها جابجا شوید.

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

🔗https://responsively.app/
#️⃣#tool
🆔@IR_javascript

‏API تمام صفحه—یک رابط کاربری است که به شما امکان می دهد عناصر صفحه HTML را در حالت تمام صفحه نمایش دهید. این رابط کاربری توسط مرورگرهای وب پشتیبانی می شود و می تواند برای ایجاد تجربیات کاربری جذاب و فراگیر مورد استفاده قرار گیرد.

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

نمایش تصاویر: می توانید از API تمام صفحه برای نمایش تصاویر در اندازه بزرگتر و با جزئیات بیشتر استفاده کنید. این می تواند برای عکاسان، هنرمندان یا هر کسی که بخواهد تصاویر خود را به روشی فراگیر به اشتراک بگذارد مفید باشد.

نمایش اسلایدها: API تمام صفحه برای نمایش اسلایدها نیز ایده آل است. این می تواند برای ارائه ها، سخنرانی ها یا هر موقعیتی که بخواهید محتوای خود را به روشی بصری و جذاب ارائه دهید، مفید باشد.

نمایش بازی ها: برخی از بازی های وب از API تمام صفحه برای ایجاد تجربه ای فراگیرتر برای بازیکنان استفاده می کنند.


نحوه استفاده از API تمام صفحه:
استفاده از API تمام صفحه نسبتاً ساده است. برای نمایش یک عنصر در حالت تمام صفحه، می توانید از روش requestFullscreen() در آن عنصر استفاده کنید. به عنوان مثال، کد زیر عنصر با شناسه target را در حالت تمام صفحه نمایش می دهد:

const element = document.getElementById('target');
element.requestFullscreen();

برای خروج از حالت تمام صفحه، می توانید از روش exitFullscreen() در شیء Document استفاده کنید. به عنوان مثال، کد زیر از حالت تمام صفحه خارج می شود:

document.exitFullscreen();

🔗https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_requestfullscreen
#️⃣#tip
🆔@IR_javascript

در دنیای وب، انیمیشن نقش مهمی در ایجاد رابط کاربری جذاب و پویا ایفا می‌کند. روش‌های مختلفی برای ایجاد انیمیشن در وب وجود دارد، از جمله CSS Animations، SVG Animations و JavaScript Animations. در میان این روش‌ها، requestAnimationFrame (rAF) به عنوان یک ابزار قدرتمند و کارآمد برای ایجاد انیمیشن‌های روان و بهینه شناخته می‌شود.

‏rAF چیست؟

‏requestAnimationFrame یک API مرورگر است که به شما امکان می‌دهد انیمیشن‌های روان و بهینه‌ را در وب ایجاد کنید. این API جایگزینی برای روش‌های سنتی مانند setInterval و setTimeout است که می‌توانند باعث ایجاد انیمیشن‌های ناهموار و ناکارآمد شوند.

نحوه عملکرد rAF:

‏rAF با هماهنگ‌سازی با نرخ تازه‌سازی صفحه‌نمایش کار می‌کند تا انیمیشن‌ها را در فواصل زمانی مناسب رندر کند. این امر باعث می‌شود انیمیشن‌ها روان‌تر و بدون لرزش یا پرش به نظر برسند. علاوه بر این، rAF فقط زمانی که مرورگر برای رندر فریم بعدی آماده است، فراخوانی می‌شود. این امر باعث می‌شود از مصرف غیرضروری منابع CPU و GPU جلوگیری شود و انیمیشن‌ها به طور کارآمدتر اجرا شوند.

#️⃣#tip
🆔@IR_javascript

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

مزایای شانس:

سادگی: شانس یک کتابخانه سبک و آسان برای استفاده است.
تنوع: شانس انواع مختلفی از داده‌های تصادفی از جمله رشته‌ها، اعداد، آرایه‌ها، اشیاء و غیره را تولید می‌کند.
کد باز: شانس یک کتابخانه متن باز است که تحت مجوز MIT منتشر شده است، به این معنی که می‌توانید به صورت رایگان از آن برای پروژه‌های شخصی و تجاری استفاده کنید.

Chance.first({ nationality: "it" });
// 'Alberto'

Chance.first({ gender: "female" });
// 'Emma'

chance.animal();
// 'Cobra'

🔗https://chancejs.com/

#️⃣#npm_module
🆔@IR_javascript

‏Photopea: جایگزینی قدرتمند برای فتوشاپ در وب

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

شباهت به فتوشاپ:

‏Photopea رابط کاربری بسیار مشابهی با فتوشاپ دارد. این شامل پنل‌های ابزار آشنا، لایه‌ها، فیلترها و تنظیمات مختلف است. اگر قبلاً از فتوشاپ استفاده کرده باشید، به سرعت می‌توانید با Photopea کار کنید.
🔗https://www.photopea.com/
#️⃣#tool
🆔@IR_javascript

یارب العالمین

عید قربان مبارک باد🌸


#⃣#event
🆔@IR_javascript