جاوااسکریپت | JavaScript

#️⃣#comic
🆔@IR_javascript

271 views_, 12:54

کمپرسور تصویر جاوا اسکریپت از Canvas.toBlob API بومی مرورگر برای انجام کار فشرده‌سازی استفاده می‌کند، به این معنی که امکان فشرده‌سازی مرورگرهای مختلف دارد. از این برای فشرده‌سازی پیش‌فرض یک تصویر در سمت client قبل از آپلود آن استفاده کنید.

🔗https://github.com/fengyuanchen/compressorjs

#️⃣#npm_module
🆔@IR_javascript

282 views_, 03:45

Animated Card UI Design with Hover Effect

در این ویدیو با استفاده از HTML و CSS کارت هایی با افکت شناور اصلی ایجاد می شود.

🔗https://www.youtube.com/watch?v=LJyfzyuSg3I

#️⃣#tutorial
🆔@IR_javascript

102 views_, edited 09:25

9 Dots Menu
در این ویدیو یک منوی اصلی ایجاد و متحرک شده است که با فشار دادن یک دکمه باز می شود.

🔗https://www.youtube.com/watch?v=AnQLtviRwD4

#️⃣#tutorial
🆔@IR_javascript

101 views_, edited 09:35

همه می دانند که می توانید از console.log برای ثبت متن و متغیرها در کنسول استفاده کنید. آیا می دانستید که می توانید CSS، SVG و حتی HTML (بصورت محدود) را نیز در آن رندر کنید.

console.info(
  '%c ',
  `line-height:100px;padding-block:50px;padding-left:400px;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'%3E%3Cstyle%3E text %7B font-family: sans-serif; font-weight: 100; fill: %23d8eaff; %7D %3C/style%3E%3Crect width='400' height='100'%3E%3C/rect%3E%3Ctext text-anchor='middle' font-size='15' x='200' y='50'%3ESaturday, December 16, 2023 at 6:28 PM%3C/text%3E%3Cscript%3E const text_element = document.querySelector('text'); text_element.textContent = new Date().toLocaleString(true, %7B weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' %7D); %3C/script%3E%3C/svg%3E")`
);

🔗https://frontendmasters.com/blog/console-delight/

#️⃣#tip
🆔@IR_javascript

169 views_, 10:20

#️⃣#comic
🆔@IR_javascript

😁1

281 views_, 16:44

0:10

CSS scroll-driven scroll-snapping animations
بدون استفاده از JS پیاده سازی شده است. استفاده از scroll-snap.
🔗https://codepen.io/giana/pen/BabdgjB

#️⃣#tutorial
🆔@IR_javascript

113 views_, edited 17:35

Tabulator: An Interactive Table and Data Grid Library

از تمام مرورگرهای اصلی پشتیبانی می کند
در صورت تمایل می توان از آن با Angular، Vue و React استفاده کرد
به خوبی maitain می شود.
🔗https://tabulator.info/

#️⃣#npm_module
🆔@IR_javascript

273 views_, 03:29

در خروجی چه خواهد بود؟

پاسخ: Toyota Camry (2020)

#️⃣#challenge
🆔@IR_javascript

102 views_, edited 03:33

بک گراند .alert چه خواهد بود؟

پاسخ: red

🔗https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
🔗https://mrjunior.ir/interop-2022/#h-cascade-layers

#️⃣#challenge #css
🆔@IR_javascript

146 views_, edited 06:31

‏fffuel مجموعه‌ای از ابزارها و ژنراتورهای SVG برای ایجاد و تغییر در gradients, patterns, textures, shapes & backgrounds است.

🔗https://fffuel.co/

#️⃣#tool
🆔@IR_javascript

99 views_, 15:16

در خروجی چه خواهد بود؟

پاسخ:

firstConsoleLog
secoundConsoleLog
promiseLog
timeOutLog

🔗https://medium.com/@lydiahallie/javascript-visualized-promises-async-await-a3f1aad8a943

🔗https://virgool.io/@mohammadreza.mn/%D9%BE%D8%B4%D8%AA-%D9%BE%D8%B1%D8%AF%D9%87-event-loop-uqpp0okt7zew

#️⃣#challenge
🆔@IR_javascript

181 views_, edited 03:19

CSS Motion Path چیست؟

نحوه متحرک سازی عناصر در طول یک مسیر با CSS Motion Path.

#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

🔗https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_motion_path

🔗https://codepen.io/michellebarker/pen/qBEpmGK

#️⃣#tip #css
🆔@IR_javascript

164 views_, edited 03:49

در خروجی چه خواهد بود؟ پاسخ: firstConsoleLog secoundConsoleLog promiseLog timeOutLog 🔗https://medium.com/@lydiahallie/javascript-visualized-promises-async-await-a3f1aad8a943 🔗https://virgool.io/@mohammadreza.mn/%D9%BE%D8%B4%D8%AA-%D9%BE%D8%B1%D8%AF%D9%87…

‏promise و timeout بعد از انجام وارد دو تا صف به نام های به ترتیب microtask , macrotask میشن که اولویت microtask بالا تر هست و تا داخل اون چیزی باشه سراغ macrotask نمیره
یعنی اولویت ‏promise بیشتر از timeout هست

#️⃣#tip
🆔@IR_javascript

👍1

94 views_, edited 10:40