Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 4–10 июля.
![](https://habrastorage.org/getpro/habr/upload_files/4e3/4f4/866/4e34f4866bf2cee2198f786826eded44.png)
?♂️Доступность
? 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 есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.