👩‍💻 Хочется сразу видеть, какой цвет используется в коде?

Colorize — подсвечивает все цветовые значения прямо в редакторе: HEX, RGB, HSL, CSS-переменные и другие форматы. Вместо набора символов ты сразу видишь реальный цвет рядом с кодом. Удобно при работе с UI, темами и большими CSS/SCSS-файлами, где важно быстро ориентироваться в палитре проекта.

📣 Code Ready | #vscode

Как сделать адаптивную сетку без 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 | #совет

📂 Напоминалка по Web Performance Metrics!

Например, TTFB показывает, как быстро сервер начинает отвечать, а FCP помогает понять, когда пользователь впервые видит контент на экране.

На картинке — 9 основных метрик производительности сайта, которые полезно держать под рукой каждому разработчику.

Сохрани, чтобы не потерять!

📣 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 | #практика

❤️ Dev Notes — заметки, шпаргалки и статьи по JS!

На сайте собраны не только шпаргалки, но и полноценные статьи с разбором разных тем: работа с массивами и объектами, функции, замыкания, методы JS и практические нюансы разработки. Материал подаётся с примерами кода и краткими пояснениями.

📌 Оставляю ссылочку: dev-notes.ru

📣 Code Ready | #сайт

👩‍💻 В коде слишком много операторов и условий?

Snazzy Operator — делает операторы (=>, ===, &&, >= и другие) более выразительными и аккуратными за счёт специальных лигатур и стилизации. Код становится легче воспринимать визуально, особенно в больших файлах и сложных условиях.

📣 Code Ready | #vscode

Почему скролл пробивает модалку и начинает двигать страницу?

Частый UX-баг: скроллишь контент внутри modal или sidebar, доходишь до конца, и начинает скроллиться вся страница под ним.

Обычно это пытаются фиксить через JS и блокировку body-scroll:

body {
  overflow: hidden;
}

Но это может ломать iOS-scroll, sticky и вызывать скачки layout.

CSS умеет решать это нативно:

.modal {
  overflow: auto;
  overscroll-behavior: contain;
}

Теперь scroll “останавливается” внутри контейнера и не передаётся родителю.

Можно полностью отключить overscroll-эффекты и scroll-chain:

.modal {
  overscroll-behavior: none;
}

Это особенно полезно для modal, drawer, sidebar, chat и mobile-menu.

.chat {
  overflow: auto;
  overscroll-behavior: contain;
}

🔥 overscroll-behavior позволяет нативно контролировать scroll-chain и избавиться от части scroll-lock логики без дополнительных JS-хаков.

📣 Code Ready | #совет

🐱 Node.js Dev — большая база знаний по Node.js и backend-разработке!

На сайте собраны статьи, документация и обучающие материалы по Node.js: работа с Express, npm, API, асинхронностью, модулями, потоками и серверной разработкой в целом. Есть как базовые разборы для новичков, так и более сложные темы по архитектуре и производительности.

📌 Оставляю ссылочку: nodejsdev.ru

📣 Code Ready | #сайт

📂 Напоминалка по оптимизации frontend performance!

Например, code splitting разбивает большой бандл на части и ускоряет загрузку, а dynamic imports позволяют подгружать код только тогда, когда он реально нужен.

Эти подходы помогают оптимизировать критический рендеринг, сократить размер передаваемых данных и улучшить метрики вроде LCP и INP.

Сохрани, чтобы не потерять!

📣 Code Ready | #ресурсы

Почему текст внезапно ломает grid и вылезает за контейнер?

Очень частый баг в CSS Grid: ставишь overflow: hidden, ellipsis, 1fr, а текст всё равно раздвигает layout и игнорирует ограничения.

Кажется, что проблема в overflow.

.title {
  overflow: hidden;
  text-overflow: ellipsis;
}

Но проблема часто вообще не в этом.

У grid-элементов по умолчанию стоит min-width: auto, из-за чего элемент отказывается сжиматься меньше контента.

Решение — явно разрешить сжатие.

.grid-item {
  min-width: 0;
}

После этого начинают нормально работать:

.title {
  white-space: nowrap;
  text-overflow: ellipsis;
}

Важно: min-width: 0 нужно ставить именно на grid/flex item, а не обязательно на сам текстовый элемент.

🔥 Особенно критично для card-layout, dashboard, table, navbar и любых grid/flex интерфейсов с длинным текстом.

📣 Code Ready | #совет

💅 Josh W. Comeau — статьи и руководства по JavaScript и React!

На сайте собраны статьи и интерактивные туториалы по JavaScript, React, CSS-анимациям, Flexbox, Grid и архитектуре интерфейсов. Автор объясняет сложные концепции простым языком и показывает не только как, но и почему это работает.

📌 Оставляю ссылочку: joshwcomeau.com

📣 Code Ready | #сайт

👩‍💻 Подсветка и удобная работа с env-конфигами!

env-cmd-file-syntax — добавляет подсветку и поддержку синтаксиса для файлов env-cmd, помогая удобнее работать с переменными окружения. Расширение делает конфиги читаемее, упрощает навигацию и помогает быстрее замечать ошибки в названиях и структуре переменных.

📣 Code Ready | #vscode

🐱 Наткнулся на очень полезную статью на Хабре: «Мне этот Chrome DevTools теперь абсолютно понятен»!

В этой статье:
• Подробно разбираются основные инструменты Chrome DevTools — Elements, Console, Sources, Network и их применение;
• Показывается, как эффективно искать баги, анализировать DOM, отлаживать JavaScript и отслеживать сетевые запросы;
• Объясняются возможности DevTools: Workspaces, Snippets, performance-профилирование, live-редактирование и инструменты для адаптивной вёрстки.

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

📣 Code Ready | #статья

Как сделать адаптивный текст без media queries?

Очень часто для адаптации текста под разные экраны используют отдельные breakpoint. В итоге CSS разрастается, а шрифты начинают масштабироваться неравномерно.

Обычно это выглядит так:

.title {
  font-size: 3rem;
}

@media (max-width: 768px) {
  .title {
    font-size: 2rem;
  }
}

Но CSS умеет нативно адаптировать размер текста под экран:

.title {
  font-size: clamp(1.2rem, 4vw, 3rem);
}

clamp() задаёт минимальный размер, адаптивное значение и максимальный предел.

Теперь текст плавно масштабируется вместе с viewport.

.subtitle {
  font-size: clamp(1rem, 2vw, 1.5rem);
}

Особенно хорошо это работает для hero-блоков, заголовков, кнопок и адаптивных интерфейсов.

Media queries часто вообще становятся не нужны.

🔥 clamp() позволяет создавать по-настоящему адаптивные интерфейсы без множества контрольных точек и дублирования CSS.

📣 Code Ready | #совет

👩‍💻 Для удобной работы с .sass-синтаксисом в VS Code!

Sass (.sass only) — добавляет полноценную поддержку indented-синтаксиса Sass: подсветку, автодополнение, навигацию и корректное распознавание .sass-файлов без фигурных скобок и точек с запятой. Помогает комфортно работать со старыми и современными Sass-проектами прямо в редакторе.

📣 Code Ready | #vscode