Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 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.
Полосы прокрутки полезно стилистически изменять, когда меняется тема сайта с светлой на тёмную, иначе полоса прокрутки будет пестрить и перетягивать на себя внимание.
Также стоит помнить, что в различных операционных системах, десктопных и мобильных, у полос прокрутки меняется поведение и возникают кроссбраузерные проблемы.
У oveflow: 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.3.0. Не такой мощный, как yargs , minimist или argparse, но уже можно пробовать.
🔮 Angular
📔Как Computed Properties в Angular помогают пропускать титры
📔Улучшение начальной загрузки приложения
🟩 Vue
📔 Тернистый путь к микрофронтам. Ребята из Азбуки вкуса делятся своим путём обновления приложения до Vue 2 + Nuxt 2 с поддержкой TypeScript.
📔 Использование v-model в Vue 3 для создания сложных форм
🛠️ Инструменты
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 есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.
