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

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

Я часто вам рассказываю, как HTML и CSS помогают улучшить пользовательский опыт в наших веб-интерфейсах. Мне это наскучило. Сегодня я хочу поговорить с вами о практиках, которые заставляют пользователей очень сильно ругать разработчиков.

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

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

Привет! Меня зовут Александр Каненков, я backend-разработчик в компании Домклик.

После перевода сервиса со второго Spring Boot на третий (а у кого-то уже и на четвёртый) мы с командой заметили следующую картину: HTTP-запрос журналируется с traceId, цепочка собирается в трейсе, но стоит сработать задаче Quartz — в журналах worker-потока гордо красуется [NoTrace, NoSpan]. Задача исполняется «в никуда» — без единого идентификатора, вне какого-либо трейса, и связать её с запросом, который её запланировал, невозможно.

Давайте разберём по шагам, почему это случилось и как починить так, чтобы работало и с RAM (in-memory), и с JDBC job store.

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

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

Главное: согласие - лишь одно из оснований обработки, причём самое хрупкое, потому что человек может отозвать его в любой момент. Если ваш процесс держится только на согласии, он держится на честном слове клиента.

Каталог всех оснований мы уже разбирали в отдельной статье. А теперь о другом: почему бизнес собирает согласия там, где они не нужны, и во что ему это обходится.

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

В итоге простая идея превратилась в React‑проект с анимированными руками, анализом слабых клавиш и персональными тренировками. Расскажу, как устроил логику, почему больше всего времени заняли руки и что показало тестирование на главном пользователе.

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

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

10 браузерных API, заменяющих пакеты NPM и плагины jQuery: dialog, popover, переходы отображения (view transitions), structuredClone, groupBy и Temporal с заметками о поддержке.

Мы делаем пет‑проект «Чатограмма», который считает статистику переписки: кто пишет первым, кто быстрее отвечает, в какие часы вы на связи. С первого дня у него одно жёсткое правило: файл с перепиской не уходит на сервер. Всё считается в браузере пользователя, а сервер не видит ни одного сообщения — не потому, что обещает не смотреть, а потому, что сообщения до него физически не доходят.

Потом понадобилась подарочная книга: PDF формата A5, где самые яркие моменты переписки собраны по главам — с чего всё началось, первое «мы с тобой», лучшие моменты каждого года, общий словарь, квиз «Кто это написал?». Плюс вариант для печати дома брошюрой: A4, сложить пополам, скрепить степлером.

И здесь правило «ничего на сервер» перестаёт быть бесплатным. Книгу обычно верстают на сервере: headless Chrome, LaTeX, что угодно с нормальными шрифтами и без ограничений по памяти. У нас всё это должно работать на телефоне, в том числе на iPhone, в том числе во встроенном браузере мессенджера. Ниже — как это устроено и на какие грабли мы наступили.

Я сделал бесплатную проверку сайтов на нарушения 152-ФЗ: вводишь адрес, получаешь список проблем. Первая версия умела ещё кое-что, чего я в неё не закладывал. Подставляешь чужой хост и порт, и по тексту ошибки видно, открыт порт или закрыт. Бесплатный сканер портов для всего интернета, причём запросы идут с адресов Cloudflare.

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

Про свой тренажёр английского Yet Another English я уже писала. Там можно собирать слова, заниматься, повторять забытое. Но мне захотелось ещё геймифицировать это все. Чтобы начинаешь с яйца, учишь слова, получаешь плюшки и постепенно выращиваешь себе персонажа. Ну то есть тамагочи, только кормить его надо своими занятиями.

Начала с Claude Opus 5.0, подключённого к Blender через MCP, потом продолжила через GPT. Ушла примерно неделя по два часа в день, то есть около 14 часов и 100 баксов за Астру.

Покажу, с чего начинала, какие версии пришлось переделать и сколько всё это весит. Если тоже хотите добавить 3D-персонажа в свой проект, возможно, сэкономлю вам пару переделок.

DISCLAIMER: Это неофициальный форк. Но, по моим сведениям, и в официальный pony эти фичи скоро подъедут в каком‑то виде.

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

В pony добавилось:
— поддержка асинхронности
— поддержка миграций
— разные улучшения из серии quality‑of‑life

Так что, фреймворк pony теперь чрезвычайно важен и сердит — что можно понять по этой картинке. Всё — благодаря DeepSeek 4.1 Flash и Kimi K3 (последняя — умная, но дорогая — она делала ревью).

SAML больше двадцати лет обеспечивает единый вход (SSO) в корпоративной и академической среде. Но протокол прогибается под тяжестью собственной сложности, и ему пора на пенсию. Разбираемся, как SAML появился, почему его раз за разом ломают исследователи безопасности и почему на смену ему должен прийти OpenID Connect (OIDC).

Всем привет! Меня зовут Денис, я фронтенд-разработчик в ISPsystem. В этой статье расскажу, как мы разработали и встроили модуль ИИ-ассистента в BILLmanager.

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

Всем привет! Меня зовут Павел Барсуков, я frontend-разработчик в компании «Программный Продукт».

Основной мой стек – Vue, Nuxt и все рядом лежащее. Angular до недавнего времени я видел в основном в курсах на Youtube, пару раз на фрилансе, где особо с ним не взаимодействовал, и в мемах про исключительность Angular разработчиков и очень частые обновления версий. И тем не менее, мне была поставлена задача мигрировать проект со старой версии на более новую, и я взялся за это.

Обычно задача «создать базу знаний из сайта» звучит просто: взять HTML, извлечь текст, разбить его на фрагменты, построить embeddings и отправить всё в RAG.

На современных сайтах этот подход всё чаще перестаёт работать.

Главная причина — сайт может практически не содержать данных в исходном HTML. Пользователь открывает страницу, браузер загружает JavaScript, JavaScript обращается к API, а уже API возвращает услуги, товары, объекты, статьи, цены и другие данные.

Именно с такой проблемой мы столкнулись при разработке новой возможности в LLMCOD.

Теперь система умеет работать не только с обычными страницами, но и с SPA-сайтами и доступными открытыми API.

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

Я держал проект на Next.js на Vercel почти три месяца и уехал на обычный VPS за 990 рублей в месяц. Главное, чего боялся: потерять то, за что Vercel любят. Сборка, которая не трогает живой сайт. Переключение без простоя. Откат одной кнопкой. Под катом схема, которая всё это повторяет на одном сервере без Kubernetes, Docker и прочей тяжёлой артиллерии, и список граблей, на каждую из которых я наступил.

Мне давно нравится идея хранить заметки обычными Markdown-файлами в своём репозитории на GitHub. Файлы остаются твоими, их можно открыть на github.com или в любом редакторе, а история изменений достаётся даром: это просто коммиты.

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

Я переписал его так, чтобы сервер был не нужен вовсе. Получился Notewing: браузер сам ходит в GitHub API, изменения копятся офлайн и отправляются одним коммитом, а конфликтующие правки не теряются. В статье расскажу, как устроена синхронизация через Git Data API, где были подводные камни и как всё это тестировать, не трогая настоящий GitHub.

В этой статье будет разбираться написание GitHub Actions пайплайна на основе моего стенда cicd-practice на GitHub (подробно все можно посмотреть там). Стенд состоит из FastAPI (веб API на Python) и PostgreSQL. Все сервисы разворачиваются в Docker с помощью Docker Compose (микросервисы) на VDS от Timeweb Cloud.

Для части приложения я также написал около 90 Pytest тестов, которые будут воспроизводиться в пайплайне, но об этом позже.

Backend-часть также будет разбираться, но менее подробно, для общего понимания работы.

Есть Vue DevTools с галкой «Highlight updates». Есть react-scan в соседней экосистеме. Оба показывают одно и то же: вот этот компонент перерисовался.

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

В React иначе и нельзя: реактивность там на уровне «перерисовался компонент», причину приходится реконструировать диффом пропсов. А во Vue реактивность точечная — фреймворк знает, какая именно зависимость дёрнула рендер.

И он её отдаёт.

На сайтах со встроенными Яндекс Картами стала появляться реклама.

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

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

Отключить её можно. Но уже за деньги. Вот такая вот фигня, собачка…

Я решила разобраться, что изменилось у Яндекса и есть ли сейчас нормальная альтернатива. И здесь неожиданно интересным оказался Конструктор карт 2ГИС.

Представим обычный интернет-магазин. Пользователь открывает каталог, вводит «наушники» в поиск, включает фильтр наличия, задаёт цену до 10 000 рублей, открывает карточку и добавляет товар в корзину. Шесть вполне понятных действий. Если их выполняет человек, всё хорошо. Если за дело берётся AI-агент, начинается небольшой квест: прочитать страницу, найти поле, угадать назначение переключателя, нажать кнопку, проверить результат и не купить случайно кофеварку вместо наушников.

А что, если сайт сам скажет агенту: «Я умею искать товары, показывать карточку и добавлять позицию в корзину. Вот названия функций, вот параметры, вот ограничения»? Эту задачу решает WebMCP — экспериментальный браузерный API, который позволяет странице объявлять инструменты для AI-агентов прямо из JavaScript или HTML-формы. Черновик и обсуждение стандарта открыты в репозитории Web Machine Learning Community Group.

Меня зовут Денис Смирнов, я ведущий .NET-разработчик, в профессии больше пяти лет. Это не пересказ новости. Соберу небольшой магазин электроники на React, добавлю три инструмента, прогоню проверки и покажу четверо граблей, на которые наступил. Грабли оказались интереснее рабочего примера.