Заметки Романа Теличкина

Переезд заметок с Tilda на Github

Июль 2018
Написание заметок помогает структурировать мысли в голове и дает возможность донести свою точку зрения окружающим. Созидательный процесс намного продуктивней, если используются удобные инструменты, но найти удобный инструмент для написания небольших заметок и размещения их в сети оказалось непросто.  
  ### Шаг первый – Jekyll

  [Jekyll](https://jekyllrb.com/) – это генератор статических сайтов, который превращает 
  [Markdown](https://en.wikipedia.org/wiki/Markdown) в HTML-страницы. Прямо сейчас вы читаете текст, написанный с помощью Markdown.
  Когда я пишу в Markdown, хочется **скорее закончить заметку**. Меня раздражает отсутствие быстрой обратной связи о том, как заметка 
  будет выглядеть в конечном итоге. 

  У Jekyll есть хорошие фичи: категории, черновики, тысячи тем оформления, но эти фичи 
  для решение моей задачи – написания заметок – не нужны! Не вижу смысла использовать кухонным комбайн там, где отлично справится
  обычная тёрка.

  После использования Jekyll у меня появилось основное требование к инструменту для заметок – наличие быстрой обратной связи о 
  конечном виде заметки.

Шаг второй – Tilda

Tilda – это платформа для создания веб-сайтов с помощью готовых блоков. Tilda позволяет сразу видеть результат своего труда. Похоже на идеальный инструмент для меня! Кроме готовых блоков в Tilda есть готовые шаблоны, в том числе и для блогов. К сожалению, все шаблоны блогов сделаны "современно" и как под копирку: огромная картинка и шрифт в заголовке, огромное расстояние между текстом и заголовком.
Мне не нравятся современные сайты, в которых самой статье или заметке уделяется меньше внимания, чем заголовку, поэтому пришлось создавать шаблон под свои нужды. Мой шаблон выглядит очень просто, в нем всего 4 основные сущности: заголовок, дата публикации, обычный текст и код:
Скриншот выше – это окно создания новой заметки. Как видно, даже здесь обратная связь о результате не полностью правдива: сверху есть кнопки "Отменить", "Предпросмотр" и прочие, а снизу – список доступных блоков, которых в итоговом сайте не будет, надпись "Header" будет заменена реальным header'ом, а надпись "Footer" – реальным footer'ом. Чтобы увидеть конечный результат, все равно нужно нажимать "Предпросмотр":
Так как в Tilda все построено на блоках, то для добавления нового абзаца нужно не просто нажать "Enter", а скопировать блок "Обычный текст" с помощью специальной кнопки, удалить все содержимое из копии и только после этого продолжать писать. Такой UX выбивает из потока и заставляет бороться с инструментом вместо создания контента. А чтобы нормально отформатировать контент внутри абзаца, нужно открывать специальный редактор, что еще сильнее выбивает из потока:
Tilda упрощает создание довольно сложных сайтов, предоставляет автоматическое подключение аналитики, много готовых шаблонов и стоит 700₽ в месяц для одного сайта. Сайт с заметками не сложный, мне не нужна статистика и сотни готовых шаблонов, поэтому платить 700₽ в месяц за неиспользуемый функционал глупо. Кроме того, Tilda не смогла в полной мере справиться с предоставлением быстрой обратной связи. Самое время писать свое решение!

Шаг третий – Github

Программист не должен стесняться самостоятельно писать ПО для решения своих проблем. Сейчас большая часть индустрии разработки ПО называет собственные решения "велосипедами" и негативно относится к людям, которые их создают. Для решения моей текущей проблемы свой "велосипед" оказался намного удобней существующих решений. Вообще, я считаю, что собственные решения недооценивают и обязательно напишу отдельную заметку, раскрывающую эту тему. 
Мое решение – это WYSIWYG редактор заметок. Он не поддерживает большое количество шаблонов, тем, тегов и категорий, он не собирает статистику о посетителях. Единственное, что он поддерживает – это создание заметок в терминах конечного результата. 
Слова и скриншоты не смогут до конца продемонстрировать прелесть такого подхода, поэтому предлагаю сравнить статью "Один инбокс для всего-всего" в режиме чтения и в режиме редактирования. Визуально нет никакой разницы между этими режимами! Сейчас режим редактирования не приспособлен для использования на мобильных устройствах с тачскрином: контекстное меню открывается с помощью нажатия на правую кнопку мыши. Чтобы создать новую заметку, достаточно открыть ссылку https://telichk.in/edit.html и удалить все содержимое, используя cmd + A и клавишу Delete. 
Сохраняются заметки просто:
  1. Нажимаем правую кнопку мыши и выбираем "Save as HTML"
  2. Вписываем в появившемся окне slug заметки и нажимаем "ОК"
  3. Копируем HTML в папку /posts
  4. Добавляем новый пост на главную в файле template-index.js
  5. Коммитим и пушим изменения в master
Мой сайт для заметок не использует никаких внешних зависимостей, не нуждается в node, npm, babel, с ним не надо делать browserify и подключать одним файлом. Для рендеринга на стороне клиента написано свое решение в 80 строк кода, роутинг на стороне клиента занял 25 строк. Вместо чуть более ста строк кода можно было использовать React и React-router, установить все это дело через npm и собрать с помощью Webpack, но боюсь, что сейчас я бы не заканчивал эту заметку, а продолжал бороться с чужими инструментами и абстракциями, покорно ожидая, пока Webpack соберет мой проект.
Открыть комментарии