Переключаем с помощью нового HTML контрола

Об использовании checkbox c новым атрибутом switch: работа, стилизация, детектирование возможности использования.

https://www.smashingmagazine.com/2024/05/switching-it-up-html-latest-control/

Firestore как альтернатива WebSockets

Как использовать Firestore для прослушивания событий в реальном времени.

https://canopas.com/websocket-alternative-how-to-use-firestore-to-listen-to-realtime-events-141e634d04bc

Новые методы итераторов

О методах map, filter, reduce, flatMap и других, которые работают на бесконечных коллекциях и могут лениво вычислять результат.

https://v8.dev/features/iterator-helpers

Итоги React Conf 2024

Короткая сводка по итогам прошедшей конференции (+ видео с докладами за 2 дня).

https://react.dev/blog/2024/05/22/react-conf-2024-recap

Сравниваем 5 менеджеров версий для NodeJS

И выбираем лучший для своих потребностей.
nvm vs n vs volta vs fnm vs pnpm.

https://pavel-romanov.com/5-node-version-managers-compared-which-is-right-for-you

Gap

Какие проблемы стилизации решает свойство gap и в каких случаях оно сильно упрощает разработку. Интерактивный гайд от Ахмада Шадида.

https://ishadeed.com/article/the-gap/

ESLint Configuration Migrator

Инструмент, позволяющий правильно сконвертировать существующий eslint конфиг для перехода на 9 версию.

https://eslint.org/blog/2024/05/eslint-configuration-migrator/

Таймер на CSS

Интересный подход к реализации таймера обратного отсчета без использования JS

https://frontendmasters.com/blog/how-to-make-a-css-timer/

Фича ECMAScript 2024: Promise.withResolvers()

Один из способов создания Promise с возможностью использования resolve/reject извне.

https://2ality.com/2024/05/proposal-promise-with-resolvers.html

ToDo App без использования клиентского JS

Пример реализации простого React приложения с использованием react server actions.
⚠️ Пример не для production!

https://dev.to/lazarv/todo-app-with-no-client-side-javascript-using-lazarvreact-server-23ig

Утечки памяти в React

Особенности работы замыканий в функциональных компонентах при использовании React Query.

https://schiener.io/2024-05-29/react-query-leaks

Создаем Rest API c NextJS 14

Короткий практический курс по NextJS для начинающих.

https://www.youtube.com/watch?v=aEFkWxUNAVc

Coding Cheatsheets

Набор шпаргалок по frontend технологиям и инструментам.

https://cheatsheets.shecodes.io/

Перейди по ссылке, и я узнаю твой номер

Как с помощью cookie можно узнать номер телефона юзера (и вычислить по айпи 😁).

https://habr.com/ru/articles/819595/

Тестирующие типы в TypeScript

Продвинутое использование типов в TS, которое вам вряд-ли понадобится в обычном приложении, но интересное для общего понимания.

https://frontendmasters.com/blog/testing-types-in-typescript/

Полезные техники и трюки CSS

Забытая рубрика с очередными трюками CSS, о которых вы, возможно, не знали.

https://www.smashingmagazine.com/2024/06/css-tips-and-techniques/

TypeHero

Платформа для изучения TypeScript через решение задач. Есть возможность выбрать трек по своему уровню + создавать и шарить свои задачи.

https://typehero.dev

Разбираемся с this в JavaScript

Объяснение this на примерах для различных ситуаций: глобальные объект, методы объекта, хендлер событий и другие

https://www.freecodecamp.org/news/the-javascript-this-keyword-explained-with-examples/

React Compound Component паттерн

Пример создания компонента рейтинга с Compound Component паттерном.

https://www.freecodecamp.org/news/how-to-build-a-rating-component-with-the-react-compound-component-pattern/

Как выбить 100 очков в Google Lighthouse в 2024

Трюки и хаки для достижения высоких оценок в Lighthouse (правда, это не всегда значит ,что у вашего сайта действительно топ перфоманс).

https://www.smashingmagazine.com/2024/06/how-hack-google-lighthouse-scores-2024/

Новинки CSS и веб-интерфейса

Обзор новшеств с I/O 2024, которые уже можно использовать (или в ближайшем будущем).

https://developer.chrome.com/blog/new-in-web-ui-io-2024?hl=ru