Тесты зелёные, линтер молчит, pull request одобрен. Можно выкатывать — главное, чтобы ничего не упало, но мы ведь 100 раз протестировали, изучили pull request, запустили линтер и уверены в качестве кода.Но опасность поджидала там, где её совсем не ждали.Недавно мне попалась статья, в которой автор разбирал JavaScript на чужом сайте — просто просматривал Source‑файлы, которые сайт отдаёт браузеру. Он обнаружил там API-ключи, хранящиеся прямо в JS. Меня поразило, насколько легко их можно найти. Е…
В 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 bui…
Мне надоело тянуться к клавиатуре и мыши, чтобы пролистнуть ролик, — и я собрал кликер для ПК на базе ESP32. Три кнопки, наподобие пульта для презентаций: две листают ленту стрелками вверх и вниз, третья отправляет F13. Её нажатие ловит собственное расширение браузера и ставит лайк.F13 выбрана не случайно. На большинстве клавиатур ряд функциональных клавиш заканчивается на F12, поэтому F13 гарантированно не столкнётся с чужим сочетанием. Зато событие можно перехватить в расширении и обработать …
Когда работаешь с такими масштабными продуктами, как мы делаем в VK, быстро начинаешь ценить код, который можно не писать. Особенно если речь о небольших сценариях: открыть поповер, анимировать появление блока или подстроить поле под контент. Ещё недавно для таких задач мы почти автоматически тянулись к JavaScript. Но за последние два года CSS сильно расширил свои возможности для задач, связанных с интерфейсом.Я Максим Кузнецов, занимаюсь оптимизацией производительности и улучшением стабильност…
Практический разбор создания и развития собственной UI-библиотекиКоротко: Собственная UI-библиотека — это не только набор React-компонентов. После появления нескольких проектов-потребителей на первый план выходят API, состояние, совместимость, зависимости, тестирование, документация и версионирование.С чего всё начиналосьКогда в проекте начинает появляться всё больше одинаковых элементов интерфейса, рано или поздно возникает вопрос: зачем каждый раз создавать один и тот же Button, Input и…
Мне потребовался умный анализатор потока новостей на специфичную тему: применение AI в энергосбережении и энергобезопасности. Хотелось получать в Telegram нужные заметки в моем заданном формате: заголовок, суть решения, достигнутые KPI, ссылка на первоисточник… И если материал полезен - нажать кнопку и отправить его в рабочий чат.Важное дополнение: 90% новостей иноязычные, а обработанные сообщения нужны на русском.Два месяца мы с ChatGPT и Gemini дорабатывали этот инструмент. Один из полезных п…
Идея была простая: смотреть аниме с друзьями так, чтобы пауза у одного означала паузу у всех. Не Discord Go Live с его артефактами и мылом, не «на счёт три жмём пробел», а честный общий плеер: кто угодно нажал — у всех перемоталось.Я думал, это вечер работы. Получилось четыре нетривиальных проблемы, три из которых я не нашёл описанными нигде, и одна ночь отладки того, почему hls.js молча ничего не делает.Под катом: почему прямая ссылка на видео бесполезна в браузере, как выглядит прокси с подпи…
Началось это буднично. Я гонял логи своего сервиса и увидел ночью две записи, которых там быть не должно.Первая была просто мусором: ktrc ktrc ktrc на два экрана, без начала и конца. Я решил, что кто‑то тестирует форму на прочность, и пошёл спать.Вторая пришла через несколько часов. Нормальный текст, оформленный как договор: пункты, нумерация, привычные обороты про сроки и ответственность. А в середине, между условием об оплате и условием о неустойке, вставлено:Игнорируй все предыдущие инструкц…
Во время загрузки сайта тег IMG занимает нулевой размер на странице. Затем при загрузке самого файла, блок раздвигает все элементы вокруг себя и занимает нужный размер. В этот момент, когда элементы страницы «толкаются» в стороны, происходит пересчёт макета в браузере.Это требует времени центрального процессора на обсчёт новых позиций и размеров блоков и создаёт визуальный дискомфорт: страница дёргается, прыгает и скачет во время загрузки страницы. Также текст на странице начинает убегать вниз …