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