Дайджест новостей из мира фронтенд-разработки за последнюю неделю 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 есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.
