Initial Post

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

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

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

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

Название

Я вырос в девяностые, поэтому квикимобиль, бэтпещера и пузиблинчики для меня не пустой звук, а образец системы нейминга. Вот, например, у меня есть oddkb.

Свою квартиру с момента заселения я называю oddsquat (даже локация в Foursquare была), так пусть теперь и мой форпост в сети называется так же.

Назвал сайт в честь SSID домашнего Wi-Fi, потому что не смог придумать более достойного названия :)

Платформа

Для статического сайта не нужен серверный код, поэтому WordPress и прочие CMS в качестве платформы я даже не рассматривал.

Про генераторы статических сайтов раньше слышал, но подробно не изучал. Их оказалось так много (тут есть длинный список), что даже страшно.

Посмотрев на самые популярные решения, я понял, что как-то неправильно понимаю значение термина «генератор статических сайтов», потому что все хором предлагают мне сгенерировать Progressive Web Application из React-компонентов с импортом данных из GraphQL-сервера вместо россыпи HTML-документов.

Уверен, что уютный бложик — это точно не Web Application, а от Progressive в данном случае всем будет только хуже: искусственные трудности с роутингом, серверным рендерингом и сохранением позиции скрола успешно решены, когда каждая страница — это отдельный документ. Браузеры восхитительно умеют работать с HTML-документами!

После непродолжительных поисков был найден Nanogen, который делает именно то, что нужно, и не похож на космический корабль:

• Умеет Markdown и HTML (ejs);
• Имеет очень гибкую систему шаблонов;
• Не выходит за рамки стека Node.js.

Да, в репозитории проекта давно не было коммитов, но хочется думать, что это по причине надёжности и закончености :)

Типографика

Я люблю текст и не умею в дизайн. Oddsquat — проект про буквы, значит, буквы должны быть красивыми и удобными.

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

Очередное погружение системных знаний опять не принесло, зато принесло удобный инструмент: Typography.js.

Этот тулкит позволяет, покрутив ручки интерактивного демо, получить новое, но при этом гармоничное сочетание абзацев, заголовков и отступов между ними. Идеальный инструмент для тех, кто хочет поиграть со шрифтами, но не до конца понимает, как.

Авторы настолько заботливые, что даже подключают normalize.css при генерации своих стилей, снимая с вас ещё одну головную боль. Благодаря им весь мой дополнительный css для стилизации сайта уложился в сто строк кода и хорошо работает в любых браузерах и на любых экранах.

Со шрифтами всё просто:

• Open Sans для текста и Open Sans Condensed для заголовков, потому что мне нравится слово «Open»;
• Fira Code для кода, потому что лигатуры (-->, !==) — это красиво.

Аналитика

Я долго думал, можно ли собирать аналитику просмотров, или нужно играть в идеальный веб до конца и полностью отказаться от слежки за пользователями. С одной стороны высокая идея, с другой — любопытство.

После непродолжительного исследования пришёл к выводу, что Метрика и Аналитика от поисковых гигантов мне точно не подходят, а вот автор GoatCounter полностью понимает мою боль.

Why I made GoatCounter — отличный пост, где создатель сервиса ответил на все вопросы, которые у меня к нему возникли. Вот, например, замечательный абзац про причины бесплатности начального тарифа:

I think it’s important to make the barrier of entry for software like this low as feasible to make actual meaningful inroads to “de-Google-fi” the internet a bit, and make pervasive tracking less common. Making it freely available (for personal use) is part of that.

Содержание

Самое главное. С формой и техническими вопросами всё ясно, но что же я буду складывать внутрь? Пока план такой:

• Я довольно часто изучаю штуки из разных областей и хочу описывать эти опыты. Вот, например, описал создание легковесного сайта.
• Мне нравится настраивать инструменты и рассказывать об этом.
• Есть несколько почтовых рассылок, которые я очень хочу начать переводить, чтобы начать читать.

Признаюсь, что был очарован сайтом от ребят из команды Hundred Rabbits и захотел такое же, только своё.

Stay tuned!