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

Визуализатор Intersection Observer API. Мишель Баркер собрала простое демо, чтобы помочь вам разобраться с настройками rootMargin, intersectionRatio и threshold — https://codepen.io/michellebarker/full/xxwLpRG

Отзывчивый вертикальный ритм при помощи CSS. Паула Боровска объясняет, зачем может быть полезен вертикальный ритм и какими свойствами его достичь — https://designmodo.com/vertical-rhythm/

Прокачиваем свои CSS-анимации. Иван Богачёв делится неочевидными особенностями CSS-анимаций с примерами их применения — https://habr.com/p/503026/

Как создать расширение для Chrome. Сара Дрэснер делится коротким руководством, как сделать расширение для автоматизации рутинных действий и залить его в Chrome Web Store — https://css-tricks.com/how-to-build-a-chrome-extension/

Пять видео с конференции Microsoft Build для веб-разработчиков в одном треде: расширения для Edge, новинки DevTools, WebView2 для нативных приложений на Windows, новинки PWA на Windows, разработка в VS Code и Edge — https://twitter.com/EdgeDevTools/status/1263222315988500480

Самая быстрая загрузка Google Fonts. Гарри Робертс собирает сниппет загрузки Google-шрифтов эффективным и избегающим мигания текста способом — https://csswizardry.com/2020/05/the-fastest-google-fonts/

Что нового в Lighthouse 6.0. Коннор Кларк рассказывает про ключевые изменения в мажорном обновлении: новые метрики и аудиты, обновлённая оценка производительности, Lighthouse CI, расширение для Firefox и другие — https://web.dev/lighthouse-whats-new-6.0/

Исследование производительности Notion. Иван Акулов подробно разбирает загрузку веб-страниц, созданных в Notion, и предлагает способы её ускорения — https://3perf.com/blog/notion/

Новинки Chrome 83 в обзоре Пита Лепажа: доверенные типы для защиты от XSS, обновлённые элементы форм, доступ к файловой системе, Web Vitals и другие. Подробнее в статье https://developers.google.com/web/updates/2020/05/nic83
или видео https://youtu.be/RsMikJZhnSQ

Доступность изображений, когда она важнее всего. Кари Фишер объясняет отличия декоративных изображений от информативных и показывает, как обеспечить доступность критически важных сообщений в изображениях — https://www.smashingmagazine.com/2020/05/accessible-images/

Разбираемся в клиентских JavaScript-фреймворках. Набор статей на MDN для начала изучения фреймворков React, Vue и Ember — https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks

«Мы можем быть не только массажистами». Анна Беловольченко рассказывает, как люди с нарушениями зрения учатся делать сайты доступными в IT Academy во Львове — https://web-standards.ru/articles/a11y-testing-in-it-academy/

Русскоязычная документация по Angular. Алексей Охрименко анонсирует русскую версию документации и рассказывает, как можно помочь с её развитием — https://habr.com/p/499852/

Как приручить высоту строки в CSS. Калеб Уильямс рассказывает, из чего состоит строка в типографике и как получить полный контроль над этими составляющими для разных шрифтов — https://css-tricks.com/how-to-tame-line-height-in-css/

Дорогая цена стилей. Расшифровка доклада Никиты Дубко с разбором способов оптимизации загрузки и применения CSS на странице — https://habr.com/p/501998/

00:00:00 Интро
00:01:07 События
00:03:35 Aspect ratio, DevTools, реклама
00:17:46 Кроссбраузерный appearance: none
00:23:40 Top-level await в Node.js
00:34:52 Deno вместо Node
00:54:25 Постоянное хранилище
01:02:15 Дорогая цена стилей

Выпуск №230: Aspect ratio, реклама, appearance: none, top-level await, Deno, хранилище, цена стилей. В гостях Андрей Мелихов. Слушайте на Ютубе https://youtu.be/EoIp_uhO40Y, читайте на Медиуме https://medium.com/p/47c7909a7874

Обработка вмешательства в тяжёлую рекламу. Роуэн Меревуд объясняет суть инициативы Chrome по нативному отключению рекламы размером более 4 МБ или нагружающей основной поток и показывает, как обрабатывать её отключение — https://developers.google.com/web/updates/2020/05/heavy-ad-interventions