В прошлой заметке я выложил Micra.js — маленький реактивный фреймворк для server-rendered страниц. Дальше пошли две недели, за которые я выпустил несколько версий.

Добавил в Micra кросс-библиотечный бенчмарк. Постарался сделать честную страницу, где Micra, Alpine, petite-vue, Stimulus и голый ванильный JS гоняют одни и те же сценарии в соседних фреймах.

Цифры оказались приятно-неприличными. Обновить 5 строк в списке из 1000:

— Micra — 0 мс
— Alpine.js — 919 мс
— petite-vue — 1005 мс

Читать далее →

Иду сегодня на тренировку и вижу как у ТЦ промоутеры раздают Schweppes. Новый вкус. Подошел поближе и понял — не выпить мне Schweppes. Потому что раздают его, сразу открывая. А мне бегать 8 км с отрицательным сплитом (это когда каждый следующий отрезок надо бежать чуточку быстрее), а потом еще 10 раз по 100 метров ускоряться. Развернулся и пошел на стадион.

Побегал хорошо. Если честно, время вообще не заметно пронеслось в хорошей компании. Благодаря Олегу, мы и поускорялись и стометровки побегали так, что пятки сверкали. С шутками, прибаутками, конечно. А потом он меня подбросил до остановки. Выхожу из машины и вижу — стоят промоутеры, Schweppes раздают. Новый вкус.

Тут-то я его и попробовал. Сел на лавку и наслаждался каждым глотком. Все эти 0.33 л. И в этот момент казалось, что весь мир может подождать.

Я помню время когда jQuery был UI-библиотекой для работы с DOM по умолчанию. Потом появился Knockout.js, Backbone.js и так мы дошли до React/Vue/Svelte. Фронтенд стал сложнее. Но такая сложность нужна не всегда. В мире всё ещё существуют простые сайты, состоящие из нескольких страниц, небольшие SaaS, панели управления и блоги. Часто таким решениям не требуется большой и сложный фронтенд. И в этом случае тоже приходится думать с помощью какого инструмента решать задачу создания интерфейса. В своих проектах я пробовал разные подходы — от Vanilla.js до React-а и всё пытался подобрать удобное решение, позволяющее совместить в себе реактивность и возможности взаимодействия с DOM и поддержку серверного рендеринга. А еще для простых сайтов не хочется тянуть кучу зависимостей. Иногда достаточно просто подключить библиотеку извне.

Так в ходе поиска баланса я набросал Micra.js — небольшую UI библиотеку на 5 Kb. Она имеет свои плюсы и минусы, абсолютно неуникальна и не претендует на звание заменителя всех других библиотек. Скорее это сборник практик, которые сформировались в единое решение.

Что это и как работает

Micra.js — это лёгкий реактивный фреймворк, который работает через shallow‑Proxy, отслеживая только верхний уровень state. Любое изменение top‑level свойства вызывает ререндер, а вложенные объекты нужно заменять целиком. Все синхронные обновления состояния батчатся в один microtask, поэтому несколько записей приводят к одному ререндеру. При первом рендере Micra сканирует DOM, собирает директивы (data-text, data-if, data-model и др.) и кэширует их, чтобы последующие обновления были быстрыми и не требовали повторного обхода дерева.

Выражения в директивах выполняются через быстрый путь для простых обращений к свойствам или через компиляцию с глобальным кэшем для сложных выражений. Внутри выражений доступен расширенный exprState, включающий методы компонента и хелперы (prop, emit, fetch). Списки с data-each и data-key обновляются через keyed‑diff: переиспользуются существующие DOM‑ноды, создаются только новые, а исчезнувшие удаляются. Каждый data-component создаёт независимый инстанс со своим состоянием, методами, props из data-* и собственным жизненным циклом. Компоненты общаются через event bus, а доступ к конкретному экземпляру возможен через Micra.instances().

Как видите, ничего нового и уникального. Некоторые решения компромиссны. Например, проксирование top-level. Для решений типа "показать модалку", "отфильтровать таблицы" выглядит достаточно. Меньше багов, выше производительность, так как нет лишних обходов. Но я не исключаю, что позже приду необходимости deep‑proxy.

В то же время, я собрал сборник рецептов и набор компонентов, которые можно копировать и использовать. В качестве эксперимента, хочу попробовать обучить AI использовать Micra.js в качестве замены React. Задачка, конечно, требует времени, потому что кодовая база с React огромна. В то же время, это не всегда играет на руку. Примеры кода могут быть и хорошими и плохими и корректировка достигается с помощью правильный скиллов и гайдлайнов. И я думаю, что если это можно сделать с одной библиотекой, то можно и с другой.

Мы тут с моим приятелем Клодом решили, что надо развивать мой личный бренд. А ничто так не развивает бренд и не укрепляет доверие, как рассказ про себя в обычный день. И раз уж так вышло, что сегодня воскресенье, то и рассказывать придется именно по него.

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

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

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

В рамках работы над open-source проектом работал над задачкой по генерации тем. То есть в проекте было несколько тем: одни темы имели светлый и темный режим, другие - только светлый или только темный. И задача сводилась к тому, чтобы сделать для всех тем светлый и темный режим.

Вот на скриншоте показаны несколько темных тем: Dracula, Solarized, Gruvbox, Monokai, Moonlight. В теории можно взять и инвертировать светлоту, получив тем самым светлую тему. В теории теория и практика не отличаются. На практике всё совсем наоборот 😀. Чтобы объяснить почему, полезно сначала посмотреть на то, как устроена работа с цветом в принципе.

Читать далее →

На днях с подачи приятеля подключил Garmin MCP к Claude Code. Опыт интересный. В первую очередь, потому что все эти данные мне и так известны и доступны в виде сухой статистики в Garmin Connect. Хотелось попробовать новый опыт взаимодействия.

Читать далее →

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

Читать далее →

Добавим к итогам в копилку итогов ещё один год. Об итогах 2024 можно почитать по ссылке.

Как обычно, мне изначально казалось, что тут и говорить не о чем. Пока не начал разматывать клубок воспоминаний.

Про бег

В этом году я бегал. Не так много, как в прошлом, но всё же.

— Участвовал в благотворительном забеге в Паличе
— Сбегал почти марафон в Иванице
— Был на Дрине
— Участвовал в ночном марафоне по городу
— А ещё сбегал ночной трейл на Фрушке
— Ещё была Белградская 10-ка
— И ночной трейл на Авале, который мы скорее прошли, чем пробежали, с сыном.

Личные проекты

— Летом сделал календари.

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

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

— Осенью запустил syn-co.me, который помогает координировать работу команды в разных часовых поясах. Писал о нём вот тут — Координатор по часовым поясам.

— Почти запустил, но ещё не совсем, STRATA. Проект пока в бете. Всё работает, но домен я ещё не покупал, и мелкие огрехи вроде оформления страницы «О проекте» требуют полировки.

Суть проекта — посмотреть на то, как тратится ваше личное время. Без давления, без громкого «будь продуктивнее, выше, сильнее». Просто честный взгляд на то, куда уходит день. В основе лежит методология PARA, точнее её часть — areas. День можно разбить на повторяющиеся действия, посчитать их и увидеть, из каких слоёв состоит ваш день, неделя, жизнь.

Приходите тестировать STRATA. Всё работает без регистрации и SMS. Но регистрация позволит хранить данные и пользоваться таймером с любого устройства.

Как обычно, много работал, а к концу года стал открыт к новым предложениям, возможностям и вызовам 😁.

Про увлечения

Много писал в блокнотик и иногда рисовал.

Про блокнот хочу сказать отдельно. В этом году я избавился почти ото всех электронных таск-трекеров и систем заметок — и заменил всё бумагой. За полгода исписал один блокнот и начал второй. Ещё вспомнил о своей любви к перьевым ручкам. Пользовался ими ещё в детстве: в старших классах у меня была перьевая ручка, которой я писал постоянно.

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

Ещё в этом году удалось перевезти гитару. Спасибо всем причастным — мы не виделись с этой крошкой почти три года.

Год снова получился насыщенным. Были и сложности, и радости, но главное — движение вперёд. Впереди новый сезон, новые старты и новые вызовы.

Друзья, с наступающим вас 🎄 Спасибо, что были рядом весь этот год — на забегах, в путешествиях, в комментариях и личных сообщениях. Каждая встреча, каждый разговор делали этот год особенным. Пусть в новом году у каждого из вас будет больше поводов для улыбок, интересных маршрутов и классных достижений. До встречи в 2026-м! ✨

Почта давно перестала быть простым (и возможно удобным) инструментом. В череде изменений интерфейса в Gmail, в чехарде перепрыгиваний с одной почты на другую, я перестал доверять почтовому сервису.

Даже если сервис предоставляет возможность подключения собственного домена, на сегодняшний день этого недостаточно.

Читать далее →