👩‍💻 Связываем подпись с полем формы с помощью атрибута for!

Атрибут for используется у тега <label> и указывает, к какому элементу формы относится подпись.

А ещё не каждый элемент подойдёт для связи, годятся только из категории «связываемых»:

• <button>;
• <input>;
• <meter>;
• <progress>;
• <select>;
• <textarea>;
• И даже сам <output>.

Кроме удобства, правильная связка <label for="..."> улучшает доступность формы, поскольку вспомогательные технологии могут определить, какая подпись относится к конкретному полю.

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

innerText vs textContent — как обычное чтение DOM может заставить браузер пересчитать layout!

DOM хранит структуру документа отдельно от того, как эта структура отображается пользователю. textContent работает на уровне DOM-дерева. Он проходит по текстовым узлам и собирает содержимое без анализа CSS, размеров элементов или текущего состояния отображения.

const text = element.textContent;

innerText работает иначе. Чтобы вернуть текст в том виде, в котором его видит пользователь, браузеру необходимо учитывать CSS, видимость элементов, переносы строк и актуальное состояние компоновки.

const text = element.innerText;

Именно поэтому простое чтение свойства иногда может быть дорогой операцией:

element.style.width = '400px';

const text = element.innerText;

После изменения стиля браузер помечает компоновку как устаревшую. Если следующая операция требует данных о визуальном состоянии страницы, браузеру может потребоваться немедленно выполнить перерасчёт. Это называется принудительным синхронным перерасчётом layout.

Похожий механизм работает с другими свойствами, зависящими от текущей геометрии страницы:

element.style.width = '400px';

const width = element.offsetWidth;

К этой же категории относятся offsetHeight, getBoundingClientRect() и чтение некоторых свойств прокрутки (scrollTop, scrollHeight и другие).

Проблема обычно появляется не из-за одного вызова, а из-за постоянного смешивания операций записи и чтения:

elements.forEach(element => {
  element.style.width = '400px';
  console.log(element.innerText);
});

В таком случае браузер может постоянно выполнять цикл: запись — устаревшая компоновка — чтение — расчёт компоновки.

Это приводит к частым лишним перерасчётам компоновки (layout thrashing). Гораздо эффективнее разделять изменение состояния и чтение данных:

elements.forEach(element => {
  element.style.width = '400px';
});

const values = elements.map(
  element => element.innerText
);

Важно понимать: innerText не является медленным сам по себе. Если состояние компоновки уже актуально, чтение может быть дешёвым. Проблема возникает тогда, когда браузеру приходится синхронизировать DOM с текущим визуальным состоянием страницы.

Если нужно получить данные из DOM, обычно достаточно textContent. Если нужен текст именно в том виде, в котором его воспринимает пользователь, используется innerText.

🔥 Разница между ними не только в возвращаемой строке. textContent работает с моделью документа, а innerText — с моделью отображения. В производительных интерфейсах это различие может определить, будет ли чтение обычным получением текстового содержимого или причиной перерасчёта компоновки.

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

Попалась супер интересная статья на Хабре: «Как я собрал сайт на 30 000 SEO-страниц за месяц»!

В этой статье:
• Показывается, как в одиночку с помощью Claude и GPT за месяц собрать полноценный веб-проект почти без ручного написания кода;
• Разбирается архитектура на Astro со статической генерацией, серверным поиском, PWA и сборкой десятков тысяч лёгких страниц;
• Рассказывается, как построить и отладить автоматический конвейер наполнения, который после настройки генерирует около 14 000 страниц в неделю;

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

📣 Code Ready | #статья

Что фронтенд может, а что не может, когда лёг хостинг

Недавно натыкался на новость — у одного из хостеров случился короткий сбой на уровне энергоснабжения дата-центра. Задело часть их инфраструктуры и клиентские сервисы. Восстановили быстро, но ЛК и часть сайтов на их хостинге минут на 40 ушли в недоступность.

В этот момент пользователь видит именно фронт. И самое неприятное — ты физически не можешь повлиять на ситуацию. Весь стек упирается в то, что происходит на площадке, которую ты даже и не видел никогда.

Такие истории — повод присмотреться к площадкам с продуманной инфраструктурой, а не разбираться постфактум. В рамках своих задач недавно зацепился за ЦОД Московского кластера видеоигр и анимации.

По питанию там два независимых ввода, ИБП, умные PDU. Охлаждение с изоляцией горячих/холодных коридоров. Сеть и хранение тоже задублированы — резервирование коммутаторов, диски арендных серверов в RAID-массивах. По площадке — 21 стойка, до 20 кВт на каждую, SLA 99,95%. Из железа — GPU-серверы (RTX Ada, H100). Там же и колокейшн от юнита за 4 000 р/мес до стойки 42U от 105 000 р/мес.

Кому интересно, вот страница ЦОДа с характеристиками. Я, например, после всех историй со сбоями начал смотреть на дата-центры иначе.

А если площадка все-таки легла, в ход идут инструменты фронта:

• offline-страница через Service Worker — только для тех, кто уже открывал сайт раньше и SW успел закешироваться; 

• закешированные данные из localStorage/IndexedDB вместо пустого экрана — тоже нужен предыдущий визит; 

• retry с backoff нужны не ради выживания в простой. Их цель — поберечь лежащий бэкенд и вовремя выдать вменяемую ошибку вместо бесконечной загрузки; 

• статус-страница на отдельном хостинге/CDN.

Все остальное зависит от того, что происходит на стороне инфраструктуры.

📣 Code Ready

Element.toggleAttribute() — нативное переключение DOM-атрибутов!

В DOM многие состояния элементов представлены через наличие или отсутствие атрибутов: disabled, hidden, required и пользовательские атрибуты состояния компонентов. Element.toggleAttribute() предоставляет нативный механизм для управления такими состояниями без ручной проверки текущего значения.

До появления toggleAttribute() подобные операции обычно реализовывались через отдельную проверку наличия атрибута и последующее добавление либо удаление:

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

if (button.hasAttribute('disabled')) {
  button.removeAttribute('disabled');
} else {
  button.setAttribute('disabled', '');
}

Element.toggleAttribute() объединяет эту логику в один вызов. Метод проверяет текущее состояние атрибута и выполняет противоположное действие.

button.toggleAttribute('disabled');

Если атрибут отсутствует — он будет добавлен. При повторном вызове — удалён.

Для boolean HTML-атрибутов важно учитывать, что браузер анализирует сам факт присутствия атрибута, а не его значение.

<button disabled>
  Submit
</button>

а также

<button disabled="">
  Submit
</button>

имеют одинаковое поведение.

Метод возвращает boolean, отражающий состояние атрибута после выполнения операции:

const isDisabled = button.toggleAttribute('disabled');

console.log(isDisabled); // true

Дополнительно toggleAttribute() поддерживает второй аргумент force, который позволяет явно задать требуемое состояние вместо переключения.

button.toggleAttribute('disabled', true);  // добавить атрибут
button.toggleAttribute('disabled', false); // удалить атрибут

Этот вариант удобен при синхронизации DOM с состоянием приложения, когда итоговое значение уже вычислено:

input.toggleAttribute('required', isRequired);

toggleAttribute() работает с любыми валидными DOM-атрибутами, включая пользовательские флаги состояния компонентов:

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

card.toggleAttribute('data-selected');

После выполнения:

<div class="card" data-selected></div>

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

Например, управление видимостью через стандартный атрибут hidden:

const block = document.querySelector('.details');

block.toggleAttribute('hidden');

🔥 Element.toggleAttribute() определён в DOM Standard и предоставляет единый API для добавления и удаления атрибутов без необходимости вручную комбинировать hasAttribute(), setAttribute() и removeAttribute(). Полезный метод, который делает работу с DOM-состояниями более лаконичной и предсказуемой. Поддерживается всеми современными браузерами.

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

🐱 Awesome Frontend Dev — большая подборка материалов и инструментов для frontend-разработчика!

Здесь собраны учебники, справочники, курсы и полезные сервисы по HTML, CSS, JavaScript, TypeScript, React, Next.js, Node.js и SQL. Есть отдельные подборки для изучения Flexbox и Grid, тренировки задач на Codewars и LeetCode, подготовки к собеседованиям, работы с GitHub, размещения проектов и использования AI-инструментов в разработке.

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

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

Получаем порядковый номер элемента прямо в CSS!

Для каскадной анимации списка часто приходится передавать индекс из JavaScript или прописывать :nth-child() для каждого элемента.

<div style={{ "--i": index }} />

В CSS появились функции sibling-index() и sibling-count(): первая возвращает позицию элемента среди всех дочерних элементов родителя, начиная с 1, вторая — их общее количество.

Поэтому задержку от 0ms можно вычислить автоматически:

.item {  
  animation-delay: calc((sibling-index() - 1) * 80ms);
}

Добавили десятый элемент — ничего менять не нужно. Его индекс вычислится из DOM автоматически.

Общее количество элементов тоже доступно прямо в выражении:

.item {  
  --total: sibling-count();
}

Это можно использовать для stagger-анимаций, распределения элементов и вычислений, которые раньше требовали --i, :nth-child() или генерации CSS из JavaScript.

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

📣 Code Ready | #совет

👩‍💻 Нативный раскрывающийся блок с контентом без JavaScript!

Теги <details> и <summary> позволяют создавать интерактивные блоки, содержимое которых пользователь может раскрывать и скрывать прямо средствами HTML.

Каждый из тегов выполняет свою роль:

• <details> — содержит скрываемый и раскрываемый контент;
• <summary> — задаёт видимый заголовок, по которому можно кликнуть для переключения состояния блока.

По умолчанию содержимое <details> скрыто. Если добавить атрибут open, блок будет изначально раскрыт. Такая конструкция отлично подходит для FAQ, дополнительной информации, настроек, примечаний и других элементов интерфейса, которые не нужно постоянно держать на экране.

При этом базовое раскрытие и сворачивание работает без единой строки JS.

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

Разбираем HTMLDialogElement — нативная модель модальных интерфейсов в браузере!

Несмотря на большое количество UI-библиотек, модальные окна часто остаются одним из компонентов, где разработчики повторяют одну и ту же инфраструктуру: создание overlay, блокировку прокрутки, управление focus lifecycle, обработку Escape, восстановление фокуса и синхронизацию состояния компонента.

HTMLDialogElement решает эту задачу на уровне платформы. Элемент <dialog> является частью HTML Standard и предоставляет браузерную модель поведения для диалоговых интерфейсов без необходимости вручную воспроизводить базовую механику. Базовая структура:

<dialog id="confirmDialog">
  <p>Удалить запись?</p>

  <button value="cancel">
    Отмена
  </button>

  <button value="confirm">
    Удалить
  </button>
</dialog>

После получения ссылки на элемент становится доступен полный API HTMLDialogElement:

const dialog = document.querySelector(
  '#confirmDialog'
);

У элемента есть два принципиально разных режима открытия.show() переводит <dialog> в состояние отображения без модального поведения:

dialog.show();

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

showModal() создаёт настоящий modal dialog:

dialog.showModal();

В этом режиме браузер добавляет элемент в специальный top layer, устанавливает модальное состояние, ограничивает взаимодействие с остальным документом и управляет фокусом внутри диалога.

Это отличается от обычного display: block, поскольку модальное поведение реализуется самим браузером, а не JavaScript-кодом приложения. Закрытие выполняется через:

dialog.close();

При необходимости можно передать результат завершения операции:

dialog.close('confirmed');

console.log(
  dialog.returnValue
);

returnValue позволяет отделить состояние интерфейса от бизнес-логики. Например, один компонент диалога может использоваться для подтверждения удаления, отмены действия или выбора варианта.

Для форм внутри <dialog> существует специальный механизм method="dialog":

<form method="dialog">
  <button value="cancel">
    Отмена
  </button>

  <button value="confirm">
    Подтвердить
  </button>
</form>

При отправке такой формы браузер автоматически закрывает диалог и записывает значение активной кнопки в returnValue. Состояние элемента доступно через стандартное свойство:

console.log(
  dialog.open
);

Для интеграции с состоянием приложения используются события жизненного цикла. После закрытия:

dialog.addEventListener(
  'close',
  () => {
    console.log(
      dialog.returnValue
    );
  }
);

Попытка закрытия через Escape вызывает событие cancel:

dialog.addEventListener(
  'cancel',
  event => {
    event.preventDefault();
  }
);

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

Визуальное оформление модального слоя также предусмотрено платформой:

dialog::backdrop {
  background: rgb(0 0 0 / 0.5);
}

Главное преимущество <dialog> заключается в переносе части ответственности из прикладного кода в браузерный runtime: управление фокусом, modal top layer, клавиатурное взаимодействие и базовая интеграция с accessibility.

🔥 Для стандартных модальных сценариев HTMLDialogElement позволяет избежать реализации собственного modal framework. Дополнительная логика требуется только там, где интерфейс выходит за пределы поведения, предусмотренного HTML Standard.

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

👩‍💻 Выделяем элементы в фокусе и их родителей!

Псевдокласс :focus-within применяется к элементам, которые либо сами находятся в фокусе, либо имеют дочерние элементы в фокусе. Срабатывает, когда фокус получает сам элемент или любой из его потомков. Например, можно изменить оформление всей формы, когда пользователь перешёл в одно из её полей.

Примеры использования:

• подсветить контейнер с <input> при вводе;
• изменить рамку всей формы;
• выделить пункт меню при фокусе на вложенной ссылке;
• показать дополнительные элементы управления.

В отличие от :focus, который реагирует только на фокус самого элемента, :focus-within учитывает фокус и на всех элементах внутри него.

📣 Code Ready | #свойство

✍️ Полезная статья недавно вышла на Хабре: «Мои любимые CSS-трюки для фронтендеров, которые не используют Tailwind»!

В этой статье:
• Узнаете, как удобнее стилизовать контент с помощью `:not()` и управлять специфичностью через CSS-слои;
• Научитесь увеличивать кликабельную область элементов без изменения их размеров;
• Разберёте полезные приёмы с CSS Grid ить контент с пом которые упрощают адаптивную вёрстку.

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

📣 Code Ready | #статья

👩‍💻 Семантически выделяет математические выражения и переменные!

Тег <var> используется для семантического выделения переменных в математических выражениях, формулах, программном коде и технической документации.

Например, с его помощью можно обозначить:

• переменную в формуле — x, y, r;
• аргумент функции;
• параметр программы или команды;
• значение, которое пользователь должен подставить самостоятельно.

По умолчанию браузеры обычно отображают содержимое <var> курсивом, однако внешний вид можно изменить с помощью CSS.

<var> нужен не просто для визуального выделения текста. Он добавляет семантику, указывая, что конкретный фрагмент представляет переменную.

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