---

layout: post

lang: 'ru'
date: '2020-11-08'

year: '2020'
section: 'posts'

title: 'initial post'
description: 'Первый пост в этом фэнзине, рассказывающий о его внутреннем устойстве.'

---

# Initial Post

**Oddsquat**&nbsp;— мой маленький личный фэнзин про эксперименты, код и&nbsp;прочий киберпанк. Обычно такие сайты называются блогами, но&nbsp;в&nbsp;слове «фэнзин» есть приятный отголосок панк-культуры и&nbsp;её&nbsp;неотъемлемой DIY-составляющей.

Основные причины, побудившие меня на&nbsp;создание своего уютного куска интернета:

- Хочется писать буквы, а&nbsp;возвращаться в&nbsp;ЖЖ&nbsp;не&nbsp;хочется.
- Фронтендер без портфолио&nbsp;— подозрительный фронтендер.
- Современный веб&nbsp;— памятник оверинженирингу. Лендинг с&nbsp;двумя абзацами текста, тремя картинками и&nbsp;мегабайтным бандлом из&nbsp;модных библиотек&nbsp;— одновременно безумие и&nbsp;норма в&nbsp;текущих реалиях. Мне больно на&nbsp;это смотреть, поэтому пришлось строить себе персональный оазис.

В&nbsp;первом посте хочется рассказать, какие инструменты были использованы для создания этого сайта, какие решения были приняты и&nbsp;почему.

## Название

Я&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!
