fonts-online.ru. Шрифты онлайн
Расскажите о бизнесе, которому помогает сайт (его направление, задачи, клиентов/пользователей)
Сайт Шрифты Онлайн вырос из хобби-проект в полноценный сайт fonts-online.ru, который каждый день помогает не только дизайнерам, но и множеству людей, которым нужно выбрать шрифт для текста на футболке, на праздничном торте или в медиаконтенте. Например, некоторые типографии отправляют своих клиентов на fonts-online.ru, чтобы те показали, каким они хотят увидеть свой текст.
Какие цели и задачи ставились перед сайтом?
Цель проекта — быть удобным сервисом для людей, которым нужен шрифт, но они ещё не определились какой.
Как достигались цели, поставленные перед сайтом?
В начале разработки я уже использовал Drupal в нескольких простых проектах и точно знал, что буду делать сайт только на нём, так как хотелось сделать максимально быстрый старт, отсюда и выбор многих решений. Тогда актуальной была 6 версия. Первая версия сайта была простым каталогом, созданным через термины таксономии. Шрифты отображались как картинки, генерируемые-php скриптом, а тема и оформление были создана на основе какой-то базовой темы без привлечения дизайнера.
Со временем сайт развивался и преобразовывался. В свободное время я вносил изменения и добавлял функциональность, которую сам считал нужной и полезной, но много хороших идей предлагали и сами пользователи. Возможности сайта расширялись: появилась страничка, на которой можно добавлять шрифт самостоятельно, поиск, фильтры в каталоге, авторизация с возможность добавить шрифт в “Понравившиеся” или создать свою коллекцию и многое другое. Сами шрифты стали подключаться к странице через css-правила. Это позволило расширить возможности по настройке внешнего вида представления шрифта, а также снизить расход пользовательского трафика.
Укажите, пожалуйста, показатели, подтверждающие достижение поставленных перед сайтом целей
Сайт fonts-online.ru находится в топ-3 в выдаче Яндекса по ключевым словам, связанным со шрифтами: "Шрифты", "Бесплатные шрифты", "Кириллические шрифты" и т. д.
По данным similarweb, fonts-online.ru находится на 40400 месте среди всех сайтов мира и на 2200 среди сайтов России.
Расскажите про самую сложную задачу на проекте и как она была решена. Поспособствовал ли решению непосредственно Drupal?
Самая объемная и, казалось бы, сложная задача — это одновременно и сердце проекта: парсинг файла шрифта при его загрузке во время создания нового материала и последующие формирование тела страницы при отображении уже созданного материала. Каждый шрифт (файл TrueType или OpenType, имеют расширения *.ttf и *.otf) хранят в себе много полезной информации: название шрифта, семейство, имя создавшего его дизайнера, лицензию, техническую информацию вроде начертания или наклона и многое другое. Нет смысла заполнять эти поля вручную, поэтому при создании материала файл парсится и из него извлекается нужная информация, которой заполняются соответствующие поля материала.
Нечто похожее происходит и при отображении материала. Информация из шрифта может быть полезна пользователям, но смысла хранить её в базе данных нет. Поэтому при выводе материала, файл шрифта также парсится, и полезные сведения добавляются на страницу.
Все эти задачи легко решаются в рамках хуков и экстра-полей (computed field) Drupal.
Почему вы построили сайт на базе Drupal? Какое качество этой CMS максимально проявляет себя на проекте?
На заре своей карьеры web-разработчика я выбирал, какую CMS взять для освоения, так как понимал, что все изучить не смогу, и нужно остановиться на какой-то одной. Пробовал WordPress, Joomla, ещё какие-то, но выбрал Drupal, на тот момент шестую версию. Drupal был не очень популярен, но меня подкупили возможности этой CMS, на нем можно было создать все! Универсальность и функциональность — лучшие качества Drupal.
Если можете, расскажите о технологическом стеке вашего сайта
На данный момент в сервисе используются следующие технологии:
- Backend: Ubuntu 20.04, PHP 8, NGINX, Percona Server, Drupal 9, Composer
- Frontend: Webpack, Glimmer, Tailwind CSS
Так как проект начинался на шестой версии Drupal, а на подходе уже 10, отдельно хотелось бы упомянуть процесс миграции между мажорными версиями Drupal. Переход с 6 версии на 7, а в последствии и на 8 версию, был довольно топорным — тогда богатой функциональности особо не было, а свой код было проще написать с нуля чем, рефакторить старый. Я просто создавал новый проект на новой версии Drupal, дописывал недостающие функции и импортировал материалы из предыдущей версии. Но все изменилось с приходом Drupal 8. Во-первых, объем своего кода существенно вырос в связи увеличением функциональности сайта, во-вторых, изменился и подход к миграции между мажорными версиями в самом Drupal, теперь переход стал значительно проще и как бы парадоксально это ни звучало, но переход на девятую версию отнял меньше всего времени и сил, чем предыдущие миграции, несмотря на значительно большие объемы кода. Уверен, что переход на 10 версию будет таким же простым.
Весь фронтенд построен на веб-компонентах, Drupal пока в этом слаб, поэтому использовался Glimmer.
Drupal-модули довольно стандартные для любого Drupal проекта: devel, email_registration, flag, fz152, google_analytics, imagemagick, metatag, openid_connect, paragraphs, pathauto, raven, recaptcha, redirect, schema_metatag, simple_sitemap, smtp, twig_tweak.
Тема своя, CSS-фреймворк - Tailwind.
Как сайт продвигает себя и привлекает правильную аудиторию?
Продвижением сайта никто никогда не занимался, рост популярности и посещаемости был естественным.
Почему вы решили участвовать в конкурсе?
Мне понравилось само начинание, конкурс способствует популяризации Drupal. Также любопытно, как оценит проект профессиональное жюри, какие выделит плюсы и минусы. Ну, и участвовать в конкурсе всегда интересно.
Огромное спасибо организаторам и спонсорам Russian Drupal Awards за этот конкурс и возможность принять в нем участие.