Code Ready | Frontend

Как сделать адаптивную сетку без media queries? Многие пишут отдельные breakpoint для каждой ширины экрана. В итоге CSS разрастается, а grid становится сложно поддерживать:

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Но CSS Grid умеет адаптироваться вообще без media queries:

.grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

minmax(250px, 1fr) говорит: колонка не может быть меньше 250px, но может растягиваться. auto-fit автоматически переносит элементы на новую строку, когда места становится мало.

.card {
  min-width: 0;
}

А min-width: 0 дополнительно защищает grid от переполнений длинным контентом. 🔥 В итоге сетка сама решает, сколько колонок поместится в контейнер. 📣 Code Ready | #совет

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

👩‍💻 Хочется сразу видеть, какой цвет используется в коде? Colorize — подсвечивает все цветовые значения прямо в редакторе: HEX, RGB, HSL, CSS-переменные и другие форматы. Вместо набора символов ты сразу видишь реальный цвет рядом с кодом. Удобно при работе с UI, темами и большими CSS/SCSS-файлами, где важно быстро ориентироваться в палитре проекта. 📣 Code Ready | #vscode

👩‍💻 Эффект собирающихся карточек без JS! В интерфейсах важно удерживать внимание пользователя во время прокрутки. Один из приёмов — заставить карточки наслаиваться друг на друга вместо обычного скролла. Как работает:

• position: sticky фиксирует карточки во время прокрутки; • разные значения top создают ступенчатое прилипание; • margin-bottom формирует пространство для stacking; • тени усиливают ощущение глубины и слоёв.

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

Состояние, которое легко спутать с ленью Становится сложнее делать дела, меньше эмоций, больше "потом". И в какой-то момент жизнь превращается в автопилот, все через силу. Так противно, если честно, когда даже отдых не помогает😓 Советую посмотреть 3 коротких видео, чтобы понять, что с тобой происходит, почему и как из этого выбраться: https://t.me/Manifestans Хочется же жить и радоваться, правда? Это куда приятнее, чем существовать, как сомнамбула. Действуй!

👩‍💻 Хватит учить только синтаксис, начинай делать реальные проекты! Python Ready — авторский канал, где Python перестаёт быть только теорией и становится рабочим инструментом. Мини-проекты, боты, советы, разборы задач, гайды и шпаргалки для каждого программиста. 🔥 Советую подписаться: @python_ready

🐱 Frontend Information — база знаний по фронтенду в одном репозитории! Это сборник материалов для фронтенд-разработчика: от HTML/CSS и БЭМ до JavaScript, React, Redux и архитектуры приложений. Внутри есть и шпаргалки, и статьи, и курсы — всё разложено по темам и уровням. Получается готовая дорожная карта для фронтендера: можно идти от основ вёрстки до сложных SPA.

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

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

Разбираем как не словить утечку памяти на обработчиках событий! Одна из частых причин утечек — обработчик повесили, а снять забыли. Особенно это неприятно, когда событие висит не на локальном элементе, а на чём-то долгоживущем: window, document, глобальный event bus и т.п.

function mount() {
  window.addEventListener('resize', onResize);
}

function unmount() {
  // забыли снять обработчик
}

Компонента уже нет, а onResize всё ещё вызывается. Плюс callback может держать в замыкании старое состояние, DOM-ноды, данные — и GC не сможет это нормально прибрать. Правильнее сразу закладывать cleanup:

function mount() {
  window.addEventListener('resize', onResize);
}

function unmount() {
  window.removeEventListener('resize', onResize);
}

Главное — снимать нужно ту же самую функцию. Вот так не сработает:

el.addEventListener('click', () => doSomething());
el.removeEventListener('click', () => doSomething());

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

function handler() {
  doSomething();
}

el.addEventListener('click', handler);
el.removeEventListener('click', handler);

Ещё момент — capture.

el.addEventListener('click', handler, true);
el.removeEventListener('click', handler, false);

Так обработчик не снимется, потому что capture отличается. Для удаления браузер сравнивает type, listener и capture. passive, once, signal в этом сравнении не участвуют. Когда обработчиков несколько, удобно использовать AbortController:

const controller = new AbortController();

window.addEventListener('resize', onResize, {
  signal: controller.signal
});

document.addEventListener('visibilitychange', onVisible, {
  signal: controller.signal
});

// cleanup
controller.abort();

abort() снимет все обработчики, которые были добавлены с этим signal. А если обработчик нужен только один раз:

button.addEventListener('click', handler, { once: true });

После первого вызова он удалится сам. Важный нюанс: удалённый DOM сам по себе ещё не утечка. Если на него нет внешних ссылок — GC его заберёт. 🔥 Проблемы начинаются, когда: обработчик висит на window / document; callback держит старое состояние в замыкании; DOM-нода или данные лежат в массиве, store или кэше. 📣 Code Ready | #практика

Отклики, после которых зовут на собеседования Главный фокус команды ии-ассистента Софи: 1. Ребята переписали парсер - теперь собирают вакансии из 110+ источников: Telegram, Хабр, LinkedIn и другие. 2. Параллельно сделали умный мэтчер - Софи теперь показывает не всё подряд, а то, что подходит именно вам (локация, стек, грейд + обучение на фидбэке юзеров). На этом строится основа автооткликов - быстрых, точных и стабильных. Следующий шаг - откалибровать мэтчер до точности 80%+, но это невозможно без реальных пользователей. Поэтому в ближайшие дни они открывают доступ к бесплатному тестированию. Мест будет немного, так как фокус на качестве. ➡️Если хочешь попасть - подписывайся на канал, там будет анонс о наборе.

Как отодвинуть элемент в конец без justify-content? Частая задача — в одной строке есть несколько элементов, и один из них нужно прижать к правому краю. Обычно начинают оборачивать всё в дополнительные контейнеры.

.nav {
  display: flex;
  justify-content: space-between;
}

Но это ломает контроль над расстояниями между остальными элементами. Есть более точечный и управляемый способ:

.push {
  margin-left: auto;
}

auto-отступ забирает всё свободное пространство и отталкивает элемент вправо:

<nav class="nav">
  <span>Logo</span>
  <span class="push">Menu</span>
</nav>

Это работает не только для одного элемента, но и для групп:

.group {
  margin-left: auto;
}

Теперь можно точно управлять layout без изменения поведения остальных элементов. 🔥 Один margin-left: auto заменяет сложные flex-настройки и даёт контроль над выравниванием. 📣 Code Ready | #совет

Митапы — это, конечно, круто и полезно. Но что может быть лучше открытой дискуссии с коллегами о наболевшем? ☑️ 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 | #фишка