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

Пару недель назад, когда я писал пост The Hidden Cost of URL Design, мне нужно было добавить подсветку синтаксиса SQL. Я направился на веб-сайт PrismJS, пытаясь вспомнить, можно ли добавить его в качестве плагина. Меня утомило количество вариантов на странице скачивания, поэтому я вернулся к своему коду. Поискав в файле PrismJS, я нашёл в его начале комментарий, содержащий URL:

/* https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+css-extras+markdown+scss+sql&plugins=line-highlight+line-numbers+autolinker */

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

Это стало одним из тех моментов, когда ты внезапно снова осознаёшь важность чего-то. Передо мной был URL, не просто указывающий на страницу: он хранил состояние и позволял полностью воссоздать все мои настройки. Не нужна никакая база данных, никакие куки, никакое localStorage. Достаточно одного URL.

Я задумался: как часто мы, фронтенд-разработчики, забываем об URL как об инструменте управления состоянием? Мы пытаемся использовать для этого всевозможные абстракции: глобальные хранилища, контексты, кэши, забывая при этом одну из самых древних и изящных фич веба: скромный URL.

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

На основе наблюдений я выделил 5 самых проблемных случая, когда JavaScript блокирует загрузку сайта. В статье вы узнаете, как с ними бороться.

Здравствуйте, товарищи! Сегодня у нас будет не техническая статья. Я расскажу об одном нестандартном кейсе из своей практики, суть которого отражена в заголовке.

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

Как обычно: все имена вымышлены, а совпадения случайны...

Решение на Битрикс24: как мы помогли С‑Маркетингу узнать реальный вклад каждого из 1300+ сотрудников

Цели в блокнотах, Excel и «в голове» превращают стратегию компании в пазл без картинки. Особенно, если речь идет о бизнесе, где больше тысячи сотрудников. Для С-Маркетинга мы собрали этот пазл в единое решение на Битрикс24: сделали постановку и оценку целей прозрачными, а премии и повышения — аргументированными.

Вы точно их видели — и не один раз. Баннеры с cookie за последние годы стали обычным делом. Разберём, что такое cookie-баннер, как он работает и почему часто мешает пользователю. Если вы маркетолог или управляете сайтом и не понимаете, зачем на нём нужен баннер с cookie — эта статья всё объяснит. Детали под катом.

Искал реализацию EAV (Entity-Attribute-Value) паттерна на PHP или Symfony и не нашел. Типичная задача, но, на удивление, нет таких библиотек. Решил сделать свою [EAV bundle](https://github.com/maxkain/eav-bundle). Есть достаточно подробная документация...

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 политика, как она устроена под капотом, почему простого действия типа «поставить заголовок на бэке» может быть мало, и какие безопасные паттерны стоит выбирать во фронтенде.