RU

Калькулятор плитки научился ёлочке и плану всей квартиры — что поменялось за месяц

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

калькулятор плиткираскладка плиткиремонтплиткаобрезкиreactkonvacanvaspet-projectdiy
Habr
RU

Скролл-фильм на лендинге весил 84 МБ. WebCodecs ужал его до 18 — вот что сработало, а что нет

Скролл-фильм на лендинге — это обычно сотни WebP и десятки мегабайт. Рассказываю, как заменил секвенции кадров сырым H.264-потоком без контейнера и…

webcodecsh264ffmpegскролл-анимацияcanvas
Habr
RU

Как я запарился считать плитку для ванной и написал свой калькулятор раскладки

Затеял ремонт в ванной, дошёл до плитки — и тут понеслось. Санузел у меня Г‑образный, в углу венткороб, раскладку хочу диаг…

калькулятор плиткираскладка плиткиремонтплиткаобрезкиreactkonvacanvaspet-проектdiy
Habr
RU

Кадры вместо видео: как индустрия обходит вес scroll‑scrub анимаций

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

scroll-scrub анимацияcanvasimage sequencevideo currentTimeWebCodecsCSS scroll-timelineоптимизация анимациипокадровая анимацияпроизводительность фронтендаальфа-бленд
Habr
RU

Отпечатки браузера: что это такое и как работает? Переосмысление технологии

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

отпечаток браузерафингерпринтфингерпринтингфингерпринтыантидетект-браузерантидетект браузерантидетектcanvaswebgl
Habr
RU

Конвертируем цвета в JS со скоростью 6 миллиардов операций в секунду

В начале этого года я создал самую быструю JS-библиотеку для работы с цветом: парсинг различных форматов, конвертация в OKLAB/OKLCH, проверка попада…

JavaScriptWebGLGPUфрагментные шейдерыGLSLOKLCHпроизводительностьоптимизацияcanvascolordx
Habr
RU

Silicon Office: превратил свою команду ИИ-агентов в пиксельный офис из «Кремниевой долины»

Всем привет! Хочу поделиться выходным проектом, который вырос из чистой вкусовщины: мне надоело смотреть на бегущие строчки в терминале, и я сделал…

Claude CodeИИ-агентыLLMElectronnode-ptyxterm.jscanvasпиксель-артКремниевая долинаавтоматизация
Habr
RU

Canvas или SVG для карты офиса: как мы выбрали и справились с неочевидными граблями

Если к вам придут с задачей внедрения интерактивной карты офиса, какой рендер вы выберете? Canvas или SVG? Верхнеуровневый обзор скажет, что Canvas…

svgcanvasинтерактивные картыfrontendинтерактивная карта офиса на SVG
Habr
RU

Пишем ботов без ботов. Нахождения пути с помощью HPA* алгоритма

Пока все ставят капельницы с раствором нейронной сети, мы вспоминаем дедов и делаем так, как они завещали. Сегодня разберём, как превратить нескольк…

алгоритмыалгоритмы поиска путииерархический поиск путибекендразработка игрвеб-разработаcanvasботыигровые ботынейронные сети нас не заменят
Habr
RU

Чтобы не выглядело как пет-проект»: как я в одиночку сделал премиальный интерфейс кино-сервиса (с кодом)

В прошлой статье я рассказывал, каково в одиночку тащить фуллстек-проект, который разросся до кино-соцсети. В комментариях несколько раз спросили пр…

Next.jsReactCSSglassmorphismcanvasWeb PushVAPIDFastAPIпет-проектvibemuvik
Habr
RU

Flappy Bird: код веб-клона под микроскопом

В январе 2014 года мир сошёл с ума из-за игры, где нужно просто тыкать в экран. Flappy Bird приносила создателю $50 000 в день, пока он не удалил её…

Flappy Birdвеб-клонjavascriptбраузерная играДонг Нгуенретро-игрыигровой движокфизикаcanvasruvds_статьи