Релиз 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

Новая 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/

Обзор 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/

Анализ 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/

Клон 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

Потенциальные проблемы с сертификатами 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/

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

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

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

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

Тим Кадлек попробовал сформировать критерии оптимального потребления памяти страницы — "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/

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

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

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

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

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

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

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

Спекулятивный пререндеринг в 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/

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

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

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

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

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

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

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

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

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

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

#css #debug

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

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

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

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

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

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

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

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/

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

@typesafesound — Михаил Башуров про TypeScript и разработку

@asterisk_js — ссылки на полезные статьи и github-проекты, связанные с веб-разработкой (иногда таскаю отсюда ссылки)

@core_dump_channel — Дмитрий Карловский про программирование и computer science

@mol_news — новости об экосистеме фреймворка $mol

@roboxv — советы и статьи про веб-разработку и около

Прекращение поддержки IE11 в Google Search

Разработчики Google Search сообщили о прекращении поддержки Internet Explorer 11. Прекращение поддержки означает перевод пользователей IE11 в специальную версию поисковика, которая обслуживает неактуальные браузеры. Также в декабре 2020 года была прекращена поддержка IE11 в Gmail и Google Docs.

Если вы до сих пор исправляете ошибки в Internet Explorer, появился хороший повод, чтобы обдумать с вашими менеджерами целесообразность его поддержки.

#announcement #google #ie

https://9to5google.com/2021/10/01/google-search-internet-explorer-11/

Релиз Firefox 93

На прошлой неделе вышла новая версия Firefox. Рут Джон рассказала про новинки релиза — "Lots to see in Firefox 93!".

Была добавлена поддержка формата AV1 Image File Format. AVIF — это открытый формат изображений, выигрывающий у WebP по степени сжатия и показывающий наилучшие результаты для небольших изображений.

Улучшена поддержка кастомных элементов. Добавлено событие slotchange, возникающее при изменении содержимого слота. Добавлен метод HTMLElement.attachInternals() для доступа к внутренним свойствам и методам инпутов. Добавлено свойство ElementInternals.shadowRoot для доступа к Shadow Root внутри кастомного элемента.

Добавлен новый тип инпута <input type="datetime-local"> для выбора даты и времени. Появилась поддержка синтеза глифов шрифта для маленьких заглавных букв ( small-caps ) с помощью CSS-свойства font-sythesis. Метод createImageBitmap теперь поддерживает опции imageOrientation и premultiplyAlpha.

В DevTools исправлено много утечек памяти, возникающих во время долгих сессий отладки.

#release #firefox

https://hacks.mozilla.org/2021/10/lots-to-see-in-firefox-93/

За прошедшие две недели в канале для патронов Defront было опубликовано одиннадцать постов:

— Падение Facebook и неотзывчивые скрипты
— В защиту скучных языков программирования
— DOM Treemap — плагин для визуализации DOM-узлов
— Настройка простого монорепозитория
— Использование TypeScript без компиляции
— Веб-стримы в браузерах и на сервере
— Субъективный взгляд на бюджет производительности
— Исследование сайтов компаний Fortune 500
— Краткое объяснение каскада CSS
— Изменение часовых поясов за последние 120 лет
— Опыт оптимизации крупнейшего сайта объявлений Франции

Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus.

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov

CORS — история появления и нюансы использования

Джейк Арчибальд написал статью про CORS с интерактивными примерами — "How to win at CORS".

Впервые управление кроссдоменными-запросами появилось в Flash с помощью файла /crossdomain.xml, в котором описывались права доступа сторонних сайтов. В 2005 году рабочая группа W3C Voice Browser Working Group предложила альтернативное решение для XML-ресурсов. Так как XML не получил широкого распространения для представления HTML-документов, предложение рабочей группы трансформировалось в CORS (Cross-Origin Resource Sharing), который управляется с помощью HTTP-заголовка: Access-Control-Allow-Origin.

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

#web #security #history

https://jakearchibald.com/2021/cors/