Дайджест новостей из мира фронтенд-разработки за последнюю неделю 25 апреля–1 мая. W3C получит премию EMMY за стандартизацию шрифтов Сделайте так, чтобы поиск по странице работал даже в сворачиваемых элементах, с помощью атрибута hidden, но с новым значением until-found. Ждём в Google Chrome 102 и Safari 15.5. Цвета в браузере до сих пор работают не правильно. Всё из-за алгоритма сжатия с потерями 8-bit sRGB. Чтобы отключить любое взаимодействие: клики, ховеры, фокусы с элементов узнайте как работает inert, так как disabled, tabindex="-1", pointer-events: none, user-select: none - этого не дадут. В настоящий момент поддержки в браузерах нет. Дизайн-система с использованием кастомных свойств. Создайте адаптивные размеры шрифта с помощью кастомных свойств и clamp(). Вспоминаем дроби из школьной программы, чтобы проще создавать сетки с изображениями с разным соотношением сторон, на гридах. Кастомные свойства + линейный градиент = крутые ховер эффекты для кнопок. Упрощаем поддержку кодовой базы и актуализируем код с помощью удаления мёртвого кода. Прогрессивное улучшение с помощью FormData в формах. История JavaScript-фреймворков. Прошлое, настоящее и позитивное будущее. Практика: создаём сборщик(builder) c нуля, чтобы понять какую проблему решаем и чем отличаются сборщики между друг другом. Прошлое: вспомним про отличные устаревшие методы работы со строками. Как у команды RudderStack получилось сократить время запуска проект на 80% с помощью webpack. Не успели вы попробовать v18.0, как уже вышел v18.1 с множеством исправлений. Основы React: React Batching. Объединяйте несколько обновлений состояния в одно, чтобы уменьшить количество ре-рендеринга компонента для повышения производительности. Переход на React v18.0 может быть головной болью из-за изменения определений типов. Для ускорения перехода на новую версию поможет TypeScript. v13.3.5 и новый v14.0.0-next.15 Angular на I/O 2022 Что такое базовые модули содержащие префиксы? Для того, чтобы сказать, что модуль из ядра 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 есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере. Автор профессиональных курсов