Можете ли вы поверить, что прошло три года с тех пор, как я в последний раз обновлял свой личный веб-сайт? Три!?!? Я точно не могу. С тех пор я переезжала из одной страны в другую, побывала во многих других, закончила обложку своего фильма ужасов, написала роман и в настоящее время уволена, переживая пандемию.

Конечно, таким же драматическим образом изменился и мир фронтенд-разработки. Пришло время и моему личному сайту.

Цели

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

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

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

Технический стек

Должно быть, это была мышечная память, потому что, как только я решил создать репозиторий и спроектировать сайт, я открыл свой терминал и начал печатать create-react-app. Когда я создавал свой последний сайт, я был новичком в React. Три (!?!?!) года спустя, и это, очевидно, вторая натура.

Я хотел изменить его, но вроде бы, только немного.

Введите Гэтсби.

На моем последнем сайте пострадали две области: производительность и SEO. Кощунственно, я знаю! Использование Гэтсби в качестве моего фреймворка, казалось, решило обе эти проблемы из коробки, а также многое другое. Мне понравилась идея обслуживания статических страниц, которая работала для большей части моего контента, но с возможностью писать fetch запросов для динамического контента там, где мне это было нужно.

Мне потребовалось около суток, чтобы стать продуктивным в новой среде. Я имею в виду, почему я должен писать запрос GraphQl для отображения изображения!? Но после этого начального обучения я начал видеть преимущества этого усилия. Я был в восторге от улучшенной производительности, широкой экосистемы плагинов, невероятного набора функций Gatsby Image и возможности копаться в чем-то новом.

Именно из-за этого чувства я занялся разработкой много лет назад и до сих пор получаю от этого удовольствие.

Создав структуру, добавьте другие знакомые элементы, такие как Netlify,GraphQl, TypeScript. , и Стили компонентов дали мне возможность получить больше опыта с инструментами, которые я уже использую.

Первоначальный MVP занял неделю (почти) всепоглощающей разработки, и теперь, когда пыль из пословиц улеглась, приятно сделать шаг назад, чтобы переварить то, что только что произошло.

Выводы

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

Изображение Гэтсби

Хотите верьте, хотите нет, но после бурного старта Gatsby Image оказался одним из моих любимых произведений в этом проекте. После того, как я обдумал это, возможность оптимизировать изображения для бесчисленных настроек и форматировать их с резервными вариантами не только обработала мои изображения лучше, чем я мог бы сделать сам, но и сделала это за долю времени, которое я бы потратил.

Подробнее о моем опыте работы с Gatsby Image:
Художественное оформление с Gatsby Image и ошибка соотношения сторон

Зажим CSS()

Я наткнулся на clamp(), когда искал варианты гибкой типографики. Основной процесс, с которым я был знаком, включает в себя написание calc уравнений относительно ширины экрана, что для меня затрудняло чтение кода. Результат не был виден в коде, и я чувствовал себя беспомощным, когда дело доходило до экстремальных размеров дисплея. Однако использование clamp() решило обе эти проблемы, позволив мне определить минимальный и максимальный размеры шрифта и позволить шрифту плавно масштабироваться между ними. Я могу не знать точное значение font-size на конкретном телефоне или 24-дюймовом мониторе, но я знаю, что оно будет в пределах этого диапазона, и мне этого достаточно.

Узнайте больше о том, как я использовал clamp():
Гибкая типографика с CSS Clamp() — моя новая любимая вещь

Борьба с CORS с помощью функций Netlify

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

К счастью, Netlify Functions вмешалась. Используя интерфейс командной строки Netlify, я смог создать прокси-сервер node-fetch, который работает как локально, так и в рабочей среде, чтобы обойти раздражающие проблемы CORS. [вздох облегчения]

Аутентификация Spotify

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

Последние мысли

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

Творчество, вызов и перемены — вот почему мне нравится развиваться, и этот проект отвечает всем этим требованиям.