Дайджест новостей из мира фронтенд-разработки за последнюю неделю 25 апреля–1 мая.
Спецификации
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
Node.js
Что такое базовые модули содержащие префиксы? Для того, чтобы сказать, что модуль из ядра node.js, ему добавляется префикс, например,
import test from 'node:test';. Не все базовые модули на данный момент будут использовать через префикс, например fs.v16 продолжает развиваться. Новая версия v16.15.0 LTS, в которой можно начать пробовать, за флагом, fetch API.
История о том, как исправлялась проблема с медленной инициализацией полей класса и приватных методов в V8 v10.0.
Общее
-
Исследование: какой шрифт лучше подходит для чтения в вебе? Спойлер: одного правильного ответа нет:
Один шрифт не может подойти всем пользователям.
У хорошо читаемого шрифта скорость чтения существенно различается.
Скорость чтения существенно снижается с возрастом.
Существенные различия в шрифтах между поколениями.
Нет возможности давать пользователям самим устанавливать свой шрифт, так как пользователи не выберут шрифт, который им больше всего подходит.
Психология в веб-дизайне. Расположение, формы, пространство, цвет и гарнитура шрифта - помогут вам удерживать внимание пользователя, поддерживать интерес и побуждать к действию.
Дизайнеры, автоматизируйте свою работу! Хватит играться со шрифтами. Если вам нужно посмотреть несколько вариантов компонента, чтобы посмотреть какой вариант лучше вписывается в концепцию дизайна приложения, то используйте инструменты, которые возьмут эту работу на себя.
Улучшайте нейминг вариантов компонентов, чтобы он был консистентным в проекте и понятным для других участников команды.
Используйте доступные цветовые системы.
Пуш-уведомления — достаточно щепетильный инструмент взаимодействия с пользователем. Они всех бесят. Научись делать пуш-уведомления полезными.
Инструменты
Remotion v3.0 позволит создать видео в React на бессерверном видеорендерере, использую AWS Lambda.
Jest v28.0: сегментированный тесты на нескольких машинах, отчёты в Github Actions, поддержка exports для разных точек входа, глобальные переменные.
Как читать статьи на английском языке
В дайджесте много статей и видео на английском языке, чтобы это не стало препятствием: в Google Chrome есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.