JavaScript *

Мы делаем ЖМЯК — Свою игру в браузере: табло на телевизоре или ноутбуке, а кнопки — телефоны игроков. Ничего не нужно ставить, гости заходят по QR-коду и вводят только имя.

Главное в такой игре — кнопка. Вопрос прочитан, все тянутся к телефонам, кто-то нажал первым — он и отвечает. И вот тут быстро выясняется неприятное: в браузерной игре первым часто оказывается не самый быстрый игрок, а тот, у кого быстрее интернет.

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

В прошлой статье мы обсуждали, почему меня (дейтинг-аутстаффа) никогда не заменят нейросети. FAQ для погружения в мой лор там тоже есть.

А в этой статье я выкладываю свой интерактивный калькулятор для оценки вашей дейтинг-ликвидности: https://gcodegspot.github.io/dating-calculator-2.0/

Дисклеймер: ваш результат не означает вашу ценность. Это лишь набор цифр, определяющий, насколько вам сложно в онлайн-дейтинге.

Калькулятор создан в увеселительных целях. Реальный дейтинг беспощаден.

После успешного origin trial API HTML-in-Canvas официально вышел в стабильной версии Chrome 157. Он объединяет интерактивность и доступность DOM с производительностью и попиксельным управлением <canvas>. Так возможности браузера можно использовать вместе с графикой canvas, ускоренной на GPU.

Если вы делали AI-фичу на Vue, то, скорее всего, сталкивались с одним и тем же: большинство готовых инструментов для LLM-интерфейсов написаны с прицелом на React, а во Vue их приходится адаптировать или писать стриминг, tool calling и состояние чата вручную. Я сделал vue-llm — open-source библиотеку, которая закрывает это для Vue 3, Nuxt и даже Vue 2.7.

Сразу ссылки, чтобы можно было пощупать:

• Песочница без API-ключа (модель скачивается и работает прямо в браузере на WebGPU): https://vue-llm.js.org/ru/playground

• Документация на русском: https://vue-llm.js.org/ru/

• GitHub: https://github.com/dadashi44/vue-llm

• npm: npm i vue-llm

Сделал в браузере голографический верстак: на обычной вебке разбираю турбину, собираю молекулы и достаю органы из 3D-модели человека голыми руками, без шлема и датчиков глубины. Рассказываю, во что упирается hand tracking на простой камере и какие решения сработали.

Я сам рисую интерфейсы и сам их верстаю. У меня есть библиотека стилей pbstyles: цвета, размеры и шрифты в ней описаны дизайн-токенами. Тему для Tailwind я хотел собирать из этих токенов, а не переписывать руками после каждой правки в Figma. Так появился пакет tailwind-dictionary.

Он берёт токены в JSON и собирает из них тему Tailwind CSS. Светлая и тёмная тема собираются из тех же файлов.

Пакет пригодится, если у вас уже есть токены, но переходить на Tailwind не хочется из-за того, что тему придётся вести отдельно. Или если вы уже на Tailwind и хотите выгружать переменные из Figma и сразу получать тему.

Начиная с React 18 рендер можно прервать: срочные обновления обгоняют несрочные, даже если React уже взялся за несрочное. Если задуматься, вопросов много:

Как React посреди рендера отдаёт поток браузеру, чтобы тот обработал ввод, а потом продолжает с того же места?

Почему до React 16 он так не умел?

Кто решает, какие обновления срочные, и почему большинство рендеров не прерывается вообще?

Что происходит с незакоммиченными обновлениями, когда пришло что-то срочное?

И главное, как обновления, которые выстраиваются в очередь, не путаются в порядке, если срочное пришло позже, но должно обогнать несрочные?

Всё началось с того, что я в очередной раз копировал описание задачи из YouTrack в Claude Code. Потом комментарии к ней. Потом ещё один комментарий, который кто‑то оставил, пока я копировал первые. Потом ждал, пока агент напишет код, открывал PR, возвращался в задачу, вставлял ссылку, менял статус на Fixed — и шёл за следующей.

В какой‑то момент я понял, что из всей этой цепочки самая бесполезная её часть — это я. Агент умеет писать код, YouTrack умеет хранить задачи, а я работаю буфером обмена с ногами.

Решение вроде бы очевидное: дать агенту доступ к трекеру через MCP, и пусть сам читает, сам пишет, сам двигает задачи. Ну чтож, давайте подключим.

Нас двое. Один недавно искал работу и ходил по собеседованиям, второй сам собеседует кандидатов и раз за разом видит, как люди спотыкаются на одних и тех же задачах: debounce, глубокое сравнение объектов, форма с валидацией.

Готовиться к таким задачам на русском оказалось почти негде, особенно если вы пишете на JS или TS не только во фронте, но и на бэке. Поэтому мы сделали ПаровоJSик. Под катом рассказываем, что внутри, как тесты запускаются прямо в браузере и что будет дальше.

Во время разработки библиотеки morphing-scroll я пришёл к необычному способу организации локальных данных в React-компоненте. Это не было заранее придуманной архитектурой. Я экспериментировал с обновлениями, постепенно убирал лишние состояния и в какой-то момент получил код, который оказался заметно проще прежнего. Для меня это стало настоящим открытием.

Помните Size of Life от Нила Агарвала? Листаешь вправо, и рядом с каждым существом появляется следующее, побольше. Мне захотелось такого же, но про космос: начать с крошечного астероида и пролистать всё до самой границы того, что мы вообще можем увидеть.

Получилось 79 объектов и 24 порядка величины, от астероида Бенну диаметром 490 метров до наблюдаемой Вселенной в 93 миллиарда световых лет. Всё рисуется в реальном времени прямо в браузере, а под капотом есть трассировка лучей, ray marching, реальные карты поверхностей от NASA и генеративная музыка. Ниже расскажу, как это устроено и на какие грабли я наступил.

Мои хобби-проекты - небольшие расширения для Хрома и сайты-микросервисы. Одно из расширений, PDF to PNG, внезапно забралось на первое место в поиске Chrome Web Store по запросу “pdf to png” (ну, почти всегда), и им пользуются аж под 500 человек - это потрясающе!

Раз PDF в картинки получилось, немедленно загорелось сделать и наоборот - картинки -> PDF, только ещё круче: чтоб работало через правый клик по картинке на любой странице, чтоб была лёгкая(!) возможность настроек - и чтоб всё прям локально в браузере и картинки при этом никуда не загружались!

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

Как минимум два месяца этот редактор показывал «Сохранено» и не сохранял ни символа. Сама ошибка глупая, на неё хватит одного абзаца. Хуже, что очевидное исправление уничтожило бы статьи. По дороге к правильному нашлись ещё три ловушки. Санитайзер nh3 тратит почти минуту на 320 КБ разметки. Одно правило HTML5 превращает 99 КБ входа в 56 МБ выхода. А SELECT … FOR UPDATE в SQLAlchemy берёт блокировку и при этом отдаёт старые данные.

Месяц назад я рассказывал здесь про расширение, которое сделал для себя. С тех пор его поставили около двухсот раз, и мне написали люди, у которых что-то не работало или чего-то не хватало. Пишу вторую часть про сам продукт, без разбора багов: что оно делает сейчас, как с ним начать и что я знаю про него плохо. Сразу главное ограничение, чтобы не тратить ваше время: нужен Google Chrome 138 или новее на компьютере. На телефоне его не будет: там нет встроенных моделей. В Brave встроенные ИИ-функции по умолчанию выключены, так что я говорю именно про Google Chrome.

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

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

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

Я преподаю детям программирование и вижу одну и ту же картину: на обычных тренажёрах печати дети быстро устают, начинают отвлекаться, а некоторые просто просят выключить. Тренажёра для детей с дислексией я не нашла ни одного. Ждать, пока его кто-то придумает, я не стала и сделала свой — Клавитраж.

Идея пришла не только с занятий: у меня самой дислексия, и именно клавиатура когда-то помогла мне справиться с письмом. Как я живу с этим и почему печать стала для меня спасением, расскажу в отдельной статье.

Здесь — о том, что я придумала, что из этого сработало, а в чём я ошиблась.

Как я за неделю сделал хэллоуинский ивент для браузерной драки Brawl Town: сезон, который включается и выключается сам по календарю, протокол, на котором старые и новые клиенты живут на одном сервере, Тыквенный король со скелетной анимацией в Pixi и шагом без скольжения, проба баланса на Go и нагрузочный тест на 2000 игроков на одной улице.

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

В июле 2026 года в PNAS вышла статья Кевина Хаталы и соавторов про следы на берегу древнего озера в северной Кении. Около 1,4 млн лет назад там прошли восемь парантропов вида Paranthropus boisei. От этого вида до сих пор находили в основном черепа с огромными челюстями и зубами, а ниже шеи почти ничего. По отпечаткам стоп авторы оценили рост до 1,8 м и массу около 75 кг. Это заметно больше, чем получалось раньше по редким костям.

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

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