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

Введение в программный запуск Lighthouse. Кэти Боуман показывает, как запустить и использовать проверки Lighthouse внутри Node.js для мониторинга метрик сайта — https://www.smashingmagazine.com/2020/09/introduction-running-lighthouse-programmatically/

Parsel — крошечный и терпимый парсер CSS-селекторов. Лия Веру делится инструментом и рассказывает, как он работает — https://lea.verou.me/2020/09/parsel-a-tiny-permissive-css-selector-parser/

Настройка, отображающая порядок элементов в коде, появилась в DevTools Edge 86 https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/experimental-features#enable-source-order-viewer Это поможет понять в каком порядке по странице будет двигаться скринридер и как будут фокусироваться элементы с клавиатуры. Подробнее у Адриана Розелли https://adrianroselli.com/2020/09/source-order-viewer-in-edge-86.html

Обратно упорядоченные списки. Мануэль Матузович делится способами развернуть нумерацию в списках в обратном порядке — https://www.matuzo.at/blog/reverse-ordered-lists/

Сравнение веб-компонентов и React. Матиас Хухта собирает простое приложение при помощи Lit-Element и React и сравнивает два подхода:

1. С чего начать https://matsu.fi/posts/comparing-react-and-web-components-part-1-starters/
2. Компоненты https://matsu.fi/posts/comparing-react-and-web-components-part-2-components/

Начать с идеи и построить сообщество. Эван Ю рассказывает, с чего начинался фреймворк Vue и как развивать опенсорс-проекты с большой аудиторией — https://github.com/readme/evan-you

Математика верстальщику не нужна? Иван Богачёв про временные функции и траектории для покадровых 2D-анимаций на сайтах — https://habr.com/p/518006/

Тестирование приложений и компонентов на React с помощью Jest и Enzyme на примере юнит-тестов. Видеокурс Евгения Ковальчука из 13 частей: события и состояния, пропсы и методы жизненного цикла, утилиты, снэпшоты и другое — https://www.youtube.com/playlist?list=PLNkWIWHIRwMFPcbK0AJVBYyNveXmMZhMS

AVIF уже здесь. Подробное исследование Джейка Арчибальда: сравнение с другими форматами, стратегии сжатия, недостатки и прогрессивный рендеринг JPEG, будущее форматов — https://jakearchibald.com/2020/avif-has-landed/

Выпуск №246: Chrome 86, фокус, ::marker, отладка шрифтов, скринридеры, модалки, флексы и селект. Слушайте на Ютубе https://youtu.be/772m-K344Ps, читайте на Медиуме https://medium.com/p/d16a8e4ec0c2

00:01:45 Бета Chrome 86
00:17:15 Пользовательский фокус
00:22:32 Псевдоэлемент ::marker
00:28:00 Отладка шрифтов
00:31:03 Инструкция по скринридерам
00:38:54 Модальный компонент
00:42:01 Шапка на флексах
00:47:48 Что делать с селектом

Стилизация сложных лейблов. Даниэль Ромо делится примерами оформления лейблов-карточек — https://cloudfour.com/thinks/styling-complex-labels/

В чём ценность разнообразия браузеров? Дейв Руперт делится мыслями, как наличие нескольких браузеров в экосистеме влияет на веб — https://daverupert.com/2020/09/the-value-of-browser-diversity/

Помогите пользователям сменить пароль, добавьте адрес .well-known/change-password. Ейджи Китамура про новый унифицированный адрес для смены паролей для браузеров и менеджеров паролей. Уже работает в Safari, заработает в Chrome 86 и планируется в Firefox — https://web.dev/change-password-url/

Оптимизация производительности фронтенда. Серия Ника Мостового в блоге HeadHunter на Хабре:

1. Critical Render Path https://habr.com/p/513940/
2. Event loop, layout, paint, composite https://habr.com/p/517594/

Образовательный курс про цифровую доступность для дизайнеров и веб-разработчиков стартует 10 октября и продлится 5 недель по 4 часа в неделю. В программе курса систематизированная теория по доступности и практическое тестирование с незрячими пользователями https://kurmak.info/

Кастомные стили для <select> на чистом CSS. Стефани Эклз разбирается, как стилизовать нативный <select> так, чтобы он одинаково выглядел во всех браузерах — https://moderncss.dev/custom-select-styles-with-pure-css/

Оформление маркеров списков при помощи псевдоэлемента ::marker. Адам Аргайл и Ориол Бруфау рассказывают о новом псевдоэлементе, который уже работает в Firefox и появится в Chrome 86 — https://web.dev/css-marker-pseudo-element/