У Nevsky.ae есть обычная версия, AI-чат и ещё один способ входа — терминал. В нём можно открыть раздел, найти статью и прочитать её прямо в текстовом интерфейсе. Это ещё одно представление материалов моего блога.
Мне не требовалась отдельная коллекция текстов для этого режима. Терминал получает опубликованные материалы сайта: заголовки, разделы, содержание, изображения и ссылки. Когда меняется статья, у неё не должна оставаться забытая терминальная копия.
Сначала — имя, потом — чтение
Одна из заметных частей этой работы — большая надпись с моим именем. В октябре я попросил собрать все варианты в рандомайзер: пусть меняются язык, стиль и анимация, а рядом остаются кнопки случайного переключения и паузы. В выпуске 21 октября было семь языков имени, 13 стилей и шесть эффектов.
Автосмена работает с интервалом около пяти секунд, когда открыт выбор разделов. Если человек вводит команду, читает материал, выделяет текст или переключился в другую вкладку, анимация не должна ему мешать. Для reduced motion она тоже ограничена. Здесь пришлось заниматься поведением интерфейса, а не только формой букв.
Ниже — настоящий терминал текущей локальной сборки. Его можно попробовать прямо в статье: выбрать раздел стрелками и нажать Enter или напечатать help. Кнопка «Открыть отдельно» даёт ему всё окно браузера.
Терминальная версия Nevsky.ae
Терминальная версия сайта
Команды относятся к сайту
Внутри есть sections, posts, pages и названия разделов — например, ai или design. Команда search ищет материал, open открывает его по номеру, back возвращает к списку. Для статьи доступны images и links. Exit возвращает к обычному сайту. Можно пользоваться меню и не запоминать команды.
При этом это не доступ к командной строке моего компьютера. Команды разбирает код сайта, и действия ограничены просмотром его материалов. В терминальном окне нет произвольного выполнения программ.
То, что ломается между двумя красивыми кадрами
При изменении размера окна проявилась неприятная деталь: терминал ещё дописывал старый вывод, когда новый уже начинал перерисовываться. Из-за этого могли дублироваться меню или теряться введённая команда. В обработке вывода появились проверки поколений: устаревшая запись не должна перезаписывать новое состояние.
Отдельно пришлось проверять имена на разных языках и узкие экраны. Длинное имя, строка языков, социальные иконки и команда должны помещаться одновременно. Показать один удачный английский скриншот здесь недостаточно.
Позже, при переходе сайта на Medeo, терминал получил Pixel. В xterm остались измерения и ASCII-графика, а видимый текст вывели через DOM, чтобы выделение совпадало со словами. Для меня это важная часть работы: если человек не может нормально выделить предложение, внешний вид терминала этого не компенсирует.
Терминал читает те же опубликованные материалы, что обычные страницы. В этой истории я показываю выпуск многоязычного рандомайзера 21 октября и последующую работу с Pixel и выделением текста. Проверить основной путь можно в интерактивном окне статьи: раздел, статья, возврат к списку.
Связанные истории: История Nevsky.ae · Разговорное портфолио.
@nevsky_alexander
В Instagram — Дубай без парадного фасада: семья, город, находки и то, что происходит между проектами. В Threads — мысли вслух о дизайне и AI, на YouTube — видео, которым тесно в сторис. Подписывайтесь там, где вам удобнее: будем на связи