Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 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 есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.
4reddy
Был здесь такой переводной "Дайджест свежих материалов из мира фронтенда за последнюю неделю". Вот было бы круто, если в таком же примерно формате и вы делали. Или бы даже переводили тот, что был. Всё равно его пока перестали переводить.
В любом случае, спасибо за ваши дайджесты тоже.
dark_ruby
разве это был перевод? я думал авторский дайджест. А что с ними кстати случилось?
gewisser
Это авторский был дайджест. Автор из Украины. Дай бог здоровья этому человеку и всем остальным.
4reddy
Тогда вот вам дайджест на английском
https://frontender-ua.medium.com/frontend-weekly-digest-267-4-10-july-2022-749049f2a6c7
nikolayshabalin Автор
Пожалуйста. С радостью добавлю русскоязычные статьи если они будут. Пока их очень мало. Почти всё что нахожу добавляю в дайджест