Недавно фиксил баг у себя в блоге, и заодно нужно было покрыть тестами парсер тегов для телеграм-постов. В какой-то момент вспомнил, что в Node.js уже есть встроенный тест-раннер. Решил не тащить лишние зависимости и просто проверить, насколько он в...

🎭 Про маски У нас наметился очередной редизайн, и снова всплыла проблема, с которой мы живём уже очень долго — зоопарк иконок. Если кратко: мы не можем инлайнить SVG или использовать что-нибудь вроде Font Awesome, потому что у пользователя должна ...

jQuery 4️⃣.0️⃣ Мы всё проспали, вчера вышел JQuery 4.0. Предыдущий релиз был 9 июня 2016 года. А говорят он умер, может ещё и реакт переживёт 😅. У нас вот, к сожалению, полно легаси на JQuery... https://blog.jquery.com/2026/01/17/jquery-4-0-0/ Д...

Лет 6 назад мы начали мигрировать на React и для быстрого старта взяли CRA. С тех пор много воды утекло и этой осенью я и ещё один коллега начали искать альтернативы CRA. Естественно, времени на это никто не выделял, поэтому нужно было отделаться "м...

Когда мы обновили pnpm с 7-й до 10-й версии, оказалось, что формат файла pnpm.lock изменился — и версии пакетов немного поехали. В итоге на CI начали рандомно падать некоторые асинхронные jest-тесты. Локально же всё работало без проблем. Падали прим...

🤖 Онбординг ИИ Что происходит, когда в команде появляется новый сотрудник? Правильно — он адаптируется и старается писать код в соответствии с гайдлайнами, принятыми в команде. А помогают ему в этом документация, линтеры и ревью коллег. По сути, И...

ИИ для прототипирования интерфейсов До недавнего времени я использовал ChatGPT исключительно как помощника для генерации кода — вбросить запрос, получить сниппет, внести правки. Но все вокруг только и говорят об AI-агентах, курсоре, v0 и так я наткн...

🗄️ Примеры использования IndexedDB Я потихоньку начал разбираться как работает IndexedDb и нашел пару хороших примеров использования. Я давно задумывался, как же excalidraw хранит всё, что я нарисовал, ведь картинки точно не влезут в localStorage....

✨ViewTransitionAPI view-transition-name Прочитал статью "Same-document view transitions for single-page applications" и решил запилить свою демку с открытием приложения как на айфоне, используя viewTransitionAPI. Анимация реализуется с помощью CSS ...

Я давно не рекомендовал ничего почитать, но эта короткая статья не оставила меня равнодушным. "Всего несколько строк CSS для плавных переходов между страницами" перевод на хабреоригинал Я много раз слышал, про View Transitions API и о том, что теп...

size-limit Вот здесь я писал про source-map-explorer и о том, как с его помощью анализировать размер бандла. Но, чтобы не приходилось анализировать бандл, лучше предотвратить его раздувание. Это можно сделать на этапе CI с помощью size-limit. Как ...

source-map-explorer На прошлой неделе анализировал размер главного бандла мобильной версии нашего приложения. В спешке мы накосячили с импортами и бандл раздулся. 🤔 Как анализировать? Для анализа использовал утилиту source-map-explorer. При зап...

Как инспектировать разметку попапов Если у вас возникают проблемы с дебагом попапов, которые открываются только по ховеру, то вот несколько простых советов: Способ 1: Открываете DevTools ⇒ Вкладка Sources ⇒ Далее наводите мышкой на свой элемент ⇒ Н...

function(): Promise 🆚 async function(): Promise Существует небольшая, но довольно важная разница между функцией, которая просто возвращает промис, и функцией, которая была объявлена с помощью ключевого слова async. Пример function fn(obj) { con...

Generic React-компоненты Помню года так 4 назад я писал базовый компонент поиска — стандартное текстовое поле, а когда начинаешь печатать, появляется список найденных элементов. И тогда я впервые задумался, поддерживает ли React дженерики в связке ...

Мемоизация селекторов в Zustand Если вы используете Zustand, то знаете, что computed значения реализуются с помощью селекторов. const userPrs = useChartsStore((state) => { return state.pullRequests.filter(pr => pr.author.id === state.user.id); ...

Максимальная длина строки в V8 У меня есть небольшой пет проект, для построения различных графиков для пул реквестов, которые показывают кто кому оставляет комментарии, ставит аппрувы и прочее. Бэкенда там нет, фронт ходит в Gitlab или Gitea, выкачи...

⚛️ React 19 — useOptimistic useOptimistic — новый хук, который позволяет отобразить “оптимистичное” состояние. Оно называется “оптимистичным”, потому что мы “оптимистично” надеемся, что наш запрос не свалится с ошибкой и после выполнения запроса сос...

⚛️ React 19 — use(Promise) use — новый хук, который позволяет считывать данные из промиса и при этом интегрирован с Suspense и ErrorBoundary. ℹ️ Основные моменты: На этот хук не распространяются правила хуков — его можно использовать внутри циклов...

🚀 React — Compound Components Как-то я уже упоминал паттерн Compound Components (Составные компоненты) для React, теперь остановимся на нём немного подробнее. ℹ️ Compound components — это подход позволяет объединить несколько компонентов в единую ...

Явное управление ресурсами в TypeScript[ — using Недавно,](https://t.me/cherkashindev/160) когда я рассказывал, как мы пишем тесты, я уже упоминал, что в TypeScript’е появилось новое ключевое слово using. Оно позволяет нам сделать код чище и более л...

​​Прошлой весной, я наконец-то зарегистрировался на GetMentor, и теперь время от времени мне поступают различные вопросы. Некоторые из них решил публиковать здесь на канале. Вопрос: если для параметра указать тип React.DragEvent<HTMLDivElement> ,то ...

​​Если вы ещё не забыли, в предыдущем посте я упомянул, что прошёл мини-курс по написанию статей на Хабр. А сегодня хочу поделиться статьями, которые написал за время обучения: 1️⃣ Как автоматизировать использование дизайн токенов с помощью Stylelin...

​​💻️️️️️️ Array.prototype.sort Как будет отсортирован следующий массив [-1, 0, 1, 2, -1, -4, -2, -3, 3, 0, 4].sort()? 🥱 Предыстория На выходных я решал литкод, и в задаче 3sum было необходимо отсортировать массив по возрастанию, перед тем как пе...

⚛️ Атомарные обновления в Zustand Я уже упоминал атомарные обновления ранее, когда говорил о проблемах контекста реакта. Я называю обновления атомарными, если компонент обновляется только тогда, когда изменяются данные, которые он использует. У кон...

​​📖️️️️️️ Каррирование и частичное применение Каррирование и частичное применение — две концепции из функционального программирования, которые очень часто путают из-за их схожести (а я пишу этот пост, чтобы наконец-то запомнить). И частичное приме...

🍂 Проваливание промисов Когда вы передаете в then() что-то отличное от функции (например, промис), это интерпретируется как then(null) и в следующий по цепочке промис «проваливается» результат предыдущего. Подробнее о промисах в статье "У нас проб...

​​⚠️ Проблемы React Context Использование контекста реакта и хуков, упрощает управление состоянием приложения. В небольших проектах уж и вовсе позволяет отказаться от использования менеджеров состояний. Но у него есть ряд проблем, о которых необходи...

​​📖 Архитектура фронтенда на основе вертикальных слайсов Сегодня порекомендую статью о структуре фронтенд проектов на основе вертикальных слайсов. Автор начинает рассказ с описания структур первых проектов, где использовался подход “Разделения по ...

​​Почему мы выбрали Zustand❓ Как я упомянул в предыдущем посте о Zustand, мы начали его использовать в июне 2021 года. До этого использовали просто useState/useReducer/useContext, поняли что так больше нельзя, и перед разработкой новой большой фичи...

Zustand — очень простая альтернатива Redux и MobX, не сильно сложнее useReducer. В последние пару лет появилось довольно много русскоязычных видео о Zustand. Мы на работе как раз начали его использовать пару лет назад, и в то время, похоже, он был н...

📖 What developers need to know about Chrome's Memory and Energy Saver modes - Chrome Developers В конце прошлого года в Google Chrome появились 2 новых режима Memory Saver (Экономия памяти)Energy Saver (Энергосбережение) Они позволяют более гибко...

🎬 Backend-Driven UI Сегодня посоветую доклад с HolyJS — Виталий Полещук, Стёпа Михайлюк — Server-driven UI в вебе. Не пиши, а описывай свой фронтeнд Парни в докладе рассказывают, как можно не заниматься формошлёпством, точнее как его упростить, чт...

📖 React 18 — useTransition, useDeferredValue React 18 вышел уже почти год назад, но только сейчас решил поискать наглядные примеры использования новых хуков useTransition и useDeferredValue и наткнулся на отличное видео “Новые хуки useTransition и ...

​​📖 Avoid These Common Pitfalls Of React useState Статья описывает самые популярные ошибки при использовании useState в Реакте: Избыточное состояние (Redundant State)Дублирующее состояние (Duplicate State)Обновление состояния через useEffect (Upda...

🧼 Экранирование и санитайзинг Для предотвращения XSS существует 2 техники: Экранирование (Escaping) - замена опасных символов, их безопасными аналогами. Например “>” будет заменён на ">", “<” — "<". Это необходимо, так как символы “<”, “>” в HTML ...

XSS в React Одним из самых больших преимуществ реакта является его безопасный дизайн, который предотвращает появление большинства XSS (Cross-Site-Scripting) уязвимостей. Может показаться что, если вы используете реакт, то вы в безопасности, ведь: ●...

WAI-ARIA Authoring Practices перенесли сюда и обновили дизайн - не теряйте! #frontend #accessibility

Mock-функции в Jest В Jest существует 3 основные функции для подмены (мока) реализации: jest.fn() - mock functionjest.spyOn().mock<...> - mock/spy functionmockResolvedValue()mockReturnValue()mockImplementation()jest.mock() - mock module С первого ...