Последние посты
<divelopers>
21 сент., 14:03
Реализация пользовательских атрибутовПод конец прошлого года я рассказывал об API пользовательских атрибутов, который предложен на замену отклонённых Apple настраиваемых встроенных элементов (Customized Built-In Elements). Это часть API веб-компонентов.В Chrome и Firefox можно описать такой пользовательский элемент, который будет наследоваться от встроенного элемента, например кнопки, заголовка или абзаца. С помощью атрибута is пользовательский элемент связывается со встроенным.Это позволяет сохранять поведение и семантику встроенных элементов HTML, но расширять их возможности и добавлять новое поведение. Apple категорически от этого отказались и Safari никогда не будет поддерживать эту возможность.Пользовательских атрибуты предложены как альтернатива. На днях Кит Сиркель представил полифил пользовательских атрибутов, дополнив тем, что хотел бы видеть это в браузерах. А это<divelopers>
14 сент., 15:04
Подклассы Event вместо CustomEventМногие библиотеки предоставляют систему событий в качестве публичного API. Потребители могут подписываться на них и изменять поведение. Часто основой для событий служит класс CustomEvent, у которого в detail могут быть данные.// Где-то в коде компонента component.dispatchEvent( new CustomEvent( 'quantity-change', { detail: { newValue, oldValue } } ) ); Нет ничего плохого в использовании CustomEvent. Исторически он существует, потому что для авторов библиотек нужен был механизм пользовательских событий, а наследование от встроенных классов до появления ES6 не поддерживалось.При работе с CustomEvent нужно помнить, что полезная нагрузка события находится в свойстве detail. Нужен дополнительный шаг в цепочке доступа к свойству объекта или деструктуризация, что не очень удобно с точки зрения DX.<divelopers>
11 сент., 15:14изменён
Эволюция стилей в темах ShopifyАдам Ватан на днях поделился новостью, что Shopify выкупил Tailwind. На DotDev 2026, конференции, организованной Shopify, был анонс внедрение Tailwind в движок Shopify Storefront Renderer. В связи с этим обзор подходов к стилям в Shopify.Вопрос организации стилей в темах Shopify лежит на плечах авторов тем. Тут каждый сам решает, как к этому подойти. Поэтому можно найти разные решения. В рамках этого поста я сосредоточусь на решениях в официальных темах от Shopify.Тема Debut, 2016-2021 годы. Все стили находятся в файле theme.scss.liquid, где примерно 5700 строк кода. Файл содержит стили normalize.css, карусели slick, системы сетки, разных компонентов и шаблонов страниц самой темы.Файл представлен как .liquid, то есть там доступны ограниченные возможности шаблонизатора Liquid. Это используется для получения различных настроек из админкм и<divelopers>
9 сент., 15:01изменён
Persistent WidgetsМногие сайты не должны быть SPA. Но иногда эта архитектура продиктована ограничениями. Хороший пример — сайт подкаста: статические страницы эпизодов, но есть плеер, состояние которого нужно сохранять между страницами.Ради сохранения состояния плеера весь сайт создаётся как SPA, хотя в остальном на нём нет такой интерактивности, которая требует реактивного фреймворка. Потому что в веб-платформе нет нормальных способов решения такой задачи.Но, кажется, способ появится. Инженеры Chromium начали прототипировать идею, предложеную группой WICG (Web Incubator Community Group) под названием Persistent Widgets. Это фрейм, который сохраняется при переходах между страницами.Дисклеймер: это обзор раннего предложения новых функций. Синтаксис может измениться в будущем или от функций могут отказатьсяПри переходах между страницами DOM-дерево, состояние JS, кэш GPU,<divelopers>
7 сент., 14:01изменён
Processing Instructions и маркерыВ DOM всё представлено в виде узлов (Node) разных типов. Получить тип можно через свойство nodeType. Всего в DOM на данный момент 9 типов узлов, один из которых — PROCESSING_INSTRUCTIONS. Он существует, но не используется.Данный тип узла представлен в HTML открывающим тегом <?, за которым идёт название инструкции, затем произвольное количество атрибутов, как у обычных HTML-элементов и закрывающим тегом ?>. Вот так выглядит синтаксис:<?instruction attribute="value"?>Это инструкции для парсера, на которые он как-то реагирует, если поддерживает их, или игнорирует, если не поддерживает. Кто работал с XML и XHTML, могут помнить, как с их помощью указывалась версия XML и подключались внешние стили:<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet href="styles.css"?><!-- В HTML это эквивалентно комментариям --> <!--xml version="1.0"Chrome for DevelopersDeclarative partial updates | Web Platform | Chrome for DevelopersLearn about new out-of-order streaming capabilities and the renewed HTML insertion and streaming methods available in Chrome.<divelopers>
1 сент., 15:42изменён
@scope и потоковая передача HTMLНоам Розенталь поделился интересной техникой, в которой совмещена потоковая передача HTML с относительно новой директивой @scope. Её суть в том, чтобы скрыть потоковый контент до тех пор, пока он не будет полностью получен.Суть потоковой передачи в том, что HTML отправляется с сервера фрагментами по мере готовности, а браузер принимает эти фрагменты и рисует интерфейс. То есть можно показывать по одной карточке в каталоге по мере их загрузки.Директива @scope ограничивает область видимости стилей. При её размещении в HTML внутри элемента <style> без указания селектора, область видимости ограничивается ближайшим родителем элемента <style>.Про это подход, который Крис Койер назвал «DOM Blasters», на канале есть пост. Совместив @scope с потоковой передачей HTML получится скрывать контент до полной готовности с помощью CSS.<section> <style> @scope { o<divelopers>
26 авг., 14:04изменён
Не стоит полагаться на User AgentUser Agent sniffing — это техника поиска в строке User Agent названия браузера и его версии для определения того, с какого браузера пришёл пользователь. Это можно использовать во благо для оптимизаций и загрузки полифилов.На практике это применялось для трекинга и фингерпринтинга. Поэтому браузеры уже давно пихают в User Agent всё подряд и врут. Поэтому User Agent sniffing — крайне ненадёжная и нестабильная штука. На днях я столкнулся с этим на практике.При аудите производительности сайта во вкладке Performance я заметил много операций принудительной перекомпоновки (forced reflow). Это когда чтение и запись геометрии элементов в JS приводит к пересчёту стилей.Виновником стал скрипт autosizes. Это полифил атрибута sizes="auto" у <img> и <source>. Он запрашивает размеры через getBoundingClientRect(), что и приводит к принудительным перекомпоновкам.<divelopers>
24 авг., 14:01изменён
<divelopers>
21 авг., 15:00изменён
<divelopers>
19 авг., 15:02изменён
<divelopers>
17 авг., 15:22изменён
<divelopers>
14 авг., 15:00
<divelopers>
12 авг., 15:01изменён
<divelopers>
10 авг., 15:02изменён
<divelopers>
7 авг., 15:15
<divelopers>
7 авг., 15:15изменён
<divelopers>
5 авг., 15:26
<divelopers>
3 авг., 15:05
<divelopers>
28 июл., 14:01
<divelopers>
24 июл., 15:00изменён
