Code Ready | Frontend

Throttle vs Debounce: выбираем инструмент! Функция срабатывает только после остановки прокрутки на 300ms. Пользователь видит скачкообразные обновления интерфейса:

const debouncedScroll = debounce(() => {
  console.log('Scroll handled');
}, 300);

window.addEventListener('scroll', debouncedScroll);

Решение — throttle:

function throttle(fn, limit = 16) {
  let inThrottle;
  return (...args) => {
    if (!inThrottle) {
      fn(...args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

Функция выполняется максимум раз в 16ms, обеспечивая плавные 60 FPS без перегрузки браузера.

const throttledScroll = throttle(() => {
  console.log('Scroll handled');
}, 16); // 16ms = 60 FPS

window.addEventListener('scroll', throttledScroll, { passive: true });

🔥 Поэтому, Throttle — для частых действий (scroll, resize). Debounce — для финального результата (поиск, валидация). 📣 Code Ready | #практика

⚡️ Бесплатное обучение фронтенд-разработке с нуля до Angular и React — с поддержкой от наставника Опыт в программировании не нужен. На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 19 сентября стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать два фреймворка — Angular и React Вот план учебных спринтов: 💡 с 19 по 23 сентября свой киносайт от вёрстки до Angular 💡 а с 25 сентября своя доска объявлений от вёрстки до React Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду. Поделится способами посика клиентов с поомщью ИИ. Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией Подписывайтесь, чтобы участвовать, осталось 42 места Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 🟠Участвовать бесплатно

Metanit — это подробный русскоязычный учебник по JavaScript с объяснениями и примерами. Подходит как для новичков, так и для тех, кто хочет углубиться в тонкости языка. 📌 Оставляю ссылочку: metanit.com 📣 Code Ready | #ресурсы

👩‍💻 Можно ли визуально показать, что на ссылку или кнопку прямо сейчас жмут? Псевдокласс :active позволяет задать стили для элемента, с которым происходит взаимодействие прямо сейчас. Покажу примеры:

• color — меняет цвет текста; • background — подсвечивает фон; • transform — делает анимацию «прожатия»; • box-shadow — добавляет эффект клика.

Фишка в том, что :active работает только во время удержания. Отпустил - элемент возвращается к обычному стилю. 📣 Code Ready | #свойсво

Как легко прокачать навыки верстки и найти работу? Присоединяйся к каналам опытного верстальщика: 1. Вёрстка сайтов | HTML, CSS, JS — здесь собраны бесплатные, структурированные уроки и различные материалы по HTML, CSS, JS, а также советы по заработку на фрилансе. 2. Работа — вёрстка и фронтенд — канал с лучшими вакансиями и проектами с фриланса по вёрстке и фронтенду Научись и зарабатывай на верстке!

📱 Разбираем методы работы с генераторами! В этой шпаргалке собраны основные приёмы для создания генераторов, возврата значений, перебора, делегирования и управления выполнением. Они применяются при работе с ленивыми коллекциями, потоками данных и сложными итерациями в приложениях. 📣 Code Ready | #шпора

Верстаешь? Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке: 1. Ты сверстаешь веб-сайт на HTML + CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке от эксперта; 6. Научишься использовать ChatGPT и Giga во Frontend-разработке; 7. Узнаешь 9 способов найти первый заказ даже без опыта. А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 12-летним стажем – Романа Чернова. 👉 Проскочить на интенсив бесплатно Начинаем уже завтра. 🔥 С нас обучение, практика и помощь с выходом на фриланс или собеседованием.

☕️ HTML Academy — идеальный старт для тех, кто хочет стать фронтенд-разработчиком! Интерактивные курсы по HTML, CSS, JavaScript и React, от простых тренажёров до профессиональных программ. Отлично подходит для новичков и тех, кто хочет прокачать свои навыки. 📌 Оставляю ссылочку: htmlacademy.ru 📣 Code Ready | #ресурсы

📱 Emoji Reaction Bar как в соцсетях! Привет! В этом гайде создаём упрощенную интерактивную панель эмодзи-реакций с счетчиками, как в социальных сетях. Ключевые моменты:

• HTML: простая структура с эмодзи-кнопками и счетчиками. • CSS: минимальные стили с hover-эффектами и переходами. • JS: базовая логика кликов и подсчета реакций без сложных анимаций.

Подходит для социальных платформ, интерактивных интерфейсов, блогов и UI с пользовательскими реакциями. 📣 Code Ready | #гайд

👩‍💻 Syntoks — это новая текстовая соцсеть, в основе которой — чаты и личные переписки. Мы решаем проблему монетизации текстового контента, который сегодня практически никак не монетизируется. С помощью Web3-механик чаты превращаются в медиа-проекты нового уровня. Сейчас мы запускаем в Телеграм комьюнити Syntoks Open Dev — место, где можно будет разбирать реальные задачи проекта. Формат участия: — публикуем задачи по фронту (Flutter, Dart) и бэку (Java); — лучшие решения попадают в проект; — авторы получают оплату. 🔥 Присоединяйтесь! https://t.me/+kLlLEjUjnuw2NTcy

Дебаунс событий для плавного интерфейса! Частые события 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 | #практика

👩‍💻 Выделяем фрагмент текста «маркером» с помощью тега mark! Тег <mark> выделяет или подсвечивает важный фрагмент текста. По умолчанию браузеры добавляют жёлтый фоновый цвет #ffff00 (yellow), похожий на выделение канцелярским маркером. Где полезен:

• При поисковой подсветке слов на странице; • Для акцента на ключевых терминах или предупреждениях; • В обучающих текстах и документации.

Можно реализовать текстовый поиск, выделяя цветом найденные фрагменты. 📣 Code Ready | #атрибут

➡Топ-каналы с инструментами для веб-разработчиков и программистов: 🖥 https://t.me/seniorFront - решай задачи, читай статьи и расти как фронтендер 🖥 https://t.me/frontendInterview - прокачай свои знания для собеседований 👩‍💻 https://t.me/sWebDev - находи лучшие библиотеки для работы 👩‍💻 https://t.me/web_craft - вдохновляйся и улучшай навыки 👩‍💻 https://t.me/python_practics - учи Python легко и эффективно Подписывайся и развивайся с нами ✅

👩‍💻 Нужно объяснить проект коллеге или самому не потеряться в большом коде? CodeTour — плагин, который позволяет создавать пошаговые «туры» по коду прямо в VS Code. Можно выделять строки, оставлять комментарии и объединять их в последовательность шагов. 📣 Code 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("Не забывай пить воду и делать перерывы");
  }
});

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

«О безопасности подумаем позже» — так рассуждают многие специалисты в погоне за быстрым релизом. Но такая спешка создает слабые места в коде, которые рано или поздно приводят к инцидентам. 18 сентября на техническом вебинаре «Когда разработчику нужно задуматься об ИБ? Observability безопасности» обсудим: 🛡 Ред флаги в работе программистов.  🛡 Обеспечение безопасности на каждом этапе SDLC. 🛡 План действий для непосредственного первого звена в цикле разработки. Также покажем, как платформа GMonit позволяет выстроить непрерывный процесс мониторинга приложений и находить уязвимости. ⏰ Время встречи: 17:00–18:00 (Мск) 🔗 Регистрация по ссылке!

😎 YeaHub — база знаний по всем IT-направлениям! Здесь собрана огромная база реальных вопросов по бэкенду, DevOps, Data Science и другим направлениям. Всё структурировано по темам и приближено к формату собеседований в компаниях. Это именно тот ресурс, который нужно держать под рукой! 📌 Оставляю ссылочку: yeahub.ru 📣 Code Ready | #ресурсы

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

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

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