Планы на осень

·

Кажется, планирование осенних стартов становится традицией. В прошлом году уже писал аналогичный пост. В этом году

— 5 сентября — найковский забег в Белграде. 10 км. Бегу третий раз и всё ещё считаю его классным.
— 18 октября — полумарафон в Апатине. Там будут доступны 10 и 21 км. Я планирую сбегать половинку, но если кто-то хочет, можно сбегать и 10-ку.
— 31 октября - Эчка. Если честно, пока под вопросом. Разве что с кем-то за компанию и если наберется группа желающих. Забег приятный, всё по-домашнему. Бегал его несколько раз и даже писал о нем :)
— 22 ноября — ультра 50 км. Тут "сам сделал, сам побежал".

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

Зачем нужна компания

·

Вчера надо было сбегать легкий кросс 10 км. Еще утром решил отложить на вечер. Работа не пыльная, сбегал и можно спать. Ближе к вечеру написал приятель "надо 16 сбегать, давай вместе?". Давай. Пока бежали, собрали еще несколько человек по пути. В результате мы отлично провели время. Хотя утром это выглядело как просто еще одна пробежка.

К чему я это? К тому что в компании всегда веселее. Даже если вы бегаете сами по себе и считаете, что вам и так нормально, попробуйте побегать с кем-то вместе. Большинство из нас, кстати, недооценивает, насколько сильно компания влияет на то, будете ли вы стабильно тренироваться.

Примерно пару лет назад мне было не с кем тренироваться. Был отличный план, грандиозная цель, несколько отличных стартов. А вот компании не было. И это сильно влияло на мотивацию выходить из дома, особенно в холодное время года. Летом и осенью еще терпимо — солнышко и зеленая трава делают своё дело. А потом наступает декабрь. И там уже нет много солнца. А если выходить на тренировку вечером, то холод и ветер вынимают всю душу. От одной мысли хочется свернуть всё мероприятие и пойти домой.

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

Если хотите попробовать групповые тренировки, напишите мне в личку @denisfl

Реактивность вместо ручной работы с DOM: те же задачи на чистом JS и на Micra

·

На чистом JS интерактив делается руками: находишь элемент и меняешь его — переключаешь класс, ставишь атрибут, вписываешь текст. Для одной кнопки так и надо.

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

Реактивность меняет направление. Ты не проталкиваешь изменения в DOM по шагам — ты описываешь, что от чего зависит, и трогаешь только состояние. DOM подстраивается сам. Micra — небольшая библиотека ровно про это, поверх готового серверного HTML. Она ничего не заменяет и ни на что не претендует, просто закрывает нишу, где сервер уже отдал разметку, а на клиенте нужно немного интерактива.

Ниже — несколько одинаковых задач, каждая дважды: на чистом JS и на Micra. Разница в строчках будет, но интереснее другое — момент, когда ручная слежка за DOM перестаёт окупаться.

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

Micra + htmx: HTML по проводу и локальное состояние рядом

·

Вчера релизнул версию 2.7.0 Микры и изменения были связаны с улучшенной работой с htmx. По этому поводу и статья.

htmx и Micra.js хорошо уживаются на одной странице, потому что отвечают за разное. htmx приносит готовый HTML с сервера в ответ на действие — клик, сабмит, таймер. Micra держит на этом HTML состояние, которое серверу знать незачем: открыт ли дропдаун, что набрано в неотправленном поле, какая вкладка активна. Это живёт в браузере, и запрос ради этого не нужен.

Чем хорош htmx

Серверный UI браузер умел всегда, но только через два элемента: ссылка шлёт GET, форма — GET или POST, и ответ в обоих случаях заменяет страницу целиком. htmx распространяет ту же механику на всё остальное — запрос может слать любой элемент по любому событию любым HTTP-методом, а ответ заменяет не страницу целиком, а указанный кусок DOM.

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

Почему я сделал Micra

·

Я помню время, когда jQuery стоял почти на каждом сайте. Тогда еще не было фреймворков и jQuery был простым способом дотянуться до DOM: навесить обработчик, что-то показать, что-то спрятать, дёрнуть запрос. Тогда это решало большинство задач. Потом фронтенд стал сложнее. Во многом по делу, потому что приложения выросли, и React, Vue, Svelte выросли вместе с ними. Но такая сложность нужна не всегда.

Осталось много проектов, где сервер уже отдаёт готовую HTML-разметку, а на клиенте требуется лишь немного реактивности: открыть модалку, обновить счётчик, отфильтровать таблицу, переключить вкладку. Разворачивать ради этого полноценный фреймворк со сборкой и роутингом часто не хочется. А писать на чистом JavaScript быстро становится неудобно, когда нужно отслеживать состояние и синхронизировать его с DOM.

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

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

Micra.js под капотом: как устроен реактивный фреймворк

·

Это длинный текст про то, как изнутри устроена Micra.js — маленькая библиотека, которая добавляет реактивность к HTML, отрендеренному на сервере. Я написал её, чтобы закрыть конкретную нишу: страницы и админки, где сервер уже отдаёт готовую разметку, а на клиенте нужно лишь немного интерактивности — переключить вкладку, открыть модалку, отфильтровать таблицу, сходить за данными. Раньше для этого тянулись к jQuery, потом к Alpine. Micra — это попытка дать тот же «сахар», но предсказуемо, типизированно и с учётом Content-Security-Policy.

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

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

Релиз Micra.js 2.5.0

·

Пару недель назад я писал, что у библиотеки появился второй читатель — языковая модель. Тогда я думал, что главная задача — научить LLM правильно её готовить. Но потом решил, что не менее полезно послушать, что LLM думает о самой библиотеке.

Я скормил llms.txt другой модели и попросил разобрать: чего не хватает «идеальному фреймворку для тех, кому React — оверхед». Часть идей взял на заметку. Примерно тогда же я доводил до конца PR с Micra в js-framework-benchmark — один из самых авторитетных бенчей JS-фреймворков, где рядом React, Vue, Svelte, Solid и другие. При ревью этого PR его автор указал на проблему, которая пересеклась с одним из пунктов от модели.

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

U50 Club

20260611_112458_2af53a.webp

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

Вчера вот создал чат. https://t.me/+UM9jvgz6bollNjJi Сегодня набросал манифест. Завтра сделаю еще шажок и напишу анонс, который можно будет пошерить в разные чаты. Вот так и добежим до финиша :)

Если хотите присоединиться, присоединяйтесь. Хоть я и считаю, что чатов и так много, +1 тематический чат нужен, чтобы быть в курсе конкретного события. В нем можно участвовать напрямую или косвенно:

— бежать полную или часть дистанции
— сопровождать
— просто поделиться инфоповодом с друзями


Манифест

Это не соревнование друг с другом. Единственный человек, с которым вы можете соревноваться — вы сами.

Медалей не будет. Если сможем найти спонсоров, можно будет подумать о каких-то более важных вещах типа пунктов питания. Но пока рассчитывать придется на себя.

Финиш — это точка на карте, к которой мы идём вместе. Каждый своим темпом, каждый со своим внутренним диалогом, но в одном направлении.

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

Предварительная дата — 22 ноября. Маршрут пока в разработке.

Micra.js, две недели спустя

·

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

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

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

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

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