تبدیل گفتار فارسی به متن با جاوا اسکریپت
کد زیر را در مرورگر وارد کرده و صحبت کنید

const GetSpeech = () => {
  console.log("clicked microphone");
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  let recognition = new SpeechRecognition();
  recognition.lang = 'fa-IR'
  recognition.continuous = true;
  recognition.interimResults = true;
  recognition.onstart = () => {
    console.log("starting listening");
  }
  recognition.onspeechend = () => {
    console.log("stopped listening");
    recognition.stop();
  }
  recognition.onresult = (result) => {
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      console.log(result.results[i][0].transcript);
      if (event.results[i].isFinal) {
        console.log(result.results[i][0].transcript);
      }}}
  recognition.start();
}
GetSpeech()

دمو در لینک زیر
🔗https://codepen.io/Aghaie/pen/EzgdEo
🔗https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/interimResults

#️⃣#tip
🆔@IR_javascript

پلاگین برای بهینه سازی کدهای کند در VSCode.
افزونه نکاتی را برای بهینه سازی کد شما ارائه می دهد.

#️⃣#tool
🆔@IR_javascript

پین کد صفحه قفل موبایل

پین کد قفل صفحه گوشی موبایل. با استفاده از CSS و جاوا اسکریپت پیاده سازی شده است.
🔗https://codepen.io/codesuey/pen/LZwbxz

#️⃣#code
🆔@IR_javascript

مخزن جاوا اسکریپت تمیز .

این مخزن دستورالعمل هایی را برای نوشتن کدهای جاوا اسکریپت قابل خواندن و قابل استفاده مجدد ارائه می دهد.

بر اساس کتاب رابرت مارتین "کد تمیز" گرفته شده است.

می توانید از نسخه فارسی آن هم استفاده کنید
🔗https://github.com/hamettio/clean-code-javascript

#️⃣#learning
🆔@IR_javascript

پروکسی در جاوا اسکریپت

یک شی پراکسی برای بسته بندی یک شی دیگر (شیء هدف)استفاده می شود و اجازه می دهد تا رفتار آن رهگیری و اصلاح شود . این ابزار قدرتمندی است که به شما امکان می دهد کارهای مختلفی از جمله:

1. تبدیل داده ها : می توانید داده ها را قبل از ارسال به یک متد یا پس از دریافت آن از یک متد تغییر دهید.

2. اعتبارسنجی داده ها : می توانید از پروکسی برای اعتبارسنجی داده ها قبل از تنظیم یا خواندن از یک شی استفاده کنید.

3. پیاده سازی الگوی پروکسی : می تواند منطق اضافی را قبل یا بعد از فراخوانی متدها روی شی مورد نظر انجام دهد.

این فقط یک مثال ساده از استفاده از پروکسی در جاوا اسکریپت است. که نشان می دهد چگونه می توانید دسترسی به پروپرتی های یک شی را قطع کنید و منطق را قبل یا بعد از آن دسترسی اضافه کنید. برای ایجاد یک شیء Proxy، از تابع new Proxy استفاده کنید.



#️⃣#tip
🆔@IR_javascript

‏document.designMode همه عناصر موجود در صفحه قابل ویرایش می شوند.

اگر در پرینت نیاز به تغییر متن، حذف یک تصویر، تغییر عنوان و دیدن اینکه چگونه در صفحه به نظر می رسد دارید این ویژگی مناسب است.

#️⃣#tip
🆔@IR_javascript

nth Child of Selectors in CSS

#️⃣#tip #css
🆔@IR_javascript

استفاده از Promise.allSettled برای اجرای وعده هایی با نتایج متفاوت

‏Promise.allSettled به شما امکان می دهد بدون توجه به نتیجه، تمام وعده ها را اجرا کنید و در مورد هر یک از آنها اطلاعات کسب کنید.
🔗https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled

#️⃣#tip
🆔@IR_javascript

Services Card
انیمیشن زیبا با استفاده از CSS

🔗https://codepen.io/Gogh/pen/poqaPOM

#️⃣#code
🆔@IR_javascript

‏annyang— یک کتابخانه کوچک جاوا اسکریپت تشخیص گفتار که به کاربران شما امکان می دهد سایت شما را با دستورات صوتی کنترل کنند.

🔗https://github.com/TalAter/annyang

#️⃣#npm_module
🆔@IR_javascript

‏Idle Detection API زمانی که کاربرفعالیتی ندارد و مواردی مانند عدم تعامل با صفحه کلید، ماوس، صفحه نمایش، فعال شدن محافظ صفحه نمایش، قفل شدن صفحه، یا حرکت به صفحه دیگری را اطلاع می دهد.

try {
  const controller = new AbortController();
  const signal = controller.signal;

  const idleDetector = new IdleDetector();
  idleDetector.addEventListener('change', () => {
    const userState = idleDetector.userState;
    const screenState = idleDetector.screenState;
    console.log(`Idle change: ${userState}, ${screenState}.`);
  });

  await idleDetector.start({
    threshold: 60000,
    signal,
  });
  console.log('IdleDetector is active.');
} catch (err) {
  // Deal with initialization errors like permission denied,
  // running outside of top-level frame, etc.
  console.error(err.name, err.message);
}

🔗https://developer.mozilla.org/en-US/docs/Web/API/Idle_Detection_API

#️⃣#tip
🆔@IR_javascript

استفاده از AbortController برای لغو درخواست‌ها، رویدادهای DOM و وعده‌ها

گاهی اوقات با عملیاتی مواجه هستیم که لازم داریم علاوه‌بر مدیریت کردن زمان شروع، بتونیم زمان به پایان رسیدن اون رو هم مدیریت کنیم. برای مثال وقتی که یک عملیات در حال اجرا هست (مثلاً هنگام خوندن اطلاعات از سرور)، استثنائی رخ میده (مثلاً طولانی شدن بیش از حد انتظار برای دریافت پاسخ) و ما لازم داریم تا این عملیات رو قبل از اینکه به پایان برسه متوقف کنیم.

const controller = new AbortController();

document.getElementById("cancel").onclick = () => {
  controller.abort();
}

(async function () {
  const res  = await fetch('/upload', {
    // ...
    signal: controller.signal,
  });

  const data = await res.json();

  return data;
})();

🔗https://developer.mozilla.org/en-US/docs/Web/API/AbortController

🔗https://ditty.ir/posts/javascript-abortcontroller/nBwbX

#️⃣#tip
🆔@IR_javascript

اگه آهنگی مدام توی مغزتون play میشه، برای شما پیشنهاد ویژه‌ای برای جایگزینی دارم.

برگرفته از: @gizmiztel

#️⃣#comic
🆔@IR_javascript

نمونه ای از پیاده سازی تم های روشن و تاریک با استفاده از CSS خالص

<body>
  <label>
    <input id="dark" type="checkbox">
    Dark mode
  </label>
</body>

body {
  --fg: black;
  --bg: white;
  color: var(--fg);
  background-color: var(--bg);
}

body:has(#dark:checked) {
  --fg: white;
  --bg: black;
}

#️⃣#tip #css
🆔@IR_javascript

استفاده از JavaScript Intl API برای قالب‌بندی اعداد، تاریخ‌ها و رشته‌ها با توجه به موقعیت مکانی کاربر

‏Intl API قابلیتی برای قالب بندی اعداد، تاریخ ها و رشته ها با توجه به موقعیت مکانی کاربر که اپ را برای کاربران بین المللی قابل دسترسی تر می کند.

#️⃣#tip
🆔@IR_javascript

لحظه تحویل سال در حرم امام رضا (ع)

🔹لحظاتی زیبا از نواختن اولین نقاره در سال ۱۴۰۳ از نقاره‌خانه حرم مطهر رضوی

سال نو تون مبارک 💚💚💚

#️⃣#event
🆔@IR_javascript

با استفاده از دستور supports@ می توان پشتیبانی مرورگر را در مورد یک ویژگی بررسی کرد. یعنی آن ویژگی در مرورگر منظور کار می کند یا نه.

معمولا این کار توسط کتابخانه های جاوااسکریپت نظیر Modernizr انجام می شود اما این دستور این امکان را می دهد تا بتوان این آزمایش را در فایل CSS بدون نوشتن کد جاوااسکریپت انجام داد.

به عنوان مثال فرض کنید می خواهید از ماژول فلکس باکس استفاده کنید اما در عین حال می خواهید مراقب مرورگرهایی که این ماژول را پشتیبانی نمی کنند نیز باشید و برای آنها استایل مجزا بنویسید و راه حل دیگری برای آنها داشته باشید
🔗https://css-tricks.ir/reference/supports/

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

#️⃣#tip #css
🆔@IR_javascript

ایجاد انیمیشن در svg با استفاده از تگ های animateTransform و animate

در انیمیشن بالا از css , js استفاده نشده و با استفاده از المان های animateTransform و animate متحرک شده اند

🔗https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform

🔗https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

#️⃣#tip #html
🆔@IR_javascript

استفاده از AbortController برای لغو رویدادهای DOM

در مورد این روش چندین رویداد listener به طور همزمان با استفاده از AbortController حذف می شود.

🔗https://developer.mozilla.org/en-US/docs/Web/API/AbortController

🔗https://ditty.ir/posts/javascript-abortcontroller/nBwbX

#️⃣#tip
🆔@IR_javascript