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

Cryanide как альтернативная ветвь развития web-технологий #почитать Кратко о том, почему я не использую фреймворки, зачем пишу всё с нуля и к чему это привело. Я написал полноценный SDK для web-приложений как концепт альтернативной ветви развития, если бы web-индустрия пошла по пути игровых движков. ⏱Читать статью

Хватит использовать JavaScript для решения задач CSS #почитать Недостаток знаний часто подталкивает людей к чрезмерно сложным решениям, и рано или поздно это отражается на производительности. Возьмем content-visibility: auto. Он дает тот же эффект, что и React-Window, но без единой строчки JS и без увеличения размера сборки. Аналогичная ситуация с современными единицами высоты окна (dvh, svh, lvh): наконец-то приведена в порядок "мобильная" высота, которую годами пытались компенсировать через window.innerHeight. Обе технологии в 2024 году получили более 90% поддержки современных браузеров и полностью готовы для продакшна. Однако мы по привычке продолжаем решать такие задачи с помощью JS, просто потому, что CSS незаметно ушел вперед, пока мы спорили о React Server Components. ⏱Читать статью

Всплытие переменных и функций в JavaScript #почитать В JavaScript есть уникальная особенность, переменную или функцию можно использовать по коду выше... ⏱Читать статью

Запилил кросс-фреймворк Markdown/MDX парсер, чтобы не мучаться с контентом #почитать Долго я возился с маркдауном в своих проектах и, честно говоря, знатно подгорел. Первая проблема — это вечный выбор библиотеки. С одной стороны, есть «конструкторы» типа unified, remark и rehype. Штуки мощные, но настраивать весь этот AST-конвейер и систему плагинов — это какой-то оверхед и лишняя сложность, имхо. С другой стороны, есть @next/mdx, который вроде и ок, но слишком завязан на страницах и вообще не умеет работать на клиенте. Раньше я обычно выбирал что-то вроде markdown-to-jsx или react-markdown. DX у них приятнее, работают и на клиенте, и на сервере, весят мало. Но вот беда: они «из коробки» не переваривают HTML или MDX, и ты снова вязнешь в настройке плагинов. А если добавить туда i18n (типа i18next или next-intl), начинается настоящий ад. Куча if/else в коде, чтобы отрендерить нужный язык, и бандл раздувается до небес. Плюс вечные косяки с front-matter. Ну и до недавнего времени всё это было только для React. ⏱Читать статью

DOM-дерево — как не запутаться в ветвях объектной модели документа #почитать Бывало такое: смотрите вы на красивую страницу интернет-магазина, открываете консоль разработчика (ту самую, по F12 или через правый клик), а там — лес из тегов, который вообще не похож на то, что вы видите глазами? ⏱Читать статью

Интерактивный HTML с Alpine.js на простых примерах #почитать Большие фронтенд-фреймворки часто требуют сложной настройки: сборщики, роутинг, состояния, хуки, конфигурации. Но для небольших задач вроде выпадающих меню, модалок или табов этого слишком много — иногда хочется просто взять HTML и быстро добавить в него немного интерактивности. ⏱Читать статью

Замыкание в JavaScript — зачем функциям личное пространство #почитать В разработке нам постоянно нужны «умные», самостоятельные функции: счетчики, которые знают свое предыдущее значение, обработчики событий с индивидуальными настройками, механизмы для защиты данных. Чтобы не городить глобальные переменные и не писать громоздкие конструкции (что почти всегда ведет к багам), мы посмотрим на еще одну фишку JS. В предыдущих статьях мы разобрали: функции, их стрелочные записи, методы объектов и даже покорили this. Теперь пора переходить к теме, которая часто пугает на собеседованиях, но на деле оказывается невероятно элегантной — замыканиям. ⏱Читать статью

Форматирование относительного времени в 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. ⏱Читать статью