Резюме

Бирюков Олег
Разработчик
mail@obiryukov.ru Skype - knightdk94
Возраст - 30
Город - Москва
www.obiryukov.ru
Профиль

Если в двух словах - я сторонник применять разумные подходы. Всего невозможно знать, поэтому в процессе, когда с чем-то сталкиваешься - разбираешься, находя описание опыта других людей, документаций и статей. 

Комфортная разработка возможна только в комфортных условиях. Если хочешь что-то создать красивое - окружаешь себя красотой; если что-то полезное - полезными вещами, дабы видеть их практичность и как они устроены. 

Вообще я за то, что отличный программист - знает отлично математику. А Я хороший программист, который умеет искать решение и применять какие-то методы, во всяком случае помню об этом и это моя цель - быть таким программистом.

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

Ниже отмечу то с чем сталкивался. Что использую часто помечены ✅, а то что уже не использую, но сталкивался - ⬜

Опыт

2017 - 2023

Fullstack Программист + DevOps + Веб-дизайн

ООО "СОФИС"

Основной аспект - техническая поддержка веб-проектов (разработка новых и поддержка старых решений, ведение документации кодовой базы и внутренних процессов). 

Внедренные технологии - MkDocs, Youtrack, GitLab, Jenkins, Zabbix, Nginx proxy, vault, локальные smtp на базе docker'a. Корпоративные порталы на Битрикс24 - созданы приложения связывающие сайт и портал, созданы бизнес-процессы для CRM, настроены открытые линии. 

Количество сайтов - 9 шт основных ресурсов + 10 шт клонов на разных языках. Все ресурсы в основном на Битрикс: управление сайтом - Малый бизнес и выше. Разработаны решения для мультиязычного проекта на одном движке, работа с местоположениями как битрикса, так и общей структурой по разным странам, валют, округлений цен, оформление заказа, доставки и оплаты. Закупка машин и настройка сети между хостами из разных сетей, проксирование трафика в локальную сеть. 

Верстка рассылок, проставление доверенного домена для рассылок, вывод доменов, которые попали в черные списки (не из всех удалось вывести - первые рассылки до прихода представляли из себя нарезку картинок, что распознавалось как спам).

Разработка/поддержка ресурсов

https://my7days.ru (https://7days.beauty/) - Подробности: https://obiryukov.ru/portfolio/development/websites/razrabotka-sayta-my7days

Ранее были также ресурсы https://vilenta.su https://levitasion.ru https://antimos.ru. В 2023 году эти ресурсы упразднили и сделан редирект на текущий сайт. Редирект был произведен автоматическим поиском по ассортименту на старых сайтах, чтобы ссылки сохранились в поиске и на старых постах в соц.сетях.

Основня задача - поддержка проекта. Была выполнена верстка и разработка решений для проекта. Задач по этому проекту очень много, обозначу основные, которые были интересны мне

  • Реализовать мультисайтовость на проекте, где каждый сайт будет со своим языком
  • Оптимизация проекта, добавить композитwebp и т.д.
  • Изменение стандартного оформления заказа
  • Разработка индивидуальных наборов свойств, библиотеки для проекта и разработка отдельных библиотек под стандартные решения
  • Интеграция заказов с Битрикс24
  • Почтовые шаблоны
  • Очистка неиспользуемых файлов из upload/iblock и webp из resize_cache
  • Добавление редиректов из соц. сетей на маркетплейсы (amazon, ozon, wildberries и т.д.)
  • Разработка динамических посадочных страниц для товаров
  • Методика работы для аналитиков
  • Разработать фиды для google и yandex (на каждом языке)
  • Разработать решение для вывода информации по утилизации упаковки товара
  • Реализовать хранение и наполнение документации к проекту
  • Разработать модули для проекта:
    • REST API
    • Забор графического контента из instagram
    • Маркетплейсы к каждому товару
    • Выбор сайта с нужным языком + карта покрытия стран по сайтам 
    • Карта сайта (мультисайтовое решение)
    • Очистка кеша для инфоблоков по дате начала активности или окончанию (инфоблоки, правила работы с корзиной)
    • Комментирование
    • Настройка скидок (мультисайтовое решение с разграничением прав)
https://korobator.ru/ - подробности: https://obiryukov.ru/portfolio/development/websites/razrabotka-sayta-korobator

Разработать сайт для школы правильной упаковки. Цель ресурса - освещение событий школы (анонсы, записи на мероприятия, архивы записей). 

Нужно разработать концепцию дизайна (на руках есть логотип и типографика), сверстать проект и перенести на систему управления контентом Битрикс.

Событие имеет тип - оффлайн или онлайн событие. У оффлайн события должна быть возможность интеграции с сервисом Timepad через поля Timepad Customized и Timepad Event ID.

Также, у события могут быть свои цены, действующие до какого-то момента. Например, есть событие с набором цен - 4500 руб. до 01.10.2019, 5000 руб. до 05.10.2019.

https://job.my7days.ru/ - подробности https://obiryukov.ru/portfolio/development/websites/razrabotka-sayta-s-vakansiyami-dlya-my7days

Требования к ресурсу:

  • Располагаться должен на поддомене
  • Иметь фильтрацию ваканский по полям - Требуемый опыт работы, Регион размещения вакансии, Рабочие области
  • Выводить данные по дате размещения ваканскии, позицияоплата трудагородметротип занятости,требуемый опыт
  • У каждой ваканскии добавить систему оставления отзыва. Данные по отзывам отображать на странице со списком и в самой вакансии
  • Добавить форму отклика на вакансию
  • Связать отклики с Битрикс24, и направлять письма на почты hr

https://b2box.ru - подробности https://obiryukov.ru/portfolio/web-design/websites/redizayn-i-verstka-sayta-b2box

Задачи:

  • Предложить свежую версию дизайна сайта b2box с сохранением всех его основых возможностей.
  • Поддержка, создание страниц с кейсами

https://dbranding.ru/

Задача:

  • Создать ресурс для брендингового агенства на Битрикс (верстка + программирование + интеграция с Битрикс24 лидами)

2015 - 2017

Системный администратор

ООО "Р-КОНСЛАТ"

Обслуживание компьютеров и серверов предприятия и их клиентов. Установка, настройка, обновление программного обеспечения. Осуществление технической и программной поддержки пользователей, консультация пользователей по вопросам работы локальной сети и программ. 

Настройка антивирусной защиты локальной вычислительной сети, серверов и рабочих станций. Составление и анализ спецификаций на закупочное оборудование. Прием, монтаж, настройка оборудования. 

Также в процессе работы дописывал CRM "Клиентская база" под нужды предприятия (Создание макетов e-mail рассылок, напоминаний на e-mail, документы печати и т.д.), синхронизировал vTiger, реализовал редизайн и программирование старого сайта.

2013 - 2014

Учебный ассистент

МИЭМ НИУ ВШЭ

Предметы - физика и программирование (языки - Pascal, C/C++, C#). 

Помощь преподавателям в проведении семинаров, практики, лекций. Проверка домашних, зачетных и лабораторных работ. Подготовительные работы к лекциям. 

Участие в жизни кафедр физики и систем автоматического проектирования. Разработка методов усвоения технической информации, поиск и отсеивание информационного мусора. 

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

Образование

2011 - 2015

Бакалавр

МИЭМ НИУ ВШЭ

Окончил МИЭМ НИУ ВШЭ. Программа бакалавриата по направлению подготовки 09.03.01 Информатика и вычислительная техника. Кафедра информационных технологий и автоматизированных систем. Готовили как программистом, так и айтишником.

Навыки

DESIGN

Дизайн

Разбираюсь в UI/UX решениях, занимаюсь веб-дизайном (от обработки фотографии, создания баннеров до целого проекта по веб дизайну). Занимался редизайном проекта, прототипированием и исследованиями. Когда-то было хобби - делать промо видео в After Effects + Sony Vegas, но отошел от дел в пользу разработки. Занимался векторной графикой, допечатной подготовкой макета, печатью сувенирной продукции. А также параметрическим 3D-моделированием в Cinema4D, 3ds Max + скульптингом в ZBrush

Поскольку являюсь разработчиком и знаю компоненты непосредственно реализуя их, то знаю какие нужны дополнительные экраны/поведения/выводы, а значит имею представления о том как должна складываться пользовательская история. Обладая критическим и аналитическим мышлением могу складывать различные интерфейсные задачи в единую картину, отсюда есть понимание о том, каков должен быть дизайн со стороны пользователя (держу в голове разные особенности людей - дислексия, дальтонизм, возрастные особенности внимания и прочие вещи связанные с ограничениями как физическими, так и психологическими). Как раз поэтому сторонник более сдержанных тонов/акцентов - в моих работах не увидеть какой-то вычурности или оступов от правил.

Обладаю знаниями и опытом:

  • в построении систем отступов (соблюдение ритма, правил трети)
  • в типографике
  • в иконографике
  • создании палитры цветов
  • в семантике цветов
  • в токенизации для дизайнеров и разработчиков 

Знаю теорию цвета не по наслышке, а именно различные цветовые пространства (Adobe 1998, sRGB, DCI-P3 и другие) с их особенностями и точками белого D50, D65 и т.д. Как работать с контрастом по стандартам WCAG2, APCA. Знаю что такое однородно-перцепционная модель цвета, и умею делать такие палитры цветов на проекте (создал для этого свой инструмент: https://wanderer20.github.io/design-system-palette/)

Есть навык создания дизайн-систем в Figma (переменные, иконки, компоненты, цвета, AutoLayout, Variants, многостраничные документы, схемы (FigJam), подготовка макета для разработчиков, дизайн-токены, работа со свойствами component swap, nested instances). Все компоненты и варианты привожу к базовым, от которых потом наследуюсь, чтобы получать стилистику. Знаю некоторые фишки, например как красить иконки в компонентах автоматически при смене иконки в инстансе. По дизайн-токенам описал свои знания и опыт в статье, рассказывающей о них: https://dev-master.ru/post/design-tokens

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

Результаты

  • с нуля собрал 3+ дизайн-системы
  • разработал 40+ прототипов для задач клиентов
  • разработал самостоятельно 30+ дизайн-проектов, самостоятельно реализовал больше половины от этого числа
  • решил более 500+ задач по выводу данных в структурно-построенный пользовательский интерфейс
  • написал инструмент по разработке палитры цветов, сберег тем самым более 20ч от каждого проекта
  • написал статью, помогающую лучше понять что такое дизайн-токены и какие они бывают в разработке

Инструменты

Основные программы

  • ✅ Adobe Photoshop
  • ✅ Adobe Illustrator
  • ✅ Adobe XD
  • ✅ Figma

Создание иконочных шрифтов

Сжатие графического контента

AI

  • Gigapixel AI - upscale изображений
  • ✅ Stable Diffusion - генерация изображений txt2image, image2image

Прототипирование

  • ✅ Axure

FRONT-END

Верстка, фронт-логика

Мир фронта развивается каждый год, поспеть за всем - реально, если заниматься только работой и только в этой сфере, поэтому оцениваю свои знания на твердом хорошем уровне. Опыт ведение старых проектов на старых технологиях и разработка на новых - это позволяет. 

Результаты

  • Более 100+ сверстанных веб-проектов от 5+ шаблонов в каждом
  • Более 50+ проектов legacy переведенных на webpack/vite
  • Более 40+ оптимизаций
  • Более 400+ исправленных ошибок в проектах клиентов
  • Опыт работы как с проектами использующими JS-фреймворки (больше 10+ проектов), так и без них (более 100+ проектов)

Технологии и инструменты

Разметка

  • HTML5 - заголовки, секционный контент, фразовый контент, интерактивный контент, встраиваемый контент - 5 типов потокового содержимого. (Знаю разницы между b/strong, article/section, figure/picture и т.д.)
  • ⬜ HTML4 - одно объявление doctype чего стоило запомнить)

Препроцессоры

  • ✅ SASS/Scss - но только scss

ECMAscript

  • ✅ ES6+

Фреймворки

  • ✅ vue3 - его на react не променяю, декларативный стиль как был любимым еще со второй версии так и остался
  • ✅ nuxt3 - использую как USR, нравятся новые хуки, роутинг, автоимпорт, модули сервера и контента
  • ⬜ vue2 - c 2022 перестал использовать его в силу выхода vue3 с его promise-подходом и другими улучшениями
  • ⬜ nuxt2 - использовал только для SSR

Разное

  • ✅ Typescript - только то, что действительно необходимо знать, и что чаще всего используется. Скорее всего надобность где-то в 2028 году отпадет, поскольку ecma ведет javascript к типизации, а там typescript сам отвалится за ненадобностью, потому что будет в самом языке

Сборщик модулей

  • ✅ vite - лишь с vue3 стал его использовать также и на обычной верстке
  • ⬜ webpack - чуть продвинутее gulp'а, начинал с 4 версии. Верстка в основном была на нем. Сейчас не использую на новых проектах, но поддерживаю старые на нем
  • ⬜ gulp - старый и добрый сборщик, можно было спокойно разделять html страницы при обычной верстке

Подходы

Шаблоны проектирования (Паттерны)

Порождающие

  • Одиночка (singleton) - в основном для http-клиента или одиночных instance'ов
  • Абстрактная фабрика (abstract factory) - как пример: валидация с разными полями формы 
  • Строитель (builder) - применял только в quiz-компонентах и калькуляторах, когда пошагово нужно взять данные и дать результат на основе данных с шаговв конце цепочки или в процессе
  • Прототип (prototype) - использовал часто в 3D/2D выводе данных при создании графики с примитивами и выводом canvas (например, в babylon.js), использую его или абстрактный метод

Структурные

  • Фасад (facade) - когда нужно что-то сложное заизолировать. Например, во фронте использовал для обработки графики, пряча функции по оптимизации, ресайзу и конвертации под капот
  • Декоратор (decorator) - например, использовал для отображения разного рода ошибок, уведомлений, запросов

Поведенческие

  • Посредник (mediator) - облегчал связанность через общий синглтон медиатора. Благодаря этому можно было выстреливать событиями и передавать данные из одной точки кода в другую с последующей обработкой
  • Наблюдатель (observer) - использовал для слежения за выполнением какой-либо задачи в приложении

Принципы

  • ✅ YAGNI (You Aren't Gonna Need It) - при рефакторинге убраю то, что не понадобится в проекте. А то что можно воскресить - лежать будет в git'е
  • ✅ DRY (Don't Repeat Yourself) - все что повторяется - убираем в одно место. Благо IDE помогает это отслеживать во всем проекте, а то за всеми не уследить кто и что написал
  • ✅ KISS (Keep It Simple, Stupid) - если можно сделать проще - делаю. Смысл тянуть в проект что-то новое и не всем известное, думать нужно еще о новичках на проекте и в сфере в целом. Конечно же основной смысл - резбиение "монолитных" методов/классов
  • ✅ BDUF (Прежде всего глобальное проектирование) - сначала думаю, рисую схему будущего компонента (если он сложный), продумываю какие будут интерфейсы, что понадобится, анализирую похожее и то что потребуется в разработке. В общем, задачу проектирования никто не отменял
  • SOLID - вечная проблема с этой аббревиатурой, запомнить эти названия и расшифровки, но сами принципы в голове держатся, потому что сам к этому прихожу и есть опыт применения того, что эти принципы выражают
    • Single-responsibility principle (Принцип единственной ответветственности) - чтобы не было каши (или как еще называют спагетти-код), нужно чтобы класс/объект/метод отвечал за что-то одно
    • Open-close principle (Принцип открытости-закрытости) - не трогаем объекты, но добавляем возможность расширения. Например, фильтрация списка элементов: есть список, добавляем компонент фильтрации над этим списком, и тем самым расширили компонент списка возможностью фильтрации (во vue за счет реактивности - это делать естественно)
    • Liskov substitution principle (Принцип подстановки Лисков) - объекты старших классов должны заменяться объектами подклассов без ущерба работы приложения. Например, форма, где внутри будет слот и кнопка, в приложении внутри этой формы будут занесены несколько полей. Такую форму можно будет переиспользовать на другом наборе полей, работа программы не изменится.
    • Interface segregation principle (Принцип разделения интерфейсов) - проще говоря, смысл такой: не делать кучу интерфейсов (плодя зависимости) на один объект. Т.е. не перегружать компоненты или классы тем, что можно разбить и вынести в другие смысловые единицы, дабы в объекте не использовались лишние интерфейсы, которые придется отслеживать и поддерживать
    • Dependency inversion principle (Принцип инверсии зависимостей) - чтобы уменьшить связанность нужно использовать абстракцию, например DI-контейнер, через который обращались бы модули. 
  • APO (Avoid Premature Optimization) - нужно избегать преждевременную оптимизацию, для того чтобы не пробуксовывать. Иначе оптимизировать можно до посинения, и очень много времени на это потратить
  • Бритва Оккама - не лепить сущности без необходимости. Всегда отвечать на вопрос - зачем я это делаю?

Архитектура

  • FSD - подходит только для фронта, и только для приложений (не для своих модулей/библиотек - там лучше модульную или вертикальную в простом виде)
  • ⬜ Вертикальная - была прям хороша, но не доведена до FSD
  • ⬜ Модульная - когда-то использовал её, пока не уперся в связанность между модулями, наткнулся на вертикальную
  • ⬜ DDD/CA - да-да, пробовал архитектуры из бекенда применить на фронте)) в принципе можно делать, но есть получше. Эти архитектуры предназначались в первую очередь для прикладных приложений на ПК, поэтому для них они хороши. А когда фронт и бек разделен - возникает вопросы как быть, куда интерфейсы складывать, портами во фронте избыточно пользоваться, а для бека вполне подходит такое

Vue API

  • ✅ Global API - app.use, app.config, app.provide, nextTick, defineComponent
  • ✅ Composition API - использую во vue3 и nuxt3
  • ✅ SFC - Single-File Component. Стараюсь использовать постоянно defineProps, defineEmits, defineExpose, v-bind
  • ✅ Typescript - PropType, ExtractPropTypes, CSSProperties
  • ⬜ Options API - использовал во vue2

Библиотеки и плагины

Библиотеки/плагины, которые использую и использовал. Соответственно тут не все, только то что больше всего запомнилось и использовалось

Javascript/Typescript

Запросы

  • axios - использую как клиент для http-запросов везде кроме nuxt3 (там есть useFetch)
  • http-status-codes - вместо чисел 404, 200, 301. Все же лучше запоминать ключи, а не значения

Анимация

  • gsap - мощный инструмент по работе с анимацией. Когда-то был очень тяжелым, что делился на несколько либ (tweenmin, tweenmax и т.д.) и было неудобно подключать и пользоваться, приходилось искать какие-то замены. Сейчас уже такой проблемы нету, можно пользоваться только им.

Тесты

  • jest - тестирование js

WebGL

  • ⬜ Babylon.js - использовал для вывода дизайн-форм с принтами или концептами в сцену и использование этого добра на странице с превью модели конструкции

Разное

  • chroma.js - работа с цветом
  • apca-w3 - работа со стандартом APCA для контрастности цвета
  • classnames - упрощенная работа с классами
  • lodash-unified - в основном для глубокого объединения объектов, но и другие функции тоже использую. Использую всегда ее, поскольку это объединение для ESModule и CommonJS
  • plural-ru - когда нужно просклонять что-то
Vue/Nuxt

UI

  • element-plus - отличные компоненты для подавляющего количества задач, хорошая концепция с config-provider для форм. Использую с vue3 очень часто.

Tables (таблицы) 

  • vue-ganttastic - очень хороший гант, по сравнению с другими компонентами. Есть TS, поддержка vue3, есть реактивность и адаптивность, нужные события и разнообразие в слотах
  • vue-data-tables - хорошая реализация таблиц, но поскольку element-plus обновил свои таблицы, то уже не использую

Notification (уведомления)

  • vue3-toastify - все есть из коробки, даже не нужно иконки грузить
  • notivue - очень приятная, подходит для мобильных уведомлений. Под капотом очистка при свайпе, есть возможность настроить темы, а также настроить лимиты

Loaders (лоадеры/скелеты)

  • vue-content-loader - незаменимая и удобная вещь, которую видел. Очень легкая, на чистых функциях (tree-shaking хороший). А также можно закидывать почти любую SVG. И бонусом есть классный инструмент по созданию лоадеров. Задумывалась для react.js, но сделали порт для vue
  • vuejs-loadmore - китаец сделал удобный компонент для мобильных устройств, когда нужно повторить свайп вниз и обновить данные
  • epic-spinners - когда дизайнер не может придумать крутой спиннер или его не было в проекте. Использую не только во vue, удобно сделаны стили, можно не перекрывать, а прям заменять переменные через scss 
  • v-lazy-component - когда нужен рендер компонента при скролле. Использует Intersection Observer API, легковесный, все в порядке с событиями. Есть приятная анимация, плохо что не будет в IE работать эта анимация, но все норм.
  • vue-virtual-scroller - классная тема, даже Evan You заценил. Очень быстрая прокрутка любого объема данных, вот бы в element-plus ее включили в таблицы, было бы замечательно
  • vue-lazyload - плохо, что только для изображений сделали, но то что есть - уже хорошо. Есть классы на 3 состояния: загужается, загружено, ошибка. Поддержка динамической смены картинки. Есть события на перехват и удаление слушателей. Поддержка vue2/vue3

Progress (прогресс)

  • vue-progress-path - если нужно быстренько заанимировать прогресс на кастомной SVG, давно использую, но сейчас уже отходит надобность в силу встроенных уже в UI-kit'ы подобий
  • vue3-progress - слизано у nuxt3, но как фишка - можно запускать прям из interceptor'ов axios'а или useFetch от nuxt3. Кастомизация совсем простая, достаточно изменить переменные в scss. Остальные прогрессы после этого не рассматриваю
  • easy-circular-progress - круговой прогресс. Старый компонент, но удобен тем, что есть scss смена стилей. Малец тяжеловат, но для простых вещей подходит

Searching (поиск)

  • vue-word-highlighter - легкий компонент, есть динамичный поиск, чувствительность к регистру, поиск по фразе целиком, так и частично. Найденное совпадение помечается как <mark>, стилить нужно контейнер с mark'ами
  • hippie-nav - современный интуитивный компонент для поиска. Своеобразный проброс данных и действий, но интересный.

Tooltip (тултипы)

  • Tippy.vue - классика от ваниллы. Нравится, что исчезает из DOM, есть директивы, поддерживает динамику, есть слот и есть свойство на что повесить цель наведения - это удобно, не нужно писать лишние события на ref'ы
  • vue-follow-tooltip - если нужен тултип, гоняющий за указателем. Стилить приходится перекрытием. Есть директива. В целом ничего такой

Overlay (перекрытия)

  • fancybox - приятный и удобный lightbox. Не нужно париться с иконками, добавил и подключил. Есть возможность использовать внутри 
  • vue-modal - модалки с запоминанием цепочки. Легкий компонент, правда стремный, есть слоты на footer, header. Для простоты и без использования element-ui подойдет
  • vue3-side-panel - лучшая боковая панель с блокировкой прокрутки контента (BSL) не ломая скролл (на iOS особенно, с их вечно долбанутым safari)
  • vue-final-modal - неплохой вариант, когда не нужно писать собственные диалоговые окна. Ломается с несколькими инстансами, лучше использовать свое или из element-ui

Form (форма)

  • FormSchema Native - когда в проект не хочется тащить весь element-ui
  • multiselect - мощный компонент, можно закидывать свои элементы форм внутрь. Есть возможность программно закинуть открытие и фокус
  • v-year-calendar - годовой календарь, есть языковая поддержка. Для задач на показ нескольких событий на дату не подойдет, нет слотов. Только как-то монстрячить стили
  • vue-fake-input - когда в ломы делать кастомный компонент на введение кода из смс или email. Работает с ssr, есть возможность менять шрифт и цвета через props'ы, работает через v-model, событий никаких нет
  • vue-filepond - классный, но со своими заморочками. Приходится делать еще один endpoint на беке для того чтобы это чудо завести. Есть превью для изображений, встроенный обработчик изображения при загрузке. Нужно помнить и убирать из ssr. Нет возможности перевести сразу все, только через props с названиями label (они не реактивны, при общей смене языка нужно перерендеривать компонент). Есть валидация размера и разширения файла через плагины. Это довольно заморочливо в условиях общей валидации формы. Удобство посредственное. Стилить только перекрытием. Есть возможность задавать чанки при закидывании на хост большого файла, также устанавливать задержки перед повторной отправкой. 
  • vue-tel-input - удобный ввод номера с маской и выбором страны
  • vue-phone-number-input - еще один хороший компонент, с валидацией. Но разметка часто не подходит
  • vue-datepicker-next - подавляющее количество экранов есть, можно переводить, есть поддержка использования moment.js в его формате (тащит зависимость)
  • vue-color-kit - выбор цвета, есть поддержка события на смену значения (работате не через v-model, что отлично для компонента по выбору цвета)
  • vue-input-facade - отличная маска на input'ы. Есть директива.
  • vee-validate - валидация формы, можно много сделать своего. Есть декларативный стиль
  • vuelidate - валидация формы, нравится что можно сделать схему с динамической валидацией проще, чем во vee-validate (это даже проще для перевода).
  • vue-datepicker-ui - хороший, но нет языковой поддержки. Только формат даты есть. Не использую, поскольку есть похожее в element-ui. Но если бы появилась поддержка языка - был бы лучшим
  • vue-multiselect - мультиселект попроще, без зависимостей . Есть фильтрация (поиск), поддержка async, разбивка по тегам
  • vue-media-upload - простой компонент с подгрузкой только изображений. Есть превью. Слотов нету, убирать и стилить что-то через перекрытия.

Icons (иконки)

  • element-plus-icons - пак, где собраны только svg без припуска. Удобно вкидывать в компоненты ожидающие только svg
  • vue-awesome - хороший пак, всем известных иконок. Перестал использовать поскольку тяжел, и платные иконки неудобно использовать. А также использование через компонент <v-icon name="iconName">, что уже неудобно. Для слотов, которые на вход ждут только svg - не подходит пак.

Carousel (карусель)

  • swiper - супер карусель, есть поддержка ssr.

Charts (чарты)

  • vue-chartjs - обертка над оригиналом. Если нужен ssr, лучше использовать оригинал напрямую, задав разметку и оставив рендер с расчетом на браузер. Но можно заранее расчитать данные и отдать браузеру только на отображение

Time (время)

  • v-idle - простой способ понять бездействует ли пользователь
  • vue-moment - обертка над оригиналом moment.js

i18n

  • vue-i18n - плагин для перевода проекта

Хранилища

  • pinia - топовое хранилище, правда нет такой возможности для дебага как во vuex'е при разросшемся хранилище. Но есть возможность использовать в режиме usr или ssr
  • pinia-shared-state - сихронизация хранилища между владками браузера
  • pinia-undo - реализация истории хранилища (вперед/назад)
  • pinia-persistedstate - сохранять и восстанавливать состояние между перезагрузками страницы
  • vuex - после pinia не хочется возвращаться

Разное

  • vue-router - куда же без него
  • vueuse - офигенный набор инструментов, который постоянно нужен на проекте, чтобы не писать велосипеды. Нужная коллекция Composables. Всегда обновляю свежими версиями
  • vue-code-block - подсветка синтаксиса кода, есть две либы PrismJS и Highlight.js. Единственный момент - работает только как компонент, т.е. нужно получить контент, затем его распарсить и закинуть в шаблон. Это неудобно, когда нужно вывести только на клиент 
  • vue-connection-listener - слежение за потерей соединения
  • vue-identify-network - слежка за скоростью соединения
  • vue-katex - отображение формул формата KaTeX, легковесная. Есть директива и авторендер внутри блока.
  • vue3-calendar-heatmap - календарик как на github'е. Компактный и удобен если нужно показать активность или uptime например
  • vue-recaptcha - гугловская капча
  • vue-draggable - drag and drop без зависимостей. Есть полифилы для IE9
  • vue-slicksort - офигенный набор для созданий канбана или перемещаяемых карточках в списках. Есть все направления (в том числе и диагональные), приятная анимация, автоскролл, работает на v-model. Автономные компоненты. Можно делать запреты на перемещение в какой-нибудь список. Пушка)
  • sortablejs-vue3 - обертка над оригинальным sortable.js. Без проблем с vue.draggable. Поддержка всех событий. Можно использовать плагином, есть хранилище (но нужно тиком "обновляться")
  • vue-use-paginator - реактивная пагинация, только хуки. Есть все что нужно
  • vue-inline-svg - компонент, который грузит источник и встраивает в svg элемент все что скачает
  • vite-svg-loader - плагин для загрузки svg в компонентах
  • visual-filter - компонент составного фильтра. Перестал использовать, но идея внутри хорошо сделана
  • highlightjs/vue-plugin - подсветить JS, но vue-code-block будет лучше, поскольку под капотом есть поддержка оригинала
  • v-intersect - хороший observer на то есть ли компонент в области видимости окна

 

BACK-END

Скрипты, интеграции, админки

В основном работал с ресурсами на Битрикс: Управление сайтом и Wordpress. Применяю паттерны, принципы разработки, которые описаны выше в разделе Front-end. Также порою какие-то технологии и инструменты перекликаются с DevOps, например git, docker.

Результаты

  • Более 100+ выполненных проектов на системах Bitrix и WordPress
  • Более 500+ доработок сайтов на Bitrix и WordPress
  • Более 50+ выполненных интеграций (Bitrix + Битрикс24, Bitrix + Yandex.market, sbermegamarket, domclick, auto.ru и прочие)
  • Более 20+ написанных модулей для Bitrix и WordPress (без публикации в маркетплейсы)
  • Более 20+ тонких настроек Битрикс24 (написание бизнес-процессов, ботов, роботов, интеграций со сквозными аналитиками и прочее)
  • Более 5+ корпоративных порталов Битрикс24 (облако / коробка)
  • Более 50+ написанных БП, вебхуков, написание собственных действий в БП, связка с endpoint'ами с сайтом через собственное приложение

Кратко с чем сталкивался (неполный список):

Разработка

  • перенос сайтов на CMS (Битрикс, Wordpress и другие)
  • техническая поддержка сайтов, доработка по задачам клиента/менеджера проекта
  • интеграции с различными сервисами (Roistat, ВК, Wildberries, Ozon, МойСклад, Telegram, Unisender, ЮKassa, Calltouch и более еще 50+ сервисов)
  • интеграция с CRM (Битрикс24, ammoCRM)
  • написание уникальных модулей и компонентов для систем
  • оптимизация ресурсов (код, хост-машин, исправление ошибок)
  • создание новых сайтов на CMS (Битрикс, Wordpress)
  • технический аудит проекта
  • настройка различных модулей/плагинов/компонентов в CRM/CMF (Аспро, различные доставки, оплаты, smtp, seo-модули)
  • написание API (без фреймворков, и с фреймворками - Comet, Strapi)

 Хостинг

  • настройка резервного копирования
  • настройка конфигурации (nginx)
  • защита от ботов

СУБД

  • разработка БД, нормализация, денормализация таблиц
  • репликации
  • горячие бекапы через XtraBackup
  • исправление индексов, восстановление баз данных
  • составление сложных запросов

Системы контроля версий

  • gitlab, github, bitbucket

Дебаг

  • XDebug
  • debug_backtrace

Тесты

  • PHPUnit
  • Jest

SEO

  • оптимизация, в том числе по Core Web Vitals (в том числе и фронт)
  • устранение накопленных ошибок
  • рефакторинг проекта

Программное обеспечение

CRM:

  • ✅ Битрикс24 (в том числе на базе bitrixVM)
  • ✅ ammoCRM
  • ⬜ vTiger
  • ⬜ Клиентская база

СУБД:

  • ✅ MySQL
  • ✅ MariaDB
  • ✅ PostgreSQL
  • ✅ MongoDB

Кеширование:

  • ✅ Memcached
  • ✅ Redis

Системы:

  • ✅ ELK (Elasticsearch + Logstash + Kibana) или ёлка
  • ⬜ Sphinx

Сервер очередей

  • ⬜ RabbitMQ

Инструменты

PHP

CMS:

  • ✅ Bitrix
  • ✅ WordPress
  • ⬜ DLE
  • ⬜ ShopCart

CMF:

  • ✅ MODx Revolution

Фреймворки:

  • ✅ Comet
  • ✅ Guzzle
  • ⬜ Laravel
  • ⬜ Yii2

Менеджер зависимостей:

  • ✅ Composer
JavaScript

Платформа:

  • ✅ Node.js (V8)

CMS:

  • ✅ Strapi (Node.js Headless CMS)

Фреймворки:

  • ✅ Express.js (Typescript + ES modules)

Пакетный менеджер

  • ✅ npm
  • ⬜ yarn
  • ⬜ pnpm

DEVOPS

Настройка процесса разработки, сетей и инструментов

Есть понимание как устроена модель OSI, как работает сеть (есть опыт прохождения курса от спецов ZyXEL). Знаю разделение между разработчиком, системным администратором и devops-спецом, поскольку в каждой сфере поработал и достиг результатов

Результаты

  • настройка и поддержка локальных сетей более 20+ хостов
  • маскирование трафика за шлюз в другую сеть (например, в другую страну)
  • обеспечение мониторинга путем сбора всей аналитики с хостов и настройка единого формата ведения логов для разных систем
  • обеспечение пробросов трафика по портам через внешний шлюз, так и через локальные proxy
  • настройка более 300+ доменов в различных зонах первого уровня
  • настройка более 50+ почтовых доменов со связкой через внешние сервисы (почта для доменов mail, yandex, google), так и с локальными серверами
  • анализ и подбор решений для конкретных задач (организация собственного облачного хранилища, CI/CD и т.д.)
  • защита от спам-ботов 5+ ресурсов (только для России и Беларусии)
  • веду документацию сетей в виде схем трафика, так и через базы знаний (youtrack, mcdocs, figma + figjam)
  • обеспечиваю безопасность хостов от подбора паролей, ddos
  • развернул 10+ бекап-систем (Handy Backup)

Опыт

Домены:

  • покупка/продление в том числе в зонах отличных от .ru (где свои правила, например, сервера должны вести на ip страны или нужен зарегистрированный товарный знак)
  • мониторинг доменов в зонах .ru, .com, .kz, .au, .de, .fr и более 5+
  • настройка NS-записей (в том числе поддомены, настройка для почт - SPF, DKIM, DMARC)
  • настройка nginx на динамические поддомены *.domain.ru
  • вывод из спам-баз доменов и ip-адресов

DNS-серверы:

  • разворачивание локального dns-сервера
  • покупка dns-сервера на nic.ru
  • настройка более 15+ доменов на серверах

Почта

  • настройка mail серверов с поддержкой SMTP, IMAP, Anti-spam, Anti-virus, веб-морд (админка + клиентская)
  • настройка postfix'а
  • утилиты/образа: docker-mailserver

Трафик:

  • разворачивание proxy-сервера (+ в том числе обратного, т.е. Reverse Proxy)
  • создание карт сетей с пробросами портов, стримов
  • вывод за шлюз и расшаривание хостов на внешку
  • утилиты: Nginx proxy manager, traefik, iptables

Безопасность:

  • работа с SSL-сертификатами (Let's encrypt, Komodo и прочие), в том числе wildcards-. Также настройка автоматического продления и скопление на proxy-сервере для шаговой доступности
  • квоты

Фильтрация ботов

  • настройка фильтра по geoip для стран Россия и Беларусь
  • запрет на IPv6, поскольку большинство иностранных ботов используют дешевые адреса
  • подключение общих спам-баз и запрет подключения из этих подсетей
  • внесение белого списка ботов (яндекс-, гугл- боты, а также боты, касаемо seo-анализа)
  • кастомная сборка nginx для Nginx Bad Bot Blocker
  • настройка блокировки ip (fail2ban)
  • настройка сервера при ddos (+ уведомления админу или в zabbix)

Репликация баз данных

  • настройка горячих бекапов баз от 60 гб (mysql)
  • создание схемы мастер-слейв
  • физический переезд нод с базами работающими по мастер-слейв (смена ролей, догонка в мастер-мастер)

Устанавливаемые системы через docker

  • mkDocs - база знаний
  • youtrack - система управление проектом
  • gitlab - система контроля версий  (CVS) и CI/CD (gitlab's runner)
  • teamcity - CI/CD система
  • jenkins - CI/CD система
  • portainer - графическая оболочка для docker'а
  • zabbix - система мониторинга (+ его агенты на хостах)
  • npm - nginx proxy manager
  • vault - хранилище ключей 
  • bitwarden - хранилище паролей
  • gitea - CVS
  • nextcloud - облачное хранилище

Анализ нагрузки

  • yandex.tank
  • logstash
  • htop

Масштабирование

  • вертикальное: увеличение дискового пространства на unix'системах (ubuntu 16+, centOS 7)
  • горизонтальное: увеличение нод с БД (mysql)

Инструменты и технологии

Среды

  • ✅ docker (Dockerfile, docker-compose.yml)

Управление версиями и совместная работа над кодом

  • ✅ Bitbucket
  • ✅ GitLab
  • ✅ GitHub

Непрерывная поставка и развертывание (CI/CD)

  • ✅ Bitbucket pipelines
  • ✅ GitLab CI/CD
  • ✅ TeamCity
  • ⬜ Jenkins

Мониторинг

  • ✅ ELK (Elasticsearh + Logstash + Kibana)
  • ✅ Prometheus
  • ✅ Grafana
  • ✅ Zabbix

Облака

  • ✅ Timeweb.cloud
  • ⬜ mcs.cloud (ныне vk.cloud)

Телефония

  • ⬜ Asterisk

SYSTEM ADMINISTRATION

Системное администрирование

В принципе сталкивался с разного рода задачами так или иначе касаемых системного администрирования сетей и машин. Все уже и не перечислить, но важно то, что умею находить решения, либо говорить прямо об издержках и предлагать иные варианты. Занимался настройкой оснасток в AD, групповыми политиками, настройка перемещаемых профилей, шар, настройкой конфигураций приложений при запуске на устройствах в доменах и по группам, настройка и включение МФУ, телефонии, установка необходимого ПО, asterisk и прочее.

Результаты

  • поддержка и настройка ЛВС с более чем 100+ хостов
  • проектирование ЛВС на более чем 120+ м2 площадях
  • монтаж и оборудование 10+ серверных/офисных помещений
  • монтаж и подключение 20+ видов камер (разные фирмы с разными интерфейсами и разные типы - наружные, внутренние)
  • поддержка 5+ файловых хранилищ на более чем 30+ террабайт с их бекапом
  • настройка и поддержка 100+ виртуальных машин 
  • развертывание 3+ антивирусных систем (Dr.Web, Kaspersky, Avast) с центральным сервером и подключение к нему клиентов
  • настройка 10+ доменов внутри сети
  • развортка 20+ серверов печати/электронных сообщений
  • обновление парка техники с более чем 40+ видов устройств
  • обеспечение синхронизации данных между 3 объектами в разных городах
  • переезд 5+ серверных нод (БД, маршрутизация, мониторинг, файловое хранилище)

Области работы

  • Администрирование веб-серверов - настройка и отладка работы веб-серверов
  • Администрирование баз данных - работа и обновление БД
  • Администрирование безопасности сети - защита сети от локальных и глобальных вторжений
  • Архитектор - выстраивание корпоративной инфраструктуры
  • Администрирование электронных сообщений - почтовые службы, спам, вредоносное ПО
  • Администрирование операционных систем - настройка и отладка ОС на устройствах компании (Windows, Linux)
  • Администрирование по программному обеспечиванию - настройка, обновление софта

Навыки и умения

  • умение разбираться в специфике операционных систем
  • навыки работы с серверным программным обеспечиванием
  • развертка ЛВС
  • знание стеков сетевых протоколов
  • познания в области прикладного программного обеспечивания
  • понимание устройства компьютеров
  • навыки производства ремонта ПК
  • способность разбираться с серверами

Инструменты и технологии

ОС

  • ✅ Windows - подавляющее большинство устройст на ней (до сих пор есть терминалы на XP в силу того что драйвера не пишут на новые и дешевости для компаний). Сервера были на Windows Server 2012 R2 и Windows Server 2016
  • ✅ Ubuntu - хорошая производительность. Использовал разные образа: debian, kubuntu, fedora, centos, gnome
  • ⬜ MacOS - очень неудобная система, отказываюсь ее поддерживать как админ, и как программист

Командная строка

  • ✅ Tabby - офигительная замена cmd на винде. Есть ssh-профили, история, темы, подстветка, автоматические ссылки и прочее
  • ✅ mcedit - единственный выбор на unix'ах, который нравится. Ставить придется mc, но он тоже незаменим. Вообще я за то чтобы mc был сразу во всех образах
  • ✅ head/tail - часто пользоваться приходится
  • ✅ grep - нечасто, но есть собранный набор команд для разных случаев
  • ⬜ nano - тоже не очень нравится редактор
  • ⬜ vi/vim - есть на любом юниксе, но мне не нравится. Стараюсь его не открывать даже

Диагностика

  • ✅ strace
  • ✅ lsof
  • ✅ vmstat

Мониторинг

  • ✅ Zabbix - ограничения в производительности, но отлично покрывает задачи
  • ✅ Prometheus + Grafana - хорошая связка
  • ✅ Monit - для unix-систем
  • ✅ htop - улучшенный top
  • ⬜ Thanos - очень сложен, не у всех на слуху, поэтому отказался от него

Логирование

  • ✅ Clickhouse - хорошая база для логирования
  • ✅ Logstash + Kibana

Таск-трекинг

  • ✅ Youtrack
  • ✅ Битрикс24

Бекапинг

  • ✅ Acronis Backup
  • ✅ Handy Backup
  • ⬜ veeam

Управление удалёнными рабочими столами

  • ✅ UltraVNC
  • ✅ TeamViewer

FTP/SFTP/SSH-клиенты

  • ✅ putty
  • ✅ WinSCP
  • ✅ FilleZilla

ПУ для серверов

  • ✅ OSPConfig
  • ✅ VestaCP
  • ✅ Webmin

Почтовые серверы

  • ✅ exim
  • ✅ postfix
  • ✅ sendmail

Рассылки

  • ✅ DadaMail
  • ✅ Битрикс24
  • ✅ Sendpulse

Безопасность

  • ✅ fail2ban
  • ✅ OSSEC
  • ✅ Snort
  • ✅ SpamAssassin

Контейнеры

  • ✅ Docker
  • ✅ Docker Compose
  • ⬜ OpenVZ

Виртуализация

  • ✅ VirtualBox
  • ✅ VMware
  • ⬜ Vagrant

Веб

  • ✅ nginx
  • ✅ apache
  • ✅ nginx proxy manager
  • ✅ traefik
  • ✅ varnish
  • ⬜ squid
  • ⬜ cherokee
  • ⬜ lighttpd

Веб-почта

  • ✅ Roundcube
  • ✅ SquirrelMail

Вики

  • ✅ BookStack
  • ✅ mkDocs
  • ✅ GitBook
  • ✅ Youtrack (База знаний)

Самые востребованные (важнее того что было до этого)

  • ✅ Отвертка
  • ✅ Пассатижи
  • ✅ Кусачки
  • ✅ Набор ключей
  • ✅ Рулетка
  • ✅ Изолента (синяя, черная)
  • ✅ Чувство юмора

ANALYTICS

Аналитика данных

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

  • Яндекс.Метрика (v2.0, v1.0)
  • Google Analytics (UA, GA4)
  • Google Tag Manager
  • Facebook
  • TikTok

PROJECT MANAGER

Ведение проектов

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

  • Youtrack
  • Microsoft Visio
  • MindMeister
  • MkDocs
  • Vault
  • Agile
  • Scrum
  • Kanban