Использование Javascript, React и Gatsby
Среди сумасшествия 2020 года, помимо сумасшествия смены карьеры, поиска работы (и усыновления щенка на всякий случай), я женился! Ради здоровья наших близких мы с мужем провели очень небольшую церемонию с участием только ближайших родственников, но мы все же хотели включить тех друзей и родственников, которые не могли присоединиться к нам лично. Мы решили, что должны сделать свадебный веб-сайт, чтобы поделиться нашим днем с нашими друзьями и семьей. Поскольку наши потребности были настолько специфичны, что вместо того, чтобы использовать услугу свадебного веб-сайта, я решил написать код самостоятельно!
Начиная
Поскольку мы хотели, чтобы наш веб-сайт заработал как можно скорее, и поскольку я делил свое внимание между созданием веб-сайта и планированием свадьбы, я решил начать с Гэтсби. Не существует стартеров Gatsby, специально предназначенных для использования в качестве свадебных веб-сайтов, поэтому, просматривая стартовую библиотеку Gatsby, я искал стартер, который был бы достаточно минимальным, чтобы оставить мне место для настройки. Прежде чем начать, я знал, что основная функция нашего веб-сайта будет заключаться в том, чтобы направлять наших виртуальных гостей на прямую трансляцию нашей церемонии. Мы также хотели, чтобы было место, где можно было бы поделиться подробностями о важном дне и историями о наших отношениях. Мы также рассматривали возможность использования веб-сайта после церемонии, чтобы делиться свадебными фотографиями с друзьями и семьей.
В итоге я выбрал startbootstrap-agency starter от Thundermiracle. Эта стартовая страница была разработана как целевая страница для бизнеса, но мне понравилось, что у нее чистый дизайн, который будет хорошо смотреться как на мобильных устройствах, так и на настольных компьютерах; у него была кнопка призыва к действию, которую я мог использовать, чтобы направлять наших виртуальных гостей на прямую трансляцию, а раздел портфолио выглядел как что-то, что я мог адаптировать для показа наших свадебных фотографий. В качестве бонуса в разделе о нас была временная шкала, которую я мог использовать, чтобы поделиться подробностями наших отношений.
Добавление функциональности
Выбрав стартер, я сначала приступил к реорганизации и удалению ненужных разделов, а также к обновлению изображений и контента в уже существующей структуре. Я также обновил цвета и шрифты темы, чтобы они соответствовали нашей эстетике. Чтобы иметь минимально жизнеспособный продукт, я добавил сообщение вверху страницы, а также ссылку на наш прямой эфир.
Как только у меня появился минимально жизнеспособный продукт, я начал создавать дополнительные функции для сайта. Во-первых, я добавил на сайт функцию обратного отсчета. Это была одновременно функция ожидания события и способ настройки отображения в зависимости от того, когда пользователь обращался к нему. Используя функцию обратного отсчета, которую я реализовал с помощью библиотеки react-countdown, я смог создать несколько версий страницы: одну версию для посетителей нашей страницы в дни и недели, предшествующие событию, другую версию для посетителей на день церемонии.
Использование библиотек React для оптимизации взаимодействия с пользователем
Просмотрев созданную мной страницу, мы с мужем придумали несколько дополнительных функций, которые сделают страницу более полезной для наших гостей. У него была отличная идея добавить кнопку «Добавить в календарь» в верхней части нашей страницы, чтобы помочь нашим виртуальным гостям не забыть войти в систему для прямой трансляции. Для этого я использовал библиотеку react-add-to-calendar и настроил отображение так, чтобы оно гармонировало с остальной частью нашей страницы. Я также повторно использовал библиотеку обратного отсчета реакции, чтобы я мог отображать кнопку добавления в календарь, ведущую к церемонии, но скрывал ее, когда наступал день, поскольку ее функциональность в то время больше не была бы полезной. В день церемонии кнопка «Добавить в календарь» будет заменена кнопкой «Посмотреть церемонию».
Как и у любой хорошей пары миллениалов, у нас также был свадебный хэштег, который наши виртуальные гости могли использовать при публикации в социальных сетях. Я превратил все ссылки на этот хэштег в кликабельную кнопку, которая копировала бы текст в буфер обмена пользователя. Для этого я использовал библиотеку react copy-to-clipboard, а также библиотеку react toast-notifications для эстетически приятного способа оповещения пользователя о предпринятом действии.
Проблемы
Что меня удивило в этом проекте, так это то, что самой сложной частью кодирования было не добавление новых функций, а настройка существующих. В качестве стартового Gatsby код был написан так, чтобы можно было очень легко выполнить некоторую поверхностную настройку. Текст и изображения, отображаемые на странице, предназначались для замены, поэтому было легко найти, где редактировать эту информацию в коде.
Остальная часть кода была написана не для удобства навигации, а для того, чтобы пользователь мог легко вносить эти поверхностные изменения, и эти изменения автоматически распространялись по всему коду. Я хотел написать удобный для пользователя код, который потенциально могли бы использовать другие, желающие создать аналогичный свадебный веб-сайт, что исключало возможность жесткого кодирования моих настроек в качестве обходного пути для их более глубокой интеграции в код.
Некоторые функции, которые, как я предполагал, будут трудными для реализации, такие как функция обратного отсчета и чувствительные ко времени дисплеи, сводились к внимательному чтению документации для различных библиотек React.
Другие функции, которые в теории казались гораздо более простыми, например превращение изображений в ссылки в разделе «дарения», оказались гораздо сложнее. Поскольку это изменение требовало внесения изменений в существующий код, мне требовалось всестороннее понимание того, как этот код работает. В процессе я понял, что кодовая база часто полагалась на сопоставление через массивы и передачу свойств через многие поколения. Сохранять четкий мысленный образ потока данных было сложно, но крайне важно для внесения этих обманчиво простых настроек веб-сайта.
Следующие шаги
Теперь, когда состоялась свадебная церемония, цель нашего свадебного сайта немного изменилась. Вместо того, чтобы направлять наших друзей и семью на прямую трансляцию церемонии, это будет место, где можно поделиться фотографиями, видео и яркими моментами нашей свадьбы. Я добавлю галерею и/или карусель, чтобы выделить свадебные фотографии.
Я также буду продолжать чистить код, чтобы сделать его максимально удобным для будущих пользователей, которые, возможно, захотят использовать его в качестве шаблона для своих собственных свадебных веб-сайтов. Следите за конечным продуктом!
