Открыт к предложениям Middle+ Frontend / Fullstack · Москва или удалёнка
Qwern_9876r
Делаю сложное — стабильным, быстрым и масштабируемым
Программирую с 14 лет: в 15 закончил Школу Разработки Интерфейсов Яндекса — самым молодым учеником за 12 лет её существования, а в 16 начал карьеру в Яндексе frontend-разработчиком. Закрывал сложные технические задачи — от оптимизации производительности интерфейсов до проектирования огромных проектов. Пишу высокопроизводительный, поддерживаемый код и всегда смотрю шире задачи: думаю о том, как решение влияет на продукт и бизнес в целом. Инициативен, довожу начатое до результата и не жду, когда скажут что делать. В свободное время развиваю Rook — свой язык программирования, который компилируется в JavaScript и запускает его на всех ядрах процессора.
Яндекс
МТСПишу код, который не просто работает — он работает быстро. Оптимизирую рендер, bundle size, сетевые запросы и время отклика. Метрики Lighthouse, Core Web Vitals и профилирование — обязательная часть работы, а не опция.
Не жду постановки задачи — нахожу проблемы и предлагаю решения сам. Беру на себя сложные и неопределённые задачи, довожу их до конца без постоянного контроля. Работаю автономно и несу ответственность за результат.
Смотрю на задачи через призму бизнеса: оцениваю долгосрочные последствия технических решений, избегаю оверинжиниринга и фокусируюсь на том, что реально приносит ценность продукту и пользователям.
+32.5% Прибыль
+31% E-REACH
TypeScript · HTML5 · CSS3 · SCSS
Строгая типизация, generics, utility types, декораторы
Семантическая разметка, доступность, SEO
Анимации, grid, custom properties, оптимизация
Миксины, переменные, архитектура стилей
React 19 · Next.js 16 · MUI · TanStack Query
Hooks, Suspense, Server Components, оптимизация рендера
App Router, SSR, SSG, ISR, middleware
Material UI, стилизованные компоненты
Query, Mutation, Infinite Query, Optimistic Updates
Pixi · Three.js · Rive · Lottie
WebGL, WebGPU, сложные графические интерфейсы
WebGL, сложные графические интерфейсы
Интерактивные анимации, wasm
Графика, сложные анимации
Lit · Custom Elements
Разработка переиспользуемых веб-компонентов
Storybook · Jest · Playwright
UI-документация, изолированная разработка компонентов
Unit и интеграционное тестирование
E2E тестирование, кроссбраузерность
Нажми на иконку — перейдёшь на официальный сайт технологии
Яндекс и МТС
Москва
Повышение за 3 месяца
Летняя кампания 2024 года · продукт с миллионами пользователей
Была задача добавить небольшую анимацию на главную страницу — без макетов.
Превратил анимацию в мини-игру
Сильно улучшил анимацию и добавил интерактив
Оптимизировал
Ленивая загрузка и оптимизация самой анимации: идеально работала даже на самых старых телефонах
Придумал механику с призом
За интерактив в анимации пользователь получал символический приз
Успех подхватил маркетинг
Мини-игра привлекла много ежедневных пользователей, и всё лето вокруг неё шла кампания с блогерами
Я сильно улучшил анимацию, добавил интерактив и оптимизировал её при помощи ленивой загрузки и оптимизации самой анимации. Анимация идеально работала даже на самых старых телефонах, а ещё я придумал механику: за интерактив в анимации пользователь получал символический приз. Несмотря на то, что продукт не был связан с анимациями и развлечениями, моя мини-игра привлекла большое количество ежедневных пользователей и вовлекла их в продукт. Менеджмент вместе с маркетологами уцепились за этот неожиданный успех, и всё лето шла активная маркетинговая кампания вокруг мини-игры: в ней участвовали многие блогеры, а люди в своих телеграм-каналах обсуждали игру и гадали, какой же приз будет дальше. Так я превратил мини-анимацию в киллер-фичу лета и миллионы вовлечённых пользователей.
Новая игровая страница, сделанная в одиночку к дедлайну
Из трёх фронтенд-разработчиков один ушёл делать проект для другой команды, а второй — в долгий отпуск. Менеджеры принесли огромный проект, который нужно было сделать в кратчайшие сроки.
Новая страница с игровой механикой
Игровая механика и призы
Новый стек впервые в проекте
Серверные компоненты и REST API вместо GraphQL
Освоил Rive с нуля
Интерактив на Rive, который раньше в проекте не использовался
Сдал в срок в одиночку
Мой компонент для Rive стал основой для всей команды и Яндекс Плюса
Проект — новая страница с игровой механикой, призами и прочим. Я решил впервые в нашем проекте использовать серверные компоненты и REST API (раньше мы использовали GraphQL и решили от него уйти). Интерактив решили делать на Rive, который у нас на проекте никогда не использовался, — я впервые узнал, что это. В итоге, работая тогда ещё на полставки и засиживаясь допоздна, я разобрался в Rive и всём остальном и к дедлайну сделал всё необходимое в одиночку. Мой пример использования Rive и универсальный компонент для него стали базой для всех будущих интеграций Rive в нашей команде и по всему Яндекс Плюсу.
Май 2026, первый месяц в МТС. Вес моделей — после сжатия в октябре 2026, gzip
Для новых проектов в МТС нужно было решить, подойдёт ли связка Svelte + Threlte + Pixi.js: потянет ли она 3D, 2D-эффекты и интерфейс в одном приложении и насколько быстро на ней разрабатывать.
Задача — выбрать стек
Подойдёт ли Svelte + Threlte + Pixi.js для новых проектов МТС: 3D, 2D-эффекты и интерфейс в одном приложении
Игра вместо демо
За 4 дня — браузерная 3D-игра: лес с грибами, оранжерея с котлом, зелья
Три слоя в одном кадре
3D-сцены на Threlte, частицы Pixi.js поверх них, интерфейс и состояние на Svelte 5
Стек взяли в работу
По итогам проверки связку выбрали для новых проектов
Модели в 8 раз легче
gltf-transform и meshopt: 9,7 МБ при старте вместо 76,4
Чтобы проверить стек на настоящей задаче, а не на демо, я за 4 дня написал браузерную 3D-игру Alchemy Terrarium: собираешь грибы в лесу и варишь из них зелья в котле в оранжерее. 3D-сцены сделаны на Threlte (three.js), эффекты частиц — на Pixi.js поверх 3D, интерфейс и состояние игры — на Svelte 5, всё на TypeScript и SvelteKit со статической сборкой. Стек показал себя хорошо, и его взяли для новых проектов. Позже я сжал 3D-модели игры через gltf-transform и meshopt: при старте она грузит 9,7 МБ вместо 76,4 МБ.
Замеры сборки, gzip
Портфолио разработчика, для которого производительность — главный аргумент. Сайт должен сам быть доказательством: 3D, анимации и интерактив — и при этом летать на любом телефоне.
SvelteKit с пререндером
Каждая страница — готовый HTML, на первом экране только нужный JS
3D без веса на старте
Призма на Threlte и Pixi-сцены грузятся после загрузки и рисуют кадры только во время анимаций
Сайт меряет сам себя
Живые метрики в браузере посетителя через Performance API, без библиотек
PWA без лишнего трафика
Service worker кэширует только то, что посетитель уже скачал
Сайт переписан с React на SvelteKit с пререндером: каждая страница — готовый HTML, на первом экране только нужный JS. 3D-призма на Threlte и Pixi-сцены грузятся после загрузки страницы и рисуют кадры только во время анимаций, а в покое засыпают. Метрики в «Почему я» — живые замеры в браузере посетителя через Performance API. Service worker превращает сайт в PWA и кэширует только то, что посетитель уже скачал.
Цифры — из репозитория: go for — замер с главной страницы документации, горутины — пример из документации в Node; оба на Apple M4 Pro с 14 ядрами
func isPrime(n number) bool {
for let d = 2; d * d <= n; d++ {
if n % d == 0 {
return false
}
}
return n > 1
}
const primes = make([]uint8, 10_000_000)
go for i, _ in primes {
primes[i] = isPrime(i) ? 1 : 0
}func isPrime(n number) bool {
if n < 2 {
return false
}
for let d = 2; d * d <= n; d++ {
if n % d == 0 {
return false
}
}
return true
}
func countPrimes(from, to number) number {
let count = 0
for let n = from; n < to; n++ {
if isPrime(n) {
count++
}
}
return count
}
const PART = 1_000_000
const parts = Array(10).fill(0).map((_, i) => go countPrimes(i * PART, (i + 1) * PART))
console.log((await Promise.all(parts)).reduce((a, b) => a + b, 0))comp Counter(start number) {
state count = start
return <button onClick={count++}>Clicked {count} times</button>
}
document.body.append(<Counter start={0} />)Тот же цикл, на одно слово длиннее: go for делит массив на части, по несколько на ядро, и выполняет их горутинами на свободных ядрах. На 14 ядрах Apple M4 Pro — в 8,1 раза быстрее одного потока.
go запускает countPrimes в воркере — в отдельном потоке на своём ядре — и даёт Promise с результатом, а isPrime компилятор сам отправит туда же. Десять горутин считают простые числа до 10 млн в 5,4 раза быстрее одного потока.
Это весь компонент: после count++ компилятор сам обновит текст кнопки — без виртуального DOM и библиотеки.
JavaScript выполняется в одном потоке: тяжёлое вычисление занимает одно ядро и блокирует всё остальное, а Web Workers требуют отдельных файлов, postMessage и ручного копирования данных. Хотелось писать параллельный код так же просто, как в Go, — со строгими типами и без платы за удобство в бандле.
Горутины на настоящих потоках
go f(x) запускает функцию в пуле воркеров, по одному на ядро, и даёт Promise с результатом
go for — цикл на всех ядрах
Массив делится на части, по несколько на ядро, и каждая выполняется на первом свободном: ×8,1 на 14 ядрах
Каналы и select
Горутины в разных потоках передают значения через каналы, ждут несколько сразу и выходят по тайм-ауту, как в Go
Типы, которые знают о потоках
Компилятор сам переносит в воркер нужные функции и до запуска проверяет, что данные можно скопировать в другой поток
Совместимость с TypeScript и npm
Типы пакетов и DOM — из .d.ts, а для своих модулей компилятор сам пишет .d.ts
Инструменты вокруг языка
npm-пакет, CLI, плагин для Vite, расширение для VS Code и документация с песочницей, написанная на самом Rook
Я написал Rook — язык с семантикой JavaScript, синтаксисом Go и статической типизацией, главное в котором — скорость и конкурентность. go f(x) запускает функцию горутиной в пуле Web Workers или worker threads, по одному потоку на ядро, и даёт Promise с результатом; каналы, select, after и tick работают как в Go. go for — тот же цикл по массиву, на одно слово длиннее: массив делится на части, по несколько на ядро, и каждая выполняется на первом свободном ядре. На 14 ядрах Apple M4 Pro такой цикл в 8,1 раза быстрее одного потока. Компилятор сам переносит в воркер функцию и всё, чем она пользуется, и ещё до запуска проверяет, что уходящее в другой поток можно скопировать: функцию, экземпляр класса или DOM-элемент туда не отправить. Компилятор написан на TypeScript: лексер, парсер и проверка типов с дженериками, union-типами, null safety и сужением. Типы npm-пакетов и DOM он берёт из .d.ts, а для модулей на Rook сам пишет .d.ts — язык работает с любой библиотекой из npm в обе стороны. Код компилируется в читаемый JavaScript с маленьким рантаймом для каналов и горутин, который импортируется по именам; компоненты компилируются в прямые вызовы DOM, без виртуального DOM. Вокруг языка — npm-пакет rooklang, CLI, плагин для Vite, расширение для VS Code и документация, написанная на самом Rook, с песочницей прямо в браузере.