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

Привет, меня зовут Александр Богданов, я ведущий фронтенд-разработчик стрима «Программы лояльности» в MWS. Наша команда отвечает за развитие и поддержку продуктов МТС Premium и МТС Cashback. 

На 2025 год у нас было три активных пользовательских витрины, которые использовали разный стек, разные дизайн-системы, по-разному взаимодействовали с бэкенд-сервисами и имели еще целый набор мелких отличий. Из-за этого разработке приходилось поддерживать зоопарк решений и технологий, а также многократно повторять одни и те же действия на разных стеках. Высокие time-to-market и стоимость разработки одной фичи закономерно не устраивали бизнес, поэтому перед нами поставили задачу — перейти на архитектуру микрофронтендов.

В посте расскажу, как мы это сделали с помощью npm-пакетов и какие результаты получили.

Всем привет! Меня зовут Владимир Назаров, основатель агентства Head Promo. В последнее время, ввиду того, что мы активно развиваем направления GEO и контент-маркетинга стали появляться вопросы от клиентов: где размещать блог — внутри основного сайта или на отдельном поддомене? Делать site.ru/blog/ или blog.site.ru. На первый взгляд это техническая мелочь. На практике — архитектурное решение, которое влияет на GEO, SEO, индексацию, внутреннюю перелинковку, аналитику, скорость работы редакции, риски для основного домена и даже на то, насколько хорошо бренд будет считываться поисковыми системами и нейросетями.

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

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

Ниже — подробный разбор с учетом Google, Яндекса, SEO, GEO/AEO и реальных российских и международных кейсов.

Привет, Я Ваня Демидов, разработчик Selectel.

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

Подключить MFA к современному веб-приложению обычно несложно: достаточно подключить SAML или OIDC на стороне самого приложения и включить второй фактор на Identity Provider. Проблемы начинаются там, где сервис не умеет ни в SAML, ни в OIDC, а переписывать его рискованно, дорого или попросту некому.

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

В этой статье системный инженер Артур Газеев и я, Аскар Добряков, ведущий эксперт направления защиты данных и приложений в К2 Кибербезопасность разбираем, как вынести MFA на периметр для legacy-системы, которую нельзя быстро переписать. Покажем архитектуру решения, объясним, почему выбрали связку Nginx + OAuth2 Proxy + Indeed AM, и разберем, на каких настройках поднимали и отлаживали эту схему.

Я юрист. Я не должен был знать слово adjustResize. Сейчас оно мне снится. Это история про три недели борьбы с Android-клавиатурой в WebView, про MutationObserver, который я призвал и пожалел, и про то, как настоящее решение оказалось не там, где я искал. Если у вас в приложении WebView и формы с инпутами — возможно, я сэкономлю вам неделю.

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

Мне кажется, что сегодня начинающие фронтендеры уже не пишут код сами. Они отдают всё на откуп искусственному интеллекту. Хорошо это или плохо — судить не буду.

Я хочу помочь вам найти плохие решения в вёрстке, которые ChatGPT вам предлагает. Для этого я собрал наиболее популярные примеры, которые очень просто исправить. Я вам всё покажу.

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

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

⭐️ Каждый месяц мы собираем топ open source проектов СНГ по приросту звёзд!

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

Если вы тоже развиваете Open Source проект, возможно следующий топ будет уже с вашим репозиторием :)

Команда Socket Threat Research обнаружила компрометацию 84 npm-пакетов в пространстве @tanstack: в них внедрили вредоносный имплант Mini Shai-Hulud, нацеленный на кражу учётных данных и секретов из CI/CD-сред, включая GitHub Actions.

Атака особенно опасна тем, что вредонос автоматически запускается при установке зависимостей через lifecycle-хуки npm, а среди затронутых пакетов есть крайне популярные — например, @tanstack/react-router с более чем 12 млн загрузок в неделю, что делает инцидент серьёзной угрозой для безопасности цепочки поставок ПО.

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

gRPC кажется простым только до первого реального проекта. В этой статье - практические решения для типичных подводных камней: nullable, decimal, DateTime, наследование, дженерики и enum. Всё на основе реального опыта переноса сотни моделей с REST и WCF на gRPC. Обновлено под protoc v34.1 и dotnet 10.

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

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

Поэтому давайте поставим себе задачу чуть более сомнительную, чем следовало бы: воспроизвести Bad Apple в браузере без JavaScript вообще, опираясь почти целиком на CSS и немного на серверную магию.

Ну и чтобы окончательно не сбивать градус абсурда, бекенд мы тоже не будем писать на чем-то скучно-прагматичном. Если заниматься таким делом, то с достоинством: C++26 и Boost.Beast.

Результат посмотреть можно тут и на GitHub.

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

Часть моделей числится бесплатными, но отвечает нестабильно. Часть внезапно исчезает из выдачи провайдера. Часть формально жива, но по качеству ответа годится только для демо. Иногда пользователь выбрал одну модель, а провайдер вернул ошибку. Иногда ответ пришел, но уже от другой модели. Иногда список моделей на фронте устарел, а backend уже живет в другой реальности.

То есть проблема тут не в том, как красиво показать список LLM. Проблема в том, как построить агрегатор, который умеет выбирать живые free-модели, переживать сбои провайдера и не врать интерфейсу о том, какая модель реально ответила.

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

Реактивность может значительно упростить реализацию надёжных программ. Давайте рассмотрим, что нам нужно для её реализации и какие парадигмы реактивного программирования бывают…

Разработчики сайтов, веб-мастера, рассматривая Joomla как CMS, чаще всего используют компоненты ядра такими, какие они есть. Но компоненты ядра, обеспечивающие CRUD-ы в Joomla, следует рассматривать ещё и как примеры использования Joomla в качестве фреймворка. Иногда реалии проекта таковы, что требуется внести изменения именно в логику классов ядра Joomla. Я покажу это на нескольких примерах: как исхитрялись раньше и какие возможности появились в современных версиях Joomla.

Сразу оговорюсь: речь не о том, чтобы править файлы ядра. Это плохая идея почти всегда. При обновлении Joomla такие изменения будут потеряны, а сопровождать их потом придётся вручную. Речь о другом: как изменить точку создания MVC-классов компонента через плагин и DI-контейнер, не залезая в core-файлы.

Ну и приятный бонус - Joomla-археология и немного красивого и ужасного треша из практики 😎

Telegram теперь полноценный OpenID-провайдер: oauth.telegram.org, JWKS, JWT, claims. Туториалы на GitHub при этом массово показывают старый виджет с HMAC от bot-token и /setdomain в BotFather. Я разобрался с новым флоу и собрал PoC на Python — рассказываю, как устроен обмен между фронтом, Telegram и бэком, чем Login library через telegram-login.js отличается от manual OIDC code flow с PKCE, что настраивать в BotFather (спойлер: не в чате, а в его mini-app), как протестировать локально через ngrok, и какая проверка id_token нужна вместо ручного HMAC.

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

Cloudflare заблокировали, DDoS-Guard стоит как крыло от самолёта, а .htaccess с тысячами IP начинает тормозить сайт. Рассказываю, как сделал собственный WordPress-плагин для геоблокировки спама – с белым и чёрным списком IP, фильтрацией по User-Agent, защитой комментариев и кэшированием через Redis. Без капчи, без абонентской платы в 10к в месяц и без лишних функций ради оправдания цены.

Мы живём в эпоху когда можно написать в чат «сделай мне CRUD» и получить рабочий код через десять секунд что в принципе удобно. И это, если честно, главная причина почему я периодически намеренно лезу в что-то сложное руками — чтобы не разучиться думать о том что происходит внутри.

ИИ я использую. Но в этом проекте он был исключительно быстрой документацией — особенно когда добрался до selection/range API, про которые до этого знал чуть меньше чем ничего. Реализация все равно была за мной.

Так вот — ReadGen. Блочный конструктор README-файлов. Месяц, 2-3 часа в день, React и TypeScript и небольшая пачка дополнительных библиотек для разумного облегчения жизни. Важно понимать что это не коммерческий продукт и не претендует на решение чьей-то боли. Просто техническая задача которую я давно хотел разобрать.

Прототип сайта на Тильде нельзя рассматривать только как черновик будущего дизайна.

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

Медиа-запросы (media queries) - это основа отзывчивого дизайна. Мы используем их для определения того, как должен меняться дизайн на основе размеров области просмотра (viewport). Но синтаксис min-width и max-width может вызывать путаницу, и в некоторых случаях вызывает проблемы макета (layout), которые трудно выявить.

Цель этой статьи - убедить вас использовать запросы диапазонов (range queries), начиная с сегодняшнего дня.

Облачные сервисы хороши, пока у вас есть стабильный интернет. Но стоит уйти в авиарежим, сесть в поезд с «едва живым» хотькаким-G или оказаться в метро без сети — и привычный таск‑менеджер, календарь, карты и почта внезапно перестают быть рабочим инструментом, превращаясь в пассивный просмотр старых данных.

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

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