Ссылка: egor-badulin.ru

Репозиторий проекта: Github

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

Дизайн

Дизайн отрисовал Костя Морозов, замечательный веб-дизайнер, который так и не созрел до собственного сайта-портфолио. Поэтому вот ссылка на старый dribble.

Frontend

За клиентскую часть отвечает react.js без всяких ssr-фреймворков наподобие next.js. Честно признаться, я считаю подобные штуки с пререндером приложения с помощью node.js диким извращением, которое сильно усложняет разработку и поддержу проекта, и стараюсь не использовать их там, где этого можно избежать. В большинстве случае подобный подход нужен только для SEO-оптимизации, поэтому искренне верю, что с развитием поисковых ботов гугла и прочих яндексов в ближайшие годы пререндер на сервере потеряет свою актуальность, кроме совсем уж специфичных случаев. Так как сайт мой, а не клиентский, то забил на это без сожалений.

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

Попробовал сразу для каждого ui-компонента делать loading-состояние, чтобы отрисовывать скелетоны при загрузке на соответствующих местах и интерфейс "не прыгал". Получилось довольно приятно:

Чуть позже соберу все в сторибук и дополню этот пост.

Backend

За серверную часть отвечает strapi - headless-cms на node.js. Звучит страшно, но это совершенно замечательный и гибкая инструмент, простые вещи в котором делаются просто. API настраивается прямо в админке, что сильно уменьшает вероятность ошибок или глупых опечаток. На jamstack эта cms заслуженно стоит в начале рейтинга - она бесплатная, постоянно обновляется и у нее огромное сообщество. Из неудобств - необходимость иметь node.js на сервере и более сложное обновление, чем у php-приложений. Так как strapi написан на javascript, процесс обновления схож с тем, как обновляются front-end проекты.

Также для нее существует ворох плагинов на все случаи жизни - market.strapi.io. Меня очень впечатлила возможность автоматической генерации swagger-документации -api.egor-badulin.ru/documentation.

Что дальше?

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