Жекичан
Пришло время бэкстейджа. У меня нет чёткого плана как рассказывать, поэтому буду вещать обо всём. Не стесняйтесь в комментах спрашивать то, что интересно именно вам. Бабки, сука, бабки! Потратил 3 770 ₽. При условии наличия сканера, который у меня уже был…
Сегодня аж 2 поста про реализацию.
На подкорке у меня сложилось 3 метрики хорошего тактильного ощущения от продукта: понятность, отклик и эстетика. Я представлял, как люди приходят в галерею, смотрят на картины и кайфуют. И хотелось, чтобы работало везде хорошо.
За эстетику я не переживал, потому что марки сами по себе визуальный контент. Главное, чтобы интерфейс не отвлекал от них.
С понятностью тяжелее. Я задумывал Пинтерест по маркам. С возможностью почитать: кто придумал марку, сколько стоила, а сколько стоит сейчас. А ещё надо показать похожие марки!
Когда я взялся реализовать, макеты превратились в тыкву. Первая проблема — нехватка данных. У меня есть 200 марок, но нет Википедии, с которой бы я брал эти данные. Важны ли кому-то эти данные вообще? Думаю нет.
Сходу начал флексить функционал. Остановился на фильтрах и том, что я знал точно: страну и год. А позже придумал к ним категории. Лучшее из возможных решений, чтобы поскорее запуститься.
Со скоростью работы тяжелее всего. Помним, что контент — картинки. Графика сама по себе тяжелая, а тут аж 200 картинок и их будет больше. Сами картинки надо показать во всей красе, не в ущерб ретине. А ещё нужно, чтобы они быстро грузились. И телефону нужна своя картинка, чтобы не грузить большую десктопную. Штош, делаем.
Первоначально все марки — PNG. В 11ty есть плагин, который конвертит картинки в нужные размеры и расширения. Я выбрал WEBP, как альтернативу по качеству PNG. А JPEG для старых-капризных устройств.
Просто уменьшить вес недостаточно, нужно адаптировать их под разные экраны. Поэтому к сжатию картинок добавились размеры в 300, 600, 960, 1200, 2140. Браузер загрузит подходящую под разрешение, а большую версию покажет в модальнике.
Бонусом добавил версию 12 пкс, эту миниатюру вы видите под блюром, когда марки загружаются. Хотелось, чтобы вы скорее увидели контент на странице, а потом дождались загрузки всех картинок.
И вот, после всех фокусов, в коде уже не 200 картинок, а 1200. Но главная, цель достигнута: скорость загрузки картинок.
На подкорке у меня сложилось 3 метрики хорошего тактильного ощущения от продукта: понятность, отклик и эстетика. Я представлял, как люди приходят в галерею, смотрят на картины и кайфуют. И хотелось, чтобы работало везде хорошо.
За эстетику я не переживал, потому что марки сами по себе визуальный контент. Главное, чтобы интерфейс не отвлекал от них.
С понятностью тяжелее. Я задумывал Пинтерест по маркам. С возможностью почитать: кто придумал марку, сколько стоила, а сколько стоит сейчас. А ещё надо показать похожие марки!
Когда я взялся реализовать, макеты превратились в тыкву. Первая проблема — нехватка данных. У меня есть 200 марок, но нет Википедии, с которой бы я брал эти данные. Важны ли кому-то эти данные вообще? Думаю нет.
Сходу начал флексить функционал. Остановился на фильтрах и том, что я знал точно: страну и год. А позже придумал к ним категории. Лучшее из возможных решений, чтобы поскорее запуститься.
Со скоростью работы тяжелее всего. Помним, что контент — картинки. Графика сама по себе тяжелая, а тут аж 200 картинок и их будет больше. Сами картинки надо показать во всей красе, не в ущерб ретине. А ещё нужно, чтобы они быстро грузились. И телефону нужна своя картинка, чтобы не грузить большую десктопную. Штош, делаем.
Первоначально все марки — PNG. В 11ty есть плагин, который конвертит картинки в нужные размеры и расширения. Я выбрал WEBP, как альтернативу по качеству PNG. А JPEG для старых-капризных устройств.
Просто уменьшить вес недостаточно, нужно адаптировать их под разные экраны. Поэтому к сжатию картинок добавились размеры в 300, 600, 960, 1200, 2140. Браузер загрузит подходящую под разрешение, а большую версию покажет в модальнике.
Бонусом добавил версию 12 пкс, эту миниатюру вы видите под блюром, когда марки загружаются. Хотелось, чтобы вы скорее увидели контент на странице, а потом дождались загрузки всех картинок.
И вот, после всех фокусов, в коде уже не 200 картинок, а 1200. Но главная, цель достигнута: скорость загрузки картинок.
Жекичан
Пришло время бэкстейджа. У меня нет чёткого плана как рассказывать, поэтому буду вещать обо всём. Не стесняйтесь в комментах спрашивать то, что интересно именно вам. Бабки, сука, бабки! Потратил 3 770 ₽. При условии наличия сканера, который у меня уже был…
Если я скажу, что в процессе сделал не 1 сайт, а целых 4? На разных стэках: конструкторе, php, nuxt.js и статике. Вы скажете, что я извращенец. А я отвечу: Да!
Уже писал, что для меня важна скорость работы. А ещё, мне интересны сами технологии. Тем более, когда под рукойиндус из Мумбаи ChatGPT, то как-то спокойнее.
Cargo и Framer. Первым делом попробовал конструкторы. Уже через день был прототип. Но я быстро понял, что не хочу запирать себя на платформах. Ну какой опен-сорс на конструкторах, камон! И вовремя отказался от идеи.
Kirby CMS. За Кирби слежу давно. Работает на PHP, подкупает своей гибкостью. Движок для меня самая понятная сущность, потому что там есть хоть какая-то админка. За неделю сделал прототип и даже думал запускать, но снова повис вопрос: какой же это опен-сорс? Для работы нужен сервер, апач, да и с докером лень разбираться. Я не программист, а значит при масштабировании такого решения быстро уйду в костыли.
***
На этой ноте проект завис на пару недель, пока я не вспомнил про Jamstack.
Уже писал, что для меня важна скорость работы. А ещё, мне интересны сами технологии. Тем более, когда под рукой
Cargo и Framer. Первым делом попробовал конструкторы. Уже через день был прототип. Но я быстро понял, что не хочу запирать себя на платформах. Ну какой опен-сорс на конструкторах, камон! И вовремя отказался от идеи.
Kirby CMS. За Кирби слежу давно. Работает на PHP, подкупает своей гибкостью. Движок для меня самая понятная сущность, потому что там есть хоть какая-то админка. За неделю сделал прототип и даже думал запускать, но снова повис вопрос: какой же это опен-сорс? Для работы нужен сервер, апач, да и с докером лень разбираться. Я не программист, а значит при масштабировании такого решения быстро уйду в костыли.
***
На этой ноте проект завис на пару недель, пока я не вспомнил про Jamstack.
Nuxt.js. Современные продукты работают на Реакте, Электроне и остальных терминах из школьной физики непонятных обычному человеку. Да я и сам мало чего понимаю, просто скажу, что в этом подходе весь процесс генерации страницы для клиента ложится на сервер, а значит при неграмотной настройке это может стать узким горлышком проекта.
Но ещё я думаю, что это шаг эволюции и мне просто нужно дорасти до такого решения. Когда-нибудь к этому вернусь.
Eleventy. Ну тут всё просто! Вы же знаете, что любой сайт это HTML-странички? Любое из перечисленных выше решений по-разному эти странички «отдаёт» вашему браузеру. Нативность и скорость достигается как раз тем, что вашему браузеру надо получить HTML-страницу и обработать её. Чем меньше различного рода генераций и серверных обработок, тем лучше. Это и есть Jamstack.
11ty запускается один раз, чтобы сгенерить те самые странички, положить их на сервер и всё. В моём случае, решающим фактором ещё был плагин для сжатия картинок. Ваш браузер сразу видит страничку, а вся ответственность ложится на Cloudflare CDN, который отдаёт вашему браузеру картинки с ближайщего к вам сервера.
Наибольшим минусом у такого решения может быть высокий порог входа. Любое взаимодействие с сайтом происходит через код. Но мы все помним про индуса?
А плюсом: скорость работы и простота развёртывания проекта. Этому решению подойдет бесплатный Netlify, Cloudflare Pages или самый дешевый хостинг. Для небольших проектов подходит идеально.
Но ещё я думаю, что это шаг эволюции и мне просто нужно дорасти до такого решения. Когда-нибудь к этому вернусь.
Eleventy. Ну тут всё просто! Вы же знаете, что любой сайт это HTML-странички? Любое из перечисленных выше решений по-разному эти странички «отдаёт» вашему браузеру. Нативность и скорость достигается как раз тем, что вашему браузеру надо получить HTML-страницу и обработать её. Чем меньше различного рода генераций и серверных обработок, тем лучше. Это и есть Jamstack.
11ty запускается один раз, чтобы сгенерить те самые странички, положить их на сервер и всё. В моём случае, решающим фактором ещё был плагин для сжатия картинок. Ваш браузер сразу видит страничку, а вся ответственность ложится на Cloudflare CDN, который отдаёт вашему браузеру картинки с ближайщего к вам сервера.
Наибольшим минусом у такого решения может быть высокий порог входа. Любое взаимодействие с сайтом происходит через код. Но мы все помним про индуса?
А плюсом: скорость работы и простота развёртывания проекта. Этому решению подойдет бесплатный Netlify, Cloudflare Pages или самый дешевый хостинг. Для небольших проектов подходит идеально.
Ого, вот это ты, Женя, текста накатал. Кто ж столько прочитает? 🤨
Please open Telegram to view this post
VIEW IN TELEGRAM
Не устали ещё? Сегодня вас ждёт заключительная простыня про ChatGPT 4. С примерами!
Сначала дисклеймер: я не разработчик. Умею верстать, пойму что-то на JS, но своё никогда не напишу. Слишком ленив и глуп для такого.
GPT помогает понять «как устроен код», либо пишет код за вас. Первый навык зачастую полезнее.
***
Всё началось с задания:
Сначала 11ty ругался на конфиг, потом нерабочие функции в шаблонизаторе. С 4 попытки пришла инструкция учитывающая все условия, но каждая часть требовала доработки. Отсюда первое: не пытайтесь упихать всё желаемое в один промт. Добивайтесь результата итерративно.
Следующая задача:
Со временем тактика изменилась. Задача:
В примере видно, что я не задал изначально чётких условий. Ведь когда просишь его «нарисовать сову», то получаешь нерабочий код, в котором чёрт ногу сломит. Поэтому пока лучший способ — идти от простого к сложному.
Сначала дисклеймер: я не разработчик. Умею верстать, пойму что-то на JS, но своё никогда не напишу. Слишком ленив и глуп для такого.
GPT помогает понять «как устроен код», либо пишет код за вас. Первый навык зачастую полезнее.
***
Всё началось с задания:
«разработай галерею на Eleventy»
. Задал условия: «коллекция должна храниться в такой-то структуре; нужна фильтрация по году, стране и тегам; картинки открываются на весь экран»
. Результат: пошаговая инструкция. Вот бы я охренел, если бы всё заработало сразу. Такое случается, но редко.Сначала 11ty ругался на конфиг, потом нерабочие функции в шаблонизаторе. С 4 попытки пришла инструкция учитывающая все условия, но каждая часть требовала доработки. Отсюда первое: не пытайтесь упихать всё желаемое в один промт. Добивайтесь результата итерративно.
Следующая задача:
«как из гугл таблиц сгенерировать JSON»
, чтобы организовать базу. Сначала предлагает использовать сторонние сервисы и даже API, а спустя пару запросов советует встроенный в таблицы «Apps Script». Поэтому второе: исследуйте альтернативные способы решения, а не соглашайтесь на первую попавшуюся реализацию.Со временем тактика изменилась. Задача:
«напиши скрипт для экспорта из таблицы в JSON»
. Первый результат не учитывал структуру таблицы. Демонстрирую ему: «вот такой должен получиться JSON»
. Бот советует изменить структуру таблицы, чтобы код работал. Делаю. Результат стал лучше, но не учитывал отсутствующий год у некоторых марок, из-за чего в массиве генерировались пустые строки. Я ему: «у картинок может не быть года»
, а он пишет условие для проверки таких полей. Ещё в таблице названия марок с суфиксом .png, поэтому пишу: «обрезай расширение png»
. Так код постепенно расширился до нужного мне функционала.В примере видно, что я не задал изначально чётких условий. Ведь когда просишь его «нарисовать сову», то получаешь нерабочий код, в котором чёрт ногу сломит. Поэтому пока лучший способ — идти от простого к сложному.
Да и вообще, процесс стал анекдотом. Он присылает результат, но код не работает. Пишу:
Но даже от нерабочего кода бывает польза. Иногда достаточно написать:
Однако, самый действенный способ что-то починить — разобраться самому. Поэтому пишу:
«чини давай свою брахмапутру»
, а он мне в ответ: «Извините, действительно напутал, вот новый вариант»
. В какой-то момент забываешь, что говоришь с ИИ, вдовесок машина бесит своей услужливостью. Найдет ошибки даже там, где их нет! Отсюда четвертое: важно понимать, что он предлагает. А не то превратите его в Скайнет.Но даже от нерабочего кода бывает польза. Иногда достаточно написать:
«почини этот код»
, перед этим указав ему нужный контекст «мой проект на Eleventy»
или подкрепив его самоуверенность словами «ты опытный frontend разработчик»
. Однако, самый действенный способ что-то починить — разобраться самому. Поэтому пишу:
«как работает этот код»
и присылаю код целиком. В ответ вижу: какая переменная за что отвечает, в какой момент отрабатывает и замечаю неверную логику. Указав на проблему, приходит работающий код.Подытожу.
ChatGPT не золотая рыбка, но при осмысленном использовании расширяет возможности. Особенно — кому не хватало знаний или мозгов(или как мне, того и другого).
Согласен с популярным мнением: он не заменит специалистов, но их сменят те, кто умеет работать с ИИ, потому что в привычном мире такие люди смогут достигать результата быстрее, а значит будут выгоднее для бизнеса.
Хочу пожелать вам оставаться любознательными и не бояться экспериментов.
Что касается самого проекта: 150+ марок ждут своей публикации в августе. Об обновлениях обязательно ещё расскажу.
ChatGPT не золотая рыбка, но при осмысленном использовании расширяет возможности. Особенно — кому не хватало знаний или мозгов
Согласен с популярным мнением: он не заменит специалистов, но их сменят те, кто умеет работать с ИИ, потому что в привычном мире такие люди смогут достигать результата быстрее, а значит будут выгоднее для бизнеса.
Хочу пожелать вам оставаться любознательными и не бояться экспериментов.
Что касается самого проекта: 150+ марок ждут своей публикации в августе. Об обновлениях обязательно ещё расскажу.
Собрал ссылки на посты
— Анонс: запустил коллекцию марок
— Сколько стоила реализация
— Про понятность, отклик и эстетику
— Про движки и фреймворки
— Как мне помогал ChatGPT
— Зачем изучать ИИ
Напишите, насколько душное чтиво? Боту понравилось, но ему я не верю.
С пятничкой, кста.
— Анонс: запустил коллекцию марок
— Сколько стоила реализация
— Про понятность, отклик и эстетику
— Про движки и фреймворки
— Как мне помогал ChatGPT
— Зачем изучать ИИ
Напишите, насколько душное чтиво? Боту понравилось, но ему я не верю.
С пятничкой, кста.
Как-то @garbovsky подметил:
— Если посмотреть на иконки переводчиков, то всегда китайский иероглиф стоит сзади, как непонятный язык. А латинская буква, как понятный, выделяется спереди.
Наверняка, дизайнер хотел подчеркнуть разность языков таким приёмом. Но если посмотреть на логотипы Яндекса или Гугла, то заставляет задуматься.
— Если посмотреть на иконки переводчиков, то всегда китайский иероглиф стоит сзади, как непонятный язык. А латинская буква, как понятный, выделяется спереди.
Наверняка, дизайнер хотел подчеркнуть разность языков таким приёмом. Но если посмотреть на логотипы Яндекса или Гугла, то заставляет задуматься.
Пацаны и пацанессы, мы в Журналусе! 👏
Please open Telegram to view this post
VIEW IN TELEGRAM
Жекичан
Пацаны и пацанессы, мы в Журналусе! 👏
А помните я запустил сайт с марками? Ну конечно помните, я же о нём каждый день пишу. Просто получаю эндорфин, когда про него рассказывают. Момент признания обществом короткий, но очень важный, чтобы делать ещё больше и круче.
В понедельник Женя Арутюнов написал про сайт в канале «Это красиво, а это нет». Ням!
А намедни Илья Бирман упомянул нас у себя в блоге.
И вы расскажите, если ещё нет. Побудьте кайф-курьерами для своих друзей или подписчиков. А я ссылку на ваш канал прикреплю (присылайте в личку). Ниже попытка гипноза
😀 😀 😀 😀 😀 😀 😀 😀
В понедельник Женя Арутюнов написал про сайт в канале «Это красиво, а это нет». Ням!
А намедни Илья Бирман упомянул нас у себя в блоге.
И вы расскажите, если ещё нет. Побудьте кайф-курьерами для своих друзей или подписчиков. А я ссылку на ваш канал прикреплю (присылайте в личку). Ниже попытка гипноза
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Я устрою вам тур по Кавказским Минеральным Водам, если вы не против.
Это Кисловодский парк.Вы знали про такой город? Он очень большой и красивый. Крупнейший парк в Европе!
> «Площадь Кисловодского курортного парка, составляет 965,8 га. Для сравнения - самый большой городской парк в Великобритании имеет площадь 955 га», Википедия.
У меня всего лишь несколько фотографий из сегодняшней прогулки, но уверяю вас, стоит побывать в нём лично.
Это Кисловодский парк.
> «Площадь Кисловодского курортного парка, составляет 965,8 га. Для сравнения - самый большой городской парк в Великобритании имеет площадь 955 га», Википедия.
У меня всего лишь несколько фотографий из сегодняшней прогулки, но уверяю вас, стоит побывать в нём лично.