mirror of
https://github.com/He4eT/oddsquat.git
synced 2026-05-04 20:37:22 +00:00
release: 2026-04-22-020858
This commit is contained in:
parent
4d74847879
commit
ea6dd3ed9a
80 changed files with 6955 additions and 0 deletions
123
docs/posts/2020/initial_post/index.html
Normal file
123
docs/posts/2020/initial_post/index.html
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/favicon.ico" sizes="32x32">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
|
||||
|
||||
<title>
|
||||
initial post | oddsquat
|
||||
</title>
|
||||
<meta name="description" content="Первый пост в этом фэнзине, рассказывающий о его внутреннем устойстве.">
|
||||
|
||||
<link rel="preload" href="/fonts/open_sans_condensed-32.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans_condensed-27.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-25.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-24.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-17.woff2" as="font" type="font/woff2" crossorigin>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/css/fonts.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/typography.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/main.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="stripesContainer">
|
||||
<div class="stripes">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">oddsquat</a></li>
|
||||
|
||||
|
||||
<li><a href="/posts/">
|
||||
posts</a></li>
|
||||
|
||||
|
||||
<li><a href="/posts/#2020">
|
||||
2020</a></li>
|
||||
|
||||
|
||||
<li>initial post</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1 id="initial-post">Initial Post</h1>
|
||||
<p><strong>Oddsquat</strong> — мой маленький личный фэнзин про эксперименты, код и прочий киберпанк. Обычно такие сайты называются блогами, но в слове «фэнзин» есть приятный отголосок панк-культуры и её неотъемлемой DIY-составляющей.</p>
|
||||
<p>Основные причины, побудившие меня на создание своего уютного куска интернета:</p>
|
||||
<ul>
|
||||
<li>Хочется писать буквы, а возвращаться в ЖЖ не хочется.</li>
|
||||
<li>Фронтендер без портфолио — подозрительный фронтендер.</li>
|
||||
<li>Современный веб — памятник оверинженирингу. Лендинг с двумя абзацами текста, тремя картинками и мегабайтным бандлом из модных библиотек — одновременно безумие и норма в текущих реалиях. Мне больно на это смотреть, поэтому пришлось строить себе персональный оазис.</li>
|
||||
</ul>
|
||||
<p>В первом посте хочется рассказать, какие инструменты были использованы для создания этого сайта, какие решения были приняты и почему.</p>
|
||||
<h2 id="-">Название</h2>
|
||||
<p>Я вырос в девяностые, поэтому квикимобиль, бэтпещера и пузиблинчики для меня не пустой звук, а образец системы нейминга. Вот, например, у меня есть <a href="https://github.com/He4eT/oddkb" target="_blank">oddkb</a>.</p>
|
||||
<p>Свою квартиру с момента заселения я называю oddsquat (даже локация в Foursquare была), так пусть теперь и мой форпост в сети называется так же.</p>
|
||||
<p>Назвал сайт в честь SSID домашнего Wi-Fi, потому что не смог придумать более достойного названия :)</p>
|
||||
<h2 id="-">Платформа</h2>
|
||||
<p>Для статического сайта не нужен серверный код, поэтому WordPress и прочие CMS в качестве платформы я даже не рассматривал.</p>
|
||||
<p>Про генераторы статических сайтов раньше слышал, но подробно не изучал. Их оказалось так много (тут есть <a href="https://jamstack.org/generators/">длинный список</a>), что даже страшно.</p>
|
||||
<p>Посмотрев на самые популярные решения, я понял, что как-то неправильно понимаю значение термина «генератор статических сайтов», потому что все хором предлагают мне сгенерировать Progressive Web Application из React-компонентов с импортом данных из GraphQL-сервера вместо россыпи HTML-документов.</p>
|
||||
<p>Уверен, что уютный бложик — это точно не Web Application, а от Progressive в данном случае всем будет только хуже: искусственные трудности с роутингом, серверным рендерингом и сохранением позиции скрола успешно решены, когда каждая страница — это отдельный документ. Браузеры восхитительно умеют работать с HTML-документами!</p>
|
||||
<p>После непродолжительных поисков был найден <a href="https://doug2k1.github.io/nanogen/">Nanogen</a>, который делает именно то, что нужно, и не похож на космический корабль:</p>
|
||||
<ul>
|
||||
<li>Умеет Markdown и HTML (ejs);</li>
|
||||
<li>Имеет очень гибкую систему шаблонов;</li>
|
||||
<li>Не выходит за рамки стека Node.js.</li>
|
||||
</ul>
|
||||
<p>Да, в репозитории проекта давно не было коммитов, но хочется думать, что это по причине надёжности и закончености :)</p>
|
||||
<h2 id="-">Типографика</h2>
|
||||
<p>Я люблю текст и не умею в дизайн. Oddsquat — проект про буквы, значит, буквы должны быть красивыми и удобными.</p>
|
||||
<p>К теме типографики в вебе я подходил несколько раз, но безуспешно. Не получается структурировать и сохранить в голове все эти сакральные знания про кернинг и засечки, потому что не вижу никакой связи между теорией и практикой.</p>
|
||||
<p>Очередное погружение системных знаний опять не принесло, зато принесло удобный инструмент: <a href="https://github.com/KyleAMathews/typography.js">Typography.js</a>.</p>
|
||||
<p>Этот тулкит позволяет, покрутив ручки <a href="http://kyleamathews.github.io/typography.js/">интерактивного демо</a>, получить новое, но при этом гармоничное сочетание абзацев, заголовков и отступов между ними.
|
||||
Идеальный инструмент для тех, кто хочет поиграть со шрифтами, но не до конца понимает, как.</p>
|
||||
<p>Авторы настолько заботливые, что даже подключают <code>normalize.css</code> при генерации своих стилей, снимая с вас ещё одну головную боль. Благодаря им весь мой дополнительный css для стилизации сайта уложился в сто строк кода и хорошо работает в любых браузерах и на любых экранах.</p>
|
||||
<p>Со шрифтами всё просто:</p>
|
||||
<ul>
|
||||
<li><strong>Open Sans</strong> для текста и <strong>Open Sans Condensed</strong> для заголовков, потому что мне нравится слово «Open»;</li>
|
||||
<li><strong>Fira Code</strong> для кода, потому что лигатуры (<code>--></code>, <code>!==</code>) — это красиво.</li>
|
||||
</ul>
|
||||
<h2 id="-">Аналитика</h2>
|
||||
<p>Я долго думал, можно ли собирать аналитику просмотров, или нужно играть в идеальный веб до конца и полностью отказаться от слежки за пользователями. С одной стороны высокая идея, с другой — любопытство.</p>
|
||||
<p>После непродолжительного исследования пришёл к выводу, что Метрика и Аналитика от поисковых гигантов мне точно не подходят, а вот автор <a href="https://goatcounter.com/">GoatCounter</a> полностью понимает мою боль.</p>
|
||||
<p><a href="https://www.goatcounter.com/why/">Why I made GoatCounter</a> — отличный пост, где создатель сервиса ответил на все вопросы, которые у меня к нему возникли. Вот, например, замечательный абзац про причины бесплатности начального тарифа:</p>
|
||||
<blockquote>
|
||||
<p>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.</p>
|
||||
</blockquote>
|
||||
<h2 id="-">Содержание</h2>
|
||||
<p>Самое главное. С формой и техническими вопросами всё ясно, но что же я буду складывать внутрь? Пока план такой:</p>
|
||||
<ul>
|
||||
<li>Я довольно часто изучаю штуки из разных областей и хочу описывать эти опыты. Вот, например, описал создание легковесного сайта.</li>
|
||||
<li>Мне нравится настраивать инструменты и рассказывать об этом.</li>
|
||||
<li>Есть несколько почтовых рассылок, которые я очень хочу начать переводить, чтобы начать читать.</li>
|
||||
</ul>
|
||||
<p>Признаюсь, что был очарован сайтом от ребят из команды <a href="https://100r.co/site/home.html">Hundred Rabbits</a> и захотел такое же, только своё.</p>
|
||||
<p>Stay tuned!</p>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
2020-11-08
|
||||
</footer>
|
||||
|
||||
<script async
|
||||
data-goatcounter="https://he4et.goatcounter.com/count"
|
||||
src="https://gc.zgo.at/count.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue