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

🆔@IR_javascript
Download Telegram
از حدس زدن ارتفاع خط به طوری که متن دقیقاً به اندازه یک حرف 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
یکی از جالب ترین ویژگی های ECMAScript 2023 امکان تغییر یک آرایه با گرفتن یک کپی از آن است. یعنی با تغییر آرایه با این روش اول یک کپی سطحی [+لینک] از آن گرفته می شود سپس تغییرات شما بر روی نسخه کپی اعمال می شود.
‏ toReversed، toSorted، toSpliced از آن جمله اند که درECMAScript 2023 اضافه شدند

#️⃣#tip
🆔@IR_javascript