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

🆔@IR_javascript
Download Telegram
fetch-event-stream

ابزار کوچک (745b) برای مدیریت رویدادهای ارسال شده توسط سرور(SSE) از طریق API fetchو یا WebStreams

🔸 به شما امکان می دهد از WebWorker/ServiceWorker استفاده کنید
🔹 AbortController را برای رشته هایی که می توان لغو کرد می پذیرد


🔗 https://github.com/lukeed/fetch-event-stream

#️⃣#npm_module
🆔@IR_javascript
👍3👏1
آپاچی کوردوا یک پلتفرم متن باز است که برای ساخت برنامه‌های کاربردی موبایل با استفاده از اچ تی ام ال، سی اس اس و جاوا اسکریپت استفاده می‌شود. این پلتفرم به توسعه دهندگان امکان می‌دهد با استفاده از یک کد بیس واحد، برنامه‌هایی را برای چندین پلتفرم موبایل مانند اندروید، iOS و Windows Phone بسازند.


🔗 https://github.com/lukeed/fetch-event-stream

#️⃣#npm_module
🆔@IR_javascript
👍1
Dead Zone in JavaScript
در جاوا اسکریپت، Dead Zone به مرحله ای در طول اجرای کد شما اشاره دارد که در آن متغیری وجود دارد اما قابل دسترسی نیست.
که به دلیل hoisting متغیر رخ می دهد، مکانیزمی که در آن اعلان های متغیر به بالای محدوده خود منتقل می شوند، در حالی که تخصیص آنها در جای خود باقی می ماند.
console.log(myVar); // Output: ReferenceError: Cannot access 'myVar' before initialization

let myVar = 42;

متغیر var در طول مرحله بالا بردن با undefined مقداردهی اولیه می شود.
console.log(myVar); // Output: undefined

var myVar = 42;


چگونه مناطق مرده را مدیریت کنیم:
[1] اعلام متغیرها قبل از استفاده
‏[2] متغیرهای اعلام شده با let و const فقط در بلوکی که در آن تعریف شده اند قابل دسترسی هستند.
[3] در حالی که var معمولاً به مناطق مرده منتهی نمی شود تا آنجا که میشود از let و const استفاده کنید.
[4] از Linters کدنویسی استفاده کنید
🔗https://www.freecodecamp.org/news/what-is-dead-zone-in-javascript/#what-is-a-dead-zone

#️⃣#tip
🆔@IR_javascript
👍1
تگ <optgroup> در HTML در داخل تگ <select> برای گروه بندی آیتم های لیست انتخاب شده استفاده می شود. این به شما امکان می دهد برای راحتی کاربر زیر گروه ها یا دسته ها ایجاد کنید. در یک تگ <optgroup>، می توانید یک یا چند تگ <option> را قرار دهید که نشان دهنده موارد انتخابی فردی است.
<select>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</optgroup>
<optgroup label="Vegetales">
<option value="carrot">Carrot</option>
<option value="potato" disabled>Potato</option>
</optgroup>
</select>

#️⃣#tip #html
🆔@IR_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Isotope
ایزوتوپ یک کتابخانه جاوا اسکریپت است که به شما امکان فیلتر و مرتب کردن عناصر DOM در یک صفحه را می دهد. می توان از آن با هر کتابخانه یا فریم ورک جاوا اسکریپت استفاده کرد.


🔗 https://github.com/metafizzy/isotope

#️⃣#npm_module
🆔@IR_javascript
‏Screen Wake Lock API برای جلوگیری از خاموش شدن صفحه نمایش دستگاه

وقتی ویدیویی را در یوتیوب تماشا می کنید، حتی پس از مدت طولانی عدم فعالیت، صفحه نمایش خاموش نمی شود. این به لطف Screen Wake Lock API امکان پذیر است
🔗https://developer.mozilla.org/en-US/docs/Web/API/WakeLock

#️⃣#tip
🆔@IR_javascript
👍1🔥1
‏UAParser.js - کتابخانه جاوا اسکریپت رایگان و منبع باز برای شناسایی مرورگر، موتور، سیستم عامل، CPU و نوع/مدل دستگاه کاربر. در مرورگر (سمت کلاینت) یا node.js (سمت سرور) اجرا می شود.

🔗 https://uaparser.js.org/

#️⃣#npm_module
🆔@IR_javascript
👍1
در خروجی چه خواهد بود؟
Anonymous Quiz
41%
1
31%
undefined
17%
refrenceError
10%
typeError
👍2
بهبود خوانایی کد
‏Indent Rainbow یک پلاگین VSCode است که علامت های رنگی را به هر سطح تورفتگی در کد شما اضافه می کند و خوانایی را بهبود می بخشد. به لطف این افزونه، می توانید به راحتی تودرتویي موجود در بلوک های کد را ردیابی کنید و روند توسعه را راحت تر و کارآمدتر کنید.


#️⃣#tool
🆔@IR_javascript
1
متد toSorted() مانند متد sort() است، اما بر خلاف آن، آرایه اصلی را تغییر نمی دهد، اما یک آرایه مرتب شده جدید را برمی گرداند. تمام عناصر تعریف نشده در انتهای آرایه مرتب شده اند. بیایید آرایه را با اعداد مرتب کنیم:
 const numbers = [43, 6, 35, 1, 9, 7, 5, 75, 16];
const sortedNumbers = numbers.toSorted((a, b) => a - b);
console.log(numbers);
// [43, 6, 35, 1, 9, 7, 5, 75, 16];
console.log(sortedNumbers);
// [1, 5, 6, 7, 9, 16, 35, 43, 75]

آرایه برگردانده شده یک کپی کم عمق است اگر به عنوان مثال المان هاي آن آرايه آبجكت باشد اگر آن آبجكت تغییر كند، تغییرات در آرایه اصلی و آرايه ايجاد شده با متد toSorted() اعمال ميشود.
const obj = {name: 'Scarlett'};
const names = [
obj,
'Albert',
undefined,
'',
];
const sortedNames = names.toSorted();

console.log(sortedNames);
// ['', 'Albert', { name: 'Scarlett' }, undefined]

obj.name = 'Dan';
console.log(sortedNames)
// ['', 'Albert', { name: 'Dan' }, undefined]


#️⃣#tip
🆔@IR_javascript
2👍1
box-shadow

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


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

#️⃣#tip #css
🆔@IR_javascript