Колофон

из чего собрано это место. вынес отдельно, потому что в /about это начало расползаться.

В цифрах

html-страницоколо 40, написаны руками. шаблонизатора нет. общая шапка живёт у меня в пальцах.
cssодин style.css, ~230 строк, инлайнится в каждую страницу сборочным скриптом. ни tailwind, ни препроцессоров, ни postcss. таргет — браузеры 2022+, и меня это устраивает.
javascriptfeed.js для главной (~150 строк) плюс на остальных страницах — копеечные скрипты для year-stamp и пары «обновлено». никаких зависимостей. никакого сборщика.
страница в gzip~30кб с инлайн-CSS. главная — тяжелее всех из-за данных ленты, всё равно меньше 50кб.
запросов на страницутри: HTML, favicon, и feed-скрипт на главной. больше — только если живая лента подтянула что-то с Lobsters/HN.
сборкасорокастрочный shell-скрипт. копирует файлы, инлайнит style.css в <style> каждой страницы, прогоняет gzip --keep --best. обещаю себе уже год переписать на python.

Шрифты

основнойIBM Plex Sans — если установлен в системе. иначе — системный sans. ничего с CDN. Inter на этом сайте не используется специально — IBM Plex кириллицу рисует точнее.
серифныйIBM Plex Serif, тоже системно, для заголовков, ledes и цитат. italic — для акцентов в h1.
моноширинныйJetBrains Mono, fallback на ui-monospace. для меток, кода, дат, всей служебной мелочи.

никакие шрифты не подгружаются с CDN. если в вашей системе их нет — отрабатывает fallback-цепочка, и страница выглядит так, как у вашей системы получится. так и задумано.

Палитра

тёмная схема, тёплая, медь-на-стали. amber-акцент против глубокого navy, чистого синего нет нигде. mint-голубой (--accent-2) — для редких «холодных» элементов: ссылок «live», pin-меток на radio-страницах. красный (--danger) появляется только на черновиках и /404.

--bg:        #0e1218     /* deep navy           */
--surface:   #181d28     /* cards               */
--text:      #e7e3d8     /* warm off-white      */
--muted:     #9b9888     /* муть                */
--accent:    #d68b3a     /* copper / amber      */
--accent-2:  #6fa8b8     /* steel blue (sparse) */
--danger:    #c9665a     /* drafts, 404         */

Хостинг

  • небольшой VPS где-то в Европе. 2 vCPU, 4 ГБ RAM. больше, чем сайту нужно — у меня там ещё пара мелочей.
  • nginx отдаёт статику. gzip_static on + brotli_static on.
  • HTTPS через Let's Encrypt + acme.sh на крон-задаче.
  • HTTP/2. HTTP/3 пока нет — для статики выигрыша мизер, для приёма CSP-отчётов мне он не нужен.
  • DNS — у регистратора. ничего на cloudflare, ничего за прокси.

Что НЕ подгружается

ни шрифтов с Google, ни аналитики, ни fingerprint-скриптов, ни «cookie banner». ни одного запроса третьим лицам со страницы — кроме одного места: на главной живая лента ходит в Hacker News (Algolia public API, без cookies, без headers) и в локальный /api/live/lobsters, который у меня сам реверс-проксирует Lobsters. это сознательное решение — лента смотрит наружу, всё остальное — нет.

Доступность

  • контраст: --text на --bg ~ 13.6:1. --muted на --bg ~ 6.4:1.
  • навигация — клавиатурой; порядок tab-фокуса совпадает с визуальным.
  • фильтр-чипы на ленте — настоящие <button>.
  • минимальный кегль не ниже ~12px (root 15.5px, метки 0.72rem).
  • prefers-reduced-motion — на TODO. знаю.

Исходники

не публичные. это не секрет — просто скучно. посмотреть можно через view-source. если кому-то хочется свой stale-air — рекомендую посмотреть на danluu.com или на xxiivv; они приличнее и опубликованы.

Лицензия

тексты: CC BY 4.0. фрагменты кода: MIT, если в самом посте не сказано иначе. SVG-логотип — мой, можно унести с указанием.

см. также: /uses (чем я работаю) · /правки (что менялось).