Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 20–26 июня.

????‍♂️Доступность

???? Выбор даты и времени для всех. Ребята из Adobe сделали библиотеку react spectrum более доступной для выбора даты и времени. Очень полезно посмотреть со стороны UX на взаимодействие с формами выбора даты и времени, так как это действительно сложно.

???? Как сделать переключатель тёмного режима. Применение ARIA, когда он необходим, то есть отсутствует в HTML и приносит пользу пользователю.

???? Библиотека ARIA шаблонов для популярных элементов. Узнайте, как делать самые распространенные элементы более доступными, применяя роли, состояния и свойства WAI ARIA.

???? Спецификации

???? Page Visibility Level 2. Вышел новый уровень спецификации для состояния видимости документа.

???? EcmaScript 2022. 22 июня 2022 года 123 Генеральная ассамблея Ecma утвердила спецификацию языка ECMAScript 2022 — теперь он официально является стандартом. Внутри все новинки.

???? HTML

???? Всплывающие окна мертвы, да здравствуют всплывающие окна. Узнайте, как Великобритания планирует убить всплывающие окна с файлами cookie.

???? Семантическая карточка-ссылка. Семантика для обычных карточек: карточка товара или карточка статьи блога.

???? Как создавать иконки сайтов в 2022 году — всё о favicon. Пришло время переосмыслить то, как мы создаем набор иконок для современных браузеров, и остановить безумные генераторы.

????️ CSS

????Современная CSS-прокрутка. Большинство интерфейсов имеют полосу прокрутки у страницы или блока. Исторически так сложилось, что настройка полосы прокрутки никогда не была лёгким занятием. Кто-то даже умудряется написать тысячи строк кода, чтобы повторить работу полосы прокрутки на JavaScript.

Полосы прокрутки полезно стилистически изменять, когда меняется тема сайта с светлой на тёмную, иначе полоса прокрутки будет пестрить и перетягивать на себя внимание.

Также стоит помнить, что в различных операционных системах, десктопных и мобильных, у полос прокрутки меняется поведение и возникают кроссбраузерные проблемы.

У overflow: auto тоже есть проблемы. Если в блоке становится много контента, то появляется полоса прокрутки, которая смещает следующий контент.

В статье рассматриваются современные CSS-возможности по настройке полосы прокрутки.

???? Пожалуйста, дайте мне немного места в разметке для разделения слов. Текстовыми параметрами в стилях в тексте между словами и буквами. Трансформациями и позиционированием. Флексами. У таблиц с помощью стилей. Прозрачными блоками-заполнителями. Для каждой ситуации подойдёт свой способ.

???? Две строки CSS, повышающие производительность рендеринга. Коротко:

{
  content-visibility: auto;
  contain-intrinsic-size: 1px 5000px;
}

• content-visibility: auto — определяет будет браузер пропускать этапы paint и rendering для элемента. Поддержка браузерами.

• contain-intrinsic-size — в связи с предыдущим пунктом элементы, которые не прошли этап rendering, скорее всего, будут иметь размер 0x0. contain-intrinsic-size позволяет подсказать браузеру действительные размеры элемента, чтобы интерфейс не прыгал. Поддержка браузерами.

???? Многоточие для переполнения текстов вредно. Для эффективной работы text-overflow часто приходится использовать дополнительные CSS-свойства white-space: nowrap и overflow: hidden, но это может плохо сказаться на кнопках.

???? Условное оформление выбранных элементов в гридах. Тренируемся в сложных селекторах, в которых используются комбинаторы и псевдоэлементы.

???? Как и когда использовать :has. Теория о том, что такое :has, как с ним работать и применять в карточках и формах.

????️ JavaScript

???? Блочный оператор. Помогает организовать код, придумать другое имя для той же переменной.

???? В защиту блочного оператора

???? Когда стоит отказаться от Map в пользу объекта

• Используйте объект для записей, где у вас есть фиксированное и ограниченное количество свойств или полей, известных на момент создания, например, конфигурационных объектов. И вообще для всего, что предназначено для одноразового использования.

• Используйте Map для словарей или хэш-карт с переменным количеством записей, с частыми обновлениями, ключи которых могут быть неизвестны в момент создания, например, эмиттер события.

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

???? Точное определение времени с помощью API веб-анимации. Таймеры — необходимость для разработчика, чтобы точно знать, когда что происходит. Но на самом деле таймеры никогда не бывают вовремя. Web Animations API поможет отказаться от некоторых таймеров в некоторых случаях.

???? Заметки о сервис-воркерах. Вещи, которые вы бы хотели знать раньше о сервис-воркерах.

???? JavaScript: интересные возможности AbortController. Паттерны для AbortController.

???? Как в современном мире обрабатывать ошибки в Javascript?

????React

???? Над чем работает команда React. Команда решила начать заранее делиться тем, над чем они трудятся:

• Серверные компоненты;

• Asset Loading;

• Оптимизации рендеринга статического сервера;

• Оптимизирующий компилятор;

• Offscreen;

• Трассировка перехода;

• Документация.

???? Миграция нативных React библиотек на новую архитектуру. Обновлённые рекомендации для перехода приложения и библиотек на новую архитектуру.

????Организация react-компонентов с помощью dot-notation и почему я часто прибегаю именно к этому способу. Существует несколько способов организации компонентов и каждый из них полезен в конкретной ситуации. И нужно выбирать подходящий дизайн его реализации в зависимости от функциональности компонента и его предназначения.

???? Node.js

???? Используйте веб-потоки в node.js. Web-streams — это стандарт для потоков, который теперь поддерживается на всех основных веб-платформах: браузеры, node.js и Deno.

???? Альтернативы глобальной установки npm-пакетов. Для npm install --global package-name в macOS и некоторых Unix-платформах требуются root-права. Узнайте об альтернативных вариантах --global.

???? Небольшой релиз v18.4.0

???? Анализатор аргументов командой строки. Встроен в v18.3.0. Не такой мощный, как yargs , minimist или argparse, но уже можно пробовать.

???? Angular

????Как Computed Properties в Angular помогают пропускать титры

????Улучшение начальной загрузки приложения

???? Vue

????Vue 2.7 в бете

• API композиции

• <script setup>

• CSS v-bind

А также на русском на Хабре.

???? Тернистый путь к микрофронтам. Ребята из Азбуки вкуса делятся своим путём обновления приложения до Vue 2 + Nuxt 2 с поддержкой TypeScript.

???? Использование v-model в Vue 3 для создания сложных форм

????️ Инструменты

• Puppeteer 15.0

• grammY — современная платформа Telegram-ботов

• PSD 0.2 — синтаксический анализатор PSD с нулевой зависимостью для браузера или node.js

• TypeScript beta 4.8 с улучшением производительности

????️Браузеры

???? Что Github думает о браузерах. А точнее, какие версии браузеров, какое браузерное API поддерживают и какими инструментами они пользуются для кроссбраузерности.

???? Как будет выглядеть веб только с Chromium?

???? Safari Technology Preview 147

• Live text. Переводите и взаимодействуйте с текстом внутри видео и изображениях на Venture и M-процессорах.

• Web Push. Отправляйте пуш-уведомления со страницы в браузере.

• Passkeys. Обезопасьте свои учётные данные на сайтах.

• Improved Safari Web Extensions. Протестируйте улучшенный API для расширений.

• Web Inspector Extensions. Создайте собственный инструмент для веб-инспектора.

• Flexbox Inspector. Используйте новую визуальзацию флексов в веб-инспекторе.

???? Chrome 105. Актуальная версия 103. А в 105 версии появится псевдокласс :has.

???? Текущий Safari в iOS. Имеет баг перекрытия нескольких фулскрин-видео. Safari не проверяет, если ли другой ресурс, который уже получил полноэкранный доступ.

???? Ку-ку. Internet Explorer никуда не делся. То, что поддержка прекращена, ещё не значит, что им перестанут пользоваться.

????Общее

???? Взлет и падение неоморфизма. Скеоморфизм + плоский дизайн = Неоморфизм. Прошлое, настоящее, будущее, и почему неоморфизм быстро входит и выходит из моды.

???? Что такое минималистичный веб-дизайн простыми словами. Часто дизайнеры воспринимают минимализм как набор необходимых элементов без добавления лишних деталей. Однако этим стиль не ограничивается. Основная идея минимализма — акцент на содержании сайта, а не на его дизайне.

Главные особенности минимализма в дизайне: простота, чистые цвета, изображения без фона, пространство, композиция, типографика и UX.

???? Сочетания шрифтов от Google. Чтобы начать разбираться в шрифтовых парах, начните со статьи «Парные шрифты». В этой статье познакомимся с 9 парами. С этими парами можно поиграться в Figma.

Чтобы правильно подобрать пару нужно, чтобы пары вели к одной цели, которую вы хотите достичь:

• были легко читаемыми;

• имели различные веса и стили;

• поддерживали необходимых языков;

• имели интересные глифы, если это необходимо для цели.

???? Прощай, Web3. Web5 уже здесь. Не успели вы даже понять, что такое Web3, а уже Web5. А Web4 вообще был? Web2 + Web3 = Web5.

???? Как Apple может бить CAPTCHA? С помощью токенов частного доступа.

???? Figma vs Sketch. Узнайте какой инструмент лучше подходит для UX/UI, прототипирования и совместной командной работы.

Обратная связь

Привет. Я поменял формат дайджеста и буду благодарен за обратную связь, чтобы сделать его ещё лучше. Спасибо.

Как читать статьи на английском языке

В дайджесте много статей и видео на английском языке, чтобы это не стало препятствием: в Google Chrome есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.