Главная страница » Обо мне » Мои профессиональные навыки

Мои профессиональные навыки

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

Этап 1: знакомство

Здесь, кроме знакомства с вами, прежде всего я буду знакомиться с вашим бизнесом и вашим сайтом (если он есть). Если похожий проект присутствует в списке моих кейсов, то на старте я смогу дать некоторые комментарии и поделиться опытом продвижения.

На стадии знакомства случаются три ситуации:

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

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

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

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

Этап 2: планирование

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

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

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

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

Этап 3: модернизация сайта

Я работаю только с системой управления WordPress, и только с редактором Gutenberg. Если Ваш сайт работает в другой системе, то я буду его переносить в WordPress. Либо работа по продвижению будет вестись только в формате ежемесячных консультаций.

Почему я не работаю с другими системами?

В 2005 году я познакомился с IPB (движок для форумов), потом был Datalife Engine. Десяток сайтов я поднимал и модернизировал на Joomla. Несколько проектов было на ModX. Но моей любимой системой на старте моей карьеры была Drupal. Потом появился 1С-Битрикс. Параллельно всему этому существовал WordPress, который я не любил и не воспринимал всерьез.

Морально и технически умерло все, кроме WordPress. За счет своей популярности и открытости, за счет простоты и универсальности Вордпресс привлек к себе разработчиков, которые ежемесячно публикуют обновления. Сегодня Вордпресс это система управления, которая удовлетворит потребности 99% организаций, которым нужен сайт. Оставшийся 1% имеют свой отдел разработки, который знает что им нужно.

Переносить в wordpress дорого!

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

Вероятно вы его снесете (или оставите для памяти) и с чистого листа построите цеха, офисное здание, складские помещения.

Для успешного продвижения сайта мне нужен современный инструментарий программиста. Моя задача привлечь на ваш сайт много посетителей как можно скорее. От этого будет зависеть окупаемость проекта, его успех. Вы же хотите чтобы на каждый вложенный рубль возвращалось два? И я хочу! Вот что мне для этого понадобится:

Docker

Разработку сайта я веду на локальном компьютере. Вести множество проектов мне позволяет современное ПО, Докер. Раньше я использовал XAMPP, упрощенно это связка PHP + MySQL + Apache. Это было условно удобно, но когда появился Докер, он сэкономил часы работы просто на переключении между проектами. Мне достаточно запустить docker-compose up -d и рабочий проект запущен.

За счет контейнирования окружающей среды сайта (операционной системы, модулей, менеджеров и тд) пропали нестыковки между локальным сайтом и рабочим сайтом на боевом сервере. Это существенная экономия на поиске ошибок каждый раз после внесения изменений.

NPM

Еще в школе передо мной впервые встал вопрос — «как ускорить загрузку сайта?«. Во времена dial-up эта проблема стояла острее чем сейчас. В те годы я руками удалял ничего не значащие пробелы между словами и символами в коде. Уменьшить файл удавалось на несколько килобайт!

Сегодня такой рутиной занимается npm — автоматизированный сборщик. Он соберем js, scss — в единый минимизированный файл. Внедрит префиксы для совместимости с различными браузерами. Грамотно разложит все из /src в директорию /build.

Второй по популярности запрос к разработчику — сделать загрузку сайта быстрее. Но как это сделать, если сайт работает на устаревшей системе управления, без поддержки современных технологий, без npm, без организации грамотного кэширования на сервере? Только через костыли.

SASS (SCSS)

90% внешнего вида сайта зависит от того, что прописано в каскадных таблицах стилей. Но они на столько «каскадные», что там можно остаться на много-много часов. В чистом CSS отсутствует функционал вложенности, переменные. Таблицы на чистом CSS у среднего сайта — это ад для модернизации. В них можно запутаться, заблудиться.

Я часто вижу как предыдущие разработчики добавляют свой код в любое место, «лишь бы работало». Это большая боль для модернизации сайта, чем является seo-продвижение. Со временем сайт превращается во франкенштейна. Простейшие манипуляции занимают несколько часов. Хотите чтобы смена фона шапки сайта стоила вам 10000 руб?

SASS — это препроцессор. Я пишу чистый код в нем. Он удобочитаемый, краткий, красивый. Добавить изменения — задача нескольких минут. Далее npm просто превратит его в CSS.

Jquery и JS

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

Плагины wordpress

Я давно отказался от большинства плагинов. В 99% случаем они — источник всех проблем с сайтами на wordpress.

Что такое плагин? Это код стороннего разработчика, который добавляет функционал в вордпресс. Например в вордпресс нет встроенного функционала по организации микроразметки, которая нужна для продвижения. Специалист без знания программирования (дизайнер или seo-шник) пойдет за плагином. Проблема плагинов в том, что они стремятся быть универсальными, чтобы утолить желания большого круга лиц.

90% из них бесплатные, поэтому у разработчика плагина быстро кончается энтузиазм поддержания плагина, выпуска обновлений в том числе обновлений безопасности. Из-за этого сайты на wordpress часто бывают взломаны. Но причина не в том что wordpress легко взломать. А в том, что владелец сайта внедрил в систему небезопасный код.

Появление редактору Gutenberg позволило отказаться и от ACF Pro. Я использую в работе:

Contact Form 7 — база. Писать свою форму обратной связи с обработкой и защитой от спама вручную — это велосипед, на который уйдет день. Готовый проверенный плагин решает задачу за 5 минут.
Плагин для SMTP — обязательная история, чтобы письма с сайта не попадали в спам. Настраиваешь один раз и забываешь.
Yoast SEO — инструмент для рутины. Он помогает правильно заполнять мета-теги, проверяет читаемость текстов и генерирует XML-карту сайта. Можно было бы написать свой велосипед, но SEO-анализ — это сложная область, проще довериться профессионалам, которые уже собрали лучший опыт в один плагин.
Regenerate Thumbnails — чтобы каждый раз не обращаться в wp cli.
Redirection — чтобы не писать все в конфиг nginx.conf.
Enable Media Replace — чтобы безопасно (в будущем) пользоваться картинками из медиа-библиотеки.

Из списка выше лишь два плагина могут добавлять скрипт или код в фронт сайта. Все остальное организовано в теме или через визуальный редактор.

Gutenberg

Почему еще я использую wordpress, так это из-за нового визуального редактора, построенного на React! Раньше я лишь мечтал чтобы страница редактирования выглядела также как рабочая страница. Теперь это реальность. Вы или ваш сотрудник, и я в частности вношу изменения прямо в заголовок, и вижу как это выглядит сразу. Где он переносится на другую строку, вижу отступы, размеры.

Раньше на это приходилось тратить уйму времени, постоянно обновляя страницу с изменениями.

Серверное окружение

Чтобы вы увидели сайт в интернете, нужно положить файлы сайта на компьютер, который включен 24 часа 7 дней в неделю. Такие комьютеры называются серверами.

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

Но можно взять мощный, многоядерный компьютер, с большим количеством операционной памяти, современным жестким диском NVMe. И создать на нем виртуальные сервера. Каждый из которых будет иметь закрепленную за ним частоту процессора, оперативную память и место на диске. Будет полный доступ к операционной системе и свобода администрирования. Это называется VDS (Virtual Private Server) — облачный сервер. Именно на таких серверах работаю я. Вот какое окружение я буду администрировать:

PHP-FPM

FastCGI Process Manager. Это менеджер процессов PHP. Когда я пишу код на PHP, компьютеру нужно его «переварить» и превратить в статическую HTML-страницу для посетителя. PHP-FPM ждет запросы от веб-сервера, выполняет мой код и отдает результат.

Почему именно FPM, а не старый mod_php (модуль Apache)? FPM работает как отдельный сервис и более эффективно управляет памятью. Если один скрипт «упадет» или зависнет, это не положит весь сайт целиком, что критично для стабильности.

NGINX

NINGX в этой связке выполняет роль умного диспетчера (reverse proxy) и раздачи статики. Когда пользователь открывает сайт, NGINX первым встречает запрос.

Во-первых, если запрашивается простая картинка или CSS-файл, NGINX отдает их мгновенно, даже не беспокоя PHP. Это разгружает сервер.
Во-вторых, если нужна «динамика», NGINX выступает в роли «трубы» (канала): он передает запрос на обработку PHP-FPM, получает готовую страницу и отправляет её обратно в интернет пользователю.

Почему он? NGINX славится умением держать тысячи одновременных соединений, не нагружая сервер, в отличие от того же Apache в некоторых режимах работы.

MariaDB

MariaDB — это моя база данных, место, где хранятся посты сайта, настройки и другие структурированные данные. По сути, это такая же база, как и MySQL, только с другой историей.

Почему я на нее перешел? Меня подкупила её лицензия и философия разработки. MariaDB появилась как «народная» альтернатива MySQL после того, как Oracle (компания-разработчик MySQL) начала закрывать некоторые компоненты под коммерческой лицензией.

Сайту всегда важно оставаться под свободном ПО, и MariaDB дает уверенность, что завтра мне не придется платить за возможность хранить свои записи. К тому же, у нее часто бывает более высокая скорость работы с тяжелыми запросами «из коробки».

Автоматизация выгрузки

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

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

Ранее выгрузка занимала до часа рабочего времени. Ручной перенос не идеален, легко ошибиться в команде или порядке. И я сам устал от этого, и внедрил DevOps в свою работу. Семь скриптов на bash автоматизирует то, на что я раньше мог потратить половину рабочего дня!

CI/CD

CI/CD — звучит страшно, а на деле это просто мой личный ленивый помощник.

Было: Я правлю код в Docker на локальном компьютере. Потом запускаю NPM, чтобы собрать стили. Потом открываю FTP-клиент (или панель хостинга). Ищу папку, куда заливать файлы. Заливаю по полчаса, жду, если файлов много. И вдруг продакшн сломался, потому что я забыл залить одну папку.

Стало: Мне надоело тратить часы жизни на этот ручной «древнеегипетский труд». Я настроил Git-репозиторий и CI/CD. Теперь это выглядит так:

Я вношу правки в коде (локально, в Docker).
Делаю коммит и пущу (git push) в основную ветку (например, main или master).

Вжух! Дальше всё делает робот:

git-runner получает команду: «Обнова пришла!»
Он сам стягивает свежий код
Он сам запускает сборку NPM (чтобы стили и скрипты, и блоки гутенберг обновились)
Он сам перекладывает файлы куда надо и перезагружает кеши

Чтобы выкатить изменения на сайт, мне теперь достаточно написать git push. Это занимает 10 секунд моего времени. Ошибки «забыл залить папку» исключены — робот делает всё по скрипту идеально. Надоело — двигатель моего прогресса.

Итог

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