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

Иногда путь к данным приходит динамически: из конфигурации, формы или 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 | #статья

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

Например, .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 | #статья