Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 3–9 октября.

🔥 Три главные статьи

  • Пройдите опрос State of CSS 2022.
  • Обновите ваше расширение с Manifest V2 на V3 — иначе скоро оно превратится в тыкву.
  • Полное руководство по рендерингу в React.

🧬 HTML

Учите HTML! Курс по HTML от новичка до эксперта от Google и сторонних разработчиков. Ну или приходите в Академию.

Как создать идеальную фавиконку, какие варианты фавиконок бывают и как их сгенерировать. А также как разместить на сайте с помощью PHP и WordPress.

Как создать шаблоны в HTML с помощью <template>.

«Где веб-компоненты пошли не так (и как мы можем это исправить)». Исповедь или что-то в этом духе.

🖌 CSS

Макбуки, айфоны, гугл пиксели и другие современные устройства на чистом CSS.

Генерация случайных чисел на CSS. Непонятно, зачем, но очень интересно.

Анимированный загрузчик с помощью CSS (ещё и с управлением!).

Как сделать двухколоночную вёрстку: от обычных до безумных способов от Вадима Макеева. Начинается всё с гридов, таблиц, флоатов, инлайн-блоков, флексов и мультиколонок. А потом — безумные решения с помощью позиционирования, направления письма, SVG и iframe.

Простая гибкая типографика с помощью clamp и SASS. Гибкую типографику делаем с помощью единиц от вьюпорта (vw). А SASS используем для переключения на брейкпоинтах.

🎓 UX, дизайн

Вышел практически весь Web Almanac. Проанализировано 8.3 млн сайтов.

Web Almanac — это всеобъемлющий отчёт о состоянии веба, подкреплённый реальными данными и подтверждённый авторитетными веб-экспертами. Издание 2022 года состоит из 22 глав, охватывающих содержание страниц, пользовательские ощущения, платформы, на которых публикуют и распространяют сайты.

UX-дизайн: типы интерактивного контента, усиливающие взаимодействие. Коротко: это контент который вовлекает пользователей веб-сайта или приложения во взаимодействие и, таким образом, делает их активными участниками, а не пассивными зрителями.

Креативное, красивое и интерактивное портфолио.

WordPress в вашем браузере при помощи WASM. Почему это может быть полезно.

Гитхаб подготовил отчёт о произошедшем инциденте произошедшем в сентябре, который затормозил Codespaces и скорее всего затронувший GitHub Actions в августе.

🚶 Доступность

Если вы скрываете бургерное меню за details/summary, то прекратите так делать. Элементы, находящиеся внутри details/summary, перестают быть доступными.

🚶 Спецификации

Ещё больше сведений о переходе на Manifest v3. Если у вас есть расширение на Manifest v2, то уже пора его переписывать на v3, иначе скоро ваше приложение перестанет работать.

🚀 React

Полное руководство по рендерингу в React. Статья 2020 года, но обновлена в 2022 под React 18.

Руководство по React Query. Узнайте, для чего нужен React Query, как настроить useQuery, как настроить асинхронность фиктивного API.

Узнайте, как написать свою библиотеку управления состоянием. Для этого разберитесь с иерархией компонентов, тем, какие компоненты обращаются к хранилищу, и изменением состояния.

Сделайте React быстрым по умолчанию и по-настоящему реактивным. Узнайте, почему у компонентов слишком часто происходит ререндеринг, как уменьшить количество ререндеров или вообще от них отказаться.

TypeScript 4.9 Beta: новый оператор satisfies, проверка на NaN, новый watcher для отслеживания состояния файлов из Node.js, улучшение типов для Promise.resolve.

💽 Node.js

npm 8.18.0 позволяет попробовать npm query, для более удобного запроса зависимостей. Посмотрите подробнее в видео.

Новая тестовая среда, встроенная в Node.js 18.8.0+, которая позволяет тестировать кодовую базу без зависимостей.

Интервью с автором «Шаблонов проектирования в Node.js».

Десять рекомендаций по контейнеризации приложений Node с помощью Docker. Узнайте, как создавать оптимизированные и безопасные Docker-образы на основе Node.js для микросервисов, рендеринга на стороне сервера или автономных приложений.

Маршрутизация запросов Postgres между экземплярами для чтения и записи.

⚡  Производительность

Перформанс бюджет: самый простой способ сделать сайт быстрее. Как установить бюджет на производительности для достижения и удержания целей по скорости.

🛠 Инструменты

VS Code помогает общаться авторам расширений. Теперь авторы расширений могут общаться между собой, демонстрировать свою работу и задавать вопросы.

Релиз VS Code 1.72. Все изменения за сентябрь:

  • Настройка панели инструментов;
  • Улучшенная автопрокрутка редактора;
  • Настройка поиска в виде дерева;
  • Закрепление часто используемых зада.

VS Code Timeline восстанавливает потерянную работу, которую не восстановит даже Git.

Вышел axios 1.0.0. Axios — это HTTP-клиент на основе Promise для браузера и Node.js. В новой версии было много мелких изменений и исправлений. В основном всё работает как обычно. А первый коммит был создан 19 август 2014. Вот сколько времени прошло.

Neat.css 0.1.0. Neat — это простой HTML-шаблон. Он крошечный и сделан на века. Neat был разработан для блогов, журналов, технических сайтов, документаций, книг и простых магазинов.

Калькулятор для создания резиновых размеров текстов с помощью clamp(). Создаёт кастомные свойства для резиновых размеров текста. Результат калькулятора можно использовать в дизайн-системах.

Vitest — библиотека для тестирования React.

Radix-UI — библиотека доступных компонентов для React.

SVGR — инструмент для преобразования SVG в React-компонент.

Как читать статьи на английском языке

В дайджесте много статей и видео на английском языке, чтобы это не стало препятствием: в Google Chrome есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.