- PVSM.RU - https://www.pvsm.ru -

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

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

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

🧬 HTML

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

📔 Самый высокий сайт в мире! [2]

📔 Как создать сайт... в 1997 году. [3]

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

🖌️ CSS

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

📔 CSS становится всё сложнее и сложнее. [6]

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

🏗️ JavaScript

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

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

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

🚀React

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

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

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

📔 Применение SOLID-принципов в Реакте. [14]

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

💽 Node.js

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

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

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

🟩 Vue

📔 Начинаем работать с компоновщиками [19].

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

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

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

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

📔 Ember 4.5 [23].

🕸️Браузеры

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

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

🎓Общее

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

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

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

📔 Создадим идеальную кнопку. [29]

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

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

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

Автор: Николай Шабалин

Источник [31]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/news/377075

Ссылки в тексте:

[1] Создадим табы на веб-компонентах.: https://darn.es/building-tabs-in-web-components

[2] Самый высокий сайт в мире!: https://worlds-highest-website.com/ru/

[3] Как создать сайт... в 1997 году.: https://thehistoryoftheweb.com/postscript/its-1997-and-you-want-to-build-a-website/

[4] Почему хлебные крошки так назвали? А почему радио-кнопки радио?: https://uxdesign.cc/why-do-we-call-it-breadcrumbs-diving-into-the-history-of-ui-components-b35b813733e4

[5] Визуальные эффекты на CSS. : https://robbowen.digital/wrote-about/css-blend-mode-shaders/

[6] CSS становится всё сложнее и сложнее.: https://www.projectwallace.com/blog/css-complexity

[7] Как вырываться из центровщика.: https://css-irl.info/breaking-out-of-a-central-wrapper/

[8] VITE 3.0: https://vitejs.dev/blog/announcing-vite3.html

[9] Испытание производительности и совместимости Bun c node.js: https://techsparx.com/nodejs/bun/1st-trial.html

[10] Statements Vs. Expressions: https://www.joshwcomeau.com/javascript/statements-vs-expressions/

[11] Тщательно подобранный список React-компонентов и библиотек.: https://github.com/brillout/awesome-react-components

[12] История о том как Yelp переезжала с Styleguidist на Storybook.: https://engineeringblog.yelp.com/2022/07/migrating-from-styleguidist-to-storybook.html

[13] А хуки были хорошей идеей?: https://medium.com/codex/can-we-all-just-admit-react-hooks-were-a-bad-idea-c48120c5188d

[14] Применение SOLID-принципов в Реакте.: https://konstantinlebedev.com/solid-in-react/

[15] Как рефакторить большое React-компоненты.: https://code.pieces.app/blog/how-to-refactor-large-react-components

[16] Кастомные ESM-загрузчики: кто, что, когда, где, почему, как?: https://dev.to/jakobjingleheimer/custom-esm-loaders-who-what-when-where-why-how-4i1o

[17] Вышла новая версия node.js 18.6.0 с ESM Loader Hooks: https://nodejs.org/en/blog/release/v18.6.0/

[18] Как настроить GraphQL API сервер в node.js: https://www.taniarascia.com/graphql-server-node/

[19] Начинаем работать с компоновщиками: https://blog.logrocket.com/getting-started-vue-composables/

[20] Putout. Что если бы ESLint мог исправлять ошибки в рантайме?: https://javascript.plainenglish.io/what-if-linter-could-fix-runtime-errors-666c1d6225b4

[21] Aspect: https://sample-code.aspect.app/

[22] React render tracker 0.7.0: https://github.com/lahmatiy/react-render-tracker

[23] Ember 4.5: https://blog.emberjs.com/ember-4-5-released/

[24] 10 советов по работе с DevTools: https://stackdiary.com/chrome-devtools-tips-and-tricks/

[25] В Safari 16 появится возможность анимировать гриды.: https://github.com/mdn/browser-compat-data/pull/16781

[26] Золотое сечение в UX-дизайне — почему это важно?: https://www.peppersquare.com/ui-ux-design/golden-ratio-why-its-important-for-brands/

[27] Как сделать текст более удобным: https://design4users.com/ux-writing/

[28] Должен ли я нажимать "Разрешить использовать cookie" на каждом сайте?: https://www.huffpost.com/entry/should-you-click-allow-cookies-website_l_62be36b4e4b014f50a2fdd61

[29] Создадим идеальную кнопку.: https://wix-ux.com/designing-the-perfect-button-e77ec1f32ee5

[30] Наглядное сравнение более 100 шрифтов для программирования.: https://www.programmingfonts.org/

[31] Источник: https://habr.com/ru/post/677318/?utm_source=habrahabr&utm_medium=rss&utm_campaign=677318