Что я умею и куда расту

◇

HTML5 / Semantic

Собираю семантическую, доступную разметку: правильные заголовки, aria-атрибуты, микроразметка. Проверяю вёрстку скринридером и Lighthouse — это влияет и на SEO.

Разметка для меня — это структура документа, а не набор div. Использую правильную иерархию заголовков, landmark-элементы, aria-атрибуты там, где нативной семантики не хватает, и микроразметку Schema.org для карточек товаров и статей. Проверяю результат скринридером и Lighthouse: если страницей нельзя пользоваться с клавиатуры, работа не закончена.

Где применял Каждый проект. На e-commerce микроразметка дала товарам расширенные сниппеты в поиске.

◆

CSS3 / SCSS

Grid и Flexbox, кастомные свойства, анимации на GPU, адаптив от 320px. Слежу за новинками: container queries, :has(), View Transitions.

Grid и Flexbox вместо костылей, кастомные свойства вместо магических чисел, анимации только на transform и opacity — чтобы не заставлять браузер пересчитывать раскладку. Адаптив строю mobile-first от 320px. Слежу за новым: container queries, :has(), color-mix, View Transitions — часть уже использую в бою.

Где применял Этот сайт: 44 файла стилей по слоям FSD, вся тема на переменных — смена палитры в одном месте.

JS

JavaScript ES6+

Пишу на чистом JS без лишних библиотек: модули, промисы, async/await, IntersectionObserver, Canvas. Разбираю исходники, чтобы понимать, как всё устроено внутри.

Пишу на чистом JS без библиотек там, где библиотека была бы избыточной. Модули, промисы и async/await, деструктуризация, работа с Canvas, IntersectionObserver вместо слушателей скролла, дросселирование через requestAnimationFrame. Разбираю исходники того, чем пользуюсь, — так магия превращается в понятный код.

Где применял Анимации и фоновые эффекты этого портфолио написаны вручную, без единой внешней зависимости.

⚛

React

Строю масштабируемые интерфейсы: функциональные компоненты, хуки, контекст, мемоизация. Постоянно слежу за обновлениями — сейчас изучаю Server Components.

Функциональные компоненты и хуки, контекст для сквозных данных, мемоизация там, где профайлер показал проблему, а не «на всякий случай». Пишу кастомные хуки, чтобы логика не растекалась по компонентам. Понимаю, когда React не нужен: половину задач быстрее решить без него.

Где применял SPA управления задачами: доска на 500+ карточек с виртуализацией, рендер укладывается в кадр.

⟳

Redux Toolkit

Держу состояние приложения предсказуемым: слайсы, RTK Query, нормализация данных. Понимаю, когда стейт-менеджер нужен, а когда достаточно контекста.

Слайсы, RTK Query для серверного состояния, нормализация данных вместо вложенных объектов. Главное, что понял: стейт-менеджер нужен не всегда — часто хватает контекста или локального состояния, а Redux добавляет церемоний без пользы.

Где применял Трекер задач: нормализованное хранилище, чтобы при обновлении перерисовывалась одна карточка.

▲

Vue 3

Composition API, реактивность, однофайловые компоненты. Использую там, где нужен быстрый старт и лёгкая интеграция в существующий проект.

Composition API, реактивность через ref и computed, однофайловые компоненты. Беру, когда нужно быстро оживить кусок существующей страницы: Vue легко подключается точечно, без переписывания проекта.

Где применял Небольшие интерактивные блоки внутри готовых сайтов.

TS

TypeScript

Пишу на строгой типизации: дженерики, утилити-типы Pick и Omit, типизация ответов API. Ошибки ловятся в редакторе, а не в проде — на больших проектах это экономит дни.

Строгий режим с первого дня, дженерики для обёрток над fetch, утилити-типы Pick, Omit и Partial вместо копирования интерфейсов, честная типизация ответов API — включая поля, которые могут прийти пустыми. Именно эта честность и ловит ошибки: приходится решать, что показать пользователю, ещё на этапе написания кода, а не в проде.

Где применял Перевёл пет-проекты на строгую типизацию — половина привычных багов исчезла.

▤

Адаптив и UI/UX

Mobile-first, тап-зоны, контраст по WCAG, скорость первой отрисовки. Дизайн для меня — не украшение, а инструмент конверсии.

Mobile-first, тап-зоны не меньше 44 пикселей, контраст по WCAG, уважение к системной настройке «уменьшить движение». Проверяю скорость первой отрисовки, а не только внешний вид. Дизайн для меня — инструмент конверсии: красивая страница, на которой не находят кнопку, бесполезна.

Где применял Все проекты. Портфолио выглядит одинаково собранно на 320px и на широком мониторе.

PY

Python

Пишу бэкенд-сервисы и автоматизирую рутину: парсеры, обработка данных, скрипты деплоя. Сейчас углубляюсь в асинхронность — asyncio, конкурентность, профилирование.

Бэкенд-сервисы, парсеры, обработка данных, скрипты деплоя. Пишу по PEP 8, разбиваю логику на слои, не смешиваю бизнес-правила с представлением. Углубляюсь в асинхронность: asyncio, конкурентность, профилирование — понимаю, чем await отличается от блокирующего вызова.

Где применял Telegram-бот учёта расходов, серверная часть портфолио, автоматизация рутины.

◈

Django

ORM, миграции, кастомные модели пользователя, права доступа, админка под клиента. Этот сайт — тоже Django: аутентификация и комментарии написаны с нуля.

ORM и её подводные камни, миграции, права доступа, кастомизация админки под клиента, встроенная аутентификация вплоть до восстановления пароля. Знаю, где ORM генерирует лишние запросы и как это чинить через select_related и prefetch_related.

Где применял Этот сайт: регистрация с подтверждением почты, отзывы, комментарии, форма связи — всё на Django.

⚗

Flask

Микросервисы и небольшие API, где Django избыточен: блюпринты, фабрика приложения, SQLAlchemy.

Микросервисы и небольшие API, где Django избыточен: фабрика приложения, блюпринты для разделения на модули, SQLAlchemy для данных. Ценю за то, что не навязывает структуру — но требует её придумать.

Где применял Внутренние сервисы и прототипы API.

⚡

FastAPI

Асинхронные API с автодокументацией OpenAPI и валидацией через Pydantic. Люблю за скорость разработки и типизацию из коробки.

Асинхронные API с автодокументацией OpenAPI и валидацией через Pydantic. Типизация запросов и ответов из коробки, зависимости вместо ручного прокидывания сервисов. Беру, когда нужен быстрый и типизированный API.

Где применял Бэкенд интерактивной доски: WebSocket-соединения и REST-эндпоинты в одном приложении.

▦

PostgreSQL / SQLite

Проектирую схемы, ставлю индексы, читаю EXPLAIN и убираю N+1-запросы. Понимаю разницу между «работает» и «работает на 100 000 строк».

Проектирую схемы от запросов, а не от удобства чтения кода. Читаю EXPLAIN, ставлю составные индексы под реальные фильтры, ловлю N+1. Понимаю разницу между «работает на сотне строк» и «работает на ста тысячах».

Где применял Каталог интернет-магазина: с 90 запросов на страницу до 6, ответ с 1.8 с до 180 мс.

⇄

REST API

Проектирую понятные контракты: версионирование, пагинация, коды ответов, JWT-аутентификация. Документирую так, чтобы фронтенд не задавал вопросов.

Проектирую понятные контракты: осмысленные коды ответов, версионирование, пагинация, единый формат ошибок, JWT-аутентификация. Документирую так, чтобы фронтенд не приходил с вопросами — а поскольку фронтенд часто я сам, мотивация прямая.

Где применял Все проекты с разделением клиента и сервера.

⑂

Git / GitHub

Ветки, rebase, разрешение конфликтов, осмысленные коммиты, code review. Веду историю так, чтобы через полгода можно было понять, зачем была строка.

Ветки под задачи, rebase для чистой истории, осмысленные сообщения коммитов, разрешение конфликтов без паники. Веду историю так, чтобы через полгода можно было понять, зачем появилась конкретная строка. На код-ревью не спорю, а разбираюсь.

Где применял Ежедневно. Плюс первые пул-реквесты в открытые репозитории.

▣

Docker

Контейнеризую проекты для лёгкого развёртывания: multi-stage сборки, docker-compose для локальной разработки, одинаковое окружение у всех.

Контейнеризую проекты, чтобы окружение было одинаковым у всех: multi-stage сборки для лёгких образов, docker-compose для локальной разработки вместе с базой и Redis. Больше не слышу «а у меня работает».

Где применял Telegram-бот и интерактивная доска разворачиваются одной командой.

▶

Linux / Bash

Настраиваю VPS: nginx, gunicorn, systemd, сертификаты Let's Encrypt. Умею читать логи и находить причину, а не симптом.

Настраиваю VPS с нуля: nginx как обратный прокси, gunicorn, systemd-юниты для автозапуска, сертификаты Let's Encrypt, права доступа и файрвол. Умею читать логи и находить причину, а не симптом.

Где применял Развёртывание боевых проектов на VPS.

◐

Figma

Разбираю макеты по сетке, вытаскиваю токены дизайна, договариваюсь с дизайнером о состояниях компонентов до старта вёрстки.

Разбираю макет по сетке, вытаскиваю токены дизайна — цвета, отступы, типографику — и переношу их в переменные CSS. До старта вёрстки договариваюсь с дизайнером о состояниях: наведение, фокус, ошибка, пустой список, длинный текст.

Где применял Все проекты по чужим макетам.

⟲

CI/CD (GitHub Actions)

Автотесты и линтеры на каждый push, автодеплой на сервер по тегу. Ручной деплой — источник ошибок, автоматизация — спокойный сон.

Линтеры и автотесты на каждый push, автодеплой на сервер по тегу, кэширование зависимостей для скорости сборки. Ручной деплой — источник ошибок и стресса, автоматизация — спокойный сон.

Где применял Пет-проекты: от коммита до выката без единой ручной команды.

⬡

Webpack / Vite

Сборка, code splitting, оптимизация бандла и картинок. Уменьшал вес сборки в 2–3 раза за счёт ленивой загрузки.

Настройка сборки, разделение кода, ленивая загрузка, оптимизация изображений и анализ размера бандла. Понимаю, за что плачу каждым килобайтом.

Где применял Уменьшал вес сборки в два-три раза за счёт code splitting и ревизии зависимостей.

N

Next.js

App Router, серверные компоненты, ISR и SEO-оптимизация. Изучаю по официальной документации и переписываю портфолио как учебный форк.

Разбираю App Router, серверные компоненты, стратегии кэширования и ISR, встроенную оптимизацию изображений и SEO. Учусь по официальной документации и переписываю это портфолио как учебный форк — сравниваю подходы на одной и той же задаче.

Где применял Учебный форк портфолио.

GO

Go

Горутины, каналы, стандартная библиотека. Интересен как язык для быстрых и компактных сервисов рядом с Python-бэкендом.

Горутины и каналы, стандартная библиотека, строгая простота языка. Интересен как инструмент для компактных быстрых сервисов рядом с Python-бэкендом — там, где важна скорость и низкое потребление памяти.

Где применял Пока учебные задачи и небольшие утилиты.

◉

GraphQL

Схемы, резолверы, борьба с over-fetching. Пробую на пет-проекте с Apollo Client.

Схемы, резолверы, борьба с over-fetching и проблемой N+1 через загрузчики. Пробую на пет-проекте с Apollo Client, сравниваю с привычным REST — у каждого свои сильные стороны.

Где применял Пет-проект.

✓

Тестирование

pytest и Django TestCase на бэкенде, Jest и Testing Library на фронте. Учусь писать тесты до кода, а не после багрепорта.

pytest и Django TestCase на бэкенде, Jest и Testing Library на фронте. Учусь писать тест до кода, а не после багрепорта, и проверять поведение, а не реализацию. Пока это самая недоразвитая часть моего стека — и я честно об этом говорю.

Где применял Покрываю тестами новые модули пет-проектов.