☕️ Чуть не забыл, знали, что каждый 256-й день в году отмечается День программиста?

И как раз сегодня — этот самый день!

Кстати, 256 не с проста:

Это 2 в степени 8, то есть максимальное количество значений, которые может хранить один байт — основа работы компьютеров.

В невисокосный год праздник выпадает на 13 сентября, а в високосный — на 12-е.

Так что, поздравляю всех программистов! ❤️

😎 YeaHub — база знаний по всем IT-направлениям!

Здесь собрана огромная база реальных вопросов по бэкенду, DevOps, Data Science и другим направлениям. Всё структурировано по темам и приближено к формату собеседований в компаниях. Это именно тот ресурс, который нужно держать под рукой!

📌 Оставляю ссылочку: yeahub.ru

📣 Code Ready | #ресурсы

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

Нативный 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("Не забывай пить воду и делать перерывы");
  }
});

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

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

👩‍💻 Нужно объяснить проект коллеге или самому не потеряться в большом коде?

CodeTour — плагин, который позволяет создавать пошаговые «туры» по коду прямо в VS Code. Можно выделять строки, оставлять комментарии и объединять их в последовательность шагов.

📣 Code Ready | #vscode

👩‍💻 Выделяем фрагмент текста «маркером» с помощью тега mark!

Тег <mark> выделяет или подсвечивает важный фрагмент текста. По умолчанию браузеры добавляют жёлтый фоновый цвет #ffff00 (yellow), похожий на выделение канцелярским маркером.

Где полезен:

• При поисковой подсветке слов на странице;

• Для акцента на ключевых терминах или предупреждениях;

• В обучающих текстах и документации.

Можно реализовать текстовый поиск, выделяя цветом найденные фрагменты.

📣 Code Ready | #атрибут

Дебаунс событий для плавного интерфейса!

Частые события resize или input могут перегружать страницу и тормозить анимации. Решение — дебаунс с правильными опциями.

Проблемный код:

window.addEventListener('resize', () => {
  console.log('Width:', window.innerWidth);
  updateLayout();
});

Проблема: при быстром resize — десятки вызовов в секунду.

Улучшенный дебаунсер:

function debounce(fn, delay = 200) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

Применяем с cleanup:

const debouncedResize = debounce(() => {
  console.log('Debounced width:', window.innerWidth);
}, 300);

window.addEventListener('resize', debouncedResize);

🔥 В следующей части рассмотрим почему для scroll дебаунс не работает и как throttle решает эту проблему для плавных анимаций!

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

☕️ HTML Academy — идеальный старт для тех, кто хочет стать фронтенд-разработчиком!

Интерактивные курсы по HTML, CSS, JavaScript и React, от простых тренажёров до профессиональных программ. Отлично подходит для новичков и тех, кто хочет прокачать свои навыки.

📌 Оставляю ссылочку: htmlacademy.ru

📣 Code Ready | #ресурсы