diff options
| author | Bradley Taunt <bt@btxx.org> | 2025-09-11 13:39:00 -0400 |
|---|---|---|
| committer | Bradley Taunt <bt@btxx.org> | 2025-09-11 13:39:00 -0400 |
| commit | 8ae182a4c287b45138836370b258cfcba19c0810 (patch) | |
| tree | 011efe97b5ce3a7ef120c92d2595783416b13174 | |
| parent | c749e3270a2f899dbc0a4f4b00881f8b55725ae5 (diff) | |
Ongoing changes, style updates, draft, rework some pages
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | _config.yml | 2 | ||||
| -rw-r--r-- | footer.html | 8 | ||||
| -rw-r--r-- | header.html | 18 | ||||
| -rw-r--r-- | index.md | 16 | ||||
| -rw-r--r-- | pages/contribute.md | 10 | ||||
| -rw-r--r-- | pages/projects.md | 5 | ||||
| -rw-r--r-- | pages/resume.md | 2 | ||||
| -rw-r--r-- | pages/uses.md | 8 | ||||
| -rw-r--r-- | posts/planning-ahead.md | 100 | ||||
| -rw-r--r-- | public/style.css | 275 | ||||
| -rw-r--r-- | wruby.rb | 2 |
12 files changed, 261 insertions, 186 deletions
@@ -1,2 +1,3 @@ build/ .ruby-version +.DS_Store diff --git a/_config.yml b/_config.yml index d7a9584..738c631 100644 --- a/_config.yml +++ b/_config.yml @@ -18,4 +18,4 @@ files: rss: 'build/index.rss' misc: - post_count: 50 + post_count: 0 diff --git a/footer.html b/footer.html index 1de5f59..1be5cb7 100644 --- a/footer.html +++ b/footer.html @@ -2,11 +2,12 @@ <footer role="contentinfo"> <p>Found this blog useful?<br> Consider <a href="/contribute">contributing to hosting costs!</a>.</p> - <nav id="menu"> + <div class="footer-nav"> + <h3 id="footer-nav">Navigation</h3> <ul> - <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="/recipes/">Recipes</a></li><li><a href="/index.rss">RSS</a></li> + <li><a href="/">Home</a></li><li><a href="/about">About</a></li><li><a href="/posts">Posts</a></li><li><a href="/projects">Projects</a></li><li><a href="/contribute">Contribute</a></li><li><a href="/uses">Uses</a></li><li><a href="/recipes">Recipes</a></li><li><a href="/wiki">Wiki</a></li> </ul> - </nav> + </div> <small> <a href="#top">↑ Top of page</a><br> Powered by <a href="https://freebsd.org">FreeBSD</a> and <a href="https://wruby.btxx.org">wruby</a><br> @@ -17,3 +18,4 @@ No ads. No tracking. No cookies. Ever. </small> </footer> +</body> diff --git a/header.html b/header.html index 85abba1..71715d3 100644 --- a/header.html +++ b/header.html @@ -10,12 +10,12 @@ <link rel="stylesheet" href="/public/style.css?v=1.6"> </head> -<header id="top"> - <nav> - <ul> - <li><a href="/">Home</a></li><li><a href="/about/">About</a></li><li><a href="/posts/">Posts</a></li><li><a href="/projects/">Projects</a></li><li><a href="#menu">More ↓</a></li> - </ul> - </nav> -</header> - -<main> +<body id="top"> + <header> + <nav> + <ul> + <li><a href="/">home</a></li><li><a href="/about">about</a></li><li><a href="/posts">posts</a></li><li><a href="/projects">projects</a></li><li><a href="/contribute">contribute</a></li><li><a href="/uses">uses</a></li><li><a href="/recipes">recipes</a></li><li><a href="/wiki">wiki</a></li><li class="more"><a href="#footer-nav">more</a></li> + </ul> + </nav> + </header> + <main> @@ -1,3 +1,17 @@ # Bradley Taunt -*...talks about software, design, life, and [OpenBSD](/about/#popular-openbsd-articles).* +*Developer and designer who talks about software, design, life, and [OpenBSD](https://puffy.software).* + +- [About](/about) +- [Colophon](/colophon) +- [Contribute](/contribute) +- [Posts](/posts) +- [Projects](/projects) +- [Recipes](/recipes) +- [Resume](/resume) +- [Uses](/uses) +- [Wiki](/wiki) + +E-mail: [bt@btxx.org](mailto:bt@btxx.org) + + diff --git a/pages/contribute.md b/pages/contribute.md index b87f301..6a182ae 100644 --- a/pages/contribute.md +++ b/pages/contribute.md @@ -2,9 +2,9 @@ Enjoy my ramblings on this site? Found a particular article helpful? Maybe consider contributing towards hosting costs. -If you feel the burning desire to support this small blog of mine or any number of my [projects](/projects), you're more than welcome to help fund my **NearlyFreeSpeech.NET account**: +If you feel the burning desire to support this small blog of mine or any number of my [projects](/projects.html), you're more than welcome to help fund my **NearlyFreeSpeech.NET account**: -[Add funds to my NearlyFreeSpeech.NET account](https://www.nearlyfreespeech.net/contribute/btxx.org) +[Add funds to my NearlyFreeSpeech.NET account](https://www.nearlyfreespeech.net/contribute/btxx.org) By funding the hosting provider directly, you help cover the costs of running and maintaining this website, including but not limited to: @@ -12,6 +12,10 @@ By funding the hosting provider directly, you help cover the costs of running an - domain renewals - ongoing maintenance +Full transparency: the average annual billing for all of the above is **~$90 USD**. + The account contribution page linked above will provide even more details, should you have any questions. In a nutshell: no part of your contribution is sent directly to me. Instead, it is applied *directly* to my NearlyFreeSpeech hosting account. -You can still enjoy everything on this blog for free, so please don't feel obligated to give. Thank you.
\ No newline at end of file +You can still enjoy everything on this blog for free, so please don't feel obligated to give. + +Thank you.
\ No newline at end of file diff --git a/pages/projects.md b/pages/projects.md index 711da4e..902d137 100644 --- a/pages/projects.md +++ b/pages/projects.md @@ -7,8 +7,10 @@ All git repos are hosted on: [Codeberg](https://codeberg.org/btxx/) ## Active Projects * [httpd.rocks](https://httpd.rocks): Setup an HTTPS-enabled web server with `httpd` on OpenBSD +* [openbased.xyz](https://openbased.xyz): Setup OpenBSD as a daily driver using only the base programs * [caddy.ninja](https://caddy.ninja): Setup an HTTPS-enabled web server with `caddy` on Alpine Linux -* [OpenBASED](https://openbased.btxx.org): Setup OpenBSD as a daily driver using only the base programs +* [minwm](https://codeberg.org/btxx/minwm): An extremely minimal window manager +* [stato](https://codeberg.org/btxx/stato): Display OpenBSD server information * [jsfree](https://jsfree.org): Collection of web services that work without JavaScript * [Vanilla CSS](https://vanillacss.com): A minimal baseline stylesheet for any web project @@ -16,6 +18,7 @@ All git repos are hosted on: [Codeberg](https://codeberg.org/btxx/) I have a serious problem creating custom site generators... +* [mdhtml](https://codeberg.org/btxx/mdhtml): Tiny script for building static websites from markdown files * [wruby](https://wruby.btxx.org): Minimal site generator written in Ruby * [barf](https://barf.btxx.org): Minimal blog engine in a tiny shell script * [Shinobi](https://codeberg.org/btxx/shinobi): Text-based, RSS focused blogging "system" diff --git a/pages/resume.md b/pages/resume.md index 5060873..ebc6b54 100644 --- a/pages/resume.md +++ b/pages/resume.md @@ -3,7 +3,7 @@ **Fullstack Engineer & UX Designer**<br> bt@btxx.org -As a designer/developer hybrid, I help software companies improve their user experience and ship more performant products. +As a designer/developer hybrid with over 12 years of real-world experience, I'm able to help software companies improve their user experience and ship more performant products. <div class="table-container"> <table> diff --git a/pages/uses.md b/pages/uses.md index dabb17a..50e752b 100644 --- a/pages/uses.md +++ b/pages/uses.md @@ -15,12 +15,12 @@ I'm proud to support open source products and privacy-respecting communities. Th </thead> <tbody> <tr> - <td>NearlyFreeSpeech<br><i>Domains / DNS</i></td> - <td>~$50</td> + <td>NearlyFreeSpeech<br><i>Domains / DNS / Hosting</i></td> + <td>~$90</td> </tr> <tr> - <td>Local Raspberry Pi 400<br><i>Web Server (OpenBSD)</i></td> - <td>~$20 (electricity)</td> + <td>RamHost<br><i>VPS (OpenBSD)</i></td> + <td>$15</td> </tr> <tr> <td>Migadu<br><i>Email</i></td> diff --git a/posts/planning-ahead.md b/posts/planning-ahead.md new file mode 100644 index 0000000..1e8e2ae --- /dev/null +++ b/posts/planning-ahead.md @@ -0,0 +1,100 @@ +# What Happens After I'm Gone? The Future of the Online Me + +2025-09-11 + +Well, that's a morbid headline... + +Let me start off by saying that I am doing well and in good health! This post is focused more on the concept of "future-proofing" my open source projects and stupid little mini-sites once I am no longer around to keep the wheels turning, so to speak. It's something that most of us probably don't think about. That makes sense, since it isn't the most joyful thing to focus on. But it does impact our individual "homes" on the internet, no matter how small. + +So, I decided to write-up my *current* online fail-safes, along with my plans for keeping most things running smoothly after I'm gone. + +* toc +{:toc} + +## The Internet is Not Important + +Let's get this out of the way first. The internet doesn't matter compared to *real-life*. Obviously if all my projects / sites disappeared from the web tomorrow it wouldn't be a big deal *at all*. Family, friends, and those directly impacting your life should always take precedent over online communities (even if those communities are awesome!). Before you consider wasting any effort future-proofing your online "stuff", take the time to **write up a will**. It's worth the cost (heck, even online services exist for this now) and once complete it will allow you to focus on more stupid things, like your online stuff! + +If you takeaway one thing from the post, it should be to get yourself a will. + +With that out of the way, let's move on to the less important things in life! + +## Services + +### Domains and Web Hosting + +I believe most domain owners and web masters don't think much about their custom domains or hosting that often. I mean, they *think* about them but not how to handle their management once they, as the sole owners, pass on. If you own any domains or use some form of web hosting, ask yourself the following: + +* Is auto-renew setup? If so, will the payment source ever fail / expire? +* Are notifications setup? If so, will anyone else have access to these? +* Is there an emergency contact? +* Are there any advanced settings (DNS, forwarding, etc.) that should be documented somewhere? +* Shared login details? +* What happens if the current company shutters? Is there a migration plan? + +Domains are critical for long-running projects or even personal sites that represent you as a person. You don't want renewals to lapse and have your domains scooped up by online scalpers. They could hold the domain hostage or possibly use it for nefarious purposes (sending out malicious content or collecting user data). + +As for hosting, the web moves fast and you can't assume anything will last forever. What you *can* do is place your bets on providers that have predictable longevity. The two hosting providers I always recommend are [NearlyFreeSpeech.NET](https://nearlyfreespeech.net) (NFSN) and [RamHost](https://ramhost.us) VPS. NFSN is more inline with your standard "shared hosting" setup, where RamHost is a VPS with full root access. + +Reasons why I like **NFSN**: + +* Allows for [direct, outside contributions](https://faq.nearlyfreespeech.net/section/ourservice/donations) to your account +* Aligns well with free speech core values (vital for an open web) +* Online since 2002 +* Great community, helpful members in the forums +* Optional paid support (I've never needed, but nice to have) +* No bullshit UI, gets out of your way +* Bonus: runs on FreeBSD + +Even **jdw** (founder/owner of NFSN) has previously talked about the [bus factor](https://en.wikipedia.org/wiki/Bus_factor) in the [members forum](https://members.nearlyfreespeech.net/forums/viewtopic.php?t=11627) (2024), in which he responds to talk of retirement: + +> Not to worry, you've got a good 20 years before that's a remotely realistic possibility. + +That's solid enough for me. + +Reasons why I like **RamHost**: + +* Supports OpenBSD (and many others) +* Online since 2009 +* No bullshit UI, gets out of your way +* Costs just [$15/year](https://tinykvm.com) for 384 MB RAM / 10 GB Storage / 500 GB Traffic + +The only downside is that there is no direct "contributions" funding for your account. Fortunately, you can add multiple points of contact that can be notified about upcoming renewals. Their support is quite good as well, so I would be hopeful they would provide assistance for non-techy individuals taking over an existing account. + +I use RamHost for just a few of my projects and mini-sites that need to be running on top of OpenBSD. For most people, NFSN would be the easier option. + +### Email + +This one is a little more difficult. From my research I have yet to find an email provider which allows for a similar "account contribution" setup similar to that of NFSN. You *could* fallback back to a "free" service like Gmail, and utilize NFSN's [email forwarding service](https://www.nearlyfreespeech.net/services/email). But Gmail is pretty terrible (for many reasons). + +It seems the best option is to simply provide your executor with direct login access to your email registrar. Some providers I recommend are: + +- Migadu +- Tutanota +- Proton +- Mailbox.org + +### Social + +I myself don't have many "social" accounts online, but most people do. There isn't much of a *plan* for continuing to interact with social network communities, nor should there be since that would be creepy. The best practice would be to simply notify online friends and followers about what happened, along with plans to eventually shutdown these accounts. + +### Passwords + +All of these above services *should* have their own secure logins. Expecting loved ones to memorize all of your individual passwords is a lot to ask, so it makes sense to utilize a password manager. Any will do (Bitwarden, 1Password, `pass`) just so long as the master password is handed over to the one in charge of the "digital you" after you're gone. That will make things much easier when tackling items such as web hosting and domain configuration. + +It's important to note that some logins require, or were maybe were setup with, authentication services. Make sure access to these authentication codes is provided as well for those taking over. + +## Open Source Projects + +Most open source projects that provide any form of public access or version controlling should be fairly future-proof by default. If you self-host a git forge, just be sure to have at least one mirror of you projects on a public git service. I personally recommend [Codeberg](https://codeberg.org). That way, anyone can fork and tweak and re-share your awesome work.[^1] + +## End on a Happy Note + +I apologize if this post made you more aware of your own mortality - that was not my intention! At the end of the day, online *stuff* doesn't really matter and you don't need to preserve anything if you don't feel like it. I just think it would be nice to keep your online lights on when all other lights go out.[^2] + +Life is wonderful and you should enjoy every moment of it! + +[^1]: So long as the licensing allows it... +[^2]: Yes, this is a Lord of the Rings quote. No, I'm not sorry. + + diff --git a/public/style.css b/public/style.css index fc34ff1..2030bee 100644 --- a/public/style.css +++ b/public/style.css @@ -1,218 +1,169 @@ -* { - box-sizing: border-box; -} +*{box-sizing:border-box;} body { - font-family: Arial, Verdana, sans-serif; - line-height: 1.4; + background: #f2f2f2; + font-family: serif; margin: 0 auto; - max-width: 780px; - padding: 0 1em; -} - -h1 { - line-height: 1.2; - margin-bottom: 10px !important; - margin-top: 0 !important; -} -h1 + p { - margin-top: 0; -} - -h2 { - border-bottom: 1px solid #ddd; - font-weight: normal; -} -h3 { - border-bottom: 1px solid #ddd; -} -h1,h2,h3,h4,h5,h6 { - font-family: Trebuchet MS, Verdana, sans-serif; - margin: 2.5rem 0 0; -} - -a { - color:#00e; -} -a:visited { - color: #518; -} -a:hover, a:focus { - color: #03f; + max-width: 680px; + padding: 0 10px; + width: 100%; } -.flr { - float: right; - padding: 0 0 8px 8px; -} - -.w-100 { - max-width: 100px; -} - -header { - border-bottom: 1px solid; - font-size: 95%; - margin: 1rem 0; -} -nav ul { +header nav ul { list-style: none; + font-family: sans-serif; + margin: 10px 0 0 0; padding: 0; } -nav ul li { +header nav ul li { display: inline-block; - margin: 0 15px 0 0; + margin: 0 10px 10px 0; } - -.posts { - padding: 0 0 0 18px; -} -.posts li { - margin: 0 0 10px; -} -.posts li span { +header nav a { + background: white; + border: 1px solid; + color: black; + cursor: pointer; display: block; - font-size: 85%; + padding: 6px; +} +li.more { + display: none; } -.alert { +main { + background: white; border: 1px solid; + margin: 0; + padding: 0 15px; +} +main p { + text-align: justify; +} + +h1,h2,h3,h4,h5,h6 { font-family: sans-serif; - margin: 10px 0; - padding: 8px; } -.alert span > b { - display: block; +h1 { border-bottom: 1px solid; - margin-bottom: 10px; + line-height: 1.25; + margin: 15px 0 0 0; } -.alert.note { - background: aliceblue; - border-color: darkslateblue; - color: darkslateblue; + +h1#posts ~ ul { + list-style: none; + padding-left: 0; } -.alert.warning { - background: lightgoldenrodyellow; - border-color: darkgoldenrod; - color: darkgoldenrod; +h1#posts ~ ul li a { + display: block; + margin-bottom: 15px; } -p code, ul code, ol code, blockquote code { - background: #f1f1f1; - padding: 2px; +h2{ + border-bottom: 1px solid lightgrey; + font-size: 18px; + margin: 2rem 0 0; } -#markdown-toc { - background: #f8f9fa; - padding: 10px 10px 10px 40px; - position: relative; -} -#markdown-toc::before { - border-bottom: 1px solid #ddd; - content: "Table of Contents"; - display: block; - font-size: 24px; - margin: 0 0 10px -30px; +h3 { + font-size: 16px; } -pre { - background: #f1f1f1; - overflow: auto; - padding: 8px; -} -pre:has(code.language-diagram) { - background: none; +dd { + margin-bottom: 10px; } +img{height:auto;max-width:100%;} + blockquote { - border-left: 4px solid; color: brown; font-style: italic; - margin: 1rem 0; - padding: 0 0 0 8px; } -img { - height: auto; - max-width: 100%; +figure { margin: 2.5rem auto; } +figure img { display: block; margin: 0 auto 10px; } +figcaption { text-align: center; } + +pre, p code, li code { font-size: 14px; } + +pre { + background: #f2f2f2; + padding: 6px; + overflow: auto; } table { - border-collapse: collapse; - margin: 2em 0; - text-align: left; - width: 100%; + border-collapse: collapse; + margin: 2rem 0; + text-align: left; + width: 100%; } table caption { - border-bottom: 1px solid; - font-size: 120%; - text-align: left; + background: #f2f2f2; + padding: 4px; } -table th, table td { - padding: 4px; +table tr { + border-bottom: 1px solid; } -table tr:nth-of-type(even) { - background: #f1f1f1; +table td, table th { + padding: 4px; } -figure { - margin: 3rem 0; -} -figure img { - display: block; - margin: 0 auto; - padding: 4px; -} -figure figcaption { - font-size: 90%; - font-style: italic; - padding: 8px; - text-align: center; +footer { + padding: 0 10px; + margin: 1rem 0 2rem; } .footnotes { - border-top: 1px solid; font-size: 90%; - margin: 20px 0 10px; - padding: 10px 0; + margin-top: 2rem; } -footer { - border-top: 1px dotted; - margin: 4rem 0 2rem; - padding: 2rem 0; - position: relative; +.footer-nav { + display: none; } -footer > p { - margin-top: 0; + +.w-100 { + max-width: 100px; } -@media (prefers-color-scheme: dark) { - a { - color: #9bf; - } - a:visited { - color: #a9f; - } - a:hover, a:focus { - color: #9cf; - } - pre { - background: black; +@media(max-width: 600px) { + body { + padding: 10px; } - p code, ul code, ol code, blockquote code { - background: black; + header nav ul { + margin: 0; } - table tr:nth-of-type(even) { - background: black; + header nav ul li:nth-of-type(4), + header nav ul li:nth-of-type(5), + header nav ul li:nth-of-type(6), + header nav ul li:nth-of-type(7), + header nav ul li:nth-of-type(8) { + display: none; } - #markdown-toc { - background: black; + li.more { + display: inline-block; } - #markdown-toc::before { - border-bottom: 1px solid #ddd; - } - blockquote { - color: lightgoldenrodyellow; + .footer-nav { + display: block; } } + +@media(prefers-color-scheme: dark) { + body { + background-color: black; + } + header nav a { + background: black; + color: white; + } + main { + background: #1d1d1d; + } + pre { + background: black; + } + blockquote { + color: lightgoldenrodyellow; + } +} @@ -82,7 +82,7 @@ def generate_index(posts, header_content, footer_content, root_index_file, post_ index_content = header + root_html + "<ul class=\"posts\">\n" posts.first(post_count).each { |post| index_content << "<li><span>#{post[:date]}</span><a href='/#{posts_dir}/#{post[:link]}'>#{post[:title]}</a></li>\n" } - index_content << "</ul>\n<p><a href='/#{posts_dir}'>View all posts →</a></p>\n" + footer_content + index_content << footer_content File.write("#{output_dir}/index.html", index_content) end |