Что там нового в вебе?

Приближение нового года натолкнуло меня на мысль составить список наиболее интересных рюшечек в вебе. После ленивого серфинга интернета, наткнулся на блог Google Chrome. Эти то ребята шарят, как изнасиловать пожесче и так замученный веб. У них есть удобный список публикаций по месяцам, а самое интересное — посты из серии "Что нового в версии XX". Все это безобразие вот тут.

Chrome 80 еще нет в stable релизе, но описание DevTools выходит раньше. Вот что добавили: поддержка переопределений let и class в консоли, улучшения для отладки WebAssembly, цепочки инициаторов запроса в network, ну и прочие плюхи, про которые можно почитать тут.

Chrome 79 / 2019.12

https://developers.google.com/web/updates/2019/12/nic79

Maskable Icons

Для PWA под Android

Все дело в том, что начиная с Oreo после добавления PWA приложения вокруг иконки появлялся раздражающий белый кружок. Ну вот ребята и добавили поддержку Maskable Icons.

Web XR

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

Wake Lock

Запрещает блокировку экрана и переход в спящий режим. Говорят, будет удобно, если вы любите залипать на слайды фоточек или готовить еду по рецепту из браузера. Но я думаю, что по факту новый диван с амазона будет смотреть на вас всю ночь. Можете найти имена авторов, которых будете проклинать, на w3c.

Остальное

Также добавили атрибут rendersubtree. Новая игрушка для любителей оптимизации. Атрибут сообщает браузеру, что он может пропустить рендеринг поддерева. Сами почитаете, короче...

В DevTools фичи для печенек, имитации prefers-color-scheme/prefers-reduced-motion, улучшения в code coverage и стек вызовов JS в network. Подробнее почитать можно тут: https://developers.google.com/web/updates/2019/10/devtools

Chrome 78 / 2019.10

https://developers.google.com/web/updates/2019/10/nic78

Fresher service workers

О МОЙ БОГ, неужели больше не придется менять URL для обновления скриптов service workers?! Говорят, теперь побайтовая проверка как у Лисы и Сафари.

Native File System

Нативная поддержка ФС, долгожданное и ужасающее обновление. Можете теперь работать с файловой системой без загрузки на сервер, что очень расширяет возможности PWA. Вроде как запрашивает разрешение у пользователей, но я всё равно жду криптолокер под веб.

SMS Receiver

С SMS Receiver API можно будет получать код из смс сразу в после ввода. Все как у взрослых ребят из нативных приложений.

Остальное

Ещё есть про кастомные свойства CSS с API'шкой, может кому это будет интересно. По мне еще большее усложнение исходников и CSS.

В DevTools добавили ещё улучшений в панели аудита, отладчик для Payment Handler, LCP в производительности и еще по мелочи. Ссылка: https://developers.google.com/web/updates/2019/09/devtools

Chrome 77 / 2019.09

https://developers.google.com/web/updates/2019/09/nic77

Largest Contentful Paint

Игрушки для любителей оптимизации в виде API для поиска самого жирного (по времени отрисовки) элемента в видимой области. Там ещё есть подробная статейка с примерами кода, но я не читал.

New forms capabilities

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {  
  formData.append('teamled', 'Лошара');
});

Событие formdata, которое позволит влиять на процесс отправки данных из формы. Вы же хотели больше неявных логик? Получайте! Зато теперь не нужен скрытый input для CSRF токена.

Form-associated для кастомных элементов. Теперь ваш говнокод может быть частью формы, только не забудьте объявить нужные свойства.

Native lazy loading

Нативно и всего одним атрибутом loading="lazy", жалко что пока все равно придется писать js для всех старых версий...

Остальное

Добавили в триалы Contact Picker API, новые единицы измерения в intl.

В DevTools добавили автопереключение темки из вашей ОС, в панели Network показывается prefetch cache, показ приватных свойств объекта при инспектировании в консоле, нотификации и пуши и что-то еще. Ссылка: https://developers.google.com/web/updates/2019/07/devtools

Chrome 76 / 2019.07

https://developers.google.com/web/updates/2019/07/nic76

PWA Omnibox Install Button

В омнибокс добавили кнопульку для PWA. Мелочь, а приятно. Все потому что ранее эту технологию сделали доступной для десктопа. Даже на Linux робит (см. Chrome 70). Правда, мне всё равно, я на dwm сижу.

Теперь можно подменять mini-infobar с предложением установки на свой кастомный. Обязательно сделайте крестик очень маленьким.

Faster updates to WebAPKs

Теперь манифест будет проверяться на предмет изменений каждый день. Раньше было каждые 3 дня.

Dark mode

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Новый медиа запрос который запрашивает тему вашей ОС (светлая\темная) что бы вы могли автоматически под нее переключить тему на сайте. Неплохо, кстати. Возможно, всё меньше сайтов будут слепить нас по ночам.

Остальное

Также Promise.allSettled, новые методы text(), arrayBuffer(), stream() для работы с BLOB, поддержка изображений в async clipboard API.

В DevTools добавили новый UI для панели Network, HAR теперь содержит сообщения WS, наконец-то использование памяти в реалтайме и еще много интерестного. Посмотрите сами: https://developers.google.com/web/updates/2019/05/devtools#HAR

Chrome 75 / 2019.06

https://developers.google.com/web/updates/2019/06/nic75

Web Share API

Позволяет использовать нативные сервисы шаринга контента из OS, что очень полезно для мобильных устройств. Уже поддерживает шаринг аудиофайлов, изображений, видео и текстовых документов. Свойство navigator.canShare в помощь.

Numeric separators

В числовые литералы добавили нижнее подчеркивание (_, U+005F) как разделитель для читабельности, теперь он будет игнорируется при математических операциях. Ну фиг знает кому это удобно.

Остальное

Добавили desynchronized hint для canvas.

В DevTools, в основном, добавили мелкие, но полезные улучшения интерфейса. Подробнее тут: https://developers.google.com/web/updates/2019/04/devtools

Chrome 74 / 2019.04

https://developers.google.com/web/updates/2019/04/nic74

Private class fields

Приватные и публичные свойства класса, одна из основных болей при разработке на JavaScript. Ребята до этого добавили префикс для объявления публичного свойства, а теперь еще и для приватного. Смотрятся, если честно, так себе...

Пользователь не хочет анимаций

Медиа запрос prefers-reduced-motion, который сообщает нам о том, что пользователь не хочет всех этих ваших анимаций. Говорят, некоторых действительно подташнивает от параллаксов.

CSS transition events

Добавили события для отслеживания и изменения поведения при выполнении transition.

Остальное

Обновления в Feature policies, которые позволяют выборочно включать, отключать и изменять поведение определенных функций и API в браузере.

В DevTools добавили Lighthouse v4 в аудите, выделение DOM объектов, к которым применяется выбранное CSS правило, улучшенный просмотр бинарных сообщений в WS, скриншоты выделенных областей, фильтры для service workers, улучшения для анализа профилирования, и еще по мелочи. Смотреть тут: https://developers.google.com/web/updates/2019/03/devtools

Chrome 73 / 2019.3

https://developers.google.com/web/updates/2019/03/nic73

Progressive Web Apps work everywhere

Добавили поддержку PWA для MacOS, теперь работает на всех популярных настольных платформах. И это очень даже классно.

Signed HTTP Exchanges (SXG)

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

Я думаю, это важная часть развития AMP, так как решает проблему с отображением в адресной строке другого домена. Также технология может помочь распространению Web Packaging в режиме p2p.

Это технология явно заслуживает отдельной статьи в новом году.

Остальное

Constructable style sheets, метод matchAll() и еще несколько мелочей.

В DevTools добавили Logpoints для отладки кода в панели без console.log, экспорт информации о code coverage и еще много интерестного. Больше тут: https://developers.google.com/web/updates/2019/01/devtools

Chrome 72 / 2019.01

Public class fields

Еще один шаг к ООП в JS, возможность объявлять публичные методы класса без кода в конструкторе. Продолжение этих идей вы уже видели в 74й версии.

User Activation API

User Activation v2, которая призвана стать стандартом во всех браузерах.

Localizing lists of things with `Intl.format`

const opts = {type: 'disjunction'};
const lf = new Intl.ListFormat('fr', opts);
lf.format(['chien', 'chat', 'oiseau']);
// → 'chien, chat ou oiseau'
lf.format(['chien', 'chat', 'oiseau', 'lapin']);
// → 'chien, chat, oiseau ou lapin'

Добавлен новый метод .format(), который упрощает работу со списками.