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

Маски в CSS. Рэйчел Эндрю рассказывает, как, где и для чего может быть полезно наложение CSS-масок на изображения — https://web.dev/css-masking/

Фолбэки для шрифтов. Марчин Вихари объясняет, что происходит, когда в шрифте нет нужного символа, в переводе на Хабре — https://habr.com/p/521740/

Google продолжает раскатывать поддержку нового протокола HTTP/3 на основе собственной разработки QUIC. 25% пользователей Chrome уже используют черновую версию протокола, что показывает улучшения для сервисов Google. Подробнее в блоге Chromium — https://blog.chromium.org/2020/10/chrome-is-deploying-http3-and-ietf-quic.html

Ханна Милан делится пополняющимся списком инструментов, плагинов, статей и ресурсов про работу с доступностью в вебе — https://a11yresources.webflow.io/

Эмуляция недостатков зрения в DevTools. Эдди Османи показывает, как в Chrome и Puppeteer включить режим эмуляции размытого зрения или цветовой слепоты для инклюзивного тестирования страниц — https://addyosmani.com/blog/emulate-vision-deficiencies-devtools/

Почему я выбрал Next.js, а не Gatsby, Gridsome или Nuxt? Андрей Полесный об экспериментах с новыми технологиями в рамках Jamstack в поисках подходящего решения. В переводе на Хабре — https://habr.com/p/521820/

Подробное введение, примеры использования и отладки CSS-переменных (или кастомных свойств) в блоге Ахмада Шадида — https://ishadeed.com/article/css-vars-101/

Новинки Chrome 86 в обзоре Пита Лепажа: включённый по умолчанию File System Access API, Web HID для контроллеров и Multi-screen Window Placement API для управления окнами, новый псевдокласс :focus-visible и псевдоэлемент ::marker в CSS — https://developers.google.com/web/updates/2020/10/nic86

Зачем нужна выделенная Frontend Core команда и как мы внедряли дизайн систему. Ростислав Горяйнов в блоге ДомКлик на Хабре — https://habr.com/p/520630/

Серия «Дизайн в браузере» Юны Кравец. Выпуски по доступности интерфейсов:

Семантика https://youtu.be/arMgwKY52Bs
Цвета https://youtu.be/sEDnmNtEaqQ
Навигация https://youtu.be/qD7SecF8qWA
Медиа https://youtu.be/F9VCfA6JJ9U
Анимация https://youtu.be/_ZdZh-ESOHY

Плейлист всей серии https://www.youtube.com/playlist?list=PLNYkxOF6rcIDI0QtJvW6vKonTxn6azCsD

Выпуск №250: Edge в VS Code, инспектор гридов, gap и флексы, математика в CSS, Hacktoberfest, опенсорс. В гостях Роман Дворнов. Слушайте на Ютубе https://youtu.be/emMtP3fVW3I, читайте на Медиуме https://medium.com/p/227301714b26

00:01:42 События
00:03:15 Edge в VS Code
00:12:42 Инспектор гридов в Chrome
00:29:46 Gap и баги флексов
00:37:53 Математика в CSS
00:46:42 Hacktoberfest
00:53:15 Shitoberfest
01:00:51 Опенсорс Романа

Контролируйте панорамирование, наклон и зум камеры. Франсуа Бофорт про возможность управлять PTZ-камерами из браузера с помощью getUserMedia и applyConstraints, которая появится в Chrome 87 — https://web.dev/camera-pan-tilt-zoom/

Линейное масштабирование размера шрифта при помощи clamp() в CSS. Педро Родригес показывает, как привязать font-size к размерам вьюпорта для большей адаптивности — https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

Браузеры могут тротлить requestAnimationFrame. Мэтт Перри рассказывает, когда для различных оптимизаций браузер может пропускать обработчики кадров — https://mattperry.is/writing-code/browsers-may-throttle-requestanimationframe-to-30fps

Сокращая разрыв во флексах. Серджио Виллар о том, как Igalia улучшает совместимость флексов в WebKit и будущих версиях Safari на основе тестов WPT. Бонусом идёт долгожданное свойство gap для флексов, которое уже работает в Firefox и Chrome — https://blogs.igalia.com/svillar/2020/10/01/closing-the-gap-in-flexbox/

Новое расширение Microsoft Edge Tools для VS Code добавляет в редактор панели Elements и Network, а также позволяет удобно открыть проект для отладки в Edge или прямо в одной из панелей.

Анонс расширения https://blogs.windows.com/msedgedev/2020/10/01/microsoft-edge-tools-vscode/
Расширение в Marketplace https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools

В DevTools Chrome 87 появится инспектор гридов, похожий на тот, что уже есть в Firefox. В панели Layout можно настроить отображение размеров, названий, линий и отдельных гридов.

Подробнее про инспектор https://developers.google.com/web/tools/chrome-devtools/css/grid
Другие новинки DevTools https://developers.google.com/web/updates/2020/10/devtools