Фронтендер от бога

Форматирование относительного времени в JavaScript

#почитать

API Intl.RelativeTimeFormat доступно в Baseline в статусе «Widely Available» с 16 марта 2023 года. Это мощный инструмент для отображения относительного времени в локализованном виде, например, «через минуту», «вчера» или «2 недели назад». Он автоматически адаптируется к языку и культурным особенностям региона, делая интерфейс более понятным и дружелюбным для пользователей.
В этой статье мы разберём, как работает Intl.RelativeTimeFormat, и приведём несколько примеров его использования.

⏱Читать статью

Как мы рендерим видео на клиенте с помощью ffmpeg

#почитать

Обычно FFmpeg используют на сервере, но есть обертки и сборки для браузера, которые позволяют выполнять операции и на фронтенде. Сегодня речь пойдет о ffmpeg.wasm и настройке параметров для односекундной сборки видео, которое после просмотра пользователь может скачать.
В статье покажем, как выглядит решение. Оно подойдет и для бэкенда, но нам пришлось обрабатывать и склеивать ролики именно на клиенте.

⏱Читать статью

Реализуем собственный Promise в JavaScript

#почитать

В статье реализуется собственный Promise в JavaScript. Разбираем базовую модель промисов, проблемы наивной реализации и то, как они решаются в спецификациях Promises/A+ и ECMAScript.
Материал предназначен для разработчиков, которые используют Promise и хотят понять, как он работает внутри.

⏱Читать статью

Как мы собрали фронт без фронтендера за неделю: AI-ассистент + дизайн-система

#почитать

У нас случилась классика: бэкенд уже отдает данные, бизнес ждет экран «вчера», а фронтендера в команде нет и ближайшие фронты заняты.
Мы рискнули и собрали MVP‑интерфейс за неделю — без выделенного фронта, но на корпоративном стеке (Vue/TypeScript) и с дизайн‑системой.
Это не история «AI все сделал». Это история про то, как правила + дизайн‑система + ревью как для джуна могут делать из AI‑ассистента нормальный инструмент, а не генератор мусора.

⏱Читать статью

Как строить переиспользуемые фронтенд-компоненты: пример кнопки лайк

#почитать

Когда проект становится больше, неизбежно появляется вопрос: как писать интерфейс так, чтобы потом не переписывать одно и то же десятки раз?

⏱Читать статью

Инвертирование равенства. Как реже стрелять себе в ногу в C-подобных языках

#почитать

Поговорим о классической (и болезненной) проблеме кодирования «присваивание вместо равенства» которая в любой момент может создать очень много проблем. О логическом источнике этой ошибке, и о способах решения.

⏱Читать статью

Глобальная область видимости в JavaScript

#почитать

Как любой другой язык программирования, JavaScript позволяет создавать элементы доступные в любом месте приложения. И, как и с другими механизмами, JS тут имеет свои уникальные, но важные особенности, которые мы подробно сейчас рассмотрим.
Глобальная область видимости может принимать различные формы в зависимости от того как загружаются код JS.

⏱Читать статью

🤩 Начни ИТ-карьеру в Авито — одной из лучших* компаний для работы!

На Стажировке для разработчиков 4 направления для роста студентов — бэкэнд, фронтенд, тестирование и андроид. А ещё:
— конкурентная зарплата, её размер обсудим на интервью
— гибкий график от 25 часов в неделю на стажировке, легко совмещай с учёбой
— корпоративный ноутбук и доступ к базам знаний и библиотекам
— работа из офиса, полностью удалённо или в гибридном формате
— компенсация питания, консультаций с психологами и юристами
— продвинутый наставник и сообщество стажёров для обмена опытом
— реальные задачи, которые влияют на развитие продуктов Авито
— карьерные перспективы и рост: покажи себя и получи шанс стать частью команды.

🌟 Присоединяйся по ссылке!

*2 место в рейтингах работодателей от FutureToday 2026 и Хабр 2025

trackOpBits во Vue 3: как битовые маски ускоряют ReactiveEffect

#почитать

Для первой публикации я выбрал тему внутренней оптимизации реактивности во Vue 3 — trackOpBits и работу ReactiveEffect. Этот механизм почти не заметен при обычной работе с фреймворком, но он напрямую влияет на производительность рендера компонентов и поведение вложенных computed.
В статье разберём, какую проблему решает trackOpBits, как именно он используется внутри системы реактивности и почему эта оптимизация важна в реальных приложениях.

⏱Читать статью

🪐 Новые вакансии фронтендеров


🚀 Frontend разработчик в Ronix, 60 000 - 100 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/frontend-razrabotchik-ronix-ae07705e

🚀 Frontend Developer (React) в Kerka Development, 180 000 - 250 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/frontend-developer-react-kerka-development-65c15e2d

🚀 Frontend Developer в Партнер HaaS-платформы, до 250 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/frontend-developer-partner-haas-platformy-cd44a068

🚀 Frontend / Backend Developer в The Thinksters, oт 300 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/frontend-backend-developer-the-thinksters-6ba69011

🚀 AQA (JS/React) в BotConversa, 220 000 - 260 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/aqa-jsreact-botconversa-a95b860d

🚀 Frontend Developer в MIA Dev, 200 000 - 250 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/frontend-developer-mia-dev-17ca0528

🚀 Frontend Developer в Продукт в стадии MVP (Первичная разработка и запуск, 180 000 - 220 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/frontend-developer-produkt-v-stadii-mvp-pervichnaya-razrabotka-i-zapusk-9d036106


Больше вакансий здесь ⤵️
https://jobrocket.ru/ru?categories=frontend&page=1

Тихие сбои React Compiler и как их исправить

#почитать

React Compiler обещает избавить от ручной мемоизации и вернуть разработчику фокус на логику интерфейса. Но за этой когнитивной разгрузкой скрывается тонкий риск: в ряде случаев компилятор тихо откатывается к обычному поведению React, и вы узнаёте об этом только по деградации UX. В статье — практический разбор «тихих» сбоев, ограничений синтаксиса и способа заставить сборку честно сигнализировать о проблемах через ESLint.

⏱Читать статью

View Transitions API: полное руководство по плавным переходам в браузере

#почитать

View Transitions API часто показывают на демках с одной карточкой. Но когда вы начнёте внедрять его в реальный проект с асинхронной загрузкой, React, кастомными анимациями и поддержкой старых браузеров, — окажется, что демки умалчивают о массе деталей.

⏱Читать статью

Асинхронные циклы в JavaScript: как избежать ловушек

#почитать

Запускаете три независимых API-запроса в цикле, а они выполняются друг за другом, заставляя пользователя ждать втрое дольше. Или получаете массив [Promise, Promise, Promise] вместо ожидаемых данных. Всё дело в том, как вы используете await, map и forEach.

⏱Читать статью

40 самых популярных регулярных выражений в JavaScript

#почитать

Часто бывает нужна какая-нибудь конкретная регулярка — например, проверить почту или номер телефона. Собрали 40 часто встречаемых, чтобы они всегда были под рукой (или, на худой конец, в закладках).

⏱Читать статью

Как спарсить JSON (100% рабочий способ)

#почитать

JSON (JavaScript Object Notation) — это текстовый формат для представления структурированных данных. Он повсеместно используется для обмена информацией между клиентом и сервером, хранения конфигураций и сериализации состояний. В JavaScript его преобразование в рабочие объекты выполняется стандартным методом JSON.parse(). Ниже описаны корректные и надёжные способы его применения — от базового использования до промышленных практик.

⏱Читать статью

UUID в JavaScript: Полное руководство

#почитать

Генерация UUID — одна из тех фундаментальных задач, с которой сталкивается каждый разработчик. Universally Unique Identifier, или универсальный уникальный идентификатор, решает простую, но критически важную задачу: создание гарантированно уникального идентификатора.

⏱Читать статью

Настройка Jest и React Testing Library: пошаговое руководство для React и Next.js проектов

#почитать

В этой статье мы подробно рассмотрим процесс настройки среды unit-тестирования веб-приложений на базе React и Next.js с использованием Jest и React Testing Library. Расскажем об установке необходимых зависимостей, создании конфигурационных файлов, настройке Babel и TypeScript, подключении SCSS и SVG, а также организации структуры проекта. Особое внимание уделено специфике настройки Jest в среде Next.js. Материал будет полезен для frontend-разработчиков и команд разработки, которые работают с React или Next.js проектами и хотят внедрить качественное unit-тестирование.

⏱Читать статью

Функции в JavaScript: полное руководство для начинающих

#почитать

Функции в JavaScript — это блоки кода, которые выполняют определённую задачу и могут быть вызваны многократно. Они помогают структурировать программу, делая код чище и удобнее для поддержки. В этой статье мы разберём, как создавать функции, какие их виды существуют, и как использовать параметры, возвращаемые значения и другие возможности. Всё с примерами, чтобы вы могли сразу начать применять знания!

⏱Читать статью

🪐 Новые вакансии фронтендеров

🚀 Frontend-разработчик (Vanilla JS) в NDA (хайлоад-проект), 200 000 - 300 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/frontend-razrabotchik-vanilla-js-high-load-nda-hajload-proekt-11c5f387

🚀 Frontend Developer в NDA (проект iGaming), 320 000 - 400 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/frontend-developer-nda-proekt-igaming-ff48b78e

🚀 Frontend Developer в Олдис, 50 000 - 80 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/frontend-developer-oldis-c4225f3f

🚀 React Frontend разработчик в NDA (SaaS-сервисы), 60 000 - 130 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/react-frontend-razrabotchik-nda-saas-servisy-e79628d4

🚀 Frontend разработчик (react) в NDA (Криптокошелек), 280 000 - 400 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/frontend-razrabotchik-react-nda-kriptokoshelek-1bc75b7a

🚀 Fullstack Engineer в NDA (MVP разработка), oт 300 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/fullstack-engineer-nda-mvp-razrabotka-b0ddbed3

🚀 React разработчик в NDA (ИТ-проекты), 50 000 - 90 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/react-razrabotchik-nda-it-proekty-60da4a53

🚀 Senior Frontend (React JS / Next JS) в Sprut Gaming, oт 200 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/senior-frontend-react-js-next-js-sprut-gaming-7293ee8e

🚀 FullStack-разработчик в INTOP, 120 000 - 180 000 ₽
Подробнее ➡️
https://jobrocket.ru/ru/job/fullstack-razrabotchik-intop-3d72702b

Больше вакансий фронтендеров здесь ⤵️
https://jobrocket.ru/ru?page=1&categories=frontend