Почему 1fr ведёт себя не так, как ожидается?

Многие думают, что 1fr — это занять всё доступное пространство. На практике трек с 1fr часто упирается в минимальный размер контента (min-content) и не сжимается как ожидается.

.grid {
grid-template-columns: 1fr auto;
}

Если в первой колонке длинный текст или input, она может не сжаться и вытолкнуть вторую колонку.

Решение — явно разрешить колонке сжиматься:

.grid {
grid-template-columns: minmax(0, 1fr) auto;
}

minmax(0, 1fr) говорит браузеру: колонка может уменьшаться до 0, а не держаться за размер контента.

Теперь ellipsis, overflow и адаптив работают корректно.

.title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Это особенно важно для layout с заголовками, таблицами, карточками и input-полями.

🔥 Если используешь 1fr, в большинстве случаев безопаснее писать minmax(0, 1fr) — это избавляет от скрытых багов в grid.

📣 Code Ready | #совет

❤️ Design Resources for Developers — огромная база бесплатных ресурсов для UI и дизайна!

В репозитории собраны сотни инструментов и материалов, которые помогают в дизайне: иконки, шрифты, цветовые палитры, иллюстрации, UI-киты, шаблоны, стоковые фото, генераторы, онлайн-инструменты и многое другое. Всё разбито по категориям, можно сразу найти нужный ресурс.

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

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

👩‍💻 Нужно открыть PDF, не выходя из редактора?

vscode-pdf — позволяет просматривать PDF-файлы прямо в VS Code: без сторонних приложений и переключений между окнами. Можно быстро открыть документацию, спецификации или инструкции и держать всё в одном рабочем пространстве. Удобно, когда работаешь с проектами, где часто приходится обращаться к PDF.

📣 Code Ready | #vscode

Почему прыгает layout при открытии модалки?

Когда появляется вертикальный скролл, браузер добавляет scrollbar — из-за этого меняется ширина viewport и интерфейс смещается. Особенно заметно при модалках и переходах.

body {
  overflow: hidden;
}

Убираешь скролл и layout резко сдвигается, потому что исчезает scrollbar.

Есть нативное решение без JS:

html {
  scrollbar-gutter: stable;
}

Браузер резервирует место под скролл, даже если его нет (актуально для классического scrollbar):

html {
  scrollbar-gutter: stable both-edges;
}

Можно зафиксировать пространство с двух сторон, центрирование остается ровным.

Работает в большинстве современных браузеров и сценариев (при overlay scrollbar эффект может быть незаметен).

🔥 В итоге layout больше не прыгает, интерфейс ощущается стабильнее и аккуратнее.

📣 Code Ready | #совет

☕️ Наткнулся на отличную статью на Хабре — создание форм входа и регистрации без единой строчки JavaScript!

В статье:
• Как с помощью HTML5 и CSS3 сделать переключение между формами через :target.
• Стильные анимации и иконки через data-атрибуты.
• Продвинутые стили форм и плавные переходы с использованием CSS3.

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

📣 Code Ready | #статья

📂 Напоминалка по работе с числами!

Например, .value у input всегда возвращает строку, из-за чего выражение вроде value + 1 превращается в конкатенацию. А parseInt() может неожиданно обрезать значение.

На картинке — наглядное сравнение способов приведения к числу (parseInt, Number, +) и более удобного варианта через valueAsNumber, который сразу возвращает число.

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

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

Почему includes() часто удобнее, чем indexOf()!

Когда нужно просто проверить, есть ли значение в массиве, многие до сих пор пишут так:

const arr = [1, 2, 3];

if (arr.indexOf(2) !== -1) {
  console.log("есть");
}

Так писать можно, но это избыточно для простой проверки наличия.

В таких случаях логичнее использовать includes():

const arr = [1, 2, 3];

if (arr.includes(2)) {
  console.log("есть");
}

Код читается проще: метод сразу возвращает boolean, без дополнительных сравнений. Но разница между ними не только в удобстве записи.

Есть важный нюанс в сравнении значений:

[NaN].indexOf(NaN);   // -1
[NaN].includes(NaN);  // true

Почему так: indexOf() использует строгое сравнение (===),
а includes() — алгоритм SameValueZero, который корректно обрабатывает NaN. С обычными значениями это редко имеет значение, но такой кейс полезно знать.

При этом indexOf() никуда не делся — он нужен, когда важен индекс:

const arr = [1, 2, 3];
const idx = arr.indexOf(2);

if (idx !== -1) {
  console.log("позиция:", idx);
}

И частая ошибка — использовать результат indexOf() как boolean:

if (arr.indexOf(value)) {
  // ...
}

Если элемент находится на позиции 0, условие не сработает, потому что 0 — falsy.

Правильно так:

if (arr.indexOf(value) !== -1) {
  // ...
}

🔥 Итого: если нужна проверка наличия — includes() предпочтительнее: код чище и семантически точнее, если нужен индекс — используем indexOf().

📣 JS Ready | #практика

👩‍💻 Нужно быстро связать HTML и CSS?

HTML to CSS autocompletion — подсказывает CSS-классы и id прямо при работе с HTML. Расширение анализирует стили в проекте и предлагает существующие селекторы, чтобы не допускать опечаток. Удобно при верстке, особенно в больших проектах, где легко запутаться в названиях классов.

📣 Code Ready | #vscode

Почему sticky не работает внутри flex/grid?

Частая ситуация — ставишь position: sticky, а элемент не прилипает.

Во flex и grid элементы по умолчанию имеют align: stretch
(растягиваются по поперечной оси / внутри своей области).

Из-за этого элемент может занять всю доступную высоту и теряет пространство для прилипания.

.layout {
  display: flex;
}

Решение — убрать растягивание:

.sidebar {
  align-self: start;
}

Теперь элемент принимает свою реальную высоту и sticky начинает работать как ожидается:

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
}

У sticky должен быть задан top (или другой inset), если проблема у нескольких элементов — используй align-items: start у контейнера.

🔥 Часто проблема не в sticky, а в stretch внутри flex/grid.

📣 Code Ready | #совет

✍️ I Love Coding — краткая шпаргалка по JavaScript!

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

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

📣 Code Ready | #сайт

❤️ Нашёл свежую статью на Хабре: «Делаем фронтенд-сборку для верстки HTML-писем на MJML»

В этой статье:
• Создадите отдельный репозиторий для верстки email-шаблонов с помощью MJML;
• Настроите frontend-сборку: сможете писать шаблоны, автоматически компилировать MJML в HTML;
• Реализуете тестовую отправку писем через SMTP, чтобы сразу увидеть результат в почтовом клиенте;

🔊 Читайте подробнее на Habr!

📣 Code Ready | #статья

matches(): проверка элемента на соответствие селектору!

Когда работаешь с событиями или обходом DOM, часто нужно понять — подходит ли конкретный элемент под CSS-селектор. Для этого есть Element.matches().

Метод возвращает true или false, проверяя сам элемент (без подъёма по DOM, в отличие от closest()).

Базовый пример:

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

if (el.matches('.item.active')) {
  console.log('active item');
}

Пример 1 — фильтрация в делегировании событий:

document.addEventListener('click', (e) => {
  if (!(e.target instanceof Element)) return;
  if (!e.target.matches('button[data-action]')) return;

  console.log('button clicked');
});

Здесь важно: проверяется именно e.target, без поиска родителей.

Пример 2 — комбинация с closest():

document.addEventListener('click', (e) => {
  if (!(e.target instanceof Element)) return;

  const item = e.target.closest('.list-item');
  if (!item || !item.matches('.active')) return;

  console.log('active item clicked');
});

closest() находит нужный элемент, matches() уточняет состояние.

Пример 3 — условная логика без лишних переменных:

if (element.matches(':not(.disabled):hover')) {
  // логика для активного состояния
}

Пример 4 — работа с псевдоклассами:

if (input.matches(':focus')) {
  console.log('input in focus');
}

Поддерживаются обычные CSS-селекторы (включая псевдоклассы). Псевдоэлементы (::before, ::after и т.п.) не применимы.

Пример 5 — проверка перед модификацией:

if (!el.matches('.processed')) {
  el.classList.add('processed');
}

Избавляет от дублирующих операций. Важно: если селектор невалидный — будет выброшено исключение, а не возвращён false.

Ещё момент: matches() не ищет родителей или потомков — только текущий элемент. Если нужна проверка вверх по DOM — это задача для closest().

🔥 matches() — полезный инструмент для точечной проверки элементов в сложной DOM-логике.

📣 Code Ready | #практика

📂 Шпаргалка Flexbox позиционирования!

Flexbox — позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

Реально полезная тема, поэтому даю вам очень крутую шпаргалку для ее изучения, пользуемся)

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

👩‍💻 Атрибут aria-label — доступность без лишней разметки!

Это атрибут для screen reader’ов, который задает текстовое описание элемента для пользователей с нарушениями зрения.

Есть теги и роли, для которых его точно нельзя использовать:

<caption> и роль caption.
<code> и роль code.
<dd> и роль definition.
<dt>, <dfn> и роль term.
<del> и роль deletion.
<em> и роль emphasis.
<ins> и роль insertion.
<mark> и роль mark.
и др.

Когда у элемента должно быть видимое для всех имя, используйте aria-labelledby.

📣 Code Ready | #атрибут

👩‍💻 Важно понимать, какие версии зависимостей используются в проекте?

Version Lens — показывает актуальные версии пакетов прямо в package.json, рядом с каждой зависимостью отображается доступное обновление. Можно быстро увидеть устаревшие версии и обновить их без лишних проверок, что упрощает поддержку проекта.

📣 Code Ready | #vscode