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

API URLPattern официально стал базовой возможностью и доступен во всех основных браузерах с сентября 2025 года. Однако он может не работать на старых устройствах или в старых браузерах. Узнать больше.

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

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

Изначально решение виделось простым — настроить Nginx и прописать правила маршрутизации. Ключевые трудности скрывались в деталях: тонкой настройке редиректов, работе с access token и интеграции с бэкенд-сервисами, потребовавших значительного внимания.

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

Решил мигрировать с WebStorm на VS Code, но обнаружил, что нет поддержки автоимпорта Angular-компонентов. В WebStorm это работало из коробки — начинаешь писать <app-, IDE сразу подсказывает компоненты и автоматически добавляет импорт. В VS Code такого не было.

На первый взгляд задача выглядела несложной — пару регулярок накидать и можно сделать своё решение.

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

SmileFace — игра, в которой нейросеть угадывает эмоции

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

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

Делали ли вы электронную визу в Индию? А, может, в Южную Корею? Или подавались на лотерею Green Card в США? Если да, то вы точно знаете, что для заявки на все эти документы надо прикрепить фотографию определённого размера с целым набором требований...

А такое ну просто необходимо автоматизировать!

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

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

Подробности под катом!

Я уволился из своей первой работы SRE‑инженером после особенно тяжелой недели дежурства. Семь ночей подряд я просыпался от PagerDuty. Семь ночей подряд я чинил одну и ту же проблему с памятью, которую никто не хотел исправлять «по‑настоящему», потому что «горячий фикс же работает». На восьмое утро я пришел в офис и положил заявление на стол.

Это было пять лет назад. С тех пор я прошел через четыре компании, построил on‑call процессы с нуля в двух из них, и научился главному: дежурства не должны убивать людей. Физически и морально. Давайте поговорим о том, как построить on‑call ротацию, которая не приведет к массовым увольнениям.

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

Красивый и интуитивно понятный интерфейс — это моя личная страсть. Я тратил дни, чтобы докрутить свои проекты до нужного мне уровня. В итоге я начал систематически собирать приёмы HTML и CSS, которые мгновенно улучшают восприятие пользователя.

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

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

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

Понедельник, утро, открываешь проект, а авторизация на dev-стенде снова сломана. Или же надо поторопиться с релизом фичи, а бэк еще не готов, и разрабатывать нужно параллельно, и тут без моков не обойтись. Ну или классика: в командировке лежит интернет, и вся работа встала колом. Знакомо?

Что тут можно поделать? Можно подождать, пока починят стенд. Можно залезть в код и что-нибудь там нахардкодить, переполнив его ненужной логикой моков. Можно поставить Postman, Insomnia или другие популярные решения. Но у каждого подхода есть подводные камни: простои и сорванные дедлайны, забытые хардкоды в продакшене, необходимость согласований с инфобезом (особенно если вы работаете в банке) и зависимость от внешних серверов.

Мы попробовали существующие решения и поняли: ни одно из них не закрывает наши потребности полностью. Нужно было что-то свое: простое в установке, работающее офлайн, не требующее дополнительных приложений и аккаунтов. Что-то, что можно быстро настроить под себя и не зависеть от внешних решений вендора. Так появился наш велосипед — браузерное расширение Req-Saver. 

Да, представимся. Мы — Александр Битько и Дмитрий Панфилов, фронтенд-разработчики в ПСБ. Сегодня расскажем, как превратили мокирование запросов из головной боли в простую и понятную работу.

Работая над статьёй ИИ не изменит IT, я обратила внимание, что ключ ко многим проблемам нейросетей — это закон Гудхарта: «Когда мера становится целью, она перестаёт быть хорошей мерой». Закон этот настолько универсальный, что захотелось посвятить ему отдельную статью.

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

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

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

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

Статусы вошли в жизнь пользователей коммуникационных инструментов очень давно: вспомните легендарную «Аську» или Mail.ru Агента. Это действительно удобно – заранее видеть информацию, которую потенциальный собеседник хочет сообщить о себе. В корпоративной среде статус играет более утилитарную роль. При помощи статусов сотрудник транслирует свой уровень доступности, сообщая коллегам важную информацию о том, что он, например, «В отпуске», «На больничном», «На звонке» или «На встрече».

Мы запустили статусы в июне 2025 года, и это стало долгожданным событием для сотен тысяч наших пользователей. Не каждое нововведение настолько круто «заходит» в корпоративной среде. И конечно, за удобной и простой фичей стояла большая работа. О том, как это было, мы расспросили в команде разработки eXpress.

Что важно фронтенд-разработчику при создании веб-приложений? Поддержка текущей кодовой базы, удобство внедрения новых фич и возможность повторно использовать компоненты. Создать такие условия помогает популярный подход к проектированию — FSD (Feature Sliced Design). Разбиваем интерфейс на независимые, переиспользуемые модули (виджеты, фичи и т. д.), получаем чёткие правила, единую структуру проекта и ускорение разработки за счёт переиспользования кода и изоляции ответственности.

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

Меня зовут Иван Соснович, я тимлид фронтенд-разработки в СберТехе, тружусь в команде Platform V Kintsugi — это графический инструмент для сопровождения, мониторинга и диагностики Postgres-like СУБД. В этой статье я покажу, как мы доработали FSD под себя, и дам ссылку на пример со структурой приложения. Надеюсь, будет полезно фронтенд-разработчикам.

Вы когда-нибудь видели в консоли сообщение вроде: «Access to fetch at '…' from origin '…' has been blocked by CORS policy»? Это как в том фильме: «Суслика видишь? — А он есть». CORS не бросается в глаза, пока все работает, но в нужный момент пресекает недопустимые действия. Например, чтение ответа на кросс-запрос без разрешения сервера.

Меня зовут Баир, я разработчик в команде fuse8. В этой статье я отвечу на вопросы о том, зачем была создана CORS политика, как она устроена под капотом, почему простого действия типа «поставить заголовок на бэке» может быть мало, и какие безопасные паттерны стоит выбирать во фронтенде.

Полистав различные ресурсы в Интернете и просмотрев множество видео по данной теме, я решил составить наиболее полную картину по данному, не побоюсь этого слова, революционному API, чтобы вы уже сегодня могли начать использовать его в своём проекте!

После того как мы разобрались с парсингом Wildberries, логично двигаться дальше и освоить Ozon. Но здесь нас ждёт сюрприз. Ozon гораздо сложнее парсить из-за динамической загрузки контента и более строгих политик автоматизированного доступа.

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

Сегодня многие разработчики различного уровня знают n8n как гибкий инструмент для автоматизации. В нем можно собрать почти любой сценарий - от простейшего Telegram-бота до сложных бизнес-процессов, используя множество готовых нод (узлов) для работы с популярными сервисами.

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

Здесь напрашивается довольно простой ответ: написать свою ноду на n8n. Изначально это кажется сложным, однако, прочитав эту статью, вы сможете буквально за 1 вечер собрать минимально-рабочую ноду под ваши "хотелки".

Кейс новичка о «пробах» в роли бахгхантера на примере MAX + Bug bounty платформы Standoff365 

Статья о личном опыте и выявленных системных проблемах взаимодействия исследователя с вендором и арбитражем в российской bug bounty‑экосистеме: как игнорируются критические уязвимости в «национальном мессенджере» MAX, отчёты закрываются как «дубликаты» без доказательств с подменой понятий, искажением фактов (и даже манипуляциями по искусственному созданию "дубликатов"), а правила меняются постфактум..

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

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

Очень часто на собеседованиях кандидаты слышат вопрос: «В чем разница между HTTP и HTTPS?» И так же часто делают задумчивое лицо, не зная, что ответить. Мы даже как-то писали об этом пост.

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