Фронтенд-новости №4. Лучший шрифт для веба, поиск среди hidden, очередной React

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

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

• W3C получит премию EMMY за стандартизацию шрифтов

HTML

• Сделайте так, чтобы поиск по странице работал даже в сворачиваемых элементах, с помощью атрибута hidden, но с новым значением until-found. Ждём в Google Chrome 102 и Safari 15.5.

CSS

• Цвета в браузере до сих пор работают не правильно. Всё из-за алгоритма сжатия с потерями 8-bit sRGB.

• Чтобы отключить любое взаимодействие: клики, ховеры, фокусы с элементов узнайте как работает inert, так как disabled, tabindex="-1", pointer-events: none, user-select: none — этого не дадут. В настоящий момент поддержки в браузерах нет.

• Дизайн-система с использованием кастомных свойств.

• Создайте адаптивные размеры шрифта с помощью кастомных свойств и clamp().

• Вспоминаем дроби из школьной программы, чтобы проще создавать сетки с изображениями с разным соотношением сторон, на гридах.

• Кастомные свойства + линейный градиент = крутые ховер эффекты для кнопок.

JavaScript

• Упрощаем поддержку кодовой базы и актуализируем код с помощью удаления мёртвого кода.

• Прогрессивное улучшение с помощью FormData в формах.

• История JavaScript-фреймворков. Прошлое, настоящее и позитивное будущее.

• Практика: создаём сборщик(builder) c нуля, чтобы понять какую проблему решаем и чем отличаются сборщики между друг другом.

• Прошлое: вспомним про отличные устаревшие методы работы со строками.

• Как у команды RudderStack получилось сократить время запуска проект на 80% с помощью webpack.

React

• Не успели вы попробовать v18.0, как уже вышел v18.1 с множеством исправлений.

• Основы React: React Batching. Объединяйте несколько обновлений состояния в одно, чтобы уменьшить количество ре-рендеринга компонента для повышения производительности.

• Переход на React v18.0 может быть головной болью из-за изменения определений типов. Для ускорения перехода на новую версию поможет TypeScript.

Angular 

• v13.3.5

• и новый v14.0.0-next.15

• Angular на I/O 2022

Node.js

• Что такое базовые модули содержащие префиксы? Для того, чтобы сказать, что модуль из ядра node.js, ему добавляется префикс, например, import test from 'node:test';. Не все базовые модули на данный момент будут использовать через префикс, например fs.

• v16 продолжает развиваться. Новая версия v16.15.0 LTS, в которой можно начать пробовать, за флагом, fetch API.

• История о том, как исправлялась проблема с медленной инициализацией полей класса и приватных методов в V8 v10.0.

• Отладка бессерверных функций node.js в AWS Lambda.

Общее

• Исследование: какой шрифт лучше подходит для чтения в вебе? Спойлер: одного правильного ответа нет:

  • Один шрифт не может подойти всем пользователям.

  • У хорошо читаемого шрифта скорость чтения существенно различается.

  • Скорость чтения существенно снижается с возрастом.

  • Существенные различия в шрифтах между поколениями.

  • Нет возможности давать пользователям самим устанавливать свой шрифт, так как пользователи не выберут шрифт, который им больше всего подходит.

• Психология в веб-дизайне. Расположение, формы, пространство, цвет и гарнитура шрифта — помогут вам удерживать внимание пользователя, поддерживать интерес и побуждать к действию.

• Дизайнеры, автоматизируйте свою работу! Хватит играться со шрифтами. Если вам нужно посмотреть несколько вариантов компонента, чтобы посмотреть какой вариант лучше вписывается в концепцию дизайна приложения, то используйте инструменты, которые возьмут эту работу на себя.

• Улучшайте нейминг вариантов компонентов, чтобы он был консистентным в проекте и понятным для других участников команды.

• Используйте доступные цветовые системы. 

• Пуш-уведомления — достаточно щепетильный инструмент взаимодействия с пользователем. Они всех бесят. Научись делать пуш-уведомления полезными.

Инструменты

• Remotion v3.0 позволит создать видео в React на бессерверном видеорендерере, использую AWS Lambda.

• Аккордеон с повышенной доступностью на React.

• Работа с USB-устройствами с помощью node.js.

• Запись экрана в macOS с помощью node.js.

• Jest v28.0: сегментированный тесты на нескольких машинах, отчёты в Github Actions, поддержка exports для разных точек входа, глобальные переменные.

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

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