[{"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    }\u002Fen\u002Fprojects\u002Fxlsft-pixelbattle-realtime-game":3,"mdc-kw9deo-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]\u002Fen\u002Fprojects\u002Fxlsft-pixelbattle-realtime-game":404,"$f36j46mfcx4l5o":434,"mdc--7ec18-key":438,"mdc-n5v4aw-key":485},{"footer":4,"person":25,"projects":227},{"legal":5,"links":6},"The trademark **“Briskly”** No. 848501 is owned by \"БРИСКЛИ\" LLC, OGRN 1187746690768, INN 9701114958.\n  \n\nThe trademark **“Ained”** No. 903277 is owned by “ЦИФРОВАЯ НЕДВИЖИМОСТЬ” LLC OGRN 1214800006035 INN 4826148336\n\n\n\nThe trademark **“Beget”** No. 738948 is owned by “Бегет” LLC OGRN 1077847645590 INN 7801451618",[7,10,13,16,19,22],{"label":8,"to":9},"Call","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 Engineer (Ilya Torshin)","Senior Frontend Engineer with 5+ years of experience. I work with Vue, React, and TypeScript, creating scalable interfaces and high-load applications.","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","A cloud platform offering a wide range of IT services. Flexible solutions tailored to your needs: from website hosting to comprehensive cloud infrastructure for projects of any scale",[117],{"name":118,"description":119,"skills":120,"duration":124},"Middle Frontend Engineer","In progress....",[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** — software development studio of the same name delivering full-cycle software solutions for a wide range of clients. Operating with a lean, high-performance team (frontend & backend engineers, UI\u002FUX designer, content manager), that develops web applications, interactive interfaces, automation tools, and custom integrations. The studio focuses on modern technologies and client-driven innovation, providing end-to-end software products for both B2B and consumer-facing needs.",[131],{"name":132,"description":133,"skills":134,"duration":148},"Product Owner \u002F Senior Frontend Engineer","I work as a **Product Owner** for the studio and a **Senior Frontend Engineer**, managing both development and **organizational processes**. I define internal processes, development standards, and documentation practices for all projects, and **lead frontend development,** including architecture, component libraries, and reusable interfaces. I oversee the execution of several client projects simultaneously, ensuring quality and adherence to deadlines. I am involved in the development and advancement of OSS and SaaS solutions under the studio's brand *(proxy services, CMS, SSO gateway, integration systems, and infrastructure tools)*. I have implemented best practices for workflows, CI\u002FCD, and project management, **which has significantly improved the studio's overall efficiency.**",[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** is an IT startup in the field of autonomous retail that combines software and hardware into a single technological platform. The company develops cloud services and a mobile application for managing unmanned retail outlets, as well as its own smart equipment, which is designed and manufactured at a factory in Vyborg. Briskly is transforming retail through automation, analytics, and remote control, turning commerce into a fast, smart, and independent system.",[157],{"name":158,"description":159,"skills":160,"duration":167},"Senior Frontend Engineer","Developed the frontend for a **high-load service** with an active audience of thousands, using **React** (mobile app and IoT device interfaces) and **Vue** (merchant portal). Maintained and developed an extensive codebase, including refactoring outdated sections and eliminating architectural bottlenecks; implemented isolated and **robust React modules** while accounting for device limitations and unstable network conditions. Optimized CRM performance (rendering, state management, network requests), improving interface stability under load, and **developed control and monitoring interfaces for various types of hardware and IoT devices** (digital signage, coffee machines, mini-markets, POS terminals, gas stations, thermostats). Designed universal UI components and interaction scenarios for different devices and resolutions, improved the reliability of the frontend by reducing the number of errors and the support workload, resulting in a frontend that became self-sufficient and scalable, thereby reducing product maintenance costs.",[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** is a PropTech startup and SaaS platform that combines CRM, sales automation, and digital real estate tools into a single IT ecosystem. Its flexible architecture allows you to customize kanban boards and funnels for any business process, while modular widgets and integrations work outside the interface — in Telegram, on websites, and in external CRMs. Ained is not just a product, but a technological environment where development and agency processes can be easily scaled and adapted to business growth.",[177,192],{"name":178,"description":179,"skills":180,"duration":190},"Lead \u002F Senior Frontend Engineer","Developed and led the client-side architecture of the core product and related services, using **React to build isolated micro-frontend modules and complex UI scenarios** and Nuxt for the main part of the application, ensuring code scalability and maintainability. I initiated and implemented **Feature-Sliced Design (FSD)**, accelerating new feature development by 30–40% and simplifying maintenance, and designed and implemented a **microfrontend architecture** with independent module development. In React, I developed isolated client-side modules with independent lifecycles, defined boundaries of responsibility and interaction between them, applying **GRASP** principles to manage dependencies, distribute logic, and reduce coupling, ensuring safe integration into the shared scope (routing, state, shared dependencies), and reusability across different products and devices. I fully designed and deployed a key client-side component used by thousands of users that processed requests totaling over 1 billion ₽. Developed a design system and component library with a focus on reusability and consistency, implemented code reviews, engineering practices, and mentoring, and managed task prioritization and team workload. \nI developed integration applications that connect client interfaces with internal services, speeding up request processing by 25–30%, and actively collaborated with designers, backend developers, and business stakeholders to shape product solutions.",[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},"Developed the client side of a **B2B2C CRM system** for developers and real estate agencies *(personal accounts, tools, widgets)*, implementing complex user **interfaces with a focus on UX, performance, and stability** under high load. Participated in designing the front-end architecture and gradual **transition from legacy to JQuery \u002F PHP Blade**, developed and maintained a proprietary library of UI components, which **reduced the development time for new interfaces by ~30–40%**. Implemented unified UI patterns and styles to ensure visual consistency of the product, optimized interface performance *(code splitting, lazy loading, manual chunks, rendering optimization)*, reducing the loading time of key screens by ~25%, and participated in integrations with external services and internal APIs.",[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,"Freelance \u002F Self-Employed","Independent freelance practice focused on custom web development and digital solutions for small and medium-sized businesses across various industries **(e-commerce, services, education, local businesses).**",[210],{"name":211,"description":212,"skills":213,"duration":219},"Junior+ Fullstack Engineer","Developed **over 20 custom websites** and **web services** tailored to individual client requirements, creating responsive and cross-browser user interfaces using modern frontend technologies **(React, Svelte)**. Implemented integrations with CRM and ERP systems **(Bitrix24, AmoCRM, SmartShell)**, improving business automation, and developed and maintained **Telegram and VK bots** for notifications, customer support, and basic business process automation. Worked directly with customers by gathering requirements, providing technical consulting, estimating deadlines, and handling implementation. Managed full-cycle projects from receiving layouts to deployment and post-launch support. **100% of projects were completed on time**. Increased customer conversion rates and overall business efficiency through automation, and **built a strong pool of regular customers and repeat orders.**",[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","Lipetsk State Technical University","UC",[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** — Lightweight, cron, date and event-based task framework with zero-boilerplate setup ",{"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 is a large-scale online pixel battle where each player influences the overall canvas. Capture territory, team up with others, and leave your mark on history.",{"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** — IESNA:LM-63-2002 photometry files parser and SVG render engine ",{"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 — a social publishing platform for manga, manhwa, comics, and other printed content, built around a Git-inspired philosophy",{"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** — Modern, fully typed, dynamically generated, constantly updated SDK for interacting with the public API of the SmartShell computer club management ERP system.",{"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},"A proxy service to protect your data from foreign agents, gays, and other evil forces blocked by the valiant Roskomnadzor. Thank him for that! ",{"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** — e-commerce site for a Russian manufacturer of LED lighting fixtures and professional lighting solutions",{"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","Guide to the “Work of Russia” Recruitment Centers","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,"**Work of Russia** — A digital guide developed as part of the rebranding of the state employment center system",{"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","The trademark ",{"type":367,"tag":375,"props":376,"children":377},"strong",{},[378],{"type":372,"value":379},"“Briskly”",{"type":372,"value":381}," No. 848501 is owned by \"БРИСКЛИ\" LLC, OGRN 1187746690768, INN 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}," No. 903277 is owned by “ЦИФРОВАЯ НЕДВИЖИМОСТЬ” LLC OGRN 1214800006035 INN 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}," No. 738948 is owned by “Бегет” LLC OGRN 1077847645590 INN 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** is a small real-time pixel battle game implemented on the Go and Nuxt stack. The server part is responsible for storing the canvas state and synchronizing clients, the frontend draws the canvas and processes user interaction, and data exchange occurs via WebSocket. The project was conceived as an experiment and demonstration of an engineering approach, but during development it turned into a full-fledged optimization task, where bit packaging played a key role.\n\nThe main problem arose as the canvas grew: the initialization packet with the current state of all pixels began to grow to tens of megabytes, and sending each update as JSON led to socket overload and unnecessary overhead for serialization. The classic text representation of coordinates and colors proved to be too “heavy,” so it was decided to abandon the string model in favor of a dense binary format.\n\nBit packaging made it possible to pack coordinates and color index into a fixed 24-bit block. To achieve this, each parameter was assigned a strict range: x and y coordinates within 0–1023 fit into 10 bits each, and colors from a palette of up to 16 values fit into 4 bits. Instead of transmitting three separate numbers or a text structure, the values are combined into a single 24-bit number using bit shifts, after which they are sequentially written to `Uint8Array`. Thus, one pixel occupies exactly 3 bytes without any extra characters, quotes, or separators.\n\nThe transfer is carried out using a binary WebSocket frame, which allows raw bytes to be sent. On the client side, the data is unpacked using reverse bit shifts and masks, restoring the original x, y, and color index. This approach radically reduced the size of the init packet and reduced the load on the server: instead of tens of megabytes of text JSON, a compact binary buffer is transmitted, and the data preparation time has been reduced from tens of seconds to milliseconds.\n\nAdditionally, updates began to be buffered and sent in batches at fixed intervals, which eliminated spam from individual messages during mass drawing. As a result, each pixel went from dozens of bytes of text representation to a strictly fixed 24 bits, and the system itself became much more scalable and resilient to load.\n\nThe project became a vivid demonstration of how low-level bitwise operations and control over the data transfer format can provide a multiple increase in efficiency without the use of complex compression algorithms. Bit packaging here is not a theoretical technique, but a practical tool for optimizing a real network application.",[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},"Released",{"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}," is a small real-time pixel battle game implemented on the Go and Nuxt stack. The server part is responsible for storing the canvas state and synchronizing clients, the frontend draws the canvas and processes user interaction, and data exchange occurs via WebSocket. The project was conceived as an experiment and demonstration of an engineering approach, but during development it turned into a full-fledged optimization task, where bit packaging played a key role.",{"type":367,"tag":368,"props":452,"children":453},{},[454],{"type":372,"value":455},"The main problem arose as the canvas grew: the initialization packet with the current state of all pixels began to grow to tens of megabytes, and sending each update as JSON led to socket overload and unnecessary overhead for serialization. The classic text representation of coordinates and colors proved to be too “heavy,” so it was decided to abandon the string model in favor of a dense binary format.",{"type":367,"tag":368,"props":457,"children":458},{},[459,461,468],{"type":372,"value":460},"Bit packaging made it possible to pack coordinates and color index into a fixed 24-bit block. To achieve this, each parameter was assigned a strict range: x and y coordinates within 0–1023 fit into 10 bits each, and colors from a palette of up to 16 values fit into 4 bits. Instead of transmitting three separate numbers or a text structure, the values are combined into a single 24-bit number using bit shifts, after which they are sequentially written to ",{"type":367,"tag":462,"props":463,"children":465},"code",{"className":464},[],[466],{"type":372,"value":467},"Uint8Array",{"type":372,"value":469},". Thus, one pixel occupies exactly 3 bytes without any extra characters, quotes, or separators.",{"type":367,"tag":368,"props":471,"children":472},{},[473],{"type":372,"value":474},"The transfer is carried out using a binary WebSocket frame, which allows raw bytes to be sent. On the client side, the data is unpacked using reverse bit shifts and masks, restoring the original x, y, and color index. This approach radically reduced the size of the init packet and reduced the load on the server: instead of tens of megabytes of text JSON, a compact binary buffer is transmitted, and the data preparation time has been reduced from tens of seconds to milliseconds.",{"type":367,"tag":368,"props":476,"children":477},{},[478],{"type":372,"value":479},"Additionally, updates began to be buffered and sent in batches at fixed intervals, which eliminated spam from individual messages during mass drawing. As a result, each pixel went from dozens of bytes of text representation to a strictly fixed 24 bits, and the system itself became much more scalable and resilient to load.",{"type":367,"tag":368,"props":481,"children":482},{},[483],{"type":372,"value":484},"The project became a vivid demonstration of how low-level bitwise operations and control over the data transfer format can provide a multiple increase in efficiency without the use of complex compression algorithms. Bit packaging here is not a theoretical technique, but a practical tool for optimizing a real network application.",{"data":486,"body":487},{},{"type":364,"children":488},[489],{"type":367,"tag":368,"props":490,"children":491},{},[492],{"type":372,"value":273}]