Code Ready | Frontend

👩‍💻 Масштабируй весь интерфейс одной строкой! Все размеры заданы в 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 | #практика

⚡️ Запускаем крупный розыгрыш призов, где можно выиграть iPhone 17, игровые наушники, клавиатуру и мышь! Без лишних слов, условия: 1. Подписка на: — бизнестрендс — Технотренды — Блумберг 2. Нажать кнопку «Участвовать» снизу Итоги будут опубликованы 15 ноября в 18:00 на наших каналах, желаем удачи!

👩‍💻 Хочешь держать все проекты под рукой? Project Manager — позволяет переключаться между разными проектами внутри одного экземпляра VS Code. Просто откройте боковую панель и выберите нужный. Можно группировать, давать имена, закреплять самые частые, всё максимально просто и быстро. 📣 Code Ready | #vscode

📱 History API — управление историей и адресной строкой! Разбираем методы history и location, с помощью которых можно изменять URL без перезагрузки страницы, добавлять и заменять состояния, перемещаться по истории и отслеживать переходы. Используется для реализации маршрутизации, клиентской навигации и синхронизации состояния приложения с адресной строкой в SPA и веб-интерфейсах. 📣 Code Ready | #шпора

Ваша история в IT начинается в Авито 🚀 Хотите расти в разработке — приходите на оплачиваемую стажировку в Авито. Мы ищем будущих специалистов в направлениях Frontend, Backend, QA и Android. Вы будете работать над продуктами, которыми ежедневно пользуются миллионы людей, и прокачивать навыки с помощью: ➡️ наставника — подскажет, как мыслить в процессе решения задач; ➡️ комьюнити стажёров — всегда рядом, чтобы обсудить задачи и поддержать; ➡️ корпоративных курсов, библиотек и баз знаний — всё, чтобы развиваться быстрее. Выберите два направления — основное и запасное. Если не получится попасть в первое, сможете пройти отбор на второе при наличии мест. Условия: ➡️ зарплата и корпоративный ноутбук, ➡️ формат — офис, удалёнка или гибрид, ➡️ от 25 часов в неделю, ➡️ продолжительность — 9 месяцев, ➡️ компенсация питания, консультации с психологами и юристами, ➡️ после стажировки — возможность остаться в команде, если покажите крутой результат. 📌 Регистрация открыта до 12 ноября. Подать заявку можно по ссылке.

👩‍💻 Как сделать адаптивные блоки без кучи media-запросов! CSS уже умеет подстраивать размеры элементов без @media. Для этого есть инструмент clamp():

.title {
  font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem);
}

clamp(min, preferred, max) задаёт диапазон: шрифт будет плавно меняться вместе с шириной экрана, но никогда не станет меньше 1rem и больше 2.5rem. Работает для свойств, где можно задавать числовые значения:

.container {
  padding: clamp(1rem, 5vw, 3rem);
}

Для ещё большей гибкости можно использовать контейнерные единицы (cqw, @container), они подстраиваются под ширину контейнера, а не всего окна. 📣 Code Ready | #совет

🏆 Победители номинации «Лучшие IT-каналы» Мы собрали каналы, которые доказали: учиться можно интересно, эффективно и бесплатно. Здесь — тысячи реальных вопросов с собесов, курсов и материалов для тех, кто стремится стать профессионалом. Выбирай направление: 👩‍💻 C# 🤖 DS/ML 👩‍💻 C/C++ 😀 1C 👩‍💻 Java 👩‍💻 Python 🖥 PHP 🖥 Frontend 👣 Rust 👣 Golang 👩‍💻 Node.js 💻 DevOps 👩‍💻 QA 👩‍💻 Android 🖥 BA/SA 👩‍💻 Game Dev 👩‍💻 iOS 👨‍💻 Вакансии База обновляется еженедельно — всегда актуальные вопросы с последних собеседований, курсы и материалы. 📌 Подпишись, чтобы не потерять!

❤️ Platform — реальный проект для прокачки фронтенда! Это не демо и не учебный «туду-лист», а полноценная платформа с продуманной архитектурой и современным стеком: React, TypeScript, Redux Toolkit, React Hook Form, FSD. Можно изучить каждую страницу, каждый компонент, посмотреть, как устроен код в боевом проекте, и забрать себе лучшие практики!

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

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

• HTML: textarea и кнопка внутри одного контейнера. • CSS: позиционирование кнопки, плавное появление, аккуратный дизайн. • JS: отслеживание ввода, показ/скрытие кнопки и очистка текста.

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

Миллионер-айтишник в 24 года? Знакомьтесь — это Влад, ему 24, и он программист без высшего образования.. IT и программирование — это ниша, которая никогда не умрет и в которой нет потолка ! ~ Думаешь это сложно? Я и тебя научу зарабатывать в IT и растить себя как высококлассного специалиста мирового уровня! Не веришь? Забирай бесплатные материалы в моем канале 👇 https://t.me/+y8aXUjB1nZAwZTI6

☕️ Codecademy — полезная интерактивная площадка для изучения JS! На сайте можно учиться прямо в браузере, без установки среды и лишней теории. Уроки состоят из коротких заданий с кодом: пишешь, видишь результат, работаешь над ошибками и двигаешься дальше. Постепенно проходишь весь путь, от основ синтаксиса до работы с DOM и API. 📌 Оставляю ссылочку: codecademy.com 📣 Code Ready | #ресурсы

👩‍💻 CSS-фишка: 3D-карточка при наведении! Хотите добавить глубины и реализма элементам интерфейса? Этот приём создаёт эффект объёмной карточки, которая будто «откликается» на движение курсора. Как это работает:

• perspective и transform-style: preserve-3d создают трёхмерную сцену. • При :hover карточка слегка вращается и получает мягкую тень. • translateZ() приподнимает текст, усиливая ощущение глубины.

Такой приём делает интерфейс динамичнее - отлично подходит для карточек товаров, профилей и превью статей. 📣 Code Ready | #фишка

Да, это конкурс Двоичного кота! Мы знаем: в мире нулей и единиц важен апгрейд, а не багфиксы. Поэтому вместо банальных розыгрышей выдаём железо, которое прокачает ваш дом. 🎁 Призы: 1 место — Яндекс Станция Макс с Алисой на YandexGPT 2 место — Яндекс Станция Миди с Алисой на YandexGPT 3 место — Яндекс Станция Мини с часами с Алисой на YandexGPT Чтобы залогиниться в конкурсе: 1. Подпишитесь на канал Двоичный кот. 2. Нажмите кнопку «Хочу колонку» под этим постом. 3. Ждите релиз итогов 31.10.2025 в 16:00. Мы верим: случайный генератор выберет вас так же элегантно, как код компилируется без ошибок. А пока тестируйте наш контент и оставайтесь в онлайне. P.S. Лицензионное соглашение (правила конкурса) — тут.

Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает? Homo Manifestans — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам 🤗 ✓ Как научиться отвлекаться от работы и отдыхать? ✓ Как совместить кучу рабочих задач и время с семьей? ✓ Как справиться с прокрастинацией? ✓ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни! Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии: 👉 https://t.me/+P5iLY5s4HYliOTMy