Code Ready | Frontend

👩‍💻 Как сделать кастомный “Highlight” текста без JS! Когда выделяешь текст на сайте, браузер по умолчанию красит его голубым. Но можно полностью кастомизировать выделение.

::selection {
  background: #ffcc00;
  color: #111;
}

Это псевдоэлемент, который управляет стилем только выделенного текста. Работает со шрифтами, цветами и даже с прозрачностью. Делаем тему динамической:

[data-theme="dark"] ::selection {
  background: #444;
  color: #fff;
}

Можно стилизовать и выделение в input / textarea:

input::selection,
textarea::selection {
  background: #222;
  color: #0ff;
}

🔥 Из таких мелочей складывается ощущение продуманного интерфейса. 📣 Code Ready | #совет

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг. Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

❤️ The Odin Project — путь от новичка до веб-разработчика! Хочешь пройти путь от основ до уверенного разработчика без скучной теории и бесконечного поиска информации? The Odin Project - это платформа, где обучение строится на практике: создаёшь полноценные сайты и приложения, реально прокачиваешь навыки фронтенда, бэкенда и даже DevOps. 📌 Оставляю ссылочку: theodinproject.com 📣 Code Ready | #ресурсы

📱 Мини Аудио-Плеер! Привет! В этом гайде создаём компактный аудио-плеер с кнопкой воспроизведения и плавным прогресс-баром. Ключевые моменты:

• HTML: минимальная структура — кнопка Play/Pause и индикатор прогресса. • CSS: чистое оформление, мягкая тень и плавные переходы. • JS: логика воспроизведения, обновление прогресса и сброс состояния при окончании трека.

Такой мини-плеер отлично подойдёт для сайтов, блогов, портфолио или UI-демо, где важно добавить звук, сохранив лёгкость интерфейса. 📣 Code Ready | #гайд

Frontend VK Hub — как работают наши интерфейсы? Что делает интерфейсы VK быстрыми, удобными и устойчивыми под нагрузкой миллионов пользователей? Frontend VK Hub — это сообщество инженеров, которые создают и развивают пользовательские интерфейсы для ВКонтакте, VK Play, VK WorkSpace и других сервисов экосистемы. Мы делимся практическим опытом, рассказываем о подходах к производительности, внедрении современных фреймворков и всему, что связано с улучшением Developer Experience. Здесь можно найти инсайты от ведущих фронтенд-разработчиков, разборы реальных задач, новости индустрии и приглашения на мероприятия VK. И конечно, вакансии! Подписывайся!

📱 Navigation API — новая браузерная навигация без перезагрузки! Разбираем Web API, который пришел на смену History API. С его помощью можно программно управлять переходами, историей и состоянием приложения без перезагрузки страницы, перехватывать и обрабатывать навигации и реализовывать нативный SPA-роутинг. Поддержка: Chrome 102+, Edge 102+, Opera 88+; Safari и Firefox — либо отсутствует, либо экспериментальна. 📣 Code Ready | #шпора

👩‍💻 В сеть вывалилась гигантская куча курсов и книг от топовых IT‑школ Держи сотни гигабайт свежих уроков, и каждую неделю мы подкидываем ещё! • 1612 ГБ — DevOps • 1402 ГБ — Python • 1300 ГБ — C, C++ • 1815 ГБ — Frontend • 1515 ГБ — Backend • 898 ГБ — ИБ, Хакинг • 996 ГБ — Kotlin, Swift • 212 ГБ — JavaScript • 315 ГБ — Flutter • 820 ГБ — Go, PHP • 419 ГБ — Java, Rust • 648 ГБ — GameDev • 517 ГБ — Windows, Linux • 998 ГБ — Дизайн (UX/UI) • 617 ГБ — Нейросети (ML/RL) • 546 ГБ — БД (SQL & NoSQL) • 687 ГБ — Аналитика данных • 115 ГБ — QA-тестирование Подписывайся и не плати за то, что можно получить бесплатно

Определяем, активна ли вкладка! Когда вкладка не в фокусе, нет смысла выполнять тяжёлые операции — можно приостановить рендер, обновления данных или анимации. Для этого существует событие visibilitychange. Проверим текущую видимость:

console.log(document.visibilityState);
// Обычно "visible" или "hidden"

Реагируем на изменение состояния вкладки:

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    console.log("Вкладка неактивна — ставим процесс на паузу");
    stopRendering();
  } else {
    console.log("Вкладка снова активна — продолжаем работу");
    resumeRendering();
  }
});

Для удобства можно оформить в небольшую утилиту:

function onVisibilityChange(callback) {
  const handler = () => callback(!document.hidden);

Вызываем сразу, чтобы получить текущее состояние при инициализации:

  callback(!document.hidden);

  document.addEventListener("visibilitychange", handler);
  return () => document.removeEventListener("visibilitychange", handler);
}

Пример использования:

const unsubscribe = onVisibilityChange(isVisible => {
  console.log(`Вкладка ${isVisible ? "активна" : "скрыта"}`);
});

🔥 Такой подход лежит в основе умного управления активностью приложения — автоматической паузы фоновых процессов, оптимизации real-time обновлений и снижения нагрузки. 📣 Code Ready | #практика

👩‍💻 Мини-трюк с HTML + CSS: защищаем кнопку от повторного клика! В этом посте — простой, но полезный приём, который можно внедрить в любой сайт или форму без JavaScript-файлов. Как работает:

• При первом клике кнопка становится неактивной. • Больше её нажать нельзя — предотвращает повторную отправку формы. • Работает без JS-файлов, просто onclick.

Полезно при отправке форм и заказов — меньше багов, меньше повторов, больше контроля! 📣 Code Ready | #фишка

⚡️ Бесплатное обучение фронтенд-разработке с нуля: HTML/CSS, JavaScript, Next.js — с поддержкой от наставника Подойдёт и новичкам, и тем, у кого есть опыт во фронтенде На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 8 ноября стартует новое бесплтаное обучение, где он на практике поможет разобраться во фронтенде: новичкамм в HTML/CSS и JavaScript, а тем, кто с опытом — Next.js Всего сделаете три проекта: 💡 сайт услуг сборки ПК 💡 фронтенд для магазина на Next.js 💡 и ещё один проект полностью самостоятельно в формате соревнования с другими участниками Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё автор регулярно набирает людей в свою команду, проводит собесы и знает, почему прилетают отказы большинству джунов Что будет кроме уроков: Для новичков: пошаговый план изучения всего, что нужно современному фронтендеру с нуля какие проекты положить в портфолио Для тех, кто опытнее: какие проекты в портфолио повышают шансы на удачный собес тест знаний и навыков как искать заказы на фрилансе, когда биржи умерли Подписывайтесь, чтобы участвовать, осталось 39 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду ➡️Участвовать бесплатно

👩‍💻 Нужно быстро перевести текст, название переменной или комментарий? VS Code Google Translate — помогает перевести выделенный фрагмент, получить варианты перевода и даже использовать его для именования функций, переменных или комментариев. Особенно удобно, если работаешь с мультиязычными проектами или документацией. 📣 Code Ready | #vscode

📱 Интерактивное меню действий! Привет! В этом гайде создаём компактное меню, где при клике на кнопку + плавно появляются дополнительные действия — микрофон, редактирование и вложение. Ключевые моменты:

• HTML: простая структура — основная кнопка и панель с иконками. • CSS: плавное раскрытие и минималистичный стиль. • JS: переключение состояния через класс .open для открытия и закрытия меню.

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

📱 Сегодня разбираем File API — работа с файлами в браузере! Методы и объекты File, Blob, FormData и URL, с помощью которых можно получать и читать файлы, создавать собственные, формировать бинарные данные и генерировать временные ссылки. Используется для реализации загрузки, предпросмотра и генерации файлов на клиенте. 📣 Code Ready | #шпора

👩‍💻 CSS-фишка: анимированная батарейка без JS! Хотите добавить на сайт мини-анимацию заряда без скриптов? Этот приём наглядно показывает, как работают @keyframes и плавные переходы между цветами. Принцип работы:

• Контейнер батареи создаётся с помощью border и border-radius; • Внутри него элемент .charge, который заполняется снизу вверх; • Анимация @keyframes battery меняет высоту и цвет по мере «зарядки».

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

👩‍💻 Масштабируй весь интерфейс одной строкой! Все размеры заданы в rem? Значит, масштабировать дизайн можно одним изменением:

html {
  font-size: 62.5%; /* 1rem = 10px при базовых 16px */
}

Хочешь увеличить всю страницу на 20% — достаточно поменять одно значение:

html {
  font-size: 75%;
}

Всё: шрифты, отступы, кнопки, автоматически подстроятся, если их размеры заданы в rem:

h1 {
  font-size: 2.4rem; /* 24px при font-size:10px */
}

.button {
  padding: 1.2rem 2rem;
}

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

👩‍💻 Масштабируй весь интерфейс одной строкой! Все размеры заданы в rem? Значит, масштабировать дизайн можно одним изменением:

html {
  font-size: 62.5%; /* 1rem = 10px при базовых 16px */
}

Хочешь увеличить всю страницу на 20% — достаточно поменять одно значение:

html {
  font-size: 75%;
}

Всё: шрифты, отступы, кнопки, автоматически подстроятся, если их размеры заданы в rem:

h1 {
  font-size: 2.4rem; /* 24px при font-size:10px */
}

.button {
  padding: 1.2rem 2rem;
}

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

💙 Прими участие в CENTI CONF: Frontend Day — офлайн-конференции для frontend-разработчиков и Angular-специалистов! Когда: 21 ноября 2025, 10:30 (мск) Место: Москва, ул. Новодмитровская, д. 1 стр. 23 Формат: только офлайн Будет интересно, если ты: 🔹 занимаешься frontend-разработкой и хочешь узнать, как решают реальные задачи лучшие эксперты 🔹 развиваешься в Angular и ищешь нестандартные подходы в работе 🔹 хочешь прокачать карьеру без “подкруток” в резюме — с реальными кейсами и личным опытом. Что тебя ждёт: ✴️ Выступления ведущих специалистов и практиков из индустрии ✴️ Разбор реальных кейсов и живое обсуждение со спикерами ✴️ Инсайты о том, как развиваться и выделяться в мире frontend-разработки ✴️ Afterparty с нетворкингом и неформальным общением Регистрация открыта! ➡️ Успей до 21 ноября по ссылке.

Определяем системную тему пользователя! Современные браузеры умеют определять системные предпочтения пользователя — например, светлую или тёмную тему. Это позволяет интерфейсу автоматически адаптироваться под окружение без лишних настроек. Проверим текущие настройки:

const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
console.log(isDark ? "🌙 Тёмная тема" : "☀️ Светлая тема");

Реагируем на изменение темы:

const mq = window.matchMedia("(prefers-color-scheme: dark)");

mq.addEventListener("change", e => {
  document.body.dataset.theme = e.matches ? "dark" : "light";
  console.log(`🎨 Тема: ${e.matches ? "dark" : "light"}`);
});

И сразу применяем тему при загрузке:

document.body.dataset.theme = isDark ? "dark" : "light";

🔥 Такой пример полезен для практики работы с браузерными API, реакцией на системные события и динамическим управлением интерфейсом. 📣 Code Ready | #практика