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, листаешь Pin…

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
RU

Большой каталог «на почитать» про $mol, web и не только

Реактивность лучше MobX , виртуализация рендеринга «из коробки» , типизированные стили на TypeScript , локально-первая модель данных через CRDT — эти …

$molреактивное программированиеTypeScriptJavaScriptfrontendReactMobXVueCRDTlocal-first
Habr
RU

Фреймворк-независимые дизайн-системы: практический подход к веб-компонентам

Как построить дизайн-систему без привязки к фреймворку, используя веб-стандарты и веб-компоненты. Пошаговое руководство с примерами кода и документаци…

JavaScriptВеб-разработкаCSSHTMLДизайн интерфейсов и UXФронтендДизайнПереводы
Tproger
RU

Симулятор рисков для крипты: написал инструмент, который считает за меня размер позиции и стресс-тестирует портфель

Большинство трейдеров управляют рисками интуитивно. «Войду на 20% депозита, стоп поставлю пониже» — и пошёл. Исследование 500+ активных криптотрейдеро…

риск-менеджменткриптовалютатрейдингATRстресс-тестированиеDeepSeekJavaScriptбраузерное приложениеуправление капиталомалготрейдинг
Habr
RU

Как попасть во фронтенд и дойти до senior в ВК — интервью с Александром Ламковым

Фронтенд-разработка давно перестала быть просто «вёрсткой сайтов». Сегодня это сложная экосистема: фреймворки, state-менеджмент, TypeScript, оптимизац…

ФронтендReactJavaScriptTypeScriptКарьера в ITTailwindГеймдевВКCSSSenior
Habr
RU

Как TypeScript выводит типы переменных: разбор алгоритма

Разбираем двухфазный алгоритм вывода типовых переменных в TypeScript: сбор кандидатов, разрешение, вариантность, пересечения и NoInfer. Узнайте, почем…

JavaScriptЯзыки программированияКомпиляторыФункциональное программированиеTypeScriptСтатьи
Tproger
RU

Пора прощаться с ESLint? Как Oxlint меняет правила игры в JavaScript-разработке

Oxlint на Rust обгоняет ESLint в 50–100 раз по скорости и требует минимальной настройки. Разбираем бенчмарки и сценарии миграции. — Читать дальше « По…

JavaScriptВеб-разработкаИнструментыФронтендРазработкаСтатьи
Tproger
RU

Как правильно использовать поля HTML-форм: гайд для разработчиков

Разбираем типы полей HTML-форм, правила доступности, ARIA-атрибуты и лучшие практики. Узнайте, как создавать удобные и конверсионные формы для любых у…

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

Как добавить кнопку «Спроси о нас у ИИ» (Яндекс Алиса, ChatGPT, Claude и другие)

Новый тренд для сайтов - кнопка «Спросите ИИ о нас». Такие кнопки открывают Яндекс Алису, ChatGPT, Perplexity или другие ИИ-поисковики с заранее подго…

AI кнопкиChatGPTClaudeЯндекс АлисаJavaScriptтуториалинтеграцияфронтендвеб-разработкаURL-параметры
Habr
RU

Как я сделал игру «Найди 250 отличий» на чистом JS и выложил в Яндекс Игры: цифры, грабли и доход

Можно ли запустить казуальную HTML5-игру на чистом JS в Яндекс Играх, не зная геймдева и верстки? Спойлер: можно, но придется пройти через 2-3 месяца …

HTML5JavaScriptЯндекс Игрыразработка игринди-разработкапостмортемказуальные игрыпоиск отличийгеймдевмонетизация игр
Habr
RU

Новый Intl.DurationFormat привел к неожиданной ошибке приложения

В этой статье расскажу о свежем баге, который ронял один тип транзакций, пока остальные работали штатно. Если используете @formatjs /intl-durationform…

JavaScriptTypeScriptReactIntlDurationFormatfrontendотладкаполифиллплатёжные системыErrorBoundary
Habr