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
|
# 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»;
|
- **Open Sans** для текста и **Open Sans Condensed** для заголовков, потому что мне нравится слово «Open»;
|
||||||
- **Fira Code** для кода, потому что лигатуры (`-->`, `!==`) — это красиво.
|
- **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!
|
Stay tuned!
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue