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

انواع مختلف گذاشتن تگ اسکرپت و نحوه اجرای آن در زمان parse
#tip

👍2

91 viewsedited 13:25

#comic

👌1

93 views13:37

کتابخانه Google Translate یک SDK برای سوئیچ زبان و ترجمه سایت از یک زبان به زبان دیگر ارائه می دهد. کیفیت بدتر از ترجمه سفارشی هست، اما این امکان را فراهم کرد که به سرعت حداقل از چندین زبان در سایت پشتیبانی شود. چهار سال پیش، گوگل پشتیبانی از این کتابخانه را کنار گذاشت.

با این حال، هنوز بسته هایی وجود دارد که به شما امکان می دهد این کار را از طریق Google Translate API انجام دهید.
از vue2/vue3/react پشتیبانی می کنه.
https://google-translate-select.i7eo.com/

#npm_module
@IR_javascript

120 views_, edited 11:11

سایتی که نشان می دهد یک PWA مدرن چه کاری می تواند در دستگاه های تلفن همراه انجام دهد.

whatpwacando.today

#tool
@IR_javascript

301 views_, edited 07:04

‏Tempo یک کتابخانه جدید تاریخ و زمان جاوا اسکریپت است. با الهام از مواردی مانند moment.js، day.js و date-fns که از ابتدا به گونه ای ساخته شده است که تا حد امکان کوچک و آسان باشد - از جمله پشتیبانی درجه یک برای عملیات های وابسته به منطقه زمانی.

🔗https://tempo.formkit.com/

#️⃣#npm_module
🆔@IR_javascript

❤3👍1

306 views_, 08:35

#️⃣#comic
🆔@IR_javascript

270 views_, 12:54

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

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

#️⃣#npm_module
🆔@IR_javascript

280 views_, 03:45

Animated Card UI Design with Hover Effect

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

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

#️⃣#tutorial
🆔@IR_javascript

100 views_, edited 09:25

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

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

#️⃣#tutorial
🆔@IR_javascript

99 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

167 views_, 10:20

#️⃣#comic
🆔@IR_javascript

😁1

280 views_, 16:44

0:10

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

#️⃣#tutorial
🆔@IR_javascript

111 views_, edited 17:35

Tabulator: An Interactive Table and Data Grid Library

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

#️⃣#npm_module
🆔@IR_javascript

271 views_, 03:29