Хронология языков программирования — и открытый редактор хронологий

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

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

Заодно и несколько готовых хронологий для примера: «История языков программирования», «Великие научные открытия», «Освоение космоса», «Технологии повседневной жизни», «История авиации», «История оружия: от пороха до ядерной бомбы» и другие.

Попробовать редактор можно прямо в браузере — открыть PWA. Там же доступны готовые хронологии для изучения возможностей приложения.

Ключевые идеи

При разработке я ориентировался на несколько ключевых принципов:

Визуализация событий

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

Открытый формат

Очень важный аспект — открытый формат. Это простой JSON и картинки в ZIP-архиве.

Понятный масштаб

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

Редактирование

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

Создание хронологий с помощью LLM

Открытый формат позволяет делегировать первоначальное создание хронологии LLM-кам, а доведение до ума (перемещение блоков, изменение цветов и пр.) — выполнять уже в редакторе.

Экспорт хронологии в самостоятельный HTML-файл

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

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

Все приложение - один HTML-файл, полностью автономный

Ещё раз воспою оду приложениям в единственном HTML-файле:

• Редактор работает без интернета, сервера и регистрации.

• Можно скачать один HTML-файл и пользоваться им локально.

• Хронологии хранятся отдельно от приложения, в собственных файлах .timeline.

• Нет необходимости отправлять личные данные на сервер.

• PWA — альтернативный способ использования того же редактора.

Один HTML-файл — это полноценное приложение, а не просто страница с визуализацией. Скачайте его — и он с вами навсегда, независимо от дальнейшей судьбы проекта.

Как устроен формат .timeline

Формат открытый и документированный. Файл .timeline — обычный ZIP-архив, внутри которого JSON с описанием хронологии, изображения и, при необходимости, музыка.

Структура простая:

timeline.json        — события, периоды, даты, описания, настройки
images/              — изображения
thumbs/              — миниатюры изображений
audio/               — фоновая музыка (необязательно)

В JSON предусмотрены три типа элементов: событие (event), период (period) и эпоха (era). Даты могут иметь разную точность — от конкретного дня до приблизительного года, включая даты до нашей эры.

Формат не привязан к редактору: хронологии можно создавать вручную, программно или с помощью LLM. Достаточно сформировать JSON и упаковать его вместе с изображениями в ZIP-архив.

Кому интересно

Исходный код: https://github.com/MarketKernel/timeline

В релизах можно скачать итоговый HTML-файл, который и есть само приложение.

PWA с примерами хронологий — можно открыть в любом современном браузере на любой ОС.

Примечание. Хронология открывается целиком на одной странице — для просмотра деталей нужно менять масштаб.