RU

Как устроен локальный шахматный помощник в браузере: Stockfish 18, Manifest V3 и веб-доски

Stockfish умеет находить сильные ходы. Но браузерному расширению ещё нужно понять, какая из нескольких досок относится к текущей партии, дождаться с…

StockfishManifest V3расширения для браузеровGoogle ChromeJavaScriptшахматный помощникподсказки ходовшахматный движокшахматный читChessNavio
Habr
RU

Платформер в стиле DOOM: портируем старую курсовую на чистый JavaScript

Несколько лет назад у нас с одногруппником был зачёт по C++, и вместо того чтобы сделать что-то скромное (например, «Калькулятор» или «Генератор пар…

JavaScriptCanvasDOOMплатформерSFMLC++портирование кодаигровая физикарейкастингruvds_статьи
Habr
RU

От клика до железа: хроника одного запроса. Часть 2

В первой части мы заставили кнопку на веб-странице запустить локальный exe-файл через расширение Chrome и Native Messaging Host. Теперь усложним зад…

Chrome Native Messagingрасширения ChromeJavaJavaScriptGraalVMconnectNativeService WorkerManifest V3Native ImageWindows
Habr
RU

Как я собрал браузерный хоррор на Three.js: GLB-контракт, аномалии и PS1-рендеринг для слабых устройств

Как я сделал браузерную 3D-игру на Three.js и Vue: система аномалий, GLB-сцена, PS1-рендеринг и оптимизация под слабые устройства. Читать далее

three.jswebglJavaScriptTypeScriptVue.jsblenderglTFРазработка игрбраузерные игрыоптимизация производительности
Habr
RU

Как я пытался сделать стратегию из котов в стиральных машинах — и почему правила оказалось сложнее написать, чем код

Я сделал браузерную стратегию про котов в стиральных машинах и обнаружил, что пересчитать поле гораздо легче, чем объяснить человеку,…

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

Проекты Node.js. Создание реальных веб-приложений и API для бэкенда

Интернет переполнен руководствами по созданию простых веб-серверов на Node.js. И сегодня их не меньше, чем пять лет назад. Такие примеры хороши для…

NodeJSJavaScriptВебРазработкаБэкендпрограммированиебхвкнигитехническая литература
Habr
RU

Три разных номера из одной книги — и все проходят контрольную цифру

У EAN-13 есть контрольная цифра, и из этого обычно делают вывод: раз проверка сошлась, номер прочитан верно. Вывод неверный. Я получил с одной книги…

штрихкодEAN-13GS1контрольная цифрараспознавание кодовQRкамераJavaScriptбраузер
Habr
RU

Объекты в JS не бесплатные

Поговорим про микро-оптимизацию. Про, казалось бы, самую безобидную вещь: обычный {} . [object Object] выглядит почти бесплатной абстракцией. Создал…

JavaScriptNode.jsV8hidden classesinline cacheobject shapeJIT-компиляцияоптимизация производительностимикробенчмаркиdictionary mode
Habr
RU

Как гуманитарий без опыта в кодинге собрал инди‑игру с AI‑агентом за полтора месяца

От концепт-дизайна велосипедного магазина до релизной web-игры на GitHub Pages — и почему документация оказалась важнее промптов. Читать далее

AI-агентыискусственный интеллектразработка игринди-игрыгеймдизайнproduct designvibe codingGitHub PagesJavaScript
Habr
RU

Zero на Three.js: инженерный разбор интерактивного сайта

Разбираем, как BUNQ LABS сделала zero.university: виртуальный скролл, шейдеры, KTX2/DRACO, адаптивное качество и загрузка текстур без фризов. Провер…

JavaScriptВеб-разработкаЛучшая практикаПроизводительностьHTMLДизайн интерфейсов и UXФреймворки и библиотекиФронтендСтатьи
Tproger
RU

Модель исполнения JavaScript по спецификации ECMAScript: call stack, контексты, окружения и замыкания

Я довольно долго был уверен, что понимаю, как работает call stack. Ну а что там понимать? Положил кадр, снял кадр, LIFO. Потом открыл спецификацию.…

JavaScriptECMAScriptexecution contextконтекст выполнениязамыканияобласть видимостиECMA-262call stackevent loopлексическое окружение
Habr
RU

Один поток, а всё успевает: как работает цикл событий в JavaScript

Promise , setTimeout и async/await часто работают совсем не в том порядке, которого ждёшь по коду, а тяжёлая синхронная функция способна заморозить…

цикл событийJavaScriptасинхронностьстек вызововмикрозадачимакрозадачипромисыsetTimeoutWeb Workers.
Habr
RU

React-паттерн, который все используют, но он убивает производительность

Почему React.memo перестаёт работать из-за inline-пропсов и как это исправить. Разбираем на примере со 200 строками и замерами. — Читать дальше « Re…

JavaScriptВеб-разработкаОптимизацияПроизводительностьTypeScriptReactReactJSФронтендСтатьи
Tproger
RU

Прототипирование фронта в 2к26 от системного аналитика

Раньше для согласования интерфейса я собирал макет в Figma, описывал каждое поле, отдавал его дизайнеру, а потом отдельно объяснял логику фронтенд-р…

системный аналитикпрототипирование интерфейсоввайбкодингискусственный интеллектLLMFigmaHTMLCSSJavaScriptтребования
Habr
RU

Как исправить hydration-ошибки RSC в Next.js: практический гид

Разбираем, почему возникают hydration mismatches в React Server Components и Next.js App Router, и как находить, исправлять и предотвращать их в pro…

JavaScriptВеб-разработкаЛучшая практикаПроизводительностьОтладкаTypeScriptReactReactJSФронтендСтатьи
Tproger
RU

P.S.Euclid — GeoGebra + Desmos + то, что сам хотел (Plane + Stereo, Euclid)

P.S.Euclid — это браузерное математическое приложение, в котором графики, динамическая геометрия и 3D-построения объединены в одной среде. В статье…

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

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

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

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

Кнопка «наверх» в Django: почему в проде это уже не три строки JavaScript

Как добавить кнопку «наверх» в Django-сайт и Django Admin: настройка, CSP, доступность, мобильная версия и работа рядом с cookie-баннерами. — Читать…

JavaScriptPythonCSSjQueryHTMLGitHubDjangoMITФронтендПриложениеdevДизайнФишки PythonCDNСтатьи
Tproger
RU

Flappy Bird: делаем игру сложнее и добавляем автопилот на чистой математике

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

Flappy BirdCanvasJavaScriptавтопилотматематический переборретро-игрыгеймдевбот без нейросетиruvds_статьиФаби
Habr
RU

Pivot grid без сторонних библиотек: кэш, производительность и связанные гриды

Расскажу, как и почему я в какой-то момент решил написать собственный pivot grid — без сторонних библиотек, на чистом JavaScript и DOM. И что из это…

pivot gridсводная таблицаJavaScriptDOMкэширование данныхклиентская оптимизациясвязанные гридыGROUP BYcolumnar storagedictionary encoding
Habr
RU

Из одного слова целый бренд. Как развивался Колорит

Несколько дней назад я сделал маленький инструмент для себя. Надоело каждый раз начинать новый проект с колеса оттенков: крутишь Coolors, листаешь P…

Node.jsJavaScriptDeepSeekCanvas APIAIДизайнВеб-разработкаИнструменты разработчикаPrompt Engineeringfree
Habr
RU

Как я сделал генератор палитр на Node.js + DeepSeek за два вечера — и что из этого вышло

Как-то вечером я поймал себя на том, что трачу по 20 минут на поиск цветовой палитры для каждого нового проекта. Coolors, Adobe Color, случайные пин…

Node.jsJavaScriptDeepSeekCanvas APIAIДизайнВеб-разработкаИнструменты разработчикаPrompt EngineeringOpen Source
Habr
RU

Что брать на новый проект: валидный дефолт (React) или гринфилд ($mol)

Недавно под постом в канале MoscowJS разгорелся спор — со мной и организатором насчёт смола. Даже не столько насчёт смола, сколько в целом: стоит ли…

$molфронтендJavaScriptTypeScriptReactVueDSLреактивностьview.treeновые фреймворки
Habr
RU

Операция Endgame отключила 106 серверов SocGholish и очистила почти 15 000 сайтов на WordPress

Международная операция Endgame вывела из строя 106 серверов SocGholish и очистила 14 971 заражённый сайт на WordPress. Разбираем угрозу и защиту. —…

JavaScriptБезопасностьWordPressХакерыИнформационная безопасностьКибербезопасностьНовости
Tproger
RU

Как сделать 3D-вращение изображений при скролле: разбираем эффект от Codrops

Разбираем, как устроен эффект 3D-вращения картинок из свежей статьи Codrops. Примеры кода на GSAP, Lenis и CSS-трансформации. — Читать дальше « Как…

JavaScriptВеб-разработкаCSSДизайн интерфейсов и UXФронтендСтатьи
Tproger
RU

Как я написал «Обратную змейку» на чистом Canvas

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

Обратная змейкаCanvasJavaScriptпиксель-артзмейкаретро-игрыгеймдевадаптивный дизайнмобильные игрыruvds_статьи
Habr