mirror of
https://github.com/He4eT/oddsquat.git
synced 2026-05-04 20:37:22 +00:00
initial post: typografed
This commit is contained in:
parent
11211d436a
commit
9bb02420d8
1 changed files with 35 additions and 35 deletions
|
|
@ -15,77 +15,77 @@ description: 'Первый пост в этом фэнзине, рассказы
|
|||
|
||||
# Initial post
|
||||
|
||||
**Oddsquat** — мой маленький личный фэнзин про эксперименты, код и прочий киберпанк. Обычно такие сайты называются блогами, но в слове «фэнзин» есть приятный отголосок панк-культуры и её неотъемлемой DIY-составляющей.
|
||||
**Oddsquat** — мой маленький личный фэнзин про эксперименты, код и прочий киберпанк. Обычно такие сайты называются блогами, но в слове «фэнзин» есть приятный отголосок панк-культуры и её неотъемлемой DIY-составляющей.
|
||||
|
||||
Основные причины, побудившие меня на создание своего уютного куска интернета:
|
||||
Основные причины, побудившие меня на создание своего уютного куска интернета:
|
||||
|
||||
- Хочется писать буквы, а возвращаться в ЖЖ не хочется.
|
||||
- Фронтендер без портфолио — подозрительный фронтендер.
|
||||
- Современный веб — памятник оверинженирингу. Лендинг с двумя абзацами текста, тремя картинками и мегабайтным бандлом из модных библиотек — одновременно безумие и норма в текущих реалиях. Мне больно на это смотреть, поэтому пришлось строить себе персональный оазис.
|
||||
- Хочется писать буквы, а возвращаться в ЖЖ не хочется.
|
||||
- Фронтендер без портфолио — подозрительный фронтендер.
|
||||
- Современный веб — памятник оверинженирингу. Лендинг с двумя абзацами текста, тремя картинками и мегабайтным бандлом из модных библиотек — одновременно безумие и норма в текущих реалиях. Мне больно на это смотреть, поэтому пришлось строить себе персональный оазис.
|
||||
|
||||
В первом посте хочется рассказать, какие инструменты были использованы для создания этого сайта, какие решения были приняты и почему.
|
||||
В первом посте хочется рассказать, какие инструменты были использованы для создания этого сайта, какие решения были приняты и почему.
|
||||
|
||||
## Название
|
||||
|
||||
Я вырос в девяностые, поэтому квикимобиль, бэтпещера и пузиблинчики для меня не пустой звук, а образец системы нейминга. Вот, например, у меня есть oddkb.
|
||||
Я вырос в девяностые, поэтому квикимобиль, бэтпещера и пузиблинчики для меня не пустой звук, а образец системы нейминга. Вот, например, у меня есть oddkb.
|
||||
|
||||
Свою квартиру с момента заселения я называю oddsquat (даже локация в Foursquare была), так пусть теперь и мой форпост в сети называется так же.
|
||||
Свою квартиру с момента заселения я называю oddsquat (даже локация в Foursquare была), так пусть теперь и мой форпост в сети называется так же.
|
||||
|
||||
Назвал сайт в честь SSID домашнего Wi-Fi, потому что не смог придумать более достойного названия :)
|
||||
Назвал сайт в честь SSID домашнего Wi-Fi, потому что не смог придумать более достойного названия :)
|
||||
|
||||
## Платформа
|
||||
|
||||
Для статического сайта не нужен серверный код, поэтому WordPress и прочие CMS в качестве платформы я даже не рассматривал.
|
||||
Для статического сайта не нужен серверный код, поэтому WordPress и прочие CMS в качестве платформы я даже не рассматривал.
|
||||
|
||||
Про генераторы статических сайтов раньше слышал, но подробно не рассматривал. Их оказалось так много (тут есть [длинный список](https://jamstack.org/generators/)), что даже страшно.
|
||||
Про генераторы статических сайтов раньше слышал, но подробно не рассматривал. Их оказалось так много (тут есть [длинный список](https://jamstack.org/generators/)), что даже страшно.
|
||||
|
||||
Посмотрев на самые популярные решения, я понял, что как-то неправильно понимаю значение термина "генератор статических сайтов", потому что все хором предлагают мне сгенерировать PWA (Progressive Web Application) из React-компонентов с импортом данных из GraphQL-сервера вместо россыпи HTML-документов.
|
||||
Посмотрев на самые популярные решения, я понял, что как-то неправильно понимаю значение термина «генератор статических сайтов», потому что все хором предлагают мне сгенерировать PWA (Progressive Web Application) из React-компонентов с импортом данных из GraphQL-сервера вместо россыпи HTML-документов.
|
||||
|
||||
Уверен, что уютный бложик — это точно не Application, а от PW в данном случае всем только хуже будет: все эти искусственные трудности с роутингом, серверным рендерингом и сохранением позиции скрола успешно решены, когда каждая страница — это отдельный документ. Браузеры восхитительно умеют работать с HTML-документами!
|
||||
Уверен, что уютный бложик — это точно не Application, а от PW в данном случае всем только хуже будет: все эти искусственные трудности с роутингом, серверным рендерингом и сохранением позиции скрола успешно решены, когда каждая страница — это отдельный документ. Браузеры восхитительно умеют работать с HTML-документами!
|
||||
|
||||
После непродолжительных поисков был найден [Nanogen](https://doug2k1.github.io/nanogen/), который делает именно то, что нужно, и не похож на космический корабль:
|
||||
После непродолжительных поисков был найден [Nanogen](https://doug2k1.github.io/nanogen/), который делает именно то, что нужно, и не похож на космический корабль:
|
||||
|
||||
- Умеет Markdown и HTML (ejs);
|
||||
- Умеет Markdown и HTML (ejs);
|
||||
- Имеет очень гибкую систему шаблонов;
|
||||
- Не выходит за рамки стека Node.js.
|
||||
- Не выходит за рамки стека Node.js.
|
||||
|
||||
Да, в репозитории проекта давно не было коммитов, но хочется думать, что это по причине надёжности и закончености :)
|
||||
Да, в репозитории проекта давно не было коммитов, но хочется думать, что это по причине надёжности и закончености :)
|
||||
|
||||
## Типографика
|
||||
|
||||
Я люблю текст и не умею в дизайн. Oddsquat — проект про буквы, а, значит, буквы должны быть красивыми и удобными.
|
||||
Я люблю текст и не умею в дизайн. Oddsquat — проект про буквы, значит, буквы должны быть красивыми и удобными.
|
||||
|
||||
К теме типографики в вебе я подходил несколько раз, но безуспешно. Не получается структурировать и сохранить в голове все эти сакральные знания про кернинг и засечки, потому что не вижу никакой связи между теорией и практикой.
|
||||
К теме типографики в вебе я подходил несколько раз, но безуспешно. Не получается структурировать и сохранить в голове все эти сакральные знания про кернинг и засечки, потому что не вижу никакой связи между теорией и практикой.
|
||||
|
||||
Очередное погружение системных знаний опять не принесло, зато принесло удобный инструмент: [Typography.js](https://github.com/KyleAMathews/typography.js).
|
||||
Очередное погружение системных знаний опять не принесло, зато принесло удобный инструмент: [Typography.js](https://github.com/KyleAMathews/typography.js).
|
||||
|
||||
Этот тулкит позволяет, покрутив ручки [интерактивного демо](http://kyleamathews.github.io/typography.js/), получить новое, но при этом гармоничное сочетание абзацев, заголовков и отступов между ними.
|
||||
Идеальный инструмент для тех, кто хочет поиграть со шрифтами, но не до конца понимает, как.
|
||||
Этот тулкит позволяет, покрутив ручки [интерактивного демо](http://kyleamathews.github.io/typography.js/), получить новое, но при этом гармоничное сочетание абзацев, заголовков и отступов между ними.
|
||||
Идеальный инструмент для тех, кто хочет поиграть со шрифтами, но не до конца понимает, как.
|
||||
|
||||
Авторы настолько заботливые, что даже подключают `normalize.css` при генерации своих стилей, снимая с вас ещё одну головную боль. Благодаря им весь мой дополнительный css для стилизации сайта уложился в сто строк кода и хорошо работает в любых браузерах и на любых экранах.
|
||||
Авторы настолько заботливые, что даже подключают `normalize.css` при генерации своих стилей, снимая с вас ещё одну головную боль. Благодаря им весь мой дополнительный css для стилизации сайта уложился в сто строк кода и хорошо работает в любых браузерах и на любых экранах.
|
||||
|
||||
Со шрифтами всё просто:
|
||||
- **Open Sans** для текста и **Open Sans Condensed** для заголовков, потому что мне нравится слово «Open»;
|
||||
- **Fira Code** для кода, потому что лигатуры (`-->`, `!==`) — это красиво.
|
||||
Со шрифтами всё просто:
|
||||
- **Open Sans** для текста и **Open Sans Condensed** для заголовков, потому что мне нравится слово «Open»;
|
||||
- **Fira Code** для кода, потому что лигатуры (`-->`, `!==`) — это красиво.
|
||||
|
||||
## Аналитика
|
||||
|
||||
Я долго думал, можно ли собирать аналитику просмотров, или нужно играть в идеальный веб до конца и полностью отказаться от слежки за пользователями. С одной стороны высокая идея, с другой — любопытство.
|
||||
Я долго думал, можно ли собирать аналитику просмотров, или нужно играть в идеальный веб до конца и полностью отказаться от слежки за пользователями. С одной стороны высокая идея, с другой — любопытство.
|
||||
|
||||
После непродолжительного исследования пришёл к выводу, что Метрика и Аналитика от поисковых гигантов мне точно не подходят, а вот автор [GoatCounter](https://goatcounter.com/) полностью понимает мою боль.
|
||||
После непродолжительного исследования пришёл к выводу, что Метрика и Аналитика от поисковых гигантов мне точно не подходят, а вот автор [GoatCounter](https://goatcounter.com/) полностью понимает мою боль.
|
||||
|
||||
[Why I made GoatCounter](https://www.goatcounter.com/why/) — отличный пост, где создатель сервиса ответил на все вопросы, которые у меня к нему возникли. Вот, например, замечательный абзац про причины бесплатности начального тарифа:
|
||||
[Why I made GoatCounter](https://www.goatcounter.com/why/) — отличный пост, где создатель сервиса ответил на все вопросы, которые у меня к нему возникли. Вот, например, замечательный абзац про причины бесплатности начального тарифа:
|
||||
|
||||
> 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.
|
||||
> 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](https://100r.co/site/home.html) и захотел такое же, только своё.
|
||||
Признаюсь, что был очарован сайтом от ребят из команды [Hundred Rabbits](https://100r.co/site/home.html) и захотел такое же, только своё.
|
||||
|
||||
Stay tuned!
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue