Когда я создавал свой сайт-портфолио sdegutis.com, я хотел придать ему характер и не выглядеть скучно. Поэтому я искал стоковые фотографии, чтобы использовать их в качестве изображения героя в верхнем заголовке моего сайта. Самыми интересными для меня были изображения кода, но я не смог найти ни одного, который бы мне понравился.

Но потом меня осенило: мне очень нравится, как мой код работает в моей IDE, так почему бы просто не сделать скриншот моего кода и не использовать его? Что я и сделал сначала. Но это был ошибочный план: мне нужно было сделать изображение достаточно широким, чтобы оно хорошо смотрелось на всех размерах экрана, но самый маленький размер файла, который я мог получить, составлял 800 КБ, и он загружался для меня заметно медленно в мобильном Safari.

Вместо того, чтобы возиться со сжатием gzip и другими настройками nginx или искать бесплатный CDN, я хотел проявить творческий подход. Затем меня снова осенило: почему бы не сделать HTML-версию в точности того, что я видел в своей IDE? Он будет загружаться невероятно быстро, но при этом выглядеть красиво.

  1. Мой первый шаг состоял в том, чтобы посмотреть, смогу ли я просто скопировать текст из VS Code (буквально Cmd + C) — зная, что macOS позволяет программам добавлять данные в монтажный стол в нескольких форматах — в надежде, что он скопирует их как HTML. Вставка в TextEdit оказалась успешной: текст был раскрашен!
  2. Затем я попытался сохранить файл TextEdit как файл HTML, но сгенерированный им код был не очень автономным и эффективным. Потребовалось бы немало усилий, чтобы встроить его в другой HTML-файл, что позволило бы мне расположить и стилизовать его так, как я хотел. В этот момент я почти потерял надежду, пока не вспомнил, что это была версия HTML TextEdit, а не исходный HTML, сгенерированный VS Code!
  3. Поэтому я искал аргумент для pbpaste, который выводил бы HTML-код монтажного стола напрямую, минуя генератор TextEdit. У него был аргумент -Prefer, но он не позволял использовать HTML. Погуглив, я нашел сообщение StackOverflow, объясняющее некоторую загадочную команду bash, содержащую подкоманду AppleScript, и вуаля, у меня был чистый, автономный HTML! Поэтому я превратил это в исполняемый скрипт bash.
  4. Затем мне пришлось вырвать изображение из моего <header> и заменить его строкой HTML из трех столбцов, которую я заменил встроенным кодом (используя собственный скрипт Node, который напрямую загружал файлы и помещал их в Pug). После некоторых настроек я обнаружил, что flexbox работает достаточно хорошо.
  5. Наконец, я разработал рабочий процесс копирования примерно 15–20 строк кода в VS Code, использования сценария вставки для передачи его в файл, а затем просмотра того, как он выглядит на HTML-странице, в которую он был встроен. Через несколько пытается, я наконец-то получил что-то, что выглядело достаточно прилично как на рабочем столе, так и на мобильном телефоне, и, поскольку это был весь текст, он загружался мгновенно!