بسم الله الرحمن الرحیم

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

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

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


#npm_module
@IR_javascript

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

whatpwacando.today

#tool
@IR_javascript

Animated Card UI Design with Hover Effect

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

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

#️⃣#tutorial
🆔@IR_javascript

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

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

#️⃣#tutorial
🆔@IR_javascript

همه می دانند که می توانید از 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

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

#️⃣#tutorial
🆔@IR_javascript

Tabulator: An Interactive Table and Data Grid Library

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

#️⃣#npm_module
🆔@IR_javascript

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

پاسخ: Toyota Camry (2020)

#️⃣#challenge
🆔@IR_javascript

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

پاسخ: red

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

#️⃣#challenge #css
🆔@IR_javascript