Регулярки в мультиязычных приложениях Сегодня коротко и по делу: в феврале был на «Подлодке», и на докладе про i18n в React-приложениях был хороший пример про валидации форм. Если вам нужно провалидировать имя регуляркой: ❌ /^[a-zа-я]+$/i — не исп...

🚧 Почему виртуальный скролл ломается на больших данных Сегодня хочу рассказать вам вот об этой статье How to Implement Virtual Scrolling Beyond the Browser's Limit. Когда мы говорим, что нужно оптимизировать рендеринг большого количества элементов...

🗿 Подводные камни при переходе с ES5 на ES6 Недавно мы с командой, наконец-то перешли с ES5 на ES6. Всё прошло достаточно плавно, нам пришлось исправить всего несколько ошибок в рантайме. Почти все ошибки были в очень старых файлах, где были отклю...

🔄 Обновляем caniuse-lite Когда стали использовать реакт, мы взяли стандартный create-react-app, в котором использовался browserslist. Конфиг был стандартный. "browserslist": { "production": [ ">0.2%", "not dead", "not op_mi...

🤝 Как подружить React.lazy с дефолтным экспортом У нас в проекте используются только именованные экспорты. Почему — писал здесь. Но React.lazy работает только с дефолтными экспортами, и раньше нам приходилось успокаивать eslint, приговаривая // es...

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

🧹 Тестирование — подчищаем за собой Так исторически сложилось, что у нас на проекте нет юнит тестов, только интеграционные и e2e. Иногда в тестах приходится подчищать за собой — удалять созданные во время выполнения теста объекты в базе, чтобы не...

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

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

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

​​Проверка именования файлов и папок с помощью плагина eslint-plugin-import Во время код ревью, можно заметить, что мы часто оставляем одни и те же комментарии об именованиях или каких-то соглашениях (которые описаны в вики, и которые никто не читае...

📖 Why I’ve stopped exporting defaults from my JavaScript modules Сегодня на повестке статья из далёкого и спокойного 2019 “Why I've stopped exporting defaults from my JavaScript modules”. В статье автор предлагает отказаться от экспортов по-умолча...

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

​​🧮 Задача на знание замыканий в JavaScript Если вам приходится собеседовать начинающих фронтендеров, то следующая простая задача поможет вам проверить, понимает ли разработчик принцип работы с замыканиями, и может ли он применять их на деле. / Н...

​​🧮 Задача на знание this в JavaScript Иногда на собеседованиях дают подобные каверзные задачи, в которых необходимо хорошо понимать, как работают одновременно: стрелочные функции, контекст this и замыкания. Вот одна из задач, которую мне давали на...

​​Контроль импортов с помощью import/no-restricted-paths Когда мы задумываемся о структуре проекта — то мы подразумеваем некоторое разделение на области/модули, где каждый модуль имеет свою зону ответственности. Помимо этого, зачастую, один модуль н...

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

▶️ Интегрируем Яндекс Музыку в Visual Studio Code 3 года назад я начал писать расширение для Яндекс Музыки, за это время пришлось решить много интересных задач: 1️⃣ Создание библиотеки для Яндекс.Музыки 2️⃣ Создание OpenAPI схемы и обход CORS 3️⃣ В...

​​Yandex Music Client for JavaScript За последние пару дней новогодних праздников я, наконец-то, сделал то, что собирался сделать пару лет - сгенерировал JavaScript-клиент для Яндекс.Музыки на основе OpenAPI-схемы. Что это значит? Берётся OpenAPI-сх...

​​📖 Как браузер рендерит веб-страницу Для фронтенд-разработчиков очень важно знать, как происходит отрисовка веб-страницы на всех этапах: от отправки запроса на сервер до отображения картинки, которую мы видим в браузере. Чтобы быстро разобраться ...

​​☠️ Временная Мёртвая Зона Временная мёртвая зона (ВМЗ) — участок от начала блока кода, до строки, где переменная объявлена и инициализирована. Понятие ВМЗ применяется только к переменным определённым с помощью let и const. Строки 2-5 — временная ...

​​Пятничное чтиво Всю эту неделю освежал в памяти как работает Event Loop (Событийный цикл) в JavaScript и всё что с ним связано. Ссылки ниже помогут ответить на вопросы: ❓Что такое микротаски ❓Что такое макротаски/таски ❓Что такое web api ❓В какой...