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

Привет!

Это 18 выпуск Frontend Status — дайджеста по фронтенд-разработке.

В этом выпуске:

📺 Экосистема TanStack кажется бесконечной, а browser gaming снова стал серьёзной платформой: Jack Herrington собирает 17 библиотек в одном приложении, а Software Engineering Daily с Эриком Дабилбором из Poki разбирает WebAssembly и WebGL/WebGPU на практике — чтобы увидеть, как устроены и стек, и дистрибуция современных веб-игр.

🤖 Старые приёмы промптинга режут точность reasoning-моделей, а закрытая вкладка не останавливает счёт — токены и GPU крутятся впустую — чтобы перестроить работу с ИИ и не платить за отменённую работу.

🛡️ Next.js с дефолтными настройками уязвим к RCE через Server Actions — даже если «серверных функций у нас нет» — чтобы не жить с иллюзией безопасности.

🎨 Центрирование всё ещё ломает голову, а каскадные анимации плодят сотни :nth-child — честный разбор центрирования и новые sibling-index() / sibling-count() — чтобы понимать, почему код работает, а не подбирать методом тыка.

⚡ Зелёные async-тесты врут, PDF застревает в iframe, геометрия — в sin/cos, DI падает на проде — PDFSlick, Geometric.js, InferDI и разбор ловушек Jest — чтобы ловить ошибки до деплоя, а не в три часа ночи.

⚛️ React-зоопарк, неделя конфигов и ручная мемоизация: карта Robin Wieruch на 2026-й, Rockpack из коробки, TanStack AI без вендорного замка, visx 4.0, RSC в TanStack Start и React Compiler — чтобы собирать стек без споров и вычистить лишний шум из кодбейза.

👁️ TanStack Table почти убил типы и автокомплит во Vue — честный разбор на Habr — чтобы брать библиотеку только под ту боль, которую не решить за час на чистом Vue.

🌎 Chrome подставляет тяжёлые блоки по ходу стрима, Firefox говорит с железом через Web Serial, canvas наконец принимает DOM — чтобы меньше костылей в вёрстке и проще UI поверх графики.

🦮 aria-label на div — ложная доступность, которую скринридер проглатывает — чтобы не тратить время на иллюзию a11y.

📦 Код пишут агенты, а ценность — в суждении: cpojer, автор Jest, о том, что осталось важно инженеру — чтобы направлять систему, а не печатать быстрее.

⚡ Node молча жрёт память, если стримы игнорируют backpressure — чтобы баг не всплыл только на по-настоящему большом датасете.

Реактивность лучше MobX, виртуализация рендеринга «из коробки», типизированные стили на TypeScript, локально-первая модель данных через CRDT — эти идеи Дмитрий Карловский (nin-jin) разрабатывает на своём фреймворке $mol и в проекте $hyoo.

За десять лет накопилось около сотни статей на Хабре и большая документация на mol.hyoo.ru, разбросанная по годам и площадкам — карта потерялась даже у тех, кто читал.

Этот каталог — навигатор по корпусу. 80+ материалов разложены по 12 темам:

с чего начать и для кого это вообще

история фреймворка от тизера 2016-го до обзора 2025-го

реактивность от первого «атома» 2014-го до свежего цикла 2026-го

архитектура: MAM, view.tree, виртуализация, CSS-in-TS

руководство по практике

утилиты: $mol_fetch, $mol_time, $mol_regexp, VaryPack, MarkedText

TypeScript-приёмы и принципы кода

$hyoo и Гипер База — распределённые данные на CRDT

сообщество, бенчмарки, аналитика проекта в цифрах

На каждый материал один абзац о сути и прямая ссылка на оригинал.

Полезно даже тем, кто не будет писать на $mol.

Когда я начал торговать криптой, меня раздражало одно: большинство аналитических инструментов выдают «BUY» или «SELL» без объяснений. Три индикатора сказали покупать - вот тебе сигнал. Никаких весов, никакого контекста, никакой логики за цифрой.

Я решил сделать иначе. Программа, о которой пойдёт речь — это десктопное приложение для Windows, которое запускается двойным кликом, подключается к открытому API Binance и выдаёт взвешенный Score по шести категориям индикаторов, бэктест на последних 100 барах, уровни поддержки/сопротивления по фракталам и ATR-метрики риска. В статье расскажу, как всё это устроено изнутри — с формулами и кодом.

Когда у приложения появляется несколько хостов PostgreSQL, начинается головная боль: нужно динамически находить мастера после failover, выбирать реплику с нужным отставанием и гарантировать что пользователь не увидит устаревшие данные после своей же записи. DNS кешируется минутами, libpq не знает про lag, HAProxy не слышал про LSN. Разбираем как устроены существующие решения и как закрыть все три задачи через лёгкий HTTP сервис — pg-status.

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

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

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

Когда речь заходит о безопасности рабочего места, обычно вспоминают операционную систему, антивирус, средства защиты конечных устройств, контроль устройств, почту, сетевой периметр. Браузер часто оказывается где-то сбоку: «ну, его тоже надо как-то настроить». На практике именно браузер становится одним из самых чувствительных клиентских приложений. Он работает с данными, авторизацией, расширениями, загрузками, сертификатами, прокси, паролями, обновлениями, внешними службами и внутренними порталами.

У Firefox для этого есть корпоративные политики. Их можно описывать в policies.json, раскладывать по рабочим станциям и получать управляемый браузер. Но между «политики существуют» и «администратор или специалист по информационной безопасности может уверенно сопровождать их в реальной организации» есть большая дистанция.

Так появился Browser Policy Manager — свободный продукт под лицензией MPL-2.0 для управления корпоративными политиками Firefox.

Всем привет!

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

Но, мне кажется, что сейчас будет правильно сделать шаг назад и поговорить не про конкретный сервис, а про весь BaaS (Backend-as-a-Service). Как мы уже узнали из прошлой статьи, Supabase не возник сам по себе, до него был Firebase, а до Firebase были обычные самописные API, куча настроек авторизации, хранения файлов, нотификаций с вебсокетами и остального.

В этой статье мы разберем, что такое BaaS, почему он вообще понадобился, чем Firebase отличается от Supabase, для каких приложений такой подход подходит, а где уже нужен собственный backend.

Запись в Notion - и текст на чужом сервере. Задачи в облачном планировщике - данные в чужой аналитике.

Волна локальных LLM показала широкой аудитории, что on-device - это реально. Модель работает, данные не покидают машину. RAG в indexeddb - кто так не делал?

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

Я доделал свои 7 pet-проектов. Все работают целиком в браузере, без сервера, без регистрации, без отправки данных куда-либо. Только локальное хранилище, шифрование на стороне клиента и нативные браузерные API.

Скриптов «забэкапь мне сайт» в интернете тысячи. Большинство падает на shared-хостинге, потому что там либо нет crontab -e, либо нет rsync, либо mysqldump лежит в нестандартном месте, либо у вас нет root, чтобы починить права на /tmp. А ещё — почти все игнорируют ротацию, и через два месяца ваш FTP забит 300 архивами по 200 МБ каждый.

В этой статье — рабочая схема для типичного клиентского сайта на Beget/Timeweb/Rusonyx-подобном хостинге, без панельных «бэкап-сервисов» за деньги, с дампом базы, ротацией и без хранения паролей в git.

Здравствуйте, дорогие читатели! Сегодня - ещё одна статья из рубрики джангологии.

Раньше я уже писал о своих идеях (1 и 2) о том, как сделать django асинхронным. Они основывались, вслед за sqlalchemy, на использовании гринлетов. Несмотря на то, что proof-of-concept был успешно получен, а трудностей - встречено меньше, чем ожидалось, я всё-таки отказался от этого подхода: во-первых, он уже применяется в sqlalchemy. Во-вторых, это ведёт к усложнению, и растёт так называемая test matrix - потому что поддерживается как синхронный случай, так и асинхронный. А simple, как мы знаем, is better than complex.

Так вот, я решил возобновить эти свои попытки, изменив подход на более радикальный. А именно, необратимо переписать django на async-only, сломав совместимость полностью. Для этого потребуется заменить в половине функций def на async def и добавив await при их вызове. Я уверен, что такой подход лучше.

Не то, чтобы асинхронный django был очень кому-нибудь нужен, особенно теперь, или от этого будет какой-то фантастический выигрыш в производительности - дело в том, что я хочу попробовать на практике агентное программирование, а это, как раз подходящий проект: есть чёткий план и много кода, который нужно менять.

Привет, Хабр! Говоря о проверке возраста для доступа к онлайн-платформам, нельзя обойти стороной один из наиболее очевидных кейсов: мессенджеры. Они давно вышли за рамки простого обмена сообщениями – и для многих новых функций есть конкретные возрастные ограничения. В этой статье мы поговорим о том, как за пару минут интегрировать распознавание паспорта для удобной возрастной идентификации в мини-приложение мессенджера – без биометрии, ЕБС и раскрытия персональных данных. С кодом и видео. В общем, заглядывайте под кат!

Посмотрим на Kilua — новый Kotlin-фреймворк для web-frontend. Честно о том: где радует, где мешает, и почему один вопрос всё равно остается открытым

Когда Docker-образ backend-приложения начинает весить 1,5 GB, это уже хороший повод хотя бы посмотреть, что вообще лежит внутри. Пока все работает, мало кто задумывается, сколько мусора, dev-зависимостей и ненужных файлов уезжает в production вместе с приложением. Но на самом деле от «лишнего веса» нужно избавляться, потому что каждый лишний мегабайт — это более долгие сборки и дополнительные сложности.  

9 июня Anthropic выпустила Claude Fable 5 - первую публичную модель класса Mythos, на ступень выше привычного Opus. Релиз громкий: 80,3% на SWE-bench Pro, миграция кодбазы Stripe за день, "самая мощная публичная модель в истории компании". Но бенчмарки - это чужой опыт. 

Мне было интереснее проверить свое: может ли модель не просто написать кусок кода, а собрать маленький продукт целиком - с идеей, механикой, балансом, интерфейсом и концовками.

Поэтому я не стала просить змейку, To-Do планер или лендинг. Я попросила одним промптом собрать браузерную игру - симулятор админа Telegram-канала про ИИ. Получился Нейровестник. Поиграть можно и с телефона.

Спойлер: модель сама вшила в баланс мораль.

В реактивной системе все состояния связаны друг с другом инвариантами в единый граф. Когда мы изменяем что-то с одной стороны этого графа, рантайм обеспечивает каскадный пересчет зависимых состояний. Такие последовательности пересчетов — это ничто иное, как потоки информации (data-flow). Чем прямолинейнее эти потоки, чем меньше они разветвляются и затрагивают состояния, не относящиеся к изменениям, тем эффективнее работает система. И здесь есть два подхода к оптимизации потоков информации…

Пользователь столкнулся с ошибкой в вашей программе. Трекер ошибок ее зафиксировал. Стек-трейс показывает место сбоя. Но что делал пользователь за несколько секунд до этого? Какие запросы выполнялись? На каком шаге сценарий пошёл не так?

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

Продолжаем рассказывать об альтернативном способе подтверждения возраста на веб-ресурсах без использования биометрии, интеграции с ЕБС и раскрытия персональных данных. О том, как это можно сделать, мы подробно писали в прошлой статье. Теперь разберемся, как реализовать подобный сценарий с помощью WebAssembly и какие возможности это открывает для веб-платформ. В этом материале показываем код, ищите под катом. 

Большинство статей о миграции с SharePoint описывают её как проект с двумя чёткими состояниями: «до» и «после». Вот вы работаете в SharePoint — вот уже в новой системе. На практике это не так. Между «до» и «после» существует третье состояние, которое может длиться месяцами: обе системы работают в проде одновременно, пользователи работают в обеих, а данные могут меняться в любой из них.

Именно это третье состояние и создаёт самый неприятный класс проблем. И именно о нём — эта статья.

Разработчики часто сталкиваются с проблемой: сайт успешно протестировали на мастере, выкатили на прод, провели контрольное тестирование — вроде всё хорошо. Сайт работает пару месяцев — и вдруг приходит задача от SEO «увеличить скорость загрузки сайта» или «исправить просевшее количество баллов в PageSpeed». Причём ничего принципиально нового не добавляли, просто наполняли контентом.

Начинаем разбираться — и выясняется, что есть общая проблема, которая почти всегда повторяется. А именно — изображения. В статье расскажем, что с ними делать — как оказывается, проблема распространённая и до сих пор актуальная.

Современные фронтенд-приложения постоянно взаимодействуют с файлами.

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

Но именно здесь начинаются настоящие проблемы.