unifiy address format

src/pages/posts/2020/initial_post.md

@@ -0,0 +1,91 @@
+---
+
+layout: post
+
+lang: 'ru'
+date: '2020-11-08'
+
+year: '2020'
+section: 'posts'
+
+title: 'initial post'
+description: 'Первый пост в этом фэнзине, рассказывающий о его внутреннем устойстве'
+
+---
+
+# Initial Post
+
+**Oddsquat** — мой маленький личный фэнзин про эксперименты, код и прочий киберпанк. Обычно такие сайты называются блогами, но в слове «фэнзин» есть приятный отголосок панк-культуры и её неотъемлемой DIY-составляющей.
+
+Основные причины, побудившие меня на создание своего уютного куска интернета:
+
+- Хочется писать буквы, а возвращаться в ЖЖ не хочется.
+- Фронтендер без портфолио — подозрительный фронтендер.
+- Современный веб — памятник оверинженирингу. Лендинг с двумя абзацами текста, тремя картинками и мегабайтным бандлом из модных библиотек — одновременно безумие и норма в текущих реалиях. Мне больно на это смотреть, поэтому пришлось строить себе персональный оазис.
+
+В первом посте хочется рассказать, какие инструменты были использованы для создания этого сайта, какие решения были приняты и почему.
+
+## Название
+
+Я&nbsp;вырос в&nbsp;девяностые, поэтому квикимобиль, бэтпещера и&nbsp;пузиблинчики для меня не&nbsp;пустой звук, а&nbsp;образец системы нейминга. Вот, например, у&nbsp;меня есть <a href="https://github.com/He4eT/oddkb" target="_blank">oddkb</a>.
+
+Свою квартиру с&nbsp;момента заселения я&nbsp;называю oddsquat (даже локация в&nbsp;Foursquare была), так пусть теперь и&nbsp;мой форпост в&nbsp;сети называется так же.
+
+Назвал сайт в&nbsp;честь SSID домашнего Wi-Fi, потому что не&nbsp;смог придумать более достойного названия :)
+
+## Платформа
+
+Для статического сайта не&nbsp;нужен серверный код, поэтому WordPress и&nbsp;прочие CMS в&nbsp;качестве платформы я&nbsp;даже не&nbsp;рассматривал.
+
+Про генераторы статических сайтов раньше слышал, но&nbsp;подробно не&nbsp;рассматривал. Их&nbsp;оказалось так много (тут есть [длинный список](https://jamstack.org/generators/)), что даже страшно.
+
+Посмотрев на&nbsp;самые популярные решения, я&nbsp;понял, что как-то неправильно понимаю значение термина «генератор статических сайтов», потому что все хором предлагают мне сгенерировать Progressive Web Application из&nbsp;React-компонентов с&nbsp;импортом данных из&nbsp;GraphQL-сервера вместо россыпи HTML-документов.
+
+Уверен, что уютный бложик&nbsp;— это точно не&nbsp;Web&nbsp;Application, а&nbsp;от&nbsp;Progressive&nbsp;в&nbsp;данном случае всем будет только хуже: искусственные трудности с&nbsp;роутингом, серверным рендерингом и&nbsp;сохранением позиции скрола успешно решены, когда каждая страница&nbsp;— это отдельный документ. Браузеры восхитительно умеют работать с&nbsp;HTML-документами!
+
+После непродолжительных поисков был найден [Nanogen](https://doug2k1.github.io/nanogen/), который делает именно то, что нужно, и&nbsp;не&nbsp;похож на&nbsp;космический корабль:
+
+- Умеет Markdown и&nbsp;HTML (ejs);
+- Имеет очень гибкую систему шаблонов;
+- Не&nbsp;выходит за&nbsp;рамки стека Node.js.
+
+Да, в&nbsp;репозитории проекта давно не&nbsp;было коммитов, но&nbsp;хочется думать, что это по&nbsp;причине надёжности и&nbsp;закончености :)
+
+## Типографика
+
+Я&nbsp;люблю текст и&nbsp;не&nbsp;умею в&nbsp;дизайн. Oddsquat&nbsp;— проект про буквы, значит, буквы должны быть красивыми и&nbsp;удобными.
+
+К&nbsp;теме типографики в&nbsp;вебе я&nbsp;подходил несколько раз, но&nbsp;безуспешно. Не&nbsp;получается структурировать и&nbsp;сохранить в&nbsp;голове все эти сакральные знания про кернинг и&nbsp;засечки, потому что не&nbsp;вижу никакой связи между теорией и&nbsp;практикой.
+
+Очередное погружение системных знаний опять не&nbsp;принесло, зато принесло удобный инструмент: [Typography.js](https://github.com/KyleAMathews/typography.js).
+
+Этот тулкит позволяет, покрутив ручки [интерактивного демо](http://kyleamathews.github.io/typography.js/), получить новое, но&nbsp;при этом гармоничное сочетание абзацев, заголовков и&nbsp;отступов между ними.
+Идеальный инструмент для тех, кто хочет поиграть со&nbsp;шрифтами, но&nbsp;не&nbsp;до&nbsp;конца понимает, как.
+
+Авторы настолько заботливые, что даже подключают `normalize.css` при генерации своих стилей, снимая с&nbsp;вас ещё одну головную боль. Благодаря им&nbsp;весь мой дополнительный css для стилизации сайта уложился в&nbsp;сто строк кода и&nbsp;хорошо работает в&nbsp;любых браузерах и&nbsp;на&nbsp;любых экранах.
+
+Со&nbsp;шрифтами всё просто:
+- **Open Sans** для текста и&nbsp;**Open Sans Condensed** для заголовков, потому что мне нравится слово «Open»;
+- **Fira Code** для кода, потому что лигатуры (`-->`, `!==`)&nbsp;— это красиво.
+
+## Аналитика
+
+Я&nbsp;долго думал, можно&nbsp;ли собирать аналитику просмотров, или нужно играть в&nbsp;идеальный веб до&nbsp;конца и&nbsp;полностью отказаться от&nbsp;слежки за&nbsp;пользователями. С&nbsp;одной стороны высокая идея, с&nbsp;другой&nbsp;— любопытство.
+
+После непродолжительного исследования пришёл к&nbsp;выводу, что Метрика и&nbsp;Аналитика от&nbsp;поисковых гигантов мне точно не&nbsp;подходят, а&nbsp;вот автор [GoatCounter](https://goatcounter.com/) полностью понимает мою боль.
+
+[Why I&nbsp;made GoatCounter](https://www.goatcounter.com/why/)&nbsp;— отличный пост, где создатель сервиса ответил на&nbsp;все вопросы, которые у&nbsp;меня к&nbsp;нему возникли. Вот, например, замечательный абзац про причины бесплатности начального тарифа:
+
+> I&nbsp;think it’s important to&nbsp;make the barrier of&nbsp;entry for software like this low as&nbsp;feasible to&nbsp;make actual meaningful inroads to&nbsp;“de-Google-fi” the internet a&nbsp;bit, and make pervasive tracking less common. Making it&nbsp;freely available (for personal use) is&nbsp;part of&nbsp;that.
+
+## Содержание
+
+Самое главное. С&nbsp;формой и&nbsp;техническими вопросами всё ясно, но&nbsp;что&nbsp;же я&nbsp;буду складывать внутрь? Пока план такой:
+
+- Я&nbsp;довольно часто изучаю штуки из&nbsp;разных областей и&nbsp;хочу описывать эти опыты. Вот, например, описал создание легковесного сайта.
+- Мне нравится настраивать инструменты и&nbsp;рассказывать об&nbsp;этом.
+- Есть несколько почтовых рассылок, которые я&nbsp;очень хочу начать переводить, чтобы начать читать.
+
+Признаюсь, что был очарован сайтом от&nbsp;ребят из&nbsp;команды [Hundred Rabbits](https://100r.co/site/home.html) и&nbsp;захотел такое&nbsp;же, только своё.
+
+Stay tuned!

src/pages/posts/2020/typographic_linter.md

@@ -0,0 +1,75 @@
+---
+
+layout: post
+
+lang: 'ru'
+date: '2020-11-18'
+
+year: '2020'
+section: 'posts'
+
+title: 'typographic linter'
+description: 'Prettier для текста. Автоматизация рутинной типографики.'
+
+---
+
+# Типографика как code style
+
+## Основы
+
+Для того, чтобы тексты было удобно читать и неудобно писать, человечество придумало разные правила. С орфографией и пунктуацией всё понятно, но про типографические правила говорят редко.
+
+Типографика — набор правил вёрстки текста, призванных повысить эстетику и читаемость. Именно в таком порядке, потому что люди сначала замечают текст и только потом начинают читать.
+
+Про шрифты, отступы и прочие кернинги в этот раз говорить не будем, потому что мне понравилось крутить ползунки в [Typography.js](https://github.com/KyleAMathews/typography.js) и не переживать об эстетике.
+
+Разговор пойдёт про висячие предлоги и прочие тире с кавычками.
+
+## Проблематика
+
+Сайты в интернете делятся на два типа: те, кто запаривается за подготовку текстов, и те, кто забивает. [Meduza.io](https://meduza.io/) расставляет неразрывные пробелы в текстах новостей, а [rbc.ru](https://www.rbc.ru/) — нет. Это не единственное отличие этих новостных порталов, но очень знаковое, как мне кажется.
+
+### Нужно забить!
+
+Я прекрасно понимаю тех, кто не запаривается. Часть не знает, часть забивает ([Вастрик](https://vas3k.ru/), например), а у остальных user-generated content, который довольно рискованно автоматически форматировать. Аргументы для каждой группы:
+
+- И так всё понятно.
+- Условный Markdown со спецсимволами теряет половину обаяния.
+- Правильные автоматические кавычки-ёлочки не&nbsp;сделают из&nbsp;комментария в&nbsp;Facebook литературный памятник, зато случайный японский эмотикон может разрушить цивилизацию: <br>
+`Прости ^_^" Забыл купить  "Доширак"` превращается в&nbsp;<br>
+`Прости ^_^« Мы испортили »Твой текст«`.
+- У&nbsp;студентов должен быть отдельный курс по&nbsp;расшифровке смайликов и&nbsp;компилированию C++ из&nbsp;чатов. Бонусный аргумент.
+
+### Нужно запариться!
+
+Википедия утверждает, что [типографика](https://ru.wikipedia.org/wiki/%D0%A2%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0)&nbsp;— это «свод строгих правил», но&nbsp;список не&nbsp;показывает и&nbsp;ссылок не&nbsp;даёт. Стандартом де-факто в&nbsp;рунете являются правила из&nbsp;[§&nbsp;62&nbsp;«Ководства»](https://www.artlebedev.ru/kovodstvo/sections/62/). С&nbsp;ними или соглашаются, или [громко спорят с&nbsp;некоторыми](https://medium.com/@kapanaga/62-6c664105dd30).
+
+Пусть мне и&nbsp;не&nbsp;нравится полное отсутствие у&nbsp;Лебедева обоснований или ссылок на&nbsp;источники, но&nbsp;самому погружаться в&nbsp;историю вопроса и&nbsp;читать какой-нибудь авторитетный [«Справочник издателя и&nbsp;автора»](https://www.artlebedev.ru/izdal/spravochnik-izdatelya-i-avtora-2017/) страшно: в&nbsp;нём 1010&nbsp;страниц.
+
+Авторы, которые хотят радовать читателей с&nbsp;помощью тире, обычно не&nbsp;пишут в&nbsp;блокноте (мне так кажется) или носят свои тексты из&nbsp;блокнота в&nbsp;[Типограф](https://www.artlebedev.ru/typograf/) от&nbsp;Артемия Лебедева, а&nbsp;потом назад. Про первых я&nbsp;ничего не&nbsp;знаю, а&nbsp;ко&nbsp;вторым сам отношусь, когда нужно причесать один или два текста.
+
+У&nbsp;Типографа и&nbsp;аналогичных веб-сервисов есть фундаментальные проблемы:
+
+- Копировать текст из&nbsp;редактора в&nbsp;браузер, а&nbsp;потом назад&nbsp;— неудобно.
+- Сервис может быть офлайн в&nbsp;неподходящий момент, я&nbsp;тоже.
+- Сервис может читать мои тексты до&nbsp;публикации.
+- Некоторые тексты никому нельзя показывать (по&nbsp;разным причинам).
+
+Признаюсь, что раньше я&nbsp;ни&nbsp;разу не&nbsp;думал об&nbsp;использовании типографа вне браузера, но&nbsp;как только образовалась перспектива заниматься этим на&nbsp;постоянной основе, стало понятно, что копировать текст из&nbsp;редактора в&nbsp;браузер и&nbsp;назад&nbsp;— не&nbsp;самое оптимальное решение и&nbsp;нужно что-то с&nbsp;этим делать.
+
+## Решение
+
+Очевидный вариант&nbsp;— научить текстовый редактор автоматически расставлять неразрывные пробелы, исправлять мелкие опечатки, приводить кавычки к&nbsp;правильному виду, заменять дефисы на&nbsp;тире в&nbsp;нужных местах и&nbsp;многое другое. <br>
+Вот [плагин для VS&nbsp;Code](https://marketplace.visualstudio.com/items?itemName=rusnasonov.vscode-typograf).
+
+Мне больше нравится другой подход. Мы&nbsp;уже давно используем линтеры для языков программирования, давайте использовать их&nbsp;и&nbsp;для контента.
+
+Конечно, я&nbsp;не&nbsp;первый, кто так подумал. Плагин выше построен на&nbsp;основе замечательной библиотеки [typograf](https://github.com/typograf/typograf) и&nbsp;прямо в&nbsp;README.md файле этого проекта можно найти ссылки на&nbsp;плагины для Babel, Gulp и&nbsp;Grunt.
+
+Библиотека очень гибко настраивается, содержит [сотню готовых правил](https://github.com/typograf/typograf/blob/dev/docs/RULES.ru.md) и&nbsp;позволяет легко добавлять кастомные.
+
+В&nbsp;комплекте есть cli-утилита, которая умеет читать файлы, форматировать их&nbsp;и&nbsp;выводить результат в&nbsp;терминал, но&nbsp;почему-то не&nbsp;умеет файл перезаписывать. Поэтому для своих целей я&nbsp;написал небольшой скрипт, который, получив локаль и&nbsp;имя файла, изменяет его содержимое. С&nbsp;правилами тоже пришлось немного поиграть, потому что дефолтные принимают списки за&nbsp;диалоги и&nbsp;ломают markdown-разметку.
+
+Теперь для расстановки всех хитрых значков не&nbsp;нужно ходить в&nbsp;браузер, достаточно просто запустить скрипт, посмотреть с&nbsp;помощью `git diff` на&nbsp;результат и&nbsp;закоммитить нужные изменения.
+
+Красивые тексты лучше некрасивых.