Веб-разработка *

Привет! Я — Аля, старший продакт-менеджер выделенных серверов в Selectel. Представьте, вашей команде нужно разработать новый интерфейс для продукта. Вы ставите задачу на дизайнера, а он приносит статичные картинки экранов в Figma. На встрече команда смотрит на них и понимает, что половина сценариев не продумана. Возникают вопросы: «Что будет, если пользователь нажмет на кнопку или данные не загрузятся?» И вместо того, чтобы передать задачу в разработку, вам приходится выяснять детали в комментариях и чатах.

Нам это хорошо знакомо. Долгие циклы согласований, переделки после релиза, сложности с тестированием — все это было частью нашего процесса. Чтобы решить эти проблемы, мы решили попробовать AI-инструменты для прототипирования. В статье расскажу, как Figma Make и другие сервисы помогли нашей команде ускорить создание прототипов и сократить количество правок. Будет полезно тем, кто устал от цикла «получить макет → найти проблему → подождать правки → повторить».

Долгое время я использовал пакет request (теперь устаревший) для выполнения HTTP-запросов в Node.js. Затем в моду вошли промисы (promises), и я переключился на request-promise (также ныне устаревший). Затем я начал использовать axios и думал, что на этом все... но ошибался. История HTTP в Node.js продолжает эволюционировать, и это прекрасно.

Выполнение запросов HTTP - одна из самых распространенных задач в Node.js. Будь то обращение к API, получение данных из внешнего сервиса или разработка веб-скрейпера (scraper), важно знать, как делать это эффективно. Хорошая новость состоит в том, что начиная с Node.js 18 в качестве глобальной переменной доступен стандартный fetch(). Если вы использовали fetch() в браузере, то уже знаете, как использовать его на сервере. Никаких дополнительных зависимостей, никаких оберток, только тот же знакомый API, предоставляющий все необходимое для выполнения запросов HTTP современным способом в Node.js.

Последние пару лет изменили то, как пишется код. Copilot, Cursor, ChatGPT, Claude - все это генерирует вполне работающий JavaScript быстрее, чем успеваешь сформулировать задачу. Это удобно. Но у этого удобства есть обратная сторона, сгенерированный код работает правильно в смысле делает что просили, но не всегда правильно в смысле не течет по памяти и не роняет прод под нагрузкой.

Модели хорошо знают синтаксис и паттерны. Они значительно хуже разбираются в том, что происходит под капотом конкретного движка. Closure, захватывающий лишние данные. Event listener, который никогда не снимается. Объект, который непреднамеренно продлевает жизнь половине DOM дерева. Все это - настоящие ошибки, которые реально встречаются в проде и ни один линтер их не поймает.

Чтобы замечать такие вещи при ревью, нужно понимать, как именно V8 хранит объекты и когда решает их удалить. Это не академическое знание - это инструмент, который меняет то, на что смотришь в коде.

Эта серия состоит из трех частей. Первая - про то, как V8 вообще организует память, что такое Stack и Heap, чем они отличаются и что такое pointer. Вторая - про сборщик мусора, как он определяет, что живо, а что нет и как делает это, не останавливая программу надолго. Третья - практическое применение, откуда берутся утечки памяти, как их искать и как писать код, который не создает лишней работы для GC.

Помните сказку про мальчика, который кричал «волки»? Примерно так же в 2025 году случилось с «программированием на CSS». Вышла функция if(). Блогеры преждевременно хайпанули: всё, теперь у нас условия в CSS. Разработчики пошли читать спецификации, попробовали — и довольно быстро выяснилось, что внутри условного выражения style() возможностей почти нет. Многие разочаровались и похоронили идею.

В конце 2025 года Chrome выкатил революционный Range Syntax For Style Container Queries. Обновлённый style() научился сравнивать переменные между собой и поддерживать диапазонные выражения. Мы наконец‑то получили мощную условную логику в CSS, но мало кто это заметил.

В этой статье мы попытаемся реанимировать идею программирования на CSS. На примере интерфейсного паттерна — «выделение диапазона дат в календаре» — разберём, как обычная JS‑логика превращается в CSS‑логику (спойлер: очень просто).

Отвечая на этот вопрос, я разобрал следующие темы?

Где и почему агенты работают хорошо?
Где агенты делают только хуже?
Что значит "подготовить проект" к эпохе агентов
Пара тупых, но работающих советов как работать с Claude Code
Советы, что делать если ты разработчик, тимлид, владелец продукта
Как я думаю, куда всё это приведет

Вспомните нулевые — браузерные страницы мигали баннерами и интерактивными элементами, игры запускались прямо во вкладке, а Flash Player был знаком почти всем. Но в 2020 году Adobe завершила его поддержку и начала блокировать Flash-контент. Так и закончилась эта история, а что было бы, если всё пошло иначе? Историю Flash и альтернативный сценарий разбираю в статье. 

Привет!

Это шестой выпуск Frontend Status — дайджеста по фронтенд-разработке.

В этом выпуске:

Медиа · TanStack Router и маршрутизация в React · Pinia и будущее Vue (Эдуардо Сан Мартин)

AI · Агентное будущее Next.js · AGENTS.md по-новому (Эдди Османи) · Вайб-кодинг и ценность кода (Маттео Коллина) · Таймлайн LLM за 10 лет

Безопасность и браузеры · OWASP для агентных приложений (Auth0) · Firefox 148 setHTML() вместо innerHTML · CSS corner-shape в Blink (Chrome)

CSS · Псевдокласс :near() · Смерть скролл-фейду (Крис Койер) · x86 на чистом CSS/HTML

JS/TS · Зелёный дизайн интерфейсов (Смэшинг) · Полифил switch · TypeScript v6 beta · TSSLint v3 · Асинхронные паттерны

A11y · .visually-hidden в 2026 (Дэвид Бушелл)

Фреймворки · React: React Doctor, SVAR Gantt, когда RSC тормозит · Angular: PrimeNG 19→21, Taiga UI CDK v4.72 · Vue: Nuxt на русском, VueUse

Разное и 3D · Ностальгия по вебу 90-х · Штраф Amazon 2,5 млрд за тёмные паттерны · WebGL composite (Three.js) · voxCSS и Mahjong

Представим ситуацию: идет тяжёлый спринт, вы выполнили кучу задач, написали тонну нового функционала, готовитесь к релизу и вдруг обнаруживайте, что часть фич перестала работать! Идёте разбираться и обнаруживайте, что оказывается бэкендер Вася в последний момент решил переименовать поля в json-е, а вам об этом не сказал!

Ситуация образная, но позволяет быстро обрисовать одну из болей во время разработки. В этой статье я бы хотел рассказать об одном из вариантов её решения в коде с помощью подхода Единого источника истины(Single source of truth).

Привет, Хабр! Меня зовут Василий Беляев. Я руководитель группы разработки по направлению фронтенда в ИТ-компании «Криптонит». В этой статье хочу поделиться опытом и рассказать об оптимизации библиотек: о том, с какими проблемами мы столкнулись, и как их пошагово решили.

Для начала кратко опишу фронтовый стек у нас в «Криптоните»: мы те ребята, которые не пишут на React. У нас все проекты и библиотеки написаны на Vue + Composition API. Из дополнительных инструментов мы используем следующие:

Система типов в TypeScript может творить чудеса, но на практике многие используют ее едва ли на десять процентов. Признайтесь, мы все хотя бы раз лепили any просто чтобы компилятор отстал и дал собрать проект. Проблема в том, что такие компромиссы рано или поздно приводят к неожиданным падениям в рантайме.

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

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

Обычно мы разрабатываем продукт, проверяем соответствие рынку (Product-Market Fit) и только спустя месяцы или годы решаем: «Пора выходить на глобальный уровень».

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

Как же с этим справиться? Заморозить разработку на неделю и рефакторить каждый компонент?

В последнее время я вижу много решений, основанных на compiler-driven подходе. Обещание заманчивое: добавьте пару строк кода, и приложение «само» станет мультиязычным.

Однако есть существенные недостатки.

Ты понимаешь, что баг хорош, если первым делом думаешь: «Как это вообще может происходить?»

Недавно я занимался доработкой дэшборда веб-приложения, над которым мы работаем, и заметил, что его загрузка длится бесконечно. Раньше на это требовалась одна секунда, но теперь ему требуется десять. Происходит что-то подозрительное.

Разумеется, сначала я обвинил в этом React.

Да, конечно, в современном веб-приложении может быть множество потенциальных причин проблем с производительностью: сторонний JavaScript, перегруженные серверы, раздутые ресурсы, отсутствующие индексы базы данных; список можно продолжать очень долго. Но опыт десятков лет разработки для веба подсказывал мне, что это была проблема фронтенда. Я просто чувствовал это. При загрузке страница дёргалась. И несмотря на то, что экосистема React сегодня — наименее плохой выбор для веб-фронтенда, она по разным причинам может оказаться хаотичной и тормозной.

Чтобы подтвердить свою теорию, я рассказал Claude¹, что загрузка дэшборда тормозит и что проблемы наверняка в React, попросив проанализировать их и ранжировать по степени серьёзности. Конечно же, Claude обнаружил в React кучу подозрительных аспектов — ненужный повторный рендеринг, отсутствующие мемоизации и так далее. К тому же он подсказал, что мы всё ещё не используем React Compiler. Я попросил Claude выполнить первый проход решения самых простых и самых серьёзных проблем React, но…

Практически ничего не поменялось. Возможно, дело всё-таки не в React.

Итак, я закатал рукава и начал тщательное расследование.

В прошлой статье я познакомил вас с существованием малоизвестных "суперплатформ" управления данными. На абстрактном примере реализации показал как легко кастомизируется платформа - от идеи, к готовому UI. У кого-то это вызвало отвращение, у кого-то просто шок, а кто-то увидел возможность.

Настало время на деле показать как с помощью современного стека разработки (который возможно уже через пару лет станет опять старым) - дать второе дыхание морально устаревшим системам из прошлого, взяв из них лучшее, а именно философию и надёжные концепции и при этом не страдать от старого, дурно пахнущего legacy.

В общем расскажу про импортозамещение Dassault Systèmes 3DExperience, далее Enovia, а точнее - той её части, которая на протяжении многих лет востребована многими крупными предприятиями: гибкого движка для построения бизнес-приложений, с возможностями управления жизненным циклом (без привязки к тяжелому САПР).

Это кейс о комплексном подходе: как одновременно думать про backend, DevOps, продукт, UX и бизнес-метрики. О том, как делать продукты, держа в голове всю картину сразу.

Три недели назад у меня была проблема: найти билеты на Бали для 5 человек с гибкими датами и определённой длительностью поездки. Агрегаторы не справлялись — приходилось проверять комбинации вручную.

На сегодняшний день у меня работающий продукт: телеграм-бот, который проверяет 1000+ комбинаций маршрутов в час, находит билеты с экономией до 52% и уведомляет пользователей в нужный момент.

Что между этими точками:
• Эксперимент "весь код пишет AI" (Claude справился на 90%)
• Обход защитных механизмов сайтов и реверс-инжиниринг API
• Построение аналитики с метриками CTR, retention, воронками

Спойлер: билет туда-обратно может быть на 40% дешевле суммы двух билетов в один конец

Привет, Хабр!

Вопросы по HTML и CSS всё реже встречаются на собеседованиях для фронтендеров. Но в основном это касается позиций middle и выше. А вот для начинающих специалистов они всё ещё есть.

Поскольку новичкам всегда сложнее проходить собеседования, я захотел помочь. Я поискал вопросы с собеседований, которые были в 2025 году, и составил список наиболее часто встречающихся вопросов.

А главное, отвечать на них будет ChatGPT. Я же буду его дополнять, если потребуется. Многие же используют его для подготовки. Вот и посмотрим, как он справится.

Сразу скажу, что буду душнить. Так что вы сами рассудите, кто из нас лучше отвечает.

Давайте начнём!

На дворе 2026 год. Нейросети пишут за нас тесты, холодильники сами заказывают продукты, а пользователи... пользователи всё так же ненавидят придумывать пароли.

Давайте честно: если ваш пет-проект или стартап сегодня встречает юзера формой Email + Пароль + Повторите пароль, вы теряете конверсию. Никто не хочет запоминать очередной набор символов для "очередного сервиса". Все хотят одну кнопку: "Войти как...".

В этой статье разберем джентльменский набор авторизации для 2026 года: что ставить для рунета, что для мира, и как это реализовать технически на примере Яндекс ID.

В 2026 году асинхронный Python уже никого не удивляет. Мы привыкли к автоскейлингу в облаках, но что делать, если ваш бюджет на инфраструктуру равен нулю, а в распоряжении есть только «печка» из 2012 года? Рассказываю про личный опыт выжимания максимума из FastAPI на AMD FX-8320: от тюнинга ядра Linux и PostgreSQL до миграции на Ed25519 и использования Rust-сервера Granian.

Я совсем не опытный фронтендер, но вайбкодинг уважаю и люблю. Отдельная боль - это создание стабильных и хороших UI для своих проектов. И вот представь: используешь Claude Code в разработке своего очередного стартапа-единорога и пытаешься объяснить агенту что нужно поправить: "сделай кнопку темнее и ту фигуру закругленней". Какую? «Ну ту, в сайдбаре». Так их там три. «Вторую сверху, с иконкой». Агент правит первую и как итог - ты возмущаясь, пишешь подробное описание с координатами, классами, соседними элементами и всё равно 50 на 50, что он поймёт. Если знакома эта боль, то есть интересная штука под названием Agentation.

Реноме у него довольно рекламное: за пару месяцев проект набрал 120 000+ загрузок на npm и наделал много шума, став частью воркфлоу многих разработчиков, которые активно vibe-кодят с AI. В этой статье разберем: что это за штука, как устроена изнутри, зачем нужна версия 2.0 с MCP, как завести и пользоваться самому и стоит ли вообще тратить время. Спойлер - если ты React-разработчик и работаешь с AI-агентами, то да, попробовать стоит.

В блоге Beeline Cloud мы временами обращаемся к ретротематике: писали про необычные RFC конца 80-х и 90-х годов, про возрождение текстовых игр. Сегодня заметен новый виток интереса к сайтам «как в ранние 90-е». Рассказываем, почему такая популярность — не просто дань ностальгии, и предлагаем подборку англоязычных технических блогов в формате «ничего лишнего, только текст»: от шпаргалок DevOps-специалиста до инструментария для моддеров WarCraft.

Привет! Я Сергей, разработчик. Когда мне понадобилась легкая анимация лайка в стиле YouTube, я столкнулся с проблемой: готовые решения либо слишком тяжелые, либо плохо дружат с прозрачностью в браузерах.

Не желая идти на компромиссы, я реализовал систему анимаций на Canvas. В статье поделюсь опытом создания частиц и физики на чистом JS, а также бегло разберу встроенные инструменты браузера для таких задач.

Мы будем делать схематичную анимацию фейерверков и конфетти по нажатию на кнопку при помощи JS. Изученные принципы универсальны для любого ЯП. Нам понадобится немного знаний ООП, тригонометрии, физики и совсем чуть-чуть геометрии. Вот что получится в итоге: