Кофе по SSH, сайты в zip-архивах. Чистый HTML лучше всего

Очень интересная штука — интернет-магазин в консоли ^[1]. Он позволяет авторизоваться в магазине и заказать товар (кофе), не выходя из терминала. Говорят ^[2], кофе из командной строки даже вкуснее, чем обычный.

Просто заходим в магазин по SSH:

ssh terminal.shop

или

ssh 172.65.113.113

… и оформляем заказ, следуя подсказкам в терминале. Правда, они доставляют только по США, а сейчас вообще все запасы кофе уже распроданы (скриншот на КДПВ). Но сама идея великолепная: зачем вообще нужны эти графические интерфейсы, чтобы исполнить простую текстовую команду «купить кофе» или «заказать такси»?

Надеемся, что компания Terminal Products, Inc. порадует и другими концептуальными проектами для терминала. Консольный браузер, почтовые клиенты ^[3] (на скриншоте внизу aerc ^[4]), CMS для управления блогом ^[5] и даже RSS-уведомления ^[6] уже есть — всё это работает в консоли.

Мало кто помнит, но в 90-е было много интернет-магазинов, которые работали через текстовый интерфейс telnet (Bookstacks, CDNow) или по SMS, ещё до распространения веба и браузеров. Для своего времени это были суперпродвинутые технологии. До сих пор можно найти несколько сайтов (ascii.theater ^[7], mapscii.me ^[8]) и игр ^[9], доступных через консоль (у каждой игры свой порт, внимательно читайте инструкцию).

▍ Статические сайты

В последнее время появилось несколько новых генераторов статических сайтов, а общее их количество в каталоге Jamstack ^[10] достигло 355 штук:

Но некоторые выделяются из общей массы. Например, Observable 2.0 ^[11], генератор статических сайтов с красивыми отчётами и графиками. Точнее, это опенсорсный инструмент по разработке веб-приложений для работы с данными.

Пример интерактивной диаграммы:

Время отклика по результатам анализа 7 633 176 запросов

С помощью Observable Framework ^[12] можно создавать красивые и функциональные веб-приложения для работы с данными. Фреймворк сочетает в себе возможности JavaScript для создания интерактивной графики и любого языка для подготовки и анализа данных: SQL, Python, R, Rust, Go и т. д. По словам разработчиков, тут есть абсолютно всё необходимое: интерактивные графики и ввод, отзывчивые сетки, темы, тёмный режим, удобная навигация с клавиатуры — и никаких ограничений для кастомизации, потому что это код.

Визуализация разработки библиотеки Observable Plot ^[13], включая статистику с Github, количество скачиваний с npm c 7- и 28-дневным скользящими средними, а также возраст и количество открытых проблем с течением времени

На Github выложены и другие примеры ^[14].

Сгенерированный сайт можно разместить на любом бесплатном хостинге ^[15] статических сайтов (Github) или на своём сервере. Более того, с помощью инструмента вроде Git-Proxy ^[16] веб-сайт раздаётся прямо из репозитория Git без его клонирования, то есть без создания локальной копии, а напрямую. Очень удобно поставить Git на каком-нибудь дешёвом VPS ^[15] и раздавать статический сайт таким образом.

В качестве своеобразного «генератора сайтов» можно использовать также MPA Archive ^[17], прямое назначение которого — упаковывать сайты или веб-приложения MPA (Multi-Page Application) в zip-архив, откуда они запускаются. То есть мы архивируем сайт:

mpa http://habr.com

…получаем файл типа habr.com.zip, а затем mpa запускается как веб-сервер, который выдаёт содержимое этого zip на localhost.

Веб-сервер libwebsockets ^[18] тоже умеет выдавать сайты из zip-архивов.

Всё это чем-то напоминает известный формат .mht, который объединяет в одном файле html-страничку и все её ресурсы, а также Redbean ^[19], где сайт и веб-сервер пакуются в один исполняемый .zip. В Firefox можно использовать расширение Single File ^[20]. Но они сохраняют только одну страницу, а программка mpa сохраняет сразу целый сайт.

Другой способ скачать сразу целый сайт — старый добрый wget:

wget --mirror 
     --convert-links 
     --adjust-extension 
     --page-requisites 
     --no-parent 
     --wait=0.1 
     --random-wait 
     https://www.habr.com/

▍ Новости HTMX

В последнее время набирает популярность HTMX ^[21] как более простой способ веб-разработки, где современные интерактивные интерфейсы создаются напрямую средствами HTML, что позволяет уменьшить размер сайта втрое ^[22] по сравнению с React. На днях вышла статья «Почему в htmx нет этапа сборки» ^[23]. Там объясняется, что логика использования HTMX предельно простая. Сама библиотека экстремально маленькая (14 КБ ^[24] в архиве), это файлик htmx.js 3500 строк на JavaScript, без зависимостей, который вы можете отредактировать перед тем, как отправить клиенту в браузер. Это гораздо проще, чем писать на TypeScript и компилировать перед выполнением, и это обеспечивает долговечность кода JavaScript. Отсутствие сборки — это концептуальное преимущество ^[25], которое позволяет легко редактировать старые сайты и не зависеть от компилятора.

Примеры случайных сайтов на HTMX можно посмотреть в этом веб-кольце ^[26] (такие кольца были популярны в 90-е ^[27], когда сайты схожей тематики размещают у себя на страничке ссылки на следующего и предыдущего членов кольца).

Кстати, к вопросу о HTMX. Карсон Гросс ^[28] недавно опубликовал серьёзное эссе о недостатках HTMX ^[29], где разбил эту технологию в пух и прах, честно перечислил все минусы и поиздевался над автором, который это придумал, упомянув его несерьёзный личный сайт с мемами ^[30]. Как такому человеку вообще можно доверять? Всё это можно воспринимать как основательную критику, если не знать, что Карсон Гросс сам и разработал HTMX.

▍ Минимализм

Минимализм нынче в моде. В этом смысле много чему есть поучиться у ветеранов демо-сцены, которые уже несколько десятилетий соревнуются в создании красивых демок (видео) размером в несколько килобайт, оптимизируя в коде каждый байт. Например, вот такая анимация «Овечка и цветок» ^[31] с музыкой занимает всего 8159 байт, как ни сложно в это поверить (файлы .exe ^[32] для видео в разном разрешении, исходный код ^[33]).

Демо написано на C++ для окон и инициализации OpenGL. Весь визуальный контент генерируется на GPU с помощью GLSL. Контент записан в знаковых полях расстояний ^[34] и визуализируется через марширование лучей ^[35]:

Музыка требует больших вычислений на CPU и выполняется в отдельном потоке. Более подробную информацию о создании этой 8-килобайтной анимации высокого разрешения см. здесь ^[36].

Кстати, к вопросу о минималистичности и о фреймворках. Как раз недавно вышел htmz ^[37] — минималистичный микрофреймворк (166 байт, без зависимостей и JS) для создания интерактивных и модульных сайтов на чистом HTML (например, перезагрузка фрагментов веб-страниц по нажатию ссылки, см. примеры ^[38]). Создан под впечатлением от HTMX и техники веб-разработки Comet ^[39].

Примеры:

▍ HTML-редакторы

А в чём редактировать статический HTML-сайт, если не в минималистичном HTML-редакторе? Если выбирать из классических редакторов, то раньше одним из лучших считался Composer (Компоновщик) из пакета Seamonkey ^[40], это наследник Mozilla и Netscape. Пакет включает браузер, почтовый клиент, RSS-ридер, IRC-чат, клиент групп новостей, HTML-редактор — всё, что нужно для работы в интернете.

Компоновщик — удобный WYSIWYG-редактор. Несмотря на свой возраст, он до сих пор работает довольно хорошо на более-менее простых сайтах HTML 4.01.

Компоновщик из комплекта Seamonkey

Из более современных редакторов можно упомянуть KompoZer ^[41] и HTML Notepad ^[42].

После многократного переписывания своих сайтов на разных фреймворках многие люди приходят к выводу, что чистый HTML лучше всего ^[43]. Если и использовать генератор, то только как тонкую надстройку над HTML, которая добавляет минимум абстракций и лишь минимально изменяет структуру файлов и директорий.

• Стриминг HTML не по порядку ^[44], без использования JavaScript, исходный код ^[45], демо ^[46]. Смысл в том, что контент с сервера передаётся клиенту по мере генерации, в случайном порядке. Так гораздо эффективнее, чем каждый раз дожидаться очередного фрагмента в очереди.

  Рендеринг частей DOM отдельно от остальных частей производится с помощью Shadow DOM ^[47].

• 67 трюков по дебагу в браузере ^[48].
• Предсказание текста на JS ^[49], без использования LLM.
  

  Здесь используется новая техника ArT DeCo (Anchor Tree with Decaying Context) для хранения двух уровней контекста. Первый уровень — акроним трёх слов перед якорем, второй уровень — акроним трёх слов перед первым уровнем, исходный код ^[50]. Работает для английского языка со словарём в MessagePack ^[51], можно использовать в своих проектах.