Фронтенд дайджест #212 Лучшее за неделю Подкаст [EN] Еще о | FrontoWeek: Недельный дайджест [Фронтовик]

Фронтенд дайджест #212
Лучшее за неделю
Подкаст

[EN] Еще один всеобъемлющий гайд от Виталия Фридмана — на этот раз по веб-доступности.
В статье собрано более 30 аспектов, на которые стоит обратить внимание фронтенд-разработчику, при создании компонентов.
Автор разобрал, как сделать доступными элементы форм, как сделать доступную навигацию по странице, как правильно работать с фокусом, как сделать доступными модальные окна, слайдеры, таблицы и cookie-баннеры.
По всем темам, конечно же, есть ссылки на более подробные материалы, примеры и чек-листы.

[EN] Разработчики Chrome улучшают систему обнаружения поддержки оффлайн-режима в PWA.
Сейчас проверка этой поддержки производится по наличию обработчика fetch, то есть достаточно даже пустого обработчика, чтобы веб-приложение можно было установить, как PWA.
По мнению разработчиков браузера, оффлайн режим — это один из важных критериев современного веба, поэтому в новом Хроме, который выйдет в августе 2021 года, приложения с пустым fetch уже нельзя будет установить.
И совсем скоро, начиная с 89 версии Chrome, в случае отсутствия полноценного оффлайн режима, в консоль будет выдаваться соответствующее предупреждение.

Как же всё починить? fetch должен будет возвращать статус 200: это может быть как закэшированный ранее результат, так и просто страница с сообщением об оффлайн-режиме.

[EN] Sapper — фреймворк для разработки приложений на Svelte — эволюционировал и на свет появился SvelteKit, который недавно вышел в публичный бета-тест.
Фреймворк был вдохновлен идеями из Next.js и обеспечивает всё, что надо для построения современного приложения на Svelte: SSR, роутинг, code-splitting для JS и CSS и адаптеры для разных serverless-платформ, вроде netlify и vercel.
Для сборки Sapper использует Vite 2 — утилиту от Эвана Ю — создателя Vue.

SvelteKit уже используется для страниц Кроновирус-трекера от New York Times.
А до полноценного релиза первой версии, фреймворку не хватает всего нескольких фич и багфиксов, но команда разработки призывает уже тестировать его и делиться фидбэком.
Мигрировать на SvelteKit с Sapper поможет подробная инструкция.

[EN] Google, Mozilla и Microsoft работают над улучшением совместимости веба.
Рабочая группа проанализировала и выбрала 5 наиболее приоритетных фич, поведение которых пока сильно отличается от браузера к браузеру. Вот они: флексбоксы, гриды, position: sticky, aspect-ratio и трансформации.
За прогрессом этой инициативы можно следить в Твиттере по хэштегу #Compat2021 или на специальном дашборде.

[EN] Анимации на сайте могут причинять сильный дискомфорт пользователям с расстройствами вестибулярного аппарата.
Для таких пользователей, во многих операционных системах, есть настройка Reduce motion, которую можно получить в браузере через медиа-запрос: prefers-reduced-motion.

Автор статьи призывает более аккуратно подходить к анимациям и отключать их по-умолчанию.
Добавлять анимации следует только для пользователей, у которых значение медиа-запроса будет no-preference.

Можно пойти еще дальше и вынести анимации в отдельный файл, загружая его по тому же медиа-запросу.
Для анимаций на JavaScript можно использовать проверку через window.matchMedia.

[EN] Вы наверняка встречали в интернете мемы про JavaScript, основанные на кадрах из старого доклада Wat, где спикер показал, что будет, если сложить пустой массив с «пустым объектом». Будет [object Object]. А если поменять слагаемые местами то 0.
Это не особенность приведения типов, а правило синтаксиса. Если в ASTExplorer проверить выражение {} + \[], можно заметить, что фигурные скобки в начале выражения считаются не объектом, а блоком инструкций.
Справа от него остаётся приведение массива к числу с помощью оператора +. Чтобы явно дать понять интерпретатору, что это объект, надо, как и в случае с возвратом объекта из стрелочной функции, обернуть пустой объект в круглые скобки. Тогда, независимо от последовательности слагаемых, результат сложения будет одинаков.