image image image image image image image image
Single-File SPA на чистом JS (ES6+), без фреймворков и сборок. Модульный подход: автономные модули (init/destroy), взаимодействие через события и локальное хранилище. CSS: переменные, 50+ анимаций, Container Queries, content-visibility, contain: paint. Canvas API: искры, разряды, вычислительная сеть. Адаптация: hardwareConcurrency, deviceMemory, connection.effectiveType, devicePixelRatio. Производительность: манифест с приоритетами, IntersectionObserver, AbortController, lazy loading, OffscreenCanvas. Детекция: low, medium, high (60 FPS). Сервер: ETag, gzip, WebP/AVIF. UX: визуализация процессов, обратная связь, отсутствие скачков, мобильная адаптация. SEO и доступность: семантические заголовки, aria-live/aria-busy, контраст ≥4.5:1, WebP/AVIF, тёмная/светлая тема. Безопасность: XSS (txtCont/DOMPurify), rate lim, капча, ограничение длины. Адаптивность: mobile-first, CQ, touch-события, dPR. Fallback: animation-timeline, AbortCont. Анимации: Canvas (rAF + perf.now.), CSS (kfs, CSS Vs). Приоритезация: critical, normal, idle. Данные: LocalStorage (история, флаги), SessionStorage, версия формата (auto-сброс). Ошибки: try/catch, адаптивный retry (low: 2, medium/high: 3), fallback для Canvas/CSS/Audio, ad-blocker. Прерывания: потери фокуса, соединения, переполнение LocalStorage (FIFO). Интеграция: ad-blocker check, капча, валидация. Ключевые преимущества: 0 сборки и внешних зависимостей, CNV 60 FPS, CSS на GPU, семантическая разметка, mobile-first, fallback-механизмы.
https://uxengineer.ru