Отказ от ответственности

Цель этой статьи - объяснить мой подход. Это не учебник.

В этой статье будут использоваться некоторые технические термины, которые я считаю, что читатель уже знает. Если вам интересно, документация, Google, ChatGPT и GitHub Copilot могут дать вам более точные ответы, чем я! Приятного чтения! 🕺

Введение

https://www.myawesomeheroacademia.com** **- это сайт, который я только что создал. Фактически, я смотрел аниме "Моя геройская академия", когда у меня возникла мысль:

Удивительно, насколько UI манги и веб-UI противоположны друг другу.

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

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

Исходная идея

Помимо UI и UX, мне нужен был контент для моего сайта. Когда я искал информацию о персонаже аниме, я заметил, что вики-сайты типа fandom отлично выполняют свою задачу; Эти сайты предоставляют информацию. Но в них нет души манги или другого контента.

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

Вот мои первоначальные размышления о технической стороне, детских коллажах и орфографических ошибках:

В конечном итоге, Next.js с Typescript и Sass показались мне идеальными. Мне нужен был надежный SEO, включая серверный рендеринг.

На стороне бэкэнда я был в замешательстве. Я мог использовать парсер с помощью пакета и Lambda (AWS) или Firebase Functions (Google Cloud), а затем при сборке вызывать маршрут в моей функции getServerProps. Или же, я мог парсить локально с помощью Node.js и Puppeteer, а затем использовать мой JSON в функциях getStaticPath и getStaticProps.

Я выбрал вариант "бэк фронта", как я его называю. Фактически, учитывая простоту проекта и его бизнес-модель (отсутствие таковой), вызов API казался мне слишком громоздким и долгим (я хотел быстро и просто выпустить этот побочный проект). Хороший старый JSON, сгенерированный при сборке, вот что нужно! Это позволит мне сэкономить на затратах и создать простую инфраструктуру.

Для моих предыдущих проектов я обычно использовал AWS, Firebase или OVH Cloud. Хотя я хотел учиться и открывать для себя новое, я решил для этого проекта использовать Vercel. И какой замечательный сюрприз! Next.js и Vercel вместе... рекомендую.

Простота, читаемость, эффективность!

Парсинг

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

Для этого я использовал Node.js и Puppeteer.

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

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

Например, у одного персонажа было указано "мужчина" в качестве пола, а у следующего - "мужской".

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

UI, UX

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

Что касается UI и UX, я хотел, чтобы пользователь имел очень минималистичный опыт, чтобы он мог найти нужного персонажа и не чувствовал себя загруженным ненужной информацией.

Однако некоторым персонажам требовалось отображать много информации. Решение было очевидным: на самом деле, в манге "Моя геройская академия" Деку, главный герой, который хочет стать лучшим героем, записывает все о своих товарищах. Он пишет (как и я, кстати) всю эту информацию в блокноте. Знаменитый блокнот Деку.

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

Оставалось только спроектировать его (на Figma) и структурировать HTML (в стиле Деку, в моем блокноте).

Я создал свою бумажную версию Канбана, чтобы не проводить по 16 часов в день перед экраном!

Я хотел добавить себе небольшой вызов.

Переходы между страницами несмотря на серверный рендеринг

При разработке одностраничного приложения страницы маршрутизатора фактически генерируются на JavaScript в файле index.html. Поэтому очень легко создавать красивые переходы и анимации между «фейковыми» страницами. Однако, при статической генерации с помощью Next, браузер будет обновляться при каждом изменении маршрута и загружать элементы заново.

Я хотел, чтобы этот переход был плавным, чтобы пользователь не замечал ничего, несмотря на серверный рендеринг. Поэтому я работал с Framer Motion и моим старым добрым SCSS.

Я доволен результатом:

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

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

Моя самая большая проблема во время этих переходов была загрузка.

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

Разумеется, для обложки блокнота и логотипа был использован SVG, что позволяет, с одной стороны, изменять цвета в реальном времени, а с другой стороны, иметь очень малый размер. Точки печати, хотя и многочисленные, представляют собой только повторяющийся фон и пики...

Процедурная генерация

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

Я пропущу автоматизацию, но идея относительно проста. Нужно разместить SVG на линии между 0% и 100%. Эта линия может быть вверху, внизу, слева или справа, и в зависимости от этого изменится вращение исходного SVG шипа.

Затем вращение будет пересчитываться в зависимости от положения шипа на экране. Например, шип, расположенный на 2% на нижней линии, должен быть наклонен к центру экрана, чтобы создать эффект сосредоточенности, но шип на 80% внизу также должен быть наклонен к центру. Это вращение, конечно же, вычисляется автоматически.

Также напомним, что шип на самом деле находится на двух осях: внизу на 50% и справа на 0%, что поместит его посередине справа на экране. Если у шипа есть вращение и, в этом примере, правая ось равна 0%, мы увидим конец SVG, что не очень красиво. Поэтому нужно вычислить отрицательную ось для правой стороны в зависимости от вращения.

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

Le carnet, только SCSS!

Le carnet n’est fait qu’en SCSS. Les transformations de skew, scale et translate m’ont été indispensables. Les pseudo-classes ::after et ::before m’ont permis de créer les différentes couches du livre (couverture, image intérieure et textes).

Le SEO

C’était important pour moi de travailler sur ce sujet.

Je génère au build toutes les images opengraph et Twitter card de chaque personnage grâce à Sharp JS, puis je génère toutes les balises meta pour chaque personnage.

Ajoutons à cela une belle landing page, une page 404 personnalisée et une fonction de recherche qui m’a permis de créer des liens internes solides. Et voilà, le tour est joué.

Заключение

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