А у нас вечер. А у вас?

Сегодня аж 2 поста про реализацию.

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

За эстетику я не переживал, потому что марки сами по себе визуальный контент. Главное, чтобы интерфейс не отвлекал от них.

С понятностью тяжелее. Я задумывал Пинтерест по маркам. С возможностью почитать: кто придумал марку, сколько стоила, а сколько стоит сейчас. А ещё надо показать похожие марки!

Когда я взялся реализовать, макеты превратились в тыкву. Первая проблема — нехватка данных. У меня есть 200 марок, но нет Википедии, с которой бы я брал эти данные. Важны ли кому-то эти данные вообще? Думаю нет.

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

Со скоростью работы тяжелее всего. Помним, что контент — картинки. Графика сама по себе тяжелая, а тут аж 200 картинок и их будет больше. Сами картинки надо показать во всей красе, не в ущерб ретине. А ещё нужно, чтобы они быстро грузились. И телефону нужна своя картинка, чтобы не грузить большую десктопную. Штош, делаем.

Первоначально все марки — PNG. В 11ty есть плагин, который конвертит картинки в нужные размеры и расширения. Я выбрал WEBP, как альтернативу по качеству PNG. А JPEG для старых-капризных устройств.

Просто уменьшить вес недостаточно, нужно адаптировать их под разные экраны. Поэтому к сжатию картинок добавились размеры в 300, 600, 960, 1200, 2140. Браузер загрузит подходящую под разрешение, а большую версию покажет в модальнике.

Бонусом добавил версию 12 пкс, эту миниатюру вы видите под блюром, когда марки загружаются. Хотелось, чтобы вы скорее увидели контент на странице, а потом дождались загрузки всех картинок.

И вот, после всех фокусов, в коде уже не 200 картинок, а 1200. Но главная, цель достигнута: скорость загрузки картинок.

Если я скажу, что в процессе сделал не 1 сайт, а целых 4? На разных стэках: конструкторе, php, nuxt.js и статике. Вы скажете, что я извращенец. А я отвечу: Да!

Уже писал, что для меня важна скорость работы. А ещё, мне интересны сами технологии. Тем более, когда под рукой индус из Мумбаи ChatGPT, то как-то спокойнее.

Cargo и Framer. Первым делом попробовал конструкторы. Уже через день был прототип. Но я быстро понял, что не хочу запирать себя на платформах. Ну какой опен-сорс на конструкторах, камон! И вовремя отказался от идеи.

Kirby CMS. За Кирби слежу давно. Работает на PHP, подкупает своей гибкостью. Движок для меня самая понятная сущность, потому что там есть хоть какая-то админка. За неделю сделал прототип и даже думал запускать, но снова повис вопрос: какой же это опен-сорс? Для работы нужен сервер, апач, да и с докером лень разбираться. Я не программист, а значит при масштабировании такого решения быстро уйду в костыли.

***

На этой ноте проект завис на пару недель, пока я не вспомнил про Jamstack.

Nuxt.js. Современные продукты работают на Реакте, Электроне и остальных терминах из школьной физики непонятных обычному человеку. Да я и сам мало чего понимаю, просто скажу, что в этом подходе весь процесс генерации страницы для клиента ложится на сервер, а значит при неграмотной настройке это может стать узким горлышком проекта.

Но ещё я думаю, что это шаг эволюции и мне просто нужно дорасти до такого решения. Когда-нибудь к этому вернусь.

Eleventy. Ну тут всё просто! Вы же знаете, что любой сайт это HTML-странички? Любое из перечисленных выше решений по-разному эти странички «отдаёт» вашему браузеру. Нативность и скорость достигается как раз тем, что вашему браузеру надо получить HTML-страницу и обработать её. Чем меньше различного рода генераций и серверных обработок, тем лучше. Это и есть Jamstack.

11ty запускается один раз, чтобы сгенерить те самые странички, положить их на сервер и всё. В моём случае, решающим фактором ещё был плагин для сжатия картинок. Ваш браузер сразу видит страничку, а вся ответственность ложится на Cloudflare CDN, который отдаёт вашему браузеру картинки с ближайщего к вам сервера.

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

А плюсом: скорость работы и простота развёртывания проекта. Этому решению подойдет бесплатный Netlify, Cloudflare Pages или самый дешевый хостинг. Для небольших проектов подходит идеально.

Не устали ещё? Сегодня вас ждёт заключительная простыня про ChatGPT 4. С примерами!

Сначала дисклеймер: я не разработчик. Умею верстать, пойму что-то на JS, но своё никогда не напишу. Слишком ленив и глуп для такого.

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

***

Всё началось с задания: «разработай галерею на Eleventy». Задал условия: «коллекция должна храниться в такой-то структуре; нужна фильтрация по году, стране и тегам; картинки открываются на весь экран». Результат: пошаговая инструкция. Вот бы я охренел, если бы всё заработало сразу. Такое случается, но редко.

Сначала 11ty ругался на конфиг, потом нерабочие функции в шаблонизаторе. С 4 попытки пришла инструкция учитывающая все условия, но каждая часть требовала доработки. Отсюда первое: не пытайтесь упихать всё желаемое в один промт. Добивайтесь результата итерративно.

Следующая задача: «как из гугл таблиц сгенерировать JSON», чтобы организовать базу. Сначала предлагает использовать сторонние сервисы и даже API, а спустя пару запросов советует встроенный в таблицы «Apps Script». Поэтому второе: исследуйте альтернативные способы решения, а не соглашайтесь на первую попавшуюся реализацию.

Со временем тактика изменилась. Задача: «напиши скрипт для экспорта из таблицы в JSON». Первый результат не учитывал структуру таблицы. Демонстрирую ему: «вот такой должен получиться JSON». Бот советует изменить структуру таблицы, чтобы код работал. Делаю. Результат стал лучше, но не учитывал отсутствующий год у некоторых марок, из-за чего в массиве генерировались пустые строки. Я ему: «у картинок может не быть года», а он пишет условие для проверки таких полей. Ещё в таблице названия марок с суфиксом .png, поэтому пишу: «обрезай расширение png». Так код постепенно расширился до нужного мне функционала.

В примере видно, что я не задал изначально чётких условий. Ведь когда просишь его «нарисовать сову», то получаешь нерабочий код, в котором чёрт ногу сломит. Поэтому пока лучший способ — идти от простого к сложному.

Да и вообще, процесс стал анекдотом. Он присылает результат, но код не работает. Пишу: «чини давай свою брахмапутру», а он мне в ответ: «Извините, действительно напутал, вот новый вариант». В какой-то момент забываешь, что говоришь с ИИ, вдовесок машина бесит своей услужливостью. Найдет ошибки даже там, где их нет! Отсюда четвертое: важно понимать, что он предлагает. А не то превратите его в Скайнет.

Но даже от нерабочего кода бывает польза. Иногда достаточно написать: «почини этот код», перед этим указав ему нужный контекст «мой проект на Eleventy» или подкрепив его самоуверенность словами «ты опытный frontend разработчик».

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

Подытожу.

ChatGPT не золотая рыбка, но при осмысленном использовании расширяет возможности. Особенно — кому не хватало знаний или мозгов (или как мне, того и другого).

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

Хочу пожелать вам оставаться любознательными и не бояться экспериментов.

Что касается самого проекта: 150+ марок ждут своей публикации в августе. Об обновлениях обязательно ещё расскажу.

Собрал ссылки на посты
— Анонс: запустил коллекцию марок
— Сколько стоила реализация
— Про понятность, отклик и эстетику
— Про движки и фреймворки
— Как мне помогал ChatGPT
— Зачем изучать ИИ

Напишите, насколько душное чтиво? Боту понравилось, но ему я не верю.

С пятничкой, кста.

Как-то @garbovsky подметил:
— Если посмотреть на иконки переводчиков, то всегда китайский иероглиф стоит сзади, как непонятный язык. А латинская буква, как понятный, выделяется спереди.

Наверняка, дизайнер хотел подчеркнуть разность языков таким приёмом. Но если посмотреть на логотипы Яндекса или Гугла, то заставляет задуматься.

Согласен!

Обнаружил весьма точные рекомендации у Авто.ру. Они как-то проанализировали сумму моих отпускных и предложили соответствующие этой сумме варианты.