👩‍💻 Чтобы не писать одно и то же в React.

ES7+ React/Redux/React-Native snippets — добавляет готовые сниппеты для компонентов, хуков, Redux-логики и других часто используемых конструкций. Достаточно ввести короткое сокращение и получаешь полноценный шаблон с импортами и структурой. Помогает быстрее создавать файлы, избегая рутины.

📣 Code Ready | #vscode

Почему “едут” размеры некоторых элементов?

По умолчанию (box-sizing: content-box) width и height задают только размер контента, без учёта padding и border. Из-за этого элементы становятся больше, чем ожидаешь, и layout ломается:

.box {
  width: 200px;
  padding: 20px;
}

Фактическая ширина здесь будет 240px, что часто приводит к переполнениям:

.box {
  box-sizing: border-box;
}

Теперь padding и border учитываются внутри заданной ширины, и итоговый размер остаётся 200px:

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

🔥 Это снижает количество проблем с размерами и делает layout стабильнее.

📣 Code Ready | #совет

👍 JavaScript Interview Questions — база вопросов для подготовки к собеседованиям!

Репозиторий с огромной подборкой вопросов от базовых тем до продвинутых концепций. Собраны сотни вопросов по замыканиям, this, event loop, промисам, прототипам, асинхронности и др., которые регулярно встречаются на собеседованиях. Формат простой и удобный: вопрос, ответ, краткое объяснение.

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

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

closest(): поиск ближайшего элемента по селектору!

Иногда в обработчике клика вообще не важно, куда именно попали — в текст, иконку или вложенный span. Важно — к какому элементу это всё относится. В таких случаях обычно выручает Element.closest().

Он берёт текущий элемент (event.target) и поднимается вверх по DOM, пока не найдёт первый узел, который подходит под CSS-селектор. Причём проверяет и сам элемент тоже.

Самый простой пример:

const button = event.target.closest('.btn');

Если клик был внутри кнопки — получим её. Если нет — вернётся null.

Чаще всего это используют в делегировании событий. Например, список:

document.addEventListener('click', (e) => {
  const item = e.target.closest('.list-item');
  if (!item) return;

  console.log('clicked:', item.dataset.id);
});

Без closest() здесь обычно начинается проверка e.target, потом parentElement, потом ещё выше — и код быстро превращается в цепочку условий. С closest() это одна строка.

Хорошо видно на вложенных элементах:

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

  handleAction(button.dataset.action);
});

Клик может прийтись в svg, span, что угодно внутри кнопки — логика от этого не ломается.

Иногда добавляют ещё проверку на контейнер:

const container = document.querySelector('.container');

container.addEventListener('click', (e) => {
  const item = e.target.closest('.item');
  if (!item || !container.contains(item)) return;

  console.log('inside container');
});

Это не всегда обязательно, но полезно, если одинаковые селекторы встречаются в разных частях страницы.

Ещё момент, который иногда забывают: если элемент уже подходит под селектор, closest() вернёт его же.

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

console.log(el.closest('.card') === el); // true

🔥 Очевидное, но всё же: селектор должен быть валидным, иначе будет ошибка. В итоге — небольшая штука, но сильно упрощает жизнь, когда работаешь с событиями и вложенной разметкой.

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

📂 Напоминалка по иммутабельным методам!

Например, array.push() изменяет исходный массив, а [...array, item] — создаёт новый без мутации. То же самое с sort(), reverse() и другими — у них есть безопасные аналоги вроде toSorted() и toReversed().

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

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

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

Последовательные async-операции без лишней вложенности!

Когда несколько асинхронных действий зависят друг от друга, часто пишут вложенные .then():

fetch('/data').then(r => {
  r.json().then(data => {
    fetch(`/more/${data.id}`).then(r2 => {
      r2.json().then(console.log);
    });
  });
});

Такой код быстро превращается в избыточную вложенность обработчиков.

Решение — возвращать следующий Promise из .then():

fetch('/data')
  .then(r => r.json())
  .then(data => fetch(`/more/${data.id}`))

Каждый .then() получает результат предыдущего и передаёт дальше по цепочке, потому что возвращает Promise:

.then(r => r.json())
.then(console.log)

Ошибки ловятся централизованно в .catch(), если они произошли в цепочке или внутри .then():

.catch(console.error);

Важно: fetch не кидает ошибку на HTTP 4xx/5xx — в реальном коде проверяйте r.ok.

🔥 Такой паттерн делает асинхронный код линейным, убирает лишнюю вложенность и упрощает поддержку.

📣 Code Ready | #совет

🐱 HTMLCheatSheet — интерактивная шпаргалка по JavaScript!

Здесь собраны основные конструкции JS с готовыми примерами кода. Переменные, циклы, условия, массивы, строки, события, работа с датами и даже регулярные выражения. Главная фишка — это интерактивность: можно сразу копировать код, скрывать комментарии и использовать сайт как быстрый справочник во время работы.

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

📣 Code Ready | #сайт

Доступ к вложенным свойствам по строке!

Иногда путь к данным приходит динамически: из конфигурации, формы или API. Писать доступ вручную в таких случаях невозможно.

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

path.split('.').reduce((o, k) => o?.[k], obj);

Каждый шаг берёт текущее значение и читает следующий ключ из пути:

'profile.name'.split('.') 
// ['profile', 'name']

А reduce проходит по этому пути и безопасно читает значения:

(o, k) => o?.[k]

Если на каком-то уровне свойства нет, optional chaining вернёт undefined без ошибки.

Подход работает для простых путей через точку (a.b.c).

🔥 Это пригодится для dynamic access, form builders, JSON-парсеров, таблиц, конфигов и любых систем, где путь к данным неизвестен заранее.

📣 Code Ready | #совет

doka guide — сайт, на котором собраны шпаргалки по HTML, CSS, JS. На каждую тему есть подробный разбор с полезными советами по применению.

📌 Ссылочка: doka.guide

📣 Code Ready | #сайт

👩‍💻 Хочешь показать кусок кода так, чтобы он выглядел аккуратно?

Polacode — делает скриншоты кода прямо из VS Code: с подсветкой синтаксиса, темой редактора и оформлением. Просто выделяешь код и получаешь готовое изображение для поста, документации или презентации.

📣 Code Ready | #vscode

Почему 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 | #статья