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

Вы смотрите в Lighthouse на 95 баллов, а пользователи пишут, что сайт тормозит. Знакомо? Пользователи сидят на старых смартфонах, слабом интернете, через прокси — поэтому лабораторные метрики не отражают реальную картину. По исследованиям даже +0,1 секунды загрузки сайта влияет на конверсию!

Сегодня я покажу, как своими руками сделать облегченный Real User Monitoring на Prometheus начиная со сбора метрик и заканчивая настройкой графиков — без Kafka, без ClickHouse, без хранения сырых событий.

Я хочу показать, почему распространённая фраза "не занимайтесь преждевременной оптимизацией" почти всегда используется неправильно, особенно в современных фронтенд-проектах. Я посмотрю на исторический контекст, разберу, что именно Кнут называл оптимизацией, и почему многие вещи, которые считаются "преждевременной оптимизацией", на деле — нормальная инженерная дисциплина.

Несколько раз в жизни мне случайно попадалась в руки гитара, и я начинал учить песни Стинга. Shape of my heart, Fragile — любимые с детства. Их я легко нашел на ютубе, подробные разборы, понятные для чайников — где какую страну зажимать и в каком порядке дергать.

А вот с Desert Rose возникли трудности — я не смог найти по ней внятный урок. Только примитивный набор аккордов типа Am, Dm, C. Но я нашел исполнение одной девушки, которое понравилось, и решил разобрать его. Сначала я просто смотрел на видео и повторял. Но дальше нескольких аккордов не получилось выучить — объем информации слишком большой. Я пытался в тетрадке делать записи, но тоже не осилил. Смотрел несколько приложений для составления табулатур и счел их крайне неудобными. Я пытался отказаться от записей и «вербализации», а двигаться на чувствах и интуиции — и тоже не смог

В итоге я сделал скриншоты всех перестановок руки (их получилось 75). И в редакторе изображений отметил перебор. Получилось такое:

Обработка ошибок в JavaScript всегда была немного хаотичной. Получить ошибку легко, но отследить ее первоисточник бывает очень сложно. Именно здесь и приходит на помощь свойство cause.

Давайте начистоту. Большинство Angular-приложений пишутся по инерции. Мы используем паттерны, которые выучили на заре второй версии, и продолжаем тащить их за собой, игнорируя всё, что фреймворк предложил за последние годы. 

Фреймворк постоянно обновляется и дополняется, и уследить за всеми лучшими практиками почти нереально. В итоге даже опытные разработчики продолжают делать ошибки, которые когда-то не считались ошибками. В небольшом проекте это не страшно, но в крупном такие просчеты накапливаются и превращают код в трудноподдерживаемый легаси. Проблема в том, что фреймворк меняется, а привычки остаются.

В этой статье мы не будем говорить о базовых синтаксических ошибках или разбирать, где вы точку с запятой забыли. Речь пойдёт о более глубоком уровне, об архитектурных просчётах и антипаттернах, которые тиражируются из проекта в проект. Многие из этих привычек были допустимы в прошлом, но с приходом новых версий, вроде Angular 20, от них пора избавляться.

Неважно, в какой сфере вы работаете: backend-разработчик, frontend, архитектор БД, системный аналитик, тестировщик или кто-то еще. А может, вы только ищете работу в IT? Или просто интересуетесь, как устроен цифровой мир. Эта статья - возможность освежить в памяти базовые концепции программирования, подготовиться к собеседованию (ведь вопрос про CRUD-операции может прозвучать не напрямую, но почти всегда скрыт в других задачах или кейсах) или просто понять, как устроены ваши любимые приложения.

Вопрос на миллион: Знаете ли вы, что общего между созданием поста в Нельзяграм, покупкой на Ozon и обновлением резюме на hh.ru?

Ответ прост: в их основе лежат четыре базовые операции, скрытые за аббревиатурой CRUD. И да, эти операции — первая ступень к пониманию того, как работают современные API.

У аббревиатуры BFF кроме Backend for Frontend есть и другая расшифровка — Best Friends Forever. И в контексте статьи это только отчасти шутка. Общение фронтенда и бэкенда не всегда происходит гладко (опустим тот факт, что существует множество мемов о противостоянии фронтендеров и бекендеров): клиент запрашивает данные, бэкенд отдаёт то, что запросили, но часто данных сильно больше, чем нужно, а это значит, что запрос будет возвращаться дольше, фронтенд будет отрисовываться тоже дольше и всё это отразится на опыте конечного пользователя.

А что если между фронтендом и бэкендом построить мостик, который распределит нагрузку и сделает всех дружелюбнее? Примерно в этом и состоит суть паттерна BBF, а в статье разберём подробнее: зачем его внедрять и какую роль он играет в масштабировании современных сервисов; как мы реализуем этот подход в рамках RUTUBE, какой профит он нам даёт; почему мы отказались от GraphQL; в чём отличия от API Gateway и как вообще проектировать такие сервисы.

Существует ряд ошибок, которые подрывают доверие к продукту. Одна из таких — потеря пользовательских данных. Мне пришлось столкнуться с этим лично, когда мой отзыв пропал при попытке публикации. В этой заметке — разбор UX-проблем и то, как мой фидбек привёл к конкретным изменениям в алгоритмах 2GIS.

Привет, Хабр! Про модели искусственного интеллекта сейчас не говорит только ленивый. Высказывается множество мнений и нередко они оказываются на противоположных полюсах: от полного скепсиса до убеждённости, что произошла новая научно-техническая революция. Жизненный опыт подсказывает, что истина где-то по-середине и инструмент будет полезным ровно настолько, насколько ты умеешь им пользоваться. В относительно недавнем интервью генеральный директор Microsoft Сатья Наделла заявил, что примерно 20-30 % кода в Microsoft уже сейчас генерируется ИИ и разработчикам надо будет адаптироваться. Мне тоже захотелось попробовать внедрить такого помощника в свои рабочие процессы и посмотреть, что из этого получится.

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

Статьи добавлять поудобнее, но тоже не идеально. На том же Вордпрессе можно просто скопировать статью из гуглдока — и все, она вместе улетит вместе со всеми скриншотами. На Тильде надо тыкать каждую картинку руками, это бесит.

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

Стало интересно, а может ли Claude Code сделать сайт на Вордпрессе. С этим вопросом я к нему и пришел.

Claude сказал, что конечно может, но Вордпресс это скучно, и лучше делать сайт на Next.js + headless CMS. Я на тот момент даже не знал, что это такое. Ну так, слышал что на Next.js сайты делают — и все. Решил, что будет интересно разобраться и попробовать.

Спойлер — у нас (у меня и Claude Code) все получилось, сайт работает, мне нравится, даже трафик из SEO не просел.

Я работаю старшим фронтенд-разработчиком в it-отделе одного из крупнейших федеральных застройщиков. Специфика разработки в такой непрофильной компании — сроки спускаемые сверху и вообще не имеющие корреляции с реальными ресурсами и возможностями команды. Именно поэтому мы работаем очень быстро, постоянно пытаясь получить (максимум результата)*3 за (минимум времени)/4.

В этих условиях мы делали большие интеграции с headless CMS Directus и непосредственно с бекендом, используя моковые данные на фронте.
Интеграции были большие и быстрые — и вот тут-то и стало видно, что большинство фронтенд-разработчиков не очень понимают, как подготовить интеграцию, чтобы потом было быстро и не больно заменять моки на реальные ответы. В этой статье пойдет речь о таких подходах на фронтенде,

Привет, Хабр. Я Саша, разработчик, пишу на JS. Ранее я рассказывал о callback-функциях, деструктуризации, операторах и многом другом. Если вы уже успели познакомиться с основами JavaScript, то наверняка вам знакомы такие понятия, как объекты и функции.

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

Речь пойдёт о нюансах использования Web Audio API и Web MIDI API для синтеза звука в браузере, методах датабендинга и сонификации, UX при использовании клавиатуры и мыши в музыкальных целях, а также почему браузер ungoogled-chromium лучше Google Chrome

Джаваскриптеры давно мечтают о безопасной изоляции кода, чтобы можно было выполнить сторонний скрипт или библиотеку в своём песочном замке, без риска повредить глобальные объекты или залезть друг другу в прототипы. Сейчас для этого есть костыли, либо создавать скрытый <iframe> (у которого свой глобальный контекст), либо городить сложные рентаймы. В Node.js есть модуль vm и контексты, но и они далеки от идеала. Но на горизонте замаячило штатное решение от TC39, ShadowRealm API. От названия веет чем-то мистическим, но по сути это просто способ создать новый глобальный JavaScript-контекст в рамках текущего потока, и исполнить в нём код изолированно от основного.

Каждый менеджер хотя бы раз ловил себя на мысли: «Если не я, то кто?» Это вроде бы простая фраза, но за ней скрывается куда больше, чем желание увидеть проект успешным. Она задаёт тон всей культуре управления: той, где руководитель становится «героем», который раз за разом вытаскивает команду из дедлайнов, конфликтов и хаоса. 

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

Недавно я провел эксперимент по развертыванию на своем ноутбуке небольшой экосистемы контейнеров с сервисами и инструментами для фронтенд-разработки. Что получилось в результате? Как я все собирал по кусочкам? С чем столкнулся? Обо всем поговорим в этой статье.

В последние годы спрос на 2D/3D-инструменты в веб-сервисах растет довольно стремительно, технологии развиваются, появляются новые подходы и библиотеки — а вместе с ними растёт и путаница: что где использовать, где грань между похожими решениями и почему у разработчиков часто возникают противоположные мнения?

Так что я решила устроить небольшой тест 2D-решений: посмотреть, на что они реально способны, понять, почему результаты местами вызывают большое удивление, и ответить себе (и вам) на вопрос: а WebGPU вообще зачем?

Спойлер: всё далеко не так очевидно, как кажется.

Обзор на браузерные API, которые стали Widely available в октябре 2025. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде.

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем. 2.5 года назад также каждый месяц выходили новые фичи в браузере, а вот их уже пора начинать применять.

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

В беседах с коллегами я всё чаще замечаю, что многие не в курсе последних фишек CSS. Конечно, у каждого свои причины. Кто-то погряз в повседневной рутине. Кому-то просто неинтересно, что там нового происходит в мире CSS. А кто-то годами сидит на десятилетних подходах и чувствует себя прекрасно.

Честно говоря, как давнему фанату CSS, мне становится немного грустно. Сколько классных возможностей проходит мимо них! А ведь их код мог бы быть короче, надёжнее и понятнее. Именно поэтому я собрал несколько примеров, которые были популярны раньше, и переписал их, используя современные возможности CSS.

Давайте посмотрим, что у меня получилось.

Camunda и n8n — две мощные платформы для автоматизации рабочих процессов, но они решают совершенно разные задачи.

Camunda 8 предназначена для сложных, долгоживущих процессов, которые требуют регламентации, участия человека и интеграции между системами. n8n же оптимизирован для быстрых low-code автоматизаций и задач, ориентированных на работу с API, которые выполняются за секунды или минуты.

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

Если вы выбираете между Camunda и n8n или хотите эффективно использовать оба инструмента — это руководство для вас.