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

К нам в Doubletapp обратились организаторы Fame to Flame — федерального танцевального чемпионата. Онлайн-часть ивента планировалась как ядро всей механики конкурса — регистрация участников, загрузка видео, голосование, работа с чеками. При декомпозиции задач мы поняли, что сложность здесь на стыке: видеостриминг, антифрод, всплески нагрузки и жёсткий дедлайн в два месяца. Но у нас было мощное оружие — опыт.

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

Содержание:

‣ Что хотел заказчик
‣ Видео: главный источник сложности
‣ GPU-транскодинг под пользовательскую загрузку
‣ Асинхронный пайплайн обработки
‣ Подготовка к пиковым нагрузкам
‣ Наблюдаемость и раннее обнаружение деградации
‣ Модерация VK как часть production-цикла
‣ Фронтенд и кастомный видеоплеер
‣ Результаты

Привет, Хабр! С 31 марта 2026 года cPanel и Plesk перестанут работать для российских пользователей. WebPros International LLC, американская компания, которая дистрибутирует обе панели, официально уведомила российских партнеров: обслуживание клиентов из России и Белоруссии полностью отключается.

Мы в Рег.ру запустили программу экстренной помощи. Вместе с заместителем руководителя направления службы поддержки хостинга Рег.ру Никитой Никоновым и специалистами по переносу сайтов Аленой Галкиной и Вадимом Курносовым разбираем, как перенести сайт с cPanel или Plesk на альтернативный вариант — отечественную панель ispmanager: от бэкапа до переключения DNS.

При запуске MVP считаем вначале не клики вообще, а деньги и время. Деньги потому, что до серьёзных вложений полезно быстро и по возможности бесплатно проверить, нужен ли проект рынку. Время потому, что его легко потратить не на сам MVP, а на подключение Яндекс.Метрики, Google Analytics, событий, воронок, отдельной базы и прочей обвязки. В итоге идея ещё не проверена, а вокруг неё уже начинает расти аналитическая система.

Рассмотрим простую схему с 1-2 быстрыми метрики, которые напрямую проверяют УТП или главный пользовательский сценарий. Пользователь нажал кнопку покупки. Начал создавать проект. Зарегистрировался. Перешёл в Telegram. Этого уже хватает, чтобы понять, работает ли сценарий и есть ли живой отклик.

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

Разберем именно такой вариант. Маленький Django-бэк один раз деплоится на простом хостинге, принимает события через пиксель, хранит их в SQLite и отдаёт статистику JSON-ответом. Дальше во всех новых фронтах меняются только названия event и src.

Особенно удобно это в тех случаях, когда фронт живёт на бесплатном или засыпающем хостинге. У free web services на Render сервис уходит в spin-down после 15 минут простоя, а файловая система там ephemeral, поэтому локальный SQLite для таких счётчиков работать не будет. В качестве простого примера отдельного маленького бэка можно использовать PythonAnywhere, где есть бесплатный аккаунт с одним web app. Но сама идея не привязана к этим площадкам и повторяется практически где угодно.

Меня зовут Богдан Непряхин, я CEO digital-агентства bijobs.ru. Мы занимаемся performance-маркетингом и аналитикой. Я выступаю на конференциях, рассказываю про Яндекс Директ, VK Ads, работу с данными. И вот в начале 2026 года поймал себя на том, что мне неловко давать ссылку на «страницу спикера». Потому что её не было.

Организаторы мероприятий пишут «скиньте страничку», а скидывать нечего. Строчка на сайте агентства, без фото с конференций, без тем, без видео. Стыдновато, если честно.

Классический путь: дизайнер (15-40 тысяч, 1-2 недели) + верстальщик (15-30 тысяч, ещё неделя). Итого месяц и 30-100 тысяч за одностраничник. Для страницы, которую увидят десять организаторов. Я решил проверить, можно ли сделать это за выходные с Claude Code, нейросетевым ассистентом для работы с кодом.

Сайт запустили два месяца назад. Дизайн стильный, кнопки нажимаются, оплата проходит. Но органического трафика – ноль. SEO-специалист проводит аудит и выдаёт вердикт: «Нужно переписывать половину сайта. Каталог отрисовывается на клиенте через JavaScript – поисковый робот видит пустую страницу. URL-адреса выглядят как /page?id=37841. Структура заголовков отсутствует. Бюджет на разработку уже потрачен, и каждый час переделок стоит новых денег.

Знакомая ситуация? Она повторяется в половине проектах что приходят ко мне. Внедрение SEO на этапе разработки просто не запланировали. А ведь любой баг, пойманный на стадии проектирования, обходится в разы дешевле, чем тот же баг после релиза. Для SEO это правило работает точно так же: исправить структуру URL в проекте – 15 минут. Переделать маршрутизацию на продакшене – несколько спринтов и нервы всей команды.

Эта статья – мостик между SEO-специалистами и IT-командой. Вы узнаете, в какие именно точки жизненного цикла разработки ПО (SDLC – Software Development Life Cycle) встраиваются SEO-требования, и как разговаривать с разработчиками на одном языке.

JavaScript — редкий язык, который одновременно является «родным» для браузера и при этом давно вышел за пределы фронтенда: на нём пишут бэкенд, десктопные приложения, мобильные клиенты и даже игры. При этом вокруг JS всё ещё много путаницы — от «Java и JavaScript это одно и то же» до «фронтенд = кнопочки».

В этом интервью я, Александр Шулепов (телеграм-канал Shulepov Code), поговорил с Дмитрием Колотильщиковым — старшим разработчиком и автором канала «ИТ‑интроверт» — о том, как войти в профессию, почему Angular новичкам может навредить, зачем фронтендеру микрофронтенды, как устроены зарплаты и рынок за пределами России, и что на самом деле помогает дорасти до сеньора.

Продолжаем писать сервис DeadDrop: сегодня идём от монолита к чистой архитектуре

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

Сегодня мы:

1) Превращаем "толстый" хэндлер в хорошее архитектурное решение с разделением слоёв

2) Хэшируем с bcrypt

3) Внедряем зависимости (DI) через интерфейсы

4) Готовим код к дальнейшему масштабированию

Рефакторинг, который не ломает проект, а делает его удобным для дальнейшей разработки!

Когда говорят про создание сайтов с помощью ИИ, обычно звучат две крайности: либо магия уровня «нажал кнопку — получил готовый продукт», либо скепсис в духе «потом всё равно придется переписывать руками». А что, если проверить?

Привет! Меня зовут Кристина. Я работаю специалистом по автоматизации в Учебном центре IT-компании «Тензор». Недавно заказчик попросил меня сделать рабочий сайт максимально быстро. Четкого ТЗ и готового дизайна не было — только общее видение. Знакомая ситуация? На практике это происходит сплошь и рядом. Здесь как раз важно уметь работать в условиях неопределенности.

Так как старые решения не подходили, я решила пойти ва-банк и довериться искусственному интеллекту. Получится ли собрать рабочий сайт с помощью ИИ, если умеешь работать с кодом и задавать правильные вопросы?

Спойлер: получится. Но не совсем так, как многие представляют.

Привет!

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

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

📺 Разговор с Машей Кондрашиной из Авито о том, что в IT больше не спорят из-за технологий.

🤖 VS Code переходит на еженедельные релизы благодаря AI-агентам, Chrome объясняет разницу между MCP и WebMCP, а Эдди Османи вводит термин «comprehension debt».

⚛️ React получает shadcn/cli v4 с режимом для агентов, SvelteKit ловит FOWL, Astro v6 подтягивает данные из API прямо в content collections.

🌎 Chrome 146, Mozilla за анонимность в вебе.

🎨 Брэд Фрост о дизайне в эпоху AI.

📦 Эмпирическое исследование утечек памяти на 500 репозиториях.

...и многое другое.

Vibe coding — это одновременно и мем, и реальность 2025-2026 года. Кто-то называет это будущим разработки. Другие считают, что это способ генерировать технический долг со скоростью света.

Мы решили попробовать создать коммерческий проект с нуля полностью с помощью вайбкодинга. В результате: 46 000 строк кода, полтора месяца, два человека. Проект работает, клиент пользуется.

Вообще как бы нифига себе – написать рабочую CRM, которая автоматизирует обработку входящих запросов и может автоматически работать по сделкам: отвечать на письма, ставить задачи, проводить сделку по воронке.

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

Для измерения скорости сервисов в Яндексе используется метрика Velocity Index — это агрегация метрик Web Vitals (FCP, LCP, TBT, INP, CLS). Итоговое значение получается в диапазоне от 0 до 100 баллов. Хорошим результатом считается индекс больше 85.

Мы поставили себе амбициозную цель: увеличить Velocity Index до 85, а заодно подлечить очевидные «узкие места» в скорости и ускорить всё, до чего сможем дотянуться.

Но до заветных 85 баллов мы так и не добрались.

Многие верстальщики используют Flex на автомате просто потому, что привыкли к нему за долгие годы. Grid часто кажется чем-то избыточным или пугающим из-за своего специфического синтаксиса. На самом деле эти инструменты не заменяют друг друга, а решают принципиально разные задачи.

Разница между ними кроется в самом подходе к пространству. Flex создавался для работы в одном измерении, когда вам нужно выстроить элементы в строку или столбец. Grid же мыслит сразу в двух плоскостях, позволяя контролировать и ряды, и колонки одновременно.

В этой статье мы разберем конкретные ситуации, где один инструмент явно выигрывает у другого, чтобы вы перестали гадать и начали выбирать технологию осознанно. Для наглядности в наших примерах блоки Grid будут красными, а Flex — синие.

Под каждым примером есть полный код, который достаточно скопировать в файл и запустить.

Если бы активное отвлечение читателей веб-сайта было олимпийской дисциплиной, то первые места в ней всегда бы занимали новостные источники.

Я зашёл на сайт New York Times, чтобы просмотреть четыре заголовка, но меня встретили 422 сетевых запроса и 49 мегабайт данных. Для полной загрузки страницы понадобилось две минуты. И потом они удивляются, что все мало-мальски владеющие технологиями люди с головой на плечах ставят блокировщики рекламы на компьютеры своих знакомых и родственников.

Эта история повторяется у всех популярных новостных изданий.

Чтобы осознать феномен веб-страницы весом 49 мегабайт, давайте вернёмся в прошлое на несколько десятков лет. Объём этой страницы превышает размер Windows 95 (28 дискет). Операционная система, когда-то управлявшая всем миром, с запасом уместится в современной странице. В 2006 году на пике популярности были iPod и цифровая музыка. Стандартная композиция в MP3 с высоким качеством и битрейтом 192 кбит/с весила примерно 4-5 МБ. Одна страница сегодня эквивалентна 10-12 песням. По сути, чтобы прочитать несколько параграфов текста, я скачал целый альбом. Согласно сведениям International Telecommunication Union, среднемировая скорость Интернета в те времена была примерно равна 1,5 Мбит/с. Пока браузер загружал бы этого бегемота, пользователь вполне бы мог успеть заварить себе чашечку кофе.

За последние двадцать лет оборудование совершило большой шаг вперёд; неужели современный стек фреймворков/рекламных технологий полностью обнулил этот прогресс «благодаря» абстрагированию и плохой архитектуре?

Недавно, когда писал статью про «Тетрис», я поймал себя на мысли, что вспоминаю не только падающие блоки, но и другой культовый проект — жёлтый кругляш, вечно убегающий от призраков. А потом в памяти всплыл фильм «Пиксели» (2015). Там есть сцена, которая одновременно смешная — жутковатая: создатель Пакмана, Тору Иватани, выходит к гигантскому Пакмену и пытается с ним поговорить по-отечески: 

«Пакман, я сделал тебя. Ты такой голодный, я знаю. Не надо больше есть. Хороший мальчик» — актёр Денис Акияма (Тору Иватани).

И вот я подумал: а почему бы не попробовать самому создать Пакмена? Не такого кровожадного, конечно, а просто для души. Тем более что с «Тетрисом» получилось удачно, захотелось закрепить успех.

Всем привет! Меня зовут Саша. Я тимлид команды разработки личного кабинета пользователя в Банки.ру.

В какой-то момент я понял, что мы тратим слишком много времени на однотипные изменения в коде: обновления зависимостей, правки после breaking changes, синхронизация между проектами. Всё это делается через поиск, регулярки и ручное редактирование и быстро начинает масштабироваться в боль.

В статье разобрал, как можно подойти к этому иначе: использовать codemod и jscodeshift, чтобы автоматизировать такие изменения и применять их сразу ко всей кодовой базе. Как это работает через AST, и посмотрим на примере, как писать свои трансформации.

У каждого сервиса в Иви есть свои хранители. У веба — команда «Гамбит», которая делает так, чтобы сайт оставался тем самым местом, с которого начинается путь зрителя в мир контента. Они не просто пишут код, а выстраивают целую экосистему, где скорость, стабильность и забота о пользователе переплетаются с экспериментами, AI-инструментами и собственным мерчем. В этой статье Дмитрий Абраменко, технический менеджер платформы веб, приоткроет завесу тайн своего направления и расскажет больше о команде.

В прошлой статье мы сделали первое пробное фронтенд-приложение.

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

Для проекта используем специально подготовленный для работы с AI-агентами шаблон AI-стартера, где уже заложены подробные инструкции для работы с ИИ.

В статье — описание всех изменений, возможных проблем во время работы и их решения. И ссылка на репозиторий с проектом, конечно.

В 2025 году JavaScript исполнилось 30 лет — хороший повод попытаться объять необъятное разобраться, как он меняется и в каком направлении развивается. За три десятилетия язык переживал периоды скепсиса и бурного роста, обрастал экосистемой и стандартами, и в итоге вышел далеко за пределы браузера, охватив серверную и кросс‑платформенную разработку.

Всем привет! Меня зовут Владимир, я разработчик СберБанк Онлайн в канале «веб», и в этой статье я хотел бы затронуть этапы эволюции JavaScript, зафиксировать нововведения спецификации ECMAScript 2025, разобрать наиболее значимые предложения для будущих версий стандарта и попытаться понять его место в эпоху стремительного развития ИИ.

Случайно увидел результат работы функции RegExp.escape() и был удивлен, потому что она заэкранировала пробелы, все спецсимволы, а также цифры и латинские буквы в начале строки. До появления RegExp.escape() (а она стала доступна в популярных браузерах лишь в 2025 году) я, как и многие другие, писал аналогичную функцию сам, но без экранировки вышеперечисленных символов. Получается, что я ошибался, и нужно бросать все дела, рыться в старых исходниках и переписывать функцию? И да, и нет.

Очередной релиз фреймворка с акцентом на нативные AI-воркфлоу, дефолтная безопасность и более выразительные API. Основные нововведения: встроенные AI-инструменты, JSON:API ресурсы, семантический/векторный поиск, улучшения очередей и кэша. Обновление через AI.