Code Ready | Frontend

👩‍💻 Семантически выделяет математические выражения и переменные! Тег <var> используется для семантического выделения переменных в математических выражениях, формулах, программном коде и технической документации. Например, с его помощью можно обозначить: • переменную в формуле — x, y, r; • аргумент функции; • параметр программы или команды; • значение, которое пользователь должен подставить самостоятельно. По умолчанию браузеры обычно отображают содержимое <var> курсивом, однако внешний вид можно изменить с помощью CSS. <var> нужен не просто для визуального выделения текста. Он добавляет семантику, указывая, что конкретный фрагмент представляет переменную. 📣 Code Ready | #атрибут

✍️ Полезная статья недавно вышла на Хабре: «Мои любимые CSS-трюки для фронтендеров, которые не используют Tailwind»! В этой статье: • Узнаете, как удобнее стилизовать контент с помощью `:not()` и управлять специфичностью через CSS-слои; • Научитесь увеличивать кликабельную область элементов без изменения их размеров; • Разберёте полезные приёмы с CSS Grid ить контент с пом которые упрощают адаптивную вёрстку. 🔊 Продолжай читать на Habr! 📣 Code Ready | #статья

📱 Range API — работа с фрагментами DOM! В этой шпаргалке собраны основные методы Range API для программной работы с диапазонами и фрагментами DOM. Здесь показано, как задавать начальную и конечную границы диапазона, выбирать узел целиком или только его содержимое, копировать и извлекать выбранные фрагменты, вставлять новые DOM-узлы в заданную позицию, а также получать текстовое содержимое диапазона. 📣 Code Ready | #шпора

👩‍💻 Выделяем элементы в фокусе и их родителей! Псевдокласс :focus-within применяется к элементам, которые либо сами находятся в фокусе, либо имеют дочерние элементы в фокусе. Срабатывает, когда фокус получает сам элемент или любой из его потомков. Например, можно изменить оформление всей формы, когда пользователь перешёл в одно из её полей. Примеры использования: • подсветить контейнер с <input> при вводе; • изменить рамку всей формы; • выделить пункт меню при фокусе на вложенной ссылке; • показать дополнительные элементы управления. В отличие от :focus, который реагирует только на фокус самого элемента, :focus-within учитывает фокус и на всех элементах внутри него. 📣 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 | #практика

👩‍💻 Нативный раскрывающийся блок с контентом без JavaScript! Теги <details> и <summary> позволяют создавать интерактивные блоки, содержимое которых пользователь может раскрывать и скрывать прямо средствами HTML. Каждый из тегов выполняет свою роль: • <details> — содержит скрываемый и раскрываемый контент; • <summary> — задаёт видимый заголовок, по которому можно кликнуть для переключения состояния блока. По умолчанию содержимое <details> скрыто. Если добавить атрибут open, блок будет изначально раскрыт. Такая конструкция отлично подходит для FAQ, дополнительной информации, настроек, примечаний и других элементов интерфейса, которые не нужно постоянно держать на экране. При этом базовое раскрытие и сворачивание работает без единой строки JS. 📣 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 | #совет

🐱 Awesome Frontend Dev — большая подборка материалов и инструментов для frontend-разработчика! Здесь собраны учебники, справочники, курсы и полезные сервисы по HTML, CSS, JavaScript, TypeScript, React, Next.js, Node.js и SQL. Есть отдельные подборки для изучения Flexbox и Grid, тренировки задач на Codewars и LeetCode, подготовки к собеседованиям, работы с GitHub, размещения проектов и использования AI-инструментов в разработке. Оставляю ссылочку: GitHub 📱 📣 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 | #практика

Что фронтенд может, а что не может, когда лёг хостинг Недавно натыкался на новость — у одного из хостеров случился короткий сбой на уровне энергоснабжения дата-центра. Задело часть их инфраструктуры и клиентские сервисы. Восстановили быстро, но ЛК и часть сайтов на их хостинге минут на 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