TypeScript *

🤡 Как контрить шитпостинг Президента США

Существующие решения на GitHub имеют фатальные изъяны. Разберём несколько примеров - плюсы и минусы.

Год назад я опубликовал первую статью про разработку приложения календаря тренировок. Спустя 5 месяцев опубликовал рассказ о 10 обновлениях. Сейчас время финала истории - ещё 7 обновлений за 7 месяцев.

Сам регулярно пользуюсь приложением - оно добавляет мотивации заниматься спортом дальше, сохраняет график тренировок, следит за объемом выполненных упражнений. На текущий момент в приложении больше 150 зарегистрированных пользователей.

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

Исходный код

Приложение в RuStore

Веб-версия

Frontend: Typescript, Vitest, Vite, Vue, Tanstack Query, Vue I18n, Tauri

Backend: Typescript, Vitest, Esbuild, Fastify, Mongoose, MongoDB, Swagger

WebSocket vs SSE простым языком: двустороннее и однонаправленное соединение, как работает TCP и HTTP upgrade, и какие вопросы по этим темам чаще всего задают на собеседовании.

Привет!

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

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

📺 Крупные релизы и видео: Babylon.js 9.0 и доклад Таннера Линсли про TanStack Start.

🤖 AI в проде без розовых очков: как агенты «видят» веб, что не так с персонами в промптах и почему Cloudflare меняет подход к кэшу.

🛡️ Supply chain снова в фокусе: пауза bug bounty в Node.js, кейс с axios и практичные меры защиты зависимостей.

🎨 CSS-практика без магии: containment, sticky по осям, subgrid, dino game и «жидкие» анимации от Темани Афифа.

⚡ JavaScript/TypeScript: главное по JS 2026, новый JSIR от Google и утилиты для View Transitions.

🅰️ Angular-экосистема для AI-эпохи и не только: ngxtension, LLMs.txt в NG-ZORRO и MCP-страница в PrimeNG.

🌎 Веб-стандарты и браузеры: W3C про AI и голосовых агентов, JetStream 3 и MCP-коннектор в Opera Neon.

🖌️ UI/UX и доступность: WebAIM Million 2026, дизайн для людей с тревожностью и разборы про принципы дизайна.

…и многое другое.

В этой статье я разберу паттерн Entity Registry — плоский реестр сущностей на базе Zustand, который автоматически нормализует любые ответы API, хранит данные в едином словаре по ID и обеспечивает точечный ре-рендер только тех компонентов, чьи данные действительно изменились. Отдельно разберём трюк с enumerable: false для мягких удалений — пожалуй, самую изящную часть паттерна.

Ранее мы писали похожие статьи о CSS, но JavaScript заслуживает не меньшего внимания! Тем более что JavaScript лучше справляется с версионированием. Мы рассмотрим новые возможности самого языка, а также основные среды выполнения, фреймворки, библиотеки и инструменты.

Мы разобрались с асинхронщиной, идемпотентностью и моками. Код выглядит хорошо. Тесты проходят. Но когда проект вырастает до тысячи тестов, начинают падать вещи которые падать не должны, и причина почти никогда не в логике теста.

Причина в архитектурных минах которые заложили месяц назад и забыли. В этой части разберём самые частые из них и настроим ESLint чтобы робот ловил их вместо лида на ревью.

Примеры кода намеренно упрощены для наглядности. Фокус на идее, не на архитектуре.

За пару лет я сделал с десяток приложений для Маркетплейса Битрикс24 — коннекторы мессенджеров, роботы, iframe-панели. На PHP, TypeScript и Python. Каждый раз одно и то же: документация разбросана, примеры устарели, а реальные подводные камни вылезают только в продакшене.

Эта статья — сборник всего, что я хотел бы знать перед тем, как начать: формат токенов при установке, мультитенантность, обновление OAuth, петля сообщений в коннекторах и ещё десяток граблей с кодом и решениями.

Иногда возникает странное ощущение, что фронтенд уже не про решение задач.
А про поддержание сложности.

Я в разработке ещё до AngularJS и React. Тогда всё было просто: HTML и немного JavaScript — и этого хватало даже для приложений с rich UI.

Потом пришли фреймворки.
Один из первых — AngularJS — и это был вау-эффект.
Ты больше не трогаешь DOM руками. Просто описываешь, что хочешь получить.

Потом: Flux, Redux, TypeScript, Angular 2+. Фронтенд в этот момент стал высокотехнологичным, но в то же время неприятным. Нужно писать кучу обслуживающего кода, не всегда понятно, как оно работает, возникают сложности с отладкой.

Недавно я обнаружил, что далеко не все знают об одной простой вещи — и это меня удивило.

Многие думают примерно так: «я описал интерфейс, указал что GET /users возвращает User[], TypeScript подсвечивает все поля, автодополнение работает — значит всё под контролем». Звучит разумно. Но есть одна проблема.

TypeScript работает только во время компиляции. В рантайме его нет.

Когда реальный ответ прилетает с сервера — никакой проверки не происходит. TypeScript просто верит вашей аннотации и молчит. Что реально вернул сервер — string вместо number, переименованное поле, отсутствующий объект — он не знает и знать не будет.

Вы узнаете об этом позже. Обычно от пользователей.

Привет, хабровчане! С вами снова Евгений Иванов, QA-lead в компании Fix Price. В этот раз поделюсь с Вами опытом внедрения автоматизации для гибридного мобильного приложения на Android. 

У этого решения есть свои плюсы и минусы, и мы продолжаем работать над его развитием. Но уже сейчас понятно: оно приносит реальную пользу команде во время регрессионных и предрелизных прогонов. Расскажу подробнее, как мы собрали связку Playwright + Appium + WebdriverIO и что из этого вышло.

Простые, но мощные паттерны для JavaScript: научитесь выбирать подходящий паттерн перед решением задачи и ускорьте своё решение алгоритмических задач.

Новый пост-квантовый гибридный алгоритм шифрования для высоко-нагруженных систем с реализацией на TypeScript. Ring-LWE, работа с ключами с использованием MAC и SHAKE-256, защита от основных видов атак и другие мысли в реализации протокола QuarkDash.

В любом зрелом фронтенде проблема редко в том, чтобы написать еще один Button.

Проблема начинается позже. Когда у компонента уже есть десятки использований, Storybook, типы, обвязки, legacy-слои и пара человек, которые “чуть-чуть расширили API, потому что так было удобнее”.

В этот момент UI-kit начинает незаметно плыть.

В субботу Anthropic заблокировал мой рабочий сетап, построенный на oAuth Claude Code и Telegram. Вместо того чтобы ждать, я за вечер написал self-hosted замену с блэкджеком и постоянной памятью. Рассказываю, как устроен TeleClaude — опенсорсный инструмент, который позволяет управлять проектами через топики в Telegram, используя вашу локальную подписку Claude с лимитами из oAuth. Никаких облаков, API и дополнительных трат. Разбираю архитектуру, систему памяти и показываю, как запустить у себя.

Во многих fullstack-проектах на Next.js и Django авторизация разваливается в одном и том же месте. На фронте удобно использовать NextAuth, потому что он закрывает формы входа, OAuth, серверную сессию и клиентские хуки. На бэкенде хочется иметь обычный JWT-контур на Django REST Framework, чтобы защищать API, работать с access и refresh токенами и не привязывать бизнес-логику к фронту. В итоге часто получается неприятная схема: пользователь логинится через NextAuth, потом отдельно логинится в Django, потом где-то вручную перекладываются токены, а через пару недель вся эта связка начинает ломаться на refresh, logout и OAuth.

Что делаем. Пользователь проходит один вход на фронте, а дальше фронт уже работает с токенами Django как с единственным источником доступа к API. Без второй формы входа, без ручного хранения access token в localStorage, без отдельного костыля под Google OAuth.

Разберем рабочую схему, в которой NextAuth отвечает за пользовательскую сессию на фронте, а Django остается владельцем API-авторизации и выдает JWT. На credentials-входе NextAuth сразу получает access и refresh от Django. На Google OAuth фронт сначала пускает пользователя через провайдера, потом синхронизирует его с Django и тоже получает пару токенов. После этого все запросы идут через один axios-клиент, который сам подставляет access token, сам обновляет его через refresh и сам завершает сессию, если refresh уже недействителен.

Модальные окна — один из самых недооценённых слоёв UI-архитектуры. Формы, подтверждения, панели действий — в любом крупном проекте их десятки. И почти в каждом проекте их управление со временем превращается в хаос.

Не потому что разработчики ленивые. А потому что модалки обманчиво просты. useState(false) — и готово. Пока модалка одна, в одном месте, с одним набором данных — проблем нет.

Начну с контекста. Я играю в EA FC (ранее FIFA) в режиме Clubs (11×11), где каждым виртуальным игроком управляет человек. Сам по себе режим интересный, но мне, как человеку, который любит цифры и аналитику, довольно быстро стало не хватать доступной статистики.

Я пришёл в лигу, у которой уже был свой сайт (я в этой статье опущу тему о том, что я администрировал проект порядка 3 лет). Там статистику собирали вручную: люди пересматривали записи матчей и заносили базовые показатели — голы, ассисты, перехваты, отборы и так далее. На основе этих данных считались различные рейтинги: лучшие игроки, бомбардиры, разрушители и прочее.

Выглядело это примерно так: набор таблиц, где действия сгруппированы по категориям и амплуа.

Предлагаю открыть портал в ад и задать вопрос, который сейчас, кажется, витает в воздухе у всех, кто связан с разработкой: фронтенд вообще еще жив? Или логичнее уже сейчас срочно переучиваться, пока через пару лет не пришлось делать это в панике?

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

Привет!

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

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

📺 Плейлист по отладке Next.js с Sentry.

🤖 Рэйчел Эндрю и Эдди Османи — два взгляда на AI: когда использовать, а когда координировать целый оркестр агентов.

🛡️ GlassWorm: атака через невидимые Unicode-символы в npm-пакетах и расширениях VS Code.

🎨 CSS Anchor Positioning: два круга, стрелка и ноль строк JS от Темани Афифа.

⚛️ Storybook MCP для React, data-testid как признак недоступности и пошаговые туры через React Joyride.

👁️ Vue Devtools не работает в продакшене? QA-инженер написал свой инспектор.

🌎 Chrome 147 с scoped view transitions, Safari TP 240 и дайджест веб-платформы за март.

🖌️ Осмысленное трение в UX, ARIA-роли для дизайнеров и тест масштабирования шрифтов в Figma.

…и многое другое.