Code Ready | Frontend

Разбираем 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 позволяет отделить состояние интерфейса от бизнес-логики. Например, один компонент диалога может использоваться для подтверждения удаления, отмены действия или выбора варианта. Для форм внутри <di

requestAnimationFrame() — почему время выполнения js нельзя привязывать к фиксированной частоте кадров! Браузер самостоятельно управляет процессом обновления изображения на экране. JavaScript выполняется через event loop и не синхронизирован напрямую с частотой обновления дисплея. Поэтому анимации, построенные на фиксированных задержках, могут вести себя по-разному на разных устройствах. setTimeout() не является механизмом синхронизации с браузерным rendering pipeline: let x = 0; function animate() { x += 5; element.style.transform = `translateX(${x}px)`; setTimeout(animate, 16); } animate(); Значение 16 миллисекунд не означает один кадр. Это только минимальная задержка перед следующим выполнением callback. На дисплее 60 Hz это примерно соответствует одному кадру (~16.67 ms), но на устройствах с частотой 120 Hz, 144 Hz и выше браузер не будет синхронизировать выполнение JavaScript с каждым обновлением экрана. В результате скорость такой анимации зависит от количества вызовов JavaScript, а не от реально прошедшего времени. Для визуальных обновлений используется requestAnimationFrame(): let x = 0; function animate() { x += 5; element.style.transform = `translateX(${x}px)`; requestAnimationFrame(animate); } requestAnimationFrame(animate); Браузер планирует callback перед следующим обновлением изображения. Это позволяет выполнять изменения визуального состояния внутри стандартного цикла рендеринга. Но сама привязка к кадрам не делает анимацию корректной. Если браузер пропустит несколько кадров из-за нагрузки, изменение состояния будет зависеть от количества вызовов requestAnimationFrame(), а не от реального времени. Для независимости от частоты кадров необходимо использовать timestamp, который передаёт requestAnimationFrame(): let startTime = null; function animate(timestamp) { if (startTime === null) { startTime = timestamp; } const elapsed = timestamp - startTime; const x = elapsed * 0.1; element.style.transform = `translate

dataset: работа с data-* без getAttribute() и setAttribute()! HTML-атрибуты data-* позволяют хранить данные, непосредственно связанные с конкретным DOM-элементом. Для доступа к таким значениям DOM предоставляет стандартный API dataset. <button data-user-id="42" data-action="delete" > Удалить </button> Свойство dataset возвращает объект DOMStringMap, через который можно читать значения data-* как свойства JavaScript-объекта. const button = document.querySelector('button'); console.log(button.dataset.userId); // "42" console.log(button.dataset.action); // "delete" При формировании имени свойства префикс data- удаляется, а дефис перед строчной ASCII-буквой a-z удаляется, при этом следующая буква преобразуется в верхний регистр. Поэтому data-user-role становится dataset.userRole. <div id="user" data-user-role="admin" ></div> Это преобразование выполняется самим DOM API, поэтому обращаться к исходному имени атрибута вручную не требуется. const user = document.querySelector('#user'); console.log(user.dataset.userRole); // "admin" dataset поддерживает не только чтение. Присваивание свойства изменяет соответствующий data-* атрибут элемента. button.dataset.action = 'restore'; console.log(button.getAttribute('data-action')); // "restore" Если соответствующего data-* атрибута ещё нет, присваивание через dataset создаст его в DOM. button.dataset.loading = 'true'; console.log(button.hasAttribute('data-loading')); // true Удаление свойства через оператор delete удаляет и соответствующий атрибут элемента. delete button.dataset.loading; console.log(button.hasAttribute('data-loading')); // false Важная особенность dataset: значения представлены строками. При присваивании числа, boolean и другие значения преобразуются в строковое представление. button.dataset.userId = 42; button.dataset.active = true; console.log(button.dataset.userId); // "42" console.log(button.dataset.active); // "true" console.log(typeof button.dataset.userId); // "string" Если приложе