1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<link rel="icon" href="data:,">
<title>Designer, developer, hardware tinkerer, open source advocate, consumer of dark roast coffee, and writer of very long sentences.</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="designer-developer-hardware-tinkerer-open-source-advocate-consumer-of-dark-roast-coffee-and-writer-of-very-long-sentences.">Designer, developer, hardware tinkerer, open source advocate, consumer of dark roast coffee, and writer of very long sentences.</h1>
<p>As a designer/developer hybrid, I help software companies improve their user experience and ship more performant products. I also actively maintain several <a href="/projects">open source projects</a>.</p>
<p>I’m passionate about open source software, usability, performance, privacy, and minimal design. This small piece of the internet stores a growing collection of my personal <a href="/posts/dump">brain dumps</a>.</p>
<h2 id="skills-languages">Skills & Languages</h2>
<p>Core tools are HTML, CSS, Ruby, JavaScript & WordPress. Currently improving my skills with Rails, MongoDB & PHP. I also enjoy tinkering with basic shell scripts and <a href="/public/images/unix.gif">Unix systems</a>.</p>
<h2 id="design-thought-experiments">Design Thought Experiments</h2>
<ul>
<li><a href="/posts/hamburgers">Stop Using Hamburger Menus (Sometimes)</a></li>
<li><a href="https://search.btxx.org">Better Search Results</a></li>
<li><a href="/posts/one-thing">My Coffee Maker Just Makes Coffee</a></li>
<li><a href="https://anon.btxx.org">Blog Anonymously</a></li>
</ul>
<h2 id="articles-tutorials">Articles & Tutorials</h2>
<ul>
<li>2024-06-02 · <a href="Building_rbenv_on_OpenBSD_7.5/">Building rbenv on OpenBSD 7.5</a></li>
<li>2024-05-27 · <a href="Installing_WordPress_on_NearlyFreeSpeech/">Installing WordPress on NearlyFreeSpeech</a></li>
<li>2024-04-11 · <a href="OpenBSD_is_a_Cozy_Operating_System/">OpenBSD is a Cozy Operating System</a></li>
<li>2024-02-23 · <a href="Please_Make_Your_Table_Headings_Sticky/">Please Make Your Table Headings Sticky</a></li>
<li>2024-02-16 · <a href="Website_Backups_with_Apple_iCloud/">Website Backups with Apple iCloud</a></li>
<li>2024-01-29 · <a href="New_Domain_and_Code_Forge/">New Domain and Code Forge</a></li>
<li>2024-01-02 · <a href="My_Text_Editor_Is_Not_Open_Source/">My Text Edtior is Not Open Source</a></li>
<li>2023-12-17 · <a href="Switching_Things_Over_to_ikiwiki/">Switching Things Over to ikiwiki</a></li>
<li>2023-11-02 · <a href="dwm-gnome/">Bringing dwm Shortcuts to GNOME</a></li>
<li>2023-09-26 · <a href="x220/">The X220 ThinkPad is the Best Laptop in the World</a></li>
<li>2023-09-11 · <a href="mongodb-arch/">Installing Older Versions of MongoDB on Arch Linux</a></li>
<li>2023-07-21 · <a href="heif/">Converting HEIF Images with macOS Automator</a></li>
<li>2023-06-24 · <a href="seven-years/">Blogging for 7 Years</a></li>
<li>2023-06-13 · <a href="battery/">Improving Laptop Battery Performance on OpenBSD</a></li>
<li>2023-06-05 · <a href="vscode/">Running VSCode in Chromium on OpenBSD</a></li>
<li>2023-05-19 · <a href="luba/">My Robotic Mower Woes</a></li>
<li>2023-05-11 · <a href="mail/">Working with `git` Patches in Apple Mail</a></li>
<li>2023-05-05 · <a href="hamburgers/">Stop Using Hamburger Menus (Sometimes)</a></li>
<li>2023-05-01 · <a href="slabtop/">Converting My X201 ThinkPad into a Slabtop</a></li>
<li>2023-04-25 · <a href="git-patches/">Applying Email-Based Git Patches in Evolution on Linux</a></li>
<li>2023-04-13 · <a href="sublime/">Launching Sublime Text with dmenu on Alpine Linux</a></li>
<li>2023-04-11 · <a href="html-dark-mode/">HTML Dark Mode</a></li>
<li>2023-04-02 · <a href="x201/">Bypassing the WiFi Hardware Switch on the Lenovo X201</a></li>
<li>2023-03-16 · <a href="rvm/">Installing Ruby with RVM on Alpine Linux</a></li>
<li>2023-03-14 · <a href="webfonts/">Stop Using Custom Web Fonts</a></li>
<li>2023-03-09 · <a href="mango/">Replacing My Eero Mesh Network with Two Mangos</a></li>
<li>2023-03-03 · <a href="monitor/">Why I Stopped Using an External Monitor</a></li>
<li>2023-02-08 · <a href="dv/">Dynamic Viewports with CSS</a></li>
<li>2023-01-09 · <a href="one-thing/">My Coffee Maker Just Makes Coffee</a></li>
<li>2022-12-23 · <a href="suckless/">I Want to Suckless and You Can Too</a></li>
<li>2022-12-08 · <a href="alpine/">Adventures in Creating a Minimal Alpine Linux Installer</a></li>
<li>2022-12-02 · <a href="openring/">Building openring with Jekyll Build</a></li>
<li>2022-11-23 · <a href="$10/">Do You Have an Extra $10?</a></li>
<li>2022-11-22 · <a href="slow/">Embracing Slow Tech</a></li>
<li>2022-11-14 · <a href="srht2/">Migrating from GitHub to sourcehut</a></li>
<li>2022-11-07 · <a href="spec/">Never Do Spec Work for Free</a></li>
<li>2022-11-04 · <a href="adguard/">Setting Up AdGuard Home with Eero</a></li>
<li>2022-10-14 · <a href="af/">Avoiding Featurism</a></li>
<li>2022-10-03 · <a href="gallery/">Simplifying the Craigslist Gallery</a></li>
<li>2022-09-22 · <a href="notice/">RE: Creating a Simple HTML/CSS Notice Box</a></li>
<li>2022-09-20 · <a href="lf/">Installing Custom Fonts on Linux from the Command Line</a></li>
<li>2022-09-19 · <a href="jekyll/">Setup Jekyll from Scratch on a New Linux System</a></li>
<li>2022-09-10 · <a href="dump/">Don't Make a Blog, Make a Brain Dump</a></li>
<li>2022-09-08 · <a href="avoid/">A Warning for New Designers: Avoid Dribbble</a></li>
<li>2022-09-02
· <a href="windows/">Setting Up Jekyll on Windows
</a></li>
<li>2022-08-12 · <a href="loop/">Looping Through Jekyll Collections</a></li>
<li>2022-08-02 · <a href="1kb/">Making a Website Under 1kB</a></li>
<li>2022-07-29 · <a href="berg/">Hosting with Codeberg Pages</a></li>
<li>2022-07-14 · <a href="linux-love/">The Linux Desktop is Hard to Love</a></li>
<li>2022-07-06 · <a href="pblog/">Yet Another Static Site Generator Switch</a></li>
<li>2022-06-29 · <a href="paid-mac-apps/">Happily Paying For macOS Apps</a></li>
<li>2022-06-20 · <a href="rss-click/">Clickable Links Inside XML</a></li>
<li>2022-05-30 · <a href="schools/">Schools Should Be Using Open Source Software</a></li>
<li>2022-05-23 · <a href="rss-hacks/">RSS Hacks With XSLT</a></li>
<li>2022-05-17 · <a href="duckduckno/">Two Weeks with the DuckDuckGo Browser</a></li>
<li>2022-05-13 · <a href="shinobi-website/">This Site is Now a Shinobi Website</a></li>
<li>2022-04-18 · <a href="safari-default-dark-mode/">Dear Apple, Please Fix Safari's Default Dark Mode Link Color</a></li>
<li>2022-03-21 · <a href="my-static-blog-publishing-setup/">My Static Blog Publishing Setup and an Apology to RSS Subscribers</a></li>
<li>2022-03-14 · <a href="eero/">Setting Up a Pi-hole Server with Eero</a></li>
<li>2022-03-12 · <a href="jelly/">Transferring Media from macOS to a Jellyfin Server (Raspberry Pi 4)</a></li>
<li>2022-02-23 · <a href="february-updates/">February 2022 Update</a></li>
<li>2022-02-03 · <a href="poormans-comment-system/">My Cheapskate Commenting System</a></li>
<li>2022-01-28 · <a href="macos-convert-to-html/">Convert Files to HTML with macOS Automator Quick Actions</a></li>
<li>2022-01-06 · <a href="future-os-google/">Chrome OS Could Become the Future Leader of Computing</a></li>
<li>2021-12-17 · <a href="use-text-not-icons/">Icons Should be Complementary - Text is Always Better</a></li>
<li>2021-12-06 · <a href="jekyll-sourcehut/">Hosting a Jekyll Site on Sourcehut</a></li>
<li>2021-12-03 · <a href="netlify-urls/">Using Netlify for Dynamic URL Redirects</a></li>
<li>2021-11-25 · <a href="minor-website-changes/">Using a New Domain and Switching Static Hosts</a></li>
<li>2021-11-09 · <a href="default-html-style-updates/">Modern Improvements for Default Browser Styles</a></li>
<li>2021-11-03 · <a href="css-js-mistake/">A Reality Where CSS and JavaScript Don't Exist</a></li>
<li>2021-10-28 · <a href="pihole-cloudflare/">Setting Up 1.1.1.1 for Families on a Pi-Hole</a></li>
<li>2021-10-15 · <a href="batch-webp-conversion/">Batch Converting Images to webp with macOS Automator</a></li>
<li>2021-09-23 · <a href="safari-extensions-catalina-patcher/">Enabling Safari Extensions with the macOS Catalina Patcher</a></li>
<li>2021-09-08 · <a href="performance-focused-wordpress-theme/">Create a Performance-Focused WordPress Blog</a></li>
<li>2021-08-13 · <a href="pi-400-internal-ssd/">Stuffing an SSD Inside the Raspberry Pi 400</a></li>
<li>2021-07-24 · <a href="sharing-the-things-we-use/">Sharing The Things We Use</a></li>
<li>2021-06-20 · <a href="ps4-download-ui/">PS4 Download UI with Pure CSS</a></li>
<li>2021-06-07 · <a href="css-slope-graphs/">CSS Slope Graphs</a></li>
<li>2021-05-29 · <a href="soma-terminal-css/">SOMA Inspired Terminal Display with CSS</a></li>
<li>2021-05-19 · <a href="personal-website-opinions/">My Changing Opinion on Personal Website Design</a></li>
<li>2021-04-27 · <a href="shiny-css-buttons/">Shiny, Animated CSS Buttons</a></li>
<li>2021-04-22 · <a href="phpetite/">89 Blog Posts in a Single HTML File</a></li>
<li>2021-04-13 · <a href="macos-icon-css/">Create a Mac App Icon with Pure HTML and CSS</a></li>
<li>2021-04-12 · <a href="lazy-dev-dark-mode/">The Lazy Developer's Dark Mode</a></li>
<li>2021-03-25 · <a href="load-image-on-click/">Click to Load Website Images</a></li>
<li>2021-03-11 · <a href="introducing-pageroast/">Introducing PageRoast</a></li>
<li>2021-02-25 · <a href="launching-thriftyname/">ThriftyName: $5 Brand Names</a></li>
<li>2021-02-02 · <a href="self-hosting-fathom/">Self-Hosting Fathom Analytics with DigitalOcean</a></li>
<li>2021-01-19 · <a href="fathom-analytics-netlify/">Setting Up Fathom Analytics with Netlify</a></li>
<li>2021-01-13 · <a href="introducing-notez/">Introducing Notez</a></li>
<li>2021-01-05 · <a href="animated-toggle-tabs/">Animated Radio Tab Toggles</a></li>
<li>2020-12-28 · <a href="disabling-comments-in-wordpress/">Disabling Comments in WordPress</a></li>
<li>2020-12-08 · <a href="flexbox-bar-graphs/">Pure CSS Bar Graphs with Graceful Mobile Fallbacks</a></li>
<li>2020-12-04 · <a href="obvious-js-injection-fallback/">Obvious Javascript 'Injection' Fallback</a></li>
<li>2020-11-09 · <a href="bidirectional-scrolling/">Bidirectional Scrolling: Why Not Both?</a></li>
<li>2020-10-19 · <a href="menu-toggle-css/">Menu Toggle with Pure CSS</a></li>
<li>2020-10-07 · <a href="poor-mans-full-bleed/">Poor Man's CSS Full-Bleed Layout</a></li>
<li>2020-09-29 · <a href="simple-jekyll-navigation/">Simple Navigation Setup in Jekyll 3.9.0</a></li>
<li>2020-09-16 · <a href="cheap-portable-pi/">Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal</a></li>
<li>2020-09-09 · <a href="over-engineering-an-oil-tank/">Over-Engineering an Oil Tank Gauge</a></li>
<li>2020-09-02 · <a href="my-pi-desktop/">My Raspberry Pi Desktop</a></li>
<li>2020-08-16 · <a href="linux-mint-macbook-air/">Linux Mint MacBook Air Setup</a></li>
<li>2020-08-13 · <a href="hello-jekyll/">Goodbye WordPress, Hello Jekyll (Again)</a></li>
<li>2020-07-07 · <a href="improving-githubs-new-design/">Improving Github's New Design</a></li>
<li>2020-06-22 · <a href="keynote-slides-css/">Keynote Slides with Pure CSS</a></li>
<li>2020-06-14 · <a href="audio-hotkeys-on-linux-mint/">Audio Hotkeys on Linux Mint</a></li>
<li>2020-06-04 · <a href="quick-dirty-theme-switcher/">Quick and Dirty Theme Switcher</a></li>
<li>2020-05-13 · <a href="mini-interactive-keyboard-with-pure-css/">Mini Interactive Keyboard with Pure CSS</a></li>
<li>2020-05-06 · <a href="localwp-fedora/">Fixing LocalWP on Fedora 32</a></li>
<li>2020-05-05 · <a href="wp-enqueue-for-beginners/">WP Enqueue for Beginners</a></li>
<li>2020-04-29 · <a href="fake-3d-elements-with-css/">Faking 3D Elements with CSS</a></li>
<li>2020-03-31 · <a href="stripe-menu-css/">Stripe Menu Dropdowns (CSS)</a></li>
<li>2020-03-18 · <a href="base64-all-the-things/">Base64 All The Things! (Sometimes)</a></li>
<li>2020-02-07 · <a href="learning-to-floss/">How to "FLOSS" as a Web Designer</a></li>
<li>2020-01-07 · <a href="chromebook-web-dev/">Web Development on a $200 Chromebook</a></li>
<li>2019-11-29 · <a href="one-css-property/">Billing for One CSS Change</a></li>
<li>2019-11-13 · <a href="default-brower-forms/">Very Basic Form Styling</a></li>
<li>2019-11-01 · <a href="improving-tufte-jekyll/">Improving Tufte CSS for Jekyll</a></li>
<li>2019-10-06 · <a href="sticky-elements/">Stop Using Sticky Navigation on Mobile</a></li>
<li>2019-09-28 · <a href="being-efficient/">Being More Efficient as a Designer and Developer</a></li>
<li>2019-09-09 · <a href="plain-text-emails/">Plain Text Emails, Please</a></li>
<li>2019-07-30 · <a href="dynamic-checkboxes/">Dynamic Checkboxes</a></li>
<li>2019-07-17 · <a href="empty-table-cells/">Styling Empty Table Cells</a></li>
<li>2019-07-05 · <a href="html5-validator-badge/">Using HTML Validator Badges Again</a></li>
<li>2019-06-25 · <a href="they-wont-wait/">They Won't Wait: A Warning for Slow Websites</a></li>
<li>2019-06-20 · <a href="publish-with-jekyll/">Publishing Simple Books With Jekyll</a></li>
<li>2019-06-14 · <a href="hamburger-menu-alternative/">Using Hamburger Menus? Try Sausage Links</a></li>
<li>2019-06-11 · <a href="tables/">Making Tables Responsive With Minimal CSS</a></li>
<li>2019-06-06 · <a href="html-like-1999/">Write HTML Like It's 1999</a></li>
<li>2019-06-04 · <a href="user-select/">Using User-Select</a></li>
<li>2019-05-29 · <a href="news-websites-are-dumpster-fires/">News Websites Are Dumpster Fires</a></li>
<li>2019-05-22 · <a href="text-align-justify/">Text Align: Justify</a></li>
<li>2019-05-15 · <a href="improving-receipt-ux/">Improving Receipt UX</a></li>
<li>2019-05-09 · <a href="cut-your-forms-in-half/">Cut Your Forms in Half</a></li>
<li>2019-05-03 · <a href="first-letter/">First Letter Pseudo Element</a></li>
<li>2019-04-26 · <a href="minimal-css-menu/">Minimal CSS: Dropdown Menu</a></li>
<li>2019-04-23 · <a href="character-unit/">CSS Character Unit</a></li>
<li>2019-04-20 · <a href="browser-history-sucks/">Browser History Sucks</a></li>
<li>2019-04-15 · <a href="still-using-jquery/">Yes, I Still Use jQuery</a></li>
<li>2019-04-13 · <a href="current-color/">CSS Value: `currentColor`</a></li>
<li>2019-04-05 · <a href="ndenting-text-with-css/">CSS: Indenting Text</a></li>
<li>2019-03-26 · <a href="simple-does-not-mean-ugly/">Simple Does Not Mean Ugly</a></li>
<li>2019-03-25 · <a href="skip-to-content/">Skip to Content Button</a></li>
<li>2019-03-13 · <a href="form-ui-improvements/">Prescription Form UI Improvements</a></li>
<li>2019-02-27 · <a href="animated-card-tiles/">Animated Card Tiles</a></li>
<li>2019-02-18 · <a href="easy-toggle-switches/">Easy Toggle Switches</a></li>
<li>2019-02-15 · <a href="super-mario-blocks-css/">Super Mario Blocks in CSS</a></li>
<li>2019-02-05 · <a href="proper-ui-hierarchy/">Proper UI Hierarchy</a></li>
<li>2019-01-28 · <a href="tabbed-content/">Tabbed Content Without JavaScript</a></li>
<li>2019-01-21 · <a href="easy-custom-radio-inputs/">Easy Custom Radio Inputs</a></li>
<li>2019-01-15 · <a href="basic-gulp-build-for-sass/">Basic Gulp Build for Sass</a></li>
<li>2019-01-08 · <a href="better-box-shadows/">Better Box Shadows</a></li>
<li>2019-01-06 · <a href="over-nesting/">Over-Nesting</a></li>
<li>2018-12-19 · <a href="jsincss-parent-selector/">Using Parent Selectors in CSS</a></li>
<li>2018-11-28 · <a href="width-vs-flex-basis/">Width or Flex-Basis?</a></li>
<li>2018-11-22 · <a href="flexbox-grid/">Adaptable Flexbox Grid</a></li>
<li>2018-10-18 · <a href="self-hosted-blogs/">What Happened to Self-Hosted Blogs?</a></li>
<li>2018-09-28 · <a href="multiple-css-background-images/">Using Multiple CSS Background Images</a></li>
<li>2018-09-20 · <a href="pure-css-simple-dropdown-plugin/">Pure CSS Simple Dropdown Plugin</a></li>
<li>2018-09-07 · <a href="simple-accessibility/">Simple Accessibility</a></li>
<li>2018-08-07 · <a href="setting-up-free-ssl/">Setting Up a Free SSL</a></li>
<li>2018-04-16 · <a href="css-video-backgrounds/">CSS Video Backgrounds</a></li>
<li>2018-03-24 · <a href="css-variables/">CSS Variables</a></li>
<li>2018-02-12 · <a href="stay-hungry/">Stay Hungry</a></li>
<li>2018-01-25 · <a href="open-source-typeface-pairings/">Open Source Typeface Pairings</a></li>
<li>2018-01-14 · <a href="et-jekyll-theme/">ET-Jekyll Theme</a></li>
<li>2017-11-20 · <a href="chasing-performance/">Chasing Performance</a></li>
<li>2017-11-01 · <a href="death-of-personality/">The Death of Personality</a></li>
<li>2017-10-10 · <a href="design-review-dropbox/">Unsolicited Design Review - Dropbox</a></li>
<li>2017-09-07 · <a href="goodbye-css-preprocessors/">Goodbye CSS Preprocessors</a></li>
<li>2017-07-10 · <a href="dts/">Designers Need Thicker Skin</a></li>
<li>2016-11-15 · <a href="te/">The Wonders of Text Ellipsis</a></li>
<li>2016-06-28 · <a href="aui/">Aqua UI CSS Buttons</a></li>
</ul>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://barf.btxx.org">barf</a>. <br>
Feeds: <a href="/atom.xml">Atom</a> & <a href="/rss.xml">RSS</a><br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
