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

???? HTML

???? Создадим табы на веб-компонентах. Для создания потребуется хорошо знать разметку, ариа-роли и UX.

???? Самый высокий сайт в мире!

???? Как создать сайт... в 1997 году.

???? Почему хлебные крошки так назвали? А почему радио-кнопки радио? Чтобы людям было проще переходить из реального мира в цифровой.

????️ CSS

???? Визуальные эффекты на CSS. Несколько потрясающий эффектов, которые можно достичь с помощью mix-blend-mode.

???? CSS становится всё сложнее и сложнее.

???? Как вырываться из центровщика. Все мы центрируем наш контент, но как сделать так, чтобы какие-то блоки были шире центровщика?

????️ JavaScript

???? VITE 3.0. Новая документация. Повышена версия node.js до 14.18+. Изменение архитектуры. API импорта WebAssembly был пересмотрен для совместимости с будущим стандартом.

???? Испытание производительности и совместимости Bun c node.js.

???? Statements Vs. Expressions. Разберитесь в чём разница между «оператором» и «выражением» в JavaScript?

????React

???? Тщательно подобранный список React-компонентов и библиотек.

???? История о том как Yelp переезжала с Styleguidist на Storybook.

???? А хуки были хорошей идеей? Принципы SOLID не возникли из вакуума и кажется хуки поощряют разработчиков нарушать эти принципы.

???? Применение SOLID-принципов в Реакте.

???? Как рефакторить большое React-компоненты. Следуйте и не игнорируйте лучшим практикам начиная с создания компонента.

???? Node.js

???? Кастомные ESM-загрузчики: кто, что, когда, где, почему, как? Кастомные загрузчики мощный механизм обеспечивающий контроль над загрузкой модулей, который можно протестировать в node.js 18.6.0.

???? Вышла новая версия node.js 18.6.0 с ESM Loader Hooks.

???? Как настроить GraphQL API сервер в node.js. Практическое пошаговое руководство.

???? Vue

???? Начинаем работать с компоновщиками.

????️ Инструменты

???? Putout. Что если бы ESLint мог исправлять ошибки в рантайме?

???? Aspect. Позволяет копировать React-component прям с сайта.

???? React render tracker 0.7.0. Инструмент для обнаружения проблем с производительностью, связанных с непреднамеренным повторным рендерингом.

???? Ember 4.5.

????️Браузеры

???? 10 советов по работе с DevTools для эффективной работы.

???? В Safari 16 появится возможность анимировать гриды.

????Общее

????Золотое сечение в UX-дизайне — почему это важно? Помните, 1,618 … это не просто число. Золотое сечение — это движущая сила хорошего дизайна.

???? Как сделать текст более удобным. Коллекция советов от небольших надписей, уведомлений навигационных подсказок и так далее.

???? Должен ли я нажимать "Разрешить использовать cookie" на каждом сайте? Коротко: да, для сайтов, которым вы доверяете и которые часто используете.

???? Создадим идеальную кнопку.

???? Наглядное сравнение более 100 шрифтов для программирования.

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

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