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

Токены (tokens) API часто расцениваются как незначительные детали реализации.

Пользователь входит в систему, сервер создает токен, браузер сохраняет его и включает в каждый защищенный запрос (protected request). На верхнем уровне процесс выглядит просто.

Последствия для безопасности отнюдь не просты.

В этой статье рассматривается полный жизненный цикл токена API, от выпуска (issuance) до истечения срока действия (expiration) или принудительного отзыва (revocation).

Тестирование API часто сводится к одному: отправить запрос и убедиться, что сервер ответил 200. На собеседовании этого хватает на пару минут, а в проде именно здесь всплывает то, чего статус-код не ловит: чужой заказ в ответе, молчаливый 500 вместо ошибки валидации, товар, который не списался со склада.

Разберём 20 базовых проверок, которые отличают QA, тестирующего API, от того, кто просто дёргает ручки: успешный ответ, входные данные, ошибки, доступ и состояние системы — на одном сквозном сценарии, с примерами на curl и в Postman. Начинающий выстроит последовательность, опытный сверится и поймёт, куда расширять набор тестов.

Многие аналитические платформы сталкивается с одним и тем же вопросом: как связать компоненты, которые изначально не знают друг о друге? График живёт по одним правилам, карта — по вторым, таблица — по третьим. Каждый движок говорит на собственном языке событий и данных, и заставить их работать слаженно — нетривиальная архитектурная задача. В этой статье рассказываем, как мы её решаем в Modus.

Когда работаешь с такими масштабными продуктами, как мы делаем в VK, быстро начинаешь ценить код, который можно не писать. Особенно если речь о небольших сценариях: открыть поповер, анимировать появление блока или подстроить поле под контент. Ещё недавно для таких задач мы почти автоматически тянулись к JavaScript. Но за последние два года CSS сильно расширил свои возможности для задач, связанных с интерфейсом.

Я Максим Кузнецов, занимаюсь оптимизацией производительности и улучшением стабильности веб-версий ВКонтакте. В этой статье расскажу, что уже можно использовать как альтернативу JS, что стоит попробовать аккуратно, а за чем пока лучше просто следить.

Бывало у вас такое: дел в голове так много, что забывать их начинаешь как только вышел с очередной встречи? Через несколько дней надо принять решение, на основании того, что мелькало перед тобой 3 секунды. Через время ловишь себя на мысли «У нас 21 век, агенты, скилы, почему строить связи между встречами, записями и мыслями должен я?». У меня — бывало, и тут как раз об этом.

Привет! Меня зовут Дима, и я работаю руководителем команды web-разработки AI‑продуктов в R&D Яндекса. А ещё — я учусь в вузе на 4 курсе, люблю куда‑нибудь слетать, пытаюсь следить за здоровьем: и всё это, как я думаю, легко бустится агентами.

В Next.js изображения, metadata и production build находятся в разных частях проекта. next/image занимается загрузкой и геометрией изображений. Metadata API формирует <title>, description, Open Graph и Twitter metadata. next build собирает production-версию приложения. Ошибки в этих местах часто не мешают работе next dev. Страница открывается, локальная картинка показывается, title есть. На другом домене внешний Image получает запрещённый URL, Open Graph содержит localhost, production build падает на конфигурации или импорте. Разберём эти три части отдельно на примере проекта Goods Finder.

Тесты зелёные, линтер молчит, pull request одобрен. Можно выкатывать — главное, чтобы ничего не упало, но мы ведь 100 раз протестировали, изучили pull request, запустили линтер и уверены в качестве кода.

Но опасность поджидала там, где её совсем не ждали.

Недавно мне попалась статья, в которой автор разбирал JavaScript на чужом сайте — просто просматривал Source‑файлы, которые сайт отдаёт браузеру. Он обнаружил там API-ключи, хранящиеся прямо в JS. Меня поразило, насколько легко их можно найти. Если любой посетитель может открыть вкладку Source и изучить содержимое файлов, то что увидит он в файлах моего сайта?

О том, что я нашёл у себя, рассказывать не буду. Сегодня мы поговорим о том, что мало кто из разработчиков проверяет готовые чанки и исходники. А ведь именно там может скрываться много неожиданного. Вы уверены, что точно знаете, что содержится в вашем Production-артефакте? Не в .env.production и не в конфигах Vite, а в реальных строках и файлах, которые прошли минификацию.

Чтобы вместе проверить это, я подготовил тестовый релиз, в который специально включил несколько различных секретов.

Давайте посмотрим, что из этого утекло в итоговую сборку.

Переименование проекта в Docker Compose может создать новые пустые volumes, пока старые данные спокойно остаются на диске. Разбираю, какие внутренние идентификаторы нельзя менять через Replace All и как провести ребрендинг с возможностью отката.

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

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

WebSocket принято считать очевидным выбором, когда сервер должен постоянно отправлять клиенту свежие данные. Но что произойдёт, если вместо обычного веб-приложения у нас SCADA, а клиентов становится 1000?

Был собран тестовый стенд с OpenPLC, Modbus TCP и ASP.NET Core. Сравнивались Short Polling, Long Polling и WebSocket при 1, 10, 30, 50, 100, 500 и 1000 одновременных клиентах.

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

Недавно мне пришлось объяснять племяннику простейшее 2x + 4 = 10. Я уже собирался произнести школьное «переносим четвёрку вправо с противоположным знаком», но внезапно поймал себя на вопросе: а почему она вообще должна менять знак?

Если ребёнок воспринимает = как портал, через который числа проходят и магически меняют свойства, возможно, проблема не в математике, а в способе её объяснения.

Из этого вопроса вырос MathRoots — мой эксперимент с математикой как dependency graph: от ответа можно проваливаться вниз до операций, свойств и совсем фундаментальных понятий, искать root cause ошибки, визуализировать формулы и спрашивать у каждого шага: «Почему я вообще могу это сделать?»

В статье покажу, во что превратилось обычное 2x + 4 = 10, зачем математике debugger, причём тут AST и как всё это в итоге доросло до React, AI и Docker.

Атрибуты width и height сэкономят ресурсы CPU затрачиваемые на отрисовку страницы. Также они избавят от эффекта «скачущих изображений», когда во время загрузки страница резко дёргается, раздвигается, чтобы освободить место под под появляющиеся изображения.

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

Начну со спорного решения: я храню в базе готовый HTML с Tailwind-классами.

Не Markdown, не JSON-схему блоков, а буквально это:

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

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

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

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

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

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

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

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

Что, если я скажу вам, что в 2026 году JavaScript для всего этого нам больше не нужен?

Знакомый попросил ChatGPT написать интервальную тренировку одним HTML-файлом. В браузере всё пикает, но стоит погаснуть экрану — тишина. Разбираюсь, почему веб-страница не умеет будильник, и что с этим делать, если код вам написал чат.

Перевод интерфейса меняет текст, но сам по себе не создаёт отдельную языковую страницу. Один адрес /search/music может показать английский или русский интерфейс в зависимости от client state, cookie или настроек браузера. URL при этом остаётся тем же.

Для поисковой индексации языковые версии удобнее разделить адресами:

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

Я добавлял в админку сайта портфолио. У проекта есть заголовок, описание и несколько изображений. После загрузки файла API должен вернуть обновлённый проект, чтобы интерфейс сразу показал новую картинку.

Файл сохранялся. Строка появлялась в базе. Повторный GET тоже находил изображение. Но ответ самого запроса загрузки выглядел так:

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

Разбираем, откуда берутся эти 22%, почему НДФЛ с казахстанца платить не надо, но налоговым агентом вы все равно остаетесь, и какая формулировка в договоре превращает экономию в доначисление.

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

В нашем сервисе появились обращения, которые не складывались в картину: человек запрашивает сброс пароля, получает письмо, нажимает на ссылку и видит «ссылка недействительна или устарела». Запрашивает второй раз - то же самое. Пятый раз - то же самое.

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