33 js концепции, которые должен знать каждый разработчик

Громкий заголовок, но в этом репозитории на самом деле много ресурсов как по основам, так и по продвинутым темам. Сборник статей, сгруппированных по темам.

https://github.com/leonardomso/33-js-concepts?tab=readme-ov-file#-table-of-contents

Создаем React хук для шорткатов

Таня Раскиа рассказывает про разные виды шорткатов, кешировании, оптимизации, а также о подводных камнях при разработке хука

https://www.taniarascia.com/keyboard-shortcut-hook-react/

Разбиваем тяжелые задачи и улучшаем производительность

Kак улучшить отклик веб-приложений, разбивая длительные задачи на меньшие с помощью методов вроде scheduler.yield и асинхронных циклов for..of.
Это помогает избежать блокировки интерфейса и обеспечивает более плавную работу приложения.

https://calendar.perfplanet.com/2024/breaking-up-with-long-tasks-or-how-i-learned-to-group-loops-and-wield-the-yield/

Курс по Еvent-Driven Архитектуре

Создаем production-ready приложение на NextJs, Clerk и Webhook. Настраиваем базу данных с помощью NeonDB and Prisma и реализуем типичные CRUD операции.

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

Основные ошибки при использовании React Testing Library

Кент Си Доддс описывает распространённые ошибки при использовании RTL и предлагает рекомендации по их предотвращению.

https://kentcdodds.com/blog/common-mistakes-with-react-testing-library

Оmatsuri

Набор инструментов на каждый день: компрессор, декодер, генератор градиентов и многое другое.

Это опенсорсный проект, репу можно глянуть тут https://github.com/rtivital/omatsuri

https://omatsuri.app/

AI ассистент прямо в DevTools

С недавнего времени в Chrome появился свой асистент, который помогает с вопросами по отладке. Вот небольшой обзор и краткое руководство от разработчиков Chrome.

https://developer.chrome.com/docs/devtools/ai-assistance?hl=ru

Александр Моргунов — Разбираемся в Feature-Sliced Design

Александр из Samokat.tech рассказывает, что из себя представляет архитектурная методология Feature-Sliced Design и ее основные концепты.

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

Передача переменных и значений между HTML, CSS и JavaScript

Короткая заметка о том, как прокинуть значение в HTML с помощью CSS переменных и DOM API.

https://frontendmasters.com/blog/sharing-a-variable-across-html-css-and-javascript/

2024 JavaScript Rising Stars

Тренды и популярные проекты в экосистеме JavaScript за 2024 год.

https://risingstars.js.org/2024/en

RegexpGarden

Игровое обучение регулярным выражениям. 42 задания от просто к сложному раскрывают аспекты работы с регулярками.

👉 Внимание, чтобы перейти к описанию урока нажмите на крестик в сайдбаре (рядом с Select Lesson)

https://regexp-garden.madewith.fun/

Примеры утечек памяти в JavaScript

Разбираем несколько причин утечек памяти и способы их устранения.

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

Введение в Nginx

Знакомство с базовыми концепциями одного из самых популярных серверов.

https://www.netguru.com/blog/nginx-tutorial-basics-concepts

6 полезных CSS сниппетов

▫️использование контейнерных запросов;
▫️создание прокрутки с привязкой;
▫️избегание position: absolute с помощью CSS Grid;
▫️быстрое создание круга;
▫️использование каскадных слоев;
▫️применение логических свойств для упрощения кода.

https://web.dev/articles/6-css-snippets-every-front-end-developer-should-know-in-2023

CSS text-box-trim

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

https://developer.chrome.com/blog/css-text-box-trim?hl=ru

Очередной кейс использования container queries и селектора :has()

Ахмад Шадид рассказывает и показывает, как создавал функционал заглавной картинки для своего блога.

https://ishadeed.com/article/modern-css-feature-image/

Избавляемся от any в проектах на TS

any отключает многие проверки типов и снижает безопасность кода. Заметка о том, какие правила линтинга использовать, чтобы сделать ваш код более надежным.

https://typescript-eslint.io/blog/avoiding-anys/

Перемещение элементов в DOM при помощи moveBefore

moveBefore позволяет перемещать элементы без первоначального удаления их из DOM, что добавляет удобства, т.к. в случае iframe - нет перезагрузки содержимого, активные элементы остаются в фокусе и т.д. Более подробно - по ссылке.

https://www.bram.us/2025/01/16/move-elements-around-the-dom-while-preserving-their-state-with-movebefore/

Экспериментальный React Transition API

С первого релиза до настоящего времени у React не было своего API для анимации, и приходилось использовать библиотеки (например, Motion for React или React Spring). Наконец разрабочики решили залатать эту дыру. Теперь можно попробовать ViewTransition. Подробнее — в статье.

https://motion.dev/blog/reacts-experimental-view-transition-api

Инструменты для проверки доступности

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

https://techhub.iodigital.com/articles/accessibility-tools