Моя история разработки инкрементальной игры о горнодобывающей промышленности Кузбасса с подробным разбором технической архитектуры, системы безопасности и монетизации.Игра на 80% сделана с помощью вайб кодинга, но это не так просто как звучит.💡 Идея проектаЯ родом из Кемеровской области (Кузбасс) - угольной столицы России. Регион известен своими месторождениями: угля, золота, редких металлов. Идея пришла простая: создать современную idle-игру про управление горнодобывающей империей, где все мес…
ElevenLabs выложила в открытый доступ проект Eleven Shopping - голосового агента, который превращает процесс выбора товаров и оформления заказа в диалог с ИИ. В основе - стек Next.js + React + TypeScript + Tailwind CSS и подключение к Shopify Storefront API через протокол MCP. Код доступен на GitHub.Что это за агентEleven Shopping - это не просто «говорящий чат-бот». Это реальный голосовой интерфейс к вашему интернет-магазину на Shopify, где взаимодействие происходит голосом, без кликов и форм.…
Всем привет! Сегодня я возвращаюсь с новой порцией TypeScript- и React-магии. Вместе разберем полиморфизм в React, а именно — паттерн as. Зачем он нужен, как его прикрутить без багов и почему это сделает ваши компоненты в разы круче. Как обычно — всё под катом.В каких случаях это нужноПредставьте, что вы сделали красивую кнопку Button. Всё летает, дизайнеры плачут от счастья. И тут приходит продукт-менеджер: «А сделай так, чтобы вот эта кнопка стала ссылкой на главную».«Не вопрос!» — говорите в…
Недавно мы переделали наши внутренние инструменты, визуализирующие компиляцию JavaScript и WebAssembly. При работе оптимизирующего компилятора Ion мы теперь можем генерировать интерактивные графы, демонстрирующие, как конкретно обрабатываются и оптимизируются функции.Вы можете сами поэкспериментировать с этими графами в оригинале статьи. Просто введите какой-нибудь код на JavaScript в функцию test, и наблюдайте за созданием графа. Также там можно щёлкать и перетаскивать граф, менять масштаб при…
Я построил полноценную образовательную платформу для изучения иврита — с интерактивными тренажерами, умным словарем на 4000+ слов и системой подписок. В статье рассказываю о нетривиальных технических решениях, архитектурных выборах и ошибках, которые пришлось исправлять по ходу.Демо: hebrewglot.com Стек: Next.js 15, TypeScript, PostgreSQL + SQLite, Stripe, NextAuth🎯 Предыстория: почему вообще это началосьЯ начал учить иврит и быстро столкнулся с проблемой: хороших онлайн-ресурсов на русском язы…
Часть 1. Создаем роутер и настраиваем webpack для поддержки ленивой загрузки страниц и их стилей.Часть 2. Создание реактивного хранилища.В этой статье мы рассмотрим основные подходы борьбы со сложностью с помощью веб-компонентов. Статья рассчитана на более-менее подготовленных читателей, знакомых с данной технологией - на тех, кто хотя бы читал соответствующие главы вот этого учебника , либо статьи на MDN. Ну или на тех, кто их собирается прочитать. Учебник Ильи я буду далее называть просто …
Пару недель назад, когда я писал пост The Hidden Cost of URL Design, мне нужно было добавить подсветку синтаксиса SQL. Я направился на веб-сайт PrismJS, пытаясь вспомнить, можно ли добавить его в качестве плагина. Меня утомило количество вариантов на странице скачивания, поэтому я вернулся к своему коду. Поискав в файле PrismJS, я нашёл в его начале комментарий, содержащий URL:/* https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+css-extras+markdown+sc…
Привет, Хабр! Я — Александр Дудукало, автор одноименного YouTube-канала. В прошлой статье мы разобрали ссылочный тип данных, который хранит не само значение, а ссылку на него в памяти. Сегодня используем полученные знания на практике и познакомимся с одной из самых важных концепций в JavaScript — callback-функциями. Подробности — под катом! Особенности функцийПрежде чем дать определение, хочу поделиться двумя важными фактами о функциях в JavaScript. С их помощью вы сможете лучше усвоить новую т…
Компонентно-ориентированный подход уже давно зарекомендовал себя как отличная практика разработки. Его массовая популярность пришла вместе с такими библиотеками, как React и Vue. Создавая компоненты, мы чётко разграничиваем логику, формируем зоны ответственности и эффективно боремся с дублированием кода. Обычно компонент отвечает за рендеринг HTML-разметки и динамически обновляет её в зависимости от своего состояния. Кроме того, ключевую роль играют механизмы контроля жизненного цикла, например…