Брайан Карделл из Igalia поделился планами по прототипированию поддержки CSS-селектора :has() — "Can I :has()".

Cелектор :has() добавляет в CSS возможность стилизации элемента на основе его содержимого. Это единственный селектор в таком роде — другие селекторы работают по направлению от детей к родителям. Он появился в черновике спецификации Selectors Level 4 в 2011 году, но до сих пор не был имплементирован в браузерах. Основная сложность заключается в том, что :has() ломает принципы работы со стилями, которые лежат в основе многих оптимизаций, благодаря которым браузеры могут поддерживать стабильные 60 fps.

На протяжении десяти лет в рабочей группе CSS возникали обсуждения по поводу :has(), но они никуда не вели, потому что никто не брался за прототипирование. Недавно компанию Igalia наняла компания eyeo (разрабатывает Adblock Browser и Adblock Plus) для того, чтобы сдвинуть эту фичу с мёртвой точки. Ребята планируют сделать прототипы и в принципе понять, возможно ли реализовать :has() без проблем для производительности. Этот эксперимент определит дальнейшую судьбу селектора. Либо он будет добавлен в браузеры, либо его функциональность будет реализована в другом виде, например, на уровне DOM API.

#css #experimental

https://bkardell.com/blog/canihas.html

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

— Приоритизация загрузки ресурсов HTML-страницы
— Островная архитектура (Islands Architecture)
— Неизвестный HTML
— Zx — утилита для упрощения работы с shell-скриптами
— Разработка компонента для просмотра введённого пароля
— Недостатки снапшот-тестов
— Opossum — реализация паттерна circuit breaker в Node.js
— Разочарование в JPEG XL
— Как убедить других разработчиков в правоте своей идеи
— Преимущества и недостатки сабсеттинга шрифтов

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

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

https://www.patreon.com/myshov

Дэн Вандеркам рассказал о ситуациях, в которых система типов TypeScript проявляет свою ненадёжность (unsoudness) — "The Seven Sources of Unsoundness in TypeScript".

Надёжная система типов гарантирует соответствие статических типов в коде программы фактическим типам на этапе её выполнения. В TypeScript система типов ненадёжна. Более того разработчики языка осознанно не преследуют цель создания надёжной системы типов, потому что это противоречит более важной цели — максимально поддержать паттерны и подходы, используемые в JavaScript. Поэтому при использовании TypeScript нужно учитывать потенциальные проблемы, чтобы код не взорвался в продакшене.

Самые главные источники ненадёжности — это использование any, type assertions, получение значений из объектов и массивов, неправильные определения типов библиотек, вариантность при работе с массивами, отсутствие инвалидации уточнения типов после вызова функции и рекурсивные типы.

Очень хорошая статья. Рекомендую почитать всем, кто использует TypeScript.

#typescript

https://effectivetypescript.com/2021/05/06/unsoundness/

Learn CSS — An evergreen CSS course

https://web.dev/learn/css/

На сайте web.dev появился курс для изучения CSS. В нем основные фундаментальные темы CSS вынесены в отдельные секции, что удобно для изучения конкретной части, а не все сразу. Как можно понять из определения, обещают поддерживать в актуальном состоянии.
Кстати, на web.dev есть множество курсов по другим темам

Минко Гечев из Google представил Angular DevTools — "Introducing Angular DevTools".

Angular DevTools — это расширение для Chrome, облегчающее отладку и профилирование Angular-приложений. Оно было разработано с нуля с участием разработчиков Augury — популярного расширения для отладки Angular.

С помощью Angular DevTools можно инспектировать и редактировать дерево компонентов, профилировать исполнение цикла отслеживания изменений (change detection cycle). Также в рамках этого проекта был улучшен опыт отладки Angular-приложений: был добавлен новый API и улучшены сообщения об ошибках. В следующих релизах разработчики планируют добавить наиболее полезные фичи Augury.

Angular DevTools поддерживает приложения, разработанные с помощью Angular v9 и выше на базе Ivy.

#angular #debug #announcement

https://blog.angular.io/introducing-angular-devtools-2d59ff4cf62f

Андрей Мелихов на канале ДевШахты рассказал про Server-Sent Events API — "Server-Sent Events: Простая замена веб-сокетов".

Если вам нужно читать данные с сервера в реальном времени, то не обязательно для этого использовать веб-сокеты. Для этой цели хорошо подходит Server-Sent Events API (SSE API). В отличие от веб-сокетов он используется для создания однонаправленного канала связи с сервером и не так сложен в использовании.

Для работы с SSE на клиенте используется класс EventSource, которому нужно передать url сервера. Сервер в свою очередь должен отправлять поток данных с метаинформацией обычным текстом, так как SSE работает поверх HTTP. Поддержка SSE есть во всех современных браузерах.

Рекомендую посмотреть видео, если раньше не приходилось работать с SSE.

#api #video

https://www.youtube.com/watch?v=CJrmK3IXC8o

Иан Бин написал хорошее руководство по оптимизации загрузки шрифтов — "5 steps to faster web fonts".

Иан рассказывает про основные способы ускорения загрузки шрифтов: preload, preconnect, хостинг шрифтов на основном домене, использование WOFF2 и т.п. Про уменьшение размера файла шрифта с помощью сабсеттинга и возможные проблемы, которые могут появиться после применения этой оптимизации.

Очень доступно с помощью диаграмм объясняется суть опций дескриптора font-display:

— Опция swap используется для замены фоллбек-шрифта загруженным шрифтом без ограничения по времени, при этом текст рендерится с помощью фоллбек-шрифта без задержки.

— При использовании опции block браузер ждёт загрузку шрифта примерно три секунды и не отображает текст. По истечении трёх секунд отображается фоллбек-шрифт, который заменяется загруженным шрифтом без ограничений по времени.

— С опцией optional веб-шрифт будет отображён только в том случае, если он будет загружен в первые 100 миллисекунд после начала загрузки страницы. Если за это время шрифт не успеет загрузиться, текст будет отображён с помощью фоллбек-шрифта. Тем самым пользователи сайта не столкнутся со сдвигом контента из-за смены шрифтов при первом визите.

— С опцией fallback браузер также ждёт 100 миллисекунд прежде чем отобразить фоллбек-шрифт, но в отличие от optional шрифт будет заменён, если он загрузится не более чем за три секунды.

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

#performance #fonts

https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/

Два дня назад вышла новая мажорная версия текстового редактора Sublime Text. Бенджамин Шааф рассказал о его новых возможностях — "Sublime Text 4".

Теперь Sublime Text поставляется со встроенной поддержкой TypeScript, TSX и JSX. Есть все основные фичи: подсветка синтаксиса, автодополнение кода, переход к объявлению.

Переработан UI приложения. Теперь его компоновка происходит на GPU, улучшая отзывчивость интерфейса при работе с большими проектами. Также немного обновили дизайн и добавили поддержку автоматической смены тем.

Был переписан движок автодополнения кода. Теперь он понимает структуру проекта и, в целом, стал более полезен. В списке автодополнения были добавлены значки типа символа и опция для перехода к месту его объявления в коде.

Был улучшен движок подсветки синтаксиса. Упрощено открытие вкладок в режиме split view. Добавлена нативная поддержка Apple Silicon и Linux ARM64.

#tool #programming #announcement

https://www.sublimetext.com/blog/articles/sublime-text-4

Брайан Люиз Рамирез рассказал об использовании Local Overrides для анализа производительности сайта — "Using Chrome Local Overrides To Optimize Page Speed".

Local Overrides — это фича Chrome DevTools, с помощью которой можно временно подменить любой ресурс сайта. Например, в инструментах разработчика можно поправить index.html, добавить исправленный HTML в Local Overrides, и при повторном переходе на сайт вместо оригинального index.html будет браться его изменённая версия.

Этот трюк очень хорошо подходит для исследования влияния потенциальных оптимизаций. Для упрощения анализа исправлений автор статьи поделился своим скриптом для сбора метрик.

Рекомендую почитать статью и поэкспериментировать с Local Overrides. Эта фича может быть полезна для любых быстрых экспериментов.

#performance #debug

https://blr.design/blog/local-overrides/

Пару дней назад Эрик Симонс — создатель StackBlitz, online-песочницы для разработки приложений — рассказал о новой фиче проекта — "Introducing WebContainers: Run Node.js natively in your browser".

WebContainers — это проприетарный механизм для запуска Node.js-приложений внутри браузера с помощью WebAssembly. В StackBlitz он используется для создания локальной изолированной среды для разработки серверных приложений внутри браузера (Next.js, NestJS). Несмотря на исполнение кода с помощью wasm-версии Node.js работает всё быстро. В статье написано, что сборка приложения в WebContainer быстрее локальной сборки на 20%. Этот результат получен благодаря использованию кастомного npm-клиента (об этом Эрик написал в комментариях на HackerNews).

Кроме скорости у WebContainers есть другие плюсы. Потенциальные вредоносные скрипты не смогут получить доступ к машине-хосту. Очень просто разворачивать новые среды, что хорошо подходит для быстрого тестирования фич или создания примеров кода с воспроизведением ошибок. Есть бесшовная интеграция с отладчиком Chrome DevTools

В общем, интересная технология, но на данный момент она находится в статусе беты и работает только в Chromium-based браузерах.

#nodejs #webassembly #announcement

https://blog.stackblitz.com/posts/introducing-webcontainers/
https://news.ycombinator.com/item?id=27223012

Барри Поллард рассказал про новые CSS-дескрипторы директивы @font-face, помогающие уменьшить сдвиг контента после загрузки шрифта, — "A New Way To Reduce Font Loading Impact: CSS Font Descriptors".

Для управления загрузкой шрифтов используется директива font-display. Очень часто её используют со значением swap, так как текст страницы с ней появляется сразу и посетителям страницы не нужно ждать загрузки шрифта. Но при использовании font-display: swap возникает проблема со сдвигом контента, из-за которой посетители во время чтения текста могут потерять текущую позицию в тексте.

Для решения этой проблемы был придуман подход с использованием Font Loading API и сопоставлением метрик фоллбек-шрифта с метриками загружаемого шрифта. Этот подход работает, но он не очень удобен в реализации. По этой причине в рамках спецификации CSS Fonts Module Level 5 были добавлены новые дескрипторы size-adjust, descent-override, line-gap-override, advance-override, с помощью которых можно задать дополнительные метрики для фоллбек-шрифта, уменьшая непредсказуемый сдвиг контента. В коде это выглядит так:

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: "Lato-fallback";
  size-adjust: 97.38%;
  ascent-override: 99%;
  src: local("Arial");
}

h1 {
  font-family: Lato, Lato-fallback, sans-serif;
}

На данный момент поддержка descent-override, line-gap-override, advance-override уже есть в Chrome и Firefox. Поддержка size-adjust появилась недавно в Chrome Canary и в Firefox за экспериментальным флагом.

#performance #fonts #ux #css

https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/

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

В десктопной версии Chrome было добавлено API для доступа к файлам из буфера обмена. Доступ к файлам из буфера возможен только при обработке события paste.

Появилась возможность разделения сохранённой информации из менеджера паролей между разными доменами. Это полезно для тех сайтов, которые используют общий бэкенд для управления пользователями на разных доменах, например, google.com и google.ru.

В File System Access API добавлены новые опции для задания директории по умолчанию и задания дефолтного имени файла. Появилась полноценная поддержка Web Assembly SIMD. У фавиконок теперь можно использовать атрибут media, с помощью которого можно менять иконку сайта в зависимости от текущей темы операционной системы.

В DevTools появился инструмент для визуальной отладки scroll-snap. Добавлен инспектор памяти для анализа ArrayBuffer и памяти WebAssembly. Появилась опция для тестирования Content-Encoding. Улучшена поддержка дебага приватных полей классов. Улучшена фича для отображения структуры файла (outline) на вкладке "Sources" и т.д.

#chrome #release

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

Вчера зарелизился TypeScript 4.3. Дениэл Розенвассер рассказал о всех фичах новой версии.

Улучшена работа с сеттерами и геттерами. Теперь возможно указывать разные типы для чтения/записи свойств классов и объектов (separate write types).

Для решения проблем со случайным переопределением членов родительского класса теперь можно использовать ключевое слово override и флаг компиляции --noImplicitOverride.

Улучшен вывод строковых шаблонных типов при использовании шаблонных строк и типов-параметров в дженериках.

Было оптимизировано время первой сборки приложений, использующих опции --incremental и --watch, за счёт ленивого вычисления необходимых данных.

Добавлена реализация приватных полей классов из ECMAScript. Улучшено сужение типов (type-narrowing) при работе с дженериками, Хелпер ConstructorParameters теперь можно использовать с абстрактными классами. С включённой опцией strictNullChecks теперь нельзя использовать промисы без await внутри условий. Улучшен механизм автодополнения импортов.

#typescript #release

https://devblogs.microsoft.com/typescript/announcing-typescript-4-3/

Эдди Османи написал большую статью про элемент <img> и его влияние на производительность — "The Humble img Element And Core Web Vitals".

В статье Эдди рассказывает про разные аспекты использования изображений, которые могут оказывать негативный эффект на метрики Core Web Vitals. Например, если у изображений не установлены атрибуты width и height, загрузка изображений будет приводить к смещению элементов на странице, ухудшая метрику Cumulative Layout Shift (CLS). Если основное изображение сайта загружается слишком поздно, например, после выполнения клиентского кода, то будет ухудшаться метрика Largest Contentful Paint (LCP). В этом случае нужно добавить изображение в HTML-разметку или загрузить его с помощью preload, если предыдущий вариант не подходит.

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

#performance #html

https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/

Владан Дзерик из Facebook рассказал об изменении приоритетов разработки Flow — "Clarity on Flow’s Direction and Open Source Engagement".

Разработка Flow теперь полностью сконцентрируется на потребностях Facebook: быстрой проверке типов на огромной кодовой базе, улучшению типобезопасности и DX. Проект будет продолжать разрабатываться на GitHub, но пулл-реквесты и ишью, не совпадающие с видением разработчиков, будут закрываться. Встроенные определения типов (DOM, Node, React и т.п.) будут вынесены в репозиторий flow-typed, чтобы их обновление не было привязано к релизному циклу Flow. Также планируют добавлять новые синтаксические конструкции. И по этому поводу хочется немного поспекулировать.

Исторически Flow позиционировался как "JavaScript с типами", то есть как тайпчекер. С добавлением новых синтаксических структур он превратится в полноценный язык. По сути Flow становится языком для фронтенда, кодовая база которого на 100% принадлежит Facebook. [Также вы можете вспомнить про Rescript (ex-ReasonML), но он полагается на bucklescript, разработанный Bloomberg, и насколько я знаю, Facebook не участвует в его развитии.] С учётом того, что в Facebook работают довольно сильные спецы по дизайну языков (знаю точно, что там работает Эрик Майер), в итоге может получиться что-то интересное.

#flow #announcement

https://medium.com/flow-type/clarity-on-flows-direction-and-open-source-engagement-e721a4eb4d8b

Sparkplug — новый неоптимизирующий компилятор JavaScript

Оказывается V8 9.1 был добавлен новый неоптимизирующий компилятор Sparkplug. Благодаря отсутствию оптимизации, процесс компиляции происходит гораздо быстрее. По сути, этот компилятор переводит байткод в соответствующие им инструкции. Такой подход позволяет быстрее начать выполнять код на этапе загрузки, а также переключаться на оптимизированный код и обратно. Подход дает выигрыш, так как на старте многие оптимизации все равно не возможны из-за отсутствия фидбека по исполнению кода. На данный момент получилось достичь 5-15% прироста производительности, но пока реализованы не все идеи связанные с новым компилятором. Больше технических деталей и графиков в статье блога V8: https://v8.dev/blog/sparkplug

Макс Бок написал статью о том, почему выражения от контейнера очень важны для дальнейшего развития веб-компонентов — "Container Queries in Web Components".

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

#webcomponents #css #experimental

https://mxb.dev/blog/container-queries-web-components/

Недавно вышла новая версия Jest. Тим Секингер рассказал о новинках релиза — “Jest 27: New Defaults for Jest, 2021 edition”.

— В интерактивном режиме появилась возможность поочерёдного перехода по упавшим тестам.
— Инлайн-снапшоты теперь можно использовать без подключения Prettier.
— Инициализация тестов была ускорена на 70%.
— Продолжается работа над внедрением ESM. Её поддержка уже есть в кастомных раннерах, репортерах и watch-плагинах.
— Добавлена асинхронная поддержка transform для эффективной транспиляции с помощью esbuild, Snowpack и Vite.
— Реализации функций describe, it, beforeEach заменена соответствующими реализациями из jest-circus.
— Теперь используется новая реализация для мока таймеров. В очень редких случаях они могут сломать тесты, но есть возможность отката на старую версию с помощью jest.useFakeTimers("legacy").
— Изменено дефолтное тестовое окружение на node. Для возврата к старому поведению нужно использовать опцию "testEnvironment": "jsdom".
— Изменена логика работы функции done. Её коллбек нельзя вызвать более одного раза и нельзя комбинировать вызов done с возвратом промиса. Блоку describe запрещено возвращать какие-либо значения.
— Модули, загружающиеся с помощью опций testEnvironment, runner, testRunner и snapshotResolver, теперь транспилируются.
— Удалены задеприкейченные методы jest.addMatchers, jest.resetModuleRegistry, jest.runTimersToTime.

#testing #tool #release

https://jestjs.io/blog/2021/05/25/jest-27

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

— Разница между хорошими и отличными библиотеками компонентов
— Технологический стек SpaceX
— Чем похожи REST и GraphQL
— Определение статуса активности текущего таба
— Сложности реализации корректного поведения кнопок
— Противостояние продуктовых и платформенных разработчиков
— Уменьшение объёма node_modules с помощью трассировки
— Будущее разработки веб-приложений
— Опыт разработки PWA телевизионной компании
— Почему ассёрты не могут заменить юнит-тесты

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

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

https://www.patreon.com/myshov

Девид Соммерс рассказал о том, почему при разработке сайтов не нужно фокусироваться на айфонах, даже если они преобладают в аналитике — "Stop building websites for iPhones".

Девид разрабатывает сервисы для аренды жилья в Соединённых Штатах. В аналитике одного из его проектов видно значительное преобладание айфонов. Это результат того, что строка User-Agent Safari не меняется для разных устройств (iPhone 5, SE, 6, 7, 8, X, 11), тем самым создавая иллюзию того, что у пользователей производительные устройства. Проанализировав данные по айфонам с учётом разрешения экрана (благодаря разрешению можно примерно предсказать конкретную модель iPhone) и других моделей смартфонов оказалось, что примерно 38%-45% посетителей сайта используют медленные устройства.

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

#performance #mobile

https://blog.rentpathcode.com/analyzing-performance-e7aed196df64