Эта статья перевод оригинальной статьи «HTML-in-Canvas in Chrome 157: Interactive DOM inside 2D, WebGL, and WebGPU».Также я веду телеграм канал «Frontend по‑флотски», где рассказываю про интересные вещи из мира разработки интерфейсов и AI.ВступлениеПосле успешного origin trial API HTML-in-Canvas официально вышел в стабильной версии Chrome 157. Он объединяет интерактивность и доступность DOM с производительностью и попиксельным управлением <canvas>. Так возможности браузера можно использов…
В прошлой статье мы обсуждали, почему меня (дейтинг-аутстаффа) никогда не заменят нейросети. FAQ для погружения в мой лор там тоже есть.А в этой статье я выкладываю свой интерактивный калькулятор для оценки вашей дейтинг-ликвидности: https://gcodegspot.github.io/dating-calculator-2.0/Дисклеймер: ваш результат не означает вашу ценность. Это лишь набор цифр, определяющий, насколько вам сложно в онлайн-дейтинге.Калькулятор создан в увеселительных целях. Реальный дейтинг беспощаден. Дейтинг как нел…
Мы делаем ЖМЯК — Свою игру в браузере: табло на телевизоре или ноутбуке, а кнопки — телефоны игроков. Ничего не нужно ставить, гости заходят по QR-коду и вводят только имя.Главное в такой игре — кнопка. Вопрос прочитан, все тянутся к телефонам, кто-то нажал первым — он и отвечает. И вот тут быстро выясняется неприятное: в браузерной игре первым часто оказывается не самый быстрый игрок, а тот, у кого быстрее интернет.В статье — как мы это чинили: синхронизация часов из уже существующего потока с…
Предыстория: откуда взялась идеяНас двое. Один из нас недавно искал работу и ходил по собеседованиям. Второй сам собеседует кандидатов и раз за разом видит одну картину, люди спотыкаются на одних и тех же задачах. Debounce, глубокое сравнение объектов, форма с валидацией. Задачи не сложные, но на собеседовании их надо написать руками, без автокомплита и без ChatGPT в соседней вкладке.Copilot и Cursor сейчас пишут код быстрее, чем успеваешь сформулировать задачу. Но на собеседовании их нет. Есть…
ymcp, или как подружить агентов с YouTrack, если ты не админВсё началось с того, что я в очередной раз копировал описание задачи из YouTrack в Claude Code. Потом комментарии к ней. Потом ещё один комментарий, который кто‑то оставил, пока я копировал первые. Потом ждал, пока агент напишет код, открывал PR, возвращался в задачу, вставлял ссылку, менял статус на Fixed — и шёл за следующей.В какой‑то момент я понял, что из всей этой цепочки самая бесполезная её часть — это я. Агент умеет писать код…
Начиная с React 18 рендер можно прервать: срочные обновления обгоняют несрочные, даже если React уже взялся за несрочное. Если задуматься, вопросов много:Как React посреди рендера отдаёт поток браузеру, чтобы тот обработал ввод, а потом продолжает с того же места?Почему до React 16 он так не умел?Кто решает, какие обновления срочные, и почему большинство рендеров не прерывается вообще?Что происходит с незакоммиченными обновлениями, когда пришло что-то срочное?И главное, как обновления, которые …
Я сам рисую интерфейсы и сам их верстаю. У меня есть библиотека стилей pbstyles: цвета, размеры и шрифты в ней описаны дизайн‑токенами. Тему для Tailwind я хотел собирать из этих токенов, а не переписывать руками после каждой правки в Figma. Так появился пакет tailwind‑dictionary.Он берёт токены в JSON и собирает из них тему Tailwind CSS. Светлая и тёмная тема собираются из тех же файлов.Пакет пригодится, если у вас уже есть токены, но переходить на Tailwind не хочется из‑за того, что тему прид…
Короче, мне всегда хотелось как в «Железном человеке»: протянуть руку, взять деталь прямо из воздуха и вытащить её из двигателя. Шлема у меня нет, перчаток с датчиками тоже. Есть ноутбук, встроенная камера и браузер.В итоге из этого получилась маленькая лаборатория. Двигатель разбирается на детали, из человека можно достать сердце и покрутить его, молекулу глюкозы собираешь из атомов пальцами. Видео с камеры никуда не уходит, всё считается в браузере на твоём же компьютере.Кода в статье не буде…
Если вы делали AI-фичу на Vue, то, скорее всего, сталкивались с одним и тем же: большинство готовых инструментов для LLM-интерфейсов написаны с прицелом на React, а во Vue их приходится адаптировать или писать стриминг, tool calling и состояние чата вручную. Я сделал vue-llm — open-source библиотеку, которая закрывает это для Vue 3, Nuxt и даже Vue 2.7.Сразу ссылки, чтобы можно было пощупать:Песочница без API-ключа (модель скачивается и работает прямо в браузере на WebGPU): https://vue-llm.js.o…