Canvas *

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

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

Привет, Хабр. Расскажу, как устроен мой сайд-проект — пиксельная аркада Прикольня, где у каждой компании друзей своя 3D-квартира с мебелью, аватарами и контентом на стенах. Под капотом — Next.js 16, Three.js через React Three Fiber, WebSocket-мультиплеер и PWA. Без единого .glTF файла — вся мебель процедурная.

В последние годы спрос на 2D/3D-инструменты в веб-сервисах растет довольно стремительно, технологии развиваются, появляются новые подходы и библиотеки — а вместе с ними растёт и путаница: что где использовать, где грань между похожими решениями и почему у разработчиков часто возникают противоположные мнения?

Так что я решила устроить небольшой тест 2D-решений: посмотреть, на что они реально способны, понять, почему результаты местами вызывают большое удивление, и ответить себе (и вам) на вопрос: а WebGPU вообще зачем?

Спойлер: всё далеко не так очевидно, как кажется.

Обзор на браузерные API, которые стали Widely available в октябре 2025. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде.

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем. 2.5 года назад также каждый месяц выходили новые фичи в браузере, а вот их уже пора начинать применять.

На прошлой неделе я опубликовал запутанный код на Python, который генерирует мозаику Пенроуза. Сегодня я объясню базовый алгоритм, лежащий в основе этого скрипта на Python, и поделюсь его не запутанной версией.

Уууу, давно хотелось чего-то простого, смешного и без лишних заморочек. Чтобы мемов побольше и можно было с пацанами погонять. В итоге получились "TANKOLINI NAPIERDOLKI".

Старый добрый монохромный экран, тетрис, мультиплеер и редактор карт для каждого. С другой стороны — всё на канвасе, с вручную отрисованными пикселями, без всяких ассетов и движков. Python на бэке, PostgreSQL для карт и Redis для игровых комнат. Обо всём этом — в статье.

GSAP – одна из самых популярных JavaScript-библиотек для создания анимаций. Её используют как новички, так и опытные front-end-разработчики. В этой статье я хочу рассмотреть несколько примеров ее применения – от самых простых до менее очевидных.

Когда дело доходит до создания сложных и высокопроизводительных приложений во Flutter, работа с Canvas может стать настоящим вызовом. В этой статье мы погружаемся в тонкости рендеринга динамичных сцен, от оптимизации GPU и пакетирования команд до продвинутых техник работы с пространственными данными. Мы рассмотрим методы, которые позволят вам создавать плавные и визуально насыщенные интерфейсы, даже когда сцены становятся всё сложнее. Обсудим, как правильно выбрать стратегию рендеринга, оптимизировать отрисовку и внедрить систему камеры для масштабируемых приложений.

Если вы стремитесь улучшить производительность вашего Flutter-приложения, эта статья поможет вам освоить ключевые техники и подходы.

Всем привет! Меня зовут Игорь, и в свободное время я занимаюсь созданием игр.

Вчера я выпустил свою первую публичную игру «Дом до небес». Это простая в которой нужно ставить блоки этажей, чем ровнее тем лучше, этому мешает раскачивающийся крюк, и шатающееся здание. Игра похожая на ту, в которую я играл в детстве, когда телефоны ещё были кнопочными.

Ссылка на игру

Виртуальное зеркало: Создала сама, делюсь с вами!

Привет! Меня зовут Аня, и я фанат e-commerce. В прошлый раз мы говорили о визуальном поиске, а сегодня я хочу рассказать о своей гордости — библиотеке виртуального зеркала.

Ещё год назад, когда готовые решения были редкостью, я решила выяснить, как работает виртуальная примерка. Результат? Моя собственная библиотека, которая позволяет примерить косметику и аксессуары в реальном времени или на фото.

Хочу поделиться идеей, как сделать признание в любви особенным, запоминающимся и искренним, не прибегая к классическим цветам или банальным текстам в телеграме/вацапе на миллиард строк. Я расскажу про интерактивный веб-сайтик, который можно создать своими руками, чтобы передать свои чувства. Это не просто слова, а целая история, которая разворачивается на экране, погружая человека в атмосферу тепла и эмоций. Код, который я приложил, пример такого проекта, и сейчас я объясню, как он работает и почему это может стать идеальным способом признаться в любви.

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

Всем привет! Меня зовут Виген Мовсисян, я Frontend-разработчик в QIC digital hub. В этой статье я расскажу, как мы внедрили технологию Canvas, какие задачи он помогает решать, что уже успели сделать и какие у нас планы на будущее.

Материал основан на моём докладе с QIC Tech Meetup, полную запись вы можете найти на YouTube.

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

*В текущей версии отсутствует кнопка «Назад» — для возврата в предыдущий раздел воспользуйтесь стандартной кнопкой браузера. 

Итак, начнём погружение в удивительный мир возможностей Canvas.

Microinteractions play a huge role in UX design despite being labelled “micro”. They include all the small details you can find in a software product, i.e. animations, emotive reactions, clicks, vibrations, etc. Not only do they make it more interesting and joyful for users to interact with a product, they also help ease the navigation process and make it more intuitive by providing important information. Which types of microinteractions can be used in apps, what makes them a vital part of software products, how to implement them correctly and which common mistakes to avoid when designing small details? 

Types of microinteractions

Однажды, в курсе «Математические модели физической реальности» я предложил студентам «поиграть в Галилея». То есть, повторить его натурные эксперименты с падающими телами и определить из экспериментов величину ускорения свободного падения.

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

Если вы сейчас не в Италии, то можете «поиграть в Галилео Галилея» (онлайн) с помощью компьютерной модели, которая воспроизводит падение экспериментального тела за счёт численного интегрирования дифференциальных уравнений движения. Модель учитывает действие сопротивления воздуха.

Этой статьей я хотел бы начать серию обучающих материалов, в которой поделюсь всем, что мне известно про редактирование текста и организацию работы в Obsidianи с Markdown файлами. 

Покажу интересные способы использования markdown заметок для решения разных задач.

Со времен появления скринсейвера «Ленты» (ориг. «Ribbons») на Windows 7, эта заставка была стандартом для всех моих рабочих мест, благо в новых версиях Windows (8, 10, 11) эта заставка остается и по сей день. Однако с момента «импортозамещения» десктопной Windows на десктопную Linux, особенно актуального с 2022 года, хотелось получить эту или хотя бы похожую заставку и на этой свобоной платформе. Но вот незадача — нормальный порт найти мне не удалось. Может, конечно, плохо искал (скиньте ссылку в комментариях, если кто‑то нашел что‑то работоспособное).

И тут на просторах github очень удачно нашелся вот этот репозиторий. Автор в canvas с использованием JS наваял на мой взгляд очень даже симпатичную анимацию по мотивам того самого скринсейвера «Ленты».

Причем он в README отметил, что пытался сделать из этой анимации PWA (Progressive Web App), но почему‑то у него ничего из этого не вышло, читай «failed». Вопрос, почему человек, наваявший такой годный «генератор лент», не смог в PWA, оставим за скобками.
А тут как раз я, начавший недавно по служебной необходимости, изучать всем известный фреймворк Electron для создания кроссплатформенных настольных web‑приложений... Чем не альтернатива PWA?

Причина написания сего опуса как и прежде — поделиться чем‑то, что делал для себя и ближайшего окружения, с теми, кому это может быть интересно.

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

Привет! Меня зовут Даша, я фронтенд-разработчик отдела спецпроектов в KTS.

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

Для каждой из перечисленных технологий я буду приводить пример использования анимации в реальном проекте.

Не так давно помогал брату сделать проект для курсовой. Необходимо было создать клиент - серверное приложение, и решено было создать небольшую браузерную игру с мультиплеером. Курсовая была сдана успешно, а у меня появилось желание сравнить различные возможные методы отрисовки изображений HTML5 Canvas, с целью найти оптимальные решения. Моё исследование было проведено из любопытства и не предлагает чего-то революционного, однако информация в статье может быть полезна, или, в крайнем случае, интересна.