Последние 4 года я снова и снова перестраивал свой сайт. И я никогда не был этому слишком рад. В основном потому, что у меня никогда не было времени сделать это «должным образом» и я всегда прибегал к использованию шаблонов с Envato.

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

Начало

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

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

Итак, список вещей, которые должны быть на веб-сайте:

  • Главная страница (да)
  • Краткий раздел «Обо мне»
  • портфолио
  • Форма обратной связи

Это минимальное количество вещей, в которых нуждается данный веб-сайт. И я решил, что этого достаточно, так что я оставил это.

Среди требований, не связанных с содержанием, необходимо было

  • Быстрая загрузка (да)
  • Будьте отзывчивы (d-d-duuuuhhhh)
  • Быть впечатляющим
  • Быть доступным
  • Обеспечьте плавный пользовательский интерфейс
  • Продемонстрируйте технологию

Установив эти расплывчатые требования, я приступил к проектированию.

Процесс проектирования

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

Я сделал это 5 лет назад, и тогда я подумал, что это круто, но да. Пора это изменить! Итак, через некоторое время вот что я придумал:

Замечательный новый компас, который выглядит современно и хорошо масштабируется. Большой проблемой со старым было то, что он вообще не менял размер. В отличие от этого нового:

Вскоре после этого я сделал первый экран веб-сайта:

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

Но в любом случае, вскоре после этого я сделал остальные базовые проекты:

Пришло время кодировать!

Время кодирования

Здесь есть что сломать, и я пройду через все по частям. Но сначала поговорим об общей идее всего.

Общее представление обо всем

Я разработчик React / Node.js. Таким образом, я хотел создать свой собственный веб-сайт с помощью React. Но я не хотел, чтобы мой веб-сайт был одностраничным приложением. Фактически, я хотел, чтобы он работал, даже если пользователь отключит JavaScript.

По совпадению, сейчас одна из самых горячих дискуссий о React - это рендеринг на стороне сервера. Или любые обсуждения рамок в этом отношении. Так уж вышло, что замечательные ребята из Zeit создали Next.js - лучший способ создавать SSR с помощью React, точка. Вот что я решил использовать.

Вот расплывчатый список технических требований, которые у меня были к веб-сайту:

  • Создан на React
  • Серверный рендеринг
  • Использует Service Workers (сначала офлайн бесплатно)
  • Сексуальные анимации повсюду
  • Макет сетки CSS
  • ARIA-компилятор
  • Keen.io Аналитика
  • Работает без JS
  • Контактная форма без электронной почты
  • Плавный «волшебный» опыт навигации
  • Развертывание Docker
  • Типы потока
  • Обслуживается через HTTP / 2
  • Стабильно интерактивно в течение 3 секунд

Это адский список. Итак, как я все это сделал? Давайте разберемся с этим.

Анимации

Центральная часть «жидкого» опыта - это то, как все движется. Анимация - это то, что отличает хорошее приложение от отличного. В итоге у меня получилось 40 различных анимаций (не считая базовых переходов).

В GSAP или не в GSAP

Пока я делал прототип, я использовал GSAP для анимации. Он обладает потрясающими возможностями анимации и прост в использовании для быстрого прототипирования.

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

Кроме того, анимация GSAP выглядела хорошо в Chrome, но немного дрожала в Firefox и была полным беспорядком в Safari. Итак, мне нужен был новый герой.

Переход на CSS

В конце концов, я решил использовать CSS-анимацию для всего. Я закодировал все нужные мне анимации и отнес каждую к отдельному классу.

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

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

Условные анимации

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

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

Например, я не хотел, чтобы автовоспроизведение происходило, когда пользователь переходит из «О себе» или «Контакт» обратно в индекс. В этом сценарии компас скользит на месте, но затем вращение снова воспроизводится. Не имеет смысла, правда?

И я знаю, о чем вы думаете.

Эй, мы можем решить эту проблему с помощью JavaScript!

И вы правы, мы можем. Но помните, что нам также нужно убедиться, что он работает без клиентского JavaScript. К счастью, Next.js позволяет это сделать.

При изменении маршрутов вы можете передать объект запроса, который будет скрыт от браузера пользователя. Поэтому я использовал это для pass?nospin=true, который затем принимается компонентом и используется для установки класса при рендеринге даже на сервере. Так началась серия улучшений пользовательского опыта, основанная на лжи.

Макет сетки

CSS Grid великолепен, он здесь, и мы должны его использовать. Это волшебно, сокращает объем кода, который вам нужно написать, и значительно упрощает отзывчивость.

- Ой Макс, а как насчет старых браузеров?

Старые браузеры преследуют системы, которые полагаются на множество устаревшего дерьма. Создаваемые сегодня веб-приложения не должны полагаться на такое дерьмо. Кроме того, «старые браузеры» всегда имели функцию автоматического обновления.

Сервисный работник

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

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

Поэтому я использовал sw-pre-cache Google для создания сервис-воркера, который будет агрессивно предварительно кэшировать все данные. Когда вы посещаете любую страницу веб-сайта, вы загружаете около 200 КБ фактического содержания. В то же время устанавливается сервис-воркер. После этого сервис-воркер помещает все мелочи на сайте (всего ~ 2 МБ) в кеш. С этого момента весь веб-сайт полностью загружается с диска, что фактически делает скорость загрузки 0 мс. Диск всегда превосходит даже самую быструю сеть.

И это решило проблему нано-вспышки при переходах между страницами. Также случайно он первым сделал сайт офлайн.

Отказ от электронной почты

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

У меня уже есть бот Telegram для управления повседневными делами, поэтому я просто подключил его к боту. Теперь всякий раз, когда на веб-сайте отправляется контактная форма, я получаю приятное мгновенное сообщение:

Аналитика

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

Я по-прежнему использовал Google Analytics для общего обзора, но я также создал кучу настраиваемых событий в Keen. Таким образом, я могу отслеживать события, которые мне действительно небезразличны.

Представление

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

Эти цифры просто смешные 😄. Давайте разберемся с этим.

HTTP / 2

Первым делом мне нужно было убедиться, что все активы будут доставлены как можно быстрее. Очевидным решением было обслуживание веб-сайта через HTTP / 2, чтобы воспользоваться его функцией мультиплексирования.

Если вы не знаете, что он делает, он позволяет обрабатывать несколько запросов через одно соединение. Это позволяет загружать весь контент параллельно, делая его намного быстрее.

Размер страницы

Конечно, если вы мультиплексируете 5 МБ ресурсов, это вам не очень поможет. Так что мне также нужно было обеспечить небольшие размеры страниц. Здесь очень помогает минималистичный дизайн. Самые большие страницы оказались тематическими исследованиями из-за различных скриншотов. Все первичные страницы в итоге составили около 180–250 КБ. Тогда мне просто пришлось дать пощечину ...

Сжатие

GZip. GZip все, что можно сжать, сжатие - это мощный ускоритель производительности.

Развертывание

UPD: процесс развертывания изменился с тех пор, как это было написано, но старый текст оставлен здесь для исторической записи. Актуальную информацию см. Под курсивом.

Веб-сайт развернут с помощью Docker. Перед контейнером Docker находится Nginx. Nginx фактически обрабатывает все сертификаты GZip и HTTP / 2, а также сертификаты Let's Encrypt.

Актуальная версия:

Веб-сайт теперь развернут на платформе Zeit Now, которая, на мой взгляд, является лучшим способом развертывания приложений Node. Или любые приложения в этом отношении. Они масштабируют его для вас, они предоставляют вам SSL и HTTP / 2 без головной боли, простую постановку и итерацию, а также лучший интерфейс командной строки, который у меня когда-либо был.

Если вы еще не пробовали Now, я очень рекомендую его.

В конце концов, все усилия вместе привели к 1,6 секунды, пока сайт не загрузился полностью и не стал постоянно интерактивным. Ура!

Заключение

Уф, это был длинный пост. Спасибо, что добрались до конца здесь. Надеюсь, вам понравился этот небольшой пример.

Исходный код всего этого доступен на моем GitHub, если вы хотите самостоятельно заглянуть под капот.

Спасибо за чтение и удачного дня!