Оптимизируем TTFB (Time to First Byte)

О способах ускорения загрузки веб приложений.

https://web.dev/optimize-ttfb/

Интерактивные SVG

Туториал по созданию SVG изображений на примере квинтового круга.

https://blog.logrocket.com/interactive-svg-circle-of-fifths/

Как работать с App Directory Architecture

О новой стратегии роутинга и рендеринга компонентов в Next.js.

https://www.smashingmagazine.com/2023/02/understanding-app-directory-architecture-next-js/

Валидация форм с помощью Zod

Один из вариантов валидации React форм, используя сочетание react hooks и Zod.

https://blog.bitsrc.io/react-form-validation-5aa06193bec4

Задумывались ли вы, насколько ваш продукт доступен для незрячих? А для слабовидящих или тех, у кого нет рук?

Если вы разработчик (web, iOS и android), дизайнер, исследователь, зовём учиться делать продукт доступным вместе!

С 13 марта по 28 мая на курсе "Цифровая доступность" вместе с кураторами из Yandex, Dodo, Yandex Go, Сбер, SpurIT, Miro будем разбирать теорию и практику доступности, геймдизайн, информационную архитектуру, дизайн-системы и многое другое.

Наш курс для тех, кому важно:
😎 обеспечить доступность своего сайта или приложения для любого, включая незрячего и парализованного человека
👨‍🦯 прокачаться в создании дружелюбных интерфейсов
💪 повысить свою конкурентоспособность на зарубежном и российском рынке
✍️ систематизировать знания по инклюзивной разработке
🧠 стать частью сообщества продвинутых профессионалов

Приходите: accessibilityunity.com/

Графики и чарты на React c использованием Recharts

О возможностях библиотеки Recharts для визуализации данных.

https://blog.openreplay.com/charting-and-graphing-in-react-with-recharts/

Тестируем Vue компоненты

Советы по тестированию Vue компонентов с Vitest и Vue Test Utils.

https://betterprogramming.pub/testing-vue-components-the-right-way-a5a0dfb819a2

Аудиоплеер на React

Подробный туториал по созданию веб плеера

https://blog.logrocket.com/building-audio-player-react/

Интегрируем Cache API с Service Workers

Простой способ кешировать статику с помощью Service Workers.

https://blog.openreplay.com/integrating-the-cache-api-with-service-workers/

CSS цвета высокого разрешения

Обзор цветовых моделей CSS, а также советы и тонкости при работе с цветами в Chrome.

https://developer.chrome.com/articles/high-definition-css-color-guide/

Когда и как использовать свойство CSS will-change

Расскажем о том, что за свойство will-change, и как оно может быть полезным для оптимизации рендеринга.

https://blog.logrocket.com/when-how-use-css-will-change/

#google-chrome #devtools

Что нового завезли в DevTools (Chrome 111)

Совсем недавно вышел Chrome 111 и принёс не только исправление старых ошибок, но и добавление новых, а также приятные фичи в DevTools, о которых мы с вами сейчас и узнаем.

Рейтинг: 20

Читать

Создаем менеджер задач на React + Hygraph

Пример приложения, который использует headless CMS Hygraph в качестве бэкенда.

https://code.pieces.app/blog/build-crud-task-manager-react-hygraph

Используем MutationObserver API для работы с элементами, которых пока нет.

О работе с интерфейсом, позволяющим отслеживать изменения в DOM и работать с новыми элементами.

https://www.macarthur.me/posts/use-mutation-observer-to-handle-nodes-that-dont-exist-yet

Асинхронное поведение в JS

О том, как JS обрабатывает асинхронный код и почему это важно знать для разработки.

https://blog.bitsrc.io/javascript-101-all-about-async-behavior-9b2a3a693f7a