Code Ready | Frontend

Митапы — это, конечно, круто и полезно. Но что может быть лучше открытой дискуссии с коллегами о наболевшем? ☑️ AvitoTech тут зовёт на классный ивент для фронтендеров. Обещают полтора часа дискуссий на самые разные темы: от роста фронтенд-инженера в тимлида до ванильного JS. И вишенка на торте — афтерпати на веранде ☄️ Всё пройдёт вечером 19 мая, так что погода не должна подкачать. Регистрация, кстати, по ссылке.

✍️ Web Dev Шпаргалка — вся веб-разработка в одном месте! Удобный справочник, где собраны ключевые аспекты веб-разработки, а также JS: базовый синтаксис, работа с DOM, события, асинхронность, взаимодействие с API. Плюс затронуты важные вещи из Node.js, сборка, инструменты и общая архитектура. Всё подано в сжатом формате, чтобы быстро освежить знания. 📌 Оставляю ссылочку: make-website.ru 📣 Code Ready | #сайт

👩‍💻 Скрываем и разворачиваем длинный текст без JS! В интерфейсах с карточками и списками важно ограничивать объём текста, чтобы сохранить аккуратную сетку, но при этом давать пользователю возможность раскрыть полный контент без перегрузки UI. Как работает:

• -webkit-line-clamp ограничивает количество строк; • checkbox используется как источник состояния; • селекторы управляют отображением текста; • кнопка синхронизируется с состоянием.

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

⚠️ Бесплатный VPN — не бесплатный Они могут логировать трафик и продавать твои данные 🔒 У нас: • без логов • стабильное соединение без обрывов • быстрые сервера в разных странах 🌍 🚀 Подключение за 1 минуту 👉 Открыть впн @safenetvpn01_bot

👩‍💻 Важно держать код предсказуемым и сразу видеть ошибки? ESLint — это не просто подсветка ошибок, а инструмент анализа кода. Он находит потенциальные баги, антипаттерны и несоответствие правилам проекта, а также умеет автоматически исправлять часть проблем. Работает через конфиги и плагины (React, Next.js и др.), помогает держать код единообразным. 📣 Code Ready | #vscode

📂 Шпаргалка для CSS Grid! CSS Grid Layout — представляет собой двумерную систему сеток в CSS. Это пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки. 📣 Code Ready | #ресурс

Почему ломается scroll внутри flex? Очень частый баг: делаешь колонку с overflow: auto, но скролл не появляется, и блок просто вылезает за пределы контейнера.

.layout {
  display: flex;
  flex-direction: column;
}

.content {
  overflow: auto;
}

Кажется, всё корректно, но flex-элемент по умолчанию не хочет сжиматься по высоте. Решение — явно разрешить это:

.content {
  min-height: 0;
}

Теперь блок может уменьшаться и скролл начинает работать как ожидается:

.content {
  min-height: 0;
  overflow: auto;
}

Если scroll не работает во flex — почти всегда не хватает именно min-height: 0. 🔥 Это полезно для для чатов, таблиц, sidebar и любых вложенных flex-контейнеров. 📣 Code Ready | #совет

Совет на всю жизнь — начните изучать вайбкодинг. Нейронки уже собирают проекты от идеи до релиза, пишут код, находят и исправляют баги лучше команды айтишников. Это сэкономит вам десятки часов работы. А чтобы научиться вайбкодить и не совершать ошибки - читайте канал AI-архитектор, где есть: ➖Инструкции по Antigravity и n8n. ➖Связки, которые приносят от 100 000 ₽ за проект ➖Реальный опыт программиста и вайбкодера, который настраивает автоматизацию ИИ для гос. компаний. Подписывайтесь и смотрите в закрепе, как за 2 дня собрать ИИ-автоматизацию без единой строчки кода: https://t.me/+eBc7ivvcY34xZTli

Нужно быстро привести CSV-файл к читаемому виду? CSV to Table — позволяет отобразить содержимое CSV как таблицу прямо в VS Code. Данные выравниваются по столбцам, становятся наглядными и удобными для анализа без открытия сторонних инструментов. Полезно при работе с выгрузками, логами и любыми табличными данными. 📣 Code Ready | #vscode

👩‍💻 Фокус элементов без JavaScript! В интерфейсах с линейными списками важно быстро направлять внимание пользователя. Один из приёмов — приглушать все элементы, кроме активного. Как работает:

• контейнер управляет состоянием через :hover; • все элементы получают сниженный opacity; • активный элемент переопределяет это состояние; • transform усиливает ощущение глубины.

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

Самый ценный навык в 2026 — ВАЙБ-КОДИНГ! Привет. Меня зовут Кирилл. Я создаю топовые подборки с уроками по AI и вайбкодингу: — 60+ промптов для дебага: поиск ошибок, оптимизация кода — 40 бесплатных курсов по вайбкодингу — 150 гайдов, как использовать ChatGPT, Claude Code, Antigravity, Cursor, Perplexity, Lovable — 100 готовых модулей: авторизация, админки, логирование, тесты, i18n — 37 MCP серверов: дизайн, разработка, Тесты/QA, деплой Всего 10 минут в день на канале и ты научишься создавать проекты любой сложности. Подписывайся, чтобы получать подборки каждую неделю!

🐱 Devhints CSS — компактная шпаргалка по CSS в формате “всё на одной странице”! Сайт где собраны основные свойства, селекторы и приёмы CSS с примерами кода в максимально сжатом виде. Формат позволяет быстро находить нужные конструкции и сразу применять их. Подходит как быстрый справочник во время разработки. 📌 Оставляю ссылочку: devhints.io 📣 Code Ready | #сайт

Почему hover ломает UX на мобильных и как это исправить? На тач-устройствах :hover ведёт себя странно: может залипать, срабатывать после тапа или вообще ломать визуальные состояния. Это особенно заметно в карточках, меню и кнопках. Обычно стили пишут без условий:

.button:hover {
  background: #000;
}

И в итоге на мобильных интерфейс начинает вести себя непредсказуемо. Есть нативный способ разделить поведение устройств:

@media (hover: hover) {
  .button:hover {
    background: #000;
  }
}

Теперь hover-эффекты работают только на устройствах, где реально есть курсор. Можно отдельно настроить поведение для тач-устройств:

@media (hover: none) {
  .button:active {
    background: #000;
  }
}

🔥 Это мелочь, но она резко улучшает UX и избавляет от странных багов на мобильных, интерфейс становится предсказуемым и логичным. 📣 Code Ready | #совет

ПАРУ СЛОВ О ChaGPT 5.5 (Spud) Последние дни активно тестирую новую модель. Если коротко:

— Плюсы: кодинг, миллион токенов контекста и агентский режим — Минусы: логические ошибки, нужно присматривать в сложных задачах

Больше всего зацепила именно работа агента. Решил проверить его на своей «боли» — навел порядок в подписках Telegram. В последнее время лента превратилась в бесконечный шум с постами об одном и том же. Дал задачу нейронке: просмотреть мои подписки, убрать лишнее и оставить только тех, кто пишет про реальный опыт, автоматизацию и внедрение ИИ в работу. Модель сама просканировала каналы и собрала отличную подборку. Результат получился реально адекватным, поэтому делюсь этой подборкой. Авторы, которые каждый день пишут полезные об IT и AI доступно и интересно. Подписывайтесь на лучших Tech-специалистов https://t.me/addlist/81ejyxxH4rM0ZDIy

😍 Полезную статью нашёл на Хабре: «Flex vs Grid: объяснение разницы на практике»! В этой статье: • На примерах показывается, в каких задачах Flexbox удобнее, а где Grid даёт более чистую и масштабируемую архитектуру; • Разбираются типичные кейсы верстки, с кодом и объяснением поведения каждого подхода; • Объясняется ключевая разница: Flex как инструмент для потокового выравнивания и Grid как система для построения структуры интерфейса.

🔊 Продолжайте читать на Habr!

📣 Code Ready | #статья

Emmet Cheat Sheet — сайт-шпаргалка для Emmet. Здесь собраны все аббревиатуры и формулы, при написании которых раскрываются большие куски кода, а это очень ускоряет разработку сайта. 📌 Ссылочка: docs.emmet.io/cheat-sheet 📣 Code Ready | #ресурс

👩‍💻 Можно ли нажать на элемент пальцем? Что-то вроде тач-событий в JavaScript. Свойство touch-action управляет взаимодействием с сенсорным экраном и напоминает более распространённое свойство pointer-events, которое регулирует взаимодействие мышкой. Примеры использования:

• none — запрещает все типы взаимодействий. • auto — разрешает все типы взаимодействия. • manipulation — элемент можно сдвигать и зумить. • pan-down — элемент можно смещать только если начать движение снизу вверх. • pan-up — элемент можно смещать только если начать движение сверху вниз. • pinch-zoom — элемент можно зазумить щипком.

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

Совет на 2026 год — переходите в ML. Пока обычные разрабы конкурируют с ИИ-копилотами, ML-инженеры эти самые нейронки создают. В эпоху нейростей это самые востребованые люди в мире программирования. Зарплаты мидлов начинаются от 250 000 ₽, а у сеньоров в BigTech доходят до 700 000 ₽. А чтобы освоить его всего за 4 месяца без лишней суеты — изучите канал Артема Алехина. Его бэкграунд: Руководитель команды в Сбере, валютная удаленка. К 22 годам вышел на доход 1 000 000+ ₽ в месяц. На канале вы найдёте: — Всё про самые востребованные стеки(Python, ИИ-агенты, NLP) и почему математика — это не страшно, если учить только нужное. — Как оформить резюме, чтобы оно пролетало через любые LLM-фильтры и ATS-системы прямо к тимлидам. — Скрипты переговоров, которые помогли его ученикам прыгнуть с 0 до 360к всего за 8 месяцев. Во времена острой нехватки ML-разработчиков, это лучшее время, чтобы перекатиться. Переходи и изучай: https://t.me/+qG_ihzUEkHJlOWVi

👩‍💻 Полезные горячие клавиши VSCode • Ctrl + Shift + K — Удаляет текущую строку целиком. • Shift + Alt + F — отформатировать листинг. Быстро выровняет код, чтобы он стал более читаемым, понятным и красивым. • Ctrl + D — множественное редактирование. Изменит одинаковый код сразу в нескольких местах. 📣 Code Ready | #vscode

classList: управление классами без ручных операций со строками! Работа с классами через className — это строка: конкатенация, парсинг, риск случайно перезаписать существующие значения. Element.classList решает это на уровне API и даёт удобный способ работать с классами как с отдельными токенами. classList возвращает DOMTokenList — набор уникальных значений, где каждый класс обрабатывается независимо. Базовый сценарий — добавить или убрать класс:

const el = document.querySelector('.card');

el.classList.add('active');
el.classList.remove('hidden');

В реальной логике часто нужно проверить текущее состояние элемента. Для этого есть contains:

if (el.classList.contains('active')) {
  console.log('already active');
}

Очень частый кейс в UI — переключение состояния. Для этого используется toggle:

el.classList.toggle('open');

Если нужно не просто переключить, а задать конкретное состояние — можно передать второй аргумент:

el.classList.toggle('open', true);  // добавит
el.classList.toggle('open', false); // удалит

API позволяет работать сразу с несколькими классами, без лишних вызовов:

el.classList.add('visible', 'animated');
el.classList.remove('small', 'disabled');

На практике classList часто используется вместе с делегированием событий:

document.addEventListener('click', (e) => {
  const button = e.target.closest('[data-toggle]');
  if (!button) return;

  const targetSelector = button.dataset.toggle;
  const target = document.querySelector(targetSelector);

  if (!target) return;

  target.classList.toggle('active');
});

Для замены одного класса на другой есть отдельный метод:

el.classList.replace('btn-primary', 'btn-secondary');

Если исходного класса нет — метод просто ничего не сделает и вернёт false. Так как classList — это итерируемая коллекция, по ней можно пройтись циклом:

for (const className of el.classList) {
  console.log(className);
}

Важно учитывать, что classList не допускает дубликатов — повторное добавление класса будет проигнорировано. В отличие от него, className работает как обычная строка:

el.className = 'new-class';

Такое присваивание полностью перезапишет все классы элемента, что легко приводит к побочным эффектам. classList позволяет изменять их точечно и безопаснее. 🔥 Под капотом classList синхронизирован с атрибутом class, поэтому любые изменения сразу отражаются в DOM. classList — базовый инструмент для управления состояниями интерфейса. 📣 Code Ready | #практика