Веб-страница

Как хранить прогресс просмотра в веб-плеере без бэкенда В разборе личного проекта HikariPlay Bhaumic Singh показывает, как сделал «Продолжить просмотр» для плеера на Svelte 5, SvelteKit и TypeScript. Позиция видео хранится в localStorage , поэтому аккаунт и запись данных на сервер не нужны. Плеер сохраняет текущую секунду при паузе, скрытии вкладки и перед закрытием страницы. При следующем открытии он читает…

Когда маркетплейсу хватает Vanilla JavaScript и PWA Школьный маркетплейс Aksara-Mart собрали без React и Next.js под конкретные ограничения: у 65% учеников телефоны с 2–3 ГБ оперативной памяти, школьный Wi-Fi перегружен, а перемена длится 15 минут. Интерфейс на JavaScript и CSS весит меньше 48 КБ в сжатом виде. Состояние корзины хранится в localStorage , один обработчик на контейнере принимает клики со всех…

Как настроить GoatCounter и отсеять ботов от живых читателей Серверные логи показывали около 2000 посетителей в день, хотя GoatCounter после фильтрации насчитал меньше 200 человек. Причина разрыва: ИИ-скрейперы маскируют user agent и выходят через домашние прокси. Схема фильтрации засчитывает просмотр только после движения мыши, касания экрана, нажатия клавиши или указателя. Для браузеров без JavaScript запрос…

Где проверять авторизацию в Next.js, чтобы не перегружать Middleware Проверка роли пользователя через базу прямо в Middleware выглядит логично, но выполняется на каждом совпавшем запросе: при переходе по странице, загрузке данных React Server Components и фоновой ревалидации. Один клик может породить несколько обращений к базе, а неверная настройка matcher добавит запросы к статическим файлам. Рабочее разделение: в…

Атрибут maxlength на форме сброса пароля ломал авторизацию клиенту Vanguard Разработчик Танин Нанакорн год не мог войти в аккаунт брокера Vanguard через браузер: он несколько раз за год сбрасывал пароль и заходил по QR-коду с телефона, пока не изучил верстку страницы сброса. В форме стоял атрибут maxlength="20" . Менеджер паролей генерировал ключ длиннее 20 символов, а Chrome при вставке в оба поля молча обрезал его…

Как собрать субтитры с точными таймингами и читаемыми строками Дмитрий Лукьянов создал Language Dove для изучения языков по фильмам. В разборе пайплайна видео проходит путь от распознавания речи до веб-страницы с плеером и оверлеем субтитров. Локальная VAD-модель определяет участки с речью, а громкость остальных участков подавляется. Затем каскад моделей распознаёт текст. Исправленный транскрипт сопоставляется с…

Как поручить ИИ миграцию сайта и не потерять 400 страниц Сайт с сотнями маршрутов, формами, редиректами и старым кодом автор перенёс на Astro за две недели. Он запускал не больше двух агентов параллельно, чтобы проверять результат до размножения ошибок. Требование сохранить возможности превратили в контракт: какие адреса, метаданные, изображения и формы должны работать. Рискованный перенос контента сначала проверили…

Как защитить веб-API от повторных операций с помощью идемпотентности и Outbox Таймаут не сообщает клиенту, успел ли сервер провести платёж. Повторный POST может списать деньги ещё раз, поэтому одна логическая операция должна приходить с одним ключом идемпотентности. Сервер атомарно резервирует ключ и сохраняет слепок запроса вместе с ответом. Проверка «сначала найти, потом записать» оставляет гонку: два запроса…