Фронтенд-новости №15. CSS становится сложнее, VITE 3.0, самый высокий сайт в мире

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