Компетенции разработчика

Здесь описан только технический стек. Уровни отмечены честно, без приукрашивания:

• Уверенно — делала много раз, воспроизвожу самостоятельно;
• С поддержкой — делала в команде или под контролем старшего товарища, результат был положительным;
• Изучаю — зона роста, осваиваю сейчас, глубокой автономности пока не заявляю.

Вёрстка и фронтенд

Уверенно

• семантичный HTML5: структура документа, заголовки, списки, таблицы, ссылки, изображения, мета-теги, микроразметка Schema.org (Service, Article, Person);
• Bootstrap 5 self-host: сетки, navbar, collapse, cards, flexbox, утилиты; сборка по схеме «компонент Bootstrap → компонент раздела → страница»;
• CSS Custom Properties (переменные) в :root для централизованного управления палитрой и отступами; единый источник правды — _frontend/style.css, сборка через yarn build;
• самохост шрифтов и графики: @font-face (woff + ttf, font-display: swap), inline-SVG иконки (чёткость на Retina, управление цветом через CSS), фавикон SVG + PNG-версии;
• vanilla JS (ES5, совместимо с Webpack 2): IntersectionObserver с threshold: 0 для плавного появления блоков, якорная прокрутка с учётом высоты sticky header, закрытие мобильного меню, активация скриптов в AJAX-блоках;
• CSS scroll-snap для каруселей вместо Swiper/Slick; полноширинные блоки через width: 100vw; margin-left: calc(50% - 50vw);
• Open Graph: статичная og:image с абсолютным https-URL, явные og:image:width и og:image:height;
• предотвращение CLS: явные width и height на всех <img> и иконках; scroll-margin-top для якорей под sticky header.

С поддержкой

• сложные адаптивные сценарии — по справочнику, с визуальной проверкой каждого шага;
• прототипирование сразу в HTML: HTML-муляж (один index.html со всеми блоками) для визуальной проверки до заливки на сервер;
• визуальный QA после рефакторинга: точечная правка отступов и цветов после смены классов BS3 → BS5.

Изучаю

• глубокую спецификацию CSS и сложные адаптивные сценарии без справочника.

Архитектура, ТЗ, прототипирование

Уверенно

• проектирование сайтов от данных и контента, а не от визуала: цель → контент → таблицы и поля → прототип → вёрстка;
• эволюция по уровням сложности: чистая статика → генератор (Jekyll) → PHP с инклудами и AJAX → Jekyll + Webpack + CI/CD;
• карта смыслов как основа архитектуры лендинга;
• ТЗ дизайнеру (с учётом принципов UX/UI) и программисту; ТЗ на базы данных с прототипами таблиц;
• декомпозиция проекта в задачи: в Figma и в таблицах, со скриншотами, до последней кнопки;
• ADR (Architecture Decision Record): фиксация архитектурных решений, например отказ от гибрида BS3+BS5 в пользу полной миграции на Bootstrap 5 + Vanilla JS (Путь Б);
• макеты брифов и сводные таблицы готовности проектов по этапам.

С поддержкой

• дизайн в Figma — на уровне постановки задач и ревью результата;
• проектирование от визуала (в дополнение к привычному проектированию от информации).

Генераторы, серверная логика, автоматизация

Уверенно

• Jekyll 4.2.2: YAML-фронтматтер, лейауты, инклуды, условный рендеринг, теги, перелинковка, хлебные крошки, Liquid-шаблоны;
• Node.js скрипты для автоматизации: парсинг YAML-фронтматтера через js-yaml@4.1.0, генерация индекса тегов (build-tag-index.js), утилита чтения постов (yb.js) с обработкой BOM и кириллицы;
• Webpack 2.5.1: сборка _frontend/ в public/bundle.css и public/bundle.js (минимизация bundle с 100+ КБ до 7.3 КБ);
• PHP 7.4+ для уровней 3–4: инклуды с защитой от прямого доступа (APP_ACCESS), свой обработчик форм с honeypot + валидация + логирование в файл + отправка через mail(), без БД и Composer;
• AJAX-подгрузка блоков через fetch() + IntersectionObserver, с пересозданием тегов <script> внутри вставленного HTML;
• Disqus как публичная лента + своя форма как основной канал обратной связи;
• тесты валидации контента на mocha + should + cheerio: проверка заголовков, тегов, изображений, обязательных полей, лимитов постов на тег.

С поддержкой

• SQL-базы: ТЗ на таблицы, создание таблиц с полями и связями, прикручивание к админке; часть ошибок выцеживала сама;
• логика «таблица появляется, когда контента становится больше одного» — проектирование данных под рост проекта.

Изучаю

• уверенный бэкенд-кодинг: серверная логика, очереди, фреймворки — пока делегирую или делаю в паре с программистом; для текущих задач уровня 1–5 этого не требуется.

Процессы разработки, Git, CI/CD, QA

Уверенно

• Git: атомарные коммиты, слияния, разрешение конфликтов, чтение логов сборки, распознавание типов ошибок, обнуление истории при переносе проекта;
• GitLab CE на собственном VPS (Ubuntu 22.04): установка с нуля, регистрация shell runner под личным пользователем, теги раннеров под разные проекты (smoothness, yagaya);
• CI/CD через .gitlab-ci.yml: стадии build → deploy → test, деплой только из ветки main, раскладка _site/ через rsync --delete;
• ведение задач: Taiga, Asana, Basecamp, чек-листы; движение по статусам «новое → в работе → можно проверять → на ветку → на мастер → на бой» без откатов назад;
• релиз-менеджмент в тестировании: верхняя точка цепочки QA, проверка задач перед выкаткой;
• инструкции: пишу и редактирую сама, обучаю команду работать по ним;
• аккаунтинг и ведение до пяти проектов одновременно, включая общение с клиентами;
• обучение сотрудников тому, что ещё недавно осваивала сама: вёрстка, дизайн, анимация, основы программирования.

С поддержкой

• локальная среда на Windows: RubyInstaller 2.7.6 + DevKit, nvm-windows + Node 12, yarn, Bundler; файл force-utf8.rb + переменная RUBYOPT для обхода проблем кодировки;
• настройка сервера (nginx, certbot, DNS) — по инструкции из 10 шагов, разово.

Изучаю

• быстрое чтение чужого кода: где работал разработчик вижу, ошибку в простом выцеживаю при погружении — скорость ещё нарабатываю.

SEO, аналитика, контентный конвейер

Уверенно

• техническое SEO: мета-теги, заголовочная структура, robots.txt, sitemap.xml, хлебные крошки с <nav aria-label="breadcrumb">, перелинковка;
• Яндекс.Метрика (счётчик 93243638) и Google Analytics: сбор и анализ статистики посещаемости, A/B-тесты, работы по улучшению юзабилити;
• контентный конвейер: Word (смыслы) → Notepad++ → автозамена → вёрстка; макросы Word для пакетных операций и вставки разделителей <article> перед заголовками;
• дайджесты: коды серий во фронтматтере, логика и ТЗ скрипта сборки — код писал программист, логика, приёмка и вычитка мои (435 ссылок в выпуске, собранных не руками);
• трёхшаговая сборка Jekyll-проекта: node ./bin/build-tag-index.js → yarn build → bundle exec jekyll build;
• JSON-описания тегов (_data/tagsdesc.json) с короткой и развёрнутой версией для каждой из тематик.

Инструменты

• Уверенно: VS Code, Notepad++, Git (GitHub Desktop, GitLab CE), Taiga, Axure, Figma (просмотр и декомпозиция), Canva (графика для сайтов), Word (макросы и автозамена), Jekyll 4.2.2, Node 12 (nvm-windows), yarn, Webpack 2.5.1, Ruby 2.7.6 (RubyInstaller + DevKit), mocha + cheerio для тестов;
• С поддержкой: nginx, certbot, shell runner на Ubuntu 22.04 — по инструкции, разово;
• Осознанно не использую: Docker, Vagrant, jQuery, Bootstrap 3, Composer, MySQL, фреймворки (React, Vue, Angular) — для текущих задач уровня 1–5 это избыточно.

Зоны роста

• кодинг: PHP и JavaScript на уровне мелких задач и заучивания синтаксиса; путь «от „могу объяснить программисту логику" к собственному коду» прохожу сейчас;
• локальный wdm-гем для ускорения наблюдения за файлами на Windows (сейчас Jekyll опрашивает файлы вместо событий);
• доводка лейаутов до стандарта BS5/Cards/Flexbox — по запросу, партиями;
• pushState для AJAX-блоков: прямые ссылки на блоки и кнопка «назад» в истории браузера;
• сложные адаптивные сценарии и спецификация CSS — пока со справочником, с постепенным переходом к автономности.

Я не программист по образованию и осваиваю всё в бою, на лету. Мне нужно понять задачу с третьего раза, зато дальше навык встаёт в руки и воспроизводится.

Факты вместо прилагательных

• продающий лендинг на 39 блоков — 4 дня от идеи до запуска в производство: карта смыслов, прототип, декомпозиция, ТЗ на дизайн и анимацию;
• ТЗ на базу данных из 16 таблиц с прототипами и последующим созданием таблиц и прикручиванием к админке;
• до пяти проектов в аккаунтинге одновременно плюс ведение, декомпозиция и разработка инструкций;
• 16 веб-проектов в портфолио за 1999–2026 годы: чистый HTML, PHP и CMS, генераторы с Git и CI, Laravel с админкой Nova;
• собственный GitLab CE на VPS: установка с нуля, shell runner под личным пользователем, CI/CD для smoothness.ru и personal-myth.ru;
• миграция JS-стека (Путь Б): полный отказ от jQuery и Bootstrap 3, замена zoom.js на zoom-vanilla.js, gajus.Contents на toc-vanilla.js; bundle.js с 100+ КБ до 7.3 КБ;
• исправление парсинга YAML: замена устаревшего yfm на js-yaml@4.1.0 с обработкой BOM, что позволило корректно считывать кириллические теги в массивах;
• умение разгребать не только с нуля, но и чужой хаос: «мне в кайф конструировать новое, разбираясь в том, что создали до меня».

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

Подробнее о том, как я учусь и ошибаюсь, — в дневнике о разработке веб-сайтов и IT-проектов.