RU

Подмена камеры в Яндекс.Телемосте

Яндекс.Телепульт — расширение для Chrome, которое добавляет в Яндекс.Телемост то, чего мне не хватало на созвонах: исчезнов…

яндекс телемостchrome extensionmediapipegetusermediacanvascapturestreamweb speech apiweb audio apiвидеозвонкирасширение для браузера
Habr
RU

Не хочу грузить свои документы в онлайн-сервисы. Поэтому сжимаю PDF прямо в браузере

Нужно было загрузить на сайт посольства пакет документов одним PDF – свидетельство о рождении, дипломы, справки. Лимит – 1 МБ. Загружать сканы всех…

pdfсжатие pdfpdf.jscanvasприватностьофлайнghostscriptopen sourcejavascript
Habr
RU

Книга из переписки без сервера: canvas, jsPDF и брошюра для печати прямо в браузере

Мы делаем пет‑проект «Чатограмма», который считает статистику переписки: кто пишет первым, кто быстрее отвечает, в какие часы вы на с…

pdfcanvasjspdfweb workerimpositionприватностьintl.segmenterpwa
Habr
RU

Геометрический бум: как перестать бояться Canvas и начать рисовать интерфейсы

Обычно такие статьи начинаются с банальных вопросов по типу «Что такое интерфейс», «Что такое разработка», «Что такое проектирование». Суть в том, ч…

pythontkintercanvasинтерпретаторuiguireplaceпрокруткахолст
Habr
RU

1700 строк JS и ни одного видеофайла: как ИИ-агент снимает кино на Canvas и рендерит его в MP4

В этом минутном фильме нет ни одной картинки, видеофайла или сэмпла. Огонь, гравюру, 3D-сферу, пиксельную игру и музыку рисует и синтезирует один HT…

canvaswebglthree.jsweb audioffmpegplaywrightclaude codecodexии-агентымоушн-графика
Habr
RU

Калькулятор плитки: фото вместо цвета и 3D, который наконец не бесит

Всем привет, это третья часть, в которой пилю калькулятор плитки - tilely.ru . Получился довольно крупный патч, в основном вокруг 3D-режима, и там о…

калькулятор плиткиремонтплиткаобрезки3dthree.jsreactkonvacanvasdiy
Habr
RU

Написал JavaScript-парсер морских навигационных карт формата S-57: от hex-дампов до рендеринга в браузере

Год назад мне понадобился JavaScript-инструмент для работы с морскими навигационными картами формата S-57. GDAL — серверная библиотека на C, не для…

s57морские картыtypescriptopen sourceIHONOAAпарсерcanvas
Habr
RU

«Обратная змейка», часть 2: читаю комментарии, чиню баги и добавляю босса

Когда я выкладывал первую часть , я, если честно, рассчитывал на десяток лайков и тишину в комментариях: ну кто будет всерьёз разбирать змейку, слеп…

javascriptcanvasgamedevбраузерные игрызмейкаинди-разработкагеймдизайнhtml5баланс игрыпиксельная графика
Habr
RU

Марио про джуна: платформер на 40 КБ без файлов графики и бот, который проверяет каждый уровень перед выкладкой

Всем привет! Я фронтендер и по вечерам делаю пет-проект Workaem, агрегатор IT-вакансий. Как-то захотелось сделать рядом с ним что-нибудь несерьезное…

canvasпрограммированиепрограммистыпрограммирование игрjavascriptдизайнмини игрыразработка игрразработкаразработка приложений
Habr
RU

Мы измерили платный антидетект‑браузер: canvas совпадал с чистой машиной байт в байт. Потом сделали свой, открытый

Антидетект‑браузеры — инструмент, которым агентства ведут десятки рекламных кабинетов и аккаунтов маркетплейсов с одной машины: у каж…

антидетектfingerprintingchromiumcanvasopen sourcerust
Habr
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_статьи