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

🆔@IR_javascript
Download Telegram
box-shadow

#️⃣#tip #css
🆔@IR_javascript
👍2
از حدس زدن ارتفاع خط به طوری که متن دقیقاً به اندازه یک حرف Capital شود خسته شده اید؟ خسته نباشید!
 line-height: 1cap;


🔗https://caniuse.com/?search=cap%20unit

#️⃣#tip #css
🆔@IR_javascript
در این سایت فونت برای هر سلیقه و سبکی پیدا خواهید کرد. و 17 هزار صفحه نشان دهنده اندازه چشمگیر این مجموعه است.
🔗https://fonts.do/

#️⃣#tool
🆔@IR_javascript
Cally: Small, Feature-Rich Calendar Components

تقویمی کوچک و کم حجم اما پر امکانات که از جمله ویژگی های آن
اندازه‌ی کوچک بسته- کمتر از 9 کیلوبایت در حالت فشرده/فشرده شده با gzip
مجموعه امکانات کامل - تاریخ‌های تکی، دامنه‌ای، نمایش چند ماه
وابستگی‌های کم - تنها یکی
قابل دسترسی - کیبورد و صفحه خوان
قابلیت تغییرزبان - Intl.DateTimeFormat ، خواص CSS ، پشتیبانی از RTL
قابل تغییر قالب - اجزاء CSS و ویژگی‌های سفارشی

  <calendar-range
value="2024-01-10/2024-01-20"
min="2024-01-01"
max="2024-12-31"
locale="fa-IR"
months="2"
first-day-of-week=-1
dir="rtl"
>
<calendar-month></calendar-month>
<calendar-month offset="1"></calendar-month>
</calendar-range>



🔗 https://wicky.nillia.ms/cally/

#️⃣#npm_module
🆔@IR_javascript
👍21👎1
target vs currentTarget in js
به طور کلی:
‏target عنصری است که کاربر روی آن کلیک کرده است
‏CurrentTarget عنصری است که listener به آن اختصاص داده شده است.

مثال:
  <div id="outer">
Outer div
<button id="inner">Inner Button</button>
</div>


  const outer = document.getElementById('outer');

outer.addEventListener('click', function (event) {
console.log('event.target:', event.target.id);
console.log('event.currentTarget:', event.currentTarget.id);
});

وقتی روی دکمه کلیک شود خروجی مطابق زیر است:
event.target: inner
event.currentTarget: outer


#️⃣#tip
🆔@IR_javascript
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
‏Quokka.js یک ابزاربرای افزایش بهره وری در حین توسعه است وکمک می کند همانطور که شما تایپ می کنید مقادیری که متغیر ها گرفته اند را نیز مشاهده کنید.

#️⃣#tool
🆔@IR_javascript
👍2
‏ Bruno یک سرویس تست API منبع باز است، جایگزینی برای ابزارهایی مانند Postman یا Insomnia که فقط آفلاین کار می کند.

🔗https://github.com/usebruno/bruno

#️⃣#tool
🆔@IR_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
کار با Resize Observer برای ردیابی تغییرات اندازه عنصر
‏Resize Observer به شما این امکان را می دهد که تغییرات اندازه عناصر را کنترل کنید و به آنها در کد خود واکنش نشان دهید.

const resizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
console.log('ابعاد عنصر تغییر کرده است:',entry.target);
}
});
const resizableElement = document.getElementById('resizable');
resize0bserver.observe(resizableElement);


#️⃣#tip
🆔@IR_javascript
👍1
کتابخانه جاوا اسکریپت برای ایجاد فایل‌های pdf در سمت کلاینت که به تولید بلیط رویداد، گواهی‌ها یا پوستر کمک می‌کند.

توضیحات بیشتر در مورد زبان فارسی در jsPDF [+لینک]


🔗 https://github.com/parallax/jsPDF?tab=readme-ov-file

#️⃣#npm_module
🆔@IR_javascript
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
‏text-align-last
با خط آخر به صورت جداگانه کار می کند و به شما امکان می دهد تا انتقال متنی را انجام دهید که برای چشم دلپذیرتر است

🔗https://caniuse.com/?search=text-align-last
🔗https://www.stefanjudis.com/today-i-learned/how-to-align-the-text-of-the-last-paragraph-line/

#️⃣#tip #css
🆔@IR_javascript
👍2
Validate.js
کتابخانه ای که متد هایی را برای اعتبارسنجی و sanitizes رشته ها در جاوا اسکریپت ارائه می دهد. که در سمت سرور و کلاینت قابل استفاده است

🔗 https://github.com/validatorjs/validator.js

#️⃣#npm_module
🆔@IR_javascript