👩‍💻 Знал ли ты, что можно открыть браузер прямо в VS Code?

Даже скачивать ничего не нужно, ведь всё уже встроено в редактор. Как и что можно настроить показано на видео выше от Miguel Ángel Durán

📣 JS Ready | #vscode

Озвучка текста на странице!

Нативный JavaScript умеет читать вслух любой текст на странице, это часть Web Speech API.

Начнём с базового: озвучим строку с помощью SpeechSynthesisUtterance.

const msg = new SpeechSynthesisUtterance("Привет, мир");
speechSynthesis.speak(msg);

Добавим функцию, чтобы переиспользовать и задавать любой текст:

function speak(text) {
  const msg = new SpeechSynthesisUtterance(text);
  speechSynthesis.speak(msg);
}

Теперь можно вызывать так:

speak("Текущая температура: 22 градуса и ясно");

Далее прикрутим к горячей клавише. Пусть Ctrl + R озвучит рандомный совет:

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "r") {
    speak("Не забывай пить воду и делать перерывы");
  }
});

🔥 Голосовой ассистент в одну строчку готов. Можно подключать к уведомлениям, ботам, виджетам — или просто добавить в пасхалку на сайте.

📣 JS Ready | #практика

Фильтруем объекты по ключу и значению!

В разработке часто нужно фильтровать списки объектов по динамическим критериям. Это помогает отбирать нужные данные из API, работать с таблицами и списками.

Например, есть массив пользователей с разными статусами:

const data = [
  { id: 1, status: "active" },
  { id: 2, status: "inactive" },
  { id: 3, status: "active" },
];

Напишем универсальную функцию, которая принимает массив, ключ и искомое значение. Она вернёт только те объекты, где значение поля совпадает:

function filterByKey(arr, key, value) {
  return arr.filter(item => item[key] === value);
}

Используем функцию для получения только активных пользователей:

const active = filterByKey(data, "status", "active");
console.log(active); // объекты со статусом "active"

🔥 Такой приём пригодится в любой работе с данными — валидации, отображении и логике.

📣 JS Ready | #практика