diff options
| author | bt <bt@btxx.org> | 2024-06-08 13:22:19 -0400 |
|---|---|---|
| committer | bt <bt@btxx.org> | 2024-06-08 13:22:19 -0400 |
| commit | dcfb172704f3afb68a30425029ec834be2883274 (patch) | |
| tree | 02ac480745db802d7af03f3213a0c568322170e3 | |
| parent | e146f8a64c793c337999ce316b16ebe5fe6f2dab (diff) | |
More content porting, on-going markdown changes for lowdown support
202 files changed, 32654 insertions, 10583 deletions
@@ -1,6 +1,21 @@ #!/bin/sh + +domain="https://btxx.org" + +# Check the operating system +os_name=$(uname -s) + +if [ "$os_name" = "OpenBSD" ]; then + alias sed=gsed + alias date=gdate + alias rsync=openrsync +elif [ "$os_name" = "Darwin" ]; then + alias sed=gsed + alias date=gdate +fi + set -eu -MARKDOWN=smu +MARKDOWN=lowdown IFS=' ' # Create tab separated file with filename, title, creation date, last update @@ -26,10 +41,10 @@ index_html() { while read -r f title created; do link=$(echo "$f" | sed -E 's|.*/(.*).md|\1/|') created=$(echo $(head -3 "$f" | tail -1)) - echo "<span>$created · <a href=\"$link\">$title</a></span><br>" + echo "<span>$created · <a href=\"$link\">$title</a></span><br>" done < "$1" | sort -r - echo "</div>" + echo "<div>" # Print footer after post list cat footer.html @@ -37,7 +52,6 @@ index_html() { atom_xml() { uri=$(sed -rn '/atom.xml/ s/.*href="([^"]*)".*/\1/ p' header.html) - domain=$(echo "$uri" | sed 's/atom.xml//g' | sed 's|/[^/]*$||') first_commit_date=$(git log --pretty='format:%ai' . | cut -d ' ' -f1 | tail -1) cat <<EOF @@ -74,6 +88,44 @@ EOF echo '</feed>' } +rss_xml() { + uri=$(sed -rn '/rss.xml/ s/.*href="([^"]*)".*/\1/ p' header.html) + first_commit_date=$(git log --pretty='format:%ai' . | cut -d ' ' -f1 | tail -1) + + cat <<EOF +<?xml version="1.0" encoding="utf-8"?> +<rss version="2.0"> + <channel> + <title>$(sed -n '/^# /{s/# //p; q}' index.md)</title> + <link>$domain/rss.xml</link> + <description>Feed description here</description> + <lastBuildDate>$(date -u +"%a, %d %b %Y %H:%M:%S %z")</lastBuildDate> + <pubDate>$(date -u +"%a, %d %b %Y %H:%M:%S %z")</pubDate> + <generator>Custom RSS Generator</generator> + <ttl>1800</ttl> +EOF + + while read -r f title created; do + content=$($MARKDOWN "$f" | sed 's/&/\&/g; s/</\</g; s/>/\>/g; s/"/\"/g; s/'"'"'/\'/g') + post_link=$(echo "$f" | sed -E 's|posts/(.*).md|\1|') + basic_date=$(echo $(head -3 "$f" | tail -1)) + published_date=$(date -d "$basic_date" -u +"%a, %d %b %Y %H:%M:%S %z") + + cat <<EOF + <item> + <title>$title</title> + <description>$content</description> + <link>$domain/$post_link</link> + <guid isPermaLink="false">$domain/$post_link</guid> + <pubDate>$published_date</pubDate> + </item> +EOF + done < "$1" + + echo '</channel>' + echo '</rss>' +} + write_page() { filename=$1 directory=$(echo $(basename "$filename" .md)) @@ -94,6 +146,7 @@ rm -rf build && mkdir build index_tsv posts | sort -rt " " -k 3 > build/posts.tsv index_html build/posts.tsv > build/index.html atom_xml build/posts.tsv > build/atom.xml +rss_xml build/posts.tsv > build/rss.xml while read -r f title created; do write_page "$f" "$title" "$created" done < build/posts.tsv diff --git a/build/$10/index.html b/build/$10/index.html index 917ab3e..29f55a1 100644 --- a/build/$10/index.html +++ b/build/$10/index.html @@ -1,53 +1,101 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Do You Have an Extra $10?</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Do You Have an Extra $10?</h1> +<h1 id="do-you-have-an-extra-10">Do You Have an Extra $10?</h1> + <p>2022-11-23</p> -<p>As software designers and developers, think of all the little things that we spend $10 on. Maybe it's a couple coffees over the course of a week. Maybe it's a TV streaming subscription. Maybe it's an impulse buy while we're out shopping for groceries. Maybe it goes into a mason jar on top of the fridge, stored away for a rainy day.</p> -<p>$10 doesn't seem like a <em>ton</em> of money, but a little does go a long way. What if, combined with <em>other people</em>, that $10 could grow and support an open source project? A project that you might even use <em>every day</em> without cost. </p> -<p>Plenty of people already do this - it's nothing new. If you already contribute to the open source community (whether through code or donations) then this post isn't really geared towards you. You're already helping out and are greatly appreciated. Feel free to stop reading right now and continue on with your day!</p> -<p>But, if you're like how I used to be, you might be one of those people who enjoys <em>the idea</em> of donating to a FOSS project instead of actually doing so. That's fine. Zero judgement here since I was doing <em>exactly that</em> for years. All I ask is for you to try it out for even a couple months. You'll soon realize that $10 doesn't break the bank, while at the same time, you get that "warm, fuzzy feeling" of supporting important projects/communities.</p> -<p>In a way, it's actually kind of selfish. You start doing it more for the <em>feel good</em> endorphin that kicks in each time you donate. At least, that's been my experience...</p> -<h2>Open Source isn't Free</h2> -<p>Maintaining any open source project takes years of prior design/development experience, along with sacrificing personal time. Contributors might enjoy working on their project. Most probably love connecting with their end-users and community - but their time is still a hard requirement.</p> -<p>I believe this time is worth paying for. If a project you depend on were to suddenly "shut down", how much time, effort, and income do you stand to lose? Is it more than $10 a month?</p> -<h2>"Donating? In THIS Economy?"</h2> -<p>Things aren't great for a lot of folks financially right now. I'm not ignorant to this fact and completely understand people tightening their belts. We all have to. I'm merely suggesting that if you <em>have the means</em> to support FOSS communities with any disposable income, you should. And I'm not suggesting a lot - <strong>just ten bucks</strong>.</p> + +<p>As software designers and developers, think of all the little things that we spend $10 on. Maybe it’s a couple coffees over the course of a week. Maybe it’s a TV streaming subscription. Maybe it’s an impulse buy while we’re out shopping for groceries. Maybe it goes into a mason jar on top of the fridge, stored away for a rainy day.</p> + +<p>$10 doesn’t seem like a <em>ton</em> of money, but a little does go a long way. What if, combined with <em>other people</em>, that $10 could grow and support an open source project? A project that you might even use <em>every day</em> without cost. </p> + +<p>Plenty of people already do this - it’s nothing new. If you already contribute to the open source community (whether through code or donations) then this post isn’t really geared towards you. You’re already helping out and are greatly appreciated. Feel free to stop reading right now and continue on with your day!</p> + +<p>But, if you’re like how I used to be, you might be one of those people who enjoys <em>the idea</em> of donating to a FOSS project instead of actually doing so. That’s fine. Zero judgement here since I was doing <em>exactly that</em> for years. All I ask is for you to try it out for even a couple months. You’ll soon realize that $10 doesn’t break the bank, while at the same time, you get that “warm, fuzzy feeling” of supporting important projects/communities.</p> + +<p>In a way, it’s actually kind of selfish. You start doing it more for the <em>feel good</em> endorphin that kicks in each time you donate. At least, that’s been my experience…</p> + +<h2 id="open-source-isnt-free">Open Source isn’t Free</h2> + +<p>Maintaining any open source project takes years of prior design/development experience, along with sacrificing personal time. Contributors might enjoy working on their project. Most probably love connecting with their end-users and community - but their time is still a hard requirement.</p> + +<p>I believe this time is worth paying for. If a project you depend on were to suddenly “shut down”, how much time, effort, and income do you stand to lose? Is it more than $10 a month?</p> + +<h2 id="donating-in-this-economy">“Donating? In THIS Economy?”</h2> + +<p>Things aren’t great for a lot of folks financially right now. I’m not ignorant to this fact and completely understand people tightening their belts. We all have to. I’m merely suggesting that if you <em>have the means</em> to support FOSS communities with any disposable income, you should. And I’m not suggesting a lot - <strong>just ten bucks</strong>.</p> + <p>Allow me to put my money where my mouth is and showcase my own $10 donation breakdown:</p> -<h2>My $10 Breakdown</h2> + +<h2 id="my-10-breakdown">My $10 Breakdown</h2> + <table> -<tr><th>Service</th><th>Cost/month</th></tr> -<tr><td><a href="https://sourcehut.org">sourcehut</a></td><td>$5.00</td></tr> -<tr><td><a href="https://fosstodon.org">fosstodon</a></td><td>$3.00</td></tr> -<tr><td><a href="https://qutebrowser.org">qutebrowser</a></td><td>$2.00</td></tr> +<thead> +<tr> +<th>Service</th> +<th>Cost/month</th> +</tr> +</thead> + +<tbody> +<tr> +<td><a href="https://sourcehut.org">sourcehut</a></td> +<td>$5.00</td> +</tr> +<tr> +<td><a href="https://fosstodon.org">fosstodon</a></td> +<td>$3.00</td> +</tr> +<tr> +<td><a href="https://qutebrowser.org">qutebrowser</a></td> +<td>$2.00</td> +</tr> +</tbody> </table> -<em>In case you are reading the post at a later point in time, the most up-to-date donation listing can always be found <a href="/uses/">on my official Uses page</a>.</em><h2>SourceHut</h2> -<p>To be fair, this is an active service which just so happens to be available for "free" in its current state. Drew <a href="https://sourcehut.org/pricing/">mentions on the main pricing page</a> that payment is <em>currently</em> optional, but will eventually require maintainers to upgrade (contributors will always have free access):</p> -<blockquote><p>sr.ht is currently in alpha, and the quality of the service may reflect that. As such, payment is currently optional, and only encouraged for users who want to support the ongoing development of the site. </p> + +<p><em>In case you are reading the post at a later point in time, the most up-to-date donation listing can always be found <a href="/uses/">on my official Uses page</a>.</em></p> + +<h2 id="sourcehut">SourceHut</h2> + +<p>To be fair, this is an active service which just so happens to be available for “free” in its current state. Drew <a href="https://sourcehut.org/pricing/">mentions on the main pricing page</a> that payment is <em>currently</em> optional, but will eventually require maintainers to upgrade (contributors will always have free access):</p> + +<blockquote> +<p>sr.ht is currently in alpha, and the quality of the service may reflect that. As such, payment is currently optional, and only encouraged for users who want to support the ongoing development of the site. </p> </blockquote> -<p>I still consider this "donating" since it helps keep this specific instance alive. It's also my main code forge since I've been <a href="/srht2/">migrating away from GitHub</a>. I want to see SourceHut succeed, so while I <em>could</em> use the service completely free, I believe it's more than worth it to coverage my usage.</p> -<h2>Fosstodon</h2> -<p><a href="https://fosstodon.org">fosstodon.org</a> is my main "social" platform and the Mastodon instance I chose to join some time ago. The people I've interacted with have been nothing but helpful, insightful and fun. The maintainers are also very down to earth (shoutout to <a href="https://kevquirk.com/">Kev</a> specifically for making my initial experience great!)</p> -<p>Hosting a large Mastodon instance can become expensive. Not to mention the recent influx of Twitter users flocking to the platform in general. Fosstodon recently <a href="https://hub.fosstodon.org/more-upgrades-twitter-storm/">posted an update</a> detailing how their server costs are now >$1800. That's insane.</p> -<p>The least I can do is toss a few bucks towards the service. I know it isn't much, but it certainly feels better than using such an awesome platform for absolutely nothing. Keep up the great work maintainers/mods!</p> -<h2>qutebrowser</h2> -<p><strong>The best browser I have ever used</strong>. I refuse to go back to Firefox or even FireDragon/Pale Moon. I'm only currently donating $2 but my goal is to increase this in the future before adding any other services / communities to my "collection". If you haven't yet tried it, I highly recommend it.</p> -<h2>Food for Thought</h2> -<p>That's really all there is for me to say on the matter. It essentially comes down to personal preference and the financial ability to donate. As I said before: there is no judgement here. All I'm suggesting is that people do what they can to help support the FOSS projects they love.</p> -<p>And really, it's just $10.</p> + +<p>I still consider this “donating” since it helps keep this specific instance alive. It’s also my main code forge since I’ve been <a href="/srht2/">migrating away from GitHub</a>. I want to see SourceHut succeed, so while I <em>could</em> use the service completely free, I believe it’s more than worth it to coverage my usage.</p> + +<h2 id="fosstodon">Fosstodon</h2> + +<p><a href="https://fosstodon.org">fosstodon.org</a> is my main “social” platform and the Mastodon instance I chose to join some time ago. The people I’ve interacted with have been nothing but helpful, insightful and fun. The maintainers are also very down to earth (shoutout to <a href="https://kevquirk.com/">Kev</a> specifically for making my initial experience great!)</p> + +<p>Hosting a large Mastodon instance can become expensive. Not to mention the recent influx of Twitter users flocking to the platform in general. Fosstodon recently <a href="https://hub.fosstodon.org/more-upgrades-twitter-storm/">posted an update</a> detailing how their server costs are now >$1800. That’s insane.</p> + +<p>The least I can do is toss a few bucks towards the service. I know it isn’t much, but it certainly feels better than using such an awesome platform for absolutely nothing. Keep up the great work maintainers/mods!</p> + +<h2 id="qutebrowser">qutebrowser</h2> + +<p><strong>The best browser I have ever used</strong>. I refuse to go back to Firefox or even FireDragon/Pale Moon. I’m only currently donating $2 but my goal is to increase this in the future before adding any other services / communities to my “collection”. If you haven’t yet tried it, I highly recommend it.</p> + +<h2 id="food-for-thought">Food for Thought</h2> + +<p>That’s really all there is for me to say on the matter. It essentially comes down to personal preference and the financial ability to donate. As I said before: there is no judgement here. All I’m suggesting is that people do what they can to help support the FOSS projects they love.</p> + +<p>And really, it’s just $10.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/1kb/index.html b/build/1kb/index.html index 36b7f7a..389b489 100644 --- a/build/1kb/index.html +++ b/build/1kb/index.html @@ -1,54 +1,79 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Making a Website Under 1kB</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Making a Website Under 1kB</h1> +<h1 id="making-a-website-under-1kb">Making a Website Under 1kB</h1> + <p>2022-08-02</p> -<p>I recently launched (another) website club called the <a href="https://1kb.club">1kB Club</a>. Unlike the <a href="https://1mb.club">1MB Club</a>, it isn't as accessible for most modern websites to become official members. Building a website that actually serves useful content while squeezing its page size under 1,024 bytes is no easy feat.</p> + +<p>I recently launched (another) website club called the <a href="https://1kb.club">1kB Club</a>. Unlike the <a href="https://1mb.club">1MB Club</a>, it isn’t as accessible for most modern websites to become official members. Building a website that actually serves useful content while squeezing its page size under 1,024 bytes is no easy feat.</p> + <p>But it is possible. And I did it myself!</p> -<p><em>Note:</em> Big shout-out to <a href="https://t0.vc">Tanner</a>, who inspired this whole "movement" with his own minimal website. (He also has some really great creations/articles there too!)</p> -<h2>The HTML</h2> -<p>For reference, you can view my "mini" website here: <a href="https://cv.tdarb.org">cv.tdarb.org</a>. It is <em>very</em> minimal and serves only as a personal curriculum vitae. It also weighs only <strong>920 bytes</strong> and is valid HTML.</p> -<p>Let's take a look at the full HTML and then break things down from there:</p> -<pre><code><!DOCTYPE html><link rel="icon" href="data:,"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>CV</title><p>Hi, I'm <a href="t">Brad Taunt</a>! I'm a UX designer.<p>Email: hello@tdarb.org<p>Resume<p>Senior Product Designer @ Donorbox, 2021-<br>Web Designer @ Purism, 2019-2021<br>Product Designer @ Benbria, 2013-2019<br>Web Designer @ Netvatise, 2009-2013<p>Projects<p><a href="1">1MB Club</a><br><a href="k">1kB Club</a><br><a href="p">pblog</a><br><a href="s">shinobi</a><br><a href="h">PHPetite</a><br><a href="v">Vanilla CSS</a><p>Writing<p><a href="d">The Death of Personality</a><br><a href="u">Simple Does Not Mean Ugly</a><br><a href="e">Plain Text Emails, Please</a><br><a href="tb">[more]</a> + +<p><em>Note:</em> Big shout-out to <a href="https://t0.vc">Tanner</a>, who inspired this whole “movement” with his own minimal website. (He also has some really great creations/articles there too!)</p> + +<h2 id="the-html">The HTML</h2> + +<p>For reference, you can view my “mini” website here: <a href="https://cv.tdarb.org">cv.tdarb.org</a>. It is <em>very</em> minimal and serves only as a personal curriculum vitae. It also weighs only <strong>920 bytes</strong> and is valid HTML.</p> + +<p>Let’s take a look at the full HTML and then break things down from there:</p> + +<pre><code><!DOCTYPE html><link rel="icon" href="data:,"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>CV</title><p>Hi, I'm <a href="t">Brad Taunt</a>! I'm a UX designer.<p>Email: hello@tdarb.org<p>Resume<p>Senior Product Designer @ Donorbox, 2021-<br>Web Designer @ Purism, 2019-2021<br>Product Designer @ Benbria, 2013-2019<br>Web Designer @ Netvatise, 2009-2013<p>Projects<p><a href="1">1MB Club</a><br><a href="k">1kB Club</a><br><a href="p">pblog</a><br><a href="s">shinobi</a><br><a href="h">PHPetite</a><br><a href="v">Vanilla CSS</a><p>Writing<p><a href="d">The Death of Personality</a><br><a href="u">Simple Does Not Mean Ugly</a><br><a href="e">Plain Text Emails, Please</a><br><a href="tb">[more]</a> </code></pre> -<h2>Sneaky "Hacks"</h2> -<p>The first thing you'll notice is that the HTML is compressed. White space adds extra bytes of data to the page weight - so it needs to go. Next, you might have caught the <em>odd</em> favicon meta tag:</p> -<pre><code><link rel="icon" href="data:,"> + +<h2 id="sneaky-hacks">Sneaky “Hacks”</h2> + +<p>The first thing you’ll notice is that the HTML is compressed. White space adds extra bytes of data to the page weight - so it needs to go. Next, you might have caught the <em>odd</em> favicon meta tag:</p> + +<pre><code><link rel="icon" href="data:,"> </code></pre> + <p>This is required to stop the browser from making the standard favicon request (normally pulling from <code>favicon.ico</code>). By adding this meta tag you are telling the browser to load in an empty image without running another server request. This saves about 400 bytes of bandwidth on its own!</p> + <p>The next two meta tags after the <code>icon</code> are technically optional. These are the <code>viewport</code> and <code>title</code> tags. You could save a good amount of data by excluding them altogether, but I had my own personal reasons for keeping them:</p> + <ol> <li>I wanted the web page to be responsive</li> <li>I wanted the page to be <a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fcv.tdarb.org%2F">valid HTML</a></li> </ol> + <p>So, I kept these tags but made them as minimal as I possibly could (looking at you <code>title</code> tag). After that, it was time to add my content!</p> -<h2>Where We're Going, We Don't Need Tags...</h2> -<p>The beauty of using HTML5 is the ability to ditch "default" and closing tags on most elements. Think of all those bytes we can save!</p> + +<h2 id="where-were-going-we-dont-need-tags">Where We’re Going, We Don’t Need Tags…</h2> + +<p>The beauty of using HTML5 is the ability to ditch “default” and closing tags on most elements. Think of all those bytes we can save!</p> + <p>In the HTML above you will notice:</p> + <ol> <li>There is no <code>html</code> element</li> <li>There is no <code>head</code> element</li> <li>There is no <code>body</code> element</li> <li>There are no closing <code>p</code> tags</li> </ol> -<p>Even with all those "missing" elements, the webpage is still valid HTML5! Craziness.</p> + +<p>Even with all those “missing” elements, the webpage is still valid HTML5! Craziness.</p> + <p>The final hack that saved a <em>ton</em> of bandwidth was implementing custom <code>href</code> URLs. Most of the links on the page take the user to another website altogether - which is fine. The problem is including these full domains inside the <code>a:href</code> tag. Those can start to eat up a lot of data.</p> -<p>Luckily, I host this mini-site through Netlify so I can take full advantage of their optional <code>_redirects</code> file. Links are now set with a single character (ie. "1" for the 1MB Club link) and the <code>_redirects</code> file simply forwards the user to the custom domain. Pretty sneaky!</p> -<h2>Closing Thoughts</h2> -<p>This is a silly project that isn't meant to be taken so seriously. That being said, I'd love to see what other pages people are able to create while being limited to just 1kB.</p> + +<p>Luckily, I host this mini-site through Netlify so I can take full advantage of their optional <code>_redirects</code> file. Links are now set with a single character (ie. “1” for the 1MB Club link) and the <code>_redirects</code> file simply forwards the user to the custom domain. Pretty sneaky!</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>This is a silly project that isn’t meant to be taken so seriously. That being said, I’d love to see what other pages people are able to create while being limited to just 1kB.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/Building_rbenv_on_OpenBSD_7.5/index.html b/build/Building_rbenv_on_OpenBSD_7.5/index.html new file mode 100644 index 0000000..f5ce468 --- /dev/null +++ b/build/Building_rbenv_on_OpenBSD_7.5/index.html @@ -0,0 +1,92 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="icon" href="data:,"> + <title>Building rbenv on OpenBSD 7.5</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;}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="building-rbenv-on-openbsd-7.5">Building rbenv on OpenBSD 7.5</h1> + +<p>2024-06-02</p> + +<p>I use Ruby (specifically with Jekyll) for a lot of my clubs/projects while using my personal laptop (<a href="/posts/x220/">X220 ThinkPad</a>) which is runs OpenBSD. Since I recently upgraded to OpenBSD 7.5 I thought it could be helpful for others if I shared my process of building and using <code>rbenv</code> to install different Ruby versions.</p> + +<h2 id="before-we-build">Before We Build</h2> + +<p>First, be sure to install the required packages in order to build from source, and then clone the core <code>rbenv</code> repo:</p> + +<pre><code>pkg_add git gcc gmake libffi libyaml openssl +git clone https://github.com/rbenv/rbenv.git ~/.rbenv +</code></pre> + +<h2 id="building-">Building <code>rbenv</code></h2> + +<p>Add <code>rbenv</code> to your PATH and initialize it (place this inside your <code>.bashrc</code> or <code>.zshrc</code> etc):</p> + +<pre><code>export PATH="$HOME/.rbenv/bin:$PATH" +export PATH="$HOME/.rbenv/shims:$PATH" +export RUBY_CONFIGURE_OPTS="--with-openssl-dir=/usr/local" +eval "$(rbenv init -)" +</code></pre> + +<p>Then reload your shell (zsh in this example): </p> + +<pre><code>source ~/.zshrc +</code></pre> + +<p>Next we will need to install <code>ruby-build</code> as a <code>rbenv</code> plugin. Clone the ruby-build repository into the rbenv plugins directory:</p> + +<pre><code>git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build +</code></pre> + +<h2 id="installing-ruby-and-setting-our-version">Installing Ruby and Setting Our Version</h2> + +<p>Now use <code>rbenv</code> to install the desired version of Ruby (we will get an older version for this example):</p> + +<pre><code>rbenv install 3.3.0 +</code></pre> + +<p>If you run into issues, you may need to specify your openssl directory:</p> + +<pre><code>RUBY_CONFIGURE_OPTS="--with-openssl-dir=/usr/local" rbenv install 3.3.0 +</code></pre> + +<p>If you’re on a slower machine (like mine) this might take a little bit. Just grab a coffee or a snack while you wait!</p> + +<p>Then navigate to your project of choice and set the <code>local</code> Ruby version:</p> + +<pre><code>rbenv local 3.3.0 +</code></pre> + +<p>That’s it! If you’d prefer to set this version of Ruby for all projects going forward, simply replace <code>local</code> with <code>global</code>.</p> +<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://git.sr.ht/~bt/barf">barf</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>
\ No newline at end of file diff --git a/build/Installing_WordPress_on_NearlyFreeSpeech/index.html b/build/Installing_WordPress_on_NearlyFreeSpeech/index.html new file mode 100644 index 0000000..ed8414c --- /dev/null +++ b/build/Installing_WordPress_on_NearlyFreeSpeech/index.html @@ -0,0 +1,226 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="icon" href="data:,"> + <title>Installing WordPress on NearlyFreeSpeech</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;}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="installing-wordpress-on-nearlyfreespeech">Installing WordPress on NearlyFreeSpeech</h1> + +<p>2024-05-27</p> + +<p>I recently went through the process of porting over my wife’s small business website (built off of WordPress + Woocommerce) from EasyWP to NearlyFreeSpeech. Although the process was fairly easy-going, I thought I would post my complete process here. That way, others who might wish to make the same switch can avoid running into any minor bumps along the way.</p> + +<blockquote> +<p>Some of this information has been lifted from <a href="https://members.nearlyfreespeech.net/tdarb/support/wordpress">the official NFS docs</a>, but these pages require a membership to access</p> +</blockquote> + +<h3 id="download-wordpress">Download WordPress</h3> + +<p>We will use the <code>wp-cli</code> that comes packaged with NearlyFreeSpeech (NFS):</p> + +<ol> +<li>Connect to your site via SSH.</li> +<li>Change to the directory you want to be the base of your blog (e.g. /home/public if WordPress will be running the whole site, or /home/public/blog if you want to share the site with other content).</li> +</ol> + +<p>For help using WP-CLI from the SSH command line, use this command:</p> + +<pre><code>wp help +</code></pre> + +<p>To download and unpack the latest version of WordPress, enter the following command:</p> + +<pre><code>wp core download +</code></pre> + +<h2 id="create-a-mysql-process-and-database">Create a MySQL Process and Database</h2> + +<p>Follow the instructions in the NearlyFreeSpeech.NET FAQ to <a href="https://members.nearlyfreespeech.net/faq?q=MySQL#MySQL">create a MySQL process</a> if you haven’t already.</p> + +<p>Next, <a href="https://members.nearlyfreespeech.net/faq?q=CreateDatabase#CreateDatabase">create a new database</a> within that process. Note the name of the process and the name of the database.</p> + +<p><strong>Important</strong>: Do not use your own MySQL credentials to connect WordPress to your database. Instead, create a new user. This will protect your member password in the event that your site becomes compromised.</p> + +<ul> +<li>Click on the <a href="https://members.nearlyfreespeech.net/mysql">MySQL tab</a> in the member interface</li> +<li>Click “[Open phpMyAdmin](<a href="https://phpmyadmin.nearlyfreespeech.net/">https://phpmyadmin.nearlyfreespeech.net/</a>” in the Actions box.</li> +<li>Enter the DSN (“Server”) of your MySQL Process, MySQL username, and MySQL password. The DSN and username can be found on the Process Information page in our member UI.</li> +<li>Click on the “Users” tab.</li> +<li>Click “Add user.” (It’s toward the bottom left of the page.)</li> +<li>Give the user a descriptive name. We’ll use exampledbuser here, but you should pick something better, like wpuser or something representative of your blog.</li> +<li>Make sure to leave the Host: selectbox on “Any host.”</li> +<li>Click the “Generate” link to generate a nice strong password.</li> +<li>Use cut and paste to copy the new password somewhere, you’ll need it later. (We’ll use dbpassword here.)</li> +<li>Grant the following permissions to the new user: + +<ul> +<li>All the permissions except “file” in the “data” box,</li> +<li>Everything in the “structure” box, and</li> +<li>“LOCK TABLES” in the “administration” box.</li> +</ul></li> +<li>Click the “Go” button in the lower right.</li> +<li>Exit phpMyAdmin.</li> +</ul> + +<h2 id="generate-a-wordpress-configuration-file">Generate a WordPress Configuration File</h2> + +<p>At the SSH command line (replace the examples with the info for the database and user you created above):</p> + +<pre><code>wp core config --dbhost=example.db --dbname=exampledb --dbuser=exampledbuser --dbpass=dbpassword +chmod 644 wp-config.php +</code></pre> + +<h2 id="run-the-wordpress-installation-and-setting-permissions">Run the WordPress Installation and Setting Permissions</h2> + +<p>To get your permalinks to work properly, you must set up an .htaccess file. </p> + +<ol> +<li>Go to the Dashboard for your WordPress site. (e.g. <a href="https://www.example.com/wp-admin/index.php">https://www.example.com/wp-admin/index.php</a>)</li> +<li>In the navigation sidebar, find Settings and, under that, Permalinks.</li> +<li>Select your preferred link style under “Common Settings.” (We like “Day and name.”)</li> +<li>Scroll down and select the “Save Changes” button.</li> +</ol> + +<p>Next, create an <code>.htaccess</code> file for your WordPress site. We suggest doing this directly from the SSH command line using the cat shell command:</p> + +<pre><code>cat >.htaccess <<NFSNRULES # This line is a shell command, not part of .htaccess! +RewriteEngine On +RewriteBase / +RewriteRule ^index\.php$ - [L] +RewriteCond %{REQUEST_FILENAME} !-f +RewriteCond %{REQUEST_FILENAME} !-d +RewriteRule . /index.php [L] +NFSNRULES +</code></pre> + +<p>If you prefer, you can copy-paste the text into an editor:</p> + +<pre><code>RewriteEngine On +RewriteBase / +RewriteRule ^index\.php$ - [L] +RewriteCond %{REQUEST_FILENAME} !-f +RewriteCond %{REQUEST_FILENAME} !-d +RewriteRule . /index.php [L] +</code></pre> + +<p>We need to run the following commands in order to install, uninstall, activate, and deactivate plugins/themes from within the admin web GUI of WordPress:</p> + +<pre><code>chgrp web .htaccess +chmod 664 .htaccess +chgrp -R web * +find . -type d -exec chmod 775 {} \; +find . -type f -exec chmod 664 {} \; +wp config set FS_METHOD direct +</code></pre> + +<h2 id="enable-file-uploading">Enable File Uploading</h2> + +<p>In your main WordPress installation folder enter the following SSH commands:</p> + +<pre><code>cd wp-content +mkdir -p uploads +chgrp -R web uploads +chmod -R 775 uploads +</code></pre> + +<h2 id="keeping-wordpress-up-to-date-automatically-via-command-line">Keeping WordPress Up-To-Date Automatically via Command Line</h2> + +<p>It is <strong>critically</strong> important to keep your WordPress installation up-to-date including, if applicable, your theme and plugins. PHP, WordPress, and WordPress themes and plugins all have a track record of security problems. Most of those get fixed quickly, but if you don’t update, you don’t get the fixes.</p> + +<p>To help you keep WordPress up-to-date, NFS provides a streamlined script.</p> + +<p>This command, which must be run from an interactive ssh session, will set up our system to check your WordPress install (and themes & plugins) for you every day, and update them automatically when needed:</p> + +<pre><code>wp-update.sh -a +</code></pre> + +<p>By default, it will tell you via email when updates happen. If you don’t want that, just add <code>-q</code> (for “quiet”) to the command. It will work silently unless there is an error.</p> + +<p>If you get errors from wp-cron (not wp-update) about failed automatic updates, you may also wish to add this to your wp-config.php file:</p> + +<pre><code>define( 'AUTOMATIC_UPDATER_DISABLED', true ); +</code></pre> + +<p>This disables the insecure automatic updater bundled with recent versions of WordPress.</p> + +<p><strong>Do not attempt</strong> to use WordPress’s built-in ability to update itself through its admin panel. That insecure, outdated approach should not still exist. It does not work on NFS, which is a feature, not a bug. Getting it to work requires almost completely destroying your site’s security, thereby ensuring that any undiscovered security flaw can enable hackers to completely obliterate your site. The update methods described here are faster, easier, and safer.</p> + +<h2 id="logging-in">Logging In</h2> + +<p>You should be able to navigate to <code>yourwebsite.com/wp-admin</code>, login and have everything work as expected. Congrats - enjoy your blog!</p> + +<p>Below you can find more advanced configuration to get the most out of your WordPress project.</p> + +<hr/> + +<h2 id="backing-up-wordpress">Backing up WordPress</h2> + +<p>NFS recommends backing up your WordPress setup on a regular basis.</p> + +<p>This is a two-step process. You must back up both the files and the database.</p> + +<h3 id="backing-up-wordpress-files">Backing up WordPress Files</h3> + +<p>To back up your WordPress files directly from a Unix-like system of your own, you can use a command like:</p> + +<pre><code>ssh yourmembername_siteshortname@ssh.phx.nearlyfreespeech.net tar -C /home/public -cvf - . | gzip >name-of-wordpress-backup.tar.gz +</code></pre> + +<p>To back up WordPress to a file on our system that you can transfer via SFTP to your own computer, you can use a command like:</p> + +<pre><code>tar -C /home/public -cvzf /home/tmp/name-of-wordpress-backup.tar.gz . +</code></pre> + +<p>This assumes that your WordPress install is in the default location (<code>/home/public</code>). It will put your backup file in your <code>/home/tmp</code> directory.</p> + +<p>Do not try to back up your WordPress folder into your WordPress folder, as that occasionally results in attempts to use infinite disk space by trying to back up the backup of the backup of the backup of the…</p> + +<h3 id="backing-up-the-wordpress-database">Backing up the WordPress Database</h3> + +<p>If you have a Unix-like system of your own (e.g. macOS or Linux), you can do the backup directly from there using your local command prompt using the MySQL username and password you created for WordPress:</p> + +<pre><code>ssh yourmembername_siteshortname@ssh.phx.nearlyfreespeech.net wp db export - | gzip >wordpress-backup.sql.gz +</code></pre> + +<p>Or you can do it from the SSH command line via WP-CLI:</p> + +<pre><code>wp db export /home/tmp/wordpress-backup.sql +</code></pre> + +<p>The <code>wordpress-backup.sql</code> file this generates will be stored in your site’s <code>/home/tmp</code> directory. Download it from there to have a local copy.</p> + +<h2 id="thats-it">That’s It!</h2> + +<p>Your WordPress site should be up-and-running now. Further customization or extra plugins/services can be freely added if so desired. Enjoy your site!</p> +<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://git.sr.ht/~bt/barf">barf</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>
\ No newline at end of file diff --git a/build/My_Text_Editor_Is_Not_Open_Source/index.html b/build/My_Text_Editor_Is_Not_Open_Source/index.html index 9b0f0b2..ac7c923 100644 --- a/build/My_Text_Editor_Is_Not_Open_Source/index.html +++ b/build/My_Text_Editor_Is_Not_Open_Source/index.html @@ -1,57 +1,95 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>My Text Edtior is Not Open Source</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>My Text Edtior is Not Open Source</h1> +<h1 id="my-text-edtior-is-not-open-source">My Text Edtior is Not Open Source</h1> + <p>2024-01-02</p> -<p>I've been using Sublime Text on and off for longer than I can remember. I think Sublime has been around since the start of my "real" career over 10 years ago, but I could be mistaken[^1]. It certainly <em>feels</em> that long. And in that time I have never gotten upset with Sublime. I've never rage quit or ran into an issue of Sublime not being able to <em>do the thing I wanted it to do</em>. As much of a cliche it may sound: it just works.</p> -<p>Even when I switch editors (VSCode, Geany, kitty+vim etc.) for a period of time, I find myself always coming back to Sublime. The only reason I try other editors is simply that: to try them. Maybe that's why these editors don't click with me. Maybe I'm giving Sublime an unfair advantage since I'm simply "testing" other editors, rather than looking for a solid alternative.</p> -<p>And don't get me wrong, I understand <em>why</em> editors like VSCode are extremely popular. VSCode has a massive ecosystem and new plugins are generally developed for that editor before all others. Finding solutions to problems online is very easy, since it is so popular. But best of all - it's open source[^2].</p> -<p>So why am I using a <em>non</em>-open source editor? (Spoilers: because it's a great editor)</p> -<h2>"A Proprietary Editor - How Could You?!"</h2> -<p>I know, I know. If you're familiar with me or the things I write about it must seem odd that I would willingly use proprietary software over open source. This is something I struggle with constantly day-to-day in the realm of "personal tech". I find with age I become more open-minded to having a diverse range of software and hardware choices. Open source is best in <em>concept</em> but not always best in practice.</p> -<p>The problem is that Sublime is just such a <em>great</em> editor. I can't ignore quality and refuse to use good software solely based on it's licensing. A few personal things I love about Sublime:</p> + +<p>I’ve been using Sublime Text on and off for longer than I can remember. I think Sublime has been around since the start of my “real” career over 10 years ago, but I could be mistaken<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>. It certainly <em>feels</em> that long. And in that time I have never gotten upset with Sublime. I’ve never rage quit or ran into an issue of Sublime not being able to <em>do the thing I wanted it to do</em>. As much of a cliche it may sound: it just works.</p> + +<p>Even when I switch editors (VSCode, Geany, kitty+vim etc.) for a period of time, I find myself always coming back to Sublime. The only reason I try other editors is simply that: to try them. Maybe that’s why these editors don’t click with me. Maybe I’m giving Sublime an unfair advantage since I’m simply “testing” other editors, rather than looking for a solid alternative.</p> + +<p>And don’t get me wrong, I understand <em>why</em> editors like VSCode are extremely popular. VSCode has a massive ecosystem and new plugins are generally developed for that editor before all others. Finding solutions to problems online is very easy, since it is so popular. But best of all - it’s open source<sup id="fnref2"><a href="#fn2" rel="footnote">2</a></sup>.</p> + +<p>So why am I using a <em>non</em>-open source editor? (Spoilers: because it’s a great editor)</p> + +<h2 id="a-proprietary-editor---how-could-you">“A Proprietary Editor - How Could You?!”</h2> + +<p>I know, I know. If you’re familiar with me or the things I write about it must seem odd that I would willingly use proprietary software over open source. This is something I struggle with constantly day-to-day in the realm of “personal tech”. I find with age I become more open-minded to having a diverse range of software and hardware choices. Open source is best in <em>concept</em> but not always best in practice.</p> + +<p>The problem is that Sublime is just such a <em>great</em> editor. I can’t ignore quality and refuse to use good software solely based on it’s licensing. A few personal things I love about Sublime:</p> + <ul> <li>Incredibly fast</li> <li>Handles massive files without breaking a sweat</li> -<li>Minimal resource footprint (ex. uses <0.1% CPU working on huge projects)</li> -<li>Large ecosystem of plugins/themes</li> +<li>Minimal resource footprint (ex. uses <0.1% CPU working on huge projects)</li> +<li>Large ecosystem of plugins/themes</li> <li>No Electron</li> </ul> -<p>Other editors can certainly check off a few of those boxes as well, but you'd be hard-pressed to find one that checks off them all.</p> -<h2>Being a Cheapskate</h2> -<p>I must confess something that I think most Sublime users are guilty of: I've never <a href="https://www.sublimehq.com/store/text">bought a license</a>. I've installed and used Sublime on countless machines, on multiple operating systems from Linux to Windows to MacOS. That <code>Unregistered</code> text in the top right application bar has been with me since the beginning. But that in no longer the case.</p> + +<p>Other editors can certainly check off a few of those boxes as well, but you’d be hard-pressed to find one that checks off them all.</p> + +<h2 id="being-a-cheapskate">Being a Cheapskate</h2> + +<p>I must confess something that I think most Sublime users are guilty of: I’ve never <a href="https://www.sublimehq.com/store/text">bought a license</a>. I’ve installed and used Sublime on countless machines, on multiple operating systems from Linux to Windows to MacOS. That <code>Unregistered</code> text in the top right application bar has been with me since the beginning. But that in no longer the case.</p> + <p><strong>I finally purchased a license.</strong> I bundled it with <a href="https://www.sublimemerge.com/">Sublime Merge</a>, so it ended up costing me $168 USD. When I initially looked at that price tag I must admit I was tempted to close the browser tab and forget the whole thing. But then I realized I have been using this editor <em>free of charge</em> for over 10 years. (Not to mention using Sublime Merge for quite some time as well!)</p> + <p>So I did a little math:</p> -<pre><code>$168 / 10 years = $16.80 + +<pre><code>$168 / 10 years = $16.80 </code></pre> -<p>Looking at it in that perspective, it's actually a great deal. Not to mention they have very respectable terms for their licenses:</p> -<blockquote><p>Personal licenses come with 3 years of updates. After 3 years, you'll be able to continue to use the last version released within 3 years of purchase (in other words, licenses do not expire). Any versions released 3 years or more after the purchase date will require a paid upgrade to use.</p> -</blockquote> -<blockquote><p>Individual licenses are valid for 3 years of updates, but do not expire after 3 years. Only if you wish to use newer versions will an upgrade fee be required. </p> -</blockquote> -<blockquote><p>Licenses are per-user, so you're welcome to use the one license on all computers and operating systems where you are the primary user.</p> + +<p>Looking at it in that perspective, it’s actually a great deal. Not to mention they have very respectable terms for their licenses:</p> + +<blockquote> +<p>Personal licenses come with 3 years of updates. After 3 years, you’ll be able to continue to use the last version released within 3 years of purchase (in other words, licenses do not expire). Any versions released 3 years or more after the purchase date will require a paid upgrade to use.</p> + +<p>Individual licenses are valid for 3 years of updates, but do not expire after 3 years. Only if you wish to use newer versions will an upgrade fee be required. </p> + +<p>Licenses are per-user, so you’re welcome to use the one license on all computers and operating systems where you are the primary user.</p> </blockquote> -<p>I won't copy everything from their main <a href="https://www.sublimehq.com/sales_faq">FAQ page</a> but as you can see it is very reasonable. I also get to feel decent for supporting developers who make very good software.</p> -<h2>Final Notes</h2> -<p>This post is not meant to convince you to switch or anything of that nature. Use what works for you! I just wanted to share my own personal preference when it came to my main text editor. Maybe this will also convince "hardcore" open source people (like me!) to realize it is <em>okay</em> to pay for software sometimes...</p> -<hr /> -<p>I should be very clear about something: this post <em>is not an advertisement</em>. I have not received any money or "kick backs" to write about my happy times with Sublime. This is purely my own opinion that I wanted to share with the internet!</p> -<p>BTW if anyone from SublimeHQ happens to come across this post: PLEASE look into building a "native" version of Sublime Text for FreeBSD/OpenBSD. I (and many others) would be forever grateful!</p> -<p>[^1]: Sublime does mention copyright since 2006...</p> -<p>[^2]: Not the pre-packaged Microsoft version</p> + +<p>I won’t copy everything from their main <a href="https://www.sublimehq.com/sales_faq">FAQ page</a> but as you can see it is very reasonable. I also get to feel decent for supporting developers who make very good software.</p> + +<h2 id="final-notes">Final Notes</h2> + +<p>This post is not meant to convince you to switch or anything of that nature. Use what works for you! I just wanted to share my own personal preference when it came to my main text editor. Maybe this will also convince “hardcore” open source people (like me!) to realize it is <em>okay</em> to pay for software sometimes…</p> + +<hr/> + +<p>I should be very clear about something: this post <em>is not an advertisement</em>. I have not received any money or “kick backs” to write about my happy times with Sublime. This is purely my own opinion that I wanted to share with the internet!</p> + +<p>BTW if anyone from SublimeHQ happens to come across this post: PLEASE look into building a “native” version of Sublime Text for FreeBSD/OpenBSD. I (and many others) would be forever grateful!</p> + +<div class="footnotes"> +<hr/> +<ol> + +<li id="fn1"> +<p>Sublime does mention copyright since 2006… <a href="#fnref1" rev="footnote">↩</a></p> +</li> + +<li id="fn2"> +<p>Not the pre-packaged Microsoft version <a href="#fnref2" rev="footnote">↩</a></p> +</li> + +</ol> +</div> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/New_Domain_and_Code_Forge/index.html b/build/New_Domain_and_Code_Forge/index.html new file mode 100644 index 0000000..baa612c --- /dev/null +++ b/build/New_Domain_and_Code_Forge/index.html @@ -0,0 +1,133 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="icon" href="data:,"> + <title>New Domain and Code Forge</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;}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="new-domain-and-code-forge">New Domain and Code Forge</h1> + +<p>2024-01-29</p> + +<p>As you can clearly see, my site’s domain has switched over to <strong>btxx.org</strong>. This post will go into details about the reason for this URL swap (spoilers: I’m a cheapskate) - but that isn’t all. I have moved my personal git repositories over to my own hosting. I will explain the reasoning for that switch as well.</p> + +<p>But enough introductions, let’s get into it!</p> + +<h2 id="bt.ht-is-no-more">bt.ht is No More</h2> + +<p>I’ve abandoned <code>bt.ht</code>. Well, kind of. That domain doesn’t expire until 2025, which works out nicely since I can keep a complete web forward active for the entire year. This will avoid such a radical switch, similar to what I did years ago with my “uglyduck” domain<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>. Hopefully anyone who follows my dumb ramblings will have more than enough time to become familiar with the new URL.</p> + +<p>For reference, those interested in updating their RSS will need to use the latest URLs: </p> + +<ul> +<li><a href="https://btxx.org/index.rss">RSS</a></li> +<li><a href="https://btxx.org/index.atom">Atom</a></li> +</ul> + +<p>You have roughly a year to do so, since new posts should still automatically appear even with defaulting to the older URL (hooray for 301 redirects!).</p> + +<p>There were two core reasons for switching domains. The first was based off a change in ownership with my previous domain registrar, Gandi. You can read more details <a href="https://news.ycombinator.com/item?id=35080777">here</a>, but they were essentially bought out, then decided to cancel their free email service and raised their prices. Not many registrars support the <code>.ht</code> TLD, so moving to another provider was already proving to be difficult. Once my mind was made up that I didn’t want to support such shady actions from a company, I thought even more about the concept of spending <em>so much</em> on a domain name in the first place. It was a novelty to have such a “short” domain, but that seems silly in hindsight.</p> + +<p>Just take a look at the differences in domain costs and email services below:</p> + +<table> +<thead> +<tr> +<th>URL</th> +<th>Domain/year</th> +<th>Email/year</th> +<th>Total</th> +</tr> +</thead> + +<tbody> +<tr> +<td>bt.ht</td> +<td>$172</td> +<td>$60</td> +<td>$232</td> +</tr> +<tr> +<td>btxx.org</td> +<td>$17</td> +<td>$19</td> +<td>$36</td> +</tr> +</tbody> +</table> + +<p>By making this switch (for both my domain and email service) I would save a yearly total of <strong>$196 USD</strong>. This was a no-brainer. The minute I did the math I thought, “Hell, I’m already moving everything to a different registrar <em>and</em> I need to look for a separate email provider…why not just start fresh with a new, <em>cheaper</em> domain?”</p> + +<p>So that’s what I’ve done.</p> + +<h2 id="my-own-code-forge">My Own Code Forge</h2> + +<p>As some people in the open source community might already be aware, <a href="https://sourcehut.org">sourcehut</a> had a major outage a couple weeks back. It lasted a few days and all services were impacted. This meant that all publicly hosted websites, build processes and <code>git</code> repositories were unavailable. It was no fault of sourcehut of course, they were viciously attacked for no <em>real</em> reason. </p> + +<p>But this outage did get me thinking about what it means to “control” my own code. I always liked the idea of hosting my own git projects but relied on third-party services since they were more convenient. The problem with entrusting anything, not just code storage, to third-party services is lack of oversight. You really have no idea what is happening behind the scenes. You don’t control your own backups. You don’t have the freedom to tweak UI or user flow of your project views (which I understand is certainly an edge-case).</p> + +<p>These thoughts lead me to research some “self-hosted” code forge options. My main contenders were:</p> + +<ul> +<li>GitWeb</li> +<li>cgit</li> +<li>Gitea</li> +</ul> + +<p>I’ll save you the suspense: I went with cgit. Getting GitWeb configured properly was giving me a lot of issues and Gitea seemed overkill for my person needs. I host through NearlyFreeSpeech (running FreeBSD) and they had a decent tutorial for setting cgit up on their servers. I’ve updated my own wiki for those interested in doing something similar: <a href="/wiki/cgit">read the full step-by-step instructions for setting up cgit</a>.</p> + +<p>I still need to go through most of the existing projects on sourcehut and update their READMEs and purge the contents. The last thing I want to do is have users confused about which repo is the “real” one.</p> + +<p>Fore reference the my repos are now located here: <a href="https://git.btxx.org">git.btxx.org</a></p> + +<p>(I plan to place this in the main navigation soon…)</p> + +<h2 id="mirror-mirror-on-the-wall">Mirror, Mirror on the Wall…</h2> + +<p>I’m aware that to have extra protection from “downtime” that I should also mirror my code on separate forges. I plan to do this sometime in the future, but this isn’t a major priority for me currently. When the time comes I’ll be sure to update my repos referring to the mirrors (whatever platform that is I choose).</p> + +<h2 id="room-for-improvement">Room for Improvement</h2> + +<p>My code forge is far from perfect. Mobile view is lacking, there is no dark mode support and things could be slightly more intuitive. But I love it. The beauty of hosting everything on my own is that I can improve these things myself. For now, I’m happy with the outcome!</p> + +<div class="footnotes"> +<hr/> +<ol> + +<li id="fn1"> +<p>Someone oddly picked up that domain and piggybacked off the back-links. They happen to also be a designer…Guess the naming was that cool?  <a href="#fnref1" rev="footnote">↩</a></p> +</li> + +</ol> +</div> +<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://git.sr.ht/~bt/barf">barf</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>
\ No newline at end of file diff --git a/build/OpenBSD_is_a_Cozy_Operating_System/index.html b/build/OpenBSD_is_a_Cozy_Operating_System/index.html new file mode 100644 index 0000000..f29e351 --- /dev/null +++ b/build/OpenBSD_is_a_Cozy_Operating_System/index.html @@ -0,0 +1,69 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="icon" href="data:,"> + <title>OpenBSD is a Cozy Operating System</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;}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="openbsd-is-a-cozy-operating-system">OpenBSD is a Cozy Operating System</h1> + +<p>2024-04-11</p> + +<p>With the recent release of OpenBSD 7.5, I decided to run through my <a href="https://git.btxx.org/open-suck/about/">personal OpenBSD “installer”</a> for laptop/desktop devices. The project is built off of the <code>dwm</code> tiling window manager and only installs a few basic packages. The last time I updated it was with the release of 7.3, so it’s been due for an minor rework.</p> + +<p>While making these minor changes, I remembered how incredibly easy the entire install process for OpenBSD is and how <em>cozy</em> the entire operating system feels. All the core systems just work out the box. Yes, you need to “patch” in WiFi with a firmware update, so you’ll need an Ethernet connection during the initial setup. Yes, the default desktop environment is not intuitive or ideal for newcomers.</p> + +<p>But the positives heavily outweigh the negatives (in my opinion):</p> + +<ul> +<li>Incredibly secure operating system (No <code>xz</code> drama here…)</li> +<li>Detailed documentation. Probably one of the best of any OS</li> +<li>Much smaller codebase and small core team</li> +<li><em>Complete</em> operating system (kernel, userland utilities, libraries, applications combined)</li> +</ul> + +<p>These points might not seem important to others, but they are to me. Maybe you’re possibly interested in checking it out yourself? If you are, then read on…</p> + +<h2 id="try-it-yourself">Try it Yourself!</h2> + +<p>I’ve tried my best to write up a simplified, noob-friendly guide on both setting up the core OpenBSD system, along with installing a simple <code>dwm</code> based desktop environment. These are both focused on personal devices (laptops/computers), so if you’re looking for server-specific setups you won’t find that here!</p> + +<p>You can find both of those wiki-pages below:</p> + +<ul> +<li><a href="https://btxx.org/wiki/openbsd/installation/">Installing OpenBSD</a></li> +<li><a href="https://btxx.org/wiki/openbsd/desktop_environment/">Setting up a Desktop Environment for OpenBSD</a></li> +</ul> + +<p>Some additional reading I highly recommend is: <a href="https://www.c0ffee.net/blog/openbsd-on-a-laptop">c0ffee.net/blog/openbsd-on-a-laptop</a></p> +<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://git.sr.ht/~bt/barf">barf</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>
\ No newline at end of file diff --git a/build/Please_Make_Your_Table_Headings_Sticky/index.html b/build/Please_Make_Your_Table_Headings_Sticky/index.html new file mode 100644 index 0000000..0d6f792 --- /dev/null +++ b/build/Please_Make_Your_Table_Headings_Sticky/index.html @@ -0,0 +1,65 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="icon" href="data:,"> + <title>Please Make Your Table Headings Sticky</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;}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="please-make-your-table-headings-sticky">Please Make Your Table Headings Sticky</h1> + +<p>2024-02-23</p> + +<p>I often stumble upon large data sets or table layouts across the web. When these tables contain hundreds of rows of content, things become problematic once you start to scroll…</p> + +<p><a href="/public/videos/not-fixed-header-tables.mp4">Link to video example of standard table header</a></p> + +<p>Look at that table header disappear! Now, if I scroll all the way down to item #300 (for example) will I remember what each column’s data is associated with? If this is my first time looking at this table - probably not. Luckily we can fix this (no pun intended!) with a tiny amount of CSS.</p> + +<h2 id="sticky-header">Sticky Header</h2> + +<p>Check it out:</p> + +<p><a href="/public/videos/fixed-header-tables.mp4">Link to video example of fixed table header</a></p> + +<p>Pretty awesome, right? It might look like magic but it’s actually very easy to implement. You only need to add 2 CSS properties on your <code>thead</code>:</p> + +<pre><code>position: sticky; +top: 0; +</code></pre> + +<p>That’s it! Best of all, <code>sticky</code> has <a href="https://caniuse.com/?search=sticky">~96% global support</a> which means this isn’t some “bleeding-edge” property and can safely support a ton of browsers. Not to mention the improved experience for your end-users!</p> + +<p>You can view a live demo of this table on the <a href="https://codepen.io/bradleytaunt/pen/bGZyJBj">CodePen example pen</a>.</p> + +<p>If you found this interesting, feel free to check out my other table-focused post: <a href="https://btxx.org/posts/tables/">Making Tables Responsive With Minimal CSS</a></p> +<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://git.sr.ht/~bt/barf">barf</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>
\ No newline at end of file diff --git a/build/Switching_Things_Over_to_ikiwiki/index.html b/build/Switching_Things_Over_to_ikiwiki/index.html index d56a603..771beeb 100644 --- a/build/Switching_Things_Over_to_ikiwiki/index.html +++ b/build/Switching_Things_Over_to_ikiwiki/index.html @@ -1,34 +1,49 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Switching Things Over to ikiwiki</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Switching Things Over to ikiwiki</h1> +<h1 id="switching-things-over-to-ikiwiki">Switching Things Over to ikiwiki</h1> + <p>2023-12-17</p> -<p>I've done it again. My personal website is no longer generated with <a href="https://barf.btxx.org">barf</a> but is instead built on top of ikiwiki. The old RSS feed (<a href="https://btxx.org/atom.xml">btxx.org/atom.xml</a>) still exists but will no longer receive updates. The new feed can be found on the bottom of the homepage (<a href="/index.rss">index.rss</a>)</p> -<h2>Why a Wiki?</h2> -<p>I love the simplicity of a minimal blog, which is why I always gravitated towards purely "static" site builders. Over time though, I found two minor issues that slowly chipped away at me: ease-of-use and flexibility.</p> -<p>I had a vision, back when I began tinkering with my own place on the web, of building out my own personal "resource center" or wiki. Often times through work or personal projects I stumble into little problems that I need to solve. Most times I find a solution and move on with my life. The problem with this approach is <em>lack of documentation</em>.</p> -<p>What if I come across that issue at a later point in time? Will I even remember my old solution? Probably not. So, I've made the switch to a more flexible, personal wiki (which also happens to be a blog!)</p> -<h2>Text Editors, Terminals, and Web UI - Oh My!</h2> + +<p>I’ve done it again. My personal website is no longer generated with <a href="https://barf.btxx.org">barf</a> but is instead built on top of ikiwiki. The old RSS feed (<a href="https://btxx.org/atom.xml">btxx.org/atom.xml</a>) still exists but will no longer receive updates. The new feed can be found on the bottom of the homepage (<a href="/index.rss">index.rss</a>)</p> + +<h2 id="why-a-wiki">Why a Wiki?</h2> + +<p>I love the simplicity of a minimal blog, which is why I always gravitated towards purely “static” site builders. Over time though, I found two minor issues that slowly chipped away at me: ease-of-use and flexibility.</p> + +<p>I had a vision, back when I began tinkering with my own place on the web, of building out my own personal “resource center” or wiki. Often times through work or personal projects I stumble into little problems that I need to solve. Most times I find a solution and move on with my life. The problem with this approach is <em>lack of documentation</em>.</p> + +<p>What if I come across that issue at a later point in time? Will I even remember my old solution? Probably not. So, I’ve made the switch to a more flexible, personal wiki (which also happens to be a blog!)</p> + +<h2 id="text-editors-terminals-and-web-ui---oh-my">Text Editors, Terminals, and Web UI - Oh My!</h2> + <p>ikiwiki comes packed with multiple ways to publish pages and posts. Since it is built with ikiwiki and git version control in mind, you have the ability to push out changes directly to your server similar to that of pre-existing static site generators. It also gives you the choice to <code>ssh</code> directly into your server and publish content from your terminal if you so desire.</p> -<p>Best of all, ikiwiki offers a web UI interface. This is something I have long missed since leaving "dynamic" websites behind.</p> -<h2>But Wait, There's More!</h2> -<p>Did I mention that this site now supports a built-in search form <em>and</em> a comment system? I've been wanting comments or discussions directly on my personal web space for the longest time and now I do! The search function is really an added bonus, mostly for my own personal use to find something I documented quickly.</p> -<h2>Broken Links and Bugs</h2> -<p>I've done my best to properly forward all original posts and pages to their new URLs - but I'm sure some things will be overlooked. So please feel free to reach out and let me know if anything seems broken.</p> -<p>I look forward to growing out this "platform" and seeing how it impacts my workflow writing documentation / blog posts. I hope you'll come along for the ride!</p> + +<p>Best of all, ikiwiki offers a web UI interface. This is something I have long missed since leaving “dynamic” websites behind.</p> + +<h2 id="but-wait-theres-more">But Wait, There’s More!</h2> + +<p>Did I mention that this site now supports a built-in search form <em>and</em> a comment system? I’ve been wanting comments or discussions directly on my personal web space for the longest time and now I do! The search function is really an added bonus, mostly for my own personal use to find something I documented quickly.</p> + +<h2 id="broken-links-and-bugs">Broken Links and Bugs</h2> + +<p>I’ve done my best to properly forward all original posts and pages to their new URLs - but I’m sure some things will be overlooked. So please feel free to reach out and let me know if anything seems broken.</p> + +<p>I look forward to growing out this “platform” and seeing how it impacts my workflow writing documentation / blog posts. I hope you’ll come along for the ride!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/Website_Backups_with_Apple_iCloud/index.html b/build/Website_Backups_with_Apple_iCloud/index.html new file mode 100644 index 0000000..b236264 --- /dev/null +++ b/build/Website_Backups_with_Apple_iCloud/index.html @@ -0,0 +1,67 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="icon" href="data:,"> + <title>Website Backups with Apple iCloud</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;}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="website-backups-with-apple-icloud">Website Backups with Apple iCloud</h1> + +<p>2024-02-16</p> + +<p>My main work machine, an M2 MacBook Air, meshes really well with my iPhone SE (they are in the same ecosystem after all - duh!). Since both of these devices are Apple products, it makes sense that I pay for the optional iCloud service for extra storage. 50GB to be exact. I only need to bare minimum which costs just $1.68 a month, making this storage option cheaper than most cups of coffee these days.</p> + +<p>Recently I’ve been using iCloud as my “middle-man” backup system. I still have local, offline storage for most personal data but having additional off-site backups is never a bad thing. I make things easier for myself by taking advantage of <code>rsync</code>. You’ll need to make sure you have that program installed before trying this yourself:</p> + +<pre><code># This assumes you have homebrew installed first +brew install rsync +</code></pre> + +<p>Then, whenever I feel like backing up an existing project or website I simply run:</p> + +<pre><code>rsync -a user_name@ssh.webserver.domain:/home/var/www/ /Users/username/Library/Mobile\ Documents/com\~apple\~CloudDocs/Backups/site-backup +</code></pre> + +<blockquote> +<p>Note: The <code>-a</code> option tells <code>rsync</code> to sync directories recursively, transfer special and block devices, preserve symbolic links, modification times, groups, ownership, and permissions.</p> +</blockquote> + +<p>The beautiful magic of <code>rsync</code>! Obviously, you’d want to properly name your directories (ie. <code>/Backups/site-backup</code>) for a cleaner structure and ensure that your iCloud directory is set correctly. (remember to read code before just copy-pasting!). With this approach you can backup entire server directories or be specific with each individual project folder. I would also recommend setting up some alias in your <code>.bashrc</code> or <code>.zshrc</code> etc. to make things more streamlined when running backups manually:</p> + +<pre><code>alias site-backup="rsync -a user_name@ssh.webserver.domain:/home/var/www/ /Users/username/Library/Mobile\ Documents/com\~apple\~CloudDocs/Backups/site-backup" +# Then you simply run the following for a manual backup: +site-backup +</code></pre> + +<p>You can take this further by automating things via cron jobs, but for my use case that is a little overkill. Hopefully this helps anyone looking for a quick and dirty backup system, especially one that can piggyback of your existing iCloud that you might be paying for already.</p> +<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://git.sr.ht/~bt/barf">barf</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>
\ No newline at end of file diff --git a/build/adguard/index.html b/build/adguard/index.html index 76230c3..ad6aaf4 100644 --- a/build/adguard/index.html +++ b/build/adguard/index.html @@ -1,23 +1,28 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Setting Up AdGuard Home with Eero</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Setting Up AdGuard Home with Eero</h1> +<h1 id="setting-up-adguard-home-with-eero">Setting Up AdGuard Home with Eero</h1> + <p>2022-11-04</p> + <p>Eariler this year I posted <a href="/eero">detailed instructions on setting up Pi-Hole with Eero</a> and it seemed to help out a few people having troubles. With AdGuard Home recently popping up on the <a href="https://news.ycombinator.com/item?id=33387678">frontpage of HackerNews</a>, I thought now would be a great time to post instructions of setting up <em>that</em> service alongside Eero devices.</p> -<h2>What You'll Need</h2> + +<h2 id="what-youll-need">What You’ll Need</h2> + <ol> <li>Raspberry Pi device (I recommend the Pi Zero for simplicity and low cost)</li> <li>microSD card</li> @@ -25,39 +30,63 @@ <li>micro USB to ethernet adapter (check your local Amazon)</li> <li>Patience!</li> </ol> -<h2>Setting Up the Raspberry Pi</h2> + +<h2 id="setting-up-the-raspberry-pi">Setting Up the Raspberry Pi</h2> + <p>The first thing we need to do is flash Raspberry Pi <strong>Lite</strong> onto our SD card. Open Raspberry Pi Imager, select the <strong>Lite</strong> version of the OS and your respective media (the SD card):</p> + <p><img src="/public/images/rpi-lite-os.webp" alt="Raspberry Pi Lite" /></p> -<p>Don't flash anything just yet! Be sure to use the gear icon and edit the settings. Set a custom hostname, enable <code>ssh</code> and setup a proper user:</p> + +<p>Don’t flash anything just yet! Be sure to use the gear icon and edit the settings. Set a custom hostname, enable <code>ssh</code> and setup a proper user:</p> + <p><img src="/public/images/rpi-adguard-1.webp" alt="Imager settings" /></p> -<h2>Plug it in and Boot!</h2> -<p>Put the SD card into your Pi, connect power and ethernet. Give it a bit of time to boot up. Once you see a nice solid green LED, go back to your local computer's terminal and enter the following command:</p> + +<h2 id="plug-it-in-and-boot">Plug it in and Boot!</h2> + +<p>Put the SD card into your Pi, connect power and ethernet. Give it a bit of time to boot up. Once you see a nice solid green LED, go back to your local computer’s terminal and enter the following command:</p> + <pre><code>ssh piguard@piguard.local </code></pre> + <p>If everything was set up properly you will be asked to trust this device. Next, you will be prompted to enter the device password you setup.</p> -<p>Once you are connected directly to the Pi, it's best to check for updates:</p> + +<p>Once you are connected directly to the Pi, it’s best to check for updates:</p> + <pre><code>sudo apt update </code></pre> -<p>...and if updates are in fact available, install them via:</p> + +<p>…and if updates are in fact available, install them via:</p> + <pre><code>sudo apt upgrade </code></pre> -<h2>Installing AdGuard Home</h2> + +<h2 id="installing-adguard-home">Installing AdGuard Home</h2> + <p>Simply run the automated installer:</p> -<pre><code>curl -s -S -L https://raw.githubusercontent.com/AdguardTeam/AdGuardHome/master/scripts/install.sh | sh -s -- -v + +<pre><code>curl -s -S -L https://raw.githubusercontent.com/AdguardTeam/AdGuardHome/master/scripts/install.sh | sh -s -- -v </code></pre> -<p>Follow the instructions and you'll be setup in no time! To view your AdGuard dashboard at any time, you can now simply navigate to <code>piguard.local</code>.</p> -<p>If you run into any issues, I strongly suggest <a href="https://github.com/AdguardTeam/AdGuardHome#getting-started">reading through the "Getting Started" guide</a>.</p> -<h2>Configuring the Eero App</h2> + +<p>Follow the instructions and you’ll be setup in no time! To view your AdGuard dashboard at any time, you can now simply navigate to <code>piguard.local</code>.</p> + +<p>If you run into any issues, I strongly suggest <a href="https://github.com/AdguardTeam/AdGuardHome#getting-started">reading through the “Getting Started” guide</a>.</p> + +<h2 id="configuring-the-eero-app">Configuring the Eero App</h2> + <p>Once your AdGuard Home server is installed and running, you can finally point your Eero network at it.</p> + <ol> <li>Open the Eero app (iOS or Android)</li> -<li>Navigate to <strong>Settings</strong> > <strong>Network Settings</strong> > <strong>DNS</strong></li> -<li>Select <strong>Customized DNS</strong> and enter both your saved IPv4 / IPv6 values (These can be found under the <code>Setup Guide</code> tab in the main AdGuard Dashboard)</li> +<li>Navigate to <strong>Settings</strong> > <strong>Network Settings</strong> > <strong>DNS</strong></li> +<li>Select <strong>Customized DNS</strong> and enter both your saved IPv4 / IPv6 values (These can be found under the <code>Setup Guide</code> tab in the main AdGuard Dashboard)</li> <li>Eero will prompt you to reboot your network - do it</li> </ol> + <p>After the system reboots everything <em>should</em> be working as intended!</p> -<h2>Closing Thoughts</h2> -<p>I've personally switched over from Pi-Hole to AdGuard Home - it just feels more robust and the UI is significantly cleaner. Hopefully this helps others trying to do the same!</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>I’ve personally switched over from Pi-Hole to AdGuard Home - it just feels more robust and the UI is significantly cleaner. Hopefully this helps others trying to do the same!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/af/index.html b/build/af/index.html index 3406140..1e0f824 100644 --- a/build/af/index.html +++ b/build/af/index.html @@ -1,40 +1,54 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Avoiding Featurism</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Avoiding Featurism</h1> +<h1 id="avoiding-featurism">Avoiding Featurism</h1> + <p>2022-10-14</p> -<p>I rather enjoy the term "featurism". I came across this term while reading the wonderful article <a href="https://www.complang.tuwien.ac.at/anton/why-ancient-browsers.html">Why I don't use Netscape</a>, which the author credits to Bernd Paysan. Although it sums up the current "digital product" industry quite well the more specific terminology, <em>creeping featurism</em>, works better:</p> -<blockquote><p><strong>creeping featurism</strong> (<em>noun</em>)</p> + +<p>I rather enjoy the term “featurism”. I came across this term while reading the wonderful article <a href="https://www.complang.tuwien.ac.at/anton/why-ancient-browsers.html">Why I don’t use Netscape</a>, which the author credits to Bernd Paysan. Although it sums up the current “digital product” industry quite well the more specific terminology, <em>creeping featurism</em>, works better:</p> + +<blockquote> +<p><strong>creeping featurism</strong> (<em>noun</em>)</p> + <p>A condition in which one or more people, often in the form of a committee, progressively increase the scope and complexity of a project until the project is deemed infeasible and subsequently cancelled to the detriment of all involved.</p> </blockquote> -<p>Throughout my career of designing and developing software I have run into this exact issue far too often. The major issue with getting sucked into a black-hole of "featurism" is there is no single person to blame. It probably seems easy to place all the responsibility on PMs or team leaders, but even <em>if</em> they are the ones adding excessive complexity to a given project, it is the role of developers and designers to speak up. It requires a team effort. Therefore, the <em>whole team</em> needs to be on-guard to avoid it.</p> -<h3>Simple Guidelines</h3> -<p>These "tips" are not perfect, nor will they work for every work environment. Hopefully they can at least be used as basic guidelines and expanded upon from there.</p> + +<p>Throughout my career of designing and developing software I have run into this exact issue far too often. The major issue with getting sucked into a black-hole of “featurism” is there is no single person to blame. It probably seems easy to place all the responsibility on PMs or team leaders, but even <em>if</em> they are the ones adding excessive complexity to a given project, it is the role of developers and designers to speak up. It requires a team effort. Therefore, the <em>whole team</em> needs to be on-guard to avoid it.</p> + +<h3 id="simple-guidelines">Simple Guidelines</h3> + +<p>These “tips” are not perfect, nor will they work for every work environment. Hopefully they can at least be used as basic guidelines and expanded upon from there.</p> + <ul> -<li>Explore the feature's <em>benefit</em> to the product. You need to confirm that this addition will be a net-positive for both customers and your bottom-line.</li> +<li>Explore the feature’s <em>benefit</em> to the product. You need to confirm that this addition will be a net-positive for both customers and your bottom-line.</li> <li>All team members assigned to a feature need to scope it out. Far too often I see feature sets that require design input being estimated solely by developers and vice versa.</li> <li>Radically limit the scope of each individual task[^1]. Each task should be clear-cut, bite-sized and look almost trivial.</li> <li>Lock-in tickets. Once they are agreed upon they <strong>cannot</strong> be altered[^2]. Anything that absolutely <em>needs</em> to be added should become a future ticket itself.</li> -<li>Follow-up with feature reviews. When a sprint or milestone is reached, it is important to reflect on what worked and what didn't. Call out any instances where the team steered away from the guidelines above.</li> +<li>Follow-up with feature reviews. When a sprint or milestone is reached, it is important to reflect on what worked and what didn’t. Call out any instances where the team steered away from the guidelines above.</li> </ul> -<p>That's it. Just a nice, simple baseline to branch off from to avoid "featurism". Some items listed won't make sense for certain teams and that's okay. If you take the time to at least reflect on your feature workflow, I guarantee you'll find areas to improve.</p> + +<p>That’s it. Just a nice, simple baseline to branch off from to avoid “featurism”. Some items listed won’t make sense for certain teams and that’s okay. If you take the time to at least reflect on your feature workflow, I guarantee you’ll find areas to improve.</p> + <p>Creeping featurism can kill your product and the morale of your team. Avoid it like the plague!</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>This is easier said than done. Normally you will need to have developed some form of "point system" internally, so you know how to effectively divide features.</li> +<li>This is easier said than done. Normally you will need to have developed some form of “point system” internally, so you know how to effectively divide features.</li> <li><em>Taking away</em> complexity, making changes that do not impact workload or reducing the ticket is fine - within reason.</li> </ol> <footer role="contentinfo"> diff --git a/build/alpine/index.html b/build/alpine/index.html index 44d5610..7384b45 100644 --- a/build/alpine/index.html +++ b/build/alpine/index.html @@ -1,44 +1,62 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Adventures in Creating a Minimal Alpine Linux Installer</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Adventures in Creating a Minimal Alpine Linux Installer</h1> +<h1 id="adventures-in-creating-a-minimal-alpine-linux-installer">Adventures in Creating a Minimal Alpine Linux Installer</h1> + <p>2022-12-08</p> -<h2>Introduction</h2> -<p>I've made the switch to Alpine Linux as my main laptop/desktop hybrid -workstation and I love it - warts and all. This post will follow my process building my Alpine Linux "installer" I used for this workstation, along with covering some bugs I found during my adventure.</p> + +<h2 id="introduction">Introduction</h2> + +<p>I’ve made the switch to Alpine Linux as my main laptop/desktop hybrid +workstation and I love it - warts and all. This post will follow my process building my Alpine Linux “installer” I used for this workstation, along with covering some bugs I found during my adventure.</p> + <p>My main goals when starting this project were to have a daily driver that was:</p> + <ul> -<li>free of any "real" desktop environment</li> +<li>free of any “real” desktop environment</li> <li>Wayland based with SwayWM</li> <li>as lightweight as possible</li> </ul> + <p>Overall, I think I achieved what I was aiming for. After logging in (there is no login manager, you do it directly through the boot terminal) you will see:</p> + <p><img src="/public/images/alpine-1.jpg" alt="" /></p> + <p>(You can view the <a href="/public/images/alpine-1.jpg">full res image here</a>)</p> -<p>For reference this is running on a X260 ThinkPad with 16GB RAM, docked and connected to a 27" 4K monitor.</p> -<blockquote><p>If you'd prefer to just go straight to the installer, feel free to jump over to the project repo: <a href="https://git.sr.ht/~bt/alpine-linux-setup">https://git.sr.ht/~bt/alpine-linux-setup</a></p> + +<p>For reference this is running on a X260 ThinkPad with 16GB RAM, docked and connected to a 27” 4K monitor.</p> + +<blockquote> +<p>If you’d prefer to just go straight to the installer, feel free to jump over to the project repo: <a href="https://git.sr.ht/~bt/alpine-linux-setup">https://git.sr.ht/~bt/alpine-linux-setup</a></p> </blockquote> -<h2>Getting Started</h2> + +<h2 id="getting-started">Getting Started</h2> + <p>My main reasoning for switching away from my previous setup (Garuda Linux running Sway) to Alpine was two fold:</p> + <ol> <li>I wanted a more lightweight, less resource hungry system</li> -<li>I wanted to go as "full" Wayland as possible</li> +<li>I wanted to go as “full” Wayland as possible</li> </ol> -<h3>Benchmarks Comparisons</h3> -<p>I should mention that these are not official "benchmark" applications or proper testing. I merely reproduced the same tasks, using the same applications, for the same amount of time and compared the usage. Just keep that in mind!</p> + +<h3 id="benchmarks-comparisons">Benchmarks Comparisons</h3> + +<p>I should mention that these are not official “benchmark” applications or proper testing. I merely reproduced the same tasks, using the same applications, for the same amount of time and compared the usage. Just keep that in mind!</p> + <ul> <li><p><strong>Garuda Linux</strong></p> @@ -46,98 +64,130 @@ workstation and I love it - warts and all. This post will follow my process buil <li>SwayWM</li> <li>Firefox: 9 tabs (Figma included)</li> <li>qutebrowser: 7 tabs</li> -<li>aerc: open/running</li> +<li>aerc: open/running</li> <li>tut: open-running</li> <li>Sublime Text: single project open</li> <li><strong>Memory usage (range): 6.0-7.2 GB</strong></li> -</ul> -</li> +</ul></li> <li><p><strong>Alpine Linux</strong></p> <ul> <li>SwayWM</li> <li>Firefox: 9 tabs (Figma included)</li> <li>qutebrowser: 7 tabs</li> -<li>aerc: open/running</li> +<li>aerc: open/running</li> <li>tut: open-running</li> <li><strong>Memory usage (range): 1.0-3.5 GB</strong></li> +</ul></li> </ul> -</li> -</ul> + <p>Switching over has basically cut my system memory usage <strong>in half</strong>. That ended up being a much better improvement than I predicted. These are beyond just numbers too - the system <em>feels</em> snappier.</p> + <p>So, from a speed and usability stand point I considered this a success already.</p> -<h2>Crashes & Roadblocks</h2> -<p>Of course, things didn't run 100% flawlessly out-of-the-box. There were some pretty annoying <strong>crashes</strong> and issues.</p> -<h3>Greetings, tty</h3> + +<h2 id="crashes-roadblocks">Crashes & Roadblocks</h2> + +<p>Of course, things didn’t run 100% flawlessly out-of-the-box. There were some pretty annoying <strong>crashes</strong> and issues.</p> + +<h3 id="greetings-tty">Greetings, tty</h3> + <p>After installing <code>tut</code> I started walking through its guided setup. Once it prompted me to login via browser in order to authenticate, I clicked the link provided in the terminal. I was immediately thrown out of my session and into <code>tty</code>. Awesome.</p> -<p>I'll save you both the headache and large amount of time I wasted on this silly "bug" and just say it had to do with my user settings trying to launch "Chromium" as my default browser. I normally set qutebrowser as much default, so this was a change I needed to make anyway.</p> -<p>I put the following in my <code>/etc/xdg/mimeapps.list</code> (which is included by default with the installer)</p> + +<p>I’ll save you both the headache and large amount of time I wasted on this silly “bug” and just say it had to do with my user settings trying to launch “Chromium” as my default browser. I normally set qutebrowser as much default, so this was a change I needed to make anyway.</p> + +<p>I put the following in my <code>/etc/xdg/mimeapps.list</code> (which is included by default with the installer)</p> + <pre><code>[Default Applications] -x-scheme-handler/http=org.qutebrowser.qutebrowser.desktop -x-scheme-handler/https=org.qutebrowser.qutebrowser.desktop -x-scheme-handler/ftp=org.qutebrowser.qutebrowser.desktop -x-scheme-handler/chrome=org.qutebrowser.qutebrowser.desktop -text/html=org.qutebrowser.qutebrowser.desktop -application/x-extension-htm=org.qutebrowser.qutebrowser.desktop -application/x-extension-html=org.qutebrowser.qutebrowser.desktop -application/x-extension-shtml=org.qutebrowser.qutebrowser.desktop -application/xhtml+xml=org.qutebrowser.qutebrowser.desktop -application/x-extension-xhtml=org.qutebrowser.qutebrowser.desktop -application/x-extension-xht=org.qutebrowser.qutebrowser.desktop -image/bmp=feh.desktop -image/gif=feh.desktop -image/jpeg=feh.desktop -image/jpg=feh.desktop -image/png=feh.desktop -image/tiff=feh.desktop -image/x-bmp=feh.desktop -image/x-pcx=feh.desktop -image/x-tga=feh.desktop -image/x-portable-pixmap=feh.desktop -image/x-portable-bitmap=feh.desktop -image/x-targa=feh.desktop -image/x-portable-greymap=feh.desktop -application/pcx=feh.desktop -image/svg+xml=feh.desktop -image/svg-xml=feh.desktop +x-scheme-handler/http=org.qutebrowser.qutebrowser.desktop +x-scheme-handler/https=org.qutebrowser.qutebrowser.desktop +x-scheme-handler/ftp=org.qutebrowser.qutebrowser.desktop +x-scheme-handler/chrome=org.qutebrowser.qutebrowser.desktop +text/html=org.qutebrowser.qutebrowser.desktop +application/x-extension-htm=org.qutebrowser.qutebrowser.desktop +application/x-extension-html=org.qutebrowser.qutebrowser.desktop +application/x-extension-shtml=org.qutebrowser.qutebrowser.desktop +application/xhtml+xml=org.qutebrowser.qutebrowser.desktop +application/x-extension-xhtml=org.qutebrowser.qutebrowser.desktop +application/x-extension-xht=org.qutebrowser.qutebrowser.desktop +image/bmp=feh.desktop +image/gif=feh.desktop +image/jpeg=feh.desktop +image/jpg=feh.desktop +image/png=feh.desktop +image/tiff=feh.desktop +image/x-bmp=feh.desktop +image/x-pcx=feh.desktop +image/x-tga=feh.desktop +image/x-portable-pixmap=feh.desktop +image/x-portable-bitmap=feh.desktop +image/x-targa=feh.desktop +image/x-portable-greymap=feh.desktop +application/pcx=feh.desktop +image/svg+xml=feh.desktop +image/svg-xml=feh.desktop </code></pre> -<p>You might have also noticed that I use <code>feh</code> as my default image viewer as well. That's just my personal preference, feel free to switch that out as you see fit.</p> + +<p>You might have also noticed that I use <code>feh</code> as my default image viewer as well. That’s just my personal preference, feel free to switch that out as you see fit.</p> + <p><strong>Sidenote:</strong> Chromium now runs perfectly fine since the original crashes. I have no clue how or why. Wayland black magic, I assume? Maybe I installed a package that helped or an update occurred. <em>Shrug</em></p> -<h3>Screen Sharing</h3> -<p>This has been a complete failure for me. I've tried both the Chromium and Firefox <a href="https://lr.vern.cc/r/swaywm/comments/l4e55v/guide_how_to_screenshare_from_chromiumfirefox/">implementations of these "hacks"</a> but neither work. For now I will fallback to my Garuda Linux OS boot and share my screen there. It's a silly workaround but I hardly ever need to "show my screen" in any capacity as is.</p> + +<h3 id="screen-sharing">Screen Sharing</h3> + +<p>This has been a complete failure for me. I’ve tried both the Chromium and Firefox <a href="https://lr.vern.cc/r/swaywm/comments/l4e55v/guide_how_to_screenshare_from_chromiumfirefox/">implementations of these “hacks”</a> but neither work. For now I will fallback to my Garuda Linux OS boot and share my screen there. It’s a silly workaround but I hardly ever need to “show my screen” in any capacity as is.</p> + <p>I can live without this for now. (Please <a href="https://lists.sr.ht/~bt/public-inbox">leave a message in my personal inbox</a> if you know of another workaround for this!)</p> -<h2>Some Minor Tweaks</h2> -<p>Some of these "hacks" or tweaks I had to implement might help others who run into similar issues when setting up their own Alpine desktops.</p> -<h3>aerc-mail</h3> -<p>It is important to install <code>gawk</code> since <code>awk</code> isn't "real" on Alpine. Once you have that on you system <code>aerc</code> will render emails out-of-the-box.[^1]</p> + +<h2 id="some-minor-tweaks">Some Minor Tweaks</h2> + +<p>Some of these “hacks” or tweaks I had to implement might help others who run into similar issues when setting up their own Alpine desktops.</p> + +<h3 id="aerc-mail">aerc-mail</h3> + +<p>It is important to install <code>gawk</code> since <code>awk</code> isn’t “real” on Alpine. Once you have that on you system <code>aerc</code> will render emails out-of-the-box.[^1]</p> + <pre><code>apk add gawk </code></pre> -<h3>Sublime Text</h3> -<p>Sublime Text requires flatpak, so if that isn't your <em>thing</em> then you're better off snagging a different editor. I've tried multiple times throughout my career to use an alternate editor (preferably 100% open source) but keep finding myself returning to Sublime. Maybe one day...</p> + +<h3 id="sublime-text">Sublime Text</h3> + +<p>Sublime Text requires flatpak, so if that isn’t your <em>thing</em> then you’re better off snagging a different editor. I’ve tried multiple times throughout my career to use an alternate editor (preferably 100% open source) but keep finding myself returning to Sublime. Maybe one day…</p> + <pre><code>apk add flatpak -flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo +flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo </code></pre> + <p>Then reboot your machine for the changes to take. Login again and run:</p> + <pre><code>flatpak install flathub com.sublimetext.three </code></pre> + <p>FYI: You <em>might</em> need to run the above commands under <code>sudo</code> if your current user lacks proper permissions.</p> -<h3>Cursors</h3> + +<h3 id="cursors">Cursors</h3> + <p>This was an odd edge case. For the most part, the default system cursors worked out of the box. Then I installed Firefox. That caused me to go down a rabbit-hole of (still open) tickets referencing poor cursor rendering for Wayland Firefox. Apparently some users even have their cursors disappear completely!</p> + <p>Not to worry though - there is an easy fix!</p> + <ol> <li>Install <a href="https://github.com/keeferrourke/capitaine-cursors">capitaine cursors</a>: - apk add capitaine-cursors</li> +apk add capitaine-cursors</li> <li>Make a new directory: - mkdir -p ~/.icons/capitaine-cursors</li> +mkdir -p ~/.icons/capitaine-cursors</li> <li>Copy the files over: - sudo cp -r /usr/share/icons/capitaine-cursors-dark ~/.icons/capitaine-cursors</li> +sudo cp -r /usr/share/icons/capitaine-cursors-dark ~/.icons/capitaine-cursors</li> <li>The make your cursor changes using <code>gnome-tweaks</code></li> <li>Profit!</li> </ol> -<h2>Closing Thoughts</h2> -<p>Overall I'm decently satisfied with my "installer". I've included <em>just enough</em> packages to hit the ground running when using this on new hardware or even needing to recover existing devices. This project certainly won't cover the needs of all users, but my hope is that others can always fork their own and give it a spin! (Please do report any bugs or issues as you come across them!)</p> -<p>Alpine Linux can be more than just a "server distro". My daily driver proves it!</p> -<h2>Refs</h2> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>Overall I’m decently satisfied with my “installer”. I’ve included <em>just enough</em> packages to hit the ground running when using this on new hardware or even needing to recover existing devices. This project certainly won’t cover the needs of all users, but my hope is that others can always fork their own and give it a spin! (Please do report any bugs or issues as you come across them!)</p> + +<p>Alpine Linux can be more than just a “server distro”. My daily driver proves it!</p> + +<h2 id="refs">Refs</h2> + <ol> <li>This is now included in my official installer script, but I originally had to install this manually.</li> </ol> diff --git a/build/animated-card-tiles/index.html b/build/animated-card-tiles/index.html index 0ef7448..699610d 100644 --- a/build/animated-card-tiles/index.html +++ b/build/animated-card-tiles/index.html @@ -1,54 +1,61 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Animated Card Tiles</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Animated Card Tiles</h1> +<h1 id="animated-card-tiles">Animated Card Tiles</h1> + <p>2019-02-27</p> -<p><em>The design trend of using "cards" or "tiles" to display interactive</em> sections/article headings in an app or website remains a popular choice among designers. So, let's build a set of animated cards with only HTML & CSS. </p> -<h2>What we will be building (live demo)</h2> + +<p><em>The design trend of using “cards” or “tiles” to display interactive</em> sections/article headings in an app or website remains a popular choice among designers. So, let’s build a set of animated cards with only HTML & CSS. </p> + +<h2 id="what-we-will-be-building-live-demo">What we will be building (live demo)</h2> + <p>This is the set of animated card tiles we will be creating:</p> + <p><em>(try hovering)</em></p> + <p><a href="https://codepen.io/bradleytaunt/pen/rNjBpob">Live CodePen</a></p> -<h2>The HTML</h2> + +<h2 id="the-html">The HTML</h2> + <p>For the base skeleton of these cards we only need:</p> + <ul> -<li>a <code>flexbox</code> main container to hold everything</li> -<li>a <code>.card-tile</code> parent element</li> -<li>the inner child element that will display on <code>:hover</code></li> -<li>proper <code>h4</code> and <code>p</code> tags inside that child element</li> +<li><p>a <code>flexbox</code> main container to hold everything</p></li> +<li><p>a <code>.card-tile</code> parent element</p></li> +<li><p>the inner child element that will display on <code>:hover</code></p></li> +<li><p>proper <code>h4</code> and <code>p</code> tags inside that child element</p></li> </ul> -<pre><code><div class="card-tiles-container"> - <div class="card-tile"> - <div class="text-content"> - <h4>Card Title</h4> - <p>Inner card content text</p> - </div> - </div> -</div> -</code></pre> -<p>That's all that is needed - for now. We will be returning to this code shortly to add some extra classes to make our lives easier.</p> -<h2>The CSS</h2> + +<p>That’s all that is needed - for now. We will be returning to this code shortly to add some extra classes to make our lives easier.</p> + +<h2 id="the-css">The CSS</h2> + <p>First we set the main housing container to use <code>flex</code> so we save ourselves the headache of aligning all the cards in a nice row:</p> + <pre><code>.card-tiles-container { display: flex; font-size: 14px; margin: 20px 0; } </code></pre> + <p>Next we create the default styling for our tile cards and set the <code>transform</code> property to scale the card on <code>:hover</code>:</p> -<pre><code>/* Default card tile styles */ + +<pre><code>/* Default card tile styles */ .card-tile { border: 1px solid; border-radius: 10px; @@ -63,11 +70,16 @@ transform: scale(1.1); } </code></pre> -<h3>Where are my cards?!</h3> -<p>Don't panic if you can't <em>visually</em> see any card elements in your demo yet - that's to be expected. We will be styling these card elements momentarily.</p> -<p>Our next step is to hide the default inner <code>text-content</code> and only show it on hover. We achieve this by setting it's position to <code>absolute</code>, placing it's opacity at 0 and pushing it's z-index back to -1.</p> + +<h3 id="where-are-my-cards">Where are my cards?!</h3> + +<p>Don’t panic if you can’t <em>visually</em> see any card elements in your demo yet - that’s to be expected. We will be styling these card elements momentarily.</p> + +<p>Our next step is to hide the default inner <code>text-content</code> and only show it on hover. We achieve this by setting it’s position to <code>absolute</code>, placing it’s opacity at 0 and pushing it’s z-index back to -1.</p> + <p>When the user hovers over a main card tile, we change the <code>text-content</code> values of both the opacity and z-index to 1.</p> -<pre><code>/* Card tile text content */ + +<pre><code>/* Card tile text content */ .card-tile .text-content { background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%); bottom: 10px; @@ -88,7 +100,9 @@ z-index: 1; } </code></pre> + <p>Finally we add some minor styling for the inner header and paragraph tags:</p> + <pre><code>.card-tile .text-content h4, .card-tile .text-content p { color: #fff; @@ -96,8 +110,11 @@ text-shadow: 1px 1px 1px rgba(0,0,0,0.6); } </code></pre> -<h3>Don't forget mobile</h3> + +<h3 id="dont-forget-mobile">Don’t forget mobile</h3> + <p>We want out UI to stack the cards if users are viewing them on smaller devices:</p> + <pre><code>@media(max-width: 600px) { .card-tiles-container { flex-direction: column; @@ -108,34 +125,39 @@ } } </code></pre> -<h2>Customizing each card</h2> -<p>Remember how I mentioned that we would be adding more classes to the original HTML? Now is the time. We will be including a simple class on each card tile to provide it's own custom coloring:</p> -<pre><code><div class="card-tiles-container"> - <!-- `Blue` class --> - <div class="card-tile blue"> - <div class="text-content"> - <h4>Card Title</h4> - <p>Inner card content text</p> - </div> - </div> - <!-- `Orange` class --> - <div class="card-tile orange"> - <div class="text-content"> - <h4>Card Title</h4> - <p>Inner card content text</p> - </div> - </div> - <!-- `Green` class --> - <div class="card-tile green"> - <div class="text-content"> - <h4>Card Title</h4> - <p>Inner card content text</p> - </div> - </div> -</div> + +<h2 id="customizing-each-card">Customizing each card</h2> + +<p>Remember how I mentioned that we would be adding more classes to the original HTML? Now is the time. We will be including a simple class on each card tile to provide it’s own custom coloring:</p> + +<pre><code><div class="card-tiles-container"> + <!-- `Blue` class --> + <div class="card-tile blue"> + <div class="text-content"> + <h4>Card Title</h4> + <p>Inner card content text</p> + </div> + </div> + <!-- `Orange` class --> + <div class="card-tile orange"> + <div class="text-content"> + <h4>Card Title</h4> + <p>Inner card content text</p> + </div> + </div> + <!-- `Green` class --> + <div class="card-tile green"> + <div class="text-content"> + <h4>Card Title</h4> + <p>Inner card content text</p> + </div> + </div> +</div> </code></pre> + <p>And these color classes correlate to some new CSS styling:</p> -<pre><code>/* Blue Card */ + +<pre><code>/* Blue Card */ .card-tile.blue { background-color: #0093E9; background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%); @@ -147,8 +169,8 @@ box-shadow: 0 8px 18px rgba(128,208,199,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -</code></pre> -<pre><code>/* Orange Card */ + +/* Orange Card */ .card-tile.orange { background-color: #FAD961; background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%); @@ -160,8 +182,8 @@ box-shadow: 0 8px 18px rgba(247,107,28,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -</code></pre> -<pre><code>/* Green Card */ + +/* Green Card */ .card-tile.green { background-color: #096e40; background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%); @@ -174,52 +196,63 @@ inset 0 2px 1px rgba(255,255,255,0.6); } </code></pre> -<h3>Adding transitions</h3> -<p>We can now see the actual cards visually and have the ability to interact with them, but there is a problem - they don't animate.</p> + +<h3 id="adding-transitions">Adding transitions</h3> + +<p>We can now see the actual cards visually and have the ability to interact with them, but there is a problem - they don’t animate.</p> + <p>Lucky we can target all elements we wish to animate with the <code>transition</code> property, like so:</p> -<pre><code>/* Shared transitions */ + +<pre><code>/* Shared transitions */ .card-tile, .card-tile .text-content { transition: .3s ease all; } </code></pre> + <p>Done and done.</p> -<h2>The final code</h2> + +<h2 id="the-final-code">The final code</h2> + <p>To make things easier for reference, I have included all the <code>html</code> and <code>css</code> below. Please feel free to use these cards anywhere you like and change them as you see fit!</p> -<h3>HTML</h3> -<pre><code><div class="card-tiles-container"> - <div class="card-tile blue"> - <div class="text-content"> - <h4>Card Title</h4> - <p>Inner card content text</p> - </div> - </div> - <div class="card-tile orange"> - <div class="text-content"> - <h4>Card Title</h4> - <p>Inner card content text</p> - </div> - </div> - <div class="card-tile green"> - <div class="text-content"> - <h4>Card Title</h4> - <p>Inner card content text</p> - </div> - </div> -</div> + +<h3 id="html">HTML</h3> + +<pre><code><div class="card-tiles-container"> + <div class="card-tile blue"> + <div class="text-content"> + <h4>Card Title</h4> + <p>Inner card content text</p> + </div> + </div> + <div class="card-tile orange"> + <div class="text-content"> + <h4>Card Title</h4> + <p>Inner card content text</p> + </div> + </div> + <div class="card-tile green"> + <div class="text-content"> + <h4>Card Title</h4> + <p>Inner card content text</p> + </div> + </div> +</div> </code></pre> -<h3>CSS</h3> + +<h3 id="css">CSS</h3> + <pre><code>.card-tiles-container { display: flex; font-size: 14px; margin: 20px 0; } -/* Shared transitions */ +/* Shared transitions */ .card-tile, .card-tile .text-content { transition: .3s ease all; } -/* Default card tile styles */ +/* Default card tile styles */ .card-tile { border: 1px solid; border-radius: 10px; @@ -230,7 +263,7 @@ position: relative; width: 33.33%; } -/* Blue Card */ +/* Blue Card */ .card-tile.blue { background-color: #0093E9; background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%); @@ -242,7 +275,7 @@ box-shadow: 0 8px 18px rgba(128,208,199,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -/* Orange Card */ +/* Orange Card */ .card-tile.orange { background-color: #FAD961; background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%); @@ -254,7 +287,7 @@ box-shadow: 0 8px 18px rgba(247,107,28,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -/* Green Card */ +/* Green Card */ .card-tile.green { background-color: #096e40; background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%); @@ -266,7 +299,7 @@ box-shadow: 0 8px 18px rgba(9,110,64,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -/* Card tile text content */ +/* Card tile text content */ .card-tile .text-content { background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%); bottom: 10px; @@ -288,7 +321,7 @@ margin: 0; text-shadow: 1px 1px 1px rgba(0,0,0,0.6); } -/* All animations on hover */ +/* All animations on hover */ .card-tile:hover { transform: scale(1.1); } diff --git a/build/animated-toggle-tabs/index.html b/build/animated-toggle-tabs/index.html index a624b60..599d6c2 100644 --- a/build/animated-toggle-tabs/index.html +++ b/build/animated-toggle-tabs/index.html @@ -1,44 +1,55 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Animated Radio Tab Toggles</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Animated Radio Tab Toggles</h1> +<h1 id="animated-radio-tab-toggles">Animated Radio Tab Toggles</h1> + <p>2021-01-05</p> + <p><em>In this demo tutorial, we are making the assumption</em> that we need to create a radio slide toggle for our made-up payment options. For this we want to display 3 simple payment choices to the user:</p> + <ul> <li>One-time payment</li> <li>Recurring payment</li> <li>Free tier payment</li> </ul> -<h2>The Final Demo</h2> + +<h2 id="the-final-demo">The Final Demo</h2> + <p><a href="https://codepen.io/bradleytaunt/embed/vYXjpLO">Live CodePen</a></p> + <p>Let’s get started with the base skeleton.</p> -<h2>The HTML</h2> -<p><p>There isn't anything special happening here. We just contain all our <code>labels</code> and <code>inputs</code> into a <code>.radio-toggles</code> wrapper, make sure those <code>labels</code> are each properly connected to their corresponding <code>inputs</code>, and then add an empty <code>.slide-item</code> element (more on that later).</p></p> -<pre><code><div class="radio-toggles"> - <input type="radio" id="option-1" name="radio-options"> - <label for="option-1">One-Time</label> - <input type="radio" id="option-2" name="radio-options" checked> - <label for="option-2">Recurring</label> - <input type="radio" id="option-3" name="radio-options"> - <label for="option-3">Free</label> - <div class="slide-item"></div> -</div> + +<h2 id="the-html">The HTML</h2> + +<pre><code><div class="radio-toggles"> + <input type="radio" id="option-1" name="radio-options"> + <label for="option-1">One-Time</label> + <input type="radio" id="option-2" name="radio-options" checked> + <label for="option-2">Recurring</label> + <input type="radio" id="option-3" name="radio-options"> + <label for="option-3">Free</label> + <div class="slide-item"></div> +</div> </code></pre> -<h2>The CSS</h2> + +<h2 id="the-css">The CSS</h2> + <p>Now for the main event – the CSS. First we want to style the wrapper that holds all of our pieces together. You can tweak this to your liking, but I prefer a simple and clean style:</p> + <pre><code>.radio-toggles { align-items: center; background: #eee; @@ -53,14 +64,18 @@ position: relative; } </code></pre> + <p>Next, we “hide” (only visually) the default <code>radio</code> inputs:</p> -<pre><code>input[type="radio"] { + +<pre><code>input[type="radio"] { left: -9999px; position: absolute; z-index: -1; } </code></pre> + <p>Then we give the corresponding <code>label</code> elements a little spacing and breathing room:</p> + <pre><code>label { cursor: pointer; padding: 10px 20px; @@ -69,7 +84,9 @@ z-index: 2; } </code></pre> + <p>Remember that <code>.slide-item</code> I referenced earlier? That element will be the visual “slider” that animates between the individual radio options. We style that like so:</p> + <pre><code>.slide-item { background: white; border-radius: 9999px; @@ -82,16 +99,20 @@ z-index: 0; } </code></pre> -<p>You'll notice the <code>left</code>, <code>height</code>, and <code>width</code> properties utilize the CSS <code>calc</code> attributes – this just gives some much needed padding and visual clean-up to the whole tabbed interface.</p> + +<p>You’ll notice the <code>left</code>, <code>height</code>, and <code>width</code> properties utilize the CSS <code>calc</code> attributes – this just gives some much needed padding and visual clean-up to the whole tabbed interface.</p> + <p>For the finishing touches, we just need to tell the <code>.slide-item</code> where to position itself based on which <code>radio</code> input is currently selected:</p> -<pre><code>input[type="radio"]:nth-of-type(1):checked ~ .slide-item { + +<pre><code>input[type="radio"]:nth-of-type(1):checked ~ .slide-item { left: 4px; } -input[type="radio"]:nth-of-type(3):checked ~ .slide-item { +input[type="radio"]:nth-of-type(3):checked ~ .slide-item { left: calc(66.66% + 4px); } </code></pre> -<p>That's pretty much it! You now have a fully functional, animated toggle slider with just a set of simple <code>radio</code> inputs and pure CSS.</p> + +<p>That’s pretty much it! You now have a fully functional, animated toggle slider with just a set of simple <code>radio</code> inputs and pure CSS.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/atom.xml b/build/atom.xml index d00bd98..8ae5067 100644 --- a/build/atom.xml +++ b/build/atom.xml @@ -1,41 +1,56 @@ <?xml version="1.0" encoding="utf-8"?> <feed xmlns="http://www.w3.org/2005/Atom"> <title>Making software better without sacrificing user experience.</title> - <link href="https://bt.ht/atom.xml" rel="self" /> - <updated>2024-06-06T14:59:33Z</updated> + <link href="https://btxx.org/atom.xml" rel="self" /> + <updated>2024-06-08T13:20:53Z</updated> <author> - <name>Bradley Taunt</name> + <name></name> </author> - <id>https://bt.ht,2024-06-06:default-atom-feed/</id> + <id>https://btxx.org,2024-06-06:default-atom-feed/</id> <entry> <title>The X220 ThinkPad is the Best Laptop in the World</title> - <content type="html"><h1>The X220 ThinkPad is the Best Laptop in the World</h1> + <content type="html"><h1 id="the-x220-thinkpad-is-the-best-laptop-in-the-world">The X220 ThinkPad is the Best Laptop in the World</h1> + <p>2023-09-26</p> -<p>The X220 ThinkPad is the greatest laptop ever made and you're wrong if you think otherwise. No laptop hardware has since surpassed the nearly perfect build of the X220. New devices continue to get thinner and more fragile. Useful ports are constantly discarded for the sake of "design". Functionality is no longer important to manufacturers. Repairability is purposefully removed to prevent users from truly "owing" their hardware.</p> -<p>It's a mess out there. But thank goodness I still have my older, second-hand X220.</p> -<h2>Specs</h2> -<p>Before I get into the details explaining why this laptop is the very best of its kind, let's first take a look at my machine's basic specifications:</p> + +<p>The X220 ThinkPad is the greatest laptop ever made and you&#8217;re wrong if you think otherwise. No laptop hardware has since surpassed the nearly perfect build of the X220. New devices continue to get thinner and more fragile. Useful ports are constantly discarded for the sake of &#8220;design&#8221;. Functionality is no longer important to manufacturers. Repairability is purposefully removed to prevent users from truly &#8220;owing&#8221; their hardware.</p> + +<p>It&#8217;s a mess out there. But thank goodness I still have my older, second-hand X220.</p> + +<h2 id="specs">Specs</h2> + +<p>Before I get into the details explaining why this laptop is the very best of its kind, let&#8217;s first take a look at my machine&#8217;s basic specifications:</p> + <ul> <li>CPU: Intel i7-2640M (4) @ 3.500GHz</li> <li>GPU: Intel 2nd Generation Core Processor</li> <li>Memory: 16GB DDR3</li> -<li>OS: Arch Linux / OpenBSD</li> +<li>OS: Arch Linux &#47; OpenBSD</li> <li>Resolution: 1366x768</li> </ul> + <p>With that out of the way, I will break down my thoughts on the X220 into five major sections: Build quality, available ports, the keyboard, battery life, and repairability.</p> -<h2>Build Quality</h2> -<p>The X220 (like most of Lenovo's older X/T models) is built like a tank. Although the inner pieces are sourced from mostly plastic, the device is still better equipped to handle drops and mishandling compared to that of more fragile devices (such as the MacBook Air or Framework). This is made further impressive since the X220 is actually composed of many smaller interconnected pieces (more on this later).</p> -<p>A good litmus test I perform on most laptops is the "corner test". You grab the base corner of a laptop in its open state. The goal is to see if the device displays any noticeable give or flex. In the X220's case: it feels rock solid. The base remains stiff and bobbing the device causes no movement on the opened screen. I'm aware that holding a laptop in this position is certainly not a normal use case, but knowing it is built well enough to do so speaks volumes of its construction.</p> -<p>The X220 is also <em>not</em> a lightweight laptop. This might be viewed as a negative for most users, but I actually prefer it. I often become too cautious and end up "babying" thinner laptops out of fear of breakage. A minor drop from even the smallest height will severely damage these lighter devices. I have no such worries with my X220.</p> -<p>As for the laptop's screen and resolution: your mileage may vary. I have zero issues with the default display or the smaller aspect ratio. I wrote about how I <a href="/monitor">stopped using an external monitor</a>, so I might be a little biased.</p> -<p>Overall, this laptop is a device you can snatch up off your desk, whip into your travel bag and be on your way. The rugged design and bulkier weight help put my mind at ease - which is something I can't say for newer laptop builds.</p> -<h2>Ports</h2> -<p><figure> - <img src="/public/images/ports-everywhere.jpg" alt="Buzz Lightyear and Woody meme: 'Ports, Ports Everywhere'"> - <figcaption>Ports. Ports Everywhere.</figcaption> -</figure></p> -<p>I don't think I need to explain how valuable it is to have functional ports on a laptop. Needing to carrying around a bunch of dongles for ports that should already be <em>on the device</em> just seems silly.</p> + +<h2 id="build-quality">Build Quality</h2> + +<p>The X220 (like most of Lenovo&#8217;s older X&#47;T models) is built like a tank. Although the inner pieces are sourced from mostly plastic, the device is still better equipped to handle drops and mishandling compared to that of more fragile devices (such as the MacBook Air or Framework). This is made further impressive since the X220 is actually composed of many smaller interconnected pieces (more on this later).</p> + +<p>A good litmus test I perform on most laptops is the &#8220;corner test&#8221;. You grab the base corner of a laptop in its open state. The goal is to see if the device displays any noticeable give or flex. In the X220&#8217;s case: it feels rock solid. The base remains stiff and bobbing the device causes no movement on the opened screen. I&#8217;m aware that holding a laptop in this position is certainly not a normal use case, but knowing it is built well enough to do so speaks volumes of its construction.</p> + +<p>The X220 is also <em>not</em> a lightweight laptop. This might be viewed as a negative for most users, but I actually prefer it. I often become too cautious and end up &#8220;babying&#8221; thinner laptops out of fear of breakage. A minor drop from even the smallest height will severely damage these lighter devices. I have no such worries with my X220.</p> + +<p>As for the laptop&#8217;s screen and resolution: your mileage may vary. I have zero issues with the default display or the smaller aspect ratio. I wrote about how I <a href="/monitor">stopped using an external monitor</a>, so I might be a little biased.</p> + +<p>Overall, this laptop is a device you can snatch up off your desk, whip into your travel bag and be on your way. The rugged design and bulkier weight help put my mind at ease - which is something I can&#8217;t say for newer laptop builds.</p> + +<h2 id="ports">Ports</h2> + +<p><img src="/public/images/ports-everywhere.jpg" alt="Buzz Lightyear and Woody meme: 'Ports, Ports Everywhere'" /></p> + +<p>I don&#8217;t think I need to explain how valuable it is to have functional ports on a laptop. Needing to carrying around a bunch of dongles for ports that should already be <em>on the device</em> just seems silly.</p> + <p>The X220 comes equipped with:</p> + <ul> <li>3 USB ports (one of those being USB3 on the i7 model)</li> <li>DisplayPort</li> @@ -46,91 +61,141 @@ <li>Ultrabay (SATA)</li> <li>Wi-Fi hardware kill-switch</li> </ul> + <p>Incredibly versatile and ready for anything I throw at it!</p> -<h2>Keyboard</h2> -<p>The classic ThinkPad keyboards are simply that: classic. I don't think anyone could argue against these keyboards being the golden standard for laptops. It's commendable how Lenovo managed to package so much functionality into such a small amount of real estate. Most modern laptops lack helpful keys such as <code>Print Screen</code>, <code>Home</code>, <code>End</code>, and <code>Scroll Lock</code>.</p> -<p>They're also an absolute <em>joy</em> to type on. The fact that so many people go out of their way to mod X230 ThinkPad models with X220 keyboards should tell you something... Why Lenovo moved away from these keyboards will always baffle me. (I know <em>why</em> they did it - I just think it's stupid).</p> + +<h2 id="keyboard">Keyboard</h2> + +<p>The classic ThinkPad keyboards are simply that: classic. I don&#8217;t think anyone could argue against these keyboards being the golden standard for laptops. It&#8217;s commendable how Lenovo managed to package so much functionality into such a small amount of real estate. Most modern laptops lack helpful keys such as <code>Print Screen</code>, <code>Home</code>, <code>End</code>, and <code>Scroll Lock</code>.</p> + +<p>They&#8217;re also an absolute <em>joy</em> to type on. The fact that so many people go out of their way to mod X230 ThinkPad models with X220 keyboards should tell you something&#8230; Why Lenovo moved away from these keyboards will always baffle me. (I know <em>why</em> they did it - I just think it&#8217;s stupid).</p> + <p>Did I mention these classic keyboards come with the extremely useful Trackpoint as well?</p> -<h2>Battery Life</h2> -<blockquote><p><strong>Author's Note:</strong> This section is very subjective. The age, quality, and size of the X220's battery can have a massive impact on benchmarks. I should also mention that I run very lightweight operating systems and use DWM as opposed to a heavier desktop environment. Just something to keep in mind.</p> + +<h2 id="battery-life">Battery Life</h2> + +<blockquote> +<p><strong>Author&#8217;s Note:</strong> This section is very subjective. The age, quality, and size of the X220&#8217;s battery can have a massive impact on benchmarks. I should also mention that I run very lightweight operating systems and use DWM as opposed to a heavier desktop environment. Just something to keep in mind.</p> </blockquote> -<p>The battery life on my own X220 is fantastic. I have a brand-new 9-cell that lasts for roughly 5-6 hours of daily work. Obviously these numbers don't come close to the incredible battery life of Apple's M1/M2 chip devices, but it's still quite competitive against other "newer" laptops on the market.</p> -<p>Although, even if the uptime was lower than 5-6 hours, you have the ability to carry extra batteries with you. The beauty of swapping out your laptop's battery without needing to <em>open up</em> the device itself is fantastic. Others might whine about the annoyance of carrying an extra battery in their travel bag, but doing so is completely <em>optional</em>. A core part of what makes the X220 so wonderful is user control and choice. The X220's battery is another great example of that.</p> -<h2>Repairability</h2> + +<p>The battery life on my own X220 is fantastic. I have a brand-new 9-cell that lasts for roughly 5-6 hours of daily work. Obviously these numbers don&#8217;t come close to the incredible battery life of Apple&#8217;s M1&#47;M2 chip devices, but it&#8217;s still quite competitive against other &#8220;newer&#8221; laptops on the market.</p> + +<p>Although, even if the uptime was lower than 5-6 hours, you have the ability to carry extra batteries with you. The beauty of swapping out your laptop&#8217;s battery without needing to <em>open up</em> the device itself is fantastic. Others might whine about the annoyance of carrying an extra battery in their travel bag, but doing so is completely <em>optional</em>. A core part of what makes the X220 so wonderful is user control and choice. The X220&#8217;s battery is another great example of that.</p> + +<h2 id="repairability">Repairability</h2> + <p>The ability to completely disassemble and replace almost everything on the X220 has to be one of its biggest advantages over newer laptops. No glue to rip apart. No special proprietary tools required. Just some screws and plastic snaps. If someone as monkey-brained as me can completely strip down this laptop and put it back together again without issue, then the hardware designers have done something right!</p> + <p>Best of all, Lenovo provides a very detailed <a href="https://download.lenovo.com/pccbbs/mobiles_pdf/0a60739_01.pdf">hardware maintenance manual</a> to help guide you through the entire process.</p> -<p><figure> - <img src="/public/images/x220-pieces.jpeg" alt="My disassembled X220 laptop"> - <figcaption>My disassembled X220 when I was reapplying the CPU thermal paste.</figcaption> -</figure></p> -<h2>Bonus Round: Price</h2> -<p>I didn't list this in my initial section "breakdown" but it's something to consider. I purchased my X220 off eBay for $175 Canadian. While this machine came with a HDD instead of an SSD and only 8GB of total memory, that was still an incredible deal. I simply swapped out the hard-drive with an SSD I had on hand, along with upgrading the DDR3 memory to its max of 16.</p> + +<p>My disassembled X220 when I was reapplying the CPU thermal paste:</p> + +<p><img src="/public/images/x220-pieces.jpeg" alt="My disassembled X220 laptop" /></p> + +<h2 id="bonus-round-price">Bonus Round: Price</h2> + +<p>I didn&#8217;t list this in my initial section &#8220;breakdown&#8221; but it&#8217;s something to consider. I purchased my X220 off eBay for $175 Canadian. While this machine came with a HDD instead of an SSD and only 8GB of total memory, that was still an incredible deal. I simply swapped out the hard-drive with an SSD I had on hand, along with upgrading the DDR3 memory to its max of 16.</p> + <p>Even if you needed to buy those components separately you would be hard-pressed to find such a good deal for a decent machine. Not to mention you would be helping to prevent more e-waste!</p> -<h2>What More Can I Say?</h2> + +<h2 id="what-more-can-i-say">What More Can I Say?</h2> + <p>Obviously the title and tone of this article is all in good fun. Try not to take things so seriously! But, I still <em>personally</em> believe the X220 is one of, if not <em>the</em> best laptop in the world.</p></content> - <link href="https://bt.ht/x220"/> - <id>https://bt.ht/x220</id> + <link href="https://btxx.org/x220"/> + <id>https://btxx.org/x220</id> <updated>2023-09-26T10:00:00Z</updated> <published>2023-09-26T10:00:00Z</published> </entry> <entry> <title>Bypassing the WiFi Hardware Switch on the Lenovo X201</title> - <content type="html"><h1>Bypassing the WiFi Hardware Switch on the Lenovo X201</h1> + <content type="html"><h1 id="bypassing-the-wifi-hardware-switch-on-the-lenovo-x201">Bypassing the WiFi Hardware Switch on the Lenovo X201</h1> + <p>2023-04-02</p> -<p>I recently received a ThinkPad X201 to start using as my daily driver. I purchased the X201 to replace my existing X260. Although some might look at this as a "downgrade" in terms of specs and hardware, I would have to disagree. </p> -<p>The X201 is an absolute masterpiece in laptop hardware design and only faulted by some of the constraints set by the motherboard, namely the lack to support more than 8GB of RAM. Other than that, I think it's perfect. Well...<em>almost</em> perfect. There is one small annoyance:</p> + +<p>I recently received a ThinkPad X201 to start using as my daily driver. I purchased the X201 to replace my existing X260. Although some might look at this as a &#8220;downgrade&#8221; in terms of specs and hardware, I would have to disagree. </p> + +<p>The X201 is an absolute masterpiece in laptop hardware design and only faulted by some of the constraints set by the motherboard, namely the lack to support more than 8GB of RAM. Other than that, I think it&#8217;s perfect. Well&#8230;<em>almost</em> perfect. There is one small annoyance:</p> + <p><strong>The physical WiFi kill switch</strong>.</p> + <p>This thing can become really flaky on these older devices and countless people on the web report connection issues across multiple operating systems. I too ran into this issue not long after getting Alpine setup nicely on my machine.</p> + <p>Some remedies include re-installing hardware drivers, flicking the hardware toggle off and on repeatedly, or even simply logging out of the current user session. All these options seemed like a pain in the ass.</p> + <p>So I listed out my possible options:</p> + <ol> <li>Whitelist my BIOS WiFi settings (requires flashing BIOS) and install a newer wifi card, hoping the problem fixes itself</li> <li>Purchase a replacement WiFi card (maybe mine was just buggy??)</li> <li>Block PIN20 on the existing Wifi card</li> <li>Somehow disconnect the hardware killswitch (requires soldering which I have ZERO experience with)</li> </ol> -<p>Out of pure laziness, I chose option <strong>three</strong>. In case you were unaware, PIN20 on older PCIE WLAN cards is the "wifi disable" and used as an RF killswitch. By "blocking" this PIN, we stop the system from being able to disable the WiFi connection. Losing the ability to disable WiFi on the hardware level didn't bother me much, so I moved forward with this easier approach.</p> -<h2>Opening Up the X201</h2> -<p>To access the WiFi card, you'll need to remove the keyboard and touchpad palm rest cover. It might sound daunting for newcomers but I assure you it is very simple. These machines were built during a time when Lenovo <em>expected</em> their users to tinker with their devices and built them with modular components in mind. Yet another reason for my decision to swap this laptop for my more "locked down" X260.</p> -<blockquote><p>Note: I'm not sure how important this is, but I made sure to set my WiFi hardware toggle switch into the "ON" position before doing any of the other steps.</p> + +<p>Out of pure laziness, I chose option <strong>three</strong>. In case you were unaware, PIN20 on older PCIE WLAN cards is the &#8220;wifi disable&#8221; and used as an RF killswitch. By &#8220;blocking&#8221; this PIN, we stop the system from being able to disable the WiFi connection. Losing the ability to disable WiFi on the hardware level didn&#8217;t bother me much, so I moved forward with this easier approach.</p> + +<h2 id="opening-up-the-x201">Opening Up the X201</h2> + +<p>To access the WiFi card, you&#8217;ll need to remove the keyboard and touchpad palm rest cover. It might sound daunting for newcomers but I assure you it is very simple. These machines were built during a time when Lenovo <em>expected</em> their users to tinker with their devices and built them with modular components in mind. Yet another reason for my decision to swap this laptop for my more &#8220;locked down&#8221; X260.</p> + +<blockquote> +<p>Note: I&#8217;m not sure how important this is, but I made sure to set my WiFi hardware toggle switch into the &#8220;ON&#8221; position before doing any of the other steps.</p> </blockquote> + <p>You can follow the very beautiful visual instructions provided by Lenovo below. Just remember to always power off you machine and remove the battery before tinkering.</p> + <p><img src="/public/images/x201-1.png" alt="Unscrew the main keyboard and touchpad screws on the back of the laptop" /></p> + <p><img src="/public/images/x201-2.png" alt="Gently push the keyboard towards the screen to remove" /></p> + <p><img src="/public/images/x201-3.png" alt="The keyboard cable is very fragile, remove it carefully" /></p> + <p><img src="/public/images/x201-4.png" alt="Slide the palm rest down and away from the laptop to remove safely" /></p> + <p><img src="/public/images/x201-5.png" alt="Remove the two screws on the WiFi card to access it" /></p> -<h2>Electrical Tape Fixes Everything</h2> + +<h2 id="electrical-tape-fixes-everything">Electrical Tape Fixes Everything</h2> + <p>Now that the WiFi card has been safely removed from its port (you most likely do not need to disconnect the cables though!) it is time to block PIN20.</p> -<p>On the Centrino Advanced-N 6200 card PIN20 is located on the back side, since the front is designated to all odd-set pins. You'll need to cut a ridiculously thin piece of electrical tape to cover this <em>single</em> pin. I found this part to be the most taxing of my patience during the entire process. Just keep thinking happy thoughts and you can do it!</p> + +<p>On the Centrino Advanced-N 6200 card PIN20 is located on the back side, since the front is designated to all odd-set pins. You&#8217;ll need to cut a ridiculously thin piece of electrical tape to cover this <em>single</em> pin. I found this part to be the most taxing of my patience during the entire process. Just keep thinking happy thoughts and you can do it!</p> + <p><img src="/public/images/x201-tape.jpg" alt="My hacky electrical tape job on PIN20" /></p> + <p>Once it is on PIN20, place your card back into its port, rebuild you X201, pop in your battery and boot up! If things were done properly, your WiFi should now be rock solid.</p> -<p>Best of all, you don't have to worry about accidentally toggling your WiFi toggle switch - it does nothing! Mine is actually set in the "OFF" position all the time now.</p> + +<p>Best of all, you don&#8217;t have to worry about accidentally toggling your WiFi toggle switch - it does nothing! Mine is actually set in the &#8220;OFF&#8221; position all the time now.</p> + <p>Enjoy less flaky WiFi.</p></content> - <link href="https://bt.ht/x201"/> - <id>https://bt.ht/x201</id> + <link href="https://btxx.org/x201"/> + <id>https://btxx.org/x201</id> <updated>2023-04-02T10:00:00Z</updated> <published>2023-04-02T10:00:00Z</published> </entry> <entry> <title>WP Enqueue for Beginners</title> - <content type="html"><h1>WP Enqueue for Beginners</h1> + <content type="html"><h1 id="wp-enqueue-for-beginners">WP Enqueue for Beginners</h1> + <p>2020-05-05</p> -<p>Throughout my career designing, developing and auditing WordPress themes, I've come across many that include their custom styles / scripts as static HTML elements inside their respective <code>header</code> and <code>footer</code> templates. This is perfectly <em>fine</em>, but there is a cleaner way to include these files.</p> -<p>This post is purposefully catered for WordPress beginners, so if this seems overly simple, then you're probably already developing WordPress themes that utilize these techniques. (Which is awesome!)</p> -<h2>Introducing WP Enqueue</h2> + +<p>Throughout my career designing, developing and auditing WordPress themes, I&#8217;ve come across many that include their custom styles &#47; scripts as static HTML elements inside their respective <code>header</code> and <code>footer</code> templates. This is perfectly <em>fine</em>, but there is a cleaner way to include these files.</p> + +<p>This post is purposefully catered for WordPress beginners, so if this seems overly simple, then you&#8217;re probably already developing WordPress themes that utilize these techniques. (Which is awesome!)</p> + +<h2 id="introducing-wp-enqueue">Introducing WP Enqueue</h2> + <p>The description of Wp Enqueue from the WordPress documentation:</p> -<p><blockquote class="wp-block-quote"> - <p> - Registers the style [script] if source provided (does NOT overwrite) and enqueues - </p> -</blockquote></p> + <p>In a nutshell: Placing a <code>wp_enqueue_script</code> or <code>wp_enqueue_style</code> script in the <code>functions.php</code> of your custom theme tells WordPress to pull external files into the header or footer of your website. Best practice being: <em>styles into the header, scripts into the footer</em>.</p> + <p>I suggest you read the official documentation for more details: <a href="https://developer.wordpress.org/reference/functions/wp_enqueue_script/">wp_enqueue_script</a> and <a href="https://developer.wordpress.org/reference/functions/wp_enqueue_style/">wp_enqueue_style</a>.</p> -<h2>Enqueue Stylesheets</h2> + +<h2 id="enqueue-stylesheets">Enqueue Stylesheets</h2> + <p>The default script to enqueue a CSS stylesheet:</p> + <pre><code>wp_enqueue_style( $handle, $src, $deps, $ver, $media ); </code></pre> + <ul> <li><code>$handle</code> - the name associated with your stylesheet</li> <li><code>$src</code> - URL pointing to the directory of the stylesheet itself</li> @@ -138,160 +203,170 @@ <li><code>$ver</code> - The version number of the stylesheet (used for cache busting)</li> <li><code>$media</code> - Specify media type (<code>all</code>, <code>print</code>, <code>screen</code>, etc.)</li> </ul> + <p>So, with all those parameters in mind, here is what a standard default enqueue of a CSS stylesheet looks like:</p> -<pre><code>wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800,900', '', '1.0', ''); + +<pre><code>wp_enqueue_style( &#39;google-fonts&#39;, &#39;https:&#47;&#47;fonts.googleapis.com&#47;css?family=Montserrat:200,300,300i,400,600,700,800,900&#39;, &#39;&#39;, &#39;1.0&#39;, &#39;&#39;); </code></pre> + <p>In this example we have rendered the following:</p> + <ul> <li><code>$handle</code>: google-fonts</li> -<li><code>$src</code>: https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800- 0</li> +<li><code>$src</code>: <a href="https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800-">https:&#47;&#47;fonts.googleapis.com&#47;css?family=Montserrat:200,300,300i,400,600,700,800-</a> 0</li> <li><code>$deps</code>: Null (left blank)</li> <li><code>$ver</code>: 1.0</li> <li><code>$media</code>: Null (left blank)</li> </ul> + <p><strong>Important:</strong> Keep in mind that the <code>wp_enqueue_style</code> script will render the stylesheet link into the WordPress header automatically.</p> -<h2>Enqueue Scripts</h2> + +<h2 id="enqueue-scripts">Enqueue Scripts</h2> + <p>The default script to enqueue an external JS file:</p> + <pre><code>wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); </code></pre> + <ul> <li><code>$handle</code> - the name associated with your script</li> <li><code>$src</code> - URL pointing to the directory of the script itself</li> <li><code>$deps</code> - An array of any other scripts needed as dependencies</li> <li><code>$ver</code> - The version number of the script (used for cache busting)</li> -<li><code>$in_footer</code> - Set whether the script is loaded in the <code>&lt;head&gt;</code> or just before the <code>&lt;/body&gt;</code></li> +<li><code>$in_footer</code> - Set whether the script is loaded in the <code>&#60;head&#62;</code> or just before the <code>&#60;&#47;body&#62;</code></li> </ul> + <p>With all those parameters in mind, here is what a standard default enqueue of a Javascript file looks like:</p> -<pre><code>wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/bxslider.js', array('jquery'), '1.0.0', true ); + +<pre><code>wp_enqueue_script( &#39;bxslider&#39;, get_template_directory_uri() . &#39;&#47;js&#47;bxslider.js&#39;, array(&#39;jquery&#39;), &#39;1.0.0&#39;, true ); </code></pre> + <p>In this example we have rendered the following:</p> + <ul> <li><code>$handle</code>: bxslider</li> -<li><code>$src</code>: get_template_directory<em></em>ri() . /js/bxslider.js'</li> -<li><code>$deps</code>: array(jquery')</li> +<li><code>$src</code>: get_template_directory_uri() . &#47;js&#47;bxslider.js&#8217;</li> +<li><code>$deps</code>: array(jquery&#8217;)</li> <li><code>$ver</code>: 1.0.0</li> <li><code>$in_footer</code>: True (<em>places script before closing body tag</em>)</li> </ul> -<h2>Packaging Everything Together</h2> + +<h2 id="packaging-everything-together">Packaging Everything Together</h2> + <p>Now that we have the custom stylesheet and script ready to be loaded into our custom WordPress theme, we just need to properly package them together as a function in our <code>functions.php</code> file:</p> -<pre><code>// Add styles and scripts to the header/footer + +<pre><code>&#47;&#47; Add styles and scripts to the header&#47;footer function custom_enqueue_scripts() { - wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800,900'); - wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/bxslider.js', array('jquery'), '1.0.0', true ); + wp_enqueue_style( &#39;google-fonts&#39;, &#39;https:&#47;&#47;fonts.googleapis.com&#47;css?family=Montserrat:200,300,300i,400,600,700,800,900&#39;); + wp_enqueue_script( &#39;bxslider&#39;, get_template_directory_uri() . &#39;&#47;js&#47;bxslider.js&#39;, array(&#39;jquery&#39;), &#39;1.0.0&#39;, true ); } -add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts'); +add_action( &#39;wp_enqueue_scripts&#39;, &#39;custom_enqueue_scripts&#39;); </code></pre> -<p>That's it! Hopefully this helps prevent WordPress newbies from statically rendering their external CSS and JS files directly in template files. Let WordPress do that for you!</p></content> - <link href="https://bt.ht/wp-enqueue-for-beginners"/> - <id>https://bt.ht/wp-enqueue-for-beginners</id> + +<p>That&#8217;s it! Hopefully this helps prevent WordPress newbies from statically rendering their external CSS and JS files directly in template files. Let WordPress do that for you!</p></content> + <link href="https://btxx.org/wp-enqueue-for-beginners"/> + <id>https://btxx.org/wp-enqueue-for-beginners</id> <updated>2020-05-05T10:00:00Z</updated> <published>2020-05-05T10:00:00Z</published> </entry> <entry> <title>Setting Up Jekyll on Windows
</title> - <content type="html"><h1>Setting Up Jekyll on Windows
</h1> -<p>
-2022-09-02
-
-I've recently been playing around with using Windows 10 as my daily operating system. So far, it has been going fairly well. Nothing will probably ever feel as "optimized" as running a Linux-based system but it works well for my current needs. Getting a Jekyll development environment setup was a different story though...
-
-One of the first issues with using Windows 10 is the need to run a few of my open source projects that are built off Jekyll locally. This process initially seemed a like complex process to get things running smoothly but in the end was very straightforward. The main issue came from needing to bounce around through a handful of separate tutorials to get everything running smoothly.
-
-So, I thought I would make this quick write-up to help those in the same situation (or even for my future self the need arises). Let's get into it.
-
-</p> -<h2>WSL
</h2> -<p>
-The first step involves installing <a href="https://docs.microsoft.com/en-us/windows/wsl/install">WSL</a> in order to run Linux alongside the main Windows OS. The documentation is well written and will get you up-and-running in no time. For quick reference, it essentially comes down to:
-
</p> + <content type="html"><h1 id="setting-up-jekyll-on-windows">Setting Up Jekyll on Windows</h1> + +<p>2022-09-02</p> + +<p>I&#8217;ve recently been playing around with using Windows 10 as my daily operating system. So far, it has been going fairly well. Nothing will probably ever feel as &#8220;optimized&#8221; as running a Linux-based system but it works well for my current needs. Getting a Jekyll development environment setup was a different story though&#8230;</p> + +<p>One of the first issues with using Windows 10 is the need to run a few of my open source projects that are built off Jekyll locally. This process initially seemed a like complex process to get things running smoothly but in the end was very straightforward. The main issue came from needing to bounce around through a handful of separate tutorials to get everything running smoothly.</p> + +<p>So, I thought I would make this quick write-up to help those in the same situation (or even for my future self the need arises). Let&#8217;s get into it.</p> + +<h2 id="wsl">WSL</h2> + +<p>The first step involves installing <a href="https://docs.microsoft.com/en-us/windows/wsl/install">WSL</a> in order to run Linux alongside the main Windows OS. The documentation is well written and will get you up-and-running in no time. For quick reference, it essentially comes down to:</p> <ol> -<li>Opening PowerShell or Command Prompt as an administrator
</li> -<li>Installing via the command: <code>wsl --install</code>
</li> -<li>Restarting your machine after the install completes
</li> -<li>Creating your UNIX username and password
</li> +<li>Opening PowerShell or Command Prompt as an administrator</li> +<li>Installing via the command: <code>wsl --install</code></li> +<li>Restarting your machine after the install completes</li> +<li>Creating your UNIX username and password</li> </ol> -<p>
-</p> -<h2>Installing Ruby &amp; Dependencies
</h2> -<p>
-Once logged into your UNIX terminal session (with your created user) you can begin installing everything we need for Jekyll to work properly. The first step is to installing <code>rvm</code> and the <a href="https://github.com/rvm/ubuntu_rvm">official project documentation</a> does a very good job of walking you through this.
-
</p> - -<ul> -<li>Be sure dependencies as installed: <code>sudo apt-get install software-properties-common</code>
</li> -<li>Add the PPA and install the package:
</li> -</ul> -<p>
-
-</p> -<pre><code>sudo apt-add-repository -y ppa:rael-gc/rvm
-sudo apt-get update
-sudo apt-get install rvm
-</code></pre> -<p>
-
</p> - -<ul> -<li>Add your existing user to the <code>rvm</code> group: <code>sudo usermod -a -G rvm $USER</code>
</li> -</ul> -<p>
-You will need to close and restart your session to your Ubuntu system for these changes to take. After that, we can use <code>rvm</code> to install the latest version (at this time of writing) of ruby:
-
-
-</p> -<pre><code>rvm install 3.1.2
-</code></pre> -<p>
-
-That's it!
-
-</p> -<h2>Jekyll - Finally!
</h2> -<p>
-The final step is to update our gems and install Jekyll:
-
-
-</p> -<pre><code>gem update
-gem install jekyll bundler
-</code></pre> -<p>
-
-Once complete you can now run your Jekyll projects locally through WSL! Nothing ground-breaking but still pretty helpful for first-time users. And best of all, at least I have a good reference point in the future if I ever run into this issue again!
</p></content> - <link href="https://bt.ht/windows"/> - <id>https://bt.ht/windows</id> + +<h2 id="installing-ruby-dependencies">Installing Ruby &#38; Dependencies</h2> + +<p>Once logged into your UNIX terminal session (with your created user) you can begin installing everything we need for Jekyll to work properly. The first step is to installing <code>rvm</code> and the <a href="https://github.com/rvm/ubuntu_rvm">official project documentation</a> does a very good job of walking you through this.</p> + +<ul> +<li><p>Be sure dependencies as installed: <code>sudo apt-get install software-properties-common</code></p></li> +<li><p>Add the PPA and install the package:</p> + +<p>sudo apt-add-repository -y ppa:rael-gc&#47;rvm +sudo apt-get update +sudo apt-get install rvm</p></li> +<li><p>Add your existing user to the <code>rvm</code> group: <code>sudo usermod -a -G rvm $USER</code></p></li> +</ul> + +<p>You will need to close and restart your session to your Ubuntu system for these changes to take. After that, we can use <code>rvm</code> to install the latest version (at this time of writing) of ruby:</p> + +<pre><code>rvm install 3.1.2 +</code></pre> + +<p>That&#8217;s it!</p> + +<h2 id="jekyll---finally">Jekyll - Finally!</h2> + +<p>The final step is to update our gems and install Jekyll:</p> + +<pre><code>gem update +gem install jekyll bundler +</code></pre> + +<p>Once complete you can now run your Jekyll projects locally through WSL! Nothing ground-breaking but still pretty helpful for first-time users. And best of all, at least I have a good reference point in the future if I ever run into this issue again!</p></content> + <link href="https://btxx.org/windows"/> + <id>https://btxx.org/windows</id> <updated>2022-09-02T10:00:00Z</updated> <published>2022-09-02T10:00:00Z</published> </entry> <entry> <title>Width or Flex-Basis?</title> - <content type="html"><h1>Width or Flex-Basis?</h1> + <content type="html"><h1 id="width-or-flex-basis">Width or Flex-Basis?</h1> + <p>2018-11-28</p> -<p>Creating rows and columns of elements that adapt dynamically can be a little tricky depending on the desired outcome. Let's breakdown how to solve this issue using both <code>inline-block</code> paired with <code>width</code> and <code>flex-basis</code>.</p> -<h2>Width</h2> + +<p>Creating rows and columns of elements that adapt dynamically can be a little tricky depending on the desired outcome. Let&#8217;s breakdown how to solve this issue using both <code>inline-block</code> paired with <code>width</code> and <code>flex-basis</code>.</p> + +<h2 id="width">Width</h2> + <p>Setting the width of the inner children to a divisible value and setting their display to <code>inline-block</code>, we are able to create self-wrapping elements:</p> + <pre><code>.width-container { display: block; } .width-container__item { display: inline-block; - width: calc(33% - 3px); /* Fix for wonky inline-block margins */ + width: calc(33% - 3px); &#47;* Fix for wonky inline-block margins *&#47; } </code></pre> -<h3>Pros</h3> + +<h3 id="pros">Pros</h3> + <ul> -<li><a href="https://caniuse.com/#search=inline-block">Full browser support</a> (as far back as IE6)</li> +<li>Full browser support (as far back as IE6)</li> <li>No floats needed</li> </ul> -<h3>Cons</h3> + +<h3 id="cons">Cons</h3> + <ul> <li>Buggy <code>margin</code> workaround needed</li> <li>Wrapped elements cannot dynamically fill remaining empty parent space</li> </ul> -<h2>Flex-basis</h2> + +<h2 id="flex-basis">Flex-basis</h2> + <p>This is my personal preference for dynamically wrapping inner children elements. Simply set the parent as <code>display: flex</code>, allow flex-wrapping and then set the <code>flex-basis</code> of the children to any percentage value.</p> + <pre><code>.flex-container { display: flex; flex-wrap: wrap; @@ -301,175 +376,272 @@ Once complete you can now run your Jekyll projects locally through WSL! Nothing flex-basis: 33%; } </code></pre> + <p>You will also notice the <code>flex</code> property set to <code>1 1 auto</code>. This is important if you require your wrapped elements to fill the remaining space of the parent container.</p> -<h3>Pros</h3> + +<h3 id="pros-1">Pros</h3> + <ul> <li>No buggy margins to play with</li> <li>Dynamically renders children to fill parent container if <code>flex</code> is set</li> -<li>Scales well across screen / device sizes</li> +<li>Scales well across screen &#47; device sizes</li> </ul> -<h3>Cons</h3> + +<h3 id="cons-1">Cons</h3> + <ul> -<li>Some versions of IE struggle with <a href="https://caniuse.com/#search=flex-basis">browser support</a></li> +<li>Some versions of IE struggle with browser support</li> </ul> -<h2>CodePen Demo</h2> + +<h2 id="codepen-demo">CodePen Demo</h2> + <p>Feel free to play around with a slightly more stylized version of both options below:</p> -<p><a href="https://codepen.io/bradleytaunt/pen/JevaYQ">CodePen Demo: Width or flex-basis</a></p></content> - <link href="https://bt.ht/width-vs-flex-basis"/> - <id>https://bt.ht/width-vs-flex-basis</id> + +<p>CodePen Demo: Width or flex-basis</p></content> + <link href="https://btxx.org/width-vs-flex-basis"/> + <id>https://btxx.org/width-vs-flex-basis</id> <updated>2018-11-28T10:00:00Z</updated> <published>2018-11-28T10:00:00Z</published> </entry> <entry> <title>Stop Using Custom Web Fonts</title> - <content type="html"><h1>Stop Using Custom Web Fonts</h1> + <content type="html"><h1 id="stop-using-custom-web-fonts">Stop Using Custom Web Fonts</h1> + <p>2023-03-14</p> -<p>I recently read an excellent post by Manu Moreale titled <a href="https://manuelmoreale.com/a-rant-on-web-font-licenses">A rant on web font licenses</a>. I highly recommend you give it a read (it's relatively short) since Manu makes a solid argument against existing font licenses. After reading, I found myself thinking about it throughout the rest of the day.</p> -<p>I was trying to understand how we ended up in a situation where web/UI designers (myself included) have started to <em>insist</em> on using proprietary, custom web fonts. Do any users actively benefit from custom web fonts? Are there any <em>useful</em> and <em>measurable</em> goals achieved by including them? Do end-users actually <em>care</em> about a website's typeface?</p> + +<p>I recently read an excellent post by Manu Moreale titled <a href="https://manuelmoreale.com/a-rant-on-web-font-licenses">A rant on web font licenses</a>. I highly recommend you give it a read (it&#8217;s relatively short) since Manu makes a solid argument against existing font licenses. After reading, I found myself thinking about it throughout the rest of the day.</p> + +<p>I was trying to understand how we ended up in a situation where web&#47;UI designers (myself included) have started to <em>insist</em> on using proprietary, custom web fonts. Do any users actively benefit from custom web fonts? Are there any <em>useful</em> and <em>measurable</em> goals achieved by including them? Do end-users actually <em>care</em> about a website&#8217;s typeface?</p> + <p>For the most part, I believe the answer to all those questions is: <strong>not really</strong>.</p> -<h2>System Fonts Look Good</h2> -<p>We are no longer in the early days of the internet. Browsers have matured. Operating systems already ship with usable and often times pretty typefaces. The "wow factor" of having a custom web font on a website is completely gone. Not to mention, recent trends see designers including <em>terrible</em> typefaces that actually make things more difficult to read and break basic accessibility.</p> -<p>All of this for the sake of a company's "brand". I say: <strong>fuck your brand</strong>. Your end-users should always trump your design "guidelines". Period.</p> -<h2>"Think of the Consistency!"</h2> -<p>Often times designers will argue that designs will look too different across browsers/operating systems. I'm not sure why this is seen as a bad thing. First, users will be familiar with the fonts already available to them. Second, as designers our work should never rely on one point of failure (in this instance: fonts). Your designs should be agnostic of your typeface selection. </p> + +<h2 id="system-fonts-look-good">System Fonts Look Good</h2> + +<p>We are no longer in the early days of the internet. Browsers have matured. Operating systems already ship with usable and often times pretty typefaces. The &#8220;wow factor&#8221; of having a custom web font on a website is completely gone. Not to mention, recent trends see designers including <em>terrible</em> typefaces that actually make things more difficult to read and break basic accessibility.</p> + +<p>All of this for the sake of a company&#8217;s &#8220;brand&#8221;. I say: <strong>fuck your brand</strong>. Your end-users should always trump your design &#8220;guidelines&#8221;. Period.</p> + +<h2 id="think-of-the-consistency">&#8220;Think of the Consistency!&#8221;</h2> + +<p>Often times designers will argue that designs will look too different across browsers&#47;operating systems. I&#8217;m not sure why this is seen as a bad thing. First, users will be familiar with the fonts already available to them. Second, as designers our work should never rely on one point of failure (in this instance: fonts). Your designs should be agnostic of your typeface selection. </p> + <p>And what about users with browser extensions that already block your custom web fonts? Screw them I guess?</p> -<p>People work on different systems with different constraints and settings. Embrace that - don't try to override it.</p> -<h2>Loss of Personality</h2> -<p>The web is not the same medium as graphic design. Digital designers often get this confused. Web applications serve an action or purpose. The user wants to complete a <em>task</em> - not look at a pretty poster. I understand this sounds harsh, but many designers design more for their own ego and portfolio rather than the end-user. That extra <em>flair</em> on your lowercase "t" doesn't help the user better interact with your features or UI. It just slows them down.</p> -<h2>Hurting Performance &amp; Wasting Resources</h2> -<p>A lot of designers I've worked with or talked to in the past tend to be big supporters of reducing their carbon footprint and minimizing their individual output of "waste". What I always find interesting is how that never seems to translate into their work.</p> -<p>It might be small in the grand scheme of things, but having an extra HTTP request (or more) for your custom fonts and requiring your users to consume more bandwidth on their end is not "eco". As designers we should cut the fat and reduce software bloat in the small areas that we're able to: the front end.</p> -<p>My hope is that even one designer reading this decides to rollout a web app or marketing page without dumping a bunch of custom fonts on their users. It's just the <em>nice</em> thing to do.</p></content> - <link href="https://bt.ht/webfonts"/> - <id>https://bt.ht/webfonts</id> + +<p>People work on different systems with different constraints and settings. Embrace that - don&#8217;t try to override it.</p> + +<h2 id="loss-of-personality">Loss of Personality</h2> + +<p>The web is not the same medium as graphic design. Digital designers often get this confused. Web applications serve an action or purpose. The user wants to complete a <em>task</em> - not look at a pretty poster. I understand this sounds harsh, but many designers design more for their own ego and portfolio rather than the end-user. That extra <em>flair</em> on your lowercase &#8220;t&#8221; doesn&#8217;t help the user better interact with your features or UI. It just slows them down.</p> + +<h2 id="hurting-performance-wasting-resources">Hurting Performance &#38; Wasting Resources</h2> + +<p>A lot of designers I&#8217;ve worked with or talked to in the past tend to be big supporters of reducing their carbon footprint and minimizing their individual output of &#8220;waste&#8221;. What I always find interesting is how that never seems to translate into their work.</p> + +<p>It might be small in the grand scheme of things, but having an extra HTTP request (or more) for your custom fonts and requiring your users to consume more bandwidth on their end is not &#8220;eco&#8221;. As designers we should cut the fat and reduce software bloat in the small areas that we&#8217;re able to: the front end.</p> + +<p>My hope is that even one designer reading this decides to rollout a web app or marketing page without dumping a bunch of custom fonts on their users. It&#8217;s just the <em>nice</em> thing to do.</p></content> + <link href="https://btxx.org/webfonts"/> + <id>https://btxx.org/webfonts</id> <updated>2023-03-14T10:00:00Z</updated> <published>2023-03-14T10:00:00Z</published> </entry> <entry> <title>Running VSCode in Chromium on OpenBSD</title> - <content type="html"><h1>Running VSCode in Chromium on OpenBSD</h1> + <content type="html"><h1 id="running-vscode-in-chromium-on-openbsd">Running VSCode in Chromium on OpenBSD</h1> + <p>2023-06-05</p> -<p>VSCode and its many variations are not available on OpenBSD. This doesn't cause issue with many OpenBSD users, but those making the jump from Linux might miss access to such a popular editor. Lucky for us, there is a <em>hacky</em> workaround to solve this problem.</p> -<h2>VSCode in the Browser</h2> + +<p>VSCode and its many variations are not available on OpenBSD. This doesn&#8217;t cause issue with many OpenBSD users, but those making the jump from Linux might miss access to such a popular editor. Lucky for us, there is a <em>hacky</em> workaround to solve this problem.</p> + +<h2 id="vscode-in-the-browser">VSCode in the Browser</h2> + <p>I tried my best to build something like <code>code-server</code> locally and run that directly in my browser - but I failed miserably. Instead, I fell back on <a href="https://vscode.dev">vscode.dev</a> which is essentially a remote version of <code>code-server</code>.</p> + <p>Getting things to work seamlessly proved a little more challenging. I found the best performance was running everything through Chromium with special parameters enabled on launch.</p> -<blockquote><p><strong>Note:</strong> The following assumes you have already installed <code>chromium</code></p> + +<blockquote> +<p><strong>Note:</strong> The following assumes you have already installed <code>chromium</code></p> </blockquote> -<p>First we need to disable <a href="https://man.openbsd.org/unveil.2">unveil</a> for Chromium. This will allow us to access our system files through <a href="https://vscode.dev">vscode.dev</a> using the "Open folder..." or "Open file..." commands without issue:</p> + +<p>First we need to disable <a href="https://man.openbsd.org/unveil.2">unveil</a> for Chromium. This will allow us to access our system files through <a href="https://vscode.dev">vscode.dev</a> using the &#8220;Open folder&#8230;&#8221; or &#8220;Open file&#8230;&#8221; commands without issue:</p> + <pre><code>chrome --disable-unveil </code></pre> -<p>Everything should work pretty solid right out the box now - except it doesn't. Syntax highlighting does not work without enabling WASM/WebAssembly. Your experience might be different, but I had to include the following when launching Chromium from the terminal:</p> + +<p>Everything should work pretty solid right out the box now - except it doesn&#8217;t. Syntax highlighting does not work without enabling WASM&#47;WebAssembly. Your experience might be different, but I had to include the following when launching Chromium from the terminal:</p> + <pre><code>ENABLE_WASM=1 chrome --enable-wasm </code></pre> + <p>Success! We can avoid typing out these complex commands everytime we want to launch our editor by setting up an <code>alias</code> (in my case via <code>.zshrc</code>):</p> -<pre><code>alias vscode=&quot;ENABLE_WASM=1 chrome --enable-wasm --disable-unveil&quot; + +<pre><code>alias vscode="ENABLE_WASM=1 chrome --enable-wasm --disable-unveil" </code></pre> -<p>That's it! Now I can just pop open VSCode on OpenBSD by simply running <code>vscode</code> in my terminal. Hopefully this can help others slowly transition over to OpenBSD - which you should do because it is amazing!</p></content> - <link href="https://bt.ht/vscode"/> - <id>https://bt.ht/vscode</id> + +<p>That&#8217;s it! Now I can just pop open VSCode on OpenBSD by simply running <code>vscode</code> in my terminal. Hopefully this can help others slowly transition over to OpenBSD - which you should do because it is amazing!</p></content> + <link href="https://btxx.org/vscode"/> + <id>https://btxx.org/vscode</id> <updated>2023-06-05T10:00:00Z</updated> <published>2023-06-05T10:00:00Z</published> </entry> <entry> <title>Using User-Select</title> - <content type="html"><h1>Using User-Select</h1> + <content type="html"><h1 id="using-user-select">Using User-Select</h1> + <p>2019-06-04</p> + <p>Highlighting text in order to copy, cut or paste content is a staple action across the web. Now, what if I told you the ability to control what a user can select is configurable with a single CSS property?</p> -<h2>Introducing the CSS property</h2> + +<h2 id="introducing-the-css-property">Introducing the CSS property</h2> + <p>Simply put, the <code>user-select</code> property is defined as follows:</p> -<blockquote><p><code>user-select</code> controls whether the user can select text (cursor or otherwise)</p> + +<blockquote> +<p><code>user-select</code> controls whether the user can select text (cursor or otherwise)</p> </blockquote> -<h2>The CSS</h2> -<p>The property's available attributes are very straightforward (just remember to target specific browsers for full support!)</p> -<pre><code>/* Default */ + +<h2 id="the-css">The CSS</h2> + +<p>The property&#8217;s available attributes are very straightforward (just remember to target specific browsers for full support!)</p> + +<pre><code>&#47;* Default *&#47; p.default { user-select: auto; -moz-user-select: auto; -webkit-user-select: auto; } -/* Disable the user from selecting text */ +&#47;* Disable the user from selecting text *&#47; p.no-select { user-select: none; -moz-user-select: none; -webkit-user-select: none; } -/* Select all text when user clicks */ +&#47;* Select all text when user clicks *&#47; p.select-all { user-select: all; -moz-user-select: all; -webkit-user-select: all; } </code></pre> -<h2>Let's see it in action</h2> + +<h2 id="lets-see-it-in-action">Let&#8217;s see it in action</h2> + <p>Try selecting the separate paragraph elements in the CodePen below:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/QRooZp/">Live CodePen Example</a></p> -<h2>Browser Support</h2> + +<h2 id="browser-support">Browser Support</h2> + <p>The great news is <code>user-select</code> is fully supported across all modern browsers (even as far back as IE10!)</p></content> - <link href="https://bt.ht/user-select"/> - <id>https://bt.ht/user-select</id> + <link href="https://btxx.org/user-select"/> + <id>https://btxx.org/user-select</id> <updated>2019-06-04T10:00:00Z</updated> <published>2019-06-04T10:00:00Z</published> </entry> <entry> <title>Icons Should be Complementary - Text is Always Better</title> - <content type="html"><h1>Icons Should be Complementary - Text is Always Better</h1> + <content type="html"><h1 id="icons-should-be-complementary---text-is-always-better">Icons Should be Complementary - Text is Always Better</h1> + <p>2021-12-17</p> -<p>Designing[^1] software is a complex thing. A great deal of real-world testing and user feedback is needed to create the best solution to the problem you are trying to fix. Obvious requirements are to keep things simple, make it easy to understand by <em>looking</em> at it, and build it to be headache-resistant for future updates. All these things are easier said than done. This is the challenge of a designer's dat-to-day.</p> -<p>But with this term of "simplicity" modern designers tend to take this approach too much to heart. In my 12+ years involved in UI/UX software design, I have lost count how many initial iterations of interfaces suffer from the same "dumbing down" decision making:</p> + +<p>Designing[^1] software is a complex thing. A great deal of real-world testing and user feedback is needed to create the best solution to the problem you are trying to fix. Obvious requirements are to keep things simple, make it easy to understand by <em>looking</em> at it, and build it to be headache-resistant for future updates. All these things are easier said than done. This is the challenge of a designer&#8217;s dat-to-day.</p> + +<p>But with this term of &#8220;simplicity&#8221; modern designers tend to take this approach too much to heart. In my 12+ years involved in UI&#47;UX software design, I have lost count how many initial iterations of interfaces suffer from the same &#8220;dumbing down&#8221; decision making:</p> + <p><strong>Using icons to represent an action or function without textual information</strong>.</p> + <p>If you decide to stop reading the rest of this article, at least take away this one important thing:</p> -<blockquote><p><em>Always try to use text to convey your designs</em></p> + +<blockquote> +<p><em>Always try to use text to convey your designs</em></p> </blockquote> + <p>After achieving this, you should start reiterating those designs to include iconography. Even then, not all UI instances will require you to do that. Designers will find this process difficult, which is why it is important to get <em>right</em>.</p> -<h2>Icons make an <em>ass</em> out of <em>u</em> and <em>me</em></h2> -<p>Icons make general assumptions about what the user may or may not understand. Leading with this in your designs will end <em>poorly for you</em>. Trust me - I've learned this through failed designs many times over. A certain visualization might be common knowledge to you, while differing greatly to someone else with a different set of experiences.</p> -<p>I've found the only thing you should ever <em>assume</em> is that the user knows nothing. Please note - I'm not referring to their intelligence but instead their software literacy.</p> -<p>Take a look at our now "famous" save icon used in almost every piece of software; the floppy disk. Do any software users below the legal drinking age even understand the initial reasoning for using this icon? In all honesty, it was a terrible icon decision even when first introduced. No "hard copy" of the save action is taking place, software creates this save in a digital space[^2]. Yet, it was adopted and people (ie. designers) went along with it.</p> + +<h2 id="icons-make-an-ass-out-of-u-and-me">Icons make an <em>ass</em> out of <em>u</em> and <em>me</em></h2> + +<p>Icons make general assumptions about what the user may or may not understand. Leading with this in your designs will end <em>poorly for you</em>. Trust me - I&#8217;ve learned this through failed designs many times over. A certain visualization might be common knowledge to you, while differing greatly to someone else with a different set of experiences.</p> + +<p>I&#8217;ve found the only thing you should ever <em>assume</em> is that the user knows nothing. Please note - I&#8217;m not referring to their intelligence but instead their software literacy.</p> + +<p>Take a look at our now &#8220;famous&#8221; save icon used in almost every piece of software; the floppy disk. Do any software users below the legal drinking age even understand the initial reasoning for using this icon? In all honesty, it was a terrible icon decision even when first introduced. No &#8220;hard copy&#8221; of the save action is taking place, software creates this save in a digital space[^2]. Yet, it was adopted and people (ie. designers) went along with it.</p> + <p><strong>Quality is not measured by mass appeal.</strong></p> -<p>The argument could be made "People learned to associate "Save" with a Floppy Disk icon..." and my response would be "But what alternatives were they given?"</p> -<p>Original software designers (and developers) held all the power in early UI decision making. General users didn't <em>know</em> any better. Things were new and fresh. Now our response is to shrug our collective shoulders and say, "That's how the save icon has to be now!"</p> -<p>Hogwash. Make it a button that says, <code>Save File</code>. I'm not kidding. Oh, it doesn't work with your current design? Then your initial design wasn't future-proof then, was it? I sound snarky here but many designers put up imaginary walls around their design systems, making them incredibly rigid and difficult to adapt.</p> -<p>Take the time to do even a small thought / wireframe experiment: redo the layout and flow of your application without using a single piece of iconography. If you can't achieve this with even limited success, something is wrong with the design.</p> -<h2>The hamburger menu is the 7th circle of Hell</h2> -<p>Normally, the inclusion of a hamburger menu is indicative of an overly complex application. Too many cooks and all that jazz. Enterprise applications don't get a pass here either, as they tend to be the worst culprits of pouring out everything on to the user as software vomit. Sweeping all this interaction under the hamburger "rug" does not make for a cleaner design.</p> -<p>New features are great, but stop dumping so much of it behind hidden, unintuitive sub-navigation. This design is such a "quick fix" and plagues far too many software apps[^3]. Both desktop computers and mobile devices allow users to <em>scroll</em>, let them.</p> -<p>I've discussed this in further detail here: <a href="https://bt.ht/hamburger-menu-alternative/">Using Hamburger Menus? Try Sausage Links</a></p> -<h2>But what of the "advanced" users?</h2> -<p>I understand applications will have advanced or "pro" users that have full knowledge of the product and wouldn't need things <em>spoon fed</em> to them. This is a more difficult problem that I myself haven't been able to solve without approaching each one on a case-by-case basis. Unfortunately, there is no "one size fits all" method to this. But, although solving for advanced users proves difficult doesn't mean we should dismiss the merits of avoiding icons as a crutch.</p> -<h2>Try for yourself</h2> -<p>As I stated above, try doing a quick design experiment by replacing all your existing iconography in your application with simple text. I assure you that at least you'll discover interesting design flaws in your system.</p> -<h2>Refs</h2> + +<p>The argument could be made &#8220;People learned to associate &#8220;Save&#8221; with a Floppy Disk icon&#8230;&#8221; and my response would be &#8220;But what alternatives were they given?&#8221;</p> + +<p>Original software designers (and developers) held all the power in early UI decision making. General users didn&#8217;t <em>know</em> any better. Things were new and fresh. Now our response is to shrug our collective shoulders and say, &#8220;That&#8217;s how the save icon has to be now!&#8221;</p> + +<p>Hogwash. Make it a button that says, <code>Save File</code>. I&#8217;m not kidding. Oh, it doesn&#8217;t work with your current design? Then your initial design wasn&#8217;t future-proof then, was it? I sound snarky here but many designers put up imaginary walls around their design systems, making them incredibly rigid and difficult to adapt.</p> + +<p>Take the time to do even a small thought &#47; wireframe experiment: redo the layout and flow of your application without using a single piece of iconography. If you can&#8217;t achieve this with even limited success, something is wrong with the design.</p> + +<h2 id="the-hamburger-menu-is-the-7th-circle-of-hell">The hamburger menu is the 7th circle of Hell</h2> + +<p>Normally, the inclusion of a hamburger menu is indicative of an overly complex application. Too many cooks and all that jazz. Enterprise applications don&#8217;t get a pass here either, as they tend to be the worst culprits of pouring out everything on to the user as software vomit. Sweeping all this interaction under the hamburger &#8220;rug&#8221; does not make for a cleaner design.</p> + +<p>New features are great, but stop dumping so much of it behind hidden, unintuitive sub-navigation. This design is such a &#8220;quick fix&#8221; and plagues far too many software apps[^3]. Both desktop computers and mobile devices allow users to <em>scroll</em>, let them.</p> + +<p>I&#8217;ve discussed this in further detail here: <a href="https://bt.ht/hamburger-menu-alternative/">Using Hamburger Menus? Try Sausage Links</a></p> + +<h2 id="but-what-of-the-advanced-users">But what of the &#8220;advanced&#8221; users?</h2> + +<p>I understand applications will have advanced or &#8220;pro&#8221; users that have full knowledge of the product and wouldn&#8217;t need things <em>spoon fed</em> to them. This is a more difficult problem that I myself haven&#8217;t been able to solve without approaching each one on a case-by-case basis. Unfortunately, there is no &#8220;one size fits all&#8221; method to this. But, although solving for advanced users proves difficult doesn&#8217;t mean we should dismiss the merits of avoiding icons as a crutch.</p> + +<h2 id="try-for-yourself">Try for yourself</h2> + +<p>As I stated above, try doing a quick design experiment by replacing all your existing iconography in your application with simple text. I assure you that at least you&#8217;ll discover interesting design flaws in your system.</p> + +<h2 id="refs">Refs</h2> + <ol> -<li>By "design" I'm referring to visuals not programming or system engineering</li> +<li>By &#8220;design&#8221; I&#8217;m referring to visuals not programming or system engineering</li> <li>Early software programs did save to an external floppy disk. My point stands that many digital file storage applications copied this iconography blindly.</li> -<li>Not to mention how rampant it is on plain ol' regular websites. If you're hiding five menu items behind a hamburger menu for "mobile users", you're doing it wrong.</li> +<li>Not to mention how rampant it is on plain ol&#8217; regular websites. If you&#8217;re hiding five menu items behind a hamburger menu for &#8220;mobile users&#8221;, you&#8217;re doing it wrong.</li> </ol></content> - <link href="https://bt.ht/use-text-not-icons"/> - <id>https://bt.ht/use-text-not-icons</id> + <link href="https://btxx.org/use-text-not-icons"/> + <id>https://btxx.org/use-text-not-icons</id> <updated>2021-12-17T10:00:00Z</updated> <published>2021-12-17T10:00:00Z</published> </entry> <entry> <title>They Won't Wait: A Warning for Slow Websites</title> - <content type="html"><h1>They Won't Wait: A Warning for Slow Websites</h1> + <content type="html"><h1 id="they-wont-wait-a-warning-for-slow-websites">They Won&#8217;t Wait: A Warning for Slow Websites</h1> + <p>2019-06-25</p> -<p><em>Your website is probably slow</em>. I'm not trying to make you feel bad or dismiss all the hard work you've put into your project. Heck, performance might have been a core value of the design. But websites can always be faster.</p> -<p>People have become increasingly more impatient over the last decade when it comes to technology, specifically non-native web-based interactions. Users expect your website to load almost instantly or they will leave and try another site, probably one of your competitors. Why should they stick around if your competitors' websites load half a second faster?</p> -<p>Users are tired of being bombarded with tracking scripts, having to download massive component libraries, forced to deal with "accept cookies" prompts, playing a small mini-game of "close those ads!", and then being subjected to never-ending loading screens. This is not the internet we were promised.</p> -<blockquote><p>It's in my nature, I always liked <strong>speed</strong>.</p> -<p><cite>- Guy Lafleur<cite></p> + +<p><em>Your website is probably slow</em>. I&#8217;m not trying to make you feel bad or dismiss all the hard work you&#8217;ve put into your project. Heck, performance might have been a core value of the design. But websites can always be faster.</p> + +<p>People have become increasingly more impatient over the last decade when it comes to technology, specifically non-native web-based interactions. Users expect your website to load almost instantly or they will leave and try another site, probably one of your competitors. Why should they stick around if your competitors&#8217; websites load half a second faster?</p> + +<p>Users are tired of being bombarded with tracking scripts, having to download massive component libraries, forced to deal with &#8220;accept cookies&#8221; prompts, playing a small mini-game of &#8220;close those ads!&#8221;, and then being subjected to never-ending loading screens. This is not the internet we were promised.</p> + +<blockquote> +<p>It&#8217;s in my nature, I always liked <strong>speed</strong>.</p> + +<p>- Guy Lafleur</p> </blockquote> -<h2>We can do better</h2> -<p>If there is only one thing that you learn from this post, hopefully it's knowing to better value the <strong>time and money of your users</strong>. It's a user's <em>choice</em> to visit your website, so taking advantage of their time is extremely careless. Don't be arrogant and ignore the cost of data on most mobile plans either. Eating up a chunk of someone's data just for hitting your website is rage-inducing. That's how you can lose customers permanently.</p> -<p>Let's do an analogy, because <strong>I love stupid analogies</strong>:</p> -<p>Imagine going to your local hardware store because you need to buy a new hammer. Once you get to the entrance a woman holds the the door closed and asks you if it's alright for someone to follow you around the store today. You say no. She then follows up by asking if you accept their hardware store agreement before proceeding inside - you tell her "sure". She finally opens the door and lets you in. As you walk into the store she quickly stuffs a few advertisements for other local businesses into you hand. "Thanks", you mutter.</p> -<p>Once inside you realize the hardware store is <em>very big</em> and manually looking for a hammer might take a while. You walk up to the front desk to ask where you can find a hammer but notice the cashier is playing with their phone behind the counter. You try to get their attention but they simply raise their hand and shout "Be with you in a minute". After a short while they get off their phone and <em>finally</em> listen to your question. They then tell you where to find the hammers.</p> + +<h2 id="we-can-do-better">We can do better</h2> + +<p>If there is only one thing that you learn from this post, hopefully it&#8217;s knowing to better value the <strong>time and money of your users</strong>. It&#8217;s a user&#8217;s <em>choice</em> to visit your website, so taking advantage of their time is extremely careless. Don&#8217;t be arrogant and ignore the cost of data on most mobile plans either. Eating up a chunk of someone&#8217;s data just for hitting your website is rage-inducing. That&#8217;s how you can lose customers permanently.</p> + +<p>Let&#8217;s do an analogy, because <strong>I love stupid analogies</strong>:</p> + +<p>Imagine going to your local hardware store because you need to buy a new hammer. Once you get to the entrance a woman holds the the door closed and asks you if it&#8217;s alright for someone to follow you around the store today. You say no. She then follows up by asking if you accept their hardware store agreement before proceeding inside - you tell her &#8220;sure&#8221;. She finally opens the door and lets you in. As you walk into the store she quickly stuffs a few advertisements for other local businesses into you hand. &#8220;Thanks&#8221;, you mutter.</p> + +<p>Once inside you realize the hardware store is <em>very big</em> and manually looking for a hammer might take a while. You walk up to the front desk to ask where you can find a hammer but notice the cashier is playing with their phone behind the counter. You try to get their attention but they simply raise their hand and shout &#8220;Be with you in a minute&#8221;. After a short while they get off their phone and <em>finally</em> listen to your question. They then tell you where to find the hammers.</p> + <p>Does this sound like a <em>fast</em> and easy experience?</p> -<p>As silly as this hypothetical trip to the hardware store might be, it's exactly what many current websites are putting their users through. Users - read <em>customers</em> - are coming to your website with a specific goal in mind; checking out a product, consuming information or just satisfying their curiosity. Stop putting so many blockers and excessive bloat in front of them.</p> -<h2>Data doesn't lie</h2> -<p>If my terrible analogy wasn't enough to convince you to implement better performance on your website, then maybe some "BIG DATA" will.</p> + +<p>As silly as this hypothetical trip to the hardware store might be, it&#8217;s exactly what many current websites are putting their users through. Users - read <em>customers</em> - are coming to your website with a specific goal in mind; checking out a product, consuming information or just satisfying their curiosity. Stop putting so many blockers and excessive bloat in front of them.</p> + +<h2 id="data-doesnt-lie">Data doesn&#8217;t lie</h2> + +<p>If my terrible analogy wasn&#8217;t enough to convince you to implement better performance on your website, then maybe some &#8220;BIG DATA&#8221; will.</p> + <ul> <li><a href="https://web.archive.org/web/20081117195303if_/http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt">Amazon (PowerPoint, slide #15)</a>: 100 ms of latency resulted in 1% less sales.</li> <li><a href="https://youtu.be/6x0cAzQ7PVs?t=936">Google (video)</a>: 500 ms caused a 20% drop in traffic.</li> @@ -477,123 +649,155 @@ p.select-all { <li><a href="https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/">Mozilla</a>: Shaving 2.2 seconds off page load time increased downloads by 15.4%</li> <li><a href="https://www.slideshare.net/stubbornella/designing-fast-websites-presentation/23-1_Create_a_component_library">Yahoo</a>: 400 ms resulted in a 5 to 9% drop in traffic</li> </ul> -<p><small>All data taken from [instant.page](https://instant.page) (which I am a huge fan of &hearts;)</small></p> -<p>The fact something as small as 100 ms can have such a profound impact on your bottom-line should be eye-opening. You're leaving money of the table by not tackling even the low-hanging, easy performance wins. You need to start valuing your users' time and stop serving them excessive garbage they never asked for.</p> -<h2>Small and easy wins</h2> -<p>Not all of these suggestions can work for every project (due to restrictions, brand guidelines, required marketing targets, etc.) but for most developers/designers they should be easy to implement: (in no particular order of importance)</p> + +<p>All data taken from <a href="https://instant.page">instant.page</a> (which I am a huge fan of &hearts;)</p> + +<p>The fact something as small as 100 ms can have such a profound impact on your bottom-line should be eye-opening. You&#8217;re leaving money of the table by not tackling even the low-hanging, easy performance wins. You need to start valuing your users&#8217; time and stop serving them excessive garbage they never asked for.</p> + +<h2 id="small-and-easy-wins">Small and easy wins</h2> + +<p>Not all of these suggestions can work for every project (due to restrictions, brand guidelines, required marketing targets, etc.) but for most developers&#47;designers they should be easy to implement: (in no particular order of importance)</p> + <ul> <li>Reduce the number of web requests + <ul> <li><a href="https://developers.google.com/web/fundamentals/performance/get-started/httprequests-5">HTTP Requests</a></li> -</ul> -</li> +</ul></li> <li>Use web-safe fonts when available or if using custom fonts utilize the <code>font-display</code> property + <ul> <li><a href="https://www.cssfontstack.com/">CSS Font Stack</a></li> <li><a href="https://css-tricks.com/font-display-masses/">Font Display for the Masses</a></li> -</ul> -</li> +</ul></li> <li>Make proper use of <em>critical CSS</em> + <ul> <li><a href="https://alexwright.net/web-design-secrets/how-to-use-critical-css/">How to Use Critical CSS</a></li> -<li>Automatically generate CSS based on "above the fold": <a href="https://github.com/filamentgroup/criticalCSS">criticalCSS</a></li> -</ul> -</li> -<li>Process all media (images / videos) through 3rd party tools +<li>Automatically generate CSS based on &#8220;above the fold&#8221;: <a href="https://github.com/filamentgroup/criticalCSS">criticalCSS</a></li> +</ul></li> +<li>Process all media (images &#47; videos) through 3rd party tools + <ul> <li><a href="https://cloudinary.com/">Cloudinary</a></li> <li><a href="https://kraken.io/">Kraken.io</a></li> <li><a href="https://piio.co/">Piio</a></li> <li>Sidenote: this blog uses the <a href="https://nhoizey.github.io/jekyll-cloudinary/">jekyll-cloudinary</a> plugin to automatically process images</li> -</ul> -</li> -<li>Use "just-in-time" preloading (highly recommended for improved UX) +</ul></li> +<li>Use &#8220;just-in-time&#8221; preloading (highly recommended for improved UX) + <ul> <li><a href="https://instant.page/">Instant Page</a></li> -</ul> -</li> +</ul></li> <li>Avoid using heavy tech-stacks whenever possible + <ul> <li>Unless it is a critical use-case, users should not have to process or download extra resources</li> <li>This also includes remove ads, pop-ups, 3rd party sign-up prompts, cookie notifications, over-the-top element animations, and all other <strong>garbage</strong>. This impacts <em>UX</em> performance, which is just as crucial as website loading speed</li> +</ul></li> </ul> -</li> -</ul> -<h2>No need to be extreme</h2> -<p>These quick "guidelines" are just a solid jumping-off point when tackling new projects or re-working current websites. There isn't some agreed upon <em>golden standard</em> when it comes to web performance, but I find these rules work as a great place to start. Hopefully it can help others as well.</p></content> - <link href="https://bt.ht/they-wont-wait"/> - <id>https://bt.ht/they-wont-wait</id> + +<h2 id="no-need-to-be-extreme">No need to be extreme</h2> + +<p>These quick &#8220;guidelines&#8221; are just a solid jumping-off point when tackling new projects or re-working current websites. There isn&#8217;t some agreed upon <em>golden standard</em> when it comes to web performance, but I find these rules work as a great place to start. Hopefully it can help others as well.</p></content> + <link href="https://btxx.org/they-wont-wait"/> + <id>https://btxx.org/they-wont-wait</id> <updated>2019-06-25T10:00:00Z</updated> <published>2019-06-25T10:00:00Z</published> </entry> <entry> <title>Text Align: Justify</title> - <content type="html"><h1>Text Align: Justify</h1> + <content type="html"><h1 id="text-align-justify">Text Align: Justify</h1> + <p>2019-05-22</p> + <p>The text-align property is fairly well known in the world of CSS, even among those just starting out with the language. Values such as <code>center</code>, <code>left</code> and <code>right</code> are used often with this property, but a more forgotten option is <code>justify</code>.</p> -<h2>What does justify do?</h2> + +<h2 id="what-does-justify-do">What does justify do?</h2> + <p>The MDN web docs define the <code>justify</code> value for <code>text-align</code> as such:</p> -<p><blockquote> - <p>The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</p> - <cite><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align">MDN web docs</a></cite> -</blockquote></p> -<h3>See it in action</h3> + +<h3 id="see-it-in-action">See it in action</h3> + <p><a href="https://codepen.io/bradleytaunt/pen/vwpmNz/">Live CodePen Example</a></p> -<h2>When should I use this?</h2> -<p>It isn't always appropriate to use <code>justify</code> in most instances, although it becomes very useful for long form articles or blog posts. Since it takes a heavy influence from original <em>print</em> book layouts, the <code>justify</code> value helps improve readability for larger chunks of content.</p> -<p><strong>Fair warning</strong>: it is best to remove any <code>justify</code> values when targeting smaller screen sizes. Mobile devices and/or tablets tend to be small enough to break up the content already. This CSS value is better suited for larger viewports.</p> -<h2>Browser support</h2> + +<h2 id="when-should-i-use-this">When should I use this?</h2> + +<p>It isn&#8217;t always appropriate to use <code>justify</code> in most instances, although it becomes very useful for long form articles or blog posts. Since it takes a heavy influence from original <em>print</em> book layouts, the <code>justify</code> value helps improve readability for larger chunks of content.</p> + +<p><strong>Fair warning</strong>: it is best to remove any <code>justify</code> values when targeting smaller screen sizes. Mobile devices and&#47;or tablets tend to be small enough to break up the content already. This CSS value is better suited for larger viewports.</p> + +<h2 id="browser-support">Browser support</h2> + <p>The good news is that all major browsers support the <code>justify</code> value for the <code>text-align</code> CSS property. So have some worry-free fun with it!</p></content> - <link href="https://bt.ht/text-align-justify"/> - <id>https://bt.ht/text-align-justify</id> + <link href="https://btxx.org/text-align-justify"/> + <id>https://btxx.org/text-align-justify</id> <updated>2019-05-22T10:00:00Z</updated> <published>2019-05-22T10:00:00Z</published> </entry> <entry> <title>The Wonders of Text Ellipsis</title> - <content type="html"><h1>The Wonders of Text Ellipsis</h1> + <content type="html"><h1 id="the-wonders-of-text-ellipsis">The Wonders of Text Ellipsis</h1> + <p>2016-11-15</p> -<p>A common issue when working with constrained UI elements is text overflowing outside of it's parent or breaking into addition lines (thus breaking the layout).</p> -<p>This is most commonly seen with the direct and placeholder values for input fields on form elements. For example, the following input placeholder will be cutoff from the user's view:</p> + +<p>A common issue when working with constrained UI elements is text overflowing outside of it&#8217;s parent or breaking into addition lines (thus breaking the layout).</p> + +<p>This is most commonly seen with the direct and placeholder values for input fields on form elements. For example, the following input placeholder will be cutoff from the user&#8217;s view:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/OgpzyY/">CodePen live example</a></p> + <p>Luckily, 3 simple CSS parameters can fix this.</p> + <pre><code>input::placeholder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </code></pre> -<p>This allows the user to understand there is more content cut out from their current view. It's not ideal to ever have content overflowing outside of the parent container, but if you need to the best workaround is to use text-overflow.</p></content> - <link href="https://bt.ht/te"/> - <id>https://bt.ht/te</id> + +<p>This allows the user to understand there is more content cut out from their current view. It&#8217;s not ideal to ever have content overflowing outside of the parent container, but if you need to the best workaround is to use text-overflow.</p></content> + <link href="https://btxx.org/te"/> + <id>https://btxx.org/te</id> <updated>2016-11-15T10:00:00Z</updated> <published>2016-11-15T10:00:00Z</published> </entry> <entry> <title>Making Tables Responsive With Minimal CSS</title> - <content type="html"><h1>Making Tables Responsive With Minimal CSS</h1> + <content type="html"><h1 id="making-tables-responsive-with-minimal-css">Making Tables Responsive With Minimal CSS</h1> + <p>2019-06-11</p> -<p><div class="update-box"> - <strong>Update (Oct 2019):</strong> <a href="https://twitter.com/aardrian">@aardrian</a> wrote a previous post about how changing the <code>display</code> properties on tables can impact screen readers. I highly recommend his excellent article <a href="https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html">Tables, CSS Display Properties, and ARIA</a> -</div></p> -<hr /> -<p>I find that the need to create responsive table layouts pops up far more often than most developers would expect. The gut reaction might to be implement some sort of custom grid-system or pull in a pre-built library. Don't do this - just use tables and some simple CSS.</p> -<p>My recent article, <a href="/html-like-1999">Write HTML Like It's 1999</a>, received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how <code>table</code> elements don't play nice with mobile devices or that it's not possible to have a useable layout on smaller screens. <em>This simply isn't true</em>.</p> + +<hr/> + +<p>I find that the need to create responsive table layouts pops up far more often than most developers would expect. The gut reaction might to be implement some sort of custom grid-system or pull in a pre-built library. Don&#8217;t do this - just use tables and some simple CSS.</p> + +<p>My recent article, <a href="/html-like-1999">Write HTML Like It&#8217;s 1999</a>, received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how <code>table</code> elements don&#8217;t play nice with mobile devices or that it&#8217;s not possible to have a useable layout on smaller screens. <em>This simply isn&#8217;t true</em>.</p> + <p>Included below are two separate demos showing how to optimize <code>table</code> HTML for mobile devices using only a minimal amount of CSS. These implementations may not be perfect, but they are far superior to injecting a bunch of custom <code>div</code> elements to <em>look</em> like tables.</p> -<h2>Demo 1: Just let them scroll</h2> -<p>Okay I will admit, this implementation isn't the <em>greatest</em> but I find it does work well with huge datasets. Simply set a <code>min-width</code> on your parent <code>table</code> element and the browser will just require the user to scroll the contents horizontally.</p> + +<h2 id="demo-1-just-let-them-scroll">Demo 1: Just let them scroll</h2> + +<p>Okay I will admit, this implementation isn&#8217;t the <em>greatest</em> but I find it does work well with huge datasets. Simply set a <code>min-width</code> on your parent <code>table</code> element and the browser will just require the user to scroll the contents horizontally.</p> + <pre><code>table { - min-width: 800px; /* Set your desired min-width here */ + min-width: 800px; &#47;* Set your desired min-width here *&#47; } </code></pre> + <p>Check out the CodePen below to see it in action:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/ewObbW/">Live CodePen Example</a></p> -<p>I actually prefer this method because of its simplicity and function. Users on mobile are familiar with scrolling since it is one of the most basic actions required. Seeing a "cut-off" table gives them an instant visual cue that they have the ability to scroll the content.</p> -<h2>Demo 2: More <u>flex</u>ible than you think</h2> + +<p>I actually prefer this method because of its simplicity and function. Users on mobile are familiar with scrolling since it is one of the most basic actions required. Seeing a &#8220;cut-off&#8221; table gives them an instant visual cue that they have the ability to scroll the content.</p> + +<h2 id="demo-2-more-flexible-than-you-think">Demo 2: More flexible than you think</h2> + <p>Using something like <code>flexbox</code> tends to work better when you are working with smaller table datasets. All you need to do is add some minor <code>flexbox</code> layout at your targeted mobile screen size.</p> -<pre><code>/* Using 800px as mobile screen in this example */ + +<pre><code>&#47;* Using 800px as mobile screen in this example *&#47; @media(max-width: 800px) { - /* Hide the table headings */ + &#47;* Hide the table headings *&#47; table thead { left: -9999px; position: absolute; @@ -608,19 +812,24 @@ p.select-all { } table td { border: 1px solid; - margin: 0 -1px -1px 0; /* Removes double-borders */ + margin: 0 -1px -1px 0; &#47;* Removes double-borders *&#47; width: 50%; } } </code></pre> + <p><a href="https://codepen.io/bradleytaunt/pen/mZbvOb/">Check out the CodePen demo</a></p> + <p>There are some caveats with this approach:</p> + <ol> <li>We currently hide the <code>thead</code> row when in mobile view (only visually - screen readers can still scan it)</li> <li>Some more custom work might be needed depending on how many items per <code>flexbox</code> row makes sense (based on project and dataset)</li> </ol> + <p>You could keep the table headings and style them the same as the <code>tbody</code> contents, but I find hiding them a little cleaner. That choice is entirely up to your personal preference. You can also decide to add heading <code>span</code> elements inside the main <code>tbody</code> elements like so:</p> -<pre><code>/* Default span styling - hidden on desktop */ + +<pre><code>&#47;* Default span styling - hidden on desktop *&#47; table td span { background: #eee; color: dimgrey; @@ -634,7 +843,7 @@ table td span { left: 0; } -/* Simple CSS for flexbox table on mobile */ +&#47;* Simple CSS for flexbox table on mobile *&#47; @media(max-width: 800px) { table thead { left: -9999px; @@ -651,113 +860,111 @@ table td span { table td { border: 1px solid; margin: 0 -1px -1px 0; - padding-top: 35px; /* additional padding to avoid heading overlap */ + padding-top: 35px; &#47;* additional padding to avoid heading overlap *&#47; position: relative; width: 50%; } - /* Show the heading span */ + &#47;* Show the heading span *&#47; table td span { display: block; } } </code></pre> + <p><a href="https://codepen.io/bradleytaunt/pen/mZdzmZ/">Live CodePen Example</a></p> + <p><strong>Updated</strong>: As pointed out by user <a href="https://news.ycombinator.com/user?id=mmoez">mmoez</a>, it is far less repetitive to use <code>:nth-child</code> pseudo selectors to implement the heading fields on mobile (as outlined in this <a href="https://css-tricks.com/responsive-data-tables/">CSS-Tricks article</a>).</p> -<h2>Why should I care to use <code>table</code> elements?</h2> + +<h2 id="why-should-i-care-to-use-elements">Why should I care to use <code>table</code> elements?</h2> + <p>Simply put: <strong>accessibility</strong> and <strong>proper semantics</strong>.</p> -<p>Why use a screwdriver when you need a hammer? Sure, you can make that screwdriver look and <em>almost</em> work the same as a hammer, but for what purpose? Just use the damn hammer<sup>1</sup>.</p> + +<p>Why use a screwdriver when you need a hammer? Sure, you can make that screwdriver look and <em>almost</em> work the same as a hammer, but for what purpose? Just use the damn hammer1.</p> + <p>Have fun making your tables responsive!</p> -<p><small><sup>1</sup> I know, this is a terrible analogy...</small></p></content> - <link href="https://bt.ht/tables"/> - <id>https://bt.ht/tables</id> + +<p>1 I know, this is a terrible analogy&#8230;</p></content> + <link href="https://btxx.org/tables"/> + <id>https://btxx.org/tables</id> <updated>2019-06-11T10:00:00Z</updated> <published>2019-06-11T10:00:00Z</published> </entry> <entry> <title>Tabbed Content Without JavaScript</title> - <content type="html"><h1>Tabbed Content Without JavaScript</h1> + <content type="html"><h1 id="tabbed-content-without-javascript">Tabbed Content Without JavaScript</h1> + <p>2019-01-28</p> + <p>Creating tabs is a fairly trivial and common practice in web design, but many times it requires JavaScript to properly implement. Fortunately it <em>is</em> possible to create tabbed content with only using CSS.</p> + <p><img src="/public/images/tabbed-content.png" alt="Tabbed elements with only CSS" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/abjmayw">Live CodePen Example</a></p> -<hr /> -<p><div class="message"> -<p><strong>Sidenote:</strong></p> -<p>While this method is semantic and accessible, you might consider using a pre-existing plugin for tabbed data.</p> -<p>This component tends to feel a little "stiff" compared to more fleshed out variations available. This pure CSS version is better suited as a fallback for when users have disabled JavaScript.</p> -</div></p> -<h2>The HTML</h2> + +<hr/> + +<h2 id="the-html">The HTML</h2> + <p>The skeleton for this component is fairly basic - we just need the following structure:</p> + <ol> -<li>Parent element for each tab item</li> -<li>Default radio input</li> -<li>Label linked to corresponding input</li> -<li>Inner content associated with each tab item</li> +<li><p>Parent element for each tab item</p></li> +<li><p>Default radio input</p></li> +<li><p>Label linked to corresponding input</p></li> +<li><p>Inner content associated with each tab item</p></li> </ol> -<pre><code>&lt;!-- Simple main container for all elements --&gt; -&lt;div class=&quot;tabs&quot;&gt; - &lt;!-- Parent container holding for individual tab item --&gt; - &lt;div class=&quot;tab-item&quot;&gt; +<p>Full HTML for reference:</p> - &lt;!-- Default radio input --&gt; - &lt;input class=&quot;tab-input&quot; type=&quot;radio&quot; name=&quot;tabs&quot; id=&quot;tab-1&quot;&gt; +<pre><code>&#60;div class="tabs"&#62; - &lt;!-- Label connected to radio input via `id` and `for` attributes --&gt; - &lt;label class=&quot;tab-label&quot; for=&quot;tab-1&quot;&gt;Tab 1&lt;/label&gt; + &#60;div class="tab-item"&#62; + &#60;input class="tab-input" type="radio" name="tabs" id="tab-1"&#62; + &#60;label class="tab-label" for="tab-1"&#62;Tab 1&#60;&#47;label&#62; + &#60;div class="tab-content"&#62;Content goes here&#60;&#47;div&#62; + &#60;&#47;div&#62; - &lt;!-- Full inner content of current tab item --&gt; - &lt;div class=&quot;tab-content&quot;&gt;Content goes here&lt;/div&gt; + &#60;div class="tab-item"&#62; + &#60;input class="tab-input" type="radio" name="tabs" id="tab-2"&#62; + &#60;label class="tab-label" for="tab-2"&#62;Tab 2&#60;&#47;label&#62; + &#60;div class="tab-content"&#62;Content goes here&#60;&#47;div&#62; + &#60;&#47;div&#62; - &lt;/div&gt; + &#60;div class="tab-item"&#62; + &#60;input class="tab-input" type="radio" name="tabs" id="tab-3"&#62; + &#60;label class="tab-label" for="tab-3"&#62;Tab 3&#60;&#47;label&#62; + &#60;div class="tab-content"&#62;Content goes here&#60;&#47;div&#62; + &#60;&#47;div&#62; -&lt;/div&gt; +&#60;&#47;div&#62; </code></pre> -<p>Full HTML for reference:</p> -<pre><code>&lt;div class=&quot;tabs&quot;&gt; - - &lt;div class=&quot;tab-item&quot;&gt; - &lt;input class=&quot;tab-input&quot; type=&quot;radio&quot; name=&quot;tabs&quot; id=&quot;tab-1&quot;&gt; - &lt;label class=&quot;tab-label&quot; for=&quot;tab-1&quot;&gt;Tab 1&lt;/label&gt; - &lt;div class=&quot;tab-content&quot;&gt;Content goes here&lt;/div&gt; - &lt;/div&gt; - &lt;div class=&quot;tab-item&quot;&gt; - &lt;input class=&quot;tab-input&quot; type=&quot;radio&quot; name=&quot;tabs&quot; id=&quot;tab-2&quot;&gt; - &lt;label class=&quot;tab-label&quot; for=&quot;tab-2&quot;&gt;Tab 2&lt;/label&gt; - &lt;div class=&quot;tab-content&quot;&gt;Content goes here&lt;/div&gt; - &lt;/div&gt; +<h2 id="the-css">The CSS</h2> - &lt;div class=&quot;tab-item&quot;&gt; - &lt;input class=&quot;tab-input&quot; type=&quot;radio&quot; name=&quot;tabs&quot; id=&quot;tab-3&quot;&gt; - &lt;label class=&quot;tab-label&quot; for=&quot;tab-3&quot;&gt;Tab 3&lt;/label&gt; - &lt;div class=&quot;tab-content&quot;&gt;Content goes here&lt;/div&gt; - &lt;/div&gt; - -&lt;/div&gt; -</code></pre> -<h2>The CSS</h2> <p>First, we need to set each <code>input</code>, <code>label</code> and inner content into their own parent containers:</p> -<pre><code>/* Main parent that holds all contents */ + +<pre><code>&#47;* Main parent that holds all contents *&#47; .tabs { height: 100%; min-height: 250px; position: relative; } -/* Each tab items (includes heading &amp; content) */ +&#47;* Each tab items (includes heading &#38; content) *&#47; .tab-item { display: inline; } </code></pre> + <p>Next, we will hide the default <code>radio</code> input and design our labels to resemble a basic web tab element. The <code>z-index</code> property on the label is important for how we will be stacking our content on the z-axis (labels above inner content for example).</p> -<pre><code>/* Hide the default radio inputs */ + +<pre><code>&#47;* Hide the default radio inputs *&#47; .tab-input { position: absolute; visibility: hidden; } -/* The main tab headings */ +&#47;* The main tab headings *&#47; .tab-label { background: white; box-shadow: inset 0 -4px 4px rgba(0,0,0,0.02); @@ -772,8 +979,10 @@ table td span { z-index: 0; } </code></pre> -<p>The main inner content of each tab needs to have an <code>absolute</code> position set as it's default, since the one currently selected will switch to <code>relative</code> on mobile (more on that in a moment):</p> -<pre><code>/* The inner tab content */ + +<p>The main inner content of each tab needs to have an <code>absolute</code> position set as it&#8217;s default, since the one currently selected will switch to <code>relative</code> on mobile (more on that in a moment):</p> + +<pre><code>&#47;* The inner tab content *&#47; .tab-content { background: white; bottom: 0; @@ -787,8 +996,10 @@ table td span { z-index: 0; } </code></pre> + <p>The final step is just telling the browser to style both the <code>label</code> and inner content of the currently selected radio <code>input</code>:</p> -<pre><code>/* Style the currently selected tab label */ + +<pre><code>&#47;* Style the currently selected tab label *&#47; .tab-input:checked + .tab-label { border: 1px solid #eee; border-bottom: 0; @@ -797,32 +1008,34 @@ table td span { z-index: 2; } -/* Show the currently selected tab content */ +&#47;* Show the currently selected tab content *&#47; .tab-input:checked ~ .tab-content { border: 1px solid #eee; z-index: 1; } </code></pre> -<p>It's as simple as that! For reference, here is the entire CSS file for easier access:</p> -<pre><code>/* Main parent that holds all contents */ + +<p>It&#8217;s as simple as that! For reference, here is the entire CSS file for easier access:</p> + +<pre><code>&#47;* Main parent that holds all contents *&#47; .tabs { height: 100%; min-height: 250px; position: relative; } -/* Each tab items (includes heading &amp; content) */ +&#47;* Each tab items (includes heading &#38; content) *&#47; .tab-item { display: inline; } -/* Hide the default radio inputs */ +&#47;* Hide the default radio inputs *&#47; .tab-input { position: absolute; visibility: hidden; } -/* The main tab headings */ +&#47;* The main tab headings *&#47; .tab-label { background: white; box-shadow: inset 0 -4px 4px rgba(0,0,0,0.02); @@ -837,7 +1050,7 @@ table td span { z-index: 0; } -/* The inner tab content */ +&#47;* The inner tab content *&#47; .tab-content { background: white; bottom: 0; @@ -851,7 +1064,7 @@ table td span { z-index: 0; } -/* Style the currently selected tab label */ +&#47;* Style the currently selected tab label *&#47; .tab-input:checked + .tab-label { border: 1px solid #eee; border-bottom: 0; @@ -860,14 +1073,17 @@ table td span { z-index: 2; } -/* Show the currently selected tab content */ +&#47;* Show the currently selected tab content *&#47; .tab-input:checked ~ .tab-content { border: 1px solid #eee; z-index: 1; } </code></pre> -<h2>Don't forget about mobile</h2> + +<h2 id="dont-forget-about-mobile">Don&#8217;t forget about mobile</h2> + <p>With only a few extra lines of CSS we can ensure that our custom tabs will stack on top of each other and look solid on mobile devices:</p> + <pre><code>@media(max-width:38em) { .tab-label { display: block; @@ -884,111 +1100,132 @@ table td span { } } </code></pre> -<h2>One minor caveat</h2> -<p>Even though I'm a pretty big fan of implementing tabs this way, there is a small drawback:</p> -<p>The <code>height</code> of the inner content doesn't grow dynamically since it defaults as <code>absolute</code>, so a <code>min-height</code> or <code>height</code> value is required on the parent element. This could become a problem in certain situations where you don't have the luxury of setting a static height.</p> + +<h2 id="one-minor-caveat">One minor caveat</h2> + +<p>Even though I&#8217;m a pretty big fan of implementing tabs this way, there is a small drawback:</p> + +<p>The <code>height</code> of the inner content doesn&#8217;t grow dynamically since it defaults as <code>absolute</code>, so a <code>min-height</code> or <code>height</code> value is required on the parent element. This could become a problem in certain situations where you don&#8217;t have the luxury of setting a static height.</p> + <p>Other than that, enjoy building some JavaScript-free tabs!</p></content> - <link href="https://bt.ht/tabbed-content"/> - <id>https://bt.ht/tabbed-content</id> + <link href="https://btxx.org/tabbed-content"/> + <id>https://btxx.org/tabbed-content</id> <updated>2019-01-28T10:00:00Z</updated> <published>2019-01-28T10:00:00Z</published> </entry> <entry> <title>Super Mario Blocks in CSS</title> - <content type="html"><h1>Super Mario Blocks in CSS</h1> + <content type="html"><h1 id="super-mario-blocks-in-css">Super Mario Blocks in CSS</h1> + <p>2019-02-15</p> -<p>Just because we can, let's make a quick demo on how to build interactive elements based off the original Mario punch blocks.</p> + +<p>Just because we can, let&#8217;s make a quick demo on how to build interactive elements based off the original Mario punch blocks.</p> + <p>What our final product will look like:</p> + <p><img src="/public/images/mario-block.png" alt="Mario blocks cretaed with CSS" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/JjEPOVe">Live CodePen Example</a></p> -<h2>The HTML</h2> -<p>The set of Mario blocks doesn't require a huge amount of effort for it's <code>html</code> structure, we only need:</p> + +<h2 id="the-html">The HTML</h2> + +<p>The set of Mario blocks doesn&#8217;t require a huge amount of effort for it&#8217;s <code>html</code> structure, we only need:</p> + <ul> <li>Parent div for each block</li> <li>Checkbox input</li> <li>Checkbox label</li> -<li>Inner label divs to represent the block "dots"</li> +<li>Inner label divs to represent the block &#8220;dots&#8221;</li> </ul> + <p><strong>Sidenote</strong>: This is only how <em>I</em> chose to add the inner dots to the Mario blocks. There are many other ways to create these, so please feel free to implement them however you see fit.</p> -<pre><code>&lt;!-- Main parent block --&gt; -&lt;div class=&quot;mario-block&quot;&gt; - &lt;!-- Checkbox input (disabled by default) --&gt; - &lt;input type=&quot;checkbox&quot; id=&quot;1&quot; disabled&gt; +<pre><code>&#60;!-- Main parent block --&#62; +&#60;div class="mario-block"&#62; + + &#60;!-- Checkbox input (disabled by default) --&#62; + &#60;input type="checkbox" id="1" disabled&#62; - &lt;!-- Checkbox label --&gt; - &lt;label for=&quot;1&quot;&gt; - &lt;!-- Inner dots for blocks --&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;/label&gt; + &#60;!-- Checkbox label --&#62; + &#60;label for="1"&#62; + &#60;!-- Inner dots for blocks --&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;&#47;label&#62; -&lt;/div&gt; +&#60;&#47;div&#62; </code></pre> + <p>Now we just add as many default blocks we want, along with the interactive punch block (<code>.mario-block--question</code>):</p> -<pre><code>&lt;div class=&quot;mario-block&quot;&gt; - &lt;input type=&quot;checkbox&quot; id=&quot;1&quot; disabled&gt; - &lt;label for=&quot;1&quot;&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;/label&gt; -&lt;/div&gt; - -&lt;div class=&quot;mario-block&quot;&gt; - &lt;input type=&quot;checkbox&quot; id=&quot;2&quot; disabled&gt; - &lt;label for=&quot;2&quot;&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;/label&gt; -&lt;/div&gt; - -&lt;div class=&quot;mario-block mario-block--question&quot;&gt; - &lt;input type=&quot;checkbox&quot; id=&quot;3&quot;&gt; - &lt;label for=&quot;3&quot;&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;question-mark&quot;&gt;&lt;/div&gt; - &lt;/label&gt; -&lt;/div&gt; - -&lt;div class=&quot;mario-block&quot;&gt; - &lt;input type=&quot;checkbox&quot; id=&quot;4&quot; disabled&gt; - &lt;label for=&quot;4&quot;&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;dot&quot;&gt;&lt;/div&gt; - &lt;/label&gt; -&lt;/div&gt; -</code></pre> -<h2>The CSS</h2> -<p>First we need to remove the default <code>checkbox</code> input styling and place all new styling on it's corresponding <code>label</code>.</p> -<pre><code>/* Mario block parent div */ + +<pre><code>&#60;div class="mario-block"&#62; + &#60;input type="checkbox" id="1" disabled&#62; + &#60;label for="1"&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;&#47;label&#62; +&#60;&#47;div&#62; + +&#60;div class="mario-block"&#62; + &#60;input type="checkbox" id="2" disabled&#62; + &#60;label for="2"&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;&#47;label&#62; +&#60;&#47;div&#62; + +&#60;div class="mario-block mario-block--question"&#62; + &#60;input type="checkbox" id="3"&#62; + &#60;label for="3"&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="question-mark"&#62;&#60;&#47;div&#62; + &#60;&#47;label&#62; +&#60;&#47;div&#62; + +&#60;div class="mario-block"&#62; + &#60;input type="checkbox" id="4" disabled&#62; + &#60;label for="4"&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;&#47;label&#62; +&#60;&#47;div&#62; +</code></pre> + +<h2 id="the-css">The CSS</h2> + +<p>First we need to remove the default <code>checkbox</code> input styling and place all new styling on it&#8217;s corresponding <code>label</code>.</p> + +<pre><code>&#47;* Mario block parent div *&#47; .mario-block { display: inline-block; height: 80px; - margin-right: -7px; /* Fixes inline-block margin bug */ + margin-right: -7px; &#47;* Fixes inline-block margin bug *&#47; position: relative; width: 80px; } -/* Hide default checkbox input */ +&#47;* Hide default checkbox input *&#47; .mario-block input { position: absolute; visibility: hidden; z-index: -1; } </code></pre> + <p>Now to target the <code>label</code> elements found inside the block:</p> -<pre><code>/* Style checkbox label accordingly */ + +<pre><code>&#47;* Style checkbox label accordingly *&#47; .mario-block label { background: #F88D2E; border: 4px solid #070000; @@ -999,7 +1236,9 @@ table td span { width: 100%; } </code></pre> + <p>Next we style our included <code>.dots</code> elements to be placed in the four corners of each block:</p> + <pre><code>.mario-block .dot { background: #070000; height: 5px; @@ -1023,13 +1262,16 @@ table td span { right: 4px; } </code></pre> -<h3>Punch-able block</h3> -<p>Now we need to include the "question mark" SVG and custom CSS for the interactive Mario block. You can <a href="/public/images/mario-block-question-mark.svg">download a copy</a> of the custom <code>svg</code> question mark I created.</p> + +<h3 id="punch-able-block">Punch-able block</h3> + +<p>Now we need to include the &#8220;question mark&#8221; SVG and custom CSS for the interactive Mario block. You can download a copy of the custom <code>svg</code> question mark I created.</p> + <pre><code>.mario-block--question label { cursor: pointer; } .mario-block--question .question-mark { - background-image: url('/public/images/mario-block-question-mark.svg'); + background-image: url(&#39;&#47;public&#47;images&#47;mario-block-question-mark.svg&#39;); background-position: center; background-repeat: no-repeat; background-size: 40px; @@ -1041,31 +1283,34 @@ table td span { z-index: 1; } </code></pre> -<h3>The last piece</h3> + +<h3 id="the-last-piece">The last piece</h3> + <p>The last item we need to design is the <code>checked</code> state of the interactive question mark block. The extra inner dark dashes will be added as <code>pseudo</code> elements:</p> -<pre><code>/* Mario block in `checked` state */ + +<pre><code>&#47;* Mario block in `checked` state *&#47; .mario-block input:checked + label { background: #885818; box-shadow: inset -4px -4px 0 #68400B, inset 4px 4px 0 #FAB89B; } -/* Hide both the default dots and question mark svg on checked */ +&#47;* Hide both the default dots and question mark svg on checked *&#47; .mario-block input:checked + label .dot, .mario-block input:checked + label .question-mark { display: none; } -/* Shared pseudo element styling */ +&#47;* Shared pseudo element styling *&#47; .mario-block input:checked + label:before, .mario-block input:checked + label:after { - content: ''; + content: &#39;&#39;; height: 20px; position: absolute; transform: rotate(45deg); width: 20px; } -/* Right dash */ +&#47;* Right dash *&#47; .mario-block input:checked + label:before { border-right: 4px solid #070000; right: 18px; @@ -1073,7 +1318,7 @@ table td span { transform: rotate(45deg); } -/* Left dash */ +&#47;* Left dash *&#47; .mario-block input:checked + label:after { border-left: 4px solid #070000; left: 18px; @@ -1081,246 +1326,344 @@ table td span { transform: rotate(-45deg); } </code></pre> -<p>That's it!</p> -<h2>Taking it further</h2> -<p>As always, you can take this concept and flesh it out even further. I was trying to mimic the "pixel" style of the original Mario games, but you could make the lighting and depth more realistic with some extra subtle gradients or <code>filter</code> properties.</p></content> - <link href="https://bt.ht/super-mario-blocks-css"/> - <id>https://bt.ht/super-mario-blocks-css</id> + +<p>That&#8217;s it!</p> + +<h2 id="taking-it-further">Taking it further</h2> + +<p>As always, you can take this concept and flesh it out even further. I was trying to mimic the &#8220;pixel&#8221; style of the original Mario games, but you could make the lighting and depth more realistic with some extra subtle gradients or <code>filter</code> properties.</p></content> + <link href="https://btxx.org/super-mario-blocks-css"/> + <id>https://btxx.org/super-mario-blocks-css</id> <updated>2019-02-15T10:00:00Z</updated> <published>2019-02-15T10:00:00Z</published> </entry> <entry> <title>I Want to Suckless and You Can Too</title> - <content type="html"><h1>I Want to Suckless and You Can Too</h1> + <content type="html"><h1 id="i-want-to-suckless-and-you-can-too">I Want to Suckless and You Can Too</h1> + <p>2022-12-23</p> -<h2>The Desire to Suckless</h2> -<p>While I have been happy with my <a href="/alpine">previous desktop setup</a> using Wayland on Alpine Linux, I just couldn't shake the urge to fully embrace the <a href="https://suckless.org">suckless ecosystem</a>. Although, this meant ditching Wayland and returning to X11, which is apparently the new "cool thing to hate" in Linux land. At least, that's what I've seen online lately.</p> -<p>But I'm getting ahead of myself...</p> -<h2>What is Suckless?</h2> -<p>I'm not going to spend too much time repeating what you can <a href="https://suckless.org/philosophy/">already read on the suckless.org website itself</a>, but in a nutshell:</p> -<blockquote><p>Software with a focus on simplicity, clarity, and frugality.</p> + +<h2 id="the-desire-to-suckless">The Desire to Suckless</h2> + +<p>While I have been happy with my <a href="/alpine">previous desktop setup</a> using Wayland on Alpine Linux, I just couldn&#8217;t shake the urge to fully embrace the <a href="https://suckless.org">suckless ecosystem</a>. Although, this meant ditching Wayland and returning to X11, which is apparently the new &#8220;cool thing to hate&#8221; in Linux land. At least, that&#8217;s what I&#8217;ve seen online lately.</p> + +<p>But I&#8217;m getting ahead of myself&#8230;</p> + +<h2 id="what-is-suckless">What is Suckless?</h2> + +<p>I&#8217;m not going to spend too much time repeating what you can <a href="https://suckless.org/philosophy/">already read on the suckless.org website itself</a>, but in a nutshell:</p> + +<blockquote> +<p>Software with a focus on simplicity, clarity, and frugality.</p> </blockquote> + <p>The developers also pride themselves on catering to <em>advanced and experienced computer users</em>, which is actually a refreshing take in my opinion. There are enough pre-existing open source solutions for non-technical or average Linux users looking for a desktop system. Having an option that requires users to deep-dive into the code, compile the programs manually, and better understand the software they are running is a welcome addition.</p> -<p>This process of "owing your software" was one of the core concepts that initially grabbed my attention. I've always been mildly mediocre at reading and writing C (ie. enough to be dangerous), so the thought of jumping head first into a system that would require me to better learn that language was tempting[^1]. And that temptation was enough to give it a shot!</p> -<h2>Let's Get Started</h2> -<p>So I made my decision. I would (at the very least) <em>try</em> switching my daily driver over to a completely "suckless" system. But I was immediately faced with my first obstacle: <em>which distro should I use</em>?</p> -<p>I'm sure many would suggest Gentoo, since it follows the principles of suckless more than any other distribution on the market. But I don't hate myself enough to go down that insane rabbit-hole. I'm hardly advanced enough to take on such a steep challenge, not to mention my plan was to build out a "setup script" so others could roll their own suckless build. Something like that looked daunting under Gentoo. Maybe in the future...</p> -<p>So what's left? Void? Arch? Something fresh, like Metis? I really didn't know the "best" choice. Maybe there were just <em>too many</em> options? </p> -<p>Luckily, I did know of a distro that was my go-to for most projects...</p> -<h2>Trying Alpine</h2> -<p>Alpine Linux is one of the best distributions available. If you disagree, you clearly haven't achieved galaxy-brain levels of intelligence and I feel sorry for you[^2].</p> -<p>Having just rolled my own <a href="https://git.sr.ht/~bt/alpine-linux-setup">installer script</a> for Wayland/Sway on Alpine, I figured why not piggyback off that existing project? Work smart not hard, right? So I started putting together an absolute <em>bare minimum</em> list of requirements I needed to get a proper desktop system running:</p> -<ul> -<li>working suspend/awake</li> + +<p>This process of &#8220;owing your software&#8221; was one of the core concepts that initially grabbed my attention. I&#8217;ve always been mildly mediocre at reading and writing C (ie. enough to be dangerous), so the thought of jumping head first into a system that would require me to better learn that language was tempting[^1]. And that temptation was enough to give it a shot!</p> + +<h2 id="lets-get-started">Let&#8217;s Get Started</h2> + +<p>So I made my decision. I would (at the very least) <em>try</em> switching my daily driver over to a completely &#8220;suckless&#8221; system. But I was immediately faced with my first obstacle: <em>which distro should I use</em>?</p> + +<p>I&#8217;m sure many would suggest Gentoo, since it follows the principles of suckless more than any other distribution on the market. But I don&#8217;t hate myself enough to go down that insane rabbit-hole. I&#8217;m hardly advanced enough to take on such a steep challenge, not to mention my plan was to build out a &#8220;setup script&#8221; so others could roll their own suckless build. Something like that looked daunting under Gentoo. Maybe in the future&#8230;</p> + +<p>So what&#8217;s left? Void? Arch? Something fresh, like Metis? I really didn&#8217;t know the &#8220;best&#8221; choice. Maybe there were just <em>too many</em> options? </p> + +<p>Luckily, I did know of a distro that was my go-to for most projects&#8230;</p> + +<h2 id="trying-alpine">Trying Alpine</h2> + +<p>Alpine Linux is one of the best distributions available. If you disagree, you clearly haven&#8217;t achieved galaxy-brain levels of intelligence and I feel sorry for you[^2].</p> + +<p>Having just rolled my own <a href="https://git.sr.ht/~bt/alpine-linux-setup">installer script</a> for Wayland&#47;Sway on Alpine, I figured why not piggyback off that existing project? Work smart not hard, right? So I started putting together an absolute <em>bare minimum</em> list of requirements I needed to get a proper desktop system running:</p> + +<ul> +<li>working suspend&#47;awake</li> <li>working audio</li> -<li>working wifi/networking</li> +<li>working wifi&#47;networking</li> <li>reduced screen tearing (X11 gave me problems in the past with this)</li> </ul> -<p>As you can see, I have very low expectations. But there were issues....</p> + +<p>As you can see, I have very low expectations. But there were issues&#8230;.</p> + <ol> <li>I could not build my blog locally (built via Jekyll) since the <code>sass-embedded</code> dependencies has not been built against musl-libc.</li> -<li>VSCodium would require the extra "bloat" of the flatpak manager (not to mention the spotty support some applications have through flatpak/snap).</li> -<li>The distro/system <em>feels</em> like it was better designed with Wayland in mind. Too often I felt like I was losing an uphill battle wrestling against Alpine.</li> +<li>VSCodium would require the extra &#8220;bloat&#8221; of the flatpak manager (not to mention the spotty support some applications have through flatpak&#47;snap).</li> +<li>The distro&#47;system <em>feels</em> like it was better designed with Wayland in mind. Too often I felt like I was losing an uphill battle wrestling against Alpine.</li> </ol> -<h2>Getting Sucked into the Void</h2> -<p>After mentioning my struggles on Mastodon, some <a href="https://fosstodon.org/@tdarb/109554576434981872">helpful friends suggested taking a look at Void</a>. I always knew of the project but never used it as a "daily driver". Since this was overall one <em>large</em> experiment, I figured I'd give it a shot.</p> -<p>I'm glad I did. Void Linux is <em>pretty great</em>.</p> -<p>The installer seemed more complex than Alpine at first, but I found an excellent walkthrough <a href="https://linuxiac.com/void-linux-installation/">here</a> (which I was more beginner-friendly than the official docs). Once everything was set, it was time to run my suckless "installer".</p> -<h2>Introducing void-suck</h2> -<p>If you don't care about the nitty-gritty details, feel free to just jump over to the <a href="https://git.sr.ht/~bt/void-suck">void-suck repo on scourehut</a> and read through the code yourself. There is nothing groundbreaking here. A huge inspiration came from <a href="https://github.com/mad-ara/void-rice">mad-ara's "void-rice" project on Github</a> - so a big thanks to him for making that project in the first place!</p> + +<h2 id="getting-sucked-into-the-void">Getting Sucked into the Void</h2> + +<p>After mentioning my struggles on Mastodon, some <a href="https://fosstodon.org/@tdarb/109554576434981872">helpful friends suggested taking a look at Void</a>. I always knew of the project but never used it as a &#8220;daily driver&#8221;. Since this was overall one <em>large</em> experiment, I figured I&#8217;d give it a shot.</p> + +<p>I&#8217;m glad I did. Void Linux is <em>pretty great</em>.</p> + +<p>The installer seemed more complex than Alpine at first, but I found an excellent walkthrough <a href="https://linuxiac.com/void-linux-installation/">here</a> (which I was more beginner-friendly than the official docs). Once everything was set, it was time to run my suckless &#8220;installer&#8221;.</p> + +<h2 id="introducing-void-suck">Introducing void-suck</h2> + +<p>If you don&#8217;t care about the nitty-gritty details, feel free to just jump over to the <a href="https://git.sr.ht/~bt/void-suck">void-suck repo on scourehut</a> and read through the code yourself. There is nothing groundbreaking here. A huge inspiration came from <a href="https://github.com/mad-ara/void-rice">mad-ara&#8217;s &#8220;void-rice&#8221; project on Github</a> - so a big thanks to him for making that project in the first place!</p> + <p>You can find the basic instructions in the README of the project itself, but it pulls in just the required dependencies along with my own custom suckless tools. You can easily swap out these with your own or simply default to the standard ones provided by <a href="https://suckless.org">suckless.org</a>.</p> -<p>Everything <em>should</em> work out of the box, but in case it doesn't please <a href="https://todo.sr.ht/~bt/void-suck">open a ticket</a> or <a href="https://lists.sr.ht/~bt/void-suck">submit a patch</a>. I'm certain I overlooked some items!</p> -<h2>Closing Thoughts</h2> -<p>We'll see how things go. So far I'm enjoying my time with a much simpler desktop and the "forced" push towards getting better with C is an added bonus. I still love Alpine, but Void is slowly winning me over...</p> -<h2>Refs</h2> + +<p>Everything <em>should</em> work out of the box, but in case it doesn&#8217;t please <a href="https://todo.sr.ht/~bt/void-suck">open a ticket</a> or <a href="https://lists.sr.ht/~bt/void-suck">submit a patch</a>. I&#8217;m certain I overlooked some items!</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>We&#8217;ll see how things go. So far I&#8217;m enjoying my time with a much simpler desktop and the &#8220;forced&#8221; push towards getting better with C is an added bonus. I still love Alpine, but Void is slowly winning me over&#8230;</p> + +<h2 id="refs">Refs</h2> + <ol> <li>I find this to be the best way to learn new things. Reading technical books are helpful, but concepts never stick with me unless I am forced to implement them.</li> -<li>This is a joke. Alpine is certainly not for everyone. There are many more "fully featured" distros available and everyone should use what they enjoy! Try not to take my blog posts so seriously...</li> +<li>This is a joke. Alpine is certainly not for everyone. There are many more &#8220;fully featured&#8221; distros available and everyone should use what they enjoy! Try not to take my blog posts so seriously&#8230;</li> </ol></content> - <link href="https://bt.ht/suckless"/> - <id>https://bt.ht/suckless</id> + <link href="https://btxx.org/suckless"/> + <id>https://btxx.org/suckless</id> <updated>2022-12-23T10:00:00Z</updated> <published>2022-12-23T10:00:00Z</published> </entry> <entry> <title>Launching Sublime Text with dmenu on Alpine Linux</title> - <content type="html"><h1>Launching Sublime Text with dmenu on Alpine Linux</h1> + <content type="html"><h1 id="launching-sublime-text-with-dmenu-on-alpine-linux">Launching Sublime Text with dmenu on Alpine Linux</h1> + <p>2023-04-13</p> -<p>Everyone seems to be running some version of VSCode as their main editor these days. But not me. I find VSCode to be too bloated for my needs - not to mention being built on top of electron instead of <em>native</em> code. I prefer running programs that don't try to devour all of my machine's available memory or spike my CPU.</p> -<blockquote><p><strong>Note</strong>: It's important to remember my personal machine is a ThinkPad X201 with only 6GB of RAM (plan to upgrade to 8GB soon!). Obviously your mileage may vary if you're using a beefier laptop or desktop...</p> + +<p>Everyone seems to be running some version of VSCode as their main editor these days. But not me. I find VSCode to be too bloated for my needs - not to mention being built on top of electron instead of <em>native</em> code. I prefer running programs that don&#8217;t try to devour all of my machine&#8217;s available memory or spike my CPU.</p> + +<blockquote> +<p><strong>Note</strong>: It&#8217;s important to remember my personal machine is a ThinkPad X201 with only 6GB of RAM (plan to upgrade to 8GB soon!). Obviously your mileage may vary if you&#8217;re using a beefier laptop or desktop&#8230;</p> </blockquote> -<p>In case the title of this post didn't make this obvious, my editor of choice is Sublime Text. It's fast, has a robust plugin ecosystem, and a very friendly community of users. Because of its popularity, troubleshooting any issues you might encounter becomes much easier with the amount of information freely available online.</p> -<p>The only minor downside is that it isn't <em>fully</em> open source. Personally, I think it is well worth buying a license directly from the developers to support their efforts.</p> -<p>If you haven't played around with it yet, I highly recommend giving it a try. At the very least, I guarantee you'll be impressed with the editor's performance and speed! [<a href="#1">#1</a>]</p> -<h2>One Small Problem...</h2> + +<p>In case the title of this post didn&#8217;t make this obvious, my editor of choice is Sublime Text. It&#8217;s fast, has a robust plugin ecosystem, and a very friendly community of users. Because of its popularity, troubleshooting any issues you might encounter becomes much easier with the amount of information freely available online.</p> + +<p>The only minor downside is that it isn&#8217;t <em>fully</em> open source. Personally, I think it is well worth buying a license directly from the developers to support their efforts.</p> + +<p>If you haven&#8217;t played around with it yet, I highly recommend giving it a try. At the very least, I guarantee you&#8217;ll be impressed with the editor&#8217;s performance and speed! [&#60;#1&#62;]</p> + +<h2 id="one-small-problem">One Small Problem&#8230;</h2> + <p>Sublime is precompiled against glibc and Alpine uses musl. This makes things a little difficult. Luckily we can get around this roadblock by falling back on flatpak (which is unfortunately still locked at version 3 for Sublime).</p> -<p>You'll need to install flatpak, give your current user permission to install flatpak apps, and then install Sublime.</p> + +<p>You&#8217;ll need to install flatpak, give your current user permission to install flatpak apps, and then install Sublime.</p> + <p>(The following snippets assume you are using <code>doas</code>. If you are using <code>sudo</code>, be sure to swap accordingly)</p> + <pre><code>apk add flatpak -adduser &lt;YourUsername&gt; flatpak -flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo +adduser &#60;YourUsername&#62; flatpak +flatpak remote-add --user --if-not-exists flathub https:&#47;&#47;flathub.org&#47;repo&#47;flathub.flatpakrepo </code></pre> + <p>Congrats. You now have setup <code>flatpak</code> on your machine! Next we install Sublime Text:</p> + <pre><code>flatpak install flathub com.sublimetext.three </code></pre> + <p>You could stop now and simply open Sublime anytime by running the following command in your terminal:</p> + <pre><code>flatpak run com.sublimetext.three </code></pre> -<p>This works perfectly fine but I find it a little cumbersome. I would much rather open my programs directly through dmenu. Let's set that up.</p> -<h2>Creating System Links</h2> -<pre><code>doas ln -s ~/.local/share/flatpak/exports/bin/com.sublimetext.three /usr/bin/sublimetext + +<p>This works perfectly fine but I find it a little cumbersome. I would much rather open my programs directly through dmenu. Let&#8217;s set that up.</p> + +<h2 id="creating-system-links">Creating System Links</h2> + +<pre><code>doas ln -s ~&#47;.local&#47;share&#47;flatpak&#47;exports&#47;bin&#47;com.sublimetext.three &#47;usr&#47;bin&#47;sublimetext </code></pre> + <p>Now that those directories are linked, simply open dmenu and start typing <code>sublimetext</code>. Done and done. No more terminal commands needed to open Sublime!</p> -<hr /> -<p><small> -1. <span id="1">I am aware that using a terminal-based editor such as vim or emacs would be even *more* efficient. For my own personal use I find more classical "IDE" applications to work best for me.</span> -</small></p></content> - <link href="https://bt.ht/sublime"/> - <id>https://bt.ht/sublime</id> + +<hr/> + +<p>1. I am aware that using a terminal-based editor such as vim or emacs would be even <em>more</em> efficient. For my own personal use I find more classical &#8220;IDE&#8221; applications to work best for me. +</p></content> + <link href="https://btxx.org/sublime"/> + <id>https://btxx.org/sublime</id> <updated>2023-04-13T10:00:00Z</updated> <published>2023-04-13T10:00:00Z</published> </entry> <entry> <title>Stripe Menu Dropdowns (CSS)</title> - <content type="html"><h1>Stripe Menu Dropdowns (CSS)</h1> + <content type="html"><h1 id="stripe-menu-dropdowns-css">Stripe Menu Dropdowns (CSS)</h1> + <p>2020-03-31</p> -<p>In a previous article I wrote, <a href="blog/minimal-css-menu">Minimal CSS: Dropdown Menus</a>, I showed how you could create a basic menu dropdown with only 121 bytes of CSS. While this demo is great for simple text-based menu dropdowns, it doesn't show just how complex (in a good way) you can make CSS-only menus. So, let's do just that.</p> -<h2>What we want to emulate</h2> -<p>I think, like most designers, that the UI and web design work from the <a href="https://stripe.com/">Stripe</a> team is pretty fantastic. Their clean approach using subtle animations and minimal elements make for a pleasant experience. Unfortunately, there is <i>one problem</i> with their current dropdown menus on their main website:</p> -<p><b>They don't work if JavaScript is disabled.</b></p> -<p>But we can easily fix that. So enough chit-chat, let's rip-off their menu design and recreate it with only CSS!</p> -<h3>Original (<a href="https://stripe.com">Stripe Website</a>)</h3> -<p><figure> - <img src="/public/images/stripe-default-menu.webp" alt="Stripe default menu"> - <figcaption>Stripe's default menu dropdown (using both CSS & JavaScript) (<a href="/public/images/stripe-default-menu.webp">direct link to image</a>)</figcaption> -</figure></p> -<h3>Our recreation (<a href="https://codepen.io/bradleytaunt/full/ExjMjLL">CodePen Demo</a>)</h3> -<p><figure> - <img src="/public/images/stripe-recreated.webp" alt="Stripe menu recreated"> - <figcaption>Our recreation with pure CSS (zero JavaScript) (<a href="/public/images/stripe-recreated.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>Although our redesign is far from an exact replica (some subtle animations are missing which could always be added) - it's still impressive what you can do with some bare-bones CSS. Just something to keep in mind the next time you decide to reach for a JavaScript library to implement a similar design.</p> -<h2>See it live in action</h2> -<p>Load in the CodePen below and play around with the menu dropdown. Feel free to re-use, break. share or <i>steal</i> this for any and all purposes. Enjoy!</p> + +<p>In a previous article I wrote, <a href="blog/minimal-css-menu">Minimal CSS: Dropdown Menus</a>, I showed how you could create a basic menu dropdown with only 121 bytes of CSS. While this demo is great for simple text-based menu dropdowns, it doesn&#8217;t show just how complex (in a good way) you can make CSS-only menus. So, let&#8217;s do just that.</p> + +<h2 id="what-we-want-to-emulate">What we want to emulate</h2> + +<p>I think, like most designers, that the UI and web design work from the <a href="https://stripe.com/">Stripe</a> team is pretty fantastic. Their clean approach using subtle animations and minimal elements make for a pleasant experience. Unfortunately, there is one problem with their current dropdown menus on their main website:</p> + +<p>They don&#8217;t work if JavaScript is disabled.</p> + +<p>But we can easily fix that. So enough chit-chat, let&#8217;s rip-off their menu design and recreate it with only CSS!</p> + +<h3 id="original-stripe-website">Original (<a href="https://stripe.com">Stripe Website</a>)</h3> + +<h3 id="our-recreation-codepen-demo">Our recreation (<a href="https://codepen.io/bradleytaunt/full/ExjMjLL">CodePen Demo</a>)</h3> + +<p>Although our redesign is far from an exact replica (some subtle animations are missing which could always be added) - it&#8217;s still impressive what you can do with some bare-bones CSS. Just something to keep in mind the next time you decide to reach for a JavaScript library to implement a similar design.</p> + +<h2 id="see-it-live-in-action">See it live in action</h2> + +<p>Load in the CodePen below and play around with the menu dropdown. Feel free to re-use, break. share or steal this for any and all purposes. Enjoy!</p> + <p><a href="https://codepen.io/bradleytaunt/pen/ExjMjLL">Live CodePen Example</a></p></content> - <link href="https://bt.ht/stripe-menu-css"/> - <id>https://bt.ht/stripe-menu-css</id> + <link href="https://btxx.org/stripe-menu-css"/> + <id>https://btxx.org/stripe-menu-css</id> <updated>2020-03-31T10:00:00Z</updated> <published>2020-03-31T10:00:00Z</published> </entry> <entry> <title>Yes, I Still Use jQuery</title> - <content type="html"><h1>Yes, I Still Use jQuery</h1> + <content type="html"><h1 id="yes-i-still-use-jquery">Yes, I Still Use jQuery</h1> + <p>2019-04-15</p> + <p>I have seen a handful of condescending comments from front-end developers since the newest build of jQuery (<a href="http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/">3.4.0</a>) released a couple of days ago. While I understand not all developers share the same work-style or are using the same tech-stack, dismissive comments towards any <em>useful</em> library comes off as entitled or elitist.</p> + <ul> -<li>"Why would you use jQuery nowadays?" </li> -<li>"People are still developing this library?"</li> -<li>"Why use jQuery when you can use [insert latest trendy web tech here]".</li> +<li>&#8220;Why would you use jQuery nowadays?&#8221; </li> +<li>&#8220;People are still developing this library?&#8221;</li> +<li>&#8220;Why use jQuery when you can use [insert latest trendy web tech here]&#8221;.</li> </ul> -<p><strong>I still use jQuery</strong>. Well, I may not use the library for all projects since every project is different - but I certainly don't avoid using it solely because "its jQuery". I've always believed in using the best tools for the job.</p> -<h2>Use what works for you</h2> + +<p><strong>I still use jQuery</strong>. Well, I may not use the library for all projects since every project is different - but I certainly don&#8217;t avoid using it solely because &#8220;its jQuery&#8221;. I&#8217;ve always believed in using the best tools for the job.</p> + +<h2 id="use-what-works-for-you">Use what works for you</h2> + <p>If you produce better work in a shorter amount of time using one of the latest and greatest technologies (React, Vue.js, Angular, etc.) then you should absolutely do so. If another developer can be just as productive building their projects with jQuery, what does it matter in the grand scheme of things?</p> -<p>My thought-process is this: a large percentage of web projects are done for clients not involved in the day-to-day happenings of the developer world. What they want is a solution to a particular problem. Clients don't care how things are done behind the scenes - so long as it is done efficiently and <em>properly</em>.</p> + +<p>My thought-process is this: a large percentage of web projects are done for clients not involved in the day-to-day happenings of the developer world. What they want is a solution to a particular problem. Clients don&#8217;t care how things are done behind the scenes - so long as it is done efficiently and <em>properly</em>.</p> + <p>I tend to follow these principles when working on a project (with shared equal importance):</p> + <ul> <li>fast performance</li> <li>accessible</li> <li>simple UI</li> <li>intuitive UX</li> </ul> -<p>As long as all of these items are accomplished, I don't care if the project was a direct export from Microsoft Word straight to the web<sup>1</sup>. If it works great, then it works great.</p> -<p>So use whatever tools make you a happier developer, as long as your projects don't suffer because of them.</p> -<p><small><sup>1</sup>This would obviously be terrible for development, but its just an extreme example</small></p></content> - <link href="https://bt.ht/still-using-jquery"/> - <id>https://bt.ht/still-using-jquery</id> + +<p>As long as all of these items are accomplished, I don&#8217;t care if the project was a direct export from Microsoft Word straight to the web1. If it works great, then it works great.</p> + +<p>So use whatever tools make you a happier developer, as long as your projects don&#8217;t suffer because of them.</p> + +<p>1This would obviously be terrible for development, but its just an extreme example</p></content> + <link href="https://btxx.org/still-using-jquery"/> + <id>https://btxx.org/still-using-jquery</id> <updated>2019-04-15T10:00:00Z</updated> <published>2019-04-15T10:00:00Z</published> </entry> <entry> <title>Stop Using Sticky Navigation on Mobile</title> - <content type="html"><h1>Stop Using Sticky Navigation on Mobile</h1> + <content type="html"><h1 id="stop-using-sticky-navigation-on-mobile">Stop Using Sticky Navigation on Mobile</h1> + <p>2019-10-06</p> -<p>Stop styling your web elements to be "sticky" on mobile. This creates a horrible experience for your users and also looks like trash from a UI perspective. Don't style your navigation (or any components for that matter) to be "sticky" on mobile. They create poor experiences for your users and take away valuable screen space.</p> -<h2>What do you mean by "sticky"?</h2> + +<p>Stop styling your web elements to be &#8220;sticky&#8221; on mobile. This creates a horrible experience for your users and also looks like trash from a UI perspective. Don&#8217;t style your navigation (or any components for that matter) to be &#8220;sticky&#8221; on mobile. They create poor experiences for your users and take away valuable screen space.</p> + +<h2 id="what-do-you-mean-by-sticky">What do you mean by &#8220;sticky&#8221;?</h2> + <p>The concept of <em>sticky</em> elements include but are not exclusive to:</p> + <ul> <li>Navigations that follow users as they scroll</li> <li>Chatbot prompt bubbles eating up half the bottom of the screen</li> -<li>Banners or modal prompts that pester the user to "sign up, accept cookies" etc.</li> +<li>Banners or modal prompts that pester the user to &#8220;sign up, accept cookies&#8221; etc.</li> </ul> + <p><strong>These are bad and you should feel bad for implementing them.</strong> Spacing and layout is a critical part of a product’s design and greatly impacts the experience of its users. Stop screwing it up with ugly sticky elements.</p> -<p>First, let's breakdown "sticky" navigations and why they're terrible. We'll also go over some easy solutions to avoid making these bad design decisions in the first place.</p> -<h2>The stalking navigation</h2> -<p>When you make a decision to eat away <code>&gt;50px</code> of space at the top of the page for your site's navigation - you're hurting your users. You're also making their time interacting with your website more painful.</p> -<p>"Wait!" I hear sticky-nav defenders exclaim, "this navigation bar makes it so the user can <em>easily</em> interact with the site's pages!"</p> -<p><strong>What absolute rubbish.</strong> A user should only see a website's navigation when they <em>need to use it</em>. This isn't rocket science.</p> -<p>Let's a take a look at the problem:</p> -<p><figure> - <img src="/public/images/sticky-bad-navigation.webp" alt="Bad navigation" /> - <figcaption>Fixed navigation: you lose valuable space for an element that might only be used once per visit (<a href="/public/images/sticky-bad-navigation.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>Knowing when to show navigation can be easily solved where the user isn't bogged down with a chunk of their screen permanently taken away, all the while still having access to the navigation. This can be fixed by simply understanding the user context at a given time. See below:</p> -<p><figure> - <img src="/public/images/sticky-good-navigation.webp" alt="Good navigation" /> - <figcaption>Static navigation: users can focus on what is important - <strong>the content</strong> (<a href="/public/images/sticky-good-navigation.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>Here the navigation flows up with the rest of the page as the user scrolls the main content into view. Don't worry about creating confusion - the user knows the navigation is still at the top of the page because they <em>watched it scroll out of view</em>. This is best paired by having a matching navigation in the footer of the page as well. That way, when the user makes it to the end of a specific view they can change pages right in the "footer". No need to scroll back to the top.</p> -<h2>The best of both worlds?</h2> + +<p>First, let&#8217;s breakdown &#8220;sticky&#8221; navigations and why they&#8217;re terrible. We&#8217;ll also go over some easy solutions to avoid making these bad design decisions in the first place.</p> + +<h2 id="the-stalking-navigation">The stalking navigation</h2> + +<p>When you make a decision to eat away <code>&#62;50px</code> of space at the top of the page for your site&#8217;s navigation - you&#8217;re hurting your users. You&#8217;re also making their time interacting with your website more painful.</p> + +<p>&#8220;Wait!&#8221; I hear sticky-nav defenders exclaim, &#8220;this navigation bar makes it so the user can <em>easily</em> interact with the site&#8217;s pages!&#8221;</p> + +<p><strong>What absolute rubbish.</strong> A user should only see a website&#8217;s navigation when they <em>need to use it</em>. This isn&#8217;t rocket science.</p> + +<p>Let&#8217;s a take a look at the problem:</p> + +<p>Knowing when to show navigation can be easily solved where the user isn&#8217;t bogged down with a chunk of their screen permanently taken away, all the while still having access to the navigation. This can be fixed by simply understanding the user context at a given time. See below:</p> + +<p>Here the navigation flows up with the rest of the page as the user scrolls the main content into view. Don&#8217;t worry about creating confusion - the user knows the navigation is still at the top of the page because they <em>watched it scroll out of view</em>. This is best paired by having a matching navigation in the footer of the page as well. That way, when the user makes it to the end of a specific view they can change pages right in the &#8220;footer&#8221;. No need to scroll back to the top.</p> + +<h2 id="the-best-of-both-worlds">The best of both worlds?</h2> + <p>Maybe you want to hide the navigation without losing the flexibility of it always being accessible at the top of the page? This is possible, although I find it still <em>somewhat</em> intrusive on the user. An easy way achieve this is by displaying the navigation when users perform a specific action, such as:</p> + <ul> <li>Long or multiple upward swipes on the page</li> <li>Pull down menu from top of current view (easily shown to user)</li> </ul> -<p><figure> - <img src="/public/images/sticky-good-navigation-2.webp" alt="Good navigation displaying top navigation" /> - <figcaption>Dynamic navigation: show the user the top navigation when a certain action is performed (<a href="/public/images/sticky-good-navigation-2.webp">direct link to image</a>)</figcaption> -</figure></p> -<h2>Navigations aren't the only culprits</h2> -<p>I wish that navigation items were the only sinners of the "sticky" position on mobile - but they are not alone. A few other problematic components include:</p> + +<h2 id="navigations-arent-the-only-culprits">Navigations aren&#8217;t the only culprits</h2> + +<p>I wish that navigation items were the only sinners of the &#8220;sticky&#8221; position on mobile - but they are not alone. A few other problematic components include:</p> + <ul> -<li>Chatbot or support "bubbles"</li> -<li>"Agree to our cookies" prompts</li> +<li>Chatbot or support &#8220;bubbles&#8221;</li> +<li>&#8220;Agree to our cookies&#8221; prompts</li> <li>Time-based pop-up modals</li> </ul> -<p>Every time you implement one of these components, somewhere in the world a puppy dies. Seriously - don't be part of the problem and build these things. Push back on "marketing research" or team leads who tell you that this crap works. You're making the mobile web worse for everyone and setting a terrible precedent for future developers.</p> + +<p>Every time you implement one of these components, somewhere in the world a puppy dies. Seriously - don&#8217;t be part of the problem and build these things. Push back on &#8220;marketing research&#8221; or team leads who tell you that this crap works. You&#8217;re making the mobile web worse for everyone and setting a terrible precedent for future developers.</p> + <p>Stay <em>static</em>, my friends!</p></content> - <link href="https://bt.ht/sticky-elements"/> - <id>https://bt.ht/sticky-elements</id> + <link href="https://btxx.org/sticky-elements"/> + <id>https://btxx.org/sticky-elements</id> <updated>2019-10-06T10:00:00Z</updated> <published>2019-10-06T10:00:00Z</published> </entry> <entry> <title>Stay Hungry</title> - <content type="html"><h1>Stay Hungry</h1> + <content type="html"><h1 id="stay-hungry">Stay Hungry</h1> + <p>2018-02-12</p> -<p>It can feel daunting in this developer / designer landscape to keep yourself up-to-date with the latest and greatest technologies available. Which new framework should I invest the most time into? Will it even be maintained a couple years down the road? Is it just a fad?</p> -<p>What about programming languages? Should I learn as many as possible or should I become an expert in one specialized area? <em>Should designers code?<span class="sidenote-number"></span></em> The list of possible <em>new</em> things you could be learning continues to grow. -<span class="sidenote">This is sarcasm. Please don't take this seriously...</span></p> -<h2>Jumping right in</h2> -<p>Want my advice? Pick something and dive head first into it. Don't worry if it's not the most popular programming language or if it's a new design system that isn't gaining much traction. Do you find it interesting? Awesome - that's what matters most. How can you teach yourself something new when you have <em>zero</em> interest in it?</p> -<h2>Less talk, more action</h2> + +<p>It can feel daunting in this developer &#47; designer landscape to keep yourself up-to-date with the latest and greatest technologies available. Which new framework should I invest the most time into? Will it even be maintained a couple years down the road? Is it just a fad?</p> + +<p>What about programming languages? Should I learn as many as possible or should I become an expert in one specialized area? <em>Should designers code?</em> The list of possible <em>new</em> things you could be learning continues to grow. +This is sarcasm. Please don&#8217;t take this seriously&#8230;</p> + +<h2 id="jumping-right-in">Jumping right in</h2> + +<p>Want my advice? Pick something and dive head first into it. Don&#8217;t worry if it&#8217;s not the most popular programming language or if it&#8217;s a new design system that isn&#8217;t gaining much traction. Do you find it interesting? Awesome - that&#8217;s what matters most. How can you teach yourself something new when you have <em>zero</em> interest in it?</p> + +<h2 id="less-talk-more-action">Less talk, more action</h2> + <p>So what am I currently doing to keep my mind fresh and thinking outside of my comfort zone?</p> + <ul> <li>Teaching myself the R programming language</li> <li>Deep diving into the <code>ggplot2</code> package</li> <li>Developing my first side project website using <code>blogdown</code> and Hugo</li> <li>Trying out Figma as my exclusive design program for the next few months</li> </ul> -<p>Programming your brain to learn something new can be frustrating and pull you out of your comfort zone. Don't let this become stressful - instead use it as inspiration to push yourself through the struggle.</p> + +<p>Programming your brain to learn something new can be frustrating and pull you out of your comfort zone. Don&#8217;t let this become stressful - instead use it as inspiration to push yourself through the struggle.</p> + <p>There is no real reason to avoid learning something new outside your current circle of knowledge - only crappy excuses.</p> + <p>Get on it.</p></content> - <link href="https://bt.ht/stay-hungry"/> - <id>https://bt.ht/stay-hungry</id> + <link href="https://btxx.org/stay-hungry"/> + <id>https://btxx.org/stay-hungry</id> <updated>2018-02-12T10:00:00Z</updated> <published>2018-02-12T10:00:00Z</published> </entry> <entry> <title>Migrating from GitHub to sourcehut</title> - <content type="html"><h1>Migrating from GitHub to sourcehut</h1> + <content type="html"><h1 id="migrating-from-github-to-sourcehut">Migrating from GitHub to sourcehut</h1> + <p>2022-11-14</p> -<p>It has taken a little bit longer than I anticipated, but I have finally started to port over all my personal open-source projects to <a href="https://sourcehut.org">sourcehut.org</a>. I'll get into the <em>why</em> and <em>how</em> momentarily, but first let's take a look at all the impacted projects:</p> -<h2>Ported Projects</h2> + +<p>It has taken a little bit longer than I anticipated, but I have finally started to port over all my personal open-source projects to <a href="https://sourcehut.org">sourcehut.org</a>. I&#8217;ll get into the <em>why</em> and <em>how</em> momentarily, but first let&#8217;s take a look at all the impacted projects:</p> + +<h2 id="ported-projects">Ported Projects</h2> + <ul> <li><a href="https://vanillacss.com">Vanilla CSS</a></li> <li><a href="https://1mb.club">1mb.club</a></li> @@ -1328,100 +1671,146 @@ flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flath <li><a href="https://shinobi.bt.ht">shinobi</a></li> <li><a href="https://audit.bt.ht">Web Audit</a></li> </ul> -<h2>Still WIP</h2> + +<h2 id="still-wip">Still WIP</h2> + <ul> <li><a href="https://1kb.club">1kb.club</a></li> <li><a href="https://phpetite.org">phpetite.org</a></li> </ul> -<p><em>Some others are being worked on but have less "popularity"</em></p> -<h2>Why?</h2> -<p>GitHub has landed itself in some hot water with their <a href="https://githubcopilotlitigation.com/">recent lawsuit(s) surrounding their Copilot feature</a>. I was already on the fence about keeping GitHub as my main "code forge" after they were scooped up by Microsoft, who then killed off Atom and then started collecting telemetry data through VSCode. This seemed like a good excuse as any to finally leave the platform. The <em>straw</em>, if you will.</p> -<p><em>&gt;&gt; Sourcehut has entered the chat &lt;&lt;</em></p> -<p>We, as designers and developers, shouldn't be supporting crap like this. I would much rather put my money where my mouth is and directly support a truly transparent alternative<a href="https://sourcehut.org/pricing/">^1]. Although I might only be paying for the <strong>Typical Hacker</strong> tier on [sourcehut</a>, I like to think that every little bit helps the platform. Even if you choose a different code forge, please consider donating to support independent alternatives!</p> -<h2>Git Email? Jump into the Deep End</h2> -<p>One aspect of sourcehut that initially scared me off was the lack of a proper "PR-flow", web UI-based system[^2]. Instead, reporting bugs, creating tickets, and submitting PATCHES are generally done through regular, plain-text email.</p> -<p>In the end, I'm glad I stuck it out. I'm still pretty slow with this new workflow (so please be patient with me if you submit a patch on a project!) but it actually seems cleaner. The phrase "streamlined" is what comes to mind.</p> -<p>And really, if you think about it, at one point in time GitHub's PR system would have been "new" for most users. Everything takes time to learn. This workflow is no different.</p> -<p>Drew (creator of sourcehut) actually put together an extremely helpful guide on getting <a href="https://git-send-email.io/">setup with git send-email</a>. I still reference back to this if/when I need to get up-and-running on a new machine. I highly recommend checking it out.</p> -<h2>Wrapping Up</h2> -<p>That's it really. I'm still in the process of moving over some projects, archiving original GitHub repos and becoming more adapted to the whole sourcehut "workflow". I'm enjoying it and it feels good to pay for something that is not only useful but open source at its core.</p> -<p>Will I be deleting my GitHub profile outright? Maybe. I'm not sure. For now the first step is removing any dependence I once had on that platform. Baby steps.</p> -<p>For those interested, my sourcehut public profile is: <a href="https://sr.ht/~bt/">https://sr.ht/~bt/</a>. Maybe I'll see you on the other side ;)</p> -<h2>Refs</h2> + +<p><em>Some others are being worked on but have less &#8220;popularity&#8221;</em></p> + +<h2 id="why">Why?</h2> + +<p>GitHub has landed itself in some hot water with their <a href="https://githubcopilotlitigation.com/">recent lawsuit(s) surrounding their Copilot feature</a>. I was already on the fence about keeping GitHub as my main &#8220;code forge&#8221; after they were scooped up by Microsoft, who then killed off Atom and then started collecting telemetry data through VSCode. This seemed like a good excuse as any to finally leave the platform. The <em>straw</em>, if you will.</p> + +<p><em>&#62;&#62; Sourcehut has entered the chat &#60;&#60;</em></p> + +<p>We, as designers and developers, shouldn&#8217;t be supporting crap like this. I would much rather put my money where my mouth is and directly support a truly transparent alternative[^1]. Although I might only be paying for the <strong>Typical Hacker</strong> tier on <a href="https://sourcehut.org/pricing/">sourcehut</a>, I like to think that every little bit helps the platform. Even if you choose a different code forge, please consider donating to support independent alternatives!</p> + +<h2 id="git-email-jump-into-the-deep-end">Git Email? Jump into the Deep End</h2> + +<p>One aspect of sourcehut that initially scared me off was the lack of a proper &#8220;PR-flow&#8221;, web UI-based system[^2]. Instead, reporting bugs, creating tickets, and submitting PATCHES are generally done through regular, plain-text email.</p> + +<p>In the end, I&#8217;m glad I stuck it out. I&#8217;m still pretty slow with this new workflow (so please be patient with me if you submit a patch on a project!) but it actually seems cleaner. The phrase &#8220;streamlined&#8221; is what comes to mind.</p> + +<p>And really, if you think about it, at one point in time GitHub&#8217;s PR system would have been &#8220;new&#8221; for most users. Everything takes time to learn. This workflow is no different.</p> + +<p>Drew (creator of sourcehut) actually put together an extremely helpful guide on getting <a href="https://git-send-email.io/">setup with git send-email</a>. I still reference back to this if&#47;when I need to get up-and-running on a new machine. I highly recommend checking it out.</p> + +<h2 id="wrapping-up">Wrapping Up</h2> + +<p>That&#8217;s it really. I&#8217;m still in the process of moving over some projects, archiving original GitHub repos and becoming more adapted to the whole sourcehut &#8220;workflow&#8221;. I&#8217;m enjoying it and it feels good to pay for something that is not only useful but open source at its core.</p> + +<p>Will I be deleting my GitHub profile outright? Maybe. I&#8217;m not sure. For now the first step is removing any dependence I once had on that platform. Baby steps.</p> + +<p>For those interested, my sourcehut public profile is: <a href="https://sr.ht/~bt/">https:&#47;&#47;sr.ht&#47;~bt&#47;</a>. Maybe I&#8217;ll see you on the other side ;)</p> + +<h2 id="refs">Refs</h2> + <ol> -<li>I keep an up-to-date document of all the open source software/communities I pay for on <a href="/uses">my "Uses" page</a> for reference.</li> -<li>Put your pitchforks and torches away - I'm aware that a web-facing UI exists on sourcehut as well!</li> +<li>I keep an up-to-date document of all the open source software&#47;communities I pay for on <a href="/uses">my &#8220;Uses&#8221; page</a> for reference.</li> +<li>Put your pitchforks and torches away - I&#8217;m aware that a web-facing UI exists on sourcehut as well!</li> </ol></content> - <link href="https://bt.ht/srht2"/> - <id>https://bt.ht/srht2</id> + <link href="https://btxx.org/srht2"/> + <id>https://btxx.org/srht2</id> <updated>2022-11-14T10:00:00Z</updated> <published>2022-11-14T10:00:00Z</published> </entry> <entry> <title>Never Do Spec Work for Free</title> - <content type="html"><h1>Never Do Spec Work for Free</h1> + <content type="html"><h1 id="never-do-spec-work-for-free">Never Do Spec Work for Free</h1> + <p>2022-11-07</p> -<p>Your time is valuable and shouldn't be taken for granted. Let me say that again for the people in the back: <em>your time is valuable and shouldn't be taken for granted</em>. Time is the most precious commodity we have as human beings, so never waste that time on free "spec" work. It's never worth it. Ever.</p> -<p>I've had up-and-coming designers reach out to me multiple times and ask specifically about completing spec work or "challenges" presented by hiring staff. My first question is normally, "Are they paying you for it?". If the answer is no, then I tell these individuals to move on. The company and the role is not worth their time.</p> -<p>There are plenty of companies that respect the hiring process and will pay you for your time. Good on them. These are the places that you should be striving to work with/for. Avoid those who don't. If they don't respect your time before they even consider hiring you, what makes you think they'll respect it once you're on the team?</p> -<h2>Never?</h2> -<p>Never. If a company or individual is considering you for a role, so much so that they are interested in seeing how you would work with them directly, <strong>they need to pay you</strong>. These companies (large or small) would <em>laugh</em> at the concept of doing something free for you. Why is their time respected but yours isn't?</p> -<h2>Asking for Free Spec Work? Stop.</h2> -<p>If you're implementing these practices at your place of business, then you're part of the problem. Maybe you need a more robust candidate review process, so those interviewees you are willing to pay for "code challenges" or spec work are more finely tuned. Maybe you just need to re-evaluate how much you value the workers you're looking to hire.</p> -<p>The software world is a strange beast where we have adapted this "work for free before we <em>think</em> about paying you". Imagine implementing this system for something like a plumber?</p> -<p>"Hey, could you install this new sink for me - for <strong>free</strong>? Then, if I think you did a good job, I can start to pay you for other work around my house?"</p> + +<p>Your time is valuable and shouldn&#8217;t be taken for granted. Let me say that again for the people in the back: <em>your time is valuable and shouldn&#8217;t be taken for granted</em>. Time is the most precious commodity we have as human beings, so never waste that time on free &#8220;spec&#8221; work. It&#8217;s never worth it. Ever.</p> + +<p>I&#8217;ve had up-and-coming designers reach out to me multiple times and ask specifically about completing spec work or &#8220;challenges&#8221; presented by hiring staff. My first question is normally, &#8220;Are they paying you for it?&#8221;. If the answer is no, then I tell these individuals to move on. The company and the role is not worth their time.</p> + +<p>There are plenty of companies that respect the hiring process and will pay you for your time. Good on them. These are the places that you should be striving to work with&#47;for. Avoid those who don&#8217;t. If they don&#8217;t respect your time before they even consider hiring you, what makes you think they&#8217;ll respect it once you&#8217;re on the team?</p> + +<h2 id="never">Never?</h2> + +<p>Never. If a company or individual is considering you for a role, so much so that they are interested in seeing how you would work with them directly, <strong>they need to pay you</strong>. These companies (large or small) would <em>laugh</em> at the concept of doing something free for you. Why is their time respected but yours isn&#8217;t?</p> + +<h2 id="asking-for-free-spec-work-stop.">Asking for Free Spec Work? Stop.</h2> + +<p>If you&#8217;re implementing these practices at your place of business, then you&#8217;re part of the problem. Maybe you need a more robust candidate review process, so those interviewees you are willing to pay for &#8220;code challenges&#8221; or spec work are more finely tuned. Maybe you just need to re-evaluate how much you value the workers you&#8217;re looking to hire.</p> + +<p>The software world is a strange beast where we have adapted this &#8220;work for free before we <em>think</em> about paying you&#8221;. Imagine implementing this system for something like a plumber?</p> + +<p>&#8220;Hey, could you install this new sink for me - for <strong>free</strong>? Then, if I think you did a good job, I can start to pay you for other work around my house?&#8221;</p> + <p>Good luck with that.</p> -<h2>Be Confident</h2> -<p>This post is mostly targeted to new designers and developers, but can certainly still apply to those with years of experience under their belts. I've been guilty of doing free spec work years ago when I was first starting out (my grey hairs are showing...) and it <strong>never</strong> paid off. Literally and figuratively. Learn through my own mistakes and just walk away from people asking you to work for free.</p> + +<h2 id="be-confident">Be Confident</h2> + +<p>This post is mostly targeted to new designers and developers, but can certainly still apply to those with years of experience under their belts. I&#8217;ve been guilty of doing free spec work years ago when I was first starting out (my grey hairs are showing&#8230;) and it <strong>never</strong> paid off. Literally and figuratively. Learn through my own mistakes and just walk away from people asking you to work for free.</p> + <p>No matter what you think about your skill level or real-world experience, you need to have at least a bare-minimum standard for yourself: </p> -<p><strong>Never work for free</strong> -- Unless you <em>choose</em> to work for free on something like a personal or open source project. That is obviously a different situation!</p></content> - <link href="https://bt.ht/spec"/> - <id>https://bt.ht/spec</id> + +<p><strong>Never work for free</strong> &#8211; Unless you <em>choose</em> to work for free on something like a personal or open source project. That is obviously a different situation!</p></content> + <link href="https://btxx.org/spec"/> + <id>https://btxx.org/spec</id> <updated>2022-11-07T10:00:00Z</updated> <published>2022-11-07T10:00:00Z</published> </entry> <entry> <title>SOMA Inspired Terminal Display with CSS</title> - <content type="html"><h1>SOMA Inspired Terminal Display with CSS</h1> + <content type="html"><h1 id="soma-inspired-terminal-display-with-css">SOMA Inspired Terminal Display with CSS</h1> + <p>2021-05-29</p> + <p>A few years back I played (and loved) <a href="https://store.steampowered.com/app/282140/SOMA/">SOMA</a>, a first-person sci-fi horror-adventure game. The story was intriguing and the developers nailed the overall atmosphere of Pathos-II. Though both those aspects were great, what I found the most enjoyable were the interactive computers and displays found sprinkled throughout the world.</p> -<p>Three years ago I wanted to see if I could recreate one of those terminal displays with HTML &amp; CSS. And I did just that.</p> -<p>So, why am I writing about this <em>three years later</em>? Well, I never did a proper write-up explaining how I achieved it. I'm sure someone out there in the wild west of the web could get some value out of this tutorial, right? I hope so!</p> -<h2>The Live Demo</h2> + +<p>Three years ago I wanted to see if I could recreate one of those terminal displays with HTML &#38; CSS. And I did just that.</p> + +<p>So, why am I writing about this <em>three years later</em>? Well, I never did a proper write-up explaining how I achieved it. I&#8217;m sure someone out there in the wild west of the web could get some value out of this tutorial, right? I hope so!</p> + +<h2 id="the-live-demo">The Live Demo</h2> + <p><img src="/public/images/soma-terminal.png" alt="Terminal based off the SOMA computers" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/ZEeLgmz">Live CodePen Example</a></p> -<h2>The HTML</h2> + +<h2 id="the-html">The HTML</h2> + <p>Nothing fancy going on here - just some simple <code>div</code> elements holding a few paragraphs and spans:</p> -<pre><code>&lt;div class=&quot;outer-frame&quot;&gt; - &lt;div class=&quot;screen&quot;&gt; - &lt;div class=&quot;screen-guts&quot;&gt; - &lt;h2&gt;Key Control&lt;/h2&gt; - &lt;p&gt;&lt;span&gt;Panel Chip&lt;/span&gt; (Connector)&lt;/p&gt; - &lt;p class=&quot;column&quot;&gt; - Security Keys: 023-027&lt;br&gt;C819738-23 - &lt;br&gt; - &lt;span class=&quot;error&quot;&gt;Error: Key Expired&lt;/span&gt; - &lt;br&gt; - &lt;em&gt;Please update...&lt;/em&gt; - &lt;/p&gt; - &lt;p&gt; - &lt;span&gt;Permission&lt;/span&gt; - &lt;br&gt; + +<pre><code>&#60;div class="outer-frame"&#62; + &#60;div class="screen"&#62; + &#60;div class="screen-guts"&#62; + &#60;h2&#62;Key Control&#60;&#47;h2&#62; + &#60;p&#62;&#60;span&#62;Panel Chip&#60;&#47;span&#62; (Connector)&#60;&#47;p&#62; + &#60;p class="column"&#62; + Security Keys: 023-027&#60;br&#62;C819738-23 + &#60;br&#62; + &#60;span class="error"&#62;Error: Key Expired&#60;&#47;span&#62; + &#60;br&#62; + &#60;em&#62;Please update...&#60;&#47;em&#62; + &#60;&#47;p&#62; + &#60;p&#62; + &#60;span&#62;Permission&#60;&#47;span&#62; + &#60;br&#62; Standard ThetaCipher - &lt;br&gt; - &lt;span&gt;Secop-Jstrohweier&lt;/span&gt; - &lt;/p&gt; - &lt;button class=&quot;update-button&quot;&gt;Update Chip&lt;/button&gt; - &lt;/div&gt; - &lt;div class=&quot;bottom-controls&quot;&gt; - &lt;button class=&quot;back-button&quot;&gt;Back 背部&lt;/button&gt; - &lt;/div&gt; - &lt;/div&gt; -&lt;/div&gt; -</code></pre> -<h2>The CSS</h2> -<p>Let's just dump all the CSS right here (don't worry, it looks far more complicated than it really is):</p> -<pre><code>@import url('https://opentype.netlify.com/sansation/index.css'); + &#60;br&#62; + &#60;span&#62;Secop-Jstrohweier&#60;&#47;span&#62; + &#60;&#47;p&#62; + &#60;button class="update-button"&#62;Update Chip&#60;&#47;button&#62; + &#60;&#47;div&#62; + &#60;div class="bottom-controls"&#62; + &#60;button class="back-button"&#62;Back 背部&#60;&#47;button&#62; + &#60;&#47;div&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<h2 id="the-css">The CSS</h2> + +<p>Let&#8217;s just dump all the CSS right here (don&#8217;t worry, it looks far more complicated than it really is):</p> + +<pre><code>@import url(&#39;https:&#47;&#47;opentype.netlify.com&#47;sansation&#47;index.css&#39;); * { box-sizing: border-box; @@ -1429,7 +1818,7 @@ flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flath body { background: #333; - font-family: &quot;Sansation&quot;, sans-serif; + font-family: "Sansation", sans-serif; padding: 3rem 0; } @@ -1437,7 +1826,7 @@ button { appearance: none; border: 0; cursor: pointer; - font-family: &quot;Inconsolata&quot;, &quot;Consolas&quot;, mono; + font-family: "Inconsolata", "Consolas", mono; font-size: 18px; transition: 0.3s ease all; } @@ -1450,7 +1839,7 @@ button { } .outer-frame { - background: #ccc url(&quot;https://preview.ibb.co/iS9nz7/screen_grunge.webp&quot;) no-repeat center; + background: #ccc url("https:&#47;&#47;preview.ibb.co&#47;iS9nz7&#47;screen_grunge.webp") no-repeat center; background-size: cover; border-radius: 5px; box-shadow: 0 5px 20px rgba(0,0,0,0.6); @@ -1461,7 +1850,7 @@ button { background: rgba(0,0,0,0.3); border-radius: 5px; box-shadow: inset 5px 5px 10px rgba(0,0,0,0.4), 1px 1px 1px rgba(255,255,255,0.3); - content: ''; + content: &#39;&#39;; height: 538px; left: 15px; position: absolute; @@ -1470,7 +1859,7 @@ button { } .screen { - background: #000 url(&quot;https://image.ibb.co/gOqSz7/screen_dust.webp&quot;) no-repeat center; + background: #000 url("https:&#47;&#47;image.ibb.co&#47;gOqSz7&#47;screen_dust.webp") no-repeat center; background-size: cover; border-radius: 5px; height: 450px; @@ -1481,11 +1870,11 @@ button { width: 600px; } .screen:after { - background: url(&quot;https://s13.postimg.org/85ryuy1o7/dust.webp&quot;) no-repeat center; + background: url("https:&#47;&#47;s13.postimg.org&#47;85ryuy1o7&#47;dust.webp") no-repeat center; background-size: cover; border-radius: 5px; box-shadow: inset 0 0 20px rgba(0,0,0,0.5), inset 5px 5px 10px rgba(0,0,0,0.4), 1px 1px 1px rgba(255,255,255,0.3); - content: ''; + content: &#39;&#39;; height: 100%; left: 0; opacity: 0.8; @@ -1507,7 +1896,7 @@ button { .screen-guts:after { border: 2px solid #8fc8c8; color: #8fc8c8; - content: '键'; + content: &#39;键&#39;; padding: 5px 8px; position: absolute; right: 0; @@ -1572,126 +1961,176 @@ button { background: rgba(0,0,0,0.6); } </code></pre> -<p>The overall styling is fairly simple (which is great for browser support) with only a couple pseudo elements. It's important to include the custom <code>Sansation</code> typeface, since this is what the game uses for most UI elements and terminals. (I'm loading in this font via my <a href="https://opentype.netlify.app">OpenType side project</a>)</p> + +<p>The overall styling is fairly simple (which is great for browser support) with only a couple pseudo elements. It&#8217;s important to include the custom <code>Sansation</code> typeface, since this is what the game uses for most UI elements and terminals. (I&#8217;m loading in this font via my <a href="https://opentype.netlify.app">OpenType side project</a>)</p> + <p>The most important properties that truly bring this design together are those associated with the <code>.outer-frame</code> and <code>.screen</code> pseudo elements. Both of these elements use custom <code>background-images</code> that give a little more depth and life to the terminal - in this case fingerprints, dust and smudges.</p> + <p>Feel free to swap these image textures out with your own and alter the terminal as you see fit!</p></content> - <link href="https://bt.ht/soma-terminal-css"/> - <id>https://bt.ht/soma-terminal-css</id> + <link href="https://btxx.org/soma-terminal-css"/> + <id>https://btxx.org/soma-terminal-css</id> <updated>2021-05-29T10:00:00Z</updated> <published>2021-05-29T10:00:00Z</published> </entry> <entry> <title>Embracing Slow Tech</title> - <content type="html"><h1>Embracing Slow Tech</h1> + <content type="html"><h1 id="embracing-slow-tech">Embracing Slow Tech</h1> + <p>2022-11-22</p> -<p>I'm writing this post on my "new" X260 ThinkPad running <a href="https://garudalinux.org/">Garuda Linux</a> through Wayland/Sway and it is going well so far. Setting things up was much easier than I initially expected. There were only a few minor tweaks I had to make, such as setting <code>vim</code> as the default EDITOR and installing a small collection of applications (Bitwarden, qutebrowser etc).</p> + +<p>I&#8217;m writing this post on my &#8220;new&#8221; X260 ThinkPad running <a href="https://garudalinux.org/">Garuda Linux</a> through Wayland&#47;Sway and it is going well so far. Setting things up was much easier than I initially expected. There were only a few minor tweaks I had to make, such as setting <code>vim</code> as the default EDITOR and installing a small collection of applications (Bitwarden, qutebrowser etc).</p> + <p>I ran into some headaches with generating proper SSH keys but that was solved by calling in <code>ssh-agent</code> whenever launching a new instance of Alacritty. This could certainly be cleaned up further, but for now everything works fine. (A more detailed post about this X260 is in the works!)</p> -<p>"Okay", I hear you say, "But what does this have to do with <em>slow tech</em>?"</p> + +<p>&#8220;Okay&#8221;, I hear you say, &#8220;But what does this have to do with <em>slow tech</em>?&#8221;</p> + <p>Good question! Let me explain.</p> -<h2>Purposely Unplugged</h2> -<p>For the longest time I have had some form of "smart" device on my persons while performing tasks away from my main computer. Whether that was grocery shopping, playing with the kids in the backyard, going on road trips - you name it. This was never a <em>bad thing</em> or something I actively looked to change. In fact, I hardly used these devices to connect much to the internet anyway[^1]. But I did notice that I would check things like Mastodon or my email every so often. </p> -<p>What I started to realize was that I was checking these "online" items out of pure habit. I hardly ever responded to any email on my iPhone (it doesn't help that Apple Mail on iOS is horrendous for plain text emails) and engaging in Mastodon, while fun, was certainly not a priority while out of the office. My attitude towards being "always online" started to shift towards being what I call <em>purposely unplugged</em>. I decided to make a personal change towards my online access:</p> -<blockquote><p>If something is important, then I will take the time to complete that task at <strong>my office computer</strong>. I do not need to be "always online".</p> + +<h2 id="purposely-unplugged">Purposely Unplugged</h2> + +<p>For the longest time I have had some form of &#8220;smart&#8221; device on my persons while performing tasks away from my main computer. Whether that was grocery shopping, playing with the kids in the backyard, going on road trips - you name it. This was never a <em>bad thing</em> or something I actively looked to change. In fact, I hardly used these devices to connect much to the internet anyway[^1]. But I did notice that I would check things like Mastodon or my email every so often. </p> + +<p>What I started to realize was that I was checking these &#8220;online&#8221; items out of pure habit. I hardly ever responded to any email on my iPhone (it doesn&#8217;t help that Apple Mail on iOS is horrendous for plain text emails) and engaging in Mastodon, while fun, was certainly not a priority while out of the office. My attitude towards being &#8220;always online&#8221; started to shift towards being what I call <em>purposely unplugged</em>. I decided to make a personal change towards my online access:</p> + +<blockquote> +<p>If something is important, then I will take the time to complete that task at <strong>my office computer</strong>. I do not need to be &#8220;always online&#8221;.</p> </blockquote> -<p>It really makes you wonder how people back in the late 90s or early 2000s ever managed their lives without being connected online 24/7. I certainly remember a time where you booted up a family computer to browse the internet, respond to emails, and complete work items. When you were done - you were done. You shutdown the machine and went about your life. "I'll check back later tonight before bed" or "Hopefully there will be an email response by tomorrow morning" was the normal thought process after logging off. Now there is no "logging off". It's just switching devices. I don't think it is healthy and really who benefits? Certainly not the individual.</p> -<p>Hardware (computers specifically in this case) serve a purpose. They are meant to serve the individual using them. When did we cross-over into a world where we seem to be serving our devices? <strong>You are not important enough to be "available online" all the time</strong>. Sorry, but it's true.</p> -<h2>Mobile Sucks Anyway</h2> + +<p>It really makes you wonder how people back in the late 90s or early 2000s ever managed their lives without being connected online 24&#47;7. I certainly remember a time where you booted up a family computer to browse the internet, respond to emails, and complete work items. When you were done - you were done. You shutdown the machine and went about your life. &#8220;I&#8217;ll check back later tonight before bed&#8221; or &#8220;Hopefully there will be an email response by tomorrow morning&#8221; was the normal thought process after logging off. Now there is no &#8220;logging off&#8221;. It&#8217;s just switching devices. I don&#8217;t think it is healthy and really who benefits? Certainly not the individual.</p> + +<p>Hardware (computers specifically in this case) serve a purpose. They are meant to serve the individual using them. When did we cross-over into a world where we seem to be serving our devices? <strong>You are not important enough to be &#8220;available online&#8221; all the time</strong>. Sorry, but it&#8217;s true.</p> + +<h2 id="mobile-sucks-anyway">Mobile Sucks Anyway</h2> + <p>Browsing the web is an absolute shitshow on mobile devices. Every service and their grandma begs you to install their native app. Adblockers are pretty much non-existent, which makes the modern web almost intolerable to visit. Then you have the issue of walled gardens, security breaches, planned EOL for perfectly functional hardware, increased e-waste - the list goes on.</p> -<p>Functional computing and online interactions have already been perfected. It's called a <strong>computer</strong>[^3]. Computers (desktops and laptops) give us the ability to control our devices at the OS-level, granting us incredible freedom to tweak things to our individual preferences. Unless you are technical enough to fiddle around with "beta" mobile Linux devices, the majority of users are stuck with what they are given. And it isn't much.</p> -<p>The corporate push to move everyone over to "mobile computing" is no accident. The ability to ban certain apps, push ads to users, collect customer details, and harvest user data is more than enough motivation for companies to usher in a future of "mobile" computing.</p> + +<p>Functional computing and online interactions have already been perfected. It&#8217;s called a <strong>computer</strong>[^3]. Computers (desktops and laptops) give us the ability to control our devices at the OS-level, granting us incredible freedom to tweak things to our individual preferences. Unless you are technical enough to fiddle around with &#8220;beta&#8221; mobile Linux devices, the majority of users are stuck with what they are given. And it isn&#8217;t much.</p> + +<p>The corporate push to move everyone over to &#8220;mobile computing&#8221; is no accident. The ability to ban certain apps, push ads to users, collect customer details, and harvest user data is more than enough motivation for companies to usher in a future of &#8220;mobile&#8221; computing.</p> + <p>Not to mention <em>cost</em>. New, top-of-the-line mobile devices sell for the same, if not more, than a standard laptop or desktop. You give up flexibility, customization and freedom for what exactly? A really good camera? Built-in GPS navigation?</p> -<p>Get a <em>real</em> camera and grab a standard GPS. I'm serious. If that sounds ridiculous than you probably never really needed those things in the first place. Use the proper tool for the job. Smushing everything into one, locked-down device is a recipe for disaster.</p> + +<p>Get a <em>real</em> camera and grab a standard GPS. I&#8217;m serious. If that sounds ridiculous than you probably never really needed those things in the first place. Use the proper tool for the job. Smushing everything into one, locked-down device is a recipe for disaster.</p> + <p>Overall - just use a <em>real</em> computer.</p> -<h2>Don't Flip-Out</h2> -<p>So, with all of that in mind, I swapped out my iPhone SE (2020) smart phone for the ZTE Cymbal 2 "dumb" flip phone. </p> + +<h2 id="dont-flip-out">Don&#8217;t Flip-Out</h2> + +<p>So, with all of that in mind, I swapped out my iPhone SE (2020) smart phone for the ZTE Cymbal 2 &#8220;dumb&#8221; flip phone. </p> + <p>The screen is extremely small with low resolution. The camera is absolute garbage. Writing text messages requires use (and knowledge) of the T9 composer[^2]. Most modern applications besides email or the photo gallery are non-existent.</p> + <p><strong>But I absolutely love it</strong>.</p> -<p>It's a phone. It makes phone calls and allows me to send texts. Texts themselves are a little more time consuming, which forces me to be more concise in my writing. Anything that requires great detail should probably be an email - which is what my computer is for. What else do I need? If I ever drop it and smash into a million pieces I can replace it for &lt;$50. I have the ability to replace the battery - not to mention battery life is measured in <em>days</em> not hours. It's rugged, so I don't need to be so delicate with it or slap some huge protective case on it.</p> + +<p>It&#8217;s a phone. It makes phone calls and allows me to send texts. Texts themselves are a little more time consuming, which forces me to be more concise in my writing. Anything that requires great detail should probably be an email - which is what my computer is for. What else do I need? If I ever drop it and smash into a million pieces I can replace it for &#60;$50. I have the ability to replace the battery - not to mention battery life is measured in <em>days</em> not hours. It&#8217;s rugged, so I don&#8217;t need to be so delicate with it or slap some huge protective case on it.</p> + <p>It does its job. No more, no less.</p> -<h2>"Good for You"</h2> -<p>I know that some of you reading this might think that this workflow is fine for <em>me</em> but would never be suitable for your needs. Maybe that's true, but I'd probably disagree. I think people have just been conditioned to <em>believe</em> that most day-to-day activites would be impossible without a smart device or a connection to the internet. If not, many would at least feel that without such access things would become far too inconvenient. My stance remains: the majority of people do not need constant access to a computer in their pocket.</p> -<p>It's completely fine to enjoy your own setup and device preferences - I'm not trying to convert anyone but instead just describing my own experiences. So please, keep your torches and pitchforks at home.</p> + +<h2 id="good-for-you">&#8220;Good for You&#8221;</h2> + +<p>I know that some of you reading this might think that this workflow is fine for <em>me</em> but would never be suitable for your needs. Maybe that&#8217;s true, but I&#8217;d probably disagree. I think people have just been conditioned to <em>believe</em> that most day-to-day activites would be impossible without a smart device or a connection to the internet. If not, many would at least feel that without such access things would become far too inconvenient. My stance remains: the majority of people do not need constant access to a computer in their pocket.</p> + +<p>It&#8217;s completely fine to enjoy your own setup and device preferences - I&#8217;m not trying to convert anyone but instead just describing my own experiences. So please, keep your torches and pitchforks at home.</p> + <p>Thanks for reading.</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>It helps that I have pretty much zero active accounts across most "popular" social media platforms.</li> -<li>Some of you readers might not have ever experienced the wonders of T9...</li> -<li>I understand that even smart phones can be classified as "computers". I am using this term in the classical sense.</li> +<li>It helps that I have pretty much zero active accounts across most &#8220;popular&#8221; social media platforms.</li> +<li>Some of you readers might not have ever experienced the wonders of T9&#8230;</li> +<li>I understand that even smart phones can be classified as &#8220;computers&#8221;. I am using this term in the classical sense.</li> </ol></content> - <link href="https://bt.ht/slow"/> - <id>https://bt.ht/slow</id> + <link href="https://btxx.org/slow"/> + <id>https://btxx.org/slow</id> <updated>2022-11-22T10:00:00Z</updated> <published>2022-11-22T10:00:00Z</published> </entry> <entry> <title>Converting My X201 ThinkPad into a Slabtop</title> - <content type="html"><h1>Converting My X201 ThinkPad into a Slabtop</h1> + <content type="html"><h1 id="converting-my-x201-thinkpad-into-a-slabtop">Converting My X201 ThinkPad into a Slabtop</h1> + <p>2023-05-01</p> -<p>I recently wrote <a href="/x201/">about physically disabling the WiFi toggle switch on my X201</a> which was a fun "hack" to an annoying issue I was running into. Since then, the laptop has been running flawlessly.</p> -<p>The only other <em>minor</em> issue I had was the poor display quality. The screen works perfectly fine but the X201's age prevents it from being the best possible display for day-to-day tasks. Both the resolution and viewing angles are quite poor.</p> + +<p>I recently wrote <a href="/x201/">about physically disabling the WiFi toggle switch on my X201</a> which was a fun &#8220;hack&#8221; to an annoying issue I was running into. Since then, the laptop has been running flawlessly.</p> + +<p>The only other <em>minor</em> issue I had was the poor display quality. The screen works perfectly fine but the X201&#8217;s age prevents it from being the best possible display for day-to-day tasks. Both the resolution and viewing angles are quite poor.</p> + <p>So, what were my options to remedy this problem?</p> + <ol> -<li>Swap out and upgrade the laptop's display (not many options for this though)</li> +<li>Swap out and upgrade the laptop&#8217;s display (not many options for this though)</li> <li>Connect an external display, keyboard, mouse and dock the X201</li> <li>Something else?</li> </ol> -<h2>Looking into "Something Else"</h2> -<p>I found that the possible replacement screens weren't worth the cost/hassle to swap out. And setting the laptop aside, docked with external peripherals sounded fine in theory - but then I would be missing out on the X201's amazing classic keyboard...</p> -<p>Then I thought to myself, "Why not just remove the display <em>entirely</em>?"</p> -<p>So that's what I did.</p> -<p><figure> - <img src="/public/images/slabtop-1.webp" alt="The main X201 display and lid disconnected"> - <figcaption>The X201 display (still inside the top lid) disconnected from the body of the laptop.</figcaption> -</figure></p> -<p>Removing the entire top lid was easier than I initially thought it would be. The beautiful thing about these older, classic ThinkPads is the ability to completely dissemble them. I won't go into heavy details on how to take one of these machines apart, since great documentation <a href="https://www.ifixit.com/Device/Lenovo_Thinkpad_X201_Tablet">already exists</a>. But once you have the keyboard and hinge screws removed it is essentially as easy as <em>lifting</em> the lid out of the chassis. (After disconnecting the small display connectors, of course)</p> -<h2>Ditching Alpine for Debian</h2> -<p>I love Alpine Linux. It's normally my <a href="https://as.bt.ht">go-to distro</a> (paired with dwm) for most of my laptop devices. Unfortunately, I find tiling window managers a slight pain to use on larger, 4K displays. I also wanted this slabtop to "just work", instead of needing to fiddle around with WiFi, <code>xrandr</code>, audio etc. Not to mention that Debian is rock solid stable. Defaulting to the XFCE DE was a no-brainer as well since this device is somewhat <em>old</em>.</p> -<p><figure> - <img src="/public/images/slabtop-2.webp" alt="The X201 slabtop connected to my 4K monitor"> - <figcaption>The X201 "slabtop" connected to my 27" 4K monitor via the ThinkPad UltraDock.</figcaption> -</figure></p> -<h2>Closing Thoughts</h2> -<p>This slabtop gives me those old-school "Commodore64" vibes (or more recent devices like the Raspberry Pi 400). This setup certainly isn't for everyone but for my use case it's working well. Traveling with a machine like this might prove a little more challenging - although you could simply pair it with a smaller travel monitor (I'm sure the overall carrying weight would be similar to the standard X201).</p> -<p>If nothing else, it is good to keep this option in mind if you ever break your laptop's display and don't feel like spending the money to fix it. Just grab an external monitor you have laying around and make a slabtop!</p></content> - <link href="https://bt.ht/slabtop"/> - <id>https://bt.ht/slabtop</id> + +<h2 id="looking-into-something-else">Looking into &#8220;Something Else&#8221;</h2> + +<p>I found that the possible replacement screens weren&#8217;t worth the cost&#47;hassle to swap out. And setting the laptop aside, docked with external peripherals sounded fine in theory - but then I would be missing out on the X201&#8217;s amazing classic keyboard&#8230;</p> + +<p>Then I thought to myself, &#8220;Why not just remove the display <em>entirely</em>?&#8221;</p> + +<p>So that&#8217;s what I did.</p> + +<p>Removing the entire top lid was easier than I initially thought it would be. The beautiful thing about these older, classic ThinkPads is the ability to completely dissemble them. I won&#8217;t go into heavy details on how to take one of these machines apart, since great documentation <a href="https://www.ifixit.com/Device/Lenovo_Thinkpad_X201_Tablet">already exists</a>. But once you have the keyboard and hinge screws removed it is essentially as easy as <em>lifting</em> the lid out of the chassis. (After disconnecting the small display connectors, of course)</p> + +<h2 id="ditching-alpine-for-debian">Ditching Alpine for Debian</h2> + +<p>I love Alpine Linux. It&#8217;s normally my <a href="https://as.bt.ht">go-to distro</a> (paired with dwm) for most of my laptop devices. Unfortunately, I find tiling window managers a slight pain to use on larger, 4K displays. I also wanted this slabtop to &#8220;just work&#8221;, instead of needing to fiddle around with WiFi, <code>xrandr</code>, audio etc. Not to mention that Debian is rock solid stable. Defaulting to the XFCE DE was a no-brainer as well since this device is somewhat <em>old</em>.</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>This slabtop gives me those old-school &#8220;Commodore64&#8221; vibes (or more recent devices like the Raspberry Pi 400). This setup certainly isn&#8217;t for everyone but for my use case it&#8217;s working well. Traveling with a machine like this might prove a little more challenging - although you could simply pair it with a smaller travel monitor (I&#8217;m sure the overall carrying weight would be similar to the standard X201).</p> + +<p>If nothing else, it is good to keep this option in mind if you ever break your laptop&#8217;s display and don&#8217;t feel like spending the money to fix it. Just grab an external monitor you have laying around and make a slabtop!</p></content> + <link href="https://btxx.org/slabtop"/> + <id>https://btxx.org/slabtop</id> <updated>2023-05-01T10:00:00Z</updated> <published>2023-05-01T10:00:00Z</published> </entry> <entry> <title>Skip to Content Button</title> - <content type="html"><h1>Skip to Content Button</h1> + <content type="html"><h1 id="skip-to-content-button">Skip to Content Button</h1> + <p>2019-03-25</p> -<p>One of the golden rules for testing your website's accessibility is the "keyboard-only" audit. This is where you test navigating through your entire site without the use of a mouse, but instead rely solely on tabbing through your content.</p> -<p>Unfortunately, one item is normally overlooked during this audit - a "skip to content" context button. Including a "skip to content" navigation item in your project is extremely useful because:</p> + +<p>One of the golden rules for testing your website&#8217;s accessibility is the &#8220;keyboard-only&#8221; audit. This is where you test navigating through your entire site without the use of a mouse, but instead rely solely on tabbing through your content.</p> + +<p>Unfortunately, one item is normally overlooked during this audit - a &#8220;skip to content&#8221; context button. Including a &#8220;skip to content&#8221; navigation item in your project is extremely useful because:</p> + <ul> <li>speeds up user interaction with the content you <strong>want</strong> them to see</li> -<li>on subsequent pages the user shouldn't need to tab through the entire navigation each time</li> +<li>on subsequent pages the user shouldn&#8217;t need to tab through the entire navigation each time</li> </ul> -<h2>The HTML</h2> + +<h2 id="the-html">The HTML</h2> + <p>For the sake of this demo we will assume that we currently have the following navigation setup in our project:</p> -<pre><code>&lt;nav role=&quot;navigation&quot;&gt; - &lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt; - &lt;a href=&quot;/about&quot;&gt;About&lt;/a&gt; - &lt;a href=&quot;/archive&quot;&gt;Archive&lt;/a&gt; - &lt;a href=&quot;/atom.xml&quot;&gt;RSS&lt;/a&gt; -&lt;/nav&gt; -</code></pre> -<p>Now for the easy part - adding our simple content skip link with it's own custom <code>skip-content</code> class:</p> -<pre><code>&lt;nav role=&quot;navigation&quot;&gt; - &lt;!-- Skip to content button --&gt; - &lt;a class=&quot;skip-content&quot; href=&quot;#main&quot;&gt;Skip to Content (Press Enter)&lt;/a&gt; - &lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt; - &lt;a href=&quot;/about&quot;&gt;About&lt;/a&gt; - &lt;a href=&quot;/archive&quot;&gt;Archive&lt;/a&gt; - &lt;a href=&quot;/atom.xml&quot;&gt;RSS&lt;/a&gt; -&lt;/nav&gt; -</code></pre> -<p><div class="message"> - <strong>Sidenote:</strong> in this demo we are making the assumption that the main content block has an <code>id</code> of "main" associated with it. Hence the skip content button linking to <code>#main</code>. -</div></p> -<h2>The CSS</h2> -<p>Our first task is to make sure this new link isn't visible or interactive by default unless the user explicitly tabs through the navigation. We do so by positioning the link outside of the main content view. It is important to use this <code>absolute</code> position style instead of setting the display property to <code>none</code>, since the display property technique will fully remove the element from the DOM (bad accessibility practices).</p> + +<pre><code>&#60;nav role="navigation"&#62; + &#60;a href="&#47;"&#62;Home&#60;&#47;a&#62; + &#60;a href="&#47;about"&#62;About&#60;&#47;a&#62; + &#60;a href="&#47;archive"&#62;Archive&#60;&#47;a&#62; + &#60;a href="&#47;atom.xml"&#62;RSS&#60;&#47;a&#62; +&#60;&#47;nav&#62; +</code></pre> + +<p>Now for the easy part - adding our simple content skip link with it&#8217;s own custom <code>skip-content</code> class:</p> + +<pre><code>&#60;nav role="navigation"&#62; + &#60;!-- Skip to content button --&#62; + &#60;a class="skip-content" href="#main"&#62;Skip to Content (Press Enter)&#60;&#47;a&#62; + &#60;a href="&#47;"&#62;Home&#60;&#47;a&#62; + &#60;a href="&#47;about"&#62;About&#60;&#47;a&#62; + &#60;a href="&#47;archive"&#62;Archive&#60;&#47;a&#62; + &#60;a href="&#47;atom.xml"&#62;RSS&#60;&#47;a&#62; +&#60;&#47;nav&#62; +</code></pre> + +<h2 id="the-css">The CSS</h2> + +<p>Our first task is to make sure this new link isn&#8217;t visible or interactive by default unless the user explicitly tabs through the navigation. We do so by positioning the link outside of the main content view. It is important to use this <code>absolute</code> position style instead of setting the display property to <code>none</code>, since the display property technique will fully remove the element from the DOM (bad accessibility practices).</p> + <pre><code>a.skip-content { background: grey; color: white; @@ -1701,154 +2140,224 @@ button { top: 0; } </code></pre> -<h2>Almost there</h2> + +<h2 id="almost-there">Almost there</h2> + <p>Now we just re-position the element when the user focuses on the link with a keyboard tab:</p> + <pre><code>a.skip-content:focus { - left: 1rem; /* Whatever desired position */ + left: 1rem; &#47;* Whatever desired position *&#47; } </code></pre> -<h2>All Done</h2> + +<h2 id="all-done">All Done</h2> + <p>This is a very basic accessibility win you can implement in your current projects with next to zero effort. Enjoy!</p></content> - <link href="https://bt.ht/skip-to-content"/> - <id>https://bt.ht/skip-to-content</id> + <link href="https://btxx.org/skip-to-content"/> + <id>https://btxx.org/skip-to-content</id> <updated>2019-03-25T10:00:00Z</updated> <published>2019-03-25T10:00:00Z</published> </entry> <entry> <title>Simple Navigation Setup in Jekyll 3.9.0</title> - <content type="html"><h1>Simple Navigation Setup in Jekyll 3.9.0</h1> + <content type="html"><h1 id="simple-navigation-setup-in-jekyll-3.9.0">Simple Navigation Setup in Jekyll 3.9.0</h1> + <p>2020-09-29</p> -<p>I have found that there is a lot of information on the internet in regards to setting up "dynamic" navigation in Jekyll. The problem I've noticed is that a good amount of these implementations are overly complex. Here is the simplest way that I tend to use when building out <code>nav</code> elements in Jekyll (3.9.0 as of this writing).</p> -<h2>Creating the Directories &amp; Files</h2> + +<p>I have found that there is a lot of information on the internet in regards to setting up &#8220;dynamic&#8221; navigation in Jekyll. The problem I&#8217;ve noticed is that a good amount of these implementations are overly complex. Here is the simplest way that I tend to use when building out <code>nav</code> elements in Jekyll (3.9.0 as of this writing).</p> + +<h2 id="creating-the-directories-files">Creating the Directories &#38; Files</h2> + <p>In your Jekyll project, at the top level, you need to create a directory called <code>_data</code>. Inside this folder we will be creating a new file called <code>navigation.yml</code>. The contents of this file will contain all your navigation links and they are rendered like so:</p> + <pre><code>- title: Home -url: / +url: &#47; - title: Articles -url: /articles/ +url: &#47;articles&#47; - title: About -url: /about/ +url: &#47;about&#47; </code></pre> -<h2>Dynamically Rendering the Navigation</h2> + +<h2 id="dynamically-rendering-the-navigation">Dynamically Rendering the Navigation</h2> + <p>The next and final step is rendering out the navigation with a simple loop:</p> + <pre><code>{% for item in site.data.navigation %} - &lt;li&gt; - &lt;a href=&quot;{{ item.url }}&quot;&gt;&lt;span&gt;{{ item.title }}&lt;/span&gt;&lt;/a&gt; - &lt;/li&gt; + &#60;li&#62; + &#60;a href="{{ item.url }}"&#62;&#60;span&#62;{{ item.title }}&#60;&#47;span&#62;&#60;&#47;a&#62; + &#60;&#47;li&#62; {% endfor %} </code></pre> -<h2>Highlight Current Page</h2> -<p>It's also very easy to extend this method to add a CSS class based on whether a user is on the currently selected page or not:</p> + +<h2 id="highlight-current-page">Highlight Current Page</h2> + +<p>It&#8217;s also very easy to extend this method to add a CSS class based on whether a user is on the currently selected page or not:</p> + <pre><code>{% for item in site.data.navigation %} - &lt;li&gt; + &#60;li&#62; {% if item.url == page.url %} - &lt;a class=&quot;active&quot; href=&quot;{{ item.url }}&quot;&gt;&lt;span&gt;{{ item.title }}&lt;/span&gt;&lt;/a&gt; + &#60;a class="active" href="{{ item.url }}"&#62;&#60;span&#62;{{ item.title }}&#60;&#47;span&#62;&#60;&#47;a&#62; {% else %} - &lt;a href=&quot;{{ item.url }}&quot;&gt;&lt;span&gt;{{ item.title }}&lt;/span&gt;&lt;/a&gt; + &#60;a href="{{ item.url }}"&#62;&#60;span&#62;{{ item.title }}&#60;&#47;span&#62;&#60;&#47;a&#62; {% endif %} - &lt;/li&gt; + &#60;&#47;li&#62; {% endfor %} -</code></pre> -<pre><code>/* Custom styling for active class */ + + + +&#47;* Custom styling for active class *&#47; li a.active { color: red; } </code></pre> + <p>Congrats! You now have fully functional, dynamic navigation on your Jekyll site.</p></content> - <link href="https://bt.ht/simple-jekyll-navigation"/> - <id>https://bt.ht/simple-jekyll-navigation</id> + <link href="https://btxx.org/simple-jekyll-navigation"/> + <id>https://btxx.org/simple-jekyll-navigation</id> <updated>2020-09-29T10:00:00Z</updated> <published>2020-09-29T10:00:00Z</published> </entry> <entry> <title>Simple Does Not Mean Ugly</title> - <content type="html"><h1>Simple Does Not Mean Ugly</h1> + <content type="html"><h1 id="simple-does-not-mean-ugly">Simple Does Not Mean Ugly</h1> + <p>2019-03-26</p> -<p>I see new blog posts popping up now and again advocating for designers to keep their products as simple as possible - and I couldn't agree more.</p> + +<p>I see new blog posts popping up now and again advocating for designers to keep their products as simple as possible - and I couldn&#8217;t agree more.</p> + <p>A lot of designers tend to think they need to reinvent the wheel when it comes to UI concepts that are standard defaults and expected by most users. Not only does this add extra work for your design and development cycles, but also increases the potential of frustration for your users when they are using your product.</p> + <p>Your job as a designer is to focus on the user experience journey and understand what those users <em>expect</em> to happen - not what <em>you want</em> to happen. This is a very delicate balance of design “give and take”, hence why simple designs always seem to work best.</p> + <p><strong>But simple does not mean “ugly”</strong>.</p> -<h2>Ugly Simple</h2> + +<h2 id="ugly-simple">Ugly Simple</h2> + <p>Anyone who has read some of my opinion pieces on here in regards to UI know that I have a profound distaste for the overused “flat design” trend. Many designers consider this trend a clean and “simple” approach to most UI conventions - which is complete nonsense to most professionals in the industry (at least those not drinking the kool-aid).</p> + <p>Using the term “simple” in the context of UI is currently quite damaging to modern application and product development. Designers take these definitions too literally, leading to stripped down interfaces with little to no usability for their end-users.</p> + <p>Cap Watkins wrote a post back in 2014 where he explained his admiration for <a href="https://capwatkins.com/blog/the-boring-designer">boring designers</a> and how they tackled design problems using the most boring or “lazy” techniques. While I don’t agree completely with his arguments, nor do I think one should try to attain the status of “boring designer”, I can understand his main sentiment: everyone can appreciate obvious and clever design.</p> -<h2>Fixing Simple</h2> + +<h2 id="fixing-simple">Fixing Simple</h2> + <p>I hate when people point out problems without at least attempting to suggest some sort of solution - which is exactly what I’m going to do here (with only a few set examples of course, otherwise the post would become a book). Let’s take a look at the major culprits I find around the web: navigations, buttons and form elements.</p> -<h3>1. Hidden Navigations</h3> + +<h3 id="1.-hidden-navigations">1. Hidden Navigations</h3> + <p>How many native apps that you use regularly rely on the trusty “hamburger” menu icon navigation system? What about news sites, video streaming services, or blogs? Maybe you’ve implemented this concept in your own projects as well, advocating for it’s “cleaner” approach to navigation. </p> + <p>The <em>hamburger</em> is a great example of “ugly simple”. You are purposely hiding the main structure that allows your users to move around your product freely behind an <strong>additional</strong> interaction. That is the opposite of simple.</p> + <p>The only time you should be using the “hamburger crutch” as I call it, is for very small screen sizes or when targeting mobile user agents directly. That’s it. If your users are viewing your product on a larger screen, for the love of God, <strong>use the space available</strong>.</p> + <p><img src="/public/images/navigation.webp" alt="Desktop Navigation" /></p> -<h3>2. Buttons Not Looking Like Buttons</h3> + +<h3 id="2.-buttons-not-looking-like-buttons">2. Buttons Not Looking Like Buttons</h3> + <p>It’s difficult for users to actually <strong>do</strong> the action you want them to perform when your buttons look like text. I’m not exactly sure why designers have pivoted towards removing all stylings that regular users have come to expect from button elements, but it’s plaguing far too many websites.</p> + <p>Buttons should be eye-catching, colorful, fun to interact with, and support all proper CSS states. Clients and agencies will tend to push for “cleaner” buttons - which most of the time refers to setting the buttons as simple underlined text items. Do not be brainwashed into thinking this is better:</p> + <p><img src="/public/images/buttons.webp" alt="Button Comparsion" /></p> -<p>You tell me what looks more interactive...</p> -<h3>3. Overriding Form Elements</h3> + +<p>You tell me what looks more interactive&#8230;</p> + +<h3 id="3.-overriding-form-elements">3. Overriding Form Elements</h3> + <p>Designers should rarely rebuild the browser structure for web form elements in their projects. I should clarify - I’m not suggesting that you use the barebones default styles provided by the browser, I’m saying that you shouldn’t hide the elements themselves just to replace them with mimicking components. I find this practice is becoming more and more noticeable with the growing popularity of component-based frameworks. Don’t fall into these bad design habits.</p> + <p>For example, you should leave the following <code>select</code> element as is:</p> -<pre><code>&lt;select&gt; - &lt;option&gt; -&lt;/select&gt; + +<pre><code>&#60;select&#62; + &#60;option&#62; +&#60;&#47;select&#62; </code></pre> + <p>Instead of doing something like this:</p> -<pre><code>&lt;select style=&quot;display:none;&quot;&gt;&lt;/select&gt; -&lt;div class=&quot;custom-select-container&quot;&gt; - &lt;span&gt;Option&lt;/span&gt; -&lt;/div&gt; + +<pre><code>&#60;select style="display:none;"&#62;&#60;&#47;select&#62; +&#60;div class="custom-select-container"&#62; + &#60;span&#62;Option&#60;&#47;span&#62; +&#60;&#47;div&#62; </code></pre> + <p>There are cleaner ways to customize web forms with straightforward CSS. Have a look at my own open source project <a href="https://normform.netlify.com/">Normform</a> if you’d prefer to just use a lightweight plugin to do this for you. (Shameless plug, I know)</p> -<h2>Simple Can Be Good</h2> + +<h2 id="simple-can-be-good">Simple Can Be Good</h2> + <p>Having a boring or lazy design thought-process doesn’t mean you should develop ugly UI for the sake of “simple”. Too often that word is associated with “minimalism” or “less content” and that is only half true.</p> + <p>The <em>experience</em> is what needs to be simple for your users - the UI itself should still be beautiful.</p></content> - <link href="https://bt.ht/simple-does-not-mean-ugly"/> - <id>https://bt.ht/simple-does-not-mean-ugly</id> + <link href="https://btxx.org/simple-does-not-mean-ugly"/> + <id>https://btxx.org/simple-does-not-mean-ugly</id> <updated>2019-03-26T10:00:00Z</updated> <published>2019-03-26T10:00:00Z</published> </entry> <entry> <title>Simple Accessibility</title> - <content type="html"><h1>Simple Accessibility</h1> + <content type="html"><h1 id="simple-accessibility">Simple Accessibility</h1> + <p>2018-09-07</p> + <p>Implementing proper accessibility practices can seem a little daunting at first, but there are a few basic standards you can introduce into your project work-flow that are fairly straightforward:</p> -<h2>Basic design</h2> + +<h2 id="basic-design">Basic design</h2> + <ol> <li>Test that your project has the proper contrast color settings between type, backgrounds, icons etc.</li> -<li>Only use "fancy" grid-ordering for minor layout design - avoid rearranging important content via CSS</li> +<li>Only use &#8220;fancy&#8221; grid-ordering for minor layout design - avoid rearranging important content via CSS</li> </ol> -<h2>Content</h2> + +<h2 id="content">Content</h2> + <ol> <li>Use proper HTML structures (aside, header, main, footer elements as needed)</li> <li>Make use of the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label attribute</a></li> -<li>Ensure your website/app can be navigated completely (and properly) with only a keyboard</li> +<li>Ensure your website&#47;app can be navigated completely (and properly) with only a keyboard</li> </ol> -<h2>Images</h2> + +<h2 id="images">Images</h2> + <ol> <li>Avoid using CSS backgrounds for content images (should only be used for patterns, layout design etc.)</li> <li>Ensure proper <code>alt</code> attributes are provided on all images</li> </ol> -<p>It isn't much - but follow these basics and you'll be one step closer to providing better accessibility to your users.</p></content> - <link href="https://bt.ht/simple-accessibility"/> - <id>https://bt.ht/simple-accessibility</id> + +<p>It isn&#8217;t much - but follow these basics and you&#8217;ll be one step closer to providing better accessibility to your users.</p></content> + <link href="https://btxx.org/simple-accessibility"/> + <id>https://btxx.org/simple-accessibility</id> <updated>2018-09-07T10:00:00Z</updated> <published>2018-09-07T10:00:00Z</published> </entry> <entry> <title>Shiny, Animated CSS Buttons</title> - <content type="html"><h1>Shiny, Animated CSS Buttons</h1> + <content type="html"><h1 id="shiny-animated-css-buttons">Shiny, Animated CSS Buttons</h1> + <p>2021-04-27</p> + <p>Everyone can appreciate fancy, animated buttons - but often times they come with a performance cost: <em>JavaScript</em>. Luckily for us, we can create our very own shiny, animated buttons with pure CSS.</p> -<h2>The Demo</h2> + +<h2 id="the-demo">The Demo</h2> + <p><img src="/public/images/shiny-buttons.png" alt="Four buttons that shine when hovered" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/oNBQevj">Live CodePen Example</a></p> -<h2>The HTML</h2> + +<h2 id="the-html">The HTML</h2> + <p>Nothing fancy going on here, just a set of <code>ahref</code> elements with specific <code>button</code> classes added:</p> -<pre><code>&lt;a href=&quot;#&quot; class=&quot;button green&quot;&gt;&lt;span&gt;Green Button&lt;/span&gt;&lt;/a&gt; -&lt;a href=&quot;#&quot; class=&quot;button blue&quot;&gt;&lt;span&gt;Blue Button&lt;/span&gt;&lt;/a&gt; -&lt;a href=&quot;#&quot; class=&quot;button orange&quot;&gt;&lt;span&gt;Orange Button&lt;/span&gt;&lt;/a&gt; -&lt;a href=&quot;#&quot; class=&quot;button purple&quot;&gt;&lt;span&gt;Purple Button&lt;/span&gt;&lt;/a&gt; + +<pre><code>&#60;a href="#" class="button green"&#62;&#60;span&#62;Green Button&#60;&#47;span&#62;&#60;&#47;a&#62; +&#60;a href="#" class="button blue"&#62;&#60;span&#62;Blue Button&#60;&#47;span&#62;&#60;&#47;a&#62; +&#60;a href="#" class="button orange"&#62;&#60;span&#62;Orange Button&#60;&#47;span&#62;&#60;&#47;a&#62; +&#60;a href="#" class="button purple"&#62;&#60;span&#62;Purple Button&#60;&#47;span&#62;&#60;&#47;a&#62; </code></pre> -<h2>The CSS</h2> + +<h2 id="the-css">The CSS</h2> + <p>First we set the default base styling for all the buttons. We also place the inner text into <code>span</code> elements (I will explain why in a little bit):</p> + <pre><code>.button { background: white; border: 1px solid #a5b1c2; @@ -1870,10 +2379,12 @@ li a.active { color: red; } z-index: 2; } </code></pre> + <p>Now we need to create our <em>shiny</em> element that will pass across the button on <code>hover</code> or <code>focus</code>. For this object we will use the <code>before</code> pseudo element:</p> + <pre><code>.button:before { background: linear-gradient(transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%); - content:''; + content:&#39;&#39;; height: 200%; position: absolute; right: calc(100% + 20px); @@ -1884,364 +2395,496 @@ li a.active { color: red; } z-index: 0; } </code></pre> -<p>Next, we tell the <code>before</code> element to swipe across the main <code>.button</code> parent element when the user hovers or focuses on it. Remember placing our inner content into a <code>span</code> element? That insures that our shiny/swipe element doesn't position itself <em>over</em> the text, but instead flows under it:</p> + +<p>Next, we tell the <code>before</code> element to swipe across the main <code>.button</code> parent element when the user hovers or focuses on it. Remember placing our inner content into a <code>span</code> element? That insures that our shiny&#47;swipe element doesn&#8217;t position itself <em>over</em> the text, but instead flows under it:</p> + <pre><code>.button:hover:before { right: -100%; } -/* Extra visual styling for buttons on hover - optional */ +&#47;* Extra visual styling for buttons on hover - optional *&#47; .button:hover, button:focus { box-shadow: 0 8px 12px rgba(0,0,0,0.1), inset 0 10px 30px rgba(255,255,255,0.3), inset 0 2px 2px rgba(255,255,255,0.2); color: white; } </code></pre> -<p>All that's left is adding some visual flare to each individual button - in this case background-color and border-color:</p> + +<p>All that&#8217;s left is adding some visual flare to each individual button - in this case background-color and border-color:</p> + <pre><code>.button.green:hover, button.green:focus { background: #20bf6b; border-color: #20bf6b; } .button.blue:hover, button.blue:focus { background: #0984e3; border-color: #0984e3; } .button.orange:hover, button.orange:focus { background: #ff793f; border-color: #ff793f; } .button.purple:hover, button.purple:focus { background: #6c5ce7; border-color: #6c5ce7; } </code></pre> -<h2>Browser Support</h2> + +<h2 id="browser-support">Browser Support</h2> + <p>These buttons work across all browsers flawlessly. See the details <a href="https://caniuse.com/css-gencontent">on the caniuse report itself</a>.</p> -<h2>The Live CodePen</h2> + +<h2 id="the-live-codepen">The Live CodePen</h2> + <p>You can find the live demo embedded at the top of this post, or <a href="https://codepen.io/bradleytaunt/pen/oNBQevj">directly on CodePen here</a>.</p></content> - <link href="https://bt.ht/shiny-css-buttons"/> - <id>https://bt.ht/shiny-css-buttons</id> + <link href="https://btxx.org/shiny-css-buttons"/> + <id>https://btxx.org/shiny-css-buttons</id> <updated>2021-04-27T10:00:00Z</updated> <published>2021-04-27T10:00:00Z</published> </entry> <entry> <title>This Site is Now a Shinobi Website</title> - <content type="html"><h1>This Site is Now a Shinobi Website</h1> + <content type="html"><h1 id="this-site-is-now-a-shinobi-website">This Site is Now a Shinobi Website</h1> + <p>2022-05-13</p> + <p><strong>Update 2023</strong>: this website is now built with <a href="https://barf.bt.ht">barf</a></p> -<hr /> + +<hr/> + <p>My personal website is now an RSS-focused blog, generated from a collection of plain text files.</p> -<p>But before we get into greater details about the switch, let me first introduce the concept of a "shinobi website".</p> -<h2>The Shinobi Website Project</h2> + +<p>But before we get into greater details about the switch, let me first introduce the concept of a &#8220;shinobi website&#8221;.</p> + +<h2 id="the-shinobi-website-project">The Shinobi Website Project</h2> + <p>Instead of repeating myself in this post, feel free to read up about the project at the official site:</p> -<p><a href="https://shinobi.bt.ht">https://shinobi.bt.ht</a></p> -<p>To summarize: by using a simple <code>shell</code> script I'm able to render all my plain text files (which is now how I solely write my articles) into a structured RSS 2.0 <code>xml</code> file. Subscribers can now consume my posts directly in their RSS reader of choice without the need to directly visit the article's URL.[^0]</p> -<h2>Why the Change?</h2> -<p>I'm a hardcore minimalist at heart and have a tendency to make my own personal projects <em>leaner</em> all the time. I also have been trying my best to find the most refined writing workflow to keep myself posting consistently (and hopefully keeping the quality high). My first iteration towards this step was switching over to hand-coding everything via HTML &amp; CSS[^1]. That worked well - for a very brief time.</p> + +<p><a href="https://shinobi.bt.ht">https:&#47;&#47;shinobi.bt.ht</a></p> + +<p>To summarize: by using a simple <code>shell</code> script I&#8217;m able to render all my plain text files (which is now how I solely write my articles) into a structured RSS 2.0 <code>xml</code> file. Subscribers can now consume my posts directly in their RSS reader of choice without the need to directly visit the article&#8217;s URL.[^0]</p> + +<h2 id="why-the-change">Why the Change?</h2> + +<p>I&#8217;m a hardcore minimalist at heart and have a tendency to make my own personal projects <em>leaner</em> all the time. I also have been trying my best to find the most refined writing workflow to keep myself posting consistently (and hopefully keeping the quality high). My first iteration towards this step was switching over to hand-coding everything via HTML &#38; CSS[^1]. That worked well - for a very brief time.</p> + <p>After recently launching the Shinobi project, I kept toying with the idea of switching my personal website over to use the same format. There was a heavy internal debate about ditching HTML in favour of plain text. What kind of impact would this have on both my site and audience? Would people be pissed about yet <em>another</em> radical change?</p> + <p>After sleeping on it for a couple nights, I decide to say screw it. This is my personal website and it should ultimately reflect who I am and what I prefer. Dwelling too long on the opinion of others (as much as I respect any of you kind enough to follow along) can lead to decisions that negatively impact ones own well being.</p> + <p>So here we are. Blogging in plain text.</p> -<h2>Avoiding Link-Rot</h2> -<p>I've manually added this blog post to my original <code>feed.xml</code>, in order to help inform those of you following that feed of this change. But this will be the last entry of that feed.</p> + +<h2 id="avoiding-link-rot">Avoiding Link-Rot</h2> + +<p>I&#8217;ve manually added this blog post to my original <code>feed.xml</code>, in order to help inform those of you following that feed of this change. But this will be the last entry of that feed.</p> + <p>If you decide not to re-sub, I completely understand and thank you for your time! Those of you choosing to still follow along: welcome aboard a new adventure!</p> -<p>As for the older HTML-based articles, no worries. They will remain on this site under the standard <code>blog</code> directory so that old links don't break or cause conflicts. You can find that directory here:</p> -<p><a href="https://tdarb.org/feeds/posts.xml">https://tdarb.org/feeds/posts.xml</a></p> -<h2>Tutorials and Demos</h2> -<p>I will still be writing up detailed tutorials and interactive demos going forward - no need to worry. My plan is to link directly to a collaborative coding site like CodePen, etc. I haven't decided on the best option yet (want to keep things as easy for my readers as possible) so only time will tell what my decision will be.</p> + +<p>As for the older HTML-based articles, no worries. They will remain on this site under the standard <code>blog</code> directory so that old links don&#8217;t break or cause conflicts. You can find that directory here:</p> + +<p><a href="https://tdarb.org/feeds/posts.xml">https:&#47;&#47;tdarb.org&#47;feeds&#47;posts.xml</a></p> + +<h2 id="tutorials-and-demos">Tutorials and Demos</h2> + +<p>I will still be writing up detailed tutorials and interactive demos going forward - no need to worry. My plan is to link directly to a collaborative coding site like CodePen, etc. I haven&#8217;t decided on the best option yet (want to keep things as easy for my readers as possible) so only time will tell what my decision will be.</p> + <p>Feel free to comment below if you have any suggestions! Preferably one that respects user privacy and advocates for a more open web.</p> -<h2>Speaking of Comments...</h2> -<p>Since the old commenting system[^2] required me to manually add each comment individually, I assumed I would just do the same here. Then I got a hack-y idea. What if I used a mailing list linked through this website's sourcehut project?</p> + +<h2 id="speaking-of-comments">Speaking of Comments&#8230;</h2> + +<p>Since the old commenting system[^2] required me to manually add each comment individually, I assumed I would just do the same here. Then I got a hack-y idea. What if I used a mailing list linked through this website&#8217;s sourcehut project?</p> + <p>It might not be the most user friendly or sustainable but I think it could be an interesting experiment at the very least!</p> + <p>Now each new article will have a link (which I will generate manually) that users can email directly to in order to share their comments. I have no idea how spam will work with this concept. This whole idea could blow up in my face. Only time will tell.</p> -<h2>Closing Thoughts</h2> -<p>This workflow is clean and simple. It allows me to open a blank text file and instantly start writing. Once I'm happy with it, I run a simple shell command to update the RSS feed and sync it with my web server. Local testing is dead simple too since everything is set as <code>.txt</code>.</p> -<p>Some may like the concept of reading my new articles in their RSS reader, others might hate it. I've learned over the years that you can't please everyone.</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>This workflow is clean and simple. It allows me to open a blank text file and instantly start writing. Once I&#8217;m happy with it, I run a simple shell command to update the RSS feed and sync it with my web server. Local testing is dead simple too since everything is set as <code>.txt</code>.</p> + +<p>Some may like the concept of reading my new articles in their RSS reader, others might hate it. I&#8217;ve learned over the years that you can&#8217;t please everyone.</p> + <p>Thanks for taking the time to read my jumbled thoughts.</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> <li>Users can <em>of course</em> still visit the individual article <code>.txt</code> files in their browser, if they so wish.</li> -<li>https://tdarb.org/blog/my-static-blog-publishing-setup.html</li> -<li>https://tdarb.org/blog/poormans-comment-system.html</li> +<li><a href="https://tdarb.org/blog/my-static-blog-publishing-setup.html">https:&#47;&#47;tdarb.org&#47;blog&#47;my-static-blog-publishing-setup.html</a></li> +<li><a href="https://tdarb.org/blog/poormans-comment-system.html">https:&#47;&#47;tdarb.org&#47;blog&#47;poormans-comment-system.html</a></li> </ol></content> - <link href="https://bt.ht/shinobi-website"/> - <id>https://bt.ht/shinobi-website</id> + <link href="https://btxx.org/shinobi-website"/> + <id>https://btxx.org/shinobi-website</id> <updated>2022-05-13T10:00:00Z</updated> <published>2022-05-13T10:00:00Z</published> </entry> <entry> <title>Sharing The Things We Use</title> - <content type="html"><h1>Sharing The Things We Use</h1> + <content type="html"><h1 id="sharing-the-things-we-use">Sharing The Things We Use</h1> + <p>2021-07-24</p> -<p>I always love stumbling across personal websites that include some form of a "uses" page. A place where the author lists out all the tools they use on a regular basis - whether it be hardware, software or something else entirely. It allows readers to get a slightly more personal peek into the daily work-life of that author and maybe even provides better context for <em>how</em> they work.</p> -<p>Since I realized how much I enjoy reading other people's <em>uses</em> pages, I've decided to finally publish my own! My list of hardware and software is fairly boring and predictable for a designer/developer - but sharing is caring! My hope is that even one personal out in the great-wide web can find something useful (pun intended!) or least inspiring about my personal setup.</p> + +<p>I always love stumbling across personal websites that include some form of a &#8220;uses&#8221; page. A place where the author lists out all the tools they use on a regular basis - whether it be hardware, software or something else entirely. It allows readers to get a slightly more personal peek into the daily work-life of that author and maybe even provides better context for <em>how</em> they work.</p> + +<p>Since I realized how much I enjoy reading other people&#8217;s <em>uses</em> pages, I&#8217;ve decided to finally publish my own! My list of hardware and software is fairly boring and predictable for a designer&#47;developer - but sharing is caring! My hope is that even one personal out in the great-wide web can find something useful (pun intended!) or least inspiring about my personal setup.</p> + <p>Fell free to check it out: <a href="/uses">The Things I Use</a></p> + <p><em>PS. I plan to add a desktop picture of my complete setup once I find the time!</em></p></content> - <link href="https://bt.ht/sharing-the-things-we-use"/> - <id>https://bt.ht/sharing-the-things-we-use</id> + <link href="https://btxx.org/sharing-the-things-we-use"/> + <id>https://btxx.org/sharing-the-things-we-use</id> <updated>2021-07-24T10:00:00Z</updated> <published>2021-07-24T10:00:00Z</published> </entry> <entry> <title>Blogging for 7 Years</title> - <content type="html"><h1>Blogging for 7 Years</h1> + <content type="html"><h1 id="blogging-for-7-years">Blogging for 7 Years</h1> + <p>2023-06-24</p> + <p>My <a href="/aui">first public article</a> was posted on June 28th 2016. That was <em>seven</em> years ago.</p> -<p>In that time, quite a lot has changed in my life both personally and professionally. So, I figured it would be interesting to reflect on these years and document it for my own personal records. My hope is that this is something I could start doing every 5 or 10 years (if I can keep going that long!). This way, my blog also serves as a "time capsule" or museum of the past...</p> -<h2>Fun Facts</h2> + +<p>In that time, quite a lot has changed in my life both personally and professionally. So, I figured it would be interesting to reflect on these years and document it for my own personal records. My hope is that this is something I could start doing every 5 or 10 years (if I can keep going that long!). This way, my blog also serves as a &#8220;time capsule&#8221; or museum of the past&#8230;</p> + +<h2 id="fun-facts">Fun Facts</h2> + <p><strong>This Blog</strong>:</p> + <p>I originally started blogging on <code>bradleytaunt.com</code> using WordPress, but since then I have changed both my main domain and blog infrastructure multiple times. At a glance I have used:</p> + <ul> <li>Jekyll</li> <li>Hugo</li> <li>Blot</li> -<li>Static HTML/CSS</li> +<li>Static HTML&#47;CSS</li> <li><a href="https://phpetite.bt.ht">PHPetite</a></li> <li><a href="https://shinobi.bt.ht">Shinobi</a></li> <li><a href="https://pblog.bt.ht">pblog</a></li> <li><a href="https://barf.bt.ht">barf</a> <em>Currently using!</em></li> </ul> + <p><strong>Personal:</strong></p> + <p>As with anyone over time, the personal side of my life has seen the biggest <em>updates</em>:</p> + <ul> <li>Married the love of my life (after knowing each other for ~14 years!)</li> <li>Moved out into rural Ontario for some peace and quiet</li> <li>Had three wonderful kids with said wife (two boys and a girl)</li> -<li>Started noticing grey sprinkles in my stubble (I guess I can officially call myself a "grey beard"?)</li> +<li>Started noticing grey sprinkles in my stubble (I guess I can officially call myself a &#8220;grey beard&#8221;?)</li> </ul> + <p><strong>Professionally:</strong></p> + <ul> <li>Pivoted heavily into UX research and design for a handful of years (after working mostly with web front-ends)</li> <li>Recently switched back into a more fullstack development role to challenge myself and learn more</li> </ul> -<h2>Nothing Special</h2> -<p>This post isn't anything ground-breaking but for me it's nice to reflect on the time passed and remember how much can change in such little time. Hopefully I'll be right back here in another 7 years and maybe you'll still be reading along with me!</p></content> - <link href="https://bt.ht/seven-years"/> - <id>https://bt.ht/seven-years</id> + +<h2 id="nothing-special">Nothing Special</h2> + +<p>This post isn&#8217;t anything ground-breaking but for me it&#8217;s nice to reflect on the time passed and remember how much can change in such little time. Hopefully I&#8217;ll be right back here in another 7 years and maybe you&#8217;ll still be reading along with me!</p></content> + <link href="https://btxx.org/seven-years"/> + <id>https://btxx.org/seven-years</id> <updated>2023-06-24T10:00:00Z</updated> <published>2023-06-24T10:00:00Z</published> </entry> <entry> <title>Setting Up a Free SSL</title> - <content type="html"><h1>Setting Up a Free SSL</h1> + <content type="html"><h1 id="setting-up-a-free-ssl">Setting Up a Free SSL</h1> + <p>2018-08-07</p> + <p>I never had to worry about SSL certificates when I originally hosted my blog through Github Pages, but since switching over to Surge.sh I lost my ability to utilize <code>https</code> protocol.</p> -<p>Luckily, Cloudflare offers a very simple way to implement SSL on your website - and it's free!</p> -<h3>SSL in 3 easy steps</h3> + +<p>Luckily, Cloudflare offers a very simple way to implement SSL on your website - and it&#8217;s free!</p> + +<h3 id="ssl-in-3-easy-steps">SSL in 3 easy steps</h3> + <ol> -<li>You will need to have a Cloudflare account - <a href="https://dash.cloudflare.com/sign-up">you can setup one here</a>. Be sure to select the 'Free' pricing plan (unless you want some extras features)</li> +<li>You will need to have a Cloudflare account - you can setup one here. Be sure to select the &#8216;Free&#8217; pricing plan (unless you want some extras features)</li> <li>Follow the process on updating your nameservers to the proper Cloudflare servers and wait for your domain to update the changes. (This can take up to 24 hours)</li> -<li>From the main Cloudflare dashboard navigate to the Crypto tab. Then under the SSL section, select "Flexible" from the dropdown.</li> +<li>From the main Cloudflare dashboard navigate to the Crypto tab. Then under the SSL section, select &#8220;Flexible&#8221; from the dropdown.</li> </ol> -<h3>Enjoy your newly secure site</h3> -<p>That's it! Give it a bit of time and soon your website will support <code>https</code> and best of all it costs you nothing!</p> -<p>I suggest checking out the other interesting features Cloudflare offers while your playing with the dashboard as well. They have a lot of impressive options that can really improve the overall performance of your site / web app.</p></content> - <link href="https://bt.ht/setting-up-free-ssl"/> - <id>https://bt.ht/setting-up-free-ssl</id> + +<h3 id="enjoy-your-newly-secure-site">Enjoy your newly secure site</h3> + +<p>That&#8217;s it! Give it a bit of time and soon your website will support <code>https</code> and best of all it costs you nothing!</p> + +<p>I suggest checking out the other interesting features Cloudflare offers while your playing with the dashboard as well. They have a lot of impressive options that can really improve the overall performance of your site &#47; web app.</p></content> + <link href="https://btxx.org/setting-up-free-ssl"/> + <id>https://btxx.org/setting-up-free-ssl</id> <updated>2018-08-07T10:00:00Z</updated> <published>2018-08-07T10:00:00Z</published> </entry> <entry> <title>Self-Hosting Fathom Analytics with DigitalOcean</title> - <content type="html"><h1>Self-Hosting Fathom Analytics with DigitalOcean</h1> + <content type="html"><h1 id="self-hosting-fathom-analytics-with-digitalocean">Self-Hosting Fathom Analytics with DigitalOcean</h1> + <p>2021-02-02</p> -<p>Since my previous post walked through the process of setting up <a href="/fathom-analytics-netlify">Fathom PRO on Netlify</a>, I figured it made sense to create a similar tutorial for the "Lite" variation, self-hosted on DigitalOcean.</p> -<p>Please note that while I think the PRO version of <a target="_blank" href="https://usefathom.com/ref/DKHJVX">Fathom Analytics</a> is truly great, for my small, niche blog it seemed overkill compared to self-hosting. Switching over from $14/mo to $5/mo while retaining most of the same functionality was a no-brainer. Choose the option that best suits your needs (or in the case - budget &amp; bandwidth).</p> -<p>With that cleared up - let's get into it!</p> -<h2>Prerequisites</h2> + +<p>Since my previous post walked through the process of setting up Fathom PRO on Netlify, I figured it made sense to create a similar tutorial for the &#8220;Lite&#8221; variation, self-hosted on DigitalOcean.</p> + +<p>Please note that while I think the PRO version of Fathom Analytics is truly great, for my small, niche blog it seemed overkill compared to self-hosting. Switching over from $14&#47;mo to $5&#47;mo while retaining most of the same functionality was a no-brainer. Choose the option that best suits your needs (or in the case - budget &#38; bandwidth).</p> + +<p>With that cleared up - let&#8217;s get into it!</p> + +<h2 id="prerequisites">Prerequisites</h2> + <ol> <li>One or more website(s) where you would like to include analytics</li> -<li><a target="_blank" href="https://m.do.co/c/74b3fd11c07a">DigitalOcean account</a> (<strong>this link will give you a $100 credit!</strong>)</li> +<li>DigitalOcean account (<strong>this link will give you a $100 credit!</strong>)</li> <li>Positive attitude and passion for privacy-respecting analytics!</li> </ol> -<h2>Create a Droplet</h2> -<p>Once your DigitalOcean account is setup, navigate to the <a target="_blank" href="https://marketplace.digitalocean.com">Marketplace</a> and search for <code>Fathom Analytics</code>. Then click the <code>Create Fathom Analytics Droplet</code>.</p> -<p>From here you'll be brought to a page that allows you to customize the specifications of your new droplet. If you're a smaller traffic site (personal blog, etc) selecting the <strong>$5/month</strong> Basic Shared CPU option is your best bet.</p> -<p><figure> - <img src="/public/images/fathom-create-droplet-details.webp" alt="Fathom Droplet Details"> - <figcaption>Creating the new droplet (<a href="/public/images/fathom-create-droplet-details.webp">direct link to image</a>)</figcaption> -</figure></p> + +<h2 id="create-a-droplet">Create a Droplet</h2> + +<p>Once your DigitalOcean account is setup, navigate to the Marketplace and search for <code>Fathom Analytics</code>. Then click the <code>Create Fathom Analytics Droplet</code>.</p> + +<p>From here you&#8217;ll be brought to a page that allows you to customize the specifications of your new droplet. If you&#8217;re a smaller traffic site (personal blog, etc) selecting the <strong>$5&#47;month</strong> Basic Shared CPU option is your best bet.</p> + <p>Select the data-center region based on where most of your traffic originates from. I would suggest enabling <code>IPv6</code> and setting up your authentication via SSH instead of a regular password system. Adding backups is entirely at your own discretion.</p> -<p>Once you're ready, click <strong>Create Droplet</strong>.</p> -<h2>Enter the Matrix (not really)</h2> + +<p>Once you&#8217;re ready, click <strong>Create Droplet</strong>.</p> + +<h2 id="enter-the-matrix-not-really">Enter the Matrix (not really)</h2> + <p>Once DigitalOcean finishes spinning up your new droplet, open a terminal and connect to it by entering:</p> + <pre><code>ssh root@YOUR_DROPLET_IP </code></pre> -<p>If you setup your login via SSH everything should work as-is. If you went the password route, you'll given a prompt to enter it.</p> -<p>Now that you're connected, Fathom will guide you through a simple configuration setup. It's fairly straightforward and painless. Once complete, move to the next step.</p> -<h2>Domains</h2> -<p>You'll most likely want to host this instance on your own domain or subdomain - instead of connecting directly via the droplet's <code>IP</code>. Head over to your <strong>Networking</strong> page in the sidebar of DigitalOcean and add your custom domain.</p> -<p>Then, click on that newly added domain - we need to add some new records. You're going to add two new <code>A</code> records to this domain:</p> -<p><table> - <thead> - <tr> - <th>Type</th> - <th>Hostname</th> - <th>Value</th> - </tr> - </thead> - <tbody> - <tr> - <td>A</td> - <td>@</td> - <td>YOUR_DROPLET_IP</td> - </tr> - <tr> - <td>A</td> - <td>www</td> - <td>YOUR_DROPLET_IP</td> - </tr> - </tbody> -</table></p> + +<p>If you setup your login via SSH everything should work as-is. If you went the password route, you&#8217;ll given a prompt to enter it.</p> + +<p>Now that you&#8217;re connected, Fathom will guide you through a simple configuration setup. It&#8217;s fairly straightforward and painless. Once complete, move to the next step.</p> + +<h2 id="domains">Domains</h2> + +<p>You&#8217;ll most likely want to host this instance on your own domain or subdomain - instead of connecting directly via the droplet&#8217;s <code>IP</code>. Head over to your <strong>Networking</strong> page in the sidebar of DigitalOcean and add your custom domain.</p> + +<p>Then, click on that newly added domain - we need to add some new records. You&#8217;re going to add two new <code>A</code> records to this domain:</p> + <p>The last thing you need to do is set your nameservers to point to DigitalOcean:</p> + <pre><code>ns1.digitalocean.com ns2.digitalocean.com ns3.digitalocean.com </code></pre> -<p>Give it some time to propagate and you'll be in business!</p> -<h2>SSL FTW</h2> + +<p>Give it some time to propagate and you&#8217;ll be in business!</p> + +<h2 id="ssl-ftw">SSL FTW</h2> + <p>There is hardly a good reason not to practice security on the web, so setting up your new analytics to be served over <code>HTTPS</code> is just the smart thing to do. Did I mention that this is completely free as well? See - no excuses.</p> -<p>In order to get a free SSL certificate setup, you'll need to install <code>certbot</code>. While connected to your droplet, enter the following:</p> + +<p>In order to get a free SSL certificate setup, you&#8217;ll need to install <code>certbot</code>. While connected to your droplet, enter the following:</p> + <pre><code>sudo apt-get install python-certbot-nginx </code></pre> + <p>Once installed, enter the following to setup SSL (remember to swap out the domain with your own):</p> + <pre><code>certbot --nginx -d your-cool-domain.com </code></pre> -<p>Follow the steps (it's very quick and easy) and you'll have <code>HTTPS</code> setup in a jiffy!</p> -<h2>The Final Lap</h2> + +<p>Follow the steps (it&#8217;s very quick and easy) and you&#8217;ll have <code>HTTPS</code> setup in a jiffy!</p> + +<h2 id="the-final-lap">The Final Lap</h2> + <p>The last thing to do is login to your newly self-hosted Fathom instance, add your site you wish to track, grab the generated tracking code and then slap that badboy on whatever pages you need to track!</p> -<p>Congrats! You're now officially running your own set of analytics tools. You should be happy about what you've accomplished and proud for respecting your users' privacy!</p></content> - <link href="https://bt.ht/self-hosting-fathom"/> - <id>https://bt.ht/self-hosting-fathom</id> + +<p>Congrats! You&#8217;re now officially running your own set of analytics tools. You should be happy about what you&#8217;ve accomplished and proud for respecting your users&#8217; privacy!</p></content> + <link href="https://btxx.org/self-hosting-fathom"/> + <id>https://btxx.org/self-hosting-fathom</id> <updated>2021-02-02T10:00:00Z</updated> <published>2021-02-02T10:00:00Z</published> </entry> <entry> <title>What Happened to Self-Hosted Blogs?</title> - <content type="html"><h1>What Happened to Self-Hosted Blogs?</h1> + <content type="html"><h1 id="what-happened-to-self-hosted-blogs">What Happened to Self-Hosted Blogs?</h1> + <p>2018-10-18</p> -<p>I remember a time on the internet<sup>1</sup> when everyone and their grandmother was running a personal blog. And I mean <em>personal</em> - not hosted on some side platform or a tacked-on addition to the rest of their website.</p> + +<p>I remember a time on the internet1 when everyone and their grandmother was running a personal blog. And I mean <em>personal</em> - not hosted on some side platform or a tacked-on addition to the rest of their website.</p> + <p>Nowadays companies and individuals alike use platforms like Medium to host and promote all of their articles, essays and case studies. I understand the draw, and can even list out the positives:</p> + <ol> <li>A large community already exists under the Medium brand</li> -<li>It's easy to promote your own work and follow others</li> +<li>It&#8217;s easy to promote your own work and follow others</li> <li>The platform is fairly easy to setup and implement</li> </ol> + <p>Unfortunately this has had a pretty severe impact on the blogging community as a whole - no one controls their own blogs anymore. I remember when finding a new blog was an interesting and fun experience:</p> + <ul> <li>how did they decide to layout the page design?</li> <li>what typefaces have they decided to use?</li> <li>what back-end are they using?</li> <li>how does it look and feel on mobile?</li> </ul> -<p>These custom self-hosted blogs inspired other developers and designers to create their own blogs or tweak current ones. In a way it was a small factor in pushing what we could do on the web further and further, as designers engaged in friendly competition trying to one-up each others' creations.</p> -<p>I also believe this inspired people to write better content instead of opting for clickbait garbage in order to get "featured" or boosted promotion on the main blogging platform. But I don't even think that's the worst to come of this mass-migration to a singular blogging platform.</p> -<p><strong>All<sup>2</sup> blogs look identical now.</strong> I'm not sure if that was Medium's intention, but either way I personally think it's horrible. The individual personality of most design and development blogs has been completely stripped away.</p> -<p>Maybe I'm just a salty designer with a narrow-minded, pessimistic view on where our blogging communities seem to be heading - or maybe I just have higher standards.</p> -<h2>Refs</h2> -<p><small><sup>1</sup> <i>the design world of the internet</i><br/></small> -<small><sup>2</sup> <i>by "All" I mean the majority</i></small></p></content> - <link href="https://bt.ht/self-hosted-blogs"/> - <id>https://bt.ht/self-hosted-blogs</id> + +<p>These custom self-hosted blogs inspired other developers and designers to create their own blogs or tweak current ones. In a way it was a small factor in pushing what we could do on the web further and further, as designers engaged in friendly competition trying to one-up each others&#8217; creations.</p> + +<p>I also believe this inspired people to write better content instead of opting for clickbait garbage in order to get &#8220;featured&#8221; or boosted promotion on the main blogging platform. But I don&#8217;t even think that&#8217;s the worst to come of this mass-migration to a singular blogging platform.</p> + +<p><strong>All2 blogs look identical now.</strong> I&#8217;m not sure if that was Medium&#8217;s intention, but either way I personally think it&#8217;s horrible. The individual personality of most design and development blogs has been completely stripped away.</p> + +<p>Maybe I&#8217;m just a salty designer with a narrow-minded, pessimistic view on where our blogging communities seem to be heading - or maybe I just have higher standards.</p> + +<h2 id="refs">Refs</h2> + +<p>1 the design world of the internet +2 by &#8220;All&#8221; I mean the majority</p></content> + <link href="https://btxx.org/self-hosted-blogs"/> + <id>https://btxx.org/self-hosted-blogs</id> <updated>2018-10-18T10:00:00Z</updated> <published>2018-10-18T10:00:00Z</published> </entry> <entry> <title>Schools Should Be Using Open Source Software</title> - <content type="html"><h1>Schools Should Be Using Open Source Software</h1> + <content type="html"><h1 id="schools-should-be-using-open-source-software">Schools Should Be Using Open Source Software</h1> + <p>2022-05-30</p> -<p>I firmly believe that proprietary software has no business in any school environment. Educational institutions lean heavily on Windows systems in the name of "security" or "easier platform management". This approach forces students into using locked-down, closed sourced software applications.</p> -<p>Word, Excel, PowerPoint. Why have these become the "standard" of text manipulation and processing?</p> + +<p>I firmly believe that proprietary software has no business in any school environment. Educational institutions lean heavily on Windows systems in the name of &#8220;security&#8221; or &#8220;easier platform management&#8221;. This approach forces students into using locked-down, closed sourced software applications.</p> + +<p>Word, Excel, PowerPoint. Why have these become the &#8220;standard&#8221; of text manipulation and processing?</p> + <p>Photoshop. Illustrator. Why are these the first applications used for image editing and creation?</p> + <p>Schools should only be allowed to use and teach with open source software. Starting students off down the path of vendor lock-in is only beneficial to the companies building those software systems.</p> -<h2>The Internet</h2> -<p>I'm an older fart, so my elementary school experience only included computers near the tail-end of mid-school. As such, it was forgivable to have students locked-in to using Internet Explorer (which would have been version 4 or 5 during my time) since there wasn't a great deal of competition.</p> -<p>The major problem is that IE/Edge is still the default and often times ONLY browser available in these classrooms. Again, I believe IT departments use the excuse of "security" to keep students on such dated browsers.</p> + +<h2 id="the-internet">The Internet</h2> + +<p>I&#8217;m an older fart, so my elementary school experience only included computers near the tail-end of mid-school. As such, it was forgivable to have students locked-in to using Internet Explorer (which would have been version 4 or 5 during my time) since there wasn&#8217;t a great deal of competition.</p> + +<p>The major problem is that IE&#47;Edge is still the default and often times ONLY browser available in these classrooms. Again, I believe IT departments use the excuse of &#8220;security&#8221; to keep students on such dated browsers.</p> + <p>Firefox, anyone? LibreWolf? Pale Moon?</p> -<p>Any of these browsers can be easily managed and secured by school IT departments. It doesn't HAVE to be IE...</p> -<h2>Reducing Hardware Cost</h2> -<p>By shifting towards a purely "open" software stack, schools then have the ability to purchase older, cheaper hardware. Instead of running bloated spyware (Windows) IT departments could opt to use any one of the lightweight Linux distros available.</p> -<p>This would reduce e-waste, save school districts significant amounts of money (no need to purchase Windows licenses or beefy hardware to be able to even <em>run</em> the operating system) all while still maintaining a high level of user/network security.</p> -<p>Heck, you could even have a fleet of Raspberry Pi devices as your main student "computers". The cost of replacement also becomes less significant (these are children using these devices remember).</p> -<h2>Security</h2> + +<p>Any of these browsers can be easily managed and secured by school IT departments. It doesn&#8217;t HAVE to be IE&#8230;</p> + +<h2 id="reducing-hardware-cost">Reducing Hardware Cost</h2> + +<p>By shifting towards a purely &#8220;open&#8221; software stack, schools then have the ability to purchase older, cheaper hardware. Instead of running bloated spyware (Windows) IT departments could opt to use any one of the lightweight Linux distros available.</p> + +<p>This would reduce e-waste, save school districts significant amounts of money (no need to purchase Windows licenses or beefy hardware to be able to even <em>run</em> the operating system) all while still maintaining a high level of user&#47;network security.</p> + +<p>Heck, you could even have a fleet of Raspberry Pi devices as your main student &#8220;computers&#8221;. The cost of replacement also becomes less significant (these are children using these devices remember).</p> + +<h2 id="security">Security</h2> + <p>I briefly mentioned user and network security above but figured it deserved its own section. A great deal of push-back comes from stubborn IT professionals[^0] determined to keep things running on Windows - since this is mostly what they are familiar with.</p> -<p>My mother-in-law was an "at-risk" educator for most of her career. She explained to me that their IT department did a major switch over to use BRAND NEW Apple laptops for all the students just before her retirement. I can't even begin to imagine the cost associated with this change. Not to mention the cost of repair for any of these devices when (not if) damaged.</p> + +<p>My mother-in-law was an &#8220;at-risk&#8221; educator for most of her career. She explained to me that their IT department did a major switch over to use BRAND NEW Apple laptops for all the students just before her retirement. I can&#8217;t even begin to imagine the cost associated with this change. Not to mention the cost of repair for any of these devices when (not if) damaged.</p> + <p>Who the hell is making these decisions? Even worse, who is approving them?! The school board had the opportunity to switch away from Windows devices and decided on Apple? Education reform is greatly needed[^1].</p> -<h2>What About The "Job Market"</h2> -<p>I'm not ignorant to the fact that many businesses in the real world require familiarity with some of these more popular closed source applications (Word, Excel). I don't have a magic solution to instantly convert all applications used by the companies, but beginning the process in the education system is a solid start. Over time, the standard will <em>become</em> these open platforms. The initial change just needs to be made.</p> -<p>It should also be mentioned that these open source applications carry over a lot of similar functionality to their closed-sourced counterparts. So it isn't as if a user with extensive LibreOffice experience would be utterly lost while using Microsoft Word.</p> -<h2>Looking Under the Hood</h2> -<p>Another bonus in using fully open source software is the ability for the students to deep dive into the code itself. This can be a great resource for early programming fundamentals and beginner coding classes. Why not dissect the very program used in your other classes? Here's an example of a possible class project: students could build out their own plugins or extensions for an existing application!</p> -<h2>Suggested Alternatives</h2> -<p>So what are these "open source" alternatives? Check out my simple suggestions below:</p> -<p>MS Office Suite ==&gt; LibreOffice Suite[^2]</p> -<p>Photoshop ==&gt; GIMP</p> -<p>Illustrator ==&gt; Inkscape</p> -<p>IE/Edge ==&gt; Firefox[^3]</p> -<p>Coding IDE (optional) ===&gt; vim</p> + +<h2 id="what-about-the-job-market">What About The &#8220;Job Market&#8221;</h2> + +<p>I&#8217;m not ignorant to the fact that many businesses in the real world require familiarity with some of these more popular closed source applications (Word, Excel). I don&#8217;t have a magic solution to instantly convert all applications used by the companies, but beginning the process in the education system is a solid start. Over time, the standard will <em>become</em> these open platforms. The initial change just needs to be made.</p> + +<p>It should also be mentioned that these open source applications carry over a lot of similar functionality to their closed-sourced counterparts. So it isn&#8217;t as if a user with extensive LibreOffice experience would be utterly lost while using Microsoft Word.</p> + +<h2 id="looking-under-the-hood">Looking Under the Hood</h2> + +<p>Another bonus in using fully open source software is the ability for the students to deep dive into the code itself. This can be a great resource for early programming fundamentals and beginner coding classes. Why not dissect the very program used in your other classes? Here&#8217;s an example of a possible class project: students could build out their own plugins or extensions for an existing application!</p> + +<h2 id="suggested-alternatives">Suggested Alternatives</h2> + +<p>So what are these &#8220;open source&#8221; alternatives? Check out my simple suggestions below:</p> + +<p>MS Office Suite ==&#62; LibreOffice Suite[^2]</p> + +<p>Photoshop ==&#62; GIMP</p> + +<p>Illustrator ==&#62; Inkscape</p> + +<p>IE&#47;Edge ==&#62; Firefox[^3]</p> + +<p>Coding IDE (optional) ===&#62; vim</p> + <p>You could easily expand upon these options, but for most elementary school task these are more than enough.</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> <li>Not <em>all</em> IT workers in the school system fall into this category. But most of the underlining structure prevents them from changing much.</li> -<li>At least in my country of Canada. I can't speak for others.</li> -<li><code>groff</code> would be my personal suggestion instead, since it helps introduce children into the structure of basic file formatting and "programming". I'll go into greater details about this in another post.</li> -<li>As mentioned in the beginning of the post, I'd even suggest forks of Firefox -&gt; LibreWolf or Pale Moon (if possible)</li> +<li>At least in my country of Canada. I can&#8217;t speak for others.</li> +<li><code>groff</code> would be my personal suggestion instead, since it helps introduce children into the structure of basic file formatting and &#8220;programming&#8221;. I&#8217;ll go into greater details about this in another post.</li> +<li>As mentioned in the beginning of the post, I&#8217;d even suggest forks of Firefox -&#62; LibreWolf or Pale Moon (if possible)</li> </ol></content> - <link href="https://bt.ht/schools"/> - <id>https://bt.ht/schools</id> + <link href="https://btxx.org/schools"/> + <id>https://btxx.org/schools</id> <updated>2022-05-30T10:00:00Z</updated> <published>2022-05-30T10:00:00Z</published> </entry> <entry> <title>Enabling Safari Extensions with the macOS Catalina Patcher</title> - <content type="html"><h1>Enabling Safari Extensions with the macOS Catalina Patcher</h1> + <content type="html"><h1 id="enabling-safari-extensions-with-the-macos-catalina-patcher">Enabling Safari Extensions with the macOS Catalina Patcher</h1> + <p>2021-09-23</p> + <p>I have an old 2011 MacBook Air that is running the latest version of macOS Catalina thanks to the very wonderful <a href="http://dosdude1.com/catalina/">Catalina Patcher</a> by dosdude1. This project has made it possible for me to run and test some of the latest software from Apple - namely Safari 15.</p> + <p>I ran into a small bug early on though – Safari extensions couldn’t be activated via the preferences menu. Luckily I discovered a very simple fix. My hope is this might help others (as small of a demographic that might be) who run into the same issue with the Catalina Patcher.</p> + <ul> -<li>Close/Quit Safari completely</li> +<li>Close&#47;Quit Safari completely</li> <li>Open the Finder and use the shortcut <code>⌘ Shift G</code></li> -<li>Paste the following to navigate to the proper folder: <code>~/Library/Containers/com.apple.Safari/Data/Library/Safari/AppExtensions</code></li> -<li>Open the <code>Extensions.plist</code> in your favourite text editor (I’m a big fan of Panic's Nova)</li> -<li>Below each extensions <code>&lt;dict&gt;</code> tag, add the following: <code>&lt;key&gt;Enabled&lt;/key&gt;&lt;true/&gt;</code></li> +<li>Paste the following to navigate to the proper folder: <code>~&#47;Library&#47;Containers&#47;com.apple.Safari&#47;Data&#47;Library&#47;Safari&#47;AppExtensions</code></li> +<li>Open the <code>Extensions.plist</code> in your favourite text editor (I’m a big fan of Panic&#8217;s Nova)</li> +<li>Below each extensions <code>&#60;dict&#62;</code> tag, add the following: <code>&#60;key&#62;Enabled&#60;&#47;key&#62;&#60;true&#47;&#62;</code></li> <li>Save the file and relaunch Safari</li> </ul> + <p>Reference of what it should look like (AdBlock for this example):</p> -<pre><code>&lt;key&gt;org.adblockplus...&lt;/key&gt; - &lt;dict&gt; - &lt;key&gt;AddedDate&lt;/key&gt; - &lt;date&gt;2021-09-23T14:00:47Z&lt;/date&gt; - &lt;key&gt;Enabled&lt;/key&gt; - &lt;true/&gt; - &lt;key&gt;WebsiteAccess&lt;/key&gt; - &lt;dict&gt; - &lt;key&gt;Allowed Domains&lt;/key&gt; - &lt;array/&gt; - &lt;key&gt;Has Injected Content&lt;/key&gt; - &lt;true/&gt; - &lt;key&gt;Level&lt;/key&gt; - &lt;string&gt;All&lt;/string&gt; - &lt;/dict&gt; - &lt;/dict&gt; -</code></pre> -<p>After following those simple steps you should have working extensions in Safari. Have fun on your old, "unsupported" Apple devices!</p></content> - <link href="https://bt.ht/safari-extensions-catalina-patcher"/> - <id>https://bt.ht/safari-extensions-catalina-patcher</id> + +<pre><code>&#60;key&#62;org.adblockplus...&#60;&#47;key&#62; + &#60;dict&#62; + &#60;key&#62;AddedDate&#60;&#47;key&#62; + &#60;date&#62;2021-09-23T14:00:47Z&#60;&#47;date&#62; + &#60;key&#62;Enabled&#60;&#47;key&#62; + &#60;true&#47;&#62; + &#60;key&#62;WebsiteAccess&#60;&#47;key&#62; + &#60;dict&#62; + &#60;key&#62;Allowed Domains&#60;&#47;key&#62; + &#60;array&#47;&#62; + &#60;key&#62;Has Injected Content&#60;&#47;key&#62; + &#60;true&#47;&#62; + &#60;key&#62;Level&#60;&#47;key&#62; + &#60;string&#62;All&#60;&#47;string&#62; + &#60;&#47;dict&#62; + &#60;&#47;dict&#62; +</code></pre> + +<p>After following those simple steps you should have working extensions in Safari. Have fun on your old, &#8220;unsupported&#8221; Apple devices!</p></content> + <link href="https://btxx.org/safari-extensions-catalina-patcher"/> + <id>https://btxx.org/safari-extensions-catalina-patcher</id> <updated>2021-09-23T10:00:00Z</updated> <published>2021-09-23T10:00:00Z</published> </entry> <entry> <title>Dear Apple, Please Fix Safari's Default Dark Mode Link Color</title> - <content type="html"><h1>Dear Apple, Please Fix Safari's Default Dark Mode Link Color</h1> + <content type="html"><h1 id="dear-apple-please-fix-safaris-default-dark-mode-link-color">Dear Apple, Please Fix Safari&#8217;s Default Dark Mode Link Color</h1> + <p>2022-04-18</p> -<p>Supporting dark mode on the modern web falls under the realm of accessibility and should not be ignored. It is important and helps keep the visual flow of your content to match that of your users' operating system UI. Not to mention, it's easy to implement and keep consistent across browsers.</p> -<h2>Support Dark Mode with Zero CSS</h2> -<p>A common practice is to include a <code>@media</code> query via CSS to target styling changes based on whether <code>dark-mode</code> is active. I tend to believe this is overkill for basic websites. Many developers aren't aware of the HTML <code>color-scheme</code> parameter. (This website itself is using it in place of CSS media queries)</p> -<h3>HTML "color-scheme"</h3> -<p>Adding the following meta tag inside your document's <code>head</code> element, you can enable dark mode instantly with zero configuration:</p> -<pre><code>&lt;meta name=&quot;color-scheme&quot; content=&quot;dark light&quot; /&gt; + +<p>Supporting dark mode on the modern web falls under the realm of accessibility and should not be ignored. It is important and helps keep the visual flow of your content to match that of your users&#8217; operating system UI. Not to mention, it&#8217;s easy to implement and keep consistent across browsers.</p> + +<h2 id="support-dark-mode-with-zero-css">Support Dark Mode with Zero CSS</h2> + +<p>A common practice is to include a <code>@media</code> query via CSS to target styling changes based on whether <code>dark-mode</code> is active. I tend to believe this is overkill for basic websites. Many developers aren&#8217;t aware of the HTML <code>color-scheme</code> parameter. (This website itself is using it in place of CSS media queries)</p> + +<h3 id="html-color-scheme">HTML &#8220;color-scheme&#8221;</h3> + +<p>Adding the following meta tag inside your document&#8217;s <code>head</code> element, you can enable dark mode instantly with zero configuration:</p> + +<pre><code>&#60;meta name="color-scheme" content="dark light" &#47;&#62; </code></pre> + <p>There are minor caveats:</p> + <ol> <li>You should not be specifying any <code>background</code> styling to your <code>body</code> or <code>html</code> elements</li> <li>You should be not specifying any <code>color</code> styling across any of your readable content (paragraphs, headings, lists, blockquotes)</li> </ol> -<p>That's it! In case you were curious, all major browsers support this color scheme meta tag: <a href="https://caniuse.com/mdn-html_elements_meta_name_color-scheme">https://caniuse.com/mdn-html<em>elements</em>meta<em>name</em>color-scheme</a></p> -<h2>But Wait, What's This About Safari?</h2> + +<p>That&#8217;s it! In case you were curious, all major browsers support this color scheme meta tag: <a href="https://caniuse.com/mdn-html_elements_meta_name_color-scheme">https:&#47;&#47;caniuse.com&#47;mdn-html<em>elements</em>meta<em>name</em>color-scheme</a></p> + +<h2 id="but-wait-whats-this-about-safari">But Wait, What&#8217;s This About Safari?</h2> + <p>Even though by adding the color-scheme meta tag we get ourselves good dark mode support across all browsers - Safari has one big oversight: link color. Take a look at the comparison screenshots below (based on one of my older articles). The first one is taken in Firefox, the second in Safari:</p> -<p><figure> -<img src="/public/images/firefox-dark-mode.webp" alt="Firefox dark mode example"> -<figcaption>Firefox's default dark mode link color</figcaption> -</figure></p> -<p><figure> -<img src="/public/images/safari-dark-mode.webp" alt="Safari dark mode example"> -<figcaption>Safari's default dark mode link color - yuck!</figcaption> -</figure></p> + <p>Luckily for us there is a simple solution using minimal amounts of CSS[^1]:</p> + <pre><code>@supports (color-scheme: dark light) { @media screen and (prefers-color-scheme: dark) { a:link {color: #9e9eff;} @@ -2250,161 +2893,225 @@ ns3.digitalocean.com } } </code></pre> -<p>We are brute-forcing Safari to implement the same color HEX codes used by both Firefox and Chrome browsers. How a horrible accessibility oversight could happen within a company as large as Apple is astounding...</p> -<h2>Apple: Fix Your Browser's Dark Mode</h2> -<p>My hope if that even one Safari design or development team member stumbles across this article and raises this ticket to the rest of the team[^2]. It's an unbelievably easy fix and would save developers the headache of overriding these things ourselves.</p> + +<p>We are brute-forcing Safari to implement the same color HEX codes used by both Firefox and Chrome browsers. How a horrible accessibility oversight could happen within a company as large as Apple is astounding&#8230;</p> + +<h2 id="apple-fix-your-browsers-dark-mode">Apple: Fix Your Browser&#8217;s Dark Mode</h2> + +<p>My hope if that even one Safari design or development team member stumbles across this article and raises this ticket to the rest of the team[^2]. It&#8217;s an unbelievably easy fix and would save developers the headache of overriding these things ourselves.</p> + <p>Thanks for reading and happy dark mode to you all!</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>Special thanks to <a href="https://seirdy.one/">Seirdy</a> for suggesting the use of :link and :active support. I recommend you check out his take on <a href="https://seirdy.one/2020/11/23/website-best-practices.html#dark-themes">dark mode / theme support</a>.</li> +<li>Special thanks to <a href="https://seirdy.one/">Seirdy</a> for suggesting the use of :link and :active support. I recommend you check out his take on <a href="https://seirdy.one/2020/11/23/website-best-practices.html#dark-themes">dark mode &#47; theme support</a>.</li> <li>This has an open ticket through <a href="https://bugs.webkit.org/show_bug.cgi?id=209851">Webkit Bugzilla</a></li> </ol></content> - <link href="https://bt.ht/safari-default-dark-mode"/> - <id>https://bt.ht/safari-default-dark-mode</id> + <link href="https://btxx.org/safari-default-dark-mode"/> + <id>https://btxx.org/safari-default-dark-mode</id> <updated>2022-04-18T10:00:00Z</updated> <published>2022-04-18T10:00:00Z</published> </entry> <entry> <title>Installing Ruby with RVM on Alpine Linux</title> - <content type="html"><h1>Installing Ruby with RVM on Alpine Linux</h1> + <content type="html"><h1 id="installing-ruby-with-rvm-on-alpine-linux">Installing Ruby with RVM on Alpine Linux</h1> + <p>2023-03-16</p> -<p>For some on-going projects I need to switch to different versions of <code>ruby</code>. Although there exist many step-by-step instructions on installing and configuring <code>rvm</code> for most Linux distros, there aren't many focused on Alpine "daily drivers".</p> -<p>So this post is more or less a helpful document for my future self. If it happens to help others then that's an added bonus!</p> -<h2>Simple Setup</h2> + +<p>For some on-going projects I need to switch to different versions of <code>ruby</code>. Although there exist many step-by-step instructions on installing and configuring <code>rvm</code> for most Linux distros, there aren&#8217;t many focused on Alpine &#8220;daily drivers&#8221;.</p> + +<p>So this post is more or less a helpful document for my future self. If it happens to help others then that&#8217;s an added bonus!</p> + +<h2 id="simple-setup">Simple Setup</h2> + <p>Make sure you have the basic packages first:</p> + <pre><code>apk update apk add curl gcc gnupg gpg dirmngr procps musl-dev linux-headers zlib zlib-dev openssl openssl-dev libssl1.1 </code></pre> -<p>Next download the latest <code>stable</code> version of <code>rvm</code> from Github, unpack it, place it in the proper user directory (~/.rvm) and install any required libs:</p> -<pre><code>curl -sSL https://github.com/rvm/rvm/tarball/stable -o rvm-stable.tar.gz -echo 'export rvm_prefix=&quot;$HOME&quot;' &gt; ~/.rvmrc -echo 'export rvm_path=&quot;$HOME/.rvm&quot;' &gt;&gt; ~/.rvmrc -mkdir rvm &amp;&amp; cd rvm -tar --strip-components=1 -xzf ../rvm-stable.tar.gz -./install --auto-dotfiles --autolibs=0 + +<p>Next download the latest <code>stable</code> version of <code>rvm</code> from Github, unpack it, place it in the proper user directory (~&#47;.rvm) and install any required libs:</p> + +<pre><code>curl -sSL https:&#47;&#47;github.com&#47;rvm&#47;rvm&#47;tarball&#47;stable -o rvm-stable.tar.gz +echo &#39;export rvm_prefix="$HOME"&#39; &#62; ~&#47;.rvmrc +echo &#39;export rvm_path="$HOME&#47;.rvm"&#39; &#62;&#62; ~&#47;.rvmrc +mkdir rvm &#38;&#38; cd rvm +tar --strip-components=1 -xzf ..&#47;rvm-stable.tar.gz +.&#47;install --auto-dotfiles --autolibs=0 </code></pre> + <p>Now we can remove everything and properly link to <code>rvm</code>:</p> -<pre><code>cd ../ &amp;&amp; rm -rf rvm-stable stable.tar.gz rvm -source ~/.rvm/scripts/rvm + +<pre><code>cd ..&#47; &#38;&#38; rm -rf rvm-stable stable.tar.gz rvm +source ~&#47;.rvm&#47;scripts&#47;rvm </code></pre> + <p>Now you can freely install any version of Ruby that you desire!</p> + <pre><code>rvm install ruby-X.X.X </code></pre></content> - <link href="https://bt.ht/rvm"/> - <id>https://bt.ht/rvm</id> + <link href="https://btxx.org/rvm"/> + <id>https://btxx.org/rvm</id> <updated>2023-03-16T10:00:00Z</updated> <published>2023-03-16T10:00:00Z</published> </entry> <entry> <title>RSS Hacks With XSLT</title> - <content type="html"><h1>RSS Hacks With XSLT</h1> + <content type="html"><h1 id="rss-hacks-with-xslt">RSS Hacks With XSLT</h1> + <p>2022-05-23</p> -<p>In my spare time I've been further tinkering (hopefully for the better) with my humble Shinobi Website[^0] script. The most recent update in <code>patch-1</code> came with a solid amount of QoL improvements. If you're interested, I wrote about it on the official Shinobi blog[^1].</p> -<p>The next feature I wanted to tackle was designing a custom layout for the XML files directly in the browser. I was greatly inspired to create something similar to Len Falken's main directory listing[^2], since that blog was one of the original inspirations for Shinobi. I'm not able to copy what's there though, since our feed builds are quite a bit different.</p> + +<p>In my spare time I&#8217;ve been further tinkering (hopefully for the better) with my humble Shinobi Website[^0] script. The most recent update in <code>patch-1</code> came with a solid amount of QoL improvements. If you&#8217;re interested, I wrote about it on the official Shinobi blog[^1].</p> + +<p>The next feature I wanted to tackle was designing a custom layout for the XML files directly in the browser. I was greatly inspired to create something similar to Len Falken&#8217;s main directory listing[^2], since that blog was one of the original inspirations for Shinobi. I&#8217;m not able to copy what&#8217;s there though, since our feed builds are quite a bit different.</p> + <p>I then proceeded to fall down the XSLT rabbit hole.</p> -<h2>It Never Works the First Time, Does It?</h2> -<p>Since the shinobi script generates valid RSS code by default, I didn't want to mess around <em>too</em> much via XSLT and risk breaking validation. I also wanted to keep the "plain text" look-and-feel for consistency with the rest of the site, even though the XSLT template would render into standard HTML. Minor CSS styling and placing the content directly inside <code>pre</code> tags solved these issues.</p> + +<h2 id="it-never-works-the-first-time-does-it">It Never Works the First Time, Does It?</h2> + +<p>Since the shinobi script generates valid RSS code by default, I didn&#8217;t want to mess around <em>too</em> much via XSLT and risk breaking validation. I also wanted to keep the &#8220;plain text&#8221; look-and-feel for consistency with the rest of the site, even though the XSLT template would render into standard HTML. Minor CSS styling and placing the content directly inside <code>pre</code> tags solved these issues.</p> + <p>My first attempt was to use the available <code>sort</code> parameter (in XSL version 1.1+) targeting the <code>dc:date</code> type linked to the <code>pubDate</code> element:</p> -<pre><code>&lt;xsl:sort select=&quot;pubDate&quot; data-type=&quot;dc:date&quot; order=&quot;descending&quot;/&gt; -&lt;!-- each individual post's content here --&gt; + +<pre><code>&#60;xsl:sort select="pubDate" data-type="dc:date" order="descending"&#47;&#62; +&#60;!-- each individual post&#39;s content here --&#62; </code></pre> -<p>This did not work as intended. RSS 2.0 requires that the <code>pubDate</code> content is set to comply with the RFC-822 date-time[^3], which shinobi handles perfectly fine. The issue came from the XSL <code>sort</code> parameter not honoring this setting across all dates. My best guess is that it struggles to properly organize posts from their "month" parameter, so it sets the posts in order of date in what I refer to as "monthly sections".</p> -<p>If anyone knows why this failed to consistently order the posts via <code>pubDate</code>, please let me know using the comment link below. I'm far from an XSLT expert and might have overlooked something painfully obvious!</p> -<h2>RSS Hack: Categories</h2> -<p>After spending far too much time reading over documentation, official manual pages and Stack Overflow comments I gave up on the <code>dc:date</code> sort. I realized I could sort the posts much easier if they were converted into a format similar to ISO 8601. But <code>pubDate</code> is required to be in RFC-822, so I couldn't alter that in the final XML file.</p> + +<p>This did not work as intended. RSS 2.0 requires that the <code>pubDate</code> content is set to comply with the RFC-822 date-time[^3], which shinobi handles perfectly fine. The issue came from the XSL <code>sort</code> parameter not honoring this setting across all dates. My best guess is that it struggles to properly organize posts from their &#8220;month&#8221; parameter, so it sets the posts in order of date in what I refer to as &#8220;monthly sections&#8221;.</p> + +<p>If anyone knows why this failed to consistently order the posts via <code>pubDate</code>, please let me know using the comment link below. I&#8217;m far from an XSLT expert and might have overlooked something painfully obvious!</p> + +<h2 id="rss-hack-categories">RSS Hack: Categories</h2> + +<p>After spending far too much time reading over documentation, official manual pages and Stack Overflow comments I gave up on the <code>dc:date</code> sort. I realized I could sort the posts much easier if they were converted into a format similar to ISO 8601. But <code>pubDate</code> is required to be in RFC-822, so I couldn&#8217;t alter that in the final XML file.</p> + <p>Then I remembered the <code>category</code> tag which shinobi does not utilize by default.</p> + <p>First I needed to convert the RFC-822 formatted date (found on the first line of all blog post text files) and render it inside a <code>category</code> tag. This was simple enough:</p> -<pre><code>$(date -j -f &quot;%a, %d %b %Y&quot; &quot;$(head -n 1 $file)&quot; +&quot;%Y/%m/%d/%u&quot;) + +<pre><code>$(date -j -f "%a, %d %b %Y" "$(head -n 1 $file)" +"%Y&#47;%m&#47;%d&#47;%u") </code></pre> -<p>In a nutshell, this converts the RFC-822 date into the format "2022/05/24/2". Simple numbers that can be sorted much easier by XSL. Now all that was needed was setting to <code>sort</code> parameter properly:</p> -<pre><code>&lt;xsl:sort select=&quot;category&quot; order=&quot;descending&quot;/&gt; + +<p>In a nutshell, this converts the RFC-822 date into the format &#8220;2022&#47;05&#47;24&#47;2&#8221;. Simple numbers that can be sorted much easier by XSL. Now all that was needed was setting to <code>sort</code> parameter properly:</p> + +<pre><code>&#60;xsl:sort select="category" order="descending"&#47;&#62; </code></pre> + <p>Everything worked perfectly and the RSS was still valid!</p> -<h3>Patch-2 Pending</h3> -<p>I've ported these changes over to this blog to perform some "in the wild" testing. You can see the custom feed list in your supported browser by visiting:</p> -<p><a href="https://pblog.bt.ht/feed.xml">https://pblog.bt.ht/feed.xml</a></p> -<p>As for the shinobi project itself, I have not merged these updates into the main master branch (at the time of publishing this article). They can be found sitting on patch-2[^4]. My plan is to get this merged ASAP once a little more real-world testing is finished and I can include a better "setup/install" section for newcomers.</p> -<h2>Shinobi Updates</h2> -<p>If you're interested in more updates and details about the shinobi project itself, feel free to sub to that specific feed below. This post was more focused on hacking RSS parameters that happened to involve shinobi, but in the future all updates specific to the project will be posted there:</p> -<p><a href="https://shinobi.bt.ht/feed.xml">https://shinobi.bt.ht/feed.xml</a></p> -<h2>Refs</h2> + +<h3 id="patch-2-pending">Patch-2 Pending</h3> + +<p>I&#8217;ve ported these changes over to this blog to perform some &#8220;in the wild&#8221; testing. You can see the custom feed list in your supported browser by visiting:</p> + +<p><a href="https://pblog.bt.ht/feed.xml">https:&#47;&#47;pblog.bt.ht&#47;feed.xml</a></p> + +<p>As for the shinobi project itself, I have not merged these updates into the main master branch (at the time of publishing this article). They can be found sitting on patch-2[^4]. My plan is to get this merged ASAP once a little more real-world testing is finished and I can include a better &#8220;setup&#47;install&#8221; section for newcomers.</p> + +<h2 id="shinobi-updates">Shinobi Updates</h2> + +<p>If you&#8217;re interested in more updates and details about the shinobi project itself, feel free to sub to that specific feed below. This post was more focused on hacking RSS parameters that happened to involve shinobi, but in the future all updates specific to the project will be posted there:</p> + +<p><a href="https://shinobi.bt.ht/feed.xml">https:&#47;&#47;shinobi.bt.ht&#47;feed.xml</a></p> + +<h2 id="refs">Refs</h2> + <ol> -<li>https://shinobi.website/</li> -<li>https://shinobi.website/posts/patch-1.txt</li> -<li>http://len.falken.directory/</li> -<li>https://validator.w3.org/feed/docs/error/InvalidRFC2822Date.html</li> -<li>https://git.sr.ht/~tdarb/shinobi-script/tree/patch-2</li> +<li><a href="https://shinobi.website/">https:&#47;&#47;shinobi.website&#47;</a></li> +<li><a href="https://shinobi.website/posts/patch-1.txt">https:&#47;&#47;shinobi.website&#47;posts&#47;patch-1.txt</a></li> +<li><a href="http://len.falken.directory/">http:&#47;&#47;len.falken.directory&#47;</a></li> +<li><a href="https://validator.w3.org/feed/docs/error/InvalidRFC2822Date.html">https:&#47;&#47;validator.w3.org&#47;feed&#47;docs&#47;error&#47;InvalidRFC2822Date.html</a></li> +<li><a href="https://git.sr.ht/~tdarb/shinobi-script/tree/patch-2">https:&#47;&#47;git.sr.ht&#47;~tdarb&#47;shinobi-script&#47;tree&#47;patch-2</a></li> </ol></content> - <link href="https://bt.ht/rss-hacks"/> - <id>https://bt.ht/rss-hacks</id> + <link href="https://btxx.org/rss-hacks"/> + <id>https://btxx.org/rss-hacks</id> <updated>2022-05-23T10:00:00Z</updated> <published>2022-05-23T10:00:00Z</published> </entry> <entry> <title>Clickable Links Inside XML</title> - <content type="html"><h1>Clickable Links Inside XML</h1> + <content type="html"><h1 id="clickable-links-inside-xml">Clickable Links Inside XML</h1> + <p>2022-06-20</p> + <p>With the recent patch to the Shinobi Website project, I thought it would be best to share my experience implementing clickable links inside a rendered XML RSS file directly through a browser. This is made possible thanks to the awesome power of XSL formatting.</p> + <p>Before we begin, it should be noted that both Safari for macOS and <em>all</em> browsers on iOS do NOT support the ability to render XML files. Instead you are required to download the feeds as static files to your system. Major bummmer. Hopefully this will be fixed in the near future.</p> -<h2>The Code</h2> + +<h2 id="the-code">The Code</h2> + <p>Rendering your entry links as interactive URLs is fairly intuitive. You just need to:</p> + <ol> -<li>Tell the file which tag it needs to render as the "a:link" element</li> -<li>Set the inner child attribute to "href"</li> -<li>Set the value of that attribute to use the entry's <code>link</code> parameter</li> +<li><p>Tell the file which tag it needs to render as the &#8220;a:link&#8221; element</p></li> +<li><p>Set the inner child attribute to &#8220;href&#8221;</p></li> +<li><p>Set the value of that attribute to use the entry&#8217;s <code>link</code> parameter</p> + +<p><a href="/xsl:attribute">&#47;xsl:attribute</a> + +<a href="/xsl:element">&#47;xsl:element</a></p></li> </ol> -<pre><code>&lt;xsl:element name=&quot;a&quot;&gt; - &lt;xsl:attribute name=&quot;href&quot;&gt; - &lt;xsl:value-of select=&quot;link&quot;/&gt; - &lt;/xsl:attribute&gt; - &lt;pre&gt;&lt;xsl:value-of select=&quot;title&quot;/&gt;&lt;/pre&gt; -&lt;/xsl:element&gt; -</code></pre> + <p>In the instance above I am rendering the entry title as a clickable element which will direct users to the specific entry URL. You could simply render the full entry link URL text as the interactive link if you prefer. Something like:</p> -<pre><code>&lt;xsl:element name=&quot;a&quot;&gt; - &lt;xsl:attribute name=&quot;href&quot;&gt; - &lt;xsl:value-of select=&quot;link&quot;/&gt; - &lt;/xsl:attribute&gt; - &lt;pre&gt;&lt;xsl:value-of select=&quot;link&quot;/&gt;&lt;/pre&gt; -&lt;/xsl:element&gt; -</code></pre> -<h2>Live Example</h2> -<p>In a supported browser, you can see the code in action here: https://pblog.bt.ht/feed.xml</p> -<p>That's really all there is to it.</p> -<h2>Refs</h2> + +<pre><code>&#60;xsl:element name="a"&#62; + &#60;xsl:attribute name="href"&#62; + &#60;xsl:value-of select="link"&#47;&#62; + &#60;&#47;xsl:attribute&#62; + &#60;pre&#62;&#60;xsl:value-of select="link"&#47;&#62;&#60;&#47;pre&#62; +&#60;&#47;xsl:element&#62; +</code></pre> + +<h2 id="live-example">Live Example</h2> + +<p>In a supported browser, you can see the code in action here: <a href="https://pblog.bt.ht/feed.xml">https:&#47;&#47;pblog.bt.ht&#47;feed.xml</a></p> + +<p>That&#8217;s really all there is to it.</p> + +<h2 id="refs">Refs</h2> + <ol> -<li>https://shinobi.bt.ht/posts/patch-3.txt</li> +<li><a href="https://shinobi.bt.ht/posts/patch-3.txt">https:&#47;&#47;shinobi.bt.ht&#47;posts&#47;patch-3.txt</a></li> </ol></content> - <link href="https://bt.ht/rss-click"/> - <id>https://bt.ht/rss-click</id> + <link href="https://btxx.org/rss-click"/> + <id>https://btxx.org/rss-click</id> <updated>2022-06-20T10:00:00Z</updated> <published>2022-06-20T10:00:00Z</published> </entry> <entry> <title>Quick and Dirty Theme Switcher</title> - <content type="html"><h1>Quick and Dirty Theme Switcher</h1> + <content type="html"><h1 id="quick-and-dirty-theme-switcher">Quick and Dirty Theme Switcher</h1> + <p>2020-06-04</p> -<p><strong>Update</strong>: This article is no longer relevant since my blog design has changed. I'm keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site.</p> -<hr /> -<p><em>I recently added a fairly straightforward color scheme (theme) switcher</em> to my personal website. You can toggle this simple color switcher in the footer of the site to see it in action. In case anyone else had the desire to add such functionality to their own sites/projects, I figured I'd write up a quick post explaining how to do so. Let's get into it.</p> -<p><figure> - <img src="/public/images/site-color-schemes.gif" alt="Theme color scheme switcher"> - <figcaption>My website color scheme switcher in action (<a href="/public/images/site-color-schemes.gif">direct link to image</a>)</figcaption> -</figure> </p> -<h2>The HTML</h2> -<p>First we need to include the &amp;#8220;buttons&amp;#8221; that will trigger the theme to switch based on which one is selected. (Note: you could always render these as <code>options</code> in a <code>select</code> element if you preferred that method)</p> -<pre><code>&lt;div class=&quot;color-select&quot;&gt; - &lt;button onclick=&quot;toggleDefaultTheme()&quot;&gt;&lt;/button&gt; - &lt;button onclick=&quot;toggleSecondTheme()&quot;&gt;&lt;/button&gt; - &lt;button onclick=&quot;toggleThirdTheme()&quot;&gt;&lt;/button&gt; -&lt;/div&gt; -</code></pre> -<p>That's it! Don't worry too much about the <code>onclick</code> parameter right now, we'll come back to that when adding our JavaScript. The only remaining item is adding a default theme class to our <code>html</code> element, like so:</p> -<pre><code>&lt;html class=&quot;theme-default&quot;&gt; -</code></pre> -<h2>The CSS</h2> + +<p><strong>Update</strong>: This article is no longer relevant since my blog design has changed. I&#8217;m keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site.</p> + +<hr/> + +<p><em>I recently added a fairly straightforward color scheme (theme) switcher</em> to my personal website. You can toggle this simple color switcher in the footer of the site to see it in action. In case anyone else had the desire to add such functionality to their own sites&#47;projects, I figured I&#8217;d write up a quick post explaining how to do so. Let&#8217;s get into it.</p> + +<h2 id="the-html">The HTML</h2> + +<p>First we need to include the &#8220;buttons&#8221; that will trigger the theme to switch based on which one is selected. (Note: you could always render these as <code>options</code> in a <code>select</code> element if you preferred that method)</p> + +<pre><code>&#60;div class="color-select"&#62; + &#60;button onclick="toggleDefaultTheme()"&#62;&#60;&#47;button&#62; + &#60;button onclick="toggleSecondTheme()"&#62;&#60;&#47;button&#62; + &#60;button onclick="toggleThirdTheme()"&#62;&#60;&#47;button&#62; +&#60;&#47;div&#62; +</code></pre> + +<p>That&#8217;s it! Don&#8217;t worry too much about the <code>onclick</code> parameter right now, we&#8217;ll come back to that when adding our JavaScript. The only remaining item is adding a default theme class to our <code>html</code> element, like so:</p> + +<pre><code>&#60;html class="theme-default"&#62; +</code></pre> + +<h2 id="the-css">The CSS</h2> + <p>Next we need to style both the <code>color-select</code> buttons, along with the custom color schemes that will alter the entire website. We will start with the color schemes.</p> + <p>For these themes to swap seamlessly between each other, we will be setting our altering color sets as CSS variables:</p> + <pre><code>.theme-default { --accent-color: #72f1b8; --font-color: #34294f; @@ -2425,7 +3132,9 @@ body { color: var(--font-color); } </code></pre> + <p>Finally, we style the user-facing color swatches:</p> + <pre><code>.color-select button { -moz-appearance: none; appearance: none; @@ -2438,222 +3147,290 @@ body { width: 20px; } -/* Style each swatch to match the corresponding theme */ +&#47;* Style each swatch to match the corresponding theme *&#47; .color-select button:nth-child(1) { background: #72f1b8; border-color: #34294f; } .color-select button:nth-child(2) { background: #FFBF00; border-color: #59316B; } .color-select button:nth-child(3) { background: #d9455f; border-color: #303960; } </code></pre> -<h2>The JavaScript</h2> -<p>We need to have each color swatch button trigger it's corresponding theme and swap out the <code>theme-default</code> class that we have originally attached to the main <code>html</code> element. We also need to store what the user has selected into <code>localStorage</code>, so their choice persists when reloading or navigating to other pages.</p> -<pre><code>// Set a given theme/color-scheme + +<h2 id="the-javascript">The JavaScript</h2> + +<p>We need to have each color swatch button trigger it&#8217;s corresponding theme and swap out the <code>theme-default</code> class that we have originally attached to the main <code>html</code> element. We also need to store what the user has selected into <code>localStorage</code>, so their choice persists when reloading or navigating to other pages.</p> + +<pre><code>&#47;&#47; Set a given theme&#47;color-scheme function setTheme(themeName) { - localStorage.setItem('theme', themeName); + localStorage.setItem(&#39;theme&#39;, themeName); document.documentElement.className = themeName; } -// Toggle between color themes +&#47;&#47; Toggle between color themes function toggleDefaultTheme() { - if (localStorage.getItem('theme') !== 'theme-default'){ - setTheme('theme-default'); + if (localStorage.getItem(&#39;theme&#39;) !== &#39;theme-default&#39;){ + setTheme(&#39;theme-default&#39;); } } function toggleSecondTheme() { - if (localStorage.getItem('theme') !== 'theme-second'){ - setTheme('theme-second'); + if (localStorage.getItem(&#39;theme&#39;) !== &#39;theme-second&#39;){ + setTheme(&#39;theme-second&#39;); } } function toggleThirdTheme() { - if (localStorage.getItem('theme') !== 'theme-third'){ - setTheme('theme-third'); + if (localStorage.getItem(&#39;theme&#39;) !== &#39;theme-third&#39;){ + setTheme(&#39;theme-third&#39;); } } -// Immediately set the theme on initial load +&#47;&#47; Immediately set the theme on initial load (function () { - if (localStorage.getItem('theme') === 'theme-default') { - setTheme('theme-default'); + if (localStorage.getItem(&#39;theme&#39;) === &#39;theme-default&#39;) { + setTheme(&#39;theme-default&#39;); } - if (localStorage.getItem('theme') === 'theme-second') { - setTheme('theme-second'); + if (localStorage.getItem(&#39;theme&#39;) === &#39;theme-second&#39;) { + setTheme(&#39;theme-second&#39;); } - if (localStorage.getItem('theme') === 'theme-third') { - setTheme('theme-third'); + if (localStorage.getItem(&#39;theme&#39;) === &#39;theme-third&#39;) { + setTheme(&#39;theme-third&#39;); } })(); </code></pre> -<p>And that's it! Now it just depends on how custom you want each individual theme style to be. The possibilities are endless!</p> -<h2>Extra Improvements</h2> -<p>You could improve this concept even further hiding the <code>color-select</code> item if the user has JavaScript disabled. For my needs, I felt it was a fine trade-off to keep the non-functioning color swatch pickers if JavaScript was disabled. However, your project/site might need better fallbacks.</p></content> - <link href="https://bt.ht/quick-dirty-theme-switcher"/> - <id>https://bt.ht/quick-dirty-theme-switcher</id> + +<p>And that&#8217;s it! Now it just depends on how custom you want each individual theme style to be. The possibilities are endless!</p> + +<h2 id="extra-improvements">Extra Improvements</h2> + +<p>You could improve this concept even further hiding the <code>color-select</code> item if the user has JavaScript disabled. For my needs, I felt it was a fine trade-off to keep the non-functioning color swatch pickers if JavaScript was disabled. However, your project&#47;site might need better fallbacks.</p></content> + <link href="https://btxx.org/quick-dirty-theme-switcher"/> + <id>https://btxx.org/quick-dirty-theme-switcher</id> <updated>2020-06-04T10:00:00Z</updated> <published>2020-06-04T10:00:00Z</published> </entry> <entry> <title>Pure CSS Simple Dropdown Plugin</title> - <content type="html"><h1>Pure CSS Simple Dropdown Plugin</h1> + <content type="html"><h1 id="pure-css-simple-dropdown-plugin">Pure CSS Simple Dropdown Plugin</h1> + <p>2018-09-20</p> -<p>I find myself blowing away default browser <code>select</code> styling and implementing my own custom dropdowns far more often than I'd like. So, I recently created a very simple and clean component using just pure CSS.</p> + +<p>I find myself blowing away default browser <code>select</code> styling and implementing my own custom dropdowns far more often than I&#8217;d like. So, I recently created a very simple and clean component using just pure CSS.</p> + <p>Check out the CodePen below and feel free to morph it as you see fit for your own projects!</p> + <p><img src="/public/images/plug-play.png" alt="Three dropdown elements styled differently" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/rZPzWy/">Live CodePen Example</a></p></content> - <link href="https://bt.ht/pure-css-simple-dropdown-plugin"/> - <id>https://bt.ht/pure-css-simple-dropdown-plugin</id> + <link href="https://btxx.org/pure-css-simple-dropdown-plugin"/> + <id>https://btxx.org/pure-css-simple-dropdown-plugin</id> <updated>2018-09-20T10:00:00Z</updated> <published>2018-09-20T10:00:00Z</published> </entry> <entry> <title>Publishing Simple Books With Jekyll</title> - <content type="html"><h1>Publishing Simple Books With Jekyll</h1> + <content type="html"><h1 id="publishing-simple-books-with-jekyll">Publishing Simple Books With Jekyll</h1> + <p>2019-06-20</p> -<p>When thinking about writing, designing and ultimately publishing an ebook, most people don't think of using a static site generator. Having products like Amazon Publishing, LaTeX or even Microsoft Word available, why should you use Jekyll?</p> + +<p>When thinking about writing, designing and ultimately publishing an ebook, most people don&#8217;t think of using a static site generator. Having products like Amazon Publishing, LaTeX or even Microsoft Word available, why should you use Jekyll?</p> + <p>Two reasons:</p> + <ul> <li>extremely easy to use</li> <li>total customization</li> </ul> -<p>I know these same arguments could be made towards the other options mentioned above, but I'm biased towards Jekyll since I love the simplicity of HTML and CSS. Hopefully, after reading this post, you will feel the same as well!</p> -<h2>No developer skills needed</h2> -<p>You won't need any hardcore development skills or in-depth knowledge of Jekyll to get the most out of this publishing technique. The theme (<a href="https://github.com/henrythemes/jekyll-book-theme">Jekyll Book Theme</a>) will allow you to focus on your book's content rather than wrestling with typography and page layouts. A basic command line script will perform all the heavy lifting for us at the end.</p> -<h2>What are we creating?</h2> + +<p>I know these same arguments could be made towards the other options mentioned above, but I&#8217;m biased towards Jekyll since I love the simplicity of HTML and CSS. Hopefully, after reading this post, you will feel the same as well!</p> + +<h2 id="no-developer-skills-needed">No developer skills needed</h2> + +<p>You won&#8217;t need any hardcore development skills or in-depth knowledge of Jekyll to get the most out of this publishing technique. The theme (<a href="https://github.com/henrythemes/jekyll-book-theme">Jekyll Book Theme</a>) will allow you to focus on your book&#8217;s content rather than wrestling with typography and page layouts. A basic command line script will perform all the heavy lifting for us at the end.</p> + +<h2 id="what-are-we-creating">What are we creating?</h2> + <p>You can see the demo of the <em>online</em> and PDF versions of the book below: </p> + <ul> <li><a href="http://henrythemes.github.io/jekyll-book-theme/">Jekyll Book Theme (Website)</a></li> <li><a href="/public/jekyll-book-theme-sample.pdf">Jekyll Book Theme (PDF Sample)</a></li> </ul> -<p>So without wasting anymore time, let's get started!</p> -<h2>Table of Contents</h2> + +<p>So without wasting anymore time, let&#8217;s get started!</p> + +<h2 id="table-of-contents">Table of Contents</h2> + <ol> <li><a href="#setup-jekyll">Setup Jekyll</a></li> -<li><a href="#book-theme">Using the "Book" Jekyll Theme</a></li> +<li><a href="#book-theme">Using the &#8220;Book&#8221; Jekyll Theme</a></li> <li><a href="#chapter-collections">Writing Chapters</a></li> <li><a href="#html-to-pdf">HTML to PDF</a></li> <li><a href="#closing-thoughts">Closing Thoughts</a></li> </ol> -<p><h2 id="setup-jekyll">1. Setup Jekyll</h2></p> + <p>Before we can really do anything else, you will need to install and setup Jekyll. The best way to do so is by following the instructions on the official Jekyll website:</p> + <ul> <li><a href="https://jekyllrb.com/docs/installation/">Installing Jekyll</a></li> </ul> + <p>Run through the simple step-by-step installation instructions based on your operating system.</p> -<h3>Basic requirements</h3> + +<h3 id="basic-requirements">Basic requirements</h3> + <ul> <li>Ruby version 2.4.0 or above</li> <li>RubyGems</li> <li>GCC and Make (in case your system doesn’t have them installed)</li> </ul> -<p><h2 id="book-theme">2. Using the "Book" template</h2></p> -<p>The example we will be referencing in this post is the open source Jekyll theme called "Jekyll Book Theme". This theme as been designed and optimized for publishing ebooks with Jekyll.</p> + +<p>The example we will be referencing in this post is the open source Jekyll theme called &#8220;Jekyll Book Theme&#8221;. This theme as been designed and optimized for publishing ebooks with Jekyll.</p> + <p>Simply following the instructions on the main README page of the <a href="https://github.com/henrythemes/jekyll-book-theme">jekyll-book-theme repo</a>.</p> -<p><strong>Important</strong>: Take the time to edit the <code>title</code>, and <code>author</code> properties in the <code>_config.yml</code> file in the root directory. Make sure these reflect your own book's content.</p> -<p>That's it. Now let's tell Jekyll how we want it to format our chapters.</p> -<p><h2 id="chapter-collections">3. Working with chapter collections</h2></p> + +<p><strong>Important</strong>: Take the time to edit the <code>title</code>, and <code>author</code> properties in the <code>_config.yml</code> file in the root directory. Make sure these reflect your own book&#8217;s content.</p> + +<p>That&#8217;s it. Now let&#8217;s tell Jekyll how we want it to format our chapters.</p> + <p>By default, Jekyll will look for latest posts in the <code>_post</code> directory. This is useful for blogs and basic static websites - but not for us. We want chapters.</p> -<h3>Using custom collections</h3> -<p>Thankfully, Jekyll is flexible and allows us to set our own custom "collections". Collections are ways to group related content together for easier use dynamically. Our plan is to setup a collection that will house our chapter markdown files in numeric order. You can see this in the "book" template top level directory. It should look like the following:</p> + +<h3 id="using-custom-collections">Using custom collections</h3> + +<p>Thankfully, Jekyll is flexible and allows us to set our own custom &#8220;collections&#8221;. Collections are ways to group related content together for easier use dynamically. Our plan is to setup a collection that will house our chapter markdown files in numeric order. You can see this in the &#8220;book&#8221; template top level directory. It should look like the following:</p> + <ul> <li><code>_chapters</code> + <ul> <li><code>01.md</code></li> <li><code>02.md</code></li> <li><code>03.md</code></li> <li><code>etc..</code></li> +</ul></li> </ul> -</li> -</ul> -<h3>But the template already has this setup</h3> -<p>By default the Jekyll Book Theme template has this chapters collection implemented and working as intended. The reason I broke it down step-by-step is so that you can have some better understanding about what is happening "under the hood". </p> + +<h3 id="but-the-template-already-has-this-setup">But the template already has this setup</h3> + +<p>By default the Jekyll Book Theme template has this chapters collection implemented and working as intended. The reason I broke it down step-by-step is so that you can have some better understanding about what is happening &#8220;under the hood&#8221;. </p> + <p>Teach a person to fish and all that jazz.</p> + <p>Now all you need to do is break your chapters down into their own numbered markdown files inside <code>_chapters</code>.</p> -<p><h2 id="html-to-pdf">4. HTML to PDF</h2></p> + <p><img src="/public/images/publishing-with-jekyll.webp" alt="Publishing with Jekyll" /></p> -<p>Before you can convert your digital book "website", you need to install the <code>wkhtmltopdf</code> package. Download and follow the instructions below:</p> + +<p>Before you can convert your digital book &#8220;website&#8221;, you need to install the <code>wkhtmltopdf</code> package. Download and follow the instructions below:</p> + <ul> <li><a href="https://wkhtmltopdf.org/">wkhtmltopdf</a></li> </ul> -<h3>Command line conversion</h3> + +<h3 id="command-line-conversion">Command line conversion</h3> + <p>In your terminal, navigate inside the <code>_site</code> folder of your jekyll build and then run the following command:</p> -<pre><code>for f in *.html; do wkhtmltopdf -g -s Letter --no-background &quot;$f&quot; &quot;${f/_*_/_}.pdf&quot;;done + +<pre><code>for f in *.html; do wkhtmltopdf -g -s Letter --no-background "$f" "${f&#47;_*_&#47;_}.pdf";done </code></pre> -<p>Shortly after you should have a generated PDF file inside the <code>_site</code> folder - most likely named <code>index.html.pdf</code>. That's it! Enjoy your fully formatted PDF version of your book!</p> -<p><h2 id="closing-thoughts">5. Closing Thoughts</h2></p> -<p>There are a good amount of pros and cons to this approach of "publishing" PDF versions of your book. Since I'm a sucker for <em>good</em> and <em>bad</em> bullet lists, let's do just that:</p> + +<p>Shortly after you should have a generated PDF file inside the <code>_site</code> folder - most likely named <code>index.html.pdf</code>. That&#8217;s it! Enjoy your fully formatted PDF version of your book!</p> + +<p>There are a good amount of pros and cons to this approach of &#8220;publishing&#8221; PDF versions of your book. Since I&#8217;m a sucker for <em>good</em> and <em>bad</em> bullet lists, let&#8217;s do just that:</p> + <p><strong>The Good</strong></p> + <ul> <li>Online version and PDF versions share same styling (keeps things consistent)</li> <li>Chapters are written in <code>markdown</code> (increased flexibility of writing apps etc.)</li> <li>Very fast and streamlined build process</li> <li>PDF format renders out the chapter headers for built-in navigation</li> </ul> + <p><strong>The Bad</strong></p> + <ul> -<li>Chapters are spit out as one long, single page (I'm sure this could be rectified with some custom work)</li> +<li>Chapters are spit out as one long, single page (I&#8217;m sure this could be rectified with some custom work)</li> <li>More suited for short stories, papers, essay articles (not so great for epic novels)</li> -<li>I'm sure there are other cons I am missing?</li> +<li>I&#8217;m sure there are other cons I am missing?</li> </ul> -<p>In the end, using something like LaTeX would certainly grant the user more flexibility in design and layout of the final "print" PDF product - but I'm a sucker for using Jekyll when I can. </p> + +<p>In the end, using something like LaTeX would certainly grant the user more flexibility in design and layout of the final &#8220;print&#8221; PDF product - but I&#8217;m a sucker for using Jekyll when I can. </p> + <p>Please let me know if you decide to use this method and end up publishing your own book 😀 I would love to check it out!</p></content> - <link href="https://bt.ht/publish-with-jekyll"/> - <id>https://bt.ht/publish-with-jekyll</id> + <link href="https://btxx.org/publish-with-jekyll"/> + <id>https://btxx.org/publish-with-jekyll</id> <updated>2019-06-20T10:00:00Z</updated> <published>2019-06-20T10:00:00Z</published> </entry> <entry> <title>PS4 Download UI with Pure CSS</title> - <content type="html"><h1>PS4 Download UI with Pure CSS</h1> + <content type="html"><h1 id="ps4-download-ui-with-pure-css">PS4 Download UI with Pure CSS</h1> + <p>2021-06-20</p> -<p>Overall, I'm fairly impressed with the user interface design of Sony's PS4 system OS. It's minimal and keeps the content front and center. Even with it's sometimes spotty performance hiccups, I've come to enjoy interacting with it.</p> -<p>One of the key UI items I've always been a fan of is the download progress view under the <code>Notifications</code> settings. So I figured I'd try my hand at recreating this with pure CSS. Here is the final result:</p> + +<p>Overall, I&#8217;m fairly impressed with the user interface design of Sony&#8217;s PS4 system OS. It&#8217;s minimal and keeps the content front and center. Even with it&#8217;s sometimes spotty performance hiccups, I&#8217;ve come to enjoy interacting with it.</p> + +<p>One of the key UI items I&#8217;ve always been a fan of is the download progress view under the <code>Notifications</code> settings. So I figured I&#8217;d try my hand at recreating this with pure CSS. Here is the final result:</p> + <p><img src="/public/images/ps4-loading.png" alt="PS4 loading screen bar" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/qBroORG">Live CodePen Example</a></p> -<p>Although I've added some of my own improvements (typography spacing, tweaks to the progress bar animation) - the concept it still pretty close to the original.</p> -<p>But enough chit-chat, let's walkthrough how to make it!</p> -<h2>The HTML</h2> + +<p>Although I&#8217;ve added some of my own improvements (typography spacing, tweaks to the progress bar animation) - the concept it still pretty close to the original.</p> + +<p>But enough chit-chat, let&#8217;s walkthrough how to make it!</p> + +<h2 id="the-html">The HTML</h2> + <p>As with most of my demos, the HTML is very minimal and straightforward. The PS4 system OS download view needs to show the following:</p> + <ol> -<li>The game's title</li> +<li>The game&#8217;s title</li> <li>Full game size, amount downloaded and time remaining</li> <li>Visual progress bar</li> </ol> -<p>So we will place the game's title inside our <code>h2</code> with a class of <code>title</code> (shocking, I know). The details about game size, downloaded amount and time remaining gets placed under a parent <code>div</code> with an accompanying <code>details</code> class. Finally, we create our progress bar by including a parent <code>div</code> with a class of <code>progress</code> that contains a child <code>div</code> with a class of <code>inner-progress</code>.</p> + +<p>So we will place the game&#8217;s title inside our <code>h2</code> with a class of <code>title</code> (shocking, I know). The details about game size, downloaded amount and time remaining gets placed under a parent <code>div</code> with an accompanying <code>details</code> class. Finally, we create our progress bar by including a parent <code>div</code> with a class of <code>progress</code> that contains a child <code>div</code> with a class of <code>inner-progress</code>.</p> + <p>Pretty clean and easy to understand.</p> -<pre><code>&lt;div class=&quot;wrapper&quot;&gt; - &lt;img src=&quot;https://upload.wikimedia.org/wikipedia/commons/0/00/PlayStation_logo.svg&quot; alt=&quot;PS4&quot; class=&quot;logo&quot;&gt; - &lt;h2 class=&quot;title&quot;&gt;Detroit: Become Human&lt;/h2&gt; - &lt;div class=&quot;details&quot;&gt; - &lt;p&gt;Update File&lt;/p&gt; - &lt;p&gt;13.45/17.50 GB (21 Minutes Left)&lt;/p&gt; - &lt;/div&gt; - &lt;div class=&quot;progress&quot;&gt; - &lt;div class=&quot;inner-progress&quot;&gt;&lt;/div&gt; - &lt;/div&gt; -&lt;/div&gt; -</code></pre> -<h2>The CSS</h2> -<p>Now it's time to utilize all those classes in the HTML above to craft our PS4 UI recreation. I'll break this section down into digestible chunks to avoid overwhelming you by vomiting out a bunch of CSS spaghetti.</p> -<p>First we'll add a bunch of QOL improvements to help better showcase the demo (adding custom fonts, center content etc.).</p> + +<pre><code>&#60;div class="wrapper"&#62; + &#60;img src="https:&#47;&#47;upload.wikimedia.org&#47;wikipedia&#47;commons&#47;0&#47;00&#47;PlayStation_logo.svg" alt="PS4" class="logo"&#62; + &#60;h2 class="title"&#62;Detroit: Become Human&#60;&#47;h2&#62; + &#60;div class="details"&#62; + &#60;p&#62;Update File&#60;&#47;p&#62; + &#60;p&#62;13.45&#47;17.50 GB (21 Minutes Left)&#60;&#47;p&#62; + &#60;&#47;div&#62; + &#60;div class="progress"&#62; + &#60;div class="inner-progress"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<h2 id="the-css">The CSS</h2> + +<p>Now it&#8217;s time to utilize all those classes in the HTML above to craft our PS4 UI recreation. I&#8217;ll break this section down into digestible chunks to avoid overwhelming you by vomiting out a bunch of CSS spaghetti.</p> + +<p>First we&#8217;ll add a bunch of QOL improvements to help better showcase the demo (adding custom fonts, center content etc.).</p> + <p>This part is completely <em>optional</em>:</p> -<pre><code>/* Import fonts */ -@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;400&amp;display=swap'); -/* Gradient background styling, height overrides */ +<pre><code>&#47;* Import fonts *&#47; +@import url(&#39;https:&#47;&#47;fonts.googleapis.com&#47;css2?family=Source+Sans+Pro:wght@200;400&#38;display=swap&#39;); + +&#47;* Gradient background styling, height overrides *&#47; body { background: linear-gradient(#226AB6 0%, #144E8A 100%) no-repeat; color: white; display: block; - font-family: 'Source Sans Pro', sans-serif; + font-family: &#39;Source Sans Pro&#39;, sans-serif; font-weight: 200; height: 100vh; } -/* Wrapper to center content */ +&#47;* Wrapper to center content *&#47; .wrapper { margin: 0 auto; max-width: 800px; padding: 4rem 0 0; } -/* Optional PS4 logo */ +&#47;* Optional PS4 logo *&#47; .logo { display: block; filter: invert(1); @@ -2662,7 +3439,9 @@ body { width: 60px; } </code></pre> -<p>Now for the styling that <em>actually matters</em>. First we will style the game's title and accompanying details (<code>flexbox</code> to the rescue again!):</p> + +<p>Now for the styling that <em>actually matters</em>. First we will style the game&#8217;s title and accompanying details (<code>flexbox</code> to the rescue again!):</p> + <pre><code>h2.title { font-weight: 400; margin: 0; @@ -2677,7 +3456,9 @@ body { margin: 0; } </code></pre> + <p>Not a whole lot of code to get things looking proper, eh? Next we move on to the progress bar. This is <em>slightly</em> more interesting since we are going to utilize the <code>before</code> pseudo element - which sounds more complex than it actually is. Pay close attention to the pseudo element and how it calls the <code>progress-bar-shine</code> animation - more on that later.</p> + <pre><code>.progress { background: #226AB6; border: 1px solid white; @@ -2690,7 +3471,7 @@ body { animation: progress-bar-shine 2.5s infinite; background: linear-gradient(to left, white 0%, transparent 100%); border-radius: 10px; - content:''; + content:&#39;&#39;; filter: blur(8px); height: 100%; opacity: 0.8; @@ -2705,7 +3486,9 @@ body { width: 450px; } </code></pre> + <p>Almost finished! We just need to animate that <code>before</code> pseudo element with a simple <code>keyframes</code> at-rule:</p> + <pre><code>@keyframes progress-bar-shine { to { transform:translateX(450px); @@ -2713,41 +3496,64 @@ body { } } </code></pre> -<h2>Wrapping Up</h2> -<p>Although far from perfect, this experiment still explores what can be created (or in this case, <em>re</em>created) in the browser using just pure CSS. Remember, you don't have to reach for JavaScript just because you can!</p></content> - <link href="https://bt.ht/ps4-download-ui"/> - <id>https://bt.ht/ps4-download-ui</id> + +<h2 id="wrapping-up">Wrapping Up</h2> + +<p>Although far from perfect, this experiment still explores what can be created (or in this case, <em>re</em>created) in the browser using just pure CSS. Remember, you don&#8217;t have to reach for JavaScript just because you can!</p></content> + <link href="https://btxx.org/ps4-download-ui"/> + <id>https://btxx.org/ps4-download-ui</id> <updated>2021-06-20T10:00:00Z</updated> <published>2021-06-20T10:00:00Z</published> </entry> <entry> <title>Proper UI Hierarchy</title> - <content type="html"><h1>Proper UI Hierarchy</h1> + <content type="html"><h1 id="proper-ui-hierarchy">Proper UI Hierarchy</h1> + <p>2019-02-05</p> -<p>I often feel like an old man when I complain about flat design and how designers these days have lost (or willfully forgotten) the skill to create accessible UIs with proper visual hierarchy. A skill which at it's core seems so simple - yet is overlooked in almost every current <i>modern</i> interface.</p> -<p>I'm unable to pinpoint the <i>exact</i> reason why designers swapped out depth, hierarchical layouts and accessibility for muted colors, abstract imagery, illegible typography, and unimaginative flat designs.</p> -<p>But then again, maybe I'm just a design-dinosaur of a time long forgotten. Maybe I need to adapt and move with the times. Or maybe the current design trends are just lazy.</p> -<p>I'm pretty sure it's lazy design trends.</p> -<h2>Stop complaining and do something</h2> -<p>As an example, I'm going to breakdown the process of improving the overall design on a set of "flat" button elements.</p> -<p>Hopefully this demo article inspires even one designer to rethink their method when approaching UI design and push away from what is currently accepted as the "correct way to design UI".</p> + +<p>I often feel like an old man when I complain about flat design and how designers these days have lost (or willfully forgotten) the skill to create accessible UIs with proper visual hierarchy. A skill which at it&#8217;s core seems so simple - yet is overlooked in almost every current modern interface.</p> + +<p>I&#8217;m unable to pinpoint the exact reason why designers swapped out depth, hierarchical layouts and accessibility for muted colors, abstract imagery, illegible typography, and unimaginative flat designs.</p> + +<p>But then again, maybe I&#8217;m just a design-dinosaur of a time long forgotten. Maybe I need to adapt and move with the times. Or maybe the current design trends are just lazy.</p> + +<p>I&#8217;m pretty sure it&#8217;s lazy design trends.</p> + +<h2 id="stop-complaining-and-do-something">Stop complaining and do something</h2> + +<p>As an example, I&#8217;m going to breakdown the process of improving the overall design on a set of &#8220;flat&#8221; button elements.</p> + +<p>Hopefully this demo article inspires even one designer to rethink their method when approaching UI design and push away from what is currently accepted as the &#8220;correct way to design UI&#8221;.</p> + <p>And one final note before we deep dive into this demo: </p> -<p>The statement that flat design is inherently worse than it's predecessor <strong>is not subjective</strong>. By stripping away the visual cues that help users distinguish between interface elements you are purposely making a worse experience for them. Designers need to stop designing for other designers.</p> -<h2>What we will be designing</h2> + +<p>The statement that flat design is inherently worse than it&#8217;s predecessor <strong>is not subjective</strong>. By stripping away the visual cues that help users distinguish between interface elements you are purposely making a worse experience for them. Designers need to stop designing for other designers.</p> + +<h2 id="what-we-will-be-designing">What we will be designing</h2> + <p>In this demo we will be improving the default flat design inspired button layout of the following:</p> + <p><img src="/public/images/proper-ui.png" alt="Proper UI buttons, blue and green" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/yLXJmdy">Live CodePen Example</a></p> -<hr /> -<h2>Designing the skeleton</h2> -<p>This will be our basic HTML structure, along with it's default styling (based on today's UI standards):</p> -<h3>The HTML</h3> -<pre><code>&lt;div class=&quot;buttons-container&quot;&gt; - &lt;button&gt;Sign Up&lt;/button&gt; - &lt;button&gt;Log in&lt;/button&gt; -&lt;/div&gt; -</code></pre> -<h3>The CSS</h3> -<pre><code>/* Parent container for the buttons */ + +<hr/> + +<h2 id="designing-the-skeleton">Designing the skeleton</h2> + +<p>This will be our basic HTML structure, along with it&#8217;s default styling (based on today&#8217;s UI standards):</p> + +<h3 id="the-html">The HTML</h3> + +<pre><code>&#60;div class="buttons-container"&#62; + &#60;button&#62;Sign Up&#60;&#47;button&#62; + &#60;button&#62;Log in&#60;&#47;button&#62; +&#60;&#47;div&#62; +</code></pre> + +<h3 id="the-css">The CSS</h3> + +<pre><code>&#47;* Parent container for the buttons *&#47; .buttons-container { background: #E0E9EE; border-radius: 5px; @@ -2758,7 +3564,7 @@ body { width: 100%; } -/*Shared button styles */ +&#47;*Shared button styles *&#47; button { appearance: none; border: 0; @@ -2772,66 +3578,81 @@ button { width: 50%; } -/* Sign up button */ +&#47;* Sign up button *&#47; button:first-child { background: #2FBC3D; margin-right: 10px; } -/* Log in button */ +&#47;* Log in button *&#47; button:last-child { background: #459BCF; } </code></pre> -<h2>Adding simple improvements</h2> -<p>Gradients (not solely on their own mind you) within UI systems were initially used to help humans make connections with their analog counterparts. Something like toggles or switches matching those found in the real world, allowed users to mentally connect what that element's function did almost instantly. </p> -<p>Be warned not to confuse this with skeuomorphic design - an element sharing similar qualities as it's analog sibling does not instantly make it so.</p> + +<h2 id="adding-simple-improvements">Adding simple improvements</h2> + +<p>Gradients (not solely on their own mind you) within UI systems were initially used to help humans make connections with their analog counterparts. Something like toggles or switches matching those found in the real world, allowed users to mentally connect what that element&#8217;s function did almost instantly. </p> + +<p>Be warned not to confuse this with skeuomorphic design - an element sharing similar qualities as it&#8217;s analog sibling does not instantly make it so.</p> + <p>If you ever run into a designer who rolls their eyes or scoffs at you for proposing the use of something such as gradients (in a tactful way, of course) it is safe to assume they have been brainwashed by the modern design hive-mind.</p> -<p>To disregard the use of gradients simply because the belief is "gradients are bad" is idiotic. Worse still is to do so based on the belief that "gradients aren't <em>in</em> right now". As a designer, your job is to design a beautiful and <em>usable</em> product - not win high-fives among your peers. /end rant.</p> -<h3>Adding subtle gradients</h3> -<p>When gradients are implemented properly, most users won't even be aware of their presence. The difference in color (specifically on buttons in this example) helps give the illusion of a light source in the interface, which designers can use to their advantage (ie. pull more attention to elements by "lifting" them forward on the page).</p> -<h3>The subtly improved CSS</h3> -<pre><code>/* Sign up button */ + +<p>To disregard the use of gradients simply because the belief is &#8220;gradients are bad&#8221; is idiotic. Worse still is to do so based on the belief that &#8220;gradients aren&#8217;t <em>in</em> right now&#8221;. As a designer, your job is to design a beautiful and <em>usable</em> product - not win high-fives among your peers. &#47;end rant.</p> + +<h3 id="adding-subtle-gradients">Adding subtle gradients</h3> + +<p>When gradients are implemented properly, most users won&#8217;t even be aware of their presence. The difference in color (specifically on buttons in this example) helps give the illusion of a light source in the interface, which designers can use to their advantage (ie. pull more attention to elements by &#8220;lifting&#8221; them forward on the page).</p> + +<h3 id="the-subtly-improved-css">The subtly improved CSS</h3> + +<pre><code>&#47;* Sign up button *&#47; button:first-child { background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%); } -/* Log in button */ +&#47;* Log in button *&#47; button:last-child { background-image: linear-gradient(-180deg, #489FD2 0%, #0A6DAC 100%); } </code></pre> -<h2>More depth &amp; light</h2> + +<h2 id="more-depth-light">More depth &#38; light</h2> + <p>With our subtle gradients we are closer to creating a solid contrast between interactive elements, but we can improve this even further. By adding some more depth with a harder light source and more pronounced outlines, we allow the button elements to stand out on their own more strongly.</p> + <p>This is fairly easy to accomplish with CSS using the very basic <code>box-shadow</code>, <code>text-shadow</code> and <code>border</code> properties:</p> -<pre><code>/* Parent container */ + +<pre><code>&#47;* Parent container *&#47; .buttons-container { background-image: linear-gradient(0deg, #BBC6CD 3%, #E2EBF0 100%); border: 1px solid #8D8D8D; box-shadow: 0 2px 4px 0 rgba(42,42,42,0.40), inset 0 1px 3px 0 rgba(255,255,255,0.50); } -</code></pre> -<pre><code>/* Shared button styling with text-shadows */ + +&#47;* Shared button styling with text-shadows *&#47; .buttons-container button { text-shadow: 0 2px 4px rgba(0,0,0,0.30); } -</code></pre> -<pre><code>/* Sign up button */ + +&#47;* Sign up button *&#47; .buttons-container button:first-child { background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%); border: 1px solid #0C6B16; box-shadow: 0 1px 5px 0 rgba(9,116,21,0.50), inset 0 -1px 6px 0 rgba(0,0,0,0.20), inset 0 1px 0 0 rgba(255,255,255,0.50), inset 0 2px 4px 0 rgba(255,255,255,0.50); } -</code></pre> -<pre><code>/* Log in button */ + +&#47;* Log in button *&#47; .buttons-container button:last-child { background-image: linear-gradient(-180deg, #489FD2 0%, #0A6DAC 100%); border: 1px solid #0A486E; box-shadow: 0 1px 5px 0 rgba(9,85,133,0.50), inset 0 -1px 6px 0 rgba(0,0,0,0.20), inset 0 1px 0 0 rgba(255,255,255,0.50), inset 0 2px 4px 0 rgba(255,255,255,0.50); } </code></pre> -<p>For easy reference, here is the CSS styling in it's entirety:</p> -<pre><code>/* Parent container */ + +<p>For easy reference, here is the CSS styling in it&#8217;s entirety:</p> + +<pre><code>&#47;* Parent container *&#47; .buttons-container { background-image: linear-gradient(0deg, #BBC6CD 3%, #E2EBF0 100%); border-radius: 5px; @@ -2844,7 +3665,7 @@ button:last-child { width: 100%; } -/* Shared button styling */ +&#47;* Shared button styling *&#47; button { appearance: none; border: 0; @@ -2859,7 +3680,7 @@ button { width: 50%; } -/* Sign up button */ +&#47;* Sign up button *&#47; button:first-child { background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%); border: 1px solid #0C6B16; @@ -2867,649 +3688,943 @@ button:first-child { margin-right: 10px; } -/* Log in button */ +&#47;* Log in button *&#47; button:last-child { background-image: linear-gradient(-180deg, #489FD2 0%, #0A6DAC 100%); border: 1px solid #0A486E; box-shadow: 0 1px 5px 0 rgba(9,85,133,0.50), inset 0 1px 0 0 rgba(255,255,255,0.50), inset 0 2px 4px 0 rgba(255,255,255,0.50); } </code></pre> -<h2>Going even further with this UI</h2> + +<h2 id="going-even-further-with-this-ui">Going even further with this UI</h2> + <p>This demo article only showcases how to improve on a basic button UI structure with a focus on proper hierarchy between elements.</p> + <p>Once completely developed, these element should support all interactive states (<code>hover</code>, <code>active</code>, <code>disabled</code>) and animations to make for a more engaging experience.</p></content> - <link href="https://bt.ht/proper-ui-hierarchy"/> - <id>https://bt.ht/proper-ui-hierarchy</id> + <link href="https://btxx.org/proper-ui-hierarchy"/> + <id>https://btxx.org/proper-ui-hierarchy</id> <updated>2019-02-05T10:00:00Z</updated> <published>2019-02-05T10:00:00Z</published> </entry> <entry> <title>My Cheapskate Commenting System</title> - <content type="html"><h1>My Cheapskate Commenting System</h1> + <content type="html"><h1 id="my-cheapskate-commenting-system">My Cheapskate Commenting System</h1> + <p>2022-02-03</p> -<p>My blog now has comments! Well, <em>kind of</em>...</p> -<p>I went down a two day long rabbit-hole trying to find the best solution for implementing comments on my static website (generated via Jekyll FYI). There are a ton of options out there and many open source models that allow you to spin up your own instance with something like DigitalOcean or AWS. But I'm a cheap bastard. I refuse to spend $5/month on a blog mostly used for fun and one that I have zero incentive to "monetize".</p> -<p>So, what <em>free</em> options did this old miser have left to chose from? To my surprise, there were two solid options that initially caught my eye! Let's take a look then, shall we?</p> -<h2>Remarkbox</h2> -<p>Overall I don't have many bad things to say about <a href="https://www.remarkbox.com">Remarkbox</a>. It looks nice, is easy to implement and runs a "pay what you can" pricing model. What more could you ask for?! The major issue (for me, <em>personally</em>) is precisely <strong>that</strong>; the free model. This makes it difficult for me to trust 100% that this system will still be around in 3-4 years. Now I know - even paid systems can shutdown unexpectedly, but I find free tier options end up shutting their doors sooner. There is an option to self-host Remarkbox, but that requires a yearly license and also comes back to the point I made about not wanting to pay for hosting...</p> -<h2>Utterances (Github-based)</h2> -<p>The other major option was <a href="https://utteranc.es">Utterances</a>. This system was almost the winner due to it's pretty great feature set:</p> + +<p>My blog now has comments! Well, <em>kind of</em>&#8230;</p> + +<p>I went down a two day long rabbit-hole trying to find the best solution for implementing comments on my static website (generated via Jekyll FYI). There are a ton of options out there and many open source models that allow you to spin up your own instance with something like DigitalOcean or AWS. But I&#8217;m a cheap bastard. I refuse to spend $5&#47;month on a blog mostly used for fun and one that I have zero incentive to &#8220;monetize&#8221;.</p> + +<p>So, what <em>free</em> options did this old miser have left to chose from? To my surprise, there were two solid options that initially caught my eye! Let&#8217;s take a look then, shall we?</p> + +<h2 id="remarkbox">Remarkbox</h2> + +<p>Overall I don&#8217;t have many bad things to say about <a href="https://www.remarkbox.com">Remarkbox</a>. It looks nice, is easy to implement and runs a &#8220;pay what you can&#8221; pricing model. What more could you ask for?! The major issue (for me, <em>personally</em>) is precisely <strong>that</strong>; the free model. This makes it difficult for me to trust 100% that this system will still be around in 3-4 years. Now I know - even paid systems can shutdown unexpectedly, but I find free tier options end up shutting their doors sooner. There is an option to self-host Remarkbox, but that requires a yearly license and also comes back to the point I made about not wanting to pay for hosting&#8230;</p> + +<h2 id="utterances-github-based">Utterances (Github-based)</h2> + +<p>The other major option was <a href="https://utteranc.es">Utterances</a>. This system was almost the winner due to it&#8217;s pretty great feature set:</p> + <ol> <li>Open source</li> <li>No tracking, no ads</li> <li>All data stored in GitHub issues</li> <li>Free!</li> </ol> -<p>But take a look above at point number three. The fact that readers wishing to leave a comment are <strong>required to have a Github account</strong>. For me, this is a non-starter. I don't want to force my audience to sign up for or sign in to <em>any</em> account just to leave a simple comment on my humble blog. Considering a number of my readers are part of the FOSS community, this just seemed like a bad fit.</p> -<h2>Finding Inspiration</h2> -<p>I absolutely love the <a href="https://solar.lowtechmagazine.com">solar.lowtechmagazine.com</a> website (both for it's content and design) and indirectly found my comment system inspiration there. Okay let's be honest, I completely stole their commenting system "concept". Imitation is the sincerest form of flattery, right?</p> -<h2>My Comment System is...</h2> -<p>E-mail. It's just <strong>plain e-mail</strong>.</p> -<p>I've setup a basic <code>comment-prompt.html</code> in my <code>_includes</code> folder that contains a <code>mailto</code> action button[^1]:</p> -<pre><code>&lt;a href=&quot;mailto:myemail.com?subject=RE: { { page.title | uri_escape } }&quot;&gt; - &lt;button&gt;Comment via email&lt;/button&gt; -&lt;/a&gt; -</code></pre> -<p>This include template is placed at the bottom of every article automatically. Then, that action pulls in the article's title as the e-mail subject line in the user's default mailing app. That's it.</p> -<h2>Pros</h2> + +<p>But take a look above at point number three. The fact that readers wishing to leave a comment are <strong>required to have a Github account</strong>. For me, this is a non-starter. I don&#8217;t want to force my audience to sign up for or sign in to <em>any</em> account just to leave a simple comment on my humble blog. Considering a number of my readers are part of the FOSS community, this just seemed like a bad fit.</p> + +<h2 id="finding-inspiration">Finding Inspiration</h2> + +<p>I absolutely love the <a href="https://solar.lowtechmagazine.com">solar.lowtechmagazine.com</a> website (both for it&#8217;s content and design) and indirectly found my comment system inspiration there. Okay let&#8217;s be honest, I completely stole their commenting system &#8220;concept&#8221;. Imitation is the sincerest form of flattery, right?</p> + +<h2 id="my-comment-system-is">My Comment System is&#8230;</h2> + +<p>E-mail. It&#8217;s just <strong>plain e-mail</strong>.</p> + +<p>I&#8217;ve setup a basic <code>comment-prompt.html</code> in my <code>_includes</code> folder that contains a <code>mailto</code> action button[^1]:</p> + +<pre><code>&#60;a href="mailto:myemail.com?subject=RE: { { page.title | uri_escape } }"&#62; + &#60;button&#62;Comment via email&#60;&#47;button&#62; +&#60;&#47;a&#62; +</code></pre> + +<p>This include template is placed at the bottom of every article automatically. Then, that action pulls in the article&#8217;s title as the e-mail subject line in the user&#8217;s default mailing app. That&#8217;s it.</p> + +<h2 id="pros">Pros</h2> + <ul> <li>No third party application needed</li> <li>Privacy focused</li> -<li>More direct interaction with my audience/readers</li> +<li>More direct interaction with my audience&#47;readers</li> <li>Builds a much more close-knit community</li> <li>Completely free!</li> </ul> -<h2>Cons</h2> + +<h2 id="cons">Cons</h2> + <ul> <li>Must be manually curated and posted</li> <li>No notifications</li> -<li>No "built-in" reply functionality</li> -<li>Has the potential to become unwieldy...</li> -</ul> -<h2>Fun Experiment</h2> -<p>I figure either way, this will be an interesting experiment. I don't know my audience size (since I don't use any type of tracking) but I assume it's very small. Those willing to write me a personal e-mail in order to share their thoughts on my stupid little blog probably have something interesting to say. At least I hope so. </p> -<p>Let's see how this thing goes...</p></content> - <link href="https://bt.ht/poormans-comment-system"/> - <id>https://bt.ht/poormans-comment-system</id> +<li>No &#8220;built-in&#8221; reply functionality</li> +<li>Has the potential to become unwieldy&#8230;</li> +</ul> + +<h2 id="fun-experiment">Fun Experiment</h2> + +<p>I figure either way, this will be an interesting experiment. I don&#8217;t know my audience size (since I don&#8217;t use any type of tracking) but I assume it&#8217;s very small. Those willing to write me a personal e-mail in order to share their thoughts on my stupid little blog probably have something interesting to say. At least I hope so. </p> + +<p>Let&#8217;s see how this thing goes&#8230;</p></content> + <link href="https://btxx.org/poormans-comment-system"/> + <id>https://btxx.org/poormans-comment-system</id> <updated>2022-02-03T10:00:00Z</updated> <published>2022-02-03T10:00:00Z</published> </entry> <entry> <title>Poor Man's CSS Full-Bleed Layout</title> - <content type="html"><h1>Poor Man's CSS Full-Bleed Layout</h1> + <content type="html"><h1 id="poor-mans-css-full-bleed-layout">Poor Man&#8217;s CSS Full-Bleed Layout</h1> + <p>2020-10-07</p> -<p>I recently came across the very well written and interesting article, <a href="https://joshwcomeau.com/css/full-bleed/">Full-Bleed Layout Using CSS Grid</a>, while browsing my daily designer feeds. I won't go into the post's specifics here (I recommend you read the article for yourself) but it details how to render full-bleed element effects utilizing the CSS <code>grid</code> property.</p> -<p>While the approach in the article works perfectly fine, I thought to myself, "Is there not a simpler, more backwards compatible way to do this?". Indeed there is.</p> -<p><strong>Don't care about the tutorial?</strong> <a href="#live-demo">Skip down to the live demo</a></p> -<h2>Make the Web Backwards Compatible</h2> -<p>I try my best when creating specific element designs or layouts to have everything render consistently across almost <em>all</em> browsers. This tends to include the obvious front-runners: Chrome, Firefox, Safari - but I also try my best not to ignore the oldies: IE11, Edge and older versions of Opera. I believe if most web designers even loosely followed this concept we wouldn't be stringing together barely implemented CSS properties and hacking together polyfills for all the unsupported browsers. Just my two cents.</p> -<p>What does this have to do with full-bleed exactly? Well, the CSS we will be using in this demo is fully compatible with pretty much <em>any browser</em> that can run the basic version of CSS rendering. If the browser you're targeting supports <code>max-width</code> and <code>margins</code> - then have no fear, full-bleeds are here.</p> -<h2>Our HTML Example</h2> -<p>Let's create a single-column blog layout for this example. We will include a heading, some paragraphs, an image, and a blockquote to keep it simple:</p> -<pre><code>&lt;main&gt; - &lt;article&gt; - &lt;h1&gt;Main Heading&lt;/h1&gt; - &lt;p&gt;Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.&lt;/p&gt; - &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!&lt;/p&gt; - &lt;img src='https://images.unsplash.com/photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=&quot;Some Image&quot;&gt; - &lt;p&gt;Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.&lt;/p&gt; - &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?&lt;/p&gt; - &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.&lt;/p&gt; - &lt;blockquote&gt; - &lt;p&gt;To be, or not to be, that is the question:&lt;br&gt;Whether 'tis nobler in the mind to suffer&lt;br&gt;The slings and arrows of outrageous fortune,&lt;br&gt;Or to take Arms against a Sea of troubles,&lt;br&gt;And by opposing end them: to die, to sleep;&lt;/p&gt; - &lt;cite&gt;- Some guy&lt;/cite&gt; - &lt;/blockquote&gt; - &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?&lt;/p&gt; - &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.&lt;/p&gt; - &lt;/article&gt; -&lt;/main&gt; -</code></pre> -<p>This works well as it is, but we will need to "section" off our different areas of content based on whether we want them <code>full-bleed</code> or not. We do this with - you guessed it - the <code>section</code> element. In this demo we want the image and blockquote to become <code>full-bleed</code> when rendered, so we'll add the <code>full-bleed</code> class to those sections for now (more on that later):</p> -<pre><code>&lt;main&gt; - &lt;article&gt; - &lt;section&gt; - &lt;h1&gt;Main Heading&lt;/h1&gt; - &lt;p&gt;Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.&lt;/p&gt; - &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!&lt;/p&gt; - &lt;/section&gt; - &lt;section class=&quot;full-bleed&quot;&gt; - &lt;img src='https://images.unsplash.com/photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=&quot;Some Image&quot;&gt; - &lt;/section&gt; - &lt;section&gt; - &lt;p&gt;Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.&lt;/p&gt; - &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?&lt;/p&gt; - &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.&lt;/p&gt; - &lt;/section&gt; - &lt;section class=&quot;full-bleed&quot;&gt; - &lt;blockquote&gt; - &lt;p&gt;To be, or not to be, that is the question:&lt;br&gt;Whether 'tis nobler in the mind to suffer&lt;br&gt;The slings and arrows of outrageous fortune,&lt;br&gt;Or to take Arms against a Sea of troubles,&lt;br&gt;And by opposing end them: to die, to sleep;&lt;/p&gt; - &lt;cite&gt;- Some guy&lt;/cite&gt; - &lt;/blockquote&gt; - &lt;/section&gt; - &lt;section&gt; - &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?&lt;/p&gt; - &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.&lt;/p&gt; - &lt;/section&gt; - &lt;/article&gt; -&lt;/main&gt; -</code></pre> -<p>That's it for the HTML!</p> -<h2>The Magic CSS (Not Really)</h2> + +<p>I recently came across the very well written and interesting article, <a href="https://joshwcomeau.com/css/full-bleed/">Full-Bleed Layout Using CSS Grid</a>, while browsing my daily designer feeds. I won&#8217;t go into the post&#8217;s specifics here (I recommend you read the article for yourself) but it details how to render full-bleed element effects utilizing the CSS <code>grid</code> property.</p> + +<p>While the approach in the article works perfectly fine, I thought to myself, &#8220;Is there not a simpler, more backwards compatible way to do this?&#8221;. Indeed there is.</p> + +<p><strong>Don&#8217;t care about the tutorial?</strong> <a href="#live-demo">Skip down to the live demo</a></p> + +<h2 id="make-the-web-backwards-compatible">Make the Web Backwards Compatible</h2> + +<p>I try my best when creating specific element designs or layouts to have everything render consistently across almost <em>all</em> browsers. This tends to include the obvious front-runners: Chrome, Firefox, Safari - but I also try my best not to ignore the oldies: IE11, Edge and older versions of Opera. I believe if most web designers even loosely followed this concept we wouldn&#8217;t be stringing together barely implemented CSS properties and hacking together polyfills for all the unsupported browsers. Just my two cents.</p> + +<p>What does this have to do with full-bleed exactly? Well, the CSS we will be using in this demo is fully compatible with pretty much <em>any browser</em> that can run the basic version of CSS rendering. If the browser you&#8217;re targeting supports <code>max-width</code> and <code>margins</code> - then have no fear, full-bleeds are here.</p> + +<h2 id="our-html-example">Our HTML Example</h2> + +<p>Let&#8217;s create a single-column blog layout for this example. We will include a heading, some paragraphs, an image, and a blockquote to keep it simple:</p> + +<pre><code>&#60;main&#62; + &#60;article&#62; + &#60;h1&#62;Main Heading&#60;&#47;h1&#62; + &#60;p&#62;Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!&#60;&#47;p&#62; + &#60;img src=&#39;https:&#47;&#47;images.unsplash.com&#47;photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&#38;q=85&#38;fm=jpg&#38;crop=entropy&#38;cs=srgb&#38;ixid=eyJhcHBfaWQiOjE0NTg5fQ&#39; alt="Some Image"&#62; + &#60;p&#62;Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.&#60;&#47;p&#62; + &#60;blockquote&#62; + &#60;p&#62;To be, or not to be, that is the question:&#60;br&#62;Whether &#39;tis nobler in the mind to suffer&#60;br&#62;The slings and arrows of outrageous fortune,&#60;br&#62;Or to take Arms against a Sea of troubles,&#60;br&#62;And by opposing end them: to die, to sleep;&#60;&#47;p&#62; + &#60;cite&#62;- Some guy&#60;&#47;cite&#62; + &#60;&#47;blockquote&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.&#60;&#47;p&#62; + &#60;&#47;article&#62; +&#60;&#47;main&#62; +</code></pre> + +<p>This works well as it is, but we will need to &#8220;section&#8221; off our different areas of content based on whether we want them <code>full-bleed</code> or not. We do this with - you guessed it - the <code>section</code> element. In this demo we want the image and blockquote to become <code>full-bleed</code> when rendered, so we&#8217;ll add the <code>full-bleed</code> class to those sections for now (more on that later):</p> + +<pre><code>&#60;main&#62; + &#60;article&#62; + &#60;section&#62; + &#60;h1&#62;Main Heading&#60;&#47;h1&#62; + &#60;p&#62;Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!&#60;&#47;p&#62; + &#60;&#47;section&#62; + &#60;section class="full-bleed"&#62; + &#60;img src=&#39;https:&#47;&#47;images.unsplash.com&#47;photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&#38;q=85&#38;fm=jpg&#38;crop=entropy&#38;cs=srgb&#38;ixid=eyJhcHBfaWQiOjE0NTg5fQ&#39; alt="Some Image"&#62; + &#60;&#47;section&#62; + &#60;section&#62; + &#60;p&#62;Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.&#60;&#47;p&#62; + &#60;&#47;section&#62; + &#60;section class="full-bleed"&#62; + &#60;blockquote&#62; + &#60;p&#62;To be, or not to be, that is the question:&#60;br&#62;Whether &#39;tis nobler in the mind to suffer&#60;br&#62;The slings and arrows of outrageous fortune,&#60;br&#62;Or to take Arms against a Sea of troubles,&#60;br&#62;And by opposing end them: to die, to sleep;&#60;&#47;p&#62; + &#60;cite&#62;- Some guy&#60;&#47;cite&#62; + &#60;&#47;blockquote&#62; + &#60;&#47;section&#62; + &#60;section&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.&#60;&#47;p&#62; + &#60;&#47;section&#62; + &#60;&#47;article&#62; +&#60;&#47;main&#62; +</code></pre> + +<p>That&#8217;s it for the HTML!</p> + +<h2 id="the-magic-css-not-really">The Magic CSS (Not Really)</h2> + <p>Now take a deep breath and get ready for some hard CSS work:</p> + <pre><code>article { width: 100%; } article section { margin: 0 auto; - max-width: 480px; /* This can be whatever you want */ + max-width: 480px; &#47;* This can be whatever you want *&#47; width: 100%; } article section.full-bleed { max-width: 100%; } </code></pre> -<p>That's it. <em>Really</em>. Now any element (blockquotes, specific headers, navigations, footers, etc) that you want to layout as "full-bleed", just wrap it in a <code>section</code> tag and sick the <code>full-bleed</code> class on it. Done and done.</p> -<p>Obviously you'll want to add more styling to clean-up and make your full-bleed layouts more beautiful. This demo was just more of a starting point.</p> -<h3>Maybe Not-Quite-Full-Bleed?</h3> + +<p>That&#8217;s it. <em>Really</em>. Now any element (blockquotes, specific headers, navigations, footers, etc) that you want to layout as &#8220;full-bleed&#8221;, just wrap it in a <code>section</code> tag and sick the <code>full-bleed</code> class on it. Done and done.</p> + +<p>Obviously you&#8217;ll want to add more styling to clean-up and make your full-bleed layouts more beautiful. This demo was just more of a starting point.</p> + +<h3 id="maybe-not-quite-full-bleed">Maybe Not-Quite-Full-Bleed?</h3> + <p>You could also further customize your options by including a class like <code>half-bleed</code>, which maybe only expands slightly outside the main section <code>max-width</code>:</p> + <pre><code>article section.half-bleed { max-width: 960px; } </code></pre> -<h3>Sidenote</h3> + +<h3 id="sidenote">Sidenote</h3> + <p>For those concerned about accessibility: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section">section element</a> is a flow content element, so it can contain almost all HTML elements.</p> -<p><h2 id="live-demo">Live Demo</h2></p> + <p><a href="https://codepen.io/bradleytaunt/pen/mdEdjzz">Live CodePen Example</a></p></content> - <link href="https://bt.ht/poor-mans-full-bleed"/> - <id>https://bt.ht/poor-mans-full-bleed</id> + <link href="https://btxx.org/poor-mans-full-bleed"/> + <id>https://btxx.org/poor-mans-full-bleed</id> <updated>2020-10-07T10:00:00Z</updated> <published>2020-10-07T10:00:00Z</published> </entry> <entry> <title>Plain Text Emails, Please</title> - <content type="html"><h1>Plain Text Emails, Please</h1> + <content type="html"><h1 id="plain-text-emails-please">Plain Text Emails, Please</h1> + <p>2019-09-09</p> -<p>When it comes to website / product design and development most devs should try to keep things simple. By only using as much code as absolutely necessary, projects avoid growing out of scope or becoming bloated. So, why isn't this same approach taken for email?</p> -<h2>A brief history of email</h2> + +<p>When it comes to website &#47; product design and development most devs should try to keep things simple. By only using as much code as absolutely necessary, projects avoid growing out of scope or becoming bloated. So, why isn&#8217;t this same approach taken for email?</p> + +<h2 id="a-brief-history-of-email">A brief history of email</h2> + <p>Email has been possible since the 1960s with <a href="https://en.wikipedia.org/wiki/Time-sharing">time-sharing computers</a> being used to share files and messages across early devices. Around the 80s and 90s it seemed as though <a href="https://en.wikipedia.org/wiki/Government_Open_Systems_Interconnection_Profile">GOSIP</a> would dominate the market, but this was knocked out in favor of SMTP, POP3 and IMAP in 1995 when the <a href="http://www.walthowe.com/navnet/history.html">National Science Foundation ended its sponsorship of the Internet backbone</a>, and all traffic relied on commercial networks.</p> -<p><figure> - <img src="https://upload.wikimedia.org/wikipedia/commons/6/68/Timesharing_and_Development_KA-10s_at_BBN%2C_circa_1970.jpg" alt="First computers to send and receive email" /> - <figcaption>The first computers to send and receive email. Source: <a href="https://en.wikipedia.org/wiki/File:Timesharing_and_Development_KA-10s_at_BBN,_circa_1970.webp">Wikipedia</a></figcaption> -</figure></p> + <p>Things were looking pretty good at this point. Most operating systems now had a shared foundation of sending and receiving emails on the internet, allowing for a set of standards to be slowly developed and agreed upon over time. These were simpler times, with the default content sent between machines being plain text. No embedded images, no CSS3 fallback support, no <em>fluff</em> - just content.</p> -<p><strong>Sidenote:</strong><br> -Now, I'm not going to sit here and pretend to be some expert on the history of email (or the internet in general), so I suggest you take the time to read about <a href="http://www.walthowe.com/navnet/history.html">the history of the internet</a> if you're into that kind of thing.</p> -<h2>Looking at some data</h2> -<blockquote><p>Data isn't everything</p> + +<p><strong>Sidenote:</strong> +Now, I&#8217;m not going to sit here and pretend to be some expert on the history of email (or the internet in general), so I suggest you take the time to read about <a href="http://www.walthowe.com/navnet/history.html">the history of the internet</a> if you&#8217;re into that kind of thing.</p> + +<h2 id="looking-at-some-data">Looking at some data</h2> + +<blockquote> +<p>Data isn&#8217;t everything</p> </blockquote> + <p>I understand that the data being used is currently 16 years old - but not many extensive research studies have been performed (specifically for email-type preference in general)</p> -<p>In 2002<sup>[<a href="#1">1</a>]</sup>, <a href="https://www.clickz.com/real-world-email-client-usage-the-hard-data/47429/">a small-set survey was run by ClickZ</a> was created to gauge the details of personal email data. The main data we will focus on is the user preference between HTML or plain text formats:</p> + +<p>In 2002[1], <a href="https://www.clickz.com/real-world-email-client-usage-the-hard-data/47429/">a small-set survey was run by ClickZ</a> was created to gauge the details of personal email data. The main data we will focus on is the user preference between HTML or plain text formats:</p> + <p><strong>Do you prefer receiving HTML or text email?</strong></p> + <table> -<tr><th>Response </th><th>Percentage (%) </th></tr> -<tr><td>HTML </td><td>41.95 </td></tr> -<tr><td>Plain Text </td><td>31.52 </td></tr> -<tr><td>No Preference </td><td>26.53 </td></tr> +<thead> +<tr> +<th>Response</th> +<th>Percentage (%)</th> +</tr> +</thead> + +<tbody> +<tr> +<td>HTML</td> +<td>41.95</td> +</tr> +<tr> +<td>Plain Text</td> +<td>31.52</td> +</tr> +<tr> +<td>No Preference</td> +<td>26.53</td> +</tr> +</tbody> </table> -On initial review, one could make the argument that the general public <em>prefers</em> HTML email over plain text (~42% vs ~32%) - but I would disagree with this analysis. The roughly 27% of respondents who answered with <em>No Preference</em> should not be dismissed so easily.<p>Since the <em>No Preference</em> respondents don't care whether emails they receive are designed in HTML format, why not send them plain text variations by default? The positives of plain text greatly outweigh those of HTML:</p> + +<p>On initial review, one could make the argument that the general public <em>prefers</em> HTML email over plain text (~42% vs ~32%) - but I would disagree with this analysis. The roughly 27% of respondents who answered with <em>No Preference</em> should not be dismissed so easily.</p> + +<p>Since the <em>No Preference</em> respondents don&#8217;t care whether emails they receive are designed in HTML format, why not send them plain text variations by default? The positives of plain text greatly outweigh those of HTML:</p> + <ul> <li>Plain text has reduced file size + <ul> -<li>Don't forget that many users have limited data usage across much of the world</li> -</ul> -</li> +<li>Don&#8217;t forget that many users have limited data usage across much of the world</li> +</ul></li> <li>HTML is more likely to be flagged as spam by email clients + <ul> -<li>This is due to extra code, tracking scripts, 3rd party assets / resources being called</li> -</ul> -</li> -<li>HTML / CSS can be inconsistent or even limited in support across email clients</li> +<li>This is due to extra code, tracking scripts, 3rd party assets &#47; resources being called</li> +</ul></li> +<li>HTML &#47; CSS can be inconsistent or even limited in support across email clients</li> <li>Text only requires less design work for your development team + <ul> -<li>Don't forget about testing all the various email clients too</li> -</ul> -</li> +<li>Don&#8217;t forget about testing all the various email clients too</li> +</ul></li> </ul> -<p>Add to this that <a href="https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33">53% of emails are opened on mobile</a> - so any "fancy" marketing email designs need to look great on mobile screens and also take into account slower connections. What looks better and loads faster than simple plain text? 😛</p> -<h2>But what about marketing!?</h2> -<p>Sorry to say, but marketing should never trump user experience. Teams love to track email opens / click ratios, who subscribed / unsubscribed or who shared the campaign with others - but <strong>it's all bloat on the user's end</strong>.</p> -<p>Greg Kogan wrote up a great article / case study about his experience <a href="https://www.gkogan.co/blog/dont-design-emails/">switching over a client's campaign from HTML templates to plain text</a> with some really interesting results. I highly recommend you give it a read for a better understanding about how the marketing goals and customer goals don't always align.</p> -<h2>Simple or lazy - it doesn't matter</h2> -<p>Plain text can certainly have a reputation for looking lazy or cheap, but I feel this is mostly perpetuated in the design and marketing communities. I can assure you that your average day-to-day users are much less opinionated about your email campaign design than you are. Look to satisfy your customers' needs before your own.</p> -<blockquote><p>Life is really simple, but we insist on making it complicated.</p> -<p><cite>- Confucius</cite></p> + +<p>Add to this that <a href="https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33">53% of emails are opened on mobile</a> - so any &#8220;fancy&#8221; marketing email designs need to look great on mobile screens and also take into account slower connections. What looks better and loads faster than simple plain text? 😛</p> + +<h2 id="but-what-about-marketing">But what about marketing!?</h2> + +<p>Sorry to say, but marketing should never trump user experience. Teams love to track email opens &#47; click ratios, who subscribed &#47; unsubscribed or who shared the campaign with others - but <strong>it&#8217;s all bloat on the user&#8217;s end</strong>.</p> + +<p>Greg Kogan wrote up a great article &#47; case study about his experience <a href="https://www.gkogan.co/blog/dont-design-emails/">switching over a client&#8217;s campaign from HTML templates to plain text</a> with some really interesting results. I highly recommend you give it a read for a better understanding about how the marketing goals and customer goals don&#8217;t always align.</p> + +<h2 id="simple-or-lazy---it-doesnt-matter">Simple or lazy - it doesn&#8217;t matter</h2> + +<p>Plain text can certainly have a reputation for looking lazy or cheap, but I feel this is mostly perpetuated in the design and marketing communities. I can assure you that your average day-to-day users are much less opinionated about your email campaign design than you are. Look to satisfy your customers&#8217; needs before your own.</p> + +<blockquote> +<p>Life is really simple, but we insist on making it complicated.</p> + +<p>- Confucius</p> </blockquote> -<p>That being said, at the end of the day, companies will justify their own reasons to use HTML email templates over plain text. You can't convince everyone. My own personal experience with email template design, along with analyzing some of the data, leaves me to believe that most businesses should default to plain text. At the very least, you should try to convince your team to perform some simple A/B testing with your next email campaign.</p> + +<p>That being said, at the end of the day, companies will justify their own reasons to use HTML email templates over plain text. You can&#8217;t convince everyone. My own personal experience with email template design, along with analyzing some of the data, leaves me to believe that most businesses should default to plain text. At the very least, you should try to convince your team to perform some simple A&#47;B testing with your next email campaign.</p> + <p>The results might just surprise you.</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>This is the "latest" detailed survey I could find on email design preference</li> +<li>This is the &#8220;latest&#8221; detailed survey I could find on email design preference</li> </ol></content> - <link href="https://bt.ht/plain-text-emails"/> - <id>https://bt.ht/plain-text-emails</id> + <link href="https://btxx.org/plain-text-emails"/> + <id>https://btxx.org/plain-text-emails</id> <updated>2019-09-09T10:00:00Z</updated> <published>2019-09-09T10:00:00Z</published> </entry> <entry> <title>Setting Up 1.1.1.1 for Families on a Pi-Hole</title> - <content type="html"><h1>Setting Up 1.1.1.1 for Families on a Pi-Hole</h1> + <content type="html"><h1 id="setting-up-1.1.1.1-for-families-on-a-pi-hole">Setting Up 1.1.1.1 for Families on a Pi-Hole</h1> + <p>2021-10-28</p> -<p>After seeing Cloudflare's 1.1.1.1 for Families mentioned on the <a href="https://news.ycombinator.com/item?id=29024195">front page of HackerNews</a>, I thought it might be helpful to show those currently using a <a href="https://pi-hole.net">pi-hole device</a> how to include 1.1.1.1 alongside it.</p> -<h2>Keeping Things Updated</h2> + +<p>After seeing Cloudflare&#8217;s 1.1.1.1 for Families mentioned on the <a href="https://news.ycombinator.com/item?id=29024195">front page of HackerNews</a>, I thought it might be helpful to show those currently using a <a href="https://pi-hole.net">pi-hole device</a> how to include 1.1.1.1 alongside it.</p> + +<h2 id="keeping-things-updated">Keeping Things Updated</h2> + <p>It should go without saying that you should be running the latest stable pi-hole version for security and full feature support. To do so, simply <code>ssh</code> into your device (or connect to it directly if you prefer) and run the following to check your pi-hole version:</p> + <pre><code>pihole -v </code></pre> + <p>And if your version is out of date, run:</p> + <pre><code>pihole -up </code></pre> + <p>Once it completes the update everything will be good to go!</p> -<h2>Adding 1.1.1.1 (1.1.1.2)</h2> + +<h2 id="adding-1.1.1.1-1.1.1.2">Adding 1.1.1.1 (1.1.1.2)</h2> + <p>Now you need to navigate to your main pi-hole admin in your browser (most likely the url will be <em>pi.hole</em>). Login in using your credentials and the do the following steps:</p> + <ol> -<li>Navigate to <strong>Settings</strong></li> -<li>Navigate to <strong>DNS</strong></li> -<li>Under "Upstream DNS Servers" enter:</li> +<li><p>Navigate to <strong>Settings</strong></p></li> +<li><p>Navigate to <strong>DNS</strong></p></li> +<li><p>Under &#8220;Upstream DNS Servers&#8221; enter:</p></li> </ol> + <ul> <li>Custom 1 (IPv4): 1.1.1.2</li> <li>Custom 2 (IPv4): 1.0.0.2</li> </ul> -<p><figure> - <img src="/public/images/pihole-cloudflare.png" alt="PiHole setup admin dashboard"> - <figcaption>PiHole DNS settings (<a href="/public/images/pihole-cloudflare.webp">link to hi-res image</a>)</figcaption> -</figure></p> -<h2>Ad-Block &amp; Malware Protection</h2> + +<h2 id="ad-block-malware-protection">Ad-Block &#38; Malware Protection</h2> + <p>You now officially have protection against both intrusive advertisements <em>and</em> sites flagged with malware. Happy (and now safer) browsing!</p></content> - <link href="https://bt.ht/pihole-cloudflare"/> - <id>https://bt.ht/pihole-cloudflare</id> + <link href="https://btxx.org/pihole-cloudflare"/> + <id>https://btxx.org/pihole-cloudflare</id> <updated>2021-10-28T10:00:00Z</updated> <published>2021-10-28T10:00:00Z</published> </entry> <entry> <title>Stuffing an SSD Inside the Raspberry Pi 400</title> - <content type="html"><h1>Stuffing an SSD Inside the Raspberry Pi 400</h1> + <content type="html"><h1 id="stuffing-an-ssd-inside-the-raspberry-pi-400">Stuffing an SSD Inside the Raspberry Pi 400</h1> + <p>2021-08-13</p> -<p>I have successfully jammed an mSATA SSD into the main shell of my Raspberry Pi 400. It wasn't as straightforward as I thought it would be - in fact, most <em>real</em> hardware tinkerers will probably vomit in their mouths once they see how I achieved this...</p> -<p>But I'm happy with my build. Those with better skills and knowledge can most likely improve upon this concept (and please do if you can - I'd love to see it!)</p> + +<p>I have successfully jammed an mSATA SSD into the main shell of my Raspberry Pi 400. It wasn&#8217;t as straightforward as I thought it would be - in fact, most <em>real</em> hardware tinkerers will probably vomit in their mouths once they see how I achieved this&#8230;</p> + +<p>But I&#8217;m happy with my build. Those with better skills and knowledge can most likely improve upon this concept (and please do if you can - I&#8217;d love to see it!)</p> + <p>Enough chit-chat - on to the build!</p> -<h2>The Finished "Masterpiece"</h2> + +<h2 id="the-finished-masterpiece">The Finished &#8220;Masterpiece&#8221;</h2> + <p>Below you can see the final look of my modded Raspberry Pi 400, which I have personally named the <strong>Raspberry Pi 400X</strong>:</p> -<p><figure> - <img src="/public/images/pi-400-final.png" alt="Pi 400 with internal SSD"> - <figcaption>The finished Raspberry Pi 400X (<a href="/public/images/pi-400-final.webp">link to hi-res image</a>)</figcaption> -</figure></p> + <p>Do you see that ugly black USB-C to USB-A cable jutting out from the top? That little guy connects directly to the mSATA SSD <em>inside</em> the plastic keyboard structure and allows us to boot via USB. It also gives us the flexibility to easily <em>unplug</em> the internal SSD for times when we desire to boot from micro SD or a different USB device altogether.</p> + <p>So, how did I make this?</p> -<h2>The Shopping List</h2> -<p>Before we deep dive into the terrible hardware modifications I've made to my Pi, I'll list out all the items/tools I used during the making of this monstrosity:</p> + +<h2 id="the-shopping-list">The Shopping List</h2> + +<p>Before we deep dive into the terrible hardware modifications I&#8217;ve made to my Pi, I&#8217;ll list out all the items&#47;tools I used during the making of this monstrosity:</p> + <ul> -<li>mSATA 64GB SSD Half Size (KingSpec) &amp;rarr; <a href="https://www.aliexpress.com/item/32385499968.html?spm=a2g0s.9042311.0.0.210e4c4dIH8xWv">AliExpress</a></li> -<li>mSATA to USB 3.1 enclosure (gutted) &amp;rarr; <a href="https://www.amazon.ca/gp/product/B07BBM3BVS/ref=ppx_yo_dt_b_asin_title_o09_s00?ie=UTF8&amp;psc=1">Amazon</a></li> +<li>mSATA 64GB SSD Half Size (KingSpec) &#8594; <a href="https://www.aliexpress.com/item/32385499968.html?spm=a2g0s.9042311.0.0.210e4c4dIH8xWv">AliExpress</a></li> +<li>mSATA to USB 3.1 enclosure (gutted) &#8594; <a href="https://www.amazon.ca/gp/product/B07BBM3BVS/ref=ppx_yo_dt_b_asin_title_o09_s00?ie=UTF8&amp;psc=1">Amazon</a></li> <li>Dremel rotary tool with soft sanding bits</li> -<li>Metal cutting scissors / knife</li> +<li>Metal cutting scissors &#47; knife</li> <li>Electrical tape</li> <li>Patience</li> </ul> -<h2>Modding the Raspberry Pi 400</h2> -<p>The final product requires us to attach the half size mSATA SSD to the (gutted) enclosure and then insert that directly inside the Pi (next to the lock port / ethernet). Our first step will be to disassemble the Pi 400, safely remove the keyboard module and remove the metal heatsink.</p> + +<h2 id="modding-the-raspberry-pi-400">Modding the Raspberry Pi 400</h2> + +<p>The final product requires us to attach the half size mSATA SSD to the (gutted) enclosure and then insert that directly inside the Pi (next to the lock port &#47; ethernet). Our first step will be to disassemble the Pi 400, safely remove the keyboard module and remove the metal heatsink.</p> + <p>With your trusty metal cutting scissors (or whatever tool you prefer) you will need to cut out room for our enclosure internals to fit within:</p> -<p><figure> - <img src="/public/images/pi-heatsink.png" alt="The cutout heatsink"> - <figcaption>I drew the outline of the enclosure on the metal first before cutting. (<a href="/public/images/pi-heatsink.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>Next you will need to carefully remove the Pi board itself from the red part of the case. Once placed safely aside, it's time to bust out our sanding dremel and remove the jutting plastic blocking our soon-to-be-added SSD. Remember to wear a mask during this phase, since breathing in plastic dust and fumes is not fun!</p> -<p><strong>Important to note:</strong> this will remove one of the screw slots needed to secure the heatsink into the board. Not a big deal if you ask me...</p> -<p><figure> - <img src="/public/images/pi-plastic-back.png" alt="Plastic dremled back"> - <figcaption>Here you can see my terrible sanding job on the far left plastic snap-lock (<a href="/public/images/pi-plastic-back.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>While you have the Pi board removed you should also cut out a slot for the USB-C to USB-A cable to connect our mSATA to one of our USB 3 ports on the Pi. For this I've opted to butcher the lock port (will I ever really use that anyway?)</p> -<p><figure> - <img src="/public/images/pi-outer-port.png" alt="Back of the Pi opening"> - <figcaption>Don't judge...I'm sure most people could do a cleaner job! (<a href="/public/images/pi-outer-port.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>Now all that's left is to insert our gutted mSATA enclosure (with the half size SSD attached of course) + +<p>Next you will need to carefully remove the Pi board itself from the red part of the case. Once placed safely aside, it&#8217;s time to bust out our sanding dremel and remove the jutting plastic blocking our soon-to-be-added SSD. Remember to wear a mask during this phase, since breathing in plastic dust and fumes is not fun!</p> + +<p><strong>Important to note:</strong> this will remove one of the screw slots needed to secure the heatsink into the board. Not a big deal if you ask me&#8230;</p> + +<p>While you have the Pi board removed you should also cut out a slot for the USB-C to USB-A cable to connect our mSATA to one of our USB 3 ports on the Pi. For this I&#8217;ve opted to butcher the lock port (will I ever really use that anyway?)</p> + +<p>Now all that&#8217;s left is to insert our gutted mSATA enclosure (with the half size SSD attached of course) , tape it down with some hideous electrical tape and close this bad boy back up!</p> -<p><figure> - <img src="/public/images/pi-internal-ssd.png" alt="The internal SSD"> - <figcaption>Take note of the tiny triangle piece of foam on the Type-C connector. This helps avoid direct contact with the back of the keyboard module! (<a href="/public/images/pi-internal-ssd.webp">link to hi-res image</a>)</figcaption> -</figure></p> -<p>That's it! You now have the portable power of the Raspberry Pi 400, but now with the speed and performance of an SSD!</p> -<h2>The Performance Gains</h2> + +<p>That&#8217;s it! You now have the portable power of the Raspberry Pi 400, but now with the speed and performance of an SSD!</p> + +<h2 id="the-performance-gains">The Performance Gains</h2> + <table> -<tr><th>Storage Type</th><th>Seq. Write</th><th>Random W</th><th>Random R</th></tr> -<tr><td>Micro SD Card</td><td>17818 KB/sec</td><td>812 IOPS</td><td>2335 IOPS</td></tr> -<tr><td>mSATA SSD</td><td>206738 KB/sec</td><td>14615 IOPS</td><td>17925 IOPS</td></tr> +<thead> +<tr> +<th>Storage Type</th> +<th>Seq. Write</th> +<th>Random W</th> +<th>Random R</th> +</tr> +</thead> + +<tbody> +<tr> +<td>Micro SD Card</td> +<td>17818 KB&#47;sec</td> +<td>812 IOPS</td> +<td>2335 IOPS</td> +</tr> +<tr> +<td>mSATA SSD</td> +<td>206738 KB&#47;sec</td> +<td>14615 IOPS</td> +<td>17925 IOPS</td> +</tr> +</tbody> </table> -I think it's pretty clear that the SSD blows the default micro SD card out of the water...<h2>Closing Thoughts</h2> + +<p>I think it&#8217;s pretty clear that the SSD blows the default micro SD card out of the water&#8230;</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + <p>Now clearly you could just plug-in an external SSD and walk away with the same performance boosts - but where is the fun in that?</p> -<p>If anyone decides to improve on this or make a cleaner approach, please do share it with me. I'd love to see it!</p></content> - <link href="https://bt.ht/pi-400-internal-ssd"/> - <id>https://bt.ht/pi-400-internal-ssd</id> + +<p>If anyone decides to improve on this or make a cleaner approach, please do share it with me. I&#8217;d love to see it!</p></content> + <link href="https://btxx.org/pi-400-internal-ssd"/> + <id>https://btxx.org/pi-400-internal-ssd</id> <updated>2021-08-13T10:00:00Z</updated> <published>2021-08-13T10:00:00Z</published> </entry> <entry> <title>89 Blog Posts in a Single HTML File</title> - <content type="html"><h1>89 Blog Posts in a Single HTML File</h1> + <content type="html"><h1 id="89-blog-posts-in-a-single-html-file">89 Blog Posts in a Single HTML File</h1> + <p>2021-04-22</p> -<p><em>This is no longer the current setup of my blog</em>. I have switched back to Jekyll for performance reasons. I'll be leaving this post up as a point of reference though :)</p> -<hr /> -<p>This is my personal blog (if that wasn't already obvious). I currently have 89 blog posts living here. But I have done something magical today:</p> + +<p><em>This is no longer the current setup of my blog</em>. I have switched back to Jekyll for performance reasons. I&#8217;ll be leaving this post up as a point of reference though :)</p> + +<hr/> + +<p>This is my personal blog (if that wasn&#8217;t already obvious). I currently have 89 blog posts living here. But I have done something magical today:</p> + <p>All of these articles are rendered inside a <em>single HTML file</em>. 🤯</p> -<h2>What Sorcery is This?!</h2> -<p>No magic here - I'm just using my own personal static site generator called <a href="https://phpetite.org">PHPetite</a>. You can find all the code and more information about PHPetite on the <a href="https://github.com/bradleytaunt/phpetite">official Github repo page</a>. Please note that this project is still very much a WIP, so go easy on me when pointing out bugs or issues!</p> -<h2>Pingdom Stats</h2> -<p>Before we get into more details on how everything is built, let's take a quick look at some of my website stats (not that pure numbers are 100% accurate of user experience):</p> + +<h2 id="what-sorcery-is-this">What Sorcery is This?!</h2> + +<p>No magic here - I&#8217;m just using my own personal static site generator called <a href="https://phpetite.org">PHPetite</a>. You can find all the code and more information about PHPetite on the <a href="https://github.com/bradleytaunt/phpetite">official Github repo page</a>. Please note that this project is still very much a WIP, so go easy on me when pointing out bugs or issues!</p> + +<h2 id="pingdom-stats">Pingdom Stats</h2> + +<p>Before we get into more details on how everything is built, let&#8217;s take a quick look at some of my website stats (not that pure numbers are 100% accurate of user experience):</p> + <ul> <li>99 Performance Grade</li> <li>951 ms Load Time</li> <li>231.3 KB Page Size (thank you Netlify compression!)</li> </ul> + <p><a href="https://tools.pingdom.com/#5e169d6a82000000">See all the Pingdom details for yourself</a></p> + <p>Now the <code>Page Size</code> will certainly change as more blog posts are added over time, but if the total webpage size is roughly 230 KB with 89 blog posts, I figure that gives me the ability to add another 200 or so posts before I cross the <a href="https://1mb.club">1MB threshold</a></p> -<p>I'll deal with how to load in the content more efficiently when that times comes...</p> -<h2>What About Images?</h2> -<p>Good question. Since a large portion of my articles tend to be focused on design and CSS, visual examples are somewhat important. So how do I avoid loading in all the individual images on every single post into this single HTML "website"?</p> -<p>Easy - I don't load any images at all.</p> + +<p>I&#8217;ll deal with how to load in the content more efficiently when that times comes&#8230;</p> + +<h2 id="what-about-images">What About Images?</h2> + +<p>Good question. Since a large portion of my articles tend to be focused on design and CSS, visual examples are somewhat important. So how do I avoid loading in all the individual images on every single post into this single HTML &#8220;website&#8221;?</p> + +<p>Easy - I don&#8217;t load any images at all.</p> + <p>I now simply set any images that are not included in the current, visible <code>section</code> to <code>display: none</code>. This avoids breaking things with the RSS feed.</p> + <p>Here is an image example of an old Dribbble shot I created years ago:</p> -<p><figure> -<div class="img-parent"> -<img loading="lazy" src="/placeholder-image.webp" onclick="this.src='/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons"> -</div> -<figcaption><b>Click the placeholder to load in the real image</b><br>Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption> -</figure></p> -<p>I have noticed that Safari / Firefox on iOS renders the imagery as broken image links - I plan to look into this further to avoid that confusion. For now it works well on desktop Chromium and Firefox.</p> -<pre><code>&lt;figure&gt; - &lt;div class=&quot;img-parent&quot;&gt; - &lt;img loading=&quot;lazy&quot; src=&quot;/placeholder-image.webp&quot; onclick=&quot;this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'&quot; alt=&quot;Aqua UI buttons&quot;&gt; - &lt;/div&gt; - &lt;figcaption&gt;&lt;b&gt;Click the placeholder to load in the real image&lt;/b&gt;&lt;br&gt;Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. &lt;a href=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp&quot;&gt;View full size image&lt;/a&gt;.&lt;/figcaption&gt; -&lt;/figure&gt; -</code></pre> -<h2>How's the SEO?</h2> -<p>Probably terrible to be honest. One single file for all blog posts is something Google will most likely frown upon. Whatever - it's my personal blog so I don't really give a shit.</p> -<h2>RSS Feed</h2> -<p>If you recently added my old RSS feed, I'm sorry, but you'll have to update. The new feed is located at <a href="https://tdarb.org/feeds/posts.xml">tdarb.org/feeds/posts.xml</a>. I made this change to avoid spamming the current feed users.</p> -<h2>Tasty Dog Food</h2> + +<p>I have noticed that Safari &#47; Firefox on iOS renders the imagery as broken image links - I plan to look into this further to avoid that confusion. For now it works well on desktop Chromium and Firefox.</p> + +<pre><code>&#60;figure&#62; + &#60;div class="img-parent"&#62; + &#60;img loading="lazy" src="&#47;placeholder-image.webp" onclick="this.src=&#39;https:&#47;&#47;res.cloudinary.com&#47;bradtaunt&#47;image&#47;fetch&#47;q_auto:low&#47;v1570124593&#47;https:&#47;&#47;uglyduck.ca&#47;public&#47;images&#47;aqua-ui-css-buttons.webp&#39;" alt="Aqua UI buttons"&#62; + &#60;&#47;div&#62; + &#60;figcaption&#62;&#60;b&#62;Click the placeholder to load in the real image&#60;&#47;b&#62;&#60;br&#62;Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. &#60;a href="https:&#47;&#47;res.cloudinary.com&#47;bradtaunt&#47;image&#47;fetch&#47;q_auto:low&#47;v1570124593&#47;https:&#47;&#47;uglyduck.ca&#47;public&#47;images&#47;aqua-ui-css-buttons.webp"&#62;View full size image&#60;&#47;a&#62;.&#60;&#47;figcaption&#62; +&#60;&#47;figure&#62; +</code></pre> + +<h2 id="hows-the-seo">How&#8217;s the SEO?</h2> + +<p>Probably terrible to be honest. One single file for all blog posts is something Google will most likely frown upon. Whatever - it&#8217;s my personal blog so I don&#8217;t really give a shit.</p> + +<h2 id="rss-feed">RSS Feed</h2> + +<p>If you recently added my old RSS feed, I&#8217;m sorry, but you&#8217;ll have to update. The new feed is located at <a href="https://tdarb.org/feeds/posts.xml">tdarb.org&#47;feeds&#47;posts.xml</a>. I made this change to avoid spamming the current feed users.</p> + +<h2 id="tasty-dog-food">Tasty Dog Food</h2> + <p>At the end of the day, by moving my personal blog over to PHPetite, it makes me more aware of current bugs and restrictions within the project. I feel like this will help me to improve this static site generator even more over time, instead of letting it die a slow death ignored on Github.</p> + <p>I hope you enjoyed this little breakdown and maybe even want to try out PHPetite for yourself? 😉</p></content> - <link href="https://bt.ht/phpetite"/> - <id>https://bt.ht/phpetite</id> + <link href="https://btxx.org/phpetite"/> + <id>https://btxx.org/phpetite</id> <updated>2021-04-22T10:00:00Z</updated> <published>2021-04-22T10:00:00Z</published> </entry> <entry> <title>My Changing Opinion on Personal Website Design</title> - <content type="html"><h1>My Changing Opinion on Personal Website Design</h1> + <content type="html"><h1 id="my-changing-opinion-on-personal-website-design">My Changing Opinion on Personal Website Design</h1> + <p>2021-05-19</p> -<p>Hey would you look at that - my personal blog has been redesigned <em>again</em>! Although I am still using good ol' Jekyll for the backend, I have now added a more fleshed-out CSS design which also includes a set of open source custom typefaces.</p> -<p><strong>Gasp!</strong> "How <em>could</em> you?!" I hear you ask. Let me explain.</p> -<h2>Personal sites should feel personal</h2> -<p>I can see how this change might seem hypocritical (it took some convincing myself) but I decided to follow in to footsteps of Kev Quirk and <a href="https://kevq.uk/adding-some-whimsy-character/">added a little whimsy and character</a> to my website. After all, personal websites should <em>feel personal</em>. My obsession with barebones HTML &amp; CSS serves its purpose on other public projects, but seems limiting for my own little space on the interwebs.</p> -<h2>Banned from my own club</h2> -<p>I had originally converted this blog's design to use <em>zero</em> CSS and instead rely solely on default browser styling. The main reasoning for doing so, was to have the ability to include my own personal website in the <a href="https://xhtml.club">XHTML Club</a> project. (I never said it was a <em>good</em> reason)</p> -<p>After giving it some thought, I've decided that this limitation seemed too extreme even for me.</p> -<h2>Moving forward</h2> -<p>I know I always say "With this new design, I can finally focus on just writing content!" - but this is a lie. I'll probably be fiddling with my personal website until the day I die. The good news is that I <em>do</em> have a few tutorial blog posts lined up to publish soon - so be on the lookout for those!</p> -<p>Thanks for reading through my pointless ramblings about personal websites. It's good to just vent about these things sometimes...</p></content> - <link href="https://bt.ht/personal-website-opinions"/> - <id>https://bt.ht/personal-website-opinions</id> + +<p>Hey would you look at that - my personal blog has been redesigned <em>again</em>! Although I am still using good ol&#8217; Jekyll for the backend, I have now added a more fleshed-out CSS design which also includes a set of open source custom typefaces.</p> + +<p><strong>Gasp!</strong> &#8220;How <em>could</em> you?!&#8221; I hear you ask. Let me explain.</p> + +<h2 id="personal-sites-should-feel-personal">Personal sites should feel personal</h2> + +<p>I can see how this change might seem hypocritical (it took some convincing myself) but I decided to follow in to footsteps of Kev Quirk and <a href="https://kevq.uk/adding-some-whimsy-character/">added a little whimsy and character</a> to my website. After all, personal websites should <em>feel personal</em>. My obsession with barebones HTML &#38; CSS serves its purpose on other public projects, but seems limiting for my own little space on the interwebs.</p> + +<h2 id="banned-from-my-own-club">Banned from my own club</h2> + +<p>I had originally converted this blog&#8217;s design to use <em>zero</em> CSS and instead rely solely on default browser styling. The main reasoning for doing so, was to have the ability to include my own personal website in the <a href="https://xhtml.club">XHTML Club</a> project. (I never said it was a <em>good</em> reason)</p> + +<p>After giving it some thought, I&#8217;ve decided that this limitation seemed too extreme even for me.</p> + +<h2 id="moving-forward">Moving forward</h2> + +<p>I know I always say &#8220;With this new design, I can finally focus on just writing content!&#8221; - but this is a lie. I&#8217;ll probably be fiddling with my personal website until the day I die. The good news is that I <em>do</em> have a few tutorial blog posts lined up to publish soon - so be on the lookout for those!</p> + +<p>Thanks for reading through my pointless ramblings about personal websites. It&#8217;s good to just vent about these things sometimes&#8230;</p></content> + <link href="https://btxx.org/personal-website-opinions"/> + <id>https://btxx.org/personal-website-opinions</id> <updated>2021-05-19T10:00:00Z</updated> <published>2021-05-19T10:00:00Z</published> </entry> <entry> <title>Create a Performance-Focused WordPress Blog</title> - <content type="html"><h1>Create a Performance-Focused WordPress Blog</h1> + <content type="html"><h1 id="create-a-performance-focused-wordpress-blog">Create a Performance-Focused WordPress Blog</h1> + <p>2021-09-08</p> -<p>With my recent switch back to WordPress, and having read Kev Quirk’s <a href="https://kevq.uk/core-web-vitals-and-wordpress/" target="_blank" rel="noreferrer noopener">latest post about Core Web Vitals</a>, I wanted to make sure my blog still prioritized speed and performance above all else. I’m happy to say that I have closely replicated the same speed of my original <em>static</em> Jekyll-based version of this blog.</p> -<p>And I've achieved this with barely any effort at all. All that's needed is: </p> + +<p>With my recent switch back to WordPress, and having read Kev Quirk’s latest post about Core Web Vitals, I wanted to make sure my blog still prioritized speed and performance above all else. I’m happy to say that I have closely replicated the same speed of my original <em>static</em> Jekyll-based version of this blog.</p> + +<p>And I&#8217;ve achieved this with barely any effort at all. All that&#8217;s needed is: </p> + <ul> <li>a lightweight WordPress theme</li> <li>two free WordPress plugins</li> -<li>cheap &amp; fast web hosting</li> +<li>cheap &#38; fast web hosting</li> </ul> + <p>Let me breakdown each component so those of you interested can do the same without hitting any roadblocks.</p> -<h2>Choosing Your WordPress Theme</h2> + +<h2 id="choosing-your-wordpress-theme">Choosing Your WordPress Theme</h2> + <p>Selecting an existing theme or trying to build your own can be a daunting experience. For my needs, I forced myself to find an existing theme and just run with it. This gives me more time to focus on writing instead of constantly tweaking the blog’s visuals.</p> + <p>I would suggest either using the default starter theme (as of this writing: Twenty Twenty One theme by Automattic) or looking for specific “lightweight” themes across the web. I highly recommend checking out Anders Norén’s <a href="https://andersnoren.se/teman/">theme collection</a>. Others can be found on the official <a href="https://wordpress.org/">wordpress.org</a> website.</p> -<h2>Two Simple Plugins</h2> -<p>Once you have decided on a theme, you'll also want to be sure to install two very important plugins that greatly help with performance:</p> + +<h2 id="two-simple-plugins">Two Simple Plugins</h2> + +<p>Once you have decided on a theme, you&#8217;ll also want to be sure to install two very important plugins that greatly help with performance:</p> + <ol> -<li>Jetpack Boost – <a href="https://wordpress.org/plugins/jetpack-boost/">wordpress.org/plugins/jetpack-boost/</a></li> -<li>Yoast SEO – <a href="https://wordpress.org/plugins/wordpress-seo/">wordpress.org/plugins/wordpress-seo/</a></li> +<li>Jetpack Boost – <a href="https://wordpress.org/plugins/jetpack-boost/">wordpress.org&#47;plugins&#47;jetpack-boost&#47;</a></li> +<li>Yoast SEO – <a href="https://wordpress.org/plugins/wordpress-seo/">wordpress.org&#47;plugins&#47;wordpress-seo&#47;</a></li> </ol> -<h2>Jetpack Boost</h2> + +<h2 id="jetpack-boost">Jetpack Boost</h2> + <p>This plugin is fantastic. Not only will it run a proper audit (based off Google’s Lighthouse tool) but also gives you the ability to activate optimized CSS, lazy image loading and deferring non-essential JavaScript (if applicable). All of this is done in a super-clean user interface directly inside your WordPress admin.</p> + <p>Check out my own testing site metrics below:</p> -<p><figure> - <img src="/public/images/jetpack-boost.webp" alt="Jetpack boost numbers"> - <figcaption>The Jetpack Boost metrics for this website (and yes, that 99 score for mobile kills me)</figcaption> -</figure></p> -<h2>Yoast SEO</h2> + +<h2 id="yoast-seo">Yoast SEO</h2> + <p>If you’ve worked with WordPress at all you have surely heard of Yoast. Adding this plugin to your site is really a no-brainer. The automatic generation of meta data and SEO tags can save you a lot of time while also improving your overall Lighthouse score.</p> + <p>Here is the Lighthouse audit for the test WordPress website:</p> -<p><figure> - <img src="/public/images/ugly-duck-audit.webp" alt="Lighthouse audit"> - <figcaption>It might not be perfect, but it’s pretty damn close!</figcaption> -</figure></p> + <p>Those scores were achieved without any custom work on my end – I simply activated the plugin and let it work it’s magic. Great stuff.</p> -<h2>Host Everything on EasyWP</h2> + +<h2 id="host-everything-on-easywp">Host Everything on EasyWP</h2> + <p>Up to this point we haven’t spent a single penny. Unfortunately, web hosting isn’t free and you’re going to need it if you actually want your website to have a home on the interwebs!</p> + <p>I know – I can hear your collective voices shouting out:</p> -<blockquote><p>Isn't web hosting a little expensive just for my simple hobby blog/site?</p> -<p>-- <cite>Some of you</cite></p> + +<blockquote> +<p>Isn&#8217;t web hosting a little expensive just for my simple hobby blog&#47;site?</p> + +<p>&#8211; Some of you</p> </blockquote> -<p>I host this test blog for just <strong>$3.88/month</strong> and the service is actually good. Unreal, right? That’s the price of a medium coffee, so I’m pretty sure it won’t break the bank.</p> -<p>This “cheap” hosting is through EasyWP and the Starter plan ($3.88/month) comes with the following:</p> + +<p>I host this test blog for just <strong>$3.88&#47;month</strong> and the service is actually good. Unreal, right? That’s the price of a medium coffee, so I’m pretty sure it won’t break the bank.</p> + +<p>This “cheap” hosting is through EasyWP and the Starter plan ($3.88&#47;month) comes with the following:</p> + <ul> <li>10 GB SSD storage</li> -<li>50k visitors/month</li> +<li>50k visitors&#47;month</li> <li>Unlimited bandwidth</li> <li>Backups (though not automatic)</li> <li>SFTP access</li> -<li>EasyWP Cache plugin (and it's actually good!)</li> +<li>EasyWP Cache plugin (and it&#8217;s actually good!)</li> </ul> + <p>You will need to snag your own SSL certificate though, but this is easily obtained with something like <a href="https://letsencrypt.org">letsencrypt.org</a>.</p> + <p>Best of all, if in the future you require more features the next pricing tier is still only $7.88. Not too shabby!</p> -<h2>Try Yourself</h2> + +<h2 id="try-yourself">Try Yourself</h2> + <p>The fact that EasyWP gives you a free month trial, there really is no reason not to try spinning up your own blog or online store or whatever the heck you want to build. The more people with personal spaces on the web the better.</p></content> - <link href="https://bt.ht/performance-focused-wordpress-theme"/> - <id>https://bt.ht/performance-focused-wordpress-theme</id> + <link href="https://btxx.org/performance-focused-wordpress-theme"/> + <id>https://btxx.org/performance-focused-wordpress-theme</id> <updated>2021-09-08T10:00:00Z</updated> <published>2021-09-08T10:00:00Z</published> </entry> <entry> <title>Yet Another Static Site Generator Switch</title> - <content type="html"><h1>Yet Another Static Site Generator Switch</h1> + <content type="html"><h1 id="yet-another-static-site-generator-switch">Yet Another Static Site Generator Switch</h1> + <p>2022-07-06</p> -<p>If you're an RSS subscriber, I've probably blown up your feed reader (again). This seems to be an on-going theme with this blog. I can't help it.</p> -<p>This website now uses my <em>new</em> Pandoc-based static blog generator: <a href="https://pblog.bt.ht">pblog</a>. I won't go into great detail about it's features (or lack thereof) - if you're interested in that, check out the <a href="https://pblog.bt.ht/blog/pblog-intro.html">"Introducing pblog" article</a>.</p> -<p>The bigger question is, "Why the change?"</p> -<h2>Where's the Love for "Shinobi"?</h2> -<p>Switching over to <code>pblog</code> wasn't caused by a dislike of using <a href="https://shinobi.bt.ht">Shinobi</a>. In fact, I still really enjoy the work flow that that plain-text focused SSG provides. The main issues that popped up for my own blog was <em>accessibility</em> and <em>poor user experience</em>.</p> -<p>I had multiple readers reach out and mention poor rendering of content in their RSS reader of choice. That's kind of a <strong>big deal</strong>. I test that project as best I can with my limited access to all available RSS readers - but I can only test so much. It became one of those "Well, it works on my machine!" meme. So instead of spending an untold amount of time debugging every RSS reader known to man, I figured my best bet was to render things as <code>HTML</code>.</p> -<p>The next big issue was <em>accessibility</em>. Screen readers can read <code>txt</code> formatted files perfectly fine but since elements aren't categorized everything ends up with the same level hierarchy. This can cause confusion between headers, list items, URLs, footers etc. For my personal use-case (sharing tutorials and covering design topics) it didn't make sense to sacrifice user accessibility for minimalism.</p> -<h2>The Search for Simplicity</h2> -<p>My initial thought process was to include some form of "plus" add-on to the existing Shinobi build script. The idea was to render <code>HTML</code> versions of each post and dump those into the generated RSS file. Although maybe good in theory, it ended up impractical because:</p> + +<p>If you&#8217;re an RSS subscriber, I&#8217;ve probably blown up your feed reader (again). This seems to be an on-going theme with this blog. I can&#8217;t help it.</p> + +<p>This website now uses my <em>new</em> Pandoc-based static blog generator: <a href="https://pblog.bt.ht">pblog</a>. I won&#8217;t go into great detail about it&#8217;s features (or lack thereof) - if you&#8217;re interested in that, check out the <a href="https://pblog.bt.ht/blog/pblog-intro.html">&#8220;Introducing pblog&#8221; article</a>.</p> + +<p>The bigger question is, &#8220;Why the change?&#8221;</p> + +<h2 id="wheres-the-love-for-shinobi">Where&#8217;s the Love for &#8220;Shinobi&#8221;?</h2> + +<p>Switching over to <code>pblog</code> wasn&#8217;t caused by a dislike of using <a href="https://shinobi.bt.ht">Shinobi</a>. In fact, I still really enjoy the work flow that that plain-text focused SSG provides. The main issues that popped up for my own blog was <em>accessibility</em> and <em>poor user experience</em>.</p> + +<p>I had multiple readers reach out and mention poor rendering of content in their RSS reader of choice. That&#8217;s kind of a <strong>big deal</strong>. I test that project as best I can with my limited access to all available RSS readers - but I can only test so much. It became one of those &#8220;Well, it works on my machine!&#8221; meme. So instead of spending an untold amount of time debugging every RSS reader known to man, I figured my best bet was to render things as <code>HTML</code>.</p> + +<p>The next big issue was <em>accessibility</em>. Screen readers can read <code>txt</code> formatted files perfectly fine but since elements aren&#8217;t categorized everything ends up with the same level hierarchy. This can cause confusion between headers, list items, URLs, footers etc. For my personal use-case (sharing tutorials and covering design topics) it didn&#8217;t make sense to sacrifice user accessibility for minimalism.</p> + +<h2 id="the-search-for-simplicity">The Search for Simplicity</h2> + +<p>My initial thought process was to include some form of &#8220;plus&#8221; add-on to the existing Shinobi build script. The idea was to render <code>HTML</code> versions of each post and dump those into the generated RSS file. Although maybe good in theory, it ended up impractical because:</p> + <ol> <li>No utility or existing tool could render the style of text-based formatting I implemented as semantic HTML (at least not without heavy customization and tinkering)</li> <li>I was actually adding extra bloat to the Shinobi project (true minimalism is the point, right?)</li> </ol> + <p>So, that option was ruled out pretty quickly.</p> -<p>The next option didn't take me long to land on: <em>Pandoc</em>. I've used Pandoc for years and have nothing but great experiences tweaking it for my own needs. I knew that I could piggyback off the original <code>shell</code> commands in the Shinobi project and alter them as needed to incorporate Pandoc.</p> -<p>I honestly didn't run into many issues while rolling this out. Fairly seamless!</p> -<h2>New Workflow</h2> -<p>With this new blog switch I also decided to try out a new <em>deploy</em> workflow. I've used <code>rsync</code> for the longest time but wanted to have something more GUI-based on macOS. I know, <em>blasphemy</em>!</p> + +<p>The next option didn&#8217;t take me long to land on: <em>Pandoc</em>. I&#8217;ve used Pandoc for years and have nothing but great experiences tweaking it for my own needs. I knew that I could piggyback off the original <code>shell</code> commands in the Shinobi project and alter them as needed to incorporate Pandoc.</p> + +<p>I honestly didn&#8217;t run into many issues while rolling this out. Fairly seamless!</p> + +<h2 id="new-workflow">New Workflow</h2> + +<p>With this new blog switch I also decided to try out a new <em>deploy</em> workflow. I&#8217;ve used <code>rsync</code> for the longest time but wanted to have something more GUI-based on macOS. I know, <em>blasphemy</em>!</p> + <p>Since I already have a Transmit license, that seemed like the best fit since it is designed specifically for macOS. Now my workflow process is as follows:</p> + <ol> <li>Write new posts in my root <code>posts</code> folder</li> <li>Rebuild the <code>pblog</code> with <code>make</code></li> <li>Use the built-in sync function of Transmit to mirror my local <code>_output</code> with my web server</li> </ol> + <p><img src="/public/images/transmit-ftp.webp" alt="The Transmit UI in all of its wonderful glory (before I updated)" /></p> -<h3>Wrapping Up</h3> -<p>Will there be bugs with this switch-over? Most likely. Will some URLs be left behind or broken? Possibly. These small issues will be ironed out over time. For now, I'm quite happy with keeping things minimal on the workflow side of things, while preserving accessibility and user experience with the output.</p> + +<h3 id="wrapping-up">Wrapping Up</h3> + +<p>Will there be bugs with this switch-over? Most likely. Will some URLs be left behind or broken? Possibly. These small issues will be ironed out over time. For now, I&#8217;m quite happy with keeping things minimal on the workflow side of things, while preserving accessibility and user experience with the output.</p> + <p>Thanks for reading!</p></content> - <link href="https://bt.ht/pblog"/> - <id>https://bt.ht/pblog</id> + <link href="https://btxx.org/pblog"/> + <id>https://btxx.org/pblog</id> <updated>2022-07-06T10:00:00Z</updated> <published>2022-07-06T10:00:00Z</published> </entry> <entry> <title>Happily Paying For macOS Apps</title> - <content type="html"><h1>Happily Paying For macOS Apps</h1> + <content type="html"><h1 id="happily-paying-for-macos-apps">Happily Paying For macOS Apps</h1> + <p>2022-06-29</p> -<p>It's no secret that I am a huge advocate for open source software. A solid chunk of my day-to-day workload is done so via FOSS[^0] systems. I also manage a handful of fun side projects that are normally shipped under either MIT or GPL licensing. But that doesn't mean I still don't enjoy <em>some</em> non-free, proprietary software.</p> -<p>So, I thought I would share my collection of macOS applications that I happily paid for. (There aren't many since my needs are limited)</p> -<h2>Design Tool: Sketch</h2> + +<p>It&#8217;s no secret that I am a huge advocate for open source software. A solid chunk of my day-to-day workload is done so via FOSS[^0] systems. I also manage a handful of fun side projects that are normally shipped under either MIT or GPL licensing. But that doesn&#8217;t mean I still don&#8217;t enjoy <em>some</em> non-free, proprietary software.</p> + +<p>So, I thought I would share my collection of macOS applications that I happily paid for. (There aren&#8217;t many since my needs are limited)</p> + +<h2 id="design-tool-sketch">Design Tool: Sketch</h2> + <p>My day job requires me to use Figma, which is totally fine but not nearly as polished as Sketch. Yes, Figma is cross-platform. Yes, Figma can run directly in the browser. Yes, Figma is free for most smaller team sizes.</p> + <p>But sorry - Sketch is just better.</p> -<p>Since the team at Bohemian Coding have crafted Sketch specifically for macOS it feels native, runs extremely well and fits in with the rest of the ecosystem. The pricing model is okay in my books too, balancing a fine line between <em>optional</em> yearly subscriptions and one-time purchases. It's a smart move and I much prefer it to a forced subscription plan.</p> -<p>URL: <a href="https://www.sketch.com/">https://www.sketch.com/</a></p> -<h2>Password Manager: Secrets</h2> -<p>I was originally a subscriber to 1Password but couldn't justify spending $7CDN a month for what it was offering. Also, subscriptions suck. After doing some research I stumbled upon Secrets and noticed some things about it that instantly caught my eye:</p> + +<p>Since the team at Bohemian Coding have crafted Sketch specifically for macOS it feels native, runs extremely well and fits in with the rest of the ecosystem. The pricing model is okay in my books too, balancing a fine line between <em>optional</em> yearly subscriptions and one-time purchases. It&#8217;s a smart move and I much prefer it to a forced subscription plan.</p> + +<p>URL: <a href="https://www.sketch.com/">https:&#47;&#47;www.sketch.com&#47;</a></p> + +<h2 id="password-manager-secrets">Password Manager: Secrets</h2> + +<p>I was originally a subscriber to 1Password but couldn&#8217;t justify spending $7CDN a month for what it was offering. Also, subscriptions suck. After doing some research I stumbled upon Secrets and noticed some things about it that instantly caught my eye:</p> + <ul> <li>No subscriptions! One-time price forever.</li> <li>iCloud Sync across devices</li> -<li>Browser extension support (although I don't use this personally)</li> +<li>Browser extension support (although I don&#8217;t use this personally)</li> <li>Developed by a one-man team (support indie devs!)</li> </ul> -<p>I purchased both the macOS and iOS versions of Secrets after trying out the free version almost immediately. It's wonderful. The UI is clean and flows well with the rest of the Mac ecosystem to give it a native "Apple" feel. Syncing my laptop and iPhone works seamless via iCloud.</p> + +<p>I purchased both the macOS and iOS versions of Secrets after trying out the free version almost immediately. It&#8217;s wonderful. The UI is clean and flows well with the rest of the Mac ecosystem to give it a native &#8220;Apple&#8221; feel. Syncing my laptop and iPhone works seamless via iCloud.</p> + <p>And best of all - no monthly fees.</p> -<p>URL: <a href="https://outercorner.com/secrets-mac/">https://outercorner.com/secrets-mac/</a></p> -<h2>Transferring Files: Transmit 5</h2> -<p>The folks at Panic make incredible Mac and iOS apps. I see them as one of the best in the industry. In the early days of my web development career, I used to run Coda exclusively. I've since moved on the Sublime Text but I still have fond memories of the old Panic editor.</p> -<p>As for FTP access, I still use Panic's Transmit to this day. Beautiful UI that feels snappy even when transferring massive files across servers. Transmit is also a one-time purchase. Thank goodness. (Have I mentioned that I hate software subscriptions?)</p> -<p>URL: <a href="https://panic.com/transmit/">https://panic.com/transmit/</a></p> -<h2>Wrapping Up</h2> -<p>I know this list only includes 3 applications, but that's truly all the ones I've spent money on. If in the future I happen to purchase any others I will be sure to update this post accordingly.</p> -<h2>Refs</h2> + +<p>URL: <a href="https://outercorner.com/secrets-mac/">https:&#47;&#47;outercorner.com&#47;secrets-mac&#47;</a></p> + +<h2 id="transferring-files-transmit-5">Transferring Files: Transmit 5</h2> + +<p>The folks at Panic make incredible Mac and iOS apps. I see them as one of the best in the industry. In the early days of my web development career, I used to run Coda exclusively. I&#8217;ve since moved on the Sublime Text but I still have fond memories of the old Panic editor.</p> + +<p>As for FTP access, I still use Panic&#8217;s Transmit to this day. Beautiful UI that feels snappy even when transferring massive files across servers. Transmit is also a one-time purchase. Thank goodness. (Have I mentioned that I hate software subscriptions?)</p> + +<p>URL: <a href="https://panic.com/transmit/">https:&#47;&#47;panic.com&#47;transmit&#47;</a></p> + +<h2 id="wrapping-up">Wrapping Up</h2> + +<p>I know this list only includes 3 applications, but that&#8217;s truly all the ones I&#8217;ve spent money on. If in the future I happen to purchase any others I will be sure to update this post accordingly.</p> + +<h2 id="refs">Refs</h2> + <ol> -<li>Free &amp; open source software</li> +<li>Free &#38; open source software</li> </ol></content> - <link href="https://bt.ht/paid-mac-apps"/> - <id>https://bt.ht/paid-mac-apps</id> + <link href="https://btxx.org/paid-mac-apps"/> + <id>https://btxx.org/paid-mac-apps</id> <updated>2022-06-29T10:00:00Z</updated> <published>2022-06-29T10:00:00Z</published> </entry> <entry> <title>Over-Nesting</title> - <content type="html"><h1>Over-Nesting</h1> + <content type="html"><h1 id="over-nesting">Over-Nesting</h1> + <p>2019-01-06</p> -<p>I think since our design industry moves so quickly and exciting new technologies get released almost daily, that we often forget some of the basics when writing CSS. I bring this up because I've recently worked on a few projects that show a slight disregard for proper class/selector nesting.</p> -<p>Now it's completely understandable why designers and teams alike shrug off the concept of "over-nesting":</p> + +<p>I think since our design industry moves so quickly and exciting new technologies get released almost daily, that we often forget some of the basics when writing CSS. I bring this up because I&#8217;ve recently worked on a few projects that show a slight disregard for proper class&#47;selector nesting.</p> + +<p>Now it&#8217;s completely understandable why designers and teams alike shrug off the concept of &#8220;over-nesting&#8221;:</p> + <ul> <li>As a team we know the structure of our code (no outside party needs to interact with it)</li> -<li>Everything is written in <code>insert pre-processor here</code> - so it's cleaner/compiled anyway</li> -<li>It's <em>technically</em> DRY</li> +<li>Everything is written in <code>insert pre-processor here</code> - so it&#8217;s cleaner&#47;compiled anyway</li> +<li>It&#8217;s <em>technically</em> DRY</li> </ul> -<p>I personally believe these are all weak excuses that don't justify the poor experience future maintainers of your code will face. <em>You should always write your code with the idea someone completely new to the project will have to maintain it</em>.</p> -<p>Let's look at an average example of poor nesting that I've seen out in the wild:</p> -<pre><code>/* These children elements can't be used outside -of the parent - not very flexible */ + +<p>I personally believe these are all weak excuses that don&#8217;t justify the poor experience future maintainers of your code will face. <em>You should always write your code with the idea someone completely new to the project will have to maintain it</em>.</p> + +<p>Let&#8217;s look at an average example of poor nesting that I&#8217;ve seen out in the wild:</p> + +<pre><code>&#47;* These children elements can&#39;t be used outside +of the parent - not very flexible *&#47; .main-container { .child-container { - /* This class specificity is too deep */ + &#47;* This class specificity is too deep *&#47; .sub-child-container {} } } </code></pre> -<p>Even if you know a child element will never be structured outside of it's parent, what harm does it cause to still place it out of such deep specificity?</p> -<pre><code>/* This code is far more reusable */ + +<p>Even if you know a child element will never be structured outside of it&#8217;s parent, what harm does it cause to still place it out of such deep specificity?</p> + +<pre><code>&#47;* This code is far more reusable *&#47; .main-container {} .child-container {} .sub-child-container {} </code></pre> -<h3>Exceptions</h3> + +<h3 id="exceptions">Exceptions</h3> + <p>As with anything, there are exceptions to the <em>rule</em>. If the nested elements pertain to the parent itself, it makes complete sense to group these stylings together. A button or link item are excellent examples of this:</p> + <pre><code>.btn-lg { - &amp;:hover {} - &amp;:active {} - &amp;:disabled{} + &#38;:hover {} + &#38;:active {} + &#38;:disabled{} } .link-item { - &amp;:hover{} - &amp;:focus{} + &#38;:hover{} + &#38;:focus{} } </code></pre> -<p>Of course, this is all easier said than done. Limitations exist within teams or even on an individual level that might make this impossible to change. Maybe you don't have the authority to rework your current CSS or it would eat up too many cycles and time is valuable - especially in the world of startups. </p> -<p>I'm not saying this is <strong>the only way to structure CSS</strong> - I'm only trying to make the lives of future designers/developers easier moving forward. </p></content> - <link href="https://bt.ht/over-nesting"/> - <id>https://bt.ht/over-nesting</id> + +<p>Of course, this is all easier said than done. Limitations exist within teams or even on an individual level that might make this impossible to change. Maybe you don&#8217;t have the authority to rework your current CSS or it would eat up too many cycles and time is valuable - especially in the world of startups. </p> + +<p>I&#8217;m not saying this is <strong>the only way to structure CSS</strong> - I&#8217;m only trying to make the lives of future designers&#47;developers easier moving forward. </p></content> + <link href="https://btxx.org/over-nesting"/> + <id>https://btxx.org/over-nesting</id> <updated>2019-01-06T10:00:00Z</updated> <published>2019-01-06T10:00:00Z</published> </entry> <entry> <title>Over-Engineering an Oil Tank Gauge</title> - <content type="html"><h1>Over-Engineering an Oil Tank Gauge</h1> + <content type="html"><h1 id="over-engineering-an-oil-tank-gauge">Over-Engineering an Oil Tank Gauge</h1> + <p>2020-09-09</p> -<p>I almost went down the path of investing a huge amount of time and effort into fixing a stuck oil fuel tank float-gauge in my house. Recently, the float mechanism became stuck and permanently displayed <code>empty</code> regardless of how much fuel was in the tank - not ideal. It's a 20 year-old tank, so I wasn't surprised that the float finally gave out. </p> -<p>Being the wannabe tinkerer that I am, a light bulb went off in my head and I started thinking on how to incorporate some ultrasonic system to display the accurate fuel reading digitally. Obviously my first thought was just to replace the float gauge with a new one and be done with it. That didn't sound very <em>fun</em> though.</p> -<p>I briefly looked at other similar projects and started brainstorming the best way I would implement this for my own situation. The best option I came across seemed to be this: <a href="https://scottiestech.info/2017/10/24/diy-ultrasonic-fuel-gauge-level-sensor/">DIY Ultrasonic Fuel Gauge / Level Sensor</a></p> + +<p>I almost went down the path of investing a huge amount of time and effort into fixing a stuck oil fuel tank float-gauge in my house. Recently, the float mechanism became stuck and permanently displayed <code>empty</code> regardless of how much fuel was in the tank - not ideal. It&#8217;s a 20 year-old tank, so I wasn&#8217;t surprised that the float finally gave out. </p> + +<p>Being the wannabe tinkerer that I am, a light bulb went off in my head and I started thinking on how to incorporate some ultrasonic system to display the accurate fuel reading digitally. Obviously my first thought was just to replace the float gauge with a new one and be done with it. That didn&#8217;t sound very <em>fun</em> though.</p> + +<p>I briefly looked at other similar projects and started brainstorming the best way I would implement this for my own situation. The best option I came across seemed to be this: <a href="https://scottiestech.info/2017/10/24/diy-ultrasonic-fuel-gauge-level-sensor/">DIY Ultrasonic Fuel Gauge &#47; Level Sensor</a></p> + <p>An ultrasonic system with a cool mini display sounded pretty rad - much cooler than just replacing the broken gauge with a new float arm. So it was settled.</p> -<h2>My oil think-tank</h2> -<p>I quickly thought through my options in my head before jumping too far into things (and even included a "poor-mans" temperature strip option):</p> + +<h2 id="my-oil-think-tank">My oil think-tank</h2> + +<p>I quickly thought through my options in my head before jumping too far into things (and even included a &#8220;poor-mans&#8221; temperature strip option):</p> + <table> -<tr><th>Solution </th><th>Cost </th><th>Time </th></tr> -<tr><td>Ultrasonic Gauge </td><td>$40-50 </td><td>~2-3 hours </td></tr> -<tr><td>New Float Gauge </td><td>$25-30 </td><td>~45 minutes </td></tr> -<tr><td>Temperature Strips </td><td>$10 </td><td>~2 minutes </td></tr> +<thead> +<tr> +<th>Solution</th> +<th>Cost</th> +<th>Time</th> +</tr> +</thead> + +<tbody> +<tr> +<td>Ultrasonic Gauge</td> +<td>$40-50</td> +<td>~2-3 hours</td> +</tr> +<tr> +<td>New Float Gauge</td> +<td>$25-30</td> +<td>~45 minutes</td> +</tr> +<tr> +<td>Temperature Strips</td> +<td>$10</td> +<td>~2 minutes</td> +</tr> +</tbody> </table> -My mind was still set on building and implementing the ultrasonic option. It would be a great learning experience at the very least!<p>So, before I ordered any parts or started designing a case that would house this new super-cool device, I went to investigate/remove the float gauge to get a better look at the damage. With the help of some penetrating oil (the original installer went crazy with the pipe dope) and my trusty wrench, I opened up the gauge cap, partly lifting the float from the tank. Right away I noticed that the float and shaft were slightly stuck together in one small area. I poked it with my finger.</p> + +<p>My mind was still set on building and implementing the ultrasonic option. It would be a great learning experience at the very least!</p> + +<p>So, before I ordered any parts or started designing a case that would house this new super-cool device, I went to investigate&#47;remove the float gauge to get a better look at the damage. With the help of some penetrating oil (the original installer went crazy with the pipe dope) and my trusty wrench, I opened up the gauge cap, partly lifting the float from the tank. Right away I noticed that the float and shaft were slightly stuck together in one small area. I poked it with my finger.</p> + <p><em>The float set itself back into the correct position. It was fixed.</em></p> + <p>How could I have been so dumb. I was so excited about <em>building something</em> that I jumped into implementation before fully realizing the problem. Talk about a metaphor for web dev, am I right?</p> -<h2>Overthinking simple problems</h2> -<p>I can't speak for all designers / developers out there, but I catch myself (far more often than I'd like to admit) over-engineering a solution because of some perceived notion that it is the "best" option. Most of the time it isn't actually better, it just seems more <em>fun</em>.</p> -<p>Now don't get me wrong, fun is a good thing most of the time. It's just that some instances call for the quickest, cleanest, easiest solution in the name of efficiency - just be sure to have fully explored the problem <em>first</em>.</p> -<h2>Final decision</h2> -<p>So I ended up doing nothing. I simply re-threaded the cap and placed the float back inside the tank. I know I saved myself time and money, but I can't help but feel like I failed...</p> -<p>Just like in the world of software, it's best to avoid over-engineering simple problems.</p></content> - <link href="https://bt.ht/over-engineering-an-oil-tank"/> - <id>https://bt.ht/over-engineering-an-oil-tank</id> + +<h2 id="overthinking-simple-problems">Overthinking simple problems</h2> + +<p>I can&#8217;t speak for all designers &#47; developers out there, but I catch myself (far more often than I&#8217;d like to admit) over-engineering a solution because of some perceived notion that it is the &#8220;best&#8221; option. Most of the time it isn&#8217;t actually better, it just seems more <em>fun</em>.</p> + +<p>Now don&#8217;t get me wrong, fun is a good thing most of the time. It&#8217;s just that some instances call for the quickest, cleanest, easiest solution in the name of efficiency - just be sure to have fully explored the problem <em>first</em>.</p> + +<h2 id="final-decision">Final decision</h2> + +<p>So I ended up doing nothing. I simply re-threaded the cap and placed the float back inside the tank. I know I saved myself time and money, but I can&#8217;t help but feel like I failed&#8230;</p> + +<p>Just like in the world of software, it&#8217;s best to avoid over-engineering simple problems.</p></content> + <link href="https://btxx.org/over-engineering-an-oil-tank"/> + <id>https://btxx.org/over-engineering-an-oil-tank</id> <updated>2020-09-09T10:00:00Z</updated> <published>2020-09-09T10:00:00Z</published> </entry> <entry> <title>Building openring with Jekyll Build</title> - <content type="html"><h1>Building openring with Jekyll Build</h1> + <content type="html"><h1 id="building-openring-with-jekyll-build">Building openring with Jekyll Build</h1> + <p>2022-12-02</p> -<p>I think it's great when bloggers post their own personal "reading list" of blogs they themselves follow. Whether this is a customized Blogroll page or footnotes in their individual articles, I find it really helpful to find more interesting content on the "indie" web. This isn't a new concept by any means, but I wanted something a little more "dynamic"[^1] for my own blog.</p> -<p>After some digging I came across <a href="https://sr.ht/~sircmpwn/openring/">openring</a> and it's great. Fully customizable, lightweight and completely open source. What more could you ask for?</p> -<p>So, I thought others might be interested in how I've implemented openring through my own Jekyll build system.</p> -<h2>Installing openring</h2> -<p>You can pull the project <a href="https://sr.ht/~sircmpwn/openring/">directly via SourceHut</a> if you wish, but I would recommend installing through your default package manager. I'm running Arch, so for me it was as simple as running:</p> + +<p>I think it&#8217;s great when bloggers post their own personal &#8220;reading list&#8221; of blogs they themselves follow. Whether this is a customized Blogroll page or footnotes in their individual articles, I find it really helpful to find more interesting content on the &#8220;indie&#8221; web. This isn&#8217;t a new concept by any means, but I wanted something a little more &#8220;dynamic&#8221;[^1] for my own blog.</p> + +<p>After some digging I came across <a href="https://sr.ht/~sircmpwn/openring/">openring</a> and it&#8217;s great. Fully customizable, lightweight and completely open source. What more could you ask for?</p> + +<p>So, I thought others might be interested in how I&#8217;ve implemented openring through my own Jekyll build system.</p> + +<h2 id="installing-openring">Installing openring</h2> + +<p>You can pull the project <a href="https://sr.ht/~sircmpwn/openring/">directly via SourceHut</a> if you wish, but I would recommend installing through your default package manager. I&#8217;m running Arch, so for me it was as simple as running:</p> + <pre><code>yay -S openring </code></pre> -<p>That's it. I now have full local access to openring!</p> -<h2>Jekyll Includes</h2> + +<p>That&#8217;s it. I now have full local access to openring!</p> + +<h2 id="jekyll-includes">Jekyll Includes</h2> + <p>You <em>could</em> setup a whole new directory specifically for your openring files, but that seems like overkill. Instead, we will simply add two new files to our existing <code>_includes</code> directory. We will name these files <code>openring-in.html</code> and <code>openring-out.html</code>.</p> -<h3>openring-in.html Contents</h3> -<pre><code>&lt;!-- License-Id: CC0-1.0 --&gt; -&lt;section class=&quot;webring&quot;&gt; - &lt;h3&gt;Articles from blogs I follow around the world wide web&lt;/h3&gt; - &lt;section class=&quot;articles&quot;&gt; + +<h3 id="openring-in.html-contents">openring-in.html Contents</h3> + +<pre><code>&#60;!-- License-Id: CC0-1.0 --&#62; +&#60;section class="webring"&#62; + &#60;h3&#62;Articles from blogs I follow around the world wide web&#60;&#47;h3&#62; + &#60;section class="articles"&#62; {{range .Articles}} - &lt;div class=&quot;article&quot;&gt; - &lt;h4 class=&quot;title&quot;&gt; - &lt;a href=&quot;{{.Link}}&quot; rel=&quot;noopener&quot;&gt;{{.Title}}&lt;/a&gt; - &lt;/h4&gt; - &lt;p class=&quot;summary&quot;&gt;{{.Summary}}&lt;/p&gt; - &lt;small class=&quot;source&quot;&gt; - via &lt;a href=&quot;{{.SourceLink}}&quot;&gt;{{.SourceTitle}}&lt;/a&gt; - &lt;/small&gt; - &lt;small class=&quot;date&quot;&gt;{{.Date | datef &quot;January 2, 2006&quot;}}&lt;/small&gt; - &lt;/div&gt; + &#60;div class="article"&#62; + &#60;h4 class="title"&#62; + &#60;a href="{{.Link}}" rel="noopener"&#62;{{.Title}}&#60;&#47;a&#62; + &#60;&#47;h4&#62; + &#60;p class="summary"&#62;{{.Summary}}&#60;&#47;p&#62; + &#60;small class="source"&#62; + via &#60;a href="{{.SourceLink}}"&#62;{{.SourceTitle}}&#60;&#47;a&#62; + &#60;&#47;small&#62; + &#60;small class="date"&#62;{{.Date | datef "January 2, 2006"}}&#60;&#47;small&#62; + &#60;&#47;div&#62; {{end}} - &lt;/section&gt; - &lt;p class=&quot;attribution&quot;&gt; + &#60;&#47;section&#62; + &#60;p class="attribution"&#62; Generated by - &lt;a href=&quot;https://git.sr.ht/~sircmpwn/openring&quot;&gt;openring&lt;/a&gt; - &lt;/p&gt; -&lt;/section&gt; -&lt;style&gt; + &#60;a href="https:&#47;&#47;git.sr.ht&#47;~sircmpwn&#47;openring"&#62;openring&#60;&#47;a&#62; + &#60;&#47;p&#62; +&#60;&#47;section&#62; +&#60;style&#62; .webring .articles { display: flex; flex-wrap: wrap; @@ -3536,198 +4651,278 @@ My mind was still set on building and implementing the ultrasonic option. It wou font-size: 0.8rem; color: #555; } -&lt;/style&gt; +&#60;&#47;style&#62; </code></pre> -<blockquote><p>Sidenote: You will get minor Liquid Syntax warnings in the console when running your website via <code>serve</code> or <code>build</code>. I don't really mind those warnings but if you do, feel free to move these files out into their own sub-directory in your project folder.</p> + +<blockquote> +<p>Sidenote: You will get minor Liquid Syntax warnings in the console when running your website via <code>serve</code> or <code>build</code>. I don&#8217;t really mind those warnings but if you do, feel free to move these files out into their own sub-directory in your project folder.</p> </blockquote> -<h3>openring-out.html Contents</h3> + +<h3 id="openring-out.html-contents">openring-out.html Contents</h3> + <p>This will generate itself for us every time we rebuild our Jekyll website. It is important to note that any changes you make in this file will be overwritten the next time you rebuild! All custom styling or layout changes should be made in the <code>openring-in.html</code> file.</p> -<h2>Our "New" Build Script</h2> -<p>To simplify things, we are going to place our main commands in a single build script in the root directory of our Jekyll project. For my personal blog, I've named this file <code>build-site.sh</code>. I know - I'm extremely creative.</p> + +<h2 id="our-new-build-script">Our &#8220;New&#8221; Build Script</h2> + +<p>To simplify things, we are going to place our main commands in a single build script in the root directory of our Jekyll project. For my personal blog, I&#8217;ve named this file <code>build-site.sh</code>. I know - I&#8217;m extremely creative.</p> + <p>Place the following inside that file:</p> + <pre><code>openring \ - -s https://example.com/feed.xml \ - -s https://example.com/feed.xml \ - -s https://example.com/feed.xml \ - &lt; _includes/openring-in.html \ - &gt; _includes/openring-out.html + -s https:&#47;&#47;example.com&#47;feed.xml \ + -s https:&#47;&#47;example.com&#47;feed.xml \ + -s https:&#47;&#47;example.com&#47;feed.xml \ + &#60; _includes&#47;openring-in.html \ + &#62; _includes&#47;openring-out.html bundle exec jekyll build </code></pre> -<h2>Edit <code>_config.yml</code></h2> -<p>Next we need to make sure we exclude our new <code>build-site</code> script file, since we really don't need that pushed up to the main server:</p> -<pre><code># Includes / Excludes + +<h2 id="edit-">Edit <code>_config.yml</code></h2> + +<p>Next we need to make sure we exclude our new <code>build-site</code> script file, since we really don&#8217;t need that pushed up to the main server:</p> + +<pre><code># Includes &#47; Excludes exclude: - build-site.sh </code></pre> -<h2>Almost Done...</h2> -<p>Now you just need to decide where you want your <code>openring</code> feed outputs to render. For this example, we will place them at the bottom of every blog post inside the <code>_layouts/post.html</code> file, like so:</p> + +<h2 id="almost-done">Almost Done&#8230;</h2> + +<p>Now you just need to decide where you want your <code>openring</code> feed outputs to render. For this example, we will place them at the bottom of every blog post inside the <code>_layouts&#47;post.html</code> file, like so:</p> + <pre><code>{% raw %}{% include openring-out.html %}{% endraw %} </code></pre> -<h2>Build It &amp; They Will Come</h2> + +<h2 id="build-it-they-will-come">Build It &#38; They Will Come</h2> + <p>This next step is only for those using <a href="https://srht.site">SourceHut Pages</a> to build and host their websites. If you use a different platform (ie Netlify, Vercel, GitHub Pages) the concept should be similar but will most likely require more tweaking on your end. Just a fair warning.</p> -<p>I won't go into great detail about build script for SourceHut Pages, but feel free to take a look at my <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/.build.yml">very own build file for this website</a>. That <em>should</em> work out-of-the-box for most standard Jekyll websites. (Just be sure to edit with your own details!)</p> -<p><strong>That's it</strong>. You now have links to blogs you enjoy that will update with each build. Of course, the "latest" blog posts shown will become out-of-date if you don't blog (or at least re-build your website) on a regular basis. But for me, I see this as a good motivator to keep pushing out content!</p> + +<p>I won&#8217;t go into great detail about build script for SourceHut Pages, but feel free to take a look at my <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/.build.yml">very own build file for this website</a>. That <em>should</em> work out-of-the-box for most standard Jekyll websites. (Just be sure to edit with your own details!)</p> + +<p><strong>That&#8217;s it</strong>. You now have links to blogs you enjoy that will update with each build. Of course, the &#8220;latest&#8221; blog posts shown will become out-of-date if you don&#8217;t blog (or at least re-build your website) on a regular basis. But for me, I see this as a good motivator to keep pushing out content!</p> + <p>Happy sharing!</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> <li>Well, as dynamic as a static website can be!</li> </ol></content> - <link href="https://bt.ht/openring"/> - <id>https://bt.ht/openring</id> + <link href="https://btxx.org/openring"/> + <id>https://btxx.org/openring</id> <updated>2022-12-02T10:00:00Z</updated> <published>2022-12-02T10:00:00Z</published> </entry> <entry> <title>Open Source Typeface Pairings</title> - <content type="html"><h1>Open Source Typeface Pairings</h1> + <content type="html"><h1 id="open-source-typeface-pairings">Open Source Typeface Pairings</h1> + <p>2018-01-25</p> + <p>I always love finding new typeface pairings to use across my personal and client projects, but I find many suggested pairings come with a hefty price tag (rightly so - premium typefaces are normally always worth their cost).</p> -<p>So, I've curated this personal list of 5 exceptionally beautiful typeface pairings that will cost you absolutely <i>nothing</i>. Open source FTW.</p> -<h2>ET-Book &amp; Gill Sans</h2> -<p>Download: <a href="https://github.com/edwardtufte/et-book">ET Book</a>, <a href="https://www.wfonts.com/font/gill-sans-std">Gill Sans</a></p> -<p><figure> - <img src="/public/images/et-book-gill-sans.webp" alt="ET Book Gill Sans"> - <figcaption>ET-Book &amp; Gill Sans are based off the font pairings of my personal Jekyll theme: <a href="https://bradleytaunt.com/et-jekyll-theme/">ET-Jekyll Theme</a>.</figcaption> -</figure></p> -<h2>Playfair Display &amp; Roboto</h2> -<p>Download: <a href="https://fonts.google.com/specimen/Playfair+Display">Playfair Display</a>, <a href="https://fonts.google.com/specimen/Roboto">Roboto</a></p> -<p><figure> - <img src="/public/images/playfair-roboto.webp" alt="Playfair Display Roboto"> - <figcaption>Playfair Display &amp; Roboto I find work really well for microblogs or short essay format posts.</figcaption> -</figure></p> -<h2>Karma &amp; Open Sans</h2> -<p>Download: <a href="https://fonts.google.com/specimen/Karma">Karma</a>, <a href="https://fonts.google.com/specimen/Open+Sans">Open Sans</a></p> -<p><figure> - <img src="/public/images/karma-open-sans.webp" alt="Karma Open Sans"> - <figcaption>Karma &amp; Open Sans give readers a little more breathing room between characters. Good choice if trying to keep accessibility in mind.</figcaption> -</figure></p> -<h2>Libre Baskerville &amp; Oswald</h2> -<p>Download: <a href="https://fonts.google.com/specimen/Libre+Baskerville">Libre Baskerville</a>, <a href="https://fonts.google.com/specimen/Oswald">Oswald</a></p> -<p><figure> - <img src="/public/images/libre-oswald.webp" alt="Libre Baskerville Oswald"> - <figcaption>Libre Baskerville &amp; Oswald oozes character and takes inspiration from a more print-based medium.</figcaption> -</figure></p> -<h2>Fanwood &amp; League Spartan</h2> -<p>Download: <a href="https://www.theleagueofmoveabletype.com/fanwood">Fanwood</a>, <a href="https://www.theleagueofmoveabletype.com/league-spartan">League Spartan</a></p> -<p><figure> - <img src="/public/images/fanwood-league.webp" alt="Fanwood League Spartan"> - <figcaption>Fanwood &amp; League Spartan paired together allow the main content to be easily readable, while the headers instantly grab the user's attention.</figcaption> -</figure></p></content> - <link href="https://bt.ht/open-source-typeface-pairings"/> - <id>https://bt.ht/open-source-typeface-pairings</id> + +<p>So, I&#8217;ve curated this personal list of 5 exceptionally beautiful typeface pairings that will cost you absolutely nothing. Open source FTW.</p> + +<h2 id="et-book-gill-sans">ET-Book &#38; Gill Sans</h2> + +<p>Download: ET Book, Gill Sans</p> + +<h2 id="playfair-display-roboto">Playfair Display &#38; Roboto</h2> + +<p>Download: Playfair Display, Roboto</p> + +<h2 id="karma-open-sans">Karma &#38; Open Sans</h2> + +<p>Download: Karma, Open Sans</p> + +<h2 id="libre-baskerville-oswald">Libre Baskerville &#38; Oswald</h2> + +<p>Download: Libre Baskerville, Oswald</p> + +<h2 id="fanwood-league-spartan">Fanwood &#38; League Spartan</h2> + +<p>Download: Fanwood, League Spartan</p></content> + <link href="https://btxx.org/open-source-typeface-pairings"/> + <id>https://btxx.org/open-source-typeface-pairings</id> <updated>2018-01-25T10:00:00Z</updated> <published>2018-01-25T10:00:00Z</published> </entry> <entry> <title>My Coffee Maker Just Makes Coffee</title> - <content type="html"><h1>My Coffee Maker Just Makes Coffee</h1> + <content type="html"><h1 id="my-coffee-maker-just-makes-coffee">My Coffee Maker Just Makes Coffee</h1> + <p>2023-01-09</p> + <p><img src="/public/images/coffee-couple.svg" alt="Couple drinking cups of coffee" /></p> + <p>I had to replace my dual Keurig coffee maker <em>twice</em> over a period of five months. This occurred a year ago and these are my findings.</p> -<h2>Built to Fail?</h2> -<p>I followed the manufactor's suggested cleaning schedule and took care of the appliances. My initial conclusion was that the product's design wasn't thought-out well. "It's built to fail!" I said to my wife the morning of the <em>second</em> machine's failure. Another product replaced under warranty, while the broken one's tossed aside. More e-waste because why not?</p> -<p>But after some further reflection, I came to realize the "poor design" was a symptom of a greater cause:</p> + +<h2 id="built-to-fail">Built to Fail?</h2> + +<p>I followed the manufactor&#8217;s suggested cleaning schedule and took care of the appliances. My initial conclusion was that the product&#8217;s design wasn&#8217;t thought-out well. &#8220;It&#8217;s built to fail!&#8221; I said to my wife the morning of the <em>second</em> machine&#8217;s failure. Another product replaced under warranty, while the broken one&#8217;s tossed aside. More e-waste because why not?</p> + +<p>But after some further reflection, I came to realize the &#8220;poor design&#8221; was a symptom of a greater cause:</p> + <p><strong>The product tries to do too much</strong>.</p> -<p>I'm beating a dead horse by referencing <a href="https://suckless.org">suckless</a> software again, but that core philosophy applies here too. Both digital and industrial design suffer from bloat. Far too often I witness fellow designers over-engineer customer requests. Or they add excessive bloat to new product features. It's almost a rarity these days to find designers who tackle work as <em>single items</em>. Everything expands. Everything needs to do one little extra "cool" thing. Nothing is ever <em>taken away</em>.</p> -<p>I'm sure the designers meant well with the creation of this dual coffee maker. It's interesting to combine both a standard 12-cup percolator and "pod-based" serving options. In theory it sounds quite handy. One appliance that tackles two use-cases. Think of the counter space you'll save! </p> + +<p>I&#8217;m beating a dead horse by referencing <a href="https://suckless.org">suckless</a> software again, but that core philosophy applies here too. Both digital and industrial design suffer from bloat. Far too often I witness fellow designers over-engineer customer requests. Or they add excessive bloat to new product features. It&#8217;s almost a rarity these days to find designers who tackle work as <em>single items</em>. Everything expands. Everything needs to do one little extra &#8220;cool&#8221; thing. Nothing is ever <em>taken away</em>.</p> + +<p>I&#8217;m sure the designers meant well with the creation of this dual coffee maker. It&#8217;s interesting to combine both a standard 12-cup percolator and &#8220;pod-based&#8221; serving options. In theory it sounds quite handy. One appliance that tackles two use-cases. Think of the counter space you&#8217;ll save! </p> + <p>Unfortunately, in practice, it fails.</p> -<h2>Product Decline</h2> -<p>I've felt product quality decline in both household appliances and software. Companies no longer seem content with doing <em>one thing well</em>. Everyone needs to reach out into many verticals. Everyone copies their competitors.The need to "grow" their existing features. Adding things that no one asked for. Products are getting <em>slower</em> and losing focus.</p> -<p>People tend to place all that blame on top-level management or developers. They do deserve some blame - but not all. Designers cause a lot of these issues on their own and it's easy to understand why.</p> -<p>The design field drops new designers into a <em>world of bloat</em>. They don't stand a chance. The initial programs introduced to them are behemoth, proprietary pieces of garbage. No other options are available. No one is making strides in this field of "design tool software" because it's a massive uphill battle. Those that <em>try</em>, get <a href="https://www.theverge.com/2022/9/15/23354532/adobe-figma-acquisition-20-billion-official">snatched up by existing platforms</a>. Designers don't have the luxury of "choice" as much as developers do (within reason). It's a very locked-down industry.</p> -<p>So of course designers will carry this mentality into their own work. It's all they have known. "X and Y companies designed their <code>insert-feature-here</code> with all these <em>extras</em>, so we'll do the same". Everything is <a href="https://invidious.snopyta.org/watch?v=dC1yHLp9bWA">a copy of a copy of a copy</a>.</p> -<p>The only advice I can give to designers is this: try not to add to the problem. I'm not asking you to move mountains. But consider working somewhere else if your career only adds more bloat to the world. (Easier said than done, I know). Or keep doing what you're doing. What do I know - I'm only some guy who rambles on the web. -</p> -<h2>Back to the Coffee Maker</h2> -<p>So the Keurig is gone. Trashed. The company doesn't want the product back, they tell you to scrap it. "We'll send you a new one for free". Such a waste.</p> -<p>Instead, I snagged the cheapest and most basic coffee maker I could find. It cost me $12. It has no clock, no programming options, no base settings or cleaning functions. Hell, there aren't even level numbers on the water reservoir tank. </p> + +<h2 id="product-decline">Product Decline</h2> + +<p>I&#8217;ve felt product quality decline in both household appliances and software. Companies no longer seem content with doing <em>one thing well</em>. Everyone needs to reach out into many verticals. Everyone copies their competitors.The need to &#8220;grow&#8221; their existing features. Adding things that no one asked for. Products are getting <em>slower</em> and losing focus.</p> + +<p>People tend to place all that blame on top-level management or developers. They do deserve some blame - but not all. Designers cause a lot of these issues on their own and it&#8217;s easy to understand why.</p> + +<p>The design field drops new designers into a <em>world of bloat</em>. They don&#8217;t stand a chance. The initial programs introduced to them are behemoth, proprietary pieces of garbage. No other options are available. No one is making strides in this field of &#8220;design tool software&#8221; because it&#8217;s a massive uphill battle. Those that <em>try</em>, get <a href="https://www.theverge.com/2022/9/15/23354532/adobe-figma-acquisition-20-billion-official">snatched up by existing platforms</a>. Designers don&#8217;t have the luxury of &#8220;choice&#8221; as much as developers do (within reason). It&#8217;s a very locked-down industry.</p> + +<p>So of course designers will carry this mentality into their own work. It&#8217;s all they have known. &#8220;X and Y companies designed their <code>insert-feature-here</code> with all these <em>extras</em>, so we&#8217;ll do the same&#8221;. Everything is <a href="https://invidious.snopyta.org/watch?v=dC1yHLp9bWA">a copy of a copy of a copy</a>.</p> + +<p>The only advice I can give to designers is this: try not to add to the problem. I&#8217;m not asking you to move mountains. But consider working somewhere else if your career only adds more bloat to the world. (Easier said than done, I know). Or keep doing what you&#8217;re doing. What do I know - I&#8217;m only some guy who rambles on the web.</p> + +<h2 id="back-to-the-coffee-maker">Back to the Coffee Maker</h2> + +<p>So the Keurig is gone. Trashed. The company doesn&#8217;t want the product back, they tell you to scrap it. &#8220;We&#8217;ll send you a new one for free&#8221;. Such a waste.</p> + +<p>Instead, I snagged the cheapest and most basic coffee maker I could find. It cost me $12. It has no clock, no programming options, no base settings or cleaning functions. Hell, there aren&#8217;t even level numbers on the water reservoir tank. </p> + <p>You add your scoops of coffee grounds, along with desired amount of water. Then you switch on the (only) button at the side of the machine. After a handful of minutes, you have coffee.</p> -<p>And it's been running <em>perfect</em> for over 8 months now. I clean it every so often by brewing with a small mixture of vinegar and water. That's it. No need for "specialty cleaners" that cost almost as much as the machine itself. The points of failure get reduced as well, since the machine is bare-bones. Nothing can break when there is nothing to break...</p> -<h2>"Brewing" Software</h2> -<p>At least, for me, I plan to only design what <em>needs to be</em>. If someone asks for a "coffee", they'll get a cup of hot, black coffee and nothing else.</p></content> - <link href="https://bt.ht/one-thing"/> - <id>https://bt.ht/one-thing</id> + +<p>And it&#8217;s been running <em>perfect</em> for over 8 months now. I clean it every so often by brewing with a small mixture of vinegar and water. That&#8217;s it. No need for &#8220;specialty cleaners&#8221; that cost almost as much as the machine itself. The points of failure get reduced as well, since the machine is bare-bones. Nothing can break when there is nothing to break&#8230;</p> + +<h2 id="brewing-software">&#8220;Brewing&#8221; Software</h2> + +<p>At least, for me, I plan to only design what <em>needs to be</em>. If someone asks for a &#8220;coffee&#8221;, they&#8217;ll get a cup of hot, black coffee and nothing else.</p></content> + <link href="https://btxx.org/one-thing"/> + <id>https://btxx.org/one-thing</id> <updated>2023-01-09T10:00:00Z</updated> <published>2023-01-09T10:00:00Z</published> </entry> <entry> <title>Billing for One CSS Change</title> - <content type="html"><h1>Billing for One CSS Change</h1> + <content type="html"><h1 id="billing-for-one-css-change">Billing for One CSS Change</h1> + <p>2019-11-29</p> -<p>Every second you spend working as a designer should be billed back to the client. A simple button color change? Bill them. Additional links added to an existing menu? Send that invoice over. Some basic typeface changes? Don't do it for free.</p> + +<p>Every second you spend working as a designer should be billed back to the client. A simple button color change? Bill them. Additional links added to an existing menu? Send that invoice over. Some basic typeface changes? Don&#8217;t do it for free.</p> + <p>You need to be charging for <em>all</em> design work, regardless of difficulty or time required.</p> -<p>This concept might seem extremely obvious to more senior level workers but I have seen a good amount of junior devs make the mistake of "working for experience" or better yet "strengthening the client relationship". Early on in my career I was just as guilty of doing this kind of thing. It was and still is a very foolish practice.</p> -<h2>Do you really bill for <em>one</em> CSS change?</h2> -<p>Absolutely. From the client's perspective it may seem like they are being billed for one CSS change and 30 seconds of a designer's time. In reality, they are paying for the designer's years of experience to be able to solve that problem in <em>only</em> 30 seconds.</p> -<p>Would the client be happier with a significantly less qualified designer charging the same amount of money but taking 3 <em>hours</em> to complete the task? In the end, what's the difference?</p> -<blockquote><p>If it is a simple change that they believe should cost nothing, then why aren't they doing it themselves?</p> + +<p>This concept might seem extremely obvious to more senior level workers but I have seen a good amount of junior devs make the mistake of &#8220;working for experience&#8221; or better yet &#8220;strengthening the client relationship&#8221;. Early on in my career I was just as guilty of doing this kind of thing. It was and still is a very foolish practice.</p> + +<h2 id="do-you-really-bill-for-one-css-change">Do you really bill for <em>one</em> CSS change?</h2> + +<p>Absolutely. From the client&#8217;s perspective it may seem like they are being billed for one CSS change and 30 seconds of a designer&#8217;s time. In reality, they are paying for the designer&#8217;s years of experience to be able to solve that problem in <em>only</em> 30 seconds.</p> + +<p>Would the client be happier with a significantly less qualified designer charging the same amount of money but taking 3 <em>hours</em> to complete the task? In the end, what&#8217;s the difference?</p> + +<blockquote> +<p>If it is a simple change that they believe should cost nothing, then why aren&#8217;t they doing it themselves?</p> </blockquote> + <p>We as developers and designers work in an odd industry. A lot of people (read clients) outside of our bubble tend to think they have a much better understanding of the work we do. Because of this, they tend to preface work requests with phrases like:</p> + <ul> -<li>"This should be a simple change"</li> -<li>"This shouldn't take more than a couple of minutes"</li> -<li>"This seems like an easy fix"</li> -</ul> -<p>Most of the time these comments are harmless, but other times they are a subtle way of downplaying your skill and experience required to complete these work items. That skill and experience shouldn't ever come free. It makes you wonder if these same people expect free work from trades-people (electricians, plumbers, etc) when they need what they think is a "simple" fix in their house.</p> -<p>Do you think workers in <em>most</em> other industries travel out to someone's home and fix "small" issues for free? Hell no.</p> -<p>So why are developers and designers doing work for free? I truly don't know - but it needs to stop.</p> -<h2>A simple but useful system</h2> -<p>You should live by the rule that every <em>second</em> you spend working for someone else is billable. I don't mean that you should literally bill per second, but instead round to nearest estimated time slot (whether you are billing hourly, daily, sprint-based or per project). This ensures that your efforts are paid for and that the client will begin to truly value your time. Doing this from the get-go will save you headaches in the future.</p> -<p>I'm sorry if this comes off as preachy, but I'm just trying to inspire designers to value their work more. Don't sell yourself short - your talent is valuable and shouldn't be taken for granted.</p></content> - <link href="https://bt.ht/one-css-property"/> - <id>https://bt.ht/one-css-property</id> +<li>&#8220;This should be a simple change&#8221;</li> +<li>&#8220;This shouldn&#8217;t take more than a couple of minutes&#8221;</li> +<li>&#8220;This seems like an easy fix&#8221;</li> +</ul> + +<p>Most of the time these comments are harmless, but other times they are a subtle way of downplaying your skill and experience required to complete these work items. That skill and experience shouldn&#8217;t ever come free. It makes you wonder if these same people expect free work from trades-people (electricians, plumbers, etc) when they need what they think is a &#8220;simple&#8221; fix in their house.</p> + +<p>Do you think workers in <em>most</em> other industries travel out to someone&#8217;s home and fix &#8220;small&#8221; issues for free? Hell no.</p> + +<p>So why are developers and designers doing work for free? I truly don&#8217;t know - but it needs to stop.</p> + +<h2 id="a-simple-but-useful-system">A simple but useful system</h2> + +<p>You should live by the rule that every <em>second</em> you spend working for someone else is billable. I don&#8217;t mean that you should literally bill per second, but instead round to nearest estimated time slot (whether you are billing hourly, daily, sprint-based or per project). This ensures that your efforts are paid for and that the client will begin to truly value your time. Doing this from the get-go will save you headaches in the future.</p> + +<p>I&#8217;m sorry if this comes off as preachy, but I&#8217;m just trying to inspire designers to value their work more. Don&#8217;t sell yourself short - your talent is valuable and shouldn&#8217;t be taken for granted.</p></content> + <link href="https://btxx.org/one-css-property"/> + <id>https://btxx.org/one-css-property</id> <updated>2019-11-29T10:00:00Z</updated> <published>2019-11-29T10:00:00Z</published> </entry> <entry> <title>Obvious Javascript 'Injection' Fallback</title> - <content type="html"><h1>Obvious Javascript 'Injection' Fallback</h1> + <content type="html"><h1 id="obvious-javascript-injection-fallback">Obvious Javascript &#8216;Injection&#8217; Fallback</h1> + <p>2020-12-04</p> -<p>Sometimes websites and web apps might require content to be "injected" via Javascript. I should mention that I am strongly against this practice - but often this kind of thing is out of one's hands. So, the least I can do is setup these "injections" to have proper fallbacks for users who disable JS. You would be surprised how many developers build <em>empty</em> HTML elements with the assumption they will be filled via Javascript.</p> -<h2>Our Hypothetical Project</h2> -<p>Let's pretend that we have a total tally that pulls in the number of current users using our fake SaaS app. We would do something like this:</p> -<h3>HTML</h3> + +<p>Sometimes websites and web apps might require content to be &#8220;injected&#8221; via Javascript. I should mention that I am strongly against this practice - but often this kind of thing is out of one&#8217;s hands. So, the least I can do is setup these &#8220;injections&#8221; to have proper fallbacks for users who disable JS. You would be surprised how many developers build <em>empty</em> HTML elements with the assumption they will be filled via Javascript.</p> + +<h2 id="our-hypothetical-project">Our Hypothetical Project</h2> + +<p>Let&#8217;s pretend that we have a total tally that pulls in the number of current users using our fake SaaS app. We would do something like this:</p> + +<h3 id="html">HTML</h3> + <p>Here we create an empty <code>h2</code> tag that will update with the current number of users via js:</p> -<pre><code>&lt;main&gt; - &lt;h2 class=&quot;total-tally&quot;&gt;&lt;/h2&gt; -&lt;/main&gt; -</code></pre> -<h3>Javascript</h3> -<p>You'll have to use your imagination here and assume that the <code>totalTally</code> variable pulls in the numbers dynamically via API:</p> -<pre><code>var totalTally = &quot;273,677&quot; /* This would pull something dynamically in prod */ -document.getElementsByClassName(&quot;total-tally&quot;)[0].innerHTML=totalTally; -</code></pre> -<h2>The Problem</h2> -<p>The big issue we have now occurs when a user visits this page without JS enabled. The <code>h2</code> tag will remain empty and they won't see anything. I know this seems like a very avoidable issue, but you would be surprised how often it actually happens on the web.</p> -<h2>The (overly simple) Solution</h2> + +<pre><code>&#60;main&#62; + &#60;h2 class="total-tally"&#62;&#60;&#47;h2&#62; +&#60;&#47;main&#62; +</code></pre> + +<h3 id="javascript">Javascript</h3> + +<p>You&#8217;ll have to use your imagination here and assume that the <code>totalTally</code> variable pulls in the numbers dynamically via API:</p> + +<pre><code>var totalTally = "273,677" &#47;* This would pull something dynamically in prod *&#47; +document.getElementsByClassName("total-tally")[0].innerHTML=totalTally; +</code></pre> + +<h2 id="the-problem">The Problem</h2> + +<p>The big issue we have now occurs when a user visits this page without JS enabled. The <code>h2</code> tag will remain empty and they won&#8217;t see anything. I know this seems like a very avoidable issue, but you would be surprised how often it actually happens on the web.</p> + +<h2 id="the-overly-simple-solution">The (overly simple) Solution</h2> + <p>The easiest way to avoid these types of empty tags - add static content. I know - mind blowing, right?</p> -<h3>HTML (updated)</h3> -<pre><code>&lt;main&gt; - &lt;h2 class=&quot;total-tally&quot;&gt;200,000+&lt;/h2&gt; -&lt;/main&gt; -</code></pre> -<p>You might be reading this and saying to yourself, "Wow! Thanks Captain Obvious!" and that's a fair reaction. This is an <em>obvious</em> demo on purpose. If even one single reader learns to avoid leaving empty HTML tags that are solely dependent on Javascript injection, then I'd say this demo was a huge success.</p> -<p>Rule of thumb: don't make assumption about your users. Play it safe.</p></content> - <link href="https://bt.ht/obvious-js-injection-fallback"/> - <id>https://bt.ht/obvious-js-injection-fallback</id> + +<h3 id="html-updated">HTML (updated)</h3> + +<pre><code>&#60;main&#62; + &#60;h2 class="total-tally"&#62;200,000+&#60;&#47;h2&#62; +&#60;&#47;main&#62; +</code></pre> + +<p>You might be reading this and saying to yourself, &#8220;Wow! Thanks Captain Obvious!&#8221; and that&#8217;s a fair reaction. This is an <em>obvious</em> demo on purpose. If even one single reader learns to avoid leaving empty HTML tags that are solely dependent on Javascript injection, then I&#8217;d say this demo was a huge success.</p> + +<p>Rule of thumb: don&#8217;t make assumption about your users. Play it safe.</p></content> + <link href="https://btxx.org/obvious-js-injection-fallback"/> + <id>https://btxx.org/obvious-js-injection-fallback</id> <updated>2020-12-04T10:00:00Z</updated> <published>2020-12-04T10:00:00Z</published> </entry> <entry> <title>RE: Creating a Simple HTML/CSS Notice Box</title> - <content type="html"><h1>RE: Creating a Simple HTML/CSS Notice Box</h1> + <content type="html"><h1 id="re-creating-a-simple-htmlcss-notice-box">RE: Creating a Simple HTML&#47;CSS Notice Box</h1> + <p>2022-09-22</p> -<p>I recently read Kev Quirk's post, <a href="https://kevquirk.com/how-to-create-a-simple-html-css-notice-box/">How to Create a Simple HTML/CSS Notice Box</a> and loved the simplicity of it. I'm a sucker for using pseudo elements in creative ways but still managing to make them useful. Of course, this got me thinking as to whether or not the same style of box could be achieved <em>without</em> the use of static, pseudo elements...</p> -<h2>Bad Semantics</h2> + +<p>I recently read Kev Quirk&#8217;s post, <a href="https://kevquirk.com/how-to-create-a-simple-html-css-notice-box/">How to Create a Simple HTML&#47;CSS Notice Box</a> and loved the simplicity of it. I&#8217;m a sucker for using pseudo elements in creative ways but still managing to make them useful. Of course, this got me thinking as to whether or not the same style of box could be achieved <em>without</em> the use of static, pseudo elements&#8230;</p> + +<h2 id="bad-semantics">Bad Semantics</h2> + <p>I need to make it clear right away: <strong>these implementations are not semantic</strong>. They are valid HTML, but I am technically using these tags incorrectly. <em>You have been warned!</em></p> -<h2>Setting Fieldsets</h2> + +<h2 id="setting-fieldsets">Setting Fieldsets</h2> + <p>The first approach is to wrap everything inside HTML <code>fieldset</code> tags:</p> -<pre><code>&lt;fieldset&gt; - &lt;legend&gt;Notice&lt;/legend&gt; - &lt;p&gt;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam nihil velit vitae sed beatae earum assumenda deleniti, inventore repellendus, sequi distinctio delectus porro explicabo quidem hic quo quasi voluptas temporibus.&lt;/p&gt; -&lt;/fieldset&gt; + +<pre><code>&#60;fieldset&#62; + &#60;legend&#62;Notice&#60;&#47;legend&#62; + &#60;p&#62;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam nihil velit vitae sed beatae earum assumenda deleniti, inventore repellendus, sequi distinctio delectus porro explicabo quidem hic quo quasi voluptas temporibus.&#60;&#47;p&#62; +&#60;&#47;fieldset&#62; </code></pre> -<p>Then you can include minor styling to closely match the design of Kev's notice box:</p> + +<p>Then you can include minor styling to closely match the design of Kev&#8217;s notice box:</p> + <pre><code>fieldset { border: 3px solid; font-family: sans-serif; @@ -3746,14 +4941,19 @@ fieldset legend { text-transform: uppercase; } </code></pre> -<h2>The Devil is in the Details</h2> + +<h2 id="the-devil-is-in-the-details">The Devil is in the Details</h2> + <p>The other option is utilizing the HTML <code>details</code> tag:</p> -<pre><code>&lt;details open&gt; - &lt;summary&gt;Notice&lt;/summary&gt; - &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda sequi esse reprehenderit facilis aperiam labore optio minus doloremque nesciunt! Voluptatem esse tempore asperiores recusandae rerum facere, reiciendis officia repudiandae similique?&lt;/p&gt; -&lt;/details&gt; + +<pre><code>&#60;details open&#62; + &#60;summary&#62;Notice&#60;&#47;summary&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda sequi esse reprehenderit facilis aperiam labore optio minus doloremque nesciunt! Voluptatem esse tempore asperiores recusandae rerum facere, reiciendis officia repudiandae similique?&#60;&#47;p&#62; +&#60;&#47;details&#62; </code></pre> -<p>You'll obviously want to include the <code>open</code> attribute to avoid users needing to toggle the content manually (unless that is your desired UX). Then add similar styling options to match the <code>fieldset</code> example:</p> + +<p>You&#8217;ll obviously want to include the <code>open</code> attribute to avoid users needing to toggle the content manually (unless that is your desired UX). Then add similar styling options to match the <code>fieldset</code> example:</p> + <pre><code>details { border: 3px solid; font-family: sans-serif; @@ -3769,238 +4969,321 @@ details summary { text-transform: uppercase; } </code></pre> -<p>Important to note: you can hide the default "arrow toggle" on <code>summary</code> elements by including the following:</p> -<pre><code>details &gt; summary { + +<p>Important to note: you can hide the default &#8220;arrow toggle&#8221; on <code>summary</code> elements by including the following:</p> + +<pre><code>details &#62; summary { list-style: none; } -details &gt; summary::-webkit-details-marker { +details &#62; summary::-webkit-details-marker { display: none; } </code></pre> -<h2>Seeing is Believing</h2> -<p>I've put together two versions of each implementation (one custom designed and one using default browser styling). You can check them out in the CodePen below:</p> + +<h2 id="seeing-is-believing">Seeing is Believing</h2> + +<p>I&#8217;ve put together two versions of each implementation (one custom designed and one using default browser styling). You can check them out in the CodePen below:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/jOxLdQP">Live CodePen Example</a></p></content> - <link href="https://bt.ht/notice"/> - <id>https://bt.ht/notice</id> + <link href="https://btxx.org/notice"/> + <id>https://btxx.org/notice</id> <updated>2022-09-22T10:00:00Z</updated> <published>2022-09-22T10:00:00Z</published> </entry> <entry> <title>News Websites Are Dumpster Fires</title> - <content type="html"><h1>News Websites Are Dumpster Fires</h1> + <content type="html"><h1 id="news-websites-are-dumpster-fires">News Websites Are Dumpster Fires</h1> + <p>2019-05-29</p> + <p>Online news outlets are a dying breed and many users have decided to consume information elsewhere. Why? Because the news industry has become a cesspool of anti-consumer and blackhat practices that has eroded trust for the sake of money.</p> -<h2>What news sites get wrong</h2> + +<h2 id="what-news-sites-get-wrong">What news sites get wrong</h2> + <p>I could write up an entire essay about all the shady practices that <em>most</em> news sites are guilty of, but here are just a few top level issues:</p> + <ul> <li>Clickbait headings with misleading information</li> <li>Disabling the user from reading if ad-block is present</li> <li>Tracking the user with 3rd party scripts</li> <li>Taking massive performance hits (specifically on mobile due to huge JavaScript blocks)</li> <li>Pop-up ads</li> -<li>Fixed headers or footers which leads to harder readability / accidental element interactions</li> +<li>Fixed headers or footers which leads to harder readability &#47; accidental element interactions</li> </ul> -<h2>But they need ad revenue!</h2> -<p>If your business is solely dependent on tracking scripts, tricking users with clickbait titles and using archaic ads - then you're destined to fail regardless. These practices create an unsafe and unhealthy web for everyday users - not to mention most browsers have announced that future updates <a href="https://support.mozilla.org/en-US/kb/content-blocking">will be blocking ads by default</a>. <em>News outlets need to adapt or die</em>.</p> -<h2>What's the solution?</h2> -<p>I don't have a <em>fix all</em> band-aid to replace current revenue streams for news websites. I'm sure someone much smarter than I can come up with better ideas, but just off the top of my head:</p> + +<h2 id="but-they-need-ad-revenue">But they need ad revenue!</h2> + +<p>If your business is solely dependent on tracking scripts, tricking users with clickbait titles and using archaic ads - then you&#8217;re destined to fail regardless. These practices create an unsafe and unhealthy web for everyday users - not to mention most browsers have announced that future updates <a href="https://support.mozilla.org/en-US/kb/content-blocking">will be blocking ads by default</a>. <em>News outlets need to adapt or die</em>.</p> + +<h2 id="whats-the-solution">What&#8217;s the solution?</h2> + +<p>I don&#8217;t have a <em>fix all</em> band-aid to replace current revenue streams for news websites. I&#8217;m sure someone much smarter than I can come up with better ideas, but just off the top of my head:</p> + <ul> -<li>Switch over to a monthly subscription plan (if no one pays for it maybe you weren't as useful of a source as you thought)</li> +<li>Switch over to a monthly subscription plan (if no one pays for it maybe you weren&#8217;t as useful of a source as you thought)</li> <li>Partner with brands to create sponsored articles (without ruining the user experience of course)</li> <li>Place a larger emphasis on user donations or promotions</li> </ul> -<h2>The News Shouldn't be Spam</h2> + +<h2 id="the-news-shouldnt-be-spam">The News Shouldn&#8217;t be Spam</h2> + <p>Most traffic flowing into news websites are there for one thing: <em>the content</em>. News outlets should not be spamming their main revenue supply (<strong>the users</strong>) or misleading people with false information.</p> -<p>If you're a regular consumer of news and you happen to run across a platform that is guilty of any of these practices, shoot them an email explaining why you won't be returning to their website (unless they change their ways). These anti-consumer practices will only stop when these organizations start losing money.</p></content> - <link href="https://bt.ht/news-websites-are-dumpster-fires"/> - <id>https://bt.ht/news-websites-are-dumpster-fires</id> + +<p>If you&#8217;re a regular consumer of news and you happen to run across a platform that is guilty of any of these practices, shoot them an email explaining why you won&#8217;t be returning to their website (unless they change their ways). These anti-consumer practices will only stop when these organizations start losing money.</p></content> + <link href="https://btxx.org/news-websites-are-dumpster-fires"/> + <id>https://btxx.org/news-websites-are-dumpster-fires</id> <updated>2019-05-29T10:00:00Z</updated> <published>2019-05-29T10:00:00Z</published> </entry> <entry> <title>Using Netlify for Dynamic URL Redirects</title> - <content type="html"><h1>Using Netlify for Dynamic URL Redirects</h1> + <content type="html"><h1 id="using-netlify-for-dynamic-url-redirects">Using Netlify for Dynamic URL Redirects</h1> + <p>2021-12-03</p> -<p>With the <a href="/minor-website-changes/">recent domain switch</a> that took place on this website, I needed to have a dependable setup to forward my old domain URLs to the new one. While using something like "URL forwarding" through your domain provider could work, it doesn't natively support <em>dynamic</em> linking. Let me explain using a basic example:</p> + +<p>With the <a href="/minor-website-changes/">recent domain switch</a> that took place on this website, I needed to have a dependable setup to forward my old domain URLs to the new one. While using something like &#8220;URL forwarding&#8221; through your domain provider could work, it doesn&#8217;t natively support <em>dynamic</em> linking. Let me explain using a basic example:</p> + <ul> -<li>A user clicks on a link that targets a post on your old domain:<br> <code>olddomain.com/random-post</code></li> -<li>You want that link to forward using the same permalink structure:<br> <code>newdomain.com/random-post</code></li> -<li>"URL forwarding" through your domain provider <strong>does not</strong> support this</li> +<li>A user clicks on a link that targets a post on your old domain: <code>olddomain.com&#47;random-post</code></li> +<li>You want that link to forward using the same permalink structure: <code>newdomain.com&#47;random-post</code></li> +<li>&#8220;URL forwarding&#8221; through your domain provider <strong>does not</strong> support this</li> </ul> -<p>Simple stuff. So, let's breakdown how to easily set this up on Netlify <em>for free</em>.</p> -<h2>Setting Up Netlify</h2> + +<p>Simple stuff. So, let&#8217;s breakdown how to easily set this up on Netlify <em>for free</em>.</p> + +<h2 id="setting-up-netlify">Setting Up Netlify</h2> + <ul> -<li>Create an account (or login to an existing one) and setup a new site[^1]</li> -<li>Change your "old" domain name nameservers to match Netlify's (normally done through your domain register) +<li><p>Create an account (or login to an existing one) and setup a new site[^1]</p></li> +<li><p>Change your &#8220;old&#8221; domain name nameservers to match Netlify&#8217;s (normally done through your domain register) + <ul> <li><code>dns1.p03.nsone.net</code></li> <li><code>dns2.p03.nsone.net</code></li> <li><code>dns3.p03.nsone.net</code></li> <li><code>dns4.p03.nsone.net</code></li> +</ul></p></li> +<li><p>Back in Netlify: under <strong>Domain Settings</strong> you need to add your custom &#8220;old&#8221; domain under the <strong>Custom domains</strong> section under <strong>Domain management</strong></p></li> +<li><p>Lastly, add the following content inside a <code>_redirects</code> file (no extension) to your website content&#47;build (changing to your own domains, of course)</p> + +<p><a href="https://olddomain.com/*">https:&#47;&#47;olddomain.com&#47;*</a> <a href="https://newdomain.com/:splat">https:&#47;&#47;newdomain.com&#47;:splat</a> 301!</p></li> </ul> -</li> -<li>Back in Netlify: under <strong>Domain Settings</strong> you need to add your custom "old" domain under the <strong>Custom domains</strong> section under <strong>Domain management</strong></li> -<li>Lastly, add the following content inside a <code>_redirects</code> file (no extension) to your website content/build (changing to your own domains, of course)</li> -</ul> -<pre><code>https://olddomain.com/* https://newdomain.com/:splat 301! -</code></pre> -<p>That's it! Now Netlify will dynamically forward all your pre-existing URLs from your old domain to the new one. No pesky <code>.htaccess</code> files or running your own basic web server(s)!</p> + +<p>That&#8217;s it! Now Netlify will dynamically forward all your pre-existing URLs from your old domain to the new one. No pesky <code>.htaccess</code> files or running your own basic web server(s)!</p> + <p>Hopefully this helps others trying to dynamically redirect their domains without the headache.</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>I normally set this up through Github / git hosting</li> +<li>I normally set this up through Github &#47; git hosting</li> </ol></content> - <link href="https://bt.ht/netlify-urls"/> - <id>https://bt.ht/netlify-urls</id> + <link href="https://btxx.org/netlify-urls"/> + <id>https://btxx.org/netlify-urls</id> <updated>2021-12-03T10:00:00Z</updated> <published>2021-12-03T10:00:00Z</published> </entry> <entry> <title>CSS: Indenting Text</title> - <content type="html"><h1>CSS: Indenting Text</h1> + <content type="html"><h1 id="css-indenting-text">CSS: Indenting Text</h1> + <p>2019-04-05</p> -<p>A lot of developers tend to do the bare minimum when it comes to implementing proper website typography. This isn't an insult - I'm happy that typography is given any thought at all during development, I just believe more can always be done to improve upon it.</p> -<p>In today's <em>TypeTip</em> we're going to play around with the <code>text-indent</code> property, look into when it's best to use it and how to implement it properly.</p> -<h2>The property and browser support</h2> + +<p>A lot of developers tend to do the bare minimum when it comes to implementing proper website typography. This isn&#8217;t an insult - I&#8217;m happy that typography is given any thought at all during development, I just believe more can always be done to improve upon it.</p> + +<p>In today&#8217;s <em>TypeTip</em> we&#8217;re going to play around with the <code>text-indent</code> property, look into when it&#8217;s best to use it and how to implement it properly.</p> + +<h2 id="the-property-and-browser-support">The property and browser support</h2> + <p>Browser support is actually pretty great for such a regularly over-looked CSS property. All major desktop and mobile browsers support it:</p> -<p><figure> - <img src="/public/images/text-indent-compatibility.webp" alt="Text indent browser compatibility"> - <figcaption>Full support across all browsers.</figcaption> -</figure></p> -<p>Now that doesn't mean you should just slap this property on all your type elements and call it a day - there are specific use cases for <code>text-indent</code> and some basic rules to follow:</p> -<h2>Use Cases</h2> + +<p>Now that doesn&#8217;t mean you should just slap this property on all your type elements and call it a day - there are specific use cases for <code>text-indent</code> and some basic rules to follow:</p> + +<h2 id="use-cases">Use Cases</h2> + <ol> <li>Increasing readability of large text blocks that would otherwise overwhelm the reader</li> <li>Replicating book or report typography layouts</li> </ol> -<h2>Basic Rules</h2> + +<h2 id="basic-rules">Basic Rules</h2> + <ol> <li>Best to set this property on inner type children only - meaning items like <code>p</code> or <code>blockquotes</code> instead of main headings</li> -<li>When used on paragraph tags it's best to target only <code>p</code> elements that directly follow a sibling tag (see "The CSS" below)</li> +<li>When used on paragraph tags it&#8217;s best to target only <code>p</code> elements that directly follow a sibling tag (see &#8220;The CSS&#8221; below)</li> </ol> -<h2>The CSS</h2> + +<h2 id="the-css">The CSS</h2> + <p>Adding the property is extremely trivial, all you need is the following:</p> -<pre><code>/* Best practice for paragraphs */ + +<pre><code>&#47;* Best practice for paragraphs *&#47; p + p { - text-indent: 1rem; /* whatever you want */ + text-indent: 1rem; &#47;* whatever you want *&#47; } </code></pre> -<h2>Let's see it in action</h2> + +<h2 id="lets-see-it-in-action">Let&#8217;s see it in action</h2> + <p><a href="https://codepen.io/bradleytaunt/pen/OGXLEd/">Live CodePen Example</a></p></content> - <link href="https://bt.ht/ndenting-text-with-css"/> - <id>https://bt.ht/ndenting-text-with-css</id> + <link href="https://btxx.org/ndenting-text-with-css"/> + <id>https://btxx.org/ndenting-text-with-css</id> <updated>2019-04-05T10:00:00Z</updated> <published>2019-04-05T10:00:00Z</published> </entry> <entry> <title>My Static Blog Publishing Setup and an Apology to RSS Subscribers</title> - <content type="html"><h1>My Static Blog Publishing Setup and an Apology to RSS Subscribers</h1> + <content type="html"><h1 id="my-static-blog-publishing-setup-and-an-apology-to-rss-subscribers">My Static Blog Publishing Setup and an Apology to RSS Subscribers</h1> + <p>2022-03-21</p> -<p>In case you missed it, this website is now generated with pure HTML &amp; CSS. Although, generated isn't the proper way to describe it anymore. <em>Written</em> is a better description.</p> -<p>No more Markdown files. No more build scripts. No more Jekyll. Clean, simple, static HTML &amp; CSS is my "CMS". More on that in a moment. First, I must apologize.</p> -<h2>I'm Sorry Dear RSS Subscribers</h2> + +<p>In case you missed it, this website is now generated with pure HTML &#38; CSS. Although, generated isn&#8217;t the proper way to describe it anymore. <em>Written</em> is a better description.</p> + +<p>No more Markdown files. No more build scripts. No more Jekyll. Clean, simple, static HTML &#38; CSS is my &#8220;CMS&#8221;. More on that in a moment. First, I must apologize.</p> + +<h2 id="im-sorry-dear-rss-subscribers">I&#8217;m Sorry Dear RSS Subscribers</h2> + <p>RSS feeds are tricky things for me personally. I always botch them with a site redesign or a re-structure of my previous posts. Those of you subscribed via RSS were likely bombarded with post spam when I rebuilt this website. Sorry about that - I know how annoying that can be.</p> -<p>Fortunately, that all stops today. Moving forward my RSS feed (Atom) will be edited manually with every new post I write. Each entry will feature the post title, post url, and post date. No summaries or full-inline content will be included (since that would involve a great amount of extra overhead). RSS subs will need to follow the link directly if they are interested in the article itself. I hope this doesn't anger too many readers...</p> + +<p>Fortunately, that all stops today. Moving forward my RSS feed (Atom) will be edited manually with every new post I write. Each entry will feature the post title, post url, and post date. No summaries or full-inline content will be included (since that would involve a great amount of extra overhead). RSS subs will need to follow the link directly if they are interested in the article itself. I hope this doesn&#8217;t anger too many readers&#8230;</p> + <p>Again, sorry everyone.</p> -<h2>What is this New Blog "System"</h2> -<p>This publishing flow isn't for everyone and is less flexible than pre-existing static site generators (referred to as SSGs moving forward). For me though, it works. I find it more flexible than most SSGs.</p> + +<h2 id="what-is-this-new-blog-system">What is this New Blog &#8220;System&#8221;</h2> + +<p>This publishing flow isn&#8217;t for everyone and is less flexible than pre-existing static site generators (referred to as SSGs moving forward). For me though, it works. I find it more flexible than most SSGs.</p> + <p>There are a couple articles that explain the reasoning behind this system better than I could (plus, why would I repeat the same points?):</p> + <ul> <li><a href="http://john.ankarstrom.se/html/">Writing HTML in HTML</a></li> <li><a href="https://blog.steren.fr/2020/my-stack-will-outlive-yours/">My stack will outlive yours</a></li> </ul> + <p>So, what does my blog-posting system look like?</p> -<h2>Simple Explanation</h2> + +<h2 id="simple-explanation">Simple Explanation</h2> + <ol> -<li>Copy an existing article's <code>HTML</code> file</li> +<li>Copy an existing article&#8217;s <code>HTML</code> file</li> <li>Change file name, edit the page title, heading, post date and comment link</li> <li>Write the new article content</li> <li>Make manual new entry in RSS feed</li> <li>Save changes, push to git repo</li> -<li>Sync new file(s) / changes to remote server</li> +<li>Sync new file(s) &#47; changes to remote server</li> </ol> -<p>Pretty simple, eh? Let's break things down into greater detail though...</p> -<h2>Detailed Explanation</h2> -<h4>Text Editor</h4> -<p>I code and write everything exclusively in Sublime Text on my MacBook Air. I know, it's not an open source editor, but I love how incredibly fast and intuitive it is. I used VSCode in the past but ended up requiring far too many plugins to get things setup the way I like it. Sublime Text works best for me even right out of the box. (I do need Emmet and theming changes though).</p> + +<p>Pretty simple, eh? Let&#8217;s break things down into greater detail though&#8230;</p> + +<h2 id="detailed-explanation">Detailed Explanation</h2> + +<h4 id="text-editor">Text Editor</h4> + +<p>I code and write everything exclusively in Sublime Text on my MacBook Air. I know, it&#8217;s not an open source editor, but I love how incredibly fast and intuitive it is. I used VSCode in the past but ended up requiring far too many plugins to get things setup the way I like it. Sublime Text works best for me even right out of the box. (I do need Emmet and theming changes though).</p> + <p>I perform the following for a new article:</p> + <ul> <li>Copy an existing article, ie. <code>blog-post-1.html</code></li> <li>Rename article file name, ie. <code>blog-post-2.html</code></li> <li>Open this newly created file and change: + <ul> <li>page <code>title</code> tag</li> <li>page <code>h1</code> heading and top bar text</li> <li><code>time</code> tag to match publish date</li> <li>comment <code>mailto:</code> link url</li> -</ul> -</li> +</ul></li> <li>Start writing content inside the <code>article</code> section</li> </ul> + <p>Once the article is complete, I add a static entry in my <code>feed.xml</code> and run a crude rsync script. More on that below.</p> -<h4>Git</h4> -<p>Normally I would pull, commit and push directly in my Terminal - but lately I've been enjoying my time using Sublime Merge. I'm a sucker for visually appealing GUI applications and Merge is the perfect balance of simplicity and beauty. I recommend it if you haven't tried it yet.</p> -<h4>Hosting</h4> -<p>This blog is now hosted through NearlyFreeSpeech. I could opt for a free service like Netlify or DigitalOcean Apps but I feel it's important to help support communities that align with my own core beliefs. From their <a href="https://www.nearlyfreespeech.net/about/">about page</a>:</p> -<blockquote><p>NearlyFreeSpeech.NET is about three things: fairness, innovation, and free speech.</p> + +<h4 id="git">Git</h4> + +<p>Normally I would pull, commit and push directly in my Terminal - but lately I&#8217;ve been enjoying my time using Sublime Merge. I&#8217;m a sucker for visually appealing GUI applications and Merge is the perfect balance of simplicity and beauty. I recommend it if you haven&#8217;t tried it yet.</p> + +<h4 id="hosting">Hosting</h4> + +<p>This blog is now hosted through NearlyFreeSpeech. I could opt for a free service like Netlify or DigitalOcean Apps but I feel it&#8217;s important to help support communities that align with my own core beliefs. From their <a href="https://www.nearlyfreespeech.net/about/">about page</a>:</p> + +<blockquote> +<p>NearlyFreeSpeech.NET is about three things: fairness, innovation, and free speech.</p> </blockquote> -<p>Hard to argue with those principles. If you're feeling generous, I'd greatly appreciate anyone who considers contributing to <a href="https://www.nearlyfreespeech.net/contribute/tdarb.org">offset this website's hosting costs through NearlyFreeSpeech</a> (code: tdarb). No money is directly handed to me, it pays NFS directly for hosting fees. Donate if you feel like this humble blog of mine has helped you in any way. No pressure!</p> + +<p>Hard to argue with those principles. If you&#8217;re feeling generous, I&#8217;d greatly appreciate anyone who considers contributing to <a href="https://www.nearlyfreespeech.net/contribute/tdarb.org">offset this website&#8217;s hosting costs through NearlyFreeSpeech</a> (code: tdarb). No money is directly handed to me, it pays NFS directly for hosting fees. Donate if you feel like this humble blog of mine has helped you in any way. No pressure!</p> + <p>NFS gives me server access via <code>SSH</code> (and even <code>SFTP</code> if I desire) which makes things simple to sync my local files with production code. This is handled via rsync with a basic <code>deploy.sh</code> script:</p> -<pre><code>rsync -vrzc --exclude 'deploy.sh' --exclude '.git' --delete ./ username@my.remote.nfs.server: + +<pre><code>rsync -vrzc --exclude &#39;deploy.sh&#39; --exclude &#39;.git&#39; --delete .&#47; username@my.remote.nfs.server: </code></pre> + <p>The included parameters ensure files with a conflicting checksum are updated on the server, instead of re-syncing all the files every time the script runs. That would be overkill.</p> -<h2>Closing Thoughts</h2> -<p>I love this new setup. It's portable, lightweight, has zero dependencies, and gives me the opportunity to write directly in HTML. Others may find this workflow idiotic or cumbersome but I couldn't disagree more. Site wide changes can be made with simple <code>Find/Replace</code> actions or even whipping up a basic script. Things should be as complex as you wish to make them!</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>I love this new setup. It&#8217;s portable, lightweight, has zero dependencies, and gives me the opportunity to write directly in HTML. Others may find this workflow idiotic or cumbersome but I couldn&#8217;t disagree more. Site wide changes can be made with simple <code>Find&#47;Replace</code> actions or even whipping up a basic script. Things should be as complex as you wish to make them!</p> + <p>At the end of the day, anything that helps you be more efficient and gets you producing more content is a winning strategy in my book. Who knows, this concept could even inspire one random reader out there to do the same.</p></content> - <link href="https://bt.ht/my-static-blog-publishing-setup"/> - <id>https://bt.ht/my-static-blog-publishing-setup</id> + <link href="https://btxx.org/my-static-blog-publishing-setup"/> + <id>https://btxx.org/my-static-blog-publishing-setup</id> <updated>2022-03-21T10:00:00Z</updated> <published>2022-03-21T10:00:00Z</published> </entry> <entry> <title>My Raspberry Pi Desktop</title> - <content type="html"><h1>My Raspberry Pi Desktop</h1> + <content type="html"><h1 id="my-raspberry-pi-desktop">My Raspberry Pi Desktop</h1> + <p>2020-09-02</p> -<p>I use a Raspberry Pi 4 as my personal daily driver and it's pretty great. I know these types of devices tend to be used for smaller pet-projects or fun experiments, but I thought I would share my experience using one as my main computer. Hopefully this can be a solid guide to help others who might be interested in creating a similar setup.</p> + +<p>I use a Raspberry Pi 4 as my personal daily driver and it&#8217;s pretty great. I know these types of devices tend to be used for smaller pet-projects or fun experiments, but I thought I would share my experience using one as my main computer. Hopefully this can be a solid guide to help others who might be interested in creating a similar setup.</p> + <p>My desktop Pi working away on a regular morning:</p> -<p><figure> - <img src="/public/images/rpi-desktop.webp" alt="Raspberry Pi 4 desktop"> - <figcaption>The final Raspberry Pi desktop in all it's glory. (<a href="/public/images/rpi-desktop.webp">direct link to image</a>)</figcaption> -</figure></p> -<h2>Table of Contents</h2> + +<h2 id="table-of-contents">Table of Contents</h2> + <ol> <li><a href="#use-case">My Use Case</a></li> <li><a href="#hardware">The Hardware</a></li> <li><a href="#software">The Software</a></li> -<li><a href="#stats">Performance &amp; Stats</a></li> +<li><a href="#stats">Performance &#38; Stats</a></li> </ol> -<p><h2 id="use-case">My Use Case</h2></p> -<p>I'm a web designer and developer by trade. Therefore, I require a decent amount of functionality from my computer - more than just simple web browsing and document editing. When I first set out testing if the RPi4 <em>could</em> become my main device, I was surprised at how capable the hardware / software was at running all my required applications. My workload comprises of:</p> + +<p>I&#8217;m a web designer and developer by trade. Therefore, I require a decent amount of functionality from my computer - more than just simple web browsing and document editing. When I first set out testing if the RPi4 <em>could</em> become my main device, I was surprised at how capable the hardware &#47; software was at running all my required applications. My workload comprises of:</p> + <ul> -<li>Using Github/Gitlab to pull/push repos, open PRs, etc</li> +<li>Using Github&#47;Gitlab to pull&#47;push repos, open PRs, etc</li> <li>Run SSG (Jekyll mostly) locally for testing</li> <li>Run multiple WordPress instances locally</li> <li>Edit design files (Photoshop, Illustrator, direct SVGs)</li> -<li>Simple web chat / email</li> +<li>Simple web chat &#47; email</li> </ul> -<p>Basic stuff, but I was originally doubtful of the RPi4 to be able to handle it all smoothly. I'm happy to say I was wrong.</p> -<p><h2 id="hardware">The Hardware</h2></p> -<p>The following hardware list is what I use specifically for my intended use case. I'm also a sucker for having cool looking SBC builds. By no means is this the "best setup" for everyone - I'm sure other combinations of gear might better suit your own personal needs.</p> -<blockquote><p><strong>Note</strong>: products in the hardware section are Amazon affiliate links</p> + +<p>Basic stuff, but I was originally doubtful of the RPi4 to be able to handle it all smoothly. I&#8217;m happy to say I was wrong.</p> + +<p>The following hardware list is what I use specifically for my intended use case. I&#8217;m also a sucker for having cool looking SBC builds. By no means is this the &#8220;best setup&#8221; for everyone - I&#8217;m sure other combinations of gear might better suit your own personal needs.</p> + +<blockquote> +<p><strong>Note</strong>: products in the hardware section are Amazon affiliate links</p> </blockquote> + <ul> -<li><a href="https://amzn.to/33BAVn2" target="_blank">Raspberry Pi 4</a></li> -<li><a href="https://amzn.to/3nu55Aq" target="_blank">X857 V1.0 mSATA SSD Shield Expansion Board</a> (I'm using the X856)</li> -<li><a href="https://amzn.to/3jEgWd5" target="_blank">128GB mSATA SSD</a></li> -<li><a href="https://amzn.to/3nqeJUK" target="_blank">Acrylic Case with Heatsinks &amp; Fan</a></li> -<li><a href="https://amzn.to/34w60I1" target="_blank">Raspberry Pi Keyboard & Mouse</a></li> -<li><a href="https://amzn.to/3jDKLdT" target="_blank">21.5" Acer Monitor</a></li> +<li>Raspberry Pi 4</li> +<li>X857 V1.0 mSATA SSD Shield Expansion Board (I&#8217;m using the X856)</li> +<li>128GB mSATA SSD</li> +<li>Acrylic Case with Heatsinks &#38; Fan</li> +<li>Raspberry Pi Keyboard &#38; Mouse</li> +<li>21.5&#8221; Acer Monitor</li> </ul> -<p><h2 id="software">The Software</h2></p> -<p>The 32-bit version of Raspberry Pi OS ('Debian Buster' at the time of writing) is my OS of choice. Stable, reliable, and officially supported by the RPi community. It does the job.</p> + +<p>The 32-bit version of Raspberry Pi OS (&#8216;Debian Buster&#8217; at the time of writing) is my OS of choice. Stable, reliable, and officially supported by the RPi community. It does the job.</p> + <p>The Pi has been overclocked to 2GHz in order to squeeze just a <em>little</em> extra out of the hardware. This has caused zero issues.</p> -<p>I'm also booting directly from the mSATA SSD (via USB booting) instead of relying on a slower microSD card. You can find tons of tutorials online on how to do the same, but I would recommend this one: <a href="https://www.tomshardware.com/how-to/boot-raspberry-pi-4-usb">How to Boot Raspberry Pi 4 From a USB SSD or Flash Drive</a></p> -<p>After that, I simply installed my required apps / configs (where applicable):</p> + +<p>I&#8217;m also booting directly from the mSATA SSD (via USB booting) instead of relying on a slower microSD card. You can find tons of tutorials online on how to do the same, but I would recommend this one: <a href="https://www.tomshardware.com/how-to/boot-raspberry-pi-4-usb">How to Boot Raspberry Pi 4 From a USB SSD or Flash Drive</a></p> + +<p>After that, I simply installed my required apps &#47; configs (where applicable):</p> + <ul> <li>Chromium (<em>preinstalled</em>)</li> <li>Firefox ESR</li> @@ -4010,279 +5293,370 @@ p + p { <li>Libre Office Suite</li> <li>Evolution</li> <li>Figma (Web - no install needed)</li> -<li>Apache2 / MySQL</li> +<li>Apache2 &#47; MySQL</li> <li>Blueman (helpful GUI for bluetooth)</li> </ul> + <p>What my plain desktop looks like:</p> -<p><figure> - <img src="/public/images/rpi-desktop-screenshot.webp" alt="Raspberry Pi 4 desktop and wallpaper"> - <figcaption>My very basic Raspberry Pi desktop/wallpaper view. (<a href="/public/images/rpi-desktop-screenshot.webp">direct link to image</a>)</figcaption> -</figure></p> -<p><h2 id="stats">Performance &amp; Stats</h2></p> -<p>Using this build day-to-day, I can honestly say I don't hit any hiccups or lag at all. Multiple applications and WordPress instances are running in the background, while 10-15 tabs are open in the Chromium browser. The little Pi just chugs along without breaking a sweat.</p> -<p>My average CPU temperature sits around 51&amp;deg; (with heatsinks &amp; fan active) while CPU usage never really cranks past 90% during even "intensive" processes.</p> -<p>Since <em>actual</em> data speaks louder than anecdotal chit-chat, I performed a very simple read/write test on my mSATA SSD.</p> + +<p>Using this build day-to-day, I can honestly say I don&#8217;t hit any hiccups or lag at all. Multiple applications and WordPress instances are running in the background, while 10-15 tabs are open in the Chromium browser. The little Pi just chugs along without breaking a sweat.</p> + +<p>My average CPU temperature sits around 51&#176; (with heatsinks &#38; fan active) while CPU usage never really cranks past 90% during even &#8220;intensive&#8221; processes.</p> + +<p>Since <em>actual</em> data speaks louder than anecdotal chit-chat, I performed a very simple read&#47;write test on my mSATA SSD.</p> + <p>First, clear the cache to avoid conflicting data:</p> -<pre><code>sync; echo 3 | sudo tee /proc/sys/vm/drop_caches + +<pre><code>sync; echo 3 | sudo tee &#47;proc&#47;sys&#47;vm&#47;drop_caches </code></pre> -<h3>Write</h3> + +<h3 id="write">Write</h3> + <p>Write script run:</p> -<pre><code>dd if=/dev/zero of=~/test.tmp bs=500K count=1024 + +<pre><code>dd if=&#47;dev&#47;zero of=~&#47;test.tmp bs=500K count=1024 </code></pre> + <p>Write output:</p> -<pre><code>524288000 bytes (524 MB, 500 MiB) copied, 1.95478 s, 268 MB/s + +<pre><code>524288000 bytes (524 MB, 500 MiB) copied, 1.95478 s, 268 MB&#47;s </code></pre> -<h3>Read</h3> + +<h3 id="read">Read</h3> + <p>Read script:</p> -<pre><code>dd if=~/test.tmp of=/dev/null bs=500K count=1024 + +<pre><code>dd if=~&#47;test.tmp of=&#47;dev&#47;null bs=500K count=1024 </code></pre> + <p>Read output:</p> -<pre><code>524288000 bytes (524 MB, 500 MiB) copied, 0.770993 s, 680 MB/s + +<pre><code>524288000 bytes (524 MB, 500 MiB) copied, 0.770993 s, 680 MB&#47;s </code></pre> -<p>This gives a total read/write value of: <strong>268 MB / 680 MB</strong> per second. Compare that to average microSD card speeds floating around <strong>22 MB / 170MB</strong> per second and you can see (and feel) the massive speed difference. Things are just snappier.</p> -<p><strong>Note</strong>: Obviously extremely high-end (read: expensive) microSD cards <em>might</em> hit read/write speeds similar to that of an SSD. The issue is that you are more likely to corrupt or reach end-of-life with a microSD card - hence why I don't recommend them.</p> -<h2>Final Thoughts</h2> -<p>I love that I can use a fairly cheap Raspberry Pi 4 as my main, personal desktop. Of course, some people might roll their eyes at this build and say, "why not just get a cheaper, more powerful laptop off eBay?". To that I would respond: <em>you're missing the point</em>. </p> + +<p>This gives a total read&#47;write value of: <strong>268 MB &#47; 680 MB</strong> per second. Compare that to average microSD card speeds floating around <strong>22 MB &#47; 170MB</strong> per second and you can see (and feel) the massive speed difference. Things are just snappier.</p> + +<p><strong>Note</strong>: Obviously extremely high-end (read: expensive) microSD cards <em>might</em> hit read&#47;write speeds similar to that of an SSD. The issue is that you are more likely to corrupt or reach end-of-life with a microSD card - hence why I don&#8217;t recommend them.</p> + +<h2 id="final-thoughts">Final Thoughts</h2> + +<p>I love that I can use a fairly cheap Raspberry Pi 4 as my main, personal desktop. Of course, some people might roll their eyes at this build and say, &#8220;why not just get a cheaper, more powerful laptop off eBay?&#8221;. To that I would respond: <em>you&#8217;re missing the point</em>. </p> + <p>It was fun to put together this simple desktop. The fact that it runs fast and stable enough to be my daily driver is a great bonus. If this build interests you at all, I highly recommend giving it a go.</p></content> - <link href="https://bt.ht/my-pi-desktop"/> - <id>https://bt.ht/my-pi-desktop</id> + <link href="https://btxx.org/my-pi-desktop"/> + <id>https://btxx.org/my-pi-desktop</id> <updated>2020-09-02T10:00:00Z</updated> <published>2020-09-02T10:00:00Z</published> </entry> <entry> <title>Using Multiple CSS Background Images</title> - <content type="html"><h1>Using Multiple CSS Background Images</h1> + <content type="html"><h1 id="using-multiple-css-background-images">Using Multiple CSS Background Images</h1> + <p>2018-09-28</p> -<p>It isn't something developers have a need to do very often, but you <em>can</em> set multiple background images on a single element.</p> + +<p>It isn&#8217;t something developers have a need to do very often, but you <em>can</em> set multiple background images on a single element.</p> + <p>Example:</p> + <pre><code>.element { - background: url('image_path') center repeat, linear-gradient(transparent 0%, #000 100%) no-repeat; + background: url(&#39;image_path&#39;) center repeat, linear-gradient(transparent 0%, #000 100%) no-repeat; } </code></pre> -<p>What can you do with this? It's only limited by your imagination, but I'm personally a fan of always using as few elements as possible when working on a project.</p></content> - <link href="https://bt.ht/multiple-css-background-images"/> - <id>https://bt.ht/multiple-css-background-images</id> + +<p>What can you do with this? It&#8217;s only limited by your imagination, but I&#8217;m personally a fan of always using as few elements as possible when working on a project.</p></content> + <link href="https://btxx.org/multiple-css-background-images"/> + <id>https://btxx.org/multiple-css-background-images</id> <updated>2018-09-28T10:00:00Z</updated> <published>2018-09-28T10:00:00Z</published> </entry> <entry> <title>Why I Stopped Using an External Monitor</title> - <content type="html"><h1>Why I Stopped Using an External Monitor</h1> + <content type="html"><h1 id="why-i-stopped-using-an-external-monitor">Why I Stopped Using an External Monitor</h1> + <p>2023-03-03</p> -<p>For the longest time I've been using a Samsung 27" UHD monitor as my main display. This monitor was connected to my ThinkPad X260 (in clamshell mode) through the official Lenovo dock. It wasn't a bad setup, but I have since changed my ways.</p> -<p>Instead, I now <em>only</em> use the X260's panel as my main display. Let me explain my reasoning...</p> -<h2>The Switch to Suckless</h2> -<p>Over the past year I switched away from a traditional desktop environment to a window manager - <a href="https://dwm.suckless.org/">dwm</a> to be specific. This also involved changing most of my daily software programs to utilize the full suckless "suite". In doing so, the shift away from floating windows and virtualized desktops happened quickly.</p> + +<p>For the longest time I&#8217;ve been using a Samsung 27&#8221; UHD monitor as my main display. This monitor was connected to my ThinkPad X260 (in clamshell mode) through the official Lenovo dock. It wasn&#8217;t a bad setup, but I have since changed my ways.</p> + +<p>Instead, I now <em>only</em> use the X260&#8217;s panel as my main display. Let me explain my reasoning&#8230;</p> + +<h2 id="the-switch-to-suckless">The Switch to Suckless</h2> + +<p>Over the past year I switched away from a traditional desktop environment to a window manager - <a href="https://dwm.suckless.org/">dwm</a> to be specific. This also involved changing most of my daily software programs to utilize the full suckless &#8220;suite&#8221;. In doing so, the shift away from floating windows and virtualized desktops happened quickly.</p> + <p>I continued to use my UHD monitor with this new environment but slowly started running into minor (yet still inconvenient) roadblocks:</p> + <ul> -<li>Tiled mode was not the most optimized for such a large monitor. I found myself defaulting into "floating" mode which defeats the purpose of a WM.</li> +<li>Tiled mode was not the most optimized for such a large monitor. I found myself defaulting into &#8220;floating&#8221; mode which defeats the purpose of a WM.</li> <li>The screen was almost <em>too</em> large - making content placed on the far edges of the screen difficult to view at a glance.</li> <li>I stopped using tags, since I ended up piling applications on top of one another in a single view. Again - defeating the point of a WM.</li> </ul> -<p>All of these issues were close to making me ditch the external monitor altogether, but it was my day-to-day job that struck the final blow...</p> -<h2>Designing for Everyday Users</h2> -<p>As a UX/UI front-end designer by trade, my job requires me to create and tweak interfaces that essentially go <em>unnoticed</em> by the end-users. If you finish a task you sought out to complete without even thinking about <em>how</em> you did it - then I succeeded at my job. The problem is, we designers and developers tend to forget the constraints a majority of our users experience. In this case - screen resolution.</p> + +<p>All of these issues were close to making me ditch the external monitor altogether, but it was my day-to-day job that struck the final blow&#8230;</p> + +<h2 id="designing-for-everyday-users">Designing for Everyday Users</h2> + +<p>As a UX&#47;UI front-end designer by trade, my job requires me to create and tweak interfaces that essentially go <em>unnoticed</em> by the end-users. If you finish a task you sought out to complete without even thinking about <em>how</em> you did it - then I succeeded at my job. The problem is, we designers and developers tend to forget the constraints a majority of our users experience. In this case - screen resolution.</p> + <p><a href="https://www.browserstack.com/guide/ideal-screen-sizes-for-responsive-design">A study performed by BrowserStack via statcounter (2022)</a> shows the worldwide market share based on device type:</p> + <ul> <li>58.33% mobile</li> <li>39.65% desktop</li> <li>2.02% tablet</li> </ul> + <p>The mobile aspect is certainly important, but we are focusing on the desktop data. Of that total the top two screen resolutions are:</p> + <ul> <li>1920×1080 (9.94%)</li> <li>1366×768 (6.22%)</li> </ul> -<p>That is a fairly significant chunk of desktop users. Although almost 10% have access to screens set at <code>1920x1080</code>, I found the amount of those stuck at <code>1366x768</code> to be quite shocking. Here I was, developing large-set interfaces on an UHD 4K monitor while a large portion of my end-users would never benefit from those "pixel-perfect" designs. </p> + +<p>That is a fairly significant chunk of desktop users. Although almost 10% have access to screens set at <code>1920x1080</code>, I found the amount of those stuck at <code>1366x768</code> to be quite shocking. Here I was, developing large-set interfaces on an UHD 4K monitor while a large portion of my end-users would never benefit from those &#8220;pixel-perfect&#8221; designs. </p> + <p>Hell, some of these users were being shown the <em>tablet</em>-based view of the applications since our breakpoints were so ridiculously large. Yikes.</p> -<p>So, I said screw it and retired the external monitor. Now my X260 is propped up and proudly showing off its 1366x768 display. It only took a day or so to adapt to this new setup and I don't think I could go back to another massive display.</p> + +<p>So, I said screw it and retired the external monitor. Now my X260 is propped up and proudly showing off its 1366x768 display. It only took a day or so to adapt to this new setup and I don&#8217;t think I could go back to another massive display.</p> + <p>Here are some benefits at a glance:</p> + <ul> -<li>I no longer have to worry about "context switching" if I decide to un-dock my laptop and work somewhere mobile. The desktop experience remains intact.</li> +<li>I no longer have to worry about &#8220;context switching&#8221; if I decide to un-dock my laptop and work somewhere mobile. The desktop experience remains intact.</li> <li>Working inside <code>dwm</code> is a much cleaner experience. I mostly operate single applications within their own confined tag - with some exceptions of course.</li> -<li>I'm able to instantly understand frustrations of everyday users while developing new features or tweaking existing UIs. Being able to advocate for our end-users by using legit use cases is extremely helpful. (Removes the "design by gut-feeling" mistakes)</li> -</ul> -<p><figure> - <img src="/public/images/dither-desktop.png" alt="My current desktop setup with the X260 ThinkPad"> - <figcaption>My ThinkPad X260, along with my MageGee wired mechanical keyboard and Logitech Pebble mouse. Small notebook and pen for note-taking.</figcaption> -</figure></p> -<h2>A Little Extreme</h2> -<p>Yes, I am aware that I could simply keep the UHD monitor and perform my work within a constrained portion of the screen. The problem that remains is "quality". Most 1366x768 panels are not even close to the level of hi-res found on most 4K monitors. By using such a display I would be cheating myself of the standard experience a good portion of my end-users endure. </p> -<p>I want to see the fuzzy text, slightly blurred imagery and muted button shadows. I want to see these things because that's how some <em>users</em> will experience it.</p> -<p>Maybe that's extreme - but it works for me.</p></content> - <link href="https://bt.ht/monitor"/> - <id>https://bt.ht/monitor</id> +<li>I&#8217;m able to instantly understand frustrations of everyday users while developing new features or tweaking existing UIs. Being able to advocate for our end-users by using legit use cases is extremely helpful. (Removes the &#8220;design by gut-feeling&#8221; mistakes)</li> +</ul> + +<h2 id="a-little-extreme">A Little Extreme</h2> + +<p>Yes, I am aware that I could simply keep the UHD monitor and perform my work within a constrained portion of the screen. The problem that remains is &#8220;quality&#8221;. Most 1366x768 panels are not even close to the level of hi-res found on most 4K monitors. By using such a display I would be cheating myself of the standard experience a good portion of my end-users endure. </p> + +<p>I want to see the fuzzy text, slightly blurred imagery and muted button shadows. I want to see these things because that&#8217;s how some <em>users</em> will experience it.</p> + +<p>Maybe that&#8217;s extreme - but it works for me.</p></content> + <link href="https://btxx.org/monitor"/> + <id>https://btxx.org/monitor</id> <updated>2023-03-03T10:00:00Z</updated> <published>2023-03-03T10:00:00Z</published> </entry> <entry> <title>Installing Older Versions of MongoDB on Arch Linux</title> - <content type="html"><h1>Installing Older Versions of MongoDB on Arch Linux</h1> + <content type="html"><h1 id="installing-older-versions-of-mongodb-on-arch-linux">Installing Older Versions of MongoDB on Arch Linux</h1> + <p>2023-09-11</p> -<p>I've recently been using Arch Linux for my main work environment on my ThinkPad X260. It's been great. As someone who is constantly drawn to minimalist operating systems such as Alpine or OpenBSD, it's nice to use something like Arch that boasts that same minimalist approach but with greater documentation/support.</p> -<p>Another major reason for the switch was the need to run older versions of "services" locally. Most people would simply suggest using Docker or vmm, but I personally run projects in self-contained, personalized directories on my system itself. I am aware of the irony in that statement... but that's just my personal preference.</p> + +<p>I&#8217;ve recently been using Arch Linux for my main work environment on my ThinkPad X260. It&#8217;s been great. As someone who is constantly drawn to minimalist operating systems such as Alpine or OpenBSD, it&#8217;s nice to use something like Arch that boasts that same minimalist approach but with greater documentation&#47;support.</p> + +<p>Another major reason for the switch was the need to run older versions of &#8220;services&#8221; locally. Most people would simply suggest using Docker or vmm, but I personally run projects in self-contained, personalized directories on my system itself. I am aware of the irony in that statement&#8230; but that&#8217;s just my personal preference.</p> + <p>So I thought I would share my process of setting up an older version of MongoDB (3.4 to be precise) on Arch Linux.</p> -<h2>AUR to the Rescue</h2> + +<h2 id="aur-to-the-rescue">AUR to the Rescue</h2> + <p>You will need to target the specific version of MongoDB using the very awesome AUR packages:</p> + <pre><code>yay -S mongodb34-bin </code></pre> -<p>Follow the instructions and you'll be good to go. Don't forget to create the <code>/data/db</code> directory and give it proper permissions:</p> -<pre><code>mkdir -p /data/db/ -chmod -R 777 /date/db + +<p>Follow the instructions and you&#8217;ll be good to go. Don&#8217;t forget to create the <code>&#47;data&#47;db</code> directory and give it proper permissions:</p> + +<pre><code>mkdir -p &#47;data&#47;db&#47; +chmod -R 777 &#47;date&#47;db </code></pre> -<h2>What About My "Tools"?</h2> -<p>If you plan to use MongoDB, then you most likely want to utilize the core database tools (restore, dump, etc). The problem is you can't use the default <code>mongodb-tools</code> package when trying to work with older versions of MongoDB itself. The package will complain about conflicts and ask you to override your existing version. This is <em>not</em> what we want.</p> -<p>So, you'll have to build from source locally:</p> -<pre><code>git clone https://github.com/mongodb/mongo-tools + +<h2 id="what-about-my-tools">What About My &#8220;Tools&#8221;?</h2> + +<p>If you plan to use MongoDB, then you most likely want to utilize the core database tools (restore, dump, etc). The problem is you can&#8217;t use the default <code>mongodb-tools</code> package when trying to work with older versions of MongoDB itself. The package will complain about conflicts and ask you to override your existing version. This is <em>not</em> what we want.</p> + +<p>So, you&#8217;ll have to build from source locally:</p> + +<pre><code>git clone https:&#47;&#47;github.com&#47;mongodb&#47;mongo-tools cd mongodb-tools -./make build +.&#47;make build </code></pre> -<p>Then you'll need to copy the built executables into the proper directory in order to use them from the terminal:</p> -<pre><code>cp bin/* /usr/local/bin/ + +<p>Then you&#8217;ll need to copy the built executables into the proper directory in order to use them from the terminal:</p> + +<pre><code>cp bin&#47;* &#47;usr&#47;local&#47;bin&#47; </code></pre> -<p>And that's it! Now you can run <code>mongod</code> directly or use <code>systemctl</code> to enable it by default. Hopefully this helps anyone else curious about running older (or even outdated!) versions of MongoDB.</p></content> - <link href="https://bt.ht/mongodb-arch"/> - <id>https://bt.ht/mongodb-arch</id> + +<p>And that&#8217;s it! Now you can run <code>mongod</code> directly or use <code>systemctl</code> to enable it by default. Hopefully this helps anyone else curious about running older (or even outdated!) versions of MongoDB.</p></content> + <link href="https://btxx.org/mongodb-arch"/> + <id>https://btxx.org/mongodb-arch</id> <updated>2023-09-11T10:00:00Z</updated> <published>2023-09-11T10:00:00Z</published> </entry> <entry> <title>Using a New Domain and Switching Static Hosts</title> - <content type="html"><h1>Using a New Domain and Switching Static Hosts</h1> + <content type="html"><h1 id="using-a-new-domain-and-switching-static-hosts">Using a New Domain and Switching Static Hosts</h1> + <p>2021-11-25</p> -<p>As you can most likely tell by looking at your browser's URL - I've swapped over to a new domain for my personal website: <a href="https://tdarb.org">tdarb.org</a>. I'm a fickle person and this is a random change - but it is one I've been planning to do for some time.</p> -<p>Let me give some minor background information and then get into the changes...</p> -<h2>What about Ugly Duck?</h2> -<p>I had originally used the <a href="https://uglyduck.ca">uglyduck.ca</a> domain for this personal blog as a <em>loosely</em> based reference to the "ugly duckling" story. This was based on the fact that I <em>mainly</em> focus on CSS and making the web more visually appealing - or beautiful, if you will - so the comparison to an ugly duckling becoming a swan made sense in my oddball mind.</p> + +<p>As you can most likely tell by looking at your browser&#8217;s URL - I&#8217;ve swapped over to a new domain for my personal website: <a href="https://tdarb.org">tdarb.org</a>. I&#8217;m a fickle person and this is a random change - but it is one I&#8217;ve been planning to do for some time.</p> + +<p>Let me give some minor background information and then get into the changes&#8230;</p> + +<h2 id="what-about-ugly-duck">What about Ugly Duck?</h2> + +<p>I had originally used the <a href="https://uglyduck.ca">uglyduck.ca</a> domain for this personal blog as a <em>loosely</em> based reference to the &#8220;ugly duckling&#8221; story. This was based on the fact that I <em>mainly</em> focus on CSS and making the web more visually appealing - or beautiful, if you will - so the comparison to an ugly duckling becoming a swan made sense in my oddball mind.</p> + <p>But overtime I came to somewhat dislike[^1] it and set out to change it.</p> -<h2>So what the heck is "tdarb"?</h2> + +<h2 id="so-what-the-heck-is-tdarb">So what the heck is &#8220;tdarb&#8221;?</h2> + <p>I explain this on my updated <a href="/about">about page</a> but I will mention it again here:</p> + <p><strong>tdarb</strong>[^2] is simply my first name and last initial spelt backwards – Brad T. Mind blowing, right?</p> -<p>I've switched over to this naming convention to avoid having such a random "phrase" domain name while at the same time having a little more fun than just <em>mylegalname.com</em>. I also am a sucker for <code>.org</code> TLDs (although I don't know why).</p> -<p>I'm sure some readers will prefer it, some will be indifferent and others will hate it. Either way, it's my personal site and I'll do as I please!</p> -<h2>Breaking My Website for a Day and Fixing Potential Link Rot</h2> + +<p>I&#8217;ve switched over to this naming convention to avoid having such a random &#8220;phrase&#8221; domain name while at the same time having a little more fun than just <em>mylegalname.com</em>. I also am a sucker for <code>.org</code> TLDs (although I don&#8217;t know why).</p> + +<p>I&#8217;m sure some readers will prefer it, some will be indifferent and others will hate it. Either way, it&#8217;s my personal site and I&#8217;ll do as I please!</p> + +<h2 id="breaking-my-website-for-a-day-and-fixing-potential-link-rot">Breaking My Website for a Day and Fixing Potential Link Rot</h2> + <p>The transition I made yesterday from <a href="https://uglyduck.ca">uglyduck.ca</a> to <a href="https://tdarb.org">tdarb.org</a> was <em>rough</em>. I thought that I could simply launch the identical content on the new domain, test everything, and then simply set a URL redirect from the old domain through Namecheap[^3]. Oh boy, was I wrong!</p> -<p>The bulk of my evening was spent figuring out why the redirect wouldn't propagate across all networks and why multiple forwards were occurring. In the end, I just tossed <a href="https://uglyduck.ca">uglyduck.ca</a> back up on Netlify and set global redirect rules in their handy-dandy <code>_redirects</code> file. (I will write-up a small post about this soon to help others). After a few minutes everything was working perfectly fine and best of all - no broken links or potential link rot! All thanks to the <code>:splat</code> parameter in the redirects.</p> -<p>As for my RSS feed, everything <em>should</em> forward correctly? I state that as a question since I can't confirm this 100% and RSS feeds are not my expertise. If I broke this for any of you, I apologize. I will pray to the internet gods for your forgiveness...</p> -<h2>From Github to Sourcehut</h2> -<p>That's right, I've switched this static site's hosting over to <a href="https://srht.site">sourcehut pages</a> and couldn't be happier. My reasons for switching:</p> + +<p>The bulk of my evening was spent figuring out why the redirect wouldn&#8217;t propagate across all networks and why multiple forwards were occurring. In the end, I just tossed <a href="https://uglyduck.ca">uglyduck.ca</a> back up on Netlify and set global redirect rules in their handy-dandy <code>_redirects</code> file. (I will write-up a small post about this soon to help others). After a few minutes everything was working perfectly fine and best of all - no broken links or potential link rot! All thanks to the <code>:splat</code> parameter in the redirects.</p> + +<p>As for my RSS feed, everything <em>should</em> forward correctly? I state that as a question since I can&#8217;t confirm this 100% and RSS feeds are not my expertise. If I broke this for any of you, I apologize. I will pray to the internet gods for your forgiveness&#8230;</p> + +<h2 id="from-github-to-sourcehut">From Github to Sourcehut</h2> + +<p>That&#8217;s right, I&#8217;ve switched this static site&#8217;s hosting over to <a href="https://srht.site">sourcehut pages</a> and couldn&#8217;t be happier. My reasons for switching:</p> + <ol> -<li>I'm happy to pay and support the ongoing work at sourcehut (open source alternatives to Netlify, Github, etc. is important)</li> -<li>I've been wanting to become more comfortable with the sourcehut ecosystem - there might be projects in the future I would like to help with on that platform and it helps if you know how to use it :P</li> +<li>I&#8217;m happy to pay and support the ongoing work at sourcehut (open source alternatives to Netlify, Github, etc. is important)</li> +<li>I&#8217;ve been wanting to become more comfortable with the sourcehut ecosystem - there might be projects in the future I would like to help with on that platform and it helps if you know how to use it :P</li> <li>Sourcehut pages are fast - I mean <em>really</em> fast</li> </ol> -<p>It <em>was</em> slightly confusing for my ape brain to figure out the setup, but I got there eventually. I plan to do a detailed step-by-step tutorial to help those like me who may find it a little daunting. It's well worth the minor effort.</p> -<h2>The Lifespan of uglyduck.ca</h2> + +<p>It <em>was</em> slightly confusing for my ape brain to figure out the setup, but I got there eventually. I plan to do a detailed step-by-step tutorial to help those like me who may find it a little daunting. It&#8217;s well worth the minor effort.</p> + +<h2 id="the-lifespan-of-uglyduck.ca">The Lifespan of uglyduck.ca</h2> + <p>I still have ownership of the old domain for almost another full year. I feel like that gives users enough time to adjust and become accustomed to the new one. My plan is to let the domain die entirely when it goes up for renewal but who knows - I might very well keep it going if the mood strikes me.</p> -<h2>That's All Folks!</h2> -<p>I don't have much else to report besides having made minor tweaks to this website design (yet again) and I have also finally added a picture of <a href="/uses">workstation on the "Things I Use" page</a>. That's it.</p> -<h2>Refs</h2> + +<h2 id="thats-all-folks">That&#8217;s All Folks!</h2> + +<p>I don&#8217;t have much else to report besides having made minor tweaks to this website design (yet again) and I have also finally added a picture of <a href="/uses">workstation on the &#8220;Things I Use&#8221; page</a>. That&#8217;s it.</p> + +<h2 id="refs">Refs</h2> + <ol> <li>not <em>hate</em> - just discontent</li> <li>pronounced tee-darb</li> <li>Namecheap support were very helpful - this was more of a limitation of what their redirects can do</li> </ol></content> - <link href="https://bt.ht/minor-website-changes"/> - <id>https://bt.ht/minor-website-changes</id> + <link href="https://btxx.org/minor-website-changes"/> + <id>https://btxx.org/minor-website-changes</id> <updated>2021-11-25T10:00:00Z</updated> <published>2021-11-25T10:00:00Z</published> </entry> <entry> <title>Minimal CSS: Dropdown Menu</title> - <content type="html"><h1>Minimal CSS: Dropdown Menu</h1> + <content type="html"><h1 id="minimal-css-dropdown-menu">Minimal CSS: Dropdown Menu</h1> + <p>2019-04-26</p> -<p>I love the idea of stripping away as much CSS as possible, while still maintaining the original UI concept. Let's build out a demo example with a simple menu dropdown element.</p> + +<p>I love the idea of stripping away as much CSS as possible, while still maintaining the original UI concept. Let&#8217;s build out a demo example with a simple menu dropdown element.</p> + <p>Interesting facts about our final CSS menu:</p> + <ul> <li>Total weight 121 bytes minified! (not including any resets etc.)</li> <li>No complex HTML structures</li> <li>Accessibility support</li> </ul> -<p>Now to see the final code in all it's glory:</p> -<h3>HTML</h3> -<pre><code>&lt;nav&gt; - &lt;ul&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Home&lt;/a&gt;&lt;/li&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Services&lt;/a&gt; - &lt;ul&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Design&lt;/a&gt;&lt;/li&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Development&lt;/a&gt;&lt;/li&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Custom Pizzas&lt;/a&gt;&lt;/li&gt; - &lt;/ul&gt; - &lt;/li&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt; - &lt;/ul&gt; -&lt;/nav&gt; -</code></pre> -<h3>CSS</h3> -<pre><code>/* resets - optional */ + +<p>Now to see the final code in all it&#8217;s glory:</p> + +<h3 id="html">HTML</h3> + +<pre><code>&#60;nav&#62; + &#60;ul&#62; + &#60;li&#62;&#60;a href=""&#62;Home&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;About&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Services&#60;&#47;a&#62; + &#60;ul&#62; + &#60;li&#62;&#60;a href=""&#62;Design&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Development&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Custom Pizzas&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;&#47;ul&#62; + &#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Contact&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;&#47;ul&#62; +&#60;&#47;nav&#62; +</code></pre> + +<h3 id="css">CSS</h3> + +<pre><code>&#47;* resets - optional *&#47; ul { list-style: none; padding: 0; } ul li { display: inline-block; position: relative; } -/* minimal dropdown CSS */ -ul li &gt; ul { +&#47;* minimal dropdown CSS *&#47; +ul li &#62; ul { left: -9999px; position: absolute; visibility: hidden; } -ul li:hover &gt; ul, ul li:focus-within &gt; ul { +ul li:hover &#62; ul, ul li:focus-within &#62; ul { left: 0; visibility: visible; } </code></pre> -<h2>Live demo on CodePen</h2> + +<h2 id="live-demo-on-codepen">Live demo on CodePen</h2> + <p>Feel free to check out the live demo on CodePen <a href="https://codepen.io/bradleytaunt/pen/MRLevy">here</a>.</p></content> - <link href="https://bt.ht/minimal-css-menu"/> - <id>https://bt.ht/minimal-css-menu</id> + <link href="https://btxx.org/minimal-css-menu"/> + <id>https://btxx.org/minimal-css-menu</id> <updated>2019-04-26T10:00:00Z</updated> <published>2019-04-26T10:00:00Z</published> </entry> <entry> <title>Mini Interactive Keyboard with Pure CSS</title> - <content type="html"><h1>Mini Interactive Keyboard with Pure CSS</h1> + <content type="html"><h1 id="mini-interactive-keyboard-with-pure-css">Mini Interactive Keyboard with Pure CSS</h1> + <p>2020-05-13</p> -<p>Lately, I've become obsessed with trying to see what I can create using only HTML and CSS (besides websites of course). Since playing with the concept of <a href="https://uglyduck.ca/fake-3d-elements-with-css/">faking 3D elements</a>, I wanted to circle back around to an older CodePen I created: a mini, interactive undo keyboard.</p> -<h2>See it in action</h2> -<p>Below you can view a live demo of the mini keyboard itself. This demo is nothing special, but takes design inspiration from Apple's magic keyboards (if that wasn't already obvious).</p> + +<p>Lately, I&#8217;ve become obsessed with trying to see what I can create using only HTML and CSS (besides websites of course). Since playing with the concept of <a href="https://uglyduck.ca/fake-3d-elements-with-css/">faking 3D elements</a>, I wanted to circle back around to an older CodePen I created: a mini, interactive undo keyboard.</p> + +<h2 id="see-it-in-action">See it in action</h2> + +<p>Below you can view a live demo of the mini keyboard itself. This demo is nothing special, but takes design inspiration from Apple&#8217;s magic keyboards (if that wasn&#8217;t already obvious).</p> + <p><img src="/public/images/undo-keyboard.png" alt="Undo keyboard with two buttons to click" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/PadQMP">Live CodePen Example</a></p> -<p>So now that we have seen what we plan to build, let's break down the process of creating this stupid, fun project!</p> -<h2>The HTML</h2> + +<p>So now that we have seen what we plan to build, let&#8217;s break down the process of creating this stupid, fun project!</p> + +<h2 id="the-html">The HTML</h2> + <p>The core skeleton of this project is very simple, since the keyboard consists of only 2 interactive buttons on top of a basic base element: </p> + <ul> -<li>Keyboard base</li> -<li>Command button</li> -<li>'Z' letter button</li> +<li><p>Keyboard base</p></li> +<li><p>Command button</p></li> +<li><p>&#8216;Z&#8217; letter button</p></li> </ul> -<pre><code>&lt;!-- This is keyboard main base --&gt; -&lt;div class=&quot;base&quot;&gt; - &lt;!-- Command Button --&gt; - &lt;button class=&quot;command&quot;&gt; - &lt;svg viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z&quot;&gt;&lt;/path&gt;&lt;/svg&gt; - &lt;span&gt;command&lt;/span&gt; - &lt;/button&gt; +<h2 id="the-css">The CSS</h2> - &lt;!-- &quot;Z&quot; Letter Button --&gt; - &lt;button class=&quot;z&quot;&gt; - &lt;span&gt;Z&lt;/span&gt; - &lt;/button&gt; +<p>Here is where all the magic happens. Let&#8217;s break these elements into their own sections, starting with the <strong>base styling</strong>:</p> -&lt;/div&gt; -</code></pre> -<h2>The CSS</h2> -<p>Here is where all the magic happens. Let's break these elements into their own sections, starting with the <strong>base styling</strong>:</p> -<pre><code>/* Custom typeface */ -@import url(&quot;https://fonts.googleapis.com/css?family=Muli&quot;); +<pre><code>&#47;* Custom typeface *&#47; +@import url("https:&#47;&#47;fonts.googleapis.com&#47;css?family=Muli"); -/* Basic layout styling */ +&#47;* Basic layout styling *&#47; body { background: #d2dcff; margin: 80px 0 40px; } </code></pre> + <p>We then tackle the basic <strong>keyboard base</strong> element:</p> + <pre><code>.base { background: linear-gradient(180deg, #eee 0%, #d8d8d8 100%); border-radius: 20px; @@ -4294,11 +5668,11 @@ position: relative; width: 620px; } -/* This pseudo element is used for more realistic drop-shadows */ +&#47;* This pseudo element is used for more realistic drop-shadows *&#47; .base:after { bottom: 0; box-shadow: 0 10px 80px rgba(0,0,0,0.5); -content: ''; +content: &#39;&#39;; height: 50px; left: 7.5%; position: absolute; @@ -4306,7 +5680,9 @@ width: 85%; z-index: -1; } </code></pre> + <p>Next, we target all shared styles between the <strong>2 keyboard buttons</strong> to avoid repeating ourselves later on:</p> + <pre><code>.command, .z { -webkit-appearance: none; background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%); @@ -4324,17 +5700,19 @@ z-index: -1; } .command span, .z span { - font-family: 'Muli', 'Helvetica', sans-serif; + font-family: &#39;Muli&#39;, &#39;Helvetica&#39;, sans-serif; } -/* Styling when pressed */ +&#47;* Styling when pressed *&#47; .command:active, .z:active { box-shadow: inset 0 10px 10px rgba(0,0,0,0.2), inset 0 10px 30px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.6); margin: 25px 0 0 20px; } </code></pre> + <p>All that remains is to add the custom styling for each independent button:</p> -<pre><code>/* Custom Command styling */ + +<pre><code>&#47;* Custom Command styling *&#47; .command svg { height: 60px; right: 15px; @@ -4352,7 +5730,7 @@ z-index: -1; width: 100%; } -/* Custom &quot;Z&quot; Letter styling */ +&#47;* Custom "Z" Letter styling *&#47; .z { width: 260px; } @@ -4361,58 +5739,64 @@ z-index: -1; font-size: 150px; } </code></pre> -<h2>Taking it further</h2> + +<h2 id="taking-it-further">Taking it further</h2> + <p>You could easily improve upon this concept by rendering an entire interactive keyboard, if you so desired. But this is maybe something I would tackle at a later date when I have a little more free time 😉 For now, a simple mini undo keyboard is fun enough to play with.</p></content> - <link href="https://bt.ht/mini-interactive-keyboard-with-pure-css"/> - <id>https://bt.ht/mini-interactive-keyboard-with-pure-css</id> + <link href="https://btxx.org/mini-interactive-keyboard-with-pure-css"/> + <id>https://btxx.org/mini-interactive-keyboard-with-pure-css</id> <updated>2020-05-13T10:00:00Z</updated> <published>2020-05-13T10:00:00Z</published> </entry> <entry> <title>Menu Toggle with Pure CSS</title> - <content type="html"><h1>Menu Toggle with Pure CSS</h1> + <content type="html"><h1 id="menu-toggle-with-pure-css">Menu Toggle with Pure CSS</h1> + <p>2020-10-19</p> + <p>When thinking through navigation designs for mobile devices sometimes the best option is to store away the content behind a toggle button. This button would then display the menu items upon interaction. Let me show you how to create such an element with only CSS - no need for JavaScript today!</p> -<h2>Before we begin</h2> -<p>I would like to point out that the concept of "toggling" the main menu (even for mobile) is not always the best solution. If you're interested, you can take a look at a previous article I wrote explaining why: <a href="/hamburger-menu-alternative.html">Using Hamburger Menus? Try Sausage Links</a></p> -<p>Now that we have mentioned possible pitfalls of relying so heavily on toggle menus, let's build one!</p> -<h2>Our Final Product</h2> + +<h2 id="before-we-begin">Before we begin</h2> + +<p>I would like to point out that the concept of &#8220;toggling&#8221; the main menu (even for mobile) is not always the best solution. If you&#8217;re interested, you can take a look at a previous article I wrote explaining why: <a href="/hamburger-menu-alternative.html">Using Hamburger Menus? Try Sausage Links</a></p> + +<p>Now that we have mentioned possible pitfalls of relying so heavily on toggle menus, let&#8217;s build one!</p> + +<h2 id="our-final-product">Our Final Product</h2> + <p><img src="/public/images/menu-toggle-css.png" alt="Menu toggle made from pure CSS" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/mdEEvEX">Live CodePen Example</a></p> -<h2>The HTML</h2> -<p>To implement this design you really don't need much in terms of HTML:</p> -<ul> -<li>A single <code>checkbox</code> input</li> -<li>A <code>label</code> that corresponds to the <code>checkbox</code></li> -<li>A <code>nav</code> element to house our unordered list items</li> -</ul> -<pre><code>&lt;!-- The checkbox input &amp; label partner --&gt; -&lt;input type=&quot;checkbox&quot; id=&quot;menu-toggle&quot;&gt; -&lt;label for=&quot;menu-toggle&quot;&gt;Menu&lt;/label&gt; - -&lt;!-- The navigation we wish to toggle --&gt; -&lt;nav&gt; - &lt;ul&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Home&lt;/a&gt;&lt;/li&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Articles&lt;/a&gt;&lt;/li&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Colophon&lt;/a&gt;&lt;/li&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt; - &lt;/ul&gt; -&lt;/nav&gt; -</code></pre> -<p>That's it!</p> -<h2>The CSS</h2> -<p>The first thing we need to do is "hide" the <code>checkbox</code> input element. It's important to avoid using <code>display: none</code> or <code>visibility: hidden</code> in order to achieve this. Those CSS properties can negatively impact accessibility (specifically screen readers). So we will be relying on the <code>position</code>, <code>z-index</code> and <code>opacity</code> properties to help us out.</p> -<pre><code>/* Set the input position to absolute, send it off screen with zero opacity */ -input[type=&quot;checkbox&quot;] { + +<h2 id="the-html">The HTML</h2> + +<p>To implement this design you really don&#8217;t need much in terms of HTML:</p> + +<ul> +<li><p>A single <code>checkbox</code> input</p></li> +<li><p>A <code>label</code> that corresponds to the <code>checkbox</code></p></li> +<li><p>A <code>nav</code> element to house our unordered list items</p> + +<p>Menu</p></li> +</ul> + +<p>That&#8217;s it!</p> + +<h2 id="the-css">The CSS</h2> + +<p>The first thing we need to do is &#8220;hide&#8221; the <code>checkbox</code> input element. It&#8217;s important to avoid using <code>display: none</code> or <code>visibility: hidden</code> in order to achieve this. Those CSS properties can negatively impact accessibility (specifically screen readers). So we will be relying on the <code>position</code>, <code>z-index</code> and <code>opacity</code> properties to help us out.</p> + +<pre><code>&#47;* Set the input position to absolute, send it off screen with zero opacity *&#47; +input[type="checkbox"] { left: -9999px; opacity: 0; position: absolute; } </code></pre> + <p>Then we give our corresponding <code>label</code> a minor face-lift to make it appear more button-like:</p> -<pre><code>/* Minor visual styling to make the label more button-y */ + +<pre><code>&#47;* Minor visual styling to make the label more button-y *&#47; label { border: 1px solid currentColor; border-radius: 4px; @@ -4420,47 +5804,66 @@ label { padding: 10px; } </code></pre> -<p>For our main <code>nav</code> element, we want to set it's position to <code>absolute</code> in order to avoid any janky page rendering issues that might occur when toggling the menu:</p> + +<p>For our main <code>nav</code> element, we want to set it&#8217;s position to <code>absolute</code> in order to avoid any janky page rendering issues that might occur when toggling the menu:</p> + <p>` -</p> -<pre><code>/* Set nav to absolute (avoids odd page rendering space pop-in) */ -nav { - opacity: 0; - position: absolute; - z-index: -2; -} -</code></pre> + &#47;* Set nav to absolute (avoids odd page rendering space pop-in) *&#47; + nav { + opacity: 0; + position: absolute; + z-index: -2; + }</p> + <p>The last step is to actually <em>show</em> the menu if the user toggles the <code>checkbox</code>:</p> -<pre><code>/* Show nav when checkbox is checked */ -input[type=&quot;checkbox&quot;]:checked ~ nav { + +<pre><code>&#47;* Show nav when checkbox is checked *&#47; +input[type="checkbox"]:checked ~ nav { opacity: 1; z-index: 1; } </code></pre> + <p>It might not look like much, but you now have a fully functional menu toggle - <strong>made with pure CSS</strong>! </p> -<h2>With Great Power...</h2> -<p>Although this design is very simple to implement, please remember to use these types of menus wisely. Just because you <em>can</em> do something, doesn't always mean you <em>should</em>.</p></content> - <link href="https://bt.ht/menu-toggle-css"/> - <id>https://bt.ht/menu-toggle-css</id> + +<h2 id="with-great-power">With Great Power&#8230;</h2> + +<p>Although this design is very simple to implement, please remember to use these types of menus wisely. Just because you <em>can</em> do something, doesn&#8217;t always mean you <em>should</em>.</p></content> + <link href="https://btxx.org/menu-toggle-css"/> + <id>https://btxx.org/menu-toggle-css</id> <updated>2020-10-19T10:00:00Z</updated> <published>2020-10-19T10:00:00Z</published> </entry> <entry> <title>Replacing My Eero Mesh Network with Two Mangos</title> - <content type="html"><h1>Replacing My Eero Mesh Network with Two Mangos</h1> + <content type="html"><h1 id="replacing-my-eero-mesh-network-with-two-mangos">Replacing My Eero Mesh Network with Two Mangos</h1> + <p>2023-03-09</p> -<p>It has been one week since I retired my Eero mesh network setup and replaced it with two <a href="https://www.gl-inet.com/products/gl-mt300n-v2/">Mango Mini Travel Routers (GL-MT300N-V2)</a>. There were some obvious reasons to make this switch but I was initially unsure how the overall performance on the Mangos would hold up compared to the "cutting edge" tech that Eero devices claim to have.</p> -<p>Spoiler (in case the post title didn't give it away): I was pleasantly surprised.</p> -<h2>Goodbye Amazon</h2> -<p>I was a big supporter of the original "kickstarter" project when Eero first launched. I pre-ordered and they even sent me a device free-of-charge since there were logistic problems shipping to Canada. I received my V1 routers, hooked them up and enjoyed a seamless, wifi mesh system. Everything was going great.</p> -<p>Then, in 2019 <a href="https://mashable.com/article/amazon-acquires-eero">they were acquired by Amazon</a>. Sigh...</p> + +<p>It has been one week since I retired my Eero mesh network setup and replaced it with two <a href="https://www.gl-inet.com/products/gl-mt300n-v2/">Mango Mini Travel Routers (GL-MT300N-V2)</a>. There were some obvious reasons to make this switch but I was initially unsure how the overall performance on the Mangos would hold up compared to the &#8220;cutting edge&#8221; tech that Eero devices claim to have.</p> + +<p>Spoiler (in case the post title didn&#8217;t give it away): I was pleasantly surprised.</p> + +<h2 id="goodbye-amazon">Goodbye Amazon</h2> + +<p>I was a big supporter of the original &#8220;kickstarter&#8221; project when Eero first launched. I pre-ordered and they even sent me a device free-of-charge since there were logistic problems shipping to Canada. I received my V1 routers, hooked them up and enjoyed a seamless, wifi mesh system. Everything was going great.</p> + +<p>Then, in 2019 <a href="https://mashable.com/article/amazon-acquires-eero">they were acquired by Amazon</a>. Sigh&#8230;</p> + <p>I should have jumped ship then, but I waited to see what would happen. After all, my internet was still working perfectly fine. Then the half-baked and sometimes completely broken updates started rolling out. On more than one occasion they needed to perform complete version roll-backs. This sometimes knocked out my internet for hours at a time.</p> + <p>They also started pushing (although not outright requiring) users to login using their Amazon account. While not a massive deal breaker, the constant pestering to do so rubbed me the wrong way. </p> -<p>During this time, my first son was born and we moved out of the city into our first house. So fiddling with my internet setup took the backseat for a while. Once everything settled down, I started seeing more broken updates and certain features being put behind their premium "Eero Secure" platform. Features that were available as <em>default</em> for most other router hardware providers.</p> + +<p>During this time, my first son was born and we moved out of the city into our first house. So fiddling with my internet setup took the backseat for a while. Once everything settled down, I started seeing more broken updates and certain features being put behind their premium &#8220;Eero Secure&#8221; platform. Features that were available as <em>default</em> for most other router hardware providers.</p> + <p>So, I started to look at other options.</p> -<h2>Why the Mango?</h2> -<p>It is important to mention, that because I live out in rural Canada, my internet options are extremely limited. All providers are satellite-based since fiber cables are unheard of out in these areas. Because of this, my main internet speeds are limited to 25Mbps <em>baseline</em>. This is important to note, since my experience and router choice took this into consideration. If you're a current Eero user with 300Mbps+ speeds and are looking to switch wifi systems - the Mango is probably not the best for you.</p> + +<h2 id="why-the-mango">Why the Mango?</h2> + +<p>It is important to mention, that because I live out in rural Canada, my internet options are extremely limited. All providers are satellite-based since fiber cables are unheard of out in these areas. Because of this, my main internet speeds are limited to 25Mbps <em>baseline</em>. This is important to note, since my experience and router choice took this into consideration. If you&#8217;re a current Eero user with 300Mbps+ speeds and are looking to switch wifi systems - the Mango is probably not the best for you.</p> + <p>Luckily for me, the Mini Mangos were perfect for my basic requirements:</p> + <ul> <li>Max. 300Mbps Wi-Fi Speed (more than enough for my use-case)</li> <li>Running open-source software via <a href="https://openwrt.org/">openwrt</a></li> @@ -4468,12 +5871,11 @@ input[type=&quot;checkbox&quot;]:checked ~ nav { <li>Tiny physical footprint</li> <li>Extremely portable</li> </ul> -<h2>Setting Up the Yellow Squares</h2> -<p><figure> -<img src="/public/images/mango-router-1.png" alt="The Mango router from the left side"> -<figcaption>The little yellow mango in all its glory...</figcaption> -</figure></p> + +<h2 id="setting-up-the-yellow-squares">Setting Up the Yellow Squares</h2> + <p>Setup was a breeze compared to the Eero experience (which could only be performed through their mobile app via bluetooth and a great deal of repositioning the devices). The full process is essentially:</p> + <ol> <li>Power up the first Mango</li> <li>Connect laptop to the Mango via ethernet (you can also connect through wifi)</li> @@ -4481,144 +5883,199 @@ input[type=&quot;checkbox&quot;]:checked ~ nav { <li>Change SSID name, set device in router mode</li> <li>Enjoy your internet!</li> </ol> -<p>Since my office is fairly far away from the placement of the "main" Mango router, I placed the second device near my desk. I followed the same setup as above, except I set the mode as "repeater".</p> -<p>For my use case I actually set this device up with a separate SSID. This was just my personal preference. You don't have to do this. If you give both devices the same SSID name most modern devices will treat your network as if it <em>was</em> a mesh network. Pretty neat stuff.</p> + +<p>Since my office is fairly far away from the placement of the &#8220;main&#8221; Mango router, I placed the second device near my desk. I followed the same setup as above, except I set the mode as &#8220;repeater&#8221;.</p> + +<p>For my use case I actually set this device up with a separate SSID. This was just my personal preference. You don&#8217;t have to do this. If you give both devices the same SSID name most modern devices will treat your network as if it <em>was</em> a mesh network. Pretty neat stuff.</p> + <p>I plan to eventually add my Pi Zero running AdGuard Home back into the mix, but for now I just installed a small adblock package directly onto the router:</p> + <ul> <li><a href="https://github.com/openwrt/packages/tree/master/net/adblock">adblock package</a></li> </ul> -<h2>Performance Comparisons</h2> + +<h2 id="performance-comparisons">Performance Comparisons</h2> + <p>Everything below is just some basic testing I performed. Obviously it should be noted that your experience might be entirely different based on interference, building size, amount of devices connected, etc.</p> + <p>Stats for my original Eero mesh setup:</p> + <ul> <li>1 eero 6 pro, 1 eero 6+, 1 eero beacon</li> <li>Average internet testing speed: 25Mbps</li> <li>Consistent signal throughout the house</li> </ul> + <p>Stats for the new Mini Mango setup:</p> + <ul> <li>2 mini mangos (one in router mode, the other set as repeater)</li> <li>Average internet testing speed: 25Mbps</li> <li>Consistent signal throughout the house</li> </ul> -<h2>Extras</h2> + +<h2 id="extras">Extras</h2> + <p>Some additional data comparisons for those interested. Prices shown are in Canadian dollars.</p> + <table> -<tr><th></th><th>Eero</th><th>Mango</th></tr> -<tr><td><strong>Power</strong></td><td>5W</td><td>2.75W</td></tr> -<tr><td><strong>Size</strong> (mm)</td><td>139x139x55</td><td>58x58x22</td></tr> -<tr><td><strong>Bands</strong> (GHz)</td><td>2.4/5</td><td>2.4</td></tr> -<tr><td><strong>Cost</strong> (per unit)</td><td>$99+</td><td>$39</td></tr> +<thead> +<tr> +<th></th> +<th>Eero</th> +<th>Mango</th> +</tr> +</thead> + +<tbody> +<tr> +<td><strong>Power</strong></td> +<td>5W</td> +<td>2.75W</td> +</tr> +<tr> +<td><strong>Size</strong> (mm)</td> +<td>139x139x55</td> +<td>58x58x22</td> +</tr> +<tr> +<td><strong>Bands</strong> (GHz)</td> +<td>2.4&#47;5</td> +<td>2.4</td> +</tr> +<tr> +<td><strong>Cost</strong> (per unit)</td> +<td>$99+</td> +<td>$39</td> +</tr> +</tbody> </table> -That mostly covers it. I'm extremely happy with my switch away from the locked-down, "upsell" heavy Eeros. My only regret is that I didn't make this change sooner.</content> - <link href="https://bt.ht/mango"/> - <id>https://bt.ht/mango</id> + +<p>That mostly covers it. I&#8217;m extremely happy with my switch away from the locked-down, &#8220;upsell&#8221; heavy Eeros. My only regret is that I didn&#8217;t make this change sooner.</p></content> + <link href="https://btxx.org/mango"/> + <id>https://btxx.org/mango</id> <updated>2023-03-09T10:00:00Z</updated> <published>2023-03-09T10:00:00Z</published> </entry> <entry> <title>Working with `git` Patches in Apple Mail</title> - <content type="html"><h1>Working with <code>git</code> Patches in Apple Mail</h1> + <content type="html"><h1 id="working-with-patches-in-apple-mail">Working with <code>git</code> Patches in Apple Mail</h1> + <p>2023-05-11</p> -<blockquote><p><strong>Before we begin</strong>: You could likely automate this process in a more streamlined way, but for most use cases this workflow should be fine.</p> + +<blockquote> +<p><strong>Before we begin</strong>: You could likely automate this process in a more streamlined way, but for most use cases this workflow should be fine.</p> </blockquote> + <p>I recently covered how to <a href="/git-patches">work with git email patches in Evolution on Linux</a>, so I thought it would make sense to walk through a similar workflow for those using Apple Mail on MacOS. The idea is essentially the same, with just a little extra work involved.</p> -<h2>Create a "Patches" Mailbox</h2> -<p>The first thing you'll need to do is make a new <code>Patches</code> mailbox folder inside your existing mail account. Once done, your default Mail sidebar should look similar to the following:</p> -<p><figure> - <img src="/public/images/apple-mail-1.png" alt="The Apple Mail sidebar with the Patches folder present"> - <figcaption>The Apple Mail sidebar with the "Patches" folder present</figcaption> -</figure></p> -<h2>Applying Patches</h2> -<p>Now navigate to the email message containing a <code>git</code> patch. Right-click and select <em>Move to</em> &gt; <em>Patches</em>. Now in the sidebar, right-click your <em>Patches</em> folder and select <em>Export Mailbox...</em>. You'll be prompted to save this folder locally. I suggest having a top-level folder named <strong>Patches</strong> to make things consistent.</p> + +<h2 id="create-a-patches-mailbox">Create a &#8220;Patches&#8221; Mailbox</h2> + +<p>The first thing you&#8217;ll need to do is make a new <code>Patches</code> mailbox folder inside your existing mail account. Once done, your default Mail sidebar should look similar to the following:</p> + +<h2 id="applying-patches">Applying Patches</h2> + +<p>Now navigate to the email message containing a <code>git</code> patch. Right-click and select <em>Move to</em> &#62; <em>Patches</em>. Now in the sidebar, right-click your <em>Patches</em> folder and select <em>Export Mailbox&#8230;</em>. You&#8217;ll be prompted to save this folder locally. I suggest having a top-level folder named <strong>Patches</strong> to make things consistent.</p> + <p>Inside this folder you should see something similar to the following structure:</p> -<p><figure> - <img src="/public/images/apple-mail-2.png" alt="The contents of the saved Patches mailbox folder"> - <figcaption>The contents of the saved Patches mailbox folder</figcaption> -</figure></p> + <p>Once saved, open your terminal, navigate to the project you wish to apply this new patch to:</p> -<pre><code>cd my-path/very-cool-project + +<pre><code>cd my-path&#47;very-cool-project </code></pre> + <p>and then run:</p> -<pre><code>git apply ~/Patches/&lt;saved-patches-mailbox-folder&gt;/mbox + +<pre><code>git apply ~&#47;Patches&#47;&#60;saved-patches-mailbox-folder&#62;&#47;mbox </code></pre> -<p>Congrats! You've successfully applied a git email patch through Apple Mail! Well, kind of. The terminal did most of the <em>real</em> work. Just be sure to periodically <em>purge</em> your local <em>Patches</em> folder to keep things clean!</p></content> - <link href="https://bt.ht/mail"/> - <id>https://bt.ht/mail</id> + +<p>Congrats! You&#8217;ve successfully applied a git email patch through Apple Mail! Well, kind of. The terminal did most of the <em>real</em> work. Just be sure to periodically <em>purge</em> your local <em>Patches</em> folder to keep things clean!</p></content> + <link href="https://btxx.org/mail"/> + <id>https://btxx.org/mail</id> <updated>2023-05-11T10:00:00Z</updated> <published>2023-05-11T10:00:00Z</published> </entry> <entry> <title>Create a Mac App Icon with Pure HTML and CSS</title> - <content type="html"><h1>Create a Mac App Icon with Pure HTML and CSS</h1> + <content type="html"><h1 id="create-a-mac-app-icon-with-pure-html-and-css">Create a Mac App Icon with Pure HTML and CSS</h1> + <p>2021-04-13</p> -<p>I have always been a huge fan of <a href="https://dribbble.com/bg-d">Bogdan's work on Dribbble</a> and was recently inspired to see if I could replicate one of his awesome icon designs with only HTML &amp; CSS. What was the outcome? I think it's a half-way decent copy - of course the original will always look significantly better.</p> -<p>Don't care about reading through the tutorial? No problem! You can <a href="#demo">jump right down to the live demo</a></p> -<h2>The Comparison</h2> -<p>Let's take a look at the original Dribbble shot:</p> -<p><figure> - <img src="/public/images/e54ac9b2850f786471d7790bec3844a6.webp" alt="Big Sur Icon"> - <figcaption>The original Dribbble shot (<a href="/public/images/e54ac9b2850f786471d7790bec3844a6.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>And now let's see what we will be creating with only HTML &amp; CSS:</p> -<p><figure> - <img src="/public/images/big-sur-css.webp" alt="Big Sur Icon"> - <figcaption>What we are going to create with pure HTML &amp; CSS (<a href="/public/images/big-sur-css.webp">direct link to image</a>)</figcaption> -</figure></p> + +<p>I have always been a huge fan of <a href="https://dribbble.com/bg-d">Bogdan&#8217;s work on Dribbble</a> and was recently inspired to see if I could replicate one of his awesome icon designs with only HTML &#38; CSS. What was the outcome? I think it&#8217;s a half-way decent copy - of course the original will always look significantly better.</p> + +<p>Don&#8217;t care about reading through the tutorial? No problem! You can <a href="#demo">jump right down to the live demo</a></p> + +<h2 id="the-comparison">The Comparison</h2> + +<p>Let&#8217;s take a look at the original Dribbble shot:</p> + +<p>And now let&#8217;s see what we will be creating with only HTML &#38; CSS:</p> + <p>Like I said - far from perfect but still a fun experiment!</p> -<h2>The HTML</h2> -<p>Let's jump right in and build out the main skeleton of our project:</p> -<pre><code>&lt;div class=&quot;white-square&quot;&gt;&lt;/div&gt; -&lt;div class=&quot;blue-square&quot;&gt; - &lt;div class=&quot;row&quot;&gt; - &lt;div class=&quot;item&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;item&quot;&gt;&lt;/div&gt; - &lt;/div&gt; - &lt;div class=&quot;row&quot;&gt; - &lt;div class=&quot;item&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;item&quot;&gt;&lt;/div&gt; - &lt;/div&gt; - &lt;div class=&quot;row&quot;&gt; - &lt;div class=&quot;item&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;item&quot;&gt;&lt;/div&gt; - &lt;/div&gt; - &lt;div class=&quot;row&quot;&gt; - &lt;div class=&quot;item&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;item&quot;&gt;&lt;/div&gt; - &lt;/div&gt; - &lt;div class=&quot;row&quot;&gt; - &lt;div class=&quot;item&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;item&quot;&gt;&lt;/div&gt; - &lt;/div&gt; - &lt;div class=&quot;row&quot;&gt; - &lt;div class=&quot;item&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;item&quot;&gt;&lt;/div&gt; - &lt;/div&gt; - &lt;div class=&quot;row&quot;&gt; - &lt;div class=&quot;item&quot;&gt;&lt;/div&gt; - &lt;div class=&quot;item&quot;&gt;&lt;/div&gt; - &lt;/div&gt; -&lt;/div&gt; -&lt;div class=&quot;play-button&quot;&gt; - &lt;div class=&quot;triangle&quot;&gt;&lt;/div&gt; -&lt;/div&gt; -</code></pre> -<p> - The <code>white-square</code> element is the white, rounded square in the background - - The <code>blue-square</code> is the main blue square of the icon - - The <code>row</code> elements inside the <code>blue-square</code> will be our individual <em>lines</em> spread across the icon - - The <code>play-button</code> is obviously - the play button</p> -<p> Right now it will look like nothing, but we can change that by adding the most important part...</p> -<h2>The CSS</h2> -<p>Pasting the entire CSS styling here would end up looking a little daunting. Instead, I'm just going to breakdown each individual section to make things more digestible.</p> -<h3>Defaults &amp; the White Square</h3> + +<h2 id="the-html">The HTML</h2> + +<p>Let&#8217;s jump right in and build out the main skeleton of our project:</p> + +<pre><code>&#60;div class="white-square"&#62;&#60;&#47;div&#62; +&#60;div class="blue-square"&#62; + &#60;div class="row"&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="row"&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="row"&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="row"&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="row"&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="row"&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="row"&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; +&#60;div class="play-button"&#62; + &#60;div class="triangle"&#62;&#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<ul> +<li><p>The <code>white-square</code> element is the white, rounded square in the background</p></li> +<li><p>The <code>blue-square</code> is the main blue square of the icon</p></li> +<li><p>The <code>row</code> elements inside the <code>blue-square</code> will be our individual <em>lines</em> spread across the icon</p></li> +<li><p>The <code>play-button</code> is obviously - the play button</p> + +<p>Right now it will look like nothing, but we can change that by adding the most important part&#8230;</p></li> +</ul> + +<h2 id="the-css">The CSS</h2> + +<p>Pasting the entire CSS styling here would end up looking a little daunting. Instead, I&#8217;m just going to breakdown each individual section to make things more digestible.</p> + +<h3 id="defaults-the-white-square">Defaults &#38; the White Square</h3> + <pre><code>* { box-sizing: border-box; } :root { --row-distance: 42px; } -</code></pre> -<pre><code>.white-square { + +.white-square { background: white; border-radius: 105px; box-shadow: inset 0 -5px 8px rgba(0,0,0,0.25), 0 12px 10px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1); @@ -4630,7 +6087,9 @@ That mostly covers it. I'm extremely happy with my switch away from the lock width: 420px; } </code></pre> + <p>See that <code>--row-distance</code> variable? That will come into play a bit later. For now, we want to lay the Blue Square on top of this newly creating White Square:</p> + <pre><code>.blue-square { background: linear-gradient(#04BDFD 0%, #0585E4 100%); border-radius: 105px; @@ -4643,8 +6102,11 @@ That mostly covers it. I'm extremely happy with my switch away from the lock width: 420px; } </code></pre> -<h2>Targeting the Inner Rows</h2> -<p>So far so good. The next part <em>looks</em> like a lot, but I assure you it's fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total). First we start with the parent <code>row</code> styling:</p> + +<h2 id="targeting-the-inner-rows">Targeting the Inner Rows</h2> + +<p>So far so good. The next part <em>looks</em> like a lot, but I assure you it&#8217;s fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total). First we start with the parent <code>row</code> styling:</p> + <pre><code>.blue-square .row { display: flex; height: 20px; @@ -4654,7 +6116,9 @@ That mostly covers it. I'm extremely happy with my switch away from the lock width: 100%; } </code></pre> + <p>Now we style each individual row item via the <code>nth-of-type</code> attribute:</p> + <pre><code>.blue-square .row:nth-of-type(2) { margin-top: var(--row-distance); } .blue-square .row:nth-of-type(2) .item:nth-of-type(odd) { width: 85px; @@ -4708,9 +6172,13 @@ That mostly covers it. I'm extremely happy with my switch away from the lock width: calc(100% - 55px); } </code></pre> -<p>Take a few moments to read everything over - it will help you better understand what's going on. Basically, we are adding two inner elements to each row element. We calculate the <code>margin-top</code> distance by using that <code>--row-distance</code> variable I mentioned earlier. The inner elements are then styled based on their placement inside the row (<code>nth-of-type</code>).</p> -<h3>The Play Button</h3> + +<p>Take a few moments to read everything over - it will help you better understand what&#8217;s going on. Basically, we are adding two inner elements to each row element. We calculate the <code>margin-top</code> distance by using that <code>--row-distance</code> variable I mentioned earlier. The inner elements are then styled based on their placement inside the row (<code>nth-of-type</code>).</p> + +<h3 id="the-play-button">The Play Button</h3> + <p>Now we finish things off with a much simpler element to style:</p> + <pre><code>.play-button { backdrop-filter: blur(6px); border-radius: 9999px; @@ -4725,7 +6193,7 @@ That mostly covers it. I'm extremely happy with my switch away from the lock .play-button::before { background: rgba(255,255,255,0.9); border-radius: 9999px; - content:''; + content:&#39;&#39;; filter: blur(40px); height: 150%; left: -25%; @@ -4744,7 +6212,7 @@ That mostly covers it. I'm extremely happy with my switch away from the lock } .triangle:before, .triangle:after { - content: ''; + content: &#39;&#39;; position: absolute; background-color: inherit; } @@ -4766,145 +6234,177 @@ That mostly covers it. I'm extremely happy with my switch away from the lock transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); } </code></pre> -<p>Thanks to <a href="https://m.nintendojo.fr/@meduz/106059826445460903">meduz</a> for pointing out the <code>backdrop-filter</code> property. This allows for a frosted glass look on Chromium &amp; Safari (although sadly not on Firefox). The <code>triangle</code> element could also be improved by using an embedded <code>SVG</code> but I was determined to use only CSS for this experiment :P</p> -<p>That's really all there is to it! You can see the embedded CodePen example below or <a href="https://codepen.io/bradleytaunt/pen/bGgBRaV">check it out directly here &amp;rarr;</a></p> -<hr /> -<h3>Special Thanks</h3> + +<p>Thanks to <a href="https://m.nintendojo.fr/@meduz/106059826445460903">meduz</a> for pointing out the <code>backdrop-filter</code> property. This allows for a frosted glass look on Chromium &#38; Safari (although sadly not on Firefox). The <code>triangle</code> element could also be improved by using an embedded <code>SVG</code> but I was determined to use only CSS for this experiment :P</p> + +<p>That&#8217;s really all there is to it! You can see the embedded CodePen example below or <a href="https://codepen.io/bradleytaunt/pen/bGgBRaV">check it out directly here &#8594;</a></p> + +<hr/> + +<h3 id="special-thanks">Special Thanks</h3> + <p>Thanks to Bogdan for letting me butcher the original Dribbble shot :D</p> + <ul> <li><a href="http://bg-d.net/">bg-d.net</a></li> <li><a href="https://dribbble.com/bg-d">Bogdan on Dribbble</a></li> </ul> -<hr /> -<p><h2 id="demo">Live Demo (CodePen)</h2></p> + +<hr/> + <p><a href="https://codepen.io/bradleytaunt/pen/bGgBRaV">Live CodePen Demo</a></p></content> - <link href="https://bt.ht/macos-icon-css"/> - <id>https://bt.ht/macos-icon-css</id> + <link href="https://btxx.org/macos-icon-css"/> + <id>https://btxx.org/macos-icon-css</id> <updated>2021-04-13T10:00:00Z</updated> <published>2021-04-13T10:00:00Z</published> </entry> <entry> <title>Convert Files to HTML with macOS Automator Quick Actions</title> - <content type="html"><h1>Convert Files to HTML with macOS Automator Quick Actions</h1> + <content type="html"><h1 id="convert-files-to-html-with-macos-automator-quick-actions">Convert Files to HTML with macOS Automator Quick Actions</h1> + <p>2022-01-28</p> -<p>Since a few people have reached out and thanked me for my previous post <a href="/batch-webp-conversion">Batch Converting Images to webp with macOS Automator</a>, I thought I would continue to share more of my own custom Automator Quick Actions. Today's post will cover the ability to convert <em>any</em> text-based document into pure HTML.</p> + +<p>Since a few people have reached out and thanked me for my previous post <a href="/batch-webp-conversion">Batch Converting Images to webp with macOS Automator</a>, I thought I would continue to share more of my own custom Automator Quick Actions. Today&#8217;s post will cover the ability to convert <em>any</em> text-based document into pure HTML.</p> + <p>I know - there are over 6 billion conversion apps that do this very same thing. But our way of doing it is <em>cooler</em>. Our conversion tool:</p> + <ul> <li>Will run directly inside macOS Finder (right-click actions FTW)</li> <li>Can batch convert multiple files at once</li> <li>Can convert mixed files types at the same time</li> </ul> -<p>And it can do all of this for free on your existing macOS system. No apps required. So, enough chit-chat, let's get started!</p> -<h2>The Dependencies</h2> -<p>Unfortunately, setting things up isn't as simple as clicking a single <code>Install</code> button and calling it a day. But don't start to panic! I assure you everything we'll be doing is actually quite easy to breeze through - <em>trust me</em>.</p> + +<p>And it can do all of this for free on your existing macOS system. No apps required. So, enough chit-chat, let&#8217;s get started!</p> + +<h2 id="the-dependencies">The Dependencies</h2> + +<p>Unfortunately, setting things up isn&#8217;t as simple as clicking a single <code>Install</code> button and calling it a day. But don&#8217;t start to panic! I assure you everything we&#8217;ll be doing is actually quite easy to breeze through - <em>trust me</em>.</p> + <p>Our main requirements will consistent of the following:</p> + <ul> <li>Homebrew</li> <li>Pandoc</li> <li>Ability to open Terminal</li> </ul> -<h2>Installing Homebrew</h2> -<p>Homebrew is a simple package manager for macOS. The beauty of having Homebrew is the flexibility in the future for installing other custom packages. Overall it's just a nice piece of software to have on your machine.</p> + +<h2 id="installing-homebrew">Installing Homebrew</h2> + +<p>Homebrew is a simple package manager for macOS. The beauty of having Homebrew is the flexibility in the future for installing other custom packages. Overall it&#8217;s just a nice piece of software to have on your machine.</p> + <p>If you have already installed Homebrew in the past, ignore this step and continue down the page. If not, simply open your Terminal and run:</p> -<pre><code>/bin/bash -c &quot;$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)&quot; + +<pre><code>&#47;bin&#47;bash -c "$(curl -fsSL https:&#47;&#47;raw.githubusercontent.com&#47;Homebrew&#47;install&#47;HEAD&#47;install.sh)" </code></pre> -<p>Let that finish and you're done! Also feel free to read more about Homebrew on the <a href="https://brew.sh">official website</a>. Knowledge is power!</p> -<h2>Installing Pandoc</h2> + +<p>Let that finish and you&#8217;re done! Also feel free to read more about Homebrew on the <a href="https://brew.sh">official website</a>. Knowledge is power!</p> + +<h2 id="installing-pandoc">Installing Pandoc</h2> + <p>The package that is going to be doing all the heavy-lifting for us is <a href="https://pandoc.org">pandoc</a>. Because we have Homebrew on our machine now, installing this package is as simple as opening our Terminal again and running:</p> + <pre><code>brew install pandoc </code></pre> -<p>Wait for everything to finish and you're done!</p> -<h2>Our Custom Automator Quick Action</h2> -<p>Next you'll want to open the macOS Automator app and create a new "Quick Action" when given the prompt to do so.</p> -<p><figure> - <img src="/public/images/new-automator.png" alt="Toggle prompt for new automation in macOS Automator"> - <figcaption>After opening Automator, select "Quick Action" from the menu (<a href="/public/images/new-automator.webp">link to hi-res image</a>)</figcaption> -</figure></p> + +<p>Wait for everything to finish and you&#8217;re done!</p> + +<h2 id="our-custom-automator-quick-action">Our Custom Automator Quick Action</h2> + +<p>Next you&#8217;ll want to open the macOS Automator app and create a new &#8220;Quick Action&#8221; when given the prompt to do so.</p> + <p>Now do the following (reference the image further below to make sure your parameters match):</p> + <ol> -<li>Set "Workflow receives current" to <strong>documents</strong> in <strong>any application</strong></li> -<li>In the search bar type in "Run Shell Script"</li> -<li>Drag-and-drop the "Run Shell Script" from the left pane into the right pane</li> -<li>Set the "Shell" parameter to <strong>/bin/bash</strong></li> -<li>Set "Pass input" as <strong>as arguments</strong></li> +<li>Set &#8220;Workflow receives current&#8221; to documents in any application</li> +<li>In the search bar type in &#8220;Run Shell Script&#8221;</li> +<li>Drag-and-drop the &#8220;Run Shell Script&#8221; from the left pane into the right pane</li> +<li>Set the &#8220;Shell&#8221; parameter to &#47;bin&#47;bash</li> +<li>Set &#8220;Pass input&#8221; as as arguments</li> </ol> -<p>Once all that is done, simply paste the following in the open text field within the "Run Shell Script" item:</p> -<pre><code>for f in &quot;$@&quot; + +<p>Once all that is done, simply paste the following in the open text field within the &#8220;Run Shell Script&#8221; item:</p> + +<pre><code>for f in "$@" do -/opt/homebrew/bin/pandoc -o &quot;${f%.*}.html&quot; &quot;$f&quot; +&#47;opt&#47;homebrew&#47;bin&#47;pandoc -o "${f%.*}.html" "$f" done </code></pre> -<p>If you've done everything correctly it should look something like this:</p> -<p><figure> - <img src="/public/images/new-automator-2.png" alt="Automator quick action details for converting to HTML"> - <figcaption>This is what your finished Automator quick action should look like (<a href="/public/images/new-automator-2.webp">link to hi-res image</a>)</figcaption> -</figure></p> -<p>Save this new Quick Action (Name is something like "Convert to HTML" to keep things simple). That's it! Amazing, right?</p> -<h2>Time to Convert</h2> + +<p>If you&#8217;ve done everything correctly it should look something like this:</p> + +<p>Save this new Quick Action (Name is something like &#8220;Convert to HTML&#8221; to keep things simple). That&#8217;s it! Amazing, right?</p> + +<h2 id="time-to-convert">Time to Convert</h2> + <p>Now it is finally time to see our Quick Action is <em>action</em>! Navigate to any document file in a Finder window and follow along.</p> + <ol> <li>First, right-click on the file you wish to convert. (<a href="#fig-1">Figure 1</a>)</li> <li>In the pop-up container, scroll down and hover over <code>Quick Actions</code>.</li> <li>A secondary pop-out will appear. Look for the action <code>Convert File to HTML</code> and click it. (<a href="#fig-2">Figure 2</a>)</li> </ol> -<p><figure id="fig-1"> - <img src="/public/images/macos-convert-1.png" alt="A markdown file in macOS Finder"> - <figcaption><strong>Figure 1:</strong> Finding and right-clicking on your desired file (<a href="/public/images/macos-convert-1.webp">link to hi-res image</a>)</figcaption> -</figure></p> -<p><figure id="fig-2"> - <img src="/public/images/macos-convert-2.png" alt="Convert to HTML action selection"> - <figcaption><strong>Figure 2:</strong> From the "Quick Actions" menu, select "Convert to HTML" (<a href="/public/images/macos-convert-2.webp">link to hi-res image</a>)</figcaption> -</figure></p> + <p>If everything was set up properly (and depending on the size of the file) you should see your converted HTML file show up right next to your existing document. Time to celebrate!</p> -<p>Don't forget - you can also <em>batch</em> convert multiple files and multiple file <em>types</em> at once. The possibilities are endless!</p> -<p><figure> - <img src="/public/images/macos-convert-3.png" alt="Finder window showing a Markdown file and an HTML file"> - <figcaption>Our converted document is now available in HTML. Absolutely glorious. (<a href="/public/images/macos-convert-3.webp">link to hi-res image</a>)</figcaption> -</figure></p> -<h2>No Limits</h2> + +<p>Don&#8217;t forget - you can also <em>batch</em> convert multiple files and multiple file <em>types</em> at once. The possibilities are endless!</p> + +<h2 id="no-limits">No Limits</h2> + <p>Although this article has mainly focused on converting documents to HTML, <code>pandoc</code> is so powerful you could do any number of conversions. Re-using these steps above, you have the ability to make as many different conversion quick actions as your heart desires!</p> + <p>Have fun converting!</p></content> - <link href="https://bt.ht/macos-convert-to-html"/> - <id>https://bt.ht/macos-convert-to-html</id> + <link href="https://btxx.org/macos-convert-to-html"/> + <id>https://btxx.org/macos-convert-to-html</id> <updated>2022-01-28T10:00:00Z</updated> <published>2022-01-28T10:00:00Z</published> </entry> <entry> <title>My Robotic Mower Woes</title> - <content type="html"><h1>My Robotic Mower Woes</h1> + <content type="html"><h1 id="my-robotic-mower-woes">My Robotic Mower Woes</h1> + <p>2023-05-19</p> -<h2>A Brief Background</h2> -<p>I'm no stranger to robotic lawnmowers. When my wife and I moved into our rural home just over five years ago, we picked up the Husqvarna 450X Automower since I was far too lazy to manually mow my property and the cost was equal to that of a standard riding mower. It was a no-brainer.</p> -<p><figure> - <img src="/public/images/mower-1.jpeg" alt="The Husqvarna 450X"> - <figcaption>The Husqvarna 450X (not mine but same model)</figcaption> -</figure></p> -<p>Fast-forward five years. Everything is still going great with the Automower. Some minor repairs were needed but that was mostly my fault since I was allowing the mower into places it shouldn't have been (ie. root systems and dirt "craters"). Then lightning struck our backyard at the beginning of April this year. The mower was fine, since we stow it away inside for the winter but the charging station, charging brick and perimeter wire we <em>not</em> so lucky...</p> -<p>The lightning traveled along the main perimeter wire and went straight to the charging station. Boom. The charging dock was quite literally blown up into a million tiny pieces and scattered across my backyard. Giant trenches were carved up where the perimeter wire had been embedded in the lawn. This surge also followed the path towards the main power adapter and exploded that as well. All of this happened even with the charging station / adapter <em>turned off and unplugged from any outlet</em>. At least my mower was safe...</p> -<h2>Shopping for Automower Parts</h2> -<p>I realized I was going to have to buy another charging station, power adapter and also pay for a dealer to re-install the perimeter wire. This idea didn't thrill me but at least all-in the expense wouldn't be that high. Or so I thought...</p> + +<h2 id="a-brief-background">A Brief Background</h2> + +<p>I&#8217;m no stranger to robotic lawnmowers. When my wife and I moved into our rural home just over five years ago, we picked up the Husqvarna 450X Automower since I was far too lazy to manually mow my property and the cost was equal to that of a standard riding mower. It was a no-brainer.</p> + +<p>Fast-forward five years. Everything is still going great with the Automower. Some minor repairs were needed but that was mostly my fault since I was allowing the mower into places it shouldn&#8217;t have been (ie. root systems and dirt &#8220;craters&#8221;). Then lightning struck our backyard at the beginning of April this year. The mower was fine, since we stow it away inside for the winter but the charging station, charging brick and perimeter wire we <em>not</em> so lucky&#8230;</p> + +<p>The lightning traveled along the main perimeter wire and went straight to the charging station. Boom. The charging dock was quite literally blown up into a million tiny pieces and scattered across my backyard. Giant trenches were carved up where the perimeter wire had been embedded in the lawn. This surge also followed the path towards the main power adapter and exploded that as well. All of this happened even with the charging station &#47; adapter <em>turned off and unplugged from any outlet</em>. At least my mower was safe&#8230;</p> + +<h2 id="shopping-for-automower-parts">Shopping for Automower Parts</h2> + +<p>I realized I was going to have to buy another charging station, power adapter and also pay for a dealer to re-install the perimeter wire. This idea didn&#8217;t thrill me but at least all-in the expense wouldn&#8217;t be that high. Or so I thought&#8230;</p> + <p>I contacted my local dealer and he quoted me directly from the Husqvarna supplier:</p> + <ul> <li>Charging base station: $749 CDN</li> <li>Power adapter: $599 CDN</li> <li>Perimeter wire install: ~$550 CDN</li> </ul> -<p>I thought the cost for both the charging station and the wire install seemed about right - but <strong>$599</strong> for a power adapter?! Are you kidding me? Best of all, these parts were on <em>back-order</em>. So even if I shelled out the ridiculous asking price, it was anyone's guess when I would get them. May was fast approaching and I would need to start cutting my property soon. I started to look at other options.</p> -<h2>Husqvarna EPOS Mowers</h2> -<p>Husqvarna recently launched their "perimeter-free" automowers for the general public (originally designed only for "fleet" enterprise use). These units use GPS and RTK position to map the desired cutting area of a property. Already my interest was piqued. Moving away from a perimeter wire seemed like a significant upgrade. It would also make my wife happy by allow her to garden freely, without worrying about severing an embedded lawn wire.</p> + +<p>I thought the cost for both the charging station and the wire install seemed about right - but <strong>$599</strong> for a power adapter?! Are you kidding me? Best of all, these parts were on <em>back-order</em>. So even if I shelled out the ridiculous asking price, it was anyone&#8217;s guess when I would get them. May was fast approaching and I would need to start cutting my property soon. I started to look at other options.</p> + +<h2 id="husqvarna-epos-mowers">Husqvarna EPOS Mowers</h2> + +<p>Husqvarna recently launched their &#8220;perimeter-free&#8221; automowers for the general public (originally designed only for &#8220;fleet&#8221; enterprise use). These units use GPS and RTK position to map the desired cutting area of a property. Already my interest was piqued. Moving away from a perimeter wire seemed like a significant upgrade. It would also make my wife happy by allow her to garden freely, without worrying about severing an embedded lawn wire.</p> + <p>So I contacted my local dealer again about these specific units. I came away with some interesting information:</p> + <ol> <li>They were quite expensive for my taste ($5000+ CDN - before install!)</li> <li>They were <em>also</em> on back-order here in Canada</li> </ol> + <p><em>Sigh</em>. The mower gods were trying to tell me something. It seemed Husqvarna was just not meant for me anymore.</p> -<h2>Luba to the Rescue!</h2> -<p>While researching "wireless" automowers, I came across the <a href="https://mammotion.com/?ref=bpjfzw7s">Luba Series 5000</a> (referral link) and kept it in my "maybe" pile to follow-up on if needed. So follow-up I did.</p> -<p><figure> - <img src="/public/images/mower-2.webp" alt="The Luba Series 5000"> - <figcaption>The Luba Series 5000 AWD (not mine but same model)</figcaption> -</figure></p> + +<h2 id="luba-to-the-rescue">Luba to the Rescue!</h2> + +<p>While researching &#8220;wireless&#8221; automowers, I came across the <a href="https://mammotion.com/?ref=bpjfzw7s">Luba Series 5000</a> (referral link) and kept it in my &#8220;maybe&#8221; pile to follow-up on if needed. So follow-up I did.</p> + <p>This mower seemed to check all my boxes:</p> + <ul> <li>Decently priced</li> <li>2-year warranty</li> @@ -4913,204 +6413,275 @@ done <li>No perimeter wires</li> <li>No-go zones available</li> </ul> + <p>It did have a few minor cons associated with it:</p> + <ul> -<li>Fairly new product / company</li> +<li>Fairly new product &#47; company</li> <li>No close dealer in my area</li> -<li>iOS and Android apps are more or less "beta"</li> -</ul> -<p>Next, I watched a few early reviews and went through some comments/feedback from beta users. I was convinced enough and bought the AWD 5000 model.</p> -<h2>Arrival and Setup</h2> -<p>The mower (who we named Lawna, and shall be referred to as such moving forward) arrived just after the first week of May. The hardware setup (charging station and RTK antenna) was very straight-forward, so I won't go into great detail about that here. Once Lawna was synced with the RTK and GPS system, it was time to map my property.</p> -<p>I broke my property into 4 main "tasks" as the app calls them. The 5000 model allows you to create up to 10, but for my needs 4 was fine for full coverage. I mapped each one, added a handful of no-go zones to each and told Lawna to get to work. She happily obliged.</p> -<h2>The First Week</h2> -<p>I've had (almost) zero issues with Lawna after a week and a half of running her daily. She alternates from the front to the back of the property every other day. The app allows you to setup automatic scheduling, but I prefer to run things manually every morning, based on whether an area should be skipped, grass it dried out etc.</p> -<p>The only minor problem I have run into is the need to manually clean grass build-up from under the small cutting blades after Lawna cuts a couple "task" areas. I swapped the default blades to use Husqvarna's <em>endurance</em> type, since they use a large slotted insert hole as opposed to Mammotion's two single insert holes. This change makes cleaning the blades faster, safer, and easier to maintain. I realize that a riding mower would require similar maintenance but a truly <em>autonomous</em> device shouldn't require human intervention.</p> -<h2>Moving Forward</h2> -<p>My hope is that the software continues to improve over time and that the core hardware lasts as long as my 450X did. Which now reminds me - I need to sell that thing...</p> +<li>iOS and Android apps are more or less &#8220;beta&#8221;</li> +</ul> + +<p>Next, I watched a few early reviews and went through some comments&#47;feedback from beta users. I was convinced enough and bought the AWD 5000 model.</p> + +<h2 id="arrival-and-setup">Arrival and Setup</h2> + +<p>The mower (who we named Lawna, and shall be referred to as such moving forward) arrived just after the first week of May. The hardware setup (charging station and RTK antenna) was very straight-forward, so I won&#8217;t go into great detail about that here. Once Lawna was synced with the RTK and GPS system, it was time to map my property.</p> + +<p>I broke my property into 4 main &#8220;tasks&#8221; as the app calls them. The 5000 model allows you to create up to 10, but for my needs 4 was fine for full coverage. I mapped each one, added a handful of no-go zones to each and told Lawna to get to work. She happily obliged.</p> + +<h2 id="the-first-week">The First Week</h2> + +<p>I&#8217;ve had (almost) zero issues with Lawna after a week and a half of running her daily. She alternates from the front to the back of the property every other day. The app allows you to setup automatic scheduling, but I prefer to run things manually every morning, based on whether an area should be skipped, grass it dried out etc.</p> + +<p>The only minor problem I have run into is the need to manually clean grass build-up from under the small cutting blades after Lawna cuts a couple &#8220;task&#8221; areas. I swapped the default blades to use Husqvarna&#8217;s <em>endurance</em> type, since they use a large slotted insert hole as opposed to Mammotion&#8217;s two single insert holes. This change makes cleaning the blades faster, safer, and easier to maintain. I realize that a riding mower would require similar maintenance but a truly <em>autonomous</em> device shouldn&#8217;t require human intervention.</p> + +<h2 id="moving-forward">Moving Forward</h2> + +<p>My hope is that the software continues to improve over time and that the core hardware lasts as long as my 450X did. Which now reminds me - I need to sell that thing&#8230;</p> + <p>Hopefully this post helps others looking to snag their own robotic mower. So far, I can safely recommend Luba.</p></content> - <link href="https://bt.ht/luba"/> - <id>https://bt.ht/luba</id> + <link href="https://btxx.org/luba"/> + <id>https://btxx.org/luba</id> <updated>2023-05-19T10:00:00Z</updated> <published>2023-05-19T10:00:00Z</published> </entry> <entry> <title>Looping Through Jekyll Collections</title> - <content type="html"><h1>Looping Through Jekyll Collections</h1> + <content type="html"><h1 id="looping-through-jekyll-collections">Looping Through Jekyll Collections</h1> + <p>2022-08-12</p> -<p>I recently needed to add a couple new items to my wife's personal recipe website (<a href="https://cookingwith.casa">cookingwith.casa</a>) which I hadn't touched in quite a while. The Jekyll build still worked fine, but I realized I was statically adding each <code>collection</code> by hand on the main homepage[^1].</p> + +<p>I recently needed to add a couple new items to my wife&#8217;s personal recipe website (<a href="https://cookingwith.casa">cookingwith.casa</a>) which I hadn&#8217;t touched in quite a while. The Jekyll build still worked fine, but I realized I was statically adding each <code>collection</code> by hand on the main homepage[^1].</p> + <p>Not so good.</p> -<p>Of course, this wasn't difficult at all to fix. Now everything is much more "hands free" moving forward. I figured I would share the details here in the hopes that others mind find it useful. Plus, it's my blog - so I'll do what I want!</p> -<h2>Looping Our Collections</h2> + +<p>Of course, this wasn&#8217;t difficult at all to fix. Now everything is much more &#8220;hands free&#8221; moving forward. I figured I would share the details here in the hopes that others mind find it useful. Plus, it&#8217;s my blog - so I&#8217;ll do what I want!</p> + +<h2 id="looping-our-collections">Looping Our Collections</h2> + <p>We want Jekyll to make things as streamlined as possible for us. This means that if I decide to add a new collection it will automatically render it along the others on the homepage.</p> + <p>Work smart not hard!</p> -<p>Let's take a look at the bare-bones collections loop:</p> + +<p>Let&#8217;s take a look at the bare-bones collections loop:</p> + <pre><code>{% for collection in site.collections %} - &lt;!-- Our code goes here --&gt; + &#60;!-- Our code goes here --&#62; {% endfor %} </code></pre> + <p>Then we need to include an <code>if</code> statement to avoid pulling in standard <code>post</code> items (or leave this in if that is desired):</p> + <pre><code>{% for collection in site.collections %} - {% if collection.label != 'posts' %} + {% if collection.label != &#39;posts&#39; %} {% endif %} {% endfor %} </code></pre> + <p>Now for my specific use case, we want to display each collection label and then list its corresponding items below that label (see the <code>site[collection.label]</code> for reference)</p> + <pre><code>{% for collection in site.collections %} - {% if collection.label != 'posts' %} - &lt;h2&gt;{{ collection.label }}&lt;/h2&gt; - &lt;ul class=&quot;recipe-list&quot;&gt; + {% if collection.label != &#39;posts&#39; %} + &#60;h2&#62;{{ collection.label }}&#60;&#47;h2&#62; + &#60;ul class="recipe-list"&#62; {% for item in site[collection.label] %} - &lt;li&gt; - &lt;a href=&quot;{{ item.url }}&quot;&gt;{{ item.title }}&lt;/a&gt; - &lt;/li&gt; + &#60;li&#62; + &#60;a href="{{ item.url }}"&#62;{{ item.title }}&#60;&#47;a&#62; + &#60;&#47;li&#62; {% endfor %} - &lt;/ul&gt; - &lt;hr&gt; + &#60;&#47;ul&#62; + &#60;hr&#62; {% endif %} {% endfor %} </code></pre> -<p>That's it! Now if I plan to add any new collections down the line, I just need to include it in the <code>_config.yml</code> file and I'm set. The homepage will take care of the rest once rendered.</p> + +<p>That&#8217;s it! Now if I plan to add any new collections down the line, I just need to include it in the <code>_config.yml</code> file and I&#8217;m set. The homepage will take care of the rest once rendered.</p> + <p>Enjoy looping through your Jekyll collections!</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>Just the sections were statically rendered. All the recipes were pulled in dynamically - I'm not that insane!</li> +<li>Just the sections were statically rendered. All the recipes were pulled in dynamically - I&#8217;m not that insane!</li> </ol></content> - <link href="https://bt.ht/loop"/> - <id>https://bt.ht/loop</id> + <link href="https://btxx.org/loop"/> + <id>https://btxx.org/loop</id> <updated>2022-08-12T10:00:00Z</updated> <published>2022-08-12T10:00:00Z</published> </entry> <entry> <title>Fixing LocalWP on Fedora 32</title> - <content type="html"><h1>Fixing LocalWP on Fedora 32</h1> + <content type="html"><h1 id="fixing-localwp-on-fedora-32">Fixing LocalWP on Fedora 32</h1> + <p>2020-05-06</p> + <p>I recently upgraded from Fedora 31 to 32 and everything went very smoothly - except for one application: <strong>LocalWP</strong>. After the upgrade, all local WordPress builds would fail and complain about two missing packages:</p> + <ul> <li>libnettle6</li> <li>libhogweed4</li> </ul> + <p>After wasting far too much time rolling back to older LocalWP versions and reaching out into the community forums, I found a simply solution to the problem. You just need to download and install the following packages manually:</p> + <ul> -<li>libnettle6: <a href="https://pkgs.org/download/libnettle6">libnettle6-3.4.1-lp152.3.1.x86<em></em>4.rpm</a></li> -<li>libhogweed4: <a href="https://pkgs.org/download/libhogweed4">libhogweed4-3.4.1-lp152.3.1.x86<em></em>4.rpm</a></li> +<li>libnettle6: <a href="https://pkgs.org/download/libnettle6">libnettle6-3.4.1-lp152.3.1.x86_64.rpm</a></li> +<li>libhogweed4: <a href="https://pkgs.org/download/libhogweed4">libhogweed4-3.4.1-lp152.3.1.x86_64.rpm</a></li> </ul> + <p>Although these packages are built for OpenSuse, it still worked perfectly fine for me. My hope is that this quick post might be helpful for others who possibly run into the same issue.</p> + <p>For reference, here is the Local Community ticket I created: <a href="https://localwp.com/community/t/local-not-working-fedora-32-workstation-edition/19219">Local not working with Fedora 32</a></p></content> - <link href="https://bt.ht/localwp-fedora"/> - <id>https://bt.ht/localwp-fedora</id> + <link href="https://btxx.org/localwp-fedora"/> + <id>https://btxx.org/localwp-fedora</id> <updated>2020-05-06T10:00:00Z</updated> <published>2020-05-06T10:00:00Z</published> </entry> <entry> <title>Click to Load Website Images</title> - <content type="html"><h1>Click to Load Website Images</h1> + <content type="html"><h1 id="click-to-load-website-images">Click to Load Website Images</h1> + <p>2021-03-25</p> + <p>In my previous post about <a href="https://uglyduck.ca/#2021-03-22-89-posts-one-file">switching my Jekyll blog over to PHPetite</a>, I briefly mentioned how I only loaded in article images if the user <em>clicked or tapped</em> the empty file element.</p> -<p>In this post, I'm going to quickly breakdown the update I've done to my blog's images since then and how you can easily implement the same thing in your own project.</p> -<h2>Update</h2> + +<p>In this post, I&#8217;m going to quickly breakdown the update I&#8217;ve done to my blog&#8217;s images since then and how you can easily implement the same thing in your own project.</p> + +<h2 id="update">Update</h2> + <p>As pointed out by Gabriel <a href="https://github.com/bradleytaunt/phpetite/issues/1">in this Github issue</a>, this concept breaks things slightly for RSS users. Since then, I have just set the default images on this blog to <code>display: none</code> and render them as <code>block</code> elements when their specific <code>section</code> is loaded into the DOM visibly.</p> + <p>The example below is remaining the same as it was, to still provide context for this post.</p> -<h2>Live Demo</h2> -<p>Before we jump head first into the details, let's take a look at what we will be creating:</p> -<p><figure> - <div class="img-parent"> - <img loading="lazy" src="/placeholder-image.webp" onclick="this.src='/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons"> - </div> - <figcaption><b>Click the placeholder to load in the real image</b><br>Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption> -</figure></p> -<p>Pretty neat, eh? Well let's get into the nitty gritty.</p> -<h2>The Code</h2> -<p>Personally, I place everything into a <code>figure</code> element to keep things contained and clean - but this isn't required by any means. We then include our <code>img</code> and <code>figcaption</code> elements. That's it.</p> -<pre><code>&lt;figure&gt; - &lt;img src=&quot;/placeholder-image.webp&quot; onclick=&quot;this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'&quot; alt=&quot;Aqua UI buttons&quot;&gt; - &lt;figcaption&gt;&lt;b&gt;Click the placeholder to load in the real image&lt;/b&gt;&lt;br&gt; + +<h2 id="live-demo">Live Demo</h2> + +<p>Before we jump head first into the details, let&#8217;s take a look at what we will be creating:</p> + +<p>Pretty neat, eh? Well let&#8217;s get into the nitty gritty.</p> + +<h2 id="the-code">The Code</h2> + +<p>Personally, I place everything into a <code>figure</code> element to keep things contained and clean - but this isn&#8217;t required by any means. We then include our <code>img</code> and <code>figcaption</code> elements. That&#8217;s it.</p> + +<pre><code>&#60;figure&#62; + &#60;img src="&#47;placeholder-image.webp" onclick="this.src=&#39;https:&#47;&#47;res.cloudinary.com&#47;bradtaunt&#47;image&#47;fetch&#47;q_auto:low&#47;v1570124593&#47;https:&#47;&#47;uglyduck.ca&#47;public&#47;images&#47;aqua-ui-css-buttons.webp&#39;" alt="Aqua UI buttons"&#62; + &#60;figcaption&#62;&#60;b&#62;Click the placeholder to load in the real image&#60;&#47;b&#62;&#60;br&#62; Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. - &lt;a href=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp&quot;&gt;View full size image&lt;/a&gt;. - &lt;/figcaption&gt; -&lt;/figure&gt; + &#60;a href="https:&#47;&#47;res.cloudinary.com&#47;bradtaunt&#47;image&#47;fetch&#47;q_auto:low&#47;v1570124593&#47;https:&#47;&#47;uglyduck.ca&#47;public&#47;images&#47;aqua-ui-css-buttons.webp"&#62;View full size image&#60;&#47;a&#62;. + &#60;&#47;figcaption&#62; +&#60;&#47;figure&#62; </code></pre> -<h3>The Image Element</h3> + +<h3 id="the-image-element">The Image Element</h3> + <p>This is where the <em>magic</em> happens. By default all images will target the default placeholder image: <code>placeholder-image.webp</code>. This image is just 16KB in size and only needs to load in once.</p> -<p>Next we include an inline <code>onclick</code> attribute, which targets the current image's <code>src</code> attribute and changes it based on the URL provided. (Note: I use Cloudinary for my blog's image storage, but you could even host your images relative to your root directory if you wanted)</p> -<p>Now when a user clicks on the placeholder image, the inline <code>onclick</code> pulls in the correct image in it's place.</p> -<h3>Disabled JavaScript</h3> + +<p>Next we include an inline <code>onclick</code> attribute, which targets the current image&#8217;s <code>src</code> attribute and changes it based on the URL provided. (Note: I use Cloudinary for my blog&#8217;s image storage, but you could even host your images relative to your root directory if you wanted)</p> + +<p>Now when a user clicks on the placeholder image, the inline <code>onclick</code> pulls in the correct image in it&#8217;s place.</p> + +<h3 id="disabled-javascript">Disabled JavaScript</h3> + <p>For users who have JavaScript blocked or disabled we have a decent backup. By including a direct link to the image URL in the <code>figcaption</code> element, we give the user the ability to still view the image in a separate browser tab.</p> + <p>You could get extra fancy and include some <code>noscript</code> tags in your project that maybe render a different placeholder image mentioning they have JavaScript disabled etc, but for my needs that would be overkill.</p> -<h2>Cool - But Why Do This?</h2> -<p>Bandwidth is a limited resource for a lot of users around the world. As designers and developers it's best to respect this fact and only load in elements as the user <em>requires</em> them. Every little bit helps.</p></content> - <link href="https://bt.ht/load-image-on-click"/> - <id>https://bt.ht/load-image-on-click</id> + +<h2 id="cool---but-why-do-this">Cool - But Why Do This?</h2> + +<p>Bandwidth is a limited resource for a lot of users around the world. As designers and developers it&#8217;s best to respect this fact and only load in elements as the user <em>requires</em> them. Every little bit helps.</p></content> + <link href="https://btxx.org/load-image-on-click"/> + <id>https://btxx.org/load-image-on-click</id> <updated>2021-03-25T10:00:00Z</updated> <published>2021-03-25T10:00:00Z</published> </entry> <entry> <title>Linux Mint MacBook Air Setup</title> - <content type="html"><h1>Linux Mint MacBook Air Setup</h1> + <content type="html"><h1 id="linux-mint-macbook-air-setup">Linux Mint MacBook Air Setup</h1> + <p>2020-08-16</p> -<p>I don't like the idea of throwing away old or outdated tech (within reason), so I try to find a new purpose for some of my "retired" devices. This article will cover how to switch over a mid-2011 model MacBook Air to utilize Linux Mint.</p> + +<p>I don&#8217;t like the idea of throwing away old or outdated tech (within reason), so I try to find a new purpose for some of my &#8220;retired&#8221; devices. This article will cover how to switch over a mid-2011 model MacBook Air to utilize Linux Mint.</p> + <p><strong>Important</strong>: This setup will completely wipe your existing disk and create a fresh install of Linux Mint on the SSD. You have been warned.</p> -<h2>The Specs</h2> + +<h2 id="the-specs">The Specs</h2> + <p>My old MacBook Air has a pretty decent spec sheet:</p> + <ul> <li>Processor: <strong>1.7GHz dual-core Intel Core i5</strong></li> <li>Memory: <strong>4GB of 1333MHz DDR3</strong></li> <li>Graphics: <strong>Advanced Intel HD Graphics 3000</strong></li> <li>SSD: <strong>128 GB</strong></li> </ul> -<p>And let's take a look at the basic system requirements Linux Mint suggests:</p> + +<p>And let&#8217;s take a look at the basic system requirements Linux Mint suggests:</p> + <ul> <li>2GB RAM</li> <li>Dual Core Processor</li> <li>20GB free disk space</li> </ul> + <p>We are looking pretty good!</p> -<h2>Step 1: Download Linux Mint</h2> -<p>For this setup we will be using the latest, stable version (at this time of writing) of Linux Mint 20 "Ulyana" - Xfce which is 20. You can download the necessary files here: </p> + +<h2 id="step-1-download-linux-mint">Step 1: Download Linux Mint</h2> + +<p>For this setup we will be using the latest, stable version (at this time of writing) of Linux Mint 20 &#8220;Ulyana&#8221; - Xfce which is 20. You can download the necessary files here: </p> + <ul> -<li><a href="https://www.linuxmint.com/edition.php?id=283">Linux Mint 20 "Ulyana" - Xfce</a> [1.8GB]</li> +<li><a href="https://www.linuxmint.com/edition.php?id=283">Linux Mint 20 &#8220;Ulyana&#8221; - Xfce</a> [1.8GB]</li> </ul> -<h2>Step 2: Flash Linux Mint to USB Stick</h2> + +<h2 id="step-2-flash-linux-mint-to-usb-stick">Step 2: Flash Linux Mint to USB Stick</h2> + <p>Next we just need to flash the Linux Mint OS to a USB storage device. If you need to purchase some, you can easily find them on Amazon (affliate link):</p> + <ul> -<li><p><a href="https://www.amazon.com/gp/product/B00JB3NXIS/ref=as_li_tl?ie=UTF8&amp;camp=1789&amp;creative=9325&amp;creativeASIN=B00JB3NXIS&amp;linkCode=as2&amp;tag=uglyduck-20&amp;linkId=494f4c1dd4e21782ecb865bcaa5a526b">Kootion 10 Pack 4GB Flash Drive 4gb USB 2.0 Flash Drives Keychain USB Drive Bulk Thumb Drive Swivel Memory Stick Black</a></p> -</li> -<li><p>Download <a href="https://www.balena.io/etcher/">Balena Etcher</a> for your current operating system</p> -</li> -<li><p>Run the installer</p> -</li> +<li><p><a href="https://www.amazon.com/gp/product/B00JB3NXIS/ref=as_li_tl?ie=UTF8&amp;camp=1789&amp;creative=9325&amp;creativeASIN=B00JB3NXIS&amp;linkCode=as2&amp;tag=uglyduck-20&amp;linkId=494f4c1dd4e21782ecb865bcaa5a526b">Kootion 10 Pack 4GB Flash Drive 4gb USB 2.0 Flash Drives Keychain USB Drive Bulk Thumb Drive Swivel Memory Stick Black</a></p></li> +<li><p>Download <a href="https://www.balena.io/etcher/">Balena Etcher</a> for your current operating system</p></li> +<li><p>Run the installer</p></li> </ul> + <p>Once installed, open Etcher do the following:</p> + <ol> <li>Select your downloaded Linux Mint ISO file</li> -<li>Select your USB stick/device as the media</li> +<li>Select your USB stick&#47;device as the media</li> <li>Flash media</li> <li>???</li> <li>Profit!!</li> </ol> -<h2>Step 3: Boot from USB</h2> + +<h2 id="step-3-boot-from-usb">Step 3: Boot from USB</h2> + <ul> <li>Make sure your Macbook Air is turned off</li> <li>Plug your newly flashed USB stick into the MacBook Air</li> <li>Turn on the MacBook Air</li> -<li>Immediately hold down the <strong>alt/option</strong> button (keep holding until the prompt screen is visible)</li> -<li>You will be shown drive "icons" - you want to select your USB drive (normally the far right icon)</li> +<li>Immediately hold down the <strong>alt&#47;option</strong> button (keep holding until the prompt screen is visible)</li> +<li>You will be shown drive &#8220;icons&#8221; - you want to select your USB drive (normally the far right icon)</li> <li>Press <strong>Enter</strong></li> -<li>Select the first item in the list that appears "Start Linux Mint"</li> +<li>Select the first item in the list that appears &#8220;Start Linux Mint&#8221;</li> </ul> -<p>After this you will boot into a "live session" of the Linux Mint operating system.</p> -<h2>Step 4: Installing Linux Mint</h2> -<p>Linux Mint makes it very easy for you to install it's OS step-by-step (similar to most other Linux distros). Simply <strong>double-click</strong> on the "Install Linux Mint" CD icon on the main desktop.</p> + +<p>After this you will boot into a &#8220;live session&#8221; of the Linux Mint operating system.</p> + +<h2 id="step-4-installing-linux-mint">Step 4: Installing Linux Mint</h2> + +<p>Linux Mint makes it very easy for you to install it&#8217;s OS step-by-step (similar to most other Linux distros). Simply <strong>double-click</strong> on the &#8220;Install Linux Mint&#8221; CD icon on the main desktop.</p> + <ul> <li>Choose your language. then hit <strong>Continue</strong></li> <li>Select your preferred keyboard layout, then hit <strong>Continue</strong></li> <li><em>Optional</em>: You might be asked to connect to a WiFi network, if you are set it up now</li> <li>I would suggest downloading the multimedia codecs to make things easier, then hit <strong>Continue</strong></li> -<li>For installation type, select "Erase disk and install Linux Mint", then hit <strong>Continue</strong> +<li>For installation type, select &#8220;Erase disk and install Linux Mint&#8221;, then hit <strong>Continue</strong> + <ul> <li>WARNING: This will wipe your current drive completely - make sure you are okay with this!</li> -</ul> -</li> +</ul></li> <li>It will issue you with a warning prompt, simply click <strong>Continue</strong></li> <li>Select your timezone, then hit <strong>Continue</strong></li> <li>Enter your name, a username, a name for your computer, and set a password (you will use this to login moving forward)</li> @@ -5119,215 +6690,312 @@ done <li>After a reboot you will be prompted to remove the USB device and then press <strong>Enter</strong></li> <li>Welcome to Linux Mint!</li> </ul> -<h2>Conclusion</h2> -<p>Linux Mint is not only a great operating system, but it is also an excellent starting point for newcomers to Linux in general. It's stable enough to be used as a daily driver and popular enough that most minor issues can be solved with a quick internet search.</p> -<p>Hopefully this inspires others to try "recycling" their older Apple products instead of tossing them away or having them collect dust.</p></content> - <link href="https://bt.ht/linux-mint-macbook-air"/> - <id>https://bt.ht/linux-mint-macbook-air</id> + +<h2 id="conclusion">Conclusion</h2> + +<p>Linux Mint is not only a great operating system, but it is also an excellent starting point for newcomers to Linux in general. It&#8217;s stable enough to be used as a daily driver and popular enough that most minor issues can be solved with a quick internet search.</p> + +<p>Hopefully this inspires others to try &#8220;recycling&#8221; their older Apple products instead of tossing them away or having them collect dust.</p></content> + <link href="https://btxx.org/linux-mint-macbook-air"/> + <id>https://btxx.org/linux-mint-macbook-air</id> <updated>2020-08-16T10:00:00Z</updated> <published>2020-08-16T10:00:00Z</published> </entry> <entry> <title>The Linux Desktop is Hard to Love</title> - <content type="html"><h1>The Linux Desktop is Hard to Love</h1> + <content type="html"><h1 id="the-linux-desktop-is-hard-to-love">The Linux Desktop is Hard to Love</h1> + <p>2022-07-14</p> -<p>I want to love the "Linux Desktop". I really do. But I've come to the realization that what I love is the <em>idea</em> of the Linux Desktop. The community. The security and core focus on open source. The customizable environments. Tweaking as much or as little of the operating system as I please!</p> -<p>I just can't <em>stick with it</em>. I always end up back on macOS. And I'm starting to understand why.</p> -<h2>What the Linux Desktop Gets Right</h2> + +<p>I want to love the &#8220;Linux Desktop&#8221;. I really do. But I&#8217;ve come to the realization that what I love is the <em>idea</em> of the Linux Desktop. The community. The security and core focus on open source. The customizable environments. Tweaking as much or as little of the operating system as I please!</p> + +<p>I just can&#8217;t <em>stick with it</em>. I always end up back on macOS. And I&#8217;m starting to understand why.</p> + +<h2 id="what-the-linux-desktop-gets-right">What the Linux Desktop Gets Right</h2> + <p>To be fair, there is an incredible amount of things that the Linux desktop does really well:</p> + <ul> <li>Complete user control</li> <li>Ability to drastically change the desktop UI + <ul> <li>Gnome, KDE, XFCE, etc.</li> -</ul> -</li> +</ul></li> <li>Overall good and welcoming communities</li> <li>Extensive documentation for almost everything</li> </ul> -<p>These things make Linux a solid experience overall - but not a <em>great</em> one...</p> -<h2>What the Linux Desktop Gets Wrong</h2> + +<p>These things make Linux a solid experience overall - but not a <em>great</em> one&#8230;</p> + +<h2 id="what-the-linux-desktop-gets-wrong">What the Linux Desktop Gets Wrong</h2> + <p>If I had to summarize in a word what Linux lacks compared to macOS it would be: <em>cohesion</em>.</p> -<p>Apple's macOS keeps a solid consistency throughout its entire design. Everything looks and feels like it is part of the same system. Which is what a fully-fledged OS <em>should</em> feel like. The argument can be made that macOS suffers some fragmentation with things like <code>homebrew</code>, applications directly from developers vs. applications via the Mac App Store.</p> + +<p>Apple&#8217;s macOS keeps a solid consistency throughout its entire design. Everything looks and feels like it is part of the same system. Which is what a fully-fledged OS <em>should</em> feel like. The argument can be made that macOS suffers some fragmentation with things like <code>homebrew</code>, applications directly from developers vs. applications via the Mac App Store.</p> + <p>While this is true, I believe Linux desktops suffer far worse in terms of fragmented systems. Users building applications from source, <code>snap</code> packages, <code>flathub</code> packages, custom package managers shipped with separate distros, etc. And with this fragmentation comes the constant debates and discussions around which to use and which to avoid.</p> -<p>This can become overwhelming for average computer users. This is something we tend to forget in our "tech hubs". Most users want to boot up their machine and get to work. Linux can absolutely do this, but if a user hits a minor snag, then I guarantee they will have more difficulty fixing it compared to an issue found in macOS.</p> -<h2>User Experience</h2> -<p>Design is important. The user experience will make or break an operating system. This is another issue I've found with many Linux desktops.</p> -<p>Let's take Bluetooth for example. It works flawlessly in macOS. I have never had a single device bug-out or refuse to connect. Devices connect almost immediately when pairing. The UI is intuitive and gives the user clear feedback to what the system is doing while pairing, disconnecting, and so on.</p> -<p>Now, compare this to an average Linux DE experience - not so seamless. The fact that some distros require you to hop into a terminal in order to properly configure Bluetooth is pretty terrible. Sure, most have GUIs setup similar to that of macOS, but I find myself time and time again needing to pop open that trusty ol' Terminal. This is fine for someone like myself, but for the average computer user? No way.</p> -<p>Looking for another example? Printers. Yes, printers are terrible machines created in the depths of Hell itself, but they are a necessary evil. And again, macOS handles "plug-and-play" printer functionality like a champ. Linux on the other hand is a mixed bag. I've had some luck with specific Linux distros working with printers in this "plug-and-play" fashion, while others become a battle of attrition[^1]. Let's not even begin to talk about wireless <em>only</em> printers and setting up their proper drivers on Linux.</p> -<h2>Quality Hardware</h2> -<p>Another advantage macOS has over most other Linux desktops is tailored hardware. Apple produces the hardware created to run their own operating system, meaning it was specifically built for that task. Linux desktops are designed to run on almost any[^2] piece of hardware. Though this is fantastic in terms of technological sustainability (avoids dumping old devices when they lose "support") it ends up causing more support issues. Needing to support such a wide range of chip sets and drivers spreads the focus on a streamlined UX a little more thin. It becomes difficult to perfect a cohesive experience user-to-user when some many variables can be different. I should note that some distros[^3] are making fantastic strides in this area but are still far from ideal.</p> -<h2>I Still Use Linux</h2> -<p>I might have attacked the overall Linux desktop experience in favor of macOS a little harshly in this post, but it's a simple reflection of a individual who has used both extensively. I still work with multiple Linux machines daily. I still <em>like</em> using Linux.</p> -<p>I just don't <em>love</em> it.</p> -<h2>Refs</h2> + +<p>This can become overwhelming for average computer users. This is something we tend to forget in our &#8220;tech hubs&#8221;. Most users want to boot up their machine and get to work. Linux can absolutely do this, but if a user hits a minor snag, then I guarantee they will have more difficulty fixing it compared to an issue found in macOS.</p> + +<h2 id="user-experience">User Experience</h2> + +<p>Design is important. The user experience will make or break an operating system. This is another issue I&#8217;ve found with many Linux desktops.</p> + +<p>Let&#8217;s take Bluetooth for example. It works flawlessly in macOS. I have never had a single device bug-out or refuse to connect. Devices connect almost immediately when pairing. The UI is intuitive and gives the user clear feedback to what the system is doing while pairing, disconnecting, and so on.</p> + +<p>Now, compare this to an average Linux DE experience - not so seamless. The fact that some distros require you to hop into a terminal in order to properly configure Bluetooth is pretty terrible. Sure, most have GUIs setup similar to that of macOS, but I find myself time and time again needing to pop open that trusty ol&#8217; Terminal. This is fine for someone like myself, but for the average computer user? No way.</p> + +<p>Looking for another example? Printers. Yes, printers are terrible machines created in the depths of Hell itself, but they are a necessary evil. And again, macOS handles &#8220;plug-and-play&#8221; printer functionality like a champ. Linux on the other hand is a mixed bag. I&#8217;ve had some luck with specific Linux distros working with printers in this &#8220;plug-and-play&#8221; fashion, while others become a battle of attrition[^1]. Let&#8217;s not even begin to talk about wireless <em>only</em> printers and setting up their proper drivers on Linux.</p> + +<h2 id="quality-hardware">Quality Hardware</h2> + +<p>Another advantage macOS has over most other Linux desktops is tailored hardware. Apple produces the hardware created to run their own operating system, meaning it was specifically built for that task. Linux desktops are designed to run on almost any[^2] piece of hardware. Though this is fantastic in terms of technological sustainability (avoids dumping old devices when they lose &#8220;support&#8221;) it ends up causing more support issues. Needing to support such a wide range of chip sets and drivers spreads the focus on a streamlined UX a little more thin. It becomes difficult to perfect a cohesive experience user-to-user when some many variables can be different. I should note that some distros[^3] are making fantastic strides in this area but are still far from ideal.</p> + +<h2 id="i-still-use-linux">I Still Use Linux</h2> + +<p>I might have attacked the overall Linux desktop experience in favor of macOS a little harshly in this post, but it&#8217;s a simple reflection of a individual who has used both extensively. I still work with multiple Linux machines daily. I still <em>like</em> using Linux.</p> + +<p>I just don&#8217;t <em>love</em> it.</p> + +<h2 id="refs">Refs</h2> + <ol> -<li>People swear by CUPS working well on Linux, but this has caused issues for me in the past as well. Unsure why macOS handles it fine...</li> +<li>People swear by CUPS working well on Linux, but this has caused issues for me in the past as well. Unsure why macOS handles it fine&#8230;</li> <li>Depending on the desired distro, resources required, etc.</li> <li>A couple that come to mind are Zorin OS and elementary OS</li> </ol></content> - <link href="https://bt.ht/linux-love"/> - <id>https://bt.ht/linux-love</id> + <link href="https://btxx.org/linux-love"/> + <id>https://btxx.org/linux-love</id> <updated>2022-07-14T10:00:00Z</updated> <published>2022-07-14T10:00:00Z</published> </entry> <entry> <title>Installing Custom Fonts on Linux from the Command Line</title> - <content type="html"><h1>Installing Custom Fonts on Linux from the Command Line</h1> + <content type="html"><h1 id="installing-custom-fonts-on-linux-from-the-command-line">Installing Custom Fonts on Linux from the Command Line</h1> + <p>2022-09-20</p> -<p>Installing custom fonts is a fairly streamlined feature on operating systems like MacOS and Windows. Linux, on the other hand, struggles to make this workflow <em>easy</em> for everyday users. Many newcomers tend to get frustrated with using the default "Fonts" application managers shipped with most Linux distros.</p> -<p>But I'm here to tell you to <strong>ditch</strong> those GUI font installers. Let's install our custom fonts in the command line!</p> -<h2>Get Your Font Files</h2> -<p>You can't install custom fonts if you don't have any. For this tutorial we are going to assume that we are trying to install a typeface set named <code>LinuxFont</code>. We are going to assume that we have already downloaded and extracted a folder named <code>LinuxFont</code> into our <code>Downloads</code> directory.</p> + +<p>Installing custom fonts is a fairly streamlined feature on operating systems like MacOS and Windows. Linux, on the other hand, struggles to make this workflow <em>easy</em> for everyday users. Many newcomers tend to get frustrated with using the default &#8220;Fonts&#8221; application managers shipped with most Linux distros.</p> + +<p>But I&#8217;m here to tell you to <strong>ditch</strong> those GUI font installers. Let&#8217;s install our custom fonts in the command line!</p> + +<h2 id="get-your-font-files">Get Your Font Files</h2> + +<p>You can&#8217;t install custom fonts if you don&#8217;t have any. For this tutorial we are going to assume that we are trying to install a typeface set named <code>LinuxFont</code>. We are going to assume that we have already downloaded and extracted a folder named <code>LinuxFont</code> into our <code>Downloads</code> directory.</p> + <p>Inside this hypothetical folder is a collection of <code>OTF</code> (opentype) font files. This will be important information in a moment.</p> -<h2>Terminal Time</h2> + +<h2 id="terminal-time">Terminal Time</h2> + <p>Now our goal is to simply copy this new typeface folder into our user font directory. Open Terminal and run the following from your <code>Downloads</code> directory:</p> -<pre><code>sudo cp -r LinuxFont /usr/local/share/fonts/opentype/ + +<pre><code>sudo cp -r LinuxFont &#47;usr&#47;local&#47;share&#47;fonts&#47;opentype&#47; </code></pre> + <p><strong>Important</strong>: If your font files are NOT opentype format, be sure to copy your files to the proper directory (truetype for TTF, etc.)</p> + <p>Next we need to make sure we have full read and write privileges for this new folder:</p> -<pre><code>sudo chmod -R 0777 /usr/local/share/fonts/opentype/LinuxFont + +<pre><code>sudo chmod -R 0777 &#47;usr&#47;local&#47;share&#47;fonts&#47;opentype&#47;LinuxFont </code></pre> + <p>The last thing we need to do is reload the font cache on our system:</p> + <pre><code>sudo fc-cache -fv </code></pre> -<p>That's it! You should now have access to your custom typeface in all your applications system wide.</p></content> - <link href="https://bt.ht/lf"/> - <id>https://bt.ht/lf</id> + +<p>That&#8217;s it! You should now have access to your custom typeface in all your applications system wide.</p></content> + <link href="https://btxx.org/lf"/> + <id>https://btxx.org/lf</id> <updated>2022-09-20T10:00:00Z</updated> <published>2022-09-20T10:00:00Z</published> </entry> <entry> <title>How to "FLOSS" as a Web Designer</title> - <content type="html"><h1>How to "FLOSS" as a Web Designer</h1> + <content type="html"><h1 id="how-to-floss-as-a-web-designer">How to &#8220;FLOSS&#8221; as a Web Designer</h1> + <p>2020-02-07</p> -<p>I have a profound respect for the open source community. I most likely wouldn't have the skills or knowledge I do today with it. Unfortunately, when I was just starting out in "web dev" some 10 years ago, proprietary software was the main go-to for a newbie designer. </p> + +<p>I have a profound respect for the open source community. I most likely wouldn&#8217;t have the skills or knowledge I do today with it. Unfortunately, when I was just starting out in &#8220;web dev&#8221; some 10 years ago, proprietary software was the main go-to for a newbie designer. </p> + <p>Dreamweaver. Fireworks (those were the days). Photoshop. Illustrator. Adobe products basically had a stranglehold on the web design community. Any company you joined at the time more than likely required you to know and use these tools, making it hard for designers to try out new software for their day-to-day needs. Not to mention the <em>cost</em> associated with these products.</p> -<p>Fast forward a handful of years and we have a lot more options in terms of design / development software (whether Windows, Mac or Linux). UI design tools like Figma, Sketch and Adobe XD have since popped up and become the most popular among designers. New text editors and terminals hit the scene, fighting for developer attention (Atom, Sublime Text, VSCode, LightTable, iTerm2, Hyper, etc.).</p> -<p>But what if a designer wanted to go completely <span class="help-text" title="Free/Libre and Open Source Software">FLOSS</span>?</p> + +<p>Fast forward a handful of years and we have a lot more options in terms of design &#47; development software (whether Windows, Mac or Linux). UI design tools like Figma, Sketch and Adobe XD have since popped up and become the most popular among designers. New text editors and terminals hit the scene, fighting for developer attention (Atom, Sublime Text, VSCode, LightTable, iTerm2, Hyper, etc.).</p> + +<p>But what if a designer wanted to go completely FLOSS?</p> + <p>Below you will find my own personal list of FLOSS applications I use across design, development and simple document management:</p> -<p><h2 id="floss-apps">FLOSS Application Breakdown</h2></p> -<h3>Web Browsers</h3> + +<h3 id="web-browsers">Web Browsers</h3> + <ul> -<li>Firefox <a href="https://www.mozilla.org/en-CA/firefox/">https://www.mozilla.org/en-CA/firefox/</a></li> -<li>Brave <a href="https://brave.com/">https://brave.com/</a></li> +<li>Firefox <a href="https://www.mozilla.org/en-CA/firefox/">https:&#47;&#47;www.mozilla.org&#47;en-CA&#47;firefox&#47;</a></li> +<li>Brave <a href="https://brave.com/">https:&#47;&#47;brave.com&#47;</a></li> </ul> -<h3>Visual Design</h3> + +<h3 id="visual-design">Visual Design</h3> + <ul> -<li>GIMP <a href="https://www.gimp.org/">https://www.gimp.org/</a></li> -<li>Inkscape <a href="https://inkscape.org/">https://inkscape.org/</a></li> -<li>Pencil <a href="https://pencil.evolus.vn/">https://pencil.evolus.vn/</a></li> +<li>GIMP <a href="https://www.gimp.org/">https:&#47;&#47;www.gimp.org&#47;</a></li> +<li>Inkscape <a href="https://inkscape.org/">https:&#47;&#47;inkscape.org&#47;</a></li> +<li>Pencil <a href="https://pencil.evolus.vn/">https:&#47;&#47;pencil.evolus.vn&#47;</a></li> </ul> -<h3>Code / Text Editors</h3> + +<h3 id="code-text-editors">Code &#47; Text Editors</h3> + <ul> -<li>Brackets <a href="http://brackets.io/">http://brackets.io/</a></li> -<li>Visual Studio Code <a href="https://github.com/Microsoft/vscode">https://github.com/Microsoft/vscode</a></li> -<li>Atom <a href="https://atom.io/">https://atom.io/</a></li> +<li>Brackets <a href="http://brackets.io/">http:&#47;&#47;brackets.io&#47;</a></li> +<li>Visual Studio Code <a href="https://github.com/Microsoft/vscode">https:&#47;&#47;github.com&#47;Microsoft&#47;vscode</a></li> +<li>Atom <a href="https://atom.io/">https:&#47;&#47;atom.io&#47;</a></li> </ul> -<h3>Terminal Shells</h3> + +<h3 id="terminal-shells">Terminal Shells</h3> + <ul> -<li>Terminus <a href="https://eugeny.github.io/terminus/">https://eugeny.github.io/terminus/</a></li> -<li>Hyper <a href="https://hyper.is/">https://hyper.is/</a></li> +<li>Terminus <a href="https://eugeny.github.io/terminus/">https:&#47;&#47;eugeny.github.io&#47;terminus&#47;</a></li> +<li>Hyper <a href="https://hyper.is/">https:&#47;&#47;hyper.is&#47;</a></li> </ul> -<h3>Documents</h3> + +<h3 id="documents">Documents</h3> + <ul> -<li>LibreOffice <a href="https://www.libreoffice.org/">https://www.libreoffice.org/</a></li> +<li>LibreOffice <a href="https://www.libreoffice.org/">https:&#47;&#47;www.libreoffice.org&#47;</a></li> </ul> -<h2>Nothing special</h2> -<p>This small list I've compiled isn't earth-shattering by any means, but I wanted to put this out into the world for any newbie designer that might be starting out. You don't need to spend a ridiculous amount of money just to get your feet wet in the design industry. By using the tools listed above, beginners can get a solid head-start on creating for the web without burning a hole in their pocket. </p></content> - <link href="https://bt.ht/learning-to-floss"/> - <id>https://bt.ht/learning-to-floss</id> + +<h2 id="nothing-special">Nothing special</h2> + +<p>This small list I&#8217;ve compiled isn&#8217;t earth-shattering by any means, but I wanted to put this out into the world for any newbie designer that might be starting out. You don&#8217;t need to spend a ridiculous amount of money just to get your feet wet in the design industry. By using the tools listed above, beginners can get a solid head-start on creating for the web without burning a hole in their pocket. </p></content> + <link href="https://btxx.org/learning-to-floss"/> + <id>https://btxx.org/learning-to-floss</id> <updated>2020-02-07T10:00:00Z</updated> <published>2020-02-07T10:00:00Z</published> </entry> <entry> <title>The Lazy Developer's Dark Mode</title> - <content type="html"><h1>The Lazy Developer's Dark Mode</h1> + <content type="html"><h1 id="the-lazy-developers-dark-mode">The Lazy Developer&#8217;s Dark Mode</h1> + <p>2021-04-12</p> + <p>After recently jumping back to Jekyll for my personal blog, I decided to take a closer look at how I was supporting <code>dark mode</code> for my visitors. I was using the proper CSS query to target those who had system-wide dark mode enabled, but I found that the code had far too many caveats and targeted too many custom classes.</p> -<p>So I thought to myself, "There <em>has</em> to be a simpler way..."</p> -<h2>Introducing Dark Mode - The Lazy Way</h2> -<p>Here is the default dark mode for my current website in all it's glory:</p> + +<p>So I thought to myself, &#8220;There <em>has</em> to be a simpler way&#8230;&#8221;</p> + +<h2 id="introducing-dark-mode---the-lazy-way">Introducing Dark Mode - The Lazy Way</h2> + +<p>Here is the default dark mode for my current website in all it&#8217;s glory:</p> + <pre><code>@media (prefers-color-scheme: dark) { body{background:#2d2d2d;filter:invert(1);} img,.cp_embed_wrapper,pre{filter:invert(1);} } </code></pre> -<p>Not much to look at, eh? Well, let's still break it down.</p> -<p>First we set the <code>body</code> to use a nice dark background color (avoid using <code>#000000</code> directly since that can cause some minor eye strain). Next we tell the browser to invert all the child elements by using <code>filter:invert(1)</code>. At this point, you could consider your work done - but there are some edge case elements...</p> -<h2>Images, CodePens &amp; Code - Oh My!</h2> -<p>Most of my articles on this site will include either an image(s), embedded CodePen examples or code snippets directly in the page. For these elements we probably <em>don't</em> want to invert their color/text etc. All we need to do is run the filter property on these a second time (<em>after</em> the main <code>body</code> attribute):</p> + +<p>Not much to look at, eh? Well, let&#8217;s still break it down.</p> + +<p>First we set the <code>body</code> to use a nice dark background color (avoid using <code>#000000</code> directly since that can cause some minor eye strain). Next we tell the browser to invert all the child elements by using <code>filter:invert(1)</code>. At this point, you could consider your work done - but there are some edge case elements&#8230;</p> + +<h2 id="images-codepens-code---oh-my">Images, CodePens &#38; Code - Oh My!</h2> + +<p>Most of my articles on this site will include either an image(s), embedded CodePen examples or code snippets directly in the page. For these elements we probably <em>don&#8217;t</em> want to invert their color&#47;text etc. All we need to do is run the filter property on these a second time (<em>after</em> the main <code>body</code> attribute):</p> + <pre><code>@media (prefers-color-scheme: dark) { img,.cp_embed_wrapper,pre{filter:invert(1);} } </code></pre> + <p>Of course, YMMV depending on what other custom elements you want to avoid inverting.</p> -<h2>Minor Caveats</h2> -<p>I should mention that since my website doesn't use any custom coloring for anchor links, inverting <code>ahref</code> elements works out of the box. Certain projects might still require some custom overrides if the inverted version of a certain custom color looks poor.</p> -<p>That's it - enjoy being lazy!</p></content> - <link href="https://bt.ht/lazy-dev-dark-mode"/> - <id>https://bt.ht/lazy-dev-dark-mode</id> + +<h2 id="minor-caveats">Minor Caveats</h2> + +<p>I should mention that since my website doesn&#8217;t use any custom coloring for anchor links, inverting <code>ahref</code> elements works out of the box. Certain projects might still require some custom overrides if the inverted version of a certain custom color looks poor.</p> + +<p>That&#8217;s it - enjoy being lazy!</p></content> + <link href="https://btxx.org/lazy-dev-dark-mode"/> + <id>https://btxx.org/lazy-dev-dark-mode</id> <updated>2021-04-12T10:00:00Z</updated> <published>2021-04-12T10:00:00Z</published> </entry> <entry> <title>ThriftyName: $5 Brand Names</title> - <content type="html"><h1>ThriftyName: $5 Brand Names</h1> + <content type="html"><h1 id="thriftyname-5-brand-names">ThriftyName: $5 Brand Names</h1> + <p>2021-02-25</p> -<p>It's been a while since I've written anything on this blog, but for good reason - <strong>I've been working on a handful of side projects</strong>. I plan to drip-feed release these projects over time, but for today I'm announcing <a href="https://thrifty.name">ThriftyName</a>.</p> -<h2>What is ThriftyName?</h2> -<p>In case this post title wasn't clear enough (or you avoided going to the product site itself) ThriftyName is a place where indie devs, start-ups or entrepreneurs can go to get a custom brand name for <strong>just $10</strong>.</p> -<p>This "service" started out as an almost gimmicky joke in my head, but once I began building out the main website I realized that this could be quite useful for cash-strapped indies. After all, not all developers <em>love</em> to sit around wasting precious time thinking about product names, when they could use that time to <em>build their product</em>.</p> -<h2>Learn More</h2> -<p>If you're really interested in the reasoning behind making this project, check out the <a href="https://thrifty.name/#about">official about page on the site itself</a>. I go into a little more depth about my thought process.</p> -<h2>More Side Projects Incoming...</h2> -<p>Like I said at the beginning of the post, keep a look out for my other side projects that I'll be rolling out slowing. I'm still not sure of the best "method" to do this (release one every week? every month?) - but I'll figure it out as I go along.</p> + +<p>It&#8217;s been a while since I&#8217;ve written anything on this blog, but for good reason - <strong>I&#8217;ve been working on a handful of side projects</strong>. I plan to drip-feed release these projects over time, but for today I&#8217;m announcing <a href="https://thrifty.name">ThriftyName</a>.</p> + +<h2 id="what-is-thriftyname">What is ThriftyName?</h2> + +<p>In case this post title wasn&#8217;t clear enough (or you avoided going to the product site itself) ThriftyName is a place where indie devs, start-ups or entrepreneurs can go to get a custom brand name for <strong>just $10</strong>.</p> + +<p>This &#8220;service&#8221; started out as an almost gimmicky joke in my head, but once I began building out the main website I realized that this could be quite useful for cash-strapped indies. After all, not all developers <em>love</em> to sit around wasting precious time thinking about product names, when they could use that time to <em>build their product</em>.</p> + +<h2 id="learn-more">Learn More</h2> + +<p>If you&#8217;re really interested in the reasoning behind making this project, check out the <a href="https://thrifty.name/#about">official about page on the site itself</a>. I go into a little more depth about my thought process.</p> + +<h2 id="more-side-projects-incoming">More Side Projects Incoming&#8230;</h2> + +<p>Like I said at the beginning of the post, keep a look out for my other side projects that I&#8217;ll be rolling out slowing. I&#8217;m still not sure of the best &#8220;method&#8221; to do this (release one every week? every month?) - but I&#8217;ll figure it out as I go along.</p> + <p>Thanks for reading!</p></content> - <link href="https://bt.ht/launching-thriftyname"/> - <id>https://bt.ht/launching-thriftyname</id> + <link href="https://btxx.org/launching-thriftyname"/> + <id>https://btxx.org/launching-thriftyname</id> <updated>2021-02-25T10:00:00Z</updated> <published>2021-02-25T10:00:00Z</published> </entry> <entry> <title>Keynote Slides with Pure CSS</title> - <content type="html"><h1>Keynote Slides with Pure CSS</h1> + <content type="html"><h1 id="keynote-slides-with-pure-css">Keynote Slides with Pure CSS</h1> + <p>2020-06-22</p> -<p>There are a great deal of options available on the web and built into most operating systems when you need to create presentation / keynote slides. You could use native software like LibremOffice Impress, Powerpoint, Apple's Keynote, etc. You could also decide to use preexisting web-based apps like Google Slides or an open source project such as RevealJS. All of these are good options.</p> + +<p>There are a great deal of options available on the web and built into most operating systems when you need to create presentation &#47; keynote slides. You could use native software like LibremOffice Impress, Powerpoint, Apple&#8217;s Keynote, etc. You could also decide to use preexisting web-based apps like Google Slides or an open source project such as RevealJS. All of these are good options.</p> + <p>But thinking more about how overly complex these apps are implemented, it got me wondering if I could quickly code up a presentation slide framework with pure CSS and barely any code.</p> + <p>This is what I came up with:</p> -<h2>The Demo</h2> + +<h2 id="the-demo">The Demo</h2> + <p><a href="https://codepen.io/bradleytaunt/pen/jOWBJZb">Live CodePen Example</a></p> + <p>Yes, I know this is <em>ugly</em>, but this was created as a barebones skeleton for others to build upon. The demo uses a simple set of <code>radio</code> inputs that correspond to their own individual <code>slide</code> element. The framework looks at the currently <code>checked</code> input, then changes the <code>opacity</code> and <code>z-index</code> of its corresponding slide item. Pretty straightforward stuff!</p> -<p>Let's break down each piece:</p> -<h2>The HTML</h2> -<pre><code>&lt;div class=&quot;slider&quot;&gt; - &lt;input type=&quot;radio&quot; name=&quot;pagination&quot; value=&quot;1&quot; checked&gt; - &lt;input type=&quot;radio&quot; name=&quot;pagination&quot; value=&quot;2&quot;&gt; - &lt;input type=&quot;radio&quot; name=&quot;pagination&quot; value=&quot;3&quot;&gt; - &lt;input type=&quot;radio&quot; name=&quot;pagination&quot; value=&quot;4&quot;&gt; - &lt;input type=&quot;radio&quot; name=&quot;pagination&quot; value=&quot;5&quot;&gt; - - &lt;div class=&quot;slide&quot;&gt; - &lt;h2&gt;Slide 1&lt;/h2&gt; - &lt;/div&gt; - &lt;div class=&quot;slide&quot;&gt; - &lt;h2&gt;Slide 2&lt;/h2&gt; - &lt;/div&gt; - &lt;div class=&quot;slide&quot;&gt; - &lt;h2&gt;Slide 3&lt;/h2&gt; - &lt;/div&gt; - &lt;div class=&quot;slide&quot;&gt; - &lt;h2&gt;Slide 4&lt;/h2&gt; - &lt;/div&gt; - &lt;div class=&quot;slide&quot;&gt; - &lt;h2&gt;Slide 5&lt;/h2&gt; - &lt;/div&gt; -&lt;/div&gt; -</code></pre> -<p>There isn't a whole lot going on here. We are just including a set of <code>radio</code> inputs (based on how many slides are desired) along with their corresponding <code>slide</code> class elements. You might notice we don't do anything to specifically target each individual slide item - you'll see why we don't need to in the CSS section!</p> -<h2>The CSS (SCSS)</h2> -<pre><code>/* Basic default styles */ + +<p>Let&#8217;s break down each piece:</p> + +<h2 id="the-html">The HTML</h2> + +<pre><code>&#60;div class="slider"&#62; + &#60;input type="radio" name="pagination" value="1" checked&#62; + &#60;input type="radio" name="pagination" value="2"&#62; + &#60;input type="radio" name="pagination" value="3"&#62; + &#60;input type="radio" name="pagination" value="4"&#62; + &#60;input type="radio" name="pagination" value="5"&#62; + + &#60;div class="slide"&#62; + &#60;h2&#62;Slide 1&#60;&#47;h2&#62; + &#60;&#47;div&#62; + &#60;div class="slide"&#62; + &#60;h2&#62;Slide 2&#60;&#47;h2&#62; + &#60;&#47;div&#62; + &#60;div class="slide"&#62; + &#60;h2&#62;Slide 3&#60;&#47;h2&#62; + &#60;&#47;div&#62; + &#60;div class="slide"&#62; + &#60;h2&#62;Slide 4&#60;&#47;h2&#62; + &#60;&#47;div&#62; + &#60;div class="slide"&#62; + &#60;h2&#62;Slide 5&#60;&#47;h2&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<p>There isn&#8217;t a whole lot going on here. We are just including a set of <code>radio</code> inputs (based on how many slides are desired) along with their corresponding <code>slide</code> class elements. You might notice we don&#8217;t do anything to specifically target each individual slide item - you&#8217;ll see why we don&#8217;t need to in the CSS section!</p> + +<h2 id="the-css-scss">The CSS (SCSS)</h2> + +<pre><code>&#47;* Basic default styles *&#47; .slider { height: 100%; left: 0; @@ -5344,73 +7012,91 @@ done } } -input[type=&quot;radio&quot;] { cursor: pointer; } +input[type="radio"] { cursor: pointer; } -/* Target slide item based on currently checked radio */ -input[type=&quot;radio&quot;]:nth-of-type(1):checked ~ .slide:nth-of-type(1), -input[type=&quot;radio&quot;]:nth-of-type(2):checked ~ .slide:nth-of-type(2), -input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide:nth-of-type(3), -input[type=&quot;radio&quot;]:nth-of-type(4):checked ~ .slide:nth-of-type(4), -input[type=&quot;radio&quot;]:nth-of-type(5):checked ~ .slide:nth-of-type(5) { +&#47;* Target slide item based on currently checked radio *&#47; +input[type="radio"]:nth-of-type(1):checked ~ .slide:nth-of-type(1), +input[type="radio"]:nth-of-type(2):checked ~ .slide:nth-of-type(2), +input[type="radio"]:nth-of-type(3):checked ~ .slide:nth-of-type(3), +input[type="radio"]:nth-of-type(4):checked ~ .slide:nth-of-type(4), +input[type="radio"]:nth-of-type(5):checked ~ .slide:nth-of-type(5) { opacity: 1; z-index: 1; } -/* Individual slide styling */ +&#47;* Individual slide styling *&#47; .slide:nth-of-type(1) { background: dodgerblue; } .slide:nth-of-type(2) { background: crimson; } .slide:nth-of-type(3) { background: rebeccapurple; } .slide:nth-of-type(4) { background: goldenrod; } .slide:nth-of-type(5) { background: pink; } </code></pre> -<p>Again, not much to see here. We use CSS to look down through the DOM for each <code>radio</code> elements slide "partner". We do this by targeting the <code>nth-of-type</code> on both elements. Simple stuff.</p> + +<p>Again, not much to see here. We use CSS to look down through the DOM for each <code>radio</code> elements slide &#8220;partner&#8221;. We do this by targeting the <code>nth-of-type</code> on both elements. Simple stuff.</p> + <p>Some drawbacks to this approach:</p> + <ul> <li>You need to manually target each new slide you add (color, styling, content, etc.)</li> <li>Lack of animations might require extra work to implement (maybe 3rd party libraries- ke AOS?)</li> -<li>Probably won't be best for extremely long/complex presentation slides</li> +<li>Probably won&#8217;t be best for extremely long&#47;complex presentation slides</li> </ul> -<p>That's it! Hope you enjoy playing around with it.</p></content> - <link href="https://bt.ht/keynote-slides-css"/> - <id>https://bt.ht/keynote-slides-css</id> + +<p>That&#8217;s it! Hope you enjoy playing around with it.</p></content> + <link href="https://btxx.org/keynote-slides-css"/> + <id>https://btxx.org/keynote-slides-css</id> <updated>2020-06-22T10:00:00Z</updated> <published>2020-06-22T10:00:00Z</published> </entry> <entry> <title>Using Parent Selectors in CSS</title> - <content type="html"><h1>Using Parent Selectors in CSS</h1> + <content type="html"><h1 id="using-parent-selectors-in-css">Using Parent Selectors in CSS</h1> + <p>2018-12-19</p> -<p>I recently saw a Twitter thread posted by <a href="https://twitter.com/innovati/status/1068998114491678720">Tommy Hodgins</a> on implementing highly requested styling features in CSS with only a minimal amount of JavaScript. Many of his examples are great, but the <code>parent</code> selector instantly peaked my interest.</p> -<p>Being able to target an element's parent always becomes a minor annoyance (since vanilla CSS does not support it) - so you always end up having to do something a little ugly like:</p> -<pre><code>var el = document.getElementById('custom-div'); + +<p>I recently saw a Twitter thread posted by Tommy Hodgins on implementing highly requested styling features in CSS with only a minimal amount of JavaScript. Many of his examples are great, but the <code>parent</code> selector instantly peaked my interest.</p> + +<p>Being able to target an element&#8217;s parent always becomes a minor annoyance (since vanilla CSS does not support it) - so you always end up having to do something a little ugly like:</p> + +<pre><code>var el = document.getElementById(&#39;custom-div&#39;); var parent = el.closest(selectors); </code></pre> + <p>And then add any custom styling to the parent element directly in JavaScript - or toggle a class which opens a whole other can of worms.</p> -<h2>Save the day with <a href="https://www.npmjs.com/package/jsincss-parent-selector">jsincss-parent-selector</a> and <a href="https://github.com/tomhodgins/qaffeine">qaffeine</a></h2> -<p>By using the <code>jsincss-parent-selector</code> and <code>qaffeine</code> plugins we can target an element's parent in CSS without breaking a sweat. Let's break it down:</p> -<h3>Import the packages</h3> + +<h2 id="save-the-day-with-jsincss-parent-selector-and-qaffeine">Save the day with jsincss-parent-selector and qaffeine</h2> + +<p>By using the <code>jsincss-parent-selector</code> and <code>qaffeine</code> plugins we can target an element&#8217;s parent in CSS without breaking a sweat. Let&#8217;s break it down:</p> + +<h3 id="import-the-packages">Import the packages</h3> + <pre><code>npm install jsincss-parent-selector qaffeine </code></pre> -<h3>HTML (ex. index.html)</h3> + +<h3 id="html-ex.-index.html">HTML (ex. index.html)</h3> + <p>Now we add our very simple HTML skeleton:</p> -<pre><code>&lt;!doctype html&gt; -&lt;html&gt; - &lt;head&gt; - &lt;link rel=&quot;stylesheet&quot; href=&quot;output.css&quot;&gt; - &lt;/head&gt; - &lt;body&gt; - &lt;header&gt; - &lt;main&gt; - &lt;h2&gt;This is a header&lt;/h2&gt; - &lt;/main&gt; - &lt;/header&gt; - &lt;/body&gt; - &lt;script src=output.js&gt;&lt;/script&gt; -&lt;/html&gt; -</code></pre> -<h3>JavaScript (ex. input.js)</h3> -<pre><code>const qaffeine = require('qaffeine') -const parent = require('jsincss-parent-selector') + +<pre><code>&#60;!doctype html&#62; +&#60;html&#62; + &#60;head&#62; + &#60;link rel="stylesheet" href="output.css"&#62; + &#60;&#47;head&#62; + &#60;body&#62; + &#60;header&#62; + &#60;main&#62; + &#60;h2&#62;This is a header&#60;&#47;h2&#62; + &#60;&#47;main&#62; + &#60;&#47;header&#62; + &#60;&#47;body&#62; + &#60;script src=output.js&#62;&#60;&#47;script&#62; +&#60;&#47;html&#62; +</code></pre> + +<h3 id="javascript-ex.-input.js">JavaScript (ex. input.js)</h3> + +<pre><code>const qaffeine = require(&#39;qaffeine&#39;) +const parent = require(&#39;jsincss-parent-selector&#39;) qaffeine( { @@ -5419,12 +7105,14 @@ qaffeine( parent } }, -'input.css', -'output.js', -'output.css' +&#39;input.css&#39;, +&#39;output.js&#39;, +&#39;output.css&#39; ) </code></pre> -<h3>CSS (ex. input.css)</h3> + +<h3 id="css-ex.-input.css">CSS (ex. input.css)</h3> + <pre><code>header { display: block; } @@ -5432,154 +7120,223 @@ main[--js-parent] { background: blue; } </code></pre> -<p>Then simply run <code>node</code> against your <code>js</code> file. That's it! I would also suggest checking out Tommy's <a href="https://www.youtube.com/watch?v=rG8cLe7VbW0">video covering this topic</a> if you prefer to follow along.</p></content> - <link href="https://bt.ht/jsincss-parent-selector"/> - <id>https://bt.ht/jsincss-parent-selector</id> + +<p>Then simply run <code>node</code> against your <code>js</code> file. That&#8217;s it! I would also suggest checking out Tommy&#8217;s video covering this topic if you prefer to follow along.</p></content> + <link href="https://btxx.org/jsincss-parent-selector"/> + <id>https://btxx.org/jsincss-parent-selector</id> <updated>2018-12-19T10:00:00Z</updated> <published>2018-12-19T10:00:00Z</published> </entry> <entry> <title>Transferring Media from macOS to a Jellyfin Server (Raspberry Pi 4)</title> - <content type="html"><h1>Transferring Media from macOS to a Jellyfin Server (Raspberry Pi 4)</h1> + <content type="html"><h1 id="transferring-media-from-macos-to-a-jellyfin-server-raspberry-pi-4">Transferring Media from macOS to a Jellyfin Server (Raspberry Pi 4)</h1> + <p>2022-03-12</p> -<p>I run a personal media server using Jellyfin on a Raspberry Pi 4 in my home. It's pretty great and works well across most devices - Google TV, iOS and Android devices, Chromebooks, etc.</p> + +<p>I run a personal media server using Jellyfin on a Raspberry Pi 4 in my home. It&#8217;s pretty great and works well across most devices - Google TV, iOS and Android devices, Chromebooks, etc.</p> + <p>The only small headache is adding content (ie. audio, videos) to the existing hard drive that Jellyfin reads from. The last thing you want to do is connect a keyboard and monitor to your Pi to add a few files. Especially if your Pi is setup like mine and buried at the back of a hidden cabinet.</p> -<p>More annoying would be the need to remove the hard drive itself, connect it to your device that has the new files you wish to transfer and then port them over. Big ol' pass on that system.</p> -<h2>SSH/SCP to the Rescue</h2> + +<p>More annoying would be the need to remove the hard drive itself, connect it to your device that has the new files you wish to transfer and then port them over. Big ol&#8217; pass on that system.</p> + +<h2 id="sshscp-to-the-rescue">SSH&#47;SCP to the Rescue</h2> + <p><em>Important</em>: before we begin, I should mention that this article assumes the following:</p> + <ul> <li>The files you plan to transfer from are on a macOS device</li> <li>You have setup Jellyfin on your Raspberry Pi device</li> <li>SSH is enabled and accessible on the Pi (across your local network)</li> -<li>The Jellyfin server's hard drive is mounted in the root directory via something like <code>/mnt</code></li> +<li>The Jellyfin server&#8217;s hard drive is mounted in the root directory via something like <code>&#47;mnt</code></li> </ul> -<p>Good? Moving on then...</p> + +<p>Good? Moving on then&#8230;</p> + <p>Open your terminal of choice and use the following command:</p> -<pre><code>scp movie.mp4 pi_user_name@PI_IP_ADDRESS:/mnt/movies/movie.mp4 + +<pre><code>scp movie.mp4 pi_user_name@PI_IP_ADDRESS:&#47;mnt&#47;movies&#47;movie.mp4 </code></pre> + <ol> <li><code>movie.mp4</code> is the file in the current macOS directory we plan to copy over</li> <li><code>pi_user_name</code> is the username you setup on your Raspberry Pi</li> -<li><code>PI_IP_ADDRESS</code> is, of course, your Pi's IP address</li> -<li>The appended <code>:/mnt/movies/movie.mp4</code> is the directory your Jellyfin server uses to pull-in media</li> +<li><code>PI_IP_ADDRESS</code> is, of course, your Pi&#8217;s IP address</li> +<li>The appended <code>:&#47;mnt&#47;movies&#47;movie.mp4</code> is the directory your Jellyfin server uses to pull-in media</li> </ol> -<p>You'll be prompted for the user password. Once entered the file will begin copying over to your remote Jellyfin server. That's it! Although, I should mention a little bonus feature that you should always have in your back pocket, since Jellyfin can sometimes be picky with media file formats:</p> -<h2>Converting Media Files with Ease</h2> -<p>This is where your new best friend <code>FFmpeg</code> comes into your life (if they weren't there already).</p> + +<p>You&#8217;ll be prompted for the user password. Once entered the file will begin copying over to your remote Jellyfin server. That&#8217;s it! Although, I should mention a little bonus feature that you should always have in your back pocket, since Jellyfin can sometimes be picky with media file formats:</p> + +<h2 id="converting-media-files-with-ease">Converting Media Files with Ease</h2> + +<p>This is where your new best friend <code>FFmpeg</code> comes into your life (if they weren&#8217;t there already).</p> + <ul> -<li>Download and install <code>FFmpeg</code> --&gt; <a href="https://www.ffmpeg.org/download.html">ffmpeg.org/download.html</a></li> +<li>Download and install <code>FFmpeg</code> &#8211;&#62; <a href="https://www.ffmpeg.org/download.html">ffmpeg.org&#47;download.html</a></li> </ul> + <p>Now navigate to the directory containing the media file you wish to convert via your Terminal and run the following command:</p> + <pre><code>ffmpeg -i input.mp4 output.mkv </code></pre> + <ol> <li><code>input.mp4</code> is the initial file we wish to convert</li> <li><code>output.mkv</code> will be the name and file type of our converted media</li> </ol> -<p>Now you can circle back and run the previous <code>scp</code> command once you have converted your files to the desired format. Hopefully Jellyfin doesn't complain about the formatting!</p></content> - <link href="https://bt.ht/jelly"/> - <id>https://bt.ht/jelly</id> + +<p>Now you can circle back and run the previous <code>scp</code> command once you have converted your files to the desired format. Hopefully Jellyfin doesn&#8217;t complain about the formatting!</p></content> + <link href="https://btxx.org/jelly"/> + <id>https://btxx.org/jelly</id> <updated>2022-03-12T10:00:00Z</updated> <published>2022-03-12T10:00:00Z</published> </entry> <entry> <title>Setup Jekyll from Scratch on a New Linux System</title> - <content type="html"><h1>Setup Jekyll from Scratch on a New Linux System</h1> + <content type="html"><h1 id="setup-jekyll-from-scratch-on-a-new-linux-system">Setup Jekyll from Scratch on a New Linux System</h1> + <p>2022-09-19</p> + <p><strong>Special Note:</strong> Credit needs to be given to user <a href="https://stackoverflow.com/users/4974784/achraf-jeday">Achraf JEDAY</a> for putting these instructions together on Stack Overflow (although his comments were targeting an older version of Ruby). This post is more for my own personal notes than anything else.</p> + <p>I find myself constantly running into small issues when trying to setup existing Jekyll projects on new Linux systems. I <em>could</em> use something like Docker, but that just seems so beefy and slow to me. So here is a step-by-step way (and foolproof from my own testing) to get Jekyll running smoothly in no time!</p> -<h2>Figuring out Ruby First</h2> + +<h2 id="figuring-out-ruby-first">Figuring out Ruby First</h2> + <p>The first item of business is removing the default Ruby that ships with most Linux distros:</p> + <pre><code>sudo apt-get remove ruby </code></pre> + <p>Then we check for updates and install everything we need:</p> + <pre><code>sudo apt update sudo apt install git curl libssl-dev libreadline-dev zlib1g-dev autoconf bison build-essential libyaml-dev libreadline-dev libncurses5-dev libffi-dev libgdbm-dev </code></pre> + <p>Now we can install <code>rbenv</code> and <code>ruby-build</code>:</p> -<pre><code>curl -sL https://github.com/rbenv/rbenv-installer/raw/main/bin/rbenv-installer | bash - + +<pre><code>curl -sL https:&#47;&#47;github.com&#47;rbenv&#47;rbenv-installer&#47;raw&#47;main&#47;bin&#47;rbenv-installer | bash - </code></pre> + <p>After both of those install, you will want to add those to your system <strong>PATH</strong>:</p> -<h3>Bash</h3> -<pre><code>echo 'export PATH=&quot;$HOME/.rbenv/bin:$PATH&quot;' &gt;&gt; ~/.bashrc -echo 'eval &quot;$(rbenv init -)&quot;' &gt;&gt; ~/.bashrc -source ~/.bashrc + +<h3 id="bash">Bash</h3> + +<pre><code>echo &#39;export PATH="$HOME&#47;.rbenv&#47;bin:$PATH"&#39; &#62;&#62; ~&#47;.bashrc +echo &#39;eval "$(rbenv init -)"&#39; &#62;&#62; ~&#47;.bashrc +source ~&#47;.bashrc </code></pre> -<h3>ZSH</h3> -<pre><code>echo 'export PATH=&quot;$HOME/.rbenv/bin:$PATH&quot;' &gt;&gt; ~/.zshrc -echo 'eval &quot;$(rbenv init -)&quot;' &gt;&gt; ~/.zshrc -source ~/.zshrc + +<h3 id="zsh">ZSH</h3> + +<pre><code>echo &#39;export PATH="$HOME&#47;.rbenv&#47;bin:$PATH"&#39; &#62;&#62; ~&#47;.zshrc +echo &#39;eval "$(rbenv init -)"&#39; &#62;&#62; ~&#47;.zshrc +source ~&#47;.zshrc </code></pre> + <p>With that complete, we can now install the version of Ruby we wish to use and set it globally (at this time of writing it is <code>3.1.2</code>):</p> + <pre><code>rbenv install 3.1.2 rbenv global 3.1.2 </code></pre> + <p>And <code>rehash</code> so our changes take:</p> + <pre><code>rbenv rehash </code></pre> + <p>Now you should see the properly set Ruby version when you run the following:</p> + <pre><code>ruby -v </code></pre> -<h2>Getting Ruby Gems</h2> -<p>In case you don't have it installed already, be sure to grab <code>rubygems</code>:</p> + +<h2 id="getting-ruby-gems">Getting Ruby Gems</h2> + +<p>In case you don&#8217;t have it installed already, be sure to grab <code>rubygems</code>:</p> + <pre><code>sudo apt install rubygems </code></pre> -<h2>Running Jekyll</h2> -<p>We are almost done! Navigate to your Jekyll project's directory and run:</p> + +<h2 id="running-jekyll">Running Jekyll</h2> + +<p>We are almost done! Navigate to your Jekyll project&#8217;s directory and run:</p> + <pre><code>gem install jekyll bundler bundle install </code></pre> -<p>That's it! Now if you run <code>bundle exec jekyll serve</code> you'll find your Jekyll project running locally! Hopefully this helps others when needing to port any Jekyll projects over to a new Linux system. I know it will save me time!</p> -<h2>Alpine Linux on Wayland</h2> + +<p>That&#8217;s it! Now if you run <code>bundle exec jekyll serve</code> you&#8217;ll find your Jekyll project running locally! Hopefully this helps others when needing to port any Jekyll projects over to a new Linux system. I know it will save me time!</p> + +<h2 id="alpine-linux-on-wayland">Alpine Linux on Wayland</h2> + <p>Save yourself a world of trouble: just use <code>docker</code>. The docker image below (jekyll-serve) works out-of-the-box:</p> -<p><a href="https://github.com/BretFisher/jekyll-serve">https://github.com/BretFisher/jekyll-serve</a></p> + +<p><a href="https://github.com/BretFisher/jekyll-serve">https:&#47;&#47;github.com&#47;BretFisher&#47;jekyll-serve</a></p> + <p>Then run the following inside your project:</p> -<pre><code>docker run -p 4000:4000 -v $(pwd):/site bretfisher/jekyll-serve + +<pre><code>docker run -p 4000:4000 -v $(pwd):&#47;site bretfisher&#47;jekyll-serve </code></pre></content> - <link href="https://bt.ht/jekyll"/> - <id>https://bt.ht/jekyll</id> + <link href="https://btxx.org/jekyll"/> + <id>https://btxx.org/jekyll</id> <updated>2022-09-19T10:00:00Z</updated> <published>2022-09-19T10:00:00Z</published> </entry> <entry> <title>Hosting a Jekyll Site on Sourcehut</title> - <content type="html"><h1>Hosting a Jekyll Site on Sourcehut</h1> + <content type="html"><h1 id="hosting-a-jekyll-site-on-sourcehut">Hosting a Jekyll Site on Sourcehut</h1> + <p>2021-12-06</p> -<p>I recently decided to switch my personal, static site's hosting from Netlify to <a href="https://srht.site">sourcehut pages</a>. The process went <em>fairly</em> smoothly with only a couple minor hiccups; nothing rage-inducing. After everything was up and running smoothly, I figured writing out a step-by-step tutorial might help others who are thinking of doing a similar switch (or looking to host their first static site).</p> -<p>But first, let me briefly explain why I made the switch in the first place...</p> -<h2>Why sourcehut pages?</h2> + +<p>I recently decided to switch my personal, static site&#8217;s hosting from Netlify to <a href="https://srht.site">sourcehut pages</a>. The process went <em>fairly</em> smoothly with only a couple minor hiccups; nothing rage-inducing. After everything was up and running smoothly, I figured writing out a step-by-step tutorial might help others who are thinking of doing a similar switch (or looking to host their first static site).</p> + +<p>But first, let me briefly explain why I made the switch in the first place&#8230;</p> + +<h2 id="why-sourcehut-pages">Why sourcehut pages?</h2> + <p>Using Netlify as your static host is simple, intuitive and comes packed with a great deal of extra functionality you can easily add-on. So, why would I decide to switch over to sourcehut? The best answer comes directly off the main homepage of <a href="https://sourcehut.org">sourcehut.org</a>:</p> + <ul> <li>Absolutely no tracking or advertising</li> <li>All features work without JavaScript</li> <li>Many features work without an account</li> -<li>The fastest &amp; lightest software forge</li> +<li>The fastest &#38; lightest software forge</li> <li>100% free and open source software</li> </ul> -<p>After realizing all that, it's pretty difficult to stick with Netlify's <em>proprietary</em> stack...</p> -<h2>Free but not <em>"free"</em></h2> -<p>I should note that using sourcehut pages <em>does</em> require you to be a contributing (read: paying) member on the platform. I'm a cheapo and selected the $2/month option but you might be inclined to donate more. Paying this "fee" is perfectly fine for me, considering the hosting quality (speed and storage) it affords me. It also doesn't hurt that I get the "feel good vibes" of supporting an important, open source product.</p> -<p>Keeping that in mind, let's get into setting up our static site!</p> -<h2>Setting up your repo locally</h2> + +<p>After realizing all that, it&#8217;s pretty difficult to stick with Netlify&#8217;s <em>proprietary</em> stack&#8230;</p> + +<h2 id="free-but-not-free">Free but not <em>&#8220;free&#8221;</em></h2> + +<p>I should note that using sourcehut pages <em>does</em> require you to be a contributing (read: paying) member on the platform. I&#8217;m a cheapo and selected the $2&#47;month option but you might be inclined to donate more. Paying this &#8220;fee&#8221; is perfectly fine for me, considering the hosting quality (speed and storage) it affords me. It also doesn&#8217;t hurt that I get the &#8220;feel good vibes&#8221; of supporting an important, open source product.</p> + +<p>Keeping that in mind, let&#8217;s get into setting up our static site!</p> + +<h2 id="setting-up-your-repo-locally">Setting up your repo locally</h2> + <ol> <li>Create a new account on <a href="https://sourcehut.org">sourcehut</a> (or log in to an existing one)</li> <li>Setup your billing to contribute monthly (tier amount is up to you)</li> -<li>Create a new repo under the <strong>git</strong> section[^1]</li> +<li>Create a new repo under the <strong>git</strong> section<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup></li> <li>Connect this repo locally (as you would via any other git host)</li> <li>In this new local directory, place all your Jekyll files as you would with any other static hosting provider</li> </ol> -<h2>The sourcehut build file</h2> -<p>In order to have your Jekyll site build and push the correct files live, you will need to use sourcehut's build system. This will run every time you push out a new change to your repo (new blog post, page content changes, styling updates).</p> + +<h2 id="the-sourcehut-build-file">The sourcehut build file</h2> + +<p>In order to have your Jekyll site build and push the correct files live, you will need to use sourcehut&#8217;s build system. This will run every time you push out a new change to your repo (new blog post, page content changes, styling updates).</p> + <p>To make things easier, you can copy the build file below (remember to use your <em>own</em> information for usernames, git repo naming etc):</p> -<pre><code>image: debian/stable -oauth: pages.sr.ht/PAGES:RW + +<pre><code>image: debian&#47;stable +oauth: pages.sr.ht&#47;PAGES:RW packages: - ruby-full - ruby-dev environment: site: yourusername.srht.site sources: -- https://git.sr.ht/~yourusername/your-repo-name +- https:&#47;&#47;git.sr.ht&#47;~yourusername&#47;your-repo-name tasks: - install-bundler: | sudo gem install bundler @@ -5588,95 +7345,147 @@ tasks: bundle install bundle exec jekyll build - package: | - cd your-repo-name/_site - tar -cvz . &gt; ../../site.tar.gz + cd your-repo-name&#47;_site + tar -cvz . &#62; ..&#47;..&#47;site.tar.gz - upload: | - acurl -f https://pages.sr.ht/publish/$site -Fcontent=@site.tar.gz + acurl -f https:&#47;&#47;pages.sr.ht&#47;publish&#47;$site -Fcontent=@site.tar.gz </code></pre> + <p>Save this file as <code>.build.yml</code> and place it in the root directory of your Jekyll source code.</p> -<p>Then, you just need to push your changes to the repo. If everything was setup properly, you'll be able to see your live site at <code>https://yourusername.srht.site</code> (just give it a little bit of time to run the full build process)</p> -<h2>Custom Domains</h2> -<p>If you're like me and want to use your own custom domain - have no fear! This process is actually quite easy.</p> + +<p>Then, you just need to push your changes to the repo. If everything was setup properly, you&#8217;ll be able to see your live site at <code>https:&#47;&#47;yourusername.srht.site</code> (just give it a little bit of time to run the full build process)</p> + +<h2 id="custom-domains">Custom Domains</h2> + +<p>If you&#8217;re like me and want to use your own custom domain - have no fear! This process is actually quite easy.</p> + <p>First, add a new A Record through your domain provider:</p> + <pre><code>@ IN A 173.195.146.139 </code></pre> + <p>Then change the following <code>environment</code> parameter inside your existing <code>.build.yml</code> file:</p> + <pre><code>environment: site: yourcustomdomain.com </code></pre> -<p>And that's it - custom domain set! If you run into any issues check out the <a href="https://srht.site/custom-domains">official documentation on custom domains</a>.</p> -<h2>Wrapping Up</h2> + +<p>And that&#8217;s it - custom domain set! If you run into any issues check out the <a href="https://srht.site/custom-domains">official documentation on custom domains</a>.</p> + +<h2 id="wrapping-up">Wrapping Up</h2> + <p>Hopefully this helps to streamline the process for others to host their static sites through sourcehut. Having open and healthy competition among host providers and <code>git</code> workflows is essential to avoiding vendor lock-in. </p> + <p>Even low-effort support for open-source products (like where you host your static site or FOSS projects) can go a long way. Just some food for thought.</p> -<p><hr data-content="footnotes"> -</p> -<p><a href="https://cnx.srht.site/">^1]: Thanks to [McSinyx</a> for pointing out that the repo used for creating your website can be named anything (instead of defaulting to your sourcehut username)</p></content> - <link href="https://bt.ht/jekyll-sourcehut"/> - <id>https://bt.ht/jekyll-sourcehut</id> + +<div class="footnotes"> +<hr/> +<ol> + +<li id="fn1"> +<p>Thanks to <a href="https://cnx.srht.site/">McSinyx</a> for pointing out that the repo used for creating your website can be named anything (instead of defaulting to your sourcehut username)&#160;<a href="#fnref1" rev="footnote">&#8617;</a></p> +</li> + +</ol> +</div></content> + <link href="https://btxx.org/jekyll-sourcehut"/> + <id>https://btxx.org/jekyll-sourcehut</id> <updated>2021-12-06T10:00:00Z</updated> <published>2021-12-06T10:00:00Z</published> </entry> <entry> <title>Introducing PageRoast</title> - <content type="html"><h1>Introducing PageRoast</h1> + <content type="html"><h1 id="introducing-pageroast">Introducing PageRoast</h1> + <p>2021-03-11</p> + <p>Following up with my concept of releasing small side projects weekly, I have officially launched <a href="https://pageroast.com">PageRoast</a>. What is PageRoast I hear you ask?</p> -<blockquote><p>Receive a detailed report analyzing your landing page with actionable items to improve your conversion rate.</p> + +<blockquote> +<p>Receive a detailed report analyzing your landing page with actionable items to improve your conversion rate.</p> </blockquote> + <p>In simple terms that just means I will <strong>roast your landing page</strong>. Included in a page roast report is:</p> + <ul> <li>Fully detailed ABCD Framework report</li> -<li>Proposed content &amp; design changes</li> +<li>Proposed content &#38; design changes</li> <li>Page performance audit</li> </ul> -<p>And you get all of this for just <strong>$100</strong> (currently 50% until April 1st with coupon code PHROAST). Alright, enough with the "sales pitch" - why did I make this side project?</p> + +<p>And you get all of this for just <strong>$100</strong> (currently 50% until April 1st with coupon code PHROAST). Alright, enough with the &#8220;sales pitch&#8221; - why did I make this side project?</p> + <p>From the main <a href="https://pageroast.com/#2021-03-10-pageroast-has-launched">launch blog post on PageRoast itself</a> I wrote:</p> -<blockquote><p>I've always been obsessed with developing landing pages that produce high conversion rates. It's what I've done for a large portion of my web development career.<br><br&gt;So I thought to myself, "Why not launch a small-scale audit service to help indie devs and startups?"</p> + +<blockquote> +<p>I&#8217;ve always been obsessed with developing landing pages that produce high conversion rates. It&#8217;s what I&#8217;ve done for a large portion of my web development career.So I thought to myself, &#8220;Why not launch a small-scale audit service to help indie devs and startups?&#8221;</p> </blockquote> -<p>That's really all there is to it. If you would like to learn more, check out the following links:</p> + +<p>That&#8217;s really all there is to it. If you would like to learn more, check out the following links:</p> + <ul> <li><a href="https://pageroast.com">PageRoast main website</a></li> <li><a href="https://pageroast.com/#2021-03-10-pageroast-has-launched">PageRoast official launch blog post</a></li> </ul></content> - <link href="https://bt.ht/introducing-pageroast"/> - <id>https://bt.ht/introducing-pageroast</id> + <link href="https://btxx.org/introducing-pageroast"/> + <id>https://btxx.org/introducing-pageroast</id> <updated>2021-03-11T10:00:00Z</updated> <published>2021-03-11T10:00:00Z</published> </entry> <entry> <title>Introducing Notez</title> - <content type="html"><h1>Introducing Notez</h1> + <content type="html"><h1 id="introducing-notez">Introducing Notez</h1> + <p>2021-01-13</p> -<p>I have always been a fan of simple note taking applications, since I tend to take a lot of random notes throughout the work day. Sometimes I reach for simple pen and paper, but other times it's nice to stay focused jotting down notes on the same device I'm working on.</p> + +<p>I have always been a fan of simple note taking applications, since I tend to take a lot of random notes throughout the work day. Sometimes I reach for simple pen and paper, but other times it&#8217;s nice to stay focused jotting down notes on the same device I&#8217;m working on.</p> + <p>Previously, I just created quick <code>notes.txt</code> files in my open code editor or fell back on the default OS note apps. These worked perfectly fine but often got in my way (or even worse - lost among everything else).</p> -<p>So I said the hell with it and built <a href="https://getnotez.netlify.app">Notez</a>.</p> -<h2>What makes Notez special?</h2> -<p>Nothing, really. It's actually a pretty "stupid" app compared to others on the market. But this one is <em>mine</em>. Plus, it was fun to piece it together on a random evening before bed.</p> -<p>For those curious, let's take a look at the feature list:</p> + +<p>So I said the hell with it and built Notez.</p> + +<h2 id="what-makes-notez-special">What makes Notez special?</h2> + +<p>Nothing, really. It&#8217;s actually a pretty &#8220;stupid&#8221; app compared to others on the market. But this one is <em>mine</em>. Plus, it was fun to piece it together on a random evening before bed.</p> + +<p>For those curious, let&#8217;s take a look at the feature list:</p> + <ul> -<li>free and open source (<a href="https://github.com/bradleytaunt/notez">github.com/bradleytaunt/notez</a>)</li> +<li>free and open source (github.com&#47;bradleytaunt&#47;notez)</li> <li>uses <code>localStorage</code> to keep changes persistent (helpful for browser crashes, etc)</li> <li>includes basic export functionality to download content as a simple <code>output.txt</code> file</li> </ul> -<p>That's it. Mind blowing stuff, eh?</p> -<h2>Making stuff is fun</h2> -<p>My main takeaway when building this tiny, dumb app was to just <em>enjoy building fun stuff</em>. It crossed my mind several times how there are already hundreds of note taking apps across the vast Internet. I also thought about how others might look at the code I wrote and go, "Oh my God - why did he do it that way? What an idiot!". But I don't care - I had fun making it.</p> + +<p>That&#8217;s it. Mind blowing stuff, eh?</p> + +<h2 id="making-stuff-is-fun">Making stuff is fun</h2> + +<p>My main takeaway when building this tiny, dumb app was to just <em>enjoy building fun stuff</em>. It crossed my mind several times how there are already hundreds of note taking apps across the vast Internet. I also thought about how others might look at the code I wrote and go, &#8220;Oh my God - why did he do it that way? What an idiot!&#8221;. But I don&#8217;t care - I had fun making it.</p> + <p>Hopefully you enjoy using it as well!</p></content> - <link href="https://bt.ht/introducing-notez"/> - <id>https://bt.ht/introducing-notez</id> + <link href="https://btxx.org/introducing-notez"/> + <id>https://btxx.org/introducing-notez</id> <updated>2021-01-13T10:00:00Z</updated> <published>2021-01-13T10:00:00Z</published> </entry> <entry> <title>Improving Tufte CSS for Jekyll</title> - <content type="html"><h1>Improving Tufte CSS for Jekyll</h1> + <content type="html"><h1 id="improving-tufte-css-for-jekyll">Improving Tufte CSS for Jekyll</h1> + <p>2019-11-01</p> + <p>After creating the ET-Jekyll theme almost two years ago, I finally got around to revamping the structure and improving a lot of minor performance issues. Items that have been surely needing of updates for the last couple of years.</p> -<h2>Introductions</h2> -<p>I've always been a sucker for Edward Tufte's incredibly simple, yet powerful design work used in his books and handout projects. So, in 2018 I released a Tufte CSS inspired Jekyll theme for the open source community. I called it <a href="https://et-jekyll.netlify.com">ET-Jekyll</a> (so original, I know). Tufte CSS was a great starting point for my Jekyll theme, but there were areas I thought could use some minor improvements.</p> + +<h2 id="introductions">Introductions</h2> + +<p>I&#8217;ve always been a sucker for Edward Tufte&#8217;s incredibly simple, yet powerful design work used in his books and handout projects. So, in 2018 I released a Tufte CSS inspired Jekyll theme for the open source community. I called it <a href="https://et-jekyll.netlify.com">ET-Jekyll</a> (so original, I know). Tufte CSS was a great starting point for my Jekyll theme, but there were areas I thought could use some minor improvements.</p> + <p>Feel free to read all the details on the design here: <a href="https://et-jekyll.netlify.com/et-jekyll-theme/">ET-Jekyll theme details</a></p> -<h2>Minor Fixes One Year Later</h2> -<p>When I finally circled back to this project recently, I noticed some minor issues that could be improved right away with little to no effort. Let's see the changes made at a glance:</p> + +<h2 id="minor-fixes-one-year-later">Minor Fixes One Year Later</h2> + +<p>When I finally circled back to this project recently, I noticed some minor issues that could be improved right away with little to no effort. Let&#8217;s see the changes made at a glance:</p> + <ul> <li>Sidenote, marginnote and figure element restyling (flexbox)</li> <li>Table styling fixes (right alignment issues)</li> @@ -5689,123 +7498,203 @@ site: yourcustomdomain.com <li>Add missing image link on example page</li> <li>Update details post structure</li> </ul> + <p>You can view all the updates in more detail <a href="https://github.com/bradleytaunt/ET-Jekyll/commit/254f9e8f28764c9525ba7405bbbfa18a3867d241">here</a>.</p> -<p><strong>So what did this accomplish?</strong> Let's break it down below.</p> -<h2>First Contentful Paint &amp; Input Delay</h2> + +<p><strong>So what did this accomplish?</strong> Let&#8217;s break it down below.</p> + +<h2 id="first-contentful-paint-input-delay">First Contentful Paint &#38; Input Delay</h2> + <p>The new improvements have netted the theme a savings of 300ms on first paint and reduced the input delay by 150ms. Small wins - but wins nonetheless since every millisecond counts.</p> -<p><figure> - <img src="/public/images/tufte-first-paint.webp" alt="First paint comparison" /> - <figcaption>First contentful paint savings: 300ms (<a href="/public/images/tufte-first-paint.webp">direct link to image)</a></figcaption> -</figure></p> -<p><figure> - <img src="/public/images/tufte-input-delay.webp" alt="Input delay comparison" /> - <figcaption>Reduction in input delay: 370ms down to 220ms (<a href="/public/images/tufte-input-delay.webp">direct link to image</a>)</figcaption> -</figure></p> -<h2>Fixing Render Blocking Items</h2> + +<h2 id="fixing-render-blocking-items">Fixing Render Blocking Items</h2> + <p>The original theme reported a few items that were slowing down the initial render for the end-users:</p> + <table> -<tr><th>URL </th><th>Size (KB) </th><th>Savings (ms) </th></tr> -<tr><td>/css/style.css </td><td>2.0 </td><td>150 </td></tr> -<tr><td>/lazysizes@4.0.1/lazysizes.js </td><td>5.0 </td><td>960 </td></tr> -<tr><td>MathJax.js?config=TeX-MML-AM<em></em>HTML </td><td>18.0 </td><td>1,260 </td></tr> -</table><p>These items were resolved by:</p> +<thead> +<tr> +<th>URL</th> +<th>Size (KB)</th> +<th>Savings (ms)</th> +</tr> +</thead> + +<tbody> +<tr> +<td>&#47;css&#47;style.css</td> +<td>2.0</td> +<td>150</td> +</tr> +<tr> +<td>&#47;lazysizes@4.0.1&#47;lazysizes.js</td> +<td>5.0</td> +<td>960</td> +</tr> +<tr> +<td>MathJax.js?config=TeX-MML-AM_CHTML</td> +<td>18.0</td> +<td>1,260</td> +</tr> +</tbody> +</table> + +<p>These items were resolved by:</p> + <ul> <li>Rendering all styling inline (therefore removing the extra HTTP request)</li> <li>Removing the lazysizes library altogether (browsers plan to support lazy loading natively in the future) + <ul> <li>The future plan is to integrate something like Cloudinary for out-of-the-box image processing</li> -</ul> -</li> +</ul></li> <li>Switch over MathJax to render equations as embedded SVGs (saves on bandwidth rendering an entire extra typeface)</li> </ul> -<h2>Lighthouse Numbers</h2> + +<h2 id="lighthouse-numbers">Lighthouse Numbers</h2> + <p>Though it might not look like much, the updated theme receives a 4-point boost to its performance rating during a Lighthouse audit. Having a perfect score would be even better, but I can settle for 2-points under (for now).</p> -<h4>Old Version</h4> + +<h4 id="old-version">Old Version</h4> + <table> -<tr><th>Performance </th><th>Accessibility </th><th>Best Practices </th><th>SEO </th></tr> -<tr><td>94 </td><td>100 </td><td>100 </td><td>100 </td></tr> -</table><h4>New Version</h4> +<thead> +<tr> +<th>Performance</th> +<th>Accessibility</th> +<th>Best Practices</th> +<th>SEO</th> +</tr> +</thead> + +<tbody> +<tr> +<td>94</td> +<td>100</td> +<td>100</td> +<td>100</td> +</tr> +</tbody> +</table> + +<h4 id="new-version">New Version</h4> + <table> -<tr><th>Performance </th><th>Accessibility </th><th>Best Practices </th><th>SEO </th></tr> -<tr><td>98 </td><td>100 </td><td>100 </td><td>100 </td></tr> -</table><h2>Final Thoughts</h2> -<p>This project could still use some more fine-tuning, but for now I'm fairly happy with the outcome. Even the smallest boost in performance and rendering time makes me feel like I accomplished something worthwhile. </p> -<p>Please don't hesitate to suggest features or point out any issues you happen to stumble across if you plan to use ET-Jekyll. Thanks for reading!</p></content> - <link href="https://bt.ht/improving-tufte-jekyll"/> - <id>https://bt.ht/improving-tufte-jekyll</id> +<thead> +<tr> +<th>Performance</th> +<th>Accessibility</th> +<th>Best Practices</th> +<th>SEO</th> +</tr> +</thead> + +<tbody> +<tr> +<td>98</td> +<td>100</td> +<td>100</td> +<td>100</td> +</tr> +</tbody> +</table> + +<h2 id="final-thoughts">Final Thoughts</h2> + +<p>This project could still use some more fine-tuning, but for now I&#8217;m fairly happy with the outcome. Even the smallest boost in performance and rendering time makes me feel like I accomplished something worthwhile. </p> + +<p>Please don&#8217;t hesitate to suggest features or point out any issues you happen to stumble across if you plan to use ET-Jekyll. Thanks for reading!</p></content> + <link href="https://btxx.org/improving-tufte-jekyll"/> + <id>https://btxx.org/improving-tufte-jekyll</id> <updated>2019-11-01T10:00:00Z</updated> <published>2019-11-01T10:00:00Z</published> </entry> <entry> <title>Improving Receipt UX</title> - <content type="html"><h1>Improving Receipt UX</h1> + <content type="html"><h1 id="improving-receipt-ux">Improving Receipt UX</h1> + <p>2019-05-15</p> -<p>There was a pretty interesting article posted a couple days ago about <a href="https://www.fastcompany.com/90347782/the-humble-receipt-gets-a-brilliant-redesign">rethinking the standard receipt design</a> that I found quite compelling. Although, as good as the concept is, I think it can be improved (simplified) even further.</p> -<h2>What was the redesign exaclty?</h2> + +<p>There was a pretty interesting article posted a couple days ago about rethinking the standard receipt design that I found quite compelling. Although, as good as the concept is, I think it can be improved (simplified) even further.</p> + +<h2 id="what-was-the-redesign-exaclty">What was the redesign exaclty?</h2> + <p>Overall <a href="https://twitter.com/datatoviz?lang=en">Susie Lu</a> did a wonderful job tackling such an old and forgotten design. She fixed some major pain points with the current receipt layout:</p> + <ul> <li>Bubble chart to visually indicate total spent per category</li> <li>Categorized items by percentage of total spent</li> <li>List individual items in descending order based on cost</li> <li>Bar charts to compliment the item listing order</li> </ul> + <p>Curious how her redesign looks? <a href="https://www.fastcompany.com/90347782/the-humble-receipt-gets-a-brilliant-redesign">Take a look at the original article</a></p> -<h2>What did this concept get wrong?</h2> + +<h2 id="what-did-this-concept-get-wrong">What did this concept get wrong?</h2> + <p>Simply put: <strong>paper waste</strong>. </p> + <p>Using bubble and bar charts from a visual design perspective is great - but not so eco-friendly in this instance (since we are dealing with physical paper waste). It might seem like a small nitpick but with hundreds of thousands (if not millions) of receipts printed daily, this extra paper space required would add up quickly.</p> + <p>Fortunately, I think with some minor tweaks we can keep the underlying principles of the new redesign, while creating a more eco-friendly layout. We can save more space and therefore save on the overall paper needed.</p> -<h2>Receipt Redesign</h2> -<p>Let's take a look at my redesign concept:</p> -<p><img src="/public/images/receipt-update.webp" alt="Receipt Update"> -</p> + +<h2 id="receipt-redesign">Receipt Redesign</h2> + +<p>Let&#8217;s take a look at my redesign concept:</p> + <p>With this layout we are able to keep all the key concepts that <a href="https://twitter.com/datatoviz?lang=en">Susie Lu</a> initially introduced with her receipt design while preserving more space.</p> + <ul> <li>Categories are still listed by percentage of total spent</li> <li>Individual items are organized in descending order based on cost</li> -<li>Uppercase and lowercase elements are used to distinguish parent / child items instead of additional space or dividers</li> +<li>Uppercase and lowercase elements are used to distinguish parent &#47; child items instead of additional space or dividers</li> </ul> -<h2>Final thoughts</h2> -<p>The original redesign from a visual perspective is <em>wonderful</em> but when you start to think about implementing it into the real world, it seems slightly impractical. My redesign concept is far from perfect (I'm sure I've overlooked some use cases) but I think it's a strong step forward for redesigning our archaic receipt layouts.</p></content> - <link href="https://bt.ht/improving-receipt-ux"/> - <id>https://bt.ht/improving-receipt-ux</id> + +<h2 id="final-thoughts">Final thoughts</h2> + +<p>The original redesign from a visual perspective is <em>wonderful</em> but when you start to think about implementing it into the real world, it seems slightly impractical. My redesign concept is far from perfect (I&#8217;m sure I&#8217;ve overlooked some use cases) but I think it&#8217;s a strong step forward for redesigning our archaic receipt layouts.</p></content> + <link href="https://btxx.org/improving-receipt-ux"/> + <id>https://btxx.org/improving-receipt-ux</id> <updated>2019-05-15T10:00:00Z</updated> <published>2019-05-15T10:00:00Z</published> </entry> <entry> <title>Improving Github's New Design</title> - <content type="html"><h1>Improving Github's New Design</h1> + <content type="html"><h1 id="improving-githubs-new-design">Improving Github&#8217;s New Design</h1> + <p>2020-07-07</p> + <p>Like many other Github users, I am not a big fan of their recent repository page redesign. In my mind it seems like a change just for the sake of change - the original UI worked perfectly fine.</p> + <p><em>Sigh.</em></p> + <p>I was planning on recreating the original Github layout with custom CSS but decided against it. Tackling such a big change in design would cause headaches if Github ever changed even one simple class or id on a given element. My final conclusion was to just improve their new design with my own personal quality of life improvements.</p> -<p>So, enough chit-chat. Let's get into it.</p> -<h2>Current Design (2020)</h2> -<p>The default view for a repo's homepage and ticket items are locked at a set <code>max-width</code>. This causes some visual strain in comparison to the full-width headers and navigations directly above. I use a decently sized montior when using your app Gitub - <strong>let me use all the space available to me</strong>!</p> -<p><figure> -<img src="/public/images/github-design-current.webp" alt="Current Github design"> -<figcaption>The current design of a repo's homepage. (<a href="/public/images/github-design-current.webp">direct link to image</a>)</figcaption> -</figure></p> -<p><figure> -<img src="/public/images/github-ticket.webp" alt="Github ticket design"> -<figcaption>The current design of a ticket item (<a href="/public/images/github-ticket.webp">direct link to image</a>)</figcaption> -</figure> </p> -<h2>My Improvements</h2> -<p>Your users shouldn't have to jump around the page looking for the important information they want to see. Resetting the basic repo information to the left side of the screen allows user to <em>instantly</em> read-up on the project details. (This design is catered towards left-to-right readers mind you).</p> -<p>We now also utilize all the available screen space, dependent on the user's browser window size.</p> -<p><figure> -<img src="/public/images/github-design-current-redesign.webp" alt="Current Github redesign"> -<figcaption>The repo's homepage now uses all available space (<a href="/public/images/github-design-current-redesign.webp">direct link to image</a></figcaption> -</figure></p> + +<p>So, enough chit-chat. Let&#8217;s get into it.</p> + +<h2 id="current-design-2020">Current Design (2020)</h2> + +<p>The default view for a repo&#8217;s homepage and ticket items are locked at a set <code>max-width</code>. This causes some visual strain in comparison to the full-width headers and navigations directly above. I use a decently sized montior when using your app Gitub - <strong>let me use all the space available to me</strong>!</p> + +<h2 id="my-improvements">My Improvements</h2> + +<p>Your users shouldn&#8217;t have to jump around the page looking for the important information they want to see. Resetting the basic repo information to the left side of the screen allows user to <em>instantly</em> read-up on the project details. (This design is catered towards left-to-right readers mind you).</p> + +<p>We now also utilize all the available screen space, dependent on the user&#8217;s browser window size.</p> + <p>We make similar updates to the ticket item view and also remove the out-of-place <code>margin-bottom</code> from the project link headers.</p> -<p><figure> -<img src="/public/images/github-ticket-redesign.webp" alt="Github ticket redesign"> -<figcaption>Github ticket items now align better with their header siblings (<a href="/public/images/github-ticket-redesign.webp">direct link to image</a>)</figcaption> -</figure> </p> -<h2>Try It Yourself!</h2> + +<h2 id="try-it-yourself">Try It Yourself!</h2> + <p>You can very easily implement these custom CSS changes with an extension for the browser of your choice:</p> -<p> <em>Firefox: <a href="https://addons.mozilla.org/en-US/firefox/addon/styl-us/">Stylus</a> - </em> Chrome: <a href="https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha">Stylebot</a></p> + +<ul> +<li>Firefox: <a href="https://addons.mozilla.org/en-US/firefox/addon/styl-us/">Stylus</a></li> +<li>Chrome: <a href="https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha">Stylebot</a></li> +</ul> + <p>Then create a new custom CSS file to target <code>github.com</code> with the following properties:</p> + <pre><code>.container-xl { max-width: 100%; } @@ -5818,7 +7707,7 @@ site: yourcustomdomain.com flex-direction: row !important; } -.repohead &gt; div.d-flex { +.repohead &#62; div.d-flex { margin-bottom: 0 !important; } @@ -5833,290 +7722,403 @@ site: yourcustomdomain.com width: 100%; } </code></pre> -<p>That's it! Feel free to improve on this and further make it your own! I might create a new repo for this project if I end up adding even more improvements to the core CSS.</p></content> - <link href="https://bt.ht/improving-githubs-new-design"/> - <id>https://bt.ht/improving-githubs-new-design</id> + +<p>That&#8217;s it! Feel free to improve on this and further make it your own! I might create a new repo for this project if I end up adding even more improvements to the core CSS.</p></content> + <link href="https://btxx.org/improving-githubs-new-design"/> + <id>https://btxx.org/improving-githubs-new-design</id> <updated>2020-07-07T10:00:00Z</updated> <published>2020-07-07T10:00:00Z</published> </entry> <entry> <title>Using HTML Validator Badges Again</title> - <content type="html"><h1>Using HTML Validator Badges Again</h1> + <content type="html"><h1 id="using-html-validator-badges-again">Using HTML Validator Badges Again</h1> + <p>2019-07-05</p> -<p>There was a time on the Internet when websites wore badges of honor, declaring that their code was semantic and followed the W3C guidelines. The validators we used weren't great (and <strong>still</strong> aren't perfect) but they represented a community that took pride in caring about the quality of their work. I think it's time we bring HTML badges back.</p> -<h2>Getting the flaws out of the way</h2> -<p>Of course, there were reasons why these badges slowly faded out of popularity. Some of the reasoning made sense, but most felt like a stretch in logic from my perspective. I always looked at it as a "the good outweighs the bad".</p> -<p>Jukka Korpela's post way back in 2003, <a href="http://jkorpela.fi/html/validation.html">HTML validation is a good tool but just a tool</a>, highlighted a lot of problems with relying so heavily on these HTML validators. I suggest you give it a read if this kind of thing interests you. I found it fascinating, even though I disagree with most of the points he makes.</p> + +<p>There was a time on the Internet when websites wore badges of honor, declaring that their code was semantic and followed the W3C guidelines. The validators we used weren&#8217;t great (and <strong>still</strong> aren&#8217;t perfect) but they represented a community that took pride in caring about the quality of their work. I think it&#8217;s time we bring HTML badges back.</p> + +<h2 id="getting-the-flaws-out-of-the-way">Getting the flaws out of the way</h2> + +<p>Of course, there were reasons why these badges slowly faded out of popularity. Some of the reasoning made sense, but most felt like a stretch in logic from my perspective. I always looked at it as a &#8220;the good outweighs the bad&#8221;.</p> + +<p>Jukka Korpela&#8217;s post way back in 2003, <a href="http://jkorpela.fi/html/validation.html">HTML validation is a good tool but just a tool</a>, highlighted a lot of problems with relying so heavily on these HTML validators. I suggest you give it a read if this kind of thing interests you. I found it fascinating, even though I disagree with most of the points he makes.</p> + <p>Some negatives used to dismiss HTML badges:</p> + <ul> <li><strong>The badge system is outdated</strong> - - Dismissing the worth of something based on how long it has been around is foolish. Many tools and frameworks are "outdated" but are still used to this day with great success.</li> -<li><strong>HTML5 doesn't <em>require</em> validation</strong> - - Technically <em>no subset of HTML</em> requires validation - but developers should aim for it. The W3C validators perform a solid job of keeping a standard for web development, so by following a standard we can keep experiences consistent for users.</li> + +<ul> +<li>Dismissing the worth of something based on how long it has been around is foolish. Many tools and frameworks are &#8220;outdated&#8221; but are still used to this day with great success.</li> +</ul></li> +<li><strong>HTML5 doesn&#8217;t <em>require</em> validation</strong> + +<ul> +<li>Technically <em>no subset of HTML</em> requires validation - but developers should aim for it. The W3C validators perform a solid job of keeping a standard for web development, so by following a standard we can keep experiences consistent for users.</li> +</ul></li> <li><strong>Validation is too formal</strong> - - I believe in the ability to achieve your desired outcome based on almost any constraints. If a project leans you towards invalid or non-semantic structure to fulfill requirements, a better approach needs to be evaluated. We as developers tend to settle too quickly on the easiest option available to us.</li> -<li><strong>Websites / web apps are just <em>too complex</em> to follow the W3C guidelines</strong> - - I call <em>BS</em> on this argument. The complexity of a website should have nothing to do with keeping semantic standards. <em>This is your job.</em></li> + +<ul> +<li>I believe in the ability to achieve your desired outcome based on almost any constraints. If a project leans you towards invalid or non-semantic structure to fulfill requirements, a better approach needs to be evaluated. We as developers tend to settle too quickly on the easiest option available to us.</li> +</ul></li> +<li><strong>Websites &#47; web apps are just <em>too complex</em> to follow the W3C guidelines</strong> + +<ul> +<li>I call <em>BS</em> on this argument. The complexity of a website should have nothing to do with keeping semantic standards. <em>This is your job.</em></li> +</ul></li> <li><strong>It only exists to catch syntax errors</strong> - - For the record, I still see this more of a positive take on using validators. Subtle and nuanced syntax mistakes can be easily overlooked by the human eye.</li> + +<ul> +<li>For the record, I still see this more of a positive take on using validators. Subtle and nuanced syntax mistakes can be easily overlooked by the human eye.</li> +</ul></li> </ul> -<h2>"Nobody puts <em>badges</em> in a corner"</h2> -<p>A large of amount of designers / developers tend to forget that there are new people entering our industry everyday and they might not be as well versed in the basics of the web (HTML &amp; CSS specifically). Since so many newcomers start out with JavaScript frameworks or jump onto pre-existing projects, they don't always grasp the core foundation of valid markup. Some frameworks even break basic standards for visuals or easier development environments - setting their initial expectations that ugly semantics is acceptable code. The ends justify the means, etc.</p> -<p>Guiding first-timers towards HTML validators let's them rethink their structure when building products or at least give some forethought to their outputted code. We, the more <em>verteran</em> members of the community, have the knowledge of proper semantics since we grew our careers around this "trend". We shouldn't assume newbies have the same understanding. The basics are important.</p> -<h2>Open source HTML5 badge</h2> -<p>Since the W3C doesn't officially produce any badges for HTML5 validation <sup><a href="#1">1</a></sup>, I've gone ahead and open sourced <code>SVG</code> and <code>PNG</code> versions of a badge based off the current W3C designs. You can check out the Github repo: <a href="https://github.com/bradleytaunt/html5-valid-badge">HTML5 Valid Badge</a></p> + +<h2 id="nobody-puts-badges-in-a-corner">&#8220;Nobody puts <em>badges</em> in a corner&#8221;</h2> + +<p>A large of amount of designers &#47; developers tend to forget that there are new people entering our industry everyday and they might not be as well versed in the basics of the web (HTML &#38; CSS specifically). Since so many newcomers start out with JavaScript frameworks or jump onto pre-existing projects, they don&#8217;t always grasp the core foundation of valid markup. Some frameworks even break basic standards for visuals or easier development environments - setting their initial expectations that ugly semantics is acceptable code. The ends justify the means, etc.</p> + +<p>Guiding first-timers towards HTML validators let&#8217;s them rethink their structure when building products or at least give some forethought to their outputted code. We, the more <em>verteran</em> members of the community, have the knowledge of proper semantics since we grew our careers around this &#8220;trend&#8221;. We shouldn&#8217;t assume newbies have the same understanding. The basics are important.</p> + +<h2 id="open-source-html5-badge">Open source HTML5 badge</h2> + +<p>Since the W3C doesn&#8217;t officially produce any badges for HTML5 validation 1, I&#8217;ve gone ahead and open sourced <code>SVG</code> and <code>PNG</code> versions of a badge based off the current W3C designs. You can check out the Github repo: <a href="https://github.com/bradleytaunt/html5-valid-badge">HTML5 Valid Badge</a></p> + <p>If you decide to use these badges, be sure to link these images to your valid passing URL (<a href="https://html5.validator.nu">html5.validator.nu</a>). You can see an example of the link in the footer of this website.</p> -<p>Please feel free to reach out and share your websites / projects that pass as valid HTML and include an HTML valid badge. I'd love to check them out!</p> -<h2>Refs</h2> -<p><sup id="1">1</sup> <a href="http://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/">Interview with Mike Smith</a>: "There won't be any proper Valid HTML5 icon forthcoming, so if you'd like to use one in your content, you'll probably need to create one on your own."</p></content> - <link href="https://bt.ht/html5-validator-badge"/> - <id>https://bt.ht/html5-validator-badge</id> + +<p>Please feel free to reach out and share your websites &#47; projects that pass as valid HTML and include an HTML valid badge. I&#8217;d love to check them out!</p> + +<h2 id="refs">Refs</h2> + +<p>1 <a href="http://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/">Interview with Mike Smith</a>: &#8220;There won&#8217;t be any proper Valid HTML5 icon forthcoming, so if you&#8217;d like to use one in your content, you&#8217;ll probably need to create one on your own.&#8221;</p></content> + <link href="https://btxx.org/html5-validator-badge"/> + <id>https://btxx.org/html5-validator-badge</id> <updated>2019-07-05T10:00:00Z</updated> <published>2019-07-05T10:00:00Z</published> </entry> <entry> <title>Write HTML Like It's 1999</title> - <content type="html"><h1>Write HTML Like It's 1999</h1> + <content type="html"><h1 id="write-html-like-its-1999">Write HTML Like It&#8217;s 1999</h1> + <p>2019-06-06</p> -<p>I am sure it's safe to say that most developers love to use the latest and greatest web tools available. Helpful resources such as preprocessors, template engines, syntax formatters - you name it - can all make a developer's life easier. Unfortunately, this sometimes comes at a cost: the HTML structure.</p> -<p>This is why I try my best to write HTML as if I'm stuck with the constraints of the 90s (within reason). What does this mean exactly? It means that <code>tables</code> are coded with <code>table</code> elements. Navigations are coded with <code>nav</code> and ordered/unordered list-items. Form inputs are not set with <code>display: none</code> and replaced with custom containers. You know, <em>semantic</em> HTML.</p> -<p>To be clear, I'm not advocating for creating projects that <em>look</em> like they belong in the 1990s. I would just prefer developers / designers be more conscious of their HTML <em>skeleton</em>.</p> -<h2>Bad HTML practices</h2> -<p>Let's do a very simple breakdown of some of the more common HTML no-nos:</p> -<p><ul> -<li>Using <code>span</code> or <code>div</code> elements for navigations or list components</li> -<li>Implementing custom <code>div</code> layouts for forms while removing items like <code>select</code> or <code>radio</code></li> -<li>Creating tables built out of custom <code>div</code> elements</li> -<li>Over-nesting elements or making overly complex depth to simple components</li> -<li>Content being heavily reliant on JavaScript "injection"</li> -</ul></p> -<h2>Good HTML practices</h2> + +<p>I am sure it&#8217;s safe to say that most developers love to use the latest and greatest web tools available. Helpful resources such as preprocessors, template engines, syntax formatters - you name it - can all make a developer&#8217;s life easier. Unfortunately, this sometimes comes at a cost: the HTML structure.</p> + +<p>This is why I try my best to write HTML as if I&#8217;m stuck with the constraints of the 90s (within reason). What does this mean exactly? It means that <code>tables</code> are coded with <code>table</code> elements. Navigations are coded with <code>nav</code> and ordered&#47;unordered list-items. Form inputs are not set with <code>display: none</code> and replaced with custom containers. You know, <em>semantic</em> HTML.</p> + +<p>To be clear, I&#8217;m not advocating for creating projects that <em>look</em> like they belong in the 1990s. I would just prefer developers &#47; designers be more conscious of their HTML <em>skeleton</em>.</p> + +<h2 id="bad-html-practices">Bad HTML practices</h2> + +<p>Let&#8217;s do a very simple breakdown of some of the more common HTML no-nos:</p> + +<h2 id="good-html-practices">Good HTML practices</h2> + <p>So what should you do in place of these bad HTML implementations?</p> -<p><ul> -<li>Use proper <code>nav</code>, <code>ul</code> and <code>ol</code> for navigations or list components</li> -<li>Style form elements directly <a href="https://www.filamentgroup.com/lab/select-css.html">this is already supported in browsers</a></li> -<li>Build tables using <code>table</code> element structure (mind-blowing, I know!)</li> -<li>Keep element hierarchy as slim and top level as possible</li> -<li>Avoid injecting <i>any</i> content via JavaScript (I understand this is difficult for certain apps, but try to minimize this as much as possible)</li> -</ul></p> -<h2>My basic "structure" test</h2> -<p>I've found a pretty simple starting point for testing the <em>bones of a website</em> by using the following single line of CSS:</p> + +<h2 id="my-basic-structure-test">My basic &#8220;structure&#8221; test</h2> + +<p>I&#8217;ve found a pretty simple starting point for testing the <em>bones of a website</em> by using the following single line of CSS:</p> + <pre><code>* { border: 2px dotted black; } </code></pre> + <p>This property simply outlines all elements on the current page in a dotted border. By placing a border on every HTML element you can instantly see how overly complex or <em>ugly</em> your structure might be under the hood.</p> -<h2>"Thanks, Captain Obvious!"</h2> -<p>I know, this stuff is pretty basic. The point of this post isn't to tell you (developers) something brand new or mind-blowing, but instead should inspire you to keep things simple.</p> -<p>Don't forget that there is always someone new into the world of design and development. Hopefully this post steers others towards keeping HTML code semantic and clean.</p> -<h2>Update to this article</h2> -<p>Since this post received <a href="https://news.ycombinator.com/item?id=20133817">so much more attention</a> than I ever expected, I've decided to touch on a few small points brought up in the comments.</p> + +<h2 id="thanks-captain-obvious">&#8220;Thanks, Captain Obvious!&#8221;</h2> + +<p>I know, this stuff is pretty basic. The point of this post isn&#8217;t to tell you (developers) something brand new or mind-blowing, but instead should inspire you to keep things simple.</p> + +<p>Don&#8217;t forget that there is always someone new into the world of design and development. Hopefully this post steers others towards keeping HTML code semantic and clean.</p> + +<h2 id="update-to-this-article">Update to this article</h2> + +<p>Since this post received <a href="https://news.ycombinator.com/item?id=20133817">so much more attention</a> than I ever expected, I&#8217;ve decided to touch on a few small points brought up in the comments.</p> + <ol> -<li><p><strong>What is the benefit of semantic HTML?</strong> - - Accessibility. Programs like screen readers are built around the foundation of proper HTML hierarchy. I highly recommend testing all your projects with a screen reader - it will open your eyes to a lot of issues users with disabilities suffer through.</p> -</li> -<li><p><strong>Tables not being responsive</strong> - - This simply isn't true. It is much more semantic to layout your tables as you would normally, then for mobile devices you can target specific inner elements and alter them with <code>flexbox</code> etc. (You can see responsive tables in action <a href="/responsive-tables">here</a>)</p> -</li> -<li><p><strong>Instead of the CSS one-liner, simply use Firefox debugger</strong> - - Fair point. Firefox is great!</p> -</li> +<li><p><strong>What is the benefit of semantic HTML?</strong></p> + +<ul> +<li>Accessibility. Programs like screen readers are built around the foundation of proper HTML hierarchy. I highly recommend testing all your projects with a screen reader - it will open your eyes to a lot of issues users with disabilities suffer through.</li> +</ul></li> +<li><p><strong>Tables not being responsive</strong></p> + +<ul> +<li>This simply isn&#8217;t true. It is much more semantic to layout your tables as you would normally, then for mobile devices you can target specific inner elements and alter them with <code>flexbox</code> etc. (You can see responsive tables in action <a href="/responsive-tables">here</a>)</li> +</ul></li> +<li><p><strong>Instead of the CSS one-liner, simply use Firefox debugger</strong></p> + +<ul> +<li>Fair point. Firefox is great!</li> +</ul></li> </ol></content> - <link href="https://bt.ht/html-like-1999"/> - <id>https://bt.ht/html-like-1999</id> + <link href="https://btxx.org/html-like-1999"/> + <id>https://btxx.org/html-like-1999</id> <updated>2019-06-06T10:00:00Z</updated> <published>2019-06-06T10:00:00Z</published> </entry> <entry> <title>HTML Dark Mode</title> - <content type="html"><h1>HTML Dark Mode</h1> + <content type="html"><h1 id="html-dark-mode">HTML Dark Mode</h1> + <p>2023-04-11</p> -<p>I wrote an article back in 2021 called <a href="https://bt.ht/lazy-dev-dark-mode/">The Lazy Developer's Dark + +<p>I wrote an article back in 2021 called <a href="https://bt.ht/lazy-dev-dark-mode/">The Lazy Developer&#8217;s Dark Mode</a> where I explained how to implement -a very basic "dark mode" by using the <code>prefers-color-scheme</code> CSS attribute. +a very basic &#8220;dark mode&#8221; by using the <code>prefers-color-scheme</code> CSS attribute. This stills works perfectly fine, and in fact there is a cleaner variation of this created by <em>jacksonchen666</em>: <a href="https://jacksonchen666.com/posts/2023-04-09/13-47-16/">These 3 Lines of CSS Will Give You Dark Mode for Free</a>.</p> + <p>But today I wanted to show how to add dark mode functionality to a website without <em>any CSS at all</em>.</p> -<pre><code>&lt;meta name=&quot;color-scheme&quot; content=&quot;dark light&quot;&gt; + +<pre><code>&#60;meta name="color-scheme" content="dark light"&#62; </code></pre> -<p>Add that line inside the <code>head</code> tags on your HTML files and you're good to go.</p> -<h2>Minor Caveat</h2> + +<p>Add that line inside the <code>head</code> tags on your HTML files and you&#8217;re good to go.</p> + +<h2 id="minor-caveat">Minor Caveat</h2> + <p>I mentioned this same issue on the official <a href="https://barf.bt.ht/dark-mode/">barf blog -post</a> but it doesn't hurt to repeat it here. -Safari still has minor ahref / link color issue when defaulting to browser dark +post</a> but it doesn&#8217;t hurt to repeat it here. +Safari still has minor ahref &#47; link color issue when defaulting to browser dark mode. If supporting that browser is a deal-breaker for you, I suggest looking at my <a href="https://bt.ht/safari-default-dark-mode/">hacky solution</a>.</p> + <p>Hopefully this helps others to add dark mode to their existing websites and projects with minimal effort!</p></content> - <link href="https://bt.ht/html-dark-mode"/> - <id>https://bt.ht/html-dark-mode</id> + <link href="https://btxx.org/html-dark-mode"/> + <id>https://btxx.org/html-dark-mode</id> <updated>2023-04-11T10:00:00Z</updated> <published>2023-04-11T10:00:00Z</published> </entry> <entry> <title>Goodbye WordPress, Hello Jekyll (Again)</title> - <content type="html"><h1>Goodbye WordPress, Hello Jekyll (Again)</h1> + <content type="html"><h1 id="goodbye-wordpress-hello-jekyll-again">Goodbye WordPress, Hello Jekyll (Again)</h1> + <p>2020-08-13</p> -<p>For the past four months this blog has been running on WordPress - but that ended today. I've officially switched back over to Jekyll. I'm not going to spend too much time delving into <em>why</em> I made the transition back, but I'll leave some cliff-notes for any interested parties.</p> -<h2>The big issues with <em>my</em> WordPress setup</h2> -<p>I have to state that these problems existed based on <em>my own</em> setup / hosting choices with WordPress - this is not a direct reflection of WP itself.</p> + +<p>For the past four months this blog has been running on WordPress - but that ended today. I&#8217;ve officially switched back over to Jekyll. I&#8217;m not going to spend too much time delving into <em>why</em> I made the transition back, but I&#8217;ll leave some cliff-notes for any interested parties.</p> + +<h2 id="the-big-issues-with-my-wordpress-setup">The big issues with <em>my</em> WordPress setup</h2> + +<p>I have to state that these problems existed based on <em>my own</em> setup &#47; hosting choices with WordPress - this is not a direct reflection of WP itself.</p> + <ol> -<li><strong>No theme editor access</strong></li> -</ol> -<p> - I was using EasyWP (Namecheap etc.) for my web hosting. It only cost me $3.88/month, which was very cheap for the quality of service provided. Unfortunately, this low price came with some setbacks. EasyWP doesn't allow users to edit <code>header.php</code> or <code>functions.php</code> files directly in the theme editor. Having to resort to FTP for simple one-line change was annoying.</p> +<li><strong>No theme editor access</strong> -<ol start="2"> -<li><strong>Super cache</strong></li> -</ol> -<p> - Caching web pages is wonderful for users on subsequent visits, but EasyWP took this to the extreme. Making minor styling updates sometimes required code changes in the <code>header.php</code> file directly in order to persist (see problem with editing these files in point #1).</p> +<ul> +<li>I was using EasyWP (Namecheap etc.) for my web hosting. It only cost me $3.88&#47;month, which was very cheap for the quality of service provided. Unfortunately, this low price came with some setbacks. EasyWP doesn&#8217;t allow users to edit <code>header.php</code> or <code>functions.php</code> files directly in the theme editor. Having to resort to FTP for simple one-line change was annoying.</li> +</ul></li> +<li><strong>Super cache</strong> -<ol start="3"> -<li><strong>Monthly cost</strong></li> -</ol> -<p> - As I stated above, spending $3.88 on a monthly basis was peanuts in the grand scheme of things. Still, an extra monthly subscription for a side hobby seemed overkill for my use case.</p> +<ul> +<li>Caching web pages is wonderful for users on subsequent visits, but EasyWP took this to the extreme. Making minor styling updates sometimes required code changes in the <code>header.php</code> file directly in order to persist (see problem with editing these files in point #1).</li> +</ul></li> +<li><strong>Monthly cost</strong> + +<ul> +<li>As I stated above, spending $3.88 on a monthly basis was peanuts in the grand scheme of things. Still, an extra monthly subscription for a side hobby seemed overkill for my use case.</li> +</ul></li> +<li><strong>Future proofing</strong> -<ol start="4"> -<li><strong>Future proofing</strong></li> +<ul> +<li>In the end, having the core website generate itself into static files means it will stand the test of time on the interwebs. HTML &#38; CSS FTW.</li> +</ul></li> </ol> -<p> - In the end, having the core website generate itself into static files means it will stand the test of time on the interwebs. HTML &amp; CSS FTW.</p> -<h2>What I lost in the switch</h2> + +<h2 id="what-i-lost-in-the-switch">What I lost in the switch</h2> + <ol> -<li><strong>Comments</strong></li> -</ol> -<p> - I loved the concept of owing / hosting comments directly on each post but this seemed like a fair trade-off when compared to the positives listed above. I might circle back around and use something like <a href="https://commento.io/">Commento</a> or <a href="https://github.com/imsun/gitment">Gitment</a></p> +<li><strong>Comments</strong> -<ol start="2"> -<li><strong>Blog anywhere</strong></li> +<ul> +<li>I loved the concept of owing &#47; hosting comments directly on each post but this seemed like a fair trade-off when compared to the positives listed above. I might circle back around and use something like <a href="https://commento.io/">Commento</a> or <a href="https://github.com/imsun/gitment">Gitment</a></li> +</ul></li> +<li><strong>Blog anywhere</strong> + +<ul> +<li>Having the ability to hop on any machine, log in to my site and blog was awesome. Over time though, I found myself not doing this very often. Most times when composing an article I found I would write it out, edit and publish all in one sitting. Cool concept - just not as useful.</li> +</ul></li> </ol> -<p> - Having the ability to hop on any machine, log in to my site and blog was awesome. Over time though, I found myself not doing this very often. Most times when composing an article I found I would write it out, edit and publish all in one sitting. Cool concept - just not as useful.</p> -<h2>Moving forward</h2> -<p>I've learned to stick with what keeps me productive (and in this case, keeps me writing consistently). I still love WordPress and won't hesitate to reach for it when the need arrives. Unfortunately, it seems my personal website isn't one of those instances.</p></content> - <link href="https://bt.ht/hello-jekyll"/> - <id>https://bt.ht/hello-jekyll</id> + +<h2 id="moving-forward">Moving forward</h2> + +<p>I&#8217;ve learned to stick with what keeps me productive (and in this case, keeps me writing consistently). I still love WordPress and won&#8217;t hesitate to reach for it when the need arrives. Unfortunately, it seems my personal website isn&#8217;t one of those instances.</p></content> + <link href="https://btxx.org/hello-jekyll"/> + <id>https://btxx.org/hello-jekyll</id> <updated>2020-08-13T10:00:00Z</updated> <published>2020-08-13T10:00:00Z</published> </entry> <entry> <title>Converting HEIF Images with macOS Automator</title> - <content type="html"><h1>Converting HEIF Images with macOS Automator</h1> + <content type="html"><h1 id="converting-heif-images-with-macos-automator">Converting HEIF Images with macOS Automator</h1> + <p>2023-07-21</p> + <p>Often times when you save or export photos from iOS to iCloud they often render themselves into <code>heif</code> or <code>heic</code> formats. Both macOS and iOS have no problem working with these formats, but a lot of software programs will not even recognize these filetypes. The obvious step would just be to convert them via an application or online service, right?</p> -<p>Not so fast! Wouldn't it be much cleaner if we could simply right-click our <code>heif</code> or <code>heic</code> files and convert them directly in Finder? Well, I've got some good news for you...</p> -<h2>Basic Requirements</h2> + +<p>Not so fast! Wouldn&#8217;t it be much cleaner if we could simply right-click our <code>heif</code> or <code>heic</code> files and convert them directly in Finder? Well, I&#8217;ve got some good news for you&#8230;</p> + +<h2 id="basic-requirements">Basic Requirements</h2> + <ol> <li>You will need to have <a href="https://homebrew.sh">Homebrew</a> installed</li> <li>You will need to install the <code>libheif</code> package through Homebrew: <code>brew install libheif</code></li> </ol> -<h2>Creating our custom Automator script</h2> -<p>For this example script we are going to convert the image to JPG format. You can freely change this to whatever format you wish (PNG, TIFF, etc.). We're just keeping things basic for this tutorial. Don't worry if you've never worked with Automator before because setting things up is incredibly simple.</p> + +<h2 id="creating-our-custom-automator-script">Creating our custom Automator script</h2> + +<p>For this example script we are going to convert the image to JPG format. You can freely change this to whatever format you wish (PNG, TIFF, etc.). We&#8217;re just keeping things basic for this tutorial. Don&#8217;t worry if you&#8217;ve never worked with Automator before because setting things up is incredibly simple.</p> + <ol> -<li>Open the macOS Automator from the Applications folder</li> -<li>Select <code>Quick Option</code> from the first prompt</li> -<li>Set "Workflow receives current" to <code>image files</code></li> -<li>Set the label "in" to <code>Finder</code></li> -<li>From the left pane, select "Library &gt; Utilities"</li> -<li>From the presented choices in the next pane, drag and drop <code>Run Shell Script</code> into the far right pane</li> -<li>Set the area "Pass input" to <code>as arguments</code></li> -<li>Enter the following code below as your script and type <code>⌘-S</code> to save (name it something like "Convert HEIC/HEIF to JPG")</li> -</ol> -<pre><code>for f in &quot;$@&quot; +<li><p>Open the macOS Automator from the Applications folder</p></li> +<li><p>Select <code>Quick Option</code> from the first prompt</p></li> +<li><p>Set &#8220;Workflow receives current&#8221; to <code>image files</code></p></li> +<li><p>Set the label &#8220;in&#8221; to <code>Finder</code></p></li> +<li><p>From the left pane, select &#8220;Library &#62; Utilities&#8221;</p></li> +<li><p>From the presented choices in the next pane, drag and drop <code>Run Shell Script</code> into the far right pane</p></li> +<li><p>Set the area &#8220;Pass input&#8221; to <code>as arguments</code></p></li> +<li><p>Enter the following code below as your script and type <code>⌘-S</code> to save (name it something like &#8220;Convert HEIC&#47;HEIF to JPG&#8221;)</p> + +<p>for f in &#8220;$@&#8221; do -/opt/homebrew/bin/heif-convert &quot;$f&quot; &quot;${f%.*}.jpg&quot; -done -</code></pre> -<h2>Making Edits</h2> -<p>If you ever have the need to edit this script (for example, changing the default format to <code>png</code>), you will need to navigate to your <code>~/Library/Services</code> folder and open your custom heif Quick Action in the Automator application. </p> +&#47;opt&#47;homebrew&#47;bin&#47;heif-convert &#8220;$f&#8221; &#8220;${f%.*}.jpg&#8221; +done</p></li> +</ol> + +<h2 id="making-edits">Making Edits</h2> + +<p>If you ever have the need to edit this script (for example, changing the default format to <code>png</code>), you will need to navigate to your <code>~&#47;Library&#47;Services</code> folder and open your custom heif Quick Action in the Automator application. </p> + <p>Simple as that. Happy converting!</p> -<p>If you're interested, I also have some other Automator scripts available:</p> + +<p>If you&#8217;re interested, I also have some other Automator scripts available:</p> + <ul> <li><a href="/batch-webp-conversion/">Batch Converting Images to webp with macOS Automator</a></li> <li><a href="/macos-convert-to-html/">Convert Files to HTML with macOS Automator Quick Actions</a></li> </ul></content> - <link href="https://bt.ht/heif"/> - <id>https://bt.ht/heif</id> + <link href="https://btxx.org/heif"/> + <id>https://btxx.org/heif</id> <updated>2023-07-21T10:00:00Z</updated> <published>2023-07-21T10:00:00Z</published> </entry> <entry> <title>Stop Using Hamburger Menus (Sometimes)</title> - <content type="html"><h1>Stop Using Hamburger Menus (Sometimes)</h1> + <content type="html"><h1 id="stop-using-hamburger-menus-sometimes">Stop Using Hamburger Menus (Sometimes)</h1> + <p>2023-05-05</p> -<p>I recently <a href="https://fosstodon.org/@tdarb/110264983268249599">tooted about my hatred of website hamburger menus</a> which was met with a surprising amount of support from other users. It seems like most people <em>don't actually like hamburger menus</em>. So why do we, as developers, keep using them in our products and designs? Is it our only option? Or is it because we have become conditioned to expect it?</p> -<h2>The Core Problem with Hamburger Menus</h2> -<p>The biggest headache when coming across these menus on the web is the complete disregard for <strong>accessibility</strong>. Performance and solid user experience is almost always thrown out the window in favour of a "prettier" design layout. You might have made the overall design "cleaner" for your users, but you sacrificed all usability to do so.</p> -<p>I challenge you to visit a webpage or web app with a hamburger menu and try to navigate solely with your keyboard and screen-readers (or better yet - try these screen readers on mobile!). Within seconds you will find a whole mess of issues. Now try the same test with JavaScript disabled... Yikes.</p> -<h2>"But I Have No Choice!"</h2> -<p>I see this argument pop-up frequently when taking to design leaders or developers. I call bullshit on this excuse. You <em>absolutely</em> have the choice to avoid implementing bad designs - that's your job! Either you're not fighting hard enough against those pushing for it, or you're just trying to build a "pretty" portfolio.</p> -<h2>Best Alternative: Sitemap Footer</h2> -<p>So instead of just whining about hamburger menus, I will actually offer up a solid replacement: <strong>sitemap footers</strong>. Simply place all your website/application links into the bottom footer and link directly to them from your header. Be sure to also include some form of "Top of the page" link for quick access back to the initial scroll view.</p> -<p>That's it. There is nothing else you need to do for this to <em>just work</em>. It might sound oversimplified and that's because it is. Looking for an example? This very website utilizes this technique, so give it a spin! Try using just your keyboard or even better - use a screen reader. Disable JS and CSS and watch it work flawlessly still.</p> + +<p>I recently <a href="https://fosstodon.org/@tdarb/110264983268249599">tooted about my hatred of website hamburger menus</a> which was met with a surprising amount of support from other users. It seems like most people <em>don&#8217;t actually like hamburger menus</em>. So why do we, as developers, keep using them in our products and designs? Is it our only option? Or is it because we have become conditioned to expect it?</p> + +<h2 id="the-core-problem-with-hamburger-menus">The Core Problem with Hamburger Menus</h2> + +<p>The biggest headache when coming across these menus on the web is the complete disregard for <strong>accessibility</strong>. Performance and solid user experience is almost always thrown out the window in favour of a &#8220;prettier&#8221; design layout. You might have made the overall design &#8220;cleaner&#8221; for your users, but you sacrificed all usability to do so.</p> + +<p>I challenge you to visit a webpage or web app with a hamburger menu and try to navigate solely with your keyboard and screen-readers (or better yet - try these screen readers on mobile!). Within seconds you will find a whole mess of issues. Now try the same test with JavaScript disabled&#8230; Yikes.</p> + +<h2 id="but-i-have-no-choice">&#8220;But I Have No Choice!&#8221;</h2> + +<p>I see this argument pop-up frequently when taking to design leaders or developers. I call bullshit on this excuse. You <em>absolutely</em> have the choice to avoid implementing bad designs - that&#8217;s your job! Either you&#8217;re not fighting hard enough against those pushing for it, or you&#8217;re just trying to build a &#8220;pretty&#8221; portfolio.</p> + +<h2 id="best-alternative-sitemap-footer">Best Alternative: Sitemap Footer</h2> + +<p>So instead of just whining about hamburger menus, I will actually offer up a solid replacement: <strong>sitemap footers</strong>. Simply place all your website&#47;application links into the bottom footer and link directly to them from your header. Be sure to also include some form of &#8220;Top of the page&#8221; link for quick access back to the initial scroll view.</p> + +<p>That&#8217;s it. There is nothing else you need to do for this to <em>just work</em>. It might sound oversimplified and that&#8217;s because it is. Looking for an example? This very website utilizes this technique, so give it a spin! Try using just your keyboard or even better - use a screen reader. Disable JS and CSS and watch it work flawlessly still.</p> + <p><strong>Pros:</strong></p> + <ul> <li>Keyboard navigation accessible</li> <li>Excellent screen-reader support</li> -<li>Works on all devices/screens by default (no media queries!)</li> +<li>Works on all devices&#47;screens by default (no media queries!)</li> <li>Stays out of the way until called upon (UX goodness)</li> <li>Requires ZERO CSS or JavaScript</li> </ul> + <p><strong>Cons:</strong></p> + <ul> -<li>Footer can become large with many links (although I <em>really</em> don't see this as a big deal)</li> +<li>Footer can become large with many links (although I <em>really</em> don&#8217;t see this as a big deal)</li> </ul> -<h2>No Excuse</h2> -<p>There really is no excuse to still be using hamburger menus. Users expect them to be present only because we as designers have conditioned them think that way. They deserve a better experience on the web. The <em>least</em> we can do is improve something as simple as website navigation...</p></content> - <link href="https://bt.ht/hamburgers"/> - <id>https://bt.ht/hamburgers</id> + +<h2 id="no-excuse">No Excuse</h2> + +<p>There really is no excuse to still be using hamburger menus. Users expect them to be present only because we as designers have conditioned them think that way. They deserve a better experience on the web. The <em>least</em> we can do is improve something as simple as website navigation&#8230;</p></content> + <link href="https://btxx.org/hamburgers"/> + <id>https://btxx.org/hamburgers</id> <updated>2023-05-05T10:00:00Z</updated> <published>2023-05-05T10:00:00Z</published> </entry> <entry> <title>Using Hamburger Menus? Try Sausage Links</title> - <content type="html"><h1>Using Hamburger Menus? Try Sausage Links</h1> + <content type="html"><h1 id="using-hamburger-menus-try-sausage-links">Using Hamburger Menus? Try Sausage Links</h1> + <p>2019-06-14</p> -<p>When designing medium to large sized menu navigations on the mobile web the default go-to, for some time now, has been hamburger menus. This isn't necessarily a <i>bad</i> thing, but there is a simpler alternative for certain use cases.</p> -<p>Before we get into the nitty-gritty details (and a simple demo) of the <em>sausage link</em> concept, let's take a quick look at the pros and cons of hamburger menus.</p> -<h2>Hamburger Menus</h2> -<p>The concept of the <a href="https://codepen.io/search/pens?q=hamburger%20menu&amp;page=1&amp;order=popularity&amp;depth=everything">hamburger menu</a> isn't <em>horrible</em> by any means, in fact it does solve a lot of problems from a visual perspective. Unfortunately, that doesn't mean it exists without some annoying flaws.</p> -<h3>The Good</h3> + +<p>When designing medium to large sized menu navigations on the mobile web the default go-to, for some time now, has been hamburger menus. This isn&#8217;t necessarily a bad thing, but there is a simpler alternative for certain use cases.</p> + +<p>Before we get into the nitty-gritty details (and a simple demo) of the <em>sausage link</em> concept, let&#8217;s take a quick look at the pros and cons of hamburger menus.</p> + +<h2 id="hamburger-menus">Hamburger Menus</h2> + +<p>The concept of the <a href="https://codepen.io/search/pens?q=hamburger%20menu&amp;page=1&amp;order=popularity&amp;depth=everything">hamburger menu</a> isn&#8217;t <em>horrible</em> by any means, in fact it does solve a lot of problems from a visual perspective. Unfortunately, that doesn&#8217;t mean it exists without some annoying flaws.</p> + +<h3 id="the-good">The Good</h3> + <ul> <li>Minimizes the amount visual space the menu requires</li> -<li>Fairly commonplace now that a good portion of users understand it's functionality</li> +<li>Fairly commonplace now that a good portion of users understand it&#8217;s functionality</li> <li>Makes the lives of designers easier by tucking all items away on mobile 😛</li> </ul> -<h3>The Bad</h3> + +<h3 id="the-bad">The Bad</h3> + <ul> -<li>Requires extra testing/work to ensure the menu will play nice with screen readers and keyboard-only users</li> +<li>Requires extra testing&#47;work to ensure the menu will play nice with screen readers and keyboard-only users</li> <li>Can get overly complex with the presence of children dropdown elements, help text etc.</li> <li>Adds bloat to projects that might require additional JavaScript to render these menus (CSS only hamburger menus avoid this issue)</li> <li>Adds an additional point of interaction from the user (click to open, then proceed to read through available options)</li> </ul> -<p>As you can see, the bad points listed above aren't <em>that</em> bad. I see them more as minor potholes along the UX journey for your end-users. A good portion of hamburger menu examples in the wild work perfectly fine and should remain as they are. However, those outliers who abuse or misuse the hamburger concept should be introduced to <strong>sausage links</strong>.</p> -<h2>Sausage Links</h2> -<p>I should start by mentioning that this concept is far from <strong>new</strong>. There are a good number of websites that already implement this menu type in some form or another. The point of this post isn't to blow your mind with some new-never-thought-of navigation design. I'm just trying to bring awareness to another available menu concept.</p> -<p>Enough chit-chat, let's take a look at sausage links in action:</p> + +<p>As you can see, the bad points listed above aren&#8217;t <em>that</em> bad. I see them more as minor potholes along the UX journey for your end-users. A good portion of hamburger menu examples in the wild work perfectly fine and should remain as they are. However, those outliers who abuse or misuse the hamburger concept should be introduced to <strong>sausage links</strong>.</p> + +<h2 id="sausage-links">Sausage Links</h2> + +<p>I should start by mentioning that this concept is far from <strong>new</strong>. There are a good number of websites that already implement this menu type in some form or another. The point of this post isn&#8217;t to blow your mind with some new-never-thought-of navigation design. I&#8217;m just trying to bring awareness to another available menu concept.</p> + +<p>Enough chit-chat, let&#8217;s take a look at sausage links in action:</p> + <p><img src="/public/images/scrolling-navigation.png" alt="Scrolling menu with sausage links" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/QXjjbE/">Live CodePen Example</a></p> -<p>The above CodePen adds a good amount of visual design fluff, so let's take a look at the bare minimum HTML &amp; CSS needed to accomplish this menu:</p> -<pre><code>&lt;nav class=&quot;sausage-links&quot;&gt; - &lt;ul&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Homepage&lt;/a&gt;&lt;/li&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Categories&lt;/a&gt;&lt;/li&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Filter Properties&lt;/a&gt;&lt;/li&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Edit Optional Tags&lt;/a&gt;&lt;/li&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Research Papers&lt;/a&gt;&lt;/li&gt; - &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contact Our Team&lt;/a&gt;&lt;/li&gt; - &lt;/ul&gt; -&lt;/nav&gt; -</code></pre> -<pre><code>/* Sausage Links Nav Container */ + +<p>The above CodePen adds a good amount of visual design fluff, so let&#8217;s take a look at the bare minimum HTML &#38; CSS needed to accomplish this menu:</p> + +<pre><code>&#60;nav class="sausage-links"&#62; + &#60;ul&#62; + &#60;li&#62;&#60;a href=""&#62;Homepage&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Categories&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Filter Properties&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Edit Optional Tags&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Research Papers&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Contact Our Team&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;&#47;ul&#62; +&#60;&#47;nav&#62; + + + +&#47;* Sausage Links Nav Container *&#47; .sausage-links { position: relative; } -/* The left and right &quot;faded&quot; pseudo elements */ +&#47;* The left and right "faded" pseudo elements *&#47; .sausage-links:before, .sausage-links:after { - content: ''; + content: &#39;&#39;; height: calc(100% - 2em); pointer-events: none; position: absolute; @@ -6133,7 +8135,7 @@ done left: 0; } -/* Basic flexbox to prevent items from breaking lines */ +&#47;* Basic flexbox to prevent items from breaking lines *&#47; .sausage-links ul { display: flex; flex-wrap: nowrap; @@ -6149,142 +8151,204 @@ done display: inline-block; } </code></pre> + <p>Pretty simple, eh?</p> + <p><strong>Update</strong>: Thanks to <a href="https://twitter.com/dany0w">@dany0w</a> for pointing out that I forgot to include <code>-webkit-overflow-scrolling: touch</code> for momentum scrolling on iOS.</p> -<h3>The Good</h3> + +<h3 id="the-good-1">The Good</h3> + <ul> <li>Extremely minimal amount of CSS required</li> -<li>Screen reader / keyboard-only safe</li> +<li>Screen reader &#47; keyboard-only safe</li> <li>Zero JavaScript needed</li> <li>No need for hacky hidden <code>radio</code> inputs for toggling parent containers etc.</li> <li>Users can see first few available options without any interaction</li> </ul> -<h3>The Bad</h3> + +<h3 id="the-bad-1">The Bad</h3> + <ul> <li>May not look the most visually appealing for certain project designs (ugly scrollbar in some instances)</li> <li>Better suited for small to medium menu lists compared to massive sitemaps</li> -<li>Without proper fade / cut off visual cues, users may not understand they can scroll</li> -</ul> -<h2>So, should I use hamburger menus or sausage links?</h2> -<p>That really depends on your project or overall mobile design (I know, such a helpful answer). I'm sure there are even a few use cases where it would make sense to have sausage links within a toggle-based hamburger menu. The menu possibilities could be endless!</p> -<p>That's it. I hope I've inspired you to try out sausage links in the near future or at least made you think more deeply about mobile navigation design!</p> -<p><small>...is anyone else really hungry now?</small></p></content> - <link href="https://bt.ht/hamburger-menu-alternative"/> - <id>https://bt.ht/hamburger-menu-alternative</id> +<li>Without proper fade &#47; cut off visual cues, users may not understand they can scroll</li> +</ul> + +<h2 id="so-should-i-use-hamburger-menus-or-sausage-links">So, should I use hamburger menus or sausage links?</h2> + +<p>That really depends on your project or overall mobile design (I know, such a helpful answer). I&#8217;m sure there are even a few use cases where it would make sense to have sausage links within a toggle-based hamburger menu. The menu possibilities could be endless!</p> + +<p>That&#8217;s it. I hope I&#8217;ve inspired you to try out sausage links in the near future or at least made you think more deeply about mobile navigation design!</p> + +<p>&#8230;is anyone else really hungry now?</p></content> + <link href="https://btxx.org/hamburger-menu-alternative"/> + <id>https://btxx.org/hamburger-menu-alternative</id> <updated>2019-06-14T10:00:00Z</updated> <published>2019-06-14T10:00:00Z</published> </entry> <entry> <title>Goodbye CSS Preprocessors</title> - <content type="html"><h1>Goodbye CSS Preprocessors</h1> + <content type="html"><h1 id="goodbye-css-preprocessors">Goodbye CSS Preprocessors</h1> + <p>2017-09-07</p> -<p>I have been using preprocessors across all my side projects since they first popped onto the scene. Sass, Stylus, LESS — you name the CSS preprocessor and I've most likely used it because CSS preprocessors are awesome.</p> -<p>But that all changes moving forward. I'm going back to basics with CSS. Straight vanilla, man.</p> + +<p>I have been using preprocessors across all my side projects since they first popped onto the scene. Sass, Stylus, LESS — you name the CSS preprocessor and I&#8217;ve most likely used it because CSS preprocessors are awesome.</p> + +<p>But that all changes moving forward. I&#8217;m going back to basics with CSS. Straight vanilla, man.</p> + <p><img src="/public/images/sass-cancel_rl1fsw_c_scale,w_800.webp" alt="No Sass" /></p> -<h2>Why? And who cares?</h2> -<p>Let's start by breaking down the main positives about preprocessors:</p> + +<h2 id="why-and-who-cares">Why? And who cares?</h2> + +<p>Let&#8217;s start by breaking down the main positives about preprocessors:</p> + <ul> <li>Nested syntax</li> <li>Definable variables</li> <li>Advanced mathematical functions</li> <li>Reusable mixins</li> </ul> -<p>All of these features are great and I completely understand the draw (I was also sucked into the hype) - but now let's see the negatives.</p> -<h2>1. Debugging is a chore</h2> -<p>So you found some weird padding clobbering an element's default styles on line 255 of your main complied CSS file? Excellent! Now you just need to figure out which file that property comes from.</p> -<p>This might sound trivial or that you can fix this with rendered comments but if you ever work on a project with hundreds of Sass/Stylus/LESS files all importing and compiling into each other - it can get out of hand.</p> + +<p>All of these features are great and I completely understand the draw (I was also sucked into the hype) - but now let&#8217;s see the negatives.</p> + +<h2 id="1.-debugging-is-a-chore">1. Debugging is a chore</h2> + +<p>So you found some weird padding clobbering an element&#8217;s default styles on line 255 of your main complied CSS file? Excellent! Now you just need to figure out which file that property comes from.</p> + +<p>This might sound trivial or that you can fix this with rendered comments but if you ever work on a project with hundreds of Sass&#47;Stylus&#47;LESS files all importing and compiling into each other - it can get out of hand.</p> + <p>Solution: Using plain CSS makes using browser dev tools a breeze. See a bug on line 255? No problem, let me fix line 255.</p> -<h2>2. Dependencies for development</h2> -<p>Building a project with a preprocessor brings with it unnecessary baggage; dependencies. You'll need to be running some sort of task runner (see grunt or gulp) that will compile and minify your CSS. I see this as extra overhead both during the initial setup of the project for new team members and the testing environment.</p> + +<h2 id="2.-dependencies-for-development">2. Dependencies for development</h2> + +<p>Building a project with a preprocessor brings with it unnecessary baggage; dependencies. You&#8217;ll need to be running some sort of task runner (see grunt or gulp) that will compile and minify your CSS. I see this as extra overhead both during the initial setup of the project for new team members and the testing environment.</p> + <p>By using plain CSS, you avoid including an extra package in your package.json file (if applicable) or having to rely on third party compilers such as codekit (although I do recommend this app).</p> -<h2>3. Variables &amp; mixins become unwieldily</h2> + +<h2 id="3.-variables-mixins-become-unwieldily">3. Variables &#38; mixins become unwieldily</h2> + <p>Both variables and mixins are great in small doses, but if your project has any real size to it these helpers become a hinderance. By using comma-delimited CSS selectors you can achieve the same outcome without the horror of needing a specific preprocessor file to handle just variables and mixins.</p> + <p>Basic example:</p> + <pre><code>selector, selectTwo, .css-class { - /* shared styling */ + &#47;* shared styling *&#47; } </code></pre> -<h2>4. Welcome to nesting hell</h2> -<p>Honestly, I've never been a fan of nesting. From a file structure perspective it is indeed very "clean", but you sacrifice that cleanliness in the final compiled production code. You're making your development environment easier to glance at and work through at the cost of your production-ready, customer facing code.</p> + +<h2 id="4.-welcome-to-nesting-hell">4. Welcome to nesting hell</h2> + +<p>Honestly, I&#8217;ve never been a fan of nesting. From a file structure perspective it is indeed very &#8220;clean&#8221;, but you sacrifice that cleanliness in the final compiled production code. You&#8217;re making your development environment easier to glance at and work through at the cost of your production-ready, customer facing code.</p> + <p>You also run into another big no-no in my eyes: extreme selector specificity. The DOM target search starts to get out of control once you start having classes and selectors building up towards 10 or more steps.</p> + <p>Bad:</p> -<pre><code>body #home .container .modal nav .inner-nav &gt; ul &gt; li &gt; a { + +<pre><code>body #home .container .modal nav .inner-nav &#62; ul &#62; li &#62; a { color: red; } </code></pre> + <p>Good:</p> + <pre><code>.inner-nav a { color: red; } </code></pre> -<p>Don't forget the amount of work needed to override styling with such deep selector specificity. That's where you end up diving into the world of <i>!important</i> tags.</p> -<h2>Final thoughts</h2> + +<p>Don&#8217;t forget the amount of work needed to override styling with such deep selector specificity. That&#8217;s where you end up diving into the world of !important tags.</p> + +<h2 id="final-thoughts">Final thoughts</h2> + <p>It should go without saying that this is just my personal preference, there is no law behind this. If you use and absolutely love preprocessors - more power to you. All I suggest is using plain old vanilla CSS for your next project and see how it works out.</p> -<p>And do you know what I've learned to appreciate after switching back to vanilla? <strong>CSS is more beautiful when developed in it's rawest form</strong>.</p></content> - <link href="https://bt.ht/goodbye-css-preprocessors"/> - <id>https://bt.ht/goodbye-css-preprocessors</id> + +<p>And do you know what I&#8217;ve learned to appreciate after switching back to vanilla? CSS is more beautiful when developed in it&#8217;s rawest form.</p></content> + <link href="https://btxx.org/goodbye-css-preprocessors"/> + <id>https://btxx.org/goodbye-css-preprocessors</id> <updated>2017-09-07T10:00:00Z</updated> <published>2017-09-07T10:00:00Z</published> </entry> <entry> <title>Applying Email-Based Git Patches in Evolution on Linux</title> - <content type="html"><h1>Applying Email-Based Git Patches in Evolution on Linux</h1> + <content type="html"><h1 id="applying-email-based-git-patches-in-evolution-on-linux">Applying Email-Based Git Patches in Evolution on Linux</h1> + <p>2023-04-25</p> + <p>Users who work with git patches through email most likely use a terminal-based program such as <code>aerc</code> or <code>mutt</code>. CLI email clients tend to have built-in support for easily applying patches directly to their local repos. But what about people who prefer to use graphical email apps?</p> + <p>Lucky for us, it is actually fairly simple to replicate a similar workflow to that of a CLI client. In this example I will be focusing on the Evolution email client, but the core principles should work in most other GUIs.</p> -<h2>The Basics</h2> -<blockquote><p><strong>Note:</strong> The following assumes you already have <code>git</code> installed and setup on your existing system.</p> + +<h2 id="the-basics">The Basics</h2> + +<blockquote> +<p><strong>Note:</strong> The following assumes you already have <code>git</code> installed and setup on your existing system.</p> </blockquote> -<p>I find it best to first create a top-level folder on your system named <code>patches</code>. We will use this folder as a temporary location for reviewing any <code>git</code> patches submitted via email. I normally place this under <code>/home/&lt;username&gt;/patches</code>.</p> -<p>Next, locate the email patch in Evolution and right-click on it. Select "Save as mbox..." and place this file inside your newly created <code>patches</code> folder.</p> + +<p>I find it best to first create a top-level folder on your system named <code>patches</code>. We will use this folder as a temporary location for reviewing any <code>git</code> patches submitted via email. I normally place this under <code>&#47;home&#47;&#60;username&#62;&#47;patches</code>.</p> + +<p>Next, locate the email patch in Evolution and right-click on it. Select &#8220;Save as mbox&#8230;&#8221; and place this file inside your newly created <code>patches</code> folder.</p> + <p>Now simply open your terminal, navigate to your project and run:</p> -<pre><code>git am &lt;path-to-patches-folder&gt;/&lt;patch-filename&gt;.mbox + +<pre><code>git am &#60;path-to-patches-folder&#62;&#47;&#60;patch-filename&#62;.mbox </code></pre> -<p>This should apply the patch directly to your project without issue. You are now free to test these changes locally. If everything looks good, you're able to instantly push these changes remotely.</p> + +<p>This should apply the patch directly to your project without issue. You are now free to test these changes locally. If everything looks good, you&#8217;re able to instantly push these changes remotely.</p> + <p>Done and done.</p> + <p>Feel free to purge your <code>patches</code> folder regularly or keep them around for future reference if you prefer!</p></content> - <link href="https://bt.ht/git-patches"/> - <id>https://bt.ht/git-patches</id> + <link href="https://btxx.org/git-patches"/> + <id>https://btxx.org/git-patches</id> <updated>2023-04-25T10:00:00Z</updated> <published>2023-04-25T10:00:00Z</published> </entry> <entry> <title>Simplifying the Craigslist Gallery</title> - <content type="html"><h1>Simplifying the Craigslist Gallery</h1> + <content type="html"><h1 id="simplifying-the-craigslist-gallery">Simplifying the Craigslist Gallery</h1> + <p>2022-10-03</p> + <p><strong>This article was updated on October 11, 2022</strong></p> -<p>I'm a big fan of <a href="https://craigslist.org">craigslist.org</a> and the overall UX used throughout their application. My own website is an ever-changing example of "brutalist" or minimalist design, so I'm always inspired by existing web apps out in the wild using the same principles.</p> + +<p>I&#8217;m a big fan of <a href="https://craigslist.org">craigslist.org</a> and the overall UX used throughout their application. My own website is an ever-changing example of &#8220;brutalist&#8221; or minimalist design, so I&#8217;m always inspired by existing web apps out in the wild using the same principles.</p> + <p>One nitpick I have with the current craigslist design is their approach to image galleries inside their listings. They use a chunk of bloated JavaScript (more than <code>380kB</code> total) to render something as simple as a collection of images. This seems like overkill to me.</p> -<p><figure> - <img src="/public/images/craigslist-gallery.webp" alt="Current craigslist.org gallery view"> - <figcaption>The current look of image galleries on craigslist</figcaption> -</figure></p> -<h2>Simplifying Things</h2> -<p>My first suggestion would be to remove JavaScript altogether. We can replicate most of the required features with just HTML &amp; CSS. Let's start with our core HTML structure:</p> -<h3>HTML</h3> -<pre><code>&lt;div class=&quot;gallery-wrapper&quot;&gt; - &lt;div class=&quot;full-size&quot;&gt; - &lt;a name=&quot;p1&quot;&gt;&lt;img src=&quot;https://picsum.photos/id/100/400&quot; alt=&quot;Picture 1&quot; class=&quot;gallery-item&quot;&gt;&lt;/a&gt; - &lt;a name=&quot;p2&quot;&gt;&lt;img src=&quot;https://picsum.photos/id/101/400&quot; alt=&quot;Picture 2&quot; class=&quot;gallery-item&quot;&gt;&lt;/a&gt; - &lt;a name=&quot;p3&quot;&gt;&lt;img src=&quot;https://picsum.photos/id/106/400&quot; alt=&quot;Picture 3&quot; class=&quot;gallery-item&quot;&gt;&lt;/a&gt; - &lt;/div&gt; - &lt;div class=&quot;thumbnails&quot;&gt; - &lt;a href=&quot;#p1&quot;&gt;&lt;img src=&quot;https://picsum.photos/id/100/100&quot; alt=&quot;Picture 1 Thumbnail&quot; class=&quot;thumbnail-1&quot;&gt;&lt;/a&gt; - &lt;a href=&quot;#p2&quot;&gt;&lt;img src=&quot;https://picsum.photos/id/101/100&quot; alt=&quot;Picture 2 Thumbnail&quot; class=&quot;thumbnail-2&quot;&gt;&lt;/a&gt; - &lt;a href=&quot;#p3&quot;&gt;&lt;img src=&quot;https://picsum.photos/id/106/100&quot; alt=&quot;Picture 3 Thumbnail&quot; class=&quot;thumbnail-3&quot;&gt;&lt;/a&gt; - &lt;/div&gt; -&lt;/div&gt; + +<h2 id="simplifying-things">Simplifying Things</h2> + +<p>My first suggestion would be to remove JavaScript altogether. We can replicate most of the required features with just HTML &#38; CSS. Let&#8217;s start with our core HTML structure:</p> + +<h3 id="html">HTML</h3> + +<pre><code>&#60;div class="gallery-wrapper"&#62; + &#60;div class="full-size"&#62; + &#60;a name="p1"&#62;&#60;img src="https:&#47;&#47;picsum.photos&#47;id&#47;100&#47;400" alt="Picture 1" class="gallery-item"&#62;&#60;&#47;a&#62; + &#60;a name="p2"&#62;&#60;img src="https:&#47;&#47;picsum.photos&#47;id&#47;101&#47;400" alt="Picture 2" class="gallery-item"&#62;&#60;&#47;a&#62; + &#60;a name="p3"&#62;&#60;img src="https:&#47;&#47;picsum.photos&#47;id&#47;106&#47;400" alt="Picture 3" class="gallery-item"&#62;&#60;&#47;a&#62; + &#60;&#47;div&#62; + &#60;div class="thumbnails"&#62; + &#60;a href="#p1"&#62;&#60;img src="https:&#47;&#47;picsum.photos&#47;id&#47;100&#47;100" alt="Picture 1 Thumbnail" class="thumbnail-1"&#62;&#60;&#47;a&#62; + &#60;a href="#p2"&#62;&#60;img src="https:&#47;&#47;picsum.photos&#47;id&#47;101&#47;100" alt="Picture 2 Thumbnail" class="thumbnail-2"&#62;&#60;&#47;a&#62; + &#60;a href="#p3"&#62;&#60;img src="https:&#47;&#47;picsum.photos&#47;id&#47;106&#47;100" alt="Picture 3 Thumbnail" class="thumbnail-3"&#62;&#60;&#47;a&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; </code></pre> + <p>Here we are placing the full-size gallery images directly inside a single <code>div.full-size</code> as - you guessed it - <code>img</code> elements. This already helps us avoid the pitfall of building out spaghetti <code>div</code> containers.</p> -<p>Below this parent container we have another element, <code>div.thumbnails</code>, which will be used for our separate, smaller thumbnail versions of our main images. The most important items to note are the associated <code>ahref</code> elements surrounding each <code>img</code> element. By setting the <code>id</code> parameter on our thumbnails to match that of the <code>name</code> on our full-sized images, we can "scroll" the proper image into view without the need for JavaScript.</p> + +<p>Below this parent container we have another element, <code>div.thumbnails</code>, which will be used for our separate, smaller thumbnail versions of our main images. The most important items to note are the associated <code>ahref</code> elements surrounding each <code>img</code> element. By setting the <code>id</code> parameter on our thumbnails to match that of the <code>name</code> on our full-sized images, we can &#8220;scroll&#8221; the proper image into view without the need for JavaScript.</p> + <p>Now for the <em>fancy</em> stuff - the CSS!</p> -<h3>CSS</h3> + +<h3 id="css">CSS</h3> + <pre><code>.gallery-wrapper { position: relative; } .gallery-wrapper:before { background: rgba(255,255,255,0.8); - content: &quot;Scroll / Swipe 🡢&quot;; + content: "Scroll &#47; Swipe 🡢"; display: block; padding: 5px; position: relative; @@ -6300,211 +8364,284 @@ done .full-size .gallery-item { scroll-snap-align: start; } -</code></pre> -<pre><code>.thumbnails img { + +.thumbnails img { cursor: pointer; margin-right: 10px; } </code></pre> -<p>Okay, so it isn't <em>that</em> fancy. It's actually very basic, which is exactly what we were going for. The images are "stacked" inline thanks to the parent container being set to <code>display: flex</code>, even though it has a set width of <code>600px</code>. The included <code>scroll-snap-type: x mandatory</code> tells the browser to allow users to scroll/swipe horizontally through the parent container.</p> + +<p>Okay, so it isn&#8217;t <em>that</em> fancy. It&#8217;s actually very basic, which is exactly what we were going for. The images are &#8220;stacked&#8221; inline thanks to the parent container being set to <code>display: flex</code>, even though it has a set width of <code>600px</code>. The included <code>scroll-snap-type: x mandatory</code> tells the browser to allow users to scroll&#47;swipe horizontally through the parent container.</p> + <p>The last important piece of this CSS is the <code>scroll-snap-align: start</code> added to the individual image elements. This parameter <em>snaps</em> the next image into the starting position of the parent container on scroll, giving a behavior users have come to expect from media galleries.</p> -<p>You will also see the included <code>:before</code> pseudo element attached to the main <code>.gallery-wrapper</code> element. This isn't <em>required</em> but it certainly helps from a UX standpoint.</p> -<h2>Live Demo</h2> -<p>Check out the embedded CodePen below to see it in action. More functionality could always be built on top of this, such as rendering all images dynamically on "build", but for a starting point I think it's great.</p> + +<p>You will also see the included <code>:before</code> pseudo element attached to the main <code>.gallery-wrapper</code> element. This isn&#8217;t <em>required</em> but it certainly helps from a UX standpoint.</p> + +<h2 id="live-demo">Live Demo</h2> + +<p>Check out the embedded CodePen below to see it in action. More functionality could always be built on top of this, such as rendering all images dynamically on &#8220;build&#8221;, but for a starting point I think it&#8217;s great.</p> + <p><a href="https://codepen.io/bradleytaunt/pen/ExLRyXz">Live CodePen Example</a></p></content> - <link href="https://bt.ht/gallery"/> - <id>https://bt.ht/gallery</id> + <link href="https://btxx.org/gallery"/> + <id>https://btxx.org/gallery</id> <updated>2022-10-03T10:00:00Z</updated> <published>2022-10-03T10:00:00Z</published> </entry> <entry> <title>Chrome OS Could Become the Future Leader of Computing</title> - <content type="html"><h1>Chrome OS Could Become the Future Leader of Computing</h1> + <content type="html"><h1 id="chrome-os-could-become-the-future-leader-of-computing">Chrome OS Could Become the Future Leader of Computing</h1> + <p>2022-01-06</p> -<p><strong>FOSS Enthusiasts</strong>: This article discusses the use of proprietary software and places it in a <em>positive</em> light. You have been warned. No angry emails please...</p> -<hr /> -<p>Google has created one of the best operating systems designed with the everyday user<sup>1</sup> in mind: <a href="https://www.google.com/chromebook/chrome-os/">Chrome OS</a>. It is undeniably simple, reliable, easy to setup, and ships with several years of support before any form of EOL kicks in. New models have built-in support for the Google Play Store and Android applications, which is helpful for application development and debugging.</p> -<p>In addition, Chrome OS devices allow you to run Linux in a separate container alongside the main OS (on supported devices). You can't complain about that!</p> -<p>Let's take a quick look at other positive features worth mentioning:</p> + +<p><strong>FOSS Enthusiasts</strong>: This article discusses the use of proprietary software and places it in a <em>positive</em> light. You have been warned. No angry emails please&#8230;</p> + +<hr/> + +<p>Google has created one of the best operating systems designed with the everyday user1 in mind: <a href="https://www.google.com/chromebook/chrome-os/">Chrome OS</a>. It is undeniably simple, reliable, easy to setup, and ships with several years of support before any form of EOL kicks in. New models have built-in support for the Google Play Store and Android applications, which is helpful for application development and debugging.</p> + +<p>In addition, Chrome OS devices allow you to run Linux in a separate container alongside the main OS (on supported devices). You can&#8217;t complain about that!</p> + +<p>Let&#8217;s take a quick look at other positive features worth mentioning:</p> + <ul> <li>Verified boot</li> <li>Sandboxed environment (similar to how Chrome tabs work)</li> <li>Automatic updates[^2]</li> <li><em>Incredible</em> battery life (were talking 10+ hours with heavy usage)</li> </ul> -<h2>My Personal Experience</h2> -<p>A handful of months ago I snagged the Lenovo Chromebook Duet when it was on sale for my wife. Since she does all her work directly through an Android phone, I thought of this as a nice companion device. And indeed it was/is.</p> -<p>In that time, I played around with the tablet myself to have a better grasp of the ecosystem and it's obvious limitations. But a funny thing happened. I found that those "limitations" slowly started to disappear the longer I worked with the device.</p> + +<h2 id="my-personal-experience">My Personal Experience</h2> + +<p>A handful of months ago I snagged the Lenovo Chromebook Duet when it was on sale for my wife. Since she does all her work directly through an Android phone, I thought of this as a nice companion device. And indeed it was&#47;is.</p> + +<p>In that time, I played around with the tablet myself to have a better grasp of the ecosystem and it&#8217;s obvious limitations. But a funny thing happened. I found that those &#8220;limitations&#8221; slowly started to disappear the longer I worked with the device.</p> + <p>I decided to get my own Chrome OS device and snagged the <a href="https://www.lenovo.com/ca/en/laptops/lenovo/student-chromebooks/Lenovo-10e-Chromebook-Tablet/p/82AM000EUS">Lenovo 10e Chromebook Tablet</a> (on sale).</p> -<p><figure> - <img src="/public/images/lenovo-tablet.png" alt="Lenovo 10e Tablet"> - <figcaption>Introducing the Lenovo 10e Chromebook tablet. This bad boy can do close to everything your current computer can do but it'll cost you $129...</figcaption> -</figure></p> + <ul> -<li>10.1" display (1920 x 1200) / 400 nits</li> +<li>10.1&#8221; display (1920 x 1200) &#47; 400 nits</li> <li>4GB of RAM</li> <li>32GB of eMMC storage</li> <li>Processor: MediaTek MT8183 Processor (2.00 GHz, 4 Cores, 1 MB Cache)</li> </ul> -<p>Now, I know that your initial reaction is likely: "Wow, those specs are pretty barebones!" and you would be correct. But it's all you need for this ecosystem to work. As cringe-inducing as it may sound, everything you plan to do on these devices should happen <em>in the cloud</em>. (Let's take a moment to avoid vomiting in our collective mouths)</p> -<p>Instead of using a few marketing buzz words, let me breakdown how I personally tailor Chrome OS to my needs as a designer / developer:</p> + +<p>Now, I know that your initial reaction is likely: &#8220;Wow, those specs are pretty barebones!&#8221; and you would be correct. But it&#8217;s all you need for this ecosystem to work. As cringe-inducing as it may sound, everything you plan to do on these devices should happen <em>in the cloud</em>. (Let&#8217;s take a moment to avoid vomiting in our collective mouths)</p> + +<p>Instead of using a few marketing buzz words, let me breakdown how I personally tailor Chrome OS to my needs as a designer &#47; developer:</p> + <ol> <li><a href="#daily-tasks">Daily Tasks</a></li> <li><a href="#programming">Programming</a></li> <li><a href="#design">Design</a></li> <li><a href="#gaming">Gaming</a></li> </ol> -<h2>Daily Tasks</h2> -<p>I feel like going into <em>great</em> detail explaining how to do basic, daily computing tasks is a little overkill here. Spreadsheets, word documents, Zoom meetings, and streaming media work as expected. You have the ability to use Google's own web apps for these things or reach for other vendors such as Microsoft and Libre Office. Not being "locked in" to Google software is nice and I appreciate the Chrome OS team being flexible.</p> -<h2>Programming</h2> -<p>This one is a mixed bag and your own mileage may vary depending on your specific requirements. Personally, I use Github for almost all my main development work. Because of this, I utilize <a href="https://github.com/features/codespaces">Codespaces</a>. For those unfamiliar with the service, you are running your Github repo in VSCode through the browser. It's pretty impressive.</p> -<p>If you happen to be a user who uses GitLab or BitBucket to store your project files, <a href="https://www.gitpod.io/">Gitpod</a> is a similar product to Codespaces (which I've used on occasion). This works if your prefer.</p> -<p>Others may not like this programming setup but for me it works great. If running code remotely isn't your jam, you could always take a look at running <a href="https://vscodium.com/">VSCodium</a> locally via Linux.</p> -<h2>Design</h2> + +<h2 id="daily-tasks">Daily Tasks</h2> + +<p>I feel like going into <em>great</em> detail explaining how to do basic, daily computing tasks is a little overkill here. Spreadsheets, word documents, Zoom meetings, and streaming media work as expected. You have the ability to use Google&#8217;s own web apps for these things or reach for other vendors such as Microsoft and Libre Office. Not being &#8220;locked in&#8221; to Google software is nice and I appreciate the Chrome OS team being flexible.</p> + +<h2 id="programming">Programming</h2> + +<p>This one is a mixed bag and your own mileage may vary depending on your specific requirements. Personally, I use Github for almost all my main development work. Because of this, I utilize <a href="https://github.com/features/codespaces">Codespaces</a>. For those unfamiliar with the service, you are running your Github repo in VSCode through the browser. It&#8217;s pretty impressive.</p> + +<p>If you happen to be a user who uses GitLab or BitBucket to store your project files, <a href="https://www.gitpod.io/">Gitpod</a> is a similar product to Codespaces (which I&#8217;ve used on occasion). This works if your prefer.</p> + +<p>Others may not like this programming setup but for me it works great. If running code remotely isn&#8217;t your jam, you could always take a look at running <a href="https://vscodium.com/">VSCodium</a> locally via Linux.</p> + +<h2 id="design">Design</h2> + <p>There is flexibility yet again in this category. Personally, I tend to use Figma almost exclusively as my main design tool. The best thing about Figma? It runs directly in the browser. A perfect fit for Chromebooks[^3].</p> -<p>I do open Gimp periodically for photo-specific work. It runs in its own Linux container and chugs along smoothly, even with 4GB of available memory. If all else fails, one could use <a href="https://www.photopea.com/">Photopea</a> to keep everything working through the browser (if Linux isn't your cup of tea).</p> -<p>Those of you in love with MacOS specific apps like Sketch - I can't help you. You're stuck with Apple's ecosystem. (Not that there is anything wrong with Sketch!)</p> -<h2>Gaming</h2> -<p>There are other options (that we will get into) but the main gaming champion here is <strong>Stadia</strong>[^4]. As long as your internet speeds are over 10mbps, mind you. I use garbage satellite internet (counting down the days for Starlink to become available here...) with an average speed of 18-20mbps and Stadia runs like a dream. Even <em>wirelessly</em>. Now pair this with the portability of a Chromebook device and you've got yourself a beefier Nintendo Switch.</p> -<p>You have solid secondary options like <a href="https://play.geforcenow.com/mall/#/layout/games">GeForce Now</a> and <a href="https://www.xbox.com/en-CA/xbox-game-pass/cloud-gaming">Microsoft's xCloud (beta)</a> for an even larger catalogue of games. Not to mention the ability to play a lot of Android games natively on Chromebooks that support Play Store applications.</p> -<h2>Eye Rolling &amp; Scoffing</h2> -<p>I can hear the screeching across the interwebs: "<em>Wait - this is Google! They are literally Satan in disguise! No one can use products from that evil mega corporation!</em>". And while I agree with the sentiment, I think going down this pure, 100% elitist approach to software <em>doesn't work</em> with the everyday casual user. Not to mention the large swath of developers/designers screaming "Google is bad!" while working off an <em>Apple</em> device...</p> + +<p>I do open Gimp periodically for photo-specific work. It runs in its own Linux container and chugs along smoothly, even with 4GB of available memory. If all else fails, one could use <a href="https://www.photopea.com/">Photopea</a> to keep everything working through the browser (if Linux isn&#8217;t your cup of tea).</p> + +<p>Those of you in love with MacOS specific apps like Sketch - I can&#8217;t help you. You&#8217;re stuck with Apple&#8217;s ecosystem. (Not that there is anything wrong with Sketch!)</p> + +<h2 id="gaming">Gaming</h2> + +<p>There are other options (that we will get into) but the main gaming champion here is <strong>Stadia</strong>[^4]. As long as your internet speeds are over 10mbps, mind you. I use garbage satellite internet (counting down the days for Starlink to become available here&#8230;) with an average speed of 18-20mbps and Stadia runs like a dream. Even <em>wirelessly</em>. Now pair this with the portability of a Chromebook device and you&#8217;ve got yourself a beefier Nintendo Switch.</p> + +<p>You have solid secondary options like <a href="https://play.geforcenow.com/mall/#/layout/games">GeForce Now</a> and <a href="https://www.xbox.com/en-CA/xbox-game-pass/cloud-gaming">Microsoft&#8217;s xCloud (beta)</a> for an even larger catalogue of games. Not to mention the ability to play a lot of Android games natively on Chromebooks that support Play Store applications.</p> + +<h2 id="eye-rolling-scoffing">Eye Rolling &#38; Scoffing</h2> + +<p>I can hear the screeching across the interwebs: &#8220;<em>Wait - this is Google! They are literally Satan in disguise! No one can use products from that evil mega corporation!</em>&#8221;. And while I agree with the sentiment, I think going down this pure, 100% elitist approach to software <em>doesn&#8217;t work</em> with the everyday casual user. Not to mention the large swath of developers&#47;designers screaming &#8220;Google is bad!&#8221; while working off an <em>Apple</em> device&#8230;</p> + <p>Hell even I, a vocal advocate for open source software and privacy, can see the great benefits to using Chrome OS as a daily driver. </p> -<p>Testing out Chrome OS with your non-technical friends and family could help reduce a lot of headaches found in more "popular" systems. That doesn't mean advanced users have to switch over. Use what works the best for you. For my immediate family members and social circles, I have nothing but positive things to say about Chrome OS.</p> + +<p>Testing out Chrome OS with your non-technical friends and family could help reduce a lot of headaches found in more &#8220;popular&#8221; systems. That doesn&#8217;t mean advanced users have to switch over. Use what works the best for you. For my immediate family members and social circles, I have nothing but positive things to say about Chrome OS.</p> + <p>I have no crystal ball to see what the future of Chrome OS holds but it looks pretty promising to me.</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>"Users" referring to those mainly using their devices for word documents, spread sheets, media consumption, programming, messaging, minor interactivity (no heavy video or production editing)</li> -<li>These updates go unnoticed, compared to that of MacOS or Windows...</li> +<li>&#8220;Users&#8221; referring to those mainly using their devices for word documents, spread sheets, media consumption, programming, messaging, minor interactivity (no heavy video or production editing)</li> +<li>These updates go unnoticed, compared to that of MacOS or Windows&#8230;</li> <li>Your mileage may vary depending on how much RAM you have on your device</li> -<li>Although, Stadia's current game selection leaves a lot to be desired</li> +<li>Although, Stadia&#8217;s current game selection leaves a lot to be desired</li> </ol></content> - <link href="https://bt.ht/future-os-google"/> - <id>https://bt.ht/future-os-google</id> + <link href="https://btxx.org/future-os-google"/> + <id>https://btxx.org/future-os-google</id> <updated>2022-01-06T10:00:00Z</updated> <published>2022-01-06T10:00:00Z</published> </entry> <entry> <title>Prescription Form UI Improvements</title> - <content type="html"><h1>Prescription Form UI Improvements</h1> + <content type="html"><h1 id="prescription-form-ui-improvements">Prescription Form UI Improvements</h1> + <p>2019-03-13</p> -<p>I was browsing the <a href="https://www.clearly.ca">Clearly</a> website a few days ago and ended up using their prescription form to update my worsening eyesight. The design of this form wasn't <em>bad</em> per se, but it could certainly be improved.</p> -<h2>Current design of the prescription view</h2> + +<p>I was browsing the Clearly website a few days ago and ended up using their prescription form to update my worsening eyesight. The design of this form wasn&#8217;t <em>bad</em> per se, but it could certainly be improved.</p> + +<h2 id="current-design-of-the-prescription-view">Current design of the prescription view</h2> + <p><img src="/public/images/prescription-ui.webp" alt="Default prescription UI" /></p> -<p>As I stated, this design isn't horrible by any means, but right away we can notice some problems:</p> + +<p>As I stated, this design isn&#8217;t horrible by any means, but right away we can notice some problems:</p> + <ul> -<li>the layout causes the users' eyes to jump between left-to-right and top-to-bottom without good correlation</li> +<li>the layout causes the users&#8217; eyes to jump between left-to-right and top-to-bottom without good correlation</li> <li>title content and <code>next</code> buttons are centered, while dropdowns are presented as left-to-right</li> <li>anchor link coloring is inconsistent</li> <li>too much whitespace between interactive sections</li> <li>dropdown height overly large</li> </ul> -<h2>Starting to make some changes</h2> -<p>Let's tackle these problems one at a time. First, we want a more defined page layout so the user can scan through the content more easily (left-to-right, down to the next line, then repeat).</p> + +<h2 id="starting-to-make-some-changes">Starting to make some changes</h2> + +<p>Let&#8217;s tackle these problems one at a time. First, we want a more defined page layout so the user can scan through the content more easily (left-to-right, down to the next line, then repeat).</p> + <p><img src="/public/images/prescription-ui-update-1.webp" alt="Layout wireframe UI" /></p> -<p>We have now left-aligned the title content to be flush with the OD/OS elements below it to help keep the reading flow consistent. </p> -<p>The previous layout also had the <code>PD</code> in-line with the OD/OS element rows which created a problem of resetting the user thought-process. Since it requires the user to jump from the "right eye" option to the "PD" option, then back to "left eye" option it breaks the flow of user "tasks". The new UI shifts the <code>PD</code> down into it's own row, grouping the unrelated tasks on the page separately.</p> -<blockquote><p>You'll also notice that I've updated the dropdowns to use a <code>monospace</code> font to convey that these options are number inputs.</p> + +<p>We have now left-aligned the title content to be flush with the OD&#47;OS elements below it to help keep the reading flow consistent. </p> + +<p>The previous layout also had the <code>PD</code> in-line with the OD&#47;OS element rows which created a problem of resetting the user thought-process. Since it requires the user to jump from the &#8220;right eye&#8221; option to the &#8220;PD&#8221; option, then back to &#8220;left eye&#8221; option it breaks the flow of user &#8220;tasks&#8221;. The new UI shifts the <code>PD</code> down into it&#8217;s own row, grouping the unrelated tasks on the page separately.</p> + +<blockquote> +<p>You&#8217;ll also notice that I&#8217;ve updated the dropdowns to use a monospace font to convey that these options are number inputs.</p> </blockquote> + <p>Finally we place the button actions in-line with the <code>PD</code> block since it previously ate up far more real estate than was necessary.</p> -<h2>Adding some color</h2> -<p>The original design has some inconsistencies with the link coloring - some being a muted grey while others use the accented blue. Updating all interactive links to use Clearly's default blue accent color would make for a better disconnect from non-interactive elements.</p> + +<h2 id="adding-some-color">Adding some color</h2> + +<p>The original design has some inconsistencies with the link coloring - some being a muted grey while others use the accented blue. Updating all interactive links to use Clearly&#8217;s default blue accent color would make for a better disconnect from non-interactive elements.</p> + <p><img src="/public/images/prescription-ui-update-2.webp" alt="Layout UI with color" /></p> -<h2>Finishing touches</h2> + +<h2 id="finishing-touches">Finishing touches</h2> + <p>Now that the most important aspects of the refreshed UI are complete (layout, UX flow), we can implement all the visual extras to cleanup our basic wireframe.</p> + <ul> <li>make default select styling include depth and importance (this is the main action of the page afterall)</li> <li>round out harsh corner edges on elements</li> <li>set labels and row items with more pleasing backgrounds (while still maintaining contrast)</li> <li>give the <code>next</code> button visual importance (make it look like a real button)</li> </ul> + <p><img src="/public/images/prescription-ui-update-final.webp" alt="Layout UI with color" /></p> -<p>That's it!</p></content> - <link href="https://bt.ht/form-ui-improvements"/> - <id>https://bt.ht/form-ui-improvements</id> + +<p>That&#8217;s it!</p></content> + <link href="https://btxx.org/form-ui-improvements"/> + <id>https://btxx.org/form-ui-improvements</id> <updated>2019-03-13T10:00:00Z</updated> <published>2019-03-13T10:00:00Z</published> </entry> <entry> <title>Adaptable Flexbox Grid</title> - <content type="html"><h1>Adaptable Flexbox Grid</h1> + <content type="html"><h1 id="adaptable-flexbox-grid">Adaptable Flexbox Grid</h1> + <p>2018-11-22</p> -<p>You can use <code>flexbox</code> for many tricky layout "hacks" and implementing a grid layout is no different.</p> + +<p>You can use <code>flexbox</code> for many tricky layout &#8220;hacks&#8221; and implementing a grid layout is no different.</p> + <p>Check out the CodePen below to see how you can implement a flexbox grid system that adapts automatically based on how many items you insert per row (maximum 6 children in this example).</p> + <p><a href="https://codepen.io/bradleytaunt/pen/rQdLxv/">Live CodePen Example</a></p></content> - <link href="https://bt.ht/flexbox-grid"/> - <id>https://bt.ht/flexbox-grid</id> + <link href="https://btxx.org/flexbox-grid"/> + <id>https://btxx.org/flexbox-grid</id> <updated>2018-11-22T10:00:00Z</updated> <published>2018-11-22T10:00:00Z</published> </entry> <entry> <title>Pure CSS Bar Graphs with Graceful Mobile Fallbacks</title> - <content type="html"><h1>Pure CSS Bar Graphs with Graceful Mobile Fallbacks</h1> + <content type="html"><h1 id="pure-css-bar-graphs-with-graceful-mobile-fallbacks">Pure CSS Bar Graphs with Graceful Mobile Fallbacks</h1> + <p>2020-12-08</p> -<p>I recently published a new open source project, <a target="_blank" href="https://flexbox-bar-graphs.netlify.app/">Flexbox Bar Graphs</a>, and wanted to share a simple breakdown of how it was built. It isn't anything mind-blowing, but I like the idea of placing bar graphs in a web page with <em>zero</em> Javascript.</p> + +<p>I recently published a new open source project, Flexbox Bar Graphs, and wanted to share a simple breakdown of how it was built. It isn&#8217;t anything mind-blowing, but I like the idea of placing bar graphs in a web page with <em>zero</em> Javascript.</p> + <p>So in the end, this is what our bar graphs will look like on desktop:</p> -<p><figure> - <img src="/public/images/flexbox-bar-graph-1.webp" alt="Flexbox Bar Graph"> - <figcaption>The flexbox bar graph in desktop view (<a href="/public/images/flexbox-bar-graph-1.webp">direct link to image</a>)</figcaption> -</figure></p> + <p>And this is how it will look on smaller devices:</p> -<p><figure> - <img src="/public/images/flexbox-bar-graph-2.webp" alt="Flexbox Bar Graph Table"> - <figcaption>The flexbox bar graph on mobile devices (<a href="/public/images/flexbox-bar-graph-2.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>Let's get into the details!</p> -<h2>The HTML</h2> -<p>The main "secret" of this project is that our graphs are constructed out of HTML <em>tables</em>. Now before you freak out - this is perfectly fine and works in our favor quite well.</p> + +<p>Let&#8217;s get into the details!</p> + +<h2 id="the-html">The HTML</h2> + +<p>The main &#8220;secret&#8221; of this project is that our graphs are constructed out of HTML <em>tables</em>. Now before you freak out - this is perfectly fine and works in our favor quite well.</p> + <ol> -<li>If the user has JS disabled --&gt; they will still see our graphs</li> -<li>If the user has CSS disabled --&gt; they will see a standard data table set</li> +<li>If the user has JS disabled &#8211;&#62; they will still see our graphs</li> +<li>If the user has CSS disabled &#8211;&#62; they will see a standard data table set</li> </ol> + <p>All bases are covered!</p> -<pre><code>&lt;!-- Using a basic table with our custom data-id --&gt; -&lt;table data-id=&quot;flexbox-bar-graph&quot;&gt; - &lt;caption&gt;Web Performance Results&lt;/caption&gt; - &lt;thead&gt; - &lt;tr&gt; - &lt;th&gt;Test Performed&lt;/th&gt; - &lt;th&gt;Before&lt;/th&gt; - &lt;th&gt;After&lt;/th&gt; - &lt;th&gt;Difference&lt;/th&gt; - &lt;/tr&gt; - &lt;/thead&gt; - &lt;tbody&gt; - &lt;tr&gt; - &lt;th&gt;Initial Load Time&lt;/th&gt; - &lt;td&gt; - &lt;!-- + +<pre><code>&#60;!-- Using a basic table with our custom data-id --&#62; +&#60;table data-id="flexbox-bar-graph"&#62; + &#60;caption&#62;Web Performance Results&#60;&#47;caption&#62; + &#60;thead&#62; + &#60;tr&#62; + &#60;th&#62;Test Performed&#60;&#47;th&#62; + &#60;th&#62;Before&#60;&#47;th&#62; + &#60;th&#62;After&#60;&#47;th&#62; + &#60;th&#62;Difference&#60;&#47;th&#62; + &#60;&#47;tr&#62; + &#60;&#47;thead&#62; + &#60;tbody&#62; + &#60;tr&#62; + &#60;th&#62;Initial Load Time&#60;&#47;th&#62; + &#60;td&#62; + &#60;!-- WTF are these CSS variables? See the CSS section below - --&gt; - &lt;span style=&quot;--data-set:4.7/5;&quot;&gt;&lt;/span&gt; - &lt;p&gt;4.7&lt;/p&gt; - &lt;/td&gt; - &lt;td&gt; - &lt;span style=&quot;--data-set:2.7/5;&quot;&gt;&lt;/span&gt; - &lt;p&gt;2.7&lt;/p&gt; - &lt;/td&gt; - &lt;td&gt; - &lt;span style=&quot;--data-set:2/5;&quot;&gt;&lt;/span&gt; - &lt;p&gt;2&lt;/p&gt; - &lt;/td&gt; - &lt;/tr&gt; - &lt;/tbody&gt; -&lt;/table&gt; + --&#62; + &#60;span style="--data-set:4.7&#47;5;"&#62;&#60;&#47;span&#62; + &#60;p&#62;4.7&#60;&#47;p&#62; + &#60;&#47;td&#62; + &#60;td&#62; + &#60;span style="--data-set:2.7&#47;5;"&#62;&#60;&#47;span&#62; + &#60;p&#62;2.7&#60;&#47;p&#62; + &#60;&#47;td&#62; + &#60;td&#62; + &#60;span style="--data-set:2&#47;5;"&#62;&#60;&#47;span&#62; + &#60;p&#62;2&#60;&#47;p&#62; + &#60;&#47;td&#62; + &#60;&#47;tr&#62; + &#60;&#47;tbody&#62; +&#60;&#47;table&#62; </code></pre> + <p>Nothing crazy is happening here - just your standard HTML table structure. The one main thing to notice is the <code>--data-set</code> CSS variable placed inline on each data point. This will be important for our CSS to configure the individual bar graphs properly.</p> -<h2>The CSS</h2> -<p>This might look overwhelming if I just dumped the whole CSS file in one big code block, so instead I'm going to break them down into two parts:</p> + +<h2 id="the-css">The CSS</h2> + +<p>This might look overwhelming if I just dumped the whole CSS file in one big code block, so instead I&#8217;m going to break them down into two parts:</p> + <ol> <li>Baseline styling (mobile)</li> <li>Desktop styling</li> </ol> -<h3>Baseline</h3> + +<h3 id="baseline">Baseline</h3> + <p>Here we target just our table elements with the <code>data-id</code> of <code>flexbox-bar-graph</code>. This allows us to avoid worrying about adding classes or IDs and also avoids conflicts with other non-graph styled tables in our projects.</p> + <p>The base <code>:root</code> element holds all of our bar graph colors. Change these as you see fit!</p> -<pre><code>/* Bar Graph color variables */ + +<pre><code>&#47;* Bar Graph color variables *&#47; :root { --bar-color-1: #357EC7; --bar-color-2: #E42217; @@ -6512,275 +8649,312 @@ done --bar-color-4: #7D0541; --bar-color-5: #FFD801; } -</code></pre> -<pre><code>[data-id=&quot;flexbox-bar-graph&quot;] { + +[data-id="flexbox-bar-graph"] { border-collapse: collapse; margin: 4rem 0 6rem; width: 100%; } -[data-id=&quot;flexbox-bar-graph&quot;] caption { +[data-id="flexbox-bar-graph"] caption { text-align: left; } -[data-id=&quot;flexbox-bar-graph&quot;] thead th { +[data-id="flexbox-bar-graph"] thead th { text-align: right; } -[data-id=&quot;flexbox-bar-graph&quot;] thead th:nth-child(1), -[data-id=&quot;flexbox-bar-graph&quot;] tbody th { +[data-id="flexbox-bar-graph"] thead th:nth-child(1), +[data-id="flexbox-bar-graph"] tbody th { text-align: left; } -[data-id=&quot;flexbox-bar-graph&quot;] tbody th { +[data-id="flexbox-bar-graph"] tbody th { font-weight: normal; font-style: italic; } -[data-id=&quot;flexbox-bar-graph&quot;] tbody td { +[data-id="flexbox-bar-graph"] tbody td { text-align: right; } -[data-id=&quot;flexbox-bar-graph&quot;] tbody td p { +[data-id="flexbox-bar-graph"] tbody td p { margin: 0; } </code></pre> -<h3>Desktop</h3> -<p>Now we set your "visual" bar graphs to show at a set width (in this example it is 1000px and above). That way the "default" styling can target the mobile device screen sizes.</p> + +<h3 id="desktop">Desktop</h3> + +<p>Now we set your &#8220;visual&#8221; bar graphs to show at a set width (in this example it is 1000px and above). That way the &#8220;default&#8221; styling can target the mobile device screen sizes.</p> + <ul> -<li>The <code>thead tr th:nth-child(x):before</code> elements create the square "legends" beside each individual data point heading</li> -<li>The <code>tbody tr td:nth-of-type(x) span</code> elements are the bars themselves</li> -</ul> -<pre><code>@media(min-width: 1000px) { - [data-id=&quot;flexbox-bar-graph&quot;] { +<li><p>The <code>thead tr th:nth-child(x):before</code> elements create the square &#8220;legends&#8221; beside each individual data point heading</p></li> +<li><p>The <code>tbody tr td:nth-of-type(x) span</code> elements are the bars themselves</p> + +<p>@media(min-width: 1000px) { + [data-id="flexbox-bar-graph&#8221;] { background: transparent; display: block; min-height: 400px; padding: 0; position: relative; width: 100%; - } + }</p> - [data-id=&quot;flexbox-bar-graph&quot;] caption { - display: block; - font-size: 2rem; - text-align: center; - width: 100%; - } +<pre><code>[data-id="flexbox-bar-graph"] caption { + display: block; + font-size: 2rem; + text-align: center; + width: 100%; +} - [data-id=&quot;flexbox-bar-graph&quot;] thead { - display: block; - margin: 2rem 0 3rem; - width: 100%; - } - [data-id=&quot;flexbox-bar-graph&quot;] thead tr { - border-bottom: 1px solid lightgrey; - display: flex; - justify-content: center; - padding-bottom: 1rem; - } +[data-id="flexbox-bar-graph"] thead { + display: block; + margin: 2rem 0 3rem; + width: 100%; +} +[data-id="flexbox-bar-graph"] thead tr { + border-bottom: 1px solid lightgrey; + display: flex; + justify-content: center; + padding-bottom: 1rem; +} - [data-id=&quot;flexbox-bar-graph&quot;] thead tr th { - display: inline-block; - margin: 0; - padding: 0; - position: relative; - text-align: right; - } - [data-id=&quot;flexbox-bar-graph&quot;] thead tr th:before { - content:''; - display: inline-block; - height: 10px; - margin: 0 0.5rem 0 2rem; - position: relative; - width: 10px; - } - [data-id=&quot;flexbox-bar-graph&quot;] thead tr th:nth-child(1), - [data-id=&quot;flexbox-bar-graph&quot;] thead tr th:nth-child(1):before { - display: none; - } - [data-id=&quot;flexbox-bar-graph&quot;] thead tr th:nth-child(2):before { - background: var(--bar-color-1); - } - [data-id=&quot;flexbox-bar-graph&quot;] thead tr th:nth-child(3):before { - background: var(--bar-color-2); - } - [data-id=&quot;flexbox-bar-graph&quot;] thead tr th:nth-child(4):before { - background: var(--bar-color-3); - } - [data-id=&quot;flexbox-bar-graph&quot;] thead tr th:nth-child(5):before { - background: var(--bar-color-4); - } - [data-id=&quot;flexbox-bar-graph&quot;] thead tr th:nth-child(6):before { - background: var(--bar-color-5); - } +[data-id="flexbox-bar-graph"] thead tr th { + display: inline-block; + margin: 0; + padding: 0; + position: relative; + text-align: right; +} +[data-id="flexbox-bar-graph"] thead tr th:before { + content:&#39;&#39;; + display: inline-block; + height: 10px; + margin: 0 0.5rem 0 2rem; + position: relative; + width: 10px; +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(1), +[data-id="flexbox-bar-graph"] thead tr th:nth-child(1):before { + display: none; +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(2):before { + background: var(--bar-color-1); +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(3):before { + background: var(--bar-color-2); +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(4):before { + background: var(--bar-color-3); +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(5):before { + background: var(--bar-color-4); +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(6):before { + background: var(--bar-color-5); +} - [data-id=&quot;flexbox-bar-graph&quot;] tbody { - display: flex; - justify-content: space-between; - min-height: 300px; - width: 100%; - } +[data-id="flexbox-bar-graph"] tbody { + display: flex; + justify-content: space-between; + min-height: 300px; + width: 100%; +} - [data-id=&quot;flexbox-bar-graph&quot;] tbody tr { - display: flex; - flex-direction: column-reverse; - flex-wrap: wrap; - justify-content: flex-end; - padding: 0 50px; - position: relative; - width: 100%; - } - [data-id=&quot;flexbox-bar-graph&quot;] tbody tr th { - font-size: 90%; - position: absolute; - text-align: center; - top: 100%; - width: calc(100% - 100px); - } - [data-id=&quot;flexbox-bar-graph&quot;] tbody tr td { - align-items: center; - display: flex; - flex-direction: column; - height: 95%; - justify-content: flex-end; - } +[data-id="flexbox-bar-graph"] tbody tr { + display: flex; + flex-direction: column-reverse; + flex-wrap: wrap; + justify-content: flex-end; + padding: 0 50px; + position: relative; + width: 100%; +} +[data-id="flexbox-bar-graph"] tbody tr th { + font-size: 90%; + position: absolute; + text-align: center; + top: 100%; + width: calc(100% - 100px); +} +[data-id="flexbox-bar-graph"] tbody tr td { + align-items: center; + display: flex; + flex-direction: column; + height: 95%; + justify-content: flex-end; +} - [data-id=&quot;flexbox-bar-graph&quot;] tbody tr td span { - display: block; - height: calc(var(--data-set) * 100%); - width: 20px; - } - [data-id=&quot;flexbox-bar-graph&quot;] tbody tr td:nth-of-type(1) span { - background: var(--bar-color-1); - } - [data-id=&quot;flexbox-bar-graph&quot;] tbody tr td:nth-of-type(2) span { - background: var(--bar-color-2); - } - [data-id=&quot;flexbox-bar-graph&quot;] tbody tr td:nth-of-type(3) span { - background: var(--bar-color-3); - } - [data-id=&quot;flexbox-bar-graph&quot;] tbody tr td:nth-of-type(4) span { - background: var(--bar-color-4); - } - [data-id=&quot;flexbox-bar-graph&quot;] tbody tr td:nth-of-type(5) span { - background: var(--bar-color-5); - } +[data-id="flexbox-bar-graph"] tbody tr td span { + display: block; + height: calc(var(--data-set) * 100%); + width: 20px; +} +[data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(1) span { + background: var(--bar-color-1); +} +[data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(2) span { + background: var(--bar-color-2); +} +[data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(3) span { + background: var(--bar-color-3); +} +[data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(4) span { + background: var(--bar-color-4); +} +[data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(5) span { + background: var(--bar-color-5); +} - [data-id=&quot;flexbox-bar-graph&quot;] tbody tr td p { - font-size: 90%; - margin: 0; - text-align: center; - } +[data-id="flexbox-bar-graph"] tbody tr td p { + font-size: 90%; + margin: 0; + text-align: center; } </code></pre> -<h2>Bonus Styling</h2> -<p>In the <a target="_blank" href="https://github.com/bradleytaunt/flexbox-bar-graphs">Flexbox Bar Graph</a> repo, I've also included the ability to display these bar graphs horizontally, like so:</p> -<p><figure> - <img src="/public/images/flexbox-bar-graph-3.webp" alt="Flexbox Bar Graph Horizontal"> - <figcaption>The flexbox bar graph in the horizontal layout (<a href="/public/images/flexbox-bar-graph-3.webp">direct link to image</a>)</figcaption> -</figure></p> + +<p>}</p></li> +</ul> + +<h2 id="bonus-styling">Bonus Styling</h2> + +<p>In the Flexbox Bar Graph repo, I&#8217;ve also included the ability to display these bar graphs horizontally, like so:</p> + <p>The change in CSS is actually quite simple to pull this off - you just need to include the <code>data-layout</code> attribute on the table itself.</p> -<pre><code>[data-layout=&quot;horizontal&quot;] tbody { + +<pre><code>[data-layout="horizontal"] tbody { min-height: auto; } -[data-layout=&quot;horizontal&quot;] tbody tr { +[data-layout="horizontal"] tbody tr { flex-direction: column; padding: 0 40px; } -[data-layout=&quot;horizontal&quot;] tbody tr th { +[data-layout="horizontal"] tbody tr th { width: calc(100% - 80px); } -[data-layout=&quot;horizontal&quot;] tbody tr th { +[data-layout="horizontal"] tbody tr th { text-align: left; top: calc(100% + 20px); } -[data-layout=&quot;horizontal&quot;] tbody tr td { +[data-layout="horizontal"] tbody tr td { flex-direction: row; height: auto; justify-content: start; margin: 10px 0; } -[data-layout=&quot;horizontal&quot;] tbody tr td span { +[data-layout="horizontal"] tbody tr td span { height: 20px; width: calc(var(--data-set) * 100%); } -[data-layout=&quot;horizontal&quot;] tbody tr td p { +[data-layout="horizontal"] tbody tr td p { margin-left: 10px; } </code></pre> -<h2>That's All Folks!</h2> + +<h2 id="thats-all-folks">That&#8217;s All Folks!</h2> + <p>That just about sums things up. Feel free to check out the Github repo itself, open any issues you find or fork it for your own!</p> + <ul> -<li>Github: <a href="https://github.com/bradleytaunt/flexbox-bar-graphs">https://github.com/bradleytaunt/flexbox-bar-graphs</a></li> -<li>Live Demo: <a href="https://flexbox-bar-graphs.netlify.app/">https://flexbox-bar-graphs.netlify.app/</a></li> +<li>Github: <a href="https://github.com/bradleytaunt/flexbox-bar-graphs">https:&#47;&#47;github.com&#47;bradleytaunt&#47;flexbox-bar-graphs</a></li> +<li>Live Demo: <a href="https://flexbox-bar-graphs.netlify.app/">https:&#47;&#47;flexbox-bar-graphs.netlify.app&#47;</a></li> </ul></content> - <link href="https://bt.ht/flexbox-bar-graphs"/> - <id>https://bt.ht/flexbox-bar-graphs</id> + <link href="https://btxx.org/flexbox-bar-graphs"/> + <id>https://btxx.org/flexbox-bar-graphs</id> <updated>2020-12-08T10:00:00Z</updated> <published>2020-12-08T10:00:00Z</published> </entry> <entry> <title>First Letter Pseudo Element</title> - <content type="html"><h1>First Letter Pseudo Element</h1> + <content type="html"><h1 id="first-letter-pseudo-element">First Letter Pseudo Element</h1> + <p>2019-05-03</p> -<p>In today's TypeTip we will be taking a look at the often overlooked <code>:first-letter</code> CSS pseudo element. Though you might only use this for specific article-format web pages, it's still a nice-to-have in your web dev toolset.</p> -<h2>The HTML</h2> + +<p>In today&#8217;s TypeTip we will be taking a look at the often overlooked <code>:first-letter</code> CSS pseudo element. Though you might only use this for specific article-format web pages, it&#8217;s still a nice-to-have in your web dev toolset.</p> + +<h2 id="the-html">The HTML</h2> + <p>Like most pseudo elements, nothing has to change with your pre-existing HTML structure:</p> -<pre><code>&lt;article&gt; - &lt;p&gt;It was a bright cold day in April, and the clocks were striking thirteen.&lt;/p&gt; -&lt;/article&gt; + +<pre><code>&#60;article&#62; + &#60;p&#62;It was a bright cold day in April, and the clocks were striking thirteen.&#60;&#47;p&#62; +&#60;&#47;article&#62; </code></pre> -<h2>The CSS</h2> -<p>Here's where the magic happens:</p> + +<h2 id="the-css">The CSS</h2> + +<p>Here&#8217;s where the magic happens:</p> + <pre><code>p:first-letter { color: orangered; font-size: 250%; } </code></pre> -<h2>Live CodePen</h2> + +<h2 id="live-codepen">Live CodePen</h2> + <p><a href="https://codepen.io/bradleytaunt/pen/gJYbev/">Live CodePen Example</a></p></content> - <link href="https://bt.ht/first-letter"/> - <id>https://bt.ht/first-letter</id> + <link href="https://btxx.org/first-letter"/> + <id>https://btxx.org/first-letter</id> <updated>2019-05-03T10:00:00Z</updated> <published>2019-05-03T10:00:00Z</published> </entry> <entry> <title>February 2022 Update</title> - <content type="html"><h1>February 2022 Update</h1> + <content type="html"><h1 id="february-2022-update">February 2022 Update</h1> + <p>2022-02-23</p> -<p>It's been a little quiet around here lately and for good reason: my wife gave birth to our third child last Thursday. Her name is Harmony and she was born in the late afternoon weighing in at 7 pounds 8 ounces.</p> + +<p>It&#8217;s been a little quiet around here lately and for good reason: my wife gave birth to our third child last Thursday. Her name is Harmony and she was born in the late afternoon weighing in at 7 pounds 8 ounces.</p> + <p>Besides the lack of sleep, everything has been going very well and our boys are happy to finally have their sister “out” in the real world. She caught a small cold at the beginning but soldiered through it well.</p> -<p>As for personal life / work life, I've taken a couple weeks off until Harmony is in a bit more of a routine to make transitioning back to full time easier. I still have a few articles in the works (like setting up a T60 Thinkpad with Linux Mint and using FreeBSD for the first time on an EOL Chromebook) but those will come in time.</p> -<p>I guess I should get back to being a proper dad (I'm writing this on my phone as she sleeps on me and the boys are napping) but I'll be back here posting stupid things in no time.</p> + +<p>As for personal life &#47; work life, I&#8217;ve taken a couple weeks off until Harmony is in a bit more of a routine to make transitioning back to full time easier. I still have a few articles in the works (like setting up a T60 Thinkpad with Linux Mint and using FreeBSD for the first time on an EOL Chromebook) but those will come in time.</p> + +<p>I guess I should get back to being a proper dad (I&#8217;m writing this on my phone as she sleeps on me and the boys are napping) but I&#8217;ll be back here posting stupid things in no time.</p> + <p>See you on the other side!</p></content> - <link href="https://bt.ht/february-updates"/> - <id>https://bt.ht/february-updates</id> + <link href="https://btxx.org/february-updates"/> + <id>https://btxx.org/february-updates</id> <updated>2022-02-23T10:00:00Z</updated> <published>2022-02-23T10:00:00Z</published> </entry> <entry> <title>Setting Up Fathom Analytics with Netlify</title> - <content type="html"><h1>Setting Up Fathom Analytics with Netlify</h1> + <content type="html"><h1 id="setting-up-fathom-analytics-with-netlify">Setting Up Fathom Analytics with Netlify</h1> + <p>2021-01-19</p> -<p>It's no secret that I'm passionate about open source software, but I'm also extremely adamant about protecting the privacy of all users across the web. So when I decided to implement analytics on my own personal website, I ended up choosing <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> (<em>get a $10 credit using that link!</em>).</p> -<p>You should research further into the company yourself if you're interested, but in a nutshell the Fathom platform provides:</p> + +<p>It&#8217;s no secret that I&#8217;m passionate about open source software, but I&#8217;m also extremely adamant about protecting the privacy of all users across the web. So when I decided to implement analytics on my own personal website, I ended up choosing Fathom (<em>get a $10 credit using that link!</em>).</p> + +<p>You should research further into the company yourself if you&#8217;re interested, but in a nutshell the Fathom platform provides:</p> + <ul> <li>GDPR, ePrivacy, PECR and CCPA compliance</li> -<li>ad-blocker bypasses (in a good way -&gt; zero impact on users)</li> +<li>ad-blocker bypasses (in a good way -&#62; zero impact on users)</li> <li>anonymous visitor stats</li> -<li>software created by <a href="https://usefathom.com/about">indie developers</a></li> +<li>software created by indie developers</li> </ul> -<p>Although this might sound like a "paid" blog post, I can assure you this is completely based on my own opinions and experience with the service. I'm just very pleased with the product :)</p> -<p>Enough chit-chat - let's breakdown how to setup Fathom on your own site hosted through Netlify!</p> -<h2>Step 0: Assumptions</h2> -<p>I'm going into this tutorial with the assumption that you:</p> + +<p>Although this might sound like a &#8220;paid&#8221; blog post, I can assure you this is completely based on my own opinions and experience with the service. I&#8217;m just very pleased with the product :)</p> + +<p>Enough chit-chat - let&#8217;s breakdown how to setup Fathom on your own site hosted through Netlify!</p> + +<h2 id="step-0-assumptions">Step 0: Assumptions</h2> + +<p>I&#8217;m going into this tutorial with the assumption that you:</p> + <ol> -<li>Have an active <a href="https://usefathom.com/ref/DKHJVX">Fathom account</a> (or are at least trying the 7-day free trial)</li> -<li>Have a website already setup on <a href="https://netlify.com">Netlify (custom domain optional)</a></li> +<li>Have an active Fathom account (or are at least trying the 7-day free trial)</li> +<li>Have a website already setup on Netlify (custom domain optional)</li> </ol> -<p>And that's all you need.</p> -<h2>Step 1: Adding a Custom Domain (DNS Setup)</h2> + +<p>And that&#8217;s all you need.</p> + +<h2 id="step-1-adding-a-custom-domain-dns-setup">Step 1: Adding a Custom Domain (DNS Setup)</h2> + <p>Even though you have the option to use the <code>default</code> tracking script URL, I would highly recommend setting it up through your own domain. This helps avoid any browser extensions or firewalls that might block outside URL request made by individual sites.</p> + <ol> <li>Navigate to the Fathom <strong>Settings</strong> page in the bottom footer (must be logged in)</li> <li>Select <strong>Domains</strong> from the sidebar</li> @@ -6788,87 +8962,111 @@ done <li>Select <strong>Start Process</strong></li> <li>Keep note of both the <code>CNAME</code> and <code>VALUE</code> (we will copy this in a moment)</li> </ol> + <p>Open a new tab, and login to your Netlify account:</p> + <ol> <li>From your <code>Team Overview</code> page, navigate to the top-level <code>Domains</code> page</li> <li>Select the domain you plan to add Fathom to</li> -<li>Under <strong>DNS settings</strong> &gt; <strong>DNS records</strong> select <code>Add New Record</code></li> +<li>Under <strong>DNS settings</strong> &#62; <strong>DNS records</strong> select <code>Add New Record</code></li> <li>Select <code>CNAME</code> from the dropdown of available options</li> <li>Paste the Fathom <code>CNAME</code> (from the steps above) into the <strong>Name</strong> input</li> <li>Paste the Fathom <code>VALUE</code> (from the steps above) into the <strong>Value</strong> input</li> <li>Click <strong>Save</strong></li> </ol> -<p>That's it for DNS setup!</p> -<h2>Step 2: Adding Fathom Your Website</h2> -<p>Now that we will be using our own custom domain for the script, it's time to actually <em>add it</em> to our website. From the same Fathom <strong>Settings</strong> page as before:</p> + +<p>That&#8217;s it for DNS setup!</p> + +<h2 id="step-2-adding-fathom-your-website">Step 2: Adding Fathom Your Website</h2> + +<p>Now that we will be using our own custom domain for the script, it&#8217;s time to actually <em>add it</em> to our website. From the same Fathom <strong>Settings</strong> page as before:</p> + <ol> <li>Navigate to the <strong>Sites</strong> page in the sidebar</li> <li>Enter your custom domain in the <code>Add a new site</code> input and click <strong>Get site code</strong></li> -<li>In the modal prompt, select your custom domain from the dropdown list (you'll see the script code change accordingly)</li> +<li>In the modal prompt, select your custom domain from the dropdown list (you&#8217;ll see the script code change accordingly)</li> <li>Copy the tracking code snippet and add it to all the pages you plan to track on your site</li> <li>When ready, select <strong>Verify site code</strong></li> <li>If everything went correctly you should be done!</li> </ol> -<h2>Step 3: Watch Those Live Stats!</h2> -<p>Open a cold beer (or a bubbly soda if you prefer) and watch your website visitor stats come rolling in on the dashboard! Not only do you now have solid analytics on your website but you have the piece of mind that your users' privacy isn't being invaded. Everybody wins!</p></content> - <link href="https://bt.ht/fathom-analytics-netlify"/> - <id>https://bt.ht/fathom-analytics-netlify</id> + +<h2 id="step-3-watch-those-live-stats">Step 3: Watch Those Live Stats!</h2> + +<p>Open a cold beer (or a bubbly soda if you prefer) and watch your website visitor stats come rolling in on the dashboard! Not only do you now have solid analytics on your website but you have the piece of mind that your users&#8217; privacy isn&#8217;t being invaded. Everybody wins!</p></content> + <link href="https://btxx.org/fathom-analytics-netlify"/> + <id>https://btxx.org/fathom-analytics-netlify</id> <updated>2021-01-19T10:00:00Z</updated> <published>2021-01-19T10:00:00Z</published> </entry> <entry> <title>Faking 3D Elements with CSS</title> - <content type="html"><h1>Faking 3D Elements with CSS</h1> + <content type="html"><h1 id="faking-3d-elements-with-css">Faking 3D Elements with CSS</h1> + <p>2020-04-29</p> + <p>Although not always practical, creating the illusion that some of your web elements are 3D can be a fun experiment. I set out to see if I was able to create such an illusion with only 2 HTML elements and as little CSS as possible.</p> + <p>This is what I ended up creating:</p> + <p><img src="/public/images/css-orb.png" alt="Blue 3D orb made out pure CSS" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/VwvzKyb">Live CodePen Example</a></p> -<h2>The HTML</h2> + +<h2 id="the-html">The HTML</h2> + <p>Prepare for your mind to be blown:</p> -<pre><code>&lt;div class=&quot;main-orb&quot;&gt; - &lt;div class=&quot;inner-orb&quot;&gt;&lt;/div&gt; -&lt;/div&gt; + +<pre><code>&#60;div class="main-orb"&#62; + &#60;div class="inner-orb"&#62;&#60;&#47;div&#62; +&#60;&#47;div&#62; </code></pre> -<p>That's it - I wasn't kidding when I said we would use only 2 HTML elements. The <code>.main-orb</code> is the core shape (set to 400x400) and the <code>.inner-orb</code> is placed on top of it's parent at a slightly smaller size (360x360) - but more on that below in the CSS portion.</p> -<h2>The CSS</h2> + +<p>That&#8217;s it - I wasn&#8217;t kidding when I said we would use only 2 HTML elements. The <code>.main-orb</code> is the core shape (set to 400x400) and the <code>.inner-orb</code> is placed on top of it&#8217;s parent at a slightly smaller size (360x360) - but more on that below in the CSS portion.</p> + +<h2 id="the-css">The CSS</h2> + <p>First we give the bigger orb element (<code>.main-orb</code>) the default styling needed to represent a 2D circle:</p> + <pre><code>.main-orb { background: linear-gradient(#fff 0%, #eee 10%, #2E86FB 50%, #1A237E 100%); border-radius: 9999px; height: 400px; margin: 4rem auto; - position: relative; /* This is important for the inner orb element later */ + position: relative; &#47;* This is important for the inner orb element later *&#47; width: 400px; } </code></pre> -<p>Next, we include both <code>:before</code> and <code>:after</code> pseudo elements for our orb's drop shadow. You <em>could</em> do this with a simple <code>box-shadow</code> property on the <code>.main-orb</code> itself, but I've explained in a previous post why <a href="/blog/better-box-shadows.html">that's not the best approach</a>.</p> -<pre><code>/* Shared styling for both pseudo elements - Remember DRY */ + +<p>Next, we include both <code>:before</code> and <code>:after</code> pseudo elements for our orb&#8217;s drop shadow. You <em>could</em> do this with a simple <code>box-shadow</code> property on the <code>.main-orb</code> itself, but I&#8217;ve explained in a previous post why <a href="/blog/better-box-shadows.html">that&#8217;s not the best approach</a>.</p> + +<pre><code>&#47;* Shared styling for both pseudo elements - Remember DRY *&#47; .main-orb:before, .main-orb:after { border-radius: 200px 200px 9999px 9999px; bottom: -10px; - content:''; + content:&#39;&#39;; filter: blur(20px); height: 40px; position: absolute; z-index: -1; } -</code></pre> -<pre><code>/* Bigger, lighter shadow */ + +&#47;* Bigger, lighter shadow *&#47; .main-orb:before { background: rgba(0,0,0,0.4); left: 7.5%; width: 85%; } -</code></pre> -<pre><code>/* Smaller, darker shadow */ + +&#47;* Smaller, darker shadow *&#47; .main-orb:after { background: rgba(0,0,0,0.7); left: 20%; width: 60%; } </code></pre> + <p>With our main orb complete we can move on to the <code>.inner-orb</code> element to help bring slightly more depth to our floating ball of CSS:</p> + <pre><code>.inner-orb { background: linear-gradient(#fff 0%, #2E86FB 60%, #283593 100%); border-radius: 9999px; @@ -6881,199 +9079,286 @@ done width: 360px; } </code></pre> -<h2>Poor-man's 3D elements</h2> + +<h2 id="poor-mans-3d-elements">Poor-man&#8217;s 3D elements</h2> + <p>Clearly implementing something like this will never come close to generating true 3D renders on a website, but it is a fun exercise to see how much further we can push simple CSS. Feel free to fork the above CodePen to play around with different colors and shadow placements.</p></content> - <link href="https://bt.ht/fake-3d-elements-with-css"/> - <id>https://bt.ht/fake-3d-elements-with-css</id> + <link href="https://btxx.org/fake-3d-elements-with-css"/> + <id>https://btxx.org/fake-3d-elements-with-css</id> <updated>2020-04-29T10:00:00Z</updated> <published>2020-04-29T10:00:00Z</published> </entry> <entry> <title>ET-Jekyll Theme</title> - <content type="html"><h1>ET-Jekyll Theme</h1> + <content type="html"><h1 id="et-jekyll-theme">ET-Jekyll Theme</h1> + <p>2018-01-14</p> -<p>ET-Jekyll theme is based off of <a href="http://www.daveliepmann.com">Dave Liepmann's</a> awesome <a href="https://edwardtufte.github.io/tufte-css/">Tufte CSS</a> - which takes it's style and inspiration from the wonderful book and handout designs of <a href="https://www.edwardtufte.com/tufte/">Edward Tufte</a>.</p> -<p>The differences are subtle when comparing my variation to Tufte CSS, but these changes were made out of personal preference and are not in any way "better". If you prefer the <a href="https://edwardtufte.github.io/tufte-css/">original CSS styling</a> - please use it!</p> -<p>This theme is an open source side project by <a href="https://bradleytaunt.com">Bradley Taunt</a> - made with passion and care. Edit, improve, customize or butcher this theme as much as you'd like. If you spot an issue or find a better solution for any user pain-spots, please don't hesitate to <a href="https://github.com/bradleytaunt/ET-Jekyll/pulls">open a PR with your changes</a>.</p> + +<p>ET-Jekyll theme is based off of Dave Liepmann&#8217;s awesome Tufte CSS - which takes it&#8217;s style and inspiration from the wonderful book and handout designs of Edward Tufte.</p> + +<p>The differences are subtle when comparing my variation to Tufte CSS, but these changes were made out of personal preference and are not in any way &#8220;better&#8221;. If you prefer the original CSS styling - please use it!</p> + +<p>This theme is an open source side project by Bradley Taunt - made with passion and care. Edit, improve, customize or butcher this theme as much as you&#8217;d like. If you spot an issue or find a better solution for any user pain-spots, please don&#8217;t hesitate to open a PR with your changes.</p> + <p>Enjoy ET-Jekyll!</p></content> - <link href="https://bt.ht/et-jekyll-theme"/> - <id>https://bt.ht/et-jekyll-theme</id> + <link href="https://btxx.org/et-jekyll-theme"/> + <id>https://btxx.org/et-jekyll-theme</id> <updated>2018-01-14T10:00:00Z</updated> <published>2018-01-14T10:00:00Z</published> </entry> <entry> <title>Styling Empty Table Cells</title> - <content type="html"><h1>Styling Empty Table Cells</h1> + <content type="html"><h1 id="styling-empty-table-cells">Styling Empty Table Cells</h1> + <p>2019-07-17</p> -<p>Often when designing tables on the web you're bound to come across empty pockets of data. These will be rendered as "blank" table cells, which isn't always the intended outcome. Let's take a quick look at how to target and style empty table cells.</p> -<h2>The easy <code>:empty</code> way</h2> -<p>The most popular way to target <em>any</em> empty element is by using - you guessed it - the <code>empty</code> pseudo-class. This pseudo-class is incredibly simple. You target an element's <code>empty</code> state that same way you would target <code>hover</code> or <code>active</code>:</p> + +<p>Often when designing tables on the web you&#8217;re bound to come across empty pockets of data. These will be rendered as &#8220;blank&#8221; table cells, which isn&#8217;t always the intended outcome. Let&#8217;s take a quick look at how to target and style empty table cells.</p> + +<h2 id="the-easy-way">The easy <code>:empty</code> way</h2> + +<p>The most popular way to target <em>any</em> empty element is by using - you guessed it - the <code>empty</code> pseudo-class. This pseudo-class is incredibly simple. You target an element&#8217;s <code>empty</code> state that same way you would target <code>hover</code> or <code>active</code>:</p> + <pre><code>table tr td:empty { opacity: 0; } </code></pre> + <p>Check out the CodePen examples below for more advanced styling options:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/EBBLEx/">Live CodePen Example 1</a></p> + <p>You can also include additional pseudo elements to give the user more context about what the empty cells represent:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/bPXqLa/">Live CodePen Example 2</a></p> -<h2>More specific <code>empty-cells</code> property</h2> -<p>Although using the <code>:empty</code> pseudo-class can be helpful, it isn't used just for tables. It can be used for any HTML elements that have a lack of content. So, is there a CSS specific property that can target <em>just</em> table cells? </p> -<p>Let's take a look at the <code>empty-cells</code> property:</p> + +<h2 id="more-specific-property">More specific <code>empty-cells</code> property</h2> + +<p>Although using the <code>:empty</code> pseudo-class can be helpful, it isn&#8217;t used just for tables. It can be used for any HTML elements that have a lack of content. So, is there a CSS specific property that can target <em>just</em> table cells? </p> + +<p>Let&#8217;s take a look at the <code>empty-cells</code> property:</p> + <pre><code>table { empty-cells: hide; } </code></pre> + <p><a href="https://codepen.io/bradleytaunt/pen/XLLqOW/">Live CodePen Example 3</a></p> + <p>Pros of using <code>empty-cells</code>:</p> + <ul> <li>Only one CSS property</li> <li>Targets the table elements specifically</li> <li>No need for custom styles since it simply <em>hides</em> empty cell borders</li> </ul> + <p>Some downsides to using this property:</p> + <ul> <li>No styling customization</li> <li>Trickier to use pseudo-element helpers without invoking the <code>:empty</code> state</li> </ul> -<h2>Pick your preference</h2> -<p>It doesn't matter semantically which option you decide to take when styling / hiding empty table cells. Using the <code>:empty</code> state gives you a lot more flexibility in terms of what you can target (full rows, columns etc), but using the <code>empty-cells</code> property let's you simply hide the cells and focus on more important items.</p></content> - <link href="https://bt.ht/empty-table-cells"/> - <id>https://bt.ht/empty-table-cells</id> + +<h2 id="pick-your-preference">Pick your preference</h2> + +<p>It doesn&#8217;t matter semantically which option you decide to take when styling &#47; hiding empty table cells. Using the <code>:empty</code> state gives you a lot more flexibility in terms of what you can target (full rows, columns etc), but using the <code>empty-cells</code> property let&#8217;s you simply hide the cells and focus on more important items.</p></content> + <link href="https://btxx.org/empty-table-cells"/> + <id>https://btxx.org/empty-table-cells</id> <updated>2019-07-17T10:00:00Z</updated> <published>2019-07-17T10:00:00Z</published> </entry> <entry> <title>Setting Up a Pi-hole Server with Eero</title> - <content type="html"><h1>Setting Up a Pi-hole Server with Eero</h1> + <content type="html"><h1 id="setting-up-a-pi-hole-server-with-eero">Setting Up a Pi-hole Server with Eero</h1> + <p>2022-03-14</p> -<p>For the past few years, I've been using a set of Eero routers as my home mesh network. It's worked fairly great in that time and even seamlessly transitioned without any hiccups when my family moved house. During the initial setup, I installed <a href="https://pi-hole.net">Pi-hole</a> on a Raspberry Pi Zero WH because advertisements and tracking scripts suck.</p> + +<p>For the past few years, I&#8217;ve been using a set of Eero routers as my home mesh network. It&#8217;s worked fairly great in that time and even seamlessly transitioned without any hiccups when my family moved house. During the initial setup, I installed Pi-hole on a Raspberry Pi Zero WH because advertisements and tracking scripts suck.</p> + <p>It was an easy process to get everything up and running, but I did notice a lack of detailed steps online for those specifically using Eero systems. So, I thought I would document this process here with the hope that it will help someone else along the way (or at the very least remain a semi-permanent place for my own reference).</p> -<hr /> -<p>FYI: You can pay for Eero Secure and allow them to handle ad/tracker blocking for you. Personally, I prefer to have complete control over my blocklists and usage data. YMMV.</p> -<hr /> -<h2>Setting Up the Pi-hole Server</h2> -<p>Before we get into the step-by-step details, here are the required items you'll need:</p> + +<hr/> + +<p>FYI: You can pay for Eero Secure and allow them to handle ad&#47;tracker blocking for you. Personally, I prefer to have complete control over my blocklists and usage data. YMMV.</p> + +<hr/> + +<h2 id="setting-up-the-pi-hole-server">Setting Up the Pi-hole Server</h2> + +<p>Before we get into the step-by-step details, here are the required items you&#8217;ll need:</p> + <ol> <li>Raspberry Pi device (I recommend the Pi Zero for simplicity and low cost)</li> <li>microSD card preloaded with <a href="https://www.raspberrypi.com/software/operating-systems/">Raspberry Pi OS Lite</a> (having a desktop GUI is overkill for our use case)</li> <li>micro USB to ethernet adapter (check your local Amazon)</li> <li>Patience!</li> </ol> + <p>Before you place your microSD card into the Pi and boot it up, connect it to your local computer (via USB adapter) - we will need to add some files first. Once loaded into the <code>boot</code> folder, add an empty file simply called <code>ssh</code> (no extensions). Next open your preferred text editor and enter the following code, editing the content to match your own country code and home network settings:</p> + <pre><code>country=US -ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev +ctrl_interface=DIR=&#47;var&#47;run&#47;wpa_supplicant GROUP=netdev update_config=1 network={ - ssid=&quot;WIFI_SSID&quot; + ssid="WIFI_SSID" scan_ssid=1 - psk=&quot;WIFI_PASSWORD&quot; + psk="WIFI_PASSWORD" key_mgmt=WPA-PSK } </code></pre> + <p>Save this file as <code>wpa_supplicant.conf</code> and add it to the <code>boot</code> directory as well.</p> + <p>You can now safely eject the microSD card and place it into your Raspberry Pi.</p> -<h2>Plug it in and Boot!</h2> -<p>Connect power to your Pi and give it a bit of time to boot up. Once you see a nice solid green LED, go back to your local computer's terminal and enter the following command:</p> + +<h2 id="plug-it-in-and-boot">Plug it in and Boot!</h2> + +<p>Connect power to your Pi and give it a bit of time to boot up. Once you see a nice solid green LED, go back to your local computer&#8217;s terminal and enter the following command:</p> + <pre><code>ssh pi@raspberrypi.local </code></pre> + <p>If everything was set up properly you will be asked to trust this device. Next, you will be prompted to enter the device password. The default password will be: <code>raspberry</code></p> -<p><strong>Important</strong>: This is assuming you don't currently have any other Pi devices using this hostname parameter!</p> -<p>Once you are connected directly to the Pi, it's best to check for updates:</p> + +<p><strong>Important</strong>: This is assuming you don&#8217;t currently have any other Pi devices using this hostname parameter!</p> + +<p>Once you are connected directly to the Pi, it&#8217;s best to check for updates:</p> + <pre><code>sudo apt update </code></pre> -<p>...and if updates are in fact available, install them via:</p> + +<p>&#8230;and if updates are in fact available, install them via:</p> + <pre><code>sudo apt upgrade </code></pre> + <p>This next step is optional but I highly recommend it for security purposes. You should change both the hostname and password of this soon-to-be Pi-hole server. To do this simply run:</p> + <pre><code>sudo raspi-config </code></pre> + <ol> -<li>Edit Hostname: navigate to <code>System Settings</code> --&gt; <code>Hostname</code></li> -<li>Edit Password: navigate to <code>System Settings</code> --&gt; <code>Password</code></li> +<li>Edit Hostname: navigate to <code>System Settings</code> &#8211;&#62; <code>Hostname</code></li> +<li>Edit Password: navigate to <code>System Settings</code> &#8211;&#62; <code>Password</code></li> </ol> -<p>Once complete, reboot the Pi. Just remember that when you try to reconnect to this device via SSH you'll need to use both of these new parameters instead of the defaults.</p> -<h2>Installing Pi-hole</h2> + +<p>Once complete, reboot the Pi. Just remember that when you try to reconnect to this device via SSH you&#8217;ll need to use both of these new parameters instead of the defaults.</p> + +<h2 id="installing-pi-hole">Installing Pi-hole</h2> + <p>This is the easy part:</p> -<pre><code>curl -sSL https://install.pi-hole.net | bash + +<pre><code>curl -sSL https:&#47;&#47;install.pi-hole.net | bash </code></pre> -<p>Pi-hole runs a full install script that walks you through step-by-step on setting things up. It's best to use the suggested defaults during the install - everything is pretty simple.</p> -<p>Near the end of the setup you'll be show the newly created static IP for this Pi-hole server (both IPv4 and IPv6). Write these down for easy reference in a moment.</p> -<p>Once it's finished, shutdown the Pi safely by running:</p> + +<p>Pi-hole runs a full install script that walks you through step-by-step on setting things up. It&#8217;s best to use the suggested defaults during the install - everything is pretty simple.</p> + +<p>Near the end of the setup you&#8217;ll be show the newly created static IP for this Pi-hole server (both IPv4 and IPv6). Write these down for easy reference in a moment.</p> + +<p>Once it&#8217;s finished, shutdown the Pi safely by running:</p> + <pre><code>sudo shutdown now </code></pre> -<h2>Hardware Setup</h2> + +<h2 id="hardware-setup">Hardware Setup</h2> + <p>With the Pi shutdown you can safely relocate it to where you have your modem and gateway Eero setup. Connect your new Pi-hole device to the secondary ethernet port on your gateway Eero[^1] and power it up. (This is where the microUSB to ethernet adapter for our Pi device is needed)</p> + <p>See the crude diagram below for visual reference:</p> -<p><figure> - <img src="/public/images/eero-pi-hole.webp" alt="Eero Pi-hole connection diagram"> - <figcaption>Internet modem --> Eero gateway --> Pi-hole device</figcaption> -</figure></p> + <ul> <li><strong>Grey Wire</strong>: Incoming internet connection from ISP</li> <li><strong>Blue Wire</strong>: Ethernet cord connecting modem to gateway Eero</li> <li><strong>Red Wire</strong>: Ethernet cord connecting secondary Eero port to Pi Zero</li> </ul> -<p>That's all we need to do on the hardware side of things.</p> -<h2>Configuring the Eero App</h2> -<p>With everything connected properly it's finally time to setup our custom DNS settings through Eero.</p> + +<p>That&#8217;s all we need to do on the hardware side of things.</p> + +<h2 id="configuring-the-eero-app">Configuring the Eero App</h2> + +<p>With everything connected properly it&#8217;s finally time to setup our custom DNS settings through Eero.</p> + <ol> <li>Open the Eero app (iOS or Android)</li> -<li>Navigate to <strong>Settings</strong> &gt; <strong>Network Settings</strong> &gt; <strong>DNS</strong></li> -<li>Select <strong>Customized DNS</strong> and enter both your saved IPv4 / IPv6 values</li> +<li>Navigate to <strong>Settings</strong> &#62; <strong>Network Settings</strong> &#62; <strong>DNS</strong></li> +<li>Select <strong>Customized DNS</strong> and enter both your saved IPv4 &#47; IPv6 values</li> <li>Eero will prompt you to reboot your network - do it</li> </ol> -<p>Next we need to add your Pi-hole's address as an IPv4 reservation:[^2]</p> + +<p>Next we need to add your Pi-hole&#8217;s address as an IPv4 reservation:[^2]</p> + <ol> -<li>In the Eero app, navigate to <strong>Settings</strong> &gt; <strong>Network Settings</strong> &gt; <strong>Reservations &amp; port forwarding</strong></li> -<li>Tap <strong>Add a reservation</strong> and include your Pi-hole's IP address</li> +<li>In the Eero app, navigate to <strong>Settings</strong> &#62; <strong>Network Settings</strong> &#62; <strong>Reservations &#38; port forwarding</strong></li> +<li>Tap <strong>Add a reservation</strong> and include your Pi-hole&#8217;s IP address</li> </ol> + <p>After the system reboots everything <em>should</em> be working as intended! You can check by navigating to your Pi-hole IP address in your browser.</p> -<h2>Closing Thoughts</h2> -<p>None of this stuff if groundbreaking, but my hope is that even one person across the internet finds this helpful! If you run into any major bugs, please leave a comment below and I'll do my best to help out!</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>None of this stuff if groundbreaking, but my hope is that even one person across the internet finds this helpful! If you run into any major bugs, please leave a comment below and I&#8217;ll do my best to help out!</p> + <p>Best of luck blocking those pesky ads and trackers!</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>You don't <em>have</em> to use your Eero gateway for this step (credit: <a href="https://old.reddit.com/user/RollMeAway83">/u/RollMeAway83</a>)</li> -<li>Thanks to <a href="https://old.reddit.com/user/YankeesIT">u/YankeesIT</a> for pointing out that this is required not <em>optional</em></li> +<li>You don&#8217;t <em>have</em> to use your Eero gateway for this step (credit: <a href="https://old.reddit.com/user/RollMeAway83">&#47;u&#47;RollMeAway83</a>)</li> +<li>Thanks to <a href="https://old.reddit.com/user/YankeesIT">u&#47;YankeesIT</a> for pointing out that this is required not <em>optional</em></li> </ol></content> - <link href="https://bt.ht/eero"/> - <id>https://bt.ht/eero</id> + <link href="https://btxx.org/eero"/> + <id>https://btxx.org/eero</id> <updated>2022-03-14T10:00:00Z</updated> <published>2022-03-14T10:00:00Z</published> </entry> <entry> <title>Easy Toggle Switches</title> - <content type="html"><h1>Easy Toggle Switches</h1> + <content type="html"><h1 id="easy-toggle-switches">Easy Toggle Switches</h1> + <p>2019-02-18</p> + <p>Sometimes there is a need to use toggle elements in-place of the default <code>checkbox</code> inputs. The problem is, I tend to see a lot of developers reaching for plugins or JavaScript components in order to implement these toggles.</p> + <p><em>This is overkill</em>. You can create your own custom <code>input</code> elements to mimic toggles perfectly with just a small amount of CSS.</p> -<h2>What we will be building</h2> + +<h2 id="what-we-will-be-building">What we will be building</h2> + <p><img src="/public/images/easy-toggle-switches.png" alt="Easy toggle switches" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/bGgbajY">Live CodePen Example</a></p> -<h2>The HTML</h2> + +<h2 id="the-html">The HTML</h2> + <p>The build structure for these toggles is really simple, we only need:</p> + <ul> -<li>a parent container to hold all our corresponding elements</li> -<li>a checkbox <code>input</code> element (which we will hide)</li> -<li>an empty label designed to represent the slider</li> -<li>a text label that references the <code>input</code> </li> -</ul> -<pre><code>/* Main toggle parent container */ -&lt;div class=&quot;toggle-switch&quot;&gt; - /* Checkbox input, hidden with CSS */ - &lt;input class=&quot;toggle-input&quot; type=&quot;checkbox&quot; id=&quot;toggle-1&quot;&gt; - /* The toggle slider element */ - &lt;label class=&quot;toggle-slider&quot; for=&quot;toggle-1&quot;&gt;&lt;/label&gt; - /* The text label to the right of the slider */ - &lt;label class=&quot;toggle-label&quot; for=&quot;toggle-1&quot;&gt;Toggle Switch&lt;/label&gt; -&lt;/div&gt; -</code></pre> -<p>And that's everything we need for the HTML.</p> -<p><strong>ProTip:</strong> Don't forget to increment both the <code>id</code> and <code>for</code> attributes when adding additional toggles. This seems like a no-brainer but it's overlooked more than you think.</p> -<h2>The CSS</h2> +<li><p>a parent container to hold all our corresponding elements</p></li> +<li><p>a checkbox <code>input</code> element (which we will hide)</p></li> +<li><p>an empty label designed to represent the slider</p></li> +<li><p>a text label that references the <code>input</code> </p> + +<p>&#47;* Main toggle parent container <em>&#47; + + &#47;</em> Checkbox input, hidden with CSS <em>&#47; + + &#47;</em> The toggle slider element <em>&#47; + + &#47;</em> The text label to the right of the slider *&#47; + Toggle Switch +</p></li> +</ul> + +<p>And that&#8217;s everything we need for the HTML.</p> + +<p><strong>ProTip:</strong> Don&#8217;t forget to increment both the <code>id</code> and <code>for</code> attributes when adding additional toggles. This seems like a no-brainer but it&#8217;s overlooked more than you think.</p> + +<h2 id="the-css">The CSS</h2> + <p>To get things started we will add the styling to the <code>.toggle-switch</code> item directly (using <code>flexbox</code> in this demo for easier layout).</p> -<p><strong>Sidenote</strong>: You will notice the inclusion of CSS variables in this demo - if you are unfamiliar with how to use root variables in CSS, take a look at one of my previous posts: <a href="https://accssible.com/2018/03/24/css-variables/">CSS variables</a>.</p> + +<p><strong>Sidenote</strong>: You will notice the inclusion of CSS variables in this demo - if you are unfamiliar with how to use root variables in CSS, take a look at one of my previous posts: CSS variables.</p> + <pre><code>:root { --primary-color: #4A90E2; } @@ -7086,14 +9371,18 @@ network={ margin: 20px 0; } </code></pre> -<p>Next we will hide the default browser checkbox element since we won't be needing it:</p> + +<p>Next we will hide the default browser checkbox element since we won&#8217;t be needing it:</p> + <pre><code>.toggle-input { position: absolute; visibility: hidden; z-index: -1; } </code></pre> -<p>Let's also add some base styling for the <code>label</code> containing the text corresponding to it's <code>input</code> sibling:</p> + +<p>Let&#8217;s also add some base styling for the <code>label</code> containing the text corresponding to it&#8217;s <code>input</code> sibling:</p> + <pre><code>.toggle-label { color: #ccc; cursor: pointer; @@ -7103,8 +9392,10 @@ network={ transition: ease all .3s; } </code></pre> + <p>Now we target the <code>.toggle-slider</code> label and add the styling for the main slider base:</p> -<pre><code>/* This is just the main slider base */ + +<pre><code>&#47;* This is just the main slider base *&#47; .toggle-slider { background: #eee; border-radius: 9999px; @@ -7119,13 +9410,15 @@ network={ width: 40px; } </code></pre> + <p>We <em>could</em> include a separate element for the circle toggle switcher itself, but instead we will use the <code>:before</code> pseudo element:</p> + <pre><code>.toggle-slider:before { background: white; border-radius: 9999px; box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.2); - content:''; + content:&#39;&#39;; height: 16px; left: 2px; position: absolute; @@ -7134,13 +9427,16 @@ network={ width: 16px; } </code></pre> -<h3>Interaction</h3> -<p>Right now we just have a static toggle that does nothing when the user interacts with it. Let's change that by moving the pseudo element's position based on the checkbox <code>input</code> state and updating the label text color:</p> + +<h3 id="interaction">Interaction</h3> + +<p>Right now we just have a static toggle that does nothing when the user interacts with it. Let&#8217;s change that by moving the pseudo element&#8217;s position based on the checkbox <code>input</code> state and updating the label text color:</p> + <pre><code>.toggle-input:checked + .toggle-slider { background: var(--primary-color); } .toggle-input:checked + .toggle-slider:before { - /* Move 100% of the width minus it's own width plus initial 'left' */ + &#47;* Move 100% of the width minus it&#39;s own width plus initial &#39;left&#39; *&#47; left: calc(100% - 18px); } @@ -7148,32 +9444,39 @@ network={ color: var(--primary-color); } </code></pre> + <p>And because we already included the <code>transition</code> property on both the base slider and label text, everything animates nicely between state changes.</p> -<h2>Final code</h2> -<p>To make things easier, you can find the HTML &amp; CSS is their entirety below:</p> -<h3>HTML</h3> -<pre><code>&lt;div class=&quot;toggle-switch&quot;&gt; - &lt;input class=&quot;toggle-input&quot; type=&quot;checkbox&quot; id=&quot;toggle-1&quot;&gt; - &lt;label class=&quot;toggle-slider&quot; for=&quot;toggle-1&quot;&gt;&lt;/label&gt; - &lt;label class=&quot;toggle-label&quot; for=&quot;toggle-1&quot;&gt;Toggle Switch&lt;/label&gt; -&lt;/div&gt; -&lt;div class=&quot;toggle-switch&quot;&gt; - &lt;input class=&quot;toggle-input&quot; type=&quot;checkbox&quot; id=&quot;toggle-2&quot;&gt; - &lt;label class=&quot;toggle-slider&quot; for=&quot;toggle-2&quot;&gt;&lt;/label&gt; - &lt;label class=&quot;toggle-label&quot; for=&quot;toggle-2&quot;&gt;Toggle Switch&lt;/label&gt; -&lt;/div&gt; -&lt;div class=&quot;toggle-switch&quot;&gt; - &lt;input class=&quot;toggle-input&quot; type=&quot;checkbox&quot; id=&quot;toggle-3&quot; checked&gt; - &lt;label class=&quot;toggle-slider&quot; for=&quot;toggle-3&quot;&gt;&lt;/label&gt; - &lt;label class=&quot;toggle-label&quot; for=&quot;toggle-3&quot;&gt;Toggle Switch&lt;/label&gt; -&lt;/div&gt; -&lt;div class=&quot;toggle-switch&quot;&gt; - &lt;input class=&quot;toggle-input&quot; type=&quot;checkbox&quot; id=&quot;toggle-4&quot;&gt; - &lt;label class=&quot;toggle-slider&quot; for=&quot;toggle-4&quot;&gt;&lt;/label&gt; - &lt;label class=&quot;toggle-label&quot; for=&quot;toggle-4&quot;&gt;Toggle Switch&lt;/label&gt; -&lt;/div&gt; -</code></pre> -<h3>The CSS</h3> + +<h2 id="final-code">Final code</h2> + +<p>To make things easier, you can find the HTML &#38; CSS is their entirety below:</p> + +<h3 id="html">HTML</h3> + +<pre><code>&#60;div class="toggle-switch"&#62; + &#60;input class="toggle-input" type="checkbox" id="toggle-1"&#62; + &#60;label class="toggle-slider" for="toggle-1"&#62;&#60;&#47;label&#62; + &#60;label class="toggle-label" for="toggle-1"&#62;Toggle Switch&#60;&#47;label&#62; +&#60;&#47;div&#62; +&#60;div class="toggle-switch"&#62; + &#60;input class="toggle-input" type="checkbox" id="toggle-2"&#62; + &#60;label class="toggle-slider" for="toggle-2"&#62;&#60;&#47;label&#62; + &#60;label class="toggle-label" for="toggle-2"&#62;Toggle Switch&#60;&#47;label&#62; +&#60;&#47;div&#62; +&#60;div class="toggle-switch"&#62; + &#60;input class="toggle-input" type="checkbox" id="toggle-3" checked&#62; + &#60;label class="toggle-slider" for="toggle-3"&#62;&#60;&#47;label&#62; + &#60;label class="toggle-label" for="toggle-3"&#62;Toggle Switch&#60;&#47;label&#62; +&#60;&#47;div&#62; +&#60;div class="toggle-switch"&#62; + &#60;input class="toggle-input" type="checkbox" id="toggle-4"&#62; + &#60;label class="toggle-slider" for="toggle-4"&#62;&#60;&#47;label&#62; + &#60;label class="toggle-label" for="toggle-4"&#62;Toggle Switch&#60;&#47;label&#62; +&#60;&#47;div&#62; +</code></pre> + +<h3 id="the-css-1">The CSS</h3> + <pre><code>:root { --primary-color: #4A90E2; } @@ -7207,7 +9510,7 @@ network={ border-radius: 9999px; box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.2); - content:''; + content:&#39;&#39;; height: 16px; left: 2px; position: absolute; @@ -7233,57 +9536,81 @@ network={ color: var(--primary-color); } </code></pre> + <p>Enjoy your custom toggles!</p></content> - <link href="https://bt.ht/easy-toggle-switches"/> - <id>https://bt.ht/easy-toggle-switches</id> + <link href="https://btxx.org/easy-toggle-switches"/> + <id>https://btxx.org/easy-toggle-switches</id> <updated>2019-02-18T10:00:00Z</updated> <published>2019-02-18T10:00:00Z</published> </entry> <entry> <title>Easy Custom Radio Inputs</title> - <content type="html"><h1>Easy Custom Radio Inputs</h1> + <content type="html"><h1 id="easy-custom-radio-inputs">Easy Custom Radio Inputs</h1> + <p>2019-01-21</p> -<p>Default radio inputs are notoriously horrible looking and are something designers tend to over-think when trying to customize them. Let's walk through how to create custom radio buttons with <em>pure CSS</em>, while still preserving performance and accessibility.</p> -<h2>The Final Product</h2> + +<p>Default radio inputs are notoriously horrible looking and are something designers tend to over-think when trying to customize them. Let&#8217;s walk through how to create custom radio buttons with <em>pure CSS</em>, while still preserving performance and accessibility.</p> + +<h2 id="the-final-product">The Final Product</h2> + <p>This is what we will be designing:</p> + <p><img src="/public/images/custom-radio-inputs.png" alt="Custom radio inputs" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/oNjwMyX">Live CodePen Example</a></p> -<hr /> -<h2>The bones of our radio inputs (HTML)</h2> -<pre><code>&lt;input class=&quot;radio-btn&quot; name=&quot;radio-collection&quot; id=&quot;radio-1&quot; type=&quot;radio&quot;&gt; -&lt;label class=&quot;radio-label&quot; for=&quot;radio-1&quot;&gt;&lt;span&gt;I am very satisfied&lt;/span&gt;&lt;/label&gt; -&lt;input class=&quot;radio-btn&quot; name=&quot;radio-collection&quot; id=&quot;radio-2&quot; type=&quot;radio&quot;&gt; -&lt;label class=&quot;radio-label&quot; for=&quot;radio-2&quot;&gt;&lt;span&gt;I am satisfied&lt;/span&gt;&lt;/label&gt; +<hr/> + +<h2 id="the-bones-of-our-radio-inputs-html">The bones of our radio inputs (HTML)</h2> + +<pre><code>&#60;input class="radio-btn" name="radio-collection" id="radio-1" type="radio"&#62; +&#60;label class="radio-label" for="radio-1"&#62;&#60;span&#62;I am very satisfied&#60;&#47;span&#62;&#60;&#47;label&#62; + +&#60;input class="radio-btn" name="radio-collection" id="radio-2" type="radio"&#62; +&#60;label class="radio-label" for="radio-2"&#62;&#60;span&#62;I am satisfied&#60;&#47;span&#62;&#60;&#47;label&#62; -&lt;input class=&quot;radio-btn&quot; name=&quot;radio-collection&quot; id=&quot;radio-3&quot; type=&quot;radio&quot;&gt; -&lt;label class=&quot;radio-label&quot; for=&quot;radio-3&quot;&gt;&lt;span&gt;I am indifferent&lt;/span&gt;&lt;/label&gt; +&#60;input class="radio-btn" name="radio-collection" id="radio-3" type="radio"&#62; +&#60;label class="radio-label" for="radio-3"&#62;&#60;span&#62;I am indifferent&#60;&#47;span&#62;&#60;&#47;label&#62; -&lt;input class=&quot;radio-btn&quot; name=&quot;radio-collection&quot; id=&quot;radio-4&quot; type=&quot;radio&quot;&gt; -&lt;label class=&quot;radio-label&quot; for=&quot;radio-4&quot;&gt;&lt;span&gt;I am unsatisfied&lt;/span&gt;&lt;/label&gt; +&#60;input class="radio-btn" name="radio-collection" id="radio-4" type="radio"&#62; +&#60;label class="radio-label" for="radio-4"&#62;&#60;span&#62;I am unsatisfied&#60;&#47;span&#62;&#60;&#47;label&#62; -&lt;input class=&quot;radio-btn&quot; name=&quot;radio-collection&quot; id=&quot;radio-5&quot; type=&quot;radio&quot;&gt; -&lt;label class=&quot;radio-label&quot; for=&quot;radio-5&quot;&gt;&lt;span&gt;I am very unsatisfied&lt;/span&gt;&lt;/label&gt; +&#60;input class="radio-btn" name="radio-collection" id="radio-5" type="radio"&#62; +&#60;label class="radio-label" for="radio-5"&#62;&#60;span&#62;I am very unsatisfied&#60;&#47;span&#62;&#60;&#47;label&#62; </code></pre> -<p>I know it looks like a lot is going on here, but it's pretty straightforward so let's unpackage line by line:</p> -<h3>Radio inputs</h3> -<pre><code>&lt;input class=&quot;radio-btn&quot; name=&quot;radio-collection&quot; id=&quot;radio-1&quot; type=&quot;radio&quot;&gt; + +<p>I know it looks like a lot is going on here, but it&#8217;s pretty straightforward so let&#8217;s unpackage line by line:</p> + +<h3 id="radio-inputs">Radio inputs</h3> + +<pre><code>&#60;input class="radio-btn" name="radio-collection" id="radio-1" type="radio"&#62; </code></pre> + <p>This is the default <code>radio</code> input. We give it:</p> + <ul> <li>a <code>name</code> (inputs with a shared <code>name</code> are grouped together)</li> <li>an <code>id</code> (so our label can target this input)</li> <li>a <code>class</code> (so we can style it later)</li> </ul> -<p><strong>Important</strong>: be sure to have a unique <code>id</code> for each input so your labels don't end up connected to multiple radios. In this demo we are simply incrementing them by one.</p> -<h3>Labels</h3> -<p>Adding the labels is fairly straightforward, we just include the corresponding input's <code>id</code> in the label's <code>for</code> attribute. The label content is wrapped in a <code>span</code> - which I will explain the reasoning for later.</p> + +<p><strong>Important</strong>: be sure to have a unique <code>id</code> for each input so your labels don&#8217;t end up connected to multiple radios. In this demo we are simply incrementing them by one.</p> + +<h3 id="labels">Labels</h3> + +<p>Adding the labels is fairly straightforward, we just include the corresponding input&#8217;s <code>id</code> in the label&#8217;s <code>for</code> attribute. The label content is wrapped in a <code>span</code> - which I will explain the reasoning for later.</p> + <p>For styling purposes we also add the <code>radio-label</code> class.</p> -<pre><code>&lt;label class=&quot;radio-label&quot; for=&quot;radio-1&quot;&gt;&lt;span&gt;I am very satisfied&lt;/span&gt;&lt;/label&gt; + +<pre><code>&#60;label class="radio-label" for="radio-1"&#62;&#60;span&#62;I am very satisfied&#60;&#47;span&#62;&#60;&#47;label&#62; </code></pre> -<p>This is looking pretty terrible - but that's nothing some good ol' CSS can't fix!</p> -<h2>The flesh of our radio inputs (CSS)</h2> + +<p>This is looking pretty terrible - but that&#8217;s nothing some good ol&#8217; CSS can&#8217;t fix!</p> + +<h2 id="the-flesh-of-our-radio-inputs-css">The flesh of our radio inputs (CSS)</h2> + <p>First we give some basic styling to our <code>label</code> and <code>input</code> classes (along with hover states). The <code>radio</code> element is actually hidden from view, but by using the <code>visibility</code> attribute we still keep it accessible for screen-readers.</p> + <pre><code>.radio-label { background: white; border: 1px solid #eee; @@ -7293,7 +9620,7 @@ network={ display: inline-block; font-weight: 600; margin: 0 auto 10px; - /* This 65px padding makes room for the custom input */ + &#47;* This 65px padding makes room for the custom input *&#47; padding: 20px 20px 20px 65px; position: relative; transition: .3s ease all; @@ -7307,44 +9634,55 @@ network={ visibility: hidden; } </code></pre> -<p>Remember that <code>span</code> element inside the label? We set it's <code>user-select</code> property to <code>none</code> so we avoid any possible issue with the user selecting the text on-click:</p> + +<p>Remember that <code>span</code> element inside the label? We set it&#8217;s <code>user-select</code> property to <code>none</code> so we avoid any possible issue with the user selecting the text on-click:</p> + <pre><code>.radio-label span { -webkit-user-select: none; -moz-user-select: none; user-select: none; } </code></pre> + <p>Next we include the default empty selection element (to mimic the original radio input) via a pseudo element:</p> + <pre><code>.radio-label:before { background: #eee; border-radius: 50%; - content:''; + content:&#39;&#39;; height: 30px; left: 20px; position: absolute; - /* Half the height of it's parent minus half of it's own height */ + &#47;* Half the height of it&#39;s parent minus half of it&#39;s own height *&#47; top: calc(50% - 15px); transition: .3s ease background-color; width: 30px; } </code></pre> -<h2>A Few Final Steps</h2> + +<h2 id="a-few-final-steps">A Few Final Steps</h2> + <p>The final step is adding the custom styling for when an <code>input</code> item is selected (<code>:checked</code>).</p> + <p>You will notice the use of a <code>base64</code> element for the custom checkmark - feel free to subsitute this for an actual image or none at all (this is just my personal design preference).</p> + <pre><code>.radio-btn:checked + .radio-label { background: #ECF5FF; border-color: #4A90E2; } .radio-btn:checked + .radio-label:before { background-color: #4A90E2; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+'); + background-image: url(&#39;data:image&#47;svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+&#39;); background-repeat: no-repeat; background-position: center; background-size: 15px; } </code></pre> -<p><strong>And that's it.</strong></p> + +<p><strong>And that&#8217;s it.</strong></p> + <p>For easier reference the entire CSS file can be found below:</p> + <pre><code>.radio-label { background: white; border: 1px solid #eee; @@ -7365,7 +9703,7 @@ network={ .radio-label:before { background: #eee; border-radius: 50%; - content:''; + content:&#39;&#39;; height: 30px; left: 20px; position: absolute; @@ -7388,16 +9726,21 @@ network={ } .radio-btn:checked + .radio-label:before { background-color: #4A90E2; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+'); + background-image: url(&#39;data:image&#47;svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+&#39;); background-repeat: no-repeat; background-position: center; background-size: 15px; } </code></pre> -<hr /> -<h2>But wait - we can get even fancier!</h2> -<p>Since this demo is based off a survey-type questionaire, wouldn't it be interesting to give the different selectable options their own styling based on their context? Take a look at the further customized version below:</p> + +<hr/> + +<h2 id="but-wait---we-can-get-even-fancier">But wait - we can get even fancier!</h2> + +<p>Since this demo is based off a survey-type questionaire, wouldn&#8217;t it be interesting to give the different selectable options their own styling based on their context? Take a look at the further customized version below:</p> + <p>We can do so by adding <code>positive</code>, <code>neutral</code> and <code>negative</code> class names to the radio inputs with their own respective properties:</p> + <pre><code>.radio-btn.positive:checked + .radio-label { background: #EAFFF6; border-color: #32B67A; @@ -7406,7 +9749,7 @@ network={ background-color: #32B67A; } .radio-btn.neutral:checked + .radio-label:before { - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAtMTUgMzAgOC41NzE0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PCEtLUdlbmVyYXRlZCBieSBJSlNWRyAoaHR0cHM6Ly9naXRodWIuY29tL2ljb25qYXIvSUpTVkcpLS0+PHBhdGggZD0iTTMwLC0xMi4zMjE0djMuMjE0MjljMCwwLjczNjYwNyAtMC4yNjIyNzcsMS4zNjcxOSAtMC43ODY4MywxLjg5MTc0Yy0wLjUyNDU1NCwwLjUyNDU1NCAtMS4xNTUxMywwLjc4NjgzMSAtMS44OTE3NCwwLjc4NjgzMWgtMjQuNjQyOWMtMC43MzY2MDcsMCAtMS4zNjcxOSwtMC4yNjIyNzcgLTEuODkxNzQsLTAuNzg2ODMxYy0wLjUyNDU1MywtMC41MjQ1NTMgLTAuNzg2ODMsLTEuMTU1MTMgLTAuNzg2ODMsLTEuODkxNzR2LTMuMjE0MjljMCwtMC43MzY2MDcgMC4yNjIyNzcsLTEuMzY3MTkgMC43ODY4MywtMS44OTE3NGMwLjUyNDU1NCwtMC41MjQ1NTMgMS4xNTUxMywtMC43ODY4MyAxLjg5MTc0LC0wLjc4NjgzaDI0LjY0MjljMC43MzY2MDcsMCAxLjM2NzE5LDAuMjYyMjc3IDEuODkxNzQsMC43ODY4M2MwLjUyNDU1MywwLjUyNDU1NCAwLjc4NjgzLDEuMTU1MTMgMC43ODY4MywxLjg5MTc0WiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg=='); + background-image: url(&#39;data:image&#47;svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAtMTUgMzAgOC41NzE0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PCEtLUdlbmVyYXRlZCBieSBJSlNWRyAoaHR0cHM6Ly9naXRodWIuY29tL2ljb25qYXIvSUpTVkcpLS0+PHBhdGggZD0iTTMwLC0xMi4zMjE0djMuMjE0MjljMCwwLjczNjYwNyAtMC4yNjIyNzcsMS4zNjcxOSAtMC43ODY4MywxLjg5MTc0Yy0wLjUyNDU1NCwwLjUyNDU1NCAtMS4xNTUxMywwLjc4NjgzMSAtMS44OTE3NCwwLjc4NjgzMWgtMjQuNjQyOWMtMC43MzY2MDcsMCAtMS4zNjcxOSwtMC4yNjIyNzcgLTEuODkxNzQsLTAuNzg2ODMxYy0wLjUyNDU1MywtMC41MjQ1NTMgLTAuNzg2ODMsLTEuMTU1MTMgLTAuNzg2ODMsLTEuODkxNzR2LTMuMjE0MjljMCwtMC43MzY2MDcgMC4yNjIyNzcsLTEuMzY3MTkgMC43ODY4MywtMS44OTE3NGMwLjUyNDU1NCwtMC41MjQ1NTMgMS4xNTUxMywtMC43ODY4MyAxLjg5MTc0LC0wLjc4NjgzaDI0LjY0MjljMC43MzY2MDcsMCAxLjM2NzE5LDAuMjYyMjc3IDEuODkxNzQsMC43ODY4M2MwLjUyNDU1MywwLjUyNDU1NCAwLjc4NjgzLDEuMTU1MTMgMC43ODY4MywxLjg5MTc0WiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg==&#39;); } .radio-btn.negative:checked + .radio-label { background: #FFF2F2; @@ -7414,129 +9757,153 @@ network={ } .radio-btn.negative:checked + .radio-label:before { background-color: #E75153; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIxLjg1MTg1IC0zOS42OTcgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjwhLS1HZW5lcmF0ZWQgYnkgSUpTVkcgKGh0dHBzOi8vZ2l0aHViLmNvbS9pY29uamFyL0lKU1ZHKS0tPjxwYXRoIGQ9Ik0yMS43Mjk5LC0yMy40NzFjMCwwLjQ0NjQyOCAtMC4xNTYyNSwwLjgyNTg5MyAtMC40Njg3NSwxLjEzODM5bC0yLjI3Njc5LDIuMjc2NzljLTAuMzEyNSwwLjMxMjUgLTAuNjkxOTY0LDAuNDY4NzUgLTEuMTM4MzksMC40Njg3NWMtMC40NDY0MjgsMCAtMC44MjU4OTMsLTAuMTU2MjUgLTEuMTM4MzksLTAuNDY4NzVsLTQuOTIxODcsLTQuOTIxODhsLTQuOTIxODgsNC45MjE4OGMtMC4zMTI1LDAuMzEyNSAtMC42OTE5NjQsMC40Njg3NSAtMS4xMzgzOSwwLjQ2ODc1Yy0wLjQ0NjQyOCwwIC0wLjgyNTg5MiwtMC4xNTYyNSAtMS4xMzgzOSwtMC40Njg3NWwtMi4yNzY3OSwtMi4yNzY3OWMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY1IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI5IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsNC45MjE4OCwtNC45MjE4OGwtNC45MjE4OCwtNC45MjE4OGMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY0IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI4IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsMi4yNzY3OSwtMi4yNzY3OGMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI5LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsNC45MjE4OCw0LjkyMTg4bDQuOTIxODcsLTQuOTIxODhjMC4zMTI1LC0wLjMxMjUgMC42OTE5NjUsLTAuNDY4NzUgMS4xMzgzOSwtMC40Njg3NWMwLjQ0NjQyOSwwIDAuODI1ODkzLDAuMTU2MjUgMS4xMzgzOSwwLjQ2ODc1bDIuMjc2NzksMi4yNzY3OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjUgMC40Njg3NSwxLjEzODM5YzAsMC40NDY0MjkgLTAuMTU2MjUsMC44MjU4OTMgLTAuNDY4NzUsMS4xMzgzOWwtNC45MjE4OCw0LjkyMTg4bDQuOTIxODgsNC45MjE4OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjQgMC40Njg3NSwxLjEzODM5WiIgdHJhbnNmb3JtPSJzY2FsZSgxLjAwNTYxKSIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg=='); + background-image: url(&#39;data:image&#47;svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIxLjg1MTg1IC0zOS42OTcgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjwhLS1HZW5lcmF0ZWQgYnkgSUpTVkcgKGh0dHBzOi8vZ2l0aHViLmNvbS9pY29uamFyL0lKU1ZHKS0tPjxwYXRoIGQ9Ik0yMS43Mjk5LC0yMy40NzFjMCwwLjQ0NjQyOCAtMC4xNTYyNSwwLjgyNTg5MyAtMC40Njg3NSwxLjEzODM5bC0yLjI3Njc5LDIuMjc2NzljLTAuMzEyNSwwLjMxMjUgLTAuNjkxOTY0LDAuNDY4NzUgLTEuMTM4MzksMC40Njg3NWMtMC40NDY0MjgsMCAtMC44MjU4OTMsLTAuMTU2MjUgLTEuMTM4MzksLTAuNDY4NzVsLTQuOTIxODcsLTQuOTIxODhsLTQuOTIxODgsNC45MjE4OGMtMC4zMTI1LDAuMzEyNSAtMC42OTE5NjQsMC40Njg3NSAtMS4xMzgzOSwwLjQ2ODc1Yy0wLjQ0NjQyOCwwIC0wLjgyNTg5MiwtMC4xNTYyNSAtMS4xMzgzOSwtMC40Njg3NWwtMi4yNzY3OSwtMi4yNzY3OWMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY1IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI5IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsNC45MjE4OCwtNC45MjE4OGwtNC45MjE4OCwtNC45MjE4OGMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY0IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI4IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsMi4yNzY3OSwtMi4yNzY3OGMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI5LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsNC45MjE4OCw0LjkyMTg4bDQuOTIxODcsLTQuOTIxODhjMC4zMTI1LC0wLjMxMjUgMC42OTE5NjUsLTAuNDY4NzUgMS4xMzgzOSwtMC40Njg3NWMwLjQ0NjQyOSwwIDAuODI1ODkzLDAuMTU2MjUgMS4xMzgzOSwwLjQ2ODc1bDIuMjc2NzksMi4yNzY3OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjUgMC40Njg3NSwxLjEzODM5YzAsMC40NDY0MjkgLTAuMTU2MjUsMC44MjU4OTMgLTAuNDY4NzUsMS4xMzgzOWwtNC45MjE4OCw0LjkyMTg4bDQuOTIxODgsNC45MjE4OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjQgMC40Njg3NSwxLjEzODM5WiIgdHJhbnNmb3JtPSJzY2FsZSgxLjAwNTYxKSIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg==&#39;); } </code></pre> -<p>I hope this shows new designers that simple custom radio inputs aren't so hard to implement after-all and can actually be pretty fun to design.</p></content> - <link href="https://bt.ht/easy-custom-radio-inputs"/> - <id>https://bt.ht/easy-custom-radio-inputs</id> + +<p>I hope this shows new designers that simple custom radio inputs aren&#8217;t so hard to implement after-all and can actually be pretty fun to design.</p></content> + <link href="https://btxx.org/easy-custom-radio-inputs"/> + <id>https://btxx.org/easy-custom-radio-inputs</id> <updated>2019-01-21T10:00:00Z</updated> <published>2019-01-21T10:00:00Z</published> </entry> <entry> <title>Dynamic Checkboxes</title> - <content type="html"><h1>Dynamic Checkboxes</h1> + <content type="html"><h1 id="dynamic-checkboxes">Dynamic Checkboxes</h1> + <p>2019-07-30</p> -<p>Checkboxes are used quite frequently on forms across the web. Whether you're selecting a pricing plan during a site's sign-up process or just simply selecting to opt-out from a newsletter, you have most likely interacted with some form of checkbox element.</p> -<p>What if we could make everyday checkboxes more beautiful <em>and</em> more intuitive? <em>It's easier than you think</em>. We only need a small amount of CSS and JavaScript to make considerable improvements to your average checkbox UX.</p> -<p>Let's get into it.</p> -<h2>What we are building</h2> + +<p>Checkboxes are used quite frequently on forms across the web. Whether you&#8217;re selecting a pricing plan during a site&#8217;s sign-up process or just simply selecting to opt-out from a newsletter, you have most likely interacted with some form of checkbox element.</p> + +<p>What if we could make everyday checkboxes more beautiful <em>and</em> more intuitive? <em>It&#8217;s easier than you think</em>. We only need a small amount of CSS and JavaScript to make considerable improvements to your average checkbox UX.</p> + +<p>Let&#8217;s get into it.</p> + +<h2 id="what-we-are-building">What we are building</h2> + <p>Take a look and play around with the CodePen below to get an idea of what we are going to build. The premise is a simple add-on pricing form which calculates the additional monthly total to the user in real-time.</p> + <p><a href="https://codepen.io/bradleytaunt/pen/rXWEpy/">Live CodePen Example</a></p> -<h2>The Structure (HTML)</h2> -<p>As always, we will start by breaking down the "bones" of the HTML structure for this checkbox form. Let's take a look at the HTML in it's entirety (don't worry, it is a lot more simple than it seems at first glance):</p> -<pre><code>&lt;h2&gt;Add-ons&lt;/h2&gt; -&lt;input class=&quot;checkbox-btn&quot; name=&quot;checkbox-collection&quot; id=&quot;checkbox-1&quot; type=&quot;checkbox&quot; value=&quot;49&quot;&gt; -&lt;label class=&quot;checkbox-label&quot; for=&quot;checkbox-1&quot;&gt; - &lt;span&gt; +<h2 id="the-structure-html">The Structure (HTML)</h2> + +<p>As always, we will start by breaking down the &#8220;bones&#8221; of the HTML structure for this checkbox form. Let&#8217;s take a look at the HTML in it&#8217;s entirety (don&#8217;t worry, it is a lot more simple than it seems at first glance):</p> + +<pre><code>&#60;h2&#62;Add-ons&#60;&#47;h2&#62; + +&#60;input class="checkbox-btn" name="checkbox-collection" id="checkbox-1" type="checkbox" value="49"&#62; +&#60;label class="checkbox-label" for="checkbox-1"&#62; + &#60;span&#62; White-labeled Domain - &lt;em&gt;Use your own custom domain with SSL security included.&lt;/em&gt; - &lt;/span&gt; - &lt;span&gt;$49/mo&lt;/span&gt; -&lt;/label&gt; - -&lt;input class=&quot;checkbox-btn&quot; name=&quot;checkbox-collection&quot; id=&quot;checkbox-2&quot; type=&quot;checkbox&quot; value=&quot;49&quot;&gt; -&lt;label class=&quot;checkbox-label&quot; for=&quot;checkbox-2&quot;&gt; - &lt;span&gt; + &#60;em&#62;Use your own custom domain with SSL security included.&#60;&#47;em&#62; + &#60;&#47;span&#62; + &#60;span&#62;$49&#47;mo&#60;&#47;span&#62; +&#60;&#47;label&#62; + +&#60;input class="checkbox-btn" name="checkbox-collection" id="checkbox-2" type="checkbox" value="49"&#62; +&#60;label class="checkbox-label" for="checkbox-2"&#62; + &#60;span&#62; API Access - &lt;em&gt;Make API calls to perform custom serving and account actions.&lt;/em&gt; - &lt;/span&gt; - &lt;span&gt;$49/mo&lt;/span&gt; -&lt;/label&gt; - -&lt;input class=&quot;checkbox-btn&quot; name=&quot;checkbox-collection&quot; id=&quot;checkbox-3&quot; type=&quot;checkbox&quot; value=&quot;349&quot;&gt; -&lt;label class=&quot;checkbox-label&quot; for=&quot;checkbox-3&quot;&gt; - &lt;span&gt; + &#60;em&#62;Make API calls to perform custom serving and account actions.&#60;&#47;em&#62; + &#60;&#47;span&#62; + &#60;span&#62;$49&#47;mo&#60;&#47;span&#62; +&#60;&#47;label&#62; + +&#60;input class="checkbox-btn" name="checkbox-collection" id="checkbox-3" type="checkbox" value="349"&#62; +&#60;label class="checkbox-label" for="checkbox-3"&#62; + &#60;span&#62; Priority Support - &lt;em&gt;A dedicated account manager to assist your team with ongoing deployments.&lt;/em&gt; - &lt;/span&gt; - &lt;span&gt;$349/mo&lt;/span&gt; -&lt;/label&gt; - -&lt;div class=&quot;total-cost&quot;&gt; - &lt;h2&gt;Your Plan&lt;/h2&gt; - &lt;div&gt; - &lt;span&gt;$&lt;/span&gt; - &lt;span id=&quot;total-cost-inner&quot;&gt;0&lt;/span&gt; - &lt;input id=&quot;output&quot; type=&quot;text&quot; value=&quot;0&quot; disabled/&gt; - &lt;span&gt;/mo&lt;/span&gt; - &lt;/div&gt; -&lt;/div&gt; -</code></pre> -<h3>The checkbox inputs &amp; labels</h3> -<pre><code>&lt;!-- #1 --&gt; -&lt;input class=&quot;checkbox-btn&quot; name=&quot;checkbox-collection&quot; id=&quot;checkbox-1&quot; type=&quot;checkbox&quot; value=&quot;49&quot;&gt; - -&lt;!-- #2 --&gt; -&lt;label class=&quot;checkbox-label&quot; for=&quot;checkbox-1&quot;&gt; - - &lt;!-- #2i --&gt; - &lt;span&gt; + &#60;em&#62;A dedicated account manager to assist your team with ongoing deployments.&#60;&#47;em&#62; + &#60;&#47;span&#62; + &#60;span&#62;$349&#47;mo&#60;&#47;span&#62; +&#60;&#47;label&#62; + +&#60;div class="total-cost"&#62; + &#60;h2&#62;Your Plan&#60;&#47;h2&#62; + &#60;div&#62; + &#60;span&#62;$&#60;&#47;span&#62; + &#60;span id="total-cost-inner"&#62;0&#60;&#47;span&#62; + &#60;input id="output" type="text" value="0" disabled&#47;&#62; + &#60;span&#62;&#47;mo&#60;&#47;span&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<h3 id="the-checkbox-inputs-labels">The checkbox inputs &#38; labels</h3> + +<pre><code>&#60;!-- #1 --&#62; +&#60;input class="checkbox-btn" name="checkbox-collection" id="checkbox-1" type="checkbox" value="49"&#62; + +&#60;!-- #2 --&#62; +&#60;label class="checkbox-label" for="checkbox-1"&#62; + + &#60;!-- #2i --&#62; + &#60;span&#62; White-labeled Domain - &lt;em&gt;Use your own custom domain with SSL security included.&lt;/em&gt; - &lt;/span&gt; - - &lt;!-- #2ii --&gt; - &lt;span&gt;$49/mo&lt;/span&gt; + &#60;em&#62;Use your own custom domain with SSL security included.&#60;&#47;em&#62; + &#60;&#47;span&#62; + + &#60;!-- #2ii --&#62; + &#60;span&#62;$49&#47;mo&#60;&#47;span&#62; -&lt;/label&gt; +&#60;&#47;label&#62; </code></pre> + <ol> -<li><p>This input will be hidden via <code>position:absolute</code> by default. All checkbox inputs need to share the same <code>name</code> value and all checkboxes require their our custom <code>id</code> that will link with the corresponding <code>for</code> value on the label.</p> -</li> -<li>This label needs it's <code>for</code> value to correspond with it's partnered checkbox.</li> +<li><p>This input will be hidden via <code>position:absolute</code> by default. All checkbox inputs need to share the same <code>name</code> value and all checkboxes require their our custom <code>id</code> that will link with the corresponding <code>for</code> value on the label.</p></li> +<li><p>This label needs it&#8217;s <code>for</code> value to correspond with it&#8217;s partnered checkbox.</p> + +<ul> +<li>i) The first span holds the title and description information of the add-on</li> +<li>ii) The last span holds the cost associated with the current add-on</li> +</ul></li> </ol> -<p> - i) The first span holds the title and description information of the add-on - - ii) The last span holds the cost associated with the current add-on</p> -<h3>The total cost container output</h3> -<pre><code>&lt;!-- #1 --&gt; -&lt;div class=&quot;total-cost&quot;&gt; - &lt;h2&gt;Your Plan&lt;/h2&gt; +<h3 id="the-total-cost-container-output">The total cost container output</h3> + +<pre><code>&#60;!-- #1 --&#62; +&#60;div class="total-cost"&#62; + + &#60;h2&#62;Your Plan&#60;&#47;h2&#62; - &lt;!-- #2 --&gt; - &lt;div&gt; + &#60;!-- #2 --&#62; + &#60;div&#62; - &lt;!-- #2i --&gt; - &lt;span&gt;$&lt;/span&gt; + &#60;!-- #2i --&#62; + &#60;span&#62;$&#60;&#47;span&#62; - &lt;!-- #2ii --&gt; - &lt;span id=&quot;total-cost-inner&quot;&gt;0&lt;/span&gt; + &#60;!-- #2ii --&#62; + &#60;span id="total-cost-inner"&#62;0&#60;&#47;span&#62; - &lt;!-- #2iii --&gt; - &lt;input id=&quot;output&quot; type=&quot;text&quot; value=&quot;0&quot; disabled/&gt; + &#60;!-- #2iii --&#62; + &#60;input id="output" type="text" value="0" disabled&#47;&#62; - &lt;!-- #2iv --&gt; - &lt;span&gt;/mo&lt;/span&gt; + &#60;!-- #2iv --&#62; + &#60;span&#62;&#47;mo&#60;&#47;span&#62; - &lt;/div&gt; + &#60;&#47;div&#62; -&lt;/div&gt; +&#60;&#47;div&#62; </code></pre> + <ol> -<li><p>A simple <code>div</code> with a class we can easily target later</p> -</li> -<li><p>A <code>div</code> parent container is needed to house all the total <code>spans</code> together (more on this when we get into the CSS) - - i) The first <code>span</code> holds the static currency symbol - - ii) The second <code>span</code> is where our updated cost will be injected - - iii) This input field is required for us to take-in the <code>value</code> of the associated <code>:checked</code> inputs and add them together. This current value is then used for the injection into the second <code>span</code> - - iv) The final <code>span</code> simply holds the static monthly duration content</p> -</li> +<li><p>A simple <code>div</code> with a class we can easily target later</p></li> +<li><p>A <code>div</code> parent container is needed to house all the total <code>spans</code> together (more on this when we get into the CSS)</p> + +<ul> +<li>i) The first <code>span</code> holds the static currency symbol</li> +<li>ii) The second <code>span</code> is where our updated cost will be injected</li> +<li>iii) This input field is required for us to take-in the <code>value</code> of the associated <code>:checked</code> inputs and add them together. This current value is then used for the injection into the second <code>span</code></li> +<li>iv) The final <code>span</code> simply holds the static monthly duration content</li> +</ul></li> </ol> -<p>All that's all we need for the HTML!</p> -<h2>The Visuals (CSS)</h2> + +<p>All that&#8217;s all we need for the HTML!</p> + +<h2 id="the-visuals-css">The Visuals (CSS)</h2> + <p>Again, lets take a look at the entire file before we break it down step-by-step:</p> + <pre><code>.checkbox-label { align-items: center; background-color: none; @@ -7564,7 +9931,7 @@ network={ background-size: 15px; border: 1px solid lightgrey; border-radius: 50%; - content:''; + content:&#39;&#39;; height: 30px; left: 20px; position: absolute; @@ -7574,7 +9941,7 @@ network={ } .checkbox-label:hover:before { background-image: - url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;23.571429&quot; height=&quot;23.571429&quot; viewBox=&quot;0.000000 -47.142857 23.571429 23.571429&quot;&gt;&lt;path fill=&quot;lightgrey&quot; d=&quot;M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); + url(&#39;data:image&#47;svg+xml;utf8,&#60;svg xmlns="http:&#47;&#47;www.w3.org&#47;2000&#47;svg" width="23.571429" height="23.571429" viewBox="0.000000 -47.142857 23.571429 23.571429"&#62;&#60;path fill="lightgrey" d="M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286"&#62;&#60;&#47;path&#62;&#60;&#47;svg&#62;&#39;); } .checkbox-label span { -webkit-user-select: none; @@ -7600,7 +9967,7 @@ network={ .checkbox-btn:checked + .checkbox-label:before { background-color: mediumpurple; background-image: - url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;25.948661&quot; height=&quot;19.888393&quot; viewBox=&quot;2.025670 -40.011161 25.948661 19.888393&quot;&gt;&lt;path fill=&quot;white&quot; d=&quot;M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); + url(&#39;data:image&#47;svg+xml;utf8,&#60;svg xmlns="http:&#47;&#47;www.w3.org&#47;2000&#47;svg" width="25.948661" height="19.888393" viewBox="2.025670 -40.011161 25.948661 19.888393"&#62;&#60;path fill="white" d="M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232"&#62;&#60;&#47;path&#62;&#60;&#47;svg&#62;&#39;); border-color: mediumpurple; } @@ -7639,11 +10006,13 @@ network={ } } </code></pre> -<h3>The checkbox label</h3> -<pre><code>/* -This is the main element for each checkbox &quot;container&quot;. + +<h3 id="the-checkbox-label">The checkbox label</h3> + +<pre><code>&#47;* +This is the main element for each checkbox "container". Inside it houses the title, description and price. -*/ +*&#47; .checkbox-label { align-items: center; background-color: none; @@ -7663,29 +10032,32 @@ Inside it houses the title, description and price. background-color: rgba(255,255,255,0.2); } -/* Update the label styling when the input is :checked */ +&#47;* Update the label styling when the input is :checked *&#47; .checkbox-btn:checked + .checkbox-label { background-color: white; border-color: mediumpurple; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } </code></pre> -<h3>The custom checkbox input</h3> -<p>We need to hide the browser's default checkbox input and replace it with our own using pseudo selectors.</p> -<pre><code>/* Hide browser default input */ + +<h3 id="the-custom-checkbox-input">The custom checkbox input</h3> + +<p>We need to hide the browser&#8217;s default checkbox input and replace it with our own using pseudo selectors.</p> + +<pre><code>&#47;* Hide browser default input *&#47; .checkbox-btn { position: absolute; visibility: hidden; } -/* Our custom input checkbox */ +&#47;* Our custom input checkbox *&#47; .checkbox-label:before { background-repeat: no-repeat; background-position: center; background-size: 15px; border: 1px solid lightgrey; border-radius: 50%; - content:''; + content:&#39;&#39;; height: 30px; left: 20px; position: absolute; @@ -7694,30 +10066,33 @@ Inside it houses the title, description and price. width: 30px; } -/* -Here we add a simple '+' icon on hover +&#47;* +Here we add a simple &#39;+&#39; icon on hover to our custom pseudo element. Adding it as an inline SVG gives us the -ability to fully customize it's styling -*/ +ability to fully customize it&#39;s styling +*&#47; .checkbox-label:hover:before { background-image: - url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;23.571429&quot; height=&quot;23.571429&quot; viewBox=&quot;0.000000 -47.142857 23.571429 23.571429&quot;&gt;&lt;path fill=&quot;lightgrey&quot; d=&quot;M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); + url(&#39;data:image&#47;svg+xml;utf8,&#60;svg xmlns="http:&#47;&#47;www.w3.org&#47;2000&#47;svg" width="23.571429" height="23.571429" viewBox="0.000000 -47.142857 23.571429 23.571429"&#62;&#60;path fill="lightgrey" d="M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286"&#62;&#60;&#47;path&#62;&#60;&#47;svg&#62;&#39;); } -/* +&#47;* When the checkbox input is :checked we need to update the inline SVG to use a checkmark symbol -*/ +*&#47; .checkbox-btn:checked + .checkbox-label:before { background-color: mediumpurple; background-image: - url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;25.948661&quot; height=&quot;19.888393&quot; viewBox=&quot;2.025670 -40.011161 25.948661 19.888393&quot;&gt;&lt;path fill=&quot;white&quot; d=&quot;M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); + url(&#39;data:image&#47;svg+xml;utf8,&#60;svg xmlns="http:&#47;&#47;www.w3.org&#47;2000&#47;svg" width="25.948661" height="19.888393" viewBox="2.025670 -40.011161 25.948661 19.888393"&#62;&#60;path fill="white" d="M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232"&#62;&#60;&#47;path&#62;&#60;&#47;svg&#62;&#39;); border-color: mediumpurple; } </code></pre> -<h3>The total cost container</h3> -<p>We only need some very basic flexbox styling for our bottom "total" container:</p> + +<h3 id="the-total-cost-container">The total cost container</h3> + +<p>We only need some very basic flexbox styling for our bottom &#8220;total&#8221; container:</p> + <pre><code>.total-cost { align-items: baseline; border-top: 1px solid lightgrey; @@ -7739,21 +10114,24 @@ update the inline SVG to use a checkmark symbol font-weight: bold; } -/* +&#47;* This input is used in our JavaScript - look at the function part of this post to understand why -*/ +*&#47; .total-cost input { display: none; } </code></pre> -<h3>Last but not least - mobile</h3> + +<h3 id="last-but-not-least---mobile">Last but not least - mobile</h3> + <p>Now we just ensure that on smaller devices our checkbox labels render nicely:</p> + <pre><code>@media(max-width:480px) { - /* + &#47;* Avoids the inner label content from squishing together and becoming unreadable - */ + *&#47; .checkbox-label { align-items: flex-start; flex-direction: column; @@ -7764,298 +10142,407 @@ function part of this post to understand why } } </code></pre> -<p>That's it for the styling!</p> -<h2>The Function (JS)</h2> -<p>As you can see below, we only need a very minor amount of JavaScript to accomplish our total cost "injection".</p> + +<p>That&#8217;s it for the styling!</p> + +<h2 id="the-function-js">The Function (JS)</h2> + +<p>As you can see below, we only need a very minor amount of JavaScript to accomplish our total cost &#8220;injection&#8221;.</p> + <pre><code>window.onload=function(){ -// Place the default browser checkbox inputs into a variable -var inputs = document.getElementsByClassName('checkbox-btn') +&#47;&#47; Place the default browser checkbox inputs into a variable +var inputs = document.getElementsByClassName(&#39;checkbox-btn&#39;) -// Now we loop through the inputs and check if they are -// greater than zero. If so, we run our function. -for (var i=0; i &lt; inputs.length; i++) { +&#47;&#47; Now we loop through the inputs and check if they are +&#47;&#47; greater than zero. If so, we run our function. +for (var i=0; i &#60; inputs.length; i++) { inputs[i].onchange = function() { - // Create `add` variable which takes the :checked input value + &#47;&#47; Create `add` variable which takes the :checked input value var add = this.value * (this.checked ? 1 : -1); - // We grab the current total value on our hidden input field and return it - // as a floating point number - // (since in this use case it will be a price number based on currency) - var new_total = parseFloat(document.getElementById('output').value); + &#47;&#47; We grab the current total value on our hidden input field and return it + &#47;&#47; as a floating point number + &#47;&#47; (since in this use case it will be a price number based on currency) + var new_total = parseFloat(document.getElementById(&#39;output&#39;).value); - // Now we simply add the existing total value with the newly &quot;:checked&quot; input value - var updated_total = document.getElementById('output').value=new_total + add + &#47;&#47; Now we simply add the existing total value with the newly ":checked" input value + var updated_total = document.getElementById(&#39;output&#39;).value=new_total + add - // Place the new updated total directly inside the `total-cost-inner` span element - document.getElementById('total-cost-inner').innerHTML = updated_total; + &#47;&#47; Place the new updated total directly inside the `total-cost-inner` span element + document.getElementById(&#39;total-cost-inner&#39;).innerHTML = updated_total; } } } </code></pre> -<p>That's it! Feel free to play with the demo some more at the top of the post, or check out the <a href="https://codepen.io/bradleytaunt/pen/rXWEpy">CodePen source directly</a>.</p></content> - <link href="https://bt.ht/dynamic-checkboxes"/> - <id>https://bt.ht/dynamic-checkboxes</id> + +<p>That&#8217;s it! Feel free to play with the demo some more at the top of the post, or check out the <a href="https://codepen.io/bradleytaunt/pen/rXWEpy">CodePen source directly</a>.</p></content> + <link href="https://btxx.org/dynamic-checkboxes"/> + <id>https://btxx.org/dynamic-checkboxes</id> <updated>2019-07-30T10:00:00Z</updated> <published>2019-07-30T10:00:00Z</published> </entry> <entry> <title>Bringing dwm Shortcuts to GNOME</title> - <content type="html"><h1>Bringing dwm Shortcuts to GNOME</h1> + <content type="html"><h1 id="bringing-dwm-shortcuts-to-gnome">Bringing dwm Shortcuts to GNOME</h1> + <p>2023-11-02</p> -<p>The <code>dwm</code> window manager is my standard "go-to" for most of my personal laptop environments. For desktops with larger, higher resolution monitors I tend to lean towards using GNOME. The GNOME DE is fairly solid for my own purposes. This article isn't going to deep dive into GNOME itself, but instead highlight some minor configuration changes I make to mimic a few <code>dwm</code> shortcuts.</p> -<p>For reference, I'm running GNOME 45.0 on Ubuntu 23.10</p> -<h2>Setting Up Fixed Workspaces</h2> -<p>When I use <code>dwm</code> I tend to have a hard-set amount of <code>tags</code> to cycle through (normally 4-5). Unfortunately, dynamic rendering is the default for workspaces (ie. tags) in GNOME. For my personal preference I set this setting to <code>fixed</code>. We can achieve this by opening <strong>Settings</strong> &gt; <strong>Multitasking</strong> and selecting "Fixed number of workspaces".</p> -<p><figure> - <img src="/public/images/gnome-1.png" alt="Screenshot of GNOME's Multitasking Settings GUI"> - <figcaption>Screenshot of GNOME's Multitasking Settings GUI</figcaption> -</figure></p> -<h2>Setting Our Keybindings</h2> -<p>Now all that is left is to mimic <code>dwm</code> keyboard shortcuts, in this case: <kbd>ALT</kbd> + <kbd>$num</kbd> for switching between workspaces and <kbd>ALT</kbd> + <kbd>SHIFT</kbd> + <kbd>$num</kbd> for moving windows across workspaces. These keyboard shortcuts can be altered under <strong>Settings</strong> &gt; <strong>Keyboard</strong> &gt; <strong>View and Customize Shortcuts</strong> &gt; <strong>Navigation</strong>.</p> -<p>You'll want to make edits to both the "Switch to workspace <em>n</em>" and "Move window to workspace <em>n</em>". </p> -<p><figure> - <img src="/public/images/gnome-2.png" alt="Screenshot of GNOME's keyboard shortcut GUI"> - <figcaption>Screenshot of GNOME's keyboard shortcut GUI: switch to workspace</figcaption> -</figure></p> -<p><figure> - <img src="/public/images/gnome-3.png" alt="Screenshot of GNOME's keyboard shortcut GUI"> - <figcaption>Screenshot of GNOME's keyboard shortcut GUI: move window to workspace</figcaption> -</figure></p> -<p>That's it. You're free to include even more custom keyboard shortcuts (open web browser, lock screen, hibernate, etc.) but this is a solid starting point. Enjoy tweaking GNOME!</p></content> - <link href="https://bt.ht/dwm-gnome"/> - <id>https://bt.ht/dwm-gnome</id> + +<p>The <code>dwm</code> window manager is my standard &#8220;go-to&#8221; for most of my personal laptop environments. For desktops with larger, higher resolution monitors I tend to lean towards using GNOME. The GNOME DE is fairly solid for my own purposes. This article isn&#8217;t going to deep dive into GNOME itself, but instead highlight some minor configuration changes I make to mimic a few <code>dwm</code> shortcuts.</p> + +<p>For reference, I&#8217;m running GNOME 45.0 on Ubuntu 23.10</p> + +<h2 id="setting-up-fixed-workspaces">Setting Up Fixed Workspaces</h2> + +<p>When I use <code>dwm</code> I tend to have a hard-set amount of <code>tags</code> to cycle through (normally 4-5). Unfortunately, dynamic rendering is the default for workspaces (ie. tags) in GNOME. For my personal preference I set this setting to <code>fixed</code>. We can achieve this by opening <strong>Settings</strong> &#62; <strong>Multitasking</strong> and selecting &#8220;Fixed number of workspaces&#8221;.</p> + +<h2 id="setting-our-keybindings">Setting Our Keybindings</h2> + +<p>Now all that is left is to mimic <code>dwm</code> keyboard shortcuts, in this case: ALT + $num for switching between workspaces and ALT + SHIFT + $num for moving windows across workspaces. These keyboard shortcuts can be altered under <strong>Settings</strong> &#62; <strong>Keyboard</strong> &#62; <strong>View and Customize Shortcuts</strong> &#62; <strong>Navigation</strong>.</p> + +<p>You&#8217;ll want to make edits to both the &#8220;Switch to workspace <em>n</em>&#8221; and &#8220;Move window to workspace <em>n</em>&#8221;. </p> + +<p>That&#8217;s it. You&#8217;re free to include even more custom keyboard shortcuts (open web browser, lock screen, hibernate, etc.) but this is a solid starting point. Enjoy tweaking GNOME!</p></content> + <link href="https://btxx.org/dwm-gnome"/> + <id>https://btxx.org/dwm-gnome</id> <updated>2023-11-02T10:00:00Z</updated> <published>2023-11-02T10:00:00Z</published> </entry> <entry> <title>Dynamic Viewports with CSS</title> - <content type="html"><h1>Dynamic Viewports with CSS</h1> + <content type="html"><h1 id="dynamic-viewports-with-css">Dynamic Viewports with CSS</h1> + <p>2023-02-08</p> -<p>I think it's safe to assume most web designers and developers are familiar with the standard <code>vh</code> and <code>vw</code> parameters in CSS. These parameters are used for setting an element's height and/or width, relative to the viewport (v) height (h) or width (w). For example:</p> -<p>If I want my <code>.box</code> element to take up the entire height of a device's screen:</p> + +<p>I think it&#8217;s safe to assume most web designers and developers are familiar with the standard <code>vh</code> and <code>vw</code> parameters in CSS. These parameters are used for setting an element&#8217;s height and&#47;or width, relative to the viewport (v) height (h) or width (w). For example:</p> + +<p>If I want my <code>.box</code> element to take up the entire height of a device&#8217;s screen:</p> + <pre><code>.box { height: 100vh; } </code></pre> -<p>Or I want my <code>.box</code> element to take up the entire width of a device's screen:</p> + +<p>Or I want my <code>.box</code> element to take up the entire width of a device&#8217;s screen:</p> + <pre><code>.box { width: 100vw; } </code></pre> + <p>These are wonderful options to have - specifically for those of us designing web applications. But there are some <em>minor</em> issues with <code>vh</code> and <code>vw</code>.</p> + <ol> <li>The setting does not take into account device-specific UI (status bars, toolbars, search fields etc.)</li> <li>In some instances these will not play nice with <code>box-sizing</code> properties</li> </ol> -<h2>Have No Fear, Dynamic Viewport is Here!</h2> -<p>Lucky for us there exists an awesome <em>new-ish</em> CSS API called dynamic viewport-percentage units: <code>dvh</code> &amp; <code>dvw</code>. They are defined as follows:</p> -<blockquote><p>The dynamic viewport-percentage units (dv) are defined with respect to the dynamic viewport size: the viewport sized with dynamic consideration of any UA interfaces that are dynamically expanded and retracted. This allows authors to size content such that it can exactly fit within the viewport whether or not such interfaces are present.</p> + +<h2 id="have-no-fear-dynamic-viewport-is-here">Have No Fear, Dynamic Viewport is Here!</h2> + +<p>Lucky for us there exists an awesome <em>new-ish</em> CSS API called dynamic viewport-percentage units: <code>dvh</code> &#38; <code>dvw</code>. They are defined as follows:</p> + +<blockquote> +<p>The dynamic viewport-percentage units (dv) are defined with respect to the dynamic viewport size: the viewport sized with dynamic consideration of any UA interfaces that are dynamically expanded and retracted. This allows authors to size content such that it can exactly fit within the viewport whether or not such interfaces are present.</p> </blockquote> + <p>So our examples above would translate into:</p> + <pre><code>.box { height: 100dvh; width: 100dvw; } </code></pre> -<h3>What About Browser Support?</h3> -<p><a href="https://caniuse.com/mdn-api_css_dvh">Can I Use Stats</a> / ~67.17% coverage.</p> -<p><strong>Note:</strong> Even though the caniuse page states that Firefox 109+ and iOS Safari 16.3 do not support <code>dvh</code>, in my experiments they do. I'm not sure what testing was done for those two browsers, so YMMV.</p> -<p>If you want to play it safe, use dynamic viewports with standard "traditional" viewports as backup. That way you support all use cases while still taking advantage of newer CSS properties.</p></content> - <link href="https://bt.ht/dv"/> - <id>https://bt.ht/dv</id> + +<h3 id="what-about-browser-support">What About Browser Support?</h3> + +<p><a href="https://caniuse.com/mdn-api_css_dvh">Can I Use Stats</a> &#47; ~67.17% coverage.</p> + +<p><strong>Note:</strong> Even though the caniuse page states that Firefox 109+ and iOS Safari 16.3 do not support <code>dvh</code>, in my experiments they do. I&#8217;m not sure what testing was done for those two browsers, so YMMV.</p> + +<p>If you want to play it safe, use dynamic viewports with standard &#8220;traditional&#8221; viewports as backup. That way you support all use cases while still taking advantage of newer CSS properties.</p></content> + <link href="https://btxx.org/dv"/> + <id>https://btxx.org/dv</id> <updated>2023-02-08T10:00:00Z</updated> <published>2023-02-08T10:00:00Z</published> </entry> <entry> <title>Don't Make a Blog, Make a Brain Dump</title> - <content type="html"><h1>Don't Make a Blog, Make a Brain Dump</h1> + <content type="html"><h1 id="dont-make-a-blog-make-a-brain-dump">Don&#8217;t Make a Blog, Make a Brain Dump</h1> + <p>2022-09-10</p> -<p>Not enough people have personal blogs. This is a point brought up by many of those passionate about the "golden age" in the timeline of the modern internet. A time when websites were more like a small collection of winding side-streets and flea markets. Today, it's all shopping malls, hostile pedestrians, and corporate buildings. People have their one or two "outlets" that make it easier for them to meet-up with friends and family. There's no need for these people to have their "own thing". Someone else has already built it for them. They're become fully adjusted to their internet slums.</p> + +<p>Not enough people have personal blogs. This is a point brought up by many of those passionate about the &#8220;golden age&#8221; in the timeline of the modern internet. A time when websites were more like a small collection of winding side-streets and flea markets. Today, it&#8217;s all shopping malls, hostile pedestrians, and corporate buildings. People have their one or two &#8220;outlets&#8221; that make it easier for them to meet-up with friends and family. There&#8217;s no need for these people to have their &#8220;own thing&#8221;. Someone else has already built it for them. They&#8217;re become fully adjusted to their internet slums.</p> + <p>Okay, sorry about the terrible metaphors. But you get my point. <em>Convenience breeds laziness</em>. <em>Laziness breeds mediocrity</em>.</p> -<h2>What's a "Brain Dump"?</h2> -<p>A brain dump is a better way to look at sharing your own experiences or thoughts on the web. The term "blog" has a lot of baggage connected to it, so newcomers are quickly scared away by the concept. Or even worse - they decide to only share themselves on locked-in, walled gardens[^1].</p> -<p>Another problem arises when you finally <em>do</em> convince someone to start "blogging" online; self-doubt.</p> -<ul> -<li>"What could I possibly have to share?"</li> -<li>"What if everyone <em>hates</em> what I post?"</li> -<li>"What if my content sucks?"</li> -</ul> -<p>Just dump it. Who cares. It's the internet after all, so who are you trying to impress? The point is that your sharing your own experiences that are unique to you as an individual. Posting something that you think is pointless or mundane might be extremely helpful or, at the very least, entertaining for someone else.</p> -<p>Write up what you did over the weekend, a new recipe you tried out, review a movie/book or video game you enjoyed, list step-by-step instructions on how you installed a new appliance in your house - anything! Just <em>write</em> and be part of what made the internet fun, exciting and personal again.</p> -<p>But let me reiterate: <strong>stay away from walled gardens!</strong> Control your own space on the internet. Be the master of your own brain dump! Say "screw you" to app algorithms and <em>trending</em> bullshit. Just be you.</p> -<p>Convinced? Awesome. Now let's get into setting things up. I'll break these down into two separate categories: one for those with limited web/software experience, and one for those wanting a little more control.</p> -<h3>No Code Solutions</h3> -<p>Before I get into my suggested options in this "no-code" category, I would like to mention why WordPress <em>is not</em> listed here. Personally, I think WordPress gets in the way of users wanting to "just blog". There once was an era where blogging was WP's main focus, but that is now a time long forgotten. It tries to do too much. The back-end is a cluttered mess. Initial learning curves for security, plugins and themes is far too great for newbies. Gutenberg - dear God.</p> -<p>That's not even mentioning hosting costs, installation, backups, etc. My personal take - just steer clear. This option is better suited in the <em>second</em> category for those with more web experience.</p> -<p>With that out of the way, let's see my top selections for "no-code":</p> -<h4>Blot</h4> + +<h2 id="whats-a-brain-dump">What&#8217;s a &#8220;Brain Dump&#8221;?</h2> + +<p>A brain dump is a better way to look at sharing your own experiences or thoughts on the web. The term &#8220;blog&#8221; has a lot of baggage connected to it, so newcomers are quickly scared away by the concept. Or even worse - they decide to only share themselves on locked-in, walled gardens<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>.</p> + +<p>Another problem arises when you finally <em>do</em> convince someone to start &#8220;blogging&#8221; online; self-doubt.</p> + +<ul> +<li>&#8220;What could I possibly have to share?&#8221;</li> +<li>&#8220;What if everyone <em>hates</em> what I post?&#8221;</li> +<li>&#8220;What if my content sucks?&#8221;</li> +</ul> + +<p>Just dump it. Who cares. It&#8217;s the internet after all, so who are you trying to impress? The point is that your sharing your own experiences that are unique to you as an individual. Posting something that you think is pointless or mundane might be extremely helpful or, at the very least, entertaining for someone else.</p> + +<p>Write up what you did over the weekend, a new recipe you tried out, review a movie&#47;book or video game you enjoyed, list step-by-step instructions on how you installed a new appliance in your house - anything! Just <em>write</em> and be part of what made the internet fun, exciting and personal again.</p> + +<p>But let me reiterate: <strong>stay away from walled gardens!</strong> Control your own space on the internet. Be the master of your own brain dump! Say &#8220;screw you&#8221; to app algorithms and <em>trending</em> bullshit. Just be you.</p> + +<p>Convinced? Awesome. Now let&#8217;s get into setting things up. I&#8217;ll break these down into two separate categories: one for those with limited web&#47;software experience, and one for those wanting a little more control.</p> + +<h3 id="no-code-solutions">No Code Solutions</h3> + +<p>Before I get into my suggested options in this &#8220;no-code&#8221; category, I would like to mention why WordPress <em>is not</em> listed here. Personally, I think WordPress gets in the way of users wanting to &#8220;just blog&#8221;. There once was an era where blogging was WP&#8217;s main focus, but that is now a time long forgotten. It tries to do too much. The back-end is a cluttered mess. Initial learning curves for security, plugins and themes is far too great for newbies. Gutenberg - dear God.</p> + +<p>That&#8217;s not even mentioning hosting costs, installation, backups, etc. My personal take - just steer clear. This option is better suited in the <em>second</em> category for those with more web experience.</p> + +<p>With that out of the way, let&#8217;s see my top selections for &#8220;no-code&#8221;:</p> + +<h4 id="blot">Blot</h4> + <p><a href="https://blot.im/">Blot</a> has been around for quite a while. You simply post to a third-party service like Dropbox, Google Drive or a <code>git</code> repo and Blot takes care of the rest.</p> + <ul> -<li>$4/month (includes custom domain use, hosting &amp; support)</li> +<li>$4&#47;month (includes custom domain use, hosting &#38; support)</li> <li>Easy sign up</li> <li>Multiple themes to choose from</li> </ul> -<h4>Bear Blog</h4> + +<h4 id="bear-blog">Bear Blog</h4> + <p><a href="https://bearblog.dev/">Bear Blog</a> is an excellent platform that focuses on content and not much else.</p> + <ul> -<li>Free ($25/year for extras)</li> +<li>Free ($25&#47;year for extras)</li> <li>Easy sign up</li> <li>No trackers, no javascript, no ads</li> </ul> -<h4>Mataroa Blog</h4> + +<h4 id="mataroa-blog">Mataroa Blog</h4> + <p><a href="https://mataroa.blog/">Mataroa</a> follows in the same vein as Bear Blog, a simple blogging platform focused on <em>writing</em>.</p> + <ul> -<li>Free (with optional $9/year for premium features)</li> +<li>Free (with optional $9&#47;year for premium features)</li> <li>No ads, no tracking</li> <li>Open source</li> </ul> -<h4>Write.as</h4> + +<h4 id="write.as">Write.as</h4> + <p><a href="https://write.as/">Write.as</a> is another good option for those looking to just get words down and shared on the internet.</p> + <ul> <li>Free with optional paid tiers (custom domains, themes etc.)</li> <li>Option to self host via <a href="https://writefreely.org/">Write Freely</a></li> </ul> -<h3>Build Your Own</h3> -<p>If you're deep into this section of the post, I think it's safe to assume your technical level is fairly <em>decent</em>. So, I won't be into great detail with the options below:</p> -<h4>SourceHut Pages</h4> -<p>This very website you're reading is built and run off of <a href="https://srht.site/">SourceHut Pages</a>. I highly recommend the service.</p> + +<h3 id="build-your-own">Build Your Own</h3> + +<p>If you&#8217;re deep into this section of the post, I think it&#8217;s safe to assume your technical level is fairly <em>decent</em>. So, I won&#8217;t be into great detail with the options below:</p> + +<h4 id="sourcehut-pages">SourceHut Pages</h4> + +<p>This very website you&#8217;re reading is built and run off of <a href="https://srht.site/">SourceHut Pages</a>. I highly recommend the service.</p> + <ul> -<li>$3+/month (depending on what you <em>choose</em> to pay)</li> +<li>$3+&#47;month (depending on what you <em>choose</em> to pay)</li> <li>No javascript, no trackers</li> <li>Customizable build settings</li> <li>Support open source software!</li> </ul> -<p><strong>Sidenote:</strong> If you're interested in setting up a SSG (such as Jekyll or Hugo) through SourceHut, feel free to <a href="https://git.sr.ht/~bt/bt.ht">fork this very website as a starting point</a>. I also wrote up how to publish/build a Jekyll site on SourceHut in a <a href="/srht">separate post</a> if you wish to see all the nitty-gritty details.</p> -<h4>WordPress</h4> -<p>As I mentioned above, I find this platform can be a little overkill for a simple "blog" (or in this case, a brain dump). I'm aware that many devs might already be familiar with WP, so it makes sense to include it here.</p> + +<p><strong>Sidenote:</strong> If you&#8217;re interested in setting up a SSG (such as Jekyll or Hugo) through SourceHut, feel free to <a href="https://git.sr.ht/~bt/bt.ht">fork this very website as a starting point</a>. I also wrote up how to publish&#47;build a Jekyll site on SourceHut in a <a href="/srht">separate post</a> if you wish to see all the nitty-gritty details.</p> + +<h4 id="wordpress">WordPress</h4> + +<p>As I mentioned above, I find this platform can be a little overkill for a simple &#8220;blog&#8221; (or in this case, a brain dump). I&#8217;m aware that many devs might already be familiar with WP, so it makes sense to include it here.</p> + <ul> <li>Free options (custom domains, premium features will require some form of paid hosting)</li> -<li>Room for growth with extensive plugins / themes</li> +<li>Room for growth with extensive plugins &#47; themes</li> <li>Huge amount of documentation and resources</li> </ul> -<h4>Static HTML and a Web Host</h4> -<p>Why not, right? Using a service like <a href="https://www.nearlyfreespeech.net/">NearlyFreeSpeech</a> or spinning up a cheap VPS with <a href="https://www.digitalocean.com/">DigitalOcean</a> and then dropping static HTML files on your server is pretty straightforward. You don't need any fancy scripts or syncing tools - an FTP client and a text editor is more than enough!</p> + +<h4 id="static-html-and-a-web-host">Static HTML and a Web Host</h4> + +<p>Why not, right? Using a service like <a href="https://www.nearlyfreespeech.net/">NearlyFreeSpeech</a> or spinning up a cheap VPS with <a href="https://www.digitalocean.com/">DigitalOcean</a> and then dropping static HTML files on your server is pretty straightforward. You don&#8217;t need any fancy scripts or syncing tools - an FTP client and a text editor is more than enough!</p> + <ul> -<li>$2-5/month (depending on service provider)</li> -<li>"Drag-and-drop" workflow</li> +<li>$2-5&#47;month (depending on service provider)</li> +<li>&#8220;Drag-and-drop&#8221; workflow</li> <li>Easily portable to other hosting services in the future</li> </ul> -<h4>GitHub Pages</h4> -<p>Since GitHub is used by almost every developer across the globe, it makes sense to mention their free website hosting option via <a href="https://pages.github.com/">GitHub Pages</a>. I personally <em>don't</em> advise newcomers to use this platform, but you're free to do as you like!</p> + +<h4 id="github-pages">GitHub Pages</h4> + +<p>Since GitHub is used by almost every developer across the globe, it makes sense to mention their free website hosting option via <a href="https://pages.github.com/">GitHub Pages</a>. I personally <em>don&#8217;t</em> advise newcomers to use this platform, but you&#8217;re free to do as you like!</p> + <ul> -<li>"Free"</li> +<li>&#8220;Free&#8221;</li> <li>Fairly limited (no static site plugin support)</li> </ul> -<h2>Wrapping Up</h2> -<p>There are many services in both categories above that I did not include. That's okay. I didn't exclude them because I <em>dislike</em> them but instead focused on what <em>I believe</em> to be the easiest solutions for both camps (techies and non-techies).</p> -<p>At the end of the day - who cares what you choose. Just choose <em>something</em>. Stop looking at it as "blogging" or trying to "capture an audience". Dump your brain's thoughts out into the internet, on your <em>own piece</em> of the internet, and help make the world wide web as fun as it used to be!</p> -<p>[^1]: Facebook, Twitter, Reddit, Instagram, etc. These should be completely avoided for the sake of both your health and your internet freedom.</p></content> - <link href="https://bt.ht/dump"/> - <id>https://bt.ht/dump</id> + +<h2 id="wrapping-up">Wrapping Up</h2> + +<p>There are many services in both categories above that I did not include. That&#8217;s okay. I didn&#8217;t exclude them because I <em>dislike</em> them but instead focused on what <em>I believe</em> to be the easiest solutions for both camps (techies and non-techies).</p> + +<p>At the end of the day - who cares what you choose. Just choose <em>something</em>. Stop looking at it as &#8220;blogging&#8221; or trying to &#8220;capture an audience&#8221;. Dump your brain&#8217;s thoughts out into the internet, on your <em>own piece</em> of the internet, and help make the world wide web as fun as it used to be!</p> + +<div class="footnotes"> +<hr/> +<ol> + +<li id="fn1"> +<p>Facebook, Twitter, Reddit, Instagram, etc. These should be completely avoided for the sake of both your health and your internet freedom.&#160;<a href="#fnref1" rev="footnote">&#8617;</a></p> +</li> + +</ol> +</div></content> + <link href="https://btxx.org/dump"/> + <id>https://btxx.org/dump</id> <updated>2022-09-10T10:00:00Z</updated> <published>2022-09-10T10:00:00Z</published> </entry> <entry> <title>Two Weeks with the DuckDuckGo Browser</title> - <content type="html"><h1>Two Weeks with the DuckDuckGo Browser</h1> + <content type="html"><h1 id="two-weeks-with-the-duckduckgo-browser">Two Weeks with the DuckDuckGo Browser</h1> + <p>2022-05-17</p> + <p>After using the beta apps for the new DuckDuckGo browser for both macOS and iOS, I have returned to Safari.</p> -<p>This switch back doesn't mean that these browsers are <em>bad</em> by any means. Both browsers are decently fine for casual users. Unfortunately, they aren't ready for prime time "power" users. I'm happy to see another company jump into the browser market (and one that is using WebKit instead of another Chromium clone) but for my day-to-day needs it doesn't cut it.</p> -<p>Let's break things down:</p> -<h2>The Good</h2> + +<p>This switch back doesn&#8217;t mean that these browsers are <em>bad</em> by any means. Both browsers are decently fine for casual users. Unfortunately, they aren&#8217;t ready for prime time &#8220;power&#8221; users. I&#8217;m happy to see another company jump into the browser market (and one that is using WebKit instead of another Chromium clone) but for my day-to-day needs it doesn&#8217;t cut it.</p> + +<p>Let&#8217;s break things down:</p> + +<h2 id="the-good">The Good</h2> + <ul> <li>Clean UI with a mix between Chrome and Safari</li> -<li>The "Leave No Trace" fire button to purge data, cache and cookies</li> +<li>The &#8220;Leave No Trace&#8221; fire button to purge data, cache and cookies</li> <li>Feels snappy and responsive</li> <li>Based on WebKit NOT Chromium</li> </ul> -<h2>The Not So Good</h2> + +<h2 id="the-not-so-good">The Not So Good</h2> + <ul> <li>No sync options between systems (that I could find)</li> <li>No extension support</li> </ul> -<p>Now you might look at this list and notice there are more listed points set under the <code>Good</code> category. Keep in mind that quantity does not always equal quality. The main negative of not allowing user extensions cannot be overstated. I think that when building a browser in this $CURRENT<em>YEAR it's imperative to allow for total user control. Don't wall things off. Don't </em>assume<em></em>you know best for your users.</p> + +<p>Now you might look at this list and notice there are more listed points set under the <code>Good</code> category. Keep in mind that quantity does not always equal quality. The main negative of not allowing user extensions cannot be overstated. I think that when building a browser in this $CURRENT_YEAR it&#8217;s imperative to allow for total user control. Don&#8217;t wall things off. Don&#8217;t <em>assume</em> you know best for your users.</p> + <p>This is a huge issue since a good majority of friends, family and coworkers I talk with use more elaborate ad-blocking. One of the first things I tested with the DuckDuckGo browser on desktop was to watch a YouTube video. I was immediately slammed with multiple ads - both in video form and as banner pop-ups.</p> -<p>Overlooks like this shouldn't happen. This is UX 101.</p> -<p>Another obvious overlook is history and account syncing across devices. Unless I missed something obvious, I could not figure out how to seamlessly sync content from my macOS browser to my iOS one. Again, this function greatly improves the experience of jumping between desktop and mobile clients. Don't make me think![^1]</p> -<h2>Closing Thoughts</h2> -<p>I appreciate the effort from the DuckDuckGo team. I'm certain this project will get better over time, as they are listening closely to user feedback during the beta. With future improvements I could see myself giving things a second chance.</p> + +<p>Overlooks like this shouldn&#8217;t happen. This is UX 101.</p> + +<p>Another obvious overlook is history and account syncing across devices. Unless I missed something obvious, I could not figure out how to seamlessly sync content from my macOS browser to my iOS one. Again, this function greatly improves the experience of jumping between desktop and mobile clients. Don&#8217;t make me think![^1]</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>I appreciate the effort from the DuckDuckGo team. I&#8217;m certain this project will get better over time, as they are listening closely to user feedback during the beta. With future improvements I could see myself giving things a second chance.</p> + <p>As it stands now, this feels like something that should be an extension[^2], not a standalone browser.</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li><a href="https://sensible.com/dont-make-me-think/">https://sensible.com/dont-make-me-think/</a></li> +<li><a href="https://sensible.com/dont-make-me-think/">https:&#47;&#47;sensible.com&#47;dont-make-me-think&#47;</a></li> <li>Technically this already exists as a Safari extension <a href="https://apps.apple.com/us/app/duckduckgo-privacy-essentials/id1482920575?mt=12">here</a></li> </ol></content> - <link href="https://bt.ht/duckduckno"/> - <id>https://bt.ht/duckduckno</id> + <link href="https://btxx.org/duckduckno"/> + <id>https://btxx.org/duckduckno</id> <updated>2022-05-17T10:00:00Z</updated> <published>2022-05-17T10:00:00Z</published> </entry> <entry> <title>Designers Need Thicker Skin</title> - <content type="html"><h1>Designers Need Thicker Skin</h1> + <content type="html"><h1 id="designers-need-thicker-skin">Designers Need Thicker Skin</h1> + <p>2017-07-10</p> -<p>I'm not normally one to comment or even really care about "drama" within our design industry. Opinions are just that and should just be consumed at face value. But this week I was moderately annoyed with a subset of designers in design-land.</p> -<h3>Critique the critics</h3> -<p>Designer/design critic Eli Schiff tweeted his thoughts about the newly released promo video from Framer showcasing their new gradient feature. See the initial tweet below:</p> -<p><figure> - <img src="/public/images/eli-schiff-twitter.webp" alt="Eli's Tweet"> - <figcaption>Eli Schiff just telling it how it is.</figcaption> -</figure></p> -<p>Let me begin by saying my views on this comment: I don't care. I honestly don’t feel strongly one way or the other about them making a video promo for gradients. Could it have just been a simple text tweet? Sure. Does it really matter that they decided to make a video for it? Not at all.</p> + +<p>I&#8217;m not normally one to comment or even really care about &#8220;drama&#8221; within our design industry. Opinions are just that and should just be consumed at face value. But this week I was moderately annoyed with a subset of designers in design-land.</p> + +<h3 id="critique-the-critics">Critique the critics</h3> + +<p>Designer&#47;design critic Eli Schiff tweeted his thoughts about the newly released promo video from Framer showcasing their new gradient feature. See the initial tweet below:</p> + +<p>Let me begin by saying my views on this comment: I don&#8217;t care. I honestly don’t feel strongly one way or the other about them making a video promo for gradients. Could it have just been a simple text tweet? Sure. Does it really matter that they decided to make a video for it? Not at all.</p> + <p>But this isn’t the problem.</p> -<p>Other designers took to Twitter and started attacking Eli, not even as a design critic but as a person. This was ugly to see. What happened to civil discussion and giving the other side a chance to say their piece? Calling to "ban him" from sites such as DesignerNews or suggesting to unfollow him on Twitter is unbelievably childish - in an industry that we tote as "accepting of everyone" no less.</p> -<p>That's all I'm going to say because I don’t want to spend too much time on this foolishness, but honestly designers - get some thicker skin.</p> + +<p>Other designers took to Twitter and started attacking Eli, not even as a design critic but as a person. This was ugly to see. What happened to civil discussion and giving the other side a chance to say their piece? Calling to &#8220;ban him&#8221; from sites such as DesignerNews or suggesting to unfollow him on Twitter is unbelievably childish - in an industry that we tote as &#8220;accepting of everyone&#8221; no less.</p> + +<p>That&#8217;s all I&#8217;m going to say because I don’t want to spend too much time on this foolishness, but honestly designers - get some thicker skin.</p> + <p>Yeesh.</p></content> - <link href="https://bt.ht/dts"/> - <id>https://bt.ht/dts</id> + <link href="https://btxx.org/dts"/> + <id>https://btxx.org/dts</id> <updated>2017-07-10T10:00:00Z</updated> <published>2017-07-10T10:00:00Z</published> </entry> <entry> <title>Disabling Comments in WordPress</title> - <content type="html"><h1>Disabling Comments in WordPress</h1> + <content type="html"><h1 id="disabling-comments-in-wordpress">Disabling Comments in WordPress</h1> + <p>2020-12-28</p> + <p><em>I seem to come across a decent amount of clients</em> and users online that have a difficult time knowing how to disable comments for both future <em>and</em> previous blog posts. It isn’t the easiest for both use cases, so let’s break it down.</p> -<h2>Back to the future</h2> + +<h2 id="back-to-the-future">Back to the future</h2> + <p>Disabling comments on all <em>future</em> blog posts is fairly straightforward:</p> -<p><ol><li>Navigate to your WordPress admin dashboard</li><li>Go to <strong>Settings</strong> &gt; <strong>Discussion</strong></li><li>Uncheck <strong>Allow people to submit comments on new posts</strong></li><li>That’s it!</li></ol></p> -<h2>But what about old posts?</h2> + +<h2 id="but-what-about-old-posts">But what about old posts?</h2> + <p>Have no fear - “Bulk Actions” are here to save the day! In order to retroactively disable comments on older posts, do the following:</p> -<p><ol><li>Navigate to <strong>Posts</strong></li><li>Select the specific posts you would like to disable comments on (or select all of them)</li><li>Click the <strong>Bulk Actions</strong> drop-down menu and choose <strong>Edit</strong></li><li>Press <strong>Apply</strong></li><li>In the <strong>Bulk Edit</strong> view, look for the <strong>Comments</strong> drop-down </li><li>Select <strong>Do Not Allow</strong> and click <strong>Update</strong></li><li>That’s it!</li><div></div></ol></p> + <p>I hope this article saves others any headaches in the future. WordPress itself could certainly make this more streamlined, but for now what we have works. Happy (not) commenting!</p></content> - <link href="https://bt.ht/disabling-comments-in-wordpress"/> - <id>https://bt.ht/disabling-comments-in-wordpress</id> + <link href="https://btxx.org/disabling-comments-in-wordpress"/> + <id>https://btxx.org/disabling-comments-in-wordpress</id> <updated>2020-12-28T10:00:00Z</updated> <published>2020-12-28T10:00:00Z</published> </entry> <entry> <title>Unsolicited Design Review - Dropbox</title> - <content type="html"><h1>Unsolicited Design Review - Dropbox</h1> + <content type="html"><h1 id="unsolicited-design-review---dropbox">Unsolicited Design Review - Dropbox</h1> + <p>2017-10-10</p> -<p>Earlier last week the design team at Dropbox unveiled their new branding / design system for the company as a whole. If you haven't seen the updated design yet, you can do so here: <a href="https://dropbox.design/">dropbox.design</a> (Take your time, I can wait).</p> + +<p>Earlier last week the design team at Dropbox unveiled their new branding &#47; design system for the company as a whole. If you haven&#8217;t seen the updated design yet, you can do so here: dropbox.design (Take your time, I can wait).</p> + <p><img src="/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp" alt="Dropbox Logo" /></p> -<p>I won't mince words when I say I believe this is a huge step backwards for their brand. Not only is it uninspired and broken, but it also shows how our industry is plagued with a need to redesign things just for the sake of redesigning them.</p> -<p>So without anymore fluff - let's get into it. Please leave your bias at the door.</p> -<h2>Purpose</h2> -<p>It's good to try and understand the motive or problem that a company is trying to solve when redesigning something as fundamental as core branding, but this is where the first red flag appears for Dropbox. There is <i>no real problem to solve</i>.</p> -<p>On the marketing site promoting the new design system, the Dropbox team doesn't mention a single problem that this branding redesign is meant to fix. Were users confused by the previous system? Is there data showing large drop-off and a lack of conversion directly connected with the design system itself? All they state is they needed a change with zero reasoning as to why.</p> -<p><blockquote> - <p>We realized our brand needs to change</p> -</blockquote></p> -<p>As I stated at the beginning of this review - it's a redesign for the sake of a redesign. Sometimes this can be acceptable if done correctly, but this is not the case for Dropbox.</p> -<p><blockquote> - <p>Our new brand system shows that Dropbox isn't just a place to store your files - <strong>it's a living workspace that brings teams and ideas together</strong>.</p> - <cite><a href="https://dropbox.design/">Dropbox marketing website</a></cite> -</blockquote></p> -<p>Let's stop right there. "A place to store your files" is literally 99% of what Dropbox does. I get that they want to be involved in more than that but Dropbox <i>is</i> a cloud storage service. Why is there a desperate need to shift away from that?</p> -<p>There isn't much else to speak of in terms of 'purpose' regarding the redesign since there doesn't seem to be one. Let's move on.</p> -<h2>Design Principles</h2> + +<p>I won&#8217;t mince words when I say I believe this is a huge step backwards for their brand. Not only is it uninspired and broken, but it also shows how our industry is plagued with a need to redesign things just for the sake of redesigning them.</p> + +<p>So without anymore fluff - let&#8217;s get into it. Please leave your bias at the door.</p> + +<h2 id="purpose">Purpose</h2> + +<p>It&#8217;s good to try and understand the motive or problem that a company is trying to solve when redesigning something as fundamental as core branding, but this is where the first red flag appears for Dropbox. There is no real problem to solve.</p> + +<p>On the marketing site promoting the new design system, the Dropbox team doesn&#8217;t mention a single problem that this branding redesign is meant to fix. Were users confused by the previous system? Is there data showing large drop-off and a lack of conversion directly connected with the design system itself? All they state is they needed a change with zero reasoning as to why.</p> + +<p>As I stated at the beginning of this review - it&#8217;s a redesign for the sake of a redesign. Sometimes this can be acceptable if done correctly, but this is not the case for Dropbox.</p> + +<p>Let&#8217;s stop right there. &#8220;A place to store your files&#8221; is literally 99% of what Dropbox does. I get that they want to be involved in more than that but Dropbox is a cloud storage service. Why is there a desperate need to shift away from that?</p> + +<p>There isn&#8217;t much else to speak of in terms of &#8216;purpose&#8217; regarding the redesign since there doesn&#8217;t seem to be one. Let&#8217;s move on.</p> + +<h2 id="design-principles">Design Principles</h2> + <p>I hate to be that guy who bases design on a written list of principles, but when it works it works. Dieter Rams states it best:</p> + <ol> <li>Good design is innovative</li> <li>Good design makes a product useful</li> @@ -8066,91 +10553,84 @@ for (var i=0; i &lt; inputs.length; i++) { <li>Good design is long-lasting</li> <li>Good design is thorough down to the last detail</li> <li>Good design is environmentally friendly</li> -<li> Good design is as little design as possible</li> +<li>Good design is as little design as possible</li> </ol> -<p><p><strong>1. Good design is innovative</strong>. There is zero innovation in this re-brand, it's simply following the trend of quirky / brutal / modern flat elitism that is currently sweeping the industry. It's a fad and will be out-of-date rather quickly.</p></p> -<p><p><strong>2. Good design makes a product useful</strong>. Looking through their reasoning and explanations I can see no boost or improvement to the usefulness of the product. Not to repeat myself, but without any supporting data as to <i>why</i> this change was made we have nothing to base it off of.</p></p> -<p><p><strong>3. Good design is aesthetic</strong>. See #1.</p></p> -<p><p><strong>4. Good design makes a product understandable</strong>. Were customers not able to understand the Dropbox brand prior to this update? Were users misinformed about what the product could do for them? The previous design did a wonderful job of getting out of the way and showing the user exactly what they needed / wanted.</p></p> -<p><p><strong>5. Good design is unobtrusive</strong>. Talk about going backwards on this one. Original system was clean, readable and friendly to new users. Their current system uses an illegible typeface, colors with terrible contrast and a lack of support for the visually impaired, crude illustrations that give no explanation as to what they represent (more on that later), and a lack of browser support / performance issues.</p></p> -<p><p><strong>6. Good design is honest</strong>. Dropbox still maintains this principle. They don't over-promise or outright lie about who and what they are as a product.</p></p> -<p><p><strong>7. Good design is long-lasting</strong>. See #1 &amp; #3 again.</p></p> -<p><p><strong>8. Good design is thorough down to the last detail</strong>. The fact that even their marketing site crashes latest Firefox, lags on Safari for iOS and stutters in Chrome on desktop shows the lack of performance testing that was done. Not to mention the complete disregard for those with visual impairments with their color palette, typeface and contrast selections.</p></p> -<p><p><strong>9. Good design is environmentally friendly</strong>. Doesn't really apply here.</p></p> -<p><p><strong>10. Good design is as little design as possible</strong>. This new brand system is incredibly over-designed.</p></p> -<p><blockquote> - <p>Our users...tell us they feel overwhelmed and distracted during the workday...we want to change this, by building products and a brand that help people focus on meaningful work, instead of busywork.</p> -</blockquote></p> -<p>Then maybe your design system should get out of the way. To me, this seems like you want your design to take center-stage over the user's content.</p> -<p><strong>Remember: a great design system should go completely unnoticed.</strong></p> -<h2>Accessibility</h2> + +<p>Then maybe your design system should get out of the way. To me, this seems like you want your design to take center-stage over the user&#8217;s content.</p> + +<p>Remember: a great design system should go completely unnoticed.</p> + +<h2 id="accessibility">Accessibility</h2> + <p>Any persons with visual impairments need not apply. This design system is not built for you - seek shelter elsewhere.</p> -<p><blockquote> - <p>With 259 fonts, our new typeface Sharp Grotesk gives us lots of versatility, allowing us to "speak" in a variety of tones.</p> -</blockquote></p> -<p><figure> - <img src="/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp" alt="Dropbox Fonts"> - <figcaption>Not a single one of these typeface styles is initially readable</figcaption> -</figure></p> -<p>The typeface they have chosen looks terrible at any view-port size and readability takes a backseat. I can't help but feel this falls into the "let's be trendy" category and ends up sacrificing almost all good usability practices for gimmicky type.</p> -<p><blockquote> - <p>Our users run the gamut from business professionals to scientists and creative types. Most of these folks tell us they feel overwhelmed and distracted during the workday, and that this is one of the biggest barriers to creating work they’re proud of.</p> -</blockquote></p> -<p>Irony at it's finest. "Our users tell us that they hate being distracted and overwhelmed, so we've decided to use headache inducing color palettes, crude illustrations, a barely legible typeface, and some of the most visually loud photography throughout our system". I hate coming off as mean-spirited - but this is some elaborate joke, right?</p> -<p><figure> - <img src="/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp" alt="Dropbox Color Logos"> - <figcaption>Oh Dropbox...my eyes!</figcaption> -</figure></p> + +<p>The typeface they have chosen looks terrible at any view-port size and readability takes a backseat. I can&#8217;t help but feel this falls into the &#8220;let&#8217;s be trendy&#8221; category and ends up sacrificing almost all good usability practices for gimmicky type.</p> + +<p>Irony at it&#8217;s finest. &#8220;Our users tell us that they hate being distracted and overwhelmed, so we&#8217;ve decided to use headache inducing color palettes, crude illustrations, a barely legible typeface, and some of the most visually loud photography throughout our system&#8221;. I hate coming off as mean-spirited - but this is some elaborate joke, right?</p> + <p>After running it through a color contrast accessibility checker:</p> -<p><figure> - <img src="/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp" alt="Dropbox Contrast"> - <figcaption>Multiple accessibility failures</figcaption> -</figure></p> -<p>Next we have the child-like 'scribble' illustrations. Now don't get me wrong, I love seeing different illustration styles and I actively use 'sketch / scribble' artwork myself, but I don't believe this is the best fit for a brand like Dropbox. These cartoon visuals conflict with the business enterprise service Dropbox should be trying to convey.</p> + +<p>Next we have the child-like &#8216;scribble&#8217; illustrations. Now don&#8217;t get me wrong, I love seeing different illustration styles and I actively use &#8216;sketch &#47; scribble&#8217; artwork myself, but I don&#8217;t believe this is the best fit for a brand like Dropbox. These cartoon visuals conflict with the business enterprise service Dropbox should be trying to convey.</p> + <p>Another issue with these illustrations is their usage. Look at the image below and ask yourself if you would correlate it with an error page if no accompanying text was present.</p> -<p><figure> - <img src="/public/images/dropbox-404_bovayg_c_scale,w_758.webp" alt="Dropbox error page imagery"> - <figcaption>What does this have to do with a 404 error page?</figcaption> -</figure></p> -<h2>Closing Thoughts</h2> -<p>I could go into even deeper analysis (including the oversimplification of their box logo, etc.) but I believe I've spent enough time defending my initial reaction as well as my thoughts after a week of soak time. In my opinion this redesign was completely unnecessary. I think this was a problem of too many designers with too much time without a proper project to channel all that talent.</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>I could go into even deeper analysis (including the oversimplification of their box logo, etc.) but I believe I&#8217;ve spent enough time defending my initial reaction as well as my thoughts after a week of soak time. In my opinion this redesign was completely unnecessary. I think this was a problem of too many designers with too much time without a proper project to channel all that talent.</p> + <p>Unfortunately because they decided to just follow the current trend and design with a lack of purpose, I see Dropbox launching another redesign within the next year once this current design fad dies. My only hope is that the next brand system sets out to solve an actual problem, instead of just trying to be trendy.</p> -<h3>Personal Remarks</h3> -<p><i>I love Dropbox as a product and use it every single day. I'm inspired by many of the designers who work there and this article is by no means a personal attack on the company or it's employees. This is merely a blunt and honest review of their new brand design system.</i></p></content> - <link href="https://bt.ht/design-review-dropbox"/> - <id>https://bt.ht/design-review-dropbox</id> + +<h3 id="personal-remarks">Personal Remarks</h3> + +<p>I love Dropbox as a product and use it every single day. I&#8217;m inspired by many of the designers who work there and this article is by no means a personal attack on the company or it&#8217;s employees. This is merely a blunt and honest review of their new brand design system.</p></content> + <link href="https://btxx.org/design-review-dropbox"/> + <id>https://btxx.org/design-review-dropbox</id> <updated>2017-10-10T10:00:00Z</updated> <published>2017-10-10T10:00:00Z</published> </entry> <entry> <title>Modern Improvements for Default Browser Styles</title> - <content type="html"><h1>Modern Improvements for Default Browser Styles</h1> + <content type="html"><h1 id="modern-improvements-for-default-browser-styles">Modern Improvements for Default Browser Styles</h1> + <p>2021-11-09</p> -<p>This website <em>almost</em> exclusively uses the browser's (whichever one that might be) default styling to render it's HTML. I firmly believe, and have <a href="/css-js-mistake/">stated in a previous post</a>, that the default HTML styling across all browsers is a thing of beauty. "Consistent and boring" is how I tend to refer to default browser styles - and I mean that in a <em>good way</em>.</p> -<p>But that doesn't mean some minor, modern improvements couldn't be made...</p> -<h2>Boosting Margins and Increasing Font Size</h2> -<p>A little extra breathing room for a website's content never hurts. Browser defaults set the inner content too close to the main window borders, creating mild eye strain to focus on the far edges of the screen when reading. Pair this with a typeface set too small and you've got a recipe for disaster (in terms of user experience and accessibility). Luckily for us, adding two basic CSS properties fixes all of our readability woes. All that is required is a simple boost to the existing <code>margin</code> property set on the <code>body</code> element (I personally lean towards a very specific <code>1.5em</code>) and overriding the default <code>font-size</code> to <code>18px</code>[^1]:</p> + +<p>This website <em>almost</em> exclusively uses the browser&#8217;s (whichever one that might be) default styling to render it&#8217;s HTML. I firmly believe, and have <a href="/css-js-mistake/">stated in a previous post</a>, that the default HTML styling across all browsers is a thing of beauty. &#8220;Consistent and boring&#8221; is how I tend to refer to default browser styles - and I mean that in a <em>good way</em>.</p> + +<p>But that doesn&#8217;t mean some minor, modern improvements couldn&#8217;t be made&#8230;</p> + +<h2 id="boosting-margins-and-increasing-font-size">Boosting Margins and Increasing Font Size</h2> + +<p>A little extra breathing room for a website&#8217;s content never hurts. Browser defaults set the inner content too close to the main window borders, creating mild eye strain to focus on the far edges of the screen when reading. Pair this with a typeface set too small and you&#8217;ve got a recipe for disaster (in terms of user experience and accessibility). Luckily for us, adding two basic CSS properties fixes all of our readability woes. All that is required is a simple boost to the existing <code>margin</code> property set on the <code>body</code> element (I personally lean towards a very specific <code>1.5em</code>) and overriding the default <code>font-size</code> to <code>18px</code>[^1]:</p> + <pre><code>body { font-size:18px; margin:1.5em; } </code></pre> + <p>There is one <em>small</em> caveat with setting the <code>font-size</code> across the whole <code>body</code> element: code elements set in <code>monospace</code>. They will stand out larger than the other fonts found in the document (due to variations in different typeface heights, spacing etc.) so we will need to target these elements specifically:</p> + <pre><code>code { font-size:14px; - /* Word wrap is optional if you plan to have long inline code snippets */ + &#47;* Word wrap is optional if you plan to have long inline code snippets *&#47; word-wrap:break-word; } </code></pre> -<h2>Code &amp; Pre Tags</h2> -<p>Since we've mentioned <code>code</code> elements, let's fix those as well. The existing styling for inline code snippets and larger pre-formatted text sections leave a lot to be desired. They don't provide any means to wrap their inner content or make use of <code>overflow</code> properties to avoid vertically scrolling on smaller device screens. Sharing code examples becomes quite a pain when your webpage's flow and layout is broken just by including them. Browsers could fix this easily enough by defaulting to:</p> + +<h2 id="code-pre-tags">Code &#38; Pre Tags</h2> + +<p>Since we&#8217;ve mentioned <code>code</code> elements, let&#8217;s fix those as well. The existing styling for inline code snippets and larger pre-formatted text sections leave a lot to be desired. They don&#8217;t provide any means to wrap their inner content or make use of <code>overflow</code> properties to avoid vertically scrolling on smaller device screens. Sharing code examples becomes quite a pain when your webpage&#8217;s flow and layout is broken just by including them. Browsers could fix this easily enough by defaulting to:</p> + <pre><code>pre { overflow:auto; } </code></pre> -<h2>Basic Dark Mode Support</h2> -<p>Barebones styling in current web browsers have no sane defaults[^2] for system-level dark mode. What a huge letdown. This is where the most "drastic" changes will be implemented with our browser default updates. We will need the browser to change the main <code>background-color</code>, along with resetting both the text and anchor link <code>color</code> for improved accessibility. Browser defaults for anchor link color in "light mode" are blue/purple - so I've opted towards using gold, orange and orangered in dark mode respectively:</p> -<pre><code>/* Dark mode */ + +<h2 id="basic-dark-mode-support">Basic Dark Mode Support</h2> + +<p>Barebones styling in current web browsers have no sane defaults[^2] for system-level dark mode. What a huge letdown. This is where the most &#8220;drastic&#8221; changes will be implemented with our browser default updates. We will need the browser to change the main <code>background-color</code>, along with resetting both the text and anchor link <code>color</code> for improved accessibility. Browser defaults for anchor link color in &#8220;light mode&#8221; are blue&#47;purple - so I&#8217;ve opted towards using gold, orange and orangered in dark mode respectively:</p> + +<pre><code>&#47;* Dark mode *&#47; @media (prefers-color-scheme: dark) { @media not print { html {background:#0e0e0e;color:#e1e1e1; } @@ -8160,12 +10640,19 @@ for (var i=0; i &lt; inputs.length; i++) { } } </code></pre> -<p>That is probably the most streamlined dark mode on the web...</p> -<h2>The "Reading Length" Debate</h2> -<p>Proper reading length tends to be quite the point of contention on the web. Hell, even I've <a href="/character-unit/">written about it quite a bit</a> in the past (and many of my side projects follow that standard). The main problem I have with this is lack of <em>user control</em>. I don't think the browser (or designers for that matter) should determine the best reading length for my own personal reading preferences. UX testing and group feedback has (somewhat) agreed upon 66-75 characters per line to be the most optimal reading experience. That is good to know. I <em>still</em> believe it should come down to user preference.</p> -<p>Do you want to know an incredible feature built into browsers? <em>Window resizing</em>. Abandon the idea that you "know better" than your users and give them the power to adjust as they see fit. The web was meant to be personal and flexible.</p> -<h2>Conclusion</h2> -<p>There isn't much else to say, really. I think these tiny tweaks would greatly improve the default browser experience and maybe even convince others to just <em>use</em> these defaults instead of falling down the CSS rabbit hole (as fun as that might be sometimes). For easier convenience, I'll leave the full set of CSS changes below:</p> + +<p>That is probably the most streamlined dark mode on the web&#8230;</p> + +<h2 id="the-reading-length-debate">The &#8220;Reading Length&#8221; Debate</h2> + +<p>Proper reading length tends to be quite the point of contention on the web. Hell, even I&#8217;ve <a href="/character-unit/">written about it quite a bit</a> in the past (and many of my side projects follow that standard). The main problem I have with this is lack of <em>user control</em>. I don&#8217;t think the browser (or designers for that matter) should determine the best reading length for my own personal reading preferences. UX testing and group feedback has (somewhat) agreed upon 66-75 characters per line to be the most optimal reading experience. That is good to know. I <em>still</em> believe it should come down to user preference.</p> + +<p>Do you want to know an incredible feature built into browsers? <em>Window resizing</em>. Abandon the idea that you &#8220;know better&#8221; than your users and give them the power to adjust as they see fit. The web was meant to be personal and flexible.</p> + +<h2 id="conclusion">Conclusion</h2> + +<p>There isn&#8217;t much else to say, really. I think these tiny tweaks would greatly improve the default browser experience and maybe even convince others to just <em>use</em> these defaults instead of falling down the CSS rabbit hole (as fun as that might be sometimes). For easier convenience, I&#8217;ll leave the full set of CSS changes below:</p> + <pre><code>body { font-size:18px; margin:1.5em; @@ -8185,86 +10672,102 @@ pre { } } </code></pre> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li><code>18px</code> seems to be the perfect sweet spot between "almost too large, yet not small enough to strain my eyes"</li> -<li>At the time of this article's publish date</li> +<li><code>18px</code> seems to be the perfect sweet spot between &#8220;almost too large, yet not small enough to strain my eyes&#8221;</li> +<li>At the time of this article&#8217;s publish date</li> </ol></content> - <link href="https://bt.ht/default-html-style-updates"/> - <id>https://bt.ht/default-html-style-updates</id> + <link href="https://btxx.org/default-html-style-updates"/> + <id>https://btxx.org/default-html-style-updates</id> <updated>2021-11-09T10:00:00Z</updated> <published>2021-11-09T10:00:00Z</published> </entry> <entry> <title>Very Basic Form Styling</title> - <content type="html"><h1>Very Basic Form Styling</h1> + <content type="html"><h1 id="very-basic-form-styling">Very Basic Form Styling</h1> + <p>2019-11-13</p> -<p>Web forms can be great - I'm borderline obsessed with them. I love tinkering with pre-existing logins / sign up pages and I've also open sourced a minimal CSS form-styling plugin: <a href="https://normform.netlify.com/">Normform</a>. While simple CSS plugins like these can be helpful, I often feel like we are over-engineering our web forms. I'm certainly guilty of it.</p> -<p>That's not to say developers should just use default browser styling for their forms and call it a day - that is far from ideal. Just pull-back on adding so much styling garbage to the forms themselves.</p> -<p>Let's check out an embedded demo below to see what some bare-bones form styling could look like:</p> + +<p>Web forms can be great - I&#8217;m borderline obsessed with them. I love tinkering with pre-existing logins &#47; sign up pages and I&#8217;ve also open sourced a minimal CSS form-styling plugin: <a href="https://normform.netlify.com/">Normform</a>. While simple CSS plugins like these can be helpful, I often feel like we are over-engineering our web forms. I&#8217;m certainly guilty of it.</p> + +<p>That&#8217;s not to say developers should just use default browser styling for their forms and call it a day - that is far from ideal. Just pull-back on adding so much styling garbage to the forms themselves.</p> + +<p>Let&#8217;s check out an embedded demo below to see what some bare-bones form styling could look like:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/oNwzvMa">Live CodePen Example</a></p> -<p>This form isn't going to win any design awards or blow anyone away with its creativity. That's okay - because it gets the job done. Users understand it's a form and items are broken down into digestible chunks. Mission accomplished, right?</p> -<h2>Breaking the form down</h2> -<p>Let's take a look at the HTML of the entire form:</p> -<pre><code>&lt;form action=&quot;&quot;&gt; - &lt;fieldset&gt; - &lt;legend&gt;Personal Details&lt;/legend&gt; - &lt;label for=&quot;username&quot;&gt;Desired Username:&lt;/label&gt; - &lt;input type=&quot;text&quot; id=&quot;username&quot;&gt; - &lt;label for=&quot;name&quot;&gt;Full Name:&lt;/label&gt; - &lt;input type=&quot;text&quot; id=&quot;name&quot;&gt; - &lt;label for=&quot;email&quot;&gt;Email Address:&lt;/label&gt; - &lt;input type=&quot;email&quot; id=&quot;email&quot;&gt; - &lt;label for=&quot;date&quot;&gt;Date of Birth:&lt;/label&gt; - &lt;input type=&quot;date&quot; id=&quot;date&quot;&gt; - &lt;/fieldset&gt; - &lt;br&gt; - &lt;fieldset&gt; - &lt;legend&gt;Contact Details&lt;/legend&gt; - &lt;label for=&quot;address&quot;&gt;Home Address:&lt;/label&gt; - &lt;input type=&quot;text&quot; id=&quot;address&quot;&gt; - &lt;label for=&quot;postal&quot;&gt;Postal Code:&lt;/label&gt; - &lt;input type=&quot;text&quot; id=&quot;postal&quot;&gt; - &lt;label for=&quot;phone&quot;&gt;Phone Number:&lt;/label&gt; - &lt;input type=&quot;tel&quot; id=&quot;phone&quot;&gt; - &lt;/fieldset&gt; - &lt;br&gt; - &lt;fieldset&gt; - &lt;legend&gt;Select an Option&lt;/legend&gt; - &lt;label for=&quot;radio-1&quot;&gt; - &lt;input type=&quot;radio&quot; id=&quot;radio-1&quot; name=&quot;radio-choice&quot;&gt; + +<p>This form isn&#8217;t going to win any design awards or blow anyone away with its creativity. That&#8217;s okay - because it gets the job done. Users understand it&#8217;s a form and items are broken down into digestible chunks. Mission accomplished, right?</p> + +<h2 id="breaking-the-form-down">Breaking the form down</h2> + +<p>Let&#8217;s take a look at the HTML of the entire form:</p> + +<pre><code>&#60;form action=""&#62; + &#60;fieldset&#62; + &#60;legend&#62;Personal Details&#60;&#47;legend&#62; + &#60;label for="username"&#62;Desired Username:&#60;&#47;label&#62; + &#60;input type="text" id="username"&#62; + &#60;label for="name"&#62;Full Name:&#60;&#47;label&#62; + &#60;input type="text" id="name"&#62; + &#60;label for="email"&#62;Email Address:&#60;&#47;label&#62; + &#60;input type="email" id="email"&#62; + &#60;label for="date"&#62;Date of Birth:&#60;&#47;label&#62; + &#60;input type="date" id="date"&#62; + &#60;&#47;fieldset&#62; + &#60;br&#62; + &#60;fieldset&#62; + &#60;legend&#62;Contact Details&#60;&#47;legend&#62; + &#60;label for="address"&#62;Home Address:&#60;&#47;label&#62; + &#60;input type="text" id="address"&#62; + &#60;label for="postal"&#62;Postal Code:&#60;&#47;label&#62; + &#60;input type="text" id="postal"&#62; + &#60;label for="phone"&#62;Phone Number:&#60;&#47;label&#62; + &#60;input type="tel" id="phone"&#62; + &#60;&#47;fieldset&#62; + &#60;br&#62; + &#60;fieldset&#62; + &#60;legend&#62;Select an Option&#60;&#47;legend&#62; + &#60;label for="radio-1"&#62; + &#60;input type="radio" id="radio-1" name="radio-choice"&#62; The option is pretty nice - &lt;/label&gt; - &lt;label for=&quot;radio-2&quot;&gt; - &lt;input type=&quot;radio&quot; id=&quot;radio-2&quot; name=&quot;radio-choice&quot;&gt; + &#60;&#47;label&#62; + &#60;label for="radio-2"&#62; + &#60;input type="radio" id="radio-2" name="radio-choice"&#62; This option is a little bit better - &lt;/label&gt; - &lt;label for=&quot;radio-3&quot;&gt; - &lt;input type=&quot;radio&quot; id=&quot;radio-3&quot; name=&quot;radio-choice&quot;&gt; + &#60;&#47;label&#62; + &#60;label for="radio-3"&#62; + &#60;input type="radio" id="radio-3" name="radio-choice"&#62; This option is the best - &lt;/label&gt; - &lt;/fieldset&gt; - &lt;br&gt; - &lt;fieldset&gt; - &lt;legend&gt;Notifications&lt;/legend&gt; - &lt;label for=&quot;checkbox-1&quot;&gt; - &lt;input type=&quot;checkbox&quot; id=&quot;checkbox-1&quot;&gt; + &#60;&#47;label&#62; + &#60;&#47;fieldset&#62; + &#60;br&#62; + &#60;fieldset&#62; + &#60;legend&#62;Notifications&#60;&#47;legend&#62; + &#60;label for="checkbox-1"&#62; + &#60;input type="checkbox" id="checkbox-1"&#62; I would like to receive email notifications - &lt;/label&gt; - &lt;label for=&quot;checkbox-2&quot;&gt; - &lt;input type=&quot;checkbox&quot; id=&quot;checkbox-2&quot;&gt; + &#60;&#47;label&#62; + &#60;label for="checkbox-2"&#62; + &#60;input type="checkbox" id="checkbox-2"&#62; I would like to subscribe to the weekly newsletter - &lt;/label&gt; - &lt;/fieldset&gt; - &lt;br&gt; - &lt;input type=&quot;reset&quot; value=&quot;Reset&quot;&gt; - &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt; -&lt;/form&gt; -</code></pre> -<p>Notice the <code>fieldset</code> and <code>legend</code> elements? I bet you don't see or hear about those HTML items very often. By default, <code>fieldset</code> allows sibling or related inputs to be semantically grouped together. The <code>legend</code> elements give the user great visual cues about which items are grouped together, helping to focus on each section individually as they complete the form. Use these grouping elements as much as possible (when it makes sense of course) for a better guided experience for your users. </p> + &#60;&#47;label&#62; + &#60;&#47;fieldset&#62; + &#60;br&#62; + &#60;input type="reset" value="Reset"&#62; + &#60;input type="submit" value="Submit"&#62; +&#60;&#47;form&#62; +</code></pre> + +<p>Notice the <code>fieldset</code> and <code>legend</code> elements? I bet you don&#8217;t see or hear about those HTML items very often. By default, <code>fieldset</code> allows sibling or related inputs to be semantically grouped together. The <code>legend</code> elements give the user great visual cues about which items are grouped together, helping to focus on each section individually as they complete the form. Use these grouping elements as much as possible (when it makes sense of course) for a better guided experience for your users. </p> + <p>Avoid making your own custom sections and instead use these existing HTML semantics.</p> -<h2>Almost no CSS at all</h2> -<p>Now it's time to style this form with only 6 property declarations:</p> + +<h2 id="almost-no-css-at-all">Almost no CSS at all</h2> + +<p>Now it&#8217;s time to style this form with only 6 property declarations:</p> + <pre><code>form label { display: block; } @@ -8274,66 +10777,74 @@ form input { padding: 10px; width: 100%; } -form input[type=&quot;radio&quot;], -form input[type=&quot;checkbox&quot;], -form input[type=&quot;reset&quot;], -form input[type=&quot;submit&quot;] { +form input[type="radio"], +form input[type="checkbox"], +form input[type="reset"], +form input[type="submit"] { width: auto; } </code></pre> + <p>Of course, you can always add minor adjustments (like in my demo example above)</p> + <ul> <li>Legend typeface and sizing</li> <li>Form and fieldset background colors</li> <li>Extra margin and padding</li> -<li>Custom reset / submit buttons</li> +<li>Custom reset &#47; submit buttons</li> </ul> + <p>But the main point of this post is to showcase how little CSS is needed to implement decent web forms - so any further improvements are up to you, dear reader. </p> + <p>Just try not to reinvent the wheel.</p> -<h2>Final rant - don't ignore the reset</h2> -<p>A lot of "modern" web forms have moved away from including the reset input on their forms, which I think is fairly short-sighted. Resetting all form fields might be a smaller edge case, but it is certainly a better option than relying on the user to <i>refresh</i> or in some cases, individually deleting each input. Yikes.</p> + +<h2 id="final-rant---dont-ignore-the-reset">Final rant - don&#8217;t ignore the reset</h2> + +<p>A lot of &#8220;modern&#8221; web forms have moved away from including the reset input on their forms, which I think is fairly short-sighted. Resetting all form fields might be a smaller edge case, but it is certainly a better option than relying on the user to refresh or in some cases, individually deleting each input. Yikes.</p> + <p>Happy form building!</p></content> - <link href="https://bt.ht/default-brower-forms"/> - <id>https://bt.ht/default-brower-forms</id> + <link href="https://btxx.org/default-brower-forms"/> + <id>https://btxx.org/default-brower-forms</id> <updated>2019-11-13T10:00:00Z</updated> <published>2019-11-13T10:00:00Z</published> </entry> <entry> <title>The Death of Personality</title> - <content type="html"><h1>The Death of Personality</h1> + <content type="html"><h1 id="the-death-of-personality">The Death of Personality</h1> + <p>2017-11-01</p> -<p>On September 18, 2013 truly original product design (everything from icon and app design to UI and experience interactions) began it's fast decline into the abyss with the release of Apple's iOS 7 update. It was called revolutionary. It was seen as a 'new age' of design. I think it was a big mistake.</p> + +<p>On September 18, 2013 truly original product design (everything from icon and app design to UI and experience interactions) began it&#8217;s fast decline into the abyss with the release of Apple&#8217;s iOS 7 update. It was called revolutionary. It was seen as a &#8216;new age&#8217; of design. I think it was a big mistake.</p> + <p><img src="/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp" alt="Flat design tombstone" /></p> -<h3>Stepping backwards</h3> -<p>Let me start off by saying I understand where they were trying to take mobile app design as a whole. "Less is more", "cleaner UI to let the content be the focus", "more touch based interactions". The problem is that they cranked the dial too far in the other direction.</p> -<p>Because of this, a large movement was created based around the idea that skeuomorphic<span class="sidenote-number"></span> design is garbage, flat design is the future. And everyone drank the kool-aid without a single objection. -<span class="sidenote">I'm using this ironically.</span></p> -<h3>Icons with no identity</h3> -<p>Do you remember Instagram's original app icon and UI? Do you remember how everyone initially praised it? Show those old designs to the same designers who loved it only a few years ago, and they will now laugh at how "bad" it is.</p> -<p><figure> -<img src="/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp" alt="Instagram flat design"> -<figcaption>They completely butchered the contrast and initial readability to appease the 'flat' trend style. The personality died.</figcaption> -</figure></p> -<p>Unfortunately the same can be said for Apple's system icons across both iOS and macOS.</p> -<p>I believe Apple took the concept of a 'consistent' design system across their iconography too literally. All the system icons should compliment one another, but they shouldn't lose their own individual look and feel.</p> -<p><figure> -<img src="/public/images/flat-design-icons_vubivd_c_scale,w_800.webp" alt="iOS icon comparison"> -<figcaption>Look at the depth and thought put into the original iOS icons. The "newer" icon designs look like lazy and uninspired wire-frames.</figcaption> -</figure></p> -<h3>Lackluster UI</h3> -<p>The once inspiring and hierarchically consistent interface of both iOS and macOS was also quickly swatted away. In it's place we as users saw the removal of depth, initial visual cues as to what was interactive and what was static, and sadly even the overall color was muted.</p> -<p><figure> -<img src="/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp" alt="iOS UI comparison"> -<figcaption>More ugly wire-frame skeleton design compared to it's original counterpart. Where is the call to interact with any of these elements? Where is the hierarchy?</figcaption> -</figure></p> -<h3>Impact on the web</h3> + +<h3 id="stepping-backwards">Stepping backwards</h3> + +<p>Let me start off by saying I understand where they were trying to take mobile app design as a whole. &#8220;Less is more&#8221;, &#8220;cleaner UI to let the content be the focus&#8221;, &#8220;more touch based interactions&#8221;. The problem is that they cranked the dial too far in the other direction.</p> + +<p>Because of this, a large movement was created based around the idea that skeuomorphic design is garbage, flat design is the future. And everyone drank the kool-aid without a single objection. +I&#8217;m using this ironically.</p> + +<h3 id="icons-with-no-identity">Icons with no identity</h3> + +<p>Do you remember Instagram&#8217;s original app icon and UI? Do you remember how everyone initially praised it? Show those old designs to the same designers who loved it only a few years ago, and they will now laugh at how &#8220;bad&#8221; it is.</p> + +<p>Unfortunately the same can be said for Apple&#8217;s system icons across both iOS and macOS.</p> + +<p>I believe Apple took the concept of a &#8216;consistent&#8217; design system across their iconography too literally. All the system icons should compliment one another, but they shouldn&#8217;t lose their own individual look and feel.</p> + +<h3 id="lackluster-ui">Lackluster UI</h3> + +<p>The once inspiring and hierarchically consistent interface of both iOS and macOS was also quickly swatted away. In it&#8217;s place we as users saw the removal of depth, initial visual cues as to what was interactive and what was static, and sadly even the overall color was muted.</p> + +<h3 id="impact-on-the-web">Impact on the web</h3> + <p>This may not have been a bad thing if it was self-contained to Apple itself. The problem is that Apple has such a huge influence on the design industry - although that is starting to diminish, due to disasters like the iPhone X - that everyone starts to mimic and copy their style. This includes designers of sites and progressive web apps.</p> -<p><figure> -<img src="/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp" alt="Buttons comparison"> -<figcaption>Comparison of button states. Which states are more instantly recognizable?</figcaption> -</figure></p> + <p>With the evolution of websites morphing into progressive web apps, designers have felt the need to start implementing this bland style for their design systems.</p> + <p>What we got in return:</p> + <ul> <li>washed out colors</li> <li>zero gradients for depth</li> @@ -8342,81 +10853,105 @@ form input[type=&quot;submit&quot;] { <li>the absence of hover states on interactive elements</li> <li>a lack of any proper information density</li> <li>an overkill of whitespace</li> -<li>one dimensional buttons (you know, the thing you <strong>want</strong> the user to interact with)</li> +<li>one dimensional buttons (you know, the thing you want the user to interact with)</li> <li>a complete disregard for original design not based off every other popular product</li> </ul> -<p><figure> -<img src="/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp" alt="Toggles comparison"> -<figcaption>The minimal / flat toggles look like unfinished prototypes.</figcaption> -</figure></p> -<h3>Breaking free of the 'modern era'</h3> + +<h3 id="breaking-free-of-the-modern-era">Breaking free of the &#8216;modern era&#8217;</h3> + <p>Thankfully, there are still a few good designers who continue to create original and inspiring work not based solely on current trends.</p> -<p>Flexibits recently launched a new contact app for macOS called <a href="https://flexibits.com/cardhop">Cardhop</a>. While the UI still shifts a little too far to the 'flat trend' for my liking, they thankfully hired the very talented David Lanham to design the beautiful application icon.</p> -<p> This is where visual design shines. Icon designs like Cardhop's are what allow individual applications to stand out in the dock or mobile home-screen among all the others. So how is that <i>not</i> UX design?</p> -<p><figure> -<img src="/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp" alt="Cardhop app icon"> -<figcaption>The gorgeous Cardhop app icon by David Lanham.</figcaption> -</figure></p> -<p>The current trendy thought process from designers that "visual design doesn't involve UX design" is garbage. Neither are mutually exclusive and I think anyone who believes so is being incredibly short-sighted.</p> -<p>If you're a designer, please stop riding trends and make your work visually beautiful. That doesn't mean you need to sacrifice usability or function, but just put more love and confidence into your profession. Companies like Apple and Google don't control how everyone else's apps and sites should look, and based on their current design decisions - they <i>shouldn't</i>.</p></content> - <link href="https://bt.ht/death-of-personality"/> - <id>https://bt.ht/death-of-personality</id> + +<p>Flexibits recently launched a new contact app for macOS called Cardhop. While the UI still shifts a little too far to the &#8216;flat trend&#8217; for my liking, they thankfully hired the very talented David Lanham to design the beautiful application icon.</p> + +<p>This is where visual design shines. Icon designs like Cardhop&#8217;s are what allow individual applications to stand out in the dock or mobile home-screen among all the others. So how is that not UX design?</p> + +<p>The current trendy thought process from designers that &#8220;visual design doesn&#8217;t involve UX design&#8221; is garbage. Neither are mutually exclusive and I think anyone who believes so is being incredibly short-sighted.</p> + +<p>If you&#8217;re a designer, please stop riding trends and make your work visually beautiful. That doesn&#8217;t mean you need to sacrifice usability or function, but just put more love and confidence into your profession. Companies like Apple and Google don&#8217;t control how everyone else&#8217;s apps and sites should look, and based on their current design decisions - they shouldn&#8217;t.</p></content> + <link href="https://btxx.org/death-of-personality"/> + <id>https://btxx.org/death-of-personality</id> <updated>2017-11-01T10:00:00Z</updated> <published>2017-11-01T10:00:00Z</published> </entry> <entry> <title>Cut Your Forms in Half</title> - <content type="html"><h1>Cut Your Forms in Half</h1> + <content type="html"><h1 id="cut-your-forms-in-half">Cut Your Forms in Half</h1> + <p>2019-05-09</p> -<p><em>Building web forms can sometimes feel like a boring or daunting task</em>. Don't pass this dread on to your users - rip out as many of your form fields as possible.</p> -<p>Web forms tend to get a bad rep, mainly because so many horrible design choices are made without the user experience set at the forefront. Often times clients demand that they <strong>need</strong> those twenty input fields or else how will they collect critical information from their users? Normally when I'm approached with such a statement I simply ask them:</p> -<blockquote><p>"How many form fields would you be willing to fill out for an emergency situation?"</p> + +<p><em>Building web forms can sometimes feel like a boring or daunting task</em>. Don&#8217;t pass this dread on to your users - rip out as many of your form fields as possible.</p> + +<p>Web forms tend to get a bad rep, mainly because so many horrible design choices are made without the user experience set at the forefront. Often times clients demand that they <strong>need</strong> those twenty input fields or else how will they collect critical information from their users? Normally when I&#8217;m approached with such a statement I simply ask them:</p> + +<blockquote> +<p>&#8220;How many form fields would you be willing to fill out for an emergency situation?&#8221;</p> </blockquote> -<p>"My form isn't for emergencies though", they might reply. In that case ask them why they feel it acceptable to waste their users' time just because it isn't urgent. Time is valuable.</p> -<h2>Fixing a form in the wild</h2> -<p>Let's use a real-world form off the <a href="https://www.greatwestlife.com">Great West Life Insurance</a> website as an example (left is original, right is updated):</p> -<p><img src="/public/images/cut-forms.webp" alt="Great West Life form update"> -</p> -<h3>Breaking things down</h3> + +<p>&#8220;My form isn&#8217;t for emergencies though&#8221;, they might reply. In that case ask them why they feel it acceptable to waste their users&#8217; time just because it isn&#8217;t urgent. Time is valuable.</p> + +<h2 id="fixing-a-form-in-the-wild">Fixing a form in the wild</h2> + +<p>Let&#8217;s use a real-world form off the <a href="https://www.greatwestlife.com">Great West Life Insurance</a> website as an example (left is original, right is updated):</p> + +<h3 id="breaking-things-down">Breaking things down</h3> + <p>So what exactly have we changed?</p> + <ul> <li>Combined first and last name fields into a single input</li> -<li>Removed the overkill "retype" email &amp; password field (with the optional <code>show password</code> this becomes redundant)</li> +<li>Removed the overkill &#8220;retype&#8221; email &#38; password field (with the optional <code>show password</code> this becomes redundant)</li> <li>Minor position changes for optional subscription sign up and input field descriptions</li> <li>Removed <code>recovery email</code> - - This is something that should be prompted to the user after successful registration - don't bog them down before they even sign up</li> + +<ul> +<li>This is something that should be prompted to the user after successful registration - don&#8217;t bog them down before they even sign up</li> +</ul></li> </ul> -<h2>Helpful Micro improvements</h2> -<p>You don't need to be extreme when gutting form fields - just be practical.</p> + +<h2 id="helpful-micro-improvements">Helpful Micro improvements</h2> + +<p>You don&#8217;t need to be extreme when gutting form fields - just be practical.</p> + <ul> -<li>Don't use "first" and "last" names as separate inputs, instead use something like "Full Name"</li> +<li>Don&#8217;t use &#8220;first&#8221; and &#8220;last&#8221; names as separate inputs, instead use something like &#8220;Full Name&#8221;</li> <li>Make complex questions use preset answers via <code>checkbox</code> or <code>radio</code> inputs</li> <li>Avoid <code>select</code> items whenever possible (these are clunky and most times unnecessary)</li> <li>Include easy to understand, real-time error prompts</li> </ul> -<h2>Further reading</h2> + +<h2 id="further-reading">Further reading</h2> + <ul> <li>Great place to deep-dive into UX form design: <a href="https://uxmovement.com/category/forms/">UX Movement</a></li> </ul></content> - <link href="https://bt.ht/cut-your-forms-in-half"/> - <id>https://bt.ht/cut-your-forms-in-half</id> + <link href="https://btxx.org/cut-your-forms-in-half"/> + <id>https://btxx.org/cut-your-forms-in-half</id> <updated>2019-05-09T10:00:00Z</updated> <published>2019-05-09T10:00:00Z</published> </entry> <entry> <title>CSS Value: `currentColor`</title> - <content type="html"><h1>CSS Value: <code>currentColor</code></h1> + <content type="html"><h1 id="css-value-">CSS Value: <code>currentColor</code></h1> + <p>2019-04-13</p> + <p><em>There are a large number of nuanced and mostly unheard of</em> CSS value types, but today we are going to focus on <code>currentColor</code>. So what is the <code>currentColor</code> value type anyway?</p> -<blockquote><p>The currentColor value type will apply the existing color value to other properties like background-color, etc.</p> + +<blockquote> +<p>The currentColor value type will apply the existing color value to other properties like background-color, etc.</p> </blockquote> -<h2>See it in action</h2> -<p>Let's assume with have a single div with the following properties:</p> + +<h2 id="see-it-in-action">See it in action</h2> + +<p>Let&#8217;s assume with have a single div with the following properties:</p> + <pre><code>div { color: dodgerblue; } </code></pre> -<p>If we wanted to use that same color for other properties on elements inside that initial <code>div</code>, it's simple - we just need to call <code>currentColor</code> like so:</p> + +<p>If we wanted to use that same color for other properties on elements inside that initial <code>div</code>, it&#8217;s simple - we just need to call <code>currentColor</code> like so:</p> + <pre><code>div { color: dodgerblue; } @@ -8429,48 +10964,68 @@ div a { border-bottom: 1px solid currentColor; } </code></pre> + <p><strong>Sidenote</strong>: If you re-declare the default <code>color</code> property further along in your CSS, the <code>currentColor</code> value will update according to the last color set.</p> -<p>And that's it. Best of all, this value type is supported across all major browsers!</p></content> - <link href="https://bt.ht/current-color"/> - <id>https://bt.ht/current-color</id> + +<p>And that&#8217;s it. Best of all, this value type is supported across all major browsers!</p></content> + <link href="https://btxx.org/current-color"/> + <id>https://btxx.org/current-color</id> <updated>2019-04-13T10:00:00Z</updated> <published>2019-04-13T10:00:00Z</published> </entry> <entry> <title>CSS Video Backgrounds</title> - <content type="html"><h1>CSS Video Backgrounds</h1> + <content type="html"><h1 id="css-video-backgrounds">CSS Video Backgrounds</h1> + <p>2018-04-16</p> + <p>With the release of Safari 11.1 on macOS and Safari on iOS 11.3, developers now have the ability to support background videos (mp4 support only - at the time of this article) with pure CSS.</p> + <p>Example:</p> + <pre><code>.video-background { - background-image: url('path-to-video.mp4); + background-image: url(&#39;path-to-video.mp4); } </code></pre> -<h2>See it in action</h2> -<p>Check out the very basic CodePen I created below to see it live (make sure you view it in latest Safari or else you won't see anything :P)</p> -<p><a href="https://codepen.io/bradleytaunt/pen/JLgrag/">CSS Video Background (Safari Only)</a></p> + +<h2 id="see-it-in-action">See it in action</h2> + +<p>Check out the very basic CodePen I created below to see it live (make sure you view it in latest Safari or else you won&#8217;t see anything :P)</p> + +<p>CSS Video Background (Safari Only)</p> + <p>You can read up on all the new features implemented in 11.1 Safari here:</p> + <p><a href="https://webkit.org/blog/8216/new-webkit-features-in-safari-11-1/">New WebKit Features in Safari 11.1</a></p></content> - <link href="https://bt.ht/css-video-backgrounds"/> - <id>https://bt.ht/css-video-backgrounds</id> + <link href="https://btxx.org/css-video-backgrounds"/> + <id>https://btxx.org/css-video-backgrounds</id> <updated>2018-04-16T10:00:00Z</updated> <published>2018-04-16T10:00:00Z</published> </entry> <entry> <title>CSS Variables</title> - <content type="html"><h1>CSS Variables</h1> + <content type="html"><h1 id="css-variables">CSS Variables</h1> + <p>2018-03-24</p> -<p>The CSS language is becoming even more awesome and powerful everyday. In this quick article I'd like to focus specifically on the "new" CSS variable function that you can start using in your projects <em>right now</em>.</p> -<h3>Getting started is easy</h3> -<p>Let's just jump right in - this is how you create variables in vanilla CSS:</p> + +<p>The CSS language is becoming even more awesome and powerful everyday. In this quick article I&#8217;d like to focus specifically on the &#8220;new&#8221; CSS variable function that you can start using in your projects <em>right now</em>.</p> + +<h3 id="getting-started-is-easy">Getting started is easy</h3> + +<p>Let&#8217;s just jump right in - this is how you create variables in vanilla CSS:</p> + <pre><code>:root { --base-color: #e0e0e0; --text-color: #111; } </code></pre> + <p>We are using the <code>:root</code> selector at the very top of our CSS file in order to call these variables into any elements in the rest of our document. This is normally the safest way to include variables.</p> -<p>As for the variables themselves, you declare that they are variables using the <code>--</code> tags, followed by the variable's name and it's property. Pretty simple stuff, right?</p> -<p>Now let's use those variables:</p> + +<p>As for the variables themselves, you declare that they are variables using the <code>--</code> tags, followed by the variable&#8217;s name and it&#8217;s property. Pretty simple stuff, right?</p> + +<p>Now let&#8217;s use those variables:</p> + <pre><code>.header { border: 1px solid var(--base-color); } @@ -8480,68 +11035,85 @@ div a { color: var(--text-color); } </code></pre> -<p>That's it! It's also good to know that CSS variables have pretty decent <a href="https://caniuse.com/#feat=css-variables">browser support</a> (who likes IE11 anyway).</p> -<h3>Why not just use a preprocessor?</h3> -<p>I'm a pretty big fan of Sass and Stylus, but sometimes it's refreshing to just use vanilla CSS for certain projects. Most preprocessors have had the ability to use variables and mixins for a while, but I prefer to avoid build scripts when not absolutely necessary.</p> + +<p>That&#8217;s it! It&#8217;s also good to know that CSS variables have pretty decent <a href="https://caniuse.com/#feat=css-variables">browser support</a> (who likes IE11 anyway).</p> + +<h3 id="why-not-just-use-a-preprocessor">Why not just use a preprocessor?</h3> + +<p>I&#8217;m a pretty big fan of Sass and Stylus, but sometimes it&#8217;s refreshing to just use vanilla CSS for certain projects. Most preprocessors have had the ability to use variables and mixins for a while, but I prefer to avoid build scripts when not absolutely necessary.</p> + <p>Get out there and have fun with some variables!</p></content> - <link href="https://bt.ht/css-variables"/> - <id>https://bt.ht/css-variables</id> + <link href="https://btxx.org/css-variables"/> + <id>https://btxx.org/css-variables</id> <updated>2018-03-24T10:00:00Z</updated> <published>2018-03-24T10:00:00Z</published> </entry> <entry> <title>CSS Slope Graphs</title> - <content type="html"><h1>CSS Slope Graphs</h1> + <content type="html"><h1 id="css-slope-graphs">CSS Slope Graphs</h1> + <p>2021-06-07</p> -<p><em>I am a huge sucker for simplistic and beautifully designed visual data on the web</em>. Most data tends to be graphed via line or bar systems - which is fine - but I think slope graphs are highly underrated. Let's change that, shall we?</p> -<h2>The Demo</h2> -<p>I'm basing this demo off the design patterns found in <a href="https://www.edwardtufte.com/tufte/books_vdqi">Edward Tufte's visualization work</a>, specifically his slope graph designs:</p> + +<p><em>I am a huge sucker for simplistic and beautifully designed visual data on the web</em>. Most data tends to be graphed via line or bar systems - which is fine - but I think slope graphs are highly underrated. Let&#8217;s change that, shall we?</p> + +<h2 id="the-demo">The Demo</h2> + +<p>I&#8217;m basing this demo off the design patterns found in <a href="https://www.edwardtufte.com/tufte/books_vdqi">Edward Tufte&#8217;s visualization work</a>, specifically his slope graph designs:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/jOBzXMe">Live CodePen Example</a></p> -<h2>The HTML</h2> + +<h2 id="the-html">The HTML</h2> + <p>For this concept we will actually be building this graph out of <code>tables</code> - crazy, right? The greatest benefit of rendering all the data inside of a <code>table</code> element is the ability to easily support smaller screens and mobile devices. Larger viewports will get to see the pretty slope graph, while those below a certain threshold will view a simple table.</p> + <p>(But more on that in the CSS section)</p> -<pre><code>&lt;p&gt;Sales of the leading frozen pizza brands of the United States from 2011 to 2017 (in million US dollars) &lt;br&gt;&lt;em&gt;Source: Statisa 2018&lt;/em&gt;&lt;/p&gt; -&lt;table&gt; - &lt;thead&gt; - &lt;tr&gt; - &lt;th&gt;Pizza Brand&lt;/th&gt; - &lt;th&gt;2011&lt;/th&gt; - &lt;th&gt;2017&lt;/th&gt; - &lt;/tr&gt; - &lt;/thead&gt; - &lt;tbody&gt; - &lt;tr&gt; - &lt;td data-set=&quot;677.0&quot;&gt;DiGiorno&lt;/td&gt; - &lt;td&gt;&lt;span&gt;677.0&lt;/span&gt;&lt;/td&gt; - &lt;td data-name=&quot;DiGiorno&quot;&gt;1014.6&lt;/td&gt; - &lt;/tr&gt; - &lt;tr&gt; - &lt;td data-set=&quot;294.8&quot;&gt;Private Label&lt;/td&gt; - &lt;td&gt;&lt;span&gt;294.8&lt;/span&gt;&lt;/td&gt; - &lt;td data-name=&quot;Private Label&quot;&gt;524.8&lt;/td&gt; - &lt;/tr&gt; - &lt;tr&gt; - &lt;td data-set=&quot;286.1&quot;&gt;Red Baron&lt;/td&gt; - &lt;td&gt;&lt;span&gt;286.1&lt;/span&gt;&lt;/td&gt; - &lt;td data-name=&quot;Red Baron&quot;&gt;572.3&lt;/td&gt; - &lt;/tr&gt; - &lt;tr&gt; - &lt;td data-set=&quot;257.9&quot;&gt;Tombstone&lt;/td&gt; - &lt;td&gt;&lt;span&gt;257.9&lt;/span&gt;&lt;/td&gt; - &lt;td data-name=&quot;Tombstone&quot;&gt;270.6&lt;/td&gt; - &lt;/tr&gt; - &lt;tr&gt; - &lt;td data-set=&quot;164.5&quot;&gt;Totino's Party Pizza&lt;/td&gt; - &lt;td&gt;&lt;span&gt;164.5&lt;/span&gt;&lt;/td&gt; - &lt;td data-name=&quot;Totino's Party Pizza&quot;&gt;347.2&lt;/td&gt; - &lt;/tr&gt; - &lt;/tbody&gt; -&lt;/table&gt; + +<pre><code>&#60;p&#62;Sales of the leading frozen pizza brands of the United States from 2011 to 2017 (in million US dollars) &#60;br&#62;&#60;em&#62;Source: Statisa 2018&#60;&#47;em&#62;&#60;&#47;p&#62; +&#60;table&#62; + &#60;thead&#62; + &#60;tr&#62; + &#60;th&#62;Pizza Brand&#60;&#47;th&#62; + &#60;th&#62;2011&#60;&#47;th&#62; + &#60;th&#62;2017&#60;&#47;th&#62; + &#60;&#47;tr&#62; + &#60;&#47;thead&#62; + &#60;tbody&#62; + &#60;tr&#62; + &#60;td data-set="677.0"&#62;DiGiorno&#60;&#47;td&#62; + &#60;td&#62;&#60;span&#62;677.0&#60;&#47;span&#62;&#60;&#47;td&#62; + &#60;td data-name="DiGiorno"&#62;1014.6&#60;&#47;td&#62; + &#60;&#47;tr&#62; + &#60;tr&#62; + &#60;td data-set="294.8"&#62;Private Label&#60;&#47;td&#62; + &#60;td&#62;&#60;span&#62;294.8&#60;&#47;span&#62;&#60;&#47;td&#62; + &#60;td data-name="Private Label"&#62;524.8&#60;&#47;td&#62; + &#60;&#47;tr&#62; + &#60;tr&#62; + &#60;td data-set="286.1"&#62;Red Baron&#60;&#47;td&#62; + &#60;td&#62;&#60;span&#62;286.1&#60;&#47;span&#62;&#60;&#47;td&#62; + &#60;td data-name="Red Baron"&#62;572.3&#60;&#47;td&#62; + &#60;&#47;tr&#62; + &#60;tr&#62; + &#60;td data-set="257.9"&#62;Tombstone&#60;&#47;td&#62; + &#60;td&#62;&#60;span&#62;257.9&#60;&#47;span&#62;&#60;&#47;td&#62; + &#60;td data-name="Tombstone"&#62;270.6&#60;&#47;td&#62; + &#60;&#47;tr&#62; + &#60;tr&#62; + &#60;td data-set="164.5"&#62;Totino&#39;s Party Pizza&#60;&#47;td&#62; + &#60;td&#62;&#60;span&#62;164.5&#60;&#47;span&#62;&#60;&#47;td&#62; + &#60;td data-name="Totino&#39;s Party Pizza"&#62;347.2&#60;&#47;td&#62; + &#60;&#47;tr&#62; + &#60;&#47;tbody&#62; +&#60;&#47;table&#62; </code></pre> + <p>As you can see, nothing too fancy is happpening here. Pay close attention to the <code>data-set</code> and <code>data-name</code> variables though - those will be important for the CSS portion of this design, mainly the rendering of the line elements.</p> -<h2>The CSS</h2> -<p>To avoid overwhelming your brain all-at-once, let's break the CSS down into bite-sized chunks, starting with the base styling:</p> -<pre><code>@import url('https://opentype.netlify.com/et-book/index.css'); + +<h2 id="the-css">The CSS</h2> + +<p>To avoid overwhelming your brain all-at-once, let&#8217;s break the CSS down into bite-sized chunks, starting with the base styling:</p> + +<pre><code>@import url(&#39;https:&#47;&#47;opentype.netlify.com&#47;et-book&#47;index.css&#39;); * { box-sizing: border-box; } @@ -8552,7 +11124,7 @@ html { body { background: #fffff8; - font-family: &quot;et-book&quot;, serif; + font-family: "et-book", serif; height: 100%; margin: 0 auto; max-width: 800px; @@ -8570,115 +11142,122 @@ table { width: 100%; } </code></pre> + <p>Pretty basic stuff.</p> -<p>Now we need to design how our slope graph will look on larger screens / desktops. For this instance, we will target these larger devices with a <code>min-width</code> media query of <code>800px</code>. The rest of the CSS might look a little confusing but I assure you it is quite simple.</p> + +<p>Now we need to design how our slope graph will look on larger screens &#47; desktops. For this instance, we will target these larger devices with a <code>min-width</code> media query of <code>800px</code>. The rest of the CSS might look a little confusing but I assure you it is quite simple.</p> + <ol> -<li>On larger devices we hide the first <code>thead tr th</code> element with <code>display: none</code></li> -<li>The first and second <code>td</code> elements inside each <code>tbody</code> row need to be set as <code>position: absolute</code> to avoid duplicate content</li> -<li>The inner <code>span</code> that we include in our HTML inside the second <code>tbody tr td</code> also needs to be <code>display: none</code></li> -<li>Remember that <code>data-set</code> variable? We now use that for our <code>:before</code> pseudo element for <code>table tbody tr td:nth-of-type(1)</code></li> -<li>Remember that <code>data-name</code> variable? We now use that for our <code>:before</code> pseudo element for <code>table tbody tr td:nth-of-type(3)</code></li> -<li>After that, you can see the simple customization we include to render the angle / position of the slope lines and the corresponding labels</li> -</ol> -<pre><code>@media(min-width:800px) { +<li><p>On larger devices we hide the first <code>thead tr th</code> element with <code>display: none</code></p></li> +<li><p>The first and second <code>td</code> elements inside each <code>tbody</code> row need to be set as <code>position: absolute</code> to avoid duplicate content</p></li> +<li><p>The inner <code>span</code> that we include in our HTML inside the second <code>tbody tr td</code> also needs to be <code>display: none</code></p></li> +<li><p>Remember that <code>data-set</code> variable? We now use that for our <code>:before</code> pseudo element for <code>table tbody tr td:nth-of-type(1)</code></p></li> +<li><p>Remember that <code>data-name</code> variable? We now use that for our <code>:before</code> pseudo element for <code>table tbody tr td:nth-of-type(3)</code></p></li> +<li><p>After that, you can see the simple customization we include to render the angle &#47; position of the slope lines and the corresponding labels</p> + +<p>@media(min-width:800px) { table { display: block; position: relative; margin-bottom: 25rem; - } + }</p> - table thead th { - border-bottom: 1px solid lightgrey; - font-size: 24px; - position: absolute; - top: -50px; - width: 45%; - } - table thead th:nth-child(1){ display: none; } - table thead th:nth-child(2){ left: 0; } - table thead th:nth-child(3){ right: 0; text-align: right; } +<pre><code>table thead th { + border-bottom: 1px solid lightgrey; + font-size: 24px; + position: absolute; + top: -50px; + width: 45%; +} +table thead th:nth-child(1){ display: none; } +table thead th:nth-child(2){ left: 0; } +table thead th:nth-child(3){ right: 0; text-align: right; } - table tbody tr td:nth-of-type(1), - table tbody tr td:nth-of-type(2) { position: absolute;} +table tbody tr td:nth-of-type(1), +table tbody tr td:nth-of-type(2) { position: absolute;} - table tbody tr td:nth-of-type(2) span { display: none; } - table tbody tr td:nth-of-type(1):before { - content: attr(data-set); - margin-right: 10px; - position: relative; - } +table tbody tr td:nth-of-type(2) span { display: none; } +table tbody tr td:nth-of-type(1):before { + content: attr(data-set); + margin-right: 10px; + position: relative; +} - table tbody tr td:nth-of-type(2) { padding-left: 10px; } +table tbody tr td:nth-of-type(2) { padding-left: 10px; } - table tbody tr td:nth-of-type(3) { - position: absolute; - right: 0; - } - table tbody tr td:nth-of-type(3):before { - content: attr(data-name); - margin-right: 10px; - position: relative; - } +table tbody tr td:nth-of-type(3) { + position: absolute; + right: 0; +} +table tbody tr td:nth-of-type(3):before { + content: attr(data-name); + margin-right: 10px; + position: relative; +} - /* Custom individual slopes -- Left */ - tbody tr:nth-child(1) td:nth-child(1), - tbody tr:nth-child(1) td:nth-child(2) { top: 60px; } - tbody tr:nth-child(2) td:nth-child(1), - tbody tr:nth-child(2) td:nth-child(2) { top: 140px; } - tbody tr:nth-child(3) td:nth-child(1), - tbody tr:nth-child(3) td:nth-child(2) { top: 165px; } - tbody tr:nth-child(4) td:nth-child(1), - tbody tr:nth-child(4) td:nth-child(2) { top: 220px; } - tbody tr:nth-child(5) td:nth-child(1), - tbody tr:nth-child(5) td:nth-child(2) { top: 270px; } - - /* Custom individual slopes -- Right */ - [data-name=&quot;DiGiorno&quot;] { top: 0; } - [data-name=&quot;Red Baron&quot;] { top: 65px; } - [data-name=&quot;Private Label&quot;] { top: 100px; } - [data-name=&quot;Tombstone&quot;] { top: 180px; } - [data-name=&quot;Totino's Party Pizza&quot;] { top: 150px; } - - /* The custom visual lines */ - tbody tr:after { - background: black; - content: ''; - height: 1px; - left: 14.5%; - position: absolute; - width: 70%; - } - tbody tr:nth-child(1):after { - top: 40px; - transform: rotate(-6deg); - } - tbody tr:nth-child(2):after { - left: 17.5%; - top: 130px; - transform: rotate(-4deg); - width: 65%; - } - tbody tr:nth-child(3):after { - left: 15%; - top: 125px; - transform: rotate(-10.25deg); - width: 70%; - } - tbody tr:nth-child(4):after { - left: 16%; - top: 210px; - transform: rotate(-4deg); - width: 68%; - } - tbody tr:nth-child(5):after { - left: 22%; - top: 222px; - transform: rotate(-16deg); - width: 56%; - } +&#47;* Custom individual slopes -- Left *&#47; +tbody tr:nth-child(1) td:nth-child(1), +tbody tr:nth-child(1) td:nth-child(2) { top: 60px; } +tbody tr:nth-child(2) td:nth-child(1), +tbody tr:nth-child(2) td:nth-child(2) { top: 140px; } +tbody tr:nth-child(3) td:nth-child(1), +tbody tr:nth-child(3) td:nth-child(2) { top: 165px; } +tbody tr:nth-child(4) td:nth-child(1), +tbody tr:nth-child(4) td:nth-child(2) { top: 220px; } +tbody tr:nth-child(5) td:nth-child(1), +tbody tr:nth-child(5) td:nth-child(2) { top: 270px; } + +&#47;* Custom individual slopes -- Right *&#47; +[data-name="DiGiorno"] { top: 0; } +[data-name="Red Baron"] { top: 65px; } +[data-name="Private Label"] { top: 100px; } +[data-name="Tombstone"] { top: 180px; } +[data-name="Totino&#39;s Party Pizza"] { top: 150px; } + +&#47;* The custom visual lines *&#47; +tbody tr:after { + background: black; + content: &#39;&#39;; + height: 1px; + left: 14.5%; + position: absolute; + width: 70%; +} +tbody tr:nth-child(1):after { + top: 40px; + transform: rotate(-6deg); +} +tbody tr:nth-child(2):after { + left: 17.5%; + top: 130px; + transform: rotate(-4deg); + width: 65%; +} +tbody tr:nth-child(3):after { + left: 15%; + top: 125px; + transform: rotate(-10.25deg); + width: 70%; +} +tbody tr:nth-child(4):after { + left: 16%; + top: 210px; + transform: rotate(-4deg); + width: 68%; +} +tbody tr:nth-child(5):after { + left: 22%; + top: 222px; + transform: rotate(-16deg); + width: 56%; } </code></pre> -<p>All that's left are some minor styles to make everything look nice on mobile:</p> + +<p>}</p></li> +</ol> + +<p>All that&#8217;s left are some minor styles to make everything look nice on mobile:</p> + <pre><code>@media(max-width:800px) { p { margin: 2rem 0; @@ -8692,112 +11271,170 @@ table { } } </code></pre> -<h2>Not the most practical</h2> + +<h2 id="not-the-most-practical">Not the most practical</h2> + <p>This slope graph concept is far from perfect for use in real-world situations. The fact that you need to manually render each point of data yourself makes this implementation quite annoying for more in-depth projects.</p> + <p>But it was fun to mess around with and create, so who cares!</p></content> - <link href="https://bt.ht/css-slope-graphs"/> - <id>https://bt.ht/css-slope-graphs</id> + <link href="https://btxx.org/css-slope-graphs"/> + <id>https://btxx.org/css-slope-graphs</id> <updated>2021-06-07T10:00:00Z</updated> <published>2021-06-07T10:00:00Z</published> </entry> <entry> <title>A Reality Where CSS and JavaScript Don't Exist</title> - <content type="html"><h1>A Reality Where CSS and JavaScript Don't Exist</h1> + <content type="html"><h1 id="a-reality-where-css-and-javascript-dont-exist">A Reality Where CSS and JavaScript Don&#8217;t Exist</h1> + <p>2021-11-03</p> -<p><em>This is my personal opinion. Please leave your pitchforks at the door...</em></p> -<p>I love CSS. I can spend hours deep diving into a website's CSS system and never find myself getting bored. It's pretty amazing to see the problems other designers are able to solve with just a little bit of custom styling and determination.</p> -<p>I like JavaScript. It serves it's purpose and makes complex functionality on the web easier to wrangle in and understand.</p> + +<p><em>This is my personal opinion. Please leave your pitchforks at the door&#8230;</em></p> + +<p>I love CSS. I can spend hours deep diving into a website&#8217;s CSS system and never find myself getting bored. It&#8217;s pretty amazing to see the problems other designers are able to solve with just a little bit of custom styling and determination.</p> + +<p>I like JavaScript. It serves it&#8217;s purpose and makes complex functionality on the web easier to wrangle in and understand.</p> + <p><em>But I think both should have never come into existence</em>.</p> -<h3>Heresey!</h3> -<p>I know, I know - this website itself uses a little, teeny-tiny amount of CSS. I am indeed a hypocrite - but did I ever claim that I <em>practice</em> what I preach? At least this personal website is JavaScript-free... (apart from a handful of CodePen examples embedded in some of the tutorials).</p> -<h3>Moving On...</h3> -<p>I'm not a complete idiot. I realize that the web has evolved significantly over the years, and to propose that it should have remained stagnant with it's original concept of "paged documents" is foolish. But that <em>is</em> what I'm suggesting - at least, partially.</p> -<h3>Consistent &amp; Boring</h3> -<p>Out there in the multiverse is a reality where the web is a complete borefest. Information is the only driving factor to visit a "web page" and PWAs have never come to exist. Custom styling, fancy interactive animations and single-page functionality isn't even something that can be implemented. The web is just a system of HTML/plaintext documents sharing information and data. Users browse the web in quick bursts to satisfy their queries or read something interesting. Then, they return to <em>real life</em>.</p> + +<h3 id="heresey">Heresey!</h3> + +<p>I know, I know - this website itself uses a little, teeny-tiny amount of CSS. I am indeed a hypocrite - but did I ever claim that I <em>practice</em> what I preach? At least this personal website is JavaScript-free&#8230; (apart from a handful of CodePen examples embedded in some of the tutorials).</p> + +<h3 id="moving-on">Moving On&#8230;</h3> + +<p>I&#8217;m not a complete idiot. I realize that the web has evolved significantly over the years, and to propose that it should have remained stagnant with it&#8217;s original concept of &#8220;paged documents&#8221; is foolish. But that <em>is</em> what I&#8217;m suggesting - at least, partially.</p> + +<h3 id="consistent-boring">Consistent &#38; Boring</h3> + +<p>Out there in the multiverse is a reality where the web is a complete borefest. Information is the only driving factor to visit a &#8220;web page&#8221; and PWAs have never come to exist. Custom styling, fancy interactive animations and single-page functionality isn&#8217;t even something that can be implemented. The web is just a system of HTML&#47;plaintext documents sharing information and data. Users browse the web in quick bursts to satisfy their queries or read something interesting. Then, they return to <em>real life</em>.</p> + <p>My goodness what a <em>beautiful</em> reality that would be. Consistent, boring and wonderful.</p> -<h3>"Wait - Aren't You a Designer?"</h3> + +<h3 id="wait---arent-you-a-designer">&#8220;Wait - Aren&#8217;t You a Designer?&#8221;</h3> + <p>Yes - and again more hypocrisy. My livelihood depends on software requiring custom UIs and properly audited UX flows. By suggesting this change I am throwing myself under the bus and putting myself out of work. All my experience would become worthless and the world of software <em>design</em> would cease to exist.</p> + <p><strong>I would be okay with that</strong>. If it meant the web as a whole was a better place - so be it.</p> -<h3>A Look at the "New World"</h3> -<p>Sometimes it is easier to visualize a concept instead of just discussing it. Below you can find an example of a "converted" website[^1] showcasing how sites would look and feel in this design-less reality:</p> + +<h3 id="a-look-at-the-new-world">A Look at the &#8220;New World&#8221;</h3> + +<p>Sometimes it is easier to visualize a concept instead of just discussing it. Below you can find an example of a &#8220;converted&#8221; website[^1] showcasing how sites would look and feel in this design-less reality:</p> + <ul> -<li>Wealthsimple: <a href="https://www.wealthsimple.com/en-ca/">Current Website</a> / <a href="/etc/html-only/wealthsimple/">New Version</a></li> +<li>Wealthsimple: <a href="https://www.wealthsimple.com/en-ca/">Current Website</a> &#47; <a href="/etc/html-only/wealthsimple/">New Version</a></li> </ul> -<p>As you can see, all the <em>fluff</em> has been removed from the existing design and only the content remains. No scroll-jacking or extra JavaScript libraries are downloaded. Users can easily skim through all the content and screen readers won't struggle through any custom elements. It also loads incredibly fast.</p> -<p>Of course, to our[^2] eyes, this design might look ugly or seem as though the site's CSS failed to load - but in a reality where this is the standard, it is beautifully minimal. Either way, I find that this was at least a fun thought experiment and hopefully leaves you thinking about how the web <em>could have been</em> as well.</p> -<p>Now, back to designing UIs for the web...</p> -<h2>Refs</h2> + +<p>As you can see, all the <em>fluff</em> has been removed from the existing design and only the content remains. No scroll-jacking or extra JavaScript libraries are downloaded. Users can easily skim through all the content and screen readers won&#8217;t struggle through any custom elements. It also loads incredibly fast.</p> + +<p>Of course, to our[^2] eyes, this design might look ugly or seem as though the site&#8217;s CSS failed to load - but in a reality where this is the standard, it is beautifully minimal. Either way, I find that this was at least a fun thought experiment and hopefully leaves you thinking about how the web <em>could have been</em> as well.</p> + +<p>Now, back to designing UIs for the web&#8230;</p> + +<h2 id="refs">Refs</h2> + <ol> <li>Selected site based on my own personal preference</li> <li>Referring to current users of the web</li> </ol></content> - <link href="https://bt.ht/css-js-mistake"/> - <id>https://bt.ht/css-js-mistake</id> + <link href="https://btxx.org/css-js-mistake"/> + <id>https://btxx.org/css-js-mistake</id> <updated>2021-11-03T10:00:00Z</updated> <published>2021-11-03T10:00:00Z</published> </entry> <entry> <title>Web Development on a $200 Chromebook</title> - <content type="html"><h1>Web Development on a $200 Chromebook</h1> + <content type="html"><h1 id="web-development-on-a-200-chromebook">Web Development on a $200 Chromebook</h1> + <p>2020-01-07</p> + <p><em>This blog post was written, edited and tested locally</em> on a cheap $200 Chromebook. The article draft was composed in Sublime Text. Jekyll (the SSG this website uses) was generated via the Linux Beta Terminal running alongside Chrome OS. It was then pushed to the Github repo from the same Terminal and published automatically to Netlify. But more on that later.</p> + <p>First, we need to ask an important question: why use a Chromebook for web development? Maybe a better question might be: why not?</p> -<h2>Mild interest turned into an experiment</h2> + +<h2 id="mild-interest-turned-into-an-experiment">Mild interest turned into an experiment</h2> + <p>Looking from the outside, I always liked the concept of the Chrome OS ecosystem. It had a solid list of features that appealed to me, specifically:</p> + <ul> <li>Blazingly fast boot times</li> <li>Long lasting battery life (roughly 8 hours with consistent usage)</li> -<li>Extremely cheap entry point for "low-end" devices</li> -<li>And, more recently, support for Android &amp; Linux apps</li> +<li>Extremely cheap entry point for &#8220;low-end&#8221; devices</li> +<li>And, more recently, support for Android &#38; Linux apps</li> </ul> -<p>The obvious downside to using a Chromebook is the lack of a "real" operating system. A Windows, Mac or Linux machine will always have more flexibility and depth than a simple Chromebook. But I've found that simple is all I need - or want.</p> -<p><strong>Side note:</strong> <em>I wrote an article not to long ago about <a href="https://uglyduck.ca/stop-crawling-google/">blocking Google from my website</a> and I can see how this current post may come across as hypocritical. Since the search/AMP teams are not that same as the Chrome OS / Chromebook development team, I can view each of those projects based on their own merits. If you still view me as a hypocrite, that's fine</em> :)</p> -<h2>My use case (YMMV)</h2> + +<p>The obvious downside to using a Chromebook is the lack of a &#8220;real&#8221; operating system. A Windows, Mac or Linux machine will always have more flexibility and depth than a simple Chromebook. But I&#8217;ve found that simple is all I need - or want.</p> + +<p><strong>Side note:</strong> <em>I wrote an article not to long ago about <a href="https://uglyduck.ca/stop-crawling-google/">blocking Google from my website</a> and I can see how this current post may come across as hypocritical. Since the search&#47;AMP teams are not that same as the Chrome OS &#47; Chromebook development team, I can view each of those projects based on their own merits. If you still view me as a hypocrite, that&#8217;s fine</em> :)</p> + +<h2 id="my-use-case-ymmv">My use case (YMMV)</h2> + <p>I ended up grabbing the <a href="https://amzn.to/2Xvx20q">Acer 11 N7 Chromebook</a> off of Amazon for $200 (on sale and in Canuck bucks). It comes packed with 4GB of RAM with an Intel Celeron (1.6GHz) and 32GB of storage. Fairly barebones stuff.</p> + <p>My day-to-day use cases are fairly straightforward. I work with git, static site generators, WordPress locally and on staging servers, edit documents, send emails and watch stupid YouTube videos. You know, the basics. My dirt-cheap Chromebook handles all of these things with ease.</p> + <p>My Chromebook setup is as follows:</p> + <ul> <li>Linux Beta (ships with <code>git</code>, etc)</li> <li>Sublime Text (you can always use VSCode if you prefer)</li> <li>Terminal</li> <li>Local by Flywheel (local WordPress development)</li> -<li>Figma in Chrome (UI design / mockups)</li> +<li>Figma in Chrome (UI design &#47; mockups)</li> </ul> -<p>That's it. I understand other developers may require a lot more than this, but with Linux running in a container alongside Chrome OS you can pretty much run anything you could possibly need (excluding exclusive Mac &amp; Windows apps, of course).</p> -<h2>Can a $200 Chromebook be your next web dev machine?</h2> + +<p>That&#8217;s it. I understand other developers may require a lot more than this, but with Linux running in a container alongside Chrome OS you can pretty much run anything you could possibly need (excluding exclusive Mac &#38; Windows apps, of course).</p> + +<h2 id="can-a-200-chromebook-be-your-next-web-dev-machine">Can a $200 Chromebook be your next web dev machine?</h2> + <p>For me? Yes. For you? Maybe.</p> -<p>I mean, it really just depends on what you need your machine to accomplish. If you can be productive and the apps you use are just as fast and responsive as they would be on a more robust OS - then I say go for it. You don't even need to be a cheapo like me, instead you can snag a fancier Chromebook or Google's own Pixelbook. There are a ton of options when it comes to Chrome OS based devices.</p> + +<p>I mean, it really just depends on what you need your machine to accomplish. If you can be productive and the apps you use are just as fast and responsive as they would be on a more robust OS - then I say go for it. You don&#8217;t even need to be a cheapo like me, instead you can snag a fancier Chromebook or Google&#8217;s own Pixelbook. There are a ton of options when it comes to Chrome OS based devices.</p> + <p>If you wanted to experiment to see if the Chrome OS ecosystem could work with your development flow, you can always check out something like <a href="https://www.neverware.com/freedownload">CloudReady</a> to test on your current machine before pulling the trigger.</p> -<p>In the end, it doesn't matter what operating system or apps you use to get your development work done - so long as it is productive and easy-to-use.</p> + +<p>In the end, it doesn&#8217;t matter what operating system or apps you use to get your development work done - so long as it is productive and easy-to-use.</p> + <p>For my current situation, all I need is my cheap little Chromebook.</p></content> - <link href="https://bt.ht/chromebook-web-dev"/> - <id>https://bt.ht/chromebook-web-dev</id> + <link href="https://btxx.org/chromebook-web-dev"/> + <id>https://btxx.org/chromebook-web-dev</id> <updated>2020-01-07T10:00:00Z</updated> <published>2020-01-07T10:00:00Z</published> </entry> <entry> <title>Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal</title> - <content type="html"><h1>Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal</h1> + <content type="html"><h1 id="portable-pi-cheap-raspberry-pi-zero-hacker-terminal">Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal</h1> + <p>2020-09-16</p> -<p><em>I recently came across <a href="https://n-o-d-e.net/zeroterminal3.html">the incredibly cool design</a> for an "ultimate Raspberry Pi computer"</em> by NODE and was inspired to create my own "portable" Pi device. Although, with my concept, I decided to set a few restrictions on the build:</p> + +<p><em>I recently came across <a href="https://n-o-d-e.net/zeroterminal3.html">the incredibly cool design</a> for an &#8220;ultimate Raspberry Pi computer&#8221;</em> by NODE and was inspired to create my own &#8220;portable&#8221; Pi device. Although, with my concept, I decided to set a few restrictions on the build:</p> + <ul> <li>I wanted to keep the total cost as low as possible + <ul> <li>including the Pi Zero <em>and</em> extra hardware</li> -</ul> -</li> +</ul></li> <li>I wanted to avoid any custom casings or need for 3D printed materials</li> -<li>I wanted to make the full design extremely portable / lightweight</li> +<li>I wanted to make the full design extremely portable &#47; lightweight</li> <li>I wanted to keep the build as user-friendly as possible (no soldering, odd hacks etc.)</li> </ul> -<p>With these constraints put in place, I built my very own Raspberry Pi Zero "hacker" terminal. You can see the finished product below:</p> + +<p>With these constraints put in place, I built my very own Raspberry Pi Zero &#8220;hacker&#8221; terminal. You can see the finished product below:</p> + <p><img src="/public/images/portable-pi-1.webp" alt="Portable Pi front" /></p> + <p><img src="/public/images/portable-pi-2.webp" alt="Portable Pi back" /></p> -<p>I'm pretty happy with the final outcome and best of all - you can easily recreate this yourself with little-to-no effort!</p> -<p>So enough chit-chat - let's build this bad-boy!</p> -<blockquote><p><strong>Note:</strong> Most items in the hardware section are Amazon affiliate links</p> + +<p>I&#8217;m pretty happy with the final outcome and best of all - you can easily recreate this yourself with little-to-no effort!</p> + +<p>So enough chit-chat - let&#8217;s build this bad-boy!</p> + +<blockquote> +<p><strong>Note:</strong> Most items in the hardware section are Amazon affiliate links</p> </blockquote> -<h2>Table of Contents</h2> + +<h2 id="table-of-contents">Table of Contents</h2> + <ol> <li><a href="#expectations">Setting Expectations</a></li> <li><a href="#hardware">The Hardware</a></li> @@ -8805,35 +11442,51 @@ table { <li><a href="#setup">Getting Setup</a></li> <li><a href="#summary">Final Summary</a></li> </ol> -<p><h2 id="expectations">Setting Expectations</h2></p> -<p><strong>This hardware will not</strong> replace your laptop or any other "high-powered" portable device. Honestly, you're mobile phone would (most likely) work better in terms of a compact-sized computer. The concept behind this "portable pi" project was to make something <em>for fun</em>.</p> -<p>Please reserve any sassy comments about how buying a cheap $50 laptop off eBay would be more efficient than building out something like I have done here. You're missing the point entirely.</p> -<p>Moving on for those still interested... </p> -<p><h2 id="hardware">The Hardware</h2></p> -<p>I live in Canada, so some of the options are based on available hardware near my location. You're likely to find similar hardware close to your own country for better pricing / shipping costs.</p> -<blockquote><p><strong>Note</strong>: I've decided to use a wireless, USB dongle-based keyboard. You can opt to use a bluetooth-based keyboard, but I just find them more trouble than they are worth (keeping a charge, losing connections, interference from other devices)</p> + +<p><strong>This hardware will not</strong> replace your laptop or any other &#8220;high-powered&#8221; portable device. Honestly, you&#8217;re mobile phone would (most likely) work better in terms of a compact-sized computer. The concept behind this &#8220;portable pi&#8221; project was to make something <em>for fun</em>.</p> + +<p>Please reserve any sassy comments about how buying a cheap $50 laptop off eBay would be more efficient than building out something like I have done here. You&#8217;re missing the point entirely.</p> + +<p>Moving on for those still interested&#8230; </p> + +<p>I live in Canada, so some of the options are based on available hardware near my location. You&#8217;re likely to find similar hardware close to your own country for better pricing &#47; shipping costs.</p> + +<blockquote> +<p><strong>Note</strong>: I&#8217;ve decided to use a wireless, USB dongle-based keyboard. You can opt to use a bluetooth-based keyboard, but I just find them more trouble than they are worth (keeping a charge, losing connections, interference from other devices)</p> </blockquote> + <ul> <li>SBC: <a href="https://amzn.to/3jCVXHG">Raspberry Pi Zero WH</a></li> -<li>Storage / OS: <a href="https://amzn.to/2GHm01R">64GB Micro SD Card</a> (Always have an SD backup!)</li> +<li>Storage &#47; OS: <a href="https://amzn.to/2GHm01R">64GB Micro SD Card</a> (Always have an SD backup!)</li> <li>Battery HAT: <a href="https://amzn.to/3jGq8xp">Li-ion Battery HAT</a></li> <li>Battery: <em>This depends on your location. I was able to order <a href="https://www.walmart.ca/en/ip/Brand-New-4-Pcs-2500mAh-TR14500-3-7V-Rechargeable-Li-ion-Battery-for-Flashlight-Torch/PRD3Z73LMZZ3VK9">online through Walmart</a>, but if you live in the USA there are plenty of battery-specific vendors available. Find whatever works best for your needs!</em></li> <li>Display: <a href="https://www.buyapi.ca/product/3-5-inch-raspberry-pi-tft-display/">KeDei 3.5-inch TFT Display</a></li> <li>Keyboard: <a href="https://amzn.to/2Gqkwt6">Mini USB Wireless Keyboard</a></li> <li>Adapter: <a href="https://amzn.to/36I6T3c">Micro USB OTG Cable</a></li> </ul> -<h4>Raspberry Pi Zero WH</h4> + +<h4 id="raspberry-pi-zero-wh">Raspberry Pi Zero WH</h4> + <p>You will need a Raspberry Pi Zero W with GPIO header pins already soldered on to the board. (You could also do this yourself manually if you have the tools and skill to do so)</p> -<h4>Li-Ion Battery HAT</h4> + +<h4 id="li-ion-battery-hat">Li-Ion Battery HAT</h4> + <p>This HAT holds a single li-ion battery and for our purposes will connect with our Pi Zero via the GPIO header pins. You could also look into double-set battery HATs if that is something you would prefer - for my needs a single rechargeable battery works fine.</p> -<p>Since our main "OS" is purely terminal based, I find you don't really need a li-ion battery with a massive amount of power storage. 2500mAh will easily last a handful of hours mucking about with emails, files and web browsing. Plus, you can always carry a few extras for swapping out on-the-go.</p> -<h4>3.5-inch TFT Display</h4> -<p>A simple and fairly cheap touchscreen display. We won't require our display to render videos or pretty graphics (since we will be entirely terminal-based) so this works just fine for our needs. I am using version 6.3 for this build.</p> -<h4>Micro USB OTG Adapter</h4> + +<p>Since our main &#8220;OS&#8221; is purely terminal based, I find you don&#8217;t really need a li-ion battery with a massive amount of power storage. 2500mAh will easily last a handful of hours mucking about with emails, files and web browsing. Plus, you can always carry a few extras for swapping out on-the-go.</p> + +<h4 id="3.5-inch-tft-display">3.5-inch TFT Display</h4> + +<p>A simple and fairly cheap touchscreen display. We won&#8217;t require our display to render videos or pretty graphics (since we will be entirely terminal-based) so this works just fine for our needs. I am using version 6.3 for this build.</p> + +<h4 id="micro-usb-otg-adapter">Micro USB OTG Adapter</h4> + <p>As mentioned above, this item is optional if you feel more comfortable with using a pure bluetooth keyboard. I just personally prefer this method.</p> -<h4>Wireless Keyboard</h4> -<p>In my product demo image at the beginning of the article, I'm actually using an old Logitech wireless keyboard since this one still hasn't arrived. I plan to swap them out once I have it - the Logitech is far to large to be deemed "portable".</p> -<p><h2 id="software">The Software</h2></p> + +<h4 id="wireless-keyboard">Wireless Keyboard</h4> + +<p>In my product demo image at the beginning of the article, I&#8217;m actually using an old Logitech wireless keyboard since this one still hasn&#8217;t arrived. I plan to swap them out once I have it - the Logitech is far to large to be deemed &#8220;portable&#8221;.</p> + <ul> <li>Operating System: <a href="https://www.raspberrypi.org/downloads/raspberry-pi-os/">Raspberry Pi OS Lite</a></li> <li>Display Driver: <a href="http://kedei.net/raspberry/raspberry.html">KeDei 3.5 Driver</a></li> @@ -8842,458 +11495,455 @@ table { <li>Text Editor: <a href="https://www.nano-editor.org/">Nano</a></li> <li>Code Editor: <a href="https://www.vim.org/">Vim</a></li> </ul> -<p><h2 id="setup">Getting Setup</h2></p> -<p>I will be setting up this "portable pi" via <a href="https://www.raspberrypi.org/documentation/configuration/wireless/headless.md">headless installation</a> with my main <a href="https://uglyduck.ca/my-pi-desktop/">Raspberry Pi 4 desktop</a>. Included below are some quick instructions on how to setup the Raspberry Pi Zero for <code>ssh</code> access.</p> -<h4>Preparing the microSD card</h4> + +<p>I will be setting up this &#8220;portable pi&#8221; via <a href="https://www.raspberrypi.org/documentation/configuration/wireless/headless.md">headless installation</a> with my main <a href="https://uglyduck.ca/my-pi-desktop/">Raspberry Pi 4 desktop</a>. Included below are some quick instructions on how to setup the Raspberry Pi Zero for <code>ssh</code> access.</p> + +<h4 id="preparing-the-microsd-card">Preparing the microSD card</h4> + <ul> -<li>Use Raspberry Pi Imager to write the Raspberry Pi Lite OS to your microSD card +<li><p>Use Raspberry Pi Imager to write the Raspberry Pi Lite OS to your microSD card + <ul> <li>Once complete, remove the microSD storage device and then re-connect it</li> -</ul> -</li> -<li>Navigate to the <code>boot</code> folder of the microSD device - we will be adding 2 files here +</ul></p></li> +<li><p>Navigate to the <code>boot</code> folder of the microSD device - we will be adding 2 files here + <ul> <li>First add a completely empty file and name it <code>ssh</code> (no file extension)</li> <li>Next add an empty file named <code>wpa_supplicant.conf</code></li> -</ul> -</li> -<li>Open the <code>wpa_supplicant.conf</code> file in a code / text editor and paste the following (be sure to change <code>country</code> to your proper country code, as well as properly setting your network name / password):</li> -</ul> -<pre><code>ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev +</ul></p></li> +<li><p>Open the <code>wpa_supplicant.conf</code> file in a code &#47; text editor and paste the following (be sure to change <code>country</code> to your proper country code, as well as properly setting your network name &#47; password):</p> + +<p>ctrl<em>interface=DIR=&#47;var&#47;run&#47;wpa</em>supplicant GROUP=netdev update_config=1 -country=US +country=US</p> -network={ - ssid=&quot;Your network name/SSID&quot; - psk=&quot;Your WPA/WPA2 security key&quot; +<p>network={ + ssid="Your network name&#47;SSID&#8221; + psk="Your WPA&#47;WPA2 security key&#8221; key_mgmt=WPA-PSK -} -</code></pre> -<ul> -<li>Unmount the microSD device, then place the microSD card in your RPi Zero</li> -<li>Assemble the Raspberry Pi Zero with the Battery HAT (li-ion battery attached) connected via GPIO pins, and the 3.5 display connected on-top of the battery HAT's pins</li> -<li>Turn on the battery HAT switch to power the RPi Zero. Give the device roughly 90 seconds to perform the initial boot</li> +}</p></li> +<li><p>Unmount the microSD device, then place the microSD card in your RPi Zero</p></li> +<li><p>Assemble the Raspberry Pi Zero with the Battery HAT (li-ion battery attached) connected via GPIO pins, and the 3.5 display connected on-top of the battery HAT&#8217;s pins</p></li> +<li><p>Turn on the battery HAT switch to power the RPi Zero. Give the device roughly 90 seconds to perform the initial boot</p></li> </ul> -<blockquote><p><strong>Note</strong>: the display will turn on but only show a white screen - this is normal</p> + +<blockquote> +<p><strong>Note</strong>: the display will turn on but only show a white screen - this is normal</p> </blockquote> -<h4>Connecting to your Zero via SSH</h4> + +<h4 id="connecting-to-your-zero-via-ssh">Connecting to your Zero via SSH</h4> + <p>Open the terminal on your Raspberry Pi desktop and enter the following command:</p> + <pre><code>ssh pi@raspberrypi.local </code></pre> -<p>You will then be asked if you wish to trust this device (say yes), then prompted for the <code>pi</code> user's password - which is <code>raspberry</code>. After a moment you will be directly connected to your Raspberry Pi Zero. Hooray!</p> + +<p>You will then be asked if you wish to trust this device (say yes), then prompted for the <code>pi</code> user&#8217;s password - which is <code>raspberry</code>. After a moment you will be directly connected to your Raspberry Pi Zero. Hooray!</p> + <p>We just want to make a couple small configuration changes before going forward (mostly for security):</p> + <ol> <li>Run the command <code>sudo raspi-config</code></li> -<li>Select "Change User Password" from the menu and change the password</li> -</ol> -<p> <img src="/public/images/raspi-config.webp" alt="Raspberry config" /></p> +<li>Select &#8220;Change User Password&#8221; from the menu and change the password +<img src="/public/images/raspi-config.webp" alt="Raspberry config" /></li> +<li>After that, select &#8220;Network Options&#8221; and change your device name -<ol start="3"> -<li>After that, select "Network Options" and change your device name</li> +<ul> +<li>This will avoid any conflicts of connecting to newer RPi devices down the line</li> +</ul></li> </ol> -<p> - This will avoid any conflicts of connecting to newer RPi devices down the line</p> -<p>That's it!</p> -<h4>Installing display driver</h4> -<p>Next we will need to download and run the drivers needed for our 3.5-inch display to play nicely with our Pi Zero (just a blank white screen doesn't help us much). While connected to our RPi Zero via SSH, run the following commands:</p> -<pre><code>wget http://kedei.net/raspberry/v6_1/LCD_show_v6_1_3.tar.gz + +<p>That&#8217;s it!</p> + +<h4 id="installing-display-driver">Installing display driver</h4> + +<p>Next we will need to download and run the drivers needed for our 3.5-inch display to play nicely with our Pi Zero (just a blank white screen doesn&#8217;t help us much). While connected to our RPi Zero via SSH, run the following commands:</p> + +<pre><code>wget http:&#47;&#47;kedei.net&#47;raspberry&#47;v6_1&#47;LCD_show_v6_1_3.tar.gz </code></pre> + <p>If you have snail-paced rural internet like I do, now is a good time to go and grab a coffee while this download completes.</p> + <p>Once the download has finished, extract the contents and navigate to the new directory and install the driver:</p> + <pre><code>sudo tar xzf LCD_show_v6_1_3.tar.gz cd LCD_show_v6_1_3 -sudo ./LCD35_v +sudo .&#47;LCD35_v </code></pre> + <p>Once completed, the RPi Zero will reboot and everything should work as expected!</p> -<h4>Installing software</h4> -<p>I'm not going to jump into heavy details about installing terminal-based software for this setup. The links I've attached in the software section should provide you with more than enough information to get started. For reference, I'm using a very basic set of applications:</p> + +<h4 id="installing-software">Installing software</h4> + +<p>I&#8217;m not going to jump into heavy details about installing terminal-based software for this setup. The links I&#8217;ve attached in the software section should provide you with more than enough information to get started. For reference, I&#8217;m using a very basic set of applications:</p> + <ul> <li>Neomutt (emails)</li> <li>Lynx (quick and simple web browsing)</li> -<li>Nano (writing notes / blog posts in a hurry)</li> +<li>Nano (writing notes &#47; blog posts in a hurry)</li> <li>Vim (making any config edits or project work)</li> </ul> -<p><h2 id="summary">Final Summary</h2></p> -<p>There you have it - a terminal-based, portable Raspberry Pi Zero "hacker" device. </p> -<p>Is it practical? Not really. Can it replace any other <em>portable</em> device you might own? Probably not. Is it fun to make and experiment on? You bet! And in the end - isn't that what matters most with pet Pi projects?</p></content> - <link href="https://bt.ht/cheap-portable-pi"/> - <id>https://bt.ht/cheap-portable-pi</id> + +<p>There you have it - a terminal-based, portable Raspberry Pi Zero &#8220;hacker&#8221; device. </p> + +<p>Is it practical? Not really. Can it replace any other <em>portable</em> device you might own? Probably not. Is it fun to make and experiment on? You bet! And in the end - isn&#8217;t that what matters most with pet Pi projects?</p></content> + <link href="https://btxx.org/cheap-portable-pi"/> + <id>https://btxx.org/cheap-portable-pi</id> <updated>2020-09-16T10:00:00Z</updated> <published>2020-09-16T10:00:00Z</published> </entry> <entry> <title>Chasing Performance</title> - <content type="html"><h1>Chasing Performance</h1> + <content type="html"><h1 id="chasing-performance">Chasing Performance</h1> + <p>2017-11-20</p> -<h2>Update</h2> -<p>This post is no longer relevant since this blog has been redesigned since. I'm keeping this article up as a point of reference.</p> -<hr /> -<p>So I decided to participate in Smashing Mag's <a href="https://www.smashingmagazine.com/2017/10/front-end-performance-challenge/">Front End Performance Challenge</a>, not only for the potential of winning the prize but to further experiment with optimizing my site. (Web performance is a passion of mine)</p> -<p>Below I will breakdown the before &amp; after statistics of my personal site and what changes I made in great detail.</p> -<p>I will be using both my homepage and the image-heavy article I recently wrote, <a href="/blog/the-death-of-personality/">The Death of Personality</a>, as the basis for my tests.</p> -<h3>Lighthouse Score - Homepage</h3> -<p><a href="/public/images/lighthouse-homepage-original.webp">Full source original stats</a> // <a href="/public/images/lighthouse-homepage-updated.webp">Full source updated stats</a></p> -<p><table> - <thead> - <tr> - <th>Stats</th> - <th>Before</th> - <th>After</th> - </tr> - </thead> - <tbody> - <tr> - <td>Performance</td> - <td>82</td> - <td>98</td> - </tr> - <tr> - <td>Accessibility</td> - <td>100</td> - <td>100</td> - </tr> - <tr> - <td>Best Practices</td> - <td>75</td> - <td>94</td> - </tr> - </tbody> -</table></p> -<h3>Lighthouse Score - Article Page</h3> -<p><a href="public/images/lighthouse-article-original.webp">Full source original stats</a> // <a href="public/images/lighthouse-article-updated.webp">Full source updated stats</a></p> -<p><table> - <thead> - <tr> - <th>Stats</th> - <th>Before</th> - <th>After</th> - </tr> - </thead> - <tbody> - <tr> - <td>Performance</td> - <td>39</td> - <td>96</td> - </tr> - <tr> - <td>Accessibility</td> - <td>97</td> - <td>100</td> - </tr> - <tr> - <td>Best Practices</td> - <td>69</td> - <td>94</td> - </tr> - </tbody> -</table></p> -<h3>Web Page Test - Homepage</h3> -<p><a href="/public/images/webpagetest-homepage-original.webp">Full source original stats</a> // <a href="/public/images/webpagetest-homepage-updated.webp">Full source updated stats</a></p> -<p><table> - <thead> - <tr> - <th>Stats</th> - <th>Before</th> - <th>After</th> - </tr> - </thead> - <tbody> - <tr> - <td>Initial Load Time</td> - <td>0.91s</td> - <td class="after bar">0.41s</td> - </tr> - <tr> - <td>Visually Complete</td> - <td>0.9s</td> - <td>0.7s</td> - </tr> - <tr> - <td>Fully Loaded</td> - <td>0.94s</td> - <td>0.65s</td> - </tr> - </tbody> -</table></p> -<h3>Web Page Test - Article Page</h3> -<p><a href="/public/images/webpagetest-article-original.webp">Full source original stats</a> // <a href="/public/images/webpagetest-article-updated.webp">Full source updated stats</a></p> -<p><table> - <thead> - <tr> - <th>Stats</th> - <th>Before</th> - <th>After</th> - </tr> - </thead> - <tbody> - <tr> - <td>Initial Load Time</td> - <td>4.7s</td> - <td>0.5s</td> - </tr> - <tr> - <td>Visually Complete</td> - <td>3.1s</td> - <td>0.8s</td> - </tr> - <tr> - <td>Fully Loaded</td> - <td>4.8s</td> - <td>0.67s</td> - </tr> - </tbody> -</table></p> -<h3>Quick Look</h3> -<p>Though my homepage only made some minor speed performance enhancements, my article post's initial load time was slimmed down by a <strong>whopping 4.2 seconds!</strong> That's pretty incredible and very noticeable from an end-user's perspective.</p> -<h3>So - What Changed?</h3> + +<h2 id="update">Update</h2> + +<p>This post is no longer relevant since this blog has been redesigned since. I&#8217;m keeping this article up as a point of reference.</p> + +<hr/> + +<p>So I decided to participate in Smashing Mag&#8217;s Front End Performance Challenge, not only for the potential of winning the prize but to further experiment with optimizing my site. (Web performance is a passion of mine)</p> + +<p>Below I will breakdown the before &#38; after statistics of my personal site and what changes I made in great detail.</p> + +<p>I will be using both my homepage and the image-heavy article I recently wrote, The Death of Personality, as the basis for my tests.</p> + +<h3 id="lighthouse-score---homepage">Lighthouse Score - Homepage</h3> + +<p>Full source original stats &#47;&#47; Full source updated stats</p> + +<h3 id="lighthouse-score---article-page">Lighthouse Score - Article Page</h3> + +<p>Full source original stats &#47;&#47; Full source updated stats</p> + +<h3 id="web-page-test---homepage">Web Page Test - Homepage</h3> + +<p>Full source original stats &#47;&#47; Full source updated stats</p> + +<h3 id="web-page-test---article-page">Web Page Test - Article Page</h3> + +<p>Full source original stats &#47;&#47; Full source updated stats</p> + +<h3 id="quick-look">Quick Look</h3> + +<p>Though my homepage only made some minor speed performance enhancements, my article post&#8217;s initial load time was slimmed down by a <strong>whopping 4.2 seconds!</strong> That&#8217;s pretty incredible and very noticeable from an end-user&#8217;s perspective.</p> + +<h3 id="so---what-changed">So - What Changed?</h3> + <p>Webfonts</p> -<p>I'm not using any webfonts but instead defaulting to the user's OS System Fonts. I love custom typefaces but performance takes just too much of a hit on my personal site to bother with them.</p> + +<p>I&#8217;m not using any webfonts but instead defaulting to the user&#8217;s OS System Fonts. I love custom typefaces but performance takes just too much of a hit on my personal site to bother with them.</p> + <pre><code>body { -font-family: -apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Roboto,Oxygen,Ubuntu,Cantarell,&quot;Open Sans&quot;,&quot;Helvetica Neue&quot;,sans-serif,&quot;Sans Serif&quot;,Icons; +font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif,"Sans Serif",Icons; } </code></pre> + <p>For reference, there are some things you should to look out for when using custom typefaces:</p> + <ul> <li>Readability and accessibility</li> <li>Possible extra overhead loading in a custom @font-face</li> -<li>Try to avoid any <a href="https://css-tricks.com/fout-foit-foft/">FOUT, FOIT, FOFT</a></li> -<li>Don't go down the rabbit hole of using 3rd party plugins to optimize something as basic as a typeface</li> +<li>Try to avoid any FOUT, FOIT, FOFT</li> +<li>Don&#8217;t go down the rabbit hole of using 3rd party plugins to optimize something as basic as a typeface</li> </ul> -<h3>Critical CSS</h3> -<p>This part was easy. In order to avoid the weird styling 'pops' present on some websites when initially loading with slow connections, it's best to place all your most critical styling inline and then load your external CSS once everything else has loaded.</p> -<p>On top of that, I decided to also implement Filament Group's <a href="https://github.com/filamentgroup/loadCSS">loadCSS</a> function to load my CSS asynchronously. If you are not currently using this in any of your projects; stop reading this and go do it! It's a game changer.</p> -<h3>Critical JavaScript</h3> -<p>My personal site only uses a small amount of JavaScript on the article post Jekyll template pages. By using the <code>defer</code> property I can be sure to load the <code>IntersectionObserver</code> API polyfill after the rest of the DOM as finished loading.</p> -<pre><code>&lt;script src=&quot;https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver&quot; defer&gt; + +<h3 id="critical-css">Critical CSS</h3> + +<p>This part was easy. In order to avoid the weird styling &#8216;pops&#8217; present on some websites when initially loading with slow connections, it&#8217;s best to place all your most critical styling inline and then load your external CSS once everything else has loaded.</p> + +<p>On top of that, I decided to also implement Filament Group&#8217;s loadCSS function to load my CSS asynchronously. If you are not currently using this in any of your projects; stop reading this and go do it! It&#8217;s a game changer.</p> + +<h3 id="critical-javascript">Critical JavaScript</h3> + +<p>My personal site only uses a small amount of JavaScript on the article post Jekyll template pages. By using the defer property I can be sure to load the IntersectionObserver API polyfill after the rest of the DOM as finished loading.</p> + +<pre><code>&#60;script src="https:&#47;&#47;cdn.polyfill.io&#47;v2&#47;polyfill.min.js?features=IntersectionObserver" defer&#62; </code></pre> + <p>I could probably optimize this further by only calling these scripts if an image is actually present in the article post, but this fits my needs nicely as is.</p> -<h3>Responsive Images</h3> -<p>The only images I use are those included in supported blog posts, so the first step was making sure to only call <code>iolazy.min.js</code> on those specific template pages. The next step was defaulting to <code>webp</code> image formats with a lossless <code>jpg</code> fall-back with the help of the <code>picture</code> element:</p> -<p><span class="sidenote">I've also included responsive image sizes for further optimization based on screen size and loading speeds.</span></p> -<pre><code>&lt;figure&gt; -&lt;picture - &lt;source type=&quot;image/webp&quot; - data-srcset=&quot; - /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_200.webp 200w, - /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_1400.webp 1400w&quot; - class=&quot;lazyload&quot;/&gt; - &lt;img - sizes=&quot;(max-width: 1400px) 100vw, 1400px&quot; - data-srcset=&quot; - /images/articles/flat-design-toggles_qfre51_c_scale,w_200.webp 200w, - /images/articles/flat-design-toggles_qfre51_c_scale,w_727.webp 727w, - /images/articles/flat-design-toggles_qfre51_c_scale,w_1065.webp 1065w, - /images/articles/flat-design-toggles_qfre51_c_scale,w_1400.webp 1400w&quot; - src=&quot;/images/placeholder.webp&quot; - alt=&quot;Toggles Comparison&quot; - class=&quot;lazyload&quot;/&gt; -&lt;/picture&gt; -&lt;/figure&gt; -</code></pre> -<p>What about users with JavaScript disabled I hear you ask? It's time for <code>noscript</code> to save the day:</p> -<pre><code>&lt;noscript&gt; - &lt;picture&gt; - &lt;source type=&quot;image/webp&quot; - srcset=&quot; - /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_200.webp 200w, - /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_1400.webp 1400w&quot;&gt; - &lt;img - sizes=&quot;(max-width: 1400px) 100vw, 1400px&quot; - srcset=&quot; - /images/articles/flat-design-toggles_qfre51_c_scale,w_200.webp 200w, - /images/articles/flat-design-toggles_qfre51_c_scale,w_727.webp 727w, - /images/articles/flat-design-toggles_qfre51_c_scale,w_1065.webp 1065w, - /images/articles/flat-design-toggles_qfre51_c_scale,w_1400.webp 1400w&quot; - src=&quot;/images/articles/flat-design-toggles_qfre51_c_scale,w_1400.webp&quot; - alt=&quot;Toggles Comparison&quot;/&gt; - &lt;/picture&gt; -&lt;/noscript&gt; -</code></pre> -<h3>HTTPS &amp; Caching</h3> -<p>The Lighthouse audit also suggested implementing an SSL certificate (something I've been meaning to do for a while anyway) and also utilize CDN caching. So it was Cloudflare to the rescue!</p> -<p>Since my website is hosted through Github, setting up a <em>free</em> SSL certificate and enabling site-wide caching was a breeze. If you're interested in setting this up yourself, step-by-step instructions can be found <a href="https://gist.github.com/cvan/8630f847f579f90e0c014dc5199c337b">here</a>.</p> + +<h3 id="responsive-images">Responsive Images</h3> + +<p>The only images I use are those included in supported blog posts, so the first step was making sure to only call iolazy.min.js on those specific template pages. The next step was defaulting to webp image formats with a lossless jpg fall-back with the help of the picture element:</p> + +<p>I&#8217;ve also included responsive image sizes for further optimization based on screen size and loading speeds.</p> + +<pre><code>&#60;figure&#62; +&#60;picture + &#60;source type="image&#47;webp" + data-srcset=" + &#47;images&#47;articles&#47;webp&#47;flat-design-toggles_p0v2hv_c_scale,w_200.webp 200w, + &#47;images&#47;articles&#47;webp&#47;flat-design-toggles_p0v2hv_c_scale,w_1400.webp 1400w" + class="lazyload"&#47;&#62; + &#60;img + sizes="(max-width: 1400px) 100vw, 1400px" + data-srcset=" + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_200.webp 200w, + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_727.webp 727w, + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_1065.webp 1065w, + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_1400.webp 1400w" + src="&#47;images&#47;placeholder.webp" + alt="Toggles Comparison" + class="lazyload"&#47;&#62; +&#60;&#47;picture&#62; +&#60;&#47;figure&#62; +</code></pre> + +<p>What about users with JavaScript disabled I hear you ask? It&#8217;s time for noscript to save the day:</p> + +<pre><code>&#60;noscript&#62; + &#60;picture&#62; + &#60;source type="image&#47;webp" + srcset=" + &#47;images&#47;articles&#47;webp&#47;flat-design-toggles_p0v2hv_c_scale,w_200.webp 200w, + &#47;images&#47;articles&#47;webp&#47;flat-design-toggles_p0v2hv_c_scale,w_1400.webp 1400w"&#62; + &#60;img + sizes="(max-width: 1400px) 100vw, 1400px" + srcset=" + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_200.webp 200w, + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_727.webp 727w, + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_1065.webp 1065w, + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_1400.webp 1400w" + src="&#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_1400.webp" + alt="Toggles Comparison"&#47;&#62; + &#60;&#47;picture&#62; +&#60;&#47;noscript&#62; +</code></pre> + +<h3 id="https-caching">HTTPS &#38; Caching</h3> + +<p>The Lighthouse audit also suggested implementing an SSL certificate (something I&#8217;ve been meaning to do for a while anyway) and also utilize CDN caching. So it was Cloudflare to the rescue!</p> + +<p>Since my website is hosted through Github, setting up a <em>free</em> SSL certificate and enabling site-wide caching was a breeze. If you&#8217;re interested in setting this up yourself, step-by-step instructions can be found here.</p> + <p>This simple update helped boost my best practices score from a 69 to a 94. Yet another performance enhancement you should be enabling for all your current and future projects!</p> -<h2>Performance Happiness</h2> -<p>Overall I'm pretty content with the <strong>major</strong> performance boost my site has received from these fairly <em>minor</em> updates and I hope this article inspires other designers and developers to jump into updating their own site/app performance speeds. The pay-off is truly worth it!</p> -<h3>Some Extra Reading Material</h3> + +<h2 id="performance-happiness">Performance Happiness</h2> + +<p>Overall I&#8217;m pretty content with the <strong>major</strong> performance boost my site has received from these fairly <em>minor</em> updates and I hope this article inspires other designers and developers to jump into updating their own site&#47;app performance speeds. The pay-off is truly worth it!</p> + +<h3 id="some-extra-reading-material">Some Extra Reading Material</h3> + <ul> -<li><a href="https://www.amazon.ca/Web-Performance-Action-Building-Faster/dp/1617293776/ref=sr_1_1?ie=UTF8&qid=1510585897&sr=8-1&keywords=web+performance+in+action">Web Performance in Action</a> by <i>Jeremy Wagner</i></li> -<li><a href="https://www.amazon.ca/Responsible-Responsive-Design-Scott-Jehl/dp/1937557162/ref=sr_1_1?s=books&ie=UTF8&qid=1510585972&sr=1-1&keywords=responsible+responsive+design">Responsible Responsive Design</a> by <i>Scott Jehl</i></li> -<li><a href="https://www.amazon.ca/Designing-Progressive-Enhancement-Building-Everyone/dp/0321658884/ref=sr_1_1?s=books&ie=UTF8&qid=1510586005&sr=1-1">Designing with Progressive Enhancement: Building the Web that Works for Everyone</a> by <i>Todd Parker, Scott Jehl, Maggie Costello Wachs, Patty Toland</i></li> +<li>Web Performance in Action by Jeremy Wagner</li> +<li>Responsible Responsive Design by Scott Jehl</li> +<li>Designing with Progressive Enhancement: Building the Web that Works for Everyone by Todd Parker, Scott Jehl, Maggie Costello Wachs, Patty Toland</li> </ul></content> - <link href="https://bt.ht/chasing-performance"/> - <id>https://bt.ht/chasing-performance</id> + <link href="https://btxx.org/chasing-performance"/> + <id>https://btxx.org/chasing-performance</id> <updated>2017-11-20T10:00:00Z</updated> <published>2017-11-20T10:00:00Z</published> </entry> <entry> <title>CSS Character Unit</title> - <content type="html"><h1>CSS Character Unit</h1> + <content type="html"><h1 id="css-character-unit">CSS Character Unit</h1> + <p>2019-04-23</p> + <p><em>When it comes to proper readability with large portions of text</em>, the golden standard is to have no more than <a href="http://webtypography.net/2.1.2">75 characters per line</a>. This is easy to achieve in the world of print but on the responsive, ever-changing web - statically defined typography becomes a little more difficult.</p> + <p>You could go through the long process of setting up media queries for every possible screen size, adjusting text size and padding accordingly - but there is a <em>better way</em>.</p> -<h2>Introducing character units</h2> -<p>By setting your main containers or text elements with the CSS character unit (<code>ch</code>), you need to set the character length only once. Let's look at a simple example for reference.</p> -<p>Let's say you have an article which will fill the entire length of the screen. Something like this:</p> -<pre><code>&lt;div class=&quot;container&quot;&gt; - &lt;p&gt;Reprehenderit aliqua in quis eiusmod ea culpa aliquip. Velit duis est irure voluptate occaecat labore laborum ut pariatur ex veniam deserunt esse est. Esse sunt exercitation id reprehenderit deserunt elit commodo sit ullamco amet commodo magna consequat. Excepteur voluptate tempor consectetur eu aliqua aliquip laboris aliquip veniam excepteur labore.&lt;/p&gt; - &lt;p&gt;Voluptate excepteur sint magna ipsum occaecat irure sit. In occaecat excepteur in id ullamco id est incididunt irure et. Consectetur veniam exercitation occaecat exercitation labore nulla excepteur irure ex anim. Commodo sint anim non ad excepteur exercitation eiusmod Lorem nisi. Tempor ut ipsum do adipisicing dolore.&lt;/p&gt; -&lt;/div&gt; + +<h2 id="introducing-character-units">Introducing character units</h2> + +<p>By setting your main containers or text elements with the CSS character unit (<code>ch</code>), you need to set the character length only once. Let&#8217;s look at a simple example for reference.</p> + +<p>Let&#8217;s say you have an article which will fill the entire length of the screen. Something like this:</p> + +<pre><code>&#60;div class="container"&#62; + &#60;p&#62;Reprehenderit aliqua in quis eiusmod ea culpa aliquip. Velit duis est irure voluptate occaecat labore laborum ut pariatur ex veniam deserunt esse est. Esse sunt exercitation id reprehenderit deserunt elit commodo sit ullamco amet commodo magna consequat. Excepteur voluptate tempor consectetur eu aliqua aliquip laboris aliquip veniam excepteur labore.&#60;&#47;p&#62; + &#60;p&#62;Voluptate excepteur sint magna ipsum occaecat irure sit. In occaecat excepteur in id ullamco id est incididunt irure et. Consectetur veniam exercitation occaecat exercitation labore nulla excepteur irure ex anim. Commodo sint anim non ad excepteur exercitation eiusmod Lorem nisi. Tempor ut ipsum do adipisicing dolore.&#60;&#47;p&#62; +&#60;&#47;div&#62; </code></pre> + <p>With this structure, you might normally set the default <code>max-width</code> property with your desired maximum width (whatever you believe is the best reading length):</p> + <pre><code>.container { max-width: 38em; } </code></pre> -<p>This works - but it isn't ideal. Time for character units to save the day! You will still target the <code>max-width</code> property but this time we set it to use the <code>ch</code> value like so:</p> + +<p>This works - but it isn&#8217;t ideal. Time for character units to save the day! You will still target the <code>max-width</code> property but this time we set it to use the <code>ch</code> value like so:</p> + <pre><code>.container { max-width: 66ch; } </code></pre> + <p>This setting makes sure content will not exceed more than 66 characters per line, making for a better reading experience with little effort.</p> -<h2>Browser support</h2> + +<h2 id="browser-support">Browser support</h2> + <p>The character unit attribute has pretty great support - even partial IE11! Check out the supported browsers <a href="https://caniuse.com/#feat=ch-unit">here</a>.</p></content> - <link href="https://bt.ht/character-unit"/> - <id>https://bt.ht/character-unit</id> + <link href="https://btxx.org/character-unit"/> + <id>https://btxx.org/character-unit</id> <updated>2019-04-23T10:00:00Z</updated> <published>2019-04-23T10:00:00Z</published> </entry> <entry> <title>Browser History Sucks</title> - <content type="html"><h1>Browser History Sucks</h1> + <content type="html"><h1 id="browser-history-sucks">Browser History Sucks</h1> + <p>2019-04-20</p> + <p><em>Have you ever needed to step back through your browser history</em> to find a particular site or product? Do you remember that experience being good? Most likely not.</p> -<p>Much like printers, the design of browser history interfaces hasn't changed in years. This would be fine if these UIs had been well thought out and optimized for an easy user experience - but they weren't.</p> -<p>Browser history views rely on the user's own memory for more in-depth searches. This defeats the whole purpose of having a robust, documented history. The browser should be doing this heavy-lifting.</p> -<h2>What browsers get wrong</h2> -<p>Modern browsers give the general public too much credit when it comes to memory (I don't mean this as an insult!). To assume users remember the URL or site name when browsing random pages is short-sighted. I find myself asking these types of questions when jumping back into my view history far too often:</p> + +<p>Much like printers, the design of browser history interfaces hasn&#8217;t changed in years. This would be fine if these UIs had been well thought out and optimized for an easy user experience - but they weren&#8217;t.</p> + +<p>Browser history views rely on the user&#8217;s own memory for more in-depth searches. This defeats the whole purpose of having a robust, documented history. The browser should be doing this heavy-lifting.</p> + +<h2 id="what-browsers-get-wrong">What browsers get wrong</h2> + +<p>Modern browsers give the general public too much credit when it comes to memory (I don&#8217;t mean this as an insult!). To assume users remember the URL or site name when browsing random pages is short-sighted. I find myself asking these types of questions when jumping back into my view history far too often:</p> + <ul> -<li>"That article had <em>something</em> to do with CSS..."</li> -<li>"I remember seeing a beautifully designed site a month ago but have no clue what the URL was..."</li> -<li>"My browser crashed and I can't recall that [example website] I had pinned in my tab for weeks..."</li> +<li>&#8220;That article had <em>something</em> to do with CSS&#8230;&#8221;</li> +<li>&#8220;I remember seeing a beautifully designed site a month ago but have no clue what the URL was&#8230;&#8221;</li> +<li>&#8220;My browser crashed and I can&#8217;t recall that [example website] I had pinned in my tab for weeks&#8230;&#8221;</li> </ul> -<p>For reference, let's take a look at the current Chrome (73) history view:</p> + +<p>For reference, let&#8217;s take a look at the current Chrome (73) history view:</p> + <p><img src="/public/images/browser-history-01.webp" alt="Default Chrome History" /></p> + <p>As you may have noticed - this UI is lackluster at best. An oversimplified search field in the header is the only means of filtering items.</p> -<h2>Why not use extensions?</h2> + +<h2 id="why-not-use-extensions">Why not use extensions?</h2> + <p>I know using browser extensions or tagging favorites can alleviate some of these issues. This is great, but why not simplify everything by having these features <em>inside</em> the history view? If an extension can add these features, why not have those extras built-in?</p> -<h2>Two subtle improvements</h2> -<p>A little goes a long way. With just two small changes, we can drastically increase the history view's UX.</p> -<p>We start by adding <u>a date picker</u>. Users open the new calendar icon to filter by days, months or years before searching. Seems trivial, but this saves the headache of filtering through all saved history.</p> + +<h2 id="two-subtle-improvements">Two subtle improvements</h2> + +<p>A little goes a long way. With just two small changes, we can drastically increase the history view&#8217;s UX.</p> + +<p>We start by adding a date picker. Users open the new calendar icon to filter by days, months or years before searching. Seems trivial, but this saves the headache of filtering through all saved history.</p> + <p><img src="/public/images/browser-history-02.webp" alt="Chrome History with date picker" /></p> + <p>The second small functional change we can make is including extra subcategories. These new options allow users to focus their searches based on:</p> + <ul> <li>Session length</li> <li>Number of return visits</li> <li>Last restored tabs</li> </ul> -<h3>Session length</h3> + +<h3 id="session-length">Session length</h3> + <p><img src="/public/images/browser-history-03.webp" alt="Chrome History by session length" /></p> -<p>Allow users to display their history filtered by session duration. This helps when searching for an stagnant page or pinned site during a user's long session. An example default would allow filtering by:</p> + +<p>Allow users to display their history filtered by session duration. This helps when searching for an stagnant page or pinned site during a user&#8217;s long session. An example default would allow filtering by:</p> + <ul> <li>longest to shortest</li> <li>shortest to longest</li> <li>pinned tabs</li> </ul> -<h3>Return visits</h3> + +<h3 id="return-visits">Return visits</h3> + <p><img src="/public/images/browser-history-04.webp" alt="Chrome History by return visits" /></p> + <p>When users make repeat visits to a site or web app, the browser should keep a record of return sessions. This allows the user to refine their search by many or singular visits.</p> -<h3>Last restored tabs</h3> + +<h3 id="last-restored-tabs">Last restored tabs</h3> + <p><img src="/public/images/browser-history-05.webp" alt="Chrome History by restored tabs" /></p> + <p>A basic concept, but the ability for users to view all previous instances of restored tabs is helpful. This would fix most edge cases not covered by the other two categories.</p> -<h2>Far from perfect</h2> + +<h2 id="far-from-perfect">Far from perfect</h2> + <p>The Chrome (or any browser for that matter) browser history view is simplistic to a fault. The current UI is prone to human error, since it makes assumptions and relies heavily on user memory.</p> -<p>These are simple fixes that attempt to boost the basic UX of the history view. Are these concepts absolutely perfect? Not at all. Is it at least an improvement? I believe it is. When products decrease the effort required of it's users, I see that as a positive.</p></content> - <link href="https://bt.ht/browser-history-sucks"/> - <id>https://bt.ht/browser-history-sucks</id> + +<p>These are simple fixes that attempt to boost the basic UX of the history view. Are these concepts absolutely perfect? Not at all. Is it at least an improvement? I believe it is. When products decrease the effort required of it&#8217;s users, I see that as a positive.</p></content> + <link href="https://btxx.org/browser-history-sucks"/> + <id>https://btxx.org/browser-history-sucks</id> <updated>2019-04-20T10:00:00Z</updated> <published>2019-04-20T10:00:00Z</published> </entry> <entry> <title>Bidirectional Scrolling: Why Not Both?</title> - <content type="html"><h1>Bidirectional Scrolling: Why Not Both?</h1> + <content type="html"><h1 id="bidirectional-scrolling-why-not-both">Bidirectional Scrolling: Why Not Both?</h1> + <p>2020-11-09</p> -<p><em>I recently came across Adam Silver's post <a href="https://adamsilver.io/articles/bidirectional-scrolling-whats-not-to-like/">about the merits and pitfalls of bidirectional scrolling</a></em> and found myself conflicted with the design arguments put forth in the article. It's a very good article overall, and I suggest giving it a read before digging deeper into my post here.</p> -<h2>The Premise</h2> + +<p><em>I recently came across Adam Silver&#8217;s post <a href="https://adamsilver.io/articles/bidirectional-scrolling-whats-not-to-like/">about the merits and pitfalls of bidirectional scrolling</a></em> and found myself conflicted with the design arguments put forth in the article. It&#8217;s a very good article overall, and I suggest giving it a read before digging deeper into my post here.</p> + +<h2 id="the-premise">The Premise</h2> + <p>The original article argues that displaying page content via horizontal scrolling (and therefore slightly hiding interactive content) creates a few major issues:</p> + <ul> -<li>it increases the chance users won't see it</li> -<li>there's a greater reliance on digital literacy</li> -<li>it's generally more labour intensive for users</li> +<li>it increases the chance users won&#8217;t see it</li> +<li>there&#8217;s a greater reliance on digital literacy</li> +<li>it&#8217;s generally more labour intensive for users</li> </ul> + <p>Adam also makes a solid statement here:</p> -<blockquote><p>Having to scroll down and across in a zig zag fashion can be tiresome, especially for people with motor impairments.</p> + +<blockquote> +<p>Having to scroll down and across in a zig zag fashion can be tiresome, especially for people with motor impairments.</p> </blockquote> -<p>But I don't believe these issues create a need to completely remove the horizontal "scrolling" design altogether. You can still implement the <code>See All Items</code> category link, while allowing the horizontal content to load in <em>dynamically</em>. Balance is always key.</p> -<h2>Not All At Once, Please!</h2> + +<p>But I don&#8217;t believe these issues create a need to completely remove the horizontal &#8220;scrolling&#8221; design altogether. You can still implement the <code>See All Items</code> category link, while allowing the horizontal content to load in <em>dynamically</em>. Balance is always key.</p> + +<h2 id="not-all-at-once-please">Not All At Once, Please!</h2> + <p>So what exactly do I mean by <em>dynamically</em> loading in horizontal content?</p> + <ul> <li>The user is shown the top 4 items in a given category</li> <li>From there, the user can use the <code>See All Items</code> link to jump into a full category page</li> <li>If they so desire, they can begin scroll horizontally in a given category row + <ul> <li>Once they reach the end of the row, 4 more items will load in automatically to expand the list</li> <li>To avoid a never-ending list, it might be best to limit total row items to ~20 items. At this point the UI could prompt the user to <code>View All Items</code> in that category.</li> +</ul></li> </ul> -</li> -</ul> + <p>By loading the row content in piece-by-piece, initial loads for users will be faster and subsequent list items will load quickly as well (since they would limit to a set default - in this case only 4).</p> -<h2>Final Improvements</h2> -<p>Below you can find a quick, static version of this concept. Here you can see the horizontal list items, along with their corresponding <code>See All Items</code> links. You'll have to use your imagination for how new items would load once you each the end of a horizontal row. (I'm too lazy to spend extra time building out that functionality for a hypothetical blog post)</p> + +<h2 id="final-improvements">Final Improvements</h2> + +<p>Below you can find a quick, static version of this concept. Here you can see the horizontal list items, along with their corresponding <code>See All Items</code> links. You&#8217;ll have to use your imagination for how new items would load once you each the end of a horizontal row. (I&#8217;m too lazy to spend extra time building out that functionality for a hypothetical blog post)</p> + <p><a href="https://codepen.io/bradleytaunt/pen/pobxpXz">Live CodePen Example</a></p></content> - <link href="https://bt.ht/bidirectional-scrolling"/> - <id>https://bt.ht/bidirectional-scrolling</id> + <link href="https://btxx.org/bidirectional-scrolling"/> + <id>https://btxx.org/bidirectional-scrolling</id> <updated>2020-11-09T10:00:00Z</updated> <published>2020-11-09T10:00:00Z</published> </entry> <entry> <title>Better Box Shadows</title> - <content type="html"><h1>Better Box Shadows</h1> + <content type="html"><h1 id="better-box-shadows">Better Box Shadows</h1> + <p>2019-01-08</p> -<p><style> - .message { - position: relative; - z-index: 1; - } - .box-container, - .box-container-depth { - background: white; - box-shadow: 0 4px 8px rgba(0,0,0,0.3); - border: 1px solid #eee; - border-radius: 10px; - margin: 2rem auto; - padding: 10px; - position: relative; - height: 200px; - width: 250px; - } - .box-container-depth { box-shadow: none; } - .box-container-depth .box-container-depth-inner { - bottom: 0; - box-shadow: 0 4px 12px rgba(0,0,0,0.3); - content:''; - position: absolute; - width: 94%; - height: 94%; - left: 3%; - z-index: -1; - } - .box-container-depth-inner.blur { - filter: blur(6px); - } -</style></p> -<p>Box shadow on <abbr title="hypertext markup language">HTML</abbr> elements has been widely supported across most browsers for a while now, but I find the default options don't allow for much visual manipulation of the shadows in general.</p> -<p>Let's take a look at a default configuration of <code>box-shadow</code>:</p> + +<p>Box shadow on HTML elements has been widely supported across most browsers for a while now, but I find the default options don&#8217;t allow for much visual manipulation of the shadows in general.</p> + +<p>Let&#8217;s take a look at a default configuration of <code>box-shadow</code>:</p> + <pre><code>.box-container { box-shadow: 0 4px 8px rgba(0,0,0,0.3); } </code></pre> + <p>In the example above the first property number is the origin of the <em>x-axis</em>, the second number is the origin of the <em>y-axis</em> and the third is the amount of <em>blur</em>.</p> + <p>We should also add some minimal styling to cleanup the <code>.box-container</code> a little bit for our example:</p> -<pre><code>&lt;div class=&quot;box-container&quot;&gt;&lt;/div&gt; -</code></pre> -<pre><code>.box-container { + +<pre><code>&#60;div class="box-container"&#62;&#60;&#47;div&#62; + + +.box-container { box-shadow: 0 4px 8px rgba(0,0,0,0.3); - /* Styles to make it less ugly */ + &#47;* Styles to make it less ugly *&#47; background: white; border-radius: 10px; border: 1px solid #eee; @@ -9303,20 +11953,27 @@ font-family: -apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Robot width: 250px; } </code></pre> + <p>Which would render as this:</p> -<p><div class="box-container"></div></p> + <p>Not bad - but we can do a lot better than this.</p> -<h2>Please sir, I want some more (depth)</h2> + +<h2 id="please-sir-i-want-some-more-depth">Please sir, I want some more (depth)</h2> + <p>We just need to add a simple child <code>div</code> (or use a <code>pseudo</code> element if you prefer) inside our main element we want to apply the shadow to:</p> -<pre><code>&lt;div class=&quot;box-container&quot;&gt; - &lt;div class=&quot;box-container-inner&quot;&gt;&lt;/div&gt; -&lt;/div&gt; + +<pre><code>&#60;div class="box-container"&#62; + &#60;div class="box-container-inner"&#62;&#60;&#47;div&#62; +&#60;&#47;div&#62; </code></pre> -<p>Now we make our inner child element <code>absolute</code> and set it's <code>height</code> and <code>width</code> dynamically to be slightly smaller than it's parent (percentages work best for this). </p> -<p>Remember to set this child element behind it's parent by adding <code>z-index: -1</code>.</p> + +<p>Now we make our inner child element <code>absolute</code> and set it&#8217;s <code>height</code> and <code>width</code> dynamically to be slightly smaller than it&#8217;s parent (percentages work best for this). </p> + +<p>Remember to set this child element behind it&#8217;s parent by adding <code>z-index: -1</code>.</p> + <pre><code>.box-container { - /* No box-shadow needed on this element anymore */ - /* Styles to make it less ugly */ + &#47;* No box-shadow needed on this element anymore *&#47; + &#47;* Styles to make it less ugly *&#47; background: white; border-radius: 10px; border: 1px solid #eee; @@ -9326,11 +11983,14 @@ font-family: -apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Robot width: 250px; } </code></pre> -<h2>Inner Containers</h2> + +<h2 id="inner-containers">Inner Containers</h2> + <p>We also need to target the <code>box-container-inner</code> element set inside the current parent to reflect our custom shadow styling:</p> + <pre><code>.box-container-inner { bottom: 0; - /* The box-shadow is added here now */ + &#47;* The box-shadow is added here now *&#47; box-shadow: 0 4px 12px rgba(0,0,0,0.3); height: 94%; left: 3%; @@ -9339,13 +11999,17 @@ font-family: -apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Robot z-index: -1; } </code></pre> + <p>Which will make the drop-shadow render with a little more realistic depth:</p> -<p><div class="box-container-depth"><span class="box-container-depth-inner"></span></div></p> -<h2>But wait - there's more!</h2> + +<h2 id="but-wait---theres-more">But wait - there&#8217;s more!</h2> + <p>We could stop now and have a decent drop-shadow that is certainly easier on the eyes - but we can make this even better with one extra property - <code>filter:blur();</code>. </p> + <p>So your final code would look like this:</p> + <pre><code>.box-container { - /* Styles to make it less ugly */ + &#47;* Styles to make it less ugly *&#47; background: white; border-radius: 10px; border: 1px solid #eee; @@ -9366,416 +12030,532 @@ font-family: -apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Robot z-index: -1; } </code></pre> -<p>Which renders out into a much smoother blend of a drop-shadow, creating a more realistic illusion of depth:</p> -<p><div class="box-container-depth"> - <span class="box-container-depth-inner blur"></span> -</div></p></content> - <link href="https://bt.ht/better-box-shadows"/> - <id>https://bt.ht/better-box-shadows</id> + +<p>Which renders out into a much smoother blend of a drop-shadow, creating a more realistic illusion of depth:</p></content> + <link href="https://btxx.org/better-box-shadows"/> + <id>https://btxx.org/better-box-shadows</id> <updated>2019-01-08T10:00:00Z</updated> <published>2019-01-08T10:00:00Z</published> </entry> <entry> <title>Hosting with Codeberg Pages</title> - <content type="html"><h1>Hosting with Codeberg Pages</h1> + <content type="html"><h1 id="hosting-with-codeberg-pages">Hosting with Codeberg Pages</h1> + <p>2022-07-29</p> + <p>I recently switched the <a href="https://pblog.bt.ht">pblog</a> project repo over from Sourcehut to Codeberg (mostly for UX reasons) and it got me looking into <a href="https://codeberg.page">Codeberg Pages</a>. It seemed like a cleaner approach to host my personal blog on the same platform I planned to also share the source code.</p> -<p>I decided to share the setup process here since I couldn't find a straightforward guide explaining everything required to get going. So, let's dig in.</p> -<h2>Create the Repos</h2> + +<p>I decided to share the setup process here since I couldn&#8217;t find a straightforward guide explaining everything required to get going. So, let&#8217;s dig in.</p> + +<h2 id="create-the-repos">Create the Repos</h2> + <p><strong>Disclaimer</strong>: My personal blog uses <a href="https://pblog.bt.ht">pblog</a>, so although these instructions will be catered towards that SSG the same concept <em>should</em> apply for any other generator (Jekyll, Hugo, Next, etc.).</p> -<p>The first step is to create the main repo that would house the core files of <code>pblog</code>. Then we need to make a separate repo simply called <code>pages</code>. This second project is where all the generated "static" files get rendered.</p> + +<p>The first step is to create the main repo that would house the core files of <code>pblog</code>. Then we need to make a separate repo simply called <code>pages</code>. This second project is where all the generated &#8220;static&#8221; files get rendered.</p> + <p><em>Side note</em>: Be sure to at least include a <code>README</code> file in that <code>pages</code> repo. This will avoid any errors or warnings when setting up our submodules in the next steps.</p> -<h2>Configuration Edits</h2> + +<h2 id="configuration-edits">Configuration Edits</h2> + <p>Once your two repos are created, you will need to make some minor edits to the <code>_config.sh</code> in the core <code>pblog</code> project to tell the build script where the generated files should go (in this case the <code>pages</code> repo):</p> -<pre><code>OUTPUT=&quot;_output/pages/&quot; + +<pre><code>OUTPUT="_output&#47;pages&#47;" </code></pre> -<h2>The Submodule</h2> -<p>Using terminal, navigate to the <code>_output/</code> directory in your core <code>pblog</code> project. Run the following, remembering to replace the USERNAME parameter with your own:</p> -<pre><code>git submodule add git@codeberg.org:USERNAME/pages.git + +<h2 id="the-submodule">The Submodule</h2> + +<p>Using terminal, navigate to the <code>_output&#47;</code> directory in your core <code>pblog</code> project. Run the following, remembering to replace the USERNAME parameter with your own:</p> + +<pre><code>git submodule add git@codeberg.org:USERNAME&#47;pages.git </code></pre> + <p>If everything worked correctly you should now have a <code>.gitmodules</code> file in your main <code>pblog</code> project. If you get any errors, you might need to include the name of the directory at the end of the command:</p> -<pre><code>git submodule add git@codeberg.org:USERNAME/pages.git pages + +<pre><code>git submodule add git@codeberg.org:USERNAME&#47;pages.git pages </code></pre> -<h2>The Workflow</h2> -<p>Now you can make changes, add new posts and pages in the main <code>pblog</code> project and have those generated files render into your other <code>pages</code> repo. For this workflow, I simply push commits to both projects when I am happy with my changes but I'm sure you could look into automating this process (ie. a single push from the <code>pblog</code> repo forces a the <code>pages</code> repo to also update).</p> + +<h2 id="the-workflow">The Workflow</h2> + +<p>Now you can make changes, add new posts and pages in the main <code>pblog</code> project and have those generated files render into your other <code>pages</code> repo. For this workflow, I simply push commits to both projects when I am happy with my changes but I&#8217;m sure you could look into automating this process (ie. a single push from the <code>pblog</code> repo forces a the <code>pages</code> repo to also update).</p> + <p>Now you can navigate to the standard Codeberg Pages URL to see it in action:</p> + <pre><code>USERNAME.codeberg.page </code></pre> -<p>If you want to use your own custom domain (who doesn't?) then continue reading.</p> -<h2>Custom Domains (Optional)</h2> + +<p>If you want to use your own custom domain (who doesn&#8217;t?) then continue reading.</p> + +<h2 id="custom-domains-optional">Custom Domains (Optional)</h2> + <p>The first thing you will need to do is add a <code>.domains</code> file to your <code>pages</code> root directory. In this file you will want to list your custom domain on the first line, followed by the standard Codeberg pages URL below it. Like so:</p> + <pre><code>yourcustomdomain.com USERNAME.codeberg.page </code></pre> -<p>I'm keeping this very basic, but I suggest you look further into the <a href="https://docs.codeberg.org/codeberg-pages/#custom-domains">official documentation</a> if there are any extra settings you'd like to tinker with.</p> + +<p>I&#8217;m keeping this very basic, but I suggest you look further into the <a href="https://docs.codeberg.org/codeberg-pages/#custom-domains">official documentation</a> if there are any extra settings you&#8217;d like to tinker with.</p> + <p>The final step is configuring a <code>CNAME</code> DNS setting through your registrar:</p> -<pre><code>@ -&gt; USERNAME.codeberg.page + +<pre><code>@ -&#62; USERNAME.codeberg.page </code></pre> -<p>Give the DNS settings a bit of time to take (24-48 hours) and you'll have your custom domain working just fine.</p> + +<p>Give the DNS settings a bit of time to take (24-48 hours) and you&#8217;ll have your custom domain working just fine.</p> + <p>Happy hosting!</p></content> - <link href="https://bt.ht/berg"/> - <id>https://bt.ht/berg</id> + <link href="https://btxx.org/berg"/> + <id>https://btxx.org/berg</id> <updated>2022-07-29T10:00:00Z</updated> <published>2022-07-29T10:00:00Z</published> </entry> <entry> <title>Being More Efficient as a Designer and Developer</title> - <content type="html"><h1>Being More Efficient as a Designer and Developer</h1> + <content type="html"><h1 id="being-more-efficient-as-a-designer-and-developer">Being More Efficient as a Designer and Developer</h1> + <p>2019-09-28</p> -<p><em>I recently began working on a small side project</em> (a marketing site / blog for an upcoming UX book I'm writing, but I have nothing to promote yet - sorry) and found myself circling around different static site generators (SSG) in the initial design concepts. The thought of learning an entirely new blogging platform was inspiring and seemed like a good excuse to expand my skillset.</p> -<p>Although I've used 11ty and Hugo in the past for client work, this personal website runs on Jekyll. I'm very familiar with Jekyll and can push out a point-of-concept site in a flash with little-to-no effort. So, why was I looking to jump into a SSG I hadn't used before? </p> -<p>And that got me thinking... <strong>Why am I moving away from being efficient?</strong></p> -<h2>Before we begin...</h2> -<p>I should preface everything else I'm going to mention in this post with this: <em>learning new stuff is awesome</em>. You should expand your knowledge as much as you can, no matter what industry you find yourself in. I've found it to be a great catalyst for boosting my passion in design and development.</p> -<p>Okay, I've made it clear that learning is important to the growth of your career - so please keep that in mind before you read my next statement:</p> + +<p><em>I recently began working on a small side project</em> (a marketing site &#47; blog for an upcoming UX book I&#8217;m writing, but I have nothing to promote yet - sorry) and found myself circling around different static site generators (SSG) in the initial design concepts. The thought of learning an entirely new blogging platform was inspiring and seemed like a good excuse to expand my skillset.</p> + +<p>Although I&#8217;ve used 11ty and Hugo in the past for client work, this personal website runs on Jekyll. I&#8217;m very familiar with Jekyll and can push out a point-of-concept site in a flash with little-to-no effort. So, why was I looking to jump into a SSG I hadn&#8217;t used before? </p> + +<p>And that got me thinking&#8230; <strong>Why am I moving away from being efficient?</strong></p> + +<h2 id="before-we-begin">Before we begin&#8230;</h2> + +<p>I should preface everything else I&#8217;m going to mention in this post with this: <em>learning new stuff is awesome</em>. You should expand your knowledge as much as you can, no matter what industry you find yourself in. I&#8217;ve found it to be a great catalyst for boosting my passion in design and development.</p> + +<p>Okay, I&#8217;ve made it clear that learning is important to the growth of your career - so please keep that in mind before you read my next statement:</p> + <p><strong>Just use what you already know.</strong></p> + <p>By using your current experience (maybe even expertise) with a design system, CSS framework, blogging platform, programming language, etc. you can get something <em>built</em>. Not to mention you can get that thing built in a <em>fraction of the time</em>. After all, building things is kind of the point of being a designer (or developer), right?</p> -<p>My current side project may be a slight edge case in this regard. Since it's a personal "dev" website, most of the tech stack choices comes down to personal preference - not client requirements. But I believe my point still remains: you shouldn't reach for something new and shiny <em>just because</em> it's new and shiny.</p> -<h2>Some vague examples</h2> + +<p>My current side project may be a slight edge case in this regard. Since it&#8217;s a personal &#8220;dev&#8221; website, most of the tech stack choices comes down to personal preference - not client requirements. But I believe my point still remains: you shouldn&#8217;t reach for something new and shiny <em>just because</em> it&#8217;s new and shiny.</p> + +<h2 id="some-vague-examples">Some vague examples</h2> + <p>It might be easier to understand what I mean by using some possible real-world examples:</p> + <table> -<tr><th>Problem </th><th>New Way </th><th>Efficient Way </th></tr> -<tr><td>A local bakery needs product and e-cart functionality </td><td>Learn a new custom ecommerce platform </td><td>Use a popular pre-existing library you're familiar with </td></tr> -<tr><td>Create an add-on blog for a medical clinic </td><td>Try a custom built static site generator and hook in a git-based CMS </td><td>Spin up a quick WordPress site and hand-off </td></tr> -<tr><td>UI mockups for a workout iOS app </td><td>Test out the newest design tool just released </td><td>Use your go-to default design tool you (Sketch, Figma, etc) </td></tr> -</table><p>I know all of this is very much "common sense", but you would be surprised how often we reach out for the latest and greatest tools (we are creative problem-solvers, after-all). If a current project allots you the time to learn a new skillset alongside outputting a quality product - then more power to you. In my experience that's a rare luxury, so my advice is to focus on shipping quality work (whether that's code, design, analytics, content, etc) instead of getting caught up in the "new and shiny".</p> -<h2>But wait, how / when do I learn new things?</h2> -<p>It isn't exactly ground breaking to state that you should keep things simple as a developer. There are probably hundreds of posts on the web advocating for the exact same thing - which is good. At the same time, we as designers and developers need to avoid stagnation - something that can happen all too easily.</p> -<p>So how do we learn new things? This is a hard thing to answer. Really, the best response would be: <strong>it depends on the designer / developer</strong>. I know, <em>what a cop-out</em>. Unfortunately, it's true. There is no one solution to learning anything new.</p> +<thead> +<tr> +<th>Problem</th> +<th>New Way</th> +<th>Efficient Way</th> +</tr> +</thead> + +<tbody> +<tr> +<td>A local bakery needs product and e-cart functionality</td> +<td>Learn a new custom ecommerce platform</td> +<td>Use a popular pre-existing library you&#8217;re familiar with</td> +</tr> +<tr> +<td>Create an add-on blog for a medical clinic</td> +<td>Try a custom built static site generator and hook in a git-based CMS</td> +<td>Spin up a quick WordPress site and hand-off</td> +</tr> +<tr> +<td>UI mockups for a workout iOS app</td> +<td>Test out the newest design tool just released</td> +<td>Use your go-to default design tool you (Sketch, Figma, etc)</td> +</tr> +</tbody> +</table> + +<p>I know all of this is very much &#8220;common sense&#8221;, but you would be surprised how often we reach out for the latest and greatest tools (we are creative problem-solvers, after-all). If a current project allots you the time to learn a new skillset alongside outputting a quality product - then more power to you. In my experience that&#8217;s a rare luxury, so my advice is to focus on shipping quality work (whether that&#8217;s code, design, analytics, content, etc) instead of getting caught up in the &#8220;new and shiny&#8221;.</p> + +<h2 id="but-wait-how-when-do-i-learn-new-things">But wait, how &#47; when do I learn new things?</h2> + +<p>It isn&#8217;t exactly ground breaking to state that you should keep things simple as a developer. There are probably hundreds of posts on the web advocating for the exact same thing - which is good. At the same time, we as designers and developers need to avoid stagnation - something that can happen all too easily.</p> + +<p>So how do we learn new things? This is a hard thing to answer. Really, the best response would be: <strong>it depends on the designer &#47; developer</strong>. I know, <em>what a cop-out</em>. Unfortunately, it&#8217;s true. There is no one solution to learning anything new.</p> + <p>The best I can do is offer up some possible options:</p> + <ul> <li><p>Learn outside of work</p> <ul> -<li>Reading / listening to a technical book on your commute or before bed</li> +<li>Reading &#47; listening to a technical book on your commute or before bed</li> <li>Take an online course you can work on after hours</li> -</ul> -</li> -<li><p>Contribute to an open source project that you aren't familiar with but are interested in</p> +</ul></li> +<li><p>Contribute to an open source project that you aren&#8217;t familiar with but are interested in</p> <ul> -<li>Even tiny contributions go a long way, don't doubt yourself so much</li> -</ul> -</li> +<li>Even tiny contributions go a long way, don&#8217;t doubt yourself so much</li> +</ul></li> <li><p>Ask your current company (if not a freelancer that is) to learn on their time</p> <ul> -<li>It's a valid argument that your company should have vested interest in you becoming a better developer / designer</li> -</ul> -</li> +<li>It&#8217;s a valid argument that your company should have vested interest in you becoming a better developer &#47; designer</li> +</ul></li> </ul> -<h2>Easier said than done</h2> -<p>Sometimes, even the suggestions above don't work for certain individuals. Life is hectic and other important things can pop-up taking precedence. Don't let it get you down - there are more important things in life than mastering the newest framework that released 25 minutes ago.</p> -<p>My motto is to keep shipping quality products that you actually give a shit about. Otherwise it doesn't matter how "new" it is.</p></content> - <link href="https://bt.ht/being-efficient"/> - <id>https://bt.ht/being-efficient</id> + +<h2 id="easier-said-than-done">Easier said than done</h2> + +<p>Sometimes, even the suggestions above don&#8217;t work for certain individuals. Life is hectic and other important things can pop-up taking precedence. Don&#8217;t let it get you down - there are more important things in life than mastering the newest framework that released 25 minutes ago.</p> + +<p>My motto is to keep shipping quality products that you actually give a shit about. Otherwise it doesn&#8217;t matter how &#8220;new&#8221; it is.</p></content> + <link href="https://btxx.org/being-efficient"/> + <id>https://btxx.org/being-efficient</id> <updated>2019-09-28T10:00:00Z</updated> <published>2019-09-28T10:00:00Z</published> </entry> <entry> <title>Improving Laptop Battery Performance on OpenBSD</title> - <content type="html"><h1>Improving Laptop Battery Performance on OpenBSD</h1> + <content type="html"><h1 id="improving-laptop-battery-performance-on-openbsd">Improving Laptop Battery Performance on OpenBSD</h1> + <p>2023-06-13</p> -<p>It is no secret that OpenBSD has poor battery performance on laptops. Although not as impressive as something like Alpine Linux or FreeBSD, you can tweak OpenBSD <em>just enough</em> to squeeze more life out of your machine's battery.</p> -<h2>Our New Best Friend: <code>ampd</code></h2> -<p>I won't go into great detail about <code>ampd</code> here - that's what the incredible <a href="https://man.openbsd.org/apmd">documentation is for</a>. You'll want to make sure to start it before trying to configure it:</p> + +<p>It is no secret that OpenBSD has poor battery performance on laptops. Although not as impressive as something like Alpine Linux or FreeBSD, you can tweak OpenBSD <em>just enough</em> to squeeze more life out of your machine&#8217;s battery.</p> + +<h2 id="our-new-best-friend-">Our New Best Friend: <code>ampd</code></h2> + +<p>I won&#8217;t go into great detail about <code>ampd</code> here - that&#8217;s what the incredible <a href="https://man.openbsd.org/apmd">documentation is for</a>. You&#8217;ll want to make sure to start it before trying to configure it:</p> + <pre><code>doas rcctl start apmd </code></pre> + <p>If already running in a live session, you can default to <code>-A</code> (auto) but I suggest setting cpu performance to low:</p> + <pre><code>apm -L </code></pre> + <p>To make these changes permanent on boot:</p> + <pre><code>doas rcctl set apmd flags -L </code></pre> -<p>Optimizating battery life via <code>ampd</code> will have the most noticable impact but you can improve things even further by implementing some extra "small" performance wins.</p> -<h2>Small Performance Wins</h2> + +<p>Optimizating battery life via <code>ampd</code> will have the most noticable impact but you can improve things even further by implementing some extra &#8220;small&#8221; performance wins.</p> + +<h2 id="small-performance-wins">Small Performance Wins</h2> + <ol> -<li>Reduce your screen's brightness (<code>xbacklight -set 50</code>)</li> +<li>Reduce your screen&#8217;s brightness (<code>xbacklight -set 50</code>)</li> <li>Use a lightweight window manager instead of a beefer desktop environment</li> <li>Enable battery saving options in your system BIOS (if available)</li> <li>Disable the fingerprint scanner and bluetooth in your system BIOS (if available)</li> <li>Use utilities such as <code>mpv</code> and <code>ffmpeg</code> for media consumption</li> <li>Reduce the number of open applications at any given time</li> </ol></content> - <link href="https://bt.ht/battery"/> - <id>https://bt.ht/battery</id> + <link href="https://btxx.org/battery"/> + <id>https://btxx.org/battery</id> <updated>2023-06-13T10:00:00Z</updated> <published>2023-06-13T10:00:00Z</published> </entry> <entry> <title>Batch Converting Images to webp with macOS Automator</title> - <content type="html"><h1>Batch Converting Images to webp with macOS Automator</h1> + <content type="html"><h1 id="batch-converting-images-to-webp-with-macos-automator">Batch Converting Images to webp with macOS Automator</h1> + <p>2021-10-15</p> -<p>A great deal of my time working as a web/UI designer is spent exporting and/or converting images for software products and websites. Although a lot of modern applications can render image conversions at build time, a custom conversion is sometimes requested for an image to be set as <code>webp</code>.</p> -<p>You <em>could</em> download one of the many native apps from the Mac App Store to do this for you - but why not create your own script and run it with a simple right-click directly inside Finder? <strong>Let's do just that!</strong></p> -<h2>Basic requirements</h2> + +<p>A great deal of my time working as a web&#47;UI designer is spent exporting and&#47;or converting images for software products and websites. Although a lot of modern applications can render image conversions at build time, a custom conversion is sometimes requested for an image to be set as <code>webp</code>.</p> + +<p>You <em>could</em> download one of the many native apps from the Mac App Store to do this for you - but why not create your own script and run it with a simple right-click directly inside Finder? <strong>Let&#8217;s do just that!</strong></p> + +<h2 id="basic-requirements">Basic requirements</h2> + <p><strong>Important!</strong>: As of this time of writing, the official <code>libwebp</code> package release is <em>libwebp-1.2.1-mac-10.15</em>. If this has been updated since then, change the command below to match that of the proper release version.</p> -<p>1) First you will need to download the <code>libwebp</code> package to your Downloads folder: <a href="https://developers.google.com/speed/webp/download">developers.google.com/speed/webp/download</a> - - <em>Look for the "Download for macOS link"</em></p> -<p>2) Next we will need to copy the <code>cwebp</code> folder to our <code>/usr/local/bin</code> directory: - - Open macOS Terminal - - Run <code>sudo cp /Downloads/libwebp-1.2.1-mac-10.15/bin/cwebp /usr/local/bin</code> - - <em>Note:</em> if the <code>/usr/local/bin</code> directory doesn't exist, simply create it by running: <code>sudo cd /usr/local &amp;&amp; mkdir bin</code></p> -<h2>Creating our custom Automator script</h2> -<p>1) Open the macOS Automator from the Applications folder</p> -<p>2) Select <code>Quick Option</code> from the first prompt</p> -<p>3) Set "Workflow receives current" to <code>image files</code></p> -<p>4) Set the label "in" to <code>Finder</code></p> -<p>5) From the left pane, select "Library &gt; Utilities"</p> -<p>6) From the presented choices in the next pane, drag and drop <code>Run Shell Script</code> into the far right pane</p> -<p>7) Set the area "Pass input" to <code>as arguments</code></p> -<p>8) Enter the following code below as your script and type <code>⌘-S</code> to save (name it something like "Convert to webp")</p> -<pre><code>for f in &quot;$@&quot; + +<ol> +<li><p>First you will need to download the <code>libwebp</code> package to your Downloads folder: <a href="https://developers.google.com/speed/webp/download">developers.google.com&#47;speed&#47;webp&#47;download</a> </p> + +<ul> +<li><em>Look for the &#8220;Download for macOS link&#8221;</em></li> +</ul></li> +<li><p>Next we will need to copy the <code>cwebp</code> folder to our <code>&#47;usr&#47;local&#47;bin</code> directory:</p> + +<ul> +<li>Open macOS Terminal</li> +<li>Run <code>sudo cp &#47;Downloads&#47;libwebp-1.2.1-mac-10.15&#47;bin&#47;cwebp &#47;usr&#47;local&#47;bin</code></li> +<li><em>Note:</em> if the <code>&#47;usr&#47;local&#47;bin</code> directory doesn&#8217;t exist, simply create it by running: <code>sudo cd &#47;usr&#47;local &#38;&#38; mkdir bin</code></li> +</ul></li> +</ol> + +<h2 id="creating-our-custom-automator-script">Creating our custom Automator script</h2> + +<ol> +<li><p>Open the macOS Automator from the Applications folder</p></li> +<li><p>Select <code>Quick Option</code> from the first prompt</p></li> +<li><p>Set &#8220;Workflow receives current&#8221; to <code>image files</code></p></li> +<li><p>Set the label &#8220;in&#8221; to <code>Finder</code></p></li> +<li><p>From the left pane, select &#8220;Library &#62; Utilities&#8221;</p></li> +<li><p>From the presented choices in the next pane, drag and drop <code>Run Shell Script</code> into the far right pane</p></li> +<li><p>Set the area &#8220;Pass input&#8221; to <code>as arguments</code></p></li> +<li><p>Enter the following code below as your script and type <code>⌘-S</code> to save (name it something like &#8220;Convert to webp&#8221;)</p> + +<p>for f in &#8220;$@&#8221; do -/usr/local/bin/cwebp -q 85 &quot;$f&quot; -o &quot;${f%.*}.webp&quot; -done -</code></pre> +&#47;usr&#47;local&#47;bin&#47;cwebp -q 85 &#8220;$f&#8221; -o &#8220;${f%.*}.webp&#8221; +done</p></li> +</ol> + <p>For visual reference, it should look something like this:</p> -<p><figure> -<img src="/public/images/automator.png" alt="macOS Automator"> -<figcaption>(<a href="/public/images/automator.webp">link to hi-res image</a>)</figcaption> -</figure></p> + <p>And when right-clicking an image file in the Finder window, it should now give you the option to convert:</p> -<p><figure> -<img src="/public/images/automator-2.png" alt="Right click to convert"> -<figcaption>(<a href="/public/images/automator-2.webp">link to hi-res image</a>)</figcaption> -</figure></p> -<h2>Making edits to your script</h2> -<p>If you ever have the need to edit this script (for example, changing the default <code>85</code> quality parameter), you will need to navigate to your <code>~/Library/Services</code> folder and open your custom webp Quick Action in the Automator application. </p> + +<h2 id="making-edits-to-your-script">Making edits to your script</h2> + +<p>If you ever have the need to edit this script (for example, changing the default <code>85</code> quality parameter), you will need to navigate to your <code>~&#47;Library&#47;Services</code> folder and open your custom webp Quick Action in the Automator application. </p> + <p>Simple as that!</p> -<h2>Possible Hiccups</h2> + +<h2 id="possible-hiccups">Possible Hiccups</h2> + <p>I was contacted by the very helpful <a href="https://kevq.uk">Kev Quirk</a> about a minor problem he encountered while following this tutorial. When trying to run <code>cwebp</code> he received the following error message:</p> -<pre><code>cwebp cannot be opened because it's from an unverified developer + +<pre><code>cwebp cannot be opened because it&#39;s from an unverified developer </code></pre> + <p>Doing the next steps seemed to have fixed this issue for him:</p> + <ol> -<li>Click on the "Open in Finder" in the error message prompt</li> +<li>Click on the &#8220;Open in Finder&#8221; in the error message prompt</li> <li>Double-click on the <code>cwebp</code> utility to open in Terminal</li> -<li>You'll then be prompted with a pop-up asking if you wish to execute</li> +<li>You&#8217;ll then be prompted with a pop-up asking if you wish to execute</li> </ol> + <p>After following these steps, the issue should be resolved.</p></content> - <link href="https://bt.ht/batch-webp-conversion"/> - <id>https://bt.ht/batch-webp-conversion</id> + <link href="https://btxx.org/batch-webp-conversion"/> + <id>https://btxx.org/batch-webp-conversion</id> <updated>2021-10-15T10:00:00Z</updated> <published>2021-10-15T10:00:00Z</published> </entry> <entry> <title>Basic Gulp Build for Sass</title> - <content type="html"><h1>Basic Gulp Build for Sass</h1> + <content type="html"><h1 id="basic-gulp-build-for-sass">Basic Gulp Build for Sass</h1> + <p>2019-01-15</p> -<p>Some designers might shy away from build tools when first starting out and I can understand the reasoning - task runners like <code>gulp</code> and <code>grunt</code> can seem daunting at first. So, I've decided to showcase my go-to setup for <code>gulp</code> and explain what the heck it does step-by-step. </p> -<p>Here is the final <code>gulp.js</code> file in all it's glory:</p> -<pre><code>var gulp = require('gulp'); -var shell = require('gulp-shell'); -var sass = require('gulp-sass'); - -/* Build and watch Jekyll (change this task to whatever you need) */ -gulp.task('generate', shell.task('jekyll serve')); - -/* Compile SCSS files to CSS */ -gulp.task('styles', function () { - return gulp.src('_includes/assets/sass/styles.scss') + +<p>Some designers might shy away from build tools when first starting out and I can understand the reasoning - task runners like <code>gulp</code> and <code>grunt</code> can seem daunting at first. So, I&#8217;ve decided to showcase my go-to setup for <code>gulp</code> and explain what the heck it does step-by-step. </p> + +<p>Here is the final <code>gulp.js</code> file in all it&#8217;s glory:</p> + +<pre><code>var gulp = require(&#39;gulp&#39;); +var shell = require(&#39;gulp-shell&#39;); +var sass = require(&#39;gulp-sass&#39;); + +&#47;* Build and watch Jekyll (change this task to whatever you need) *&#47; +gulp.task(&#39;generate&#39;, shell.task(&#39;jekyll serve&#39;)); + +&#47;* Compile SCSS files to CSS *&#47; +gulp.task(&#39;styles&#39;, function () { + return gulp.src(&#39;_includes&#47;assets&#47;sass&#47;styles.scss&#39;) .pipe(sass({ - outputStyle: 'compressed' - }).on('error', sass.logError)) - .pipe(gulp.dest('_includes/assets/css/')); + outputStyle: &#39;compressed&#39; + }).on(&#39;error&#39;, sass.logError)) + .pipe(gulp.dest(&#39;_includes&#47;assets&#47;css&#47;&#39;)); }); -/* Compile the assets */ -gulp.task('assets', gulp.parallel( - 'styles' +&#47;* Compile the assets *&#47; +gulp.task(&#39;assets&#39;, gulp.parallel( + &#39;styles&#39; )); -/* Build */ -gulp.task('build', gulp.series( - 'assets', - 'generate' +&#47;* Build *&#47; +gulp.task(&#39;build&#39;, gulp.series( + &#39;assets&#39;, + &#39;generate&#39; )); </code></pre> -<p>Trust me, it's not complicated at all.</p> -<h2>Grabbing what we need</h2> + +<p>Trust me, it&#8217;s not complicated at all.</p> + +<h2 id="grabbing-what-we-need">Grabbing what we need</h2> + <p>For our basic build file we are going to need only three modules: <code>gulp</code>, <code>gulp-shell</code> and <code>gulp-sass</code>.</p> -<pre><code>var gulp = require('gulp'); -var shell = require('gulp-shell'); -var sass = require('gulp-sass'); + +<pre><code>var gulp = require(&#39;gulp&#39;); +var shell = require(&#39;gulp-shell&#39;); +var sass = require(&#39;gulp-sass&#39;); </code></pre> -<h4>gulp</h4> -<p>This is the streaming build system, without it we can't do anything else.</p> -<h4>gulp-shell</h4> + +<h4 id="gulp">gulp</h4> + +<p>This is the streaming build system, without it we can&#8217;t do anything else.</p> + +<h4 id="gulp-shell">gulp-shell</h4> + <p>A gulp command line interface for us to interact with our terminal.</p> -<h4>gulp-sass</h4> + +<h4 id="gulp-sass">gulp-sass</h4> + <p>Required for gulp to compile Sass into vanilla CSS.</p> -<h4>Bonus tasks</h4> -<p><p>You can also toss in <code>gulp-minify</code> to clean-up any JavaScript you might be using, but for this example we're just going to keep things simple and focus on Sass only.</p></p> -<p><p class="no-margin">Maybe I'll write about my <code>js</code> build workflow in a future article.</p></p> -<h2>Generating the build</h2> -<p>Our first step is to create the default task that will generate our build. In this example we are making the assumption that we're building a Jekyll website (but you can place any build command here):</p> -<pre><code>gulp.task('generate', shell.task('jekyll serve')); -</code></pre> -<p>Don't worry if this <code>generate</code> isn't clear, we come back to that later.</p> -<h2>Processing our pre-processor</h2> -<p>We will name this next task <code>styles</code> since that's what it outputs - our styling. We start by telling gulp where our main <code>scss</code> directory is:</p> -<pre><code>/* Change this directory to match yours */ -return gulp.src('_includes/assets/sass/styles.scss') + +<h4 id="bonus-tasks">Bonus tasks</h4> + +<h2 id="generating-the-build">Generating the build</h2> + +<p>Our first step is to create the default task that will generate our build. In this example we are making the assumption that we&#8217;re building a Jekyll website (but you can place any build command here):</p> + +<pre><code>gulp.task(&#39;generate&#39;, shell.task(&#39;jekyll serve&#39;)); +</code></pre> + +<p>Don&#8217;t worry if this <code>generate</code> isn&#8217;t clear, we come back to that later.</p> + +<h2 id="processing-our-pre-processor">Processing our pre-processor</h2> + +<p>We will name this next task <code>styles</code> since that&#8217;s what it outputs - our styling. We start by telling gulp where our main <code>scss</code> directory is:</p> + +<pre><code>&#47;* Change this directory to match yours *&#47; +return gulp.src(&#39;_includes&#47;assets&#47;sass&#47;styles.scss&#39;) </code></pre> + <p>This next piece tells the plugin to compress our final compiled CSS, log any errors if there are issues with the build and then export it to our destination directory:</p> + <pre><code>.pipe(sass({ - outputStyle: 'compressed' -}).on('error', sass.logError)) -</code></pre> -<pre><code>/* Change this to your destination directory */ -.pipe(gulp.dest('_includes/assets/css/')); + outputStyle: &#39;compressed&#39; +}).on(&#39;error&#39;, sass.logError)) + +&#47;* Change this to your destination directory *&#47; +.pipe(gulp.dest(&#39;_includes&#47;assets&#47;css&#47;&#39;)); </code></pre> -<h2>Building our assets</h2> -<p>This step isn't 100% needed, but I like to include it for when more assets need to be added (minifying JavaScript, compressing images, etc)</p> -<pre><code>/* + +<h2 id="building-our-assets">Building our assets</h2> + +<p>This step isn&#8217;t 100% needed, but I like to include it for when more assets need to be added (minifying JavaScript, compressing images, etc)</p> + +<pre><code>&#47;* Compile the assets -*/ -gulp.task('assets', gulp.parallel( - 'styles' +*&#47; +gulp.task(&#39;assets&#39;, gulp.parallel( + &#39;styles&#39; )); </code></pre> -<h2>Altogether now!</h2> + +<h2 id="altogether-now">Altogether now!</h2> + <p>Now we add a task that runs all other tasks in our gulp file (in this case it will run both <code>assets</code> and <code>generate</code>)</p> -<pre><code>/* + +<pre><code>&#47;* Build -*/ -gulp.task('build', gulp.series( - 'assets', - 'generate' +*&#47; +gulp.task(&#39;build&#39;, gulp.series( + &#39;assets&#39;, + &#39;generate&#39; )); </code></pre> -<p>And that's it - we're done! A very basic <code>gulp</code> build for compiling Sass.</p></content> - <link href="https://bt.ht/basic-gulp-build-for-sass"/> - <id>https://bt.ht/basic-gulp-build-for-sass</id> + +<p>And that&#8217;s it - we&#8217;re done! A very basic <code>gulp</code> build for compiling Sass.</p></content> + <link href="https://btxx.org/basic-gulp-build-for-sass"/> + <id>https://btxx.org/basic-gulp-build-for-sass</id> <updated>2019-01-15T10:00:00Z</updated> <published>2019-01-15T10:00:00Z</published> </entry> <entry> <title>Base64 All The Things! (Sometimes)</title> - <content type="html"><h1>Base64 All The Things! (Sometimes)</h1> + <content type="html"><h1 id="base64-all-the-things-sometimes">Base64 All The Things! (Sometimes)</h1> + <p>2020-03-18</p> -<p><em>An extremely overlooked process for displaying fonts</em>, images, documents, spreadsheets, etc. on the web is the use of <strong>base64 encoding</strong>. Although it may not be the most efficient (or easy) way to display and include these elements it can be a lifesaver in certain situations.</p> -<p><h2>What is base64 encoding?</h2> -<p>It might be common knowledge, but I think breaking down exactly what base64 encoding is could be very helpful to beginner web developers:</p> -<blockquote> - <p>Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation.</p> - <cite>- Wikipedia</cite> -</blockquote> -<p>In simpler terms: it is a encoded format that can change an element like this:</p></p> -<pre><code>&lt;img src=&quot;/path/to/image.webp&quot; alt=&quot;Cool image&quot;&gt; -</code></pre> -<p>Into this:</p> -<pre><code>&lt;img src=&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAASwCAYAA...PnyMAAAAASUVORK5CYII=&quot; alt=&quot;Cool image&quot;&gt; -</code></pre> -<p><h2>See it in action</h2></p> -<p><figure> -<img src="https://cdn.dribbble.com/users/29329/screenshots/9072216/media/0137ce6b6a5fa89d729ac9e4d488f002.png" alt="Just an image"> -<figcaption>This image is pulled in with an HTTP request (<a href="https://cdn.dribbble.com/users/29329/screenshots/9072216/media/0137ce6b6a5fa89d729ac9e4d488f002.webp">direct link to image</a>)</figcaption> -</figure></p> -<p><figure> -<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAASwCAYAAACjAYaXAACAAElEQVR42uz9eZSlZ2Hf+/7ePdRcXdXzqJbUmhsJqSUkBELMYIFBYMD2Adtx7BXbcU58bobjdddZNzmLk7tucnKuT+zcxElsB8eO7RiDwQO2sJmMhBFCICSheex5nmqu2uN7/yhJBrur1Bq7tfX5LKpLYr97165nv73WfvdXz/MUZVmWAQAAAAAA6CEVQwAAAAAAAPQaAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6Ts0QAAAAL6Zut5tms5l2u/3MV6vVSqfTSbfbTaVSSb1eT7VaTb1eT61WS61WS19fX4qiMIAAAMCLQgABAACek06nk1arlfn5+Zw8eTInT57M8ePHn/k+NTWVhYWFtFqtNJvNZ7632+10Op1Uq9X09fWlXq8/89XX15fBwcGMj49n1apVz3ytXr06Y2Nj6e/vT71eT6ViEjsAAHB6BBAAAGBZ7XY7R48ezeHDh3Pw4MHs3bs3e/bsyeHDh3Py5MlMTEw88zU1NZVGo5Fut5uyLJ/5/r1fRVE881WpVJ75XqlUMjg4mBUrVmTlypUZGxvLypUrMz4+nk2bNuWcc87J1q1bs2HDhqxbty6rVq1KtVr1AgEAAKdUlGVZGgYAAOBpnU4nMzMz2bNnTx566KE88cQT2bt3b/bt25cDBw7kyJEjOXr0aBYWFl625zQyMpK1a9dm/fr12bx5c7Zs2ZKtW7fmggsuyPbt27Nx48YMDw9bQgsAAHiGAAIAAKTT6eTYsWPZuXNnHn744Tz44IN54IEH8uijj+bw4cNpNBppNptnx0VMUTyzZNamTZuyffv2XHbZZbn88stz4YUXZtu2bVmxYoXlsgAA4FVOAAEAgFepsiwzNzeXnTt35tvf/na+853v5OGHH87jjz+eAwcOpNFovGJ+l+Hh4WdmhFx++eW56qqrcu2112bz5s3p7+/3YgMAwKuQAAIAAK8yZVnmxIkTuffee/Ptb387X//613PPPffk4MGDabVar/jfb2BgIFu2bMn111+f17/+9bnuuuuyffv2jIyMePEBAOBVRAABAIBXiW63m4MHD+bOO+/MHXfckdtvvz0PP/xwjh071rO/84YNG7Jjx45cd911ufHGG3PllVdm1apVlscCAIBXAQEEAABeBY4fP57bb789X/rSl/KXf/mX2bVr18u+xFW1UqRSSbrdpNN9eS9DBgYGctVVV+Vtb3tbbrrpplxzzTUZHh52YgAAQA8TQAAAoEeVZZmJiYl897vfzRe/+MXccsstefjhhzM/P//CLySS1GuV9NeL1GuVjAxUs2KolrGhWlYMVTMyUEu9VqRefeqrXklftUilUqTTLdNslWl1uml1yrTaZZrtbqbnO5mca2d6rp3JuXbmGt002900Wt20Oy/OZcvIyEiuu+66vOtd78q73vWuXHbZZRkaGnKyAABADxJAAACgBzUajTzyyCO55ZZb8qd/+qe59957Mzc394Ies14tsmZFX9aO1bN+vC8bV/Vn48r+rBqpZeVIPStHalk92peVI4shpK9eSV+tSKUoUhRPXYAUSVkmZZKUizNBmu0yC61OJmfbOTHdysmZdo5PtzIx28qx6VYOnmjmwIlGjkw2c2yqmRPT7Rc8g2TFihW58cYb8973vjc33XRTzjvvPMtiAQBAjxFAAACghzy9wfmtt96a3//9389tt92WI0eOPK/HqleLjA7VsnFlfy7YMJjz1w9k69qBnLN2IJtW9WfNir6sGa1neKCaaqVIWZYp81TgKJPFfzuNi5Kn/iyK/M1XirQ63UzPdXJ8upUjk4sRZM/Rhew+spCdh+fz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+51zuef+hbzhdYPpPM8AsrhcVDdf+dpsvnv/wpLHLTTKPPp4M48+vrikVOWp/UIqlTz1VSRl0u2W6XaTTjfpdMrTCjNlmXzp1pl8+P0rsmF9PQP9z7+AVCvJ4zub+crXZnP4aPs53390dDTve9/78g/+wT/IxRdf7CQFAICzlAACAABnsWq1mje/+c1pt9sZGBjIV7/61UxNTZ32/XfubuXzX5rO9kv6MzpSed6zQNrtMkeOttNsnf4DdMuk+33Hv7CFq+bny+ze20yzWWZw4PnPaFlolPn8l2fy8GON53zfdevW5X3ve19+7ud+LldeeaUTFAAAzmICCAAAnOX6+/vz7ne/O6tXr87WrVvz+c9/Prt27UrnNNZuOn6yna98bTZvvWE4b3/LyPPeC6RSLTI6Ukm1mue1ZNSLoV5P1q+rpf4CrmKq1SL33L+Qv/jSdA4ePv3ZHwMDA7nkkkvywQ9+MB/96EdzySWXODEBAOAsJ4AAAMArQLVazXXXXZeNGzdmx44d+dKXvpT7778/hw4dyszMTBYWFlKeYkpEt5t894GF/Mnnp3LtjsEMDz/3WSBlmQwNVnLtjsFs3VzPzj2tMzIGr90+kKsuH8zAwPObyVIUycJCN3/6+anc+Z35tJaZzVKv1zMwMJCRkZFs3rw5O3bsyE033ZS3vOUtWb16tRMSAABeAYqyLEvDAAAArxxlWebQoUO566678sADD+See+7JbbfdlgMHDix5n9dc2p9/8y/X5z3vHH1eG4gXRXLiZCf/4TeO579/ciK79r58EaRSSV77moH883+0Jh9472iGh55/ALn9zrn8k//Xodx1z/ySx61atSrXXXddtm/fni1btmTHjh258sors3LlSicfAAC8gpgBAgAArzBFUWTjxo153/vel/e85z156KGH0t/fn9/5nd9Jt9s95X127Wnl038ylcsu7s8F5/dlicOWVJbJ+Fg1P/uTq7JxfS1funU2jzzeyKEj7UxOdZedTfF8DA4UGRurZuvmei67uD8feM9o3vqmkQwNPr/4Uakk+w+08/ufmczjTzaXPfaGG27IP//n/zzXXHNNBgcHU61WnXQAAPAKJIAAAMArWLVazeWXX573v//9ue2227Jz585THjc7182Xb5vJlZcP5Bd+dnVq1TznkFAUycb1tfzcT67KD39gLF+/cy733r+Q7z6w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gAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUzv8f8k6Ttt+PnyMAAAAASUVORK5CYII=" alt="Image rendered in base64"> - <figcaption>This image is an inline base64 encoding</figcaption> -</figure></p> -<p><h2>Should I use base64?</h2></p> -<p><p>That completely depends on the situation. For most regular day-to-day web development - <b>probably not</b>. While base64 is useful, it is slightly less per-formant than directly using a source file (though, one could argue that making the extra browser request is less per-formant as well).</p> -<p>But that doesn't mean there aren't a few edge cases.</p></p> -<p><ul> - <li>The speed of rendering the encoding out-performs the extra HTTP request</li> - <li>You only have access to a single set of specific HTML files (no access to current font, CSS or image directories)</li> - <li>Security issues that limit your ability to use external sources altogether</li> -</ul></p> -<p><h2>How do I encode my files?</h2></p> -<p><p>There are a ton of freely available encoders out in the wild web, but my personal go-to is <a href="https://www.base64converter.com/">base64converter.com</a>. Simply upload your file and convert.</p></p> -<p><h2>Limitations</h2></p> -<p><ul> - <li>Images converted to base64 will be 20-25% larger in size (making for poorer performance on mobile for image-heavy websites)</li> - <li>Lacking any consistent use of CDN caching</li> - <li>Larger encodings can make for messy project files (unless run at build time of course)</li> -</ul></p> -<p><p>Though these limitations can be deal-breakers in certain situations, I find it extremely helpful for developers to keep base64 encoding in their back pockets for a rainy day.</p></p></content> - <link href="https://bt.ht/base64-all-the-things"/> - <id>https://bt.ht/base64-all-the-things</id> + +<p><em>An extremely overlooked process for displaying fonts</em>, images, documents, spreadsheets, etc. on the web is the use of <strong>base64 encoding</strong>. Although it may not be the most efficient (or easy) way to display and include these elements it can be a lifesaver in certain situations.</p></content> + <link href="https://btxx.org/base64-all-the-things"/> + <id>https://btxx.org/base64-all-the-things</id> <updated>2020-03-18T10:00:00Z</updated> <published>2020-03-18T10:00:00Z</published> </entry> <entry> <title>A Warning for New Designers: Avoid Dribbble</title> - <content type="html"><h1>A Warning for New Designers: Avoid Dribbble</h1> + <content type="html"><h1 id="a-warning-for-new-designers-avoid-dribbble">A Warning for New Designers: Avoid Dribbble</h1> + <p>2022-09-08</p> -<p>Everyday a new designer begins their journey into the world of [<em>insert design industry here</em>] and it is magical! Having a fresh pair of eyes untainted from the current trends of the time can help improve design as a whole. Newbies can even teach new things to older, grumpier luddites (like yours truly). But over the years I've noticed a concerning trend among junior designers; <strong>they rely too heavily on Dribbble</strong>.</p> -<p>Relying on Dribbble for minor inspiration is one thing. Referencing "shots" as justification for real-world design work? Not so much. I believe Dribbble shouldn't be used for either of these use cases, but I can at least give a pass at browsing for basic inspiration (colors, padding, layout).</p> -<p>Now, using concept shots to push for your own design decisions? That is a terrible idea. We "senior" designers need to step up and help newbies avoid this trap.</p> -<h3>Designing for Other Designers</h3> -<p>Dribbble is rarely a place for design feedback and discussion anymore. Hell, most people use it as a digital portfolio to share with prospective clients. Others use it like some form of "design Linkedin", which has its own host of problems.</p> -<p>Dribble is now (mainly) a place where designers post "work" for other designers. There <em>is</em> a small minority of users still looking for real, human feedback on their work - but they are a rarity.</p> -<p>Take a look at the <a href="https://dribbble.com/shots/popular">popular shots</a> category at any give time. Most shots are promo pieces used to attract potential clients. Nearly all design concepts are impractical or simply impossible to create in a real-life setting. This is incredibly damaging to newcomers trying to learn "good" design practices. Dribbble shots simply ride the wave of the current trends, which doesn't provide junior designers with a solid foundation or core understanding of design as a whole. It just causes them to endlessly chase the "latest and greatest" trend.</p> -<p>Shot posters rarely go into the reasoning behind their design decisions. No research or iterations are shared to show the process. Instead it simply states "here is a cool website layout for a company that doesn't exist". Zero constraints or goals needed to be met. No discussion about how one version of their design didn't perform as well when tested on real users. So of course it ends up looking <em>so cool and original</em> - <strong>it wasn't designed in reality</strong>.</p> -<h3>I Don't Have All the Answers - But I'll Try</h3> -<p>I am not the holy savior of <em>all things design</em>. I'm just a designer who has been around the block a few times. If new designers want to keep using Dribbble as their main source of guidance and think I should go kick rocks - that's fine. I will. But for those with a little more passion for the profession, might I suggest some humble alternatives to get you on a more consistent path?</p> + +<p>Everyday a new designer begins their journey into the world of [<em>insert design industry here</em>] and it is magical! Having a fresh pair of eyes untainted from the current trends of the time can help improve design as a whole. Newbies can even teach new things to older, grumpier luddites (like yours truly). But over the years I&#8217;ve noticed a concerning trend among junior designers; <strong>they rely too heavily on Dribbble</strong>.</p> + +<p>Relying on Dribbble for minor inspiration is one thing. Referencing &#8220;shots&#8221; as justification for real-world design work? Not so much. I believe Dribbble shouldn&#8217;t be used for either of these use cases, but I can at least give a pass at browsing for basic inspiration (colors, padding, layout).</p> + +<p>Now, using concept shots to push for your own design decisions? That is a terrible idea. We &#8220;senior&#8221; designers need to step up and help newbies avoid this trap.</p> + +<h3 id="designing-for-other-designers">Designing for Other Designers</h3> + +<p>Dribbble is rarely a place for design feedback and discussion anymore. Hell, most people use it as a digital portfolio to share with prospective clients. Others use it like some form of &#8220;design Linkedin&#8221;, which has its own host of problems.</p> + +<p>Dribble is now (mainly) a place where designers post &#8220;work&#8221; for other designers. There <em>is</em> a small minority of users still looking for real, human feedback on their work - but they are a rarity.</p> + +<p>Take a look at the <a href="https://dribbble.com/shots/popular">popular shots</a> category at any give time. Most shots are promo pieces used to attract potential clients. Nearly all design concepts are impractical or simply impossible to create in a real-life setting. This is incredibly damaging to newcomers trying to learn &#8220;good&#8221; design practices. Dribbble shots simply ride the wave of the current trends, which doesn&#8217;t provide junior designers with a solid foundation or core understanding of design as a whole. It just causes them to endlessly chase the &#8220;latest and greatest&#8221; trend.</p> + +<p>Shot posters rarely go into the reasoning behind their design decisions. No research or iterations are shared to show the process. Instead it simply states &#8220;here is a cool website layout for a company that doesn&#8217;t exist&#8221;. Zero constraints or goals needed to be met. No discussion about how one version of their design didn&#8217;t perform as well when tested on real users. So of course it ends up looking <em>so cool and original</em> - <strong>it wasn&#8217;t designed in reality</strong>.</p> + +<h3 id="i-dont-have-all-the-answers---but-ill-try">I Don&#8217;t Have All the Answers - But I&#8217;ll Try</h3> + +<p>I am not the holy savior of <em>all things design</em>. I&#8217;m just a designer who has been around the block a few times. If new designers want to keep using Dribbble as their main source of guidance and think I should go kick rocks - that&#8217;s fine. I will. But for those with a little more passion for the profession, might I suggest some humble alternatives to get you on a more consistent path?</p> + <ul> <li>Read some good design books (to get you started): + <ul> -<li><a href="https://sensible.com/dont-make-me-think/">Don't Make Me Think - Revisited</a></li> +<li><a href="https://sensible.com/dont-make-me-think/">Don&#8217;t Make Me Think - Revisited</a></li> <li><a href="https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things">The Design of Everyday Things</a></li> <li><a href="https://www.edwardtufte.com/tufte/books_vdqi">The Visual Display of Quantitative Information</a></li> <li><a href="https://www.amazon.ca/Dieter-Rams-Less-But-Better/dp/3899555252">Less But Better</a></li> -</ul> -</li> +</ul></li> <li>Talk to <em>real</em> people + <ul> -<li>Chat with your team's marketers, customer support specialists, senior design leads, and developers about new features (they often have better insights than you)</li> +<li>Chat with your team&#8217;s marketers, customer support specialists, senior design leads, and developers about new features (they often have better insights than you)</li> <li>Perform customer interviews early and often (they use your product or service - let them tell you what they want!)</li> -</ul> -</li> +</ul></li> <li>R ad through some quality UX reports and research + <ul> <li><a href="https://www.nngroup.com/">Nielsen Norman Group</a></li> <li><a href="https://baymard.com/">Baymard Institute</a></li> -</ul> -</li> +</ul></li> <li>P y attention to real world design (good and bad) + <ul> <li>Grocery item designs, labels packaging</li> -<li>Vehicle analog and digital dashboards / safety features</li> +<li>Vehicle analog and digital dashboards &#47; safety features</li> <li>Warning and safety labeling (great for universal and minimal design inspiration)</li> -<li>Government websites and applications (notoriously terrible - great for "what not to do" examples)</li> -</ul> -</li> +<li>Government websites and applications (notoriously terrible - great for &#8220;what not to do&#8221; examples)</li> +</ul></li> <li>Your own experience (over time)</li> </ul> -<p>These are just my own suggestions to help new designers get a better foundation of core design concepts <em>before</em> falling down the Dribbble hole. Take it or leave it. I'm not your dad.</p> -<p>Most designers who are pro-Dribbble will most likely write me off as a grumpy old man yelling at a cloud. That's only half true. But if just one person reading this even <em>considers</em> avoiding Dribbble as a source for learning proper design - then it was worth it.</p> -<p>Now if you will excuse me, there are many more clouds to yell at...</p></content> - <link href="https://bt.ht/avoid"/> - <id>https://bt.ht/avoid</id> + +<p>These are just my own suggestions to help new designers get a better foundation of core design concepts <em>before</em> falling down the Dribbble hole. Take it or leave it. I&#8217;m not your dad.</p> + +<p>Most designers who are pro-Dribbble will most likely write me off as a grumpy old man yelling at a cloud. That&#8217;s only half true. But if just one person reading this even <em>considers</em> avoiding Dribbble as a source for learning proper design - then it was worth it.</p> + +<p>Now if you will excuse me, there are many more clouds to yell at&#8230;</p></content> + <link href="https://btxx.org/avoid"/> + <id>https://btxx.org/avoid</id> <updated>2022-09-08T10:00:00Z</updated> <published>2022-09-08T10:00:00Z</published> </entry> <entry> <title>Aqua UI CSS Buttons</title> - <content type="html"><h1>Aqua UI CSS Buttons</h1> + <content type="html"><h1 id="aqua-ui-css-buttons">Aqua UI CSS Buttons</h1> + <p>2016-06-28</p> + <p>Though it may feel like nostalgia, the old OS design for Mac was arguably better than the current iteration (as of this writing - High Sierra). I recently designed a quick Dribbble shot showcasing how the older operating system used to have so much more character and depth.</p> -<p><figure> -<img src="/public/images/aqua-ui-css-buttons.webp" alt="Old macOS Buttons"> -<figcaption>My initial Dribbble shot, which can be found <a href="https://dribbble.com/shots/4561658-Aqua-Buttons-UI">here</a>.</figcaption> -</figure></p> -<p>Since I've been wanting to dip my toes into more tutorial-based articles (maybe I'll even do some screencasts in the future), I decided to start out simple. Let's walk through how to implement these 'aqua' UI buttons with pure CSS.</p> -<h3>Starting with a basic foundation</h3> -<p>Since this project consists of only two buttons elements, the HTML or <i>skeleton</i> of this project is very straightforward:</p> -<pre><code>&lt;button class=&quot;cancel&quot;&gt;Cancel&lt;/button&gt; -&lt;button class=&quot;confirm&quot;&gt;Confirm&lt;/button&gt; -</code></pre> -<h3>Styling the buttons</h3> -<p>The first step is to remove the browser's default button styling by using the <code>appearance</code> property. This will help avoid having to fight against the browser and minimize our CSS code.</p> + +<p>Since I&#8217;ve been wanting to dip my toes into more tutorial-based articles (maybe I&#8217;ll even do some screencasts in the future), I decided to start out simple. Let&#8217;s walk through how to implement these &#8216;aqua&#8217; UI buttons with pure CSS.</p> + +<h3 id="starting-with-a-basic-foundation">Starting with a basic foundation</h3> + +<p>Since this project consists of only two buttons elements, the HTML or skeleton of this project is very straightforward:</p> + +<pre><code>&#60;button class="cancel"&#62;Cancel&#60;&#47;button&#62; +&#60;button class="confirm"&#62;Confirm&#60;&#47;button&#62; +</code></pre> + +<h3 id="styling-the-buttons">Styling the buttons</h3> + +<p>The first step is to remove the browser&#8217;s default button styling by using the <code>appearance</code> property. This will help avoid having to fight against the browser and minimize our CSS code.</p> + <pre><code>button { -webkit-appearance: none; -moz-appearance: none; } </code></pre> + <p>Next, we apply a fairly simple set of CSS that will be shared across both the confirm and cancel buttons:</p> + <p>(Pay attention to the <code>transition</code> property as we will be returning to that shortly)</p> + <pre><code>button { -webkit-appearance: none; -moz-appearance: none; @@ -9783,7 +12563,7 @@ gulp.task('build', gulp.series( border-radius: 125px; box-shadow: inset 0 13px 25px rgba(255,255,255,0.5), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.1); cursor: pointer; - font-family: 'Lucida Grande', Helvetica, Arial, sans-serif; + font-family: &#39;Lucida Grande&#39;, Helvetica, Arial, sans-serif; font-size: 2rem; margin: 5rem 1rem; padding: 1.2rem 4rem; @@ -9791,26 +12571,32 @@ gulp.task('build', gulp.series( transition: all ease .3s; } </code></pre> + <p>Then we separate the specific confirm and cancel button styles into their own class selectors:</p> + <pre><code>button.confirm { background: #4A90E2; border-color: #3672B6; color: #fff; } -</code></pre> -<pre><code>button.cancel { + +button.cancel { background: #D0D0D0; border-color: #B8B8B8; color: #6F6F6F; } </code></pre> -<h3>Playing with pseudo elements</h3> -<p>Now that the button is styled and structured with basic formatting, it's time to add that classic 'shine' seen in the original Dribbble shot.</p> + +<h3 id="playing-with-pseudo-elements">Playing with pseudo elements</h3> + +<p>Now that the button is styled and structured with basic formatting, it&#8217;s time to add that classic &#8216;shine&#8217; seen in the original Dribbble shot.</p> + <p>The cleanest way to do this is by using the <code>:before</code> pseudo element paired with a linear-gradient background.</p> + <pre><code>button:before { background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); border-radius: 125px; - content:''; + content:&#39;&#39;; height: 50px; left: 4%; position: absolute; @@ -9819,70 +12605,92 @@ gulp.task('build', gulp.series( width: 92%; } </code></pre> -<h3>Adding interaction</h3> + +<h3 id="adding-interaction">Adding interaction</h3> + <p>The final step is adding the user hover interaction: (Remember that <code>transition</code> property?)</p> + <pre><code>button:hover { box-shadow: inset 0 13px 25px rgba(255,255,255,0.8), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.2); transform: scale(1.02); } </code></pre> -<p>That's it!</p> -<h3>See it live on CodePen</h3> -<p>You can view this project on CodePen <a href="https://codepen.io/bradleytaunt/pen/YvKxxm">here</a>.</p> + +<p>That&#8217;s it!</p> + +<h3 id="see-it-live-on-codepen">See it live on CodePen</h3> + +<p>You can view this project on CodePen here.</p> + <p>Feel free to fork it or implement your own!</p></content> - <link href="https://bt.ht/aui"/> - <id>https://bt.ht/aui</id> + <link href="https://btxx.org/aui"/> + <id>https://btxx.org/aui</id> <updated>2016-06-28T10:00:00Z</updated> <published>2016-06-28T10:00:00Z</published> </entry> <entry> <title>Audio Hotkeys on Linux Mint</title> - <content type="html"><h1>Audio Hotkeys on Linux Mint</h1> + <content type="html"><h1 id="audio-hotkeys-on-linux-mint">Audio Hotkeys on Linux Mint</h1> + <p>2020-06-14</p> -<p>I recently switched out the OS on my old 2011 MacBook Air with Linux Mint. It's a distro I've used a few times in the past, but never set it as one of my main daily drivers until now.</p> -<p>Setting up all my go-to applications (Sublime, LocalWP, Riot, Evolution, etc) was a breeze. The only snag I ran into was properly setting up the volume shortcuts on my wireless <a href="https://www.amazon.com/gp/product/B01AROOL12/ref=as_li_tl?ie=UTF8&amp;camp=1789&amp;creative=9325&amp;creativeASIN=B01AROOL12&amp;linkCode=as2&amp;tag=uglyduck-20&amp;linkId=5cfe5875a0f263b933692c381a6a88a9">Logitech MK235 keyboard</a>. After looking a little too long on DDG &amp; even Google, I finally found <a href="https://forums.linuxmint.com/viewtopic.php?t=253048">this forum thread with the solution</a>.</p> -<p>For my own personal reference, I'm also going to include those code snippets here since you never know when you might need it again! And who knows, maybe this will help someone else stumbling around the internet.</p> -<pre><code>// Volume Up + +<p>I recently switched out the OS on my old 2011 MacBook Air with Linux Mint. It&#8217;s a distro I&#8217;ve used a few times in the past, but never set it as one of my main daily drivers until now.</p> + +<p>Setting up all my go-to applications (Sublime, LocalWP, Riot, Evolution, etc) was a breeze. The only snag I ran into was properly setting up the volume shortcuts on my wireless <a href="https://www.amazon.com/gp/product/B01AROOL12/ref=as_li_tl?ie=UTF8&amp;camp=1789&amp;creative=9325&amp;creativeASIN=B01AROOL12&amp;linkCode=as2&amp;tag=uglyduck-20&amp;linkId=5cfe5875a0f263b933692c381a6a88a9">Logitech MK235 keyboard</a>. After looking a little too long on DDG &#38; even Google, I finally found <a href="https://forums.linuxmint.com/viewtopic.php?t=253048">this forum thread with the solution</a>.</p> + +<p>For my own personal reference, I&#8217;m also going to include those code snippets here since you never know when you might need it again! And who knows, maybe this will help someone else stumbling around the internet.</p> + +<pre><code>&#47;&#47; Volume Up pactl set-sink-volume @DEFAULT_SINK@ +5% -</code></pre> -<pre><code>// Volume Down + +&#47;&#47; Volume Down pactl set-sink-volume @DEFAULT_SINK@ -5% -</code></pre> -<pre><code>// Toggle Mute + +&#47;&#47; Toggle Mute pactl set-sink-mute @DEFAULT_SINK@ toggle </code></pre></content> - <link href="https://bt.ht/audio-hotkeys-on-linux-mint"/> - <id>https://bt.ht/audio-hotkeys-on-linux-mint</id> + <link href="https://btxx.org/audio-hotkeys-on-linux-mint"/> + <id>https://btxx.org/audio-hotkeys-on-linux-mint</id> <updated>2020-06-14T10:00:00Z</updated> <published>2020-06-14T10:00:00Z</published> </entry> <entry> <title>Animated Radio Tab Toggles</title> - <content type="html"><h1>Animated Radio Tab Toggles</h1> + <content type="html"><h1 id="animated-radio-tab-toggles">Animated Radio Tab Toggles</h1> + <p>2021-01-05</p> + <p><em>In this demo tutorial, we are making the assumption</em> that we need to create a radio slide toggle for our made-up payment options. For this we want to display 3 simple payment choices to the user:</p> + <ul> <li>One-time payment</li> <li>Recurring payment</li> <li>Free tier payment</li> </ul> -<h2>The Final Demo</h2> + +<h2 id="the-final-demo">The Final Demo</h2> + <p><a href="https://codepen.io/bradleytaunt/embed/vYXjpLO">Live CodePen</a></p> + <p>Let’s get started with the base skeleton.</p> -<h2>The HTML</h2> -<p><p>There isn't anything special happening here. We just contain all our <code>labels</code> and <code>inputs</code> into a <code>.radio-toggles</code> wrapper, make sure those <code>labels</code> are each properly connected to their corresponding <code>inputs</code>, and then add an empty <code>.slide-item</code> element (more on that later).</p></p> -<pre><code>&lt;div class=&quot;radio-toggles&quot;&gt; - &lt;input type=&quot;radio&quot; id=&quot;option-1&quot; name=&quot;radio-options&quot;&gt; - &lt;label for=&quot;option-1&quot;&gt;One-Time&lt;/label&gt; - &lt;input type=&quot;radio&quot; id=&quot;option-2&quot; name=&quot;radio-options&quot; checked&gt; - &lt;label for=&quot;option-2&quot;&gt;Recurring&lt;/label&gt; - &lt;input type=&quot;radio&quot; id=&quot;option-3&quot; name=&quot;radio-options&quot;&gt; - &lt;label for=&quot;option-3&quot;&gt;Free&lt;/label&gt; - &lt;div class=&quot;slide-item&quot;&gt;&lt;/div&gt; -&lt;/div&gt; -</code></pre> -<h2>The CSS</h2> + +<h2 id="the-html">The HTML</h2> + +<pre><code>&#60;div class="radio-toggles"&#62; + &#60;input type="radio" id="option-1" name="radio-options"&#62; + &#60;label for="option-1"&#62;One-Time&#60;&#47;label&#62; + &#60;input type="radio" id="option-2" name="radio-options" checked&#62; + &#60;label for="option-2"&#62;Recurring&#60;&#47;label&#62; + &#60;input type="radio" id="option-3" name="radio-options"&#62; + &#60;label for="option-3"&#62;Free&#60;&#47;label&#62; + &#60;div class="slide-item"&#62;&#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<h2 id="the-css">The CSS</h2> + <p>Now for the main event – the CSS. First we want to style the wrapper that holds all of our pieces together. You can tweak this to your liking, but I prefer a simple and clean style:</p> + <pre><code>.radio-toggles { align-items: center; background: #eee; @@ -9897,14 +12705,18 @@ pactl set-sink-mute @DEFAULT_SINK@ toggle position: relative; } </code></pre> + <p>Next, we “hide” (only visually) the default <code>radio</code> inputs:</p> -<pre><code>input[type=&quot;radio&quot;] { + +<pre><code>input[type="radio"] { left: -9999px; position: absolute; z-index: -1; } </code></pre> + <p>Then we give the corresponding <code>label</code> elements a little spacing and breathing room:</p> + <pre><code>label { cursor: pointer; padding: 10px 20px; @@ -9913,7 +12725,9 @@ pactl set-sink-mute @DEFAULT_SINK@ toggle z-index: 2; } </code></pre> + <p>Remember that <code>.slide-item</code> I referenced earlier? That element will be the visual “slider” that animates between the individual radio options. We style that like so:</p> + <pre><code>.slide-item { background: white; border-radius: 9999px; @@ -9926,58 +12740,68 @@ pactl set-sink-mute @DEFAULT_SINK@ toggle z-index: 0; } </code></pre> -<p>You'll notice the <code>left</code>, <code>height</code>, and <code>width</code> properties utilize the CSS <code>calc</code> attributes – this just gives some much needed padding and visual clean-up to the whole tabbed interface.</p> + +<p>You&#8217;ll notice the <code>left</code>, <code>height</code>, and <code>width</code> properties utilize the CSS <code>calc</code> attributes – this just gives some much needed padding and visual clean-up to the whole tabbed interface.</p> + <p>For the finishing touches, we just need to tell the <code>.slide-item</code> where to position itself based on which <code>radio</code> input is currently selected:</p> -<pre><code>input[type=&quot;radio&quot;]:nth-of-type(1):checked ~ .slide-item { + +<pre><code>input[type="radio"]:nth-of-type(1):checked ~ .slide-item { left: 4px; } -input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item { +input[type="radio"]:nth-of-type(3):checked ~ .slide-item { left: calc(66.66% + 4px); } </code></pre> -<p>That's pretty much it! You now have a fully functional, animated toggle slider with just a set of simple <code>radio</code> inputs and pure CSS.</p></content> - <link href="https://bt.ht/animated-toggle-tabs"/> - <id>https://bt.ht/animated-toggle-tabs</id> + +<p>That&#8217;s pretty much it! You now have a fully functional, animated toggle slider with just a set of simple <code>radio</code> inputs and pure CSS.</p></content> + <link href="https://btxx.org/animated-toggle-tabs"/> + <id>https://btxx.org/animated-toggle-tabs</id> <updated>2021-01-05T10:00:00Z</updated> <published>2021-01-05T10:00:00Z</published> </entry> <entry> <title>Animated Card Tiles</title> - <content type="html"><h1>Animated Card Tiles</h1> + <content type="html"><h1 id="animated-card-tiles">Animated Card Tiles</h1> + <p>2019-02-27</p> -<p><em>The design trend of using "cards" or "tiles" to display interactive</em> sections/article headings in an app or website remains a popular choice among designers. So, let's build a set of animated cards with only HTML &amp; CSS. </p> -<h2>What we will be building (live demo)</h2> + +<p><em>The design trend of using &#8220;cards&#8221; or &#8220;tiles&#8221; to display interactive</em> sections&#47;article headings in an app or website remains a popular choice among designers. So, let&#8217;s build a set of animated cards with only HTML &#38; CSS. </p> + +<h2 id="what-we-will-be-building-live-demo">What we will be building (live demo)</h2> + <p>This is the set of animated card tiles we will be creating:</p> + <p><em>(try hovering)</em></p> + <p><a href="https://codepen.io/bradleytaunt/pen/rNjBpob">Live CodePen</a></p> -<h2>The HTML</h2> + +<h2 id="the-html">The HTML</h2> + <p>For the base skeleton of these cards we only need:</p> + <ul> -<li>a <code>flexbox</code> main container to hold everything</li> -<li>a <code>.card-tile</code> parent element</li> -<li>the inner child element that will display on <code>:hover</code></li> -<li>proper <code>h4</code> and <code>p</code> tags inside that child element</li> -</ul> -<pre><code>&lt;div class=&quot;card-tiles-container&quot;&gt; - &lt;div class=&quot;card-tile&quot;&gt; - &lt;div class=&quot;text-content&quot;&gt; - &lt;h4&gt;Card Title&lt;/h4&gt; - &lt;p&gt;Inner card content text&lt;/p&gt; - &lt;/div&gt; - &lt;/div&gt; -&lt;/div&gt; -</code></pre> -<p>That's all that is needed - for now. We will be returning to this code shortly to add some extra classes to make our lives easier.</p> -<h2>The CSS</h2> +<li><p>a <code>flexbox</code> main container to hold everything</p></li> +<li><p>a <code>.card-tile</code> parent element</p></li> +<li><p>the inner child element that will display on <code>:hover</code></p></li> +<li><p>proper <code>h4</code> and <code>p</code> tags inside that child element</p></li> +</ul> + +<p>That&#8217;s all that is needed - for now. We will be returning to this code shortly to add some extra classes to make our lives easier.</p> + +<h2 id="the-css">The CSS</h2> + <p>First we set the main housing container to use <code>flex</code> so we save ourselves the headache of aligning all the cards in a nice row:</p> + <pre><code>.card-tiles-container { display: flex; font-size: 14px; margin: 20px 0; } </code></pre> + <p>Next we create the default styling for our tile cards and set the <code>transform</code> property to scale the card on <code>:hover</code>:</p> -<pre><code>/* Default card tile styles */ + +<pre><code>&#47;* Default card tile styles *&#47; .card-tile { border: 1px solid; border-radius: 10px; @@ -9992,11 +12816,16 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item { transform: scale(1.1); } </code></pre> -<h3>Where are my cards?!</h3> -<p>Don't panic if you can't <em>visually</em> see any card elements in your demo yet - that's to be expected. We will be styling these card elements momentarily.</p> -<p>Our next step is to hide the default inner <code>text-content</code> and only show it on hover. We achieve this by setting it's position to <code>absolute</code>, placing it's opacity at 0 and pushing it's z-index back to -1.</p> + +<h3 id="where-are-my-cards">Where are my cards?!</h3> + +<p>Don&#8217;t panic if you can&#8217;t <em>visually</em> see any card elements in your demo yet - that&#8217;s to be expected. We will be styling these card elements momentarily.</p> + +<p>Our next step is to hide the default inner <code>text-content</code> and only show it on hover. We achieve this by setting it&#8217;s position to <code>absolute</code>, placing it&#8217;s opacity at 0 and pushing it&#8217;s z-index back to -1.</p> + <p>When the user hovers over a main card tile, we change the <code>text-content</code> values of both the opacity and z-index to 1.</p> -<pre><code>/* Card tile text content */ + +<pre><code>&#47;* Card tile text content *&#47; .card-tile .text-content { background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%); bottom: 10px; @@ -10017,7 +12846,9 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item { z-index: 1; } </code></pre> + <p>Finally we add some minor styling for the inner header and paragraph tags:</p> + <pre><code>.card-tile .text-content h4, .card-tile .text-content p { color: #fff; @@ -10025,8 +12856,11 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item { text-shadow: 1px 1px 1px rgba(0,0,0,0.6); } </code></pre> -<h3>Don't forget mobile</h3> + +<h3 id="dont-forget-mobile">Don&#8217;t forget mobile</h3> + <p>We want out UI to stack the cards if users are viewing them on smaller devices:</p> + <pre><code>@media(max-width: 600px) { .card-tiles-container { flex-direction: column; @@ -10037,34 +12871,39 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item { } } </code></pre> -<h2>Customizing each card</h2> -<p>Remember how I mentioned that we would be adding more classes to the original HTML? Now is the time. We will be including a simple class on each card tile to provide it's own custom coloring:</p> -<pre><code>&lt;div class=&quot;card-tiles-container&quot;&gt; - &lt;!-- `Blue` class --&gt; - &lt;div class=&quot;card-tile blue&quot;&gt; - &lt;div class=&quot;text-content&quot;&gt; - &lt;h4&gt;Card Title&lt;/h4&gt; - &lt;p&gt;Inner card content text&lt;/p&gt; - &lt;/div&gt; - &lt;/div&gt; - &lt;!-- `Orange` class --&gt; - &lt;div class=&quot;card-tile orange&quot;&gt; - &lt;div class=&quot;text-content&quot;&gt; - &lt;h4&gt;Card Title&lt;/h4&gt; - &lt;p&gt;Inner card content text&lt;/p&gt; - &lt;/div&gt; - &lt;/div&gt; - &lt;!-- `Green` class --&gt; - &lt;div class=&quot;card-tile green&quot;&gt; - &lt;div class=&quot;text-content&quot;&gt; - &lt;h4&gt;Card Title&lt;/h4&gt; - &lt;p&gt;Inner card content text&lt;/p&gt; - &lt;/div&gt; - &lt;/div&gt; -&lt;/div&gt; + +<h2 id="customizing-each-card">Customizing each card</h2> + +<p>Remember how I mentioned that we would be adding more classes to the original HTML? Now is the time. We will be including a simple class on each card tile to provide it&#8217;s own custom coloring:</p> + +<pre><code>&#60;div class="card-tiles-container"&#62; + &#60;!-- `Blue` class --&#62; + &#60;div class="card-tile blue"&#62; + &#60;div class="text-content"&#62; + &#60;h4&#62;Card Title&#60;&#47;h4&#62; + &#60;p&#62;Inner card content text&#60;&#47;p&#62; + &#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;!-- `Orange` class --&#62; + &#60;div class="card-tile orange"&#62; + &#60;div class="text-content"&#62; + &#60;h4&#62;Card Title&#60;&#47;h4&#62; + &#60;p&#62;Inner card content text&#60;&#47;p&#62; + &#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;!-- `Green` class --&#62; + &#60;div class="card-tile green"&#62; + &#60;div class="text-content"&#62; + &#60;h4&#62;Card Title&#60;&#47;h4&#62; + &#60;p&#62;Inner card content text&#60;&#47;p&#62; + &#60;&#47;div&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; </code></pre> + <p>And these color classes correlate to some new CSS styling:</p> -<pre><code>/* Blue Card */ + +<pre><code>&#47;* Blue Card *&#47; .card-tile.blue { background-color: #0093E9; background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%); @@ -10076,8 +12915,8 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item { box-shadow: 0 8px 18px rgba(128,208,199,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -</code></pre> -<pre><code>/* Orange Card */ + +&#47;* Orange Card *&#47; .card-tile.orange { background-color: #FAD961; background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%); @@ -10089,8 +12928,8 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item { box-shadow: 0 8px 18px rgba(247,107,28,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -</code></pre> -<pre><code>/* Green Card */ + +&#47;* Green Card *&#47; .card-tile.green { background-color: #096e40; background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%); @@ -10103,52 +12942,63 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item { inset 0 2px 1px rgba(255,255,255,0.6); } </code></pre> -<h3>Adding transitions</h3> -<p>We can now see the actual cards visually and have the ability to interact with them, but there is a problem - they don't animate.</p> + +<h3 id="adding-transitions">Adding transitions</h3> + +<p>We can now see the actual cards visually and have the ability to interact with them, but there is a problem - they don&#8217;t animate.</p> + <p>Lucky we can target all elements we wish to animate with the <code>transition</code> property, like so:</p> -<pre><code>/* Shared transitions */ + +<pre><code>&#47;* Shared transitions *&#47; .card-tile, .card-tile .text-content { transition: .3s ease all; } </code></pre> + <p>Done and done.</p> -<h2>The final code</h2> + +<h2 id="the-final-code">The final code</h2> + <p>To make things easier for reference, I have included all the <code>html</code> and <code>css</code> below. Please feel free to use these cards anywhere you like and change them as you see fit!</p> -<h3>HTML</h3> -<pre><code>&lt;div class=&quot;card-tiles-container&quot;&gt; - &lt;div class=&quot;card-tile blue&quot;&gt; - &lt;div class=&quot;text-content&quot;&gt; - &lt;h4&gt;Card Title&lt;/h4&gt; - &lt;p&gt;Inner card content text&lt;/p&gt; - &lt;/div&gt; - &lt;/div&gt; - &lt;div class=&quot;card-tile orange&quot;&gt; - &lt;div class=&quot;text-content&quot;&gt; - &lt;h4&gt;Card Title&lt;/h4&gt; - &lt;p&gt;Inner card content text&lt;/p&gt; - &lt;/div&gt; - &lt;/div&gt; - &lt;div class=&quot;card-tile green&quot;&gt; - &lt;div class=&quot;text-content&quot;&gt; - &lt;h4&gt;Card Title&lt;/h4&gt; - &lt;p&gt;Inner card content text&lt;/p&gt; - &lt;/div&gt; - &lt;/div&gt; -&lt;/div&gt; -</code></pre> -<h3>CSS</h3> + +<h3 id="html">HTML</h3> + +<pre><code>&#60;div class="card-tiles-container"&#62; + &#60;div class="card-tile blue"&#62; + &#60;div class="text-content"&#62; + &#60;h4&#62;Card Title&#60;&#47;h4&#62; + &#60;p&#62;Inner card content text&#60;&#47;p&#62; + &#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="card-tile orange"&#62; + &#60;div class="text-content"&#62; + &#60;h4&#62;Card Title&#60;&#47;h4&#62; + &#60;p&#62;Inner card content text&#60;&#47;p&#62; + &#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="card-tile green"&#62; + &#60;div class="text-content"&#62; + &#60;h4&#62;Card Title&#60;&#47;h4&#62; + &#60;p&#62;Inner card content text&#60;&#47;p&#62; + &#60;&#47;div&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<h3 id="css">CSS</h3> + <pre><code>.card-tiles-container { display: flex; font-size: 14px; margin: 20px 0; } -/* Shared transitions */ +&#47;* Shared transitions *&#47; .card-tile, .card-tile .text-content { transition: .3s ease all; } -/* Default card tile styles */ +&#47;* Default card tile styles *&#47; .card-tile { border: 1px solid; border-radius: 10px; @@ -10159,7 +13009,7 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item { position: relative; width: 33.33%; } -/* Blue Card */ +&#47;* Blue Card *&#47; .card-tile.blue { background-color: #0093E9; background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%); @@ -10171,7 +13021,7 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item { box-shadow: 0 8px 18px rgba(128,208,199,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -/* Orange Card */ +&#47;* Orange Card *&#47; .card-tile.orange { background-color: #FAD961; background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%); @@ -10183,7 +13033,7 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item { box-shadow: 0 8px 18px rgba(247,107,28,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -/* Green Card */ +&#47;* Green Card *&#47; .card-tile.green { background-color: #096e40; background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%); @@ -10195,7 +13045,7 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item { box-shadow: 0 8px 18px rgba(9,110,64,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -/* Card tile text content */ +&#47;* Card tile text content *&#47; .card-tile .text-content { background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%); bottom: 10px; @@ -10217,7 +13067,7 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item { margin: 0; text-shadow: 1px 1px 1px rgba(0,0,0,0.6); } -/* All animations on hover */ +&#47;* All animations on hover *&#47; .card-tile:hover { transform: scale(1.1); } @@ -10235,38 +13085,55 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item { } } </code></pre></content> - <link href="https://bt.ht/animated-card-tiles"/> - <id>https://bt.ht/animated-card-tiles</id> + <link href="https://btxx.org/animated-card-tiles"/> + <id>https://btxx.org/animated-card-tiles</id> <updated>2019-02-27T10:00:00Z</updated> <published>2019-02-27T10:00:00Z</published> </entry> <entry> <title>Adventures in Creating a Minimal Alpine Linux Installer</title> - <content type="html"><h1>Adventures in Creating a Minimal Alpine Linux Installer</h1> + <content type="html"><h1 id="adventures-in-creating-a-minimal-alpine-linux-installer">Adventures in Creating a Minimal Alpine Linux Installer</h1> + <p>2022-12-08</p> -<h2>Introduction</h2> -<p>I've made the switch to Alpine Linux as my main laptop/desktop hybrid -workstation and I love it - warts and all. This post will follow my process building my Alpine Linux "installer" I used for this workstation, along with covering some bugs I found during my adventure.</p> + +<h2 id="introduction">Introduction</h2> + +<p>I&#8217;ve made the switch to Alpine Linux as my main laptop&#47;desktop hybrid +workstation and I love it - warts and all. This post will follow my process building my Alpine Linux &#8220;installer&#8221; I used for this workstation, along with covering some bugs I found during my adventure.</p> + <p>My main goals when starting this project were to have a daily driver that was:</p> + <ul> -<li>free of any "real" desktop environment</li> +<li>free of any &#8220;real&#8221; desktop environment</li> <li>Wayland based with SwayWM</li> <li>as lightweight as possible</li> </ul> + <p>Overall, I think I achieved what I was aiming for. After logging in (there is no login manager, you do it directly through the boot terminal) you will see:</p> + <p><img src="/public/images/alpine-1.jpg" alt="" /></p> + <p>(You can view the <a href="/public/images/alpine-1.jpg">full res image here</a>)</p> -<p>For reference this is running on a X260 ThinkPad with 16GB RAM, docked and connected to a 27" 4K monitor.</p> -<blockquote><p>If you'd prefer to just go straight to the installer, feel free to jump over to the project repo: <a href="https://git.sr.ht/~bt/alpine-linux-setup">https://git.sr.ht/~bt/alpine-linux-setup</a></p> + +<p>For reference this is running on a X260 ThinkPad with 16GB RAM, docked and connected to a 27&#8221; 4K monitor.</p> + +<blockquote> +<p>If you&#8217;d prefer to just go straight to the installer, feel free to jump over to the project repo: <a href="https://git.sr.ht/~bt/alpine-linux-setup">https:&#47;&#47;git.sr.ht&#47;~bt&#47;alpine-linux-setup</a></p> </blockquote> -<h2>Getting Started</h2> + +<h2 id="getting-started">Getting Started</h2> + <p>My main reasoning for switching away from my previous setup (Garuda Linux running Sway) to Alpine was two fold:</p> + <ol> <li>I wanted a more lightweight, less resource hungry system</li> -<li>I wanted to go as "full" Wayland as possible</li> +<li>I wanted to go as &#8220;full&#8221; Wayland as possible</li> </ol> -<h3>Benchmarks Comparisons</h3> -<p>I should mention that these are not official "benchmark" applications or proper testing. I merely reproduced the same tasks, using the same applications, for the same amount of time and compared the usage. Just keep that in mind!</p> + +<h3 id="benchmarks-comparisons">Benchmarks Comparisons</h3> + +<p>I should mention that these are not official &#8220;benchmark&#8221; applications or proper testing. I merely reproduced the same tasks, using the same applications, for the same amount of time and compared the usage. Just keep that in mind!</p> + <ul> <li><p><strong>Garuda Linux</strong></p> @@ -10274,142 +13141,191 @@ workstation and I love it - warts and all. This post will follow my process buil <li>SwayWM</li> <li>Firefox: 9 tabs (Figma included)</li> <li>qutebrowser: 7 tabs</li> -<li>aerc: open/running</li> +<li>aerc: open&#47;running</li> <li>tut: open-running</li> <li>Sublime Text: single project open</li> <li><strong>Memory usage (range): 6.0-7.2 GB</strong></li> -</ul> -</li> +</ul></li> <li><p><strong>Alpine Linux</strong></p> <ul> <li>SwayWM</li> <li>Firefox: 9 tabs (Figma included)</li> <li>qutebrowser: 7 tabs</li> -<li>aerc: open/running</li> +<li>aerc: open&#47;running</li> <li>tut: open-running</li> <li><strong>Memory usage (range): 1.0-3.5 GB</strong></li> +</ul></li> </ul> -</li> -</ul> + <p>Switching over has basically cut my system memory usage <strong>in half</strong>. That ended up being a much better improvement than I predicted. These are beyond just numbers too - the system <em>feels</em> snappier.</p> + <p>So, from a speed and usability stand point I considered this a success already.</p> -<h2>Crashes &amp; Roadblocks</h2> -<p>Of course, things didn't run 100% flawlessly out-of-the-box. There were some pretty annoying <strong>crashes</strong> and issues.</p> -<h3>Greetings, tty</h3> + +<h2 id="crashes-roadblocks">Crashes &#38; Roadblocks</h2> + +<p>Of course, things didn&#8217;t run 100% flawlessly out-of-the-box. There were some pretty annoying <strong>crashes</strong> and issues.</p> + +<h3 id="greetings-tty">Greetings, tty</h3> + <p>After installing <code>tut</code> I started walking through its guided setup. Once it prompted me to login via browser in order to authenticate, I clicked the link provided in the terminal. I was immediately thrown out of my session and into <code>tty</code>. Awesome.</p> -<p>I'll save you both the headache and large amount of time I wasted on this silly "bug" and just say it had to do with my user settings trying to launch "Chromium" as my default browser. I normally set qutebrowser as much default, so this was a change I needed to make anyway.</p> -<p>I put the following in my <code>/etc/xdg/mimeapps.list</code> (which is included by default with the installer)</p> + +<p>I&#8217;ll save you both the headache and large amount of time I wasted on this silly &#8220;bug&#8221; and just say it had to do with my user settings trying to launch &#8220;Chromium&#8221; as my default browser. I normally set qutebrowser as much default, so this was a change I needed to make anyway.</p> + +<p>I put the following in my <code>&#47;etc&#47;xdg&#47;mimeapps.list</code> (which is included by default with the installer)</p> + <pre><code>[Default Applications] -x-scheme-handler/http=org.qutebrowser.qutebrowser.desktop -x-scheme-handler/https=org.qutebrowser.qutebrowser.desktop -x-scheme-handler/ftp=org.qutebrowser.qutebrowser.desktop -x-scheme-handler/chrome=org.qutebrowser.qutebrowser.desktop -text/html=org.qutebrowser.qutebrowser.desktop -application/x-extension-htm=org.qutebrowser.qutebrowser.desktop -application/x-extension-html=org.qutebrowser.qutebrowser.desktop -application/x-extension-shtml=org.qutebrowser.qutebrowser.desktop -application/xhtml+xml=org.qutebrowser.qutebrowser.desktop -application/x-extension-xhtml=org.qutebrowser.qutebrowser.desktop -application/x-extension-xht=org.qutebrowser.qutebrowser.desktop -image/bmp=feh.desktop -image/gif=feh.desktop -image/jpeg=feh.desktop -image/jpg=feh.desktop -image/png=feh.desktop -image/tiff=feh.desktop -image/x-bmp=feh.desktop -image/x-pcx=feh.desktop -image/x-tga=feh.desktop -image/x-portable-pixmap=feh.desktop -image/x-portable-bitmap=feh.desktop -image/x-targa=feh.desktop -image/x-portable-greymap=feh.desktop -application/pcx=feh.desktop -image/svg+xml=feh.desktop -image/svg-xml=feh.desktop -</code></pre> -<p>You might have also noticed that I use <code>feh</code> as my default image viewer as well. That's just my personal preference, feel free to switch that out as you see fit.</p> +x-scheme-handler&#47;http=org.qutebrowser.qutebrowser.desktop +x-scheme-handler&#47;https=org.qutebrowser.qutebrowser.desktop +x-scheme-handler&#47;ftp=org.qutebrowser.qutebrowser.desktop +x-scheme-handler&#47;chrome=org.qutebrowser.qutebrowser.desktop +text&#47;html=org.qutebrowser.qutebrowser.desktop +application&#47;x-extension-htm=org.qutebrowser.qutebrowser.desktop +application&#47;x-extension-html=org.qutebrowser.qutebrowser.desktop +application&#47;x-extension-shtml=org.qutebrowser.qutebrowser.desktop +application&#47;xhtml+xml=org.qutebrowser.qutebrowser.desktop +application&#47;x-extension-xhtml=org.qutebrowser.qutebrowser.desktop +application&#47;x-extension-xht=org.qutebrowser.qutebrowser.desktop +image&#47;bmp=feh.desktop +image&#47;gif=feh.desktop +image&#47;jpeg=feh.desktop +image&#47;jpg=feh.desktop +image&#47;png=feh.desktop +image&#47;tiff=feh.desktop +image&#47;x-bmp=feh.desktop +image&#47;x-pcx=feh.desktop +image&#47;x-tga=feh.desktop +image&#47;x-portable-pixmap=feh.desktop +image&#47;x-portable-bitmap=feh.desktop +image&#47;x-targa=feh.desktop +image&#47;x-portable-greymap=feh.desktop +application&#47;pcx=feh.desktop +image&#47;svg+xml=feh.desktop +image&#47;svg-xml=feh.desktop +</code></pre> + +<p>You might have also noticed that I use <code>feh</code> as my default image viewer as well. That&#8217;s just my personal preference, feel free to switch that out as you see fit.</p> + <p><strong>Sidenote:</strong> Chromium now runs perfectly fine since the original crashes. I have no clue how or why. Wayland black magic, I assume? Maybe I installed a package that helped or an update occurred. <em>Shrug</em></p> -<h3>Screen Sharing</h3> -<p>This has been a complete failure for me. I've tried both the Chromium and Firefox <a href="https://lr.vern.cc/r/swaywm/comments/l4e55v/guide_how_to_screenshare_from_chromiumfirefox/">implementations of these "hacks"</a> but neither work. For now I will fallback to my Garuda Linux OS boot and share my screen there. It's a silly workaround but I hardly ever need to "show my screen" in any capacity as is.</p> + +<h3 id="screen-sharing">Screen Sharing</h3> + +<p>This has been a complete failure for me. I&#8217;ve tried both the Chromium and Firefox <a href="https://lr.vern.cc/r/swaywm/comments/l4e55v/guide_how_to_screenshare_from_chromiumfirefox/">implementations of these &#8220;hacks&#8221;</a> but neither work. For now I will fallback to my Garuda Linux OS boot and share my screen there. It&#8217;s a silly workaround but I hardly ever need to &#8220;show my screen&#8221; in any capacity as is.</p> + <p>I can live without this for now. (Please <a href="https://lists.sr.ht/~bt/public-inbox">leave a message in my personal inbox</a> if you know of another workaround for this!)</p> -<h2>Some Minor Tweaks</h2> -<p>Some of these "hacks" or tweaks I had to implement might help others who run into similar issues when setting up their own Alpine desktops.</p> -<h3>aerc-mail</h3> -<p>It is important to install <code>gawk</code> since <code>awk</code> isn't "real" on Alpine. Once you have that on you system <code>aerc</code> will render emails out-of-the-box.[^1]</p> + +<h2 id="some-minor-tweaks">Some Minor Tweaks</h2> + +<p>Some of these &#8220;hacks&#8221; or tweaks I had to implement might help others who run into similar issues when setting up their own Alpine desktops.</p> + +<h3 id="aerc-mail">aerc-mail</h3> + +<p>It is important to install <code>gawk</code> since <code>awk</code> isn&#8217;t &#8220;real&#8221; on Alpine. Once you have that on you system <code>aerc</code> will render emails out-of-the-box.[^1]</p> + <pre><code>apk add gawk </code></pre> -<h3>Sublime Text</h3> -<p>Sublime Text requires flatpak, so if that isn't your <em>thing</em> then you're better off snagging a different editor. I've tried multiple times throughout my career to use an alternate editor (preferably 100% open source) but keep finding myself returning to Sublime. Maybe one day...</p> + +<h3 id="sublime-text">Sublime Text</h3> + +<p>Sublime Text requires flatpak, so if that isn&#8217;t your <em>thing</em> then you&#8217;re better off snagging a different editor. I&#8217;ve tried multiple times throughout my career to use an alternate editor (preferably 100% open source) but keep finding myself returning to Sublime. Maybe one day&#8230;</p> + <pre><code>apk add flatpak -flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo +flatpak remote-add --if-not-exists flathub https:&#47;&#47;flathub.org&#47;repo&#47;flathub.flatpakrepo </code></pre> + <p>Then reboot your machine for the changes to take. Login again and run:</p> + <pre><code>flatpak install flathub com.sublimetext.three </code></pre> + <p>FYI: You <em>might</em> need to run the above commands under <code>sudo</code> if your current user lacks proper permissions.</p> -<h3>Cursors</h3> + +<h3 id="cursors">Cursors</h3> + <p>This was an odd edge case. For the most part, the default system cursors worked out of the box. Then I installed Firefox. That caused me to go down a rabbit-hole of (still open) tickets referencing poor cursor rendering for Wayland Firefox. Apparently some users even have their cursors disappear completely!</p> + <p>Not to worry though - there is an easy fix!</p> + <ol> <li>Install <a href="https://github.com/keeferrourke/capitaine-cursors">capitaine cursors</a>: - apk add capitaine-cursors</li> +apk add capitaine-cursors</li> <li>Make a new directory: - mkdir -p ~/.icons/capitaine-cursors</li> +mkdir -p ~&#47;.icons&#47;capitaine-cursors</li> <li>Copy the files over: - sudo cp -r /usr/share/icons/capitaine-cursors-dark ~/.icons/capitaine-cursors</li> +sudo cp -r &#47;usr&#47;share&#47;icons&#47;capitaine-cursors-dark ~&#47;.icons&#47;capitaine-cursors</li> <li>The make your cursor changes using <code>gnome-tweaks</code></li> <li>Profit!</li> </ol> -<h2>Closing Thoughts</h2> -<p>Overall I'm decently satisfied with my "installer". I've included <em>just enough</em> packages to hit the ground running when using this on new hardware or even needing to recover existing devices. This project certainly won't cover the needs of all users, but my hope is that others can always fork their own and give it a spin! (Please do report any bugs or issues as you come across them!)</p> -<p>Alpine Linux can be more than just a "server distro". My daily driver proves it!</p> -<h2>Refs</h2> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>Overall I&#8217;m decently satisfied with my &#8220;installer&#8221;. I&#8217;ve included <em>just enough</em> packages to hit the ground running when using this on new hardware or even needing to recover existing devices. This project certainly won&#8217;t cover the needs of all users, but my hope is that others can always fork their own and give it a spin! (Please do report any bugs or issues as you come across them!)</p> + +<p>Alpine Linux can be more than just a &#8220;server distro&#8221;. My daily driver proves it!</p> + +<h2 id="refs">Refs</h2> + <ol> <li>This is now included in my official installer script, but I originally had to install this manually.</li> </ol></content> - <link href="https://bt.ht/alpine"/> - <id>https://bt.ht/alpine</id> + <link href="https://btxx.org/alpine"/> + <id>https://btxx.org/alpine</id> <updated>2022-12-08T10:00:00Z</updated> <published>2022-12-08T10:00:00Z</published> </entry> <entry> <title>Avoiding Featurism</title> - <content type="html"><h1>Avoiding Featurism</h1> + <content type="html"><h1 id="avoiding-featurism">Avoiding Featurism</h1> + <p>2022-10-14</p> -<p>I rather enjoy the term "featurism". I came across this term while reading the wonderful article <a href="https://www.complang.tuwien.ac.at/anton/why-ancient-browsers.html">Why I don't use Netscape</a>, which the author credits to Bernd Paysan. Although it sums up the current "digital product" industry quite well the more specific terminology, <em>creeping featurism</em>, works better:</p> -<blockquote><p><strong>creeping featurism</strong> (<em>noun</em>)</p> + +<p>I rather enjoy the term &#8220;featurism&#8221;. I came across this term while reading the wonderful article <a href="https://www.complang.tuwien.ac.at/anton/why-ancient-browsers.html">Why I don&#8217;t use Netscape</a>, which the author credits to Bernd Paysan. Although it sums up the current &#8220;digital product&#8221; industry quite well the more specific terminology, <em>creeping featurism</em>, works better:</p> + +<blockquote> +<p><strong>creeping featurism</strong> (<em>noun</em>)</p> + <p>A condition in which one or more people, often in the form of a committee, progressively increase the scope and complexity of a project until the project is deemed infeasible and subsequently cancelled to the detriment of all involved.</p> </blockquote> -<p>Throughout my career of designing and developing software I have run into this exact issue far too often. The major issue with getting sucked into a black-hole of "featurism" is there is no single person to blame. It probably seems easy to place all the responsibility on PMs or team leaders, but even <em>if</em> they are the ones adding excessive complexity to a given project, it is the role of developers and designers to speak up. It requires a team effort. Therefore, the <em>whole team</em> needs to be on-guard to avoid it.</p> -<h3>Simple Guidelines</h3> -<p>These "tips" are not perfect, nor will they work for every work environment. Hopefully they can at least be used as basic guidelines and expanded upon from there.</p> + +<p>Throughout my career of designing and developing software I have run into this exact issue far too often. The major issue with getting sucked into a black-hole of &#8220;featurism&#8221; is there is no single person to blame. It probably seems easy to place all the responsibility on PMs or team leaders, but even <em>if</em> they are the ones adding excessive complexity to a given project, it is the role of developers and designers to speak up. It requires a team effort. Therefore, the <em>whole team</em> needs to be on-guard to avoid it.</p> + +<h3 id="simple-guidelines">Simple Guidelines</h3> + +<p>These &#8220;tips&#8221; are not perfect, nor will they work for every work environment. Hopefully they can at least be used as basic guidelines and expanded upon from there.</p> + <ul> -<li>Explore the feature's <em>benefit</em> to the product. You need to confirm that this addition will be a net-positive for both customers and your bottom-line.</li> +<li>Explore the feature&#8217;s <em>benefit</em> to the product. You need to confirm that this addition will be a net-positive for both customers and your bottom-line.</li> <li>All team members assigned to a feature need to scope it out. Far too often I see feature sets that require design input being estimated solely by developers and vice versa.</li> <li>Radically limit the scope of each individual task[^1]. Each task should be clear-cut, bite-sized and look almost trivial.</li> <li>Lock-in tickets. Once they are agreed upon they <strong>cannot</strong> be altered[^2]. Anything that absolutely <em>needs</em> to be added should become a future ticket itself.</li> -<li>Follow-up with feature reviews. When a sprint or milestone is reached, it is important to reflect on what worked and what didn't. Call out any instances where the team steered away from the guidelines above.</li> +<li>Follow-up with feature reviews. When a sprint or milestone is reached, it is important to reflect on what worked and what didn&#8217;t. Call out any instances where the team steered away from the guidelines above.</li> </ul> -<p>That's it. Just a nice, simple baseline to branch off from to avoid "featurism". Some items listed won't make sense for certain teams and that's okay. If you take the time to at least reflect on your feature workflow, I guarantee you'll find areas to improve.</p> + +<p>That&#8217;s it. Just a nice, simple baseline to branch off from to avoid &#8220;featurism&#8221;. Some items listed won&#8217;t make sense for certain teams and that&#8217;s okay. If you take the time to at least reflect on your feature workflow, I guarantee you&#8217;ll find areas to improve.</p> + <p>Creeping featurism can kill your product and the morale of your team. Avoid it like the plague!</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>This is easier said than done. Normally you will need to have developed some form of "point system" internally, so you know how to effectively divide features.</li> +<li>This is easier said than done. Normally you will need to have developed some form of &#8220;point system&#8221; internally, so you know how to effectively divide features.</li> <li><em>Taking away</em> complexity, making changes that do not impact workload or reducing the ticket is fine - within reason.</li> </ol></content> - <link href="https://bt.ht/af"/> - <id>https://bt.ht/af</id> + <link href="https://btxx.org/af"/> + <id>https://btxx.org/af</id> <updated>2022-10-14T10:00:00Z</updated> <published>2022-10-14T10:00:00Z</published> </entry> <entry> <title>Setting Up AdGuard Home with Eero</title> - <content type="html"><h1>Setting Up AdGuard Home with Eero</h1> + <content type="html"><h1 id="setting-up-adguard-home-with-eero">Setting Up AdGuard Home with Eero</h1> + <p>2022-11-04</p> + <p>Eariler this year I posted <a href="/eero">detailed instructions on setting up Pi-Hole with Eero</a> and it seemed to help out a few people having troubles. With AdGuard Home recently popping up on the <a href="https://news.ycombinator.com/item?id=33387678">frontpage of HackerNews</a>, I thought now would be a great time to post instructions of setting up <em>that</em> service alongside Eero devices.</p> -<h2>What You'll Need</h2> + +<h2 id="what-youll-need">What You&#8217;ll Need</h2> + <ol> <li>Raspberry Pi device (I recommend the Pi Zero for simplicity and low cost)</li> <li>microSD card</li> @@ -10417,191 +13333,803 @@ flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flat <li>micro USB to ethernet adapter (check your local Amazon)</li> <li>Patience!</li> </ol> -<h2>Setting Up the Raspberry Pi</h2> + +<h2 id="setting-up-the-raspberry-pi">Setting Up the Raspberry Pi</h2> + <p>The first thing we need to do is flash Raspberry Pi <strong>Lite</strong> onto our SD card. Open Raspberry Pi Imager, select the <strong>Lite</strong> version of the OS and your respective media (the SD card):</p> + <p><img src="/public/images/rpi-lite-os.webp" alt="Raspberry Pi Lite" /></p> -<p>Don't flash anything just yet! Be sure to use the gear icon and edit the settings. Set a custom hostname, enable <code>ssh</code> and setup a proper user:</p> + +<p>Don&#8217;t flash anything just yet! Be sure to use the gear icon and edit the settings. Set a custom hostname, enable <code>ssh</code> and setup a proper user:</p> + <p><img src="/public/images/rpi-adguard-1.webp" alt="Imager settings" /></p> -<h2>Plug it in and Boot!</h2> -<p>Put the SD card into your Pi, connect power and ethernet. Give it a bit of time to boot up. Once you see a nice solid green LED, go back to your local computer's terminal and enter the following command:</p> + +<h2 id="plug-it-in-and-boot">Plug it in and Boot!</h2> + +<p>Put the SD card into your Pi, connect power and ethernet. Give it a bit of time to boot up. Once you see a nice solid green LED, go back to your local computer&#8217;s terminal and enter the following command:</p> + <pre><code>ssh piguard@piguard.local </code></pre> + <p>If everything was set up properly you will be asked to trust this device. Next, you will be prompted to enter the device password you setup.</p> -<p>Once you are connected directly to the Pi, it's best to check for updates:</p> + +<p>Once you are connected directly to the Pi, it&#8217;s best to check for updates:</p> + <pre><code>sudo apt update </code></pre> -<p>...and if updates are in fact available, install them via:</p> + +<p>&#8230;and if updates are in fact available, install them via:</p> + <pre><code>sudo apt upgrade </code></pre> -<h2>Installing AdGuard Home</h2> + +<h2 id="installing-adguard-home">Installing AdGuard Home</h2> + <p>Simply run the automated installer:</p> -<pre><code>curl -s -S -L https://raw.githubusercontent.com/AdguardTeam/AdGuardHome/master/scripts/install.sh | sh -s -- -v + +<pre><code>curl -s -S -L https:&#47;&#47;raw.githubusercontent.com&#47;AdguardTeam&#47;AdGuardHome&#47;master&#47;scripts&#47;install.sh | sh -s -- -v </code></pre> -<p>Follow the instructions and you'll be setup in no time! To view your AdGuard dashboard at any time, you can now simply navigate to <code>piguard.local</code>.</p> -<p>If you run into any issues, I strongly suggest <a href="https://github.com/AdguardTeam/AdGuardHome#getting-started">reading through the "Getting Started" guide</a>.</p> -<h2>Configuring the Eero App</h2> + +<p>Follow the instructions and you&#8217;ll be setup in no time! To view your AdGuard dashboard at any time, you can now simply navigate to <code>piguard.local</code>.</p> + +<p>If you run into any issues, I strongly suggest <a href="https://github.com/AdguardTeam/AdGuardHome#getting-started">reading through the &#8220;Getting Started&#8221; guide</a>.</p> + +<h2 id="configuring-the-eero-app">Configuring the Eero App</h2> + <p>Once your AdGuard Home server is installed and running, you can finally point your Eero network at it.</p> + <ol> <li>Open the Eero app (iOS or Android)</li> -<li>Navigate to <strong>Settings</strong> &gt; <strong>Network Settings</strong> &gt; <strong>DNS</strong></li> -<li>Select <strong>Customized DNS</strong> and enter both your saved IPv4 / IPv6 values (These can be found under the <code>Setup Guide</code> tab in the main AdGuard Dashboard)</li> +<li>Navigate to <strong>Settings</strong> &#62; <strong>Network Settings</strong> &#62; <strong>DNS</strong></li> +<li>Select <strong>Customized DNS</strong> and enter both your saved IPv4 &#47; IPv6 values (These can be found under the <code>Setup Guide</code> tab in the main AdGuard Dashboard)</li> <li>Eero will prompt you to reboot your network - do it</li> </ol> + <p>After the system reboots everything <em>should</em> be working as intended!</p> -<h2>Closing Thoughts</h2> -<p>I've personally switched over from Pi-Hole to AdGuard Home - it just feels more robust and the UI is significantly cleaner. Hopefully this helps others trying to do the same!</p></content> - <link href="https://bt.ht/adguard"/> - <id>https://bt.ht/adguard</id> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>I&#8217;ve personally switched over from Pi-Hole to AdGuard Home - it just feels more robust and the UI is significantly cleaner. Hopefully this helps others trying to do the same!</p></content> + <link href="https://btxx.org/adguard"/> + <id>https://btxx.org/adguard</id> <updated>2022-11-04T10:00:00Z</updated> <published>2022-11-04T10:00:00Z</published> </entry> <entry> + <title>Website Backups with Apple iCloud</title> + <content type="html"><h1 id="website-backups-with-apple-icloud">Website Backups with Apple iCloud</h1> + +<p>2024-02-16</p> + +<p>My main work machine, an M2 MacBook Air, meshes really well with my iPhone SE (they are in the same ecosystem after all - duh!). Since both of these devices are Apple products, it makes sense that I pay for the optional iCloud service for extra storage. 50GB to be exact. I only need to bare minimum which costs just $1.68 a month, making this storage option cheaper than most cups of coffee these days.</p> + +<p>Recently I&#8217;ve been using iCloud as my &#8220;middle-man&#8221; backup system. I still have local, offline storage for most personal data but having additional off-site backups is never a bad thing. I make things easier for myself by taking advantage of <code>rsync</code>. You&#8217;ll need to make sure you have that program installed before trying this yourself:</p> + +<pre><code># This assumes you have homebrew installed first +brew install rsync +</code></pre> + +<p>Then, whenever I feel like backing up an existing project or website I simply run:</p> + +<pre><code>rsync -a user_name@ssh.webserver.domain:&#47;home&#47;var&#47;www&#47; &#47;Users&#47;username&#47;Library&#47;Mobile\ Documents&#47;com\~apple\~CloudDocs&#47;Backups&#47;site-backup +</code></pre> + +<blockquote> +<p>Note: The <code>-a</code> option tells <code>rsync</code> to sync directories recursively, transfer special and block devices, preserve symbolic links, modification times, groups, ownership, and permissions.</p> +</blockquote> + +<p>The beautiful magic of <code>rsync</code>! Obviously, you&#8217;d want to properly name your directories (ie. <code>&#47;Backups&#47;site-backup</code>) for a cleaner structure and ensure that your iCloud directory is set correctly. (remember to read code before just copy-pasting!). With this approach you can backup entire server directories or be specific with each individual project folder. I would also recommend setting up some alias in your <code>.bashrc</code> or <code>.zshrc</code> etc. to make things more streamlined when running backups manually:</p> + +<pre><code>alias site-backup="rsync -a user_name@ssh.webserver.domain:&#47;home&#47;var&#47;www&#47; &#47;Users&#47;username&#47;Library&#47;Mobile\ Documents&#47;com\~apple\~CloudDocs&#47;Backups&#47;site-backup" +# Then you simply run the following for a manual backup: +site-backup +</code></pre> + +<p>You can take this further by automating things via cron jobs, but for my use case that is a little overkill. Hopefully this helps anyone looking for a quick and dirty backup system, especially one that can piggyback of your existing iCloud that you might be paying for already.</p></content> + <link href="https://btxx.org/Website_Backups_with_Apple_iCloud"/> + <id>https://btxx.org/Website_Backups_with_Apple_iCloud</id> + <updated>2024-02-16T10:00:00Z</updated> + <published>2024-02-16T10:00:00Z</published> + </entry> + <entry> <title>Switching Things Over to ikiwiki</title> - <content type="html"><h1>Switching Things Over to ikiwiki</h1> + <content type="html"><h1 id="switching-things-over-to-ikiwiki">Switching Things Over to ikiwiki</h1> + <p>2023-12-17</p> -<p>I've done it again. My personal website is no longer generated with <a href="https://barf.btxx.org">barf</a> but is instead built on top of ikiwiki. The old RSS feed (<a href="https://btxx.org/atom.xml">btxx.org/atom.xml</a>) still exists but will no longer receive updates. The new feed can be found on the bottom of the homepage (<a href="/index.rss">index.rss</a>)</p> -<h2>Why a Wiki?</h2> -<p>I love the simplicity of a minimal blog, which is why I always gravitated towards purely "static" site builders. Over time though, I found two minor issues that slowly chipped away at me: ease-of-use and flexibility.</p> -<p>I had a vision, back when I began tinkering with my own place on the web, of building out my own personal "resource center" or wiki. Often times through work or personal projects I stumble into little problems that I need to solve. Most times I find a solution and move on with my life. The problem with this approach is <em>lack of documentation</em>.</p> -<p>What if I come across that issue at a later point in time? Will I even remember my old solution? Probably not. So, I've made the switch to a more flexible, personal wiki (which also happens to be a blog!)</p> -<h2>Text Editors, Terminals, and Web UI - Oh My!</h2> + +<p>I&#8217;ve done it again. My personal website is no longer generated with <a href="https://barf.btxx.org">barf</a> but is instead built on top of ikiwiki. The old RSS feed (<a href="https://btxx.org/atom.xml">btxx.org&#47;atom.xml</a>) still exists but will no longer receive updates. The new feed can be found on the bottom of the homepage (<a href="/index.rss">index.rss</a>)</p> + +<h2 id="why-a-wiki">Why a Wiki?</h2> + +<p>I love the simplicity of a minimal blog, which is why I always gravitated towards purely &#8220;static&#8221; site builders. Over time though, I found two minor issues that slowly chipped away at me: ease-of-use and flexibility.</p> + +<p>I had a vision, back when I began tinkering with my own place on the web, of building out my own personal &#8220;resource center&#8221; or wiki. Often times through work or personal projects I stumble into little problems that I need to solve. Most times I find a solution and move on with my life. The problem with this approach is <em>lack of documentation</em>.</p> + +<p>What if I come across that issue at a later point in time? Will I even remember my old solution? Probably not. So, I&#8217;ve made the switch to a more flexible, personal wiki (which also happens to be a blog!)</p> + +<h2 id="text-editors-terminals-and-web-ui---oh-my">Text Editors, Terminals, and Web UI - Oh My!</h2> + <p>ikiwiki comes packed with multiple ways to publish pages and posts. Since it is built with ikiwiki and git version control in mind, you have the ability to push out changes directly to your server similar to that of pre-existing static site generators. It also gives you the choice to <code>ssh</code> directly into your server and publish content from your terminal if you so desire.</p> -<p>Best of all, ikiwiki offers a web UI interface. This is something I have long missed since leaving "dynamic" websites behind.</p> -<h2>But Wait, There's More!</h2> -<p>Did I mention that this site now supports a built-in search form <em>and</em> a comment system? I've been wanting comments or discussions directly on my personal web space for the longest time and now I do! The search function is really an added bonus, mostly for my own personal use to find something I documented quickly.</p> -<h2>Broken Links and Bugs</h2> -<p>I've done my best to properly forward all original posts and pages to their new URLs - but I'm sure some things will be overlooked. So please feel free to reach out and let me know if anything seems broken.</p> -<p>I look forward to growing out this "platform" and seeing how it impacts my workflow writing documentation / blog posts. I hope you'll come along for the ride!</p></content> - <link href="https://bt.ht/Switching_Things_Over_to_ikiwiki"/> - <id>https://bt.ht/Switching_Things_Over_to_ikiwiki</id> + +<p>Best of all, ikiwiki offers a web UI interface. This is something I have long missed since leaving &#8220;dynamic&#8221; websites behind.</p> + +<h2 id="but-wait-theres-more">But Wait, There&#8217;s More!</h2> + +<p>Did I mention that this site now supports a built-in search form <em>and</em> a comment system? I&#8217;ve been wanting comments or discussions directly on my personal web space for the longest time and now I do! The search function is really an added bonus, mostly for my own personal use to find something I documented quickly.</p> + +<h2 id="broken-links-and-bugs">Broken Links and Bugs</h2> + +<p>I&#8217;ve done my best to properly forward all original posts and pages to their new URLs - but I&#8217;m sure some things will be overlooked. So please feel free to reach out and let me know if anything seems broken.</p> + +<p>I look forward to growing out this &#8220;platform&#8221; and seeing how it impacts my workflow writing documentation &#47; blog posts. I hope you&#8217;ll come along for the ride!</p></content> + <link href="https://btxx.org/Switching_Things_Over_to_ikiwiki"/> + <id>https://btxx.org/Switching_Things_Over_to_ikiwiki</id> <updated>2023-12-17T10:00:00Z</updated> <published>2023-12-17T10:00:00Z</published> </entry> <entry> + <title>Please Make Your Table Headings Sticky</title> + <content type="html"><h1 id="please-make-your-table-headings-sticky">Please Make Your Table Headings Sticky</h1> + +<p>2024-02-23</p> + +<p>I often stumble upon large data sets or table layouts across the web. When these tables contain hundreds of rows of content, things become problematic once you start to scroll&#8230;</p> + +<p><a href="/public/videos/not-fixed-header-tables.mp4">Link to video example of standard table header</a></p> + +<p>Look at that table header disappear! Now, if I scroll all the way down to item #300 (for example) will I remember what each column&#8217;s data is associated with? If this is my first time looking at this table - probably not. Luckily we can fix this (no pun intended!) with a tiny amount of CSS.</p> + +<h2 id="sticky-header">Sticky Header</h2> + +<p>Check it out:</p> + +<p><a href="/public/videos/fixed-header-tables.mp4">Link to video example of fixed table header</a></p> + +<p>Pretty awesome, right? It might look like magic but it&#8217;s actually very easy to implement. You only need to add 2 CSS properties on your <code>thead</code>:</p> + +<pre><code>position: sticky; +top: 0; +</code></pre> + +<p>That&#8217;s it! Best of all, <code>sticky</code> has <a href="https://caniuse.com/?search=sticky">~96% global support</a> which means this isn&#8217;t some &#8220;bleeding-edge&#8221; property and can safely support a ton of browsers. Not to mention the improved experience for your end-users!</p> + +<p>You can view a live demo of this table on the <a href="https://codepen.io/bradleytaunt/pen/bGZyJBj">CodePen example pen</a>.</p> + +<p>If you found this interesting, feel free to check out my other table-focused post: <a href="https://btxx.org/posts/tables/">Making Tables Responsive With Minimal CSS</a></p></content> + <link href="https://btxx.org/Please_Make_Your_Table_Headings_Sticky"/> + <id>https://btxx.org/Please_Make_Your_Table_Headings_Sticky</id> + <updated>2024-02-23T10:00:00Z</updated> + <published>2024-02-23T10:00:00Z</published> + </entry> + <entry> + <title>OpenBSD is a Cozy Operating System</title> + <content type="html"><h1 id="openbsd-is-a-cozy-operating-system">OpenBSD is a Cozy Operating System</h1> + +<p>2024-04-11</p> + +<p>With the recent release of OpenBSD 7.5, I decided to run through my <a href="https://git.btxx.org/open-suck/about/">personal OpenBSD &#8220;installer&#8221;</a> for laptop&#47;desktop devices. The project is built off of the <code>dwm</code> tiling window manager and only installs a few basic packages. The last time I updated it was with the release of 7.3, so it&#8217;s been due for an minor rework.</p> + +<p>While making these minor changes, I remembered how incredibly easy the entire install process for OpenBSD is and how <em>cozy</em> the entire operating system feels. All the core systems just work out the box. Yes, you need to &#8220;patch&#8221; in WiFi with a firmware update, so you&#8217;ll need an Ethernet connection during the initial setup. Yes, the default desktop environment is not intuitive or ideal for newcomers.</p> + +<p>But the positives heavily outweigh the negatives (in my opinion):</p> + +<ul> +<li>Incredibly secure operating system (No <code>xz</code> drama here&#8230;)</li> +<li>Detailed documentation. Probably one of the best of any OS</li> +<li>Much smaller codebase and small core team</li> +<li><em>Complete</em> operating system (kernel, userland utilities, libraries, applications combined)</li> +</ul> + +<p>These points might not seem important to others, but they are to me. Maybe you&#8217;re possibly interested in checking it out yourself? If you are, then read on&#8230;</p> + +<h2 id="try-it-yourself">Try it Yourself!</h2> + +<p>I&#8217;ve tried my best to write up a simplified, noob-friendly guide on both setting up the core OpenBSD system, along with installing a simple <code>dwm</code> based desktop environment. These are both focused on personal devices (laptops&#47;computers), so if you&#8217;re looking for server-specific setups you won&#8217;t find that here!</p> + +<p>You can find both of those wiki-pages below:</p> + +<ul> +<li><a href="https://btxx.org/wiki/openbsd/installation/">Installing OpenBSD</a></li> +<li><a href="https://btxx.org/wiki/openbsd/desktop_environment/">Setting up a Desktop Environment for OpenBSD</a></li> +</ul> + +<p>Some additional reading I highly recommend is: <a href="https://www.c0ffee.net/blog/openbsd-on-a-laptop">c0ffee.net&#47;blog&#47;openbsd-on-a-laptop</a></p></content> + <link href="https://btxx.org/OpenBSD_is_a_Cozy_Operating_System"/> + <id>https://btxx.org/OpenBSD_is_a_Cozy_Operating_System</id> + <updated>2024-04-11T10:00:00Z</updated> + <published>2024-04-11T10:00:00Z</published> + </entry> + <entry> + <title>New Domain and Code Forge</title> + <content type="html"><h1 id="new-domain-and-code-forge">New Domain and Code Forge</h1> + +<p>2024-01-29</p> + +<p>As you can clearly see, my site&#8217;s domain has switched over to <strong>btxx.org</strong>. This post will go into details about the reason for this URL swap (spoilers: I&#8217;m a cheapskate) - but that isn&#8217;t all. I have moved my personal git repositories over to my own hosting. I will explain the reasoning for that switch as well.</p> + +<p>But enough introductions, let&#8217;s get into it!</p> + +<h2 id="bt.ht-is-no-more">bt.ht is No More</h2> + +<p>I&#8217;ve abandoned <code>bt.ht</code>. Well, kind of. That domain doesn&#8217;t expire until 2025, which works out nicely since I can keep a complete web forward active for the entire year. This will avoid such a radical switch, similar to what I did years ago with my &#8220;uglyduck&#8221; domain<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>. Hopefully anyone who follows my dumb ramblings will have more than enough time to become familiar with the new URL.</p> + +<p>For reference, those interested in updating their RSS will need to use the latest URLs: </p> + +<ul> +<li><a href="https://btxx.org/index.rss">RSS</a></li> +<li><a href="https://btxx.org/index.atom">Atom</a></li> +</ul> + +<p>You have roughly a year to do so, since new posts should still automatically appear even with defaulting to the older URL (hooray for 301 redirects!).</p> + +<p>There were two core reasons for switching domains. The first was based off a change in ownership with my previous domain registrar, Gandi. You can read more details <a href="https://news.ycombinator.com/item?id=35080777">here</a>, but they were essentially bought out, then decided to cancel their free email service and raised their prices. Not many registrars support the <code>.ht</code> TLD, so moving to another provider was already proving to be difficult. Once my mind was made up that I didn&#8217;t want to support such shady actions from a company, I thought even more about the concept of spending <em>so much</em> on a domain name in the first place. It was a novelty to have such a &#8220;short&#8221; domain, but that seems silly in hindsight.</p> + +<p>Just take a look at the differences in domain costs and email services below:</p> + +<table> +<thead> +<tr> +<th>URL</th> +<th>Domain&#47;year</th> +<th>Email&#47;year</th> +<th>Total</th> +</tr> +</thead> + +<tbody> +<tr> +<td>bt.ht</td> +<td>$172</td> +<td>$60</td> +<td>$232</td> +</tr> +<tr> +<td>btxx.org</td> +<td>$17</td> +<td>$19</td> +<td>$36</td> +</tr> +</tbody> +</table> + +<p>By making this switch (for both my domain and email service) I would save a yearly total of <strong>$196 USD</strong>. This was a no-brainer. The minute I did the math I thought, &#8220;Hell, I&#8217;m already moving everything to a different registrar <em>and</em> I need to look for a separate email provider&#8230;why not just start fresh with a new, <em>cheaper</em> domain?&#8221;</p> + +<p>So that&#8217;s what I&#8217;ve done.</p> + +<h2 id="my-own-code-forge">My Own Code Forge</h2> + +<p>As some people in the open source community might already be aware, <a href="https://sourcehut.org">sourcehut</a> had a major outage a couple weeks back. It lasted a few days and all services were impacted. This meant that all publicly hosted websites, build processes and <code>git</code> repositories were unavailable. It was no fault of sourcehut of course, they were viciously attacked for no <em>real</em> reason. </p> + +<p>But this outage did get me thinking about what it means to &#8220;control&#8221; my own code. I always liked the idea of hosting my own git projects but relied on third-party services since they were more convenient. The problem with entrusting anything, not just code storage, to third-party services is lack of oversight. You really have no idea what is happening behind the scenes. You don&#8217;t control your own backups. You don&#8217;t have the freedom to tweak UI or user flow of your project views (which I understand is certainly an edge-case).</p> + +<p>These thoughts lead me to research some &#8220;self-hosted&#8221; code forge options. My main contenders were:</p> + +<ul> +<li>GitWeb</li> +<li>cgit</li> +<li>Gitea</li> +</ul> + +<p>I&#8217;ll save you the suspense: I went with cgit. Getting GitWeb configured properly was giving me a lot of issues and Gitea seemed overkill for my person needs. I host through NearlyFreeSpeech (running FreeBSD) and they had a decent tutorial for setting cgit up on their servers. I&#8217;ve updated my own wiki for those interested in doing something similar: <a href="/wiki/cgit">read the full step-by-step instructions for setting up cgit</a>.</p> + +<p>I still need to go through most of the existing projects on sourcehut and update their READMEs and purge the contents. The last thing I want to do is have users confused about which repo is the &#8220;real&#8221; one.</p> + +<p>Fore reference the my repos are now located here: <a href="https://git.btxx.org">git.btxx.org</a></p> + +<p>(I plan to place this in the main navigation soon&#8230;)</p> + +<h2 id="mirror-mirror-on-the-wall">Mirror, Mirror on the Wall&#8230;</h2> + +<p>I&#8217;m aware that to have extra protection from &#8220;downtime&#8221; that I should also mirror my code on separate forges. I plan to do this sometime in the future, but this isn&#8217;t a major priority for me currently. When the time comes I&#8217;ll be sure to update my repos referring to the mirrors (whatever platform that is I choose).</p> + +<h2 id="room-for-improvement">Room for Improvement</h2> + +<p>My code forge is far from perfect. Mobile view is lacking, there is no dark mode support and things could be slightly more intuitive. But I love it. The beauty of hosting everything on my own is that I can improve these things myself. For now, I&#8217;m happy with the outcome!</p> + +<div class="footnotes"> +<hr/> +<ol> + +<li id="fn1"> +<p>Someone oddly picked up that domain and piggybacked off the back-links. They happen to also be a designer&#8230;Guess the naming was that cool? &#160;<a href="#fnref1" rev="footnote">&#8617;</a></p> +</li> + +</ol> +</div></content> + <link href="https://btxx.org/New_Domain_and_Code_Forge"/> + <id>https://btxx.org/New_Domain_and_Code_Forge</id> + <updated>2024-01-29T10:00:00Z</updated> + <published>2024-01-29T10:00:00Z</published> + </entry> + <entry> <title>My Text Edtior is Not Open Source</title> - <content type="html"><h1>My Text Edtior is Not Open Source</h1> + <content type="html"><h1 id="my-text-edtior-is-not-open-source">My Text Edtior is Not Open Source</h1> + <p>2024-01-02</p> -<p>I've been using Sublime Text on and off for longer than I can remember. I think Sublime has been around since the start of my "real" career over 10 years ago, but I could be mistaken[^1]. It certainly <em>feels</em> that long. And in that time I have never gotten upset with Sublime. I've never rage quit or ran into an issue of Sublime not being able to <em>do the thing I wanted it to do</em>. As much of a cliche it may sound: it just works.</p> -<p>Even when I switch editors (VSCode, Geany, kitty+vim etc.) for a period of time, I find myself always coming back to Sublime. The only reason I try other editors is simply that: to try them. Maybe that's why these editors don't click with me. Maybe I'm giving Sublime an unfair advantage since I'm simply "testing" other editors, rather than looking for a solid alternative.</p> -<p>And don't get me wrong, I understand <em>why</em> editors like VSCode are extremely popular. VSCode has a massive ecosystem and new plugins are generally developed for that editor before all others. Finding solutions to problems online is very easy, since it is so popular. But best of all - it's open source[^2].</p> -<p>So why am I using a <em>non</em>-open source editor? (Spoilers: because it's a great editor)</p> -<h2>"A Proprietary Editor - How Could You?!"</h2> -<p>I know, I know. If you're familiar with me or the things I write about it must seem odd that I would willingly use proprietary software over open source. This is something I struggle with constantly day-to-day in the realm of "personal tech". I find with age I become more open-minded to having a diverse range of software and hardware choices. Open source is best in <em>concept</em> but not always best in practice.</p> -<p>The problem is that Sublime is just such a <em>great</em> editor. I can't ignore quality and refuse to use good software solely based on it's licensing. A few personal things I love about Sublime:</p> + +<p>I&#8217;ve been using Sublime Text on and off for longer than I can remember. I think Sublime has been around since the start of my &#8220;real&#8221; career over 10 years ago, but I could be mistaken<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>. It certainly <em>feels</em> that long. And in that time I have never gotten upset with Sublime. I&#8217;ve never rage quit or ran into an issue of Sublime not being able to <em>do the thing I wanted it to do</em>. As much of a cliche it may sound: it just works.</p> + +<p>Even when I switch editors (VSCode, Geany, kitty+vim etc.) for a period of time, I find myself always coming back to Sublime. The only reason I try other editors is simply that: to try them. Maybe that&#8217;s why these editors don&#8217;t click with me. Maybe I&#8217;m giving Sublime an unfair advantage since I&#8217;m simply &#8220;testing&#8221; other editors, rather than looking for a solid alternative.</p> + +<p>And don&#8217;t get me wrong, I understand <em>why</em> editors like VSCode are extremely popular. VSCode has a massive ecosystem and new plugins are generally developed for that editor before all others. Finding solutions to problems online is very easy, since it is so popular. But best of all - it&#8217;s open source<sup id="fnref2"><a href="#fn2" rel="footnote">2</a></sup>.</p> + +<p>So why am I using a <em>non</em>-open source editor? (Spoilers: because it&#8217;s a great editor)</p> + +<h2 id="a-proprietary-editor---how-could-you">&#8220;A Proprietary Editor - How Could You?!&#8221;</h2> + +<p>I know, I know. If you&#8217;re familiar with me or the things I write about it must seem odd that I would willingly use proprietary software over open source. This is something I struggle with constantly day-to-day in the realm of &#8220;personal tech&#8221;. I find with age I become more open-minded to having a diverse range of software and hardware choices. Open source is best in <em>concept</em> but not always best in practice.</p> + +<p>The problem is that Sublime is just such a <em>great</em> editor. I can&#8217;t ignore quality and refuse to use good software solely based on it&#8217;s licensing. A few personal things I love about Sublime:</p> + <ul> <li>Incredibly fast</li> <li>Handles massive files without breaking a sweat</li> -<li>Minimal resource footprint (ex. uses &lt;0.1% CPU working on huge projects)</li> -<li>Large ecosystem of plugins/themes</li> +<li>Minimal resource footprint (ex. uses &#60;0.1% CPU working on huge projects)</li> +<li>Large ecosystem of plugins&#47;themes</li> <li>No Electron</li> </ul> -<p>Other editors can certainly check off a few of those boxes as well, but you'd be hard-pressed to find one that checks off them all.</p> -<h2>Being a Cheapskate</h2> -<p>I must confess something that I think most Sublime users are guilty of: I've never <a href="https://www.sublimehq.com/store/text">bought a license</a>. I've installed and used Sublime on countless machines, on multiple operating systems from Linux to Windows to MacOS. That <code>Unregistered</code> text in the top right application bar has been with me since the beginning. But that in no longer the case.</p> + +<p>Other editors can certainly check off a few of those boxes as well, but you&#8217;d be hard-pressed to find one that checks off them all.</p> + +<h2 id="being-a-cheapskate">Being a Cheapskate</h2> + +<p>I must confess something that I think most Sublime users are guilty of: I&#8217;ve never <a href="https://www.sublimehq.com/store/text">bought a license</a>. I&#8217;ve installed and used Sublime on countless machines, on multiple operating systems from Linux to Windows to MacOS. That <code>Unregistered</code> text in the top right application bar has been with me since the beginning. But that in no longer the case.</p> + <p><strong>I finally purchased a license.</strong> I bundled it with <a href="https://www.sublimemerge.com/">Sublime Merge</a>, so it ended up costing me $168 USD. When I initially looked at that price tag I must admit I was tempted to close the browser tab and forget the whole thing. But then I realized I have been using this editor <em>free of charge</em> for over 10 years. (Not to mention using Sublime Merge for quite some time as well!)</p> + <p>So I did a little math:</p> -<pre><code>$168 / 10 years = $16.80 + +<pre><code>$168 &#47; 10 years = $16.80 </code></pre> -<p>Looking at it in that perspective, it's actually a great deal. Not to mention they have very respectable terms for their licenses:</p> -<blockquote><p>Personal licenses come with 3 years of updates. After 3 years, you'll be able to continue to use the last version released within 3 years of purchase (in other words, licenses do not expire). Any versions released 3 years or more after the purchase date will require a paid upgrade to use.</p> -</blockquote> -<blockquote><p>Individual licenses are valid for 3 years of updates, but do not expire after 3 years. Only if you wish to use newer versions will an upgrade fee be required. </p> -</blockquote> -<blockquote><p>Licenses are per-user, so you're welcome to use the one license on all computers and operating systems where you are the primary user.</p> + +<p>Looking at it in that perspective, it&#8217;s actually a great deal. Not to mention they have very respectable terms for their licenses:</p> + +<blockquote> +<p>Personal licenses come with 3 years of updates. After 3 years, you&#8217;ll be able to continue to use the last version released within 3 years of purchase (in other words, licenses do not expire). Any versions released 3 years or more after the purchase date will require a paid upgrade to use.</p> + +<p>Individual licenses are valid for 3 years of updates, but do not expire after 3 years. Only if you wish to use newer versions will an upgrade fee be required. </p> + +<p>Licenses are per-user, so you&#8217;re welcome to use the one license on all computers and operating systems where you are the primary user.</p> </blockquote> -<p>I won't copy everything from their main <a href="https://www.sublimehq.com/sales_faq">FAQ page</a> but as you can see it is very reasonable. I also get to feel decent for supporting developers who make very good software.</p> -<h2>Final Notes</h2> -<p>This post is not meant to convince you to switch or anything of that nature. Use what works for you! I just wanted to share my own personal preference when it came to my main text editor. Maybe this will also convince "hardcore" open source people (like me!) to realize it is <em>okay</em> to pay for software sometimes...</p> -<hr /> -<p>I should be very clear about something: this post <em>is not an advertisement</em>. I have not received any money or "kick backs" to write about my happy times with Sublime. This is purely my own opinion that I wanted to share with the internet!</p> -<p>BTW if anyone from SublimeHQ happens to come across this post: PLEASE look into building a "native" version of Sublime Text for FreeBSD/OpenBSD. I (and many others) would be forever grateful!</p> -<p>[^1]: Sublime does mention copyright since 2006...</p> -<p>[^2]: Not the pre-packaged Microsoft version</p></content> - <link href="https://bt.ht/My_Text_Editor_Is_Not_Open_Source"/> - <id>https://bt.ht/My_Text_Editor_Is_Not_Open_Source</id> + +<p>I won&#8217;t copy everything from their main <a href="https://www.sublimehq.com/sales_faq">FAQ page</a> but as you can see it is very reasonable. I also get to feel decent for supporting developers who make very good software.</p> + +<h2 id="final-notes">Final Notes</h2> + +<p>This post is not meant to convince you to switch or anything of that nature. Use what works for you! I just wanted to share my own personal preference when it came to my main text editor. Maybe this will also convince &#8220;hardcore&#8221; open source people (like me!) to realize it is <em>okay</em> to pay for software sometimes&#8230;</p> + +<hr/> + +<p>I should be very clear about something: this post <em>is not an advertisement</em>. I have not received any money or &#8220;kick backs&#8221; to write about my happy times with Sublime. This is purely my own opinion that I wanted to share with the internet!</p> + +<p>BTW if anyone from SublimeHQ happens to come across this post: PLEASE look into building a &#8220;native&#8221; version of Sublime Text for FreeBSD&#47;OpenBSD. I (and many others) would be forever grateful!</p> + +<div class="footnotes"> +<hr/> +<ol> + +<li id="fn1"> +<p>Sublime does mention copyright since 2006&#8230;&#160;<a href="#fnref1" rev="footnote">&#8617;</a></p> +</li> + +<li id="fn2"> +<p>Not the pre-packaged Microsoft version&#160;<a href="#fnref2" rev="footnote">&#8617;</a></p> +</li> + +</ol> +</div></content> + <link href="https://btxx.org/My_Text_Editor_Is_Not_Open_Source"/> + <id>https://btxx.org/My_Text_Editor_Is_Not_Open_Source</id> <updated>2024-01-02T10:00:00Z</updated> <published>2024-01-02T10:00:00Z</published> </entry> <entry> + <title>Installing WordPress on NearlyFreeSpeech</title> + <content type="html"><h1 id="installing-wordpress-on-nearlyfreespeech">Installing WordPress on NearlyFreeSpeech</h1> + +<p>2024-05-27</p> + +<p>I recently went through the process of porting over my wife&#8217;s small business website (built off of WordPress + Woocommerce) from EasyWP to NearlyFreeSpeech. Although the process was fairly easy-going, I thought I would post my complete process here. That way, others who might wish to make the same switch can avoid running into any minor bumps along the way.</p> + +<blockquote> +<p>Some of this information has been lifted from <a href="https://members.nearlyfreespeech.net/tdarb/support/wordpress">the official NFS docs</a>, but these pages require a membership to access</p> +</blockquote> + +<h3 id="download-wordpress">Download WordPress</h3> + +<p>We will use the <code>wp-cli</code> that comes packaged with NearlyFreeSpeech (NFS):</p> + +<ol> +<li>Connect to your site via SSH.</li> +<li>Change to the directory you want to be the base of your blog (e.g. &#47;home&#47;public if WordPress will be running the whole site, or &#47;home&#47;public&#47;blog if you want to share the site with other content).</li> +</ol> + +<p>For help using WP-CLI from the SSH command line, use this command:</p> + +<pre><code>wp help +</code></pre> + +<p>To download and unpack the latest version of WordPress, enter the following command:</p> + +<pre><code>wp core download +</code></pre> + +<h2 id="create-a-mysql-process-and-database">Create a MySQL Process and Database</h2> + +<p>Follow the instructions in the NearlyFreeSpeech.NET FAQ to <a href="https://members.nearlyfreespeech.net/faq?q=MySQL#MySQL">create a MySQL process</a> if you haven&#8217;t already.</p> + +<p>Next, <a href="https://members.nearlyfreespeech.net/faq?q=CreateDatabase#CreateDatabase">create a new database</a> within that process. Note the name of the process and the name of the database.</p> + +<p><strong>Important</strong>: Do not use your own MySQL credentials to connect WordPress to your database. Instead, create a new user. This will protect your member password in the event that your site becomes compromised.</p> + +<ul> +<li>Click on the <a href="https://members.nearlyfreespeech.net/mysql">MySQL tab</a> in the member interface</li> +<li>Click &#8220;[Open phpMyAdmin](<a href="https://phpmyadmin.nearlyfreespeech.net/">https:&#47;&#47;phpmyadmin.nearlyfreespeech.net&#47;</a>&#8221; in the Actions box.</li> +<li>Enter the DSN (&#8220;Server&#8221;) of your MySQL Process, MySQL username, and MySQL password. The DSN and username can be found on the Process Information page in our member UI.</li> +<li>Click on the &#8220;Users&#8221; tab.</li> +<li>Click &#8220;Add user.&#8221; (It&#8217;s toward the bottom left of the page.)</li> +<li>Give the user a descriptive name. We&#8217;ll use exampledbuser here, but you should pick something better, like wpuser or something representative of your blog.</li> +<li>Make sure to leave the Host: selectbox on &#8220;Any host.&#8221;</li> +<li>Click the &#8220;Generate&#8221; link to generate a nice strong password.</li> +<li>Use cut and paste to copy the new password somewhere, you&#8217;ll need it later. (We&#8217;ll use dbpassword here.)</li> +<li>Grant the following permissions to the new user: + +<ul> +<li>All the permissions except &#8220;file&#8221; in the &#8220;data&#8221; box,</li> +<li>Everything in the &#8220;structure&#8221; box, and</li> +<li>&#8220;LOCK TABLES&#8221; in the &#8220;administration&#8221; box.</li> +</ul></li> +<li>Click the &#8220;Go&#8221; button in the lower right.</li> +<li>Exit phpMyAdmin.</li> +</ul> + +<h2 id="generate-a-wordpress-configuration-file">Generate a WordPress Configuration File</h2> + +<p>At the SSH command line (replace the examples with the info for the database and user you created above):</p> + +<pre><code>wp core config --dbhost=example.db --dbname=exampledb --dbuser=exampledbuser --dbpass=dbpassword +chmod 644 wp-config.php +</code></pre> + +<h2 id="run-the-wordpress-installation-and-setting-permissions">Run the WordPress Installation and Setting Permissions</h2> + +<p>To get your permalinks to work properly, you must set up an .htaccess file. </p> + +<ol> +<li>Go to the Dashboard for your WordPress site. (e.g. <a href="https://www.example.com/wp-admin/index.php">https:&#47;&#47;www.example.com&#47;wp-admin&#47;index.php</a>)</li> +<li>In the navigation sidebar, find Settings and, under that, Permalinks.</li> +<li>Select your preferred link style under &#8220;Common Settings.&#8221; (We like &#8220;Day and name.&#8221;)</li> +<li>Scroll down and select the &#8220;Save Changes&#8221; button.</li> +</ol> + +<p>Next, create an <code>.htaccess</code> file for your WordPress site. We suggest doing this directly from the SSH command line using the cat shell command:</p> + +<pre><code>cat &#62;.htaccess &#60;&#60;NFSNRULES # This line is a shell command, not part of .htaccess! +RewriteEngine On +RewriteBase &#47; +RewriteRule ^index\.php$ - [L] +RewriteCond %{REQUEST_FILENAME} !-f +RewriteCond %{REQUEST_FILENAME} !-d +RewriteRule . &#47;index.php [L] +NFSNRULES +</code></pre> + +<p>If you prefer, you can copy-paste the text into an editor:</p> + +<pre><code>RewriteEngine On +RewriteBase &#47; +RewriteRule ^index\.php$ - [L] +RewriteCond %{REQUEST_FILENAME} !-f +RewriteCond %{REQUEST_FILENAME} !-d +RewriteRule . &#47;index.php [L] +</code></pre> + +<p>We need to run the following commands in order to install, uninstall, activate, and deactivate plugins&#47;themes from within the admin web GUI of WordPress:</p> + +<pre><code>chgrp web .htaccess +chmod 664 .htaccess +chgrp -R web * +find . -type d -exec chmod 775 {} \; +find . -type f -exec chmod 664 {} \; +wp config set FS_METHOD direct +</code></pre> + +<h2 id="enable-file-uploading">Enable File Uploading</h2> + +<p>In your main WordPress installation folder enter the following SSH commands:</p> + +<pre><code>cd wp-content +mkdir -p uploads +chgrp -R web uploads +chmod -R 775 uploads +</code></pre> + +<h2 id="keeping-wordpress-up-to-date-automatically-via-command-line">Keeping WordPress Up-To-Date Automatically via Command Line</h2> + +<p>It is <strong>critically</strong> important to keep your WordPress installation up-to-date including, if applicable, your theme and plugins. PHP, WordPress, and WordPress themes and plugins all have a track record of security problems. Most of those get fixed quickly, but if you don&#8217;t update, you don&#8217;t get the fixes.</p> + +<p>To help you keep WordPress up-to-date, NFS provides a streamlined script.</p> + +<p>This command, which must be run from an interactive ssh session, will set up our system to check your WordPress install (and themes &#38; plugins) for you every day, and update them automatically when needed:</p> + +<pre><code>wp-update.sh -a +</code></pre> + +<p>By default, it will tell you via email when updates happen. If you don&#8217;t want that, just add <code>-q</code> (for &#8220;quiet&#8221;) to the command. It will work silently unless there is an error.</p> + +<p>If you get errors from wp-cron (not wp-update) about failed automatic updates, you may also wish to add this to your wp-config.php file:</p> + +<pre><code>define( &#39;AUTOMATIC_UPDATER_DISABLED&#39;, true ); +</code></pre> + +<p>This disables the insecure automatic updater bundled with recent versions of WordPress.</p> + +<p><strong>Do not attempt</strong> to use WordPress&#8217;s built-in ability to update itself through its admin panel. That insecure, outdated approach should not still exist. It does not work on NFS, which is a feature, not a bug. Getting it to work requires almost completely destroying your site&#8217;s security, thereby ensuring that any undiscovered security flaw can enable hackers to completely obliterate your site. The update methods described here are faster, easier, and safer.</p> + +<h2 id="logging-in">Logging In</h2> + +<p>You should be able to navigate to <code>yourwebsite.com&#47;wp-admin</code>, login and have everything work as expected. Congrats - enjoy your blog!</p> + +<p>Below you can find more advanced configuration to get the most out of your WordPress project.</p> + +<hr/> + +<h2 id="backing-up-wordpress">Backing up WordPress</h2> + +<p>NFS recommends backing up your WordPress setup on a regular basis.</p> + +<p>This is a two-step process. You must back up both the files and the database.</p> + +<h3 id="backing-up-wordpress-files">Backing up WordPress Files</h3> + +<p>To back up your WordPress files directly from a Unix-like system of your own, you can use a command like:</p> + +<pre><code>ssh yourmembername_siteshortname@ssh.phx.nearlyfreespeech.net tar -C &#47;home&#47;public -cvf - . | gzip &#62;name-of-wordpress-backup.tar.gz +</code></pre> + +<p>To back up WordPress to a file on our system that you can transfer via SFTP to your own computer, you can use a command like:</p> + +<pre><code>tar -C &#47;home&#47;public -cvzf &#47;home&#47;tmp&#47;name-of-wordpress-backup.tar.gz . +</code></pre> + +<p>This assumes that your WordPress install is in the default location (<code>&#47;home&#47;public</code>). It will put your backup file in your <code>&#47;home&#47;tmp</code> directory.</p> + +<p>Do not try to back up your WordPress folder into your WordPress folder, as that occasionally results in attempts to use infinite disk space by trying to back up the backup of the backup of the backup of the&#8230;</p> + +<h3 id="backing-up-the-wordpress-database">Backing up the WordPress Database</h3> + +<p>If you have a Unix-like system of your own (e.g. macOS or Linux), you can do the backup directly from there using your local command prompt using the MySQL username and password you created for WordPress:</p> + +<pre><code>ssh yourmembername_siteshortname@ssh.phx.nearlyfreespeech.net wp db export - | gzip &#62;wordpress-backup.sql.gz +</code></pre> + +<p>Or you can do it from the SSH command line via WP-CLI:</p> + +<pre><code>wp db export &#47;home&#47;tmp&#47;wordpress-backup.sql +</code></pre> + +<p>The <code>wordpress-backup.sql</code> file this generates will be stored in your site&#8217;s <code>&#47;home&#47;tmp</code> directory. Download it from there to have a local copy.</p> + +<h2 id="thats-it">That&#8217;s It!</h2> + +<p>Your WordPress site should be up-and-running now. Further customization or extra plugins&#47;services can be freely added if so desired. Enjoy your site!</p></content> + <link href="https://btxx.org/Installing_WordPress_on_NearlyFreeSpeech"/> + <id>https://btxx.org/Installing_WordPress_on_NearlyFreeSpeech</id> + <updated>2024-05-27T10:00:00Z</updated> + <published>2024-05-27T10:00:00Z</published> + </entry> + <entry> + <title>Building rbenv on OpenBSD 7.5</title> + <content type="html"><h1 id="building-rbenv-on-openbsd-7.5">Building rbenv on OpenBSD 7.5</h1> + +<p>2024-06-02</p> + +<p>I use Ruby (specifically with Jekyll) for a lot of my clubs&#47;projects while using my personal laptop (<a href="/posts/x220/">X220 ThinkPad</a>) which is runs OpenBSD. Since I recently upgraded to OpenBSD 7.5 I thought it could be helpful for others if I shared my process of building and using <code>rbenv</code> to install different Ruby versions.</p> + +<h2 id="before-we-build">Before We Build</h2> + +<p>First, be sure to install the required packages in order to build from source, and then clone the core <code>rbenv</code> repo:</p> + +<pre><code>pkg_add git gcc gmake libffi libyaml openssl +git clone https:&#47;&#47;github.com&#47;rbenv&#47;rbenv.git ~&#47;.rbenv +</code></pre> + +<h2 id="building-">Building <code>rbenv</code></h2> + +<p>Add <code>rbenv</code> to your PATH and initialize it (place this inside your <code>.bashrc</code> or <code>.zshrc</code> etc):</p> + +<pre><code>export PATH="$HOME&#47;.rbenv&#47;bin:$PATH" +export PATH="$HOME&#47;.rbenv&#47;shims:$PATH" +export RUBY_CONFIGURE_OPTS="--with-openssl-dir=&#47;usr&#47;local" +eval "$(rbenv init -)" +</code></pre> + +<p>Then reload your shell (zsh in this example): </p> + +<pre><code>source ~&#47;.zshrc +</code></pre> + +<p>Next we will need to install <code>ruby-build</code> as a <code>rbenv</code> plugin. Clone the ruby-build repository into the rbenv plugins directory:</p> + +<pre><code>git clone https:&#47;&#47;github.com&#47;rbenv&#47;ruby-build.git ~&#47;.rbenv&#47;plugins&#47;ruby-build +</code></pre> + +<h2 id="installing-ruby-and-setting-our-version">Installing Ruby and Setting Our Version</h2> + +<p>Now use <code>rbenv</code> to install the desired version of Ruby (we will get an older version for this example):</p> + +<pre><code>rbenv install 3.3.0 +</code></pre> + +<p>If you run into issues, you may need to specify your openssl directory:</p> + +<pre><code>RUBY_CONFIGURE_OPTS="--with-openssl-dir=&#47;usr&#47;local" rbenv install 3.3.0 +</code></pre> + +<p>If you&#8217;re on a slower machine (like mine) this might take a little bit. Just grab a coffee or a snack while you wait!</p> + +<p>Then navigate to your project of choice and set the <code>local</code> Ruby version:</p> + +<pre><code>rbenv local 3.3.0 +</code></pre> + +<p>That&#8217;s it! If you&#8217;d prefer to set this version of Ruby for all projects going forward, simply replace <code>local</code> with <code>global</code>.</p></content> + <link href="https://btxx.org/Building_rbenv_on_OpenBSD_7.5"/> + <id>https://btxx.org/Building_rbenv_on_OpenBSD_7.5</id> + <updated>2024-06-02T10:00:00Z</updated> + <published>2024-06-02T10:00:00Z</published> + </entry> + <entry> <title>Making a Website Under 1kB</title> - <content type="html"><h1>Making a Website Under 1kB</h1> + <content type="html"><h1 id="making-a-website-under-1kb">Making a Website Under 1kB</h1> + <p>2022-08-02</p> -<p>I recently launched (another) website club called the <a href="https://1kb.club">1kB Club</a>. Unlike the <a href="https://1mb.club">1MB Club</a>, it isn't as accessible for most modern websites to become official members. Building a website that actually serves useful content while squeezing its page size under 1,024 bytes is no easy feat.</p> + +<p>I recently launched (another) website club called the <a href="https://1kb.club">1kB Club</a>. Unlike the <a href="https://1mb.club">1MB Club</a>, it isn&#8217;t as accessible for most modern websites to become official members. Building a website that actually serves useful content while squeezing its page size under 1,024 bytes is no easy feat.</p> + <p>But it is possible. And I did it myself!</p> -<p><em>Note:</em> Big shout-out to <a href="https://t0.vc">Tanner</a>, who inspired this whole "movement" with his own minimal website. (He also has some really great creations/articles there too!)</p> -<h2>The HTML</h2> -<p>For reference, you can view my "mini" website here: <a href="https://cv.tdarb.org">cv.tdarb.org</a>. It is <em>very</em> minimal and serves only as a personal curriculum vitae. It also weighs only <strong>920 bytes</strong> and is valid HTML.</p> -<p>Let's take a look at the full HTML and then break things down from there:</p> -<pre><code>&lt;!DOCTYPE html&gt;&lt;link rel=&quot;icon&quot; href=&quot;data:,&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0&quot;&gt;&lt;title&gt;CV&lt;/title&gt;&lt;p&gt;Hi, I'm &lt;a href=&quot;t&quot;&gt;Brad Taunt&lt;/a&gt;! I'm a UX designer.&lt;p&gt;Email: hello@tdarb.org&lt;p&gt;Resume&lt;p&gt;Senior Product Designer @ Donorbox, 2021-&lt;br&gt;Web Designer @ Purism, 2019-2021&lt;br&gt;Product Designer @ Benbria, 2013-2019&lt;br&gt;Web Designer @ Netvatise, 2009-2013&lt;p&gt;Projects&lt;p&gt;&lt;a href=&quot;1&quot;&gt;1MB Club&lt;/a&gt;&lt;br&gt;&lt;a href=&quot;k&quot;&gt;1kB Club&lt;/a&gt;&lt;br&gt;&lt;a href=&quot;p&quot;&gt;pblog&lt;/a&gt;&lt;br&gt;&lt;a href=&quot;s&quot;&gt;shinobi&lt;/a&gt;&lt;br&gt;&lt;a href=&quot;h&quot;&gt;PHPetite&lt;/a&gt;&lt;br&gt;&lt;a href=&quot;v&quot;&gt;Vanilla CSS&lt;/a&gt;&lt;p&gt;Writing&lt;p&gt;&lt;a href=&quot;d&quot;&gt;The Death of Personality&lt;/a&gt;&lt;br&gt;&lt;a href=&quot;u&quot;&gt;Simple Does Not Mean Ugly&lt;/a&gt;&lt;br&gt;&lt;a href=&quot;e&quot;&gt;Plain Text Emails, Please&lt;/a&gt;&lt;br&gt;&lt;a href=&quot;tb&quot;&gt;[more]&lt;/a&gt; + +<p><em>Note:</em> Big shout-out to <a href="https://t0.vc">Tanner</a>, who inspired this whole &#8220;movement&#8221; with his own minimal website. (He also has some really great creations&#47;articles there too!)</p> + +<h2 id="the-html">The HTML</h2> + +<p>For reference, you can view my &#8220;mini&#8221; website here: <a href="https://cv.tdarb.org">cv.tdarb.org</a>. It is <em>very</em> minimal and serves only as a personal curriculum vitae. It also weighs only <strong>920 bytes</strong> and is valid HTML.</p> + +<p>Let&#8217;s take a look at the full HTML and then break things down from there:</p> + +<pre><code>&#60;!DOCTYPE html&#62;&#60;link rel="icon" href="data:,"&#62;&#60;meta name="viewport" content="width=device-width,initial-scale=1.0"&#62;&#60;title&#62;CV&#60;&#47;title&#62;&#60;p&#62;Hi, I&#39;m &#60;a href="t"&#62;Brad Taunt&#60;&#47;a&#62;! I&#39;m a UX designer.&#60;p&#62;Email: hello@tdarb.org&#60;p&#62;Resume&#60;p&#62;Senior Product Designer @ Donorbox, 2021-&#60;br&#62;Web Designer @ Purism, 2019-2021&#60;br&#62;Product Designer @ Benbria, 2013-2019&#60;br&#62;Web Designer @ Netvatise, 2009-2013&#60;p&#62;Projects&#60;p&#62;&#60;a href="1"&#62;1MB Club&#60;&#47;a&#62;&#60;br&#62;&#60;a href="k"&#62;1kB Club&#60;&#47;a&#62;&#60;br&#62;&#60;a href="p"&#62;pblog&#60;&#47;a&#62;&#60;br&#62;&#60;a href="s"&#62;shinobi&#60;&#47;a&#62;&#60;br&#62;&#60;a href="h"&#62;PHPetite&#60;&#47;a&#62;&#60;br&#62;&#60;a href="v"&#62;Vanilla CSS&#60;&#47;a&#62;&#60;p&#62;Writing&#60;p&#62;&#60;a href="d"&#62;The Death of Personality&#60;&#47;a&#62;&#60;br&#62;&#60;a href="u"&#62;Simple Does Not Mean Ugly&#60;&#47;a&#62;&#60;br&#62;&#60;a href="e"&#62;Plain Text Emails, Please&#60;&#47;a&#62;&#60;br&#62;&#60;a href="tb"&#62;[more]&#60;&#47;a&#62; </code></pre> -<h2>Sneaky "Hacks"</h2> -<p>The first thing you'll notice is that the HTML is compressed. White space adds extra bytes of data to the page weight - so it needs to go. Next, you might have caught the <em>odd</em> favicon meta tag:</p> -<pre><code>&lt;link rel=&quot;icon&quot; href=&quot;data:,&quot;&gt; + +<h2 id="sneaky-hacks">Sneaky &#8220;Hacks&#8221;</h2> + +<p>The first thing you&#8217;ll notice is that the HTML is compressed. White space adds extra bytes of data to the page weight - so it needs to go. Next, you might have caught the <em>odd</em> favicon meta tag:</p> + +<pre><code>&#60;link rel="icon" href="data:,"&#62; </code></pre> + <p>This is required to stop the browser from making the standard favicon request (normally pulling from <code>favicon.ico</code>). By adding this meta tag you are telling the browser to load in an empty image without running another server request. This saves about 400 bytes of bandwidth on its own!</p> + <p>The next two meta tags after the <code>icon</code> are technically optional. These are the <code>viewport</code> and <code>title</code> tags. You could save a good amount of data by excluding them altogether, but I had my own personal reasons for keeping them:</p> + <ol> <li>I wanted the web page to be responsive</li> <li>I wanted the page to be <a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fcv.tdarb.org%2F">valid HTML</a></li> </ol> + <p>So, I kept these tags but made them as minimal as I possibly could (looking at you <code>title</code> tag). After that, it was time to add my content!</p> -<h2>Where We're Going, We Don't Need Tags...</h2> -<p>The beauty of using HTML5 is the ability to ditch "default" and closing tags on most elements. Think of all those bytes we can save!</p> + +<h2 id="where-were-going-we-dont-need-tags">Where We&#8217;re Going, We Don&#8217;t Need Tags&#8230;</h2> + +<p>The beauty of using HTML5 is the ability to ditch &#8220;default&#8221; and closing tags on most elements. Think of all those bytes we can save!</p> + <p>In the HTML above you will notice:</p> + <ol> <li>There is no <code>html</code> element</li> <li>There is no <code>head</code> element</li> <li>There is no <code>body</code> element</li> <li>There are no closing <code>p</code> tags</li> </ol> -<p>Even with all those "missing" elements, the webpage is still valid HTML5! Craziness.</p> + +<p>Even with all those &#8220;missing&#8221; elements, the webpage is still valid HTML5! Craziness.</p> + <p>The final hack that saved a <em>ton</em> of bandwidth was implementing custom <code>href</code> URLs. Most of the links on the page take the user to another website altogether - which is fine. The problem is including these full domains inside the <code>a:href</code> tag. Those can start to eat up a lot of data.</p> -<p>Luckily, I host this mini-site through Netlify so I can take full advantage of their optional <code>_redirects</code> file. Links are now set with a single character (ie. "1" for the 1MB Club link) and the <code>_redirects</code> file simply forwards the user to the custom domain. Pretty sneaky!</p> -<h2>Closing Thoughts</h2> -<p>This is a silly project that isn't meant to be taken so seriously. That being said, I'd love to see what other pages people are able to create while being limited to just 1kB.</p></content> - <link href="https://bt.ht/1kb"/> - <id>https://bt.ht/1kb</id> + +<p>Luckily, I host this mini-site through Netlify so I can take full advantage of their optional <code>_redirects</code> file. Links are now set with a single character (ie. &#8220;1&#8221; for the 1MB Club link) and the <code>_redirects</code> file simply forwards the user to the custom domain. Pretty sneaky!</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>This is a silly project that isn&#8217;t meant to be taken so seriously. That being said, I&#8217;d love to see what other pages people are able to create while being limited to just 1kB.</p></content> + <link href="https://btxx.org/1kb"/> + <id>https://btxx.org/1kb</id> <updated>2022-08-02T10:00:00Z</updated> <published>2022-08-02T10:00:00Z</published> </entry> <entry> <title>Do You Have an Extra $10?</title> - <content type="html"><h1>Do You Have an Extra $10?</h1> + <content type="html"><h1 id="do-you-have-an-extra-10">Do You Have an Extra $10?</h1> + <p>2022-11-23</p> -<p>As software designers and developers, think of all the little things that we spend $10 on. Maybe it's a couple coffees over the course of a week. Maybe it's a TV streaming subscription. Maybe it's an impulse buy while we're out shopping for groceries. Maybe it goes into a mason jar on top of the fridge, stored away for a rainy day.</p> -<p>$10 doesn't seem like a <em>ton</em> of money, but a little does go a long way. What if, combined with <em>other people</em>, that $10 could grow and support an open source project? A project that you might even use <em>every day</em> without cost. </p> -<p>Plenty of people already do this - it's nothing new. If you already contribute to the open source community (whether through code or donations) then this post isn't really geared towards you. You're already helping out and are greatly appreciated. Feel free to stop reading right now and continue on with your day!</p> -<p>But, if you're like how I used to be, you might be one of those people who enjoys <em>the idea</em> of donating to a FOSS project instead of actually doing so. That's fine. Zero judgement here since I was doing <em>exactly that</em> for years. All I ask is for you to try it out for even a couple months. You'll soon realize that $10 doesn't break the bank, while at the same time, you get that "warm, fuzzy feeling" of supporting important projects/communities.</p> -<p>In a way, it's actually kind of selfish. You start doing it more for the <em>feel good</em> endorphin that kicks in each time you donate. At least, that's been my experience...</p> -<h2>Open Source isn't Free</h2> -<p>Maintaining any open source project takes years of prior design/development experience, along with sacrificing personal time. Contributors might enjoy working on their project. Most probably love connecting with their end-users and community - but their time is still a hard requirement.</p> -<p>I believe this time is worth paying for. If a project you depend on were to suddenly "shut down", how much time, effort, and income do you stand to lose? Is it more than $10 a month?</p> -<h2>"Donating? In THIS Economy?"</h2> -<p>Things aren't great for a lot of folks financially right now. I'm not ignorant to this fact and completely understand people tightening their belts. We all have to. I'm merely suggesting that if you <em>have the means</em> to support FOSS communities with any disposable income, you should. And I'm not suggesting a lot - <strong>just ten bucks</strong>.</p> + +<p>As software designers and developers, think of all the little things that we spend $10 on. Maybe it&#8217;s a couple coffees over the course of a week. Maybe it&#8217;s a TV streaming subscription. Maybe it&#8217;s an impulse buy while we&#8217;re out shopping for groceries. Maybe it goes into a mason jar on top of the fridge, stored away for a rainy day.</p> + +<p>$10 doesn&#8217;t seem like a <em>ton</em> of money, but a little does go a long way. What if, combined with <em>other people</em>, that $10 could grow and support an open source project? A project that you might even use <em>every day</em> without cost. </p> + +<p>Plenty of people already do this - it&#8217;s nothing new. If you already contribute to the open source community (whether through code or donations) then this post isn&#8217;t really geared towards you. You&#8217;re already helping out and are greatly appreciated. Feel free to stop reading right now and continue on with your day!</p> + +<p>But, if you&#8217;re like how I used to be, you might be one of those people who enjoys <em>the idea</em> of donating to a FOSS project instead of actually doing so. That&#8217;s fine. Zero judgement here since I was doing <em>exactly that</em> for years. All I ask is for you to try it out for even a couple months. You&#8217;ll soon realize that $10 doesn&#8217;t break the bank, while at the same time, you get that &#8220;warm, fuzzy feeling&#8221; of supporting important projects&#47;communities.</p> + +<p>In a way, it&#8217;s actually kind of selfish. You start doing it more for the <em>feel good</em> endorphin that kicks in each time you donate. At least, that&#8217;s been my experience&#8230;</p> + +<h2 id="open-source-isnt-free">Open Source isn&#8217;t Free</h2> + +<p>Maintaining any open source project takes years of prior design&#47;development experience, along with sacrificing personal time. Contributors might enjoy working on their project. Most probably love connecting with their end-users and community - but their time is still a hard requirement.</p> + +<p>I believe this time is worth paying for. If a project you depend on were to suddenly &#8220;shut down&#8221;, how much time, effort, and income do you stand to lose? Is it more than $10 a month?</p> + +<h2 id="donating-in-this-economy">&#8220;Donating? In THIS Economy?&#8221;</h2> + +<p>Things aren&#8217;t great for a lot of folks financially right now. I&#8217;m not ignorant to this fact and completely understand people tightening their belts. We all have to. I&#8217;m merely suggesting that if you <em>have the means</em> to support FOSS communities with any disposable income, you should. And I&#8217;m not suggesting a lot - <strong>just ten bucks</strong>.</p> + <p>Allow me to put my money where my mouth is and showcase my own $10 donation breakdown:</p> -<h2>My $10 Breakdown</h2> + +<h2 id="my-10-breakdown">My $10 Breakdown</h2> + <table> -<tr><th>Service</th><th>Cost/month</th></tr> -<tr><td><a href="https://sourcehut.org">sourcehut</a></td><td>$5.00</td></tr> -<tr><td><a href="https://fosstodon.org">fosstodon</a></td><td>$3.00</td></tr> -<tr><td><a href="https://qutebrowser.org">qutebrowser</a></td><td>$2.00</td></tr> +<thead> +<tr> +<th>Service</th> +<th>Cost&#47;month</th> +</tr> +</thead> + +<tbody> +<tr> +<td><a href="https://sourcehut.org">sourcehut</a></td> +<td>$5.00</td> +</tr> +<tr> +<td><a href="https://fosstodon.org">fosstodon</a></td> +<td>$3.00</td> +</tr> +<tr> +<td><a href="https://qutebrowser.org">qutebrowser</a></td> +<td>$2.00</td> +</tr> +</tbody> </table> -<em>In case you are reading the post at a later point in time, the most up-to-date donation listing can always be found <a href="/uses/">on my official Uses page</a>.</em><h2>SourceHut</h2> -<p>To be fair, this is an active service which just so happens to be available for "free" in its current state. Drew <a href="https://sourcehut.org/pricing/">mentions on the main pricing page</a> that payment is <em>currently</em> optional, but will eventually require maintainers to upgrade (contributors will always have free access):</p> -<blockquote><p>sr.ht is currently in alpha, and the quality of the service may reflect that. As such, payment is currently optional, and only encouraged for users who want to support the ongoing development of the site. </p> + +<p><em>In case you are reading the post at a later point in time, the most up-to-date donation listing can always be found <a href="/uses/">on my official Uses page</a>.</em></p> + +<h2 id="sourcehut">SourceHut</h2> + +<p>To be fair, this is an active service which just so happens to be available for &#8220;free&#8221; in its current state. Drew <a href="https://sourcehut.org/pricing/">mentions on the main pricing page</a> that payment is <em>currently</em> optional, but will eventually require maintainers to upgrade (contributors will always have free access):</p> + +<blockquote> +<p>sr.ht is currently in alpha, and the quality of the service may reflect that. As such, payment is currently optional, and only encouraged for users who want to support the ongoing development of the site. </p> </blockquote> -<p>I still consider this "donating" since it helps keep this specific instance alive. It's also my main code forge since I've been <a href="/srht2/">migrating away from GitHub</a>. I want to see SourceHut succeed, so while I <em>could</em> use the service completely free, I believe it's more than worth it to coverage my usage.</p> -<h2>Fosstodon</h2> -<p><a href="https://fosstodon.org">fosstodon.org</a> is my main "social" platform and the Mastodon instance I chose to join some time ago. The people I've interacted with have been nothing but helpful, insightful and fun. The maintainers are also very down to earth (shoutout to <a href="https://kevquirk.com/">Kev</a> specifically for making my initial experience great!)</p> -<p>Hosting a large Mastodon instance can become expensive. Not to mention the recent influx of Twitter users flocking to the platform in general. Fosstodon recently <a href="https://hub.fosstodon.org/more-upgrades-twitter-storm/">posted an update</a> detailing how their server costs are now &gt;$1800. That's insane.</p> -<p>The least I can do is toss a few bucks towards the service. I know it isn't much, but it certainly feels better than using such an awesome platform for absolutely nothing. Keep up the great work maintainers/mods!</p> -<h2>qutebrowser</h2> -<p><strong>The best browser I have ever used</strong>. I refuse to go back to Firefox or even FireDragon/Pale Moon. I'm only currently donating $2 but my goal is to increase this in the future before adding any other services / communities to my "collection". If you haven't yet tried it, I highly recommend it.</p> -<h2>Food for Thought</h2> -<p>That's really all there is for me to say on the matter. It essentially comes down to personal preference and the financial ability to donate. As I said before: there is no judgement here. All I'm suggesting is that people do what they can to help support the FOSS projects they love.</p> -<p>And really, it's just $10.</p></content> - <link href="https://bt.ht/$10"/> - <id>https://bt.ht/$10</id> + +<p>I still consider this &#8220;donating&#8221; since it helps keep this specific instance alive. It&#8217;s also my main code forge since I&#8217;ve been <a href="/srht2/">migrating away from GitHub</a>. I want to see SourceHut succeed, so while I <em>could</em> use the service completely free, I believe it&#8217;s more than worth it to coverage my usage.</p> + +<h2 id="fosstodon">Fosstodon</h2> + +<p><a href="https://fosstodon.org">fosstodon.org</a> is my main &#8220;social&#8221; platform and the Mastodon instance I chose to join some time ago. The people I&#8217;ve interacted with have been nothing but helpful, insightful and fun. The maintainers are also very down to earth (shoutout to <a href="https://kevquirk.com/">Kev</a> specifically for making my initial experience great!)</p> + +<p>Hosting a large Mastodon instance can become expensive. Not to mention the recent influx of Twitter users flocking to the platform in general. Fosstodon recently <a href="https://hub.fosstodon.org/more-upgrades-twitter-storm/">posted an update</a> detailing how their server costs are now &#62;$1800. That&#8217;s insane.</p> + +<p>The least I can do is toss a few bucks towards the service. I know it isn&#8217;t much, but it certainly feels better than using such an awesome platform for absolutely nothing. Keep up the great work maintainers&#47;mods!</p> + +<h2 id="qutebrowser">qutebrowser</h2> + +<p><strong>The best browser I have ever used</strong>. I refuse to go back to Firefox or even FireDragon&#47;Pale Moon. I&#8217;m only currently donating $2 but my goal is to increase this in the future before adding any other services &#47; communities to my &#8220;collection&#8221;. If you haven&#8217;t yet tried it, I highly recommend it.</p> + +<h2 id="food-for-thought">Food for Thought</h2> + +<p>That&#8217;s really all there is for me to say on the matter. It essentially comes down to personal preference and the financial ability to donate. As I said before: there is no judgement here. All I&#8217;m suggesting is that people do what they can to help support the FOSS projects they love.</p> + +<p>And really, it&#8217;s just $10.</p></content> + <link href="https://btxx.org/$10"/> + <id>https://btxx.org/$10</id> <updated>2022-11-23T10:00:00Z</updated> <published>2022-11-23T10:00:00Z</published> </entry> diff --git a/build/audio-hotkeys-on-linux-mint/index.html b/build/audio-hotkeys-on-linux-mint/index.html index 78de371..3d945f2 100644 --- a/build/audio-hotkeys-on-linux-mint/index.html +++ b/build/audio-hotkeys-on-linux-mint/index.html @@ -1,31 +1,37 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Audio Hotkeys on Linux Mint</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Audio Hotkeys on Linux Mint</h1> +<h1 id="audio-hotkeys-on-linux-mint">Audio Hotkeys on Linux Mint</h1> + <p>2020-06-14</p> -<p>I recently switched out the OS on my old 2011 MacBook Air with Linux Mint. It's a distro I've used a few times in the past, but never set it as one of my main daily drivers until now.</p> -<p>Setting up all my go-to applications (Sublime, LocalWP, Riot, Evolution, etc) was a breeze. The only snag I ran into was properly setting up the volume shortcuts on my wireless <a href="https://www.amazon.com/gp/product/B01AROOL12/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B01AROOL12&linkCode=as2&tag=uglyduck-20&linkId=5cfe5875a0f263b933692c381a6a88a9">Logitech MK235 keyboard</a>. After looking a little too long on DDG & even Google, I finally found <a href="https://forums.linuxmint.com/viewtopic.php?t=253048">this forum thread with the solution</a>.</p> -<p>For my own personal reference, I'm also going to include those code snippets here since you never know when you might need it again! And who knows, maybe this will help someone else stumbling around the internet.</p> -<pre><code>// Volume Up + +<p>I recently switched out the OS on my old 2011 MacBook Air with Linux Mint. It’s a distro I’ve used a few times in the past, but never set it as one of my main daily drivers until now.</p> + +<p>Setting up all my go-to applications (Sublime, LocalWP, Riot, Evolution, etc) was a breeze. The only snag I ran into was properly setting up the volume shortcuts on my wireless <a href="https://www.amazon.com/gp/product/B01AROOL12/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B01AROOL12&linkCode=as2&tag=uglyduck-20&linkId=5cfe5875a0f263b933692c381a6a88a9">Logitech MK235 keyboard</a>. After looking a little too long on DDG & even Google, I finally found <a href="https://forums.linuxmint.com/viewtopic.php?t=253048">this forum thread with the solution</a>.</p> + +<p>For my own personal reference, I’m also going to include those code snippets here since you never know when you might need it again! And who knows, maybe this will help someone else stumbling around the internet.</p> + +<pre><code>// Volume Up pactl set-sink-volume @DEFAULT_SINK@ +5% -</code></pre> -<pre><code>// Volume Down + +// Volume Down pactl set-sink-volume @DEFAULT_SINK@ -5% -</code></pre> -<pre><code>// Toggle Mute + +// Toggle Mute pactl set-sink-mute @DEFAULT_SINK@ toggle </code></pre> <footer role="contentinfo"> diff --git a/build/aui/index.html b/build/aui/index.html index 956b6a9..94dfeb7 100644 --- a/build/aui/index.html +++ b/build/aui/index.html @@ -1,41 +1,50 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Aqua UI CSS Buttons</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Aqua UI CSS Buttons</h1> +<h1 id="aqua-ui-css-buttons">Aqua UI CSS Buttons</h1> + <p>2016-06-28</p> + <p>Though it may feel like nostalgia, the old OS design for Mac was arguably better than the current iteration (as of this writing - High Sierra). I recently designed a quick Dribbble shot showcasing how the older operating system used to have so much more character and depth.</p> -<p><figure> -<img src="/public/images/aqua-ui-css-buttons.webp" alt="Old macOS Buttons"> -<figcaption>My initial Dribbble shot, which can be found <a href="https://dribbble.com/shots/4561658-Aqua-Buttons-UI">here</a>.</figcaption> -</figure></p> -<p>Since I've been wanting to dip my toes into more tutorial-based articles (maybe I'll even do some screencasts in the future), I decided to start out simple. Let's walk through how to implement these 'aqua' UI buttons with pure CSS.</p> -<h3>Starting with a basic foundation</h3> -<p>Since this project consists of only two buttons elements, the HTML or <i>skeleton</i> of this project is very straightforward:</p> -<pre><code><button class="cancel">Cancel</button> -<button class="confirm">Confirm</button> + +<p>Since I’ve been wanting to dip my toes into more tutorial-based articles (maybe I’ll even do some screencasts in the future), I decided to start out simple. Let’s walk through how to implement these ‘aqua’ UI buttons with pure CSS.</p> + +<h3 id="starting-with-a-basic-foundation">Starting with a basic foundation</h3> + +<p>Since this project consists of only two buttons elements, the HTML or skeleton of this project is very straightforward:</p> + +<pre><code><button class="cancel">Cancel</button> +<button class="confirm">Confirm</button> </code></pre> -<h3>Styling the buttons</h3> -<p>The first step is to remove the browser's default button styling by using the <code>appearance</code> property. This will help avoid having to fight against the browser and minimize our CSS code.</p> + +<h3 id="styling-the-buttons">Styling the buttons</h3> + +<p>The first step is to remove the browser’s default button styling by using the <code>appearance</code> property. This will help avoid having to fight against the browser and minimize our CSS code.</p> + <pre><code>button { -webkit-appearance: none; -moz-appearance: none; } </code></pre> + <p>Next, we apply a fairly simple set of CSS that will be shared across both the confirm and cancel buttons:</p> + <p>(Pay attention to the <code>transition</code> property as we will be returning to that shortly)</p> + <pre><code>button { -webkit-appearance: none; -moz-appearance: none; @@ -43,7 +52,7 @@ border-radius: 125px; box-shadow: inset 0 13px 25px rgba(255,255,255,0.5), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.1); cursor: pointer; - font-family: 'Lucida Grande', Helvetica, Arial, sans-serif; + font-family: 'Lucida Grande', Helvetica, Arial, sans-serif; font-size: 2rem; margin: 5rem 1rem; padding: 1.2rem 4rem; @@ -51,26 +60,32 @@ transition: all ease .3s; } </code></pre> + <p>Then we separate the specific confirm and cancel button styles into their own class selectors:</p> + <pre><code>button.confirm { background: #4A90E2; border-color: #3672B6; color: #fff; } -</code></pre> -<pre><code>button.cancel { + +button.cancel { background: #D0D0D0; border-color: #B8B8B8; color: #6F6F6F; } </code></pre> -<h3>Playing with pseudo elements</h3> -<p>Now that the button is styled and structured with basic formatting, it's time to add that classic 'shine' seen in the original Dribbble shot.</p> + +<h3 id="playing-with-pseudo-elements">Playing with pseudo elements</h3> + +<p>Now that the button is styled and structured with basic formatting, it’s time to add that classic ‘shine’ seen in the original Dribbble shot.</p> + <p>The cleanest way to do this is by using the <code>:before</code> pseudo element paired with a linear-gradient background.</p> + <pre><code>button:before { background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); border-radius: 125px; - content:''; + content:''; height: 50px; left: 4%; position: absolute; @@ -79,16 +94,23 @@ width: 92%; } </code></pre> -<h3>Adding interaction</h3> + +<h3 id="adding-interaction">Adding interaction</h3> + <p>The final step is adding the user hover interaction: (Remember that <code>transition</code> property?)</p> + <pre><code>button:hover { box-shadow: inset 0 13px 25px rgba(255,255,255,0.8), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.2); transform: scale(1.02); } </code></pre> -<p>That's it!</p> -<h3>See it live on CodePen</h3> -<p>You can view this project on CodePen <a href="https://codepen.io/bradleytaunt/pen/YvKxxm">here</a>.</p> + +<p>That’s it!</p> + +<h3 id="see-it-live-on-codepen">See it live on CodePen</h3> + +<p>You can view this project on CodePen here.</p> + <p>Feel free to fork it or implement your own!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/avoid/index.html b/build/avoid/index.html index 317d92f..5e3480b 100644 --- a/build/avoid/index.html +++ b/build/avoid/index.html @@ -1,65 +1,81 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>A Warning for New Designers: Avoid Dribbble</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>A Warning for New Designers: Avoid Dribbble</h1> +<h1 id="a-warning-for-new-designers-avoid-dribbble">A Warning for New Designers: Avoid Dribbble</h1> + <p>2022-09-08</p> -<p>Everyday a new designer begins their journey into the world of [<em>insert design industry here</em>] and it is magical! Having a fresh pair of eyes untainted from the current trends of the time can help improve design as a whole. Newbies can even teach new things to older, grumpier luddites (like yours truly). But over the years I've noticed a concerning trend among junior designers; <strong>they rely too heavily on Dribbble</strong>.</p> -<p>Relying on Dribbble for minor inspiration is one thing. Referencing "shots" as justification for real-world design work? Not so much. I believe Dribbble shouldn't be used for either of these use cases, but I can at least give a pass at browsing for basic inspiration (colors, padding, layout).</p> -<p>Now, using concept shots to push for your own design decisions? That is a terrible idea. We "senior" designers need to step up and help newbies avoid this trap.</p> -<h3>Designing for Other Designers</h3> -<p>Dribbble is rarely a place for design feedback and discussion anymore. Hell, most people use it as a digital portfolio to share with prospective clients. Others use it like some form of "design Linkedin", which has its own host of problems.</p> -<p>Dribble is now (mainly) a place where designers post "work" for other designers. There <em>is</em> a small minority of users still looking for real, human feedback on their work - but they are a rarity.</p> -<p>Take a look at the <a href="https://dribbble.com/shots/popular">popular shots</a> category at any give time. Most shots are promo pieces used to attract potential clients. Nearly all design concepts are impractical or simply impossible to create in a real-life setting. This is incredibly damaging to newcomers trying to learn "good" design practices. Dribbble shots simply ride the wave of the current trends, which doesn't provide junior designers with a solid foundation or core understanding of design as a whole. It just causes them to endlessly chase the "latest and greatest" trend.</p> -<p>Shot posters rarely go into the reasoning behind their design decisions. No research or iterations are shared to show the process. Instead it simply states "here is a cool website layout for a company that doesn't exist". Zero constraints or goals needed to be met. No discussion about how one version of their design didn't perform as well when tested on real users. So of course it ends up looking <em>so cool and original</em> - <strong>it wasn't designed in reality</strong>.</p> -<h3>I Don't Have All the Answers - But I'll Try</h3> -<p>I am not the holy savior of <em>all things design</em>. I'm just a designer who has been around the block a few times. If new designers want to keep using Dribbble as their main source of guidance and think I should go kick rocks - that's fine. I will. But for those with a little more passion for the profession, might I suggest some humble alternatives to get you on a more consistent path?</p> + +<p>Everyday a new designer begins their journey into the world of [<em>insert design industry here</em>] and it is magical! Having a fresh pair of eyes untainted from the current trends of the time can help improve design as a whole. Newbies can even teach new things to older, grumpier luddites (like yours truly). But over the years I’ve noticed a concerning trend among junior designers; <strong>they rely too heavily on Dribbble</strong>.</p> + +<p>Relying on Dribbble for minor inspiration is one thing. Referencing “shots” as justification for real-world design work? Not so much. I believe Dribbble shouldn’t be used for either of these use cases, but I can at least give a pass at browsing for basic inspiration (colors, padding, layout).</p> + +<p>Now, using concept shots to push for your own design decisions? That is a terrible idea. We “senior” designers need to step up and help newbies avoid this trap.</p> + +<h3 id="designing-for-other-designers">Designing for Other Designers</h3> + +<p>Dribbble is rarely a place for design feedback and discussion anymore. Hell, most people use it as a digital portfolio to share with prospective clients. Others use it like some form of “design Linkedin”, which has its own host of problems.</p> + +<p>Dribble is now (mainly) a place where designers post “work” for other designers. There <em>is</em> a small minority of users still looking for real, human feedback on their work - but they are a rarity.</p> + +<p>Take a look at the <a href="https://dribbble.com/shots/popular">popular shots</a> category at any give time. Most shots are promo pieces used to attract potential clients. Nearly all design concepts are impractical or simply impossible to create in a real-life setting. This is incredibly damaging to newcomers trying to learn “good” design practices. Dribbble shots simply ride the wave of the current trends, which doesn’t provide junior designers with a solid foundation or core understanding of design as a whole. It just causes them to endlessly chase the “latest and greatest” trend.</p> + +<p>Shot posters rarely go into the reasoning behind their design decisions. No research or iterations are shared to show the process. Instead it simply states “here is a cool website layout for a company that doesn’t exist”. Zero constraints or goals needed to be met. No discussion about how one version of their design didn’t perform as well when tested on real users. So of course it ends up looking <em>so cool and original</em> - <strong>it wasn’t designed in reality</strong>.</p> + +<h3 id="i-dont-have-all-the-answers---but-ill-try">I Don’t Have All the Answers - But I’ll Try</h3> + +<p>I am not the holy savior of <em>all things design</em>. I’m just a designer who has been around the block a few times. If new designers want to keep using Dribbble as their main source of guidance and think I should go kick rocks - that’s fine. I will. But for those with a little more passion for the profession, might I suggest some humble alternatives to get you on a more consistent path?</p> + <ul> <li>Read some good design books (to get you started): + <ul> -<li><a href="https://sensible.com/dont-make-me-think/">Don't Make Me Think - Revisited</a></li> +<li><a href="https://sensible.com/dont-make-me-think/">Don’t Make Me Think - Revisited</a></li> <li><a href="https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things">The Design of Everyday Things</a></li> <li><a href="https://www.edwardtufte.com/tufte/books_vdqi">The Visual Display of Quantitative Information</a></li> <li><a href="https://www.amazon.ca/Dieter-Rams-Less-But-Better/dp/3899555252">Less But Better</a></li> -</ul> -</li> +</ul></li> <li>Talk to <em>real</em> people + <ul> -<li>Chat with your team's marketers, customer support specialists, senior design leads, and developers about new features (they often have better insights than you)</li> +<li>Chat with your team’s marketers, customer support specialists, senior design leads, and developers about new features (they often have better insights than you)</li> <li>Perform customer interviews early and often (they use your product or service - let them tell you what they want!)</li> -</ul> -</li> +</ul></li> <li>R ad through some quality UX reports and research + <ul> <li><a href="https://www.nngroup.com/">Nielsen Norman Group</a></li> <li><a href="https://baymard.com/">Baymard Institute</a></li> -</ul> -</li> +</ul></li> <li>P y attention to real world design (good and bad) + <ul> <li>Grocery item designs, labels packaging</li> -<li>Vehicle analog and digital dashboards / safety features</li> +<li>Vehicle analog and digital dashboards / safety features</li> <li>Warning and safety labeling (great for universal and minimal design inspiration)</li> -<li>Government websites and applications (notoriously terrible - great for "what not to do" examples)</li> -</ul> -</li> +<li>Government websites and applications (notoriously terrible - great for “what not to do” examples)</li> +</ul></li> <li>Your own experience (over time)</li> </ul> -<p>These are just my own suggestions to help new designers get a better foundation of core design concepts <em>before</em> falling down the Dribbble hole. Take it or leave it. I'm not your dad.</p> -<p>Most designers who are pro-Dribbble will most likely write me off as a grumpy old man yelling at a cloud. That's only half true. But if just one person reading this even <em>considers</em> avoiding Dribbble as a source for learning proper design - then it was worth it.</p> -<p>Now if you will excuse me, there are many more clouds to yell at...</p> + +<p>These are just my own suggestions to help new designers get a better foundation of core design concepts <em>before</em> falling down the Dribbble hole. Take it or leave it. I’m not your dad.</p> + +<p>Most designers who are pro-Dribbble will most likely write me off as a grumpy old man yelling at a cloud. That’s only half true. But if just one person reading this even <em>considers</em> avoiding Dribbble as a source for learning proper design - then it was worth it.</p> + +<p>Now if you will excuse me, there are many more clouds to yell at…</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/base64-all-the-things/index.html b/build/base64-all-the-things/index.html index 48cf4d0..bccf7b8 100644 --- a/build/base64-all-the-things/index.html +++ b/build/base64-all-the-things/index.html @@ -1,60 +1,25 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Base64 All The Things! (Sometimes)</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Base64 All The Things! (Sometimes)</h1> +<h1 id="base64-all-the-things-sometimes">Base64 All The Things! (Sometimes)</h1> + <p>2020-03-18</p> + <p><em>An extremely overlooked process for displaying fonts</em>, images, documents, spreadsheets, etc. on the web is the use of <strong>base64 encoding</strong>. Although it may not be the most efficient (or easy) way to display and include these elements it can be a lifesaver in certain situations.</p> -<p><h2>What is base64 encoding?</h2> -<p>It might be common knowledge, but I think breaking down exactly what base64 encoding is could be very helpful to beginner web developers:</p> -<blockquote> - <p>Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation.</p> - <cite>- Wikipedia</cite> -</blockquote> -<p>In simpler terms: it is a encoded format that can change an element like this:</p></p> -<pre><code><img src="/path/to/image.webp" alt="Cool image"> -</code></pre> -<p>Into this:</p> -<pre><code><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAASwCAYAA...PnyMAAAAASUVORK5CYII=" alt="Cool image"> -</code></pre> -<p><h2>See it in action</h2></p> -<p><figure> -<img src="https://cdn.dribbble.com/users/29329/screenshots/9072216/media/0137ce6b6a5fa89d729ac9e4d488f002.png" alt="Just an image"> -<figcaption>This image is pulled in with an HTTP request (<a href="https://cdn.dribbble.com/users/29329/screenshots/9072216/media/0137ce6b6a5fa89d729ac9e4d488f002.webp">direct link to image</a>)</figcaption> -</figure></p> -<p><figure> -<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAASwCAYAAACjAYaXAACAAElEQVR42uz9eZSlZ2Hf+/7ePdRcXdXzqJbUmhsJqSUkBELMYIFBYMD2Adtx7BXbcU58bobjdddZNzmLk7tucnKuT+zcxElsB8eO7RiDwQO2sJmMhBFCICSheex5nmqu2uN7/yhJBrur1Bq7tfX5LKpLYr97165nv73WfvdXz/MUZVmWAQAAAAAA6CEVQwAAAAAAAPQaAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6jgACAAAAAAD0HAEEAAAAAADoOQIIAAAAAADQcwQQAAAAAACg5wggAAAAAABAzxFAAAAAAACAniOAAAAAAAAAPUcAAQAAAAAAeo4AAgAAAAAA9BwBBAAAAAAA6DkCCAAAAAAA0HMEEAAAAAAAoOcIIAAAAAAAQM8RQAAAAAAAgJ4jgAAAAAAAAD1HAAEAAAAAAHqOAAIAAAAAAPQcAQQAAAAAAOg5AggAAAAAANBzBBAAAAAAAKDnCCAAAAAAAEDPEUAAAAAAAICeI4AAAAAAAAA9RwABAAAAAAB6Ts0QAAAAL6Zut5tms5l2u/3MV6vVSqfTSbfbTaVSSb1eT7VaTb1eT61WS61WS19fX4qiMIAAAMCLQgABAACek06nk1arlfn5+Zw8eTInT57M8ePHn/k+NTWVhYWFtFqtNJvNZ7632+10Op1Uq9X09fWlXq8/89XX15fBwcGMj49n1apVz3ytXr06Y2Nj6e/vT71eT6ViEjsAAHB6BBAAAGBZ7XY7R48ezeHDh3Pw4MHs3bs3e/bsyeHDh3Py5MlMTEw88zU1NZVGo5Fut5uyLJ/5/r1fRVE881WpVJ75XqlUMjg4mBUrVmTlypUZGxvLypUrMz4+nk2bNuWcc87J1q1bs2HDhqxbty6rVq1KtVr1AgEAAKdUlGVZGgYAAOBpnU4nMzMz2bNnTx566KE88cQT2bt3b/bt25cDBw7kyJEjOXr0aBYWFl625zQyMpK1a9dm/fr12bx5c7Zs2ZKtW7fmggsuyPbt27Nx48YMDw9bQgsAAHiGAAIAAKTT6eTYsWPZuXNnHn744Tz44IN54IEH8uijj+bw4cNpNBppNptnx0VMUTyzZNamTZuyffv2XHbZZbn88stz4YUXZtu2bVmxYoXlsgAA4FVOAAEAgFepsiwzNzeXnTt35tvf/na+853v5OGHH87jjz+eAwcOpNFovGJ+l+Hh4WdmhFx++eW56qqrcu2112bz5s3p7+/3YgMAwKuQAAIAAK8yZVnmxIkTuffee/Ptb387X//613PPPffk4MGDabVar/jfb2BgIFu2bMn111+f17/+9bnuuuuyffv2jIyMePEBAOBVRAABAIBXiW63m4MHD+bOO+/MHXfckdtvvz0PP/xwjh071rO/84YNG7Jjx45cd911ufHGG3PllVdm1apVlscCAIBXAQEEAABeBY4fP57bb789X/rSl/KXf/mX2bVr18u+xFW1UqRSSbrdpNN9eS9DBgYGctVVV+Vtb3tbbrrpplxzzTUZHh52YgAAQA8TQAAAoEeVZZmJiYl897vfzRe/+MXccsstefjhhzM/P//CLySS1GuV9NeL1GuVjAxUs2KolrGhWlYMVTMyUEu9VqRefeqrXklftUilUqTTLdNslWl1uml1yrTaZZrtbqbnO5mca2d6rp3JuXbmGt002900Wt20Oy/OZcvIyEiuu+66vOtd78q73vWuXHbZZRkaGnKyAABADxJAAACgBzUajTzyyCO55ZZb8qd/+qe59957Mzc394Ies14tsmZFX9aO1bN+vC8bV/Vn48r+rBqpZeVIPStHalk92peVI4shpK9eSV+tSKUoUhRPXYAUSVkmZZKUizNBmu0yC61OJmfbOTHdysmZdo5PtzIx28qx6VYOnmjmwIlGjkw2c2yqmRPT7Rc8g2TFihW58cYb8973vjc33XRTzjvvPMtiAQBAjxFAAACghzy9wfmtt96a3//9389tt92WI0eOPK/HqleLjA7VsnFlfy7YMJjz1w9k69qBnLN2IJtW9WfNir6sGa1neKCaaqVIWZYp81TgKJPFfzuNi5Kn/iyK/M1XirQ63UzPdXJ8upUjk4sRZM/Rhew+spCdh+fz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+51zuef+hbzhdYPpPM8AsrhcVDdf+dpsvnv/wpLHLTTKPPp4M48+vrikVOWp/UIqlTz1VSRl0u2W6XaTTjfpdMrTCjNlmXzp1pl8+P0rsmF9PQP9z7+AVCvJ4zub+crXZnP4aPs53390dDTve9/78g/+wT/IxRdf7CQFAICzlAACAABnsWq1mje/+c1pt9sZGBjIV7/61UxNTZ32/XfubuXzX5rO9kv6MzpSed6zQNrtMkeOttNsnf4DdMuk+33Hv7CFq+bny+ze20yzWWZw4PnPaFlolPn8l2fy8GON53zfdevW5X3ve19+7ud+LldeeaUTFAAAzmICCAAAnOX6+/vz7ne/O6tXr87WrVvz+c9/Prt27UrnNNZuOn6yna98bTZvvWE4b3/LyPPeC6RSLTI6Ukm1mue1ZNSLoV5P1q+rpf4CrmKq1SL33L+Qv/jSdA4ePv3ZHwMDA7nkkkvywQ9+MB/96EdzySWXODEBAOAsJ4AAAMArQLVazXXXXZeNGzdmx44d+dKXvpT7778/hw4dyszMTBYWFlKeYkpEt5t894GF/Mnnp3LtjsEMDz/3WSBlmQwNVnLtjsFs3VzPzj2tMzIGr90+kKsuH8zAwPObyVIUycJCN3/6+anc+Z35tJaZzVKv1zMwMJCRkZFs3rw5O3bsyE033ZS3vOUtWb16tRMSAABeAYqyLEvDAAAArxxlWebQoUO566678sADD+See+7JbbfdlgMHDix5n9dc2p9/8y/X5z3vHH1eG4gXRXLiZCf/4TeO579/ciK79r58EaRSSV77moH883+0Jh9472iGh55/ALn9zrn8k//Xodx1z/ySx61atSrXXXddtm/fni1btmTHjh258sors3LlSicfAAC8gpgBAgAArzBFUWTjxo153/vel/e85z156KGH0t/fn9/5nd9Jt9s95X127Wnl038ylcsu7s8F5/dlicOWVJbJ+Fg1P/uTq7JxfS1funU2jzzeyKEj7UxOdZedTfF8DA4UGRurZuvmei67uD8feM9o3vqmkQwNPr/4Uakk+w+08/ufmczjTzaXPfaGG27IP//n/zzXXHNNBgcHU61WnXQAAPAKJIAAAMArWLVazeWXX573v//9ue2227Jz585THjc7182Xb5vJlZcP5Bd+dnVq1TznkFAUycb1tfzcT67KD39gLF+/cy733r+Q7z6w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gAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUjgAEAAAAAACoHQEIAAAAAABQOwIQAAAAAACgdgQgAAAAAABA7QhAAAAAAACA2hGAAAAAAAAAtSMAAQAAAAAAakcAAgAAAAAA1I4ABAAAAAAAqB0BCAAAAAAAUDsCEAAAAAAAoHYEIAAAAAAAQO0IQAAAAAAAgNoRgAAAAAAAALUjAAEAAAAAAGpHAAIAAAAAANSOAAQAAAAAAKgdAQgAAAAAAFA7AhAAAAAAAKB2BCAAAAAAAEDtCEAAAAAAAIDaEYAAAAAAAAC1IwABAAAAAABqRwACAAAAAADUzv8f8k6Ttt+PnyMAAAAASUVORK5CYII=" alt="Image rendered in base64"> - <figcaption>This image is an inline base64 encoding</figcaption> -</figure></p> -<p><h2>Should I use base64?</h2></p> -<p><p>That completely depends on the situation. For most regular day-to-day web development - <b>probably not</b>. While base64 is useful, it is slightly less per-formant than directly using a source file (though, one could argue that making the extra browser request is less per-formant as well).</p> -<p>But that doesn't mean there aren't a few edge cases.</p></p> -<p><ul> - <li>The speed of rendering the encoding out-performs the extra HTTP request</li> - <li>You only have access to a single set of specific HTML files (no access to current font, CSS or image directories)</li> - <li>Security issues that limit your ability to use external sources altogether</li> -</ul></p> -<p><h2>How do I encode my files?</h2></p> -<p><p>There are a ton of freely available encoders out in the wild web, but my personal go-to is <a href="https://www.base64converter.com/">base64converter.com</a>. Simply upload your file and convert.</p></p> -<p><h2>Limitations</h2></p> -<p><ul> - <li>Images converted to base64 will be 20-25% larger in size (making for poorer performance on mobile for image-heavy websites)</li> - <li>Lacking any consistent use of CDN caching</li> - <li>Larger encodings can make for messy project files (unless run at build time of course)</li> -</ul></p> -<p><p>Though these limitations can be deal-breakers in certain situations, I find it extremely helpful for developers to keep base64 encoding in their back pockets for a rainy day.</p></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/basic-gulp-build-for-sass/index.html b/build/basic-gulp-build-for-sass/index.html index 623dde2..e7f6aad 100644 --- a/build/basic-gulp-build-for-sass/index.html +++ b/build/basic-gulp-build-for-sass/index.html @@ -1,104 +1,134 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Basic Gulp Build for Sass</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Basic Gulp Build for Sass</h1> +<h1 id="basic-gulp-build-for-sass">Basic Gulp Build for Sass</h1> + <p>2019-01-15</p> -<p>Some designers might shy away from build tools when first starting out and I can understand the reasoning - task runners like <code>gulp</code> and <code>grunt</code> can seem daunting at first. So, I've decided to showcase my go-to setup for <code>gulp</code> and explain what the heck it does step-by-step. </p> -<p>Here is the final <code>gulp.js</code> file in all it's glory:</p> -<pre><code>var gulp = require('gulp'); -var shell = require('gulp-shell'); -var sass = require('gulp-sass'); - -/* Build and watch Jekyll (change this task to whatever you need) */ -gulp.task('generate', shell.task('jekyll serve')); - -/* Compile SCSS files to CSS */ -gulp.task('styles', function () { - return gulp.src('_includes/assets/sass/styles.scss') + +<p>Some designers might shy away from build tools when first starting out and I can understand the reasoning - task runners like <code>gulp</code> and <code>grunt</code> can seem daunting at first. So, I’ve decided to showcase my go-to setup for <code>gulp</code> and explain what the heck it does step-by-step. </p> + +<p>Here is the final <code>gulp.js</code> file in all it’s glory:</p> + +<pre><code>var gulp = require('gulp'); +var shell = require('gulp-shell'); +var sass = require('gulp-sass'); + +/* Build and watch Jekyll (change this task to whatever you need) */ +gulp.task('generate', shell.task('jekyll serve')); + +/* Compile SCSS files to CSS */ +gulp.task('styles', function () { + return gulp.src('_includes/assets/sass/styles.scss') .pipe(sass({ - outputStyle: 'compressed' - }).on('error', sass.logError)) - .pipe(gulp.dest('_includes/assets/css/')); + outputStyle: 'compressed' + }).on('error', sass.logError)) + .pipe(gulp.dest('_includes/assets/css/')); }); -/* Compile the assets */ -gulp.task('assets', gulp.parallel( - 'styles' +/* Compile the assets */ +gulp.task('assets', gulp.parallel( + 'styles' )); -/* Build */ -gulp.task('build', gulp.series( - 'assets', - 'generate' +/* Build */ +gulp.task('build', gulp.series( + 'assets', + 'generate' )); </code></pre> -<p>Trust me, it's not complicated at all.</p> -<h2>Grabbing what we need</h2> + +<p>Trust me, it’s not complicated at all.</p> + +<h2 id="grabbing-what-we-need">Grabbing what we need</h2> + <p>For our basic build file we are going to need only three modules: <code>gulp</code>, <code>gulp-shell</code> and <code>gulp-sass</code>.</p> -<pre><code>var gulp = require('gulp'); -var shell = require('gulp-shell'); -var sass = require('gulp-sass'); + +<pre><code>var gulp = require('gulp'); +var shell = require('gulp-shell'); +var sass = require('gulp-sass'); </code></pre> -<h4>gulp</h4> -<p>This is the streaming build system, without it we can't do anything else.</p> -<h4>gulp-shell</h4> + +<h4 id="gulp">gulp</h4> + +<p>This is the streaming build system, without it we can’t do anything else.</p> + +<h4 id="gulp-shell">gulp-shell</h4> + <p>A gulp command line interface for us to interact with our terminal.</p> -<h4>gulp-sass</h4> + +<h4 id="gulp-sass">gulp-sass</h4> + <p>Required for gulp to compile Sass into vanilla CSS.</p> -<h4>Bonus tasks</h4> -<p><p>You can also toss in <code>gulp-minify</code> to clean-up any JavaScript you might be using, but for this example we're just going to keep things simple and focus on Sass only.</p></p> -<p><p class="no-margin">Maybe I'll write about my <code>js</code> build workflow in a future article.</p></p> -<h2>Generating the build</h2> -<p>Our first step is to create the default task that will generate our build. In this example we are making the assumption that we're building a Jekyll website (but you can place any build command here):</p> -<pre><code>gulp.task('generate', shell.task('jekyll serve')); + +<h4 id="bonus-tasks">Bonus tasks</h4> + +<h2 id="generating-the-build">Generating the build</h2> + +<p>Our first step is to create the default task that will generate our build. In this example we are making the assumption that we’re building a Jekyll website (but you can place any build command here):</p> + +<pre><code>gulp.task('generate', shell.task('jekyll serve')); </code></pre> -<p>Don't worry if this <code>generate</code> isn't clear, we come back to that later.</p> -<h2>Processing our pre-processor</h2> -<p>We will name this next task <code>styles</code> since that's what it outputs - our styling. We start by telling gulp where our main <code>scss</code> directory is:</p> -<pre><code>/* Change this directory to match yours */ -return gulp.src('_includes/assets/sass/styles.scss') + +<p>Don’t worry if this <code>generate</code> isn’t clear, we come back to that later.</p> + +<h2 id="processing-our-pre-processor">Processing our pre-processor</h2> + +<p>We will name this next task <code>styles</code> since that’s what it outputs - our styling. We start by telling gulp where our main <code>scss</code> directory is:</p> + +<pre><code>/* Change this directory to match yours */ +return gulp.src('_includes/assets/sass/styles.scss') </code></pre> + <p>This next piece tells the plugin to compress our final compiled CSS, log any errors if there are issues with the build and then export it to our destination directory:</p> + <pre><code>.pipe(sass({ - outputStyle: 'compressed' -}).on('error', sass.logError)) -</code></pre> -<pre><code>/* Change this to your destination directory */ -.pipe(gulp.dest('_includes/assets/css/')); + outputStyle: 'compressed' +}).on('error', sass.logError)) + +/* Change this to your destination directory */ +.pipe(gulp.dest('_includes/assets/css/')); </code></pre> -<h2>Building our assets</h2> -<p>This step isn't 100% needed, but I like to include it for when more assets need to be added (minifying JavaScript, compressing images, etc)</p> -<pre><code>/* + +<h2 id="building-our-assets">Building our assets</h2> + +<p>This step isn’t 100% needed, but I like to include it for when more assets need to be added (minifying JavaScript, compressing images, etc)</p> + +<pre><code>/* Compile the assets -*/ -gulp.task('assets', gulp.parallel( - 'styles' +*/ +gulp.task('assets', gulp.parallel( + 'styles' )); </code></pre> -<h2>Altogether now!</h2> + +<h2 id="altogether-now">Altogether now!</h2> + <p>Now we add a task that runs all other tasks in our gulp file (in this case it will run both <code>assets</code> and <code>generate</code>)</p> -<pre><code>/* + +<pre><code>/* Build -*/ -gulp.task('build', gulp.series( - 'assets', - 'generate' +*/ +gulp.task('build', gulp.series( + 'assets', + 'generate' )); </code></pre> -<p>And that's it - we're done! A very basic <code>gulp</code> build for compiling Sass.</p> + +<p>And that’s it - we’re done! A very basic <code>gulp</code> build for compiling Sass.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/batch-webp-conversion/index.html b/build/batch-webp-conversion/index.html index a9ce6e2..839973d 100644 --- a/build/batch-webp-conversion/index.html +++ b/build/batch-webp-conversion/index.html @@ -1,68 +1,90 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Batch Converting Images to webp with macOS Automator</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Batch Converting Images to webp with macOS Automator</h1> +<h1 id="batch-converting-images-to-webp-with-macos-automator">Batch Converting Images to webp with macOS Automator</h1> + <p>2021-10-15</p> -<p>A great deal of my time working as a web/UI designer is spent exporting and/or converting images for software products and websites. Although a lot of modern applications can render image conversions at build time, a custom conversion is sometimes requested for an image to be set as <code>webp</code>.</p> -<p>You <em>could</em> download one of the many native apps from the Mac App Store to do this for you - but why not create your own script and run it with a simple right-click directly inside Finder? <strong>Let's do just that!</strong></p> -<h2>Basic requirements</h2> + +<p>A great deal of my time working as a web/UI designer is spent exporting and/or converting images for software products and websites. Although a lot of modern applications can render image conversions at build time, a custom conversion is sometimes requested for an image to be set as <code>webp</code>.</p> + +<p>You <em>could</em> download one of the many native apps from the Mac App Store to do this for you - but why not create your own script and run it with a simple right-click directly inside Finder? <strong>Let’s do just that!</strong></p> + +<h2 id="basic-requirements">Basic requirements</h2> + <p><strong>Important!</strong>: As of this time of writing, the official <code>libwebp</code> package release is <em>libwebp-1.2.1-mac-10.15</em>. If this has been updated since then, change the command below to match that of the proper release version.</p> -<p>1) First you will need to download the <code>libwebp</code> package to your Downloads folder: <a href="https://developers.google.com/speed/webp/download">developers.google.com/speed/webp/download</a> - - <em>Look for the "Download for macOS link"</em></p> -<p>2) Next we will need to copy the <code>cwebp</code> folder to our <code>/usr/local/bin</code> directory: - - Open macOS Terminal - - Run <code>sudo cp /Downloads/libwebp-1.2.1-mac-10.15/bin/cwebp /usr/local/bin</code> - - <em>Note:</em> if the <code>/usr/local/bin</code> directory doesn't exist, simply create it by running: <code>sudo cd /usr/local && mkdir bin</code></p> -<h2>Creating our custom Automator script</h2> -<p>1) Open the macOS Automator from the Applications folder</p> -<p>2) Select <code>Quick Option</code> from the first prompt</p> -<p>3) Set "Workflow receives current" to <code>image files</code></p> -<p>4) Set the label "in" to <code>Finder</code></p> -<p>5) From the left pane, select "Library > Utilities"</p> -<p>6) From the presented choices in the next pane, drag and drop <code>Run Shell Script</code> into the far right pane</p> -<p>7) Set the area "Pass input" to <code>as arguments</code></p> -<p>8) Enter the following code below as your script and type <code>⌘-S</code> to save (name it something like "Convert to webp")</p> -<pre><code>for f in "$@" + +<ol> +<li><p>First you will need to download the <code>libwebp</code> package to your Downloads folder: <a href="https://developers.google.com/speed/webp/download">developers.google.com/speed/webp/download</a> </p> + +<ul> +<li><em>Look for the “Download for macOS link”</em></li> +</ul></li> +<li><p>Next we will need to copy the <code>cwebp</code> folder to our <code>/usr/local/bin</code> directory:</p> + +<ul> +<li>Open macOS Terminal</li> +<li>Run <code>sudo cp /Downloads/libwebp-1.2.1-mac-10.15/bin/cwebp /usr/local/bin</code></li> +<li><em>Note:</em> if the <code>/usr/local/bin</code> directory doesn’t exist, simply create it by running: <code>sudo cd /usr/local && mkdir bin</code></li> +</ul></li> +</ol> + +<h2 id="creating-our-custom-automator-script">Creating our custom Automator script</h2> + +<ol> +<li><p>Open the macOS Automator from the Applications folder</p></li> +<li><p>Select <code>Quick Option</code> from the first prompt</p></li> +<li><p>Set “Workflow receives current” to <code>image files</code></p></li> +<li><p>Set the label “in” to <code>Finder</code></p></li> +<li><p>From the left pane, select “Library > Utilities”</p></li> +<li><p>From the presented choices in the next pane, drag and drop <code>Run Shell Script</code> into the far right pane</p></li> +<li><p>Set the area “Pass input” to <code>as arguments</code></p></li> +<li><p>Enter the following code below as your script and type <code>⌘-S</code> to save (name it something like “Convert to webp”)</p> + +<p>for f in “$@” do -/usr/local/bin/cwebp -q 85 "$f" -o "${f%.*}.webp" -done -</code></pre> +/usr/local/bin/cwebp -q 85 “$f” -o “${f%.*}.webp” +done</p></li> +</ol> + <p>For visual reference, it should look something like this:</p> -<p><figure> -<img src="/public/images/automator.png" alt="macOS Automator"> -<figcaption>(<a href="/public/images/automator.webp">link to hi-res image</a>)</figcaption> -</figure></p> + <p>And when right-clicking an image file in the Finder window, it should now give you the option to convert:</p> -<p><figure> -<img src="/public/images/automator-2.png" alt="Right click to convert"> -<figcaption>(<a href="/public/images/automator-2.webp">link to hi-res image</a>)</figcaption> -</figure></p> -<h2>Making edits to your script</h2> -<p>If you ever have the need to edit this script (for example, changing the default <code>85</code> quality parameter), you will need to navigate to your <code>~/Library/Services</code> folder and open your custom webp Quick Action in the Automator application. </p> + +<h2 id="making-edits-to-your-script">Making edits to your script</h2> + +<p>If you ever have the need to edit this script (for example, changing the default <code>85</code> quality parameter), you will need to navigate to your <code>~/Library/Services</code> folder and open your custom webp Quick Action in the Automator application. </p> + <p>Simple as that!</p> -<h2>Possible Hiccups</h2> + +<h2 id="possible-hiccups">Possible Hiccups</h2> + <p>I was contacted by the very helpful <a href="https://kevq.uk">Kev Quirk</a> about a minor problem he encountered while following this tutorial. When trying to run <code>cwebp</code> he received the following error message:</p> -<pre><code>cwebp cannot be opened because it's from an unverified developer + +<pre><code>cwebp cannot be opened because it's from an unverified developer </code></pre> + <p>Doing the next steps seemed to have fixed this issue for him:</p> + <ol> -<li>Click on the "Open in Finder" in the error message prompt</li> +<li>Click on the “Open in Finder” in the error message prompt</li> <li>Double-click on the <code>cwebp</code> utility to open in Terminal</li> -<li>You'll then be prompted with a pop-up asking if you wish to execute</li> +<li>You’ll then be prompted with a pop-up asking if you wish to execute</li> </ol> + <p>After following these steps, the issue should be resolved.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/battery/index.html b/build/battery/index.html index e8ab3ab..981c302 100644 --- a/build/battery/index.html +++ b/build/battery/index.html @@ -1,36 +1,49 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Improving Laptop Battery Performance on OpenBSD</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Improving Laptop Battery Performance on OpenBSD</h1> +<h1 id="improving-laptop-battery-performance-on-openbsd">Improving Laptop Battery Performance on OpenBSD</h1> + <p>2023-06-13</p> -<p>It is no secret that OpenBSD has poor battery performance on laptops. Although not as impressive as something like Alpine Linux or FreeBSD, you can tweak OpenBSD <em>just enough</em> to squeeze more life out of your machine's battery.</p> -<h2>Our New Best Friend: <code>ampd</code></h2> -<p>I won't go into great detail about <code>ampd</code> here - that's what the incredible <a href="https://man.openbsd.org/apmd">documentation is for</a>. You'll want to make sure to start it before trying to configure it:</p> + +<p>It is no secret that OpenBSD has poor battery performance on laptops. Although not as impressive as something like Alpine Linux or FreeBSD, you can tweak OpenBSD <em>just enough</em> to squeeze more life out of your machine’s battery.</p> + +<h2 id="our-new-best-friend-">Our New Best Friend: <code>ampd</code></h2> + +<p>I won’t go into great detail about <code>ampd</code> here - that’s what the incredible <a href="https://man.openbsd.org/apmd">documentation is for</a>. You’ll want to make sure to start it before trying to configure it:</p> + <pre><code>doas rcctl start apmd </code></pre> + <p>If already running in a live session, you can default to <code>-A</code> (auto) but I suggest setting cpu performance to low:</p> + <pre><code>apm -L </code></pre> + <p>To make these changes permanent on boot:</p> + <pre><code>doas rcctl set apmd flags -L </code></pre> -<p>Optimizating battery life via <code>ampd</code> will have the most noticable impact but you can improve things even further by implementing some extra "small" performance wins.</p> -<h2>Small Performance Wins</h2> + +<p>Optimizating battery life via <code>ampd</code> will have the most noticable impact but you can improve things even further by implementing some extra “small” performance wins.</p> + +<h2 id="small-performance-wins">Small Performance Wins</h2> + <ol> -<li>Reduce your screen's brightness (<code>xbacklight -set 50</code>)</li> +<li>Reduce your screen’s brightness (<code>xbacklight -set 50</code>)</li> <li>Use a lightweight window manager instead of a beefer desktop environment</li> <li>Enable battery saving options in your system BIOS (if available)</li> <li>Disable the fingerprint scanner and bluetooth in your system BIOS (if available)</li> diff --git a/build/being-efficient/index.html b/build/being-efficient/index.html index 008a907..fb8f591 100644 --- a/build/being-efficient/index.html +++ b/build/being-efficient/index.html @@ -1,66 +1,108 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Being More Efficient as a Designer and Developer</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Being More Efficient as a Designer and Developer</h1> +<h1 id="being-more-efficient-as-a-designer-and-developer">Being More Efficient as a Designer and Developer</h1> + <p>2019-09-28</p> -<p><em>I recently began working on a small side project</em> (a marketing site / blog for an upcoming UX book I'm writing, but I have nothing to promote yet - sorry) and found myself circling around different static site generators (SSG) in the initial design concepts. The thought of learning an entirely new blogging platform was inspiring and seemed like a good excuse to expand my skillset.</p> -<p>Although I've used 11ty and Hugo in the past for client work, this personal website runs on Jekyll. I'm very familiar with Jekyll and can push out a point-of-concept site in a flash with little-to-no effort. So, why was I looking to jump into a SSG I hadn't used before? </p> -<p>And that got me thinking... <strong>Why am I moving away from being efficient?</strong></p> -<h2>Before we begin...</h2> -<p>I should preface everything else I'm going to mention in this post with this: <em>learning new stuff is awesome</em>. You should expand your knowledge as much as you can, no matter what industry you find yourself in. I've found it to be a great catalyst for boosting my passion in design and development.</p> -<p>Okay, I've made it clear that learning is important to the growth of your career - so please keep that in mind before you read my next statement:</p> + +<p><em>I recently began working on a small side project</em> (a marketing site / blog for an upcoming UX book I’m writing, but I have nothing to promote yet - sorry) and found myself circling around different static site generators (SSG) in the initial design concepts. The thought of learning an entirely new blogging platform was inspiring and seemed like a good excuse to expand my skillset.</p> + +<p>Although I’ve used 11ty and Hugo in the past for client work, this personal website runs on Jekyll. I’m very familiar with Jekyll and can push out a point-of-concept site in a flash with little-to-no effort. So, why was I looking to jump into a SSG I hadn’t used before? </p> + +<p>And that got me thinking… <strong>Why am I moving away from being efficient?</strong></p> + +<h2 id="before-we-begin">Before we begin…</h2> + +<p>I should preface everything else I’m going to mention in this post with this: <em>learning new stuff is awesome</em>. You should expand your knowledge as much as you can, no matter what industry you find yourself in. I’ve found it to be a great catalyst for boosting my passion in design and development.</p> + +<p>Okay, I’ve made it clear that learning is important to the growth of your career - so please keep that in mind before you read my next statement:</p> + <p><strong>Just use what you already know.</strong></p> + <p>By using your current experience (maybe even expertise) with a design system, CSS framework, blogging platform, programming language, etc. you can get something <em>built</em>. Not to mention you can get that thing built in a <em>fraction of the time</em>. After all, building things is kind of the point of being a designer (or developer), right?</p> -<p>My current side project may be a slight edge case in this regard. Since it's a personal "dev" website, most of the tech stack choices comes down to personal preference - not client requirements. But I believe my point still remains: you shouldn't reach for something new and shiny <em>just because</em> it's new and shiny.</p> -<h2>Some vague examples</h2> + +<p>My current side project may be a slight edge case in this regard. Since it’s a personal “dev” website, most of the tech stack choices comes down to personal preference - not client requirements. But I believe my point still remains: you shouldn’t reach for something new and shiny <em>just because</em> it’s new and shiny.</p> + +<h2 id="some-vague-examples">Some vague examples</h2> + <p>It might be easier to understand what I mean by using some possible real-world examples:</p> + <table> -<tr><th>Problem </th><th>New Way </th><th>Efficient Way </th></tr> -<tr><td>A local bakery needs product and e-cart functionality </td><td>Learn a new custom ecommerce platform </td><td>Use a popular pre-existing library you're familiar with </td></tr> -<tr><td>Create an add-on blog for a medical clinic </td><td>Try a custom built static site generator and hook in a git-based CMS </td><td>Spin up a quick WordPress site and hand-off </td></tr> -<tr><td>UI mockups for a workout iOS app </td><td>Test out the newest design tool just released </td><td>Use your go-to default design tool you (Sketch, Figma, etc) </td></tr> -</table><p>I know all of this is very much "common sense", but you would be surprised how often we reach out for the latest and greatest tools (we are creative problem-solvers, after-all). If a current project allots you the time to learn a new skillset alongside outputting a quality product - then more power to you. In my experience that's a rare luxury, so my advice is to focus on shipping quality work (whether that's code, design, analytics, content, etc) instead of getting caught up in the "new and shiny".</p> -<h2>But wait, how / when do I learn new things?</h2> -<p>It isn't exactly ground breaking to state that you should keep things simple as a developer. There are probably hundreds of posts on the web advocating for the exact same thing - which is good. At the same time, we as designers and developers need to avoid stagnation - something that can happen all too easily.</p> -<p>So how do we learn new things? This is a hard thing to answer. Really, the best response would be: <strong>it depends on the designer / developer</strong>. I know, <em>what a cop-out</em>. Unfortunately, it's true. There is no one solution to learning anything new.</p> +<thead> +<tr> +<th>Problem</th> +<th>New Way</th> +<th>Efficient Way</th> +</tr> +</thead> + +<tbody> +<tr> +<td>A local bakery needs product and e-cart functionality</td> +<td>Learn a new custom ecommerce platform</td> +<td>Use a popular pre-existing library you’re familiar with</td> +</tr> +<tr> +<td>Create an add-on blog for a medical clinic</td> +<td>Try a custom built static site generator and hook in a git-based CMS</td> +<td>Spin up a quick WordPress site and hand-off</td> +</tr> +<tr> +<td>UI mockups for a workout iOS app</td> +<td>Test out the newest design tool just released</td> +<td>Use your go-to default design tool you (Sketch, Figma, etc)</td> +</tr> +</tbody> +</table> + +<p>I know all of this is very much “common sense”, but you would be surprised how often we reach out for the latest and greatest tools (we are creative problem-solvers, after-all). If a current project allots you the time to learn a new skillset alongside outputting a quality product - then more power to you. In my experience that’s a rare luxury, so my advice is to focus on shipping quality work (whether that’s code, design, analytics, content, etc) instead of getting caught up in the “new and shiny”.</p> + +<h2 id="but-wait-how-when-do-i-learn-new-things">But wait, how / when do I learn new things?</h2> + +<p>It isn’t exactly ground breaking to state that you should keep things simple as a developer. There are probably hundreds of posts on the web advocating for the exact same thing - which is good. At the same time, we as designers and developers need to avoid stagnation - something that can happen all too easily.</p> + +<p>So how do we learn new things? This is a hard thing to answer. Really, the best response would be: <strong>it depends on the designer / developer</strong>. I know, <em>what a cop-out</em>. Unfortunately, it’s true. There is no one solution to learning anything new.</p> + <p>The best I can do is offer up some possible options:</p> + <ul> <li><p>Learn outside of work</p> <ul> -<li>Reading / listening to a technical book on your commute or before bed</li> +<li>Reading / listening to a technical book on your commute or before bed</li> <li>Take an online course you can work on after hours</li> -</ul> -</li> -<li><p>Contribute to an open source project that you aren't familiar with but are interested in</p> +</ul></li> +<li><p>Contribute to an open source project that you aren’t familiar with but are interested in</p> <ul> -<li>Even tiny contributions go a long way, don't doubt yourself so much</li> -</ul> -</li> +<li>Even tiny contributions go a long way, don’t doubt yourself so much</li> +</ul></li> <li><p>Ask your current company (if not a freelancer that is) to learn on their time</p> <ul> -<li>It's a valid argument that your company should have vested interest in you becoming a better developer / designer</li> -</ul> -</li> +<li>It’s a valid argument that your company should have vested interest in you becoming a better developer / designer</li> +</ul></li> </ul> -<h2>Easier said than done</h2> -<p>Sometimes, even the suggestions above don't work for certain individuals. Life is hectic and other important things can pop-up taking precedence. Don't let it get you down - there are more important things in life than mastering the newest framework that released 25 minutes ago.</p> -<p>My motto is to keep shipping quality products that you actually give a shit about. Otherwise it doesn't matter how "new" it is.</p> + +<h2 id="easier-said-than-done">Easier said than done</h2> + +<p>Sometimes, even the suggestions above don’t work for certain individuals. Life is hectic and other important things can pop-up taking precedence. Don’t let it get you down - there are more important things in life than mastering the newest framework that released 25 minutes ago.</p> + +<p>My motto is to keep shipping quality products that you actually give a shit about. Otherwise it doesn’t matter how “new” it is.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/berg/index.html b/build/berg/index.html index f00560b..a761347 100644 --- a/build/berg/index.html +++ b/build/berg/index.html @@ -1,54 +1,83 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Hosting with Codeberg Pages</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Hosting with Codeberg Pages</h1> +<h1 id="hosting-with-codeberg-pages">Hosting with Codeberg Pages</h1> + <p>2022-07-29</p> + <p>I recently switched the <a href="https://pblog.bt.ht">pblog</a> project repo over from Sourcehut to Codeberg (mostly for UX reasons) and it got me looking into <a href="https://codeberg.page">Codeberg Pages</a>. It seemed like a cleaner approach to host my personal blog on the same platform I planned to also share the source code.</p> -<p>I decided to share the setup process here since I couldn't find a straightforward guide explaining everything required to get going. So, let's dig in.</p> -<h2>Create the Repos</h2> + +<p>I decided to share the setup process here since I couldn’t find a straightforward guide explaining everything required to get going. So, let’s dig in.</p> + +<h2 id="create-the-repos">Create the Repos</h2> + <p><strong>Disclaimer</strong>: My personal blog uses <a href="https://pblog.bt.ht">pblog</a>, so although these instructions will be catered towards that SSG the same concept <em>should</em> apply for any other generator (Jekyll, Hugo, Next, etc.).</p> -<p>The first step is to create the main repo that would house the core files of <code>pblog</code>. Then we need to make a separate repo simply called <code>pages</code>. This second project is where all the generated "static" files get rendered.</p> + +<p>The first step is to create the main repo that would house the core files of <code>pblog</code>. Then we need to make a separate repo simply called <code>pages</code>. This second project is where all the generated “static” files get rendered.</p> + <p><em>Side note</em>: Be sure to at least include a <code>README</code> file in that <code>pages</code> repo. This will avoid any errors or warnings when setting up our submodules in the next steps.</p> -<h2>Configuration Edits</h2> + +<h2 id="configuration-edits">Configuration Edits</h2> + <p>Once your two repos are created, you will need to make some minor edits to the <code>_config.sh</code> in the core <code>pblog</code> project to tell the build script where the generated files should go (in this case the <code>pages</code> repo):</p> -<pre><code>OUTPUT="_output/pages/" + +<pre><code>OUTPUT="_output/pages/" </code></pre> -<h2>The Submodule</h2> -<p>Using terminal, navigate to the <code>_output/</code> directory in your core <code>pblog</code> project. Run the following, remembering to replace the USERNAME parameter with your own:</p> -<pre><code>git submodule add git@codeberg.org:USERNAME/pages.git + +<h2 id="the-submodule">The Submodule</h2> + +<p>Using terminal, navigate to the <code>_output/</code> directory in your core <code>pblog</code> project. Run the following, remembering to replace the USERNAME parameter with your own:</p> + +<pre><code>git submodule add git@codeberg.org:USERNAME/pages.git </code></pre> + <p>If everything worked correctly you should now have a <code>.gitmodules</code> file in your main <code>pblog</code> project. If you get any errors, you might need to include the name of the directory at the end of the command:</p> -<pre><code>git submodule add git@codeberg.org:USERNAME/pages.git pages + +<pre><code>git submodule add git@codeberg.org:USERNAME/pages.git pages </code></pre> -<h2>The Workflow</h2> -<p>Now you can make changes, add new posts and pages in the main <code>pblog</code> project and have those generated files render into your other <code>pages</code> repo. For this workflow, I simply push commits to both projects when I am happy with my changes but I'm sure you could look into automating this process (ie. a single push from the <code>pblog</code> repo forces a the <code>pages</code> repo to also update).</p> + +<h2 id="the-workflow">The Workflow</h2> + +<p>Now you can make changes, add new posts and pages in the main <code>pblog</code> project and have those generated files render into your other <code>pages</code> repo. For this workflow, I simply push commits to both projects when I am happy with my changes but I’m sure you could look into automating this process (ie. a single push from the <code>pblog</code> repo forces a the <code>pages</code> repo to also update).</p> + <p>Now you can navigate to the standard Codeberg Pages URL to see it in action:</p> + <pre><code>USERNAME.codeberg.page </code></pre> -<p>If you want to use your own custom domain (who doesn't?) then continue reading.</p> -<h2>Custom Domains (Optional)</h2> + +<p>If you want to use your own custom domain (who doesn’t?) then continue reading.</p> + +<h2 id="custom-domains-optional">Custom Domains (Optional)</h2> + <p>The first thing you will need to do is add a <code>.domains</code> file to your <code>pages</code> root directory. In this file you will want to list your custom domain on the first line, followed by the standard Codeberg pages URL below it. Like so:</p> + <pre><code>yourcustomdomain.com USERNAME.codeberg.page </code></pre> -<p>I'm keeping this very basic, but I suggest you look further into the <a href="https://docs.codeberg.org/codeberg-pages/#custom-domains">official documentation</a> if there are any extra settings you'd like to tinker with.</p> + +<p>I’m keeping this very basic, but I suggest you look further into the <a href="https://docs.codeberg.org/codeberg-pages/#custom-domains">official documentation</a> if there are any extra settings you’d like to tinker with.</p> + <p>The final step is configuring a <code>CNAME</code> DNS setting through your registrar:</p> -<pre><code>@ -> USERNAME.codeberg.page + +<pre><code>@ -> USERNAME.codeberg.page </code></pre> -<p>Give the DNS settings a bit of time to take (24-48 hours) and you'll have your custom domain working just fine.</p> + +<p>Give the DNS settings a bit of time to take (24-48 hours) and you’ll have your custom domain working just fine.</p> + <p>Happy hosting!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/better-box-shadows/index.html b/build/better-box-shadows/index.html index cfca3d3..c1fc50e 100644 --- a/build/better-box-shadows/index.html +++ b/build/better-box-shadows/index.html @@ -1,66 +1,43 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Better Box Shadows</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Better Box Shadows</h1> +<h1 id="better-box-shadows">Better Box Shadows</h1> + <p>2019-01-08</p> -<p><style> - .message { - position: relative; - z-index: 1; - } - .box-container, - .box-container-depth { - background: white; - box-shadow: 0 4px 8px rgba(0,0,0,0.3); - border: 1px solid #eee; - border-radius: 10px; - margin: 2rem auto; - padding: 10px; - position: relative; - height: 200px; - width: 250px; - } - .box-container-depth { box-shadow: none; } - .box-container-depth .box-container-depth-inner { - bottom: 0; - box-shadow: 0 4px 12px rgba(0,0,0,0.3); - content:''; - position: absolute; - width: 94%; - height: 94%; - left: 3%; - z-index: -1; - } - .box-container-depth-inner.blur { - filter: blur(6px); - } -</style></p> -<p>Box shadow on <abbr title="hypertext markup language">HTML</abbr> elements has been widely supported across most browsers for a while now, but I find the default options don't allow for much visual manipulation of the shadows in general.</p> -<p>Let's take a look at a default configuration of <code>box-shadow</code>:</p> + +<p>Box shadow on HTML elements has been widely supported across most browsers for a while now, but I find the default options don’t allow for much visual manipulation of the shadows in general.</p> + +<p>Let’s take a look at a default configuration of <code>box-shadow</code>:</p> + <pre><code>.box-container { box-shadow: 0 4px 8px rgba(0,0,0,0.3); } </code></pre> + <p>In the example above the first property number is the origin of the <em>x-axis</em>, the second number is the origin of the <em>y-axis</em> and the third is the amount of <em>blur</em>.</p> + <p>We should also add some minimal styling to cleanup the <code>.box-container</code> a little bit for our example:</p> -<pre><code><div class="box-container"></div> -</code></pre> -<pre><code>.box-container { + +<pre><code><div class="box-container"></div> + + +.box-container { box-shadow: 0 4px 8px rgba(0,0,0,0.3); - /* Styles to make it less ugly */ + /* Styles to make it less ugly */ background: white; border-radius: 10px; border: 1px solid #eee; @@ -70,20 +47,27 @@ width: 250px; } </code></pre> + <p>Which would render as this:</p> -<p><div class="box-container"></div></p> + <p>Not bad - but we can do a lot better than this.</p> -<h2>Please sir, I want some more (depth)</h2> + +<h2 id="please-sir-i-want-some-more-depth">Please sir, I want some more (depth)</h2> + <p>We just need to add a simple child <code>div</code> (or use a <code>pseudo</code> element if you prefer) inside our main element we want to apply the shadow to:</p> -<pre><code><div class="box-container"> - <div class="box-container-inner"></div> -</div> + +<pre><code><div class="box-container"> + <div class="box-container-inner"></div> +</div> </code></pre> -<p>Now we make our inner child element <code>absolute</code> and set it's <code>height</code> and <code>width</code> dynamically to be slightly smaller than it's parent (percentages work best for this). </p> -<p>Remember to set this child element behind it's parent by adding <code>z-index: -1</code>.</p> + +<p>Now we make our inner child element <code>absolute</code> and set it’s <code>height</code> and <code>width</code> dynamically to be slightly smaller than it’s parent (percentages work best for this). </p> + +<p>Remember to set this child element behind it’s parent by adding <code>z-index: -1</code>.</p> + <pre><code>.box-container { - /* No box-shadow needed on this element anymore */ - /* Styles to make it less ugly */ + /* No box-shadow needed on this element anymore */ + /* Styles to make it less ugly */ background: white; border-radius: 10px; border: 1px solid #eee; @@ -93,11 +77,14 @@ width: 250px; } </code></pre> -<h2>Inner Containers</h2> + +<h2 id="inner-containers">Inner Containers</h2> + <p>We also need to target the <code>box-container-inner</code> element set inside the current parent to reflect our custom shadow styling:</p> + <pre><code>.box-container-inner { bottom: 0; - /* The box-shadow is added here now */ + /* The box-shadow is added here now */ box-shadow: 0 4px 12px rgba(0,0,0,0.3); height: 94%; left: 3%; @@ -106,13 +93,17 @@ z-index: -1; } </code></pre> + <p>Which will make the drop-shadow render with a little more realistic depth:</p> -<p><div class="box-container-depth"><span class="box-container-depth-inner"></span></div></p> -<h2>But wait - there's more!</h2> + +<h2 id="but-wait---theres-more">But wait - there’s more!</h2> + <p>We could stop now and have a decent drop-shadow that is certainly easier on the eyes - but we can make this even better with one extra property - <code>filter:blur();</code>. </p> + <p>So your final code would look like this:</p> + <pre><code>.box-container { - /* Styles to make it less ugly */ + /* Styles to make it less ugly */ background: white; border-radius: 10px; border: 1px solid #eee; @@ -133,10 +124,8 @@ z-index: -1; } </code></pre> + <p>Which renders out into a much smoother blend of a drop-shadow, creating a more realistic illusion of depth:</p> -<p><div class="box-container-depth"> - <span class="box-container-depth-inner blur"></span> -</div></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/bidirectional-scrolling/index.html b/build/bidirectional-scrolling/index.html index 1007e04..3f9ecd9 100644 --- a/build/bidirectional-scrolling/index.html +++ b/build/bidirectional-scrolling/index.html @@ -1,48 +1,65 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Bidirectional Scrolling: Why Not Both?</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Bidirectional Scrolling: Why Not Both?</h1> +<h1 id="bidirectional-scrolling-why-not-both">Bidirectional Scrolling: Why Not Both?</h1> + <p>2020-11-09</p> -<p><em>I recently came across Adam Silver's post <a href="https://adamsilver.io/articles/bidirectional-scrolling-whats-not-to-like/">about the merits and pitfalls of bidirectional scrolling</a></em> and found myself conflicted with the design arguments put forth in the article. It's a very good article overall, and I suggest giving it a read before digging deeper into my post here.</p> -<h2>The Premise</h2> + +<p><em>I recently came across Adam Silver’s post <a href="https://adamsilver.io/articles/bidirectional-scrolling-whats-not-to-like/">about the merits and pitfalls of bidirectional scrolling</a></em> and found myself conflicted with the design arguments put forth in the article. It’s a very good article overall, and I suggest giving it a read before digging deeper into my post here.</p> + +<h2 id="the-premise">The Premise</h2> + <p>The original article argues that displaying page content via horizontal scrolling (and therefore slightly hiding interactive content) creates a few major issues:</p> + <ul> -<li>it increases the chance users won't see it</li> -<li>there's a greater reliance on digital literacy</li> -<li>it's generally more labour intensive for users</li> +<li>it increases the chance users won’t see it</li> +<li>there’s a greater reliance on digital literacy</li> +<li>it’s generally more labour intensive for users</li> </ul> + <p>Adam also makes a solid statement here:</p> -<blockquote><p>Having to scroll down and across in a zig zag fashion can be tiresome, especially for people with motor impairments.</p> + +<blockquote> +<p>Having to scroll down and across in a zig zag fashion can be tiresome, especially for people with motor impairments.</p> </blockquote> -<p>But I don't believe these issues create a need to completely remove the horizontal "scrolling" design altogether. You can still implement the <code>See All Items</code> category link, while allowing the horizontal content to load in <em>dynamically</em>. Balance is always key.</p> -<h2>Not All At Once, Please!</h2> + +<p>But I don’t believe these issues create a need to completely remove the horizontal “scrolling” design altogether. You can still implement the <code>See All Items</code> category link, while allowing the horizontal content to load in <em>dynamically</em>. Balance is always key.</p> + +<h2 id="not-all-at-once-please">Not All At Once, Please!</h2> + <p>So what exactly do I mean by <em>dynamically</em> loading in horizontal content?</p> + <ul> <li>The user is shown the top 4 items in a given category</li> <li>From there, the user can use the <code>See All Items</code> link to jump into a full category page</li> <li>If they so desire, they can begin scroll horizontally in a given category row + <ul> <li>Once they reach the end of the row, 4 more items will load in automatically to expand the list</li> <li>To avoid a never-ending list, it might be best to limit total row items to ~20 items. At this point the UI could prompt the user to <code>View All Items</code> in that category.</li> +</ul></li> </ul> -</li> -</ul> + <p>By loading the row content in piece-by-piece, initial loads for users will be faster and subsequent list items will load quickly as well (since they would limit to a set default - in this case only 4).</p> -<h2>Final Improvements</h2> -<p>Below you can find a quick, static version of this concept. Here you can see the horizontal list items, along with their corresponding <code>See All Items</code> links. You'll have to use your imagination for how new items would load once you each the end of a horizontal row. (I'm too lazy to spend extra time building out that functionality for a hypothetical blog post)</p> + +<h2 id="final-improvements">Final Improvements</h2> + +<p>Below you can find a quick, static version of this concept. Here you can see the horizontal list items, along with their corresponding <code>See All Items</code> links. You’ll have to use your imagination for how new items would load once you each the end of a horizontal row. (I’m too lazy to spend extra time building out that functionality for a hypothetical blog post)</p> + <p><a href="https://codepen.io/bradleytaunt/pen/pobxpXz">Live CodePen Example</a></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/browser-history-sucks/index.html b/build/browser-history-sucks/index.html index f1ad5fe..d1a79a8 100644 --- a/build/browser-history-sucks/index.html +++ b/build/browser-history-sucks/index.html @@ -1,63 +1,95 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Browser History Sucks</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Browser History Sucks</h1> +<h1 id="browser-history-sucks">Browser History Sucks</h1> + <p>2019-04-20</p> + <p><em>Have you ever needed to step back through your browser history</em> to find a particular site or product? Do you remember that experience being good? Most likely not.</p> -<p>Much like printers, the design of browser history interfaces hasn't changed in years. This would be fine if these UIs had been well thought out and optimized for an easy user experience - but they weren't.</p> -<p>Browser history views rely on the user's own memory for more in-depth searches. This defeats the whole purpose of having a robust, documented history. The browser should be doing this heavy-lifting.</p> -<h2>What browsers get wrong</h2> -<p>Modern browsers give the general public too much credit when it comes to memory (I don't mean this as an insult!). To assume users remember the URL or site name when browsing random pages is short-sighted. I find myself asking these types of questions when jumping back into my view history far too often:</p> + +<p>Much like printers, the design of browser history interfaces hasn’t changed in years. This would be fine if these UIs had been well thought out and optimized for an easy user experience - but they weren’t.</p> + +<p>Browser history views rely on the user’s own memory for more in-depth searches. This defeats the whole purpose of having a robust, documented history. The browser should be doing this heavy-lifting.</p> + +<h2 id="what-browsers-get-wrong">What browsers get wrong</h2> + +<p>Modern browsers give the general public too much credit when it comes to memory (I don’t mean this as an insult!). To assume users remember the URL or site name when browsing random pages is short-sighted. I find myself asking these types of questions when jumping back into my view history far too often:</p> + <ul> -<li>"That article had <em>something</em> to do with CSS..."</li> -<li>"I remember seeing a beautifully designed site a month ago but have no clue what the URL was..."</li> -<li>"My browser crashed and I can't recall that [example website] I had pinned in my tab for weeks..."</li> +<li>“That article had <em>something</em> to do with CSS…”</li> +<li>“I remember seeing a beautifully designed site a month ago but have no clue what the URL was…”</li> +<li>“My browser crashed and I can’t recall that [example website] I had pinned in my tab for weeks…”</li> </ul> -<p>For reference, let's take a look at the current Chrome (73) history view:</p> + +<p>For reference, let’s take a look at the current Chrome (73) history view:</p> + <p><img src="/public/images/browser-history-01.webp" alt="Default Chrome History" /></p> + <p>As you may have noticed - this UI is lackluster at best. An oversimplified search field in the header is the only means of filtering items.</p> -<h2>Why not use extensions?</h2> + +<h2 id="why-not-use-extensions">Why not use extensions?</h2> + <p>I know using browser extensions or tagging favorites can alleviate some of these issues. This is great, but why not simplify everything by having these features <em>inside</em> the history view? If an extension can add these features, why not have those extras built-in?</p> -<h2>Two subtle improvements</h2> -<p>A little goes a long way. With just two small changes, we can drastically increase the history view's UX.</p> -<p>We start by adding <u>a date picker</u>. Users open the new calendar icon to filter by days, months or years before searching. Seems trivial, but this saves the headache of filtering through all saved history.</p> + +<h2 id="two-subtle-improvements">Two subtle improvements</h2> + +<p>A little goes a long way. With just two small changes, we can drastically increase the history view’s UX.</p> + +<p>We start by adding a date picker. Users open the new calendar icon to filter by days, months or years before searching. Seems trivial, but this saves the headache of filtering through all saved history.</p> + <p><img src="/public/images/browser-history-02.webp" alt="Chrome History with date picker" /></p> + <p>The second small functional change we can make is including extra subcategories. These new options allow users to focus their searches based on:</p> + <ul> <li>Session length</li> <li>Number of return visits</li> <li>Last restored tabs</li> </ul> -<h3>Session length</h3> + +<h3 id="session-length">Session length</h3> + <p><img src="/public/images/browser-history-03.webp" alt="Chrome History by session length" /></p> -<p>Allow users to display their history filtered by session duration. This helps when searching for an stagnant page or pinned site during a user's long session. An example default would allow filtering by:</p> + +<p>Allow users to display their history filtered by session duration. This helps when searching for an stagnant page or pinned site during a user’s long session. An example default would allow filtering by:</p> + <ul> <li>longest to shortest</li> <li>shortest to longest</li> <li>pinned tabs</li> </ul> -<h3>Return visits</h3> + +<h3 id="return-visits">Return visits</h3> + <p><img src="/public/images/browser-history-04.webp" alt="Chrome History by return visits" /></p> + <p>When users make repeat visits to a site or web app, the browser should keep a record of return sessions. This allows the user to refine their search by many or singular visits.</p> -<h3>Last restored tabs</h3> + +<h3 id="last-restored-tabs">Last restored tabs</h3> + <p><img src="/public/images/browser-history-05.webp" alt="Chrome History by restored tabs" /></p> + <p>A basic concept, but the ability for users to view all previous instances of restored tabs is helpful. This would fix most edge cases not covered by the other two categories.</p> -<h2>Far from perfect</h2> + +<h2 id="far-from-perfect">Far from perfect</h2> + <p>The Chrome (or any browser for that matter) browser history view is simplistic to a fault. The current UI is prone to human error, since it makes assumptions and relies heavily on user memory.</p> -<p>These are simple fixes that attempt to boost the basic UX of the history view. Are these concepts absolutely perfect? Not at all. Is it at least an improvement? I believe it is. When products decrease the effort required of it's users, I see that as a positive.</p> + +<p>These are simple fixes that attempt to boost the basic UX of the history view. Are these concepts absolutely perfect? Not at all. Is it at least an improvement? I believe it is. When products decrease the effort required of it’s users, I see that as a positive.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/character-unit/index.html b/build/character-unit/index.html index 74de90b..ce26393 100644 --- a/build/character-unit/index.html +++ b/build/character-unit/index.html @@ -1,43 +1,58 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>CSS Character Unit</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>CSS Character Unit</h1> +<h1 id="css-character-unit">CSS Character Unit</h1> + <p>2019-04-23</p> + <p><em>When it comes to proper readability with large portions of text</em>, the golden standard is to have no more than <a href="http://webtypography.net/2.1.2">75 characters per line</a>. This is easy to achieve in the world of print but on the responsive, ever-changing web - statically defined typography becomes a little more difficult.</p> + <p>You could go through the long process of setting up media queries for every possible screen size, adjusting text size and padding accordingly - but there is a <em>better way</em>.</p> -<h2>Introducing character units</h2> -<p>By setting your main containers or text elements with the CSS character unit (<code>ch</code>), you need to set the character length only once. Let's look at a simple example for reference.</p> -<p>Let's say you have an article which will fill the entire length of the screen. Something like this:</p> -<pre><code><div class="container"> - <p>Reprehenderit aliqua in quis eiusmod ea culpa aliquip. Velit duis est irure voluptate occaecat labore laborum ut pariatur ex veniam deserunt esse est. Esse sunt exercitation id reprehenderit deserunt elit commodo sit ullamco amet commodo magna consequat. Excepteur voluptate tempor consectetur eu aliqua aliquip laboris aliquip veniam excepteur labore.</p> - <p>Voluptate excepteur sint magna ipsum occaecat irure sit. In occaecat excepteur in id ullamco id est incididunt irure et. Consectetur veniam exercitation occaecat exercitation labore nulla excepteur irure ex anim. Commodo sint anim non ad excepteur exercitation eiusmod Lorem nisi. Tempor ut ipsum do adipisicing dolore.</p> -</div> + +<h2 id="introducing-character-units">Introducing character units</h2> + +<p>By setting your main containers or text elements with the CSS character unit (<code>ch</code>), you need to set the character length only once. Let’s look at a simple example for reference.</p> + +<p>Let’s say you have an article which will fill the entire length of the screen. Something like this:</p> + +<pre><code><div class="container"> + <p>Reprehenderit aliqua in quis eiusmod ea culpa aliquip. Velit duis est irure voluptate occaecat labore laborum ut pariatur ex veniam deserunt esse est. Esse sunt exercitation id reprehenderit deserunt elit commodo sit ullamco amet commodo magna consequat. Excepteur voluptate tempor consectetur eu aliqua aliquip laboris aliquip veniam excepteur labore.</p> + <p>Voluptate excepteur sint magna ipsum occaecat irure sit. In occaecat excepteur in id ullamco id est incididunt irure et. Consectetur veniam exercitation occaecat exercitation labore nulla excepteur irure ex anim. Commodo sint anim non ad excepteur exercitation eiusmod Lorem nisi. Tempor ut ipsum do adipisicing dolore.</p> +</div> </code></pre> + <p>With this structure, you might normally set the default <code>max-width</code> property with your desired maximum width (whatever you believe is the best reading length):</p> + <pre><code>.container { max-width: 38em; } </code></pre> -<p>This works - but it isn't ideal. Time for character units to save the day! You will still target the <code>max-width</code> property but this time we set it to use the <code>ch</code> value like so:</p> + +<p>This works - but it isn’t ideal. Time for character units to save the day! You will still target the <code>max-width</code> property but this time we set it to use the <code>ch</code> value like so:</p> + <pre><code>.container { max-width: 66ch; } </code></pre> + <p>This setting makes sure content will not exceed more than 66 characters per line, making for a better reading experience with little effort.</p> -<h2>Browser support</h2> + +<h2 id="browser-support">Browser support</h2> + <p>The character unit attribute has pretty great support - even partial IE11! Check out the supported browsers <a href="https://caniuse.com/#feat=ch-unit">here</a>.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/chasing-performance/index.html b/build/chasing-performance/index.html index 30e7436..86e39cc 100644 --- a/build/chasing-performance/index.html +++ b/build/chasing-performance/index.html @@ -1,216 +1,157 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Chasing Performance</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Chasing Performance</h1> +<h1 id="chasing-performance">Chasing Performance</h1> + <p>2017-11-20</p> -<h2>Update</h2> -<p>This post is no longer relevant since this blog has been redesigned since. I'm keeping this article up as a point of reference.</p> -<hr /> -<p>So I decided to participate in Smashing Mag's <a href="https://www.smashingmagazine.com/2017/10/front-end-performance-challenge/">Front End Performance Challenge</a>, not only for the potential of winning the prize but to further experiment with optimizing my site. (Web performance is a passion of mine)</p> -<p>Below I will breakdown the before & after statistics of my personal site and what changes I made in great detail.</p> -<p>I will be using both my homepage and the image-heavy article I recently wrote, <a href="/blog/the-death-of-personality/">The Death of Personality</a>, as the basis for my tests.</p> -<h3>Lighthouse Score - Homepage</h3> -<p><a href="/public/images/lighthouse-homepage-original.webp">Full source original stats</a> // <a href="/public/images/lighthouse-homepage-updated.webp">Full source updated stats</a></p> -<p><table> - <thead> - <tr> - <th>Stats</th> - <th>Before</th> - <th>After</th> - </tr> - </thead> - <tbody> - <tr> - <td>Performance</td> - <td>82</td> - <td>98</td> - </tr> - <tr> - <td>Accessibility</td> - <td>100</td> - <td>100</td> - </tr> - <tr> - <td>Best Practices</td> - <td>75</td> - <td>94</td> - </tr> - </tbody> -</table></p> -<h3>Lighthouse Score - Article Page</h3> -<p><a href="public/images/lighthouse-article-original.webp">Full source original stats</a> // <a href="public/images/lighthouse-article-updated.webp">Full source updated stats</a></p> -<p><table> - <thead> - <tr> - <th>Stats</th> - <th>Before</th> - <th>After</th> - </tr> - </thead> - <tbody> - <tr> - <td>Performance</td> - <td>39</td> - <td>96</td> - </tr> - <tr> - <td>Accessibility</td> - <td>97</td> - <td>100</td> - </tr> - <tr> - <td>Best Practices</td> - <td>69</td> - <td>94</td> - </tr> - </tbody> -</table></p> -<h3>Web Page Test - Homepage</h3> -<p><a href="/public/images/webpagetest-homepage-original.webp">Full source original stats</a> // <a href="/public/images/webpagetest-homepage-updated.webp">Full source updated stats</a></p> -<p><table> - <thead> - <tr> - <th>Stats</th> - <th>Before</th> - <th>After</th> - </tr> - </thead> - <tbody> - <tr> - <td>Initial Load Time</td> - <td>0.91s</td> - <td class="after bar">0.41s</td> - </tr> - <tr> - <td>Visually Complete</td> - <td>0.9s</td> - <td>0.7s</td> - </tr> - <tr> - <td>Fully Loaded</td> - <td>0.94s</td> - <td>0.65s</td> - </tr> - </tbody> -</table></p> -<h3>Web Page Test - Article Page</h3> -<p><a href="/public/images/webpagetest-article-original.webp">Full source original stats</a> // <a href="/public/images/webpagetest-article-updated.webp">Full source updated stats</a></p> -<p><table> - <thead> - <tr> - <th>Stats</th> - <th>Before</th> - <th>After</th> - </tr> - </thead> - <tbody> - <tr> - <td>Initial Load Time</td> - <td>4.7s</td> - <td>0.5s</td> - </tr> - <tr> - <td>Visually Complete</td> - <td>3.1s</td> - <td>0.8s</td> - </tr> - <tr> - <td>Fully Loaded</td> - <td>4.8s</td> - <td>0.67s</td> - </tr> - </tbody> -</table></p> -<h3>Quick Look</h3> -<p>Though my homepage only made some minor speed performance enhancements, my article post's initial load time was slimmed down by a <strong>whopping 4.2 seconds!</strong> That's pretty incredible and very noticeable from an end-user's perspective.</p> -<h3>So - What Changed?</h3> + +<h2 id="update">Update</h2> + +<p>This post is no longer relevant since this blog has been redesigned since. I’m keeping this article up as a point of reference.</p> + +<hr/> + +<p>So I decided to participate in Smashing Mag’s Front End Performance Challenge, not only for the potential of winning the prize but to further experiment with optimizing my site. (Web performance is a passion of mine)</p> + +<p>Below I will breakdown the before & after statistics of my personal site and what changes I made in great detail.</p> + +<p>I will be using both my homepage and the image-heavy article I recently wrote, The Death of Personality, as the basis for my tests.</p> + +<h3 id="lighthouse-score---homepage">Lighthouse Score - Homepage</h3> + +<p>Full source original stats // Full source updated stats</p> + +<h3 id="lighthouse-score---article-page">Lighthouse Score - Article Page</h3> + +<p>Full source original stats // Full source updated stats</p> + +<h3 id="web-page-test---homepage">Web Page Test - Homepage</h3> + +<p>Full source original stats // Full source updated stats</p> + +<h3 id="web-page-test---article-page">Web Page Test - Article Page</h3> + +<p>Full source original stats // Full source updated stats</p> + +<h3 id="quick-look">Quick Look</h3> + +<p>Though my homepage only made some minor speed performance enhancements, my article post’s initial load time was slimmed down by a <strong>whopping 4.2 seconds!</strong> That’s pretty incredible and very noticeable from an end-user’s perspective.</p> + +<h3 id="so---what-changed">So - What Changed?</h3> + <p>Webfonts</p> -<p>I'm not using any webfonts but instead defaulting to the user's OS System Fonts. I love custom typefaces but performance takes just too much of a hit on my personal site to bother with them.</p> + +<p>I’m not using any webfonts but instead defaulting to the user’s OS System Fonts. I love custom typefaces but performance takes just too much of a hit on my personal site to bother with them.</p> + <pre><code>body { -font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif,"Sans Serif",Icons; +font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif,"Sans Serif",Icons; } </code></pre> + <p>For reference, there are some things you should to look out for when using custom typefaces:</p> + <ul> <li>Readability and accessibility</li> <li>Possible extra overhead loading in a custom @font-face</li> -<li>Try to avoid any <a href="https://css-tricks.com/fout-foit-foft/">FOUT, FOIT, FOFT</a></li> -<li>Don't go down the rabbit hole of using 3rd party plugins to optimize something as basic as a typeface</li> +<li>Try to avoid any FOUT, FOIT, FOFT</li> +<li>Don’t go down the rabbit hole of using 3rd party plugins to optimize something as basic as a typeface</li> </ul> -<h3>Critical CSS</h3> -<p>This part was easy. In order to avoid the weird styling 'pops' present on some websites when initially loading with slow connections, it's best to place all your most critical styling inline and then load your external CSS once everything else has loaded.</p> -<p>On top of that, I decided to also implement Filament Group's <a href="https://github.com/filamentgroup/loadCSS">loadCSS</a> function to load my CSS asynchronously. If you are not currently using this in any of your projects; stop reading this and go do it! It's a game changer.</p> -<h3>Critical JavaScript</h3> -<p>My personal site only uses a small amount of JavaScript on the article post Jekyll template pages. By using the <code>defer</code> property I can be sure to load the <code>IntersectionObserver</code> API polyfill after the rest of the DOM as finished loading.</p> -<pre><code><script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver" defer> + +<h3 id="critical-css">Critical CSS</h3> + +<p>This part was easy. In order to avoid the weird styling ‘pops’ present on some websites when initially loading with slow connections, it’s best to place all your most critical styling inline and then load your external CSS once everything else has loaded.</p> + +<p>On top of that, I decided to also implement Filament Group’s loadCSS function to load my CSS asynchronously. If you are not currently using this in any of your projects; stop reading this and go do it! It’s a game changer.</p> + +<h3 id="critical-javascript">Critical JavaScript</h3> + +<p>My personal site only uses a small amount of JavaScript on the article post Jekyll template pages. By using the defer property I can be sure to load the IntersectionObserver API polyfill after the rest of the DOM as finished loading.</p> + +<pre><code><script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver" defer> </code></pre> + <p>I could probably optimize this further by only calling these scripts if an image is actually present in the article post, but this fits my needs nicely as is.</p> -<h3>Responsive Images</h3> -<p>The only images I use are those included in supported blog posts, so the first step was making sure to only call <code>iolazy.min.js</code> on those specific template pages. The next step was defaulting to <code>webp</code> image formats with a lossless <code>jpg</code> fall-back with the help of the <code>picture</code> element:</p> -<p><span class="sidenote">I've also included responsive image sizes for further optimization based on screen size and loading speeds.</span></p> -<pre><code><figure> -<picture - <source type="image/webp" - data-srcset=" - /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_200.webp 200w, - /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_1400.webp 1400w" - class="lazyload"/> - <img - sizes="(max-width: 1400px) 100vw, 1400px" - data-srcset=" - /images/articles/flat-design-toggles_qfre51_c_scale,w_200.webp 200w, - /images/articles/flat-design-toggles_qfre51_c_scale,w_727.webp 727w, - /images/articles/flat-design-toggles_qfre51_c_scale,w_1065.webp 1065w, - /images/articles/flat-design-toggles_qfre51_c_scale,w_1400.webp 1400w" - src="/images/placeholder.webp" - alt="Toggles Comparison" - class="lazyload"/> -</picture> -</figure> + +<h3 id="responsive-images">Responsive Images</h3> + +<p>The only images I use are those included in supported blog posts, so the first step was making sure to only call iolazy.min.js on those specific template pages. The next step was defaulting to webp image formats with a lossless jpg fall-back with the help of the picture element:</p> + +<p>I’ve also included responsive image sizes for further optimization based on screen size and loading speeds.</p> + +<pre><code><figure> +<picture + <source type="image/webp" + data-srcset=" + /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_200.webp 200w, + /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_1400.webp 1400w" + class="lazyload"/> + <img + sizes="(max-width: 1400px) 100vw, 1400px" + data-srcset=" + /images/articles/flat-design-toggles_qfre51_c_scale,w_200.webp 200w, + /images/articles/flat-design-toggles_qfre51_c_scale,w_727.webp 727w, + /images/articles/flat-design-toggles_qfre51_c_scale,w_1065.webp 1065w, + /images/articles/flat-design-toggles_qfre51_c_scale,w_1400.webp 1400w" + src="/images/placeholder.webp" + alt="Toggles Comparison" + class="lazyload"/> +</picture> +</figure> </code></pre> -<p>What about users with JavaScript disabled I hear you ask? It's time for <code>noscript</code> to save the day:</p> -<pre><code><noscript> - <picture> - <source type="image/webp" - srcset=" - /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_200.webp 200w, - /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_1400.webp 1400w"> - <img - sizes="(max-width: 1400px) 100vw, 1400px" - srcset=" - /images/articles/flat-design-toggles_qfre51_c_scale,w_200.webp 200w, - /images/articles/flat-design-toggles_qfre51_c_scale,w_727.webp 727w, - /images/articles/flat-design-toggles_qfre51_c_scale,w_1065.webp 1065w, - /images/articles/flat-design-toggles_qfre51_c_scale,w_1400.webp 1400w" - src="/images/articles/flat-design-toggles_qfre51_c_scale,w_1400.webp" - alt="Toggles Comparison"/> - </picture> -</noscript> + +<p>What about users with JavaScript disabled I hear you ask? It’s time for noscript to save the day:</p> + +<pre><code><noscript> + <picture> + <source type="image/webp" + srcset=" + /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_200.webp 200w, + /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_1400.webp 1400w"> + <img + sizes="(max-width: 1400px) 100vw, 1400px" + srcset=" + /images/articles/flat-design-toggles_qfre51_c_scale,w_200.webp 200w, + /images/articles/flat-design-toggles_qfre51_c_scale,w_727.webp 727w, + /images/articles/flat-design-toggles_qfre51_c_scale,w_1065.webp 1065w, + /images/articles/flat-design-toggles_qfre51_c_scale,w_1400.webp 1400w" + src="/images/articles/flat-design-toggles_qfre51_c_scale,w_1400.webp" + alt="Toggles Comparison"/> + </picture> +</noscript> </code></pre> -<h3>HTTPS & Caching</h3> -<p>The Lighthouse audit also suggested implementing an SSL certificate (something I've been meaning to do for a while anyway) and also utilize CDN caching. So it was Cloudflare to the rescue!</p> -<p>Since my website is hosted through Github, setting up a <em>free</em> SSL certificate and enabling site-wide caching was a breeze. If you're interested in setting this up yourself, step-by-step instructions can be found <a href="https://gist.github.com/cvan/8630f847f579f90e0c014dc5199c337b">here</a>.</p> + +<h3 id="https-caching">HTTPS & Caching</h3> + +<p>The Lighthouse audit also suggested implementing an SSL certificate (something I’ve been meaning to do for a while anyway) and also utilize CDN caching. So it was Cloudflare to the rescue!</p> + +<p>Since my website is hosted through Github, setting up a <em>free</em> SSL certificate and enabling site-wide caching was a breeze. If you’re interested in setting this up yourself, step-by-step instructions can be found here.</p> + <p>This simple update helped boost my best practices score from a 69 to a 94. Yet another performance enhancement you should be enabling for all your current and future projects!</p> -<h2>Performance Happiness</h2> -<p>Overall I'm pretty content with the <strong>major</strong> performance boost my site has received from these fairly <em>minor</em> updates and I hope this article inspires other designers and developers to jump into updating their own site/app performance speeds. The pay-off is truly worth it!</p> -<h3>Some Extra Reading Material</h3> + +<h2 id="performance-happiness">Performance Happiness</h2> + +<p>Overall I’m pretty content with the <strong>major</strong> performance boost my site has received from these fairly <em>minor</em> updates and I hope this article inspires other designers and developers to jump into updating their own site/app performance speeds. The pay-off is truly worth it!</p> + +<h3 id="some-extra-reading-material">Some Extra Reading Material</h3> + <ul> -<li><a href="https://www.amazon.ca/Web-Performance-Action-Building-Faster/dp/1617293776/ref=sr_1_1?ie=UTF8&qid=1510585897&sr=8-1&keywords=web+performance+in+action">Web Performance in Action</a> by <i>Jeremy Wagner</i></li> -<li><a href="https://www.amazon.ca/Responsible-Responsive-Design-Scott-Jehl/dp/1937557162/ref=sr_1_1?s=books&ie=UTF8&qid=1510585972&sr=1-1&keywords=responsible+responsive+design">Responsible Responsive Design</a> by <i>Scott Jehl</i></li> -<li><a href="https://www.amazon.ca/Designing-Progressive-Enhancement-Building-Everyone/dp/0321658884/ref=sr_1_1?s=books&ie=UTF8&qid=1510586005&sr=1-1">Designing with Progressive Enhancement: Building the Web that Works for Everyone</a> by <i>Todd Parker, Scott Jehl, Maggie Costello Wachs, Patty Toland</i></li> +<li>Web Performance in Action by Jeremy Wagner</li> +<li>Responsible Responsive Design by Scott Jehl</li> +<li>Designing with Progressive Enhancement: Building the Web that Works for Everyone by Todd Parker, Scott Jehl, Maggie Costello Wachs, Patty Toland</li> </ul> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/cheap-portable-pi/index.html b/build/cheap-portable-pi/index.html index 8d49827..5da494c 100644 --- a/build/cheap-portable-pi/index.html +++ b/build/cheap-portable-pi/index.html @@ -1,40 +1,53 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal</h1> +<h1 id="portable-pi-cheap-raspberry-pi-zero-hacker-terminal">Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal</h1> + <p>2020-09-16</p> -<p><em>I recently came across <a href="https://n-o-d-e.net/zeroterminal3.html">the incredibly cool design</a> for an "ultimate Raspberry Pi computer"</em> by NODE and was inspired to create my own "portable" Pi device. Although, with my concept, I decided to set a few restrictions on the build:</p> + +<p><em>I recently came across <a href="https://n-o-d-e.net/zeroterminal3.html">the incredibly cool design</a> for an “ultimate Raspberry Pi computer”</em> by NODE and was inspired to create my own “portable” Pi device. Although, with my concept, I decided to set a few restrictions on the build:</p> + <ul> <li>I wanted to keep the total cost as low as possible + <ul> <li>including the Pi Zero <em>and</em> extra hardware</li> -</ul> -</li> +</ul></li> <li>I wanted to avoid any custom casings or need for 3D printed materials</li> -<li>I wanted to make the full design extremely portable / lightweight</li> +<li>I wanted to make the full design extremely portable / lightweight</li> <li>I wanted to keep the build as user-friendly as possible (no soldering, odd hacks etc.)</li> </ul> -<p>With these constraints put in place, I built my very own Raspberry Pi Zero "hacker" terminal. You can see the finished product below:</p> + +<p>With these constraints put in place, I built my very own Raspberry Pi Zero “hacker” terminal. You can see the finished product below:</p> + <p><img src="/public/images/portable-pi-1.webp" alt="Portable Pi front" /></p> + <p><img src="/public/images/portable-pi-2.webp" alt="Portable Pi back" /></p> -<p>I'm pretty happy with the final outcome and best of all - you can easily recreate this yourself with little-to-no effort!</p> -<p>So enough chit-chat - let's build this bad-boy!</p> -<blockquote><p><strong>Note:</strong> Most items in the hardware section are Amazon affiliate links</p> + +<p>I’m pretty happy with the final outcome and best of all - you can easily recreate this yourself with little-to-no effort!</p> + +<p>So enough chit-chat - let’s build this bad-boy!</p> + +<blockquote> +<p><strong>Note:</strong> Most items in the hardware section are Amazon affiliate links</p> </blockquote> -<h2>Table of Contents</h2> + +<h2 id="table-of-contents">Table of Contents</h2> + <ol> <li><a href="#expectations">Setting Expectations</a></li> <li><a href="#hardware">The Hardware</a></li> @@ -42,35 +55,51 @@ <li><a href="#setup">Getting Setup</a></li> <li><a href="#summary">Final Summary</a></li> </ol> -<p><h2 id="expectations">Setting Expectations</h2></p> -<p><strong>This hardware will not</strong> replace your laptop or any other "high-powered" portable device. Honestly, you're mobile phone would (most likely) work better in terms of a compact-sized computer. The concept behind this "portable pi" project was to make something <em>for fun</em>.</p> -<p>Please reserve any sassy comments about how buying a cheap $50 laptop off eBay would be more efficient than building out something like I have done here. You're missing the point entirely.</p> -<p>Moving on for those still interested... </p> -<p><h2 id="hardware">The Hardware</h2></p> -<p>I live in Canada, so some of the options are based on available hardware near my location. You're likely to find similar hardware close to your own country for better pricing / shipping costs.</p> -<blockquote><p><strong>Note</strong>: I've decided to use a wireless, USB dongle-based keyboard. You can opt to use a bluetooth-based keyboard, but I just find them more trouble than they are worth (keeping a charge, losing connections, interference from other devices)</p> + +<p><strong>This hardware will not</strong> replace your laptop or any other “high-powered” portable device. Honestly, you’re mobile phone would (most likely) work better in terms of a compact-sized computer. The concept behind this “portable pi” project was to make something <em>for fun</em>.</p> + +<p>Please reserve any sassy comments about how buying a cheap $50 laptop off eBay would be more efficient than building out something like I have done here. You’re missing the point entirely.</p> + +<p>Moving on for those still interested… </p> + +<p>I live in Canada, so some of the options are based on available hardware near my location. You’re likely to find similar hardware close to your own country for better pricing / shipping costs.</p> + +<blockquote> +<p><strong>Note</strong>: I’ve decided to use a wireless, USB dongle-based keyboard. You can opt to use a bluetooth-based keyboard, but I just find them more trouble than they are worth (keeping a charge, losing connections, interference from other devices)</p> </blockquote> + <ul> <li>SBC: <a href="https://amzn.to/3jCVXHG">Raspberry Pi Zero WH</a></li> -<li>Storage / OS: <a href="https://amzn.to/2GHm01R">64GB Micro SD Card</a> (Always have an SD backup!)</li> +<li>Storage / OS: <a href="https://amzn.to/2GHm01R">64GB Micro SD Card</a> (Always have an SD backup!)</li> <li>Battery HAT: <a href="https://amzn.to/3jGq8xp">Li-ion Battery HAT</a></li> <li>Battery: <em>This depends on your location. I was able to order <a href="https://www.walmart.ca/en/ip/Brand-New-4-Pcs-2500mAh-TR14500-3-7V-Rechargeable-Li-ion-Battery-for-Flashlight-Torch/PRD3Z73LMZZ3VK9">online through Walmart</a>, but if you live in the USA there are plenty of battery-specific vendors available. Find whatever works best for your needs!</em></li> <li>Display: <a href="https://www.buyapi.ca/product/3-5-inch-raspberry-pi-tft-display/">KeDei 3.5-inch TFT Display</a></li> <li>Keyboard: <a href="https://amzn.to/2Gqkwt6">Mini USB Wireless Keyboard</a></li> <li>Adapter: <a href="https://amzn.to/36I6T3c">Micro USB OTG Cable</a></li> </ul> -<h4>Raspberry Pi Zero WH</h4> + +<h4 id="raspberry-pi-zero-wh">Raspberry Pi Zero WH</h4> + <p>You will need a Raspberry Pi Zero W with GPIO header pins already soldered on to the board. (You could also do this yourself manually if you have the tools and skill to do so)</p> -<h4>Li-Ion Battery HAT</h4> + +<h4 id="li-ion-battery-hat">Li-Ion Battery HAT</h4> + <p>This HAT holds a single li-ion battery and for our purposes will connect with our Pi Zero via the GPIO header pins. You could also look into double-set battery HATs if that is something you would prefer - for my needs a single rechargeable battery works fine.</p> -<p>Since our main "OS" is purely terminal based, I find you don't really need a li-ion battery with a massive amount of power storage. 2500mAh will easily last a handful of hours mucking about with emails, files and web browsing. Plus, you can always carry a few extras for swapping out on-the-go.</p> -<h4>3.5-inch TFT Display</h4> -<p>A simple and fairly cheap touchscreen display. We won't require our display to render videos or pretty graphics (since we will be entirely terminal-based) so this works just fine for our needs. I am using version 6.3 for this build.</p> -<h4>Micro USB OTG Adapter</h4> + +<p>Since our main “OS” is purely terminal based, I find you don’t really need a li-ion battery with a massive amount of power storage. 2500mAh will easily last a handful of hours mucking about with emails, files and web browsing. Plus, you can always carry a few extras for swapping out on-the-go.</p> + +<h4 id="3.5-inch-tft-display">3.5-inch TFT Display</h4> + +<p>A simple and fairly cheap touchscreen display. We won’t require our display to render videos or pretty graphics (since we will be entirely terminal-based) so this works just fine for our needs. I am using version 6.3 for this build.</p> + +<h4 id="micro-usb-otg-adapter">Micro USB OTG Adapter</h4> + <p>As mentioned above, this item is optional if you feel more comfortable with using a pure bluetooth keyboard. I just personally prefer this method.</p> -<h4>Wireless Keyboard</h4> -<p>In my product demo image at the beginning of the article, I'm actually using an old Logitech wireless keyboard since this one still hasn't arrived. I plan to swap them out once I have it - the Logitech is far to large to be deemed "portable".</p> -<p><h2 id="software">The Software</h2></p> + +<h4 id="wireless-keyboard">Wireless Keyboard</h4> + +<p>In my product demo image at the beginning of the article, I’m actually using an old Logitech wireless keyboard since this one still hasn’t arrived. I plan to swap them out once I have it - the Logitech is far to large to be deemed “portable”.</p> + <ul> <li>Operating System: <a href="https://www.raspberrypi.org/downloads/raspberry-pi-os/">Raspberry Pi OS Lite</a></li> <li>Display Driver: <a href="http://kedei.net/raspberry/raspberry.html">KeDei 3.5 Driver</a></li> @@ -79,79 +108,99 @@ <li>Text Editor: <a href="https://www.nano-editor.org/">Nano</a></li> <li>Code Editor: <a href="https://www.vim.org/">Vim</a></li> </ul> -<p><h2 id="setup">Getting Setup</h2></p> -<p>I will be setting up this "portable pi" via <a href="https://www.raspberrypi.org/documentation/configuration/wireless/headless.md">headless installation</a> with my main <a href="https://uglyduck.ca/my-pi-desktop/">Raspberry Pi 4 desktop</a>. Included below are some quick instructions on how to setup the Raspberry Pi Zero for <code>ssh</code> access.</p> -<h4>Preparing the microSD card</h4> + +<p>I will be setting up this “portable pi” via <a href="https://www.raspberrypi.org/documentation/configuration/wireless/headless.md">headless installation</a> with my main <a href="https://uglyduck.ca/my-pi-desktop/">Raspberry Pi 4 desktop</a>. Included below are some quick instructions on how to setup the Raspberry Pi Zero for <code>ssh</code> access.</p> + +<h4 id="preparing-the-microsd-card">Preparing the microSD card</h4> + <ul> -<li>Use Raspberry Pi Imager to write the Raspberry Pi Lite OS to your microSD card +<li><p>Use Raspberry Pi Imager to write the Raspberry Pi Lite OS to your microSD card + <ul> <li>Once complete, remove the microSD storage device and then re-connect it</li> -</ul> -</li> -<li>Navigate to the <code>boot</code> folder of the microSD device - we will be adding 2 files here +</ul></p></li> +<li><p>Navigate to the <code>boot</code> folder of the microSD device - we will be adding 2 files here + <ul> <li>First add a completely empty file and name it <code>ssh</code> (no file extension)</li> <li>Next add an empty file named <code>wpa_supplicant.conf</code></li> -</ul> -</li> -<li>Open the <code>wpa_supplicant.conf</code> file in a code / text editor and paste the following (be sure to change <code>country</code> to your proper country code, as well as properly setting your network name / password):</li> -</ul> -<pre><code>ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev +</ul></p></li> +<li><p>Open the <code>wpa_supplicant.conf</code> file in a code / text editor and paste the following (be sure to change <code>country</code> to your proper country code, as well as properly setting your network name / password):</p> + +<p>ctrl<em>interface=DIR=/var/run/wpa</em>supplicant GROUP=netdev update_config=1 -country=US +country=US</p> -network={ - ssid="Your network name/SSID" - psk="Your WPA/WPA2 security key" +<p>network={ + ssid="Your network name/SSID” + psk="Your WPA/WPA2 security key” key_mgmt=WPA-PSK -} -</code></pre> -<ul> -<li>Unmount the microSD device, then place the microSD card in your RPi Zero</li> -<li>Assemble the Raspberry Pi Zero with the Battery HAT (li-ion battery attached) connected via GPIO pins, and the 3.5 display connected on-top of the battery HAT's pins</li> -<li>Turn on the battery HAT switch to power the RPi Zero. Give the device roughly 90 seconds to perform the initial boot</li> +}</p></li> +<li><p>Unmount the microSD device, then place the microSD card in your RPi Zero</p></li> +<li><p>Assemble the Raspberry Pi Zero with the Battery HAT (li-ion battery attached) connected via GPIO pins, and the 3.5 display connected on-top of the battery HAT’s pins</p></li> +<li><p>Turn on the battery HAT switch to power the RPi Zero. Give the device roughly 90 seconds to perform the initial boot</p></li> </ul> -<blockquote><p><strong>Note</strong>: the display will turn on but only show a white screen - this is normal</p> + +<blockquote> +<p><strong>Note</strong>: the display will turn on but only show a white screen - this is normal</p> </blockquote> -<h4>Connecting to your Zero via SSH</h4> + +<h4 id="connecting-to-your-zero-via-ssh">Connecting to your Zero via SSH</h4> + <p>Open the terminal on your Raspberry Pi desktop and enter the following command:</p> + <pre><code>ssh pi@raspberrypi.local </code></pre> -<p>You will then be asked if you wish to trust this device (say yes), then prompted for the <code>pi</code> user's password - which is <code>raspberry</code>. After a moment you will be directly connected to your Raspberry Pi Zero. Hooray!</p> + +<p>You will then be asked if you wish to trust this device (say yes), then prompted for the <code>pi</code> user’s password - which is <code>raspberry</code>. After a moment you will be directly connected to your Raspberry Pi Zero. Hooray!</p> + <p>We just want to make a couple small configuration changes before going forward (mostly for security):</p> + <ol> <li>Run the command <code>sudo raspi-config</code></li> -<li>Select "Change User Password" from the menu and change the password</li> -</ol> -<p> <img src="/public/images/raspi-config.webp" alt="Raspberry config" /></p> +<li>Select “Change User Password” from the menu and change the password +<img src="/public/images/raspi-config.webp" alt="Raspberry config" /></li> +<li>After that, select “Network Options” and change your device name -<ol start="3"> -<li>After that, select "Network Options" and change your device name</li> +<ul> +<li>This will avoid any conflicts of connecting to newer RPi devices down the line</li> +</ul></li> </ol> -<p> - This will avoid any conflicts of connecting to newer RPi devices down the line</p> -<p>That's it!</p> -<h4>Installing display driver</h4> -<p>Next we will need to download and run the drivers needed for our 3.5-inch display to play nicely with our Pi Zero (just a blank white screen doesn't help us much). While connected to our RPi Zero via SSH, run the following commands:</p> -<pre><code>wget http://kedei.net/raspberry/v6_1/LCD_show_v6_1_3.tar.gz + +<p>That’s it!</p> + +<h4 id="installing-display-driver">Installing display driver</h4> + +<p>Next we will need to download and run the drivers needed for our 3.5-inch display to play nicely with our Pi Zero (just a blank white screen doesn’t help us much). While connected to our RPi Zero via SSH, run the following commands:</p> + +<pre><code>wget http://kedei.net/raspberry/v6_1/LCD_show_v6_1_3.tar.gz </code></pre> + <p>If you have snail-paced rural internet like I do, now is a good time to go and grab a coffee while this download completes.</p> + <p>Once the download has finished, extract the contents and navigate to the new directory and install the driver:</p> + <pre><code>sudo tar xzf LCD_show_v6_1_3.tar.gz cd LCD_show_v6_1_3 -sudo ./LCD35_v +sudo ./LCD35_v </code></pre> + <p>Once completed, the RPi Zero will reboot and everything should work as expected!</p> -<h4>Installing software</h4> -<p>I'm not going to jump into heavy details about installing terminal-based software for this setup. The links I've attached in the software section should provide you with more than enough information to get started. For reference, I'm using a very basic set of applications:</p> + +<h4 id="installing-software">Installing software</h4> + +<p>I’m not going to jump into heavy details about installing terminal-based software for this setup. The links I’ve attached in the software section should provide you with more than enough information to get started. For reference, I’m using a very basic set of applications:</p> + <ul> <li>Neomutt (emails)</li> <li>Lynx (quick and simple web browsing)</li> -<li>Nano (writing notes / blog posts in a hurry)</li> +<li>Nano (writing notes / blog posts in a hurry)</li> <li>Vim (making any config edits or project work)</li> </ul> -<p><h2 id="summary">Final Summary</h2></p> -<p>There you have it - a terminal-based, portable Raspberry Pi Zero "hacker" device. </p> -<p>Is it practical? Not really. Can it replace any other <em>portable</em> device you might own? Probably not. Is it fun to make and experiment on? You bet! And in the end - isn't that what matters most with pet Pi projects?</p> + +<p>There you have it - a terminal-based, portable Raspberry Pi Zero “hacker” device. </p> + +<p>Is it practical? Not really. Can it replace any other <em>portable</em> device you might own? Probably not. Is it fun to make and experiment on? You bet! And in the end - isn’t that what matters most with pet Pi projects?</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/chromebook-web-dev/index.html b/build/chromebook-web-dev/index.html index 66e7504..9c4ddac 100644 --- a/build/chromebook-web-dev/index.html +++ b/build/chromebook-web-dev/index.html @@ -1,50 +1,71 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Web Development on a $200 Chromebook</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Web Development on a $200 Chromebook</h1> +<h1 id="web-development-on-a-200-chromebook">Web Development on a $200 Chromebook</h1> + <p>2020-01-07</p> + <p><em>This blog post was written, edited and tested locally</em> on a cheap $200 Chromebook. The article draft was composed in Sublime Text. Jekyll (the SSG this website uses) was generated via the Linux Beta Terminal running alongside Chrome OS. It was then pushed to the Github repo from the same Terminal and published automatically to Netlify. But more on that later.</p> + <p>First, we need to ask an important question: why use a Chromebook for web development? Maybe a better question might be: why not?</p> -<h2>Mild interest turned into an experiment</h2> + +<h2 id="mild-interest-turned-into-an-experiment">Mild interest turned into an experiment</h2> + <p>Looking from the outside, I always liked the concept of the Chrome OS ecosystem. It had a solid list of features that appealed to me, specifically:</p> + <ul> <li>Blazingly fast boot times</li> <li>Long lasting battery life (roughly 8 hours with consistent usage)</li> -<li>Extremely cheap entry point for "low-end" devices</li> -<li>And, more recently, support for Android & Linux apps</li> +<li>Extremely cheap entry point for “low-end” devices</li> +<li>And, more recently, support for Android & Linux apps</li> </ul> -<p>The obvious downside to using a Chromebook is the lack of a "real" operating system. A Windows, Mac or Linux machine will always have more flexibility and depth than a simple Chromebook. But I've found that simple is all I need - or want.</p> -<p><strong>Side note:</strong> <em>I wrote an article not to long ago about <a href="https://uglyduck.ca/stop-crawling-google/">blocking Google from my website</a> and I can see how this current post may come across as hypocritical. Since the search/AMP teams are not that same as the Chrome OS / Chromebook development team, I can view each of those projects based on their own merits. If you still view me as a hypocrite, that's fine</em> :)</p> -<h2>My use case (YMMV)</h2> + +<p>The obvious downside to using a Chromebook is the lack of a “real” operating system. A Windows, Mac or Linux machine will always have more flexibility and depth than a simple Chromebook. But I’ve found that simple is all I need - or want.</p> + +<p><strong>Side note:</strong> <em>I wrote an article not to long ago about <a href="https://uglyduck.ca/stop-crawling-google/">blocking Google from my website</a> and I can see how this current post may come across as hypocritical. Since the search/AMP teams are not that same as the Chrome OS / Chromebook development team, I can view each of those projects based on their own merits. If you still view me as a hypocrite, that’s fine</em> :)</p> + +<h2 id="my-use-case-ymmv">My use case (YMMV)</h2> + <p>I ended up grabbing the <a href="https://amzn.to/2Xvx20q">Acer 11 N7 Chromebook</a> off of Amazon for $200 (on sale and in Canuck bucks). It comes packed with 4GB of RAM with an Intel Celeron (1.6GHz) and 32GB of storage. Fairly barebones stuff.</p> + <p>My day-to-day use cases are fairly straightforward. I work with git, static site generators, WordPress locally and on staging servers, edit documents, send emails and watch stupid YouTube videos. You know, the basics. My dirt-cheap Chromebook handles all of these things with ease.</p> + <p>My Chromebook setup is as follows:</p> + <ul> <li>Linux Beta (ships with <code>git</code>, etc)</li> <li>Sublime Text (you can always use VSCode if you prefer)</li> <li>Terminal</li> <li>Local by Flywheel (local WordPress development)</li> -<li>Figma in Chrome (UI design / mockups)</li> +<li>Figma in Chrome (UI design / mockups)</li> </ul> -<p>That's it. I understand other developers may require a lot more than this, but with Linux running in a container alongside Chrome OS you can pretty much run anything you could possibly need (excluding exclusive Mac & Windows apps, of course).</p> -<h2>Can a $200 Chromebook be your next web dev machine?</h2> + +<p>That’s it. I understand other developers may require a lot more than this, but with Linux running in a container alongside Chrome OS you can pretty much run anything you could possibly need (excluding exclusive Mac & Windows apps, of course).</p> + +<h2 id="can-a-200-chromebook-be-your-next-web-dev-machine">Can a $200 Chromebook be your next web dev machine?</h2> + <p>For me? Yes. For you? Maybe.</p> -<p>I mean, it really just depends on what you need your machine to accomplish. If you can be productive and the apps you use are just as fast and responsive as they would be on a more robust OS - then I say go for it. You don't even need to be a cheapo like me, instead you can snag a fancier Chromebook or Google's own Pixelbook. There are a ton of options when it comes to Chrome OS based devices.</p> + +<p>I mean, it really just depends on what you need your machine to accomplish. If you can be productive and the apps you use are just as fast and responsive as they would be on a more robust OS - then I say go for it. You don’t even need to be a cheapo like me, instead you can snag a fancier Chromebook or Google’s own Pixelbook. There are a ton of options when it comes to Chrome OS based devices.</p> + <p>If you wanted to experiment to see if the Chrome OS ecosystem could work with your development flow, you can always check out something like <a href="https://www.neverware.com/freedownload">CloudReady</a> to test on your current machine before pulling the trigger.</p> -<p>In the end, it doesn't matter what operating system or apps you use to get your development work done - so long as it is productive and easy-to-use.</p> + +<p>In the end, it doesn’t matter what operating system or apps you use to get your development work done - so long as it is productive and easy-to-use.</p> + <p>For my current situation, all I need is my cheap little Chromebook.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/colophon/index.html b/build/colophon/index.html index 57a6e54..f3d92c2 100644 --- a/build/colophon/index.html +++ b/build/colophon/index.html @@ -1,32 +1,64 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Colophon</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Colophon</h1> -<p>This website is a collection of living, breathing documents. As I mention on the homepage, this place is better referred to as an online <a href="/dump">brain dump</a>. It might change over time. Styles might come and go. I can't help that, since tinkering with my personal blog is something I am very fond of. It's almost therapeutic.</p> +<h1 id="colophon">Colophon</h1> + +<p>This website is a collection of living, breathing documents. As I mention on the homepage, this place is better referred to as an online <a href="/dump">brain dump</a>. It might change over time. Styles might come and go. I can’t help that, since tinkering with my personal blog is something I am very fond of. It’s almost therapeutic.</p> + <p>For those interested I try to keep the details of the blog up-to-date with the information below:</p> -<h2>Website Fast Facts</h2> + +<h2 id="website-fast-facts">Website Fast Facts</h2> + <table> -<tr><th>Parameter </th><th>Source </th></tr> -<tr><td>Built with:</td><td><a href="https://barf.bt.ht">barf</a></td></tr> -<tr><td>Hosted on:</td><td><a href="https://srht.site/">SourceHut Pages</a></td></tr> -<tr><td>Source code available:</td><td><a href="https://git.sr.ht/~bt/bt.ht">SourceHut</a></td></tr> -<tr><td>Licensed under:</td><td><a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a></td></tr> -<tr><td>Developed on:</td><td>ThinkPad X201</td></tr> -<tr><td>Operating system:</td><td>OpenBSD</td></tr> -</table><footer role="contentinfo"> +<thead> +<tr> +<th>Parameter</th> +<th>Source</th> +</tr> +</thead> + +<tbody> +<tr> +<td>Built with:</td> +<td><a href="https://barf.bt.ht">barf</a></td> +</tr> +<tr> +<td>Hosted on:</td> +<td><a href="https://srht.site/">SourceHut Pages</a></td> +</tr> +<tr> +<td>Source code available:</td> +<td><a href="https://git.sr.ht/~bt/bt.ht">SourceHut</a></td> +</tr> +<tr> +<td>Licensed under:</td> +<td><a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a></td> +</tr> +<tr> +<td>Developed on:</td> +<td>ThinkPad X201</td> +</tr> +<tr> +<td>Operating system:</td> +<td>OpenBSD</td> +</tr> +</tbody> +</table> +<footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> <li><a href="/">Home</a></li> diff --git a/build/css-js-mistake/index.html b/build/css-js-mistake/index.html index c256685..8b7f9c1 100644 --- a/build/css-js-mistake/index.html +++ b/build/css-js-mistake/index.html @@ -1,44 +1,68 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>A Reality Where CSS and JavaScript Don't Exist</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>A Reality Where CSS and JavaScript Don't Exist</h1> +<h1 id="a-reality-where-css-and-javascript-dont-exist">A Reality Where CSS and JavaScript Don’t Exist</h1> + <p>2021-11-03</p> -<p><em>This is my personal opinion. Please leave your pitchforks at the door...</em></p> -<p>I love CSS. I can spend hours deep diving into a website's CSS system and never find myself getting bored. It's pretty amazing to see the problems other designers are able to solve with just a little bit of custom styling and determination.</p> -<p>I like JavaScript. It serves it's purpose and makes complex functionality on the web easier to wrangle in and understand.</p> + +<p><em>This is my personal opinion. Please leave your pitchforks at the door…</em></p> + +<p>I love CSS. I can spend hours deep diving into a website’s CSS system and never find myself getting bored. It’s pretty amazing to see the problems other designers are able to solve with just a little bit of custom styling and determination.</p> + +<p>I like JavaScript. It serves it’s purpose and makes complex functionality on the web easier to wrangle in and understand.</p> + <p><em>But I think both should have never come into existence</em>.</p> -<h3>Heresey!</h3> -<p>I know, I know - this website itself uses a little, teeny-tiny amount of CSS. I am indeed a hypocrite - but did I ever claim that I <em>practice</em> what I preach? At least this personal website is JavaScript-free... (apart from a handful of CodePen examples embedded in some of the tutorials).</p> -<h3>Moving On...</h3> -<p>I'm not a complete idiot. I realize that the web has evolved significantly over the years, and to propose that it should have remained stagnant with it's original concept of "paged documents" is foolish. But that <em>is</em> what I'm suggesting - at least, partially.</p> -<h3>Consistent & Boring</h3> -<p>Out there in the multiverse is a reality where the web is a complete borefest. Information is the only driving factor to visit a "web page" and PWAs have never come to exist. Custom styling, fancy interactive animations and single-page functionality isn't even something that can be implemented. The web is just a system of HTML/plaintext documents sharing information and data. Users browse the web in quick bursts to satisfy their queries or read something interesting. Then, they return to <em>real life</em>.</p> + +<h3 id="heresey">Heresey!</h3> + +<p>I know, I know - this website itself uses a little, teeny-tiny amount of CSS. I am indeed a hypocrite - but did I ever claim that I <em>practice</em> what I preach? At least this personal website is JavaScript-free… (apart from a handful of CodePen examples embedded in some of the tutorials).</p> + +<h3 id="moving-on">Moving On…</h3> + +<p>I’m not a complete idiot. I realize that the web has evolved significantly over the years, and to propose that it should have remained stagnant with it’s original concept of “paged documents” is foolish. But that <em>is</em> what I’m suggesting - at least, partially.</p> + +<h3 id="consistent-boring">Consistent & Boring</h3> + +<p>Out there in the multiverse is a reality where the web is a complete borefest. Information is the only driving factor to visit a “web page” and PWAs have never come to exist. Custom styling, fancy interactive animations and single-page functionality isn’t even something that can be implemented. The web is just a system of HTML/plaintext documents sharing information and data. Users browse the web in quick bursts to satisfy their queries or read something interesting. Then, they return to <em>real life</em>.</p> + <p>My goodness what a <em>beautiful</em> reality that would be. Consistent, boring and wonderful.</p> -<h3>"Wait - Aren't You a Designer?"</h3> + +<h3 id="wait---arent-you-a-designer">“Wait - Aren’t You a Designer?”</h3> + <p>Yes - and again more hypocrisy. My livelihood depends on software requiring custom UIs and properly audited UX flows. By suggesting this change I am throwing myself under the bus and putting myself out of work. All my experience would become worthless and the world of software <em>design</em> would cease to exist.</p> + <p><strong>I would be okay with that</strong>. If it meant the web as a whole was a better place - so be it.</p> -<h3>A Look at the "New World"</h3> -<p>Sometimes it is easier to visualize a concept instead of just discussing it. Below you can find an example of a "converted" website[^1] showcasing how sites would look and feel in this design-less reality:</p> + +<h3 id="a-look-at-the-new-world">A Look at the “New World”</h3> + +<p>Sometimes it is easier to visualize a concept instead of just discussing it. Below you can find an example of a “converted” website[^1] showcasing how sites would look and feel in this design-less reality:</p> + <ul> -<li>Wealthsimple: <a href="https://www.wealthsimple.com/en-ca/">Current Website</a> / <a href="/etc/html-only/wealthsimple/">New Version</a></li> +<li>Wealthsimple: <a href="https://www.wealthsimple.com/en-ca/">Current Website</a> / <a href="/etc/html-only/wealthsimple/">New Version</a></li> </ul> -<p>As you can see, all the <em>fluff</em> has been removed from the existing design and only the content remains. No scroll-jacking or extra JavaScript libraries are downloaded. Users can easily skim through all the content and screen readers won't struggle through any custom elements. It also loads incredibly fast.</p> -<p>Of course, to our[^2] eyes, this design might look ugly or seem as though the site's CSS failed to load - but in a reality where this is the standard, it is beautifully minimal. Either way, I find that this was at least a fun thought experiment and hopefully leaves you thinking about how the web <em>could have been</em> as well.</p> -<p>Now, back to designing UIs for the web...</p> -<h2>Refs</h2> + +<p>As you can see, all the <em>fluff</em> has been removed from the existing design and only the content remains. No scroll-jacking or extra JavaScript libraries are downloaded. Users can easily skim through all the content and screen readers won’t struggle through any custom elements. It also loads incredibly fast.</p> + +<p>Of course, to our[^2] eyes, this design might look ugly or seem as though the site’s CSS failed to load - but in a reality where this is the standard, it is beautifully minimal. Either way, I find that this was at least a fun thought experiment and hopefully leaves you thinking about how the web <em>could have been</em> as well.</p> + +<p>Now, back to designing UIs for the web…</p> + +<h2 id="refs">Refs</h2> + <ol> <li>Selected site based on my own personal preference</li> <li>Referring to current users of the web</li> diff --git a/build/css-slope-graphs/index.html b/build/css-slope-graphs/index.html index 0735119..e4e2bd8 100644 --- a/build/css-slope-graphs/index.html +++ b/build/css-slope-graphs/index.html @@ -1,70 +1,84 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>CSS Slope Graphs</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>CSS Slope Graphs</h1> +<h1 id="css-slope-graphs">CSS Slope Graphs</h1> + <p>2021-06-07</p> -<p><em>I am a huge sucker for simplistic and beautifully designed visual data on the web</em>. Most data tends to be graphed via line or bar systems - which is fine - but I think slope graphs are highly underrated. Let's change that, shall we?</p> -<h2>The Demo</h2> -<p>I'm basing this demo off the design patterns found in <a href="https://www.edwardtufte.com/tufte/books_vdqi">Edward Tufte's visualization work</a>, specifically his slope graph designs:</p> + +<p><em>I am a huge sucker for simplistic and beautifully designed visual data on the web</em>. Most data tends to be graphed via line or bar systems - which is fine - but I think slope graphs are highly underrated. Let’s change that, shall we?</p> + +<h2 id="the-demo">The Demo</h2> + +<p>I’m basing this demo off the design patterns found in <a href="https://www.edwardtufte.com/tufte/books_vdqi">Edward Tufte’s visualization work</a>, specifically his slope graph designs:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/jOBzXMe">Live CodePen Example</a></p> -<h2>The HTML</h2> + +<h2 id="the-html">The HTML</h2> + <p>For this concept we will actually be building this graph out of <code>tables</code> - crazy, right? The greatest benefit of rendering all the data inside of a <code>table</code> element is the ability to easily support smaller screens and mobile devices. Larger viewports will get to see the pretty slope graph, while those below a certain threshold will view a simple table.</p> + <p>(But more on that in the CSS section)</p> -<pre><code><p>Sales of the leading frozen pizza brands of the United States from 2011 to 2017 (in million US dollars) <br><em>Source: Statisa 2018</em></p> -<table> - <thead> - <tr> - <th>Pizza Brand</th> - <th>2011</th> - <th>2017</th> - </tr> - </thead> - <tbody> - <tr> - <td data-set="677.0">DiGiorno</td> - <td><span>677.0</span></td> - <td data-name="DiGiorno">1014.6</td> - </tr> - <tr> - <td data-set="294.8">Private Label</td> - <td><span>294.8</span></td> - <td data-name="Private Label">524.8</td> - </tr> - <tr> - <td data-set="286.1">Red Baron</td> - <td><span>286.1</span></td> - <td data-name="Red Baron">572.3</td> - </tr> - <tr> - <td data-set="257.9">Tombstone</td> - <td><span>257.9</span></td> - <td data-name="Tombstone">270.6</td> - </tr> - <tr> - <td data-set="164.5">Totino's Party Pizza</td> - <td><span>164.5</span></td> - <td data-name="Totino's Party Pizza">347.2</td> - </tr> - </tbody> -</table> + +<pre><code><p>Sales of the leading frozen pizza brands of the United States from 2011 to 2017 (in million US dollars) <br><em>Source: Statisa 2018</em></p> +<table> + <thead> + <tr> + <th>Pizza Brand</th> + <th>2011</th> + <th>2017</th> + </tr> + </thead> + <tbody> + <tr> + <td data-set="677.0">DiGiorno</td> + <td><span>677.0</span></td> + <td data-name="DiGiorno">1014.6</td> + </tr> + <tr> + <td data-set="294.8">Private Label</td> + <td><span>294.8</span></td> + <td data-name="Private Label">524.8</td> + </tr> + <tr> + <td data-set="286.1">Red Baron</td> + <td><span>286.1</span></td> + <td data-name="Red Baron">572.3</td> + </tr> + <tr> + <td data-set="257.9">Tombstone</td> + <td><span>257.9</span></td> + <td data-name="Tombstone">270.6</td> + </tr> + <tr> + <td data-set="164.5">Totino's Party Pizza</td> + <td><span>164.5</span></td> + <td data-name="Totino's Party Pizza">347.2</td> + </tr> + </tbody> +</table> </code></pre> + <p>As you can see, nothing too fancy is happpening here. Pay close attention to the <code>data-set</code> and <code>data-name</code> variables though - those will be important for the CSS portion of this design, mainly the rendering of the line elements.</p> -<h2>The CSS</h2> -<p>To avoid overwhelming your brain all-at-once, let's break the CSS down into bite-sized chunks, starting with the base styling:</p> -<pre><code>@import url('https://opentype.netlify.com/et-book/index.css'); + +<h2 id="the-css">The CSS</h2> + +<p>To avoid overwhelming your brain all-at-once, let’s break the CSS down into bite-sized chunks, starting with the base styling:</p> + +<pre><code>@import url('https://opentype.netlify.com/et-book/index.css'); * { box-sizing: border-box; } @@ -75,7 +89,7 @@ html { body { background: #fffff8; - font-family: "et-book", serif; + font-family: "et-book", serif; height: 100%; margin: 0 auto; max-width: 800px; @@ -93,115 +107,122 @@ table { width: 100%; } </code></pre> + <p>Pretty basic stuff.</p> -<p>Now we need to design how our slope graph will look on larger screens / desktops. For this instance, we will target these larger devices with a <code>min-width</code> media query of <code>800px</code>. The rest of the CSS might look a little confusing but I assure you it is quite simple.</p> + +<p>Now we need to design how our slope graph will look on larger screens / desktops. For this instance, we will target these larger devices with a <code>min-width</code> media query of <code>800px</code>. The rest of the CSS might look a little confusing but I assure you it is quite simple.</p> + <ol> -<li>On larger devices we hide the first <code>thead tr th</code> element with <code>display: none</code></li> -<li>The first and second <code>td</code> elements inside each <code>tbody</code> row need to be set as <code>position: absolute</code> to avoid duplicate content</li> -<li>The inner <code>span</code> that we include in our HTML inside the second <code>tbody tr td</code> also needs to be <code>display: none</code></li> -<li>Remember that <code>data-set</code> variable? We now use that for our <code>:before</code> pseudo element for <code>table tbody tr td:nth-of-type(1)</code></li> -<li>Remember that <code>data-name</code> variable? We now use that for our <code>:before</code> pseudo element for <code>table tbody tr td:nth-of-type(3)</code></li> -<li>After that, you can see the simple customization we include to render the angle / position of the slope lines and the corresponding labels</li> -</ol> -<pre><code>@media(min-width:800px) { +<li><p>On larger devices we hide the first <code>thead tr th</code> element with <code>display: none</code></p></li> +<li><p>The first and second <code>td</code> elements inside each <code>tbody</code> row need to be set as <code>position: absolute</code> to avoid duplicate content</p></li> +<li><p>The inner <code>span</code> that we include in our HTML inside the second <code>tbody tr td</code> also needs to be <code>display: none</code></p></li> +<li><p>Remember that <code>data-set</code> variable? We now use that for our <code>:before</code> pseudo element for <code>table tbody tr td:nth-of-type(1)</code></p></li> +<li><p>Remember that <code>data-name</code> variable? We now use that for our <code>:before</code> pseudo element for <code>table tbody tr td:nth-of-type(3)</code></p></li> +<li><p>After that, you can see the simple customization we include to render the angle / position of the slope lines and the corresponding labels</p> + +<p>@media(min-width:800px) { table { display: block; position: relative; margin-bottom: 25rem; - } + }</p> - table thead th { - border-bottom: 1px solid lightgrey; - font-size: 24px; - position: absolute; - top: -50px; - width: 45%; - } - table thead th:nth-child(1){ display: none; } - table thead th:nth-child(2){ left: 0; } - table thead th:nth-child(3){ right: 0; text-align: right; } +<pre><code>table thead th { + border-bottom: 1px solid lightgrey; + font-size: 24px; + position: absolute; + top: -50px; + width: 45%; +} +table thead th:nth-child(1){ display: none; } +table thead th:nth-child(2){ left: 0; } +table thead th:nth-child(3){ right: 0; text-align: right; } - table tbody tr td:nth-of-type(1), - table tbody tr td:nth-of-type(2) { position: absolute;} +table tbody tr td:nth-of-type(1), +table tbody tr td:nth-of-type(2) { position: absolute;} - table tbody tr td:nth-of-type(2) span { display: none; } - table tbody tr td:nth-of-type(1):before { - content: attr(data-set); - margin-right: 10px; - position: relative; - } +table tbody tr td:nth-of-type(2) span { display: none; } +table tbody tr td:nth-of-type(1):before { + content: attr(data-set); + margin-right: 10px; + position: relative; +} - table tbody tr td:nth-of-type(2) { padding-left: 10px; } +table tbody tr td:nth-of-type(2) { padding-left: 10px; } - table tbody tr td:nth-of-type(3) { - position: absolute; - right: 0; - } - table tbody tr td:nth-of-type(3):before { - content: attr(data-name); - margin-right: 10px; - position: relative; - } +table tbody tr td:nth-of-type(3) { + position: absolute; + right: 0; +} +table tbody tr td:nth-of-type(3):before { + content: attr(data-name); + margin-right: 10px; + position: relative; +} - /* Custom individual slopes -- Left */ - tbody tr:nth-child(1) td:nth-child(1), - tbody tr:nth-child(1) td:nth-child(2) { top: 60px; } - tbody tr:nth-child(2) td:nth-child(1), - tbody tr:nth-child(2) td:nth-child(2) { top: 140px; } - tbody tr:nth-child(3) td:nth-child(1), - tbody tr:nth-child(3) td:nth-child(2) { top: 165px; } - tbody tr:nth-child(4) td:nth-child(1), - tbody tr:nth-child(4) td:nth-child(2) { top: 220px; } - tbody tr:nth-child(5) td:nth-child(1), - tbody tr:nth-child(5) td:nth-child(2) { top: 270px; } - - /* Custom individual slopes -- Right */ - [data-name="DiGiorno"] { top: 0; } - [data-name="Red Baron"] { top: 65px; } - [data-name="Private Label"] { top: 100px; } - [data-name="Tombstone"] { top: 180px; } - [data-name="Totino's Party Pizza"] { top: 150px; } - - /* The custom visual lines */ - tbody tr:after { - background: black; - content: ''; - height: 1px; - left: 14.5%; - position: absolute; - width: 70%; - } - tbody tr:nth-child(1):after { - top: 40px; - transform: rotate(-6deg); - } - tbody tr:nth-child(2):after { - left: 17.5%; - top: 130px; - transform: rotate(-4deg); - width: 65%; - } - tbody tr:nth-child(3):after { - left: 15%; - top: 125px; - transform: rotate(-10.25deg); - width: 70%; - } - tbody tr:nth-child(4):after { - left: 16%; - top: 210px; - transform: rotate(-4deg); - width: 68%; - } - tbody tr:nth-child(5):after { - left: 22%; - top: 222px; - transform: rotate(-16deg); - width: 56%; - } +/* Custom individual slopes -- Left */ +tbody tr:nth-child(1) td:nth-child(1), +tbody tr:nth-child(1) td:nth-child(2) { top: 60px; } +tbody tr:nth-child(2) td:nth-child(1), +tbody tr:nth-child(2) td:nth-child(2) { top: 140px; } +tbody tr:nth-child(3) td:nth-child(1), +tbody tr:nth-child(3) td:nth-child(2) { top: 165px; } +tbody tr:nth-child(4) td:nth-child(1), +tbody tr:nth-child(4) td:nth-child(2) { top: 220px; } +tbody tr:nth-child(5) td:nth-child(1), +tbody tr:nth-child(5) td:nth-child(2) { top: 270px; } + +/* Custom individual slopes -- Right */ +[data-name="DiGiorno"] { top: 0; } +[data-name="Red Baron"] { top: 65px; } +[data-name="Private Label"] { top: 100px; } +[data-name="Tombstone"] { top: 180px; } +[data-name="Totino's Party Pizza"] { top: 150px; } + +/* The custom visual lines */ +tbody tr:after { + background: black; + content: ''; + height: 1px; + left: 14.5%; + position: absolute; + width: 70%; +} +tbody tr:nth-child(1):after { + top: 40px; + transform: rotate(-6deg); +} +tbody tr:nth-child(2):after { + left: 17.5%; + top: 130px; + transform: rotate(-4deg); + width: 65%; +} +tbody tr:nth-child(3):after { + left: 15%; + top: 125px; + transform: rotate(-10.25deg); + width: 70%; +} +tbody tr:nth-child(4):after { + left: 16%; + top: 210px; + transform: rotate(-4deg); + width: 68%; +} +tbody tr:nth-child(5):after { + left: 22%; + top: 222px; + transform: rotate(-16deg); + width: 56%; } </code></pre> -<p>All that's left are some minor styles to make everything look nice on mobile:</p> + +<p>}</p></li> +</ol> + +<p>All that’s left are some minor styles to make everything look nice on mobile:</p> + <pre><code>@media(max-width:800px) { p { margin: 2rem 0; @@ -215,8 +236,11 @@ table { } } </code></pre> -<h2>Not the most practical</h2> + +<h2 id="not-the-most-practical">Not the most practical</h2> + <p>This slope graph concept is far from perfect for use in real-world situations. The fact that you need to manually render each point of data yourself makes this implementation quite annoying for more in-depth projects.</p> + <p>But it was fun to mess around with and create, so who cares!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/css-variables/index.html b/build/css-variables/index.html index eb7d568..b470633 100644 --- a/build/css-variables/index.html +++ b/build/css-variables/index.html @@ -1,32 +1,42 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>CSS Variables</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>CSS Variables</h1> +<h1 id="css-variables">CSS Variables</h1> + <p>2018-03-24</p> -<p>The CSS language is becoming even more awesome and powerful everyday. In this quick article I'd like to focus specifically on the "new" CSS variable function that you can start using in your projects <em>right now</em>.</p> -<h3>Getting started is easy</h3> -<p>Let's just jump right in - this is how you create variables in vanilla CSS:</p> + +<p>The CSS language is becoming even more awesome and powerful everyday. In this quick article I’d like to focus specifically on the “new” CSS variable function that you can start using in your projects <em>right now</em>.</p> + +<h3 id="getting-started-is-easy">Getting started is easy</h3> + +<p>Let’s just jump right in - this is how you create variables in vanilla CSS:</p> + <pre><code>:root { --base-color: #e0e0e0; --text-color: #111; } </code></pre> + <p>We are using the <code>:root</code> selector at the very top of our CSS file in order to call these variables into any elements in the rest of our document. This is normally the safest way to include variables.</p> -<p>As for the variables themselves, you declare that they are variables using the <code>--</code> tags, followed by the variable's name and it's property. Pretty simple stuff, right?</p> -<p>Now let's use those variables:</p> + +<p>As for the variables themselves, you declare that they are variables using the <code>--</code> tags, followed by the variable’s name and it’s property. Pretty simple stuff, right?</p> + +<p>Now let’s use those variables:</p> + <pre><code>.header { border: 1px solid var(--base-color); } @@ -36,9 +46,13 @@ color: var(--text-color); } </code></pre> -<p>That's it! It's also good to know that CSS variables have pretty decent <a href="https://caniuse.com/#feat=css-variables">browser support</a> (who likes IE11 anyway).</p> -<h3>Why not just use a preprocessor?</h3> -<p>I'm a pretty big fan of Sass and Stylus, but sometimes it's refreshing to just use vanilla CSS for certain projects. Most preprocessors have had the ability to use variables and mixins for a while, but I prefer to avoid build scripts when not absolutely necessary.</p> + +<p>That’s it! It’s also good to know that CSS variables have pretty decent <a href="https://caniuse.com/#feat=css-variables">browser support</a> (who likes IE11 anyway).</p> + +<h3 id="why-not-just-use-a-preprocessor">Why not just use a preprocessor?</h3> + +<p>I’m a pretty big fan of Sass and Stylus, but sometimes it’s refreshing to just use vanilla CSS for certain projects. Most preprocessors have had the ability to use variables and mixins for a while, but I prefer to avoid build scripts when not absolutely necessary.</p> + <p>Get out there and have fun with some variables!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/css-video-backgrounds/index.html b/build/css-video-backgrounds/index.html index c52a5a6..4282369 100644 --- a/build/css-video-backgrounds/index.html +++ b/build/css-video-backgrounds/index.html @@ -1,31 +1,41 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>CSS Video Backgrounds</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>CSS Video Backgrounds</h1> +<h1 id="css-video-backgrounds">CSS Video Backgrounds</h1> + <p>2018-04-16</p> + <p>With the release of Safari 11.1 on macOS and Safari on iOS 11.3, developers now have the ability to support background videos (mp4 support only - at the time of this article) with pure CSS.</p> + <p>Example:</p> + <pre><code>.video-background { - background-image: url('path-to-video.mp4); + background-image: url('path-to-video.mp4); } </code></pre> -<h2>See it in action</h2> -<p>Check out the very basic CodePen I created below to see it live (make sure you view it in latest Safari or else you won't see anything :P)</p> -<p><a href="https://codepen.io/bradleytaunt/pen/JLgrag/">CSS Video Background (Safari Only)</a></p> + +<h2 id="see-it-in-action">See it in action</h2> + +<p>Check out the very basic CodePen I created below to see it live (make sure you view it in latest Safari or else you won’t see anything :P)</p> + +<p>CSS Video Background (Safari Only)</p> + <p>You can read up on all the new features implemented in 11.1 Safari here:</p> + <p><a href="https://webkit.org/blog/8216/new-webkit-features-in-safari-11-1/">New WebKit Features in Safari 11.1</a></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/current-color/index.html b/build/current-color/index.html index a28a733..12972d0 100644 --- a/build/current-color/index.html +++ b/build/current-color/index.html @@ -1,31 +1,41 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>CSS Value: `currentColor`</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>CSS Value: <code>currentColor</code></h1> +<h1 id="css-value-">CSS Value: <code>currentColor</code></h1> + <p>2019-04-13</p> + <p><em>There are a large number of nuanced and mostly unheard of</em> CSS value types, but today we are going to focus on <code>currentColor</code>. So what is the <code>currentColor</code> value type anyway?</p> -<blockquote><p>The currentColor value type will apply the existing color value to other properties like background-color, etc.</p> + +<blockquote> +<p>The currentColor value type will apply the existing color value to other properties like background-color, etc.</p> </blockquote> -<h2>See it in action</h2> -<p>Let's assume with have a single div with the following properties:</p> + +<h2 id="see-it-in-action">See it in action</h2> + +<p>Let’s assume with have a single div with the following properties:</p> + <pre><code>div { color: dodgerblue; } </code></pre> -<p>If we wanted to use that same color for other properties on elements inside that initial <code>div</code>, it's simple - we just need to call <code>currentColor</code> like so:</p> + +<p>If we wanted to use that same color for other properties on elements inside that initial <code>div</code>, it’s simple - we just need to call <code>currentColor</code> like so:</p> + <pre><code>div { color: dodgerblue; } @@ -38,8 +48,10 @@ div a { border-bottom: 1px solid currentColor; } </code></pre> + <p><strong>Sidenote</strong>: If you re-declare the default <code>color</code> property further along in your CSS, the <code>currentColor</code> value will update according to the last color set.</p> -<p>And that's it. Best of all, this value type is supported across all major browsers!</p> + +<p>And that’s it. Best of all, this value type is supported across all major browsers!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/cut-your-forms-in-half/index.html b/build/cut-your-forms-in-half/index.html index 5b6dab1..018a6f1 100644 --- a/build/cut-your-forms-in-half/index.html +++ b/build/cut-your-forms-in-half/index.html @@ -1,48 +1,66 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Cut Your Forms in Half</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Cut Your Forms in Half</h1> +<h1 id="cut-your-forms-in-half">Cut Your Forms in Half</h1> + <p>2019-05-09</p> -<p><em>Building web forms can sometimes feel like a boring or daunting task</em>. Don't pass this dread on to your users - rip out as many of your form fields as possible.</p> -<p>Web forms tend to get a bad rep, mainly because so many horrible design choices are made without the user experience set at the forefront. Often times clients demand that they <strong>need</strong> those twenty input fields or else how will they collect critical information from their users? Normally when I'm approached with such a statement I simply ask them:</p> -<blockquote><p>"How many form fields would you be willing to fill out for an emergency situation?"</p> + +<p><em>Building web forms can sometimes feel like a boring or daunting task</em>. Don’t pass this dread on to your users - rip out as many of your form fields as possible.</p> + +<p>Web forms tend to get a bad rep, mainly because so many horrible design choices are made without the user experience set at the forefront. Often times clients demand that they <strong>need</strong> those twenty input fields or else how will they collect critical information from their users? Normally when I’m approached with such a statement I simply ask them:</p> + +<blockquote> +<p>“How many form fields would you be willing to fill out for an emergency situation?”</p> </blockquote> -<p>"My form isn't for emergencies though", they might reply. In that case ask them why they feel it acceptable to waste their users' time just because it isn't urgent. Time is valuable.</p> -<h2>Fixing a form in the wild</h2> -<p>Let's use a real-world form off the <a href="https://www.greatwestlife.com">Great West Life Insurance</a> website as an example (left is original, right is updated):</p> -<p><img src="/public/images/cut-forms.webp" alt="Great West Life form update"> -</p> -<h3>Breaking things down</h3> + +<p>“My form isn’t for emergencies though”, they might reply. In that case ask them why they feel it acceptable to waste their users’ time just because it isn’t urgent. Time is valuable.</p> + +<h2 id="fixing-a-form-in-the-wild">Fixing a form in the wild</h2> + +<p>Let’s use a real-world form off the <a href="https://www.greatwestlife.com">Great West Life Insurance</a> website as an example (left is original, right is updated):</p> + +<h3 id="breaking-things-down">Breaking things down</h3> + <p>So what exactly have we changed?</p> + <ul> <li>Combined first and last name fields into a single input</li> -<li>Removed the overkill "retype" email & password field (with the optional <code>show password</code> this becomes redundant)</li> +<li>Removed the overkill “retype” email & password field (with the optional <code>show password</code> this becomes redundant)</li> <li>Minor position changes for optional subscription sign up and input field descriptions</li> <li>Removed <code>recovery email</code> - - This is something that should be prompted to the user after successful registration - don't bog them down before they even sign up</li> + +<ul> +<li>This is something that should be prompted to the user after successful registration - don’t bog them down before they even sign up</li> +</ul></li> </ul> -<h2>Helpful Micro improvements</h2> -<p>You don't need to be extreme when gutting form fields - just be practical.</p> + +<h2 id="helpful-micro-improvements">Helpful Micro improvements</h2> + +<p>You don’t need to be extreme when gutting form fields - just be practical.</p> + <ul> -<li>Don't use "first" and "last" names as separate inputs, instead use something like "Full Name"</li> +<li>Don’t use “first” and “last” names as separate inputs, instead use something like “Full Name”</li> <li>Make complex questions use preset answers via <code>checkbox</code> or <code>radio</code> inputs</li> <li>Avoid <code>select</code> items whenever possible (these are clunky and most times unnecessary)</li> <li>Include easy to understand, real-time error prompts</li> </ul> -<h2>Further reading</h2> + +<h2 id="further-reading">Further reading</h2> + <ul> <li>Great place to deep-dive into UX form design: <a href="https://uxmovement.com/category/forms/">UX Movement</a></li> </ul> diff --git a/build/death-of-personality/index.html b/build/death-of-personality/index.html index 7f38b6a..6868454 100644 --- a/build/death-of-personality/index.html +++ b/build/death-of-personality/index.html @@ -1,53 +1,55 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>The Death of Personality</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>The Death of Personality</h1> +<h1 id="the-death-of-personality">The Death of Personality</h1> + <p>2017-11-01</p> -<p>On September 18, 2013 truly original product design (everything from icon and app design to UI and experience interactions) began it's fast decline into the abyss with the release of Apple's iOS 7 update. It was called revolutionary. It was seen as a 'new age' of design. I think it was a big mistake.</p> + +<p>On September 18, 2013 truly original product design (everything from icon and app design to UI and experience interactions) began it’s fast decline into the abyss with the release of Apple’s iOS 7 update. It was called revolutionary. It was seen as a ‘new age’ of design. I think it was a big mistake.</p> + <p><img src="/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp" alt="Flat design tombstone" /></p> -<h3>Stepping backwards</h3> -<p>Let me start off by saying I understand where they were trying to take mobile app design as a whole. "Less is more", "cleaner UI to let the content be the focus", "more touch based interactions". The problem is that they cranked the dial too far in the other direction.</p> -<p>Because of this, a large movement was created based around the idea that skeuomorphic<span class="sidenote-number"></span> design is garbage, flat design is the future. And everyone drank the kool-aid without a single objection. -<span class="sidenote">I'm using this ironically.</span></p> -<h3>Icons with no identity</h3> -<p>Do you remember Instagram's original app icon and UI? Do you remember how everyone initially praised it? Show those old designs to the same designers who loved it only a few years ago, and they will now laugh at how "bad" it is.</p> -<p><figure> -<img src="/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp" alt="Instagram flat design"> -<figcaption>They completely butchered the contrast and initial readability to appease the 'flat' trend style. The personality died.</figcaption> -</figure></p> -<p>Unfortunately the same can be said for Apple's system icons across both iOS and macOS.</p> -<p>I believe Apple took the concept of a 'consistent' design system across their iconography too literally. All the system icons should compliment one another, but they shouldn't lose their own individual look and feel.</p> -<p><figure> -<img src="/public/images/flat-design-icons_vubivd_c_scale,w_800.webp" alt="iOS icon comparison"> -<figcaption>Look at the depth and thought put into the original iOS icons. The "newer" icon designs look like lazy and uninspired wire-frames.</figcaption> -</figure></p> -<h3>Lackluster UI</h3> -<p>The once inspiring and hierarchically consistent interface of both iOS and macOS was also quickly swatted away. In it's place we as users saw the removal of depth, initial visual cues as to what was interactive and what was static, and sadly even the overall color was muted.</p> -<p><figure> -<img src="/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp" alt="iOS UI comparison"> -<figcaption>More ugly wire-frame skeleton design compared to it's original counterpart. Where is the call to interact with any of these elements? Where is the hierarchy?</figcaption> -</figure></p> -<h3>Impact on the web</h3> + +<h3 id="stepping-backwards">Stepping backwards</h3> + +<p>Let me start off by saying I understand where they were trying to take mobile app design as a whole. “Less is more”, “cleaner UI to let the content be the focus”, “more touch based interactions”. The problem is that they cranked the dial too far in the other direction.</p> + +<p>Because of this, a large movement was created based around the idea that skeuomorphic design is garbage, flat design is the future. And everyone drank the kool-aid without a single objection. +I’m using this ironically.</p> + +<h3 id="icons-with-no-identity">Icons with no identity</h3> + +<p>Do you remember Instagram’s original app icon and UI? Do you remember how everyone initially praised it? Show those old designs to the same designers who loved it only a few years ago, and they will now laugh at how “bad” it is.</p> + +<p>Unfortunately the same can be said for Apple’s system icons across both iOS and macOS.</p> + +<p>I believe Apple took the concept of a ‘consistent’ design system across their iconography too literally. All the system icons should compliment one another, but they shouldn’t lose their own individual look and feel.</p> + +<h3 id="lackluster-ui">Lackluster UI</h3> + +<p>The once inspiring and hierarchically consistent interface of both iOS and macOS was also quickly swatted away. In it’s place we as users saw the removal of depth, initial visual cues as to what was interactive and what was static, and sadly even the overall color was muted.</p> + +<h3 id="impact-on-the-web">Impact on the web</h3> + <p>This may not have been a bad thing if it was self-contained to Apple itself. The problem is that Apple has such a huge influence on the design industry - although that is starting to diminish, due to disasters like the iPhone X - that everyone starts to mimic and copy their style. This includes designers of sites and progressive web apps.</p> -<p><figure> -<img src="/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp" alt="Buttons comparison"> -<figcaption>Comparison of button states. Which states are more instantly recognizable?</figcaption> -</figure></p> + <p>With the evolution of websites morphing into progressive web apps, designers have felt the need to start implementing this bland style for their design systems.</p> + <p>What we got in return:</p> + <ul> <li>washed out colors</li> <li>zero gradients for depth</li> @@ -56,23 +58,21 @@ <li>the absence of hover states on interactive elements</li> <li>a lack of any proper information density</li> <li>an overkill of whitespace</li> -<li>one dimensional buttons (you know, the thing you <strong>want</strong> the user to interact with)</li> +<li>one dimensional buttons (you know, the thing you want the user to interact with)</li> <li>a complete disregard for original design not based off every other popular product</li> </ul> -<p><figure> -<img src="/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp" alt="Toggles comparison"> -<figcaption>The minimal / flat toggles look like unfinished prototypes.</figcaption> -</figure></p> -<h3>Breaking free of the 'modern era'</h3> + +<h3 id="breaking-free-of-the-modern-era">Breaking free of the ‘modern era’</h3> + <p>Thankfully, there are still a few good designers who continue to create original and inspiring work not based solely on current trends.</p> -<p>Flexibits recently launched a new contact app for macOS called <a href="https://flexibits.com/cardhop">Cardhop</a>. While the UI still shifts a little too far to the 'flat trend' for my liking, they thankfully hired the very talented David Lanham to design the beautiful application icon.</p> -<p> This is where visual design shines. Icon designs like Cardhop's are what allow individual applications to stand out in the dock or mobile home-screen among all the others. So how is that <i>not</i> UX design?</p> -<p><figure> -<img src="/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp" alt="Cardhop app icon"> -<figcaption>The gorgeous Cardhop app icon by David Lanham.</figcaption> -</figure></p> -<p>The current trendy thought process from designers that "visual design doesn't involve UX design" is garbage. Neither are mutually exclusive and I think anyone who believes so is being incredibly short-sighted.</p> -<p>If you're a designer, please stop riding trends and make your work visually beautiful. That doesn't mean you need to sacrifice usability or function, but just put more love and confidence into your profession. Companies like Apple and Google don't control how everyone else's apps and sites should look, and based on their current design decisions - they <i>shouldn't</i>.</p> + +<p>Flexibits recently launched a new contact app for macOS called Cardhop. While the UI still shifts a little too far to the ‘flat trend’ for my liking, they thankfully hired the very talented David Lanham to design the beautiful application icon.</p> + +<p>This is where visual design shines. Icon designs like Cardhop’s are what allow individual applications to stand out in the dock or mobile home-screen among all the others. So how is that not UX design?</p> + +<p>The current trendy thought process from designers that “visual design doesn’t involve UX design” is garbage. Neither are mutually exclusive and I think anyone who believes so is being incredibly short-sighted.</p> + +<p>If you’re a designer, please stop riding trends and make your work visually beautiful. That doesn’t mean you need to sacrifice usability or function, but just put more love and confidence into your profession. Companies like Apple and Google don’t control how everyone else’s apps and sites should look, and based on their current design decisions - they shouldn’t.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/default-brower-forms/index.html b/build/default-brower-forms/index.html index 48c8dfd..b62ab64 100644 --- a/build/default-brower-forms/index.html +++ b/build/default-brower-forms/index.html @@ -1,87 +1,102 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Very Basic Form Styling</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Very Basic Form Styling</h1> +<h1 id="very-basic-form-styling">Very Basic Form Styling</h1> + <p>2019-11-13</p> -<p>Web forms can be great - I'm borderline obsessed with them. I love tinkering with pre-existing logins / sign up pages and I've also open sourced a minimal CSS form-styling plugin: <a href="https://normform.netlify.com/">Normform</a>. While simple CSS plugins like these can be helpful, I often feel like we are over-engineering our web forms. I'm certainly guilty of it.</p> -<p>That's not to say developers should just use default browser styling for their forms and call it a day - that is far from ideal. Just pull-back on adding so much styling garbage to the forms themselves.</p> -<p>Let's check out an embedded demo below to see what some bare-bones form styling could look like:</p> + +<p>Web forms can be great - I’m borderline obsessed with them. I love tinkering with pre-existing logins / sign up pages and I’ve also open sourced a minimal CSS form-styling plugin: <a href="https://normform.netlify.com/">Normform</a>. While simple CSS plugins like these can be helpful, I often feel like we are over-engineering our web forms. I’m certainly guilty of it.</p> + +<p>That’s not to say developers should just use default browser styling for their forms and call it a day - that is far from ideal. Just pull-back on adding so much styling garbage to the forms themselves.</p> + +<p>Let’s check out an embedded demo below to see what some bare-bones form styling could look like:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/oNwzvMa">Live CodePen Example</a></p> -<p>This form isn't going to win any design awards or blow anyone away with its creativity. That's okay - because it gets the job done. Users understand it's a form and items are broken down into digestible chunks. Mission accomplished, right?</p> -<h2>Breaking the form down</h2> -<p>Let's take a look at the HTML of the entire form:</p> -<pre><code><form action=""> - <fieldset> - <legend>Personal Details</legend> - <label for="username">Desired Username:</label> - <input type="text" id="username"> - <label for="name">Full Name:</label> - <input type="text" id="name"> - <label for="email">Email Address:</label> - <input type="email" id="email"> - <label for="date">Date of Birth:</label> - <input type="date" id="date"> - </fieldset> - <br> - <fieldset> - <legend>Contact Details</legend> - <label for="address">Home Address:</label> - <input type="text" id="address"> - <label for="postal">Postal Code:</label> - <input type="text" id="postal"> - <label for="phone">Phone Number:</label> - <input type="tel" id="phone"> - </fieldset> - <br> - <fieldset> - <legend>Select an Option</legend> - <label for="radio-1"> - <input type="radio" id="radio-1" name="radio-choice"> + +<p>This form isn’t going to win any design awards or blow anyone away with its creativity. That’s okay - because it gets the job done. Users understand it’s a form and items are broken down into digestible chunks. Mission accomplished, right?</p> + +<h2 id="breaking-the-form-down">Breaking the form down</h2> + +<p>Let’s take a look at the HTML of the entire form:</p> + +<pre><code><form action=""> + <fieldset> + <legend>Personal Details</legend> + <label for="username">Desired Username:</label> + <input type="text" id="username"> + <label for="name">Full Name:</label> + <input type="text" id="name"> + <label for="email">Email Address:</label> + <input type="email" id="email"> + <label for="date">Date of Birth:</label> + <input type="date" id="date"> + </fieldset> + <br> + <fieldset> + <legend>Contact Details</legend> + <label for="address">Home Address:</label> + <input type="text" id="address"> + <label for="postal">Postal Code:</label> + <input type="text" id="postal"> + <label for="phone">Phone Number:</label> + <input type="tel" id="phone"> + </fieldset> + <br> + <fieldset> + <legend>Select an Option</legend> + <label for="radio-1"> + <input type="radio" id="radio-1" name="radio-choice"> The option is pretty nice - </label> - <label for="radio-2"> - <input type="radio" id="radio-2" name="radio-choice"> + </label> + <label for="radio-2"> + <input type="radio" id="radio-2" name="radio-choice"> This option is a little bit better - </label> - <label for="radio-3"> - <input type="radio" id="radio-3" name="radio-choice"> + </label> + <label for="radio-3"> + <input type="radio" id="radio-3" name="radio-choice"> This option is the best - </label> - </fieldset> - <br> - <fieldset> - <legend>Notifications</legend> - <label for="checkbox-1"> - <input type="checkbox" id="checkbox-1"> + </label> + </fieldset> + <br> + <fieldset> + <legend>Notifications</legend> + <label for="checkbox-1"> + <input type="checkbox" id="checkbox-1"> I would like to receive email notifications - </label> - <label for="checkbox-2"> - <input type="checkbox" id="checkbox-2"> + </label> + <label for="checkbox-2"> + <input type="checkbox" id="checkbox-2"> I would like to subscribe to the weekly newsletter - </label> - </fieldset> - <br> - <input type="reset" value="Reset"> - <input type="submit" value="Submit"> -</form> + </label> + </fieldset> + <br> + <input type="reset" value="Reset"> + <input type="submit" value="Submit"> +</form> </code></pre> -<p>Notice the <code>fieldset</code> and <code>legend</code> elements? I bet you don't see or hear about those HTML items very often. By default, <code>fieldset</code> allows sibling or related inputs to be semantically grouped together. The <code>legend</code> elements give the user great visual cues about which items are grouped together, helping to focus on each section individually as they complete the form. Use these grouping elements as much as possible (when it makes sense of course) for a better guided experience for your users. </p> + +<p>Notice the <code>fieldset</code> and <code>legend</code> elements? I bet you don’t see or hear about those HTML items very often. By default, <code>fieldset</code> allows sibling or related inputs to be semantically grouped together. The <code>legend</code> elements give the user great visual cues about which items are grouped together, helping to focus on each section individually as they complete the form. Use these grouping elements as much as possible (when it makes sense of course) for a better guided experience for your users. </p> + <p>Avoid making your own custom sections and instead use these existing HTML semantics.</p> -<h2>Almost no CSS at all</h2> -<p>Now it's time to style this form with only 6 property declarations:</p> + +<h2 id="almost-no-css-at-all">Almost no CSS at all</h2> + +<p>Now it’s time to style this form with only 6 property declarations:</p> + <pre><code>form label { display: block; } @@ -91,24 +106,31 @@ form input { padding: 10px; width: 100%; } -form input[type="radio"], -form input[type="checkbox"], -form input[type="reset"], -form input[type="submit"] { +form input[type="radio"], +form input[type="checkbox"], +form input[type="reset"], +form input[type="submit"] { width: auto; } </code></pre> + <p>Of course, you can always add minor adjustments (like in my demo example above)</p> + <ul> <li>Legend typeface and sizing</li> <li>Form and fieldset background colors</li> <li>Extra margin and padding</li> -<li>Custom reset / submit buttons</li> +<li>Custom reset / submit buttons</li> </ul> + <p>But the main point of this post is to showcase how little CSS is needed to implement decent web forms - so any further improvements are up to you, dear reader. </p> + <p>Just try not to reinvent the wheel.</p> -<h2>Final rant - don't ignore the reset</h2> -<p>A lot of "modern" web forms have moved away from including the reset input on their forms, which I think is fairly short-sighted. Resetting all form fields might be a smaller edge case, but it is certainly a better option than relying on the user to <i>refresh</i> or in some cases, individually deleting each input. Yikes.</p> + +<h2 id="final-rant---dont-ignore-the-reset">Final rant - don’t ignore the reset</h2> + +<p>A lot of “modern” web forms have moved away from including the reset input on their forms, which I think is fairly short-sighted. Resetting all form fields might be a smaller edge case, but it is certainly a better option than relying on the user to refresh or in some cases, individually deleting each input. Yikes.</p> + <p>Happy form building!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/default-html-style-updates/index.html b/build/default-html-style-updates/index.html index 3e18575..bf123dc 100644 --- a/build/default-html-style-updates/index.html +++ b/build/default-html-style-updates/index.html @@ -1,46 +1,61 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Modern Improvements for Default Browser Styles</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Modern Improvements for Default Browser Styles</h1> +<h1 id="modern-improvements-for-default-browser-styles">Modern Improvements for Default Browser Styles</h1> + <p>2021-11-09</p> -<p>This website <em>almost</em> exclusively uses the browser's (whichever one that might be) default styling to render it's HTML. I firmly believe, and have <a href="/css-js-mistake/">stated in a previous post</a>, that the default HTML styling across all browsers is a thing of beauty. "Consistent and boring" is how I tend to refer to default browser styles - and I mean that in a <em>good way</em>.</p> -<p>But that doesn't mean some minor, modern improvements couldn't be made...</p> -<h2>Boosting Margins and Increasing Font Size</h2> -<p>A little extra breathing room for a website's content never hurts. Browser defaults set the inner content too close to the main window borders, creating mild eye strain to focus on the far edges of the screen when reading. Pair this with a typeface set too small and you've got a recipe for disaster (in terms of user experience and accessibility). Luckily for us, adding two basic CSS properties fixes all of our readability woes. All that is required is a simple boost to the existing <code>margin</code> property set on the <code>body</code> element (I personally lean towards a very specific <code>1.5em</code>) and overriding the default <code>font-size</code> to <code>18px</code>[^1]:</p> + +<p>This website <em>almost</em> exclusively uses the browser’s (whichever one that might be) default styling to render it’s HTML. I firmly believe, and have <a href="/css-js-mistake/">stated in a previous post</a>, that the default HTML styling across all browsers is a thing of beauty. “Consistent and boring” is how I tend to refer to default browser styles - and I mean that in a <em>good way</em>.</p> + +<p>But that doesn’t mean some minor, modern improvements couldn’t be made…</p> + +<h2 id="boosting-margins-and-increasing-font-size">Boosting Margins and Increasing Font Size</h2> + +<p>A little extra breathing room for a website’s content never hurts. Browser defaults set the inner content too close to the main window borders, creating mild eye strain to focus on the far edges of the screen when reading. Pair this with a typeface set too small and you’ve got a recipe for disaster (in terms of user experience and accessibility). Luckily for us, adding two basic CSS properties fixes all of our readability woes. All that is required is a simple boost to the existing <code>margin</code> property set on the <code>body</code> element (I personally lean towards a very specific <code>1.5em</code>) and overriding the default <code>font-size</code> to <code>18px</code>[^1]:</p> + <pre><code>body { font-size:18px; margin:1.5em; } </code></pre> + <p>There is one <em>small</em> caveat with setting the <code>font-size</code> across the whole <code>body</code> element: code elements set in <code>monospace</code>. They will stand out larger than the other fonts found in the document (due to variations in different typeface heights, spacing etc.) so we will need to target these elements specifically:</p> + <pre><code>code { font-size:14px; - /* Word wrap is optional if you plan to have long inline code snippets */ + /* Word wrap is optional if you plan to have long inline code snippets */ word-wrap:break-word; } </code></pre> -<h2>Code & Pre Tags</h2> -<p>Since we've mentioned <code>code</code> elements, let's fix those as well. The existing styling for inline code snippets and larger pre-formatted text sections leave a lot to be desired. They don't provide any means to wrap their inner content or make use of <code>overflow</code> properties to avoid vertically scrolling on smaller device screens. Sharing code examples becomes quite a pain when your webpage's flow and layout is broken just by including them. Browsers could fix this easily enough by defaulting to:</p> + +<h2 id="code-pre-tags">Code & Pre Tags</h2> + +<p>Since we’ve mentioned <code>code</code> elements, let’s fix those as well. The existing styling for inline code snippets and larger pre-formatted text sections leave a lot to be desired. They don’t provide any means to wrap their inner content or make use of <code>overflow</code> properties to avoid vertically scrolling on smaller device screens. Sharing code examples becomes quite a pain when your webpage’s flow and layout is broken just by including them. Browsers could fix this easily enough by defaulting to:</p> + <pre><code>pre { overflow:auto; } </code></pre> -<h2>Basic Dark Mode Support</h2> -<p>Barebones styling in current web browsers have no sane defaults[^2] for system-level dark mode. What a huge letdown. This is where the most "drastic" changes will be implemented with our browser default updates. We will need the browser to change the main <code>background-color</code>, along with resetting both the text and anchor link <code>color</code> for improved accessibility. Browser defaults for anchor link color in "light mode" are blue/purple - so I've opted towards using gold, orange and orangered in dark mode respectively:</p> -<pre><code>/* Dark mode */ + +<h2 id="basic-dark-mode-support">Basic Dark Mode Support</h2> + +<p>Barebones styling in current web browsers have no sane defaults[^2] for system-level dark mode. What a huge letdown. This is where the most “drastic” changes will be implemented with our browser default updates. We will need the browser to change the main <code>background-color</code>, along with resetting both the text and anchor link <code>color</code> for improved accessibility. Browser defaults for anchor link color in “light mode” are blue/purple - so I’ve opted towards using gold, orange and orangered in dark mode respectively:</p> + +<pre><code>/* Dark mode */ @media (prefers-color-scheme: dark) { @media not print { html {background:#0e0e0e;color:#e1e1e1; } @@ -50,12 +65,19 @@ } } </code></pre> -<p>That is probably the most streamlined dark mode on the web...</p> -<h2>The "Reading Length" Debate</h2> -<p>Proper reading length tends to be quite the point of contention on the web. Hell, even I've <a href="/character-unit/">written about it quite a bit</a> in the past (and many of my side projects follow that standard). The main problem I have with this is lack of <em>user control</em>. I don't think the browser (or designers for that matter) should determine the best reading length for my own personal reading preferences. UX testing and group feedback has (somewhat) agreed upon 66-75 characters per line to be the most optimal reading experience. That is good to know. I <em>still</em> believe it should come down to user preference.</p> -<p>Do you want to know an incredible feature built into browsers? <em>Window resizing</em>. Abandon the idea that you "know better" than your users and give them the power to adjust as they see fit. The web was meant to be personal and flexible.</p> -<h2>Conclusion</h2> -<p>There isn't much else to say, really. I think these tiny tweaks would greatly improve the default browser experience and maybe even convince others to just <em>use</em> these defaults instead of falling down the CSS rabbit hole (as fun as that might be sometimes). For easier convenience, I'll leave the full set of CSS changes below:</p> + +<p>That is probably the most streamlined dark mode on the web…</p> + +<h2 id="the-reading-length-debate">The “Reading Length” Debate</h2> + +<p>Proper reading length tends to be quite the point of contention on the web. Hell, even I’ve <a href="/character-unit/">written about it quite a bit</a> in the past (and many of my side projects follow that standard). The main problem I have with this is lack of <em>user control</em>. I don’t think the browser (or designers for that matter) should determine the best reading length for my own personal reading preferences. UX testing and group feedback has (somewhat) agreed upon 66-75 characters per line to be the most optimal reading experience. That is good to know. I <em>still</em> believe it should come down to user preference.</p> + +<p>Do you want to know an incredible feature built into browsers? <em>Window resizing</em>. Abandon the idea that you “know better” than your users and give them the power to adjust as they see fit. The web was meant to be personal and flexible.</p> + +<h2 id="conclusion">Conclusion</h2> + +<p>There isn’t much else to say, really. I think these tiny tweaks would greatly improve the default browser experience and maybe even convince others to just <em>use</em> these defaults instead of falling down the CSS rabbit hole (as fun as that might be sometimes). For easier convenience, I’ll leave the full set of CSS changes below:</p> + <pre><code>body { font-size:18px; margin:1.5em; @@ -75,10 +97,12 @@ pre { } } </code></pre> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li><code>18px</code> seems to be the perfect sweet spot between "almost too large, yet not small enough to strain my eyes"</li> -<li>At the time of this article's publish date</li> +<li><code>18px</code> seems to be the perfect sweet spot between “almost too large, yet not small enough to strain my eyes”</li> +<li>At the time of this article’s publish date</li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/design-review-dropbox/index.html b/build/design-review-dropbox/index.html index cbed5b3..57d1c2a 100644 --- a/build/design-review-dropbox/index.html +++ b/build/design-review-dropbox/index.html @@ -1,40 +1,48 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Unsolicited Design Review - Dropbox</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Unsolicited Design Review - Dropbox</h1> +<h1 id="unsolicited-design-review---dropbox">Unsolicited Design Review - Dropbox</h1> + <p>2017-10-10</p> -<p>Earlier last week the design team at Dropbox unveiled their new branding / design system for the company as a whole. If you haven't seen the updated design yet, you can do so here: <a href="https://dropbox.design/">dropbox.design</a> (Take your time, I can wait).</p> + +<p>Earlier last week the design team at Dropbox unveiled their new branding / design system for the company as a whole. If you haven’t seen the updated design yet, you can do so here: dropbox.design (Take your time, I can wait).</p> + <p><img src="/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp" alt="Dropbox Logo" /></p> -<p>I won't mince words when I say I believe this is a huge step backwards for their brand. Not only is it uninspired and broken, but it also shows how our industry is plagued with a need to redesign things just for the sake of redesigning them.</p> -<p>So without anymore fluff - let's get into it. Please leave your bias at the door.</p> -<h2>Purpose</h2> -<p>It's good to try and understand the motive or problem that a company is trying to solve when redesigning something as fundamental as core branding, but this is where the first red flag appears for Dropbox. There is <i>no real problem to solve</i>.</p> -<p>On the marketing site promoting the new design system, the Dropbox team doesn't mention a single problem that this branding redesign is meant to fix. Were users confused by the previous system? Is there data showing large drop-off and a lack of conversion directly connected with the design system itself? All they state is they needed a change with zero reasoning as to why.</p> -<p><blockquote> - <p>We realized our brand needs to change</p> -</blockquote></p> -<p>As I stated at the beginning of this review - it's a redesign for the sake of a redesign. Sometimes this can be acceptable if done correctly, but this is not the case for Dropbox.</p> -<p><blockquote> - <p>Our new brand system shows that Dropbox isn't just a place to store your files - <strong>it's a living workspace that brings teams and ideas together</strong>.</p> - <cite><a href="https://dropbox.design/">Dropbox marketing website</a></cite> -</blockquote></p> -<p>Let's stop right there. "A place to store your files" is literally 99% of what Dropbox does. I get that they want to be involved in more than that but Dropbox <i>is</i> a cloud storage service. Why is there a desperate need to shift away from that?</p> -<p>There isn't much else to speak of in terms of 'purpose' regarding the redesign since there doesn't seem to be one. Let's move on.</p> -<h2>Design Principles</h2> + +<p>I won’t mince words when I say I believe this is a huge step backwards for their brand. Not only is it uninspired and broken, but it also shows how our industry is plagued with a need to redesign things just for the sake of redesigning them.</p> + +<p>So without anymore fluff - let’s get into it. Please leave your bias at the door.</p> + +<h2 id="purpose">Purpose</h2> + +<p>It’s good to try and understand the motive or problem that a company is trying to solve when redesigning something as fundamental as core branding, but this is where the first red flag appears for Dropbox. There is no real problem to solve.</p> + +<p>On the marketing site promoting the new design system, the Dropbox team doesn’t mention a single problem that this branding redesign is meant to fix. Were users confused by the previous system? Is there data showing large drop-off and a lack of conversion directly connected with the design system itself? All they state is they needed a change with zero reasoning as to why.</p> + +<p>As I stated at the beginning of this review - it’s a redesign for the sake of a redesign. Sometimes this can be acceptable if done correctly, but this is not the case for Dropbox.</p> + +<p>Let’s stop right there. “A place to store your files” is literally 99% of what Dropbox does. I get that they want to be involved in more than that but Dropbox is a cloud storage service. Why is there a desperate need to shift away from that?</p> + +<p>There isn’t much else to speak of in terms of ‘purpose’ regarding the redesign since there doesn’t seem to be one. Let’s move on.</p> + +<h2 id="design-principles">Design Principles</h2> + <p>I hate to be that guy who bases design on a written list of principles, but when it works it works. Dieter Rams states it best:</p> + <ol> <li>Good design is innovative</li> <li>Good design makes a product useful</li> @@ -45,57 +53,36 @@ <li>Good design is long-lasting</li> <li>Good design is thorough down to the last detail</li> <li>Good design is environmentally friendly</li> -<li> Good design is as little design as possible</li> +<li>Good design is as little design as possible</li> </ol> -<p><p><strong>1. Good design is innovative</strong>. There is zero innovation in this re-brand, it's simply following the trend of quirky / brutal / modern flat elitism that is currently sweeping the industry. It's a fad and will be out-of-date rather quickly.</p></p> -<p><p><strong>2. Good design makes a product useful</strong>. Looking through their reasoning and explanations I can see no boost or improvement to the usefulness of the product. Not to repeat myself, but without any supporting data as to <i>why</i> this change was made we have nothing to base it off of.</p></p> -<p><p><strong>3. Good design is aesthetic</strong>. See #1.</p></p> -<p><p><strong>4. Good design makes a product understandable</strong>. Were customers not able to understand the Dropbox brand prior to this update? Were users misinformed about what the product could do for them? The previous design did a wonderful job of getting out of the way and showing the user exactly what they needed / wanted.</p></p> -<p><p><strong>5. Good design is unobtrusive</strong>. Talk about going backwards on this one. Original system was clean, readable and friendly to new users. Their current system uses an illegible typeface, colors with terrible contrast and a lack of support for the visually impaired, crude illustrations that give no explanation as to what they represent (more on that later), and a lack of browser support / performance issues.</p></p> -<p><p><strong>6. Good design is honest</strong>. Dropbox still maintains this principle. They don't over-promise or outright lie about who and what they are as a product.</p></p> -<p><p><strong>7. Good design is long-lasting</strong>. See #1 & #3 again.</p></p> -<p><p><strong>8. Good design is thorough down to the last detail</strong>. The fact that even their marketing site crashes latest Firefox, lags on Safari for iOS and stutters in Chrome on desktop shows the lack of performance testing that was done. Not to mention the complete disregard for those with visual impairments with their color palette, typeface and contrast selections.</p></p> -<p><p><strong>9. Good design is environmentally friendly</strong>. Doesn't really apply here.</p></p> -<p><p><strong>10. Good design is as little design as possible</strong>. This new brand system is incredibly over-designed.</p></p> -<p><blockquote> - <p>Our users...tell us they feel overwhelmed and distracted during the workday...we want to change this, by building products and a brand that help people focus on meaningful work, instead of busywork.</p> -</blockquote></p> -<p>Then maybe your design system should get out of the way. To me, this seems like you want your design to take center-stage over the user's content.</p> -<p><strong>Remember: a great design system should go completely unnoticed.</strong></p> -<h2>Accessibility</h2> + +<p>Then maybe your design system should get out of the way. To me, this seems like you want your design to take center-stage over the user’s content.</p> + +<p>Remember: a great design system should go completely unnoticed.</p> + +<h2 id="accessibility">Accessibility</h2> + <p>Any persons with visual impairments need not apply. This design system is not built for you - seek shelter elsewhere.</p> -<p><blockquote> - <p>With 259 fonts, our new typeface Sharp Grotesk gives us lots of versatility, allowing us to "speak" in a variety of tones.</p> -</blockquote></p> -<p><figure> - <img src="/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp" alt="Dropbox Fonts"> - <figcaption>Not a single one of these typeface styles is initially readable</figcaption> -</figure></p> -<p>The typeface they have chosen looks terrible at any view-port size and readability takes a backseat. I can't help but feel this falls into the "let's be trendy" category and ends up sacrificing almost all good usability practices for gimmicky type.</p> -<p><blockquote> - <p>Our users run the gamut from business professionals to scientists and creative types. Most of these folks tell us they feel overwhelmed and distracted during the workday, and that this is one of the biggest barriers to creating work they’re proud of.</p> -</blockquote></p> -<p>Irony at it's finest. "Our users tell us that they hate being distracted and overwhelmed, so we've decided to use headache inducing color palettes, crude illustrations, a barely legible typeface, and some of the most visually loud photography throughout our system". I hate coming off as mean-spirited - but this is some elaborate joke, right?</p> -<p><figure> - <img src="/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp" alt="Dropbox Color Logos"> - <figcaption>Oh Dropbox...my eyes!</figcaption> -</figure></p> + +<p>The typeface they have chosen looks terrible at any view-port size and readability takes a backseat. I can’t help but feel this falls into the “let’s be trendy” category and ends up sacrificing almost all good usability practices for gimmicky type.</p> + +<p>Irony at it’s finest. “Our users tell us that they hate being distracted and overwhelmed, so we’ve decided to use headache inducing color palettes, crude illustrations, a barely legible typeface, and some of the most visually loud photography throughout our system”. I hate coming off as mean-spirited - but this is some elaborate joke, right?</p> + <p>After running it through a color contrast accessibility checker:</p> -<p><figure> - <img src="/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp" alt="Dropbox Contrast"> - <figcaption>Multiple accessibility failures</figcaption> -</figure></p> -<p>Next we have the child-like 'scribble' illustrations. Now don't get me wrong, I love seeing different illustration styles and I actively use 'sketch / scribble' artwork myself, but I don't believe this is the best fit for a brand like Dropbox. These cartoon visuals conflict with the business enterprise service Dropbox should be trying to convey.</p> + +<p>Next we have the child-like ‘scribble’ illustrations. Now don’t get me wrong, I love seeing different illustration styles and I actively use ‘sketch / scribble’ artwork myself, but I don’t believe this is the best fit for a brand like Dropbox. These cartoon visuals conflict with the business enterprise service Dropbox should be trying to convey.</p> + <p>Another issue with these illustrations is their usage. Look at the image below and ask yourself if you would correlate it with an error page if no accompanying text was present.</p> -<p><figure> - <img src="/public/images/dropbox-404_bovayg_c_scale,w_758.webp" alt="Dropbox error page imagery"> - <figcaption>What does this have to do with a 404 error page?</figcaption> -</figure></p> -<h2>Closing Thoughts</h2> -<p>I could go into even deeper analysis (including the oversimplification of their box logo, etc.) but I believe I've spent enough time defending my initial reaction as well as my thoughts after a week of soak time. In my opinion this redesign was completely unnecessary. I think this was a problem of too many designers with too much time without a proper project to channel all that talent.</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>I could go into even deeper analysis (including the oversimplification of their box logo, etc.) but I believe I’ve spent enough time defending my initial reaction as well as my thoughts after a week of soak time. In my opinion this redesign was completely unnecessary. I think this was a problem of too many designers with too much time without a proper project to channel all that talent.</p> + <p>Unfortunately because they decided to just follow the current trend and design with a lack of purpose, I see Dropbox launching another redesign within the next year once this current design fad dies. My only hope is that the next brand system sets out to solve an actual problem, instead of just trying to be trendy.</p> -<h3>Personal Remarks</h3> -<p><i>I love Dropbox as a product and use it every single day. I'm inspired by many of the designers who work there and this article is by no means a personal attack on the company or it's employees. This is merely a blunt and honest review of their new brand design system.</i></p> + +<h3 id="personal-remarks">Personal Remarks</h3> + +<p>I love Dropbox as a product and use it every single day. I’m inspired by many of the designers who work there and this article is by no means a personal attack on the company or it’s employees. This is merely a blunt and honest review of their new brand design system.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/disabling-comments-in-wordpress/index.html b/build/disabling-comments-in-wordpress/index.html index 577bf2b..aceba38 100644 --- a/build/disabling-comments-in-wordpress/index.html +++ b/build/disabling-comments-in-wordpress/index.html @@ -1,28 +1,34 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Disabling Comments in WordPress</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Disabling Comments in WordPress</h1> +<h1 id="disabling-comments-in-wordpress">Disabling Comments in WordPress</h1> + <p>2020-12-28</p> + <p><em>I seem to come across a decent amount of clients</em> and users online that have a difficult time knowing how to disable comments for both future <em>and</em> previous blog posts. It isn’t the easiest for both use cases, so let’s break it down.</p> -<h2>Back to the future</h2> + +<h2 id="back-to-the-future">Back to the future</h2> + <p>Disabling comments on all <em>future</em> blog posts is fairly straightforward:</p> -<p><ol><li>Navigate to your WordPress admin dashboard</li><li>Go to <strong>Settings</strong> > <strong>Discussion</strong></li><li>Uncheck <strong>Allow people to submit comments on new posts</strong></li><li>That’s it!</li></ol></p> -<h2>But what about old posts?</h2> + +<h2 id="but-what-about-old-posts">But what about old posts?</h2> + <p>Have no fear - “Bulk Actions” are here to save the day! In order to retroactively disable comments on older posts, do the following:</p> -<p><ol><li>Navigate to <strong>Posts</strong></li><li>Select the specific posts you would like to disable comments on (or select all of them)</li><li>Click the <strong>Bulk Actions</strong> drop-down menu and choose <strong>Edit</strong></li><li>Press <strong>Apply</strong></li><li>In the <strong>Bulk Edit</strong> view, look for the <strong>Comments</strong> drop-down </li><li>Select <strong>Do Not Allow</strong> and click <strong>Update</strong></li><li>That’s it!</li><div></div></ol></p> + <p>I hope this article saves others any headaches in the future. WordPress itself could certainly make this more streamlined, but for now what we have works. Happy (not) commenting!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/donate/index.html b/build/donate/index.html index d14c008..e8436af 100644 --- a/build/donate/index.html +++ b/build/donate/index.html @@ -1,33 +1,44 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Donate</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Donate</h1> -<p>If you feel the burning desire to help support this small blog of mine, please take a look at the options below. You can still enjoy everything on this blog for free, so please don't feel obligated to donate.</p> -<h2>How are donations used?</h2> -<p>That's a good question. Almost all money donated goes towards hosting, domain renewal costs and <a href="/uses">open source services I use myself</a>. Anything "extra" ends up getting me a coffee (or beer) to enjoy while I publish more free (and hopefully useful) content.</p> -<h3>Standard Donations</h3> +<h1 id="donate">Donate</h1> + +<p>If you feel the burning desire to help support this small blog of mine, please take a look at the options below. You can still enjoy everything on this blog for free, so please don’t feel obligated to donate.</p> + +<h2 id="how-are-donations-used">How are donations used?</h2> + +<p>That’s a good question. Almost all money donated goes towards hosting, domain renewal costs and <a href="/uses">open source services I use myself</a>. Anything “extra” ends up getting me a coffee (or beer) to enjoy while I publish more free (and hopefully useful) content.</p> + +<h3 id="standard-donations">Standard Donations</h3> + <ul> <li><a href="https://www.buymeacoffee.com/WQTMtn7ir">Buy Me a Coffee</a></li> <li><a href="https://paypal.me/bradtaunt">PayPal</a></li> <li><a href="https://buy.stripe.com/eVa14A885elO9JS9AE">Directly through Stripe</a></li> </ul> -<h3>Crypto Donations?</h3> + +<h3 id="crypto-donations">Crypto Donations?</h3> + <p>Besides producing massive e-waste, consuming an enormous amount of energy, being largely used in association with fraudulent activities, and taking advantage of those under economic difficulties, crypto overall is something I am strongly opposed to.</p> -<p>If crypto is the only payment option at your disposal and you still wish to make a donation; <strong>don't</strong>. Instead, make that donation to a local non-profit organization. "Cash it in" and use that money in your own community. Donate your <em>time</em> to others.</p> + +<p>If crypto is the only payment option at your disposal and you still wish to make a donation; <strong>don’t</strong>. Instead, make that donation to a local non-profit organization. “Cash it in” and use that money in your own community. Donate your <em>time</em> to others.</p> + <p>Or simply shoot me an email, talk a little about yourself and say hello. A friendly conversation is worth a lot more than any crypto.</p> + <p>Thanks for understanding.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/dts/index.html b/build/dts/index.html index 6fea111..be8dda3 100644 --- a/build/dts/index.html +++ b/build/dts/index.html @@ -1,32 +1,38 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Designers Need Thicker Skin</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Designers Need Thicker Skin</h1> +<h1 id="designers-need-thicker-skin">Designers Need Thicker Skin</h1> + <p>2017-07-10</p> -<p>I'm not normally one to comment or even really care about "drama" within our design industry. Opinions are just that and should just be consumed at face value. But this week I was moderately annoyed with a subset of designers in design-land.</p> -<h3>Critique the critics</h3> -<p>Designer/design critic Eli Schiff tweeted his thoughts about the newly released promo video from Framer showcasing their new gradient feature. See the initial tweet below:</p> -<p><figure> - <img src="/public/images/eli-schiff-twitter.webp" alt="Eli's Tweet"> - <figcaption>Eli Schiff just telling it how it is.</figcaption> -</figure></p> -<p>Let me begin by saying my views on this comment: I don't care. I honestly don’t feel strongly one way or the other about them making a video promo for gradients. Could it have just been a simple text tweet? Sure. Does it really matter that they decided to make a video for it? Not at all.</p> + +<p>I’m not normally one to comment or even really care about “drama” within our design industry. Opinions are just that and should just be consumed at face value. But this week I was moderately annoyed with a subset of designers in design-land.</p> + +<h3 id="critique-the-critics">Critique the critics</h3> + +<p>Designer/design critic Eli Schiff tweeted his thoughts about the newly released promo video from Framer showcasing their new gradient feature. See the initial tweet below:</p> + +<p>Let me begin by saying my views on this comment: I don’t care. I honestly don’t feel strongly one way or the other about them making a video promo for gradients. Could it have just been a simple text tweet? Sure. Does it really matter that they decided to make a video for it? Not at all.</p> + <p>But this isn’t the problem.</p> -<p>Other designers took to Twitter and started attacking Eli, not even as a design critic but as a person. This was ugly to see. What happened to civil discussion and giving the other side a chance to say their piece? Calling to "ban him" from sites such as DesignerNews or suggesting to unfollow him on Twitter is unbelievably childish - in an industry that we tote as "accepting of everyone" no less.</p> -<p>That's all I'm going to say because I don’t want to spend too much time on this foolishness, but honestly designers - get some thicker skin.</p> + +<p>Other designers took to Twitter and started attacking Eli, not even as a design critic but as a person. This was ugly to see. What happened to civil discussion and giving the other side a chance to say their piece? Calling to “ban him” from sites such as DesignerNews or suggesting to unfollow him on Twitter is unbelievably childish - in an industry that we tote as “accepting of everyone” no less.</p> + +<p>That’s all I’m going to say because I don’t want to spend too much time on this foolishness, but honestly designers - get some thicker skin.</p> + <p>Yeesh.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/duckduckno/index.html b/build/duckduckno/index.html index f1534e0..ba14124 100644 --- a/build/duckduckno/index.html +++ b/build/duckduckno/index.html @@ -1,46 +1,64 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Two Weeks with the DuckDuckGo Browser</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Two Weeks with the DuckDuckGo Browser</h1> +<h1 id="two-weeks-with-the-duckduckgo-browser">Two Weeks with the DuckDuckGo Browser</h1> + <p>2022-05-17</p> + <p>After using the beta apps for the new DuckDuckGo browser for both macOS and iOS, I have returned to Safari.</p> -<p>This switch back doesn't mean that these browsers are <em>bad</em> by any means. Both browsers are decently fine for casual users. Unfortunately, they aren't ready for prime time "power" users. I'm happy to see another company jump into the browser market (and one that is using WebKit instead of another Chromium clone) but for my day-to-day needs it doesn't cut it.</p> -<p>Let's break things down:</p> -<h2>The Good</h2> + +<p>This switch back doesn’t mean that these browsers are <em>bad</em> by any means. Both browsers are decently fine for casual users. Unfortunately, they aren’t ready for prime time “power” users. I’m happy to see another company jump into the browser market (and one that is using WebKit instead of another Chromium clone) but for my day-to-day needs it doesn’t cut it.</p> + +<p>Let’s break things down:</p> + +<h2 id="the-good">The Good</h2> + <ul> <li>Clean UI with a mix between Chrome and Safari</li> -<li>The "Leave No Trace" fire button to purge data, cache and cookies</li> +<li>The “Leave No Trace” fire button to purge data, cache and cookies</li> <li>Feels snappy and responsive</li> <li>Based on WebKit NOT Chromium</li> </ul> -<h2>The Not So Good</h2> + +<h2 id="the-not-so-good">The Not So Good</h2> + <ul> <li>No sync options between systems (that I could find)</li> <li>No extension support</li> </ul> -<p>Now you might look at this list and notice there are more listed points set under the <code>Good</code> category. Keep in mind that quantity does not always equal quality. The main negative of not allowing user extensions cannot be overstated. I think that when building a browser in this $CURRENT<em>YEAR it's imperative to allow for total user control. Don't wall things off. Don't </em>assume<em></em>you know best for your users.</p> + +<p>Now you might look at this list and notice there are more listed points set under the <code>Good</code> category. Keep in mind that quantity does not always equal quality. The main negative of not allowing user extensions cannot be overstated. I think that when building a browser in this $CURRENT_YEAR it’s imperative to allow for total user control. Don’t wall things off. Don’t <em>assume</em> you know best for your users.</p> + <p>This is a huge issue since a good majority of friends, family and coworkers I talk with use more elaborate ad-blocking. One of the first things I tested with the DuckDuckGo browser on desktop was to watch a YouTube video. I was immediately slammed with multiple ads - both in video form and as banner pop-ups.</p> -<p>Overlooks like this shouldn't happen. This is UX 101.</p> -<p>Another obvious overlook is history and account syncing across devices. Unless I missed something obvious, I could not figure out how to seamlessly sync content from my macOS browser to my iOS one. Again, this function greatly improves the experience of jumping between desktop and mobile clients. Don't make me think![^1]</p> -<h2>Closing Thoughts</h2> -<p>I appreciate the effort from the DuckDuckGo team. I'm certain this project will get better over time, as they are listening closely to user feedback during the beta. With future improvements I could see myself giving things a second chance.</p> + +<p>Overlooks like this shouldn’t happen. This is UX 101.</p> + +<p>Another obvious overlook is history and account syncing across devices. Unless I missed something obvious, I could not figure out how to seamlessly sync content from my macOS browser to my iOS one. Again, this function greatly improves the experience of jumping between desktop and mobile clients. Don’t make me think![^1]</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>I appreciate the effort from the DuckDuckGo team. I’m certain this project will get better over time, as they are listening closely to user feedback during the beta. With future improvements I could see myself giving things a second chance.</p> + <p>As it stands now, this feels like something that should be an extension[^2], not a standalone browser.</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li><a href="https://sensible.com/dont-make-me-think/">https://sensible.com/dont-make-me-think/</a></li> +<li><a href="https://sensible.com/dont-make-me-think/">https://sensible.com/dont-make-me-think/</a></li> <li>Technically this already exists as a Safari extension <a href="https://apps.apple.com/us/app/duckduckgo-privacy-essentials/id1482920575?mt=12">here</a></li> </ol> <footer role="contentinfo"> diff --git a/build/dump/index.html b/build/dump/index.html index 8e12b8f..39f6e59 100644 --- a/build/dump/index.html +++ b/build/dump/index.html @@ -1,101 +1,157 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Don't Make a Blog, Make a Brain Dump</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Don't Make a Blog, Make a Brain Dump</h1> +<h1 id="dont-make-a-blog-make-a-brain-dump">Don’t Make a Blog, Make a Brain Dump</h1> + <p>2022-09-10</p> -<p>Not enough people have personal blogs. This is a point brought up by many of those passionate about the "golden age" in the timeline of the modern internet. A time when websites were more like a small collection of winding side-streets and flea markets. Today, it's all shopping malls, hostile pedestrians, and corporate buildings. People have their one or two "outlets" that make it easier for them to meet-up with friends and family. There's no need for these people to have their "own thing". Someone else has already built it for them. They're become fully adjusted to their internet slums.</p> + +<p>Not enough people have personal blogs. This is a point brought up by many of those passionate about the “golden age” in the timeline of the modern internet. A time when websites were more like a small collection of winding side-streets and flea markets. Today, it’s all shopping malls, hostile pedestrians, and corporate buildings. People have their one or two “outlets” that make it easier for them to meet-up with friends and family. There’s no need for these people to have their “own thing”. Someone else has already built it for them. They’re become fully adjusted to their internet slums.</p> + <p>Okay, sorry about the terrible metaphors. But you get my point. <em>Convenience breeds laziness</em>. <em>Laziness breeds mediocrity</em>.</p> -<h2>What's a "Brain Dump"?</h2> -<p>A brain dump is a better way to look at sharing your own experiences or thoughts on the web. The term "blog" has a lot of baggage connected to it, so newcomers are quickly scared away by the concept. Or even worse - they decide to only share themselves on locked-in, walled gardens[^1].</p> -<p>Another problem arises when you finally <em>do</em> convince someone to start "blogging" online; self-doubt.</p> + +<h2 id="whats-a-brain-dump">What’s a “Brain Dump”?</h2> + +<p>A brain dump is a better way to look at sharing your own experiences or thoughts on the web. The term “blog” has a lot of baggage connected to it, so newcomers are quickly scared away by the concept. Or even worse - they decide to only share themselves on locked-in, walled gardens<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>.</p> + +<p>Another problem arises when you finally <em>do</em> convince someone to start “blogging” online; self-doubt.</p> + <ul> -<li>"What could I possibly have to share?"</li> -<li>"What if everyone <em>hates</em> what I post?"</li> -<li>"What if my content sucks?"</li> +<li>“What could I possibly have to share?”</li> +<li>“What if everyone <em>hates</em> what I post?”</li> +<li>“What if my content sucks?”</li> </ul> -<p>Just dump it. Who cares. It's the internet after all, so who are you trying to impress? The point is that your sharing your own experiences that are unique to you as an individual. Posting something that you think is pointless or mundane might be extremely helpful or, at the very least, entertaining for someone else.</p> -<p>Write up what you did over the weekend, a new recipe you tried out, review a movie/book or video game you enjoyed, list step-by-step instructions on how you installed a new appliance in your house - anything! Just <em>write</em> and be part of what made the internet fun, exciting and personal again.</p> -<p>But let me reiterate: <strong>stay away from walled gardens!</strong> Control your own space on the internet. Be the master of your own brain dump! Say "screw you" to app algorithms and <em>trending</em> bullshit. Just be you.</p> -<p>Convinced? Awesome. Now let's get into setting things up. I'll break these down into two separate categories: one for those with limited web/software experience, and one for those wanting a little more control.</p> -<h3>No Code Solutions</h3> -<p>Before I get into my suggested options in this "no-code" category, I would like to mention why WordPress <em>is not</em> listed here. Personally, I think WordPress gets in the way of users wanting to "just blog". There once was an era where blogging was WP's main focus, but that is now a time long forgotten. It tries to do too much. The back-end is a cluttered mess. Initial learning curves for security, plugins and themes is far too great for newbies. Gutenberg - dear God.</p> -<p>That's not even mentioning hosting costs, installation, backups, etc. My personal take - just steer clear. This option is better suited in the <em>second</em> category for those with more web experience.</p> -<p>With that out of the way, let's see my top selections for "no-code":</p> -<h4>Blot</h4> + +<p>Just dump it. Who cares. It’s the internet after all, so who are you trying to impress? The point is that your sharing your own experiences that are unique to you as an individual. Posting something that you think is pointless or mundane might be extremely helpful or, at the very least, entertaining for someone else.</p> + +<p>Write up what you did over the weekend, a new recipe you tried out, review a movie/book or video game you enjoyed, list step-by-step instructions on how you installed a new appliance in your house - anything! Just <em>write</em> and be part of what made the internet fun, exciting and personal again.</p> + +<p>But let me reiterate: <strong>stay away from walled gardens!</strong> Control your own space on the internet. Be the master of your own brain dump! Say “screw you” to app algorithms and <em>trending</em> bullshit. Just be you.</p> + +<p>Convinced? Awesome. Now let’s get into setting things up. I’ll break these down into two separate categories: one for those with limited web/software experience, and one for those wanting a little more control.</p> + +<h3 id="no-code-solutions">No Code Solutions</h3> + +<p>Before I get into my suggested options in this “no-code” category, I would like to mention why WordPress <em>is not</em> listed here. Personally, I think WordPress gets in the way of users wanting to “just blog”. There once was an era where blogging was WP’s main focus, but that is now a time long forgotten. It tries to do too much. The back-end is a cluttered mess. Initial learning curves for security, plugins and themes is far too great for newbies. Gutenberg - dear God.</p> + +<p>That’s not even mentioning hosting costs, installation, backups, etc. My personal take - just steer clear. This option is better suited in the <em>second</em> category for those with more web experience.</p> + +<p>With that out of the way, let’s see my top selections for “no-code”:</p> + +<h4 id="blot">Blot</h4> + <p><a href="https://blot.im/">Blot</a> has been around for quite a while. You simply post to a third-party service like Dropbox, Google Drive or a <code>git</code> repo and Blot takes care of the rest.</p> + <ul> -<li>$4/month (includes custom domain use, hosting & support)</li> +<li>$4/month (includes custom domain use, hosting & support)</li> <li>Easy sign up</li> <li>Multiple themes to choose from</li> </ul> -<h4>Bear Blog</h4> + +<h4 id="bear-blog">Bear Blog</h4> + <p><a href="https://bearblog.dev/">Bear Blog</a> is an excellent platform that focuses on content and not much else.</p> + <ul> -<li>Free ($25/year for extras)</li> +<li>Free ($25/year for extras)</li> <li>Easy sign up</li> <li>No trackers, no javascript, no ads</li> </ul> -<h4>Mataroa Blog</h4> + +<h4 id="mataroa-blog">Mataroa Blog</h4> + <p><a href="https://mataroa.blog/">Mataroa</a> follows in the same vein as Bear Blog, a simple blogging platform focused on <em>writing</em>.</p> + <ul> -<li>Free (with optional $9/year for premium features)</li> +<li>Free (with optional $9/year for premium features)</li> <li>No ads, no tracking</li> <li>Open source</li> </ul> -<h4>Write.as</h4> + +<h4 id="write.as">Write.as</h4> + <p><a href="https://write.as/">Write.as</a> is another good option for those looking to just get words down and shared on the internet.</p> + <ul> <li>Free with optional paid tiers (custom domains, themes etc.)</li> <li>Option to self host via <a href="https://writefreely.org/">Write Freely</a></li> </ul> -<h3>Build Your Own</h3> -<p>If you're deep into this section of the post, I think it's safe to assume your technical level is fairly <em>decent</em>. So, I won't be into great detail with the options below:</p> -<h4>SourceHut Pages</h4> -<p>This very website you're reading is built and run off of <a href="https://srht.site/">SourceHut Pages</a>. I highly recommend the service.</p> + +<h3 id="build-your-own">Build Your Own</h3> + +<p>If you’re deep into this section of the post, I think it’s safe to assume your technical level is fairly <em>decent</em>. So, I won’t be into great detail with the options below:</p> + +<h4 id="sourcehut-pages">SourceHut Pages</h4> + +<p>This very website you’re reading is built and run off of <a href="https://srht.site/">SourceHut Pages</a>. I highly recommend the service.</p> + <ul> -<li>$3+/month (depending on what you <em>choose</em> to pay)</li> +<li>$3+/month (depending on what you <em>choose</em> to pay)</li> <li>No javascript, no trackers</li> <li>Customizable build settings</li> <li>Support open source software!</li> </ul> -<p><strong>Sidenote:</strong> If you're interested in setting up a SSG (such as Jekyll or Hugo) through SourceHut, feel free to <a href="https://git.sr.ht/~bt/bt.ht">fork this very website as a starting point</a>. I also wrote up how to publish/build a Jekyll site on SourceHut in a <a href="/srht">separate post</a> if you wish to see all the nitty-gritty details.</p> -<h4>WordPress</h4> -<p>As I mentioned above, I find this platform can be a little overkill for a simple "blog" (or in this case, a brain dump). I'm aware that many devs might already be familiar with WP, so it makes sense to include it here.</p> + +<p><strong>Sidenote:</strong> If you’re interested in setting up a SSG (such as Jekyll or Hugo) through SourceHut, feel free to <a href="https://git.sr.ht/~bt/bt.ht">fork this very website as a starting point</a>. I also wrote up how to publish/build a Jekyll site on SourceHut in a <a href="/srht">separate post</a> if you wish to see all the nitty-gritty details.</p> + +<h4 id="wordpress">WordPress</h4> + +<p>As I mentioned above, I find this platform can be a little overkill for a simple “blog” (or in this case, a brain dump). I’m aware that many devs might already be familiar with WP, so it makes sense to include it here.</p> + <ul> <li>Free options (custom domains, premium features will require some form of paid hosting)</li> -<li>Room for growth with extensive plugins / themes</li> +<li>Room for growth with extensive plugins / themes</li> <li>Huge amount of documentation and resources</li> </ul> -<h4>Static HTML and a Web Host</h4> -<p>Why not, right? Using a service like <a href="https://www.nearlyfreespeech.net/">NearlyFreeSpeech</a> or spinning up a cheap VPS with <a href="https://www.digitalocean.com/">DigitalOcean</a> and then dropping static HTML files on your server is pretty straightforward. You don't need any fancy scripts or syncing tools - an FTP client and a text editor is more than enough!</p> + +<h4 id="static-html-and-a-web-host">Static HTML and a Web Host</h4> + +<p>Why not, right? Using a service like <a href="https://www.nearlyfreespeech.net/">NearlyFreeSpeech</a> or spinning up a cheap VPS with <a href="https://www.digitalocean.com/">DigitalOcean</a> and then dropping static HTML files on your server is pretty straightforward. You don’t need any fancy scripts or syncing tools - an FTP client and a text editor is more than enough!</p> + <ul> -<li>$2-5/month (depending on service provider)</li> -<li>"Drag-and-drop" workflow</li> +<li>$2-5/month (depending on service provider)</li> +<li>“Drag-and-drop” workflow</li> <li>Easily portable to other hosting services in the future</li> </ul> -<h4>GitHub Pages</h4> -<p>Since GitHub is used by almost every developer across the globe, it makes sense to mention their free website hosting option via <a href="https://pages.github.com/">GitHub Pages</a>. I personally <em>don't</em> advise newcomers to use this platform, but you're free to do as you like!</p> + +<h4 id="github-pages">GitHub Pages</h4> + +<p>Since GitHub is used by almost every developer across the globe, it makes sense to mention their free website hosting option via <a href="https://pages.github.com/">GitHub Pages</a>. I personally <em>don’t</em> advise newcomers to use this platform, but you’re free to do as you like!</p> + <ul> -<li>"Free"</li> +<li>“Free”</li> <li>Fairly limited (no static site plugin support)</li> </ul> -<h2>Wrapping Up</h2> -<p>There are many services in both categories above that I did not include. That's okay. I didn't exclude them because I <em>dislike</em> them but instead focused on what <em>I believe</em> to be the easiest solutions for both camps (techies and non-techies).</p> -<p>At the end of the day - who cares what you choose. Just choose <em>something</em>. Stop looking at it as "blogging" or trying to "capture an audience". Dump your brain's thoughts out into the internet, on your <em>own piece</em> of the internet, and help make the world wide web as fun as it used to be!</p> -<p>[^1]: Facebook, Twitter, Reddit, Instagram, etc. These should be completely avoided for the sake of both your health and your internet freedom.</p> + +<h2 id="wrapping-up">Wrapping Up</h2> + +<p>There are many services in both categories above that I did not include. That’s okay. I didn’t exclude them because I <em>dislike</em> them but instead focused on what <em>I believe</em> to be the easiest solutions for both camps (techies and non-techies).</p> + +<p>At the end of the day - who cares what you choose. Just choose <em>something</em>. Stop looking at it as “blogging” or trying to “capture an audience”. Dump your brain’s thoughts out into the internet, on your <em>own piece</em> of the internet, and help make the world wide web as fun as it used to be!</p> + +<div class="footnotes"> +<hr/> +<ol> + +<li id="fn1"> +<p>Facebook, Twitter, Reddit, Instagram, etc. These should be completely avoided for the sake of both your health and your internet freedom. <a href="#fnref1" rev="footnote">↩</a></p> +</li> + +</ol> +</div> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/dv/index.html b/build/dv/index.html index a8554be..4f27bd1 100644 --- a/build/dv/index.html +++ b/build/dv/index.html @@ -1,51 +1,70 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Dynamic Viewports with CSS</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Dynamic Viewports with CSS</h1> +<h1 id="dynamic-viewports-with-css">Dynamic Viewports with CSS</h1> + <p>2023-02-08</p> -<p>I think it's safe to assume most web designers and developers are familiar with the standard <code>vh</code> and <code>vw</code> parameters in CSS. These parameters are used for setting an element's height and/or width, relative to the viewport (v) height (h) or width (w). For example:</p> -<p>If I want my <code>.box</code> element to take up the entire height of a device's screen:</p> + +<p>I think it’s safe to assume most web designers and developers are familiar with the standard <code>vh</code> and <code>vw</code> parameters in CSS. These parameters are used for setting an element’s height and/or width, relative to the viewport (v) height (h) or width (w). For example:</p> + +<p>If I want my <code>.box</code> element to take up the entire height of a device’s screen:</p> + <pre><code>.box { height: 100vh; } </code></pre> -<p>Or I want my <code>.box</code> element to take up the entire width of a device's screen:</p> + +<p>Or I want my <code>.box</code> element to take up the entire width of a device’s screen:</p> + <pre><code>.box { width: 100vw; } </code></pre> + <p>These are wonderful options to have - specifically for those of us designing web applications. But there are some <em>minor</em> issues with <code>vh</code> and <code>vw</code>.</p> + <ol> <li>The setting does not take into account device-specific UI (status bars, toolbars, search fields etc.)</li> <li>In some instances these will not play nice with <code>box-sizing</code> properties</li> </ol> -<h2>Have No Fear, Dynamic Viewport is Here!</h2> -<p>Lucky for us there exists an awesome <em>new-ish</em> CSS API called dynamic viewport-percentage units: <code>dvh</code> & <code>dvw</code>. They are defined as follows:</p> -<blockquote><p>The dynamic viewport-percentage units (dv) are defined with respect to the dynamic viewport size: the viewport sized with dynamic consideration of any UA interfaces that are dynamically expanded and retracted. This allows authors to size content such that it can exactly fit within the viewport whether or not such interfaces are present.</p> + +<h2 id="have-no-fear-dynamic-viewport-is-here">Have No Fear, Dynamic Viewport is Here!</h2> + +<p>Lucky for us there exists an awesome <em>new-ish</em> CSS API called dynamic viewport-percentage units: <code>dvh</code> & <code>dvw</code>. They are defined as follows:</p> + +<blockquote> +<p>The dynamic viewport-percentage units (dv) are defined with respect to the dynamic viewport size: the viewport sized with dynamic consideration of any UA interfaces that are dynamically expanded and retracted. This allows authors to size content such that it can exactly fit within the viewport whether or not such interfaces are present.</p> </blockquote> + <p>So our examples above would translate into:</p> + <pre><code>.box { height: 100dvh; width: 100dvw; } </code></pre> -<h3>What About Browser Support?</h3> -<p><a href="https://caniuse.com/mdn-api_css_dvh">Can I Use Stats</a> / ~67.17% coverage.</p> -<p><strong>Note:</strong> Even though the caniuse page states that Firefox 109+ and iOS Safari 16.3 do not support <code>dvh</code>, in my experiments they do. I'm not sure what testing was done for those two browsers, so YMMV.</p> -<p>If you want to play it safe, use dynamic viewports with standard "traditional" viewports as backup. That way you support all use cases while still taking advantage of newer CSS properties.</p> + +<h3 id="what-about-browser-support">What About Browser Support?</h3> + +<p><a href="https://caniuse.com/mdn-api_css_dvh">Can I Use Stats</a> / ~67.17% coverage.</p> + +<p><strong>Note:</strong> Even though the caniuse page states that Firefox 109+ and iOS Safari 16.3 do not support <code>dvh</code>, in my experiments they do. I’m not sure what testing was done for those two browsers, so YMMV.</p> + +<p>If you want to play it safe, use dynamic viewports with standard “traditional” viewports as backup. That way you support all use cases while still taking advantage of newer CSS properties.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/dwm-gnome/index.html b/build/dwm-gnome/index.html index 8668e33..57c29e7 100644 --- a/build/dwm-gnome/index.html +++ b/build/dwm-gnome/index.html @@ -1,41 +1,39 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Bringing dwm Shortcuts to GNOME</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Bringing dwm Shortcuts to GNOME</h1> +<h1 id="bringing-dwm-shortcuts-to-gnome">Bringing dwm Shortcuts to GNOME</h1> + <p>2023-11-02</p> -<p>The <code>dwm</code> window manager is my standard "go-to" for most of my personal laptop environments. For desktops with larger, higher resolution monitors I tend to lean towards using GNOME. The GNOME DE is fairly solid for my own purposes. This article isn't going to deep dive into GNOME itself, but instead highlight some minor configuration changes I make to mimic a few <code>dwm</code> shortcuts.</p> -<p>For reference, I'm running GNOME 45.0 on Ubuntu 23.10</p> -<h2>Setting Up Fixed Workspaces</h2> -<p>When I use <code>dwm</code> I tend to have a hard-set amount of <code>tags</code> to cycle through (normally 4-5). Unfortunately, dynamic rendering is the default for workspaces (ie. tags) in GNOME. For my personal preference I set this setting to <code>fixed</code>. We can achieve this by opening <strong>Settings</strong> > <strong>Multitasking</strong> and selecting "Fixed number of workspaces".</p> -<p><figure> - <img src="/public/images/gnome-1.png" alt="Screenshot of GNOME's Multitasking Settings GUI"> - <figcaption>Screenshot of GNOME's Multitasking Settings GUI</figcaption> -</figure></p> -<h2>Setting Our Keybindings</h2> -<p>Now all that is left is to mimic <code>dwm</code> keyboard shortcuts, in this case: <kbd>ALT</kbd> + <kbd>$num</kbd> for switching between workspaces and <kbd>ALT</kbd> + <kbd>SHIFT</kbd> + <kbd>$num</kbd> for moving windows across workspaces. These keyboard shortcuts can be altered under <strong>Settings</strong> > <strong>Keyboard</strong> > <strong>View and Customize Shortcuts</strong> > <strong>Navigation</strong>.</p> -<p>You'll want to make edits to both the "Switch to workspace <em>n</em>" and "Move window to workspace <em>n</em>". </p> -<p><figure> - <img src="/public/images/gnome-2.png" alt="Screenshot of GNOME's keyboard shortcut GUI"> - <figcaption>Screenshot of GNOME's keyboard shortcut GUI: switch to workspace</figcaption> -</figure></p> -<p><figure> - <img src="/public/images/gnome-3.png" alt="Screenshot of GNOME's keyboard shortcut GUI"> - <figcaption>Screenshot of GNOME's keyboard shortcut GUI: move window to workspace</figcaption> -</figure></p> -<p>That's it. You're free to include even more custom keyboard shortcuts (open web browser, lock screen, hibernate, etc.) but this is a solid starting point. Enjoy tweaking GNOME!</p> + +<p>The <code>dwm</code> window manager is my standard “go-to” for most of my personal laptop environments. For desktops with larger, higher resolution monitors I tend to lean towards using GNOME. The GNOME DE is fairly solid for my own purposes. This article isn’t going to deep dive into GNOME itself, but instead highlight some minor configuration changes I make to mimic a few <code>dwm</code> shortcuts.</p> + +<p>For reference, I’m running GNOME 45.0 on Ubuntu 23.10</p> + +<h2 id="setting-up-fixed-workspaces">Setting Up Fixed Workspaces</h2> + +<p>When I use <code>dwm</code> I tend to have a hard-set amount of <code>tags</code> to cycle through (normally 4-5). Unfortunately, dynamic rendering is the default for workspaces (ie. tags) in GNOME. For my personal preference I set this setting to <code>fixed</code>. We can achieve this by opening <strong>Settings</strong> > <strong>Multitasking</strong> and selecting “Fixed number of workspaces”.</p> + +<h2 id="setting-our-keybindings">Setting Our Keybindings</h2> + +<p>Now all that is left is to mimic <code>dwm</code> keyboard shortcuts, in this case: ALT + $num for switching between workspaces and ALT + SHIFT + $num for moving windows across workspaces. These keyboard shortcuts can be altered under <strong>Settings</strong> > <strong>Keyboard</strong> > <strong>View and Customize Shortcuts</strong> > <strong>Navigation</strong>.</p> + +<p>You’ll want to make edits to both the “Switch to workspace <em>n</em>” and “Move window to workspace <em>n</em>”. </p> + +<p>That’s it. You’re free to include even more custom keyboard shortcuts (open web browser, lock screen, hibernate, etc.) but this is a solid starting point. Enjoy tweaking GNOME!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/dynamic-checkboxes/index.html b/build/dynamic-checkboxes/index.html index 9adb9f2..e23448b 100644 --- a/build/dynamic-checkboxes/index.html +++ b/build/dynamic-checkboxes/index.html @@ -1,131 +1,155 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Dynamic Checkboxes</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Dynamic Checkboxes</h1> +<h1 id="dynamic-checkboxes">Dynamic Checkboxes</h1> + <p>2019-07-30</p> -<p>Checkboxes are used quite frequently on forms across the web. Whether you're selecting a pricing plan during a site's sign-up process or just simply selecting to opt-out from a newsletter, you have most likely interacted with some form of checkbox element.</p> -<p>What if we could make everyday checkboxes more beautiful <em>and</em> more intuitive? <em>It's easier than you think</em>. We only need a small amount of CSS and JavaScript to make considerable improvements to your average checkbox UX.</p> -<p>Let's get into it.</p> -<h2>What we are building</h2> + +<p>Checkboxes are used quite frequently on forms across the web. Whether you’re selecting a pricing plan during a site’s sign-up process or just simply selecting to opt-out from a newsletter, you have most likely interacted with some form of checkbox element.</p> + +<p>What if we could make everyday checkboxes more beautiful <em>and</em> more intuitive? <em>It’s easier than you think</em>. We only need a small amount of CSS and JavaScript to make considerable improvements to your average checkbox UX.</p> + +<p>Let’s get into it.</p> + +<h2 id="what-we-are-building">What we are building</h2> + <p>Take a look and play around with the CodePen below to get an idea of what we are going to build. The premise is a simple add-on pricing form which calculates the additional monthly total to the user in real-time.</p> + <p><a href="https://codepen.io/bradleytaunt/pen/rXWEpy/">Live CodePen Example</a></p> -<h2>The Structure (HTML)</h2> -<p>As always, we will start by breaking down the "bones" of the HTML structure for this checkbox form. Let's take a look at the HTML in it's entirety (don't worry, it is a lot more simple than it seems at first glance):</p> -<pre><code><h2>Add-ons</h2> -<input class="checkbox-btn" name="checkbox-collection" id="checkbox-1" type="checkbox" value="49"> -<label class="checkbox-label" for="checkbox-1"> - <span> +<h2 id="the-structure-html">The Structure (HTML)</h2> + +<p>As always, we will start by breaking down the “bones” of the HTML structure for this checkbox form. Let’s take a look at the HTML in it’s entirety (don’t worry, it is a lot more simple than it seems at first glance):</p> + +<pre><code><h2>Add-ons</h2> + +<input class="checkbox-btn" name="checkbox-collection" id="checkbox-1" type="checkbox" value="49"> +<label class="checkbox-label" for="checkbox-1"> + <span> White-labeled Domain - <em>Use your own custom domain with SSL security included.</em> - </span> - <span>$49/mo</span> -</label> - -<input class="checkbox-btn" name="checkbox-collection" id="checkbox-2" type="checkbox" value="49"> -<label class="checkbox-label" for="checkbox-2"> - <span> + <em>Use your own custom domain with SSL security included.</em> + </span> + <span>$49/mo</span> +</label> + +<input class="checkbox-btn" name="checkbox-collection" id="checkbox-2" type="checkbox" value="49"> +<label class="checkbox-label" for="checkbox-2"> + <span> API Access - <em>Make API calls to perform custom serving and account actions.</em> - </span> - <span>$49/mo</span> -</label> - -<input class="checkbox-btn" name="checkbox-collection" id="checkbox-3" type="checkbox" value="349"> -<label class="checkbox-label" for="checkbox-3"> - <span> + <em>Make API calls to perform custom serving and account actions.</em> + </span> + <span>$49/mo</span> +</label> + +<input class="checkbox-btn" name="checkbox-collection" id="checkbox-3" type="checkbox" value="349"> +<label class="checkbox-label" for="checkbox-3"> + <span> Priority Support - <em>A dedicated account manager to assist your team with ongoing deployments.</em> - </span> - <span>$349/mo</span> -</label> - -<div class="total-cost"> - <h2>Your Plan</h2> - <div> - <span>$</span> - <span id="total-cost-inner">0</span> - <input id="output" type="text" value="0" disabled/> - <span>/mo</span> - </div> -</div> + <em>A dedicated account manager to assist your team with ongoing deployments.</em> + </span> + <span>$349/mo</span> +</label> + +<div class="total-cost"> + <h2>Your Plan</h2> + <div> + <span>$</span> + <span id="total-cost-inner">0</span> + <input id="output" type="text" value="0" disabled/> + <span>/mo</span> + </div> +</div> </code></pre> -<h3>The checkbox inputs & labels</h3> -<pre><code><!-- #1 --> -<input class="checkbox-btn" name="checkbox-collection" id="checkbox-1" type="checkbox" value="49"> -<!-- #2 --> -<label class="checkbox-label" for="checkbox-1"> +<h3 id="the-checkbox-inputs-labels">The checkbox inputs & labels</h3> - <!-- #2i --> - <span> +<pre><code><!-- #1 --> +<input class="checkbox-btn" name="checkbox-collection" id="checkbox-1" type="checkbox" value="49"> + +<!-- #2 --> +<label class="checkbox-label" for="checkbox-1"> + + <!-- #2i --> + <span> White-labeled Domain - <em>Use your own custom domain with SSL security included.</em> - </span> - - <!-- #2ii --> - <span>$49/mo</span> + <em>Use your own custom domain with SSL security included.</em> + </span> + + <!-- #2ii --> + <span>$49/mo</span> -</label> +</label> </code></pre> + <ol> -<li><p>This input will be hidden via <code>position:absolute</code> by default. All checkbox inputs need to share the same <code>name</code> value and all checkboxes require their our custom <code>id</code> that will link with the corresponding <code>for</code> value on the label.</p> -</li> -<li>This label needs it's <code>for</code> value to correspond with it's partnered checkbox.</li> +<li><p>This input will be hidden via <code>position:absolute</code> by default. All checkbox inputs need to share the same <code>name</code> value and all checkboxes require their our custom <code>id</code> that will link with the corresponding <code>for</code> value on the label.</p></li> +<li><p>This label needs it’s <code>for</code> value to correspond with it’s partnered checkbox.</p> + +<ul> +<li>i) The first span holds the title and description information of the add-on</li> +<li>ii) The last span holds the cost associated with the current add-on</li> +</ul></li> </ol> -<p> - i) The first span holds the title and description information of the add-on - - ii) The last span holds the cost associated with the current add-on</p> -<h3>The total cost container output</h3> -<pre><code><!-- #1 --> -<div class="total-cost"> - <h2>Your Plan</h2> +<h3 id="the-total-cost-container-output">The total cost container output</h3> - <!-- #2 --> - <div> +<pre><code><!-- #1 --> +<div class="total-cost"> - <!-- #2i --> - <span>$</span> + <h2>Your Plan</h2> - <!-- #2ii --> - <span id="total-cost-inner">0</span> + <!-- #2 --> + <div> - <!-- #2iii --> - <input id="output" type="text" value="0" disabled/> + <!-- #2i --> + <span>$</span> - <!-- #2iv --> - <span>/mo</span> + <!-- #2ii --> + <span id="total-cost-inner">0</span> - </div> + <!-- #2iii --> + <input id="output" type="text" value="0" disabled/> -</div> + <!-- #2iv --> + <span>/mo</span> + + </div> + +</div> </code></pre> + <ol> -<li><p>A simple <code>div</code> with a class we can easily target later</p> -</li> -<li><p>A <code>div</code> parent container is needed to house all the total <code>spans</code> together (more on this when we get into the CSS) - - i) The first <code>span</code> holds the static currency symbol - - ii) The second <code>span</code> is where our updated cost will be injected - - iii) This input field is required for us to take-in the <code>value</code> of the associated <code>:checked</code> inputs and add them together. This current value is then used for the injection into the second <code>span</code> - - iv) The final <code>span</code> simply holds the static monthly duration content</p> -</li> +<li><p>A simple <code>div</code> with a class we can easily target later</p></li> +<li><p>A <code>div</code> parent container is needed to house all the total <code>spans</code> together (more on this when we get into the CSS)</p> + +<ul> +<li>i) The first <code>span</code> holds the static currency symbol</li> +<li>ii) The second <code>span</code> is where our updated cost will be injected</li> +<li>iii) This input field is required for us to take-in the <code>value</code> of the associated <code>:checked</code> inputs and add them together. This current value is then used for the injection into the second <code>span</code></li> +<li>iv) The final <code>span</code> simply holds the static monthly duration content</li> +</ul></li> </ol> -<p>All that's all we need for the HTML!</p> -<h2>The Visuals (CSS)</h2> + +<p>All that’s all we need for the HTML!</p> + +<h2 id="the-visuals-css">The Visuals (CSS)</h2> + <p>Again, lets take a look at the entire file before we break it down step-by-step:</p> + <pre><code>.checkbox-label { align-items: center; background-color: none; @@ -153,7 +177,7 @@ background-size: 15px; border: 1px solid lightgrey; border-radius: 50%; - content:''; + content:''; height: 30px; left: 20px; position: absolute; @@ -163,7 +187,7 @@ } .checkbox-label:hover:before { background-image: - url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23.571429" height="23.571429" viewBox="0.000000 -47.142857 23.571429 23.571429"><path fill="lightgrey" d="M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286"></path></svg>'); + url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23.571429" height="23.571429" viewBox="0.000000 -47.142857 23.571429 23.571429"><path fill="lightgrey" d="M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286"></path></svg>'); } .checkbox-label span { -webkit-user-select: none; @@ -189,7 +213,7 @@ .checkbox-btn:checked + .checkbox-label:before { background-color: mediumpurple; background-image: - url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25.948661" height="19.888393" viewBox="2.025670 -40.011161 25.948661 19.888393"><path fill="white" d="M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232"></path></svg>'); + url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25.948661" height="19.888393" viewBox="2.025670 -40.011161 25.948661 19.888393"><path fill="white" d="M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232"></path></svg>'); border-color: mediumpurple; } @@ -228,11 +252,13 @@ } } </code></pre> -<h3>The checkbox label</h3> -<pre><code>/* -This is the main element for each checkbox "container". + +<h3 id="the-checkbox-label">The checkbox label</h3> + +<pre><code>/* +This is the main element for each checkbox "container". Inside it houses the title, description and price. -*/ +*/ .checkbox-label { align-items: center; background-color: none; @@ -252,29 +278,32 @@ Inside it houses the title, description and price. background-color: rgba(255,255,255,0.2); } -/* Update the label styling when the input is :checked */ +/* Update the label styling when the input is :checked */ .checkbox-btn:checked + .checkbox-label { background-color: white; border-color: mediumpurple; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } </code></pre> -<h3>The custom checkbox input</h3> -<p>We need to hide the browser's default checkbox input and replace it with our own using pseudo selectors.</p> -<pre><code>/* Hide browser default input */ + +<h3 id="the-custom-checkbox-input">The custom checkbox input</h3> + +<p>We need to hide the browser’s default checkbox input and replace it with our own using pseudo selectors.</p> + +<pre><code>/* Hide browser default input */ .checkbox-btn { position: absolute; visibility: hidden; } -/* Our custom input checkbox */ +/* Our custom input checkbox */ .checkbox-label:before { background-repeat: no-repeat; background-position: center; background-size: 15px; border: 1px solid lightgrey; border-radius: 50%; - content:''; + content:''; height: 30px; left: 20px; position: absolute; @@ -283,30 +312,33 @@ Inside it houses the title, description and price. width: 30px; } -/* -Here we add a simple '+' icon on hover +/* +Here we add a simple '+' icon on hover to our custom pseudo element. Adding it as an inline SVG gives us the -ability to fully customize it's styling -*/ +ability to fully customize it's styling +*/ .checkbox-label:hover:before { background-image: - url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23.571429" height="23.571429" viewBox="0.000000 -47.142857 23.571429 23.571429"><path fill="lightgrey" d="M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286"></path></svg>'); + url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23.571429" height="23.571429" viewBox="0.000000 -47.142857 23.571429 23.571429"><path fill="lightgrey" d="M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286"></path></svg>'); } -/* +/* When the checkbox input is :checked we need to update the inline SVG to use a checkmark symbol -*/ +*/ .checkbox-btn:checked + .checkbox-label:before { background-color: mediumpurple; background-image: - url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25.948661" height="19.888393" viewBox="2.025670 -40.011161 25.948661 19.888393"><path fill="white" d="M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232"></path></svg>'); + url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25.948661" height="19.888393" viewBox="2.025670 -40.011161 25.948661 19.888393"><path fill="white" d="M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232"></path></svg>'); border-color: mediumpurple; } </code></pre> -<h3>The total cost container</h3> -<p>We only need some very basic flexbox styling for our bottom "total" container:</p> + +<h3 id="the-total-cost-container">The total cost container</h3> + +<p>We only need some very basic flexbox styling for our bottom “total” container:</p> + <pre><code>.total-cost { align-items: baseline; border-top: 1px solid lightgrey; @@ -328,21 +360,24 @@ update the inline SVG to use a checkmark symbol font-weight: bold; } -/* +/* This input is used in our JavaScript - look at the function part of this post to understand why -*/ +*/ .total-cost input { display: none; } </code></pre> -<h3>Last but not least - mobile</h3> + +<h3 id="last-but-not-least---mobile">Last but not least - mobile</h3> + <p>Now we just ensure that on smaller devices our checkbox labels render nicely:</p> + <pre><code>@media(max-width:480px) { - /* + /* Avoids the inner label content from squishing together and becoming unreadable - */ + */ .checkbox-label { align-items: flex-start; flex-direction: column; @@ -353,39 +388,44 @@ function part of this post to understand why } } </code></pre> -<p>That's it for the styling!</p> -<h2>The Function (JS)</h2> -<p>As you can see below, we only need a very minor amount of JavaScript to accomplish our total cost "injection".</p> + +<p>That’s it for the styling!</p> + +<h2 id="the-function-js">The Function (JS)</h2> + +<p>As you can see below, we only need a very minor amount of JavaScript to accomplish our total cost “injection”.</p> + <pre><code>window.onload=function(){ -// Place the default browser checkbox inputs into a variable -var inputs = document.getElementsByClassName('checkbox-btn') +// Place the default browser checkbox inputs into a variable +var inputs = document.getElementsByClassName('checkbox-btn') -// Now we loop through the inputs and check if they are -// greater than zero. If so, we run our function. -for (var i=0; i < inputs.length; i++) { +// Now we loop through the inputs and check if they are +// greater than zero. If so, we run our function. +for (var i=0; i < inputs.length; i++) { inputs[i].onchange = function() { - // Create `add` variable which takes the :checked input value + // Create `add` variable which takes the :checked input value var add = this.value * (this.checked ? 1 : -1); - // We grab the current total value on our hidden input field and return it - // as a floating point number - // (since in this use case it will be a price number based on currency) - var new_total = parseFloat(document.getElementById('output').value); + // We grab the current total value on our hidden input field and return it + // as a floating point number + // (since in this use case it will be a price number based on currency) + var new_total = parseFloat(document.getElementById('output').value); - // Now we simply add the existing total value with the newly ":checked" input value - var updated_total = document.getElementById('output').value=new_total + add + // Now we simply add the existing total value with the newly ":checked" input value + var updated_total = document.getElementById('output').value=new_total + add - // Place the new updated total directly inside the `total-cost-inner` span element - document.getElementById('total-cost-inner').innerHTML = updated_total; + // Place the new updated total directly inside the `total-cost-inner` span element + document.getElementById('total-cost-inner').innerHTML = updated_total; } } } </code></pre> -<p>That's it! Feel free to play with the demo some more at the top of the post, or check out the <a href="https://codepen.io/bradleytaunt/pen/rXWEpy">CodePen source directly</a>.</p> + +<p>That’s it! Feel free to play with the demo some more at the top of the post, or check out the <a href="https://codepen.io/bradleytaunt/pen/rXWEpy">CodePen source directly</a>.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/easy-custom-radio-inputs/index.html b/build/easy-custom-radio-inputs/index.html index 58dc8f4..c96a469 100644 --- a/build/easy-custom-radio-inputs/index.html +++ b/build/easy-custom-radio-inputs/index.html @@ -1,62 +1,86 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Easy Custom Radio Inputs</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Easy Custom Radio Inputs</h1> +<h1 id="easy-custom-radio-inputs">Easy Custom Radio Inputs</h1> + <p>2019-01-21</p> -<p>Default radio inputs are notoriously horrible looking and are something designers tend to over-think when trying to customize them. Let's walk through how to create custom radio buttons with <em>pure CSS</em>, while still preserving performance and accessibility.</p> -<h2>The Final Product</h2> + +<p>Default radio inputs are notoriously horrible looking and are something designers tend to over-think when trying to customize them. Let’s walk through how to create custom radio buttons with <em>pure CSS</em>, while still preserving performance and accessibility.</p> + +<h2 id="the-final-product">The Final Product</h2> + <p>This is what we will be designing:</p> + <p><img src="/public/images/custom-radio-inputs.png" alt="Custom radio inputs" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/oNjwMyX">Live CodePen Example</a></p> -<hr /> -<h2>The bones of our radio inputs (HTML)</h2> -<pre><code><input class="radio-btn" name="radio-collection" id="radio-1" type="radio"> -<label class="radio-label" for="radio-1"><span>I am very satisfied</span></label> -<input class="radio-btn" name="radio-collection" id="radio-2" type="radio"> -<label class="radio-label" for="radio-2"><span>I am satisfied</span></label> +<hr/> + +<h2 id="the-bones-of-our-radio-inputs-html">The bones of our radio inputs (HTML)</h2> + +<pre><code><input class="radio-btn" name="radio-collection" id="radio-1" type="radio"> +<label class="radio-label" for="radio-1"><span>I am very satisfied</span></label> -<input class="radio-btn" name="radio-collection" id="radio-3" type="radio"> -<label class="radio-label" for="radio-3"><span>I am indifferent</span></label> +<input class="radio-btn" name="radio-collection" id="radio-2" type="radio"> +<label class="radio-label" for="radio-2"><span>I am satisfied</span></label> -<input class="radio-btn" name="radio-collection" id="radio-4" type="radio"> -<label class="radio-label" for="radio-4"><span>I am unsatisfied</span></label> +<input class="radio-btn" name="radio-collection" id="radio-3" type="radio"> +<label class="radio-label" for="radio-3"><span>I am indifferent</span></label> -<input class="radio-btn" name="radio-collection" id="radio-5" type="radio"> -<label class="radio-label" for="radio-5"><span>I am very unsatisfied</span></label> +<input class="radio-btn" name="radio-collection" id="radio-4" type="radio"> +<label class="radio-label" for="radio-4"><span>I am unsatisfied</span></label> + +<input class="radio-btn" name="radio-collection" id="radio-5" type="radio"> +<label class="radio-label" for="radio-5"><span>I am very unsatisfied</span></label> </code></pre> -<p>I know it looks like a lot is going on here, but it's pretty straightforward so let's unpackage line by line:</p> -<h3>Radio inputs</h3> -<pre><code><input class="radio-btn" name="radio-collection" id="radio-1" type="radio"> + +<p>I know it looks like a lot is going on here, but it’s pretty straightforward so let’s unpackage line by line:</p> + +<h3 id="radio-inputs">Radio inputs</h3> + +<pre><code><input class="radio-btn" name="radio-collection" id="radio-1" type="radio"> </code></pre> + <p>This is the default <code>radio</code> input. We give it:</p> + <ul> <li>a <code>name</code> (inputs with a shared <code>name</code> are grouped together)</li> <li>an <code>id</code> (so our label can target this input)</li> <li>a <code>class</code> (so we can style it later)</li> </ul> -<p><strong>Important</strong>: be sure to have a unique <code>id</code> for each input so your labels don't end up connected to multiple radios. In this demo we are simply incrementing them by one.</p> -<h3>Labels</h3> -<p>Adding the labels is fairly straightforward, we just include the corresponding input's <code>id</code> in the label's <code>for</code> attribute. The label content is wrapped in a <code>span</code> - which I will explain the reasoning for later.</p> + +<p><strong>Important</strong>: be sure to have a unique <code>id</code> for each input so your labels don’t end up connected to multiple radios. In this demo we are simply incrementing them by one.</p> + +<h3 id="labels">Labels</h3> + +<p>Adding the labels is fairly straightforward, we just include the corresponding input’s <code>id</code> in the label’s <code>for</code> attribute. The label content is wrapped in a <code>span</code> - which I will explain the reasoning for later.</p> + <p>For styling purposes we also add the <code>radio-label</code> class.</p> -<pre><code><label class="radio-label" for="radio-1"><span>I am very satisfied</span></label> + +<pre><code><label class="radio-label" for="radio-1"><span>I am very satisfied</span></label> </code></pre> -<p>This is looking pretty terrible - but that's nothing some good ol' CSS can't fix!</p> -<h2>The flesh of our radio inputs (CSS)</h2> + +<p>This is looking pretty terrible - but that’s nothing some good ol’ CSS can’t fix!</p> + +<h2 id="the-flesh-of-our-radio-inputs-css">The flesh of our radio inputs (CSS)</h2> + <p>First we give some basic styling to our <code>label</code> and <code>input</code> classes (along with hover states). The <code>radio</code> element is actually hidden from view, but by using the <code>visibility</code> attribute we still keep it accessible for screen-readers.</p> + <pre><code>.radio-label { background: white; border: 1px solid #eee; @@ -66,7 +90,7 @@ display: inline-block; font-weight: 600; margin: 0 auto 10px; - /* This 65px padding makes room for the custom input */ + /* This 65px padding makes room for the custom input */ padding: 20px 20px 20px 65px; position: relative; transition: .3s ease all; @@ -80,44 +104,55 @@ visibility: hidden; } </code></pre> -<p>Remember that <code>span</code> element inside the label? We set it's <code>user-select</code> property to <code>none</code> so we avoid any possible issue with the user selecting the text on-click:</p> + +<p>Remember that <code>span</code> element inside the label? We set it’s <code>user-select</code> property to <code>none</code> so we avoid any possible issue with the user selecting the text on-click:</p> + <pre><code>.radio-label span { -webkit-user-select: none; -moz-user-select: none; user-select: none; } </code></pre> + <p>Next we include the default empty selection element (to mimic the original radio input) via a pseudo element:</p> + <pre><code>.radio-label:before { background: #eee; border-radius: 50%; - content:''; + content:''; height: 30px; left: 20px; position: absolute; - /* Half the height of it's parent minus half of it's own height */ + /* Half the height of it's parent minus half of it's own height */ top: calc(50% - 15px); transition: .3s ease background-color; width: 30px; } </code></pre> -<h2>A Few Final Steps</h2> + +<h2 id="a-few-final-steps">A Few Final Steps</h2> + <p>The final step is adding the custom styling for when an <code>input</code> item is selected (<code>:checked</code>).</p> + <p>You will notice the use of a <code>base64</code> element for the custom checkmark - feel free to subsitute this for an actual image or none at all (this is just my personal design preference).</p> + <pre><code>.radio-btn:checked + .radio-label { background: #ECF5FF; border-color: #4A90E2; } .radio-btn:checked + .radio-label:before { background-color: #4A90E2; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+'); + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+'); background-repeat: no-repeat; background-position: center; background-size: 15px; } </code></pre> -<p><strong>And that's it.</strong></p> + +<p><strong>And that’s it.</strong></p> + <p>For easier reference the entire CSS file can be found below:</p> + <pre><code>.radio-label { background: white; border: 1px solid #eee; @@ -138,7 +173,7 @@ .radio-label:before { background: #eee; border-radius: 50%; - content:''; + content:''; height: 30px; left: 20px; position: absolute; @@ -161,16 +196,21 @@ } .radio-btn:checked + .radio-label:before { background-color: #4A90E2; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+'); + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+'); background-repeat: no-repeat; background-position: center; background-size: 15px; } </code></pre> -<hr /> -<h2>But wait - we can get even fancier!</h2> -<p>Since this demo is based off a survey-type questionaire, wouldn't it be interesting to give the different selectable options their own styling based on their context? Take a look at the further customized version below:</p> + +<hr/> + +<h2 id="but-wait---we-can-get-even-fancier">But wait - we can get even fancier!</h2> + +<p>Since this demo is based off a survey-type questionaire, wouldn’t it be interesting to give the different selectable options their own styling based on their context? Take a look at the further customized version below:</p> + <p>We can do so by adding <code>positive</code>, <code>neutral</code> and <code>negative</code> class names to the radio inputs with their own respective properties:</p> + <pre><code>.radio-btn.positive:checked + .radio-label { background: #EAFFF6; border-color: #32B67A; @@ -179,7 +219,7 @@ background-color: #32B67A; } .radio-btn.neutral:checked + .radio-label:before { - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAtMTUgMzAgOC41NzE0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PCEtLUdlbmVyYXRlZCBieSBJSlNWRyAoaHR0cHM6Ly9naXRodWIuY29tL2ljb25qYXIvSUpTVkcpLS0+PHBhdGggZD0iTTMwLC0xMi4zMjE0djMuMjE0MjljMCwwLjczNjYwNyAtMC4yNjIyNzcsMS4zNjcxOSAtMC43ODY4MywxLjg5MTc0Yy0wLjUyNDU1NCwwLjUyNDU1NCAtMS4xNTUxMywwLjc4NjgzMSAtMS44OTE3NCwwLjc4NjgzMWgtMjQuNjQyOWMtMC43MzY2MDcsMCAtMS4zNjcxOSwtMC4yNjIyNzcgLTEuODkxNzQsLTAuNzg2ODMxYy0wLjUyNDU1MywtMC41MjQ1NTMgLTAuNzg2ODMsLTEuMTU1MTMgLTAuNzg2ODMsLTEuODkxNzR2LTMuMjE0MjljMCwtMC43MzY2MDcgMC4yNjIyNzcsLTEuMzY3MTkgMC43ODY4MywtMS44OTE3NGMwLjUyNDU1NCwtMC41MjQ1NTMgMS4xNTUxMywtMC43ODY4MyAxLjg5MTc0LC0wLjc4NjgzaDI0LjY0MjljMC43MzY2MDcsMCAxLjM2NzE5LDAuMjYyMjc3IDEuODkxNzQsMC43ODY4M2MwLjUyNDU1MywwLjUyNDU1NCAwLjc4NjgzLDEuMTU1MTMgMC43ODY4MywxLjg5MTc0WiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg=='); + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAtMTUgMzAgOC41NzE0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PCEtLUdlbmVyYXRlZCBieSBJSlNWRyAoaHR0cHM6Ly9naXRodWIuY29tL2ljb25qYXIvSUpTVkcpLS0+PHBhdGggZD0iTTMwLC0xMi4zMjE0djMuMjE0MjljMCwwLjczNjYwNyAtMC4yNjIyNzcsMS4zNjcxOSAtMC43ODY4MywxLjg5MTc0Yy0wLjUyNDU1NCwwLjUyNDU1NCAtMS4xNTUxMywwLjc4NjgzMSAtMS44OTE3NCwwLjc4NjgzMWgtMjQuNjQyOWMtMC43MzY2MDcsMCAtMS4zNjcxOSwtMC4yNjIyNzcgLTEuODkxNzQsLTAuNzg2ODMxYy0wLjUyNDU1MywtMC41MjQ1NTMgLTAuNzg2ODMsLTEuMTU1MTMgLTAuNzg2ODMsLTEuODkxNzR2LTMuMjE0MjljMCwtMC43MzY2MDcgMC4yNjIyNzcsLTEuMzY3MTkgMC43ODY4MywtMS44OTE3NGMwLjUyNDU1NCwtMC41MjQ1NTMgMS4xNTUxMywtMC43ODY4MyAxLjg5MTc0LC0wLjc4NjgzaDI0LjY0MjljMC43MzY2MDcsMCAxLjM2NzE5LDAuMjYyMjc3IDEuODkxNzQsMC43ODY4M2MwLjUyNDU1MywwLjUyNDU1NCAwLjc4NjgzLDEuMTU1MTMgMC43ODY4MywxLjg5MTc0WiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg=='); } .radio-btn.negative:checked + .radio-label { background: #FFF2F2; @@ -187,10 +227,11 @@ } .radio-btn.negative:checked + .radio-label:before { background-color: #E75153; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIxLjg1MTg1IC0zOS42OTcgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjwhLS1HZW5lcmF0ZWQgYnkgSUpTVkcgKGh0dHBzOi8vZ2l0aHViLmNvbS9pY29uamFyL0lKU1ZHKS0tPjxwYXRoIGQ9Ik0yMS43Mjk5LC0yMy40NzFjMCwwLjQ0NjQyOCAtMC4xNTYyNSwwLjgyNTg5MyAtMC40Njg3NSwxLjEzODM5bC0yLjI3Njc5LDIuMjc2NzljLTAuMzEyNSwwLjMxMjUgLTAuNjkxOTY0LDAuNDY4NzUgLTEuMTM4MzksMC40Njg3NWMtMC40NDY0MjgsMCAtMC44MjU4OTMsLTAuMTU2MjUgLTEuMTM4MzksLTAuNDY4NzVsLTQuOTIxODcsLTQuOTIxODhsLTQuOTIxODgsNC45MjE4OGMtMC4zMTI1LDAuMzEyNSAtMC42OTE5NjQsMC40Njg3NSAtMS4xMzgzOSwwLjQ2ODc1Yy0wLjQ0NjQyOCwwIC0wLjgyNTg5MiwtMC4xNTYyNSAtMS4xMzgzOSwtMC40Njg3NWwtMi4yNzY3OSwtMi4yNzY3OWMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY1IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI5IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsNC45MjE4OCwtNC45MjE4OGwtNC45MjE4OCwtNC45MjE4OGMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY0IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI4IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsMi4yNzY3OSwtMi4yNzY3OGMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI5LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsNC45MjE4OCw0LjkyMTg4bDQuOTIxODcsLTQuOTIxODhjMC4zMTI1LC0wLjMxMjUgMC42OTE5NjUsLTAuNDY4NzUgMS4xMzgzOSwtMC40Njg3NWMwLjQ0NjQyOSwwIDAuODI1ODkzLDAuMTU2MjUgMS4xMzgzOSwwLjQ2ODc1bDIuMjc2NzksMi4yNzY3OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjUgMC40Njg3NSwxLjEzODM5YzAsMC40NDY0MjkgLTAuMTU2MjUsMC44MjU4OTMgLTAuNDY4NzUsMS4xMzgzOWwtNC45MjE4OCw0LjkyMTg4bDQuOTIxODgsNC45MjE4OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjQgMC40Njg3NSwxLjEzODM5WiIgdHJhbnNmb3JtPSJzY2FsZSgxLjAwNTYxKSIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg=='); + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIxLjg1MTg1IC0zOS42OTcgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjwhLS1HZW5lcmF0ZWQgYnkgSUpTVkcgKGh0dHBzOi8vZ2l0aHViLmNvbS9pY29uamFyL0lKU1ZHKS0tPjxwYXRoIGQ9Ik0yMS43Mjk5LC0yMy40NzFjMCwwLjQ0NjQyOCAtMC4xNTYyNSwwLjgyNTg5MyAtMC40Njg3NSwxLjEzODM5bC0yLjI3Njc5LDIuMjc2NzljLTAuMzEyNSwwLjMxMjUgLTAuNjkxOTY0LDAuNDY4NzUgLTEuMTM4MzksMC40Njg3NWMtMC40NDY0MjgsMCAtMC44MjU4OTMsLTAuMTU2MjUgLTEuMTM4MzksLTAuNDY4NzVsLTQuOTIxODcsLTQuOTIxODhsLTQuOTIxODgsNC45MjE4OGMtMC4zMTI1LDAuMzEyNSAtMC42OTE5NjQsMC40Njg3NSAtMS4xMzgzOSwwLjQ2ODc1Yy0wLjQ0NjQyOCwwIC0wLjgyNTg5MiwtMC4xNTYyNSAtMS4xMzgzOSwtMC40Njg3NWwtMi4yNzY3OSwtMi4yNzY3OWMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY1IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI5IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsNC45MjE4OCwtNC45MjE4OGwtNC45MjE4OCwtNC45MjE4OGMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY0IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI4IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsMi4yNzY3OSwtMi4yNzY3OGMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI5LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsNC45MjE4OCw0LjkyMTg4bDQuOTIxODcsLTQuOTIxODhjMC4zMTI1LC0wLjMxMjUgMC42OTE5NjUsLTAuNDY4NzUgMS4xMzgzOSwtMC40Njg3NWMwLjQ0NjQyOSwwIDAuODI1ODkzLDAuMTU2MjUgMS4xMzgzOSwwLjQ2ODc1bDIuMjc2NzksMi4yNzY3OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjUgMC40Njg3NSwxLjEzODM5YzAsMC40NDY0MjkgLTAuMTU2MjUsMC44MjU4OTMgLTAuNDY4NzUsMS4xMzgzOWwtNC45MjE4OCw0LjkyMTg4bDQuOTIxODgsNC45MjE4OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjQgMC40Njg3NSwxLjEzODM5WiIgdHJhbnNmb3JtPSJzY2FsZSgxLjAwNTYxKSIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg=='); } </code></pre> -<p>I hope this shows new designers that simple custom radio inputs aren't so hard to implement after-all and can actually be pretty fun to design.</p> + +<p>I hope this shows new designers that simple custom radio inputs aren’t so hard to implement after-all and can actually be pretty fun to design.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/easy-toggle-switches/index.html b/build/easy-toggle-switches/index.html index 5120d90..b84f921 100644 --- a/build/easy-toggle-switches/index.html +++ b/build/easy-toggle-switches/index.html @@ -1,49 +1,65 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Easy Toggle Switches</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Easy Toggle Switches</h1> +<h1 id="easy-toggle-switches">Easy Toggle Switches</h1> + <p>2019-02-18</p> + <p>Sometimes there is a need to use toggle elements in-place of the default <code>checkbox</code> inputs. The problem is, I tend to see a lot of developers reaching for plugins or JavaScript components in order to implement these toggles.</p> + <p><em>This is overkill</em>. You can create your own custom <code>input</code> elements to mimic toggles perfectly with just a small amount of CSS.</p> -<h2>What we will be building</h2> + +<h2 id="what-we-will-be-building">What we will be building</h2> + <p><img src="/public/images/easy-toggle-switches.png" alt="Easy toggle switches" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/bGgbajY">Live CodePen Example</a></p> -<h2>The HTML</h2> + +<h2 id="the-html">The HTML</h2> + <p>The build structure for these toggles is really simple, we only need:</p> + <ul> -<li>a parent container to hold all our corresponding elements</li> -<li>a checkbox <code>input</code> element (which we will hide)</li> -<li>an empty label designed to represent the slider</li> -<li>a text label that references the <code>input</code> </li> +<li><p>a parent container to hold all our corresponding elements</p></li> +<li><p>a checkbox <code>input</code> element (which we will hide)</p></li> +<li><p>an empty label designed to represent the slider</p></li> +<li><p>a text label that references the <code>input</code> </p> + +<p>/* Main toggle parent container <em>/ + + /</em> Checkbox input, hidden with CSS <em>/ + + /</em> The toggle slider element <em>/ + + /</em> The text label to the right of the slider */ + Toggle Switch +</p></li> </ul> -<pre><code>/* Main toggle parent container */ -<div class="toggle-switch"> - /* Checkbox input, hidden with CSS */ - <input class="toggle-input" type="checkbox" id="toggle-1"> - /* The toggle slider element */ - <label class="toggle-slider" for="toggle-1"></label> - /* The text label to the right of the slider */ - <label class="toggle-label" for="toggle-1">Toggle Switch</label> -</div> -</code></pre> -<p>And that's everything we need for the HTML.</p> -<p><strong>ProTip:</strong> Don't forget to increment both the <code>id</code> and <code>for</code> attributes when adding additional toggles. This seems like a no-brainer but it's overlooked more than you think.</p> -<h2>The CSS</h2> + +<p>And that’s everything we need for the HTML.</p> + +<p><strong>ProTip:</strong> Don’t forget to increment both the <code>id</code> and <code>for</code> attributes when adding additional toggles. This seems like a no-brainer but it’s overlooked more than you think.</p> + +<h2 id="the-css">The CSS</h2> + <p>To get things started we will add the styling to the <code>.toggle-switch</code> item directly (using <code>flexbox</code> in this demo for easier layout).</p> -<p><strong>Sidenote</strong>: You will notice the inclusion of CSS variables in this demo - if you are unfamiliar with how to use root variables in CSS, take a look at one of my previous posts: <a href="https://accssible.com/2018/03/24/css-variables/">CSS variables</a>.</p> + +<p><strong>Sidenote</strong>: You will notice the inclusion of CSS variables in this demo - if you are unfamiliar with how to use root variables in CSS, take a look at one of my previous posts: CSS variables.</p> + <pre><code>:root { --primary-color: #4A90E2; } @@ -56,14 +72,18 @@ margin: 20px 0; } </code></pre> -<p>Next we will hide the default browser checkbox element since we won't be needing it:</p> + +<p>Next we will hide the default browser checkbox element since we won’t be needing it:</p> + <pre><code>.toggle-input { position: absolute; visibility: hidden; z-index: -1; } </code></pre> -<p>Let's also add some base styling for the <code>label</code> containing the text corresponding to it's <code>input</code> sibling:</p> + +<p>Let’s also add some base styling for the <code>label</code> containing the text corresponding to it’s <code>input</code> sibling:</p> + <pre><code>.toggle-label { color: #ccc; cursor: pointer; @@ -73,8 +93,10 @@ transition: ease all .3s; } </code></pre> + <p>Now we target the <code>.toggle-slider</code> label and add the styling for the main slider base:</p> -<pre><code>/* This is just the main slider base */ + +<pre><code>/* This is just the main slider base */ .toggle-slider { background: #eee; border-radius: 9999px; @@ -89,13 +111,15 @@ width: 40px; } </code></pre> + <p>We <em>could</em> include a separate element for the circle toggle switcher itself, but instead we will use the <code>:before</code> pseudo element:</p> + <pre><code>.toggle-slider:before { background: white; border-radius: 9999px; box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.2); - content:''; + content:''; height: 16px; left: 2px; position: absolute; @@ -104,13 +128,16 @@ width: 16px; } </code></pre> -<h3>Interaction</h3> -<p>Right now we just have a static toggle that does nothing when the user interacts with it. Let's change that by moving the pseudo element's position based on the checkbox <code>input</code> state and updating the label text color:</p> + +<h3 id="interaction">Interaction</h3> + +<p>Right now we just have a static toggle that does nothing when the user interacts with it. Let’s change that by moving the pseudo element’s position based on the checkbox <code>input</code> state and updating the label text color:</p> + <pre><code>.toggle-input:checked + .toggle-slider { background: var(--primary-color); } .toggle-input:checked + .toggle-slider:before { - /* Move 100% of the width minus it's own width plus initial 'left' */ + /* Move 100% of the width minus it's own width plus initial 'left' */ left: calc(100% - 18px); } @@ -118,32 +145,39 @@ color: var(--primary-color); } </code></pre> + <p>And because we already included the <code>transition</code> property on both the base slider and label text, everything animates nicely between state changes.</p> -<h2>Final code</h2> -<p>To make things easier, you can find the HTML & CSS is their entirety below:</p> -<h3>HTML</h3> -<pre><code><div class="toggle-switch"> - <input class="toggle-input" type="checkbox" id="toggle-1"> - <label class="toggle-slider" for="toggle-1"></label> - <label class="toggle-label" for="toggle-1">Toggle Switch</label> -</div> -<div class="toggle-switch"> - <input class="toggle-input" type="checkbox" id="toggle-2"> - <label class="toggle-slider" for="toggle-2"></label> - <label class="toggle-label" for="toggle-2">Toggle Switch</label> -</div> -<div class="toggle-switch"> - <input class="toggle-input" type="checkbox" id="toggle-3" checked> - <label class="toggle-slider" for="toggle-3"></label> - <label class="toggle-label" for="toggle-3">Toggle Switch</label> -</div> -<div class="toggle-switch"> - <input class="toggle-input" type="checkbox" id="toggle-4"> - <label class="toggle-slider" for="toggle-4"></label> - <label class="toggle-label" for="toggle-4">Toggle Switch</label> -</div> + +<h2 id="final-code">Final code</h2> + +<p>To make things easier, you can find the HTML & CSS is their entirety below:</p> + +<h3 id="html">HTML</h3> + +<pre><code><div class="toggle-switch"> + <input class="toggle-input" type="checkbox" id="toggle-1"> + <label class="toggle-slider" for="toggle-1"></label> + <label class="toggle-label" for="toggle-1">Toggle Switch</label> +</div> +<div class="toggle-switch"> + <input class="toggle-input" type="checkbox" id="toggle-2"> + <label class="toggle-slider" for="toggle-2"></label> + <label class="toggle-label" for="toggle-2">Toggle Switch</label> +</div> +<div class="toggle-switch"> + <input class="toggle-input" type="checkbox" id="toggle-3" checked> + <label class="toggle-slider" for="toggle-3"></label> + <label class="toggle-label" for="toggle-3">Toggle Switch</label> +</div> +<div class="toggle-switch"> + <input class="toggle-input" type="checkbox" id="toggle-4"> + <label class="toggle-slider" for="toggle-4"></label> + <label class="toggle-label" for="toggle-4">Toggle Switch</label> +</div> </code></pre> -<h3>The CSS</h3> + +<h3 id="the-css-1">The CSS</h3> + <pre><code>:root { --primary-color: #4A90E2; } @@ -177,7 +211,7 @@ border-radius: 9999px; box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.2); - content:''; + content:''; height: 16px; left: 2px; position: absolute; @@ -203,6 +237,7 @@ color: var(--primary-color); } </code></pre> + <p>Enjoy your custom toggles!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/eero/index.html b/build/eero/index.html index b1dec87..08ff7a3 100644 --- a/build/eero/index.html +++ b/build/eero/index.html @@ -1,111 +1,157 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Setting Up a Pi-hole Server with Eero</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Setting Up a Pi-hole Server with Eero</h1> +<h1 id="setting-up-a-pi-hole-server-with-eero">Setting Up a Pi-hole Server with Eero</h1> + <p>2022-03-14</p> -<p>For the past few years, I've been using a set of Eero routers as my home mesh network. It's worked fairly great in that time and even seamlessly transitioned without any hiccups when my family moved house. During the initial setup, I installed <a href="https://pi-hole.net">Pi-hole</a> on a Raspberry Pi Zero WH because advertisements and tracking scripts suck.</p> + +<p>For the past few years, I’ve been using a set of Eero routers as my home mesh network. It’s worked fairly great in that time and even seamlessly transitioned without any hiccups when my family moved house. During the initial setup, I installed Pi-hole on a Raspberry Pi Zero WH because advertisements and tracking scripts suck.</p> + <p>It was an easy process to get everything up and running, but I did notice a lack of detailed steps online for those specifically using Eero systems. So, I thought I would document this process here with the hope that it will help someone else along the way (or at the very least remain a semi-permanent place for my own reference).</p> -<hr /> -<p>FYI: You can pay for Eero Secure and allow them to handle ad/tracker blocking for you. Personally, I prefer to have complete control over my blocklists and usage data. YMMV.</p> -<hr /> -<h2>Setting Up the Pi-hole Server</h2> -<p>Before we get into the step-by-step details, here are the required items you'll need:</p> + +<hr/> + +<p>FYI: You can pay for Eero Secure and allow them to handle ad/tracker blocking for you. Personally, I prefer to have complete control over my blocklists and usage data. YMMV.</p> + +<hr/> + +<h2 id="setting-up-the-pi-hole-server">Setting Up the Pi-hole Server</h2> + +<p>Before we get into the step-by-step details, here are the required items you’ll need:</p> + <ol> <li>Raspberry Pi device (I recommend the Pi Zero for simplicity and low cost)</li> <li>microSD card preloaded with <a href="https://www.raspberrypi.com/software/operating-systems/">Raspberry Pi OS Lite</a> (having a desktop GUI is overkill for our use case)</li> <li>micro USB to ethernet adapter (check your local Amazon)</li> <li>Patience!</li> </ol> + <p>Before you place your microSD card into the Pi and boot it up, connect it to your local computer (via USB adapter) - we will need to add some files first. Once loaded into the <code>boot</code> folder, add an empty file simply called <code>ssh</code> (no extensions). Next open your preferred text editor and enter the following code, editing the content to match your own country code and home network settings:</p> + <pre><code>country=US -ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev +ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1 network={ - ssid="WIFI_SSID" + ssid="WIFI_SSID" scan_ssid=1 - psk="WIFI_PASSWORD" + psk="WIFI_PASSWORD" key_mgmt=WPA-PSK } </code></pre> + <p>Save this file as <code>wpa_supplicant.conf</code> and add it to the <code>boot</code> directory as well.</p> + <p>You can now safely eject the microSD card and place it into your Raspberry Pi.</p> -<h2>Plug it in and Boot!</h2> -<p>Connect power to your Pi and give it a bit of time to boot up. Once you see a nice solid green LED, go back to your local computer's terminal and enter the following command:</p> + +<h2 id="plug-it-in-and-boot">Plug it in and Boot!</h2> + +<p>Connect power to your Pi and give it a bit of time to boot up. Once you see a nice solid green LED, go back to your local computer’s terminal and enter the following command:</p> + <pre><code>ssh pi@raspberrypi.local </code></pre> + <p>If everything was set up properly you will be asked to trust this device. Next, you will be prompted to enter the device password. The default password will be: <code>raspberry</code></p> -<p><strong>Important</strong>: This is assuming you don't currently have any other Pi devices using this hostname parameter!</p> -<p>Once you are connected directly to the Pi, it's best to check for updates:</p> + +<p><strong>Important</strong>: This is assuming you don’t currently have any other Pi devices using this hostname parameter!</p> + +<p>Once you are connected directly to the Pi, it’s best to check for updates:</p> + <pre><code>sudo apt update </code></pre> -<p>...and if updates are in fact available, install them via:</p> + +<p>…and if updates are in fact available, install them via:</p> + <pre><code>sudo apt upgrade </code></pre> + <p>This next step is optional but I highly recommend it for security purposes. You should change both the hostname and password of this soon-to-be Pi-hole server. To do this simply run:</p> + <pre><code>sudo raspi-config </code></pre> + <ol> -<li>Edit Hostname: navigate to <code>System Settings</code> --> <code>Hostname</code></li> -<li>Edit Password: navigate to <code>System Settings</code> --> <code>Password</code></li> +<li>Edit Hostname: navigate to <code>System Settings</code> –> <code>Hostname</code></li> +<li>Edit Password: navigate to <code>System Settings</code> –> <code>Password</code></li> </ol> -<p>Once complete, reboot the Pi. Just remember that when you try to reconnect to this device via SSH you'll need to use both of these new parameters instead of the defaults.</p> -<h2>Installing Pi-hole</h2> + +<p>Once complete, reboot the Pi. Just remember that when you try to reconnect to this device via SSH you’ll need to use both of these new parameters instead of the defaults.</p> + +<h2 id="installing-pi-hole">Installing Pi-hole</h2> + <p>This is the easy part:</p> -<pre><code>curl -sSL https://install.pi-hole.net | bash + +<pre><code>curl -sSL https://install.pi-hole.net | bash </code></pre> -<p>Pi-hole runs a full install script that walks you through step-by-step on setting things up. It's best to use the suggested defaults during the install - everything is pretty simple.</p> -<p>Near the end of the setup you'll be show the newly created static IP for this Pi-hole server (both IPv4 and IPv6). Write these down for easy reference in a moment.</p> -<p>Once it's finished, shutdown the Pi safely by running:</p> + +<p>Pi-hole runs a full install script that walks you through step-by-step on setting things up. It’s best to use the suggested defaults during the install - everything is pretty simple.</p> + +<p>Near the end of the setup you’ll be show the newly created static IP for this Pi-hole server (both IPv4 and IPv6). Write these down for easy reference in a moment.</p> + +<p>Once it’s finished, shutdown the Pi safely by running:</p> + <pre><code>sudo shutdown now </code></pre> -<h2>Hardware Setup</h2> + +<h2 id="hardware-setup">Hardware Setup</h2> + <p>With the Pi shutdown you can safely relocate it to where you have your modem and gateway Eero setup. Connect your new Pi-hole device to the secondary ethernet port on your gateway Eero[^1] and power it up. (This is where the microUSB to ethernet adapter for our Pi device is needed)</p> + <p>See the crude diagram below for visual reference:</p> -<p><figure> - <img src="/public/images/eero-pi-hole.webp" alt="Eero Pi-hole connection diagram"> - <figcaption>Internet modem --> Eero gateway --> Pi-hole device</figcaption> -</figure></p> + <ul> <li><strong>Grey Wire</strong>: Incoming internet connection from ISP</li> <li><strong>Blue Wire</strong>: Ethernet cord connecting modem to gateway Eero</li> <li><strong>Red Wire</strong>: Ethernet cord connecting secondary Eero port to Pi Zero</li> </ul> -<p>That's all we need to do on the hardware side of things.</p> -<h2>Configuring the Eero App</h2> -<p>With everything connected properly it's finally time to setup our custom DNS settings through Eero.</p> + +<p>That’s all we need to do on the hardware side of things.</p> + +<h2 id="configuring-the-eero-app">Configuring the Eero App</h2> + +<p>With everything connected properly it’s finally time to setup our custom DNS settings through Eero.</p> + <ol> <li>Open the Eero app (iOS or Android)</li> -<li>Navigate to <strong>Settings</strong> > <strong>Network Settings</strong> > <strong>DNS</strong></li> -<li>Select <strong>Customized DNS</strong> and enter both your saved IPv4 / IPv6 values</li> +<li>Navigate to <strong>Settings</strong> > <strong>Network Settings</strong> > <strong>DNS</strong></li> +<li>Select <strong>Customized DNS</strong> and enter both your saved IPv4 / IPv6 values</li> <li>Eero will prompt you to reboot your network - do it</li> </ol> -<p>Next we need to add your Pi-hole's address as an IPv4 reservation:[^2]</p> + +<p>Next we need to add your Pi-hole’s address as an IPv4 reservation:[^2]</p> + <ol> -<li>In the Eero app, navigate to <strong>Settings</strong> > <strong>Network Settings</strong> > <strong>Reservations & port forwarding</strong></li> -<li>Tap <strong>Add a reservation</strong> and include your Pi-hole's IP address</li> +<li>In the Eero app, navigate to <strong>Settings</strong> > <strong>Network Settings</strong> > <strong>Reservations & port forwarding</strong></li> +<li>Tap <strong>Add a reservation</strong> and include your Pi-hole’s IP address</li> </ol> + <p>After the system reboots everything <em>should</em> be working as intended! You can check by navigating to your Pi-hole IP address in your browser.</p> -<h2>Closing Thoughts</h2> -<p>None of this stuff if groundbreaking, but my hope is that even one person across the internet finds this helpful! If you run into any major bugs, please leave a comment below and I'll do my best to help out!</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>None of this stuff if groundbreaking, but my hope is that even one person across the internet finds this helpful! If you run into any major bugs, please leave a comment below and I’ll do my best to help out!</p> + <p>Best of luck blocking those pesky ads and trackers!</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>You don't <em>have</em> to use your Eero gateway for this step (credit: <a href="https://old.reddit.com/user/RollMeAway83">/u/RollMeAway83</a>)</li> -<li>Thanks to <a href="https://old.reddit.com/user/YankeesIT">u/YankeesIT</a> for pointing out that this is required not <em>optional</em></li> +<li>You don’t <em>have</em> to use your Eero gateway for this step (credit: <a href="https://old.reddit.com/user/RollMeAway83">/u/RollMeAway83</a>)</li> +<li>Thanks to <a href="https://old.reddit.com/user/YankeesIT">u/YankeesIT</a> for pointing out that this is required not <em>optional</em></li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/empty-table-cells/index.html b/build/empty-table-cells/index.html index 9e15e0e..a5f2a20 100644 --- a/build/empty-table-cells/index.html +++ b/build/empty-table-cells/index.html @@ -1,53 +1,74 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Styling Empty Table Cells</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Styling Empty Table Cells</h1> +<h1 id="styling-empty-table-cells">Styling Empty Table Cells</h1> + <p>2019-07-17</p> -<p>Often when designing tables on the web you're bound to come across empty pockets of data. These will be rendered as "blank" table cells, which isn't always the intended outcome. Let's take a quick look at how to target and style empty table cells.</p> -<h2>The easy <code>:empty</code> way</h2> -<p>The most popular way to target <em>any</em> empty element is by using - you guessed it - the <code>empty</code> pseudo-class. This pseudo-class is incredibly simple. You target an element's <code>empty</code> state that same way you would target <code>hover</code> or <code>active</code>:</p> + +<p>Often when designing tables on the web you’re bound to come across empty pockets of data. These will be rendered as “blank” table cells, which isn’t always the intended outcome. Let’s take a quick look at how to target and style empty table cells.</p> + +<h2 id="the-easy-way">The easy <code>:empty</code> way</h2> + +<p>The most popular way to target <em>any</em> empty element is by using - you guessed it - the <code>empty</code> pseudo-class. This pseudo-class is incredibly simple. You target an element’s <code>empty</code> state that same way you would target <code>hover</code> or <code>active</code>:</p> + <pre><code>table tr td:empty { opacity: 0; } </code></pre> + <p>Check out the CodePen examples below for more advanced styling options:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/EBBLEx/">Live CodePen Example 1</a></p> + <p>You can also include additional pseudo elements to give the user more context about what the empty cells represent:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/bPXqLa/">Live CodePen Example 2</a></p> -<h2>More specific <code>empty-cells</code> property</h2> -<p>Although using the <code>:empty</code> pseudo-class can be helpful, it isn't used just for tables. It can be used for any HTML elements that have a lack of content. So, is there a CSS specific property that can target <em>just</em> table cells? </p> -<p>Let's take a look at the <code>empty-cells</code> property:</p> + +<h2 id="more-specific-property">More specific <code>empty-cells</code> property</h2> + +<p>Although using the <code>:empty</code> pseudo-class can be helpful, it isn’t used just for tables. It can be used for any HTML elements that have a lack of content. So, is there a CSS specific property that can target <em>just</em> table cells? </p> + +<p>Let’s take a look at the <code>empty-cells</code> property:</p> + <pre><code>table { empty-cells: hide; } </code></pre> + <p><a href="https://codepen.io/bradleytaunt/pen/XLLqOW/">Live CodePen Example 3</a></p> + <p>Pros of using <code>empty-cells</code>:</p> + <ul> <li>Only one CSS property</li> <li>Targets the table elements specifically</li> <li>No need for custom styles since it simply <em>hides</em> empty cell borders</li> </ul> + <p>Some downsides to using this property:</p> + <ul> <li>No styling customization</li> <li>Trickier to use pseudo-element helpers without invoking the <code>:empty</code> state</li> </ul> -<h2>Pick your preference</h2> -<p>It doesn't matter semantically which option you decide to take when styling / hiding empty table cells. Using the <code>:empty</code> state gives you a lot more flexibility in terms of what you can target (full rows, columns etc), but using the <code>empty-cells</code> property let's you simply hide the cells and focus on more important items.</p> + +<h2 id="pick-your-preference">Pick your preference</h2> + +<p>It doesn’t matter semantically which option you decide to take when styling / hiding empty table cells. Using the <code>:empty</code> state gives you a lot more flexibility in terms of what you can target (full rows, columns etc), but using the <code>empty-cells</code> property let’s you simply hide the cells and focus on more important items.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/et-jekyll-theme/index.html b/build/et-jekyll-theme/index.html index 7a75a0b..8399d5f 100644 --- a/build/et-jekyll-theme/index.html +++ b/build/et-jekyll-theme/index.html @@ -1,24 +1,30 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>ET-Jekyll Theme</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>ET-Jekyll Theme</h1> +<h1 id="et-jekyll-theme">ET-Jekyll Theme</h1> + <p>2018-01-14</p> -<p>ET-Jekyll theme is based off of <a href="http://www.daveliepmann.com">Dave Liepmann's</a> awesome <a href="https://edwardtufte.github.io/tufte-css/">Tufte CSS</a> - which takes it's style and inspiration from the wonderful book and handout designs of <a href="https://www.edwardtufte.com/tufte/">Edward Tufte</a>.</p> -<p>The differences are subtle when comparing my variation to Tufte CSS, but these changes were made out of personal preference and are not in any way "better". If you prefer the <a href="https://edwardtufte.github.io/tufte-css/">original CSS styling</a> - please use it!</p> -<p>This theme is an open source side project by <a href="https://bradleytaunt.com">Bradley Taunt</a> - made with passion and care. Edit, improve, customize or butcher this theme as much as you'd like. If you spot an issue or find a better solution for any user pain-spots, please don't hesitate to <a href="https://github.com/bradleytaunt/ET-Jekyll/pulls">open a PR with your changes</a>.</p> + +<p>ET-Jekyll theme is based off of Dave Liepmann’s awesome Tufte CSS - which takes it’s style and inspiration from the wonderful book and handout designs of Edward Tufte.</p> + +<p>The differences are subtle when comparing my variation to Tufte CSS, but these changes were made out of personal preference and are not in any way “better”. If you prefer the original CSS styling - please use it!</p> + +<p>This theme is an open source side project by Bradley Taunt - made with passion and care. Edit, improve, customize or butcher this theme as much as you’d like. If you spot an issue or find a better solution for any user pain-spots, please don’t hesitate to open a PR with your changes.</p> + <p>Enjoy ET-Jekyll!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/fake-3d-elements-with-css/index.html b/build/fake-3d-elements-with-css/index.html index 3eb02c5..d04f852 100644 --- a/build/fake-3d-elements-with-css/index.html +++ b/build/fake-3d-elements-with-css/index.html @@ -1,70 +1,87 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Faking 3D Elements with CSS</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Faking 3D Elements with CSS</h1> +<h1 id="faking-3d-elements-with-css">Faking 3D Elements with CSS</h1> + <p>2020-04-29</p> + <p>Although not always practical, creating the illusion that some of your web elements are 3D can be a fun experiment. I set out to see if I was able to create such an illusion with only 2 HTML elements and as little CSS as possible.</p> + <p>This is what I ended up creating:</p> + <p><img src="/public/images/css-orb.png" alt="Blue 3D orb made out pure CSS" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/VwvzKyb">Live CodePen Example</a></p> -<h2>The HTML</h2> + +<h2 id="the-html">The HTML</h2> + <p>Prepare for your mind to be blown:</p> -<pre><code><div class="main-orb"> - <div class="inner-orb"></div> -</div> + +<pre><code><div class="main-orb"> + <div class="inner-orb"></div> +</div> </code></pre> -<p>That's it - I wasn't kidding when I said we would use only 2 HTML elements. The <code>.main-orb</code> is the core shape (set to 400x400) and the <code>.inner-orb</code> is placed on top of it's parent at a slightly smaller size (360x360) - but more on that below in the CSS portion.</p> -<h2>The CSS</h2> + +<p>That’s it - I wasn’t kidding when I said we would use only 2 HTML elements. The <code>.main-orb</code> is the core shape (set to 400x400) and the <code>.inner-orb</code> is placed on top of it’s parent at a slightly smaller size (360x360) - but more on that below in the CSS portion.</p> + +<h2 id="the-css">The CSS</h2> + <p>First we give the bigger orb element (<code>.main-orb</code>) the default styling needed to represent a 2D circle:</p> + <pre><code>.main-orb { background: linear-gradient(#fff 0%, #eee 10%, #2E86FB 50%, #1A237E 100%); border-radius: 9999px; height: 400px; margin: 4rem auto; - position: relative; /* This is important for the inner orb element later */ + position: relative; /* This is important for the inner orb element later */ width: 400px; } </code></pre> -<p>Next, we include both <code>:before</code> and <code>:after</code> pseudo elements for our orb's drop shadow. You <em>could</em> do this with a simple <code>box-shadow</code> property on the <code>.main-orb</code> itself, but I've explained in a previous post why <a href="/blog/better-box-shadows.html">that's not the best approach</a>.</p> -<pre><code>/* Shared styling for both pseudo elements - Remember DRY */ + +<p>Next, we include both <code>:before</code> and <code>:after</code> pseudo elements for our orb’s drop shadow. You <em>could</em> do this with a simple <code>box-shadow</code> property on the <code>.main-orb</code> itself, but I’ve explained in a previous post why <a href="/blog/better-box-shadows.html">that’s not the best approach</a>.</p> + +<pre><code>/* Shared styling for both pseudo elements - Remember DRY */ .main-orb:before, .main-orb:after { border-radius: 200px 200px 9999px 9999px; bottom: -10px; - content:''; + content:''; filter: blur(20px); height: 40px; position: absolute; z-index: -1; } -</code></pre> -<pre><code>/* Bigger, lighter shadow */ + +/* Bigger, lighter shadow */ .main-orb:before { background: rgba(0,0,0,0.4); left: 7.5%; width: 85%; } -</code></pre> -<pre><code>/* Smaller, darker shadow */ + +/* Smaller, darker shadow */ .main-orb:after { background: rgba(0,0,0,0.7); left: 20%; width: 60%; } </code></pre> + <p>With our main orb complete we can move on to the <code>.inner-orb</code> element to help bring slightly more depth to our floating ball of CSS:</p> + <pre><code>.inner-orb { background: linear-gradient(#fff 0%, #2E86FB 60%, #283593 100%); border-radius: 9999px; @@ -77,7 +94,9 @@ width: 360px; } </code></pre> -<h2>Poor-man's 3D elements</h2> + +<h2 id="poor-mans-3d-elements">Poor-man’s 3D elements</h2> + <p>Clearly implementing something like this will never come close to generating true 3D renders on a website, but it is a fun exercise to see how much further we can push simple CSS. Feel free to fork the above CodePen to play around with different colors and shadow placements.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/fathom-analytics-netlify/index.html b/build/fathom-analytics-netlify/index.html index 9cab8a2..8128c04 100644 --- a/build/fathom-analytics-netlify/index.html +++ b/build/fathom-analytics-netlify/index.html @@ -1,40 +1,54 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Setting Up Fathom Analytics with Netlify</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Setting Up Fathom Analytics with Netlify</h1> +<h1 id="setting-up-fathom-analytics-with-netlify">Setting Up Fathom Analytics with Netlify</h1> + <p>2021-01-19</p> -<p>It's no secret that I'm passionate about open source software, but I'm also extremely adamant about protecting the privacy of all users across the web. So when I decided to implement analytics on my own personal website, I ended up choosing <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> (<em>get a $10 credit using that link!</em>).</p> -<p>You should research further into the company yourself if you're interested, but in a nutshell the Fathom platform provides:</p> + +<p>It’s no secret that I’m passionate about open source software, but I’m also extremely adamant about protecting the privacy of all users across the web. So when I decided to implement analytics on my own personal website, I ended up choosing Fathom (<em>get a $10 credit using that link!</em>).</p> + +<p>You should research further into the company yourself if you’re interested, but in a nutshell the Fathom platform provides:</p> + <ul> <li>GDPR, ePrivacy, PECR and CCPA compliance</li> -<li>ad-blocker bypasses (in a good way -> zero impact on users)</li> +<li>ad-blocker bypasses (in a good way -> zero impact on users)</li> <li>anonymous visitor stats</li> -<li>software created by <a href="https://usefathom.com/about">indie developers</a></li> +<li>software created by indie developers</li> </ul> -<p>Although this might sound like a "paid" blog post, I can assure you this is completely based on my own opinions and experience with the service. I'm just very pleased with the product :)</p> -<p>Enough chit-chat - let's breakdown how to setup Fathom on your own site hosted through Netlify!</p> -<h2>Step 0: Assumptions</h2> -<p>I'm going into this tutorial with the assumption that you:</p> + +<p>Although this might sound like a “paid” blog post, I can assure you this is completely based on my own opinions and experience with the service. I’m just very pleased with the product :)</p> + +<p>Enough chit-chat - let’s breakdown how to setup Fathom on your own site hosted through Netlify!</p> + +<h2 id="step-0-assumptions">Step 0: Assumptions</h2> + +<p>I’m going into this tutorial with the assumption that you:</p> + <ol> -<li>Have an active <a href="https://usefathom.com/ref/DKHJVX">Fathom account</a> (or are at least trying the 7-day free trial)</li> -<li>Have a website already setup on <a href="https://netlify.com">Netlify (custom domain optional)</a></li> +<li>Have an active Fathom account (or are at least trying the 7-day free trial)</li> +<li>Have a website already setup on Netlify (custom domain optional)</li> </ol> -<p>And that's all you need.</p> -<h2>Step 1: Adding a Custom Domain (DNS Setup)</h2> + +<p>And that’s all you need.</p> + +<h2 id="step-1-adding-a-custom-domain-dns-setup">Step 1: Adding a Custom Domain (DNS Setup)</h2> + <p>Even though you have the option to use the <code>default</code> tracking script URL, I would highly recommend setting it up through your own domain. This helps avoid any browser extensions or firewalls that might block outside URL request made by individual sites.</p> + <ol> <li>Navigate to the Fathom <strong>Settings</strong> page in the bottom footer (must be logged in)</li> <li>Select <strong>Domains</strong> from the sidebar</li> @@ -42,29 +56,37 @@ <li>Select <strong>Start Process</strong></li> <li>Keep note of both the <code>CNAME</code> and <code>VALUE</code> (we will copy this in a moment)</li> </ol> + <p>Open a new tab, and login to your Netlify account:</p> + <ol> <li>From your <code>Team Overview</code> page, navigate to the top-level <code>Domains</code> page</li> <li>Select the domain you plan to add Fathom to</li> -<li>Under <strong>DNS settings</strong> > <strong>DNS records</strong> select <code>Add New Record</code></li> +<li>Under <strong>DNS settings</strong> > <strong>DNS records</strong> select <code>Add New Record</code></li> <li>Select <code>CNAME</code> from the dropdown of available options</li> <li>Paste the Fathom <code>CNAME</code> (from the steps above) into the <strong>Name</strong> input</li> <li>Paste the Fathom <code>VALUE</code> (from the steps above) into the <strong>Value</strong> input</li> <li>Click <strong>Save</strong></li> </ol> -<p>That's it for DNS setup!</p> -<h2>Step 2: Adding Fathom Your Website</h2> -<p>Now that we will be using our own custom domain for the script, it's time to actually <em>add it</em> to our website. From the same Fathom <strong>Settings</strong> page as before:</p> + +<p>That’s it for DNS setup!</p> + +<h2 id="step-2-adding-fathom-your-website">Step 2: Adding Fathom Your Website</h2> + +<p>Now that we will be using our own custom domain for the script, it’s time to actually <em>add it</em> to our website. From the same Fathom <strong>Settings</strong> page as before:</p> + <ol> <li>Navigate to the <strong>Sites</strong> page in the sidebar</li> <li>Enter your custom domain in the <code>Add a new site</code> input and click <strong>Get site code</strong></li> -<li>In the modal prompt, select your custom domain from the dropdown list (you'll see the script code change accordingly)</li> +<li>In the modal prompt, select your custom domain from the dropdown list (you’ll see the script code change accordingly)</li> <li>Copy the tracking code snippet and add it to all the pages you plan to track on your site</li> <li>When ready, select <strong>Verify site code</strong></li> <li>If everything went correctly you should be done!</li> </ol> -<h2>Step 3: Watch Those Live Stats!</h2> -<p>Open a cold beer (or a bubbly soda if you prefer) and watch your website visitor stats come rolling in on the dashboard! Not only do you now have solid analytics on your website but you have the piece of mind that your users' privacy isn't being invaded. Everybody wins!</p> + +<h2 id="step-3-watch-those-live-stats">Step 3: Watch Those Live Stats!</h2> + +<p>Open a cold beer (or a bubbly soda if you prefer) and watch your website visitor stats come rolling in on the dashboard! Not only do you now have solid analytics on your website but you have the piece of mind that your users’ privacy isn’t being invaded. Everybody wins!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/february-updates/index.html b/build/february-updates/index.html index 1387a4f..8a78a57 100644 --- a/build/february-updates/index.html +++ b/build/february-updates/index.html @@ -1,25 +1,32 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>February 2022 Update</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>February 2022 Update</h1> +<h1 id="february-2022-update">February 2022 Update</h1> + <p>2022-02-23</p> -<p>It's been a little quiet around here lately and for good reason: my wife gave birth to our third child last Thursday. Her name is Harmony and she was born in the late afternoon weighing in at 7 pounds 8 ounces.</p> + +<p>It’s been a little quiet around here lately and for good reason: my wife gave birth to our third child last Thursday. Her name is Harmony and she was born in the late afternoon weighing in at 7 pounds 8 ounces.</p> + <p>Besides the lack of sleep, everything has been going very well and our boys are happy to finally have their sister “out” in the real world. She caught a small cold at the beginning but soldiered through it well.</p> -<p>As for personal life / work life, I've taken a couple weeks off until Harmony is in a bit more of a routine to make transitioning back to full time easier. I still have a few articles in the works (like setting up a T60 Thinkpad with Linux Mint and using FreeBSD for the first time on an EOL Chromebook) but those will come in time.</p> -<p>I guess I should get back to being a proper dad (I'm writing this on my phone as she sleeps on me and the boys are napping) but I'll be back here posting stupid things in no time.</p> + +<p>As for personal life / work life, I’ve taken a couple weeks off until Harmony is in a bit more of a routine to make transitioning back to full time easier. I still have a few articles in the works (like setting up a T60 Thinkpad with Linux Mint and using FreeBSD for the first time on an EOL Chromebook) but those will come in time.</p> + +<p>I guess I should get back to being a proper dad (I’m writing this on my phone as she sleeps on me and the boys are napping) but I’ll be back here posting stupid things in no time.</p> + <p>See you on the other side!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/first-letter/index.html b/build/first-letter/index.html index 9efd443..22e0663 100644 --- a/build/first-letter/index.html +++ b/build/first-letter/index.html @@ -1,36 +1,47 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>First Letter Pseudo Element</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>First Letter Pseudo Element</h1> +<h1 id="first-letter-pseudo-element">First Letter Pseudo Element</h1> + <p>2019-05-03</p> -<p>In today's TypeTip we will be taking a look at the often overlooked <code>:first-letter</code> CSS pseudo element. Though you might only use this for specific article-format web pages, it's still a nice-to-have in your web dev toolset.</p> -<h2>The HTML</h2> + +<p>In today’s TypeTip we will be taking a look at the often overlooked <code>:first-letter</code> CSS pseudo element. Though you might only use this for specific article-format web pages, it’s still a nice-to-have in your web dev toolset.</p> + +<h2 id="the-html">The HTML</h2> + <p>Like most pseudo elements, nothing has to change with your pre-existing HTML structure:</p> -<pre><code><article> - <p>It was a bright cold day in April, and the clocks were striking thirteen.</p> -</article> + +<pre><code><article> + <p>It was a bright cold day in April, and the clocks were striking thirteen.</p> +</article> </code></pre> -<h2>The CSS</h2> -<p>Here's where the magic happens:</p> + +<h2 id="the-css">The CSS</h2> + +<p>Here’s where the magic happens:</p> + <pre><code>p:first-letter { color: orangered; font-size: 250%; } </code></pre> -<h2>Live CodePen</h2> + +<h2 id="live-codepen">Live CodePen</h2> + <p><a href="https://codepen.io/bradleytaunt/pen/gJYbev/">Live CodePen Example</a></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/flexbox-bar-graphs/index.html b/build/flexbox-bar-graphs/index.html index a73e791..c705c0d 100644 --- a/build/flexbox-bar-graphs/index.html +++ b/build/flexbox-bar-graphs/index.html @@ -1,85 +1,96 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Pure CSS Bar Graphs with Graceful Mobile Fallbacks</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Pure CSS Bar Graphs with Graceful Mobile Fallbacks</h1> +<h1 id="pure-css-bar-graphs-with-graceful-mobile-fallbacks">Pure CSS Bar Graphs with Graceful Mobile Fallbacks</h1> + <p>2020-12-08</p> -<p>I recently published a new open source project, <a target="_blank" href="https://flexbox-bar-graphs.netlify.app/">Flexbox Bar Graphs</a>, and wanted to share a simple breakdown of how it was built. It isn't anything mind-blowing, but I like the idea of placing bar graphs in a web page with <em>zero</em> Javascript.</p> + +<p>I recently published a new open source project, Flexbox Bar Graphs, and wanted to share a simple breakdown of how it was built. It isn’t anything mind-blowing, but I like the idea of placing bar graphs in a web page with <em>zero</em> Javascript.</p> + <p>So in the end, this is what our bar graphs will look like on desktop:</p> -<p><figure> - <img src="/public/images/flexbox-bar-graph-1.webp" alt="Flexbox Bar Graph"> - <figcaption>The flexbox bar graph in desktop view (<a href="/public/images/flexbox-bar-graph-1.webp">direct link to image</a>)</figcaption> -</figure></p> + <p>And this is how it will look on smaller devices:</p> -<p><figure> - <img src="/public/images/flexbox-bar-graph-2.webp" alt="Flexbox Bar Graph Table"> - <figcaption>The flexbox bar graph on mobile devices (<a href="/public/images/flexbox-bar-graph-2.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>Let's get into the details!</p> -<h2>The HTML</h2> -<p>The main "secret" of this project is that our graphs are constructed out of HTML <em>tables</em>. Now before you freak out - this is perfectly fine and works in our favor quite well.</p> + +<p>Let’s get into the details!</p> + +<h2 id="the-html">The HTML</h2> + +<p>The main “secret” of this project is that our graphs are constructed out of HTML <em>tables</em>. Now before you freak out - this is perfectly fine and works in our favor quite well.</p> + <ol> -<li>If the user has JS disabled --> they will still see our graphs</li> -<li>If the user has CSS disabled --> they will see a standard data table set</li> +<li>If the user has JS disabled –> they will still see our graphs</li> +<li>If the user has CSS disabled –> they will see a standard data table set</li> </ol> + <p>All bases are covered!</p> -<pre><code><!-- Using a basic table with our custom data-id --> -<table data-id="flexbox-bar-graph"> - <caption>Web Performance Results</caption> - <thead> - <tr> - <th>Test Performed</th> - <th>Before</th> - <th>After</th> - <th>Difference</th> - </tr> - </thead> - <tbody> - <tr> - <th>Initial Load Time</th> - <td> - <!-- + +<pre><code><!-- Using a basic table with our custom data-id --> +<table data-id="flexbox-bar-graph"> + <caption>Web Performance Results</caption> + <thead> + <tr> + <th>Test Performed</th> + <th>Before</th> + <th>After</th> + <th>Difference</th> + </tr> + </thead> + <tbody> + <tr> + <th>Initial Load Time</th> + <td> + <!-- WTF are these CSS variables? See the CSS section below - --> - <span style="--data-set:4.7/5;"></span> - <p>4.7</p> - </td> - <td> - <span style="--data-set:2.7/5;"></span> - <p>2.7</p> - </td> - <td> - <span style="--data-set:2/5;"></span> - <p>2</p> - </td> - </tr> - </tbody> -</table> + --> + <span style="--data-set:4.7/5;"></span> + <p>4.7</p> + </td> + <td> + <span style="--data-set:2.7/5;"></span> + <p>2.7</p> + </td> + <td> + <span style="--data-set:2/5;"></span> + <p>2</p> + </td> + </tr> + </tbody> +</table> </code></pre> + <p>Nothing crazy is happening here - just your standard HTML table structure. The one main thing to notice is the <code>--data-set</code> CSS variable placed inline on each data point. This will be important for our CSS to configure the individual bar graphs properly.</p> -<h2>The CSS</h2> -<p>This might look overwhelming if I just dumped the whole CSS file in one big code block, so instead I'm going to break them down into two parts:</p> + +<h2 id="the-css">The CSS</h2> + +<p>This might look overwhelming if I just dumped the whole CSS file in one big code block, so instead I’m going to break them down into two parts:</p> + <ol> <li>Baseline styling (mobile)</li> <li>Desktop styling</li> </ol> -<h3>Baseline</h3> + +<h3 id="baseline">Baseline</h3> + <p>Here we target just our table elements with the <code>data-id</code> of <code>flexbox-bar-graph</code>. This allows us to avoid worrying about adding classes or IDs and also avoids conflicts with other non-graph styled tables in our projects.</p> + <p>The base <code>:root</code> element holds all of our bar graph colors. Change these as you see fit!</p> -<pre><code>/* Bar Graph color variables */ + +<pre><code>/* Bar Graph color variables */ :root { --bar-color-1: #357EC7; --bar-color-2: #E42217; @@ -87,207 +98,215 @@ --bar-color-4: #7D0541; --bar-color-5: #FFD801; } -</code></pre> -<pre><code>[data-id="flexbox-bar-graph"] { + +[data-id="flexbox-bar-graph"] { border-collapse: collapse; margin: 4rem 0 6rem; width: 100%; } -[data-id="flexbox-bar-graph"] caption { +[data-id="flexbox-bar-graph"] caption { text-align: left; } -[data-id="flexbox-bar-graph"] thead th { +[data-id="flexbox-bar-graph"] thead th { text-align: right; } -[data-id="flexbox-bar-graph"] thead th:nth-child(1), -[data-id="flexbox-bar-graph"] tbody th { +[data-id="flexbox-bar-graph"] thead th:nth-child(1), +[data-id="flexbox-bar-graph"] tbody th { text-align: left; } -[data-id="flexbox-bar-graph"] tbody th { +[data-id="flexbox-bar-graph"] tbody th { font-weight: normal; font-style: italic; } -[data-id="flexbox-bar-graph"] tbody td { +[data-id="flexbox-bar-graph"] tbody td { text-align: right; } -[data-id="flexbox-bar-graph"] tbody td p { +[data-id="flexbox-bar-graph"] tbody td p { margin: 0; } </code></pre> -<h3>Desktop</h3> -<p>Now we set your "visual" bar graphs to show at a set width (in this example it is 1000px and above). That way the "default" styling can target the mobile device screen sizes.</p> + +<h3 id="desktop">Desktop</h3> + +<p>Now we set your “visual” bar graphs to show at a set width (in this example it is 1000px and above). That way the “default” styling can target the mobile device screen sizes.</p> + <ul> -<li>The <code>thead tr th:nth-child(x):before</code> elements create the square "legends" beside each individual data point heading</li> -<li>The <code>tbody tr td:nth-of-type(x) span</code> elements are the bars themselves</li> -</ul> -<pre><code>@media(min-width: 1000px) { - [data-id="flexbox-bar-graph"] { +<li><p>The <code>thead tr th:nth-child(x):before</code> elements create the square “legends” beside each individual data point heading</p></li> +<li><p>The <code>tbody tr td:nth-of-type(x) span</code> elements are the bars themselves</p> + +<p>@media(min-width: 1000px) { + [data-id="flexbox-bar-graph”] { background: transparent; display: block; min-height: 400px; padding: 0; position: relative; width: 100%; - } + }</p> - [data-id="flexbox-bar-graph"] caption { - display: block; - font-size: 2rem; - text-align: center; - width: 100%; - } +<pre><code>[data-id="flexbox-bar-graph"] caption { + display: block; + font-size: 2rem; + text-align: center; + width: 100%; +} - [data-id="flexbox-bar-graph"] thead { - display: block; - margin: 2rem 0 3rem; - width: 100%; - } - [data-id="flexbox-bar-graph"] thead tr { - border-bottom: 1px solid lightgrey; - display: flex; - justify-content: center; - padding-bottom: 1rem; - } - - [data-id="flexbox-bar-graph"] thead tr th { - display: inline-block; - margin: 0; - padding: 0; - position: relative; - text-align: right; - } - [data-id="flexbox-bar-graph"] thead tr th:before { - content:''; - display: inline-block; - height: 10px; - margin: 0 0.5rem 0 2rem; - position: relative; - width: 10px; - } - [data-id="flexbox-bar-graph"] thead tr th:nth-child(1), - [data-id="flexbox-bar-graph"] thead tr th:nth-child(1):before { - display: none; - } - [data-id="flexbox-bar-graph"] thead tr th:nth-child(2):before { - background: var(--bar-color-1); - } - [data-id="flexbox-bar-graph"] thead tr th:nth-child(3):before { - background: var(--bar-color-2); - } - [data-id="flexbox-bar-graph"] thead tr th:nth-child(4):before { - background: var(--bar-color-3); - } - [data-id="flexbox-bar-graph"] thead tr th:nth-child(5):before { - background: var(--bar-color-4); - } - [data-id="flexbox-bar-graph"] thead tr th:nth-child(6):before { - background: var(--bar-color-5); - } - - [data-id="flexbox-bar-graph"] tbody { - display: flex; - justify-content: space-between; - min-height: 300px; - width: 100%; - } - - [data-id="flexbox-bar-graph"] tbody tr { - display: flex; - flex-direction: column-reverse; - flex-wrap: wrap; - justify-content: flex-end; - padding: 0 50px; - position: relative; - width: 100%; - } - [data-id="flexbox-bar-graph"] tbody tr th { - font-size: 90%; - position: absolute; - text-align: center; - top: 100%; - width: calc(100% - 100px); - } - [data-id="flexbox-bar-graph"] tbody tr td { - align-items: center; - display: flex; - flex-direction: column; - height: 95%; - justify-content: flex-end; - } - - [data-id="flexbox-bar-graph"] tbody tr td span { - display: block; - height: calc(var(--data-set) * 100%); - width: 20px; - } - [data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(1) span { - background: var(--bar-color-1); - } - [data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(2) span { - background: var(--bar-color-2); - } - [data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(3) span { - background: var(--bar-color-3); - } - [data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(4) span { - background: var(--bar-color-4); - } - [data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(5) span { - background: var(--bar-color-5); - } - - [data-id="flexbox-bar-graph"] tbody tr td p { - font-size: 90%; - margin: 0; - text-align: center; - } +[data-id="flexbox-bar-graph"] thead { + display: block; + margin: 2rem 0 3rem; + width: 100%; +} +[data-id="flexbox-bar-graph"] thead tr { + border-bottom: 1px solid lightgrey; + display: flex; + justify-content: center; + padding-bottom: 1rem; +} + +[data-id="flexbox-bar-graph"] thead tr th { + display: inline-block; + margin: 0; + padding: 0; + position: relative; + text-align: right; +} +[data-id="flexbox-bar-graph"] thead tr th:before { + content:''; + display: inline-block; + height: 10px; + margin: 0 0.5rem 0 2rem; + position: relative; + width: 10px; +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(1), +[data-id="flexbox-bar-graph"] thead tr th:nth-child(1):before { + display: none; +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(2):before { + background: var(--bar-color-1); +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(3):before { + background: var(--bar-color-2); +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(4):before { + background: var(--bar-color-3); +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(5):before { + background: var(--bar-color-4); +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(6):before { + background: var(--bar-color-5); +} + +[data-id="flexbox-bar-graph"] tbody { + display: flex; + justify-content: space-between; + min-height: 300px; + width: 100%; +} + +[data-id="flexbox-bar-graph"] tbody tr { + display: flex; + flex-direction: column-reverse; + flex-wrap: wrap; + justify-content: flex-end; + padding: 0 50px; + position: relative; + width: 100%; +} +[data-id="flexbox-bar-graph"] tbody tr th { + font-size: 90%; + position: absolute; + text-align: center; + top: 100%; + width: calc(100% - 100px); +} +[data-id="flexbox-bar-graph"] tbody tr td { + align-items: center; + display: flex; + flex-direction: column; + height: 95%; + justify-content: flex-end; +} + +[data-id="flexbox-bar-graph"] tbody tr td span { + display: block; + height: calc(var(--data-set) * 100%); + width: 20px; +} +[data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(1) span { + background: var(--bar-color-1); +} +[data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(2) span { + background: var(--bar-color-2); +} +[data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(3) span { + background: var(--bar-color-3); +} +[data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(4) span { + background: var(--bar-color-4); +} +[data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(5) span { + background: var(--bar-color-5); +} + +[data-id="flexbox-bar-graph"] tbody tr td p { + font-size: 90%; + margin: 0; + text-align: center; } </code></pre> -<h2>Bonus Styling</h2> -<p>In the <a target="_blank" href="https://github.com/bradleytaunt/flexbox-bar-graphs">Flexbox Bar Graph</a> repo, I've also included the ability to display these bar graphs horizontally, like so:</p> -<p><figure> - <img src="/public/images/flexbox-bar-graph-3.webp" alt="Flexbox Bar Graph Horizontal"> - <figcaption>The flexbox bar graph in the horizontal layout (<a href="/public/images/flexbox-bar-graph-3.webp">direct link to image</a>)</figcaption> -</figure></p> + +<p>}</p></li> +</ul> + +<h2 id="bonus-styling">Bonus Styling</h2> + +<p>In the Flexbox Bar Graph repo, I’ve also included the ability to display these bar graphs horizontally, like so:</p> + <p>The change in CSS is actually quite simple to pull this off - you just need to include the <code>data-layout</code> attribute on the table itself.</p> -<pre><code>[data-layout="horizontal"] tbody { + +<pre><code>[data-layout="horizontal"] tbody { min-height: auto; } -[data-layout="horizontal"] tbody tr { +[data-layout="horizontal"] tbody tr { flex-direction: column; padding: 0 40px; } -[data-layout="horizontal"] tbody tr th { +[data-layout="horizontal"] tbody tr th { width: calc(100% - 80px); } -[data-layout="horizontal"] tbody tr th { +[data-layout="horizontal"] tbody tr th { text-align: left; top: calc(100% + 20px); } -[data-layout="horizontal"] tbody tr td { +[data-layout="horizontal"] tbody tr td { flex-direction: row; height: auto; justify-content: start; margin: 10px 0; } -[data-layout="horizontal"] tbody tr td span { +[data-layout="horizontal"] tbody tr td span { height: 20px; width: calc(var(--data-set) * 100%); } -[data-layout="horizontal"] tbody tr td p { +[data-layout="horizontal"] tbody tr td p { margin-left: 10px; } </code></pre> -<h2>That's All Folks!</h2> + +<h2 id="thats-all-folks">That’s All Folks!</h2> + <p>That just about sums things up. Feel free to check out the Github repo itself, open any issues you find or fork it for your own!</p> + <ul> -<li>Github: <a href="https://github.com/bradleytaunt/flexbox-bar-graphs">https://github.com/bradleytaunt/flexbox-bar-graphs</a></li> -<li>Live Demo: <a href="https://flexbox-bar-graphs.netlify.app/">https://flexbox-bar-graphs.netlify.app/</a></li> +<li>Github: <a href="https://github.com/bradleytaunt/flexbox-bar-graphs">https://github.com/bradleytaunt/flexbox-bar-graphs</a></li> +<li>Live Demo: <a href="https://flexbox-bar-graphs.netlify.app/">https://flexbox-bar-graphs.netlify.app/</a></li> </ul> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/flexbox-grid/index.html b/build/flexbox-grid/index.html index 096f747..59ad2e0 100644 --- a/build/flexbox-grid/index.html +++ b/build/flexbox-grid/index.html @@ -1,23 +1,28 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Adaptable Flexbox Grid</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Adaptable Flexbox Grid</h1> +<h1 id="adaptable-flexbox-grid">Adaptable Flexbox Grid</h1> + <p>2018-11-22</p> -<p>You can use <code>flexbox</code> for many tricky layout "hacks" and implementing a grid layout is no different.</p> + +<p>You can use <code>flexbox</code> for many tricky layout “hacks” and implementing a grid layout is no different.</p> + <p>Check out the CodePen below to see how you can implement a flexbox grid system that adapts automatically based on how many items you insert per row (maximum 6 children in this example).</p> + <p><a href="https://codepen.io/bradleytaunt/pen/rQdLxv/">Live CodePen Example</a></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/form-ui-improvements/index.html b/build/form-ui-improvements/index.html index f0e7c9c..c22a9be 100644 --- a/build/form-ui-improvements/index.html +++ b/build/form-ui-improvements/index.html @@ -1,53 +1,76 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Prescription Form UI Improvements</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Prescription Form UI Improvements</h1> +<h1 id="prescription-form-ui-improvements">Prescription Form UI Improvements</h1> + <p>2019-03-13</p> -<p>I was browsing the <a href="https://www.clearly.ca">Clearly</a> website a few days ago and ended up using their prescription form to update my worsening eyesight. The design of this form wasn't <em>bad</em> per se, but it could certainly be improved.</p> -<h2>Current design of the prescription view</h2> + +<p>I was browsing the Clearly website a few days ago and ended up using their prescription form to update my worsening eyesight. The design of this form wasn’t <em>bad</em> per se, but it could certainly be improved.</p> + +<h2 id="current-design-of-the-prescription-view">Current design of the prescription view</h2> + <p><img src="/public/images/prescription-ui.webp" alt="Default prescription UI" /></p> -<p>As I stated, this design isn't horrible by any means, but right away we can notice some problems:</p> + +<p>As I stated, this design isn’t horrible by any means, but right away we can notice some problems:</p> + <ul> -<li>the layout causes the users' eyes to jump between left-to-right and top-to-bottom without good correlation</li> +<li>the layout causes the users’ eyes to jump between left-to-right and top-to-bottom without good correlation</li> <li>title content and <code>next</code> buttons are centered, while dropdowns are presented as left-to-right</li> <li>anchor link coloring is inconsistent</li> <li>too much whitespace between interactive sections</li> <li>dropdown height overly large</li> </ul> -<h2>Starting to make some changes</h2> -<p>Let's tackle these problems one at a time. First, we want a more defined page layout so the user can scan through the content more easily (left-to-right, down to the next line, then repeat).</p> + +<h2 id="starting-to-make-some-changes">Starting to make some changes</h2> + +<p>Let’s tackle these problems one at a time. First, we want a more defined page layout so the user can scan through the content more easily (left-to-right, down to the next line, then repeat).</p> + <p><img src="/public/images/prescription-ui-update-1.webp" alt="Layout wireframe UI" /></p> -<p>We have now left-aligned the title content to be flush with the OD/OS elements below it to help keep the reading flow consistent. </p> -<p>The previous layout also had the <code>PD</code> in-line with the OD/OS element rows which created a problem of resetting the user thought-process. Since it requires the user to jump from the "right eye" option to the "PD" option, then back to "left eye" option it breaks the flow of user "tasks". The new UI shifts the <code>PD</code> down into it's own row, grouping the unrelated tasks on the page separately.</p> -<blockquote><p>You'll also notice that I've updated the dropdowns to use a <code>monospace</code> font to convey that these options are number inputs.</p> + +<p>We have now left-aligned the title content to be flush with the OD/OS elements below it to help keep the reading flow consistent. </p> + +<p>The previous layout also had the <code>PD</code> in-line with the OD/OS element rows which created a problem of resetting the user thought-process. Since it requires the user to jump from the “right eye” option to the “PD” option, then back to “left eye” option it breaks the flow of user “tasks”. The new UI shifts the <code>PD</code> down into it’s own row, grouping the unrelated tasks on the page separately.</p> + +<blockquote> +<p>You’ll also notice that I’ve updated the dropdowns to use a monospace font to convey that these options are number inputs.</p> </blockquote> + <p>Finally we place the button actions in-line with the <code>PD</code> block since it previously ate up far more real estate than was necessary.</p> -<h2>Adding some color</h2> -<p>The original design has some inconsistencies with the link coloring - some being a muted grey while others use the accented blue. Updating all interactive links to use Clearly's default blue accent color would make for a better disconnect from non-interactive elements.</p> + +<h2 id="adding-some-color">Adding some color</h2> + +<p>The original design has some inconsistencies with the link coloring - some being a muted grey while others use the accented blue. Updating all interactive links to use Clearly’s default blue accent color would make for a better disconnect from non-interactive elements.</p> + <p><img src="/public/images/prescription-ui-update-2.webp" alt="Layout UI with color" /></p> -<h2>Finishing touches</h2> + +<h2 id="finishing-touches">Finishing touches</h2> + <p>Now that the most important aspects of the refreshed UI are complete (layout, UX flow), we can implement all the visual extras to cleanup our basic wireframe.</p> + <ul> <li>make default select styling include depth and importance (this is the main action of the page afterall)</li> <li>round out harsh corner edges on elements</li> <li>set labels and row items with more pleasing backgrounds (while still maintaining contrast)</li> <li>give the <code>next</code> button visual importance (make it look like a real button)</li> </ul> + <p><img src="/public/images/prescription-ui-update-final.webp" alt="Layout UI with color" /></p> -<p>That's it!</p> + +<p>That’s it!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/future-os-google/index.html b/build/future-os-google/index.html index 7ed69b7..a187301 100644 --- a/build/future-os-google/index.html +++ b/build/future-os-google/index.html @@ -1,78 +1,110 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Chrome OS Could Become the Future Leader of Computing</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Chrome OS Could Become the Future Leader of Computing</h1> +<h1 id="chrome-os-could-become-the-future-leader-of-computing">Chrome OS Could Become the Future Leader of Computing</h1> + <p>2022-01-06</p> -<p><strong>FOSS Enthusiasts</strong>: This article discusses the use of proprietary software and places it in a <em>positive</em> light. You have been warned. No angry emails please...</p> -<hr /> -<p>Google has created one of the best operating systems designed with the everyday user<sup>1</sup> in mind: <a href="https://www.google.com/chromebook/chrome-os/">Chrome OS</a>. It is undeniably simple, reliable, easy to setup, and ships with several years of support before any form of EOL kicks in. New models have built-in support for the Google Play Store and Android applications, which is helpful for application development and debugging.</p> -<p>In addition, Chrome OS devices allow you to run Linux in a separate container alongside the main OS (on supported devices). You can't complain about that!</p> -<p>Let's take a quick look at other positive features worth mentioning:</p> + +<p><strong>FOSS Enthusiasts</strong>: This article discusses the use of proprietary software and places it in a <em>positive</em> light. You have been warned. No angry emails please…</p> + +<hr/> + +<p>Google has created one of the best operating systems designed with the everyday user1 in mind: <a href="https://www.google.com/chromebook/chrome-os/">Chrome OS</a>. It is undeniably simple, reliable, easy to setup, and ships with several years of support before any form of EOL kicks in. New models have built-in support for the Google Play Store and Android applications, which is helpful for application development and debugging.</p> + +<p>In addition, Chrome OS devices allow you to run Linux in a separate container alongside the main OS (on supported devices). You can’t complain about that!</p> + +<p>Let’s take a quick look at other positive features worth mentioning:</p> + <ul> <li>Verified boot</li> <li>Sandboxed environment (similar to how Chrome tabs work)</li> <li>Automatic updates[^2]</li> <li><em>Incredible</em> battery life (were talking 10+ hours with heavy usage)</li> </ul> -<h2>My Personal Experience</h2> -<p>A handful of months ago I snagged the Lenovo Chromebook Duet when it was on sale for my wife. Since she does all her work directly through an Android phone, I thought of this as a nice companion device. And indeed it was/is.</p> -<p>In that time, I played around with the tablet myself to have a better grasp of the ecosystem and it's obvious limitations. But a funny thing happened. I found that those "limitations" slowly started to disappear the longer I worked with the device.</p> + +<h2 id="my-personal-experience">My Personal Experience</h2> + +<p>A handful of months ago I snagged the Lenovo Chromebook Duet when it was on sale for my wife. Since she does all her work directly through an Android phone, I thought of this as a nice companion device. And indeed it was/is.</p> + +<p>In that time, I played around with the tablet myself to have a better grasp of the ecosystem and it’s obvious limitations. But a funny thing happened. I found that those “limitations” slowly started to disappear the longer I worked with the device.</p> + <p>I decided to get my own Chrome OS device and snagged the <a href="https://www.lenovo.com/ca/en/laptops/lenovo/student-chromebooks/Lenovo-10e-Chromebook-Tablet/p/82AM000EUS">Lenovo 10e Chromebook Tablet</a> (on sale).</p> -<p><figure> - <img src="/public/images/lenovo-tablet.png" alt="Lenovo 10e Tablet"> - <figcaption>Introducing the Lenovo 10e Chromebook tablet. This bad boy can do close to everything your current computer can do but it'll cost you $129...</figcaption> -</figure></p> + <ul> -<li>10.1" display (1920 x 1200) / 400 nits</li> +<li>10.1” display (1920 x 1200) / 400 nits</li> <li>4GB of RAM</li> <li>32GB of eMMC storage</li> <li>Processor: MediaTek MT8183 Processor (2.00 GHz, 4 Cores, 1 MB Cache)</li> </ul> -<p>Now, I know that your initial reaction is likely: "Wow, those specs are pretty barebones!" and you would be correct. But it's all you need for this ecosystem to work. As cringe-inducing as it may sound, everything you plan to do on these devices should happen <em>in the cloud</em>. (Let's take a moment to avoid vomiting in our collective mouths)</p> -<p>Instead of using a few marketing buzz words, let me breakdown how I personally tailor Chrome OS to my needs as a designer / developer:</p> + +<p>Now, I know that your initial reaction is likely: “Wow, those specs are pretty barebones!” and you would be correct. But it’s all you need for this ecosystem to work. As cringe-inducing as it may sound, everything you plan to do on these devices should happen <em>in the cloud</em>. (Let’s take a moment to avoid vomiting in our collective mouths)</p> + +<p>Instead of using a few marketing buzz words, let me breakdown how I personally tailor Chrome OS to my needs as a designer / developer:</p> + <ol> <li><a href="#daily-tasks">Daily Tasks</a></li> <li><a href="#programming">Programming</a></li> <li><a href="#design">Design</a></li> <li><a href="#gaming">Gaming</a></li> </ol> -<h2>Daily Tasks</h2> -<p>I feel like going into <em>great</em> detail explaining how to do basic, daily computing tasks is a little overkill here. Spreadsheets, word documents, Zoom meetings, and streaming media work as expected. You have the ability to use Google's own web apps for these things or reach for other vendors such as Microsoft and Libre Office. Not being "locked in" to Google software is nice and I appreciate the Chrome OS team being flexible.</p> -<h2>Programming</h2> -<p>This one is a mixed bag and your own mileage may vary depending on your specific requirements. Personally, I use Github for almost all my main development work. Because of this, I utilize <a href="https://github.com/features/codespaces">Codespaces</a>. For those unfamiliar with the service, you are running your Github repo in VSCode through the browser. It's pretty impressive.</p> -<p>If you happen to be a user who uses GitLab or BitBucket to store your project files, <a href="https://www.gitpod.io/">Gitpod</a> is a similar product to Codespaces (which I've used on occasion). This works if your prefer.</p> -<p>Others may not like this programming setup but for me it works great. If running code remotely isn't your jam, you could always take a look at running <a href="https://vscodium.com/">VSCodium</a> locally via Linux.</p> -<h2>Design</h2> + +<h2 id="daily-tasks">Daily Tasks</h2> + +<p>I feel like going into <em>great</em> detail explaining how to do basic, daily computing tasks is a little overkill here. Spreadsheets, word documents, Zoom meetings, and streaming media work as expected. You have the ability to use Google’s own web apps for these things or reach for other vendors such as Microsoft and Libre Office. Not being “locked in” to Google software is nice and I appreciate the Chrome OS team being flexible.</p> + +<h2 id="programming">Programming</h2> + +<p>This one is a mixed bag and your own mileage may vary depending on your specific requirements. Personally, I use Github for almost all my main development work. Because of this, I utilize <a href="https://github.com/features/codespaces">Codespaces</a>. For those unfamiliar with the service, you are running your Github repo in VSCode through the browser. It’s pretty impressive.</p> + +<p>If you happen to be a user who uses GitLab or BitBucket to store your project files, <a href="https://www.gitpod.io/">Gitpod</a> is a similar product to Codespaces (which I’ve used on occasion). This works if your prefer.</p> + +<p>Others may not like this programming setup but for me it works great. If running code remotely isn’t your jam, you could always take a look at running <a href="https://vscodium.com/">VSCodium</a> locally via Linux.</p> + +<h2 id="design">Design</h2> + <p>There is flexibility yet again in this category. Personally, I tend to use Figma almost exclusively as my main design tool. The best thing about Figma? It runs directly in the browser. A perfect fit for Chromebooks[^3].</p> -<p>I do open Gimp periodically for photo-specific work. It runs in its own Linux container and chugs along smoothly, even with 4GB of available memory. If all else fails, one could use <a href="https://www.photopea.com/">Photopea</a> to keep everything working through the browser (if Linux isn't your cup of tea).</p> -<p>Those of you in love with MacOS specific apps like Sketch - I can't help you. You're stuck with Apple's ecosystem. (Not that there is anything wrong with Sketch!)</p> -<h2>Gaming</h2> -<p>There are other options (that we will get into) but the main gaming champion here is <strong>Stadia</strong>[^4]. As long as your internet speeds are over 10mbps, mind you. I use garbage satellite internet (counting down the days for Starlink to become available here...) with an average speed of 18-20mbps and Stadia runs like a dream. Even <em>wirelessly</em>. Now pair this with the portability of a Chromebook device and you've got yourself a beefier Nintendo Switch.</p> -<p>You have solid secondary options like <a href="https://play.geforcenow.com/mall/#/layout/games">GeForce Now</a> and <a href="https://www.xbox.com/en-CA/xbox-game-pass/cloud-gaming">Microsoft's xCloud (beta)</a> for an even larger catalogue of games. Not to mention the ability to play a lot of Android games natively on Chromebooks that support Play Store applications.</p> -<h2>Eye Rolling & Scoffing</h2> -<p>I can hear the screeching across the interwebs: "<em>Wait - this is Google! They are literally Satan in disguise! No one can use products from that evil mega corporation!</em>". And while I agree with the sentiment, I think going down this pure, 100% elitist approach to software <em>doesn't work</em> with the everyday casual user. Not to mention the large swath of developers/designers screaming "Google is bad!" while working off an <em>Apple</em> device...</p> + +<p>I do open Gimp periodically for photo-specific work. It runs in its own Linux container and chugs along smoothly, even with 4GB of available memory. If all else fails, one could use <a href="https://www.photopea.com/">Photopea</a> to keep everything working through the browser (if Linux isn’t your cup of tea).</p> + +<p>Those of you in love with MacOS specific apps like Sketch - I can’t help you. You’re stuck with Apple’s ecosystem. (Not that there is anything wrong with Sketch!)</p> + +<h2 id="gaming">Gaming</h2> + +<p>There are other options (that we will get into) but the main gaming champion here is <strong>Stadia</strong>[^4]. As long as your internet speeds are over 10mbps, mind you. I use garbage satellite internet (counting down the days for Starlink to become available here…) with an average speed of 18-20mbps and Stadia runs like a dream. Even <em>wirelessly</em>. Now pair this with the portability of a Chromebook device and you’ve got yourself a beefier Nintendo Switch.</p> + +<p>You have solid secondary options like <a href="https://play.geforcenow.com/mall/#/layout/games">GeForce Now</a> and <a href="https://www.xbox.com/en-CA/xbox-game-pass/cloud-gaming">Microsoft’s xCloud (beta)</a> for an even larger catalogue of games. Not to mention the ability to play a lot of Android games natively on Chromebooks that support Play Store applications.</p> + +<h2 id="eye-rolling-scoffing">Eye Rolling & Scoffing</h2> + +<p>I can hear the screeching across the interwebs: “<em>Wait - this is Google! They are literally Satan in disguise! No one can use products from that evil mega corporation!</em>”. And while I agree with the sentiment, I think going down this pure, 100% elitist approach to software <em>doesn’t work</em> with the everyday casual user. Not to mention the large swath of developers/designers screaming “Google is bad!” while working off an <em>Apple</em> device…</p> + <p>Hell even I, a vocal advocate for open source software and privacy, can see the great benefits to using Chrome OS as a daily driver. </p> -<p>Testing out Chrome OS with your non-technical friends and family could help reduce a lot of headaches found in more "popular" systems. That doesn't mean advanced users have to switch over. Use what works the best for you. For my immediate family members and social circles, I have nothing but positive things to say about Chrome OS.</p> + +<p>Testing out Chrome OS with your non-technical friends and family could help reduce a lot of headaches found in more “popular” systems. That doesn’t mean advanced users have to switch over. Use what works the best for you. For my immediate family members and social circles, I have nothing but positive things to say about Chrome OS.</p> + <p>I have no crystal ball to see what the future of Chrome OS holds but it looks pretty promising to me.</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>"Users" referring to those mainly using their devices for word documents, spread sheets, media consumption, programming, messaging, minor interactivity (no heavy video or production editing)</li> -<li>These updates go unnoticed, compared to that of MacOS or Windows...</li> +<li>“Users” referring to those mainly using their devices for word documents, spread sheets, media consumption, programming, messaging, minor interactivity (no heavy video or production editing)</li> +<li>These updates go unnoticed, compared to that of MacOS or Windows…</li> <li>Your mileage may vary depending on how much RAM you have on your device</li> -<li>Although, Stadia's current game selection leaves a lot to be desired</li> +<li>Although, Stadia’s current game selection leaves a lot to be desired</li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/gallery/index.html b/build/gallery/index.html index 31c7eaf..bd2c312 100644 --- a/build/gallery/index.html +++ b/build/gallery/index.html @@ -1,54 +1,64 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Simplifying the Craigslist Gallery</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Simplifying the Craigslist Gallery</h1> +<h1 id="simplifying-the-craigslist-gallery">Simplifying the Craigslist Gallery</h1> + <p>2022-10-03</p> + <p><strong>This article was updated on October 11, 2022</strong></p> -<p>I'm a big fan of <a href="https://craigslist.org">craigslist.org</a> and the overall UX used throughout their application. My own website is an ever-changing example of "brutalist" or minimalist design, so I'm always inspired by existing web apps out in the wild using the same principles.</p> + +<p>I’m a big fan of <a href="https://craigslist.org">craigslist.org</a> and the overall UX used throughout their application. My own website is an ever-changing example of “brutalist” or minimalist design, so I’m always inspired by existing web apps out in the wild using the same principles.</p> + <p>One nitpick I have with the current craigslist design is their approach to image galleries inside their listings. They use a chunk of bloated JavaScript (more than <code>380kB</code> total) to render something as simple as a collection of images. This seems like overkill to me.</p> -<p><figure> - <img src="/public/images/craigslist-gallery.webp" alt="Current craigslist.org gallery view"> - <figcaption>The current look of image galleries on craigslist</figcaption> -</figure></p> -<h2>Simplifying Things</h2> -<p>My first suggestion would be to remove JavaScript altogether. We can replicate most of the required features with just HTML & CSS. Let's start with our core HTML structure:</p> -<h3>HTML</h3> -<pre><code><div class="gallery-wrapper"> - <div class="full-size"> - <a name="p1"><img src="https://picsum.photos/id/100/400" alt="Picture 1" class="gallery-item"></a> - <a name="p2"><img src="https://picsum.photos/id/101/400" alt="Picture 2" class="gallery-item"></a> - <a name="p3"><img src="https://picsum.photos/id/106/400" alt="Picture 3" class="gallery-item"></a> - </div> - <div class="thumbnails"> - <a href="#p1"><img src="https://picsum.photos/id/100/100" alt="Picture 1 Thumbnail" class="thumbnail-1"></a> - <a href="#p2"><img src="https://picsum.photos/id/101/100" alt="Picture 2 Thumbnail" class="thumbnail-2"></a> - <a href="#p3"><img src="https://picsum.photos/id/106/100" alt="Picture 3 Thumbnail" class="thumbnail-3"></a> - </div> -</div> + +<h2 id="simplifying-things">Simplifying Things</h2> + +<p>My first suggestion would be to remove JavaScript altogether. We can replicate most of the required features with just HTML & CSS. Let’s start with our core HTML structure:</p> + +<h3 id="html">HTML</h3> + +<pre><code><div class="gallery-wrapper"> + <div class="full-size"> + <a name="p1"><img src="https://picsum.photos/id/100/400" alt="Picture 1" class="gallery-item"></a> + <a name="p2"><img src="https://picsum.photos/id/101/400" alt="Picture 2" class="gallery-item"></a> + <a name="p3"><img src="https://picsum.photos/id/106/400" alt="Picture 3" class="gallery-item"></a> + </div> + <div class="thumbnails"> + <a href="#p1"><img src="https://picsum.photos/id/100/100" alt="Picture 1 Thumbnail" class="thumbnail-1"></a> + <a href="#p2"><img src="https://picsum.photos/id/101/100" alt="Picture 2 Thumbnail" class="thumbnail-2"></a> + <a href="#p3"><img src="https://picsum.photos/id/106/100" alt="Picture 3 Thumbnail" class="thumbnail-3"></a> + </div> +</div> </code></pre> + <p>Here we are placing the full-size gallery images directly inside a single <code>div.full-size</code> as - you guessed it - <code>img</code> elements. This already helps us avoid the pitfall of building out spaghetti <code>div</code> containers.</p> -<p>Below this parent container we have another element, <code>div.thumbnails</code>, which will be used for our separate, smaller thumbnail versions of our main images. The most important items to note are the associated <code>ahref</code> elements surrounding each <code>img</code> element. By setting the <code>id</code> parameter on our thumbnails to match that of the <code>name</code> on our full-sized images, we can "scroll" the proper image into view without the need for JavaScript.</p> + +<p>Below this parent container we have another element, <code>div.thumbnails</code>, which will be used for our separate, smaller thumbnail versions of our main images. The most important items to note are the associated <code>ahref</code> elements surrounding each <code>img</code> element. By setting the <code>id</code> parameter on our thumbnails to match that of the <code>name</code> on our full-sized images, we can “scroll” the proper image into view without the need for JavaScript.</p> + <p>Now for the <em>fancy</em> stuff - the CSS!</p> -<h3>CSS</h3> + +<h3 id="css">CSS</h3> + <pre><code>.gallery-wrapper { position: relative; } .gallery-wrapper:before { background: rgba(255,255,255,0.8); - content: "Scroll / Swipe 🡢"; + content: "Scroll / Swipe 🡢"; display: block; padding: 5px; position: relative; @@ -64,17 +74,23 @@ .full-size .gallery-item { scroll-snap-align: start; } -</code></pre> -<pre><code>.thumbnails img { + +.thumbnails img { cursor: pointer; margin-right: 10px; } </code></pre> -<p>Okay, so it isn't <em>that</em> fancy. It's actually very basic, which is exactly what we were going for. The images are "stacked" inline thanks to the parent container being set to <code>display: flex</code>, even though it has a set width of <code>600px</code>. The included <code>scroll-snap-type: x mandatory</code> tells the browser to allow users to scroll/swipe horizontally through the parent container.</p> + +<p>Okay, so it isn’t <em>that</em> fancy. It’s actually very basic, which is exactly what we were going for. The images are “stacked” inline thanks to the parent container being set to <code>display: flex</code>, even though it has a set width of <code>600px</code>. The included <code>scroll-snap-type: x mandatory</code> tells the browser to allow users to scroll/swipe horizontally through the parent container.</p> + <p>The last important piece of this CSS is the <code>scroll-snap-align: start</code> added to the individual image elements. This parameter <em>snaps</em> the next image into the starting position of the parent container on scroll, giving a behavior users have come to expect from media galleries.</p> -<p>You will also see the included <code>:before</code> pseudo element attached to the main <code>.gallery-wrapper</code> element. This isn't <em>required</em> but it certainly helps from a UX standpoint.</p> -<h2>Live Demo</h2> -<p>Check out the embedded CodePen below to see it in action. More functionality could always be built on top of this, such as rendering all images dynamically on "build", but for a starting point I think it's great.</p> + +<p>You will also see the included <code>:before</code> pseudo element attached to the main <code>.gallery-wrapper</code> element. This isn’t <em>required</em> but it certainly helps from a UX standpoint.</p> + +<h2 id="live-demo">Live Demo</h2> + +<p>Check out the embedded CodePen below to see it in action. More functionality could always be built on top of this, such as rendering all images dynamically on “build”, but for a starting point I think it’s great.</p> + <p><a href="https://codepen.io/bradleytaunt/pen/ExLRyXz">Live CodePen Example</a></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/git-patches/index.html b/build/git-patches/index.html index 3409f1e..89295cc 100644 --- a/build/git-patches/index.html +++ b/build/git-patches/index.html @@ -1,33 +1,47 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Applying Email-Based Git Patches in Evolution on Linux</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Applying Email-Based Git Patches in Evolution on Linux</h1> +<h1 id="applying-email-based-git-patches-in-evolution-on-linux">Applying Email-Based Git Patches in Evolution on Linux</h1> + <p>2023-04-25</p> + <p>Users who work with git patches through email most likely use a terminal-based program such as <code>aerc</code> or <code>mutt</code>. CLI email clients tend to have built-in support for easily applying patches directly to their local repos. But what about people who prefer to use graphical email apps?</p> + <p>Lucky for us, it is actually fairly simple to replicate a similar workflow to that of a CLI client. In this example I will be focusing on the Evolution email client, but the core principles should work in most other GUIs.</p> -<h2>The Basics</h2> -<blockquote><p><strong>Note:</strong> The following assumes you already have <code>git</code> installed and setup on your existing system.</p> + +<h2 id="the-basics">The Basics</h2> + +<blockquote> +<p><strong>Note:</strong> The following assumes you already have <code>git</code> installed and setup on your existing system.</p> </blockquote> -<p>I find it best to first create a top-level folder on your system named <code>patches</code>. We will use this folder as a temporary location for reviewing any <code>git</code> patches submitted via email. I normally place this under <code>/home/<username>/patches</code>.</p> -<p>Next, locate the email patch in Evolution and right-click on it. Select "Save as mbox..." and place this file inside your newly created <code>patches</code> folder.</p> + +<p>I find it best to first create a top-level folder on your system named <code>patches</code>. We will use this folder as a temporary location for reviewing any <code>git</code> patches submitted via email. I normally place this under <code>/home/<username>/patches</code>.</p> + +<p>Next, locate the email patch in Evolution and right-click on it. Select “Save as mbox…” and place this file inside your newly created <code>patches</code> folder.</p> + <p>Now simply open your terminal, navigate to your project and run:</p> -<pre><code>git am <path-to-patches-folder>/<patch-filename>.mbox + +<pre><code>git am <path-to-patches-folder>/<patch-filename>.mbox </code></pre> -<p>This should apply the patch directly to your project without issue. You are now free to test these changes locally. If everything looks good, you're able to instantly push these changes remotely.</p> + +<p>This should apply the patch directly to your project without issue. You are now free to test these changes locally. If everything looks good, you’re able to instantly push these changes remotely.</p> + <p>Done and done.</p> + <p>Feel free to purge your <code>patches</code> folder regularly or keep them around for future reference if you prefer!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/goodbye-css-preprocessors/index.html b/build/goodbye-css-preprocessors/index.html index 295850b..3f4391d 100644 --- a/build/goodbye-css-preprocessors/index.html +++ b/build/goodbye-css-preprocessors/index.html @@ -1,64 +1,95 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Goodbye CSS Preprocessors</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Goodbye CSS Preprocessors</h1> +<h1 id="goodbye-css-preprocessors">Goodbye CSS Preprocessors</h1> + <p>2017-09-07</p> -<p>I have been using preprocessors across all my side projects since they first popped onto the scene. Sass, Stylus, LESS — you name the CSS preprocessor and I've most likely used it because CSS preprocessors are awesome.</p> -<p>But that all changes moving forward. I'm going back to basics with CSS. Straight vanilla, man.</p> + +<p>I have been using preprocessors across all my side projects since they first popped onto the scene. Sass, Stylus, LESS — you name the CSS preprocessor and I’ve most likely used it because CSS preprocessors are awesome.</p> + +<p>But that all changes moving forward. I’m going back to basics with CSS. Straight vanilla, man.</p> + <p><img src="/public/images/sass-cancel_rl1fsw_c_scale,w_800.webp" alt="No Sass" /></p> -<h2>Why? And who cares?</h2> -<p>Let's start by breaking down the main positives about preprocessors:</p> + +<h2 id="why-and-who-cares">Why? And who cares?</h2> + +<p>Let’s start by breaking down the main positives about preprocessors:</p> + <ul> <li>Nested syntax</li> <li>Definable variables</li> <li>Advanced mathematical functions</li> <li>Reusable mixins</li> </ul> -<p>All of these features are great and I completely understand the draw (I was also sucked into the hype) - but now let's see the negatives.</p> -<h2>1. Debugging is a chore</h2> -<p>So you found some weird padding clobbering an element's default styles on line 255 of your main complied CSS file? Excellent! Now you just need to figure out which file that property comes from.</p> -<p>This might sound trivial or that you can fix this with rendered comments but if you ever work on a project with hundreds of Sass/Stylus/LESS files all importing and compiling into each other - it can get out of hand.</p> + +<p>All of these features are great and I completely understand the draw (I was also sucked into the hype) - but now let’s see the negatives.</p> + +<h2 id="1.-debugging-is-a-chore">1. Debugging is a chore</h2> + +<p>So you found some weird padding clobbering an element’s default styles on line 255 of your main complied CSS file? Excellent! Now you just need to figure out which file that property comes from.</p> + +<p>This might sound trivial or that you can fix this with rendered comments but if you ever work on a project with hundreds of Sass/Stylus/LESS files all importing and compiling into each other - it can get out of hand.</p> + <p>Solution: Using plain CSS makes using browser dev tools a breeze. See a bug on line 255? No problem, let me fix line 255.</p> -<h2>2. Dependencies for development</h2> -<p>Building a project with a preprocessor brings with it unnecessary baggage; dependencies. You'll need to be running some sort of task runner (see grunt or gulp) that will compile and minify your CSS. I see this as extra overhead both during the initial setup of the project for new team members and the testing environment.</p> + +<h2 id="2.-dependencies-for-development">2. Dependencies for development</h2> + +<p>Building a project with a preprocessor brings with it unnecessary baggage; dependencies. You’ll need to be running some sort of task runner (see grunt or gulp) that will compile and minify your CSS. I see this as extra overhead both during the initial setup of the project for new team members and the testing environment.</p> + <p>By using plain CSS, you avoid including an extra package in your package.json file (if applicable) or having to rely on third party compilers such as codekit (although I do recommend this app).</p> -<h2>3. Variables & mixins become unwieldily</h2> + +<h2 id="3.-variables-mixins-become-unwieldily">3. Variables & mixins become unwieldily</h2> + <p>Both variables and mixins are great in small doses, but if your project has any real size to it these helpers become a hinderance. By using comma-delimited CSS selectors you can achieve the same outcome without the horror of needing a specific preprocessor file to handle just variables and mixins.</p> + <p>Basic example:</p> + <pre><code>selector, selectTwo, .css-class { - /* shared styling */ + /* shared styling */ } </code></pre> -<h2>4. Welcome to nesting hell</h2> -<p>Honestly, I've never been a fan of nesting. From a file structure perspective it is indeed very "clean", but you sacrifice that cleanliness in the final compiled production code. You're making your development environment easier to glance at and work through at the cost of your production-ready, customer facing code.</p> + +<h2 id="4.-welcome-to-nesting-hell">4. Welcome to nesting hell</h2> + +<p>Honestly, I’ve never been a fan of nesting. From a file structure perspective it is indeed very “clean”, but you sacrifice that cleanliness in the final compiled production code. You’re making your development environment easier to glance at and work through at the cost of your production-ready, customer facing code.</p> + <p>You also run into another big no-no in my eyes: extreme selector specificity. The DOM target search starts to get out of control once you start having classes and selectors building up towards 10 or more steps.</p> + <p>Bad:</p> -<pre><code>body #home .container .modal nav .inner-nav > ul > li > a { + +<pre><code>body #home .container .modal nav .inner-nav > ul > li > a { color: red; } </code></pre> + <p>Good:</p> + <pre><code>.inner-nav a { color: red; } </code></pre> -<p>Don't forget the amount of work needed to override styling with such deep selector specificity. That's where you end up diving into the world of <i>!important</i> tags.</p> -<h2>Final thoughts</h2> + +<p>Don’t forget the amount of work needed to override styling with such deep selector specificity. That’s where you end up diving into the world of !important tags.</p> + +<h2 id="final-thoughts">Final thoughts</h2> + <p>It should go without saying that this is just my personal preference, there is no law behind this. If you use and absolutely love preprocessors - more power to you. All I suggest is using plain old vanilla CSS for your next project and see how it works out.</p> -<p>And do you know what I've learned to appreciate after switching back to vanilla? <strong>CSS is more beautiful when developed in it's rawest form</strong>.</p> + +<p>And do you know what I’ve learned to appreciate after switching back to vanilla? CSS is more beautiful when developed in it’s rawest form.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/hamburger-menu-alternative/index.html b/build/hamburger-menu-alternative/index.html index 1643de1..87f3414 100644 --- a/build/hamburger-menu-alternative/index.html +++ b/build/hamburger-menu-alternative/index.html @@ -1,64 +1,84 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Using Hamburger Menus? Try Sausage Links</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Using Hamburger Menus? Try Sausage Links</h1> +<h1 id="using-hamburger-menus-try-sausage-links">Using Hamburger Menus? Try Sausage Links</h1> + <p>2019-06-14</p> -<p>When designing medium to large sized menu navigations on the mobile web the default go-to, for some time now, has been hamburger menus. This isn't necessarily a <i>bad</i> thing, but there is a simpler alternative for certain use cases.</p> -<p>Before we get into the nitty-gritty details (and a simple demo) of the <em>sausage link</em> concept, let's take a quick look at the pros and cons of hamburger menus.</p> -<h2>Hamburger Menus</h2> -<p>The concept of the <a href="https://codepen.io/search/pens?q=hamburger%20menu&page=1&order=popularity&depth=everything">hamburger menu</a> isn't <em>horrible</em> by any means, in fact it does solve a lot of problems from a visual perspective. Unfortunately, that doesn't mean it exists without some annoying flaws.</p> -<h3>The Good</h3> + +<p>When designing medium to large sized menu navigations on the mobile web the default go-to, for some time now, has been hamburger menus. This isn’t necessarily a bad thing, but there is a simpler alternative for certain use cases.</p> + +<p>Before we get into the nitty-gritty details (and a simple demo) of the <em>sausage link</em> concept, let’s take a quick look at the pros and cons of hamburger menus.</p> + +<h2 id="hamburger-menus">Hamburger Menus</h2> + +<p>The concept of the <a href="https://codepen.io/search/pens?q=hamburger%20menu&page=1&order=popularity&depth=everything">hamburger menu</a> isn’t <em>horrible</em> by any means, in fact it does solve a lot of problems from a visual perspective. Unfortunately, that doesn’t mean it exists without some annoying flaws.</p> + +<h3 id="the-good">The Good</h3> + <ul> <li>Minimizes the amount visual space the menu requires</li> -<li>Fairly commonplace now that a good portion of users understand it's functionality</li> +<li>Fairly commonplace now that a good portion of users understand it’s functionality</li> <li>Makes the lives of designers easier by tucking all items away on mobile 😛</li> </ul> -<h3>The Bad</h3> + +<h3 id="the-bad">The Bad</h3> + <ul> -<li>Requires extra testing/work to ensure the menu will play nice with screen readers and keyboard-only users</li> +<li>Requires extra testing/work to ensure the menu will play nice with screen readers and keyboard-only users</li> <li>Can get overly complex with the presence of children dropdown elements, help text etc.</li> <li>Adds bloat to projects that might require additional JavaScript to render these menus (CSS only hamburger menus avoid this issue)</li> <li>Adds an additional point of interaction from the user (click to open, then proceed to read through available options)</li> </ul> -<p>As you can see, the bad points listed above aren't <em>that</em> bad. I see them more as minor potholes along the UX journey for your end-users. A good portion of hamburger menu examples in the wild work perfectly fine and should remain as they are. However, those outliers who abuse or misuse the hamburger concept should be introduced to <strong>sausage links</strong>.</p> -<h2>Sausage Links</h2> -<p>I should start by mentioning that this concept is far from <strong>new</strong>. There are a good number of websites that already implement this menu type in some form or another. The point of this post isn't to blow your mind with some new-never-thought-of navigation design. I'm just trying to bring awareness to another available menu concept.</p> -<p>Enough chit-chat, let's take a look at sausage links in action:</p> + +<p>As you can see, the bad points listed above aren’t <em>that</em> bad. I see them more as minor potholes along the UX journey for your end-users. A good portion of hamburger menu examples in the wild work perfectly fine and should remain as they are. However, those outliers who abuse or misuse the hamburger concept should be introduced to <strong>sausage links</strong>.</p> + +<h2 id="sausage-links">Sausage Links</h2> + +<p>I should start by mentioning that this concept is far from <strong>new</strong>. There are a good number of websites that already implement this menu type in some form or another. The point of this post isn’t to blow your mind with some new-never-thought-of navigation design. I’m just trying to bring awareness to another available menu concept.</p> + +<p>Enough chit-chat, let’s take a look at sausage links in action:</p> + <p><img src="/public/images/scrolling-navigation.png" alt="Scrolling menu with sausage links" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/QXjjbE/">Live CodePen Example</a></p> -<p>The above CodePen adds a good amount of visual design fluff, so let's take a look at the bare minimum HTML & CSS needed to accomplish this menu:</p> -<pre><code><nav class="sausage-links"> - <ul> - <li><a href="">Homepage</a></li> - <li><a href="">Categories</a></li> - <li><a href="">Filter Properties</a></li> - <li><a href="">Edit Optional Tags</a></li> - <li><a href="">Research Papers</a></li> - <li><a href="">Contact Our Team</a></li> - </ul> -</nav> -</code></pre> -<pre><code>/* Sausage Links Nav Container */ + +<p>The above CodePen adds a good amount of visual design fluff, so let’s take a look at the bare minimum HTML & CSS needed to accomplish this menu:</p> + +<pre><code><nav class="sausage-links"> + <ul> + <li><a href="">Homepage</a></li> + <li><a href="">Categories</a></li> + <li><a href="">Filter Properties</a></li> + <li><a href="">Edit Optional Tags</a></li> + <li><a href="">Research Papers</a></li> + <li><a href="">Contact Our Team</a></li> + </ul> +</nav> + + + +/* Sausage Links Nav Container */ .sausage-links { position: relative; } -/* The left and right "faded" pseudo elements */ +/* The left and right "faded" pseudo elements */ .sausage-links:before, .sausage-links:after { - content: ''; + content: ''; height: calc(100% - 2em); pointer-events: none; position: absolute; @@ -75,7 +95,7 @@ left: 0; } -/* Basic flexbox to prevent items from breaking lines */ +/* Basic flexbox to prevent items from breaking lines */ .sausage-links ul { display: flex; flex-wrap: nowrap; @@ -91,26 +111,36 @@ display: inline-block; } </code></pre> + <p>Pretty simple, eh?</p> + <p><strong>Update</strong>: Thanks to <a href="https://twitter.com/dany0w">@dany0w</a> for pointing out that I forgot to include <code>-webkit-overflow-scrolling: touch</code> for momentum scrolling on iOS.</p> -<h3>The Good</h3> + +<h3 id="the-good-1">The Good</h3> + <ul> <li>Extremely minimal amount of CSS required</li> -<li>Screen reader / keyboard-only safe</li> +<li>Screen reader / keyboard-only safe</li> <li>Zero JavaScript needed</li> <li>No need for hacky hidden <code>radio</code> inputs for toggling parent containers etc.</li> <li>Users can see first few available options without any interaction</li> </ul> -<h3>The Bad</h3> + +<h3 id="the-bad-1">The Bad</h3> + <ul> <li>May not look the most visually appealing for certain project designs (ugly scrollbar in some instances)</li> <li>Better suited for small to medium menu lists compared to massive sitemaps</li> -<li>Without proper fade / cut off visual cues, users may not understand they can scroll</li> +<li>Without proper fade / cut off visual cues, users may not understand they can scroll</li> </ul> -<h2>So, should I use hamburger menus or sausage links?</h2> -<p>That really depends on your project or overall mobile design (I know, such a helpful answer). I'm sure there are even a few use cases where it would make sense to have sausage links within a toggle-based hamburger menu. The menu possibilities could be endless!</p> -<p>That's it. I hope I've inspired you to try out sausage links in the near future or at least made you think more deeply about mobile navigation design!</p> -<p><small>...is anyone else really hungry now?</small></p> + +<h2 id="so-should-i-use-hamburger-menus-or-sausage-links">So, should I use hamburger menus or sausage links?</h2> + +<p>That really depends on your project or overall mobile design (I know, such a helpful answer). I’m sure there are even a few use cases where it would make sense to have sausage links within a toggle-based hamburger menu. The menu possibilities could be endless!</p> + +<p>That’s it. I hope I’ve inspired you to try out sausage links in the near future or at least made you think more deeply about mobile navigation design!</p> + +<p>…is anyone else really hungry now?</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/hamburgers/index.html b/build/hamburgers/index.html index a7934b6..55bbd4e 100644 --- a/build/hamburgers/index.html +++ b/build/hamburgers/index.html @@ -1,44 +1,61 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Stop Using Hamburger Menus (Sometimes)</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Stop Using Hamburger Menus (Sometimes)</h1> +<h1 id="stop-using-hamburger-menus-sometimes">Stop Using Hamburger Menus (Sometimes)</h1> + <p>2023-05-05</p> -<p>I recently <a href="https://fosstodon.org/@tdarb/110264983268249599">tooted about my hatred of website hamburger menus</a> which was met with a surprising amount of support from other users. It seems like most people <em>don't actually like hamburger menus</em>. So why do we, as developers, keep using them in our products and designs? Is it our only option? Or is it because we have become conditioned to expect it?</p> -<h2>The Core Problem with Hamburger Menus</h2> -<p>The biggest headache when coming across these menus on the web is the complete disregard for <strong>accessibility</strong>. Performance and solid user experience is almost always thrown out the window in favour of a "prettier" design layout. You might have made the overall design "cleaner" for your users, but you sacrificed all usability to do so.</p> -<p>I challenge you to visit a webpage or web app with a hamburger menu and try to navigate solely with your keyboard and screen-readers (or better yet - try these screen readers on mobile!). Within seconds you will find a whole mess of issues. Now try the same test with JavaScript disabled... Yikes.</p> -<h2>"But I Have No Choice!"</h2> -<p>I see this argument pop-up frequently when taking to design leaders or developers. I call bullshit on this excuse. You <em>absolutely</em> have the choice to avoid implementing bad designs - that's your job! Either you're not fighting hard enough against those pushing for it, or you're just trying to build a "pretty" portfolio.</p> -<h2>Best Alternative: Sitemap Footer</h2> -<p>So instead of just whining about hamburger menus, I will actually offer up a solid replacement: <strong>sitemap footers</strong>. Simply place all your website/application links into the bottom footer and link directly to them from your header. Be sure to also include some form of "Top of the page" link for quick access back to the initial scroll view.</p> -<p>That's it. There is nothing else you need to do for this to <em>just work</em>. It might sound oversimplified and that's because it is. Looking for an example? This very website utilizes this technique, so give it a spin! Try using just your keyboard or even better - use a screen reader. Disable JS and CSS and watch it work flawlessly still.</p> + +<p>I recently <a href="https://fosstodon.org/@tdarb/110264983268249599">tooted about my hatred of website hamburger menus</a> which was met with a surprising amount of support from other users. It seems like most people <em>don’t actually like hamburger menus</em>. So why do we, as developers, keep using them in our products and designs? Is it our only option? Or is it because we have become conditioned to expect it?</p> + +<h2 id="the-core-problem-with-hamburger-menus">The Core Problem with Hamburger Menus</h2> + +<p>The biggest headache when coming across these menus on the web is the complete disregard for <strong>accessibility</strong>. Performance and solid user experience is almost always thrown out the window in favour of a “prettier” design layout. You might have made the overall design “cleaner” for your users, but you sacrificed all usability to do so.</p> + +<p>I challenge you to visit a webpage or web app with a hamburger menu and try to navigate solely with your keyboard and screen-readers (or better yet - try these screen readers on mobile!). Within seconds you will find a whole mess of issues. Now try the same test with JavaScript disabled… Yikes.</p> + +<h2 id="but-i-have-no-choice">“But I Have No Choice!”</h2> + +<p>I see this argument pop-up frequently when taking to design leaders or developers. I call bullshit on this excuse. You <em>absolutely</em> have the choice to avoid implementing bad designs - that’s your job! Either you’re not fighting hard enough against those pushing for it, or you’re just trying to build a “pretty” portfolio.</p> + +<h2 id="best-alternative-sitemap-footer">Best Alternative: Sitemap Footer</h2> + +<p>So instead of just whining about hamburger menus, I will actually offer up a solid replacement: <strong>sitemap footers</strong>. Simply place all your website/application links into the bottom footer and link directly to them from your header. Be sure to also include some form of “Top of the page” link for quick access back to the initial scroll view.</p> + +<p>That’s it. There is nothing else you need to do for this to <em>just work</em>. It might sound oversimplified and that’s because it is. Looking for an example? This very website utilizes this technique, so give it a spin! Try using just your keyboard or even better - use a screen reader. Disable JS and CSS and watch it work flawlessly still.</p> + <p><strong>Pros:</strong></p> + <ul> <li>Keyboard navigation accessible</li> <li>Excellent screen-reader support</li> -<li>Works on all devices/screens by default (no media queries!)</li> +<li>Works on all devices/screens by default (no media queries!)</li> <li>Stays out of the way until called upon (UX goodness)</li> <li>Requires ZERO CSS or JavaScript</li> </ul> + <p><strong>Cons:</strong></p> + <ul> -<li>Footer can become large with many links (although I <em>really</em> don't see this as a big deal)</li> +<li>Footer can become large with many links (although I <em>really</em> don’t see this as a big deal)</li> </ul> -<h2>No Excuse</h2> -<p>There really is no excuse to still be using hamburger menus. Users expect them to be present only because we as designers have conditioned them think that way. They deserve a better experience on the web. The <em>least</em> we can do is improve something as simple as website navigation...</p> + +<h2 id="no-excuse">No Excuse</h2> + +<p>There really is no excuse to still be using hamburger menus. Users expect them to be present only because we as designers have conditioned them think that way. They deserve a better experience on the web. The <em>least</em> we can do is improve something as simple as website navigation…</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/heif/index.html b/build/heif/index.html index 4f07bf3..112398c 100644 --- a/build/heif/index.html +++ b/build/heif/index.html @@ -1,49 +1,63 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Converting HEIF Images with macOS Automator</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Converting HEIF Images with macOS Automator</h1> +<h1 id="converting-heif-images-with-macos-automator">Converting HEIF Images with macOS Automator</h1> + <p>2023-07-21</p> + <p>Often times when you save or export photos from iOS to iCloud they often render themselves into <code>heif</code> or <code>heic</code> formats. Both macOS and iOS have no problem working with these formats, but a lot of software programs will not even recognize these filetypes. The obvious step would just be to convert them via an application or online service, right?</p> -<p>Not so fast! Wouldn't it be much cleaner if we could simply right-click our <code>heif</code> or <code>heic</code> files and convert them directly in Finder? Well, I've got some good news for you...</p> -<h2>Basic Requirements</h2> + +<p>Not so fast! Wouldn’t it be much cleaner if we could simply right-click our <code>heif</code> or <code>heic</code> files and convert them directly in Finder? Well, I’ve got some good news for you…</p> + +<h2 id="basic-requirements">Basic Requirements</h2> + <ol> <li>You will need to have <a href="https://homebrew.sh">Homebrew</a> installed</li> <li>You will need to install the <code>libheif</code> package through Homebrew: <code>brew install libheif</code></li> </ol> -<h2>Creating our custom Automator script</h2> -<p>For this example script we are going to convert the image to JPG format. You can freely change this to whatever format you wish (PNG, TIFF, etc.). We're just keeping things basic for this tutorial. Don't worry if you've never worked with Automator before because setting things up is incredibly simple.</p> + +<h2 id="creating-our-custom-automator-script">Creating our custom Automator script</h2> + +<p>For this example script we are going to convert the image to JPG format. You can freely change this to whatever format you wish (PNG, TIFF, etc.). We’re just keeping things basic for this tutorial. Don’t worry if you’ve never worked with Automator before because setting things up is incredibly simple.</p> + <ol> -<li>Open the macOS Automator from the Applications folder</li> -<li>Select <code>Quick Option</code> from the first prompt</li> -<li>Set "Workflow receives current" to <code>image files</code></li> -<li>Set the label "in" to <code>Finder</code></li> -<li>From the left pane, select "Library > Utilities"</li> -<li>From the presented choices in the next pane, drag and drop <code>Run Shell Script</code> into the far right pane</li> -<li>Set the area "Pass input" to <code>as arguments</code></li> -<li>Enter the following code below as your script and type <code>⌘-S</code> to save (name it something like "Convert HEIC/HEIF to JPG")</li> -</ol> -<pre><code>for f in "$@" +<li><p>Open the macOS Automator from the Applications folder</p></li> +<li><p>Select <code>Quick Option</code> from the first prompt</p></li> +<li><p>Set “Workflow receives current” to <code>image files</code></p></li> +<li><p>Set the label “in” to <code>Finder</code></p></li> +<li><p>From the left pane, select “Library > Utilities”</p></li> +<li><p>From the presented choices in the next pane, drag and drop <code>Run Shell Script</code> into the far right pane</p></li> +<li><p>Set the area “Pass input” to <code>as arguments</code></p></li> +<li><p>Enter the following code below as your script and type <code>⌘-S</code> to save (name it something like “Convert HEIC/HEIF to JPG”)</p> + +<p>for f in “$@” do -/opt/homebrew/bin/heif-convert "$f" "${f%.*}.jpg" -done -</code></pre> -<h2>Making Edits</h2> -<p>If you ever have the need to edit this script (for example, changing the default format to <code>png</code>), you will need to navigate to your <code>~/Library/Services</code> folder and open your custom heif Quick Action in the Automator application. </p> +/opt/homebrew/bin/heif-convert “$f” “${f%.*}.jpg” +done</p></li> +</ol> + +<h2 id="making-edits">Making Edits</h2> + +<p>If you ever have the need to edit this script (for example, changing the default format to <code>png</code>), you will need to navigate to your <code>~/Library/Services</code> folder and open your custom heif Quick Action in the Automator application. </p> + <p>Simple as that. Happy converting!</p> -<p>If you're interested, I also have some other Automator scripts available:</p> + +<p>If you’re interested, I also have some other Automator scripts available:</p> + <ul> <li><a href="/batch-webp-conversion/">Batch Converting Images to webp with macOS Automator</a></li> <li><a href="/macos-convert-to-html/">Convert Files to HTML with macOS Automator Quick Actions</a></li> diff --git a/build/hello-jekyll/index.html b/build/hello-jekyll/index.html index c15154a..93c5035 100644 --- a/build/hello-jekyll/index.html +++ b/build/hello-jekyll/index.html @@ -1,55 +1,71 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Goodbye WordPress, Hello Jekyll (Again)</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Goodbye WordPress, Hello Jekyll (Again)</h1> +<h1 id="goodbye-wordpress-hello-jekyll-again">Goodbye WordPress, Hello Jekyll (Again)</h1> + <p>2020-08-13</p> -<p>For the past four months this blog has been running on WordPress - but that ended today. I've officially switched back over to Jekyll. I'm not going to spend too much time delving into <em>why</em> I made the transition back, but I'll leave some cliff-notes for any interested parties.</p> -<h2>The big issues with <em>my</em> WordPress setup</h2> -<p>I have to state that these problems existed based on <em>my own</em> setup / hosting choices with WordPress - this is not a direct reflection of WP itself.</p> + +<p>For the past four months this blog has been running on WordPress - but that ended today. I’ve officially switched back over to Jekyll. I’m not going to spend too much time delving into <em>why</em> I made the transition back, but I’ll leave some cliff-notes for any interested parties.</p> + +<h2 id="the-big-issues-with-my-wordpress-setup">The big issues with <em>my</em> WordPress setup</h2> + +<p>I have to state that these problems existed based on <em>my own</em> setup / hosting choices with WordPress - this is not a direct reflection of WP itself.</p> + <ol> -<li><strong>No theme editor access</strong></li> -</ol> -<p> - I was using EasyWP (Namecheap etc.) for my web hosting. It only cost me $3.88/month, which was very cheap for the quality of service provided. Unfortunately, this low price came with some setbacks. EasyWP doesn't allow users to edit <code>header.php</code> or <code>functions.php</code> files directly in the theme editor. Having to resort to FTP for simple one-line change was annoying.</p> +<li><strong>No theme editor access</strong> -<ol start="2"> -<li><strong>Super cache</strong></li> -</ol> -<p> - Caching web pages is wonderful for users on subsequent visits, but EasyWP took this to the extreme. Making minor styling updates sometimes required code changes in the <code>header.php</code> file directly in order to persist (see problem with editing these files in point #1).</p> +<ul> +<li>I was using EasyWP (Namecheap etc.) for my web hosting. It only cost me $3.88/month, which was very cheap for the quality of service provided. Unfortunately, this low price came with some setbacks. EasyWP doesn’t allow users to edit <code>header.php</code> or <code>functions.php</code> files directly in the theme editor. Having to resort to FTP for simple one-line change was annoying.</li> +</ul></li> +<li><strong>Super cache</strong> -<ol start="3"> -<li><strong>Monthly cost</strong></li> -</ol> -<p> - As I stated above, spending $3.88 on a monthly basis was peanuts in the grand scheme of things. Still, an extra monthly subscription for a side hobby seemed overkill for my use case.</p> +<ul> +<li>Caching web pages is wonderful for users on subsequent visits, but EasyWP took this to the extreme. Making minor styling updates sometimes required code changes in the <code>header.php</code> file directly in order to persist (see problem with editing these files in point #1).</li> +</ul></li> +<li><strong>Monthly cost</strong> -<ol start="4"> -<li><strong>Future proofing</strong></li> +<ul> +<li>As I stated above, spending $3.88 on a monthly basis was peanuts in the grand scheme of things. Still, an extra monthly subscription for a side hobby seemed overkill for my use case.</li> +</ul></li> +<li><strong>Future proofing</strong> + +<ul> +<li>In the end, having the core website generate itself into static files means it will stand the test of time on the interwebs. HTML & CSS FTW.</li> +</ul></li> </ol> -<p> - In the end, having the core website generate itself into static files means it will stand the test of time on the interwebs. HTML & CSS FTW.</p> -<h2>What I lost in the switch</h2> + +<h2 id="what-i-lost-in-the-switch">What I lost in the switch</h2> + <ol> -<li><strong>Comments</strong></li> -</ol> -<p> - I loved the concept of owing / hosting comments directly on each post but this seemed like a fair trade-off when compared to the positives listed above. I might circle back around and use something like <a href="https://commento.io/">Commento</a> or <a href="https://github.com/imsun/gitment">Gitment</a></p> +<li><strong>Comments</strong> -<ol start="2"> -<li><strong>Blog anywhere</strong></li> +<ul> +<li>I loved the concept of owing / hosting comments directly on each post but this seemed like a fair trade-off when compared to the positives listed above. I might circle back around and use something like <a href="https://commento.io/">Commento</a> or <a href="https://github.com/imsun/gitment">Gitment</a></li> +</ul></li> +<li><strong>Blog anywhere</strong> + +<ul> +<li>Having the ability to hop on any machine, log in to my site and blog was awesome. Over time though, I found myself not doing this very often. Most times when composing an article I found I would write it out, edit and publish all in one sitting. Cool concept - just not as useful.</li> +</ul></li> </ol> -<p> - Having the ability to hop on any machine, log in to my site and blog was awesome. Over time though, I found myself not doing this very often. Most times when composing an article I found I would write it out, edit and publish all in one sitting. Cool concept - just not as useful.</p> -<h2>Moving forward</h2> -<p>I've learned to stick with what keeps me productive (and in this case, keeps me writing consistently). I still love WordPress and won't hesitate to reach for it when the need arrives. Unfortunately, it seems my personal website isn't one of those instances.</p> + +<h2 id="moving-forward">Moving forward</h2> + +<p>I’ve learned to stick with what keeps me productive (and in this case, keeps me writing consistently). I still love WordPress and won’t hesitate to reach for it when the need arrives. Unfortunately, it seems my personal website isn’t one of those instances.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/html-dark-mode/index.html b/build/html-dark-mode/index.html index 5ea7a85..2499d84 100644 --- a/build/html-dark-mode/index.html +++ b/build/html-dark-mode/index.html @@ -1,37 +1,46 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>HTML Dark Mode</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>HTML Dark Mode</h1> +<h1 id="html-dark-mode">HTML Dark Mode</h1> + <p>2023-04-11</p> -<p>I wrote an article back in 2021 called <a href="https://bt.ht/lazy-dev-dark-mode/">The Lazy Developer's Dark + +<p>I wrote an article back in 2021 called <a href="https://bt.ht/lazy-dev-dark-mode/">The Lazy Developer’s Dark Mode</a> where I explained how to implement -a very basic "dark mode" by using the <code>prefers-color-scheme</code> CSS attribute. +a very basic “dark mode” by using the <code>prefers-color-scheme</code> CSS attribute. This stills works perfectly fine, and in fact there is a cleaner variation of this created by <em>jacksonchen666</em>: <a href="https://jacksonchen666.com/posts/2023-04-09/13-47-16/">These 3 Lines of CSS Will Give You Dark Mode for Free</a>.</p> + <p>But today I wanted to show how to add dark mode functionality to a website without <em>any CSS at all</em>.</p> -<pre><code><meta name="color-scheme" content="dark light"> + +<pre><code><meta name="color-scheme" content="dark light"> </code></pre> -<p>Add that line inside the <code>head</code> tags on your HTML files and you're good to go.</p> -<h2>Minor Caveat</h2> + +<p>Add that line inside the <code>head</code> tags on your HTML files and you’re good to go.</p> + +<h2 id="minor-caveat">Minor Caveat</h2> + <p>I mentioned this same issue on the official <a href="https://barf.bt.ht/dark-mode/">barf blog -post</a> but it doesn't hurt to repeat it here. -Safari still has minor ahref / link color issue when defaulting to browser dark +post</a> but it doesn’t hurt to repeat it here. +Safari still has minor ahref / link color issue when defaulting to browser dark mode. If supporting that browser is a deal-breaker for you, I suggest looking at my <a href="https://bt.ht/safari-default-dark-mode/">hacky solution</a>.</p> + <p>Hopefully this helps others to add dark mode to their existing websites and projects with minimal effort!</p> <footer role="contentinfo"> diff --git a/build/html-like-1999/index.html b/build/html-like-1999/index.html index b24d2fd..a9202ea 100644 --- a/build/html-like-1999/index.html +++ b/build/html-like-1999/index.html @@ -1,64 +1,75 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Write HTML Like It's 1999</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Write HTML Like It's 1999</h1> +<h1 id="write-html-like-its-1999">Write HTML Like It’s 1999</h1> + <p>2019-06-06</p> -<p>I am sure it's safe to say that most developers love to use the latest and greatest web tools available. Helpful resources such as preprocessors, template engines, syntax formatters - you name it - can all make a developer's life easier. Unfortunately, this sometimes comes at a cost: the HTML structure.</p> -<p>This is why I try my best to write HTML as if I'm stuck with the constraints of the 90s (within reason). What does this mean exactly? It means that <code>tables</code> are coded with <code>table</code> elements. Navigations are coded with <code>nav</code> and ordered/unordered list-items. Form inputs are not set with <code>display: none</code> and replaced with custom containers. You know, <em>semantic</em> HTML.</p> -<p>To be clear, I'm not advocating for creating projects that <em>look</em> like they belong in the 1990s. I would just prefer developers / designers be more conscious of their HTML <em>skeleton</em>.</p> -<h2>Bad HTML practices</h2> -<p>Let's do a very simple breakdown of some of the more common HTML no-nos:</p> -<p><ul> -<li>Using <code>span</code> or <code>div</code> elements for navigations or list components</li> -<li>Implementing custom <code>div</code> layouts for forms while removing items like <code>select</code> or <code>radio</code></li> -<li>Creating tables built out of custom <code>div</code> elements</li> -<li>Over-nesting elements or making overly complex depth to simple components</li> -<li>Content being heavily reliant on JavaScript "injection"</li> -</ul></p> -<h2>Good HTML practices</h2> + +<p>I am sure it’s safe to say that most developers love to use the latest and greatest web tools available. Helpful resources such as preprocessors, template engines, syntax formatters - you name it - can all make a developer’s life easier. Unfortunately, this sometimes comes at a cost: the HTML structure.</p> + +<p>This is why I try my best to write HTML as if I’m stuck with the constraints of the 90s (within reason). What does this mean exactly? It means that <code>tables</code> are coded with <code>table</code> elements. Navigations are coded with <code>nav</code> and ordered/unordered list-items. Form inputs are not set with <code>display: none</code> and replaced with custom containers. You know, <em>semantic</em> HTML.</p> + +<p>To be clear, I’m not advocating for creating projects that <em>look</em> like they belong in the 1990s. I would just prefer developers / designers be more conscious of their HTML <em>skeleton</em>.</p> + +<h2 id="bad-html-practices">Bad HTML practices</h2> + +<p>Let’s do a very simple breakdown of some of the more common HTML no-nos:</p> + +<h2 id="good-html-practices">Good HTML practices</h2> + <p>So what should you do in place of these bad HTML implementations?</p> -<p><ul> -<li>Use proper <code>nav</code>, <code>ul</code> and <code>ol</code> for navigations or list components</li> -<li>Style form elements directly <a href="https://www.filamentgroup.com/lab/select-css.html">this is already supported in browsers</a></li> -<li>Build tables using <code>table</code> element structure (mind-blowing, I know!)</li> -<li>Keep element hierarchy as slim and top level as possible</li> -<li>Avoid injecting <i>any</i> content via JavaScript (I understand this is difficult for certain apps, but try to minimize this as much as possible)</li> -</ul></p> -<h2>My basic "structure" test</h2> -<p>I've found a pretty simple starting point for testing the <em>bones of a website</em> by using the following single line of CSS:</p> + +<h2 id="my-basic-structure-test">My basic “structure” test</h2> + +<p>I’ve found a pretty simple starting point for testing the <em>bones of a website</em> by using the following single line of CSS:</p> + <pre><code>* { border: 2px dotted black; } </code></pre> + <p>This property simply outlines all elements on the current page in a dotted border. By placing a border on every HTML element you can instantly see how overly complex or <em>ugly</em> your structure might be under the hood.</p> -<h2>"Thanks, Captain Obvious!"</h2> -<p>I know, this stuff is pretty basic. The point of this post isn't to tell you (developers) something brand new or mind-blowing, but instead should inspire you to keep things simple.</p> -<p>Don't forget that there is always someone new into the world of design and development. Hopefully this post steers others towards keeping HTML code semantic and clean.</p> -<h2>Update to this article</h2> -<p>Since this post received <a href="https://news.ycombinator.com/item?id=20133817">so much more attention</a> than I ever expected, I've decided to touch on a few small points brought up in the comments.</p> + +<h2 id="thanks-captain-obvious">“Thanks, Captain Obvious!”</h2> + +<p>I know, this stuff is pretty basic. The point of this post isn’t to tell you (developers) something brand new or mind-blowing, but instead should inspire you to keep things simple.</p> + +<p>Don’t forget that there is always someone new into the world of design and development. Hopefully this post steers others towards keeping HTML code semantic and clean.</p> + +<h2 id="update-to-this-article">Update to this article</h2> + +<p>Since this post received <a href="https://news.ycombinator.com/item?id=20133817">so much more attention</a> than I ever expected, I’ve decided to touch on a few small points brought up in the comments.</p> + <ol> -<li><p><strong>What is the benefit of semantic HTML?</strong> - - Accessibility. Programs like screen readers are built around the foundation of proper HTML hierarchy. I highly recommend testing all your projects with a screen reader - it will open your eyes to a lot of issues users with disabilities suffer through.</p> -</li> -<li><p><strong>Tables not being responsive</strong> - - This simply isn't true. It is much more semantic to layout your tables as you would normally, then for mobile devices you can target specific inner elements and alter them with <code>flexbox</code> etc. (You can see responsive tables in action <a href="/responsive-tables">here</a>)</p> -</li> -<li><p><strong>Instead of the CSS one-liner, simply use Firefox debugger</strong> - - Fair point. Firefox is great!</p> -</li> +<li><p><strong>What is the benefit of semantic HTML?</strong></p> + +<ul> +<li>Accessibility. Programs like screen readers are built around the foundation of proper HTML hierarchy. I highly recommend testing all your projects with a screen reader - it will open your eyes to a lot of issues users with disabilities suffer through.</li> +</ul></li> +<li><p><strong>Tables not being responsive</strong></p> + +<ul> +<li>This simply isn’t true. It is much more semantic to layout your tables as you would normally, then for mobile devices you can target specific inner elements and alter them with <code>flexbox</code> etc. (You can see responsive tables in action <a href="/responsive-tables">here</a>)</li> +</ul></li> +<li><p><strong>Instead of the CSS one-liner, simply use Firefox debugger</strong></p> + +<ul> +<li>Fair point. Firefox is great!</li> +</ul></li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/html5-validator-badge/index.html b/build/html5-validator-badge/index.html index 3b872fc..0d07d22 100644 --- a/build/html5-validator-badge/index.html +++ b/build/html5-validator-badge/index.html @@ -1,47 +1,79 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Using HTML Validator Badges Again</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Using HTML Validator Badges Again</h1> +<h1 id="using-html-validator-badges-again">Using HTML Validator Badges Again</h1> + <p>2019-07-05</p> -<p>There was a time on the Internet when websites wore badges of honor, declaring that their code was semantic and followed the W3C guidelines. The validators we used weren't great (and <strong>still</strong> aren't perfect) but they represented a community that took pride in caring about the quality of their work. I think it's time we bring HTML badges back.</p> -<h2>Getting the flaws out of the way</h2> -<p>Of course, there were reasons why these badges slowly faded out of popularity. Some of the reasoning made sense, but most felt like a stretch in logic from my perspective. I always looked at it as a "the good outweighs the bad".</p> -<p>Jukka Korpela's post way back in 2003, <a href="http://jkorpela.fi/html/validation.html">HTML validation is a good tool but just a tool</a>, highlighted a lot of problems with relying so heavily on these HTML validators. I suggest you give it a read if this kind of thing interests you. I found it fascinating, even though I disagree with most of the points he makes.</p> + +<p>There was a time on the Internet when websites wore badges of honor, declaring that their code was semantic and followed the W3C guidelines. The validators we used weren’t great (and <strong>still</strong> aren’t perfect) but they represented a community that took pride in caring about the quality of their work. I think it’s time we bring HTML badges back.</p> + +<h2 id="getting-the-flaws-out-of-the-way">Getting the flaws out of the way</h2> + +<p>Of course, there were reasons why these badges slowly faded out of popularity. Some of the reasoning made sense, but most felt like a stretch in logic from my perspective. I always looked at it as a “the good outweighs the bad”.</p> + +<p>Jukka Korpela’s post way back in 2003, <a href="http://jkorpela.fi/html/validation.html">HTML validation is a good tool but just a tool</a>, highlighted a lot of problems with relying so heavily on these HTML validators. I suggest you give it a read if this kind of thing interests you. I found it fascinating, even though I disagree with most of the points he makes.</p> + <p>Some negatives used to dismiss HTML badges:</p> + <ul> <li><strong>The badge system is outdated</strong> - - Dismissing the worth of something based on how long it has been around is foolish. Many tools and frameworks are "outdated" but are still used to this day with great success.</li> -<li><strong>HTML5 doesn't <em>require</em> validation</strong> - - Technically <em>no subset of HTML</em> requires validation - but developers should aim for it. The W3C validators perform a solid job of keeping a standard for web development, so by following a standard we can keep experiences consistent for users.</li> + +<ul> +<li>Dismissing the worth of something based on how long it has been around is foolish. Many tools and frameworks are “outdated” but are still used to this day with great success.</li> +</ul></li> +<li><strong>HTML5 doesn’t <em>require</em> validation</strong> + +<ul> +<li>Technically <em>no subset of HTML</em> requires validation - but developers should aim for it. The W3C validators perform a solid job of keeping a standard for web development, so by following a standard we can keep experiences consistent for users.</li> +</ul></li> <li><strong>Validation is too formal</strong> - - I believe in the ability to achieve your desired outcome based on almost any constraints. If a project leans you towards invalid or non-semantic structure to fulfill requirements, a better approach needs to be evaluated. We as developers tend to settle too quickly on the easiest option available to us.</li> -<li><strong>Websites / web apps are just <em>too complex</em> to follow the W3C guidelines</strong> - - I call <em>BS</em> on this argument. The complexity of a website should have nothing to do with keeping semantic standards. <em>This is your job.</em></li> + +<ul> +<li>I believe in the ability to achieve your desired outcome based on almost any constraints. If a project leans you towards invalid or non-semantic structure to fulfill requirements, a better approach needs to be evaluated. We as developers tend to settle too quickly on the easiest option available to us.</li> +</ul></li> +<li><strong>Websites / web apps are just <em>too complex</em> to follow the W3C guidelines</strong> + +<ul> +<li>I call <em>BS</em> on this argument. The complexity of a website should have nothing to do with keeping semantic standards. <em>This is your job.</em></li> +</ul></li> <li><strong>It only exists to catch syntax errors</strong> - - For the record, I still see this more of a positive take on using validators. Subtle and nuanced syntax mistakes can be easily overlooked by the human eye.</li> + +<ul> +<li>For the record, I still see this more of a positive take on using validators. Subtle and nuanced syntax mistakes can be easily overlooked by the human eye.</li> +</ul></li> </ul> -<h2>"Nobody puts <em>badges</em> in a corner"</h2> -<p>A large of amount of designers / developers tend to forget that there are new people entering our industry everyday and they might not be as well versed in the basics of the web (HTML & CSS specifically). Since so many newcomers start out with JavaScript frameworks or jump onto pre-existing projects, they don't always grasp the core foundation of valid markup. Some frameworks even break basic standards for visuals or easier development environments - setting their initial expectations that ugly semantics is acceptable code. The ends justify the means, etc.</p> -<p>Guiding first-timers towards HTML validators let's them rethink their structure when building products or at least give some forethought to their outputted code. We, the more <em>verteran</em> members of the community, have the knowledge of proper semantics since we grew our careers around this "trend". We shouldn't assume newbies have the same understanding. The basics are important.</p> -<h2>Open source HTML5 badge</h2> -<p>Since the W3C doesn't officially produce any badges for HTML5 validation <sup><a href="#1">1</a></sup>, I've gone ahead and open sourced <code>SVG</code> and <code>PNG</code> versions of a badge based off the current W3C designs. You can check out the Github repo: <a href="https://github.com/bradleytaunt/html5-valid-badge">HTML5 Valid Badge</a></p> + +<h2 id="nobody-puts-badges-in-a-corner">“Nobody puts <em>badges</em> in a corner”</h2> + +<p>A large of amount of designers / developers tend to forget that there are new people entering our industry everyday and they might not be as well versed in the basics of the web (HTML & CSS specifically). Since so many newcomers start out with JavaScript frameworks or jump onto pre-existing projects, they don’t always grasp the core foundation of valid markup. Some frameworks even break basic standards for visuals or easier development environments - setting their initial expectations that ugly semantics is acceptable code. The ends justify the means, etc.</p> + +<p>Guiding first-timers towards HTML validators let’s them rethink their structure when building products or at least give some forethought to their outputted code. We, the more <em>verteran</em> members of the community, have the knowledge of proper semantics since we grew our careers around this “trend”. We shouldn’t assume newbies have the same understanding. The basics are important.</p> + +<h2 id="open-source-html5-badge">Open source HTML5 badge</h2> + +<p>Since the W3C doesn’t officially produce any badges for HTML5 validation 1, I’ve gone ahead and open sourced <code>SVG</code> and <code>PNG</code> versions of a badge based off the current W3C designs. You can check out the Github repo: <a href="https://github.com/bradleytaunt/html5-valid-badge">HTML5 Valid Badge</a></p> + <p>If you decide to use these badges, be sure to link these images to your valid passing URL (<a href="https://html5.validator.nu">html5.validator.nu</a>). You can see an example of the link in the footer of this website.</p> -<p>Please feel free to reach out and share your websites / projects that pass as valid HTML and include an HTML valid badge. I'd love to check them out!</p> -<h2>Refs</h2> -<p><sup id="1">1</sup> <a href="http://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/">Interview with Mike Smith</a>: "There won't be any proper Valid HTML5 icon forthcoming, so if you'd like to use one in your content, you'll probably need to create one on your own."</p> + +<p>Please feel free to reach out and share your websites / projects that pass as valid HTML and include an HTML valid badge. I’d love to check them out!</p> + +<h2 id="refs">Refs</h2> + +<p>1 <a href="http://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/">Interview with Mike Smith</a>: “There won’t be any proper Valid HTML5 icon forthcoming, so if you’d like to use one in your content, you’ll probably need to create one on your own.”</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/improving-githubs-new-design/index.html b/build/improving-githubs-new-design/index.html index 6f4aa02..36f2eb9 100644 --- a/build/improving-githubs-new-design/index.html +++ b/build/improving-githubs-new-design/index.html @@ -1,52 +1,55 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Improving Github's New Design</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Improving Github's New Design</h1> +<h1 id="improving-githubs-new-design">Improving Github’s New Design</h1> + <p>2020-07-07</p> + <p>Like many other Github users, I am not a big fan of their recent repository page redesign. In my mind it seems like a change just for the sake of change - the original UI worked perfectly fine.</p> + <p><em>Sigh.</em></p> + <p>I was planning on recreating the original Github layout with custom CSS but decided against it. Tackling such a big change in design would cause headaches if Github ever changed even one simple class or id on a given element. My final conclusion was to just improve their new design with my own personal quality of life improvements.</p> -<p>So, enough chit-chat. Let's get into it.</p> -<h2>Current Design (2020)</h2> -<p>The default view for a repo's homepage and ticket items are locked at a set <code>max-width</code>. This causes some visual strain in comparison to the full-width headers and navigations directly above. I use a decently sized montior when using your app Gitub - <strong>let me use all the space available to me</strong>!</p> -<p><figure> -<img src="/public/images/github-design-current.webp" alt="Current Github design"> -<figcaption>The current design of a repo's homepage. (<a href="/public/images/github-design-current.webp">direct link to image</a>)</figcaption> -</figure></p> -<p><figure> -<img src="/public/images/github-ticket.webp" alt="Github ticket design"> -<figcaption>The current design of a ticket item (<a href="/public/images/github-ticket.webp">direct link to image</a>)</figcaption> -</figure> </p> -<h2>My Improvements</h2> -<p>Your users shouldn't have to jump around the page looking for the important information they want to see. Resetting the basic repo information to the left side of the screen allows user to <em>instantly</em> read-up on the project details. (This design is catered towards left-to-right readers mind you).</p> -<p>We now also utilize all the available screen space, dependent on the user's browser window size.</p> -<p><figure> -<img src="/public/images/github-design-current-redesign.webp" alt="Current Github redesign"> -<figcaption>The repo's homepage now uses all available space (<a href="/public/images/github-design-current-redesign.webp">direct link to image</a></figcaption> -</figure></p> + +<p>So, enough chit-chat. Let’s get into it.</p> + +<h2 id="current-design-2020">Current Design (2020)</h2> + +<p>The default view for a repo’s homepage and ticket items are locked at a set <code>max-width</code>. This causes some visual strain in comparison to the full-width headers and navigations directly above. I use a decently sized montior when using your app Gitub - <strong>let me use all the space available to me</strong>!</p> + +<h2 id="my-improvements">My Improvements</h2> + +<p>Your users shouldn’t have to jump around the page looking for the important information they want to see. Resetting the basic repo information to the left side of the screen allows user to <em>instantly</em> read-up on the project details. (This design is catered towards left-to-right readers mind you).</p> + +<p>We now also utilize all the available screen space, dependent on the user’s browser window size.</p> + <p>We make similar updates to the ticket item view and also remove the out-of-place <code>margin-bottom</code> from the project link headers.</p> -<p><figure> -<img src="/public/images/github-ticket-redesign.webp" alt="Github ticket redesign"> -<figcaption>Github ticket items now align better with their header siblings (<a href="/public/images/github-ticket-redesign.webp">direct link to image</a>)</figcaption> -</figure> </p> -<h2>Try It Yourself!</h2> + +<h2 id="try-it-yourself">Try It Yourself!</h2> + <p>You can very easily implement these custom CSS changes with an extension for the browser of your choice:</p> -<p> <em>Firefox: <a href="https://addons.mozilla.org/en-US/firefox/addon/styl-us/">Stylus</a> - </em> Chrome: <a href="https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha">Stylebot</a></p> + +<ul> +<li>Firefox: <a href="https://addons.mozilla.org/en-US/firefox/addon/styl-us/">Stylus</a></li> +<li>Chrome: <a href="https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha">Stylebot</a></li> +</ul> + <p>Then create a new custom CSS file to target <code>github.com</code> with the following properties:</p> + <pre><code>.container-xl { max-width: 100%; } @@ -59,7 +62,7 @@ flex-direction: row !important; } -.repohead > div.d-flex { +.repohead > div.d-flex { margin-bottom: 0 !important; } @@ -74,7 +77,8 @@ width: 100%; } </code></pre> -<p>That's it! Feel free to improve on this and further make it your own! I might create a new repo for this project if I end up adding even more improvements to the core CSS.</p> + +<p>That’s it! Feel free to improve on this and further make it your own! I might create a new repo for this project if I end up adding even more improvements to the core CSS.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/improving-receipt-ux/index.html b/build/improving-receipt-ux/index.html index d1c8779..539411d 100644 --- a/build/improving-receipt-ux/index.html +++ b/build/improving-receipt-ux/index.html @@ -1,47 +1,62 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Improving Receipt UX</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Improving Receipt UX</h1> +<h1 id="improving-receipt-ux">Improving Receipt UX</h1> + <p>2019-05-15</p> -<p>There was a pretty interesting article posted a couple days ago about <a href="https://www.fastcompany.com/90347782/the-humble-receipt-gets-a-brilliant-redesign">rethinking the standard receipt design</a> that I found quite compelling. Although, as good as the concept is, I think it can be improved (simplified) even further.</p> -<h2>What was the redesign exaclty?</h2> + +<p>There was a pretty interesting article posted a couple days ago about rethinking the standard receipt design that I found quite compelling. Although, as good as the concept is, I think it can be improved (simplified) even further.</p> + +<h2 id="what-was-the-redesign-exaclty">What was the redesign exaclty?</h2> + <p>Overall <a href="https://twitter.com/datatoviz?lang=en">Susie Lu</a> did a wonderful job tackling such an old and forgotten design. She fixed some major pain points with the current receipt layout:</p> + <ul> <li>Bubble chart to visually indicate total spent per category</li> <li>Categorized items by percentage of total spent</li> <li>List individual items in descending order based on cost</li> <li>Bar charts to compliment the item listing order</li> </ul> + <p>Curious how her redesign looks? <a href="https://www.fastcompany.com/90347782/the-humble-receipt-gets-a-brilliant-redesign">Take a look at the original article</a></p> -<h2>What did this concept get wrong?</h2> + +<h2 id="what-did-this-concept-get-wrong">What did this concept get wrong?</h2> + <p>Simply put: <strong>paper waste</strong>. </p> + <p>Using bubble and bar charts from a visual design perspective is great - but not so eco-friendly in this instance (since we are dealing with physical paper waste). It might seem like a small nitpick but with hundreds of thousands (if not millions) of receipts printed daily, this extra paper space required would add up quickly.</p> + <p>Fortunately, I think with some minor tweaks we can keep the underlying principles of the new redesign, while creating a more eco-friendly layout. We can save more space and therefore save on the overall paper needed.</p> -<h2>Receipt Redesign</h2> -<p>Let's take a look at my redesign concept:</p> -<p><img src="/public/images/receipt-update.webp" alt="Receipt Update"> -</p> + +<h2 id="receipt-redesign">Receipt Redesign</h2> + +<p>Let’s take a look at my redesign concept:</p> + <p>With this layout we are able to keep all the key concepts that <a href="https://twitter.com/datatoviz?lang=en">Susie Lu</a> initially introduced with her receipt design while preserving more space.</p> + <ul> <li>Categories are still listed by percentage of total spent</li> <li>Individual items are organized in descending order based on cost</li> -<li>Uppercase and lowercase elements are used to distinguish parent / child items instead of additional space or dividers</li> +<li>Uppercase and lowercase elements are used to distinguish parent / child items instead of additional space or dividers</li> </ul> -<h2>Final thoughts</h2> -<p>The original redesign from a visual perspective is <em>wonderful</em> but when you start to think about implementing it into the real world, it seems slightly impractical. My redesign concept is far from perfect (I'm sure I've overlooked some use cases) but I think it's a strong step forward for redesigning our archaic receipt layouts.</p> + +<h2 id="final-thoughts">Final thoughts</h2> + +<p>The original redesign from a visual perspective is <em>wonderful</em> but when you start to think about implementing it into the real world, it seems slightly impractical. My redesign concept is far from perfect (I’m sure I’ve overlooked some use cases) but I think it’s a strong step forward for redesigning our archaic receipt layouts.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/improving-tufte-jekyll/index.html b/build/improving-tufte-jekyll/index.html index 84b89be..95bc768 100644 --- a/build/improving-tufte-jekyll/index.html +++ b/build/improving-tufte-jekyll/index.html @@ -1,27 +1,36 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Improving Tufte CSS for Jekyll</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Improving Tufte CSS for Jekyll</h1> +<h1 id="improving-tufte-css-for-jekyll">Improving Tufte CSS for Jekyll</h1> + <p>2019-11-01</p> + <p>After creating the ET-Jekyll theme almost two years ago, I finally got around to revamping the structure and improving a lot of minor performance issues. Items that have been surely needing of updates for the last couple of years.</p> -<h2>Introductions</h2> -<p>I've always been a sucker for Edward Tufte's incredibly simple, yet powerful design work used in his books and handout projects. So, in 2018 I released a Tufte CSS inspired Jekyll theme for the open source community. I called it <a href="https://et-jekyll.netlify.com">ET-Jekyll</a> (so original, I know). Tufte CSS was a great starting point for my Jekyll theme, but there were areas I thought could use some minor improvements.</p> + +<h2 id="introductions">Introductions</h2> + +<p>I’ve always been a sucker for Edward Tufte’s incredibly simple, yet powerful design work used in his books and handout projects. So, in 2018 I released a Tufte CSS inspired Jekyll theme for the open source community. I called it <a href="https://et-jekyll.netlify.com">ET-Jekyll</a> (so original, I know). Tufte CSS was a great starting point for my Jekyll theme, but there were areas I thought could use some minor improvements.</p> + <p>Feel free to read all the details on the design here: <a href="https://et-jekyll.netlify.com/et-jekyll-theme/">ET-Jekyll theme details</a></p> -<h2>Minor Fixes One Year Later</h2> -<p>When I finally circled back to this project recently, I noticed some minor issues that could be improved right away with little to no effort. Let's see the changes made at a glance:</p> + +<h2 id="minor-fixes-one-year-later">Minor Fixes One Year Later</h2> + +<p>When I finally circled back to this project recently, I noticed some minor issues that could be improved right away with little to no effort. Let’s see the changes made at a glance:</p> + <ul> <li>Sidenote, marginnote and figure element restyling (flexbox)</li> <li>Table styling fixes (right alignment issues)</li> @@ -34,48 +43,112 @@ <li>Add missing image link on example page</li> <li>Update details post structure</li> </ul> + <p>You can view all the updates in more detail <a href="https://github.com/bradleytaunt/ET-Jekyll/commit/254f9e8f28764c9525ba7405bbbfa18a3867d241">here</a>.</p> -<p><strong>So what did this accomplish?</strong> Let's break it down below.</p> -<h2>First Contentful Paint & Input Delay</h2> + +<p><strong>So what did this accomplish?</strong> Let’s break it down below.</p> + +<h2 id="first-contentful-paint-input-delay">First Contentful Paint & Input Delay</h2> + <p>The new improvements have netted the theme a savings of 300ms on first paint and reduced the input delay by 150ms. Small wins - but wins nonetheless since every millisecond counts.</p> -<p><figure> - <img src="/public/images/tufte-first-paint.webp" alt="First paint comparison" /> - <figcaption>First contentful paint savings: 300ms (<a href="/public/images/tufte-first-paint.webp">direct link to image)</a></figcaption> -</figure></p> -<p><figure> - <img src="/public/images/tufte-input-delay.webp" alt="Input delay comparison" /> - <figcaption>Reduction in input delay: 370ms down to 220ms (<a href="/public/images/tufte-input-delay.webp">direct link to image</a>)</figcaption> -</figure></p> -<h2>Fixing Render Blocking Items</h2> + +<h2 id="fixing-render-blocking-items">Fixing Render Blocking Items</h2> + <p>The original theme reported a few items that were slowing down the initial render for the end-users:</p> + <table> -<tr><th>URL </th><th>Size (KB) </th><th>Savings (ms) </th></tr> -<tr><td>/css/style.css </td><td>2.0 </td><td>150 </td></tr> -<tr><td>/lazysizes@4.0.1/lazysizes.js </td><td>5.0 </td><td>960 </td></tr> -<tr><td>MathJax.js?config=TeX-MML-AM<em></em>HTML </td><td>18.0 </td><td>1,260 </td></tr> -</table><p>These items were resolved by:</p> +<thead> +<tr> +<th>URL</th> +<th>Size (KB)</th> +<th>Savings (ms)</th> +</tr> +</thead> + +<tbody> +<tr> +<td>/css/style.css</td> +<td>2.0</td> +<td>150</td> +</tr> +<tr> +<td>/lazysizes@4.0.1/lazysizes.js</td> +<td>5.0</td> +<td>960</td> +</tr> +<tr> +<td>MathJax.js?config=TeX-MML-AM_CHTML</td> +<td>18.0</td> +<td>1,260</td> +</tr> +</tbody> +</table> + +<p>These items were resolved by:</p> + <ul> <li>Rendering all styling inline (therefore removing the extra HTTP request)</li> <li>Removing the lazysizes library altogether (browsers plan to support lazy loading natively in the future) + <ul> <li>The future plan is to integrate something like Cloudinary for out-of-the-box image processing</li> -</ul> -</li> +</ul></li> <li>Switch over MathJax to render equations as embedded SVGs (saves on bandwidth rendering an entire extra typeface)</li> </ul> -<h2>Lighthouse Numbers</h2> + +<h2 id="lighthouse-numbers">Lighthouse Numbers</h2> + <p>Though it might not look like much, the updated theme receives a 4-point boost to its performance rating during a Lighthouse audit. Having a perfect score would be even better, but I can settle for 2-points under (for now).</p> -<h4>Old Version</h4> + +<h4 id="old-version">Old Version</h4> + <table> -<tr><th>Performance </th><th>Accessibility </th><th>Best Practices </th><th>SEO </th></tr> -<tr><td>94 </td><td>100 </td><td>100 </td><td>100 </td></tr> -</table><h4>New Version</h4> +<thead> +<tr> +<th>Performance</th> +<th>Accessibility</th> +<th>Best Practices</th> +<th>SEO</th> +</tr> +</thead> + +<tbody> +<tr> +<td>94</td> +<td>100</td> +<td>100</td> +<td>100</td> +</tr> +</tbody> +</table> + +<h4 id="new-version">New Version</h4> + <table> -<tr><th>Performance </th><th>Accessibility </th><th>Best Practices </th><th>SEO </th></tr> -<tr><td>98 </td><td>100 </td><td>100 </td><td>100 </td></tr> -</table><h2>Final Thoughts</h2> -<p>This project could still use some more fine-tuning, but for now I'm fairly happy with the outcome. Even the smallest boost in performance and rendering time makes me feel like I accomplished something worthwhile. </p> -<p>Please don't hesitate to suggest features or point out any issues you happen to stumble across if you plan to use ET-Jekyll. Thanks for reading!</p> +<thead> +<tr> +<th>Performance</th> +<th>Accessibility</th> +<th>Best Practices</th> +<th>SEO</th> +</tr> +</thead> + +<tbody> +<tr> +<td>98</td> +<td>100</td> +<td>100</td> +<td>100</td> +</tr> +</tbody> +</table> + +<h2 id="final-thoughts">Final Thoughts</h2> + +<p>This project could still use some more fine-tuning, but for now I’m fairly happy with the outcome. Even the smallest boost in performance and rendering time makes me feel like I accomplished something worthwhile. </p> + +<p>Please don’t hesitate to suggest features or point out any issues you happen to stumble across if you plan to use ET-Jekyll. Thanks for reading!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/index.html b/build/index.html index b38cf39..2196baa 100644 --- a/build/index.html +++ b/build/index.html @@ -1,31 +1,47 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Making software better without sacrificing user experience.</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Making software better without sacrificing user experience.</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="https://git.sr.ht/~bt">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="/dump">brain dumps</a>.</p> -<h2>Skills & Languages</h2> -<p>Core tools are Figma, HTML, CSS, JavaScript & WordPress. Currently improving my skills with Ruby, Rails, MySQL & PHP. I also enjoy tinkering with basic shell scripts and <a href="/public/images/unix.gif">Unix systems</a>.</p> -<h2>Design Thought Experiments</h2> -<p><a href="/hamburgers">Stop Using Hamburger Menus (Sometimes)</a><br> Common performance and accessibility issues caused by using hamburger menus.</p> -<p><a href="https://search.bt.ht">Better Search Results</a><br> Rethinking the UX flow of modern search engines.</p> -<p><a href="/one-thing">My Coffee Maker Just Makes Coffee</a><br> How products should focus on doing <em>one thing</em> very well.</p> -<p><a href="https://anon.bt.ht">Blog Anonymously</a><br>A basic starting point for those wishing to blog privately.</p> -<h2>Articles & Tutorials</h2> +<h1 id="making-software-better-without-sacrificing-user-experience.">Making software better without sacrificing user experience.</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="https://git.sr.ht/~bt">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="/dump">brain dumps</a>.</p> + +<h2 id="skills-languages">Skills & Languages</h2> + +<p>Core tools are Figma, HTML, CSS, JavaScript & WordPress. Currently improving my skills with Ruby, Rails, MySQL & 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="/hamburgers">Stop Using Hamburger Menus (Sometimes)</a></li> +<li><a href="https://search.btxx.org">Better Search Results</a></li> +<li><a href="/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> <div> +<span>2024-06-02 · <a href="Building_rbenv_on_OpenBSD_7.5/">Building rbenv on OpenBSD 7.5</a></span><br> +<span>2024-05-27 · <a href="Installing_WordPress_on_NearlyFreeSpeech/">Installing WordPress on NearlyFreeSpeech</a></span><br> +<span>2024-04-11 · <a href="OpenBSD_is_a_Cozy_Operating_System/">OpenBSD is a Cozy Operating System</a></span><br> +<span>2024-02-23 · <a href="Please_Make_Your_Table_Headings_Sticky/">Please Make Your Table Headings Sticky</a></span><br> +<span>2024-02-16 · <a href="Website_Backups_with_Apple_iCloud/">Website Backups with Apple iCloud</a></span><br> +<span>2024-01-29 · <a href="New_Domain_and_Code_Forge/">New Domain and Code Forge</a></span><br> <span>2024-01-02 · <a href="My_Text_Editor_Is_Not_Open_Source/">My Text Edtior is Not Open Source</a></span><br> <span>2023-12-17 · <a href="Switching_Things_Over_to_ikiwiki/">Switching Things Over to ikiwiki</a></span><br> <span>2023-11-02 · <a href="dwm-gnome/">Bringing dwm Shortcuts to GNOME</a></span><br> @@ -193,7 +209,7 @@ <span>2017-07-10 · <a href="dts/">Designers Need Thicker Skin</a></span><br> <span>2016-11-15 · <a href="te/">The Wonders of Text Ellipsis</a></span><br> <span>2016-06-28 · <a href="aui/">Aqua UI CSS Buttons</a></span><br> -</div> +<div> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/introducing-notez/index.html b/build/introducing-notez/index.html index 604b9e1..dc8593e 100644 --- a/build/introducing-notez/index.html +++ b/build/introducing-notez/index.html @@ -1,35 +1,48 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Introducing Notez</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Introducing Notez</h1> +<h1 id="introducing-notez">Introducing Notez</h1> + <p>2021-01-13</p> -<p>I have always been a fan of simple note taking applications, since I tend to take a lot of random notes throughout the work day. Sometimes I reach for simple pen and paper, but other times it's nice to stay focused jotting down notes on the same device I'm working on.</p> + +<p>I have always been a fan of simple note taking applications, since I tend to take a lot of random notes throughout the work day. Sometimes I reach for simple pen and paper, but other times it’s nice to stay focused jotting down notes on the same device I’m working on.</p> + <p>Previously, I just created quick <code>notes.txt</code> files in my open code editor or fell back on the default OS note apps. These worked perfectly fine but often got in my way (or even worse - lost among everything else).</p> -<p>So I said the hell with it and built <a href="https://getnotez.netlify.app">Notez</a>.</p> -<h2>What makes Notez special?</h2> -<p>Nothing, really. It's actually a pretty "stupid" app compared to others on the market. But this one is <em>mine</em>. Plus, it was fun to piece it together on a random evening before bed.</p> -<p>For those curious, let's take a look at the feature list:</p> + +<p>So I said the hell with it and built Notez.</p> + +<h2 id="what-makes-notez-special">What makes Notez special?</h2> + +<p>Nothing, really. It’s actually a pretty “stupid” app compared to others on the market. But this one is <em>mine</em>. Plus, it was fun to piece it together on a random evening before bed.</p> + +<p>For those curious, let’s take a look at the feature list:</p> + <ul> -<li>free and open source (<a href="https://github.com/bradleytaunt/notez">github.com/bradleytaunt/notez</a>)</li> +<li>free and open source (github.com/bradleytaunt/notez)</li> <li>uses <code>localStorage</code> to keep changes persistent (helpful for browser crashes, etc)</li> <li>includes basic export functionality to download content as a simple <code>output.txt</code> file</li> </ul> -<p>That's it. Mind blowing stuff, eh?</p> -<h2>Making stuff is fun</h2> -<p>My main takeaway when building this tiny, dumb app was to just <em>enjoy building fun stuff</em>. It crossed my mind several times how there are already hundreds of note taking apps across the vast Internet. I also thought about how others might look at the code I wrote and go, "Oh my God - why did he do it that way? What an idiot!". But I don't care - I had fun making it.</p> + +<p>That’s it. Mind blowing stuff, eh?</p> + +<h2 id="making-stuff-is-fun">Making stuff is fun</h2> + +<p>My main takeaway when building this tiny, dumb app was to just <em>enjoy building fun stuff</em>. It crossed my mind several times how there are already hundreds of note taking apps across the vast Internet. I also thought about how others might look at the code I wrote and go, “Oh my God - why did he do it that way? What an idiot!”. But I don’t care - I had fun making it.</p> + <p>Hopefully you enjoy using it as well!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/introducing-pageroast/index.html b/build/introducing-pageroast/index.html index b32aaf3..3e09e94 100644 --- a/build/introducing-pageroast/index.html +++ b/build/introducing-pageroast/index.html @@ -1,35 +1,48 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Introducing PageRoast</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Introducing PageRoast</h1> +<h1 id="introducing-pageroast">Introducing PageRoast</h1> + <p>2021-03-11</p> + <p>Following up with my concept of releasing small side projects weekly, I have officially launched <a href="https://pageroast.com">PageRoast</a>. What is PageRoast I hear you ask?</p> -<blockquote><p>Receive a detailed report analyzing your landing page with actionable items to improve your conversion rate.</p> + +<blockquote> +<p>Receive a detailed report analyzing your landing page with actionable items to improve your conversion rate.</p> </blockquote> + <p>In simple terms that just means I will <strong>roast your landing page</strong>. Included in a page roast report is:</p> + <ul> <li>Fully detailed ABCD Framework report</li> -<li>Proposed content & design changes</li> +<li>Proposed content & design changes</li> <li>Page performance audit</li> </ul> -<p>And you get all of this for just <strong>$100</strong> (currently 50% until April 1st with coupon code PHROAST). Alright, enough with the "sales pitch" - why did I make this side project?</p> + +<p>And you get all of this for just <strong>$100</strong> (currently 50% until April 1st with coupon code PHROAST). Alright, enough with the “sales pitch” - why did I make this side project?</p> + <p>From the main <a href="https://pageroast.com/#2021-03-10-pageroast-has-launched">launch blog post on PageRoast itself</a> I wrote:</p> -<blockquote><p>I've always been obsessed with developing landing pages that produce high conversion rates. It's what I've done for a large portion of my web development career.<br><br>So I thought to myself, "Why not launch a small-scale audit service to help indie devs and startups?"</p> + +<blockquote> +<p>I’ve always been obsessed with developing landing pages that produce high conversion rates. It’s what I’ve done for a large portion of my web development career.So I thought to myself, “Why not launch a small-scale audit service to help indie devs and startups?”</p> </blockquote> -<p>That's really all there is to it. If you would like to learn more, check out the following links:</p> + +<p>That’s really all there is to it. If you would like to learn more, check out the following links:</p> + <ul> <li><a href="https://pageroast.com">PageRoast main website</a></li> <li><a href="https://pageroast.com/#2021-03-10-pageroast-has-launched">PageRoast official launch blog post</a></li> diff --git a/build/jekyll-sourcehut/index.html b/build/jekyll-sourcehut/index.html index 9d25861..9584014 100644 --- a/build/jekyll-sourcehut/index.html +++ b/build/jekyll-sourcehut/index.html @@ -1,56 +1,73 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Hosting a Jekyll Site on Sourcehut</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Hosting a Jekyll Site on Sourcehut</h1> +<h1 id="hosting-a-jekyll-site-on-sourcehut">Hosting a Jekyll Site on Sourcehut</h1> + <p>2021-12-06</p> -<p>I recently decided to switch my personal, static site's hosting from Netlify to <a href="https://srht.site">sourcehut pages</a>. The process went <em>fairly</em> smoothly with only a couple minor hiccups; nothing rage-inducing. After everything was up and running smoothly, I figured writing out a step-by-step tutorial might help others who are thinking of doing a similar switch (or looking to host their first static site).</p> -<p>But first, let me briefly explain why I made the switch in the first place...</p> -<h2>Why sourcehut pages?</h2> + +<p>I recently decided to switch my personal, static site’s hosting from Netlify to <a href="https://srht.site">sourcehut pages</a>. The process went <em>fairly</em> smoothly with only a couple minor hiccups; nothing rage-inducing. After everything was up and running smoothly, I figured writing out a step-by-step tutorial might help others who are thinking of doing a similar switch (or looking to host their first static site).</p> + +<p>But first, let me briefly explain why I made the switch in the first place…</p> + +<h2 id="why-sourcehut-pages">Why sourcehut pages?</h2> + <p>Using Netlify as your static host is simple, intuitive and comes packed with a great deal of extra functionality you can easily add-on. So, why would I decide to switch over to sourcehut? The best answer comes directly off the main homepage of <a href="https://sourcehut.org">sourcehut.org</a>:</p> + <ul> <li>Absolutely no tracking or advertising</li> <li>All features work without JavaScript</li> <li>Many features work without an account</li> -<li>The fastest & lightest software forge</li> +<li>The fastest & lightest software forge</li> <li>100% free and open source software</li> </ul> -<p>After realizing all that, it's pretty difficult to stick with Netlify's <em>proprietary</em> stack...</p> -<h2>Free but not <em>"free"</em></h2> -<p>I should note that using sourcehut pages <em>does</em> require you to be a contributing (read: paying) member on the platform. I'm a cheapo and selected the $2/month option but you might be inclined to donate more. Paying this "fee" is perfectly fine for me, considering the hosting quality (speed and storage) it affords me. It also doesn't hurt that I get the "feel good vibes" of supporting an important, open source product.</p> -<p>Keeping that in mind, let's get into setting up our static site!</p> -<h2>Setting up your repo locally</h2> + +<p>After realizing all that, it’s pretty difficult to stick with Netlify’s <em>proprietary</em> stack…</p> + +<h2 id="free-but-not-free">Free but not <em>“free”</em></h2> + +<p>I should note that using sourcehut pages <em>does</em> require you to be a contributing (read: paying) member on the platform. I’m a cheapo and selected the $2/month option but you might be inclined to donate more. Paying this “fee” is perfectly fine for me, considering the hosting quality (speed and storage) it affords me. It also doesn’t hurt that I get the “feel good vibes” of supporting an important, open source product.</p> + +<p>Keeping that in mind, let’s get into setting up our static site!</p> + +<h2 id="setting-up-your-repo-locally">Setting up your repo locally</h2> + <ol> <li>Create a new account on <a href="https://sourcehut.org">sourcehut</a> (or log in to an existing one)</li> <li>Setup your billing to contribute monthly (tier amount is up to you)</li> -<li>Create a new repo under the <strong>git</strong> section[^1]</li> +<li>Create a new repo under the <strong>git</strong> section<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup></li> <li>Connect this repo locally (as you would via any other git host)</li> <li>In this new local directory, place all your Jekyll files as you would with any other static hosting provider</li> </ol> -<h2>The sourcehut build file</h2> -<p>In order to have your Jekyll site build and push the correct files live, you will need to use sourcehut's build system. This will run every time you push out a new change to your repo (new blog post, page content changes, styling updates).</p> + +<h2 id="the-sourcehut-build-file">The sourcehut build file</h2> + +<p>In order to have your Jekyll site build and push the correct files live, you will need to use sourcehut’s build system. This will run every time you push out a new change to your repo (new blog post, page content changes, styling updates).</p> + <p>To make things easier, you can copy the build file below (remember to use your <em>own</em> information for usernames, git repo naming etc):</p> -<pre><code>image: debian/stable -oauth: pages.sr.ht/PAGES:RW + +<pre><code>image: debian/stable +oauth: pages.sr.ht/PAGES:RW packages: - ruby-full - ruby-dev environment: site: yourusername.srht.site sources: -- https://git.sr.ht/~yourusername/your-repo-name +- https://git.sr.ht/~yourusername/your-repo-name tasks: - install-bundler: | sudo gem install bundler @@ -59,29 +76,49 @@ tasks: bundle install bundle exec jekyll build - package: | - cd your-repo-name/_site - tar -cvz . > ../../site.tar.gz + cd your-repo-name/_site + tar -cvz . > ../../site.tar.gz - upload: | - acurl -f https://pages.sr.ht/publish/$site -Fcontent=@site.tar.gz + acurl -f https://pages.sr.ht/publish/$site -Fcontent=@site.tar.gz </code></pre> + <p>Save this file as <code>.build.yml</code> and place it in the root directory of your Jekyll source code.</p> -<p>Then, you just need to push your changes to the repo. If everything was setup properly, you'll be able to see your live site at <code>https://yourusername.srht.site</code> (just give it a little bit of time to run the full build process)</p> -<h2>Custom Domains</h2> -<p>If you're like me and want to use your own custom domain - have no fear! This process is actually quite easy.</p> + +<p>Then, you just need to push your changes to the repo. If everything was setup properly, you’ll be able to see your live site at <code>https://yourusername.srht.site</code> (just give it a little bit of time to run the full build process)</p> + +<h2 id="custom-domains">Custom Domains</h2> + +<p>If you’re like me and want to use your own custom domain - have no fear! This process is actually quite easy.</p> + <p>First, add a new A Record through your domain provider:</p> + <pre><code>@ IN A 173.195.146.139 </code></pre> + <p>Then change the following <code>environment</code> parameter inside your existing <code>.build.yml</code> file:</p> + <pre><code>environment: site: yourcustomdomain.com </code></pre> -<p>And that's it - custom domain set! If you run into any issues check out the <a href="https://srht.site/custom-domains">official documentation on custom domains</a>.</p> -<h2>Wrapping Up</h2> + +<p>And that’s it - custom domain set! If you run into any issues check out the <a href="https://srht.site/custom-domains">official documentation on custom domains</a>.</p> + +<h2 id="wrapping-up">Wrapping Up</h2> + <p>Hopefully this helps to streamline the process for others to host their static sites through sourcehut. Having open and healthy competition among host providers and <code>git</code> workflows is essential to avoiding vendor lock-in. </p> + <p>Even low-effort support for open-source products (like where you host your static site or FOSS projects) can go a long way. Just some food for thought.</p> -<p><hr data-content="footnotes"> -</p> -<p><a href="https://cnx.srht.site/">^1]: Thanks to [McSinyx</a> for pointing out that the repo used for creating your website can be named anything (instead of defaulting to your sourcehut username)</p> + +<div class="footnotes"> +<hr/> +<ol> + +<li id="fn1"> +<p>Thanks to <a href="https://cnx.srht.site/">McSinyx</a> for pointing out that the repo used for creating your website can be named anything (instead of defaulting to your sourcehut username) <a href="#fnref1" rev="footnote">↩</a></p> +</li> + +</ol> +</div> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/jekyll/index.html b/build/jekyll/index.html index 10cc056..52f302e 100644 --- a/build/jekyll/index.html +++ b/build/jekyll/index.html @@ -1,70 +1,104 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Setup Jekyll from Scratch on a New Linux System</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Setup Jekyll from Scratch on a New Linux System</h1> +<h1 id="setup-jekyll-from-scratch-on-a-new-linux-system">Setup Jekyll from Scratch on a New Linux System</h1> + <p>2022-09-19</p> + <p><strong>Special Note:</strong> Credit needs to be given to user <a href="https://stackoverflow.com/users/4974784/achraf-jeday">Achraf JEDAY</a> for putting these instructions together on Stack Overflow (although his comments were targeting an older version of Ruby). This post is more for my own personal notes than anything else.</p> + <p>I find myself constantly running into small issues when trying to setup existing Jekyll projects on new Linux systems. I <em>could</em> use something like Docker, but that just seems so beefy and slow to me. So here is a step-by-step way (and foolproof from my own testing) to get Jekyll running smoothly in no time!</p> -<h2>Figuring out Ruby First</h2> + +<h2 id="figuring-out-ruby-first">Figuring out Ruby First</h2> + <p>The first item of business is removing the default Ruby that ships with most Linux distros:</p> + <pre><code>sudo apt-get remove ruby </code></pre> + <p>Then we check for updates and install everything we need:</p> + <pre><code>sudo apt update sudo apt install git curl libssl-dev libreadline-dev zlib1g-dev autoconf bison build-essential libyaml-dev libreadline-dev libncurses5-dev libffi-dev libgdbm-dev </code></pre> + <p>Now we can install <code>rbenv</code> and <code>ruby-build</code>:</p> -<pre><code>curl -sL https://github.com/rbenv/rbenv-installer/raw/main/bin/rbenv-installer | bash - + +<pre><code>curl -sL https://github.com/rbenv/rbenv-installer/raw/main/bin/rbenv-installer | bash - </code></pre> + <p>After both of those install, you will want to add those to your system <strong>PATH</strong>:</p> -<h3>Bash</h3> -<pre><code>echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc -echo 'eval "$(rbenv init -)"' >> ~/.bashrc -source ~/.bashrc + +<h3 id="bash">Bash</h3> + +<pre><code>echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc +echo 'eval "$(rbenv init -)"' >> ~/.bashrc +source ~/.bashrc </code></pre> -<h3>ZSH</h3> -<pre><code>echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc -echo 'eval "$(rbenv init -)"' >> ~/.zshrc -source ~/.zshrc + +<h3 id="zsh">ZSH</h3> + +<pre><code>echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc +echo 'eval "$(rbenv init -)"' >> ~/.zshrc +source ~/.zshrc </code></pre> + <p>With that complete, we can now install the version of Ruby we wish to use and set it globally (at this time of writing it is <code>3.1.2</code>):</p> + <pre><code>rbenv install 3.1.2 rbenv global 3.1.2 </code></pre> + <p>And <code>rehash</code> so our changes take:</p> + <pre><code>rbenv rehash </code></pre> + <p>Now you should see the properly set Ruby version when you run the following:</p> + <pre><code>ruby -v </code></pre> -<h2>Getting Ruby Gems</h2> -<p>In case you don't have it installed already, be sure to grab <code>rubygems</code>:</p> + +<h2 id="getting-ruby-gems">Getting Ruby Gems</h2> + +<p>In case you don’t have it installed already, be sure to grab <code>rubygems</code>:</p> + <pre><code>sudo apt install rubygems </code></pre> -<h2>Running Jekyll</h2> -<p>We are almost done! Navigate to your Jekyll project's directory and run:</p> + +<h2 id="running-jekyll">Running Jekyll</h2> + +<p>We are almost done! Navigate to your Jekyll project’s directory and run:</p> + <pre><code>gem install jekyll bundler bundle install </code></pre> -<p>That's it! Now if you run <code>bundle exec jekyll serve</code> you'll find your Jekyll project running locally! Hopefully this helps others when needing to port any Jekyll projects over to a new Linux system. I know it will save me time!</p> -<h2>Alpine Linux on Wayland</h2> + +<p>That’s it! Now if you run <code>bundle exec jekyll serve</code> you’ll find your Jekyll project running locally! Hopefully this helps others when needing to port any Jekyll projects over to a new Linux system. I know it will save me time!</p> + +<h2 id="alpine-linux-on-wayland">Alpine Linux on Wayland</h2> + <p>Save yourself a world of trouble: just use <code>docker</code>. The docker image below (jekyll-serve) works out-of-the-box:</p> -<p><a href="https://github.com/BretFisher/jekyll-serve">https://github.com/BretFisher/jekyll-serve</a></p> + +<p><a href="https://github.com/BretFisher/jekyll-serve">https://github.com/BretFisher/jekyll-serve</a></p> + <p>Then run the following inside your project:</p> -<pre><code>docker run -p 4000:4000 -v $(pwd):/site bretfisher/jekyll-serve + +<pre><code>docker run -p 4000:4000 -v $(pwd):/site bretfisher/jekyll-serve </code></pre> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/jelly/index.html b/build/jelly/index.html index cb4b93f..903d848 100644 --- a/build/jelly/index.html +++ b/build/jelly/index.html @@ -1,56 +1,76 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Transferring Media from macOS to a Jellyfin Server (Raspberry Pi 4)</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Transferring Media from macOS to a Jellyfin Server (Raspberry Pi 4)</h1> +<h1 id="transferring-media-from-macos-to-a-jellyfin-server-raspberry-pi-4">Transferring Media from macOS to a Jellyfin Server (Raspberry Pi 4)</h1> + <p>2022-03-12</p> -<p>I run a personal media server using Jellyfin on a Raspberry Pi 4 in my home. It's pretty great and works well across most devices - Google TV, iOS and Android devices, Chromebooks, etc.</p> + +<p>I run a personal media server using Jellyfin on a Raspberry Pi 4 in my home. It’s pretty great and works well across most devices - Google TV, iOS and Android devices, Chromebooks, etc.</p> + <p>The only small headache is adding content (ie. audio, videos) to the existing hard drive that Jellyfin reads from. The last thing you want to do is connect a keyboard and monitor to your Pi to add a few files. Especially if your Pi is setup like mine and buried at the back of a hidden cabinet.</p> -<p>More annoying would be the need to remove the hard drive itself, connect it to your device that has the new files you wish to transfer and then port them over. Big ol' pass on that system.</p> -<h2>SSH/SCP to the Rescue</h2> + +<p>More annoying would be the need to remove the hard drive itself, connect it to your device that has the new files you wish to transfer and then port them over. Big ol’ pass on that system.</p> + +<h2 id="sshscp-to-the-rescue">SSH/SCP to the Rescue</h2> + <p><em>Important</em>: before we begin, I should mention that this article assumes the following:</p> + <ul> <li>The files you plan to transfer from are on a macOS device</li> <li>You have setup Jellyfin on your Raspberry Pi device</li> <li>SSH is enabled and accessible on the Pi (across your local network)</li> -<li>The Jellyfin server's hard drive is mounted in the root directory via something like <code>/mnt</code></li> +<li>The Jellyfin server’s hard drive is mounted in the root directory via something like <code>/mnt</code></li> </ul> -<p>Good? Moving on then...</p> + +<p>Good? Moving on then…</p> + <p>Open your terminal of choice and use the following command:</p> -<pre><code>scp movie.mp4 pi_user_name@PI_IP_ADDRESS:/mnt/movies/movie.mp4 + +<pre><code>scp movie.mp4 pi_user_name@PI_IP_ADDRESS:/mnt/movies/movie.mp4 </code></pre> + <ol> <li><code>movie.mp4</code> is the file in the current macOS directory we plan to copy over</li> <li><code>pi_user_name</code> is the username you setup on your Raspberry Pi</li> -<li><code>PI_IP_ADDRESS</code> is, of course, your Pi's IP address</li> -<li>The appended <code>:/mnt/movies/movie.mp4</code> is the directory your Jellyfin server uses to pull-in media</li> +<li><code>PI_IP_ADDRESS</code> is, of course, your Pi’s IP address</li> +<li>The appended <code>:/mnt/movies/movie.mp4</code> is the directory your Jellyfin server uses to pull-in media</li> </ol> -<p>You'll be prompted for the user password. Once entered the file will begin copying over to your remote Jellyfin server. That's it! Although, I should mention a little bonus feature that you should always have in your back pocket, since Jellyfin can sometimes be picky with media file formats:</p> -<h2>Converting Media Files with Ease</h2> -<p>This is where your new best friend <code>FFmpeg</code> comes into your life (if they weren't there already).</p> + +<p>You’ll be prompted for the user password. Once entered the file will begin copying over to your remote Jellyfin server. That’s it! Although, I should mention a little bonus feature that you should always have in your back pocket, since Jellyfin can sometimes be picky with media file formats:</p> + +<h2 id="converting-media-files-with-ease">Converting Media Files with Ease</h2> + +<p>This is where your new best friend <code>FFmpeg</code> comes into your life (if they weren’t there already).</p> + <ul> -<li>Download and install <code>FFmpeg</code> --> <a href="https://www.ffmpeg.org/download.html">ffmpeg.org/download.html</a></li> +<li>Download and install <code>FFmpeg</code> –> <a href="https://www.ffmpeg.org/download.html">ffmpeg.org/download.html</a></li> </ul> + <p>Now navigate to the directory containing the media file you wish to convert via your Terminal and run the following command:</p> + <pre><code>ffmpeg -i input.mp4 output.mkv </code></pre> + <ol> <li><code>input.mp4</code> is the initial file we wish to convert</li> <li><code>output.mkv</code> will be the name and file type of our converted media</li> </ol> -<p>Now you can circle back and run the previous <code>scp</code> command once you have converted your files to the desired format. Hopefully Jellyfin doesn't complain about the formatting!</p> + +<p>Now you can circle back and run the previous <code>scp</code> command once you have converted your files to the desired format. Hopefully Jellyfin doesn’t complain about the formatting!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/jsincss-parent-selector/index.html b/build/jsincss-parent-selector/index.html index 412586d..6de6405 100644 --- a/build/jsincss-parent-selector/index.html +++ b/build/jsincss-parent-selector/index.html @@ -1,52 +1,67 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Using Parent Selectors in CSS</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Using Parent Selectors in CSS</h1> +<h1 id="using-parent-selectors-in-css">Using Parent Selectors in CSS</h1> + <p>2018-12-19</p> -<p>I recently saw a Twitter thread posted by <a href="https://twitter.com/innovati/status/1068998114491678720">Tommy Hodgins</a> on implementing highly requested styling features in CSS with only a minimal amount of JavaScript. Many of his examples are great, but the <code>parent</code> selector instantly peaked my interest.</p> -<p>Being able to target an element's parent always becomes a minor annoyance (since vanilla CSS does not support it) - so you always end up having to do something a little ugly like:</p> -<pre><code>var el = document.getElementById('custom-div'); + +<p>I recently saw a Twitter thread posted by Tommy Hodgins on implementing highly requested styling features in CSS with only a minimal amount of JavaScript. Many of his examples are great, but the <code>parent</code> selector instantly peaked my interest.</p> + +<p>Being able to target an element’s parent always becomes a minor annoyance (since vanilla CSS does not support it) - so you always end up having to do something a little ugly like:</p> + +<pre><code>var el = document.getElementById('custom-div'); var parent = el.closest(selectors); </code></pre> + <p>And then add any custom styling to the parent element directly in JavaScript - or toggle a class which opens a whole other can of worms.</p> -<h2>Save the day with <a href="https://www.npmjs.com/package/jsincss-parent-selector">jsincss-parent-selector</a> and <a href="https://github.com/tomhodgins/qaffeine">qaffeine</a></h2> -<p>By using the <code>jsincss-parent-selector</code> and <code>qaffeine</code> plugins we can target an element's parent in CSS without breaking a sweat. Let's break it down:</p> -<h3>Import the packages</h3> + +<h2 id="save-the-day-with-jsincss-parent-selector-and-qaffeine">Save the day with jsincss-parent-selector and qaffeine</h2> + +<p>By using the <code>jsincss-parent-selector</code> and <code>qaffeine</code> plugins we can target an element’s parent in CSS without breaking a sweat. Let’s break it down:</p> + +<h3 id="import-the-packages">Import the packages</h3> + <pre><code>npm install jsincss-parent-selector qaffeine </code></pre> -<h3>HTML (ex. index.html)</h3> + +<h3 id="html-ex.-index.html">HTML (ex. index.html)</h3> + <p>Now we add our very simple HTML skeleton:</p> -<pre><code><!doctype html> -<html> - <head> - <link rel="stylesheet" href="output.css"> - </head> - <body> - <header> - <main> - <h2>This is a header</h2> - </main> - </header> - </body> - <script src=output.js></script> -</html> + +<pre><code><!doctype html> +<html> + <head> + <link rel="stylesheet" href="output.css"> + </head> + <body> + <header> + <main> + <h2>This is a header</h2> + </main> + </header> + </body> + <script src=output.js></script> +</html> </code></pre> -<h3>JavaScript (ex. input.js)</h3> -<pre><code>const qaffeine = require('qaffeine') -const parent = require('jsincss-parent-selector') + +<h3 id="javascript-ex.-input.js">JavaScript (ex. input.js)</h3> + +<pre><code>const qaffeine = require('qaffeine') +const parent = require('jsincss-parent-selector') qaffeine( { @@ -55,12 +70,14 @@ qaffeine( parent } }, -'input.css', -'output.js', -'output.css' +'input.css', +'output.js', +'output.css' ) </code></pre> -<h3>CSS (ex. input.css)</h3> + +<h3 id="css-ex.-input.css">CSS (ex. input.css)</h3> + <pre><code>header { display: block; } @@ -68,7 +85,8 @@ main[--js-parent] { background: blue; } </code></pre> -<p>Then simply run <code>node</code> against your <code>js</code> file. That's it! I would also suggest checking out Tommy's <a href="https://www.youtube.com/watch?v=rG8cLe7VbW0">video covering this topic</a> if you prefer to follow along.</p> + +<p>Then simply run <code>node</code> against your <code>js</code> file. That’s it! I would also suggest checking out Tommy’s video covering this topic if you prefer to follow along.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/keynote-slides-css/index.html b/build/keynote-slides-css/index.html index 45175c6..8ac397d 100644 --- a/build/keynote-slides-css/index.html +++ b/build/keynote-slides-css/index.html @@ -1,56 +1,70 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Keynote Slides with Pure CSS</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Keynote Slides with Pure CSS</h1> +<h1 id="keynote-slides-with-pure-css">Keynote Slides with Pure CSS</h1> + <p>2020-06-22</p> -<p>There are a great deal of options available on the web and built into most operating systems when you need to create presentation / keynote slides. You could use native software like LibremOffice Impress, Powerpoint, Apple's Keynote, etc. You could also decide to use preexisting web-based apps like Google Slides or an open source project such as RevealJS. All of these are good options.</p> + +<p>There are a great deal of options available on the web and built into most operating systems when you need to create presentation / keynote slides. You could use native software like LibremOffice Impress, Powerpoint, Apple’s Keynote, etc. You could also decide to use preexisting web-based apps like Google Slides or an open source project such as RevealJS. All of these are good options.</p> + <p>But thinking more about how overly complex these apps are implemented, it got me wondering if I could quickly code up a presentation slide framework with pure CSS and barely any code.</p> + <p>This is what I came up with:</p> -<h2>The Demo</h2> + +<h2 id="the-demo">The Demo</h2> + <p><a href="https://codepen.io/bradleytaunt/pen/jOWBJZb">Live CodePen Example</a></p> + <p>Yes, I know this is <em>ugly</em>, but this was created as a barebones skeleton for others to build upon. The demo uses a simple set of <code>radio</code> inputs that correspond to their own individual <code>slide</code> element. The framework looks at the currently <code>checked</code> input, then changes the <code>opacity</code> and <code>z-index</code> of its corresponding slide item. Pretty straightforward stuff!</p> -<p>Let's break down each piece:</p> -<h2>The HTML</h2> -<pre><code><div class="slider"> - <input type="radio" name="pagination" value="1" checked> - <input type="radio" name="pagination" value="2"> - <input type="radio" name="pagination" value="3"> - <input type="radio" name="pagination" value="4"> - <input type="radio" name="pagination" value="5"> - - <div class="slide"> - <h2>Slide 1</h2> - </div> - <div class="slide"> - <h2>Slide 2</h2> - </div> - <div class="slide"> - <h2>Slide 3</h2> - </div> - <div class="slide"> - <h2>Slide 4</h2> - </div> - <div class="slide"> - <h2>Slide 5</h2> - </div> -</div> + +<p>Let’s break down each piece:</p> + +<h2 id="the-html">The HTML</h2> + +<pre><code><div class="slider"> + <input type="radio" name="pagination" value="1" checked> + <input type="radio" name="pagination" value="2"> + <input type="radio" name="pagination" value="3"> + <input type="radio" name="pagination" value="4"> + <input type="radio" name="pagination" value="5"> + + <div class="slide"> + <h2>Slide 1</h2> + </div> + <div class="slide"> + <h2>Slide 2</h2> + </div> + <div class="slide"> + <h2>Slide 3</h2> + </div> + <div class="slide"> + <h2>Slide 4</h2> + </div> + <div class="slide"> + <h2>Slide 5</h2> + </div> +</div> </code></pre> -<p>There isn't a whole lot going on here. We are just including a set of <code>radio</code> inputs (based on how many slides are desired) along with their corresponding <code>slide</code> class elements. You might notice we don't do anything to specifically target each individual slide item - you'll see why we don't need to in the CSS section!</p> -<h2>The CSS (SCSS)</h2> -<pre><code>/* Basic default styles */ + +<p>There isn’t a whole lot going on here. We are just including a set of <code>radio</code> inputs (based on how many slides are desired) along with their corresponding <code>slide</code> class elements. You might notice we don’t do anything to specifically target each individual slide item - you’ll see why we don’t need to in the CSS section!</p> + +<h2 id="the-css-scss">The CSS (SCSS)</h2> + +<pre><code>/* Basic default styles */ .slider { height: 100%; left: 0; @@ -67,33 +81,37 @@ } } -input[type="radio"] { cursor: pointer; } +input[type="radio"] { cursor: pointer; } -/* Target slide item based on currently checked radio */ -input[type="radio"]:nth-of-type(1):checked ~ .slide:nth-of-type(1), -input[type="radio"]:nth-of-type(2):checked ~ .slide:nth-of-type(2), -input[type="radio"]:nth-of-type(3):checked ~ .slide:nth-of-type(3), -input[type="radio"]:nth-of-type(4):checked ~ .slide:nth-of-type(4), -input[type="radio"]:nth-of-type(5):checked ~ .slide:nth-of-type(5) { +/* Target slide item based on currently checked radio */ +input[type="radio"]:nth-of-type(1):checked ~ .slide:nth-of-type(1), +input[type="radio"]:nth-of-type(2):checked ~ .slide:nth-of-type(2), +input[type="radio"]:nth-of-type(3):checked ~ .slide:nth-of-type(3), +input[type="radio"]:nth-of-type(4):checked ~ .slide:nth-of-type(4), +input[type="radio"]:nth-of-type(5):checked ~ .slide:nth-of-type(5) { opacity: 1; z-index: 1; } -/* Individual slide styling */ +/* Individual slide styling */ .slide:nth-of-type(1) { background: dodgerblue; } .slide:nth-of-type(2) { background: crimson; } .slide:nth-of-type(3) { background: rebeccapurple; } .slide:nth-of-type(4) { background: goldenrod; } .slide:nth-of-type(5) { background: pink; } </code></pre> -<p>Again, not much to see here. We use CSS to look down through the DOM for each <code>radio</code> elements slide "partner". We do this by targeting the <code>nth-of-type</code> on both elements. Simple stuff.</p> + +<p>Again, not much to see here. We use CSS to look down through the DOM for each <code>radio</code> elements slide “partner”. We do this by targeting the <code>nth-of-type</code> on both elements. Simple stuff.</p> + <p>Some drawbacks to this approach:</p> + <ul> <li>You need to manually target each new slide you add (color, styling, content, etc.)</li> <li>Lack of animations might require extra work to implement (maybe 3rd party libraries- ke AOS?)</li> -<li>Probably won't be best for extremely long/complex presentation slides</li> +<li>Probably won’t be best for extremely long/complex presentation slides</li> </ul> -<p>That's it! Hope you enjoy playing around with it.</p> + +<p>That’s it! Hope you enjoy playing around with it.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/launching-thriftyname/index.html b/build/launching-thriftyname/index.html index ac70d95..cad1b0b 100644 --- a/build/launching-thriftyname/index.html +++ b/build/launching-thriftyname/index.html @@ -1,29 +1,40 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>ThriftyName: $5 Brand Names</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>ThriftyName: $5 Brand Names</h1> +<h1 id="thriftyname-5-brand-names">ThriftyName: $5 Brand Names</h1> + <p>2021-02-25</p> -<p>It's been a while since I've written anything on this blog, but for good reason - <strong>I've been working on a handful of side projects</strong>. I plan to drip-feed release these projects over time, but for today I'm announcing <a href="https://thrifty.name">ThriftyName</a>.</p> -<h2>What is ThriftyName?</h2> -<p>In case this post title wasn't clear enough (or you avoided going to the product site itself) ThriftyName is a place where indie devs, start-ups or entrepreneurs can go to get a custom brand name for <strong>just $10</strong>.</p> -<p>This "service" started out as an almost gimmicky joke in my head, but once I began building out the main website I realized that this could be quite useful for cash-strapped indies. After all, not all developers <em>love</em> to sit around wasting precious time thinking about product names, when they could use that time to <em>build their product</em>.</p> -<h2>Learn More</h2> -<p>If you're really interested in the reasoning behind making this project, check out the <a href="https://thrifty.name/#about">official about page on the site itself</a>. I go into a little more depth about my thought process.</p> -<h2>More Side Projects Incoming...</h2> -<p>Like I said at the beginning of the post, keep a look out for my other side projects that I'll be rolling out slowing. I'm still not sure of the best "method" to do this (release one every week? every month?) - but I'll figure it out as I go along.</p> + +<p>It’s been a while since I’ve written anything on this blog, but for good reason - <strong>I’ve been working on a handful of side projects</strong>. I plan to drip-feed release these projects over time, but for today I’m announcing <a href="https://thrifty.name">ThriftyName</a>.</p> + +<h2 id="what-is-thriftyname">What is ThriftyName?</h2> + +<p>In case this post title wasn’t clear enough (or you avoided going to the product site itself) ThriftyName is a place where indie devs, start-ups or entrepreneurs can go to get a custom brand name for <strong>just $10</strong>.</p> + +<p>This “service” started out as an almost gimmicky joke in my head, but once I began building out the main website I realized that this could be quite useful for cash-strapped indies. After all, not all developers <em>love</em> to sit around wasting precious time thinking about product names, when they could use that time to <em>build their product</em>.</p> + +<h2 id="learn-more">Learn More</h2> + +<p>If you’re really interested in the reasoning behind making this project, check out the <a href="https://thrifty.name/#about">official about page on the site itself</a>. I go into a little more depth about my thought process.</p> + +<h2 id="more-side-projects-incoming">More Side Projects Incoming…</h2> + +<p>Like I said at the beginning of the post, keep a look out for my other side projects that I’ll be rolling out slowing. I’m still not sure of the best “method” to do this (release one every week? every month?) - but I’ll figure it out as I go along.</p> + <p>Thanks for reading!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/lazy-dev-dark-mode/index.html b/build/lazy-dev-dark-mode/index.html index f73276f..65d075f 100644 --- a/build/lazy-dev-dark-mode/index.html +++ b/build/lazy-dev-dark-mode/index.html @@ -1,42 +1,58 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>The Lazy Developer's Dark Mode</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>The Lazy Developer's Dark Mode</h1> +<h1 id="the-lazy-developers-dark-mode">The Lazy Developer’s Dark Mode</h1> + <p>2021-04-12</p> + <p>After recently jumping back to Jekyll for my personal blog, I decided to take a closer look at how I was supporting <code>dark mode</code> for my visitors. I was using the proper CSS query to target those who had system-wide dark mode enabled, but I found that the code had far too many caveats and targeted too many custom classes.</p> -<p>So I thought to myself, "There <em>has</em> to be a simpler way..."</p> -<h2>Introducing Dark Mode - The Lazy Way</h2> -<p>Here is the default dark mode for my current website in all it's glory:</p> + +<p>So I thought to myself, “There <em>has</em> to be a simpler way…”</p> + +<h2 id="introducing-dark-mode---the-lazy-way">Introducing Dark Mode - The Lazy Way</h2> + +<p>Here is the default dark mode for my current website in all it’s glory:</p> + <pre><code>@media (prefers-color-scheme: dark) { body{background:#2d2d2d;filter:invert(1);} img,.cp_embed_wrapper,pre{filter:invert(1);} } </code></pre> -<p>Not much to look at, eh? Well, let's still break it down.</p> -<p>First we set the <code>body</code> to use a nice dark background color (avoid using <code>#000000</code> directly since that can cause some minor eye strain). Next we tell the browser to invert all the child elements by using <code>filter:invert(1)</code>. At this point, you could consider your work done - but there are some edge case elements...</p> -<h2>Images, CodePens & Code - Oh My!</h2> -<p>Most of my articles on this site will include either an image(s), embedded CodePen examples or code snippets directly in the page. For these elements we probably <em>don't</em> want to invert their color/text etc. All we need to do is run the filter property on these a second time (<em>after</em> the main <code>body</code> attribute):</p> + +<p>Not much to look at, eh? Well, let’s still break it down.</p> + +<p>First we set the <code>body</code> to use a nice dark background color (avoid using <code>#000000</code> directly since that can cause some minor eye strain). Next we tell the browser to invert all the child elements by using <code>filter:invert(1)</code>. At this point, you could consider your work done - but there are some edge case elements…</p> + +<h2 id="images-codepens-code---oh-my">Images, CodePens & Code - Oh My!</h2> + +<p>Most of my articles on this site will include either an image(s), embedded CodePen examples or code snippets directly in the page. For these elements we probably <em>don’t</em> want to invert their color/text etc. All we need to do is run the filter property on these a second time (<em>after</em> the main <code>body</code> attribute):</p> + <pre><code>@media (prefers-color-scheme: dark) { img,.cp_embed_wrapper,pre{filter:invert(1);} } </code></pre> + <p>Of course, YMMV depending on what other custom elements you want to avoid inverting.</p> -<h2>Minor Caveats</h2> -<p>I should mention that since my website doesn't use any custom coloring for anchor links, inverting <code>ahref</code> elements works out of the box. Certain projects might still require some custom overrides if the inverted version of a certain custom color looks poor.</p> -<p>That's it - enjoy being lazy!</p> + +<h2 id="minor-caveats">Minor Caveats</h2> + +<p>I should mention that since my website doesn’t use any custom coloring for anchor links, inverting <code>ahref</code> elements works out of the box. Certain projects might still require some custom overrides if the inverted version of a certain custom color looks poor.</p> + +<p>That’s it - enjoy being lazy!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/learning-to-floss/index.html b/build/learning-to-floss/index.html index 356f6bd..66a0a23 100644 --- a/build/learning-to-floss/index.html +++ b/build/learning-to-floss/index.html @@ -1,55 +1,73 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>How to "FLOSS" as a Web Designer</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>How to "FLOSS" as a Web Designer</h1> +<h1 id="how-to-floss-as-a-web-designer">How to “FLOSS” as a Web Designer</h1> + <p>2020-02-07</p> -<p>I have a profound respect for the open source community. I most likely wouldn't have the skills or knowledge I do today with it. Unfortunately, when I was just starting out in "web dev" some 10 years ago, proprietary software was the main go-to for a newbie designer. </p> + +<p>I have a profound respect for the open source community. I most likely wouldn’t have the skills or knowledge I do today with it. Unfortunately, when I was just starting out in “web dev” some 10 years ago, proprietary software was the main go-to for a newbie designer. </p> + <p>Dreamweaver. Fireworks (those were the days). Photoshop. Illustrator. Adobe products basically had a stranglehold on the web design community. Any company you joined at the time more than likely required you to know and use these tools, making it hard for designers to try out new software for their day-to-day needs. Not to mention the <em>cost</em> associated with these products.</p> -<p>Fast forward a handful of years and we have a lot more options in terms of design / development software (whether Windows, Mac or Linux). UI design tools like Figma, Sketch and Adobe XD have since popped up and become the most popular among designers. New text editors and terminals hit the scene, fighting for developer attention (Atom, Sublime Text, VSCode, LightTable, iTerm2, Hyper, etc.).</p> -<p>But what if a designer wanted to go completely <span class="help-text" title="Free/Libre and Open Source Software">FLOSS</span>?</p> + +<p>Fast forward a handful of years and we have a lot more options in terms of design / development software (whether Windows, Mac or Linux). UI design tools like Figma, Sketch and Adobe XD have since popped up and become the most popular among designers. New text editors and terminals hit the scene, fighting for developer attention (Atom, Sublime Text, VSCode, LightTable, iTerm2, Hyper, etc.).</p> + +<p>But what if a designer wanted to go completely FLOSS?</p> + <p>Below you will find my own personal list of FLOSS applications I use across design, development and simple document management:</p> -<p><h2 id="floss-apps">FLOSS Application Breakdown</h2></p> -<h3>Web Browsers</h3> + +<h3 id="web-browsers">Web Browsers</h3> + <ul> -<li>Firefox <a href="https://www.mozilla.org/en-CA/firefox/">https://www.mozilla.org/en-CA/firefox/</a></li> -<li>Brave <a href="https://brave.com/">https://brave.com/</a></li> +<li>Firefox <a href="https://www.mozilla.org/en-CA/firefox/">https://www.mozilla.org/en-CA/firefox/</a></li> +<li>Brave <a href="https://brave.com/">https://brave.com/</a></li> </ul> -<h3>Visual Design</h3> + +<h3 id="visual-design">Visual Design</h3> + <ul> -<li>GIMP <a href="https://www.gimp.org/">https://www.gimp.org/</a></li> -<li>Inkscape <a href="https://inkscape.org/">https://inkscape.org/</a></li> -<li>Pencil <a href="https://pencil.evolus.vn/">https://pencil.evolus.vn/</a></li> +<li>GIMP <a href="https://www.gimp.org/">https://www.gimp.org/</a></li> +<li>Inkscape <a href="https://inkscape.org/">https://inkscape.org/</a></li> +<li>Pencil <a href="https://pencil.evolus.vn/">https://pencil.evolus.vn/</a></li> </ul> -<h3>Code / Text Editors</h3> + +<h3 id="code-text-editors">Code / Text Editors</h3> + <ul> -<li>Brackets <a href="http://brackets.io/">http://brackets.io/</a></li> -<li>Visual Studio Code <a href="https://github.com/Microsoft/vscode">https://github.com/Microsoft/vscode</a></li> -<li>Atom <a href="https://atom.io/">https://atom.io/</a></li> +<li>Brackets <a href="http://brackets.io/">http://brackets.io/</a></li> +<li>Visual Studio Code <a href="https://github.com/Microsoft/vscode">https://github.com/Microsoft/vscode</a></li> +<li>Atom <a href="https://atom.io/">https://atom.io/</a></li> </ul> -<h3>Terminal Shells</h3> + +<h3 id="terminal-shells">Terminal Shells</h3> + <ul> -<li>Terminus <a href="https://eugeny.github.io/terminus/">https://eugeny.github.io/terminus/</a></li> -<li>Hyper <a href="https://hyper.is/">https://hyper.is/</a></li> +<li>Terminus <a href="https://eugeny.github.io/terminus/">https://eugeny.github.io/terminus/</a></li> +<li>Hyper <a href="https://hyper.is/">https://hyper.is/</a></li> </ul> -<h3>Documents</h3> + +<h3 id="documents">Documents</h3> + <ul> -<li>LibreOffice <a href="https://www.libreoffice.org/">https://www.libreoffice.org/</a></li> +<li>LibreOffice <a href="https://www.libreoffice.org/">https://www.libreoffice.org/</a></li> </ul> -<h2>Nothing special</h2> -<p>This small list I've compiled isn't earth-shattering by any means, but I wanted to put this out into the world for any newbie designer that might be starting out. You don't need to spend a ridiculous amount of money just to get your feet wet in the design industry. By using the tools listed above, beginners can get a solid head-start on creating for the web without burning a hole in their pocket. </p> + +<h2 id="nothing-special">Nothing special</h2> + +<p>This small list I’ve compiled isn’t earth-shattering by any means, but I wanted to put this out into the world for any newbie designer that might be starting out. You don’t need to spend a ridiculous amount of money just to get your feet wet in the design industry. By using the tools listed above, beginners can get a solid head-start on creating for the web without burning a hole in their pocket. </p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/lf/index.html b/build/lf/index.html index 8f7ff7d..1c7b55e 100644 --- a/build/lf/index.html +++ b/build/lf/index.html @@ -1,38 +1,54 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Installing Custom Fonts on Linux from the Command Line</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Installing Custom Fonts on Linux from the Command Line</h1> +<h1 id="installing-custom-fonts-on-linux-from-the-command-line">Installing Custom Fonts on Linux from the Command Line</h1> + <p>2022-09-20</p> -<p>Installing custom fonts is a fairly streamlined feature on operating systems like MacOS and Windows. Linux, on the other hand, struggles to make this workflow <em>easy</em> for everyday users. Many newcomers tend to get frustrated with using the default "Fonts" application managers shipped with most Linux distros.</p> -<p>But I'm here to tell you to <strong>ditch</strong> those GUI font installers. Let's install our custom fonts in the command line!</p> -<h2>Get Your Font Files</h2> -<p>You can't install custom fonts if you don't have any. For this tutorial we are going to assume that we are trying to install a typeface set named <code>LinuxFont</code>. We are going to assume that we have already downloaded and extracted a folder named <code>LinuxFont</code> into our <code>Downloads</code> directory.</p> + +<p>Installing custom fonts is a fairly streamlined feature on operating systems like MacOS and Windows. Linux, on the other hand, struggles to make this workflow <em>easy</em> for everyday users. Many newcomers tend to get frustrated with using the default “Fonts” application managers shipped with most Linux distros.</p> + +<p>But I’m here to tell you to <strong>ditch</strong> those GUI font installers. Let’s install our custom fonts in the command line!</p> + +<h2 id="get-your-font-files">Get Your Font Files</h2> + +<p>You can’t install custom fonts if you don’t have any. For this tutorial we are going to assume that we are trying to install a typeface set named <code>LinuxFont</code>. We are going to assume that we have already downloaded and extracted a folder named <code>LinuxFont</code> into our <code>Downloads</code> directory.</p> + <p>Inside this hypothetical folder is a collection of <code>OTF</code> (opentype) font files. This will be important information in a moment.</p> -<h2>Terminal Time</h2> + +<h2 id="terminal-time">Terminal Time</h2> + <p>Now our goal is to simply copy this new typeface folder into our user font directory. Open Terminal and run the following from your <code>Downloads</code> directory:</p> -<pre><code>sudo cp -r LinuxFont /usr/local/share/fonts/opentype/ + +<pre><code>sudo cp -r LinuxFont /usr/local/share/fonts/opentype/ </code></pre> + <p><strong>Important</strong>: If your font files are NOT opentype format, be sure to copy your files to the proper directory (truetype for TTF, etc.)</p> + <p>Next we need to make sure we have full read and write privileges for this new folder:</p> -<pre><code>sudo chmod -R 0777 /usr/local/share/fonts/opentype/LinuxFont + +<pre><code>sudo chmod -R 0777 /usr/local/share/fonts/opentype/LinuxFont </code></pre> + <p>The last thing we need to do is reload the font cache on our system:</p> + <pre><code>sudo fc-cache -fv </code></pre> -<p>That's it! You should now have access to your custom typeface in all your applications system wide.</p> + +<p>That’s it! You should now have access to your custom typeface in all your applications system wide.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/linux-love/index.html b/build/linux-love/index.html index 6d42576..3f52e61 100644 --- a/build/linux-love/index.html +++ b/build/linux-love/index.html @@ -1,54 +1,79 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>The Linux Desktop is Hard to Love</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>The Linux Desktop is Hard to Love</h1> +<h1 id="the-linux-desktop-is-hard-to-love">The Linux Desktop is Hard to Love</h1> + <p>2022-07-14</p> -<p>I want to love the "Linux Desktop". I really do. But I've come to the realization that what I love is the <em>idea</em> of the Linux Desktop. The community. The security and core focus on open source. The customizable environments. Tweaking as much or as little of the operating system as I please!</p> -<p>I just can't <em>stick with it</em>. I always end up back on macOS. And I'm starting to understand why.</p> -<h2>What the Linux Desktop Gets Right</h2> + +<p>I want to love the “Linux Desktop”. I really do. But I’ve come to the realization that what I love is the <em>idea</em> of the Linux Desktop. The community. The security and core focus on open source. The customizable environments. Tweaking as much or as little of the operating system as I please!</p> + +<p>I just can’t <em>stick with it</em>. I always end up back on macOS. And I’m starting to understand why.</p> + +<h2 id="what-the-linux-desktop-gets-right">What the Linux Desktop Gets Right</h2> + <p>To be fair, there is an incredible amount of things that the Linux desktop does really well:</p> + <ul> <li>Complete user control</li> <li>Ability to drastically change the desktop UI + <ul> <li>Gnome, KDE, XFCE, etc.</li> -</ul> -</li> +</ul></li> <li>Overall good and welcoming communities</li> <li>Extensive documentation for almost everything</li> </ul> -<p>These things make Linux a solid experience overall - but not a <em>great</em> one...</p> -<h2>What the Linux Desktop Gets Wrong</h2> + +<p>These things make Linux a solid experience overall - but not a <em>great</em> one…</p> + +<h2 id="what-the-linux-desktop-gets-wrong">What the Linux Desktop Gets Wrong</h2> + <p>If I had to summarize in a word what Linux lacks compared to macOS it would be: <em>cohesion</em>.</p> -<p>Apple's macOS keeps a solid consistency throughout its entire design. Everything looks and feels like it is part of the same system. Which is what a fully-fledged OS <em>should</em> feel like. The argument can be made that macOS suffers some fragmentation with things like <code>homebrew</code>, applications directly from developers vs. applications via the Mac App Store.</p> + +<p>Apple’s macOS keeps a solid consistency throughout its entire design. Everything looks and feels like it is part of the same system. Which is what a fully-fledged OS <em>should</em> feel like. The argument can be made that macOS suffers some fragmentation with things like <code>homebrew</code>, applications directly from developers vs. applications via the Mac App Store.</p> + <p>While this is true, I believe Linux desktops suffer far worse in terms of fragmented systems. Users building applications from source, <code>snap</code> packages, <code>flathub</code> packages, custom package managers shipped with separate distros, etc. And with this fragmentation comes the constant debates and discussions around which to use and which to avoid.</p> -<p>This can become overwhelming for average computer users. This is something we tend to forget in our "tech hubs". Most users want to boot up their machine and get to work. Linux can absolutely do this, but if a user hits a minor snag, then I guarantee they will have more difficulty fixing it compared to an issue found in macOS.</p> -<h2>User Experience</h2> -<p>Design is important. The user experience will make or break an operating system. This is another issue I've found with many Linux desktops.</p> -<p>Let's take Bluetooth for example. It works flawlessly in macOS. I have never had a single device bug-out or refuse to connect. Devices connect almost immediately when pairing. The UI is intuitive and gives the user clear feedback to what the system is doing while pairing, disconnecting, and so on.</p> -<p>Now, compare this to an average Linux DE experience - not so seamless. The fact that some distros require you to hop into a terminal in order to properly configure Bluetooth is pretty terrible. Sure, most have GUIs setup similar to that of macOS, but I find myself time and time again needing to pop open that trusty ol' Terminal. This is fine for someone like myself, but for the average computer user? No way.</p> -<p>Looking for another example? Printers. Yes, printers are terrible machines created in the depths of Hell itself, but they are a necessary evil. And again, macOS handles "plug-and-play" printer functionality like a champ. Linux on the other hand is a mixed bag. I've had some luck with specific Linux distros working with printers in this "plug-and-play" fashion, while others become a battle of attrition[^1]. Let's not even begin to talk about wireless <em>only</em> printers and setting up their proper drivers on Linux.</p> -<h2>Quality Hardware</h2> -<p>Another advantage macOS has over most other Linux desktops is tailored hardware. Apple produces the hardware created to run their own operating system, meaning it was specifically built for that task. Linux desktops are designed to run on almost any[^2] piece of hardware. Though this is fantastic in terms of technological sustainability (avoids dumping old devices when they lose "support") it ends up causing more support issues. Needing to support such a wide range of chip sets and drivers spreads the focus on a streamlined UX a little more thin. It becomes difficult to perfect a cohesive experience user-to-user when some many variables can be different. I should note that some distros[^3] are making fantastic strides in this area but are still far from ideal.</p> -<h2>I Still Use Linux</h2> -<p>I might have attacked the overall Linux desktop experience in favor of macOS a little harshly in this post, but it's a simple reflection of a individual who has used both extensively. I still work with multiple Linux machines daily. I still <em>like</em> using Linux.</p> -<p>I just don't <em>love</em> it.</p> -<h2>Refs</h2> + +<p>This can become overwhelming for average computer users. This is something we tend to forget in our “tech hubs”. Most users want to boot up their machine and get to work. Linux can absolutely do this, but if a user hits a minor snag, then I guarantee they will have more difficulty fixing it compared to an issue found in macOS.</p> + +<h2 id="user-experience">User Experience</h2> + +<p>Design is important. The user experience will make or break an operating system. This is another issue I’ve found with many Linux desktops.</p> + +<p>Let’s take Bluetooth for example. It works flawlessly in macOS. I have never had a single device bug-out or refuse to connect. Devices connect almost immediately when pairing. The UI is intuitive and gives the user clear feedback to what the system is doing while pairing, disconnecting, and so on.</p> + +<p>Now, compare this to an average Linux DE experience - not so seamless. The fact that some distros require you to hop into a terminal in order to properly configure Bluetooth is pretty terrible. Sure, most have GUIs setup similar to that of macOS, but I find myself time and time again needing to pop open that trusty ol’ Terminal. This is fine for someone like myself, but for the average computer user? No way.</p> + +<p>Looking for another example? Printers. Yes, printers are terrible machines created in the depths of Hell itself, but they are a necessary evil. And again, macOS handles “plug-and-play” printer functionality like a champ. Linux on the other hand is a mixed bag. I’ve had some luck with specific Linux distros working with printers in this “plug-and-play” fashion, while others become a battle of attrition[^1]. Let’s not even begin to talk about wireless <em>only</em> printers and setting up their proper drivers on Linux.</p> + +<h2 id="quality-hardware">Quality Hardware</h2> + +<p>Another advantage macOS has over most other Linux desktops is tailored hardware. Apple produces the hardware created to run their own operating system, meaning it was specifically built for that task. Linux desktops are designed to run on almost any[^2] piece of hardware. Though this is fantastic in terms of technological sustainability (avoids dumping old devices when they lose “support”) it ends up causing more support issues. Needing to support such a wide range of chip sets and drivers spreads the focus on a streamlined UX a little more thin. It becomes difficult to perfect a cohesive experience user-to-user when some many variables can be different. I should note that some distros[^3] are making fantastic strides in this area but are still far from ideal.</p> + +<h2 id="i-still-use-linux">I Still Use Linux</h2> + +<p>I might have attacked the overall Linux desktop experience in favor of macOS a little harshly in this post, but it’s a simple reflection of a individual who has used both extensively. I still work with multiple Linux machines daily. I still <em>like</em> using Linux.</p> + +<p>I just don’t <em>love</em> it.</p> + +<h2 id="refs">Refs</h2> + <ol> -<li>People swear by CUPS working well on Linux, but this has caused issues for me in the past as well. Unsure why macOS handles it fine...</li> +<li>People swear by CUPS working well on Linux, but this has caused issues for me in the past as well. Unsure why macOS handles it fine…</li> <li>Depending on the desired distro, resources required, etc.</li> <li>A couple that come to mind are Zorin OS and elementary OS</li> </ol> diff --git a/build/linux-mint-macbook-air/index.html b/build/linux-mint-macbook-air/index.html index 96d07cd..d54e076 100644 --- a/build/linux-mint-macbook-air/index.html +++ b/build/linux-mint-macbook-air/index.html @@ -1,84 +1,105 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Linux Mint MacBook Air Setup</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Linux Mint MacBook Air Setup</h1> +<h1 id="linux-mint-macbook-air-setup">Linux Mint MacBook Air Setup</h1> + <p>2020-08-16</p> -<p>I don't like the idea of throwing away old or outdated tech (within reason), so I try to find a new purpose for some of my "retired" devices. This article will cover how to switch over a mid-2011 model MacBook Air to utilize Linux Mint.</p> + +<p>I don’t like the idea of throwing away old or outdated tech (within reason), so I try to find a new purpose for some of my “retired” devices. This article will cover how to switch over a mid-2011 model MacBook Air to utilize Linux Mint.</p> + <p><strong>Important</strong>: This setup will completely wipe your existing disk and create a fresh install of Linux Mint on the SSD. You have been warned.</p> -<h2>The Specs</h2> + +<h2 id="the-specs">The Specs</h2> + <p>My old MacBook Air has a pretty decent spec sheet:</p> + <ul> <li>Processor: <strong>1.7GHz dual-core Intel Core i5</strong></li> <li>Memory: <strong>4GB of 1333MHz DDR3</strong></li> <li>Graphics: <strong>Advanced Intel HD Graphics 3000</strong></li> <li>SSD: <strong>128 GB</strong></li> </ul> -<p>And let's take a look at the basic system requirements Linux Mint suggests:</p> + +<p>And let’s take a look at the basic system requirements Linux Mint suggests:</p> + <ul> <li>2GB RAM</li> <li>Dual Core Processor</li> <li>20GB free disk space</li> </ul> + <p>We are looking pretty good!</p> -<h2>Step 1: Download Linux Mint</h2> -<p>For this setup we will be using the latest, stable version (at this time of writing) of Linux Mint 20 "Ulyana" - Xfce which is 20. You can download the necessary files here: </p> + +<h2 id="step-1-download-linux-mint">Step 1: Download Linux Mint</h2> + +<p>For this setup we will be using the latest, stable version (at this time of writing) of Linux Mint 20 “Ulyana” - Xfce which is 20. You can download the necessary files here: </p> + <ul> -<li><a href="https://www.linuxmint.com/edition.php?id=283">Linux Mint 20 "Ulyana" - Xfce</a> [1.8GB]</li> +<li><a href="https://www.linuxmint.com/edition.php?id=283">Linux Mint 20 “Ulyana” - Xfce</a> [1.8GB]</li> </ul> -<h2>Step 2: Flash Linux Mint to USB Stick</h2> + +<h2 id="step-2-flash-linux-mint-to-usb-stick">Step 2: Flash Linux Mint to USB Stick</h2> + <p>Next we just need to flash the Linux Mint OS to a USB storage device. If you need to purchase some, you can easily find them on Amazon (affliate link):</p> + <ul> -<li><p><a href="https://www.amazon.com/gp/product/B00JB3NXIS/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B00JB3NXIS&linkCode=as2&tag=uglyduck-20&linkId=494f4c1dd4e21782ecb865bcaa5a526b">Kootion 10 Pack 4GB Flash Drive 4gb USB 2.0 Flash Drives Keychain USB Drive Bulk Thumb Drive Swivel Memory Stick Black</a></p> -</li> -<li><p>Download <a href="https://www.balena.io/etcher/">Balena Etcher</a> for your current operating system</p> -</li> -<li><p>Run the installer</p> -</li> +<li><p><a href="https://www.amazon.com/gp/product/B00JB3NXIS/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B00JB3NXIS&linkCode=as2&tag=uglyduck-20&linkId=494f4c1dd4e21782ecb865bcaa5a526b">Kootion 10 Pack 4GB Flash Drive 4gb USB 2.0 Flash Drives Keychain USB Drive Bulk Thumb Drive Swivel Memory Stick Black</a></p></li> +<li><p>Download <a href="https://www.balena.io/etcher/">Balena Etcher</a> for your current operating system</p></li> +<li><p>Run the installer</p></li> </ul> + <p>Once installed, open Etcher do the following:</p> + <ol> <li>Select your downloaded Linux Mint ISO file</li> -<li>Select your USB stick/device as the media</li> +<li>Select your USB stick/device as the media</li> <li>Flash media</li> <li>???</li> <li>Profit!!</li> </ol> -<h2>Step 3: Boot from USB</h2> + +<h2 id="step-3-boot-from-usb">Step 3: Boot from USB</h2> + <ul> <li>Make sure your Macbook Air is turned off</li> <li>Plug your newly flashed USB stick into the MacBook Air</li> <li>Turn on the MacBook Air</li> -<li>Immediately hold down the <strong>alt/option</strong> button (keep holding until the prompt screen is visible)</li> -<li>You will be shown drive "icons" - you want to select your USB drive (normally the far right icon)</li> +<li>Immediately hold down the <strong>alt/option</strong> button (keep holding until the prompt screen is visible)</li> +<li>You will be shown drive “icons” - you want to select your USB drive (normally the far right icon)</li> <li>Press <strong>Enter</strong></li> -<li>Select the first item in the list that appears "Start Linux Mint"</li> +<li>Select the first item in the list that appears “Start Linux Mint”</li> </ul> -<p>After this you will boot into a "live session" of the Linux Mint operating system.</p> -<h2>Step 4: Installing Linux Mint</h2> -<p>Linux Mint makes it very easy for you to install it's OS step-by-step (similar to most other Linux distros). Simply <strong>double-click</strong> on the "Install Linux Mint" CD icon on the main desktop.</p> + +<p>After this you will boot into a “live session” of the Linux Mint operating system.</p> + +<h2 id="step-4-installing-linux-mint">Step 4: Installing Linux Mint</h2> + +<p>Linux Mint makes it very easy for you to install it’s OS step-by-step (similar to most other Linux distros). Simply <strong>double-click</strong> on the “Install Linux Mint” CD icon on the main desktop.</p> + <ul> <li>Choose your language. then hit <strong>Continue</strong></li> <li>Select your preferred keyboard layout, then hit <strong>Continue</strong></li> <li><em>Optional</em>: You might be asked to connect to a WiFi network, if you are set it up now</li> <li>I would suggest downloading the multimedia codecs to make things easier, then hit <strong>Continue</strong></li> -<li>For installation type, select "Erase disk and install Linux Mint", then hit <strong>Continue</strong> +<li>For installation type, select “Erase disk and install Linux Mint”, then hit <strong>Continue</strong> + <ul> <li>WARNING: This will wipe your current drive completely - make sure you are okay with this!</li> -</ul> -</li> +</ul></li> <li>It will issue you with a warning prompt, simply click <strong>Continue</strong></li> <li>Select your timezone, then hit <strong>Continue</strong></li> <li>Enter your name, a username, a name for your computer, and set a password (you will use this to login moving forward)</li> @@ -87,9 +108,12 @@ <li>After a reboot you will be prompted to remove the USB device and then press <strong>Enter</strong></li> <li>Welcome to Linux Mint!</li> </ul> -<h2>Conclusion</h2> -<p>Linux Mint is not only a great operating system, but it is also an excellent starting point for newcomers to Linux in general. It's stable enough to be used as a daily driver and popular enough that most minor issues can be solved with a quick internet search.</p> -<p>Hopefully this inspires others to try "recycling" their older Apple products instead of tossing them away or having them collect dust.</p> + +<h2 id="conclusion">Conclusion</h2> + +<p>Linux Mint is not only a great operating system, but it is also an excellent starting point for newcomers to Linux in general. It’s stable enough to be used as a daily driver and popular enough that most minor issues can be solved with a quick internet search.</p> + +<p>Hopefully this inspires others to try “recycling” their older Apple products instead of tossing them away or having them collect dust.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/load-image-on-click/index.html b/build/load-image-on-click/index.html index a3b6f57..2dae12c 100644 --- a/build/load-image-on-click/index.html +++ b/build/load-image-on-click/index.html @@ -1,54 +1,70 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Click to Load Website Images</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Click to Load Website Images</h1> +<h1 id="click-to-load-website-images">Click to Load Website Images</h1> + <p>2021-03-25</p> + <p>In my previous post about <a href="https://uglyduck.ca/#2021-03-22-89-posts-one-file">switching my Jekyll blog over to PHPetite</a>, I briefly mentioned how I only loaded in article images if the user <em>clicked or tapped</em> the empty file element.</p> -<p>In this post, I'm going to quickly breakdown the update I've done to my blog's images since then and how you can easily implement the same thing in your own project.</p> -<h2>Update</h2> + +<p>In this post, I’m going to quickly breakdown the update I’ve done to my blog’s images since then and how you can easily implement the same thing in your own project.</p> + +<h2 id="update">Update</h2> + <p>As pointed out by Gabriel <a href="https://github.com/bradleytaunt/phpetite/issues/1">in this Github issue</a>, this concept breaks things slightly for RSS users. Since then, I have just set the default images on this blog to <code>display: none</code> and render them as <code>block</code> elements when their specific <code>section</code> is loaded into the DOM visibly.</p> + <p>The example below is remaining the same as it was, to still provide context for this post.</p> -<h2>Live Demo</h2> -<p>Before we jump head first into the details, let's take a look at what we will be creating:</p> -<p><figure> - <div class="img-parent"> - <img loading="lazy" src="/placeholder-image.webp" onclick="this.src='/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons"> - </div> - <figcaption><b>Click the placeholder to load in the real image</b><br>Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption> -</figure></p> -<p>Pretty neat, eh? Well let's get into the nitty gritty.</p> -<h2>The Code</h2> -<p>Personally, I place everything into a <code>figure</code> element to keep things contained and clean - but this isn't required by any means. We then include our <code>img</code> and <code>figcaption</code> elements. That's it.</p> -<pre><code><figure> - <img src="/placeholder-image.webp" onclick="this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons"> - <figcaption><b>Click the placeholder to load in the real image</b><br> + +<h2 id="live-demo">Live Demo</h2> + +<p>Before we jump head first into the details, let’s take a look at what we will be creating:</p> + +<p>Pretty neat, eh? Well let’s get into the nitty gritty.</p> + +<h2 id="the-code">The Code</h2> + +<p>Personally, I place everything into a <code>figure</code> element to keep things contained and clean - but this isn’t required by any means. We then include our <code>img</code> and <code>figcaption</code> elements. That’s it.</p> + +<pre><code><figure> + <img src="/placeholder-image.webp" onclick="this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons"> + <figcaption><b>Click the placeholder to load in the real image</b><br> Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. - <a href="https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp">View full size image</a>. - </figcaption> -</figure> + <a href="https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp">View full size image</a>. + </figcaption> +</figure> </code></pre> -<h3>The Image Element</h3> + +<h3 id="the-image-element">The Image Element</h3> + <p>This is where the <em>magic</em> happens. By default all images will target the default placeholder image: <code>placeholder-image.webp</code>. This image is just 16KB in size and only needs to load in once.</p> -<p>Next we include an inline <code>onclick</code> attribute, which targets the current image's <code>src</code> attribute and changes it based on the URL provided. (Note: I use Cloudinary for my blog's image storage, but you could even host your images relative to your root directory if you wanted)</p> -<p>Now when a user clicks on the placeholder image, the inline <code>onclick</code> pulls in the correct image in it's place.</p> -<h3>Disabled JavaScript</h3> + +<p>Next we include an inline <code>onclick</code> attribute, which targets the current image’s <code>src</code> attribute and changes it based on the URL provided. (Note: I use Cloudinary for my blog’s image storage, but you could even host your images relative to your root directory if you wanted)</p> + +<p>Now when a user clicks on the placeholder image, the inline <code>onclick</code> pulls in the correct image in it’s place.</p> + +<h3 id="disabled-javascript">Disabled JavaScript</h3> + <p>For users who have JavaScript blocked or disabled we have a decent backup. By including a direct link to the image URL in the <code>figcaption</code> element, we give the user the ability to still view the image in a separate browser tab.</p> + <p>You could get extra fancy and include some <code>noscript</code> tags in your project that maybe render a different placeholder image mentioning they have JavaScript disabled etc, but for my needs that would be overkill.</p> -<h2>Cool - But Why Do This?</h2> -<p>Bandwidth is a limited resource for a lot of users around the world. As designers and developers it's best to respect this fact and only load in elements as the user <em>requires</em> them. Every little bit helps.</p> + +<h2 id="cool---but-why-do-this">Cool - But Why Do This?</h2> + +<p>Bandwidth is a limited resource for a lot of users around the world. As designers and developers it’s best to respect this fact and only load in elements as the user <em>requires</em> them. Every little bit helps.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/localwp-fedora/index.html b/build/localwp-fedora/index.html index 309dc48..f1baec2 100644 --- a/build/localwp-fedora/index.html +++ b/build/localwp-fedora/index.html @@ -1,32 +1,40 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Fixing LocalWP on Fedora 32</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Fixing LocalWP on Fedora 32</h1> +<h1 id="fixing-localwp-on-fedora-32">Fixing LocalWP on Fedora 32</h1> + <p>2020-05-06</p> + <p>I recently upgraded from Fedora 31 to 32 and everything went very smoothly - except for one application: <strong>LocalWP</strong>. After the upgrade, all local WordPress builds would fail and complain about two missing packages:</p> + <ul> <li>libnettle6</li> <li>libhogweed4</li> </ul> + <p>After wasting far too much time rolling back to older LocalWP versions and reaching out into the community forums, I found a simply solution to the problem. You just need to download and install the following packages manually:</p> + <ul> -<li>libnettle6: <a href="https://pkgs.org/download/libnettle6">libnettle6-3.4.1-lp152.3.1.x86<em></em>4.rpm</a></li> -<li>libhogweed4: <a href="https://pkgs.org/download/libhogweed4">libhogweed4-3.4.1-lp152.3.1.x86<em></em>4.rpm</a></li> +<li>libnettle6: <a href="https://pkgs.org/download/libnettle6">libnettle6-3.4.1-lp152.3.1.x86_64.rpm</a></li> +<li>libhogweed4: <a href="https://pkgs.org/download/libhogweed4">libhogweed4-3.4.1-lp152.3.1.x86_64.rpm</a></li> </ul> + <p>Although these packages are built for OpenSuse, it still worked perfectly fine for me. My hope is that this quick post might be helpful for others who possibly run into the same issue.</p> + <p>For reference, here is the Local Community ticket I created: <a href="https://localwp.com/community/t/local-not-working-fedora-32-workstation-edition/19219">Local not working with Fedora 32</a></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/loop/index.html b/build/loop/index.html index 4488987..272d94c 100644 --- a/build/loop/index.html +++ b/build/loop/index.html @@ -1,58 +1,76 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Looping Through Jekyll Collections</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Looping Through Jekyll Collections</h1> +<h1 id="looping-through-jekyll-collections">Looping Through Jekyll Collections</h1> + <p>2022-08-12</p> -<p>I recently needed to add a couple new items to my wife's personal recipe website (<a href="https://cookingwith.casa">cookingwith.casa</a>) which I hadn't touched in quite a while. The Jekyll build still worked fine, but I realized I was statically adding each <code>collection</code> by hand on the main homepage[^1].</p> + +<p>I recently needed to add a couple new items to my wife’s personal recipe website (<a href="https://cookingwith.casa">cookingwith.casa</a>) which I hadn’t touched in quite a while. The Jekyll build still worked fine, but I realized I was statically adding each <code>collection</code> by hand on the main homepage[^1].</p> + <p>Not so good.</p> -<p>Of course, this wasn't difficult at all to fix. Now everything is much more "hands free" moving forward. I figured I would share the details here in the hopes that others mind find it useful. Plus, it's my blog - so I'll do what I want!</p> -<h2>Looping Our Collections</h2> + +<p>Of course, this wasn’t difficult at all to fix. Now everything is much more “hands free” moving forward. I figured I would share the details here in the hopes that others mind find it useful. Plus, it’s my blog - so I’ll do what I want!</p> + +<h2 id="looping-our-collections">Looping Our Collections</h2> + <p>We want Jekyll to make things as streamlined as possible for us. This means that if I decide to add a new collection it will automatically render it along the others on the homepage.</p> + <p>Work smart not hard!</p> -<p>Let's take a look at the bare-bones collections loop:</p> + +<p>Let’s take a look at the bare-bones collections loop:</p> + <pre><code>{% for collection in site.collections %} - <!-- Our code goes here --> + <!-- Our code goes here --> {% endfor %} </code></pre> + <p>Then we need to include an <code>if</code> statement to avoid pulling in standard <code>post</code> items (or leave this in if that is desired):</p> + <pre><code>{% for collection in site.collections %} - {% if collection.label != 'posts' %} + {% if collection.label != 'posts' %} {% endif %} {% endfor %} </code></pre> + <p>Now for my specific use case, we want to display each collection label and then list its corresponding items below that label (see the <code>site[collection.label]</code> for reference)</p> + <pre><code>{% for collection in site.collections %} - {% if collection.label != 'posts' %} - <h2>{{ collection.label }}</h2> - <ul class="recipe-list"> + {% if collection.label != 'posts' %} + <h2>{{ collection.label }}</h2> + <ul class="recipe-list"> {% for item in site[collection.label] %} - <li> - <a href="{{ item.url }}">{{ item.title }}</a> - </li> + <li> + <a href="{{ item.url }}">{{ item.title }}</a> + </li> {% endfor %} - </ul> - <hr> + </ul> + <hr> {% endif %} {% endfor %} </code></pre> -<p>That's it! Now if I plan to add any new collections down the line, I just need to include it in the <code>_config.yml</code> file and I'm set. The homepage will take care of the rest once rendered.</p> + +<p>That’s it! Now if I plan to add any new collections down the line, I just need to include it in the <code>_config.yml</code> file and I’m set. The homepage will take care of the rest once rendered.</p> + <p>Enjoy looping through your Jekyll collections!</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>Just the sections were statically rendered. All the recipes were pulled in dynamically - I'm not that insane!</li> +<li>Just the sections were statically rendered. All the recipes were pulled in dynamically - I’m not that insane!</li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/luba/index.html b/build/luba/index.html index 7dcfc2e..954b5a0 100644 --- a/build/luba/index.html +++ b/build/luba/index.html @@ -1,53 +1,65 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>My Robotic Mower Woes</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>My Robotic Mower Woes</h1> +<h1 id="my-robotic-mower-woes">My Robotic Mower Woes</h1> + <p>2023-05-19</p> -<h2>A Brief Background</h2> -<p>I'm no stranger to robotic lawnmowers. When my wife and I moved into our rural home just over five years ago, we picked up the Husqvarna 450X Automower since I was far too lazy to manually mow my property and the cost was equal to that of a standard riding mower. It was a no-brainer.</p> -<p><figure> - <img src="/public/images/mower-1.jpeg" alt="The Husqvarna 450X"> - <figcaption>The Husqvarna 450X (not mine but same model)</figcaption> -</figure></p> -<p>Fast-forward five years. Everything is still going great with the Automower. Some minor repairs were needed but that was mostly my fault since I was allowing the mower into places it shouldn't have been (ie. root systems and dirt "craters"). Then lightning struck our backyard at the beginning of April this year. The mower was fine, since we stow it away inside for the winter but the charging station, charging brick and perimeter wire we <em>not</em> so lucky...</p> -<p>The lightning traveled along the main perimeter wire and went straight to the charging station. Boom. The charging dock was quite literally blown up into a million tiny pieces and scattered across my backyard. Giant trenches were carved up where the perimeter wire had been embedded in the lawn. This surge also followed the path towards the main power adapter and exploded that as well. All of this happened even with the charging station / adapter <em>turned off and unplugged from any outlet</em>. At least my mower was safe...</p> -<h2>Shopping for Automower Parts</h2> -<p>I realized I was going to have to buy another charging station, power adapter and also pay for a dealer to re-install the perimeter wire. This idea didn't thrill me but at least all-in the expense wouldn't be that high. Or so I thought...</p> + +<h2 id="a-brief-background">A Brief Background</h2> + +<p>I’m no stranger to robotic lawnmowers. When my wife and I moved into our rural home just over five years ago, we picked up the Husqvarna 450X Automower since I was far too lazy to manually mow my property and the cost was equal to that of a standard riding mower. It was a no-brainer.</p> + +<p>Fast-forward five years. Everything is still going great with the Automower. Some minor repairs were needed but that was mostly my fault since I was allowing the mower into places it shouldn’t have been (ie. root systems and dirt “craters”). Then lightning struck our backyard at the beginning of April this year. The mower was fine, since we stow it away inside for the winter but the charging station, charging brick and perimeter wire we <em>not</em> so lucky…</p> + +<p>The lightning traveled along the main perimeter wire and went straight to the charging station. Boom. The charging dock was quite literally blown up into a million tiny pieces and scattered across my backyard. Giant trenches were carved up where the perimeter wire had been embedded in the lawn. This surge also followed the path towards the main power adapter and exploded that as well. All of this happened even with the charging station / adapter <em>turned off and unplugged from any outlet</em>. At least my mower was safe…</p> + +<h2 id="shopping-for-automower-parts">Shopping for Automower Parts</h2> + +<p>I realized I was going to have to buy another charging station, power adapter and also pay for a dealer to re-install the perimeter wire. This idea didn’t thrill me but at least all-in the expense wouldn’t be that high. Or so I thought…</p> + <p>I contacted my local dealer and he quoted me directly from the Husqvarna supplier:</p> + <ul> <li>Charging base station: $749 CDN</li> <li>Power adapter: $599 CDN</li> <li>Perimeter wire install: ~$550 CDN</li> </ul> -<p>I thought the cost for both the charging station and the wire install seemed about right - but <strong>$599</strong> for a power adapter?! Are you kidding me? Best of all, these parts were on <em>back-order</em>. So even if I shelled out the ridiculous asking price, it was anyone's guess when I would get them. May was fast approaching and I would need to start cutting my property soon. I started to look at other options.</p> -<h2>Husqvarna EPOS Mowers</h2> -<p>Husqvarna recently launched their "perimeter-free" automowers for the general public (originally designed only for "fleet" enterprise use). These units use GPS and RTK position to map the desired cutting area of a property. Already my interest was piqued. Moving away from a perimeter wire seemed like a significant upgrade. It would also make my wife happy by allow her to garden freely, without worrying about severing an embedded lawn wire.</p> + +<p>I thought the cost for both the charging station and the wire install seemed about right - but <strong>$599</strong> for a power adapter?! Are you kidding me? Best of all, these parts were on <em>back-order</em>. So even if I shelled out the ridiculous asking price, it was anyone’s guess when I would get them. May was fast approaching and I would need to start cutting my property soon. I started to look at other options.</p> + +<h2 id="husqvarna-epos-mowers">Husqvarna EPOS Mowers</h2> + +<p>Husqvarna recently launched their “perimeter-free” automowers for the general public (originally designed only for “fleet” enterprise use). These units use GPS and RTK position to map the desired cutting area of a property. Already my interest was piqued. Moving away from a perimeter wire seemed like a significant upgrade. It would also make my wife happy by allow her to garden freely, without worrying about severing an embedded lawn wire.</p> + <p>So I contacted my local dealer again about these specific units. I came away with some interesting information:</p> + <ol> <li>They were quite expensive for my taste ($5000+ CDN - before install!)</li> <li>They were <em>also</em> on back-order here in Canada</li> </ol> + <p><em>Sigh</em>. The mower gods were trying to tell me something. It seemed Husqvarna was just not meant for me anymore.</p> -<h2>Luba to the Rescue!</h2> -<p>While researching "wireless" automowers, I came across the <a href="https://mammotion.com/?ref=bpjfzw7s">Luba Series 5000</a> (referral link) and kept it in my "maybe" pile to follow-up on if needed. So follow-up I did.</p> -<p><figure> - <img src="/public/images/mower-2.webp" alt="The Luba Series 5000"> - <figcaption>The Luba Series 5000 AWD (not mine but same model)</figcaption> -</figure></p> + +<h2 id="luba-to-the-rescue">Luba to the Rescue!</h2> + +<p>While researching “wireless” automowers, I came across the <a href="https://mammotion.com/?ref=bpjfzw7s">Luba Series 5000</a> (referral link) and kept it in my “maybe” pile to follow-up on if needed. So follow-up I did.</p> + <p>This mower seemed to check all my boxes:</p> + <ul> <li>Decently priced</li> <li>2-year warranty</li> @@ -56,21 +68,33 @@ <li>No perimeter wires</li> <li>No-go zones available</li> </ul> + <p>It did have a few minor cons associated with it:</p> + <ul> -<li>Fairly new product / company</li> +<li>Fairly new product / company</li> <li>No close dealer in my area</li> -<li>iOS and Android apps are more or less "beta"</li> +<li>iOS and Android apps are more or less “beta”</li> </ul> -<p>Next, I watched a few early reviews and went through some comments/feedback from beta users. I was convinced enough and bought the AWD 5000 model.</p> -<h2>Arrival and Setup</h2> -<p>The mower (who we named Lawna, and shall be referred to as such moving forward) arrived just after the first week of May. The hardware setup (charging station and RTK antenna) was very straight-forward, so I won't go into great detail about that here. Once Lawna was synced with the RTK and GPS system, it was time to map my property.</p> -<p>I broke my property into 4 main "tasks" as the app calls them. The 5000 model allows you to create up to 10, but for my needs 4 was fine for full coverage. I mapped each one, added a handful of no-go zones to each and told Lawna to get to work. She happily obliged.</p> -<h2>The First Week</h2> -<p>I've had (almost) zero issues with Lawna after a week and a half of running her daily. She alternates from the front to the back of the property every other day. The app allows you to setup automatic scheduling, but I prefer to run things manually every morning, based on whether an area should be skipped, grass it dried out etc.</p> -<p>The only minor problem I have run into is the need to manually clean grass build-up from under the small cutting blades after Lawna cuts a couple "task" areas. I swapped the default blades to use Husqvarna's <em>endurance</em> type, since they use a large slotted insert hole as opposed to Mammotion's two single insert holes. This change makes cleaning the blades faster, safer, and easier to maintain. I realize that a riding mower would require similar maintenance but a truly <em>autonomous</em> device shouldn't require human intervention.</p> -<h2>Moving Forward</h2> -<p>My hope is that the software continues to improve over time and that the core hardware lasts as long as my 450X did. Which now reminds me - I need to sell that thing...</p> + +<p>Next, I watched a few early reviews and went through some comments/feedback from beta users. I was convinced enough and bought the AWD 5000 model.</p> + +<h2 id="arrival-and-setup">Arrival and Setup</h2> + +<p>The mower (who we named Lawna, and shall be referred to as such moving forward) arrived just after the first week of May. The hardware setup (charging station and RTK antenna) was very straight-forward, so I won’t go into great detail about that here. Once Lawna was synced with the RTK and GPS system, it was time to map my property.</p> + +<p>I broke my property into 4 main “tasks” as the app calls them. The 5000 model allows you to create up to 10, but for my needs 4 was fine for full coverage. I mapped each one, added a handful of no-go zones to each and told Lawna to get to work. She happily obliged.</p> + +<h2 id="the-first-week">The First Week</h2> + +<p>I’ve had (almost) zero issues with Lawna after a week and a half of running her daily. She alternates from the front to the back of the property every other day. The app allows you to setup automatic scheduling, but I prefer to run things manually every morning, based on whether an area should be skipped, grass it dried out etc.</p> + +<p>The only minor problem I have run into is the need to manually clean grass build-up from under the small cutting blades after Lawna cuts a couple “task” areas. I swapped the default blades to use Husqvarna’s <em>endurance</em> type, since they use a large slotted insert hole as opposed to Mammotion’s two single insert holes. This change makes cleaning the blades faster, safer, and easier to maintain. I realize that a riding mower would require similar maintenance but a truly <em>autonomous</em> device shouldn’t require human intervention.</p> + +<h2 id="moving-forward">Moving Forward</h2> + +<p>My hope is that the software continues to improve over time and that the core hardware lasts as long as my 450X did. Which now reminds me - I need to sell that thing…</p> + <p>Hopefully this post helps others looking to snag their own robotic mower. So far, I can safely recommend Luba.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/macos-convert-to-html/index.html b/build/macos-convert-to-html/index.html index f5a6cb9..86b9db8 100644 --- a/build/macos-convert-to-html/index.html +++ b/build/macos-convert-to-html/index.html @@ -1,97 +1,112 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Convert Files to HTML with macOS Automator Quick Actions</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Convert Files to HTML with macOS Automator Quick Actions</h1> +<h1 id="convert-files-to-html-with-macos-automator-quick-actions">Convert Files to HTML with macOS Automator Quick Actions</h1> + <p>2022-01-28</p> -<p>Since a few people have reached out and thanked me for my previous post <a href="/batch-webp-conversion">Batch Converting Images to webp with macOS Automator</a>, I thought I would continue to share more of my own custom Automator Quick Actions. Today's post will cover the ability to convert <em>any</em> text-based document into pure HTML.</p> + +<p>Since a few people have reached out and thanked me for my previous post <a href="/batch-webp-conversion">Batch Converting Images to webp with macOS Automator</a>, I thought I would continue to share more of my own custom Automator Quick Actions. Today’s post will cover the ability to convert <em>any</em> text-based document into pure HTML.</p> + <p>I know - there are over 6 billion conversion apps that do this very same thing. But our way of doing it is <em>cooler</em>. Our conversion tool:</p> + <ul> <li>Will run directly inside macOS Finder (right-click actions FTW)</li> <li>Can batch convert multiple files at once</li> <li>Can convert mixed files types at the same time</li> </ul> -<p>And it can do all of this for free on your existing macOS system. No apps required. So, enough chit-chat, let's get started!</p> -<h2>The Dependencies</h2> -<p>Unfortunately, setting things up isn't as simple as clicking a single <code>Install</code> button and calling it a day. But don't start to panic! I assure you everything we'll be doing is actually quite easy to breeze through - <em>trust me</em>.</p> + +<p>And it can do all of this for free on your existing macOS system. No apps required. So, enough chit-chat, let’s get started!</p> + +<h2 id="the-dependencies">The Dependencies</h2> + +<p>Unfortunately, setting things up isn’t as simple as clicking a single <code>Install</code> button and calling it a day. But don’t start to panic! I assure you everything we’ll be doing is actually quite easy to breeze through - <em>trust me</em>.</p> + <p>Our main requirements will consistent of the following:</p> + <ul> <li>Homebrew</li> <li>Pandoc</li> <li>Ability to open Terminal</li> </ul> -<h2>Installing Homebrew</h2> -<p>Homebrew is a simple package manager for macOS. The beauty of having Homebrew is the flexibility in the future for installing other custom packages. Overall it's just a nice piece of software to have on your machine.</p> + +<h2 id="installing-homebrew">Installing Homebrew</h2> + +<p>Homebrew is a simple package manager for macOS. The beauty of having Homebrew is the flexibility in the future for installing other custom packages. Overall it’s just a nice piece of software to have on your machine.</p> + <p>If you have already installed Homebrew in the past, ignore this step and continue down the page. If not, simply open your Terminal and run:</p> -<pre><code>/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" + +<pre><code>/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" </code></pre> -<p>Let that finish and you're done! Also feel free to read more about Homebrew on the <a href="https://brew.sh">official website</a>. Knowledge is power!</p> -<h2>Installing Pandoc</h2> + +<p>Let that finish and you’re done! Also feel free to read more about Homebrew on the <a href="https://brew.sh">official website</a>. Knowledge is power!</p> + +<h2 id="installing-pandoc">Installing Pandoc</h2> + <p>The package that is going to be doing all the heavy-lifting for us is <a href="https://pandoc.org">pandoc</a>. Because we have Homebrew on our machine now, installing this package is as simple as opening our Terminal again and running:</p> + <pre><code>brew install pandoc </code></pre> -<p>Wait for everything to finish and you're done!</p> -<h2>Our Custom Automator Quick Action</h2> -<p>Next you'll want to open the macOS Automator app and create a new "Quick Action" when given the prompt to do so.</p> -<p><figure> - <img src="/public/images/new-automator.png" alt="Toggle prompt for new automation in macOS Automator"> - <figcaption>After opening Automator, select "Quick Action" from the menu (<a href="/public/images/new-automator.webp">link to hi-res image</a>)</figcaption> -</figure></p> + +<p>Wait for everything to finish and you’re done!</p> + +<h2 id="our-custom-automator-quick-action">Our Custom Automator Quick Action</h2> + +<p>Next you’ll want to open the macOS Automator app and create a new “Quick Action” when given the prompt to do so.</p> + <p>Now do the following (reference the image further below to make sure your parameters match):</p> + <ol> -<li>Set "Workflow receives current" to <strong>documents</strong> in <strong>any application</strong></li> -<li>In the search bar type in "Run Shell Script"</li> -<li>Drag-and-drop the "Run Shell Script" from the left pane into the right pane</li> -<li>Set the "Shell" parameter to <strong>/bin/bash</strong></li> -<li>Set "Pass input" as <strong>as arguments</strong></li> +<li>Set “Workflow receives current” to documents in any application</li> +<li>In the search bar type in “Run Shell Script”</li> +<li>Drag-and-drop the “Run Shell Script” from the left pane into the right pane</li> +<li>Set the “Shell” parameter to /bin/bash</li> +<li>Set “Pass input” as as arguments</li> </ol> -<p>Once all that is done, simply paste the following in the open text field within the "Run Shell Script" item:</p> -<pre><code>for f in "$@" + +<p>Once all that is done, simply paste the following in the open text field within the “Run Shell Script” item:</p> + +<pre><code>for f in "$@" do -/opt/homebrew/bin/pandoc -o "${f%.*}.html" "$f" +/opt/homebrew/bin/pandoc -o "${f%.*}.html" "$f" done </code></pre> -<p>If you've done everything correctly it should look something like this:</p> -<p><figure> - <img src="/public/images/new-automator-2.png" alt="Automator quick action details for converting to HTML"> - <figcaption>This is what your finished Automator quick action should look like (<a href="/public/images/new-automator-2.webp">link to hi-res image</a>)</figcaption> -</figure></p> -<p>Save this new Quick Action (Name is something like "Convert to HTML" to keep things simple). That's it! Amazing, right?</p> -<h2>Time to Convert</h2> + +<p>If you’ve done everything correctly it should look something like this:</p> + +<p>Save this new Quick Action (Name is something like “Convert to HTML” to keep things simple). That’s it! Amazing, right?</p> + +<h2 id="time-to-convert">Time to Convert</h2> + <p>Now it is finally time to see our Quick Action is <em>action</em>! Navigate to any document file in a Finder window and follow along.</p> + <ol> <li>First, right-click on the file you wish to convert. (<a href="#fig-1">Figure 1</a>)</li> <li>In the pop-up container, scroll down and hover over <code>Quick Actions</code>.</li> <li>A secondary pop-out will appear. Look for the action <code>Convert File to HTML</code> and click it. (<a href="#fig-2">Figure 2</a>)</li> </ol> -<p><figure id="fig-1"> - <img src="/public/images/macos-convert-1.png" alt="A markdown file in macOS Finder"> - <figcaption><strong>Figure 1:</strong> Finding and right-clicking on your desired file (<a href="/public/images/macos-convert-1.webp">link to hi-res image</a>)</figcaption> -</figure></p> -<p><figure id="fig-2"> - <img src="/public/images/macos-convert-2.png" alt="Convert to HTML action selection"> - <figcaption><strong>Figure 2:</strong> From the "Quick Actions" menu, select "Convert to HTML" (<a href="/public/images/macos-convert-2.webp">link to hi-res image</a>)</figcaption> -</figure></p> + <p>If everything was set up properly (and depending on the size of the file) you should see your converted HTML file show up right next to your existing document. Time to celebrate!</p> -<p>Don't forget - you can also <em>batch</em> convert multiple files and multiple file <em>types</em> at once. The possibilities are endless!</p> -<p><figure> - <img src="/public/images/macos-convert-3.png" alt="Finder window showing a Markdown file and an HTML file"> - <figcaption>Our converted document is now available in HTML. Absolutely glorious. (<a href="/public/images/macos-convert-3.webp">link to hi-res image</a>)</figcaption> -</figure></p> -<h2>No Limits</h2> + +<p>Don’t forget - you can also <em>batch</em> convert multiple files and multiple file <em>types</em> at once. The possibilities are endless!</p> + +<h2 id="no-limits">No Limits</h2> + <p>Although this article has mainly focused on converting documents to HTML, <code>pandoc</code> is so powerful you could do any number of conversions. Re-using these steps above, you have the ability to make as many different conversion quick actions as your heart desires!</p> + <p>Have fun converting!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/macos-icon-css/index.html b/build/macos-icon-css/index.html index bed4d4b..2a7d39b 100644 --- a/build/macos-icon-css/index.html +++ b/build/macos-icon-css/index.html @@ -1,88 +1,99 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Create a Mac App Icon with Pure HTML and CSS</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Create a Mac App Icon with Pure HTML and CSS</h1> +<h1 id="create-a-mac-app-icon-with-pure-html-and-css">Create a Mac App Icon with Pure HTML and CSS</h1> + <p>2021-04-13</p> -<p>I have always been a huge fan of <a href="https://dribbble.com/bg-d">Bogdan's work on Dribbble</a> and was recently inspired to see if I could replicate one of his awesome icon designs with only HTML & CSS. What was the outcome? I think it's a half-way decent copy - of course the original will always look significantly better.</p> -<p>Don't care about reading through the tutorial? No problem! You can <a href="#demo">jump right down to the live demo</a></p> -<h2>The Comparison</h2> -<p>Let's take a look at the original Dribbble shot:</p> -<p><figure> - <img src="/public/images/e54ac9b2850f786471d7790bec3844a6.webp" alt="Big Sur Icon"> - <figcaption>The original Dribbble shot (<a href="/public/images/e54ac9b2850f786471d7790bec3844a6.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>And now let's see what we will be creating with only HTML & CSS:</p> -<p><figure> - <img src="/public/images/big-sur-css.webp" alt="Big Sur Icon"> - <figcaption>What we are going to create with pure HTML & CSS (<a href="/public/images/big-sur-css.webp">direct link to image</a>)</figcaption> -</figure></p> + +<p>I have always been a huge fan of <a href="https://dribbble.com/bg-d">Bogdan’s work on Dribbble</a> and was recently inspired to see if I could replicate one of his awesome icon designs with only HTML & CSS. What was the outcome? I think it’s a half-way decent copy - of course the original will always look significantly better.</p> + +<p>Don’t care about reading through the tutorial? No problem! You can <a href="#demo">jump right down to the live demo</a></p> + +<h2 id="the-comparison">The Comparison</h2> + +<p>Let’s take a look at the original Dribbble shot:</p> + +<p>And now let’s see what we will be creating with only HTML & CSS:</p> + <p>Like I said - far from perfect but still a fun experiment!</p> -<h2>The HTML</h2> -<p>Let's jump right in and build out the main skeleton of our project:</p> -<pre><code><div class="white-square"></div> -<div class="blue-square"> - <div class="row"> - <div class="item"></div> - <div class="item"></div> - </div> - <div class="row"> - <div class="item"></div> - <div class="item"></div> - </div> - <div class="row"> - <div class="item"></div> - <div class="item"></div> - </div> - <div class="row"> - <div class="item"></div> - <div class="item"></div> - </div> - <div class="row"> - <div class="item"></div> - <div class="item"></div> - </div> - <div class="row"> - <div class="item"></div> - <div class="item"></div> - </div> - <div class="row"> - <div class="item"></div> - <div class="item"></div> - </div> -</div> -<div class="play-button"> - <div class="triangle"></div> -</div> + +<h2 id="the-html">The HTML</h2> + +<p>Let’s jump right in and build out the main skeleton of our project:</p> + +<pre><code><div class="white-square"></div> +<div class="blue-square"> + <div class="row"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="row"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="row"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="row"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="row"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="row"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="row"> + <div class="item"></div> + <div class="item"></div> + </div> +</div> +<div class="play-button"> + <div class="triangle"></div> +</div> </code></pre> -<p> - The <code>white-square</code> element is the white, rounded square in the background - - The <code>blue-square</code> is the main blue square of the icon - - The <code>row</code> elements inside the <code>blue-square</code> will be our individual <em>lines</em> spread across the icon - - The <code>play-button</code> is obviously - the play button</p> -<p> Right now it will look like nothing, but we can change that by adding the most important part...</p> -<h2>The CSS</h2> -<p>Pasting the entire CSS styling here would end up looking a little daunting. Instead, I'm just going to breakdown each individual section to make things more digestible.</p> -<h3>Defaults & the White Square</h3> + +<ul> +<li><p>The <code>white-square</code> element is the white, rounded square in the background</p></li> +<li><p>The <code>blue-square</code> is the main blue square of the icon</p></li> +<li><p>The <code>row</code> elements inside the <code>blue-square</code> will be our individual <em>lines</em> spread across the icon</p></li> +<li><p>The <code>play-button</code> is obviously - the play button</p> + +<p>Right now it will look like nothing, but we can change that by adding the most important part…</p></li> +</ul> + +<h2 id="the-css">The CSS</h2> + +<p>Pasting the entire CSS styling here would end up looking a little daunting. Instead, I’m just going to breakdown each individual section to make things more digestible.</p> + +<h3 id="defaults-the-white-square">Defaults & the White Square</h3> + <pre><code>* { box-sizing: border-box; } :root { --row-distance: 42px; } -</code></pre> -<pre><code>.white-square { + +.white-square { background: white; border-radius: 105px; box-shadow: inset 0 -5px 8px rgba(0,0,0,0.25), 0 12px 10px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1); @@ -94,7 +105,9 @@ width: 420px; } </code></pre> + <p>See that <code>--row-distance</code> variable? That will come into play a bit later. For now, we want to lay the Blue Square on top of this newly creating White Square:</p> + <pre><code>.blue-square { background: linear-gradient(#04BDFD 0%, #0585E4 100%); border-radius: 105px; @@ -107,8 +120,11 @@ width: 420px; } </code></pre> -<h2>Targeting the Inner Rows</h2> -<p>So far so good. The next part <em>looks</em> like a lot, but I assure you it's fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total). First we start with the parent <code>row</code> styling:</p> + +<h2 id="targeting-the-inner-rows">Targeting the Inner Rows</h2> + +<p>So far so good. The next part <em>looks</em> like a lot, but I assure you it’s fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total). First we start with the parent <code>row</code> styling:</p> + <pre><code>.blue-square .row { display: flex; height: 20px; @@ -118,7 +134,9 @@ width: 100%; } </code></pre> + <p>Now we style each individual row item via the <code>nth-of-type</code> attribute:</p> + <pre><code>.blue-square .row:nth-of-type(2) { margin-top: var(--row-distance); } .blue-square .row:nth-of-type(2) .item:nth-of-type(odd) { width: 85px; @@ -172,9 +190,13 @@ width: calc(100% - 55px); } </code></pre> -<p>Take a few moments to read everything over - it will help you better understand what's going on. Basically, we are adding two inner elements to each row element. We calculate the <code>margin-top</code> distance by using that <code>--row-distance</code> variable I mentioned earlier. The inner elements are then styled based on their placement inside the row (<code>nth-of-type</code>).</p> -<h3>The Play Button</h3> + +<p>Take a few moments to read everything over - it will help you better understand what’s going on. Basically, we are adding two inner elements to each row element. We calculate the <code>margin-top</code> distance by using that <code>--row-distance</code> variable I mentioned earlier. The inner elements are then styled based on their placement inside the row (<code>nth-of-type</code>).</p> + +<h3 id="the-play-button">The Play Button</h3> + <p>Now we finish things off with a much simpler element to style:</p> + <pre><code>.play-button { backdrop-filter: blur(6px); border-radius: 9999px; @@ -189,7 +211,7 @@ .play-button::before { background: rgba(255,255,255,0.9); border-radius: 9999px; - content:''; + content:''; filter: blur(40px); height: 150%; left: -25%; @@ -208,7 +230,7 @@ } .triangle:before, .triangle:after { - content: ''; + content: ''; position: absolute; background-color: inherit; } @@ -230,17 +252,24 @@ transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); } </code></pre> -<p>Thanks to <a href="https://m.nintendojo.fr/@meduz/106059826445460903">meduz</a> for pointing out the <code>backdrop-filter</code> property. This allows for a frosted glass look on Chromium & Safari (although sadly not on Firefox). The <code>triangle</code> element could also be improved by using an embedded <code>SVG</code> but I was determined to use only CSS for this experiment :P</p> -<p>That's really all there is to it! You can see the embedded CodePen example below or <a href="https://codepen.io/bradleytaunt/pen/bGgBRaV">check it out directly here &rarr;</a></p> -<hr /> -<h3>Special Thanks</h3> + +<p>Thanks to <a href="https://m.nintendojo.fr/@meduz/106059826445460903">meduz</a> for pointing out the <code>backdrop-filter</code> property. This allows for a frosted glass look on Chromium & Safari (although sadly not on Firefox). The <code>triangle</code> element could also be improved by using an embedded <code>SVG</code> but I was determined to use only CSS for this experiment :P</p> + +<p>That’s really all there is to it! You can see the embedded CodePen example below or <a href="https://codepen.io/bradleytaunt/pen/bGgBRaV">check it out directly here →</a></p> + +<hr/> + +<h3 id="special-thanks">Special Thanks</h3> + <p>Thanks to Bogdan for letting me butcher the original Dribbble shot :D</p> + <ul> <li><a href="http://bg-d.net/">bg-d.net</a></li> <li><a href="https://dribbble.com/bg-d">Bogdan on Dribbble</a></li> </ul> -<hr /> -<p><h2 id="demo">Live Demo (CodePen)</h2></p> + +<hr/> + <p><a href="https://codepen.io/bradleytaunt/pen/bGgBRaV">Live CodePen Demo</a></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/mail/index.html b/build/mail/index.html index 0b086e8..a000d97 100644 --- a/build/mail/index.html +++ b/build/mail/index.html @@ -1,44 +1,51 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Working with `git` Patches in Apple Mail</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Working with <code>git</code> Patches in Apple Mail</h1> +<h1 id="working-with-patches-in-apple-mail">Working with <code>git</code> Patches in Apple Mail</h1> + <p>2023-05-11</p> -<blockquote><p><strong>Before we begin</strong>: You could likely automate this process in a more streamlined way, but for most use cases this workflow should be fine.</p> + +<blockquote> +<p><strong>Before we begin</strong>: You could likely automate this process in a more streamlined way, but for most use cases this workflow should be fine.</p> </blockquote> + <p>I recently covered how to <a href="/git-patches">work with git email patches in Evolution on Linux</a>, so I thought it would make sense to walk through a similar workflow for those using Apple Mail on MacOS. The idea is essentially the same, with just a little extra work involved.</p> -<h2>Create a "Patches" Mailbox</h2> -<p>The first thing you'll need to do is make a new <code>Patches</code> mailbox folder inside your existing mail account. Once done, your default Mail sidebar should look similar to the following:</p> -<p><figure> - <img src="/public/images/apple-mail-1.png" alt="The Apple Mail sidebar with the Patches folder present"> - <figcaption>The Apple Mail sidebar with the "Patches" folder present</figcaption> -</figure></p> -<h2>Applying Patches</h2> -<p>Now navigate to the email message containing a <code>git</code> patch. Right-click and select <em>Move to</em> > <em>Patches</em>. Now in the sidebar, right-click your <em>Patches</em> folder and select <em>Export Mailbox...</em>. You'll be prompted to save this folder locally. I suggest having a top-level folder named <strong>Patches</strong> to make things consistent.</p> + +<h2 id="create-a-patches-mailbox">Create a “Patches” Mailbox</h2> + +<p>The first thing you’ll need to do is make a new <code>Patches</code> mailbox folder inside your existing mail account. Once done, your default Mail sidebar should look similar to the following:</p> + +<h2 id="applying-patches">Applying Patches</h2> + +<p>Now navigate to the email message containing a <code>git</code> patch. Right-click and select <em>Move to</em> > <em>Patches</em>. Now in the sidebar, right-click your <em>Patches</em> folder and select <em>Export Mailbox…</em>. You’ll be prompted to save this folder locally. I suggest having a top-level folder named <strong>Patches</strong> to make things consistent.</p> + <p>Inside this folder you should see something similar to the following structure:</p> -<p><figure> - <img src="/public/images/apple-mail-2.png" alt="The contents of the saved Patches mailbox folder"> - <figcaption>The contents of the saved Patches mailbox folder</figcaption> -</figure></p> + <p>Once saved, open your terminal, navigate to the project you wish to apply this new patch to:</p> -<pre><code>cd my-path/very-cool-project + +<pre><code>cd my-path/very-cool-project </code></pre> + <p>and then run:</p> -<pre><code>git apply ~/Patches/<saved-patches-mailbox-folder>/mbox + +<pre><code>git apply ~/Patches/<saved-patches-mailbox-folder>/mbox </code></pre> -<p>Congrats! You've successfully applied a git email patch through Apple Mail! Well, kind of. The terminal did most of the <em>real</em> work. Just be sure to periodically <em>purge</em> your local <em>Patches</em> folder to keep things clean!</p> + +<p>Congrats! You’ve successfully applied a git email patch through Apple Mail! Well, kind of. The terminal did most of the <em>real</em> work. Just be sure to periodically <em>purge</em> your local <em>Patches</em> folder to keep things clean!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/mango/index.html b/build/mango/index.html index fc5db43..45f1be1 100644 --- a/build/mango/index.html +++ b/build/mango/index.html @@ -1,33 +1,48 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Replacing My Eero Mesh Network with Two Mangos</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Replacing My Eero Mesh Network with Two Mangos</h1> +<h1 id="replacing-my-eero-mesh-network-with-two-mangos">Replacing My Eero Mesh Network with Two Mangos</h1> + <p>2023-03-09</p> -<p>It has been one week since I retired my Eero mesh network setup and replaced it with two <a href="https://www.gl-inet.com/products/gl-mt300n-v2/">Mango Mini Travel Routers (GL-MT300N-V2)</a>. There were some obvious reasons to make this switch but I was initially unsure how the overall performance on the Mangos would hold up compared to the "cutting edge" tech that Eero devices claim to have.</p> -<p>Spoiler (in case the post title didn't give it away): I was pleasantly surprised.</p> -<h2>Goodbye Amazon</h2> -<p>I was a big supporter of the original "kickstarter" project when Eero first launched. I pre-ordered and they even sent me a device free-of-charge since there were logistic problems shipping to Canada. I received my V1 routers, hooked them up and enjoyed a seamless, wifi mesh system. Everything was going great.</p> -<p>Then, in 2019 <a href="https://mashable.com/article/amazon-acquires-eero">they were acquired by Amazon</a>. Sigh...</p> + +<p>It has been one week since I retired my Eero mesh network setup and replaced it with two <a href="https://www.gl-inet.com/products/gl-mt300n-v2/">Mango Mini Travel Routers (GL-MT300N-V2)</a>. There were some obvious reasons to make this switch but I was initially unsure how the overall performance on the Mangos would hold up compared to the “cutting edge” tech that Eero devices claim to have.</p> + +<p>Spoiler (in case the post title didn’t give it away): I was pleasantly surprised.</p> + +<h2 id="goodbye-amazon">Goodbye Amazon</h2> + +<p>I was a big supporter of the original “kickstarter” project when Eero first launched. I pre-ordered and they even sent me a device free-of-charge since there were logistic problems shipping to Canada. I received my V1 routers, hooked them up and enjoyed a seamless, wifi mesh system. Everything was going great.</p> + +<p>Then, in 2019 <a href="https://mashable.com/article/amazon-acquires-eero">they were acquired by Amazon</a>. Sigh…</p> + <p>I should have jumped ship then, but I waited to see what would happen. After all, my internet was still working perfectly fine. Then the half-baked and sometimes completely broken updates started rolling out. On more than one occasion they needed to perform complete version roll-backs. This sometimes knocked out my internet for hours at a time.</p> + <p>They also started pushing (although not outright requiring) users to login using their Amazon account. While not a massive deal breaker, the constant pestering to do so rubbed me the wrong way. </p> -<p>During this time, my first son was born and we moved out of the city into our first house. So fiddling with my internet setup took the backseat for a while. Once everything settled down, I started seeing more broken updates and certain features being put behind their premium "Eero Secure" platform. Features that were available as <em>default</em> for most other router hardware providers.</p> + +<p>During this time, my first son was born and we moved out of the city into our first house. So fiddling with my internet setup took the backseat for a while. Once everything settled down, I started seeing more broken updates and certain features being put behind their premium “Eero Secure” platform. Features that were available as <em>default</em> for most other router hardware providers.</p> + <p>So, I started to look at other options.</p> -<h2>Why the Mango?</h2> -<p>It is important to mention, that because I live out in rural Canada, my internet options are extremely limited. All providers are satellite-based since fiber cables are unheard of out in these areas. Because of this, my main internet speeds are limited to 25Mbps <em>baseline</em>. This is important to note, since my experience and router choice took this into consideration. If you're a current Eero user with 300Mbps+ speeds and are looking to switch wifi systems - the Mango is probably not the best for you.</p> + +<h2 id="why-the-mango">Why the Mango?</h2> + +<p>It is important to mention, that because I live out in rural Canada, my internet options are extremely limited. All providers are satellite-based since fiber cables are unheard of out in these areas. Because of this, my main internet speeds are limited to 25Mbps <em>baseline</em>. This is important to note, since my experience and router choice took this into consideration. If you’re a current Eero user with 300Mbps+ speeds and are looking to switch wifi systems - the Mango is probably not the best for you.</p> + <p>Luckily for me, the Mini Mangos were perfect for my basic requirements:</p> + <ul> <li>Max. 300Mbps Wi-Fi Speed (more than enough for my use-case)</li> <li>Running open-source software via <a href="https://openwrt.org/">openwrt</a></li> @@ -35,12 +50,11 @@ <li>Tiny physical footprint</li> <li>Extremely portable</li> </ul> -<h2>Setting Up the Yellow Squares</h2> -<p><figure> -<img src="/public/images/mango-router-1.png" alt="The Mango router from the left side"> -<figcaption>The little yellow mango in all its glory...</figcaption> -</figure></p> + +<h2 id="setting-up-the-yellow-squares">Setting Up the Yellow Squares</h2> + <p>Setup was a breeze compared to the Eero experience (which could only be performed through their mobile app via bluetooth and a great deal of repositioning the devices). The full process is essentially:</p> + <ol> <li>Power up the first Mango</li> <li>Connect laptop to the Mango via ethernet (you can also connect through wifi)</li> @@ -48,36 +62,76 @@ <li>Change SSID name, set device in router mode</li> <li>Enjoy your internet!</li> </ol> -<p>Since my office is fairly far away from the placement of the "main" Mango router, I placed the second device near my desk. I followed the same setup as above, except I set the mode as "repeater".</p> -<p>For my use case I actually set this device up with a separate SSID. This was just my personal preference. You don't have to do this. If you give both devices the same SSID name most modern devices will treat your network as if it <em>was</em> a mesh network. Pretty neat stuff.</p> + +<p>Since my office is fairly far away from the placement of the “main” Mango router, I placed the second device near my desk. I followed the same setup as above, except I set the mode as “repeater”.</p> + +<p>For my use case I actually set this device up with a separate SSID. This was just my personal preference. You don’t have to do this. If you give both devices the same SSID name most modern devices will treat your network as if it <em>was</em> a mesh network. Pretty neat stuff.</p> + <p>I plan to eventually add my Pi Zero running AdGuard Home back into the mix, but for now I just installed a small adblock package directly onto the router:</p> + <ul> <li><a href="https://github.com/openwrt/packages/tree/master/net/adblock">adblock package</a></li> </ul> -<h2>Performance Comparisons</h2> + +<h2 id="performance-comparisons">Performance Comparisons</h2> + <p>Everything below is just some basic testing I performed. Obviously it should be noted that your experience might be entirely different based on interference, building size, amount of devices connected, etc.</p> + <p>Stats for my original Eero mesh setup:</p> + <ul> <li>1 eero 6 pro, 1 eero 6+, 1 eero beacon</li> <li>Average internet testing speed: 25Mbps</li> <li>Consistent signal throughout the house</li> </ul> + <p>Stats for the new Mini Mango setup:</p> + <ul> <li>2 mini mangos (one in router mode, the other set as repeater)</li> <li>Average internet testing speed: 25Mbps</li> <li>Consistent signal throughout the house</li> </ul> -<h2>Extras</h2> + +<h2 id="extras">Extras</h2> + <p>Some additional data comparisons for those interested. Prices shown are in Canadian dollars.</p> + <table> -<tr><th></th><th>Eero</th><th>Mango</th></tr> -<tr><td><strong>Power</strong></td><td>5W</td><td>2.75W</td></tr> -<tr><td><strong>Size</strong> (mm)</td><td>139x139x55</td><td>58x58x22</td></tr> -<tr><td><strong>Bands</strong> (GHz)</td><td>2.4/5</td><td>2.4</td></tr> -<tr><td><strong>Cost</strong> (per unit)</td><td>$99+</td><td>$39</td></tr> +<thead> +<tr> +<th></th> +<th>Eero</th> +<th>Mango</th> +</tr> +</thead> + +<tbody> +<tr> +<td><strong>Power</strong></td> +<td>5W</td> +<td>2.75W</td> +</tr> +<tr> +<td><strong>Size</strong> (mm)</td> +<td>139x139x55</td> +<td>58x58x22</td> +</tr> +<tr> +<td><strong>Bands</strong> (GHz)</td> +<td>2.4/5</td> +<td>2.4</td> +</tr> +<tr> +<td><strong>Cost</strong> (per unit)</td> +<td>$99+</td> +<td>$39</td> +</tr> +</tbody> </table> -That mostly covers it. I'm extremely happy with my switch away from the locked-down, "upsell" heavy Eeros. My only regret is that I didn't make this change sooner.<footer role="contentinfo"> + +<p>That mostly covers it. I’m extremely happy with my switch away from the locked-down, “upsell” heavy Eeros. My only regret is that I didn’t make this change sooner.</p> +<footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> <li><a href="/">Home</a></li> diff --git a/build/menu-toggle-css/index.html b/build/menu-toggle-css/index.html index fb941a8..3bb096e 100644 --- a/build/menu-toggle-css/index.html +++ b/build/menu-toggle-css/index.html @@ -1,62 +1,67 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Menu Toggle with Pure CSS</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Menu Toggle with Pure CSS</h1> +<h1 id="menu-toggle-with-pure-css">Menu Toggle with Pure CSS</h1> + <p>2020-10-19</p> + <p>When thinking through navigation designs for mobile devices sometimes the best option is to store away the content behind a toggle button. This button would then display the menu items upon interaction. Let me show you how to create such an element with only CSS - no need for JavaScript today!</p> -<h2>Before we begin</h2> -<p>I would like to point out that the concept of "toggling" the main menu (even for mobile) is not always the best solution. If you're interested, you can take a look at a previous article I wrote explaining why: <a href="/hamburger-menu-alternative.html">Using Hamburger Menus? Try Sausage Links</a></p> -<p>Now that we have mentioned possible pitfalls of relying so heavily on toggle menus, let's build one!</p> -<h2>Our Final Product</h2> + +<h2 id="before-we-begin">Before we begin</h2> + +<p>I would like to point out that the concept of “toggling” the main menu (even for mobile) is not always the best solution. If you’re interested, you can take a look at a previous article I wrote explaining why: <a href="/hamburger-menu-alternative.html">Using Hamburger Menus? Try Sausage Links</a></p> + +<p>Now that we have mentioned possible pitfalls of relying so heavily on toggle menus, let’s build one!</p> + +<h2 id="our-final-product">Our Final Product</h2> + <p><img src="/public/images/menu-toggle-css.png" alt="Menu toggle made from pure CSS" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/mdEEvEX">Live CodePen Example</a></p> -<h2>The HTML</h2> -<p>To implement this design you really don't need much in terms of HTML:</p> + +<h2 id="the-html">The HTML</h2> + +<p>To implement this design you really don’t need much in terms of HTML:</p> + <ul> -<li>A single <code>checkbox</code> input</li> -<li>A <code>label</code> that corresponds to the <code>checkbox</code></li> -<li>A <code>nav</code> element to house our unordered list items</li> +<li><p>A single <code>checkbox</code> input</p></li> +<li><p>A <code>label</code> that corresponds to the <code>checkbox</code></p></li> +<li><p>A <code>nav</code> element to house our unordered list items</p> + +<p>Menu</p></li> </ul> -<pre><code><!-- The checkbox input & label partner --> -<input type="checkbox" id="menu-toggle"> -<label for="menu-toggle">Menu</label> - -<!-- The navigation we wish to toggle --> -<nav> - <ul> - <li><a href="">Home</a></li> - <li><a href="">About</a></li> - <li><a href="">Articles</a></li> - <li><a href="">Colophon</a></li> - <li><a href="">Contact</a></li> - </ul> -</nav> -</code></pre> -<p>That's it!</p> -<h2>The CSS</h2> -<p>The first thing we need to do is "hide" the <code>checkbox</code> input element. It's important to avoid using <code>display: none</code> or <code>visibility: hidden</code> in order to achieve this. Those CSS properties can negatively impact accessibility (specifically screen readers). So we will be relying on the <code>position</code>, <code>z-index</code> and <code>opacity</code> properties to help us out.</p> -<pre><code>/* Set the input position to absolute, send it off screen with zero opacity */ -input[type="checkbox"] { + +<p>That’s it!</p> + +<h2 id="the-css">The CSS</h2> + +<p>The first thing we need to do is “hide” the <code>checkbox</code> input element. It’s important to avoid using <code>display: none</code> or <code>visibility: hidden</code> in order to achieve this. Those CSS properties can negatively impact accessibility (specifically screen readers). So we will be relying on the <code>position</code>, <code>z-index</code> and <code>opacity</code> properties to help us out.</p> + +<pre><code>/* Set the input position to absolute, send it off screen with zero opacity */ +input[type="checkbox"] { left: -9999px; opacity: 0; position: absolute; } </code></pre> + <p>Then we give our corresponding <code>label</code> a minor face-lift to make it appear more button-like:</p> -<pre><code>/* Minor visual styling to make the label more button-y */ + +<pre><code>/* Minor visual styling to make the label more button-y */ label { border: 1px solid currentColor; border-radius: 4px; @@ -64,26 +69,31 @@ label { padding: 10px; } </code></pre> -<p>For our main <code>nav</code> element, we want to set it's position to <code>absolute</code> in order to avoid any janky page rendering issues that might occur when toggling the menu:</p> + +<p>For our main <code>nav</code> element, we want to set it’s position to <code>absolute</code> in order to avoid any janky page rendering issues that might occur when toggling the menu:</p> + <p>` -</p> -<pre><code>/* Set nav to absolute (avoids odd page rendering space pop-in) */ -nav { - opacity: 0; - position: absolute; - z-index: -2; -} -</code></pre> + /* Set nav to absolute (avoids odd page rendering space pop-in) */ + nav { + opacity: 0; + position: absolute; + z-index: -2; + }</p> + <p>The last step is to actually <em>show</em> the menu if the user toggles the <code>checkbox</code>:</p> -<pre><code>/* Show nav when checkbox is checked */ -input[type="checkbox"]:checked ~ nav { + +<pre><code>/* Show nav when checkbox is checked */ +input[type="checkbox"]:checked ~ nav { opacity: 1; z-index: 1; } </code></pre> + <p>It might not look like much, but you now have a fully functional menu toggle - <strong>made with pure CSS</strong>! </p> -<h2>With Great Power...</h2> -<p>Although this design is very simple to implement, please remember to use these types of menus wisely. Just because you <em>can</em> do something, doesn't always mean you <em>should</em>.</p> + +<h2 id="with-great-power">With Great Power…</h2> + +<p>Although this design is very simple to implement, please remember to use these types of menus wisely. Just because you <em>can</em> do something, doesn’t always mean you <em>should</em>.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/mini-interactive-keyboard-with-pure-css/index.html b/build/mini-interactive-keyboard-with-pure-css/index.html index f9c83ec..d52d775 100644 --- a/build/mini-interactive-keyboard-with-pure-css/index.html +++ b/build/mini-interactive-keyboard-with-pure-css/index.html @@ -1,62 +1,62 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Mini Interactive Keyboard with Pure CSS</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Mini Interactive Keyboard with Pure CSS</h1> +<h1 id="mini-interactive-keyboard-with-pure-css">Mini Interactive Keyboard with Pure CSS</h1> + <p>2020-05-13</p> -<p>Lately, I've become obsessed with trying to see what I can create using only HTML and CSS (besides websites of course). Since playing with the concept of <a href="https://uglyduck.ca/fake-3d-elements-with-css/">faking 3D elements</a>, I wanted to circle back around to an older CodePen I created: a mini, interactive undo keyboard.</p> -<h2>See it in action</h2> -<p>Below you can view a live demo of the mini keyboard itself. This demo is nothing special, but takes design inspiration from Apple's magic keyboards (if that wasn't already obvious).</p> + +<p>Lately, I’ve become obsessed with trying to see what I can create using only HTML and CSS (besides websites of course). Since playing with the concept of <a href="https://uglyduck.ca/fake-3d-elements-with-css/">faking 3D elements</a>, I wanted to circle back around to an older CodePen I created: a mini, interactive undo keyboard.</p> + +<h2 id="see-it-in-action">See it in action</h2> + +<p>Below you can view a live demo of the mini keyboard itself. This demo is nothing special, but takes design inspiration from Apple’s magic keyboards (if that wasn’t already obvious).</p> + <p><img src="/public/images/undo-keyboard.png" alt="Undo keyboard with two buttons to click" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/PadQMP">Live CodePen Example</a></p> -<p>So now that we have seen what we plan to build, let's break down the process of creating this stupid, fun project!</p> -<h2>The HTML</h2> + +<p>So now that we have seen what we plan to build, let’s break down the process of creating this stupid, fun project!</p> + +<h2 id="the-html">The HTML</h2> + <p>The core skeleton of this project is very simple, since the keyboard consists of only 2 interactive buttons on top of a basic base element: </p> + <ul> -<li>Keyboard base</li> -<li>Command button</li> -<li>'Z' letter button</li> +<li><p>Keyboard base</p></li> +<li><p>Command button</p></li> +<li><p>‘Z’ letter button</p></li> </ul> -<pre><code><!-- This is keyboard main base --> -<div class="base"> - <!-- Command Button --> - <button class="command"> - <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg> - <span>command</span> - </button> +<h2 id="the-css">The CSS</h2> - <!-- "Z" Letter Button --> - <button class="z"> - <span>Z</span> - </button> +<p>Here is where all the magic happens. Let’s break these elements into their own sections, starting with the <strong>base styling</strong>:</p> -</div> -</code></pre> -<h2>The CSS</h2> -<p>Here is where all the magic happens. Let's break these elements into their own sections, starting with the <strong>base styling</strong>:</p> -<pre><code>/* Custom typeface */ -@import url("https://fonts.googleapis.com/css?family=Muli"); +<pre><code>/* Custom typeface */ +@import url("https://fonts.googleapis.com/css?family=Muli"); -/* Basic layout styling */ +/* Basic layout styling */ body { background: #d2dcff; margin: 80px 0 40px; } </code></pre> + <p>We then tackle the basic <strong>keyboard base</strong> element:</p> + <pre><code>.base { background: linear-gradient(180deg, #eee 0%, #d8d8d8 100%); border-radius: 20px; @@ -68,11 +68,11 @@ position: relative; width: 620px; } -/* This pseudo element is used for more realistic drop-shadows */ +/* This pseudo element is used for more realistic drop-shadows */ .base:after { bottom: 0; box-shadow: 0 10px 80px rgba(0,0,0,0.5); -content: ''; +content: ''; height: 50px; left: 7.5%; position: absolute; @@ -80,7 +80,9 @@ width: 85%; z-index: -1; } </code></pre> + <p>Next, we target all shared styles between the <strong>2 keyboard buttons</strong> to avoid repeating ourselves later on:</p> + <pre><code>.command, .z { -webkit-appearance: none; background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%); @@ -98,17 +100,19 @@ z-index: -1; } .command span, .z span { - font-family: 'Muli', 'Helvetica', sans-serif; + font-family: 'Muli', 'Helvetica', sans-serif; } -/* Styling when pressed */ +/* Styling when pressed */ .command:active, .z:active { box-shadow: inset 0 10px 10px rgba(0,0,0,0.2), inset 0 10px 30px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.6); margin: 25px 0 0 20px; } </code></pre> + <p>All that remains is to add the custom styling for each independent button:</p> -<pre><code>/* Custom Command styling */ + +<pre><code>/* Custom Command styling */ .command svg { height: 60px; right: 15px; @@ -126,7 +130,7 @@ z-index: -1; width: 100%; } -/* Custom "Z" Letter styling */ +/* Custom "Z" Letter styling */ .z { width: 260px; } @@ -135,7 +139,9 @@ z-index: -1; font-size: 150px; } </code></pre> -<h2>Taking it further</h2> + +<h2 id="taking-it-further">Taking it further</h2> + <p>You could easily improve upon this concept by rendering an entire interactive keyboard, if you so desired. But this is maybe something I would tackle at a later date when I have a little more free time 😉 For now, a simple mini undo keyboard is fun enough to play with.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/minimal-css-menu/index.html b/build/minimal-css-menu/index.html index 57ddc3c..8e44de5 100644 --- a/build/minimal-css-menu/index.html +++ b/build/minimal-css-menu/index.html @@ -1,62 +1,74 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Minimal CSS: Dropdown Menu</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Minimal CSS: Dropdown Menu</h1> +<h1 id="minimal-css-dropdown-menu">Minimal CSS: Dropdown Menu</h1> + <p>2019-04-26</p> -<p>I love the idea of stripping away as much CSS as possible, while still maintaining the original UI concept. Let's build out a demo example with a simple menu dropdown element.</p> + +<p>I love the idea of stripping away as much CSS as possible, while still maintaining the original UI concept. Let’s build out a demo example with a simple menu dropdown element.</p> + <p>Interesting facts about our final CSS menu:</p> + <ul> <li>Total weight 121 bytes minified! (not including any resets etc.)</li> <li>No complex HTML structures</li> <li>Accessibility support</li> </ul> -<p>Now to see the final code in all it's glory:</p> -<h3>HTML</h3> -<pre><code><nav> - <ul> - <li><a href="">Home</a></li> - <li><a href="">About</a></li> - <li><a href="">Services</a> - <ul> - <li><a href="">Design</a></li> - <li><a href="">Development</a></li> - <li><a href="">Custom Pizzas</a></li> - </ul> - </li> - <li><a href="">Contact</a></li> - </ul> -</nav> + +<p>Now to see the final code in all it’s glory:</p> + +<h3 id="html">HTML</h3> + +<pre><code><nav> + <ul> + <li><a href="">Home</a></li> + <li><a href="">About</a></li> + <li><a href="">Services</a> + <ul> + <li><a href="">Design</a></li> + <li><a href="">Development</a></li> + <li><a href="">Custom Pizzas</a></li> + </ul> + </li> + <li><a href="">Contact</a></li> + </ul> +</nav> </code></pre> -<h3>CSS</h3> -<pre><code>/* resets - optional */ + +<h3 id="css">CSS</h3> + +<pre><code>/* resets - optional */ ul { list-style: none; padding: 0; } ul li { display: inline-block; position: relative; } -/* minimal dropdown CSS */ -ul li > ul { +/* minimal dropdown CSS */ +ul li > ul { left: -9999px; position: absolute; visibility: hidden; } -ul li:hover > ul, ul li:focus-within > ul { +ul li:hover > ul, ul li:focus-within > ul { left: 0; visibility: visible; } </code></pre> -<h2>Live demo on CodePen</h2> + +<h2 id="live-demo-on-codepen">Live demo on CodePen</h2> + <p>Feel free to check out the live demo on CodePen <a href="https://codepen.io/bradleytaunt/pen/MRLevy">here</a>.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/minor-website-changes/index.html b/build/minor-website-changes/index.html index 5e550a7..8a1e6d9 100644 --- a/build/minor-website-changes/index.html +++ b/build/minor-website-changes/index.html @@ -1,48 +1,74 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Using a New Domain and Switching Static Hosts</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Using a New Domain and Switching Static Hosts</h1> +<h1 id="using-a-new-domain-and-switching-static-hosts">Using a New Domain and Switching Static Hosts</h1> + <p>2021-11-25</p> -<p>As you can most likely tell by looking at your browser's URL - I've swapped over to a new domain for my personal website: <a href="https://tdarb.org">tdarb.org</a>. I'm a fickle person and this is a random change - but it is one I've been planning to do for some time.</p> -<p>Let me give some minor background information and then get into the changes...</p> -<h2>What about Ugly Duck?</h2> -<p>I had originally used the <a href="https://uglyduck.ca">uglyduck.ca</a> domain for this personal blog as a <em>loosely</em> based reference to the "ugly duckling" story. This was based on the fact that I <em>mainly</em> focus on CSS and making the web more visually appealing - or beautiful, if you will - so the comparison to an ugly duckling becoming a swan made sense in my oddball mind.</p> + +<p>As you can most likely tell by looking at your browser’s URL - I’ve swapped over to a new domain for my personal website: <a href="https://tdarb.org">tdarb.org</a>. I’m a fickle person and this is a random change - but it is one I’ve been planning to do for some time.</p> + +<p>Let me give some minor background information and then get into the changes…</p> + +<h2 id="what-about-ugly-duck">What about Ugly Duck?</h2> + +<p>I had originally used the <a href="https://uglyduck.ca">uglyduck.ca</a> domain for this personal blog as a <em>loosely</em> based reference to the “ugly duckling” story. This was based on the fact that I <em>mainly</em> focus on CSS and making the web more visually appealing - or beautiful, if you will - so the comparison to an ugly duckling becoming a swan made sense in my oddball mind.</p> + <p>But overtime I came to somewhat dislike[^1] it and set out to change it.</p> -<h2>So what the heck is "tdarb"?</h2> + +<h2 id="so-what-the-heck-is-tdarb">So what the heck is “tdarb”?</h2> + <p>I explain this on my updated <a href="/about">about page</a> but I will mention it again here:</p> + <p><strong>tdarb</strong>[^2] is simply my first name and last initial spelt backwards – Brad T. Mind blowing, right?</p> -<p>I've switched over to this naming convention to avoid having such a random "phrase" domain name while at the same time having a little more fun than just <em>mylegalname.com</em>. I also am a sucker for <code>.org</code> TLDs (although I don't know why).</p> -<p>I'm sure some readers will prefer it, some will be indifferent and others will hate it. Either way, it's my personal site and I'll do as I please!</p> -<h2>Breaking My Website for a Day and Fixing Potential Link Rot</h2> + +<p>I’ve switched over to this naming convention to avoid having such a random “phrase” domain name while at the same time having a little more fun than just <em>mylegalname.com</em>. I also am a sucker for <code>.org</code> TLDs (although I don’t know why).</p> + +<p>I’m sure some readers will prefer it, some will be indifferent and others will hate it. Either way, it’s my personal site and I’ll do as I please!</p> + +<h2 id="breaking-my-website-for-a-day-and-fixing-potential-link-rot">Breaking My Website for a Day and Fixing Potential Link Rot</h2> + <p>The transition I made yesterday from <a href="https://uglyduck.ca">uglyduck.ca</a> to <a href="https://tdarb.org">tdarb.org</a> was <em>rough</em>. I thought that I could simply launch the identical content on the new domain, test everything, and then simply set a URL redirect from the old domain through Namecheap[^3]. Oh boy, was I wrong!</p> -<p>The bulk of my evening was spent figuring out why the redirect wouldn't propagate across all networks and why multiple forwards were occurring. In the end, I just tossed <a href="https://uglyduck.ca">uglyduck.ca</a> back up on Netlify and set global redirect rules in their handy-dandy <code>_redirects</code> file. (I will write-up a small post about this soon to help others). After a few minutes everything was working perfectly fine and best of all - no broken links or potential link rot! All thanks to the <code>:splat</code> parameter in the redirects.</p> -<p>As for my RSS feed, everything <em>should</em> forward correctly? I state that as a question since I can't confirm this 100% and RSS feeds are not my expertise. If I broke this for any of you, I apologize. I will pray to the internet gods for your forgiveness...</p> -<h2>From Github to Sourcehut</h2> -<p>That's right, I've switched this static site's hosting over to <a href="https://srht.site">sourcehut pages</a> and couldn't be happier. My reasons for switching:</p> + +<p>The bulk of my evening was spent figuring out why the redirect wouldn’t propagate across all networks and why multiple forwards were occurring. In the end, I just tossed <a href="https://uglyduck.ca">uglyduck.ca</a> back up on Netlify and set global redirect rules in their handy-dandy <code>_redirects</code> file. (I will write-up a small post about this soon to help others). After a few minutes everything was working perfectly fine and best of all - no broken links or potential link rot! All thanks to the <code>:splat</code> parameter in the redirects.</p> + +<p>As for my RSS feed, everything <em>should</em> forward correctly? I state that as a question since I can’t confirm this 100% and RSS feeds are not my expertise. If I broke this for any of you, I apologize. I will pray to the internet gods for your forgiveness…</p> + +<h2 id="from-github-to-sourcehut">From Github to Sourcehut</h2> + +<p>That’s right, I’ve switched this static site’s hosting over to <a href="https://srht.site">sourcehut pages</a> and couldn’t be happier. My reasons for switching:</p> + <ol> -<li>I'm happy to pay and support the ongoing work at sourcehut (open source alternatives to Netlify, Github, etc. is important)</li> -<li>I've been wanting to become more comfortable with the sourcehut ecosystem - there might be projects in the future I would like to help with on that platform and it helps if you know how to use it :P</li> +<li>I’m happy to pay and support the ongoing work at sourcehut (open source alternatives to Netlify, Github, etc. is important)</li> +<li>I’ve been wanting to become more comfortable with the sourcehut ecosystem - there might be projects in the future I would like to help with on that platform and it helps if you know how to use it :P</li> <li>Sourcehut pages are fast - I mean <em>really</em> fast</li> </ol> -<p>It <em>was</em> slightly confusing for my ape brain to figure out the setup, but I got there eventually. I plan to do a detailed step-by-step tutorial to help those like me who may find it a little daunting. It's well worth the minor effort.</p> -<h2>The Lifespan of uglyduck.ca</h2> + +<p>It <em>was</em> slightly confusing for my ape brain to figure out the setup, but I got there eventually. I plan to do a detailed step-by-step tutorial to help those like me who may find it a little daunting. It’s well worth the minor effort.</p> + +<h2 id="the-lifespan-of-uglyduck.ca">The Lifespan of uglyduck.ca</h2> + <p>I still have ownership of the old domain for almost another full year. I feel like that gives users enough time to adjust and become accustomed to the new one. My plan is to let the domain die entirely when it goes up for renewal but who knows - I might very well keep it going if the mood strikes me.</p> -<h2>That's All Folks!</h2> -<p>I don't have much else to report besides having made minor tweaks to this website design (yet again) and I have also finally added a picture of <a href="/uses">workstation on the "Things I Use" page</a>. That's it.</p> -<h2>Refs</h2> + +<h2 id="thats-all-folks">That’s All Folks!</h2> + +<p>I don’t have much else to report besides having made minor tweaks to this website design (yet again) and I have also finally added a picture of <a href="/uses">workstation on the “Things I Use” page</a>. That’s it.</p> + +<h2 id="refs">Refs</h2> + <ol> <li>not <em>hate</em> - just discontent</li> <li>pronounced tee-darb</li> diff --git a/build/mongodb-arch/index.html b/build/mongodb-arch/index.html index 2b4bff8..162a5a8 100644 --- a/build/mongodb-arch/index.html +++ b/build/mongodb-arch/index.html @@ -1,43 +1,60 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Installing Older Versions of MongoDB on Arch Linux</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Installing Older Versions of MongoDB on Arch Linux</h1> +<h1 id="installing-older-versions-of-mongodb-on-arch-linux">Installing Older Versions of MongoDB on Arch Linux</h1> + <p>2023-09-11</p> -<p>I've recently been using Arch Linux for my main work environment on my ThinkPad X260. It's been great. As someone who is constantly drawn to minimalist operating systems such as Alpine or OpenBSD, it's nice to use something like Arch that boasts that same minimalist approach but with greater documentation/support.</p> -<p>Another major reason for the switch was the need to run older versions of "services" locally. Most people would simply suggest using Docker or vmm, but I personally run projects in self-contained, personalized directories on my system itself. I am aware of the irony in that statement... but that's just my personal preference.</p> + +<p>I’ve recently been using Arch Linux for my main work environment on my ThinkPad X260. It’s been great. As someone who is constantly drawn to minimalist operating systems such as Alpine or OpenBSD, it’s nice to use something like Arch that boasts that same minimalist approach but with greater documentation/support.</p> + +<p>Another major reason for the switch was the need to run older versions of “services” locally. Most people would simply suggest using Docker or vmm, but I personally run projects in self-contained, personalized directories on my system itself. I am aware of the irony in that statement… but that’s just my personal preference.</p> + <p>So I thought I would share my process of setting up an older version of MongoDB (3.4 to be precise) on Arch Linux.</p> -<h2>AUR to the Rescue</h2> + +<h2 id="aur-to-the-rescue">AUR to the Rescue</h2> + <p>You will need to target the specific version of MongoDB using the very awesome AUR packages:</p> + <pre><code>yay -S mongodb34-bin </code></pre> -<p>Follow the instructions and you'll be good to go. Don't forget to create the <code>/data/db</code> directory and give it proper permissions:</p> -<pre><code>mkdir -p /data/db/ -chmod -R 777 /date/db + +<p>Follow the instructions and you’ll be good to go. Don’t forget to create the <code>/data/db</code> directory and give it proper permissions:</p> + +<pre><code>mkdir -p /data/db/ +chmod -R 777 /date/db </code></pre> -<h2>What About My "Tools"?</h2> -<p>If you plan to use MongoDB, then you most likely want to utilize the core database tools (restore, dump, etc). The problem is you can't use the default <code>mongodb-tools</code> package when trying to work with older versions of MongoDB itself. The package will complain about conflicts and ask you to override your existing version. This is <em>not</em> what we want.</p> -<p>So, you'll have to build from source locally:</p> -<pre><code>git clone https://github.com/mongodb/mongo-tools + +<h2 id="what-about-my-tools">What About My “Tools”?</h2> + +<p>If you plan to use MongoDB, then you most likely want to utilize the core database tools (restore, dump, etc). The problem is you can’t use the default <code>mongodb-tools</code> package when trying to work with older versions of MongoDB itself. The package will complain about conflicts and ask you to override your existing version. This is <em>not</em> what we want.</p> + +<p>So, you’ll have to build from source locally:</p> + +<pre><code>git clone https://github.com/mongodb/mongo-tools cd mongodb-tools -./make build +./make build </code></pre> -<p>Then you'll need to copy the built executables into the proper directory in order to use them from the terminal:</p> -<pre><code>cp bin/* /usr/local/bin/ + +<p>Then you’ll need to copy the built executables into the proper directory in order to use them from the terminal:</p> + +<pre><code>cp bin/* /usr/local/bin/ </code></pre> -<p>And that's it! Now you can run <code>mongod</code> directly or use <code>systemctl</code> to enable it by default. Hopefully this helps anyone else curious about running older (or even outdated!) versions of MongoDB.</p> + +<p>And that’s it! Now you can run <code>mongod</code> directly or use <code>systemctl</code> to enable it by default. Hopefully this helps anyone else curious about running older (or even outdated!) versions of MongoDB.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/monitor/index.html b/build/monitor/index.html index d41cfaf..405ce92 100644 --- a/build/monitor/index.html +++ b/build/monitor/index.html @@ -1,62 +1,82 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Why I Stopped Using an External Monitor</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Why I Stopped Using an External Monitor</h1> +<h1 id="why-i-stopped-using-an-external-monitor">Why I Stopped Using an External Monitor</h1> + <p>2023-03-03</p> -<p>For the longest time I've been using a Samsung 27" UHD monitor as my main display. This monitor was connected to my ThinkPad X260 (in clamshell mode) through the official Lenovo dock. It wasn't a bad setup, but I have since changed my ways.</p> -<p>Instead, I now <em>only</em> use the X260's panel as my main display. Let me explain my reasoning...</p> -<h2>The Switch to Suckless</h2> -<p>Over the past year I switched away from a traditional desktop environment to a window manager - <a href="https://dwm.suckless.org/">dwm</a> to be specific. This also involved changing most of my daily software programs to utilize the full suckless "suite". In doing so, the shift away from floating windows and virtualized desktops happened quickly.</p> + +<p>For the longest time I’ve been using a Samsung 27” UHD monitor as my main display. This monitor was connected to my ThinkPad X260 (in clamshell mode) through the official Lenovo dock. It wasn’t a bad setup, but I have since changed my ways.</p> + +<p>Instead, I now <em>only</em> use the X260’s panel as my main display. Let me explain my reasoning…</p> + +<h2 id="the-switch-to-suckless">The Switch to Suckless</h2> + +<p>Over the past year I switched away from a traditional desktop environment to a window manager - <a href="https://dwm.suckless.org/">dwm</a> to be specific. This also involved changing most of my daily software programs to utilize the full suckless “suite”. In doing so, the shift away from floating windows and virtualized desktops happened quickly.</p> + <p>I continued to use my UHD monitor with this new environment but slowly started running into minor (yet still inconvenient) roadblocks:</p> + <ul> -<li>Tiled mode was not the most optimized for such a large monitor. I found myself defaulting into "floating" mode which defeats the purpose of a WM.</li> +<li>Tiled mode was not the most optimized for such a large monitor. I found myself defaulting into “floating” mode which defeats the purpose of a WM.</li> <li>The screen was almost <em>too</em> large - making content placed on the far edges of the screen difficult to view at a glance.</li> <li>I stopped using tags, since I ended up piling applications on top of one another in a single view. Again - defeating the point of a WM.</li> </ul> -<p>All of these issues were close to making me ditch the external monitor altogether, but it was my day-to-day job that struck the final blow...</p> -<h2>Designing for Everyday Users</h2> -<p>As a UX/UI front-end designer by trade, my job requires me to create and tweak interfaces that essentially go <em>unnoticed</em> by the end-users. If you finish a task you sought out to complete without even thinking about <em>how</em> you did it - then I succeeded at my job. The problem is, we designers and developers tend to forget the constraints a majority of our users experience. In this case - screen resolution.</p> + +<p>All of these issues were close to making me ditch the external monitor altogether, but it was my day-to-day job that struck the final blow…</p> + +<h2 id="designing-for-everyday-users">Designing for Everyday Users</h2> + +<p>As a UX/UI front-end designer by trade, my job requires me to create and tweak interfaces that essentially go <em>unnoticed</em> by the end-users. If you finish a task you sought out to complete without even thinking about <em>how</em> you did it - then I succeeded at my job. The problem is, we designers and developers tend to forget the constraints a majority of our users experience. In this case - screen resolution.</p> + <p><a href="https://www.browserstack.com/guide/ideal-screen-sizes-for-responsive-design">A study performed by BrowserStack via statcounter (2022)</a> shows the worldwide market share based on device type:</p> + <ul> <li>58.33% mobile</li> <li>39.65% desktop</li> <li>2.02% tablet</li> </ul> + <p>The mobile aspect is certainly important, but we are focusing on the desktop data. Of that total the top two screen resolutions are:</p> + <ul> <li>1920×1080 (9.94%)</li> <li>1366×768 (6.22%)</li> </ul> -<p>That is a fairly significant chunk of desktop users. Although almost 10% have access to screens set at <code>1920x1080</code>, I found the amount of those stuck at <code>1366x768</code> to be quite shocking. Here I was, developing large-set interfaces on an UHD 4K monitor while a large portion of my end-users would never benefit from those "pixel-perfect" designs. </p> + +<p>That is a fairly significant chunk of desktop users. Although almost 10% have access to screens set at <code>1920x1080</code>, I found the amount of those stuck at <code>1366x768</code> to be quite shocking. Here I was, developing large-set interfaces on an UHD 4K monitor while a large portion of my end-users would never benefit from those “pixel-perfect” designs. </p> + <p>Hell, some of these users were being shown the <em>tablet</em>-based view of the applications since our breakpoints were so ridiculously large. Yikes.</p> -<p>So, I said screw it and retired the external monitor. Now my X260 is propped up and proudly showing off its 1366x768 display. It only took a day or so to adapt to this new setup and I don't think I could go back to another massive display.</p> + +<p>So, I said screw it and retired the external monitor. Now my X260 is propped up and proudly showing off its 1366x768 display. It only took a day or so to adapt to this new setup and I don’t think I could go back to another massive display.</p> + <p>Here are some benefits at a glance:</p> + <ul> -<li>I no longer have to worry about "context switching" if I decide to un-dock my laptop and work somewhere mobile. The desktop experience remains intact.</li> +<li>I no longer have to worry about “context switching” if I decide to un-dock my laptop and work somewhere mobile. The desktop experience remains intact.</li> <li>Working inside <code>dwm</code> is a much cleaner experience. I mostly operate single applications within their own confined tag - with some exceptions of course.</li> -<li>I'm able to instantly understand frustrations of everyday users while developing new features or tweaking existing UIs. Being able to advocate for our end-users by using legit use cases is extremely helpful. (Removes the "design by gut-feeling" mistakes)</li> +<li>I’m able to instantly understand frustrations of everyday users while developing new features or tweaking existing UIs. Being able to advocate for our end-users by using legit use cases is extremely helpful. (Removes the “design by gut-feeling” mistakes)</li> </ul> -<p><figure> - <img src="/public/images/dither-desktop.png" alt="My current desktop setup with the X260 ThinkPad"> - <figcaption>My ThinkPad X260, along with my MageGee wired mechanical keyboard and Logitech Pebble mouse. Small notebook and pen for note-taking.</figcaption> -</figure></p> -<h2>A Little Extreme</h2> -<p>Yes, I am aware that I could simply keep the UHD monitor and perform my work within a constrained portion of the screen. The problem that remains is "quality". Most 1366x768 panels are not even close to the level of hi-res found on most 4K monitors. By using such a display I would be cheating myself of the standard experience a good portion of my end-users endure. </p> -<p>I want to see the fuzzy text, slightly blurred imagery and muted button shadows. I want to see these things because that's how some <em>users</em> will experience it.</p> -<p>Maybe that's extreme - but it works for me.</p> + +<h2 id="a-little-extreme">A Little Extreme</h2> + +<p>Yes, I am aware that I could simply keep the UHD monitor and perform my work within a constrained portion of the screen. The problem that remains is “quality”. Most 1366x768 panels are not even close to the level of hi-res found on most 4K monitors. By using such a display I would be cheating myself of the standard experience a good portion of my end-users endure. </p> + +<p>I want to see the fuzzy text, slightly blurred imagery and muted button shadows. I want to see these things because that’s how some <em>users</em> will experience it.</p> + +<p>Maybe that’s extreme - but it works for me.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/multiple-css-background-images/index.html b/build/multiple-css-background-images/index.html index fcf7539..5c1e47a 100644 --- a/build/multiple-css-background-images/index.html +++ b/build/multiple-css-background-images/index.html @@ -1,28 +1,34 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Using Multiple CSS Background Images</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Using Multiple CSS Background Images</h1> +<h1 id="using-multiple-css-background-images">Using Multiple CSS Background Images</h1> + <p>2018-09-28</p> -<p>It isn't something developers have a need to do very often, but you <em>can</em> set multiple background images on a single element.</p> + +<p>It isn’t something developers have a need to do very often, but you <em>can</em> set multiple background images on a single element.</p> + <p>Example:</p> + <pre><code>.element { - background: url('image_path') center repeat, linear-gradient(transparent 0%, #000 100%) no-repeat; + background: url('image_path') center repeat, linear-gradient(transparent 0%, #000 100%) no-repeat; } </code></pre> -<p>What can you do with this? It's only limited by your imagination, but I'm personally a fan of always using as few elements as possible when working on a project.</p> + +<p>What can you do with this? It’s only limited by your imagination, but I’m personally a fan of always using as few elements as possible when working on a project.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/my-pi-desktop/index.html b/build/my-pi-desktop/index.html index f41278a..cc81458 100644 --- a/build/my-pi-desktop/index.html +++ b/build/my-pi-desktop/index.html @@ -1,61 +1,72 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>My Raspberry Pi Desktop</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>My Raspberry Pi Desktop</h1> +<h1 id="my-raspberry-pi-desktop">My Raspberry Pi Desktop</h1> + <p>2020-09-02</p> -<p>I use a Raspberry Pi 4 as my personal daily driver and it's pretty great. I know these types of devices tend to be used for smaller pet-projects or fun experiments, but I thought I would share my experience using one as my main computer. Hopefully this can be a solid guide to help others who might be interested in creating a similar setup.</p> + +<p>I use a Raspberry Pi 4 as my personal daily driver and it’s pretty great. I know these types of devices tend to be used for smaller pet-projects or fun experiments, but I thought I would share my experience using one as my main computer. Hopefully this can be a solid guide to help others who might be interested in creating a similar setup.</p> + <p>My desktop Pi working away on a regular morning:</p> -<p><figure> - <img src="/public/images/rpi-desktop.webp" alt="Raspberry Pi 4 desktop"> - <figcaption>The final Raspberry Pi desktop in all it's glory. (<a href="/public/images/rpi-desktop.webp">direct link to image</a>)</figcaption> -</figure></p> -<h2>Table of Contents</h2> + +<h2 id="table-of-contents">Table of Contents</h2> + <ol> <li><a href="#use-case">My Use Case</a></li> <li><a href="#hardware">The Hardware</a></li> <li><a href="#software">The Software</a></li> -<li><a href="#stats">Performance & Stats</a></li> +<li><a href="#stats">Performance & Stats</a></li> </ol> -<p><h2 id="use-case">My Use Case</h2></p> -<p>I'm a web designer and developer by trade. Therefore, I require a decent amount of functionality from my computer - more than just simple web browsing and document editing. When I first set out testing if the RPi4 <em>could</em> become my main device, I was surprised at how capable the hardware / software was at running all my required applications. My workload comprises of:</p> + +<p>I’m a web designer and developer by trade. Therefore, I require a decent amount of functionality from my computer - more than just simple web browsing and document editing. When I first set out testing if the RPi4 <em>could</em> become my main device, I was surprised at how capable the hardware / software was at running all my required applications. My workload comprises of:</p> + <ul> -<li>Using Github/Gitlab to pull/push repos, open PRs, etc</li> +<li>Using Github/Gitlab to pull/push repos, open PRs, etc</li> <li>Run SSG (Jekyll mostly) locally for testing</li> <li>Run multiple WordPress instances locally</li> <li>Edit design files (Photoshop, Illustrator, direct SVGs)</li> -<li>Simple web chat / email</li> +<li>Simple web chat / email</li> </ul> -<p>Basic stuff, but I was originally doubtful of the RPi4 to be able to handle it all smoothly. I'm happy to say I was wrong.</p> -<p><h2 id="hardware">The Hardware</h2></p> -<p>The following hardware list is what I use specifically for my intended use case. I'm also a sucker for having cool looking SBC builds. By no means is this the "best setup" for everyone - I'm sure other combinations of gear might better suit your own personal needs.</p> -<blockquote><p><strong>Note</strong>: products in the hardware section are Amazon affiliate links</p> + +<p>Basic stuff, but I was originally doubtful of the RPi4 to be able to handle it all smoothly. I’m happy to say I was wrong.</p> + +<p>The following hardware list is what I use specifically for my intended use case. I’m also a sucker for having cool looking SBC builds. By no means is this the “best setup” for everyone - I’m sure other combinations of gear might better suit your own personal needs.</p> + +<blockquote> +<p><strong>Note</strong>: products in the hardware section are Amazon affiliate links</p> </blockquote> + <ul> -<li><a href="https://amzn.to/33BAVn2" target="_blank">Raspberry Pi 4</a></li> -<li><a href="https://amzn.to/3nu55Aq" target="_blank">X857 V1.0 mSATA SSD Shield Expansion Board</a> (I'm using the X856)</li> -<li><a href="https://amzn.to/3jEgWd5" target="_blank">128GB mSATA SSD</a></li> -<li><a href="https://amzn.to/3nqeJUK" target="_blank">Acrylic Case with Heatsinks & Fan</a></li> -<li><a href="https://amzn.to/34w60I1" target="_blank">Raspberry Pi Keyboard & Mouse</a></li> -<li><a href="https://amzn.to/3jDKLdT" target="_blank">21.5" Acer Monitor</a></li> +<li>Raspberry Pi 4</li> +<li>X857 V1.0 mSATA SSD Shield Expansion Board (I’m using the X856)</li> +<li>128GB mSATA SSD</li> +<li>Acrylic Case with Heatsinks & Fan</li> +<li>Raspberry Pi Keyboard & Mouse</li> +<li>21.5” Acer Monitor</li> </ul> -<p><h2 id="software">The Software</h2></p> -<p>The 32-bit version of Raspberry Pi OS ('Debian Buster' at the time of writing) is my OS of choice. Stable, reliable, and officially supported by the RPi community. It does the job.</p> + +<p>The 32-bit version of Raspberry Pi OS (‘Debian Buster’ at the time of writing) is my OS of choice. Stable, reliable, and officially supported by the RPi community. It does the job.</p> + <p>The Pi has been overclocked to 2GHz in order to squeeze just a <em>little</em> extra out of the hardware. This has caused zero issues.</p> -<p>I'm also booting directly from the mSATA SSD (via USB booting) instead of relying on a slower microSD card. You can find tons of tutorials online on how to do the same, but I would recommend this one: <a href="https://www.tomshardware.com/how-to/boot-raspberry-pi-4-usb">How to Boot Raspberry Pi 4 From a USB SSD or Flash Drive</a></p> -<p>After that, I simply installed my required apps / configs (where applicable):</p> + +<p>I’m also booting directly from the mSATA SSD (via USB booting) instead of relying on a slower microSD card. You can find tons of tutorials online on how to do the same, but I would recommend this one: <a href="https://www.tomshardware.com/how-to/boot-raspberry-pi-4-usb">How to Boot Raspberry Pi 4 From a USB SSD or Flash Drive</a></p> + +<p>After that, I simply installed my required apps / configs (where applicable):</p> + <ul> <li>Chromium (<em>preinstalled</em>)</li> <li>Firefox ESR</li> @@ -65,39 +76,55 @@ <li>Libre Office Suite</li> <li>Evolution</li> <li>Figma (Web - no install needed)</li> -<li>Apache2 / MySQL</li> +<li>Apache2 / MySQL</li> <li>Blueman (helpful GUI for bluetooth)</li> </ul> + <p>What my plain desktop looks like:</p> -<p><figure> - <img src="/public/images/rpi-desktop-screenshot.webp" alt="Raspberry Pi 4 desktop and wallpaper"> - <figcaption>My very basic Raspberry Pi desktop/wallpaper view. (<a href="/public/images/rpi-desktop-screenshot.webp">direct link to image</a>)</figcaption> -</figure></p> -<p><h2 id="stats">Performance & Stats</h2></p> -<p>Using this build day-to-day, I can honestly say I don't hit any hiccups or lag at all. Multiple applications and WordPress instances are running in the background, while 10-15 tabs are open in the Chromium browser. The little Pi just chugs along without breaking a sweat.</p> -<p>My average CPU temperature sits around 51&deg; (with heatsinks & fan active) while CPU usage never really cranks past 90% during even "intensive" processes.</p> -<p>Since <em>actual</em> data speaks louder than anecdotal chit-chat, I performed a very simple read/write test on my mSATA SSD.</p> + +<p>Using this build day-to-day, I can honestly say I don’t hit any hiccups or lag at all. Multiple applications and WordPress instances are running in the background, while 10-15 tabs are open in the Chromium browser. The little Pi just chugs along without breaking a sweat.</p> + +<p>My average CPU temperature sits around 51° (with heatsinks & fan active) while CPU usage never really cranks past 90% during even “intensive” processes.</p> + +<p>Since <em>actual</em> data speaks louder than anecdotal chit-chat, I performed a very simple read/write test on my mSATA SSD.</p> + <p>First, clear the cache to avoid conflicting data:</p> -<pre><code>sync; echo 3 | sudo tee /proc/sys/vm/drop_caches + +<pre><code>sync; echo 3 | sudo tee /proc/sys/vm/drop_caches </code></pre> -<h3>Write</h3> + +<h3 id="write">Write</h3> + <p>Write script run:</p> -<pre><code>dd if=/dev/zero of=~/test.tmp bs=500K count=1024 + +<pre><code>dd if=/dev/zero of=~/test.tmp bs=500K count=1024 </code></pre> + <p>Write output:</p> -<pre><code>524288000 bytes (524 MB, 500 MiB) copied, 1.95478 s, 268 MB/s + +<pre><code>524288000 bytes (524 MB, 500 MiB) copied, 1.95478 s, 268 MB/s </code></pre> -<h3>Read</h3> + +<h3 id="read">Read</h3> + <p>Read script:</p> -<pre><code>dd if=~/test.tmp of=/dev/null bs=500K count=1024 + +<pre><code>dd if=~/test.tmp of=/dev/null bs=500K count=1024 </code></pre> + <p>Read output:</p> -<pre><code>524288000 bytes (524 MB, 500 MiB) copied, 0.770993 s, 680 MB/s + +<pre><code>524288000 bytes (524 MB, 500 MiB) copied, 0.770993 s, 680 MB/s </code></pre> -<p>This gives a total read/write value of: <strong>268 MB / 680 MB</strong> per second. Compare that to average microSD card speeds floating around <strong>22 MB / 170MB</strong> per second and you can see (and feel) the massive speed difference. Things are just snappier.</p> -<p><strong>Note</strong>: Obviously extremely high-end (read: expensive) microSD cards <em>might</em> hit read/write speeds similar to that of an SSD. The issue is that you are more likely to corrupt or reach end-of-life with a microSD card - hence why I don't recommend them.</p> -<h2>Final Thoughts</h2> -<p>I love that I can use a fairly cheap Raspberry Pi 4 as my main, personal desktop. Of course, some people might roll their eyes at this build and say, "why not just get a cheaper, more powerful laptop off eBay?". To that I would respond: <em>you're missing the point</em>. </p> + +<p>This gives a total read/write value of: <strong>268 MB / 680 MB</strong> per second. Compare that to average microSD card speeds floating around <strong>22 MB / 170MB</strong> per second and you can see (and feel) the massive speed difference. Things are just snappier.</p> + +<p><strong>Note</strong>: Obviously extremely high-end (read: expensive) microSD cards <em>might</em> hit read/write speeds similar to that of an SSD. The issue is that you are more likely to corrupt or reach end-of-life with a microSD card - hence why I don’t recommend them.</p> + +<h2 id="final-thoughts">Final Thoughts</h2> + +<p>I love that I can use a fairly cheap Raspberry Pi 4 as my main, personal desktop. Of course, some people might roll their eyes at this build and say, “why not just get a cheaper, more powerful laptop off eBay?”. To that I would respond: <em>you’re missing the point</em>. </p> + <p>It was fun to put together this simple desktop. The fact that it runs fast and stable enough to be my daily driver is a great bonus. If this build interests you at all, I highly recommend giving it a go.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/my-static-blog-publishing-setup/index.html b/build/my-static-blog-publishing-setup/index.html index e5af89b..cb67f18 100644 --- a/build/my-static-blog-publishing-setup/index.html +++ b/build/my-static-blog-publishing-setup/index.html @@ -1,76 +1,111 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>My Static Blog Publishing Setup and an Apology to RSS Subscribers</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>My Static Blog Publishing Setup and an Apology to RSS Subscribers</h1> +<h1 id="my-static-blog-publishing-setup-and-an-apology-to-rss-subscribers">My Static Blog Publishing Setup and an Apology to RSS Subscribers</h1> + <p>2022-03-21</p> -<p>In case you missed it, this website is now generated with pure HTML & CSS. Although, generated isn't the proper way to describe it anymore. <em>Written</em> is a better description.</p> -<p>No more Markdown files. No more build scripts. No more Jekyll. Clean, simple, static HTML & CSS is my "CMS". More on that in a moment. First, I must apologize.</p> -<h2>I'm Sorry Dear RSS Subscribers</h2> + +<p>In case you missed it, this website is now generated with pure HTML & CSS. Although, generated isn’t the proper way to describe it anymore. <em>Written</em> is a better description.</p> + +<p>No more Markdown files. No more build scripts. No more Jekyll. Clean, simple, static HTML & CSS is my “CMS”. More on that in a moment. First, I must apologize.</p> + +<h2 id="im-sorry-dear-rss-subscribers">I’m Sorry Dear RSS Subscribers</h2> + <p>RSS feeds are tricky things for me personally. I always botch them with a site redesign or a re-structure of my previous posts. Those of you subscribed via RSS were likely bombarded with post spam when I rebuilt this website. Sorry about that - I know how annoying that can be.</p> -<p>Fortunately, that all stops today. Moving forward my RSS feed (Atom) will be edited manually with every new post I write. Each entry will feature the post title, post url, and post date. No summaries or full-inline content will be included (since that would involve a great amount of extra overhead). RSS subs will need to follow the link directly if they are interested in the article itself. I hope this doesn't anger too many readers...</p> + +<p>Fortunately, that all stops today. Moving forward my RSS feed (Atom) will be edited manually with every new post I write. Each entry will feature the post title, post url, and post date. No summaries or full-inline content will be included (since that would involve a great amount of extra overhead). RSS subs will need to follow the link directly if they are interested in the article itself. I hope this doesn’t anger too many readers…</p> + <p>Again, sorry everyone.</p> -<h2>What is this New Blog "System"</h2> -<p>This publishing flow isn't for everyone and is less flexible than pre-existing static site generators (referred to as SSGs moving forward). For me though, it works. I find it more flexible than most SSGs.</p> + +<h2 id="what-is-this-new-blog-system">What is this New Blog “System”</h2> + +<p>This publishing flow isn’t for everyone and is less flexible than pre-existing static site generators (referred to as SSGs moving forward). For me though, it works. I find it more flexible than most SSGs.</p> + <p>There are a couple articles that explain the reasoning behind this system better than I could (plus, why would I repeat the same points?):</p> + <ul> <li><a href="http://john.ankarstrom.se/html/">Writing HTML in HTML</a></li> <li><a href="https://blog.steren.fr/2020/my-stack-will-outlive-yours/">My stack will outlive yours</a></li> </ul> + <p>So, what does my blog-posting system look like?</p> -<h2>Simple Explanation</h2> + +<h2 id="simple-explanation">Simple Explanation</h2> + <ol> -<li>Copy an existing article's <code>HTML</code> file</li> +<li>Copy an existing article’s <code>HTML</code> file</li> <li>Change file name, edit the page title, heading, post date and comment link</li> <li>Write the new article content</li> <li>Make manual new entry in RSS feed</li> <li>Save changes, push to git repo</li> -<li>Sync new file(s) / changes to remote server</li> +<li>Sync new file(s) / changes to remote server</li> </ol> -<p>Pretty simple, eh? Let's break things down into greater detail though...</p> -<h2>Detailed Explanation</h2> -<h4>Text Editor</h4> -<p>I code and write everything exclusively in Sublime Text on my MacBook Air. I know, it's not an open source editor, but I love how incredibly fast and intuitive it is. I used VSCode in the past but ended up requiring far too many plugins to get things setup the way I like it. Sublime Text works best for me even right out of the box. (I do need Emmet and theming changes though).</p> + +<p>Pretty simple, eh? Let’s break things down into greater detail though…</p> + +<h2 id="detailed-explanation">Detailed Explanation</h2> + +<h4 id="text-editor">Text Editor</h4> + +<p>I code and write everything exclusively in Sublime Text on my MacBook Air. I know, it’s not an open source editor, but I love how incredibly fast and intuitive it is. I used VSCode in the past but ended up requiring far too many plugins to get things setup the way I like it. Sublime Text works best for me even right out of the box. (I do need Emmet and theming changes though).</p> + <p>I perform the following for a new article:</p> + <ul> <li>Copy an existing article, ie. <code>blog-post-1.html</code></li> <li>Rename article file name, ie. <code>blog-post-2.html</code></li> <li>Open this newly created file and change: + <ul> <li>page <code>title</code> tag</li> <li>page <code>h1</code> heading and top bar text</li> <li><code>time</code> tag to match publish date</li> <li>comment <code>mailto:</code> link url</li> -</ul> -</li> +</ul></li> <li>Start writing content inside the <code>article</code> section</li> </ul> + <p>Once the article is complete, I add a static entry in my <code>feed.xml</code> and run a crude rsync script. More on that below.</p> -<h4>Git</h4> -<p>Normally I would pull, commit and push directly in my Terminal - but lately I've been enjoying my time using Sublime Merge. I'm a sucker for visually appealing GUI applications and Merge is the perfect balance of simplicity and beauty. I recommend it if you haven't tried it yet.</p> -<h4>Hosting</h4> -<p>This blog is now hosted through NearlyFreeSpeech. I could opt for a free service like Netlify or DigitalOcean Apps but I feel it's important to help support communities that align with my own core beliefs. From their <a href="https://www.nearlyfreespeech.net/about/">about page</a>:</p> -<blockquote><p>NearlyFreeSpeech.NET is about three things: fairness, innovation, and free speech.</p> + +<h4 id="git">Git</h4> + +<p>Normally I would pull, commit and push directly in my Terminal - but lately I’ve been enjoying my time using Sublime Merge. I’m a sucker for visually appealing GUI applications and Merge is the perfect balance of simplicity and beauty. I recommend it if you haven’t tried it yet.</p> + +<h4 id="hosting">Hosting</h4> + +<p>This blog is now hosted through NearlyFreeSpeech. I could opt for a free service like Netlify or DigitalOcean Apps but I feel it’s important to help support communities that align with my own core beliefs. From their <a href="https://www.nearlyfreespeech.net/about/">about page</a>:</p> + +<blockquote> +<p>NearlyFreeSpeech.NET is about three things: fairness, innovation, and free speech.</p> </blockquote> -<p>Hard to argue with those principles. If you're feeling generous, I'd greatly appreciate anyone who considers contributing to <a href="https://www.nearlyfreespeech.net/contribute/tdarb.org">offset this website's hosting costs through NearlyFreeSpeech</a> (code: tdarb). No money is directly handed to me, it pays NFS directly for hosting fees. Donate if you feel like this humble blog of mine has helped you in any way. No pressure!</p> + +<p>Hard to argue with those principles. If you’re feeling generous, I’d greatly appreciate anyone who considers contributing to <a href="https://www.nearlyfreespeech.net/contribute/tdarb.org">offset this website’s hosting costs through NearlyFreeSpeech</a> (code: tdarb). No money is directly handed to me, it pays NFS directly for hosting fees. Donate if you feel like this humble blog of mine has helped you in any way. No pressure!</p> + <p>NFS gives me server access via <code>SSH</code> (and even <code>SFTP</code> if I desire) which makes things simple to sync my local files with production code. This is handled via rsync with a basic <code>deploy.sh</code> script:</p> -<pre><code>rsync -vrzc --exclude 'deploy.sh' --exclude '.git' --delete ./ username@my.remote.nfs.server: + +<pre><code>rsync -vrzc --exclude 'deploy.sh' --exclude '.git' --delete ./ username@my.remote.nfs.server: </code></pre> + <p>The included parameters ensure files with a conflicting checksum are updated on the server, instead of re-syncing all the files every time the script runs. That would be overkill.</p> -<h2>Closing Thoughts</h2> -<p>I love this new setup. It's portable, lightweight, has zero dependencies, and gives me the opportunity to write directly in HTML. Others may find this workflow idiotic or cumbersome but I couldn't disagree more. Site wide changes can be made with simple <code>Find/Replace</code> actions or even whipping up a basic script. Things should be as complex as you wish to make them!</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>I love this new setup. It’s portable, lightweight, has zero dependencies, and gives me the opportunity to write directly in HTML. Others may find this workflow idiotic or cumbersome but I couldn’t disagree more. Site wide changes can be made with simple <code>Find/Replace</code> actions or even whipping up a basic script. Things should be as complex as you wish to make them!</p> + <p>At the end of the day, anything that helps you be more efficient and gets you producing more content is a winning strategy in my book. Who knows, this concept could even inspire one random reader out there to do the same.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/ndenting-text-with-css/index.html b/build/ndenting-text-with-css/index.html index 2687284..0bec7f0 100644 --- a/build/ndenting-text-with-css/index.html +++ b/build/ndenting-text-with-css/index.html @@ -1,48 +1,60 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>CSS: Indenting Text</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>CSS: Indenting Text</h1> +<h1 id="css-indenting-text">CSS: Indenting Text</h1> + <p>2019-04-05</p> -<p>A lot of developers tend to do the bare minimum when it comes to implementing proper website typography. This isn't an insult - I'm happy that typography is given any thought at all during development, I just believe more can always be done to improve upon it.</p> -<p>In today's <em>TypeTip</em> we're going to play around with the <code>text-indent</code> property, look into when it's best to use it and how to implement it properly.</p> -<h2>The property and browser support</h2> + +<p>A lot of developers tend to do the bare minimum when it comes to implementing proper website typography. This isn’t an insult - I’m happy that typography is given any thought at all during development, I just believe more can always be done to improve upon it.</p> + +<p>In today’s <em>TypeTip</em> we’re going to play around with the <code>text-indent</code> property, look into when it’s best to use it and how to implement it properly.</p> + +<h2 id="the-property-and-browser-support">The property and browser support</h2> + <p>Browser support is actually pretty great for such a regularly over-looked CSS property. All major desktop and mobile browsers support it:</p> -<p><figure> - <img src="/public/images/text-indent-compatibility.webp" alt="Text indent browser compatibility"> - <figcaption>Full support across all browsers.</figcaption> -</figure></p> -<p>Now that doesn't mean you should just slap this property on all your type elements and call it a day - there are specific use cases for <code>text-indent</code> and some basic rules to follow:</p> -<h2>Use Cases</h2> + +<p>Now that doesn’t mean you should just slap this property on all your type elements and call it a day - there are specific use cases for <code>text-indent</code> and some basic rules to follow:</p> + +<h2 id="use-cases">Use Cases</h2> + <ol> <li>Increasing readability of large text blocks that would otherwise overwhelm the reader</li> <li>Replicating book or report typography layouts</li> </ol> -<h2>Basic Rules</h2> + +<h2 id="basic-rules">Basic Rules</h2> + <ol> <li>Best to set this property on inner type children only - meaning items like <code>p</code> or <code>blockquotes</code> instead of main headings</li> -<li>When used on paragraph tags it's best to target only <code>p</code> elements that directly follow a sibling tag (see "The CSS" below)</li> +<li>When used on paragraph tags it’s best to target only <code>p</code> elements that directly follow a sibling tag (see “The CSS” below)</li> </ol> -<h2>The CSS</h2> + +<h2 id="the-css">The CSS</h2> + <p>Adding the property is extremely trivial, all you need is the following:</p> -<pre><code>/* Best practice for paragraphs */ + +<pre><code>/* Best practice for paragraphs */ p + p { - text-indent: 1rem; /* whatever you want */ + text-indent: 1rem; /* whatever you want */ } </code></pre> -<h2>Let's see it in action</h2> + +<h2 id="lets-see-it-in-action">Let’s see it in action</h2> + <p><a href="https://codepen.io/bradleytaunt/pen/OGXLEd/">Live CodePen Example</a></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/netlify-urls/index.html b/build/netlify-urls/index.html index 0502441..478e083 100644 --- a/build/netlify-urls/index.html +++ b/build/netlify-urls/index.html @@ -1,49 +1,60 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Using Netlify for Dynamic URL Redirects</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Using Netlify for Dynamic URL Redirects</h1> +<h1 id="using-netlify-for-dynamic-url-redirects">Using Netlify for Dynamic URL Redirects</h1> + <p>2021-12-03</p> -<p>With the <a href="/minor-website-changes/">recent domain switch</a> that took place on this website, I needed to have a dependable setup to forward my old domain URLs to the new one. While using something like "URL forwarding" through your domain provider could work, it doesn't natively support <em>dynamic</em> linking. Let me explain using a basic example:</p> + +<p>With the <a href="/minor-website-changes/">recent domain switch</a> that took place on this website, I needed to have a dependable setup to forward my old domain URLs to the new one. While using something like “URL forwarding” through your domain provider could work, it doesn’t natively support <em>dynamic</em> linking. Let me explain using a basic example:</p> + <ul> -<li>A user clicks on a link that targets a post on your old domain:<br> <code>olddomain.com/random-post</code></li> -<li>You want that link to forward using the same permalink structure:<br> <code>newdomain.com/random-post</code></li> -<li>"URL forwarding" through your domain provider <strong>does not</strong> support this</li> +<li>A user clicks on a link that targets a post on your old domain: <code>olddomain.com/random-post</code></li> +<li>You want that link to forward using the same permalink structure: <code>newdomain.com/random-post</code></li> +<li>“URL forwarding” through your domain provider <strong>does not</strong> support this</li> </ul> -<p>Simple stuff. So, let's breakdown how to easily set this up on Netlify <em>for free</em>.</p> -<h2>Setting Up Netlify</h2> + +<p>Simple stuff. So, let’s breakdown how to easily set this up on Netlify <em>for free</em>.</p> + +<h2 id="setting-up-netlify">Setting Up Netlify</h2> + <ul> -<li>Create an account (or login to an existing one) and setup a new site[^1]</li> -<li>Change your "old" domain name nameservers to match Netlify's (normally done through your domain register) +<li><p>Create an account (or login to an existing one) and setup a new site[^1]</p></li> +<li><p>Change your “old” domain name nameservers to match Netlify’s (normally done through your domain register) + <ul> <li><code>dns1.p03.nsone.net</code></li> <li><code>dns2.p03.nsone.net</code></li> <li><code>dns3.p03.nsone.net</code></li> <li><code>dns4.p03.nsone.net</code></li> +</ul></p></li> +<li><p>Back in Netlify: under <strong>Domain Settings</strong> you need to add your custom “old” domain under the <strong>Custom domains</strong> section under <strong>Domain management</strong></p></li> +<li><p>Lastly, add the following content inside a <code>_redirects</code> file (no extension) to your website content/build (changing to your own domains, of course)</p> + +<p><a href="https://olddomain.com/*">https://olddomain.com/*</a> <a href="https://newdomain.com/:splat">https://newdomain.com/:splat</a> 301!</p></li> </ul> -</li> -<li>Back in Netlify: under <strong>Domain Settings</strong> you need to add your custom "old" domain under the <strong>Custom domains</strong> section under <strong>Domain management</strong></li> -<li>Lastly, add the following content inside a <code>_redirects</code> file (no extension) to your website content/build (changing to your own domains, of course)</li> -</ul> -<pre><code>https://olddomain.com/* https://newdomain.com/:splat 301! -</code></pre> -<p>That's it! Now Netlify will dynamically forward all your pre-existing URLs from your old domain to the new one. No pesky <code>.htaccess</code> files or running your own basic web server(s)!</p> + +<p>That’s it! Now Netlify will dynamically forward all your pre-existing URLs from your old domain to the new one. No pesky <code>.htaccess</code> files or running your own basic web server(s)!</p> + <p>Hopefully this helps others trying to dynamically redirect their domains without the headache.</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>I normally set this up through Github / git hosting</li> +<li>I normally set this up through Github / git hosting</li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/news-websites-are-dumpster-fires/index.html b/build/news-websites-are-dumpster-fires/index.html index 34b4ec3..55dc00b 100644 --- a/build/news-websites-are-dumpster-fires/index.html +++ b/build/news-websites-are-dumpster-fires/index.html @@ -1,44 +1,58 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>News Websites Are Dumpster Fires</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>News Websites Are Dumpster Fires</h1> +<h1 id="news-websites-are-dumpster-fires">News Websites Are Dumpster Fires</h1> + <p>2019-05-29</p> + <p>Online news outlets are a dying breed and many users have decided to consume information elsewhere. Why? Because the news industry has become a cesspool of anti-consumer and blackhat practices that has eroded trust for the sake of money.</p> -<h2>What news sites get wrong</h2> + +<h2 id="what-news-sites-get-wrong">What news sites get wrong</h2> + <p>I could write up an entire essay about all the shady practices that <em>most</em> news sites are guilty of, but here are just a few top level issues:</p> + <ul> <li>Clickbait headings with misleading information</li> <li>Disabling the user from reading if ad-block is present</li> <li>Tracking the user with 3rd party scripts</li> <li>Taking massive performance hits (specifically on mobile due to huge JavaScript blocks)</li> <li>Pop-up ads</li> -<li>Fixed headers or footers which leads to harder readability / accidental element interactions</li> +<li>Fixed headers or footers which leads to harder readability / accidental element interactions</li> </ul> -<h2>But they need ad revenue!</h2> -<p>If your business is solely dependent on tracking scripts, tricking users with clickbait titles and using archaic ads - then you're destined to fail regardless. These practices create an unsafe and unhealthy web for everyday users - not to mention most browsers have announced that future updates <a href="https://support.mozilla.org/en-US/kb/content-blocking">will be blocking ads by default</a>. <em>News outlets need to adapt or die</em>.</p> -<h2>What's the solution?</h2> -<p>I don't have a <em>fix all</em> band-aid to replace current revenue streams for news websites. I'm sure someone much smarter than I can come up with better ideas, but just off the top of my head:</p> + +<h2 id="but-they-need-ad-revenue">But they need ad revenue!</h2> + +<p>If your business is solely dependent on tracking scripts, tricking users with clickbait titles and using archaic ads - then you’re destined to fail regardless. These practices create an unsafe and unhealthy web for everyday users - not to mention most browsers have announced that future updates <a href="https://support.mozilla.org/en-US/kb/content-blocking">will be blocking ads by default</a>. <em>News outlets need to adapt or die</em>.</p> + +<h2 id="whats-the-solution">What’s the solution?</h2> + +<p>I don’t have a <em>fix all</em> band-aid to replace current revenue streams for news websites. I’m sure someone much smarter than I can come up with better ideas, but just off the top of my head:</p> + <ul> -<li>Switch over to a monthly subscription plan (if no one pays for it maybe you weren't as useful of a source as you thought)</li> +<li>Switch over to a monthly subscription plan (if no one pays for it maybe you weren’t as useful of a source as you thought)</li> <li>Partner with brands to create sponsored articles (without ruining the user experience of course)</li> <li>Place a larger emphasis on user donations or promotions</li> </ul> -<h2>The News Shouldn't be Spam</h2> + +<h2 id="the-news-shouldnt-be-spam">The News Shouldn’t be Spam</h2> + <p>Most traffic flowing into news websites are there for one thing: <em>the content</em>. News outlets should not be spamming their main revenue supply (<strong>the users</strong>) or misleading people with false information.</p> -<p>If you're a regular consumer of news and you happen to run across a platform that is guilty of any of these practices, shoot them an email explaining why you won't be returning to their website (unless they change their ways). These anti-consumer practices will only stop when these organizations start losing money.</p> + +<p>If you’re a regular consumer of news and you happen to run across a platform that is guilty of any of these practices, shoot them an email explaining why you won’t be returning to their website (unless they change their ways). These anti-consumer practices will only stop when these organizations start losing money.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/notice/index.html b/build/notice/index.html index 573a2d2..b0aa333 100644 --- a/build/notice/index.html +++ b/build/notice/index.html @@ -1,32 +1,42 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>RE: Creating a Simple HTML/CSS Notice Box</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>RE: Creating a Simple HTML/CSS Notice Box</h1> +<h1 id="re-creating-a-simple-htmlcss-notice-box">RE: Creating a Simple HTML/CSS Notice Box</h1> + <p>2022-09-22</p> -<p>I recently read Kev Quirk's post, <a href="https://kevquirk.com/how-to-create-a-simple-html-css-notice-box/">How to Create a Simple HTML/CSS Notice Box</a> and loved the simplicity of it. I'm a sucker for using pseudo elements in creative ways but still managing to make them useful. Of course, this got me thinking as to whether or not the same style of box could be achieved <em>without</em> the use of static, pseudo elements...</p> -<h2>Bad Semantics</h2> + +<p>I recently read Kev Quirk’s post, <a href="https://kevquirk.com/how-to-create-a-simple-html-css-notice-box/">How to Create a Simple HTML/CSS Notice Box</a> and loved the simplicity of it. I’m a sucker for using pseudo elements in creative ways but still managing to make them useful. Of course, this got me thinking as to whether or not the same style of box could be achieved <em>without</em> the use of static, pseudo elements…</p> + +<h2 id="bad-semantics">Bad Semantics</h2> + <p>I need to make it clear right away: <strong>these implementations are not semantic</strong>. They are valid HTML, but I am technically using these tags incorrectly. <em>You have been warned!</em></p> -<h2>Setting Fieldsets</h2> + +<h2 id="setting-fieldsets">Setting Fieldsets</h2> + <p>The first approach is to wrap everything inside HTML <code>fieldset</code> tags:</p> -<pre><code><fieldset> - <legend>Notice</legend> - <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam nihil velit vitae sed beatae earum assumenda deleniti, inventore repellendus, sequi distinctio delectus porro explicabo quidem hic quo quasi voluptas temporibus.</p> -</fieldset> + +<pre><code><fieldset> + <legend>Notice</legend> + <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam nihil velit vitae sed beatae earum assumenda deleniti, inventore repellendus, sequi distinctio delectus porro explicabo quidem hic quo quasi voluptas temporibus.</p> +</fieldset> </code></pre> -<p>Then you can include minor styling to closely match the design of Kev's notice box:</p> + +<p>Then you can include minor styling to closely match the design of Kev’s notice box:</p> + <pre><code>fieldset { border: 3px solid; font-family: sans-serif; @@ -45,14 +55,19 @@ fieldset legend { text-transform: uppercase; } </code></pre> -<h2>The Devil is in the Details</h2> + +<h2 id="the-devil-is-in-the-details">The Devil is in the Details</h2> + <p>The other option is utilizing the HTML <code>details</code> tag:</p> -<pre><code><details open> - <summary>Notice</summary> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda sequi esse reprehenderit facilis aperiam labore optio minus doloremque nesciunt! Voluptatem esse tempore asperiores recusandae rerum facere, reiciendis officia repudiandae similique?</p> -</details> + +<pre><code><details open> + <summary>Notice</summary> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda sequi esse reprehenderit facilis aperiam labore optio minus doloremque nesciunt! Voluptatem esse tempore asperiores recusandae rerum facere, reiciendis officia repudiandae similique?</p> +</details> </code></pre> -<p>You'll obviously want to include the <code>open</code> attribute to avoid users needing to toggle the content manually (unless that is your desired UX). Then add similar styling options to match the <code>fieldset</code> example:</p> + +<p>You’ll obviously want to include the <code>open</code> attribute to avoid users needing to toggle the content manually (unless that is your desired UX). Then add similar styling options to match the <code>fieldset</code> example:</p> + <pre><code>details { border: 3px solid; font-family: sans-serif; @@ -68,16 +83,21 @@ details summary { text-transform: uppercase; } </code></pre> -<p>Important to note: you can hide the default "arrow toggle" on <code>summary</code> elements by including the following:</p> -<pre><code>details > summary { + +<p>Important to note: you can hide the default “arrow toggle” on <code>summary</code> elements by including the following:</p> + +<pre><code>details > summary { list-style: none; } -details > summary::-webkit-details-marker { +details > summary::-webkit-details-marker { display: none; } </code></pre> -<h2>Seeing is Believing</h2> -<p>I've put together two versions of each implementation (one custom designed and one using default browser styling). You can check them out in the CodePen below:</p> + +<h2 id="seeing-is-believing">Seeing is Believing</h2> + +<p>I’ve put together two versions of each implementation (one custom designed and one using default browser styling). You can check them out in the CodePen below:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/jOxLdQP">Live CodePen Example</a></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/now/index.html b/build/now/index.html index 8adfa79..0e63a05 100644 --- a/build/now/index.html +++ b/build/now/index.html @@ -1,31 +1,38 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Now</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Now</h1> +<h1 id="now">Now</h1> + <p>This page is based off the <a href="https://nownownow.com/about">now page concept</a> by Derek Sivers.</p> + <p><strong>Updated October 09, 2023</strong></p> -<h2>Work</h2> + +<h2 id="work">Work</h2> + <ul> -<li>Working as a UX designer & fullstack developer hybrid</li> +<li>Working as a UX designer & fullstack developer hybrid</li> </ul> -<h2>Life</h2> + +<h2 id="life">Life</h2> + <ul> <li>Raising my three children (aged 5, 3 and 1 respectively) with my wonderful wife</li> <li>Trying to contribute more to open source projects that I actively use</li> -<li>Slowly teaching myself C & RSpec</li> +<li>Slowly teaching myself C & RSpec</li> <li>Advancing my knowledge of Ruby</li> <li>Currently playing Darktide on Xbox</li> </ul> diff --git a/build/obvious-js-injection-fallback/index.html b/build/obvious-js-injection-fallback/index.html index 79fb611..e1e2880 100644 --- a/build/obvious-js-injection-fallback/index.html +++ b/build/obvious-js-injection-fallback/index.html @@ -1,46 +1,65 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Obvious Javascript 'Injection' Fallback</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Obvious Javascript 'Injection' Fallback</h1> +<h1 id="obvious-javascript-injection-fallback">Obvious Javascript ‘Injection’ Fallback</h1> + <p>2020-12-04</p> -<p>Sometimes websites and web apps might require content to be "injected" via Javascript. I should mention that I am strongly against this practice - but often this kind of thing is out of one's hands. So, the least I can do is setup these "injections" to have proper fallbacks for users who disable JS. You would be surprised how many developers build <em>empty</em> HTML elements with the assumption they will be filled via Javascript.</p> -<h2>Our Hypothetical Project</h2> -<p>Let's pretend that we have a total tally that pulls in the number of current users using our fake SaaS app. We would do something like this:</p> -<h3>HTML</h3> + +<p>Sometimes websites and web apps might require content to be “injected” via Javascript. I should mention that I am strongly against this practice - but often this kind of thing is out of one’s hands. So, the least I can do is setup these “injections” to have proper fallbacks for users who disable JS. You would be surprised how many developers build <em>empty</em> HTML elements with the assumption they will be filled via Javascript.</p> + +<h2 id="our-hypothetical-project">Our Hypothetical Project</h2> + +<p>Let’s pretend that we have a total tally that pulls in the number of current users using our fake SaaS app. We would do something like this:</p> + +<h3 id="html">HTML</h3> + <p>Here we create an empty <code>h2</code> tag that will update with the current number of users via js:</p> -<pre><code><main> - <h2 class="total-tally"></h2> -</main> + +<pre><code><main> + <h2 class="total-tally"></h2> +</main> </code></pre> -<h3>Javascript</h3> -<p>You'll have to use your imagination here and assume that the <code>totalTally</code> variable pulls in the numbers dynamically via API:</p> -<pre><code>var totalTally = "273,677" /* This would pull something dynamically in prod */ -document.getElementsByClassName("total-tally")[0].innerHTML=totalTally; + +<h3 id="javascript">Javascript</h3> + +<p>You’ll have to use your imagination here and assume that the <code>totalTally</code> variable pulls in the numbers dynamically via API:</p> + +<pre><code>var totalTally = "273,677" /* This would pull something dynamically in prod */ +document.getElementsByClassName("total-tally")[0].innerHTML=totalTally; </code></pre> -<h2>The Problem</h2> -<p>The big issue we have now occurs when a user visits this page without JS enabled. The <code>h2</code> tag will remain empty and they won't see anything. I know this seems like a very avoidable issue, but you would be surprised how often it actually happens on the web.</p> -<h2>The (overly simple) Solution</h2> + +<h2 id="the-problem">The Problem</h2> + +<p>The big issue we have now occurs when a user visits this page without JS enabled. The <code>h2</code> tag will remain empty and they won’t see anything. I know this seems like a very avoidable issue, but you would be surprised how often it actually happens on the web.</p> + +<h2 id="the-overly-simple-solution">The (overly simple) Solution</h2> + <p>The easiest way to avoid these types of empty tags - add static content. I know - mind blowing, right?</p> -<h3>HTML (updated)</h3> -<pre><code><main> - <h2 class="total-tally">200,000+</h2> -</main> + +<h3 id="html-updated">HTML (updated)</h3> + +<pre><code><main> + <h2 class="total-tally">200,000+</h2> +</main> </code></pre> -<p>You might be reading this and saying to yourself, "Wow! Thanks Captain Obvious!" and that's a fair reaction. This is an <em>obvious</em> demo on purpose. If even one single reader learns to avoid leaving empty HTML tags that are solely dependent on Javascript injection, then I'd say this demo was a huge success.</p> -<p>Rule of thumb: don't make assumption about your users. Play it safe.</p> + +<p>You might be reading this and saying to yourself, “Wow! Thanks Captain Obvious!” and that’s a fair reaction. This is an <em>obvious</em> demo on purpose. If even one single reader learns to avoid leaving empty HTML tags that are solely dependent on Javascript injection, then I’d say this demo was a huge success.</p> + +<p>Rule of thumb: don’t make assumption about your users. Play it safe.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/one-css-property/index.html b/build/one-css-property/index.html index a749cec..e802da3 100644 --- a/build/one-css-property/index.html +++ b/build/one-css-property/index.html @@ -1,41 +1,59 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Billing for One CSS Change</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Billing for One CSS Change</h1> +<h1 id="billing-for-one-css-change">Billing for One CSS Change</h1> + <p>2019-11-29</p> -<p>Every second you spend working as a designer should be billed back to the client. A simple button color change? Bill them. Additional links added to an existing menu? Send that invoice over. Some basic typeface changes? Don't do it for free.</p> + +<p>Every second you spend working as a designer should be billed back to the client. A simple button color change? Bill them. Additional links added to an existing menu? Send that invoice over. Some basic typeface changes? Don’t do it for free.</p> + <p>You need to be charging for <em>all</em> design work, regardless of difficulty or time required.</p> -<p>This concept might seem extremely obvious to more senior level workers but I have seen a good amount of junior devs make the mistake of "working for experience" or better yet "strengthening the client relationship". Early on in my career I was just as guilty of doing this kind of thing. It was and still is a very foolish practice.</p> -<h2>Do you really bill for <em>one</em> CSS change?</h2> -<p>Absolutely. From the client's perspective it may seem like they are being billed for one CSS change and 30 seconds of a designer's time. In reality, they are paying for the designer's years of experience to be able to solve that problem in <em>only</em> 30 seconds.</p> -<p>Would the client be happier with a significantly less qualified designer charging the same amount of money but taking 3 <em>hours</em> to complete the task? In the end, what's the difference?</p> -<blockquote><p>If it is a simple change that they believe should cost nothing, then why aren't they doing it themselves?</p> + +<p>This concept might seem extremely obvious to more senior level workers but I have seen a good amount of junior devs make the mistake of “working for experience” or better yet “strengthening the client relationship”. Early on in my career I was just as guilty of doing this kind of thing. It was and still is a very foolish practice.</p> + +<h2 id="do-you-really-bill-for-one-css-change">Do you really bill for <em>one</em> CSS change?</h2> + +<p>Absolutely. From the client’s perspective it may seem like they are being billed for one CSS change and 30 seconds of a designer’s time. In reality, they are paying for the designer’s years of experience to be able to solve that problem in <em>only</em> 30 seconds.</p> + +<p>Would the client be happier with a significantly less qualified designer charging the same amount of money but taking 3 <em>hours</em> to complete the task? In the end, what’s the difference?</p> + +<blockquote> +<p>If it is a simple change that they believe should cost nothing, then why aren’t they doing it themselves?</p> </blockquote> + <p>We as developers and designers work in an odd industry. A lot of people (read clients) outside of our bubble tend to think they have a much better understanding of the work we do. Because of this, they tend to preface work requests with phrases like:</p> + <ul> -<li>"This should be a simple change"</li> -<li>"This shouldn't take more than a couple of minutes"</li> -<li>"This seems like an easy fix"</li> +<li>“This should be a simple change”</li> +<li>“This shouldn’t take more than a couple of minutes”</li> +<li>“This seems like an easy fix”</li> </ul> -<p>Most of the time these comments are harmless, but other times they are a subtle way of downplaying your skill and experience required to complete these work items. That skill and experience shouldn't ever come free. It makes you wonder if these same people expect free work from trades-people (electricians, plumbers, etc) when they need what they think is a "simple" fix in their house.</p> -<p>Do you think workers in <em>most</em> other industries travel out to someone's home and fix "small" issues for free? Hell no.</p> -<p>So why are developers and designers doing work for free? I truly don't know - but it needs to stop.</p> -<h2>A simple but useful system</h2> -<p>You should live by the rule that every <em>second</em> you spend working for someone else is billable. I don't mean that you should literally bill per second, but instead round to nearest estimated time slot (whether you are billing hourly, daily, sprint-based or per project). This ensures that your efforts are paid for and that the client will begin to truly value your time. Doing this from the get-go will save you headaches in the future.</p> -<p>I'm sorry if this comes off as preachy, but I'm just trying to inspire designers to value their work more. Don't sell yourself short - your talent is valuable and shouldn't be taken for granted.</p> + +<p>Most of the time these comments are harmless, but other times they are a subtle way of downplaying your skill and experience required to complete these work items. That skill and experience shouldn’t ever come free. It makes you wonder if these same people expect free work from trades-people (electricians, plumbers, etc) when they need what they think is a “simple” fix in their house.</p> + +<p>Do you think workers in <em>most</em> other industries travel out to someone’s home and fix “small” issues for free? Hell no.</p> + +<p>So why are developers and designers doing work for free? I truly don’t know - but it needs to stop.</p> + +<h2 id="a-simple-but-useful-system">A simple but useful system</h2> + +<p>You should live by the rule that every <em>second</em> you spend working for someone else is billable. I don’t mean that you should literally bill per second, but instead round to nearest estimated time slot (whether you are billing hourly, daily, sprint-based or per project). This ensures that your efforts are paid for and that the client will begin to truly value your time. Doing this from the get-go will save you headaches in the future.</p> + +<p>I’m sorry if this comes off as preachy, but I’m just trying to inspire designers to value their work more. Don’t sell yourself short - your talent is valuable and shouldn’t be taken for granted.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/one-thing/index.html b/build/one-thing/index.html index a2b422c..af6b70a 100644 --- a/build/one-thing/index.html +++ b/build/one-thing/index.html @@ -1,44 +1,67 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>My Coffee Maker Just Makes Coffee</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>My Coffee Maker Just Makes Coffee</h1> +<h1 id="my-coffee-maker-just-makes-coffee">My Coffee Maker Just Makes Coffee</h1> + <p>2023-01-09</p> + <p><img src="/public/images/coffee-couple.svg" alt="Couple drinking cups of coffee" /></p> + <p>I had to replace my dual Keurig coffee maker <em>twice</em> over a period of five months. This occurred a year ago and these are my findings.</p> -<h2>Built to Fail?</h2> -<p>I followed the manufactor's suggested cleaning schedule and took care of the appliances. My initial conclusion was that the product's design wasn't thought-out well. "It's built to fail!" I said to my wife the morning of the <em>second</em> machine's failure. Another product replaced under warranty, while the broken one's tossed aside. More e-waste because why not?</p> -<p>But after some further reflection, I came to realize the "poor design" was a symptom of a greater cause:</p> + +<h2 id="built-to-fail">Built to Fail?</h2> + +<p>I followed the manufactor’s suggested cleaning schedule and took care of the appliances. My initial conclusion was that the product’s design wasn’t thought-out well. “It’s built to fail!” I said to my wife the morning of the <em>second</em> machine’s failure. Another product replaced under warranty, while the broken one’s tossed aside. More e-waste because why not?</p> + +<p>But after some further reflection, I came to realize the “poor design” was a symptom of a greater cause:</p> + <p><strong>The product tries to do too much</strong>.</p> -<p>I'm beating a dead horse by referencing <a href="https://suckless.org">suckless</a> software again, but that core philosophy applies here too. Both digital and industrial design suffer from bloat. Far too often I witness fellow designers over-engineer customer requests. Or they add excessive bloat to new product features. It's almost a rarity these days to find designers who tackle work as <em>single items</em>. Everything expands. Everything needs to do one little extra "cool" thing. Nothing is ever <em>taken away</em>.</p> -<p>I'm sure the designers meant well with the creation of this dual coffee maker. It's interesting to combine both a standard 12-cup percolator and "pod-based" serving options. In theory it sounds quite handy. One appliance that tackles two use-cases. Think of the counter space you'll save! </p> + +<p>I’m beating a dead horse by referencing <a href="https://suckless.org">suckless</a> software again, but that core philosophy applies here too. Both digital and industrial design suffer from bloat. Far too often I witness fellow designers over-engineer customer requests. Or they add excessive bloat to new product features. It’s almost a rarity these days to find designers who tackle work as <em>single items</em>. Everything expands. Everything needs to do one little extra “cool” thing. Nothing is ever <em>taken away</em>.</p> + +<p>I’m sure the designers meant well with the creation of this dual coffee maker. It’s interesting to combine both a standard 12-cup percolator and “pod-based” serving options. In theory it sounds quite handy. One appliance that tackles two use-cases. Think of the counter space you’ll save! </p> + <p>Unfortunately, in practice, it fails.</p> -<h2>Product Decline</h2> -<p>I've felt product quality decline in both household appliances and software. Companies no longer seem content with doing <em>one thing well</em>. Everyone needs to reach out into many verticals. Everyone copies their competitors.The need to "grow" their existing features. Adding things that no one asked for. Products are getting <em>slower</em> and losing focus.</p> -<p>People tend to place all that blame on top-level management or developers. They do deserve some blame - but not all. Designers cause a lot of these issues on their own and it's easy to understand why.</p> -<p>The design field drops new designers into a <em>world of bloat</em>. They don't stand a chance. The initial programs introduced to them are behemoth, proprietary pieces of garbage. No other options are available. No one is making strides in this field of "design tool software" because it's a massive uphill battle. Those that <em>try</em>, get <a href="https://www.theverge.com/2022/9/15/23354532/adobe-figma-acquisition-20-billion-official">snatched up by existing platforms</a>. Designers don't have the luxury of "choice" as much as developers do (within reason). It's a very locked-down industry.</p> -<p>So of course designers will carry this mentality into their own work. It's all they have known. "X and Y companies designed their <code>insert-feature-here</code> with all these <em>extras</em>, so we'll do the same". Everything is <a href="https://invidious.snopyta.org/watch?v=dC1yHLp9bWA">a copy of a copy of a copy</a>.</p> -<p>The only advice I can give to designers is this: try not to add to the problem. I'm not asking you to move mountains. But consider working somewhere else if your career only adds more bloat to the world. (Easier said than done, I know). Or keep doing what you're doing. What do I know - I'm only some guy who rambles on the web. -</p> -<h2>Back to the Coffee Maker</h2> -<p>So the Keurig is gone. Trashed. The company doesn't want the product back, they tell you to scrap it. "We'll send you a new one for free". Such a waste.</p> -<p>Instead, I snagged the cheapest and most basic coffee maker I could find. It cost me $12. It has no clock, no programming options, no base settings or cleaning functions. Hell, there aren't even level numbers on the water reservoir tank. </p> + +<h2 id="product-decline">Product Decline</h2> + +<p>I’ve felt product quality decline in both household appliances and software. Companies no longer seem content with doing <em>one thing well</em>. Everyone needs to reach out into many verticals. Everyone copies their competitors.The need to “grow” their existing features. Adding things that no one asked for. Products are getting <em>slower</em> and losing focus.</p> + +<p>People tend to place all that blame on top-level management or developers. They do deserve some blame - but not all. Designers cause a lot of these issues on their own and it’s easy to understand why.</p> + +<p>The design field drops new designers into a <em>world of bloat</em>. They don’t stand a chance. The initial programs introduced to them are behemoth, proprietary pieces of garbage. No other options are available. No one is making strides in this field of “design tool software” because it’s a massive uphill battle. Those that <em>try</em>, get <a href="https://www.theverge.com/2022/9/15/23354532/adobe-figma-acquisition-20-billion-official">snatched up by existing platforms</a>. Designers don’t have the luxury of “choice” as much as developers do (within reason). It’s a very locked-down industry.</p> + +<p>So of course designers will carry this mentality into their own work. It’s all they have known. “X and Y companies designed their <code>insert-feature-here</code> with all these <em>extras</em>, so we’ll do the same”. Everything is <a href="https://invidious.snopyta.org/watch?v=dC1yHLp9bWA">a copy of a copy of a copy</a>.</p> + +<p>The only advice I can give to designers is this: try not to add to the problem. I’m not asking you to move mountains. But consider working somewhere else if your career only adds more bloat to the world. (Easier said than done, I know). Or keep doing what you’re doing. What do I know - I’m only some guy who rambles on the web.</p> + +<h2 id="back-to-the-coffee-maker">Back to the Coffee Maker</h2> + +<p>So the Keurig is gone. Trashed. The company doesn’t want the product back, they tell you to scrap it. “We’ll send you a new one for free”. Such a waste.</p> + +<p>Instead, I snagged the cheapest and most basic coffee maker I could find. It cost me $12. It has no clock, no programming options, no base settings or cleaning functions. Hell, there aren’t even level numbers on the water reservoir tank. </p> + <p>You add your scoops of coffee grounds, along with desired amount of water. Then you switch on the (only) button at the side of the machine. After a handful of minutes, you have coffee.</p> -<p>And it's been running <em>perfect</em> for over 8 months now. I clean it every so often by brewing with a small mixture of vinegar and water. That's it. No need for "specialty cleaners" that cost almost as much as the machine itself. The points of failure get reduced as well, since the machine is bare-bones. Nothing can break when there is nothing to break...</p> -<h2>"Brewing" Software</h2> -<p>At least, for me, I plan to only design what <em>needs to be</em>. If someone asks for a "coffee", they'll get a cup of hot, black coffee and nothing else.</p> + +<p>And it’s been running <em>perfect</em> for over 8 months now. I clean it every so often by brewing with a small mixture of vinegar and water. That’s it. No need for “specialty cleaners” that cost almost as much as the machine itself. The points of failure get reduced as well, since the machine is bare-bones. Nothing can break when there is nothing to break…</p> + +<h2 id="brewing-software">“Brewing” Software</h2> + +<p>At least, for me, I plan to only design what <em>needs to be</em>. If someone asks for a “coffee”, they’ll get a cup of hot, black coffee and nothing else.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/open-source-typeface-pairings/index.html b/build/open-source-typeface-pairings/index.html index 397a876..7d144ae 100644 --- a/build/open-source-typeface-pairings/index.html +++ b/build/open-source-typeface-pairings/index.html @@ -1,53 +1,47 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Open Source Typeface Pairings</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Open Source Typeface Pairings</h1> +<h1 id="open-source-typeface-pairings">Open Source Typeface Pairings</h1> + <p>2018-01-25</p> + <p>I always love finding new typeface pairings to use across my personal and client projects, but I find many suggested pairings come with a hefty price tag (rightly so - premium typefaces are normally always worth their cost).</p> -<p>So, I've curated this personal list of 5 exceptionally beautiful typeface pairings that will cost you absolutely <i>nothing</i>. Open source FTW.</p> -<h2>ET-Book & Gill Sans</h2> -<p>Download: <a href="https://github.com/edwardtufte/et-book">ET Book</a>, <a href="https://www.wfonts.com/font/gill-sans-std">Gill Sans</a></p> -<p><figure> - <img src="/public/images/et-book-gill-sans.webp" alt="ET Book Gill Sans"> - <figcaption>ET-Book & Gill Sans are based off the font pairings of my personal Jekyll theme: <a href="https://bradleytaunt.com/et-jekyll-theme/">ET-Jekyll Theme</a>.</figcaption> -</figure></p> -<h2>Playfair Display & Roboto</h2> -<p>Download: <a href="https://fonts.google.com/specimen/Playfair+Display">Playfair Display</a>, <a href="https://fonts.google.com/specimen/Roboto">Roboto</a></p> -<p><figure> - <img src="/public/images/playfair-roboto.webp" alt="Playfair Display Roboto"> - <figcaption>Playfair Display & Roboto I find work really well for microblogs or short essay format posts.</figcaption> -</figure></p> -<h2>Karma & Open Sans</h2> -<p>Download: <a href="https://fonts.google.com/specimen/Karma">Karma</a>, <a href="https://fonts.google.com/specimen/Open+Sans">Open Sans</a></p> -<p><figure> - <img src="/public/images/karma-open-sans.webp" alt="Karma Open Sans"> - <figcaption>Karma & Open Sans give readers a little more breathing room between characters. Good choice if trying to keep accessibility in mind.</figcaption> -</figure></p> -<h2>Libre Baskerville & Oswald</h2> -<p>Download: <a href="https://fonts.google.com/specimen/Libre+Baskerville">Libre Baskerville</a>, <a href="https://fonts.google.com/specimen/Oswald">Oswald</a></p> -<p><figure> - <img src="/public/images/libre-oswald.webp" alt="Libre Baskerville Oswald"> - <figcaption>Libre Baskerville & Oswald oozes character and takes inspiration from a more print-based medium.</figcaption> -</figure></p> -<h2>Fanwood & League Spartan</h2> -<p>Download: <a href="https://www.theleagueofmoveabletype.com/fanwood">Fanwood</a>, <a href="https://www.theleagueofmoveabletype.com/league-spartan">League Spartan</a></p> -<p><figure> - <img src="/public/images/fanwood-league.webp" alt="Fanwood League Spartan"> - <figcaption>Fanwood & League Spartan paired together allow the main content to be easily readable, while the headers instantly grab the user's attention.</figcaption> -</figure></p> + +<p>So, I’ve curated this personal list of 5 exceptionally beautiful typeface pairings that will cost you absolutely nothing. Open source FTW.</p> + +<h2 id="et-book-gill-sans">ET-Book & Gill Sans</h2> + +<p>Download: ET Book, Gill Sans</p> + +<h2 id="playfair-display-roboto">Playfair Display & Roboto</h2> + +<p>Download: Playfair Display, Roboto</p> + +<h2 id="karma-open-sans">Karma & Open Sans</h2> + +<p>Download: Karma, Open Sans</p> + +<h2 id="libre-baskerville-oswald">Libre Baskerville & Oswald</h2> + +<p>Download: Libre Baskerville, Oswald</p> + +<h2 id="fanwood-league-spartan">Fanwood & League Spartan</h2> + +<p>Download: Fanwood, League Spartan</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/openring/index.html b/build/openring/index.html index a5836b0..85449ba 100644 --- a/build/openring/index.html +++ b/build/openring/index.html @@ -1,55 +1,68 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Building openring with Jekyll Build</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Building openring with Jekyll Build</h1> +<h1 id="building-openring-with-jekyll-build">Building openring with Jekyll Build</h1> + <p>2022-12-02</p> -<p>I think it's great when bloggers post their own personal "reading list" of blogs they themselves follow. Whether this is a customized Blogroll page or footnotes in their individual articles, I find it really helpful to find more interesting content on the "indie" web. This isn't a new concept by any means, but I wanted something a little more "dynamic"[^1] for my own blog.</p> -<p>After some digging I came across <a href="https://sr.ht/~sircmpwn/openring/">openring</a> and it's great. Fully customizable, lightweight and completely open source. What more could you ask for?</p> -<p>So, I thought others might be interested in how I've implemented openring through my own Jekyll build system.</p> -<h2>Installing openring</h2> -<p>You can pull the project <a href="https://sr.ht/~sircmpwn/openring/">directly via SourceHut</a> if you wish, but I would recommend installing through your default package manager. I'm running Arch, so for me it was as simple as running:</p> + +<p>I think it’s great when bloggers post their own personal “reading list” of blogs they themselves follow. Whether this is a customized Blogroll page or footnotes in their individual articles, I find it really helpful to find more interesting content on the “indie” web. This isn’t a new concept by any means, but I wanted something a little more “dynamic”[^1] for my own blog.</p> + +<p>After some digging I came across <a href="https://sr.ht/~sircmpwn/openring/">openring</a> and it’s great. Fully customizable, lightweight and completely open source. What more could you ask for?</p> + +<p>So, I thought others might be interested in how I’ve implemented openring through my own Jekyll build system.</p> + +<h2 id="installing-openring">Installing openring</h2> + +<p>You can pull the project <a href="https://sr.ht/~sircmpwn/openring/">directly via SourceHut</a> if you wish, but I would recommend installing through your default package manager. I’m running Arch, so for me it was as simple as running:</p> + <pre><code>yay -S openring </code></pre> -<p>That's it. I now have full local access to openring!</p> -<h2>Jekyll Includes</h2> + +<p>That’s it. I now have full local access to openring!</p> + +<h2 id="jekyll-includes">Jekyll Includes</h2> + <p>You <em>could</em> setup a whole new directory specifically for your openring files, but that seems like overkill. Instead, we will simply add two new files to our existing <code>_includes</code> directory. We will name these files <code>openring-in.html</code> and <code>openring-out.html</code>.</p> -<h3>openring-in.html Contents</h3> -<pre><code><!-- License-Id: CC0-1.0 --> -<section class="webring"> - <h3>Articles from blogs I follow around the world wide web</h3> - <section class="articles"> + +<h3 id="openring-in.html-contents">openring-in.html Contents</h3> + +<pre><code><!-- License-Id: CC0-1.0 --> +<section class="webring"> + <h3>Articles from blogs I follow around the world wide web</h3> + <section class="articles"> {{range .Articles}} - <div class="article"> - <h4 class="title"> - <a href="{{.Link}}" rel="noopener">{{.Title}}</a> - </h4> - <p class="summary">{{.Summary}}</p> - <small class="source"> - via <a href="{{.SourceLink}}">{{.SourceTitle}}</a> - </small> - <small class="date">{{.Date | datef "January 2, 2006"}}</small> - </div> + <div class="article"> + <h4 class="title"> + <a href="{{.Link}}" rel="noopener">{{.Title}}</a> + </h4> + <p class="summary">{{.Summary}}</p> + <small class="source"> + via <a href="{{.SourceLink}}">{{.SourceTitle}}</a> + </small> + <small class="date">{{.Date | datef "January 2, 2006"}}</small> + </div> {{end}} - </section> - <p class="attribution"> + </section> + <p class="attribution"> Generated by - <a href="https://git.sr.ht/~sircmpwn/openring">openring</a> - </p> -</section> -<style> + <a href="https://git.sr.ht/~sircmpwn/openring">openring</a> + </p> +</section> +<style> .webring .articles { display: flex; flex-wrap: wrap; @@ -76,39 +89,60 @@ font-size: 0.8rem; color: #555; } -</style> +</style> </code></pre> -<blockquote><p>Sidenote: You will get minor Liquid Syntax warnings in the console when running your website via <code>serve</code> or <code>build</code>. I don't really mind those warnings but if you do, feel free to move these files out into their own sub-directory in your project folder.</p> + +<blockquote> +<p>Sidenote: You will get minor Liquid Syntax warnings in the console when running your website via <code>serve</code> or <code>build</code>. I don’t really mind those warnings but if you do, feel free to move these files out into their own sub-directory in your project folder.</p> </blockquote> -<h3>openring-out.html Contents</h3> + +<h3 id="openring-out.html-contents">openring-out.html Contents</h3> + <p>This will generate itself for us every time we rebuild our Jekyll website. It is important to note that any changes you make in this file will be overwritten the next time you rebuild! All custom styling or layout changes should be made in the <code>openring-in.html</code> file.</p> -<h2>Our "New" Build Script</h2> -<p>To simplify things, we are going to place our main commands in a single build script in the root directory of our Jekyll project. For my personal blog, I've named this file <code>build-site.sh</code>. I know - I'm extremely creative.</p> + +<h2 id="our-new-build-script">Our “New” Build Script</h2> + +<p>To simplify things, we are going to place our main commands in a single build script in the root directory of our Jekyll project. For my personal blog, I’ve named this file <code>build-site.sh</code>. I know - I’m extremely creative.</p> + <p>Place the following inside that file:</p> + <pre><code>openring \ - -s https://example.com/feed.xml \ - -s https://example.com/feed.xml \ - -s https://example.com/feed.xml \ - < _includes/openring-in.html \ - > _includes/openring-out.html + -s https://example.com/feed.xml \ + -s https://example.com/feed.xml \ + -s https://example.com/feed.xml \ + < _includes/openring-in.html \ + > _includes/openring-out.html bundle exec jekyll build </code></pre> -<h2>Edit <code>_config.yml</code></h2> -<p>Next we need to make sure we exclude our new <code>build-site</code> script file, since we really don't need that pushed up to the main server:</p> -<pre><code># Includes / Excludes + +<h2 id="edit-">Edit <code>_config.yml</code></h2> + +<p>Next we need to make sure we exclude our new <code>build-site</code> script file, since we really don’t need that pushed up to the main server:</p> + +<pre><code># Includes / Excludes exclude: - build-site.sh </code></pre> -<h2>Almost Done...</h2> -<p>Now you just need to decide where you want your <code>openring</code> feed outputs to render. For this example, we will place them at the bottom of every blog post inside the <code>_layouts/post.html</code> file, like so:</p> + +<h2 id="almost-done">Almost Done…</h2> + +<p>Now you just need to decide where you want your <code>openring</code> feed outputs to render. For this example, we will place them at the bottom of every blog post inside the <code>_layouts/post.html</code> file, like so:</p> + <pre><code>{% raw %}{% include openring-out.html %}{% endraw %} </code></pre> -<h2>Build It & They Will Come</h2> + +<h2 id="build-it-they-will-come">Build It & They Will Come</h2> + <p>This next step is only for those using <a href="https://srht.site">SourceHut Pages</a> to build and host their websites. If you use a different platform (ie Netlify, Vercel, GitHub Pages) the concept should be similar but will most likely require more tweaking on your end. Just a fair warning.</p> -<p>I won't go into great detail about build script for SourceHut Pages, but feel free to take a look at my <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/.build.yml">very own build file for this website</a>. That <em>should</em> work out-of-the-box for most standard Jekyll websites. (Just be sure to edit with your own details!)</p> -<p><strong>That's it</strong>. You now have links to blogs you enjoy that will update with each build. Of course, the "latest" blog posts shown will become out-of-date if you don't blog (or at least re-build your website) on a regular basis. But for me, I see this as a good motivator to keep pushing out content!</p> + +<p>I won’t go into great detail about build script for SourceHut Pages, but feel free to take a look at my <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/.build.yml">very own build file for this website</a>. That <em>should</em> work out-of-the-box for most standard Jekyll websites. (Just be sure to edit with your own details!)</p> + +<p><strong>That’s it</strong>. You now have links to blogs you enjoy that will update with each build. Of course, the “latest” blog posts shown will become out-of-date if you don’t blog (or at least re-build your website) on a regular basis. But for me, I see this as a good motivator to keep pushing out content!</p> + <p>Happy sharing!</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> <li>Well, as dynamic as a static website can be!</li> </ol> diff --git a/build/over-engineering-an-oil-tank/index.html b/build/over-engineering-an-oil-tank/index.html index 368e2b1..e5c88ef 100644 --- a/build/over-engineering-an-oil-tank/index.html +++ b/build/over-engineering-an-oil-tank/index.html @@ -1,42 +1,83 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Over-Engineering an Oil Tank Gauge</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Over-Engineering an Oil Tank Gauge</h1> +<h1 id="over-engineering-an-oil-tank-gauge">Over-Engineering an Oil Tank Gauge</h1> + <p>2020-09-09</p> -<p>I almost went down the path of investing a huge amount of time and effort into fixing a stuck oil fuel tank float-gauge in my house. Recently, the float mechanism became stuck and permanently displayed <code>empty</code> regardless of how much fuel was in the tank - not ideal. It's a 20 year-old tank, so I wasn't surprised that the float finally gave out. </p> -<p>Being the wannabe tinkerer that I am, a light bulb went off in my head and I started thinking on how to incorporate some ultrasonic system to display the accurate fuel reading digitally. Obviously my first thought was just to replace the float gauge with a new one and be done with it. That didn't sound very <em>fun</em> though.</p> -<p>I briefly looked at other similar projects and started brainstorming the best way I would implement this for my own situation. The best option I came across seemed to be this: <a href="https://scottiestech.info/2017/10/24/diy-ultrasonic-fuel-gauge-level-sensor/">DIY Ultrasonic Fuel Gauge / Level Sensor</a></p> + +<p>I almost went down the path of investing a huge amount of time and effort into fixing a stuck oil fuel tank float-gauge in my house. Recently, the float mechanism became stuck and permanently displayed <code>empty</code> regardless of how much fuel was in the tank - not ideal. It’s a 20 year-old tank, so I wasn’t surprised that the float finally gave out. </p> + +<p>Being the wannabe tinkerer that I am, a light bulb went off in my head and I started thinking on how to incorporate some ultrasonic system to display the accurate fuel reading digitally. Obviously my first thought was just to replace the float gauge with a new one and be done with it. That didn’t sound very <em>fun</em> though.</p> + +<p>I briefly looked at other similar projects and started brainstorming the best way I would implement this for my own situation. The best option I came across seemed to be this: <a href="https://scottiestech.info/2017/10/24/diy-ultrasonic-fuel-gauge-level-sensor/">DIY Ultrasonic Fuel Gauge / Level Sensor</a></p> + <p>An ultrasonic system with a cool mini display sounded pretty rad - much cooler than just replacing the broken gauge with a new float arm. So it was settled.</p> -<h2>My oil think-tank</h2> -<p>I quickly thought through my options in my head before jumping too far into things (and even included a "poor-mans" temperature strip option):</p> + +<h2 id="my-oil-think-tank">My oil think-tank</h2> + +<p>I quickly thought through my options in my head before jumping too far into things (and even included a “poor-mans” temperature strip option):</p> + <table> -<tr><th>Solution </th><th>Cost </th><th>Time </th></tr> -<tr><td>Ultrasonic Gauge </td><td>$40-50 </td><td>~2-3 hours </td></tr> -<tr><td>New Float Gauge </td><td>$25-30 </td><td>~45 minutes </td></tr> -<tr><td>Temperature Strips </td><td>$10 </td><td>~2 minutes </td></tr> +<thead> +<tr> +<th>Solution</th> +<th>Cost</th> +<th>Time</th> +</tr> +</thead> + +<tbody> +<tr> +<td>Ultrasonic Gauge</td> +<td>$40-50</td> +<td>~2-3 hours</td> +</tr> +<tr> +<td>New Float Gauge</td> +<td>$25-30</td> +<td>~45 minutes</td> +</tr> +<tr> +<td>Temperature Strips</td> +<td>$10</td> +<td>~2 minutes</td> +</tr> +</tbody> </table> -My mind was still set on building and implementing the ultrasonic option. It would be a great learning experience at the very least!<p>So, before I ordered any parts or started designing a case that would house this new super-cool device, I went to investigate/remove the float gauge to get a better look at the damage. With the help of some penetrating oil (the original installer went crazy with the pipe dope) and my trusty wrench, I opened up the gauge cap, partly lifting the float from the tank. Right away I noticed that the float and shaft were slightly stuck together in one small area. I poked it with my finger.</p> + +<p>My mind was still set on building and implementing the ultrasonic option. It would be a great learning experience at the very least!</p> + +<p>So, before I ordered any parts or started designing a case that would house this new super-cool device, I went to investigate/remove the float gauge to get a better look at the damage. With the help of some penetrating oil (the original installer went crazy with the pipe dope) and my trusty wrench, I opened up the gauge cap, partly lifting the float from the tank. Right away I noticed that the float and shaft were slightly stuck together in one small area. I poked it with my finger.</p> + <p><em>The float set itself back into the correct position. It was fixed.</em></p> + <p>How could I have been so dumb. I was so excited about <em>building something</em> that I jumped into implementation before fully realizing the problem. Talk about a metaphor for web dev, am I right?</p> -<h2>Overthinking simple problems</h2> -<p>I can't speak for all designers / developers out there, but I catch myself (far more often than I'd like to admit) over-engineering a solution because of some perceived notion that it is the "best" option. Most of the time it isn't actually better, it just seems more <em>fun</em>.</p> -<p>Now don't get me wrong, fun is a good thing most of the time. It's just that some instances call for the quickest, cleanest, easiest solution in the name of efficiency - just be sure to have fully explored the problem <em>first</em>.</p> -<h2>Final decision</h2> -<p>So I ended up doing nothing. I simply re-threaded the cap and placed the float back inside the tank. I know I saved myself time and money, but I can't help but feel like I failed...</p> -<p>Just like in the world of software, it's best to avoid over-engineering simple problems.</p> + +<h2 id="overthinking-simple-problems">Overthinking simple problems</h2> + +<p>I can’t speak for all designers / developers out there, but I catch myself (far more often than I’d like to admit) over-engineering a solution because of some perceived notion that it is the “best” option. Most of the time it isn’t actually better, it just seems more <em>fun</em>.</p> + +<p>Now don’t get me wrong, fun is a good thing most of the time. It’s just that some instances call for the quickest, cleanest, easiest solution in the name of efficiency - just be sure to have fully explored the problem <em>first</em>.</p> + +<h2 id="final-decision">Final decision</h2> + +<p>So I ended up doing nothing. I simply re-threaded the cap and placed the float back inside the tank. I know I saved myself time and money, but I can’t help but feel like I failed…</p> + +<p>Just like in the world of software, it’s best to avoid over-engineering simple problems.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/over-nesting/index.html b/build/over-nesting/index.html index 01704e3..09d82fc 100644 --- a/build/over-nesting/index.html +++ b/build/over-nesting/index.html @@ -1,60 +1,75 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Over-Nesting</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Over-Nesting</h1> +<h1 id="over-nesting">Over-Nesting</h1> + <p>2019-01-06</p> -<p>I think since our design industry moves so quickly and exciting new technologies get released almost daily, that we often forget some of the basics when writing CSS. I bring this up because I've recently worked on a few projects that show a slight disregard for proper class/selector nesting.</p> -<p>Now it's completely understandable why designers and teams alike shrug off the concept of "over-nesting":</p> + +<p>I think since our design industry moves so quickly and exciting new technologies get released almost daily, that we often forget some of the basics when writing CSS. I bring this up because I’ve recently worked on a few projects that show a slight disregard for proper class/selector nesting.</p> + +<p>Now it’s completely understandable why designers and teams alike shrug off the concept of “over-nesting”:</p> + <ul> <li>As a team we know the structure of our code (no outside party needs to interact with it)</li> -<li>Everything is written in <code>insert pre-processor here</code> - so it's cleaner/compiled anyway</li> -<li>It's <em>technically</em> DRY</li> +<li>Everything is written in <code>insert pre-processor here</code> - so it’s cleaner/compiled anyway</li> +<li>It’s <em>technically</em> DRY</li> </ul> -<p>I personally believe these are all weak excuses that don't justify the poor experience future maintainers of your code will face. <em>You should always write your code with the idea someone completely new to the project will have to maintain it</em>.</p> -<p>Let's look at an average example of poor nesting that I've seen out in the wild:</p> -<pre><code>/* These children elements can't be used outside -of the parent - not very flexible */ + +<p>I personally believe these are all weak excuses that don’t justify the poor experience future maintainers of your code will face. <em>You should always write your code with the idea someone completely new to the project will have to maintain it</em>.</p> + +<p>Let’s look at an average example of poor nesting that I’ve seen out in the wild:</p> + +<pre><code>/* These children elements can't be used outside +of the parent - not very flexible */ .main-container { .child-container { - /* This class specificity is too deep */ + /* This class specificity is too deep */ .sub-child-container {} } } </code></pre> -<p>Even if you know a child element will never be structured outside of it's parent, what harm does it cause to still place it out of such deep specificity?</p> -<pre><code>/* This code is far more reusable */ + +<p>Even if you know a child element will never be structured outside of it’s parent, what harm does it cause to still place it out of such deep specificity?</p> + +<pre><code>/* This code is far more reusable */ .main-container {} .child-container {} .sub-child-container {} </code></pre> -<h3>Exceptions</h3> + +<h3 id="exceptions">Exceptions</h3> + <p>As with anything, there are exceptions to the <em>rule</em>. If the nested elements pertain to the parent itself, it makes complete sense to group these stylings together. A button or link item are excellent examples of this:</p> + <pre><code>.btn-lg { - &:hover {} - &:active {} - &:disabled{} + &:hover {} + &:active {} + &:disabled{} } .link-item { - &:hover{} - &:focus{} + &:hover{} + &:focus{} } </code></pre> -<p>Of course, this is all easier said than done. Limitations exist within teams or even on an individual level that might make this impossible to change. Maybe you don't have the authority to rework your current CSS or it would eat up too many cycles and time is valuable - especially in the world of startups. </p> -<p>I'm not saying this is <strong>the only way to structure CSS</strong> - I'm only trying to make the lives of future designers/developers easier moving forward. </p> + +<p>Of course, this is all easier said than done. Limitations exist within teams or even on an individual level that might make this impossible to change. Maybe you don’t have the authority to rework your current CSS or it would eat up too many cycles and time is valuable - especially in the world of startups. </p> + +<p>I’m not saying this is <strong>the only way to structure CSS</strong> - I’m only trying to make the lives of future designers/developers easier moving forward. </p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/paid-mac-apps/index.html b/build/paid-mac-apps/index.html index 09d01e8..b68fdd0 100644 --- a/build/paid-mac-apps/index.html +++ b/build/paid-mac-apps/index.html @@ -1,48 +1,71 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Happily Paying For macOS Apps</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Happily Paying For macOS Apps</h1> +<h1 id="happily-paying-for-macos-apps">Happily Paying For macOS Apps</h1> + <p>2022-06-29</p> -<p>It's no secret that I am a huge advocate for open source software. A solid chunk of my day-to-day workload is done so via FOSS[^0] systems. I also manage a handful of fun side projects that are normally shipped under either MIT or GPL licensing. But that doesn't mean I still don't enjoy <em>some</em> non-free, proprietary software.</p> -<p>So, I thought I would share my collection of macOS applications that I happily paid for. (There aren't many since my needs are limited)</p> -<h2>Design Tool: Sketch</h2> + +<p>It’s no secret that I am a huge advocate for open source software. A solid chunk of my day-to-day workload is done so via FOSS[^0] systems. I also manage a handful of fun side projects that are normally shipped under either MIT or GPL licensing. But that doesn’t mean I still don’t enjoy <em>some</em> non-free, proprietary software.</p> + +<p>So, I thought I would share my collection of macOS applications that I happily paid for. (There aren’t many since my needs are limited)</p> + +<h2 id="design-tool-sketch">Design Tool: Sketch</h2> + <p>My day job requires me to use Figma, which is totally fine but not nearly as polished as Sketch. Yes, Figma is cross-platform. Yes, Figma can run directly in the browser. Yes, Figma is free for most smaller team sizes.</p> + <p>But sorry - Sketch is just better.</p> -<p>Since the team at Bohemian Coding have crafted Sketch specifically for macOS it feels native, runs extremely well and fits in with the rest of the ecosystem. The pricing model is okay in my books too, balancing a fine line between <em>optional</em> yearly subscriptions and one-time purchases. It's a smart move and I much prefer it to a forced subscription plan.</p> -<p>URL: <a href="https://www.sketch.com/">https://www.sketch.com/</a></p> -<h2>Password Manager: Secrets</h2> -<p>I was originally a subscriber to 1Password but couldn't justify spending $7CDN a month for what it was offering. Also, subscriptions suck. After doing some research I stumbled upon Secrets and noticed some things about it that instantly caught my eye:</p> + +<p>Since the team at Bohemian Coding have crafted Sketch specifically for macOS it feels native, runs extremely well and fits in with the rest of the ecosystem. The pricing model is okay in my books too, balancing a fine line between <em>optional</em> yearly subscriptions and one-time purchases. It’s a smart move and I much prefer it to a forced subscription plan.</p> + +<p>URL: <a href="https://www.sketch.com/">https://www.sketch.com/</a></p> + +<h2 id="password-manager-secrets">Password Manager: Secrets</h2> + +<p>I was originally a subscriber to 1Password but couldn’t justify spending $7CDN a month for what it was offering. Also, subscriptions suck. After doing some research I stumbled upon Secrets and noticed some things about it that instantly caught my eye:</p> + <ul> <li>No subscriptions! One-time price forever.</li> <li>iCloud Sync across devices</li> -<li>Browser extension support (although I don't use this personally)</li> +<li>Browser extension support (although I don’t use this personally)</li> <li>Developed by a one-man team (support indie devs!)</li> </ul> -<p>I purchased both the macOS and iOS versions of Secrets after trying out the free version almost immediately. It's wonderful. The UI is clean and flows well with the rest of the Mac ecosystem to give it a native "Apple" feel. Syncing my laptop and iPhone works seamless via iCloud.</p> + +<p>I purchased both the macOS and iOS versions of Secrets after trying out the free version almost immediately. It’s wonderful. The UI is clean and flows well with the rest of the Mac ecosystem to give it a native “Apple” feel. Syncing my laptop and iPhone works seamless via iCloud.</p> + <p>And best of all - no monthly fees.</p> -<p>URL: <a href="https://outercorner.com/secrets-mac/">https://outercorner.com/secrets-mac/</a></p> -<h2>Transferring Files: Transmit 5</h2> -<p>The folks at Panic make incredible Mac and iOS apps. I see them as one of the best in the industry. In the early days of my web development career, I used to run Coda exclusively. I've since moved on the Sublime Text but I still have fond memories of the old Panic editor.</p> -<p>As for FTP access, I still use Panic's Transmit to this day. Beautiful UI that feels snappy even when transferring massive files across servers. Transmit is also a one-time purchase. Thank goodness. (Have I mentioned that I hate software subscriptions?)</p> -<p>URL: <a href="https://panic.com/transmit/">https://panic.com/transmit/</a></p> -<h2>Wrapping Up</h2> -<p>I know this list only includes 3 applications, but that's truly all the ones I've spent money on. If in the future I happen to purchase any others I will be sure to update this post accordingly.</p> -<h2>Refs</h2> + +<p>URL: <a href="https://outercorner.com/secrets-mac/">https://outercorner.com/secrets-mac/</a></p> + +<h2 id="transferring-files-transmit-5">Transferring Files: Transmit 5</h2> + +<p>The folks at Panic make incredible Mac and iOS apps. I see them as one of the best in the industry. In the early days of my web development career, I used to run Coda exclusively. I’ve since moved on the Sublime Text but I still have fond memories of the old Panic editor.</p> + +<p>As for FTP access, I still use Panic’s Transmit to this day. Beautiful UI that feels snappy even when transferring massive files across servers. Transmit is also a one-time purchase. Thank goodness. (Have I mentioned that I hate software subscriptions?)</p> + +<p>URL: <a href="https://panic.com/transmit/">https://panic.com/transmit/</a></p> + +<h2 id="wrapping-up">Wrapping Up</h2> + +<p>I know this list only includes 3 applications, but that’s truly all the ones I’ve spent money on. If in the future I happen to purchase any others I will be sure to update this post accordingly.</p> + +<h2 id="refs">Refs</h2> + <ol> -<li>Free & open source software</li> +<li>Free & open source software</li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/pblog/index.html b/build/pblog/index.html index 090bbd4..0204cb6 100644 --- a/build/pblog/index.html +++ b/build/pblog/index.html @@ -1,48 +1,71 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Yet Another Static Site Generator Switch</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Yet Another Static Site Generator Switch</h1> +<h1 id="yet-another-static-site-generator-switch">Yet Another Static Site Generator Switch</h1> + <p>2022-07-06</p> -<p>If you're an RSS subscriber, I've probably blown up your feed reader (again). This seems to be an on-going theme with this blog. I can't help it.</p> -<p>This website now uses my <em>new</em> Pandoc-based static blog generator: <a href="https://pblog.bt.ht">pblog</a>. I won't go into great detail about it's features (or lack thereof) - if you're interested in that, check out the <a href="https://pblog.bt.ht/blog/pblog-intro.html">"Introducing pblog" article</a>.</p> -<p>The bigger question is, "Why the change?"</p> -<h2>Where's the Love for "Shinobi"?</h2> -<p>Switching over to <code>pblog</code> wasn't caused by a dislike of using <a href="https://shinobi.bt.ht">Shinobi</a>. In fact, I still really enjoy the work flow that that plain-text focused SSG provides. The main issues that popped up for my own blog was <em>accessibility</em> and <em>poor user experience</em>.</p> -<p>I had multiple readers reach out and mention poor rendering of content in their RSS reader of choice. That's kind of a <strong>big deal</strong>. I test that project as best I can with my limited access to all available RSS readers - but I can only test so much. It became one of those "Well, it works on my machine!" meme. So instead of spending an untold amount of time debugging every RSS reader known to man, I figured my best bet was to render things as <code>HTML</code>.</p> -<p>The next big issue was <em>accessibility</em>. Screen readers can read <code>txt</code> formatted files perfectly fine but since elements aren't categorized everything ends up with the same level hierarchy. This can cause confusion between headers, list items, URLs, footers etc. For my personal use-case (sharing tutorials and covering design topics) it didn't make sense to sacrifice user accessibility for minimalism.</p> -<h2>The Search for Simplicity</h2> -<p>My initial thought process was to include some form of "plus" add-on to the existing Shinobi build script. The idea was to render <code>HTML</code> versions of each post and dump those into the generated RSS file. Although maybe good in theory, it ended up impractical because:</p> + +<p>If you’re an RSS subscriber, I’ve probably blown up your feed reader (again). This seems to be an on-going theme with this blog. I can’t help it.</p> + +<p>This website now uses my <em>new</em> Pandoc-based static blog generator: <a href="https://pblog.bt.ht">pblog</a>. I won’t go into great detail about it’s features (or lack thereof) - if you’re interested in that, check out the <a href="https://pblog.bt.ht/blog/pblog-intro.html">“Introducing pblog” article</a>.</p> + +<p>The bigger question is, “Why the change?”</p> + +<h2 id="wheres-the-love-for-shinobi">Where’s the Love for “Shinobi”?</h2> + +<p>Switching over to <code>pblog</code> wasn’t caused by a dislike of using <a href="https://shinobi.bt.ht">Shinobi</a>. In fact, I still really enjoy the work flow that that plain-text focused SSG provides. The main issues that popped up for my own blog was <em>accessibility</em> and <em>poor user experience</em>.</p> + +<p>I had multiple readers reach out and mention poor rendering of content in their RSS reader of choice. That’s kind of a <strong>big deal</strong>. I test that project as best I can with my limited access to all available RSS readers - but I can only test so much. It became one of those “Well, it works on my machine!” meme. So instead of spending an untold amount of time debugging every RSS reader known to man, I figured my best bet was to render things as <code>HTML</code>.</p> + +<p>The next big issue was <em>accessibility</em>. Screen readers can read <code>txt</code> formatted files perfectly fine but since elements aren’t categorized everything ends up with the same level hierarchy. This can cause confusion between headers, list items, URLs, footers etc. For my personal use-case (sharing tutorials and covering design topics) it didn’t make sense to sacrifice user accessibility for minimalism.</p> + +<h2 id="the-search-for-simplicity">The Search for Simplicity</h2> + +<p>My initial thought process was to include some form of “plus” add-on to the existing Shinobi build script. The idea was to render <code>HTML</code> versions of each post and dump those into the generated RSS file. Although maybe good in theory, it ended up impractical because:</p> + <ol> <li>No utility or existing tool could render the style of text-based formatting I implemented as semantic HTML (at least not without heavy customization and tinkering)</li> <li>I was actually adding extra bloat to the Shinobi project (true minimalism is the point, right?)</li> </ol> + <p>So, that option was ruled out pretty quickly.</p> -<p>The next option didn't take me long to land on: <em>Pandoc</em>. I've used Pandoc for years and have nothing but great experiences tweaking it for my own needs. I knew that I could piggyback off the original <code>shell</code> commands in the Shinobi project and alter them as needed to incorporate Pandoc.</p> -<p>I honestly didn't run into many issues while rolling this out. Fairly seamless!</p> -<h2>New Workflow</h2> -<p>With this new blog switch I also decided to try out a new <em>deploy</em> workflow. I've used <code>rsync</code> for the longest time but wanted to have something more GUI-based on macOS. I know, <em>blasphemy</em>!</p> + +<p>The next option didn’t take me long to land on: <em>Pandoc</em>. I’ve used Pandoc for years and have nothing but great experiences tweaking it for my own needs. I knew that I could piggyback off the original <code>shell</code> commands in the Shinobi project and alter them as needed to incorporate Pandoc.</p> + +<p>I honestly didn’t run into many issues while rolling this out. Fairly seamless!</p> + +<h2 id="new-workflow">New Workflow</h2> + +<p>With this new blog switch I also decided to try out a new <em>deploy</em> workflow. I’ve used <code>rsync</code> for the longest time but wanted to have something more GUI-based on macOS. I know, <em>blasphemy</em>!</p> + <p>Since I already have a Transmit license, that seemed like the best fit since it is designed specifically for macOS. Now my workflow process is as follows:</p> + <ol> <li>Write new posts in my root <code>posts</code> folder</li> <li>Rebuild the <code>pblog</code> with <code>make</code></li> <li>Use the built-in sync function of Transmit to mirror my local <code>_output</code> with my web server</li> </ol> + <p><img src="/public/images/transmit-ftp.webp" alt="The Transmit UI in all of its wonderful glory (before I updated)" /></p> -<h3>Wrapping Up</h3> -<p>Will there be bugs with this switch-over? Most likely. Will some URLs be left behind or broken? Possibly. These small issues will be ironed out over time. For now, I'm quite happy with keeping things minimal on the workflow side of things, while preserving accessibility and user experience with the output.</p> + +<h3 id="wrapping-up">Wrapping Up</h3> + +<p>Will there be bugs with this switch-over? Most likely. Will some URLs be left behind or broken? Possibly. These small issues will be ironed out over time. For now, I’m quite happy with keeping things minimal on the workflow side of things, while preserving accessibility and user experience with the output.</p> + <p>Thanks for reading!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/performance-focused-wordpress-theme/index.html b/build/performance-focused-wordpress-theme/index.html index a482f76..d7ee28d 100644 --- a/build/performance-focused-wordpress-theme/index.html +++ b/build/performance-focused-wordpress-theme/index.html @@ -1,72 +1,96 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Create a Performance-Focused WordPress Blog</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Create a Performance-Focused WordPress Blog</h1> +<h1 id="create-a-performance-focused-wordpress-blog">Create a Performance-Focused WordPress Blog</h1> + <p>2021-09-08</p> -<p>With my recent switch back to WordPress, and having read Kev Quirk’s <a href="https://kevq.uk/core-web-vitals-and-wordpress/" target="_blank" rel="noreferrer noopener">latest post about Core Web Vitals</a>, I wanted to make sure my blog still prioritized speed and performance above all else. I’m happy to say that I have closely replicated the same speed of my original <em>static</em> Jekyll-based version of this blog.</p> -<p>And I've achieved this with barely any effort at all. All that's needed is: </p> + +<p>With my recent switch back to WordPress, and having read Kev Quirk’s latest post about Core Web Vitals, I wanted to make sure my blog still prioritized speed and performance above all else. I’m happy to say that I have closely replicated the same speed of my original <em>static</em> Jekyll-based version of this blog.</p> + +<p>And I’ve achieved this with barely any effort at all. All that’s needed is: </p> + <ul> <li>a lightweight WordPress theme</li> <li>two free WordPress plugins</li> -<li>cheap & fast web hosting</li> +<li>cheap & fast web hosting</li> </ul> + <p>Let me breakdown each component so those of you interested can do the same without hitting any roadblocks.</p> -<h2>Choosing Your WordPress Theme</h2> + +<h2 id="choosing-your-wordpress-theme">Choosing Your WordPress Theme</h2> + <p>Selecting an existing theme or trying to build your own can be a daunting experience. For my needs, I forced myself to find an existing theme and just run with it. This gives me more time to focus on writing instead of constantly tweaking the blog’s visuals.</p> + <p>I would suggest either using the default starter theme (as of this writing: Twenty Twenty One theme by Automattic) or looking for specific “lightweight” themes across the web. I highly recommend checking out Anders Norén’s <a href="https://andersnoren.se/teman/">theme collection</a>. Others can be found on the official <a href="https://wordpress.org/">wordpress.org</a> website.</p> -<h2>Two Simple Plugins</h2> -<p>Once you have decided on a theme, you'll also want to be sure to install two very important plugins that greatly help with performance:</p> + +<h2 id="two-simple-plugins">Two Simple Plugins</h2> + +<p>Once you have decided on a theme, you’ll also want to be sure to install two very important plugins that greatly help with performance:</p> + <ol> -<li>Jetpack Boost – <a href="https://wordpress.org/plugins/jetpack-boost/">wordpress.org/plugins/jetpack-boost/</a></li> -<li>Yoast SEO – <a href="https://wordpress.org/plugins/wordpress-seo/">wordpress.org/plugins/wordpress-seo/</a></li> +<li>Jetpack Boost – <a href="https://wordpress.org/plugins/jetpack-boost/">wordpress.org/plugins/jetpack-boost/</a></li> +<li>Yoast SEO – <a href="https://wordpress.org/plugins/wordpress-seo/">wordpress.org/plugins/wordpress-seo/</a></li> </ol> -<h2>Jetpack Boost</h2> + +<h2 id="jetpack-boost">Jetpack Boost</h2> + <p>This plugin is fantastic. Not only will it run a proper audit (based off Google’s Lighthouse tool) but also gives you the ability to activate optimized CSS, lazy image loading and deferring non-essential JavaScript (if applicable). All of this is done in a super-clean user interface directly inside your WordPress admin.</p> + <p>Check out my own testing site metrics below:</p> -<p><figure> - <img src="/public/images/jetpack-boost.webp" alt="Jetpack boost numbers"> - <figcaption>The Jetpack Boost metrics for this website (and yes, that 99 score for mobile kills me)</figcaption> -</figure></p> -<h2>Yoast SEO</h2> + +<h2 id="yoast-seo">Yoast SEO</h2> + <p>If you’ve worked with WordPress at all you have surely heard of Yoast. Adding this plugin to your site is really a no-brainer. The automatic generation of meta data and SEO tags can save you a lot of time while also improving your overall Lighthouse score.</p> + <p>Here is the Lighthouse audit for the test WordPress website:</p> -<p><figure> - <img src="/public/images/ugly-duck-audit.webp" alt="Lighthouse audit"> - <figcaption>It might not be perfect, but it’s pretty damn close!</figcaption> -</figure></p> + <p>Those scores were achieved without any custom work on my end – I simply activated the plugin and let it work it’s magic. Great stuff.</p> -<h2>Host Everything on EasyWP</h2> + +<h2 id="host-everything-on-easywp">Host Everything on EasyWP</h2> + <p>Up to this point we haven’t spent a single penny. Unfortunately, web hosting isn’t free and you’re going to need it if you actually want your website to have a home on the interwebs!</p> + <p>I know – I can hear your collective voices shouting out:</p> -<blockquote><p>Isn't web hosting a little expensive just for my simple hobby blog/site?</p> -<p>-- <cite>Some of you</cite></p> + +<blockquote> +<p>Isn’t web hosting a little expensive just for my simple hobby blog/site?</p> + +<p>– Some of you</p> </blockquote> -<p>I host this test blog for just <strong>$3.88/month</strong> and the service is actually good. Unreal, right? That’s the price of a medium coffee, so I’m pretty sure it won’t break the bank.</p> -<p>This “cheap” hosting is through EasyWP and the Starter plan ($3.88/month) comes with the following:</p> + +<p>I host this test blog for just <strong>$3.88/month</strong> and the service is actually good. Unreal, right? That’s the price of a medium coffee, so I’m pretty sure it won’t break the bank.</p> + +<p>This “cheap” hosting is through EasyWP and the Starter plan ($3.88/month) comes with the following:</p> + <ul> <li>10 GB SSD storage</li> -<li>50k visitors/month</li> +<li>50k visitors/month</li> <li>Unlimited bandwidth</li> <li>Backups (though not automatic)</li> <li>SFTP access</li> -<li>EasyWP Cache plugin (and it's actually good!)</li> +<li>EasyWP Cache plugin (and it’s actually good!)</li> </ul> + <p>You will need to snag your own SSL certificate though, but this is easily obtained with something like <a href="https://letsencrypt.org">letsencrypt.org</a>.</p> + <p>Best of all, if in the future you require more features the next pricing tier is still only $7.88. Not too shabby!</p> -<h2>Try Yourself</h2> + +<h2 id="try-yourself">Try Yourself</h2> + <p>The fact that EasyWP gives you a free month trial, there really is no reason not to try spinning up your own blog or online store or whatever the heck you want to build. The more people with personal spaces on the web the better.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/personal-website-opinions/index.html b/build/personal-website-opinions/index.html index 7ce9782..4eeb401 100644 --- a/build/personal-website-opinions/index.html +++ b/build/personal-website-opinions/index.html @@ -1,31 +1,43 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>My Changing Opinion on Personal Website Design</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>My Changing Opinion on Personal Website Design</h1> +<h1 id="my-changing-opinion-on-personal-website-design">My Changing Opinion on Personal Website Design</h1> + <p>2021-05-19</p> -<p>Hey would you look at that - my personal blog has been redesigned <em>again</em>! Although I am still using good ol' Jekyll for the backend, I have now added a more fleshed-out CSS design which also includes a set of open source custom typefaces.</p> -<p><strong>Gasp!</strong> "How <em>could</em> you?!" I hear you ask. Let me explain.</p> -<h2>Personal sites should feel personal</h2> -<p>I can see how this change might seem hypocritical (it took some convincing myself) but I decided to follow in to footsteps of Kev Quirk and <a href="https://kevq.uk/adding-some-whimsy-character/">added a little whimsy and character</a> to my website. After all, personal websites should <em>feel personal</em>. My obsession with barebones HTML & CSS serves its purpose on other public projects, but seems limiting for my own little space on the interwebs.</p> -<h2>Banned from my own club</h2> -<p>I had originally converted this blog's design to use <em>zero</em> CSS and instead rely solely on default browser styling. The main reasoning for doing so, was to have the ability to include my own personal website in the <a href="https://xhtml.club">XHTML Club</a> project. (I never said it was a <em>good</em> reason)</p> -<p>After giving it some thought, I've decided that this limitation seemed too extreme even for me.</p> -<h2>Moving forward</h2> -<p>I know I always say "With this new design, I can finally focus on just writing content!" - but this is a lie. I'll probably be fiddling with my personal website until the day I die. The good news is that I <em>do</em> have a few tutorial blog posts lined up to publish soon - so be on the lookout for those!</p> -<p>Thanks for reading through my pointless ramblings about personal websites. It's good to just vent about these things sometimes...</p> + +<p>Hey would you look at that - my personal blog has been redesigned <em>again</em>! Although I am still using good ol’ Jekyll for the backend, I have now added a more fleshed-out CSS design which also includes a set of open source custom typefaces.</p> + +<p><strong>Gasp!</strong> “How <em>could</em> you?!” I hear you ask. Let me explain.</p> + +<h2 id="personal-sites-should-feel-personal">Personal sites should feel personal</h2> + +<p>I can see how this change might seem hypocritical (it took some convincing myself) but I decided to follow in to footsteps of Kev Quirk and <a href="https://kevq.uk/adding-some-whimsy-character/">added a little whimsy and character</a> to my website. After all, personal websites should <em>feel personal</em>. My obsession with barebones HTML & CSS serves its purpose on other public projects, but seems limiting for my own little space on the interwebs.</p> + +<h2 id="banned-from-my-own-club">Banned from my own club</h2> + +<p>I had originally converted this blog’s design to use <em>zero</em> CSS and instead rely solely on default browser styling. The main reasoning for doing so, was to have the ability to include my own personal website in the <a href="https://xhtml.club">XHTML Club</a> project. (I never said it was a <em>good</em> reason)</p> + +<p>After giving it some thought, I’ve decided that this limitation seemed too extreme even for me.</p> + +<h2 id="moving-forward">Moving forward</h2> + +<p>I know I always say “With this new design, I can finally focus on just writing content!” - but this is a lie. I’ll probably be fiddling with my personal website until the day I die. The good news is that I <em>do</em> have a few tutorial blog posts lined up to publish soon - so be on the lookout for those!</p> + +<p>Thanks for reading through my pointless ramblings about personal websites. It’s good to just vent about these things sometimes…</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/phpetite/index.html b/build/phpetite/index.html index d735d7e..a5b53cd 100644 --- a/build/phpetite/index.html +++ b/build/phpetite/index.html @@ -1,62 +1,84 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>89 Blog Posts in a Single HTML File</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>89 Blog Posts in a Single HTML File</h1> +<h1 id="89-blog-posts-in-a-single-html-file">89 Blog Posts in a Single HTML File</h1> + <p>2021-04-22</p> -<p><em>This is no longer the current setup of my blog</em>. I have switched back to Jekyll for performance reasons. I'll be leaving this post up as a point of reference though :)</p> -<hr /> -<p>This is my personal blog (if that wasn't already obvious). I currently have 89 blog posts living here. But I have done something magical today:</p> + +<p><em>This is no longer the current setup of my blog</em>. I have switched back to Jekyll for performance reasons. I’ll be leaving this post up as a point of reference though :)</p> + +<hr/> + +<p>This is my personal blog (if that wasn’t already obvious). I currently have 89 blog posts living here. But I have done something magical today:</p> + <p>All of these articles are rendered inside a <em>single HTML file</em>. 🤯</p> -<h2>What Sorcery is This?!</h2> -<p>No magic here - I'm just using my own personal static site generator called <a href="https://phpetite.org">PHPetite</a>. You can find all the code and more information about PHPetite on the <a href="https://github.com/bradleytaunt/phpetite">official Github repo page</a>. Please note that this project is still very much a WIP, so go easy on me when pointing out bugs or issues!</p> -<h2>Pingdom Stats</h2> -<p>Before we get into more details on how everything is built, let's take a quick look at some of my website stats (not that pure numbers are 100% accurate of user experience):</p> + +<h2 id="what-sorcery-is-this">What Sorcery is This?!</h2> + +<p>No magic here - I’m just using my own personal static site generator called <a href="https://phpetite.org">PHPetite</a>. You can find all the code and more information about PHPetite on the <a href="https://github.com/bradleytaunt/phpetite">official Github repo page</a>. Please note that this project is still very much a WIP, so go easy on me when pointing out bugs or issues!</p> + +<h2 id="pingdom-stats">Pingdom Stats</h2> + +<p>Before we get into more details on how everything is built, let’s take a quick look at some of my website stats (not that pure numbers are 100% accurate of user experience):</p> + <ul> <li>99 Performance Grade</li> <li>951 ms Load Time</li> <li>231.3 KB Page Size (thank you Netlify compression!)</li> </ul> + <p><a href="https://tools.pingdom.com/#5e169d6a82000000">See all the Pingdom details for yourself</a></p> + <p>Now the <code>Page Size</code> will certainly change as more blog posts are added over time, but if the total webpage size is roughly 230 KB with 89 blog posts, I figure that gives me the ability to add another 200 or so posts before I cross the <a href="https://1mb.club">1MB threshold</a></p> -<p>I'll deal with how to load in the content more efficiently when that times comes...</p> -<h2>What About Images?</h2> -<p>Good question. Since a large portion of my articles tend to be focused on design and CSS, visual examples are somewhat important. So how do I avoid loading in all the individual images on every single post into this single HTML "website"?</p> -<p>Easy - I don't load any images at all.</p> + +<p>I’ll deal with how to load in the content more efficiently when that times comes…</p> + +<h2 id="what-about-images">What About Images?</h2> + +<p>Good question. Since a large portion of my articles tend to be focused on design and CSS, visual examples are somewhat important. So how do I avoid loading in all the individual images on every single post into this single HTML “website”?</p> + +<p>Easy - I don’t load any images at all.</p> + <p>I now simply set any images that are not included in the current, visible <code>section</code> to <code>display: none</code>. This avoids breaking things with the RSS feed.</p> + <p>Here is an image example of an old Dribbble shot I created years ago:</p> -<p><figure> -<div class="img-parent"> -<img loading="lazy" src="/placeholder-image.webp" onclick="this.src='/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons"> -</div> -<figcaption><b>Click the placeholder to load in the real image</b><br>Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption> -</figure></p> -<p>I have noticed that Safari / Firefox on iOS renders the imagery as broken image links - I plan to look into this further to avoid that confusion. For now it works well on desktop Chromium and Firefox.</p> -<pre><code><figure> - <div class="img-parent"> - <img loading="lazy" src="/placeholder-image.webp" onclick="this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons"> - </div> - <figcaption><b>Click the placeholder to load in the real image</b><br>Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption> -</figure> + +<p>I have noticed that Safari / Firefox on iOS renders the imagery as broken image links - I plan to look into this further to avoid that confusion. For now it works well on desktop Chromium and Firefox.</p> + +<pre><code><figure> + <div class="img-parent"> + <img loading="lazy" src="/placeholder-image.webp" onclick="this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons"> + </div> + <figcaption><b>Click the placeholder to load in the real image</b><br>Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption> +</figure> </code></pre> -<h2>How's the SEO?</h2> -<p>Probably terrible to be honest. One single file for all blog posts is something Google will most likely frown upon. Whatever - it's my personal blog so I don't really give a shit.</p> -<h2>RSS Feed</h2> -<p>If you recently added my old RSS feed, I'm sorry, but you'll have to update. The new feed is located at <a href="https://tdarb.org/feeds/posts.xml">tdarb.org/feeds/posts.xml</a>. I made this change to avoid spamming the current feed users.</p> -<h2>Tasty Dog Food</h2> + +<h2 id="hows-the-seo">How’s the SEO?</h2> + +<p>Probably terrible to be honest. One single file for all blog posts is something Google will most likely frown upon. Whatever - it’s my personal blog so I don’t really give a shit.</p> + +<h2 id="rss-feed">RSS Feed</h2> + +<p>If you recently added my old RSS feed, I’m sorry, but you’ll have to update. The new feed is located at <a href="https://tdarb.org/feeds/posts.xml">tdarb.org/feeds/posts.xml</a>. I made this change to avoid spamming the current feed users.</p> + +<h2 id="tasty-dog-food">Tasty Dog Food</h2> + <p>At the end of the day, by moving my personal blog over to PHPetite, it makes me more aware of current bugs and restrictions within the project. I feel like this will help me to improve this static site generator even more over time, instead of letting it die a slow death ignored on Github.</p> + <p>I hope you enjoyed this little breakdown and maybe even want to try out PHPetite for yourself? 😉</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/pi-400-internal-ssd/index.html b/build/pi-400-internal-ssd/index.html index 6ac5585..a7b5f44 100644 --- a/build/pi-400-internal-ssd/index.html +++ b/build/pi-400-internal-ssd/index.html @@ -1,76 +1,103 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Stuffing an SSD Inside the Raspberry Pi 400</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Stuffing an SSD Inside the Raspberry Pi 400</h1> +<h1 id="stuffing-an-ssd-inside-the-raspberry-pi-400">Stuffing an SSD Inside the Raspberry Pi 400</h1> + <p>2021-08-13</p> -<p>I have successfully jammed an mSATA SSD into the main shell of my Raspberry Pi 400. It wasn't as straightforward as I thought it would be - in fact, most <em>real</em> hardware tinkerers will probably vomit in their mouths once they see how I achieved this...</p> -<p>But I'm happy with my build. Those with better skills and knowledge can most likely improve upon this concept (and please do if you can - I'd love to see it!)</p> + +<p>I have successfully jammed an mSATA SSD into the main shell of my Raspberry Pi 400. It wasn’t as straightforward as I thought it would be - in fact, most <em>real</em> hardware tinkerers will probably vomit in their mouths once they see how I achieved this…</p> + +<p>But I’m happy with my build. Those with better skills and knowledge can most likely improve upon this concept (and please do if you can - I’d love to see it!)</p> + <p>Enough chit-chat - on to the build!</p> -<h2>The Finished "Masterpiece"</h2> + +<h2 id="the-finished-masterpiece">The Finished “Masterpiece”</h2> + <p>Below you can see the final look of my modded Raspberry Pi 400, which I have personally named the <strong>Raspberry Pi 400X</strong>:</p> -<p><figure> - <img src="/public/images/pi-400-final.png" alt="Pi 400 with internal SSD"> - <figcaption>The finished Raspberry Pi 400X (<a href="/public/images/pi-400-final.webp">link to hi-res image</a>)</figcaption> -</figure></p> + <p>Do you see that ugly black USB-C to USB-A cable jutting out from the top? That little guy connects directly to the mSATA SSD <em>inside</em> the plastic keyboard structure and allows us to boot via USB. It also gives us the flexibility to easily <em>unplug</em> the internal SSD for times when we desire to boot from micro SD or a different USB device altogether.</p> + <p>So, how did I make this?</p> -<h2>The Shopping List</h2> -<p>Before we deep dive into the terrible hardware modifications I've made to my Pi, I'll list out all the items/tools I used during the making of this monstrosity:</p> + +<h2 id="the-shopping-list">The Shopping List</h2> + +<p>Before we deep dive into the terrible hardware modifications I’ve made to my Pi, I’ll list out all the items/tools I used during the making of this monstrosity:</p> + <ul> -<li>mSATA 64GB SSD Half Size (KingSpec) &rarr; <a href="https://www.aliexpress.com/item/32385499968.html?spm=a2g0s.9042311.0.0.210e4c4dIH8xWv">AliExpress</a></li> -<li>mSATA to USB 3.1 enclosure (gutted) &rarr; <a href="https://www.amazon.ca/gp/product/B07BBM3BVS/ref=ppx_yo_dt_b_asin_title_o09_s00?ie=UTF8&psc=1">Amazon</a></li> +<li>mSATA 64GB SSD Half Size (KingSpec) → <a href="https://www.aliexpress.com/item/32385499968.html?spm=a2g0s.9042311.0.0.210e4c4dIH8xWv">AliExpress</a></li> +<li>mSATA to USB 3.1 enclosure (gutted) → <a href="https://www.amazon.ca/gp/product/B07BBM3BVS/ref=ppx_yo_dt_b_asin_title_o09_s00?ie=UTF8&psc=1">Amazon</a></li> <li>Dremel rotary tool with soft sanding bits</li> -<li>Metal cutting scissors / knife</li> +<li>Metal cutting scissors / knife</li> <li>Electrical tape</li> <li>Patience</li> </ul> -<h2>Modding the Raspberry Pi 400</h2> -<p>The final product requires us to attach the half size mSATA SSD to the (gutted) enclosure and then insert that directly inside the Pi (next to the lock port / ethernet). Our first step will be to disassemble the Pi 400, safely remove the keyboard module and remove the metal heatsink.</p> + +<h2 id="modding-the-raspberry-pi-400">Modding the Raspberry Pi 400</h2> + +<p>The final product requires us to attach the half size mSATA SSD to the (gutted) enclosure and then insert that directly inside the Pi (next to the lock port / ethernet). Our first step will be to disassemble the Pi 400, safely remove the keyboard module and remove the metal heatsink.</p> + <p>With your trusty metal cutting scissors (or whatever tool you prefer) you will need to cut out room for our enclosure internals to fit within:</p> -<p><figure> - <img src="/public/images/pi-heatsink.png" alt="The cutout heatsink"> - <figcaption>I drew the outline of the enclosure on the metal first before cutting. (<a href="/public/images/pi-heatsink.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>Next you will need to carefully remove the Pi board itself from the red part of the case. Once placed safely aside, it's time to bust out our sanding dremel and remove the jutting plastic blocking our soon-to-be-added SSD. Remember to wear a mask during this phase, since breathing in plastic dust and fumes is not fun!</p> -<p><strong>Important to note:</strong> this will remove one of the screw slots needed to secure the heatsink into the board. Not a big deal if you ask me...</p> -<p><figure> - <img src="/public/images/pi-plastic-back.png" alt="Plastic dremled back"> - <figcaption>Here you can see my terrible sanding job on the far left plastic snap-lock (<a href="/public/images/pi-plastic-back.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>While you have the Pi board removed you should also cut out a slot for the USB-C to USB-A cable to connect our mSATA to one of our USB 3 ports on the Pi. For this I've opted to butcher the lock port (will I ever really use that anyway?)</p> -<p><figure> - <img src="/public/images/pi-outer-port.png" alt="Back of the Pi opening"> - <figcaption>Don't judge...I'm sure most people could do a cleaner job! (<a href="/public/images/pi-outer-port.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>Now all that's left is to insert our gutted mSATA enclosure (with the half size SSD attached of course) + +<p>Next you will need to carefully remove the Pi board itself from the red part of the case. Once placed safely aside, it’s time to bust out our sanding dremel and remove the jutting plastic blocking our soon-to-be-added SSD. Remember to wear a mask during this phase, since breathing in plastic dust and fumes is not fun!</p> + +<p><strong>Important to note:</strong> this will remove one of the screw slots needed to secure the heatsink into the board. Not a big deal if you ask me…</p> + +<p>While you have the Pi board removed you should also cut out a slot for the USB-C to USB-A cable to connect our mSATA to one of our USB 3 ports on the Pi. For this I’ve opted to butcher the lock port (will I ever really use that anyway?)</p> + +<p>Now all that’s left is to insert our gutted mSATA enclosure (with the half size SSD attached of course) , tape it down with some hideous electrical tape and close this bad boy back up!</p> -<p><figure> - <img src="/public/images/pi-internal-ssd.png" alt="The internal SSD"> - <figcaption>Take note of the tiny triangle piece of foam on the Type-C connector. This helps avoid direct contact with the back of the keyboard module! (<a href="/public/images/pi-internal-ssd.webp">link to hi-res image</a>)</figcaption> -</figure></p> -<p>That's it! You now have the portable power of the Raspberry Pi 400, but now with the speed and performance of an SSD!</p> -<h2>The Performance Gains</h2> + +<p>That’s it! You now have the portable power of the Raspberry Pi 400, but now with the speed and performance of an SSD!</p> + +<h2 id="the-performance-gains">The Performance Gains</h2> + <table> -<tr><th>Storage Type</th><th>Seq. Write</th><th>Random W</th><th>Random R</th></tr> -<tr><td>Micro SD Card</td><td>17818 KB/sec</td><td>812 IOPS</td><td>2335 IOPS</td></tr> -<tr><td>mSATA SSD</td><td>206738 KB/sec</td><td>14615 IOPS</td><td>17925 IOPS</td></tr> +<thead> +<tr> +<th>Storage Type</th> +<th>Seq. Write</th> +<th>Random W</th> +<th>Random R</th> +</tr> +</thead> + +<tbody> +<tr> +<td>Micro SD Card</td> +<td>17818 KB/sec</td> +<td>812 IOPS</td> +<td>2335 IOPS</td> +</tr> +<tr> +<td>mSATA SSD</td> +<td>206738 KB/sec</td> +<td>14615 IOPS</td> +<td>17925 IOPS</td> +</tr> +</tbody> </table> -I think it's pretty clear that the SSD blows the default micro SD card out of the water...<h2>Closing Thoughts</h2> + +<p>I think it’s pretty clear that the SSD blows the default micro SD card out of the water…</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + <p>Now clearly you could just plug-in an external SSD and walk away with the same performance boosts - but where is the fun in that?</p> -<p>If anyone decides to improve on this or make a cleaner approach, please do share it with me. I'd love to see it!</p> + +<p>If anyone decides to improve on this or make a cleaner approach, please do share it with me. I’d love to see it!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/pihole-cloudflare/index.html b/build/pihole-cloudflare/index.html index b7b6282..38a5e8a 100644 --- a/build/pihole-cloudflare/index.html +++ b/build/pihole-cloudflare/index.html @@ -1,46 +1,57 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Setting Up 1.1.1.1 for Families on a Pi-Hole</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Setting Up 1.1.1.1 for Families on a Pi-Hole</h1> +<h1 id="setting-up-1.1.1.1-for-families-on-a-pi-hole">Setting Up 1.1.1.1 for Families on a Pi-Hole</h1> + <p>2021-10-28</p> -<p>After seeing Cloudflare's 1.1.1.1 for Families mentioned on the <a href="https://news.ycombinator.com/item?id=29024195">front page of HackerNews</a>, I thought it might be helpful to show those currently using a <a href="https://pi-hole.net">pi-hole device</a> how to include 1.1.1.1 alongside it.</p> -<h2>Keeping Things Updated</h2> + +<p>After seeing Cloudflare’s 1.1.1.1 for Families mentioned on the <a href="https://news.ycombinator.com/item?id=29024195">front page of HackerNews</a>, I thought it might be helpful to show those currently using a <a href="https://pi-hole.net">pi-hole device</a> how to include 1.1.1.1 alongside it.</p> + +<h2 id="keeping-things-updated">Keeping Things Updated</h2> + <p>It should go without saying that you should be running the latest stable pi-hole version for security and full feature support. To do so, simply <code>ssh</code> into your device (or connect to it directly if you prefer) and run the following to check your pi-hole version:</p> + <pre><code>pihole -v </code></pre> + <p>And if your version is out of date, run:</p> + <pre><code>pihole -up </code></pre> + <p>Once it completes the update everything will be good to go!</p> -<h2>Adding 1.1.1.1 (1.1.1.2)</h2> + +<h2 id="adding-1.1.1.1-1.1.1.2">Adding 1.1.1.1 (1.1.1.2)</h2> + <p>Now you need to navigate to your main pi-hole admin in your browser (most likely the url will be <em>pi.hole</em>). Login in using your credentials and the do the following steps:</p> + <ol> -<li>Navigate to <strong>Settings</strong></li> -<li>Navigate to <strong>DNS</strong></li> -<li>Under "Upstream DNS Servers" enter:</li> +<li><p>Navigate to <strong>Settings</strong></p></li> +<li><p>Navigate to <strong>DNS</strong></p></li> +<li><p>Under “Upstream DNS Servers” enter:</p></li> </ol> + <ul> <li>Custom 1 (IPv4): 1.1.1.2</li> <li>Custom 2 (IPv4): 1.0.0.2</li> </ul> -<p><figure> - <img src="/public/images/pihole-cloudflare.png" alt="PiHole setup admin dashboard"> - <figcaption>PiHole DNS settings (<a href="/public/images/pihole-cloudflare.webp">link to hi-res image</a>)</figcaption> -</figure></p> -<h2>Ad-Block & Malware Protection</h2> + +<h2 id="ad-block-malware-protection">Ad-Block & Malware Protection</h2> + <p>You now officially have protection against both intrusive advertisements <em>and</em> sites flagged with malware. Happy (and now safer) browsing!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/plain-text-emails/index.html b/build/plain-text-emails/index.html index 16bd11c..7f979c6 100644 --- a/build/plain-text-emails/index.html +++ b/build/plain-text-emails/index.html @@ -1,76 +1,120 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Plain Text Emails, Please</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Plain Text Emails, Please</h1> +<h1 id="plain-text-emails-please">Plain Text Emails, Please</h1> + <p>2019-09-09</p> -<p>When it comes to website / product design and development most devs should try to keep things simple. By only using as much code as absolutely necessary, projects avoid growing out of scope or becoming bloated. So, why isn't this same approach taken for email?</p> -<h2>A brief history of email</h2> + +<p>When it comes to website / product design and development most devs should try to keep things simple. By only using as much code as absolutely necessary, projects avoid growing out of scope or becoming bloated. So, why isn’t this same approach taken for email?</p> + +<h2 id="a-brief-history-of-email">A brief history of email</h2> + <p>Email has been possible since the 1960s with <a href="https://en.wikipedia.org/wiki/Time-sharing">time-sharing computers</a> being used to share files and messages across early devices. Around the 80s and 90s it seemed as though <a href="https://en.wikipedia.org/wiki/Government_Open_Systems_Interconnection_Profile">GOSIP</a> would dominate the market, but this was knocked out in favor of SMTP, POP3 and IMAP in 1995 when the <a href="http://www.walthowe.com/navnet/history.html">National Science Foundation ended its sponsorship of the Internet backbone</a>, and all traffic relied on commercial networks.</p> -<p><figure> - <img src="https://upload.wikimedia.org/wikipedia/commons/6/68/Timesharing_and_Development_KA-10s_at_BBN%2C_circa_1970.jpg" alt="First computers to send and receive email" /> - <figcaption>The first computers to send and receive email. Source: <a href="https://en.wikipedia.org/wiki/File:Timesharing_and_Development_KA-10s_at_BBN,_circa_1970.webp">Wikipedia</a></figcaption> -</figure></p> + <p>Things were looking pretty good at this point. Most operating systems now had a shared foundation of sending and receiving emails on the internet, allowing for a set of standards to be slowly developed and agreed upon over time. These were simpler times, with the default content sent between machines being plain text. No embedded images, no CSS3 fallback support, no <em>fluff</em> - just content.</p> -<p><strong>Sidenote:</strong><br> -Now, I'm not going to sit here and pretend to be some expert on the history of email (or the internet in general), so I suggest you take the time to read about <a href="http://www.walthowe.com/navnet/history.html">the history of the internet</a> if you're into that kind of thing.</p> -<h2>Looking at some data</h2> -<blockquote><p>Data isn't everything</p> + +<p><strong>Sidenote:</strong> +Now, I’m not going to sit here and pretend to be some expert on the history of email (or the internet in general), so I suggest you take the time to read about <a href="http://www.walthowe.com/navnet/history.html">the history of the internet</a> if you’re into that kind of thing.</p> + +<h2 id="looking-at-some-data">Looking at some data</h2> + +<blockquote> +<p>Data isn’t everything</p> </blockquote> + <p>I understand that the data being used is currently 16 years old - but not many extensive research studies have been performed (specifically for email-type preference in general)</p> -<p>In 2002<sup>[<a href="#1">1</a>]</sup>, <a href="https://www.clickz.com/real-world-email-client-usage-the-hard-data/47429/">a small-set survey was run by ClickZ</a> was created to gauge the details of personal email data. The main data we will focus on is the user preference between HTML or plain text formats:</p> + +<p>In 2002[1], <a href="https://www.clickz.com/real-world-email-client-usage-the-hard-data/47429/">a small-set survey was run by ClickZ</a> was created to gauge the details of personal email data. The main data we will focus on is the user preference between HTML or plain text formats:</p> + <p><strong>Do you prefer receiving HTML or text email?</strong></p> + <table> -<tr><th>Response </th><th>Percentage (%) </th></tr> -<tr><td>HTML </td><td>41.95 </td></tr> -<tr><td>Plain Text </td><td>31.52 </td></tr> -<tr><td>No Preference </td><td>26.53 </td></tr> +<thead> +<tr> +<th>Response</th> +<th>Percentage (%)</th> +</tr> +</thead> + +<tbody> +<tr> +<td>HTML</td> +<td>41.95</td> +</tr> +<tr> +<td>Plain Text</td> +<td>31.52</td> +</tr> +<tr> +<td>No Preference</td> +<td>26.53</td> +</tr> +</tbody> </table> -On initial review, one could make the argument that the general public <em>prefers</em> HTML email over plain text (~42% vs ~32%) - but I would disagree with this analysis. The roughly 27% of respondents who answered with <em>No Preference</em> should not be dismissed so easily.<p>Since the <em>No Preference</em> respondents don't care whether emails they receive are designed in HTML format, why not send them plain text variations by default? The positives of plain text greatly outweigh those of HTML:</p> + +<p>On initial review, one could make the argument that the general public <em>prefers</em> HTML email over plain text (~42% vs ~32%) - but I would disagree with this analysis. The roughly 27% of respondents who answered with <em>No Preference</em> should not be dismissed so easily.</p> + +<p>Since the <em>No Preference</em> respondents don’t care whether emails they receive are designed in HTML format, why not send them plain text variations by default? The positives of plain text greatly outweigh those of HTML:</p> + <ul> <li>Plain text has reduced file size + <ul> -<li>Don't forget that many users have limited data usage across much of the world</li> -</ul> -</li> +<li>Don’t forget that many users have limited data usage across much of the world</li> +</ul></li> <li>HTML is more likely to be flagged as spam by email clients + <ul> -<li>This is due to extra code, tracking scripts, 3rd party assets / resources being called</li> -</ul> -</li> -<li>HTML / CSS can be inconsistent or even limited in support across email clients</li> +<li>This is due to extra code, tracking scripts, 3rd party assets / resources being called</li> +</ul></li> +<li>HTML / CSS can be inconsistent or even limited in support across email clients</li> <li>Text only requires less design work for your development team + <ul> -<li>Don't forget about testing all the various email clients too</li> -</ul> -</li> +<li>Don’t forget about testing all the various email clients too</li> +</ul></li> </ul> -<p>Add to this that <a href="https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33">53% of emails are opened on mobile</a> - so any "fancy" marketing email designs need to look great on mobile screens and also take into account slower connections. What looks better and loads faster than simple plain text? 😛</p> -<h2>But what about marketing!?</h2> -<p>Sorry to say, but marketing should never trump user experience. Teams love to track email opens / click ratios, who subscribed / unsubscribed or who shared the campaign with others - but <strong>it's all bloat on the user's end</strong>.</p> -<p>Greg Kogan wrote up a great article / case study about his experience <a href="https://www.gkogan.co/blog/dont-design-emails/">switching over a client's campaign from HTML templates to plain text</a> with some really interesting results. I highly recommend you give it a read for a better understanding about how the marketing goals and customer goals don't always align.</p> -<h2>Simple or lazy - it doesn't matter</h2> -<p>Plain text can certainly have a reputation for looking lazy or cheap, but I feel this is mostly perpetuated in the design and marketing communities. I can assure you that your average day-to-day users are much less opinionated about your email campaign design than you are. Look to satisfy your customers' needs before your own.</p> -<blockquote><p>Life is really simple, but we insist on making it complicated.</p> -<p><cite>- Confucius</cite></p> + +<p>Add to this that <a href="https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33">53% of emails are opened on mobile</a> - so any “fancy” marketing email designs need to look great on mobile screens and also take into account slower connections. What looks better and loads faster than simple plain text? 😛</p> + +<h2 id="but-what-about-marketing">But what about marketing!?</h2> + +<p>Sorry to say, but marketing should never trump user experience. Teams love to track email opens / click ratios, who subscribed / unsubscribed or who shared the campaign with others - but <strong>it’s all bloat on the user’s end</strong>.</p> + +<p>Greg Kogan wrote up a great article / case study about his experience <a href="https://www.gkogan.co/blog/dont-design-emails/">switching over a client’s campaign from HTML templates to plain text</a> with some really interesting results. I highly recommend you give it a read for a better understanding about how the marketing goals and customer goals don’t always align.</p> + +<h2 id="simple-or-lazy---it-doesnt-matter">Simple or lazy - it doesn’t matter</h2> + +<p>Plain text can certainly have a reputation for looking lazy or cheap, but I feel this is mostly perpetuated in the design and marketing communities. I can assure you that your average day-to-day users are much less opinionated about your email campaign design than you are. Look to satisfy your customers’ needs before your own.</p> + +<blockquote> +<p>Life is really simple, but we insist on making it complicated.</p> + +<p>- Confucius</p> </blockquote> -<p>That being said, at the end of the day, companies will justify their own reasons to use HTML email templates over plain text. You can't convince everyone. My own personal experience with email template design, along with analyzing some of the data, leaves me to believe that most businesses should default to plain text. At the very least, you should try to convince your team to perform some simple A/B testing with your next email campaign.</p> + +<p>That being said, at the end of the day, companies will justify their own reasons to use HTML email templates over plain text. You can’t convince everyone. My own personal experience with email template design, along with analyzing some of the data, leaves me to believe that most businesses should default to plain text. At the very least, you should try to convince your team to perform some simple A/B testing with your next email campaign.</p> + <p>The results might just surprise you.</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>This is the "latest" detailed survey I could find on email design preference</li> +<li>This is the “latest” detailed survey I could find on email design preference</li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/poor-mans-full-bleed/index.html b/build/poor-mans-full-bleed/index.html index 7c72e2a..bbd62be 100644 --- a/build/poor-mans-full-bleed/index.html +++ b/build/poor-mans-full-bleed/index.html @@ -1,103 +1,127 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Poor Man's CSS Full-Bleed Layout</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Poor Man's CSS Full-Bleed Layout</h1> +<h1 id="poor-mans-css-full-bleed-layout">Poor Man’s CSS Full-Bleed Layout</h1> + <p>2020-10-07</p> -<p>I recently came across the very well written and interesting article, <a href="https://joshwcomeau.com/css/full-bleed/">Full-Bleed Layout Using CSS Grid</a>, while browsing my daily designer feeds. I won't go into the post's specifics here (I recommend you read the article for yourself) but it details how to render full-bleed element effects utilizing the CSS <code>grid</code> property.</p> -<p>While the approach in the article works perfectly fine, I thought to myself, "Is there not a simpler, more backwards compatible way to do this?". Indeed there is.</p> -<p><strong>Don't care about the tutorial?</strong> <a href="#live-demo">Skip down to the live demo</a></p> -<h2>Make the Web Backwards Compatible</h2> -<p>I try my best when creating specific element designs or layouts to have everything render consistently across almost <em>all</em> browsers. This tends to include the obvious front-runners: Chrome, Firefox, Safari - but I also try my best not to ignore the oldies: IE11, Edge and older versions of Opera. I believe if most web designers even loosely followed this concept we wouldn't be stringing together barely implemented CSS properties and hacking together polyfills for all the unsupported browsers. Just my two cents.</p> -<p>What does this have to do with full-bleed exactly? Well, the CSS we will be using in this demo is fully compatible with pretty much <em>any browser</em> that can run the basic version of CSS rendering. If the browser you're targeting supports <code>max-width</code> and <code>margins</code> - then have no fear, full-bleeds are here.</p> -<h2>Our HTML Example</h2> -<p>Let's create a single-column blog layout for this example. We will include a heading, some paragraphs, an image, and a blockquote to keep it simple:</p> -<pre><code><main> - <article> - <h1>Main Heading</h1> - <p>Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.</p> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!</p> - <img src='https://images.unsplash.com/photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt="Some Image"> - <p>Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.</p> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p> - <blockquote> - <p>To be, or not to be, that is the question:<br>Whether 'tis nobler in the mind to suffer<br>The slings and arrows of outrageous fortune,<br>Or to take Arms against a Sea of troubles,<br>And by opposing end them: to die, to sleep;</p> - <cite>- Some guy</cite> - </blockquote> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p> - </article> -</main> + +<p>I recently came across the very well written and interesting article, <a href="https://joshwcomeau.com/css/full-bleed/">Full-Bleed Layout Using CSS Grid</a>, while browsing my daily designer feeds. I won’t go into the post’s specifics here (I recommend you read the article for yourself) but it details how to render full-bleed element effects utilizing the CSS <code>grid</code> property.</p> + +<p>While the approach in the article works perfectly fine, I thought to myself, “Is there not a simpler, more backwards compatible way to do this?”. Indeed there is.</p> + +<p><strong>Don’t care about the tutorial?</strong> <a href="#live-demo">Skip down to the live demo</a></p> + +<h2 id="make-the-web-backwards-compatible">Make the Web Backwards Compatible</h2> + +<p>I try my best when creating specific element designs or layouts to have everything render consistently across almost <em>all</em> browsers. This tends to include the obvious front-runners: Chrome, Firefox, Safari - but I also try my best not to ignore the oldies: IE11, Edge and older versions of Opera. I believe if most web designers even loosely followed this concept we wouldn’t be stringing together barely implemented CSS properties and hacking together polyfills for all the unsupported browsers. Just my two cents.</p> + +<p>What does this have to do with full-bleed exactly? Well, the CSS we will be using in this demo is fully compatible with pretty much <em>any browser</em> that can run the basic version of CSS rendering. If the browser you’re targeting supports <code>max-width</code> and <code>margins</code> - then have no fear, full-bleeds are here.</p> + +<h2 id="our-html-example">Our HTML Example</h2> + +<p>Let’s create a single-column blog layout for this example. We will include a heading, some paragraphs, an image, and a blockquote to keep it simple:</p> + +<pre><code><main> + <article> + <h1>Main Heading</h1> + <p>Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!</p> + <img src='https://images.unsplash.com/photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt="Some Image"> + <p>Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p> + <blockquote> + <p>To be, or not to be, that is the question:<br>Whether 'tis nobler in the mind to suffer<br>The slings and arrows of outrageous fortune,<br>Or to take Arms against a Sea of troubles,<br>And by opposing end them: to die, to sleep;</p> + <cite>- Some guy</cite> + </blockquote> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p> + </article> +</main> </code></pre> -<p>This works well as it is, but we will need to "section" off our different areas of content based on whether we want them <code>full-bleed</code> or not. We do this with - you guessed it - the <code>section</code> element. In this demo we want the image and blockquote to become <code>full-bleed</code> when rendered, so we'll add the <code>full-bleed</code> class to those sections for now (more on that later):</p> -<pre><code><main> - <article> - <section> - <h1>Main Heading</h1> - <p>Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.</p> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!</p> - </section> - <section class="full-bleed"> - <img src='https://images.unsplash.com/photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt="Some Image"> - </section> - <section> - <p>Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.</p> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p> - </section> - <section class="full-bleed"> - <blockquote> - <p>To be, or not to be, that is the question:<br>Whether 'tis nobler in the mind to suffer<br>The slings and arrows of outrageous fortune,<br>Or to take Arms against a Sea of troubles,<br>And by opposing end them: to die, to sleep;</p> - <cite>- Some guy</cite> - </blockquote> - </section> - <section> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p> - </section> - </article> -</main> + +<p>This works well as it is, but we will need to “section” off our different areas of content based on whether we want them <code>full-bleed</code> or not. We do this with - you guessed it - the <code>section</code> element. In this demo we want the image and blockquote to become <code>full-bleed</code> when rendered, so we’ll add the <code>full-bleed</code> class to those sections for now (more on that later):</p> + +<pre><code><main> + <article> + <section> + <h1>Main Heading</h1> + <p>Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!</p> + </section> + <section class="full-bleed"> + <img src='https://images.unsplash.com/photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt="Some Image"> + </section> + <section> + <p>Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p> + </section> + <section class="full-bleed"> + <blockquote> + <p>To be, or not to be, that is the question:<br>Whether 'tis nobler in the mind to suffer<br>The slings and arrows of outrageous fortune,<br>Or to take Arms against a Sea of troubles,<br>And by opposing end them: to die, to sleep;</p> + <cite>- Some guy</cite> + </blockquote> + </section> + <section> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p> + </section> + </article> +</main> </code></pre> -<p>That's it for the HTML!</p> -<h2>The Magic CSS (Not Really)</h2> + +<p>That’s it for the HTML!</p> + +<h2 id="the-magic-css-not-really">The Magic CSS (Not Really)</h2> + <p>Now take a deep breath and get ready for some hard CSS work:</p> + <pre><code>article { width: 100%; } article section { margin: 0 auto; - max-width: 480px; /* This can be whatever you want */ + max-width: 480px; /* This can be whatever you want */ width: 100%; } article section.full-bleed { max-width: 100%; } </code></pre> -<p>That's it. <em>Really</em>. Now any element (blockquotes, specific headers, navigations, footers, etc) that you want to layout as "full-bleed", just wrap it in a <code>section</code> tag and sick the <code>full-bleed</code> class on it. Done and done.</p> -<p>Obviously you'll want to add more styling to clean-up and make your full-bleed layouts more beautiful. This demo was just more of a starting point.</p> -<h3>Maybe Not-Quite-Full-Bleed?</h3> + +<p>That’s it. <em>Really</em>. Now any element (blockquotes, specific headers, navigations, footers, etc) that you want to layout as “full-bleed”, just wrap it in a <code>section</code> tag and sick the <code>full-bleed</code> class on it. Done and done.</p> + +<p>Obviously you’ll want to add more styling to clean-up and make your full-bleed layouts more beautiful. This demo was just more of a starting point.</p> + +<h3 id="maybe-not-quite-full-bleed">Maybe Not-Quite-Full-Bleed?</h3> + <p>You could also further customize your options by including a class like <code>half-bleed</code>, which maybe only expands slightly outside the main section <code>max-width</code>:</p> + <pre><code>article section.half-bleed { max-width: 960px; } </code></pre> -<h3>Sidenote</h3> + +<h3 id="sidenote">Sidenote</h3> + <p>For those concerned about accessibility: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section">section element</a> is a flow content element, so it can contain almost all HTML elements.</p> -<p><h2 id="live-demo">Live Demo</h2></p> + <p><a href="https://codepen.io/bradleytaunt/pen/mdEdjzz">Live CodePen Example</a></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/poormans-comment-system/index.html b/build/poormans-comment-system/index.html index feca90a..e8554e5 100644 --- a/build/poormans-comment-system/index.html +++ b/build/poormans-comment-system/index.html @@ -1,63 +1,88 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>My Cheapskate Commenting System</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>My Cheapskate Commenting System</h1> +<h1 id="my-cheapskate-commenting-system">My Cheapskate Commenting System</h1> + <p>2022-02-03</p> -<p>My blog now has comments! Well, <em>kind of</em>...</p> -<p>I went down a two day long rabbit-hole trying to find the best solution for implementing comments on my static website (generated via Jekyll FYI). There are a ton of options out there and many open source models that allow you to spin up your own instance with something like DigitalOcean or AWS. But I'm a cheap bastard. I refuse to spend $5/month on a blog mostly used for fun and one that I have zero incentive to "monetize".</p> -<p>So, what <em>free</em> options did this old miser have left to chose from? To my surprise, there were two solid options that initially caught my eye! Let's take a look then, shall we?</p> -<h2>Remarkbox</h2> -<p>Overall I don't have many bad things to say about <a href="https://www.remarkbox.com">Remarkbox</a>. It looks nice, is easy to implement and runs a "pay what you can" pricing model. What more could you ask for?! The major issue (for me, <em>personally</em>) is precisely <strong>that</strong>; the free model. This makes it difficult for me to trust 100% that this system will still be around in 3-4 years. Now I know - even paid systems can shutdown unexpectedly, but I find free tier options end up shutting their doors sooner. There is an option to self-host Remarkbox, but that requires a yearly license and also comes back to the point I made about not wanting to pay for hosting...</p> -<h2>Utterances (Github-based)</h2> -<p>The other major option was <a href="https://utteranc.es">Utterances</a>. This system was almost the winner due to it's pretty great feature set:</p> + +<p>My blog now has comments! Well, <em>kind of</em>…</p> + +<p>I went down a two day long rabbit-hole trying to find the best solution for implementing comments on my static website (generated via Jekyll FYI). There are a ton of options out there and many open source models that allow you to spin up your own instance with something like DigitalOcean or AWS. But I’m a cheap bastard. I refuse to spend $5/month on a blog mostly used for fun and one that I have zero incentive to “monetize”.</p> + +<p>So, what <em>free</em> options did this old miser have left to chose from? To my surprise, there were two solid options that initially caught my eye! Let’s take a look then, shall we?</p> + +<h2 id="remarkbox">Remarkbox</h2> + +<p>Overall I don’t have many bad things to say about <a href="https://www.remarkbox.com">Remarkbox</a>. It looks nice, is easy to implement and runs a “pay what you can” pricing model. What more could you ask for?! The major issue (for me, <em>personally</em>) is precisely <strong>that</strong>; the free model. This makes it difficult for me to trust 100% that this system will still be around in 3-4 years. Now I know - even paid systems can shutdown unexpectedly, but I find free tier options end up shutting their doors sooner. There is an option to self-host Remarkbox, but that requires a yearly license and also comes back to the point I made about not wanting to pay for hosting…</p> + +<h2 id="utterances-github-based">Utterances (Github-based)</h2> + +<p>The other major option was <a href="https://utteranc.es">Utterances</a>. This system was almost the winner due to it’s pretty great feature set:</p> + <ol> <li>Open source</li> <li>No tracking, no ads</li> <li>All data stored in GitHub issues</li> <li>Free!</li> </ol> -<p>But take a look above at point number three. The fact that readers wishing to leave a comment are <strong>required to have a Github account</strong>. For me, this is a non-starter. I don't want to force my audience to sign up for or sign in to <em>any</em> account just to leave a simple comment on my humble blog. Considering a number of my readers are part of the FOSS community, this just seemed like a bad fit.</p> -<h2>Finding Inspiration</h2> -<p>I absolutely love the <a href="https://solar.lowtechmagazine.com">solar.lowtechmagazine.com</a> website (both for it's content and design) and indirectly found my comment system inspiration there. Okay let's be honest, I completely stole their commenting system "concept". Imitation is the sincerest form of flattery, right?</p> -<h2>My Comment System is...</h2> -<p>E-mail. It's just <strong>plain e-mail</strong>.</p> -<p>I've setup a basic <code>comment-prompt.html</code> in my <code>_includes</code> folder that contains a <code>mailto</code> action button[^1]:</p> -<pre><code><a href="mailto:myemail.com?subject=RE: { { page.title | uri_escape } }"> - <button>Comment via email</button> -</a> + +<p>But take a look above at point number three. The fact that readers wishing to leave a comment are <strong>required to have a Github account</strong>. For me, this is a non-starter. I don’t want to force my audience to sign up for or sign in to <em>any</em> account just to leave a simple comment on my humble blog. Considering a number of my readers are part of the FOSS community, this just seemed like a bad fit.</p> + +<h2 id="finding-inspiration">Finding Inspiration</h2> + +<p>I absolutely love the <a href="https://solar.lowtechmagazine.com">solar.lowtechmagazine.com</a> website (both for it’s content and design) and indirectly found my comment system inspiration there. Okay let’s be honest, I completely stole their commenting system “concept”. Imitation is the sincerest form of flattery, right?</p> + +<h2 id="my-comment-system-is">My Comment System is…</h2> + +<p>E-mail. It’s just <strong>plain e-mail</strong>.</p> + +<p>I’ve setup a basic <code>comment-prompt.html</code> in my <code>_includes</code> folder that contains a <code>mailto</code> action button[^1]:</p> + +<pre><code><a href="mailto:myemail.com?subject=RE: { { page.title | uri_escape } }"> + <button>Comment via email</button> +</a> </code></pre> -<p>This include template is placed at the bottom of every article automatically. Then, that action pulls in the article's title as the e-mail subject line in the user's default mailing app. That's it.</p> -<h2>Pros</h2> + +<p>This include template is placed at the bottom of every article automatically. Then, that action pulls in the article’s title as the e-mail subject line in the user’s default mailing app. That’s it.</p> + +<h2 id="pros">Pros</h2> + <ul> <li>No third party application needed</li> <li>Privacy focused</li> -<li>More direct interaction with my audience/readers</li> +<li>More direct interaction with my audience/readers</li> <li>Builds a much more close-knit community</li> <li>Completely free!</li> </ul> -<h2>Cons</h2> + +<h2 id="cons">Cons</h2> + <ul> <li>Must be manually curated and posted</li> <li>No notifications</li> -<li>No "built-in" reply functionality</li> -<li>Has the potential to become unwieldy...</li> +<li>No “built-in” reply functionality</li> +<li>Has the potential to become unwieldy…</li> </ul> -<h2>Fun Experiment</h2> -<p>I figure either way, this will be an interesting experiment. I don't know my audience size (since I don't use any type of tracking) but I assume it's very small. Those willing to write me a personal e-mail in order to share their thoughts on my stupid little blog probably have something interesting to say. At least I hope so. </p> -<p>Let's see how this thing goes...</p> + +<h2 id="fun-experiment">Fun Experiment</h2> + +<p>I figure either way, this will be an interesting experiment. I don’t know my audience size (since I don’t use any type of tracking) but I assume it’s very small. Those willing to write me a personal e-mail in order to share their thoughts on my stupid little blog probably have something interesting to say. At least I hope so. </p> + +<p>Let’s see how this thing goes…</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/posts.tsv b/build/posts.tsv index 35c8ddc..d8e0f41 100644 --- a/build/posts.tsv +++ b/build/posts.tsv @@ -161,7 +161,13 @@ posts/animated-card-tiles.md Animated Card Tiles posts/alpine.md Adventures in Creating a Minimal Alpine Linux Installer posts/af.md Avoiding Featurism posts/adguard.md Setting Up AdGuard Home with Eero +posts/Website_Backups_with_Apple_iCloud.md Website Backups with Apple iCloud posts/Switching_Things_Over_to_ikiwiki.md Switching Things Over to ikiwiki +posts/Please_Make_Your_Table_Headings_Sticky.md Please Make Your Table Headings Sticky +posts/OpenBSD_is_a_Cozy_Operating_System.md OpenBSD is a Cozy Operating System +posts/New_Domain_and_Code_Forge.md New Domain and Code Forge posts/My_Text_Editor_Is_Not_Open_Source.md My Text Edtior is Not Open Source +posts/Installing_WordPress_on_NearlyFreeSpeech.md Installing WordPress on NearlyFreeSpeech +posts/Building_rbenv_on_OpenBSD_7.5.md Building rbenv on OpenBSD 7.5 posts/1kb.md Making a Website Under 1kB posts/$10.md Do You Have an Extra $10? diff --git a/build/projects/index.html b/build/projects/index.html index 549ebc6..de8f078 100644 --- a/build/projects/index.html +++ b/build/projects/index.html @@ -1,21 +1,24 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Projects</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Projects</h1> -<h2>Active Projects</h2> +<h1 id="projects">Projects</h1> + +<h2 id="active-projects">Active Projects</h2> + <ul> <li><a href="https://barf.bt.ht">barf</a>: Minimal blog engine in a tiny shell script</li> <li><a href="https://ssgit.bt.ht">ssgit</a>: Static site git page generator</li> @@ -23,24 +26,30 @@ <li><a href="https://audit.bt.ht">Web Audit</a>: Detailed checklist audit for developing websites</li> <li><a href="https://normform.netlify.app">Normform</a>: Minimal CSS form plugin (6KB)</li> <li><a href="https://23tales.netlify.app">23 Tales</a>: Online collection of works by Beatrix Potter</li> -<li><a href="https://shinobi.bt.ht">Shinobi</a>: Text-based, RSS focused blogging "system"</li> +<li><a href="https://shinobi.bt.ht">Shinobi</a>: Text-based, RSS focused blogging “system”</li> <li><a href="https://pblog.bt.ht">pblog</a>: Pandoc static blog generator</li> <li><a href="https://ls.bt.ht">Light Speed</a>: Jekyll theme with a perfect Lighthouse score</li> </ul> -<h2>Clubs</h2> + +<h2 id="clubs">Clubs</h2> + <ul> <li><a href="https://1mb.club">1MB Club</a>: A collection of web pages weighing less than 1 megabyte</li> <li><a href="https://1kb.club">1kB Club</a>: A collection of web pages weighing less than 1 kilobyte</li> <li><a href="https://xhtml.club">XHTML Club</a> A collection of HTML-focused websites</li> </ul> -<h2>Installers / Setups</h2> + +<h2 id="installers-setups">Installers / Setups</h2> + <ul> <li><a href="https://git.sr.ht/~bt/open-suck">Open Suck</a>: OpenBSD desktop based on the suckless philosophy</li> <li><a href="https://vs.bt.ht">Void Suck</a>: Void Linux desktop based on the suckless philosophy</li> <li><a href="https://as.bt.ht">Alpine Suck</a>: Alpine Linux desktop based on the suckless philosophy</li> -<li><a href="https://git.sr.ht/~bt/alpine-linux-setup">Alpine Wayland Desktop</a>: Bare-bones Wayland "Desktop" Alpine installer script</li> +<li><a href="https://git.sr.ht/~bt/alpine-linux-setup">Alpine Wayland Desktop</a>: Bare-bones Wayland “Desktop” Alpine installer script</li> </ul> -<h2>Experiments</h2> + +<h2 id="experiments">Experiments</h2> + <ul> <li><a href="https://anon.bt.ht">Blog Anonymously</a>: A basic starting point for those wishing to blog privately</li> <li><a href="https://search.bt.ht">Better Search Results</a>: Rethinking the UX flow of modern search engines</li> diff --git a/build/proper-ui-hierarchy/index.html b/build/proper-ui-hierarchy/index.html index bee9bee..d3bc682 100644 --- a/build/proper-ui-hierarchy/index.html +++ b/build/proper-ui-hierarchy/index.html @@ -1,45 +1,67 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Proper UI Hierarchy</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Proper UI Hierarchy</h1> +<h1 id="proper-ui-hierarchy">Proper UI Hierarchy</h1> + <p>2019-02-05</p> -<p>I often feel like an old man when I complain about flat design and how designers these days have lost (or willfully forgotten) the skill to create accessible UIs with proper visual hierarchy. A skill which at it's core seems so simple - yet is overlooked in almost every current <i>modern</i> interface.</p> -<p>I'm unable to pinpoint the <i>exact</i> reason why designers swapped out depth, hierarchical layouts and accessibility for muted colors, abstract imagery, illegible typography, and unimaginative flat designs.</p> -<p>But then again, maybe I'm just a design-dinosaur of a time long forgotten. Maybe I need to adapt and move with the times. Or maybe the current design trends are just lazy.</p> -<p>I'm pretty sure it's lazy design trends.</p> -<h2>Stop complaining and do something</h2> -<p>As an example, I'm going to breakdown the process of improving the overall design on a set of "flat" button elements.</p> -<p>Hopefully this demo article inspires even one designer to rethink their method when approaching UI design and push away from what is currently accepted as the "correct way to design UI".</p> + +<p>I often feel like an old man when I complain about flat design and how designers these days have lost (or willfully forgotten) the skill to create accessible UIs with proper visual hierarchy. A skill which at it’s core seems so simple - yet is overlooked in almost every current modern interface.</p> + +<p>I’m unable to pinpoint the exact reason why designers swapped out depth, hierarchical layouts and accessibility for muted colors, abstract imagery, illegible typography, and unimaginative flat designs.</p> + +<p>But then again, maybe I’m just a design-dinosaur of a time long forgotten. Maybe I need to adapt and move with the times. Or maybe the current design trends are just lazy.</p> + +<p>I’m pretty sure it’s lazy design trends.</p> + +<h2 id="stop-complaining-and-do-something">Stop complaining and do something</h2> + +<p>As an example, I’m going to breakdown the process of improving the overall design on a set of “flat” button elements.</p> + +<p>Hopefully this demo article inspires even one designer to rethink their method when approaching UI design and push away from what is currently accepted as the “correct way to design UI”.</p> + <p>And one final note before we deep dive into this demo: </p> -<p>The statement that flat design is inherently worse than it's predecessor <strong>is not subjective</strong>. By stripping away the visual cues that help users distinguish between interface elements you are purposely making a worse experience for them. Designers need to stop designing for other designers.</p> -<h2>What we will be designing</h2> + +<p>The statement that flat design is inherently worse than it’s predecessor <strong>is not subjective</strong>. By stripping away the visual cues that help users distinguish between interface elements you are purposely making a worse experience for them. Designers need to stop designing for other designers.</p> + +<h2 id="what-we-will-be-designing">What we will be designing</h2> + <p>In this demo we will be improving the default flat design inspired button layout of the following:</p> + <p><img src="/public/images/proper-ui.png" alt="Proper UI buttons, blue and green" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/yLXJmdy">Live CodePen Example</a></p> -<hr /> -<h2>Designing the skeleton</h2> -<p>This will be our basic HTML structure, along with it's default styling (based on today's UI standards):</p> -<h3>The HTML</h3> -<pre><code><div class="buttons-container"> - <button>Sign Up</button> - <button>Log in</button> -</div> + +<hr/> + +<h2 id="designing-the-skeleton">Designing the skeleton</h2> + +<p>This will be our basic HTML structure, along with it’s default styling (based on today’s UI standards):</p> + +<h3 id="the-html">The HTML</h3> + +<pre><code><div class="buttons-container"> + <button>Sign Up</button> + <button>Log in</button> +</div> </code></pre> -<h3>The CSS</h3> -<pre><code>/* Parent container for the buttons */ + +<h3 id="the-css">The CSS</h3> + +<pre><code>/* Parent container for the buttons */ .buttons-container { background: #E0E9EE; border-radius: 5px; @@ -50,7 +72,7 @@ width: 100%; } -/*Shared button styles */ +/*Shared button styles */ button { appearance: none; border: 0; @@ -64,66 +86,81 @@ button { width: 50%; } -/* Sign up button */ +/* Sign up button */ button:first-child { background: #2FBC3D; margin-right: 10px; } -/* Log in button */ +/* Log in button */ button:last-child { background: #459BCF; } </code></pre> -<h2>Adding simple improvements</h2> -<p>Gradients (not solely on their own mind you) within UI systems were initially used to help humans make connections with their analog counterparts. Something like toggles or switches matching those found in the real world, allowed users to mentally connect what that element's function did almost instantly. </p> -<p>Be warned not to confuse this with skeuomorphic design - an element sharing similar qualities as it's analog sibling does not instantly make it so.</p> + +<h2 id="adding-simple-improvements">Adding simple improvements</h2> + +<p>Gradients (not solely on their own mind you) within UI systems were initially used to help humans make connections with their analog counterparts. Something like toggles or switches matching those found in the real world, allowed users to mentally connect what that element’s function did almost instantly. </p> + +<p>Be warned not to confuse this with skeuomorphic design - an element sharing similar qualities as it’s analog sibling does not instantly make it so.</p> + <p>If you ever run into a designer who rolls their eyes or scoffs at you for proposing the use of something such as gradients (in a tactful way, of course) it is safe to assume they have been brainwashed by the modern design hive-mind.</p> -<p>To disregard the use of gradients simply because the belief is "gradients are bad" is idiotic. Worse still is to do so based on the belief that "gradients aren't <em>in</em> right now". As a designer, your job is to design a beautiful and <em>usable</em> product - not win high-fives among your peers. /end rant.</p> -<h3>Adding subtle gradients</h3> -<p>When gradients are implemented properly, most users won't even be aware of their presence. The difference in color (specifically on buttons in this example) helps give the illusion of a light source in the interface, which designers can use to their advantage (ie. pull more attention to elements by "lifting" them forward on the page).</p> -<h3>The subtly improved CSS</h3> -<pre><code>/* Sign up button */ + +<p>To disregard the use of gradients simply because the belief is “gradients are bad” is idiotic. Worse still is to do so based on the belief that “gradients aren’t <em>in</em> right now”. As a designer, your job is to design a beautiful and <em>usable</em> product - not win high-fives among your peers. /end rant.</p> + +<h3 id="adding-subtle-gradients">Adding subtle gradients</h3> + +<p>When gradients are implemented properly, most users won’t even be aware of their presence. The difference in color (specifically on buttons in this example) helps give the illusion of a light source in the interface, which designers can use to their advantage (ie. pull more attention to elements by “lifting” them forward on the page).</p> + +<h3 id="the-subtly-improved-css">The subtly improved CSS</h3> + +<pre><code>/* Sign up button */ button:first-child { background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%); } -/* Log in button */ +/* Log in button */ button:last-child { background-image: linear-gradient(-180deg, #489FD2 0%, #0A6DAC 100%); } </code></pre> -<h2>More depth & light</h2> + +<h2 id="more-depth-light">More depth & light</h2> + <p>With our subtle gradients we are closer to creating a solid contrast between interactive elements, but we can improve this even further. By adding some more depth with a harder light source and more pronounced outlines, we allow the button elements to stand out on their own more strongly.</p> + <p>This is fairly easy to accomplish with CSS using the very basic <code>box-shadow</code>, <code>text-shadow</code> and <code>border</code> properties:</p> -<pre><code>/* Parent container */ + +<pre><code>/* Parent container */ .buttons-container { background-image: linear-gradient(0deg, #BBC6CD 3%, #E2EBF0 100%); border: 1px solid #8D8D8D; box-shadow: 0 2px 4px 0 rgba(42,42,42,0.40), inset 0 1px 3px 0 rgba(255,255,255,0.50); } -</code></pre> -<pre><code>/* Shared button styling with text-shadows */ + +/* Shared button styling with text-shadows */ .buttons-container button { text-shadow: 0 2px 4px rgba(0,0,0,0.30); } -</code></pre> -<pre><code>/* Sign up button */ + +/* Sign up button */ .buttons-container button:first-child { background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%); border: 1px solid #0C6B16; box-shadow: 0 1px 5px 0 rgba(9,116,21,0.50), inset 0 -1px 6px 0 rgba(0,0,0,0.20), inset 0 1px 0 0 rgba(255,255,255,0.50), inset 0 2px 4px 0 rgba(255,255,255,0.50); } -</code></pre> -<pre><code>/* Log in button */ + +/* Log in button */ .buttons-container button:last-child { background-image: linear-gradient(-180deg, #489FD2 0%, #0A6DAC 100%); border: 1px solid #0A486E; box-shadow: 0 1px 5px 0 rgba(9,85,133,0.50), inset 0 -1px 6px 0 rgba(0,0,0,0.20), inset 0 1px 0 0 rgba(255,255,255,0.50), inset 0 2px 4px 0 rgba(255,255,255,0.50); } </code></pre> -<p>For easy reference, here is the CSS styling in it's entirety:</p> -<pre><code>/* Parent container */ + +<p>For easy reference, here is the CSS styling in it’s entirety:</p> + +<pre><code>/* Parent container */ .buttons-container { background-image: linear-gradient(0deg, #BBC6CD 3%, #E2EBF0 100%); border-radius: 5px; @@ -136,7 +173,7 @@ button:last-child { width: 100%; } -/* Shared button styling */ +/* Shared button styling */ button { appearance: none; border: 0; @@ -151,7 +188,7 @@ button { width: 50%; } -/* Sign up button */ +/* Sign up button */ button:first-child { background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%); border: 1px solid #0C6B16; @@ -159,15 +196,18 @@ button:first-child { margin-right: 10px; } -/* Log in button */ +/* Log in button */ button:last-child { background-image: linear-gradient(-180deg, #489FD2 0%, #0A6DAC 100%); border: 1px solid #0A486E; box-shadow: 0 1px 5px 0 rgba(9,85,133,0.50), inset 0 1px 0 0 rgba(255,255,255,0.50), inset 0 2px 4px 0 rgba(255,255,255,0.50); } </code></pre> -<h2>Going even further with this UI</h2> + +<h2 id="going-even-further-with-this-ui">Going even further with this UI</h2> + <p>This demo article only showcases how to improve on a basic button UI structure with a focus on proper hierarchy between elements.</p> + <p>Once completely developed, these element should support all interactive states (<code>hover</code>, <code>active</code>, <code>disabled</code>) and animations to make for a more engaging experience.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/ps4-download-ui/index.html b/build/ps4-download-ui/index.html index 876f532..277310d 100644 --- a/build/ps4-download-ui/index.html +++ b/build/ps4-download-ui/index.html @@ -1,73 +1,92 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>PS4 Download UI with Pure CSS</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>PS4 Download UI with Pure CSS</h1> +<h1 id="ps4-download-ui-with-pure-css">PS4 Download UI with Pure CSS</h1> + <p>2021-06-20</p> -<p>Overall, I'm fairly impressed with the user interface design of Sony's PS4 system OS. It's minimal and keeps the content front and center. Even with it's sometimes spotty performance hiccups, I've come to enjoy interacting with it.</p> -<p>One of the key UI items I've always been a fan of is the download progress view under the <code>Notifications</code> settings. So I figured I'd try my hand at recreating this with pure CSS. Here is the final result:</p> + +<p>Overall, I’m fairly impressed with the user interface design of Sony’s PS4 system OS. It’s minimal and keeps the content front and center. Even with it’s sometimes spotty performance hiccups, I’ve come to enjoy interacting with it.</p> + +<p>One of the key UI items I’ve always been a fan of is the download progress view under the <code>Notifications</code> settings. So I figured I’d try my hand at recreating this with pure CSS. Here is the final result:</p> + <p><img src="/public/images/ps4-loading.png" alt="PS4 loading screen bar" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/qBroORG">Live CodePen Example</a></p> -<p>Although I've added some of my own improvements (typography spacing, tweaks to the progress bar animation) - the concept it still pretty close to the original.</p> -<p>But enough chit-chat, let's walkthrough how to make it!</p> -<h2>The HTML</h2> + +<p>Although I’ve added some of my own improvements (typography spacing, tweaks to the progress bar animation) - the concept it still pretty close to the original.</p> + +<p>But enough chit-chat, let’s walkthrough how to make it!</p> + +<h2 id="the-html">The HTML</h2> + <p>As with most of my demos, the HTML is very minimal and straightforward. The PS4 system OS download view needs to show the following:</p> + <ol> -<li>The game's title</li> +<li>The game’s title</li> <li>Full game size, amount downloaded and time remaining</li> <li>Visual progress bar</li> </ol> -<p>So we will place the game's title inside our <code>h2</code> with a class of <code>title</code> (shocking, I know). The details about game size, downloaded amount and time remaining gets placed under a parent <code>div</code> with an accompanying <code>details</code> class. Finally, we create our progress bar by including a parent <code>div</code> with a class of <code>progress</code> that contains a child <code>div</code> with a class of <code>inner-progress</code>.</p> + +<p>So we will place the game’s title inside our <code>h2</code> with a class of <code>title</code> (shocking, I know). The details about game size, downloaded amount and time remaining gets placed under a parent <code>div</code> with an accompanying <code>details</code> class. Finally, we create our progress bar by including a parent <code>div</code> with a class of <code>progress</code> that contains a child <code>div</code> with a class of <code>inner-progress</code>.</p> + <p>Pretty clean and easy to understand.</p> -<pre><code><div class="wrapper"> - <img src="https://upload.wikimedia.org/wikipedia/commons/0/00/PlayStation_logo.svg" alt="PS4" class="logo"> - <h2 class="title">Detroit: Become Human</h2> - <div class="details"> - <p>Update File</p> - <p>13.45/17.50 GB (21 Minutes Left)</p> - </div> - <div class="progress"> - <div class="inner-progress"></div> - </div> -</div> + +<pre><code><div class="wrapper"> + <img src="https://upload.wikimedia.org/wikipedia/commons/0/00/PlayStation_logo.svg" alt="PS4" class="logo"> + <h2 class="title">Detroit: Become Human</h2> + <div class="details"> + <p>Update File</p> + <p>13.45/17.50 GB (21 Minutes Left)</p> + </div> + <div class="progress"> + <div class="inner-progress"></div> + </div> +</div> </code></pre> -<h2>The CSS</h2> -<p>Now it's time to utilize all those classes in the HTML above to craft our PS4 UI recreation. I'll break this section down into digestible chunks to avoid overwhelming you by vomiting out a bunch of CSS spaghetti.</p> -<p>First we'll add a bunch of QOL improvements to help better showcase the demo (adding custom fonts, center content etc.).</p> + +<h2 id="the-css">The CSS</h2> + +<p>Now it’s time to utilize all those classes in the HTML above to craft our PS4 UI recreation. I’ll break this section down into digestible chunks to avoid overwhelming you by vomiting out a bunch of CSS spaghetti.</p> + +<p>First we’ll add a bunch of QOL improvements to help better showcase the demo (adding custom fonts, center content etc.).</p> + <p>This part is completely <em>optional</em>:</p> -<pre><code>/* Import fonts */ -@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;400&display=swap'); -/* Gradient background styling, height overrides */ +<pre><code>/* Import fonts */ +@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;400&display=swap'); + +/* Gradient background styling, height overrides */ body { background: linear-gradient(#226AB6 0%, #144E8A 100%) no-repeat; color: white; display: block; - font-family: 'Source Sans Pro', sans-serif; + font-family: 'Source Sans Pro', sans-serif; font-weight: 200; height: 100vh; } -/* Wrapper to center content */ +/* Wrapper to center content */ .wrapper { margin: 0 auto; max-width: 800px; padding: 4rem 0 0; } -/* Optional PS4 logo */ +/* Optional PS4 logo */ .logo { display: block; filter: invert(1); @@ -76,7 +95,9 @@ body { width: 60px; } </code></pre> -<p>Now for the styling that <em>actually matters</em>. First we will style the game's title and accompanying details (<code>flexbox</code> to the rescue again!):</p> + +<p>Now for the styling that <em>actually matters</em>. First we will style the game’s title and accompanying details (<code>flexbox</code> to the rescue again!):</p> + <pre><code>h2.title { font-weight: 400; margin: 0; @@ -91,7 +112,9 @@ body { margin: 0; } </code></pre> + <p>Not a whole lot of code to get things looking proper, eh? Next we move on to the progress bar. This is <em>slightly</em> more interesting since we are going to utilize the <code>before</code> pseudo element - which sounds more complex than it actually is. Pay close attention to the pseudo element and how it calls the <code>progress-bar-shine</code> animation - more on that later.</p> + <pre><code>.progress { background: #226AB6; border: 1px solid white; @@ -104,7 +127,7 @@ body { animation: progress-bar-shine 2.5s infinite; background: linear-gradient(to left, white 0%, transparent 100%); border-radius: 10px; - content:''; + content:''; filter: blur(8px); height: 100%; opacity: 0.8; @@ -119,7 +142,9 @@ body { width: 450px; } </code></pre> + <p>Almost finished! We just need to animate that <code>before</code> pseudo element with a simple <code>keyframes</code> at-rule:</p> + <pre><code>@keyframes progress-bar-shine { to { transform:translateX(450px); @@ -127,8 +152,10 @@ body { } } </code></pre> -<h2>Wrapping Up</h2> -<p>Although far from perfect, this experiment still explores what can be created (or in this case, <em>re</em>created) in the browser using just pure CSS. Remember, you don't have to reach for JavaScript just because you can!</p> + +<h2 id="wrapping-up">Wrapping Up</h2> + +<p>Although far from perfect, this experiment still explores what can be created (or in this case, <em>re</em>created) in the browser using just pure CSS. Remember, you don’t have to reach for JavaScript just because you can!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/public/videos/fixed-header-tables.mp4 b/build/public/videos/fixed-header-tables.mp4 Binary files differnew file mode 100644 index 0000000..87fbdce --- /dev/null +++ b/build/public/videos/fixed-header-tables.mp4 diff --git a/build/public/videos/not-fixed-header-tables.mp4 b/build/public/videos/not-fixed-header-tables.mp4 Binary files differnew file mode 100644 index 0000000..2ebd7ee --- /dev/null +++ b/build/public/videos/not-fixed-header-tables.mp4 diff --git a/build/publish-with-jekyll/index.html b/build/publish-with-jekyll/index.html index 56b8ca8..b3d0a3a 100644 --- a/build/publish-with-jekyll/index.html +++ b/build/publish-with-jekyll/index.html @@ -1,107 +1,147 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Publishing Simple Books With Jekyll</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Publishing Simple Books With Jekyll</h1> +<h1 id="publishing-simple-books-with-jekyll">Publishing Simple Books With Jekyll</h1> + <p>2019-06-20</p> -<p>When thinking about writing, designing and ultimately publishing an ebook, most people don't think of using a static site generator. Having products like Amazon Publishing, LaTeX or even Microsoft Word available, why should you use Jekyll?</p> + +<p>When thinking about writing, designing and ultimately publishing an ebook, most people don’t think of using a static site generator. Having products like Amazon Publishing, LaTeX or even Microsoft Word available, why should you use Jekyll?</p> + <p>Two reasons:</p> + <ul> <li>extremely easy to use</li> <li>total customization</li> </ul> -<p>I know these same arguments could be made towards the other options mentioned above, but I'm biased towards Jekyll since I love the simplicity of HTML and CSS. Hopefully, after reading this post, you will feel the same as well!</p> -<h2>No developer skills needed</h2> -<p>You won't need any hardcore development skills or in-depth knowledge of Jekyll to get the most out of this publishing technique. The theme (<a href="https://github.com/henrythemes/jekyll-book-theme">Jekyll Book Theme</a>) will allow you to focus on your book's content rather than wrestling with typography and page layouts. A basic command line script will perform all the heavy lifting for us at the end.</p> -<h2>What are we creating?</h2> + +<p>I know these same arguments could be made towards the other options mentioned above, but I’m biased towards Jekyll since I love the simplicity of HTML and CSS. Hopefully, after reading this post, you will feel the same as well!</p> + +<h2 id="no-developer-skills-needed">No developer skills needed</h2> + +<p>You won’t need any hardcore development skills or in-depth knowledge of Jekyll to get the most out of this publishing technique. The theme (<a href="https://github.com/henrythemes/jekyll-book-theme">Jekyll Book Theme</a>) will allow you to focus on your book’s content rather than wrestling with typography and page layouts. A basic command line script will perform all the heavy lifting for us at the end.</p> + +<h2 id="what-are-we-creating">What are we creating?</h2> + <p>You can see the demo of the <em>online</em> and PDF versions of the book below: </p> + <ul> <li><a href="http://henrythemes.github.io/jekyll-book-theme/">Jekyll Book Theme (Website)</a></li> <li><a href="/public/jekyll-book-theme-sample.pdf">Jekyll Book Theme (PDF Sample)</a></li> </ul> -<p>So without wasting anymore time, let's get started!</p> -<h2>Table of Contents</h2> + +<p>So without wasting anymore time, let’s get started!</p> + +<h2 id="table-of-contents">Table of Contents</h2> + <ol> <li><a href="#setup-jekyll">Setup Jekyll</a></li> -<li><a href="#book-theme">Using the "Book" Jekyll Theme</a></li> +<li><a href="#book-theme">Using the “Book” Jekyll Theme</a></li> <li><a href="#chapter-collections">Writing Chapters</a></li> <li><a href="#html-to-pdf">HTML to PDF</a></li> <li><a href="#closing-thoughts">Closing Thoughts</a></li> </ol> -<p><h2 id="setup-jekyll">1. Setup Jekyll</h2></p> + <p>Before we can really do anything else, you will need to install and setup Jekyll. The best way to do so is by following the instructions on the official Jekyll website:</p> + <ul> <li><a href="https://jekyllrb.com/docs/installation/">Installing Jekyll</a></li> </ul> + <p>Run through the simple step-by-step installation instructions based on your operating system.</p> -<h3>Basic requirements</h3> + +<h3 id="basic-requirements">Basic requirements</h3> + <ul> <li>Ruby version 2.4.0 or above</li> <li>RubyGems</li> <li>GCC and Make (in case your system doesn’t have them installed)</li> </ul> -<p><h2 id="book-theme">2. Using the "Book" template</h2></p> -<p>The example we will be referencing in this post is the open source Jekyll theme called "Jekyll Book Theme". This theme as been designed and optimized for publishing ebooks with Jekyll.</p> + +<p>The example we will be referencing in this post is the open source Jekyll theme called “Jekyll Book Theme”. This theme as been designed and optimized for publishing ebooks with Jekyll.</p> + <p>Simply following the instructions on the main README page of the <a href="https://github.com/henrythemes/jekyll-book-theme">jekyll-book-theme repo</a>.</p> -<p><strong>Important</strong>: Take the time to edit the <code>title</code>, and <code>author</code> properties in the <code>_config.yml</code> file in the root directory. Make sure these reflect your own book's content.</p> -<p>That's it. Now let's tell Jekyll how we want it to format our chapters.</p> -<p><h2 id="chapter-collections">3. Working with chapter collections</h2></p> + +<p><strong>Important</strong>: Take the time to edit the <code>title</code>, and <code>author</code> properties in the <code>_config.yml</code> file in the root directory. Make sure these reflect your own book’s content.</p> + +<p>That’s it. Now let’s tell Jekyll how we want it to format our chapters.</p> + <p>By default, Jekyll will look for latest posts in the <code>_post</code> directory. This is useful for blogs and basic static websites - but not for us. We want chapters.</p> -<h3>Using custom collections</h3> -<p>Thankfully, Jekyll is flexible and allows us to set our own custom "collections". Collections are ways to group related content together for easier use dynamically. Our plan is to setup a collection that will house our chapter markdown files in numeric order. You can see this in the "book" template top level directory. It should look like the following:</p> + +<h3 id="using-custom-collections">Using custom collections</h3> + +<p>Thankfully, Jekyll is flexible and allows us to set our own custom “collections”. Collections are ways to group related content together for easier use dynamically. Our plan is to setup a collection that will house our chapter markdown files in numeric order. You can see this in the “book” template top level directory. It should look like the following:</p> + <ul> <li><code>_chapters</code> + <ul> <li><code>01.md</code></li> <li><code>02.md</code></li> <li><code>03.md</code></li> <li><code>etc..</code></li> +</ul></li> </ul> -</li> -</ul> -<h3>But the template already has this setup</h3> -<p>By default the Jekyll Book Theme template has this chapters collection implemented and working as intended. The reason I broke it down step-by-step is so that you can have some better understanding about what is happening "under the hood". </p> + +<h3 id="but-the-template-already-has-this-setup">But the template already has this setup</h3> + +<p>By default the Jekyll Book Theme template has this chapters collection implemented and working as intended. The reason I broke it down step-by-step is so that you can have some better understanding about what is happening “under the hood”. </p> + <p>Teach a person to fish and all that jazz.</p> + <p>Now all you need to do is break your chapters down into their own numbered markdown files inside <code>_chapters</code>.</p> -<p><h2 id="html-to-pdf">4. HTML to PDF</h2></p> + <p><img src="/public/images/publishing-with-jekyll.webp" alt="Publishing with Jekyll" /></p> -<p>Before you can convert your digital book "website", you need to install the <code>wkhtmltopdf</code> package. Download and follow the instructions below:</p> + +<p>Before you can convert your digital book “website”, you need to install the <code>wkhtmltopdf</code> package. Download and follow the instructions below:</p> + <ul> <li><a href="https://wkhtmltopdf.org/">wkhtmltopdf</a></li> </ul> -<h3>Command line conversion</h3> + +<h3 id="command-line-conversion">Command line conversion</h3> + <p>In your terminal, navigate inside the <code>_site</code> folder of your jekyll build and then run the following command:</p> -<pre><code>for f in *.html; do wkhtmltopdf -g -s Letter --no-background "$f" "${f/_*_/_}.pdf";done + +<pre><code>for f in *.html; do wkhtmltopdf -g -s Letter --no-background "$f" "${f/_*_/_}.pdf";done </code></pre> -<p>Shortly after you should have a generated PDF file inside the <code>_site</code> folder - most likely named <code>index.html.pdf</code>. That's it! Enjoy your fully formatted PDF version of your book!</p> -<p><h2 id="closing-thoughts">5. Closing Thoughts</h2></p> -<p>There are a good amount of pros and cons to this approach of "publishing" PDF versions of your book. Since I'm a sucker for <em>good</em> and <em>bad</em> bullet lists, let's do just that:</p> + +<p>Shortly after you should have a generated PDF file inside the <code>_site</code> folder - most likely named <code>index.html.pdf</code>. That’s it! Enjoy your fully formatted PDF version of your book!</p> + +<p>There are a good amount of pros and cons to this approach of “publishing” PDF versions of your book. Since I’m a sucker for <em>good</em> and <em>bad</em> bullet lists, let’s do just that:</p> + <p><strong>The Good</strong></p> + <ul> <li>Online version and PDF versions share same styling (keeps things consistent)</li> <li>Chapters are written in <code>markdown</code> (increased flexibility of writing apps etc.)</li> <li>Very fast and streamlined build process</li> <li>PDF format renders out the chapter headers for built-in navigation</li> </ul> + <p><strong>The Bad</strong></p> + <ul> -<li>Chapters are spit out as one long, single page (I'm sure this could be rectified with some custom work)</li> +<li>Chapters are spit out as one long, single page (I’m sure this could be rectified with some custom work)</li> <li>More suited for short stories, papers, essay articles (not so great for epic novels)</li> -<li>I'm sure there are other cons I am missing?</li> +<li>I’m sure there are other cons I am missing?</li> </ul> -<p>In the end, using something like LaTeX would certainly grant the user more flexibility in design and layout of the final "print" PDF product - but I'm a sucker for using Jekyll when I can. </p> + +<p>In the end, using something like LaTeX would certainly grant the user more flexibility in design and layout of the final “print” PDF product - but I’m a sucker for using Jekyll when I can. </p> + <p>Please let me know if you decide to use this method and end up publishing your own book 😀 I would love to check it out!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/pure-css-simple-dropdown-plugin/index.html b/build/pure-css-simple-dropdown-plugin/index.html index 58401fa..cbe164f 100644 --- a/build/pure-css-simple-dropdown-plugin/index.html +++ b/build/pure-css-simple-dropdown-plugin/index.html @@ -1,24 +1,30 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Pure CSS Simple Dropdown Plugin</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Pure CSS Simple Dropdown Plugin</h1> +<h1 id="pure-css-simple-dropdown-plugin">Pure CSS Simple Dropdown Plugin</h1> + <p>2018-09-20</p> -<p>I find myself blowing away default browser <code>select</code> styling and implementing my own custom dropdowns far more often than I'd like. So, I recently created a very simple and clean component using just pure CSS.</p> + +<p>I find myself blowing away default browser <code>select</code> styling and implementing my own custom dropdowns far more often than I’d like. So, I recently created a very simple and clean component using just pure CSS.</p> + <p>Check out the CodePen below and feel free to morph it as you see fit for your own projects!</p> + <p><img src="/public/images/plug-play.png" alt="Three dropdown elements styled differently" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/rZPzWy/">Live CodePen Example</a></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/quick-dirty-theme-switcher/index.html b/build/quick-dirty-theme-switcher/index.html index f5ef834..818cecb 100644 --- a/build/quick-dirty-theme-switcher/index.html +++ b/build/quick-dirty-theme-switcher/index.html @@ -1,42 +1,52 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Quick and Dirty Theme Switcher</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Quick and Dirty Theme Switcher</h1> +<h1 id="quick-and-dirty-theme-switcher">Quick and Dirty Theme Switcher</h1> + <p>2020-06-04</p> -<p><strong>Update</strong>: This article is no longer relevant since my blog design has changed. I'm keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site.</p> -<hr /> -<p><em>I recently added a fairly straightforward color scheme (theme) switcher</em> to my personal website. You can toggle this simple color switcher in the footer of the site to see it in action. In case anyone else had the desire to add such functionality to their own sites/projects, I figured I'd write up a quick post explaining how to do so. Let's get into it.</p> -<p><figure> - <img src="/public/images/site-color-schemes.gif" alt="Theme color scheme switcher"> - <figcaption>My website color scheme switcher in action (<a href="/public/images/site-color-schemes.gif">direct link to image</a>)</figcaption> -</figure> </p> -<h2>The HTML</h2> -<p>First we need to include the &#8220;buttons&#8221; that will trigger the theme to switch based on which one is selected. (Note: you could always render these as <code>options</code> in a <code>select</code> element if you preferred that method)</p> -<pre><code><div class="color-select"> - <button onclick="toggleDefaultTheme()"></button> - <button onclick="toggleSecondTheme()"></button> - <button onclick="toggleThirdTheme()"></button> -</div> + +<p><strong>Update</strong>: This article is no longer relevant since my blog design has changed. I’m keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site.</p> + +<hr/> + +<p><em>I recently added a fairly straightforward color scheme (theme) switcher</em> to my personal website. You can toggle this simple color switcher in the footer of the site to see it in action. In case anyone else had the desire to add such functionality to their own sites/projects, I figured I’d write up a quick post explaining how to do so. Let’s get into it.</p> + +<h2 id="the-html">The HTML</h2> + +<p>First we need to include the “buttons” that will trigger the theme to switch based on which one is selected. (Note: you could always render these as <code>options</code> in a <code>select</code> element if you preferred that method)</p> + +<pre><code><div class="color-select"> + <button onclick="toggleDefaultTheme()"></button> + <button onclick="toggleSecondTheme()"></button> + <button onclick="toggleThirdTheme()"></button> +</div> </code></pre> -<p>That's it! Don't worry too much about the <code>onclick</code> parameter right now, we'll come back to that when adding our JavaScript. The only remaining item is adding a default theme class to our <code>html</code> element, like so:</p> -<pre><code><html class="theme-default"> + +<p>That’s it! Don’t worry too much about the <code>onclick</code> parameter right now, we’ll come back to that when adding our JavaScript. The only remaining item is adding a default theme class to our <code>html</code> element, like so:</p> + +<pre><code><html class="theme-default"> </code></pre> -<h2>The CSS</h2> + +<h2 id="the-css">The CSS</h2> + <p>Next we need to style both the <code>color-select</code> buttons, along with the custom color schemes that will alter the entire website. We will start with the color schemes.</p> + <p>For these themes to swap seamlessly between each other, we will be setting our altering color sets as CSS variables:</p> + <pre><code>.theme-default { --accent-color: #72f1b8; --font-color: #34294f; @@ -57,7 +67,9 @@ body { color: var(--font-color); } </code></pre> + <p>Finally, we style the user-facing color swatches:</p> + <pre><code>.color-select button { -moz-appearance: none; appearance: none; @@ -70,52 +82,58 @@ body { width: 20px; } -/* Style each swatch to match the corresponding theme */ +/* Style each swatch to match the corresponding theme */ .color-select button:nth-child(1) { background: #72f1b8; border-color: #34294f; } .color-select button:nth-child(2) { background: #FFBF00; border-color: #59316B; } .color-select button:nth-child(3) { background: #d9455f; border-color: #303960; } </code></pre> -<h2>The JavaScript</h2> -<p>We need to have each color swatch button trigger it's corresponding theme and swap out the <code>theme-default</code> class that we have originally attached to the main <code>html</code> element. We also need to store what the user has selected into <code>localStorage</code>, so their choice persists when reloading or navigating to other pages.</p> -<pre><code>// Set a given theme/color-scheme + +<h2 id="the-javascript">The JavaScript</h2> + +<p>We need to have each color swatch button trigger it’s corresponding theme and swap out the <code>theme-default</code> class that we have originally attached to the main <code>html</code> element. We also need to store what the user has selected into <code>localStorage</code>, so their choice persists when reloading or navigating to other pages.</p> + +<pre><code>// Set a given theme/color-scheme function setTheme(themeName) { - localStorage.setItem('theme', themeName); + localStorage.setItem('theme', themeName); document.documentElement.className = themeName; } -// Toggle between color themes +// Toggle between color themes function toggleDefaultTheme() { - if (localStorage.getItem('theme') !== 'theme-default'){ - setTheme('theme-default'); + if (localStorage.getItem('theme') !== 'theme-default'){ + setTheme('theme-default'); } } function toggleSecondTheme() { - if (localStorage.getItem('theme') !== 'theme-second'){ - setTheme('theme-second'); + if (localStorage.getItem('theme') !== 'theme-second'){ + setTheme('theme-second'); } } function toggleThirdTheme() { - if (localStorage.getItem('theme') !== 'theme-third'){ - setTheme('theme-third'); + if (localStorage.getItem('theme') !== 'theme-third'){ + setTheme('theme-third'); } } -// Immediately set the theme on initial load +// Immediately set the theme on initial load (function () { - if (localStorage.getItem('theme') === 'theme-default') { - setTheme('theme-default'); + if (localStorage.getItem('theme') === 'theme-default') { + setTheme('theme-default'); } - if (localStorage.getItem('theme') === 'theme-second') { - setTheme('theme-second'); + if (localStorage.getItem('theme') === 'theme-second') { + setTheme('theme-second'); } - if (localStorage.getItem('theme') === 'theme-third') { - setTheme('theme-third'); + if (localStorage.getItem('theme') === 'theme-third') { + setTheme('theme-third'); } })(); </code></pre> -<p>And that's it! Now it just depends on how custom you want each individual theme style to be. The possibilities are endless!</p> -<h2>Extra Improvements</h2> -<p>You could improve this concept even further hiding the <code>color-select</code> item if the user has JavaScript disabled. For my needs, I felt it was a fine trade-off to keep the non-functioning color swatch pickers if JavaScript was disabled. However, your project/site might need better fallbacks.</p> + +<p>And that’s it! Now it just depends on how custom you want each individual theme style to be. The possibilities are endless!</p> + +<h2 id="extra-improvements">Extra Improvements</h2> + +<p>You could improve this concept even further hiding the <code>color-select</code> item if the user has JavaScript disabled. For my needs, I felt it was a fine trade-off to keep the non-functioning color swatch pickers if JavaScript was disabled. However, your project/site might need better fallbacks.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/resume/index.html b/build/resume/index.html index bdad521..916dd20 100644 --- a/build/resume/index.html +++ b/build/resume/index.html @@ -1,99 +1,93 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Bradley Taunt</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Bradley Taunt</h1> -<p><strong>UX Designer & Software Engineer</strong><br> -brad@bt.ht</p> -<p>As a designer/developer hybrid, I help software companies improve their user experience and ship more performant products.</p> -<h2>Skills & Languages</h2> -<p>Core tools are Figma, HTML, CSS, JavaScript & WordPress. Currently improving my skills with Ruby, Rails, MySQL & PHP. I also enjoy tinkering with basic shell scripts and Unix systems.</p> -<h2>Experience</h2> -<table> -<tr><th>Title</th><th>Company</th><th>Duration</th></tr> -<tr><td>Full Stack Engineer</td><td>SerpApi</td><td>2023-Now</td></tr> -<tr><td>Senior UX Designer</td><td>Donorbox</td><td>2021-2023</td></tr> -<tr><td>Senior Designer</td><td>Purism</td><td>2019-2021</td></tr> -<tr><td>Lead Product Designer</td><td>Benbria</td><td>2012-2019</td></tr> -<tr><td>Web Designer</td><td>Netvatise</td><td>2009-2012</td></tr> -</table> -<!-- - **Fullstack Engineer at SerpApi** - - *2023-Now* / Remote<br> -- **Senior UX Designer at Donorbox** - - *2021-2023* / Remote<br> -- **Senior Designer at Purism** - - *2019-2021* / Remote<br> -- **Lead Product Designer at Benbria** - - *2012-2019* / Ottawa, Canada<br> -- **Web Designer & SEO Technician at Netvatise** - - *2006-2009* / Oshawa, Canada<br> --> -<!-- ### Fullstack Engineer at SerpApi - -**2023-Now** / Remote - -- Update and implement frontend designs -- - -### Senior UX Designer at Donorbox - -**2021-2023** / Remote - -- Conduct user and customer interviews -- Collect and analyze user testing interviews -- Implement new designs in Figma -- Create interactive prototypes for internal testing -- Develop front-end web components -- Sync and test development work with front-end team +<h1 id="bradley-taunt">Bradley Taunt</h1> -### Senior Designer at Purism +<p><strong>UX Designer & Software Engineer</strong> +<a href="mailto:brad@bt.ht">brad@bt.ht</a></p> -**2019-2021** / Remote +<p>As a designer/developer hybrid, I help software companies improve their user experience and ship more performant products.</p> -- Designed and developed product pages -- WordPress / WooCommerce management and maintenance -- Developed one-off mini-sites -- Updated SEO-targeted landing pages -- Social media and community management +<h2 id="skills-languages">Skills & Languages</h2> -### Lead Product Designer at Benbria +<p>Core tools are Figma, HTML, CSS, JavaScript & WordPress. Currently improving my skills with Ruby, Rails, MySQL & PHP. I also enjoy tinkering with basic shell scripts and Unix systems.</p> -**2012-2019** / Ottawa, Canada +<h2 id="experience">Experience</h2> -- Redesigned entire customer inbox (web app) journey -- Built the customer-facing UI for clients such as A&W, Royal Caribbean International, Sandals, Delta, Farm Boy, and more -- Worked with iOS developers to port existing web app to native for iPads/iPhones - -### Web Designer & SEO Technician at Netvatise +<table> +<thead> +<tr> +<th>Title</th> +<th>Company</th> +<th>Duration</th> +</tr> +</thead> + +<tbody> +<tr> +<td>Full Stack Engineer</td> +<td>SerpApi</td> +<td>2023-Now</td> +</tr> +<tr> +<td>Senior UX Designer</td> +<td>Donorbox</td> +<td>2021-2023</td> +</tr> +<tr> +<td>Senior Designer</td> +<td>Purism</td> +<td>2019-2021</td> +</tr> +<tr> +<td>Lead Product Designer</td> +<td>Benbria</td> +<td>2012-2019</td> +</tr> +<tr> +<td>Web Designer</td> +<td>Netvatise</td> +<td>2009-2012</td> +</tr> +</tbody> +</table> -**2009-2012** / Toronto, Canada +<h2 id="education">Education</h2> -- Static website design and deployment -- WordPress / WooCommerce management and maintenance -- SEO content updates / performance boosts -- Web analytics reviews & audits --> -<h2>Education</h2> <table> -<tr><th>Institution</th><th>Program</th><th>Completion</th></tr> -<tr><td>Durham College</td><td>Multimedia Design</td><td>2009</td></tr> +<thead> +<tr> +<th>Institution</th> +<th>Program</th> +<th>Completion</th> +</tr> +</thead> + +<tbody> +<tr> +<td>Durham College</td> +<td>Multimedia Design</td> +<td>2009</td> +</tr> +</tbody> </table> -<!-- ### Durham College -**2006-2009** / Oshawa, Canada +<h2 id="interests">Interests</h2> -- Associates Degree in Multimedia Design - 3 Year Program --> -<h2>Interests</h2> <ul> <li>Open source software </li> <li>Web accessibility </li> @@ -107,8 +101,11 @@ brad@bt.ht</p> <li>Optimizing build times and version control</li> <li>Writing technical articles</li> </ul> + <p>Other: playing with my kids, hockey, video games, Linux distro-hopping.</p> -<h2>References</h2> + +<h2 id="references">References</h2> + <p>Available upon request.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/rss-click/index.html b/build/rss-click/index.html index 1dbe5d9..5913050 100644 --- a/build/rss-click/index.html +++ b/build/rss-click/index.html @@ -1,51 +1,62 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Clickable Links Inside XML</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Clickable Links Inside XML</h1> +<h1 id="clickable-links-inside-xml">Clickable Links Inside XML</h1> + <p>2022-06-20</p> + <p>With the recent patch to the Shinobi Website project, I thought it would be best to share my experience implementing clickable links inside a rendered XML RSS file directly through a browser. This is made possible thanks to the awesome power of XSL formatting.</p> + <p>Before we begin, it should be noted that both Safari for macOS and <em>all</em> browsers on iOS do NOT support the ability to render XML files. Instead you are required to download the feeds as static files to your system. Major bummmer. Hopefully this will be fixed in the near future.</p> -<h2>The Code</h2> + +<h2 id="the-code">The Code</h2> + <p>Rendering your entry links as interactive URLs is fairly intuitive. You just need to:</p> + <ol> -<li>Tell the file which tag it needs to render as the "a:link" element</li> -<li>Set the inner child attribute to "href"</li> -<li>Set the value of that attribute to use the entry's <code>link</code> parameter</li> +<li><p>Tell the file which tag it needs to render as the “a:link” element</p></li> +<li><p>Set the inner child attribute to “href”</p></li> +<li><p>Set the value of that attribute to use the entry’s <code>link</code> parameter</p> + +<p><a href="/xsl:attribute">/xsl:attribute</a> + +<a href="/xsl:element">/xsl:element</a></p></li> </ol> -<pre><code><xsl:element name="a"> - <xsl:attribute name="href"> - <xsl:value-of select="link"/> - </xsl:attribute> - <pre><xsl:value-of select="title"/></pre> -</xsl:element> -</code></pre> + <p>In the instance above I am rendering the entry title as a clickable element which will direct users to the specific entry URL. You could simply render the full entry link URL text as the interactive link if you prefer. Something like:</p> -<pre><code><xsl:element name="a"> - <xsl:attribute name="href"> - <xsl:value-of select="link"/> - </xsl:attribute> - <pre><xsl:value-of select="link"/></pre> -</xsl:element> + +<pre><code><xsl:element name="a"> + <xsl:attribute name="href"> + <xsl:value-of select="link"/> + </xsl:attribute> + <pre><xsl:value-of select="link"/></pre> +</xsl:element> </code></pre> -<h2>Live Example</h2> -<p>In a supported browser, you can see the code in action here: https://pblog.bt.ht/feed.xml</p> -<p>That's really all there is to it.</p> -<h2>Refs</h2> + +<h2 id="live-example">Live Example</h2> + +<p>In a supported browser, you can see the code in action here: <a href="https://pblog.bt.ht/feed.xml">https://pblog.bt.ht/feed.xml</a></p> + +<p>That’s really all there is to it.</p> + +<h2 id="refs">Refs</h2> + <ol> -<li>https://shinobi.bt.ht/posts/patch-3.txt</li> +<li><a href="https://shinobi.bt.ht/posts/patch-3.txt">https://shinobi.bt.ht/posts/patch-3.txt</a></li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/rss-hacks/index.html b/build/rss-hacks/index.html index 232de44..d6d4ef5 100644 --- a/build/rss-hacks/index.html +++ b/build/rss-hacks/index.html @@ -1,56 +1,84 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>RSS Hacks With XSLT</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>RSS Hacks With XSLT</h1> +<h1 id="rss-hacks-with-xslt">RSS Hacks With XSLT</h1> + <p>2022-05-23</p> -<p>In my spare time I've been further tinkering (hopefully for the better) with my humble Shinobi Website[^0] script. The most recent update in <code>patch-1</code> came with a solid amount of QoL improvements. If you're interested, I wrote about it on the official Shinobi blog[^1].</p> -<p>The next feature I wanted to tackle was designing a custom layout for the XML files directly in the browser. I was greatly inspired to create something similar to Len Falken's main directory listing[^2], since that blog was one of the original inspirations for Shinobi. I'm not able to copy what's there though, since our feed builds are quite a bit different.</p> + +<p>In my spare time I’ve been further tinkering (hopefully for the better) with my humble Shinobi Website[^0] script. The most recent update in <code>patch-1</code> came with a solid amount of QoL improvements. If you’re interested, I wrote about it on the official Shinobi blog[^1].</p> + +<p>The next feature I wanted to tackle was designing a custom layout for the XML files directly in the browser. I was greatly inspired to create something similar to Len Falken’s main directory listing[^2], since that blog was one of the original inspirations for Shinobi. I’m not able to copy what’s there though, since our feed builds are quite a bit different.</p> + <p>I then proceeded to fall down the XSLT rabbit hole.</p> -<h2>It Never Works the First Time, Does It?</h2> -<p>Since the shinobi script generates valid RSS code by default, I didn't want to mess around <em>too</em> much via XSLT and risk breaking validation. I also wanted to keep the "plain text" look-and-feel for consistency with the rest of the site, even though the XSLT template would render into standard HTML. Minor CSS styling and placing the content directly inside <code>pre</code> tags solved these issues.</p> + +<h2 id="it-never-works-the-first-time-does-it">It Never Works the First Time, Does It?</h2> + +<p>Since the shinobi script generates valid RSS code by default, I didn’t want to mess around <em>too</em> much via XSLT and risk breaking validation. I also wanted to keep the “plain text” look-and-feel for consistency with the rest of the site, even though the XSLT template would render into standard HTML. Minor CSS styling and placing the content directly inside <code>pre</code> tags solved these issues.</p> + <p>My first attempt was to use the available <code>sort</code> parameter (in XSL version 1.1+) targeting the <code>dc:date</code> type linked to the <code>pubDate</code> element:</p> -<pre><code><xsl:sort select="pubDate" data-type="dc:date" order="descending"/> -<!-- each individual post's content here --> + +<pre><code><xsl:sort select="pubDate" data-type="dc:date" order="descending"/> +<!-- each individual post's content here --> </code></pre> -<p>This did not work as intended. RSS 2.0 requires that the <code>pubDate</code> content is set to comply with the RFC-822 date-time[^3], which shinobi handles perfectly fine. The issue came from the XSL <code>sort</code> parameter not honoring this setting across all dates. My best guess is that it struggles to properly organize posts from their "month" parameter, so it sets the posts in order of date in what I refer to as "monthly sections".</p> -<p>If anyone knows why this failed to consistently order the posts via <code>pubDate</code>, please let me know using the comment link below. I'm far from an XSLT expert and might have overlooked something painfully obvious!</p> -<h2>RSS Hack: Categories</h2> -<p>After spending far too much time reading over documentation, official manual pages and Stack Overflow comments I gave up on the <code>dc:date</code> sort. I realized I could sort the posts much easier if they were converted into a format similar to ISO 8601. But <code>pubDate</code> is required to be in RFC-822, so I couldn't alter that in the final XML file.</p> + +<p>This did not work as intended. RSS 2.0 requires that the <code>pubDate</code> content is set to comply with the RFC-822 date-time[^3], which shinobi handles perfectly fine. The issue came from the XSL <code>sort</code> parameter not honoring this setting across all dates. My best guess is that it struggles to properly organize posts from their “month” parameter, so it sets the posts in order of date in what I refer to as “monthly sections”.</p> + +<p>If anyone knows why this failed to consistently order the posts via <code>pubDate</code>, please let me know using the comment link below. I’m far from an XSLT expert and might have overlooked something painfully obvious!</p> + +<h2 id="rss-hack-categories">RSS Hack: Categories</h2> + +<p>After spending far too much time reading over documentation, official manual pages and Stack Overflow comments I gave up on the <code>dc:date</code> sort. I realized I could sort the posts much easier if they were converted into a format similar to ISO 8601. But <code>pubDate</code> is required to be in RFC-822, so I couldn’t alter that in the final XML file.</p> + <p>Then I remembered the <code>category</code> tag which shinobi does not utilize by default.</p> + <p>First I needed to convert the RFC-822 formatted date (found on the first line of all blog post text files) and render it inside a <code>category</code> tag. This was simple enough:</p> -<pre><code>$(date -j -f "%a, %d %b %Y" "$(head -n 1 $file)" +"%Y/%m/%d/%u") + +<pre><code>$(date -j -f "%a, %d %b %Y" "$(head -n 1 $file)" +"%Y/%m/%d/%u") </code></pre> -<p>In a nutshell, this converts the RFC-822 date into the format "2022/05/24/2". Simple numbers that can be sorted much easier by XSL. Now all that was needed was setting to <code>sort</code> parameter properly:</p> -<pre><code><xsl:sort select="category" order="descending"/> + +<p>In a nutshell, this converts the RFC-822 date into the format “2022/05/24/2”. Simple numbers that can be sorted much easier by XSL. Now all that was needed was setting to <code>sort</code> parameter properly:</p> + +<pre><code><xsl:sort select="category" order="descending"/> </code></pre> + <p>Everything worked perfectly and the RSS was still valid!</p> -<h3>Patch-2 Pending</h3> -<p>I've ported these changes over to this blog to perform some "in the wild" testing. You can see the custom feed list in your supported browser by visiting:</p> -<p><a href="https://pblog.bt.ht/feed.xml">https://pblog.bt.ht/feed.xml</a></p> -<p>As for the shinobi project itself, I have not merged these updates into the main master branch (at the time of publishing this article). They can be found sitting on patch-2[^4]. My plan is to get this merged ASAP once a little more real-world testing is finished and I can include a better "setup/install" section for newcomers.</p> -<h2>Shinobi Updates</h2> -<p>If you're interested in more updates and details about the shinobi project itself, feel free to sub to that specific feed below. This post was more focused on hacking RSS parameters that happened to involve shinobi, but in the future all updates specific to the project will be posted there:</p> -<p><a href="https://shinobi.bt.ht/feed.xml">https://shinobi.bt.ht/feed.xml</a></p> -<h2>Refs</h2> + +<h3 id="patch-2-pending">Patch-2 Pending</h3> + +<p>I’ve ported these changes over to this blog to perform some “in the wild” testing. You can see the custom feed list in your supported browser by visiting:</p> + +<p><a href="https://pblog.bt.ht/feed.xml">https://pblog.bt.ht/feed.xml</a></p> + +<p>As for the shinobi project itself, I have not merged these updates into the main master branch (at the time of publishing this article). They can be found sitting on patch-2[^4]. My plan is to get this merged ASAP once a little more real-world testing is finished and I can include a better “setup/install” section for newcomers.</p> + +<h2 id="shinobi-updates">Shinobi Updates</h2> + +<p>If you’re interested in more updates and details about the shinobi project itself, feel free to sub to that specific feed below. This post was more focused on hacking RSS parameters that happened to involve shinobi, but in the future all updates specific to the project will be posted there:</p> + +<p><a href="https://shinobi.bt.ht/feed.xml">https://shinobi.bt.ht/feed.xml</a></p> + +<h2 id="refs">Refs</h2> + <ol> -<li>https://shinobi.website/</li> -<li>https://shinobi.website/posts/patch-1.txt</li> -<li>http://len.falken.directory/</li> -<li>https://validator.w3.org/feed/docs/error/InvalidRFC2822Date.html</li> -<li>https://git.sr.ht/~tdarb/shinobi-script/tree/patch-2</li> +<li><a href="https://shinobi.website/">https://shinobi.website/</a></li> +<li><a href="https://shinobi.website/posts/patch-1.txt">https://shinobi.website/posts/patch-1.txt</a></li> +<li><a href="http://len.falken.directory/">http://len.falken.directory/</a></li> +<li><a href="https://validator.w3.org/feed/docs/error/InvalidRFC2822Date.html">https://validator.w3.org/feed/docs/error/InvalidRFC2822Date.html</a></li> +<li><a href="https://git.sr.ht/~tdarb/shinobi-script/tree/patch-2">https://git.sr.ht/~tdarb/shinobi-script/tree/patch-2</a></li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/rss.xml b/build/rss.xml new file mode 100644 index 0000000..10ec9af --- /dev/null +++ b/build/rss.xml @@ -0,0 +1,13965 @@ +<?xml version="1.0" encoding="utf-8"?> +<rss version="2.0"> + <channel> + <title>Making software better without sacrificing user experience.</title> + <link>https://btxx.org/rss.xml</link> + <description>Feed description here</description> + <lastBuildDate>Sat, 08 Jun 2024 17:20:56 +0000</lastBuildDate> + <pubDate>Sat, 08 Jun 2024 17:20:56 +0000</pubDate> + <generator>Custom RSS Generator</generator> + <ttl>1800</ttl> + <item> + <title>The X220 ThinkPad is the Best Laptop in the World</title> + <description><h1 id="the-x220-thinkpad-is-the-best-laptop-in-the-world">The X220 ThinkPad is the Best Laptop in the World</h1> + +<p>2023-09-26</p> + +<p>The X220 ThinkPad is the greatest laptop ever made and you&#8217;re wrong if you think otherwise. No laptop hardware has since surpassed the nearly perfect build of the X220. New devices continue to get thinner and more fragile. Useful ports are constantly discarded for the sake of &#8220;design&#8221;. Functionality is no longer important to manufacturers. Repairability is purposefully removed to prevent users from truly &#8220;owing&#8221; their hardware.</p> + +<p>It&#8217;s a mess out there. But thank goodness I still have my older, second-hand X220.</p> + +<h2 id="specs">Specs</h2> + +<p>Before I get into the details explaining why this laptop is the very best of its kind, let&#8217;s first take a look at my machine&#8217;s basic specifications:</p> + +<ul> +<li>CPU: Intel i7-2640M (4) @ 3.500GHz</li> +<li>GPU: Intel 2nd Generation Core Processor</li> +<li>Memory: 16GB DDR3</li> +<li>OS: Arch Linux &#47; OpenBSD</li> +<li>Resolution: 1366x768</li> +</ul> + +<p>With that out of the way, I will break down my thoughts on the X220 into five major sections: Build quality, available ports, the keyboard, battery life, and repairability.</p> + +<h2 id="build-quality">Build Quality</h2> + +<p>The X220 (like most of Lenovo&#8217;s older X&#47;T models) is built like a tank. Although the inner pieces are sourced from mostly plastic, the device is still better equipped to handle drops and mishandling compared to that of more fragile devices (such as the MacBook Air or Framework). This is made further impressive since the X220 is actually composed of many smaller interconnected pieces (more on this later).</p> + +<p>A good litmus test I perform on most laptops is the &#8220;corner test&#8221;. You grab the base corner of a laptop in its open state. The goal is to see if the device displays any noticeable give or flex. In the X220&#8217;s case: it feels rock solid. The base remains stiff and bobbing the device causes no movement on the opened screen. I&#8217;m aware that holding a laptop in this position is certainly not a normal use case, but knowing it is built well enough to do so speaks volumes of its construction.</p> + +<p>The X220 is also <em>not</em> a lightweight laptop. This might be viewed as a negative for most users, but I actually prefer it. I often become too cautious and end up &#8220;babying&#8221; thinner laptops out of fear of breakage. A minor drop from even the smallest height will severely damage these lighter devices. I have no such worries with my X220.</p> + +<p>As for the laptop&#8217;s screen and resolution: your mileage may vary. I have zero issues with the default display or the smaller aspect ratio. I wrote about how I <a href="/monitor">stopped using an external monitor</a>, so I might be a little biased.</p> + +<p>Overall, this laptop is a device you can snatch up off your desk, whip into your travel bag and be on your way. The rugged design and bulkier weight help put my mind at ease - which is something I can&#8217;t say for newer laptop builds.</p> + +<h2 id="ports">Ports</h2> + +<p><img src="/public/images/ports-everywhere.jpg" alt="Buzz Lightyear and Woody meme: 'Ports, Ports Everywhere'" /></p> + +<p>I don&#8217;t think I need to explain how valuable it is to have functional ports on a laptop. Needing to carrying around a bunch of dongles for ports that should already be <em>on the device</em> just seems silly.</p> + +<p>The X220 comes equipped with:</p> + +<ul> +<li>3 USB ports (one of those being USB3 on the i7 model)</li> +<li>DisplayPort</li> +<li>VGA</li> +<li>Ethernet</li> +<li>SD Card Reader</li> +<li>3.5mm Jack</li> +<li>Ultrabay (SATA)</li> +<li>Wi-Fi hardware kill-switch</li> +</ul> + +<p>Incredibly versatile and ready for anything I throw at it!</p> + +<h2 id="keyboard">Keyboard</h2> + +<p>The classic ThinkPad keyboards are simply that: classic. I don&#8217;t think anyone could argue against these keyboards being the golden standard for laptops. It&#8217;s commendable how Lenovo managed to package so much functionality into such a small amount of real estate. Most modern laptops lack helpful keys such as <code>Print Screen</code>, <code>Home</code>, <code>End</code>, and <code>Scroll Lock</code>.</p> + +<p>They&#8217;re also an absolute <em>joy</em> to type on. The fact that so many people go out of their way to mod X230 ThinkPad models with X220 keyboards should tell you something&#8230; Why Lenovo moved away from these keyboards will always baffle me. (I know <em>why</em> they did it - I just think it&#8217;s stupid).</p> + +<p>Did I mention these classic keyboards come with the extremely useful Trackpoint as well?</p> + +<h2 id="battery-life">Battery Life</h2> + +<blockquote> +<p><strong>Author&#8217;s Note:</strong> This section is very subjective. The age, quality, and size of the X220&#8217;s battery can have a massive impact on benchmarks. I should also mention that I run very lightweight operating systems and use DWM as opposed to a heavier desktop environment. Just something to keep in mind.</p> +</blockquote> + +<p>The battery life on my own X220 is fantastic. I have a brand-new 9-cell that lasts for roughly 5-6 hours of daily work. Obviously these numbers don&#8217;t come close to the incredible battery life of Apple&#8217;s M1&#47;M2 chip devices, but it&#8217;s still quite competitive against other &#8220;newer&#8221; laptops on the market.</p> + +<p>Although, even if the uptime was lower than 5-6 hours, you have the ability to carry extra batteries with you. The beauty of swapping out your laptop&#8217;s battery without needing to <em>open up</em> the device itself is fantastic. Others might whine about the annoyance of carrying an extra battery in their travel bag, but doing so is completely <em>optional</em>. A core part of what makes the X220 so wonderful is user control and choice. The X220&#8217;s battery is another great example of that.</p> + +<h2 id="repairability">Repairability</h2> + +<p>The ability to completely disassemble and replace almost everything on the X220 has to be one of its biggest advantages over newer laptops. No glue to rip apart. No special proprietary tools required. Just some screws and plastic snaps. If someone as monkey-brained as me can completely strip down this laptop and put it back together again without issue, then the hardware designers have done something right!</p> + +<p>Best of all, Lenovo provides a very detailed <a href="https://download.lenovo.com/pccbbs/mobiles_pdf/0a60739_01.pdf">hardware maintenance manual</a> to help guide you through the entire process.</p> + +<p>My disassembled X220 when I was reapplying the CPU thermal paste:</p> + +<p><img src="/public/images/x220-pieces.jpeg" alt="My disassembled X220 laptop" /></p> + +<h2 id="bonus-round-price">Bonus Round: Price</h2> + +<p>I didn&#8217;t list this in my initial section &#8220;breakdown&#8221; but it&#8217;s something to consider. I purchased my X220 off eBay for $175 Canadian. While this machine came with a HDD instead of an SSD and only 8GB of total memory, that was still an incredible deal. I simply swapped out the hard-drive with an SSD I had on hand, along with upgrading the DDR3 memory to its max of 16.</p> + +<p>Even if you needed to buy those components separately you would be hard-pressed to find such a good deal for a decent machine. Not to mention you would be helping to prevent more e-waste!</p> + +<h2 id="what-more-can-i-say">What More Can I Say?</h2> + +<p>Obviously the title and tone of this article is all in good fun. Try not to take things so seriously! But, I still <em>personally</em> believe the X220 is one of, if not <em>the</em> best laptop in the world.</p></description> + <link>https://btxx.org/x220</link> + <guid isPermaLink="false">https://btxx.org/x220</guid> + <pubDate>Tue, 26 Sep 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Bypassing the WiFi Hardware Switch on the Lenovo X201</title> + <description><h1 id="bypassing-the-wifi-hardware-switch-on-the-lenovo-x201">Bypassing the WiFi Hardware Switch on the Lenovo X201</h1> + +<p>2023-04-02</p> + +<p>I recently received a ThinkPad X201 to start using as my daily driver. I purchased the X201 to replace my existing X260. Although some might look at this as a &#8220;downgrade&#8221; in terms of specs and hardware, I would have to disagree. </p> + +<p>The X201 is an absolute masterpiece in laptop hardware design and only faulted by some of the constraints set by the motherboard, namely the lack to support more than 8GB of RAM. Other than that, I think it&#8217;s perfect. Well&#8230;<em>almost</em> perfect. There is one small annoyance:</p> + +<p><strong>The physical WiFi kill switch</strong>.</p> + +<p>This thing can become really flaky on these older devices and countless people on the web report connection issues across multiple operating systems. I too ran into this issue not long after getting Alpine setup nicely on my machine.</p> + +<p>Some remedies include re-installing hardware drivers, flicking the hardware toggle off and on repeatedly, or even simply logging out of the current user session. All these options seemed like a pain in the ass.</p> + +<p>So I listed out my possible options:</p> + +<ol> +<li>Whitelist my BIOS WiFi settings (requires flashing BIOS) and install a newer wifi card, hoping the problem fixes itself</li> +<li>Purchase a replacement WiFi card (maybe mine was just buggy??)</li> +<li>Block PIN20 on the existing Wifi card</li> +<li>Somehow disconnect the hardware killswitch (requires soldering which I have ZERO experience with)</li> +</ol> + +<p>Out of pure laziness, I chose option <strong>three</strong>. In case you were unaware, PIN20 on older PCIE WLAN cards is the &#8220;wifi disable&#8221; and used as an RF killswitch. By &#8220;blocking&#8221; this PIN, we stop the system from being able to disable the WiFi connection. Losing the ability to disable WiFi on the hardware level didn&#8217;t bother me much, so I moved forward with this easier approach.</p> + +<h2 id="opening-up-the-x201">Opening Up the X201</h2> + +<p>To access the WiFi card, you&#8217;ll need to remove the keyboard and touchpad palm rest cover. It might sound daunting for newcomers but I assure you it is very simple. These machines were built during a time when Lenovo <em>expected</em> their users to tinker with their devices and built them with modular components in mind. Yet another reason for my decision to swap this laptop for my more &#8220;locked down&#8221; X260.</p> + +<blockquote> +<p>Note: I&#8217;m not sure how important this is, but I made sure to set my WiFi hardware toggle switch into the &#8220;ON&#8221; position before doing any of the other steps.</p> +</blockquote> + +<p>You can follow the very beautiful visual instructions provided by Lenovo below. Just remember to always power off you machine and remove the battery before tinkering.</p> + +<p><img src="/public/images/x201-1.png" alt="Unscrew the main keyboard and touchpad screws on the back of the laptop" /></p> + +<p><img src="/public/images/x201-2.png" alt="Gently push the keyboard towards the screen to remove" /></p> + +<p><img src="/public/images/x201-3.png" alt="The keyboard cable is very fragile, remove it carefully" /></p> + +<p><img src="/public/images/x201-4.png" alt="Slide the palm rest down and away from the laptop to remove safely" /></p> + +<p><img src="/public/images/x201-5.png" alt="Remove the two screws on the WiFi card to access it" /></p> + +<h2 id="electrical-tape-fixes-everything">Electrical Tape Fixes Everything</h2> + +<p>Now that the WiFi card has been safely removed from its port (you most likely do not need to disconnect the cables though!) it is time to block PIN20.</p> + +<p>On the Centrino Advanced-N 6200 card PIN20 is located on the back side, since the front is designated to all odd-set pins. You&#8217;ll need to cut a ridiculously thin piece of electrical tape to cover this <em>single</em> pin. I found this part to be the most taxing of my patience during the entire process. Just keep thinking happy thoughts and you can do it!</p> + +<p><img src="/public/images/x201-tape.jpg" alt="My hacky electrical tape job on PIN20" /></p> + +<p>Once it is on PIN20, place your card back into its port, rebuild you X201, pop in your battery and boot up! If things were done properly, your WiFi should now be rock solid.</p> + +<p>Best of all, you don&#8217;t have to worry about accidentally toggling your WiFi toggle switch - it does nothing! Mine is actually set in the &#8220;OFF&#8221; position all the time now.</p> + +<p>Enjoy less flaky WiFi.</p></description> + <link>https://btxx.org/x201</link> + <guid isPermaLink="false">https://btxx.org/x201</guid> + <pubDate>Sun, 02 Apr 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>WP Enqueue for Beginners</title> + <description><h1 id="wp-enqueue-for-beginners">WP Enqueue for Beginners</h1> + +<p>2020-05-05</p> + +<p>Throughout my career designing, developing and auditing WordPress themes, I&#8217;ve come across many that include their custom styles &#47; scripts as static HTML elements inside their respective <code>header</code> and <code>footer</code> templates. This is perfectly <em>fine</em>, but there is a cleaner way to include these files.</p> + +<p>This post is purposefully catered for WordPress beginners, so if this seems overly simple, then you&#8217;re probably already developing WordPress themes that utilize these techniques. (Which is awesome!)</p> + +<h2 id="introducing-wp-enqueue">Introducing WP Enqueue</h2> + +<p>The description of Wp Enqueue from the WordPress documentation:</p> + +<p>In a nutshell: Placing a <code>wp_enqueue_script</code> or <code>wp_enqueue_style</code> script in the <code>functions.php</code> of your custom theme tells WordPress to pull external files into the header or footer of your website. Best practice being: <em>styles into the header, scripts into the footer</em>.</p> + +<p>I suggest you read the official documentation for more details: <a href="https://developer.wordpress.org/reference/functions/wp_enqueue_script/">wp_enqueue_script</a> and <a href="https://developer.wordpress.org/reference/functions/wp_enqueue_style/">wp_enqueue_style</a>.</p> + +<h2 id="enqueue-stylesheets">Enqueue Stylesheets</h2> + +<p>The default script to enqueue a CSS stylesheet:</p> + +<pre><code>wp_enqueue_style( $handle, $src, $deps, $ver, $media ); +</code></pre> + +<ul> +<li><code>$handle</code> - the name associated with your stylesheet</li> +<li><code>$src</code> - URL pointing to the directory of the stylesheet itself</li> +<li><code>$deps</code> - An array of any other stylesheets needed as dependencies</li> +<li><code>$ver</code> - The version number of the stylesheet (used for cache busting)</li> +<li><code>$media</code> - Specify media type (<code>all</code>, <code>print</code>, <code>screen</code>, etc.)</li> +</ul> + +<p>So, with all those parameters in mind, here is what a standard default enqueue of a CSS stylesheet looks like:</p> + +<pre><code>wp_enqueue_style( &#39;google-fonts&#39;, &#39;https:&#47;&#47;fonts.googleapis.com&#47;css?family=Montserrat:200,300,300i,400,600,700,800,900&#39;, &#39;&#39;, &#39;1.0&#39;, &#39;&#39;); +</code></pre> + +<p>In this example we have rendered the following:</p> + +<ul> +<li><code>$handle</code>: google-fonts</li> +<li><code>$src</code>: <a href="https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800-">https:&#47;&#47;fonts.googleapis.com&#47;css?family=Montserrat:200,300,300i,400,600,700,800-</a> 0</li> +<li><code>$deps</code>: Null (left blank)</li> +<li><code>$ver</code>: 1.0</li> +<li><code>$media</code>: Null (left blank)</li> +</ul> + +<p><strong>Important:</strong> Keep in mind that the <code>wp_enqueue_style</code> script will render the stylesheet link into the WordPress header automatically.</p> + +<h2 id="enqueue-scripts">Enqueue Scripts</h2> + +<p>The default script to enqueue an external JS file:</p> + +<pre><code>wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); +</code></pre> + +<ul> +<li><code>$handle</code> - the name associated with your script</li> +<li><code>$src</code> - URL pointing to the directory of the script itself</li> +<li><code>$deps</code> - An array of any other scripts needed as dependencies</li> +<li><code>$ver</code> - The version number of the script (used for cache busting)</li> +<li><code>$in_footer</code> - Set whether the script is loaded in the <code>&#60;head&#62;</code> or just before the <code>&#60;&#47;body&#62;</code></li> +</ul> + +<p>With all those parameters in mind, here is what a standard default enqueue of a Javascript file looks like:</p> + +<pre><code>wp_enqueue_script( &#39;bxslider&#39;, get_template_directory_uri() . &#39;&#47;js&#47;bxslider.js&#39;, array(&#39;jquery&#39;), &#39;1.0.0&#39;, true ); +</code></pre> + +<p>In this example we have rendered the following:</p> + +<ul> +<li><code>$handle</code>: bxslider</li> +<li><code>$src</code>: get_template_directory_uri() . &#47;js&#47;bxslider.js&#8217;</li> +<li><code>$deps</code>: array(jquery&#8217;)</li> +<li><code>$ver</code>: 1.0.0</li> +<li><code>$in_footer</code>: True (<em>places script before closing body tag</em>)</li> +</ul> + +<h2 id="packaging-everything-together">Packaging Everything Together</h2> + +<p>Now that we have the custom stylesheet and script ready to be loaded into our custom WordPress theme, we just need to properly package them together as a function in our <code>functions.php</code> file:</p> + +<pre><code>&#47;&#47; Add styles and scripts to the header&#47;footer +function custom_enqueue_scripts() { + wp_enqueue_style( &#39;google-fonts&#39;, &#39;https:&#47;&#47;fonts.googleapis.com&#47;css?family=Montserrat:200,300,300i,400,600,700,800,900&#39;); + wp_enqueue_script( &#39;bxslider&#39;, get_template_directory_uri() . &#39;&#47;js&#47;bxslider.js&#39;, array(&#39;jquery&#39;), &#39;1.0.0&#39;, true ); +} + +add_action( &#39;wp_enqueue_scripts&#39;, &#39;custom_enqueue_scripts&#39;); +</code></pre> + +<p>That&#8217;s it! Hopefully this helps prevent WordPress newbies from statically rendering their external CSS and JS files directly in template files. Let WordPress do that for you!</p></description> + <link>https://btxx.org/wp-enqueue-for-beginners</link> + <guid isPermaLink="false">https://btxx.org/wp-enqueue-for-beginners</guid> + <pubDate>Tue, 05 May 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Setting Up Jekyll on Windows
</title> + <description><h1 id="setting-up-jekyll-on-windows">Setting Up Jekyll on Windows</h1> + +<p>2022-09-02</p> + +<p>I&#8217;ve recently been playing around with using Windows 10 as my daily operating system. So far, it has been going fairly well. Nothing will probably ever feel as &#8220;optimized&#8221; as running a Linux-based system but it works well for my current needs. Getting a Jekyll development environment setup was a different story though&#8230;</p> + +<p>One of the first issues with using Windows 10 is the need to run a few of my open source projects that are built off Jekyll locally. This process initially seemed a like complex process to get things running smoothly but in the end was very straightforward. The main issue came from needing to bounce around through a handful of separate tutorials to get everything running smoothly.</p> + +<p>So, I thought I would make this quick write-up to help those in the same situation (or even for my future self the need arises). Let&#8217;s get into it.</p> + +<h2 id="wsl">WSL</h2> + +<p>The first step involves installing <a href="https://docs.microsoft.com/en-us/windows/wsl/install">WSL</a> in order to run Linux alongside the main Windows OS. The documentation is well written and will get you up-and-running in no time. For quick reference, it essentially comes down to:</p> + +<ol> +<li>Opening PowerShell or Command Prompt as an administrator</li> +<li>Installing via the command: <code>wsl --install</code></li> +<li>Restarting your machine after the install completes</li> +<li>Creating your UNIX username and password</li> +</ol> + +<h2 id="installing-ruby-dependencies">Installing Ruby &#38; Dependencies</h2> + +<p>Once logged into your UNIX terminal session (with your created user) you can begin installing everything we need for Jekyll to work properly. The first step is to installing <code>rvm</code> and the <a href="https://github.com/rvm/ubuntu_rvm">official project documentation</a> does a very good job of walking you through this.</p> + +<ul> +<li><p>Be sure dependencies as installed: <code>sudo apt-get install software-properties-common</code></p></li> +<li><p>Add the PPA and install the package:</p> + +<p>sudo apt-add-repository -y ppa:rael-gc&#47;rvm +sudo apt-get update +sudo apt-get install rvm</p></li> +<li><p>Add your existing user to the <code>rvm</code> group: <code>sudo usermod -a -G rvm $USER</code></p></li> +</ul> + +<p>You will need to close and restart your session to your Ubuntu system for these changes to take. After that, we can use <code>rvm</code> to install the latest version (at this time of writing) of ruby:</p> + +<pre><code>rvm install 3.1.2 +</code></pre> + +<p>That&#8217;s it!</p> + +<h2 id="jekyll---finally">Jekyll - Finally!</h2> + +<p>The final step is to update our gems and install Jekyll:</p> + +<pre><code>gem update +gem install jekyll bundler +</code></pre> + +<p>Once complete you can now run your Jekyll projects locally through WSL! Nothing ground-breaking but still pretty helpful for first-time users. And best of all, at least I have a good reference point in the future if I ever run into this issue again!</p></description> + <link>https://btxx.org/windows</link> + <guid isPermaLink="false">https://btxx.org/windows</guid> + <pubDate>Fri, 02 Sep 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Width or Flex-Basis?</title> + <description><h1 id="width-or-flex-basis">Width or Flex-Basis?</h1> + +<p>2018-11-28</p> + +<p>Creating rows and columns of elements that adapt dynamically can be a little tricky depending on the desired outcome. Let&#8217;s breakdown how to solve this issue using both <code>inline-block</code> paired with <code>width</code> and <code>flex-basis</code>.</p> + +<h2 id="width">Width</h2> + +<p>Setting the width of the inner children to a divisible value and setting their display to <code>inline-block</code>, we are able to create self-wrapping elements:</p> + +<pre><code>.width-container { + display: block; +} +.width-container__item { + display: inline-block; + width: calc(33% - 3px); &#47;* Fix for wonky inline-block margins *&#47; +} +</code></pre> + +<h3 id="pros">Pros</h3> + +<ul> +<li>Full browser support (as far back as IE6)</li> +<li>No floats needed</li> +</ul> + +<h3 id="cons">Cons</h3> + +<ul> +<li>Buggy <code>margin</code> workaround needed</li> +<li>Wrapped elements cannot dynamically fill remaining empty parent space</li> +</ul> + +<h2 id="flex-basis">Flex-basis</h2> + +<p>This is my personal preference for dynamically wrapping inner children elements. Simply set the parent as <code>display: flex</code>, allow flex-wrapping and then set the <code>flex-basis</code> of the children to any percentage value.</p> + +<pre><code>.flex-container { + display: flex; + flex-wrap: wrap; +} +.flex-container__item { + flex: 1 1 auto; + flex-basis: 33%; +} +</code></pre> + +<p>You will also notice the <code>flex</code> property set to <code>1 1 auto</code>. This is important if you require your wrapped elements to fill the remaining space of the parent container.</p> + +<h3 id="pros-1">Pros</h3> + +<ul> +<li>No buggy margins to play with</li> +<li>Dynamically renders children to fill parent container if <code>flex</code> is set</li> +<li>Scales well across screen &#47; device sizes</li> +</ul> + +<h3 id="cons-1">Cons</h3> + +<ul> +<li>Some versions of IE struggle with browser support</li> +</ul> + +<h2 id="codepen-demo">CodePen Demo</h2> + +<p>Feel free to play around with a slightly more stylized version of both options below:</p> + +<p>CodePen Demo: Width or flex-basis</p></description> + <link>https://btxx.org/width-vs-flex-basis</link> + <guid isPermaLink="false">https://btxx.org/width-vs-flex-basis</guid> + <pubDate>Wed, 28 Nov 2018 00:00:00 +0000</pubDate> + </item> + <item> + <title>Stop Using Custom Web Fonts</title> + <description><h1 id="stop-using-custom-web-fonts">Stop Using Custom Web Fonts</h1> + +<p>2023-03-14</p> + +<p>I recently read an excellent post by Manu Moreale titled <a href="https://manuelmoreale.com/a-rant-on-web-font-licenses">A rant on web font licenses</a>. I highly recommend you give it a read (it&#8217;s relatively short) since Manu makes a solid argument against existing font licenses. After reading, I found myself thinking about it throughout the rest of the day.</p> + +<p>I was trying to understand how we ended up in a situation where web&#47;UI designers (myself included) have started to <em>insist</em> on using proprietary, custom web fonts. Do any users actively benefit from custom web fonts? Are there any <em>useful</em> and <em>measurable</em> goals achieved by including them? Do end-users actually <em>care</em> about a website&#8217;s typeface?</p> + +<p>For the most part, I believe the answer to all those questions is: <strong>not really</strong>.</p> + +<h2 id="system-fonts-look-good">System Fonts Look Good</h2> + +<p>We are no longer in the early days of the internet. Browsers have matured. Operating systems already ship with usable and often times pretty typefaces. The &#8220;wow factor&#8221; of having a custom web font on a website is completely gone. Not to mention, recent trends see designers including <em>terrible</em> typefaces that actually make things more difficult to read and break basic accessibility.</p> + +<p>All of this for the sake of a company&#8217;s &#8220;brand&#8221;. I say: <strong>fuck your brand</strong>. Your end-users should always trump your design &#8220;guidelines&#8221;. Period.</p> + +<h2 id="think-of-the-consistency">&#8220;Think of the Consistency!&#8221;</h2> + +<p>Often times designers will argue that designs will look too different across browsers&#47;operating systems. I&#8217;m not sure why this is seen as a bad thing. First, users will be familiar with the fonts already available to them. Second, as designers our work should never rely on one point of failure (in this instance: fonts). Your designs should be agnostic of your typeface selection. </p> + +<p>And what about users with browser extensions that already block your custom web fonts? Screw them I guess?</p> + +<p>People work on different systems with different constraints and settings. Embrace that - don&#8217;t try to override it.</p> + +<h2 id="loss-of-personality">Loss of Personality</h2> + +<p>The web is not the same medium as graphic design. Digital designers often get this confused. Web applications serve an action or purpose. The user wants to complete a <em>task</em> - not look at a pretty poster. I understand this sounds harsh, but many designers design more for their own ego and portfolio rather than the end-user. That extra <em>flair</em> on your lowercase &#8220;t&#8221; doesn&#8217;t help the user better interact with your features or UI. It just slows them down.</p> + +<h2 id="hurting-performance-wasting-resources">Hurting Performance &#38; Wasting Resources</h2> + +<p>A lot of designers I&#8217;ve worked with or talked to in the past tend to be big supporters of reducing their carbon footprint and minimizing their individual output of &#8220;waste&#8221;. What I always find interesting is how that never seems to translate into their work.</p> + +<p>It might be small in the grand scheme of things, but having an extra HTTP request (or more) for your custom fonts and requiring your users to consume more bandwidth on their end is not &#8220;eco&#8221;. As designers we should cut the fat and reduce software bloat in the small areas that we&#8217;re able to: the front end.</p> + +<p>My hope is that even one designer reading this decides to rollout a web app or marketing page without dumping a bunch of custom fonts on their users. It&#8217;s just the <em>nice</em> thing to do.</p></description> + <link>https://btxx.org/webfonts</link> + <guid isPermaLink="false">https://btxx.org/webfonts</guid> + <pubDate>Tue, 14 Mar 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Running VSCode in Chromium on OpenBSD</title> + <description><h1 id="running-vscode-in-chromium-on-openbsd">Running VSCode in Chromium on OpenBSD</h1> + +<p>2023-06-05</p> + +<p>VSCode and its many variations are not available on OpenBSD. This doesn&#8217;t cause issue with many OpenBSD users, but those making the jump from Linux might miss access to such a popular editor. Lucky for us, there is a <em>hacky</em> workaround to solve this problem.</p> + +<h2 id="vscode-in-the-browser">VSCode in the Browser</h2> + +<p>I tried my best to build something like <code>code-server</code> locally and run that directly in my browser - but I failed miserably. Instead, I fell back on <a href="https://vscode.dev">vscode.dev</a> which is essentially a remote version of <code>code-server</code>.</p> + +<p>Getting things to work seamlessly proved a little more challenging. I found the best performance was running everything through Chromium with special parameters enabled on launch.</p> + +<blockquote> +<p><strong>Note:</strong> The following assumes you have already installed <code>chromium</code></p> +</blockquote> + +<p>First we need to disable <a href="https://man.openbsd.org/unveil.2">unveil</a> for Chromium. This will allow us to access our system files through <a href="https://vscode.dev">vscode.dev</a> using the &#8220;Open folder&#8230;&#8221; or &#8220;Open file&#8230;&#8221; commands without issue:</p> + +<pre><code>chrome --disable-unveil +</code></pre> + +<p>Everything should work pretty solid right out the box now - except it doesn&#8217;t. Syntax highlighting does not work without enabling WASM&#47;WebAssembly. Your experience might be different, but I had to include the following when launching Chromium from the terminal:</p> + +<pre><code>ENABLE_WASM=1 chrome --enable-wasm +</code></pre> + +<p>Success! We can avoid typing out these complex commands everytime we want to launch our editor by setting up an <code>alias</code> (in my case via <code>.zshrc</code>):</p> + +<pre><code>alias vscode="ENABLE_WASM=1 chrome --enable-wasm --disable-unveil" +</code></pre> + +<p>That&#8217;s it! Now I can just pop open VSCode on OpenBSD by simply running <code>vscode</code> in my terminal. Hopefully this can help others slowly transition over to OpenBSD - which you should do because it is amazing!</p></description> + <link>https://btxx.org/vscode</link> + <guid isPermaLink="false">https://btxx.org/vscode</guid> + <pubDate>Mon, 05 Jun 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Using User-Select</title> + <description><h1 id="using-user-select">Using User-Select</h1> + +<p>2019-06-04</p> + +<p>Highlighting text in order to copy, cut or paste content is a staple action across the web. Now, what if I told you the ability to control what a user can select is configurable with a single CSS property?</p> + +<h2 id="introducing-the-css-property">Introducing the CSS property</h2> + +<p>Simply put, the <code>user-select</code> property is defined as follows:</p> + +<blockquote> +<p><code>user-select</code> controls whether the user can select text (cursor or otherwise)</p> +</blockquote> + +<h2 id="the-css">The CSS</h2> + +<p>The property&#8217;s available attributes are very straightforward (just remember to target specific browsers for full support!)</p> + +<pre><code>&#47;* Default *&#47; +p.default { + user-select: auto; + -moz-user-select: auto; + -webkit-user-select: auto; +} + +&#47;* Disable the user from selecting text *&#47; +p.no-select { + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; +} + +&#47;* Select all text when user clicks *&#47; +p.select-all { + user-select: all; + -moz-user-select: all; + -webkit-user-select: all; +} +</code></pre> + +<h2 id="lets-see-it-in-action">Let&#8217;s see it in action</h2> + +<p>Try selecting the separate paragraph elements in the CodePen below:</p> + +<p><a href="https://codepen.io/bradleytaunt/pen/QRooZp/">Live CodePen Example</a></p> + +<h2 id="browser-support">Browser Support</h2> + +<p>The great news is <code>user-select</code> is fully supported across all modern browsers (even as far back as IE10!)</p></description> + <link>https://btxx.org/user-select</link> + <guid isPermaLink="false">https://btxx.org/user-select</guid> + <pubDate>Tue, 04 Jun 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Icons Should be Complementary - Text is Always Better</title> + <description><h1 id="icons-should-be-complementary---text-is-always-better">Icons Should be Complementary - Text is Always Better</h1> + +<p>2021-12-17</p> + +<p>Designing[^1] software is a complex thing. A great deal of real-world testing and user feedback is needed to create the best solution to the problem you are trying to fix. Obvious requirements are to keep things simple, make it easy to understand by <em>looking</em> at it, and build it to be headache-resistant for future updates. All these things are easier said than done. This is the challenge of a designer&#8217;s dat-to-day.</p> + +<p>But with this term of &#8220;simplicity&#8221; modern designers tend to take this approach too much to heart. In my 12+ years involved in UI&#47;UX software design, I have lost count how many initial iterations of interfaces suffer from the same &#8220;dumbing down&#8221; decision making:</p> + +<p><strong>Using icons to represent an action or function without textual information</strong>.</p> + +<p>If you decide to stop reading the rest of this article, at least take away this one important thing:</p> + +<blockquote> +<p><em>Always try to use text to convey your designs</em></p> +</blockquote> + +<p>After achieving this, you should start reiterating those designs to include iconography. Even then, not all UI instances will require you to do that. Designers will find this process difficult, which is why it is important to get <em>right</em>.</p> + +<h2 id="icons-make-an-ass-out-of-u-and-me">Icons make an <em>ass</em> out of <em>u</em> and <em>me</em></h2> + +<p>Icons make general assumptions about what the user may or may not understand. Leading with this in your designs will end <em>poorly for you</em>. Trust me - I&#8217;ve learned this through failed designs many times over. A certain visualization might be common knowledge to you, while differing greatly to someone else with a different set of experiences.</p> + +<p>I&#8217;ve found the only thing you should ever <em>assume</em> is that the user knows nothing. Please note - I&#8217;m not referring to their intelligence but instead their software literacy.</p> + +<p>Take a look at our now &#8220;famous&#8221; save icon used in almost every piece of software; the floppy disk. Do any software users below the legal drinking age even understand the initial reasoning for using this icon? In all honesty, it was a terrible icon decision even when first introduced. No &#8220;hard copy&#8221; of the save action is taking place, software creates this save in a digital space[^2]. Yet, it was adopted and people (ie. designers) went along with it.</p> + +<p><strong>Quality is not measured by mass appeal.</strong></p> + +<p>The argument could be made &#8220;People learned to associate &#8220;Save&#8221; with a Floppy Disk icon&#8230;&#8221; and my response would be &#8220;But what alternatives were they given?&#8221;</p> + +<p>Original software designers (and developers) held all the power in early UI decision making. General users didn&#8217;t <em>know</em> any better. Things were new and fresh. Now our response is to shrug our collective shoulders and say, &#8220;That&#8217;s how the save icon has to be now!&#8221;</p> + +<p>Hogwash. Make it a button that says, <code>Save File</code>. I&#8217;m not kidding. Oh, it doesn&#8217;t work with your current design? Then your initial design wasn&#8217;t future-proof then, was it? I sound snarky here but many designers put up imaginary walls around their design systems, making them incredibly rigid and difficult to adapt.</p> + +<p>Take the time to do even a small thought &#47; wireframe experiment: redo the layout and flow of your application without using a single piece of iconography. If you can&#8217;t achieve this with even limited success, something is wrong with the design.</p> + +<h2 id="the-hamburger-menu-is-the-7th-circle-of-hell">The hamburger menu is the 7th circle of Hell</h2> + +<p>Normally, the inclusion of a hamburger menu is indicative of an overly complex application. Too many cooks and all that jazz. Enterprise applications don&#8217;t get a pass here either, as they tend to be the worst culprits of pouring out everything on to the user as software vomit. Sweeping all this interaction under the hamburger &#8220;rug&#8221; does not make for a cleaner design.</p> + +<p>New features are great, but stop dumping so much of it behind hidden, unintuitive sub-navigation. This design is such a &#8220;quick fix&#8221; and plagues far too many software apps[^3]. Both desktop computers and mobile devices allow users to <em>scroll</em>, let them.</p> + +<p>I&#8217;ve discussed this in further detail here: <a href="https://bt.ht/hamburger-menu-alternative/">Using Hamburger Menus? Try Sausage Links</a></p> + +<h2 id="but-what-of-the-advanced-users">But what of the &#8220;advanced&#8221; users?</h2> + +<p>I understand applications will have advanced or &#8220;pro&#8221; users that have full knowledge of the product and wouldn&#8217;t need things <em>spoon fed</em> to them. This is a more difficult problem that I myself haven&#8217;t been able to solve without approaching each one on a case-by-case basis. Unfortunately, there is no &#8220;one size fits all&#8221; method to this. But, although solving for advanced users proves difficult doesn&#8217;t mean we should dismiss the merits of avoiding icons as a crutch.</p> + +<h2 id="try-for-yourself">Try for yourself</h2> + +<p>As I stated above, try doing a quick design experiment by replacing all your existing iconography in your application with simple text. I assure you that at least you&#8217;ll discover interesting design flaws in your system.</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>By &#8220;design&#8221; I&#8217;m referring to visuals not programming or system engineering</li> +<li>Early software programs did save to an external floppy disk. My point stands that many digital file storage applications copied this iconography blindly.</li> +<li>Not to mention how rampant it is on plain ol&#8217; regular websites. If you&#8217;re hiding five menu items behind a hamburger menu for &#8220;mobile users&#8221;, you&#8217;re doing it wrong.</li> +</ol></description> + <link>https://btxx.org/use-text-not-icons</link> + <guid isPermaLink="false">https://btxx.org/use-text-not-icons</guid> + <pubDate>Fri, 17 Dec 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>They Won't Wait: A Warning for Slow Websites</title> + <description><h1 id="they-wont-wait-a-warning-for-slow-websites">They Won&#8217;t Wait: A Warning for Slow Websites</h1> + +<p>2019-06-25</p> + +<p><em>Your website is probably slow</em>. I&#8217;m not trying to make you feel bad or dismiss all the hard work you&#8217;ve put into your project. Heck, performance might have been a core value of the design. But websites can always be faster.</p> + +<p>People have become increasingly more impatient over the last decade when it comes to technology, specifically non-native web-based interactions. Users expect your website to load almost instantly or they will leave and try another site, probably one of your competitors. Why should they stick around if your competitors&#8217; websites load half a second faster?</p> + +<p>Users are tired of being bombarded with tracking scripts, having to download massive component libraries, forced to deal with &#8220;accept cookies&#8221; prompts, playing a small mini-game of &#8220;close those ads!&#8221;, and then being subjected to never-ending loading screens. This is not the internet we were promised.</p> + +<blockquote> +<p>It&#8217;s in my nature, I always liked <strong>speed</strong>.</p> + +<p>- Guy Lafleur</p> +</blockquote> + +<h2 id="we-can-do-better">We can do better</h2> + +<p>If there is only one thing that you learn from this post, hopefully it&#8217;s knowing to better value the <strong>time and money of your users</strong>. It&#8217;s a user&#8217;s <em>choice</em> to visit your website, so taking advantage of their time is extremely careless. Don&#8217;t be arrogant and ignore the cost of data on most mobile plans either. Eating up a chunk of someone&#8217;s data just for hitting your website is rage-inducing. That&#8217;s how you can lose customers permanently.</p> + +<p>Let&#8217;s do an analogy, because <strong>I love stupid analogies</strong>:</p> + +<p>Imagine going to your local hardware store because you need to buy a new hammer. Once you get to the entrance a woman holds the the door closed and asks you if it&#8217;s alright for someone to follow you around the store today. You say no. She then follows up by asking if you accept their hardware store agreement before proceeding inside - you tell her &#8220;sure&#8221;. She finally opens the door and lets you in. As you walk into the store she quickly stuffs a few advertisements for other local businesses into you hand. &#8220;Thanks&#8221;, you mutter.</p> + +<p>Once inside you realize the hardware store is <em>very big</em> and manually looking for a hammer might take a while. You walk up to the front desk to ask where you can find a hammer but notice the cashier is playing with their phone behind the counter. You try to get their attention but they simply raise their hand and shout &#8220;Be with you in a minute&#8221;. After a short while they get off their phone and <em>finally</em> listen to your question. They then tell you where to find the hammers.</p> + +<p>Does this sound like a <em>fast</em> and easy experience?</p> + +<p>As silly as this hypothetical trip to the hardware store might be, it&#8217;s exactly what many current websites are putting their users through. Users - read <em>customers</em> - are coming to your website with a specific goal in mind; checking out a product, consuming information or just satisfying their curiosity. Stop putting so many blockers and excessive bloat in front of them.</p> + +<h2 id="data-doesnt-lie">Data doesn&#8217;t lie</h2> + +<p>If my terrible analogy wasn&#8217;t enough to convince you to implement better performance on your website, then maybe some &#8220;BIG DATA&#8221; will.</p> + +<ul> +<li><a href="https://web.archive.org/web/20081117195303if_/http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt">Amazon (PowerPoint, slide #15)</a>: 100 ms of latency resulted in 1% less sales.</li> +<li><a href="https://youtu.be/6x0cAzQ7PVs?t=936">Google (video)</a>: 500 ms caused a 20% drop in traffic.</li> +<li><a href="https://www.slideshare.net/devonauerswald/walmart-pagespeedslide">Walmart (slide #46)</a>: a 100 ms improvement brought up to 1% incremental revenue</li> +<li><a href="https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/">Mozilla</a>: Shaving 2.2 seconds off page load time increased downloads by 15.4%</li> +<li><a href="https://www.slideshare.net/stubbornella/designing-fast-websites-presentation/23-1_Create_a_component_library">Yahoo</a>: 400 ms resulted in a 5 to 9% drop in traffic</li> +</ul> + +<p>All data taken from <a href="https://instant.page">instant.page</a> (which I am a huge fan of &hearts;)</p> + +<p>The fact something as small as 100 ms can have such a profound impact on your bottom-line should be eye-opening. You&#8217;re leaving money of the table by not tackling even the low-hanging, easy performance wins. You need to start valuing your users&#8217; time and stop serving them excessive garbage they never asked for.</p> + +<h2 id="small-and-easy-wins">Small and easy wins</h2> + +<p>Not all of these suggestions can work for every project (due to restrictions, brand guidelines, required marketing targets, etc.) but for most developers&#47;designers they should be easy to implement: (in no particular order of importance)</p> + +<ul> +<li>Reduce the number of web requests + +<ul> +<li><a href="https://developers.google.com/web/fundamentals/performance/get-started/httprequests-5">HTTP Requests</a></li> +</ul></li> +<li>Use web-safe fonts when available or if using custom fonts utilize the <code>font-display</code> property + +<ul> +<li><a href="https://www.cssfontstack.com/">CSS Font Stack</a></li> +<li><a href="https://css-tricks.com/font-display-masses/">Font Display for the Masses</a></li> +</ul></li> +<li>Make proper use of <em>critical CSS</em> + +<ul> +<li><a href="https://alexwright.net/web-design-secrets/how-to-use-critical-css/">How to Use Critical CSS</a></li> +<li>Automatically generate CSS based on &#8220;above the fold&#8221;: <a href="https://github.com/filamentgroup/criticalCSS">criticalCSS</a></li> +</ul></li> +<li>Process all media (images &#47; videos) through 3rd party tools + +<ul> +<li><a href="https://cloudinary.com/">Cloudinary</a></li> +<li><a href="https://kraken.io/">Kraken.io</a></li> +<li><a href="https://piio.co/">Piio</a></li> +<li>Sidenote: this blog uses the <a href="https://nhoizey.github.io/jekyll-cloudinary/">jekyll-cloudinary</a> plugin to automatically process images</li> +</ul></li> +<li>Use &#8220;just-in-time&#8221; preloading (highly recommended for improved UX) + +<ul> +<li><a href="https://instant.page/">Instant Page</a></li> +</ul></li> +<li>Avoid using heavy tech-stacks whenever possible + +<ul> +<li>Unless it is a critical use-case, users should not have to process or download extra resources</li> +<li>This also includes remove ads, pop-ups, 3rd party sign-up prompts, cookie notifications, over-the-top element animations, and all other <strong>garbage</strong>. This impacts <em>UX</em> performance, which is just as crucial as website loading speed</li> +</ul></li> +</ul> + +<h2 id="no-need-to-be-extreme">No need to be extreme</h2> + +<p>These quick &#8220;guidelines&#8221; are just a solid jumping-off point when tackling new projects or re-working current websites. There isn&#8217;t some agreed upon <em>golden standard</em> when it comes to web performance, but I find these rules work as a great place to start. Hopefully it can help others as well.</p></description> + <link>https://btxx.org/they-wont-wait</link> + <guid isPermaLink="false">https://btxx.org/they-wont-wait</guid> + <pubDate>Tue, 25 Jun 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Text Align: Justify</title> + <description><h1 id="text-align-justify">Text Align: Justify</h1> + +<p>2019-05-22</p> + +<p>The text-align property is fairly well known in the world of CSS, even among those just starting out with the language. Values such as <code>center</code>, <code>left</code> and <code>right</code> are used often with this property, but a more forgotten option is <code>justify</code>.</p> + +<h2 id="what-does-justify-do">What does justify do?</h2> + +<p>The MDN web docs define the <code>justify</code> value for <code>text-align</code> as such:</p> + +<h3 id="see-it-in-action">See it in action</h3> + +<p><a href="https://codepen.io/bradleytaunt/pen/vwpmNz/">Live CodePen Example</a></p> + +<h2 id="when-should-i-use-this">When should I use this?</h2> + +<p>It isn&#8217;t always appropriate to use <code>justify</code> in most instances, although it becomes very useful for long form articles or blog posts. Since it takes a heavy influence from original <em>print</em> book layouts, the <code>justify</code> value helps improve readability for larger chunks of content.</p> + +<p><strong>Fair warning</strong>: it is best to remove any <code>justify</code> values when targeting smaller screen sizes. Mobile devices and&#47;or tablets tend to be small enough to break up the content already. This CSS value is better suited for larger viewports.</p> + +<h2 id="browser-support">Browser support</h2> + +<p>The good news is that all major browsers support the <code>justify</code> value for the <code>text-align</code> CSS property. So have some worry-free fun with it!</p></description> + <link>https://btxx.org/text-align-justify</link> + <guid isPermaLink="false">https://btxx.org/text-align-justify</guid> + <pubDate>Wed, 22 May 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>The Wonders of Text Ellipsis</title> + <description><h1 id="the-wonders-of-text-ellipsis">The Wonders of Text Ellipsis</h1> + +<p>2016-11-15</p> + +<p>A common issue when working with constrained UI elements is text overflowing outside of it&#8217;s parent or breaking into addition lines (thus breaking the layout).</p> + +<p>This is most commonly seen with the direct and placeholder values for input fields on form elements. For example, the following input placeholder will be cutoff from the user&#8217;s view:</p> + +<p><a href="https://codepen.io/bradleytaunt/pen/OgpzyY/">CodePen live example</a></p> + +<p>Luckily, 3 simple CSS parameters can fix this.</p> + +<pre><code>input::placeholder { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +</code></pre> + +<p>This allows the user to understand there is more content cut out from their current view. It&#8217;s not ideal to ever have content overflowing outside of the parent container, but if you need to the best workaround is to use text-overflow.</p></description> + <link>https://btxx.org/te</link> + <guid isPermaLink="false">https://btxx.org/te</guid> + <pubDate>Tue, 15 Nov 2016 00:00:00 +0000</pubDate> + </item> + <item> + <title>Making Tables Responsive With Minimal CSS</title> + <description><h1 id="making-tables-responsive-with-minimal-css">Making Tables Responsive With Minimal CSS</h1> + +<p>2019-06-11</p> + +<hr/> + +<p>I find that the need to create responsive table layouts pops up far more often than most developers would expect. The gut reaction might to be implement some sort of custom grid-system or pull in a pre-built library. Don&#8217;t do this - just use tables and some simple CSS.</p> + +<p>My recent article, <a href="/html-like-1999">Write HTML Like It&#8217;s 1999</a>, received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how <code>table</code> elements don&#8217;t play nice with mobile devices or that it&#8217;s not possible to have a useable layout on smaller screens. <em>This simply isn&#8217;t true</em>.</p> + +<p>Included below are two separate demos showing how to optimize <code>table</code> HTML for mobile devices using only a minimal amount of CSS. These implementations may not be perfect, but they are far superior to injecting a bunch of custom <code>div</code> elements to <em>look</em> like tables.</p> + +<h2 id="demo-1-just-let-them-scroll">Demo 1: Just let them scroll</h2> + +<p>Okay I will admit, this implementation isn&#8217;t the <em>greatest</em> but I find it does work well with huge datasets. Simply set a <code>min-width</code> on your parent <code>table</code> element and the browser will just require the user to scroll the contents horizontally.</p> + +<pre><code>table { + min-width: 800px; &#47;* Set your desired min-width here *&#47; +} +</code></pre> + +<p>Check out the CodePen below to see it in action:</p> + +<p><a href="https://codepen.io/bradleytaunt/pen/ewObbW/">Live CodePen Example</a></p> + +<p>I actually prefer this method because of its simplicity and function. Users on mobile are familiar with scrolling since it is one of the most basic actions required. Seeing a &#8220;cut-off&#8221; table gives them an instant visual cue that they have the ability to scroll the content.</p> + +<h2 id="demo-2-more-flexible-than-you-think">Demo 2: More flexible than you think</h2> + +<p>Using something like <code>flexbox</code> tends to work better when you are working with smaller table datasets. All you need to do is add some minor <code>flexbox</code> layout at your targeted mobile screen size.</p> + +<pre><code>&#47;* Using 800px as mobile screen in this example *&#47; +@media(max-width: 800px) { + &#47;* Hide the table headings *&#47; + table thead { + left: -9999px; + position: absolute; + visibility: hidden; + } + table tr { + border-bottom: 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-bottom: 40px; + } + table td { + border: 1px solid; + margin: 0 -1px -1px 0; &#47;* Removes double-borders *&#47; + width: 50%; + } +} +</code></pre> + +<p><a href="https://codepen.io/bradleytaunt/pen/mZbvOb/">Check out the CodePen demo</a></p> + +<p>There are some caveats with this approach:</p> + +<ol> +<li>We currently hide the <code>thead</code> row when in mobile view (only visually - screen readers can still scan it)</li> +<li>Some more custom work might be needed depending on how many items per <code>flexbox</code> row makes sense (based on project and dataset)</li> +</ol> + +<p>You could keep the table headings and style them the same as the <code>tbody</code> contents, but I find hiding them a little cleaner. That choice is entirely up to your personal preference. You can also decide to add heading <code>span</code> elements inside the main <code>tbody</code> elements like so:</p> + +<pre><code>&#47;* Default span styling - hidden on desktop *&#47; +table td span { + background: #eee; + color: dimgrey; + display: none; + font-size: 10px; + font-weight: bold; + padding: 5px; + position: absolute; + text-transform: uppercase; + top: 0; + left: 0; +} + +&#47;* Simple CSS for flexbox table on mobile *&#47; +@media(max-width: 800px) { + table thead { + left: -9999px; + position: absolute; + visibility: hidden; + } + table tr { + border-bottom: 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-bottom: 40px; + } + table td { + border: 1px solid; + margin: 0 -1px -1px 0; + padding-top: 35px; &#47;* additional padding to avoid heading overlap *&#47; + position: relative; + width: 50%; + } + &#47;* Show the heading span *&#47; + table td span { + display: block; + } +} +</code></pre> + +<p><a href="https://codepen.io/bradleytaunt/pen/mZdzmZ/">Live CodePen Example</a></p> + +<p><strong>Updated</strong>: As pointed out by user <a href="https://news.ycombinator.com/user?id=mmoez">mmoez</a>, it is far less repetitive to use <code>:nth-child</code> pseudo selectors to implement the heading fields on mobile (as outlined in this <a href="https://css-tricks.com/responsive-data-tables/">CSS-Tricks article</a>).</p> + +<h2 id="why-should-i-care-to-use-elements">Why should I care to use <code>table</code> elements?</h2> + +<p>Simply put: <strong>accessibility</strong> and <strong>proper semantics</strong>.</p> + +<p>Why use a screwdriver when you need a hammer? Sure, you can make that screwdriver look and <em>almost</em> work the same as a hammer, but for what purpose? Just use the damn hammer1.</p> + +<p>Have fun making your tables responsive!</p> + +<p>1 I know, this is a terrible analogy&#8230;</p></description> + <link>https://btxx.org/tables</link> + <guid isPermaLink="false">https://btxx.org/tables</guid> + <pubDate>Tue, 11 Jun 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Tabbed Content Without JavaScript</title> + <description><h1 id="tabbed-content-without-javascript">Tabbed Content Without JavaScript</h1> + +<p>2019-01-28</p> + +<p>Creating tabs is a fairly trivial and common practice in web design, but many times it requires JavaScript to properly implement. Fortunately it <em>is</em> possible to create tabbed content with only using CSS.</p> + +<p><img src="/public/images/tabbed-content.png" alt="Tabbed elements with only CSS" /></p> + +<p><a href="https://codepen.io/bradleytaunt/pen/abjmayw">Live CodePen Example</a></p> + +<hr/> + +<h2 id="the-html">The HTML</h2> + +<p>The skeleton for this component is fairly basic - we just need the following structure:</p> + +<ol> +<li><p>Parent element for each tab item</p></li> +<li><p>Default radio input</p></li> +<li><p>Label linked to corresponding input</p></li> +<li><p>Inner content associated with each tab item</p></li> +</ol> + +<p>Full HTML for reference:</p> + +<pre><code>&#60;div class="tabs"&#62; + + &#60;div class="tab-item"&#62; + &#60;input class="tab-input" type="radio" name="tabs" id="tab-1"&#62; + &#60;label class="tab-label" for="tab-1"&#62;Tab 1&#60;&#47;label&#62; + &#60;div class="tab-content"&#62;Content goes here&#60;&#47;div&#62; + &#60;&#47;div&#62; + + &#60;div class="tab-item"&#62; + &#60;input class="tab-input" type="radio" name="tabs" id="tab-2"&#62; + &#60;label class="tab-label" for="tab-2"&#62;Tab 2&#60;&#47;label&#62; + &#60;div class="tab-content"&#62;Content goes here&#60;&#47;div&#62; + &#60;&#47;div&#62; + + &#60;div class="tab-item"&#62; + &#60;input class="tab-input" type="radio" name="tabs" id="tab-3"&#62; + &#60;label class="tab-label" for="tab-3"&#62;Tab 3&#60;&#47;label&#62; + &#60;div class="tab-content"&#62;Content goes here&#60;&#47;div&#62; + &#60;&#47;div&#62; + +&#60;&#47;div&#62; +</code></pre> + +<h2 id="the-css">The CSS</h2> + +<p>First, we need to set each <code>input</code>, <code>label</code> and inner content into their own parent containers:</p> + +<pre><code>&#47;* Main parent that holds all contents *&#47; +.tabs { + height: 100%; + min-height: 250px; + position: relative; +} + +&#47;* Each tab items (includes heading &#38; content) *&#47; +.tab-item { + display: inline; +} +</code></pre> + +<p>Next, we will hide the default <code>radio</code> input and design our labels to resemble a basic web tab element. The <code>z-index</code> property on the label is important for how we will be stacking our content on the z-axis (labels above inner content for example).</p> + +<pre><code>&#47;* Hide the default radio inputs *&#47; +.tab-input { + position: absolute; + visibility: hidden; +} + +&#47;* The main tab headings *&#47; +.tab-label { + background: white; + box-shadow: inset 0 -4px 4px rgba(0,0,0,0.02); + color: lightgrey; + cursor: pointer; + display: inline-block; + font-weight: 600; + margin: 0 5px 0 0; + padding: 10px 20px; + position: relative; + text-align: center; + z-index: 0; +} +</code></pre> + +<p>The main inner content of each tab needs to have an <code>absolute</code> position set as it&#8217;s default, since the one currently selected will switch to <code>relative</code> on mobile (more on that in a moment):</p> + +<pre><code>&#47;* The inner tab content *&#47; +.tab-content { + background: white; + bottom: 0; + box-shadow: 0 6px 8px rgba(0,0,0,0.02); + left: 0; + overflow: scroll; + padding: 20px; + position: absolute; + right: 0; + top: 50px; + z-index: 0; +} +</code></pre> + +<p>The final step is just telling the browser to style both the <code>label</code> and inner content of the currently selected radio <code>input</code>:</p> + +<pre><code>&#47;* Style the currently selected tab label *&#47; +.tab-input:checked + .tab-label { + border: 1px solid #eee; + border-bottom: 0; + box-shadow: 0 -6px 8px rgba(0,0,0,0.02); + color: #268bd2; + z-index: 2; +} + +&#47;* Show the currently selected tab content *&#47; +.tab-input:checked ~ .tab-content { + border: 1px solid #eee; + z-index: 1; +} +</code></pre> + +<p>It&#8217;s as simple as that! For reference, here is the entire CSS file for easier access:</p> + +<pre><code>&#47;* Main parent that holds all contents *&#47; +.tabs { + height: 100%; + min-height: 250px; + position: relative; +} + +&#47;* Each tab items (includes heading &#38; content) *&#47; +.tab-item { + display: inline; +} + +&#47;* Hide the default radio inputs *&#47; +.tab-input { + position: absolute; + visibility: hidden; +} + +&#47;* The main tab headings *&#47; +.tab-label { + background: white; + box-shadow: inset 0 -4px 4px rgba(0,0,0,0.02); + color: lightgrey; + cursor: pointer; + display: inline-block; + font-weight: 600; + margin: 0 5px 0 0; + padding: 10px 20px; + position: relative; + text-align: center; + z-index: 0; +} + +&#47;* The inner tab content *&#47; +.tab-content { + background: white; + bottom: 0; + box-shadow: 0 6px 8px rgba(0,0,0,0.02); + left: 0; + overflow: scroll; + padding: 20px; + position: absolute; + right: 0; + top: 50px; + z-index: 0; +} + +&#47;* Style the currently selected tab label *&#47; +.tab-input:checked + .tab-label { + border: 1px solid #eee; + border-bottom: 0; + box-shadow: 0 -6px 8px rgba(0,0,0,0.02); + color: #268bd2; + z-index: 2; +} + +&#47;* Show the currently selected tab content *&#47; +.tab-input:checked ~ .tab-content { + border: 1px solid #eee; + z-index: 1; +} +</code></pre> + +<h2 id="dont-forget-about-mobile">Don&#8217;t forget about mobile</h2> + +<p>With only a few extra lines of CSS we can ensure that our custom tabs will stack on top of each other and look solid on mobile devices:</p> + +<pre><code>@media(max-width:38em) { + .tab-label { + display: block; + width: 100%; + } + .tab-content { + display: none; + } + .tab-input:checked ~ .tab-content { + bottom: auto; + display: block; + position: relative; + top: auto; + } +} +</code></pre> + +<h2 id="one-minor-caveat">One minor caveat</h2> + +<p>Even though I&#8217;m a pretty big fan of implementing tabs this way, there is a small drawback:</p> + +<p>The <code>height</code> of the inner content doesn&#8217;t grow dynamically since it defaults as <code>absolute</code>, so a <code>min-height</code> or <code>height</code> value is required on the parent element. This could become a problem in certain situations where you don&#8217;t have the luxury of setting a static height.</p> + +<p>Other than that, enjoy building some JavaScript-free tabs!</p></description> + <link>https://btxx.org/tabbed-content</link> + <guid isPermaLink="false">https://btxx.org/tabbed-content</guid> + <pubDate>Mon, 28 Jan 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Super Mario Blocks in CSS</title> + <description><h1 id="super-mario-blocks-in-css">Super Mario Blocks in CSS</h1> + +<p>2019-02-15</p> + +<p>Just because we can, let&#8217;s make a quick demo on how to build interactive elements based off the original Mario punch blocks.</p> + +<p>What our final product will look like:</p> + +<p><img src="/public/images/mario-block.png" alt="Mario blocks cretaed with CSS" /></p> + +<p><a href="https://codepen.io/bradleytaunt/pen/JjEPOVe">Live CodePen Example</a></p> + +<h2 id="the-html">The HTML</h2> + +<p>The set of Mario blocks doesn&#8217;t require a huge amount of effort for it&#8217;s <code>html</code> structure, we only need:</p> + +<ul> +<li>Parent div for each block</li> +<li>Checkbox input</li> +<li>Checkbox label</li> +<li>Inner label divs to represent the block &#8220;dots&#8221;</li> +</ul> + +<p><strong>Sidenote</strong>: This is only how <em>I</em> chose to add the inner dots to the Mario blocks. There are many other ways to create these, so please feel free to implement them however you see fit.</p> + +<pre><code>&#60;!-- Main parent block --&#62; +&#60;div class="mario-block"&#62; + + &#60;!-- Checkbox input (disabled by default) --&#62; + &#60;input type="checkbox" id="1" disabled&#62; + + &#60;!-- Checkbox label --&#62; + &#60;label for="1"&#62; + &#60;!-- Inner dots for blocks --&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;&#47;label&#62; + +&#60;&#47;div&#62; +</code></pre> + +<p>Now we just add as many default blocks we want, along with the interactive punch block (<code>.mario-block--question</code>):</p> + +<pre><code>&#60;div class="mario-block"&#62; + &#60;input type="checkbox" id="1" disabled&#62; + &#60;label for="1"&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;&#47;label&#62; +&#60;&#47;div&#62; + +&#60;div class="mario-block"&#62; + &#60;input type="checkbox" id="2" disabled&#62; + &#60;label for="2"&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;&#47;label&#62; +&#60;&#47;div&#62; + +&#60;div class="mario-block mario-block--question"&#62; + &#60;input type="checkbox" id="3"&#62; + &#60;label for="3"&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="question-mark"&#62;&#60;&#47;div&#62; + &#60;&#47;label&#62; +&#60;&#47;div&#62; + +&#60;div class="mario-block"&#62; + &#60;input type="checkbox" id="4" disabled&#62; + &#60;label for="4"&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;div class="dot"&#62;&#60;&#47;div&#62; + &#60;&#47;label&#62; +&#60;&#47;div&#62; +</code></pre> + +<h2 id="the-css">The CSS</h2> + +<p>First we need to remove the default <code>checkbox</code> input styling and place all new styling on it&#8217;s corresponding <code>label</code>.</p> + +<pre><code>&#47;* Mario block parent div *&#47; +.mario-block { + display: inline-block; + height: 80px; + margin-right: -7px; &#47;* Fixes inline-block margin bug *&#47; + position: relative; + width: 80px; +} + +&#47;* Hide default checkbox input *&#47; +.mario-block input { + position: absolute; + visibility: hidden; + z-index: -1; +} +</code></pre> + +<p>Now to target the <code>label</code> elements found inside the block:</p> + +<pre><code>&#47;* Style checkbox label accordingly *&#47; +.mario-block label { + background: #F88D2E; + border: 4px solid #070000; + box-shadow: inset -4px -4px 0 #965117, inset 4px 4px 0 #FAB89B; + display: block; + height: 100%; + position: relative; + width: 100%; +} +</code></pre> + +<p>Next we style our included <code>.dots</code> elements to be placed in the four corners of each block:</p> + +<pre><code>.mario-block .dot { + background: #070000; + height: 5px; + position: absolute; + width: 5px; +} +.mario-block .dot:nth-child(1) { + left: 4px; + top: 4px; +} +.mario-block .dot:nth-child(2) { + right: 4px; + top: 4px; +} +.mario-block .dot:nth-child(3) { + bottom: 4px; + left: 4px; +} +.mario-block .dot:nth-child(4) { + bottom: 4px; + right: 4px; +} +</code></pre> + +<h3 id="punch-able-block">Punch-able block</h3> + +<p>Now we need to include the &#8220;question mark&#8221; SVG and custom CSS for the interactive Mario block. You can download a copy of the custom <code>svg</code> question mark I created.</p> + +<pre><code>.mario-block--question label { + cursor: pointer; +} +.mario-block--question .question-mark { + background-image: url(&#39;&#47;public&#47;images&#47;mario-block-question-mark.svg&#39;); + background-position: center; + background-repeat: no-repeat; + background-size: 40px; + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: 1; +} +</code></pre> + +<h3 id="the-last-piece">The last piece</h3> + +<p>The last item we need to design is the <code>checked</code> state of the interactive question mark block. The extra inner dark dashes will be added as <code>pseudo</code> elements:</p> + +<pre><code>&#47;* Mario block in `checked` state *&#47; +.mario-block input:checked + label { + background: #885818; + box-shadow: inset -4px -4px 0 #68400B, inset 4px 4px 0 #FAB89B; +} + +&#47;* Hide both the default dots and question mark svg on checked *&#47; +.mario-block input:checked + label .dot, +.mario-block input:checked + label .question-mark { + display: none; +} + +&#47;* Shared pseudo element styling *&#47; +.mario-block input:checked + label:before, +.mario-block input:checked + label:after { + content: &#39;&#39;; + height: 20px; + position: absolute; + transform: rotate(45deg); + width: 20px; +} + +&#47;* Right dash *&#47; +.mario-block input:checked + label:before { + border-right: 4px solid #070000; + right: 18px; + top: 15px; + transform: rotate(45deg); +} + +&#47;* Left dash *&#47; +.mario-block input:checked + label:after { + border-left: 4px solid #070000; + left: 18px; + top: 15px; + transform: rotate(-45deg); +} +</code></pre> + +<p>That&#8217;s it!</p> + +<h2 id="taking-it-further">Taking it further</h2> + +<p>As always, you can take this concept and flesh it out even further. I was trying to mimic the &#8220;pixel&#8221; style of the original Mario games, but you could make the lighting and depth more realistic with some extra subtle gradients or <code>filter</code> properties.</p></description> + <link>https://btxx.org/super-mario-blocks-css</link> + <guid isPermaLink="false">https://btxx.org/super-mario-blocks-css</guid> + <pubDate>Fri, 15 Feb 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>I Want to Suckless and You Can Too</title> + <description><h1 id="i-want-to-suckless-and-you-can-too">I Want to Suckless and You Can Too</h1> + +<p>2022-12-23</p> + +<h2 id="the-desire-to-suckless">The Desire to Suckless</h2> + +<p>While I have been happy with my <a href="/alpine">previous desktop setup</a> using Wayland on Alpine Linux, I just couldn&#8217;t shake the urge to fully embrace the <a href="https://suckless.org">suckless ecosystem</a>. Although, this meant ditching Wayland and returning to X11, which is apparently the new &#8220;cool thing to hate&#8221; in Linux land. At least, that&#8217;s what I&#8217;ve seen online lately.</p> + +<p>But I&#8217;m getting ahead of myself&#8230;</p> + +<h2 id="what-is-suckless">What is Suckless?</h2> + +<p>I&#8217;m not going to spend too much time repeating what you can <a href="https://suckless.org/philosophy/">already read on the suckless.org website itself</a>, but in a nutshell:</p> + +<blockquote> +<p>Software with a focus on simplicity, clarity, and frugality.</p> +</blockquote> + +<p>The developers also pride themselves on catering to <em>advanced and experienced computer users</em>, which is actually a refreshing take in my opinion. There are enough pre-existing open source solutions for non-technical or average Linux users looking for a desktop system. Having an option that requires users to deep-dive into the code, compile the programs manually, and better understand the software they are running is a welcome addition.</p> + +<p>This process of &#8220;owing your software&#8221; was one of the core concepts that initially grabbed my attention. I&#8217;ve always been mildly mediocre at reading and writing C (ie. enough to be dangerous), so the thought of jumping head first into a system that would require me to better learn that language was tempting[^1]. And that temptation was enough to give it a shot!</p> + +<h2 id="lets-get-started">Let&#8217;s Get Started</h2> + +<p>So I made my decision. I would (at the very least) <em>try</em> switching my daily driver over to a completely &#8220;suckless&#8221; system. But I was immediately faced with my first obstacle: <em>which distro should I use</em>?</p> + +<p>I&#8217;m sure many would suggest Gentoo, since it follows the principles of suckless more than any other distribution on the market. But I don&#8217;t hate myself enough to go down that insane rabbit-hole. I&#8217;m hardly advanced enough to take on such a steep challenge, not to mention my plan was to build out a &#8220;setup script&#8221; so others could roll their own suckless build. Something like that looked daunting under Gentoo. Maybe in the future&#8230;</p> + +<p>So what&#8217;s left? Void? Arch? Something fresh, like Metis? I really didn&#8217;t know the &#8220;best&#8221; choice. Maybe there were just <em>too many</em> options? </p> + +<p>Luckily, I did know of a distro that was my go-to for most projects&#8230;</p> + +<h2 id="trying-alpine">Trying Alpine</h2> + +<p>Alpine Linux is one of the best distributions available. If you disagree, you clearly haven&#8217;t achieved galaxy-brain levels of intelligence and I feel sorry for you[^2].</p> + +<p>Having just rolled my own <a href="https://git.sr.ht/~bt/alpine-linux-setup">installer script</a> for Wayland&#47;Sway on Alpine, I figured why not piggyback off that existing project? Work smart not hard, right? So I started putting together an absolute <em>bare minimum</em> list of requirements I needed to get a proper desktop system running:</p> + +<ul> +<li>working suspend&#47;awake</li> +<li>working audio</li> +<li>working wifi&#47;networking</li> +<li>reduced screen tearing (X11 gave me problems in the past with this)</li> +</ul> + +<p>As you can see, I have very low expectations. But there were issues&#8230;.</p> + +<ol> +<li>I could not build my blog locally (built via Jekyll) since the <code>sass-embedded</code> dependencies has not been built against musl-libc.</li> +<li>VSCodium would require the extra &#8220;bloat&#8221; of the flatpak manager (not to mention the spotty support some applications have through flatpak&#47;snap).</li> +<li>The distro&#47;system <em>feels</em> like it was better designed with Wayland in mind. Too often I felt like I was losing an uphill battle wrestling against Alpine.</li> +</ol> + +<h2 id="getting-sucked-into-the-void">Getting Sucked into the Void</h2> + +<p>After mentioning my struggles on Mastodon, some <a href="https://fosstodon.org/@tdarb/109554576434981872">helpful friends suggested taking a look at Void</a>. I always knew of the project but never used it as a &#8220;daily driver&#8221;. Since this was overall one <em>large</em> experiment, I figured I&#8217;d give it a shot.</p> + +<p>I&#8217;m glad I did. Void Linux is <em>pretty great</em>.</p> + +<p>The installer seemed more complex than Alpine at first, but I found an excellent walkthrough <a href="https://linuxiac.com/void-linux-installation/">here</a> (which I was more beginner-friendly than the official docs). Once everything was set, it was time to run my suckless &#8220;installer&#8221;.</p> + +<h2 id="introducing-void-suck">Introducing void-suck</h2> + +<p>If you don&#8217;t care about the nitty-gritty details, feel free to just jump over to the <a href="https://git.sr.ht/~bt/void-suck">void-suck repo on scourehut</a> and read through the code yourself. There is nothing groundbreaking here. A huge inspiration came from <a href="https://github.com/mad-ara/void-rice">mad-ara&#8217;s &#8220;void-rice&#8221; project on Github</a> - so a big thanks to him for making that project in the first place!</p> + +<p>You can find the basic instructions in the README of the project itself, but it pulls in just the required dependencies along with my own custom suckless tools. You can easily swap out these with your own or simply default to the standard ones provided by <a href="https://suckless.org">suckless.org</a>.</p> + +<p>Everything <em>should</em> work out of the box, but in case it doesn&#8217;t please <a href="https://todo.sr.ht/~bt/void-suck">open a ticket</a> or <a href="https://lists.sr.ht/~bt/void-suck">submit a patch</a>. I&#8217;m certain I overlooked some items!</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>We&#8217;ll see how things go. So far I&#8217;m enjoying my time with a much simpler desktop and the &#8220;forced&#8221; push towards getting better with C is an added bonus. I still love Alpine, but Void is slowly winning me over&#8230;</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>I find this to be the best way to learn new things. Reading technical books are helpful, but concepts never stick with me unless I am forced to implement them.</li> +<li>This is a joke. Alpine is certainly not for everyone. There are many more &#8220;fully featured&#8221; distros available and everyone should use what they enjoy! Try not to take my blog posts so seriously&#8230;</li> +</ol></description> + <link>https://btxx.org/suckless</link> + <guid isPermaLink="false">https://btxx.org/suckless</guid> + <pubDate>Fri, 23 Dec 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Launching Sublime Text with dmenu on Alpine Linux</title> + <description><h1 id="launching-sublime-text-with-dmenu-on-alpine-linux">Launching Sublime Text with dmenu on Alpine Linux</h1> + +<p>2023-04-13</p> + +<p>Everyone seems to be running some version of VSCode as their main editor these days. But not me. I find VSCode to be too bloated for my needs - not to mention being built on top of electron instead of <em>native</em> code. I prefer running programs that don&#8217;t try to devour all of my machine&#8217;s available memory or spike my CPU.</p> + +<blockquote> +<p><strong>Note</strong>: It&#8217;s important to remember my personal machine is a ThinkPad X201 with only 6GB of RAM (plan to upgrade to 8GB soon!). Obviously your mileage may vary if you&#8217;re using a beefier laptop or desktop&#8230;</p> +</blockquote> + +<p>In case the title of this post didn&#8217;t make this obvious, my editor of choice is Sublime Text. It&#8217;s fast, has a robust plugin ecosystem, and a very friendly community of users. Because of its popularity, troubleshooting any issues you might encounter becomes much easier with the amount of information freely available online.</p> + +<p>The only minor downside is that it isn&#8217;t <em>fully</em> open source. Personally, I think it is well worth buying a license directly from the developers to support their efforts.</p> + +<p>If you haven&#8217;t played around with it yet, I highly recommend giving it a try. At the very least, I guarantee you&#8217;ll be impressed with the editor&#8217;s performance and speed! [&#60;#1&#62;]</p> + +<h2 id="one-small-problem">One Small Problem&#8230;</h2> + +<p>Sublime is precompiled against glibc and Alpine uses musl. This makes things a little difficult. Luckily we can get around this roadblock by falling back on flatpak (which is unfortunately still locked at version 3 for Sublime).</p> + +<p>You&#8217;ll need to install flatpak, give your current user permission to install flatpak apps, and then install Sublime.</p> + +<p>(The following snippets assume you are using <code>doas</code>. If you are using <code>sudo</code>, be sure to swap accordingly)</p> + +<pre><code>apk add flatpak +adduser &#60;YourUsername&#62; flatpak +flatpak remote-add --user --if-not-exists flathub https:&#47;&#47;flathub.org&#47;repo&#47;flathub.flatpakrepo +</code></pre> + +<p>Congrats. You now have setup <code>flatpak</code> on your machine! Next we install Sublime Text:</p> + +<pre><code>flatpak install flathub com.sublimetext.three +</code></pre> + +<p>You could stop now and simply open Sublime anytime by running the following command in your terminal:</p> + +<pre><code>flatpak run com.sublimetext.three +</code></pre> + +<p>This works perfectly fine but I find it a little cumbersome. I would much rather open my programs directly through dmenu. Let&#8217;s set that up.</p> + +<h2 id="creating-system-links">Creating System Links</h2> + +<pre><code>doas ln -s ~&#47;.local&#47;share&#47;flatpak&#47;exports&#47;bin&#47;com.sublimetext.three &#47;usr&#47;bin&#47;sublimetext +</code></pre> + +<p>Now that those directories are linked, simply open dmenu and start typing <code>sublimetext</code>. Done and done. No more terminal commands needed to open Sublime!</p> + +<hr/> + +<p>1. I am aware that using a terminal-based editor such as vim or emacs would be even <em>more</em> efficient. For my own personal use I find more classical &#8220;IDE&#8221; applications to work best for me. +</p></description> + <link>https://btxx.org/sublime</link> + <guid isPermaLink="false">https://btxx.org/sublime</guid> + <pubDate>Thu, 13 Apr 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Stripe Menu Dropdowns (CSS)</title> + <description><h1 id="stripe-menu-dropdowns-css">Stripe Menu Dropdowns (CSS)</h1> + +<p>2020-03-31</p> + +<p>In a previous article I wrote, <a href="blog/minimal-css-menu">Minimal CSS: Dropdown Menus</a>, I showed how you could create a basic menu dropdown with only 121 bytes of CSS. While this demo is great for simple text-based menu dropdowns, it doesn&#8217;t show just how complex (in a good way) you can make CSS-only menus. So, let&#8217;s do just that.</p> + +<h2 id="what-we-want-to-emulate">What we want to emulate</h2> + +<p>I think, like most designers, that the UI and web design work from the <a href="https://stripe.com/">Stripe</a> team is pretty fantastic. Their clean approach using subtle animations and minimal elements make for a pleasant experience. Unfortunately, there is one problem with their current dropdown menus on their main website:</p> + +<p>They don&#8217;t work if JavaScript is disabled.</p> + +<p>But we can easily fix that. So enough chit-chat, let&#8217;s rip-off their menu design and recreate it with only CSS!</p> + +<h3 id="original-stripe-website">Original (<a href="https://stripe.com">Stripe Website</a>)</h3> + +<h3 id="our-recreation-codepen-demo">Our recreation (<a href="https://codepen.io/bradleytaunt/full/ExjMjLL">CodePen Demo</a>)</h3> + +<p>Although our redesign is far from an exact replica (some subtle animations are missing which could always be added) - it&#8217;s still impressive what you can do with some bare-bones CSS. Just something to keep in mind the next time you decide to reach for a JavaScript library to implement a similar design.</p> + +<h2 id="see-it-live-in-action">See it live in action</h2> + +<p>Load in the CodePen below and play around with the menu dropdown. Feel free to re-use, break. share or steal this for any and all purposes. Enjoy!</p> + +<p><a href="https://codepen.io/bradleytaunt/pen/ExjMjLL">Live CodePen Example</a></p></description> + <link>https://btxx.org/stripe-menu-css</link> + <guid isPermaLink="false">https://btxx.org/stripe-menu-css</guid> + <pubDate>Tue, 31 Mar 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Yes, I Still Use jQuery</title> + <description><h1 id="yes-i-still-use-jquery">Yes, I Still Use jQuery</h1> + +<p>2019-04-15</p> + +<p>I have seen a handful of condescending comments from front-end developers since the newest build of jQuery (<a href="http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/">3.4.0</a>) released a couple of days ago. While I understand not all developers share the same work-style or are using the same tech-stack, dismissive comments towards any <em>useful</em> library comes off as entitled or elitist.</p> + +<ul> +<li>&#8220;Why would you use jQuery nowadays?&#8221; </li> +<li>&#8220;People are still developing this library?&#8221;</li> +<li>&#8220;Why use jQuery when you can use [insert latest trendy web tech here]&#8221;.</li> +</ul> + +<p><strong>I still use jQuery</strong>. Well, I may not use the library for all projects since every project is different - but I certainly don&#8217;t avoid using it solely because &#8220;its jQuery&#8221;. I&#8217;ve always believed in using the best tools for the job.</p> + +<h2 id="use-what-works-for-you">Use what works for you</h2> + +<p>If you produce better work in a shorter amount of time using one of the latest and greatest technologies (React, Vue.js, Angular, etc.) then you should absolutely do so. If another developer can be just as productive building their projects with jQuery, what does it matter in the grand scheme of things?</p> + +<p>My thought-process is this: a large percentage of web projects are done for clients not involved in the day-to-day happenings of the developer world. What they want is a solution to a particular problem. Clients don&#8217;t care how things are done behind the scenes - so long as it is done efficiently and <em>properly</em>.</p> + +<p>I tend to follow these principles when working on a project (with shared equal importance):</p> + +<ul> +<li>fast performance</li> +<li>accessible</li> +<li>simple UI</li> +<li>intuitive UX</li> +</ul> + +<p>As long as all of these items are accomplished, I don&#8217;t care if the project was a direct export from Microsoft Word straight to the web1. If it works great, then it works great.</p> + +<p>So use whatever tools make you a happier developer, as long as your projects don&#8217;t suffer because of them.</p> + +<p>1This would obviously be terrible for development, but its just an extreme example</p></description> + <link>https://btxx.org/still-using-jquery</link> + <guid isPermaLink="false">https://btxx.org/still-using-jquery</guid> + <pubDate>Mon, 15 Apr 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Stop Using Sticky Navigation on Mobile</title> + <description><h1 id="stop-using-sticky-navigation-on-mobile">Stop Using Sticky Navigation on Mobile</h1> + +<p>2019-10-06</p> + +<p>Stop styling your web elements to be &#8220;sticky&#8221; on mobile. This creates a horrible experience for your users and also looks like trash from a UI perspective. Don&#8217;t style your navigation (or any components for that matter) to be &#8220;sticky&#8221; on mobile. They create poor experiences for your users and take away valuable screen space.</p> + +<h2 id="what-do-you-mean-by-sticky">What do you mean by &#8220;sticky&#8221;?</h2> + +<p>The concept of <em>sticky</em> elements include but are not exclusive to:</p> + +<ul> +<li>Navigations that follow users as they scroll</li> +<li>Chatbot prompt bubbles eating up half the bottom of the screen</li> +<li>Banners or modal prompts that pester the user to &#8220;sign up, accept cookies&#8221; etc.</li> +</ul> + +<p><strong>These are bad and you should feel bad for implementing them.</strong> Spacing and layout is a critical part of a product’s design and greatly impacts the experience of its users. Stop screwing it up with ugly sticky elements.</p> + +<p>First, let&#8217;s breakdown &#8220;sticky&#8221; navigations and why they&#8217;re terrible. We&#8217;ll also go over some easy solutions to avoid making these bad design decisions in the first place.</p> + +<h2 id="the-stalking-navigation">The stalking navigation</h2> + +<p>When you make a decision to eat away <code>&#62;50px</code> of space at the top of the page for your site&#8217;s navigation - you&#8217;re hurting your users. You&#8217;re also making their time interacting with your website more painful.</p> + +<p>&#8220;Wait!&#8221; I hear sticky-nav defenders exclaim, &#8220;this navigation bar makes it so the user can <em>easily</em> interact with the site&#8217;s pages!&#8221;</p> + +<p><strong>What absolute rubbish.</strong> A user should only see a website&#8217;s navigation when they <em>need to use it</em>. This isn&#8217;t rocket science.</p> + +<p>Let&#8217;s a take a look at the problem:</p> + +<p>Knowing when to show navigation can be easily solved where the user isn&#8217;t bogged down with a chunk of their screen permanently taken away, all the while still having access to the navigation. This can be fixed by simply understanding the user context at a given time. See below:</p> + +<p>Here the navigation flows up with the rest of the page as the user scrolls the main content into view. Don&#8217;t worry about creating confusion - the user knows the navigation is still at the top of the page because they <em>watched it scroll out of view</em>. This is best paired by having a matching navigation in the footer of the page as well. That way, when the user makes it to the end of a specific view they can change pages right in the &#8220;footer&#8221;. No need to scroll back to the top.</p> + +<h2 id="the-best-of-both-worlds">The best of both worlds?</h2> + +<p>Maybe you want to hide the navigation without losing the flexibility of it always being accessible at the top of the page? This is possible, although I find it still <em>somewhat</em> intrusive on the user. An easy way achieve this is by displaying the navigation when users perform a specific action, such as:</p> + +<ul> +<li>Long or multiple upward swipes on the page</li> +<li>Pull down menu from top of current view (easily shown to user)</li> +</ul> + +<h2 id="navigations-arent-the-only-culprits">Navigations aren&#8217;t the only culprits</h2> + +<p>I wish that navigation items were the only sinners of the &#8220;sticky&#8221; position on mobile - but they are not alone. A few other problematic components include:</p> + +<ul> +<li>Chatbot or support &#8220;bubbles&#8221;</li> +<li>&#8220;Agree to our cookies&#8221; prompts</li> +<li>Time-based pop-up modals</li> +</ul> + +<p>Every time you implement one of these components, somewhere in the world a puppy dies. Seriously - don&#8217;t be part of the problem and build these things. Push back on &#8220;marketing research&#8221; or team leads who tell you that this crap works. You&#8217;re making the mobile web worse for everyone and setting a terrible precedent for future developers.</p> + +<p>Stay <em>static</em>, my friends!</p></description> + <link>https://btxx.org/sticky-elements</link> + <guid isPermaLink="false">https://btxx.org/sticky-elements</guid> + <pubDate>Sun, 06 Oct 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Stay Hungry</title> + <description><h1 id="stay-hungry">Stay Hungry</h1> + +<p>2018-02-12</p> + +<p>It can feel daunting in this developer &#47; designer landscape to keep yourself up-to-date with the latest and greatest technologies available. Which new framework should I invest the most time into? Will it even be maintained a couple years down the road? Is it just a fad?</p> + +<p>What about programming languages? Should I learn as many as possible or should I become an expert in one specialized area? <em>Should designers code?</em> The list of possible <em>new</em> things you could be learning continues to grow. +This is sarcasm. Please don&#8217;t take this seriously&#8230;</p> + +<h2 id="jumping-right-in">Jumping right in</h2> + +<p>Want my advice? Pick something and dive head first into it. Don&#8217;t worry if it&#8217;s not the most popular programming language or if it&#8217;s a new design system that isn&#8217;t gaining much traction. Do you find it interesting? Awesome - that&#8217;s what matters most. How can you teach yourself something new when you have <em>zero</em> interest in it?</p> + +<h2 id="less-talk-more-action">Less talk, more action</h2> + +<p>So what am I currently doing to keep my mind fresh and thinking outside of my comfort zone?</p> + +<ul> +<li>Teaching myself the R programming language</li> +<li>Deep diving into the <code>ggplot2</code> package</li> +<li>Developing my first side project website using <code>blogdown</code> and Hugo</li> +<li>Trying out Figma as my exclusive design program for the next few months</li> +</ul> + +<p>Programming your brain to learn something new can be frustrating and pull you out of your comfort zone. Don&#8217;t let this become stressful - instead use it as inspiration to push yourself through the struggle.</p> + +<p>There is no real reason to avoid learning something new outside your current circle of knowledge - only crappy excuses.</p> + +<p>Get on it.</p></description> + <link>https://btxx.org/stay-hungry</link> + <guid isPermaLink="false">https://btxx.org/stay-hungry</guid> + <pubDate>Mon, 12 Feb 2018 00:00:00 +0000</pubDate> + </item> + <item> + <title>Migrating from GitHub to sourcehut</title> + <description><h1 id="migrating-from-github-to-sourcehut">Migrating from GitHub to sourcehut</h1> + +<p>2022-11-14</p> + +<p>It has taken a little bit longer than I anticipated, but I have finally started to port over all my personal open-source projects to <a href="https://sourcehut.org">sourcehut.org</a>. I&#8217;ll get into the <em>why</em> and <em>how</em> momentarily, but first let&#8217;s take a look at all the impacted projects:</p> + +<h2 id="ported-projects">Ported Projects</h2> + +<ul> +<li><a href="https://vanillacss.com">Vanilla CSS</a></li> +<li><a href="https://1mb.club">1mb.club</a></li> +<li><a href="https://pblog.bt.ht">pblog</a></li> +<li><a href="https://shinobi.bt.ht">shinobi</a></li> +<li><a href="https://audit.bt.ht">Web Audit</a></li> +</ul> + +<h2 id="still-wip">Still WIP</h2> + +<ul> +<li><a href="https://1kb.club">1kb.club</a></li> +<li><a href="https://phpetite.org">phpetite.org</a></li> +</ul> + +<p><em>Some others are being worked on but have less &#8220;popularity&#8221;</em></p> + +<h2 id="why">Why?</h2> + +<p>GitHub has landed itself in some hot water with their <a href="https://githubcopilotlitigation.com/">recent lawsuit(s) surrounding their Copilot feature</a>. I was already on the fence about keeping GitHub as my main &#8220;code forge&#8221; after they were scooped up by Microsoft, who then killed off Atom and then started collecting telemetry data through VSCode. This seemed like a good excuse as any to finally leave the platform. The <em>straw</em>, if you will.</p> + +<p><em>&#62;&#62; Sourcehut has entered the chat &#60;&#60;</em></p> + +<p>We, as designers and developers, shouldn&#8217;t be supporting crap like this. I would much rather put my money where my mouth is and directly support a truly transparent alternative[^1]. Although I might only be paying for the <strong>Typical Hacker</strong> tier on <a href="https://sourcehut.org/pricing/">sourcehut</a>, I like to think that every little bit helps the platform. Even if you choose a different code forge, please consider donating to support independent alternatives!</p> + +<h2 id="git-email-jump-into-the-deep-end">Git Email? Jump into the Deep End</h2> + +<p>One aspect of sourcehut that initially scared me off was the lack of a proper &#8220;PR-flow&#8221;, web UI-based system[^2]. Instead, reporting bugs, creating tickets, and submitting PATCHES are generally done through regular, plain-text email.</p> + +<p>In the end, I&#8217;m glad I stuck it out. I&#8217;m still pretty slow with this new workflow (so please be patient with me if you submit a patch on a project!) but it actually seems cleaner. The phrase &#8220;streamlined&#8221; is what comes to mind.</p> + +<p>And really, if you think about it, at one point in time GitHub&#8217;s PR system would have been &#8220;new&#8221; for most users. Everything takes time to learn. This workflow is no different.</p> + +<p>Drew (creator of sourcehut) actually put together an extremely helpful guide on getting <a href="https://git-send-email.io/">setup with git send-email</a>. I still reference back to this if&#47;when I need to get up-and-running on a new machine. I highly recommend checking it out.</p> + +<h2 id="wrapping-up">Wrapping Up</h2> + +<p>That&#8217;s it really. I&#8217;m still in the process of moving over some projects, archiving original GitHub repos and becoming more adapted to the whole sourcehut &#8220;workflow&#8221;. I&#8217;m enjoying it and it feels good to pay for something that is not only useful but open source at its core.</p> + +<p>Will I be deleting my GitHub profile outright? Maybe. I&#8217;m not sure. For now the first step is removing any dependence I once had on that platform. Baby steps.</p> + +<p>For those interested, my sourcehut public profile is: <a href="https://sr.ht/~bt/">https:&#47;&#47;sr.ht&#47;~bt&#47;</a>. Maybe I&#8217;ll see you on the other side ;)</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>I keep an up-to-date document of all the open source software&#47;communities I pay for on <a href="/uses">my &#8220;Uses&#8221; page</a> for reference.</li> +<li>Put your pitchforks and torches away - I&#8217;m aware that a web-facing UI exists on sourcehut as well!</li> +</ol></description> + <link>https://btxx.org/srht2</link> + <guid isPermaLink="false">https://btxx.org/srht2</guid> + <pubDate>Mon, 14 Nov 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Never Do Spec Work for Free</title> + <description><h1 id="never-do-spec-work-for-free">Never Do Spec Work for Free</h1> + +<p>2022-11-07</p> + +<p>Your time is valuable and shouldn&#8217;t be taken for granted. Let me say that again for the people in the back: <em>your time is valuable and shouldn&#8217;t be taken for granted</em>. Time is the most precious commodity we have as human beings, so never waste that time on free &#8220;spec&#8221; work. It&#8217;s never worth it. Ever.</p> + +<p>I&#8217;ve had up-and-coming designers reach out to me multiple times and ask specifically about completing spec work or &#8220;challenges&#8221; presented by hiring staff. My first question is normally, &#8220;Are they paying you for it?&#8221;. If the answer is no, then I tell these individuals to move on. The company and the role is not worth their time.</p> + +<p>There are plenty of companies that respect the hiring process and will pay you for your time. Good on them. These are the places that you should be striving to work with&#47;for. Avoid those who don&#8217;t. If they don&#8217;t respect your time before they even consider hiring you, what makes you think they&#8217;ll respect it once you&#8217;re on the team?</p> + +<h2 id="never">Never?</h2> + +<p>Never. If a company or individual is considering you for a role, so much so that they are interested in seeing how you would work with them directly, <strong>they need to pay you</strong>. These companies (large or small) would <em>laugh</em> at the concept of doing something free for you. Why is their time respected but yours isn&#8217;t?</p> + +<h2 id="asking-for-free-spec-work-stop.">Asking for Free Spec Work? Stop.</h2> + +<p>If you&#8217;re implementing these practices at your place of business, then you&#8217;re part of the problem. Maybe you need a more robust candidate review process, so those interviewees you are willing to pay for &#8220;code challenges&#8221; or spec work are more finely tuned. Maybe you just need to re-evaluate how much you value the workers you&#8217;re looking to hire.</p> + +<p>The software world is a strange beast where we have adapted this &#8220;work for free before we <em>think</em> about paying you&#8221;. Imagine implementing this system for something like a plumber?</p> + +<p>&#8220;Hey, could you install this new sink for me - for <strong>free</strong>? Then, if I think you did a good job, I can start to pay you for other work around my house?&#8221;</p> + +<p>Good luck with that.</p> + +<h2 id="be-confident">Be Confident</h2> + +<p>This post is mostly targeted to new designers and developers, but can certainly still apply to those with years of experience under their belts. I&#8217;ve been guilty of doing free spec work years ago when I was first starting out (my grey hairs are showing&#8230;) and it <strong>never</strong> paid off. Literally and figuratively. Learn through my own mistakes and just walk away from people asking you to work for free.</p> + +<p>No matter what you think about your skill level or real-world experience, you need to have at least a bare-minimum standard for yourself: </p> + +<p><strong>Never work for free</strong> &#8211; Unless you <em>choose</em> to work for free on something like a personal or open source project. That is obviously a different situation!</p></description> + <link>https://btxx.org/spec</link> + <guid isPermaLink="false">https://btxx.org/spec</guid> + <pubDate>Mon, 07 Nov 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>SOMA Inspired Terminal Display with CSS</title> + <description><h1 id="soma-inspired-terminal-display-with-css">SOMA Inspired Terminal Display with CSS</h1> + +<p>2021-05-29</p> + +<p>A few years back I played (and loved) <a href="https://store.steampowered.com/app/282140/SOMA/">SOMA</a>, a first-person sci-fi horror-adventure game. The story was intriguing and the developers nailed the overall atmosphere of Pathos-II. Though both those aspects were great, what I found the most enjoyable were the interactive computers and displays found sprinkled throughout the world.</p> + +<p>Three years ago I wanted to see if I could recreate one of those terminal displays with HTML &#38; CSS. And I did just that.</p> + +<p>So, why am I writing about this <em>three years later</em>? Well, I never did a proper write-up explaining how I achieved it. I&#8217;m sure someone out there in the wild west of the web could get some value out of this tutorial, right? I hope so!</p> + +<h2 id="the-live-demo">The Live Demo</h2> + +<p><img src="/public/images/soma-terminal.png" alt="Terminal based off the SOMA computers" /></p> + +<p><a href="https://codepen.io/bradleytaunt/pen/ZEeLgmz">Live CodePen Example</a></p> + +<h2 id="the-html">The HTML</h2> + +<p>Nothing fancy going on here - just some simple <code>div</code> elements holding a few paragraphs and spans:</p> + +<pre><code>&#60;div class="outer-frame"&#62; + &#60;div class="screen"&#62; + &#60;div class="screen-guts"&#62; + &#60;h2&#62;Key Control&#60;&#47;h2&#62; + &#60;p&#62;&#60;span&#62;Panel Chip&#60;&#47;span&#62; (Connector)&#60;&#47;p&#62; + &#60;p class="column"&#62; + Security Keys: 023-027&#60;br&#62;C819738-23 + &#60;br&#62; + &#60;span class="error"&#62;Error: Key Expired&#60;&#47;span&#62; + &#60;br&#62; + &#60;em&#62;Please update...&#60;&#47;em&#62; + &#60;&#47;p&#62; + &#60;p&#62; + &#60;span&#62;Permission&#60;&#47;span&#62; + &#60;br&#62; + Standard ThetaCipher + &#60;br&#62; + &#60;span&#62;Secop-Jstrohweier&#60;&#47;span&#62; + &#60;&#47;p&#62; + &#60;button class="update-button"&#62;Update Chip&#60;&#47;button&#62; + &#60;&#47;div&#62; + &#60;div class="bottom-controls"&#62; + &#60;button class="back-button"&#62;Back 背部&#60;&#47;button&#62; + &#60;&#47;div&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<h2 id="the-css">The CSS</h2> + +<p>Let&#8217;s just dump all the CSS right here (don&#8217;t worry, it looks far more complicated than it really is):</p> + +<pre><code>@import url(&#39;https:&#47;&#47;opentype.netlify.com&#47;sansation&#47;index.css&#39;); + +* { + box-sizing: border-box; +} + +body { + background: #333; + font-family: "Sansation", sans-serif; + padding: 3rem 0; +} + +button { + appearance: none; + border: 0; + cursor: pointer; + font-family: "Inconsolata", "Consolas", mono; + font-size: 18px; + transition: 0.3s ease all; +} + +.outer-frame, +.screen { + display: block; + margin: 0 auto; + position: relative; +} + +.outer-frame { + background: #ccc url("https:&#47;&#47;preview.ibb.co&#47;iS9nz7&#47;screen_grunge.webp") no-repeat center; + background-size: cover; + border-radius: 5px; + box-shadow: 0 5px 20px rgba(0,0,0,0.6); + height: 560px; + width: 750px; +} +.outer-frame:before { + background: rgba(0,0,0,0.3); + border-radius: 5px; + box-shadow: inset 5px 5px 10px rgba(0,0,0,0.4), 1px 1px 1px rgba(255,255,255,0.3); + content: &#39;&#39;; + height: 538px; + left: 15px; + position: absolute; + top: 11px; + width: 720px; +} + +.screen { + background: #000 url("https:&#47;&#47;image.ibb.co&#47;gOqSz7&#47;screen_dust.webp") no-repeat center; + background-size: cover; + border-radius: 5px; + height: 450px; + left: 75px; + padding: 60px; + position: absolute; + top: 55px; + width: 600px; +} +.screen:after { + background: url("https:&#47;&#47;s13.postimg.org&#47;85ryuy1o7&#47;dust.webp") no-repeat center; + background-size: cover; + border-radius: 5px; + box-shadow: inset 0 0 20px rgba(0,0,0,0.5), inset 5px 5px 10px rgba(0,0,0,0.4), 1px 1px 1px rgba(255,255,255,0.3); + content: &#39;&#39;; + height: 100%; + left: 0; + opacity: 0.8; + pointer-events: none; + position: absolute; + top: 0; + width: 100%; + z-index: 2; +} + +.screen-guts { + border-bottom: 2px solid #8fc8c8; + border-top: 2px solid #8fc8c8; + height: calc(100% - 50px); + position: relative; + width: 100%; + z-index: 0; +} +.screen-guts:after { + border: 2px solid #8fc8c8; + color: #8fc8c8; + content: &#39;键&#39;; + padding: 5px 8px; + position: absolute; + right: 0; + top: 5px; +} +.screen-guts h2 { + background: #8fc8c8; + color: #fff; + display: inline-block; + font-size: 24px; + margin: 0 0 30px 0; + padding: 10px; +} +.screen-guts p { + color: #8fc8c8; + font-size: 18px; + margin: 0 0 30px 0; +} +.screen-guts p.column { + column-width: 200px; +} +.screen-guts p span { + text-transform: uppercase; +} +.screen-guts p span.error { + color: #f37c56; +} +.screen-guts p span em { + text-transform: none; +} +.screen-guts button.update-button { + background: #889314; + bottom: 10px; + color: #fff; + padding: 15px 20px; + position: absolute; + right: 0; +} +.screen-guts button.update-button:hover { + background: #515905; +} + +.bottom-controls { + background: #8fc8c8; + border-radius: 0 0 5px 5px; + bottom: 0; + display: flex; + left: 0; + height: 50px; + padding: 5px; + position: absolute; + width: 100%; +} +.bottom-controls button.back-button { + background: rgba(0,0,0,0.2); + color: #fff; + line-height: 20px; + padding: 8px 20px; + text-transform: uppercase; +} +.bottom-controls button.back-button:hover { + background: rgba(0,0,0,0.6); +} +</code></pre> + +<p>The overall styling is fairly simple (which is great for browser support) with only a couple pseudo elements. It&#8217;s important to include the custom <code>Sansation</code> typeface, since this is what the game uses for most UI elements and terminals. (I&#8217;m loading in this font via my <a href="https://opentype.netlify.app">OpenType side project</a>)</p> + +<p>The most important properties that truly bring this design together are those associated with the <code>.outer-frame</code> and <code>.screen</code> pseudo elements. Both of these elements use custom <code>background-images</code> that give a little more depth and life to the terminal - in this case fingerprints, dust and smudges.</p> + +<p>Feel free to swap these image textures out with your own and alter the terminal as you see fit!</p></description> + <link>https://btxx.org/soma-terminal-css</link> + <guid isPermaLink="false">https://btxx.org/soma-terminal-css</guid> + <pubDate>Sat, 29 May 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Embracing Slow Tech</title> + <description><h1 id="embracing-slow-tech">Embracing Slow Tech</h1> + +<p>2022-11-22</p> + +<p>I&#8217;m writing this post on my &#8220;new&#8221; X260 ThinkPad running <a href="https://garudalinux.org/">Garuda Linux</a> through Wayland&#47;Sway and it is going well so far. Setting things up was much easier than I initially expected. There were only a few minor tweaks I had to make, such as setting <code>vim</code> as the default EDITOR and installing a small collection of applications (Bitwarden, qutebrowser etc).</p> + +<p>I ran into some headaches with generating proper SSH keys but that was solved by calling in <code>ssh-agent</code> whenever launching a new instance of Alacritty. This could certainly be cleaned up further, but for now everything works fine. (A more detailed post about this X260 is in the works!)</p> + +<p>&#8220;Okay&#8221;, I hear you say, &#8220;But what does this have to do with <em>slow tech</em>?&#8221;</p> + +<p>Good question! Let me explain.</p> + +<h2 id="purposely-unplugged">Purposely Unplugged</h2> + +<p>For the longest time I have had some form of &#8220;smart&#8221; device on my persons while performing tasks away from my main computer. Whether that was grocery shopping, playing with the kids in the backyard, going on road trips - you name it. This was never a <em>bad thing</em> or something I actively looked to change. In fact, I hardly used these devices to connect much to the internet anyway[^1]. But I did notice that I would check things like Mastodon or my email every so often. </p> + +<p>What I started to realize was that I was checking these &#8220;online&#8221; items out of pure habit. I hardly ever responded to any email on my iPhone (it doesn&#8217;t help that Apple Mail on iOS is horrendous for plain text emails) and engaging in Mastodon, while fun, was certainly not a priority while out of the office. My attitude towards being &#8220;always online&#8221; started to shift towards being what I call <em>purposely unplugged</em>. I decided to make a personal change towards my online access:</p> + +<blockquote> +<p>If something is important, then I will take the time to complete that task at <strong>my office computer</strong>. I do not need to be &#8220;always online&#8221;.</p> +</blockquote> + +<p>It really makes you wonder how people back in the late 90s or early 2000s ever managed their lives without being connected online 24&#47;7. I certainly remember a time where you booted up a family computer to browse the internet, respond to emails, and complete work items. When you were done - you were done. You shutdown the machine and went about your life. &#8220;I&#8217;ll check back later tonight before bed&#8221; or &#8220;Hopefully there will be an email response by tomorrow morning&#8221; was the normal thought process after logging off. Now there is no &#8220;logging off&#8221;. It&#8217;s just switching devices. I don&#8217;t think it is healthy and really who benefits? Certainly not the individual.</p> + +<p>Hardware (computers specifically in this case) serve a purpose. They are meant to serve the individual using them. When did we cross-over into a world where we seem to be serving our devices? <strong>You are not important enough to be &#8220;available online&#8221; all the time</strong>. Sorry, but it&#8217;s true.</p> + +<h2 id="mobile-sucks-anyway">Mobile Sucks Anyway</h2> + +<p>Browsing the web is an absolute shitshow on mobile devices. Every service and their grandma begs you to install their native app. Adblockers are pretty much non-existent, which makes the modern web almost intolerable to visit. Then you have the issue of walled gardens, security breaches, planned EOL for perfectly functional hardware, increased e-waste - the list goes on.</p> + +<p>Functional computing and online interactions have already been perfected. It&#8217;s called a <strong>computer</strong>[^3]. Computers (desktops and laptops) give us the ability to control our devices at the OS-level, granting us incredible freedom to tweak things to our individual preferences. Unless you are technical enough to fiddle around with &#8220;beta&#8221; mobile Linux devices, the majority of users are stuck with what they are given. And it isn&#8217;t much.</p> + +<p>The corporate push to move everyone over to &#8220;mobile computing&#8221; is no accident. The ability to ban certain apps, push ads to users, collect customer details, and harvest user data is more than enough motivation for companies to usher in a future of &#8220;mobile&#8221; computing.</p> + +<p>Not to mention <em>cost</em>. New, top-of-the-line mobile devices sell for the same, if not more, than a standard laptop or desktop. You give up flexibility, customization and freedom for what exactly? A really good camera? Built-in GPS navigation?</p> + +<p>Get a <em>real</em> camera and grab a standard GPS. I&#8217;m serious. If that sounds ridiculous than you probably never really needed those things in the first place. Use the proper tool for the job. Smushing everything into one, locked-down device is a recipe for disaster.</p> + +<p>Overall - just use a <em>real</em> computer.</p> + +<h2 id="dont-flip-out">Don&#8217;t Flip-Out</h2> + +<p>So, with all of that in mind, I swapped out my iPhone SE (2020) smart phone for the ZTE Cymbal 2 &#8220;dumb&#8221; flip phone. </p> + +<p>The screen is extremely small with low resolution. The camera is absolute garbage. Writing text messages requires use (and knowledge) of the T9 composer[^2]. Most modern applications besides email or the photo gallery are non-existent.</p> + +<p><strong>But I absolutely love it</strong>.</p> + +<p>It&#8217;s a phone. It makes phone calls and allows me to send texts. Texts themselves are a little more time consuming, which forces me to be more concise in my writing. Anything that requires great detail should probably be an email - which is what my computer is for. What else do I need? If I ever drop it and smash into a million pieces I can replace it for &#60;$50. I have the ability to replace the battery - not to mention battery life is measured in <em>days</em> not hours. It&#8217;s rugged, so I don&#8217;t need to be so delicate with it or slap some huge protective case on it.</p> + +<p>It does its job. No more, no less.</p> + +<h2 id="good-for-you">&#8220;Good for You&#8221;</h2> + +<p>I know that some of you reading this might think that this workflow is fine for <em>me</em> but would never be suitable for your needs. Maybe that&#8217;s true, but I&#8217;d probably disagree. I think people have just been conditioned to <em>believe</em> that most day-to-day activites would be impossible without a smart device or a connection to the internet. If not, many would at least feel that without such access things would become far too inconvenient. My stance remains: the majority of people do not need constant access to a computer in their pocket.</p> + +<p>It&#8217;s completely fine to enjoy your own setup and device preferences - I&#8217;m not trying to convert anyone but instead just describing my own experiences. So please, keep your torches and pitchforks at home.</p> + +<p>Thanks for reading.</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>It helps that I have pretty much zero active accounts across most &#8220;popular&#8221; social media platforms.</li> +<li>Some of you readers might not have ever experienced the wonders of T9&#8230;</li> +<li>I understand that even smart phones can be classified as &#8220;computers&#8221;. I am using this term in the classical sense.</li> +</ol></description> + <link>https://btxx.org/slow</link> + <guid isPermaLink="false">https://btxx.org/slow</guid> + <pubDate>Tue, 22 Nov 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Converting My X201 ThinkPad into a Slabtop</title> + <description><h1 id="converting-my-x201-thinkpad-into-a-slabtop">Converting My X201 ThinkPad into a Slabtop</h1> + +<p>2023-05-01</p> + +<p>I recently wrote <a href="/x201/">about physically disabling the WiFi toggle switch on my X201</a> which was a fun &#8220;hack&#8221; to an annoying issue I was running into. Since then, the laptop has been running flawlessly.</p> + +<p>The only other <em>minor</em> issue I had was the poor display quality. The screen works perfectly fine but the X201&#8217;s age prevents it from being the best possible display for day-to-day tasks. Both the resolution and viewing angles are quite poor.</p> + +<p>So, what were my options to remedy this problem?</p> + +<ol> +<li>Swap out and upgrade the laptop&#8217;s display (not many options for this though)</li> +<li>Connect an external display, keyboard, mouse and dock the X201</li> +<li>Something else?</li> +</ol> + +<h2 id="looking-into-something-else">Looking into &#8220;Something Else&#8221;</h2> + +<p>I found that the possible replacement screens weren&#8217;t worth the cost&#47;hassle to swap out. And setting the laptop aside, docked with external peripherals sounded fine in theory - but then I would be missing out on the X201&#8217;s amazing classic keyboard&#8230;</p> + +<p>Then I thought to myself, &#8220;Why not just remove the display <em>entirely</em>?&#8221;</p> + +<p>So that&#8217;s what I did.</p> + +<p>Removing the entire top lid was easier than I initially thought it would be. The beautiful thing about these older, classic ThinkPads is the ability to completely dissemble them. I won&#8217;t go into heavy details on how to take one of these machines apart, since great documentation <a href="https://www.ifixit.com/Device/Lenovo_Thinkpad_X201_Tablet">already exists</a>. But once you have the keyboard and hinge screws removed it is essentially as easy as <em>lifting</em> the lid out of the chassis. (After disconnecting the small display connectors, of course)</p> + +<h2 id="ditching-alpine-for-debian">Ditching Alpine for Debian</h2> + +<p>I love Alpine Linux. It&#8217;s normally my <a href="https://as.bt.ht">go-to distro</a> (paired with dwm) for most of my laptop devices. Unfortunately, I find tiling window managers a slight pain to use on larger, 4K displays. I also wanted this slabtop to &#8220;just work&#8221;, instead of needing to fiddle around with WiFi, <code>xrandr</code>, audio etc. Not to mention that Debian is rock solid stable. Defaulting to the XFCE DE was a no-brainer as well since this device is somewhat <em>old</em>.</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>This slabtop gives me those old-school &#8220;Commodore64&#8221; vibes (or more recent devices like the Raspberry Pi 400). This setup certainly isn&#8217;t for everyone but for my use case it&#8217;s working well. Traveling with a machine like this might prove a little more challenging - although you could simply pair it with a smaller travel monitor (I&#8217;m sure the overall carrying weight would be similar to the standard X201).</p> + +<p>If nothing else, it is good to keep this option in mind if you ever break your laptop&#8217;s display and don&#8217;t feel like spending the money to fix it. Just grab an external monitor you have laying around and make a slabtop!</p></description> + <link>https://btxx.org/slabtop</link> + <guid isPermaLink="false">https://btxx.org/slabtop</guid> + <pubDate>Mon, 01 May 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Skip to Content Button</title> + <description><h1 id="skip-to-content-button">Skip to Content Button</h1> + +<p>2019-03-25</p> + +<p>One of the golden rules for testing your website&#8217;s accessibility is the &#8220;keyboard-only&#8221; audit. This is where you test navigating through your entire site without the use of a mouse, but instead rely solely on tabbing through your content.</p> + +<p>Unfortunately, one item is normally overlooked during this audit - a &#8220;skip to content&#8221; context button. Including a &#8220;skip to content&#8221; navigation item in your project is extremely useful because:</p> + +<ul> +<li>speeds up user interaction with the content you <strong>want</strong> them to see</li> +<li>on subsequent pages the user shouldn&#8217;t need to tab through the entire navigation each time</li> +</ul> + +<h2 id="the-html">The HTML</h2> + +<p>For the sake of this demo we will assume that we currently have the following navigation setup in our project:</p> + +<pre><code>&#60;nav role="navigation"&#62; + &#60;a href="&#47;"&#62;Home&#60;&#47;a&#62; + &#60;a href="&#47;about"&#62;About&#60;&#47;a&#62; + &#60;a href="&#47;archive"&#62;Archive&#60;&#47;a&#62; + &#60;a href="&#47;atom.xml"&#62;RSS&#60;&#47;a&#62; +&#60;&#47;nav&#62; +</code></pre> + +<p>Now for the easy part - adding our simple content skip link with it&#8217;s own custom <code>skip-content</code> class:</p> + +<pre><code>&#60;nav role="navigation"&#62; + &#60;!-- Skip to content button --&#62; + &#60;a class="skip-content" href="#main"&#62;Skip to Content (Press Enter)&#60;&#47;a&#62; + &#60;a href="&#47;"&#62;Home&#60;&#47;a&#62; + &#60;a href="&#47;about"&#62;About&#60;&#47;a&#62; + &#60;a href="&#47;archive"&#62;Archive&#60;&#47;a&#62; + &#60;a href="&#47;atom.xml"&#62;RSS&#60;&#47;a&#62; +&#60;&#47;nav&#62; +</code></pre> + +<h2 id="the-css">The CSS</h2> + +<p>Our first task is to make sure this new link isn&#8217;t visible or interactive by default unless the user explicitly tabs through the navigation. We do so by positioning the link outside of the main content view. It is important to use this <code>absolute</code> position style instead of setting the display property to <code>none</code>, since the display property technique will fully remove the element from the DOM (bad accessibility practices).</p> + +<pre><code>a.skip-content { + background: grey; + color: white; + left: -9999px; + padding: 0.5rem; + position: absolute; + top: 0; +} +</code></pre> + +<h2 id="almost-there">Almost there</h2> + +<p>Now we just re-position the element when the user focuses on the link with a keyboard tab:</p> + +<pre><code>a.skip-content:focus { + left: 1rem; &#47;* Whatever desired position *&#47; +} +</code></pre> + +<h2 id="all-done">All Done</h2> + +<p>This is a very basic accessibility win you can implement in your current projects with next to zero effort. Enjoy!</p></description> + <link>https://btxx.org/skip-to-content</link> + <guid isPermaLink="false">https://btxx.org/skip-to-content</guid> + <pubDate>Mon, 25 Mar 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Simple Navigation Setup in Jekyll 3.9.0</title> + <description><h1 id="simple-navigation-setup-in-jekyll-3.9.0">Simple Navigation Setup in Jekyll 3.9.0</h1> + +<p>2020-09-29</p> + +<p>I have found that there is a lot of information on the internet in regards to setting up &#8220;dynamic&#8221; navigation in Jekyll. The problem I&#8217;ve noticed is that a good amount of these implementations are overly complex. Here is the simplest way that I tend to use when building out <code>nav</code> elements in Jekyll (3.9.0 as of this writing).</p> + +<h2 id="creating-the-directories-files">Creating the Directories &#38; Files</h2> + +<p>In your Jekyll project, at the top level, you need to create a directory called <code>_data</code>. Inside this folder we will be creating a new file called <code>navigation.yml</code>. The contents of this file will contain all your navigation links and they are rendered like so:</p> + +<pre><code>- title: Home +url: &#47; + +- title: Articles +url: &#47;articles&#47; + +- title: About +url: &#47;about&#47; +</code></pre> + +<h2 id="dynamically-rendering-the-navigation">Dynamically Rendering the Navigation</h2> + +<p>The next and final step is rendering out the navigation with a simple loop:</p> + +<pre><code>{% for item in site.data.navigation %} + &#60;li&#62; + &#60;a href="{{ item.url }}"&#62;&#60;span&#62;{{ item.title }}&#60;&#47;span&#62;&#60;&#47;a&#62; + &#60;&#47;li&#62; +{% endfor %} +</code></pre> + +<h2 id="highlight-current-page">Highlight Current Page</h2> + +<p>It&#8217;s also very easy to extend this method to add a CSS class based on whether a user is on the currently selected page or not:</p> + +<pre><code>{% for item in site.data.navigation %} + &#60;li&#62; + {% if item.url == page.url %} + &#60;a class="active" href="{{ item.url }}"&#62;&#60;span&#62;{{ item.title }}&#60;&#47;span&#62;&#60;&#47;a&#62; + {% else %} + &#60;a href="{{ item.url }}"&#62;&#60;span&#62;{{ item.title }}&#60;&#47;span&#62;&#60;&#47;a&#62; + {% endif %} + &#60;&#47;li&#62; +{% endfor %} + + + +&#47;* Custom styling for active class *&#47; +li a.active { color: red; } +</code></pre> + +<p>Congrats! You now have fully functional, dynamic navigation on your Jekyll site.</p></description> + <link>https://btxx.org/simple-jekyll-navigation</link> + <guid isPermaLink="false">https://btxx.org/simple-jekyll-navigation</guid> + <pubDate>Tue, 29 Sep 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Simple Does Not Mean Ugly</title> + <description><h1 id="simple-does-not-mean-ugly">Simple Does Not Mean Ugly</h1> + +<p>2019-03-26</p> + +<p>I see new blog posts popping up now and again advocating for designers to keep their products as simple as possible - and I couldn&#8217;t agree more.</p> + +<p>A lot of designers tend to think they need to reinvent the wheel when it comes to UI concepts that are standard defaults and expected by most users. Not only does this add extra work for your design and development cycles, but also increases the potential of frustration for your users when they are using your product.</p> + +<p>Your job as a designer is to focus on the user experience journey and understand what those users <em>expect</em> to happen - not what <em>you want</em> to happen. This is a very delicate balance of design “give and take”, hence why simple designs always seem to work best.</p> + +<p><strong>But simple does not mean “ugly”</strong>.</p> + +<h2 id="ugly-simple">Ugly Simple</h2> + +<p>Anyone who has read some of my opinion pieces on here in regards to UI know that I have a profound distaste for the overused “flat design” trend. Many designers consider this trend a clean and “simple” approach to most UI conventions - which is complete nonsense to most professionals in the industry (at least those not drinking the kool-aid).</p> + +<p>Using the term “simple” in the context of UI is currently quite damaging to modern application and product development. Designers take these definitions too literally, leading to stripped down interfaces with little to no usability for their end-users.</p> + +<p>Cap Watkins wrote a post back in 2014 where he explained his admiration for <a href="https://capwatkins.com/blog/the-boring-designer">boring designers</a> and how they tackled design problems using the most boring or “lazy” techniques. While I don’t agree completely with his arguments, nor do I think one should try to attain the status of “boring designer”, I can understand his main sentiment: everyone can appreciate obvious and clever design.</p> + +<h2 id="fixing-simple">Fixing Simple</h2> + +<p>I hate when people point out problems without at least attempting to suggest some sort of solution - which is exactly what I’m going to do here (with only a few set examples of course, otherwise the post would become a book). Let’s take a look at the major culprits I find around the web: navigations, buttons and form elements.</p> + +<h3 id="1.-hidden-navigations">1. Hidden Navigations</h3> + +<p>How many native apps that you use regularly rely on the trusty “hamburger” menu icon navigation system? What about news sites, video streaming services, or blogs? Maybe you’ve implemented this concept in your own projects as well, advocating for it’s “cleaner” approach to navigation. </p> + +<p>The <em>hamburger</em> is a great example of “ugly simple”. You are purposely hiding the main structure that allows your users to move around your product freely behind an <strong>additional</strong> interaction. That is the opposite of simple.</p> + +<p>The only time you should be using the “hamburger crutch” as I call it, is for very small screen sizes or when targeting mobile user agents directly. That’s it. If your users are viewing your product on a larger screen, for the love of God, <strong>use the space available</strong>.</p> + +<p><img src="/public/images/navigation.webp" alt="Desktop Navigation" /></p> + +<h3 id="2.-buttons-not-looking-like-buttons">2. Buttons Not Looking Like Buttons</h3> + +<p>It’s difficult for users to actually <strong>do</strong> the action you want them to perform when your buttons look like text. I’m not exactly sure why designers have pivoted towards removing all stylings that regular users have come to expect from button elements, but it’s plaguing far too many websites.</p> + +<p>Buttons should be eye-catching, colorful, fun to interact with, and support all proper CSS states. Clients and agencies will tend to push for “cleaner” buttons - which most of the time refers to setting the buttons as simple underlined text items. Do not be brainwashed into thinking this is better:</p> + +<p><img src="/public/images/buttons.webp" alt="Button Comparsion" /></p> + +<p>You tell me what looks more interactive&#8230;</p> + +<h3 id="3.-overriding-form-elements">3. Overriding Form Elements</h3> + +<p>Designers should rarely rebuild the browser structure for web form elements in their projects. I should clarify - I’m not suggesting that you use the barebones default styles provided by the browser, I’m saying that you shouldn’t hide the elements themselves just to replace them with mimicking components. I find this practice is becoming more and more noticeable with the growing popularity of component-based frameworks. Don’t fall into these bad design habits.</p> + +<p>For example, you should leave the following <code>select</code> element as is:</p> + +<pre><code>&#60;select&#62; + &#60;option&#62; +&#60;&#47;select&#62; +</code></pre> + +<p>Instead of doing something like this:</p> + +<pre><code>&#60;select style="display:none;"&#62;&#60;&#47;select&#62; +&#60;div class="custom-select-container"&#62; + &#60;span&#62;Option&#60;&#47;span&#62; +&#60;&#47;div&#62; +</code></pre> + +<p>There are cleaner ways to customize web forms with straightforward CSS. Have a look at my own open source project <a href="https://normform.netlify.com/">Normform</a> if you’d prefer to just use a lightweight plugin to do this for you. (Shameless plug, I know)</p> + +<h2 id="simple-can-be-good">Simple Can Be Good</h2> + +<p>Having a boring or lazy design thought-process doesn’t mean you should develop ugly UI for the sake of “simple”. Too often that word is associated with “minimalism” or “less content” and that is only half true.</p> + +<p>The <em>experience</em> is what needs to be simple for your users - the UI itself should still be beautiful.</p></description> + <link>https://btxx.org/simple-does-not-mean-ugly</link> + <guid isPermaLink="false">https://btxx.org/simple-does-not-mean-ugly</guid> + <pubDate>Tue, 26 Mar 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Simple Accessibility</title> + <description><h1 id="simple-accessibility">Simple Accessibility</h1> + +<p>2018-09-07</p> + +<p>Implementing proper accessibility practices can seem a little daunting at first, but there are a few basic standards you can introduce into your project work-flow that are fairly straightforward:</p> + +<h2 id="basic-design">Basic design</h2> + +<ol> +<li>Test that your project has the proper contrast color settings between type, backgrounds, icons etc.</li> +<li>Only use &#8220;fancy&#8221; grid-ordering for minor layout design - avoid rearranging important content via CSS</li> +</ol> + +<h2 id="content">Content</h2> + +<ol> +<li>Use proper HTML structures (aside, header, main, footer elements as needed)</li> +<li>Make use of the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label attribute</a></li> +<li>Ensure your website&#47;app can be navigated completely (and properly) with only a keyboard</li> +</ol> + +<h2 id="images">Images</h2> + +<ol> +<li>Avoid using CSS backgrounds for content images (should only be used for patterns, layout design etc.)</li> +<li>Ensure proper <code>alt</code> attributes are provided on all images</li> +</ol> + +<p>It isn&#8217;t much - but follow these basics and you&#8217;ll be one step closer to providing better accessibility to your users.</p></description> + <link>https://btxx.org/simple-accessibility</link> + <guid isPermaLink="false">https://btxx.org/simple-accessibility</guid> + <pubDate>Fri, 07 Sep 2018 00:00:00 +0000</pubDate> + </item> + <item> + <title>Shiny, Animated CSS Buttons</title> + <description><h1 id="shiny-animated-css-buttons">Shiny, Animated CSS Buttons</h1> + +<p>2021-04-27</p> + +<p>Everyone can appreciate fancy, animated buttons - but often times they come with a performance cost: <em>JavaScript</em>. Luckily for us, we can create our very own shiny, animated buttons with pure CSS.</p> + +<h2 id="the-demo">The Demo</h2> + +<p><img src="/public/images/shiny-buttons.png" alt="Four buttons that shine when hovered" /></p> + +<p><a href="https://codepen.io/bradleytaunt/pen/oNBQevj">Live CodePen Example</a></p> + +<h2 id="the-html">The HTML</h2> + +<p>Nothing fancy going on here, just a set of <code>ahref</code> elements with specific <code>button</code> classes added:</p> + +<pre><code>&#60;a href="#" class="button green"&#62;&#60;span&#62;Green Button&#60;&#47;span&#62;&#60;&#47;a&#62; +&#60;a href="#" class="button blue"&#62;&#60;span&#62;Blue Button&#60;&#47;span&#62;&#60;&#47;a&#62; +&#60;a href="#" class="button orange"&#62;&#60;span&#62;Orange Button&#60;&#47;span&#62;&#60;&#47;a&#62; +&#60;a href="#" class="button purple"&#62;&#60;span&#62;Purple Button&#60;&#47;span&#62;&#60;&#47;a&#62; +</code></pre> + +<h2 id="the-css">The CSS</h2> + +<p>First we set the default base styling for all the buttons. We also place the inner text into <code>span</code> elements (I will explain why in a little bit):</p> + +<pre><code>.button { + background: white; + border: 1px solid #a5b1c2; + border-radius: 6px; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + color: #111111; + display: inline-block; + margin: 1rem auto; + min-width: 180px; + overflow: hidden; + padding: 15px 30px; + position: relative; + text-align: center; + text-decoration: none; + transition: .3s ease-in-out all; +} +.button span { + position: relative; + z-index: 2; +} +</code></pre> + +<p>Now we need to create our <em>shiny</em> element that will pass across the button on <code>hover</code> or <code>focus</code>. For this object we will use the <code>before</code> pseudo element:</p> + +<pre><code>.button:before { + background: linear-gradient(transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%); + content:&#39;&#39;; + height: 200%; + position: absolute; + right: calc(100% + 20px); + top: -55%; + transform: rotate(-70deg); + transition: .6s ease-in-out right; + width: 80px; + z-index: 0; +} +</code></pre> + +<p>Next, we tell the <code>before</code> element to swipe across the main <code>.button</code> parent element when the user hovers or focuses on it. Remember placing our inner content into a <code>span</code> element? That insures that our shiny&#47;swipe element doesn&#8217;t position itself <em>over</em> the text, but instead flows under it:</p> + +<pre><code>.button:hover:before { + right: -100%; +} +&#47;* Extra visual styling for buttons on hover - optional *&#47; +.button:hover, button:focus { + box-shadow: 0 8px 12px rgba(0,0,0,0.1), inset 0 10px 30px rgba(255,255,255,0.3), inset 0 2px 2px rgba(255,255,255,0.2); + color: white; +} +</code></pre> + +<p>All that&#8217;s left is adding some visual flare to each individual button - in this case background-color and border-color:</p> + +<pre><code>.button.green:hover, button.green:focus { background: #20bf6b; border-color: #20bf6b; } +.button.blue:hover, button.blue:focus { background: #0984e3; border-color: #0984e3; } +.button.orange:hover, button.orange:focus { background: #ff793f; border-color: #ff793f; } +.button.purple:hover, button.purple:focus { background: #6c5ce7; border-color: #6c5ce7; } +</code></pre> + +<h2 id="browser-support">Browser Support</h2> + +<p>These buttons work across all browsers flawlessly. See the details <a href="https://caniuse.com/css-gencontent">on the caniuse report itself</a>.</p> + +<h2 id="the-live-codepen">The Live CodePen</h2> + +<p>You can find the live demo embedded at the top of this post, or <a href="https://codepen.io/bradleytaunt/pen/oNBQevj">directly on CodePen here</a>.</p></description> + <link>https://btxx.org/shiny-css-buttons</link> + <guid isPermaLink="false">https://btxx.org/shiny-css-buttons</guid> + <pubDate>Tue, 27 Apr 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>This Site is Now a Shinobi Website</title> + <description><h1 id="this-site-is-now-a-shinobi-website">This Site is Now a Shinobi Website</h1> + +<p>2022-05-13</p> + +<p><strong>Update 2023</strong>: this website is now built with <a href="https://barf.bt.ht">barf</a></p> + +<hr/> + +<p>My personal website is now an RSS-focused blog, generated from a collection of plain text files.</p> + +<p>But before we get into greater details about the switch, let me first introduce the concept of a &#8220;shinobi website&#8221;.</p> + +<h2 id="the-shinobi-website-project">The Shinobi Website Project</h2> + +<p>Instead of repeating myself in this post, feel free to read up about the project at the official site:</p> + +<p><a href="https://shinobi.bt.ht">https:&#47;&#47;shinobi.bt.ht</a></p> + +<p>To summarize: by using a simple <code>shell</code> script I&#8217;m able to render all my plain text files (which is now how I solely write my articles) into a structured RSS 2.0 <code>xml</code> file. Subscribers can now consume my posts directly in their RSS reader of choice without the need to directly visit the article&#8217;s URL.[^0]</p> + +<h2 id="why-the-change">Why the Change?</h2> + +<p>I&#8217;m a hardcore minimalist at heart and have a tendency to make my own personal projects <em>leaner</em> all the time. I also have been trying my best to find the most refined writing workflow to keep myself posting consistently (and hopefully keeping the quality high). My first iteration towards this step was switching over to hand-coding everything via HTML &#38; CSS[^1]. That worked well - for a very brief time.</p> + +<p>After recently launching the Shinobi project, I kept toying with the idea of switching my personal website over to use the same format. There was a heavy internal debate about ditching HTML in favour of plain text. What kind of impact would this have on both my site and audience? Would people be pissed about yet <em>another</em> radical change?</p> + +<p>After sleeping on it for a couple nights, I decide to say screw it. This is my personal website and it should ultimately reflect who I am and what I prefer. Dwelling too long on the opinion of others (as much as I respect any of you kind enough to follow along) can lead to decisions that negatively impact ones own well being.</p> + +<p>So here we are. Blogging in plain text.</p> + +<h2 id="avoiding-link-rot">Avoiding Link-Rot</h2> + +<p>I&#8217;ve manually added this blog post to my original <code>feed.xml</code>, in order to help inform those of you following that feed of this change. But this will be the last entry of that feed.</p> + +<p>If you decide not to re-sub, I completely understand and thank you for your time! Those of you choosing to still follow along: welcome aboard a new adventure!</p> + +<p>As for the older HTML-based articles, no worries. They will remain on this site under the standard <code>blog</code> directory so that old links don&#8217;t break or cause conflicts. You can find that directory here:</p> + +<p><a href="https://tdarb.org/feeds/posts.xml">https:&#47;&#47;tdarb.org&#47;feeds&#47;posts.xml</a></p> + +<h2 id="tutorials-and-demos">Tutorials and Demos</h2> + +<p>I will still be writing up detailed tutorials and interactive demos going forward - no need to worry. My plan is to link directly to a collaborative coding site like CodePen, etc. I haven&#8217;t decided on the best option yet (want to keep things as easy for my readers as possible) so only time will tell what my decision will be.</p> + +<p>Feel free to comment below if you have any suggestions! Preferably one that respects user privacy and advocates for a more open web.</p> + +<h2 id="speaking-of-comments">Speaking of Comments&#8230;</h2> + +<p>Since the old commenting system[^2] required me to manually add each comment individually, I assumed I would just do the same here. Then I got a hack-y idea. What if I used a mailing list linked through this website&#8217;s sourcehut project?</p> + +<p>It might not be the most user friendly or sustainable but I think it could be an interesting experiment at the very least!</p> + +<p>Now each new article will have a link (which I will generate manually) that users can email directly to in order to share their comments. I have no idea how spam will work with this concept. This whole idea could blow up in my face. Only time will tell.</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>This workflow is clean and simple. It allows me to open a blank text file and instantly start writing. Once I&#8217;m happy with it, I run a simple shell command to update the RSS feed and sync it with my web server. Local testing is dead simple too since everything is set as <code>.txt</code>.</p> + +<p>Some may like the concept of reading my new articles in their RSS reader, others might hate it. I&#8217;ve learned over the years that you can&#8217;t please everyone.</p> + +<p>Thanks for taking the time to read my jumbled thoughts.</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>Users can <em>of course</em> still visit the individual article <code>.txt</code> files in their browser, if they so wish.</li> +<li><a href="https://tdarb.org/blog/my-static-blog-publishing-setup.html">https:&#47;&#47;tdarb.org&#47;blog&#47;my-static-blog-publishing-setup.html</a></li> +<li><a href="https://tdarb.org/blog/poormans-comment-system.html">https:&#47;&#47;tdarb.org&#47;blog&#47;poormans-comment-system.html</a></li> +</ol></description> + <link>https://btxx.org/shinobi-website</link> + <guid isPermaLink="false">https://btxx.org/shinobi-website</guid> + <pubDate>Fri, 13 May 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Sharing The Things We Use</title> + <description><h1 id="sharing-the-things-we-use">Sharing The Things We Use</h1> + +<p>2021-07-24</p> + +<p>I always love stumbling across personal websites that include some form of a &#8220;uses&#8221; page. A place where the author lists out all the tools they use on a regular basis - whether it be hardware, software or something else entirely. It allows readers to get a slightly more personal peek into the daily work-life of that author and maybe even provides better context for <em>how</em> they work.</p> + +<p>Since I realized how much I enjoy reading other people&#8217;s <em>uses</em> pages, I&#8217;ve decided to finally publish my own! My list of hardware and software is fairly boring and predictable for a designer&#47;developer - but sharing is caring! My hope is that even one personal out in the great-wide web can find something useful (pun intended!) or least inspiring about my personal setup.</p> + +<p>Fell free to check it out: <a href="/uses">The Things I Use</a></p> + +<p><em>PS. I plan to add a desktop picture of my complete setup once I find the time!</em></p></description> + <link>https://btxx.org/sharing-the-things-we-use</link> + <guid isPermaLink="false">https://btxx.org/sharing-the-things-we-use</guid> + <pubDate>Sat, 24 Jul 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Blogging for 7 Years</title> + <description><h1 id="blogging-for-7-years">Blogging for 7 Years</h1> + +<p>2023-06-24</p> + +<p>My <a href="/aui">first public article</a> was posted on June 28th 2016. That was <em>seven</em> years ago.</p> + +<p>In that time, quite a lot has changed in my life both personally and professionally. So, I figured it would be interesting to reflect on these years and document it for my own personal records. My hope is that this is something I could start doing every 5 or 10 years (if I can keep going that long!). This way, my blog also serves as a &#8220;time capsule&#8221; or museum of the past&#8230;</p> + +<h2 id="fun-facts">Fun Facts</h2> + +<p><strong>This Blog</strong>:</p> + +<p>I originally started blogging on <code>bradleytaunt.com</code> using WordPress, but since then I have changed both my main domain and blog infrastructure multiple times. At a glance I have used:</p> + +<ul> +<li>Jekyll</li> +<li>Hugo</li> +<li>Blot</li> +<li>Static HTML&#47;CSS</li> +<li><a href="https://phpetite.bt.ht">PHPetite</a></li> +<li><a href="https://shinobi.bt.ht">Shinobi</a></li> +<li><a href="https://pblog.bt.ht">pblog</a></li> +<li><a href="https://barf.bt.ht">barf</a> <em>Currently using!</em></li> +</ul> + +<p><strong>Personal:</strong></p> + +<p>As with anyone over time, the personal side of my life has seen the biggest <em>updates</em>:</p> + +<ul> +<li>Married the love of my life (after knowing each other for ~14 years!)</li> +<li>Moved out into rural Ontario for some peace and quiet</li> +<li>Had three wonderful kids with said wife (two boys and a girl)</li> +<li>Started noticing grey sprinkles in my stubble (I guess I can officially call myself a &#8220;grey beard&#8221;?)</li> +</ul> + +<p><strong>Professionally:</strong></p> + +<ul> +<li>Pivoted heavily into UX research and design for a handful of years (after working mostly with web front-ends)</li> +<li>Recently switched back into a more fullstack development role to challenge myself and learn more</li> +</ul> + +<h2 id="nothing-special">Nothing Special</h2> + +<p>This post isn&#8217;t anything ground-breaking but for me it&#8217;s nice to reflect on the time passed and remember how much can change in such little time. Hopefully I&#8217;ll be right back here in another 7 years and maybe you&#8217;ll still be reading along with me!</p></description> + <link>https://btxx.org/seven-years</link> + <guid isPermaLink="false">https://btxx.org/seven-years</guid> + <pubDate>Sat, 24 Jun 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Setting Up a Free SSL</title> + <description><h1 id="setting-up-a-free-ssl">Setting Up a Free SSL</h1> + +<p>2018-08-07</p> + +<p>I never had to worry about SSL certificates when I originally hosted my blog through Github Pages, but since switching over to Surge.sh I lost my ability to utilize <code>https</code> protocol.</p> + +<p>Luckily, Cloudflare offers a very simple way to implement SSL on your website - and it&#8217;s free!</p> + +<h3 id="ssl-in-3-easy-steps">SSL in 3 easy steps</h3> + +<ol> +<li>You will need to have a Cloudflare account - you can setup one here. Be sure to select the &#8216;Free&#8217; pricing plan (unless you want some extras features)</li> +<li>Follow the process on updating your nameservers to the proper Cloudflare servers and wait for your domain to update the changes. (This can take up to 24 hours)</li> +<li>From the main Cloudflare dashboard navigate to the Crypto tab. Then under the SSL section, select &#8220;Flexible&#8221; from the dropdown.</li> +</ol> + +<h3 id="enjoy-your-newly-secure-site">Enjoy your newly secure site</h3> + +<p>That&#8217;s it! Give it a bit of time and soon your website will support <code>https</code> and best of all it costs you nothing!</p> + +<p>I suggest checking out the other interesting features Cloudflare offers while your playing with the dashboard as well. They have a lot of impressive options that can really improve the overall performance of your site &#47; web app.</p></description> + <link>https://btxx.org/setting-up-free-ssl</link> + <guid isPermaLink="false">https://btxx.org/setting-up-free-ssl</guid> + <pubDate>Tue, 07 Aug 2018 00:00:00 +0000</pubDate> + </item> + <item> + <title>Self-Hosting Fathom Analytics with DigitalOcean</title> + <description><h1 id="self-hosting-fathom-analytics-with-digitalocean">Self-Hosting Fathom Analytics with DigitalOcean</h1> + +<p>2021-02-02</p> + +<p>Since my previous post walked through the process of setting up Fathom PRO on Netlify, I figured it made sense to create a similar tutorial for the &#8220;Lite&#8221; variation, self-hosted on DigitalOcean.</p> + +<p>Please note that while I think the PRO version of Fathom Analytics is truly great, for my small, niche blog it seemed overkill compared to self-hosting. Switching over from $14&#47;mo to $5&#47;mo while retaining most of the same functionality was a no-brainer. Choose the option that best suits your needs (or in the case - budget &#38; bandwidth).</p> + +<p>With that cleared up - let&#8217;s get into it!</p> + +<h2 id="prerequisites">Prerequisites</h2> + +<ol> +<li>One or more website(s) where you would like to include analytics</li> +<li>DigitalOcean account (<strong>this link will give you a $100 credit!</strong>)</li> +<li>Positive attitude and passion for privacy-respecting analytics!</li> +</ol> + +<h2 id="create-a-droplet">Create a Droplet</h2> + +<p>Once your DigitalOcean account is setup, navigate to the Marketplace and search for <code>Fathom Analytics</code>. Then click the <code>Create Fathom Analytics Droplet</code>.</p> + +<p>From here you&#8217;ll be brought to a page that allows you to customize the specifications of your new droplet. If you&#8217;re a smaller traffic site (personal blog, etc) selecting the <strong>$5&#47;month</strong> Basic Shared CPU option is your best bet.</p> + +<p>Select the data-center region based on where most of your traffic originates from. I would suggest enabling <code>IPv6</code> and setting up your authentication via SSH instead of a regular password system. Adding backups is entirely at your own discretion.</p> + +<p>Once you&#8217;re ready, click <strong>Create Droplet</strong>.</p> + +<h2 id="enter-the-matrix-not-really">Enter the Matrix (not really)</h2> + +<p>Once DigitalOcean finishes spinning up your new droplet, open a terminal and connect to it by entering:</p> + +<pre><code>ssh root@YOUR_DROPLET_IP +</code></pre> + +<p>If you setup your login via SSH everything should work as-is. If you went the password route, you&#8217;ll given a prompt to enter it.</p> + +<p>Now that you&#8217;re connected, Fathom will guide you through a simple configuration setup. It&#8217;s fairly straightforward and painless. Once complete, move to the next step.</p> + +<h2 id="domains">Domains</h2> + +<p>You&#8217;ll most likely want to host this instance on your own domain or subdomain - instead of connecting directly via the droplet&#8217;s <code>IP</code>. Head over to your <strong>Networking</strong> page in the sidebar of DigitalOcean and add your custom domain.</p> + +<p>Then, click on that newly added domain - we need to add some new records. You&#8217;re going to add two new <code>A</code> records to this domain:</p> + +<p>The last thing you need to do is set your nameservers to point to DigitalOcean:</p> + +<pre><code>ns1.digitalocean.com +ns2.digitalocean.com +ns3.digitalocean.com +</code></pre> + +<p>Give it some time to propagate and you&#8217;ll be in business!</p> + +<h2 id="ssl-ftw">SSL FTW</h2> + +<p>There is hardly a good reason not to practice security on the web, so setting up your new analytics to be served over <code>HTTPS</code> is just the smart thing to do. Did I mention that this is completely free as well? See - no excuses.</p> + +<p>In order to get a free SSL certificate setup, you&#8217;ll need to install <code>certbot</code>. While connected to your droplet, enter the following:</p> + +<pre><code>sudo apt-get install python-certbot-nginx +</code></pre> + +<p>Once installed, enter the following to setup SSL (remember to swap out the domain with your own):</p> + +<pre><code>certbot --nginx -d your-cool-domain.com +</code></pre> + +<p>Follow the steps (it&#8217;s very quick and easy) and you&#8217;ll have <code>HTTPS</code> setup in a jiffy!</p> + +<h2 id="the-final-lap">The Final Lap</h2> + +<p>The last thing to do is login to your newly self-hosted Fathom instance, add your site you wish to track, grab the generated tracking code and then slap that badboy on whatever pages you need to track!</p> + +<p>Congrats! You&#8217;re now officially running your own set of analytics tools. You should be happy about what you&#8217;ve accomplished and proud for respecting your users&#8217; privacy!</p></description> + <link>https://btxx.org/self-hosting-fathom</link> + <guid isPermaLink="false">https://btxx.org/self-hosting-fathom</guid> + <pubDate>Tue, 02 Feb 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>What Happened to Self-Hosted Blogs?</title> + <description><h1 id="what-happened-to-self-hosted-blogs">What Happened to Self-Hosted Blogs?</h1> + +<p>2018-10-18</p> + +<p>I remember a time on the internet1 when everyone and their grandmother was running a personal blog. And I mean <em>personal</em> - not hosted on some side platform or a tacked-on addition to the rest of their website.</p> + +<p>Nowadays companies and individuals alike use platforms like Medium to host and promote all of their articles, essays and case studies. I understand the draw, and can even list out the positives:</p> + +<ol> +<li>A large community already exists under the Medium brand</li> +<li>It&#8217;s easy to promote your own work and follow others</li> +<li>The platform is fairly easy to setup and implement</li> +</ol> + +<p>Unfortunately this has had a pretty severe impact on the blogging community as a whole - no one controls their own blogs anymore. I remember when finding a new blog was an interesting and fun experience:</p> + +<ul> +<li>how did they decide to layout the page design?</li> +<li>what typefaces have they decided to use?</li> +<li>what back-end are they using?</li> +<li>how does it look and feel on mobile?</li> +</ul> + +<p>These custom self-hosted blogs inspired other developers and designers to create their own blogs or tweak current ones. In a way it was a small factor in pushing what we could do on the web further and further, as designers engaged in friendly competition trying to one-up each others&#8217; creations.</p> + +<p>I also believe this inspired people to write better content instead of opting for clickbait garbage in order to get &#8220;featured&#8221; or boosted promotion on the main blogging platform. But I don&#8217;t even think that&#8217;s the worst to come of this mass-migration to a singular blogging platform.</p> + +<p><strong>All2 blogs look identical now.</strong> I&#8217;m not sure if that was Medium&#8217;s intention, but either way I personally think it&#8217;s horrible. The individual personality of most design and development blogs has been completely stripped away.</p> + +<p>Maybe I&#8217;m just a salty designer with a narrow-minded, pessimistic view on where our blogging communities seem to be heading - or maybe I just have higher standards.</p> + +<h2 id="refs">Refs</h2> + +<p>1 the design world of the internet +2 by &#8220;All&#8221; I mean the majority</p></description> + <link>https://btxx.org/self-hosted-blogs</link> + <guid isPermaLink="false">https://btxx.org/self-hosted-blogs</guid> + <pubDate>Thu, 18 Oct 2018 00:00:00 +0000</pubDate> + </item> + <item> + <title>Schools Should Be Using Open Source Software</title> + <description><h1 id="schools-should-be-using-open-source-software">Schools Should Be Using Open Source Software</h1> + +<p>2022-05-30</p> + +<p>I firmly believe that proprietary software has no business in any school environment. Educational institutions lean heavily on Windows systems in the name of &#8220;security&#8221; or &#8220;easier platform management&#8221;. This approach forces students into using locked-down, closed sourced software applications.</p> + +<p>Word, Excel, PowerPoint. Why have these become the &#8220;standard&#8221; of text manipulation and processing?</p> + +<p>Photoshop. Illustrator. Why are these the first applications used for image editing and creation?</p> + +<p>Schools should only be allowed to use and teach with open source software. Starting students off down the path of vendor lock-in is only beneficial to the companies building those software systems.</p> + +<h2 id="the-internet">The Internet</h2> + +<p>I&#8217;m an older fart, so my elementary school experience only included computers near the tail-end of mid-school. As such, it was forgivable to have students locked-in to using Internet Explorer (which would have been version 4 or 5 during my time) since there wasn&#8217;t a great deal of competition.</p> + +<p>The major problem is that IE&#47;Edge is still the default and often times ONLY browser available in these classrooms. Again, I believe IT departments use the excuse of &#8220;security&#8221; to keep students on such dated browsers.</p> + +<p>Firefox, anyone? LibreWolf? Pale Moon?</p> + +<p>Any of these browsers can be easily managed and secured by school IT departments. It doesn&#8217;t HAVE to be IE&#8230;</p> + +<h2 id="reducing-hardware-cost">Reducing Hardware Cost</h2> + +<p>By shifting towards a purely &#8220;open&#8221; software stack, schools then have the ability to purchase older, cheaper hardware. Instead of running bloated spyware (Windows) IT departments could opt to use any one of the lightweight Linux distros available.</p> + +<p>This would reduce e-waste, save school districts significant amounts of money (no need to purchase Windows licenses or beefy hardware to be able to even <em>run</em> the operating system) all while still maintaining a high level of user&#47;network security.</p> + +<p>Heck, you could even have a fleet of Raspberry Pi devices as your main student &#8220;computers&#8221;. The cost of replacement also becomes less significant (these are children using these devices remember).</p> + +<h2 id="security">Security</h2> + +<p>I briefly mentioned user and network security above but figured it deserved its own section. A great deal of push-back comes from stubborn IT professionals[^0] determined to keep things running on Windows - since this is mostly what they are familiar with.</p> + +<p>My mother-in-law was an &#8220;at-risk&#8221; educator for most of her career. She explained to me that their IT department did a major switch over to use BRAND NEW Apple laptops for all the students just before her retirement. I can&#8217;t even begin to imagine the cost associated with this change. Not to mention the cost of repair for any of these devices when (not if) damaged.</p> + +<p>Who the hell is making these decisions? Even worse, who is approving them?! The school board had the opportunity to switch away from Windows devices and decided on Apple? Education reform is greatly needed[^1].</p> + +<h2 id="what-about-the-job-market">What About The &#8220;Job Market&#8221;</h2> + +<p>I&#8217;m not ignorant to the fact that many businesses in the real world require familiarity with some of these more popular closed source applications (Word, Excel). I don&#8217;t have a magic solution to instantly convert all applications used by the companies, but beginning the process in the education system is a solid start. Over time, the standard will <em>become</em> these open platforms. The initial change just needs to be made.</p> + +<p>It should also be mentioned that these open source applications carry over a lot of similar functionality to their closed-sourced counterparts. So it isn&#8217;t as if a user with extensive LibreOffice experience would be utterly lost while using Microsoft Word.</p> + +<h2 id="looking-under-the-hood">Looking Under the Hood</h2> + +<p>Another bonus in using fully open source software is the ability for the students to deep dive into the code itself. This can be a great resource for early programming fundamentals and beginner coding classes. Why not dissect the very program used in your other classes? Here&#8217;s an example of a possible class project: students could build out their own plugins or extensions for an existing application!</p> + +<h2 id="suggested-alternatives">Suggested Alternatives</h2> + +<p>So what are these &#8220;open source&#8221; alternatives? Check out my simple suggestions below:</p> + +<p>MS Office Suite ==&#62; LibreOffice Suite[^2]</p> + +<p>Photoshop ==&#62; GIMP</p> + +<p>Illustrator ==&#62; Inkscape</p> + +<p>IE&#47;Edge ==&#62; Firefox[^3]</p> + +<p>Coding IDE (optional) ===&#62; vim</p> + +<p>You could easily expand upon these options, but for most elementary school task these are more than enough.</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>Not <em>all</em> IT workers in the school system fall into this category. But most of the underlining structure prevents them from changing much.</li> +<li>At least in my country of Canada. I can&#8217;t speak for others.</li> +<li><code>groff</code> would be my personal suggestion instead, since it helps introduce children into the structure of basic file formatting and &#8220;programming&#8221;. I&#8217;ll go into greater details about this in another post.</li> +<li>As mentioned in the beginning of the post, I&#8217;d even suggest forks of Firefox -&#62; LibreWolf or Pale Moon (if possible)</li> +</ol></description> + <link>https://btxx.org/schools</link> + <guid isPermaLink="false">https://btxx.org/schools</guid> + <pubDate>Mon, 30 May 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Enabling Safari Extensions with the macOS Catalina Patcher</title> + <description><h1 id="enabling-safari-extensions-with-the-macos-catalina-patcher">Enabling Safari Extensions with the macOS Catalina Patcher</h1> + +<p>2021-09-23</p> + +<p>I have an old 2011 MacBook Air that is running the latest version of macOS Catalina thanks to the very wonderful <a href="http://dosdude1.com/catalina/">Catalina Patcher</a> by dosdude1. This project has made it possible for me to run and test some of the latest software from Apple - namely Safari 15.</p> + +<p>I ran into a small bug early on though – Safari extensions couldn’t be activated via the preferences menu. Luckily I discovered a very simple fix. My hope is this might help others (as small of a demographic that might be) who run into the same issue with the Catalina Patcher.</p> + +<ul> +<li>Close&#47;Quit Safari completely</li> +<li>Open the Finder and use the shortcut <code>⌘ Shift G</code></li> +<li>Paste the following to navigate to the proper folder: <code>~&#47;Library&#47;Containers&#47;com.apple.Safari&#47;Data&#47;Library&#47;Safari&#47;AppExtensions</code></li> +<li>Open the <code>Extensions.plist</code> in your favourite text editor (I’m a big fan of Panic&#8217;s Nova)</li> +<li>Below each extensions <code>&#60;dict&#62;</code> tag, add the following: <code>&#60;key&#62;Enabled&#60;&#47;key&#62;&#60;true&#47;&#62;</code></li> +<li>Save the file and relaunch Safari</li> +</ul> + +<p>Reference of what it should look like (AdBlock for this example):</p> + +<pre><code>&#60;key&#62;org.adblockplus...&#60;&#47;key&#62; + &#60;dict&#62; + &#60;key&#62;AddedDate&#60;&#47;key&#62; + &#60;date&#62;2021-09-23T14:00:47Z&#60;&#47;date&#62; + &#60;key&#62;Enabled&#60;&#47;key&#62; + &#60;true&#47;&#62; + &#60;key&#62;WebsiteAccess&#60;&#47;key&#62; + &#60;dict&#62; + &#60;key&#62;Allowed Domains&#60;&#47;key&#62; + &#60;array&#47;&#62; + &#60;key&#62;Has Injected Content&#60;&#47;key&#62; + &#60;true&#47;&#62; + &#60;key&#62;Level&#60;&#47;key&#62; + &#60;string&#62;All&#60;&#47;string&#62; + &#60;&#47;dict&#62; + &#60;&#47;dict&#62; +</code></pre> + +<p>After following those simple steps you should have working extensions in Safari. Have fun on your old, &#8220;unsupported&#8221; Apple devices!</p></description> + <link>https://btxx.org/safari-extensions-catalina-patcher</link> + <guid isPermaLink="false">https://btxx.org/safari-extensions-catalina-patcher</guid> + <pubDate>Thu, 23 Sep 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Dear Apple, Please Fix Safari's Default Dark Mode Link Color</title> + <description><h1 id="dear-apple-please-fix-safaris-default-dark-mode-link-color">Dear Apple, Please Fix Safari&#8217;s Default Dark Mode Link Color</h1> + +<p>2022-04-18</p> + +<p>Supporting dark mode on the modern web falls under the realm of accessibility and should not be ignored. It is important and helps keep the visual flow of your content to match that of your users&#8217; operating system UI. Not to mention, it&#8217;s easy to implement and keep consistent across browsers.</p> + +<h2 id="support-dark-mode-with-zero-css">Support Dark Mode with Zero CSS</h2> + +<p>A common practice is to include a <code>@media</code> query via CSS to target styling changes based on whether <code>dark-mode</code> is active. I tend to believe this is overkill for basic websites. Many developers aren&#8217;t aware of the HTML <code>color-scheme</code> parameter. (This website itself is using it in place of CSS media queries)</p> + +<h3 id="html-color-scheme">HTML &#8220;color-scheme&#8221;</h3> + +<p>Adding the following meta tag inside your document&#8217;s <code>head</code> element, you can enable dark mode instantly with zero configuration:</p> + +<pre><code>&#60;meta name="color-scheme" content="dark light" &#47;&#62; +</code></pre> + +<p>There are minor caveats:</p> + +<ol> +<li>You should not be specifying any <code>background</code> styling to your <code>body</code> or <code>html</code> elements</li> +<li>You should be not specifying any <code>color</code> styling across any of your readable content (paragraphs, headings, lists, blockquotes)</li> +</ol> + +<p>That&#8217;s it! In case you were curious, all major browsers support this color scheme meta tag: <a href="https://caniuse.com/mdn-html_elements_meta_name_color-scheme">https:&#47;&#47;caniuse.com&#47;mdn-html<em>elements</em>meta<em>name</em>color-scheme</a></p> + +<h2 id="but-wait-whats-this-about-safari">But Wait, What&#8217;s This About Safari?</h2> + +<p>Even though by adding the color-scheme meta tag we get ourselves good dark mode support across all browsers - Safari has one big oversight: link color. Take a look at the comparison screenshots below (based on one of my older articles). The first one is taken in Firefox, the second in Safari:</p> + +<p>Luckily for us there is a simple solution using minimal amounts of CSS[^1]:</p> + +<pre><code>@supports (color-scheme: dark light) { + @media screen and (prefers-color-scheme: dark) { + a:link {color: #9e9eff;} + a:visited {color: #d0adf0;} + a:active {color: red;} + } +} +</code></pre> + +<p>We are brute-forcing Safari to implement the same color HEX codes used by both Firefox and Chrome browsers. How a horrible accessibility oversight could happen within a company as large as Apple is astounding&#8230;</p> + +<h2 id="apple-fix-your-browsers-dark-mode">Apple: Fix Your Browser&#8217;s Dark Mode</h2> + +<p>My hope if that even one Safari design or development team member stumbles across this article and raises this ticket to the rest of the team[^2]. It&#8217;s an unbelievably easy fix and would save developers the headache of overriding these things ourselves.</p> + +<p>Thanks for reading and happy dark mode to you all!</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>Special thanks to <a href="https://seirdy.one/">Seirdy</a> for suggesting the use of :link and :active support. I recommend you check out his take on <a href="https://seirdy.one/2020/11/23/website-best-practices.html#dark-themes">dark mode &#47; theme support</a>.</li> +<li>This has an open ticket through <a href="https://bugs.webkit.org/show_bug.cgi?id=209851">Webkit Bugzilla</a></li> +</ol></description> + <link>https://btxx.org/safari-default-dark-mode</link> + <guid isPermaLink="false">https://btxx.org/safari-default-dark-mode</guid> + <pubDate>Mon, 18 Apr 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Installing Ruby with RVM on Alpine Linux</title> + <description><h1 id="installing-ruby-with-rvm-on-alpine-linux">Installing Ruby with RVM on Alpine Linux</h1> + +<p>2023-03-16</p> + +<p>For some on-going projects I need to switch to different versions of <code>ruby</code>. Although there exist many step-by-step instructions on installing and configuring <code>rvm</code> for most Linux distros, there aren&#8217;t many focused on Alpine &#8220;daily drivers&#8221;.</p> + +<p>So this post is more or less a helpful document for my future self. If it happens to help others then that&#8217;s an added bonus!</p> + +<h2 id="simple-setup">Simple Setup</h2> + +<p>Make sure you have the basic packages first:</p> + +<pre><code>apk update +apk add curl gcc gnupg gpg dirmngr procps musl-dev linux-headers zlib zlib-dev openssl openssl-dev libssl1.1 +</code></pre> + +<p>Next download the latest <code>stable</code> version of <code>rvm</code> from Github, unpack it, place it in the proper user directory (~&#47;.rvm) and install any required libs:</p> + +<pre><code>curl -sSL https:&#47;&#47;github.com&#47;rvm&#47;rvm&#47;tarball&#47;stable -o rvm-stable.tar.gz +echo &#39;export rvm_prefix="$HOME"&#39; &#62; ~&#47;.rvmrc +echo &#39;export rvm_path="$HOME&#47;.rvm"&#39; &#62;&#62; ~&#47;.rvmrc +mkdir rvm &#38;&#38; cd rvm +tar --strip-components=1 -xzf ..&#47;rvm-stable.tar.gz +.&#47;install --auto-dotfiles --autolibs=0 +</code></pre> + +<p>Now we can remove everything and properly link to <code>rvm</code>:</p> + +<pre><code>cd ..&#47; &#38;&#38; rm -rf rvm-stable stable.tar.gz rvm +source ~&#47;.rvm&#47;scripts&#47;rvm +</code></pre> + +<p>Now you can freely install any version of Ruby that you desire!</p> + +<pre><code>rvm install ruby-X.X.X +</code></pre></description> + <link>https://btxx.org/rvm</link> + <guid isPermaLink="false">https://btxx.org/rvm</guid> + <pubDate>Thu, 16 Mar 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>RSS Hacks With XSLT</title> + <description><h1 id="rss-hacks-with-xslt">RSS Hacks With XSLT</h1> + +<p>2022-05-23</p> + +<p>In my spare time I&#8217;ve been further tinkering (hopefully for the better) with my humble Shinobi Website[^0] script. The most recent update in <code>patch-1</code> came with a solid amount of QoL improvements. If you&#8217;re interested, I wrote about it on the official Shinobi blog[^1].</p> + +<p>The next feature I wanted to tackle was designing a custom layout for the XML files directly in the browser. I was greatly inspired to create something similar to Len Falken&#8217;s main directory listing[^2], since that blog was one of the original inspirations for Shinobi. I&#8217;m not able to copy what&#8217;s there though, since our feed builds are quite a bit different.</p> + +<p>I then proceeded to fall down the XSLT rabbit hole.</p> + +<h2 id="it-never-works-the-first-time-does-it">It Never Works the First Time, Does It?</h2> + +<p>Since the shinobi script generates valid RSS code by default, I didn&#8217;t want to mess around <em>too</em> much via XSLT and risk breaking validation. I also wanted to keep the &#8220;plain text&#8221; look-and-feel for consistency with the rest of the site, even though the XSLT template would render into standard HTML. Minor CSS styling and placing the content directly inside <code>pre</code> tags solved these issues.</p> + +<p>My first attempt was to use the available <code>sort</code> parameter (in XSL version 1.1+) targeting the <code>dc:date</code> type linked to the <code>pubDate</code> element:</p> + +<pre><code>&#60;xsl:sort select="pubDate" data-type="dc:date" order="descending"&#47;&#62; +&#60;!-- each individual post&#39;s content here --&#62; +</code></pre> + +<p>This did not work as intended. RSS 2.0 requires that the <code>pubDate</code> content is set to comply with the RFC-822 date-time[^3], which shinobi handles perfectly fine. The issue came from the XSL <code>sort</code> parameter not honoring this setting across all dates. My best guess is that it struggles to properly organize posts from their &#8220;month&#8221; parameter, so it sets the posts in order of date in what I refer to as &#8220;monthly sections&#8221;.</p> + +<p>If anyone knows why this failed to consistently order the posts via <code>pubDate</code>, please let me know using the comment link below. I&#8217;m far from an XSLT expert and might have overlooked something painfully obvious!</p> + +<h2 id="rss-hack-categories">RSS Hack: Categories</h2> + +<p>After spending far too much time reading over documentation, official manual pages and Stack Overflow comments I gave up on the <code>dc:date</code> sort. I realized I could sort the posts much easier if they were converted into a format similar to ISO 8601. But <code>pubDate</code> is required to be in RFC-822, so I couldn&#8217;t alter that in the final XML file.</p> + +<p>Then I remembered the <code>category</code> tag which shinobi does not utilize by default.</p> + +<p>First I needed to convert the RFC-822 formatted date (found on the first line of all blog post text files) and render it inside a <code>category</code> tag. This was simple enough:</p> + +<pre><code>$(date -j -f "%a, %d %b %Y" "$(head -n 1 $file)" +"%Y&#47;%m&#47;%d&#47;%u") +</code></pre> + +<p>In a nutshell, this converts the RFC-822 date into the format &#8220;2022&#47;05&#47;24&#47;2&#8221;. Simple numbers that can be sorted much easier by XSL. Now all that was needed was setting to <code>sort</code> parameter properly:</p> + +<pre><code>&#60;xsl:sort select="category" order="descending"&#47;&#62; +</code></pre> + +<p>Everything worked perfectly and the RSS was still valid!</p> + +<h3 id="patch-2-pending">Patch-2 Pending</h3> + +<p>I&#8217;ve ported these changes over to this blog to perform some &#8220;in the wild&#8221; testing. You can see the custom feed list in your supported browser by visiting:</p> + +<p><a href="https://pblog.bt.ht/feed.xml">https:&#47;&#47;pblog.bt.ht&#47;feed.xml</a></p> + +<p>As for the shinobi project itself, I have not merged these updates into the main master branch (at the time of publishing this article). They can be found sitting on patch-2[^4]. My plan is to get this merged ASAP once a little more real-world testing is finished and I can include a better &#8220;setup&#47;install&#8221; section for newcomers.</p> + +<h2 id="shinobi-updates">Shinobi Updates</h2> + +<p>If you&#8217;re interested in more updates and details about the shinobi project itself, feel free to sub to that specific feed below. This post was more focused on hacking RSS parameters that happened to involve shinobi, but in the future all updates specific to the project will be posted there:</p> + +<p><a href="https://shinobi.bt.ht/feed.xml">https:&#47;&#47;shinobi.bt.ht&#47;feed.xml</a></p> + +<h2 id="refs">Refs</h2> + +<ol> +<li><a href="https://shinobi.website/">https:&#47;&#47;shinobi.website&#47;</a></li> +<li><a href="https://shinobi.website/posts/patch-1.txt">https:&#47;&#47;shinobi.website&#47;posts&#47;patch-1.txt</a></li> +<li><a href="http://len.falken.directory/">http:&#47;&#47;len.falken.directory&#47;</a></li> +<li><a href="https://validator.w3.org/feed/docs/error/InvalidRFC2822Date.html">https:&#47;&#47;validator.w3.org&#47;feed&#47;docs&#47;error&#47;InvalidRFC2822Date.html</a></li> +<li><a href="https://git.sr.ht/~tdarb/shinobi-script/tree/patch-2">https:&#47;&#47;git.sr.ht&#47;~tdarb&#47;shinobi-script&#47;tree&#47;patch-2</a></li> +</ol></description> + <link>https://btxx.org/rss-hacks</link> + <guid isPermaLink="false">https://btxx.org/rss-hacks</guid> + <pubDate>Mon, 23 May 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Clickable Links Inside XML</title> + <description><h1 id="clickable-links-inside-xml">Clickable Links Inside XML</h1> + +<p>2022-06-20</p> + +<p>With the recent patch to the Shinobi Website project, I thought it would be best to share my experience implementing clickable links inside a rendered XML RSS file directly through a browser. This is made possible thanks to the awesome power of XSL formatting.</p> + +<p>Before we begin, it should be noted that both Safari for macOS and <em>all</em> browsers on iOS do NOT support the ability to render XML files. Instead you are required to download the feeds as static files to your system. Major bummmer. Hopefully this will be fixed in the near future.</p> + +<h2 id="the-code">The Code</h2> + +<p>Rendering your entry links as interactive URLs is fairly intuitive. You just need to:</p> + +<ol> +<li><p>Tell the file which tag it needs to render as the &#8220;a:link&#8221; element</p></li> +<li><p>Set the inner child attribute to &#8220;href&#8221;</p></li> +<li><p>Set the value of that attribute to use the entry&#8217;s <code>link</code> parameter</p> + +<p><a href="/xsl:attribute">&#47;xsl:attribute</a> + +<a href="/xsl:element">&#47;xsl:element</a></p></li> +</ol> + +<p>In the instance above I am rendering the entry title as a clickable element which will direct users to the specific entry URL. You could simply render the full entry link URL text as the interactive link if you prefer. Something like:</p> + +<pre><code>&#60;xsl:element name="a"&#62; + &#60;xsl:attribute name="href"&#62; + &#60;xsl:value-of select="link"&#47;&#62; + &#60;&#47;xsl:attribute&#62; + &#60;pre&#62;&#60;xsl:value-of select="link"&#47;&#62;&#60;&#47;pre&#62; +&#60;&#47;xsl:element&#62; +</code></pre> + +<h2 id="live-example">Live Example</h2> + +<p>In a supported browser, you can see the code in action here: <a href="https://pblog.bt.ht/feed.xml">https:&#47;&#47;pblog.bt.ht&#47;feed.xml</a></p> + +<p>That&#8217;s really all there is to it.</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li><a href="https://shinobi.bt.ht/posts/patch-3.txt">https:&#47;&#47;shinobi.bt.ht&#47;posts&#47;patch-3.txt</a></li> +</ol></description> + <link>https://btxx.org/rss-click</link> + <guid isPermaLink="false">https://btxx.org/rss-click</guid> + <pubDate>Mon, 20 Jun 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Quick and Dirty Theme Switcher</title> + <description><h1 id="quick-and-dirty-theme-switcher">Quick and Dirty Theme Switcher</h1> + +<p>2020-06-04</p> + +<p><strong>Update</strong>: This article is no longer relevant since my blog design has changed. I&#8217;m keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site.</p> + +<hr/> + +<p><em>I recently added a fairly straightforward color scheme (theme) switcher</em> to my personal website. You can toggle this simple color switcher in the footer of the site to see it in action. In case anyone else had the desire to add such functionality to their own sites&#47;projects, I figured I&#8217;d write up a quick post explaining how to do so. Let&#8217;s get into it.</p> + +<h2 id="the-html">The HTML</h2> + +<p>First we need to include the &#8220;buttons&#8221; that will trigger the theme to switch based on which one is selected. (Note: you could always render these as <code>options</code> in a <code>select</code> element if you preferred that method)</p> + +<pre><code>&#60;div class="color-select"&#62; + &#60;button onclick="toggleDefaultTheme()"&#62;&#60;&#47;button&#62; + &#60;button onclick="toggleSecondTheme()"&#62;&#60;&#47;button&#62; + &#60;button onclick="toggleThirdTheme()"&#62;&#60;&#47;button&#62; +&#60;&#47;div&#62; +</code></pre> + +<p>That&#8217;s it! Don&#8217;t worry too much about the <code>onclick</code> parameter right now, we&#8217;ll come back to that when adding our JavaScript. The only remaining item is adding a default theme class to our <code>html</code> element, like so:</p> + +<pre><code>&#60;html class="theme-default"&#62; +</code></pre> + +<h2 id="the-css">The CSS</h2> + +<p>Next we need to style both the <code>color-select</code> buttons, along with the custom color schemes that will alter the entire website. We will start with the color schemes.</p> + +<p>For these themes to swap seamlessly between each other, we will be setting our altering color sets as CSS variables:</p> + +<pre><code>.theme-default { +--accent-color: #72f1b8; +--font-color: #34294f; +} + +.theme-second { + --accent-color: #FFBF00; + --font-color: #59316B; +} + +.theme-third { + --accent-color: #d9455f; + --font-color: #303960; +} + +body { + background-color: var(--accent-color); + color: var(--font-color); +} +</code></pre> + +<p>Finally, we style the user-facing color swatches:</p> + +<pre><code>.color-select button { + -moz-appearance: none; + appearance: none; + border: 2px solid; + border-radius: 9999px; + cursor: pointer; + height: 20px; + margin: 0 0.8rem 0.8rem 0; + outline: 0; + width: 20px; +} + +&#47;* Style each swatch to match the corresponding theme *&#47; +.color-select button:nth-child(1) { background: #72f1b8; border-color: #34294f; } +.color-select button:nth-child(2) { background: #FFBF00; border-color: #59316B; } +.color-select button:nth-child(3) { background: #d9455f; border-color: #303960; } +</code></pre> + +<h2 id="the-javascript">The JavaScript</h2> + +<p>We need to have each color swatch button trigger it&#8217;s corresponding theme and swap out the <code>theme-default</code> class that we have originally attached to the main <code>html</code> element. We also need to store what the user has selected into <code>localStorage</code>, so their choice persists when reloading or navigating to other pages.</p> + +<pre><code>&#47;&#47; Set a given theme&#47;color-scheme +function setTheme(themeName) { + localStorage.setItem(&#39;theme&#39;, themeName); + document.documentElement.className = themeName; +} + +&#47;&#47; Toggle between color themes +function toggleDefaultTheme() { + if (localStorage.getItem(&#39;theme&#39;) !== &#39;theme-default&#39;){ + setTheme(&#39;theme-default&#39;); + } +} +function toggleSecondTheme() { + if (localStorage.getItem(&#39;theme&#39;) !== &#39;theme-second&#39;){ + setTheme(&#39;theme-second&#39;); + } +} +function toggleThirdTheme() { + if (localStorage.getItem(&#39;theme&#39;) !== &#39;theme-third&#39;){ + setTheme(&#39;theme-third&#39;); + } +} + +&#47;&#47; Immediately set the theme on initial load +(function () { + if (localStorage.getItem(&#39;theme&#39;) === &#39;theme-default&#39;) { + setTheme(&#39;theme-default&#39;); + } + if (localStorage.getItem(&#39;theme&#39;) === &#39;theme-second&#39;) { + setTheme(&#39;theme-second&#39;); + } + if (localStorage.getItem(&#39;theme&#39;) === &#39;theme-third&#39;) { + setTheme(&#39;theme-third&#39;); + } +})(); +</code></pre> + +<p>And that&#8217;s it! Now it just depends on how custom you want each individual theme style to be. The possibilities are endless!</p> + +<h2 id="extra-improvements">Extra Improvements</h2> + +<p>You could improve this concept even further hiding the <code>color-select</code> item if the user has JavaScript disabled. For my needs, I felt it was a fine trade-off to keep the non-functioning color swatch pickers if JavaScript was disabled. However, your project&#47;site might need better fallbacks.</p></description> + <link>https://btxx.org/quick-dirty-theme-switcher</link> + <guid isPermaLink="false">https://btxx.org/quick-dirty-theme-switcher</guid> + <pubDate>Thu, 04 Jun 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Pure CSS Simple Dropdown Plugin</title> + <description><h1 id="pure-css-simple-dropdown-plugin">Pure CSS Simple Dropdown Plugin</h1> + +<p>2018-09-20</p> + +<p>I find myself blowing away default browser <code>select</code> styling and implementing my own custom dropdowns far more often than I&#8217;d like. So, I recently created a very simple and clean component using just pure CSS.</p> + +<p>Check out the CodePen below and feel free to morph it as you see fit for your own projects!</p> + +<p><img src="/public/images/plug-play.png" alt="Three dropdown elements styled differently" /></p> + +<p><a href="https://codepen.io/bradleytaunt/pen/rZPzWy/">Live CodePen Example</a></p></description> + <link>https://btxx.org/pure-css-simple-dropdown-plugin</link> + <guid isPermaLink="false">https://btxx.org/pure-css-simple-dropdown-plugin</guid> + <pubDate>Thu, 20 Sep 2018 00:00:00 +0000</pubDate> + </item> + <item> + <title>Publishing Simple Books With Jekyll</title> + <description><h1 id="publishing-simple-books-with-jekyll">Publishing Simple Books With Jekyll</h1> + +<p>2019-06-20</p> + +<p>When thinking about writing, designing and ultimately publishing an ebook, most people don&#8217;t think of using a static site generator. Having products like Amazon Publishing, LaTeX or even Microsoft Word available, why should you use Jekyll?</p> + +<p>Two reasons:</p> + +<ul> +<li>extremely easy to use</li> +<li>total customization</li> +</ul> + +<p>I know these same arguments could be made towards the other options mentioned above, but I&#8217;m biased towards Jekyll since I love the simplicity of HTML and CSS. Hopefully, after reading this post, you will feel the same as well!</p> + +<h2 id="no-developer-skills-needed">No developer skills needed</h2> + +<p>You won&#8217;t need any hardcore development skills or in-depth knowledge of Jekyll to get the most out of this publishing technique. The theme (<a href="https://github.com/henrythemes/jekyll-book-theme">Jekyll Book Theme</a>) will allow you to focus on your book&#8217;s content rather than wrestling with typography and page layouts. A basic command line script will perform all the heavy lifting for us at the end.</p> + +<h2 id="what-are-we-creating">What are we creating?</h2> + +<p>You can see the demo of the <em>online</em> and PDF versions of the book below: </p> + +<ul> +<li><a href="http://henrythemes.github.io/jekyll-book-theme/">Jekyll Book Theme (Website)</a></li> +<li><a href="/public/jekyll-book-theme-sample.pdf">Jekyll Book Theme (PDF Sample)</a></li> +</ul> + +<p>So without wasting anymore time, let&#8217;s get started!</p> + +<h2 id="table-of-contents">Table of Contents</h2> + +<ol> +<li><a href="#setup-jekyll">Setup Jekyll</a></li> +<li><a href="#book-theme">Using the &#8220;Book&#8221; Jekyll Theme</a></li> +<li><a href="#chapter-collections">Writing Chapters</a></li> +<li><a href="#html-to-pdf">HTML to PDF</a></li> +<li><a href="#closing-thoughts">Closing Thoughts</a></li> +</ol> + +<p>Before we can really do anything else, you will need to install and setup Jekyll. The best way to do so is by following the instructions on the official Jekyll website:</p> + +<ul> +<li><a href="https://jekyllrb.com/docs/installation/">Installing Jekyll</a></li> +</ul> + +<p>Run through the simple step-by-step installation instructions based on your operating system.</p> + +<h3 id="basic-requirements">Basic requirements</h3> + +<ul> +<li>Ruby version 2.4.0 or above</li> +<li>RubyGems</li> +<li>GCC and Make (in case your system doesn’t have them installed)</li> +</ul> + +<p>The example we will be referencing in this post is the open source Jekyll theme called &#8220;Jekyll Book Theme&#8221;. This theme as been designed and optimized for publishing ebooks with Jekyll.</p> + +<p>Simply following the instructions on the main README page of the <a href="https://github.com/henrythemes/jekyll-book-theme">jekyll-book-theme repo</a>.</p> + +<p><strong>Important</strong>: Take the time to edit the <code>title</code>, and <code>author</code> properties in the <code>_config.yml</code> file in the root directory. Make sure these reflect your own book&#8217;s content.</p> + +<p>That&#8217;s it. Now let&#8217;s tell Jekyll how we want it to format our chapters.</p> + +<p>By default, Jekyll will look for latest posts in the <code>_post</code> directory. This is useful for blogs and basic static websites - but not for us. We want chapters.</p> + +<h3 id="using-custom-collections">Using custom collections</h3> + +<p>Thankfully, Jekyll is flexible and allows us to set our own custom &#8220;collections&#8221;. Collections are ways to group related content together for easier use dynamically. Our plan is to setup a collection that will house our chapter markdown files in numeric order. You can see this in the &#8220;book&#8221; template top level directory. It should look like the following:</p> + +<ul> +<li><code>_chapters</code> + +<ul> +<li><code>01.md</code></li> +<li><code>02.md</code></li> +<li><code>03.md</code></li> +<li><code>etc..</code></li> +</ul></li> +</ul> + +<h3 id="but-the-template-already-has-this-setup">But the template already has this setup</h3> + +<p>By default the Jekyll Book Theme template has this chapters collection implemented and working as intended. The reason I broke it down step-by-step is so that you can have some better understanding about what is happening &#8220;under the hood&#8221;. </p> + +<p>Teach a person to fish and all that jazz.</p> + +<p>Now all you need to do is break your chapters down into their own numbered markdown files inside <code>_chapters</code>.</p> + +<p><img src="/public/images/publishing-with-jekyll.webp" alt="Publishing with Jekyll" /></p> + +<p>Before you can convert your digital book &#8220;website&#8221;, you need to install the <code>wkhtmltopdf</code> package. Download and follow the instructions below:</p> + +<ul> +<li><a href="https://wkhtmltopdf.org/">wkhtmltopdf</a></li> +</ul> + +<h3 id="command-line-conversion">Command line conversion</h3> + +<p>In your terminal, navigate inside the <code>_site</code> folder of your jekyll build and then run the following command:</p> + +<pre><code>for f in *.html; do wkhtmltopdf -g -s Letter --no-background "$f" "${f&#47;_*_&#47;_}.pdf";done +</code></pre> + +<p>Shortly after you should have a generated PDF file inside the <code>_site</code> folder - most likely named <code>index.html.pdf</code>. That&#8217;s it! Enjoy your fully formatted PDF version of your book!</p> + +<p>There are a good amount of pros and cons to this approach of &#8220;publishing&#8221; PDF versions of your book. Since I&#8217;m a sucker for <em>good</em> and <em>bad</em> bullet lists, let&#8217;s do just that:</p> + +<p><strong>The Good</strong></p> + +<ul> +<li>Online version and PDF versions share same styling (keeps things consistent)</li> +<li>Chapters are written in <code>markdown</code> (increased flexibility of writing apps etc.)</li> +<li>Very fast and streamlined build process</li> +<li>PDF format renders out the chapter headers for built-in navigation</li> +</ul> + +<p><strong>The Bad</strong></p> + +<ul> +<li>Chapters are spit out as one long, single page (I&#8217;m sure this could be rectified with some custom work)</li> +<li>More suited for short stories, papers, essay articles (not so great for epic novels)</li> +<li>I&#8217;m sure there are other cons I am missing?</li> +</ul> + +<p>In the end, using something like LaTeX would certainly grant the user more flexibility in design and layout of the final &#8220;print&#8221; PDF product - but I&#8217;m a sucker for using Jekyll when I can. </p> + +<p>Please let me know if you decide to use this method and end up publishing your own book 😀 I would love to check it out!</p></description> + <link>https://btxx.org/publish-with-jekyll</link> + <guid isPermaLink="false">https://btxx.org/publish-with-jekyll</guid> + <pubDate>Thu, 20 Jun 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>PS4 Download UI with Pure CSS</title> + <description><h1 id="ps4-download-ui-with-pure-css">PS4 Download UI with Pure CSS</h1> + +<p>2021-06-20</p> + +<p>Overall, I&#8217;m fairly impressed with the user interface design of Sony&#8217;s PS4 system OS. It&#8217;s minimal and keeps the content front and center. Even with it&#8217;s sometimes spotty performance hiccups, I&#8217;ve come to enjoy interacting with it.</p> + +<p>One of the key UI items I&#8217;ve always been a fan of is the download progress view under the <code>Notifications</code> settings. So I figured I&#8217;d try my hand at recreating this with pure CSS. Here is the final result:</p> + +<p><img src="/public/images/ps4-loading.png" alt="PS4 loading screen bar" /></p> + +<p><a href="https://codepen.io/bradleytaunt/pen/qBroORG">Live CodePen Example</a></p> + +<p>Although I&#8217;ve added some of my own improvements (typography spacing, tweaks to the progress bar animation) - the concept it still pretty close to the original.</p> + +<p>But enough chit-chat, let&#8217;s walkthrough how to make it!</p> + +<h2 id="the-html">The HTML</h2> + +<p>As with most of my demos, the HTML is very minimal and straightforward. The PS4 system OS download view needs to show the following:</p> + +<ol> +<li>The game&#8217;s title</li> +<li>Full game size, amount downloaded and time remaining</li> +<li>Visual progress bar</li> +</ol> + +<p>So we will place the game&#8217;s title inside our <code>h2</code> with a class of <code>title</code> (shocking, I know). The details about game size, downloaded amount and time remaining gets placed under a parent <code>div</code> with an accompanying <code>details</code> class. Finally, we create our progress bar by including a parent <code>div</code> with a class of <code>progress</code> that contains a child <code>div</code> with a class of <code>inner-progress</code>.</p> + +<p>Pretty clean and easy to understand.</p> + +<pre><code>&#60;div class="wrapper"&#62; + &#60;img src="https:&#47;&#47;upload.wikimedia.org&#47;wikipedia&#47;commons&#47;0&#47;00&#47;PlayStation_logo.svg" alt="PS4" class="logo"&#62; + &#60;h2 class="title"&#62;Detroit: Become Human&#60;&#47;h2&#62; + &#60;div class="details"&#62; + &#60;p&#62;Update File&#60;&#47;p&#62; + &#60;p&#62;13.45&#47;17.50 GB (21 Minutes Left)&#60;&#47;p&#62; + &#60;&#47;div&#62; + &#60;div class="progress"&#62; + &#60;div class="inner-progress"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<h2 id="the-css">The CSS</h2> + +<p>Now it&#8217;s time to utilize all those classes in the HTML above to craft our PS4 UI recreation. I&#8217;ll break this section down into digestible chunks to avoid overwhelming you by vomiting out a bunch of CSS spaghetti.</p> + +<p>First we&#8217;ll add a bunch of QOL improvements to help better showcase the demo (adding custom fonts, center content etc.).</p> + +<p>This part is completely <em>optional</em>:</p> + +<pre><code>&#47;* Import fonts *&#47; +@import url(&#39;https:&#47;&#47;fonts.googleapis.com&#47;css2?family=Source+Sans+Pro:wght@200;400&#38;display=swap&#39;); + +&#47;* Gradient background styling, height overrides *&#47; +body { + background: linear-gradient(#226AB6 0%, #144E8A 100%) no-repeat; + color: white; + display: block; + font-family: &#39;Source Sans Pro&#39;, sans-serif; + font-weight: 200; + height: 100vh; +} + +&#47;* Wrapper to center content *&#47; +.wrapper { + margin: 0 auto; + max-width: 800px; + padding: 4rem 0 0; +} + +&#47;* Optional PS4 logo *&#47; +.logo { + display: block; + filter: invert(1); + margin: 0 0 2rem 0; + opacity: 0.5; + width: 60px; +} +</code></pre> + +<p>Now for the styling that <em>actually matters</em>. First we will style the game&#8217;s title and accompanying details (<code>flexbox</code> to the rescue again!):</p> + +<pre><code>h2.title { + font-weight: 400; + margin: 0; +} + +.details { + display: flex; + justify-content: space-between; + margin: 0.2rem 0 0; +} +.details p { + margin: 0; +} +</code></pre> + +<p>Not a whole lot of code to get things looking proper, eh? Next we move on to the progress bar. This is <em>slightly</em> more interesting since we are going to utilize the <code>before</code> pseudo element - which sounds more complex than it actually is. Pay close attention to the pseudo element and how it calls the <code>progress-bar-shine</code> animation - more on that later.</p> + +<pre><code>.progress { + background: #226AB6; + border: 1px solid white; + height: 15px; + margin: 2rem 0 0; + position: relative; + width: 100%; +} +.progress:before { + animation: progress-bar-shine 2.5s infinite; + background: linear-gradient(to left, white 0%, transparent 100%); + border-radius: 10px; + content:&#39;&#39;; + filter: blur(8px); + height: 100%; + opacity: 0.8; + position: absolute; + transform:translateX(0); + width: 50px; +} +.inner-progress { + background: white; + height: 100%; + opacity: 0.6; + width: 450px; +} +</code></pre> + +<p>Almost finished! We just need to animate that <code>before</code> pseudo element with a simple <code>keyframes</code> at-rule:</p> + +<pre><code>@keyframes progress-bar-shine { + to { + transform:translateX(450px); + opacity:0; + } +} +</code></pre> + +<h2 id="wrapping-up">Wrapping Up</h2> + +<p>Although far from perfect, this experiment still explores what can be created (or in this case, <em>re</em>created) in the browser using just pure CSS. Remember, you don&#8217;t have to reach for JavaScript just because you can!</p></description> + <link>https://btxx.org/ps4-download-ui</link> + <guid isPermaLink="false">https://btxx.org/ps4-download-ui</guid> + <pubDate>Sun, 20 Jun 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Proper UI Hierarchy</title> + <description><h1 id="proper-ui-hierarchy">Proper UI Hierarchy</h1> + +<p>2019-02-05</p> + +<p>I often feel like an old man when I complain about flat design and how designers these days have lost (or willfully forgotten) the skill to create accessible UIs with proper visual hierarchy. A skill which at it&#8217;s core seems so simple - yet is overlooked in almost every current modern interface.</p> + +<p>I&#8217;m unable to pinpoint the exact reason why designers swapped out depth, hierarchical layouts and accessibility for muted colors, abstract imagery, illegible typography, and unimaginative flat designs.</p> + +<p>But then again, maybe I&#8217;m just a design-dinosaur of a time long forgotten. Maybe I need to adapt and move with the times. Or maybe the current design trends are just lazy.</p> + +<p>I&#8217;m pretty sure it&#8217;s lazy design trends.</p> + +<h2 id="stop-complaining-and-do-something">Stop complaining and do something</h2> + +<p>As an example, I&#8217;m going to breakdown the process of improving the overall design on a set of &#8220;flat&#8221; button elements.</p> + +<p>Hopefully this demo article inspires even one designer to rethink their method when approaching UI design and push away from what is currently accepted as the &#8220;correct way to design UI&#8221;.</p> + +<p>And one final note before we deep dive into this demo: </p> + +<p>The statement that flat design is inherently worse than it&#8217;s predecessor <strong>is not subjective</strong>. By stripping away the visual cues that help users distinguish between interface elements you are purposely making a worse experience for them. Designers need to stop designing for other designers.</p> + +<h2 id="what-we-will-be-designing">What we will be designing</h2> + +<p>In this demo we will be improving the default flat design inspired button layout of the following:</p> + +<p><img src="/public/images/proper-ui.png" alt="Proper UI buttons, blue and green" /></p> + +<p><a href="https://codepen.io/bradleytaunt/pen/yLXJmdy">Live CodePen Example</a></p> + +<hr/> + +<h2 id="designing-the-skeleton">Designing the skeleton</h2> + +<p>This will be our basic HTML structure, along with it&#8217;s default styling (based on today&#8217;s UI standards):</p> + +<h3 id="the-html">The HTML</h3> + +<pre><code>&#60;div class="buttons-container"&#62; + &#60;button&#62;Sign Up&#60;&#47;button&#62; + &#60;button&#62;Log in&#60;&#47;button&#62; +&#60;&#47;div&#62; +</code></pre> + +<h3 id="the-css">The CSS</h3> + +<pre><code>&#47;* Parent container for the buttons *&#47; +.buttons-container { + background: #E0E9EE; + border-radius: 5px; + display: flex; + padding: 20px; + margin: 0 auto; + max-width: 300px; + width: 100%; +} + +&#47;*Shared button styles *&#47; +button { + appearance: none; + border: 0; + border-radius: 5px; + color: #fff; + cursor: pointer; + display: inline-block; + font-size: 14px; + font-weight: bold; + padding: 15px 20px; + width: 50%; +} + +&#47;* Sign up button *&#47; +button:first-child { + background: #2FBC3D; + margin-right: 10px; +} + +&#47;* Log in button *&#47; +button:last-child { + background: #459BCF; +} +</code></pre> + +<h2 id="adding-simple-improvements">Adding simple improvements</h2> + +<p>Gradients (not solely on their own mind you) within UI systems were initially used to help humans make connections with their analog counterparts. Something like toggles or switches matching those found in the real world, allowed users to mentally connect what that element&#8217;s function did almost instantly. </p> + +<p>Be warned not to confuse this with skeuomorphic design - an element sharing similar qualities as it&#8217;s analog sibling does not instantly make it so.</p> + +<p>If you ever run into a designer who rolls their eyes or scoffs at you for proposing the use of something such as gradients (in a tactful way, of course) it is safe to assume they have been brainwashed by the modern design hive-mind.</p> + +<p>To disregard the use of gradients simply because the belief is &#8220;gradients are bad&#8221; is idiotic. Worse still is to do so based on the belief that &#8220;gradients aren&#8217;t <em>in</em> right now&#8221;. As a designer, your job is to design a beautiful and <em>usable</em> product - not win high-fives among your peers. &#47;end rant.</p> + +<h3 id="adding-subtle-gradients">Adding subtle gradients</h3> + +<p>When gradients are implemented properly, most users won&#8217;t even be aware of their presence. The difference in color (specifically on buttons in this example) helps give the illusion of a light source in the interface, which designers can use to their advantage (ie. pull more attention to elements by &#8220;lifting&#8221; them forward on the page).</p> + +<h3 id="the-subtly-improved-css">The subtly improved CSS</h3> + +<pre><code>&#47;* Sign up button *&#47; +button:first-child { + background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%); +} + +&#47;* Log in button *&#47; +button:last-child { + background-image: linear-gradient(-180deg, #489FD2 0%, #0A6DAC 100%); +} +</code></pre> + +<h2 id="more-depth-light">More depth &#38; light</h2> + +<p>With our subtle gradients we are closer to creating a solid contrast between interactive elements, but we can improve this even further. By adding some more depth with a harder light source and more pronounced outlines, we allow the button elements to stand out on their own more strongly.</p> + +<p>This is fairly easy to accomplish with CSS using the very basic <code>box-shadow</code>, <code>text-shadow</code> and <code>border</code> properties:</p> + +<pre><code>&#47;* Parent container *&#47; +.buttons-container { + background-image: linear-gradient(0deg, #BBC6CD 3%, #E2EBF0 100%); + border: 1px solid #8D8D8D; + box-shadow: 0 2px 4px 0 rgba(42,42,42,0.40), inset 0 1px 3px 0 rgba(255,255,255,0.50); +} + +&#47;* Shared button styling with text-shadows *&#47; +.buttons-container button { + text-shadow: 0 2px 4px rgba(0,0,0,0.30); +} + +&#47;* Sign up button *&#47; +.buttons-container button:first-child { + background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%); + border: 1px solid #0C6B16; + box-shadow: 0 1px 5px 0 rgba(9,116,21,0.50), inset 0 -1px 6px 0 rgba(0,0,0,0.20), inset 0 1px 0 0 rgba(255,255,255,0.50), inset 0 2px 4px 0 rgba(255,255,255,0.50); +} + +&#47;* Log in button *&#47; +.buttons-container button:last-child { + background-image: linear-gradient(-180deg, #489FD2 0%, #0A6DAC 100%); + border: 1px solid #0A486E; + box-shadow: 0 1px 5px 0 rgba(9,85,133,0.50), inset 0 -1px 6px 0 rgba(0,0,0,0.20), inset 0 1px 0 0 rgba(255,255,255,0.50), inset 0 2px 4px 0 rgba(255,255,255,0.50); +} +</code></pre> + +<p>For easy reference, here is the CSS styling in it&#8217;s entirety:</p> + +<pre><code>&#47;* Parent container *&#47; +.buttons-container { + background-image: linear-gradient(0deg, #BBC6CD 3%, #E2EBF0 100%); + border-radius: 5px; + border: 1px solid #8D8D8D; + box-shadow: 0 2px 4px 0 rgba(42,42,42,0.40), inset 0 1px 3px 0 rgba(255,255,255,0.50); + display: flex; + padding: 20px; + margin: 0 auto; + max-width: 300px; + width: 100%; +} + +&#47;* Shared button styling *&#47; +button { + appearance: none; + border: 0; + border-radius: 5px; + color: #fff; + cursor: pointer; + display: inline-block; + font-size: 14px; + font-weight: bold; + padding: 15px 20px; + text-shadow: 0 2px 4px rgba(0,0,0,0.30); + width: 50%; +} + +&#47;* Sign up button *&#47; +button:first-child { + background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%); + border: 1px solid #0C6B16; + box-shadow: 0 1px 5px 0 rgba(9,116,21,0.50), inset 0 1px 0 0 rgba(255,255,255,0.50), inset 0 2px 4px 0 rgba(255,255,255,0.50); + margin-right: 10px; +} + +&#47;* Log in button *&#47; +button:last-child { + background-image: linear-gradient(-180deg, #489FD2 0%, #0A6DAC 100%); + border: 1px solid #0A486E; + box-shadow: 0 1px 5px 0 rgba(9,85,133,0.50), inset 0 1px 0 0 rgba(255,255,255,0.50), inset 0 2px 4px 0 rgba(255,255,255,0.50); +} +</code></pre> + +<h2 id="going-even-further-with-this-ui">Going even further with this UI</h2> + +<p>This demo article only showcases how to improve on a basic button UI structure with a focus on proper hierarchy between elements.</p> + +<p>Once completely developed, these element should support all interactive states (<code>hover</code>, <code>active</code>, <code>disabled</code>) and animations to make for a more engaging experience.</p></description> + <link>https://btxx.org/proper-ui-hierarchy</link> + <guid isPermaLink="false">https://btxx.org/proper-ui-hierarchy</guid> + <pubDate>Tue, 05 Feb 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>My Cheapskate Commenting System</title> + <description><h1 id="my-cheapskate-commenting-system">My Cheapskate Commenting System</h1> + +<p>2022-02-03</p> + +<p>My blog now has comments! Well, <em>kind of</em>&#8230;</p> + +<p>I went down a two day long rabbit-hole trying to find the best solution for implementing comments on my static website (generated via Jekyll FYI). There are a ton of options out there and many open source models that allow you to spin up your own instance with something like DigitalOcean or AWS. But I&#8217;m a cheap bastard. I refuse to spend $5&#47;month on a blog mostly used for fun and one that I have zero incentive to &#8220;monetize&#8221;.</p> + +<p>So, what <em>free</em> options did this old miser have left to chose from? To my surprise, there were two solid options that initially caught my eye! Let&#8217;s take a look then, shall we?</p> + +<h2 id="remarkbox">Remarkbox</h2> + +<p>Overall I don&#8217;t have many bad things to say about <a href="https://www.remarkbox.com">Remarkbox</a>. It looks nice, is easy to implement and runs a &#8220;pay what you can&#8221; pricing model. What more could you ask for?! The major issue (for me, <em>personally</em>) is precisely <strong>that</strong>; the free model. This makes it difficult for me to trust 100% that this system will still be around in 3-4 years. Now I know - even paid systems can shutdown unexpectedly, but I find free tier options end up shutting their doors sooner. There is an option to self-host Remarkbox, but that requires a yearly license and also comes back to the point I made about not wanting to pay for hosting&#8230;</p> + +<h2 id="utterances-github-based">Utterances (Github-based)</h2> + +<p>The other major option was <a href="https://utteranc.es">Utterances</a>. This system was almost the winner due to it&#8217;s pretty great feature set:</p> + +<ol> +<li>Open source</li> +<li>No tracking, no ads</li> +<li>All data stored in GitHub issues</li> +<li>Free!</li> +</ol> + +<p>But take a look above at point number three. The fact that readers wishing to leave a comment are <strong>required to have a Github account</strong>. For me, this is a non-starter. I don&#8217;t want to force my audience to sign up for or sign in to <em>any</em> account just to leave a simple comment on my humble blog. Considering a number of my readers are part of the FOSS community, this just seemed like a bad fit.</p> + +<h2 id="finding-inspiration">Finding Inspiration</h2> + +<p>I absolutely love the <a href="https://solar.lowtechmagazine.com">solar.lowtechmagazine.com</a> website (both for it&#8217;s content and design) and indirectly found my comment system inspiration there. Okay let&#8217;s be honest, I completely stole their commenting system &#8220;concept&#8221;. Imitation is the sincerest form of flattery, right?</p> + +<h2 id="my-comment-system-is">My Comment System is&#8230;</h2> + +<p>E-mail. It&#8217;s just <strong>plain e-mail</strong>.</p> + +<p>I&#8217;ve setup a basic <code>comment-prompt.html</code> in my <code>_includes</code> folder that contains a <code>mailto</code> action button[^1]:</p> + +<pre><code>&#60;a href="mailto:myemail.com?subject=RE: { { page.title | uri_escape } }"&#62; + &#60;button&#62;Comment via email&#60;&#47;button&#62; +&#60;&#47;a&#62; +</code></pre> + +<p>This include template is placed at the bottom of every article automatically. Then, that action pulls in the article&#8217;s title as the e-mail subject line in the user&#8217;s default mailing app. That&#8217;s it.</p> + +<h2 id="pros">Pros</h2> + +<ul> +<li>No third party application needed</li> +<li>Privacy focused</li> +<li>More direct interaction with my audience&#47;readers</li> +<li>Builds a much more close-knit community</li> +<li>Completely free!</li> +</ul> + +<h2 id="cons">Cons</h2> + +<ul> +<li>Must be manually curated and posted</li> +<li>No notifications</li> +<li>No &#8220;built-in&#8221; reply functionality</li> +<li>Has the potential to become unwieldy&#8230;</li> +</ul> + +<h2 id="fun-experiment">Fun Experiment</h2> + +<p>I figure either way, this will be an interesting experiment. I don&#8217;t know my audience size (since I don&#8217;t use any type of tracking) but I assume it&#8217;s very small. Those willing to write me a personal e-mail in order to share their thoughts on my stupid little blog probably have something interesting to say. At least I hope so. </p> + +<p>Let&#8217;s see how this thing goes&#8230;</p></description> + <link>https://btxx.org/poormans-comment-system</link> + <guid isPermaLink="false">https://btxx.org/poormans-comment-system</guid> + <pubDate>Thu, 03 Feb 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Poor Man's CSS Full-Bleed Layout</title> + <description><h1 id="poor-mans-css-full-bleed-layout">Poor Man&#8217;s CSS Full-Bleed Layout</h1> + +<p>2020-10-07</p> + +<p>I recently came across the very well written and interesting article, <a href="https://joshwcomeau.com/css/full-bleed/">Full-Bleed Layout Using CSS Grid</a>, while browsing my daily designer feeds. I won&#8217;t go into the post&#8217;s specifics here (I recommend you read the article for yourself) but it details how to render full-bleed element effects utilizing the CSS <code>grid</code> property.</p> + +<p>While the approach in the article works perfectly fine, I thought to myself, &#8220;Is there not a simpler, more backwards compatible way to do this?&#8221;. Indeed there is.</p> + +<p><strong>Don&#8217;t care about the tutorial?</strong> <a href="#live-demo">Skip down to the live demo</a></p> + +<h2 id="make-the-web-backwards-compatible">Make the Web Backwards Compatible</h2> + +<p>I try my best when creating specific element designs or layouts to have everything render consistently across almost <em>all</em> browsers. This tends to include the obvious front-runners: Chrome, Firefox, Safari - but I also try my best not to ignore the oldies: IE11, Edge and older versions of Opera. I believe if most web designers even loosely followed this concept we wouldn&#8217;t be stringing together barely implemented CSS properties and hacking together polyfills for all the unsupported browsers. Just my two cents.</p> + +<p>What does this have to do with full-bleed exactly? Well, the CSS we will be using in this demo is fully compatible with pretty much <em>any browser</em> that can run the basic version of CSS rendering. If the browser you&#8217;re targeting supports <code>max-width</code> and <code>margins</code> - then have no fear, full-bleeds are here.</p> + +<h2 id="our-html-example">Our HTML Example</h2> + +<p>Let&#8217;s create a single-column blog layout for this example. We will include a heading, some paragraphs, an image, and a blockquote to keep it simple:</p> + +<pre><code>&#60;main&#62; + &#60;article&#62; + &#60;h1&#62;Main Heading&#60;&#47;h1&#62; + &#60;p&#62;Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!&#60;&#47;p&#62; + &#60;img src=&#39;https:&#47;&#47;images.unsplash.com&#47;photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&#38;q=85&#38;fm=jpg&#38;crop=entropy&#38;cs=srgb&#38;ixid=eyJhcHBfaWQiOjE0NTg5fQ&#39; alt="Some Image"&#62; + &#60;p&#62;Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.&#60;&#47;p&#62; + &#60;blockquote&#62; + &#60;p&#62;To be, or not to be, that is the question:&#60;br&#62;Whether &#39;tis nobler in the mind to suffer&#60;br&#62;The slings and arrows of outrageous fortune,&#60;br&#62;Or to take Arms against a Sea of troubles,&#60;br&#62;And by opposing end them: to die, to sleep;&#60;&#47;p&#62; + &#60;cite&#62;- Some guy&#60;&#47;cite&#62; + &#60;&#47;blockquote&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.&#60;&#47;p&#62; + &#60;&#47;article&#62; +&#60;&#47;main&#62; +</code></pre> + +<p>This works well as it is, but we will need to &#8220;section&#8221; off our different areas of content based on whether we want them <code>full-bleed</code> or not. We do this with - you guessed it - the <code>section</code> element. In this demo we want the image and blockquote to become <code>full-bleed</code> when rendered, so we&#8217;ll add the <code>full-bleed</code> class to those sections for now (more on that later):</p> + +<pre><code>&#60;main&#62; + &#60;article&#62; + &#60;section&#62; + &#60;h1&#62;Main Heading&#60;&#47;h1&#62; + &#60;p&#62;Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!&#60;&#47;p&#62; + &#60;&#47;section&#62; + &#60;section class="full-bleed"&#62; + &#60;img src=&#39;https:&#47;&#47;images.unsplash.com&#47;photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&#38;q=85&#38;fm=jpg&#38;crop=entropy&#38;cs=srgb&#38;ixid=eyJhcHBfaWQiOjE0NTg5fQ&#39; alt="Some Image"&#62; + &#60;&#47;section&#62; + &#60;section&#62; + &#60;p&#62;Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.&#60;&#47;p&#62; + &#60;&#47;section&#62; + &#60;section class="full-bleed"&#62; + &#60;blockquote&#62; + &#60;p&#62;To be, or not to be, that is the question:&#60;br&#62;Whether &#39;tis nobler in the mind to suffer&#60;br&#62;The slings and arrows of outrageous fortune,&#60;br&#62;Or to take Arms against a Sea of troubles,&#60;br&#62;And by opposing end them: to die, to sleep;&#60;&#47;p&#62; + &#60;cite&#62;- Some guy&#60;&#47;cite&#62; + &#60;&#47;blockquote&#62; + &#60;&#47;section&#62; + &#60;section&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?&#60;&#47;p&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.&#60;&#47;p&#62; + &#60;&#47;section&#62; + &#60;&#47;article&#62; +&#60;&#47;main&#62; +</code></pre> + +<p>That&#8217;s it for the HTML!</p> + +<h2 id="the-magic-css-not-really">The Magic CSS (Not Really)</h2> + +<p>Now take a deep breath and get ready for some hard CSS work:</p> + +<pre><code>article { + width: 100%; +} + +article section { + margin: 0 auto; + max-width: 480px; &#47;* This can be whatever you want *&#47; + width: 100%; +} +article section.full-bleed { + max-width: 100%; +} +</code></pre> + +<p>That&#8217;s it. <em>Really</em>. Now any element (blockquotes, specific headers, navigations, footers, etc) that you want to layout as &#8220;full-bleed&#8221;, just wrap it in a <code>section</code> tag and sick the <code>full-bleed</code> class on it. Done and done.</p> + +<p>Obviously you&#8217;ll want to add more styling to clean-up and make your full-bleed layouts more beautiful. This demo was just more of a starting point.</p> + +<h3 id="maybe-not-quite-full-bleed">Maybe Not-Quite-Full-Bleed?</h3> + +<p>You could also further customize your options by including a class like <code>half-bleed</code>, which maybe only expands slightly outside the main section <code>max-width</code>:</p> + +<pre><code>article section.half-bleed { + max-width: 960px; +} +</code></pre> + +<h3 id="sidenote">Sidenote</h3> + +<p>For those concerned about accessibility: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section">section element</a> is a flow content element, so it can contain almost all HTML elements.</p> + +<p><a href="https://codepen.io/bradleytaunt/pen/mdEdjzz">Live CodePen Example</a></p></description> + <link>https://btxx.org/poor-mans-full-bleed</link> + <guid isPermaLink="false">https://btxx.org/poor-mans-full-bleed</guid> + <pubDate>Wed, 07 Oct 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Plain Text Emails, Please</title> + <description><h1 id="plain-text-emails-please">Plain Text Emails, Please</h1> + +<p>2019-09-09</p> + +<p>When it comes to website &#47; product design and development most devs should try to keep things simple. By only using as much code as absolutely necessary, projects avoid growing out of scope or becoming bloated. So, why isn&#8217;t this same approach taken for email?</p> + +<h2 id="a-brief-history-of-email">A brief history of email</h2> + +<p>Email has been possible since the 1960s with <a href="https://en.wikipedia.org/wiki/Time-sharing">time-sharing computers</a> being used to share files and messages across early devices. Around the 80s and 90s it seemed as though <a href="https://en.wikipedia.org/wiki/Government_Open_Systems_Interconnection_Profile">GOSIP</a> would dominate the market, but this was knocked out in favor of SMTP, POP3 and IMAP in 1995 when the <a href="http://www.walthowe.com/navnet/history.html">National Science Foundation ended its sponsorship of the Internet backbone</a>, and all traffic relied on commercial networks.</p> + +<p>Things were looking pretty good at this point. Most operating systems now had a shared foundation of sending and receiving emails on the internet, allowing for a set of standards to be slowly developed and agreed upon over time. These were simpler times, with the default content sent between machines being plain text. No embedded images, no CSS3 fallback support, no <em>fluff</em> - just content.</p> + +<p><strong>Sidenote:</strong> +Now, I&#8217;m not going to sit here and pretend to be some expert on the history of email (or the internet in general), so I suggest you take the time to read about <a href="http://www.walthowe.com/navnet/history.html">the history of the internet</a> if you&#8217;re into that kind of thing.</p> + +<h2 id="looking-at-some-data">Looking at some data</h2> + +<blockquote> +<p>Data isn&#8217;t everything</p> +</blockquote> + +<p>I understand that the data being used is currently 16 years old - but not many extensive research studies have been performed (specifically for email-type preference in general)</p> + +<p>In 2002[1], <a href="https://www.clickz.com/real-world-email-client-usage-the-hard-data/47429/">a small-set survey was run by ClickZ</a> was created to gauge the details of personal email data. The main data we will focus on is the user preference between HTML or plain text formats:</p> + +<p><strong>Do you prefer receiving HTML or text email?</strong></p> + +<table> +<thead> +<tr> +<th>Response</th> +<th>Percentage (%)</th> +</tr> +</thead> + +<tbody> +<tr> +<td>HTML</td> +<td>41.95</td> +</tr> +<tr> +<td>Plain Text</td> +<td>31.52</td> +</tr> +<tr> +<td>No Preference</td> +<td>26.53</td> +</tr> +</tbody> +</table> + +<p>On initial review, one could make the argument that the general public <em>prefers</em> HTML email over plain text (~42% vs ~32%) - but I would disagree with this analysis. The roughly 27% of respondents who answered with <em>No Preference</em> should not be dismissed so easily.</p> + +<p>Since the <em>No Preference</em> respondents don&#8217;t care whether emails they receive are designed in HTML format, why not send them plain text variations by default? The positives of plain text greatly outweigh those of HTML:</p> + +<ul> +<li>Plain text has reduced file size + +<ul> +<li>Don&#8217;t forget that many users have limited data usage across much of the world</li> +</ul></li> +<li>HTML is more likely to be flagged as spam by email clients + +<ul> +<li>This is due to extra code, tracking scripts, 3rd party assets &#47; resources being called</li> +</ul></li> +<li>HTML &#47; CSS can be inconsistent or even limited in support across email clients</li> +<li>Text only requires less design work for your development team + +<ul> +<li>Don&#8217;t forget about testing all the various email clients too</li> +</ul></li> +</ul> + +<p>Add to this that <a href="https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33">53% of emails are opened on mobile</a> - so any &#8220;fancy&#8221; marketing email designs need to look great on mobile screens and also take into account slower connections. What looks better and loads faster than simple plain text? 😛</p> + +<h2 id="but-what-about-marketing">But what about marketing!?</h2> + +<p>Sorry to say, but marketing should never trump user experience. Teams love to track email opens &#47; click ratios, who subscribed &#47; unsubscribed or who shared the campaign with others - but <strong>it&#8217;s all bloat on the user&#8217;s end</strong>.</p> + +<p>Greg Kogan wrote up a great article &#47; case study about his experience <a href="https://www.gkogan.co/blog/dont-design-emails/">switching over a client&#8217;s campaign from HTML templates to plain text</a> with some really interesting results. I highly recommend you give it a read for a better understanding about how the marketing goals and customer goals don&#8217;t always align.</p> + +<h2 id="simple-or-lazy---it-doesnt-matter">Simple or lazy - it doesn&#8217;t matter</h2> + +<p>Plain text can certainly have a reputation for looking lazy or cheap, but I feel this is mostly perpetuated in the design and marketing communities. I can assure you that your average day-to-day users are much less opinionated about your email campaign design than you are. Look to satisfy your customers&#8217; needs before your own.</p> + +<blockquote> +<p>Life is really simple, but we insist on making it complicated.</p> + +<p>- Confucius</p> +</blockquote> + +<p>That being said, at the end of the day, companies will justify their own reasons to use HTML email templates over plain text. You can&#8217;t convince everyone. My own personal experience with email template design, along with analyzing some of the data, leaves me to believe that most businesses should default to plain text. At the very least, you should try to convince your team to perform some simple A&#47;B testing with your next email campaign.</p> + +<p>The results might just surprise you.</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>This is the &#8220;latest&#8221; detailed survey I could find on email design preference</li> +</ol></description> + <link>https://btxx.org/plain-text-emails</link> + <guid isPermaLink="false">https://btxx.org/plain-text-emails</guid> + <pubDate>Mon, 09 Sep 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Setting Up 1.1.1.1 for Families on a Pi-Hole</title> + <description><h1 id="setting-up-1.1.1.1-for-families-on-a-pi-hole">Setting Up 1.1.1.1 for Families on a Pi-Hole</h1> + +<p>2021-10-28</p> + +<p>After seeing Cloudflare&#8217;s 1.1.1.1 for Families mentioned on the <a href="https://news.ycombinator.com/item?id=29024195">front page of HackerNews</a>, I thought it might be helpful to show those currently using a <a href="https://pi-hole.net">pi-hole device</a> how to include 1.1.1.1 alongside it.</p> + +<h2 id="keeping-things-updated">Keeping Things Updated</h2> + +<p>It should go without saying that you should be running the latest stable pi-hole version for security and full feature support. To do so, simply <code>ssh</code> into your device (or connect to it directly if you prefer) and run the following to check your pi-hole version:</p> + +<pre><code>pihole -v +</code></pre> + +<p>And if your version is out of date, run:</p> + +<pre><code>pihole -up +</code></pre> + +<p>Once it completes the update everything will be good to go!</p> + +<h2 id="adding-1.1.1.1-1.1.1.2">Adding 1.1.1.1 (1.1.1.2)</h2> + +<p>Now you need to navigate to your main pi-hole admin in your browser (most likely the url will be <em>pi.hole</em>). Login in using your credentials and the do the following steps:</p> + +<ol> +<li><p>Navigate to <strong>Settings</strong></p></li> +<li><p>Navigate to <strong>DNS</strong></p></li> +<li><p>Under &#8220;Upstream DNS Servers&#8221; enter:</p></li> +</ol> + +<ul> +<li>Custom 1 (IPv4): 1.1.1.2</li> +<li>Custom 2 (IPv4): 1.0.0.2</li> +</ul> + +<h2 id="ad-block-malware-protection">Ad-Block &#38; Malware Protection</h2> + +<p>You now officially have protection against both intrusive advertisements <em>and</em> sites flagged with malware. Happy (and now safer) browsing!</p></description> + <link>https://btxx.org/pihole-cloudflare</link> + <guid isPermaLink="false">https://btxx.org/pihole-cloudflare</guid> + <pubDate>Thu, 28 Oct 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Stuffing an SSD Inside the Raspberry Pi 400</title> + <description><h1 id="stuffing-an-ssd-inside-the-raspberry-pi-400">Stuffing an SSD Inside the Raspberry Pi 400</h1> + +<p>2021-08-13</p> + +<p>I have successfully jammed an mSATA SSD into the main shell of my Raspberry Pi 400. It wasn&#8217;t as straightforward as I thought it would be - in fact, most <em>real</em> hardware tinkerers will probably vomit in their mouths once they see how I achieved this&#8230;</p> + +<p>But I&#8217;m happy with my build. Those with better skills and knowledge can most likely improve upon this concept (and please do if you can - I&#8217;d love to see it!)</p> + +<p>Enough chit-chat - on to the build!</p> + +<h2 id="the-finished-masterpiece">The Finished &#8220;Masterpiece&#8221;</h2> + +<p>Below you can see the final look of my modded Raspberry Pi 400, which I have personally named the <strong>Raspberry Pi 400X</strong>:</p> + +<p>Do you see that ugly black USB-C to USB-A cable jutting out from the top? That little guy connects directly to the mSATA SSD <em>inside</em> the plastic keyboard structure and allows us to boot via USB. It also gives us the flexibility to easily <em>unplug</em> the internal SSD for times when we desire to boot from micro SD or a different USB device altogether.</p> + +<p>So, how did I make this?</p> + +<h2 id="the-shopping-list">The Shopping List</h2> + +<p>Before we deep dive into the terrible hardware modifications I&#8217;ve made to my Pi, I&#8217;ll list out all the items&#47;tools I used during the making of this monstrosity:</p> + +<ul> +<li>mSATA 64GB SSD Half Size (KingSpec) &#8594; <a href="https://www.aliexpress.com/item/32385499968.html?spm=a2g0s.9042311.0.0.210e4c4dIH8xWv">AliExpress</a></li> +<li>mSATA to USB 3.1 enclosure (gutted) &#8594; <a href="https://www.amazon.ca/gp/product/B07BBM3BVS/ref=ppx_yo_dt_b_asin_title_o09_s00?ie=UTF8&amp;psc=1">Amazon</a></li> +<li>Dremel rotary tool with soft sanding bits</li> +<li>Metal cutting scissors &#47; knife</li> +<li>Electrical tape</li> +<li>Patience</li> +</ul> + +<h2 id="modding-the-raspberry-pi-400">Modding the Raspberry Pi 400</h2> + +<p>The final product requires us to attach the half size mSATA SSD to the (gutted) enclosure and then insert that directly inside the Pi (next to the lock port &#47; ethernet). Our first step will be to disassemble the Pi 400, safely remove the keyboard module and remove the metal heatsink.</p> + +<p>With your trusty metal cutting scissors (or whatever tool you prefer) you will need to cut out room for our enclosure internals to fit within:</p> + +<p>Next you will need to carefully remove the Pi board itself from the red part of the case. Once placed safely aside, it&#8217;s time to bust out our sanding dremel and remove the jutting plastic blocking our soon-to-be-added SSD. Remember to wear a mask during this phase, since breathing in plastic dust and fumes is not fun!</p> + +<p><strong>Important to note:</strong> this will remove one of the screw slots needed to secure the heatsink into the board. Not a big deal if you ask me&#8230;</p> + +<p>While you have the Pi board removed you should also cut out a slot for the USB-C to USB-A cable to connect our mSATA to one of our USB 3 ports on the Pi. For this I&#8217;ve opted to butcher the lock port (will I ever really use that anyway?)</p> + +<p>Now all that&#8217;s left is to insert our gutted mSATA enclosure (with the half size SSD attached of course) +, tape it down with some hideous electrical tape and close this bad boy back up!</p> + +<p>That&#8217;s it! You now have the portable power of the Raspberry Pi 400, but now with the speed and performance of an SSD!</p> + +<h2 id="the-performance-gains">The Performance Gains</h2> + +<table> +<thead> +<tr> +<th>Storage Type</th> +<th>Seq. Write</th> +<th>Random W</th> +<th>Random R</th> +</tr> +</thead> + +<tbody> +<tr> +<td>Micro SD Card</td> +<td>17818 KB&#47;sec</td> +<td>812 IOPS</td> +<td>2335 IOPS</td> +</tr> +<tr> +<td>mSATA SSD</td> +<td>206738 KB&#47;sec</td> +<td>14615 IOPS</td> +<td>17925 IOPS</td> +</tr> +</tbody> +</table> + +<p>I think it&#8217;s pretty clear that the SSD blows the default micro SD card out of the water&#8230;</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>Now clearly you could just plug-in an external SSD and walk away with the same performance boosts - but where is the fun in that?</p> + +<p>If anyone decides to improve on this or make a cleaner approach, please do share it with me. I&#8217;d love to see it!</p></description> + <link>https://btxx.org/pi-400-internal-ssd</link> + <guid isPermaLink="false">https://btxx.org/pi-400-internal-ssd</guid> + <pubDate>Fri, 13 Aug 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>89 Blog Posts in a Single HTML File</title> + <description><h1 id="89-blog-posts-in-a-single-html-file">89 Blog Posts in a Single HTML File</h1> + +<p>2021-04-22</p> + +<p><em>This is no longer the current setup of my blog</em>. I have switched back to Jekyll for performance reasons. I&#8217;ll be leaving this post up as a point of reference though :)</p> + +<hr/> + +<p>This is my personal blog (if that wasn&#8217;t already obvious). I currently have 89 blog posts living here. But I have done something magical today:</p> + +<p>All of these articles are rendered inside a <em>single HTML file</em>. 🤯</p> + +<h2 id="what-sorcery-is-this">What Sorcery is This?!</h2> + +<p>No magic here - I&#8217;m just using my own personal static site generator called <a href="https://phpetite.org">PHPetite</a>. You can find all the code and more information about PHPetite on the <a href="https://github.com/bradleytaunt/phpetite">official Github repo page</a>. Please note that this project is still very much a WIP, so go easy on me when pointing out bugs or issues!</p> + +<h2 id="pingdom-stats">Pingdom Stats</h2> + +<p>Before we get into more details on how everything is built, let&#8217;s take a quick look at some of my website stats (not that pure numbers are 100% accurate of user experience):</p> + +<ul> +<li>99 Performance Grade</li> +<li>951 ms Load Time</li> +<li>231.3 KB Page Size (thank you Netlify compression!)</li> +</ul> + +<p><a href="https://tools.pingdom.com/#5e169d6a82000000">See all the Pingdom details for yourself</a></p> + +<p>Now the <code>Page Size</code> will certainly change as more blog posts are added over time, but if the total webpage size is roughly 230 KB with 89 blog posts, I figure that gives me the ability to add another 200 or so posts before I cross the <a href="https://1mb.club">1MB threshold</a></p> + +<p>I&#8217;ll deal with how to load in the content more efficiently when that times comes&#8230;</p> + +<h2 id="what-about-images">What About Images?</h2> + +<p>Good question. Since a large portion of my articles tend to be focused on design and CSS, visual examples are somewhat important. So how do I avoid loading in all the individual images on every single post into this single HTML &#8220;website&#8221;?</p> + +<p>Easy - I don&#8217;t load any images at all.</p> + +<p>I now simply set any images that are not included in the current, visible <code>section</code> to <code>display: none</code>. This avoids breaking things with the RSS feed.</p> + +<p>Here is an image example of an old Dribbble shot I created years ago:</p> + +<p>I have noticed that Safari &#47; Firefox on iOS renders the imagery as broken image links - I plan to look into this further to avoid that confusion. For now it works well on desktop Chromium and Firefox.</p> + +<pre><code>&#60;figure&#62; + &#60;div class="img-parent"&#62; + &#60;img loading="lazy" src="&#47;placeholder-image.webp" onclick="this.src=&#39;https:&#47;&#47;res.cloudinary.com&#47;bradtaunt&#47;image&#47;fetch&#47;q_auto:low&#47;v1570124593&#47;https:&#47;&#47;uglyduck.ca&#47;public&#47;images&#47;aqua-ui-css-buttons.webp&#39;" alt="Aqua UI buttons"&#62; + &#60;&#47;div&#62; + &#60;figcaption&#62;&#60;b&#62;Click the placeholder to load in the real image&#60;&#47;b&#62;&#60;br&#62;Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. &#60;a href="https:&#47;&#47;res.cloudinary.com&#47;bradtaunt&#47;image&#47;fetch&#47;q_auto:low&#47;v1570124593&#47;https:&#47;&#47;uglyduck.ca&#47;public&#47;images&#47;aqua-ui-css-buttons.webp"&#62;View full size image&#60;&#47;a&#62;.&#60;&#47;figcaption&#62; +&#60;&#47;figure&#62; +</code></pre> + +<h2 id="hows-the-seo">How&#8217;s the SEO?</h2> + +<p>Probably terrible to be honest. One single file for all blog posts is something Google will most likely frown upon. Whatever - it&#8217;s my personal blog so I don&#8217;t really give a shit.</p> + +<h2 id="rss-feed">RSS Feed</h2> + +<p>If you recently added my old RSS feed, I&#8217;m sorry, but you&#8217;ll have to update. The new feed is located at <a href="https://tdarb.org/feeds/posts.xml">tdarb.org&#47;feeds&#47;posts.xml</a>. I made this change to avoid spamming the current feed users.</p> + +<h2 id="tasty-dog-food">Tasty Dog Food</h2> + +<p>At the end of the day, by moving my personal blog over to PHPetite, it makes me more aware of current bugs and restrictions within the project. I feel like this will help me to improve this static site generator even more over time, instead of letting it die a slow death ignored on Github.</p> + +<p>I hope you enjoyed this little breakdown and maybe even want to try out PHPetite for yourself? 😉</p></description> + <link>https://btxx.org/phpetite</link> + <guid isPermaLink="false">https://btxx.org/phpetite</guid> + <pubDate>Thu, 22 Apr 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>My Changing Opinion on Personal Website Design</title> + <description><h1 id="my-changing-opinion-on-personal-website-design">My Changing Opinion on Personal Website Design</h1> + +<p>2021-05-19</p> + +<p>Hey would you look at that - my personal blog has been redesigned <em>again</em>! Although I am still using good ol&#8217; Jekyll for the backend, I have now added a more fleshed-out CSS design which also includes a set of open source custom typefaces.</p> + +<p><strong>Gasp!</strong> &#8220;How <em>could</em> you?!&#8221; I hear you ask. Let me explain.</p> + +<h2 id="personal-sites-should-feel-personal">Personal sites should feel personal</h2> + +<p>I can see how this change might seem hypocritical (it took some convincing myself) but I decided to follow in to footsteps of Kev Quirk and <a href="https://kevq.uk/adding-some-whimsy-character/">added a little whimsy and character</a> to my website. After all, personal websites should <em>feel personal</em>. My obsession with barebones HTML &#38; CSS serves its purpose on other public projects, but seems limiting for my own little space on the interwebs.</p> + +<h2 id="banned-from-my-own-club">Banned from my own club</h2> + +<p>I had originally converted this blog&#8217;s design to use <em>zero</em> CSS and instead rely solely on default browser styling. The main reasoning for doing so, was to have the ability to include my own personal website in the <a href="https://xhtml.club">XHTML Club</a> project. (I never said it was a <em>good</em> reason)</p> + +<p>After giving it some thought, I&#8217;ve decided that this limitation seemed too extreme even for me.</p> + +<h2 id="moving-forward">Moving forward</h2> + +<p>I know I always say &#8220;With this new design, I can finally focus on just writing content!&#8221; - but this is a lie. I&#8217;ll probably be fiddling with my personal website until the day I die. The good news is that I <em>do</em> have a few tutorial blog posts lined up to publish soon - so be on the lookout for those!</p> + +<p>Thanks for reading through my pointless ramblings about personal websites. It&#8217;s good to just vent about these things sometimes&#8230;</p></description> + <link>https://btxx.org/personal-website-opinions</link> + <guid isPermaLink="false">https://btxx.org/personal-website-opinions</guid> + <pubDate>Wed, 19 May 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Create a Performance-Focused WordPress Blog</title> + <description><h1 id="create-a-performance-focused-wordpress-blog">Create a Performance-Focused WordPress Blog</h1> + +<p>2021-09-08</p> + +<p>With my recent switch back to WordPress, and having read Kev Quirk’s latest post about Core Web Vitals, I wanted to make sure my blog still prioritized speed and performance above all else. I’m happy to say that I have closely replicated the same speed of my original <em>static</em> Jekyll-based version of this blog.</p> + +<p>And I&#8217;ve achieved this with barely any effort at all. All that&#8217;s needed is: </p> + +<ul> +<li>a lightweight WordPress theme</li> +<li>two free WordPress plugins</li> +<li>cheap &#38; fast web hosting</li> +</ul> + +<p>Let me breakdown each component so those of you interested can do the same without hitting any roadblocks.</p> + +<h2 id="choosing-your-wordpress-theme">Choosing Your WordPress Theme</h2> + +<p>Selecting an existing theme or trying to build your own can be a daunting experience. For my needs, I forced myself to find an existing theme and just run with it. This gives me more time to focus on writing instead of constantly tweaking the blog’s visuals.</p> + +<p>I would suggest either using the default starter theme (as of this writing: Twenty Twenty One theme by Automattic) or looking for specific “lightweight” themes across the web. I highly recommend checking out Anders Norén’s <a href="https://andersnoren.se/teman/">theme collection</a>. Others can be found on the official <a href="https://wordpress.org/">wordpress.org</a> website.</p> + +<h2 id="two-simple-plugins">Two Simple Plugins</h2> + +<p>Once you have decided on a theme, you&#8217;ll also want to be sure to install two very important plugins that greatly help with performance:</p> + +<ol> +<li>Jetpack Boost – <a href="https://wordpress.org/plugins/jetpack-boost/">wordpress.org&#47;plugins&#47;jetpack-boost&#47;</a></li> +<li>Yoast SEO – <a href="https://wordpress.org/plugins/wordpress-seo/">wordpress.org&#47;plugins&#47;wordpress-seo&#47;</a></li> +</ol> + +<h2 id="jetpack-boost">Jetpack Boost</h2> + +<p>This plugin is fantastic. Not only will it run a proper audit (based off Google’s Lighthouse tool) but also gives you the ability to activate optimized CSS, lazy image loading and deferring non-essential JavaScript (if applicable). All of this is done in a super-clean user interface directly inside your WordPress admin.</p> + +<p>Check out my own testing site metrics below:</p> + +<h2 id="yoast-seo">Yoast SEO</h2> + +<p>If you’ve worked with WordPress at all you have surely heard of Yoast. Adding this plugin to your site is really a no-brainer. The automatic generation of meta data and SEO tags can save you a lot of time while also improving your overall Lighthouse score.</p> + +<p>Here is the Lighthouse audit for the test WordPress website:</p> + +<p>Those scores were achieved without any custom work on my end – I simply activated the plugin and let it work it’s magic. Great stuff.</p> + +<h2 id="host-everything-on-easywp">Host Everything on EasyWP</h2> + +<p>Up to this point we haven’t spent a single penny. Unfortunately, web hosting isn’t free and you’re going to need it if you actually want your website to have a home on the interwebs!</p> + +<p>I know – I can hear your collective voices shouting out:</p> + +<blockquote> +<p>Isn&#8217;t web hosting a little expensive just for my simple hobby blog&#47;site?</p> + +<p>&#8211; Some of you</p> +</blockquote> + +<p>I host this test blog for just <strong>$3.88&#47;month</strong> and the service is actually good. Unreal, right? That’s the price of a medium coffee, so I’m pretty sure it won’t break the bank.</p> + +<p>This “cheap” hosting is through EasyWP and the Starter plan ($3.88&#47;month) comes with the following:</p> + +<ul> +<li>10 GB SSD storage</li> +<li>50k visitors&#47;month</li> +<li>Unlimited bandwidth</li> +<li>Backups (though not automatic)</li> +<li>SFTP access</li> +<li>EasyWP Cache plugin (and it&#8217;s actually good!)</li> +</ul> + +<p>You will need to snag your own SSL certificate though, but this is easily obtained with something like <a href="https://letsencrypt.org">letsencrypt.org</a>.</p> + +<p>Best of all, if in the future you require more features the next pricing tier is still only $7.88. Not too shabby!</p> + +<h2 id="try-yourself">Try Yourself</h2> + +<p>The fact that EasyWP gives you a free month trial, there really is no reason not to try spinning up your own blog or online store or whatever the heck you want to build. The more people with personal spaces on the web the better.</p></description> + <link>https://btxx.org/performance-focused-wordpress-theme</link> + <guid isPermaLink="false">https://btxx.org/performance-focused-wordpress-theme</guid> + <pubDate>Wed, 08 Sep 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Yet Another Static Site Generator Switch</title> + <description><h1 id="yet-another-static-site-generator-switch">Yet Another Static Site Generator Switch</h1> + +<p>2022-07-06</p> + +<p>If you&#8217;re an RSS subscriber, I&#8217;ve probably blown up your feed reader (again). This seems to be an on-going theme with this blog. I can&#8217;t help it.</p> + +<p>This website now uses my <em>new</em> Pandoc-based static blog generator: <a href="https://pblog.bt.ht">pblog</a>. I won&#8217;t go into great detail about it&#8217;s features (or lack thereof) - if you&#8217;re interested in that, check out the <a href="https://pblog.bt.ht/blog/pblog-intro.html">&#8220;Introducing pblog&#8221; article</a>.</p> + +<p>The bigger question is, &#8220;Why the change?&#8221;</p> + +<h2 id="wheres-the-love-for-shinobi">Where&#8217;s the Love for &#8220;Shinobi&#8221;?</h2> + +<p>Switching over to <code>pblog</code> wasn&#8217;t caused by a dislike of using <a href="https://shinobi.bt.ht">Shinobi</a>. In fact, I still really enjoy the work flow that that plain-text focused SSG provides. The main issues that popped up for my own blog was <em>accessibility</em> and <em>poor user experience</em>.</p> + +<p>I had multiple readers reach out and mention poor rendering of content in their RSS reader of choice. That&#8217;s kind of a <strong>big deal</strong>. I test that project as best I can with my limited access to all available RSS readers - but I can only test so much. It became one of those &#8220;Well, it works on my machine!&#8221; meme. So instead of spending an untold amount of time debugging every RSS reader known to man, I figured my best bet was to render things as <code>HTML</code>.</p> + +<p>The next big issue was <em>accessibility</em>. Screen readers can read <code>txt</code> formatted files perfectly fine but since elements aren&#8217;t categorized everything ends up with the same level hierarchy. This can cause confusion between headers, list items, URLs, footers etc. For my personal use-case (sharing tutorials and covering design topics) it didn&#8217;t make sense to sacrifice user accessibility for minimalism.</p> + +<h2 id="the-search-for-simplicity">The Search for Simplicity</h2> + +<p>My initial thought process was to include some form of &#8220;plus&#8221; add-on to the existing Shinobi build script. The idea was to render <code>HTML</code> versions of each post and dump those into the generated RSS file. Although maybe good in theory, it ended up impractical because:</p> + +<ol> +<li>No utility or existing tool could render the style of text-based formatting I implemented as semantic HTML (at least not without heavy customization and tinkering)</li> +<li>I was actually adding extra bloat to the Shinobi project (true minimalism is the point, right?)</li> +</ol> + +<p>So, that option was ruled out pretty quickly.</p> + +<p>The next option didn&#8217;t take me long to land on: <em>Pandoc</em>. I&#8217;ve used Pandoc for years and have nothing but great experiences tweaking it for my own needs. I knew that I could piggyback off the original <code>shell</code> commands in the Shinobi project and alter them as needed to incorporate Pandoc.</p> + +<p>I honestly didn&#8217;t run into many issues while rolling this out. Fairly seamless!</p> + +<h2 id="new-workflow">New Workflow</h2> + +<p>With this new blog switch I also decided to try out a new <em>deploy</em> workflow. I&#8217;ve used <code>rsync</code> for the longest time but wanted to have something more GUI-based on macOS. I know, <em>blasphemy</em>!</p> + +<p>Since I already have a Transmit license, that seemed like the best fit since it is designed specifically for macOS. Now my workflow process is as follows:</p> + +<ol> +<li>Write new posts in my root <code>posts</code> folder</li> +<li>Rebuild the <code>pblog</code> with <code>make</code></li> +<li>Use the built-in sync function of Transmit to mirror my local <code>_output</code> with my web server</li> +</ol> + +<p><img src="/public/images/transmit-ftp.webp" alt="The Transmit UI in all of its wonderful glory (before I updated)" /></p> + +<h3 id="wrapping-up">Wrapping Up</h3> + +<p>Will there be bugs with this switch-over? Most likely. Will some URLs be left behind or broken? Possibly. These small issues will be ironed out over time. For now, I&#8217;m quite happy with keeping things minimal on the workflow side of things, while preserving accessibility and user experience with the output.</p> + +<p>Thanks for reading!</p></description> + <link>https://btxx.org/pblog</link> + <guid isPermaLink="false">https://btxx.org/pblog</guid> + <pubDate>Wed, 06 Jul 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Happily Paying For macOS Apps</title> + <description><h1 id="happily-paying-for-macos-apps">Happily Paying For macOS Apps</h1> + +<p>2022-06-29</p> + +<p>It&#8217;s no secret that I am a huge advocate for open source software. A solid chunk of my day-to-day workload is done so via FOSS[^0] systems. I also manage a handful of fun side projects that are normally shipped under either MIT or GPL licensing. But that doesn&#8217;t mean I still don&#8217;t enjoy <em>some</em> non-free, proprietary software.</p> + +<p>So, I thought I would share my collection of macOS applications that I happily paid for. (There aren&#8217;t many since my needs are limited)</p> + +<h2 id="design-tool-sketch">Design Tool: Sketch</h2> + +<p>My day job requires me to use Figma, which is totally fine but not nearly as polished as Sketch. Yes, Figma is cross-platform. Yes, Figma can run directly in the browser. Yes, Figma is free for most smaller team sizes.</p> + +<p>But sorry - Sketch is just better.</p> + +<p>Since the team at Bohemian Coding have crafted Sketch specifically for macOS it feels native, runs extremely well and fits in with the rest of the ecosystem. The pricing model is okay in my books too, balancing a fine line between <em>optional</em> yearly subscriptions and one-time purchases. It&#8217;s a smart move and I much prefer it to a forced subscription plan.</p> + +<p>URL: <a href="https://www.sketch.com/">https:&#47;&#47;www.sketch.com&#47;</a></p> + +<h2 id="password-manager-secrets">Password Manager: Secrets</h2> + +<p>I was originally a subscriber to 1Password but couldn&#8217;t justify spending $7CDN a month for what it was offering. Also, subscriptions suck. After doing some research I stumbled upon Secrets and noticed some things about it that instantly caught my eye:</p> + +<ul> +<li>No subscriptions! One-time price forever.</li> +<li>iCloud Sync across devices</li> +<li>Browser extension support (although I don&#8217;t use this personally)</li> +<li>Developed by a one-man team (support indie devs!)</li> +</ul> + +<p>I purchased both the macOS and iOS versions of Secrets after trying out the free version almost immediately. It&#8217;s wonderful. The UI is clean and flows well with the rest of the Mac ecosystem to give it a native &#8220;Apple&#8221; feel. Syncing my laptop and iPhone works seamless via iCloud.</p> + +<p>And best of all - no monthly fees.</p> + +<p>URL: <a href="https://outercorner.com/secrets-mac/">https:&#47;&#47;outercorner.com&#47;secrets-mac&#47;</a></p> + +<h2 id="transferring-files-transmit-5">Transferring Files: Transmit 5</h2> + +<p>The folks at Panic make incredible Mac and iOS apps. I see them as one of the best in the industry. In the early days of my web development career, I used to run Coda exclusively. I&#8217;ve since moved on the Sublime Text but I still have fond memories of the old Panic editor.</p> + +<p>As for FTP access, I still use Panic&#8217;s Transmit to this day. Beautiful UI that feels snappy even when transferring massive files across servers. Transmit is also a one-time purchase. Thank goodness. (Have I mentioned that I hate software subscriptions?)</p> + +<p>URL: <a href="https://panic.com/transmit/">https:&#47;&#47;panic.com&#47;transmit&#47;</a></p> + +<h2 id="wrapping-up">Wrapping Up</h2> + +<p>I know this list only includes 3 applications, but that&#8217;s truly all the ones I&#8217;ve spent money on. If in the future I happen to purchase any others I will be sure to update this post accordingly.</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>Free &#38; open source software</li> +</ol></description> + <link>https://btxx.org/paid-mac-apps</link> + <guid isPermaLink="false">https://btxx.org/paid-mac-apps</guid> + <pubDate>Wed, 29 Jun 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Over-Nesting</title> + <description><h1 id="over-nesting">Over-Nesting</h1> + +<p>2019-01-06</p> + +<p>I think since our design industry moves so quickly and exciting new technologies get released almost daily, that we often forget some of the basics when writing CSS. I bring this up because I&#8217;ve recently worked on a few projects that show a slight disregard for proper class&#47;selector nesting.</p> + +<p>Now it&#8217;s completely understandable why designers and teams alike shrug off the concept of &#8220;over-nesting&#8221;:</p> + +<ul> +<li>As a team we know the structure of our code (no outside party needs to interact with it)</li> +<li>Everything is written in <code>insert pre-processor here</code> - so it&#8217;s cleaner&#47;compiled anyway</li> +<li>It&#8217;s <em>technically</em> DRY</li> +</ul> + +<p>I personally believe these are all weak excuses that don&#8217;t justify the poor experience future maintainers of your code will face. <em>You should always write your code with the idea someone completely new to the project will have to maintain it</em>.</p> + +<p>Let&#8217;s look at an average example of poor nesting that I&#8217;ve seen out in the wild:</p> + +<pre><code>&#47;* These children elements can&#39;t be used outside +of the parent - not very flexible *&#47; +.main-container { + .child-container { + &#47;* This class specificity is too deep *&#47; + .sub-child-container {} + } +} +</code></pre> + +<p>Even if you know a child element will never be structured outside of it&#8217;s parent, what harm does it cause to still place it out of such deep specificity?</p> + +<pre><code>&#47;* This code is far more reusable *&#47; +.main-container {} +.child-container {} +.sub-child-container {} +</code></pre> + +<h3 id="exceptions">Exceptions</h3> + +<p>As with anything, there are exceptions to the <em>rule</em>. If the nested elements pertain to the parent itself, it makes complete sense to group these stylings together. A button or link item are excellent examples of this:</p> + +<pre><code>.btn-lg { + &#38;:hover {} + &#38;:active {} + &#38;:disabled{} +} + +.link-item { + &#38;:hover{} + &#38;:focus{} +} +</code></pre> + +<p>Of course, this is all easier said than done. Limitations exist within teams or even on an individual level that might make this impossible to change. Maybe you don&#8217;t have the authority to rework your current CSS or it would eat up too many cycles and time is valuable - especially in the world of startups. </p> + +<p>I&#8217;m not saying this is <strong>the only way to structure CSS</strong> - I&#8217;m only trying to make the lives of future designers&#47;developers easier moving forward. </p></description> + <link>https://btxx.org/over-nesting</link> + <guid isPermaLink="false">https://btxx.org/over-nesting</guid> + <pubDate>Sun, 06 Jan 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Over-Engineering an Oil Tank Gauge</title> + <description><h1 id="over-engineering-an-oil-tank-gauge">Over-Engineering an Oil Tank Gauge</h1> + +<p>2020-09-09</p> + +<p>I almost went down the path of investing a huge amount of time and effort into fixing a stuck oil fuel tank float-gauge in my house. Recently, the float mechanism became stuck and permanently displayed <code>empty</code> regardless of how much fuel was in the tank - not ideal. It&#8217;s a 20 year-old tank, so I wasn&#8217;t surprised that the float finally gave out. </p> + +<p>Being the wannabe tinkerer that I am, a light bulb went off in my head and I started thinking on how to incorporate some ultrasonic system to display the accurate fuel reading digitally. Obviously my first thought was just to replace the float gauge with a new one and be done with it. That didn&#8217;t sound very <em>fun</em> though.</p> + +<p>I briefly looked at other similar projects and started brainstorming the best way I would implement this for my own situation. The best option I came across seemed to be this: <a href="https://scottiestech.info/2017/10/24/diy-ultrasonic-fuel-gauge-level-sensor/">DIY Ultrasonic Fuel Gauge &#47; Level Sensor</a></p> + +<p>An ultrasonic system with a cool mini display sounded pretty rad - much cooler than just replacing the broken gauge with a new float arm. So it was settled.</p> + +<h2 id="my-oil-think-tank">My oil think-tank</h2> + +<p>I quickly thought through my options in my head before jumping too far into things (and even included a &#8220;poor-mans&#8221; temperature strip option):</p> + +<table> +<thead> +<tr> +<th>Solution</th> +<th>Cost</th> +<th>Time</th> +</tr> +</thead> + +<tbody> +<tr> +<td>Ultrasonic Gauge</td> +<td>$40-50</td> +<td>~2-3 hours</td> +</tr> +<tr> +<td>New Float Gauge</td> +<td>$25-30</td> +<td>~45 minutes</td> +</tr> +<tr> +<td>Temperature Strips</td> +<td>$10</td> +<td>~2 minutes</td> +</tr> +</tbody> +</table> + +<p>My mind was still set on building and implementing the ultrasonic option. It would be a great learning experience at the very least!</p> + +<p>So, before I ordered any parts or started designing a case that would house this new super-cool device, I went to investigate&#47;remove the float gauge to get a better look at the damage. With the help of some penetrating oil (the original installer went crazy with the pipe dope) and my trusty wrench, I opened up the gauge cap, partly lifting the float from the tank. Right away I noticed that the float and shaft were slightly stuck together in one small area. I poked it with my finger.</p> + +<p><em>The float set itself back into the correct position. It was fixed.</em></p> + +<p>How could I have been so dumb. I was so excited about <em>building something</em> that I jumped into implementation before fully realizing the problem. Talk about a metaphor for web dev, am I right?</p> + +<h2 id="overthinking-simple-problems">Overthinking simple problems</h2> + +<p>I can&#8217;t speak for all designers &#47; developers out there, but I catch myself (far more often than I&#8217;d like to admit) over-engineering a solution because of some perceived notion that it is the &#8220;best&#8221; option. Most of the time it isn&#8217;t actually better, it just seems more <em>fun</em>.</p> + +<p>Now don&#8217;t get me wrong, fun is a good thing most of the time. It&#8217;s just that some instances call for the quickest, cleanest, easiest solution in the name of efficiency - just be sure to have fully explored the problem <em>first</em>.</p> + +<h2 id="final-decision">Final decision</h2> + +<p>So I ended up doing nothing. I simply re-threaded the cap and placed the float back inside the tank. I know I saved myself time and money, but I can&#8217;t help but feel like I failed&#8230;</p> + +<p>Just like in the world of software, it&#8217;s best to avoid over-engineering simple problems.</p></description> + <link>https://btxx.org/over-engineering-an-oil-tank</link> + <guid isPermaLink="false">https://btxx.org/over-engineering-an-oil-tank</guid> + <pubDate>Wed, 09 Sep 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Building openring with Jekyll Build</title> + <description><h1 id="building-openring-with-jekyll-build">Building openring with Jekyll Build</h1> + +<p>2022-12-02</p> + +<p>I think it&#8217;s great when bloggers post their own personal &#8220;reading list&#8221; of blogs they themselves follow. Whether this is a customized Blogroll page or footnotes in their individual articles, I find it really helpful to find more interesting content on the &#8220;indie&#8221; web. This isn&#8217;t a new concept by any means, but I wanted something a little more &#8220;dynamic&#8221;[^1] for my own blog.</p> + +<p>After some digging I came across <a href="https://sr.ht/~sircmpwn/openring/">openring</a> and it&#8217;s great. Fully customizable, lightweight and completely open source. What more could you ask for?</p> + +<p>So, I thought others might be interested in how I&#8217;ve implemented openring through my own Jekyll build system.</p> + +<h2 id="installing-openring">Installing openring</h2> + +<p>You can pull the project <a href="https://sr.ht/~sircmpwn/openring/">directly via SourceHut</a> if you wish, but I would recommend installing through your default package manager. I&#8217;m running Arch, so for me it was as simple as running:</p> + +<pre><code>yay -S openring +</code></pre> + +<p>That&#8217;s it. I now have full local access to openring!</p> + +<h2 id="jekyll-includes">Jekyll Includes</h2> + +<p>You <em>could</em> setup a whole new directory specifically for your openring files, but that seems like overkill. Instead, we will simply add two new files to our existing <code>_includes</code> directory. We will name these files <code>openring-in.html</code> and <code>openring-out.html</code>.</p> + +<h3 id="openring-in.html-contents">openring-in.html Contents</h3> + +<pre><code>&#60;!-- License-Id: CC0-1.0 --&#62; +&#60;section class="webring"&#62; + &#60;h3&#62;Articles from blogs I follow around the world wide web&#60;&#47;h3&#62; + &#60;section class="articles"&#62; + {{range .Articles}} + &#60;div class="article"&#62; + &#60;h4 class="title"&#62; + &#60;a href="{{.Link}}" rel="noopener"&#62;{{.Title}}&#60;&#47;a&#62; + &#60;&#47;h4&#62; + &#60;p class="summary"&#62;{{.Summary}}&#60;&#47;p&#62; + &#60;small class="source"&#62; + via &#60;a href="{{.SourceLink}}"&#62;{{.SourceTitle}}&#60;&#47;a&#62; + &#60;&#47;small&#62; + &#60;small class="date"&#62;{{.Date | datef "January 2, 2006"}}&#60;&#47;small&#62; + &#60;&#47;div&#62; + {{end}} + &#60;&#47;section&#62; + &#60;p class="attribution"&#62; + Generated by + &#60;a href="https:&#47;&#47;git.sr.ht&#47;~sircmpwn&#47;openring"&#62;openring&#60;&#47;a&#62; + &#60;&#47;p&#62; +&#60;&#47;section&#62; +&#60;style&#62; +.webring .articles { + display: flex; + flex-wrap: wrap; + margin: -0.5rem; +} +.webring .title { + margin: 0; +} +.webring .article { + flex: 1 1 0; + display: flex; + flex-direction: column; + margin: 0.5rem; + padding: 0.5rem; + background: #eee; + min-width: 10rem; +} +.webring .summary { + font-size: 0.8rem; + flex: 1 1 0; +} +.webring .attribution { + text-align: right; + font-size: 0.8rem; + color: #555; +} +&#60;&#47;style&#62; +</code></pre> + +<blockquote> +<p>Sidenote: You will get minor Liquid Syntax warnings in the console when running your website via <code>serve</code> or <code>build</code>. I don&#8217;t really mind those warnings but if you do, feel free to move these files out into their own sub-directory in your project folder.</p> +</blockquote> + +<h3 id="openring-out.html-contents">openring-out.html Contents</h3> + +<p>This will generate itself for us every time we rebuild our Jekyll website. It is important to note that any changes you make in this file will be overwritten the next time you rebuild! All custom styling or layout changes should be made in the <code>openring-in.html</code> file.</p> + +<h2 id="our-new-build-script">Our &#8220;New&#8221; Build Script</h2> + +<p>To simplify things, we are going to place our main commands in a single build script in the root directory of our Jekyll project. For my personal blog, I&#8217;ve named this file <code>build-site.sh</code>. I know - I&#8217;m extremely creative.</p> + +<p>Place the following inside that file:</p> + +<pre><code>openring \ + -s https:&#47;&#47;example.com&#47;feed.xml \ + -s https:&#47;&#47;example.com&#47;feed.xml \ + -s https:&#47;&#47;example.com&#47;feed.xml \ + &#60; _includes&#47;openring-in.html \ + &#62; _includes&#47;openring-out.html +bundle exec jekyll build +</code></pre> + +<h2 id="edit-">Edit <code>_config.yml</code></h2> + +<p>Next we need to make sure we exclude our new <code>build-site</code> script file, since we really don&#8217;t need that pushed up to the main server:</p> + +<pre><code># Includes &#47; Excludes +exclude: + - build-site.sh +</code></pre> + +<h2 id="almost-done">Almost Done&#8230;</h2> + +<p>Now you just need to decide where you want your <code>openring</code> feed outputs to render. For this example, we will place them at the bottom of every blog post inside the <code>_layouts&#47;post.html</code> file, like so:</p> + +<pre><code>{% raw %}{% include openring-out.html %}{% endraw %} +</code></pre> + +<h2 id="build-it-they-will-come">Build It &#38; They Will Come</h2> + +<p>This next step is only for those using <a href="https://srht.site">SourceHut Pages</a> to build and host their websites. If you use a different platform (ie Netlify, Vercel, GitHub Pages) the concept should be similar but will most likely require more tweaking on your end. Just a fair warning.</p> + +<p>I won&#8217;t go into great detail about build script for SourceHut Pages, but feel free to take a look at my <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/.build.yml">very own build file for this website</a>. That <em>should</em> work out-of-the-box for most standard Jekyll websites. (Just be sure to edit with your own details!)</p> + +<p><strong>That&#8217;s it</strong>. You now have links to blogs you enjoy that will update with each build. Of course, the &#8220;latest&#8221; blog posts shown will become out-of-date if you don&#8217;t blog (or at least re-build your website) on a regular basis. But for me, I see this as a good motivator to keep pushing out content!</p> + +<p>Happy sharing!</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>Well, as dynamic as a static website can be!</li> +</ol></description> + <link>https://btxx.org/openring</link> + <guid isPermaLink="false">https://btxx.org/openring</guid> + <pubDate>Fri, 02 Dec 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Open Source Typeface Pairings</title> + <description><h1 id="open-source-typeface-pairings">Open Source Typeface Pairings</h1> + +<p>2018-01-25</p> + +<p>I always love finding new typeface pairings to use across my personal and client projects, but I find many suggested pairings come with a hefty price tag (rightly so - premium typefaces are normally always worth their cost).</p> + +<p>So, I&#8217;ve curated this personal list of 5 exceptionally beautiful typeface pairings that will cost you absolutely nothing. Open source FTW.</p> + +<h2 id="et-book-gill-sans">ET-Book &#38; Gill Sans</h2> + +<p>Download: ET Book, Gill Sans</p> + +<h2 id="playfair-display-roboto">Playfair Display &#38; Roboto</h2> + +<p>Download: Playfair Display, Roboto</p> + +<h2 id="karma-open-sans">Karma &#38; Open Sans</h2> + +<p>Download: Karma, Open Sans</p> + +<h2 id="libre-baskerville-oswald">Libre Baskerville &#38; Oswald</h2> + +<p>Download: Libre Baskerville, Oswald</p> + +<h2 id="fanwood-league-spartan">Fanwood &#38; League Spartan</h2> + +<p>Download: Fanwood, League Spartan</p></description> + <link>https://btxx.org/open-source-typeface-pairings</link> + <guid isPermaLink="false">https://btxx.org/open-source-typeface-pairings</guid> + <pubDate>Thu, 25 Jan 2018 00:00:00 +0000</pubDate> + </item> + <item> + <title>My Coffee Maker Just Makes Coffee</title> + <description><h1 id="my-coffee-maker-just-makes-coffee">My Coffee Maker Just Makes Coffee</h1> + +<p>2023-01-09</p> + +<p><img src="/public/images/coffee-couple.svg" alt="Couple drinking cups of coffee" /></p> + +<p>I had to replace my dual Keurig coffee maker <em>twice</em> over a period of five months. This occurred a year ago and these are my findings.</p> + +<h2 id="built-to-fail">Built to Fail?</h2> + +<p>I followed the manufactor&#8217;s suggested cleaning schedule and took care of the appliances. My initial conclusion was that the product&#8217;s design wasn&#8217;t thought-out well. &#8220;It&#8217;s built to fail!&#8221; I said to my wife the morning of the <em>second</em> machine&#8217;s failure. Another product replaced under warranty, while the broken one&#8217;s tossed aside. More e-waste because why not?</p> + +<p>But after some further reflection, I came to realize the &#8220;poor design&#8221; was a symptom of a greater cause:</p> + +<p><strong>The product tries to do too much</strong>.</p> + +<p>I&#8217;m beating a dead horse by referencing <a href="https://suckless.org">suckless</a> software again, but that core philosophy applies here too. Both digital and industrial design suffer from bloat. Far too often I witness fellow designers over-engineer customer requests. Or they add excessive bloat to new product features. It&#8217;s almost a rarity these days to find designers who tackle work as <em>single items</em>. Everything expands. Everything needs to do one little extra &#8220;cool&#8221; thing. Nothing is ever <em>taken away</em>.</p> + +<p>I&#8217;m sure the designers meant well with the creation of this dual coffee maker. It&#8217;s interesting to combine both a standard 12-cup percolator and &#8220;pod-based&#8221; serving options. In theory it sounds quite handy. One appliance that tackles two use-cases. Think of the counter space you&#8217;ll save! </p> + +<p>Unfortunately, in practice, it fails.</p> + +<h2 id="product-decline">Product Decline</h2> + +<p>I&#8217;ve felt product quality decline in both household appliances and software. Companies no longer seem content with doing <em>one thing well</em>. Everyone needs to reach out into many verticals. Everyone copies their competitors.The need to &#8220;grow&#8221; their existing features. Adding things that no one asked for. Products are getting <em>slower</em> and losing focus.</p> + +<p>People tend to place all that blame on top-level management or developers. They do deserve some blame - but not all. Designers cause a lot of these issues on their own and it&#8217;s easy to understand why.</p> + +<p>The design field drops new designers into a <em>world of bloat</em>. They don&#8217;t stand a chance. The initial programs introduced to them are behemoth, proprietary pieces of garbage. No other options are available. No one is making strides in this field of &#8220;design tool software&#8221; because it&#8217;s a massive uphill battle. Those that <em>try</em>, get <a href="https://www.theverge.com/2022/9/15/23354532/adobe-figma-acquisition-20-billion-official">snatched up by existing platforms</a>. Designers don&#8217;t have the luxury of &#8220;choice&#8221; as much as developers do (within reason). It&#8217;s a very locked-down industry.</p> + +<p>So of course designers will carry this mentality into their own work. It&#8217;s all they have known. &#8220;X and Y companies designed their <code>insert-feature-here</code> with all these <em>extras</em>, so we&#8217;ll do the same&#8221;. Everything is <a href="https://invidious.snopyta.org/watch?v=dC1yHLp9bWA">a copy of a copy of a copy</a>.</p> + +<p>The only advice I can give to designers is this: try not to add to the problem. I&#8217;m not asking you to move mountains. But consider working somewhere else if your career only adds more bloat to the world. (Easier said than done, I know). Or keep doing what you&#8217;re doing. What do I know - I&#8217;m only some guy who rambles on the web.</p> + +<h2 id="back-to-the-coffee-maker">Back to the Coffee Maker</h2> + +<p>So the Keurig is gone. Trashed. The company doesn&#8217;t want the product back, they tell you to scrap it. &#8220;We&#8217;ll send you a new one for free&#8221;. Such a waste.</p> + +<p>Instead, I snagged the cheapest and most basic coffee maker I could find. It cost me $12. It has no clock, no programming options, no base settings or cleaning functions. Hell, there aren&#8217;t even level numbers on the water reservoir tank. </p> + +<p>You add your scoops of coffee grounds, along with desired amount of water. Then you switch on the (only) button at the side of the machine. After a handful of minutes, you have coffee.</p> + +<p>And it&#8217;s been running <em>perfect</em> for over 8 months now. I clean it every so often by brewing with a small mixture of vinegar and water. That&#8217;s it. No need for &#8220;specialty cleaners&#8221; that cost almost as much as the machine itself. The points of failure get reduced as well, since the machine is bare-bones. Nothing can break when there is nothing to break&#8230;</p> + +<h2 id="brewing-software">&#8220;Brewing&#8221; Software</h2> + +<p>At least, for me, I plan to only design what <em>needs to be</em>. If someone asks for a &#8220;coffee&#8221;, they&#8217;ll get a cup of hot, black coffee and nothing else.</p></description> + <link>https://btxx.org/one-thing</link> + <guid isPermaLink="false">https://btxx.org/one-thing</guid> + <pubDate>Mon, 09 Jan 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Billing for One CSS Change</title> + <description><h1 id="billing-for-one-css-change">Billing for One CSS Change</h1> + +<p>2019-11-29</p> + +<p>Every second you spend working as a designer should be billed back to the client. A simple button color change? Bill them. Additional links added to an existing menu? Send that invoice over. Some basic typeface changes? Don&#8217;t do it for free.</p> + +<p>You need to be charging for <em>all</em> design work, regardless of difficulty or time required.</p> + +<p>This concept might seem extremely obvious to more senior level workers but I have seen a good amount of junior devs make the mistake of &#8220;working for experience&#8221; or better yet &#8220;strengthening the client relationship&#8221;. Early on in my career I was just as guilty of doing this kind of thing. It was and still is a very foolish practice.</p> + +<h2 id="do-you-really-bill-for-one-css-change">Do you really bill for <em>one</em> CSS change?</h2> + +<p>Absolutely. From the client&#8217;s perspective it may seem like they are being billed for one CSS change and 30 seconds of a designer&#8217;s time. In reality, they are paying for the designer&#8217;s years of experience to be able to solve that problem in <em>only</em> 30 seconds.</p> + +<p>Would the client be happier with a significantly less qualified designer charging the same amount of money but taking 3 <em>hours</em> to complete the task? In the end, what&#8217;s the difference?</p> + +<blockquote> +<p>If it is a simple change that they believe should cost nothing, then why aren&#8217;t they doing it themselves?</p> +</blockquote> + +<p>We as developers and designers work in an odd industry. A lot of people (read clients) outside of our bubble tend to think they have a much better understanding of the work we do. Because of this, they tend to preface work requests with phrases like:</p> + +<ul> +<li>&#8220;This should be a simple change&#8221;</li> +<li>&#8220;This shouldn&#8217;t take more than a couple of minutes&#8221;</li> +<li>&#8220;This seems like an easy fix&#8221;</li> +</ul> + +<p>Most of the time these comments are harmless, but other times they are a subtle way of downplaying your skill and experience required to complete these work items. That skill and experience shouldn&#8217;t ever come free. It makes you wonder if these same people expect free work from trades-people (electricians, plumbers, etc) when they need what they think is a &#8220;simple&#8221; fix in their house.</p> + +<p>Do you think workers in <em>most</em> other industries travel out to someone&#8217;s home and fix &#8220;small&#8221; issues for free? Hell no.</p> + +<p>So why are developers and designers doing work for free? I truly don&#8217;t know - but it needs to stop.</p> + +<h2 id="a-simple-but-useful-system">A simple but useful system</h2> + +<p>You should live by the rule that every <em>second</em> you spend working for someone else is billable. I don&#8217;t mean that you should literally bill per second, but instead round to nearest estimated time slot (whether you are billing hourly, daily, sprint-based or per project). This ensures that your efforts are paid for and that the client will begin to truly value your time. Doing this from the get-go will save you headaches in the future.</p> + +<p>I&#8217;m sorry if this comes off as preachy, but I&#8217;m just trying to inspire designers to value their work more. Don&#8217;t sell yourself short - your talent is valuable and shouldn&#8217;t be taken for granted.</p></description> + <link>https://btxx.org/one-css-property</link> + <guid isPermaLink="false">https://btxx.org/one-css-property</guid> + <pubDate>Fri, 29 Nov 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Obvious Javascript 'Injection' Fallback</title> + <description><h1 id="obvious-javascript-injection-fallback">Obvious Javascript &#8216;Injection&#8217; Fallback</h1> + +<p>2020-12-04</p> + +<p>Sometimes websites and web apps might require content to be &#8220;injected&#8221; via Javascript. I should mention that I am strongly against this practice - but often this kind of thing is out of one&#8217;s hands. So, the least I can do is setup these &#8220;injections&#8221; to have proper fallbacks for users who disable JS. You would be surprised how many developers build <em>empty</em> HTML elements with the assumption they will be filled via Javascript.</p> + +<h2 id="our-hypothetical-project">Our Hypothetical Project</h2> + +<p>Let&#8217;s pretend that we have a total tally that pulls in the number of current users using our fake SaaS app. We would do something like this:</p> + +<h3 id="html">HTML</h3> + +<p>Here we create an empty <code>h2</code> tag that will update with the current number of users via js:</p> + +<pre><code>&#60;main&#62; + &#60;h2 class="total-tally"&#62;&#60;&#47;h2&#62; +&#60;&#47;main&#62; +</code></pre> + +<h3 id="javascript">Javascript</h3> + +<p>You&#8217;ll have to use your imagination here and assume that the <code>totalTally</code> variable pulls in the numbers dynamically via API:</p> + +<pre><code>var totalTally = "273,677" &#47;* This would pull something dynamically in prod *&#47; +document.getElementsByClassName("total-tally")[0].innerHTML=totalTally; +</code></pre> + +<h2 id="the-problem">The Problem</h2> + +<p>The big issue we have now occurs when a user visits this page without JS enabled. The <code>h2</code> tag will remain empty and they won&#8217;t see anything. I know this seems like a very avoidable issue, but you would be surprised how often it actually happens on the web.</p> + +<h2 id="the-overly-simple-solution">The (overly simple) Solution</h2> + +<p>The easiest way to avoid these types of empty tags - add static content. I know - mind blowing, right?</p> + +<h3 id="html-updated">HTML (updated)</h3> + +<pre><code>&#60;main&#62; + &#60;h2 class="total-tally"&#62;200,000+&#60;&#47;h2&#62; +&#60;&#47;main&#62; +</code></pre> + +<p>You might be reading this and saying to yourself, &#8220;Wow! Thanks Captain Obvious!&#8221; and that&#8217;s a fair reaction. This is an <em>obvious</em> demo on purpose. If even one single reader learns to avoid leaving empty HTML tags that are solely dependent on Javascript injection, then I&#8217;d say this demo was a huge success.</p> + +<p>Rule of thumb: don&#8217;t make assumption about your users. Play it safe.</p></description> + <link>https://btxx.org/obvious-js-injection-fallback</link> + <guid isPermaLink="false">https://btxx.org/obvious-js-injection-fallback</guid> + <pubDate>Fri, 04 Dec 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>RE: Creating a Simple HTML/CSS Notice Box</title> + <description><h1 id="re-creating-a-simple-htmlcss-notice-box">RE: Creating a Simple HTML&#47;CSS Notice Box</h1> + +<p>2022-09-22</p> + +<p>I recently read Kev Quirk&#8217;s post, <a href="https://kevquirk.com/how-to-create-a-simple-html-css-notice-box/">How to Create a Simple HTML&#47;CSS Notice Box</a> and loved the simplicity of it. I&#8217;m a sucker for using pseudo elements in creative ways but still managing to make them useful. Of course, this got me thinking as to whether or not the same style of box could be achieved <em>without</em> the use of static, pseudo elements&#8230;</p> + +<h2 id="bad-semantics">Bad Semantics</h2> + +<p>I need to make it clear right away: <strong>these implementations are not semantic</strong>. They are valid HTML, but I am technically using these tags incorrectly. <em>You have been warned!</em></p> + +<h2 id="setting-fieldsets">Setting Fieldsets</h2> + +<p>The first approach is to wrap everything inside HTML <code>fieldset</code> tags:</p> + +<pre><code>&#60;fieldset&#62; + &#60;legend&#62;Notice&#60;&#47;legend&#62; + &#60;p&#62;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam nihil velit vitae sed beatae earum assumenda deleniti, inventore repellendus, sequi distinctio delectus porro explicabo quidem hic quo quasi voluptas temporibus.&#60;&#47;p&#62; +&#60;&#47;fieldset&#62; +</code></pre> + +<p>Then you can include minor styling to closely match the design of Kev&#8217;s notice box:</p> + +<pre><code>fieldset { + border: 3px solid; + font-family: sans-serif; + padding: 30px 10px 10px; + position: relative; +} +fieldset legend { + background: #AACCFF; + border-bottom: 3px solid; + border-right: 3px solid; + left: 0; + margin: 0; + padding: 5px 10px; + position: absolute; + top: 0; + text-transform: uppercase; +} +</code></pre> + +<h2 id="the-devil-is-in-the-details">The Devil is in the Details</h2> + +<p>The other option is utilizing the HTML <code>details</code> tag:</p> + +<pre><code>&#60;details open&#62; + &#60;summary&#62;Notice&#60;&#47;summary&#62; + &#60;p&#62;Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda sequi esse reprehenderit facilis aperiam labore optio minus doloremque nesciunt! Voluptatem esse tempore asperiores recusandae rerum facere, reiciendis officia repudiandae similique?&#60;&#47;p&#62; +&#60;&#47;details&#62; +</code></pre> + +<p>You&#8217;ll obviously want to include the <code>open</code> attribute to avoid users needing to toggle the content manually (unless that is your desired UX). Then add similar styling options to match the <code>fieldset</code> example:</p> + +<pre><code>details { + border: 3px solid; + font-family: sans-serif; + padding: 0 10px 10px; +} +details summary { + background: #AACCFF; + border-bottom: 3px solid; + border-right: 3px solid; + display: inline-block; + margin-left: -10px; + padding: 5px 10px; + text-transform: uppercase; +} +</code></pre> + +<p>Important to note: you can hide the default &#8220;arrow toggle&#8221; on <code>summary</code> elements by including the following:</p> + +<pre><code>details &#62; summary { +list-style: none; +} +details &#62; summary::-webkit-details-marker { +display: none; +} +</code></pre> + +<h2 id="seeing-is-believing">Seeing is Believing</h2> + +<p>I&#8217;ve put together two versions of each implementation (one custom designed and one using default browser styling). You can check them out in the CodePen below:</p> + +<p><a href="https://codepen.io/bradleytaunt/pen/jOxLdQP">Live CodePen Example</a></p></description> + <link>https://btxx.org/notice</link> + <guid isPermaLink="false">https://btxx.org/notice</guid> + <pubDate>Thu, 22 Sep 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>News Websites Are Dumpster Fires</title> + <description><h1 id="news-websites-are-dumpster-fires">News Websites Are Dumpster Fires</h1> + +<p>2019-05-29</p> + +<p>Online news outlets are a dying breed and many users have decided to consume information elsewhere. Why? Because the news industry has become a cesspool of anti-consumer and blackhat practices that has eroded trust for the sake of money.</p> + +<h2 id="what-news-sites-get-wrong">What news sites get wrong</h2> + +<p>I could write up an entire essay about all the shady practices that <em>most</em> news sites are guilty of, but here are just a few top level issues:</p> + +<ul> +<li>Clickbait headings with misleading information</li> +<li>Disabling the user from reading if ad-block is present</li> +<li>Tracking the user with 3rd party scripts</li> +<li>Taking massive performance hits (specifically on mobile due to huge JavaScript blocks)</li> +<li>Pop-up ads</li> +<li>Fixed headers or footers which leads to harder readability &#47; accidental element interactions</li> +</ul> + +<h2 id="but-they-need-ad-revenue">But they need ad revenue!</h2> + +<p>If your business is solely dependent on tracking scripts, tricking users with clickbait titles and using archaic ads - then you&#8217;re destined to fail regardless. These practices create an unsafe and unhealthy web for everyday users - not to mention most browsers have announced that future updates <a href="https://support.mozilla.org/en-US/kb/content-blocking">will be blocking ads by default</a>. <em>News outlets need to adapt or die</em>.</p> + +<h2 id="whats-the-solution">What&#8217;s the solution?</h2> + +<p>I don&#8217;t have a <em>fix all</em> band-aid to replace current revenue streams for news websites. I&#8217;m sure someone much smarter than I can come up with better ideas, but just off the top of my head:</p> + +<ul> +<li>Switch over to a monthly subscription plan (if no one pays for it maybe you weren&#8217;t as useful of a source as you thought)</li> +<li>Partner with brands to create sponsored articles (without ruining the user experience of course)</li> +<li>Place a larger emphasis on user donations or promotions</li> +</ul> + +<h2 id="the-news-shouldnt-be-spam">The News Shouldn&#8217;t be Spam</h2> + +<p>Most traffic flowing into news websites are there for one thing: <em>the content</em>. News outlets should not be spamming their main revenue supply (<strong>the users</strong>) or misleading people with false information.</p> + +<p>If you&#8217;re a regular consumer of news and you happen to run across a platform that is guilty of any of these practices, shoot them an email explaining why you won&#8217;t be returning to their website (unless they change their ways). These anti-consumer practices will only stop when these organizations start losing money.</p></description> + <link>https://btxx.org/news-websites-are-dumpster-fires</link> + <guid isPermaLink="false">https://btxx.org/news-websites-are-dumpster-fires</guid> + <pubDate>Wed, 29 May 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Using Netlify for Dynamic URL Redirects</title> + <description><h1 id="using-netlify-for-dynamic-url-redirects">Using Netlify for Dynamic URL Redirects</h1> + +<p>2021-12-03</p> + +<p>With the <a href="/minor-website-changes/">recent domain switch</a> that took place on this website, I needed to have a dependable setup to forward my old domain URLs to the new one. While using something like &#8220;URL forwarding&#8221; through your domain provider could work, it doesn&#8217;t natively support <em>dynamic</em> linking. Let me explain using a basic example:</p> + +<ul> +<li>A user clicks on a link that targets a post on your old domain: <code>olddomain.com&#47;random-post</code></li> +<li>You want that link to forward using the same permalink structure: <code>newdomain.com&#47;random-post</code></li> +<li>&#8220;URL forwarding&#8221; through your domain provider <strong>does not</strong> support this</li> +</ul> + +<p>Simple stuff. So, let&#8217;s breakdown how to easily set this up on Netlify <em>for free</em>.</p> + +<h2 id="setting-up-netlify">Setting Up Netlify</h2> + +<ul> +<li><p>Create an account (or login to an existing one) and setup a new site[^1]</p></li> +<li><p>Change your &#8220;old&#8221; domain name nameservers to match Netlify&#8217;s (normally done through your domain register) + +<ul> +<li><code>dns1.p03.nsone.net</code></li> +<li><code>dns2.p03.nsone.net</code></li> +<li><code>dns3.p03.nsone.net</code></li> +<li><code>dns4.p03.nsone.net</code></li> +</ul></p></li> +<li><p>Back in Netlify: under <strong>Domain Settings</strong> you need to add your custom &#8220;old&#8221; domain under the <strong>Custom domains</strong> section under <strong>Domain management</strong></p></li> +<li><p>Lastly, add the following content inside a <code>_redirects</code> file (no extension) to your website content&#47;build (changing to your own domains, of course)</p> + +<p><a href="https://olddomain.com/*">https:&#47;&#47;olddomain.com&#47;*</a> <a href="https://newdomain.com/:splat">https:&#47;&#47;newdomain.com&#47;:splat</a> 301!</p></li> +</ul> + +<p>That&#8217;s it! Now Netlify will dynamically forward all your pre-existing URLs from your old domain to the new one. No pesky <code>.htaccess</code> files or running your own basic web server(s)!</p> + +<p>Hopefully this helps others trying to dynamically redirect their domains without the headache.</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>I normally set this up through Github &#47; git hosting</li> +</ol></description> + <link>https://btxx.org/netlify-urls</link> + <guid isPermaLink="false">https://btxx.org/netlify-urls</guid> + <pubDate>Fri, 03 Dec 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>CSS: Indenting Text</title> + <description><h1 id="css-indenting-text">CSS: Indenting Text</h1> + +<p>2019-04-05</p> + +<p>A lot of developers tend to do the bare minimum when it comes to implementing proper website typography. This isn&#8217;t an insult - I&#8217;m happy that typography is given any thought at all during development, I just believe more can always be done to improve upon it.</p> + +<p>In today&#8217;s <em>TypeTip</em> we&#8217;re going to play around with the <code>text-indent</code> property, look into when it&#8217;s best to use it and how to implement it properly.</p> + +<h2 id="the-property-and-browser-support">The property and browser support</h2> + +<p>Browser support is actually pretty great for such a regularly over-looked CSS property. All major desktop and mobile browsers support it:</p> + +<p>Now that doesn&#8217;t mean you should just slap this property on all your type elements and call it a day - there are specific use cases for <code>text-indent</code> and some basic rules to follow:</p> + +<h2 id="use-cases">Use Cases</h2> + +<ol> +<li>Increasing readability of large text blocks that would otherwise overwhelm the reader</li> +<li>Replicating book or report typography layouts</li> +</ol> + +<h2 id="basic-rules">Basic Rules</h2> + +<ol> +<li>Best to set this property on inner type children only - meaning items like <code>p</code> or <code>blockquotes</code> instead of main headings</li> +<li>When used on paragraph tags it&#8217;s best to target only <code>p</code> elements that directly follow a sibling tag (see &#8220;The CSS&#8221; below)</li> +</ol> + +<h2 id="the-css">The CSS</h2> + +<p>Adding the property is extremely trivial, all you need is the following:</p> + +<pre><code>&#47;* Best practice for paragraphs *&#47; +p + p { + text-indent: 1rem; &#47;* whatever you want *&#47; +} +</code></pre> + +<h2 id="lets-see-it-in-action">Let&#8217;s see it in action</h2> + +<p><a href="https://codepen.io/bradleytaunt/pen/OGXLEd/">Live CodePen Example</a></p></description> + <link>https://btxx.org/ndenting-text-with-css</link> + <guid isPermaLink="false">https://btxx.org/ndenting-text-with-css</guid> + <pubDate>Fri, 05 Apr 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>My Static Blog Publishing Setup and an Apology to RSS Subscribers</title> + <description><h1 id="my-static-blog-publishing-setup-and-an-apology-to-rss-subscribers">My Static Blog Publishing Setup and an Apology to RSS Subscribers</h1> + +<p>2022-03-21</p> + +<p>In case you missed it, this website is now generated with pure HTML &#38; CSS. Although, generated isn&#8217;t the proper way to describe it anymore. <em>Written</em> is a better description.</p> + +<p>No more Markdown files. No more build scripts. No more Jekyll. Clean, simple, static HTML &#38; CSS is my &#8220;CMS&#8221;. More on that in a moment. First, I must apologize.</p> + +<h2 id="im-sorry-dear-rss-subscribers">I&#8217;m Sorry Dear RSS Subscribers</h2> + +<p>RSS feeds are tricky things for me personally. I always botch them with a site redesign or a re-structure of my previous posts. Those of you subscribed via RSS were likely bombarded with post spam when I rebuilt this website. Sorry about that - I know how annoying that can be.</p> + +<p>Fortunately, that all stops today. Moving forward my RSS feed (Atom) will be edited manually with every new post I write. Each entry will feature the post title, post url, and post date. No summaries or full-inline content will be included (since that would involve a great amount of extra overhead). RSS subs will need to follow the link directly if they are interested in the article itself. I hope this doesn&#8217;t anger too many readers&#8230;</p> + +<p>Again, sorry everyone.</p> + +<h2 id="what-is-this-new-blog-system">What is this New Blog &#8220;System&#8221;</h2> + +<p>This publishing flow isn&#8217;t for everyone and is less flexible than pre-existing static site generators (referred to as SSGs moving forward). For me though, it works. I find it more flexible than most SSGs.</p> + +<p>There are a couple articles that explain the reasoning behind this system better than I could (plus, why would I repeat the same points?):</p> + +<ul> +<li><a href="http://john.ankarstrom.se/html/">Writing HTML in HTML</a></li> +<li><a href="https://blog.steren.fr/2020/my-stack-will-outlive-yours/">My stack will outlive yours</a></li> +</ul> + +<p>So, what does my blog-posting system look like?</p> + +<h2 id="simple-explanation">Simple Explanation</h2> + +<ol> +<li>Copy an existing article&#8217;s <code>HTML</code> file</li> +<li>Change file name, edit the page title, heading, post date and comment link</li> +<li>Write the new article content</li> +<li>Make manual new entry in RSS feed</li> +<li>Save changes, push to git repo</li> +<li>Sync new file(s) &#47; changes to remote server</li> +</ol> + +<p>Pretty simple, eh? Let&#8217;s break things down into greater detail though&#8230;</p> + +<h2 id="detailed-explanation">Detailed Explanation</h2> + +<h4 id="text-editor">Text Editor</h4> + +<p>I code and write everything exclusively in Sublime Text on my MacBook Air. I know, it&#8217;s not an open source editor, but I love how incredibly fast and intuitive it is. I used VSCode in the past but ended up requiring far too many plugins to get things setup the way I like it. Sublime Text works best for me even right out of the box. (I do need Emmet and theming changes though).</p> + +<p>I perform the following for a new article:</p> + +<ul> +<li>Copy an existing article, ie. <code>blog-post-1.html</code></li> +<li>Rename article file name, ie. <code>blog-post-2.html</code></li> +<li>Open this newly created file and change: + +<ul> +<li>page <code>title</code> tag</li> +<li>page <code>h1</code> heading and top bar text</li> +<li><code>time</code> tag to match publish date</li> +<li>comment <code>mailto:</code> link url</li> +</ul></li> +<li>Start writing content inside the <code>article</code> section</li> +</ul> + +<p>Once the article is complete, I add a static entry in my <code>feed.xml</code> and run a crude rsync script. More on that below.</p> + +<h4 id="git">Git</h4> + +<p>Normally I would pull, commit and push directly in my Terminal - but lately I&#8217;ve been enjoying my time using Sublime Merge. I&#8217;m a sucker for visually appealing GUI applications and Merge is the perfect balance of simplicity and beauty. I recommend it if you haven&#8217;t tried it yet.</p> + +<h4 id="hosting">Hosting</h4> + +<p>This blog is now hosted through NearlyFreeSpeech. I could opt for a free service like Netlify or DigitalOcean Apps but I feel it&#8217;s important to help support communities that align with my own core beliefs. From their <a href="https://www.nearlyfreespeech.net/about/">about page</a>:</p> + +<blockquote> +<p>NearlyFreeSpeech.NET is about three things: fairness, innovation, and free speech.</p> +</blockquote> + +<p>Hard to argue with those principles. If you&#8217;re feeling generous, I&#8217;d greatly appreciate anyone who considers contributing to <a href="https://www.nearlyfreespeech.net/contribute/tdarb.org">offset this website&#8217;s hosting costs through NearlyFreeSpeech</a> (code: tdarb). No money is directly handed to me, it pays NFS directly for hosting fees. Donate if you feel like this humble blog of mine has helped you in any way. No pressure!</p> + +<p>NFS gives me server access via <code>SSH</code> (and even <code>SFTP</code> if I desire) which makes things simple to sync my local files with production code. This is handled via rsync with a basic <code>deploy.sh</code> script:</p> + +<pre><code>rsync -vrzc --exclude &#39;deploy.sh&#39; --exclude &#39;.git&#39; --delete .&#47; username@my.remote.nfs.server: +</code></pre> + +<p>The included parameters ensure files with a conflicting checksum are updated on the server, instead of re-syncing all the files every time the script runs. That would be overkill.</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>I love this new setup. It&#8217;s portable, lightweight, has zero dependencies, and gives me the opportunity to write directly in HTML. Others may find this workflow idiotic or cumbersome but I couldn&#8217;t disagree more. Site wide changes can be made with simple <code>Find&#47;Replace</code> actions or even whipping up a basic script. Things should be as complex as you wish to make them!</p> + +<p>At the end of the day, anything that helps you be more efficient and gets you producing more content is a winning strategy in my book. Who knows, this concept could even inspire one random reader out there to do the same.</p></description> + <link>https://btxx.org/my-static-blog-publishing-setup</link> + <guid isPermaLink="false">https://btxx.org/my-static-blog-publishing-setup</guid> + <pubDate>Mon, 21 Mar 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>My Raspberry Pi Desktop</title> + <description><h1 id="my-raspberry-pi-desktop">My Raspberry Pi Desktop</h1> + +<p>2020-09-02</p> + +<p>I use a Raspberry Pi 4 as my personal daily driver and it&#8217;s pretty great. I know these types of devices tend to be used for smaller pet-projects or fun experiments, but I thought I would share my experience using one as my main computer. Hopefully this can be a solid guide to help others who might be interested in creating a similar setup.</p> + +<p>My desktop Pi working away on a regular morning:</p> + +<h2 id="table-of-contents">Table of Contents</h2> + +<ol> +<li><a href="#use-case">My Use Case</a></li> +<li><a href="#hardware">The Hardware</a></li> +<li><a href="#software">The Software</a></li> +<li><a href="#stats">Performance &#38; Stats</a></li> +</ol> + +<p>I&#8217;m a web designer and developer by trade. Therefore, I require a decent amount of functionality from my computer - more than just simple web browsing and document editing. When I first set out testing if the RPi4 <em>could</em> become my main device, I was surprised at how capable the hardware &#47; software was at running all my required applications. My workload comprises of:</p> + +<ul> +<li>Using Github&#47;Gitlab to pull&#47;push repos, open PRs, etc</li> +<li>Run SSG (Jekyll mostly) locally for testing</li> +<li>Run multiple WordPress instances locally</li> +<li>Edit design files (Photoshop, Illustrator, direct SVGs)</li> +<li>Simple web chat &#47; email</li> +</ul> + +<p>Basic stuff, but I was originally doubtful of the RPi4 to be able to handle it all smoothly. I&#8217;m happy to say I was wrong.</p> + +<p>The following hardware list is what I use specifically for my intended use case. I&#8217;m also a sucker for having cool looking SBC builds. By no means is this the &#8220;best setup&#8221; for everyone - I&#8217;m sure other combinations of gear might better suit your own personal needs.</p> + +<blockquote> +<p><strong>Note</strong>: products in the hardware section are Amazon affiliate links</p> +</blockquote> + +<ul> +<li>Raspberry Pi 4</li> +<li>X857 V1.0 mSATA SSD Shield Expansion Board (I&#8217;m using the X856)</li> +<li>128GB mSATA SSD</li> +<li>Acrylic Case with Heatsinks &#38; Fan</li> +<li>Raspberry Pi Keyboard &#38; Mouse</li> +<li>21.5&#8221; Acer Monitor</li> +</ul> + +<p>The 32-bit version of Raspberry Pi OS (&#8216;Debian Buster&#8217; at the time of writing) is my OS of choice. Stable, reliable, and officially supported by the RPi community. It does the job.</p> + +<p>The Pi has been overclocked to 2GHz in order to squeeze just a <em>little</em> extra out of the hardware. This has caused zero issues.</p> + +<p>I&#8217;m also booting directly from the mSATA SSD (via USB booting) instead of relying on a slower microSD card. You can find tons of tutorials online on how to do the same, but I would recommend this one: <a href="https://www.tomshardware.com/how-to/boot-raspberry-pi-4-usb">How to Boot Raspberry Pi 4 From a USB SSD or Flash Drive</a></p> + +<p>After that, I simply installed my required apps &#47; configs (where applicable):</p> + +<ul> +<li>Chromium (<em>preinstalled</em>)</li> +<li>Firefox ESR</li> +<li>Pale Moon</li> +<li>Code OSS</li> +<li>Terminal (<em>preinstalled</em>)</li> +<li>Libre Office Suite</li> +<li>Evolution</li> +<li>Figma (Web - no install needed)</li> +<li>Apache2 &#47; MySQL</li> +<li>Blueman (helpful GUI for bluetooth)</li> +</ul> + +<p>What my plain desktop looks like:</p> + +<p>Using this build day-to-day, I can honestly say I don&#8217;t hit any hiccups or lag at all. Multiple applications and WordPress instances are running in the background, while 10-15 tabs are open in the Chromium browser. The little Pi just chugs along without breaking a sweat.</p> + +<p>My average CPU temperature sits around 51&#176; (with heatsinks &#38; fan active) while CPU usage never really cranks past 90% during even &#8220;intensive&#8221; processes.</p> + +<p>Since <em>actual</em> data speaks louder than anecdotal chit-chat, I performed a very simple read&#47;write test on my mSATA SSD.</p> + +<p>First, clear the cache to avoid conflicting data:</p> + +<pre><code>sync; echo 3 | sudo tee &#47;proc&#47;sys&#47;vm&#47;drop_caches +</code></pre> + +<h3 id="write">Write</h3> + +<p>Write script run:</p> + +<pre><code>dd if=&#47;dev&#47;zero of=~&#47;test.tmp bs=500K count=1024 +</code></pre> + +<p>Write output:</p> + +<pre><code>524288000 bytes (524 MB, 500 MiB) copied, 1.95478 s, 268 MB&#47;s +</code></pre> + +<h3 id="read">Read</h3> + +<p>Read script:</p> + +<pre><code>dd if=~&#47;test.tmp of=&#47;dev&#47;null bs=500K count=1024 +</code></pre> + +<p>Read output:</p> + +<pre><code>524288000 bytes (524 MB, 500 MiB) copied, 0.770993 s, 680 MB&#47;s +</code></pre> + +<p>This gives a total read&#47;write value of: <strong>268 MB &#47; 680 MB</strong> per second. Compare that to average microSD card speeds floating around <strong>22 MB &#47; 170MB</strong> per second and you can see (and feel) the massive speed difference. Things are just snappier.</p> + +<p><strong>Note</strong>: Obviously extremely high-end (read: expensive) microSD cards <em>might</em> hit read&#47;write speeds similar to that of an SSD. The issue is that you are more likely to corrupt or reach end-of-life with a microSD card - hence why I don&#8217;t recommend them.</p> + +<h2 id="final-thoughts">Final Thoughts</h2> + +<p>I love that I can use a fairly cheap Raspberry Pi 4 as my main, personal desktop. Of course, some people might roll their eyes at this build and say, &#8220;why not just get a cheaper, more powerful laptop off eBay?&#8221;. To that I would respond: <em>you&#8217;re missing the point</em>. </p> + +<p>It was fun to put together this simple desktop. The fact that it runs fast and stable enough to be my daily driver is a great bonus. If this build interests you at all, I highly recommend giving it a go.</p></description> + <link>https://btxx.org/my-pi-desktop</link> + <guid isPermaLink="false">https://btxx.org/my-pi-desktop</guid> + <pubDate>Wed, 02 Sep 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Using Multiple CSS Background Images</title> + <description><h1 id="using-multiple-css-background-images">Using Multiple CSS Background Images</h1> + +<p>2018-09-28</p> + +<p>It isn&#8217;t something developers have a need to do very often, but you <em>can</em> set multiple background images on a single element.</p> + +<p>Example:</p> + +<pre><code>.element { + background: url(&#39;image_path&#39;) center repeat, linear-gradient(transparent 0%, #000 100%) no-repeat; +} +</code></pre> + +<p>What can you do with this? It&#8217;s only limited by your imagination, but I&#8217;m personally a fan of always using as few elements as possible when working on a project.</p></description> + <link>https://btxx.org/multiple-css-background-images</link> + <guid isPermaLink="false">https://btxx.org/multiple-css-background-images</guid> + <pubDate>Fri, 28 Sep 2018 00:00:00 +0000</pubDate> + </item> + <item> + <title>Why I Stopped Using an External Monitor</title> + <description><h1 id="why-i-stopped-using-an-external-monitor">Why I Stopped Using an External Monitor</h1> + +<p>2023-03-03</p> + +<p>For the longest time I&#8217;ve been using a Samsung 27&#8221; UHD monitor as my main display. This monitor was connected to my ThinkPad X260 (in clamshell mode) through the official Lenovo dock. It wasn&#8217;t a bad setup, but I have since changed my ways.</p> + +<p>Instead, I now <em>only</em> use the X260&#8217;s panel as my main display. Let me explain my reasoning&#8230;</p> + +<h2 id="the-switch-to-suckless">The Switch to Suckless</h2> + +<p>Over the past year I switched away from a traditional desktop environment to a window manager - <a href="https://dwm.suckless.org/">dwm</a> to be specific. This also involved changing most of my daily software programs to utilize the full suckless &#8220;suite&#8221;. In doing so, the shift away from floating windows and virtualized desktops happened quickly.</p> + +<p>I continued to use my UHD monitor with this new environment but slowly started running into minor (yet still inconvenient) roadblocks:</p> + +<ul> +<li>Tiled mode was not the most optimized for such a large monitor. I found myself defaulting into &#8220;floating&#8221; mode which defeats the purpose of a WM.</li> +<li>The screen was almost <em>too</em> large - making content placed on the far edges of the screen difficult to view at a glance.</li> +<li>I stopped using tags, since I ended up piling applications on top of one another in a single view. Again - defeating the point of a WM.</li> +</ul> + +<p>All of these issues were close to making me ditch the external monitor altogether, but it was my day-to-day job that struck the final blow&#8230;</p> + +<h2 id="designing-for-everyday-users">Designing for Everyday Users</h2> + +<p>As a UX&#47;UI front-end designer by trade, my job requires me to create and tweak interfaces that essentially go <em>unnoticed</em> by the end-users. If you finish a task you sought out to complete without even thinking about <em>how</em> you did it - then I succeeded at my job. The problem is, we designers and developers tend to forget the constraints a majority of our users experience. In this case - screen resolution.</p> + +<p><a href="https://www.browserstack.com/guide/ideal-screen-sizes-for-responsive-design">A study performed by BrowserStack via statcounter (2022)</a> shows the worldwide market share based on device type:</p> + +<ul> +<li>58.33% mobile</li> +<li>39.65% desktop</li> +<li>2.02% tablet</li> +</ul> + +<p>The mobile aspect is certainly important, but we are focusing on the desktop data. Of that total the top two screen resolutions are:</p> + +<ul> +<li>1920×1080 (9.94%)</li> +<li>1366×768 (6.22%)</li> +</ul> + +<p>That is a fairly significant chunk of desktop users. Although almost 10% have access to screens set at <code>1920x1080</code>, I found the amount of those stuck at <code>1366x768</code> to be quite shocking. Here I was, developing large-set interfaces on an UHD 4K monitor while a large portion of my end-users would never benefit from those &#8220;pixel-perfect&#8221; designs. </p> + +<p>Hell, some of these users were being shown the <em>tablet</em>-based view of the applications since our breakpoints were so ridiculously large. Yikes.</p> + +<p>So, I said screw it and retired the external monitor. Now my X260 is propped up and proudly showing off its 1366x768 display. It only took a day or so to adapt to this new setup and I don&#8217;t think I could go back to another massive display.</p> + +<p>Here are some benefits at a glance:</p> + +<ul> +<li>I no longer have to worry about &#8220;context switching&#8221; if I decide to un-dock my laptop and work somewhere mobile. The desktop experience remains intact.</li> +<li>Working inside <code>dwm</code> is a much cleaner experience. I mostly operate single applications within their own confined tag - with some exceptions of course.</li> +<li>I&#8217;m able to instantly understand frustrations of everyday users while developing new features or tweaking existing UIs. Being able to advocate for our end-users by using legit use cases is extremely helpful. (Removes the &#8220;design by gut-feeling&#8221; mistakes)</li> +</ul> + +<h2 id="a-little-extreme">A Little Extreme</h2> + +<p>Yes, I am aware that I could simply keep the UHD monitor and perform my work within a constrained portion of the screen. The problem that remains is &#8220;quality&#8221;. Most 1366x768 panels are not even close to the level of hi-res found on most 4K monitors. By using such a display I would be cheating myself of the standard experience a good portion of my end-users endure. </p> + +<p>I want to see the fuzzy text, slightly blurred imagery and muted button shadows. I want to see these things because that&#8217;s how some <em>users</em> will experience it.</p> + +<p>Maybe that&#8217;s extreme - but it works for me.</p></description> + <link>https://btxx.org/monitor</link> + <guid isPermaLink="false">https://btxx.org/monitor</guid> + <pubDate>Fri, 03 Mar 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Installing Older Versions of MongoDB on Arch Linux</title> + <description><h1 id="installing-older-versions-of-mongodb-on-arch-linux">Installing Older Versions of MongoDB on Arch Linux</h1> + +<p>2023-09-11</p> + +<p>I&#8217;ve recently been using Arch Linux for my main work environment on my ThinkPad X260. It&#8217;s been great. As someone who is constantly drawn to minimalist operating systems such as Alpine or OpenBSD, it&#8217;s nice to use something like Arch that boasts that same minimalist approach but with greater documentation&#47;support.</p> + +<p>Another major reason for the switch was the need to run older versions of &#8220;services&#8221; locally. Most people would simply suggest using Docker or vmm, but I personally run projects in self-contained, personalized directories on my system itself. I am aware of the irony in that statement&#8230; but that&#8217;s just my personal preference.</p> + +<p>So I thought I would share my process of setting up an older version of MongoDB (3.4 to be precise) on Arch Linux.</p> + +<h2 id="aur-to-the-rescue">AUR to the Rescue</h2> + +<p>You will need to target the specific version of MongoDB using the very awesome AUR packages:</p> + +<pre><code>yay -S mongodb34-bin +</code></pre> + +<p>Follow the instructions and you&#8217;ll be good to go. Don&#8217;t forget to create the <code>&#47;data&#47;db</code> directory and give it proper permissions:</p> + +<pre><code>mkdir -p &#47;data&#47;db&#47; +chmod -R 777 &#47;date&#47;db +</code></pre> + +<h2 id="what-about-my-tools">What About My &#8220;Tools&#8221;?</h2> + +<p>If you plan to use MongoDB, then you most likely want to utilize the core database tools (restore, dump, etc). The problem is you can&#8217;t use the default <code>mongodb-tools</code> package when trying to work with older versions of MongoDB itself. The package will complain about conflicts and ask you to override your existing version. This is <em>not</em> what we want.</p> + +<p>So, you&#8217;ll have to build from source locally:</p> + +<pre><code>git clone https:&#47;&#47;github.com&#47;mongodb&#47;mongo-tools +cd mongodb-tools +.&#47;make build +</code></pre> + +<p>Then you&#8217;ll need to copy the built executables into the proper directory in order to use them from the terminal:</p> + +<pre><code>cp bin&#47;* &#47;usr&#47;local&#47;bin&#47; +</code></pre> + +<p>And that&#8217;s it! Now you can run <code>mongod</code> directly or use <code>systemctl</code> to enable it by default. Hopefully this helps anyone else curious about running older (or even outdated!) versions of MongoDB.</p></description> + <link>https://btxx.org/mongodb-arch</link> + <guid isPermaLink="false">https://btxx.org/mongodb-arch</guid> + <pubDate>Mon, 11 Sep 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Using a New Domain and Switching Static Hosts</title> + <description><h1 id="using-a-new-domain-and-switching-static-hosts">Using a New Domain and Switching Static Hosts</h1> + +<p>2021-11-25</p> + +<p>As you can most likely tell by looking at your browser&#8217;s URL - I&#8217;ve swapped over to a new domain for my personal website: <a href="https://tdarb.org">tdarb.org</a>. I&#8217;m a fickle person and this is a random change - but it is one I&#8217;ve been planning to do for some time.</p> + +<p>Let me give some minor background information and then get into the changes&#8230;</p> + +<h2 id="what-about-ugly-duck">What about Ugly Duck?</h2> + +<p>I had originally used the <a href="https://uglyduck.ca">uglyduck.ca</a> domain for this personal blog as a <em>loosely</em> based reference to the &#8220;ugly duckling&#8221; story. This was based on the fact that I <em>mainly</em> focus on CSS and making the web more visually appealing - or beautiful, if you will - so the comparison to an ugly duckling becoming a swan made sense in my oddball mind.</p> + +<p>But overtime I came to somewhat dislike[^1] it and set out to change it.</p> + +<h2 id="so-what-the-heck-is-tdarb">So what the heck is &#8220;tdarb&#8221;?</h2> + +<p>I explain this on my updated <a href="/about">about page</a> but I will mention it again here:</p> + +<p><strong>tdarb</strong>[^2] is simply my first name and last initial spelt backwards – Brad T. Mind blowing, right?</p> + +<p>I&#8217;ve switched over to this naming convention to avoid having such a random &#8220;phrase&#8221; domain name while at the same time having a little more fun than just <em>mylegalname.com</em>. I also am a sucker for <code>.org</code> TLDs (although I don&#8217;t know why).</p> + +<p>I&#8217;m sure some readers will prefer it, some will be indifferent and others will hate it. Either way, it&#8217;s my personal site and I&#8217;ll do as I please!</p> + +<h2 id="breaking-my-website-for-a-day-and-fixing-potential-link-rot">Breaking My Website for a Day and Fixing Potential Link Rot</h2> + +<p>The transition I made yesterday from <a href="https://uglyduck.ca">uglyduck.ca</a> to <a href="https://tdarb.org">tdarb.org</a> was <em>rough</em>. I thought that I could simply launch the identical content on the new domain, test everything, and then simply set a URL redirect from the old domain through Namecheap[^3]. Oh boy, was I wrong!</p> + +<p>The bulk of my evening was spent figuring out why the redirect wouldn&#8217;t propagate across all networks and why multiple forwards were occurring. In the end, I just tossed <a href="https://uglyduck.ca">uglyduck.ca</a> back up on Netlify and set global redirect rules in their handy-dandy <code>_redirects</code> file. (I will write-up a small post about this soon to help others). After a few minutes everything was working perfectly fine and best of all - no broken links or potential link rot! All thanks to the <code>:splat</code> parameter in the redirects.</p> + +<p>As for my RSS feed, everything <em>should</em> forward correctly? I state that as a question since I can&#8217;t confirm this 100% and RSS feeds are not my expertise. If I broke this for any of you, I apologize. I will pray to the internet gods for your forgiveness&#8230;</p> + +<h2 id="from-github-to-sourcehut">From Github to Sourcehut</h2> + +<p>That&#8217;s right, I&#8217;ve switched this static site&#8217;s hosting over to <a href="https://srht.site">sourcehut pages</a> and couldn&#8217;t be happier. My reasons for switching:</p> + +<ol> +<li>I&#8217;m happy to pay and support the ongoing work at sourcehut (open source alternatives to Netlify, Github, etc. is important)</li> +<li>I&#8217;ve been wanting to become more comfortable with the sourcehut ecosystem - there might be projects in the future I would like to help with on that platform and it helps if you know how to use it :P</li> +<li>Sourcehut pages are fast - I mean <em>really</em> fast</li> +</ol> + +<p>It <em>was</em> slightly confusing for my ape brain to figure out the setup, but I got there eventually. I plan to do a detailed step-by-step tutorial to help those like me who may find it a little daunting. It&#8217;s well worth the minor effort.</p> + +<h2 id="the-lifespan-of-uglyduck.ca">The Lifespan of uglyduck.ca</h2> + +<p>I still have ownership of the old domain for almost another full year. I feel like that gives users enough time to adjust and become accustomed to the new one. My plan is to let the domain die entirely when it goes up for renewal but who knows - I might very well keep it going if the mood strikes me.</p> + +<h2 id="thats-all-folks">That&#8217;s All Folks!</h2> + +<p>I don&#8217;t have much else to report besides having made minor tweaks to this website design (yet again) and I have also finally added a picture of <a href="/uses">workstation on the &#8220;Things I Use&#8221; page</a>. That&#8217;s it.</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>not <em>hate</em> - just discontent</li> +<li>pronounced tee-darb</li> +<li>Namecheap support were very helpful - this was more of a limitation of what their redirects can do</li> +</ol></description> + <link>https://btxx.org/minor-website-changes</link> + <guid isPermaLink="false">https://btxx.org/minor-website-changes</guid> + <pubDate>Thu, 25 Nov 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Minimal CSS: Dropdown Menu</title> + <description><h1 id="minimal-css-dropdown-menu">Minimal CSS: Dropdown Menu</h1> + +<p>2019-04-26</p> + +<p>I love the idea of stripping away as much CSS as possible, while still maintaining the original UI concept. Let&#8217;s build out a demo example with a simple menu dropdown element.</p> + +<p>Interesting facts about our final CSS menu:</p> + +<ul> +<li>Total weight 121 bytes minified! (not including any resets etc.)</li> +<li>No complex HTML structures</li> +<li>Accessibility support</li> +</ul> + +<p>Now to see the final code in all it&#8217;s glory:</p> + +<h3 id="html">HTML</h3> + +<pre><code>&#60;nav&#62; + &#60;ul&#62; + &#60;li&#62;&#60;a href=""&#62;Home&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;About&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Services&#60;&#47;a&#62; + &#60;ul&#62; + &#60;li&#62;&#60;a href=""&#62;Design&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Development&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Custom Pizzas&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;&#47;ul&#62; + &#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Contact&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;&#47;ul&#62; +&#60;&#47;nav&#62; +</code></pre> + +<h3 id="css">CSS</h3> + +<pre><code>&#47;* resets - optional *&#47; +ul { list-style: none; padding: 0; } +ul li { display: inline-block; position: relative; } + +&#47;* minimal dropdown CSS *&#47; +ul li &#62; ul { + left: -9999px; + position: absolute; + visibility: hidden; +} +ul li:hover &#62; ul, ul li:focus-within &#62; ul { + left: 0; + visibility: visible; +} +</code></pre> + +<h2 id="live-demo-on-codepen">Live demo on CodePen</h2> + +<p>Feel free to check out the live demo on CodePen <a href="https://codepen.io/bradleytaunt/pen/MRLevy">here</a>.</p></description> + <link>https://btxx.org/minimal-css-menu</link> + <guid isPermaLink="false">https://btxx.org/minimal-css-menu</guid> + <pubDate>Fri, 26 Apr 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Mini Interactive Keyboard with Pure CSS</title> + <description><h1 id="mini-interactive-keyboard-with-pure-css">Mini Interactive Keyboard with Pure CSS</h1> + +<p>2020-05-13</p> + +<p>Lately, I&#8217;ve become obsessed with trying to see what I can create using only HTML and CSS (besides websites of course). Since playing with the concept of <a href="https://uglyduck.ca/fake-3d-elements-with-css/">faking 3D elements</a>, I wanted to circle back around to an older CodePen I created: a mini, interactive undo keyboard.</p> + +<h2 id="see-it-in-action">See it in action</h2> + +<p>Below you can view a live demo of the mini keyboard itself. This demo is nothing special, but takes design inspiration from Apple&#8217;s magic keyboards (if that wasn&#8217;t already obvious).</p> + +<p><img src="/public/images/undo-keyboard.png" alt="Undo keyboard with two buttons to click" /></p> + +<p><a href="https://codepen.io/bradleytaunt/pen/PadQMP">Live CodePen Example</a></p> + +<p>So now that we have seen what we plan to build, let&#8217;s break down the process of creating this stupid, fun project!</p> + +<h2 id="the-html">The HTML</h2> + +<p>The core skeleton of this project is very simple, since the keyboard consists of only 2 interactive buttons on top of a basic base element: </p> + +<ul> +<li><p>Keyboard base</p></li> +<li><p>Command button</p></li> +<li><p>&#8216;Z&#8217; letter button</p></li> +</ul> + +<h2 id="the-css">The CSS</h2> + +<p>Here is where all the magic happens. Let&#8217;s break these elements into their own sections, starting with the <strong>base styling</strong>:</p> + +<pre><code>&#47;* Custom typeface *&#47; +@import url("https:&#47;&#47;fonts.googleapis.com&#47;css?family=Muli"); + +&#47;* Basic layout styling *&#47; +body { +background: #d2dcff; +margin: 80px 0 40px; +} +</code></pre> + +<p>We then tackle the basic <strong>keyboard base</strong> element:</p> + +<pre><code>.base { +background: linear-gradient(180deg, #eee 0%, #d8d8d8 100%); +border-radius: 20px; +box-shadow: inset 0 3px 5px rgba(255,255,255,0.3), inset 0 1px 3px rgba(255,255,255,0.5), 0 10px 0 #afafaf; +display: flex; +height: 310px; +margin: 0 auto; +position: relative; +width: 620px; +} + +&#47;* This pseudo element is used for more realistic drop-shadows *&#47; +.base:after { +bottom: 0; +box-shadow: 0 10px 80px rgba(0,0,0,0.5); +content: &#39;&#39;; +height: 50px; +left: 7.5%; +position: absolute; +width: 85%; +z-index: -1; +} +</code></pre> + +<p>Next, we target all shared styles between the <strong>2 keyboard buttons</strong> to avoid repeating ourselves later on:</p> + +<pre><code>.command, .z { + -webkit-appearance: none; + background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%); + border: 0; + border-radius: 20px; + box-shadow: inset 0 1px 3px rgba(255,255,255,0.5), 0 10px 0 #c9c9c9, 0 10px 6px rgba(0,0,0,0.3), 0 12px 8px rgba(0,0,0,0.5); + cursor: pointer; + display: inline-block; + height: 260px; + margin: 15px 0 0 20px; + outline: 0; + position: relative; + width: 300px; + z-index: 2; +} + +.command span, .z span { + font-family: &#39;Muli&#39;, &#39;Helvetica&#39;, sans-serif; +} + +&#47;* Styling when pressed *&#47; +.command:active, .z:active { + box-shadow: inset 0 10px 10px rgba(0,0,0,0.2), inset 0 10px 30px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.6); + margin: 25px 0 0 20px; +} +</code></pre> + +<p>All that remains is to add the custom styling for each independent button:</p> + +<pre><code>&#47;* Custom Command styling *&#47; +.command svg { + height: 60px; + right: 15px; + position: absolute; + stroke: #9f9f9f; + top: 15px; + width: 60px; +} +.command span { + bottom: 15px; + color: #9f9f9f; + font-size: 58px; + left: 0; + position: absolute; + width: 100%; +} + +&#47;* Custom "Z" Letter styling *&#47; +.z { + width: 260px; +} +.z span { + color: #9f9f9f; + font-size: 150px; +} +</code></pre> + +<h2 id="taking-it-further">Taking it further</h2> + +<p>You could easily improve upon this concept by rendering an entire interactive keyboard, if you so desired. But this is maybe something I would tackle at a later date when I have a little more free time 😉 For now, a simple mini undo keyboard is fun enough to play with.</p></description> + <link>https://btxx.org/mini-interactive-keyboard-with-pure-css</link> + <guid isPermaLink="false">https://btxx.org/mini-interactive-keyboard-with-pure-css</guid> + <pubDate>Wed, 13 May 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Menu Toggle with Pure CSS</title> + <description><h1 id="menu-toggle-with-pure-css">Menu Toggle with Pure CSS</h1> + +<p>2020-10-19</p> + +<p>When thinking through navigation designs for mobile devices sometimes the best option is to store away the content behind a toggle button. This button would then display the menu items upon interaction. Let me show you how to create such an element with only CSS - no need for JavaScript today!</p> + +<h2 id="before-we-begin">Before we begin</h2> + +<p>I would like to point out that the concept of &#8220;toggling&#8221; the main menu (even for mobile) is not always the best solution. If you&#8217;re interested, you can take a look at a previous article I wrote explaining why: <a href="/hamburger-menu-alternative.html">Using Hamburger Menus? Try Sausage Links</a></p> + +<p>Now that we have mentioned possible pitfalls of relying so heavily on toggle menus, let&#8217;s build one!</p> + +<h2 id="our-final-product">Our Final Product</h2> + +<p><img src="/public/images/menu-toggle-css.png" alt="Menu toggle made from pure CSS" /></p> + +<p><a href="https://codepen.io/bradleytaunt/pen/mdEEvEX">Live CodePen Example</a></p> + +<h2 id="the-html">The HTML</h2> + +<p>To implement this design you really don&#8217;t need much in terms of HTML:</p> + +<ul> +<li><p>A single <code>checkbox</code> input</p></li> +<li><p>A <code>label</code> that corresponds to the <code>checkbox</code></p></li> +<li><p>A <code>nav</code> element to house our unordered list items</p> + +<p>Menu</p></li> +</ul> + +<p>That&#8217;s it!</p> + +<h2 id="the-css">The CSS</h2> + +<p>The first thing we need to do is &#8220;hide&#8221; the <code>checkbox</code> input element. It&#8217;s important to avoid using <code>display: none</code> or <code>visibility: hidden</code> in order to achieve this. Those CSS properties can negatively impact accessibility (specifically screen readers). So we will be relying on the <code>position</code>, <code>z-index</code> and <code>opacity</code> properties to help us out.</p> + +<pre><code>&#47;* Set the input position to absolute, send it off screen with zero opacity *&#47; +input[type="checkbox"] { + left: -9999px; + opacity: 0; + position: absolute; +} +</code></pre> + +<p>Then we give our corresponding <code>label</code> a minor face-lift to make it appear more button-like:</p> + +<pre><code>&#47;* Minor visual styling to make the label more button-y *&#47; +label { + border: 1px solid currentColor; + border-radius: 4px; + cursor: pointer; + padding: 10px; +} +</code></pre> + +<p>For our main <code>nav</code> element, we want to set it&#8217;s position to <code>absolute</code> in order to avoid any janky page rendering issues that might occur when toggling the menu:</p> + +<p>` + &#47;* Set nav to absolute (avoids odd page rendering space pop-in) *&#47; + nav { + opacity: 0; + position: absolute; + z-index: -2; + }</p> + +<p>The last step is to actually <em>show</em> the menu if the user toggles the <code>checkbox</code>:</p> + +<pre><code>&#47;* Show nav when checkbox is checked *&#47; +input[type="checkbox"]:checked ~ nav { + opacity: 1; + z-index: 1; +} +</code></pre> + +<p>It might not look like much, but you now have a fully functional menu toggle - <strong>made with pure CSS</strong>! </p> + +<h2 id="with-great-power">With Great Power&#8230;</h2> + +<p>Although this design is very simple to implement, please remember to use these types of menus wisely. Just because you <em>can</em> do something, doesn&#8217;t always mean you <em>should</em>.</p></description> + <link>https://btxx.org/menu-toggle-css</link> + <guid isPermaLink="false">https://btxx.org/menu-toggle-css</guid> + <pubDate>Mon, 19 Oct 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Replacing My Eero Mesh Network with Two Mangos</title> + <description><h1 id="replacing-my-eero-mesh-network-with-two-mangos">Replacing My Eero Mesh Network with Two Mangos</h1> + +<p>2023-03-09</p> + +<p>It has been one week since I retired my Eero mesh network setup and replaced it with two <a href="https://www.gl-inet.com/products/gl-mt300n-v2/">Mango Mini Travel Routers (GL-MT300N-V2)</a>. There were some obvious reasons to make this switch but I was initially unsure how the overall performance on the Mangos would hold up compared to the &#8220;cutting edge&#8221; tech that Eero devices claim to have.</p> + +<p>Spoiler (in case the post title didn&#8217;t give it away): I was pleasantly surprised.</p> + +<h2 id="goodbye-amazon">Goodbye Amazon</h2> + +<p>I was a big supporter of the original &#8220;kickstarter&#8221; project when Eero first launched. I pre-ordered and they even sent me a device free-of-charge since there were logistic problems shipping to Canada. I received my V1 routers, hooked them up and enjoyed a seamless, wifi mesh system. Everything was going great.</p> + +<p>Then, in 2019 <a href="https://mashable.com/article/amazon-acquires-eero">they were acquired by Amazon</a>. Sigh&#8230;</p> + +<p>I should have jumped ship then, but I waited to see what would happen. After all, my internet was still working perfectly fine. Then the half-baked and sometimes completely broken updates started rolling out. On more than one occasion they needed to perform complete version roll-backs. This sometimes knocked out my internet for hours at a time.</p> + +<p>They also started pushing (although not outright requiring) users to login using their Amazon account. While not a massive deal breaker, the constant pestering to do so rubbed me the wrong way. </p> + +<p>During this time, my first son was born and we moved out of the city into our first house. So fiddling with my internet setup took the backseat for a while. Once everything settled down, I started seeing more broken updates and certain features being put behind their premium &#8220;Eero Secure&#8221; platform. Features that were available as <em>default</em> for most other router hardware providers.</p> + +<p>So, I started to look at other options.</p> + +<h2 id="why-the-mango">Why the Mango?</h2> + +<p>It is important to mention, that because I live out in rural Canada, my internet options are extremely limited. All providers are satellite-based since fiber cables are unheard of out in these areas. Because of this, my main internet speeds are limited to 25Mbps <em>baseline</em>. This is important to note, since my experience and router choice took this into consideration. If you&#8217;re a current Eero user with 300Mbps+ speeds and are looking to switch wifi systems - the Mango is probably not the best for you.</p> + +<p>Luckily for me, the Mini Mangos were perfect for my basic requirements:</p> + +<ul> +<li>Max. 300Mbps Wi-Fi Speed (more than enough for my use-case)</li> +<li>Running open-source software via <a href="https://openwrt.org/">openwrt</a></li> +<li>Hardware VPN toggle</li> +<li>Tiny physical footprint</li> +<li>Extremely portable</li> +</ul> + +<h2 id="setting-up-the-yellow-squares">Setting Up the Yellow Squares</h2> + +<p>Setup was a breeze compared to the Eero experience (which could only be performed through their mobile app via bluetooth and a great deal of repositioning the devices). The full process is essentially:</p> + +<ol> +<li>Power up the first Mango</li> +<li>Connect laptop to the Mango via ethernet (you can also connect through wifi)</li> +<li>Follow the login instructions</li> +<li>Change SSID name, set device in router mode</li> +<li>Enjoy your internet!</li> +</ol> + +<p>Since my office is fairly far away from the placement of the &#8220;main&#8221; Mango router, I placed the second device near my desk. I followed the same setup as above, except I set the mode as &#8220;repeater&#8221;.</p> + +<p>For my use case I actually set this device up with a separate SSID. This was just my personal preference. You don&#8217;t have to do this. If you give both devices the same SSID name most modern devices will treat your network as if it <em>was</em> a mesh network. Pretty neat stuff.</p> + +<p>I plan to eventually add my Pi Zero running AdGuard Home back into the mix, but for now I just installed a small adblock package directly onto the router:</p> + +<ul> +<li><a href="https://github.com/openwrt/packages/tree/master/net/adblock">adblock package</a></li> +</ul> + +<h2 id="performance-comparisons">Performance Comparisons</h2> + +<p>Everything below is just some basic testing I performed. Obviously it should be noted that your experience might be entirely different based on interference, building size, amount of devices connected, etc.</p> + +<p>Stats for my original Eero mesh setup:</p> + +<ul> +<li>1 eero 6 pro, 1 eero 6+, 1 eero beacon</li> +<li>Average internet testing speed: 25Mbps</li> +<li>Consistent signal throughout the house</li> +</ul> + +<p>Stats for the new Mini Mango setup:</p> + +<ul> +<li>2 mini mangos (one in router mode, the other set as repeater)</li> +<li>Average internet testing speed: 25Mbps</li> +<li>Consistent signal throughout the house</li> +</ul> + +<h2 id="extras">Extras</h2> + +<p>Some additional data comparisons for those interested. Prices shown are in Canadian dollars.</p> + +<table> +<thead> +<tr> +<th></th> +<th>Eero</th> +<th>Mango</th> +</tr> +</thead> + +<tbody> +<tr> +<td><strong>Power</strong></td> +<td>5W</td> +<td>2.75W</td> +</tr> +<tr> +<td><strong>Size</strong> (mm)</td> +<td>139x139x55</td> +<td>58x58x22</td> +</tr> +<tr> +<td><strong>Bands</strong> (GHz)</td> +<td>2.4&#47;5</td> +<td>2.4</td> +</tr> +<tr> +<td><strong>Cost</strong> (per unit)</td> +<td>$99+</td> +<td>$39</td> +</tr> +</tbody> +</table> + +<p>That mostly covers it. I&#8217;m extremely happy with my switch away from the locked-down, &#8220;upsell&#8221; heavy Eeros. My only regret is that I didn&#8217;t make this change sooner.</p></description> + <link>https://btxx.org/mango</link> + <guid isPermaLink="false">https://btxx.org/mango</guid> + <pubDate>Thu, 09 Mar 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Working with `git` Patches in Apple Mail</title> + <description><h1 id="working-with-patches-in-apple-mail">Working with <code>git</code> Patches in Apple Mail</h1> + +<p>2023-05-11</p> + +<blockquote> +<p><strong>Before we begin</strong>: You could likely automate this process in a more streamlined way, but for most use cases this workflow should be fine.</p> +</blockquote> + +<p>I recently covered how to <a href="/git-patches">work with git email patches in Evolution on Linux</a>, so I thought it would make sense to walk through a similar workflow for those using Apple Mail on MacOS. The idea is essentially the same, with just a little extra work involved.</p> + +<h2 id="create-a-patches-mailbox">Create a &#8220;Patches&#8221; Mailbox</h2> + +<p>The first thing you&#8217;ll need to do is make a new <code>Patches</code> mailbox folder inside your existing mail account. Once done, your default Mail sidebar should look similar to the following:</p> + +<h2 id="applying-patches">Applying Patches</h2> + +<p>Now navigate to the email message containing a <code>git</code> patch. Right-click and select <em>Move to</em> &#62; <em>Patches</em>. Now in the sidebar, right-click your <em>Patches</em> folder and select <em>Export Mailbox&#8230;</em>. You&#8217;ll be prompted to save this folder locally. I suggest having a top-level folder named <strong>Patches</strong> to make things consistent.</p> + +<p>Inside this folder you should see something similar to the following structure:</p> + +<p>Once saved, open your terminal, navigate to the project you wish to apply this new patch to:</p> + +<pre><code>cd my-path&#47;very-cool-project +</code></pre> + +<p>and then run:</p> + +<pre><code>git apply ~&#47;Patches&#47;&#60;saved-patches-mailbox-folder&#62;&#47;mbox +</code></pre> + +<p>Congrats! You&#8217;ve successfully applied a git email patch through Apple Mail! Well, kind of. The terminal did most of the <em>real</em> work. Just be sure to periodically <em>purge</em> your local <em>Patches</em> folder to keep things clean!</p></description> + <link>https://btxx.org/mail</link> + <guid isPermaLink="false">https://btxx.org/mail</guid> + <pubDate>Thu, 11 May 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Create a Mac App Icon with Pure HTML and CSS</title> + <description><h1 id="create-a-mac-app-icon-with-pure-html-and-css">Create a Mac App Icon with Pure HTML and CSS</h1> + +<p>2021-04-13</p> + +<p>I have always been a huge fan of <a href="https://dribbble.com/bg-d">Bogdan&#8217;s work on Dribbble</a> and was recently inspired to see if I could replicate one of his awesome icon designs with only HTML &#38; CSS. What was the outcome? I think it&#8217;s a half-way decent copy - of course the original will always look significantly better.</p> + +<p>Don&#8217;t care about reading through the tutorial? No problem! You can <a href="#demo">jump right down to the live demo</a></p> + +<h2 id="the-comparison">The Comparison</h2> + +<p>Let&#8217;s take a look at the original Dribbble shot:</p> + +<p>And now let&#8217;s see what we will be creating with only HTML &#38; CSS:</p> + +<p>Like I said - far from perfect but still a fun experiment!</p> + +<h2 id="the-html">The HTML</h2> + +<p>Let&#8217;s jump right in and build out the main skeleton of our project:</p> + +<pre><code>&#60;div class="white-square"&#62;&#60;&#47;div&#62; +&#60;div class="blue-square"&#62; + &#60;div class="row"&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="row"&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="row"&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="row"&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="row"&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="row"&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="row"&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;div class="item"&#62;&#60;&#47;div&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; +&#60;div class="play-button"&#62; + &#60;div class="triangle"&#62;&#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<ul> +<li><p>The <code>white-square</code> element is the white, rounded square in the background</p></li> +<li><p>The <code>blue-square</code> is the main blue square of the icon</p></li> +<li><p>The <code>row</code> elements inside the <code>blue-square</code> will be our individual <em>lines</em> spread across the icon</p></li> +<li><p>The <code>play-button</code> is obviously - the play button</p> + +<p>Right now it will look like nothing, but we can change that by adding the most important part&#8230;</p></li> +</ul> + +<h2 id="the-css">The CSS</h2> + +<p>Pasting the entire CSS styling here would end up looking a little daunting. Instead, I&#8217;m just going to breakdown each individual section to make things more digestible.</p> + +<h3 id="defaults-the-white-square">Defaults &#38; the White Square</h3> + +<pre><code>* { + box-sizing: border-box; +} +:root { + --row-distance: 42px; +} + +.white-square { + background: white; + border-radius: 105px; + box-shadow: inset 0 -5px 8px rgba(0,0,0,0.25), 0 12px 10px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1); + height: 420px; + left: 165px; + position: absolute; + transform: rotate(-8deg); + top: 95px; + width: 420px; +} +</code></pre> + +<p>See that <code>--row-distance</code> variable? That will come into play a bit later. For now, we want to lay the Blue Square on top of this newly creating White Square:</p> + +<pre><code>.blue-square { + background: linear-gradient(#04BDFD 0%, #0585E4 100%); + border-radius: 105px; + box-shadow: inset 0 5px 8px rgba(255,255,255,0.5), inset 0 -5px 8px rgba(0,0,0,0.32), 0 12px 10px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.15); + height: 420px; + left: 205px; + padding: 75px 0 0; + position: absolute; + top: 75px; + width: 420px; +} +</code></pre> + +<h2 id="targeting-the-inner-rows">Targeting the Inner Rows</h2> + +<p>So far so good. The next part <em>looks</em> like a lot, but I assure you it&#8217;s fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total). First we start with the parent <code>row</code> styling:</p> + +<pre><code>.blue-square .row { + display: flex; + height: 20px; + justify-content: space-between; + padding: 0 55px; + position: absolute; + width: 100%; +} +</code></pre> + +<p>Now we style each individual row item via the <code>nth-of-type</code> attribute:</p> + +<pre><code>.blue-square .row:nth-of-type(2) { margin-top: var(--row-distance); } +.blue-square .row:nth-of-type(2) .item:nth-of-type(odd) { + width: 85px; +} +.blue-square .row:nth-of-type(2) .item:nth-of-type(even) { + width: calc(100% - 100px); +} +.blue-square .row:nth-of-type(3) { margin-top: calc(var(--row-distance) * 2); } +.blue-square .row:nth-of-type(3) .item:nth-of-type(odd) { + width: 115px; +} +.blue-square .row:nth-of-type(3) .item:nth-of-type(even) { + width: calc(100% - 130px); +} +.blue-square .row:nth-of-type(4) { margin-top: calc(var(--row-distance) * 3); } +.blue-square .row:nth-of-type(4) .item:nth-of-type(odd) { + width: 185px; +} +.blue-square .row:nth-of-type(4) .item:nth-of-type(even) { + width: calc(100% - 200px); +} +.blue-square .row:nth-of-type(5) { margin-top: calc(var(--row-distance) * 4); width: calc(100% - 115px); } +.blue-square .row:nth-of-type(5) .item:nth-of-type(odd) { + width: 105px; +} +.blue-square .row:nth-of-type(5) .item:nth-of-type(even) { + width: calc(100% - 120px); +} +.blue-square .row:nth-of-type(6) { margin-top: calc(var(--row-distance) * 5); width: calc(100% - 140px); } +.blue-square .row:nth-of-type(6) .item:nth-of-type(odd) { + width: 65px; +} +.blue-square .row:nth-of-type(6) .item:nth-of-type(even) { + width: calc(100% - 80px); +} +.blue-square .row:nth-of-type(7) { margin-top: calc(var(--row-distance) * 6); width: calc(100% - 160px); } +.blue-square .row:nth-of-type(7) .item:nth-of-type(odd) { + width: 40px; +} +.blue-square .row:nth-of-type(7) .item:nth-of-type(even) { + width: calc(100% - 55px); +} +.blue-square .row .item { + background: white; + border-radius: 20px; + box-shadow: inset 0 -2px 4px rgba(0,0,0,0.06), inset 0 2px 4px rgba(255,255,255,0.1), 0 4px 6px rgba(0,0,0,0.05); + width: 40px; +} +.blue-square .row .item:nth-of-type(even) { + background: #3FC0F5; + width: calc(100% - 55px); +} +</code></pre> + +<p>Take a few moments to read everything over - it will help you better understand what&#8217;s going on. Basically, we are adding two inner elements to each row element. We calculate the <code>margin-top</code> distance by using that <code>--row-distance</code> variable I mentioned earlier. The inner elements are then styled based on their placement inside the row (<code>nth-of-type</code>).</p> + +<h3 id="the-play-button">The Play Button</h3> + +<p>Now we finish things off with a much simpler element to style:</p> + +<pre><code>.play-button { + backdrop-filter: blur(6px); + border-radius: 9999px; + box-shadow: inset 0 4px 0 rgba(255,255,255,0.3), inset 0 20px 15px rgba(255,255,255,0.6), 0 8px 12px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05); + height: 220px; + overflow: hidden; + position: absolute; + right: 140px; + top: 320px; + width: 220px; +} +.play-button::before { + background: rgba(255,255,255,0.9); + border-radius: 9999px; + content:&#39;&#39;; + filter: blur(40px); + height: 150%; + left: -25%; + opacity: 0.8; + position: absolute; + top: -25%; + width: 150%; +} + +.triangle { + position: absolute; + left: calc(50% - 2em); + background-color: #315074; + top: calc(50% - 2.1em); + text-align: left; +} +.triangle:before, +.triangle:after { + content: &#39;&#39;; + position: absolute; + background-color: inherit; +} +.triangle, +.triangle:before, +.triangle:after { + width: 3.2em; + height: 3.2em; + border-top-right-radius: 30%; +} + +.triangle { + transform: rotate(-90deg) skewX(-30deg) scale(1,.866); +} +.triangle:before { + transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); +} +.triangle:after { + transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); +} +</code></pre> + +<p>Thanks to <a href="https://m.nintendojo.fr/@meduz/106059826445460903">meduz</a> for pointing out the <code>backdrop-filter</code> property. This allows for a frosted glass look on Chromium &#38; Safari (although sadly not on Firefox). The <code>triangle</code> element could also be improved by using an embedded <code>SVG</code> but I was determined to use only CSS for this experiment :P</p> + +<p>That&#8217;s really all there is to it! You can see the embedded CodePen example below or <a href="https://codepen.io/bradleytaunt/pen/bGgBRaV">check it out directly here &#8594;</a></p> + +<hr/> + +<h3 id="special-thanks">Special Thanks</h3> + +<p>Thanks to Bogdan for letting me butcher the original Dribbble shot :D</p> + +<ul> +<li><a href="http://bg-d.net/">bg-d.net</a></li> +<li><a href="https://dribbble.com/bg-d">Bogdan on Dribbble</a></li> +</ul> + +<hr/> + +<p><a href="https://codepen.io/bradleytaunt/pen/bGgBRaV">Live CodePen Demo</a></p></description> + <link>https://btxx.org/macos-icon-css</link> + <guid isPermaLink="false">https://btxx.org/macos-icon-css</guid> + <pubDate>Tue, 13 Apr 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Convert Files to HTML with macOS Automator Quick Actions</title> + <description><h1 id="convert-files-to-html-with-macos-automator-quick-actions">Convert Files to HTML with macOS Automator Quick Actions</h1> + +<p>2022-01-28</p> + +<p>Since a few people have reached out and thanked me for my previous post <a href="/batch-webp-conversion">Batch Converting Images to webp with macOS Automator</a>, I thought I would continue to share more of my own custom Automator Quick Actions. Today&#8217;s post will cover the ability to convert <em>any</em> text-based document into pure HTML.</p> + +<p>I know - there are over 6 billion conversion apps that do this very same thing. But our way of doing it is <em>cooler</em>. Our conversion tool:</p> + +<ul> +<li>Will run directly inside macOS Finder (right-click actions FTW)</li> +<li>Can batch convert multiple files at once</li> +<li>Can convert mixed files types at the same time</li> +</ul> + +<p>And it can do all of this for free on your existing macOS system. No apps required. So, enough chit-chat, let&#8217;s get started!</p> + +<h2 id="the-dependencies">The Dependencies</h2> + +<p>Unfortunately, setting things up isn&#8217;t as simple as clicking a single <code>Install</code> button and calling it a day. But don&#8217;t start to panic! I assure you everything we&#8217;ll be doing is actually quite easy to breeze through - <em>trust me</em>.</p> + +<p>Our main requirements will consistent of the following:</p> + +<ul> +<li>Homebrew</li> +<li>Pandoc</li> +<li>Ability to open Terminal</li> +</ul> + +<h2 id="installing-homebrew">Installing Homebrew</h2> + +<p>Homebrew is a simple package manager for macOS. The beauty of having Homebrew is the flexibility in the future for installing other custom packages. Overall it&#8217;s just a nice piece of software to have on your machine.</p> + +<p>If you have already installed Homebrew in the past, ignore this step and continue down the page. If not, simply open your Terminal and run:</p> + +<pre><code>&#47;bin&#47;bash -c "$(curl -fsSL https:&#47;&#47;raw.githubusercontent.com&#47;Homebrew&#47;install&#47;HEAD&#47;install.sh)" +</code></pre> + +<p>Let that finish and you&#8217;re done! Also feel free to read more about Homebrew on the <a href="https://brew.sh">official website</a>. Knowledge is power!</p> + +<h2 id="installing-pandoc">Installing Pandoc</h2> + +<p>The package that is going to be doing all the heavy-lifting for us is <a href="https://pandoc.org">pandoc</a>. Because we have Homebrew on our machine now, installing this package is as simple as opening our Terminal again and running:</p> + +<pre><code>brew install pandoc +</code></pre> + +<p>Wait for everything to finish and you&#8217;re done!</p> + +<h2 id="our-custom-automator-quick-action">Our Custom Automator Quick Action</h2> + +<p>Next you&#8217;ll want to open the macOS Automator app and create a new &#8220;Quick Action&#8221; when given the prompt to do so.</p> + +<p>Now do the following (reference the image further below to make sure your parameters match):</p> + +<ol> +<li>Set &#8220;Workflow receives current&#8221; to documents in any application</li> +<li>In the search bar type in &#8220;Run Shell Script&#8221;</li> +<li>Drag-and-drop the &#8220;Run Shell Script&#8221; from the left pane into the right pane</li> +<li>Set the &#8220;Shell&#8221; parameter to &#47;bin&#47;bash</li> +<li>Set &#8220;Pass input&#8221; as as arguments</li> +</ol> + +<p>Once all that is done, simply paste the following in the open text field within the &#8220;Run Shell Script&#8221; item:</p> + +<pre><code>for f in "$@" +do +&#47;opt&#47;homebrew&#47;bin&#47;pandoc -o "${f%.*}.html" "$f" +done +</code></pre> + +<p>If you&#8217;ve done everything correctly it should look something like this:</p> + +<p>Save this new Quick Action (Name is something like &#8220;Convert to HTML&#8221; to keep things simple). That&#8217;s it! Amazing, right?</p> + +<h2 id="time-to-convert">Time to Convert</h2> + +<p>Now it is finally time to see our Quick Action is <em>action</em>! Navigate to any document file in a Finder window and follow along.</p> + +<ol> +<li>First, right-click on the file you wish to convert. (<a href="#fig-1">Figure 1</a>)</li> +<li>In the pop-up container, scroll down and hover over <code>Quick Actions</code>.</li> +<li>A secondary pop-out will appear. Look for the action <code>Convert File to HTML</code> and click it. (<a href="#fig-2">Figure 2</a>)</li> +</ol> + +<p>If everything was set up properly (and depending on the size of the file) you should see your converted HTML file show up right next to your existing document. Time to celebrate!</p> + +<p>Don&#8217;t forget - you can also <em>batch</em> convert multiple files and multiple file <em>types</em> at once. The possibilities are endless!</p> + +<h2 id="no-limits">No Limits</h2> + +<p>Although this article has mainly focused on converting documents to HTML, <code>pandoc</code> is so powerful you could do any number of conversions. Re-using these steps above, you have the ability to make as many different conversion quick actions as your heart desires!</p> + +<p>Have fun converting!</p></description> + <link>https://btxx.org/macos-convert-to-html</link> + <guid isPermaLink="false">https://btxx.org/macos-convert-to-html</guid> + <pubDate>Fri, 28 Jan 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>My Robotic Mower Woes</title> + <description><h1 id="my-robotic-mower-woes">My Robotic Mower Woes</h1> + +<p>2023-05-19</p> + +<h2 id="a-brief-background">A Brief Background</h2> + +<p>I&#8217;m no stranger to robotic lawnmowers. When my wife and I moved into our rural home just over five years ago, we picked up the Husqvarna 450X Automower since I was far too lazy to manually mow my property and the cost was equal to that of a standard riding mower. It was a no-brainer.</p> + +<p>Fast-forward five years. Everything is still going great with the Automower. Some minor repairs were needed but that was mostly my fault since I was allowing the mower into places it shouldn&#8217;t have been (ie. root systems and dirt &#8220;craters&#8221;). Then lightning struck our backyard at the beginning of April this year. The mower was fine, since we stow it away inside for the winter but the charging station, charging brick and perimeter wire we <em>not</em> so lucky&#8230;</p> + +<p>The lightning traveled along the main perimeter wire and went straight to the charging station. Boom. The charging dock was quite literally blown up into a million tiny pieces and scattered across my backyard. Giant trenches were carved up where the perimeter wire had been embedded in the lawn. This surge also followed the path towards the main power adapter and exploded that as well. All of this happened even with the charging station &#47; adapter <em>turned off and unplugged from any outlet</em>. At least my mower was safe&#8230;</p> + +<h2 id="shopping-for-automower-parts">Shopping for Automower Parts</h2> + +<p>I realized I was going to have to buy another charging station, power adapter and also pay for a dealer to re-install the perimeter wire. This idea didn&#8217;t thrill me but at least all-in the expense wouldn&#8217;t be that high. Or so I thought&#8230;</p> + +<p>I contacted my local dealer and he quoted me directly from the Husqvarna supplier:</p> + +<ul> +<li>Charging base station: $749 CDN</li> +<li>Power adapter: $599 CDN</li> +<li>Perimeter wire install: ~$550 CDN</li> +</ul> + +<p>I thought the cost for both the charging station and the wire install seemed about right - but <strong>$599</strong> for a power adapter?! Are you kidding me? Best of all, these parts were on <em>back-order</em>. So even if I shelled out the ridiculous asking price, it was anyone&#8217;s guess when I would get them. May was fast approaching and I would need to start cutting my property soon. I started to look at other options.</p> + +<h2 id="husqvarna-epos-mowers">Husqvarna EPOS Mowers</h2> + +<p>Husqvarna recently launched their &#8220;perimeter-free&#8221; automowers for the general public (originally designed only for &#8220;fleet&#8221; enterprise use). These units use GPS and RTK position to map the desired cutting area of a property. Already my interest was piqued. Moving away from a perimeter wire seemed like a significant upgrade. It would also make my wife happy by allow her to garden freely, without worrying about severing an embedded lawn wire.</p> + +<p>So I contacted my local dealer again about these specific units. I came away with some interesting information:</p> + +<ol> +<li>They were quite expensive for my taste ($5000+ CDN - before install!)</li> +<li>They were <em>also</em> on back-order here in Canada</li> +</ol> + +<p><em>Sigh</em>. The mower gods were trying to tell me something. It seemed Husqvarna was just not meant for me anymore.</p> + +<h2 id="luba-to-the-rescue">Luba to the Rescue!</h2> + +<p>While researching &#8220;wireless&#8221; automowers, I came across the <a href="https://mammotion.com/?ref=bpjfzw7s">Luba Series 5000</a> (referral link) and kept it in my &#8220;maybe&#8221; pile to follow-up on if needed. So follow-up I did.</p> + +<p>This mower seemed to check all my boxes:</p> + +<ul> +<li>Decently priced</li> +<li>2-year warranty</li> +<li>All wheel drive</li> +<li>I could set it up myself</li> +<li>No perimeter wires</li> +<li>No-go zones available</li> +</ul> + +<p>It did have a few minor cons associated with it:</p> + +<ul> +<li>Fairly new product &#47; company</li> +<li>No close dealer in my area</li> +<li>iOS and Android apps are more or less &#8220;beta&#8221;</li> +</ul> + +<p>Next, I watched a few early reviews and went through some comments&#47;feedback from beta users. I was convinced enough and bought the AWD 5000 model.</p> + +<h2 id="arrival-and-setup">Arrival and Setup</h2> + +<p>The mower (who we named Lawna, and shall be referred to as such moving forward) arrived just after the first week of May. The hardware setup (charging station and RTK antenna) was very straight-forward, so I won&#8217;t go into great detail about that here. Once Lawna was synced with the RTK and GPS system, it was time to map my property.</p> + +<p>I broke my property into 4 main &#8220;tasks&#8221; as the app calls them. The 5000 model allows you to create up to 10, but for my needs 4 was fine for full coverage. I mapped each one, added a handful of no-go zones to each and told Lawna to get to work. She happily obliged.</p> + +<h2 id="the-first-week">The First Week</h2> + +<p>I&#8217;ve had (almost) zero issues with Lawna after a week and a half of running her daily. She alternates from the front to the back of the property every other day. The app allows you to setup automatic scheduling, but I prefer to run things manually every morning, based on whether an area should be skipped, grass it dried out etc.</p> + +<p>The only minor problem I have run into is the need to manually clean grass build-up from under the small cutting blades after Lawna cuts a couple &#8220;task&#8221; areas. I swapped the default blades to use Husqvarna&#8217;s <em>endurance</em> type, since they use a large slotted insert hole as opposed to Mammotion&#8217;s two single insert holes. This change makes cleaning the blades faster, safer, and easier to maintain. I realize that a riding mower would require similar maintenance but a truly <em>autonomous</em> device shouldn&#8217;t require human intervention.</p> + +<h2 id="moving-forward">Moving Forward</h2> + +<p>My hope is that the software continues to improve over time and that the core hardware lasts as long as my 450X did. Which now reminds me - I need to sell that thing&#8230;</p> + +<p>Hopefully this post helps others looking to snag their own robotic mower. So far, I can safely recommend Luba.</p></description> + <link>https://btxx.org/luba</link> + <guid isPermaLink="false">https://btxx.org/luba</guid> + <pubDate>Fri, 19 May 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Looping Through Jekyll Collections</title> + <description><h1 id="looping-through-jekyll-collections">Looping Through Jekyll Collections</h1> + +<p>2022-08-12</p> + +<p>I recently needed to add a couple new items to my wife&#8217;s personal recipe website (<a href="https://cookingwith.casa">cookingwith.casa</a>) which I hadn&#8217;t touched in quite a while. The Jekyll build still worked fine, but I realized I was statically adding each <code>collection</code> by hand on the main homepage[^1].</p> + +<p>Not so good.</p> + +<p>Of course, this wasn&#8217;t difficult at all to fix. Now everything is much more &#8220;hands free&#8221; moving forward. I figured I would share the details here in the hopes that others mind find it useful. Plus, it&#8217;s my blog - so I&#8217;ll do what I want!</p> + +<h2 id="looping-our-collections">Looping Our Collections</h2> + +<p>We want Jekyll to make things as streamlined as possible for us. This means that if I decide to add a new collection it will automatically render it along the others on the homepage.</p> + +<p>Work smart not hard!</p> + +<p>Let&#8217;s take a look at the bare-bones collections loop:</p> + +<pre><code>{% for collection in site.collections %} + &#60;!-- Our code goes here --&#62; +{% endfor %} +</code></pre> + +<p>Then we need to include an <code>if</code> statement to avoid pulling in standard <code>post</code> items (or leave this in if that is desired):</p> + +<pre><code>{% for collection in site.collections %} + {% if collection.label != &#39;posts&#39; %} + {% endif %} +{% endfor %} +</code></pre> + +<p>Now for my specific use case, we want to display each collection label and then list its corresponding items below that label (see the <code>site[collection.label]</code> for reference)</p> + +<pre><code>{% for collection in site.collections %} + {% if collection.label != &#39;posts&#39; %} + &#60;h2&#62;{{ collection.label }}&#60;&#47;h2&#62; + &#60;ul class="recipe-list"&#62; + {% for item in site[collection.label] %} + &#60;li&#62; + &#60;a href="{{ item.url }}"&#62;{{ item.title }}&#60;&#47;a&#62; + &#60;&#47;li&#62; + {% endfor %} + &#60;&#47;ul&#62; + &#60;hr&#62; + {% endif %} +{% endfor %} +</code></pre> + +<p>That&#8217;s it! Now if I plan to add any new collections down the line, I just need to include it in the <code>_config.yml</code> file and I&#8217;m set. The homepage will take care of the rest once rendered.</p> + +<p>Enjoy looping through your Jekyll collections!</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>Just the sections were statically rendered. All the recipes were pulled in dynamically - I&#8217;m not that insane!</li> +</ol></description> + <link>https://btxx.org/loop</link> + <guid isPermaLink="false">https://btxx.org/loop</guid> + <pubDate>Fri, 12 Aug 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Fixing LocalWP on Fedora 32</title> + <description><h1 id="fixing-localwp-on-fedora-32">Fixing LocalWP on Fedora 32</h1> + +<p>2020-05-06</p> + +<p>I recently upgraded from Fedora 31 to 32 and everything went very smoothly - except for one application: <strong>LocalWP</strong>. After the upgrade, all local WordPress builds would fail and complain about two missing packages:</p> + +<ul> +<li>libnettle6</li> +<li>libhogweed4</li> +</ul> + +<p>After wasting far too much time rolling back to older LocalWP versions and reaching out into the community forums, I found a simply solution to the problem. You just need to download and install the following packages manually:</p> + +<ul> +<li>libnettle6: <a href="https://pkgs.org/download/libnettle6">libnettle6-3.4.1-lp152.3.1.x86_64.rpm</a></li> +<li>libhogweed4: <a href="https://pkgs.org/download/libhogweed4">libhogweed4-3.4.1-lp152.3.1.x86_64.rpm</a></li> +</ul> + +<p>Although these packages are built for OpenSuse, it still worked perfectly fine for me. My hope is that this quick post might be helpful for others who possibly run into the same issue.</p> + +<p>For reference, here is the Local Community ticket I created: <a href="https://localwp.com/community/t/local-not-working-fedora-32-workstation-edition/19219">Local not working with Fedora 32</a></p></description> + <link>https://btxx.org/localwp-fedora</link> + <guid isPermaLink="false">https://btxx.org/localwp-fedora</guid> + <pubDate>Wed, 06 May 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Click to Load Website Images</title> + <description><h1 id="click-to-load-website-images">Click to Load Website Images</h1> + +<p>2021-03-25</p> + +<p>In my previous post about <a href="https://uglyduck.ca/#2021-03-22-89-posts-one-file">switching my Jekyll blog over to PHPetite</a>, I briefly mentioned how I only loaded in article images if the user <em>clicked or tapped</em> the empty file element.</p> + +<p>In this post, I&#8217;m going to quickly breakdown the update I&#8217;ve done to my blog&#8217;s images since then and how you can easily implement the same thing in your own project.</p> + +<h2 id="update">Update</h2> + +<p>As pointed out by Gabriel <a href="https://github.com/bradleytaunt/phpetite/issues/1">in this Github issue</a>, this concept breaks things slightly for RSS users. Since then, I have just set the default images on this blog to <code>display: none</code> and render them as <code>block</code> elements when their specific <code>section</code> is loaded into the DOM visibly.</p> + +<p>The example below is remaining the same as it was, to still provide context for this post.</p> + +<h2 id="live-demo">Live Demo</h2> + +<p>Before we jump head first into the details, let&#8217;s take a look at what we will be creating:</p> + +<p>Pretty neat, eh? Well let&#8217;s get into the nitty gritty.</p> + +<h2 id="the-code">The Code</h2> + +<p>Personally, I place everything into a <code>figure</code> element to keep things contained and clean - but this isn&#8217;t required by any means. We then include our <code>img</code> and <code>figcaption</code> elements. That&#8217;s it.</p> + +<pre><code>&#60;figure&#62; + &#60;img src="&#47;placeholder-image.webp" onclick="this.src=&#39;https:&#47;&#47;res.cloudinary.com&#47;bradtaunt&#47;image&#47;fetch&#47;q_auto:low&#47;v1570124593&#47;https:&#47;&#47;uglyduck.ca&#47;public&#47;images&#47;aqua-ui-css-buttons.webp&#39;" alt="Aqua UI buttons"&#62; + &#60;figcaption&#62;&#60;b&#62;Click the placeholder to load in the real image&#60;&#47;b&#62;&#60;br&#62; + Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. + &#60;a href="https:&#47;&#47;res.cloudinary.com&#47;bradtaunt&#47;image&#47;fetch&#47;q_auto:low&#47;v1570124593&#47;https:&#47;&#47;uglyduck.ca&#47;public&#47;images&#47;aqua-ui-css-buttons.webp"&#62;View full size image&#60;&#47;a&#62;. + &#60;&#47;figcaption&#62; +&#60;&#47;figure&#62; +</code></pre> + +<h3 id="the-image-element">The Image Element</h3> + +<p>This is where the <em>magic</em> happens. By default all images will target the default placeholder image: <code>placeholder-image.webp</code>. This image is just 16KB in size and only needs to load in once.</p> + +<p>Next we include an inline <code>onclick</code> attribute, which targets the current image&#8217;s <code>src</code> attribute and changes it based on the URL provided. (Note: I use Cloudinary for my blog&#8217;s image storage, but you could even host your images relative to your root directory if you wanted)</p> + +<p>Now when a user clicks on the placeholder image, the inline <code>onclick</code> pulls in the correct image in it&#8217;s place.</p> + +<h3 id="disabled-javascript">Disabled JavaScript</h3> + +<p>For users who have JavaScript blocked or disabled we have a decent backup. By including a direct link to the image URL in the <code>figcaption</code> element, we give the user the ability to still view the image in a separate browser tab.</p> + +<p>You could get extra fancy and include some <code>noscript</code> tags in your project that maybe render a different placeholder image mentioning they have JavaScript disabled etc, but for my needs that would be overkill.</p> + +<h2 id="cool---but-why-do-this">Cool - But Why Do This?</h2> + +<p>Bandwidth is a limited resource for a lot of users around the world. As designers and developers it&#8217;s best to respect this fact and only load in elements as the user <em>requires</em> them. Every little bit helps.</p></description> + <link>https://btxx.org/load-image-on-click</link> + <guid isPermaLink="false">https://btxx.org/load-image-on-click</guid> + <pubDate>Thu, 25 Mar 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Linux Mint MacBook Air Setup</title> + <description><h1 id="linux-mint-macbook-air-setup">Linux Mint MacBook Air Setup</h1> + +<p>2020-08-16</p> + +<p>I don&#8217;t like the idea of throwing away old or outdated tech (within reason), so I try to find a new purpose for some of my &#8220;retired&#8221; devices. This article will cover how to switch over a mid-2011 model MacBook Air to utilize Linux Mint.</p> + +<p><strong>Important</strong>: This setup will completely wipe your existing disk and create a fresh install of Linux Mint on the SSD. You have been warned.</p> + +<h2 id="the-specs">The Specs</h2> + +<p>My old MacBook Air has a pretty decent spec sheet:</p> + +<ul> +<li>Processor: <strong>1.7GHz dual-core Intel Core i5</strong></li> +<li>Memory: <strong>4GB of 1333MHz DDR3</strong></li> +<li>Graphics: <strong>Advanced Intel HD Graphics 3000</strong></li> +<li>SSD: <strong>128 GB</strong></li> +</ul> + +<p>And let&#8217;s take a look at the basic system requirements Linux Mint suggests:</p> + +<ul> +<li>2GB RAM</li> +<li>Dual Core Processor</li> +<li>20GB free disk space</li> +</ul> + +<p>We are looking pretty good!</p> + +<h2 id="step-1-download-linux-mint">Step 1: Download Linux Mint</h2> + +<p>For this setup we will be using the latest, stable version (at this time of writing) of Linux Mint 20 &#8220;Ulyana&#8221; - Xfce which is 20. You can download the necessary files here: </p> + +<ul> +<li><a href="https://www.linuxmint.com/edition.php?id=283">Linux Mint 20 &#8220;Ulyana&#8221; - Xfce</a> [1.8GB]</li> +</ul> + +<h2 id="step-2-flash-linux-mint-to-usb-stick">Step 2: Flash Linux Mint to USB Stick</h2> + +<p>Next we just need to flash the Linux Mint OS to a USB storage device. If you need to purchase some, you can easily find them on Amazon (affliate link):</p> + +<ul> +<li><p><a href="https://www.amazon.com/gp/product/B00JB3NXIS/ref=as_li_tl?ie=UTF8&amp;camp=1789&amp;creative=9325&amp;creativeASIN=B00JB3NXIS&amp;linkCode=as2&amp;tag=uglyduck-20&amp;linkId=494f4c1dd4e21782ecb865bcaa5a526b">Kootion 10 Pack 4GB Flash Drive 4gb USB 2.0 Flash Drives Keychain USB Drive Bulk Thumb Drive Swivel Memory Stick Black</a></p></li> +<li><p>Download <a href="https://www.balena.io/etcher/">Balena Etcher</a> for your current operating system</p></li> +<li><p>Run the installer</p></li> +</ul> + +<p>Once installed, open Etcher do the following:</p> + +<ol> +<li>Select your downloaded Linux Mint ISO file</li> +<li>Select your USB stick&#47;device as the media</li> +<li>Flash media</li> +<li>???</li> +<li>Profit!!</li> +</ol> + +<h2 id="step-3-boot-from-usb">Step 3: Boot from USB</h2> + +<ul> +<li>Make sure your Macbook Air is turned off</li> +<li>Plug your newly flashed USB stick into the MacBook Air</li> +<li>Turn on the MacBook Air</li> +<li>Immediately hold down the <strong>alt&#47;option</strong> button (keep holding until the prompt screen is visible)</li> +<li>You will be shown drive &#8220;icons&#8221; - you want to select your USB drive (normally the far right icon)</li> +<li>Press <strong>Enter</strong></li> +<li>Select the first item in the list that appears &#8220;Start Linux Mint&#8221;</li> +</ul> + +<p>After this you will boot into a &#8220;live session&#8221; of the Linux Mint operating system.</p> + +<h2 id="step-4-installing-linux-mint">Step 4: Installing Linux Mint</h2> + +<p>Linux Mint makes it very easy for you to install it&#8217;s OS step-by-step (similar to most other Linux distros). Simply <strong>double-click</strong> on the &#8220;Install Linux Mint&#8221; CD icon on the main desktop.</p> + +<ul> +<li>Choose your language. then hit <strong>Continue</strong></li> +<li>Select your preferred keyboard layout, then hit <strong>Continue</strong></li> +<li><em>Optional</em>: You might be asked to connect to a WiFi network, if you are set it up now</li> +<li>I would suggest downloading the multimedia codecs to make things easier, then hit <strong>Continue</strong></li> +<li>For installation type, select &#8220;Erase disk and install Linux Mint&#8221;, then hit <strong>Continue</strong> + +<ul> +<li>WARNING: This will wipe your current drive completely - make sure you are okay with this!</li> +</ul></li> +<li>It will issue you with a warning prompt, simply click <strong>Continue</strong></li> +<li>Select your timezone, then hit <strong>Continue</strong></li> +<li>Enter your name, a username, a name for your computer, and set a password (you will use this to login moving forward)</li> +<li>Wait for the installation to complete</li> +<li>Once complete, you will be prompted to <strong>reboot your system</strong></li> +<li>After a reboot you will be prompted to remove the USB device and then press <strong>Enter</strong></li> +<li>Welcome to Linux Mint!</li> +</ul> + +<h2 id="conclusion">Conclusion</h2> + +<p>Linux Mint is not only a great operating system, but it is also an excellent starting point for newcomers to Linux in general. It&#8217;s stable enough to be used as a daily driver and popular enough that most minor issues can be solved with a quick internet search.</p> + +<p>Hopefully this inspires others to try &#8220;recycling&#8221; their older Apple products instead of tossing them away or having them collect dust.</p></description> + <link>https://btxx.org/linux-mint-macbook-air</link> + <guid isPermaLink="false">https://btxx.org/linux-mint-macbook-air</guid> + <pubDate>Sun, 16 Aug 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>The Linux Desktop is Hard to Love</title> + <description><h1 id="the-linux-desktop-is-hard-to-love">The Linux Desktop is Hard to Love</h1> + +<p>2022-07-14</p> + +<p>I want to love the &#8220;Linux Desktop&#8221;. I really do. But I&#8217;ve come to the realization that what I love is the <em>idea</em> of the Linux Desktop. The community. The security and core focus on open source. The customizable environments. Tweaking as much or as little of the operating system as I please!</p> + +<p>I just can&#8217;t <em>stick with it</em>. I always end up back on macOS. And I&#8217;m starting to understand why.</p> + +<h2 id="what-the-linux-desktop-gets-right">What the Linux Desktop Gets Right</h2> + +<p>To be fair, there is an incredible amount of things that the Linux desktop does really well:</p> + +<ul> +<li>Complete user control</li> +<li>Ability to drastically change the desktop UI + +<ul> +<li>Gnome, KDE, XFCE, etc.</li> +</ul></li> +<li>Overall good and welcoming communities</li> +<li>Extensive documentation for almost everything</li> +</ul> + +<p>These things make Linux a solid experience overall - but not a <em>great</em> one&#8230;</p> + +<h2 id="what-the-linux-desktop-gets-wrong">What the Linux Desktop Gets Wrong</h2> + +<p>If I had to summarize in a word what Linux lacks compared to macOS it would be: <em>cohesion</em>.</p> + +<p>Apple&#8217;s macOS keeps a solid consistency throughout its entire design. Everything looks and feels like it is part of the same system. Which is what a fully-fledged OS <em>should</em> feel like. The argument can be made that macOS suffers some fragmentation with things like <code>homebrew</code>, applications directly from developers vs. applications via the Mac App Store.</p> + +<p>While this is true, I believe Linux desktops suffer far worse in terms of fragmented systems. Users building applications from source, <code>snap</code> packages, <code>flathub</code> packages, custom package managers shipped with separate distros, etc. And with this fragmentation comes the constant debates and discussions around which to use and which to avoid.</p> + +<p>This can become overwhelming for average computer users. This is something we tend to forget in our &#8220;tech hubs&#8221;. Most users want to boot up their machine and get to work. Linux can absolutely do this, but if a user hits a minor snag, then I guarantee they will have more difficulty fixing it compared to an issue found in macOS.</p> + +<h2 id="user-experience">User Experience</h2> + +<p>Design is important. The user experience will make or break an operating system. This is another issue I&#8217;ve found with many Linux desktops.</p> + +<p>Let&#8217;s take Bluetooth for example. It works flawlessly in macOS. I have never had a single device bug-out or refuse to connect. Devices connect almost immediately when pairing. The UI is intuitive and gives the user clear feedback to what the system is doing while pairing, disconnecting, and so on.</p> + +<p>Now, compare this to an average Linux DE experience - not so seamless. The fact that some distros require you to hop into a terminal in order to properly configure Bluetooth is pretty terrible. Sure, most have GUIs setup similar to that of macOS, but I find myself time and time again needing to pop open that trusty ol&#8217; Terminal. This is fine for someone like myself, but for the average computer user? No way.</p> + +<p>Looking for another example? Printers. Yes, printers are terrible machines created in the depths of Hell itself, but they are a necessary evil. And again, macOS handles &#8220;plug-and-play&#8221; printer functionality like a champ. Linux on the other hand is a mixed bag. I&#8217;ve had some luck with specific Linux distros working with printers in this &#8220;plug-and-play&#8221; fashion, while others become a battle of attrition[^1]. Let&#8217;s not even begin to talk about wireless <em>only</em> printers and setting up their proper drivers on Linux.</p> + +<h2 id="quality-hardware">Quality Hardware</h2> + +<p>Another advantage macOS has over most other Linux desktops is tailored hardware. Apple produces the hardware created to run their own operating system, meaning it was specifically built for that task. Linux desktops are designed to run on almost any[^2] piece of hardware. Though this is fantastic in terms of technological sustainability (avoids dumping old devices when they lose &#8220;support&#8221;) it ends up causing more support issues. Needing to support such a wide range of chip sets and drivers spreads the focus on a streamlined UX a little more thin. It becomes difficult to perfect a cohesive experience user-to-user when some many variables can be different. I should note that some distros[^3] are making fantastic strides in this area but are still far from ideal.</p> + +<h2 id="i-still-use-linux">I Still Use Linux</h2> + +<p>I might have attacked the overall Linux desktop experience in favor of macOS a little harshly in this post, but it&#8217;s a simple reflection of a individual who has used both extensively. I still work with multiple Linux machines daily. I still <em>like</em> using Linux.</p> + +<p>I just don&#8217;t <em>love</em> it.</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>People swear by CUPS working well on Linux, but this has caused issues for me in the past as well. Unsure why macOS handles it fine&#8230;</li> +<li>Depending on the desired distro, resources required, etc.</li> +<li>A couple that come to mind are Zorin OS and elementary OS</li> +</ol></description> + <link>https://btxx.org/linux-love</link> + <guid isPermaLink="false">https://btxx.org/linux-love</guid> + <pubDate>Thu, 14 Jul 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Installing Custom Fonts on Linux from the Command Line</title> + <description><h1 id="installing-custom-fonts-on-linux-from-the-command-line">Installing Custom Fonts on Linux from the Command Line</h1> + +<p>2022-09-20</p> + +<p>Installing custom fonts is a fairly streamlined feature on operating systems like MacOS and Windows. Linux, on the other hand, struggles to make this workflow <em>easy</em> for everyday users. Many newcomers tend to get frustrated with using the default &#8220;Fonts&#8221; application managers shipped with most Linux distros.</p> + +<p>But I&#8217;m here to tell you to <strong>ditch</strong> those GUI font installers. Let&#8217;s install our custom fonts in the command line!</p> + +<h2 id="get-your-font-files">Get Your Font Files</h2> + +<p>You can&#8217;t install custom fonts if you don&#8217;t have any. For this tutorial we are going to assume that we are trying to install a typeface set named <code>LinuxFont</code>. We are going to assume that we have already downloaded and extracted a folder named <code>LinuxFont</code> into our <code>Downloads</code> directory.</p> + +<p>Inside this hypothetical folder is a collection of <code>OTF</code> (opentype) font files. This will be important information in a moment.</p> + +<h2 id="terminal-time">Terminal Time</h2> + +<p>Now our goal is to simply copy this new typeface folder into our user font directory. Open Terminal and run the following from your <code>Downloads</code> directory:</p> + +<pre><code>sudo cp -r LinuxFont &#47;usr&#47;local&#47;share&#47;fonts&#47;opentype&#47; +</code></pre> + +<p><strong>Important</strong>: If your font files are NOT opentype format, be sure to copy your files to the proper directory (truetype for TTF, etc.)</p> + +<p>Next we need to make sure we have full read and write privileges for this new folder:</p> + +<pre><code>sudo chmod -R 0777 &#47;usr&#47;local&#47;share&#47;fonts&#47;opentype&#47;LinuxFont +</code></pre> + +<p>The last thing we need to do is reload the font cache on our system:</p> + +<pre><code>sudo fc-cache -fv +</code></pre> + +<p>That&#8217;s it! You should now have access to your custom typeface in all your applications system wide.</p></description> + <link>https://btxx.org/lf</link> + <guid isPermaLink="false">https://btxx.org/lf</guid> + <pubDate>Tue, 20 Sep 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>How to "FLOSS" as a Web Designer</title> + <description><h1 id="how-to-floss-as-a-web-designer">How to &#8220;FLOSS&#8221; as a Web Designer</h1> + +<p>2020-02-07</p> + +<p>I have a profound respect for the open source community. I most likely wouldn&#8217;t have the skills or knowledge I do today with it. Unfortunately, when I was just starting out in &#8220;web dev&#8221; some 10 years ago, proprietary software was the main go-to for a newbie designer. </p> + +<p>Dreamweaver. Fireworks (those were the days). Photoshop. Illustrator. Adobe products basically had a stranglehold on the web design community. Any company you joined at the time more than likely required you to know and use these tools, making it hard for designers to try out new software for their day-to-day needs. Not to mention the <em>cost</em> associated with these products.</p> + +<p>Fast forward a handful of years and we have a lot more options in terms of design &#47; development software (whether Windows, Mac or Linux). UI design tools like Figma, Sketch and Adobe XD have since popped up and become the most popular among designers. New text editors and terminals hit the scene, fighting for developer attention (Atom, Sublime Text, VSCode, LightTable, iTerm2, Hyper, etc.).</p> + +<p>But what if a designer wanted to go completely FLOSS?</p> + +<p>Below you will find my own personal list of FLOSS applications I use across design, development and simple document management:</p> + +<h3 id="web-browsers">Web Browsers</h3> + +<ul> +<li>Firefox <a href="https://www.mozilla.org/en-CA/firefox/">https:&#47;&#47;www.mozilla.org&#47;en-CA&#47;firefox&#47;</a></li> +<li>Brave <a href="https://brave.com/">https:&#47;&#47;brave.com&#47;</a></li> +</ul> + +<h3 id="visual-design">Visual Design</h3> + +<ul> +<li>GIMP <a href="https://www.gimp.org/">https:&#47;&#47;www.gimp.org&#47;</a></li> +<li>Inkscape <a href="https://inkscape.org/">https:&#47;&#47;inkscape.org&#47;</a></li> +<li>Pencil <a href="https://pencil.evolus.vn/">https:&#47;&#47;pencil.evolus.vn&#47;</a></li> +</ul> + +<h3 id="code-text-editors">Code &#47; Text Editors</h3> + +<ul> +<li>Brackets <a href="http://brackets.io/">http:&#47;&#47;brackets.io&#47;</a></li> +<li>Visual Studio Code <a href="https://github.com/Microsoft/vscode">https:&#47;&#47;github.com&#47;Microsoft&#47;vscode</a></li> +<li>Atom <a href="https://atom.io/">https:&#47;&#47;atom.io&#47;</a></li> +</ul> + +<h3 id="terminal-shells">Terminal Shells</h3> + +<ul> +<li>Terminus <a href="https://eugeny.github.io/terminus/">https:&#47;&#47;eugeny.github.io&#47;terminus&#47;</a></li> +<li>Hyper <a href="https://hyper.is/">https:&#47;&#47;hyper.is&#47;</a></li> +</ul> + +<h3 id="documents">Documents</h3> + +<ul> +<li>LibreOffice <a href="https://www.libreoffice.org/">https:&#47;&#47;www.libreoffice.org&#47;</a></li> +</ul> + +<h2 id="nothing-special">Nothing special</h2> + +<p>This small list I&#8217;ve compiled isn&#8217;t earth-shattering by any means, but I wanted to put this out into the world for any newbie designer that might be starting out. You don&#8217;t need to spend a ridiculous amount of money just to get your feet wet in the design industry. By using the tools listed above, beginners can get a solid head-start on creating for the web without burning a hole in their pocket. </p></description> + <link>https://btxx.org/learning-to-floss</link> + <guid isPermaLink="false">https://btxx.org/learning-to-floss</guid> + <pubDate>Fri, 07 Feb 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>The Lazy Developer's Dark Mode</title> + <description><h1 id="the-lazy-developers-dark-mode">The Lazy Developer&#8217;s Dark Mode</h1> + +<p>2021-04-12</p> + +<p>After recently jumping back to Jekyll for my personal blog, I decided to take a closer look at how I was supporting <code>dark mode</code> for my visitors. I was using the proper CSS query to target those who had system-wide dark mode enabled, but I found that the code had far too many caveats and targeted too many custom classes.</p> + +<p>So I thought to myself, &#8220;There <em>has</em> to be a simpler way&#8230;&#8221;</p> + +<h2 id="introducing-dark-mode---the-lazy-way">Introducing Dark Mode - The Lazy Way</h2> + +<p>Here is the default dark mode for my current website in all it&#8217;s glory:</p> + +<pre><code>@media (prefers-color-scheme: dark) { + body{background:#2d2d2d;filter:invert(1);} + img,.cp_embed_wrapper,pre{filter:invert(1);} +} +</code></pre> + +<p>Not much to look at, eh? Well, let&#8217;s still break it down.</p> + +<p>First we set the <code>body</code> to use a nice dark background color (avoid using <code>#000000</code> directly since that can cause some minor eye strain). Next we tell the browser to invert all the child elements by using <code>filter:invert(1)</code>. At this point, you could consider your work done - but there are some edge case elements&#8230;</p> + +<h2 id="images-codepens-code---oh-my">Images, CodePens &#38; Code - Oh My!</h2> + +<p>Most of my articles on this site will include either an image(s), embedded CodePen examples or code snippets directly in the page. For these elements we probably <em>don&#8217;t</em> want to invert their color&#47;text etc. All we need to do is run the filter property on these a second time (<em>after</em> the main <code>body</code> attribute):</p> + +<pre><code>@media (prefers-color-scheme: dark) { + img,.cp_embed_wrapper,pre{filter:invert(1);} +} +</code></pre> + +<p>Of course, YMMV depending on what other custom elements you want to avoid inverting.</p> + +<h2 id="minor-caveats">Minor Caveats</h2> + +<p>I should mention that since my website doesn&#8217;t use any custom coloring for anchor links, inverting <code>ahref</code> elements works out of the box. Certain projects might still require some custom overrides if the inverted version of a certain custom color looks poor.</p> + +<p>That&#8217;s it - enjoy being lazy!</p></description> + <link>https://btxx.org/lazy-dev-dark-mode</link> + <guid isPermaLink="false">https://btxx.org/lazy-dev-dark-mode</guid> + <pubDate>Mon, 12 Apr 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>ThriftyName: $5 Brand Names</title> + <description><h1 id="thriftyname-5-brand-names">ThriftyName: $5 Brand Names</h1> + +<p>2021-02-25</p> + +<p>It&#8217;s been a while since I&#8217;ve written anything on this blog, but for good reason - <strong>I&#8217;ve been working on a handful of side projects</strong>. I plan to drip-feed release these projects over time, but for today I&#8217;m announcing <a href="https://thrifty.name">ThriftyName</a>.</p> + +<h2 id="what-is-thriftyname">What is ThriftyName?</h2> + +<p>In case this post title wasn&#8217;t clear enough (or you avoided going to the product site itself) ThriftyName is a place where indie devs, start-ups or entrepreneurs can go to get a custom brand name for <strong>just $10</strong>.</p> + +<p>This &#8220;service&#8221; started out as an almost gimmicky joke in my head, but once I began building out the main website I realized that this could be quite useful for cash-strapped indies. After all, not all developers <em>love</em> to sit around wasting precious time thinking about product names, when they could use that time to <em>build their product</em>.</p> + +<h2 id="learn-more">Learn More</h2> + +<p>If you&#8217;re really interested in the reasoning behind making this project, check out the <a href="https://thrifty.name/#about">official about page on the site itself</a>. I go into a little more depth about my thought process.</p> + +<h2 id="more-side-projects-incoming">More Side Projects Incoming&#8230;</h2> + +<p>Like I said at the beginning of the post, keep a look out for my other side projects that I&#8217;ll be rolling out slowing. I&#8217;m still not sure of the best &#8220;method&#8221; to do this (release one every week? every month?) - but I&#8217;ll figure it out as I go along.</p> + +<p>Thanks for reading!</p></description> + <link>https://btxx.org/launching-thriftyname</link> + <guid isPermaLink="false">https://btxx.org/launching-thriftyname</guid> + <pubDate>Thu, 25 Feb 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Keynote Slides with Pure CSS</title> + <description><h1 id="keynote-slides-with-pure-css">Keynote Slides with Pure CSS</h1> + +<p>2020-06-22</p> + +<p>There are a great deal of options available on the web and built into most operating systems when you need to create presentation &#47; keynote slides. You could use native software like LibremOffice Impress, Powerpoint, Apple&#8217;s Keynote, etc. You could also decide to use preexisting web-based apps like Google Slides or an open source project such as RevealJS. All of these are good options.</p> + +<p>But thinking more about how overly complex these apps are implemented, it got me wondering if I could quickly code up a presentation slide framework with pure CSS and barely any code.</p> + +<p>This is what I came up with:</p> + +<h2 id="the-demo">The Demo</h2> + +<p><a href="https://codepen.io/bradleytaunt/pen/jOWBJZb">Live CodePen Example</a></p> + +<p>Yes, I know this is <em>ugly</em>, but this was created as a barebones skeleton for others to build upon. The demo uses a simple set of <code>radio</code> inputs that correspond to their own individual <code>slide</code> element. The framework looks at the currently <code>checked</code> input, then changes the <code>opacity</code> and <code>z-index</code> of its corresponding slide item. Pretty straightforward stuff!</p> + +<p>Let&#8217;s break down each piece:</p> + +<h2 id="the-html">The HTML</h2> + +<pre><code>&#60;div class="slider"&#62; + &#60;input type="radio" name="pagination" value="1" checked&#62; + &#60;input type="radio" name="pagination" value="2"&#62; + &#60;input type="radio" name="pagination" value="3"&#62; + &#60;input type="radio" name="pagination" value="4"&#62; + &#60;input type="radio" name="pagination" value="5"&#62; + + &#60;div class="slide"&#62; + &#60;h2&#62;Slide 1&#60;&#47;h2&#62; + &#60;&#47;div&#62; + &#60;div class="slide"&#62; + &#60;h2&#62;Slide 2&#60;&#47;h2&#62; + &#60;&#47;div&#62; + &#60;div class="slide"&#62; + &#60;h2&#62;Slide 3&#60;&#47;h2&#62; + &#60;&#47;div&#62; + &#60;div class="slide"&#62; + &#60;h2&#62;Slide 4&#60;&#47;h2&#62; + &#60;&#47;div&#62; + &#60;div class="slide"&#62; + &#60;h2&#62;Slide 5&#60;&#47;h2&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<p>There isn&#8217;t a whole lot going on here. We are just including a set of <code>radio</code> inputs (based on how many slides are desired) along with their corresponding <code>slide</code> class elements. You might notice we don&#8217;t do anything to specifically target each individual slide item - you&#8217;ll see why we don&#8217;t need to in the CSS section!</p> + +<h2 id="the-css-scss">The CSS (SCSS)</h2> + +<pre><code>&#47;* Basic default styles *&#47; +.slider { + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + + .slide { + height: 100%; + opacity: 0; + position: absolute; + width: 100%; + z-index: -2; + } +} + +input[type="radio"] { cursor: pointer; } + +&#47;* Target slide item based on currently checked radio *&#47; +input[type="radio"]:nth-of-type(1):checked ~ .slide:nth-of-type(1), +input[type="radio"]:nth-of-type(2):checked ~ .slide:nth-of-type(2), +input[type="radio"]:nth-of-type(3):checked ~ .slide:nth-of-type(3), +input[type="radio"]:nth-of-type(4):checked ~ .slide:nth-of-type(4), +input[type="radio"]:nth-of-type(5):checked ~ .slide:nth-of-type(5) { + opacity: 1; + z-index: 1; +} + +&#47;* Individual slide styling *&#47; +.slide:nth-of-type(1) { background: dodgerblue; } +.slide:nth-of-type(2) { background: crimson; } +.slide:nth-of-type(3) { background: rebeccapurple; } +.slide:nth-of-type(4) { background: goldenrod; } +.slide:nth-of-type(5) { background: pink; } +</code></pre> + +<p>Again, not much to see here. We use CSS to look down through the DOM for each <code>radio</code> elements slide &#8220;partner&#8221;. We do this by targeting the <code>nth-of-type</code> on both elements. Simple stuff.</p> + +<p>Some drawbacks to this approach:</p> + +<ul> +<li>You need to manually target each new slide you add (color, styling, content, etc.)</li> +<li>Lack of animations might require extra work to implement (maybe 3rd party libraries- ke AOS?)</li> +<li>Probably won&#8217;t be best for extremely long&#47;complex presentation slides</li> +</ul> + +<p>That&#8217;s it! Hope you enjoy playing around with it.</p></description> + <link>https://btxx.org/keynote-slides-css</link> + <guid isPermaLink="false">https://btxx.org/keynote-slides-css</guid> + <pubDate>Mon, 22 Jun 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Using Parent Selectors in CSS</title> + <description><h1 id="using-parent-selectors-in-css">Using Parent Selectors in CSS</h1> + +<p>2018-12-19</p> + +<p>I recently saw a Twitter thread posted by Tommy Hodgins on implementing highly requested styling features in CSS with only a minimal amount of JavaScript. Many of his examples are great, but the <code>parent</code> selector instantly peaked my interest.</p> + +<p>Being able to target an element&#8217;s parent always becomes a minor annoyance (since vanilla CSS does not support it) - so you always end up having to do something a little ugly like:</p> + +<pre><code>var el = document.getElementById(&#39;custom-div&#39;); +var parent = el.closest(selectors); +</code></pre> + +<p>And then add any custom styling to the parent element directly in JavaScript - or toggle a class which opens a whole other can of worms.</p> + +<h2 id="save-the-day-with-jsincss-parent-selector-and-qaffeine">Save the day with jsincss-parent-selector and qaffeine</h2> + +<p>By using the <code>jsincss-parent-selector</code> and <code>qaffeine</code> plugins we can target an element&#8217;s parent in CSS without breaking a sweat. Let&#8217;s break it down:</p> + +<h3 id="import-the-packages">Import the packages</h3> + +<pre><code>npm install jsincss-parent-selector qaffeine +</code></pre> + +<h3 id="html-ex.-index.html">HTML (ex. index.html)</h3> + +<p>Now we add our very simple HTML skeleton:</p> + +<pre><code>&#60;!doctype html&#62; +&#60;html&#62; + &#60;head&#62; + &#60;link rel="stylesheet" href="output.css"&#62; + &#60;&#47;head&#62; + &#60;body&#62; + &#60;header&#62; + &#60;main&#62; + &#60;h2&#62;This is a header&#60;&#47;h2&#62; + &#60;&#47;main&#62; + &#60;&#47;header&#62; + &#60;&#47;body&#62; + &#60;script src=output.js&#62;&#60;&#47;script&#62; +&#60;&#47;html&#62; +</code></pre> + +<h3 id="javascript-ex.-input.js">JavaScript (ex. input.js)</h3> + +<pre><code>const qaffeine = require(&#39;qaffeine&#39;) +const parent = require(&#39;jsincss-parent-selector&#39;) + +qaffeine( +{ + stylesheet: {}, + rules: { + parent + } +}, +&#39;input.css&#39;, +&#39;output.js&#39;, +&#39;output.css&#39; +) +</code></pre> + +<h3 id="css-ex.-input.css">CSS (ex. input.css)</h3> + +<pre><code>header { + display: block; +} +main[--js-parent] { + background: blue; +} +</code></pre> + +<p>Then simply run <code>node</code> against your <code>js</code> file. That&#8217;s it! I would also suggest checking out Tommy&#8217;s video covering this topic if you prefer to follow along.</p></description> + <link>https://btxx.org/jsincss-parent-selector</link> + <guid isPermaLink="false">https://btxx.org/jsincss-parent-selector</guid> + <pubDate>Wed, 19 Dec 2018 00:00:00 +0000</pubDate> + </item> + <item> + <title>Transferring Media from macOS to a Jellyfin Server (Raspberry Pi 4)</title> + <description><h1 id="transferring-media-from-macos-to-a-jellyfin-server-raspberry-pi-4">Transferring Media from macOS to a Jellyfin Server (Raspberry Pi 4)</h1> + +<p>2022-03-12</p> + +<p>I run a personal media server using Jellyfin on a Raspberry Pi 4 in my home. It&#8217;s pretty great and works well across most devices - Google TV, iOS and Android devices, Chromebooks, etc.</p> + +<p>The only small headache is adding content (ie. audio, videos) to the existing hard drive that Jellyfin reads from. The last thing you want to do is connect a keyboard and monitor to your Pi to add a few files. Especially if your Pi is setup like mine and buried at the back of a hidden cabinet.</p> + +<p>More annoying would be the need to remove the hard drive itself, connect it to your device that has the new files you wish to transfer and then port them over. Big ol&#8217; pass on that system.</p> + +<h2 id="sshscp-to-the-rescue">SSH&#47;SCP to the Rescue</h2> + +<p><em>Important</em>: before we begin, I should mention that this article assumes the following:</p> + +<ul> +<li>The files you plan to transfer from are on a macOS device</li> +<li>You have setup Jellyfin on your Raspberry Pi device</li> +<li>SSH is enabled and accessible on the Pi (across your local network)</li> +<li>The Jellyfin server&#8217;s hard drive is mounted in the root directory via something like <code>&#47;mnt</code></li> +</ul> + +<p>Good? Moving on then&#8230;</p> + +<p>Open your terminal of choice and use the following command:</p> + +<pre><code>scp movie.mp4 pi_user_name@PI_IP_ADDRESS:&#47;mnt&#47;movies&#47;movie.mp4 +</code></pre> + +<ol> +<li><code>movie.mp4</code> is the file in the current macOS directory we plan to copy over</li> +<li><code>pi_user_name</code> is the username you setup on your Raspberry Pi</li> +<li><code>PI_IP_ADDRESS</code> is, of course, your Pi&#8217;s IP address</li> +<li>The appended <code>:&#47;mnt&#47;movies&#47;movie.mp4</code> is the directory your Jellyfin server uses to pull-in media</li> +</ol> + +<p>You&#8217;ll be prompted for the user password. Once entered the file will begin copying over to your remote Jellyfin server. That&#8217;s it! Although, I should mention a little bonus feature that you should always have in your back pocket, since Jellyfin can sometimes be picky with media file formats:</p> + +<h2 id="converting-media-files-with-ease">Converting Media Files with Ease</h2> + +<p>This is where your new best friend <code>FFmpeg</code> comes into your life (if they weren&#8217;t there already).</p> + +<ul> +<li>Download and install <code>FFmpeg</code> &#8211;&#62; <a href="https://www.ffmpeg.org/download.html">ffmpeg.org&#47;download.html</a></li> +</ul> + +<p>Now navigate to the directory containing the media file you wish to convert via your Terminal and run the following command:</p> + +<pre><code>ffmpeg -i input.mp4 output.mkv +</code></pre> + +<ol> +<li><code>input.mp4</code> is the initial file we wish to convert</li> +<li><code>output.mkv</code> will be the name and file type of our converted media</li> +</ol> + +<p>Now you can circle back and run the previous <code>scp</code> command once you have converted your files to the desired format. Hopefully Jellyfin doesn&#8217;t complain about the formatting!</p></description> + <link>https://btxx.org/jelly</link> + <guid isPermaLink="false">https://btxx.org/jelly</guid> + <pubDate>Sat, 12 Mar 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Setup Jekyll from Scratch on a New Linux System</title> + <description><h1 id="setup-jekyll-from-scratch-on-a-new-linux-system">Setup Jekyll from Scratch on a New Linux System</h1> + +<p>2022-09-19</p> + +<p><strong>Special Note:</strong> Credit needs to be given to user <a href="https://stackoverflow.com/users/4974784/achraf-jeday">Achraf JEDAY</a> for putting these instructions together on Stack Overflow (although his comments were targeting an older version of Ruby). This post is more for my own personal notes than anything else.</p> + +<p>I find myself constantly running into small issues when trying to setup existing Jekyll projects on new Linux systems. I <em>could</em> use something like Docker, but that just seems so beefy and slow to me. So here is a step-by-step way (and foolproof from my own testing) to get Jekyll running smoothly in no time!</p> + +<h2 id="figuring-out-ruby-first">Figuring out Ruby First</h2> + +<p>The first item of business is removing the default Ruby that ships with most Linux distros:</p> + +<pre><code>sudo apt-get remove ruby +</code></pre> + +<p>Then we check for updates and install everything we need:</p> + +<pre><code>sudo apt update +sudo apt install git curl libssl-dev libreadline-dev zlib1g-dev autoconf bison build-essential libyaml-dev libreadline-dev libncurses5-dev libffi-dev libgdbm-dev +</code></pre> + +<p>Now we can install <code>rbenv</code> and <code>ruby-build</code>:</p> + +<pre><code>curl -sL https:&#47;&#47;github.com&#47;rbenv&#47;rbenv-installer&#47;raw&#47;main&#47;bin&#47;rbenv-installer | bash - +</code></pre> + +<p>After both of those install, you will want to add those to your system <strong>PATH</strong>:</p> + +<h3 id="bash">Bash</h3> + +<pre><code>echo &#39;export PATH="$HOME&#47;.rbenv&#47;bin:$PATH"&#39; &#62;&#62; ~&#47;.bashrc +echo &#39;eval "$(rbenv init -)"&#39; &#62;&#62; ~&#47;.bashrc +source ~&#47;.bashrc +</code></pre> + +<h3 id="zsh">ZSH</h3> + +<pre><code>echo &#39;export PATH="$HOME&#47;.rbenv&#47;bin:$PATH"&#39; &#62;&#62; ~&#47;.zshrc +echo &#39;eval "$(rbenv init -)"&#39; &#62;&#62; ~&#47;.zshrc +source ~&#47;.zshrc +</code></pre> + +<p>With that complete, we can now install the version of Ruby we wish to use and set it globally (at this time of writing it is <code>3.1.2</code>):</p> + +<pre><code>rbenv install 3.1.2 +rbenv global 3.1.2 +</code></pre> + +<p>And <code>rehash</code> so our changes take:</p> + +<pre><code>rbenv rehash +</code></pre> + +<p>Now you should see the properly set Ruby version when you run the following:</p> + +<pre><code>ruby -v +</code></pre> + +<h2 id="getting-ruby-gems">Getting Ruby Gems</h2> + +<p>In case you don&#8217;t have it installed already, be sure to grab <code>rubygems</code>:</p> + +<pre><code>sudo apt install rubygems +</code></pre> + +<h2 id="running-jekyll">Running Jekyll</h2> + +<p>We are almost done! Navigate to your Jekyll project&#8217;s directory and run:</p> + +<pre><code>gem install jekyll bundler +bundle install +</code></pre> + +<p>That&#8217;s it! Now if you run <code>bundle exec jekyll serve</code> you&#8217;ll find your Jekyll project running locally! Hopefully this helps others when needing to port any Jekyll projects over to a new Linux system. I know it will save me time!</p> + +<h2 id="alpine-linux-on-wayland">Alpine Linux on Wayland</h2> + +<p>Save yourself a world of trouble: just use <code>docker</code>. The docker image below (jekyll-serve) works out-of-the-box:</p> + +<p><a href="https://github.com/BretFisher/jekyll-serve">https:&#47;&#47;github.com&#47;BretFisher&#47;jekyll-serve</a></p> + +<p>Then run the following inside your project:</p> + +<pre><code>docker run -p 4000:4000 -v $(pwd):&#47;site bretfisher&#47;jekyll-serve +</code></pre></description> + <link>https://btxx.org/jekyll</link> + <guid isPermaLink="false">https://btxx.org/jekyll</guid> + <pubDate>Mon, 19 Sep 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Hosting a Jekyll Site on Sourcehut</title> + <description><h1 id="hosting-a-jekyll-site-on-sourcehut">Hosting a Jekyll Site on Sourcehut</h1> + +<p>2021-12-06</p> + +<p>I recently decided to switch my personal, static site&#8217;s hosting from Netlify to <a href="https://srht.site">sourcehut pages</a>. The process went <em>fairly</em> smoothly with only a couple minor hiccups; nothing rage-inducing. After everything was up and running smoothly, I figured writing out a step-by-step tutorial might help others who are thinking of doing a similar switch (or looking to host their first static site).</p> + +<p>But first, let me briefly explain why I made the switch in the first place&#8230;</p> + +<h2 id="why-sourcehut-pages">Why sourcehut pages?</h2> + +<p>Using Netlify as your static host is simple, intuitive and comes packed with a great deal of extra functionality you can easily add-on. So, why would I decide to switch over to sourcehut? The best answer comes directly off the main homepage of <a href="https://sourcehut.org">sourcehut.org</a>:</p> + +<ul> +<li>Absolutely no tracking or advertising</li> +<li>All features work without JavaScript</li> +<li>Many features work without an account</li> +<li>The fastest &#38; lightest software forge</li> +<li>100% free and open source software</li> +</ul> + +<p>After realizing all that, it&#8217;s pretty difficult to stick with Netlify&#8217;s <em>proprietary</em> stack&#8230;</p> + +<h2 id="free-but-not-free">Free but not <em>&#8220;free&#8221;</em></h2> + +<p>I should note that using sourcehut pages <em>does</em> require you to be a contributing (read: paying) member on the platform. I&#8217;m a cheapo and selected the $2&#47;month option but you might be inclined to donate more. Paying this &#8220;fee&#8221; is perfectly fine for me, considering the hosting quality (speed and storage) it affords me. It also doesn&#8217;t hurt that I get the &#8220;feel good vibes&#8221; of supporting an important, open source product.</p> + +<p>Keeping that in mind, let&#8217;s get into setting up our static site!</p> + +<h2 id="setting-up-your-repo-locally">Setting up your repo locally</h2> + +<ol> +<li>Create a new account on <a href="https://sourcehut.org">sourcehut</a> (or log in to an existing one)</li> +<li>Setup your billing to contribute monthly (tier amount is up to you)</li> +<li>Create a new repo under the <strong>git</strong> section<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup></li> +<li>Connect this repo locally (as you would via any other git host)</li> +<li>In this new local directory, place all your Jekyll files as you would with any other static hosting provider</li> +</ol> + +<h2 id="the-sourcehut-build-file">The sourcehut build file</h2> + +<p>In order to have your Jekyll site build and push the correct files live, you will need to use sourcehut&#8217;s build system. This will run every time you push out a new change to your repo (new blog post, page content changes, styling updates).</p> + +<p>To make things easier, you can copy the build file below (remember to use your <em>own</em> information for usernames, git repo naming etc):</p> + +<pre><code>image: debian&#47;stable +oauth: pages.sr.ht&#47;PAGES:RW +packages: +- ruby-full +- ruby-dev +environment: +site: yourusername.srht.site +sources: +- https:&#47;&#47;git.sr.ht&#47;~yourusername&#47;your-repo-name +tasks: +- install-bundler: | + sudo gem install bundler +- build: | + cd your-repo-name + bundle install + bundle exec jekyll build +- package: | + cd your-repo-name&#47;_site + tar -cvz . &#62; ..&#47;..&#47;site.tar.gz +- upload: | + acurl -f https:&#47;&#47;pages.sr.ht&#47;publish&#47;$site -Fcontent=@site.tar.gz +</code></pre> + +<p>Save this file as <code>.build.yml</code> and place it in the root directory of your Jekyll source code.</p> + +<p>Then, you just need to push your changes to the repo. If everything was setup properly, you&#8217;ll be able to see your live site at <code>https:&#47;&#47;yourusername.srht.site</code> (just give it a little bit of time to run the full build process)</p> + +<h2 id="custom-domains">Custom Domains</h2> + +<p>If you&#8217;re like me and want to use your own custom domain - have no fear! This process is actually quite easy.</p> + +<p>First, add a new A Record through your domain provider:</p> + +<pre><code>@ IN A 173.195.146.139 +</code></pre> + +<p>Then change the following <code>environment</code> parameter inside your existing <code>.build.yml</code> file:</p> + +<pre><code>environment: +site: yourcustomdomain.com +</code></pre> + +<p>And that&#8217;s it - custom domain set! If you run into any issues check out the <a href="https://srht.site/custom-domains">official documentation on custom domains</a>.</p> + +<h2 id="wrapping-up">Wrapping Up</h2> + +<p>Hopefully this helps to streamline the process for others to host their static sites through sourcehut. Having open and healthy competition among host providers and <code>git</code> workflows is essential to avoiding vendor lock-in. </p> + +<p>Even low-effort support for open-source products (like where you host your static site or FOSS projects) can go a long way. Just some food for thought.</p> + +<div class="footnotes"> +<hr/> +<ol> + +<li id="fn1"> +<p>Thanks to <a href="https://cnx.srht.site/">McSinyx</a> for pointing out that the repo used for creating your website can be named anything (instead of defaulting to your sourcehut username)&#160;<a href="#fnref1" rev="footnote">&#8617;</a></p> +</li> + +</ol> +</div></description> + <link>https://btxx.org/jekyll-sourcehut</link> + <guid isPermaLink="false">https://btxx.org/jekyll-sourcehut</guid> + <pubDate>Mon, 06 Dec 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Introducing PageRoast</title> + <description><h1 id="introducing-pageroast">Introducing PageRoast</h1> + +<p>2021-03-11</p> + +<p>Following up with my concept of releasing small side projects weekly, I have officially launched <a href="https://pageroast.com">PageRoast</a>. What is PageRoast I hear you ask?</p> + +<blockquote> +<p>Receive a detailed report analyzing your landing page with actionable items to improve your conversion rate.</p> +</blockquote> + +<p>In simple terms that just means I will <strong>roast your landing page</strong>. Included in a page roast report is:</p> + +<ul> +<li>Fully detailed ABCD Framework report</li> +<li>Proposed content &#38; design changes</li> +<li>Page performance audit</li> +</ul> + +<p>And you get all of this for just <strong>$100</strong> (currently 50% until April 1st with coupon code PHROAST). Alright, enough with the &#8220;sales pitch&#8221; - why did I make this side project?</p> + +<p>From the main <a href="https://pageroast.com/#2021-03-10-pageroast-has-launched">launch blog post on PageRoast itself</a> I wrote:</p> + +<blockquote> +<p>I&#8217;ve always been obsessed with developing landing pages that produce high conversion rates. It&#8217;s what I&#8217;ve done for a large portion of my web development career.So I thought to myself, &#8220;Why not launch a small-scale audit service to help indie devs and startups?&#8221;</p> +</blockquote> + +<p>That&#8217;s really all there is to it. If you would like to learn more, check out the following links:</p> + +<ul> +<li><a href="https://pageroast.com">PageRoast main website</a></li> +<li><a href="https://pageroast.com/#2021-03-10-pageroast-has-launched">PageRoast official launch blog post</a></li> +</ul></description> + <link>https://btxx.org/introducing-pageroast</link> + <guid isPermaLink="false">https://btxx.org/introducing-pageroast</guid> + <pubDate>Thu, 11 Mar 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Introducing Notez</title> + <description><h1 id="introducing-notez">Introducing Notez</h1> + +<p>2021-01-13</p> + +<p>I have always been a fan of simple note taking applications, since I tend to take a lot of random notes throughout the work day. Sometimes I reach for simple pen and paper, but other times it&#8217;s nice to stay focused jotting down notes on the same device I&#8217;m working on.</p> + +<p>Previously, I just created quick <code>notes.txt</code> files in my open code editor or fell back on the default OS note apps. These worked perfectly fine but often got in my way (or even worse - lost among everything else).</p> + +<p>So I said the hell with it and built Notez.</p> + +<h2 id="what-makes-notez-special">What makes Notez special?</h2> + +<p>Nothing, really. It&#8217;s actually a pretty &#8220;stupid&#8221; app compared to others on the market. But this one is <em>mine</em>. Plus, it was fun to piece it together on a random evening before bed.</p> + +<p>For those curious, let&#8217;s take a look at the feature list:</p> + +<ul> +<li>free and open source (github.com&#47;bradleytaunt&#47;notez)</li> +<li>uses <code>localStorage</code> to keep changes persistent (helpful for browser crashes, etc)</li> +<li>includes basic export functionality to download content as a simple <code>output.txt</code> file</li> +</ul> + +<p>That&#8217;s it. Mind blowing stuff, eh?</p> + +<h2 id="making-stuff-is-fun">Making stuff is fun</h2> + +<p>My main takeaway when building this tiny, dumb app was to just <em>enjoy building fun stuff</em>. It crossed my mind several times how there are already hundreds of note taking apps across the vast Internet. I also thought about how others might look at the code I wrote and go, &#8220;Oh my God - why did he do it that way? What an idiot!&#8221;. But I don&#8217;t care - I had fun making it.</p> + +<p>Hopefully you enjoy using it as well!</p></description> + <link>https://btxx.org/introducing-notez</link> + <guid isPermaLink="false">https://btxx.org/introducing-notez</guid> + <pubDate>Wed, 13 Jan 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Improving Tufte CSS for Jekyll</title> + <description><h1 id="improving-tufte-css-for-jekyll">Improving Tufte CSS for Jekyll</h1> + +<p>2019-11-01</p> + +<p>After creating the ET-Jekyll theme almost two years ago, I finally got around to revamping the structure and improving a lot of minor performance issues. Items that have been surely needing of updates for the last couple of years.</p> + +<h2 id="introductions">Introductions</h2> + +<p>I&#8217;ve always been a sucker for Edward Tufte&#8217;s incredibly simple, yet powerful design work used in his books and handout projects. So, in 2018 I released a Tufte CSS inspired Jekyll theme for the open source community. I called it <a href="https://et-jekyll.netlify.com">ET-Jekyll</a> (so original, I know). Tufte CSS was a great starting point for my Jekyll theme, but there were areas I thought could use some minor improvements.</p> + +<p>Feel free to read all the details on the design here: <a href="https://et-jekyll.netlify.com/et-jekyll-theme/">ET-Jekyll theme details</a></p> + +<h2 id="minor-fixes-one-year-later">Minor Fixes One Year Later</h2> + +<p>When I finally circled back to this project recently, I noticed some minor issues that could be improved right away with little to no effort. Let&#8217;s see the changes made at a glance:</p> + +<ul> +<li>Sidenote, marginnote and figure element restyling (flexbox)</li> +<li>Table styling fixes (right alignment issues)</li> +<li>Switch MathJax over to SVG embeds (performance fixes)</li> +<li>Simplify HTML skeleton of main pages, remove overkill classes</li> +<li>Remove lazysizes.js to save on load times</li> +<li>Fallback on font-display for font loading</li> +<li>Inline all CSS for faster initial paint</li> +<li>Minor link :hover coloring (accessibility)</li> +<li>Add missing image link on example page</li> +<li>Update details post structure</li> +</ul> + +<p>You can view all the updates in more detail <a href="https://github.com/bradleytaunt/ET-Jekyll/commit/254f9e8f28764c9525ba7405bbbfa18a3867d241">here</a>.</p> + +<p><strong>So what did this accomplish?</strong> Let&#8217;s break it down below.</p> + +<h2 id="first-contentful-paint-input-delay">First Contentful Paint &#38; Input Delay</h2> + +<p>The new improvements have netted the theme a savings of 300ms on first paint and reduced the input delay by 150ms. Small wins - but wins nonetheless since every millisecond counts.</p> + +<h2 id="fixing-render-blocking-items">Fixing Render Blocking Items</h2> + +<p>The original theme reported a few items that were slowing down the initial render for the end-users:</p> + +<table> +<thead> +<tr> +<th>URL</th> +<th>Size (KB)</th> +<th>Savings (ms)</th> +</tr> +</thead> + +<tbody> +<tr> +<td>&#47;css&#47;style.css</td> +<td>2.0</td> +<td>150</td> +</tr> +<tr> +<td>&#47;lazysizes@4.0.1&#47;lazysizes.js</td> +<td>5.0</td> +<td>960</td> +</tr> +<tr> +<td>MathJax.js?config=TeX-MML-AM_CHTML</td> +<td>18.0</td> +<td>1,260</td> +</tr> +</tbody> +</table> + +<p>These items were resolved by:</p> + +<ul> +<li>Rendering all styling inline (therefore removing the extra HTTP request)</li> +<li>Removing the lazysizes library altogether (browsers plan to support lazy loading natively in the future) + +<ul> +<li>The future plan is to integrate something like Cloudinary for out-of-the-box image processing</li> +</ul></li> +<li>Switch over MathJax to render equations as embedded SVGs (saves on bandwidth rendering an entire extra typeface)</li> +</ul> + +<h2 id="lighthouse-numbers">Lighthouse Numbers</h2> + +<p>Though it might not look like much, the updated theme receives a 4-point boost to its performance rating during a Lighthouse audit. Having a perfect score would be even better, but I can settle for 2-points under (for now).</p> + +<h4 id="old-version">Old Version</h4> + +<table> +<thead> +<tr> +<th>Performance</th> +<th>Accessibility</th> +<th>Best Practices</th> +<th>SEO</th> +</tr> +</thead> + +<tbody> +<tr> +<td>94</td> +<td>100</td> +<td>100</td> +<td>100</td> +</tr> +</tbody> +</table> + +<h4 id="new-version">New Version</h4> + +<table> +<thead> +<tr> +<th>Performance</th> +<th>Accessibility</th> +<th>Best Practices</th> +<th>SEO</th> +</tr> +</thead> + +<tbody> +<tr> +<td>98</td> +<td>100</td> +<td>100</td> +<td>100</td> +</tr> +</tbody> +</table> + +<h2 id="final-thoughts">Final Thoughts</h2> + +<p>This project could still use some more fine-tuning, but for now I&#8217;m fairly happy with the outcome. Even the smallest boost in performance and rendering time makes me feel like I accomplished something worthwhile. </p> + +<p>Please don&#8217;t hesitate to suggest features or point out any issues you happen to stumble across if you plan to use ET-Jekyll. Thanks for reading!</p></description> + <link>https://btxx.org/improving-tufte-jekyll</link> + <guid isPermaLink="false">https://btxx.org/improving-tufte-jekyll</guid> + <pubDate>Fri, 01 Nov 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Improving Receipt UX</title> + <description><h1 id="improving-receipt-ux">Improving Receipt UX</h1> + +<p>2019-05-15</p> + +<p>There was a pretty interesting article posted a couple days ago about rethinking the standard receipt design that I found quite compelling. Although, as good as the concept is, I think it can be improved (simplified) even further.</p> + +<h2 id="what-was-the-redesign-exaclty">What was the redesign exaclty?</h2> + +<p>Overall <a href="https://twitter.com/datatoviz?lang=en">Susie Lu</a> did a wonderful job tackling such an old and forgotten design. She fixed some major pain points with the current receipt layout:</p> + +<ul> +<li>Bubble chart to visually indicate total spent per category</li> +<li>Categorized items by percentage of total spent</li> +<li>List individual items in descending order based on cost</li> +<li>Bar charts to compliment the item listing order</li> +</ul> + +<p>Curious how her redesign looks? <a href="https://www.fastcompany.com/90347782/the-humble-receipt-gets-a-brilliant-redesign">Take a look at the original article</a></p> + +<h2 id="what-did-this-concept-get-wrong">What did this concept get wrong?</h2> + +<p>Simply put: <strong>paper waste</strong>. </p> + +<p>Using bubble and bar charts from a visual design perspective is great - but not so eco-friendly in this instance (since we are dealing with physical paper waste). It might seem like a small nitpick but with hundreds of thousands (if not millions) of receipts printed daily, this extra paper space required would add up quickly.</p> + +<p>Fortunately, I think with some minor tweaks we can keep the underlying principles of the new redesign, while creating a more eco-friendly layout. We can save more space and therefore save on the overall paper needed.</p> + +<h2 id="receipt-redesign">Receipt Redesign</h2> + +<p>Let&#8217;s take a look at my redesign concept:</p> + +<p>With this layout we are able to keep all the key concepts that <a href="https://twitter.com/datatoviz?lang=en">Susie Lu</a> initially introduced with her receipt design while preserving more space.</p> + +<ul> +<li>Categories are still listed by percentage of total spent</li> +<li>Individual items are organized in descending order based on cost</li> +<li>Uppercase and lowercase elements are used to distinguish parent &#47; child items instead of additional space or dividers</li> +</ul> + +<h2 id="final-thoughts">Final thoughts</h2> + +<p>The original redesign from a visual perspective is <em>wonderful</em> but when you start to think about implementing it into the real world, it seems slightly impractical. My redesign concept is far from perfect (I&#8217;m sure I&#8217;ve overlooked some use cases) but I think it&#8217;s a strong step forward for redesigning our archaic receipt layouts.</p></description> + <link>https://btxx.org/improving-receipt-ux</link> + <guid isPermaLink="false">https://btxx.org/improving-receipt-ux</guid> + <pubDate>Wed, 15 May 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Improving Github's New Design</title> + <description><h1 id="improving-githubs-new-design">Improving Github&#8217;s New Design</h1> + +<p>2020-07-07</p> + +<p>Like many other Github users, I am not a big fan of their recent repository page redesign. In my mind it seems like a change just for the sake of change - the original UI worked perfectly fine.</p> + +<p><em>Sigh.</em></p> + +<p>I was planning on recreating the original Github layout with custom CSS but decided against it. Tackling such a big change in design would cause headaches if Github ever changed even one simple class or id on a given element. My final conclusion was to just improve their new design with my own personal quality of life improvements.</p> + +<p>So, enough chit-chat. Let&#8217;s get into it.</p> + +<h2 id="current-design-2020">Current Design (2020)</h2> + +<p>The default view for a repo&#8217;s homepage and ticket items are locked at a set <code>max-width</code>. This causes some visual strain in comparison to the full-width headers and navigations directly above. I use a decently sized montior when using your app Gitub - <strong>let me use all the space available to me</strong>!</p> + +<h2 id="my-improvements">My Improvements</h2> + +<p>Your users shouldn&#8217;t have to jump around the page looking for the important information they want to see. Resetting the basic repo information to the left side of the screen allows user to <em>instantly</em> read-up on the project details. (This design is catered towards left-to-right readers mind you).</p> + +<p>We now also utilize all the available screen space, dependent on the user&#8217;s browser window size.</p> + +<p>We make similar updates to the ticket item view and also remove the out-of-place <code>margin-bottom</code> from the project link headers.</p> + +<h2 id="try-it-yourself">Try It Yourself!</h2> + +<p>You can very easily implement these custom CSS changes with an extension for the browser of your choice:</p> + +<ul> +<li>Firefox: <a href="https://addons.mozilla.org/en-US/firefox/addon/styl-us/">Stylus</a></li> +<li>Chrome: <a href="https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha">Stylebot</a></li> +</ul> + +<p>Then create a new custom CSS file to target <code>github.com</code> with the following properties:</p> + +<pre><code>.container-xl { + max-width: 100%; +} + +.repository-content .gutter-condensed.gutter-lg { + flex-direction: row-reverse !important; +} + +.repository-content #discussion_bucket .gutter-condensed.gutter-lg { + flex-direction: row !important; +} + +.repohead &#62; div.d-flex { + margin-bottom: 0 !important; +} + +#show_issue { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.repository-content #discussion_bucket, +#partial-discussion-header { + width: 100%; +} +</code></pre> + +<p>That&#8217;s it! Feel free to improve on this and further make it your own! I might create a new repo for this project if I end up adding even more improvements to the core CSS.</p></description> + <link>https://btxx.org/improving-githubs-new-design</link> + <guid isPermaLink="false">https://btxx.org/improving-githubs-new-design</guid> + <pubDate>Tue, 07 Jul 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Using HTML Validator Badges Again</title> + <description><h1 id="using-html-validator-badges-again">Using HTML Validator Badges Again</h1> + +<p>2019-07-05</p> + +<p>There was a time on the Internet when websites wore badges of honor, declaring that their code was semantic and followed the W3C guidelines. The validators we used weren&#8217;t great (and <strong>still</strong> aren&#8217;t perfect) but they represented a community that took pride in caring about the quality of their work. I think it&#8217;s time we bring HTML badges back.</p> + +<h2 id="getting-the-flaws-out-of-the-way">Getting the flaws out of the way</h2> + +<p>Of course, there were reasons why these badges slowly faded out of popularity. Some of the reasoning made sense, but most felt like a stretch in logic from my perspective. I always looked at it as a &#8220;the good outweighs the bad&#8221;.</p> + +<p>Jukka Korpela&#8217;s post way back in 2003, <a href="http://jkorpela.fi/html/validation.html">HTML validation is a good tool but just a tool</a>, highlighted a lot of problems with relying so heavily on these HTML validators. I suggest you give it a read if this kind of thing interests you. I found it fascinating, even though I disagree with most of the points he makes.</p> + +<p>Some negatives used to dismiss HTML badges:</p> + +<ul> +<li><strong>The badge system is outdated</strong> + +<ul> +<li>Dismissing the worth of something based on how long it has been around is foolish. Many tools and frameworks are &#8220;outdated&#8221; but are still used to this day with great success.</li> +</ul></li> +<li><strong>HTML5 doesn&#8217;t <em>require</em> validation</strong> + +<ul> +<li>Technically <em>no subset of HTML</em> requires validation - but developers should aim for it. The W3C validators perform a solid job of keeping a standard for web development, so by following a standard we can keep experiences consistent for users.</li> +</ul></li> +<li><strong>Validation is too formal</strong> + +<ul> +<li>I believe in the ability to achieve your desired outcome based on almost any constraints. If a project leans you towards invalid or non-semantic structure to fulfill requirements, a better approach needs to be evaluated. We as developers tend to settle too quickly on the easiest option available to us.</li> +</ul></li> +<li><strong>Websites &#47; web apps are just <em>too complex</em> to follow the W3C guidelines</strong> + +<ul> +<li>I call <em>BS</em> on this argument. The complexity of a website should have nothing to do with keeping semantic standards. <em>This is your job.</em></li> +</ul></li> +<li><strong>It only exists to catch syntax errors</strong> + +<ul> +<li>For the record, I still see this more of a positive take on using validators. Subtle and nuanced syntax mistakes can be easily overlooked by the human eye.</li> +</ul></li> +</ul> + +<h2 id="nobody-puts-badges-in-a-corner">&#8220;Nobody puts <em>badges</em> in a corner&#8221;</h2> + +<p>A large of amount of designers &#47; developers tend to forget that there are new people entering our industry everyday and they might not be as well versed in the basics of the web (HTML &#38; CSS specifically). Since so many newcomers start out with JavaScript frameworks or jump onto pre-existing projects, they don&#8217;t always grasp the core foundation of valid markup. Some frameworks even break basic standards for visuals or easier development environments - setting their initial expectations that ugly semantics is acceptable code. The ends justify the means, etc.</p> + +<p>Guiding first-timers towards HTML validators let&#8217;s them rethink their structure when building products or at least give some forethought to their outputted code. We, the more <em>verteran</em> members of the community, have the knowledge of proper semantics since we grew our careers around this &#8220;trend&#8221;. We shouldn&#8217;t assume newbies have the same understanding. The basics are important.</p> + +<h2 id="open-source-html5-badge">Open source HTML5 badge</h2> + +<p>Since the W3C doesn&#8217;t officially produce any badges for HTML5 validation 1, I&#8217;ve gone ahead and open sourced <code>SVG</code> and <code>PNG</code> versions of a badge based off the current W3C designs. You can check out the Github repo: <a href="https://github.com/bradleytaunt/html5-valid-badge">HTML5 Valid Badge</a></p> + +<p>If you decide to use these badges, be sure to link these images to your valid passing URL (<a href="https://html5.validator.nu">html5.validator.nu</a>). You can see an example of the link in the footer of this website.</p> + +<p>Please feel free to reach out and share your websites &#47; projects that pass as valid HTML and include an HTML valid badge. I&#8217;d love to check them out!</p> + +<h2 id="refs">Refs</h2> + +<p>1 <a href="http://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/">Interview with Mike Smith</a>: &#8220;There won&#8217;t be any proper Valid HTML5 icon forthcoming, so if you&#8217;d like to use one in your content, you&#8217;ll probably need to create one on your own.&#8221;</p></description> + <link>https://btxx.org/html5-validator-badge</link> + <guid isPermaLink="false">https://btxx.org/html5-validator-badge</guid> + <pubDate>Fri, 05 Jul 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Write HTML Like It's 1999</title> + <description><h1 id="write-html-like-its-1999">Write HTML Like It&#8217;s 1999</h1> + +<p>2019-06-06</p> + +<p>I am sure it&#8217;s safe to say that most developers love to use the latest and greatest web tools available. Helpful resources such as preprocessors, template engines, syntax formatters - you name it - can all make a developer&#8217;s life easier. Unfortunately, this sometimes comes at a cost: the HTML structure.</p> + +<p>This is why I try my best to write HTML as if I&#8217;m stuck with the constraints of the 90s (within reason). What does this mean exactly? It means that <code>tables</code> are coded with <code>table</code> elements. Navigations are coded with <code>nav</code> and ordered&#47;unordered list-items. Form inputs are not set with <code>display: none</code> and replaced with custom containers. You know, <em>semantic</em> HTML.</p> + +<p>To be clear, I&#8217;m not advocating for creating projects that <em>look</em> like they belong in the 1990s. I would just prefer developers &#47; designers be more conscious of their HTML <em>skeleton</em>.</p> + +<h2 id="bad-html-practices">Bad HTML practices</h2> + +<p>Let&#8217;s do a very simple breakdown of some of the more common HTML no-nos:</p> + +<h2 id="good-html-practices">Good HTML practices</h2> + +<p>So what should you do in place of these bad HTML implementations?</p> + +<h2 id="my-basic-structure-test">My basic &#8220;structure&#8221; test</h2> + +<p>I&#8217;ve found a pretty simple starting point for testing the <em>bones of a website</em> by using the following single line of CSS:</p> + +<pre><code>* { + border: 2px dotted black; +} +</code></pre> + +<p>This property simply outlines all elements on the current page in a dotted border. By placing a border on every HTML element you can instantly see how overly complex or <em>ugly</em> your structure might be under the hood.</p> + +<h2 id="thanks-captain-obvious">&#8220;Thanks, Captain Obvious!&#8221;</h2> + +<p>I know, this stuff is pretty basic. The point of this post isn&#8217;t to tell you (developers) something brand new or mind-blowing, but instead should inspire you to keep things simple.</p> + +<p>Don&#8217;t forget that there is always someone new into the world of design and development. Hopefully this post steers others towards keeping HTML code semantic and clean.</p> + +<h2 id="update-to-this-article">Update to this article</h2> + +<p>Since this post received <a href="https://news.ycombinator.com/item?id=20133817">so much more attention</a> than I ever expected, I&#8217;ve decided to touch on a few small points brought up in the comments.</p> + +<ol> +<li><p><strong>What is the benefit of semantic HTML?</strong></p> + +<ul> +<li>Accessibility. Programs like screen readers are built around the foundation of proper HTML hierarchy. I highly recommend testing all your projects with a screen reader - it will open your eyes to a lot of issues users with disabilities suffer through.</li> +</ul></li> +<li><p><strong>Tables not being responsive</strong></p> + +<ul> +<li>This simply isn&#8217;t true. It is much more semantic to layout your tables as you would normally, then for mobile devices you can target specific inner elements and alter them with <code>flexbox</code> etc. (You can see responsive tables in action <a href="/responsive-tables">here</a>)</li> +</ul></li> +<li><p><strong>Instead of the CSS one-liner, simply use Firefox debugger</strong></p> + +<ul> +<li>Fair point. Firefox is great!</li> +</ul></li> +</ol></description> + <link>https://btxx.org/html-like-1999</link> + <guid isPermaLink="false">https://btxx.org/html-like-1999</guid> + <pubDate>Thu, 06 Jun 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>HTML Dark Mode</title> + <description><h1 id="html-dark-mode">HTML Dark Mode</h1> + +<p>2023-04-11</p> + +<p>I wrote an article back in 2021 called <a href="https://bt.ht/lazy-dev-dark-mode/">The Lazy Developer&#8217;s Dark +Mode</a> where I explained how to implement +a very basic &#8220;dark mode&#8221; by using the <code>prefers-color-scheme</code> CSS attribute. +This stills works perfectly fine, and in fact there is a cleaner variation of +this created by <em>jacksonchen666</em>: <a href="https://jacksonchen666.com/posts/2023-04-09/13-47-16/">These 3 Lines of CSS Will Give You Dark Mode for Free</a>.</p> + +<p>But today I wanted to show how to add dark mode functionality to a website +without <em>any CSS at all</em>.</p> + +<pre><code>&#60;meta name="color-scheme" content="dark light"&#62; +</code></pre> + +<p>Add that line inside the <code>head</code> tags on your HTML files and you&#8217;re good to go.</p> + +<h2 id="minor-caveat">Minor Caveat</h2> + +<p>I mentioned this same issue on the official <a href="https://barf.bt.ht/dark-mode/">barf blog +post</a> but it doesn&#8217;t hurt to repeat it here. +Safari still has minor ahref &#47; link color issue when defaulting to browser dark +mode. If supporting that browser is a deal-breaker for you, I suggest looking +at my <a href="https://bt.ht/safari-default-dark-mode/">hacky solution</a>.</p> + +<p>Hopefully this helps others to add dark mode to their existing websites and +projects with minimal effort!</p></description> + <link>https://btxx.org/html-dark-mode</link> + <guid isPermaLink="false">https://btxx.org/html-dark-mode</guid> + <pubDate>Tue, 11 Apr 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Goodbye WordPress, Hello Jekyll (Again)</title> + <description><h1 id="goodbye-wordpress-hello-jekyll-again">Goodbye WordPress, Hello Jekyll (Again)</h1> + +<p>2020-08-13</p> + +<p>For the past four months this blog has been running on WordPress - but that ended today. I&#8217;ve officially switched back over to Jekyll. I&#8217;m not going to spend too much time delving into <em>why</em> I made the transition back, but I&#8217;ll leave some cliff-notes for any interested parties.</p> + +<h2 id="the-big-issues-with-my-wordpress-setup">The big issues with <em>my</em> WordPress setup</h2> + +<p>I have to state that these problems existed based on <em>my own</em> setup &#47; hosting choices with WordPress - this is not a direct reflection of WP itself.</p> + +<ol> +<li><strong>No theme editor access</strong> + +<ul> +<li>I was using EasyWP (Namecheap etc.) for my web hosting. It only cost me $3.88&#47;month, which was very cheap for the quality of service provided. Unfortunately, this low price came with some setbacks. EasyWP doesn&#8217;t allow users to edit <code>header.php</code> or <code>functions.php</code> files directly in the theme editor. Having to resort to FTP for simple one-line change was annoying.</li> +</ul></li> +<li><strong>Super cache</strong> + +<ul> +<li>Caching web pages is wonderful for users on subsequent visits, but EasyWP took this to the extreme. Making minor styling updates sometimes required code changes in the <code>header.php</code> file directly in order to persist (see problem with editing these files in point #1).</li> +</ul></li> +<li><strong>Monthly cost</strong> + +<ul> +<li>As I stated above, spending $3.88 on a monthly basis was peanuts in the grand scheme of things. Still, an extra monthly subscription for a side hobby seemed overkill for my use case.</li> +</ul></li> +<li><strong>Future proofing</strong> + +<ul> +<li>In the end, having the core website generate itself into static files means it will stand the test of time on the interwebs. HTML &#38; CSS FTW.</li> +</ul></li> +</ol> + +<h2 id="what-i-lost-in-the-switch">What I lost in the switch</h2> + +<ol> +<li><strong>Comments</strong> + +<ul> +<li>I loved the concept of owing &#47; hosting comments directly on each post but this seemed like a fair trade-off when compared to the positives listed above. I might circle back around and use something like <a href="https://commento.io/">Commento</a> or <a href="https://github.com/imsun/gitment">Gitment</a></li> +</ul></li> +<li><strong>Blog anywhere</strong> + +<ul> +<li>Having the ability to hop on any machine, log in to my site and blog was awesome. Over time though, I found myself not doing this very often. Most times when composing an article I found I would write it out, edit and publish all in one sitting. Cool concept - just not as useful.</li> +</ul></li> +</ol> + +<h2 id="moving-forward">Moving forward</h2> + +<p>I&#8217;ve learned to stick with what keeps me productive (and in this case, keeps me writing consistently). I still love WordPress and won&#8217;t hesitate to reach for it when the need arrives. Unfortunately, it seems my personal website isn&#8217;t one of those instances.</p></description> + <link>https://btxx.org/hello-jekyll</link> + <guid isPermaLink="false">https://btxx.org/hello-jekyll</guid> + <pubDate>Thu, 13 Aug 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Converting HEIF Images with macOS Automator</title> + <description><h1 id="converting-heif-images-with-macos-automator">Converting HEIF Images with macOS Automator</h1> + +<p>2023-07-21</p> + +<p>Often times when you save or export photos from iOS to iCloud they often render themselves into <code>heif</code> or <code>heic</code> formats. Both macOS and iOS have no problem working with these formats, but a lot of software programs will not even recognize these filetypes. The obvious step would just be to convert them via an application or online service, right?</p> + +<p>Not so fast! Wouldn&#8217;t it be much cleaner if we could simply right-click our <code>heif</code> or <code>heic</code> files and convert them directly in Finder? Well, I&#8217;ve got some good news for you&#8230;</p> + +<h2 id="basic-requirements">Basic Requirements</h2> + +<ol> +<li>You will need to have <a href="https://homebrew.sh">Homebrew</a> installed</li> +<li>You will need to install the <code>libheif</code> package through Homebrew: <code>brew install libheif</code></li> +</ol> + +<h2 id="creating-our-custom-automator-script">Creating our custom Automator script</h2> + +<p>For this example script we are going to convert the image to JPG format. You can freely change this to whatever format you wish (PNG, TIFF, etc.). We&#8217;re just keeping things basic for this tutorial. Don&#8217;t worry if you&#8217;ve never worked with Automator before because setting things up is incredibly simple.</p> + +<ol> +<li><p>Open the macOS Automator from the Applications folder</p></li> +<li><p>Select <code>Quick Option</code> from the first prompt</p></li> +<li><p>Set &#8220;Workflow receives current&#8221; to <code>image files</code></p></li> +<li><p>Set the label &#8220;in&#8221; to <code>Finder</code></p></li> +<li><p>From the left pane, select &#8220;Library &#62; Utilities&#8221;</p></li> +<li><p>From the presented choices in the next pane, drag and drop <code>Run Shell Script</code> into the far right pane</p></li> +<li><p>Set the area &#8220;Pass input&#8221; to <code>as arguments</code></p></li> +<li><p>Enter the following code below as your script and type <code>⌘-S</code> to save (name it something like &#8220;Convert HEIC&#47;HEIF to JPG&#8221;)</p> + +<p>for f in &#8220;$@&#8221; +do +&#47;opt&#47;homebrew&#47;bin&#47;heif-convert &#8220;$f&#8221; &#8220;${f%.*}.jpg&#8221; +done</p></li> +</ol> + +<h2 id="making-edits">Making Edits</h2> + +<p>If you ever have the need to edit this script (for example, changing the default format to <code>png</code>), you will need to navigate to your <code>~&#47;Library&#47;Services</code> folder and open your custom heif Quick Action in the Automator application. </p> + +<p>Simple as that. Happy converting!</p> + +<p>If you&#8217;re interested, I also have some other Automator scripts available:</p> + +<ul> +<li><a href="/batch-webp-conversion/">Batch Converting Images to webp with macOS Automator</a></li> +<li><a href="/macos-convert-to-html/">Convert Files to HTML with macOS Automator Quick Actions</a></li> +</ul></description> + <link>https://btxx.org/heif</link> + <guid isPermaLink="false">https://btxx.org/heif</guid> + <pubDate>Fri, 21 Jul 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Stop Using Hamburger Menus (Sometimes)</title> + <description><h1 id="stop-using-hamburger-menus-sometimes">Stop Using Hamburger Menus (Sometimes)</h1> + +<p>2023-05-05</p> + +<p>I recently <a href="https://fosstodon.org/@tdarb/110264983268249599">tooted about my hatred of website hamburger menus</a> which was met with a surprising amount of support from other users. It seems like most people <em>don&#8217;t actually like hamburger menus</em>. So why do we, as developers, keep using them in our products and designs? Is it our only option? Or is it because we have become conditioned to expect it?</p> + +<h2 id="the-core-problem-with-hamburger-menus">The Core Problem with Hamburger Menus</h2> + +<p>The biggest headache when coming across these menus on the web is the complete disregard for <strong>accessibility</strong>. Performance and solid user experience is almost always thrown out the window in favour of a &#8220;prettier&#8221; design layout. You might have made the overall design &#8220;cleaner&#8221; for your users, but you sacrificed all usability to do so.</p> + +<p>I challenge you to visit a webpage or web app with a hamburger menu and try to navigate solely with your keyboard and screen-readers (or better yet - try these screen readers on mobile!). Within seconds you will find a whole mess of issues. Now try the same test with JavaScript disabled&#8230; Yikes.</p> + +<h2 id="but-i-have-no-choice">&#8220;But I Have No Choice!&#8221;</h2> + +<p>I see this argument pop-up frequently when taking to design leaders or developers. I call bullshit on this excuse. You <em>absolutely</em> have the choice to avoid implementing bad designs - that&#8217;s your job! Either you&#8217;re not fighting hard enough against those pushing for it, or you&#8217;re just trying to build a &#8220;pretty&#8221; portfolio.</p> + +<h2 id="best-alternative-sitemap-footer">Best Alternative: Sitemap Footer</h2> + +<p>So instead of just whining about hamburger menus, I will actually offer up a solid replacement: <strong>sitemap footers</strong>. Simply place all your website&#47;application links into the bottom footer and link directly to them from your header. Be sure to also include some form of &#8220;Top of the page&#8221; link for quick access back to the initial scroll view.</p> + +<p>That&#8217;s it. There is nothing else you need to do for this to <em>just work</em>. It might sound oversimplified and that&#8217;s because it is. Looking for an example? This very website utilizes this technique, so give it a spin! Try using just your keyboard or even better - use a screen reader. Disable JS and CSS and watch it work flawlessly still.</p> + +<p><strong>Pros:</strong></p> + +<ul> +<li>Keyboard navigation accessible</li> +<li>Excellent screen-reader support</li> +<li>Works on all devices&#47;screens by default (no media queries!)</li> +<li>Stays out of the way until called upon (UX goodness)</li> +<li>Requires ZERO CSS or JavaScript</li> +</ul> + +<p><strong>Cons:</strong></p> + +<ul> +<li>Footer can become large with many links (although I <em>really</em> don&#8217;t see this as a big deal)</li> +</ul> + +<h2 id="no-excuse">No Excuse</h2> + +<p>There really is no excuse to still be using hamburger menus. Users expect them to be present only because we as designers have conditioned them think that way. They deserve a better experience on the web. The <em>least</em> we can do is improve something as simple as website navigation&#8230;</p></description> + <link>https://btxx.org/hamburgers</link> + <guid isPermaLink="false">https://btxx.org/hamburgers</guid> + <pubDate>Fri, 05 May 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Using Hamburger Menus? Try Sausage Links</title> + <description><h1 id="using-hamburger-menus-try-sausage-links">Using Hamburger Menus? Try Sausage Links</h1> + +<p>2019-06-14</p> + +<p>When designing medium to large sized menu navigations on the mobile web the default go-to, for some time now, has been hamburger menus. This isn&#8217;t necessarily a bad thing, but there is a simpler alternative for certain use cases.</p> + +<p>Before we get into the nitty-gritty details (and a simple demo) of the <em>sausage link</em> concept, let&#8217;s take a quick look at the pros and cons of hamburger menus.</p> + +<h2 id="hamburger-menus">Hamburger Menus</h2> + +<p>The concept of the <a href="https://codepen.io/search/pens?q=hamburger%20menu&amp;page=1&amp;order=popularity&amp;depth=everything">hamburger menu</a> isn&#8217;t <em>horrible</em> by any means, in fact it does solve a lot of problems from a visual perspective. Unfortunately, that doesn&#8217;t mean it exists without some annoying flaws.</p> + +<h3 id="the-good">The Good</h3> + +<ul> +<li>Minimizes the amount visual space the menu requires</li> +<li>Fairly commonplace now that a good portion of users understand it&#8217;s functionality</li> +<li>Makes the lives of designers easier by tucking all items away on mobile 😛</li> +</ul> + +<h3 id="the-bad">The Bad</h3> + +<ul> +<li>Requires extra testing&#47;work to ensure the menu will play nice with screen readers and keyboard-only users</li> +<li>Can get overly complex with the presence of children dropdown elements, help text etc.</li> +<li>Adds bloat to projects that might require additional JavaScript to render these menus (CSS only hamburger menus avoid this issue)</li> +<li>Adds an additional point of interaction from the user (click to open, then proceed to read through available options)</li> +</ul> + +<p>As you can see, the bad points listed above aren&#8217;t <em>that</em> bad. I see them more as minor potholes along the UX journey for your end-users. A good portion of hamburger menu examples in the wild work perfectly fine and should remain as they are. However, those outliers who abuse or misuse the hamburger concept should be introduced to <strong>sausage links</strong>.</p> + +<h2 id="sausage-links">Sausage Links</h2> + +<p>I should start by mentioning that this concept is far from <strong>new</strong>. There are a good number of websites that already implement this menu type in some form or another. The point of this post isn&#8217;t to blow your mind with some new-never-thought-of navigation design. I&#8217;m just trying to bring awareness to another available menu concept.</p> + +<p>Enough chit-chat, let&#8217;s take a look at sausage links in action:</p> + +<p><img src="/public/images/scrolling-navigation.png" alt="Scrolling menu with sausage links" /></p> + +<p><a href="https://codepen.io/bradleytaunt/pen/QXjjbE/">Live CodePen Example</a></p> + +<p>The above CodePen adds a good amount of visual design fluff, so let&#8217;s take a look at the bare minimum HTML &#38; CSS needed to accomplish this menu:</p> + +<pre><code>&#60;nav class="sausage-links"&#62; + &#60;ul&#62; + &#60;li&#62;&#60;a href=""&#62;Homepage&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Categories&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Filter Properties&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Edit Optional Tags&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Research Papers&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;li&#62;&#60;a href=""&#62;Contact Our Team&#60;&#47;a&#62;&#60;&#47;li&#62; + &#60;&#47;ul&#62; +&#60;&#47;nav&#62; + + + +&#47;* Sausage Links Nav Container *&#47; +.sausage-links { + position: relative; +} + +&#47;* The left and right "faded" pseudo elements *&#47; +.sausage-links:before, .sausage-links:after { + content: &#39;&#39;; + height: calc(100% - 2em); + pointer-events: none; + position: absolute; + top: 1em; + width: 10px; + z-index: 2; +} +.sausage-links:before { + background: linear-gradient(to right, rgba(255,255,255,0) 0%, white 100%); + right: 0; +} +.sausage-links:after { + background: linear-gradient(to left, rgba(255,255,255,0) 0%, white 100%); + left: 0; +} + +&#47;* Basic flexbox to prevent items from breaking lines *&#47; +.sausage-links ul { + display: flex; + flex-wrap: nowrap; + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +.sausage-links ul li { + white-space: nowrap; +} + +.sausage-links ul li a, .sausage-links ul li a:visited { + display: inline-block; +} +</code></pre> + +<p>Pretty simple, eh?</p> + +<p><strong>Update</strong>: Thanks to <a href="https://twitter.com/dany0w">@dany0w</a> for pointing out that I forgot to include <code>-webkit-overflow-scrolling: touch</code> for momentum scrolling on iOS.</p> + +<h3 id="the-good-1">The Good</h3> + +<ul> +<li>Extremely minimal amount of CSS required</li> +<li>Screen reader &#47; keyboard-only safe</li> +<li>Zero JavaScript needed</li> +<li>No need for hacky hidden <code>radio</code> inputs for toggling parent containers etc.</li> +<li>Users can see first few available options without any interaction</li> +</ul> + +<h3 id="the-bad-1">The Bad</h3> + +<ul> +<li>May not look the most visually appealing for certain project designs (ugly scrollbar in some instances)</li> +<li>Better suited for small to medium menu lists compared to massive sitemaps</li> +<li>Without proper fade &#47; cut off visual cues, users may not understand they can scroll</li> +</ul> + +<h2 id="so-should-i-use-hamburger-menus-or-sausage-links">So, should I use hamburger menus or sausage links?</h2> + +<p>That really depends on your project or overall mobile design (I know, such a helpful answer). I&#8217;m sure there are even a few use cases where it would make sense to have sausage links within a toggle-based hamburger menu. The menu possibilities could be endless!</p> + +<p>That&#8217;s it. I hope I&#8217;ve inspired you to try out sausage links in the near future or at least made you think more deeply about mobile navigation design!</p> + +<p>&#8230;is anyone else really hungry now?</p></description> + <link>https://btxx.org/hamburger-menu-alternative</link> + <guid isPermaLink="false">https://btxx.org/hamburger-menu-alternative</guid> + <pubDate>Fri, 14 Jun 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Goodbye CSS Preprocessors</title> + <description><h1 id="goodbye-css-preprocessors">Goodbye CSS Preprocessors</h1> + +<p>2017-09-07</p> + +<p>I have been using preprocessors across all my side projects since they first popped onto the scene. Sass, Stylus, LESS — you name the CSS preprocessor and I&#8217;ve most likely used it because CSS preprocessors are awesome.</p> + +<p>But that all changes moving forward. I&#8217;m going back to basics with CSS. Straight vanilla, man.</p> + +<p><img src="/public/images/sass-cancel_rl1fsw_c_scale,w_800.webp" alt="No Sass" /></p> + +<h2 id="why-and-who-cares">Why? And who cares?</h2> + +<p>Let&#8217;s start by breaking down the main positives about preprocessors:</p> + +<ul> +<li>Nested syntax</li> +<li>Definable variables</li> +<li>Advanced mathematical functions</li> +<li>Reusable mixins</li> +</ul> + +<p>All of these features are great and I completely understand the draw (I was also sucked into the hype) - but now let&#8217;s see the negatives.</p> + +<h2 id="1.-debugging-is-a-chore">1. Debugging is a chore</h2> + +<p>So you found some weird padding clobbering an element&#8217;s default styles on line 255 of your main complied CSS file? Excellent! Now you just need to figure out which file that property comes from.</p> + +<p>This might sound trivial or that you can fix this with rendered comments but if you ever work on a project with hundreds of Sass&#47;Stylus&#47;LESS files all importing and compiling into each other - it can get out of hand.</p> + +<p>Solution: Using plain CSS makes using browser dev tools a breeze. See a bug on line 255? No problem, let me fix line 255.</p> + +<h2 id="2.-dependencies-for-development">2. Dependencies for development</h2> + +<p>Building a project with a preprocessor brings with it unnecessary baggage; dependencies. You&#8217;ll need to be running some sort of task runner (see grunt or gulp) that will compile and minify your CSS. I see this as extra overhead both during the initial setup of the project for new team members and the testing environment.</p> + +<p>By using plain CSS, you avoid including an extra package in your package.json file (if applicable) or having to rely on third party compilers such as codekit (although I do recommend this app).</p> + +<h2 id="3.-variables-mixins-become-unwieldily">3. Variables &#38; mixins become unwieldily</h2> + +<p>Both variables and mixins are great in small doses, but if your project has any real size to it these helpers become a hinderance. By using comma-delimited CSS selectors you can achieve the same outcome without the horror of needing a specific preprocessor file to handle just variables and mixins.</p> + +<p>Basic example:</p> + +<pre><code>selector, selectTwo, .css-class { + &#47;* shared styling *&#47; +} +</code></pre> + +<h2 id="4.-welcome-to-nesting-hell">4. Welcome to nesting hell</h2> + +<p>Honestly, I&#8217;ve never been a fan of nesting. From a file structure perspective it is indeed very &#8220;clean&#8221;, but you sacrifice that cleanliness in the final compiled production code. You&#8217;re making your development environment easier to glance at and work through at the cost of your production-ready, customer facing code.</p> + +<p>You also run into another big no-no in my eyes: extreme selector specificity. The DOM target search starts to get out of control once you start having classes and selectors building up towards 10 or more steps.</p> + +<p>Bad:</p> + +<pre><code>body #home .container .modal nav .inner-nav &#62; ul &#62; li &#62; a { + color: red; +} +</code></pre> + +<p>Good:</p> + +<pre><code>.inner-nav a { + color: red; +} +</code></pre> + +<p>Don&#8217;t forget the amount of work needed to override styling with such deep selector specificity. That&#8217;s where you end up diving into the world of !important tags.</p> + +<h2 id="final-thoughts">Final thoughts</h2> + +<p>It should go without saying that this is just my personal preference, there is no law behind this. If you use and absolutely love preprocessors - more power to you. All I suggest is using plain old vanilla CSS for your next project and see how it works out.</p> + +<p>And do you know what I&#8217;ve learned to appreciate after switching back to vanilla? CSS is more beautiful when developed in it&#8217;s rawest form.</p></description> + <link>https://btxx.org/goodbye-css-preprocessors</link> + <guid isPermaLink="false">https://btxx.org/goodbye-css-preprocessors</guid> + <pubDate>Thu, 07 Sep 2017 00:00:00 +0000</pubDate> + </item> + <item> + <title>Applying Email-Based Git Patches in Evolution on Linux</title> + <description><h1 id="applying-email-based-git-patches-in-evolution-on-linux">Applying Email-Based Git Patches in Evolution on Linux</h1> + +<p>2023-04-25</p> + +<p>Users who work with git patches through email most likely use a terminal-based program such as <code>aerc</code> or <code>mutt</code>. CLI email clients tend to have built-in support for easily applying patches directly to their local repos. But what about people who prefer to use graphical email apps?</p> + +<p>Lucky for us, it is actually fairly simple to replicate a similar workflow to that of a CLI client. In this example I will be focusing on the Evolution email client, but the core principles should work in most other GUIs.</p> + +<h2 id="the-basics">The Basics</h2> + +<blockquote> +<p><strong>Note:</strong> The following assumes you already have <code>git</code> installed and setup on your existing system.</p> +</blockquote> + +<p>I find it best to first create a top-level folder on your system named <code>patches</code>. We will use this folder as a temporary location for reviewing any <code>git</code> patches submitted via email. I normally place this under <code>&#47;home&#47;&#60;username&#62;&#47;patches</code>.</p> + +<p>Next, locate the email patch in Evolution and right-click on it. Select &#8220;Save as mbox&#8230;&#8221; and place this file inside your newly created <code>patches</code> folder.</p> + +<p>Now simply open your terminal, navigate to your project and run:</p> + +<pre><code>git am &#60;path-to-patches-folder&#62;&#47;&#60;patch-filename&#62;.mbox +</code></pre> + +<p>This should apply the patch directly to your project without issue. You are now free to test these changes locally. If everything looks good, you&#8217;re able to instantly push these changes remotely.</p> + +<p>Done and done.</p> + +<p>Feel free to purge your <code>patches</code> folder regularly or keep them around for future reference if you prefer!</p></description> + <link>https://btxx.org/git-patches</link> + <guid isPermaLink="false">https://btxx.org/git-patches</guid> + <pubDate>Tue, 25 Apr 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Simplifying the Craigslist Gallery</title> + <description><h1 id="simplifying-the-craigslist-gallery">Simplifying the Craigslist Gallery</h1> + +<p>2022-10-03</p> + +<p><strong>This article was updated on October 11, 2022</strong></p> + +<p>I&#8217;m a big fan of <a href="https://craigslist.org">craigslist.org</a> and the overall UX used throughout their application. My own website is an ever-changing example of &#8220;brutalist&#8221; or minimalist design, so I&#8217;m always inspired by existing web apps out in the wild using the same principles.</p> + +<p>One nitpick I have with the current craigslist design is their approach to image galleries inside their listings. They use a chunk of bloated JavaScript (more than <code>380kB</code> total) to render something as simple as a collection of images. This seems like overkill to me.</p> + +<h2 id="simplifying-things">Simplifying Things</h2> + +<p>My first suggestion would be to remove JavaScript altogether. We can replicate most of the required features with just HTML &#38; CSS. Let&#8217;s start with our core HTML structure:</p> + +<h3 id="html">HTML</h3> + +<pre><code>&#60;div class="gallery-wrapper"&#62; + &#60;div class="full-size"&#62; + &#60;a name="p1"&#62;&#60;img src="https:&#47;&#47;picsum.photos&#47;id&#47;100&#47;400" alt="Picture 1" class="gallery-item"&#62;&#60;&#47;a&#62; + &#60;a name="p2"&#62;&#60;img src="https:&#47;&#47;picsum.photos&#47;id&#47;101&#47;400" alt="Picture 2" class="gallery-item"&#62;&#60;&#47;a&#62; + &#60;a name="p3"&#62;&#60;img src="https:&#47;&#47;picsum.photos&#47;id&#47;106&#47;400" alt="Picture 3" class="gallery-item"&#62;&#60;&#47;a&#62; + &#60;&#47;div&#62; + &#60;div class="thumbnails"&#62; + &#60;a href="#p1"&#62;&#60;img src="https:&#47;&#47;picsum.photos&#47;id&#47;100&#47;100" alt="Picture 1 Thumbnail" class="thumbnail-1"&#62;&#60;&#47;a&#62; + &#60;a href="#p2"&#62;&#60;img src="https:&#47;&#47;picsum.photos&#47;id&#47;101&#47;100" alt="Picture 2 Thumbnail" class="thumbnail-2"&#62;&#60;&#47;a&#62; + &#60;a href="#p3"&#62;&#60;img src="https:&#47;&#47;picsum.photos&#47;id&#47;106&#47;100" alt="Picture 3 Thumbnail" class="thumbnail-3"&#62;&#60;&#47;a&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<p>Here we are placing the full-size gallery images directly inside a single <code>div.full-size</code> as - you guessed it - <code>img</code> elements. This already helps us avoid the pitfall of building out spaghetti <code>div</code> containers.</p> + +<p>Below this parent container we have another element, <code>div.thumbnails</code>, which will be used for our separate, smaller thumbnail versions of our main images. The most important items to note are the associated <code>ahref</code> elements surrounding each <code>img</code> element. By setting the <code>id</code> parameter on our thumbnails to match that of the <code>name</code> on our full-sized images, we can &#8220;scroll&#8221; the proper image into view without the need for JavaScript.</p> + +<p>Now for the <em>fancy</em> stuff - the CSS!</p> + +<h3 id="css">CSS</h3> + +<pre><code>.gallery-wrapper { + position: relative; +} +.gallery-wrapper:before { + background: rgba(255,255,255,0.8); + content: "Scroll &#47; Swipe 🡢"; + display: block; + padding: 5px; + position: relative; +} + +.full-size { + display: flex; + scroll-snap-type: x mandatory; + margin-bottom: 10px; + max-width: 400px; + overflow-x: scroll; +} +.full-size .gallery-item { + scroll-snap-align: start; +} + +.thumbnails img { + cursor: pointer; + margin-right: 10px; +} +</code></pre> + +<p>Okay, so it isn&#8217;t <em>that</em> fancy. It&#8217;s actually very basic, which is exactly what we were going for. The images are &#8220;stacked&#8221; inline thanks to the parent container being set to <code>display: flex</code>, even though it has a set width of <code>600px</code>. The included <code>scroll-snap-type: x mandatory</code> tells the browser to allow users to scroll&#47;swipe horizontally through the parent container.</p> + +<p>The last important piece of this CSS is the <code>scroll-snap-align: start</code> added to the individual image elements. This parameter <em>snaps</em> the next image into the starting position of the parent container on scroll, giving a behavior users have come to expect from media galleries.</p> + +<p>You will also see the included <code>:before</code> pseudo element attached to the main <code>.gallery-wrapper</code> element. This isn&#8217;t <em>required</em> but it certainly helps from a UX standpoint.</p> + +<h2 id="live-demo">Live Demo</h2> + +<p>Check out the embedded CodePen below to see it in action. More functionality could always be built on top of this, such as rendering all images dynamically on &#8220;build&#8221;, but for a starting point I think it&#8217;s great.</p> + +<p><a href="https://codepen.io/bradleytaunt/pen/ExLRyXz">Live CodePen Example</a></p></description> + <link>https://btxx.org/gallery</link> + <guid isPermaLink="false">https://btxx.org/gallery</guid> + <pubDate>Mon, 03 Oct 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Chrome OS Could Become the Future Leader of Computing</title> + <description><h1 id="chrome-os-could-become-the-future-leader-of-computing">Chrome OS Could Become the Future Leader of Computing</h1> + +<p>2022-01-06</p> + +<p><strong>FOSS Enthusiasts</strong>: This article discusses the use of proprietary software and places it in a <em>positive</em> light. You have been warned. No angry emails please&#8230;</p> + +<hr/> + +<p>Google has created one of the best operating systems designed with the everyday user1 in mind: <a href="https://www.google.com/chromebook/chrome-os/">Chrome OS</a>. It is undeniably simple, reliable, easy to setup, and ships with several years of support before any form of EOL kicks in. New models have built-in support for the Google Play Store and Android applications, which is helpful for application development and debugging.</p> + +<p>In addition, Chrome OS devices allow you to run Linux in a separate container alongside the main OS (on supported devices). You can&#8217;t complain about that!</p> + +<p>Let&#8217;s take a quick look at other positive features worth mentioning:</p> + +<ul> +<li>Verified boot</li> +<li>Sandboxed environment (similar to how Chrome tabs work)</li> +<li>Automatic updates[^2]</li> +<li><em>Incredible</em> battery life (were talking 10+ hours with heavy usage)</li> +</ul> + +<h2 id="my-personal-experience">My Personal Experience</h2> + +<p>A handful of months ago I snagged the Lenovo Chromebook Duet when it was on sale for my wife. Since she does all her work directly through an Android phone, I thought of this as a nice companion device. And indeed it was&#47;is.</p> + +<p>In that time, I played around with the tablet myself to have a better grasp of the ecosystem and it&#8217;s obvious limitations. But a funny thing happened. I found that those &#8220;limitations&#8221; slowly started to disappear the longer I worked with the device.</p> + +<p>I decided to get my own Chrome OS device and snagged the <a href="https://www.lenovo.com/ca/en/laptops/lenovo/student-chromebooks/Lenovo-10e-Chromebook-Tablet/p/82AM000EUS">Lenovo 10e Chromebook Tablet</a> (on sale).</p> + +<ul> +<li>10.1&#8221; display (1920 x 1200) &#47; 400 nits</li> +<li>4GB of RAM</li> +<li>32GB of eMMC storage</li> +<li>Processor: MediaTek MT8183 Processor (2.00 GHz, 4 Cores, 1 MB Cache)</li> +</ul> + +<p>Now, I know that your initial reaction is likely: &#8220;Wow, those specs are pretty barebones!&#8221; and you would be correct. But it&#8217;s all you need for this ecosystem to work. As cringe-inducing as it may sound, everything you plan to do on these devices should happen <em>in the cloud</em>. (Let&#8217;s take a moment to avoid vomiting in our collective mouths)</p> + +<p>Instead of using a few marketing buzz words, let me breakdown how I personally tailor Chrome OS to my needs as a designer &#47; developer:</p> + +<ol> +<li><a href="#daily-tasks">Daily Tasks</a></li> +<li><a href="#programming">Programming</a></li> +<li><a href="#design">Design</a></li> +<li><a href="#gaming">Gaming</a></li> +</ol> + +<h2 id="daily-tasks">Daily Tasks</h2> + +<p>I feel like going into <em>great</em> detail explaining how to do basic, daily computing tasks is a little overkill here. Spreadsheets, word documents, Zoom meetings, and streaming media work as expected. You have the ability to use Google&#8217;s own web apps for these things or reach for other vendors such as Microsoft and Libre Office. Not being &#8220;locked in&#8221; to Google software is nice and I appreciate the Chrome OS team being flexible.</p> + +<h2 id="programming">Programming</h2> + +<p>This one is a mixed bag and your own mileage may vary depending on your specific requirements. Personally, I use Github for almost all my main development work. Because of this, I utilize <a href="https://github.com/features/codespaces">Codespaces</a>. For those unfamiliar with the service, you are running your Github repo in VSCode through the browser. It&#8217;s pretty impressive.</p> + +<p>If you happen to be a user who uses GitLab or BitBucket to store your project files, <a href="https://www.gitpod.io/">Gitpod</a> is a similar product to Codespaces (which I&#8217;ve used on occasion). This works if your prefer.</p> + +<p>Others may not like this programming setup but for me it works great. If running code remotely isn&#8217;t your jam, you could always take a look at running <a href="https://vscodium.com/">VSCodium</a> locally via Linux.</p> + +<h2 id="design">Design</h2> + +<p>There is flexibility yet again in this category. Personally, I tend to use Figma almost exclusively as my main design tool. The best thing about Figma? It runs directly in the browser. A perfect fit for Chromebooks[^3].</p> + +<p>I do open Gimp periodically for photo-specific work. It runs in its own Linux container and chugs along smoothly, even with 4GB of available memory. If all else fails, one could use <a href="https://www.photopea.com/">Photopea</a> to keep everything working through the browser (if Linux isn&#8217;t your cup of tea).</p> + +<p>Those of you in love with MacOS specific apps like Sketch - I can&#8217;t help you. You&#8217;re stuck with Apple&#8217;s ecosystem. (Not that there is anything wrong with Sketch!)</p> + +<h2 id="gaming">Gaming</h2> + +<p>There are other options (that we will get into) but the main gaming champion here is <strong>Stadia</strong>[^4]. As long as your internet speeds are over 10mbps, mind you. I use garbage satellite internet (counting down the days for Starlink to become available here&#8230;) with an average speed of 18-20mbps and Stadia runs like a dream. Even <em>wirelessly</em>. Now pair this with the portability of a Chromebook device and you&#8217;ve got yourself a beefier Nintendo Switch.</p> + +<p>You have solid secondary options like <a href="https://play.geforcenow.com/mall/#/layout/games">GeForce Now</a> and <a href="https://www.xbox.com/en-CA/xbox-game-pass/cloud-gaming">Microsoft&#8217;s xCloud (beta)</a> for an even larger catalogue of games. Not to mention the ability to play a lot of Android games natively on Chromebooks that support Play Store applications.</p> + +<h2 id="eye-rolling-scoffing">Eye Rolling &#38; Scoffing</h2> + +<p>I can hear the screeching across the interwebs: &#8220;<em>Wait - this is Google! They are literally Satan in disguise! No one can use products from that evil mega corporation!</em>&#8221;. And while I agree with the sentiment, I think going down this pure, 100% elitist approach to software <em>doesn&#8217;t work</em> with the everyday casual user. Not to mention the large swath of developers&#47;designers screaming &#8220;Google is bad!&#8221; while working off an <em>Apple</em> device&#8230;</p> + +<p>Hell even I, a vocal advocate for open source software and privacy, can see the great benefits to using Chrome OS as a daily driver. </p> + +<p>Testing out Chrome OS with your non-technical friends and family could help reduce a lot of headaches found in more &#8220;popular&#8221; systems. That doesn&#8217;t mean advanced users have to switch over. Use what works the best for you. For my immediate family members and social circles, I have nothing but positive things to say about Chrome OS.</p> + +<p>I have no crystal ball to see what the future of Chrome OS holds but it looks pretty promising to me.</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>&#8220;Users&#8221; referring to those mainly using their devices for word documents, spread sheets, media consumption, programming, messaging, minor interactivity (no heavy video or production editing)</li> +<li>These updates go unnoticed, compared to that of MacOS or Windows&#8230;</li> +<li>Your mileage may vary depending on how much RAM you have on your device</li> +<li>Although, Stadia&#8217;s current game selection leaves a lot to be desired</li> +</ol></description> + <link>https://btxx.org/future-os-google</link> + <guid isPermaLink="false">https://btxx.org/future-os-google</guid> + <pubDate>Thu, 06 Jan 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Prescription Form UI Improvements</title> + <description><h1 id="prescription-form-ui-improvements">Prescription Form UI Improvements</h1> + +<p>2019-03-13</p> + +<p>I was browsing the Clearly website a few days ago and ended up using their prescription form to update my worsening eyesight. The design of this form wasn&#8217;t <em>bad</em> per se, but it could certainly be improved.</p> + +<h2 id="current-design-of-the-prescription-view">Current design of the prescription view</h2> + +<p><img src="/public/images/prescription-ui.webp" alt="Default prescription UI" /></p> + +<p>As I stated, this design isn&#8217;t horrible by any means, but right away we can notice some problems:</p> + +<ul> +<li>the layout causes the users&#8217; eyes to jump between left-to-right and top-to-bottom without good correlation</li> +<li>title content and <code>next</code> buttons are centered, while dropdowns are presented as left-to-right</li> +<li>anchor link coloring is inconsistent</li> +<li>too much whitespace between interactive sections</li> +<li>dropdown height overly large</li> +</ul> + +<h2 id="starting-to-make-some-changes">Starting to make some changes</h2> + +<p>Let&#8217;s tackle these problems one at a time. First, we want a more defined page layout so the user can scan through the content more easily (left-to-right, down to the next line, then repeat).</p> + +<p><img src="/public/images/prescription-ui-update-1.webp" alt="Layout wireframe UI" /></p> + +<p>We have now left-aligned the title content to be flush with the OD&#47;OS elements below it to help keep the reading flow consistent. </p> + +<p>The previous layout also had the <code>PD</code> in-line with the OD&#47;OS element rows which created a problem of resetting the user thought-process. Since it requires the user to jump from the &#8220;right eye&#8221; option to the &#8220;PD&#8221; option, then back to &#8220;left eye&#8221; option it breaks the flow of user &#8220;tasks&#8221;. The new UI shifts the <code>PD</code> down into it&#8217;s own row, grouping the unrelated tasks on the page separately.</p> + +<blockquote> +<p>You&#8217;ll also notice that I&#8217;ve updated the dropdowns to use a monospace font to convey that these options are number inputs.</p> +</blockquote> + +<p>Finally we place the button actions in-line with the <code>PD</code> block since it previously ate up far more real estate than was necessary.</p> + +<h2 id="adding-some-color">Adding some color</h2> + +<p>The original design has some inconsistencies with the link coloring - some being a muted grey while others use the accented blue. Updating all interactive links to use Clearly&#8217;s default blue accent color would make for a better disconnect from non-interactive elements.</p> + +<p><img src="/public/images/prescription-ui-update-2.webp" alt="Layout UI with color" /></p> + +<h2 id="finishing-touches">Finishing touches</h2> + +<p>Now that the most important aspects of the refreshed UI are complete (layout, UX flow), we can implement all the visual extras to cleanup our basic wireframe.</p> + +<ul> +<li>make default select styling include depth and importance (this is the main action of the page afterall)</li> +<li>round out harsh corner edges on elements</li> +<li>set labels and row items with more pleasing backgrounds (while still maintaining contrast)</li> +<li>give the <code>next</code> button visual importance (make it look like a real button)</li> +</ul> + +<p><img src="/public/images/prescription-ui-update-final.webp" alt="Layout UI with color" /></p> + +<p>That&#8217;s it!</p></description> + <link>https://btxx.org/form-ui-improvements</link> + <guid isPermaLink="false">https://btxx.org/form-ui-improvements</guid> + <pubDate>Wed, 13 Mar 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Adaptable Flexbox Grid</title> + <description><h1 id="adaptable-flexbox-grid">Adaptable Flexbox Grid</h1> + +<p>2018-11-22</p> + +<p>You can use <code>flexbox</code> for many tricky layout &#8220;hacks&#8221; and implementing a grid layout is no different.</p> + +<p>Check out the CodePen below to see how you can implement a flexbox grid system that adapts automatically based on how many items you insert per row (maximum 6 children in this example).</p> + +<p><a href="https://codepen.io/bradleytaunt/pen/rQdLxv/">Live CodePen Example</a></p></description> + <link>https://btxx.org/flexbox-grid</link> + <guid isPermaLink="false">https://btxx.org/flexbox-grid</guid> + <pubDate>Thu, 22 Nov 2018 00:00:00 +0000</pubDate> + </item> + <item> + <title>Pure CSS Bar Graphs with Graceful Mobile Fallbacks</title> + <description><h1 id="pure-css-bar-graphs-with-graceful-mobile-fallbacks">Pure CSS Bar Graphs with Graceful Mobile Fallbacks</h1> + +<p>2020-12-08</p> + +<p>I recently published a new open source project, Flexbox Bar Graphs, and wanted to share a simple breakdown of how it was built. It isn&#8217;t anything mind-blowing, but I like the idea of placing bar graphs in a web page with <em>zero</em> Javascript.</p> + +<p>So in the end, this is what our bar graphs will look like on desktop:</p> + +<p>And this is how it will look on smaller devices:</p> + +<p>Let&#8217;s get into the details!</p> + +<h2 id="the-html">The HTML</h2> + +<p>The main &#8220;secret&#8221; of this project is that our graphs are constructed out of HTML <em>tables</em>. Now before you freak out - this is perfectly fine and works in our favor quite well.</p> + +<ol> +<li>If the user has JS disabled &#8211;&#62; they will still see our graphs</li> +<li>If the user has CSS disabled &#8211;&#62; they will see a standard data table set</li> +</ol> + +<p>All bases are covered!</p> + +<pre><code>&#60;!-- Using a basic table with our custom data-id --&#62; +&#60;table data-id="flexbox-bar-graph"&#62; + &#60;caption&#62;Web Performance Results&#60;&#47;caption&#62; + &#60;thead&#62; + &#60;tr&#62; + &#60;th&#62;Test Performed&#60;&#47;th&#62; + &#60;th&#62;Before&#60;&#47;th&#62; + &#60;th&#62;After&#60;&#47;th&#62; + &#60;th&#62;Difference&#60;&#47;th&#62; + &#60;&#47;tr&#62; + &#60;&#47;thead&#62; + &#60;tbody&#62; + &#60;tr&#62; + &#60;th&#62;Initial Load Time&#60;&#47;th&#62; + &#60;td&#62; + &#60;!-- + WTF are these CSS variables? + See the CSS section below + --&#62; + &#60;span style="--data-set:4.7&#47;5;"&#62;&#60;&#47;span&#62; + &#60;p&#62;4.7&#60;&#47;p&#62; + &#60;&#47;td&#62; + &#60;td&#62; + &#60;span style="--data-set:2.7&#47;5;"&#62;&#60;&#47;span&#62; + &#60;p&#62;2.7&#60;&#47;p&#62; + &#60;&#47;td&#62; + &#60;td&#62; + &#60;span style="--data-set:2&#47;5;"&#62;&#60;&#47;span&#62; + &#60;p&#62;2&#60;&#47;p&#62; + &#60;&#47;td&#62; + &#60;&#47;tr&#62; + &#60;&#47;tbody&#62; +&#60;&#47;table&#62; +</code></pre> + +<p>Nothing crazy is happening here - just your standard HTML table structure. The one main thing to notice is the <code>--data-set</code> CSS variable placed inline on each data point. This will be important for our CSS to configure the individual bar graphs properly.</p> + +<h2 id="the-css">The CSS</h2> + +<p>This might look overwhelming if I just dumped the whole CSS file in one big code block, so instead I&#8217;m going to break them down into two parts:</p> + +<ol> +<li>Baseline styling (mobile)</li> +<li>Desktop styling</li> +</ol> + +<h3 id="baseline">Baseline</h3> + +<p>Here we target just our table elements with the <code>data-id</code> of <code>flexbox-bar-graph</code>. This allows us to avoid worrying about adding classes or IDs and also avoids conflicts with other non-graph styled tables in our projects.</p> + +<p>The base <code>:root</code> element holds all of our bar graph colors. Change these as you see fit!</p> + +<pre><code>&#47;* Bar Graph color variables *&#47; +:root { + --bar-color-1: #357EC7; + --bar-color-2: #E42217; + --bar-color-3: #4CC417; + --bar-color-4: #7D0541; + --bar-color-5: #FFD801; +} + +[data-id="flexbox-bar-graph"] { + border-collapse: collapse; + margin: 4rem 0 6rem; + width: 100%; +} +[data-id="flexbox-bar-graph"] caption { + text-align: left; +} +[data-id="flexbox-bar-graph"] thead th { + text-align: right; +} +[data-id="flexbox-bar-graph"] thead th:nth-child(1), +[data-id="flexbox-bar-graph"] tbody th { + text-align: left; +} +[data-id="flexbox-bar-graph"] tbody th { + font-weight: normal; + font-style: italic; +} +[data-id="flexbox-bar-graph"] tbody td { + text-align: right; +} +[data-id="flexbox-bar-graph"] tbody td p { + margin: 0; +} +</code></pre> + +<h3 id="desktop">Desktop</h3> + +<p>Now we set your &#8220;visual&#8221; bar graphs to show at a set width (in this example it is 1000px and above). That way the &#8220;default&#8221; styling can target the mobile device screen sizes.</p> + +<ul> +<li><p>The <code>thead tr th:nth-child(x):before</code> elements create the square &#8220;legends&#8221; beside each individual data point heading</p></li> +<li><p>The <code>tbody tr td:nth-of-type(x) span</code> elements are the bars themselves</p> + +<p>@media(min-width: 1000px) { + [data-id="flexbox-bar-graph&#8221;] { + background: transparent; + display: block; + min-height: 400px; + padding: 0; + position: relative; + width: 100%; + }</p> + +<pre><code>[data-id="flexbox-bar-graph"] caption { + display: block; + font-size: 2rem; + text-align: center; + width: 100%; +} + +[data-id="flexbox-bar-graph"] thead { + display: block; + margin: 2rem 0 3rem; + width: 100%; +} +[data-id="flexbox-bar-graph"] thead tr { + border-bottom: 1px solid lightgrey; + display: flex; + justify-content: center; + padding-bottom: 1rem; +} + +[data-id="flexbox-bar-graph"] thead tr th { + display: inline-block; + margin: 0; + padding: 0; + position: relative; + text-align: right; +} +[data-id="flexbox-bar-graph"] thead tr th:before { + content:&#39;&#39;; + display: inline-block; + height: 10px; + margin: 0 0.5rem 0 2rem; + position: relative; + width: 10px; +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(1), +[data-id="flexbox-bar-graph"] thead tr th:nth-child(1):before { + display: none; +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(2):before { + background: var(--bar-color-1); +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(3):before { + background: var(--bar-color-2); +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(4):before { + background: var(--bar-color-3); +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(5):before { + background: var(--bar-color-4); +} +[data-id="flexbox-bar-graph"] thead tr th:nth-child(6):before { + background: var(--bar-color-5); +} + +[data-id="flexbox-bar-graph"] tbody { + display: flex; + justify-content: space-between; + min-height: 300px; + width: 100%; +} + +[data-id="flexbox-bar-graph"] tbody tr { + display: flex; + flex-direction: column-reverse; + flex-wrap: wrap; + justify-content: flex-end; + padding: 0 50px; + position: relative; + width: 100%; +} +[data-id="flexbox-bar-graph"] tbody tr th { + font-size: 90%; + position: absolute; + text-align: center; + top: 100%; + width: calc(100% - 100px); +} +[data-id="flexbox-bar-graph"] tbody tr td { + align-items: center; + display: flex; + flex-direction: column; + height: 95%; + justify-content: flex-end; +} + +[data-id="flexbox-bar-graph"] tbody tr td span { + display: block; + height: calc(var(--data-set) * 100%); + width: 20px; +} +[data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(1) span { + background: var(--bar-color-1); +} +[data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(2) span { + background: var(--bar-color-2); +} +[data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(3) span { + background: var(--bar-color-3); +} +[data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(4) span { + background: var(--bar-color-4); +} +[data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(5) span { + background: var(--bar-color-5); +} + +[data-id="flexbox-bar-graph"] tbody tr td p { + font-size: 90%; + margin: 0; + text-align: center; +} +</code></pre> + +<p>}</p></li> +</ul> + +<h2 id="bonus-styling">Bonus Styling</h2> + +<p>In the Flexbox Bar Graph repo, I&#8217;ve also included the ability to display these bar graphs horizontally, like so:</p> + +<p>The change in CSS is actually quite simple to pull this off - you just need to include the <code>data-layout</code> attribute on the table itself.</p> + +<pre><code>[data-layout="horizontal"] tbody { + min-height: auto; +} + +[data-layout="horizontal"] tbody tr { + flex-direction: column; + padding: 0 40px; +} +[data-layout="horizontal"] tbody tr th { + width: calc(100% - 80px); +} + +[data-layout="horizontal"] tbody tr th { + text-align: left; + top: calc(100% + 20px); +} + +[data-layout="horizontal"] tbody tr td { + flex-direction: row; + height: auto; + justify-content: start; + margin: 10px 0; +} + +[data-layout="horizontal"] tbody tr td span { + height: 20px; + width: calc(var(--data-set) * 100%); +} + +[data-layout="horizontal"] tbody tr td p { + margin-left: 10px; +} +</code></pre> + +<h2 id="thats-all-folks">That&#8217;s All Folks!</h2> + +<p>That just about sums things up. Feel free to check out the Github repo itself, open any issues you find or fork it for your own!</p> + +<ul> +<li>Github: <a href="https://github.com/bradleytaunt/flexbox-bar-graphs">https:&#47;&#47;github.com&#47;bradleytaunt&#47;flexbox-bar-graphs</a></li> +<li>Live Demo: <a href="https://flexbox-bar-graphs.netlify.app/">https:&#47;&#47;flexbox-bar-graphs.netlify.app&#47;</a></li> +</ul></description> + <link>https://btxx.org/flexbox-bar-graphs</link> + <guid isPermaLink="false">https://btxx.org/flexbox-bar-graphs</guid> + <pubDate>Tue, 08 Dec 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>First Letter Pseudo Element</title> + <description><h1 id="first-letter-pseudo-element">First Letter Pseudo Element</h1> + +<p>2019-05-03</p> + +<p>In today&#8217;s TypeTip we will be taking a look at the often overlooked <code>:first-letter</code> CSS pseudo element. Though you might only use this for specific article-format web pages, it&#8217;s still a nice-to-have in your web dev toolset.</p> + +<h2 id="the-html">The HTML</h2> + +<p>Like most pseudo elements, nothing has to change with your pre-existing HTML structure:</p> + +<pre><code>&#60;article&#62; + &#60;p&#62;It was a bright cold day in April, and the clocks were striking thirteen.&#60;&#47;p&#62; +&#60;&#47;article&#62; +</code></pre> + +<h2 id="the-css">The CSS</h2> + +<p>Here&#8217;s where the magic happens:</p> + +<pre><code>p:first-letter { + color: orangered; + font-size: 250%; +} +</code></pre> + +<h2 id="live-codepen">Live CodePen</h2> + +<p><a href="https://codepen.io/bradleytaunt/pen/gJYbev/">Live CodePen Example</a></p></description> + <link>https://btxx.org/first-letter</link> + <guid isPermaLink="false">https://btxx.org/first-letter</guid> + <pubDate>Fri, 03 May 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>February 2022 Update</title> + <description><h1 id="february-2022-update">February 2022 Update</h1> + +<p>2022-02-23</p> + +<p>It&#8217;s been a little quiet around here lately and for good reason: my wife gave birth to our third child last Thursday. Her name is Harmony and she was born in the late afternoon weighing in at 7 pounds 8 ounces.</p> + +<p>Besides the lack of sleep, everything has been going very well and our boys are happy to finally have their sister “out” in the real world. She caught a small cold at the beginning but soldiered through it well.</p> + +<p>As for personal life &#47; work life, I&#8217;ve taken a couple weeks off until Harmony is in a bit more of a routine to make transitioning back to full time easier. I still have a few articles in the works (like setting up a T60 Thinkpad with Linux Mint and using FreeBSD for the first time on an EOL Chromebook) but those will come in time.</p> + +<p>I guess I should get back to being a proper dad (I&#8217;m writing this on my phone as she sleeps on me and the boys are napping) but I&#8217;ll be back here posting stupid things in no time.</p> + +<p>See you on the other side!</p></description> + <link>https://btxx.org/february-updates</link> + <guid isPermaLink="false">https://btxx.org/february-updates</guid> + <pubDate>Wed, 23 Feb 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Setting Up Fathom Analytics with Netlify</title> + <description><h1 id="setting-up-fathom-analytics-with-netlify">Setting Up Fathom Analytics with Netlify</h1> + +<p>2021-01-19</p> + +<p>It&#8217;s no secret that I&#8217;m passionate about open source software, but I&#8217;m also extremely adamant about protecting the privacy of all users across the web. So when I decided to implement analytics on my own personal website, I ended up choosing Fathom (<em>get a $10 credit using that link!</em>).</p> + +<p>You should research further into the company yourself if you&#8217;re interested, but in a nutshell the Fathom platform provides:</p> + +<ul> +<li>GDPR, ePrivacy, PECR and CCPA compliance</li> +<li>ad-blocker bypasses (in a good way -&#62; zero impact on users)</li> +<li>anonymous visitor stats</li> +<li>software created by indie developers</li> +</ul> + +<p>Although this might sound like a &#8220;paid&#8221; blog post, I can assure you this is completely based on my own opinions and experience with the service. I&#8217;m just very pleased with the product :)</p> + +<p>Enough chit-chat - let&#8217;s breakdown how to setup Fathom on your own site hosted through Netlify!</p> + +<h2 id="step-0-assumptions">Step 0: Assumptions</h2> + +<p>I&#8217;m going into this tutorial with the assumption that you:</p> + +<ol> +<li>Have an active Fathom account (or are at least trying the 7-day free trial)</li> +<li>Have a website already setup on Netlify (custom domain optional)</li> +</ol> + +<p>And that&#8217;s all you need.</p> + +<h2 id="step-1-adding-a-custom-domain-dns-setup">Step 1: Adding a Custom Domain (DNS Setup)</h2> + +<p>Even though you have the option to use the <code>default</code> tracking script URL, I would highly recommend setting it up through your own domain. This helps avoid any browser extensions or firewalls that might block outside URL request made by individual sites.</p> + +<ol> +<li>Navigate to the Fathom <strong>Settings</strong> page in the bottom footer (must be logged in)</li> +<li>Select <strong>Domains</strong> from the sidebar</li> +<li>Enter your custom domain in the <code>Add a new custom domain</code> input</li> +<li>Select <strong>Start Process</strong></li> +<li>Keep note of both the <code>CNAME</code> and <code>VALUE</code> (we will copy this in a moment)</li> +</ol> + +<p>Open a new tab, and login to your Netlify account:</p> + +<ol> +<li>From your <code>Team Overview</code> page, navigate to the top-level <code>Domains</code> page</li> +<li>Select the domain you plan to add Fathom to</li> +<li>Under <strong>DNS settings</strong> &#62; <strong>DNS records</strong> select <code>Add New Record</code></li> +<li>Select <code>CNAME</code> from the dropdown of available options</li> +<li>Paste the Fathom <code>CNAME</code> (from the steps above) into the <strong>Name</strong> input</li> +<li>Paste the Fathom <code>VALUE</code> (from the steps above) into the <strong>Value</strong> input</li> +<li>Click <strong>Save</strong></li> +</ol> + +<p>That&#8217;s it for DNS setup!</p> + +<h2 id="step-2-adding-fathom-your-website">Step 2: Adding Fathom Your Website</h2> + +<p>Now that we will be using our own custom domain for the script, it&#8217;s time to actually <em>add it</em> to our website. From the same Fathom <strong>Settings</strong> page as before:</p> + +<ol> +<li>Navigate to the <strong>Sites</strong> page in the sidebar</li> +<li>Enter your custom domain in the <code>Add a new site</code> input and click <strong>Get site code</strong></li> +<li>In the modal prompt, select your custom domain from the dropdown list (you&#8217;ll see the script code change accordingly)</li> +<li>Copy the tracking code snippet and add it to all the pages you plan to track on your site</li> +<li>When ready, select <strong>Verify site code</strong></li> +<li>If everything went correctly you should be done!</li> +</ol> + +<h2 id="step-3-watch-those-live-stats">Step 3: Watch Those Live Stats!</h2> + +<p>Open a cold beer (or a bubbly soda if you prefer) and watch your website visitor stats come rolling in on the dashboard! Not only do you now have solid analytics on your website but you have the piece of mind that your users&#8217; privacy isn&#8217;t being invaded. Everybody wins!</p></description> + <link>https://btxx.org/fathom-analytics-netlify</link> + <guid isPermaLink="false">https://btxx.org/fathom-analytics-netlify</guid> + <pubDate>Tue, 19 Jan 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Faking 3D Elements with CSS</title> + <description><h1 id="faking-3d-elements-with-css">Faking 3D Elements with CSS</h1> + +<p>2020-04-29</p> + +<p>Although not always practical, creating the illusion that some of your web elements are 3D can be a fun experiment. I set out to see if I was able to create such an illusion with only 2 HTML elements and as little CSS as possible.</p> + +<p>This is what I ended up creating:</p> + +<p><img src="/public/images/css-orb.png" alt="Blue 3D orb made out pure CSS" /></p> + +<p><a href="https://codepen.io/bradleytaunt/pen/VwvzKyb">Live CodePen Example</a></p> + +<h2 id="the-html">The HTML</h2> + +<p>Prepare for your mind to be blown:</p> + +<pre><code>&#60;div class="main-orb"&#62; + &#60;div class="inner-orb"&#62;&#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<p>That&#8217;s it - I wasn&#8217;t kidding when I said we would use only 2 HTML elements. The <code>.main-orb</code> is the core shape (set to 400x400) and the <code>.inner-orb</code> is placed on top of it&#8217;s parent at a slightly smaller size (360x360) - but more on that below in the CSS portion.</p> + +<h2 id="the-css">The CSS</h2> + +<p>First we give the bigger orb element (<code>.main-orb</code>) the default styling needed to represent a 2D circle:</p> + +<pre><code>.main-orb { + background: linear-gradient(#fff 0%, #eee 10%, #2E86FB 50%, #1A237E 100%); + border-radius: 9999px; + height: 400px; + margin: 4rem auto; + position: relative; &#47;* This is important for the inner orb element later *&#47; + width: 400px; +} +</code></pre> + +<p>Next, we include both <code>:before</code> and <code>:after</code> pseudo elements for our orb&#8217;s drop shadow. You <em>could</em> do this with a simple <code>box-shadow</code> property on the <code>.main-orb</code> itself, but I&#8217;ve explained in a previous post why <a href="/blog/better-box-shadows.html">that&#8217;s not the best approach</a>.</p> + +<pre><code>&#47;* Shared styling for both pseudo elements - Remember DRY *&#47; +.main-orb:before, .main-orb:after { + border-radius: 200px 200px 9999px 9999px; + bottom: -10px; + content:&#39;&#39;; + filter: blur(20px); + height: 40px; + position: absolute; + z-index: -1; +} + +&#47;* Bigger, lighter shadow *&#47; +.main-orb:before { + background: rgba(0,0,0,0.4); + left: 7.5%; + width: 85%; +} + +&#47;* Smaller, darker shadow *&#47; +.main-orb:after { + background: rgba(0,0,0,0.7); + left: 20%; + width: 60%; +} +</code></pre> + +<p>With our main orb complete we can move on to the <code>.inner-orb</code> element to help bring slightly more depth to our floating ball of CSS:</p> + +<pre><code>.inner-orb { + background: linear-gradient(#fff 0%, #2E86FB 60%, #283593 100%); + border-radius: 9999px; + box-shadow: 0 8px 20px rgba(0,0,0,0.5); + height: 360px; + filter: blur(18px); + left: 20px; + position: absolute; + top: 15px; + width: 360px; +} +</code></pre> + +<h2 id="poor-mans-3d-elements">Poor-man&#8217;s 3D elements</h2> + +<p>Clearly implementing something like this will never come close to generating true 3D renders on a website, but it is a fun exercise to see how much further we can push simple CSS. Feel free to fork the above CodePen to play around with different colors and shadow placements.</p></description> + <link>https://btxx.org/fake-3d-elements-with-css</link> + <guid isPermaLink="false">https://btxx.org/fake-3d-elements-with-css</guid> + <pubDate>Wed, 29 Apr 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>ET-Jekyll Theme</title> + <description><h1 id="et-jekyll-theme">ET-Jekyll Theme</h1> + +<p>2018-01-14</p> + +<p>ET-Jekyll theme is based off of Dave Liepmann&#8217;s awesome Tufte CSS - which takes it&#8217;s style and inspiration from the wonderful book and handout designs of Edward Tufte.</p> + +<p>The differences are subtle when comparing my variation to Tufte CSS, but these changes were made out of personal preference and are not in any way &#8220;better&#8221;. If you prefer the original CSS styling - please use it!</p> + +<p>This theme is an open source side project by Bradley Taunt - made with passion and care. Edit, improve, customize or butcher this theme as much as you&#8217;d like. If you spot an issue or find a better solution for any user pain-spots, please don&#8217;t hesitate to open a PR with your changes.</p> + +<p>Enjoy ET-Jekyll!</p></description> + <link>https://btxx.org/et-jekyll-theme</link> + <guid isPermaLink="false">https://btxx.org/et-jekyll-theme</guid> + <pubDate>Sun, 14 Jan 2018 00:00:00 +0000</pubDate> + </item> + <item> + <title>Styling Empty Table Cells</title> + <description><h1 id="styling-empty-table-cells">Styling Empty Table Cells</h1> + +<p>2019-07-17</p> + +<p>Often when designing tables on the web you&#8217;re bound to come across empty pockets of data. These will be rendered as &#8220;blank&#8221; table cells, which isn&#8217;t always the intended outcome. Let&#8217;s take a quick look at how to target and style empty table cells.</p> + +<h2 id="the-easy-way">The easy <code>:empty</code> way</h2> + +<p>The most popular way to target <em>any</em> empty element is by using - you guessed it - the <code>empty</code> pseudo-class. This pseudo-class is incredibly simple. You target an element&#8217;s <code>empty</code> state that same way you would target <code>hover</code> or <code>active</code>:</p> + +<pre><code>table tr td:empty { + opacity: 0; +} +</code></pre> + +<p>Check out the CodePen examples below for more advanced styling options:</p> + +<p><a href="https://codepen.io/bradleytaunt/pen/EBBLEx/">Live CodePen Example 1</a></p> + +<p>You can also include additional pseudo elements to give the user more context about what the empty cells represent:</p> + +<p><a href="https://codepen.io/bradleytaunt/pen/bPXqLa/">Live CodePen Example 2</a></p> + +<h2 id="more-specific-property">More specific <code>empty-cells</code> property</h2> + +<p>Although using the <code>:empty</code> pseudo-class can be helpful, it isn&#8217;t used just for tables. It can be used for any HTML elements that have a lack of content. So, is there a CSS specific property that can target <em>just</em> table cells? </p> + +<p>Let&#8217;s take a look at the <code>empty-cells</code> property:</p> + +<pre><code>table { + empty-cells: hide; +} +</code></pre> + +<p><a href="https://codepen.io/bradleytaunt/pen/XLLqOW/">Live CodePen Example 3</a></p> + +<p>Pros of using <code>empty-cells</code>:</p> + +<ul> +<li>Only one CSS property</li> +<li>Targets the table elements specifically</li> +<li>No need for custom styles since it simply <em>hides</em> empty cell borders</li> +</ul> + +<p>Some downsides to using this property:</p> + +<ul> +<li>No styling customization</li> +<li>Trickier to use pseudo-element helpers without invoking the <code>:empty</code> state</li> +</ul> + +<h2 id="pick-your-preference">Pick your preference</h2> + +<p>It doesn&#8217;t matter semantically which option you decide to take when styling &#47; hiding empty table cells. Using the <code>:empty</code> state gives you a lot more flexibility in terms of what you can target (full rows, columns etc), but using the <code>empty-cells</code> property let&#8217;s you simply hide the cells and focus on more important items.</p></description> + <link>https://btxx.org/empty-table-cells</link> + <guid isPermaLink="false">https://btxx.org/empty-table-cells</guid> + <pubDate>Wed, 17 Jul 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Setting Up a Pi-hole Server with Eero</title> + <description><h1 id="setting-up-a-pi-hole-server-with-eero">Setting Up a Pi-hole Server with Eero</h1> + +<p>2022-03-14</p> + +<p>For the past few years, I&#8217;ve been using a set of Eero routers as my home mesh network. It&#8217;s worked fairly great in that time and even seamlessly transitioned without any hiccups when my family moved house. During the initial setup, I installed Pi-hole on a Raspberry Pi Zero WH because advertisements and tracking scripts suck.</p> + +<p>It was an easy process to get everything up and running, but I did notice a lack of detailed steps online for those specifically using Eero systems. So, I thought I would document this process here with the hope that it will help someone else along the way (or at the very least remain a semi-permanent place for my own reference).</p> + +<hr/> + +<p>FYI: You can pay for Eero Secure and allow them to handle ad&#47;tracker blocking for you. Personally, I prefer to have complete control over my blocklists and usage data. YMMV.</p> + +<hr/> + +<h2 id="setting-up-the-pi-hole-server">Setting Up the Pi-hole Server</h2> + +<p>Before we get into the step-by-step details, here are the required items you&#8217;ll need:</p> + +<ol> +<li>Raspberry Pi device (I recommend the Pi Zero for simplicity and low cost)</li> +<li>microSD card preloaded with <a href="https://www.raspberrypi.com/software/operating-systems/">Raspberry Pi OS Lite</a> (having a desktop GUI is overkill for our use case)</li> +<li>micro USB to ethernet adapter (check your local Amazon)</li> +<li>Patience!</li> +</ol> + +<p>Before you place your microSD card into the Pi and boot it up, connect it to your local computer (via USB adapter) - we will need to add some files first. Once loaded into the <code>boot</code> folder, add an empty file simply called <code>ssh</code> (no extensions). Next open your preferred text editor and enter the following code, editing the content to match your own country code and home network settings:</p> + +<pre><code>country=US +ctrl_interface=DIR=&#47;var&#47;run&#47;wpa_supplicant GROUP=netdev +update_config=1 + +network={ + ssid="WIFI_SSID" + scan_ssid=1 + psk="WIFI_PASSWORD" + key_mgmt=WPA-PSK +} +</code></pre> + +<p>Save this file as <code>wpa_supplicant.conf</code> and add it to the <code>boot</code> directory as well.</p> + +<p>You can now safely eject the microSD card and place it into your Raspberry Pi.</p> + +<h2 id="plug-it-in-and-boot">Plug it in and Boot!</h2> + +<p>Connect power to your Pi and give it a bit of time to boot up. Once you see a nice solid green LED, go back to your local computer&#8217;s terminal and enter the following command:</p> + +<pre><code>ssh pi@raspberrypi.local +</code></pre> + +<p>If everything was set up properly you will be asked to trust this device. Next, you will be prompted to enter the device password. The default password will be: <code>raspberry</code></p> + +<p><strong>Important</strong>: This is assuming you don&#8217;t currently have any other Pi devices using this hostname parameter!</p> + +<p>Once you are connected directly to the Pi, it&#8217;s best to check for updates:</p> + +<pre><code>sudo apt update +</code></pre> + +<p>&#8230;and if updates are in fact available, install them via:</p> + +<pre><code>sudo apt upgrade +</code></pre> + +<p>This next step is optional but I highly recommend it for security purposes. You should change both the hostname and password of this soon-to-be Pi-hole server. To do this simply run:</p> + +<pre><code>sudo raspi-config +</code></pre> + +<ol> +<li>Edit Hostname: navigate to <code>System Settings</code> &#8211;&#62; <code>Hostname</code></li> +<li>Edit Password: navigate to <code>System Settings</code> &#8211;&#62; <code>Password</code></li> +</ol> + +<p>Once complete, reboot the Pi. Just remember that when you try to reconnect to this device via SSH you&#8217;ll need to use both of these new parameters instead of the defaults.</p> + +<h2 id="installing-pi-hole">Installing Pi-hole</h2> + +<p>This is the easy part:</p> + +<pre><code>curl -sSL https:&#47;&#47;install.pi-hole.net | bash +</code></pre> + +<p>Pi-hole runs a full install script that walks you through step-by-step on setting things up. It&#8217;s best to use the suggested defaults during the install - everything is pretty simple.</p> + +<p>Near the end of the setup you&#8217;ll be show the newly created static IP for this Pi-hole server (both IPv4 and IPv6). Write these down for easy reference in a moment.</p> + +<p>Once it&#8217;s finished, shutdown the Pi safely by running:</p> + +<pre><code>sudo shutdown now +</code></pre> + +<h2 id="hardware-setup">Hardware Setup</h2> + +<p>With the Pi shutdown you can safely relocate it to where you have your modem and gateway Eero setup. Connect your new Pi-hole device to the secondary ethernet port on your gateway Eero[^1] and power it up. (This is where the microUSB to ethernet adapter for our Pi device is needed)</p> + +<p>See the crude diagram below for visual reference:</p> + +<ul> +<li><strong>Grey Wire</strong>: Incoming internet connection from ISP</li> +<li><strong>Blue Wire</strong>: Ethernet cord connecting modem to gateway Eero</li> +<li><strong>Red Wire</strong>: Ethernet cord connecting secondary Eero port to Pi Zero</li> +</ul> + +<p>That&#8217;s all we need to do on the hardware side of things.</p> + +<h2 id="configuring-the-eero-app">Configuring the Eero App</h2> + +<p>With everything connected properly it&#8217;s finally time to setup our custom DNS settings through Eero.</p> + +<ol> +<li>Open the Eero app (iOS or Android)</li> +<li>Navigate to <strong>Settings</strong> &#62; <strong>Network Settings</strong> &#62; <strong>DNS</strong></li> +<li>Select <strong>Customized DNS</strong> and enter both your saved IPv4 &#47; IPv6 values</li> +<li>Eero will prompt you to reboot your network - do it</li> +</ol> + +<p>Next we need to add your Pi-hole&#8217;s address as an IPv4 reservation:[^2]</p> + +<ol> +<li>In the Eero app, navigate to <strong>Settings</strong> &#62; <strong>Network Settings</strong> &#62; <strong>Reservations &#38; port forwarding</strong></li> +<li>Tap <strong>Add a reservation</strong> and include your Pi-hole&#8217;s IP address</li> +</ol> + +<p>After the system reboots everything <em>should</em> be working as intended! You can check by navigating to your Pi-hole IP address in your browser.</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>None of this stuff if groundbreaking, but my hope is that even one person across the internet finds this helpful! If you run into any major bugs, please leave a comment below and I&#8217;ll do my best to help out!</p> + +<p>Best of luck blocking those pesky ads and trackers!</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>You don&#8217;t <em>have</em> to use your Eero gateway for this step (credit: <a href="https://old.reddit.com/user/RollMeAway83">&#47;u&#47;RollMeAway83</a>)</li> +<li>Thanks to <a href="https://old.reddit.com/user/YankeesIT">u&#47;YankeesIT</a> for pointing out that this is required not <em>optional</em></li> +</ol></description> + <link>https://btxx.org/eero</link> + <guid isPermaLink="false">https://btxx.org/eero</guid> + <pubDate>Mon, 14 Mar 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Easy Toggle Switches</title> + <description><h1 id="easy-toggle-switches">Easy Toggle Switches</h1> + +<p>2019-02-18</p> + +<p>Sometimes there is a need to use toggle elements in-place of the default <code>checkbox</code> inputs. The problem is, I tend to see a lot of developers reaching for plugins or JavaScript components in order to implement these toggles.</p> + +<p><em>This is overkill</em>. You can create your own custom <code>input</code> elements to mimic toggles perfectly with just a small amount of CSS.</p> + +<h2 id="what-we-will-be-building">What we will be building</h2> + +<p><img src="/public/images/easy-toggle-switches.png" alt="Easy toggle switches" /></p> + +<p><a href="https://codepen.io/bradleytaunt/pen/bGgbajY">Live CodePen Example</a></p> + +<h2 id="the-html">The HTML</h2> + +<p>The build structure for these toggles is really simple, we only need:</p> + +<ul> +<li><p>a parent container to hold all our corresponding elements</p></li> +<li><p>a checkbox <code>input</code> element (which we will hide)</p></li> +<li><p>an empty label designed to represent the slider</p></li> +<li><p>a text label that references the <code>input</code> </p> + +<p>&#47;* Main toggle parent container <em>&#47; + + &#47;</em> Checkbox input, hidden with CSS <em>&#47; + + &#47;</em> The toggle slider element <em>&#47; + + &#47;</em> The text label to the right of the slider *&#47; + Toggle Switch +</p></li> +</ul> + +<p>And that&#8217;s everything we need for the HTML.</p> + +<p><strong>ProTip:</strong> Don&#8217;t forget to increment both the <code>id</code> and <code>for</code> attributes when adding additional toggles. This seems like a no-brainer but it&#8217;s overlooked more than you think.</p> + +<h2 id="the-css">The CSS</h2> + +<p>To get things started we will add the styling to the <code>.toggle-switch</code> item directly (using <code>flexbox</code> in this demo for easier layout).</p> + +<p><strong>Sidenote</strong>: You will notice the inclusion of CSS variables in this demo - if you are unfamiliar with how to use root variables in CSS, take a look at one of my previous posts: CSS variables.</p> + +<pre><code>:root { + --primary-color: #4A90E2; +} + +.toggle-switch { + align-items: center; + display: flex; + font-size: 14px; + justify-content: center; + margin: 20px 0; +} +</code></pre> + +<p>Next we will hide the default browser checkbox element since we won&#8217;t be needing it:</p> + +<pre><code>.toggle-input { + position: absolute; + visibility: hidden; + z-index: -1; +} +</code></pre> + +<p>Let&#8217;s also add some base styling for the <code>label</code> containing the text corresponding to it&#8217;s <code>input</code> sibling:</p> + +<pre><code>.toggle-label { + color: #ccc; + cursor: pointer; + font-weight: bold; + padding-left: 10px; + text-shadow: 1px 1px 0 rgba(255,255,255,0.3); + transition: ease all .3s; +} +</code></pre> + +<p>Now we target the <code>.toggle-slider</code> label and add the styling for the main slider base:</p> + +<pre><code>&#47;* This is just the main slider base *&#47; +.toggle-slider { + background: #eee; + border-radius: 9999px; + box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), + inset 0 4px 8px rgba(0,0,0,0.1), + 0 1px 1px rgba(255,255,255,1); + cursor: pointer; + display: inline-block; + height: 20px; + position: relative; + transition: all ease .3s; + width: 40px; +} +</code></pre> + +<p>We <em>could</em> include a separate element for the circle toggle switcher itself, but instead we will use the <code>:before</code> pseudo element:</p> + +<pre><code>.toggle-slider:before { + background: white; + border-radius: 9999px; + box-shadow: 0 4px 8px rgba(0,0,0,0.1), + 0 2px 4px rgba(0,0,0,0.2); + content:&#39;&#39;; + height: 16px; + left: 2px; + position: absolute; + top: 2px; + transition: all ease .3s; + width: 16px; +} +</code></pre> + +<h3 id="interaction">Interaction</h3> + +<p>Right now we just have a static toggle that does nothing when the user interacts with it. Let&#8217;s change that by moving the pseudo element&#8217;s position based on the checkbox <code>input</code> state and updating the label text color:</p> + +<pre><code>.toggle-input:checked + .toggle-slider { + background: var(--primary-color); +} +.toggle-input:checked + .toggle-slider:before { + &#47;* Move 100% of the width minus it&#39;s own width plus initial &#39;left&#39; *&#47; + left: calc(100% - 18px); +} + +.toggle-input:checked ~ .toggle-label { + color: var(--primary-color); +} +</code></pre> + +<p>And because we already included the <code>transition</code> property on both the base slider and label text, everything animates nicely between state changes.</p> + +<h2 id="final-code">Final code</h2> + +<p>To make things easier, you can find the HTML &#38; CSS is their entirety below:</p> + +<h3 id="html">HTML</h3> + +<pre><code>&#60;div class="toggle-switch"&#62; + &#60;input class="toggle-input" type="checkbox" id="toggle-1"&#62; + &#60;label class="toggle-slider" for="toggle-1"&#62;&#60;&#47;label&#62; + &#60;label class="toggle-label" for="toggle-1"&#62;Toggle Switch&#60;&#47;label&#62; +&#60;&#47;div&#62; +&#60;div class="toggle-switch"&#62; + &#60;input class="toggle-input" type="checkbox" id="toggle-2"&#62; + &#60;label class="toggle-slider" for="toggle-2"&#62;&#60;&#47;label&#62; + &#60;label class="toggle-label" for="toggle-2"&#62;Toggle Switch&#60;&#47;label&#62; +&#60;&#47;div&#62; +&#60;div class="toggle-switch"&#62; + &#60;input class="toggle-input" type="checkbox" id="toggle-3" checked&#62; + &#60;label class="toggle-slider" for="toggle-3"&#62;&#60;&#47;label&#62; + &#60;label class="toggle-label" for="toggle-3"&#62;Toggle Switch&#60;&#47;label&#62; +&#60;&#47;div&#62; +&#60;div class="toggle-switch"&#62; + &#60;input class="toggle-input" type="checkbox" id="toggle-4"&#62; + &#60;label class="toggle-slider" for="toggle-4"&#62;&#60;&#47;label&#62; + &#60;label class="toggle-label" for="toggle-4"&#62;Toggle Switch&#60;&#47;label&#62; +&#60;&#47;div&#62; +</code></pre> + +<h3 id="the-css-1">The CSS</h3> + +<pre><code>:root { + --primary-color: #4A90E2; +} +.toggle-switch { + align-items: center; + display: flex; + font-size: 14px; + justify-content: center; + margin: 20px 0; +} +.toggle-input { + position: absolute; + visibility: hidden; + z-index: -1; +} +.toggle-slider { + background: #eee; + border-radius: 9999px; + box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), + inset 0 4px 8px rgba(0,0,0,0.1), + 0 1px 1px rgba(255,255,255,1); + cursor: pointer; + display: inline-block; + height: 20px; + position: relative; + transition: all ease .3s; + width: 40px; +} +.toggle-slider:before { + background: white; + border-radius: 9999px; + box-shadow: 0 4px 8px rgba(0,0,0,0.1), + 0 2px 4px rgba(0,0,0,0.2); + content:&#39;&#39;; + height: 16px; + left: 2px; + position: absolute; + top: 2px; + transition: all ease .3s; + width: 16px; +} +.toggle-input:checked + .toggle-slider { + background: var(--primary-color); +} +.toggle-input:checked + .toggle-slider:before { + left: calc(100% - 18px); +} +.toggle-label { + color: #ccc; + cursor: pointer; + font-weight: bold; + padding-left: 10px; + text-shadow: 1px 1px 0 rgba(255,255,255,0.3); + transition: ease all .3s; +} +.toggle-input:checked ~ .toggle-label { + color: var(--primary-color); +} +</code></pre> + +<p>Enjoy your custom toggles!</p></description> + <link>https://btxx.org/easy-toggle-switches</link> + <guid isPermaLink="false">https://btxx.org/easy-toggle-switches</guid> + <pubDate>Mon, 18 Feb 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Easy Custom Radio Inputs</title> + <description><h1 id="easy-custom-radio-inputs">Easy Custom Radio Inputs</h1> + +<p>2019-01-21</p> + +<p>Default radio inputs are notoriously horrible looking and are something designers tend to over-think when trying to customize them. Let&#8217;s walk through how to create custom radio buttons with <em>pure CSS</em>, while still preserving performance and accessibility.</p> + +<h2 id="the-final-product">The Final Product</h2> + +<p>This is what we will be designing:</p> + +<p><img src="/public/images/custom-radio-inputs.png" alt="Custom radio inputs" /></p> + +<p><a href="https://codepen.io/bradleytaunt/pen/oNjwMyX">Live CodePen Example</a></p> + +<hr/> + +<h2 id="the-bones-of-our-radio-inputs-html">The bones of our radio inputs (HTML)</h2> + +<pre><code>&#60;input class="radio-btn" name="radio-collection" id="radio-1" type="radio"&#62; +&#60;label class="radio-label" for="radio-1"&#62;&#60;span&#62;I am very satisfied&#60;&#47;span&#62;&#60;&#47;label&#62; + +&#60;input class="radio-btn" name="radio-collection" id="radio-2" type="radio"&#62; +&#60;label class="radio-label" for="radio-2"&#62;&#60;span&#62;I am satisfied&#60;&#47;span&#62;&#60;&#47;label&#62; + +&#60;input class="radio-btn" name="radio-collection" id="radio-3" type="radio"&#62; +&#60;label class="radio-label" for="radio-3"&#62;&#60;span&#62;I am indifferent&#60;&#47;span&#62;&#60;&#47;label&#62; + +&#60;input class="radio-btn" name="radio-collection" id="radio-4" type="radio"&#62; +&#60;label class="radio-label" for="radio-4"&#62;&#60;span&#62;I am unsatisfied&#60;&#47;span&#62;&#60;&#47;label&#62; + +&#60;input class="radio-btn" name="radio-collection" id="radio-5" type="radio"&#62; +&#60;label class="radio-label" for="radio-5"&#62;&#60;span&#62;I am very unsatisfied&#60;&#47;span&#62;&#60;&#47;label&#62; +</code></pre> + +<p>I know it looks like a lot is going on here, but it&#8217;s pretty straightforward so let&#8217;s unpackage line by line:</p> + +<h3 id="radio-inputs">Radio inputs</h3> + +<pre><code>&#60;input class="radio-btn" name="radio-collection" id="radio-1" type="radio"&#62; +</code></pre> + +<p>This is the default <code>radio</code> input. We give it:</p> + +<ul> +<li>a <code>name</code> (inputs with a shared <code>name</code> are grouped together)</li> +<li>an <code>id</code> (so our label can target this input)</li> +<li>a <code>class</code> (so we can style it later)</li> +</ul> + +<p><strong>Important</strong>: be sure to have a unique <code>id</code> for each input so your labels don&#8217;t end up connected to multiple radios. In this demo we are simply incrementing them by one.</p> + +<h3 id="labels">Labels</h3> + +<p>Adding the labels is fairly straightforward, we just include the corresponding input&#8217;s <code>id</code> in the label&#8217;s <code>for</code> attribute. The label content is wrapped in a <code>span</code> - which I will explain the reasoning for later.</p> + +<p>For styling purposes we also add the <code>radio-label</code> class.</p> + +<pre><code>&#60;label class="radio-label" for="radio-1"&#62;&#60;span&#62;I am very satisfied&#60;&#47;span&#62;&#60;&#47;label&#62; +</code></pre> + +<p>This is looking pretty terrible - but that&#8217;s nothing some good ol&#8217; CSS can&#8217;t fix!</p> + +<h2 id="the-flesh-of-our-radio-inputs-css">The flesh of our radio inputs (CSS)</h2> + +<p>First we give some basic styling to our <code>label</code> and <code>input</code> classes (along with hover states). The <code>radio</code> element is actually hidden from view, but by using the <code>visibility</code> attribute we still keep it accessible for screen-readers.</p> + +<pre><code>.radio-label { + background: white; + border: 1px solid #eee; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); + cursor: pointer; + display: inline-block; + font-weight: 600; + margin: 0 auto 10px; + &#47;* This 65px padding makes room for the custom input *&#47; + padding: 20px 20px 20px 65px; + position: relative; + transition: .3s ease all; + width: 100%; +} +.radio-label:hover { + box-shadow: 0 4px 8px rgba(0,0,0,0.05); +} +.radio-btn { + position: absolute; + visibility: hidden; +} +</code></pre> + +<p>Remember that <code>span</code> element inside the label? We set it&#8217;s <code>user-select</code> property to <code>none</code> so we avoid any possible issue with the user selecting the text on-click:</p> + +<pre><code>.radio-label span { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} +</code></pre> + +<p>Next we include the default empty selection element (to mimic the original radio input) via a pseudo element:</p> + +<pre><code>.radio-label:before { + background: #eee; + border-radius: 50%; + content:&#39;&#39;; + height: 30px; + left: 20px; + position: absolute; + &#47;* Half the height of it&#39;s parent minus half of it&#39;s own height *&#47; + top: calc(50% - 15px); + transition: .3s ease background-color; + width: 30px; +} +</code></pre> + +<h2 id="a-few-final-steps">A Few Final Steps</h2> + +<p>The final step is adding the custom styling for when an <code>input</code> item is selected (<code>:checked</code>).</p> + +<p>You will notice the use of a <code>base64</code> element for the custom checkmark - feel free to subsitute this for an actual image or none at all (this is just my personal design preference).</p> + +<pre><code>.radio-btn:checked + .radio-label { + background: #ECF5FF; + border-color: #4A90E2; +} +.radio-btn:checked + .radio-label:before { + background-color: #4A90E2; + background-image: url(&#39;data:image&#47;svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+&#39;); + background-repeat: no-repeat; + background-position: center; + background-size: 15px; +} +</code></pre> + +<p><strong>And that&#8217;s it.</strong></p> + +<p>For easier reference the entire CSS file can be found below:</p> + +<pre><code>.radio-label { + background: white; + border: 1px solid #eee; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); + cursor: pointer; + display: inline-block; + font-weight: 600; + margin: 0 auto 10px; + padding: 20px 20px 20px 65px; + position: relative; + transition: .3s ease all; + width: 100%; +} +.radio-label:hover { + box-shadow: 0 4px 8px rgba(0,0,0,0.05); +} +.radio-label:before { + background: #eee; + border-radius: 50%; + content:&#39;&#39;; + height: 30px; + left: 20px; + position: absolute; + top: calc(50% - 15px); + transition: .3s ease background-color; + width: 30px; +} +.radio-label span { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} +.radio-btn { + position: absolute; + visibility: hidden; +} +.radio-btn:checked + .radio-label { + background: #ECF5FF; + border-color: #4A90E2; +} +.radio-btn:checked + .radio-label:before { + background-color: #4A90E2; + background-image: url(&#39;data:image&#47;svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+&#39;); + background-repeat: no-repeat; + background-position: center; + background-size: 15px; +} +</code></pre> + +<hr/> + +<h2 id="but-wait---we-can-get-even-fancier">But wait - we can get even fancier!</h2> + +<p>Since this demo is based off a survey-type questionaire, wouldn&#8217;t it be interesting to give the different selectable options their own styling based on their context? Take a look at the further customized version below:</p> + +<p>We can do so by adding <code>positive</code>, <code>neutral</code> and <code>negative</code> class names to the radio inputs with their own respective properties:</p> + +<pre><code>.radio-btn.positive:checked + .radio-label { + background: #EAFFF6; + border-color: #32B67A; +} +.radio-btn.positive:checked + .radio-label:before { + background-color: #32B67A; +} +.radio-btn.neutral:checked + .radio-label:before { + background-image: url(&#39;data:image&#47;svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAtMTUgMzAgOC41NzE0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PCEtLUdlbmVyYXRlZCBieSBJSlNWRyAoaHR0cHM6Ly9naXRodWIuY29tL2ljb25qYXIvSUpTVkcpLS0+PHBhdGggZD0iTTMwLC0xMi4zMjE0djMuMjE0MjljMCwwLjczNjYwNyAtMC4yNjIyNzcsMS4zNjcxOSAtMC43ODY4MywxLjg5MTc0Yy0wLjUyNDU1NCwwLjUyNDU1NCAtMS4xNTUxMywwLjc4NjgzMSAtMS44OTE3NCwwLjc4NjgzMWgtMjQuNjQyOWMtMC43MzY2MDcsMCAtMS4zNjcxOSwtMC4yNjIyNzcgLTEuODkxNzQsLTAuNzg2ODMxYy0wLjUyNDU1MywtMC41MjQ1NTMgLTAuNzg2ODMsLTEuMTU1MTMgLTAuNzg2ODMsLTEuODkxNzR2LTMuMjE0MjljMCwtMC43MzY2MDcgMC4yNjIyNzcsLTEuMzY3MTkgMC43ODY4MywtMS44OTE3NGMwLjUyNDU1NCwtMC41MjQ1NTMgMS4xNTUxMywtMC43ODY4MyAxLjg5MTc0LC0wLjc4NjgzaDI0LjY0MjljMC43MzY2MDcsMCAxLjM2NzE5LDAuMjYyMjc3IDEuODkxNzQsMC43ODY4M2MwLjUyNDU1MywwLjUyNDU1NCAwLjc4NjgzLDEuMTU1MTMgMC43ODY4MywxLjg5MTc0WiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg==&#39;); +} +.radio-btn.negative:checked + .radio-label { + background: #FFF2F2; + border-color: #E75153; +} +.radio-btn.negative:checked + .radio-label:before { + background-color: #E75153; + background-image: url(&#39;data:image&#47;svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIxLjg1MTg1IC0zOS42OTcgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjwhLS1HZW5lcmF0ZWQgYnkgSUpTVkcgKGh0dHBzOi8vZ2l0aHViLmNvbS9pY29uamFyL0lKU1ZHKS0tPjxwYXRoIGQ9Ik0yMS43Mjk5LC0yMy40NzFjMCwwLjQ0NjQyOCAtMC4xNTYyNSwwLjgyNTg5MyAtMC40Njg3NSwxLjEzODM5bC0yLjI3Njc5LDIuMjc2NzljLTAuMzEyNSwwLjMxMjUgLTAuNjkxOTY0LDAuNDY4NzUgLTEuMTM4MzksMC40Njg3NWMtMC40NDY0MjgsMCAtMC44MjU4OTMsLTAuMTU2MjUgLTEuMTM4MzksLTAuNDY4NzVsLTQuOTIxODcsLTQuOTIxODhsLTQuOTIxODgsNC45MjE4OGMtMC4zMTI1LDAuMzEyNSAtMC42OTE5NjQsMC40Njg3NSAtMS4xMzgzOSwwLjQ2ODc1Yy0wLjQ0NjQyOCwwIC0wLjgyNTg5MiwtMC4xNTYyNSAtMS4xMzgzOSwtMC40Njg3NWwtMi4yNzY3OSwtMi4yNzY3OWMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY1IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI5IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsNC45MjE4OCwtNC45MjE4OGwtNC45MjE4OCwtNC45MjE4OGMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY0IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI4IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsMi4yNzY3OSwtMi4yNzY3OGMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI5LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsNC45MjE4OCw0LjkyMTg4bDQuOTIxODcsLTQuOTIxODhjMC4zMTI1LC0wLjMxMjUgMC42OTE5NjUsLTAuNDY4NzUgMS4xMzgzOSwtMC40Njg3NWMwLjQ0NjQyOSwwIDAuODI1ODkzLDAuMTU2MjUgMS4xMzgzOSwwLjQ2ODc1bDIuMjc2NzksMi4yNzY3OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjUgMC40Njg3NSwxLjEzODM5YzAsMC40NDY0MjkgLTAuMTU2MjUsMC44MjU4OTMgLTAuNDY4NzUsMS4xMzgzOWwtNC45MjE4OCw0LjkyMTg4bDQuOTIxODgsNC45MjE4OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjQgMC40Njg3NSwxLjEzODM5WiIgdHJhbnNmb3JtPSJzY2FsZSgxLjAwNTYxKSIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg==&#39;); +} +</code></pre> + +<p>I hope this shows new designers that simple custom radio inputs aren&#8217;t so hard to implement after-all and can actually be pretty fun to design.</p></description> + <link>https://btxx.org/easy-custom-radio-inputs</link> + <guid isPermaLink="false">https://btxx.org/easy-custom-radio-inputs</guid> + <pubDate>Mon, 21 Jan 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Dynamic Checkboxes</title> + <description><h1 id="dynamic-checkboxes">Dynamic Checkboxes</h1> + +<p>2019-07-30</p> + +<p>Checkboxes are used quite frequently on forms across the web. Whether you&#8217;re selecting a pricing plan during a site&#8217;s sign-up process or just simply selecting to opt-out from a newsletter, you have most likely interacted with some form of checkbox element.</p> + +<p>What if we could make everyday checkboxes more beautiful <em>and</em> more intuitive? <em>It&#8217;s easier than you think</em>. We only need a small amount of CSS and JavaScript to make considerable improvements to your average checkbox UX.</p> + +<p>Let&#8217;s get into it.</p> + +<h2 id="what-we-are-building">What we are building</h2> + +<p>Take a look and play around with the CodePen below to get an idea of what we are going to build. The premise is a simple add-on pricing form which calculates the additional monthly total to the user in real-time.</p> + +<p><a href="https://codepen.io/bradleytaunt/pen/rXWEpy/">Live CodePen Example</a></p> + +<h2 id="the-structure-html">The Structure (HTML)</h2> + +<p>As always, we will start by breaking down the &#8220;bones&#8221; of the HTML structure for this checkbox form. Let&#8217;s take a look at the HTML in it&#8217;s entirety (don&#8217;t worry, it is a lot more simple than it seems at first glance):</p> + +<pre><code>&#60;h2&#62;Add-ons&#60;&#47;h2&#62; + +&#60;input class="checkbox-btn" name="checkbox-collection" id="checkbox-1" type="checkbox" value="49"&#62; +&#60;label class="checkbox-label" for="checkbox-1"&#62; + &#60;span&#62; + White-labeled Domain + &#60;em&#62;Use your own custom domain with SSL security included.&#60;&#47;em&#62; + &#60;&#47;span&#62; + &#60;span&#62;$49&#47;mo&#60;&#47;span&#62; +&#60;&#47;label&#62; + +&#60;input class="checkbox-btn" name="checkbox-collection" id="checkbox-2" type="checkbox" value="49"&#62; +&#60;label class="checkbox-label" for="checkbox-2"&#62; + &#60;span&#62; + API Access + &#60;em&#62;Make API calls to perform custom serving and account actions.&#60;&#47;em&#62; + &#60;&#47;span&#62; + &#60;span&#62;$49&#47;mo&#60;&#47;span&#62; +&#60;&#47;label&#62; + +&#60;input class="checkbox-btn" name="checkbox-collection" id="checkbox-3" type="checkbox" value="349"&#62; +&#60;label class="checkbox-label" for="checkbox-3"&#62; + &#60;span&#62; + Priority Support + &#60;em&#62;A dedicated account manager to assist your team with ongoing deployments.&#60;&#47;em&#62; + &#60;&#47;span&#62; + &#60;span&#62;$349&#47;mo&#60;&#47;span&#62; +&#60;&#47;label&#62; + +&#60;div class="total-cost"&#62; + &#60;h2&#62;Your Plan&#60;&#47;h2&#62; + &#60;div&#62; + &#60;span&#62;$&#60;&#47;span&#62; + &#60;span id="total-cost-inner"&#62;0&#60;&#47;span&#62; + &#60;input id="output" type="text" value="0" disabled&#47;&#62; + &#60;span&#62;&#47;mo&#60;&#47;span&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<h3 id="the-checkbox-inputs-labels">The checkbox inputs &#38; labels</h3> + +<pre><code>&#60;!-- #1 --&#62; +&#60;input class="checkbox-btn" name="checkbox-collection" id="checkbox-1" type="checkbox" value="49"&#62; + +&#60;!-- #2 --&#62; +&#60;label class="checkbox-label" for="checkbox-1"&#62; + + &#60;!-- #2i --&#62; + &#60;span&#62; + White-labeled Domain + &#60;em&#62;Use your own custom domain with SSL security included.&#60;&#47;em&#62; + &#60;&#47;span&#62; + + &#60;!-- #2ii --&#62; + &#60;span&#62;$49&#47;mo&#60;&#47;span&#62; + +&#60;&#47;label&#62; +</code></pre> + +<ol> +<li><p>This input will be hidden via <code>position:absolute</code> by default. All checkbox inputs need to share the same <code>name</code> value and all checkboxes require their our custom <code>id</code> that will link with the corresponding <code>for</code> value on the label.</p></li> +<li><p>This label needs it&#8217;s <code>for</code> value to correspond with it&#8217;s partnered checkbox.</p> + +<ul> +<li>i) The first span holds the title and description information of the add-on</li> +<li>ii) The last span holds the cost associated with the current add-on</li> +</ul></li> +</ol> + +<h3 id="the-total-cost-container-output">The total cost container output</h3> + +<pre><code>&#60;!-- #1 --&#62; +&#60;div class="total-cost"&#62; + + &#60;h2&#62;Your Plan&#60;&#47;h2&#62; + + &#60;!-- #2 --&#62; + &#60;div&#62; + + &#60;!-- #2i --&#62; + &#60;span&#62;$&#60;&#47;span&#62; + + &#60;!-- #2ii --&#62; + &#60;span id="total-cost-inner"&#62;0&#60;&#47;span&#62; + + &#60;!-- #2iii --&#62; + &#60;input id="output" type="text" value="0" disabled&#47;&#62; + + &#60;!-- #2iv --&#62; + &#60;span&#62;&#47;mo&#60;&#47;span&#62; + + &#60;&#47;div&#62; + +&#60;&#47;div&#62; +</code></pre> + +<ol> +<li><p>A simple <code>div</code> with a class we can easily target later</p></li> +<li><p>A <code>div</code> parent container is needed to house all the total <code>spans</code> together (more on this when we get into the CSS)</p> + +<ul> +<li>i) The first <code>span</code> holds the static currency symbol</li> +<li>ii) The second <code>span</code> is where our updated cost will be injected</li> +<li>iii) This input field is required for us to take-in the <code>value</code> of the associated <code>:checked</code> inputs and add them together. This current value is then used for the injection into the second <code>span</code></li> +<li>iv) The final <code>span</code> simply holds the static monthly duration content</li> +</ul></li> +</ol> + +<p>All that&#8217;s all we need for the HTML!</p> + +<h2 id="the-visuals-css">The Visuals (CSS)</h2> + +<p>Again, lets take a look at the entire file before we break it down step-by-step:</p> + +<pre><code>.checkbox-label { + align-items: center; + background-color: none; + border: 1px solid lightgrey; + border-radius: 5px; + cursor: pointer; + display: flex; + font-weight: 600; + justify-content: space-between; + margin: 0 auto 10px; + padding: 20px 20px 20px 70px; + position: relative; + transition: .3s ease all; + width: 100%; +} +.checkbox-label span:last-child { + padding: 0 0 0 20px; +} +.checkbox-label:hover { + background-color: rgba(255,255,255,0.2); +} +.checkbox-label:before { + background-repeat: no-repeat; + background-position: center; + background-size: 15px; + border: 1px solid lightgrey; + border-radius: 50%; + content:&#39;&#39;; + height: 30px; + left: 20px; + position: absolute; + top: calc(50% - 15px); + transition: .3s ease background-color; + width: 30px; +} +.checkbox-label:hover:before { + background-image: + url(&#39;data:image&#47;svg+xml;utf8,&#60;svg xmlns="http:&#47;&#47;www.w3.org&#47;2000&#47;svg" width="23.571429" height="23.571429" viewBox="0.000000 -47.142857 23.571429 23.571429"&#62;&#60;path fill="lightgrey" d="M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286"&#62;&#60;&#47;path&#62;&#60;&#47;svg&#62;&#39;); +} +.checkbox-label span { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} +.checkbox-label span em { + display: block; + font-size: 80%; + font-style: normal; + font-weight: 400; + line-height: 1.2; +} +.checkbox-btn { + position: absolute; + visibility: hidden; +} +.checkbox-btn:checked + .checkbox-label { + background-color: white; + border-color: mediumpurple; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); +} +.checkbox-btn:checked + .checkbox-label:before { + background-color: mediumpurple; + background-image: + url(&#39;data:image&#47;svg+xml;utf8,&#60;svg xmlns="http:&#47;&#47;www.w3.org&#47;2000&#47;svg" width="25.948661" height="19.888393" viewBox="2.025670 -40.011161 25.948661 19.888393"&#62;&#60;path fill="white" d="M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232"&#62;&#60;&#47;path&#62;&#60;&#47;svg&#62;&#39;); + border-color: mediumpurple; +} + +.total-cost { + align-items: baseline; + border-top: 1px solid lightgrey; + display: flex; + justify-content: space-between; + margin-top: 40px; + padding: 40px 20px 0; +} +.total-cost div { + align-items: baseline; + display: flex; +} +.total-cost span:nth-child(1) { + align-self: flex-start; + padding-top: 5px; +} +.total-cost span:nth-child(2) { + font-size: 32px; + font-weight: bold; +} +.total-cost input { + display: none; +} + +@media(max-width:480px) { + .checkbox-label { + align-items: flex-start; + flex-direction: column; + flex-wrap: wrap; + } + .checkbox-label span:last-child { + padding: 10px 0 0 0; + } +} +</code></pre> + +<h3 id="the-checkbox-label">The checkbox label</h3> + +<pre><code>&#47;* +This is the main element for each checkbox "container". +Inside it houses the title, description and price. +*&#47; +.checkbox-label { + align-items: center; + background-color: none; + border: 1px solid lightgrey; + border-radius: 5px; + cursor: pointer; + display: flex; + font-weight: 600; + justify-content: space-between; + margin: 0 auto 10px; + padding: 20px 20px 20px 70px; + position: relative; + transition: .3s ease all; + width: 100%; +} +.checkbox-label:hover { + background-color: rgba(255,255,255,0.2); +} + +&#47;* Update the label styling when the input is :checked *&#47; +.checkbox-btn:checked + .checkbox-label { + background-color: white; + border-color: mediumpurple; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); +} +</code></pre> + +<h3 id="the-custom-checkbox-input">The custom checkbox input</h3> + +<p>We need to hide the browser&#8217;s default checkbox input and replace it with our own using pseudo selectors.</p> + +<pre><code>&#47;* Hide browser default input *&#47; +.checkbox-btn { + position: absolute; + visibility: hidden; +} + +&#47;* Our custom input checkbox *&#47; +.checkbox-label:before { + background-repeat: no-repeat; + background-position: center; + background-size: 15px; + border: 1px solid lightgrey; + border-radius: 50%; + content:&#39;&#39;; + height: 30px; + left: 20px; + position: absolute; + top: calc(50% - 15px); + transition: .3s ease background-color; + width: 30px; +} + +&#47;* +Here we add a simple &#39;+&#39; icon on hover +to our custom pseudo element. +Adding it as an inline SVG gives us the +ability to fully customize it&#39;s styling +*&#47; +.checkbox-label:hover:before { + background-image: + url(&#39;data:image&#47;svg+xml;utf8,&#60;svg xmlns="http:&#47;&#47;www.w3.org&#47;2000&#47;svg" width="23.571429" height="23.571429" viewBox="0.000000 -47.142857 23.571429 23.571429"&#62;&#60;path fill="lightgrey" d="M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286"&#62;&#60;&#47;path&#62;&#60;&#47;svg&#62;&#39;); +} + +&#47;* +When the checkbox input is :checked we need to +update the inline SVG to use a checkmark symbol +*&#47; +.checkbox-btn:checked + .checkbox-label:before { + background-color: mediumpurple; + background-image: + url(&#39;data:image&#47;svg+xml;utf8,&#60;svg xmlns="http:&#47;&#47;www.w3.org&#47;2000&#47;svg" width="25.948661" height="19.888393" viewBox="2.025670 -40.011161 25.948661 19.888393"&#62;&#60;path fill="white" d="M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232"&#62;&#60;&#47;path&#62;&#60;&#47;svg&#62;&#39;); + border-color: mediumpurple; +} +</code></pre> + +<h3 id="the-total-cost-container">The total cost container</h3> + +<p>We only need some very basic flexbox styling for our bottom &#8220;total&#8221; container:</p> + +<pre><code>.total-cost { + align-items: baseline; + border-top: 1px solid lightgrey; + display: flex; + justify-content: space-between; + margin-top: 40px; + padding: 40px 20px 0; +} +.total-cost div { + align-items: baseline; + display: flex; +} +.total-cost span:nth-child(1) { + align-self: flex-start; + padding-top: 5px; +} +.total-cost span:nth-child(2) { + font-size: 32px; + font-weight: bold; +} + +&#47;* +This input is used in our JavaScript - look at the +function part of this post to understand why +*&#47; +.total-cost input { + display: none; +} +</code></pre> + +<h3 id="last-but-not-least---mobile">Last but not least - mobile</h3> + +<p>Now we just ensure that on smaller devices our checkbox labels render nicely:</p> + +<pre><code>@media(max-width:480px) { + &#47;* + Avoids the inner label content from squishing together + and becoming unreadable + *&#47; + .checkbox-label { + align-items: flex-start; + flex-direction: column; + flex-wrap: wrap; + } + .checkbox-label span:last-child { + padding: 10px 0 0 0; + } +} +</code></pre> + +<p>That&#8217;s it for the styling!</p> + +<h2 id="the-function-js">The Function (JS)</h2> + +<p>As you can see below, we only need a very minor amount of JavaScript to accomplish our total cost &#8220;injection&#8221;.</p> + +<pre><code>window.onload=function(){ + +&#47;&#47; Place the default browser checkbox inputs into a variable +var inputs = document.getElementsByClassName(&#39;checkbox-btn&#39;) + +&#47;&#47; Now we loop through the inputs and check if they are +&#47;&#47; greater than zero. If so, we run our function. +for (var i=0; i &#60; inputs.length; i++) { + + inputs[i].onchange = function() { + + &#47;&#47; Create `add` variable which takes the :checked input value + var add = this.value * (this.checked ? 1 : -1); + + &#47;&#47; We grab the current total value on our hidden input field and return it + &#47;&#47; as a floating point number + &#47;&#47; (since in this use case it will be a price number based on currency) + var new_total = parseFloat(document.getElementById(&#39;output&#39;).value); + + &#47;&#47; Now we simply add the existing total value with the newly ":checked" input value + var updated_total = document.getElementById(&#39;output&#39;).value=new_total + add + + &#47;&#47; Place the new updated total directly inside the `total-cost-inner` span element + document.getElementById(&#39;total-cost-inner&#39;).innerHTML = updated_total; + } + +} +} +</code></pre> + +<p>That&#8217;s it! Feel free to play with the demo some more at the top of the post, or check out the <a href="https://codepen.io/bradleytaunt/pen/rXWEpy">CodePen source directly</a>.</p></description> + <link>https://btxx.org/dynamic-checkboxes</link> + <guid isPermaLink="false">https://btxx.org/dynamic-checkboxes</guid> + <pubDate>Tue, 30 Jul 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Bringing dwm Shortcuts to GNOME</title> + <description><h1 id="bringing-dwm-shortcuts-to-gnome">Bringing dwm Shortcuts to GNOME</h1> + +<p>2023-11-02</p> + +<p>The <code>dwm</code> window manager is my standard &#8220;go-to&#8221; for most of my personal laptop environments. For desktops with larger, higher resolution monitors I tend to lean towards using GNOME. The GNOME DE is fairly solid for my own purposes. This article isn&#8217;t going to deep dive into GNOME itself, but instead highlight some minor configuration changes I make to mimic a few <code>dwm</code> shortcuts.</p> + +<p>For reference, I&#8217;m running GNOME 45.0 on Ubuntu 23.10</p> + +<h2 id="setting-up-fixed-workspaces">Setting Up Fixed Workspaces</h2> + +<p>When I use <code>dwm</code> I tend to have a hard-set amount of <code>tags</code> to cycle through (normally 4-5). Unfortunately, dynamic rendering is the default for workspaces (ie. tags) in GNOME. For my personal preference I set this setting to <code>fixed</code>. We can achieve this by opening <strong>Settings</strong> &#62; <strong>Multitasking</strong> and selecting &#8220;Fixed number of workspaces&#8221;.</p> + +<h2 id="setting-our-keybindings">Setting Our Keybindings</h2> + +<p>Now all that is left is to mimic <code>dwm</code> keyboard shortcuts, in this case: ALT + $num for switching between workspaces and ALT + SHIFT + $num for moving windows across workspaces. These keyboard shortcuts can be altered under <strong>Settings</strong> &#62; <strong>Keyboard</strong> &#62; <strong>View and Customize Shortcuts</strong> &#62; <strong>Navigation</strong>.</p> + +<p>You&#8217;ll want to make edits to both the &#8220;Switch to workspace <em>n</em>&#8221; and &#8220;Move window to workspace <em>n</em>&#8221;. </p> + +<p>That&#8217;s it. You&#8217;re free to include even more custom keyboard shortcuts (open web browser, lock screen, hibernate, etc.) but this is a solid starting point. Enjoy tweaking GNOME!</p></description> + <link>https://btxx.org/dwm-gnome</link> + <guid isPermaLink="false">https://btxx.org/dwm-gnome</guid> + <pubDate>Thu, 02 Nov 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Dynamic Viewports with CSS</title> + <description><h1 id="dynamic-viewports-with-css">Dynamic Viewports with CSS</h1> + +<p>2023-02-08</p> + +<p>I think it&#8217;s safe to assume most web designers and developers are familiar with the standard <code>vh</code> and <code>vw</code> parameters in CSS. These parameters are used for setting an element&#8217;s height and&#47;or width, relative to the viewport (v) height (h) or width (w). For example:</p> + +<p>If I want my <code>.box</code> element to take up the entire height of a device&#8217;s screen:</p> + +<pre><code>.box { + height: 100vh; +} +</code></pre> + +<p>Or I want my <code>.box</code> element to take up the entire width of a device&#8217;s screen:</p> + +<pre><code>.box { + width: 100vw; +} +</code></pre> + +<p>These are wonderful options to have - specifically for those of us designing web applications. But there are some <em>minor</em> issues with <code>vh</code> and <code>vw</code>.</p> + +<ol> +<li>The setting does not take into account device-specific UI (status bars, toolbars, search fields etc.)</li> +<li>In some instances these will not play nice with <code>box-sizing</code> properties</li> +</ol> + +<h2 id="have-no-fear-dynamic-viewport-is-here">Have No Fear, Dynamic Viewport is Here!</h2> + +<p>Lucky for us there exists an awesome <em>new-ish</em> CSS API called dynamic viewport-percentage units: <code>dvh</code> &#38; <code>dvw</code>. They are defined as follows:</p> + +<blockquote> +<p>The dynamic viewport-percentage units (dv) are defined with respect to the dynamic viewport size: the viewport sized with dynamic consideration of any UA interfaces that are dynamically expanded and retracted. This allows authors to size content such that it can exactly fit within the viewport whether or not such interfaces are present.</p> +</blockquote> + +<p>So our examples above would translate into:</p> + +<pre><code>.box { + height: 100dvh; + width: 100dvw; +} +</code></pre> + +<h3 id="what-about-browser-support">What About Browser Support?</h3> + +<p><a href="https://caniuse.com/mdn-api_css_dvh">Can I Use Stats</a> &#47; ~67.17% coverage.</p> + +<p><strong>Note:</strong> Even though the caniuse page states that Firefox 109+ and iOS Safari 16.3 do not support <code>dvh</code>, in my experiments they do. I&#8217;m not sure what testing was done for those two browsers, so YMMV.</p> + +<p>If you want to play it safe, use dynamic viewports with standard &#8220;traditional&#8221; viewports as backup. That way you support all use cases while still taking advantage of newer CSS properties.</p></description> + <link>https://btxx.org/dv</link> + <guid isPermaLink="false">https://btxx.org/dv</guid> + <pubDate>Wed, 08 Feb 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Don't Make a Blog, Make a Brain Dump</title> + <description><h1 id="dont-make-a-blog-make-a-brain-dump">Don&#8217;t Make a Blog, Make a Brain Dump</h1> + +<p>2022-09-10</p> + +<p>Not enough people have personal blogs. This is a point brought up by many of those passionate about the &#8220;golden age&#8221; in the timeline of the modern internet. A time when websites were more like a small collection of winding side-streets and flea markets. Today, it&#8217;s all shopping malls, hostile pedestrians, and corporate buildings. People have their one or two &#8220;outlets&#8221; that make it easier for them to meet-up with friends and family. There&#8217;s no need for these people to have their &#8220;own thing&#8221;. Someone else has already built it for them. They&#8217;re become fully adjusted to their internet slums.</p> + +<p>Okay, sorry about the terrible metaphors. But you get my point. <em>Convenience breeds laziness</em>. <em>Laziness breeds mediocrity</em>.</p> + +<h2 id="whats-a-brain-dump">What&#8217;s a &#8220;Brain Dump&#8221;?</h2> + +<p>A brain dump is a better way to look at sharing your own experiences or thoughts on the web. The term &#8220;blog&#8221; has a lot of baggage connected to it, so newcomers are quickly scared away by the concept. Or even worse - they decide to only share themselves on locked-in, walled gardens<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>.</p> + +<p>Another problem arises when you finally <em>do</em> convince someone to start &#8220;blogging&#8221; online; self-doubt.</p> + +<ul> +<li>&#8220;What could I possibly have to share?&#8221;</li> +<li>&#8220;What if everyone <em>hates</em> what I post?&#8221;</li> +<li>&#8220;What if my content sucks?&#8221;</li> +</ul> + +<p>Just dump it. Who cares. It&#8217;s the internet after all, so who are you trying to impress? The point is that your sharing your own experiences that are unique to you as an individual. Posting something that you think is pointless or mundane might be extremely helpful or, at the very least, entertaining for someone else.</p> + +<p>Write up what you did over the weekend, a new recipe you tried out, review a movie&#47;book or video game you enjoyed, list step-by-step instructions on how you installed a new appliance in your house - anything! Just <em>write</em> and be part of what made the internet fun, exciting and personal again.</p> + +<p>But let me reiterate: <strong>stay away from walled gardens!</strong> Control your own space on the internet. Be the master of your own brain dump! Say &#8220;screw you&#8221; to app algorithms and <em>trending</em> bullshit. Just be you.</p> + +<p>Convinced? Awesome. Now let&#8217;s get into setting things up. I&#8217;ll break these down into two separate categories: one for those with limited web&#47;software experience, and one for those wanting a little more control.</p> + +<h3 id="no-code-solutions">No Code Solutions</h3> + +<p>Before I get into my suggested options in this &#8220;no-code&#8221; category, I would like to mention why WordPress <em>is not</em> listed here. Personally, I think WordPress gets in the way of users wanting to &#8220;just blog&#8221;. There once was an era where blogging was WP&#8217;s main focus, but that is now a time long forgotten. It tries to do too much. The back-end is a cluttered mess. Initial learning curves for security, plugins and themes is far too great for newbies. Gutenberg - dear God.</p> + +<p>That&#8217;s not even mentioning hosting costs, installation, backups, etc. My personal take - just steer clear. This option is better suited in the <em>second</em> category for those with more web experience.</p> + +<p>With that out of the way, let&#8217;s see my top selections for &#8220;no-code&#8221;:</p> + +<h4 id="blot">Blot</h4> + +<p><a href="https://blot.im/">Blot</a> has been around for quite a while. You simply post to a third-party service like Dropbox, Google Drive or a <code>git</code> repo and Blot takes care of the rest.</p> + +<ul> +<li>$4&#47;month (includes custom domain use, hosting &#38; support)</li> +<li>Easy sign up</li> +<li>Multiple themes to choose from</li> +</ul> + +<h4 id="bear-blog">Bear Blog</h4> + +<p><a href="https://bearblog.dev/">Bear Blog</a> is an excellent platform that focuses on content and not much else.</p> + +<ul> +<li>Free ($25&#47;year for extras)</li> +<li>Easy sign up</li> +<li>No trackers, no javascript, no ads</li> +</ul> + +<h4 id="mataroa-blog">Mataroa Blog</h4> + +<p><a href="https://mataroa.blog/">Mataroa</a> follows in the same vein as Bear Blog, a simple blogging platform focused on <em>writing</em>.</p> + +<ul> +<li>Free (with optional $9&#47;year for premium features)</li> +<li>No ads, no tracking</li> +<li>Open source</li> +</ul> + +<h4 id="write.as">Write.as</h4> + +<p><a href="https://write.as/">Write.as</a> is another good option for those looking to just get words down and shared on the internet.</p> + +<ul> +<li>Free with optional paid tiers (custom domains, themes etc.)</li> +<li>Option to self host via <a href="https://writefreely.org/">Write Freely</a></li> +</ul> + +<h3 id="build-your-own">Build Your Own</h3> + +<p>If you&#8217;re deep into this section of the post, I think it&#8217;s safe to assume your technical level is fairly <em>decent</em>. So, I won&#8217;t be into great detail with the options below:</p> + +<h4 id="sourcehut-pages">SourceHut Pages</h4> + +<p>This very website you&#8217;re reading is built and run off of <a href="https://srht.site/">SourceHut Pages</a>. I highly recommend the service.</p> + +<ul> +<li>$3+&#47;month (depending on what you <em>choose</em> to pay)</li> +<li>No javascript, no trackers</li> +<li>Customizable build settings</li> +<li>Support open source software!</li> +</ul> + +<p><strong>Sidenote:</strong> If you&#8217;re interested in setting up a SSG (such as Jekyll or Hugo) through SourceHut, feel free to <a href="https://git.sr.ht/~bt/bt.ht">fork this very website as a starting point</a>. I also wrote up how to publish&#47;build a Jekyll site on SourceHut in a <a href="/srht">separate post</a> if you wish to see all the nitty-gritty details.</p> + +<h4 id="wordpress">WordPress</h4> + +<p>As I mentioned above, I find this platform can be a little overkill for a simple &#8220;blog&#8221; (or in this case, a brain dump). I&#8217;m aware that many devs might already be familiar with WP, so it makes sense to include it here.</p> + +<ul> +<li>Free options (custom domains, premium features will require some form of paid hosting)</li> +<li>Room for growth with extensive plugins &#47; themes</li> +<li>Huge amount of documentation and resources</li> +</ul> + +<h4 id="static-html-and-a-web-host">Static HTML and a Web Host</h4> + +<p>Why not, right? Using a service like <a href="https://www.nearlyfreespeech.net/">NearlyFreeSpeech</a> or spinning up a cheap VPS with <a href="https://www.digitalocean.com/">DigitalOcean</a> and then dropping static HTML files on your server is pretty straightforward. You don&#8217;t need any fancy scripts or syncing tools - an FTP client and a text editor is more than enough!</p> + +<ul> +<li>$2-5&#47;month (depending on service provider)</li> +<li>&#8220;Drag-and-drop&#8221; workflow</li> +<li>Easily portable to other hosting services in the future</li> +</ul> + +<h4 id="github-pages">GitHub Pages</h4> + +<p>Since GitHub is used by almost every developer across the globe, it makes sense to mention their free website hosting option via <a href="https://pages.github.com/">GitHub Pages</a>. I personally <em>don&#8217;t</em> advise newcomers to use this platform, but you&#8217;re free to do as you like!</p> + +<ul> +<li>&#8220;Free&#8221;</li> +<li>Fairly limited (no static site plugin support)</li> +</ul> + +<h2 id="wrapping-up">Wrapping Up</h2> + +<p>There are many services in both categories above that I did not include. That&#8217;s okay. I didn&#8217;t exclude them because I <em>dislike</em> them but instead focused on what <em>I believe</em> to be the easiest solutions for both camps (techies and non-techies).</p> + +<p>At the end of the day - who cares what you choose. Just choose <em>something</em>. Stop looking at it as &#8220;blogging&#8221; or trying to &#8220;capture an audience&#8221;. Dump your brain&#8217;s thoughts out into the internet, on your <em>own piece</em> of the internet, and help make the world wide web as fun as it used to be!</p> + +<div class="footnotes"> +<hr/> +<ol> + +<li id="fn1"> +<p>Facebook, Twitter, Reddit, Instagram, etc. These should be completely avoided for the sake of both your health and your internet freedom.&#160;<a href="#fnref1" rev="footnote">&#8617;</a></p> +</li> + +</ol> +</div></description> + <link>https://btxx.org/dump</link> + <guid isPermaLink="false">https://btxx.org/dump</guid> + <pubDate>Sat, 10 Sep 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Two Weeks with the DuckDuckGo Browser</title> + <description><h1 id="two-weeks-with-the-duckduckgo-browser">Two Weeks with the DuckDuckGo Browser</h1> + +<p>2022-05-17</p> + +<p>After using the beta apps for the new DuckDuckGo browser for both macOS and iOS, I have returned to Safari.</p> + +<p>This switch back doesn&#8217;t mean that these browsers are <em>bad</em> by any means. Both browsers are decently fine for casual users. Unfortunately, they aren&#8217;t ready for prime time &#8220;power&#8221; users. I&#8217;m happy to see another company jump into the browser market (and one that is using WebKit instead of another Chromium clone) but for my day-to-day needs it doesn&#8217;t cut it.</p> + +<p>Let&#8217;s break things down:</p> + +<h2 id="the-good">The Good</h2> + +<ul> +<li>Clean UI with a mix between Chrome and Safari</li> +<li>The &#8220;Leave No Trace&#8221; fire button to purge data, cache and cookies</li> +<li>Feels snappy and responsive</li> +<li>Based on WebKit NOT Chromium</li> +</ul> + +<h2 id="the-not-so-good">The Not So Good</h2> + +<ul> +<li>No sync options between systems (that I could find)</li> +<li>No extension support</li> +</ul> + +<p>Now you might look at this list and notice there are more listed points set under the <code>Good</code> category. Keep in mind that quantity does not always equal quality. The main negative of not allowing user extensions cannot be overstated. I think that when building a browser in this $CURRENT_YEAR it&#8217;s imperative to allow for total user control. Don&#8217;t wall things off. Don&#8217;t <em>assume</em> you know best for your users.</p> + +<p>This is a huge issue since a good majority of friends, family and coworkers I talk with use more elaborate ad-blocking. One of the first things I tested with the DuckDuckGo browser on desktop was to watch a YouTube video. I was immediately slammed with multiple ads - both in video form and as banner pop-ups.</p> + +<p>Overlooks like this shouldn&#8217;t happen. This is UX 101.</p> + +<p>Another obvious overlook is history and account syncing across devices. Unless I missed something obvious, I could not figure out how to seamlessly sync content from my macOS browser to my iOS one. Again, this function greatly improves the experience of jumping between desktop and mobile clients. Don&#8217;t make me think![^1]</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>I appreciate the effort from the DuckDuckGo team. I&#8217;m certain this project will get better over time, as they are listening closely to user feedback during the beta. With future improvements I could see myself giving things a second chance.</p> + +<p>As it stands now, this feels like something that should be an extension[^2], not a standalone browser.</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li><a href="https://sensible.com/dont-make-me-think/">https:&#47;&#47;sensible.com&#47;dont-make-me-think&#47;</a></li> +<li>Technically this already exists as a Safari extension <a href="https://apps.apple.com/us/app/duckduckgo-privacy-essentials/id1482920575?mt=12">here</a></li> +</ol></description> + <link>https://btxx.org/duckduckno</link> + <guid isPermaLink="false">https://btxx.org/duckduckno</guid> + <pubDate>Tue, 17 May 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Designers Need Thicker Skin</title> + <description><h1 id="designers-need-thicker-skin">Designers Need Thicker Skin</h1> + +<p>2017-07-10</p> + +<p>I&#8217;m not normally one to comment or even really care about &#8220;drama&#8221; within our design industry. Opinions are just that and should just be consumed at face value. But this week I was moderately annoyed with a subset of designers in design-land.</p> + +<h3 id="critique-the-critics">Critique the critics</h3> + +<p>Designer&#47;design critic Eli Schiff tweeted his thoughts about the newly released promo video from Framer showcasing their new gradient feature. See the initial tweet below:</p> + +<p>Let me begin by saying my views on this comment: I don&#8217;t care. I honestly don’t feel strongly one way or the other about them making a video promo for gradients. Could it have just been a simple text tweet? Sure. Does it really matter that they decided to make a video for it? Not at all.</p> + +<p>But this isn’t the problem.</p> + +<p>Other designers took to Twitter and started attacking Eli, not even as a design critic but as a person. This was ugly to see. What happened to civil discussion and giving the other side a chance to say their piece? Calling to &#8220;ban him&#8221; from sites such as DesignerNews or suggesting to unfollow him on Twitter is unbelievably childish - in an industry that we tote as &#8220;accepting of everyone&#8221; no less.</p> + +<p>That&#8217;s all I&#8217;m going to say because I don’t want to spend too much time on this foolishness, but honestly designers - get some thicker skin.</p> + +<p>Yeesh.</p></description> + <link>https://btxx.org/dts</link> + <guid isPermaLink="false">https://btxx.org/dts</guid> + <pubDate>Mon, 10 Jul 2017 00:00:00 +0000</pubDate> + </item> + <item> + <title>Disabling Comments in WordPress</title> + <description><h1 id="disabling-comments-in-wordpress">Disabling Comments in WordPress</h1> + +<p>2020-12-28</p> + +<p><em>I seem to come across a decent amount of clients</em> and users online that have a difficult time knowing how to disable comments for both future <em>and</em> previous blog posts. It isn’t the easiest for both use cases, so let’s break it down.</p> + +<h2 id="back-to-the-future">Back to the future</h2> + +<p>Disabling comments on all <em>future</em> blog posts is fairly straightforward:</p> + +<h2 id="but-what-about-old-posts">But what about old posts?</h2> + +<p>Have no fear - “Bulk Actions” are here to save the day! In order to retroactively disable comments on older posts, do the following:</p> + +<p>I hope this article saves others any headaches in the future. WordPress itself could certainly make this more streamlined, but for now what we have works. Happy (not) commenting!</p></description> + <link>https://btxx.org/disabling-comments-in-wordpress</link> + <guid isPermaLink="false">https://btxx.org/disabling-comments-in-wordpress</guid> + <pubDate>Mon, 28 Dec 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Unsolicited Design Review - Dropbox</title> + <description><h1 id="unsolicited-design-review---dropbox">Unsolicited Design Review - Dropbox</h1> + +<p>2017-10-10</p> + +<p>Earlier last week the design team at Dropbox unveiled their new branding &#47; design system for the company as a whole. If you haven&#8217;t seen the updated design yet, you can do so here: dropbox.design (Take your time, I can wait).</p> + +<p><img src="/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp" alt="Dropbox Logo" /></p> + +<p>I won&#8217;t mince words when I say I believe this is a huge step backwards for their brand. Not only is it uninspired and broken, but it also shows how our industry is plagued with a need to redesign things just for the sake of redesigning them.</p> + +<p>So without anymore fluff - let&#8217;s get into it. Please leave your bias at the door.</p> + +<h2 id="purpose">Purpose</h2> + +<p>It&#8217;s good to try and understand the motive or problem that a company is trying to solve when redesigning something as fundamental as core branding, but this is where the first red flag appears for Dropbox. There is no real problem to solve.</p> + +<p>On the marketing site promoting the new design system, the Dropbox team doesn&#8217;t mention a single problem that this branding redesign is meant to fix. Were users confused by the previous system? Is there data showing large drop-off and a lack of conversion directly connected with the design system itself? All they state is they needed a change with zero reasoning as to why.</p> + +<p>As I stated at the beginning of this review - it&#8217;s a redesign for the sake of a redesign. Sometimes this can be acceptable if done correctly, but this is not the case for Dropbox.</p> + +<p>Let&#8217;s stop right there. &#8220;A place to store your files&#8221; is literally 99% of what Dropbox does. I get that they want to be involved in more than that but Dropbox is a cloud storage service. Why is there a desperate need to shift away from that?</p> + +<p>There isn&#8217;t much else to speak of in terms of &#8216;purpose&#8217; regarding the redesign since there doesn&#8217;t seem to be one. Let&#8217;s move on.</p> + +<h2 id="design-principles">Design Principles</h2> + +<p>I hate to be that guy who bases design on a written list of principles, but when it works it works. Dieter Rams states it best:</p> + +<ol> +<li>Good design is innovative</li> +<li>Good design makes a product useful</li> +<li>Good design is aesthetic</li> +<li>Good design makes a product understandable</li> +<li>Good design is unobtrusive</li> +<li>Good design is honest</li> +<li>Good design is long-lasting</li> +<li>Good design is thorough down to the last detail</li> +<li>Good design is environmentally friendly</li> +<li>Good design is as little design as possible</li> +</ol> + +<p>Then maybe your design system should get out of the way. To me, this seems like you want your design to take center-stage over the user&#8217;s content.</p> + +<p>Remember: a great design system should go completely unnoticed.</p> + +<h2 id="accessibility">Accessibility</h2> + +<p>Any persons with visual impairments need not apply. This design system is not built for you - seek shelter elsewhere.</p> + +<p>The typeface they have chosen looks terrible at any view-port size and readability takes a backseat. I can&#8217;t help but feel this falls into the &#8220;let&#8217;s be trendy&#8221; category and ends up sacrificing almost all good usability practices for gimmicky type.</p> + +<p>Irony at it&#8217;s finest. &#8220;Our users tell us that they hate being distracted and overwhelmed, so we&#8217;ve decided to use headache inducing color palettes, crude illustrations, a barely legible typeface, and some of the most visually loud photography throughout our system&#8221;. I hate coming off as mean-spirited - but this is some elaborate joke, right?</p> + +<p>After running it through a color contrast accessibility checker:</p> + +<p>Next we have the child-like &#8216;scribble&#8217; illustrations. Now don&#8217;t get me wrong, I love seeing different illustration styles and I actively use &#8216;sketch &#47; scribble&#8217; artwork myself, but I don&#8217;t believe this is the best fit for a brand like Dropbox. These cartoon visuals conflict with the business enterprise service Dropbox should be trying to convey.</p> + +<p>Another issue with these illustrations is their usage. Look at the image below and ask yourself if you would correlate it with an error page if no accompanying text was present.</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>I could go into even deeper analysis (including the oversimplification of their box logo, etc.) but I believe I&#8217;ve spent enough time defending my initial reaction as well as my thoughts after a week of soak time. In my opinion this redesign was completely unnecessary. I think this was a problem of too many designers with too much time without a proper project to channel all that talent.</p> + +<p>Unfortunately because they decided to just follow the current trend and design with a lack of purpose, I see Dropbox launching another redesign within the next year once this current design fad dies. My only hope is that the next brand system sets out to solve an actual problem, instead of just trying to be trendy.</p> + +<h3 id="personal-remarks">Personal Remarks</h3> + +<p>I love Dropbox as a product and use it every single day. I&#8217;m inspired by many of the designers who work there and this article is by no means a personal attack on the company or it&#8217;s employees. This is merely a blunt and honest review of their new brand design system.</p></description> + <link>https://btxx.org/design-review-dropbox</link> + <guid isPermaLink="false">https://btxx.org/design-review-dropbox</guid> + <pubDate>Tue, 10 Oct 2017 00:00:00 +0000</pubDate> + </item> + <item> + <title>Modern Improvements for Default Browser Styles</title> + <description><h1 id="modern-improvements-for-default-browser-styles">Modern Improvements for Default Browser Styles</h1> + +<p>2021-11-09</p> + +<p>This website <em>almost</em> exclusively uses the browser&#8217;s (whichever one that might be) default styling to render it&#8217;s HTML. I firmly believe, and have <a href="/css-js-mistake/">stated in a previous post</a>, that the default HTML styling across all browsers is a thing of beauty. &#8220;Consistent and boring&#8221; is how I tend to refer to default browser styles - and I mean that in a <em>good way</em>.</p> + +<p>But that doesn&#8217;t mean some minor, modern improvements couldn&#8217;t be made&#8230;</p> + +<h2 id="boosting-margins-and-increasing-font-size">Boosting Margins and Increasing Font Size</h2> + +<p>A little extra breathing room for a website&#8217;s content never hurts. Browser defaults set the inner content too close to the main window borders, creating mild eye strain to focus on the far edges of the screen when reading. Pair this with a typeface set too small and you&#8217;ve got a recipe for disaster (in terms of user experience and accessibility). Luckily for us, adding two basic CSS properties fixes all of our readability woes. All that is required is a simple boost to the existing <code>margin</code> property set on the <code>body</code> element (I personally lean towards a very specific <code>1.5em</code>) and overriding the default <code>font-size</code> to <code>18px</code>[^1]:</p> + +<pre><code>body { + font-size:18px; + margin:1.5em; +} +</code></pre> + +<p>There is one <em>small</em> caveat with setting the <code>font-size</code> across the whole <code>body</code> element: code elements set in <code>monospace</code>. They will stand out larger than the other fonts found in the document (due to variations in different typeface heights, spacing etc.) so we will need to target these elements specifically:</p> + +<pre><code>code { + font-size:14px; + &#47;* Word wrap is optional if you plan to have long inline code snippets *&#47; + word-wrap:break-word; +} +</code></pre> + +<h2 id="code-pre-tags">Code &#38; Pre Tags</h2> + +<p>Since we&#8217;ve mentioned <code>code</code> elements, let&#8217;s fix those as well. The existing styling for inline code snippets and larger pre-formatted text sections leave a lot to be desired. They don&#8217;t provide any means to wrap their inner content or make use of <code>overflow</code> properties to avoid vertically scrolling on smaller device screens. Sharing code examples becomes quite a pain when your webpage&#8217;s flow and layout is broken just by including them. Browsers could fix this easily enough by defaulting to:</p> + +<pre><code>pre { + overflow:auto; +} +</code></pre> + +<h2 id="basic-dark-mode-support">Basic Dark Mode Support</h2> + +<p>Barebones styling in current web browsers have no sane defaults[^2] for system-level dark mode. What a huge letdown. This is where the most &#8220;drastic&#8221; changes will be implemented with our browser default updates. We will need the browser to change the main <code>background-color</code>, along with resetting both the text and anchor link <code>color</code> for improved accessibility. Browser defaults for anchor link color in &#8220;light mode&#8221; are blue&#47;purple - so I&#8217;ve opted towards using gold, orange and orangered in dark mode respectively:</p> + +<pre><code>&#47;* Dark mode *&#47; +@media (prefers-color-scheme: dark) { + @media not print { + html {background:#0e0e0e;color:#e1e1e1; } + a {color: gold;} + a:visited {color: orange;} + a:hover,a:focus{color: orangered;} + } +} +</code></pre> + +<p>That is probably the most streamlined dark mode on the web&#8230;</p> + +<h2 id="the-reading-length-debate">The &#8220;Reading Length&#8221; Debate</h2> + +<p>Proper reading length tends to be quite the point of contention on the web. Hell, even I&#8217;ve <a href="/character-unit/">written about it quite a bit</a> in the past (and many of my side projects follow that standard). The main problem I have with this is lack of <em>user control</em>. I don&#8217;t think the browser (or designers for that matter) should determine the best reading length for my own personal reading preferences. UX testing and group feedback has (somewhat) agreed upon 66-75 characters per line to be the most optimal reading experience. That is good to know. I <em>still</em> believe it should come down to user preference.</p> + +<p>Do you want to know an incredible feature built into browsers? <em>Window resizing</em>. Abandon the idea that you &#8220;know better&#8221; than your users and give them the power to adjust as they see fit. The web was meant to be personal and flexible.</p> + +<h2 id="conclusion">Conclusion</h2> + +<p>There isn&#8217;t much else to say, really. I think these tiny tweaks would greatly improve the default browser experience and maybe even convince others to just <em>use</em> these defaults instead of falling down the CSS rabbit hole (as fun as that might be sometimes). For easier convenience, I&#8217;ll leave the full set of CSS changes below:</p> + +<pre><code>body { + font-size:18px; + margin:1.5em; +} +code { + font-size:14px; +} +pre { + overflow:auto; +} +@media (prefers-color-scheme: dark) { + @media not print { + html {background:#0e0e0e;color:#e1e1e1; } + a {color: gold;} + a:visited {color: orange;} + a:hover,a:focus{color: orangered;} + } +} +</code></pre> + +<h2 id="refs">Refs</h2> + +<ol> +<li><code>18px</code> seems to be the perfect sweet spot between &#8220;almost too large, yet not small enough to strain my eyes&#8221;</li> +<li>At the time of this article&#8217;s publish date</li> +</ol></description> + <link>https://btxx.org/default-html-style-updates</link> + <guid isPermaLink="false">https://btxx.org/default-html-style-updates</guid> + <pubDate>Tue, 09 Nov 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Very Basic Form Styling</title> + <description><h1 id="very-basic-form-styling">Very Basic Form Styling</h1> + +<p>2019-11-13</p> + +<p>Web forms can be great - I&#8217;m borderline obsessed with them. I love tinkering with pre-existing logins &#47; sign up pages and I&#8217;ve also open sourced a minimal CSS form-styling plugin: <a href="https://normform.netlify.com/">Normform</a>. While simple CSS plugins like these can be helpful, I often feel like we are over-engineering our web forms. I&#8217;m certainly guilty of it.</p> + +<p>That&#8217;s not to say developers should just use default browser styling for their forms and call it a day - that is far from ideal. Just pull-back on adding so much styling garbage to the forms themselves.</p> + +<p>Let&#8217;s check out an embedded demo below to see what some bare-bones form styling could look like:</p> + +<p><a href="https://codepen.io/bradleytaunt/pen/oNwzvMa">Live CodePen Example</a></p> + +<p>This form isn&#8217;t going to win any design awards or blow anyone away with its creativity. That&#8217;s okay - because it gets the job done. Users understand it&#8217;s a form and items are broken down into digestible chunks. Mission accomplished, right?</p> + +<h2 id="breaking-the-form-down">Breaking the form down</h2> + +<p>Let&#8217;s take a look at the HTML of the entire form:</p> + +<pre><code>&#60;form action=""&#62; + &#60;fieldset&#62; + &#60;legend&#62;Personal Details&#60;&#47;legend&#62; + &#60;label for="username"&#62;Desired Username:&#60;&#47;label&#62; + &#60;input type="text" id="username"&#62; + &#60;label for="name"&#62;Full Name:&#60;&#47;label&#62; + &#60;input type="text" id="name"&#62; + &#60;label for="email"&#62;Email Address:&#60;&#47;label&#62; + &#60;input type="email" id="email"&#62; + &#60;label for="date"&#62;Date of Birth:&#60;&#47;label&#62; + &#60;input type="date" id="date"&#62; + &#60;&#47;fieldset&#62; + &#60;br&#62; + &#60;fieldset&#62; + &#60;legend&#62;Contact Details&#60;&#47;legend&#62; + &#60;label for="address"&#62;Home Address:&#60;&#47;label&#62; + &#60;input type="text" id="address"&#62; + &#60;label for="postal"&#62;Postal Code:&#60;&#47;label&#62; + &#60;input type="text" id="postal"&#62; + &#60;label for="phone"&#62;Phone Number:&#60;&#47;label&#62; + &#60;input type="tel" id="phone"&#62; + &#60;&#47;fieldset&#62; + &#60;br&#62; + &#60;fieldset&#62; + &#60;legend&#62;Select an Option&#60;&#47;legend&#62; + &#60;label for="radio-1"&#62; + &#60;input type="radio" id="radio-1" name="radio-choice"&#62; + The option is pretty nice + &#60;&#47;label&#62; + &#60;label for="radio-2"&#62; + &#60;input type="radio" id="radio-2" name="radio-choice"&#62; + This option is a little bit better + &#60;&#47;label&#62; + &#60;label for="radio-3"&#62; + &#60;input type="radio" id="radio-3" name="radio-choice"&#62; + This option is the best + &#60;&#47;label&#62; + &#60;&#47;fieldset&#62; + &#60;br&#62; + &#60;fieldset&#62; + &#60;legend&#62;Notifications&#60;&#47;legend&#62; + &#60;label for="checkbox-1"&#62; + &#60;input type="checkbox" id="checkbox-1"&#62; + I would like to receive email notifications + &#60;&#47;label&#62; + &#60;label for="checkbox-2"&#62; + &#60;input type="checkbox" id="checkbox-2"&#62; + I would like to subscribe to the weekly newsletter + &#60;&#47;label&#62; + &#60;&#47;fieldset&#62; + &#60;br&#62; + &#60;input type="reset" value="Reset"&#62; + &#60;input type="submit" value="Submit"&#62; +&#60;&#47;form&#62; +</code></pre> + +<p>Notice the <code>fieldset</code> and <code>legend</code> elements? I bet you don&#8217;t see or hear about those HTML items very often. By default, <code>fieldset</code> allows sibling or related inputs to be semantically grouped together. The <code>legend</code> elements give the user great visual cues about which items are grouped together, helping to focus on each section individually as they complete the form. Use these grouping elements as much as possible (when it makes sense of course) for a better guided experience for your users. </p> + +<p>Avoid making your own custom sections and instead use these existing HTML semantics.</p> + +<h2 id="almost-no-css-at-all">Almost no CSS at all</h2> + +<p>Now it&#8217;s time to style this form with only 6 property declarations:</p> + +<pre><code>form label { + display: block; +} +form input { + display: inline-block; + margin-bottom: 10px; + padding: 10px; + width: 100%; +} +form input[type="radio"], +form input[type="checkbox"], +form input[type="reset"], +form input[type="submit"] { + width: auto; +} +</code></pre> + +<p>Of course, you can always add minor adjustments (like in my demo example above)</p> + +<ul> +<li>Legend typeface and sizing</li> +<li>Form and fieldset background colors</li> +<li>Extra margin and padding</li> +<li>Custom reset &#47; submit buttons</li> +</ul> + +<p>But the main point of this post is to showcase how little CSS is needed to implement decent web forms - so any further improvements are up to you, dear reader. </p> + +<p>Just try not to reinvent the wheel.</p> + +<h2 id="final-rant---dont-ignore-the-reset">Final rant - don&#8217;t ignore the reset</h2> + +<p>A lot of &#8220;modern&#8221; web forms have moved away from including the reset input on their forms, which I think is fairly short-sighted. Resetting all form fields might be a smaller edge case, but it is certainly a better option than relying on the user to refresh or in some cases, individually deleting each input. Yikes.</p> + +<p>Happy form building!</p></description> + <link>https://btxx.org/default-brower-forms</link> + <guid isPermaLink="false">https://btxx.org/default-brower-forms</guid> + <pubDate>Wed, 13 Nov 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>The Death of Personality</title> + <description><h1 id="the-death-of-personality">The Death of Personality</h1> + +<p>2017-11-01</p> + +<p>On September 18, 2013 truly original product design (everything from icon and app design to UI and experience interactions) began it&#8217;s fast decline into the abyss with the release of Apple&#8217;s iOS 7 update. It was called revolutionary. It was seen as a &#8216;new age&#8217; of design. I think it was a big mistake.</p> + +<p><img src="/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp" alt="Flat design tombstone" /></p> + +<h3 id="stepping-backwards">Stepping backwards</h3> + +<p>Let me start off by saying I understand where they were trying to take mobile app design as a whole. &#8220;Less is more&#8221;, &#8220;cleaner UI to let the content be the focus&#8221;, &#8220;more touch based interactions&#8221;. The problem is that they cranked the dial too far in the other direction.</p> + +<p>Because of this, a large movement was created based around the idea that skeuomorphic design is garbage, flat design is the future. And everyone drank the kool-aid without a single objection. +I&#8217;m using this ironically.</p> + +<h3 id="icons-with-no-identity">Icons with no identity</h3> + +<p>Do you remember Instagram&#8217;s original app icon and UI? Do you remember how everyone initially praised it? Show those old designs to the same designers who loved it only a few years ago, and they will now laugh at how &#8220;bad&#8221; it is.</p> + +<p>Unfortunately the same can be said for Apple&#8217;s system icons across both iOS and macOS.</p> + +<p>I believe Apple took the concept of a &#8216;consistent&#8217; design system across their iconography too literally. All the system icons should compliment one another, but they shouldn&#8217;t lose their own individual look and feel.</p> + +<h3 id="lackluster-ui">Lackluster UI</h3> + +<p>The once inspiring and hierarchically consistent interface of both iOS and macOS was also quickly swatted away. In it&#8217;s place we as users saw the removal of depth, initial visual cues as to what was interactive and what was static, and sadly even the overall color was muted.</p> + +<h3 id="impact-on-the-web">Impact on the web</h3> + +<p>This may not have been a bad thing if it was self-contained to Apple itself. The problem is that Apple has such a huge influence on the design industry - although that is starting to diminish, due to disasters like the iPhone X - that everyone starts to mimic and copy their style. This includes designers of sites and progressive web apps.</p> + +<p>With the evolution of websites morphing into progressive web apps, designers have felt the need to start implementing this bland style for their design systems.</p> + +<p>What we got in return:</p> + +<ul> +<li>washed out colors</li> +<li>zero gradients for depth</li> +<li>the removal of all drop shadows (in meaningful ways that is)</li> +<li>the same generic Helvetica-based typefaces</li> +<li>the absence of hover states on interactive elements</li> +<li>a lack of any proper information density</li> +<li>an overkill of whitespace</li> +<li>one dimensional buttons (you know, the thing you want the user to interact with)</li> +<li>a complete disregard for original design not based off every other popular product</li> +</ul> + +<h3 id="breaking-free-of-the-modern-era">Breaking free of the &#8216;modern era&#8217;</h3> + +<p>Thankfully, there are still a few good designers who continue to create original and inspiring work not based solely on current trends.</p> + +<p>Flexibits recently launched a new contact app for macOS called Cardhop. While the UI still shifts a little too far to the &#8216;flat trend&#8217; for my liking, they thankfully hired the very talented David Lanham to design the beautiful application icon.</p> + +<p>This is where visual design shines. Icon designs like Cardhop&#8217;s are what allow individual applications to stand out in the dock or mobile home-screen among all the others. So how is that not UX design?</p> + +<p>The current trendy thought process from designers that &#8220;visual design doesn&#8217;t involve UX design&#8221; is garbage. Neither are mutually exclusive and I think anyone who believes so is being incredibly short-sighted.</p> + +<p>If you&#8217;re a designer, please stop riding trends and make your work visually beautiful. That doesn&#8217;t mean you need to sacrifice usability or function, but just put more love and confidence into your profession. Companies like Apple and Google don&#8217;t control how everyone else&#8217;s apps and sites should look, and based on their current design decisions - they shouldn&#8217;t.</p></description> + <link>https://btxx.org/death-of-personality</link> + <guid isPermaLink="false">https://btxx.org/death-of-personality</guid> + <pubDate>Wed, 01 Nov 2017 00:00:00 +0000</pubDate> + </item> + <item> + <title>Cut Your Forms in Half</title> + <description><h1 id="cut-your-forms-in-half">Cut Your Forms in Half</h1> + +<p>2019-05-09</p> + +<p><em>Building web forms can sometimes feel like a boring or daunting task</em>. Don&#8217;t pass this dread on to your users - rip out as many of your form fields as possible.</p> + +<p>Web forms tend to get a bad rep, mainly because so many horrible design choices are made without the user experience set at the forefront. Often times clients demand that they <strong>need</strong> those twenty input fields or else how will they collect critical information from their users? Normally when I&#8217;m approached with such a statement I simply ask them:</p> + +<blockquote> +<p>&#8220;How many form fields would you be willing to fill out for an emergency situation?&#8221;</p> +</blockquote> + +<p>&#8220;My form isn&#8217;t for emergencies though&#8221;, they might reply. In that case ask them why they feel it acceptable to waste their users&#8217; time just because it isn&#8217;t urgent. Time is valuable.</p> + +<h2 id="fixing-a-form-in-the-wild">Fixing a form in the wild</h2> + +<p>Let&#8217;s use a real-world form off the <a href="https://www.greatwestlife.com">Great West Life Insurance</a> website as an example (left is original, right is updated):</p> + +<h3 id="breaking-things-down">Breaking things down</h3> + +<p>So what exactly have we changed?</p> + +<ul> +<li>Combined first and last name fields into a single input</li> +<li>Removed the overkill &#8220;retype&#8221; email &#38; password field (with the optional <code>show password</code> this becomes redundant)</li> +<li>Minor position changes for optional subscription sign up and input field descriptions</li> +<li>Removed <code>recovery email</code> + +<ul> +<li>This is something that should be prompted to the user after successful registration - don&#8217;t bog them down before they even sign up</li> +</ul></li> +</ul> + +<h2 id="helpful-micro-improvements">Helpful Micro improvements</h2> + +<p>You don&#8217;t need to be extreme when gutting form fields - just be practical.</p> + +<ul> +<li>Don&#8217;t use &#8220;first&#8221; and &#8220;last&#8221; names as separate inputs, instead use something like &#8220;Full Name&#8221;</li> +<li>Make complex questions use preset answers via <code>checkbox</code> or <code>radio</code> inputs</li> +<li>Avoid <code>select</code> items whenever possible (these are clunky and most times unnecessary)</li> +<li>Include easy to understand, real-time error prompts</li> +</ul> + +<h2 id="further-reading">Further reading</h2> + +<ul> +<li>Great place to deep-dive into UX form design: <a href="https://uxmovement.com/category/forms/">UX Movement</a></li> +</ul></description> + <link>https://btxx.org/cut-your-forms-in-half</link> + <guid isPermaLink="false">https://btxx.org/cut-your-forms-in-half</guid> + <pubDate>Thu, 09 May 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>CSS Value: `currentColor`</title> + <description><h1 id="css-value-">CSS Value: <code>currentColor</code></h1> + +<p>2019-04-13</p> + +<p><em>There are a large number of nuanced and mostly unheard of</em> CSS value types, but today we are going to focus on <code>currentColor</code>. So what is the <code>currentColor</code> value type anyway?</p> + +<blockquote> +<p>The currentColor value type will apply the existing color value to other properties like background-color, etc.</p> +</blockquote> + +<h2 id="see-it-in-action">See it in action</h2> + +<p>Let&#8217;s assume with have a single div with the following properties:</p> + +<pre><code>div { + color: dodgerblue; +} +</code></pre> + +<p>If we wanted to use that same color for other properties on elements inside that initial <code>div</code>, it&#8217;s simple - we just need to call <code>currentColor</code> like so:</p> + +<pre><code>div { + color: dodgerblue; +} + +div header { + background-color: currentColor; +} + +div a { + border-bottom: 1px solid currentColor; +} +</code></pre> + +<p><strong>Sidenote</strong>: If you re-declare the default <code>color</code> property further along in your CSS, the <code>currentColor</code> value will update according to the last color set.</p> + +<p>And that&#8217;s it. Best of all, this value type is supported across all major browsers!</p></description> + <link>https://btxx.org/current-color</link> + <guid isPermaLink="false">https://btxx.org/current-color</guid> + <pubDate>Sat, 13 Apr 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>CSS Video Backgrounds</title> + <description><h1 id="css-video-backgrounds">CSS Video Backgrounds</h1> + +<p>2018-04-16</p> + +<p>With the release of Safari 11.1 on macOS and Safari on iOS 11.3, developers now have the ability to support background videos (mp4 support only - at the time of this article) with pure CSS.</p> + +<p>Example:</p> + +<pre><code>.video-background { + background-image: url(&#39;path-to-video.mp4); +} +</code></pre> + +<h2 id="see-it-in-action">See it in action</h2> + +<p>Check out the very basic CodePen I created below to see it live (make sure you view it in latest Safari or else you won&#8217;t see anything :P)</p> + +<p>CSS Video Background (Safari Only)</p> + +<p>You can read up on all the new features implemented in 11.1 Safari here:</p> + +<p><a href="https://webkit.org/blog/8216/new-webkit-features-in-safari-11-1/">New WebKit Features in Safari 11.1</a></p></description> + <link>https://btxx.org/css-video-backgrounds</link> + <guid isPermaLink="false">https://btxx.org/css-video-backgrounds</guid> + <pubDate>Mon, 16 Apr 2018 00:00:00 +0000</pubDate> + </item> + <item> + <title>CSS Variables</title> + <description><h1 id="css-variables">CSS Variables</h1> + +<p>2018-03-24</p> + +<p>The CSS language is becoming even more awesome and powerful everyday. In this quick article I&#8217;d like to focus specifically on the &#8220;new&#8221; CSS variable function that you can start using in your projects <em>right now</em>.</p> + +<h3 id="getting-started-is-easy">Getting started is easy</h3> + +<p>Let&#8217;s just jump right in - this is how you create variables in vanilla CSS:</p> + +<pre><code>:root { + --base-color: #e0e0e0; + --text-color: #111; +} +</code></pre> + +<p>We are using the <code>:root</code> selector at the very top of our CSS file in order to call these variables into any elements in the rest of our document. This is normally the safest way to include variables.</p> + +<p>As for the variables themselves, you declare that they are variables using the <code>--</code> tags, followed by the variable&#8217;s name and it&#8217;s property. Pretty simple stuff, right?</p> + +<p>Now let&#8217;s use those variables:</p> + +<pre><code>.header { + border: 1px solid var(--base-color); +} + +.main-container { + background-color: var(--base-color); + color: var(--text-color); +} +</code></pre> + +<p>That&#8217;s it! It&#8217;s also good to know that CSS variables have pretty decent <a href="https://caniuse.com/#feat=css-variables">browser support</a> (who likes IE11 anyway).</p> + +<h3 id="why-not-just-use-a-preprocessor">Why not just use a preprocessor?</h3> + +<p>I&#8217;m a pretty big fan of Sass and Stylus, but sometimes it&#8217;s refreshing to just use vanilla CSS for certain projects. Most preprocessors have had the ability to use variables and mixins for a while, but I prefer to avoid build scripts when not absolutely necessary.</p> + +<p>Get out there and have fun with some variables!</p></description> + <link>https://btxx.org/css-variables</link> + <guid isPermaLink="false">https://btxx.org/css-variables</guid> + <pubDate>Sat, 24 Mar 2018 00:00:00 +0000</pubDate> + </item> + <item> + <title>CSS Slope Graphs</title> + <description><h1 id="css-slope-graphs">CSS Slope Graphs</h1> + +<p>2021-06-07</p> + +<p><em>I am a huge sucker for simplistic and beautifully designed visual data on the web</em>. Most data tends to be graphed via line or bar systems - which is fine - but I think slope graphs are highly underrated. Let&#8217;s change that, shall we?</p> + +<h2 id="the-demo">The Demo</h2> + +<p>I&#8217;m basing this demo off the design patterns found in <a href="https://www.edwardtufte.com/tufte/books_vdqi">Edward Tufte&#8217;s visualization work</a>, specifically his slope graph designs:</p> + +<p><a href="https://codepen.io/bradleytaunt/pen/jOBzXMe">Live CodePen Example</a></p> + +<h2 id="the-html">The HTML</h2> + +<p>For this concept we will actually be building this graph out of <code>tables</code> - crazy, right? The greatest benefit of rendering all the data inside of a <code>table</code> element is the ability to easily support smaller screens and mobile devices. Larger viewports will get to see the pretty slope graph, while those below a certain threshold will view a simple table.</p> + +<p>(But more on that in the CSS section)</p> + +<pre><code>&#60;p&#62;Sales of the leading frozen pizza brands of the United States from 2011 to 2017 (in million US dollars) &#60;br&#62;&#60;em&#62;Source: Statisa 2018&#60;&#47;em&#62;&#60;&#47;p&#62; +&#60;table&#62; + &#60;thead&#62; + &#60;tr&#62; + &#60;th&#62;Pizza Brand&#60;&#47;th&#62; + &#60;th&#62;2011&#60;&#47;th&#62; + &#60;th&#62;2017&#60;&#47;th&#62; + &#60;&#47;tr&#62; + &#60;&#47;thead&#62; + &#60;tbody&#62; + &#60;tr&#62; + &#60;td data-set="677.0"&#62;DiGiorno&#60;&#47;td&#62; + &#60;td&#62;&#60;span&#62;677.0&#60;&#47;span&#62;&#60;&#47;td&#62; + &#60;td data-name="DiGiorno"&#62;1014.6&#60;&#47;td&#62; + &#60;&#47;tr&#62; + &#60;tr&#62; + &#60;td data-set="294.8"&#62;Private Label&#60;&#47;td&#62; + &#60;td&#62;&#60;span&#62;294.8&#60;&#47;span&#62;&#60;&#47;td&#62; + &#60;td data-name="Private Label"&#62;524.8&#60;&#47;td&#62; + &#60;&#47;tr&#62; + &#60;tr&#62; + &#60;td data-set="286.1"&#62;Red Baron&#60;&#47;td&#62; + &#60;td&#62;&#60;span&#62;286.1&#60;&#47;span&#62;&#60;&#47;td&#62; + &#60;td data-name="Red Baron"&#62;572.3&#60;&#47;td&#62; + &#60;&#47;tr&#62; + &#60;tr&#62; + &#60;td data-set="257.9"&#62;Tombstone&#60;&#47;td&#62; + &#60;td&#62;&#60;span&#62;257.9&#60;&#47;span&#62;&#60;&#47;td&#62; + &#60;td data-name="Tombstone"&#62;270.6&#60;&#47;td&#62; + &#60;&#47;tr&#62; + &#60;tr&#62; + &#60;td data-set="164.5"&#62;Totino&#39;s Party Pizza&#60;&#47;td&#62; + &#60;td&#62;&#60;span&#62;164.5&#60;&#47;span&#62;&#60;&#47;td&#62; + &#60;td data-name="Totino&#39;s Party Pizza"&#62;347.2&#60;&#47;td&#62; + &#60;&#47;tr&#62; + &#60;&#47;tbody&#62; +&#60;&#47;table&#62; +</code></pre> + +<p>As you can see, nothing too fancy is happpening here. Pay close attention to the <code>data-set</code> and <code>data-name</code> variables though - those will be important for the CSS portion of this design, mainly the rendering of the line elements.</p> + +<h2 id="the-css">The CSS</h2> + +<p>To avoid overwhelming your brain all-at-once, let&#8217;s break the CSS down into bite-sized chunks, starting with the base styling:</p> + +<pre><code>@import url(&#39;https:&#47;&#47;opentype.netlify.com&#47;et-book&#47;index.css&#39;); +* { + box-sizing: border-box; +} + +html { + height: 100%; +} + +body { + background: #fffff8; + font-family: "et-book", serif; + height: 100%; + margin: 0 auto; + max-width: 800px; + padding: 0 0.5rem; +} + +p { + font-size: 18px; + margin: 4rem 0 6rem; +} + +table { + border-collapse: collapse; + text-align: left; + width: 100%; +} +</code></pre> + +<p>Pretty basic stuff.</p> + +<p>Now we need to design how our slope graph will look on larger screens &#47; desktops. For this instance, we will target these larger devices with a <code>min-width</code> media query of <code>800px</code>. The rest of the CSS might look a little confusing but I assure you it is quite simple.</p> + +<ol> +<li><p>On larger devices we hide the first <code>thead tr th</code> element with <code>display: none</code></p></li> +<li><p>The first and second <code>td</code> elements inside each <code>tbody</code> row need to be set as <code>position: absolute</code> to avoid duplicate content</p></li> +<li><p>The inner <code>span</code> that we include in our HTML inside the second <code>tbody tr td</code> also needs to be <code>display: none</code></p></li> +<li><p>Remember that <code>data-set</code> variable? We now use that for our <code>:before</code> pseudo element for <code>table tbody tr td:nth-of-type(1)</code></p></li> +<li><p>Remember that <code>data-name</code> variable? We now use that for our <code>:before</code> pseudo element for <code>table tbody tr td:nth-of-type(3)</code></p></li> +<li><p>After that, you can see the simple customization we include to render the angle &#47; position of the slope lines and the corresponding labels</p> + +<p>@media(min-width:800px) { + table { + display: block; + position: relative; + margin-bottom: 25rem; + }</p> + +<pre><code>table thead th { + border-bottom: 1px solid lightgrey; + font-size: 24px; + position: absolute; + top: -50px; + width: 45%; +} +table thead th:nth-child(1){ display: none; } +table thead th:nth-child(2){ left: 0; } +table thead th:nth-child(3){ right: 0; text-align: right; } + +table tbody tr td:nth-of-type(1), +table tbody tr td:nth-of-type(2) { position: absolute;} + +table tbody tr td:nth-of-type(2) span { display: none; } +table tbody tr td:nth-of-type(1):before { + content: attr(data-set); + margin-right: 10px; + position: relative; +} + +table tbody tr td:nth-of-type(2) { padding-left: 10px; } + +table tbody tr td:nth-of-type(3) { + position: absolute; + right: 0; +} +table tbody tr td:nth-of-type(3):before { + content: attr(data-name); + margin-right: 10px; + position: relative; +} + +&#47;* Custom individual slopes -- Left *&#47; +tbody tr:nth-child(1) td:nth-child(1), +tbody tr:nth-child(1) td:nth-child(2) { top: 60px; } +tbody tr:nth-child(2) td:nth-child(1), +tbody tr:nth-child(2) td:nth-child(2) { top: 140px; } +tbody tr:nth-child(3) td:nth-child(1), +tbody tr:nth-child(3) td:nth-child(2) { top: 165px; } +tbody tr:nth-child(4) td:nth-child(1), +tbody tr:nth-child(4) td:nth-child(2) { top: 220px; } +tbody tr:nth-child(5) td:nth-child(1), +tbody tr:nth-child(5) td:nth-child(2) { top: 270px; } + +&#47;* Custom individual slopes -- Right *&#47; +[data-name="DiGiorno"] { top: 0; } +[data-name="Red Baron"] { top: 65px; } +[data-name="Private Label"] { top: 100px; } +[data-name="Tombstone"] { top: 180px; } +[data-name="Totino&#39;s Party Pizza"] { top: 150px; } + +&#47;* The custom visual lines *&#47; +tbody tr:after { + background: black; + content: &#39;&#39;; + height: 1px; + left: 14.5%; + position: absolute; + width: 70%; +} +tbody tr:nth-child(1):after { + top: 40px; + transform: rotate(-6deg); +} +tbody tr:nth-child(2):after { + left: 17.5%; + top: 130px; + transform: rotate(-4deg); + width: 65%; +} +tbody tr:nth-child(3):after { + left: 15%; + top: 125px; + transform: rotate(-10.25deg); + width: 70%; +} +tbody tr:nth-child(4):after { + left: 16%; + top: 210px; + transform: rotate(-4deg); + width: 68%; +} +tbody tr:nth-child(5):after { + left: 22%; + top: 222px; + transform: rotate(-16deg); + width: 56%; +} +</code></pre> + +<p>}</p></li> +</ol> + +<p>All that&#8217;s left are some minor styles to make everything look nice on mobile:</p> + +<pre><code>@media(max-width:800px) { + p { + margin: 2rem 0; + } + table td, table th { + border-bottom: 1px solid grey; + padding: 10px; + } + table td:last-of-type, table th:last-of-type { + text-align: right; + } +} +</code></pre> + +<h2 id="not-the-most-practical">Not the most practical</h2> + +<p>This slope graph concept is far from perfect for use in real-world situations. The fact that you need to manually render each point of data yourself makes this implementation quite annoying for more in-depth projects.</p> + +<p>But it was fun to mess around with and create, so who cares!</p></description> + <link>https://btxx.org/css-slope-graphs</link> + <guid isPermaLink="false">https://btxx.org/css-slope-graphs</guid> + <pubDate>Mon, 07 Jun 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>A Reality Where CSS and JavaScript Don't Exist</title> + <description><h1 id="a-reality-where-css-and-javascript-dont-exist">A Reality Where CSS and JavaScript Don&#8217;t Exist</h1> + +<p>2021-11-03</p> + +<p><em>This is my personal opinion. Please leave your pitchforks at the door&#8230;</em></p> + +<p>I love CSS. I can spend hours deep diving into a website&#8217;s CSS system and never find myself getting bored. It&#8217;s pretty amazing to see the problems other designers are able to solve with just a little bit of custom styling and determination.</p> + +<p>I like JavaScript. It serves it&#8217;s purpose and makes complex functionality on the web easier to wrangle in and understand.</p> + +<p><em>But I think both should have never come into existence</em>.</p> + +<h3 id="heresey">Heresey!</h3> + +<p>I know, I know - this website itself uses a little, teeny-tiny amount of CSS. I am indeed a hypocrite - but did I ever claim that I <em>practice</em> what I preach? At least this personal website is JavaScript-free&#8230; (apart from a handful of CodePen examples embedded in some of the tutorials).</p> + +<h3 id="moving-on">Moving On&#8230;</h3> + +<p>I&#8217;m not a complete idiot. I realize that the web has evolved significantly over the years, and to propose that it should have remained stagnant with it&#8217;s original concept of &#8220;paged documents&#8221; is foolish. But that <em>is</em> what I&#8217;m suggesting - at least, partially.</p> + +<h3 id="consistent-boring">Consistent &#38; Boring</h3> + +<p>Out there in the multiverse is a reality where the web is a complete borefest. Information is the only driving factor to visit a &#8220;web page&#8221; and PWAs have never come to exist. Custom styling, fancy interactive animations and single-page functionality isn&#8217;t even something that can be implemented. The web is just a system of HTML&#47;plaintext documents sharing information and data. Users browse the web in quick bursts to satisfy their queries or read something interesting. Then, they return to <em>real life</em>.</p> + +<p>My goodness what a <em>beautiful</em> reality that would be. Consistent, boring and wonderful.</p> + +<h3 id="wait---arent-you-a-designer">&#8220;Wait - Aren&#8217;t You a Designer?&#8221;</h3> + +<p>Yes - and again more hypocrisy. My livelihood depends on software requiring custom UIs and properly audited UX flows. By suggesting this change I am throwing myself under the bus and putting myself out of work. All my experience would become worthless and the world of software <em>design</em> would cease to exist.</p> + +<p><strong>I would be okay with that</strong>. If it meant the web as a whole was a better place - so be it.</p> + +<h3 id="a-look-at-the-new-world">A Look at the &#8220;New World&#8221;</h3> + +<p>Sometimes it is easier to visualize a concept instead of just discussing it. Below you can find an example of a &#8220;converted&#8221; website[^1] showcasing how sites would look and feel in this design-less reality:</p> + +<ul> +<li>Wealthsimple: <a href="https://www.wealthsimple.com/en-ca/">Current Website</a> &#47; <a href="/etc/html-only/wealthsimple/">New Version</a></li> +</ul> + +<p>As you can see, all the <em>fluff</em> has been removed from the existing design and only the content remains. No scroll-jacking or extra JavaScript libraries are downloaded. Users can easily skim through all the content and screen readers won&#8217;t struggle through any custom elements. It also loads incredibly fast.</p> + +<p>Of course, to our[^2] eyes, this design might look ugly or seem as though the site&#8217;s CSS failed to load - but in a reality where this is the standard, it is beautifully minimal. Either way, I find that this was at least a fun thought experiment and hopefully leaves you thinking about how the web <em>could have been</em> as well.</p> + +<p>Now, back to designing UIs for the web&#8230;</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>Selected site based on my own personal preference</li> +<li>Referring to current users of the web</li> +</ol></description> + <link>https://btxx.org/css-js-mistake</link> + <guid isPermaLink="false">https://btxx.org/css-js-mistake</guid> + <pubDate>Wed, 03 Nov 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Web Development on a $200 Chromebook</title> + <description><h1 id="web-development-on-a-200-chromebook">Web Development on a $200 Chromebook</h1> + +<p>2020-01-07</p> + +<p><em>This blog post was written, edited and tested locally</em> on a cheap $200 Chromebook. The article draft was composed in Sublime Text. Jekyll (the SSG this website uses) was generated via the Linux Beta Terminal running alongside Chrome OS. It was then pushed to the Github repo from the same Terminal and published automatically to Netlify. But more on that later.</p> + +<p>First, we need to ask an important question: why use a Chromebook for web development? Maybe a better question might be: why not?</p> + +<h2 id="mild-interest-turned-into-an-experiment">Mild interest turned into an experiment</h2> + +<p>Looking from the outside, I always liked the concept of the Chrome OS ecosystem. It had a solid list of features that appealed to me, specifically:</p> + +<ul> +<li>Blazingly fast boot times</li> +<li>Long lasting battery life (roughly 8 hours with consistent usage)</li> +<li>Extremely cheap entry point for &#8220;low-end&#8221; devices</li> +<li>And, more recently, support for Android &#38; Linux apps</li> +</ul> + +<p>The obvious downside to using a Chromebook is the lack of a &#8220;real&#8221; operating system. A Windows, Mac or Linux machine will always have more flexibility and depth than a simple Chromebook. But I&#8217;ve found that simple is all I need - or want.</p> + +<p><strong>Side note:</strong> <em>I wrote an article not to long ago about <a href="https://uglyduck.ca/stop-crawling-google/">blocking Google from my website</a> and I can see how this current post may come across as hypocritical. Since the search&#47;AMP teams are not that same as the Chrome OS &#47; Chromebook development team, I can view each of those projects based on their own merits. If you still view me as a hypocrite, that&#8217;s fine</em> :)</p> + +<h2 id="my-use-case-ymmv">My use case (YMMV)</h2> + +<p>I ended up grabbing the <a href="https://amzn.to/2Xvx20q">Acer 11 N7 Chromebook</a> off of Amazon for $200 (on sale and in Canuck bucks). It comes packed with 4GB of RAM with an Intel Celeron (1.6GHz) and 32GB of storage. Fairly barebones stuff.</p> + +<p>My day-to-day use cases are fairly straightforward. I work with git, static site generators, WordPress locally and on staging servers, edit documents, send emails and watch stupid YouTube videos. You know, the basics. My dirt-cheap Chromebook handles all of these things with ease.</p> + +<p>My Chromebook setup is as follows:</p> + +<ul> +<li>Linux Beta (ships with <code>git</code>, etc)</li> +<li>Sublime Text (you can always use VSCode if you prefer)</li> +<li>Terminal</li> +<li>Local by Flywheel (local WordPress development)</li> +<li>Figma in Chrome (UI design &#47; mockups)</li> +</ul> + +<p>That&#8217;s it. I understand other developers may require a lot more than this, but with Linux running in a container alongside Chrome OS you can pretty much run anything you could possibly need (excluding exclusive Mac &#38; Windows apps, of course).</p> + +<h2 id="can-a-200-chromebook-be-your-next-web-dev-machine">Can a $200 Chromebook be your next web dev machine?</h2> + +<p>For me? Yes. For you? Maybe.</p> + +<p>I mean, it really just depends on what you need your machine to accomplish. If you can be productive and the apps you use are just as fast and responsive as they would be on a more robust OS - then I say go for it. You don&#8217;t even need to be a cheapo like me, instead you can snag a fancier Chromebook or Google&#8217;s own Pixelbook. There are a ton of options when it comes to Chrome OS based devices.</p> + +<p>If you wanted to experiment to see if the Chrome OS ecosystem could work with your development flow, you can always check out something like <a href="https://www.neverware.com/freedownload">CloudReady</a> to test on your current machine before pulling the trigger.</p> + +<p>In the end, it doesn&#8217;t matter what operating system or apps you use to get your development work done - so long as it is productive and easy-to-use.</p> + +<p>For my current situation, all I need is my cheap little Chromebook.</p></description> + <link>https://btxx.org/chromebook-web-dev</link> + <guid isPermaLink="false">https://btxx.org/chromebook-web-dev</guid> + <pubDate>Tue, 07 Jan 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal</title> + <description><h1 id="portable-pi-cheap-raspberry-pi-zero-hacker-terminal">Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal</h1> + +<p>2020-09-16</p> + +<p><em>I recently came across <a href="https://n-o-d-e.net/zeroterminal3.html">the incredibly cool design</a> for an &#8220;ultimate Raspberry Pi computer&#8221;</em> by NODE and was inspired to create my own &#8220;portable&#8221; Pi device. Although, with my concept, I decided to set a few restrictions on the build:</p> + +<ul> +<li>I wanted to keep the total cost as low as possible + +<ul> +<li>including the Pi Zero <em>and</em> extra hardware</li> +</ul></li> +<li>I wanted to avoid any custom casings or need for 3D printed materials</li> +<li>I wanted to make the full design extremely portable &#47; lightweight</li> +<li>I wanted to keep the build as user-friendly as possible (no soldering, odd hacks etc.)</li> +</ul> + +<p>With these constraints put in place, I built my very own Raspberry Pi Zero &#8220;hacker&#8221; terminal. You can see the finished product below:</p> + +<p><img src="/public/images/portable-pi-1.webp" alt="Portable Pi front" /></p> + +<p><img src="/public/images/portable-pi-2.webp" alt="Portable Pi back" /></p> + +<p>I&#8217;m pretty happy with the final outcome and best of all - you can easily recreate this yourself with little-to-no effort!</p> + +<p>So enough chit-chat - let&#8217;s build this bad-boy!</p> + +<blockquote> +<p><strong>Note:</strong> Most items in the hardware section are Amazon affiliate links</p> +</blockquote> + +<h2 id="table-of-contents">Table of Contents</h2> + +<ol> +<li><a href="#expectations">Setting Expectations</a></li> +<li><a href="#hardware">The Hardware</a></li> +<li><a href="#software">The Software</a></li> +<li><a href="#setup">Getting Setup</a></li> +<li><a href="#summary">Final Summary</a></li> +</ol> + +<p><strong>This hardware will not</strong> replace your laptop or any other &#8220;high-powered&#8221; portable device. Honestly, you&#8217;re mobile phone would (most likely) work better in terms of a compact-sized computer. The concept behind this &#8220;portable pi&#8221; project was to make something <em>for fun</em>.</p> + +<p>Please reserve any sassy comments about how buying a cheap $50 laptop off eBay would be more efficient than building out something like I have done here. You&#8217;re missing the point entirely.</p> + +<p>Moving on for those still interested&#8230; </p> + +<p>I live in Canada, so some of the options are based on available hardware near my location. You&#8217;re likely to find similar hardware close to your own country for better pricing &#47; shipping costs.</p> + +<blockquote> +<p><strong>Note</strong>: I&#8217;ve decided to use a wireless, USB dongle-based keyboard. You can opt to use a bluetooth-based keyboard, but I just find them more trouble than they are worth (keeping a charge, losing connections, interference from other devices)</p> +</blockquote> + +<ul> +<li>SBC: <a href="https://amzn.to/3jCVXHG">Raspberry Pi Zero WH</a></li> +<li>Storage &#47; OS: <a href="https://amzn.to/2GHm01R">64GB Micro SD Card</a> (Always have an SD backup!)</li> +<li>Battery HAT: <a href="https://amzn.to/3jGq8xp">Li-ion Battery HAT</a></li> +<li>Battery: <em>This depends on your location. I was able to order <a href="https://www.walmart.ca/en/ip/Brand-New-4-Pcs-2500mAh-TR14500-3-7V-Rechargeable-Li-ion-Battery-for-Flashlight-Torch/PRD3Z73LMZZ3VK9">online through Walmart</a>, but if you live in the USA there are plenty of battery-specific vendors available. Find whatever works best for your needs!</em></li> +<li>Display: <a href="https://www.buyapi.ca/product/3-5-inch-raspberry-pi-tft-display/">KeDei 3.5-inch TFT Display</a></li> +<li>Keyboard: <a href="https://amzn.to/2Gqkwt6">Mini USB Wireless Keyboard</a></li> +<li>Adapter: <a href="https://amzn.to/36I6T3c">Micro USB OTG Cable</a></li> +</ul> + +<h4 id="raspberry-pi-zero-wh">Raspberry Pi Zero WH</h4> + +<p>You will need a Raspberry Pi Zero W with GPIO header pins already soldered on to the board. (You could also do this yourself manually if you have the tools and skill to do so)</p> + +<h4 id="li-ion-battery-hat">Li-Ion Battery HAT</h4> + +<p>This HAT holds a single li-ion battery and for our purposes will connect with our Pi Zero via the GPIO header pins. You could also look into double-set battery HATs if that is something you would prefer - for my needs a single rechargeable battery works fine.</p> + +<p>Since our main &#8220;OS&#8221; is purely terminal based, I find you don&#8217;t really need a li-ion battery with a massive amount of power storage. 2500mAh will easily last a handful of hours mucking about with emails, files and web browsing. Plus, you can always carry a few extras for swapping out on-the-go.</p> + +<h4 id="3.5-inch-tft-display">3.5-inch TFT Display</h4> + +<p>A simple and fairly cheap touchscreen display. We won&#8217;t require our display to render videos or pretty graphics (since we will be entirely terminal-based) so this works just fine for our needs. I am using version 6.3 for this build.</p> + +<h4 id="micro-usb-otg-adapter">Micro USB OTG Adapter</h4> + +<p>As mentioned above, this item is optional if you feel more comfortable with using a pure bluetooth keyboard. I just personally prefer this method.</p> + +<h4 id="wireless-keyboard">Wireless Keyboard</h4> + +<p>In my product demo image at the beginning of the article, I&#8217;m actually using an old Logitech wireless keyboard since this one still hasn&#8217;t arrived. I plan to swap them out once I have it - the Logitech is far to large to be deemed &#8220;portable&#8221;.</p> + +<ul> +<li>Operating System: <a href="https://www.raspberrypi.org/downloads/raspberry-pi-os/">Raspberry Pi OS Lite</a></li> +<li>Display Driver: <a href="http://kedei.net/raspberry/raspberry.html">KeDei 3.5 Driver</a></li> +<li>Email: <a href="https://github.com/LukeSmithxyz/mutt-wizard">Neomutt</a> (via Mutt Wizard)</li> +<li>Web Browser: <a href="https://lynx.browser.org/">Lynx</a></li> +<li>Text Editor: <a href="https://www.nano-editor.org/">Nano</a></li> +<li>Code Editor: <a href="https://www.vim.org/">Vim</a></li> +</ul> + +<p>I will be setting up this &#8220;portable pi&#8221; via <a href="https://www.raspberrypi.org/documentation/configuration/wireless/headless.md">headless installation</a> with my main <a href="https://uglyduck.ca/my-pi-desktop/">Raspberry Pi 4 desktop</a>. Included below are some quick instructions on how to setup the Raspberry Pi Zero for <code>ssh</code> access.</p> + +<h4 id="preparing-the-microsd-card">Preparing the microSD card</h4> + +<ul> +<li><p>Use Raspberry Pi Imager to write the Raspberry Pi Lite OS to your microSD card + +<ul> +<li>Once complete, remove the microSD storage device and then re-connect it</li> +</ul></p></li> +<li><p>Navigate to the <code>boot</code> folder of the microSD device - we will be adding 2 files here + +<ul> +<li>First add a completely empty file and name it <code>ssh</code> (no file extension)</li> +<li>Next add an empty file named <code>wpa_supplicant.conf</code></li> +</ul></p></li> +<li><p>Open the <code>wpa_supplicant.conf</code> file in a code &#47; text editor and paste the following (be sure to change <code>country</code> to your proper country code, as well as properly setting your network name &#47; password):</p> + +<p>ctrl<em>interface=DIR=&#47;var&#47;run&#47;wpa</em>supplicant GROUP=netdev +update_config=1 +country=US</p> + +<p>network={ + ssid="Your network name&#47;SSID&#8221; + psk="Your WPA&#47;WPA2 security key&#8221; + key_mgmt=WPA-PSK +}</p></li> +<li><p>Unmount the microSD device, then place the microSD card in your RPi Zero</p></li> +<li><p>Assemble the Raspberry Pi Zero with the Battery HAT (li-ion battery attached) connected via GPIO pins, and the 3.5 display connected on-top of the battery HAT&#8217;s pins</p></li> +<li><p>Turn on the battery HAT switch to power the RPi Zero. Give the device roughly 90 seconds to perform the initial boot</p></li> +</ul> + +<blockquote> +<p><strong>Note</strong>: the display will turn on but only show a white screen - this is normal</p> +</blockquote> + +<h4 id="connecting-to-your-zero-via-ssh">Connecting to your Zero via SSH</h4> + +<p>Open the terminal on your Raspberry Pi desktop and enter the following command:</p> + +<pre><code>ssh pi@raspberrypi.local +</code></pre> + +<p>You will then be asked if you wish to trust this device (say yes), then prompted for the <code>pi</code> user&#8217;s password - which is <code>raspberry</code>. After a moment you will be directly connected to your Raspberry Pi Zero. Hooray!</p> + +<p>We just want to make a couple small configuration changes before going forward (mostly for security):</p> + +<ol> +<li>Run the command <code>sudo raspi-config</code></li> +<li>Select &#8220;Change User Password&#8221; from the menu and change the password +<img src="/public/images/raspi-config.webp" alt="Raspberry config" /></li> +<li>After that, select &#8220;Network Options&#8221; and change your device name + +<ul> +<li>This will avoid any conflicts of connecting to newer RPi devices down the line</li> +</ul></li> +</ol> + +<p>That&#8217;s it!</p> + +<h4 id="installing-display-driver">Installing display driver</h4> + +<p>Next we will need to download and run the drivers needed for our 3.5-inch display to play nicely with our Pi Zero (just a blank white screen doesn&#8217;t help us much). While connected to our RPi Zero via SSH, run the following commands:</p> + +<pre><code>wget http:&#47;&#47;kedei.net&#47;raspberry&#47;v6_1&#47;LCD_show_v6_1_3.tar.gz +</code></pre> + +<p>If you have snail-paced rural internet like I do, now is a good time to go and grab a coffee while this download completes.</p> + +<p>Once the download has finished, extract the contents and navigate to the new directory and install the driver:</p> + +<pre><code>sudo tar xzf LCD_show_v6_1_3.tar.gz +cd LCD_show_v6_1_3 +sudo .&#47;LCD35_v +</code></pre> + +<p>Once completed, the RPi Zero will reboot and everything should work as expected!</p> + +<h4 id="installing-software">Installing software</h4> + +<p>I&#8217;m not going to jump into heavy details about installing terminal-based software for this setup. The links I&#8217;ve attached in the software section should provide you with more than enough information to get started. For reference, I&#8217;m using a very basic set of applications:</p> + +<ul> +<li>Neomutt (emails)</li> +<li>Lynx (quick and simple web browsing)</li> +<li>Nano (writing notes &#47; blog posts in a hurry)</li> +<li>Vim (making any config edits or project work)</li> +</ul> + +<p>There you have it - a terminal-based, portable Raspberry Pi Zero &#8220;hacker&#8221; device. </p> + +<p>Is it practical? Not really. Can it replace any other <em>portable</em> device you might own? Probably not. Is it fun to make and experiment on? You bet! And in the end - isn&#8217;t that what matters most with pet Pi projects?</p></description> + <link>https://btxx.org/cheap-portable-pi</link> + <guid isPermaLink="false">https://btxx.org/cheap-portable-pi</guid> + <pubDate>Wed, 16 Sep 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Chasing Performance</title> + <description><h1 id="chasing-performance">Chasing Performance</h1> + +<p>2017-11-20</p> + +<h2 id="update">Update</h2> + +<p>This post is no longer relevant since this blog has been redesigned since. I&#8217;m keeping this article up as a point of reference.</p> + +<hr/> + +<p>So I decided to participate in Smashing Mag&#8217;s Front End Performance Challenge, not only for the potential of winning the prize but to further experiment with optimizing my site. (Web performance is a passion of mine)</p> + +<p>Below I will breakdown the before &#38; after statistics of my personal site and what changes I made in great detail.</p> + +<p>I will be using both my homepage and the image-heavy article I recently wrote, The Death of Personality, as the basis for my tests.</p> + +<h3 id="lighthouse-score---homepage">Lighthouse Score - Homepage</h3> + +<p>Full source original stats &#47;&#47; Full source updated stats</p> + +<h3 id="lighthouse-score---article-page">Lighthouse Score - Article Page</h3> + +<p>Full source original stats &#47;&#47; Full source updated stats</p> + +<h3 id="web-page-test---homepage">Web Page Test - Homepage</h3> + +<p>Full source original stats &#47;&#47; Full source updated stats</p> + +<h3 id="web-page-test---article-page">Web Page Test - Article Page</h3> + +<p>Full source original stats &#47;&#47; Full source updated stats</p> + +<h3 id="quick-look">Quick Look</h3> + +<p>Though my homepage only made some minor speed performance enhancements, my article post&#8217;s initial load time was slimmed down by a <strong>whopping 4.2 seconds!</strong> That&#8217;s pretty incredible and very noticeable from an end-user&#8217;s perspective.</p> + +<h3 id="so---what-changed">So - What Changed?</h3> + +<p>Webfonts</p> + +<p>I&#8217;m not using any webfonts but instead defaulting to the user&#8217;s OS System Fonts. I love custom typefaces but performance takes just too much of a hit on my personal site to bother with them.</p> + +<pre><code>body { +font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif,"Sans Serif",Icons; +} +</code></pre> + +<p>For reference, there are some things you should to look out for when using custom typefaces:</p> + +<ul> +<li>Readability and accessibility</li> +<li>Possible extra overhead loading in a custom @font-face</li> +<li>Try to avoid any FOUT, FOIT, FOFT</li> +<li>Don&#8217;t go down the rabbit hole of using 3rd party plugins to optimize something as basic as a typeface</li> +</ul> + +<h3 id="critical-css">Critical CSS</h3> + +<p>This part was easy. In order to avoid the weird styling &#8216;pops&#8217; present on some websites when initially loading with slow connections, it&#8217;s best to place all your most critical styling inline and then load your external CSS once everything else has loaded.</p> + +<p>On top of that, I decided to also implement Filament Group&#8217;s loadCSS function to load my CSS asynchronously. If you are not currently using this in any of your projects; stop reading this and go do it! It&#8217;s a game changer.</p> + +<h3 id="critical-javascript">Critical JavaScript</h3> + +<p>My personal site only uses a small amount of JavaScript on the article post Jekyll template pages. By using the defer property I can be sure to load the IntersectionObserver API polyfill after the rest of the DOM as finished loading.</p> + +<pre><code>&#60;script src="https:&#47;&#47;cdn.polyfill.io&#47;v2&#47;polyfill.min.js?features=IntersectionObserver" defer&#62; +</code></pre> + +<p>I could probably optimize this further by only calling these scripts if an image is actually present in the article post, but this fits my needs nicely as is.</p> + +<h3 id="responsive-images">Responsive Images</h3> + +<p>The only images I use are those included in supported blog posts, so the first step was making sure to only call iolazy.min.js on those specific template pages. The next step was defaulting to webp image formats with a lossless jpg fall-back with the help of the picture element:</p> + +<p>I&#8217;ve also included responsive image sizes for further optimization based on screen size and loading speeds.</p> + +<pre><code>&#60;figure&#62; +&#60;picture + &#60;source type="image&#47;webp" + data-srcset=" + &#47;images&#47;articles&#47;webp&#47;flat-design-toggles_p0v2hv_c_scale,w_200.webp 200w, + &#47;images&#47;articles&#47;webp&#47;flat-design-toggles_p0v2hv_c_scale,w_1400.webp 1400w" + class="lazyload"&#47;&#62; + &#60;img + sizes="(max-width: 1400px) 100vw, 1400px" + data-srcset=" + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_200.webp 200w, + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_727.webp 727w, + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_1065.webp 1065w, + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_1400.webp 1400w" + src="&#47;images&#47;placeholder.webp" + alt="Toggles Comparison" + class="lazyload"&#47;&#62; +&#60;&#47;picture&#62; +&#60;&#47;figure&#62; +</code></pre> + +<p>What about users with JavaScript disabled I hear you ask? It&#8217;s time for noscript to save the day:</p> + +<pre><code>&#60;noscript&#62; + &#60;picture&#62; + &#60;source type="image&#47;webp" + srcset=" + &#47;images&#47;articles&#47;webp&#47;flat-design-toggles_p0v2hv_c_scale,w_200.webp 200w, + &#47;images&#47;articles&#47;webp&#47;flat-design-toggles_p0v2hv_c_scale,w_1400.webp 1400w"&#62; + &#60;img + sizes="(max-width: 1400px) 100vw, 1400px" + srcset=" + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_200.webp 200w, + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_727.webp 727w, + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_1065.webp 1065w, + &#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_1400.webp 1400w" + src="&#47;images&#47;articles&#47;flat-design-toggles_qfre51_c_scale,w_1400.webp" + alt="Toggles Comparison"&#47;&#62; + &#60;&#47;picture&#62; +&#60;&#47;noscript&#62; +</code></pre> + +<h3 id="https-caching">HTTPS &#38; Caching</h3> + +<p>The Lighthouse audit also suggested implementing an SSL certificate (something I&#8217;ve been meaning to do for a while anyway) and also utilize CDN caching. So it was Cloudflare to the rescue!</p> + +<p>Since my website is hosted through Github, setting up a <em>free</em> SSL certificate and enabling site-wide caching was a breeze. If you&#8217;re interested in setting this up yourself, step-by-step instructions can be found here.</p> + +<p>This simple update helped boost my best practices score from a 69 to a 94. Yet another performance enhancement you should be enabling for all your current and future projects!</p> + +<h2 id="performance-happiness">Performance Happiness</h2> + +<p>Overall I&#8217;m pretty content with the <strong>major</strong> performance boost my site has received from these fairly <em>minor</em> updates and I hope this article inspires other designers and developers to jump into updating their own site&#47;app performance speeds. The pay-off is truly worth it!</p> + +<h3 id="some-extra-reading-material">Some Extra Reading Material</h3> + +<ul> +<li>Web Performance in Action by Jeremy Wagner</li> +<li>Responsible Responsive Design by Scott Jehl</li> +<li>Designing with Progressive Enhancement: Building the Web that Works for Everyone by Todd Parker, Scott Jehl, Maggie Costello Wachs, Patty Toland</li> +</ul></description> + <link>https://btxx.org/chasing-performance</link> + <guid isPermaLink="false">https://btxx.org/chasing-performance</guid> + <pubDate>Mon, 20 Nov 2017 00:00:00 +0000</pubDate> + </item> + <item> + <title>CSS Character Unit</title> + <description><h1 id="css-character-unit">CSS Character Unit</h1> + +<p>2019-04-23</p> + +<p><em>When it comes to proper readability with large portions of text</em>, the golden standard is to have no more than <a href="http://webtypography.net/2.1.2">75 characters per line</a>. This is easy to achieve in the world of print but on the responsive, ever-changing web - statically defined typography becomes a little more difficult.</p> + +<p>You could go through the long process of setting up media queries for every possible screen size, adjusting text size and padding accordingly - but there is a <em>better way</em>.</p> + +<h2 id="introducing-character-units">Introducing character units</h2> + +<p>By setting your main containers or text elements with the CSS character unit (<code>ch</code>), you need to set the character length only once. Let&#8217;s look at a simple example for reference.</p> + +<p>Let&#8217;s say you have an article which will fill the entire length of the screen. Something like this:</p> + +<pre><code>&#60;div class="container"&#62; + &#60;p&#62;Reprehenderit aliqua in quis eiusmod ea culpa aliquip. Velit duis est irure voluptate occaecat labore laborum ut pariatur ex veniam deserunt esse est. Esse sunt exercitation id reprehenderit deserunt elit commodo sit ullamco amet commodo magna consequat. Excepteur voluptate tempor consectetur eu aliqua aliquip laboris aliquip veniam excepteur labore.&#60;&#47;p&#62; + &#60;p&#62;Voluptate excepteur sint magna ipsum occaecat irure sit. In occaecat excepteur in id ullamco id est incididunt irure et. Consectetur veniam exercitation occaecat exercitation labore nulla excepteur irure ex anim. Commodo sint anim non ad excepteur exercitation eiusmod Lorem nisi. Tempor ut ipsum do adipisicing dolore.&#60;&#47;p&#62; +&#60;&#47;div&#62; +</code></pre> + +<p>With this structure, you might normally set the default <code>max-width</code> property with your desired maximum width (whatever you believe is the best reading length):</p> + +<pre><code>.container { + max-width: 38em; +} +</code></pre> + +<p>This works - but it isn&#8217;t ideal. Time for character units to save the day! You will still target the <code>max-width</code> property but this time we set it to use the <code>ch</code> value like so:</p> + +<pre><code>.container { + max-width: 66ch; +} +</code></pre> + +<p>This setting makes sure content will not exceed more than 66 characters per line, making for a better reading experience with little effort.</p> + +<h2 id="browser-support">Browser support</h2> + +<p>The character unit attribute has pretty great support - even partial IE11! Check out the supported browsers <a href="https://caniuse.com/#feat=ch-unit">here</a>.</p></description> + <link>https://btxx.org/character-unit</link> + <guid isPermaLink="false">https://btxx.org/character-unit</guid> + <pubDate>Tue, 23 Apr 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Browser History Sucks</title> + <description><h1 id="browser-history-sucks">Browser History Sucks</h1> + +<p>2019-04-20</p> + +<p><em>Have you ever needed to step back through your browser history</em> to find a particular site or product? Do you remember that experience being good? Most likely not.</p> + +<p>Much like printers, the design of browser history interfaces hasn&#8217;t changed in years. This would be fine if these UIs had been well thought out and optimized for an easy user experience - but they weren&#8217;t.</p> + +<p>Browser history views rely on the user&#8217;s own memory for more in-depth searches. This defeats the whole purpose of having a robust, documented history. The browser should be doing this heavy-lifting.</p> + +<h2 id="what-browsers-get-wrong">What browsers get wrong</h2> + +<p>Modern browsers give the general public too much credit when it comes to memory (I don&#8217;t mean this as an insult!). To assume users remember the URL or site name when browsing random pages is short-sighted. I find myself asking these types of questions when jumping back into my view history far too often:</p> + +<ul> +<li>&#8220;That article had <em>something</em> to do with CSS&#8230;&#8221;</li> +<li>&#8220;I remember seeing a beautifully designed site a month ago but have no clue what the URL was&#8230;&#8221;</li> +<li>&#8220;My browser crashed and I can&#8217;t recall that [example website] I had pinned in my tab for weeks&#8230;&#8221;</li> +</ul> + +<p>For reference, let&#8217;s take a look at the current Chrome (73) history view:</p> + +<p><img src="/public/images/browser-history-01.webp" alt="Default Chrome History" /></p> + +<p>As you may have noticed - this UI is lackluster at best. An oversimplified search field in the header is the only means of filtering items.</p> + +<h2 id="why-not-use-extensions">Why not use extensions?</h2> + +<p>I know using browser extensions or tagging favorites can alleviate some of these issues. This is great, but why not simplify everything by having these features <em>inside</em> the history view? If an extension can add these features, why not have those extras built-in?</p> + +<h2 id="two-subtle-improvements">Two subtle improvements</h2> + +<p>A little goes a long way. With just two small changes, we can drastically increase the history view&#8217;s UX.</p> + +<p>We start by adding a date picker. Users open the new calendar icon to filter by days, months or years before searching. Seems trivial, but this saves the headache of filtering through all saved history.</p> + +<p><img src="/public/images/browser-history-02.webp" alt="Chrome History with date picker" /></p> + +<p>The second small functional change we can make is including extra subcategories. These new options allow users to focus their searches based on:</p> + +<ul> +<li>Session length</li> +<li>Number of return visits</li> +<li>Last restored tabs</li> +</ul> + +<h3 id="session-length">Session length</h3> + +<p><img src="/public/images/browser-history-03.webp" alt="Chrome History by session length" /></p> + +<p>Allow users to display their history filtered by session duration. This helps when searching for an stagnant page or pinned site during a user&#8217;s long session. An example default would allow filtering by:</p> + +<ul> +<li>longest to shortest</li> +<li>shortest to longest</li> +<li>pinned tabs</li> +</ul> + +<h3 id="return-visits">Return visits</h3> + +<p><img src="/public/images/browser-history-04.webp" alt="Chrome History by return visits" /></p> + +<p>When users make repeat visits to a site or web app, the browser should keep a record of return sessions. This allows the user to refine their search by many or singular visits.</p> + +<h3 id="last-restored-tabs">Last restored tabs</h3> + +<p><img src="/public/images/browser-history-05.webp" alt="Chrome History by restored tabs" /></p> + +<p>A basic concept, but the ability for users to view all previous instances of restored tabs is helpful. This would fix most edge cases not covered by the other two categories.</p> + +<h2 id="far-from-perfect">Far from perfect</h2> + +<p>The Chrome (or any browser for that matter) browser history view is simplistic to a fault. The current UI is prone to human error, since it makes assumptions and relies heavily on user memory.</p> + +<p>These are simple fixes that attempt to boost the basic UX of the history view. Are these concepts absolutely perfect? Not at all. Is it at least an improvement? I believe it is. When products decrease the effort required of it&#8217;s users, I see that as a positive.</p></description> + <link>https://btxx.org/browser-history-sucks</link> + <guid isPermaLink="false">https://btxx.org/browser-history-sucks</guid> + <pubDate>Sat, 20 Apr 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Bidirectional Scrolling: Why Not Both?</title> + <description><h1 id="bidirectional-scrolling-why-not-both">Bidirectional Scrolling: Why Not Both?</h1> + +<p>2020-11-09</p> + +<p><em>I recently came across Adam Silver&#8217;s post <a href="https://adamsilver.io/articles/bidirectional-scrolling-whats-not-to-like/">about the merits and pitfalls of bidirectional scrolling</a></em> and found myself conflicted with the design arguments put forth in the article. It&#8217;s a very good article overall, and I suggest giving it a read before digging deeper into my post here.</p> + +<h2 id="the-premise">The Premise</h2> + +<p>The original article argues that displaying page content via horizontal scrolling (and therefore slightly hiding interactive content) creates a few major issues:</p> + +<ul> +<li>it increases the chance users won&#8217;t see it</li> +<li>there&#8217;s a greater reliance on digital literacy</li> +<li>it&#8217;s generally more labour intensive for users</li> +</ul> + +<p>Adam also makes a solid statement here:</p> + +<blockquote> +<p>Having to scroll down and across in a zig zag fashion can be tiresome, especially for people with motor impairments.</p> +</blockquote> + +<p>But I don&#8217;t believe these issues create a need to completely remove the horizontal &#8220;scrolling&#8221; design altogether. You can still implement the <code>See All Items</code> category link, while allowing the horizontal content to load in <em>dynamically</em>. Balance is always key.</p> + +<h2 id="not-all-at-once-please">Not All At Once, Please!</h2> + +<p>So what exactly do I mean by <em>dynamically</em> loading in horizontal content?</p> + +<ul> +<li>The user is shown the top 4 items in a given category</li> +<li>From there, the user can use the <code>See All Items</code> link to jump into a full category page</li> +<li>If they so desire, they can begin scroll horizontally in a given category row + +<ul> +<li>Once they reach the end of the row, 4 more items will load in automatically to expand the list</li> +<li>To avoid a never-ending list, it might be best to limit total row items to ~20 items. At this point the UI could prompt the user to <code>View All Items</code> in that category.</li> +</ul></li> +</ul> + +<p>By loading the row content in piece-by-piece, initial loads for users will be faster and subsequent list items will load quickly as well (since they would limit to a set default - in this case only 4).</p> + +<h2 id="final-improvements">Final Improvements</h2> + +<p>Below you can find a quick, static version of this concept. Here you can see the horizontal list items, along with their corresponding <code>See All Items</code> links. You&#8217;ll have to use your imagination for how new items would load once you each the end of a horizontal row. (I&#8217;m too lazy to spend extra time building out that functionality for a hypothetical blog post)</p> + +<p><a href="https://codepen.io/bradleytaunt/pen/pobxpXz">Live CodePen Example</a></p></description> + <link>https://btxx.org/bidirectional-scrolling</link> + <guid isPermaLink="false">https://btxx.org/bidirectional-scrolling</guid> + <pubDate>Mon, 09 Nov 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Better Box Shadows</title> + <description><h1 id="better-box-shadows">Better Box Shadows</h1> + +<p>2019-01-08</p> + +<p>Box shadow on HTML elements has been widely supported across most browsers for a while now, but I find the default options don&#8217;t allow for much visual manipulation of the shadows in general.</p> + +<p>Let&#8217;s take a look at a default configuration of <code>box-shadow</code>:</p> + +<pre><code>.box-container { + box-shadow: 0 4px 8px rgba(0,0,0,0.3); +} +</code></pre> + +<p>In the example above the first property number is the origin of the <em>x-axis</em>, the second number is the origin of the <em>y-axis</em> and the third is the amount of <em>blur</em>.</p> + +<p>We should also add some minimal styling to cleanup the <code>.box-container</code> a little bit for our example:</p> + +<pre><code>&#60;div class="box-container"&#62;&#60;&#47;div&#62; + + +.box-container { + box-shadow: 0 4px 8px rgba(0,0,0,0.3); + &#47;* Styles to make it less ugly *&#47; + background: white; + border-radius: 10px; + border: 1px solid #eee; + height: 200px; + padding: 10px; + position: relative; + width: 250px; +} +</code></pre> + +<p>Which would render as this:</p> + +<p>Not bad - but we can do a lot better than this.</p> + +<h2 id="please-sir-i-want-some-more-depth">Please sir, I want some more (depth)</h2> + +<p>We just need to add a simple child <code>div</code> (or use a <code>pseudo</code> element if you prefer) inside our main element we want to apply the shadow to:</p> + +<pre><code>&#60;div class="box-container"&#62; + &#60;div class="box-container-inner"&#62;&#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<p>Now we make our inner child element <code>absolute</code> and set it&#8217;s <code>height</code> and <code>width</code> dynamically to be slightly smaller than it&#8217;s parent (percentages work best for this). </p> + +<p>Remember to set this child element behind it&#8217;s parent by adding <code>z-index: -1</code>.</p> + +<pre><code>.box-container { + &#47;* No box-shadow needed on this element anymore *&#47; + &#47;* Styles to make it less ugly *&#47; + background: white; + border-radius: 10px; + border: 1px solid #eee; + height: 200px; + padding: 10px; + position: relative; + width: 250px; +} +</code></pre> + +<h2 id="inner-containers">Inner Containers</h2> + +<p>We also need to target the <code>box-container-inner</code> element set inside the current parent to reflect our custom shadow styling:</p> + +<pre><code>.box-container-inner { + bottom: 0; + &#47;* The box-shadow is added here now *&#47; + box-shadow: 0 4px 12px rgba(0,0,0,0.3); + height: 94%; + left: 3%; + position: absolute; + width: 94%; + z-index: -1; +} +</code></pre> + +<p>Which will make the drop-shadow render with a little more realistic depth:</p> + +<h2 id="but-wait---theres-more">But wait - there&#8217;s more!</h2> + +<p>We could stop now and have a decent drop-shadow that is certainly easier on the eyes - but we can make this even better with one extra property - <code>filter:blur();</code>. </p> + +<p>So your final code would look like this:</p> + +<pre><code>.box-container { + &#47;* Styles to make it less ugly *&#47; + background: white; + border-radius: 10px; + border: 1px solid #eee; + height: 200px; + padding: 10px; + position: relative; + width: 250px; +} + +.box-container-inner { + bottom: 0; + box-shadow: 0 4px 12px rgba(0,0,0,0.3); + filter: blur(6px); + height: 94%; + left: 3%; + position: absolute; + width: 94%; + z-index: -1; +} +</code></pre> + +<p>Which renders out into a much smoother blend of a drop-shadow, creating a more realistic illusion of depth:</p></description> + <link>https://btxx.org/better-box-shadows</link> + <guid isPermaLink="false">https://btxx.org/better-box-shadows</guid> + <pubDate>Tue, 08 Jan 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Hosting with Codeberg Pages</title> + <description><h1 id="hosting-with-codeberg-pages">Hosting with Codeberg Pages</h1> + +<p>2022-07-29</p> + +<p>I recently switched the <a href="https://pblog.bt.ht">pblog</a> project repo over from Sourcehut to Codeberg (mostly for UX reasons) and it got me looking into <a href="https://codeberg.page">Codeberg Pages</a>. It seemed like a cleaner approach to host my personal blog on the same platform I planned to also share the source code.</p> + +<p>I decided to share the setup process here since I couldn&#8217;t find a straightforward guide explaining everything required to get going. So, let&#8217;s dig in.</p> + +<h2 id="create-the-repos">Create the Repos</h2> + +<p><strong>Disclaimer</strong>: My personal blog uses <a href="https://pblog.bt.ht">pblog</a>, so although these instructions will be catered towards that SSG the same concept <em>should</em> apply for any other generator (Jekyll, Hugo, Next, etc.).</p> + +<p>The first step is to create the main repo that would house the core files of <code>pblog</code>. Then we need to make a separate repo simply called <code>pages</code>. This second project is where all the generated &#8220;static&#8221; files get rendered.</p> + +<p><em>Side note</em>: Be sure to at least include a <code>README</code> file in that <code>pages</code> repo. This will avoid any errors or warnings when setting up our submodules in the next steps.</p> + +<h2 id="configuration-edits">Configuration Edits</h2> + +<p>Once your two repos are created, you will need to make some minor edits to the <code>_config.sh</code> in the core <code>pblog</code> project to tell the build script where the generated files should go (in this case the <code>pages</code> repo):</p> + +<pre><code>OUTPUT="_output&#47;pages&#47;" +</code></pre> + +<h2 id="the-submodule">The Submodule</h2> + +<p>Using terminal, navigate to the <code>_output&#47;</code> directory in your core <code>pblog</code> project. Run the following, remembering to replace the USERNAME parameter with your own:</p> + +<pre><code>git submodule add git@codeberg.org:USERNAME&#47;pages.git +</code></pre> + +<p>If everything worked correctly you should now have a <code>.gitmodules</code> file in your main <code>pblog</code> project. If you get any errors, you might need to include the name of the directory at the end of the command:</p> + +<pre><code>git submodule add git@codeberg.org:USERNAME&#47;pages.git pages +</code></pre> + +<h2 id="the-workflow">The Workflow</h2> + +<p>Now you can make changes, add new posts and pages in the main <code>pblog</code> project and have those generated files render into your other <code>pages</code> repo. For this workflow, I simply push commits to both projects when I am happy with my changes but I&#8217;m sure you could look into automating this process (ie. a single push from the <code>pblog</code> repo forces a the <code>pages</code> repo to also update).</p> + +<p>Now you can navigate to the standard Codeberg Pages URL to see it in action:</p> + +<pre><code>USERNAME.codeberg.page +</code></pre> + +<p>If you want to use your own custom domain (who doesn&#8217;t?) then continue reading.</p> + +<h2 id="custom-domains-optional">Custom Domains (Optional)</h2> + +<p>The first thing you will need to do is add a <code>.domains</code> file to your <code>pages</code> root directory. In this file you will want to list your custom domain on the first line, followed by the standard Codeberg pages URL below it. Like so:</p> + +<pre><code>yourcustomdomain.com +USERNAME.codeberg.page +</code></pre> + +<p>I&#8217;m keeping this very basic, but I suggest you look further into the <a href="https://docs.codeberg.org/codeberg-pages/#custom-domains">official documentation</a> if there are any extra settings you&#8217;d like to tinker with.</p> + +<p>The final step is configuring a <code>CNAME</code> DNS setting through your registrar:</p> + +<pre><code>@ -&#62; USERNAME.codeberg.page +</code></pre> + +<p>Give the DNS settings a bit of time to take (24-48 hours) and you&#8217;ll have your custom domain working just fine.</p> + +<p>Happy hosting!</p></description> + <link>https://btxx.org/berg</link> + <guid isPermaLink="false">https://btxx.org/berg</guid> + <pubDate>Fri, 29 Jul 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Being More Efficient as a Designer and Developer</title> + <description><h1 id="being-more-efficient-as-a-designer-and-developer">Being More Efficient as a Designer and Developer</h1> + +<p>2019-09-28</p> + +<p><em>I recently began working on a small side project</em> (a marketing site &#47; blog for an upcoming UX book I&#8217;m writing, but I have nothing to promote yet - sorry) and found myself circling around different static site generators (SSG) in the initial design concepts. The thought of learning an entirely new blogging platform was inspiring and seemed like a good excuse to expand my skillset.</p> + +<p>Although I&#8217;ve used 11ty and Hugo in the past for client work, this personal website runs on Jekyll. I&#8217;m very familiar with Jekyll and can push out a point-of-concept site in a flash with little-to-no effort. So, why was I looking to jump into a SSG I hadn&#8217;t used before? </p> + +<p>And that got me thinking&#8230; <strong>Why am I moving away from being efficient?</strong></p> + +<h2 id="before-we-begin">Before we begin&#8230;</h2> + +<p>I should preface everything else I&#8217;m going to mention in this post with this: <em>learning new stuff is awesome</em>. You should expand your knowledge as much as you can, no matter what industry you find yourself in. I&#8217;ve found it to be a great catalyst for boosting my passion in design and development.</p> + +<p>Okay, I&#8217;ve made it clear that learning is important to the growth of your career - so please keep that in mind before you read my next statement:</p> + +<p><strong>Just use what you already know.</strong></p> + +<p>By using your current experience (maybe even expertise) with a design system, CSS framework, blogging platform, programming language, etc. you can get something <em>built</em>. Not to mention you can get that thing built in a <em>fraction of the time</em>. After all, building things is kind of the point of being a designer (or developer), right?</p> + +<p>My current side project may be a slight edge case in this regard. Since it&#8217;s a personal &#8220;dev&#8221; website, most of the tech stack choices comes down to personal preference - not client requirements. But I believe my point still remains: you shouldn&#8217;t reach for something new and shiny <em>just because</em> it&#8217;s new and shiny.</p> + +<h2 id="some-vague-examples">Some vague examples</h2> + +<p>It might be easier to understand what I mean by using some possible real-world examples:</p> + +<table> +<thead> +<tr> +<th>Problem</th> +<th>New Way</th> +<th>Efficient Way</th> +</tr> +</thead> + +<tbody> +<tr> +<td>A local bakery needs product and e-cart functionality</td> +<td>Learn a new custom ecommerce platform</td> +<td>Use a popular pre-existing library you&#8217;re familiar with</td> +</tr> +<tr> +<td>Create an add-on blog for a medical clinic</td> +<td>Try a custom built static site generator and hook in a git-based CMS</td> +<td>Spin up a quick WordPress site and hand-off</td> +</tr> +<tr> +<td>UI mockups for a workout iOS app</td> +<td>Test out the newest design tool just released</td> +<td>Use your go-to default design tool you (Sketch, Figma, etc)</td> +</tr> +</tbody> +</table> + +<p>I know all of this is very much &#8220;common sense&#8221;, but you would be surprised how often we reach out for the latest and greatest tools (we are creative problem-solvers, after-all). If a current project allots you the time to learn a new skillset alongside outputting a quality product - then more power to you. In my experience that&#8217;s a rare luxury, so my advice is to focus on shipping quality work (whether that&#8217;s code, design, analytics, content, etc) instead of getting caught up in the &#8220;new and shiny&#8221;.</p> + +<h2 id="but-wait-how-when-do-i-learn-new-things">But wait, how &#47; when do I learn new things?</h2> + +<p>It isn&#8217;t exactly ground breaking to state that you should keep things simple as a developer. There are probably hundreds of posts on the web advocating for the exact same thing - which is good. At the same time, we as designers and developers need to avoid stagnation - something that can happen all too easily.</p> + +<p>So how do we learn new things? This is a hard thing to answer. Really, the best response would be: <strong>it depends on the designer &#47; developer</strong>. I know, <em>what a cop-out</em>. Unfortunately, it&#8217;s true. There is no one solution to learning anything new.</p> + +<p>The best I can do is offer up some possible options:</p> + +<ul> +<li><p>Learn outside of work</p> + +<ul> +<li>Reading &#47; listening to a technical book on your commute or before bed</li> +<li>Take an online course you can work on after hours</li> +</ul></li> +<li><p>Contribute to an open source project that you aren&#8217;t familiar with but are interested in</p> + +<ul> +<li>Even tiny contributions go a long way, don&#8217;t doubt yourself so much</li> +</ul></li> +<li><p>Ask your current company (if not a freelancer that is) to learn on their time</p> + +<ul> +<li>It&#8217;s a valid argument that your company should have vested interest in you becoming a better developer &#47; designer</li> +</ul></li> +</ul> + +<h2 id="easier-said-than-done">Easier said than done</h2> + +<p>Sometimes, even the suggestions above don&#8217;t work for certain individuals. Life is hectic and other important things can pop-up taking precedence. Don&#8217;t let it get you down - there are more important things in life than mastering the newest framework that released 25 minutes ago.</p> + +<p>My motto is to keep shipping quality products that you actually give a shit about. Otherwise it doesn&#8217;t matter how &#8220;new&#8221; it is.</p></description> + <link>https://btxx.org/being-efficient</link> + <guid isPermaLink="false">https://btxx.org/being-efficient</guid> + <pubDate>Sat, 28 Sep 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Improving Laptop Battery Performance on OpenBSD</title> + <description><h1 id="improving-laptop-battery-performance-on-openbsd">Improving Laptop Battery Performance on OpenBSD</h1> + +<p>2023-06-13</p> + +<p>It is no secret that OpenBSD has poor battery performance on laptops. Although not as impressive as something like Alpine Linux or FreeBSD, you can tweak OpenBSD <em>just enough</em> to squeeze more life out of your machine&#8217;s battery.</p> + +<h2 id="our-new-best-friend-">Our New Best Friend: <code>ampd</code></h2> + +<p>I won&#8217;t go into great detail about <code>ampd</code> here - that&#8217;s what the incredible <a href="https://man.openbsd.org/apmd">documentation is for</a>. You&#8217;ll want to make sure to start it before trying to configure it:</p> + +<pre><code>doas rcctl start apmd +</code></pre> + +<p>If already running in a live session, you can default to <code>-A</code> (auto) but I suggest setting cpu performance to low:</p> + +<pre><code>apm -L +</code></pre> + +<p>To make these changes permanent on boot:</p> + +<pre><code>doas rcctl set apmd flags -L +</code></pre> + +<p>Optimizating battery life via <code>ampd</code> will have the most noticable impact but you can improve things even further by implementing some extra &#8220;small&#8221; performance wins.</p> + +<h2 id="small-performance-wins">Small Performance Wins</h2> + +<ol> +<li>Reduce your screen&#8217;s brightness (<code>xbacklight -set 50</code>)</li> +<li>Use a lightweight window manager instead of a beefer desktop environment</li> +<li>Enable battery saving options in your system BIOS (if available)</li> +<li>Disable the fingerprint scanner and bluetooth in your system BIOS (if available)</li> +<li>Use utilities such as <code>mpv</code> and <code>ffmpeg</code> for media consumption</li> +<li>Reduce the number of open applications at any given time</li> +</ol></description> + <link>https://btxx.org/battery</link> + <guid isPermaLink="false">https://btxx.org/battery</guid> + <pubDate>Tue, 13 Jun 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Batch Converting Images to webp with macOS Automator</title> + <description><h1 id="batch-converting-images-to-webp-with-macos-automator">Batch Converting Images to webp with macOS Automator</h1> + +<p>2021-10-15</p> + +<p>A great deal of my time working as a web&#47;UI designer is spent exporting and&#47;or converting images for software products and websites. Although a lot of modern applications can render image conversions at build time, a custom conversion is sometimes requested for an image to be set as <code>webp</code>.</p> + +<p>You <em>could</em> download one of the many native apps from the Mac App Store to do this for you - but why not create your own script and run it with a simple right-click directly inside Finder? <strong>Let&#8217;s do just that!</strong></p> + +<h2 id="basic-requirements">Basic requirements</h2> + +<p><strong>Important!</strong>: As of this time of writing, the official <code>libwebp</code> package release is <em>libwebp-1.2.1-mac-10.15</em>. If this has been updated since then, change the command below to match that of the proper release version.</p> + +<ol> +<li><p>First you will need to download the <code>libwebp</code> package to your Downloads folder: <a href="https://developers.google.com/speed/webp/download">developers.google.com&#47;speed&#47;webp&#47;download</a> </p> + +<ul> +<li><em>Look for the &#8220;Download for macOS link&#8221;</em></li> +</ul></li> +<li><p>Next we will need to copy the <code>cwebp</code> folder to our <code>&#47;usr&#47;local&#47;bin</code> directory:</p> + +<ul> +<li>Open macOS Terminal</li> +<li>Run <code>sudo cp &#47;Downloads&#47;libwebp-1.2.1-mac-10.15&#47;bin&#47;cwebp &#47;usr&#47;local&#47;bin</code></li> +<li><em>Note:</em> if the <code>&#47;usr&#47;local&#47;bin</code> directory doesn&#8217;t exist, simply create it by running: <code>sudo cd &#47;usr&#47;local &#38;&#38; mkdir bin</code></li> +</ul></li> +</ol> + +<h2 id="creating-our-custom-automator-script">Creating our custom Automator script</h2> + +<ol> +<li><p>Open the macOS Automator from the Applications folder</p></li> +<li><p>Select <code>Quick Option</code> from the first prompt</p></li> +<li><p>Set &#8220;Workflow receives current&#8221; to <code>image files</code></p></li> +<li><p>Set the label &#8220;in&#8221; to <code>Finder</code></p></li> +<li><p>From the left pane, select &#8220;Library &#62; Utilities&#8221;</p></li> +<li><p>From the presented choices in the next pane, drag and drop <code>Run Shell Script</code> into the far right pane</p></li> +<li><p>Set the area &#8220;Pass input&#8221; to <code>as arguments</code></p></li> +<li><p>Enter the following code below as your script and type <code>⌘-S</code> to save (name it something like &#8220;Convert to webp&#8221;)</p> + +<p>for f in &#8220;$@&#8221; +do +&#47;usr&#47;local&#47;bin&#47;cwebp -q 85 &#8220;$f&#8221; -o &#8220;${f%.*}.webp&#8221; +done</p></li> +</ol> + +<p>For visual reference, it should look something like this:</p> + +<p>And when right-clicking an image file in the Finder window, it should now give you the option to convert:</p> + +<h2 id="making-edits-to-your-script">Making edits to your script</h2> + +<p>If you ever have the need to edit this script (for example, changing the default <code>85</code> quality parameter), you will need to navigate to your <code>~&#47;Library&#47;Services</code> folder and open your custom webp Quick Action in the Automator application. </p> + +<p>Simple as that!</p> + +<h2 id="possible-hiccups">Possible Hiccups</h2> + +<p>I was contacted by the very helpful <a href="https://kevq.uk">Kev Quirk</a> about a minor problem he encountered while following this tutorial. When trying to run <code>cwebp</code> he received the following error message:</p> + +<pre><code>cwebp cannot be opened because it&#39;s from an unverified developer +</code></pre> + +<p>Doing the next steps seemed to have fixed this issue for him:</p> + +<ol> +<li>Click on the &#8220;Open in Finder&#8221; in the error message prompt</li> +<li>Double-click on the <code>cwebp</code> utility to open in Terminal</li> +<li>You&#8217;ll then be prompted with a pop-up asking if you wish to execute</li> +</ol> + +<p>After following these steps, the issue should be resolved.</p></description> + <link>https://btxx.org/batch-webp-conversion</link> + <guid isPermaLink="false">https://btxx.org/batch-webp-conversion</guid> + <pubDate>Fri, 15 Oct 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Basic Gulp Build for Sass</title> + <description><h1 id="basic-gulp-build-for-sass">Basic Gulp Build for Sass</h1> + +<p>2019-01-15</p> + +<p>Some designers might shy away from build tools when first starting out and I can understand the reasoning - task runners like <code>gulp</code> and <code>grunt</code> can seem daunting at first. So, I&#8217;ve decided to showcase my go-to setup for <code>gulp</code> and explain what the heck it does step-by-step. </p> + +<p>Here is the final <code>gulp.js</code> file in all it&#8217;s glory:</p> + +<pre><code>var gulp = require(&#39;gulp&#39;); +var shell = require(&#39;gulp-shell&#39;); +var sass = require(&#39;gulp-sass&#39;); + +&#47;* Build and watch Jekyll (change this task to whatever you need) *&#47; +gulp.task(&#39;generate&#39;, shell.task(&#39;jekyll serve&#39;)); + +&#47;* Compile SCSS files to CSS *&#47; +gulp.task(&#39;styles&#39;, function () { + return gulp.src(&#39;_includes&#47;assets&#47;sass&#47;styles.scss&#39;) + .pipe(sass({ + outputStyle: &#39;compressed&#39; + }).on(&#39;error&#39;, sass.logError)) + .pipe(gulp.dest(&#39;_includes&#47;assets&#47;css&#47;&#39;)); +}); + +&#47;* Compile the assets *&#47; +gulp.task(&#39;assets&#39;, gulp.parallel( + &#39;styles&#39; +)); + +&#47;* Build *&#47; +gulp.task(&#39;build&#39;, gulp.series( + &#39;assets&#39;, + &#39;generate&#39; +)); +</code></pre> + +<p>Trust me, it&#8217;s not complicated at all.</p> + +<h2 id="grabbing-what-we-need">Grabbing what we need</h2> + +<p>For our basic build file we are going to need only three modules: <code>gulp</code>, <code>gulp-shell</code> and <code>gulp-sass</code>.</p> + +<pre><code>var gulp = require(&#39;gulp&#39;); +var shell = require(&#39;gulp-shell&#39;); +var sass = require(&#39;gulp-sass&#39;); +</code></pre> + +<h4 id="gulp">gulp</h4> + +<p>This is the streaming build system, without it we can&#8217;t do anything else.</p> + +<h4 id="gulp-shell">gulp-shell</h4> + +<p>A gulp command line interface for us to interact with our terminal.</p> + +<h4 id="gulp-sass">gulp-sass</h4> + +<p>Required for gulp to compile Sass into vanilla CSS.</p> + +<h4 id="bonus-tasks">Bonus tasks</h4> + +<h2 id="generating-the-build">Generating the build</h2> + +<p>Our first step is to create the default task that will generate our build. In this example we are making the assumption that we&#8217;re building a Jekyll website (but you can place any build command here):</p> + +<pre><code>gulp.task(&#39;generate&#39;, shell.task(&#39;jekyll serve&#39;)); +</code></pre> + +<p>Don&#8217;t worry if this <code>generate</code> isn&#8217;t clear, we come back to that later.</p> + +<h2 id="processing-our-pre-processor">Processing our pre-processor</h2> + +<p>We will name this next task <code>styles</code> since that&#8217;s what it outputs - our styling. We start by telling gulp where our main <code>scss</code> directory is:</p> + +<pre><code>&#47;* Change this directory to match yours *&#47; +return gulp.src(&#39;_includes&#47;assets&#47;sass&#47;styles.scss&#39;) +</code></pre> + +<p>This next piece tells the plugin to compress our final compiled CSS, log any errors if there are issues with the build and then export it to our destination directory:</p> + +<pre><code>.pipe(sass({ + outputStyle: &#39;compressed&#39; +}).on(&#39;error&#39;, sass.logError)) + +&#47;* Change this to your destination directory *&#47; +.pipe(gulp.dest(&#39;_includes&#47;assets&#47;css&#47;&#39;)); +</code></pre> + +<h2 id="building-our-assets">Building our assets</h2> + +<p>This step isn&#8217;t 100% needed, but I like to include it for when more assets need to be added (minifying JavaScript, compressing images, etc)</p> + +<pre><code>&#47;* +Compile the assets +*&#47; +gulp.task(&#39;assets&#39;, gulp.parallel( + &#39;styles&#39; +)); +</code></pre> + +<h2 id="altogether-now">Altogether now!</h2> + +<p>Now we add a task that runs all other tasks in our gulp file (in this case it will run both <code>assets</code> and <code>generate</code>)</p> + +<pre><code>&#47;* +Build +*&#47; +gulp.task(&#39;build&#39;, gulp.series( + &#39;assets&#39;, + &#39;generate&#39; +)); +</code></pre> + +<p>And that&#8217;s it - we&#8217;re done! A very basic <code>gulp</code> build for compiling Sass.</p></description> + <link>https://btxx.org/basic-gulp-build-for-sass</link> + <guid isPermaLink="false">https://btxx.org/basic-gulp-build-for-sass</guid> + <pubDate>Tue, 15 Jan 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Base64 All The Things! (Sometimes)</title> + <description><h1 id="base64-all-the-things-sometimes">Base64 All The Things! (Sometimes)</h1> + +<p>2020-03-18</p> + +<p><em>An extremely overlooked process for displaying fonts</em>, images, documents, spreadsheets, etc. on the web is the use of <strong>base64 encoding</strong>. Although it may not be the most efficient (or easy) way to display and include these elements it can be a lifesaver in certain situations.</p></description> + <link>https://btxx.org/base64-all-the-things</link> + <guid isPermaLink="false">https://btxx.org/base64-all-the-things</guid> + <pubDate>Wed, 18 Mar 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>A Warning for New Designers: Avoid Dribbble</title> + <description><h1 id="a-warning-for-new-designers-avoid-dribbble">A Warning for New Designers: Avoid Dribbble</h1> + +<p>2022-09-08</p> + +<p>Everyday a new designer begins their journey into the world of [<em>insert design industry here</em>] and it is magical! Having a fresh pair of eyes untainted from the current trends of the time can help improve design as a whole. Newbies can even teach new things to older, grumpier luddites (like yours truly). But over the years I&#8217;ve noticed a concerning trend among junior designers; <strong>they rely too heavily on Dribbble</strong>.</p> + +<p>Relying on Dribbble for minor inspiration is one thing. Referencing &#8220;shots&#8221; as justification for real-world design work? Not so much. I believe Dribbble shouldn&#8217;t be used for either of these use cases, but I can at least give a pass at browsing for basic inspiration (colors, padding, layout).</p> + +<p>Now, using concept shots to push for your own design decisions? That is a terrible idea. We &#8220;senior&#8221; designers need to step up and help newbies avoid this trap.</p> + +<h3 id="designing-for-other-designers">Designing for Other Designers</h3> + +<p>Dribbble is rarely a place for design feedback and discussion anymore. Hell, most people use it as a digital portfolio to share with prospective clients. Others use it like some form of &#8220;design Linkedin&#8221;, which has its own host of problems.</p> + +<p>Dribble is now (mainly) a place where designers post &#8220;work&#8221; for other designers. There <em>is</em> a small minority of users still looking for real, human feedback on their work - but they are a rarity.</p> + +<p>Take a look at the <a href="https://dribbble.com/shots/popular">popular shots</a> category at any give time. Most shots are promo pieces used to attract potential clients. Nearly all design concepts are impractical or simply impossible to create in a real-life setting. This is incredibly damaging to newcomers trying to learn &#8220;good&#8221; design practices. Dribbble shots simply ride the wave of the current trends, which doesn&#8217;t provide junior designers with a solid foundation or core understanding of design as a whole. It just causes them to endlessly chase the &#8220;latest and greatest&#8221; trend.</p> + +<p>Shot posters rarely go into the reasoning behind their design decisions. No research or iterations are shared to show the process. Instead it simply states &#8220;here is a cool website layout for a company that doesn&#8217;t exist&#8221;. Zero constraints or goals needed to be met. No discussion about how one version of their design didn&#8217;t perform as well when tested on real users. So of course it ends up looking <em>so cool and original</em> - <strong>it wasn&#8217;t designed in reality</strong>.</p> + +<h3 id="i-dont-have-all-the-answers---but-ill-try">I Don&#8217;t Have All the Answers - But I&#8217;ll Try</h3> + +<p>I am not the holy savior of <em>all things design</em>. I&#8217;m just a designer who has been around the block a few times. If new designers want to keep using Dribbble as their main source of guidance and think I should go kick rocks - that&#8217;s fine. I will. But for those with a little more passion for the profession, might I suggest some humble alternatives to get you on a more consistent path?</p> + +<ul> +<li>Read some good design books (to get you started): + +<ul> +<li><a href="https://sensible.com/dont-make-me-think/">Don&#8217;t Make Me Think - Revisited</a></li> +<li><a href="https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things">The Design of Everyday Things</a></li> +<li><a href="https://www.edwardtufte.com/tufte/books_vdqi">The Visual Display of Quantitative Information</a></li> +<li><a href="https://www.amazon.ca/Dieter-Rams-Less-But-Better/dp/3899555252">Less But Better</a></li> +</ul></li> +<li>Talk to <em>real</em> people + +<ul> +<li>Chat with your team&#8217;s marketers, customer support specialists, senior design leads, and developers about new features (they often have better insights than you)</li> +<li>Perform customer interviews early and often (they use your product or service - let them tell you what they want!)</li> +</ul></li> +<li>R ad through some quality UX reports and research + +<ul> +<li><a href="https://www.nngroup.com/">Nielsen Norman Group</a></li> +<li><a href="https://baymard.com/">Baymard Institute</a></li> +</ul></li> +<li>P y attention to real world design (good and bad) + +<ul> +<li>Grocery item designs, labels packaging</li> +<li>Vehicle analog and digital dashboards &#47; safety features</li> +<li>Warning and safety labeling (great for universal and minimal design inspiration)</li> +<li>Government websites and applications (notoriously terrible - great for &#8220;what not to do&#8221; examples)</li> +</ul></li> +<li>Your own experience (over time)</li> +</ul> + +<p>These are just my own suggestions to help new designers get a better foundation of core design concepts <em>before</em> falling down the Dribbble hole. Take it or leave it. I&#8217;m not your dad.</p> + +<p>Most designers who are pro-Dribbble will most likely write me off as a grumpy old man yelling at a cloud. That&#8217;s only half true. But if just one person reading this even <em>considers</em> avoiding Dribbble as a source for learning proper design - then it was worth it.</p> + +<p>Now if you will excuse me, there are many more clouds to yell at&#8230;</p></description> + <link>https://btxx.org/avoid</link> + <guid isPermaLink="false">https://btxx.org/avoid</guid> + <pubDate>Thu, 08 Sep 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Aqua UI CSS Buttons</title> + <description><h1 id="aqua-ui-css-buttons">Aqua UI CSS Buttons</h1> + +<p>2016-06-28</p> + +<p>Though it may feel like nostalgia, the old OS design for Mac was arguably better than the current iteration (as of this writing - High Sierra). I recently designed a quick Dribbble shot showcasing how the older operating system used to have so much more character and depth.</p> + +<p>Since I&#8217;ve been wanting to dip my toes into more tutorial-based articles (maybe I&#8217;ll even do some screencasts in the future), I decided to start out simple. Let&#8217;s walk through how to implement these &#8216;aqua&#8217; UI buttons with pure CSS.</p> + +<h3 id="starting-with-a-basic-foundation">Starting with a basic foundation</h3> + +<p>Since this project consists of only two buttons elements, the HTML or skeleton of this project is very straightforward:</p> + +<pre><code>&#60;button class="cancel"&#62;Cancel&#60;&#47;button&#62; +&#60;button class="confirm"&#62;Confirm&#60;&#47;button&#62; +</code></pre> + +<h3 id="styling-the-buttons">Styling the buttons</h3> + +<p>The first step is to remove the browser&#8217;s default button styling by using the <code>appearance</code> property. This will help avoid having to fight against the browser and minimize our CSS code.</p> + +<pre><code>button { + -webkit-appearance: none; + -moz-appearance: none; +} +</code></pre> + +<p>Next, we apply a fairly simple set of CSS that will be shared across both the confirm and cancel buttons:</p> + +<p>(Pay attention to the <code>transition</code> property as we will be returning to that shortly)</p> + +<pre><code>button { + -webkit-appearance: none; + -moz-appearance: none; + border: 1px solid #ccc; + border-radius: 125px; + box-shadow: inset 0 13px 25px rgba(255,255,255,0.5), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.1); + cursor: pointer; + font-family: &#39;Lucida Grande&#39;, Helvetica, Arial, sans-serif; + font-size: 2rem; + margin: 5rem 1rem; + padding: 1.2rem 4rem; + position: relative; + transition: all ease .3s; +} +</code></pre> + +<p>Then we separate the specific confirm and cancel button styles into their own class selectors:</p> + +<pre><code>button.confirm { + background: #4A90E2; + border-color: #3672B6; + color: #fff; +} + +button.cancel { + background: #D0D0D0; + border-color: #B8B8B8; + color: #6F6F6F; +} +</code></pre> + +<h3 id="playing-with-pseudo-elements">Playing with pseudo elements</h3> + +<p>Now that the button is styled and structured with basic formatting, it&#8217;s time to add that classic &#8216;shine&#8217; seen in the original Dribbble shot.</p> + +<p>The cleanest way to do this is by using the <code>:before</code> pseudo element paired with a linear-gradient background.</p> + +<pre><code>button:before { + background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); + border-radius: 125px; + content:&#39;&#39;; + height: 50px; + left: 4%; + position: absolute; + top: 1px; + transition: all ease .3s; + width: 92%; +} +</code></pre> + +<h3 id="adding-interaction">Adding interaction</h3> + +<p>The final step is adding the user hover interaction: (Remember that <code>transition</code> property?)</p> + +<pre><code>button:hover { + box-shadow: inset 0 13px 25px rgba(255,255,255,0.8), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.2); + transform: scale(1.02); +} +</code></pre> + +<p>That&#8217;s it!</p> + +<h3 id="see-it-live-on-codepen">See it live on CodePen</h3> + +<p>You can view this project on CodePen here.</p> + +<p>Feel free to fork it or implement your own!</p></description> + <link>https://btxx.org/aui</link> + <guid isPermaLink="false">https://btxx.org/aui</guid> + <pubDate>Tue, 28 Jun 2016 00:00:00 +0000</pubDate> + </item> + <item> + <title>Audio Hotkeys on Linux Mint</title> + <description><h1 id="audio-hotkeys-on-linux-mint">Audio Hotkeys on Linux Mint</h1> + +<p>2020-06-14</p> + +<p>I recently switched out the OS on my old 2011 MacBook Air with Linux Mint. It&#8217;s a distro I&#8217;ve used a few times in the past, but never set it as one of my main daily drivers until now.</p> + +<p>Setting up all my go-to applications (Sublime, LocalWP, Riot, Evolution, etc) was a breeze. The only snag I ran into was properly setting up the volume shortcuts on my wireless <a href="https://www.amazon.com/gp/product/B01AROOL12/ref=as_li_tl?ie=UTF8&amp;camp=1789&amp;creative=9325&amp;creativeASIN=B01AROOL12&amp;linkCode=as2&amp;tag=uglyduck-20&amp;linkId=5cfe5875a0f263b933692c381a6a88a9">Logitech MK235 keyboard</a>. After looking a little too long on DDG &#38; even Google, I finally found <a href="https://forums.linuxmint.com/viewtopic.php?t=253048">this forum thread with the solution</a>.</p> + +<p>For my own personal reference, I&#8217;m also going to include those code snippets here since you never know when you might need it again! And who knows, maybe this will help someone else stumbling around the internet.</p> + +<pre><code>&#47;&#47; Volume Up +pactl set-sink-volume @DEFAULT_SINK@ +5% + +&#47;&#47; Volume Down +pactl set-sink-volume @DEFAULT_SINK@ -5% + +&#47;&#47; Toggle Mute +pactl set-sink-mute @DEFAULT_SINK@ toggle +</code></pre></description> + <link>https://btxx.org/audio-hotkeys-on-linux-mint</link> + <guid isPermaLink="false">https://btxx.org/audio-hotkeys-on-linux-mint</guid> + <pubDate>Sun, 14 Jun 2020 00:00:00 +0000</pubDate> + </item> + <item> + <title>Animated Radio Tab Toggles</title> + <description><h1 id="animated-radio-tab-toggles">Animated Radio Tab Toggles</h1> + +<p>2021-01-05</p> + +<p><em>In this demo tutorial, we are making the assumption</em> that we need to create a radio slide toggle for our made-up payment options. For this we want to display 3 simple payment choices to the user:</p> + +<ul> +<li>One-time payment</li> +<li>Recurring payment</li> +<li>Free tier payment</li> +</ul> + +<h2 id="the-final-demo">The Final Demo</h2> + +<p><a href="https://codepen.io/bradleytaunt/embed/vYXjpLO">Live CodePen</a></p> + +<p>Let’s get started with the base skeleton.</p> + +<h2 id="the-html">The HTML</h2> + +<pre><code>&#60;div class="radio-toggles"&#62; + &#60;input type="radio" id="option-1" name="radio-options"&#62; + &#60;label for="option-1"&#62;One-Time&#60;&#47;label&#62; + &#60;input type="radio" id="option-2" name="radio-options" checked&#62; + &#60;label for="option-2"&#62;Recurring&#60;&#47;label&#62; + &#60;input type="radio" id="option-3" name="radio-options"&#62; + &#60;label for="option-3"&#62;Free&#60;&#47;label&#62; + &#60;div class="slide-item"&#62;&#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<h2 id="the-css">The CSS</h2> + +<p>Now for the main event – the CSS. First we want to style the wrapper that holds all of our pieces together. You can tweak this to your liking, but I prefer a simple and clean style:</p> + +<pre><code>.radio-toggles { + align-items: center; + background: #eee; + border: 1px solid lightgrey; + border-radius: 9999px; + display: flex; + justify-content: center; + margin: 20px auto; + max-width: 400px; + overflow: hidden; + padding: 4px; + position: relative; +} +</code></pre> + +<p>Next, we “hide” (only visually) the default <code>radio</code> inputs:</p> + +<pre><code>input[type="radio"] { + left: -9999px; + position: absolute; + z-index: -1; +} +</code></pre> + +<p>Then we give the corresponding <code>label</code> elements a little spacing and breathing room:</p> + +<pre><code>label { + cursor: pointer; + padding: 10px 20px; + text-align: center; + width: 33.33%; + z-index: 2; +} +</code></pre> + +<p>Remember that <code>.slide-item</code> I referenced earlier? That element will be the visual “slider” that animates between the individual radio options. We style that like so:</p> + +<pre><code>.slide-item { + background: white; + border-radius: 9999px; + box-shadow: 0 2px 4px rgba(0,0,0,0.15); + height: calc(100% - 8px); + left: calc(33.33% + 4px); + position: absolute; + width: calc(33.33% - 8px); + transition: left .4s; + z-index: 0; +} +</code></pre> + +<p>You&#8217;ll notice the <code>left</code>, <code>height</code>, and <code>width</code> properties utilize the CSS <code>calc</code> attributes – this just gives some much needed padding and visual clean-up to the whole tabbed interface.</p> + +<p>For the finishing touches, we just need to tell the <code>.slide-item</code> where to position itself based on which <code>radio</code> input is currently selected:</p> + +<pre><code>input[type="radio"]:nth-of-type(1):checked ~ .slide-item { + left: 4px; +} +input[type="radio"]:nth-of-type(3):checked ~ .slide-item { + left: calc(66.66% + 4px); +} +</code></pre> + +<p>That&#8217;s pretty much it! You now have a fully functional, animated toggle slider with just a set of simple <code>radio</code> inputs and pure CSS.</p></description> + <link>https://btxx.org/animated-toggle-tabs</link> + <guid isPermaLink="false">https://btxx.org/animated-toggle-tabs</guid> + <pubDate>Tue, 05 Jan 2021 00:00:00 +0000</pubDate> + </item> + <item> + <title>Animated Card Tiles</title> + <description><h1 id="animated-card-tiles">Animated Card Tiles</h1> + +<p>2019-02-27</p> + +<p><em>The design trend of using &#8220;cards&#8221; or &#8220;tiles&#8221; to display interactive</em> sections&#47;article headings in an app or website remains a popular choice among designers. So, let&#8217;s build a set of animated cards with only HTML &#38; CSS. </p> + +<h2 id="what-we-will-be-building-live-demo">What we will be building (live demo)</h2> + +<p>This is the set of animated card tiles we will be creating:</p> + +<p><em>(try hovering)</em></p> + +<p><a href="https://codepen.io/bradleytaunt/pen/rNjBpob">Live CodePen</a></p> + +<h2 id="the-html">The HTML</h2> + +<p>For the base skeleton of these cards we only need:</p> + +<ul> +<li><p>a <code>flexbox</code> main container to hold everything</p></li> +<li><p>a <code>.card-tile</code> parent element</p></li> +<li><p>the inner child element that will display on <code>:hover</code></p></li> +<li><p>proper <code>h4</code> and <code>p</code> tags inside that child element</p></li> +</ul> + +<p>That&#8217;s all that is needed - for now. We will be returning to this code shortly to add some extra classes to make our lives easier.</p> + +<h2 id="the-css">The CSS</h2> + +<p>First we set the main housing container to use <code>flex</code> so we save ourselves the headache of aligning all the cards in a nice row:</p> + +<pre><code>.card-tiles-container { + display: flex; + font-size: 14px; + margin: 20px 0; +} +</code></pre> + +<p>Next we create the default styling for our tile cards and set the <code>transform</code> property to scale the card on <code>:hover</code>:</p> + +<pre><code>&#47;* Default card tile styles *&#47; +.card-tile { + border: 1px solid; + border-radius: 10px; + cursor: pointer; + height: 150px; + margin: 0 10px; + overflow: hidden; + position: relative; + width: 33.33%; +} +.card-tile:hover { + transform: scale(1.1); +} +</code></pre> + +<h3 id="where-are-my-cards">Where are my cards?!</h3> + +<p>Don&#8217;t panic if you can&#8217;t <em>visually</em> see any card elements in your demo yet - that&#8217;s to be expected. We will be styling these card elements momentarily.</p> + +<p>Our next step is to hide the default inner <code>text-content</code> and only show it on hover. We achieve this by setting it&#8217;s position to <code>absolute</code>, placing it&#8217;s opacity at 0 and pushing it&#8217;s z-index back to -1.</p> + +<p>When the user hovers over a main card tile, we change the <code>text-content</code> values of both the opacity and z-index to 1.</p> + +<pre><code>&#47;* Card tile text content *&#47; +.card-tile .text-content { + background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%); + bottom: 10px; + border: 1px solid rgba(0,0,0,0.4); + border-radius: 5px; + box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), + 0 2px 4px rgba(0,0,0,0.5); + height: 65px; + left: 10px; + opacity: 0; + padding: 10px; + position: absolute; + width: calc(100% - 20px); + z-index: -1; +} +.card-tile:hover .text-content { + opacity: 1; + z-index: 1; +} +</code></pre> + +<p>Finally we add some minor styling for the inner header and paragraph tags:</p> + +<pre><code>.card-tile .text-content h4, +.card-tile .text-content p { + color: #fff; + margin: 0; + text-shadow: 1px 1px 1px rgba(0,0,0,0.6); +} +</code></pre> + +<h3 id="dont-forget-mobile">Don&#8217;t forget mobile</h3> + +<p>We want out UI to stack the cards if users are viewing them on smaller devices:</p> + +<pre><code>@media(max-width: 600px) { + .card-tiles-container { + flex-direction: column; + } + .card-tile { + margin: 0 0 10px 0; + width: 100%; + } +} +</code></pre> + +<h2 id="customizing-each-card">Customizing each card</h2> + +<p>Remember how I mentioned that we would be adding more classes to the original HTML? Now is the time. We will be including a simple class on each card tile to provide it&#8217;s own custom coloring:</p> + +<pre><code>&#60;div class="card-tiles-container"&#62; + &#60;!-- `Blue` class --&#62; + &#60;div class="card-tile blue"&#62; + &#60;div class="text-content"&#62; + &#60;h4&#62;Card Title&#60;&#47;h4&#62; + &#60;p&#62;Inner card content text&#60;&#47;p&#62; + &#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;!-- `Orange` class --&#62; + &#60;div class="card-tile orange"&#62; + &#60;div class="text-content"&#62; + &#60;h4&#62;Card Title&#60;&#47;h4&#62; + &#60;p&#62;Inner card content text&#60;&#47;p&#62; + &#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;!-- `Green` class --&#62; + &#60;div class="card-tile green"&#62; + &#60;div class="text-content"&#62; + &#60;h4&#62;Card Title&#60;&#47;h4&#62; + &#60;p&#62;Inner card content text&#60;&#47;p&#62; + &#60;&#47;div&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<p>And these color classes correlate to some new CSS styling:</p> + +<pre><code>&#47;* Blue Card *&#47; +.card-tile.blue { + background-color: #0093E9; + background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%); + border-color: #0093E9; + box-shadow: 0 4px 12px rgba(128,208,199,0.7), + inset 0 2px 1px rgba(255,255,255,0.6); +} +.card-tile.blue:hover { + box-shadow: 0 8px 18px rgba(128,208,199,0.4), + inset 0 2px 1px rgba(255,255,255,0.6); +} + +&#47;* Orange Card *&#47; +.card-tile.orange { + background-color: #FAD961; + background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%); + border-color: #F76B1C; + box-shadow: 0 4px 12px rgba(247,107,28,0.7), + inset 0 2px 1px rgba(255,255,255,0.6); +} +.card-tile.orange:hover { + box-shadow: 0 8px 18px rgba(247,107,28,0.4), + inset 0 2px 1px rgba(255,255,255,0.6); +} + +&#47;* Green Card *&#47; +.card-tile.green { + background-color: #096e40; + background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%); + border-color: #096e40; + box-shadow: 0 4px 12px rgba(9,110,64,0.7), + inset 0 2px 1px rgba(255,255,255,0.6); +} +.card-tile.green:hover { + box-shadow: 0 8px 18px rgba(9,110,64,0.4), + inset 0 2px 1px rgba(255,255,255,0.6); +} +</code></pre> + +<h3 id="adding-transitions">Adding transitions</h3> + +<p>We can now see the actual cards visually and have the ability to interact with them, but there is a problem - they don&#8217;t animate.</p> + +<p>Lucky we can target all elements we wish to animate with the <code>transition</code> property, like so:</p> + +<pre><code>&#47;* Shared transitions *&#47; +.card-tile, +.card-tile .text-content { + transition: .3s ease all; +} +</code></pre> + +<p>Done and done.</p> + +<h2 id="the-final-code">The final code</h2> + +<p>To make things easier for reference, I have included all the <code>html</code> and <code>css</code> below. Please feel free to use these cards anywhere you like and change them as you see fit!</p> + +<h3 id="html">HTML</h3> + +<pre><code>&#60;div class="card-tiles-container"&#62; + &#60;div class="card-tile blue"&#62; + &#60;div class="text-content"&#62; + &#60;h4&#62;Card Title&#60;&#47;h4&#62; + &#60;p&#62;Inner card content text&#60;&#47;p&#62; + &#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="card-tile orange"&#62; + &#60;div class="text-content"&#62; + &#60;h4&#62;Card Title&#60;&#47;h4&#62; + &#60;p&#62;Inner card content text&#60;&#47;p&#62; + &#60;&#47;div&#62; + &#60;&#47;div&#62; + &#60;div class="card-tile green"&#62; + &#60;div class="text-content"&#62; + &#60;h4&#62;Card Title&#60;&#47;h4&#62; + &#60;p&#62;Inner card content text&#60;&#47;p&#62; + &#60;&#47;div&#62; + &#60;&#47;div&#62; +&#60;&#47;div&#62; +</code></pre> + +<h3 id="css">CSS</h3> + +<pre><code>.card-tiles-container { + display: flex; + font-size: 14px; + margin: 20px 0; +} +&#47;* Shared transitions *&#47; +.card-tile, +.card-tile .text-content { + transition: .3s ease all; +} +&#47;* Default card tile styles *&#47; +.card-tile { + border: 1px solid; + border-radius: 10px; + cursor: pointer; + height: 150px; + margin: 0 10px; + overflow: hidden; + position: relative; + width: 33.33%; +} +&#47;* Blue Card *&#47; +.card-tile.blue { + background-color: #0093E9; + background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%); + border-color: #0093E9; + box-shadow: 0 4px 12px rgba(128,208,199,0.7), + inset 0 2px 1px rgba(255,255,255,0.6); +} +.card-tile.blue:hover { + box-shadow: 0 8px 18px rgba(128,208,199,0.4), + inset 0 2px 1px rgba(255,255,255,0.6); +} +&#47;* Orange Card *&#47; +.card-tile.orange { + background-color: #FAD961; + background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%); + border-color: #F76B1C; + box-shadow: 0 4px 12px rgba(247,107,28,0.7), + inset 0 2px 1px rgba(255,255,255,0.6); +} +.card-tile.orange:hover { + box-shadow: 0 8px 18px rgba(247,107,28,0.4), + inset 0 2px 1px rgba(255,255,255,0.6); +} +&#47;* Green Card *&#47; +.card-tile.green { + background-color: #096e40; + background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%); + border-color: #096e40; + box-shadow: 0 4px 12px rgba(9,110,64,0.7), + inset 0 2px 1px rgba(255,255,255,0.6); +} +.card-tile.green:hover { + box-shadow: 0 8px 18px rgba(9,110,64,0.4), + inset 0 2px 1px rgba(255,255,255,0.6); +} +&#47;* Card tile text content *&#47; +.card-tile .text-content { + background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%); + bottom: 10px; + border: 1px solid rgba(0,0,0,0.4); + border-radius: 5px; + box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), + 0 2px 4px rgba(0,0,0,0.5); + height: 65px; + left: 10px; + opacity: 0; + padding: 10px; + position: absolute; + width: calc(100% - 20px); + z-index: -1; +} +.card-tile .text-content h4, +.card-tile .text-content p { + color: #fff; + margin: 0; + text-shadow: 1px 1px 1px rgba(0,0,0,0.6); +} +&#47;* All animations on hover *&#47; +.card-tile:hover { + transform: scale(1.1); +} +.card-tile:hover .text-content { + opacity: 1; + z-index: 1; +} +@media(max-width: 600px) { + .card-tiles-container { + flex-direction: column; + } + .card-tile { + margin: 0 0 10px 0; + width: 100%; + } +} +</code></pre></description> + <link>https://btxx.org/animated-card-tiles</link> + <guid isPermaLink="false">https://btxx.org/animated-card-tiles</guid> + <pubDate>Wed, 27 Feb 2019 00:00:00 +0000</pubDate> + </item> + <item> + <title>Adventures in Creating a Minimal Alpine Linux Installer</title> + <description><h1 id="adventures-in-creating-a-minimal-alpine-linux-installer">Adventures in Creating a Minimal Alpine Linux Installer</h1> + +<p>2022-12-08</p> + +<h2 id="introduction">Introduction</h2> + +<p>I&#8217;ve made the switch to Alpine Linux as my main laptop&#47;desktop hybrid +workstation and I love it - warts and all. This post will follow my process building my Alpine Linux &#8220;installer&#8221; I used for this workstation, along with covering some bugs I found during my adventure.</p> + +<p>My main goals when starting this project were to have a daily driver that was:</p> + +<ul> +<li>free of any &#8220;real&#8221; desktop environment</li> +<li>Wayland based with SwayWM</li> +<li>as lightweight as possible</li> +</ul> + +<p>Overall, I think I achieved what I was aiming for. After logging in (there is no login manager, you do it directly through the boot terminal) you will see:</p> + +<p><img src="/public/images/alpine-1.jpg" alt="" /></p> + +<p>(You can view the <a href="/public/images/alpine-1.jpg">full res image here</a>)</p> + +<p>For reference this is running on a X260 ThinkPad with 16GB RAM, docked and connected to a 27&#8221; 4K monitor.</p> + +<blockquote> +<p>If you&#8217;d prefer to just go straight to the installer, feel free to jump over to the project repo: <a href="https://git.sr.ht/~bt/alpine-linux-setup">https:&#47;&#47;git.sr.ht&#47;~bt&#47;alpine-linux-setup</a></p> +</blockquote> + +<h2 id="getting-started">Getting Started</h2> + +<p>My main reasoning for switching away from my previous setup (Garuda Linux running Sway) to Alpine was two fold:</p> + +<ol> +<li>I wanted a more lightweight, less resource hungry system</li> +<li>I wanted to go as &#8220;full&#8221; Wayland as possible</li> +</ol> + +<h3 id="benchmarks-comparisons">Benchmarks Comparisons</h3> + +<p>I should mention that these are not official &#8220;benchmark&#8221; applications or proper testing. I merely reproduced the same tasks, using the same applications, for the same amount of time and compared the usage. Just keep that in mind!</p> + +<ul> +<li><p><strong>Garuda Linux</strong></p> + +<ul> +<li>SwayWM</li> +<li>Firefox: 9 tabs (Figma included)</li> +<li>qutebrowser: 7 tabs</li> +<li>aerc: open&#47;running</li> +<li>tut: open-running</li> +<li>Sublime Text: single project open</li> +<li><strong>Memory usage (range): 6.0-7.2 GB</strong></li> +</ul></li> +<li><p><strong>Alpine Linux</strong></p> + +<ul> +<li>SwayWM</li> +<li>Firefox: 9 tabs (Figma included)</li> +<li>qutebrowser: 7 tabs</li> +<li>aerc: open&#47;running</li> +<li>tut: open-running</li> +<li><strong>Memory usage (range): 1.0-3.5 GB</strong></li> +</ul></li> +</ul> + +<p>Switching over has basically cut my system memory usage <strong>in half</strong>. That ended up being a much better improvement than I predicted. These are beyond just numbers too - the system <em>feels</em> snappier.</p> + +<p>So, from a speed and usability stand point I considered this a success already.</p> + +<h2 id="crashes-roadblocks">Crashes &#38; Roadblocks</h2> + +<p>Of course, things didn&#8217;t run 100% flawlessly out-of-the-box. There were some pretty annoying <strong>crashes</strong> and issues.</p> + +<h3 id="greetings-tty">Greetings, tty</h3> + +<p>After installing <code>tut</code> I started walking through its guided setup. Once it prompted me to login via browser in order to authenticate, I clicked the link provided in the terminal. I was immediately thrown out of my session and into <code>tty</code>. Awesome.</p> + +<p>I&#8217;ll save you both the headache and large amount of time I wasted on this silly &#8220;bug&#8221; and just say it had to do with my user settings trying to launch &#8220;Chromium&#8221; as my default browser. I normally set qutebrowser as much default, so this was a change I needed to make anyway.</p> + +<p>I put the following in my <code>&#47;etc&#47;xdg&#47;mimeapps.list</code> (which is included by default with the installer)</p> + +<pre><code>[Default Applications] +x-scheme-handler&#47;http=org.qutebrowser.qutebrowser.desktop +x-scheme-handler&#47;https=org.qutebrowser.qutebrowser.desktop +x-scheme-handler&#47;ftp=org.qutebrowser.qutebrowser.desktop +x-scheme-handler&#47;chrome=org.qutebrowser.qutebrowser.desktop +text&#47;html=org.qutebrowser.qutebrowser.desktop +application&#47;x-extension-htm=org.qutebrowser.qutebrowser.desktop +application&#47;x-extension-html=org.qutebrowser.qutebrowser.desktop +application&#47;x-extension-shtml=org.qutebrowser.qutebrowser.desktop +application&#47;xhtml+xml=org.qutebrowser.qutebrowser.desktop +application&#47;x-extension-xhtml=org.qutebrowser.qutebrowser.desktop +application&#47;x-extension-xht=org.qutebrowser.qutebrowser.desktop +image&#47;bmp=feh.desktop +image&#47;gif=feh.desktop +image&#47;jpeg=feh.desktop +image&#47;jpg=feh.desktop +image&#47;png=feh.desktop +image&#47;tiff=feh.desktop +image&#47;x-bmp=feh.desktop +image&#47;x-pcx=feh.desktop +image&#47;x-tga=feh.desktop +image&#47;x-portable-pixmap=feh.desktop +image&#47;x-portable-bitmap=feh.desktop +image&#47;x-targa=feh.desktop +image&#47;x-portable-greymap=feh.desktop +application&#47;pcx=feh.desktop +image&#47;svg+xml=feh.desktop +image&#47;svg-xml=feh.desktop +</code></pre> + +<p>You might have also noticed that I use <code>feh</code> as my default image viewer as well. That&#8217;s just my personal preference, feel free to switch that out as you see fit.</p> + +<p><strong>Sidenote:</strong> Chromium now runs perfectly fine since the original crashes. I have no clue how or why. Wayland black magic, I assume? Maybe I installed a package that helped or an update occurred. <em>Shrug</em></p> + +<h3 id="screen-sharing">Screen Sharing</h3> + +<p>This has been a complete failure for me. I&#8217;ve tried both the Chromium and Firefox <a href="https://lr.vern.cc/r/swaywm/comments/l4e55v/guide_how_to_screenshare_from_chromiumfirefox/">implementations of these &#8220;hacks&#8221;</a> but neither work. For now I will fallback to my Garuda Linux OS boot and share my screen there. It&#8217;s a silly workaround but I hardly ever need to &#8220;show my screen&#8221; in any capacity as is.</p> + +<p>I can live without this for now. (Please <a href="https://lists.sr.ht/~bt/public-inbox">leave a message in my personal inbox</a> if you know of another workaround for this!)</p> + +<h2 id="some-minor-tweaks">Some Minor Tweaks</h2> + +<p>Some of these &#8220;hacks&#8221; or tweaks I had to implement might help others who run into similar issues when setting up their own Alpine desktops.</p> + +<h3 id="aerc-mail">aerc-mail</h3> + +<p>It is important to install <code>gawk</code> since <code>awk</code> isn&#8217;t &#8220;real&#8221; on Alpine. Once you have that on you system <code>aerc</code> will render emails out-of-the-box.[^1]</p> + +<pre><code>apk add gawk +</code></pre> + +<h3 id="sublime-text">Sublime Text</h3> + +<p>Sublime Text requires flatpak, so if that isn&#8217;t your <em>thing</em> then you&#8217;re better off snagging a different editor. I&#8217;ve tried multiple times throughout my career to use an alternate editor (preferably 100% open source) but keep finding myself returning to Sublime. Maybe one day&#8230;</p> + +<pre><code>apk add flatpak +flatpak remote-add --if-not-exists flathub https:&#47;&#47;flathub.org&#47;repo&#47;flathub.flatpakrepo +</code></pre> + +<p>Then reboot your machine for the changes to take. Login again and run:</p> + +<pre><code>flatpak install flathub com.sublimetext.three +</code></pre> + +<p>FYI: You <em>might</em> need to run the above commands under <code>sudo</code> if your current user lacks proper permissions.</p> + +<h3 id="cursors">Cursors</h3> + +<p>This was an odd edge case. For the most part, the default system cursors worked out of the box. Then I installed Firefox. That caused me to go down a rabbit-hole of (still open) tickets referencing poor cursor rendering for Wayland Firefox. Apparently some users even have their cursors disappear completely!</p> + +<p>Not to worry though - there is an easy fix!</p> + +<ol> +<li>Install <a href="https://github.com/keeferrourke/capitaine-cursors">capitaine cursors</a>: +apk add capitaine-cursors</li> +<li>Make a new directory: +mkdir -p ~&#47;.icons&#47;capitaine-cursors</li> +<li>Copy the files over: +sudo cp -r &#47;usr&#47;share&#47;icons&#47;capitaine-cursors-dark ~&#47;.icons&#47;capitaine-cursors</li> +<li>The make your cursor changes using <code>gnome-tweaks</code></li> +<li>Profit!</li> +</ol> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>Overall I&#8217;m decently satisfied with my &#8220;installer&#8221;. I&#8217;ve included <em>just enough</em> packages to hit the ground running when using this on new hardware or even needing to recover existing devices. This project certainly won&#8217;t cover the needs of all users, but my hope is that others can always fork their own and give it a spin! (Please do report any bugs or issues as you come across them!)</p> + +<p>Alpine Linux can be more than just a &#8220;server distro&#8221;. My daily driver proves it!</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>This is now included in my official installer script, but I originally had to install this manually.</li> +</ol></description> + <link>https://btxx.org/alpine</link> + <guid isPermaLink="false">https://btxx.org/alpine</guid> + <pubDate>Thu, 08 Dec 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Avoiding Featurism</title> + <description><h1 id="avoiding-featurism">Avoiding Featurism</h1> + +<p>2022-10-14</p> + +<p>I rather enjoy the term &#8220;featurism&#8221;. I came across this term while reading the wonderful article <a href="https://www.complang.tuwien.ac.at/anton/why-ancient-browsers.html">Why I don&#8217;t use Netscape</a>, which the author credits to Bernd Paysan. Although it sums up the current &#8220;digital product&#8221; industry quite well the more specific terminology, <em>creeping featurism</em>, works better:</p> + +<blockquote> +<p><strong>creeping featurism</strong> (<em>noun</em>)</p> + +<p>A condition in which one or more people, often in the form of a committee, progressively increase the scope and complexity of a project until the project is deemed infeasible and subsequently cancelled to the detriment of all involved.</p> +</blockquote> + +<p>Throughout my career of designing and developing software I have run into this exact issue far too often. The major issue with getting sucked into a black-hole of &#8220;featurism&#8221; is there is no single person to blame. It probably seems easy to place all the responsibility on PMs or team leaders, but even <em>if</em> they are the ones adding excessive complexity to a given project, it is the role of developers and designers to speak up. It requires a team effort. Therefore, the <em>whole team</em> needs to be on-guard to avoid it.</p> + +<h3 id="simple-guidelines">Simple Guidelines</h3> + +<p>These &#8220;tips&#8221; are not perfect, nor will they work for every work environment. Hopefully they can at least be used as basic guidelines and expanded upon from there.</p> + +<ul> +<li>Explore the feature&#8217;s <em>benefit</em> to the product. You need to confirm that this addition will be a net-positive for both customers and your bottom-line.</li> +<li>All team members assigned to a feature need to scope it out. Far too often I see feature sets that require design input being estimated solely by developers and vice versa.</li> +<li>Radically limit the scope of each individual task[^1]. Each task should be clear-cut, bite-sized and look almost trivial.</li> +<li>Lock-in tickets. Once they are agreed upon they <strong>cannot</strong> be altered[^2]. Anything that absolutely <em>needs</em> to be added should become a future ticket itself.</li> +<li>Follow-up with feature reviews. When a sprint or milestone is reached, it is important to reflect on what worked and what didn&#8217;t. Call out any instances where the team steered away from the guidelines above.</li> +</ul> + +<p>That&#8217;s it. Just a nice, simple baseline to branch off from to avoid &#8220;featurism&#8221;. Some items listed won&#8217;t make sense for certain teams and that&#8217;s okay. If you take the time to at least reflect on your feature workflow, I guarantee you&#8217;ll find areas to improve.</p> + +<p>Creeping featurism can kill your product and the morale of your team. Avoid it like the plague!</p> + +<h2 id="refs">Refs</h2> + +<ol> +<li>This is easier said than done. Normally you will need to have developed some form of &#8220;point system&#8221; internally, so you know how to effectively divide features.</li> +<li><em>Taking away</em> complexity, making changes that do not impact workload or reducing the ticket is fine - within reason.</li> +</ol></description> + <link>https://btxx.org/af</link> + <guid isPermaLink="false">https://btxx.org/af</guid> + <pubDate>Fri, 14 Oct 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Setting Up AdGuard Home with Eero</title> + <description><h1 id="setting-up-adguard-home-with-eero">Setting Up AdGuard Home with Eero</h1> + +<p>2022-11-04</p> + +<p>Eariler this year I posted <a href="/eero">detailed instructions on setting up Pi-Hole with Eero</a> and it seemed to help out a few people having troubles. With AdGuard Home recently popping up on the <a href="https://news.ycombinator.com/item?id=33387678">frontpage of HackerNews</a>, I thought now would be a great time to post instructions of setting up <em>that</em> service alongside Eero devices.</p> + +<h2 id="what-youll-need">What You&#8217;ll Need</h2> + +<ol> +<li>Raspberry Pi device (I recommend the Pi Zero for simplicity and low cost)</li> +<li>microSD card</li> +<li><a href="https://www.raspberrypi.com/software/">Raspberry Pi Imager</a></li> +<li>micro USB to ethernet adapter (check your local Amazon)</li> +<li>Patience!</li> +</ol> + +<h2 id="setting-up-the-raspberry-pi">Setting Up the Raspberry Pi</h2> + +<p>The first thing we need to do is flash Raspberry Pi <strong>Lite</strong> onto our SD card. Open Raspberry Pi Imager, select the <strong>Lite</strong> version of the OS and your respective media (the SD card):</p> + +<p><img src="/public/images/rpi-lite-os.webp" alt="Raspberry Pi Lite" /></p> + +<p>Don&#8217;t flash anything just yet! Be sure to use the gear icon and edit the settings. Set a custom hostname, enable <code>ssh</code> and setup a proper user:</p> + +<p><img src="/public/images/rpi-adguard-1.webp" alt="Imager settings" /></p> + +<h2 id="plug-it-in-and-boot">Plug it in and Boot!</h2> + +<p>Put the SD card into your Pi, connect power and ethernet. Give it a bit of time to boot up. Once you see a nice solid green LED, go back to your local computer&#8217;s terminal and enter the following command:</p> + +<pre><code>ssh piguard@piguard.local +</code></pre> + +<p>If everything was set up properly you will be asked to trust this device. Next, you will be prompted to enter the device password you setup.</p> + +<p>Once you are connected directly to the Pi, it&#8217;s best to check for updates:</p> + +<pre><code>sudo apt update +</code></pre> + +<p>&#8230;and if updates are in fact available, install them via:</p> + +<pre><code>sudo apt upgrade +</code></pre> + +<h2 id="installing-adguard-home">Installing AdGuard Home</h2> + +<p>Simply run the automated installer:</p> + +<pre><code>curl -s -S -L https:&#47;&#47;raw.githubusercontent.com&#47;AdguardTeam&#47;AdGuardHome&#47;master&#47;scripts&#47;install.sh | sh -s -- -v +</code></pre> + +<p>Follow the instructions and you&#8217;ll be setup in no time! To view your AdGuard dashboard at any time, you can now simply navigate to <code>piguard.local</code>.</p> + +<p>If you run into any issues, I strongly suggest <a href="https://github.com/AdguardTeam/AdGuardHome#getting-started">reading through the &#8220;Getting Started&#8221; guide</a>.</p> + +<h2 id="configuring-the-eero-app">Configuring the Eero App</h2> + +<p>Once your AdGuard Home server is installed and running, you can finally point your Eero network at it.</p> + +<ol> +<li>Open the Eero app (iOS or Android)</li> +<li>Navigate to <strong>Settings</strong> &#62; <strong>Network Settings</strong> &#62; <strong>DNS</strong></li> +<li>Select <strong>Customized DNS</strong> and enter both your saved IPv4 &#47; IPv6 values (These can be found under the <code>Setup Guide</code> tab in the main AdGuard Dashboard)</li> +<li>Eero will prompt you to reboot your network - do it</li> +</ol> + +<p>After the system reboots everything <em>should</em> be working as intended!</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>I&#8217;ve personally switched over from Pi-Hole to AdGuard Home - it just feels more robust and the UI is significantly cleaner. Hopefully this helps others trying to do the same!</p></description> + <link>https://btxx.org/adguard</link> + <guid isPermaLink="false">https://btxx.org/adguard</guid> + <pubDate>Fri, 04 Nov 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Website Backups with Apple iCloud</title> + <description><h1 id="website-backups-with-apple-icloud">Website Backups with Apple iCloud</h1> + +<p>2024-02-16</p> + +<p>My main work machine, an M2 MacBook Air, meshes really well with my iPhone SE (they are in the same ecosystem after all - duh!). Since both of these devices are Apple products, it makes sense that I pay for the optional iCloud service for extra storage. 50GB to be exact. I only need to bare minimum which costs just $1.68 a month, making this storage option cheaper than most cups of coffee these days.</p> + +<p>Recently I&#8217;ve been using iCloud as my &#8220;middle-man&#8221; backup system. I still have local, offline storage for most personal data but having additional off-site backups is never a bad thing. I make things easier for myself by taking advantage of <code>rsync</code>. You&#8217;ll need to make sure you have that program installed before trying this yourself:</p> + +<pre><code># This assumes you have homebrew installed first +brew install rsync +</code></pre> + +<p>Then, whenever I feel like backing up an existing project or website I simply run:</p> + +<pre><code>rsync -a user_name@ssh.webserver.domain:&#47;home&#47;var&#47;www&#47; &#47;Users&#47;username&#47;Library&#47;Mobile\ Documents&#47;com\~apple\~CloudDocs&#47;Backups&#47;site-backup +</code></pre> + +<blockquote> +<p>Note: The <code>-a</code> option tells <code>rsync</code> to sync directories recursively, transfer special and block devices, preserve symbolic links, modification times, groups, ownership, and permissions.</p> +</blockquote> + +<p>The beautiful magic of <code>rsync</code>! Obviously, you&#8217;d want to properly name your directories (ie. <code>&#47;Backups&#47;site-backup</code>) for a cleaner structure and ensure that your iCloud directory is set correctly. (remember to read code before just copy-pasting!). With this approach you can backup entire server directories or be specific with each individual project folder. I would also recommend setting up some alias in your <code>.bashrc</code> or <code>.zshrc</code> etc. to make things more streamlined when running backups manually:</p> + +<pre><code>alias site-backup="rsync -a user_name@ssh.webserver.domain:&#47;home&#47;var&#47;www&#47; &#47;Users&#47;username&#47;Library&#47;Mobile\ Documents&#47;com\~apple\~CloudDocs&#47;Backups&#47;site-backup" +# Then you simply run the following for a manual backup: +site-backup +</code></pre> + +<p>You can take this further by automating things via cron jobs, but for my use case that is a little overkill. Hopefully this helps anyone looking for a quick and dirty backup system, especially one that can piggyback of your existing iCloud that you might be paying for already.</p></description> + <link>https://btxx.org/Website_Backups_with_Apple_iCloud</link> + <guid isPermaLink="false">https://btxx.org/Website_Backups_with_Apple_iCloud</guid> + <pubDate>Fri, 16 Feb 2024 00:00:00 +0000</pubDate> + </item> + <item> + <title>Switching Things Over to ikiwiki</title> + <description><h1 id="switching-things-over-to-ikiwiki">Switching Things Over to ikiwiki</h1> + +<p>2023-12-17</p> + +<p>I&#8217;ve done it again. My personal website is no longer generated with <a href="https://barf.btxx.org">barf</a> but is instead built on top of ikiwiki. The old RSS feed (<a href="https://btxx.org/atom.xml">btxx.org&#47;atom.xml</a>) still exists but will no longer receive updates. The new feed can be found on the bottom of the homepage (<a href="/index.rss">index.rss</a>)</p> + +<h2 id="why-a-wiki">Why a Wiki?</h2> + +<p>I love the simplicity of a minimal blog, which is why I always gravitated towards purely &#8220;static&#8221; site builders. Over time though, I found two minor issues that slowly chipped away at me: ease-of-use and flexibility.</p> + +<p>I had a vision, back when I began tinkering with my own place on the web, of building out my own personal &#8220;resource center&#8221; or wiki. Often times through work or personal projects I stumble into little problems that I need to solve. Most times I find a solution and move on with my life. The problem with this approach is <em>lack of documentation</em>.</p> + +<p>What if I come across that issue at a later point in time? Will I even remember my old solution? Probably not. So, I&#8217;ve made the switch to a more flexible, personal wiki (which also happens to be a blog!)</p> + +<h2 id="text-editors-terminals-and-web-ui---oh-my">Text Editors, Terminals, and Web UI - Oh My!</h2> + +<p>ikiwiki comes packed with multiple ways to publish pages and posts. Since it is built with ikiwiki and git version control in mind, you have the ability to push out changes directly to your server similar to that of pre-existing static site generators. It also gives you the choice to <code>ssh</code> directly into your server and publish content from your terminal if you so desire.</p> + +<p>Best of all, ikiwiki offers a web UI interface. This is something I have long missed since leaving &#8220;dynamic&#8221; websites behind.</p> + +<h2 id="but-wait-theres-more">But Wait, There&#8217;s More!</h2> + +<p>Did I mention that this site now supports a built-in search form <em>and</em> a comment system? I&#8217;ve been wanting comments or discussions directly on my personal web space for the longest time and now I do! The search function is really an added bonus, mostly for my own personal use to find something I documented quickly.</p> + +<h2 id="broken-links-and-bugs">Broken Links and Bugs</h2> + +<p>I&#8217;ve done my best to properly forward all original posts and pages to their new URLs - but I&#8217;m sure some things will be overlooked. So please feel free to reach out and let me know if anything seems broken.</p> + +<p>I look forward to growing out this &#8220;platform&#8221; and seeing how it impacts my workflow writing documentation &#47; blog posts. I hope you&#8217;ll come along for the ride!</p></description> + <link>https://btxx.org/Switching_Things_Over_to_ikiwiki</link> + <guid isPermaLink="false">https://btxx.org/Switching_Things_Over_to_ikiwiki</guid> + <pubDate>Sun, 17 Dec 2023 00:00:00 +0000</pubDate> + </item> + <item> + <title>Please Make Your Table Headings Sticky</title> + <description><h1 id="please-make-your-table-headings-sticky">Please Make Your Table Headings Sticky</h1> + +<p>2024-02-23</p> + +<p>I often stumble upon large data sets or table layouts across the web. When these tables contain hundreds of rows of content, things become problematic once you start to scroll&#8230;</p> + +<p><a href="/public/videos/not-fixed-header-tables.mp4">Link to video example of standard table header</a></p> + +<p>Look at that table header disappear! Now, if I scroll all the way down to item #300 (for example) will I remember what each column&#8217;s data is associated with? If this is my first time looking at this table - probably not. Luckily we can fix this (no pun intended!) with a tiny amount of CSS.</p> + +<h2 id="sticky-header">Sticky Header</h2> + +<p>Check it out:</p> + +<p><a href="/public/videos/fixed-header-tables.mp4">Link to video example of fixed table header</a></p> + +<p>Pretty awesome, right? It might look like magic but it&#8217;s actually very easy to implement. You only need to add 2 CSS properties on your <code>thead</code>:</p> + +<pre><code>position: sticky; +top: 0; +</code></pre> + +<p>That&#8217;s it! Best of all, <code>sticky</code> has <a href="https://caniuse.com/?search=sticky">~96% global support</a> which means this isn&#8217;t some &#8220;bleeding-edge&#8221; property and can safely support a ton of browsers. Not to mention the improved experience for your end-users!</p> + +<p>You can view a live demo of this table on the <a href="https://codepen.io/bradleytaunt/pen/bGZyJBj">CodePen example pen</a>.</p> + +<p>If you found this interesting, feel free to check out my other table-focused post: <a href="https://btxx.org/posts/tables/">Making Tables Responsive With Minimal CSS</a></p></description> + <link>https://btxx.org/Please_Make_Your_Table_Headings_Sticky</link> + <guid isPermaLink="false">https://btxx.org/Please_Make_Your_Table_Headings_Sticky</guid> + <pubDate>Fri, 23 Feb 2024 00:00:00 +0000</pubDate> + </item> + <item> + <title>OpenBSD is a Cozy Operating System</title> + <description><h1 id="openbsd-is-a-cozy-operating-system">OpenBSD is a Cozy Operating System</h1> + +<p>2024-04-11</p> + +<p>With the recent release of OpenBSD 7.5, I decided to run through my <a href="https://git.btxx.org/open-suck/about/">personal OpenBSD &#8220;installer&#8221;</a> for laptop&#47;desktop devices. The project is built off of the <code>dwm</code> tiling window manager and only installs a few basic packages. The last time I updated it was with the release of 7.3, so it&#8217;s been due for an minor rework.</p> + +<p>While making these minor changes, I remembered how incredibly easy the entire install process for OpenBSD is and how <em>cozy</em> the entire operating system feels. All the core systems just work out the box. Yes, you need to &#8220;patch&#8221; in WiFi with a firmware update, so you&#8217;ll need an Ethernet connection during the initial setup. Yes, the default desktop environment is not intuitive or ideal for newcomers.</p> + +<p>But the positives heavily outweigh the negatives (in my opinion):</p> + +<ul> +<li>Incredibly secure operating system (No <code>xz</code> drama here&#8230;)</li> +<li>Detailed documentation. Probably one of the best of any OS</li> +<li>Much smaller codebase and small core team</li> +<li><em>Complete</em> operating system (kernel, userland utilities, libraries, applications combined)</li> +</ul> + +<p>These points might not seem important to others, but they are to me. Maybe you&#8217;re possibly interested in checking it out yourself? If you are, then read on&#8230;</p> + +<h2 id="try-it-yourself">Try it Yourself!</h2> + +<p>I&#8217;ve tried my best to write up a simplified, noob-friendly guide on both setting up the core OpenBSD system, along with installing a simple <code>dwm</code> based desktop environment. These are both focused on personal devices (laptops&#47;computers), so if you&#8217;re looking for server-specific setups you won&#8217;t find that here!</p> + +<p>You can find both of those wiki-pages below:</p> + +<ul> +<li><a href="https://btxx.org/wiki/openbsd/installation/">Installing OpenBSD</a></li> +<li><a href="https://btxx.org/wiki/openbsd/desktop_environment/">Setting up a Desktop Environment for OpenBSD</a></li> +</ul> + +<p>Some additional reading I highly recommend is: <a href="https://www.c0ffee.net/blog/openbsd-on-a-laptop">c0ffee.net&#47;blog&#47;openbsd-on-a-laptop</a></p></description> + <link>https://btxx.org/OpenBSD_is_a_Cozy_Operating_System</link> + <guid isPermaLink="false">https://btxx.org/OpenBSD_is_a_Cozy_Operating_System</guid> + <pubDate>Thu, 11 Apr 2024 00:00:00 +0000</pubDate> + </item> + <item> + <title>New Domain and Code Forge</title> + <description><h1 id="new-domain-and-code-forge">New Domain and Code Forge</h1> + +<p>2024-01-29</p> + +<p>As you can clearly see, my site&#8217;s domain has switched over to <strong>btxx.org</strong>. This post will go into details about the reason for this URL swap (spoilers: I&#8217;m a cheapskate) - but that isn&#8217;t all. I have moved my personal git repositories over to my own hosting. I will explain the reasoning for that switch as well.</p> + +<p>But enough introductions, let&#8217;s get into it!</p> + +<h2 id="bt.ht-is-no-more">bt.ht is No More</h2> + +<p>I&#8217;ve abandoned <code>bt.ht</code>. Well, kind of. That domain doesn&#8217;t expire until 2025, which works out nicely since I can keep a complete web forward active for the entire year. This will avoid such a radical switch, similar to what I did years ago with my &#8220;uglyduck&#8221; domain<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>. Hopefully anyone who follows my dumb ramblings will have more than enough time to become familiar with the new URL.</p> + +<p>For reference, those interested in updating their RSS will need to use the latest URLs: </p> + +<ul> +<li><a href="https://btxx.org/index.rss">RSS</a></li> +<li><a href="https://btxx.org/index.atom">Atom</a></li> +</ul> + +<p>You have roughly a year to do so, since new posts should still automatically appear even with defaulting to the older URL (hooray for 301 redirects!).</p> + +<p>There were two core reasons for switching domains. The first was based off a change in ownership with my previous domain registrar, Gandi. You can read more details <a href="https://news.ycombinator.com/item?id=35080777">here</a>, but they were essentially bought out, then decided to cancel their free email service and raised their prices. Not many registrars support the <code>.ht</code> TLD, so moving to another provider was already proving to be difficult. Once my mind was made up that I didn&#8217;t want to support such shady actions from a company, I thought even more about the concept of spending <em>so much</em> on a domain name in the first place. It was a novelty to have such a &#8220;short&#8221; domain, but that seems silly in hindsight.</p> + +<p>Just take a look at the differences in domain costs and email services below:</p> + +<table> +<thead> +<tr> +<th>URL</th> +<th>Domain&#47;year</th> +<th>Email&#47;year</th> +<th>Total</th> +</tr> +</thead> + +<tbody> +<tr> +<td>bt.ht</td> +<td>$172</td> +<td>$60</td> +<td>$232</td> +</tr> +<tr> +<td>btxx.org</td> +<td>$17</td> +<td>$19</td> +<td>$36</td> +</tr> +</tbody> +</table> + +<p>By making this switch (for both my domain and email service) I would save a yearly total of <strong>$196 USD</strong>. This was a no-brainer. The minute I did the math I thought, &#8220;Hell, I&#8217;m already moving everything to a different registrar <em>and</em> I need to look for a separate email provider&#8230;why not just start fresh with a new, <em>cheaper</em> domain?&#8221;</p> + +<p>So that&#8217;s what I&#8217;ve done.</p> + +<h2 id="my-own-code-forge">My Own Code Forge</h2> + +<p>As some people in the open source community might already be aware, <a href="https://sourcehut.org">sourcehut</a> had a major outage a couple weeks back. It lasted a few days and all services were impacted. This meant that all publicly hosted websites, build processes and <code>git</code> repositories were unavailable. It was no fault of sourcehut of course, they were viciously attacked for no <em>real</em> reason. </p> + +<p>But this outage did get me thinking about what it means to &#8220;control&#8221; my own code. I always liked the idea of hosting my own git projects but relied on third-party services since they were more convenient. The problem with entrusting anything, not just code storage, to third-party services is lack of oversight. You really have no idea what is happening behind the scenes. You don&#8217;t control your own backups. You don&#8217;t have the freedom to tweak UI or user flow of your project views (which I understand is certainly an edge-case).</p> + +<p>These thoughts lead me to research some &#8220;self-hosted&#8221; code forge options. My main contenders were:</p> + +<ul> +<li>GitWeb</li> +<li>cgit</li> +<li>Gitea</li> +</ul> + +<p>I&#8217;ll save you the suspense: I went with cgit. Getting GitWeb configured properly was giving me a lot of issues and Gitea seemed overkill for my person needs. I host through NearlyFreeSpeech (running FreeBSD) and they had a decent tutorial for setting cgit up on their servers. I&#8217;ve updated my own wiki for those interested in doing something similar: <a href="/wiki/cgit">read the full step-by-step instructions for setting up cgit</a>.</p> + +<p>I still need to go through most of the existing projects on sourcehut and update their READMEs and purge the contents. The last thing I want to do is have users confused about which repo is the &#8220;real&#8221; one.</p> + +<p>Fore reference the my repos are now located here: <a href="https://git.btxx.org">git.btxx.org</a></p> + +<p>(I plan to place this in the main navigation soon&#8230;)</p> + +<h2 id="mirror-mirror-on-the-wall">Mirror, Mirror on the Wall&#8230;</h2> + +<p>I&#8217;m aware that to have extra protection from &#8220;downtime&#8221; that I should also mirror my code on separate forges. I plan to do this sometime in the future, but this isn&#8217;t a major priority for me currently. When the time comes I&#8217;ll be sure to update my repos referring to the mirrors (whatever platform that is I choose).</p> + +<h2 id="room-for-improvement">Room for Improvement</h2> + +<p>My code forge is far from perfect. Mobile view is lacking, there is no dark mode support and things could be slightly more intuitive. But I love it. The beauty of hosting everything on my own is that I can improve these things myself. For now, I&#8217;m happy with the outcome!</p> + +<div class="footnotes"> +<hr/> +<ol> + +<li id="fn1"> +<p>Someone oddly picked up that domain and piggybacked off the back-links. They happen to also be a designer&#8230;Guess the naming was that cool? &#160;<a href="#fnref1" rev="footnote">&#8617;</a></p> +</li> + +</ol> +</div></description> + <link>https://btxx.org/New_Domain_and_Code_Forge</link> + <guid isPermaLink="false">https://btxx.org/New_Domain_and_Code_Forge</guid> + <pubDate>Mon, 29 Jan 2024 00:00:00 +0000</pubDate> + </item> + <item> + <title>My Text Edtior is Not Open Source</title> + <description><h1 id="my-text-edtior-is-not-open-source">My Text Edtior is Not Open Source</h1> + +<p>2024-01-02</p> + +<p>I&#8217;ve been using Sublime Text on and off for longer than I can remember. I think Sublime has been around since the start of my &#8220;real&#8221; career over 10 years ago, but I could be mistaken<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>. It certainly <em>feels</em> that long. And in that time I have never gotten upset with Sublime. I&#8217;ve never rage quit or ran into an issue of Sublime not being able to <em>do the thing I wanted it to do</em>. As much of a cliche it may sound: it just works.</p> + +<p>Even when I switch editors (VSCode, Geany, kitty+vim etc.) for a period of time, I find myself always coming back to Sublime. The only reason I try other editors is simply that: to try them. Maybe that&#8217;s why these editors don&#8217;t click with me. Maybe I&#8217;m giving Sublime an unfair advantage since I&#8217;m simply &#8220;testing&#8221; other editors, rather than looking for a solid alternative.</p> + +<p>And don&#8217;t get me wrong, I understand <em>why</em> editors like VSCode are extremely popular. VSCode has a massive ecosystem and new plugins are generally developed for that editor before all others. Finding solutions to problems online is very easy, since it is so popular. But best of all - it&#8217;s open source<sup id="fnref2"><a href="#fn2" rel="footnote">2</a></sup>.</p> + +<p>So why am I using a <em>non</em>-open source editor? (Spoilers: because it&#8217;s a great editor)</p> + +<h2 id="a-proprietary-editor---how-could-you">&#8220;A Proprietary Editor - How Could You?!&#8221;</h2> + +<p>I know, I know. If you&#8217;re familiar with me or the things I write about it must seem odd that I would willingly use proprietary software over open source. This is something I struggle with constantly day-to-day in the realm of &#8220;personal tech&#8221;. I find with age I become more open-minded to having a diverse range of software and hardware choices. Open source is best in <em>concept</em> but not always best in practice.</p> + +<p>The problem is that Sublime is just such a <em>great</em> editor. I can&#8217;t ignore quality and refuse to use good software solely based on it&#8217;s licensing. A few personal things I love about Sublime:</p> + +<ul> +<li>Incredibly fast</li> +<li>Handles massive files without breaking a sweat</li> +<li>Minimal resource footprint (ex. uses &#60;0.1% CPU working on huge projects)</li> +<li>Large ecosystem of plugins&#47;themes</li> +<li>No Electron</li> +</ul> + +<p>Other editors can certainly check off a few of those boxes as well, but you&#8217;d be hard-pressed to find one that checks off them all.</p> + +<h2 id="being-a-cheapskate">Being a Cheapskate</h2> + +<p>I must confess something that I think most Sublime users are guilty of: I&#8217;ve never <a href="https://www.sublimehq.com/store/text">bought a license</a>. I&#8217;ve installed and used Sublime on countless machines, on multiple operating systems from Linux to Windows to MacOS. That <code>Unregistered</code> text in the top right application bar has been with me since the beginning. But that in no longer the case.</p> + +<p><strong>I finally purchased a license.</strong> I bundled it with <a href="https://www.sublimemerge.com/">Sublime Merge</a>, so it ended up costing me $168 USD. When I initially looked at that price tag I must admit I was tempted to close the browser tab and forget the whole thing. But then I realized I have been using this editor <em>free of charge</em> for over 10 years. (Not to mention using Sublime Merge for quite some time as well!)</p> + +<p>So I did a little math:</p> + +<pre><code>$168 &#47; 10 years = $16.80 +</code></pre> + +<p>Looking at it in that perspective, it&#8217;s actually a great deal. Not to mention they have very respectable terms for their licenses:</p> + +<blockquote> +<p>Personal licenses come with 3 years of updates. After 3 years, you&#8217;ll be able to continue to use the last version released within 3 years of purchase (in other words, licenses do not expire). Any versions released 3 years or more after the purchase date will require a paid upgrade to use.</p> + +<p>Individual licenses are valid for 3 years of updates, but do not expire after 3 years. Only if you wish to use newer versions will an upgrade fee be required. </p> + +<p>Licenses are per-user, so you&#8217;re welcome to use the one license on all computers and operating systems where you are the primary user.</p> +</blockquote> + +<p>I won&#8217;t copy everything from their main <a href="https://www.sublimehq.com/sales_faq">FAQ page</a> but as you can see it is very reasonable. I also get to feel decent for supporting developers who make very good software.</p> + +<h2 id="final-notes">Final Notes</h2> + +<p>This post is not meant to convince you to switch or anything of that nature. Use what works for you! I just wanted to share my own personal preference when it came to my main text editor. Maybe this will also convince &#8220;hardcore&#8221; open source people (like me!) to realize it is <em>okay</em> to pay for software sometimes&#8230;</p> + +<hr/> + +<p>I should be very clear about something: this post <em>is not an advertisement</em>. I have not received any money or &#8220;kick backs&#8221; to write about my happy times with Sublime. This is purely my own opinion that I wanted to share with the internet!</p> + +<p>BTW if anyone from SublimeHQ happens to come across this post: PLEASE look into building a &#8220;native&#8221; version of Sublime Text for FreeBSD&#47;OpenBSD. I (and many others) would be forever grateful!</p> + +<div class="footnotes"> +<hr/> +<ol> + +<li id="fn1"> +<p>Sublime does mention copyright since 2006&#8230;&#160;<a href="#fnref1" rev="footnote">&#8617;</a></p> +</li> + +<li id="fn2"> +<p>Not the pre-packaged Microsoft version&#160;<a href="#fnref2" rev="footnote">&#8617;</a></p> +</li> + +</ol> +</div></description> + <link>https://btxx.org/My_Text_Editor_Is_Not_Open_Source</link> + <guid isPermaLink="false">https://btxx.org/My_Text_Editor_Is_Not_Open_Source</guid> + <pubDate>Tue, 02 Jan 2024 00:00:00 +0000</pubDate> + </item> + <item> + <title>Installing WordPress on NearlyFreeSpeech</title> + <description><h1 id="installing-wordpress-on-nearlyfreespeech">Installing WordPress on NearlyFreeSpeech</h1> + +<p>2024-05-27</p> + +<p>I recently went through the process of porting over my wife&#8217;s small business website (built off of WordPress + Woocommerce) from EasyWP to NearlyFreeSpeech. Although the process was fairly easy-going, I thought I would post my complete process here. That way, others who might wish to make the same switch can avoid running into any minor bumps along the way.</p> + +<blockquote> +<p>Some of this information has been lifted from <a href="https://members.nearlyfreespeech.net/tdarb/support/wordpress">the official NFS docs</a>, but these pages require a membership to access</p> +</blockquote> + +<h3 id="download-wordpress">Download WordPress</h3> + +<p>We will use the <code>wp-cli</code> that comes packaged with NearlyFreeSpeech (NFS):</p> + +<ol> +<li>Connect to your site via SSH.</li> +<li>Change to the directory you want to be the base of your blog (e.g. &#47;home&#47;public if WordPress will be running the whole site, or &#47;home&#47;public&#47;blog if you want to share the site with other content).</li> +</ol> + +<p>For help using WP-CLI from the SSH command line, use this command:</p> + +<pre><code>wp help +</code></pre> + +<p>To download and unpack the latest version of WordPress, enter the following command:</p> + +<pre><code>wp core download +</code></pre> + +<h2 id="create-a-mysql-process-and-database">Create a MySQL Process and Database</h2> + +<p>Follow the instructions in the NearlyFreeSpeech.NET FAQ to <a href="https://members.nearlyfreespeech.net/faq?q=MySQL#MySQL">create a MySQL process</a> if you haven&#8217;t already.</p> + +<p>Next, <a href="https://members.nearlyfreespeech.net/faq?q=CreateDatabase#CreateDatabase">create a new database</a> within that process. Note the name of the process and the name of the database.</p> + +<p><strong>Important</strong>: Do not use your own MySQL credentials to connect WordPress to your database. Instead, create a new user. This will protect your member password in the event that your site becomes compromised.</p> + +<ul> +<li>Click on the <a href="https://members.nearlyfreespeech.net/mysql">MySQL tab</a> in the member interface</li> +<li>Click &#8220;[Open phpMyAdmin](<a href="https://phpmyadmin.nearlyfreespeech.net/">https:&#47;&#47;phpmyadmin.nearlyfreespeech.net&#47;</a>&#8221; in the Actions box.</li> +<li>Enter the DSN (&#8220;Server&#8221;) of your MySQL Process, MySQL username, and MySQL password. The DSN and username can be found on the Process Information page in our member UI.</li> +<li>Click on the &#8220;Users&#8221; tab.</li> +<li>Click &#8220;Add user.&#8221; (It&#8217;s toward the bottom left of the page.)</li> +<li>Give the user a descriptive name. We&#8217;ll use exampledbuser here, but you should pick something better, like wpuser or something representative of your blog.</li> +<li>Make sure to leave the Host: selectbox on &#8220;Any host.&#8221;</li> +<li>Click the &#8220;Generate&#8221; link to generate a nice strong password.</li> +<li>Use cut and paste to copy the new password somewhere, you&#8217;ll need it later. (We&#8217;ll use dbpassword here.)</li> +<li>Grant the following permissions to the new user: + +<ul> +<li>All the permissions except &#8220;file&#8221; in the &#8220;data&#8221; box,</li> +<li>Everything in the &#8220;structure&#8221; box, and</li> +<li>&#8220;LOCK TABLES&#8221; in the &#8220;administration&#8221; box.</li> +</ul></li> +<li>Click the &#8220;Go&#8221; button in the lower right.</li> +<li>Exit phpMyAdmin.</li> +</ul> + +<h2 id="generate-a-wordpress-configuration-file">Generate a WordPress Configuration File</h2> + +<p>At the SSH command line (replace the examples with the info for the database and user you created above):</p> + +<pre><code>wp core config --dbhost=example.db --dbname=exampledb --dbuser=exampledbuser --dbpass=dbpassword +chmod 644 wp-config.php +</code></pre> + +<h2 id="run-the-wordpress-installation-and-setting-permissions">Run the WordPress Installation and Setting Permissions</h2> + +<p>To get your permalinks to work properly, you must set up an .htaccess file. </p> + +<ol> +<li>Go to the Dashboard for your WordPress site. (e.g. <a href="https://www.example.com/wp-admin/index.php">https:&#47;&#47;www.example.com&#47;wp-admin&#47;index.php</a>)</li> +<li>In the navigation sidebar, find Settings and, under that, Permalinks.</li> +<li>Select your preferred link style under &#8220;Common Settings.&#8221; (We like &#8220;Day and name.&#8221;)</li> +<li>Scroll down and select the &#8220;Save Changes&#8221; button.</li> +</ol> + +<p>Next, create an <code>.htaccess</code> file for your WordPress site. We suggest doing this directly from the SSH command line using the cat shell command:</p> + +<pre><code>cat &#62;.htaccess &#60;&#60;NFSNRULES # This line is a shell command, not part of .htaccess! +RewriteEngine On +RewriteBase &#47; +RewriteRule ^index\.php$ - [L] +RewriteCond %{REQUEST_FILENAME} !-f +RewriteCond %{REQUEST_FILENAME} !-d +RewriteRule . &#47;index.php [L] +NFSNRULES +</code></pre> + +<p>If you prefer, you can copy-paste the text into an editor:</p> + +<pre><code>RewriteEngine On +RewriteBase &#47; +RewriteRule ^index\.php$ - [L] +RewriteCond %{REQUEST_FILENAME} !-f +RewriteCond %{REQUEST_FILENAME} !-d +RewriteRule . &#47;index.php [L] +</code></pre> + +<p>We need to run the following commands in order to install, uninstall, activate, and deactivate plugins&#47;themes from within the admin web GUI of WordPress:</p> + +<pre><code>chgrp web .htaccess +chmod 664 .htaccess +chgrp -R web * +find . -type d -exec chmod 775 {} \; +find . -type f -exec chmod 664 {} \; +wp config set FS_METHOD direct +</code></pre> + +<h2 id="enable-file-uploading">Enable File Uploading</h2> + +<p>In your main WordPress installation folder enter the following SSH commands:</p> + +<pre><code>cd wp-content +mkdir -p uploads +chgrp -R web uploads +chmod -R 775 uploads +</code></pre> + +<h2 id="keeping-wordpress-up-to-date-automatically-via-command-line">Keeping WordPress Up-To-Date Automatically via Command Line</h2> + +<p>It is <strong>critically</strong> important to keep your WordPress installation up-to-date including, if applicable, your theme and plugins. PHP, WordPress, and WordPress themes and plugins all have a track record of security problems. Most of those get fixed quickly, but if you don&#8217;t update, you don&#8217;t get the fixes.</p> + +<p>To help you keep WordPress up-to-date, NFS provides a streamlined script.</p> + +<p>This command, which must be run from an interactive ssh session, will set up our system to check your WordPress install (and themes &#38; plugins) for you every day, and update them automatically when needed:</p> + +<pre><code>wp-update.sh -a +</code></pre> + +<p>By default, it will tell you via email when updates happen. If you don&#8217;t want that, just add <code>-q</code> (for &#8220;quiet&#8221;) to the command. It will work silently unless there is an error.</p> + +<p>If you get errors from wp-cron (not wp-update) about failed automatic updates, you may also wish to add this to your wp-config.php file:</p> + +<pre><code>define( &#39;AUTOMATIC_UPDATER_DISABLED&#39;, true ); +</code></pre> + +<p>This disables the insecure automatic updater bundled with recent versions of WordPress.</p> + +<p><strong>Do not attempt</strong> to use WordPress&#8217;s built-in ability to update itself through its admin panel. That insecure, outdated approach should not still exist. It does not work on NFS, which is a feature, not a bug. Getting it to work requires almost completely destroying your site&#8217;s security, thereby ensuring that any undiscovered security flaw can enable hackers to completely obliterate your site. The update methods described here are faster, easier, and safer.</p> + +<h2 id="logging-in">Logging In</h2> + +<p>You should be able to navigate to <code>yourwebsite.com&#47;wp-admin</code>, login and have everything work as expected. Congrats - enjoy your blog!</p> + +<p>Below you can find more advanced configuration to get the most out of your WordPress project.</p> + +<hr/> + +<h2 id="backing-up-wordpress">Backing up WordPress</h2> + +<p>NFS recommends backing up your WordPress setup on a regular basis.</p> + +<p>This is a two-step process. You must back up both the files and the database.</p> + +<h3 id="backing-up-wordpress-files">Backing up WordPress Files</h3> + +<p>To back up your WordPress files directly from a Unix-like system of your own, you can use a command like:</p> + +<pre><code>ssh yourmembername_siteshortname@ssh.phx.nearlyfreespeech.net tar -C &#47;home&#47;public -cvf - . | gzip &#62;name-of-wordpress-backup.tar.gz +</code></pre> + +<p>To back up WordPress to a file on our system that you can transfer via SFTP to your own computer, you can use a command like:</p> + +<pre><code>tar -C &#47;home&#47;public -cvzf &#47;home&#47;tmp&#47;name-of-wordpress-backup.tar.gz . +</code></pre> + +<p>This assumes that your WordPress install is in the default location (<code>&#47;home&#47;public</code>). It will put your backup file in your <code>&#47;home&#47;tmp</code> directory.</p> + +<p>Do not try to back up your WordPress folder into your WordPress folder, as that occasionally results in attempts to use infinite disk space by trying to back up the backup of the backup of the backup of the&#8230;</p> + +<h3 id="backing-up-the-wordpress-database">Backing up the WordPress Database</h3> + +<p>If you have a Unix-like system of your own (e.g. macOS or Linux), you can do the backup directly from there using your local command prompt using the MySQL username and password you created for WordPress:</p> + +<pre><code>ssh yourmembername_siteshortname@ssh.phx.nearlyfreespeech.net wp db export - | gzip &#62;wordpress-backup.sql.gz +</code></pre> + +<p>Or you can do it from the SSH command line via WP-CLI:</p> + +<pre><code>wp db export &#47;home&#47;tmp&#47;wordpress-backup.sql +</code></pre> + +<p>The <code>wordpress-backup.sql</code> file this generates will be stored in your site&#8217;s <code>&#47;home&#47;tmp</code> directory. Download it from there to have a local copy.</p> + +<h2 id="thats-it">That&#8217;s It!</h2> + +<p>Your WordPress site should be up-and-running now. Further customization or extra plugins&#47;services can be freely added if so desired. Enjoy your site!</p></description> + <link>https://btxx.org/Installing_WordPress_on_NearlyFreeSpeech</link> + <guid isPermaLink="false">https://btxx.org/Installing_WordPress_on_NearlyFreeSpeech</guid> + <pubDate>Mon, 27 May 2024 00:00:00 +0000</pubDate> + </item> + <item> + <title>Building rbenv on OpenBSD 7.5</title> + <description><h1 id="building-rbenv-on-openbsd-7.5">Building rbenv on OpenBSD 7.5</h1> + +<p>2024-06-02</p> + +<p>I use Ruby (specifically with Jekyll) for a lot of my clubs&#47;projects while using my personal laptop (<a href="/posts/x220/">X220 ThinkPad</a>) which is runs OpenBSD. Since I recently upgraded to OpenBSD 7.5 I thought it could be helpful for others if I shared my process of building and using <code>rbenv</code> to install different Ruby versions.</p> + +<h2 id="before-we-build">Before We Build</h2> + +<p>First, be sure to install the required packages in order to build from source, and then clone the core <code>rbenv</code> repo:</p> + +<pre><code>pkg_add git gcc gmake libffi libyaml openssl +git clone https:&#47;&#47;github.com&#47;rbenv&#47;rbenv.git ~&#47;.rbenv +</code></pre> + +<h2 id="building-">Building <code>rbenv</code></h2> + +<p>Add <code>rbenv</code> to your PATH and initialize it (place this inside your <code>.bashrc</code> or <code>.zshrc</code> etc):</p> + +<pre><code>export PATH="$HOME&#47;.rbenv&#47;bin:$PATH" +export PATH="$HOME&#47;.rbenv&#47;shims:$PATH" +export RUBY_CONFIGURE_OPTS="--with-openssl-dir=&#47;usr&#47;local" +eval "$(rbenv init -)" +</code></pre> + +<p>Then reload your shell (zsh in this example): </p> + +<pre><code>source ~&#47;.zshrc +</code></pre> + +<p>Next we will need to install <code>ruby-build</code> as a <code>rbenv</code> plugin. Clone the ruby-build repository into the rbenv plugins directory:</p> + +<pre><code>git clone https:&#47;&#47;github.com&#47;rbenv&#47;ruby-build.git ~&#47;.rbenv&#47;plugins&#47;ruby-build +</code></pre> + +<h2 id="installing-ruby-and-setting-our-version">Installing Ruby and Setting Our Version</h2> + +<p>Now use <code>rbenv</code> to install the desired version of Ruby (we will get an older version for this example):</p> + +<pre><code>rbenv install 3.3.0 +</code></pre> + +<p>If you run into issues, you may need to specify your openssl directory:</p> + +<pre><code>RUBY_CONFIGURE_OPTS="--with-openssl-dir=&#47;usr&#47;local" rbenv install 3.3.0 +</code></pre> + +<p>If you&#8217;re on a slower machine (like mine) this might take a little bit. Just grab a coffee or a snack while you wait!</p> + +<p>Then navigate to your project of choice and set the <code>local</code> Ruby version:</p> + +<pre><code>rbenv local 3.3.0 +</code></pre> + +<p>That&#8217;s it! If you&#8217;d prefer to set this version of Ruby for all projects going forward, simply replace <code>local</code> with <code>global</code>.</p></description> + <link>https://btxx.org/Building_rbenv_on_OpenBSD_7.5</link> + <guid isPermaLink="false">https://btxx.org/Building_rbenv_on_OpenBSD_7.5</guid> + <pubDate>Sun, 02 Jun 2024 00:00:00 +0000</pubDate> + </item> + <item> + <title>Making a Website Under 1kB</title> + <description><h1 id="making-a-website-under-1kb">Making a Website Under 1kB</h1> + +<p>2022-08-02</p> + +<p>I recently launched (another) website club called the <a href="https://1kb.club">1kB Club</a>. Unlike the <a href="https://1mb.club">1MB Club</a>, it isn&#8217;t as accessible for most modern websites to become official members. Building a website that actually serves useful content while squeezing its page size under 1,024 bytes is no easy feat.</p> + +<p>But it is possible. And I did it myself!</p> + +<p><em>Note:</em> Big shout-out to <a href="https://t0.vc">Tanner</a>, who inspired this whole &#8220;movement&#8221; with his own minimal website. (He also has some really great creations&#47;articles there too!)</p> + +<h2 id="the-html">The HTML</h2> + +<p>For reference, you can view my &#8220;mini&#8221; website here: <a href="https://cv.tdarb.org">cv.tdarb.org</a>. It is <em>very</em> minimal and serves only as a personal curriculum vitae. It also weighs only <strong>920 bytes</strong> and is valid HTML.</p> + +<p>Let&#8217;s take a look at the full HTML and then break things down from there:</p> + +<pre><code>&#60;!DOCTYPE html&#62;&#60;link rel="icon" href="data:,"&#62;&#60;meta name="viewport" content="width=device-width,initial-scale=1.0"&#62;&#60;title&#62;CV&#60;&#47;title&#62;&#60;p&#62;Hi, I&#39;m &#60;a href="t"&#62;Brad Taunt&#60;&#47;a&#62;! I&#39;m a UX designer.&#60;p&#62;Email: hello@tdarb.org&#60;p&#62;Resume&#60;p&#62;Senior Product Designer @ Donorbox, 2021-&#60;br&#62;Web Designer @ Purism, 2019-2021&#60;br&#62;Product Designer @ Benbria, 2013-2019&#60;br&#62;Web Designer @ Netvatise, 2009-2013&#60;p&#62;Projects&#60;p&#62;&#60;a href="1"&#62;1MB Club&#60;&#47;a&#62;&#60;br&#62;&#60;a href="k"&#62;1kB Club&#60;&#47;a&#62;&#60;br&#62;&#60;a href="p"&#62;pblog&#60;&#47;a&#62;&#60;br&#62;&#60;a href="s"&#62;shinobi&#60;&#47;a&#62;&#60;br&#62;&#60;a href="h"&#62;PHPetite&#60;&#47;a&#62;&#60;br&#62;&#60;a href="v"&#62;Vanilla CSS&#60;&#47;a&#62;&#60;p&#62;Writing&#60;p&#62;&#60;a href="d"&#62;The Death of Personality&#60;&#47;a&#62;&#60;br&#62;&#60;a href="u"&#62;Simple Does Not Mean Ugly&#60;&#47;a&#62;&#60;br&#62;&#60;a href="e"&#62;Plain Text Emails, Please&#60;&#47;a&#62;&#60;br&#62;&#60;a href="tb"&#62;[more]&#60;&#47;a&#62; +</code></pre> + +<h2 id="sneaky-hacks">Sneaky &#8220;Hacks&#8221;</h2> + +<p>The first thing you&#8217;ll notice is that the HTML is compressed. White space adds extra bytes of data to the page weight - so it needs to go. Next, you might have caught the <em>odd</em> favicon meta tag:</p> + +<pre><code>&#60;link rel="icon" href="data:,"&#62; +</code></pre> + +<p>This is required to stop the browser from making the standard favicon request (normally pulling from <code>favicon.ico</code>). By adding this meta tag you are telling the browser to load in an empty image without running another server request. This saves about 400 bytes of bandwidth on its own!</p> + +<p>The next two meta tags after the <code>icon</code> are technically optional. These are the <code>viewport</code> and <code>title</code> tags. You could save a good amount of data by excluding them altogether, but I had my own personal reasons for keeping them:</p> + +<ol> +<li>I wanted the web page to be responsive</li> +<li>I wanted the page to be <a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fcv.tdarb.org%2F">valid HTML</a></li> +</ol> + +<p>So, I kept these tags but made them as minimal as I possibly could (looking at you <code>title</code> tag). After that, it was time to add my content!</p> + +<h2 id="where-were-going-we-dont-need-tags">Where We&#8217;re Going, We Don&#8217;t Need Tags&#8230;</h2> + +<p>The beauty of using HTML5 is the ability to ditch &#8220;default&#8221; and closing tags on most elements. Think of all those bytes we can save!</p> + +<p>In the HTML above you will notice:</p> + +<ol> +<li>There is no <code>html</code> element</li> +<li>There is no <code>head</code> element</li> +<li>There is no <code>body</code> element</li> +<li>There are no closing <code>p</code> tags</li> +</ol> + +<p>Even with all those &#8220;missing&#8221; elements, the webpage is still valid HTML5! Craziness.</p> + +<p>The final hack that saved a <em>ton</em> of bandwidth was implementing custom <code>href</code> URLs. Most of the links on the page take the user to another website altogether - which is fine. The problem is including these full domains inside the <code>a:href</code> tag. Those can start to eat up a lot of data.</p> + +<p>Luckily, I host this mini-site through Netlify so I can take full advantage of their optional <code>_redirects</code> file. Links are now set with a single character (ie. &#8220;1&#8221; for the 1MB Club link) and the <code>_redirects</code> file simply forwards the user to the custom domain. Pretty sneaky!</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>This is a silly project that isn&#8217;t meant to be taken so seriously. That being said, I&#8217;d love to see what other pages people are able to create while being limited to just 1kB.</p></description> + <link>https://btxx.org/1kb</link> + <guid isPermaLink="false">https://btxx.org/1kb</guid> + <pubDate>Tue, 02 Aug 2022 00:00:00 +0000</pubDate> + </item> + <item> + <title>Do You Have an Extra $10?</title> + <description><h1 id="do-you-have-an-extra-10">Do You Have an Extra $10?</h1> + +<p>2022-11-23</p> + +<p>As software designers and developers, think of all the little things that we spend $10 on. Maybe it&#8217;s a couple coffees over the course of a week. Maybe it&#8217;s a TV streaming subscription. Maybe it&#8217;s an impulse buy while we&#8217;re out shopping for groceries. Maybe it goes into a mason jar on top of the fridge, stored away for a rainy day.</p> + +<p>$10 doesn&#8217;t seem like a <em>ton</em> of money, but a little does go a long way. What if, combined with <em>other people</em>, that $10 could grow and support an open source project? A project that you might even use <em>every day</em> without cost. </p> + +<p>Plenty of people already do this - it&#8217;s nothing new. If you already contribute to the open source community (whether through code or donations) then this post isn&#8217;t really geared towards you. You&#8217;re already helping out and are greatly appreciated. Feel free to stop reading right now and continue on with your day!</p> + +<p>But, if you&#8217;re like how I used to be, you might be one of those people who enjoys <em>the idea</em> of donating to a FOSS project instead of actually doing so. That&#8217;s fine. Zero judgement here since I was doing <em>exactly that</em> for years. All I ask is for you to try it out for even a couple months. You&#8217;ll soon realize that $10 doesn&#8217;t break the bank, while at the same time, you get that &#8220;warm, fuzzy feeling&#8221; of supporting important projects&#47;communities.</p> + +<p>In a way, it&#8217;s actually kind of selfish. You start doing it more for the <em>feel good</em> endorphin that kicks in each time you donate. At least, that&#8217;s been my experience&#8230;</p> + +<h2 id="open-source-isnt-free">Open Source isn&#8217;t Free</h2> + +<p>Maintaining any open source project takes years of prior design&#47;development experience, along with sacrificing personal time. Contributors might enjoy working on their project. Most probably love connecting with their end-users and community - but their time is still a hard requirement.</p> + +<p>I believe this time is worth paying for. If a project you depend on were to suddenly &#8220;shut down&#8221;, how much time, effort, and income do you stand to lose? Is it more than $10 a month?</p> + +<h2 id="donating-in-this-economy">&#8220;Donating? In THIS Economy?&#8221;</h2> + +<p>Things aren&#8217;t great for a lot of folks financially right now. I&#8217;m not ignorant to this fact and completely understand people tightening their belts. We all have to. I&#8217;m merely suggesting that if you <em>have the means</em> to support FOSS communities with any disposable income, you should. And I&#8217;m not suggesting a lot - <strong>just ten bucks</strong>.</p> + +<p>Allow me to put my money where my mouth is and showcase my own $10 donation breakdown:</p> + +<h2 id="my-10-breakdown">My $10 Breakdown</h2> + +<table> +<thead> +<tr> +<th>Service</th> +<th>Cost&#47;month</th> +</tr> +</thead> + +<tbody> +<tr> +<td><a href="https://sourcehut.org">sourcehut</a></td> +<td>$5.00</td> +</tr> +<tr> +<td><a href="https://fosstodon.org">fosstodon</a></td> +<td>$3.00</td> +</tr> +<tr> +<td><a href="https://qutebrowser.org">qutebrowser</a></td> +<td>$2.00</td> +</tr> +</tbody> +</table> + +<p><em>In case you are reading the post at a later point in time, the most up-to-date donation listing can always be found <a href="/uses/">on my official Uses page</a>.</em></p> + +<h2 id="sourcehut">SourceHut</h2> + +<p>To be fair, this is an active service which just so happens to be available for &#8220;free&#8221; in its current state. Drew <a href="https://sourcehut.org/pricing/">mentions on the main pricing page</a> that payment is <em>currently</em> optional, but will eventually require maintainers to upgrade (contributors will always have free access):</p> + +<blockquote> +<p>sr.ht is currently in alpha, and the quality of the service may reflect that. As such, payment is currently optional, and only encouraged for users who want to support the ongoing development of the site. </p> +</blockquote> + +<p>I still consider this &#8220;donating&#8221; since it helps keep this specific instance alive. It&#8217;s also my main code forge since I&#8217;ve been <a href="/srht2/">migrating away from GitHub</a>. I want to see SourceHut succeed, so while I <em>could</em> use the service completely free, I believe it&#8217;s more than worth it to coverage my usage.</p> + +<h2 id="fosstodon">Fosstodon</h2> + +<p><a href="https://fosstodon.org">fosstodon.org</a> is my main &#8220;social&#8221; platform and the Mastodon instance I chose to join some time ago. The people I&#8217;ve interacted with have been nothing but helpful, insightful and fun. The maintainers are also very down to earth (shoutout to <a href="https://kevquirk.com/">Kev</a> specifically for making my initial experience great!)</p> + +<p>Hosting a large Mastodon instance can become expensive. Not to mention the recent influx of Twitter users flocking to the platform in general. Fosstodon recently <a href="https://hub.fosstodon.org/more-upgrades-twitter-storm/">posted an update</a> detailing how their server costs are now &#62;$1800. That&#8217;s insane.</p> + +<p>The least I can do is toss a few bucks towards the service. I know it isn&#8217;t much, but it certainly feels better than using such an awesome platform for absolutely nothing. Keep up the great work maintainers&#47;mods!</p> + +<h2 id="qutebrowser">qutebrowser</h2> + +<p><strong>The best browser I have ever used</strong>. I refuse to go back to Firefox or even FireDragon&#47;Pale Moon. I&#8217;m only currently donating $2 but my goal is to increase this in the future before adding any other services &#47; communities to my &#8220;collection&#8221;. If you haven&#8217;t yet tried it, I highly recommend it.</p> + +<h2 id="food-for-thought">Food for Thought</h2> + +<p>That&#8217;s really all there is for me to say on the matter. It essentially comes down to personal preference and the financial ability to donate. As I said before: there is no judgement here. All I&#8217;m suggesting is that people do what they can to help support the FOSS projects they love.</p> + +<p>And really, it&#8217;s just $10.</p></description> + <link>https://btxx.org/$10</link> + <guid isPermaLink="false">https://btxx.org/$10</guid> + <pubDate>Wed, 23 Nov 2022 00:00:00 +0000</pubDate> + </item> +</channel> +</rss> diff --git a/build/rvm/index.html b/build/rvm/index.html index 7af370f..63bbb98 100644 --- a/build/rvm/index.html +++ b/build/rvm/index.html @@ -1,41 +1,54 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Installing Ruby with RVM on Alpine Linux</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Installing Ruby with RVM on Alpine Linux</h1> +<h1 id="installing-ruby-with-rvm-on-alpine-linux">Installing Ruby with RVM on Alpine Linux</h1> + <p>2023-03-16</p> -<p>For some on-going projects I need to switch to different versions of <code>ruby</code>. Although there exist many step-by-step instructions on installing and configuring <code>rvm</code> for most Linux distros, there aren't many focused on Alpine "daily drivers".</p> -<p>So this post is more or less a helpful document for my future self. If it happens to help others then that's an added bonus!</p> -<h2>Simple Setup</h2> + +<p>For some on-going projects I need to switch to different versions of <code>ruby</code>. Although there exist many step-by-step instructions on installing and configuring <code>rvm</code> for most Linux distros, there aren’t many focused on Alpine “daily drivers”.</p> + +<p>So this post is more or less a helpful document for my future self. If it happens to help others then that’s an added bonus!</p> + +<h2 id="simple-setup">Simple Setup</h2> + <p>Make sure you have the basic packages first:</p> + <pre><code>apk update apk add curl gcc gnupg gpg dirmngr procps musl-dev linux-headers zlib zlib-dev openssl openssl-dev libssl1.1 </code></pre> -<p>Next download the latest <code>stable</code> version of <code>rvm</code> from Github, unpack it, place it in the proper user directory (~/.rvm) and install any required libs:</p> -<pre><code>curl -sSL https://github.com/rvm/rvm/tarball/stable -o rvm-stable.tar.gz -echo 'export rvm_prefix="$HOME"' > ~/.rvmrc -echo 'export rvm_path="$HOME/.rvm"' >> ~/.rvmrc -mkdir rvm && cd rvm -tar --strip-components=1 -xzf ../rvm-stable.tar.gz -./install --auto-dotfiles --autolibs=0 + +<p>Next download the latest <code>stable</code> version of <code>rvm</code> from Github, unpack it, place it in the proper user directory (~/.rvm) and install any required libs:</p> + +<pre><code>curl -sSL https://github.com/rvm/rvm/tarball/stable -o rvm-stable.tar.gz +echo 'export rvm_prefix="$HOME"' > ~/.rvmrc +echo 'export rvm_path="$HOME/.rvm"' >> ~/.rvmrc +mkdir rvm && cd rvm +tar --strip-components=1 -xzf ../rvm-stable.tar.gz +./install --auto-dotfiles --autolibs=0 </code></pre> + <p>Now we can remove everything and properly link to <code>rvm</code>:</p> -<pre><code>cd ../ && rm -rf rvm-stable stable.tar.gz rvm -source ~/.rvm/scripts/rvm + +<pre><code>cd ../ && rm -rf rvm-stable stable.tar.gz rvm +source ~/.rvm/scripts/rvm </code></pre> + <p>Now you can freely install any version of Ruby that you desire!</p> + <pre><code>rvm install ruby-X.X.X </code></pre> <footer role="contentinfo"> diff --git a/build/safari-default-dark-mode/index.html b/build/safari-default-dark-mode/index.html index 250230e..e2c3cc7 100644 --- a/build/safari-default-dark-mode/index.html +++ b/build/safari-default-dark-mode/index.html @@ -1,45 +1,52 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Dear Apple, Please Fix Safari's Default Dark Mode Link Color</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Dear Apple, Please Fix Safari's Default Dark Mode Link Color</h1> +<h1 id="dear-apple-please-fix-safaris-default-dark-mode-link-color">Dear Apple, Please Fix Safari’s Default Dark Mode Link Color</h1> + <p>2022-04-18</p> -<p>Supporting dark mode on the modern web falls under the realm of accessibility and should not be ignored. It is important and helps keep the visual flow of your content to match that of your users' operating system UI. Not to mention, it's easy to implement and keep consistent across browsers.</p> -<h2>Support Dark Mode with Zero CSS</h2> -<p>A common practice is to include a <code>@media</code> query via CSS to target styling changes based on whether <code>dark-mode</code> is active. I tend to believe this is overkill for basic websites. Many developers aren't aware of the HTML <code>color-scheme</code> parameter. (This website itself is using it in place of CSS media queries)</p> -<h3>HTML "color-scheme"</h3> -<p>Adding the following meta tag inside your document's <code>head</code> element, you can enable dark mode instantly with zero configuration:</p> -<pre><code><meta name="color-scheme" content="dark light" /> + +<p>Supporting dark mode on the modern web falls under the realm of accessibility and should not be ignored. It is important and helps keep the visual flow of your content to match that of your users’ operating system UI. Not to mention, it’s easy to implement and keep consistent across browsers.</p> + +<h2 id="support-dark-mode-with-zero-css">Support Dark Mode with Zero CSS</h2> + +<p>A common practice is to include a <code>@media</code> query via CSS to target styling changes based on whether <code>dark-mode</code> is active. I tend to believe this is overkill for basic websites. Many developers aren’t aware of the HTML <code>color-scheme</code> parameter. (This website itself is using it in place of CSS media queries)</p> + +<h3 id="html-color-scheme">HTML “color-scheme”</h3> + +<p>Adding the following meta tag inside your document’s <code>head</code> element, you can enable dark mode instantly with zero configuration:</p> + +<pre><code><meta name="color-scheme" content="dark light" /> </code></pre> + <p>There are minor caveats:</p> + <ol> <li>You should not be specifying any <code>background</code> styling to your <code>body</code> or <code>html</code> elements</li> <li>You should be not specifying any <code>color</code> styling across any of your readable content (paragraphs, headings, lists, blockquotes)</li> </ol> -<p>That's it! In case you were curious, all major browsers support this color scheme meta tag: <a href="https://caniuse.com/mdn-html_elements_meta_name_color-scheme">https://caniuse.com/mdn-html<em>elements</em>meta<em>name</em>color-scheme</a></p> -<h2>But Wait, What's This About Safari?</h2> + +<p>That’s it! In case you were curious, all major browsers support this color scheme meta tag: <a href="https://caniuse.com/mdn-html_elements_meta_name_color-scheme">https://caniuse.com/mdn-html<em>elements</em>meta<em>name</em>color-scheme</a></p> + +<h2 id="but-wait-whats-this-about-safari">But Wait, What’s This About Safari?</h2> + <p>Even though by adding the color-scheme meta tag we get ourselves good dark mode support across all browsers - Safari has one big oversight: link color. Take a look at the comparison screenshots below (based on one of my older articles). The first one is taken in Firefox, the second in Safari:</p> -<p><figure> -<img src="/public/images/firefox-dark-mode.webp" alt="Firefox dark mode example"> -<figcaption>Firefox's default dark mode link color</figcaption> -</figure></p> -<p><figure> -<img src="/public/images/safari-dark-mode.webp" alt="Safari dark mode example"> -<figcaption>Safari's default dark mode link color - yuck!</figcaption> -</figure></p> + <p>Luckily for us there is a simple solution using minimal amounts of CSS[^1]:</p> + <pre><code>@supports (color-scheme: dark light) { @media screen and (prefers-color-scheme: dark) { a:link {color: #9e9eff;} @@ -48,13 +55,19 @@ } } </code></pre> -<p>We are brute-forcing Safari to implement the same color HEX codes used by both Firefox and Chrome browsers. How a horrible accessibility oversight could happen within a company as large as Apple is astounding...</p> -<h2>Apple: Fix Your Browser's Dark Mode</h2> -<p>My hope if that even one Safari design or development team member stumbles across this article and raises this ticket to the rest of the team[^2]. It's an unbelievably easy fix and would save developers the headache of overriding these things ourselves.</p> + +<p>We are brute-forcing Safari to implement the same color HEX codes used by both Firefox and Chrome browsers. How a horrible accessibility oversight could happen within a company as large as Apple is astounding…</p> + +<h2 id="apple-fix-your-browsers-dark-mode">Apple: Fix Your Browser’s Dark Mode</h2> + +<p>My hope if that even one Safari design or development team member stumbles across this article and raises this ticket to the rest of the team[^2]. It’s an unbelievably easy fix and would save developers the headache of overriding these things ourselves.</p> + <p>Thanks for reading and happy dark mode to you all!</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>Special thanks to <a href="https://seirdy.one/">Seirdy</a> for suggesting the use of :link and :active support. I recommend you check out his take on <a href="https://seirdy.one/2020/11/23/website-best-practices.html#dark-themes">dark mode / theme support</a>.</li> +<li>Special thanks to <a href="https://seirdy.one/">Seirdy</a> for suggesting the use of :link and :active support. I recommend you check out his take on <a href="https://seirdy.one/2020/11/23/website-best-practices.html#dark-themes">dark mode / theme support</a>.</li> <li>This has an open ticket through <a href="https://bugs.webkit.org/show_bug.cgi?id=209851">Webkit Bugzilla</a></li> </ol> <footer role="contentinfo"> diff --git a/build/safari-extensions-catalina-patcher/index.html b/build/safari-extensions-catalina-patcher/index.html index 0a351ef..3da9e6d 100644 --- a/build/safari-extensions-catalina-patcher/index.html +++ b/build/safari-extensions-catalina-patcher/index.html @@ -1,50 +1,58 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Enabling Safari Extensions with the macOS Catalina Patcher</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Enabling Safari Extensions with the macOS Catalina Patcher</h1> +<h1 id="enabling-safari-extensions-with-the-macos-catalina-patcher">Enabling Safari Extensions with the macOS Catalina Patcher</h1> + <p>2021-09-23</p> + <p>I have an old 2011 MacBook Air that is running the latest version of macOS Catalina thanks to the very wonderful <a href="http://dosdude1.com/catalina/">Catalina Patcher</a> by dosdude1. This project has made it possible for me to run and test some of the latest software from Apple - namely Safari 15.</p> + <p>I ran into a small bug early on though – Safari extensions couldn’t be activated via the preferences menu. Luckily I discovered a very simple fix. My hope is this might help others (as small of a demographic that might be) who run into the same issue with the Catalina Patcher.</p> + <ul> -<li>Close/Quit Safari completely</li> +<li>Close/Quit Safari completely</li> <li>Open the Finder and use the shortcut <code>⌘ Shift G</code></li> -<li>Paste the following to navigate to the proper folder: <code>~/Library/Containers/com.apple.Safari/Data/Library/Safari/AppExtensions</code></li> -<li>Open the <code>Extensions.plist</code> in your favourite text editor (I’m a big fan of Panic's Nova)</li> -<li>Below each extensions <code><dict></code> tag, add the following: <code><key>Enabled</key><true/></code></li> +<li>Paste the following to navigate to the proper folder: <code>~/Library/Containers/com.apple.Safari/Data/Library/Safari/AppExtensions</code></li> +<li>Open the <code>Extensions.plist</code> in your favourite text editor (I’m a big fan of Panic’s Nova)</li> +<li>Below each extensions <code><dict></code> tag, add the following: <code><key>Enabled</key><true/></code></li> <li>Save the file and relaunch Safari</li> </ul> + <p>Reference of what it should look like (AdBlock for this example):</p> -<pre><code><key>org.adblockplus...</key> - <dict> - <key>AddedDate</key> - <date>2021-09-23T14:00:47Z</date> - <key>Enabled</key> - <true/> - <key>WebsiteAccess</key> - <dict> - <key>Allowed Domains</key> - <array/> - <key>Has Injected Content</key> - <true/> - <key>Level</key> - <string>All</string> - </dict> - </dict> + +<pre><code><key>org.adblockplus...</key> + <dict> + <key>AddedDate</key> + <date>2021-09-23T14:00:47Z</date> + <key>Enabled</key> + <true/> + <key>WebsiteAccess</key> + <dict> + <key>Allowed Domains</key> + <array/> + <key>Has Injected Content</key> + <true/> + <key>Level</key> + <string>All</string> + </dict> + </dict> </code></pre> -<p>After following those simple steps you should have working extensions in Safari. Have fun on your old, "unsupported" Apple devices!</p> + +<p>After following those simple steps you should have working extensions in Safari. Have fun on your old, “unsupported” Apple devices!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/schools/index.html b/build/schools/index.html index b423976..0cf8dea 100644 --- a/build/schools/index.html +++ b/build/schools/index.html @@ -1,57 +1,91 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Schools Should Be Using Open Source Software</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Schools Should Be Using Open Source Software</h1> +<h1 id="schools-should-be-using-open-source-software">Schools Should Be Using Open Source Software</h1> + <p>2022-05-30</p> -<p>I firmly believe that proprietary software has no business in any school environment. Educational institutions lean heavily on Windows systems in the name of "security" or "easier platform management". This approach forces students into using locked-down, closed sourced software applications.</p> -<p>Word, Excel, PowerPoint. Why have these become the "standard" of text manipulation and processing?</p> + +<p>I firmly believe that proprietary software has no business in any school environment. Educational institutions lean heavily on Windows systems in the name of “security” or “easier platform management”. This approach forces students into using locked-down, closed sourced software applications.</p> + +<p>Word, Excel, PowerPoint. Why have these become the “standard” of text manipulation and processing?</p> + <p>Photoshop. Illustrator. Why are these the first applications used for image editing and creation?</p> + <p>Schools should only be allowed to use and teach with open source software. Starting students off down the path of vendor lock-in is only beneficial to the companies building those software systems.</p> -<h2>The Internet</h2> -<p>I'm an older fart, so my elementary school experience only included computers near the tail-end of mid-school. As such, it was forgivable to have students locked-in to using Internet Explorer (which would have been version 4 or 5 during my time) since there wasn't a great deal of competition.</p> -<p>The major problem is that IE/Edge is still the default and often times ONLY browser available in these classrooms. Again, I believe IT departments use the excuse of "security" to keep students on such dated browsers.</p> + +<h2 id="the-internet">The Internet</h2> + +<p>I’m an older fart, so my elementary school experience only included computers near the tail-end of mid-school. As such, it was forgivable to have students locked-in to using Internet Explorer (which would have been version 4 or 5 during my time) since there wasn’t a great deal of competition.</p> + +<p>The major problem is that IE/Edge is still the default and often times ONLY browser available in these classrooms. Again, I believe IT departments use the excuse of “security” to keep students on such dated browsers.</p> + <p>Firefox, anyone? LibreWolf? Pale Moon?</p> -<p>Any of these browsers can be easily managed and secured by school IT departments. It doesn't HAVE to be IE...</p> -<h2>Reducing Hardware Cost</h2> -<p>By shifting towards a purely "open" software stack, schools then have the ability to purchase older, cheaper hardware. Instead of running bloated spyware (Windows) IT departments could opt to use any one of the lightweight Linux distros available.</p> -<p>This would reduce e-waste, save school districts significant amounts of money (no need to purchase Windows licenses or beefy hardware to be able to even <em>run</em> the operating system) all while still maintaining a high level of user/network security.</p> -<p>Heck, you could even have a fleet of Raspberry Pi devices as your main student "computers". The cost of replacement also becomes less significant (these are children using these devices remember).</p> -<h2>Security</h2> + +<p>Any of these browsers can be easily managed and secured by school IT departments. It doesn’t HAVE to be IE…</p> + +<h2 id="reducing-hardware-cost">Reducing Hardware Cost</h2> + +<p>By shifting towards a purely “open” software stack, schools then have the ability to purchase older, cheaper hardware. Instead of running bloated spyware (Windows) IT departments could opt to use any one of the lightweight Linux distros available.</p> + +<p>This would reduce e-waste, save school districts significant amounts of money (no need to purchase Windows licenses or beefy hardware to be able to even <em>run</em> the operating system) all while still maintaining a high level of user/network security.</p> + +<p>Heck, you could even have a fleet of Raspberry Pi devices as your main student “computers”. The cost of replacement also becomes less significant (these are children using these devices remember).</p> + +<h2 id="security">Security</h2> + <p>I briefly mentioned user and network security above but figured it deserved its own section. A great deal of push-back comes from stubborn IT professionals[^0] determined to keep things running on Windows - since this is mostly what they are familiar with.</p> -<p>My mother-in-law was an "at-risk" educator for most of her career. She explained to me that their IT department did a major switch over to use BRAND NEW Apple laptops for all the students just before her retirement. I can't even begin to imagine the cost associated with this change. Not to mention the cost of repair for any of these devices when (not if) damaged.</p> + +<p>My mother-in-law was an “at-risk” educator for most of her career. She explained to me that their IT department did a major switch over to use BRAND NEW Apple laptops for all the students just before her retirement. I can’t even begin to imagine the cost associated with this change. Not to mention the cost of repair for any of these devices when (not if) damaged.</p> + <p>Who the hell is making these decisions? Even worse, who is approving them?! The school board had the opportunity to switch away from Windows devices and decided on Apple? Education reform is greatly needed[^1].</p> -<h2>What About The "Job Market"</h2> -<p>I'm not ignorant to the fact that many businesses in the real world require familiarity with some of these more popular closed source applications (Word, Excel). I don't have a magic solution to instantly convert all applications used by the companies, but beginning the process in the education system is a solid start. Over time, the standard will <em>become</em> these open platforms. The initial change just needs to be made.</p> -<p>It should also be mentioned that these open source applications carry over a lot of similar functionality to their closed-sourced counterparts. So it isn't as if a user with extensive LibreOffice experience would be utterly lost while using Microsoft Word.</p> -<h2>Looking Under the Hood</h2> -<p>Another bonus in using fully open source software is the ability for the students to deep dive into the code itself. This can be a great resource for early programming fundamentals and beginner coding classes. Why not dissect the very program used in your other classes? Here's an example of a possible class project: students could build out their own plugins or extensions for an existing application!</p> -<h2>Suggested Alternatives</h2> -<p>So what are these "open source" alternatives? Check out my simple suggestions below:</p> -<p>MS Office Suite ==> LibreOffice Suite[^2]</p> -<p>Photoshop ==> GIMP</p> -<p>Illustrator ==> Inkscape</p> -<p>IE/Edge ==> Firefox[^3]</p> -<p>Coding IDE (optional) ===> vim</p> + +<h2 id="what-about-the-job-market">What About The “Job Market”</h2> + +<p>I’m not ignorant to the fact that many businesses in the real world require familiarity with some of these more popular closed source applications (Word, Excel). I don’t have a magic solution to instantly convert all applications used by the companies, but beginning the process in the education system is a solid start. Over time, the standard will <em>become</em> these open platforms. The initial change just needs to be made.</p> + +<p>It should also be mentioned that these open source applications carry over a lot of similar functionality to their closed-sourced counterparts. So it isn’t as if a user with extensive LibreOffice experience would be utterly lost while using Microsoft Word.</p> + +<h2 id="looking-under-the-hood">Looking Under the Hood</h2> + +<p>Another bonus in using fully open source software is the ability for the students to deep dive into the code itself. This can be a great resource for early programming fundamentals and beginner coding classes. Why not dissect the very program used in your other classes? Here’s an example of a possible class project: students could build out their own plugins or extensions for an existing application!</p> + +<h2 id="suggested-alternatives">Suggested Alternatives</h2> + +<p>So what are these “open source” alternatives? Check out my simple suggestions below:</p> + +<p>MS Office Suite ==> LibreOffice Suite[^2]</p> + +<p>Photoshop ==> GIMP</p> + +<p>Illustrator ==> Inkscape</p> + +<p>IE/Edge ==> Firefox[^3]</p> + +<p>Coding IDE (optional) ===> vim</p> + <p>You could easily expand upon these options, but for most elementary school task these are more than enough.</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> <li>Not <em>all</em> IT workers in the school system fall into this category. But most of the underlining structure prevents them from changing much.</li> -<li>At least in my country of Canada. I can't speak for others.</li> -<li><code>groff</code> would be my personal suggestion instead, since it helps introduce children into the structure of basic file formatting and "programming". I'll go into greater details about this in another post.</li> -<li>As mentioned in the beginning of the post, I'd even suggest forks of Firefox -> LibreWolf or Pale Moon (if possible)</li> +<li>At least in my country of Canada. I can’t speak for others.</li> +<li><code>groff</code> would be my personal suggestion instead, since it helps introduce children into the structure of basic file formatting and “programming”. I’ll go into greater details about this in another post.</li> +<li>As mentioned in the beginning of the post, I’d even suggest forks of Firefox -> LibreWolf or Pale Moon (if possible)</li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/self-hosted-blogs/index.html b/build/self-hosted-blogs/index.html index aee2643..738ae81 100644 --- a/build/self-hosted-blogs/index.html +++ b/build/self-hosted-blogs/index.html @@ -1,42 +1,55 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>What Happened to Self-Hosted Blogs?</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>What Happened to Self-Hosted Blogs?</h1> +<h1 id="what-happened-to-self-hosted-blogs">What Happened to Self-Hosted Blogs?</h1> + <p>2018-10-18</p> -<p>I remember a time on the internet<sup>1</sup> when everyone and their grandmother was running a personal blog. And I mean <em>personal</em> - not hosted on some side platform or a tacked-on addition to the rest of their website.</p> + +<p>I remember a time on the internet1 when everyone and their grandmother was running a personal blog. And I mean <em>personal</em> - not hosted on some side platform or a tacked-on addition to the rest of their website.</p> + <p>Nowadays companies and individuals alike use platforms like Medium to host and promote all of their articles, essays and case studies. I understand the draw, and can even list out the positives:</p> + <ol> <li>A large community already exists under the Medium brand</li> -<li>It's easy to promote your own work and follow others</li> +<li>It’s easy to promote your own work and follow others</li> <li>The platform is fairly easy to setup and implement</li> </ol> + <p>Unfortunately this has had a pretty severe impact on the blogging community as a whole - no one controls their own blogs anymore. I remember when finding a new blog was an interesting and fun experience:</p> + <ul> <li>how did they decide to layout the page design?</li> <li>what typefaces have they decided to use?</li> <li>what back-end are they using?</li> <li>how does it look and feel on mobile?</li> </ul> -<p>These custom self-hosted blogs inspired other developers and designers to create their own blogs or tweak current ones. In a way it was a small factor in pushing what we could do on the web further and further, as designers engaged in friendly competition trying to one-up each others' creations.</p> -<p>I also believe this inspired people to write better content instead of opting for clickbait garbage in order to get "featured" or boosted promotion on the main blogging platform. But I don't even think that's the worst to come of this mass-migration to a singular blogging platform.</p> -<p><strong>All<sup>2</sup> blogs look identical now.</strong> I'm not sure if that was Medium's intention, but either way I personally think it's horrible. The individual personality of most design and development blogs has been completely stripped away.</p> -<p>Maybe I'm just a salty designer with a narrow-minded, pessimistic view on where our blogging communities seem to be heading - or maybe I just have higher standards.</p> -<h2>Refs</h2> -<p><small><sup>1</sup> <i>the design world of the internet</i><br/></small> -<small><sup>2</sup> <i>by "All" I mean the majority</i></small></p> + +<p>These custom self-hosted blogs inspired other developers and designers to create their own blogs or tweak current ones. In a way it was a small factor in pushing what we could do on the web further and further, as designers engaged in friendly competition trying to one-up each others’ creations.</p> + +<p>I also believe this inspired people to write better content instead of opting for clickbait garbage in order to get “featured” or boosted promotion on the main blogging platform. But I don’t even think that’s the worst to come of this mass-migration to a singular blogging platform.</p> + +<p><strong>All2 blogs look identical now.</strong> I’m not sure if that was Medium’s intention, but either way I personally think it’s horrible. The individual personality of most design and development blogs has been completely stripped away.</p> + +<p>Maybe I’m just a salty designer with a narrow-minded, pessimistic view on where our blogging communities seem to be heading - or maybe I just have higher standards.</p> + +<h2 id="refs">Refs</h2> + +<p>1 the design world of the internet +2 by “All” I mean the majority</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/self-hosting-fathom/index.html b/build/self-hosting-fathom/index.html index f1c294c..a1d125f 100644 --- a/build/self-hosting-fathom/index.html +++ b/build/self-hosting-fathom/index.html @@ -1,87 +1,95 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Self-Hosting Fathom Analytics with DigitalOcean</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Self-Hosting Fathom Analytics with DigitalOcean</h1> +<h1 id="self-hosting-fathom-analytics-with-digitalocean">Self-Hosting Fathom Analytics with DigitalOcean</h1> + <p>2021-02-02</p> -<p>Since my previous post walked through the process of setting up <a href="/fathom-analytics-netlify">Fathom PRO on Netlify</a>, I figured it made sense to create a similar tutorial for the "Lite" variation, self-hosted on DigitalOcean.</p> -<p>Please note that while I think the PRO version of <a target="_blank" href="https://usefathom.com/ref/DKHJVX">Fathom Analytics</a> is truly great, for my small, niche blog it seemed overkill compared to self-hosting. Switching over from $14/mo to $5/mo while retaining most of the same functionality was a no-brainer. Choose the option that best suits your needs (or in the case - budget & bandwidth).</p> -<p>With that cleared up - let's get into it!</p> -<h2>Prerequisites</h2> + +<p>Since my previous post walked through the process of setting up Fathom PRO on Netlify, I figured it made sense to create a similar tutorial for the “Lite” variation, self-hosted on DigitalOcean.</p> + +<p>Please note that while I think the PRO version of Fathom Analytics is truly great, for my small, niche blog it seemed overkill compared to self-hosting. Switching over from $14/mo to $5/mo while retaining most of the same functionality was a no-brainer. Choose the option that best suits your needs (or in the case - budget & bandwidth).</p> + +<p>With that cleared up - let’s get into it!</p> + +<h2 id="prerequisites">Prerequisites</h2> + <ol> <li>One or more website(s) where you would like to include analytics</li> -<li><a target="_blank" href="https://m.do.co/c/74b3fd11c07a">DigitalOcean account</a> (<strong>this link will give you a $100 credit!</strong>)</li> +<li>DigitalOcean account (<strong>this link will give you a $100 credit!</strong>)</li> <li>Positive attitude and passion for privacy-respecting analytics!</li> </ol> -<h2>Create a Droplet</h2> -<p>Once your DigitalOcean account is setup, navigate to the <a target="_blank" href="https://marketplace.digitalocean.com">Marketplace</a> and search for <code>Fathom Analytics</code>. Then click the <code>Create Fathom Analytics Droplet</code>.</p> -<p>From here you'll be brought to a page that allows you to customize the specifications of your new droplet. If you're a smaller traffic site (personal blog, etc) selecting the <strong>$5/month</strong> Basic Shared CPU option is your best bet.</p> -<p><figure> - <img src="/public/images/fathom-create-droplet-details.webp" alt="Fathom Droplet Details"> - <figcaption>Creating the new droplet (<a href="/public/images/fathom-create-droplet-details.webp">direct link to image</a>)</figcaption> -</figure></p> + +<h2 id="create-a-droplet">Create a Droplet</h2> + +<p>Once your DigitalOcean account is setup, navigate to the Marketplace and search for <code>Fathom Analytics</code>. Then click the <code>Create Fathom Analytics Droplet</code>.</p> + +<p>From here you’ll be brought to a page that allows you to customize the specifications of your new droplet. If you’re a smaller traffic site (personal blog, etc) selecting the <strong>$5/month</strong> Basic Shared CPU option is your best bet.</p> + <p>Select the data-center region based on where most of your traffic originates from. I would suggest enabling <code>IPv6</code> and setting up your authentication via SSH instead of a regular password system. Adding backups is entirely at your own discretion.</p> -<p>Once you're ready, click <strong>Create Droplet</strong>.</p> -<h2>Enter the Matrix (not really)</h2> + +<p>Once you’re ready, click <strong>Create Droplet</strong>.</p> + +<h2 id="enter-the-matrix-not-really">Enter the Matrix (not really)</h2> + <p>Once DigitalOcean finishes spinning up your new droplet, open a terminal and connect to it by entering:</p> + <pre><code>ssh root@YOUR_DROPLET_IP </code></pre> -<p>If you setup your login via SSH everything should work as-is. If you went the password route, you'll given a prompt to enter it.</p> -<p>Now that you're connected, Fathom will guide you through a simple configuration setup. It's fairly straightforward and painless. Once complete, move to the next step.</p> -<h2>Domains</h2> -<p>You'll most likely want to host this instance on your own domain or subdomain - instead of connecting directly via the droplet's <code>IP</code>. Head over to your <strong>Networking</strong> page in the sidebar of DigitalOcean and add your custom domain.</p> -<p>Then, click on that newly added domain - we need to add some new records. You're going to add two new <code>A</code> records to this domain:</p> -<p><table> - <thead> - <tr> - <th>Type</th> - <th>Hostname</th> - <th>Value</th> - </tr> - </thead> - <tbody> - <tr> - <td>A</td> - <td>@</td> - <td>YOUR_DROPLET_IP</td> - </tr> - <tr> - <td>A</td> - <td>www</td> - <td>YOUR_DROPLET_IP</td> - </tr> - </tbody> -</table></p> + +<p>If you setup your login via SSH everything should work as-is. If you went the password route, you’ll given a prompt to enter it.</p> + +<p>Now that you’re connected, Fathom will guide you through a simple configuration setup. It’s fairly straightforward and painless. Once complete, move to the next step.</p> + +<h2 id="domains">Domains</h2> + +<p>You’ll most likely want to host this instance on your own domain or subdomain - instead of connecting directly via the droplet’s <code>IP</code>. Head over to your <strong>Networking</strong> page in the sidebar of DigitalOcean and add your custom domain.</p> + +<p>Then, click on that newly added domain - we need to add some new records. You’re going to add two new <code>A</code> records to this domain:</p> + <p>The last thing you need to do is set your nameservers to point to DigitalOcean:</p> + <pre><code>ns1.digitalocean.com ns2.digitalocean.com ns3.digitalocean.com </code></pre> -<p>Give it some time to propagate and you'll be in business!</p> -<h2>SSL FTW</h2> + +<p>Give it some time to propagate and you’ll be in business!</p> + +<h2 id="ssl-ftw">SSL FTW</h2> + <p>There is hardly a good reason not to practice security on the web, so setting up your new analytics to be served over <code>HTTPS</code> is just the smart thing to do. Did I mention that this is completely free as well? See - no excuses.</p> -<p>In order to get a free SSL certificate setup, you'll need to install <code>certbot</code>. While connected to your droplet, enter the following:</p> + +<p>In order to get a free SSL certificate setup, you’ll need to install <code>certbot</code>. While connected to your droplet, enter the following:</p> + <pre><code>sudo apt-get install python-certbot-nginx </code></pre> + <p>Once installed, enter the following to setup SSL (remember to swap out the domain with your own):</p> + <pre><code>certbot --nginx -d your-cool-domain.com </code></pre> -<p>Follow the steps (it's very quick and easy) and you'll have <code>HTTPS</code> setup in a jiffy!</p> -<h2>The Final Lap</h2> + +<p>Follow the steps (it’s very quick and easy) and you’ll have <code>HTTPS</code> setup in a jiffy!</p> + +<h2 id="the-final-lap">The Final Lap</h2> + <p>The last thing to do is login to your newly self-hosted Fathom instance, add your site you wish to track, grab the generated tracking code and then slap that badboy on whatever pages you need to track!</p> -<p>Congrats! You're now officially running your own set of analytics tools. You should be happy about what you've accomplished and proud for respecting your users' privacy!</p> + +<p>Congrats! You’re now officially running your own set of analytics tools. You should be happy about what you’ve accomplished and proud for respecting your users’ privacy!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/setting-up-free-ssl/index.html b/build/setting-up-free-ssl/index.html index acd2593..24079d6 100644 --- a/build/setting-up-free-ssl/index.html +++ b/build/setting-up-free-ssl/index.html @@ -1,32 +1,41 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Setting Up a Free SSL</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Setting Up a Free SSL</h1> +<h1 id="setting-up-a-free-ssl">Setting Up a Free SSL</h1> + <p>2018-08-07</p> + <p>I never had to worry about SSL certificates when I originally hosted my blog through Github Pages, but since switching over to Surge.sh I lost my ability to utilize <code>https</code> protocol.</p> -<p>Luckily, Cloudflare offers a very simple way to implement SSL on your website - and it's free!</p> -<h3>SSL in 3 easy steps</h3> + +<p>Luckily, Cloudflare offers a very simple way to implement SSL on your website - and it’s free!</p> + +<h3 id="ssl-in-3-easy-steps">SSL in 3 easy steps</h3> + <ol> -<li>You will need to have a Cloudflare account - <a href="https://dash.cloudflare.com/sign-up">you can setup one here</a>. Be sure to select the 'Free' pricing plan (unless you want some extras features)</li> +<li>You will need to have a Cloudflare account - you can setup one here. Be sure to select the ‘Free’ pricing plan (unless you want some extras features)</li> <li>Follow the process on updating your nameservers to the proper Cloudflare servers and wait for your domain to update the changes. (This can take up to 24 hours)</li> -<li>From the main Cloudflare dashboard navigate to the Crypto tab. Then under the SSL section, select "Flexible" from the dropdown.</li> +<li>From the main Cloudflare dashboard navigate to the Crypto tab. Then under the SSL section, select “Flexible” from the dropdown.</li> </ol> -<h3>Enjoy your newly secure site</h3> -<p>That's it! Give it a bit of time and soon your website will support <code>https</code> and best of all it costs you nothing!</p> -<p>I suggest checking out the other interesting features Cloudflare offers while your playing with the dashboard as well. They have a lot of impressive options that can really improve the overall performance of your site / web app.</p> + +<h3 id="enjoy-your-newly-secure-site">Enjoy your newly secure site</h3> + +<p>That’s it! Give it a bit of time and soon your website will support <code>https</code> and best of all it costs you nothing!</p> + +<p>I suggest checking out the other interesting features Cloudflare offers while your playing with the dashboard as well. They have a lot of impressive options that can really improve the overall performance of your site / web app.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/seven-years/index.html b/build/seven-years/index.html index 26d207d..fad3413 100644 --- a/build/seven-years/index.html +++ b/build/seven-years/index.html @@ -1,51 +1,66 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Blogging for 7 Years</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Blogging for 7 Years</h1> +<h1 id="blogging-for-7-years">Blogging for 7 Years</h1> + <p>2023-06-24</p> + <p>My <a href="/aui">first public article</a> was posted on June 28th 2016. That was <em>seven</em> years ago.</p> -<p>In that time, quite a lot has changed in my life both personally and professionally. So, I figured it would be interesting to reflect on these years and document it for my own personal records. My hope is that this is something I could start doing every 5 or 10 years (if I can keep going that long!). This way, my blog also serves as a "time capsule" or museum of the past...</p> -<h2>Fun Facts</h2> + +<p>In that time, quite a lot has changed in my life both personally and professionally. So, I figured it would be interesting to reflect on these years and document it for my own personal records. My hope is that this is something I could start doing every 5 or 10 years (if I can keep going that long!). This way, my blog also serves as a “time capsule” or museum of the past…</p> + +<h2 id="fun-facts">Fun Facts</h2> + <p><strong>This Blog</strong>:</p> + <p>I originally started blogging on <code>bradleytaunt.com</code> using WordPress, but since then I have changed both my main domain and blog infrastructure multiple times. At a glance I have used:</p> + <ul> <li>Jekyll</li> <li>Hugo</li> <li>Blot</li> -<li>Static HTML/CSS</li> +<li>Static HTML/CSS</li> <li><a href="https://phpetite.bt.ht">PHPetite</a></li> <li><a href="https://shinobi.bt.ht">Shinobi</a></li> <li><a href="https://pblog.bt.ht">pblog</a></li> <li><a href="https://barf.bt.ht">barf</a> <em>Currently using!</em></li> </ul> + <p><strong>Personal:</strong></p> + <p>As with anyone over time, the personal side of my life has seen the biggest <em>updates</em>:</p> + <ul> <li>Married the love of my life (after knowing each other for ~14 years!)</li> <li>Moved out into rural Ontario for some peace and quiet</li> <li>Had three wonderful kids with said wife (two boys and a girl)</li> -<li>Started noticing grey sprinkles in my stubble (I guess I can officially call myself a "grey beard"?)</li> +<li>Started noticing grey sprinkles in my stubble (I guess I can officially call myself a “grey beard”?)</li> </ul> + <p><strong>Professionally:</strong></p> + <ul> <li>Pivoted heavily into UX research and design for a handful of years (after working mostly with web front-ends)</li> <li>Recently switched back into a more fullstack development role to challenge myself and learn more</li> </ul> -<h2>Nothing Special</h2> -<p>This post isn't anything ground-breaking but for me it's nice to reflect on the time passed and remember how much can change in such little time. Hopefully I'll be right back here in another 7 years and maybe you'll still be reading along with me!</p> + +<h2 id="nothing-special">Nothing Special</h2> + +<p>This post isn’t anything ground-breaking but for me it’s nice to reflect on the time passed and remember how much can change in such little time. Hopefully I’ll be right back here in another 7 years and maybe you’ll still be reading along with me!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/sharing-the-things-we-use/index.html b/build/sharing-the-things-we-use/index.html index d2d3b13..e06fc04 100644 --- a/build/sharing-the-things-we-use/index.html +++ b/build/sharing-the-things-we-use/index.html @@ -1,24 +1,30 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Sharing The Things We Use</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Sharing The Things We Use</h1> +<h1 id="sharing-the-things-we-use">Sharing The Things We Use</h1> + <p>2021-07-24</p> -<p>I always love stumbling across personal websites that include some form of a "uses" page. A place where the author lists out all the tools they use on a regular basis - whether it be hardware, software or something else entirely. It allows readers to get a slightly more personal peek into the daily work-life of that author and maybe even provides better context for <em>how</em> they work.</p> -<p>Since I realized how much I enjoy reading other people's <em>uses</em> pages, I've decided to finally publish my own! My list of hardware and software is fairly boring and predictable for a designer/developer - but sharing is caring! My hope is that even one personal out in the great-wide web can find something useful (pun intended!) or least inspiring about my personal setup.</p> + +<p>I always love stumbling across personal websites that include some form of a “uses” page. A place where the author lists out all the tools they use on a regular basis - whether it be hardware, software or something else entirely. It allows readers to get a slightly more personal peek into the daily work-life of that author and maybe even provides better context for <em>how</em> they work.</p> + +<p>Since I realized how much I enjoy reading other people’s <em>uses</em> pages, I’ve decided to finally publish my own! My list of hardware and software is fairly boring and predictable for a designer/developer - but sharing is caring! My hope is that even one personal out in the great-wide web can find something useful (pun intended!) or least inspiring about my personal setup.</p> + <p>Fell free to check it out: <a href="/uses">The Things I Use</a></p> + <p><em>PS. I plan to add a desktop picture of my complete setup once I find the time!</em></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/shinobi-website/index.html b/build/shinobi-website/index.html index d9aa7ce..437c5ec 100644 --- a/build/shinobi-website/index.html +++ b/build/shinobi-website/index.html @@ -1,55 +1,88 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>This Site is Now a Shinobi Website</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>This Site is Now a Shinobi Website</h1> +<h1 id="this-site-is-now-a-shinobi-website">This Site is Now a Shinobi Website</h1> + <p>2022-05-13</p> + <p><strong>Update 2023</strong>: this website is now built with <a href="https://barf.bt.ht">barf</a></p> -<hr /> + +<hr/> + <p>My personal website is now an RSS-focused blog, generated from a collection of plain text files.</p> -<p>But before we get into greater details about the switch, let me first introduce the concept of a "shinobi website".</p> -<h2>The Shinobi Website Project</h2> + +<p>But before we get into greater details about the switch, let me first introduce the concept of a “shinobi website”.</p> + +<h2 id="the-shinobi-website-project">The Shinobi Website Project</h2> + <p>Instead of repeating myself in this post, feel free to read up about the project at the official site:</p> -<p><a href="https://shinobi.bt.ht">https://shinobi.bt.ht</a></p> -<p>To summarize: by using a simple <code>shell</code> script I'm able to render all my plain text files (which is now how I solely write my articles) into a structured RSS 2.0 <code>xml</code> file. Subscribers can now consume my posts directly in their RSS reader of choice without the need to directly visit the article's URL.[^0]</p> -<h2>Why the Change?</h2> -<p>I'm a hardcore minimalist at heart and have a tendency to make my own personal projects <em>leaner</em> all the time. I also have been trying my best to find the most refined writing workflow to keep myself posting consistently (and hopefully keeping the quality high). My first iteration towards this step was switching over to hand-coding everything via HTML & CSS[^1]. That worked well - for a very brief time.</p> + +<p><a href="https://shinobi.bt.ht">https://shinobi.bt.ht</a></p> + +<p>To summarize: by using a simple <code>shell</code> script I’m able to render all my plain text files (which is now how I solely write my articles) into a structured RSS 2.0 <code>xml</code> file. Subscribers can now consume my posts directly in their RSS reader of choice without the need to directly visit the article’s URL.[^0]</p> + +<h2 id="why-the-change">Why the Change?</h2> + +<p>I’m a hardcore minimalist at heart and have a tendency to make my own personal projects <em>leaner</em> all the time. I also have been trying my best to find the most refined writing workflow to keep myself posting consistently (and hopefully keeping the quality high). My first iteration towards this step was switching over to hand-coding everything via HTML & CSS[^1]. That worked well - for a very brief time.</p> + <p>After recently launching the Shinobi project, I kept toying with the idea of switching my personal website over to use the same format. There was a heavy internal debate about ditching HTML in favour of plain text. What kind of impact would this have on both my site and audience? Would people be pissed about yet <em>another</em> radical change?</p> + <p>After sleeping on it for a couple nights, I decide to say screw it. This is my personal website and it should ultimately reflect who I am and what I prefer. Dwelling too long on the opinion of others (as much as I respect any of you kind enough to follow along) can lead to decisions that negatively impact ones own well being.</p> + <p>So here we are. Blogging in plain text.</p> -<h2>Avoiding Link-Rot</h2> -<p>I've manually added this blog post to my original <code>feed.xml</code>, in order to help inform those of you following that feed of this change. But this will be the last entry of that feed.</p> + +<h2 id="avoiding-link-rot">Avoiding Link-Rot</h2> + +<p>I’ve manually added this blog post to my original <code>feed.xml</code>, in order to help inform those of you following that feed of this change. But this will be the last entry of that feed.</p> + <p>If you decide not to re-sub, I completely understand and thank you for your time! Those of you choosing to still follow along: welcome aboard a new adventure!</p> -<p>As for the older HTML-based articles, no worries. They will remain on this site under the standard <code>blog</code> directory so that old links don't break or cause conflicts. You can find that directory here:</p> -<p><a href="https://tdarb.org/feeds/posts.xml">https://tdarb.org/feeds/posts.xml</a></p> -<h2>Tutorials and Demos</h2> -<p>I will still be writing up detailed tutorials and interactive demos going forward - no need to worry. My plan is to link directly to a collaborative coding site like CodePen, etc. I haven't decided on the best option yet (want to keep things as easy for my readers as possible) so only time will tell what my decision will be.</p> + +<p>As for the older HTML-based articles, no worries. They will remain on this site under the standard <code>blog</code> directory so that old links don’t break or cause conflicts. You can find that directory here:</p> + +<p><a href="https://tdarb.org/feeds/posts.xml">https://tdarb.org/feeds/posts.xml</a></p> + +<h2 id="tutorials-and-demos">Tutorials and Demos</h2> + +<p>I will still be writing up detailed tutorials and interactive demos going forward - no need to worry. My plan is to link directly to a collaborative coding site like CodePen, etc. I haven’t decided on the best option yet (want to keep things as easy for my readers as possible) so only time will tell what my decision will be.</p> + <p>Feel free to comment below if you have any suggestions! Preferably one that respects user privacy and advocates for a more open web.</p> -<h2>Speaking of Comments...</h2> -<p>Since the old commenting system[^2] required me to manually add each comment individually, I assumed I would just do the same here. Then I got a hack-y idea. What if I used a mailing list linked through this website's sourcehut project?</p> + +<h2 id="speaking-of-comments">Speaking of Comments…</h2> + +<p>Since the old commenting system[^2] required me to manually add each comment individually, I assumed I would just do the same here. Then I got a hack-y idea. What if I used a mailing list linked through this website’s sourcehut project?</p> + <p>It might not be the most user friendly or sustainable but I think it could be an interesting experiment at the very least!</p> + <p>Now each new article will have a link (which I will generate manually) that users can email directly to in order to share their comments. I have no idea how spam will work with this concept. This whole idea could blow up in my face. Only time will tell.</p> -<h2>Closing Thoughts</h2> -<p>This workflow is clean and simple. It allows me to open a blank text file and instantly start writing. Once I'm happy with it, I run a simple shell command to update the RSS feed and sync it with my web server. Local testing is dead simple too since everything is set as <code>.txt</code>.</p> -<p>Some may like the concept of reading my new articles in their RSS reader, others might hate it. I've learned over the years that you can't please everyone.</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>This workflow is clean and simple. It allows me to open a blank text file and instantly start writing. Once I’m happy with it, I run a simple shell command to update the RSS feed and sync it with my web server. Local testing is dead simple too since everything is set as <code>.txt</code>.</p> + +<p>Some may like the concept of reading my new articles in their RSS reader, others might hate it. I’ve learned over the years that you can’t please everyone.</p> + <p>Thanks for taking the time to read my jumbled thoughts.</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> <li>Users can <em>of course</em> still visit the individual article <code>.txt</code> files in their browser, if they so wish.</li> -<li>https://tdarb.org/blog/my-static-blog-publishing-setup.html</li> -<li>https://tdarb.org/blog/poormans-comment-system.html</li> +<li><a href="https://tdarb.org/blog/my-static-blog-publishing-setup.html">https://tdarb.org/blog/my-static-blog-publishing-setup.html</a></li> +<li><a href="https://tdarb.org/blog/poormans-comment-system.html">https://tdarb.org/blog/poormans-comment-system.html</a></li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/shiny-css-buttons/index.html b/build/shiny-css-buttons/index.html index 4422c24..be58ddb 100644 --- a/build/shiny-css-buttons/index.html +++ b/build/shiny-css-buttons/index.html @@ -1,34 +1,46 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Shiny, Animated CSS Buttons</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Shiny, Animated CSS Buttons</h1> +<h1 id="shiny-animated-css-buttons">Shiny, Animated CSS Buttons</h1> + <p>2021-04-27</p> + <p>Everyone can appreciate fancy, animated buttons - but often times they come with a performance cost: <em>JavaScript</em>. Luckily for us, we can create our very own shiny, animated buttons with pure CSS.</p> -<h2>The Demo</h2> + +<h2 id="the-demo">The Demo</h2> + <p><img src="/public/images/shiny-buttons.png" alt="Four buttons that shine when hovered" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/oNBQevj">Live CodePen Example</a></p> -<h2>The HTML</h2> + +<h2 id="the-html">The HTML</h2> + <p>Nothing fancy going on here, just a set of <code>ahref</code> elements with specific <code>button</code> classes added:</p> -<pre><code><a href="#" class="button green"><span>Green Button</span></a> -<a href="#" class="button blue"><span>Blue Button</span></a> -<a href="#" class="button orange"><span>Orange Button</span></a> -<a href="#" class="button purple"><span>Purple Button</span></a> + +<pre><code><a href="#" class="button green"><span>Green Button</span></a> +<a href="#" class="button blue"><span>Blue Button</span></a> +<a href="#" class="button orange"><span>Orange Button</span></a> +<a href="#" class="button purple"><span>Purple Button</span></a> </code></pre> -<h2>The CSS</h2> + +<h2 id="the-css">The CSS</h2> + <p>First we set the default base styling for all the buttons. We also place the inner text into <code>span</code> elements (I will explain why in a little bit):</p> + <pre><code>.button { background: white; border: 1px solid #a5b1c2; @@ -50,10 +62,12 @@ z-index: 2; } </code></pre> + <p>Now we need to create our <em>shiny</em> element that will pass across the button on <code>hover</code> or <code>focus</code>. For this object we will use the <code>before</code> pseudo element:</p> + <pre><code>.button:before { background: linear-gradient(transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%); - content:''; + content:''; height: 200%; position: absolute; right: calc(100% + 20px); @@ -64,25 +78,33 @@ z-index: 0; } </code></pre> -<p>Next, we tell the <code>before</code> element to swipe across the main <code>.button</code> parent element when the user hovers or focuses on it. Remember placing our inner content into a <code>span</code> element? That insures that our shiny/swipe element doesn't position itself <em>over</em> the text, but instead flows under it:</p> + +<p>Next, we tell the <code>before</code> element to swipe across the main <code>.button</code> parent element when the user hovers or focuses on it. Remember placing our inner content into a <code>span</code> element? That insures that our shiny/swipe element doesn’t position itself <em>over</em> the text, but instead flows under it:</p> + <pre><code>.button:hover:before { right: -100%; } -/* Extra visual styling for buttons on hover - optional */ +/* Extra visual styling for buttons on hover - optional */ .button:hover, button:focus { box-shadow: 0 8px 12px rgba(0,0,0,0.1), inset 0 10px 30px rgba(255,255,255,0.3), inset 0 2px 2px rgba(255,255,255,0.2); color: white; } </code></pre> -<p>All that's left is adding some visual flare to each individual button - in this case background-color and border-color:</p> + +<p>All that’s left is adding some visual flare to each individual button - in this case background-color and border-color:</p> + <pre><code>.button.green:hover, button.green:focus { background: #20bf6b; border-color: #20bf6b; } .button.blue:hover, button.blue:focus { background: #0984e3; border-color: #0984e3; } .button.orange:hover, button.orange:focus { background: #ff793f; border-color: #ff793f; } .button.purple:hover, button.purple:focus { background: #6c5ce7; border-color: #6c5ce7; } </code></pre> -<h2>Browser Support</h2> + +<h2 id="browser-support">Browser Support</h2> + <p>These buttons work across all browsers flawlessly. See the details <a href="https://caniuse.com/css-gencontent">on the caniuse report itself</a>.</p> -<h2>The Live CodePen</h2> + +<h2 id="the-live-codepen">The Live CodePen</h2> + <p>You can find the live demo embedded at the top of this post, or <a href="https://codepen.io/bradleytaunt/pen/oNBQevj">directly on CodePen here</a>.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/simple-accessibility/index.html b/build/simple-accessibility/index.html index 11a9d74..68de724 100644 --- a/build/simple-accessibility/index.html +++ b/build/simple-accessibility/index.html @@ -1,39 +1,49 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Simple Accessibility</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Simple Accessibility</h1> +<h1 id="simple-accessibility">Simple Accessibility</h1> + <p>2018-09-07</p> + <p>Implementing proper accessibility practices can seem a little daunting at first, but there are a few basic standards you can introduce into your project work-flow that are fairly straightforward:</p> -<h2>Basic design</h2> + +<h2 id="basic-design">Basic design</h2> + <ol> <li>Test that your project has the proper contrast color settings between type, backgrounds, icons etc.</li> -<li>Only use "fancy" grid-ordering for minor layout design - avoid rearranging important content via CSS</li> +<li>Only use “fancy” grid-ordering for minor layout design - avoid rearranging important content via CSS</li> </ol> -<h2>Content</h2> + +<h2 id="content">Content</h2> + <ol> <li>Use proper HTML structures (aside, header, main, footer elements as needed)</li> <li>Make use of the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label attribute</a></li> -<li>Ensure your website/app can be navigated completely (and properly) with only a keyboard</li> +<li>Ensure your website/app can be navigated completely (and properly) with only a keyboard</li> </ol> -<h2>Images</h2> + +<h2 id="images">Images</h2> + <ol> <li>Avoid using CSS backgrounds for content images (should only be used for patterns, layout design etc.)</li> <li>Ensure proper <code>alt</code> attributes are provided on all images</li> </ol> -<p>It isn't much - but follow these basics and you'll be one step closer to providing better accessibility to your users.</p> + +<p>It isn’t much - but follow these basics and you’ll be one step closer to providing better accessibility to your users.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/simple-does-not-mean-ugly/index.html b/build/simple-does-not-mean-ugly/index.html index 327ba3b..c47c29e 100644 --- a/build/simple-does-not-mean-ugly/index.html +++ b/build/simple-does-not-mean-ugly/index.html @@ -1,57 +1,89 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Simple Does Not Mean Ugly</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Simple Does Not Mean Ugly</h1> +<h1 id="simple-does-not-mean-ugly">Simple Does Not Mean Ugly</h1> + <p>2019-03-26</p> -<p>I see new blog posts popping up now and again advocating for designers to keep their products as simple as possible - and I couldn't agree more.</p> + +<p>I see new blog posts popping up now and again advocating for designers to keep their products as simple as possible - and I couldn’t agree more.</p> + <p>A lot of designers tend to think they need to reinvent the wheel when it comes to UI concepts that are standard defaults and expected by most users. Not only does this add extra work for your design and development cycles, but also increases the potential of frustration for your users when they are using your product.</p> + <p>Your job as a designer is to focus on the user experience journey and understand what those users <em>expect</em> to happen - not what <em>you want</em> to happen. This is a very delicate balance of design “give and take”, hence why simple designs always seem to work best.</p> + <p><strong>But simple does not mean “ugly”</strong>.</p> -<h2>Ugly Simple</h2> + +<h2 id="ugly-simple">Ugly Simple</h2> + <p>Anyone who has read some of my opinion pieces on here in regards to UI know that I have a profound distaste for the overused “flat design” trend. Many designers consider this trend a clean and “simple” approach to most UI conventions - which is complete nonsense to most professionals in the industry (at least those not drinking the kool-aid).</p> + <p>Using the term “simple” in the context of UI is currently quite damaging to modern application and product development. Designers take these definitions too literally, leading to stripped down interfaces with little to no usability for their end-users.</p> + <p>Cap Watkins wrote a post back in 2014 where he explained his admiration for <a href="https://capwatkins.com/blog/the-boring-designer">boring designers</a> and how they tackled design problems using the most boring or “lazy” techniques. While I don’t agree completely with his arguments, nor do I think one should try to attain the status of “boring designer”, I can understand his main sentiment: everyone can appreciate obvious and clever design.</p> -<h2>Fixing Simple</h2> + +<h2 id="fixing-simple">Fixing Simple</h2> + <p>I hate when people point out problems without at least attempting to suggest some sort of solution - which is exactly what I’m going to do here (with only a few set examples of course, otherwise the post would become a book). Let’s take a look at the major culprits I find around the web: navigations, buttons and form elements.</p> -<h3>1. Hidden Navigations</h3> + +<h3 id="1.-hidden-navigations">1. Hidden Navigations</h3> + <p>How many native apps that you use regularly rely on the trusty “hamburger” menu icon navigation system? What about news sites, video streaming services, or blogs? Maybe you’ve implemented this concept in your own projects as well, advocating for it’s “cleaner” approach to navigation. </p> + <p>The <em>hamburger</em> is a great example of “ugly simple”. You are purposely hiding the main structure that allows your users to move around your product freely behind an <strong>additional</strong> interaction. That is the opposite of simple.</p> + <p>The only time you should be using the “hamburger crutch” as I call it, is for very small screen sizes or when targeting mobile user agents directly. That’s it. If your users are viewing your product on a larger screen, for the love of God, <strong>use the space available</strong>.</p> + <p><img src="/public/images/navigation.webp" alt="Desktop Navigation" /></p> -<h3>2. Buttons Not Looking Like Buttons</h3> + +<h3 id="2.-buttons-not-looking-like-buttons">2. Buttons Not Looking Like Buttons</h3> + <p>It’s difficult for users to actually <strong>do</strong> the action you want them to perform when your buttons look like text. I’m not exactly sure why designers have pivoted towards removing all stylings that regular users have come to expect from button elements, but it’s plaguing far too many websites.</p> + <p>Buttons should be eye-catching, colorful, fun to interact with, and support all proper CSS states. Clients and agencies will tend to push for “cleaner” buttons - which most of the time refers to setting the buttons as simple underlined text items. Do not be brainwashed into thinking this is better:</p> + <p><img src="/public/images/buttons.webp" alt="Button Comparsion" /></p> -<p>You tell me what looks more interactive...</p> -<h3>3. Overriding Form Elements</h3> + +<p>You tell me what looks more interactive…</p> + +<h3 id="3.-overriding-form-elements">3. Overriding Form Elements</h3> + <p>Designers should rarely rebuild the browser structure for web form elements in their projects. I should clarify - I’m not suggesting that you use the barebones default styles provided by the browser, I’m saying that you shouldn’t hide the elements themselves just to replace them with mimicking components. I find this practice is becoming more and more noticeable with the growing popularity of component-based frameworks. Don’t fall into these bad design habits.</p> + <p>For example, you should leave the following <code>select</code> element as is:</p> -<pre><code><select> - <option> -</select> + +<pre><code><select> + <option> +</select> </code></pre> + <p>Instead of doing something like this:</p> -<pre><code><select style="display:none;"></select> -<div class="custom-select-container"> - <span>Option</span> -</div> + +<pre><code><select style="display:none;"></select> +<div class="custom-select-container"> + <span>Option</span> +</div> </code></pre> + <p>There are cleaner ways to customize web forms with straightforward CSS. Have a look at my own open source project <a href="https://normform.netlify.com/">Normform</a> if you’d prefer to just use a lightweight plugin to do this for you. (Shameless plug, I know)</p> -<h2>Simple Can Be Good</h2> + +<h2 id="simple-can-be-good">Simple Can Be Good</h2> + <p>Having a boring or lazy design thought-process doesn’t mean you should develop ugly UI for the sake of “simple”. Too often that word is associated with “minimalism” or “less content” and that is only half true.</p> + <p>The <em>experience</em> is what needs to be simple for your users - the UI itself should still be beautiful.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/simple-jekyll-navigation/index.html b/build/simple-jekyll-navigation/index.html index 1f6504d..bb97cc8 100644 --- a/build/simple-jekyll-navigation/index.html +++ b/build/simple-jekyll-navigation/index.html @@ -1,56 +1,71 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Simple Navigation Setup in Jekyll 3.9.0</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Simple Navigation Setup in Jekyll 3.9.0</h1> +<h1 id="simple-navigation-setup-in-jekyll-3.9.0">Simple Navigation Setup in Jekyll 3.9.0</h1> + <p>2020-09-29</p> -<p>I have found that there is a lot of information on the internet in regards to setting up "dynamic" navigation in Jekyll. The problem I've noticed is that a good amount of these implementations are overly complex. Here is the simplest way that I tend to use when building out <code>nav</code> elements in Jekyll (3.9.0 as of this writing).</p> -<h2>Creating the Directories & Files</h2> + +<p>I have found that there is a lot of information on the internet in regards to setting up “dynamic” navigation in Jekyll. The problem I’ve noticed is that a good amount of these implementations are overly complex. Here is the simplest way that I tend to use when building out <code>nav</code> elements in Jekyll (3.9.0 as of this writing).</p> + +<h2 id="creating-the-directories-files">Creating the Directories & Files</h2> + <p>In your Jekyll project, at the top level, you need to create a directory called <code>_data</code>. Inside this folder we will be creating a new file called <code>navigation.yml</code>. The contents of this file will contain all your navigation links and they are rendered like so:</p> + <pre><code>- title: Home -url: / +url: / - title: Articles -url: /articles/ +url: /articles/ - title: About -url: /about/ +url: /about/ </code></pre> -<h2>Dynamically Rendering the Navigation</h2> + +<h2 id="dynamically-rendering-the-navigation">Dynamically Rendering the Navigation</h2> + <p>The next and final step is rendering out the navigation with a simple loop:</p> + <pre><code>{% for item in site.data.navigation %} - <li> - <a href="{{ item.url }}"><span>{{ item.title }}</span></a> - </li> + <li> + <a href="{{ item.url }}"><span>{{ item.title }}</span></a> + </li> {% endfor %} </code></pre> -<h2>Highlight Current Page</h2> -<p>It's also very easy to extend this method to add a CSS class based on whether a user is on the currently selected page or not:</p> + +<h2 id="highlight-current-page">Highlight Current Page</h2> + +<p>It’s also very easy to extend this method to add a CSS class based on whether a user is on the currently selected page or not:</p> + <pre><code>{% for item in site.data.navigation %} - <li> + <li> {% if item.url == page.url %} - <a class="active" href="{{ item.url }}"><span>{{ item.title }}</span></a> + <a class="active" href="{{ item.url }}"><span>{{ item.title }}</span></a> {% else %} - <a href="{{ item.url }}"><span>{{ item.title }}</span></a> + <a href="{{ item.url }}"><span>{{ item.title }}</span></a> {% endif %} - </li> + </li> {% endfor %} -</code></pre> -<pre><code>/* Custom styling for active class */ + + + +/* Custom styling for active class */ li a.active { color: red; } </code></pre> + <p>Congrats! You now have fully functional, dynamic navigation on your Jekyll site.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/skip-to-content/index.html b/build/skip-to-content/index.html index be50b94..7a72d31 100644 --- a/build/skip-to-content/index.html +++ b/build/skip-to-content/index.html @@ -1,51 +1,61 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Skip to Content Button</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Skip to Content Button</h1> +<h1 id="skip-to-content-button">Skip to Content Button</h1> + <p>2019-03-25</p> -<p>One of the golden rules for testing your website's accessibility is the "keyboard-only" audit. This is where you test navigating through your entire site without the use of a mouse, but instead rely solely on tabbing through your content.</p> -<p>Unfortunately, one item is normally overlooked during this audit - a "skip to content" context button. Including a "skip to content" navigation item in your project is extremely useful because:</p> + +<p>One of the golden rules for testing your website’s accessibility is the “keyboard-only” audit. This is where you test navigating through your entire site without the use of a mouse, but instead rely solely on tabbing through your content.</p> + +<p>Unfortunately, one item is normally overlooked during this audit - a “skip to content” context button. Including a “skip to content” navigation item in your project is extremely useful because:</p> + <ul> <li>speeds up user interaction with the content you <strong>want</strong> them to see</li> -<li>on subsequent pages the user shouldn't need to tab through the entire navigation each time</li> +<li>on subsequent pages the user shouldn’t need to tab through the entire navigation each time</li> </ul> -<h2>The HTML</h2> + +<h2 id="the-html">The HTML</h2> + <p>For the sake of this demo we will assume that we currently have the following navigation setup in our project:</p> -<pre><code><nav role="navigation"> - <a href="/">Home</a> - <a href="/about">About</a> - <a href="/archive">Archive</a> - <a href="/atom.xml">RSS</a> -</nav> + +<pre><code><nav role="navigation"> + <a href="/">Home</a> + <a href="/about">About</a> + <a href="/archive">Archive</a> + <a href="/atom.xml">RSS</a> +</nav> </code></pre> -<p>Now for the easy part - adding our simple content skip link with it's own custom <code>skip-content</code> class:</p> -<pre><code><nav role="navigation"> - <!-- Skip to content button --> - <a class="skip-content" href="#main">Skip to Content (Press Enter)</a> - <a href="/">Home</a> - <a href="/about">About</a> - <a href="/archive">Archive</a> - <a href="/atom.xml">RSS</a> -</nav> + +<p>Now for the easy part - adding our simple content skip link with it’s own custom <code>skip-content</code> class:</p> + +<pre><code><nav role="navigation"> + <!-- Skip to content button --> + <a class="skip-content" href="#main">Skip to Content (Press Enter)</a> + <a href="/">Home</a> + <a href="/about">About</a> + <a href="/archive">Archive</a> + <a href="/atom.xml">RSS</a> +</nav> </code></pre> -<p><div class="message"> - <strong>Sidenote:</strong> in this demo we are making the assumption that the main content block has an <code>id</code> of "main" associated with it. Hence the skip content button linking to <code>#main</code>. -</div></p> -<h2>The CSS</h2> -<p>Our first task is to make sure this new link isn't visible or interactive by default unless the user explicitly tabs through the navigation. We do so by positioning the link outside of the main content view. It is important to use this <code>absolute</code> position style instead of setting the display property to <code>none</code>, since the display property technique will fully remove the element from the DOM (bad accessibility practices).</p> + +<h2 id="the-css">The CSS</h2> + +<p>Our first task is to make sure this new link isn’t visible or interactive by default unless the user explicitly tabs through the navigation. We do so by positioning the link outside of the main content view. It is important to use this <code>absolute</code> position style instead of setting the display property to <code>none</code>, since the display property technique will fully remove the element from the DOM (bad accessibility practices).</p> + <pre><code>a.skip-content { background: grey; color: white; @@ -55,13 +65,18 @@ top: 0; } </code></pre> -<h2>Almost there</h2> + +<h2 id="almost-there">Almost there</h2> + <p>Now we just re-position the element when the user focuses on the link with a keyboard tab:</p> + <pre><code>a.skip-content:focus { - left: 1rem; /* Whatever desired position */ + left: 1rem; /* Whatever desired position */ } </code></pre> -<h2>All Done</h2> + +<h2 id="all-done">All Done</h2> + <p>This is a very basic accessibility win you can implement in your current projects with next to zero effort. Enjoy!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/slabtop/index.html b/build/slabtop/index.html index af45465..d18d810 100644 --- a/build/slabtop/index.html +++ b/build/slabtop/index.html @@ -1,47 +1,55 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Converting My X201 ThinkPad into a Slabtop</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Converting My X201 ThinkPad into a Slabtop</h1> +<h1 id="converting-my-x201-thinkpad-into-a-slabtop">Converting My X201 ThinkPad into a Slabtop</h1> + <p>2023-05-01</p> -<p>I recently wrote <a href="/x201/">about physically disabling the WiFi toggle switch on my X201</a> which was a fun "hack" to an annoying issue I was running into. Since then, the laptop has been running flawlessly.</p> -<p>The only other <em>minor</em> issue I had was the poor display quality. The screen works perfectly fine but the X201's age prevents it from being the best possible display for day-to-day tasks. Both the resolution and viewing angles are quite poor.</p> + +<p>I recently wrote <a href="/x201/">about physically disabling the WiFi toggle switch on my X201</a> which was a fun “hack” to an annoying issue I was running into. Since then, the laptop has been running flawlessly.</p> + +<p>The only other <em>minor</em> issue I had was the poor display quality. The screen works perfectly fine but the X201’s age prevents it from being the best possible display for day-to-day tasks. Both the resolution and viewing angles are quite poor.</p> + <p>So, what were my options to remedy this problem?</p> + <ol> -<li>Swap out and upgrade the laptop's display (not many options for this though)</li> +<li>Swap out and upgrade the laptop’s display (not many options for this though)</li> <li>Connect an external display, keyboard, mouse and dock the X201</li> <li>Something else?</li> </ol> -<h2>Looking into "Something Else"</h2> -<p>I found that the possible replacement screens weren't worth the cost/hassle to swap out. And setting the laptop aside, docked with external peripherals sounded fine in theory - but then I would be missing out on the X201's amazing classic keyboard...</p> -<p>Then I thought to myself, "Why not just remove the display <em>entirely</em>?"</p> -<p>So that's what I did.</p> -<p><figure> - <img src="/public/images/slabtop-1.webp" alt="The main X201 display and lid disconnected"> - <figcaption>The X201 display (still inside the top lid) disconnected from the body of the laptop.</figcaption> -</figure></p> -<p>Removing the entire top lid was easier than I initially thought it would be. The beautiful thing about these older, classic ThinkPads is the ability to completely dissemble them. I won't go into heavy details on how to take one of these machines apart, since great documentation <a href="https://www.ifixit.com/Device/Lenovo_Thinkpad_X201_Tablet">already exists</a>. But once you have the keyboard and hinge screws removed it is essentially as easy as <em>lifting</em> the lid out of the chassis. (After disconnecting the small display connectors, of course)</p> -<h2>Ditching Alpine for Debian</h2> -<p>I love Alpine Linux. It's normally my <a href="https://as.bt.ht">go-to distro</a> (paired with dwm) for most of my laptop devices. Unfortunately, I find tiling window managers a slight pain to use on larger, 4K displays. I also wanted this slabtop to "just work", instead of needing to fiddle around with WiFi, <code>xrandr</code>, audio etc. Not to mention that Debian is rock solid stable. Defaulting to the XFCE DE was a no-brainer as well since this device is somewhat <em>old</em>.</p> -<p><figure> - <img src="/public/images/slabtop-2.webp" alt="The X201 slabtop connected to my 4K monitor"> - <figcaption>The X201 "slabtop" connected to my 27" 4K monitor via the ThinkPad UltraDock.</figcaption> -</figure></p> -<h2>Closing Thoughts</h2> -<p>This slabtop gives me those old-school "Commodore64" vibes (or more recent devices like the Raspberry Pi 400). This setup certainly isn't for everyone but for my use case it's working well. Traveling with a machine like this might prove a little more challenging - although you could simply pair it with a smaller travel monitor (I'm sure the overall carrying weight would be similar to the standard X201).</p> -<p>If nothing else, it is good to keep this option in mind if you ever break your laptop's display and don't feel like spending the money to fix it. Just grab an external monitor you have laying around and make a slabtop!</p> + +<h2 id="looking-into-something-else">Looking into “Something Else”</h2> + +<p>I found that the possible replacement screens weren’t worth the cost/hassle to swap out. And setting the laptop aside, docked with external peripherals sounded fine in theory - but then I would be missing out on the X201’s amazing classic keyboard…</p> + +<p>Then I thought to myself, “Why not just remove the display <em>entirely</em>?”</p> + +<p>So that’s what I did.</p> + +<p>Removing the entire top lid was easier than I initially thought it would be. The beautiful thing about these older, classic ThinkPads is the ability to completely dissemble them. I won’t go into heavy details on how to take one of these machines apart, since great documentation <a href="https://www.ifixit.com/Device/Lenovo_Thinkpad_X201_Tablet">already exists</a>. But once you have the keyboard and hinge screws removed it is essentially as easy as <em>lifting</em> the lid out of the chassis. (After disconnecting the small display connectors, of course)</p> + +<h2 id="ditching-alpine-for-debian">Ditching Alpine for Debian</h2> + +<p>I love Alpine Linux. It’s normally my <a href="https://as.bt.ht">go-to distro</a> (paired with dwm) for most of my laptop devices. Unfortunately, I find tiling window managers a slight pain to use on larger, 4K displays. I also wanted this slabtop to “just work”, instead of needing to fiddle around with WiFi, <code>xrandr</code>, audio etc. Not to mention that Debian is rock solid stable. Defaulting to the XFCE DE was a no-brainer as well since this device is somewhat <em>old</em>.</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>This slabtop gives me those old-school “Commodore64” vibes (or more recent devices like the Raspberry Pi 400). This setup certainly isn’t for everyone but for my use case it’s working well. Traveling with a machine like this might prove a little more challenging - although you could simply pair it with a smaller travel monitor (I’m sure the overall carrying weight would be similar to the standard X201).</p> + +<p>If nothing else, it is good to keep this option in mind if you ever break your laptop’s display and don’t feel like spending the money to fix it. Just grab an external monitor you have laying around and make a slabtop!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/slow/index.html b/build/slow/index.html index 79893ab..fd60bfb 100644 --- a/build/slow/index.html +++ b/build/slow/index.html @@ -1,54 +1,86 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Embracing Slow Tech</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Embracing Slow Tech</h1> +<h1 id="embracing-slow-tech">Embracing Slow Tech</h1> + <p>2022-11-22</p> -<p>I'm writing this post on my "new" X260 ThinkPad running <a href="https://garudalinux.org/">Garuda Linux</a> through Wayland/Sway and it is going well so far. Setting things up was much easier than I initially expected. There were only a few minor tweaks I had to make, such as setting <code>vim</code> as the default EDITOR and installing a small collection of applications (Bitwarden, qutebrowser etc).</p> + +<p>I’m writing this post on my “new” X260 ThinkPad running <a href="https://garudalinux.org/">Garuda Linux</a> through Wayland/Sway and it is going well so far. Setting things up was much easier than I initially expected. There were only a few minor tweaks I had to make, such as setting <code>vim</code> as the default EDITOR and installing a small collection of applications (Bitwarden, qutebrowser etc).</p> + <p>I ran into some headaches with generating proper SSH keys but that was solved by calling in <code>ssh-agent</code> whenever launching a new instance of Alacritty. This could certainly be cleaned up further, but for now everything works fine. (A more detailed post about this X260 is in the works!)</p> -<p>"Okay", I hear you say, "But what does this have to do with <em>slow tech</em>?"</p> + +<p>“Okay”, I hear you say, “But what does this have to do with <em>slow tech</em>?”</p> + <p>Good question! Let me explain.</p> -<h2>Purposely Unplugged</h2> -<p>For the longest time I have had some form of "smart" device on my persons while performing tasks away from my main computer. Whether that was grocery shopping, playing with the kids in the backyard, going on road trips - you name it. This was never a <em>bad thing</em> or something I actively looked to change. In fact, I hardly used these devices to connect much to the internet anyway[^1]. But I did notice that I would check things like Mastodon or my email every so often. </p> -<p>What I started to realize was that I was checking these "online" items out of pure habit. I hardly ever responded to any email on my iPhone (it doesn't help that Apple Mail on iOS is horrendous for plain text emails) and engaging in Mastodon, while fun, was certainly not a priority while out of the office. My attitude towards being "always online" started to shift towards being what I call <em>purposely unplugged</em>. I decided to make a personal change towards my online access:</p> -<blockquote><p>If something is important, then I will take the time to complete that task at <strong>my office computer</strong>. I do not need to be "always online".</p> + +<h2 id="purposely-unplugged">Purposely Unplugged</h2> + +<p>For the longest time I have had some form of “smart” device on my persons while performing tasks away from my main computer. Whether that was grocery shopping, playing with the kids in the backyard, going on road trips - you name it. This was never a <em>bad thing</em> or something I actively looked to change. In fact, I hardly used these devices to connect much to the internet anyway[^1]. But I did notice that I would check things like Mastodon or my email every so often. </p> + +<p>What I started to realize was that I was checking these “online” items out of pure habit. I hardly ever responded to any email on my iPhone (it doesn’t help that Apple Mail on iOS is horrendous for plain text emails) and engaging in Mastodon, while fun, was certainly not a priority while out of the office. My attitude towards being “always online” started to shift towards being what I call <em>purposely unplugged</em>. I decided to make a personal change towards my online access:</p> + +<blockquote> +<p>If something is important, then I will take the time to complete that task at <strong>my office computer</strong>. I do not need to be “always online”.</p> </blockquote> -<p>It really makes you wonder how people back in the late 90s or early 2000s ever managed their lives without being connected online 24/7. I certainly remember a time where you booted up a family computer to browse the internet, respond to emails, and complete work items. When you were done - you were done. You shutdown the machine and went about your life. "I'll check back later tonight before bed" or "Hopefully there will be an email response by tomorrow morning" was the normal thought process after logging off. Now there is no "logging off". It's just switching devices. I don't think it is healthy and really who benefits? Certainly not the individual.</p> -<p>Hardware (computers specifically in this case) serve a purpose. They are meant to serve the individual using them. When did we cross-over into a world where we seem to be serving our devices? <strong>You are not important enough to be "available online" all the time</strong>. Sorry, but it's true.</p> -<h2>Mobile Sucks Anyway</h2> + +<p>It really makes you wonder how people back in the late 90s or early 2000s ever managed their lives without being connected online 24/7. I certainly remember a time where you booted up a family computer to browse the internet, respond to emails, and complete work items. When you were done - you were done. You shutdown the machine and went about your life. “I’ll check back later tonight before bed” or “Hopefully there will be an email response by tomorrow morning” was the normal thought process after logging off. Now there is no “logging off”. It’s just switching devices. I don’t think it is healthy and really who benefits? Certainly not the individual.</p> + +<p>Hardware (computers specifically in this case) serve a purpose. They are meant to serve the individual using them. When did we cross-over into a world where we seem to be serving our devices? <strong>You are not important enough to be “available online” all the time</strong>. Sorry, but it’s true.</p> + +<h2 id="mobile-sucks-anyway">Mobile Sucks Anyway</h2> + <p>Browsing the web is an absolute shitshow on mobile devices. Every service and their grandma begs you to install their native app. Adblockers are pretty much non-existent, which makes the modern web almost intolerable to visit. Then you have the issue of walled gardens, security breaches, planned EOL for perfectly functional hardware, increased e-waste - the list goes on.</p> -<p>Functional computing and online interactions have already been perfected. It's called a <strong>computer</strong>[^3]. Computers (desktops and laptops) give us the ability to control our devices at the OS-level, granting us incredible freedom to tweak things to our individual preferences. Unless you are technical enough to fiddle around with "beta" mobile Linux devices, the majority of users are stuck with what they are given. And it isn't much.</p> -<p>The corporate push to move everyone over to "mobile computing" is no accident. The ability to ban certain apps, push ads to users, collect customer details, and harvest user data is more than enough motivation for companies to usher in a future of "mobile" computing.</p> + +<p>Functional computing and online interactions have already been perfected. It’s called a <strong>computer</strong>[^3]. Computers (desktops and laptops) give us the ability to control our devices at the OS-level, granting us incredible freedom to tweak things to our individual preferences. Unless you are technical enough to fiddle around with “beta” mobile Linux devices, the majority of users are stuck with what they are given. And it isn’t much.</p> + +<p>The corporate push to move everyone over to “mobile computing” is no accident. The ability to ban certain apps, push ads to users, collect customer details, and harvest user data is more than enough motivation for companies to usher in a future of “mobile” computing.</p> + <p>Not to mention <em>cost</em>. New, top-of-the-line mobile devices sell for the same, if not more, than a standard laptop or desktop. You give up flexibility, customization and freedom for what exactly? A really good camera? Built-in GPS navigation?</p> -<p>Get a <em>real</em> camera and grab a standard GPS. I'm serious. If that sounds ridiculous than you probably never really needed those things in the first place. Use the proper tool for the job. Smushing everything into one, locked-down device is a recipe for disaster.</p> + +<p>Get a <em>real</em> camera and grab a standard GPS. I’m serious. If that sounds ridiculous than you probably never really needed those things in the first place. Use the proper tool for the job. Smushing everything into one, locked-down device is a recipe for disaster.</p> + <p>Overall - just use a <em>real</em> computer.</p> -<h2>Don't Flip-Out</h2> -<p>So, with all of that in mind, I swapped out my iPhone SE (2020) smart phone for the ZTE Cymbal 2 "dumb" flip phone. </p> + +<h2 id="dont-flip-out">Don’t Flip-Out</h2> + +<p>So, with all of that in mind, I swapped out my iPhone SE (2020) smart phone for the ZTE Cymbal 2 “dumb” flip phone. </p> + <p>The screen is extremely small with low resolution. The camera is absolute garbage. Writing text messages requires use (and knowledge) of the T9 composer[^2]. Most modern applications besides email or the photo gallery are non-existent.</p> + <p><strong>But I absolutely love it</strong>.</p> -<p>It's a phone. It makes phone calls and allows me to send texts. Texts themselves are a little more time consuming, which forces me to be more concise in my writing. Anything that requires great detail should probably be an email - which is what my computer is for. What else do I need? If I ever drop it and smash into a million pieces I can replace it for <$50. I have the ability to replace the battery - not to mention battery life is measured in <em>days</em> not hours. It's rugged, so I don't need to be so delicate with it or slap some huge protective case on it.</p> + +<p>It’s a phone. It makes phone calls and allows me to send texts. Texts themselves are a little more time consuming, which forces me to be more concise in my writing. Anything that requires great detail should probably be an email - which is what my computer is for. What else do I need? If I ever drop it and smash into a million pieces I can replace it for <$50. I have the ability to replace the battery - not to mention battery life is measured in <em>days</em> not hours. It’s rugged, so I don’t need to be so delicate with it or slap some huge protective case on it.</p> + <p>It does its job. No more, no less.</p> -<h2>"Good for You"</h2> -<p>I know that some of you reading this might think that this workflow is fine for <em>me</em> but would never be suitable for your needs. Maybe that's true, but I'd probably disagree. I think people have just been conditioned to <em>believe</em> that most day-to-day activites would be impossible without a smart device or a connection to the internet. If not, many would at least feel that without such access things would become far too inconvenient. My stance remains: the majority of people do not need constant access to a computer in their pocket.</p> -<p>It's completely fine to enjoy your own setup and device preferences - I'm not trying to convert anyone but instead just describing my own experiences. So please, keep your torches and pitchforks at home.</p> + +<h2 id="good-for-you">“Good for You”</h2> + +<p>I know that some of you reading this might think that this workflow is fine for <em>me</em> but would never be suitable for your needs. Maybe that’s true, but I’d probably disagree. I think people have just been conditioned to <em>believe</em> that most day-to-day activites would be impossible without a smart device or a connection to the internet. If not, many would at least feel that without such access things would become far too inconvenient. My stance remains: the majority of people do not need constant access to a computer in their pocket.</p> + +<p>It’s completely fine to enjoy your own setup and device preferences - I’m not trying to convert anyone but instead just describing my own experiences. So please, keep your torches and pitchforks at home.</p> + <p>Thanks for reading.</p> -<h2>Refs</h2> + +<h2 id="refs">Refs</h2> + <ol> -<li>It helps that I have pretty much zero active accounts across most "popular" social media platforms.</li> -<li>Some of you readers might not have ever experienced the wonders of T9...</li> -<li>I understand that even smart phones can be classified as "computers". I am using this term in the classical sense.</li> +<li>It helps that I have pretty much zero active accounts across most “popular” social media platforms.</li> +<li>Some of you readers might not have ever experienced the wonders of T9…</li> +<li>I understand that even smart phones can be classified as “computers”. I am using this term in the classical sense.</li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/soma-terminal-css/index.html b/build/soma-terminal-css/index.html index aab9549..fa59d23 100644 --- a/build/soma-terminal-css/index.html +++ b/build/soma-terminal-css/index.html @@ -1,59 +1,73 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>SOMA Inspired Terminal Display with CSS</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>SOMA Inspired Terminal Display with CSS</h1> +<h1 id="soma-inspired-terminal-display-with-css">SOMA Inspired Terminal Display with CSS</h1> + <p>2021-05-29</p> + <p>A few years back I played (and loved) <a href="https://store.steampowered.com/app/282140/SOMA/">SOMA</a>, a first-person sci-fi horror-adventure game. The story was intriguing and the developers nailed the overall atmosphere of Pathos-II. Though both those aspects were great, what I found the most enjoyable were the interactive computers and displays found sprinkled throughout the world.</p> -<p>Three years ago I wanted to see if I could recreate one of those terminal displays with HTML & CSS. And I did just that.</p> -<p>So, why am I writing about this <em>three years later</em>? Well, I never did a proper write-up explaining how I achieved it. I'm sure someone out there in the wild west of the web could get some value out of this tutorial, right? I hope so!</p> -<h2>The Live Demo</h2> + +<p>Three years ago I wanted to see if I could recreate one of those terminal displays with HTML & CSS. And I did just that.</p> + +<p>So, why am I writing about this <em>three years later</em>? Well, I never did a proper write-up explaining how I achieved it. I’m sure someone out there in the wild west of the web could get some value out of this tutorial, right? I hope so!</p> + +<h2 id="the-live-demo">The Live Demo</h2> + <p><img src="/public/images/soma-terminal.png" alt="Terminal based off the SOMA computers" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/ZEeLgmz">Live CodePen Example</a></p> -<h2>The HTML</h2> + +<h2 id="the-html">The HTML</h2> + <p>Nothing fancy going on here - just some simple <code>div</code> elements holding a few paragraphs and spans:</p> -<pre><code><div class="outer-frame"> - <div class="screen"> - <div class="screen-guts"> - <h2>Key Control</h2> - <p><span>Panel Chip</span> (Connector)</p> - <p class="column"> - Security Keys: 023-027<br>C819738-23 - <br> - <span class="error">Error: Key Expired</span> - <br> - <em>Please update...</em> - </p> - <p> - <span>Permission</span> - <br> + +<pre><code><div class="outer-frame"> + <div class="screen"> + <div class="screen-guts"> + <h2>Key Control</h2> + <p><span>Panel Chip</span> (Connector)</p> + <p class="column"> + Security Keys: 023-027<br>C819738-23 + <br> + <span class="error">Error: Key Expired</span> + <br> + <em>Please update...</em> + </p> + <p> + <span>Permission</span> + <br> Standard ThetaCipher - <br> - <span>Secop-Jstrohweier</span> - </p> - <button class="update-button">Update Chip</button> - </div> - <div class="bottom-controls"> - <button class="back-button">Back 背部</button> - </div> - </div> -</div> + <br> + <span>Secop-Jstrohweier</span> + </p> + <button class="update-button">Update Chip</button> + </div> + <div class="bottom-controls"> + <button class="back-button">Back 背部</button> + </div> + </div> +</div> </code></pre> -<h2>The CSS</h2> -<p>Let's just dump all the CSS right here (don't worry, it looks far more complicated than it really is):</p> -<pre><code>@import url('https://opentype.netlify.com/sansation/index.css'); + +<h2 id="the-css">The CSS</h2> + +<p>Let’s just dump all the CSS right here (don’t worry, it looks far more complicated than it really is):</p> + +<pre><code>@import url('https://opentype.netlify.com/sansation/index.css'); * { box-sizing: border-box; @@ -61,7 +75,7 @@ body { background: #333; - font-family: "Sansation", sans-serif; + font-family: "Sansation", sans-serif; padding: 3rem 0; } @@ -69,7 +83,7 @@ button { appearance: none; border: 0; cursor: pointer; - font-family: "Inconsolata", "Consolas", mono; + font-family: "Inconsolata", "Consolas", mono; font-size: 18px; transition: 0.3s ease all; } @@ -82,7 +96,7 @@ button { } .outer-frame { - background: #ccc url("https://preview.ibb.co/iS9nz7/screen_grunge.webp") no-repeat center; + background: #ccc url("https://preview.ibb.co/iS9nz7/screen_grunge.webp") no-repeat center; background-size: cover; border-radius: 5px; box-shadow: 0 5px 20px rgba(0,0,0,0.6); @@ -93,7 +107,7 @@ button { background: rgba(0,0,0,0.3); border-radius: 5px; box-shadow: inset 5px 5px 10px rgba(0,0,0,0.4), 1px 1px 1px rgba(255,255,255,0.3); - content: ''; + content: ''; height: 538px; left: 15px; position: absolute; @@ -102,7 +116,7 @@ button { } .screen { - background: #000 url("https://image.ibb.co/gOqSz7/screen_dust.webp") no-repeat center; + background: #000 url("https://image.ibb.co/gOqSz7/screen_dust.webp") no-repeat center; background-size: cover; border-radius: 5px; height: 450px; @@ -113,11 +127,11 @@ button { width: 600px; } .screen:after { - background: url("https://s13.postimg.org/85ryuy1o7/dust.webp") no-repeat center; + background: url("https://s13.postimg.org/85ryuy1o7/dust.webp") no-repeat center; background-size: cover; border-radius: 5px; box-shadow: inset 0 0 20px rgba(0,0,0,0.5), inset 5px 5px 10px rgba(0,0,0,0.4), 1px 1px 1px rgba(255,255,255,0.3); - content: ''; + content: ''; height: 100%; left: 0; opacity: 0.8; @@ -139,7 +153,7 @@ button { .screen-guts:after { border: 2px solid #8fc8c8; color: #8fc8c8; - content: '键'; + content: '键'; padding: 5px 8px; position: absolute; right: 0; @@ -204,8 +218,11 @@ button { background: rgba(0,0,0,0.6); } </code></pre> -<p>The overall styling is fairly simple (which is great for browser support) with only a couple pseudo elements. It's important to include the custom <code>Sansation</code> typeface, since this is what the game uses for most UI elements and terminals. (I'm loading in this font via my <a href="https://opentype.netlify.app">OpenType side project</a>)</p> + +<p>The overall styling is fairly simple (which is great for browser support) with only a couple pseudo elements. It’s important to include the custom <code>Sansation</code> typeface, since this is what the game uses for most UI elements and terminals. (I’m loading in this font via my <a href="https://opentype.netlify.app">OpenType side project</a>)</p> + <p>The most important properties that truly bring this design together are those associated with the <code>.outer-frame</code> and <code>.screen</code> pseudo elements. Both of these elements use custom <code>background-images</code> that give a little more depth and life to the terminal - in this case fingerprints, dust and smudges.</p> + <p>Feel free to swap these image textures out with your own and alter the terminal as you see fit!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/spec/index.html b/build/spec/index.html index 6385cfa..90004e6 100644 --- a/build/spec/index.html +++ b/build/spec/index.html @@ -1,35 +1,51 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Never Do Spec Work for Free</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Never Do Spec Work for Free</h1> +<h1 id="never-do-spec-work-for-free">Never Do Spec Work for Free</h1> + <p>2022-11-07</p> -<p>Your time is valuable and shouldn't be taken for granted. Let me say that again for the people in the back: <em>your time is valuable and shouldn't be taken for granted</em>. Time is the most precious commodity we have as human beings, so never waste that time on free "spec" work. It's never worth it. Ever.</p> -<p>I've had up-and-coming designers reach out to me multiple times and ask specifically about completing spec work or "challenges" presented by hiring staff. My first question is normally, "Are they paying you for it?". If the answer is no, then I tell these individuals to move on. The company and the role is not worth their time.</p> -<p>There are plenty of companies that respect the hiring process and will pay you for your time. Good on them. These are the places that you should be striving to work with/for. Avoid those who don't. If they don't respect your time before they even consider hiring you, what makes you think they'll respect it once you're on the team?</p> -<h2>Never?</h2> -<p>Never. If a company or individual is considering you for a role, so much so that they are interested in seeing how you would work with them directly, <strong>they need to pay you</strong>. These companies (large or small) would <em>laugh</em> at the concept of doing something free for you. Why is their time respected but yours isn't?</p> -<h2>Asking for Free Spec Work? Stop.</h2> -<p>If you're implementing these practices at your place of business, then you're part of the problem. Maybe you need a more robust candidate review process, so those interviewees you are willing to pay for "code challenges" or spec work are more finely tuned. Maybe you just need to re-evaluate how much you value the workers you're looking to hire.</p> -<p>The software world is a strange beast where we have adapted this "work for free before we <em>think</em> about paying you". Imagine implementing this system for something like a plumber?</p> -<p>"Hey, could you install this new sink for me - for <strong>free</strong>? Then, if I think you did a good job, I can start to pay you for other work around my house?"</p> + +<p>Your time is valuable and shouldn’t be taken for granted. Let me say that again for the people in the back: <em>your time is valuable and shouldn’t be taken for granted</em>. Time is the most precious commodity we have as human beings, so never waste that time on free “spec” work. It’s never worth it. Ever.</p> + +<p>I’ve had up-and-coming designers reach out to me multiple times and ask specifically about completing spec work or “challenges” presented by hiring staff. My first question is normally, “Are they paying you for it?”. If the answer is no, then I tell these individuals to move on. The company and the role is not worth their time.</p> + +<p>There are plenty of companies that respect the hiring process and will pay you for your time. Good on them. These are the places that you should be striving to work with/for. Avoid those who don’t. If they don’t respect your time before they even consider hiring you, what makes you think they’ll respect it once you’re on the team?</p> + +<h2 id="never">Never?</h2> + +<p>Never. If a company or individual is considering you for a role, so much so that they are interested in seeing how you would work with them directly, <strong>they need to pay you</strong>. These companies (large or small) would <em>laugh</em> at the concept of doing something free for you. Why is their time respected but yours isn’t?</p> + +<h2 id="asking-for-free-spec-work-stop.">Asking for Free Spec Work? Stop.</h2> + +<p>If you’re implementing these practices at your place of business, then you’re part of the problem. Maybe you need a more robust candidate review process, so those interviewees you are willing to pay for “code challenges” or spec work are more finely tuned. Maybe you just need to re-evaluate how much you value the workers you’re looking to hire.</p> + +<p>The software world is a strange beast where we have adapted this “work for free before we <em>think</em> about paying you”. Imagine implementing this system for something like a plumber?</p> + +<p>“Hey, could you install this new sink for me - for <strong>free</strong>? Then, if I think you did a good job, I can start to pay you for other work around my house?”</p> + <p>Good luck with that.</p> -<h2>Be Confident</h2> -<p>This post is mostly targeted to new designers and developers, but can certainly still apply to those with years of experience under their belts. I've been guilty of doing free spec work years ago when I was first starting out (my grey hairs are showing...) and it <strong>never</strong> paid off. Literally and figuratively. Learn through my own mistakes and just walk away from people asking you to work for free.</p> + +<h2 id="be-confident">Be Confident</h2> + +<p>This post is mostly targeted to new designers and developers, but can certainly still apply to those with years of experience under their belts. I’ve been guilty of doing free spec work years ago when I was first starting out (my grey hairs are showing…) and it <strong>never</strong> paid off. Literally and figuratively. Learn through my own mistakes and just walk away from people asking you to work for free.</p> + <p>No matter what you think about your skill level or real-world experience, you need to have at least a bare-minimum standard for yourself: </p> -<p><strong>Never work for free</strong> -- Unless you <em>choose</em> to work for free on something like a personal or open source project. That is obviously a different situation!</p> + +<p><strong>Never work for free</strong> – Unless you <em>choose</em> to work for free on something like a personal or open source project. That is obviously a different situation!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/srht2/index.html b/build/srht2/index.html index be5babe..57c6842 100644 --- a/build/srht2/index.html +++ b/build/srht2/index.html @@ -1,23 +1,28 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Migrating from GitHub to sourcehut</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Migrating from GitHub to sourcehut</h1> +<h1 id="migrating-from-github-to-sourcehut">Migrating from GitHub to sourcehut</h1> + <p>2022-11-14</p> -<p>It has taken a little bit longer than I anticipated, but I have finally started to port over all my personal open-source projects to <a href="https://sourcehut.org">sourcehut.org</a>. I'll get into the <em>why</em> and <em>how</em> momentarily, but first let's take a look at all the impacted projects:</p> -<h2>Ported Projects</h2> + +<p>It has taken a little bit longer than I anticipated, but I have finally started to port over all my personal open-source projects to <a href="https://sourcehut.org">sourcehut.org</a>. I’ll get into the <em>why</em> and <em>how</em> momentarily, but first let’s take a look at all the impacted projects:</p> + +<h2 id="ported-projects">Ported Projects</h2> + <ul> <li><a href="https://vanillacss.com">Vanilla CSS</a></li> <li><a href="https://1mb.club">1mb.club</a></li> @@ -25,29 +30,47 @@ <li><a href="https://shinobi.bt.ht">shinobi</a></li> <li><a href="https://audit.bt.ht">Web Audit</a></li> </ul> -<h2>Still WIP</h2> + +<h2 id="still-wip">Still WIP</h2> + <ul> <li><a href="https://1kb.club">1kb.club</a></li> <li><a href="https://phpetite.org">phpetite.org</a></li> </ul> -<p><em>Some others are being worked on but have less "popularity"</em></p> -<h2>Why?</h2> -<p>GitHub has landed itself in some hot water with their <a href="https://githubcopilotlitigation.com/">recent lawsuit(s) surrounding their Copilot feature</a>. I was already on the fence about keeping GitHub as my main "code forge" after they were scooped up by Microsoft, who then killed off Atom and then started collecting telemetry data through VSCode. This seemed like a good excuse as any to finally leave the platform. The <em>straw</em>, if you will.</p> -<p><em>>> Sourcehut has entered the chat <<</em></p> -<p>We, as designers and developers, shouldn't be supporting crap like this. I would much rather put my money where my mouth is and directly support a truly transparent alternative<a href="https://sourcehut.org/pricing/">^1]. Although I might only be paying for the <strong>Typical Hacker</strong> tier on [sourcehut</a>, I like to think that every little bit helps the platform. Even if you choose a different code forge, please consider donating to support independent alternatives!</p> -<h2>Git Email? Jump into the Deep End</h2> -<p>One aspect of sourcehut that initially scared me off was the lack of a proper "PR-flow", web UI-based system[^2]. Instead, reporting bugs, creating tickets, and submitting PATCHES are generally done through regular, plain-text email.</p> -<p>In the end, I'm glad I stuck it out. I'm still pretty slow with this new workflow (so please be patient with me if you submit a patch on a project!) but it actually seems cleaner. The phrase "streamlined" is what comes to mind.</p> -<p>And really, if you think about it, at one point in time GitHub's PR system would have been "new" for most users. Everything takes time to learn. This workflow is no different.</p> -<p>Drew (creator of sourcehut) actually put together an extremely helpful guide on getting <a href="https://git-send-email.io/">setup with git send-email</a>. I still reference back to this if/when I need to get up-and-running on a new machine. I highly recommend checking it out.</p> -<h2>Wrapping Up</h2> -<p>That's it really. I'm still in the process of moving over some projects, archiving original GitHub repos and becoming more adapted to the whole sourcehut "workflow". I'm enjoying it and it feels good to pay for something that is not only useful but open source at its core.</p> -<p>Will I be deleting my GitHub profile outright? Maybe. I'm not sure. For now the first step is removing any dependence I once had on that platform. Baby steps.</p> -<p>For those interested, my sourcehut public profile is: <a href="https://sr.ht/~bt/">https://sr.ht/~bt/</a>. Maybe I'll see you on the other side ;)</p> -<h2>Refs</h2> + +<p><em>Some others are being worked on but have less “popularity”</em></p> + +<h2 id="why">Why?</h2> + +<p>GitHub has landed itself in some hot water with their <a href="https://githubcopilotlitigation.com/">recent lawsuit(s) surrounding their Copilot feature</a>. I was already on the fence about keeping GitHub as my main “code forge” after they were scooped up by Microsoft, who then killed off Atom and then started collecting telemetry data through VSCode. This seemed like a good excuse as any to finally leave the platform. The <em>straw</em>, if you will.</p> + +<p><em>>> Sourcehut has entered the chat <<</em></p> + +<p>We, as designers and developers, shouldn’t be supporting crap like this. I would much rather put my money where my mouth is and directly support a truly transparent alternative[^1]. Although I might only be paying for the <strong>Typical Hacker</strong> tier on <a href="https://sourcehut.org/pricing/">sourcehut</a>, I like to think that every little bit helps the platform. Even if you choose a different code forge, please consider donating to support independent alternatives!</p> + +<h2 id="git-email-jump-into-the-deep-end">Git Email? Jump into the Deep End</h2> + +<p>One aspect of sourcehut that initially scared me off was the lack of a proper “PR-flow”, web UI-based system[^2]. Instead, reporting bugs, creating tickets, and submitting PATCHES are generally done through regular, plain-text email.</p> + +<p>In the end, I’m glad I stuck it out. I’m still pretty slow with this new workflow (so please be patient with me if you submit a patch on a project!) but it actually seems cleaner. The phrase “streamlined” is what comes to mind.</p> + +<p>And really, if you think about it, at one point in time GitHub’s PR system would have been “new” for most users. Everything takes time to learn. This workflow is no different.</p> + +<p>Drew (creator of sourcehut) actually put together an extremely helpful guide on getting <a href="https://git-send-email.io/">setup with git send-email</a>. I still reference back to this if/when I need to get up-and-running on a new machine. I highly recommend checking it out.</p> + +<h2 id="wrapping-up">Wrapping Up</h2> + +<p>That’s it really. I’m still in the process of moving over some projects, archiving original GitHub repos and becoming more adapted to the whole sourcehut “workflow”. I’m enjoying it and it feels good to pay for something that is not only useful but open source at its core.</p> + +<p>Will I be deleting my GitHub profile outright? Maybe. I’m not sure. For now the first step is removing any dependence I once had on that platform. Baby steps.</p> + +<p>For those interested, my sourcehut public profile is: <a href="https://sr.ht/~bt/">https://sr.ht/~bt/</a>. Maybe I’ll see you on the other side ;)</p> + +<h2 id="refs">Refs</h2> + <ol> -<li>I keep an up-to-date document of all the open source software/communities I pay for on <a href="/uses">my "Uses" page</a> for reference.</li> -<li>Put your pitchforks and torches away - I'm aware that a web-facing UI exists on sourcehut as well!</li> +<li>I keep an up-to-date document of all the open source software/communities I pay for on <a href="/uses">my “Uses” page</a> for reference.</li> +<li>Put your pitchforks and torches away - I’m aware that a web-facing UI exists on sourcehut as well!</li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/stay-hungry/index.html b/build/stay-hungry/index.html index 7a49ca7..06fda86 100644 --- a/build/stay-hungry/index.html +++ b/build/stay-hungry/index.html @@ -1,36 +1,48 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Stay Hungry</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Stay Hungry</h1> +<h1 id="stay-hungry">Stay Hungry</h1> + <p>2018-02-12</p> -<p>It can feel daunting in this developer / designer landscape to keep yourself up-to-date with the latest and greatest technologies available. Which new framework should I invest the most time into? Will it even be maintained a couple years down the road? Is it just a fad?</p> -<p>What about programming languages? Should I learn as many as possible or should I become an expert in one specialized area? <em>Should designers code?<span class="sidenote-number"></span></em> The list of possible <em>new</em> things you could be learning continues to grow. -<span class="sidenote">This is sarcasm. Please don't take this seriously...</span></p> -<h2>Jumping right in</h2> -<p>Want my advice? Pick something and dive head first into it. Don't worry if it's not the most popular programming language or if it's a new design system that isn't gaining much traction. Do you find it interesting? Awesome - that's what matters most. How can you teach yourself something new when you have <em>zero</em> interest in it?</p> -<h2>Less talk, more action</h2> + +<p>It can feel daunting in this developer / designer landscape to keep yourself up-to-date with the latest and greatest technologies available. Which new framework should I invest the most time into? Will it even be maintained a couple years down the road? Is it just a fad?</p> + +<p>What about programming languages? Should I learn as many as possible or should I become an expert in one specialized area? <em>Should designers code?</em> The list of possible <em>new</em> things you could be learning continues to grow. +This is sarcasm. Please don’t take this seriously…</p> + +<h2 id="jumping-right-in">Jumping right in</h2> + +<p>Want my advice? Pick something and dive head first into it. Don’t worry if it’s not the most popular programming language or if it’s a new design system that isn’t gaining much traction. Do you find it interesting? Awesome - that’s what matters most. How can you teach yourself something new when you have <em>zero</em> interest in it?</p> + +<h2 id="less-talk-more-action">Less talk, more action</h2> + <p>So what am I currently doing to keep my mind fresh and thinking outside of my comfort zone?</p> + <ul> <li>Teaching myself the R programming language</li> <li>Deep diving into the <code>ggplot2</code> package</li> <li>Developing my first side project website using <code>blogdown</code> and Hugo</li> <li>Trying out Figma as my exclusive design program for the next few months</li> </ul> -<p>Programming your brain to learn something new can be frustrating and pull you out of your comfort zone. Don't let this become stressful - instead use it as inspiration to push yourself through the struggle.</p> + +<p>Programming your brain to learn something new can be frustrating and pull you out of your comfort zone. Don’t let this become stressful - instead use it as inspiration to push yourself through the struggle.</p> + <p>There is no real reason to avoid learning something new outside your current circle of knowledge - only crappy excuses.</p> + <p>Get on it.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/sticky-elements/index.html b/build/sticky-elements/index.html index ffd9408..f39fa55 100644 --- a/build/sticky-elements/index.html +++ b/build/sticky-elements/index.html @@ -1,64 +1,75 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Stop Using Sticky Navigation on Mobile</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Stop Using Sticky Navigation on Mobile</h1> +<h1 id="stop-using-sticky-navigation-on-mobile">Stop Using Sticky Navigation on Mobile</h1> + <p>2019-10-06</p> -<p>Stop styling your web elements to be "sticky" on mobile. This creates a horrible experience for your users and also looks like trash from a UI perspective. Don't style your navigation (or any components for that matter) to be "sticky" on mobile. They create poor experiences for your users and take away valuable screen space.</p> -<h2>What do you mean by "sticky"?</h2> + +<p>Stop styling your web elements to be “sticky” on mobile. This creates a horrible experience for your users and also looks like trash from a UI perspective. Don’t style your navigation (or any components for that matter) to be “sticky” on mobile. They create poor experiences for your users and take away valuable screen space.</p> + +<h2 id="what-do-you-mean-by-sticky">What do you mean by “sticky”?</h2> + <p>The concept of <em>sticky</em> elements include but are not exclusive to:</p> + <ul> <li>Navigations that follow users as they scroll</li> <li>Chatbot prompt bubbles eating up half the bottom of the screen</li> -<li>Banners or modal prompts that pester the user to "sign up, accept cookies" etc.</li> +<li>Banners or modal prompts that pester the user to “sign up, accept cookies” etc.</li> </ul> + <p><strong>These are bad and you should feel bad for implementing them.</strong> Spacing and layout is a critical part of a product’s design and greatly impacts the experience of its users. Stop screwing it up with ugly sticky elements.</p> -<p>First, let's breakdown "sticky" navigations and why they're terrible. We'll also go over some easy solutions to avoid making these bad design decisions in the first place.</p> -<h2>The stalking navigation</h2> -<p>When you make a decision to eat away <code>>50px</code> of space at the top of the page for your site's navigation - you're hurting your users. You're also making their time interacting with your website more painful.</p> -<p>"Wait!" I hear sticky-nav defenders exclaim, "this navigation bar makes it so the user can <em>easily</em> interact with the site's pages!"</p> -<p><strong>What absolute rubbish.</strong> A user should only see a website's navigation when they <em>need to use it</em>. This isn't rocket science.</p> -<p>Let's a take a look at the problem:</p> -<p><figure> - <img src="/public/images/sticky-bad-navigation.webp" alt="Bad navigation" /> - <figcaption>Fixed navigation: you lose valuable space for an element that might only be used once per visit (<a href="/public/images/sticky-bad-navigation.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>Knowing when to show navigation can be easily solved where the user isn't bogged down with a chunk of their screen permanently taken away, all the while still having access to the navigation. This can be fixed by simply understanding the user context at a given time. See below:</p> -<p><figure> - <img src="/public/images/sticky-good-navigation.webp" alt="Good navigation" /> - <figcaption>Static navigation: users can focus on what is important - <strong>the content</strong> (<a href="/public/images/sticky-good-navigation.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>Here the navigation flows up with the rest of the page as the user scrolls the main content into view. Don't worry about creating confusion - the user knows the navigation is still at the top of the page because they <em>watched it scroll out of view</em>. This is best paired by having a matching navigation in the footer of the page as well. That way, when the user makes it to the end of a specific view they can change pages right in the "footer". No need to scroll back to the top.</p> -<h2>The best of both worlds?</h2> + +<p>First, let’s breakdown “sticky” navigations and why they’re terrible. We’ll also go over some easy solutions to avoid making these bad design decisions in the first place.</p> + +<h2 id="the-stalking-navigation">The stalking navigation</h2> + +<p>When you make a decision to eat away <code>>50px</code> of space at the top of the page for your site’s navigation - you’re hurting your users. You’re also making their time interacting with your website more painful.</p> + +<p>“Wait!” I hear sticky-nav defenders exclaim, “this navigation bar makes it so the user can <em>easily</em> interact with the site’s pages!”</p> + +<p><strong>What absolute rubbish.</strong> A user should only see a website’s navigation when they <em>need to use it</em>. This isn’t rocket science.</p> + +<p>Let’s a take a look at the problem:</p> + +<p>Knowing when to show navigation can be easily solved where the user isn’t bogged down with a chunk of their screen permanently taken away, all the while still having access to the navigation. This can be fixed by simply understanding the user context at a given time. See below:</p> + +<p>Here the navigation flows up with the rest of the page as the user scrolls the main content into view. Don’t worry about creating confusion - the user knows the navigation is still at the top of the page because they <em>watched it scroll out of view</em>. This is best paired by having a matching navigation in the footer of the page as well. That way, when the user makes it to the end of a specific view they can change pages right in the “footer”. No need to scroll back to the top.</p> + +<h2 id="the-best-of-both-worlds">The best of both worlds?</h2> + <p>Maybe you want to hide the navigation without losing the flexibility of it always being accessible at the top of the page? This is possible, although I find it still <em>somewhat</em> intrusive on the user. An easy way achieve this is by displaying the navigation when users perform a specific action, such as:</p> + <ul> <li>Long or multiple upward swipes on the page</li> <li>Pull down menu from top of current view (easily shown to user)</li> </ul> -<p><figure> - <img src="/public/images/sticky-good-navigation-2.webp" alt="Good navigation displaying top navigation" /> - <figcaption>Dynamic navigation: show the user the top navigation when a certain action is performed (<a href="/public/images/sticky-good-navigation-2.webp">direct link to image</a>)</figcaption> -</figure></p> -<h2>Navigations aren't the only culprits</h2> -<p>I wish that navigation items were the only sinners of the "sticky" position on mobile - but they are not alone. A few other problematic components include:</p> + +<h2 id="navigations-arent-the-only-culprits">Navigations aren’t the only culprits</h2> + +<p>I wish that navigation items were the only sinners of the “sticky” position on mobile - but they are not alone. A few other problematic components include:</p> + <ul> -<li>Chatbot or support "bubbles"</li> -<li>"Agree to our cookies" prompts</li> +<li>Chatbot or support “bubbles”</li> +<li>“Agree to our cookies” prompts</li> <li>Time-based pop-up modals</li> </ul> -<p>Every time you implement one of these components, somewhere in the world a puppy dies. Seriously - don't be part of the problem and build these things. Push back on "marketing research" or team leads who tell you that this crap works. You're making the mobile web worse for everyone and setting a terrible precedent for future developers.</p> + +<p>Every time you implement one of these components, somewhere in the world a puppy dies. Seriously - don’t be part of the problem and build these things. Push back on “marketing research” or team leads who tell you that this crap works. You’re making the mobile web worse for everyone and setting a terrible precedent for future developers.</p> + <p>Stay <em>static</em>, my friends!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/still-using-jquery/index.html b/build/still-using-jquery/index.html index f6db3e5..c801c47 100644 --- a/build/still-using-jquery/index.html +++ b/build/still-using-jquery/index.html @@ -1,41 +1,54 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Yes, I Still Use jQuery</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Yes, I Still Use jQuery</h1> +<h1 id="yes-i-still-use-jquery">Yes, I Still Use jQuery</h1> + <p>2019-04-15</p> + <p>I have seen a handful of condescending comments from front-end developers since the newest build of jQuery (<a href="http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/">3.4.0</a>) released a couple of days ago. While I understand not all developers share the same work-style or are using the same tech-stack, dismissive comments towards any <em>useful</em> library comes off as entitled or elitist.</p> + <ul> -<li>"Why would you use jQuery nowadays?" </li> -<li>"People are still developing this library?"</li> -<li>"Why use jQuery when you can use [insert latest trendy web tech here]".</li> +<li>“Why would you use jQuery nowadays?” </li> +<li>“People are still developing this library?”</li> +<li>“Why use jQuery when you can use [insert latest trendy web tech here]”.</li> </ul> -<p><strong>I still use jQuery</strong>. Well, I may not use the library for all projects since every project is different - but I certainly don't avoid using it solely because "its jQuery". I've always believed in using the best tools for the job.</p> -<h2>Use what works for you</h2> + +<p><strong>I still use jQuery</strong>. Well, I may not use the library for all projects since every project is different - but I certainly don’t avoid using it solely because “its jQuery”. I’ve always believed in using the best tools for the job.</p> + +<h2 id="use-what-works-for-you">Use what works for you</h2> + <p>If you produce better work in a shorter amount of time using one of the latest and greatest technologies (React, Vue.js, Angular, etc.) then you should absolutely do so. If another developer can be just as productive building their projects with jQuery, what does it matter in the grand scheme of things?</p> -<p>My thought-process is this: a large percentage of web projects are done for clients not involved in the day-to-day happenings of the developer world. What they want is a solution to a particular problem. Clients don't care how things are done behind the scenes - so long as it is done efficiently and <em>properly</em>.</p> + +<p>My thought-process is this: a large percentage of web projects are done for clients not involved in the day-to-day happenings of the developer world. What they want is a solution to a particular problem. Clients don’t care how things are done behind the scenes - so long as it is done efficiently and <em>properly</em>.</p> + <p>I tend to follow these principles when working on a project (with shared equal importance):</p> + <ul> <li>fast performance</li> <li>accessible</li> <li>simple UI</li> <li>intuitive UX</li> </ul> -<p>As long as all of these items are accomplished, I don't care if the project was a direct export from Microsoft Word straight to the web<sup>1</sup>. If it works great, then it works great.</p> -<p>So use whatever tools make you a happier developer, as long as your projects don't suffer because of them.</p> -<p><small><sup>1</sup>This would obviously be terrible for development, but its just an extreme example</small></p> + +<p>As long as all of these items are accomplished, I don’t care if the project was a direct export from Microsoft Word straight to the web1. If it works great, then it works great.</p> + +<p>So use whatever tools make you a happier developer, as long as your projects don’t suffer because of them.</p> + +<p>1This would obviously be terrible for development, but its just an extreme example</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/stripe-menu-css/index.html b/build/stripe-menu-css/index.html index 44d7ef3..1f16e6e 100644 --- a/build/stripe-menu-css/index.html +++ b/build/stripe-menu-css/index.html @@ -1,39 +1,44 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Stripe Menu Dropdowns (CSS)</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Stripe Menu Dropdowns (CSS)</h1> +<h1 id="stripe-menu-dropdowns-css">Stripe Menu Dropdowns (CSS)</h1> + <p>2020-03-31</p> -<p>In a previous article I wrote, <a href="blog/minimal-css-menu">Minimal CSS: Dropdown Menus</a>, I showed how you could create a basic menu dropdown with only 121 bytes of CSS. While this demo is great for simple text-based menu dropdowns, it doesn't show just how complex (in a good way) you can make CSS-only menus. So, let's do just that.</p> -<h2>What we want to emulate</h2> -<p>I think, like most designers, that the UI and web design work from the <a href="https://stripe.com/">Stripe</a> team is pretty fantastic. Their clean approach using subtle animations and minimal elements make for a pleasant experience. Unfortunately, there is <i>one problem</i> with their current dropdown menus on their main website:</p> -<p><b>They don't work if JavaScript is disabled.</b></p> -<p>But we can easily fix that. So enough chit-chat, let's rip-off their menu design and recreate it with only CSS!</p> -<h3>Original (<a href="https://stripe.com">Stripe Website</a>)</h3> -<p><figure> - <img src="/public/images/stripe-default-menu.webp" alt="Stripe default menu"> - <figcaption>Stripe's default menu dropdown (using both CSS & JavaScript) (<a href="/public/images/stripe-default-menu.webp">direct link to image</a>)</figcaption> -</figure></p> -<h3>Our recreation (<a href="https://codepen.io/bradleytaunt/full/ExjMjLL">CodePen Demo</a>)</h3> -<p><figure> - <img src="/public/images/stripe-recreated.webp" alt="Stripe menu recreated"> - <figcaption>Our recreation with pure CSS (zero JavaScript) (<a href="/public/images/stripe-recreated.webp">direct link to image</a>)</figcaption> -</figure></p> -<p>Although our redesign is far from an exact replica (some subtle animations are missing which could always be added) - it's still impressive what you can do with some bare-bones CSS. Just something to keep in mind the next time you decide to reach for a JavaScript library to implement a similar design.</p> -<h2>See it live in action</h2> -<p>Load in the CodePen below and play around with the menu dropdown. Feel free to re-use, break. share or <i>steal</i> this for any and all purposes. Enjoy!</p> + +<p>In a previous article I wrote, <a href="blog/minimal-css-menu">Minimal CSS: Dropdown Menus</a>, I showed how you could create a basic menu dropdown with only 121 bytes of CSS. While this demo is great for simple text-based menu dropdowns, it doesn’t show just how complex (in a good way) you can make CSS-only menus. So, let’s do just that.</p> + +<h2 id="what-we-want-to-emulate">What we want to emulate</h2> + +<p>I think, like most designers, that the UI and web design work from the <a href="https://stripe.com/">Stripe</a> team is pretty fantastic. Their clean approach using subtle animations and minimal elements make for a pleasant experience. Unfortunately, there is one problem with their current dropdown menus on their main website:</p> + +<p>They don’t work if JavaScript is disabled.</p> + +<p>But we can easily fix that. So enough chit-chat, let’s rip-off their menu design and recreate it with only CSS!</p> + +<h3 id="original-stripe-website">Original (<a href="https://stripe.com">Stripe Website</a>)</h3> + +<h3 id="our-recreation-codepen-demo">Our recreation (<a href="https://codepen.io/bradleytaunt/full/ExjMjLL">CodePen Demo</a>)</h3> + +<p>Although our redesign is far from an exact replica (some subtle animations are missing which could always be added) - it’s still impressive what you can do with some bare-bones CSS. Just something to keep in mind the next time you decide to reach for a JavaScript library to implement a similar design.</p> + +<h2 id="see-it-live-in-action">See it live in action</h2> + +<p>Load in the CodePen below and play around with the menu dropdown. Feel free to re-use, break. share or steal this for any and all purposes. Enjoy!</p> + <p><a href="https://codepen.io/bradleytaunt/pen/ExjMjLL">Live CodePen Example</a></p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/sublime/index.html b/build/sublime/index.html index 3869a42..4309e06 100644 --- a/build/sublime/index.html +++ b/build/sublime/index.html @@ -1,50 +1,72 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Launching Sublime Text with dmenu on Alpine Linux</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Launching Sublime Text with dmenu on Alpine Linux</h1> +<h1 id="launching-sublime-text-with-dmenu-on-alpine-linux">Launching Sublime Text with dmenu on Alpine Linux</h1> + <p>2023-04-13</p> -<p>Everyone seems to be running some version of VSCode as their main editor these days. But not me. I find VSCode to be too bloated for my needs - not to mention being built on top of electron instead of <em>native</em> code. I prefer running programs that don't try to devour all of my machine's available memory or spike my CPU.</p> -<blockquote><p><strong>Note</strong>: It's important to remember my personal machine is a ThinkPad X201 with only 6GB of RAM (plan to upgrade to 8GB soon!). Obviously your mileage may vary if you're using a beefier laptop or desktop...</p> + +<p>Everyone seems to be running some version of VSCode as their main editor these days. But not me. I find VSCode to be too bloated for my needs - not to mention being built on top of electron instead of <em>native</em> code. I prefer running programs that don’t try to devour all of my machine’s available memory or spike my CPU.</p> + +<blockquote> +<p><strong>Note</strong>: It’s important to remember my personal machine is a ThinkPad X201 with only 6GB of RAM (plan to upgrade to 8GB soon!). Obviously your mileage may vary if you’re using a beefier laptop or desktop…</p> </blockquote> -<p>In case the title of this post didn't make this obvious, my editor of choice is Sublime Text. It's fast, has a robust plugin ecosystem, and a very friendly community of users. Because of its popularity, troubleshooting any issues you might encounter becomes much easier with the amount of information freely available online.</p> -<p>The only minor downside is that it isn't <em>fully</em> open source. Personally, I think it is well worth buying a license directly from the developers to support their efforts.</p> -<p>If you haven't played around with it yet, I highly recommend giving it a try. At the very least, I guarantee you'll be impressed with the editor's performance and speed! [<a href="#1">#1</a>]</p> -<h2>One Small Problem...</h2> + +<p>In case the title of this post didn’t make this obvious, my editor of choice is Sublime Text. It’s fast, has a robust plugin ecosystem, and a very friendly community of users. Because of its popularity, troubleshooting any issues you might encounter becomes much easier with the amount of information freely available online.</p> + +<p>The only minor downside is that it isn’t <em>fully</em> open source. Personally, I think it is well worth buying a license directly from the developers to support their efforts.</p> + +<p>If you haven’t played around with it yet, I highly recommend giving it a try. At the very least, I guarantee you’ll be impressed with the editor’s performance and speed! [<#1>]</p> + +<h2 id="one-small-problem">One Small Problem…</h2> + <p>Sublime is precompiled against glibc and Alpine uses musl. This makes things a little difficult. Luckily we can get around this roadblock by falling back on flatpak (which is unfortunately still locked at version 3 for Sublime).</p> -<p>You'll need to install flatpak, give your current user permission to install flatpak apps, and then install Sublime.</p> + +<p>You’ll need to install flatpak, give your current user permission to install flatpak apps, and then install Sublime.</p> + <p>(The following snippets assume you are using <code>doas</code>. If you are using <code>sudo</code>, be sure to swap accordingly)</p> + <pre><code>apk add flatpak -adduser <YourUsername> flatpak -flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo +adduser <YourUsername> flatpak +flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo </code></pre> + <p>Congrats. You now have setup <code>flatpak</code> on your machine! Next we install Sublime Text:</p> + <pre><code>flatpak install flathub com.sublimetext.three </code></pre> + <p>You could stop now and simply open Sublime anytime by running the following command in your terminal:</p> + <pre><code>flatpak run com.sublimetext.three </code></pre> -<p>This works perfectly fine but I find it a little cumbersome. I would much rather open my programs directly through dmenu. Let's set that up.</p> -<h2>Creating System Links</h2> -<pre><code>doas ln -s ~/.local/share/flatpak/exports/bin/com.sublimetext.three /usr/bin/sublimetext + +<p>This works perfectly fine but I find it a little cumbersome. I would much rather open my programs directly through dmenu. Let’s set that up.</p> + +<h2 id="creating-system-links">Creating System Links</h2> + +<pre><code>doas ln -s ~/.local/share/flatpak/exports/bin/com.sublimetext.three /usr/bin/sublimetext </code></pre> + <p>Now that those directories are linked, simply open dmenu and start typing <code>sublimetext</code>. Done and done. No more terminal commands needed to open Sublime!</p> -<hr /> -<p><small> -1. <span id="1">I am aware that using a terminal-based editor such as vim or emacs would be even *more* efficient. For my own personal use I find more classical "IDE" applications to work best for me.</span> -</small></p> + +<hr/> + +<p>1. I am aware that using a terminal-based editor such as vim or emacs would be even <em>more</em> efficient. For my own personal use I find more classical “IDE” applications to work best for me. +</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/suckless/index.html b/build/suckless/index.html index be5d1b7..9a95c2b 100644 --- a/build/suckless/index.html +++ b/build/suckless/index.html @@ -1,64 +1,98 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>I Want to Suckless and You Can Too</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>I Want to Suckless and You Can Too</h1> +<h1 id="i-want-to-suckless-and-you-can-too">I Want to Suckless and You Can Too</h1> + <p>2022-12-23</p> -<h2>The Desire to Suckless</h2> -<p>While I have been happy with my <a href="/alpine">previous desktop setup</a> using Wayland on Alpine Linux, I just couldn't shake the urge to fully embrace the <a href="https://suckless.org">suckless ecosystem</a>. Although, this meant ditching Wayland and returning to X11, which is apparently the new "cool thing to hate" in Linux land. At least, that's what I've seen online lately.</p> -<p>But I'm getting ahead of myself...</p> -<h2>What is Suckless?</h2> -<p>I'm not going to spend too much time repeating what you can <a href="https://suckless.org/philosophy/">already read on the suckless.org website itself</a>, but in a nutshell:</p> -<blockquote><p>Software with a focus on simplicity, clarity, and frugality.</p> + +<h2 id="the-desire-to-suckless">The Desire to Suckless</h2> + +<p>While I have been happy with my <a href="/alpine">previous desktop setup</a> using Wayland on Alpine Linux, I just couldn’t shake the urge to fully embrace the <a href="https://suckless.org">suckless ecosystem</a>. Although, this meant ditching Wayland and returning to X11, which is apparently the new “cool thing to hate” in Linux land. At least, that’s what I’ve seen online lately.</p> + +<p>But I’m getting ahead of myself…</p> + +<h2 id="what-is-suckless">What is Suckless?</h2> + +<p>I’m not going to spend too much time repeating what you can <a href="https://suckless.org/philosophy/">already read on the suckless.org website itself</a>, but in a nutshell:</p> + +<blockquote> +<p>Software with a focus on simplicity, clarity, and frugality.</p> </blockquote> + <p>The developers also pride themselves on catering to <em>advanced and experienced computer users</em>, which is actually a refreshing take in my opinion. There are enough pre-existing open source solutions for non-technical or average Linux users looking for a desktop system. Having an option that requires users to deep-dive into the code, compile the programs manually, and better understand the software they are running is a welcome addition.</p> -<p>This process of "owing your software" was one of the core concepts that initially grabbed my attention. I've always been mildly mediocre at reading and writing C (ie. enough to be dangerous), so the thought of jumping head first into a system that would require me to better learn that language was tempting[^1]. And that temptation was enough to give it a shot!</p> -<h2>Let's Get Started</h2> -<p>So I made my decision. I would (at the very least) <em>try</em> switching my daily driver over to a completely "suckless" system. But I was immediately faced with my first obstacle: <em>which distro should I use</em>?</p> -<p>I'm sure many would suggest Gentoo, since it follows the principles of suckless more than any other distribution on the market. But I don't hate myself enough to go down that insane rabbit-hole. I'm hardly advanced enough to take on such a steep challenge, not to mention my plan was to build out a "setup script" so others could roll their own suckless build. Something like that looked daunting under Gentoo. Maybe in the future...</p> -<p>So what's left? Void? Arch? Something fresh, like Metis? I really didn't know the "best" choice. Maybe there were just <em>too many</em> options? </p> -<p>Luckily, I did know of a distro that was my go-to for most projects...</p> -<h2>Trying Alpine</h2> -<p>Alpine Linux is one of the best distributions available. If you disagree, you clearly haven't achieved galaxy-brain levels of intelligence and I feel sorry for you[^2].</p> -<p>Having just rolled my own <a href="https://git.sr.ht/~bt/alpine-linux-setup">installer script</a> for Wayland/Sway on Alpine, I figured why not piggyback off that existing project? Work smart not hard, right? So I started putting together an absolute <em>bare minimum</em> list of requirements I needed to get a proper desktop system running:</p> + +<p>This process of “owing your software” was one of the core concepts that initially grabbed my attention. I’ve always been mildly mediocre at reading and writing C (ie. enough to be dangerous), so the thought of jumping head first into a system that would require me to better learn that language was tempting[^1]. And that temptation was enough to give it a shot!</p> + +<h2 id="lets-get-started">Let’s Get Started</h2> + +<p>So I made my decision. I would (at the very least) <em>try</em> switching my daily driver over to a completely “suckless” system. But I was immediately faced with my first obstacle: <em>which distro should I use</em>?</p> + +<p>I’m sure many would suggest Gentoo, since it follows the principles of suckless more than any other distribution on the market. But I don’t hate myself enough to go down that insane rabbit-hole. I’m hardly advanced enough to take on such a steep challenge, not to mention my plan was to build out a “setup script” so others could roll their own suckless build. Something like that looked daunting under Gentoo. Maybe in the future…</p> + +<p>So what’s left? Void? Arch? Something fresh, like Metis? I really didn’t know the “best” choice. Maybe there were just <em>too many</em> options? </p> + +<p>Luckily, I did know of a distro that was my go-to for most projects…</p> + +<h2 id="trying-alpine">Trying Alpine</h2> + +<p>Alpine Linux is one of the best distributions available. If you disagree, you clearly haven’t achieved galaxy-brain levels of intelligence and I feel sorry for you[^2].</p> + +<p>Having just rolled my own <a href="https://git.sr.ht/~bt/alpine-linux-setup">installer script</a> for Wayland/Sway on Alpine, I figured why not piggyback off that existing project? Work smart not hard, right? So I started putting together an absolute <em>bare minimum</em> list of requirements I needed to get a proper desktop system running:</p> + <ul> -<li>working suspend/awake</li> +<li>working suspend/awake</li> <li>working audio</li> -<li>working wifi/networking</li> +<li>working wifi/networking</li> <li>reduced screen tearing (X11 gave me problems in the past with this)</li> </ul> -<p>As you can see, I have very low expectations. But there were issues....</p> + +<p>As you can see, I have very low expectations. But there were issues….</p> + <ol> <li>I could not build my blog locally (built via Jekyll) since the <code>sass-embedded</code> dependencies has not been built against musl-libc.</li> -<li>VSCodium would require the extra "bloat" of the flatpak manager (not to mention the spotty support some applications have through flatpak/snap).</li> -<li>The distro/system <em>feels</em> like it was better designed with Wayland in mind. Too often I felt like I was losing an uphill battle wrestling against Alpine.</li> +<li>VSCodium would require the extra “bloat” of the flatpak manager (not to mention the spotty support some applications have through flatpak/snap).</li> +<li>The distro/system <em>feels</em> like it was better designed with Wayland in mind. Too often I felt like I was losing an uphill battle wrestling against Alpine.</li> </ol> -<h2>Getting Sucked into the Void</h2> -<p>After mentioning my struggles on Mastodon, some <a href="https://fosstodon.org/@tdarb/109554576434981872">helpful friends suggested taking a look at Void</a>. I always knew of the project but never used it as a "daily driver". Since this was overall one <em>large</em> experiment, I figured I'd give it a shot.</p> -<p>I'm glad I did. Void Linux is <em>pretty great</em>.</p> -<p>The installer seemed more complex than Alpine at first, but I found an excellent walkthrough <a href="https://linuxiac.com/void-linux-installation/">here</a> (which I was more beginner-friendly than the official docs). Once everything was set, it was time to run my suckless "installer".</p> -<h2>Introducing void-suck</h2> -<p>If you don't care about the nitty-gritty details, feel free to just jump over to the <a href="https://git.sr.ht/~bt/void-suck">void-suck repo on scourehut</a> and read through the code yourself. There is nothing groundbreaking here. A huge inspiration came from <a href="https://github.com/mad-ara/void-rice">mad-ara's "void-rice" project on Github</a> - so a big thanks to him for making that project in the first place!</p> + +<h2 id="getting-sucked-into-the-void">Getting Sucked into the Void</h2> + +<p>After mentioning my struggles on Mastodon, some <a href="https://fosstodon.org/@tdarb/109554576434981872">helpful friends suggested taking a look at Void</a>. I always knew of the project but never used it as a “daily driver”. Since this was overall one <em>large</em> experiment, I figured I’d give it a shot.</p> + +<p>I’m glad I did. Void Linux is <em>pretty great</em>.</p> + +<p>The installer seemed more complex than Alpine at first, but I found an excellent walkthrough <a href="https://linuxiac.com/void-linux-installation/">here</a> (which I was more beginner-friendly than the official docs). Once everything was set, it was time to run my suckless “installer”.</p> + +<h2 id="introducing-void-suck">Introducing void-suck</h2> + +<p>If you don’t care about the nitty-gritty details, feel free to just jump over to the <a href="https://git.sr.ht/~bt/void-suck">void-suck repo on scourehut</a> and read through the code yourself. There is nothing groundbreaking here. A huge inspiration came from <a href="https://github.com/mad-ara/void-rice">mad-ara’s “void-rice” project on Github</a> - so a big thanks to him for making that project in the first place!</p> + <p>You can find the basic instructions in the README of the project itself, but it pulls in just the required dependencies along with my own custom suckless tools. You can easily swap out these with your own or simply default to the standard ones provided by <a href="https://suckless.org">suckless.org</a>.</p> -<p>Everything <em>should</em> work out of the box, but in case it doesn't please <a href="https://todo.sr.ht/~bt/void-suck">open a ticket</a> or <a href="https://lists.sr.ht/~bt/void-suck">submit a patch</a>. I'm certain I overlooked some items!</p> -<h2>Closing Thoughts</h2> -<p>We'll see how things go. So far I'm enjoying my time with a much simpler desktop and the "forced" push towards getting better with C is an added bonus. I still love Alpine, but Void is slowly winning me over...</p> -<h2>Refs</h2> + +<p>Everything <em>should</em> work out of the box, but in case it doesn’t please <a href="https://todo.sr.ht/~bt/void-suck">open a ticket</a> or <a href="https://lists.sr.ht/~bt/void-suck">submit a patch</a>. I’m certain I overlooked some items!</p> + +<h2 id="closing-thoughts">Closing Thoughts</h2> + +<p>We’ll see how things go. So far I’m enjoying my time with a much simpler desktop and the “forced” push towards getting better with C is an added bonus. I still love Alpine, but Void is slowly winning me over…</p> + +<h2 id="refs">Refs</h2> + <ol> <li>I find this to be the best way to learn new things. Reading technical books are helpful, but concepts never stick with me unless I am forced to implement them.</li> -<li>This is a joke. Alpine is certainly not for everyone. There are many more "fully featured" distros available and everyone should use what they enjoy! Try not to take my blog posts so seriously...</li> +<li>This is a joke. Alpine is certainly not for everyone. There are many more “fully featured” distros available and everyone should use what they enjoy! Try not to take my blog posts so seriously…</li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/super-mario-blocks-css/index.html b/build/super-mario-blocks-css/index.html index 2f51051..9215eac 100644 --- a/build/super-mario-blocks-css/index.html +++ b/build/super-mario-blocks-css/index.html @@ -1,113 +1,131 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Super Mario Blocks in CSS</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Super Mario Blocks in CSS</h1> +<h1 id="super-mario-blocks-in-css">Super Mario Blocks in CSS</h1> + <p>2019-02-15</p> -<p>Just because we can, let's make a quick demo on how to build interactive elements based off the original Mario punch blocks.</p> + +<p>Just because we can, let’s make a quick demo on how to build interactive elements based off the original Mario punch blocks.</p> + <p>What our final product will look like:</p> + <p><img src="/public/images/mario-block.png" alt="Mario blocks cretaed with CSS" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/JjEPOVe">Live CodePen Example</a></p> -<h2>The HTML</h2> -<p>The set of Mario blocks doesn't require a huge amount of effort for it's <code>html</code> structure, we only need:</p> + +<h2 id="the-html">The HTML</h2> + +<p>The set of Mario blocks doesn’t require a huge amount of effort for it’s <code>html</code> structure, we only need:</p> + <ul> <li>Parent div for each block</li> <li>Checkbox input</li> <li>Checkbox label</li> -<li>Inner label divs to represent the block "dots"</li> +<li>Inner label divs to represent the block “dots”</li> </ul> + <p><strong>Sidenote</strong>: This is only how <em>I</em> chose to add the inner dots to the Mario blocks. There are many other ways to create these, so please feel free to implement them however you see fit.</p> -<pre><code><!-- Main parent block --> -<div class="mario-block"> - - <!-- Checkbox input (disabled by default) --> - <input type="checkbox" id="1" disabled> - - <!-- Checkbox label --> - <label for="1"> - <!-- Inner dots for blocks --> - <div class="dot"></div> - <div class="dot"></div> - <div class="dot"></div> - <div class="dot"></div> - </label> - -</div> + +<pre><code><!-- Main parent block --> +<div class="mario-block"> + + <!-- Checkbox input (disabled by default) --> + <input type="checkbox" id="1" disabled> + + <!-- Checkbox label --> + <label for="1"> + <!-- Inner dots for blocks --> + <div class="dot"></div> + <div class="dot"></div> + <div class="dot"></div> + <div class="dot"></div> + </label> + +</div> </code></pre> + <p>Now we just add as many default blocks we want, along with the interactive punch block (<code>.mario-block--question</code>):</p> -<pre><code><div class="mario-block"> - <input type="checkbox" id="1" disabled> - <label for="1"> - <div class="dot"></div> - <div class="dot"></div> - <div class="dot"></div> - <div class="dot"></div> - </label> -</div> - -<div class="mario-block"> - <input type="checkbox" id="2" disabled> - <label for="2"> - <div class="dot"></div> - <div class="dot"></div> - <div class="dot"></div> - <div class="dot"></div> - </label> -</div> - -<div class="mario-block mario-block--question"> - <input type="checkbox" id="3"> - <label for="3"> - <div class="dot"></div> - <div class="dot"></div> - <div class="dot"></div> - <div class="dot"></div> - <div class="question-mark"></div> - </label> -</div> - -<div class="mario-block"> - <input type="checkbox" id="4" disabled> - <label for="4"> - <div class="dot"></div> - <div class="dot"></div> - <div class="dot"></div> - <div class="dot"></div> - </label> -</div> + +<pre><code><div class="mario-block"> + <input type="checkbox" id="1" disabled> + <label for="1"> + <div class="dot"></div> + <div class="dot"></div> + <div class="dot"></div> + <div class="dot"></div> + </label> +</div> + +<div class="mario-block"> + <input type="checkbox" id="2" disabled> + <label for="2"> + <div class="dot"></div> + <div class="dot"></div> + <div class="dot"></div> + <div class="dot"></div> + </label> +</div> + +<div class="mario-block mario-block--question"> + <input type="checkbox" id="3"> + <label for="3"> + <div class="dot"></div> + <div class="dot"></div> + <div class="dot"></div> + <div class="dot"></div> + <div class="question-mark"></div> + </label> +</div> + +<div class="mario-block"> + <input type="checkbox" id="4" disabled> + <label for="4"> + <div class="dot"></div> + <div class="dot"></div> + <div class="dot"></div> + <div class="dot"></div> + </label> +</div> </code></pre> -<h2>The CSS</h2> -<p>First we need to remove the default <code>checkbox</code> input styling and place all new styling on it's corresponding <code>label</code>.</p> -<pre><code>/* Mario block parent div */ + +<h2 id="the-css">The CSS</h2> + +<p>First we need to remove the default <code>checkbox</code> input styling and place all new styling on it’s corresponding <code>label</code>.</p> + +<pre><code>/* Mario block parent div */ .mario-block { display: inline-block; height: 80px; - margin-right: -7px; /* Fixes inline-block margin bug */ + margin-right: -7px; /* Fixes inline-block margin bug */ position: relative; width: 80px; } -/* Hide default checkbox input */ +/* Hide default checkbox input */ .mario-block input { position: absolute; visibility: hidden; z-index: -1; } </code></pre> + <p>Now to target the <code>label</code> elements found inside the block:</p> -<pre><code>/* Style checkbox label accordingly */ + +<pre><code>/* Style checkbox label accordingly */ .mario-block label { background: #F88D2E; border: 4px solid #070000; @@ -118,7 +136,9 @@ width: 100%; } </code></pre> + <p>Next we style our included <code>.dots</code> elements to be placed in the four corners of each block:</p> + <pre><code>.mario-block .dot { background: #070000; height: 5px; @@ -142,13 +162,16 @@ right: 4px; } </code></pre> -<h3>Punch-able block</h3> -<p>Now we need to include the "question mark" SVG and custom CSS for the interactive Mario block. You can <a href="/public/images/mario-block-question-mark.svg">download a copy</a> of the custom <code>svg</code> question mark I created.</p> + +<h3 id="punch-able-block">Punch-able block</h3> + +<p>Now we need to include the “question mark” SVG and custom CSS for the interactive Mario block. You can download a copy of the custom <code>svg</code> question mark I created.</p> + <pre><code>.mario-block--question label { cursor: pointer; } .mario-block--question .question-mark { - background-image: url('/public/images/mario-block-question-mark.svg'); + background-image: url('/public/images/mario-block-question-mark.svg'); background-position: center; background-repeat: no-repeat; background-size: 40px; @@ -160,31 +183,34 @@ z-index: 1; } </code></pre> -<h3>The last piece</h3> + +<h3 id="the-last-piece">The last piece</h3> + <p>The last item we need to design is the <code>checked</code> state of the interactive question mark block. The extra inner dark dashes will be added as <code>pseudo</code> elements:</p> -<pre><code>/* Mario block in `checked` state */ + +<pre><code>/* Mario block in `checked` state */ .mario-block input:checked + label { background: #885818; box-shadow: inset -4px -4px 0 #68400B, inset 4px 4px 0 #FAB89B; } -/* Hide both the default dots and question mark svg on checked */ +/* Hide both the default dots and question mark svg on checked */ .mario-block input:checked + label .dot, .mario-block input:checked + label .question-mark { display: none; } -/* Shared pseudo element styling */ +/* Shared pseudo element styling */ .mario-block input:checked + label:before, .mario-block input:checked + label:after { - content: ''; + content: ''; height: 20px; position: absolute; transform: rotate(45deg); width: 20px; } -/* Right dash */ +/* Right dash */ .mario-block input:checked + label:before { border-right: 4px solid #070000; right: 18px; @@ -192,7 +218,7 @@ transform: rotate(45deg); } -/* Left dash */ +/* Left dash */ .mario-block input:checked + label:after { border-left: 4px solid #070000; left: 18px; @@ -200,9 +226,12 @@ transform: rotate(-45deg); } </code></pre> -<p>That's it!</p> -<h2>Taking it further</h2> -<p>As always, you can take this concept and flesh it out even further. I was trying to mimic the "pixel" style of the original Mario games, but you could make the lighting and depth more realistic with some extra subtle gradients or <code>filter</code> properties.</p> + +<p>That’s it!</p> + +<h2 id="taking-it-further">Taking it further</h2> + +<p>As always, you can take this concept and flesh it out even further. I was trying to mimic the “pixel” style of the original Mario games, but you could make the lighting and depth more realistic with some extra subtle gradients or <code>filter</code> properties.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/tabbed-content/index.html b/build/tabbed-content/index.html index 295a712..cfabe83 100644 --- a/build/tabbed-content/index.html +++ b/build/tabbed-content/index.html @@ -1,102 +1,94 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Tabbed Content Without JavaScript</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Tabbed Content Without JavaScript</h1> +<h1 id="tabbed-content-without-javascript">Tabbed Content Without JavaScript</h1> + <p>2019-01-28</p> + <p>Creating tabs is a fairly trivial and common practice in web design, but many times it requires JavaScript to properly implement. Fortunately it <em>is</em> possible to create tabbed content with only using CSS.</p> + <p><img src="/public/images/tabbed-content.png" alt="Tabbed elements with only CSS" /></p> + <p><a href="https://codepen.io/bradleytaunt/pen/abjmayw">Live CodePen Example</a></p> -<hr /> -<p><div class="message"> -<p><strong>Sidenote:</strong></p> -<p>While this method is semantic and accessible, you might consider using a pre-existing plugin for tabbed data.</p> -<p>This component tends to feel a little "stiff" compared to more fleshed out variations available. This pure CSS version is better suited as a fallback for when users have disabled JavaScript.</p> -</div></p> -<h2>The HTML</h2> + +<hr/> + +<h2 id="the-html">The HTML</h2> + <p>The skeleton for this component is fairly basic - we just need the following structure:</p> + <ol> -<li>Parent element for each tab item</li> -<li>Default radio input</li> -<li>Label linked to corresponding input</li> -<li>Inner content associated with each tab item</li> +<li><p>Parent element for each tab item</p></li> +<li><p>Default radio input</p></li> +<li><p>Label linked to corresponding input</p></li> +<li><p>Inner content associated with each tab item</p></li> </ol> -<pre><code><!-- Simple main container for all elements --> -<div class="tabs"> - <!-- Parent container holding for individual tab item --> - <div class="tab-item"> +<p>Full HTML for reference:</p> - <!-- Default radio input --> - <input class="tab-input" type="radio" name="tabs" id="tab-1"> +<pre><code><div class="tabs"> - <!-- Label connected to radio input via `id` and `for` attributes --> - <label class="tab-label" for="tab-1">Tab 1</label> + <div class="tab-item"> + <input class="tab-input" type="radio" name="tabs" id="tab-1"> + <label class="tab-label" for="tab-1">Tab 1</label> + <div class="tab-content">Content goes here</div> + </div> - <!-- Full inner content of current tab item --> - <div class="tab-content">Content goes here</div> + <div class="tab-item"> + <input class="tab-input" type="radio" name="tabs" id="tab-2"> + <label class="tab-label" for="tab-2">Tab 2</label> + <div class="tab-content">Content goes here</div> + </div> - </div> + <div class="tab-item"> + <input class="tab-input" type="radio" name="tabs" id="tab-3"> + <label class="tab-label" for="tab-3">Tab 3</label> + <div class="tab-content">Content goes here</div> + </div> -</div> -</code></pre> -<p>Full HTML for reference:</p> -<pre><code><div class="tabs"> - - <div class="tab-item"> - <input class="tab-input" type="radio" name="tabs" id="tab-1"> - <label class="tab-label" for="tab-1">Tab 1</label> - <div class="tab-content">Content goes here</div> - </div> - - <div class="tab-item"> - <input class="tab-input" type="radio" name="tabs" id="tab-2"> - <label class="tab-label" for="tab-2">Tab 2</label> - <div class="tab-content">Content goes here</div> - </div> - - <div class="tab-item"> - <input class="tab-input" type="radio" name="tabs" id="tab-3"> - <label class="tab-label" for="tab-3">Tab 3</label> - <div class="tab-content">Content goes here</div> - </div> - -</div> +</div> </code></pre> -<h2>The CSS</h2> + +<h2 id="the-css">The CSS</h2> + <p>First, we need to set each <code>input</code>, <code>label</code> and inner content into their own parent containers:</p> -<pre><code>/* Main parent that holds all contents */ + +<pre><code>/* Main parent that holds all contents */ .tabs { height: 100%; min-height: 250px; position: relative; } -/* Each tab items (includes heading & content) */ +/* Each tab items (includes heading & content) */ .tab-item { display: inline; } </code></pre> + <p>Next, we will hide the default <code>radio</code> input and design our labels to resemble a basic web tab element. The <code>z-index</code> property on the label is important for how we will be stacking our content on the z-axis (labels above inner content for example).</p> -<pre><code>/* Hide the default radio inputs */ + +<pre><code>/* Hide the default radio inputs */ .tab-input { position: absolute; visibility: hidden; } -/* The main tab headings */ +/* The main tab headings */ .tab-label { background: white; box-shadow: inset 0 -4px 4px rgba(0,0,0,0.02); @@ -111,8 +103,10 @@ z-index: 0; } </code></pre> -<p>The main inner content of each tab needs to have an <code>absolute</code> position set as it's default, since the one currently selected will switch to <code>relative</code> on mobile (more on that in a moment):</p> -<pre><code>/* The inner tab content */ + +<p>The main inner content of each tab needs to have an <code>absolute</code> position set as it’s default, since the one currently selected will switch to <code>relative</code> on mobile (more on that in a moment):</p> + +<pre><code>/* The inner tab content */ .tab-content { background: white; bottom: 0; @@ -126,8 +120,10 @@ z-index: 0; } </code></pre> + <p>The final step is just telling the browser to style both the <code>label</code> and inner content of the currently selected radio <code>input</code>:</p> -<pre><code>/* Style the currently selected tab label */ + +<pre><code>/* Style the currently selected tab label */ .tab-input:checked + .tab-label { border: 1px solid #eee; border-bottom: 0; @@ -136,32 +132,34 @@ z-index: 2; } -/* Show the currently selected tab content */ +/* Show the currently selected tab content */ .tab-input:checked ~ .tab-content { border: 1px solid #eee; z-index: 1; } </code></pre> -<p>It's as simple as that! For reference, here is the entire CSS file for easier access:</p> -<pre><code>/* Main parent that holds all contents */ + +<p>It’s as simple as that! For reference, here is the entire CSS file for easier access:</p> + +<pre><code>/* Main parent that holds all contents */ .tabs { height: 100%; min-height: 250px; position: relative; } -/* Each tab items (includes heading & content) */ +/* Each tab items (includes heading & content) */ .tab-item { display: inline; } -/* Hide the default radio inputs */ +/* Hide the default radio inputs */ .tab-input { position: absolute; visibility: hidden; } -/* The main tab headings */ +/* The main tab headings */ .tab-label { background: white; box-shadow: inset 0 -4px 4px rgba(0,0,0,0.02); @@ -176,7 +174,7 @@ z-index: 0; } -/* The inner tab content */ +/* The inner tab content */ .tab-content { background: white; bottom: 0; @@ -190,7 +188,7 @@ z-index: 0; } -/* Style the currently selected tab label */ +/* Style the currently selected tab label */ .tab-input:checked + .tab-label { border: 1px solid #eee; border-bottom: 0; @@ -199,14 +197,17 @@ z-index: 2; } -/* Show the currently selected tab content */ +/* Show the currently selected tab content */ .tab-input:checked ~ .tab-content { border: 1px solid #eee; z-index: 1; } </code></pre> -<h2>Don't forget about mobile</h2> + +<h2 id="dont-forget-about-mobile">Don’t forget about mobile</h2> + <p>With only a few extra lines of CSS we can ensure that our custom tabs will stack on top of each other and look solid on mobile devices:</p> + <pre><code>@media(max-width:38em) { .tab-label { display: block; @@ -223,9 +224,13 @@ } } </code></pre> -<h2>One minor caveat</h2> -<p>Even though I'm a pretty big fan of implementing tabs this way, there is a small drawback:</p> -<p>The <code>height</code> of the inner content doesn't grow dynamically since it defaults as <code>absolute</code>, so a <code>min-height</code> or <code>height</code> value is required on the parent element. This could become a problem in certain situations where you don't have the luxury of setting a static height.</p> + +<h2 id="one-minor-caveat">One minor caveat</h2> + +<p>Even though I’m a pretty big fan of implementing tabs this way, there is a small drawback:</p> + +<p>The <code>height</code> of the inner content doesn’t grow dynamically since it defaults as <code>absolute</code>, so a <code>min-height</code> or <code>height</code> value is required on the parent element. This could become a problem in certain situations where you don’t have the luxury of setting a static height.</p> + <p>Other than that, enjoy building some JavaScript-free tabs!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/tables/index.html b/build/tables/index.html index 82109e9..224fd6b 100644 --- a/build/tables/index.html +++ b/build/tables/index.html @@ -1,42 +1,54 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Making Tables Responsive With Minimal CSS</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Making Tables Responsive With Minimal CSS</h1> +<h1 id="making-tables-responsive-with-minimal-css">Making Tables Responsive With Minimal CSS</h1> + <p>2019-06-11</p> -<p><div class="update-box"> - <strong>Update (Oct 2019):</strong> <a href="https://twitter.com/aardrian">@aardrian</a> wrote a previous post about how changing the <code>display</code> properties on tables can impact screen readers. I highly recommend his excellent article <a href="https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html">Tables, CSS Display Properties, and ARIA</a> -</div></p> -<hr /> -<p>I find that the need to create responsive table layouts pops up far more often than most developers would expect. The gut reaction might to be implement some sort of custom grid-system or pull in a pre-built library. Don't do this - just use tables and some simple CSS.</p> -<p>My recent article, <a href="/html-like-1999">Write HTML Like It's 1999</a>, received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how <code>table</code> elements don't play nice with mobile devices or that it's not possible to have a useable layout on smaller screens. <em>This simply isn't true</em>.</p> + +<hr/> + +<p>I find that the need to create responsive table layouts pops up far more often than most developers would expect. The gut reaction might to be implement some sort of custom grid-system or pull in a pre-built library. Don’t do this - just use tables and some simple CSS.</p> + +<p>My recent article, <a href="/html-like-1999">Write HTML Like It’s 1999</a>, received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how <code>table</code> elements don’t play nice with mobile devices or that it’s not possible to have a useable layout on smaller screens. <em>This simply isn’t true</em>.</p> + <p>Included below are two separate demos showing how to optimize <code>table</code> HTML for mobile devices using only a minimal amount of CSS. These implementations may not be perfect, but they are far superior to injecting a bunch of custom <code>div</code> elements to <em>look</em> like tables.</p> -<h2>Demo 1: Just let them scroll</h2> -<p>Okay I will admit, this implementation isn't the <em>greatest</em> but I find it does work well with huge datasets. Simply set a <code>min-width</code> on your parent <code>table</code> element and the browser will just require the user to scroll the contents horizontally.</p> + +<h2 id="demo-1-just-let-them-scroll">Demo 1: Just let them scroll</h2> + +<p>Okay I will admit, this implementation isn’t the <em>greatest</em> but I find it does work well with huge datasets. Simply set a <code>min-width</code> on your parent <code>table</code> element and the browser will just require the user to scroll the contents horizontally.</p> + <pre><code>table { - min-width: 800px; /* Set your desired min-width here */ + min-width: 800px; /* Set your desired min-width here */ } </code></pre> + <p>Check out the CodePen below to see it in action:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/ewObbW/">Live CodePen Example</a></p> -<p>I actually prefer this method because of its simplicity and function. Users on mobile are familiar with scrolling since it is one of the most basic actions required. Seeing a "cut-off" table gives them an instant visual cue that they have the ability to scroll the content.</p> -<h2>Demo 2: More <u>flex</u>ible than you think</h2> + +<p>I actually prefer this method because of its simplicity and function. Users on mobile are familiar with scrolling since it is one of the most basic actions required. Seeing a “cut-off” table gives them an instant visual cue that they have the ability to scroll the content.</p> + +<h2 id="demo-2-more-flexible-than-you-think">Demo 2: More flexible than you think</h2> + <p>Using something like <code>flexbox</code> tends to work better when you are working with smaller table datasets. All you need to do is add some minor <code>flexbox</code> layout at your targeted mobile screen size.</p> -<pre><code>/* Using 800px as mobile screen in this example */ + +<pre><code>/* Using 800px as mobile screen in this example */ @media(max-width: 800px) { - /* Hide the table headings */ + /* Hide the table headings */ table thead { left: -9999px; position: absolute; @@ -51,19 +63,24 @@ } table td { border: 1px solid; - margin: 0 -1px -1px 0; /* Removes double-borders */ + margin: 0 -1px -1px 0; /* Removes double-borders */ width: 50%; } } </code></pre> + <p><a href="https://codepen.io/bradleytaunt/pen/mZbvOb/">Check out the CodePen demo</a></p> + <p>There are some caveats with this approach:</p> + <ol> <li>We currently hide the <code>thead</code> row when in mobile view (only visually - screen readers can still scan it)</li> <li>Some more custom work might be needed depending on how many items per <code>flexbox</code> row makes sense (based on project and dataset)</li> </ol> + <p>You could keep the table headings and style them the same as the <code>tbody</code> contents, but I find hiding them a little cleaner. That choice is entirely up to your personal preference. You can also decide to add heading <code>span</code> elements inside the main <code>tbody</code> elements like so:</p> -<pre><code>/* Default span styling - hidden on desktop */ + +<pre><code>/* Default span styling - hidden on desktop */ table td span { background: #eee; color: dimgrey; @@ -77,7 +94,7 @@ table td span { left: 0; } -/* Simple CSS for flexbox table on mobile */ +/* Simple CSS for flexbox table on mobile */ @media(max-width: 800px) { table thead { left: -9999px; @@ -94,23 +111,30 @@ table td span { table td { border: 1px solid; margin: 0 -1px -1px 0; - padding-top: 35px; /* additional padding to avoid heading overlap */ + padding-top: 35px; /* additional padding to avoid heading overlap */ position: relative; width: 50%; } - /* Show the heading span */ + /* Show the heading span */ table td span { display: block; } } </code></pre> + <p><a href="https://codepen.io/bradleytaunt/pen/mZdzmZ/">Live CodePen Example</a></p> + <p><strong>Updated</strong>: As pointed out by user <a href="https://news.ycombinator.com/user?id=mmoez">mmoez</a>, it is far less repetitive to use <code>:nth-child</code> pseudo selectors to implement the heading fields on mobile (as outlined in this <a href="https://css-tricks.com/responsive-data-tables/">CSS-Tricks article</a>).</p> -<h2>Why should I care to use <code>table</code> elements?</h2> + +<h2 id="why-should-i-care-to-use-elements">Why should I care to use <code>table</code> elements?</h2> + <p>Simply put: <strong>accessibility</strong> and <strong>proper semantics</strong>.</p> -<p>Why use a screwdriver when you need a hammer? Sure, you can make that screwdriver look and <em>almost</em> work the same as a hammer, but for what purpose? Just use the damn hammer<sup>1</sup>.</p> + +<p>Why use a screwdriver when you need a hammer? Sure, you can make that screwdriver look and <em>almost</em> work the same as a hammer, but for what purpose? Just use the damn hammer1.</p> + <p>Have fun making your tables responsive!</p> -<p><small><sup>1</sup> I know, this is a terrible analogy...</small></p> + +<p>1 I know, this is a terrible analogy…</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/te/index.html b/build/te/index.html index 36c2232..7fa2959 100644 --- a/build/te/index.html +++ b/build/te/index.html @@ -1,32 +1,40 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>The Wonders of Text Ellipsis</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>The Wonders of Text Ellipsis</h1> +<h1 id="the-wonders-of-text-ellipsis">The Wonders of Text Ellipsis</h1> + <p>2016-11-15</p> -<p>A common issue when working with constrained UI elements is text overflowing outside of it's parent or breaking into addition lines (thus breaking the layout).</p> -<p>This is most commonly seen with the direct and placeholder values for input fields on form elements. For example, the following input placeholder will be cutoff from the user's view:</p> + +<p>A common issue when working with constrained UI elements is text overflowing outside of it’s parent or breaking into addition lines (thus breaking the layout).</p> + +<p>This is most commonly seen with the direct and placeholder values for input fields on form elements. For example, the following input placeholder will be cutoff from the user’s view:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/OgpzyY/">CodePen live example</a></p> + <p>Luckily, 3 simple CSS parameters can fix this.</p> + <pre><code>input::placeholder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </code></pre> -<p>This allows the user to understand there is more content cut out from their current view. It's not ideal to ever have content overflowing outside of the parent container, but if you need to the best workaround is to use text-overflow.</p> + +<p>This allows the user to understand there is more content cut out from their current view. It’s not ideal to ever have content overflowing outside of the parent container, but if you need to the best workaround is to use text-overflow.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/text-align-justify/index.html b/build/text-align-justify/index.html index cc69ec8..ab7c747 100644 --- a/build/text-align-justify/index.html +++ b/build/text-align-justify/index.html @@ -1,34 +1,42 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Text Align: Justify</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Text Align: Justify</h1> +<h1 id="text-align-justify">Text Align: Justify</h1> + <p>2019-05-22</p> + <p>The text-align property is fairly well known in the world of CSS, even among those just starting out with the language. Values such as <code>center</code>, <code>left</code> and <code>right</code> are used often with this property, but a more forgotten option is <code>justify</code>.</p> -<h2>What does justify do?</h2> + +<h2 id="what-does-justify-do">What does justify do?</h2> + <p>The MDN web docs define the <code>justify</code> value for <code>text-align</code> as such:</p> -<p><blockquote> - <p>The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</p> - <cite><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align">MDN web docs</a></cite> -</blockquote></p> -<h3>See it in action</h3> + +<h3 id="see-it-in-action">See it in action</h3> + <p><a href="https://codepen.io/bradleytaunt/pen/vwpmNz/">Live CodePen Example</a></p> -<h2>When should I use this?</h2> -<p>It isn't always appropriate to use <code>justify</code> in most instances, although it becomes very useful for long form articles or blog posts. Since it takes a heavy influence from original <em>print</em> book layouts, the <code>justify</code> value helps improve readability for larger chunks of content.</p> -<p><strong>Fair warning</strong>: it is best to remove any <code>justify</code> values when targeting smaller screen sizes. Mobile devices and/or tablets tend to be small enough to break up the content already. This CSS value is better suited for larger viewports.</p> -<h2>Browser support</h2> + +<h2 id="when-should-i-use-this">When should I use this?</h2> + +<p>It isn’t always appropriate to use <code>justify</code> in most instances, although it becomes very useful for long form articles or blog posts. Since it takes a heavy influence from original <em>print</em> book layouts, the <code>justify</code> value helps improve readability for larger chunks of content.</p> + +<p><strong>Fair warning</strong>: it is best to remove any <code>justify</code> values when targeting smaller screen sizes. Mobile devices and/or tablets tend to be small enough to break up the content already. This CSS value is better suited for larger viewports.</p> + +<h2 id="browser-support">Browser support</h2> + <p>The good news is that all major browsers support the <code>justify</code> value for the <code>text-align</code> CSS property. So have some worry-free fun with it!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/they-wont-wait/index.html b/build/they-wont-wait/index.html Binary files differindex a9afe93..674c0fc 100644 --- a/build/they-wont-wait/index.html +++ b/build/they-wont-wait/index.html diff --git a/build/use-text-not-icons/index.html b/build/use-text-not-icons/index.html index b7d90a5..c443cb9 100644 --- a/build/use-text-not-icons/index.html +++ b/build/use-text-not-icons/index.html @@ -1,50 +1,78 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Icons Should be Complementary - Text is Always Better</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Icons Should be Complementary - Text is Always Better</h1> +<h1 id="icons-should-be-complementary---text-is-always-better">Icons Should be Complementary - Text is Always Better</h1> + <p>2021-12-17</p> -<p>Designing[^1] software is a complex thing. A great deal of real-world testing and user feedback is needed to create the best solution to the problem you are trying to fix. Obvious requirements are to keep things simple, make it easy to understand by <em>looking</em> at it, and build it to be headache-resistant for future updates. All these things are easier said than done. This is the challenge of a designer's dat-to-day.</p> -<p>But with this term of "simplicity" modern designers tend to take this approach too much to heart. In my 12+ years involved in UI/UX software design, I have lost count how many initial iterations of interfaces suffer from the same "dumbing down" decision making:</p> + +<p>Designing[^1] software is a complex thing. A great deal of real-world testing and user feedback is needed to create the best solution to the problem you are trying to fix. Obvious requirements are to keep things simple, make it easy to understand by <em>looking</em> at it, and build it to be headache-resistant for future updates. All these things are easier said than done. This is the challenge of a designer’s dat-to-day.</p> + +<p>But with this term of “simplicity” modern designers tend to take this approach too much to heart. In my 12+ years involved in UI/UX software design, I have lost count how many initial iterations of interfaces suffer from the same “dumbing down” decision making:</p> + <p><strong>Using icons to represent an action or function without textual information</strong>.</p> + <p>If you decide to stop reading the rest of this article, at least take away this one important thing:</p> -<blockquote><p><em>Always try to use text to convey your designs</em></p> + +<blockquote> +<p><em>Always try to use text to convey your designs</em></p> </blockquote> + <p>After achieving this, you should start reiterating those designs to include iconography. Even then, not all UI instances will require you to do that. Designers will find this process difficult, which is why it is important to get <em>right</em>.</p> -<h2>Icons make an <em>ass</em> out of <em>u</em> and <em>me</em></h2> -<p>Icons make general assumptions about what the user may or may not understand. Leading with this in your designs will end <em>poorly for you</em>. Trust me - I've learned this through failed designs many times over. A certain visualization might be common knowledge to you, while differing greatly to someone else with a different set of experiences.</p> -<p>I've found the only thing you should ever <em>assume</em> is that the user knows nothing. Please note - I'm not referring to their intelligence but instead their software literacy.</p> -<p>Take a look at our now "famous" save icon used in almost every piece of software; the floppy disk. Do any software users below the legal drinking age even understand the initial reasoning for using this icon? In all honesty, it was a terrible icon decision even when first introduced. No "hard copy" of the save action is taking place, software creates this save in a digital space[^2]. Yet, it was adopted and people (ie. designers) went along with it.</p> + +<h2 id="icons-make-an-ass-out-of-u-and-me">Icons make an <em>ass</em> out of <em>u</em> and <em>me</em></h2> + +<p>Icons make general assumptions about what the user may or may not understand. Leading with this in your designs will end <em>poorly for you</em>. Trust me - I’ve learned this through failed designs many times over. A certain visualization might be common knowledge to you, while differing greatly to someone else with a different set of experiences.</p> + +<p>I’ve found the only thing you should ever <em>assume</em> is that the user knows nothing. Please note - I’m not referring to their intelligence but instead their software literacy.</p> + +<p>Take a look at our now “famous” save icon used in almost every piece of software; the floppy disk. Do any software users below the legal drinking age even understand the initial reasoning for using this icon? In all honesty, it was a terrible icon decision even when first introduced. No “hard copy” of the save action is taking place, software creates this save in a digital space[^2]. Yet, it was adopted and people (ie. designers) went along with it.</p> + <p><strong>Quality is not measured by mass appeal.</strong></p> -<p>The argument could be made "People learned to associate "Save" with a Floppy Disk icon..." and my response would be "But what alternatives were they given?"</p> -<p>Original software designers (and developers) held all the power in early UI decision making. General users didn't <em>know</em> any better. Things were new and fresh. Now our response is to shrug our collective shoulders and say, "That's how the save icon has to be now!"</p> -<p>Hogwash. Make it a button that says, <code>Save File</code>. I'm not kidding. Oh, it doesn't work with your current design? Then your initial design wasn't future-proof then, was it? I sound snarky here but many designers put up imaginary walls around their design systems, making them incredibly rigid and difficult to adapt.</p> -<p>Take the time to do even a small thought / wireframe experiment: redo the layout and flow of your application without using a single piece of iconography. If you can't achieve this with even limited success, something is wrong with the design.</p> -<h2>The hamburger menu is the 7th circle of Hell</h2> -<p>Normally, the inclusion of a hamburger menu is indicative of an overly complex application. Too many cooks and all that jazz. Enterprise applications don't get a pass here either, as they tend to be the worst culprits of pouring out everything on to the user as software vomit. Sweeping all this interaction under the hamburger "rug" does not make for a cleaner design.</p> -<p>New features are great, but stop dumping so much of it behind hidden, unintuitive sub-navigation. This design is such a "quick fix" and plagues far too many software apps[^3]. Both desktop computers and mobile devices allow users to <em>scroll</em>, let them.</p> -<p>I've discussed this in further detail here: <a href="https://bt.ht/hamburger-menu-alternative/">Using Hamburger Menus? Try Sausage Links</a></p> -<h2>But what of the "advanced" users?</h2> -<p>I understand applications will have advanced or "pro" users that have full knowledge of the product and wouldn't need things <em>spoon fed</em> to them. This is a more difficult problem that I myself haven't been able to solve without approaching each one on a case-by-case basis. Unfortunately, there is no "one size fits all" method to this. But, although solving for advanced users proves difficult doesn't mean we should dismiss the merits of avoiding icons as a crutch.</p> -<h2>Try for yourself</h2> -<p>As I stated above, try doing a quick design experiment by replacing all your existing iconography in your application with simple text. I assure you that at least you'll discover interesting design flaws in your system.</p> -<h2>Refs</h2> + +<p>The argument could be made “People learned to associate “Save” with a Floppy Disk icon…” and my response would be “But what alternatives were they given?”</p> + +<p>Original software designers (and developers) held all the power in early UI decision making. General users didn’t <em>know</em> any better. Things were new and fresh. Now our response is to shrug our collective shoulders and say, “That’s how the save icon has to be now!”</p> + +<p>Hogwash. Make it a button that says, <code>Save File</code>. I’m not kidding. Oh, it doesn’t work with your current design? Then your initial design wasn’t future-proof then, was it? I sound snarky here but many designers put up imaginary walls around their design systems, making them incredibly rigid and difficult to adapt.</p> + +<p>Take the time to do even a small thought / wireframe experiment: redo the layout and flow of your application without using a single piece of iconography. If you can’t achieve this with even limited success, something is wrong with the design.</p> + +<h2 id="the-hamburger-menu-is-the-7th-circle-of-hell">The hamburger menu is the 7th circle of Hell</h2> + +<p>Normally, the inclusion of a hamburger menu is indicative of an overly complex application. Too many cooks and all that jazz. Enterprise applications don’t get a pass here either, as they tend to be the worst culprits of pouring out everything on to the user as software vomit. Sweeping all this interaction under the hamburger “rug” does not make for a cleaner design.</p> + +<p>New features are great, but stop dumping so much of it behind hidden, unintuitive sub-navigation. This design is such a “quick fix” and plagues far too many software apps[^3]. Both desktop computers and mobile devices allow users to <em>scroll</em>, let them.</p> + +<p>I’ve discussed this in further detail here: <a href="https://bt.ht/hamburger-menu-alternative/">Using Hamburger Menus? Try Sausage Links</a></p> + +<h2 id="but-what-of-the-advanced-users">But what of the “advanced” users?</h2> + +<p>I understand applications will have advanced or “pro” users that have full knowledge of the product and wouldn’t need things <em>spoon fed</em> to them. This is a more difficult problem that I myself haven’t been able to solve without approaching each one on a case-by-case basis. Unfortunately, there is no “one size fits all” method to this. But, although solving for advanced users proves difficult doesn’t mean we should dismiss the merits of avoiding icons as a crutch.</p> + +<h2 id="try-for-yourself">Try for yourself</h2> + +<p>As I stated above, try doing a quick design experiment by replacing all your existing iconography in your application with simple text. I assure you that at least you’ll discover interesting design flaws in your system.</p> + +<h2 id="refs">Refs</h2> + <ol> -<li>By "design" I'm referring to visuals not programming or system engineering</li> +<li>By “design” I’m referring to visuals not programming or system engineering</li> <li>Early software programs did save to an external floppy disk. My point stands that many digital file storage applications copied this iconography blindly.</li> -<li>Not to mention how rampant it is on plain ol' regular websites. If you're hiding five menu items behind a hamburger menu for "mobile users", you're doing it wrong.</li> +<li>Not to mention how rampant it is on plain ol’ regular websites. If you’re hiding five menu items behind a hamburger menu for “mobile users”, you’re doing it wrong.</li> </ol> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/user-select/index.html b/build/user-select/index.html index 71f065e..0bf3d23 100644 --- a/build/user-select/index.html +++ b/build/user-select/index.html @@ -1,53 +1,68 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Using User-Select</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Using User-Select</h1> +<h1 id="using-user-select">Using User-Select</h1> + <p>2019-06-04</p> + <p>Highlighting text in order to copy, cut or paste content is a staple action across the web. Now, what if I told you the ability to control what a user can select is configurable with a single CSS property?</p> -<h2>Introducing the CSS property</h2> + +<h2 id="introducing-the-css-property">Introducing the CSS property</h2> + <p>Simply put, the <code>user-select</code> property is defined as follows:</p> -<blockquote><p><code>user-select</code> controls whether the user can select text (cursor or otherwise)</p> + +<blockquote> +<p><code>user-select</code> controls whether the user can select text (cursor or otherwise)</p> </blockquote> -<h2>The CSS</h2> -<p>The property's available attributes are very straightforward (just remember to target specific browsers for full support!)</p> -<pre><code>/* Default */ + +<h2 id="the-css">The CSS</h2> + +<p>The property’s available attributes are very straightforward (just remember to target specific browsers for full support!)</p> + +<pre><code>/* Default */ p.default { user-select: auto; -moz-user-select: auto; -webkit-user-select: auto; } -/* Disable the user from selecting text */ +/* Disable the user from selecting text */ p.no-select { user-select: none; -moz-user-select: none; -webkit-user-select: none; } -/* Select all text when user clicks */ +/* Select all text when user clicks */ p.select-all { user-select: all; -moz-user-select: all; -webkit-user-select: all; } </code></pre> -<h2>Let's see it in action</h2> + +<h2 id="lets-see-it-in-action">Let’s see it in action</h2> + <p>Try selecting the separate paragraph elements in the CodePen below:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/QRooZp/">Live CodePen Example</a></p> -<h2>Browser Support</h2> + +<h2 id="browser-support">Browser Support</h2> + <p>The great news is <code>user-select</code> is fully supported across all modern browsers (even as far back as IE10!)</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/uses/index.html b/build/uses/index.html index f9cf5a1..96db820 100644 --- a/build/uses/index.html +++ b/build/uses/index.html @@ -1,67 +1,97 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Things I Use</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Things I Use</h1> -<p>This page contains a somewhat up-to-date listing of all hardware and software that I currently use. Seeing similar pages on other people's personal websites have proved quite valuable to me, so I figured I would do the same!</p> -<h2>Services</h2> -<p>I'm proud to support open source products and privacy-respecting communities. The list is limited right now, but the plan is to expand this over time. All prices are in CDN.</p> +<h1 id="things-i-use">Things I Use</h1> + +<p>This page contains a somewhat up-to-date listing of all hardware and software that I currently use. Seeing similar pages on other people’s personal websites have proved quite valuable to me, so I figured I would do the same!</p> + +<h2 id="services">Services</h2> + +<p>I’m proud to support open source products and privacy-respecting communities. The list is limited right now, but the plan is to expand this over time. All prices are in CDN.</p> + <table> -<tr><th>Service</th><th>Cost/year</th></tr> -<tr><td><a href="https://gandi.net">gandi</a><br>Domain renewal</td><td>$172</td></tr> -<tr><td><a href="https://webmail.gandi.net">gandi mail</a><br>Email service</td><td>$64</td></tr> -<tr><td><a href="https://sourcehut.org">sourcehut</a><br>Open source code forge.</td><td>$60</td></tr> -<tr><td><a href="https://mullvad.net">mullvad</a><br>Privacy focused VPN service provider.</td><td>$60</td></tr> +<thead> +<tr> +<th>Service</th> +<th>Cost/year</th> +</tr> +</thead> + +<tbody> +<tr> +<td><a href="https://gandi.net">gandi</a> - Domain renewal</td> +<td>$172</td> +</tr> +<tr> +<td><a href="https://webmail.gandi.net">gandi mail</a> - Email service</td> +<td>$64</td> +</tr> +<tr> +<td><a href="https://sourcehut.org">sourcehut</a> - Open source code forge.</td> +<td>$60</td> +</tr> +<tr> +<td><a href="https://mullvad.net">mullvad</a> - Privacy focused VPN service provider.</td> +<td>$60</td> +</tr> +</tbody> </table> -<h2>Laptops</h2> + +<h2 id="laptops">Laptops</h2> + <ul> -<li><p><strong>ThinkPad X260</strong> (Daily Driver)</p> +<li><p><strong>M2 MacBook Air</strong> (Daily Work)</p> <ul> -<li>CPU: Intel i5-6300U (4) @ 3.000GHz </li> -<li>RAM: 32GB</li> -<li>Storage: 128GB SSD</li> -<li>OS: Arch Linux</li> -</ul> -</li> +<li>CPU: M2 Apple Silicon</li> +<li>RAM: 16GB</li> +<li>Storage: 256GB</li> +<li>OS: macOS</li> +</ul></li> <li><p><strong>ThinkPad X220</strong></p> <ul> <li>CPU: Intel Core i5 2540M @ 2.6 GHz</li> <li>RAM: 16GB</li> <li>Storage: 128GB SSD</li> -<li>OS: Alpine Linux (<a href="https://git.sr.ht/~bt/alpine-suck">see build</a>)</li> -</ul> -</li> +<li>OS: OpenBSD (<a href="https://git.btxx.org/open-suck/about">see build</a>)</li> +<li>OS: Alpine Linux (<a href="https://git.btxx.org/alpine-suck/about">see build</a>)</li> +</ul></li> <li><p><strong>ThinkPad X201</strong></p> <ul> <li>CPU: Intel Core i5-520M @ 2.9 GHz</li> <li>RAM: 8GB</li> <li>Storage: 128GB SSD</li> -<li>OS: OpenBSD (<a href="https://git.sr.ht/~bt/open-suck">see build</a>)</li> -</ul> -</li> +<li>OS: FreeBSD (<a href="https://git.btxx.org/suckless-beastie/about">see build</a>)</li> +</ul></li> </ul> -<p>As you can tell: I <em>really</em> like ThinkPads...</p> -<h2>Accessories</h2> + +<p>As you can tell: I <em>really</em> like ThinkPads…</p> + +<h2 id="accessories">Accessories</h2> + <ul> <li>Logitech Pebble Mouse</li> <li>Cheap USB microphone</li> </ul> -<h2>"Mobile" Devices</h2> + +<h2 id="mobile-devices">“Mobile” Devices</h2> + <ul> <li>iPhone SE (2020)</li> <li>ZTE Cymbal 2</li> @@ -70,15 +100,21 @@ <li>RPi Zero W</li> <li>RPi 400</li> </ul> -<h2>Gaming / Entertainment</h2> + +<h2 id="gaming-entertainment">Gaming / Entertainment</h2> + <ul> <li>Xbox Series S</li> <li>Nintendo Switch Lite</li> <li>Playstation 2</li> </ul> -<h2>Software</h2> + +<h2 id="software">Software</h2> + <p>I try my best to use only free and open source software. Unfortunately, some circumstances require me to use proprietary applications.</p> -<h3>Open Source</h3> + +<h3 id="open-source">Open Source</h3> + <ul> <li>aerc-mail</li> <li>Bitwarden</li> @@ -94,7 +130,9 @@ <li>vim</li> <li>VSCodium</li> </ul> -<h3>Proprietary</h3> + +<h3 id="proprietary">Proprietary</h3> + <ul> <li>Figma</li> <li>Gmail</li> diff --git a/build/vscode/index.html b/build/vscode/index.html index 4f01018..30c17de 100644 --- a/build/vscode/index.html +++ b/build/vscode/index.html @@ -1,37 +1,52 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Running VSCode in Chromium on OpenBSD</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Running VSCode in Chromium on OpenBSD</h1> +<h1 id="running-vscode-in-chromium-on-openbsd">Running VSCode in Chromium on OpenBSD</h1> + <p>2023-06-05</p> -<p>VSCode and its many variations are not available on OpenBSD. This doesn't cause issue with many OpenBSD users, but those making the jump from Linux might miss access to such a popular editor. Lucky for us, there is a <em>hacky</em> workaround to solve this problem.</p> -<h2>VSCode in the Browser</h2> + +<p>VSCode and its many variations are not available on OpenBSD. This doesn’t cause issue with many OpenBSD users, but those making the jump from Linux might miss access to such a popular editor. Lucky for us, there is a <em>hacky</em> workaround to solve this problem.</p> + +<h2 id="vscode-in-the-browser">VSCode in the Browser</h2> + <p>I tried my best to build something like <code>code-server</code> locally and run that directly in my browser - but I failed miserably. Instead, I fell back on <a href="https://vscode.dev">vscode.dev</a> which is essentially a remote version of <code>code-server</code>.</p> + <p>Getting things to work seamlessly proved a little more challenging. I found the best performance was running everything through Chromium with special parameters enabled on launch.</p> -<blockquote><p><strong>Note:</strong> The following assumes you have already installed <code>chromium</code></p> + +<blockquote> +<p><strong>Note:</strong> The following assumes you have already installed <code>chromium</code></p> </blockquote> -<p>First we need to disable <a href="https://man.openbsd.org/unveil.2">unveil</a> for Chromium. This will allow us to access our system files through <a href="https://vscode.dev">vscode.dev</a> using the "Open folder..." or "Open file..." commands without issue:</p> + +<p>First we need to disable <a href="https://man.openbsd.org/unveil.2">unveil</a> for Chromium. This will allow us to access our system files through <a href="https://vscode.dev">vscode.dev</a> using the “Open folder…” or “Open file…” commands without issue:</p> + <pre><code>chrome --disable-unveil </code></pre> -<p>Everything should work pretty solid right out the box now - except it doesn't. Syntax highlighting does not work without enabling WASM/WebAssembly. Your experience might be different, but I had to include the following when launching Chromium from the terminal:</p> + +<p>Everything should work pretty solid right out the box now - except it doesn’t. Syntax highlighting does not work without enabling WASM/WebAssembly. Your experience might be different, but I had to include the following when launching Chromium from the terminal:</p> + <pre><code>ENABLE_WASM=1 chrome --enable-wasm </code></pre> + <p>Success! We can avoid typing out these complex commands everytime we want to launch our editor by setting up an <code>alias</code> (in my case via <code>.zshrc</code>):</p> -<pre><code>alias vscode="ENABLE_WASM=1 chrome --enable-wasm --disable-unveil" + +<pre><code>alias vscode="ENABLE_WASM=1 chrome --enable-wasm --disable-unveil" </code></pre> -<p>That's it! Now I can just pop open VSCode on OpenBSD by simply running <code>vscode</code> in my terminal. Hopefully this can help others slowly transition over to OpenBSD - which you should do because it is amazing!</p> + +<p>That’s it! Now I can just pop open VSCode on OpenBSD by simply running <code>vscode</code> in my terminal. Hopefully this can help others slowly transition over to OpenBSD - which you should do because it is amazing!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/webfonts/index.html b/build/webfonts/index.html index 48ebc4b..17f2a70 100644 --- a/build/webfonts/index.html +++ b/build/webfonts/index.html @@ -1,37 +1,55 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Stop Using Custom Web Fonts</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Stop Using Custom Web Fonts</h1> +<h1 id="stop-using-custom-web-fonts">Stop Using Custom Web Fonts</h1> + <p>2023-03-14</p> -<p>I recently read an excellent post by Manu Moreale titled <a href="https://manuelmoreale.com/a-rant-on-web-font-licenses">A rant on web font licenses</a>. I highly recommend you give it a read (it's relatively short) since Manu makes a solid argument against existing font licenses. After reading, I found myself thinking about it throughout the rest of the day.</p> -<p>I was trying to understand how we ended up in a situation where web/UI designers (myself included) have started to <em>insist</em> on using proprietary, custom web fonts. Do any users actively benefit from custom web fonts? Are there any <em>useful</em> and <em>measurable</em> goals achieved by including them? Do end-users actually <em>care</em> about a website's typeface?</p> + +<p>I recently read an excellent post by Manu Moreale titled <a href="https://manuelmoreale.com/a-rant-on-web-font-licenses">A rant on web font licenses</a>. I highly recommend you give it a read (it’s relatively short) since Manu makes a solid argument against existing font licenses. After reading, I found myself thinking about it throughout the rest of the day.</p> + +<p>I was trying to understand how we ended up in a situation where web/UI designers (myself included) have started to <em>insist</em> on using proprietary, custom web fonts. Do any users actively benefit from custom web fonts? Are there any <em>useful</em> and <em>measurable</em> goals achieved by including them? Do end-users actually <em>care</em> about a website’s typeface?</p> + <p>For the most part, I believe the answer to all those questions is: <strong>not really</strong>.</p> -<h2>System Fonts Look Good</h2> -<p>We are no longer in the early days of the internet. Browsers have matured. Operating systems already ship with usable and often times pretty typefaces. The "wow factor" of having a custom web font on a website is completely gone. Not to mention, recent trends see designers including <em>terrible</em> typefaces that actually make things more difficult to read and break basic accessibility.</p> -<p>All of this for the sake of a company's "brand". I say: <strong>fuck your brand</strong>. Your end-users should always trump your design "guidelines". Period.</p> -<h2>"Think of the Consistency!"</h2> -<p>Often times designers will argue that designs will look too different across browsers/operating systems. I'm not sure why this is seen as a bad thing. First, users will be familiar with the fonts already available to them. Second, as designers our work should never rely on one point of failure (in this instance: fonts). Your designs should be agnostic of your typeface selection. </p> + +<h2 id="system-fonts-look-good">System Fonts Look Good</h2> + +<p>We are no longer in the early days of the internet. Browsers have matured. Operating systems already ship with usable and often times pretty typefaces. The “wow factor” of having a custom web font on a website is completely gone. Not to mention, recent trends see designers including <em>terrible</em> typefaces that actually make things more difficult to read and break basic accessibility.</p> + +<p>All of this for the sake of a company’s “brand”. I say: <strong>fuck your brand</strong>. Your end-users should always trump your design “guidelines”. Period.</p> + +<h2 id="think-of-the-consistency">“Think of the Consistency!”</h2> + +<p>Often times designers will argue that designs will look too different across browsers/operating systems. I’m not sure why this is seen as a bad thing. First, users will be familiar with the fonts already available to them. Second, as designers our work should never rely on one point of failure (in this instance: fonts). Your designs should be agnostic of your typeface selection. </p> + <p>And what about users with browser extensions that already block your custom web fonts? Screw them I guess?</p> -<p>People work on different systems with different constraints and settings. Embrace that - don't try to override it.</p> -<h2>Loss of Personality</h2> -<p>The web is not the same medium as graphic design. Digital designers often get this confused. Web applications serve an action or purpose. The user wants to complete a <em>task</em> - not look at a pretty poster. I understand this sounds harsh, but many designers design more for their own ego and portfolio rather than the end-user. That extra <em>flair</em> on your lowercase "t" doesn't help the user better interact with your features or UI. It just slows them down.</p> -<h2>Hurting Performance & Wasting Resources</h2> -<p>A lot of designers I've worked with or talked to in the past tend to be big supporters of reducing their carbon footprint and minimizing their individual output of "waste". What I always find interesting is how that never seems to translate into their work.</p> -<p>It might be small in the grand scheme of things, but having an extra HTTP request (or more) for your custom fonts and requiring your users to consume more bandwidth on their end is not "eco". As designers we should cut the fat and reduce software bloat in the small areas that we're able to: the front end.</p> -<p>My hope is that even one designer reading this decides to rollout a web app or marketing page without dumping a bunch of custom fonts on their users. It's just the <em>nice</em> thing to do.</p> + +<p>People work on different systems with different constraints and settings. Embrace that - don’t try to override it.</p> + +<h2 id="loss-of-personality">Loss of Personality</h2> + +<p>The web is not the same medium as graphic design. Digital designers often get this confused. Web applications serve an action or purpose. The user wants to complete a <em>task</em> - not look at a pretty poster. I understand this sounds harsh, but many designers design more for their own ego and portfolio rather than the end-user. That extra <em>flair</em> on your lowercase “t” doesn’t help the user better interact with your features or UI. It just slows them down.</p> + +<h2 id="hurting-performance-wasting-resources">Hurting Performance & Wasting Resources</h2> + +<p>A lot of designers I’ve worked with or talked to in the past tend to be big supporters of reducing their carbon footprint and minimizing their individual output of “waste”. What I always find interesting is how that never seems to translate into their work.</p> + +<p>It might be small in the grand scheme of things, but having an extra HTTP request (or more) for your custom fonts and requiring your users to consume more bandwidth on their end is not “eco”. As designers we should cut the fat and reduce software bloat in the small areas that we’re able to: the front end.</p> + +<p>My hope is that even one designer reading this decides to rollout a web app or marketing page without dumping a bunch of custom fonts on their users. It’s just the <em>nice</em> thing to do.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/width-vs-flex-basis/index.html b/build/width-vs-flex-basis/index.html index 23c19b8..db22f2a 100644 --- a/build/width-vs-flex-basis/index.html +++ b/build/width-vs-flex-basis/index.html @@ -1,44 +1,57 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Width or Flex-Basis?</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Width or Flex-Basis?</h1> +<h1 id="width-or-flex-basis">Width or Flex-Basis?</h1> + <p>2018-11-28</p> -<p>Creating rows and columns of elements that adapt dynamically can be a little tricky depending on the desired outcome. Let's breakdown how to solve this issue using both <code>inline-block</code> paired with <code>width</code> and <code>flex-basis</code>.</p> -<h2>Width</h2> + +<p>Creating rows and columns of elements that adapt dynamically can be a little tricky depending on the desired outcome. Let’s breakdown how to solve this issue using both <code>inline-block</code> paired with <code>width</code> and <code>flex-basis</code>.</p> + +<h2 id="width">Width</h2> + <p>Setting the width of the inner children to a divisible value and setting their display to <code>inline-block</code>, we are able to create self-wrapping elements:</p> + <pre><code>.width-container { display: block; } .width-container__item { display: inline-block; - width: calc(33% - 3px); /* Fix for wonky inline-block margins */ + width: calc(33% - 3px); /* Fix for wonky inline-block margins */ } </code></pre> -<h3>Pros</h3> + +<h3 id="pros">Pros</h3> + <ul> -<li><a href="https://caniuse.com/#search=inline-block">Full browser support</a> (as far back as IE6)</li> +<li>Full browser support (as far back as IE6)</li> <li>No floats needed</li> </ul> -<h3>Cons</h3> + +<h3 id="cons">Cons</h3> + <ul> <li>Buggy <code>margin</code> workaround needed</li> <li>Wrapped elements cannot dynamically fill remaining empty parent space</li> </ul> -<h2>Flex-basis</h2> + +<h2 id="flex-basis">Flex-basis</h2> + <p>This is my personal preference for dynamically wrapping inner children elements. Simply set the parent as <code>display: flex</code>, allow flex-wrapping and then set the <code>flex-basis</code> of the children to any percentage value.</p> + <pre><code>.flex-container { display: flex; flex-wrap: wrap; @@ -48,20 +61,28 @@ flex-basis: 33%; } </code></pre> + <p>You will also notice the <code>flex</code> property set to <code>1 1 auto</code>. This is important if you require your wrapped elements to fill the remaining space of the parent container.</p> -<h3>Pros</h3> + +<h3 id="pros-1">Pros</h3> + <ul> <li>No buggy margins to play with</li> <li>Dynamically renders children to fill parent container if <code>flex</code> is set</li> -<li>Scales well across screen / device sizes</li> +<li>Scales well across screen / device sizes</li> </ul> -<h3>Cons</h3> + +<h3 id="cons-1">Cons</h3> + <ul> -<li>Some versions of IE struggle with <a href="https://caniuse.com/#search=flex-basis">browser support</a></li> +<li>Some versions of IE struggle with browser support</li> </ul> -<h2>CodePen Demo</h2> + +<h2 id="codepen-demo">CodePen Demo</h2> + <p>Feel free to play around with a slightly more stylized version of both options below:</p> -<p><a href="https://codepen.io/bradleytaunt/pen/JevaYQ">CodePen Demo: Width or flex-basis</a></p> + +<p>CodePen Demo: Width or flex-basis</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/wiki/index.html b/build/wiki/index.html index f632e31..d524345 100644 --- a/build/wiki/index.html +++ b/build/wiki/index.html @@ -1,61 +1,69 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Wiki</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Wiki</h1> -<h2>Introduction</h2> -<p>This is a living document that will expand alongside my own personal experiences and knowledge. Topics range from device settings, computer configurations, household product serial numbers / expiry dates, and so on. Hopefully this can end up being helpful to others as well.</p> -<h2>Open Suck</h2> +<h1 id="wiki">Wiki</h1> + +<h2 id="introduction">Introduction</h2> + +<p>This is a living document that will expand alongside my own personal experiences and knowledge. Topics range from device settings, computer configurations, household product serial numbers / expiry dates, and so on. Hopefully this can end up being helpful to others as well.</p> + +<h2 id="open-suck">Open Suck</h2> + <p>My personal, lightweight desktop installer for OpenBSD based on the suckless philosophy. Includes my own custom set of suckless tools (dwm, slstatus, dmenu, etc.)</p> + <ul> -<li><a href="https://git.sr.ht/~bt/open-suck">https://git.sr.ht/~bt/open-suck</a></li> +<li><a href="https://git.sr.ht/~bt/open-suck">https://git.sr.ht/~bt/open-suck</a></li> </ul> -<h2>vimrc</h2> -<pre><code>" Don't try to be vi compatible + +<h2 id="vimrc">vimrc</h2> + +<pre><code>" Don't try to be vi compatible set nocompatible -" Helps force plugins to load correctly when it is turned back on below +" Helps force plugins to load correctly when it is turned back on below filetype off -" TODO: Load plugins here (pathogen or vundle) +" TODO: Load plugins here (pathogen or vundle) -" Turn on syntax highlighting +" Turn on syntax highlighting syntax on -" For plugins to load correctly +" For plugins to load correctly filetype plugin indent on -" TODO: Pick a leader key -" let mapleader = "," +" TODO: Pick a leader key +" let mapleader = "," -" Security +" Security set modelines=0 -" Show line numbers +" Show line numbers set number -" Show file stats +" Show file stats set ruler -" Blink cursor on error instead of beeping (grr) +" Blink cursor on error instead of beeping (grr) set visualbell -" Encoding +" Encoding set encoding=utf-8 -" Whitespace +" Whitespace set wrap set textwidth=79 set formatoptions=tcqrn1 @@ -65,190 +73,232 @@ set softtabstop=2 set expandtab set noshiftround -" Cursor motion +" Cursor motion set scrolloff=3 set backspace=indent,eol,start -set matchpairs+=<:> " use % to jump between pairs -runtime! macros/matchit.vim +set matchpairs+=<:> " use % to jump between pairs +runtime! macros/matchit.vim -" Move up/down editor lines +" Move up/down editor lines nnoremap j gj nnoremap k gk -" Allow hidden buffers +" Allow hidden buffers set hidden -" Rendering +" Rendering set ttyfast -" Status bar +" Status bar set laststatus=2 -" Last line +" Last line set showmode set showcmd -" Searching -nnoremap / /\v -vnoremap / /\v +" Searching +nnoremap / /\v +vnoremap / /\v set hlsearch set incsearch set ignorecase set smartcase set showmatch -map <leader><space> :let @/=''<cr> " clear search +map <leader><space> :let @/=''<cr> " clear search -" Remap help key. -inoremap <F1> <ESC>:set invfullscreen<CR>a -nnoremap <F1> :set invfullscreen<CR> -vnoremap <F1> :set invfullscreen<CR> +" Remap help key. +inoremap <F1> <ESC>:set invfullscreen<CR>a +nnoremap <F1> :set invfullscreen<CR> +vnoremap <F1> :set invfullscreen<CR> -" Textmate holdouts +" Textmate holdouts -" Formatting -map <leader>q gqip +" Formatting +map <leader>q gqip -" Visualize tabs and newlines +" Visualize tabs and newlines set listchars=tab:▸\ ,eol:¬ -" Uncomment this to enable by default: -" set list " To enable by default -" Or use your leader key + l to toggle on/off -map <leader>l :set list!<CR> " Toggle tabs and EOL +" Uncomment this to enable by default: +" set list " To enable by default +" Or use your leader key + l to toggle on/off +map <leader>l :set list!<CR> " Toggle tabs and EOL -" Color scheme (terminal) +" Color scheme (terminal) set t_Co=256 set background=dark let g:solarized_termcolors=256 let g:solarized_termtrans=1 -" put https://raw.github.com/altercation/vim-colors-solarized/master/colors/solarized.vim -" in ~/.vim/colors/ and uncomment: -" colorscheme solarized +" put https://raw.github.com/altercation/vim-colors-solarized/master/colors/solarized.vim +" in ~/.vim/colors/ and uncomment: +" colorscheme solarized </code></pre> -<h2>.zshrc extras / aliases</h2> -<pre><code>export EDITOR="/bin/vim" -alias suck="sudo rm -rf config.h ; sudo make install" -alias fixmonitor="xrandr --auto --output eDP1 --mode 1366x768 --below DP2-2" -alias vscode="alias vscode="ENABLE_WASM=1 chrome --enable-wasm --disable-unveil"" +<h2 id=".zshrc-extras-aliases">.zshrc extras / aliases</h2> + +<pre><code>export EDITOR="/bin/vim" + +alias suck="sudo rm -rf config.h ; sudo make install" +alias fixmonitor="xrandr --auto --output eDP1 --mode 1366x768 --below DP2-2" +alias vscode="alias vscode="ENABLE_WASM=1 chrome --enable-wasm --disable-unveil"" </code></pre> -<h2>mimeapps.list</h2> -<p>Place this file under <code>/usr/share/applications/mimeapps.list</code></p> + +<h2 id="mimeapps.list">mimeapps.list</h2> + +<p>Place this file under <code>/usr/share/applications/mimeapps.list</code></p> + <pre><code>[Default Applications] -x-scheme-handler/http=org.qutebrowser.qutebrowser.desktop -x-scheme-handler/https=org.qutebrowser.qutebrowser.desktop -x-scheme-handler/ftp=org.qutebrowser.qutebrowser.desktop -x-scheme-handler/chrome=org.qutebrowser.qutebrowser.desktop -text/html=org.qutebrowser.qutebrowser.desktop -application/x-extension-htm=org.qutebrowser.qutebrowser.desktop -application/x-extension-html=org.qutebrowser.qutebrowser.desktop -application/x-extension-shtml=org.qutebrowser.qutebrowser.desktop -application/xhtml+xml=org.qutebrowser.qutebrowser.desktop -application/x-extension-xhtml=org.qutebrowser.qutebrowser.desktop -application/x-extension-xht=org.qutebrowser.qutebrowser.desktop -image/jpeg=feh -image/png=feh -image/webp=feh +x-scheme-handler/http=org.qutebrowser.qutebrowser.desktop +x-scheme-handler/https=org.qutebrowser.qutebrowser.desktop +x-scheme-handler/ftp=org.qutebrowser.qutebrowser.desktop +x-scheme-handler/chrome=org.qutebrowser.qutebrowser.desktop +text/html=org.qutebrowser.qutebrowser.desktop +application/x-extension-htm=org.qutebrowser.qutebrowser.desktop +application/x-extension-html=org.qutebrowser.qutebrowser.desktop +application/x-extension-shtml=org.qutebrowser.qutebrowser.desktop +application/xhtml+xml=org.qutebrowser.qutebrowser.desktop +application/x-extension-xhtml=org.qutebrowser.qutebrowser.desktop +application/x-extension-xht=org.qutebrowser.qutebrowser.desktop +image/jpeg=feh +image/png=feh +image/webp=feh </code></pre> -<h2>qutebrowser</h2> -<h3>Greasemonkey</h3> -<p>All of these scripts should be added under <code>~/.local/share/qutebrowser/greasemonkey/</code>. Then be sure to run the proper command within qutebrowser: <code>:greasemonkey-reload</code></p> -<h4>Auto Skip YouTube Ads</h4> -<pre><code>// ==UserScript== -// @name Auto Skip YouTube Ads -// @version 1.0.0 -// @description Speed up and skip YouTube ads automatically -// @author jso8910 -// @match *://*.youtube.com/* -// @exclude *://*.youtube.com/subscribe_embed?* -// ==/UserScript== -setInterval(() => { - const btn = document.querySelector('.videoAdUiSkipButton,.ytp-ad-skip-button') + +<h2 id="qutebrowser">qutebrowser</h2> + +<h3 id="greasemonkey">Greasemonkey</h3> + +<p>All of these scripts should be added under <code>~/.local/share/qutebrowser/greasemonkey/</code>. Then be sure to run the proper command within qutebrowser: <code>:greasemonkey-reload</code></p> + +<h4 id="auto-skip-youtube-ads">Auto Skip YouTube Ads</h4> + +<pre><code>// ==UserScript== +// @name Auto Skip YouTube Ads +// @version 1.0.0 +// @description Speed up and skip YouTube ads automatically +// @author jso8910 +// @match *://*.youtube.com/* +// @exclude *://*.youtube.com/subscribe_embed?* +// ==/UserScript== +setInterval(() => { + const btn = document.querySelector('.videoAdUiSkipButton,.ytp-ad-skip-button') if (btn) { btn.click() } - const ad = [...document.querySelectorAll('.ad-showing')][0]; + const ad = [...document.querySelectorAll('.ad-showing')][0]; if (ad) { - document.querySelector('video').playbackRate = 10; + document.querySelector('video').playbackRate = 10; } }, 50) </code></pre> -<h2><code>ffmpeg</code> to MP4</h2> + +<h2 id="to-mp4"><code>ffmpeg</code> to MP4</h2> + <pre><code>ffmpeg -i input_filename.avi -c:v copy -c:a copy -y output_filename.mp4 </code></pre> -<h2>Mount USB HDD via CLI</h2> -<pre><code>mkdir /media/usb-drive -mount /dev/sdX /media/usb-drive/ + +<h2 id="mount-usb-hdd-via-cli">Mount USB HDD via CLI</h2> + +<pre><code>mkdir /media/usb-drive +mount /dev/sdX /media/usb-drive/ </code></pre> -<h2>Run Mullvad on Alpine Linux (Wireguard)</h2> + +<h2 id="run-mullvad-on-alpine-linux-wireguard">Run Mullvad on Alpine Linux (Wireguard)</h2> + <pre><code># Install wireguard apk add wireguard-tools </code></pre> + <p>Login into Mullvad and download the proper wireguard configuration files(s). After downloaded, place in the proper directory:</p> -<pre><code>doas cp <MULLVAD_FILENAME>.conf /etc/wireguard/" + +<pre><code>doas cp <MULLVAD_FILENAME>.conf /etc/wireguard/" </code></pre> -<p>Then setup an aliases for easier up/down states:</p> -<pre><code>alias vpnup="doas wg-quick up /etc/wireguard/<MULLVAD_FILENAME>.conf" -alias vpndown="doas wg-quick down /etc/wireguard/<MULLVAD_FILENAME>.conf" + +<p>Then setup an aliases for easier up/down states:</p> + +<pre><code>alias vpnup="doas wg-quick up /etc/wireguard/<MULLVAD_FILENAME>.conf" +alias vpndown="doas wg-quick down /etc/wireguard/<MULLVAD_FILENAME>.conf" </code></pre> -<h2>Alpine Linux <code>mini_racer</code> Tweaks</h2> + +<h2 id="alpine-linux-tweaks">Alpine Linux <code>mini_racer</code> Tweaks</h2> + <p>Gem lockfile:</p> + <pre><code>PLATFORMS ruby x86_64-linux-musl mini_racer (0.6.3) - <remove child dependency> + <remove child dependency> </code></pre> + <p>then run: <code>bundle update mini_racer</code></p> -<h2>Docker</h2> + +<h2 id="docker">Docker</h2> + <p>Installing <code>ghost</code></p> + <pre><code>docker pull ghost </code></pre> + <pre><code>docker run -d \ --name ghost-name \ -e NODE_ENV=development \ -p 2368:2368 \ - -v $HOME/path/to/ghost/blog:/var/lib/ghost/content \ + -v $HOME/path/to/ghost/blog:/var/lib/ghost/content \ ghost:alpine </code></pre> -<h2>MongoDB 3.4 on Ubuntu 23.10</h2> -<pre><code>wget http://launchpadlibrarian.net/668089858/libssl1.0.0_1.0.2n-1ubuntu5.13_amd64.deb -sudo apt install ./libssl1.0.0_1.0.2n-1ubuntu5.13_amd64.deb -sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10 -echo "deb http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list +<h2 id="mongodb-3.4-on-ubuntu-23.10">MongoDB 3.4 on Ubuntu 23.10</h2> + +<pre><code>wget http://launchpadlibrarian.net/668089858/libssl1.0.0_1.0.2n-1ubuntu5.13_amd64.deb +sudo apt install ./libssl1.0.0_1.0.2n-1ubuntu5.13_amd64.deb +sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10 + +echo "deb http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list </code></pre> -<p>Now edit <code>/etc/apt/sources.list.d/mongodb-org-3.4.list</code>:</p> -<pre><code>deb [trusted=yes] http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4... + +<p>Now edit <code>/etc/apt/sources.list.d/mongodb-org-3.4.list</code>:</p> + +<pre><code>deb [trusted=yes] http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4... </code></pre> + <p>Then finish things up:</p> + <pre><code>sudo apt-get update --allow-unauthenticated sudo apt-get install -y mongodb-org -sudo mkdir -p /data/db -sudo chmod -R 777 /data/db +sudo mkdir -p /data/db +sudo chmod -R 777 /data/db </code></pre> -<h2>Redis 6.0.7 on Ubuntu 23.10</h2> + +<h2 id="redis-6.0.7-on-ubuntu-23.10">Redis 6.0.7 on Ubuntu 23.10</h2> + <pre><code>sudo apt-get install build-essential tcl -cd /tmp -curl -O http://download.redis.io/releases/redis-6.0.7.tar.gz +cd /tmp +curl -O http://download.redis.io/releases/redis-6.0.7.tar.gz tar xzvf redis-6.0.7.tar.gz cd redis-6.0.7 </code></pre> + <p>Install redis:</p> + <pre><code>make make test sudo make install -sudo mkdir /etc/redis -sudo cp /tmp/redis-6.0.7redis.conf /etc/redis +sudo mkdir /etc/redis +sudo cp /tmp/redis-6.0.7redis.conf /etc/redis </code></pre> -<p>Edit <code>/etc/redis/redis.conf</code> with the following changes:</p> + +<p>Edit <code>/etc/redis/redis.conf</code> with the following changes:</p> + <ul> <li><code>supervised systemd</code></li> -<li><code>dir /var/lib/redis</code></li> +<li><code>dir /var/lib/redis</code></li> </ul> -<p>Create systemd unit file for redis: <code>/etc/systemd/system/redis.service</code>:</p> + +<p>Create systemd unit file for redis: <code>/etc/systemd/system/redis.service</code>:</p> + <pre><code>[Unit] Description=Redis In-Memory Data Store After=network.target @@ -256,53 +306,71 @@ After=network.target [Service] User=redis Group=redis -ExecStart=/usr/local/bin/redis-server /etc/redis/redis.conf -ExecStop=/usr/local/bin/redis-cli shutdown +ExecStart=/usr/local/bin/redis-server /etc/redis/redis.conf +ExecStop=/usr/local/bin/redis-cli shutdown Restart=always [Install] WantedBy=multi-user.target </code></pre> + <p>Final steps:</p> + <pre><code>sudo adduser --system --group --no-create-home redis -sudo mkdir /var/lib/redis -sudo chown redis:redis /var/lib/redis -sudo chmod 770 /var/lib/redis +sudo mkdir /var/lib/redis +sudo chown redis:redis /var/lib/redis +sudo chmod 770 /var/lib/redis </code></pre> -<h2>Ruby 2.7.2 with rbenv on Ubuntu 23.10</h2> -<p>Edit the <code>/etc/apt/sources.list</code> file:</p> -<pre><code>deb [trusted=yes] http://security.ubuntu.com/ubuntu bionic-security main + +<h2 id="ruby-2.7.2-with-rbenv-on-ubuntu-23.10">Ruby 2.7.2 with rbenv on Ubuntu 23.10</h2> + +<p>Edit the <code>/etc/apt/sources.list</code> file:</p> + +<pre><code>deb [trusted=yes] http://security.ubuntu.com/ubuntu bionic-security main </code></pre> + <p>Then run <code>sudo apt-get update</code>. After completion, install <code>libssl1.0-dev</code>:</p> + <pre><code>sudo apt-get install libssl1.0-dev </code></pre> -<h2>Fix screen tearing</h2> -<pre><code>sudo micro /etc/X11/xorg.conf.d/20-intel.conf + +<h2 id="fix-screen-tearing">Fix screen tearing</h2> + +<pre><code>sudo micro /etc/X11/xorg.conf.d/20-intel.conf </code></pre> + <p>Add the following contents to <code>20-intel.conf</code>:</p> -<pre><code>Section "OutputClass" - Identifier "Intel Graphics" - MatchDriver "i915" - Driver "intel" - Option "DRI" "3" - Option "TearFree" "1" + +<pre><code>Section "OutputClass" + Identifier "Intel Graphics" + MatchDriver "i915" + Driver "intel" + Option "DRI" "3" + Option "TearFree" "1" EndSection </code></pre> -<h2>Enabling "tap to click"</h2> -<pre><code>sudo micro /etc/X11/xorg.conf.d/30-touchpad.conf + +<h2 id="enabling-tap-to-click">Enabling “tap to click"</h2> + +<pre><code>sudo micro /etc/X11/xorg.conf.d/30-touchpad.conf </code></pre> + <p>Add the following contents to <code>30-touchpad.conf</code>:</p> -<pre><code>Section "InputClass" - Identifier "touchpad" - Driver "libinput" - MatchIsTouchpad "on" - Option "Tapping" "on" - Option "TappingButtonMap" "lmr" + +<pre><code>Section "InputClass" + Identifier "touchpad" + Driver "libinput" + MatchIsTouchpad "on" + Option "Tapping" "on" + Option "TappingButtonMap" "lmr" EndSection </code></pre> -<h2>Woocommerce</h2> + +<h2 id="woocommerce">Woocommerce</h2> + <p><strong>Reset all product menu_order to <code>0</code></strong></p> -<pre><code>UPDATE wp_posts SET menu_order = 0 WHERE post_type = 'product'; + +<pre><code>UPDATE wp_posts SET menu_order = 0 WHERE post_type = 'product'; </code></pre> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/windows/index.html b/build/windows/index.html index 215ecce..fa8e0e6 100644 --- a/build/windows/index.html +++ b/build/windows/index.html @@ -1,89 +1,71 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Setting Up Jekyll on Windows
</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Setting Up Jekyll on Windows
</h1> -<p>
-2022-09-02
-
-I've recently been playing around with using Windows 10 as my daily operating system. So far, it has been going fairly well. Nothing will probably ever feel as "optimized" as running a Linux-based system but it works well for my current needs. Getting a Jekyll development environment setup was a different story though...
-
-One of the first issues with using Windows 10 is the need to run a few of my open source projects that are built off Jekyll locally. This process initially seemed a like complex process to get things running smoothly but in the end was very straightforward. The main issue came from needing to bounce around through a handful of separate tutorials to get everything running smoothly.
-
-So, I thought I would make this quick write-up to help those in the same situation (or even for my future self the need arises). Let's get into it.
-
-</p> -<h2>WSL
</h2> -<p>
-The first step involves installing <a href="https://docs.microsoft.com/en-us/windows/wsl/install">WSL</a> in order to run Linux alongside the main Windows OS. The documentation is well written and will get you up-and-running in no time. For quick reference, it essentially comes down to:
-
</p> +<h1 id="setting-up-jekyll-on-windows">Setting Up Jekyll on Windows</h1> + +<p>2022-09-02</p> + +<p>I’ve recently been playing around with using Windows 10 as my daily operating system. So far, it has been going fairly well. Nothing will probably ever feel as “optimized” as running a Linux-based system but it works well for my current needs. Getting a Jekyll development environment setup was a different story though…</p> + +<p>One of the first issues with using Windows 10 is the need to run a few of my open source projects that are built off Jekyll locally. This process initially seemed a like complex process to get things running smoothly but in the end was very straightforward. The main issue came from needing to bounce around through a handful of separate tutorials to get everything running smoothly.</p> + +<p>So, I thought I would make this quick write-up to help those in the same situation (or even for my future self the need arises). Let’s get into it.</p> + +<h2 id="wsl">WSL</h2> + +<p>The first step involves installing <a href="https://docs.microsoft.com/en-us/windows/wsl/install">WSL</a> in order to run Linux alongside the main Windows OS. The documentation is well written and will get you up-and-running in no time. For quick reference, it essentially comes down to:</p> <ol> -<li>Opening PowerShell or Command Prompt as an administrator
</li> -<li>Installing via the command: <code>wsl --install</code>
</li> -<li>Restarting your machine after the install completes
</li> -<li>Creating your UNIX username and password
</li> +<li>Opening PowerShell or Command Prompt as an administrator</li> +<li>Installing via the command: <code>wsl --install</code></li> +<li>Restarting your machine after the install completes</li> +<li>Creating your UNIX username and password</li> </ol> -<p>
-</p> -<h2>Installing Ruby & Dependencies
</h2> -<p>
-Once logged into your UNIX terminal session (with your created user) you can begin installing everything we need for Jekyll to work properly. The first step is to installing <code>rvm</code> and the <a href="https://github.com/rvm/ubuntu_rvm">official project documentation</a> does a very good job of walking you through this.
-
</p> -<ul> -<li>Be sure dependencies as installed: <code>sudo apt-get install software-properties-common</code>
</li> -<li>Add the PPA and install the package:
</li> -</ul> -<p>
-
-</p> -<pre><code>sudo apt-add-repository -y ppa:rael-gc/rvm
-sudo apt-get update
-sudo apt-get install rvm
-</code></pre> -<p>
-
</p> +<h2 id="installing-ruby-dependencies">Installing Ruby & Dependencies</h2> + +<p>Once logged into your UNIX terminal session (with your created user) you can begin installing everything we need for Jekyll to work properly. The first step is to installing <code>rvm</code> and the <a href="https://github.com/rvm/ubuntu_rvm">official project documentation</a> does a very good job of walking you through this.</p> <ul> -<li>Add your existing user to the <code>rvm</code> group: <code>sudo usermod -a -G rvm $USER</code>
</li> +<li><p>Be sure dependencies as installed: <code>sudo apt-get install software-properties-common</code></p></li> +<li><p>Add the PPA and install the package:</p> + +<p>sudo apt-add-repository -y ppa:rael-gc/rvm +sudo apt-get update +sudo apt-get install rvm</p></li> +<li><p>Add your existing user to the <code>rvm</code> group: <code>sudo usermod -a -G rvm $USER</code></p></li> </ul> -<p>
-You will need to close and restart your session to your Ubuntu system for these changes to take. After that, we can use <code>rvm</code> to install the latest version (at this time of writing) of ruby:
-
-
-</p> -<pre><code>rvm install 3.1.2
+ +<p>You will need to close and restart your session to your Ubuntu system for these changes to take. After that, we can use <code>rvm</code> to install the latest version (at this time of writing) of ruby:</p> + +<pre><code>rvm install 3.1.2 </code></pre> -<p>
-
-That's it!
-
-</p> -<h2>Jekyll - Finally!
</h2> -<p>
-The final step is to update our gems and install Jekyll:
-
-
-</p> -<pre><code>gem update
-gem install jekyll bundler
+ +<p>That’s it!</p> + +<h2 id="jekyll---finally">Jekyll - Finally!</h2> + +<p>The final step is to update our gems and install Jekyll:</p> + +<pre><code>gem update +gem install jekyll bundler </code></pre> -<p>
-
-Once complete you can now run your Jekyll projects locally through WSL! Nothing ground-breaking but still pretty helpful for first-time users. And best of all, at least I have a good reference point in the future if I ever run into this issue again!
</p> + +<p>Once complete you can now run your Jekyll projects locally through WSL! Nothing ground-breaking but still pretty helpful for first-time users. And best of all, at least I have a good reference point in the future if I ever run into this issue again!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/wp-enqueue-for-beginners/index.html b/build/wp-enqueue-for-beginners/index.html index 96ccb68..bc795a6 100644 --- a/build/wp-enqueue-for-beginners/index.html +++ b/build/wp-enqueue-for-beginners/index.html @@ -1,36 +1,43 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>WP Enqueue for Beginners</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>WP Enqueue for Beginners</h1> +<h1 id="wp-enqueue-for-beginners">WP Enqueue for Beginners</h1> + <p>2020-05-05</p> -<p>Throughout my career designing, developing and auditing WordPress themes, I've come across many that include their custom styles / scripts as static HTML elements inside their respective <code>header</code> and <code>footer</code> templates. This is perfectly <em>fine</em>, but there is a cleaner way to include these files.</p> -<p>This post is purposefully catered for WordPress beginners, so if this seems overly simple, then you're probably already developing WordPress themes that utilize these techniques. (Which is awesome!)</p> -<h2>Introducing WP Enqueue</h2> + +<p>Throughout my career designing, developing and auditing WordPress themes, I’ve come across many that include their custom styles / scripts as static HTML elements inside their respective <code>header</code> and <code>footer</code> templates. This is perfectly <em>fine</em>, but there is a cleaner way to include these files.</p> + +<p>This post is purposefully catered for WordPress beginners, so if this seems overly simple, then you’re probably already developing WordPress themes that utilize these techniques. (Which is awesome!)</p> + +<h2 id="introducing-wp-enqueue">Introducing WP Enqueue</h2> + <p>The description of Wp Enqueue from the WordPress documentation:</p> -<p><blockquote class="wp-block-quote"> - <p> - Registers the style [script] if source provided (does NOT overwrite) and enqueues - </p> -</blockquote></p> + <p>In a nutshell: Placing a <code>wp_enqueue_script</code> or <code>wp_enqueue_style</code> script in the <code>functions.php</code> of your custom theme tells WordPress to pull external files into the header or footer of your website. Best practice being: <em>styles into the header, scripts into the footer</em>.</p> + <p>I suggest you read the official documentation for more details: <a href="https://developer.wordpress.org/reference/functions/wp_enqueue_script/">wp_enqueue_script</a> and <a href="https://developer.wordpress.org/reference/functions/wp_enqueue_style/">wp_enqueue_style</a>.</p> -<h2>Enqueue Stylesheets</h2> + +<h2 id="enqueue-stylesheets">Enqueue Stylesheets</h2> + <p>The default script to enqueue a CSS stylesheet:</p> + <pre><code>wp_enqueue_style( $handle, $src, $deps, $ver, $media ); </code></pre> + <ul> <li><code>$handle</code> - the name associated with your stylesheet</li> <li><code>$src</code> - URL pointing to the directory of the stylesheet itself</li> @@ -38,51 +45,68 @@ <li><code>$ver</code> - The version number of the stylesheet (used for cache busting)</li> <li><code>$media</code> - Specify media type (<code>all</code>, <code>print</code>, <code>screen</code>, etc.)</li> </ul> + <p>So, with all those parameters in mind, here is what a standard default enqueue of a CSS stylesheet looks like:</p> -<pre><code>wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800,900', '', '1.0', ''); + +<pre><code>wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800,900', '', '1.0', ''); </code></pre> + <p>In this example we have rendered the following:</p> + <ul> <li><code>$handle</code>: google-fonts</li> -<li><code>$src</code>: https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800- 0</li> +<li><code>$src</code>: <a href="https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800-">https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800-</a> 0</li> <li><code>$deps</code>: Null (left blank)</li> <li><code>$ver</code>: 1.0</li> <li><code>$media</code>: Null (left blank)</li> </ul> + <p><strong>Important:</strong> Keep in mind that the <code>wp_enqueue_style</code> script will render the stylesheet link into the WordPress header automatically.</p> -<h2>Enqueue Scripts</h2> + +<h2 id="enqueue-scripts">Enqueue Scripts</h2> + <p>The default script to enqueue an external JS file:</p> + <pre><code>wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); </code></pre> + <ul> <li><code>$handle</code> - the name associated with your script</li> <li><code>$src</code> - URL pointing to the directory of the script itself</li> <li><code>$deps</code> - An array of any other scripts needed as dependencies</li> <li><code>$ver</code> - The version number of the script (used for cache busting)</li> -<li><code>$in_footer</code> - Set whether the script is loaded in the <code><head></code> or just before the <code></body></code></li> +<li><code>$in_footer</code> - Set whether the script is loaded in the <code><head></code> or just before the <code></body></code></li> </ul> + <p>With all those parameters in mind, here is what a standard default enqueue of a Javascript file looks like:</p> -<pre><code>wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/bxslider.js', array('jquery'), '1.0.0', true ); + +<pre><code>wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/bxslider.js', array('jquery'), '1.0.0', true ); </code></pre> + <p>In this example we have rendered the following:</p> + <ul> <li><code>$handle</code>: bxslider</li> -<li><code>$src</code>: get_template_directory<em></em>ri() . /js/bxslider.js'</li> -<li><code>$deps</code>: array(jquery')</li> +<li><code>$src</code>: get_template_directory_uri() . /js/bxslider.js’</li> +<li><code>$deps</code>: array(jquery’)</li> <li><code>$ver</code>: 1.0.0</li> <li><code>$in_footer</code>: True (<em>places script before closing body tag</em>)</li> </ul> -<h2>Packaging Everything Together</h2> + +<h2 id="packaging-everything-together">Packaging Everything Together</h2> + <p>Now that we have the custom stylesheet and script ready to be loaded into our custom WordPress theme, we just need to properly package them together as a function in our <code>functions.php</code> file:</p> -<pre><code>// Add styles and scripts to the header/footer + +<pre><code>// Add styles and scripts to the header/footer function custom_enqueue_scripts() { - wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800,900'); - wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/bxslider.js', array('jquery'), '1.0.0', true ); + wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800,900'); + wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/bxslider.js', array('jquery'), '1.0.0', true ); } -add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts'); +add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts'); </code></pre> -<p>That's it! Hopefully this helps prevent WordPress newbies from statically rendering their external CSS and JS files directly in template files. Let WordPress do that for you!</p> + +<p>That’s it! Hopefully this helps prevent WordPress newbies from statically rendering their external CSS and JS files directly in template files. Let WordPress do that for you!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> diff --git a/build/x201/index.html b/build/x201/index.html index e7b493e..b5efc6c 100644 --- a/build/x201/index.html +++ b/build/x201/index.html @@ -1,50 +1,77 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Bypassing the WiFi Hardware Switch on the Lenovo X201</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Bypassing the WiFi Hardware Switch on the Lenovo X201</h1> +<h1 id="bypassing-the-wifi-hardware-switch-on-the-lenovo-x201">Bypassing the WiFi Hardware Switch on the Lenovo X201</h1> + <p>2023-04-02</p> -<p>I recently received a ThinkPad X201 to start using as my daily driver. I purchased the X201 to replace my existing X260. Although some might look at this as a "downgrade" in terms of specs and hardware, I would have to disagree. </p> -<p>The X201 is an absolute masterpiece in laptop hardware design and only faulted by some of the constraints set by the motherboard, namely the lack to support more than 8GB of RAM. Other than that, I think it's perfect. Well...<em>almost</em> perfect. There is one small annoyance:</p> + +<p>I recently received a ThinkPad X201 to start using as my daily driver. I purchased the X201 to replace my existing X260. Although some might look at this as a “downgrade” in terms of specs and hardware, I would have to disagree. </p> + +<p>The X201 is an absolute masterpiece in laptop hardware design and only faulted by some of the constraints set by the motherboard, namely the lack to support more than 8GB of RAM. Other than that, I think it’s perfect. Well…<em>almost</em> perfect. There is one small annoyance:</p> + <p><strong>The physical WiFi kill switch</strong>.</p> + <p>This thing can become really flaky on these older devices and countless people on the web report connection issues across multiple operating systems. I too ran into this issue not long after getting Alpine setup nicely on my machine.</p> + <p>Some remedies include re-installing hardware drivers, flicking the hardware toggle off and on repeatedly, or even simply logging out of the current user session. All these options seemed like a pain in the ass.</p> + <p>So I listed out my possible options:</p> + <ol> <li>Whitelist my BIOS WiFi settings (requires flashing BIOS) and install a newer wifi card, hoping the problem fixes itself</li> <li>Purchase a replacement WiFi card (maybe mine was just buggy??)</li> <li>Block PIN20 on the existing Wifi card</li> <li>Somehow disconnect the hardware killswitch (requires soldering which I have ZERO experience with)</li> </ol> -<p>Out of pure laziness, I chose option <strong>three</strong>. In case you were unaware, PIN20 on older PCIE WLAN cards is the "wifi disable" and used as an RF killswitch. By "blocking" this PIN, we stop the system from being able to disable the WiFi connection. Losing the ability to disable WiFi on the hardware level didn't bother me much, so I moved forward with this easier approach.</p> -<h2>Opening Up the X201</h2> -<p>To access the WiFi card, you'll need to remove the keyboard and touchpad palm rest cover. It might sound daunting for newcomers but I assure you it is very simple. These machines were built during a time when Lenovo <em>expected</em> their users to tinker with their devices and built them with modular components in mind. Yet another reason for my decision to swap this laptop for my more "locked down" X260.</p> -<blockquote><p>Note: I'm not sure how important this is, but I made sure to set my WiFi hardware toggle switch into the "ON" position before doing any of the other steps.</p> + +<p>Out of pure laziness, I chose option <strong>three</strong>. In case you were unaware, PIN20 on older PCIE WLAN cards is the “wifi disable” and used as an RF killswitch. By “blocking” this PIN, we stop the system from being able to disable the WiFi connection. Losing the ability to disable WiFi on the hardware level didn’t bother me much, so I moved forward with this easier approach.</p> + +<h2 id="opening-up-the-x201">Opening Up the X201</h2> + +<p>To access the WiFi card, you’ll need to remove the keyboard and touchpad palm rest cover. It might sound daunting for newcomers but I assure you it is very simple. These machines were built during a time when Lenovo <em>expected</em> their users to tinker with their devices and built them with modular components in mind. Yet another reason for my decision to swap this laptop for my more “locked down” X260.</p> + +<blockquote> +<p>Note: I’m not sure how important this is, but I made sure to set my WiFi hardware toggle switch into the “ON” position before doing any of the other steps.</p> </blockquote> + <p>You can follow the very beautiful visual instructions provided by Lenovo below. Just remember to always power off you machine and remove the battery before tinkering.</p> + <p><img src="/public/images/x201-1.png" alt="Unscrew the main keyboard and touchpad screws on the back of the laptop" /></p> + <p><img src="/public/images/x201-2.png" alt="Gently push the keyboard towards the screen to remove" /></p> + <p><img src="/public/images/x201-3.png" alt="The keyboard cable is very fragile, remove it carefully" /></p> + <p><img src="/public/images/x201-4.png" alt="Slide the palm rest down and away from the laptop to remove safely" /></p> + <p><img src="/public/images/x201-5.png" alt="Remove the two screws on the WiFi card to access it" /></p> -<h2>Electrical Tape Fixes Everything</h2> + +<h2 id="electrical-tape-fixes-everything">Electrical Tape Fixes Everything</h2> + <p>Now that the WiFi card has been safely removed from its port (you most likely do not need to disconnect the cables though!) it is time to block PIN20.</p> -<p>On the Centrino Advanced-N 6200 card PIN20 is located on the back side, since the front is designated to all odd-set pins. You'll need to cut a ridiculously thin piece of electrical tape to cover this <em>single</em> pin. I found this part to be the most taxing of my patience during the entire process. Just keep thinking happy thoughts and you can do it!</p> + +<p>On the Centrino Advanced-N 6200 card PIN20 is located on the back side, since the front is designated to all odd-set pins. You’ll need to cut a ridiculously thin piece of electrical tape to cover this <em>single</em> pin. I found this part to be the most taxing of my patience during the entire process. Just keep thinking happy thoughts and you can do it!</p> + <p><img src="/public/images/x201-tape.jpg" alt="My hacky electrical tape job on PIN20" /></p> + <p>Once it is on PIN20, place your card back into its port, rebuild you X201, pop in your battery and boot up! If things were done properly, your WiFi should now be rock solid.</p> -<p>Best of all, you don't have to worry about accidentally toggling your WiFi toggle switch - it does nothing! Mine is actually set in the "OFF" position all the time now.</p> + +<p>Best of all, you don’t have to worry about accidentally toggling your WiFi toggle switch - it does nothing! Mine is actually set in the “OFF” position all the time now.</p> + <p>Enjoy less flaky WiFi.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/build/x220/index.html b/build/x220/index.html index db7e373..dd8147f 100644 --- a/build/x220/index.html +++ b/build/x220/index.html @@ -1,46 +1,62 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>The X220 ThinkPad is the Best Laptop in the World</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>The X220 ThinkPad is the Best Laptop in the World</h1> +<h1 id="the-x220-thinkpad-is-the-best-laptop-in-the-world">The X220 ThinkPad is the Best Laptop in the World</h1> + <p>2023-09-26</p> -<p>The X220 ThinkPad is the greatest laptop ever made and you're wrong if you think otherwise. No laptop hardware has since surpassed the nearly perfect build of the X220. New devices continue to get thinner and more fragile. Useful ports are constantly discarded for the sake of "design". Functionality is no longer important to manufacturers. Repairability is purposefully removed to prevent users from truly "owing" their hardware.</p> -<p>It's a mess out there. But thank goodness I still have my older, second-hand X220.</p> -<h2>Specs</h2> -<p>Before I get into the details explaining why this laptop is the very best of its kind, let's first take a look at my machine's basic specifications:</p> + +<p>The X220 ThinkPad is the greatest laptop ever made and you’re wrong if you think otherwise. No laptop hardware has since surpassed the nearly perfect build of the X220. New devices continue to get thinner and more fragile. Useful ports are constantly discarded for the sake of “design”. Functionality is no longer important to manufacturers. Repairability is purposefully removed to prevent users from truly “owing” their hardware.</p> + +<p>It’s a mess out there. But thank goodness I still have my older, second-hand X220.</p> + +<h2 id="specs">Specs</h2> + +<p>Before I get into the details explaining why this laptop is the very best of its kind, let’s first take a look at my machine’s basic specifications:</p> + <ul> <li>CPU: Intel i7-2640M (4) @ 3.500GHz</li> <li>GPU: Intel 2nd Generation Core Processor</li> <li>Memory: 16GB DDR3</li> -<li>OS: Arch Linux / OpenBSD</li> +<li>OS: Arch Linux / OpenBSD</li> <li>Resolution: 1366x768</li> </ul> + <p>With that out of the way, I will break down my thoughts on the X220 into five major sections: Build quality, available ports, the keyboard, battery life, and repairability.</p> -<h2>Build Quality</h2> -<p>The X220 (like most of Lenovo's older X/T models) is built like a tank. Although the inner pieces are sourced from mostly plastic, the device is still better equipped to handle drops and mishandling compared to that of more fragile devices (such as the MacBook Air or Framework). This is made further impressive since the X220 is actually composed of many smaller interconnected pieces (more on this later).</p> -<p>A good litmus test I perform on most laptops is the "corner test". You grab the base corner of a laptop in its open state. The goal is to see if the device displays any noticeable give or flex. In the X220's case: it feels rock solid. The base remains stiff and bobbing the device causes no movement on the opened screen. I'm aware that holding a laptop in this position is certainly not a normal use case, but knowing it is built well enough to do so speaks volumes of its construction.</p> -<p>The X220 is also <em>not</em> a lightweight laptop. This might be viewed as a negative for most users, but I actually prefer it. I often become too cautious and end up "babying" thinner laptops out of fear of breakage. A minor drop from even the smallest height will severely damage these lighter devices. I have no such worries with my X220.</p> -<p>As for the laptop's screen and resolution: your mileage may vary. I have zero issues with the default display or the smaller aspect ratio. I wrote about how I <a href="/monitor">stopped using an external monitor</a>, so I might be a little biased.</p> -<p>Overall, this laptop is a device you can snatch up off your desk, whip into your travel bag and be on your way. The rugged design and bulkier weight help put my mind at ease - which is something I can't say for newer laptop builds.</p> -<h2>Ports</h2> -<p><figure> - <img src="/public/images/ports-everywhere.jpg" alt="Buzz Lightyear and Woody meme: 'Ports, Ports Everywhere'"> - <figcaption>Ports. Ports Everywhere.</figcaption> -</figure></p> -<p>I don't think I need to explain how valuable it is to have functional ports on a laptop. Needing to carrying around a bunch of dongles for ports that should already be <em>on the device</em> just seems silly.</p> + +<h2 id="build-quality">Build Quality</h2> + +<p>The X220 (like most of Lenovo’s older X/T models) is built like a tank. Although the inner pieces are sourced from mostly plastic, the device is still better equipped to handle drops and mishandling compared to that of more fragile devices (such as the MacBook Air or Framework). This is made further impressive since the X220 is actually composed of many smaller interconnected pieces (more on this later).</p> + +<p>A good litmus test I perform on most laptops is the “corner test”. You grab the base corner of a laptop in its open state. The goal is to see if the device displays any noticeable give or flex. In the X220’s case: it feels rock solid. The base remains stiff and bobbing the device causes no movement on the opened screen. I’m aware that holding a laptop in this position is certainly not a normal use case, but knowing it is built well enough to do so speaks volumes of its construction.</p> + +<p>The X220 is also <em>not</em> a lightweight laptop. This might be viewed as a negative for most users, but I actually prefer it. I often become too cautious and end up “babying” thinner laptops out of fear of breakage. A minor drop from even the smallest height will severely damage these lighter devices. I have no such worries with my X220.</p> + +<p>As for the laptop’s screen and resolution: your mileage may vary. I have zero issues with the default display or the smaller aspect ratio. I wrote about how I <a href="/monitor">stopped using an external monitor</a>, so I might be a little biased.</p> + +<p>Overall, this laptop is a device you can snatch up off your desk, whip into your travel bag and be on your way. The rugged design and bulkier weight help put my mind at ease - which is something I can’t say for newer laptop builds.</p> + +<h2 id="ports">Ports</h2> + +<p><img src="/public/images/ports-everywhere.jpg" alt="Buzz Lightyear and Woody meme: 'Ports, Ports Everywhere'" /></p> + +<p>I don’t think I need to explain how valuable it is to have functional ports on a laptop. Needing to carrying around a bunch of dongles for ports that should already be <em>on the device</em> just seems silly.</p> + <p>The X220 comes equipped with:</p> + <ul> <li>3 USB ports (one of those being USB3 on the i7 model)</li> <li>DisplayPort</li> @@ -51,27 +67,45 @@ <li>Ultrabay (SATA)</li> <li>Wi-Fi hardware kill-switch</li> </ul> + <p>Incredibly versatile and ready for anything I throw at it!</p> -<h2>Keyboard</h2> -<p>The classic ThinkPad keyboards are simply that: classic. I don't think anyone could argue against these keyboards being the golden standard for laptops. It's commendable how Lenovo managed to package so much functionality into such a small amount of real estate. Most modern laptops lack helpful keys such as <code>Print Screen</code>, <code>Home</code>, <code>End</code>, and <code>Scroll Lock</code>.</p> -<p>They're also an absolute <em>joy</em> to type on. The fact that so many people go out of their way to mod X230 ThinkPad models with X220 keyboards should tell you something... Why Lenovo moved away from these keyboards will always baffle me. (I know <em>why</em> they did it - I just think it's stupid).</p> + +<h2 id="keyboard">Keyboard</h2> + +<p>The classic ThinkPad keyboards are simply that: classic. I don’t think anyone could argue against these keyboards being the golden standard for laptops. It’s commendable how Lenovo managed to package so much functionality into such a small amount of real estate. Most modern laptops lack helpful keys such as <code>Print Screen</code>, <code>Home</code>, <code>End</code>, and <code>Scroll Lock</code>.</p> + +<p>They’re also an absolute <em>joy</em> to type on. The fact that so many people go out of their way to mod X230 ThinkPad models with X220 keyboards should tell you something… Why Lenovo moved away from these keyboards will always baffle me. (I know <em>why</em> they did it - I just think it’s stupid).</p> + <p>Did I mention these classic keyboards come with the extremely useful Trackpoint as well?</p> -<h2>Battery Life</h2> -<blockquote><p><strong>Author's Note:</strong> This section is very subjective. The age, quality, and size of the X220's battery can have a massive impact on benchmarks. I should also mention that I run very lightweight operating systems and use DWM as opposed to a heavier desktop environment. Just something to keep in mind.</p> + +<h2 id="battery-life">Battery Life</h2> + +<blockquote> +<p><strong>Author’s Note:</strong> This section is very subjective. The age, quality, and size of the X220’s battery can have a massive impact on benchmarks. I should also mention that I run very lightweight operating systems and use DWM as opposed to a heavier desktop environment. Just something to keep in mind.</p> </blockquote> -<p>The battery life on my own X220 is fantastic. I have a brand-new 9-cell that lasts for roughly 5-6 hours of daily work. Obviously these numbers don't come close to the incredible battery life of Apple's M1/M2 chip devices, but it's still quite competitive against other "newer" laptops on the market.</p> -<p>Although, even if the uptime was lower than 5-6 hours, you have the ability to carry extra batteries with you. The beauty of swapping out your laptop's battery without needing to <em>open up</em> the device itself is fantastic. Others might whine about the annoyance of carrying an extra battery in their travel bag, but doing so is completely <em>optional</em>. A core part of what makes the X220 so wonderful is user control and choice. The X220's battery is another great example of that.</p> -<h2>Repairability</h2> + +<p>The battery life on my own X220 is fantastic. I have a brand-new 9-cell that lasts for roughly 5-6 hours of daily work. Obviously these numbers don’t come close to the incredible battery life of Apple’s M1/M2 chip devices, but it’s still quite competitive against other “newer” laptops on the market.</p> + +<p>Although, even if the uptime was lower than 5-6 hours, you have the ability to carry extra batteries with you. The beauty of swapping out your laptop’s battery without needing to <em>open up</em> the device itself is fantastic. Others might whine about the annoyance of carrying an extra battery in their travel bag, but doing so is completely <em>optional</em>. A core part of what makes the X220 so wonderful is user control and choice. The X220’s battery is another great example of that.</p> + +<h2 id="repairability">Repairability</h2> + <p>The ability to completely disassemble and replace almost everything on the X220 has to be one of its biggest advantages over newer laptops. No glue to rip apart. No special proprietary tools required. Just some screws and plastic snaps. If someone as monkey-brained as me can completely strip down this laptop and put it back together again without issue, then the hardware designers have done something right!</p> + <p>Best of all, Lenovo provides a very detailed <a href="https://download.lenovo.com/pccbbs/mobiles_pdf/0a60739_01.pdf">hardware maintenance manual</a> to help guide you through the entire process.</p> -<p><figure> - <img src="/public/images/x220-pieces.jpeg" alt="My disassembled X220 laptop"> - <figcaption>My disassembled X220 when I was reapplying the CPU thermal paste.</figcaption> -</figure></p> -<h2>Bonus Round: Price</h2> -<p>I didn't list this in my initial section "breakdown" but it's something to consider. I purchased my X220 off eBay for $175 Canadian. While this machine came with a HDD instead of an SSD and only 8GB of total memory, that was still an incredible deal. I simply swapped out the hard-drive with an SSD I had on hand, along with upgrading the DDR3 memory to its max of 16.</p> + +<p>My disassembled X220 when I was reapplying the CPU thermal paste:</p> + +<p><img src="/public/images/x220-pieces.jpeg" alt="My disassembled X220 laptop" /></p> + +<h2 id="bonus-round-price">Bonus Round: Price</h2> + +<p>I didn’t list this in my initial section “breakdown” but it’s something to consider. I purchased my X220 off eBay for $175 Canadian. While this machine came with a HDD instead of an SSD and only 8GB of total memory, that was still an incredible deal. I simply swapped out the hard-drive with an SSD I had on hand, along with upgrading the DDR3 memory to its max of 16.</p> + <p>Even if you needed to buy those components separately you would be hard-pressed to find such a good deal for a decent machine. Not to mention you would be helping to prevent more e-waste!</p> -<h2>What More Can I Say?</h2> + +<h2 id="what-more-can-i-say">What More Can I Say?</h2> + <p>Obviously the title and tone of this article is all in good fun. Try not to take things so seriously! But, I still <em>personally</em> believe the X220 is one of, if not <em>the</em> best laptop in the world.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> diff --git a/header.html b/header.html index 08ea92c..530b0bb 100644 --- a/header.html +++ b/header.html @@ -1,16 +1,17 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>{{TITLE}}</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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;}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> + <a href="#menu">Menu ↓</a> </nav> <main> @@ -10,12 +10,9 @@ Core tools are Figma, HTML, CSS, JavaScript & WordPress. Currently improving my ## Design Thought Experiments -[Stop Using Hamburger Menus (Sometimes)](/hamburgers)<br> Common performance and accessibility issues caused by using hamburger menus. - -[Better Search Results](https://search.bt.ht)<br> Rethinking the UX flow of modern search engines. - -[My Coffee Maker Just Makes Coffee](/one-thing)<br> How products should focus on doing *one thing* very well. - -[Blog Anonymously](https://anon.bt.ht)<br>A basic starting point for those wishing to blog privately. +* [Stop Using Hamburger Menus (Sometimes)](/hamburgers) +* [Better Search Results](https://search.btxx.org) +* [My Coffee Maker Just Makes Coffee](/one-thing) +* [Blog Anonymously](https://anon.btxx.org) ## Articles & Tutorials diff --git a/index.md~ b/index.md~ new file mode 100644 index 0000000..e20049f --- /dev/null +++ b/index.md~ @@ -0,0 +1,18 @@ +# Making software better without sacrificing user experience. + +As a designer/developer hybrid, I help software companies improve their user experience and ship more performant products. I also actively maintain several [open source projects](https://git.sr.ht/~bt). + +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 [brain dumps](/dump). + +## Skills & Languages + +Core tools are Figma, HTML, CSS, JavaScript & WordPress. Currently improving my skills with Ruby, Rails, MySQL & PHP. I also enjoy tinkering with basic shell scripts and [Unix systems](/public/images/unix.gif). + +## Design Thought Experiments + +* [Stop Using Hamburger Menus (Sometimes)](/hamburgers): Common performance and accessibility issues caused by using hamburger menus. +* [Better Search Results](https://search.btxx.org): Rethinking the UX flow of modern search engines. +* [My Coffee Maker Just Makes Coffee](/one-thing): How products should focus on doing *one thing* very well. +* [Blog Anonymously](https://anon.btxx.org): A basic starting point for those wishing to blog privately. + +## Articles & Tutorials diff --git a/pages/uses.md b/pages/uses.md index 14ef20d..868936b 100644 --- a/pages/uses.md +++ b/pages/uses.md @@ -8,30 +8,31 @@ I'm proud to support open source products and privacy-respecting communities. Th |Service|Cost/year| |-------|--------------| -|[gandi](https://gandi.net)<br>Domain renewal|$172| -|[gandi mail](https://webmail.gandi.net)<br>Email service|$64| -|[sourcehut](https://sourcehut.org)<br>Open source code forge.|$60| -|[mullvad](https://mullvad.net)<br>Privacy focused VPN service provider.|$60| +|[gandi](https://gandi.net) - Domain renewal|$172| +|[gandi mail](https://webmail.gandi.net) - Email service|$64| +|[sourcehut](https://sourcehut.org) - Open source code forge.|$60| +|[mullvad](https://mullvad.net) - Privacy focused VPN service provider.|$60| ## Laptops -- **ThinkPad X260** (Daily Driver) - - CPU: Intel i5-6300U (4) @ 3.000GHz - - RAM: 32GB - - Storage: 128GB SSD - - OS: Arch Linux +- **M2 MacBook Air** (Daily Work) + - CPU: M2 Apple Silicon + - RAM: 16GB + - Storage: 256GB + - OS: macOS - **ThinkPad X220** - CPU: Intel Core i5 2540M @ 2.6 GHz - RAM: 16GB - Storage: 128GB SSD - - OS: Alpine Linux ([see build](https://git.sr.ht/~bt/alpine-suck)) + - OS: OpenBSD ([see build](https://git.btxx.org/open-suck/about)) + - OS: Alpine Linux ([see build](https://git.btxx.org/alpine-suck/about)) - **ThinkPad X201** - CPU: Intel Core i5-520M @ 2.9 GHz - RAM: 8GB - Storage: 128GB SSD - - OS: OpenBSD ([see build](https://git.sr.ht/~bt/open-suck)) + - OS: FreeBSD ([see build](https://git.btxx.org/suckless-beastie/about)) As you can tell: I *really* like ThinkPads... diff --git a/pages/uses.md~ b/pages/uses.md~ new file mode 100644 index 0000000..82c911f --- /dev/null +++ b/pages/uses.md~ @@ -0,0 +1,85 @@ +# Things I Use + +This page contains a somewhat up-to-date listing of all hardware and software that I currently use. Seeing similar pages on other people's personal websites have proved quite valuable to me, so I figured I would do the same! + +## Services + +I'm proud to support open source products and privacy-respecting communities. The list is limited right now, but the plan is to expand this over time. All prices are in CDN. + +|Service|Cost/year| +|-------|--------------| +|[gandi](https://gandi.net) - Domain renewal|$172| +|[gandi mail](https://webmail.gandi.net) - Email service|$64| +|[sourcehut](https://sourcehut.org) - Open source code forge.|$60| +|[mullvad](https://mullvad.net) - Privacy focused VPN service provider.|$60| + +## Laptops + +- **M2 MacBook Air** (Daily Work) + - CPU: M2 Apple Silicon + - RAM: 16GB + - Storage: 256GB + - OS: macOS + +- **ThinkPad X220** + - CPU: Intel Core i5 2540M @ 2.6 GHz + - RAM: 16GB + - Storage: 128GB SSD + - OS: OpenBSD ([see build](https://git.btxx.org/open-suck/about)) + +- **ThinkPad X201** + - CPU: Intel Core i5-520M @ 2.9 GHz + - RAM: 8GB + - Storage: 128GB SSD + - OS: FreeBSD ([see build](https://git.btxx.org/suckless-beastie/about)) + +As you can tell: I *really* like ThinkPads... + +## Accessories + +- Logitech Pebble Mouse +- Cheap USB microphone + +## "Mobile" Devices + +- iPhone SE (2020) +- ZTE Cymbal 2 +- Casio F-91W +- RPi Zero +- RPi Zero W +- RPi 400 + +## Gaming / Entertainment + +- Xbox Series S +- Nintendo Switch Lite +- Playstation 2 + +## Software + +I try my best to use only free and open source software. Unfortunately, some circumstances require me to use proprietary applications. + +### Open Source + +- aerc-mail +- Bitwarden +- dmenu +- dwm +- Firefox +- pass +- qutebrowser +- slstatus +- st +- surf +- Thunderbird +- vim +- VSCodium + +### Proprietary + +- Figma +- Gmail +- Slack +- Sublime Text +- Sublime Merge +- Zoom diff --git a/posts/Building_rbenv_on_OpenBSD_7.5.md b/posts/Building_rbenv_on_OpenBSD_7.5.md new file mode 100644 index 0000000..90f5479 --- /dev/null +++ b/posts/Building_rbenv_on_OpenBSD_7.5.md @@ -0,0 +1,47 @@ +# Building rbenv on OpenBSD 7.5 + +2024-06-02 + +I use Ruby (specifically with Jekyll) for a lot of my clubs/projects while using my personal laptop ([X220 ThinkPad](/posts/x220/)) which is runs OpenBSD. Since I recently upgraded to OpenBSD 7.5 I thought it could be helpful for others if I shared my process of building and using `rbenv` to install different Ruby versions. + +## Before We Build + +First, be sure to install the required packages in order to build from source, and then clone the core `rbenv` repo: + + pkg_add git gcc gmake libffi libyaml openssl + git clone https://github.com/rbenv/rbenv.git ~/.rbenv + +## Building `rbenv` + +Add `rbenv` to your PATH and initialize it (place this inside your `.bashrc` or `.zshrc` etc): + + export PATH="$HOME/.rbenv/bin:$PATH" + export PATH="$HOME/.rbenv/shims:$PATH" + export RUBY_CONFIGURE_OPTS="--with-openssl-dir=/usr/local" + eval "$(rbenv init -)" + +Then reload your shell (zsh in this example): + + source ~/.zshrc + +Next we will need to install `ruby-build` as a `rbenv` plugin. Clone the ruby-build repository into the rbenv plugins directory: + + git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build + +## Installing Ruby and Setting Our Version + +Now use `rbenv` to install the desired version of Ruby (we will get an older version for this example): + + rbenv install 3.3.0 + +If you run into issues, you may need to specify your openssl directory: + + RUBY_CONFIGURE_OPTS="--with-openssl-dir=/usr/local" rbenv install 3.3.0 + +If you're on a slower machine (like mine) this might take a little bit. Just grab a coffee or a snack while you wait! + +Then navigate to your project of choice and set the `local` Ruby version: + + rbenv local 3.3.0 + +That's it! If you'd prefer to set this version of Ruby for all projects going forward, simply replace `local` with `global`. diff --git a/posts/Installing_WordPress_on_NearlyFreeSpeech.md b/posts/Installing_WordPress_on_NearlyFreeSpeech.md new file mode 100644 index 0000000..4af9a4e --- /dev/null +++ b/posts/Installing_WordPress_on_NearlyFreeSpeech.md @@ -0,0 +1,166 @@ +# Installing WordPress on NearlyFreeSpeech + +2024-05-27 + +I recently went through the process of porting over my wife's small business website (built off of WordPress + Woocommerce) from EasyWP to NearlyFreeSpeech. Although the process was fairly easy-going, I thought I would post my complete process here. That way, others who might wish to make the same switch can avoid running into any minor bumps along the way. + +> Some of this information has been lifted from [the official NFS docs](https://members.nearlyfreespeech.net/tdarb/support/wordpress), but these pages require a membership to access + +### Download WordPress + +We will use the `wp-cli` that comes packaged with NearlyFreeSpeech (NFS): + +1. Connect to your site via SSH. +2. Change to the directory you want to be the base of your blog (e.g. /home/public if WordPress will be running the whole site, or /home/public/blog if you want to share the site with other content). + +For help using WP-CLI from the SSH command line, use this command: + + wp help + +To download and unpack the latest version of WordPress, enter the following command: + + wp core download + +## Create a MySQL Process and Database + +Follow the instructions in the NearlyFreeSpeech.NET FAQ to [create a MySQL process](https://members.nearlyfreespeech.net/faq?q=MySQL#MySQL) if you haven't already. + +Next, [create a new database](https://members.nearlyfreespeech.net/faq?q=CreateDatabase#CreateDatabase) within that process. Note the name of the process and the name of the database. + +**Important**: Do not use your own MySQL credentials to connect WordPress to your database. Instead, create a new user. This will protect your member password in the event that your site becomes compromised. + + +- Click on the [MySQL tab](https://members.nearlyfreespeech.net/mysql) in the member interface +- Click "[Open phpMyAdmin](https://phpmyadmin.nearlyfreespeech.net/" in the Actions box. +- Enter the DSN ("Server") of your MySQL Process, MySQL username, and MySQL password. The DSN and username can be found on the Process Information page in our member UI. +- Click on the "Users" tab. +- Click "Add user." (It's toward the bottom left of the page.) +- Give the user a descriptive name. We'll use exampledbuser here, but you should pick something better, like wpuser or something representative of your blog. +- Make sure to leave the Host: selectbox on "Any host." +- Click the "Generate" link to generate a nice strong password. +- Use cut and paste to copy the new password somewhere, you'll need it later. (We'll use dbpassword here.) +- Grant the following permissions to the new user: + - All the permissions except "file" in the "data" box, + - Everything in the "structure" box, and + - "LOCK TABLES" in the "administration" box. +- Click the "Go" button in the lower right. +- Exit phpMyAdmin. + +## Generate a WordPress Configuration File + +At the SSH command line (replace the examples with the info for the database and user you created above): + + wp core config --dbhost=example.db --dbname=exampledb --dbuser=exampledbuser --dbpass=dbpassword + chmod 644 wp-config.php + +## Run the WordPress Installation and Setting Permissions + +To get your permalinks to work properly, you must set up an .htaccess file. + + +1. Go to the Dashboard for your WordPress site. (e.g. https://www.example.com/wp-admin/index.php) +2. In the navigation sidebar, find Settings and, under that, Permalinks. +3. Select your preferred link style under "Common Settings." (We like "Day and name.") +4. Scroll down and select the "Save Changes" button. + +Next, create an `.htaccess` file for your WordPress site. We suggest doing this directly from the SSH command line using the cat shell command: + + cat >.htaccess <<NFSNRULES # This line is a shell command, not part of .htaccess! + RewriteEngine On + RewriteBase / + RewriteRule ^index\.php$ - [L] + RewriteCond %{REQUEST_FILENAME} !-f + RewriteCond %{REQUEST_FILENAME} !-d + RewriteRule . /index.php [L] + NFSNRULES + +If you prefer, you can copy-paste the text into an editor: + + RewriteEngine On + RewriteBase / + RewriteRule ^index\.php$ - [L] + RewriteCond %{REQUEST_FILENAME} !-f + RewriteCond %{REQUEST_FILENAME} !-d + RewriteRule . /index.php [L] + +We need to run the following commands in order to install, uninstall, activate, and deactivate plugins/themes from within the admin web GUI of WordPress: + + chgrp web .htaccess + chmod 664 .htaccess + chgrp -R web * + find . -type d -exec chmod 775 {} \; + find . -type f -exec chmod 664 {} \; + wp config set FS_METHOD direct + +## Enable File Uploading + +In your main WordPress installation folder enter the following SSH commands: + + cd wp-content + mkdir -p uploads + chgrp -R web uploads + chmod -R 775 uploads + +## Keeping WordPress Up-To-Date Automatically via Command Line + +It is **critically** important to keep your WordPress installation up-to-date including, if applicable, your theme and plugins. PHP, WordPress, and WordPress themes and plugins all have a track record of security problems. Most of those get fixed quickly, but if you don't update, you don't get the fixes. + +To help you keep WordPress up-to-date, NFS provides a streamlined script. + +This command, which must be run from an interactive ssh session, will set up our system to check your WordPress install (and themes & plugins) for you every day, and update them automatically when needed: + + wp-update.sh -a + +By default, it will tell you via email when updates happen. If you don't want that, just add `-q` (for "quiet") to the command. It will work silently unless there is an error. + +If you get errors from wp-cron (not wp-update) about failed automatic updates, you may also wish to add this to your wp-config.php file: + + define( 'AUTOMATIC_UPDATER_DISABLED', true ); + +This disables the insecure automatic updater bundled with recent versions of WordPress. + +**Do not attempt** to use WordPress's built-in ability to update itself through its admin panel. That insecure, outdated approach should not still exist. It does not work on NFS, which is a feature, not a bug. Getting it to work requires almost completely destroying your site's security, thereby ensuring that any undiscovered security flaw can enable hackers to completely obliterate your site. The update methods described here are faster, easier, and safer. + +## Logging In + +You should be able to navigate to `yourwebsite.com/wp-admin`, login and have everything work as expected. Congrats - enjoy your blog! + +Below you can find more advanced configuration to get the most out of your WordPress project. + +--- + +## Backing up WordPress + +NFS recommends backing up your WordPress setup on a regular basis. + +This is a two-step process. You must back up both the files and the database. + +### Backing up WordPress Files + +To back up your WordPress files directly from a Unix-like system of your own, you can use a command like: + + ssh yourmembername_siteshortname@ssh.phx.nearlyfreespeech.net tar -C /home/public -cvf - . | gzip >name-of-wordpress-backup.tar.gz + +To back up WordPress to a file on our system that you can transfer via SFTP to your own computer, you can use a command like: + + tar -C /home/public -cvzf /home/tmp/name-of-wordpress-backup.tar.gz . + +This assumes that your WordPress install is in the default location (`/home/public`). It will put your backup file in your `/home/tmp` directory. + +Do not try to back up your WordPress folder into your WordPress folder, as that occasionally results in attempts to use infinite disk space by trying to back up the backup of the backup of the backup of the... + +### Backing up the WordPress Database + +If you have a Unix-like system of your own (e.g. macOS or Linux), you can do the backup directly from there using your local command prompt using the MySQL username and password you created for WordPress: + + ssh yourmembername_siteshortname@ssh.phx.nearlyfreespeech.net wp db export - | gzip >wordpress-backup.sql.gz + +Or you can do it from the SSH command line via WP-CLI: + + wp db export /home/tmp/wordpress-backup.sql + +The `wordpress-backup.sql` file this generates will be stored in your site's `/home/tmp` directory. Download it from there to have a local copy. + +## That's It! + +Your WordPress site should be up-and-running now. Further customization or extra plugins/services can be freely added if so desired. Enjoy your site! diff --git a/posts/New_Domain_and_Code_Forge.md b/posts/New_Domain_and_Code_Forge.md new file mode 100644 index 0000000..f02db18 --- /dev/null +++ b/posts/New_Domain_and_Code_Forge.md @@ -0,0 +1,62 @@ +# New Domain and Code Forge + +2024-01-29 + +As you can clearly see, my site's domain has switched over to **btxx.org**. This post will go into details about the reason for this URL swap (spoilers: I'm a cheapskate) - but that isn't all. I have moved my personal git repositories over to my own hosting. I will explain the reasoning for that switch as well. + +But enough introductions, let's get into it! + +## bt.ht is No More + +I've abandoned `bt.ht`. Well, kind of. That domain doesn't expire until 2025, which works out nicely since I can keep a complete web forward active for the entire year. This will avoid such a radical switch, similar to what I did years ago with my "uglyduck" domain[^1]. Hopefully anyone who follows my dumb ramblings will have more than enough time to become familiar with the new URL. + +For reference, those interested in updating their RSS will need to use the latest URLs: + +- [RSS](https://btxx.org/index.rss) +- [Atom](https://btxx.org/index.atom) + +You have roughly a year to do so, since new posts should still automatically appear even with defaulting to the older URL (hooray for 301 redirects!). + +There were two core reasons for switching domains. The first was based off a change in ownership with my previous domain registrar, Gandi. You can read more details [here](https://news.ycombinator.com/item?id=35080777), but they were essentially bought out, then decided to cancel their free email service and raised their prices. Not many registrars support the `.ht` TLD, so moving to another provider was already proving to be difficult. Once my mind was made up that I didn't want to support such shady actions from a company, I thought even more about the concept of spending *so much* on a domain name in the first place. It was a novelty to have such a "short" domain, but that seems silly in hindsight. + +Just take a look at the differences in domain costs and email services below: + +|URL|Domain/year|Email/year|Total| +|---|-----------|----------|-----| +|bt.ht|$172|$60|$232| +|btxx.org|$17|$19|$36| + +By making this switch (for both my domain and email service) I would save a yearly total of **$196 USD**. This was a no-brainer. The minute I did the math I thought, "Hell, I'm already moving everything to a different registrar *and* I need to look for a separate email provider...why not just start fresh with a new, *cheaper* domain?" + +So that's what I've done. + +## My Own Code Forge + +As some people in the open source community might already be aware, [sourcehut](https://sourcehut.org) had a major outage a couple weeks back. It lasted a few days and all services were impacted. This meant that all publicly hosted websites, build processes and `git` repositories were unavailable. It was no fault of sourcehut of course, they were viciously attacked for no *real* reason. + +But this outage did get me thinking about what it means to "control" my own code. I always liked the idea of hosting my own git projects but relied on third-party services since they were more convenient. The problem with entrusting anything, not just code storage, to third-party services is lack of oversight. You really have no idea what is happening behind the scenes. You don't control your own backups. You don't have the freedom to tweak UI or user flow of your project views (which I understand is certainly an edge-case). + +These thoughts lead me to research some "self-hosted" code forge options. My main contenders were: + +- GitWeb +- cgit +- Gitea + +I'll save you the suspense: I went with cgit. Getting GitWeb configured properly was giving me a lot of issues and Gitea seemed overkill for my person needs. I host through NearlyFreeSpeech (running FreeBSD) and they had a decent tutorial for setting cgit up on their servers. I've updated my own wiki for those interested in doing something similar: [read the full step-by-step instructions for setting up cgit](/wiki/cgit). + +I still need to go through most of the existing projects on sourcehut and update their READMEs and purge the contents. The last thing I want to do is have users confused about which repo is the "real" one. + +Fore reference the my repos are now located here: [git.btxx.org](https://git.btxx.org) + +(I plan to place this in the main navigation soon...) + +## Mirror, Mirror on the Wall... + +I'm aware that to have extra protection from "downtime" that I should also mirror my code on separate forges. I plan to do this sometime in the future, but this isn't a major priority for me currently. When the time comes I'll be sure to update my repos referring to the mirrors (whatever platform that is I choose). + +## Room for Improvement + +My code forge is far from perfect. Mobile view is lacking, there is no dark mode support and things could be slightly more intuitive. But I love it. The beauty of hosting everything on my own is that I can improve these things myself. For now, I'm happy with the outcome! + + +[^1]: Someone oddly picked up that domain and piggybacked off the back-links. They happen to also be a designer...Guess the naming was that cool? diff --git a/posts/OpenBSD_is_a_Cozy_Operating_System.md b/posts/OpenBSD_is_a_Cozy_Operating_System.md new file mode 100644 index 0000000..93d70ec --- /dev/null +++ b/posts/OpenBSD_is_a_Cozy_Operating_System.md @@ -0,0 +1,32 @@ +# OpenBSD is a Cozy Operating System + +2024-04-11 + +<figure> +<img src="https://btxx.org/posts/OpenBSD_is_a_Cozy_Operating_System/open-suck-75.png" alt="Screenshot of OpenBSD 7.5 running dwm"> +<figcaption>OpenBSD 7.5 running dwm on my X220</figcaption> +</figure> + +With the recent release of OpenBSD 7.5, I decided to run through my [personal OpenBSD "installer"](https://git.btxx.org/open-suck/about/) for laptop/desktop devices. The project is built off of the `dwm` tiling window manager and only installs a few basic packages. The last time I updated it was with the release of 7.3, so it's been due for an minor rework. + +While making these minor changes, I remembered how incredibly easy the entire install process for OpenBSD is and how *cozy* the entire operating system feels. All the core systems just work out the box. Yes, you need to "patch" in WiFi with a firmware update, so you'll need an Ethernet connection during the initial setup. Yes, the default desktop environment is not intuitive or ideal for newcomers. + +But the positives heavily outweigh the negatives (in my opinion): + +- Incredibly secure operating system (No `xz` drama here...) +- Detailed documentation. Probably one of the best of any OS +- Much smaller codebase and small core team +- *Complete* operating system (kernel, userland utilities, libraries, applications combined) + +These points might not seem important to others, but they are to me. Maybe you're possibly interested in checking it out yourself? If you are, then read on... + +## Try it Yourself! + +I've tried my best to write up a simplified, noob-friendly guide on both setting up the core OpenBSD system, along with installing a simple `dwm` based desktop environment. These are both focused on personal devices (laptops/computers), so if you're looking for server-specific setups you won't find that here! + +You can find both of those wiki-pages below: + +- [Installing OpenBSD](https://btxx.org/wiki/openbsd/installation/) +- [Setting up a Desktop Environment for OpenBSD](https://btxx.org/wiki/openbsd/desktop_environment/) + +Some additional reading I highly recommend is: [c0ffee.net/blog/openbsd-on-a-laptop](https://www.c0ffee.net/blog/openbsd-on-a-laptop) diff --git a/posts/Please_Make_Your_Table_Headings_Sticky.md b/posts/Please_Make_Your_Table_Headings_Sticky.md new file mode 100644 index 0000000..b64928d --- /dev/null +++ b/posts/Please_Make_Your_Table_Headings_Sticky.md @@ -0,0 +1,26 @@ +# Please Make Your Table Headings Sticky + +2024-02-23 + +I often stumble upon large data sets or table layouts across the web. When these tables contain hundreds of rows of content, things become problematic once you start to scroll... + +[Link to video example of standard table header](/public/videos/not-fixed-header-tables.mp4) + +Look at that table header disappear! Now, if I scroll all the way down to item #300 (for example) will I remember what each column's data is associated with? If this is my first time looking at this table - probably not. Luckily we can fix this (no pun intended!) with a tiny amount of CSS. + +## Sticky Header + +Check it out: + +[Link to video example of fixed table header](/public/videos/fixed-header-tables.mp4) + +Pretty awesome, right? It might look like magic but it's actually very easy to implement. You only need to add 2 CSS properties on your `thead`: + + position: sticky; + top: 0; + +That's it! Best of all, `sticky` has [~96% global support](https://caniuse.com/?search=sticky) which means this isn't some "bleeding-edge" property and can safely support a ton of browsers. Not to mention the improved experience for your end-users! + +You can view a live demo of this table on the [CodePen example pen](https://codepen.io/bradleytaunt/pen/bGZyJBj). + +If you found this interesting, feel free to check out my other table-focused post: [Making Tables Responsive With Minimal CSS](https://btxx.org/posts/tables/) diff --git a/posts/Please_Make_Your_Table_Headings_Sticky.md~ b/posts/Please_Make_Your_Table_Headings_Sticky.md~ new file mode 100644 index 0000000..1e7a602 --- /dev/null +++ b/posts/Please_Make_Your_Table_Headings_Sticky.md~ @@ -0,0 +1,29 @@ +# Please Make Your Table Headings Sticky + +2024-02-23 + +I often stumble upon large data sets or table layouts across the web. When these tables contain hundreds of rows of content, things become problematic once you start to scroll... + +[Link to video example](/public/videos/not-fixed-header-tables.mp4) + +Look at that table header disappear! Now, if I scroll all the way down to item #300 (for example) will I remember what each column's data is associated with? If this is my first time looking at this table - probably not. Luckily we can fix this (no pun intended!) with a tiny amount of CSS. + +## Sticky Header + +Check it out: + + <video width="100%" controls> + <source src="/public/videos/fixed-header-tables.mp4" type="video/mp4"> +Your browser does not support the video tag. +</video> + +Pretty awesome, right? It might look like magic but it's actually very easy to implement. You only need to add 2 CSS properties on your `thead`: + + position: sticky; + top: 0; + +That's it! Best of all, `sticky` has [~96% global support](https://caniuse.com/?search=sticky) which means this isn't some "bleeding-edge" property and can safely support a ton of browsers. Not to mention the improved experience for your end-users! + +You can view a live demo of this table on the [CodePen example pen](https://codepen.io/bradleytaunt/pen/bGZyJBj). + +If you found this interesting, feel free to check out my other table-focused post: [Making Tables Responsive With Minimal CSS](https://btxx.org/posts/tables/) diff --git a/posts/Website_Backups_with_Apple_iCloud.md b/posts/Website_Backups_with_Apple_iCloud.md new file mode 100644 index 0000000..e045bfd --- /dev/null +++ b/posts/Website_Backups_with_Apple_iCloud.md @@ -0,0 +1,24 @@ +# Website Backups with Apple iCloud + +2024-02-16 + +My main work machine, an M2 MacBook Air, meshes really well with my iPhone SE (they are in the same ecosystem after all - duh!). Since both of these devices are Apple products, it makes sense that I pay for the optional iCloud service for extra storage. 50GB to be exact. I only need to bare minimum which costs just $1.68 a month, making this storage option cheaper than most cups of coffee these days. + +Recently I've been using iCloud as my "middle-man" backup system. I still have local, offline storage for most personal data but having additional off-site backups is never a bad thing. I make things easier for myself by taking advantage of `rsync`. You'll need to make sure you have that program installed before trying this yourself: + + # This assumes you have homebrew installed first + brew install rsync + +Then, whenever I feel like backing up an existing project or website I simply run: + + rsync -a user_name@ssh.webserver.domain:/home/var/www/ /Users/username/Library/Mobile\ Documents/com\~apple\~CloudDocs/Backups/site-backup + +> Note: The `-a` option tells `rsync` to sync directories recursively, transfer special and block devices, preserve symbolic links, modification times, groups, ownership, and permissions. + +The beautiful magic of `rsync`! Obviously, you'd want to properly name your directories (ie. `/Backups/site-backup`) for a cleaner structure and ensure that your iCloud directory is set correctly. (remember to read code before just copy-pasting!). With this approach you can backup entire server directories or be specific with each individual project folder. I would also recommend setting up some alias in your `.bashrc` or `.zshrc` etc. to make things more streamlined when running backups manually: + + alias site-backup="rsync -a user_name@ssh.webserver.domain:/home/var/www/ /Users/username/Library/Mobile\ Documents/com\~apple\~CloudDocs/Backups/site-backup" + # Then you simply run the following for a manual backup: + site-backup + +You can take this further by automating things via cron jobs, but for my use case that is a little overkill. Hopefully this helps anyone looking for a quick and dirty backup system, especially one that can piggyback of your existing iCloud that you might be paying for already. diff --git a/posts/x220.md b/posts/x220.md index 77c77c1..ef70da7 100755 --- a/posts/x220.md +++ b/posts/x220.md @@ -32,10 +32,7 @@ Overall, this laptop is a device you can snatch up off your desk, whip into your ## Ports -<figure> - <img src="/public/images/ports-everywhere.jpg" alt="Buzz Lightyear and Woody meme: 'Ports, Ports Everywhere'"> - <figcaption>Ports. Ports Everywhere.</figcaption> -</figure> + I don't think I need to explain how valuable it is to have functional ports on a laptop. Needing to carrying around a bunch of dongles for ports that should already be *on the device* just seems silly. @@ -74,10 +71,9 @@ The ability to completely disassemble and replace almost everything on the X220 Best of all, Lenovo provides a very detailed [hardware maintenance manual](https://download.lenovo.com/pccbbs/mobiles_pdf/0a60739_01.pdf) to help guide you through the entire process. -<figure> - <img src="/public/images/x220-pieces.jpeg" alt="My disassembled X220 laptop"> - <figcaption>My disassembled X220 when I was reapplying the CPU thermal paste.</figcaption> -</figure> +My disassembled X220 when I was reapplying the CPU thermal paste: + + ## Bonus Round: Price diff --git a/public/videos/fixed-header-tables.mp4 b/public/videos/fixed-header-tables.mp4 Binary files differnew file mode 100644 index 0000000..87fbdce --- /dev/null +++ b/public/videos/fixed-header-tables.mp4 diff --git a/public/videos/not-fixed-header-tables.mp4 b/public/videos/not-fixed-header-tables.mp4 Binary files differnew file mode 100644 index 0000000..2ebd7ee --- /dev/null +++ b/public/videos/not-fixed-header-tables.mp4 |