vimwiki

beau's personal wiki, made using vim
Log | Files | Refs | README

commit a8a946df86bc3446c73e35ab73f148d3ec8aab39
parent 2014ce10c6c0dc4fe97da79cf10f6def82289e27
Author: C. Beau Hilton <cbeauhilton@gmail.com>
Date:   Fri, 26 Jun 2020 10:04:41 -0500

testing memex 0

Diffstat:
Mindex.md | 5+++++
Msite/css_custom_fonts.md | 29++++++++++++++++++++++++++---
2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/index.md b/index.md @@ -1,3 +1,8 @@ +# memex + +Vannevar Bush coined the term "memex" for a system of extending or indexing one's memory. It's a cool idea. This is my memex. + + # todo - [ ] [https://jnd.org/emotion_design_attractive_things_work_better/ ] diff --git a/site/css_custom_fonts.md b/site/css_custom_fonts.md @@ -12,11 +12,34 @@ TL;DR: In making my website more minimal, but still my own, font choice seemed a good place to start. I love IBM Plex, and use it everywhere. I wanted to use it on my website, but was a little confused as to how to make it happen without needing a dynamic link to some other website to source the font (e.g. IBM Plex has been added to Google Fonts, so an easy way to get it on my website is to link to their resource). The problem with this is that it needs to query their website every time a new visitor comes to mine, and that is less efficient and makes me dependent on Google. (Btw, the most suckless thing to do would be to just use the user's system monospaced font with `font-family:monospace` -- that's exactly what suckless.org does -- but this is a *personal* blog, dammit, and I'm going to strike a balance between minimalism and personality -- call it essentialism, maybe) -I've been using Derek Sivers' website design as inspiration in a few areas (https://sivers.org/style.css), and noticed that his stylesheet has a bunch of gobbledygook at the beginning that looked like a base64-encoded file, dumped right in his plaintext CSS. That is exactly what it is, a font called "valkyrie_c4," that is loaded every time his style.css is loaded. Inspired by that, but wanting to make my style.css a little more readable, I poked around and found `google-webfonts-helper`, a very cool herokuapp that lets you extract Google Fonts into various formats, including the woff/woff2 format Derek is using. (https://google-webfonts-helper.herokuapp.com/fonts/ibm-plex-serif) It also gives you a code snippet to include in your css, which does the same thing Derek's base64 encoding does but puts the font source code in a different file, making the css file more readable. It also gives the advantage that after the font is loaded the first time on a user's browser, it can be cached, making subsequent loads of your already smoking fast static site even faster (I currently have a Google PageSpeed of 99/100, with the point docked for a few things including not yet having a font-display css feature, and not having a caching policy, which I hope to correct soon - https://ifconfig.se/simple-web-stack.html). +I've been using Derek Sivers' website design as inspiration in a few areas (https://sivers.org/style.css), +and noticed that his stylesheet has a bunch of gobbledygook at the beginning that looked like a base64-encoded file, +dumped right in his plaintext CSS. +That is exactly what it is, +a font called "valkyrie_c4," +that is loaded every time his style.css is loaded. +Inspired by that, but wanting to make my style.css a little more readable, +I poked around and found `google-webfonts-helper`, +a very cool herokuapp that lets you extract Google Fonts into various formats, +including the woff/woff2 format Derek is using. +(https://google-webfonts-helper.herokuapp.com/fonts/ibm-plex-serif) +It also gives you a code snippet to include in your css, +which does the same thing Derek's base64 encoding does but puts the font source code in a different file, +making the css file more readable. +It also gives the advantage that after the font is loaded the first time on a user's browser, it can be cached, +making subsequent loads of your already smoking fast static site even faster +(I currently have a Google PageSpeed of 99/100, +with the point docked for a few things including not yet having a font-display css feature, +and not having a caching policy, +which I used to think was a good idea but might just add complexity I don't really need since my load times are fast without it +- https://ifconfig.se/simple-web-stack.html). -Google PageSpeed gives a few tips, and I got mine to 100/100 by just adding `font-display: swap; to the `@font-face` sections of my style.css. This lets the browser use an existing font while the other font is loaded. https://web.dev/font-display/ +Google PageSpeed gives a few tips, +and I got mine to 100/100 by just adding `font-display: swap; to the `@font-face` sections of my style.css. +This lets the browser use an existing font while the other font is loaded. https://web.dev/font-display/ -Adding caching takes a little more work on OpenBSD with httpd, because httpd doesn't do caching. I love that OpenBSD fights feature creep! Instead, use relayd. I haven't done this yet, but may in the future. +Adding caching takes a little more work on OpenBSD with httpd, because httpd doesn't do caching. +I love that OpenBSD fights feature creep! Instead, use relayd. Some resources: - https://github.com/reyk/httpd/wiki/Using-relayd-to-add-Cache-Control-headers-to-httpd-traffic