Веб-стандарты. Страница 21

Новый элемент <popup> предлагают разработчики Microsoft, Google и Salesforce для выпадающих меню и других похожих случаев, за исключением модальных диалогов. Первый прототип планируют реализовать в Chromium.

Интент https://groups.google.com/a/chromium.org/g/blink-dev/c/9y-Thg9UCxY/m/_4gShWjQAAAJ
Подробности https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md

Подробнее о новой системе создания слоёв CSS-каскада и управлении специфичностью, предложенной в черновике спецификации CSS Cascading and Inheritance 5 уровня.

Илья Стрельцын https://css-live.ru/vecssti-s-polej/pervyj-publichnyj-chernovik-css-kaskada-5-urovnya.html
София Валитова https://ariarzer.dev/css-cascade-layer.html

Опубликован первый рабочий черновик WCAG 3.0, руководства W3C по доступности контента и интерфейсов. Вместе с черновиком опубликован обзор отличий от предыдущей версии WCAG 2.1, изменений и улучшений.

WCAG 3.0 https://www.w3.org/TR/wcag-3.0/
Подробности https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/

Коты во флексах. Сержио Виллар из Igalia о том, как они улучшили поведение картинок внутри флексов для WebKit, чтобы они не искажались по умолчанию, а также о ценности WPT (тестов для веб-платформы).

https://blogs.igalia.com/svillar/2021/01/20/flexbox-cats-a-k-a-fixing-images-in-flexbox/

Новинки Chrome 88 в обзоре Пита Лепажа: 3 версия манифеста для расширений, свойство aspect-ratio, тротлинг таймеров на фоновых страницах, no-opener для target=_blank, новая опция для addEventListener и другое.

Видео https://youtu.be/cqAO2xR7lzM
Текст https://developers.google.com/web/updates/2021/01/nic88

Разбираемся в clip-path. Ахмад Шадид рассматривает современные способы создания фигур и масок: от примитивов до кривых из внешних файлов и сочетаний calc с единицами вьюпорта.

https://ishadeed.com/article/clip-path/

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

https://piccalil.li/blog/a-minimum-viable-experience-makes-for-a-resilient-inclusive-website-or-app

Начиная с Chrome 88 цепочки таймеров начнут тротлиться до раза в минуту, если страница не видна больше 5 минут, количество таймеров в цепочке больше 5 и на ней не воспроизводится аудио или WebRTC-видео. Подробности от Джейка Арчибальда.

https://developer.chrome.com/blog/timer-throttling-in-chrome-88/

Опубликован первый рабочий черновик спецификации CSS Cascading and Inheritance 5 уровня. Главная новинка — директива @​layers, предложенная Мириам Сюзанн, которая позволит создавать и управлять слоями каскада.

https://www.w3.org/TR/css-cascade-5/#at-ruledef-layer

Тестирование доступности в браузере. Кристиан Хайльманн показывает возможности инструментов разработчика, которые могут быть полезны для проверки доступности сайтов.

https://christianheilmann.com/2021/01/11/seven-ways-to-test-for-accessibility-of-your-web-site-with-browser-developer-tools/

Восходящие звёзды JavaScript 2020. Ежегодный обзор тенденций в мире JavaScript, основанный на сравнении количества звёзд на GitHub за последние 12 месяцев.

https://risingstars.js.org/2020/ru

00:02:07 События и Smashing Conf
00:17:50 Puppeteer для Firefox
00:22:19 Состояние всего
00:38:55 Video как picture
00:53:59 Чек-лист по перфомансу
01:09:13 Нужен ли перфоманс

Выпуск №265. Вадим Макеев, Никита Дубко и Виталий Фридман про Smashing Conf, Puppeteer и Firefox, состояние всего, video как picture и чек-лист по перфомансу.

Слушайте на Ютубе https://youtu.be/NKVNIKzk5aU
Читайте на Медиуме https://medium.com/p/881d5392b0f4

Инструмент визуальной генерации плавных теней для блока при помощи нескольких слоёв от Филиппа Брамма.

https://brumm.af/shadows

BBC World Service мигрировал с PHP-монолита на изоморфное SPA на React с серверным рендерингом. В основе собственная платформа Simorgh и библиотека компонентов Psammead.

Подробности https://medium.com/p/26b08f7abfcc
Simorgh https://github.com/bbc/simorgh
Psammead https://github.com/bbc/psammead

Filament Group предлагает сравнять возможности <video> с <picture> и, как минимум, поддержать атрибут media для <source> или даже srcset и sizes. Это позволит более гибко запрашивать нужные размеры видео прямо из разметки, без серверных решений.

https://github.com/filamentgroup/html-video-responsive

Вышло обновление Snowpack v3.0, лёгкого сборщика для фронтенда: импорт собранных зависимостей как ES-модулей, оптимизация и минификация с помощью esbuild, новый JS API для настройки для сервера и сборки, новый рантайм для Node.js.

https://www.snowpack.dev/posts/2021-01-13-snowpack-3-0

Компилируем Svelte в уме. Тан Ли Хау разбирается, как Svelte видит ваш код и компилирует его в конечный JavaScript.

Перевод 1 части https://habr.com/p/536468/

Оригинал в 3 частях
https://lihautan.com/compile-svelte-in-your-head-part-1/
https://lihautan.com/compile-svelte-in-your-head-part-2/
https://lihautan.com/compile-svelte-in-your-head-part-3/