Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 4–10 июля.
?♂️Доступность
? WCAG SC 1.4.4 Изменение размера текста и 1.4.10 Перекомпоновка. Рассмотрите как эти два критерия работают вместе.
? HTML
? Руководство по созданию форм. Рассмотрите анатомию полей ввода, типичные типы полей, состояния, описания и ошибки.
? Полное руководство по переключению тёмной темы. С учётом переключения темы в операционной системе, с доступностью и препроцессором.
? Не каждое поле ввода содержащее число должно быть <input type="number">.
? Переосмысление разработки интерфейсов с помощью htmx и hyperscript. htmx и гиперскрипт пытается на себя забрать кучу шаблонного JS для каждого небольшого взаимодействия в интерфейсе.
? Как избежать смещение из-за <img>: разберёмся с aspect-ratio и HTML-атрибутами width и height.
?️ CSS
? "Дней без ошибок в коде: 0". Все совершают ошибки при написании кода. Пора посмотреть на них со стороны.
?️ Секреты CSS-переменных. Видео позволит ещё больше погрузиться в кастомные свойства. Кастомные свойства или CSS-переменные вы можете обсудить в словаре.
? Почему все браузеры добавляют margin: 8px для <body> ? Интересное погружение в историю почему же так произошло.
? Инвертируем медиавыражения и брейкопинты.
? Полифил для каскадных слоёв. Используйте postcss-плагин и составной селектор :not(#/#)
? Радость вариативных шрифтов: начало работы с фронтендом. Как настроить загрузки и отображения вариативных шрифтов, а также "подводные камни" использования.
? Два уровня настройки <selectmenu>. OpenUI предлагает <select>, но только полностью настраиваемый.
?️ JavaScript
? Bun: новая среда выполнения JavaScript. Bun создан не на основе V8, как node.js или deno. Он включает в себя собственный упаковщик, транспайлер, средство запуска задач и клиент npm. При это поддерживает большинство Node и WebAPI.
? Как не блокировать браузер. Основы про цикл событий, ассинхронность, пакетную обработку, main-тред и воркеры.
?React
? Основные проблемы управления состоянием. Управление общим глобальным состоянием становится сложной задачей и с каждым годом усугубляется. Узнайте основные проблемы управления состоянием.
? Практика: разверните приложение книжного магазина с React 18, Vite и Netlify.
? Как импортировать SVG в React-приложение на Vite.
? Node.js
? Выполнение shell-команд из node.js через модуль 'node:child_process'.
? Изоляция и исправление утечек памяти.
? Алиасы для импортов. Относительные пути это нормально, но иногда с ними всё сложнее и сложнее работать "../../../../db/models/index.js";В 14 версии было добавлено новое поле imports для package.json, которое позволяет упрощать пути.
?️ Инструменты
? Рассчитайте clamp() между минимальный и максимальным значения для определённой диапазоне вьюпорта.
? VS Code 1.69.
? fuite. Для поиска утечек памяти.
?️Браузеры
? Браузеры на основе Chromium плохо работают на ПК с процессорами Alder Lake(12 поколение). В Intel предложили несколько решений. По словам пользователей, прокрутка в браузерах работает прерывисто и запаздывает на 1–2 секунды.
? Safari Technology Preview 148.
?Общее
? 3 основных тренда в дизайне: пастельные цветовые палитры, шрифты в ретро стиле и тёмные сайты.
? Упростите интерфейс, чтобы расширить возможности вашего сайта. Простые интерфейсы это первый шаг к повышению конверсии ,а также к повышению удовлетворённости посетителей.
? Почему "Null" полезен в дизайн-системах. Коротко: чтобы явно отметить место, где ничего делать не нужно.
Также
Если вы пишите статьи или делаете какую-то любую публичную деятельность связанную с фронтендом, то я с удовольствием добавлю это в дайджест. Приходите в личку. Обсудим.
Как читать статьи на английском языке
В дайджесте много статей и видео на английском языке, чтобы это не стало препятствием: в Google Chrome есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.
