mirror of
https://github.com/He4eT/oddsquat.git
synced 2026-05-04 20:37:22 +00:00
release: 2026-03-29-213722
This commit is contained in:
parent
fab4cdf835
commit
3e70df61c0
75 changed files with 6393 additions and 0 deletions
25
docs/posts/2020/index.html
Normal file
25
docs/posts/2020/index.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta
|
||||
name="description"
|
||||
content="Redirect to '/posts/#2020'.">
|
||||
<meta
|
||||
http-equiv="Refresh"
|
||||
content="0; URL=/posts/#2020">
|
||||
<title>
|
||||
Redirect | oddsquat
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
Redirect to
|
||||
<a
|
||||
style="color: inherit;"
|
||||
href="/posts/#2020">
|
||||
/posts/#2020
|
||||
</a>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
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>
|
||||
109
docs/posts/2020/typographic_linter/index.html
Normal file
109
docs/posts/2020/typographic_linter/index.html
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<!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>
|
||||
typographic linter | oddsquat
|
||||
</title>
|
||||
<meta name="description" content="Prettier для текста. Автоматизация рутинной типографики.">
|
||||
|
||||
<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>typographic linter</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1 id="-code-style">Типографика как code style</h1>
|
||||
<h2 id="-">Основы</h2>
|
||||
<p>Для того, чтобы тексты было удобно читать и неудобно писать, человечество придумало разные правила. С орфографией и пунктуацией всё понятно, но про типографические правила говорят редко.</p>
|
||||
<p>Типографика — набор правил вёрстки текста, призванных повысить эстетику и читаемость. Именно в таком порядке, потому что люди сначала замечают текст и только потом начинают читать.</p>
|
||||
<p>Про шрифты, отступы и прочие кернинги в этот раз говорить не будем, потому что мне понравилось крутить ползунки в <a href="https://github.com/KyleAMathews/typography.js">Typography.js</a> и не переживать об эстетике.</p>
|
||||
<p>Разговор пойдёт про висячие предлоги и прочие тире с кавычками.</p>
|
||||
<h2 id="-">Проблематика</h2>
|
||||
<p>Сайты в интернете делятся на два типа: те, кто запаривается за подготовку текстов, и те, кто забивает. <a href="https://meduza.io/">Meduza.io</a> расставляет неразрывные пробелы в текстах новостей, а <a href="https://www.rbc.ru/">rbc.ru</a> — нет. Это не единственное отличие этих новостных порталов, но очень знаковое, как мне кажется.</p>
|
||||
<h3 id="-">Нужно забить!</h3>
|
||||
<p>Я прекрасно понимаю тех, кто не запаривается. Часть не знает, часть забивает (<a href="https://vas3k.ru/">Вастрик</a>, например), а у остальных user-generated content, который довольно рискованно автоматически форматировать. Аргументы для каждой группы:</p>
|
||||
<ul>
|
||||
<li>И так всё понятно.</li>
|
||||
<li>Условный Markdown со спецсимволами теряет половину обаяния.</li>
|
||||
<li>Правильные автоматические кавычки-ёлочки не сделают из комментария в Facebook литературный памятник, зато случайный японский эмотикон может разрушить цивилизацию: <br>
|
||||
<code>Прости ^_^" Забыл купить "Доширак"</code> превращается в <br>
|
||||
<code>Прости ^_^« Мы испортили »Твой текст«</code>.</li>
|
||||
<li>У студентов должен быть отдельный курс по расшифровке смайликов и компилированию C++ из чатов. Бонусный аргумент.</li>
|
||||
</ul>
|
||||
<h3 id="-">Нужно запариться!</h3>
|
||||
<p>Википедия утверждает, что <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0">типографика</a> — это «свод строгих правил», но список не показывает и ссылок не даёт. Стандартом де-факто в рунете являются правила из <a href="https://www.artlebedev.ru/kovodstvo/sections/62/">§ 62 «Ководства»</a>. С ними или соглашаются, или <a href="https://medium.com/@kapanaga/62-6c664105dd30">громко спорят с некоторыми</a>.</p>
|
||||
<p>Пусть мне и не нравится полное отсутствие у Лебедева обоснований или ссылок на источники, но самому погружаться в историю вопроса и читать какой-нибудь авторитетный <a href="https://www.artlebedev.ru/izdal/spravochnik-izdatelya-i-avtora-2017/">«Справочник издателя и автора»</a> страшно: в нём 1010 страниц.</p>
|
||||
<p>Авторы, которые хотят радовать читателей с помощью тире, обычно не пишут в блокноте (мне так кажется) или носят свои тексты из блокнота в <a href="https://www.artlebedev.ru/typograf/">Типограф</a> от Артемия Лебедева, а потом назад. Про первых я ничего не знаю, а ко вторым сам отношусь, когда нужно причесать один или два текста.</p>
|
||||
<p>У Типографа и аналогичных веб-сервисов есть фундаментальные проблемы:</p>
|
||||
<ul>
|
||||
<li>Копировать текст из редактора в браузер, а потом назад — неудобно.</li>
|
||||
<li>Сервис может быть офлайн в неподходящий момент, я тоже.</li>
|
||||
<li>Сервис может читать мои тексты до публикации.</li>
|
||||
<li>Некоторые тексты никому нельзя показывать (по разным причинам).</li>
|
||||
</ul>
|
||||
<p>Признаюсь, что раньше я ни разу не думал об использовании типографа вне браузера, но как только образовалась перспектива заниматься этим на постоянной основе, стало понятно, что копировать текст из редактора в браузер и назад — не самое оптимальное решение и нужно что-то с этим делать.</p>
|
||||
<h2 id="-">Решение</h2>
|
||||
<p>Очевидный вариант — научить текстовый редактор автоматически расставлять неразрывные пробелы, исправлять мелкие опечатки, приводить кавычки к правильному виду, заменять дефисы на тире в нужных местах и многое другое. <br>
|
||||
Вот <a href="https://marketplace.visualstudio.com/items?itemName=rusnasonov.vscode-typograf">плагин для VS Code</a>.</p>
|
||||
<p>Мне больше нравится другой подход. Мы уже давно используем линтеры для языков программирования, давайте использовать их и для контента.</p>
|
||||
<p>Конечно, я не первый, кто так подумал. Плагин выше построен на основе замечательной библиотеки <a href="https://github.com/typograf/typograf">typograf</a> и прямо в README.md файле этого проекта можно найти ссылки на плагины для Babel, Gulp и Grunt.</p>
|
||||
<p>Библиотека очень гибко настраивается, содержит <a href="https://github.com/typograf/typograf/blob/dev/docs/RULES.ru.md">сотню готовых правил</a> и позволяет легко добавлять кастомные.</p>
|
||||
<p>В комплекте есть cli-утилита, которая умеет читать файлы, форматировать их и выводить результат в терминал, но почему-то не умеет файл перезаписывать. Поэтому для своих целей я написал небольшой скрипт, который, получив локаль и имя файла, изменяет его содержимое. С правилами тоже пришлось немного поиграть, потому что дефолтные принимают списки за диалоги и ломают markdown-разметку.</p>
|
||||
<p>Теперь для расстановки всех хитрых значков не нужно ходить в браузер, достаточно просто запустить скрипт, посмотреть с помощью <code>git diff</code> на результат и закоммитить нужные изменения.</p>
|
||||
<p>Красивые тексты лучше некрасивых.</p>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
2020-11-18
|
||||
</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