14

Продолжение поста «Сделал сайт для визуализации жизни исторических людей»

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

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

Продолжение поста «Сделал сайт для визуализации жизни исторических людей» Опыт, История (наука), Исторические личности, Сайт, Полезные сайты, Искусственный интеллект, Длиннопост, Ответ на пост

Так выглядит основной таймлайн с включенными фильтрами по стране -- здесь поменялось не так много, лишь перенёс фильтры в центр, да немного поигрался с визуалом маркеров

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

Типов вопросов сейчас 3:

  1. Угадай год рождения того или иного человека. Имя человека, его описание. И 4 варианта ответа. Ещё явно предстоит вычитывать описания людей, чтобы они не выдавали нереалистичность вариантов, но уже вполне себе старт

Продолжение поста «Сделал сайт для визуализации жизни исторических людей» Опыт, История (наука), Исторические личности, Сайт, Полезные сайты, Искусственный интеллект, Длиннопост, Ответ на пост

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

Продолжение поста «Сделал сайт для визуализации жизни исторических людей» Опыт, История (наука), Исторические личности, Сайт, Полезные сайты, Искусственный интеллект, Длиннопост, Ответ на пост

3. Расставить по порядку. Тут перетаскиванием нужно расставить 4 человек по году рождения. Это будет немного проще, когда я будут добавлены все изображения, но всё равно часто вызывает трудности, потому что основная масса людей -- 18-20 век, а, значит, часто большая часть людей будет из одной эпохи.

Продолжение поста «Сделал сайт для визуализации жизни исторических людей» Опыт, История (наука), Исторические личности, Сайт, Полезные сайты, Искусственный интеллект, Длиннопост, Ответ на пост

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

Всё ещё продолжаю использовать Cursor. Он играючи создаёт новые страницы и помогает вынести отдельные компоненты из разрастающегося монолита, но даже гпт-5 не всегда справляется, и некоторые вечера всё же приходится тратить на самостоятельное конструирование некоторых фишек.

Сайт бесплатен и не содержит рекламы, поэтому буду рад, если он будет вам интересен и полезен: https://chrono.ninja/

Показать полностью 3
17

Сделал сайт для визуализации жизни исторических людей

У меня наконец-то появилось что-то, что подойдёт под пятничное [моё], поэтому хочу им поделиться: https://chrono.ninja/

Предыстория

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

Конечно, если что-то хочешь запомнить, оно должно висеть у тебя перед глазами. Над монитором дома как раз было пустое место, поэтому я решил повесить бумажку и постепенно её заполнять. Начал, конечно же, с Александра нашего Сергеевича, да что-то, что в голову пришло, нарисовал вокруг него. Хватило меня на 10 имён, после чего пришло осознание, что нужно бы ещё как-то и масштабы соблюдать. Но для первой пробы может и ничего.

Сделал сайт для визуализации жизни исторических людей Опыт, История (наука), Исторические личности, Сайт, Полезные сайты, Искусственный интеллект, Длиннопост

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

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

Зато пришла в голову идея нарисовать всё это в каком-нибудь графическом редакторе. Фигма с её бесконечным полем звучала как неплохой вариант, небольшие навыки в ней у меня уже были, поэтому я взялся за дело. Здесь уже было полегче -- масштаб соблюдать было относительно легко, прямоугольнички можно было двигать, чтобы получалась более компактная упаковка, поэтому я открыл разные сайты вроде "100 великих людей", и принялся за дело. Вот что у меня получилось:

Сделал сайт для визуализации жизни исторических людей Опыт, История (наука), Исторические личности, Сайт, Полезные сайты, Искусственный интеллект, Длиннопост

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

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

Сайты-одностраничники я до этого делал лет 5 назад в рамках курса по react, но ни нормального Backend, ни в целом процедуры создания полноценного сайта не проходил никогда. Но много слышав про вайбкодинг в целом и про Cursor в частности, решил попробовать, ещё слабо представляя, какой именно инструментарий мне нужен.

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

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

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

Сделал сайт для визуализации жизни исторических людей Опыт, История (наука), Исторические личности, Сайт, Полезные сайты, Искусственный интеллект, Длиннопост

О сайте

Итак, сайт https://chrono.ninja нужен для того, чтобы визуально наглядно видеть, кто когда жил, кто с кем пересекался во времени (а, значит, может быть даже встречался или переписывался?), и прочее, прочее.

Основная страница -- таймлайн, на котором всё и отображается.

Сделал сайт для визуализации жизни исторических людей Опыт, История (наука), Исторические личности, Сайт, Полезные сайты, Искусственный интеллект, Длиннопост

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

Сделал сайт для визуализации жизни исторических людей Опыт, История (наука), Исторические личности, Сайт, Полезные сайты, Искусственный интеллект, Длиннопост

На Циолковского мы просто навелись, а Гагарина до этого открыли нажатием.

Вторая по важности страница -- списки. На ней вы можете сами добавить новых личностей.

Если отправить их на согласование, то после проверки они появятся в общем списке и на таймлайне.

Сделал сайт для визуализации жизни исторических людей Опыт, История (наука), Исторические личности, Сайт, Полезные сайты, Искусственный интеллект, Длиннопост

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

Заключение

Конечно, ещё куча планов -- не все баги пофикшены, не везде UI понятный и удобный. Ещё много людей должно быть добавлено, а в будущем хочется дать возможность добавлять и не связанные с людьми периоды (как, например, войны между странами) и "мировые" события, которые не свяжешь с одним человеком.

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

Показать полностью 6
Отличная работа, все прочитано!