Веб-страница - фронтенд бэкенд девопс

Разница между «у нас есть бэкап» и «мы готовы к аварии» — примерно как между наличием огнетушителя и умением им пользоваться при пожаре. Первое не гарантирует второе, а узнают об этом обычно в момент, когда сервис лежит у всех на глазах, включая руководство и клиентов. На самом деле готовность инфраструктуры к сбою определяет не факт хранения копий, а расчёт допустимого времени простоя, структура плана восстановления и техническая настройка репликации, которую проверяют заранее регулярными учениями переключения на резервную площадку. Будет полезно инфраструктурным инженерам, техлидам и руководителям, которые хотят сделать свои системы реально устойчивыми к авариям. Больше об аварийном восстановлении: 1. Почему бэкап есть, а восстановиться не получится: разбор точек отказа 2. Как должен выглядеть DR-план, который сработает в аварию 3. Аварийное восстановление до аварии: как настроить DRaaS, пока ничего не упало

WebGPU в Unity вышел из эксперимента Начиная с версии 6000.6 WebGPU в Unity — полноценный графический бэкенд с обычной поддержкой, а не экспериментальная опция. Для браузера это вычислительные шейдеры, а с ними отсечение невидимого на GPU, апскейлер STP, VFX Graph на миллионы частиц и скиннинг на GPU: на WebGL 2 всё это было недоступно. Ловушка при выкладке чисто веб-разработческая: WebGPU браузер отдаёт только в защищённом контексте, поэтому сборка, открытая по обычному HTTP или файлом с диска, молча откатится на WebGL 2. В нашем канале «GameDev» разобрали подробнее, как его включить и почему WebGL 2 нельзя убирать из списка.

Плавающий виджет поверх всех окон одним вызовом API Firefox 151 включил Document Picture-in-Picture API, до этого он был только в Chrome. В отличие от PiP для видео, documentPictureInPicture.requestWindow() открывает окно поверх вкладок и других приложений с любым HTML внутри: тикер, чат, таймер, заметки. Раньше это требовало расширения или Electron. CSS-Tricks разобрал API на примере тикера акций. Стили в новое окно не наследуются: и • клонируют через querySelectorAll() в createDocumentFragment() и одним append кладут в . Ширину и высоту задают только парой, иначе размер выбирает браузер. Фокус уходит в PiP-окно, поэтому кнопка-переключатель закрывает его со второго клика. @supports не поможет: at-rule() есть только в Chrome, остаётся "documentPictureInPicture" in window и скрытие кнопки. Стили под окно пишут через @media (display-mode: picture-in-picture). Только десктоп, Safari мимо, в iframe не запускается. #браузеры #css #javascript

Бэкенд для приложения в одном исполняемом файле PocketBase — это один бинарник, внутри которого сразу SQLite, авторизация пользователей, хранение файлов, REST API, подписки в реальном времени и админка. Ни отдельной базы, ни очереди рядом ставить не нужно: приложение живёт одним файлом на одной машине. 23 августа вышла версия 0.40.0: удаление логов через DELETE /api/logs, ограничение размера Log.Data примерно 16 килобайтами, Cross-Origin-Opener-Policy: same-origin в заголовках по умолчанию. Порог входа при этом поднялся до Go 1.27. В нашем канале «Инструменты программиста» разобрали подробнее, чем PocketBase берёт против Supabase и где ломается совместимость.

Строгий CSP и nginx без пары заголовков ломают WebAssembly на проде Распознавание паспорта в браузере без отправки фото на сервер делается WASM-модулем. У Smart ID Engine четыре сборки (nosimd.nothreads, simd.nothreads, simd.threads, nosimd.threads), нужную выбирают на лету через wasm-feature-detect. SIMD без потоков работает в Safari 17.1+, Chrome 91+ и Firefox 89+. Серверные ловушки: .wasm отдаётся с Content-Type: application/wasm и сжимается; строгая CSP блокирует JIT, нужна директива wasm-unsafe-eval; многопоточная сборка требует COOP: same-origin и COEP: require-corp. Камера: документу нужно не меньше 120 DPI, оптимальный кадр 1600×1200, веб-камерам ноутбуков на А4 разрешения не хватает, на трёхкамерных iPhone основной модуль не фокусируется ближе 20 см. Android и iOS стартуют камеру в разной ориентации, сверяйте matchMedia. Пошаговая интеграция с конфигами для getUserMedia, CSP и nginx. #wasm #браузеры

Safari расширяет случайность в CSS: random-item() и random() в custom properties Сегодня WebKit выложил Safari Technology Preview 251. random() в Safari уже есть со стабильной 26.2, а теперь добавились random-item() для выбора из списка значений, random() внутри custom properties и ключевые слова кеширования property-scoped и property-index-scoped. Разброс блоков в галерее и вариации анимаций описываются в CSS без скрипта с инлайн-стилями. Из той же сборки стоит примерить: corner-shape (скошенные и вогнутые углы поверх border-radius), @supports at-rule(...) и popover=hint для подсказок, которые не закрывают другие поповеры. В JavaScript главное import defer: модуль грузится сразу, а выполняется при первом обращении, это ускорение старта без ленивых import(). Плюс Iterator.zip(), chunks(), windows() и WebAssembly Memory64. Убрали процентное значение -webkit-line-clamp: если оно есть в вашем CSS, вёрстка поедет. Полный список в заметках к релизу. #браузеры #css #javascript

Chrome 152: закрыть диалог кликом по подложке без вычисления координат Раньше для «закрыть модалку при клике мимо» ловили клик на dialog и сверяли getBoundingClientRect с курсором. Теперь CSSPseudoElement в JavaScript, кроме ::before, ::after и ::marker, отдаёт ::backdrop, ::scroll-marker и ::view-transition. Клик по подложке становится обычным событием. Вторая новинка — CPU Performance API: возвращает «tier» производительности процессора, чтобы снижать детализацию графики на слабых устройствах; работает в связке с Compute Pressure API. Пользователь и админ могут переопределить уровень (политика CpuPerformanceTierOverride), так что значение не истина. Третья — заголовок Connection-Allowlist: список URL-паттернов, куда документу и его воркерам разрешено ходить. Браузер сам режет остальные исходящие запросы, включая те, что делают сторонние скрипты. Рейчел Эндрю собрала релиз по пунктам; origin trial Connection Allowlists шёл с Chrome 148 по 151, в 152 заголовок включён по умолчанию. #браузеры #javascript #безопасность

JPEG XL к концу года будет во всех браузерах Firefox опубликовал intent to ship, Chrome тоже собирается включить формат, у Safari частичная поддержка с 2023 года. За флагом в Firefox JPEG XL жил с 2021-го, но 100 000 строк многопоточного C++ в декодере сочли опасной поверхностью атаки. Mozilla предложила Google Research написать декодер на Rust, так появился jxl-rs, на нём держится реализация в Firefox. Главный аргумент за формат, по Джейку Арчибальду, прогрессивный рендеринг: картинка в 135 КБ узнаваема после первых килобайт. В Safari этого нет. По размерам картина смешанная. Фото в вебовском качестве: AVIF 116 КБ против 134 у JPEG XL при SSIMULACRA 2 = 62,8. Без потерь впереди JPEG XL: 1,45 МБ против 1,76 у AVIF и 1,55 у WebP; скриншот 92 КБ против 164. Старые JPEG пережимаются в JPEG XL без потери качества. Я бы прогнал свой набор картинок через оба кодека. Демо работает в Firefox Nightly, разбор с примерами у Mozilla. #браузеры #перформанс

Что делать, если участники команды видят только свой участок работы, десятиминутный дейли незаметно растягивается на час, а стопперы всплывают слишком поздно, чтобы успеть на них среагировать? В статье смотрим на работу команды и путь задач от бэклога до релиза, и думаем какие коммуникации действительно нужны в этом процессе. Отдельно о том, что именно должен проверить разработчик перед первым коммитом и как устроены quality gates перед выпуском версии в прод.