Category : javascript

javascript
Как я собрал интерактивную черную дыру и квантовую лабораторию в стиле ЦУП 90-х на чистом JS

Вступление:Привет, Хабр! Я всегда любил физику и ретро-эстетику. Однажды мне захотелось сделать научно-популярный проект, который не просто показывает текст с формулами, а позволяет «покрутить» физику руками. Так появился ЦУП-7 — интерактивный пульт с рендерингом черной дыры на WebGL и пятью квантовыми экспериментами. В этой статье я расскажу, как устроен проект под капотом, с какими проблемами я столкнулся и почему решил отказаться от фреймворков. 1. Черная дыра: WebGL и Метрика ШварцшильдаГл…

  • вторник, 3 ноября 2026 г. в 00:00:07
javascript
SEO для сайтов на Next.js: почему страницы не попадают в индекс и что не видят Яндекс и Google

Я веду несколько сайтов на фреймворке Next.js, и по рабочим журналам на них чаще всего повторяются четыре ошибки: полная копия сайта на www, код 200 вместо 404 на несуществующих адресах, теги title и canonical не там, где их ждет робот, и лишние параметры в адресах. В статье пройду по пути страницы от её находки поисковиком до включения индекс:что получает робот и чем ответ сервера отличается от готовой страницы;как Google выполняет JavaScript и сколько страница ждет по замеру Vercel и MERJ;что…

  • вторник, 3 ноября 2026 г. в 00:00:06
javascript
Ваш профиль в дейтинге — это персонаж со статами. Вот почему мультипликативная RPG-механика честнее…

Представьте: вы создаёте персонажа в RPG. Сила 15, интеллект 18, харизма 16, то есть отличный набор. Вы входите в первую комнату, а там нужно пройти проверку ловкости. Ловкость у вас, к сожалению, 2, так что бросок оказывается провален. Всем фанатам Диско элизиума привет, кстати! Одним словом: вы умерли.Именно так и устроен онлайн-дейтинг.Только большинство людей убеждены, что играют по другим правилам, там, где высокая зарплата компенсирует плохие фотографии, а хорошее чувство юмора перевешива…

  • вторник, 3 ноября 2026 г. в 00:00:05
javascript
Цифровой аватар спортсмена: как я собрал работающий прототип на 3000 строк ванильного JS

экран «Обзор системы»Есть жанр проектов, где самое интересное — не то, что сделано, а то, что сознательно не сделано. Этот как раз такой.Речь о системе «Цифровой аватар спортсмена» (ЦАС): верифицированный профиль спортсмена, методическое ядро тренера, аренда методик с роялти, кабинеты спонсора и федерации. Звучит как очередная «экосистема», и на этапе презентации обычно всё заканчивается слайдами. Мне было интересно другое: собрать работающий прототип, в котором каждое заявленное утверждение мо…

  • понедельник, 2 ноября 2026 г. в 00:00:09
javascript
Климат-контроль esp32c3-webUI

Мини проект климат контроля температуры, влажности. Проект представляет собой автономный модуль климат‑контроля на ESP32‑C3, который считывает данные с AHT10 по I2C и передает их в браузер через WebSocket, работая как собственная точка доступа. Назначение проектаУстройство предназначено для мониторинга, регулировки и установки параметров  температуры и влажности в помещении и передачи данных в реальном времени через веб‑интерфейс. ESP32‑C3 выступает как автономный узел: он создаёт Wi‑Fi‑точку д…

  • понедельник, 2 ноября 2026 г. в 00:00:08
javascript
React Context без лишних ререндеров: подписка на отдельные поля

Знакомая ситуация: в контексте лежат два поля, скажем, name и age. Меняется age, и ререндерится компонент, который читает только name. У useContext нет селектора, как у useSelector в Redux: React сравнивает value провайдера целиком, а при каждом изменении это новый объект. Ни useMemo, ни React.memo тут не спасают.В статье — небольшой контекст, где компонент ререндерится, только когда меняется его собственное поле. И разбор, почему он устроен именно так:Почему через контекст стоит передавать не …

  • воскресенье, 1 ноября 2026 г. в 00:00:06
javascript
HTML-in-Canvas в Chrome 157: интерактивный DOM в 2D, WebGL и WebGPU

Эта статья перевод оригинальной статьи «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>. Так возможности браузера можно использов…

  • суббота, 31 октября 2026 г. в 00:00:06
javascript
Математика воронки в Тиндере: посчитай свою дейтинг-ликвидность в интерактивном калькуляторе

В прошлой статье мы обсуждали, почему меня (дейтинг-аутстаффа) никогда не заменят нейросети. FAQ для погружения в мой лор там тоже есть.А в этой статье я выкладываю свой интерактивный калькулятор для оценки вашей дейтинг-ликвидности: https://gcodegspot.github.io/dating-calculator-2.0/Дисклеймер: ваш результат не означает вашу ценность. Это лишь набор цифр, определяющий, насколько вам сложно в онлайн-дейтинге.Калькулятор создан в увеселительных целях. Реальный дейтинг беспощаден. Дейтинг как нел…

  • суббота, 31 октября 2026 г. в 00:00:05
javascript
Честная кнопка: как сравнить нажатия игроков, если у всех разный пинг

Мы делаем ЖМЯК — Свою игру в браузере: табло на телевизоре или ноутбуке, а кнопки — телефоны игроков. Ничего не нужно ставить, гости заходят по QR-коду и вводят только имя.Главное в такой игре — кнопка. Вопрос прочитан, все тянутся к телефонам, кто-то нажал первым — он и отвечает. И вот тут быстро выясняется неприятное: в браузерной игре первым часто оказывается не самый быстрый игрок, а тот, у кого быстрее интернет.В статье — как мы это чинили: синхронизация часов из уже существующего потока с…

  • суббота, 31 октября 2026 г. в 00:00:03