JavaScript *

🕹️ Подключение бота к бирже за час, а не неделю

Подключение торгового бота к бирже обычно отлаживается так: пишешь адаптер, запускаешь live и ждёшь торгового сигнала, чтобы поймать баг — а сигнала может не быть сутками. А в алготрейдинге мы делаем именно так.

Статья содержит руководство, как оптимизировать временные затраты на отладку интеграции в биржу

Мы рады объявить о релизе MDN MCP-сервера. MCP (Model Context Protocol) — это открытый стандарт, который позволяет ИИ-инструментам подключаться к внешним источникам данных. MDN MCP-сервер использует этот протокол, чтобы доставлять документацию MDN и данные о совместимости браузеров прямо в твой редактор кода или IDE.

Что будет, если взять один HTML-файл, браузер, localStorage и git-хостинг с CRUD API? Получится мессенджер. Без backend, базы данных, регистрации, npm и WebSocket. В статье показываю, как устроен Macaroni Messenger: хранение сообщений в .macaroni/, outbox, git-agnostic adapters, storage branch, plugin API и опциональное шифрование.

Когда я говорю, что перешёл с React на Angular, на меня смотрят примерно так же, как если бы я сказал, что добровольно переехал из Амстердама куда-нибудь в Челябинск. С непониманием и вопросом «а зачем».

Если открыть типичный канал про разработку, там будет React, Next.js, React Native, снова React. Джуны учат его как первый фреймворк, мидлы обычно выносят в резюме жирным шрифтом. Angular воспринимается как что-то невероятно сложное, для мега-приложений масштаба «строим город на Луне» и бэкендеров, которым не повезло. Я тоже так думал. У меня за плечами был React, я понимал компонентный подход, умел работать с хуками, знал экосистему. И тут Angular.

Готовых инструкций, как перейти с React на Angular, в сети практически нет. Зато есть тысячи статей про обратный путь. Пришлось разбираться самому, и вот что из этого вышло.

Агент не ломает архитектуру. Он заливается в те щели, которые ты ему оставил. Как я перестроил проект на 200К строк, чтобы границы держал линтер и CI, а не слова в CLAUDE.md. С кодом и цифрами до и после.

Экран, в котором я живу 4 месяца. Не открываю IDE — всю god crm пишу внутри god crm.

Всё на скрине — строки одной postgres-таблицы. заметка, тикет, агент — одна сущность. поэтому заменило мне ноушн, обсидиан и мессенджер сразу.

Код открыт, mit: github.com/holetron/godcrm

Рассказываем, как из идеи «собрать меню на неделю» получилась задача оптимизации: КБЖУ, бюджет, целые упаковки, остатки в холодильнике, цены магазинов и план готовки.

Внутри — почему схема «рецепты → список покупок» быстро ломается, зачем понадобились greedy, simulated annealing и MIP, и почему список покупок оказался почти отдельным продуктом.

Замена одной кнопки не должна тянуть за собой весь React. В RWC — не тянет.

Каждый компонент RWC — самостоятельный Custom Element. Он не зависит от рантайма хоста и работает внутри React-дерева, Angular-приложения или чистого HTML.

Поэтому старый React-компонент и новая RWC-кнопка живут на одной странице одновременно.

На практике: UI-кит мигрируется покомпонентно, по одному виджету за спринт. Без feature-freeze, без второго рантайма фреймворка и параллельной сборки ради сосуществования версий.

Единица изоляции здесь — сам компонент, а не application runtime.

Сервисы, в которых данные собираются и обрабатываются на основе других сервисов, очень чувствительны к интеграциям. Технические решения часто реализованы на брокерах, например, Kafka. У нашей команды была задача с финансовой отчетностью и десятками вариантов состояния документов.

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

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

Я кликнул, и пошла игра. Потом прошло пять минут, десять, пятнадцать, и я не мог оторваться, так как немного азартный и, пока не выиграю, не захочу заканчивать. После многих поражений, примерно на двадцать пятой минуте игры, я поймал себя на мысли: а почему яблоко всегда жертва и почему вообще змейка — наш главный герой?

Во многих проектах взаимодействие фронта с бэком до сих пор строится по классике: ручки, fetch, headers, дублирование типов. При таком подходе внушительная часть кода уходит на обслуживание сети, а не на саму бизнес-логику. 

Мы решили эту проблему через Chord — фреймворк сетевого уровня на базе JSON-RPC. Используем его уже более 2 лет. 

Эта статья для фронтенд- и фулстек-разработчиков, работающих с TypeScript и мета-фреймворками вроде SvelteKit, Next или Nuxt. В ней покажу, как мы с помощью Chord вызываем серверные методы как обычные функции и получаем типы с бэка без дублирования. 

Привет!

Это 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 — чтобы баг не всплыл только на по-настоящему большом датасете.

Заходят как-то две машины Тьюринга в одну диаграмму… а у них имена одинаковые.

Я говорю «машины», а на деле — два разных экземпляра State @turing-machine-js/machine, сконструированные по-разному, с разным поведением во время исполнения, и со строго одинаковым state.name. Это происходило в библиотеке, которую я разрабатываю в качестве хобби с 2019 года, и я этого не замечал семь лет.

Обнаружил случайно, начиная с задачи на чистку Mermaid-визуализации. Закончил — кардинальной переделкой того, как композиция состояний отражается в имени. И узнал, что за этой переделкой прячется число .

Реактивность лучше 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.

Мы делаем чат-агрегатор, где в одном окне доступны GPT, Claude, Kimi и DeepSeek. Фронтенду нужно отдавать ответ в реальном времени — токен за токеном, как в ChatGPT. Бэкенд при этом ходит к четырём разным API, и стриминг у них устроен по-разному. Расскажу, как мы свели это к единому SSE-потоку наружу, и про две грабли, на которые наступили: рваные UTF-8 символы и парсинг чужих SSE.

Статья будет полезна всем, кто проксирует LLM через свой сервер.

Зачем вообще свой прокси

Фронтенд не должен знать ключи провайдеров и не должен ходить к ним напрямую. Все запросы идут через наш Node.js-бэкенд: он подставляет ключ, дёргает нужный API с stream: true, парсит входящий поток и отдаёт фронту унифицированные события. Плюс на бэкенде живут лимиты, учёт токенов и подмена провайдера.

Задача: «получить поток от провайдера X → распарсить → отдать фронту в едином формате».

Два разных формата стриминга

Провайдеры делятся на два лагеря.

2026 год, роботы доставщики на улицах крупных городов, автоматические сканеры уязвимостей для QA, фреймворки разработки , которые позволяют написать код как для сайта по продаже авторских батонов и выпечки , так и портал для крупного медицинского бизнеса - все это в наличии и не вызывает удивления. Казалось бы чем нам как разработчикам или QA полезным будет пресловутый DevTools и вкладка Source...

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

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

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

Playwright использует довольно необычный подход в реализации своего JavaScript API для фикстур. Чтобы понять, как это работает, мне пришлось заглянуть под капот библиотеки и разобраться, откуда в этом API столько магии.

И так, вы в Telegram Web и вы запускаете безобидное на первый взгляд Mini App, сворачиваете его или просто переключаетесь на соседний приватный чат, чтобы продолжить переписку. Казалось бы, контексты изолированы, фрейм приложения неактивен, и вы в полной безопасности. Но так ли это на самом деле?