Defront — про фронтенд-разработку и не только

Sanitizer API — безопасная работа с DOM

В блоге web.dev была опубликована статья, посвящённая Sanitizer API — "Safe DOM manipulation with the Sanitizer API".

Sanitizer API — это реализация полноценного санитайзера данных на уровне веб-платформы. Он предназначен для удаления из пользовательского ввода нежелательных HTML-тегов и аттрибутов, которые эксплуатируются в XSS. Можно сказать, что это аналог библиотеки DOMPurify, но без накладных расходов на лишний парсинг.

В Sanitizer API используется контекст парсинга. Благодаря этому структура кода всегда остаётся валидной. Например, Sanitizer API не позволит вставить внутрь <div></div> результат парсинга строки <td>lorem</td>, так как получилась бы невалидная HTML-разметка.

Поддержка Sanitizer API на данный момент есть только в Chrome и Firefox в экспериментальном режиме.

#api #security

https://web.dev/sanitizer/

Телеграм-каналы подписчиков, выпуск #3

@super_oleg_dev — Олег Драпеза про задачи фронтенда Тинькофф и веб-разработку в целом

@am_code — ссылки и заметки про фронтенд

@bitrix24phpsdk – про работу с SDK Битрикс24

@neverendingit — обзоры статей про разработку и менеджмент

@temakast — ссылки на статьи про разработку и ит-технологии

Руководство по отладке CSS

Стефани Эклз написала статью про отладку CSS — "A Guide To CSS Debugging".

В статье рассказывается про способы поиска элементов, которые вызывают переполнение и приводят к появлению нежелательных полос прокрутки. Про решение проблем с каскадом. Про ошибки, вызванные неконсистентностью браузеров. Про проблемы CSS, которые чрезмерно опираются на структуру документа. В тексте есть много ссылок на смежные статьи, которые будут полезны всем, кто не очень сильно погружён в вёрстку.

Тем не менее в статье есть и странные моменты. В разделе про уменьшение сдвига контента описывается проблема и приводится несколько общих советов, но нет рекомендаций по отладке. Также ожидал увидеть рекомендации по отладке ошибок, связанных с контекстом наложения (stacking context), но их нет.

#css #debug

https://www.smashingmagazine.com/2021/10/guide-debugging-css/

Телеграм-каналы подписчиков, выпуск #2

@sergeysova — Сергей Сова о фронтенде и разработке на Rust, авторские подкасты и дайджесты с новостями фронтенда

@amorgunov — Александр Моргунов из Яндекс.Макрета про работу, фронтенд, Node.js и другие темы

@dev_easy — авторские статьи Евгения Зайцева, подробно и основательно

@deveveloper_house_jun_front — канал и сообщество для начинающих фронтендеров

@sijekotech — ссылки на технические и дизайнерские темы

Спекулятивный пререндеринг в Chrome

Лина Сохони и Эдди Османи рассказали про новый способ пререндеринга страниц — "Bringing instant page-loads to the browser through speculative prerendering".

Хинт производительности prerender сообщает браузеру о необходимости отрендерить новую страницу заранее (спекулятивно). Если браузер неактивен и если в нём отключен режим сохранения траффика, то он загрузит необходимые ресурсы и запустит процесс рендеринга, тем самым страница будет открываться быстрее.

В Chrome 94 в рамках origin trail появилась поддержка Speculation Rules API. В отличии от хинта prerender c помощью API можно гибко управлять пререндером страниц и предзагрузкой ресуров. На данный момент реализована только часть API — возможно пререндерить только заранее указанный список URL. В будущем появится возможность пререндеринга набора URL по шаблону. Также можно будет указать вероятность открытия страницы, чтобы браузер оптимально тратил вычислительные ресурсы пользователя.

#chrome #performance #api

https://web.dev/speculative-prerendering/

Телеграм-каналы подписчиков, выпуск #1

На мой призыв поделиться своим блогом откликнулось 13 человек. Среди присланных каналов есть очень крутые. Чтобы они не потерялись в большом списке, он будет поделён на три части и опубликован в ближайшие дни. Таким образом у вас будет время заглянуть во все каналы и поддержать подпиской понравившиеся.

@msosnovfeed — обзоры статей про архитектуру, управление разработкой, тестирование и фронтенд от Макса Соснова из Тинькофф

@web_platform — Виталий Зюзин из HTML Academy про веб-разработку

@british_frontend — персональный блог про жизнь разработчика в Великобритании

@ru_react_notes — заметки про React

Partytown — запуск сторонних скриптов в веб-воркере

Автор фреймворка Ioinic Адам Бредли представил новую библиотеку для запуска сторонних скриптов в веб-воркере — "Introducing Partytown: Run Third-Party Scripts From a Web Worker".

Разработчики JS-фреймворков вкладывают много сил, чтобы пользовательские приложения были быстрыми и отзывчивыми. Эти усилия могут нивелировать сторонние скрипты. Например, добавление на сайт Google аналитики срезает 20 баллов производительности в Lighthouse, так как увеличивается время инициализации страницы.

Partytown позволяет вынести сторонние скрипты в веб-воркер, разгружая основной поток выполнения. У скриптов в воркере появляется синхронный доступ к DOM, который реализуется с помощью Proxy и блокирующих XHR-запросов.

На данный момент доступна альфа-версия библиотеки. Простестирован сандбоксинг скриптов Google Analytics, Google Tag Manager, Amplitude и нескольких других сервисов.

Очень полезная библиотека, попробую её у себя в проекте.

#js #library #performance

https://dev.to/adamdbradley/introducing-partytown-run-third-party-scripts-from-a-web-worker-2cnp

Влияние потребления памяти на производительность

Тим Кадлек попробовал сформировать критерии оптимального потребления памяти страницы — "Benchmarking JavaScript Memory Usage".

В Chrome 83 появилась возможность измерения потребляемой памяти страницы с помощью метода performance.measureMemory. В январе 2021 года он был переименован в performance.measureUserAgentSpecificMemory. Несмотря на то что API существует уже довольно долго, разработчики ещё не полностью понимают, как его использовать для анализа производительности страницы. Основная проблема — недостаток данных, чтобы понимать какой объём потребляемой памяти считать приемлемым, а какой избыточным.

Тим пытается ответить на этот вопрос с помощью сбора метрик с 10000 популярных сайтов и распределения результатов по перцентилям. В итоге он предложил следующее распределение:
— хорошо: <4.8MB
— нуждается в улучшении: >4.8MB и <19.4MB
— плохо: >19.4MB

Также в статье есть исследование влияния используемых JS-фреймворков на объём потребляемой памяти. Больше всего памяти потребляют React и Angular. Это объясняется бо́льшим количеством доставляемого кода по сравнению с Vue и jQuery.

#js #performance

https://blog.webpagetest.org/posts/benchmarking-javascript-memory-usage/

Поддержка телеграм-каналов

Если среди вас есть авторы небольших телеграм-каналов и вы хотите его немного попиарить, киньте мне на него ссылку в лс (@myshov) или чат канала (@defrontchat). Сделаю подборку каналов и размещу её тут, разумеется бесплатно. С вашей стороны никаких обязательств нет. Главное условие, чтобы в канале было менее тысячи подписчиков (если чуть больше, тоже ок) и чтобы он был про разработку.

Зачем мне это надо? Я считаю, что нужно помогать другим. Defront тоже в самом начале поддержали безвозмездно, и, возможно, поэтому я его не забросил. Ну и вдруг среди вас есть будущий Ричард Хикки, терять таких людей не хочется.

Потенциальные проблемы с сертификатами Let's Encrypt

Вчера Скот Хелм написал статью о том, что 30 сентября истёк срок действия корневого сертификата IdentTrust DST Root CA X3, который используется Let's Encrypt. Из-за этого на старых устройствах перестали открываться некоторые сайты, так как сертификат Let's Encrypt используют миллионы HTTPS-сайтов. Эта ситуация возникла из-за прекращения обновления прошивок старых устройств.

IdentTrust и Let's Encrypt придумали решение, чтобы корневой сертификат оставался валидным до 2024 года для Android-устройств с версиями ОС выше 2.3.6. Пользователи Android с более старыми версиями столкнутся с проблемами.

Сертификат IdenTrust DST Root CA X3 невалиден для:
— Windows < XP SP3
— macOS < 10.12,
— iOS < 10
— Android < 7.1.1 (версии >= 2.3.6 будут работать с ISRG Root X1 cross-sign)
— OpenSSL <= 1.0.2
— Ubuntu < 16.04
— Debian < 8
— Mozilla Firefox < 50
— Java 8 < 8u141
— Java 7 < 7u151,
— NSS < 3.26
— Amazon FireOS (Silk Browser)

Если у вас или у ваших знакомых внезапно перестал открываться любимый сайт, то скорее всего причина в этом.

#announcement #security

https://scotthelme.co.uk/lets-encrypt-old-root-expiration/

Клон Quake в 13kb

Каждый год проходит ивент js13kGames. Его участники разрабатывают браузерные игры размером не более 13kb. В этом году Доменик Саблевски сделал клон Quake и рассказал о нюансах его разработки — "Q1K3 – Making Of".

В Q1K3 используется динамическая генерация текстур, чтобы уменьшить общий размер игры. Для упрощения создания таких текстур Доменик разработал визуальный редактор. В качестве формата карт используется сильно модифицированный формат карт Quake .map. В игре используется восемь моделей, которые модифицируются при запуске игры для создания большего разнообразия персонажей и предметов. Например, изменяются пропорции модели человека для создания разных моделей противников. Для музыки и эффектов используется Sonant-X — JS-библиотека синтеза звука. Для сжатия кода игры используется uglifyJS и Roadroller.

Хорошая статья. Рекомендую почитать, если интересуетесь оптимизациями и графикой.

#webgl

https://phoboslab.org/log/2021/09/q1k3-making-of

Анализ JS-бандла с помощью Lighthouse Treemap

Сиа Кармаленгос написала статью про новый инструмент анализа JS-бандлов, доступный в Lighthouse — "Explore JavaScript Dependencies With Lighthouse Treemap".

В последних версиях Lighthouse появилась новая фича — визуализация JS-бандлов с помощью Treemap. Если вы знакомы с webpack-bundle-analyzer, то уже можете представить себе новый инструмент. Основное отличие Treemap в Lighthouse — возможность анализа бандлов любых сборщиков. Если сборка происходит с генерацией сорс-мапов, то в Treemap будут отображаться названия модулей. Но самая интересная функция — оценка покрытия кода. Если включить опцию "unused bytes", то можно оценить сколько кода было загружено, но не выполнено.

Поддержка Lighthouse Treemap уже доступна в сервисе PageSpeed Insights, Lighthouse Node CLI и Chrome Canary.

#tool #js #bundle #performance

https://sia.codes/posts/lighthouse-treemap/

Обзор CSS Cascade Layers

Брамус Ван Дамм написал статью про Cascade Layers — "The Future of CSS: Cascade Layers (CSS @layer)".

Полгода назад София Валитова написала хорошую статью про @layer. В статье Брамуса дополнительно рассматриваются краевые случаи использования слоёв: поведение import! внутри слоя, использование Cascade Layers с медиавыражениями, запрет на перемешивание @import/@namespace и @layer. Подробно разбирается мотивация добавления слоёв в стандарт с большим количеством примеров.

Экспериментальная поддержка @layer уже есть в Canary-версиях Firefox и Chrome. Также ведутся работы по его добавлению в WebKit.

#css

https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/

Новая CSS-инфраструктура Chrome DevTools

Крити Сапра написала статью про обновлённый подход подключения CSS в кодовой базе Chrome DevTools — "Modernising CSS infrastructure in DevTools".

В кодовой базе DevTools очень долгое время использовалась устаревшая модульная система. С её помощью происходило разрешение зависимостей между JS-файлами и подключение CSS. При переходе на TypeScript возник вопрос отказа от старой модульной системы и миграции существующих стилей. Самым подходящим вариантом стала автоматическая конвертация стилей в JS-файлы, которые экспортируют объект CSSStyleSheet. Таким образом из любого сконвертированного файла можно импортировать стили и применить их к веб-компонентам с помощью adoptedStyleSheets.

Такое решение позволило избавиться от проблемы дублирования стилей, от потенциальной коллизии названия классов и подготовило код для дальнейшей миграции на CSS Module Scripts. В статье также говорится о том, что сама спецификация CSS Module Scripts родилась из задачи обновления модульной системы в DevTools.

#css #migration #chrome

https://developer.chrome.com/blog/modernising-css-infra-in-devtools/

Релиз Safari 15

На сайте Apple Developer был опубликован список самых интересных фич, которые появились в новой версии Safari — "Safari 15 Release Notes".

Улучшена интеграция с iCloud Keychain Password Manager. Теперь на странице можно включить автодополнение для проверочных кодов, генерируемых в приложении. Работает интеграция с QR-кодами аутентификации. В экспериментальном режиме добавлен "passkeys" (реализация WebAuthn для Safari).

В CSS добавлена реализация aspect-ratio. Для цветов можно использовать новый синтаксис lab(), lch() и hwb(). Добавлена возможность использования цветовых пространств в color().

В HTML появилась поддержка theme-color для тега meta, с помощью которого можно управлять цветом вкладок и нейтральной области страницы.

В JavaScript-движке добавлены top level await, Error.cause, BigInt64Array, BigUint64Array. Добавлена поддержка приватных методов и акcессоров классов. Воркеры и сервис воркеры теперь поддерживают ESM.

Стабилизирована поддержка WebGL 2. Добавлено аппаратное ускорение для кодека VP9 на всех iPad с iPadOS 15. Появилась поддержка Safari Web Extensions на iOS и iPadOS. В WebAssembly добавлена поддержка ссылочных типов, стриминговой компиляции и балковых операций с памятью.

#safari #release

https://developer.apple.com/documentation/safari-release-notes/safari-15-release-notes

Релиз Chrome 94

Вчера вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали о новинках релиза — "New in Chrome 94".

При создании двумерного контекста рисования canvas появилась возможность выбора цветового пространства. По умолчанию используется sRGB (оно было и раньше, сейчас это закреплено на уровне спеки), можно также выбрать цветовое пространство P3.

Стал доступен WebCodecs API. Благодаря ему приложения могут использовать кодеки для декодирования видеопотока с поддержкой аппаратного ускорения. Это очень полезно для видеоредакторов, приложений видеоконференций и стриминга.

В рамках Origin Trial можно включить WebGPU. WebGPU позволяет эффективно использовать ресурсы видеокарты для обработки графики и других вычислений.

Был добавлен метод scheduler.postTask() для управления задачами. Под капотом этот метод использует планировщик браузера. Добавлена экспериментальная поддержка CSS-свойства scrollbar-gutter. Добавлена поддержка VirtualKeyboard API. Поддержка WebSQL задеприкейчена и запланирована к удалению в Chrome 97.

В инструментах разработчика появилась локализация интерфейса на 80 языков. Теперь можно посмотреть список всех активных Origin Trials на вкладке Application при выборе фрейма верхнего уровня. Появилась индикация для контейнеров, инвертирование активного фильтра на вкладке Network и т.д.

#chrome #release

https://developer.chrome.com/blog/new-in-chrome-94/
https://developer.chrome.com/blog/new-in-devtools-94/

Способы уменьшения размера JavaScript-бандла

Бэн Шварц поделился советами о том, как держать размер JavaScript-бандла под контролем — "Small Bundles, Fast Pages: What To Do With Too Much JavaScript".

В статье Бэн рассказывает про общие вещи: о влиянии больших бандлов на производительность страницы, об оптимальном размере загружаемого кода (300kb) и о бюджете производительности. Есть более конкретные советы, например, использовать плагин Import Cost во время разработки, чтобы размер подключаемых библиотек был всегда на виду. Также есть рекомендации по использованию стороннего кода: о хостинге кода на своём сервере и использовании фасадов для уменьшения времени инициализации страницы.

В общем, хорошая обзорная статья для тех, кто начинает погружаться в тему производительности.

#performance #bundle

https://calibreapp.com/blog/bundle-size-optimization

В каких случаях можно использовать any

Стэфан Баумгартнер поделился своими мыслями о том, в каких случаях можно использовать тип any в TypeScript — "TypeScript: In defense of any".

Хорошим тоном считается отказ от any, но в некоторых случаях это невозможно. Например, при постепенной миграции большой кодовой базы на TypeScript. В тех местах, где нужно "нахакать". Также any незаменим при использовании сторонних библиотек без типизации.

Во всех случаях использование any нужно контролировать. Этому может помочь опция noImplicitAny, которая обязывает разработчика указывать тип any явно.

#typescript

https://fettblog.eu/typescript-any-is-ok/

Анимирование открывающихся блоков без лагов

Сэм Торогуд из Google рассказал о том, как реализовать аккордеон, который будет работать плавно даже на слабых устройствах — "How I Learnt To Stop Worrying And Love Animating The Box Model".

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

Для решения этой проблемы нужно вынести сдвигаемые элементы в отдельный слой рендеринга с помощью свойства will-change. Чтобы зря не тратить ресурсы (страница с большим количеством слоёв потребляет больше памяти), можно устанавливать will-change перед началом анимации и удалять после завершения.

Полезная статья. Рекомендую почитать всем, кто разрабатывает интерфейсы.

#performance #css

https://whistlr.info/2021/box-model-animation/

Сокращение информации в User-Agent Chrome

В январе 2020 года разработчики Chrome объявили о намерении сократить передаваемую информацию в User-Agent для улучшения приватности. Из-за пандемии этот процесс отложили, и вот несколько дней назад был опубликован обновлённый план — "User-Agent Reduction Origin Trial and Dates".

Начиная с Chrome 92 (июль 2021) при обращении к методам navigator.userAgent, navigator.appVersion, navigator.platform выводится предупреждение. С четвёртой фазы (в Chrome 101) актуальной станет только мажорная версия; MINOR.BUILD.PATCH будут обнулены — Chrome 101.0.0.0. В шестой фазе (Chrome 110) на смартфонах будет удалена информация о модели устройства. В седьмой фазе (Chrome 113) миграция на новый формат User-Agent будет завершена. Если сайтам нужна детальная информация о клиенте, то они смогут получить к ней доступ с помощью User Agent Client Hints.

#chrome #announcement

https://blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.html