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

Текст написан по мотивам интервью с Дмитрием Бусовым, CEO проекта LeaderChat.

Разбираю историю LeaderChat — сервиса, который начинался как обычный онлайн-чат с живыми операторами, а после появления современных LLM-моделей полностью изменил подход к работе. Спойлер: главным изменением стало даже не внедрение ИИ, а полный пересмотр того, как вообще должна работать автоматизация общения с клиентами.

На первый взгляд, Social Login — одна из самых простых функций современного веб-приложения.

Добавить кнопку «Войти через VK». Добавить кнопку «Войти через Яндекс». OAuth 2.0 давно стандартизирован, OpenID Connect тоже. Документации и библиотек полно. Да и AI сегодня умеет писать интеграции быстрее человека. Поэтому, когда я решил добавить VK ID и Яндекс ID в Авторизу, честно рассчитывал уложиться в один рабочий день:

Свою систему знаю. OIDC знаю. Подобные интеграции раньше проектировал. Под рукой ChatGPT, Claude и AI-агенты.

Что вообще может пойти не так?

Спойлер: получилось почти три дня. И самой сложной частью оказался не OAuth.

День первый. Самоуверенность

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

До общих досок бот уже умел личные заметки и задачи. Пользователь заходит, пишет заметку, ставит задачу с чекбоксом — всё как в обычном блокноте, только внутри Telegram.

OWASP, лаборатории, CVE, инструменты и патчи обычно живут в разных местах. Каждый раз собирать этот маршрут заново утомительно, поэтому и сделал RØØT — автономный полигон, который связывает всё в один процесс:

понять → проверить → доказать → исправить → перепроверить

Вместо запросов, которые вызываются из JavaScript, <usermedia> предлагает декларативный подход, при котором действие инициирует сам пользователь. Это позволяет сократить объём шаблонного кода, повысить безопасность и упростить повторный запрос доступа для пользователей, которые ранее его запретили. Тем самым элемент решает давнюю проблему, связанную с восстановлением отклонённых разрешений.

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

На своём компьютере всё летает. С зарубежного сервера проверяю, тоже без проблем. Сижу, чешу затылок.

Сначала списал на случайные глюки у провайдеров. Мало ли, бывает. Но обращений становилось больше, а не меньше, и в какой-то момент стало ясно: это не совпадение, это системная штука. Пришлось лезть в сетевой дебаг с головой.

В этой статье расскажу, как искал причину таймаутов, где я сам сначала неправильно объяснил себе проблему, и что в итоге поменял в инфраструктуре, чтобы всё заработало стабильно.

localStorage существует только в браузере. App Router может подготовить HTML на сервере и для Client Component. Код с директивой use client получает состояние, эффекты и обработчики событий, но первый рендер всё ещё может пройти без window и localStorage. И возникают два сбоя. Прямое чтение localStorage падает на сервере. Проверка через typeof window возвращает разные данные на сервере и в браузере. Сервер строит пустое избранное, браузер видит сохранённые id, React получает разные деревья при hydration.

JS — однопоточный язык, но асинхронный код нередко описывают как «выполняющийся параллельно» — и это не совсем так. В статье разберёмся, что на самом деле происходит, когда вы вызываете fetch или setTimeout, и почему настоящая многопоточность в браузере — это отдельная история про Web Workers, а не про промисы.

Я фрилансер, и я ненавижу мониторить биржи. FL, Kwork, Freelance, куча Telegram‑каналов — каждое утро одна и та же рутина. Открываешь вкладку, обновляешь, листаешь, понимаешь что всё мимо, переходишь на следующую. Короче, бесконечная петля.

Подсчитал как‑то — два‑три часа в день уходит не на работу. На обновление страниц.

Решил автоматизировать. Написал агрегатор, который собирает заказы с четырёх площадок в единую ленту с фильтрами, присылает уведомления в Telegram и пересылает ответы заказчиков из бирж прямо в чат. Под капотом Python 3.13, FastAPI, Vue 3, PostgreSQL. Всё крутится в одном asyncio event loop.

Разбираю, как мы два года пытались построить классическое приложение для знакомств, слили на это все деньги — а потом перестали конкурировать с Tinder и Badoo напрямую, урезали проект до одной узкой, но сильной идеи. Итог: больше 1000 активных пользователей каждый день, 7000+ в месяц — и мультиплатформенный продукт (iOS, Android, веб, Telegram).

Спойлер: секрет был не в том, чтобы сделать дейтинг лучше. Секрет был в том, чтобы перестать делать дейтинг "для всех".

Недавно на сайте одного из клиентов мы с командой по всем правилам поставили speakable — разметку, которая подсказывает голосовому ассистенту, какие куски страницы читать вслух: короткий ответ в начале, три ответа из FAQ, всё в валидном коде, а селекторы точно на нужных блоках. Алиса зачитывала ответ ноль раз. Причина оказалась глубже разметки: страница висела на 14-м месте обычной выдачи Яндекса. Ниже разбираю, как размечать под голос правильно, на что это реально влияет и на каких граблях я терял время.

Что лучше: ультрамногофункциональный швейцарский нож или скальпель?

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

Истории Calendly и Loom показывают совершенно другой путь.

Создаём одно приложение для портала Битрикс24 двумя способами: через внешний ИИ и через платформу вайб-кодинга Битрикс24 Вайбкод. 

На этом эксперименте покажем, почему платформа быстрее понимает CRM и требует меньше ручной настройки.

Хабр, привет.

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

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

Давайте посмотрим, что я вам подготовил.

Добавить на страницу новые функции, не трогая саму страницу, звучит как противоречие. Но альтернативу мы посчитали командой: полное переписывание заняло бы год, в течение которого страница не получила бы ни одной новой функции. Мост между старым кодом и новым занял два месяца, и строил его уже я один. Расскажу, как этот мост устроен, почему получился несимметричным, где чуть не зациклился и что в нём так и осталось кривым.

Привет! Меня зовут Андрей Нелюбин, я руководитель функции фронтенд-разработки.
В рамках проекта для заказчика требовалось доработать сценарий работы колл-центра: связать телефонию на Asterisk с операторским интерфейсом, где рядом со звонком доступны данные клиента, заказы, статусы и действия управления.

Для этого в 2022 году была реализована собственная прослойка поверх Asterisk: backend на Python/Django, обработка событий через Django Channels, WebSocket для передачи изменений в интерфейс и frontend на Vue. В статье расскажу, как устроили архитектуру решения, как обрабатывали события звонков, зачем понадобился BFF-слой на Django и почему в рабочей конфигурации аудио осталось в SIP-клиенте, а контекст и управление — в операторском интерфейсе

Думаю все, кто начинал использовать claude code, рано или поздно ощущали на себе его недостатки. Не удобно навигироваться по чекпоинтам, не удобно смотреть, какие были внесены изменения, не удобно использовать через CLI. А что если решение есть? Я начал об этом задумываться после того, как настроил свой openclaw, он же используем мою обычную подписку на Claude, почему я не могу использовать ее сам. Тут у многих возникнет вопрос касательно безопасности, кто-то слышал что антропики против подобного использования подписки, но я исхожу из фактов. Я не слышу, чтобы всех повсеместно начали банить за это. Да и в целом если так задуматься, когда мы подключаем наш аккаунт Claude через OAuth к Claude Code, наша цель - написание кода. Так в чем проблема, если мы немного обхитрим систему и внедрим все прямо в Cursor IDE.

Я долго искал нормальное решение и уже думал сам вайбкодить что-то, но в итоге наткнулся на прекрасный инструмент 9Router. Разработчик не я, так что сразу скажу, что ответственности за его использование и в целом всю описанную схему, я на себя не беру. Я просто обозреваю возможность.

Так вот, что такое в целом 9Router. Это некий хаб, куда можно подключить десятками провайдеров нейросетей и использовать все через нужный тебе endpoint.

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

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

Привет, Хабр! В этом материале делимся подробным гайдом, как собрать голосового робота и автоматизировать первую линию диспетчерской с помощью сервиса API МТС Exolve. Так срочные звонки будут мгновенно попадать на линию, а несрочные — в очередь для обработки в рабочие часы. 

Наш OAuth-сервер не хранит профиль пользователя и практически ничего о нём не знает. Он знает только IdP-личность («вы вошли через Google под таким-то аккаунтом»), а внутренний id, роль и имя живут в продуктовом бэкенде. Сшивают их два кастомных гранта: первый вкладывает в токен подписанный профиль, не зная его содержимого, а второй разменивает основной токен на веер узких производных, по одному на аудиторию. Кроме того, в статье объясняется, почему FedCM может создавать больше проблем, чем решать, и как эти проблемы обходятся с помощью Service Worker. Если вам интересно, как всё это работает в SaaS, прошу под кат.

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

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

Много воды с тех пор утекло, как и много нового добавилось в понятие «отпечаток устройства». Ну а где, как не в блоге антидетект‑браузера, разобрать, что такое фингерпринт, почему он важен для цифровой гигиены и куда движется антифрод в вопросах отслеживания нас с вами в сети? Давайте разбираться!