[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"{\n        \"footer\": {\n            \"legal\": *[_type == \"summary\"][0].legal[$locale],\n            \"links\": *[_type == \"link\"] {\n                \"label\": short[$locale],\n                \"to\": to\n            }\n        },\n        \"person\": {\n            \"title\": *[_type == \"summary\"][0].title[$locale],\n            \"description\": *[_type == \"summary\"][0].description[$locale],\n            \"image\": *[_type == \"summary\"][0].image.asset->url,\n            \"email\": *[_type == \"link\" && id == \"email\"][0].label[$locale],\n            \"phone\": *[_type == \"link\" && id == \"phone\"][0].label[$locale],\n            \"links\": *[_type == \"link\"].to,\n            \"workplace\": (*[_type == \"experience\"] | order(positions[0].duration.from desc) {\n                link,\n                \"logo\": logo[$theme].asset->url,\n                \"name\": name[$locale],\n                \"d\": positions[0].duration.from\n            })[0],\n            \"skills\": *[_type == \"skill\"]{\n                name\n            },\n            \"experience\": *[_type == \"experience\"] {\n                id, link,\n                \"name\": name[$locale],\n                \"logo\": logo[$theme].asset->url,\n                \"about\": about[$locale],\n                \"positions\": positions[]{\n                    \"name\": name[$locale],\n                    \"description\": description[$locale],\n                    \"skills\": skills[]->{\n                        name\n                    } | order(priority desc),\n                    duration,\n                } | order(duration.from desc),\n            } | order(positions[0].duration.from desc),\n            \"education\": *[_type == \"education\"] {\n                link,\n                \"name\": name[$locale],\n                \"faculty\": faculty[$locale],\n            } | order(year desc)\n        },\n        \"projects\": *[_type == \"project\"] {\n            id, priority,\n            \"name\": name[$locale],\n            \"thumbnail\": thumbnail[$theme].asset->url,\n            \"stack\": stack[]->{\n                name, type, color, priority\n            } | order(priority desc),\n            \"description\": description[$locale]\n        } | order(priority desc),\n    }\u002Fru\u002Fprojects\u002Fxlsft-pixelbattle-realtime-game":3,"mdc-qhrxfd-key":361,"*[_type == \"project\" && id == $id] {\n        \"seo\": *[_type == \"summary\"][0] {\n            \"title\": title[$locale],\n        },\n        id, links, tags, repo,\n        \"name\": name[$locale],\n        \"description\": description[$locale],\n        \"thumbnail\": thumbnail[$theme].asset->url,\n        \"logo\": logo[$theme].asset->url,\n        \"images\": images[].asset->url,\n        \"bg\": bg.hex,\n        \"about\": about[$locale],\n        \"stack\": stack[]->{\n            name, type, color, priority\n        } | order(priority desc),\n        \"status\": status[$locale],\n        \"copyright\": copyright[$locale],\n        \"related\": related[]->{\n            id, tags, repo, priority,\n            \"name\": name[$locale],\n            \"thumbnail\": thumbnail[$theme].asset->url,\n            \"description\": description[$locale]\n        }\n    }[0]\u002Fru\u002Fprojects\u002Fxlsft-pixelbattle-realtime-game":404,"$f36j46mfcx4l5o":434,"mdc-cemng6-key":438,"mdc--vuuodf-key":485},{"footer":4,"person":25,"projects":227},{"legal":5,"links":6},"Торговая марка **«Briskly»** №848501 является собственностью ООО «БРИСКЛИ» ОГРН 1187746690768 ИНН 9701114958  \n  \n  \nТорговая марка **«Ained»** №903277 является собственностью ООО «ЦИФРОВАЯ НЕДВИЖИМОСТЬ» ОГРН 1214800006035 ИНН 4826148336  \n  \n  \nТорговая марка **«Beget»** №738948 является собственностью ООО «Бегет» ОГРН 1077847645590 ИНН 7801451618",[7,10,13,16,19,22],{"label":8,"to":9},"Звонок","tel:79997506623",{"label":11,"to":12},"VK","https:\u002F\u002Fvk.com\u002Fxlsoftware",{"label":14,"to":15},"E-mail","mailto:dev@xlsft.ru",{"label":17,"to":18},"GH","https:\u002F\u002Fgithub.com\u002Fxlsft\u002Fxlsft",{"label":20,"to":21},"LI","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fxlsft",{"label":23,"to":24},"TG","https:\u002F\u002Ft.me\u002Fxlsoftware",{"title":26,"description":27,"image":28,"email":29,"phone":30,"links":31,"workplace":32,"skills":37,"experience":112,"education":222},"Senior Frontend-разработчик (Илья Торшин)","Senior Frontend-разработчик с 5+ годами опыта. Работаю с Vue, React и TypeScript, создаю масштабируемые интерфейсы и высоконагруженные приложения","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002Fa9d14382277c555ffed4089bca956e2329800ae4-400x400-webp.webp","dev@xlsft.ru","+7 (999) 750-66-23",[9,12,15,18,21,24],{"link":33,"logo":34,"name":35,"d":36},"https:\u002F\u002Fbeget.com","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002Fbc47e758e856369e51ddff54b10ecc8f9215b7dd-300x138-svg.svg","Beget","2026-04-23",[38,40,42,44,46,48,50,52,54,56,58,60,62,64,66,68,70,72,74,76,78,80,82,84,86,88,90,92,94,96,98,100,102,104,106,108,110],{"name":39},"js",{"name":41},"sveltekit",{"name":43},"bun",{"name":45},"go",{"name":47},"fsd",{"name":49},"storybook",{"name":51},"graphql",{"name":53},"pinia",{"name":55},"vite",{"name":57},"linux",{"name":59},"deno",{"name":61},"mariadb",{"name":63},"nuxt",{"name":65},"rest",{"name":67},"vue",{"name":69},"redis",{"name":71},"tailwind",{"name":73},"ts",{"name":75},"next.js",{"name":77},"node.js",{"name":79},"postgres",{"name":81},"playwright",{"name":83},"mongodb",{"name":85},"alpine.js",{"name":87},"gitlab",{"name":89},"mobx",{"name":91},"react",{"name":93},"pixi.js",{"name":95},"ci\u002Fcd",{"name":97},"redux",{"name":99},"svelte",{"name":101},"vitest",{"name":103},"jest",{"name":105},"grpc",{"name":107},"zustand",{"name":109},"scss",{"name":111},"docker",[113,125,150,170,204],{"id":114,"link":33,"name":35,"logo":34,"about":115,"positions":116},"beget","Облачная платформа с широким выбором IT-сервисов. Гибкие решения для ваших задач: от размещения сайта до комплексной облачной инфраструктуры для проектов любого масштаба",[117],{"name":118,"description":119,"skills":120,"duration":124},"Middle Frontend-разработчик","В процессе описания...",[121,122,123],{"name":63},{"name":67},{"name":53},{"from":36},{"id":126,"link":127,"name":126,"logo":128,"about":129,"positions":130},"xlsft","https:\u002F\u002Fxlsft.ru","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002Fdd1cb4829f950c4e116d511ccf77af3b5c2ed26a-480x100-svg.svg","**xlsft** — одноименная студия разработки программного обеспечения, предоставляющая полный цикл разработки ПО для клиентов различных сфер. В составе команды — frontend и backend разработчики, дизайнер интерфейсов, менеджер по контенту — что позволяет создавать веб-приложения, интерактивные интерфейсы, инструменты автоматизации и кастомные интеграции. Студия применяет современные технологии и индивидуальный подход, обеспечивая полный цикл реализации продуктов как для бизнеса, так и для конечных пользователей.",[131],{"name":132,"description":133,"skills":134,"duration":148},"Product Owner \u002F Senior Frontend Engineer","Работаю как **Product Owner** студии и **Senior Frontend Engineer**, ведя как разработку, так и **организационные процессы**. Определяю внутренние процессы, стандарты разработки и практики ведения документации во всех проектах, **руковожу фронтенд-разработкой,** включая архитектуру, библиотеки компонентов и повторно используемые интерфейсы. Контролирую выполнение нескольких клиентских проектов одновременно, обеспечивая качество и соблюдение сроков. Занимаюсь разработкой и развитием OSS- и SaaS-решений под брендом студии *(proxy-сервисы, CMS, SSO-шлюз, системы интеграций и инфраструктурные инструменты)*. Внедрил лучшие практики для рабочих процессов, CI\u002FCD и управления проектами, что **значительно повысило общую эффективность студии.**",[135,136,137,138,139,140,141,142,143,144,145,146,147],{"name":63},{"name":67},{"name":71},{"name":45},{"name":73},{"name":53},{"name":79},{"name":47},{"name":69},{"name":59},{"name":77},{"name":55},{"name":111},{"from":149},"2025-12-22",{"id":151,"link":152,"name":153,"logo":154,"about":155,"positions":156},"briskly","https:\u002F\u002Fbriskly.online","Briskly","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002Ff07fa27f0697e742bae885aed07f3ac6dd69ad50-242x72-svg.svg","**Briskly** — IT-стартап в сфере автономного ритейла, который объединяет software и hardware в единую технологическую платформу. Компания разрабатывает облачные сервисы и мобильное приложение для управления торговыми точками без персонала, а также собственное smart-оборудование, которое проектируется и производится на заводе в Выборге. Briskly меняет розницу через автоматизацию, аналитику и удалённый контроль, превращая торговлю в быструю, умную и независимую систему.",[157],{"name":158,"description":159,"skills":160,"duration":167},"Senior Frontend-разработчик","Разрабатывал фронтенд для **high-load сервиса** с многотысячной активной аудиторией, используя **React** (мобильное приложение и интерфейсы IoT-устройств) и **Vue** (портал для мерчантов). Поддерживал и развивал обширную кодовую базу, включая рефакторинг устаревших участков и устранение архитектурных узких мест, реализовывал изолированные и **устойчивые React-модули** с учётом ограничений устройств и нестабильных сетевых условий. Оптимизировал производительность CRM (рендеринг, состояние, сетевые запросы), повышая стабильность интерфейсов под нагрузкой, **разрабатывал интерфейсы управления и мониторинга для различных типов hardware и IoT-устройств** (медиаэкраны, кофемашины, микромаркеты, POS-терминалы, АЗС, термостаты). Проектировал универсальные UI-компоненты и сценарии взаимодействия под разные устройства и разрешения, повышал надёжность frontend-части, снижая количество ошибок и нагрузку на поддержку, в результате чего фронтенд стал самодостаточным и устойчивым к масштабированию, позволив сократить издержки на сопровождение продукта.",[161,162,163,164,165,166],{"name":91},{"name":67},{"name":109},{"name":53},{"name":73},{"name":55},{"to":168,"from":169},"2025-12-10","2025-03-12",{"id":171,"link":172,"name":173,"logo":174,"about":175,"positions":176},"ained","https:\u002F\u002Fpro.ained.ru","Ained Ecosystem","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002F55de7e29b9d6ce64b13b072146d29c37ddb1f735-274x73-svg.svg","**Ained Ecosystem** — это PropTech-стартап и SaaS-платформа, которая объединяет CRM, автоматизацию продаж и цифровые инструменты рынка недвижимости в единую IT-экосистему. Гибкая архитектура позволяет настраивать канбаны и воронки под любые бизнес-процессы, а модульные виджеты и интеграции работают за пределами интерфейса — в Telegram, на сайтах и внешних CRM. Ained — это не просто продукт, а технологическая среда, где девелоперские и агентские процессы легко масштабируются и адаптируются под рост бизнеса.",[177,192],{"name":178,"description":179,"skills":180,"duration":190},"Руководитель отдела Frontend-разработки","Разрабатывал и руководил архитектурой клиентской части основного продукта и связанных сервисов, используя **React для построения изолированных микрофронтенд-модулей и сложных UI-сценариев** и Nuxt для основной части приложения, обеспечивая масштабируемость и поддерживаемость кода. Инициировал и внедрил **Feature-Sliced Design (FSD)**, ускорив разработку новых функций на 30–40% и упростив сопровождение, спроектировал и реализовал **микрофронтенд-архитектуру** с независимым развитием модулей. В React разрабатывал изолированные клиентские модули с независимым жизненным циклом, выстраивал границы ответственности и взаимодействия между ними, применяя принципы **GRASP** для управления зависимостями, распределения логики и снижения связности, обеспечивал безопасную интеграцию в общее пространство (routing, state, shared зависимости) и переиспользование между разными продуктами и устройствами. Полностью спроектировал и вывел в продакшн ключевой клиентский компонент, используемый тысячами пользователей и обработавший заявки на сумму более 1 млрд ₽. Развивал дизайн-систему и библиотеку компонентов с фокусом на переиспользуемость и консистентность, внедрял код-ревью, инженерные практики и менторство, управлял приоритизацией задач и загрузкой команды. Разрабатывал интеграционные приложения, связывающие клиентские интерфейсы с внутренними сервисами, ускорив обработку заявок на 25–30%, и активно участвовал в формировании продуктовых решений совместно с дизайнерами, бэкендом и бизнес-стейкхолдерами.",[181,182,183,184,185,186,187,188,189],{"name":67},{"name":63},{"name":71},{"name":91},{"name":47},{"name":53},{"name":73},{"name":55},{"name":111},{"to":169,"from":191},"2024-06-19",{"name":118,"description":193,"skills":194,"duration":202},"Разрабатывал клиентскую часть **B2B2C CRM-системы** для застройщиков и агентств недвижимости *(личные кабинеты, инструменты, виджеты)*, реализовывая сложные пользовательские **интерфейсы с акцентом на UX, производительность и стабильность** при высокой нагрузке. Участвовал в проектировании архитектуры фронтенда и постепенном **переходе с легаси на JQuery \u002F PHP Blade**, разработал и поддерживал собственную библиотеку UI-компонентов, что **сократило время разработки новых интерфейсов на ~30–40%**. Внедрял единые UI-паттерны и стилистику для обеспечения визуальной консистентности продукта, оптимизировал производительность интерфейсов *(code splitting, lazy loading, manual chunks, оптимизация рендеринга)*, снижая время загрузки ключевых экранов на ~25%, и участвовал в интеграциях с внешними сервисами и внутренними API.",[195,196,197,198,199,200,201],{"name":67},{"name":63},{"name":71},{"name":53},{"name":73},{"name":55},{"name":111},{"to":191,"from":203},"2023-01-18",{"id":205,"link":206,"name":207,"logo":206,"about":208,"positions":209},"freelance",null,"Фриланс \u002F Самозанятый","Независимая фриланс-деятельность, ориентированная на разработку кастомных веб-решений и цифровых продуктов для малого и среднего бизнеса в различных сферах **(e-commerce, услуги, образование, локальный бизнес).**",[210],{"name":211,"description":212,"skills":213,"duration":219},"Junior+ Fullstack-разработчик","Разработал **более 20 кастомных сайтов** и **веб-сервисов** под индивидуальные требования клиентов, создавал адаптивные и кроссбраузерные пользовательские интерфейсы с использованием современных frontend-технологий **(React, Svelte)**. Реализовывал интеграции с CRM и ERP-системами **(Bitrix24, AmoCRM, SmartShell)**, повышая уровень автоматизации бизнесов, а также разрабатывал и поддерживал **Telegram- и VK-ботов** для уведомлений, поддержки клиентов и базовой автоматизации бизнес-процессов. Работал напрямую с заказчиками: занимался сбором требований, техническим консультированием, оценкой сроков и реализацией проектов. Вел проекты полного цикла — от получения макетов до деплоя и поддержки после запуска. **100% проектов выполнены в срок**. Повышал конверсию и эффективность бизнеса клиентов за счет автоматизации, **сформировал пул постоянных клиентов и повторных заказов.**",[214,215,216,217,218],{"name":91},{"name":99},{"name":41},{"name":39},{"name":77},{"to":220,"from":221},"2023-01-15","2020-10-14",[223],{"link":224,"name":225,"faculty":226},"https:\u002F\u002Fstu.lipetsk.ru","Липецкий Государственный Технический Университет","УК",[228,246,274,283,306,316,330,343,351],{"id":229,"priority":230,"name":231,"thumbnail":232,"stack":233,"description":245},"xlsft-worker-task-framework",99,"@xlsft\u002Fworker","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002F798e2b5dd4340e88c9ce68070b40d7db13db7c22-1200x630-svg.svg",[234,237,239,243],{"name":59,"type":235,"color":236,"priority":206},"backend","#a3a3a3",{"name":43,"type":235,"color":238,"priority":206},"#eab308",{"name":73,"type":240,"color":241,"priority":242},"frontend","#1d4ed8",10,{"name":77,"type":235,"color":244,"priority":242},"#65a30d","**@xlsft\u002Fworker** — Легкий crom, date и event-based task фреймворк  без бойлерплейта",{"id":247,"priority":248,"name":249,"thumbnail":250,"stack":251,"description":273},"xlsft-pixelbattle-realtime-game",98,"xlsft`s pixelbattle","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002F558601acb2bccb7744ca4d781d41b8def0a98c60-1200x630-svg.svg",[252,254,255,258,260,263,266,268,270],{"name":45,"type":235,"color":253,"priority":206},"#3b82f6",{"name":65,"type":235,"color":236,"priority":206},{"name":69,"type":256,"color":257,"priority":206},"database","#dc2626",{"name":93,"type":240,"color":259,"priority":206},"#f43f5e",{"name":67,"type":240,"color":261,"priority":262},"#22c55e",13,{"name":63,"type":240,"color":264,"priority":265},"#16a34a",12,{"name":79,"type":256,"color":267,"priority":242},"#1e3a8a",{"name":71,"type":240,"color":253,"priority":269},5,{"name":55,"type":271,"color":272,"priority":269},"devops","#8b5cf6","xlsft`s pixelbattle — это масштабная онлайн-битва пикселей, где каждый игрок влияет на общее полотно. Захватывай территорию, объединяйся с другими и оставь свой след в истории.",{"id":275,"priority":276,"name":277,"thumbnail":278,"stack":279,"description":282},"photon-ies-render-engine",97,"@xlsft\u002Fphoton","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002F85f47c293048871fc6bb13e999848a13755a310d-1200x630-svg.svg",[280,281],{"name":59,"type":235,"color":236,"priority":206},{"name":73,"type":240,"color":241,"priority":242},"**@xlsft\u002Fphoton** — парсер и SVG рендер движок фотометрических файлов по стандарту IESNA:LM-63-2002",{"id":284,"priority":285,"name":286,"thumbnail":287,"stack":288,"description":305},"verse-moe-storytelling-social-platform",96,"***verse.moe","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002Fc379ae671100e1afdf42720fe0eb57c9bf84f121-1200x630-svg.svg",[289,290,291,293,294,296,297,298,301,302,303,304],{"name":43,"type":235,"color":238,"priority":206},{"name":69,"type":256,"color":257,"priority":206},{"name":47,"type":240,"color":292,"priority":206},"#00a6f4",{"name":65,"type":235,"color":236,"priority":206},{"name":111,"type":271,"color":295,"priority":206},"#0e7490",{"name":67,"type":240,"color":261,"priority":262},{"name":63,"type":240,"color":264,"priority":265},{"name":53,"type":299,"color":238,"priority":300},"state",11,{"name":73,"type":240,"color":241,"priority":242},{"name":79,"type":256,"color":267,"priority":242},{"name":71,"type":240,"color":253,"priority":269},{"name":55,"type":271,"color":272,"priority":269},"\\*\\*\\*verse.moe — социальная платформа для публикации и совместной работы с мангой, манхвой, комиксами и другим печатным контентом, построенная на философии Git",{"id":307,"priority":308,"name":309,"thumbnail":310,"stack":311,"description":315},"smartshell-sdk-graphql-api-client",95,"SmartShell SDK","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002Fde6de65664cc5b66e74df0f799f47654706d8d92-1200x630-svg.svg",[312,314],{"name":51,"type":235,"color":313,"priority":206},"#ec4899",{"name":73,"type":240,"color":241,"priority":242},"**SmartShell SDK** — Современное, полностью типизированное, динамически генерирующееся, постоянно актуальное SDK для взаимодействия с публичным API ERP системы управления компьютерными клубами SmartShell",{"id":317,"priority":318,"name":319,"thumbnail":320,"stack":321,"description":329},"xlsft-proxy-vpn-service",94,"xlsft`s proxy","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002Fa2d80d8de36b3abec73a97652ef992f67ac5293b-1200x630-svg.svg",[322,323,325,326,327,328],{"name":45,"type":235,"color":253,"priority":206},{"name":57,"type":271,"color":324,"priority":206},"#404040",{"name":67,"type":240,"color":261,"priority":262},{"name":63,"type":240,"color":264,"priority":265},{"name":73,"type":240,"color":241,"priority":242},{"name":71,"type":240,"color":253,"priority":269},"Прокси сервис для защиты ваших данных от иностранных агентов, геев и прочей нечисти которую блокирует доблесный Роскомнадзор. Спасибо ему за это! ",{"id":331,"priority":206,"name":332,"thumbnail":333,"stack":334,"description":342},"els-led-ecommerce-platform","els-led.ru","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002F1ba2b1632ac5c2f59cdecea3c77a1d75204fc273-1200x630-svg.svg",[335,336,337,338,339,340,341],{"name":69,"type":256,"color":257,"priority":206},{"name":45,"type":235,"color":253,"priority":206},{"name":47,"type":240,"color":292,"priority":206},{"name":67,"type":240,"color":261,"priority":262},{"name":63,"type":240,"color":264,"priority":265},{"name":79,"type":256,"color":267,"priority":242},{"name":71,"type":240,"color":253,"priority":269},"**els-led.ru** — ecommerce-сайт для российского производителя светодиодных светильников и профессиональных световых решений",{"id":344,"priority":206,"name":345,"thumbnail":346,"stack":347,"description":350},"htsx-minimal-ssr-framework","@xlsft\u002Fhtsx","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002F8b6c1d3540c1d760264578db3628aa560c685c5d-1200x630-svg.svg",[348,349],{"name":59,"type":235,"color":236,"priority":206},{"name":73,"type":240,"color":241,"priority":242},"**HTSX** — Hyper Text (on) Server eXtended ",{"id":352,"priority":206,"name":353,"thumbnail":354,"stack":355,"description":360},"work-of-russia-guide-platform","Путеводитель по Кадровым центрам «Работа России»","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002Fc25dfee6b3484bdf58b9679a03c5d918319a0e46-1200x630-svg.svg",[356,358],{"name":85,"type":240,"color":357,"priority":206},"#06b6d4",{"name":39,"type":240,"color":238,"priority":359},9,"**Работа России** — Цифровой путеводитель, разработанный в рамках ребрендинга государственной системы центров занятости",{"data":362,"body":363},{},{"type":364,"children":365},"root",[366,382,393],{"type":367,"tag":368,"props":369,"children":370},"element","p",{},[371,374,380],{"type":372,"value":373},"text","Торговая марка ",{"type":367,"tag":375,"props":376,"children":377},"strong",{},[378],{"type":372,"value":379},"«Briskly»",{"type":372,"value":381}," №848501 является собственностью ООО «БРИСКЛИ» ОГРН 1187746690768 ИНН 9701114958",{"type":367,"tag":368,"props":383,"children":384},{},[385,386,391],{"type":372,"value":373},{"type":367,"tag":375,"props":387,"children":388},{},[389],{"type":372,"value":390},"«Ained»",{"type":372,"value":392}," №903277 является собственностью ООО «ЦИФРОВАЯ НЕДВИЖИМОСТЬ» ОГРН 1214800006035 ИНН 4826148336",{"type":367,"tag":368,"props":394,"children":395},{},[396,397,402],{"type":372,"value":373},{"type":367,"tag":375,"props":398,"children":399},{},[400],{"type":372,"value":401},"«Beget»",{"type":372,"value":403}," №738948 является собственностью ООО «Бегет» ОГРН 1077847645590 ИНН 7801451618",{"seo":405,"id":247,"links":406,"tags":410,"repo":414,"name":249,"description":273,"thumbnail":250,"logo":415,"images":416,"bg":421,"about":422,"stack":423,"status":433,"copyright":206,"related":206},{"title":26},[407,408,409],"https:\u002F\u002Fpixelbattle.xlsft.ru","https:\u002F\u002Ft.me\u002Fxlsft_pixelbattle_bot","https:\u002F\u002Fgithub.com\u002Fxlsft\u002Fpixelbattle",[411,412,413],"featured","oss","fun","xlsft\u002Fpixelbattle","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002F9ea248ed93f8af5ec282ec8f9a54876b99a6e8bd-300x210-svg.svg",[417,418,419,420],"https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002F9ba7f13102ee75a27dc16d25473af7ca49f8aba4-3228x2244-png.png","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002F0fa0330955edd4c540e51966bc4d0e598959b81f-3228x2244-png.png","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002F2fd182005a5be2ba6dd0736836e0936c2bb9a19a-3228x2244-png.png","https:\u002F\u002Ffucosukalekob.begetcdn.cloud\u002Fassets\u002F67cbde54d2e4524180cb6f645a7628f643383802-575x1280-jpg.jpg","#000000","**xlsft`s pixelbattle** — это небольшая реалтайм-игра в формате пиксель-баттла, реализованная на стеке Go и Nuxt. Серверная часть отвечает за хранение состояния полотна и синхронизацию клиентов, фронтенд отрисовывает канвас и обрабатывает взаимодействие пользователя, а обмен данными происходит через WebSocket. Проект задумывался как эксперимент и демонстрация инженерного подхода, но в процессе разработки превратился в полноценную оптимизационную задачу, где ключевую роль сыграло bit-пакетирование.\n\nОсновная проблема проявилась при росте полотна: инициализационный пакет с текущим состоянием всех пикселей начал разрастаться до десятков мегабайт, а отправка каждого обновления в виде JSON приводила к перегрузке сокета и лишним накладным расходам на сериализацию. Классическое текстовое представление координат и цвета оказалось слишком «тяжёлым», поэтому было принято решение отказаться от строковой модели в пользу плотного бинарного формата.\n\nBit-пакетирование позволило упаковать координаты и индекс цвета в фиксированный 24-битный блок. Для этого каждому параметру был задан строгий диапазон: координаты x и y в пределах 0–1023 укладываются в 10 бит каждая, а цвет из палитры до 16 значений — в 4 бита. Вместо передачи трёх отдельных чисел или текстовой структуры значения объединяются в одно 24-битное число с помощью побитовых сдвигов, после чего последовательно записываются в `Uint8Array`. Таким образом один пиксель занимает ровно 3 байта без каких-либо лишних символов, кавычек и разделителей.\n\nПередача осуществляется бинарным WebSocket-фреймом, что позволяет отправлять «сырые» байты. На клиенте данные распаковываются обратными побитовыми сдвигами и масками, восстанавливая исходные x, y и индекс цвета. Такой подход радикально уменьшил размер init-пакета и снизил нагрузку на сервер: вместо десятков мегабайт текстового JSON передаётся компактный бинарный буфер, а время подготовки данных сократилось с десятков секунд до миллисекунд.\n\nДополнительно обновления стали буферизоваться и отправляться батчами через фиксированный интервал, что устранило спам отдельных сообщений при массовом рисовании. В результате каждый пиксель перешёл с десятков байтов текстового представления к строго фиксированным 24 битам, а сама система стала значительно более масштабируемой и устойчивой к нагрузке.\n\nПроект стал наглядной демонстрацией того, как низкоуровневые побитовые операции и контроль над форматом передачи данных могут дать кратный прирост эффективности без использования сложных алгоритмов сжатия. Bit-пакетирование здесь выступает не теоретическим приёмом, а практическим инструментом оптимизации реального сетевого приложения.",[424,425,426,427,428,429,430,431,432],{"name":45,"type":235,"color":253,"priority":206},{"name":65,"type":235,"color":236,"priority":206},{"name":69,"type":256,"color":257,"priority":206},{"name":93,"type":240,"color":259,"priority":206},{"name":67,"type":240,"color":261,"priority":262},{"name":63,"type":240,"color":264,"priority":265},{"name":79,"type":256,"color":267,"priority":242},{"name":71,"type":240,"color":253,"priority":269},{"name":55,"type":271,"color":272,"priority":269},"Релиз",{"stars":435,"topics":436},0,[437],"pixelbattle",{"data":439,"body":440},{},{"type":364,"children":441},[442,451,456,470,475,480],{"type":367,"tag":368,"props":443,"children":444},{},[445,449],{"type":367,"tag":375,"props":446,"children":447},{},[448],{"type":372,"value":249},{"type":372,"value":450}," — это небольшая реалтайм-игра в формате пиксель-баттла, реализованная на стеке Go и Nuxt. Серверная часть отвечает за хранение состояния полотна и синхронизацию клиентов, фронтенд отрисовывает канвас и обрабатывает взаимодействие пользователя, а обмен данными происходит через WebSocket. Проект задумывался как эксперимент и демонстрация инженерного подхода, но в процессе разработки превратился в полноценную оптимизационную задачу, где ключевую роль сыграло bit-пакетирование.",{"type":367,"tag":368,"props":452,"children":453},{},[454],{"type":372,"value":455},"Основная проблема проявилась при росте полотна: инициализационный пакет с текущим состоянием всех пикселей начал разрастаться до десятков мегабайт, а отправка каждого обновления в виде JSON приводила к перегрузке сокета и лишним накладным расходам на сериализацию. Классическое текстовое представление координат и цвета оказалось слишком «тяжёлым», поэтому было принято решение отказаться от строковой модели в пользу плотного бинарного формата.",{"type":367,"tag":368,"props":457,"children":458},{},[459,461,468],{"type":372,"value":460},"Bit-пакетирование позволило упаковать координаты и индекс цвета в фиксированный 24-битный блок. Для этого каждому параметру был задан строгий диапазон: координаты x и y в пределах 0–1023 укладываются в 10 бит каждая, а цвет из палитры до 16 значений — в 4 бита. Вместо передачи трёх отдельных чисел или текстовой структуры значения объединяются в одно 24-битное число с помощью побитовых сдвигов, после чего последовательно записываются в ",{"type":367,"tag":462,"props":463,"children":465},"code",{"className":464},[],[466],{"type":372,"value":467},"Uint8Array",{"type":372,"value":469},". Таким образом один пиксель занимает ровно 3 байта без каких-либо лишних символов, кавычек и разделителей.",{"type":367,"tag":368,"props":471,"children":472},{},[473],{"type":372,"value":474},"Передача осуществляется бинарным WebSocket-фреймом, что позволяет отправлять «сырые» байты. На клиенте данные распаковываются обратными побитовыми сдвигами и масками, восстанавливая исходные x, y и индекс цвета. Такой подход радикально уменьшил размер init-пакета и снизил нагрузку на сервер: вместо десятков мегабайт текстового JSON передаётся компактный бинарный буфер, а время подготовки данных сократилось с десятков секунд до миллисекунд.",{"type":367,"tag":368,"props":476,"children":477},{},[478],{"type":372,"value":479},"Дополнительно обновления стали буферизоваться и отправляться батчами через фиксированный интервал, что устранило спам отдельных сообщений при массовом рисовании. В результате каждый пиксель перешёл с десятков байтов текстового представления к строго фиксированным 24 битам, а сама система стала значительно более масштабируемой и устойчивой к нагрузке.",{"type":367,"tag":368,"props":481,"children":482},{},[483],{"type":372,"value":484},"Проект стал наглядной демонстрацией того, как низкоуровневые побитовые операции и контроль над форматом передачи данных могут дать кратный прирост эффективности без использования сложных алгоритмов сжатия. Bit-пакетирование здесь выступает не теоретическим приёмом, а практическим инструментом оптимизации реального сетевого приложения.",{"data":486,"body":487},{},{"type":364,"children":488},[489],{"type":367,"tag":368,"props":490,"children":491},{},[492],{"type":372,"value":273}]