diff options
737 files changed, 42021 insertions, 0 deletions
@@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 Bradley Taunt + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..30e82be --- /dev/null +++ b/Makefile @@ -0,0 +1,14 @@ +build: + sh ./barf + rsync -r public/ build/public + rsync style.css build/style.css + +clean: + rm -rf build/* + +watch: + while true; do \ + ls -d .git/* * posts/* pages/* header.html | entr -cd make ;\ + done + +.PHONY: build clean watch @@ -0,0 +1,3 @@ +# bt.ht + +The personal blog of me, Bradley Taunt, built with [barf](https://barf.bt.ht) @@ -0,0 +1,105 @@ +#!/bin/sh +set -eu +MARKDOWN=smu +IFS=' ' + +# Create tab separated file with filename, title, creation date, last update +index_tsv() { + for f in "$1"/*.md + do + title=$(sed -n '/^# /{s/# //p; q}' "$f") + printf '%s\t%s\t%s\t%s\n' "$f" "${title:="No Title"}" + done +} + +index_html() { + # Print header + title=$(sed -n '/^# /{s/# //p; q}' index.md) + sed "s/{{TITLE}}/$title/" header.html + + # Intro text + $MARKDOWN index.md + + echo "<ul>" + + # Posts + while read -r f title created; do + link=$(echo "$f" | sed -E 's|.*/(.*).md|\1/|') + created=$(echo $(head -3 "$f" | tail -1)) + echo "<li>$created · <a href=\"$link\">$title</a></li>" + done < "$1" | sort -r + + echo "</ul>" + + # Print footer after post list + cat footer.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 +<?xml version="1.0" encoding="utf-8"?> +<feed xmlns="http://www.w3.org/2005/Atom"> + <title>$(sed -n '/^# /{s/# //p; q}' index.md)</title> + <link href="$domain/atom.xml" rel="self" /> + <updated>$(date +%FT%TZ)</updated> + <author> + <name>$(git config user.name)</name> + </author> + <id>$domain,$first_commit_date:default-atom-feed/</id> +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 +%Y-%m-%dT10:%M:%SZ) + + cat <<EOF + <entry> + <title>$title</title> + <content type="html">$content</content> + <link href="$domain/$post_link"/> + <id>$domain/$post_link</id> + <updated>$published_date</updated> + <published>$published_date</published> + </entry> +EOF + done < "$1" + + echo '</feed>' +} + +write_page() { + filename=$1 + directory=$(echo $(basename "$filename" .md)) + $(mkdir -p build/$directory) + target=$(echo "$filename" | sed -r 's|\w+/(.*).md|build/\1/index.html|') + created=$(echo $(head -3 "$filename" | tail -1)) + title=$2 + + $MARKDOWN "$filename" | \ + cat header.html - |\ + sed "s|{{TITLE}}|$title|" \ + > "$target" && cat footer.html >> "$target" +} + +rm -rf build && mkdir build + +# Blog posts +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 +while read -r f title created; do + write_page "$f" "$title" "$created" +done < build/posts.tsv + +# Pages +index_tsv pages > build/pages.tsv +while read -r f title created; do + write_page "$f" "$title" "$created" +done < build/pages.tsv diff --git a/build/$10/index.html b/build/$10/index.html new file mode 100644 index 0000000..917ab3e --- /dev/null +++ b/build/$10/index.html @@ -0,0 +1,71 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>Allow me to put my money where my mouth is and showcase my own $10 donation breakdown:</p> +<h2>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> +</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> +</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> +<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/1kb/index.html b/build/1kb/index.html new file mode 100644 index 0000000..36b7f7a --- /dev/null +++ b/build/1kb/index.html @@ -0,0 +1,72 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +</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:,"> +</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> +<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>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> +<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 new file mode 100644 index 0000000..76230c3 --- /dev/null +++ b/build/adguard/index.html @@ -0,0 +1,81 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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>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><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> +<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> +<pre><code>sudo apt update +</code></pre> +<p>...and if updates are in fact available, install them via:</p> +<pre><code>sudo apt upgrade +</code></pre> +<h2>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 +</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>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>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> +<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/af/index.html b/build/af/index.html new file mode 100644 index 0000000..3406140 --- /dev/null +++ b/build/af/index.html @@ -0,0 +1,60 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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>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> +</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>Creeping featurism can kill your product and the morale of your team. Avoid it like the plague!</p> +<h2>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><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"> + <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/alpine/index.html b/build/alpine/index.html new file mode 100644 index 0000000..44d5610 --- /dev/null +++ b/build/alpine/index.html @@ -0,0 +1,164 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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>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> +</blockquote> +<h2>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> +</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> +<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/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/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>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> +<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> +<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> +<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> +<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> +<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> +<pre><code>apk add flatpak +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> +<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 ~/.icons/capitaine-cursors</li> +<li>Copy the files over: + 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> +<ol> +<li>This is now included in my official installer script, but I originally had to install this manually.</li> +</ol> +<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/animated-card-tiles/index.html b/build/animated-card-tiles/index.html new file mode 100644 index 0000000..0ef7448 --- /dev/null +++ b/build/animated-card-tiles/index.html @@ -0,0 +1,329 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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><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>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 */ +.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>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 */ +.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>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; + } + .card-tile { + margin: 0 0 10px 0; + width: 100%; + } +} +</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> +</code></pre> +<p>And these color classes correlate to some new CSS styling:</p> +<pre><code>/* Blue Card */ +.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); +} +</code></pre> +<pre><code>/* Orange Card */ +.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); +} +</code></pre> +<pre><code>/* Green Card */ +.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>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 */ +.card-tile, +.card-tile .text-content { + transition: .3s ease all; +} +</code></pre> +<p>Done and done.</p> +<h2>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> +</code></pre> +<h3>CSS</h3> +<pre><code>.card-tiles-container { + display: flex; + font-size: 14px; + margin: 20px 0; +} +/* Shared transitions */ +.card-tile, +.card-tile .text-content { + transition: .3s ease all; +} +/* Default card tile styles */ +.card-tile { + border: 1px solid; + border-radius: 10px; + cursor: pointer; + height: 150px; + margin: 0 10px; + overflow: hidden; + position: relative; + width: 33.33%; +} +/* Blue Card */ +.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); +} +/* Orange Card */ +.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); +} +/* Green Card */ +.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); +} +/* 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; + 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); +} +/* All animations on hover */ +.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> +<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/animated-toggle-tabs/index.html b/build/animated-toggle-tabs/index.html new file mode 100644 index 0000000..a624b60 --- /dev/null +++ b/build/animated-toggle-tabs/index.html @@ -0,0 +1,115 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +</code></pre> +<h2>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'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'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"> + <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/atom.xml b/build/atom.xml new file mode 100644 index 0000000..e9c53e3 --- /dev/null +++ b/build/atom.xml @@ -0,0 +1,10541 @@ +<?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>2023-11-02T14:09:39Z</updated> + <author> + <name>Bradley Taunt</name> + </author> + <id>https://bt.ht,2022-10-31: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> +<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> +<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>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> +<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>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> +</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 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>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> +<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> + <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> +<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><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> +</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> +<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><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>Enjoy less flaky WiFi.</p></content> + <link href="https://bt.ht/x201"/> + <id>https://bt.ht/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> +<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>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> +<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( '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>$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> +<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> +</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 ); +</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>$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> +<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 +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 ); +} + +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></content> + <link href="https://bt.ht/wp-enqueue-for-beginners"/> + <id>https://bt.ht/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> + +<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> +<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> + <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> +<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>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 */ +} +</code></pre> +<h3>Pros</h3> +<ul> +<li><a href="https://caniuse.com/#search=inline-block">Full browser support</a> (as far back as IE6)</li> +<li>No floats needed</li> +</ul> +<h3>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> +<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>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> +</ul> +<h3>Cons</h3> +<ul> +<li>Some versions of IE struggle with <a href="https://caniuse.com/#search=flex-basis">browser support</a></li> +</ul> +<h2>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> + <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> +<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>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> +<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> + <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> +<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>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 "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> +<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; +</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> + <updated>2023-06-05T10:00:00Z</updated> + <published>2023-06-05T10: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> +<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><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>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> +<ol> +<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> +</ol></content> + <link href="https://bt.ht/use-text-not-icons"/> + <id>https://bt.ht/use-text-not-icons</id> + <updated>2021-12-17T10:00:00Z</updated> + <published>2021-12-17T10:00:00Z</published> + </entry> + <entry> + <title>Using User-Select</title> + <content type="html"><h1>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> +<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>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 */ +p.no-select { + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; +} + +/* 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> +<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> +<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> + <updated>2019-06-04T10:00:00Z</updated> + <published>2019-06-04T10: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> +<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> +</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> +<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> +<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><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> +<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 "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 +<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><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>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> + <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> +<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> +<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> +<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> +<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> + <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> +<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 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> + <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> +<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> +<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> +<pre><code>table { + 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>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 */ +@media(max-width: 800px) { + /* Hide the table headings */ + 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; /* 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 */ +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; +} + +/* Simple CSS for flexbox table on mobile */ +@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; /* additional padding to avoid heading overlap */ + position: relative; + width: 50%; + } + /* 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> +<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>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> + <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> +<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> +<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> +</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; + + &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; + + &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; + + &lt;!-- Full inner content of current tab item --&gt; + &lt;div class=&quot;tab-content&quot;&gt;Content goes here&lt;/div&gt; + + &lt;/div&gt; + +&lt;/div&gt; +</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; + + &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 */ +.tabs { + height: 100%; + min-height: 250px; + position: relative; +} + +/* Each tab items (includes heading &amp; 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 */ +.tab-input { + position: absolute; + visibility: hidden; +} + +/* The main tab headings */ +.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'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; + 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>/* Style the currently selected tab label */ +.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; +} + +/* 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 */ +.tabs { + height: 100%; + min-height: 250px; + position: relative; +} + +/* Each tab items (includes heading &amp; content) */ +.tab-item { + display: inline; +} + +/* Hide the default radio inputs */ +.tab-input { + position: absolute; + visibility: hidden; +} + +/* The main tab headings */ +.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; +} + +/* The inner tab content */ +.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; +} + +/* Style the currently selected tab label */ +.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; +} + +/* 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> +<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>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></content> + <link href="https://bt.ht/tabbed-content"/> + <id>https://bt.ht/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> +<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>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> +<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> +</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; + + &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; + +&lt;/div&gt; +</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 */ +.mario-block { + display: inline-block; + height: 80px; + margin-right: -7px; /* Fixes inline-block margin bug */ + position: relative; + width: 80px; +} + +/* 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 */ +.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>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> +<pre><code>.mario-block--question label { + cursor: pointer; +} +.mario-block--question .question-mark { + background-image: url('/public/images/mario-block-question-mark.svg'); + 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>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 */ +.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 */ +.mario-block input:checked + label .dot, +.mario-block input:checked + label .question-mark { + display: none; +} + +/* Shared pseudo element styling */ +.mario-block input:checked + label:before, +.mario-block input:checked + label:after { + content: ''; + height: 20px; + position: absolute; + transform: rotate(45deg); + width: 20px; +} + +/* Right dash */ +.mario-block input:checked + label:before { + border-right: 4px solid #070000; + right: 18px; + top: 15px; + transform: rotate(45deg); +} + +/* Left dash */ +.mario-block input:checked + label:after { + border-left: 4px solid #070000; + left: 18px; + top: 15px; + 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> + <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> +<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> +</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> +<li>working audio</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> +<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> +</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> +<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> +<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> +</ol></content> + <link href="https://bt.ht/suckless"/> + <id>https://bt.ht/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> +<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> +</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>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>(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 +</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 +</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> + <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> +<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><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> + <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> +<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> +</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>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>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> + <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> +<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>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> +</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>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> +<ul> +<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>Stay <em>static</em>, my friends!</p></content> + <link href="https://bt.ht/sticky-elements"/> + <id>https://bt.ht/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> +<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>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>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> + <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> +<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> +<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>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> +<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> +</ol></content> + <link href="https://bt.ht/srht2"/> + <id>https://bt.ht/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> +<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>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> +<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> + <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> +<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><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> +<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; + 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'); + +* { + box-sizing: border-box; +} + +body { + background: #333; + font-family: &quot;Sansation&quot;, sans-serif; + padding: 3rem 0; +} + +button { + appearance: none; + border: 0; + cursor: pointer; + font-family: &quot;Inconsolata&quot;, &quot;Consolas&quot;, mono; + font-size: 18px; + transition: 0.3s ease all; +} + +.outer-frame, +.screen { + display: block; + margin: 0 auto; + position: relative; +} + +.outer-frame { + background: #ccc url(&quot;https://preview.ibb.co/iS9nz7/screen_grunge.webp&quot;) 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: ''; + height: 538px; + left: 15px; + position: absolute; + top: 11px; + width: 720px; +} + +.screen { + background: #000 url(&quot;https://image.ibb.co/gOqSz7/screen_dust.webp&quot;) 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(&quot;https://s13.postimg.org/85ryuy1o7/dust.webp&quot;) 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: ''; + 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: '键'; + 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'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></content> + <link href="https://bt.ht/soma-terminal-css"/> + <id>https://bt.ht/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> +<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 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>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> +</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>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>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>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> +<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 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> +<p>Thanks for reading.</p> +<h2>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> +</ol></content> + <link href="https://bt.ht/slow"/> + <id>https://bt.ht/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> +<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>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>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> + <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> +<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> +<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> +</ul> +<h2>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>a.skip-content { + background: grey; + color: white; + left: -9999px; + padding: 0.5rem; + position: absolute; + top: 0; +} +</code></pre> +<h2>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 */ +} +</code></pre> +<h2>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> + <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> +<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>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: / + +- title: Articles +url: /articles/ + +- title: About +url: /about/ +</code></pre> +<h2>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; +{% 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> +<pre><code>{% for item in site.data.navigation %} + &lt;li&gt; + {% 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; + {% else %} + &lt;a href=&quot;{{ item.url }}&quot;&gt;&lt;span&gt;{{ item.title }}&lt;/span&gt;&lt;/a&gt; + {% endif %} + &lt;/li&gt; +{% endfor %} +</code></pre> +<pre><code>/* 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></content> + <link href="https://bt.ht/simple-jekyll-navigation"/> + <id>https://bt.ht/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> +<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>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> +<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> +<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> +<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> +<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>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; +</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; +</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> +<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> + <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> +<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> +<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> +</ol> +<h2>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> +</ol> +<h2>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> + <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> +<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> +<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> +<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; +</code></pre> +<h2>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:''; + 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/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 */ +.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> +<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> +<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> +<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> + <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> +<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 "shinobi website".</p> +<h2>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>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> +<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>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> +<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> +<p>Thanks for taking the time to read my jumbled thoughts.</p> +<h2>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> +</ol></content> + <link href="https://bt.ht/shinobi-website"/> + <id>https://bt.ht/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> +<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>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> + <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> +<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><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><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> +</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> + <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> +<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> +<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>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> +</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> + <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> +<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> +<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>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> +<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 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>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>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> +<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>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> + <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> +<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>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>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> + <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> +<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>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> +<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>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>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> +<p>You could easily expand upon these options, but for most elementary school task these are more than enough.</p> +<h2>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> +</ol></content> + <link href="https://bt.ht/schools"/> + <id>https://bt.ht/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> +<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>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>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> + <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> +<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; +</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>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;} + 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...</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>Thanks for reading and happy dark mode to you all!</p> +<h2>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>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> + <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> +<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>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 +</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 +</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> + <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> +<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>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> +<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; +</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>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;) +</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; +</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> +<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> +</ol></content> + <link href="https://bt.ht/rss-hacks"/> + <id>https://bt.ht/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> +<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> +<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> +</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> +<ol> +<li>https://shinobi.bt.ht/posts/patch-3.txt</li> +</ol></content> + <link href="https://bt.ht/rss-click"/> + <id>https://bt.ht/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> +<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>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; +} + +/* 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 +function setTheme(themeName) { + localStorage.setItem('theme', themeName); + document.documentElement.className = themeName; +} + +// Toggle between color themes +function toggleDefaultTheme() { + if (localStorage.getItem('theme') !== 'theme-default'){ + setTheme('theme-default'); + } +} +function toggleSecondTheme() { + if (localStorage.getItem('theme') !== 'theme-second'){ + setTheme('theme-second'); + } +} +function toggleThirdTheme() { + if (localStorage.getItem('theme') !== 'theme-third'){ + setTheme('theme-third'); + } +} + +// Immediately set the theme on initial load +(function () { + if (localStorage.getItem('theme') === 'theme-default') { + setTheme('theme-default'); + } + if (localStorage.getItem('theme') === 'theme-second') { + setTheme('theme-second'); + } + 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></content> + <link href="https://bt.ht/quick-dirty-theme-switcher"/> + <id>https://bt.ht/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> +<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>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> + <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> +<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>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>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> +<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="#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> +<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>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>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> +<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>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> +<ul> +<li><a href="https://wkhtmltopdf.org/">wkhtmltopdf</a></li> +</ul> +<h3>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 +</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><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>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> +</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>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> + <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> +<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><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>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>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>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> +<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 */ +body { + background: linear-gradient(#226AB6 0%, #144E8A 100%) no-repeat; + color: white; + display: block; + font-family: 'Source Sans Pro', sans-serif; + font-weight: 200; + height: 100vh; +} + +/* Wrapper to center content */ +.wrapper { + margin: 0 auto; + max-width: 800px; + padding: 4rem 0 0; +} + +/* Optional PS4 logo */ +.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'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:''; + 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>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> + <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> +<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>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>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 */ +.buttons-container { + background: #E0E9EE; + border-radius: 5px; + display: flex; + padding: 20px; + margin: 0 auto; + max-width: 300px; + width: 100%; +} + +/*Shared button styles */ +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%; +} + +/* Sign up button */ +button:first-child { + background: #2FBC3D; + margin-right: 10px; +} + +/* 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> +<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 */ +button:first-child { + background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%); +} + +/* Log in button */ +button:last-child { + background-image: linear-gradient(-180deg, #489FD2 0%, #0A6DAC 100%); +} +</code></pre> +<h2>More depth &amp; 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 */ +.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 */ +.buttons-container button { + text-shadow: 0 2px 4px rgba(0,0,0,0.30); +} +</code></pre> +<pre><code>/* 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 */ +.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 */ +.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%; +} + +/* Shared button styling */ +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%; +} + +/* Sign up button */ +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; +} + +/* 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> +<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> + <updated>2019-02-05T10:00:00Z</updated> + <published>2019-02-05T10: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> +<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>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 */ + 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>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> +<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> + <updated>2020-10-07T10:00:00Z</updated> + <published>2020-10-07T10:00:00Z</published> + </entry> + <entry> + <title>My Cheapskate Commenting System</title> + <content type="html"><h1>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> +<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> +<ul> +<li>No third party application needed</li> +<li>Privacy focused</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> +<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> + <updated>2022-02-03T10:00:00Z</updated> + <published>2022-02-03T10:00:00Z</published> + </entry> + <entry> + <title>Plain Text Emails, Please</title> + <content type="html"><h1>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>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> +</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><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> +</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> +<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>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>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> +</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> +</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>The results might just surprise you.</p> +<h2>Refs</h2> +<ol> +<li>This is the "latest" 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> + <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> +<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>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> +<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> +</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> +<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> + <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> +<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>Enough chit-chat - on to the build!</p> +<h2>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> +<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>Dremel rotary tool with soft sanding bits</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> +<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) +, 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> +<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> +</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>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> + <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> +<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>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> +<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 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>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> + <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> +<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> + <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> +<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> +<ul> +<li>a lightweight WordPress theme</li> +<li>two free WordPress plugins</li> +<li>cheap &amp; 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> +<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> +<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> +</ol> +<h2>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> +<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> +<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>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>Unlimited bandwidth</li> +<li>Backups (though not automatic)</li> +<li>SFTP access</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> +<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> + <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> +<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> +<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>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> +<p>Thanks for reading!</p></content> + <link href="https://bt.ht/pblog"/> + <id>https://bt.ht/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> +<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>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> +<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>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>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> +<ol> +<li>Free &amp; open source software</li> +</ol></content> + <link href="https://bt.ht/paid-mac-apps"/> + <id>https://bt.ht/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> +<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> +<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> +</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 */ +.main-container { + .child-container { + /* 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 */ +.main-container {} +.child-container {} +.sub-child-container {} +</code></pre> +<h3>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{} +} + +.link-item { + &amp;:hover{} + &amp;: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> + <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> +<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>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> +<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> +</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><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> + <updated>2020-09-09T10:00:00Z</updated> + <published>2020-09-09T10:00:00Z</published> + </entry> + <entry> + <title>Open Source Typeface Pairings</title> + <content type="html"><h1>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> + <updated>2018-01-25T10:00:00Z</updated> + <published>2018-01-25T10:00:00Z</published> + </entry> + <entry> + <title>Building openring with Jekyll Build</title> + <content type="html"><h1>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> +<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>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; + {{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; + {{end}} + &lt;/section&gt; + &lt;p class=&quot;attribution&quot;&gt; + 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; +.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; +} +&lt;/style&gt; +</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> +<h3>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> +<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 +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 +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> +<pre><code>{% raw %}{% include openring-out.html %}{% endraw %} +</code></pre> +<h2>Build It &amp; 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>Happy sharing!</p> +<h2>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> + <updated>2022-12-02T10:00:00Z</updated> + <published>2022-12-02T10:00:00Z</published> + </entry> + <entry> + <title>My Coffee Maker Just Makes Coffee</title> + <content type="html"><h1>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> +<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>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> +<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> + <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> +<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>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> +</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> + <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> +<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>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> +<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> + <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> +<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 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> +<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; +</code></pre> +<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; + 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>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; +</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> +<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 "arrow toggle" on <code>summary</code> elements by including the following:</p> +<pre><code>details &gt; summary { +list-style: none; +} +details &gt; 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> +<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> + <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> +<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> +<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> +</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> +<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>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> +<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> + <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> +<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> +<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> +</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> +<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) +<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> +</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>Hopefully this helps others trying to dynamically redirect their domains without the headache.</p> +<h2>Refs</h2> +<ol> +<li>I normally set this up through Github / git hosting</li> +</ol></content> + <link href="https://bt.ht/netlify-urls"/> + <id>https://bt.ht/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> +<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>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> +<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> +<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> +</ol> +<h2>The CSS</h2> +<p>Adding the property is extremely trivial, all you need is the following:</p> +<pre><code>/* Best practice for paragraphs */ +p + p { + text-indent: 1rem; /* whatever you want */ +} +</code></pre> +<h2>Let'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> + <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> +<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>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>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> +<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> +<ol> +<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> +</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>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>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> +</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>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: +</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> +<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> + <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> +<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>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> +<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> +</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> +<ul> +<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> +</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> +</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> +</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 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> +<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 / 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>First, clear the cache to avoid conflicting data:</p> +<pre><code>sync; echo 3 | sudo tee /proc/sys/vm/drop_caches +</code></pre> +<h3>Write</h3> +<p>Write script run:</p> +<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 +</code></pre> +<h3>Read</h3> +<p>Read script:</p> +<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 +</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>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> + <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> +<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>Example:</p> +<pre><code>.element { + 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></content> + <link href="https://bt.ht/multiple-css-background-images"/> + <id>https://bt.ht/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> +<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>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>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><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>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>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>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> + <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> +<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>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> +<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 +</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 +cd mongodb-tools +./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/ +</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> + <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> +<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>But overtime I came to somewhat dislike[^1] it and set out to change it.</p> +<h2>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>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> +<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>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>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> +<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> + <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> +<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>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 */ +ul { list-style: none; padding: 0; } +ul li { display: inline-block; position: relative; } + +/* minimal dropdown CSS */ +ul li &gt; ul { + left: -9999px; + position: absolute; + visibility: hidden; +} +ul li:hover &gt; ul, ul li:focus-within &gt; ul { + left: 0; + visibility: visible; +} +</code></pre> +<h2>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> + <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> +<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><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>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> +</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; + + &lt;!-- &quot;Z&quot; Letter Button --&gt; + &lt;button class=&quot;z&quot;&gt; + &lt;span&gt;Z&lt;/span&gt; + &lt;/button&gt; + +&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;); + +/* 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; +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; +} + +/* 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: ''; +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: 'Muli', 'Helvetica', sans-serif; +} + +/* 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 */ +.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%; +} + +/* Custom &quot;Z&quot; Letter styling */ +.z { + width: 260px; +} +.z span { + color: #9f9f9f; + font-size: 150px; +} +</code></pre> +<h2>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> + <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> +<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> +<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;] { + 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 */ +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'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> +<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 { + 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> + <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> +<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>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>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> +<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>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> +<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 "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> +<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> +<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> +</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> + <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> +<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>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> +<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 +</code></pre> +<p>and then run:</p> +<pre><code>git apply ~/Patches/&lt;saved-patches-mailbox-folder&gt;/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> + <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> +<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>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> +<pre><code>* { + box-sizing: border-box; +} +:root { + --row-distance: 42px; +} +</code></pre> +<pre><code>.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>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; + 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'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>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:''; + 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: ''; + 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 &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 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> +<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> + <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> +<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>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>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> +<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; +</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>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>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> +</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; +do +/opt/homebrew/bin/pandoc -o &quot;${f%.*}.html&quot; &quot;$f&quot; +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>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>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> + <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> +<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> +<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>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> +<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 / 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> +<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> + <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> +<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>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>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> +<pre><code>{% for collection in site.collections %} + &lt;!-- Our code goes here --&gt; +{% 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' %} + {% 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; + {% 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; + {% endfor %} + &lt;/ul&gt; + &lt;hr&gt; + {% 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>Enjoy looping through your Jekyll collections!</p> +<h2>Refs</h2> +<ol> +<li>Just the sections were statically rendered. All the recipes were pulled in dynamically - I'm not that insane!</li> +</ol></content> + <link href="https://bt.ht/loop"/> + <id>https://bt.ht/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> +<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> +</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> + <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> +<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>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; + 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> +<h3>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>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> + <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> +<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><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> +<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> +<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> +<ul> +<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> +<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/device as the media</li> +<li>Flash media</li> +<li>???</li> +<li>Profit!!</li> +</ol> +<h2>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>Press <strong>Enter</strong></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> +<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> +<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>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> + <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> +<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>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...</p> +<h2>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>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> +<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>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> + <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> +<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>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> +<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/ +</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 +</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> + <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> +<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>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>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> +<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> +</ul> +<h3>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> +</ul> +<h3>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> +</ul> +<h3>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> +</ul> +<h3>Documents</h3> +<ul> +<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></content> + <link href="https://bt.ht/learning-to-floss"/> + <id>https://bt.ht/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> +<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> +<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> +<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> + <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> +<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>Thanks for reading!</p></content> + <link href="https://bt.ht/launching-thriftyname"/> + <id>https://bt.ht/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> +<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>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> +<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 */ +.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=&quot;radio&quot;] { 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) { + opacity: 1; + z-index: 1; +} + +/* 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>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> +</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> + <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> +<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'); +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> +<pre><code>npm install jsincss-parent-selector qaffeine +</code></pre> +<h3>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') + +qaffeine( +{ + stylesheet: {}, + rules: { + parent + } +}, +'input.css', +'output.js', +'output.css' +) +</code></pre> +<h3>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'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> + <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> +<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>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><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> +</ul> +<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 +</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> +</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> +<ul> +<li>Download and install <code>FFmpeg</code> --&gt; <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></content> + <link href="https://bt.ht/jelly"/> + <id>https://bt.ht/jelly</id> + <updated>2022-03-12T10:00:00Z</updated> + <published>2022-03-12T10:00:00Z</published> + </entry> + <entry> + <title>Hosting a Jekyll Site on Sourcehut</title> + <content type="html"><h1>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>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>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> +<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>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> +<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 +packages: +- ruby-full +- ruby-dev +environment: +site: yourusername.srht.site +sources: +- https://git.sr.ht/~yourusername/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/_site + tar -cvz . &gt; ../../site.tar.gz +- upload: | + 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>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>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> + <updated>2021-12-06T10:00:00Z</updated> + <published>2021-12-06T10: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> +<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> +<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 - +</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 +</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 +</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> +<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> +<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>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>Then run the following inside your project:</p> +<pre><code>docker run -p 4000:4000 -v $(pwd):/site bretfisher/jekyll-serve +</code></pre></content> + <link href="https://bt.ht/jekyll"/> + <id>https://bt.ht/jekyll</id> + <updated>2022-09-19T10:00:00Z</updated> + <published>2022-09-19T10:00:00Z</published> + </entry> + <entry> + <title>Introducing PageRoast</title> + <content type="html"><h1>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 &amp; 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>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>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> +</ul></content> + <link href="https://bt.ht/introducing-pageroast"/> + <id>https://bt.ht/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> +<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>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> +<ul> +<li>free and open source (<a href="https://github.com/bradleytaunt/notez">github.com/bradleytaunt/notez</a>)</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>Hopefully you enjoy using it as well!</p></content> + <link href="https://bt.ht/introducing-notez"/> + <id>https://bt.ht/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> +<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> +<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> +<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's break it down below.</p> +<h2>First Contentful Paint &amp; 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> +<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> +<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>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> +<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> +<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> + <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> +<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>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> +<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> +<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> +</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> + <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> +<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>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> +<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> +<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 &gt; 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'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> + <updated>2020-07-07T10:00:00Z</updated> + <published>2020-07-07T10:00:00Z</published> + </entry> + <entry> + <title>Write HTML Like It's 1999</title> + <content type="html"><h1>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>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> +<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> +<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> +</ol></content> + <link href="https://bt.ht/html-like-1999"/> + <id>https://bt.ht/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> +<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 +Mode</a> where I explained how to implement +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>&lt;meta name=&quot;color-scheme&quot; content=&quot;dark light&quot;&gt; +</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>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 +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> + <updated>2023-04-11T10:00:00Z</updated> + <published>2023-04-11T10:00:00Z</published> + </entry> + <entry> + <title>Using HTML Validator Badges Again</title> + <content type="html"><h1>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>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> +<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> +<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> +<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> +<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> + <updated>2019-07-05T10:00:00Z</updated> + <published>2019-07-05T10:00:00Z</published> + </entry> + <entry> + <title>Goodbye WordPress, Hello Jekyll (Again)</title> + <content type="html"><h1>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> +<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> + +<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> + +<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> + +<ol start="4"> +<li><strong>Future proofing</strong></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> +<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> + +<ol start="2"> +<li><strong>Blog anywhere</strong></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> + <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> +<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> +<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> +<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; +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> +<p>Simple as that. Happy converting!</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> +</ul></content> + <link href="https://bt.ht/heif"/> + <id>https://bt.ht/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> +<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><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>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> +</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> + <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> +<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> +<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>Makes the lives of designers easier by tucking all items away on mobile 😛</li> +</ul> +<h3>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>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><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 */ +.sausage-links { + position: relative; +} + +/* The left and right &quot;faded&quot; pseudo elements */ +.sausage-links:before, .sausage-links:after { + content: ''; + 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; +} + +/* Basic flexbox to prevent items from breaking lines */ +.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>The Good</h3> +<ul> +<li>Extremely minimal amount of CSS required</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> +<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> + <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> +<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><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> +<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>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> +<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> +<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 */ +} +</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> +<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 { + 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>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> + <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> +<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> +</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>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 +</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>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> + <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> +<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>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; +</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>Now for the <em>fancy</em> stuff - the CSS!</p> +<h3>CSS</h3> +<pre><code>.gallery-wrapper { + position: relative; +} +.gallery-wrapper:before { + background: rgba(255,255,255,0.8); + content: &quot;Scroll / Swipe 🡢&quot;; + 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; +} +</code></pre> +<pre><code>.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>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><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> + <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> +<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> +<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> +<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>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> +<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> +<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>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>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> +<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>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> +</ol></content> + <link href="https://bt.ht/future-os-google"/> + <id>https://bt.ht/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> +<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><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> +<ul> +<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> +<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> +</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> +<p><img src="/public/images/prescription-ui-update-2.webp" alt="Layout UI with color" /></p> +<h2>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> + <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> +<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>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> + <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> +<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>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> +<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> +</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;!-- + 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; +</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> +<ol> +<li>Baseline styling (mobile)</li> +<li>Desktop styling</li> +</ol> +<h3>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 */ +:root { + --bar-color-1: #357EC7; + --bar-color-2: #E42217; + --bar-color-3: #4CC417; + --bar-color-4: #7D0541; + --bar-color-5: #FFD801; +} +</code></pre> +<pre><code>[data-id=&quot;flexbox-bar-graph&quot;] { + border-collapse: collapse; + margin: 4rem 0 6rem; + width: 100%; +} +[data-id=&quot;flexbox-bar-graph&quot;] caption { + text-align: left; +} +[data-id=&quot;flexbox-bar-graph&quot;] 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 { + text-align: left; +} +[data-id=&quot;flexbox-bar-graph&quot;] tbody th { + font-weight: normal; + font-style: italic; +} +[data-id=&quot;flexbox-bar-graph&quot;] tbody td { + text-align: right; +} +[data-id=&quot;flexbox-bar-graph&quot;] 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> +<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;] { + background: transparent; + display: block; + min-height: 400px; + padding: 0; + position: relative; + width: 100%; + } + + [data-id=&quot;flexbox-bar-graph&quot;] 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=&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=&quot;flexbox-bar-graph&quot;] 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=&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=&quot;flexbox-bar-graph&quot;] 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>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 { + min-height: auto; +} + +[data-layout=&quot;horizontal&quot;] tbody tr { + flex-direction: column; + padding: 0 40px; +} +[data-layout=&quot;horizontal&quot;] tbody tr th { + width: calc(100% - 80px); +} + +[data-layout=&quot;horizontal&quot;] tbody tr th { + text-align: left; + top: calc(100% + 20px); +} + +[data-layout=&quot;horizontal&quot;] tbody tr td { + flex-direction: row; + height: auto; + justify-content: start; + margin: 10px 0; +} + +[data-layout=&quot;horizontal&quot;] tbody tr td span { + height: 20px; + width: calc(var(--data-set) * 100%); +} + +[data-layout=&quot;horizontal&quot;] tbody tr td p { + margin-left: 10px; +} +</code></pre> +<h2>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> +</ul></content> + <link href="https://bt.ht/flexbox-bar-graphs"/> + <id>https://bt.ht/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> +<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>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; +</code></pre> +<h2>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> +<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> + <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> +<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>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>See you on the other side!</p></content> + <link href="https://bt.ht/february-updates"/> + <id>https://bt.ht/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> +<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> +<ul> +<li>GDPR, ePrivacy, PECR and CCPA compliance</li> +<li>ad-blocker bypasses (in a good way -&gt; zero impact on users)</li> +<li>anonymous visitor stats</li> +<li>software created by <a href="https://usefathom.com/about">indie developers</a></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> +<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> +</ol> +<p>And that's all you need.</p> +<h2>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> &gt; <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> +<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>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> + <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> +<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> +<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; +</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>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 */ + 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 */ +.main-orb:before, .main-orb:after { + border-radius: 200px 200px 9999px 9999px; + bottom: -10px; + content:''; + filter: blur(20px); + height: 40px; + position: absolute; + z-index: -1; +} +</code></pre> +<pre><code>/* 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 */ +.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>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></content> + <link href="https://bt.ht/fake-3d-elements-with-css"/> + <id>https://bt.ht/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> +<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>Enjoy ET-Jekyll!</p></content> + <link href="https://bt.ht/et-jekyll-theme"/> + <id>https://bt.ht/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> +<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> +<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> +<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> + <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> +<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>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> +<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 +update_config=1 + +network={ + ssid=&quot;WIFI_SSID&quot; + scan_ssid=1 + psk=&quot;WIFI_PASSWORD&quot; + 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> +<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> +<pre><code>sudo apt update +</code></pre> +<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> --&gt; <code>Hostname</code></li> +<li>Edit Password: navigate to <code>System Settings</code> --&gt; <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>This is the easy part:</p> +<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> +<pre><code>sudo shutdown now +</code></pre> +<h2>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> +<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>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> +<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> +</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> +<p>Best of luck blocking those pesky ads and trackers!</p> +<h2>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> +</ol></content> + <link href="https://bt.ht/eero"/> + <id>https://bt.ht/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> +<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> +<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> +<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> +<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> +<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'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> +<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>/* This is just the main slider base */ +.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:''; + height: 16px; + left: 2px; + position: absolute; + top: 2px; + transition: all ease .3s; + 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> +<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' */ + 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>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> +<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:''; + 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></content> + <link href="https://bt.ht/easy-toggle-switches"/> + <id>https://bt.ht/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> +<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>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; + +&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; + +&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; + +&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; +</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; +</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>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; +</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>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; + /* This 65px padding makes room for the custom input */ + 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'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:''; + height: 30px; + left: 20px; + position: absolute; + /* 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> +<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-repeat: no-repeat; + background-position: center; + background-size: 15px; +} +</code></pre> +<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; + 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:''; + 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('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> +<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('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAtMTUgMzAgOC41NzE0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PCEtLUdlbmVyYXRlZCBieSBJSlNWRyAoaHR0cHM6Ly9naXRodWIuY29tL2ljb25qYXIvSUpTVkcpLS0+PHBhdGggZD0iTTMwLC0xMi4zMjE0djMuMjE0MjljMCwwLjczNjYwNyAtMC4yNjIyNzcsMS4zNjcxOSAtMC43ODY4MywxLjg5MTc0Yy0wLjUyNDU1NCwwLjUyNDU1NCAtMS4xNTUxMywwLjc4NjgzMSAtMS44OTE3NCwwLjc4NjgzMWgtMjQuNjQyOWMtMC43MzY2MDcsMCAtMS4zNjcxOSwtMC4yNjIyNzcgLTEuODkxNzQsLTAuNzg2ODMxYy0wLjUyNDU1MywtMC41MjQ1NTMgLTAuNzg2ODMsLTEuMTU1MTMgLTAuNzg2ODMsLTEuODkxNzR2LTMuMjE0MjljMCwtMC43MzY2MDcgMC4yNjIyNzcsLTEuMzY3MTkgMC43ODY4MywtMS44OTE3NGMwLjUyNDU1NCwtMC41MjQ1NTMgMS4xNTUxMywtMC43ODY4MyAxLjg5MTc0LC0wLjc4NjgzaDI0LjY0MjljMC43MzY2MDcsMCAxLjM2NzE5LDAuMjYyMjc3IDEuODkxNzQsMC43ODY4M2MwLjUyNDU1MywwLjUyNDU1NCAwLjc4NjgzLDEuMTU1MTMgMC43ODY4MywxLjg5MTc0WiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg=='); +} +.radio-btn.negative:checked + .radio-label { + background: #FFF2F2; + border-color: #E75153; +} +.radio-btn.negative:checked + .radio-label:before { + background-color: #E75153; + 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></content> + <link href="https://bt.ht/easy-custom-radio-inputs"/> + <id>https://bt.ht/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> +<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>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; + 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; + 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; + 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; + 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; + +&lt;/label&gt; +</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> +</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; + + &lt;!-- #2 --&gt; + &lt;div&gt; + + &lt;!-- #2i --&gt; + &lt;span&gt;$&lt;/span&gt; + + &lt;!-- #2ii --&gt; + &lt;span id=&quot;total-cost-inner&quot;&gt;0&lt;/span&gt; + + &lt;!-- #2iii --&gt; + &lt;input id=&quot;output&quot; type=&quot;text&quot; value=&quot;0&quot; disabled/&gt; + + &lt;!-- #2iv --&gt; + &lt;span&gt;/mo&lt;/span&gt; + + &lt;/div&gt; + +&lt;/div&gt; +</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> +</ol> +<p>All that's all we need for the HTML!</p> +<h2>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:''; + height: 30px; + left: 20px; + position: absolute; + top: calc(50% - 15px); + transition: .3s ease background-color; + width: 30px; +} +.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;'); +} +.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('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;'); + 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>The checkbox label</h3> +<pre><code>/* +This is the main element for each checkbox &quot;container&quot;. +Inside it houses the title, description and price. +*/ +.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); +} + +/* 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 */ +.checkbox-btn { + position: absolute; + visibility: hidden; +} + +/* 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:''; + height: 30px; + left: 20px; + position: absolute; + top: calc(50% - 15px); + transition: .3s ease background-color; + width: 30px; +} + +/* +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 +*/ +.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;'); +} + +/* +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,&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;'); + 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> +<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; +} + +/* +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> +<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; + flex-wrap: wrap; + } + .checkbox-label span:last-child { + padding: 10px 0 0 0; + } +} +</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> +<pre><code>window.onload=function(){ + +// 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 &lt; inputs.length; i++) { + + inputs[i].onchange = function() { + + // 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); + + // 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 + + // 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></content> + <link href="https://bt.ht/dynamic-checkboxes"/> + <id>https://bt.ht/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> +<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> + <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> +<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> +<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> +<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> +</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> + <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> +<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>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> +<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>Easy sign up</li> +<li>Multiple themes to choose from</li> +</ul> +<h4>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>Easy sign up</li> +<li>No trackers, no javascript, no ads</li> +</ul> +<h4>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>No ads, no tracking</li> +<li>Open source</li> +</ul> +<h4>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> +<ul> +<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> +<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>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> +<ul> +<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> +<ul> +<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></content> + <link href="https://bt.ht/dump"/> + <id>https://bt.ht/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> +<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> +<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>Feels snappy and responsive</li> +<li>Based on WebKit NOT Chromium</li> +</ul> +<h2>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>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>As it stands now, this feels like something that should be an extension[^2], not a standalone browser.</p> +<h2>Refs</h2> +<ol> +<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></content> + <link href="https://bt.ht/duckduckno"/> + <id>https://bt.ht/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> +<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>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>Yeesh.</p></content> + <link href="https://bt.ht/dts"/> + <id>https://bt.ht/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> +<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> +<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> +<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> + <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> +<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><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 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><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>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>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>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> +<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> + <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> +<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> +<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: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> +<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 */ +@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...</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> +<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>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> +</ol></content> + <link href="https://bt.ht/default-html-style-updates"/> + <id>https://bt.ht/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> +<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><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; + 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; + 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; + 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; + 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; + 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> +<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> +<pre><code>form label { + display: block; +} +form input { + display: inline-block; + margin-bottom: 10px; + 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;] { + 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> +</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> +<p>Happy form building!</p></content> + <link href="https://bt.ht/default-brower-forms"/> + <id>https://bt.ht/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> +<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><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> +<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> +<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 <strong>want</strong> 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> +<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> + <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> +<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> +</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>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>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> +<h2>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>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> +<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> + <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> +<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>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> +<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'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> + <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> +<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); +} +</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> +<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> + <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> +<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> +<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> +<pre><code>.header { + border: 1px solid var(--base-color); +} + +.main-container { + background-color: var(--base-color); + 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>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> + <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> +<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><a href="https://codepen.io/bradleytaunt/pen/jOBzXMe">Live CodePen Example</a></p> +<h2>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; +</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'); +* { + box-sizing: border-box; +} + +html { + height: 100%; +} + +body { + background: #fffff8; + font-family: &quot;et-book&quot;, 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 / 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) { + table { + display: block; + position: relative; + margin-bottom: 25rem; + } + + 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; + } + + /* 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%; + } +} +</code></pre> +<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; + } + 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>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> + <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> +<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>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> +<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> +<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> +<ul> +<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> +<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> + <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> +<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> +<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> +</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>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> +</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>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>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>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> + <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> +<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> +<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 / 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><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> +</blockquote> +<h2>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><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> +</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>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> +<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> +<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>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> +<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><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> +<ul> +<li>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> +<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 +update_config=1 +country=US + +network={ + ssid=&quot;Your network name/SSID&quot; + psk=&quot;Your WPA/WPA2 security key&quot; + 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> +</ul> +<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> +<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>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> + +<ol start="3"> +<li>After that, select "Network Options" and change your device name</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 +</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 +</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> +<ul> +<li>Neomutt (emails)</li> +<li>Lynx (quick and simple web browsing)</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></content> + <link href="https://bt.ht/cheap-portable-pi"/> + <id>https://bt.ht/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> +<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> +<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> +<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; +} +</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> +</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; +</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> +<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> +<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> +</ul></content> + <link href="https://bt.ht/chasing-performance"/> + <id>https://bt.ht/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> +<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; +</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> +<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> +<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> + <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> +<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> +<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> +</ul> +<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> +<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> +<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> +<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> +<ul> +<li>longest to shortest</li> +<li>shortest to longest</li> +<li>pinned tabs</li> +</ul> +<h3>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> +<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> +<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> + <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> +<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>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> +</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'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>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>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></content> + <link href="https://bt.ht/bidirectional-scrolling"/> + <id>https://bt.ht/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> +<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> +<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 { + box-shadow: 0 4px 8px rgba(0,0,0,0.3); + /* Styles to make it less ugly */ + 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><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> +<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; +</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> +<pre><code>.box-container { + /* No box-shadow needed on this element anymore */ + /* Styles to make it less ugly */ + background: white; + border-radius: 10px; + border: 1px solid #eee; + height: 200px; + padding: 10px; + position: relative; + width: 250px; +} +</code></pre> +<h2>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 */ + 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> +<p><div class="box-container-depth"><span class="box-container-depth-inner"></span></div></p> +<h2>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 */ + 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> +<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> + <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> +<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><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><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> +<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; +</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 +</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 +</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> +<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>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>The final step is configuring a <code>CNAME</code> DNS setting through your registrar:</p> +<pre><code>@ -&gt; 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>Happy hosting!</p></content> + <link href="https://bt.ht/berg"/> + <id>https://bt.ht/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> +<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><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>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> +<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>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>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> +</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> + <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> +<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> +<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> +<ol> +<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> +<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> + <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> +<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><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; +do +/usr/local/bin/cwebp -q 85 &quot;$f&quot; -o &quot;${f%.*}.webp&quot; +done +</code></pre> +<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> +<p>Simple as that!</p> +<h2>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 +</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>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> +</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> + <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> +<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') + .pipe(sass({ + outputStyle: 'compressed' + }).on('error', sass.logError)) + .pipe(gulp.dest('_includes/assets/css/')); +}); + +/* Compile the assets */ +gulp.task('assets', gulp.parallel( + 'styles' +)); + +/* 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>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'); +</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> +<p>A gulp command line interface for us to interact with our terminal.</p> +<h4>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') +</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/')); +</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>/* +Compile the assets +*/ +gulp.task('assets', gulp.parallel( + 'styles' +)); +</code></pre> +<h2>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>/* +Build +*/ +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></content> + <link href="https://bt.ht/basic-gulp-build-for-sass"/> + <id>https://bt.ht/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> +<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> + <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> +<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> +<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://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'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 / 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>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> + <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> +<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> +<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: 'Lucida Grande', 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; +} +</code></pre> +<pre><code>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> +<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:''; + height: 50px; + left: 4%; + position: absolute; + top: 1px; + transition: all ease .3s; + width: 92%; +} +</code></pre> +<h3>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>Feel free to fork it or implement your own!</p></content> + <link href="https://bt.ht/aui"/> + <id>https://bt.ht/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> +<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 +pactl set-sink-volume @DEFAULT_SINK@ +5% +</code></pre> +<pre><code>// Volume Down +pactl set-sink-volume @DEFAULT_SINK@ -5% +</code></pre> +<pre><code>// 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> + <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> +<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> +<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> +<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=&quot;radio&quot;] { + 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'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 { + left: 4px; +} +input[type=&quot;radio&quot;]: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> + <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> +<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>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> +<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> +<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 */ +.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>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 */ +.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>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; + } + .card-tile { + margin: 0 0 10px 0; + width: 100%; + } +} +</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; +</code></pre> +<p>And these color classes correlate to some new CSS styling:</p> +<pre><code>/* Blue Card */ +.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); +} +</code></pre> +<pre><code>/* Orange Card */ +.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); +} +</code></pre> +<pre><code>/* Green Card */ +.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>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 */ +.card-tile, +.card-tile .text-content { + transition: .3s ease all; +} +</code></pre> +<p>Done and done.</p> +<h2>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> +<pre><code>.card-tiles-container { + display: flex; + font-size: 14px; + margin: 20px 0; +} +/* Shared transitions */ +.card-tile, +.card-tile .text-content { + transition: .3s ease all; +} +/* Default card tile styles */ +.card-tile { + border: 1px solid; + border-radius: 10px; + cursor: pointer; + height: 150px; + margin: 0 10px; + overflow: hidden; + position: relative; + width: 33.33%; +} +/* Blue Card */ +.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); +} +/* Orange Card */ +.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); +} +/* Green Card */ +.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); +} +/* 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; + 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); +} +/* All animations on hover */ +.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></content> + <link href="https://bt.ht/animated-card-tiles"/> + <id>https://bt.ht/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> +<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> +<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>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> +</blockquote> +<h2>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> +</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> +<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/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/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>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> +<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> +<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> +<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> +<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> +<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> +<pre><code>apk add flatpak +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> +<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 ~/.icons/capitaine-cursors</li> +<li>Copy the files over: + 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> +<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> + <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> +<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>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> +<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>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> +</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>Creeping featurism can kill your product and the morale of your team. Avoid it like the plague!</p> +<h2>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><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> + <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> +<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> +<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>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><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> +<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> +<pre><code>sudo apt update +</code></pre> +<p>...and if updates are in fact available, install them via:</p> +<pre><code>sudo apt upgrade +</code></pre> +<h2>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 +</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>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>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> + <updated>2022-11-04T10:00:00Z</updated> + <published>2022-11-04T10:00:00Z</published> + </entry> + <entry> + <title>Making a Website Under 1kB</title> + <content type="html"><h1>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>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; +</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; +</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> +<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>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> + <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> +<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>Allow me to put my money where my mouth is and showcase my own $10 donation breakdown:</p> +<h2>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> +</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> +</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> + <updated>2022-11-23T10:00:00Z</updated> + <published>2022-11-23T10:00:00Z</published> + </entry> +</feed> diff --git a/build/audio-hotkeys-on-linux-mint/index.html b/build/audio-hotkeys-on-linux-mint/index.html new file mode 100644 index 0000000..78de371 --- /dev/null +++ b/build/audio-hotkeys-on-linux-mint/index.html @@ -0,0 +1,51 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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 +pactl set-sink-volume @DEFAULT_SINK@ +5% +</code></pre> +<pre><code>// Volume Down +pactl set-sink-volume @DEFAULT_SINK@ -5% +</code></pre> +<pre><code>// Toggle Mute +pactl set-sink-mute @DEFAULT_SINK@ toggle +</code></pre> +<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/aui/index.html b/build/aui/index.html new file mode 100644 index 0000000..956b6a9 --- /dev/null +++ b/build/aui/index.html @@ -0,0 +1,113 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +</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> +<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: 'Lucida Grande', 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; +} +</code></pre> +<pre><code>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> +<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:''; + height: 50px; + left: 4%; + position: absolute; + top: 1px; + transition: all ease .3s; + width: 92%; +} +</code></pre> +<h3>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>Feel free to fork it or implement your own!</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/avoid/index.html b/build/avoid/index.html new file mode 100644 index 0000000..317d92f --- /dev/null +++ b/build/avoid/index.html @@ -0,0 +1,83 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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://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'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 / 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>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> +<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/base64-all-the-things/index.html b/build/base64-all-the-things/index.html new file mode 100644 index 0000000..48cf4d0 --- /dev/null +++ b/build/base64-all-the-things/index.html @@ -0,0 +1,78 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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"> + <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/basic-gulp-build-for-sass/index.html b/build/basic-gulp-build-for-sass/index.html new file mode 100644 index 0000000..623dde2 --- /dev/null +++ b/build/basic-gulp-build-for-sass/index.html @@ -0,0 +1,122 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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') + .pipe(sass({ + outputStyle: 'compressed' + }).on('error', sass.logError)) + .pipe(gulp.dest('_includes/assets/css/')); +}); + +/* Compile the assets */ +gulp.task('assets', gulp.parallel( + 'styles' +)); + +/* 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>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'); +</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> +<p>A gulp command line interface for us to interact with our terminal.</p> +<h4>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') +</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/')); +</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>/* +Compile the assets +*/ +gulp.task('assets', gulp.parallel( + 'styles' +)); +</code></pre> +<h2>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>/* +Build +*/ +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> +<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/batch-webp-conversion/index.html b/build/batch-webp-conversion/index.html new file mode 100644 index 0000000..a9ce6e2 --- /dev/null +++ b/build/batch-webp-conversion/index.html @@ -0,0 +1,87 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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 "$@" +do +/usr/local/bin/cwebp -q 85 "$f" -o "${f%.*}.webp" +done +</code></pre> +<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> +<p>Simple as that!</p> +<h2>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 +</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>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> +</ol> +<p>After following these steps, the issue should be resolved.</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/battery/index.html b/build/battery/index.html new file mode 100644 index 0000000..e8ab3ab --- /dev/null +++ b/build/battery/index.html @@ -0,0 +1,60 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +<ol> +<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> +<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> +<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/being-efficient/index.html b/build/being-efficient/index.html new file mode 100644 index 0000000..008a907 --- /dev/null +++ b/build/being-efficient/index.html @@ -0,0 +1,84 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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>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> +<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>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>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> +</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> +<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/berg/index.html b/build/berg/index.html new file mode 100644 index 0000000..f00560b --- /dev/null +++ b/build/berg/index.html @@ -0,0 +1,73 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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><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> +<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/" +</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 +</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 +</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> +<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>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>The final step is configuring a <code>CNAME</code> DNS setting through your registrar:</p> +<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>Happy hosting!</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/better-box-shadows/index.html b/build/better-box-shadows/index.html new file mode 100644 index 0000000..cfca3d3 --- /dev/null +++ b/build/better-box-shadows/index.html @@ -0,0 +1,160 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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 { + box-shadow: 0 4px 8px rgba(0,0,0,0.3); + /* Styles to make it less ugly */ + 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><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> +<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> +</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> +<pre><code>.box-container { + /* No box-shadow needed on this element anymore */ + /* Styles to make it less ugly */ + background: white; + border-radius: 10px; + border: 1px solid #eee; + height: 200px; + padding: 10px; + position: relative; + width: 250px; +} +</code></pre> +<h2>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 */ + 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> +<p><div class="box-container-depth"><span class="box-container-depth-inner"></span></div></p> +<h2>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 */ + 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> +<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"> + <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/bidirectional-scrolling/index.html b/build/bidirectional-scrolling/index.html new file mode 100644 index 0000000..1007e04 --- /dev/null +++ b/build/bidirectional-scrolling/index.html @@ -0,0 +1,67 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +</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'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>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>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> + <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/browser-history-sucks/index.html b/build/browser-history-sucks/index.html new file mode 100644 index 0000000..f1ad5fe --- /dev/null +++ b/build/browser-history-sucks/index.html @@ -0,0 +1,81 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +</ul> +<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> +<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> +<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> +<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> +<ul> +<li>longest to shortest</li> +<li>shortest to longest</li> +<li>pinned tabs</li> +</ul> +<h3>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> +<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> +<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> +<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/character-unit/index.html b/build/character-unit/index.html new file mode 100644 index 0000000..74de90b --- /dev/null +++ b/build/character-unit/index.html @@ -0,0 +1,62 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +</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> +<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> +<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> + <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/chasing-performance/index.html b/build/chasing-performance/index.html new file mode 100644 index 0000000..30e7436 --- /dev/null +++ b/build/chasing-performance/index.html @@ -0,0 +1,235 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +<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 <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> +</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> +</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> +</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> +</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> +<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> +<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> +</ul> +<footer role="contentinfo"> + <h2>Menu Navigation</h2> + <ul id="menu"> + <li><a href="/">Home</a></li> + <li><a href="/projects">Projects</a></li> + <li><a href="/uses">Uses</a></li> + <li><a href="/wiki">Wiki</a></li> + <li><a href="/resume">Resume</a></li> + <li><a href="/colophon">Colophon</a></li> + <li><a href="/now">Now</a></li> + <li><a href="/donate">Donate</a></li> + <li><a href="/atom.xml">RSS</a></li> + <li><a href="#top">↑ Top of the page</a></li> + </ul> + <small> + Built with <a href="https://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/cheap-portable-pi/index.html b/build/cheap-portable-pi/index.html new file mode 100644 index 0000000..8d49827 --- /dev/null +++ b/build/cheap-portable-pi/index.html @@ -0,0 +1,175 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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 / 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><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> +</blockquote> +<h2>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><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> +</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>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> +<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> +<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>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> +<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><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> +<ul> +<li>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> +<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 +update_config=1 +country=US + +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> +</ul> +<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> +<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>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> + +<ol start="3"> +<li>After that, select "Network Options" and change your device name</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 +</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 +</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> +<ul> +<li>Neomutt (emails)</li> +<li>Lynx (quick and simple web browsing)</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> +<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/chromebook-web-dev/index.html b/build/chromebook-web-dev/index.html new file mode 100644 index 0000000..66e7504 --- /dev/null +++ b/build/chromebook-web-dev/index.html @@ -0,0 +1,69 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +</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>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> +</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>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>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>For my current situation, all I need is my cheap little Chromebook.</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/colophon/index.html b/build/colophon/index.html new file mode 100644 index 0000000..57a6e54 --- /dev/null +++ b/build/colophon/index.html @@ -0,0 +1,49 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <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> +<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> +<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"> + <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/css-js-mistake/index.html b/build/css-js-mistake/index.html new file mode 100644 index 0000000..c256685 --- /dev/null +++ b/build/css-js-mistake/index.html @@ -0,0 +1,66 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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> +<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> +<ul> +<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> +<ol> +<li>Selected site based on my own personal preference</li> +<li>Referring to current users of the web</li> +</ol> +<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/css-slope-graphs/index.html b/build/css-slope-graphs/index.html new file mode 100644 index 0000000..0735119 --- /dev/null +++ b/build/css-slope-graphs/index.html @@ -0,0 +1,241 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><a href="https://codepen.io/bradleytaunt/pen/jOBzXMe">Live CodePen Example</a></p> +<h2>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> +</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'); +* { + 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 / 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) { + table { + display: block; + position: relative; + margin-bottom: 25rem; + } + + 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; + } + + /* 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> +<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>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> + <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/css-variables/index.html b/build/css-variables/index.html new file mode 100644 index 0000000..eb7d568 --- /dev/null +++ b/build/css-variables/index.html @@ -0,0 +1,63 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +<pre><code>.header { + border: 1px solid var(--base-color); +} + +.main-container { + background-color: var(--base-color); + 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>Get out there and have fun with some variables!</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/css-video-backgrounds/index.html b/build/css-video-backgrounds/index.html new file mode 100644 index 0000000..c52a5a6 --- /dev/null +++ b/build/css-video-backgrounds/index.html @@ -0,0 +1,50 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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); +} +</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> +<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> + <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/current-color/index.html b/build/current-color/index.html new file mode 100644 index 0000000..a28a733 --- /dev/null +++ b/build/current-color/index.html @@ -0,0 +1,63 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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'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"> + <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/cut-your-forms-in-half/index.html b/build/cut-your-forms-in-half/index.html new file mode 100644 index 0000000..5b6dab1 --- /dev/null +++ b/build/cut-your-forms-in-half/index.html @@ -0,0 +1,69 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +</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>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>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> +<h2>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>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> +<ul> +<li>Great place to deep-dive into UX form design: <a href="https://uxmovement.com/category/forms/">UX Movement</a></li> +</ul> +<footer role="contentinfo"> + <h2>Menu Navigation</h2> + <ul id="menu"> + <li><a href="/">Home</a></li> + <li><a href="/projects">Projects</a></li> + <li><a href="/uses">Uses</a></li> + <li><a href="/wiki">Wiki</a></li> + <li><a href="/resume">Resume</a></li> + <li><a href="/colophon">Colophon</a></li> + <li><a href="/now">Now</a></li> + <li><a href="/donate">Donate</a></li> + <li><a href="/atom.xml">RSS</a></li> + <li><a href="#top">↑ Top of the page</a></li> + </ul> + <small> + Built with <a href="https://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/death-of-personality/index.html b/build/death-of-personality/index.html new file mode 100644 index 0000000..7f38b6a --- /dev/null +++ b/build/death-of-personality/index.html @@ -0,0 +1,96 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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> +<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> +<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 <strong>want</strong> 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> +<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> +<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/default-brower-forms/index.html b/build/default-brower-forms/index.html new file mode 100644 index 0000000..48c8dfd --- /dev/null +++ b/build/default-brower-forms/index.html @@ -0,0 +1,133 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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"> + The option is pretty nice + </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"> + This option is the best + </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"> + I would like to subscribe to the weekly newsletter + </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>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> +<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 / 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> +<p>Happy form building!</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/default-html-style-updates/index.html b/build/default-html-style-updates/index.html new file mode 100644 index 0000000..3e18575 --- /dev/null +++ b/build/default-html-style-updates/index.html @@ -0,0 +1,103 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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: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> +<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 */ +@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...</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> +<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>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> +</ol> +<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/design-review-dropbox/index.html b/build/design-review-dropbox/index.html new file mode 100644 index 0000000..cbed5b3 --- /dev/null +++ b/build/design-review-dropbox/index.html @@ -0,0 +1,119 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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 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><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>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>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>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> +<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> +<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/disabling-comments-in-wordpress/index.html b/build/disabling-comments-in-wordpress/index.html new file mode 100644 index 0000000..577bf2b --- /dev/null +++ b/build/disabling-comments-in-wordpress/index.html @@ -0,0 +1,47 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +<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> + <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/donate/index.html b/build/donate/index.html new file mode 100644 index 0000000..d14c008 --- /dev/null +++ b/build/donate/index.html @@ -0,0 +1,52 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <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> +<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> +<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>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> + <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/dts/index.html b/build/dts/index.html new file mode 100644 index 0000000..6fea111 --- /dev/null +++ b/build/dts/index.html @@ -0,0 +1,51 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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>Yeesh.</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/duckduckno/index.html b/build/duckduckno/index.html new file mode 100644 index 0000000..f1534e0 --- /dev/null +++ b/build/duckduckno/index.html @@ -0,0 +1,66 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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>Feels snappy and responsive</li> +<li>Based on WebKit NOT Chromium</li> +</ul> +<h2>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>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>As it stands now, this feels like something that should be an extension[^2], not a standalone browser.</p> +<h2>Refs</h2> +<ol> +<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"> + <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/dump/index.html b/build/dump/index.html new file mode 100644 index 0000000..8e12b8f --- /dev/null +++ b/build/dump/index.html @@ -0,0 +1,119 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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>Easy sign up</li> +<li>Multiple themes to choose from</li> +</ul> +<h4>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>Easy sign up</li> +<li>No trackers, no javascript, no ads</li> +</ul> +<h4>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>No ads, no tracking</li> +<li>Open source</li> +</ul> +<h4>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> +<ul> +<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> +<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>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> +<ul> +<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> +<ul> +<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> +<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/dv/index.html b/build/dv/index.html new file mode 100644 index 0000000..a8554be --- /dev/null +++ b/build/dv/index.html @@ -0,0 +1,69 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +<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> +</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> +<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/dwm-gnome/index.html b/build/dwm-gnome/index.html new file mode 100644 index 0000000..8668e33 --- /dev/null +++ b/build/dwm-gnome/index.html @@ -0,0 +1,59 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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/dynamic-checkboxes/index.html b/build/dynamic-checkboxes/index.html new file mode 100644 index 0000000..9adb9f2 --- /dev/null +++ b/build/dynamic-checkboxes/index.html @@ -0,0 +1,409 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> + 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> + 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> + 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> +</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"> + + <!-- #2i --> + <span> + White-labeled Domain + <em>Use your own custom domain with SSL security included.</em> + </span> + + <!-- #2ii --> + <span>$49/mo</span> + +</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> +</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> + + <!-- #2 --> + <div> + + <!-- #2i --> + <span>$</span> + + <!-- #2ii --> + <span id="total-cost-inner">0</span> + + <!-- #2iii --> + <input id="output" type="text" value="0" disabled/> + + <!-- #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> +</ol> +<p>All that's all we need for the HTML!</p> +<h2>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:''; + height: 30px; + left: 20px; + position: absolute; + top: calc(50% - 15px); + transition: .3s ease background-color; + width: 30px; +} +.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>'); +} +.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('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; +} + +.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>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; + 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); +} + +/* 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 */ +.checkbox-btn { + position: absolute; + visibility: hidden; +} + +/* 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:''; + height: 30px; + left: 20px; + position: absolute; + top: calc(50% - 15px); + transition: .3s ease background-color; + width: 30px; +} + +/* +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 +*/ +.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>'); +} + +/* +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>'); + 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> +<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; +} + +/* +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> +<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; + flex-wrap: wrap; + } + .checkbox-label span:last-child { + padding: 10px 0 0 0; + } +} +</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> +<pre><code>window.onload=function(){ + +// 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++) { + + inputs[i].onchange = function() { + + // 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); + + // 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; + } + +} +} +</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> +<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/easy-custom-radio-inputs/index.html b/build/easy-custom-radio-inputs/index.html new file mode 100644 index 0000000..58dc8f4 --- /dev/null +++ b/build/easy-custom-radio-inputs/index.html @@ -0,0 +1,214 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> + +<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-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"> +</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>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> +</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>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; + /* This 65px padding makes room for the custom input */ + 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'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:''; + height: 30px; + left: 20px; + position: absolute; + /* 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> +<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-repeat: no-repeat; + background-position: center; + background-size: 15px; +} +</code></pre> +<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; + 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:''; + 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('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> +<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('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAtMTUgMzAgOC41NzE0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PCEtLUdlbmVyYXRlZCBieSBJSlNWRyAoaHR0cHM6Ly9naXRodWIuY29tL2ljb25qYXIvSUpTVkcpLS0+PHBhdGggZD0iTTMwLC0xMi4zMjE0djMuMjE0MjljMCwwLjczNjYwNyAtMC4yNjIyNzcsMS4zNjcxOSAtMC43ODY4MywxLjg5MTc0Yy0wLjUyNDU1NCwwLjUyNDU1NCAtMS4xNTUxMywwLjc4NjgzMSAtMS44OTE3NCwwLjc4NjgzMWgtMjQuNjQyOWMtMC43MzY2MDcsMCAtMS4zNjcxOSwtMC4yNjIyNzcgLTEuODkxNzQsLTAuNzg2ODMxYy0wLjUyNDU1MywtMC41MjQ1NTMgLTAuNzg2ODMsLTEuMTU1MTMgLTAuNzg2ODMsLTEuODkxNzR2LTMuMjE0MjljMCwtMC43MzY2MDcgMC4yNjIyNzcsLTEuMzY3MTkgMC43ODY4MywtMS44OTE3NGMwLjUyNDU1NCwtMC41MjQ1NTMgMS4xNTUxMywtMC43ODY4MyAxLjg5MTc0LC0wLjc4NjgzaDI0LjY0MjljMC43MzY2MDcsMCAxLjM2NzE5LDAuMjYyMjc3IDEuODkxNzQsMC43ODY4M2MwLjUyNDU1MywwLjUyNDU1NCAwLjc4NjgzLDEuMTU1MTMgMC43ODY4MywxLjg5MTc0WiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg=='); +} +.radio-btn.negative:checked + .radio-label { + background: #FFF2F2; + border-color: #E75153; +} +.radio-btn.negative:checked + .radio-label:before { + background-color: #E75153; + 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> +<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/easy-toggle-switches/index.html b/build/easy-toggle-switches/index.html new file mode 100644 index 0000000..5120d90 --- /dev/null +++ b/build/easy-toggle-switches/index.html @@ -0,0 +1,227 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +<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 */ +<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>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> +<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'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> +<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>/* This is just the main slider base */ +.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:''; + height: 16px; + left: 2px; + position: absolute; + top: 2px; + transition: all ease .3s; + 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> +<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' */ + 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>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> +</code></pre> +<h3>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:''; + 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> +<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/eero/index.html b/build/eero/index.html new file mode 100644 index 0000000..b1dec87 --- /dev/null +++ b/build/eero/index.html @@ -0,0 +1,130 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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 +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>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> +<pre><code>sudo apt update +</code></pre> +<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> +</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>This is the easy part:</p> +<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> +<pre><code>sudo shutdown now +</code></pre> +<h2>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> +<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>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> +<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> +</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> +<p>Best of luck blocking those pesky ads and trackers!</p> +<h2>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> +</ol> +<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/empty-table-cells/index.html b/build/empty-table-cells/index.html new file mode 100644 index 0000000..9e15e0e --- /dev/null +++ b/build/empty-table-cells/index.html @@ -0,0 +1,71 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +<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> +<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/et-jekyll-theme/index.html b/build/et-jekyll-theme/index.html new file mode 100644 index 0000000..7a75a0b --- /dev/null +++ b/build/et-jekyll-theme/index.html @@ -0,0 +1,43 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>Enjoy ET-Jekyll!</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/fake-3d-elements-with-css/index.html b/build/fake-3d-elements-with-css/index.html new file mode 100644 index 0000000..3eb02c5 --- /dev/null +++ b/build/fake-3d-elements-with-css/index.html @@ -0,0 +1,102 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<p>Prepare for your mind to be blown:</p> +<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>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 */ + 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 */ +.main-orb:before, .main-orb:after { + border-radius: 200px 200px 9999px 9999px; + bottom: -10px; + content:''; + filter: blur(20px); + height: 40px; + position: absolute; + z-index: -1; +} +</code></pre> +<pre><code>/* 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 */ +.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>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> + <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/fathom-analytics-netlify/index.html b/build/fathom-analytics-netlify/index.html new file mode 100644 index 0000000..9cab8a2 --- /dev/null +++ b/build/fathom-analytics-netlify/index.html @@ -0,0 +1,88 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<ul> +<li>GDPR, ePrivacy, PECR and CCPA compliance</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> +</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> +<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> +</ol> +<p>And that's all you need.</p> +<h2>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> > <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> +<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>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> +<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/february-updates/index.html b/build/february-updates/index.html new file mode 100644 index 0000000..1387a4f --- /dev/null +++ b/build/february-updates/index.html @@ -0,0 +1,44 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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>See you on the other side!</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/first-letter/index.html b/build/first-letter/index.html new file mode 100644 index 0000000..9efd443 --- /dev/null +++ b/build/first-letter/index.html @@ -0,0 +1,55 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +</code></pre> +<h2>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> +<p><a href="https://codepen.io/bradleytaunt/pen/gJYbev/">Live CodePen Example</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/flexbox-bar-graphs/index.html b/build/flexbox-bar-graphs/index.html new file mode 100644 index 0000000..a73e791 --- /dev/null +++ b/build/flexbox-bar-graphs/index.html @@ -0,0 +1,312 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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> +</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> + <!-- + 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> +</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> +<ol> +<li>Baseline styling (mobile)</li> +<li>Desktop styling</li> +</ol> +<h3>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 */ +:root { + --bar-color-1: #357EC7; + --bar-color-2: #E42217; + --bar-color-3: #4CC417; + --bar-color-4: #7D0541; + --bar-color-5: #FFD801; +} +</code></pre> +<pre><code>[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>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"] { + background: transparent; + display: block; + min-height: 400px; + padding: 0; + position: relative; + width: 100%; + } + + [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; + } +} +</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>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>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> +</ul> +<footer role="contentinfo"> + <h2>Menu Navigation</h2> + <ul id="menu"> + <li><a href="/">Home</a></li> + <li><a href="/projects">Projects</a></li> + <li><a href="/uses">Uses</a></li> + <li><a href="/wiki">Wiki</a></li> + <li><a href="/resume">Resume</a></li> + <li><a href="/colophon">Colophon</a></li> + <li><a href="/now">Now</a></li> + <li><a href="/donate">Donate</a></li> + <li><a href="/atom.xml">RSS</a></li> + <li><a href="#top">↑ Top of the page</a></li> + </ul> + <small> + Built with <a href="https://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/flexbox-grid/index.html b/build/flexbox-grid/index.html new file mode 100644 index 0000000..096f747 --- /dev/null +++ b/build/flexbox-grid/index.html @@ -0,0 +1,42 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> + <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/form-ui-improvements/index.html b/build/form-ui-improvements/index.html new file mode 100644 index 0000000..f0e7c9c --- /dev/null +++ b/build/form-ui-improvements/index.html @@ -0,0 +1,71 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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> +<ul> +<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> +<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> +</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> +<p><img src="/public/images/prescription-ui-update-2.webp" alt="Layout UI with color" /></p> +<h2>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> +<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/future-os-google/index.html b/build/future-os-google/index.html new file mode 100644 index 0000000..7ed69b7 --- /dev/null +++ b/build/future-os-google/index.html @@ -0,0 +1,97 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +<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>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> +<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> +<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>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>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> +<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>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> +</ol> +<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/gallery/index.html b/build/gallery/index.html new file mode 100644 index 0000000..31c7eaf --- /dev/null +++ b/build/gallery/index.html @@ -0,0 +1,99 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +</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>Now for the <em>fancy</em> stuff - the CSS!</p> +<h3>CSS</h3> +<pre><code>.gallery-wrapper { + position: relative; +} +.gallery-wrapper:before { + background: rgba(255,255,255,0.8); + content: "Scroll / 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; +} +</code></pre> +<pre><code>.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>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><a href="https://codepen.io/bradleytaunt/pen/ExLRyXz">Live CodePen Example</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/git-patches/index.html b/build/git-patches/index.html new file mode 100644 index 0000000..3409f1e --- /dev/null +++ b/build/git-patches/index.html @@ -0,0 +1,52 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +</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>Now simply open your terminal, navigate to your project and run:</p> +<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>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> + <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/goodbye-css-preprocessors/index.html b/build/goodbye-css-preprocessors/index.html new file mode 100644 index 0000000..295850b --- /dev/null +++ b/build/goodbye-css-preprocessors/index.html @@ -0,0 +1,82 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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> +<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>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> +<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> +<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 */ +} +</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> +<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 { + 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>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> +<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/hamburger-menu-alternative/index.html b/build/hamburger-menu-alternative/index.html new file mode 100644 index 0000000..1643de1 --- /dev/null +++ b/build/hamburger-menu-alternative/index.html @@ -0,0 +1,134 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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>Makes the lives of designers easier by tucking all items away on mobile 😛</li> +</ul> +<h3>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>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><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 */ +.sausage-links { + position: relative; +} + +/* The left and right "faded" pseudo elements */ +.sausage-links:before, .sausage-links:after { + content: ''; + 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; +} + +/* Basic flexbox to prevent items from breaking lines */ +.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>The Good</h3> +<ul> +<li>Extremely minimal amount of CSS required</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> +<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> +<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/hamburgers/index.html b/build/hamburgers/index.html new file mode 100644 index 0000000..a7934b6 --- /dev/null +++ b/build/hamburgers/index.html @@ -0,0 +1,62 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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>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> +</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> +<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/heif/index.html b/build/heif/index.html new file mode 100644 index 0000000..4f07bf3 --- /dev/null +++ b/build/heif/index.html @@ -0,0 +1,71 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +<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 "$@" +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> +<p>Simple as that. Happy converting!</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> +</ul> +<footer role="contentinfo"> + <h2>Menu Navigation</h2> + <ul id="menu"> + <li><a href="/">Home</a></li> + <li><a href="/projects">Projects</a></li> + <li><a href="/uses">Uses</a></li> + <li><a href="/wiki">Wiki</a></li> + <li><a href="/resume">Resume</a></li> + <li><a href="/colophon">Colophon</a></li> + <li><a href="/now">Now</a></li> + <li><a href="/donate">Donate</a></li> + <li><a href="/atom.xml">RSS</a></li> + <li><a href="#top">↑ Top of the page</a></li> + </ul> + <small> + Built with <a href="https://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/hello-jekyll/index.html b/build/hello-jekyll/index.html new file mode 100644 index 0000000..c15154a --- /dev/null +++ b/build/hello-jekyll/index.html @@ -0,0 +1,73 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> + +<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> + +<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> + +<ol start="4"> +<li><strong>Future proofing</strong></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> +<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> + +<ol start="2"> +<li><strong>Blog anywhere</strong></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> +<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/html-dark-mode/index.html b/build/html-dark-mode/index.html new file mode 100644 index 0000000..5ea7a85 --- /dev/null +++ b/build/html-dark-mode/index.html @@ -0,0 +1,57 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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 +Mode</a> where I explained how to implement +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"> +</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>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 +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"> + <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/html-like-1999/index.html b/build/html-like-1999/index.html new file mode 100644 index 0000000..b24d2fd --- /dev/null +++ b/build/html-like-1999/index.html @@ -0,0 +1,83 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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> +<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> +</ol> +<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/html5-validator-badge/index.html b/build/html5-validator-badge/index.html new file mode 100644 index 0000000..3b872fc --- /dev/null +++ b/build/html5-validator-badge/index.html @@ -0,0 +1,65 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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> +<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> +<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> +<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> +<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/improving-githubs-new-design/index.html b/build/improving-githubs-new-design/index.html new file mode 100644 index 0000000..6f4aa02 --- /dev/null +++ b/build/improving-githubs-new-design/index.html @@ -0,0 +1,98 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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> +<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 > 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'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"> + <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/improving-receipt-ux/index.html b/build/improving-receipt-ux/index.html new file mode 100644 index 0000000..d1c8779 --- /dev/null +++ b/build/improving-receipt-ux/index.html @@ -0,0 +1,65 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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> +<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> +</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> +<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/improving-tufte-jekyll/index.html b/build/improving-tufte-jekyll/index.html new file mode 100644 index 0000000..84b89be --- /dev/null +++ b/build/improving-tufte-jekyll/index.html @@ -0,0 +1,99 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +<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's break it down below.</p> +<h2>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> +<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> +<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>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> +<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> +<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> +<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/index.html b/build/index.html new file mode 100644 index 0000000..6830997 --- /dev/null +++ b/build/index.html @@ -0,0 +1,215 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <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> +<ul> +<li>2023-11-02 · <a href="dwm-gnome/">Bringing dwm Shortcuts to GNOME</a></li> +<li>2023-09-26 · <a href="x220/">The X220 ThinkPad is the Best Laptop in the World</a></li> +<li>2023-09-11 · <a href="mongodb-arch/">Installing Older Versions of MongoDB on Arch Linux</a></li> +<li>2023-07-21 · <a href="heif/">Converting HEIF Images with macOS Automator</a></li> +<li>2023-06-24 · <a href="seven-years/">Blogging for 7 Years</a></li> +<li>2023-06-13 · <a href="battery/">Improving Laptop Battery Performance on OpenBSD</a></li> +<li>2023-06-05 · <a href="vscode/">Running VSCode in Chromium on OpenBSD</a></li> +<li>2023-05-19 · <a href="luba/">My Robotic Mower Woes</a></li> +<li>2023-05-11 · <a href="mail/">Working with `git` Patches in Apple Mail</a></li> +<li>2023-05-05 · <a href="hamburgers/">Stop Using Hamburger Menus (Sometimes)</a></li> +<li>2023-05-01 · <a href="slabtop/">Converting My X201 ThinkPad into a Slabtop</a></li> +<li>2023-04-25 · <a href="git-patches/">Applying Email-Based Git Patches in Evolution on Linux</a></li> +<li>2023-04-13 · <a href="sublime/">Launching Sublime Text with dmenu on Alpine Linux</a></li> +<li>2023-04-11 · <a href="html-dark-mode/">HTML Dark Mode</a></li> +<li>2023-04-02 · <a href="x201/">Bypassing the WiFi Hardware Switch on the Lenovo X201</a></li> +<li>2023-03-16 · <a href="rvm/">Installing Ruby with RVM on Alpine Linux</a></li> +<li>2023-03-14 · <a href="webfonts/">Stop Using Custom Web Fonts</a></li> +<li>2023-03-09 · <a href="mango/">Replacing My Eero Mesh Network with Two Mangos</a></li> +<li>2023-03-03 · <a href="monitor/">Why I Stopped Using an External Monitor</a></li> +<li>2023-02-08 · <a href="dv/">Dynamic Viewports with CSS</a></li> +<li>2023-01-09 · <a href="one-thing/">My Coffee Maker Just Makes Coffee</a></li> +<li>2022-12-23 · <a href="suckless/">I Want to Suckless and You Can Too</a></li> +<li>2022-12-08 · <a href="alpine/">Adventures in Creating a Minimal Alpine Linux Installer</a></li> +<li>2022-12-02 · <a href="openring/">Building openring with Jekyll Build</a></li> +<li>2022-11-23 · <a href="$10/">Do You Have an Extra $10?</a></li> +<li>2022-11-22 · <a href="slow/">Embracing Slow Tech</a></li> +<li>2022-11-14 · <a href="srht2/">Migrating from GitHub to sourcehut</a></li> +<li>2022-11-07 · <a href="spec/">Never Do Spec Work for Free</a></li> +<li>2022-11-04 · <a href="adguard/">Setting Up AdGuard Home with Eero</a></li> +<li>2022-10-14 · <a href="af/">Avoiding Featurism</a></li> +<li>2022-10-03 · <a href="gallery/">Simplifying the Craigslist Gallery</a></li> +<li>2022-09-22 · <a href="notice/">RE: Creating a Simple HTML/CSS Notice Box</a></li> +<li>2022-09-20 · <a href="lf/">Installing Custom Fonts on Linux from the Command Line</a></li> +<li>2022-09-19 · <a href="jekyll/">Setup Jekyll from Scratch on a New Linux System</a></li> +<li>2022-09-10 · <a href="dump/">Don't Make a Blog, Make a Brain Dump</a></li> +<li>2022-09-08 · <a href="avoid/">A Warning for New Designers: Avoid Dribbble</a></li> +<li>2022-09-02
· <a href="windows/">Setting Up Jekyll on Windows
</a></li> +<li>2022-08-12 · <a href="loop/">Looping Through Jekyll Collections</a></li> +<li>2022-08-02 · <a href="1kb/">Making a Website Under 1kB</a></li> +<li>2022-07-29 · <a href="berg/">Hosting with Codeberg Pages</a></li> +<li>2022-07-14 · <a href="linux-love/">The Linux Desktop is Hard to Love</a></li> +<li>2022-07-06 · <a href="pblog/">Yet Another Static Site Generator Switch</a></li> +<li>2022-06-29 · <a href="paid-mac-apps/">Happily Paying For macOS Apps</a></li> +<li>2022-06-20 · <a href="rss-click/">Clickable Links Inside XML</a></li> +<li>2022-05-30 · <a href="schools/">Schools Should Be Using Open Source Software</a></li> +<li>2022-05-23 · <a href="rss-hacks/">RSS Hacks With XSLT</a></li> +<li>2022-05-17 · <a href="duckduckno/">Two Weeks with the DuckDuckGo Browser</a></li> +<li>2022-05-13 · <a href="shinobi-website/">This Site is Now a Shinobi Website</a></li> +<li>2022-04-18 · <a href="safari-default-dark-mode/">Dear Apple, Please Fix Safari's Default Dark Mode Link Color</a></li> +<li>2022-03-21 · <a href="my-static-blog-publishing-setup/">My Static Blog Publishing Setup and an Apology to RSS Subscribers</a></li> +<li>2022-03-14 · <a href="eero/">Setting Up a Pi-hole Server with Eero</a></li> +<li>2022-03-12 · <a href="jelly/">Transferring Media from macOS to a Jellyfin Server (Raspberry Pi 4)</a></li> +<li>2022-02-23 · <a href="february-updates/">February 2022 Update</a></li> +<li>2022-02-03 · <a href="poormans-comment-system/">My Cheapskate Commenting System</a></li> +<li>2022-01-28 · <a href="macos-convert-to-html/">Convert Files to HTML with macOS Automator Quick Actions</a></li> +<li>2022-01-06 · <a href="future-os-google/">Chrome OS Could Become the Future Leader of Computing</a></li> +<li>2021-12-17 · <a href="use-text-not-icons/">Icons Should be Complementary - Text is Always Better</a></li> +<li>2021-12-06 · <a href="jekyll-sourcehut/">Hosting a Jekyll Site on Sourcehut</a></li> +<li>2021-12-03 · <a href="netlify-urls/">Using Netlify for Dynamic URL Redirects</a></li> +<li>2021-11-25 · <a href="minor-website-changes/">Using a New Domain and Switching Static Hosts</a></li> +<li>2021-11-09 · <a href="default-html-style-updates/">Modern Improvements for Default Browser Styles</a></li> +<li>2021-11-03 · <a href="css-js-mistake/">A Reality Where CSS and JavaScript Don't Exist</a></li> +<li>2021-10-28 · <a href="pihole-cloudflare/">Setting Up 1.1.1.1 for Families on a Pi-Hole</a></li> +<li>2021-10-15 · <a href="batch-webp-conversion/">Batch Converting Images to webp with macOS Automator</a></li> +<li>2021-09-23 · <a href="safari-extensions-catalina-patcher/">Enabling Safari Extensions with the macOS Catalina Patcher</a></li> +<li>2021-09-08 · <a href="performance-focused-wordpress-theme/">Create a Performance-Focused WordPress Blog</a></li> +<li>2021-08-13 · <a href="pi-400-internal-ssd/">Stuffing an SSD Inside the Raspberry Pi 400</a></li> +<li>2021-07-24 · <a href="sharing-the-things-we-use/">Sharing The Things We Use</a></li> +<li>2021-06-20 · <a href="ps4-download-ui/">PS4 Download UI with Pure CSS</a></li> +<li>2021-06-07 · <a href="css-slope-graphs/">CSS Slope Graphs</a></li> +<li>2021-05-29 · <a href="soma-terminal-css/">SOMA Inspired Terminal Display with CSS</a></li> +<li>2021-05-19 · <a href="personal-website-opinions/">My Changing Opinion on Personal Website Design</a></li> +<li>2021-04-27 · <a href="shiny-css-buttons/">Shiny, Animated CSS Buttons</a></li> +<li>2021-04-22 · <a href="phpetite/">89 Blog Posts in a Single HTML File</a></li> +<li>2021-04-13 · <a href="macos-icon-css/">Create a Mac App Icon with Pure HTML and CSS</a></li> +<li>2021-04-12 · <a href="lazy-dev-dark-mode/">The Lazy Developer's Dark Mode</a></li> +<li>2021-03-25 · <a href="load-image-on-click/">Click to Load Website Images</a></li> +<li>2021-03-11 · <a href="introducing-pageroast/">Introducing PageRoast</a></li> +<li>2021-02-25 · <a href="launching-thriftyname/">ThriftyName: $5 Brand Names</a></li> +<li>2021-02-02 · <a href="self-hosting-fathom/">Self-Hosting Fathom Analytics with DigitalOcean</a></li> +<li>2021-01-19 · <a href="fathom-analytics-netlify/">Setting Up Fathom Analytics with Netlify</a></li> +<li>2021-01-13 · <a href="introducing-notez/">Introducing Notez</a></li> +<li>2021-01-05 · <a href="animated-toggle-tabs/">Animated Radio Tab Toggles</a></li> +<li>2020-12-28 · <a href="disabling-comments-in-wordpress/">Disabling Comments in WordPress</a></li> +<li>2020-12-08 · <a href="flexbox-bar-graphs/">Pure CSS Bar Graphs with Graceful Mobile Fallbacks</a></li> +<li>2020-12-04 · <a href="obvious-js-injection-fallback/">Obvious Javascript 'Injection' Fallback</a></li> +<li>2020-11-09 · <a href="bidirectional-scrolling/">Bidirectional Scrolling: Why Not Both?</a></li> +<li>2020-10-19 · <a href="menu-toggle-css/">Menu Toggle with Pure CSS</a></li> +<li>2020-10-07 · <a href="poor-mans-full-bleed/">Poor Man's CSS Full-Bleed Layout</a></li> +<li>2020-09-29 · <a href="simple-jekyll-navigation/">Simple Navigation Setup in Jekyll 3.9.0</a></li> +<li>2020-09-16 · <a href="cheap-portable-pi/">Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal</a></li> +<li>2020-09-09 · <a href="over-engineering-an-oil-tank/">Over-Engineering an Oil Tank Gauge</a></li> +<li>2020-09-02 · <a href="my-pi-desktop/">My Raspberry Pi Desktop</a></li> +<li>2020-08-16 · <a href="linux-mint-macbook-air/">Linux Mint MacBook Air Setup</a></li> +<li>2020-08-13 · <a href="hello-jekyll/">Goodbye WordPress, Hello Jekyll (Again)</a></li> +<li>2020-07-07 · <a href="improving-githubs-new-design/">Improving Github's New Design</a></li> +<li>2020-06-22 · <a href="keynote-slides-css/">Keynote Slides with Pure CSS</a></li> +<li>2020-06-14 · <a href="audio-hotkeys-on-linux-mint/">Audio Hotkeys on Linux Mint</a></li> +<li>2020-06-04 · <a href="quick-dirty-theme-switcher/">Quick and Dirty Theme Switcher</a></li> +<li>2020-05-13 · <a href="mini-interactive-keyboard-with-pure-css/">Mini Interactive Keyboard with Pure CSS</a></li> +<li>2020-05-06 · <a href="localwp-fedora/">Fixing LocalWP on Fedora 32</a></li> +<li>2020-05-05 · <a href="wp-enqueue-for-beginners/">WP Enqueue for Beginners</a></li> +<li>2020-04-29 · <a href="fake-3d-elements-with-css/">Faking 3D Elements with CSS</a></li> +<li>2020-03-31 · <a href="stripe-menu-css/">Stripe Menu Dropdowns (CSS)</a></li> +<li>2020-03-18 · <a href="base64-all-the-things/">Base64 All The Things! (Sometimes)</a></li> +<li>2020-02-07 · <a href="learning-to-floss/">How to "FLOSS" as a Web Designer</a></li> +<li>2020-01-07 · <a href="chromebook-web-dev/">Web Development on a $200 Chromebook</a></li> +<li>2019-11-29 · <a href="one-css-property/">Billing for One CSS Change</a></li> +<li>2019-11-13 · <a href="default-brower-forms/">Very Basic Form Styling</a></li> +<li>2019-11-01 · <a href="improving-tufte-jekyll/">Improving Tufte CSS for Jekyll</a></li> +<li>2019-10-06 · <a href="sticky-elements/">Stop Using Sticky Navigation on Mobile</a></li> +<li>2019-09-28 · <a href="being-efficient/">Being More Efficient as a Designer and Developer</a></li> +<li>2019-09-09 · <a href="plain-text-emails/">Plain Text Emails, Please</a></li> +<li>2019-07-30 · <a href="dynamic-checkboxes/">Dynamic Checkboxes</a></li> +<li>2019-07-17 · <a href="empty-table-cells/">Styling Empty Table Cells</a></li> +<li>2019-07-05 · <a href="html5-validator-badge/">Using HTML Validator Badges Again</a></li> +<li>2019-06-25 · <a href="they-wont-wait/">They Won't Wait: A Warning for Slow Websites</a></li> +<li>2019-06-20 · <a href="publish-with-jekyll/">Publishing Simple Books With Jekyll</a></li> +<li>2019-06-14 · <a href="hamburger-menu-alternative/">Using Hamburger Menus? Try Sausage Links</a></li> +<li>2019-06-11 · <a href="tables/">Making Tables Responsive With Minimal CSS</a></li> +<li>2019-06-06 · <a href="html-like-1999/">Write HTML Like It's 1999</a></li> +<li>2019-06-04 · <a href="user-select/">Using User-Select</a></li> +<li>2019-05-29 · <a href="news-websites-are-dumpster-fires/">News Websites Are Dumpster Fires</a></li> +<li>2019-05-22 · <a href="text-align-justify/">Text Align: Justify</a></li> +<li>2019-05-15 · <a href="improving-receipt-ux/">Improving Receipt UX</a></li> +<li>2019-05-09 · <a href="cut-your-forms-in-half/">Cut Your Forms in Half</a></li> +<li>2019-05-03 · <a href="first-letter/">First Letter Pseudo Element</a></li> +<li>2019-04-26 · <a href="minimal-css-menu/">Minimal CSS: Dropdown Menu</a></li> +<li>2019-04-23 · <a href="character-unit/">CSS Character Unit</a></li> +<li>2019-04-20 · <a href="browser-history-sucks/">Browser History Sucks</a></li> +<li>2019-04-15 · <a href="still-using-jquery/">Yes, I Still Use jQuery</a></li> +<li>2019-04-13 · <a href="current-color/">CSS Value: `currentColor`</a></li> +<li>2019-04-05 · <a href="ndenting-text-with-css/">CSS: Indenting Text</a></li> +<li>2019-03-26 · <a href="simple-does-not-mean-ugly/">Simple Does Not Mean Ugly</a></li> +<li>2019-03-25 · <a href="skip-to-content/">Skip to Content Button</a></li> +<li>2019-03-13 · <a href="form-ui-improvements/">Prescription Form UI Improvements</a></li> +<li>2019-02-27 · <a href="animated-card-tiles/">Animated Card Tiles</a></li> +<li>2019-02-18 · <a href="easy-toggle-switches/">Easy Toggle Switches</a></li> +<li>2019-02-15 · <a href="super-mario-blocks-css/">Super Mario Blocks in CSS</a></li> +<li>2019-02-05 · <a href="proper-ui-hierarchy/">Proper UI Hierarchy</a></li> +<li>2019-01-28 · <a href="tabbed-content/">Tabbed Content Without JavaScript</a></li> +<li>2019-01-21 · <a href="easy-custom-radio-inputs/">Easy Custom Radio Inputs</a></li> +<li>2019-01-15 · <a href="basic-gulp-build-for-sass/">Basic Gulp Build for Sass</a></li> +<li>2019-01-08 · <a href="better-box-shadows/">Better Box Shadows</a></li> +<li>2019-01-06 · <a href="over-nesting/">Over-Nesting</a></li> +<li>2018-12-19 · <a href="jsincss-parent-selector/">Using Parent Selectors in CSS</a></li> +<li>2018-11-28 · <a href="width-vs-flex-basis/">Width or Flex-Basis?</a></li> +<li>2018-11-22 · <a href="flexbox-grid/">Adaptable Flexbox Grid</a></li> +<li>2018-10-18 · <a href="self-hosted-blogs/">What Happened to Self-Hosted Blogs?</a></li> +<li>2018-09-28 · <a href="multiple-css-background-images/">Using Multiple CSS Background Images</a></li> +<li>2018-09-20 · <a href="pure-css-simple-dropdown-plugin/">Pure CSS Simple Dropdown Plugin</a></li> +<li>2018-09-07 · <a href="simple-accessibility/">Simple Accessibility</a></li> +<li>2018-08-07 · <a href="setting-up-free-ssl/">Setting Up a Free SSL</a></li> +<li>2018-04-16 · <a href="css-video-backgrounds/">CSS Video Backgrounds</a></li> +<li>2018-03-24 · <a href="css-variables/">CSS Variables</a></li> +<li>2018-02-12 · <a href="stay-hungry/">Stay Hungry</a></li> +<li>2018-01-25 · <a href="open-source-typeface-pairings/">Open Source Typeface Pairings</a></li> +<li>2018-01-14 · <a href="et-jekyll-theme/">ET-Jekyll Theme</a></li> +<li>2017-11-20 · <a href="chasing-performance/">Chasing Performance</a></li> +<li>2017-11-01 · <a href="death-of-personality/">The Death of Personality</a></li> +<li>2017-10-10 · <a href="design-review-dropbox/">Unsolicited Design Review - Dropbox</a></li> +<li>2017-09-07 · <a href="goodbye-css-preprocessors/">Goodbye CSS Preprocessors</a></li> +<li>2017-07-10 · <a href="dts/">Designers Need Thicker Skin</a></li> +<li>2016-11-15 · <a href="te/">The Wonders of Text Ellipsis</a></li> +<li>2016-06-28 · <a href="aui/">Aqua UI CSS Buttons</a></li> +</ul> +<footer role="contentinfo"> + <h2>Menu Navigation</h2> + <ul id="menu"> + <li><a href="/">Home</a></li> + <li><a href="/projects">Projects</a></li> + <li><a href="/uses">Uses</a></li> + <li><a href="/wiki">Wiki</a></li> + <li><a href="/resume">Resume</a></li> + <li><a href="/colophon">Colophon</a></li> + <li><a href="/now">Now</a></li> + <li><a href="/donate">Donate</a></li> + <li><a href="/atom.xml">RSS</a></li> + <li><a href="#top">↑ Top of the page</a></li> + </ul> + <small> + Built with <a href="https://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/introducing-notez/index.html b/build/introducing-notez/index.html new file mode 100644 index 0000000..604b9e1 --- /dev/null +++ b/build/introducing-notez/index.html @@ -0,0 +1,54 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<ul> +<li>free and open source (<a href="https://github.com/bradleytaunt/notez">github.com/bradleytaunt/notez</a>)</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>Hopefully you enjoy using it as well!</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/introducing-pageroast/index.html b/build/introducing-pageroast/index.html new file mode 100644 index 0000000..b32aaf3 --- /dev/null +++ b/build/introducing-pageroast/index.html @@ -0,0 +1,57 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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 & 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>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>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> +</ul> +<footer role="contentinfo"> + <h2>Menu Navigation</h2> + <ul id="menu"> + <li><a href="/">Home</a></li> + <li><a href="/projects">Projects</a></li> + <li><a href="/uses">Uses</a></li> + <li><a href="/wiki">Wiki</a></li> + <li><a href="/resume">Resume</a></li> + <li><a href="/colophon">Colophon</a></li> + <li><a href="/now">Now</a></li> + <li><a href="/donate">Donate</a></li> + <li><a href="/atom.xml">RSS</a></li> + <li><a href="#top">↑ Top of the page</a></li> + </ul> + <small> + Built with <a href="https://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/jekyll-sourcehut/index.html b/build/jekyll-sourcehut/index.html new file mode 100644 index 0000000..9d25861 --- /dev/null +++ b/build/jekyll-sourcehut/index.html @@ -0,0 +1,105 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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>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> +<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>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> +<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 +packages: +- ruby-full +- ruby-dev +environment: +site: yourusername.srht.site +sources: +- https://git.sr.ht/~yourusername/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/_site + tar -cvz . > ../../site.tar.gz +- upload: | + 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>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>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> +<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/jekyll/index.html b/build/jekyll/index.html new file mode 100644 index 0000000..10cc056 --- /dev/null +++ b/build/jekyll/index.html @@ -0,0 +1,89 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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 - +</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 +</code></pre> +<h3>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> +<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> +<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>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>Then run the following inside your project:</p> +<pre><code>docker run -p 4000:4000 -v $(pwd):/site bretfisher/jekyll-serve +</code></pre> +<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/jelly/index.html b/build/jelly/index.html new file mode 100644 index 0000000..cb4b93f --- /dev/null +++ b/build/jelly/index.html @@ -0,0 +1,74 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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><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> +</ul> +<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 +</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> +</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> +<ul> +<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> +<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/jsincss-parent-selector/index.html b/build/jsincss-parent-selector/index.html new file mode 100644 index 0000000..412586d --- /dev/null +++ b/build/jsincss-parent-selector/index.html @@ -0,0 +1,92 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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'); +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> +<pre><code>npm install jsincss-parent-selector qaffeine +</code></pre> +<h3>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> +</code></pre> +<h3>JavaScript (ex. input.js)</h3> +<pre><code>const qaffeine = require('qaffeine') +const parent = require('jsincss-parent-selector') + +qaffeine( +{ + stylesheet: {}, + rules: { + parent + } +}, +'input.css', +'output.js', +'output.css' +) +</code></pre> +<h3>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'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> +<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/keynote-slides-css/index.html b/build/keynote-slides-css/index.html new file mode 100644 index 0000000..45175c6 --- /dev/null +++ b/build/keynote-slides-css/index.html @@ -0,0 +1,117 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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> +</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 */ +.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; } + +/* 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 */ +.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>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> +</ul> +<p>That's it! Hope you enjoy playing around with it.</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/launching-thriftyname/index.html b/build/launching-thriftyname/index.html new file mode 100644 index 0000000..ac70d95 --- /dev/null +++ b/build/launching-thriftyname/index.html @@ -0,0 +1,48 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>Thanks for reading!</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/lazy-dev-dark-mode/index.html b/build/lazy-dev-dark-mode/index.html new file mode 100644 index 0000000..f73276f --- /dev/null +++ b/build/lazy-dev-dark-mode/index.html @@ -0,0 +1,60 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +<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> +<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/learning-to-floss/index.html b/build/learning-to-floss/index.html new file mode 100644 index 0000000..356f6bd --- /dev/null +++ b/build/learning-to-floss/index.html @@ -0,0 +1,73 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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>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> +<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> +</ul> +<h3>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> +</ul> +<h3>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> +</ul> +<h3>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> +</ul> +<h3>Documents</h3> +<ul> +<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> +<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/lf/index.html b/build/lf/index.html new file mode 100644 index 0000000..8f7ff7d --- /dev/null +++ b/build/lf/index.html @@ -0,0 +1,56 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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/ +</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 +</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> +<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/linux-love/index.html b/build/linux-love/index.html new file mode 100644 index 0000000..6d42576 --- /dev/null +++ b/build/linux-love/index.html @@ -0,0 +1,75 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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...</p> +<h2>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>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> +<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>Depending on the desired distro, resources required, etc.</li> +<li>A couple that come to mind are Zorin OS and elementary OS</li> +</ol> +<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/linux-mint-macbook-air/index.html b/build/linux-mint-macbook-air/index.html new file mode 100644 index 0000000..96d07cd --- /dev/null +++ b/build/linux-mint-macbook-air/index.html @@ -0,0 +1,113 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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> +<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> +<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> +<ul> +<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> +<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> +</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>Flash media</li> +<li>???</li> +<li>Profit!!</li> +</ol> +<h2>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>Press <strong>Enter</strong></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> +<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> +<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>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"> + <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/load-image-on-click/index.html b/build/load-image-on-click/index.html new file mode 100644 index 0000000..a3b6f57 --- /dev/null +++ b/build/load-image-on-click/index.html @@ -0,0 +1,72 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> + 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> +<h3>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>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> +<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/localwp-fedora/index.html b/build/localwp-fedora/index.html new file mode 100644 index 0000000..309dc48 --- /dev/null +++ b/build/localwp-fedora/index.html @@ -0,0 +1,51 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +</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> + <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/loop/index.html b/build/loop/index.html new file mode 100644 index 0000000..4488987 --- /dev/null +++ b/build/loop/index.html @@ -0,0 +1,77 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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>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> +<pre><code>{% for collection in site.collections %} + <!-- 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' %} + {% 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"> + {% for item in site[collection.label] %} + <li> + <a href="{{ item.url }}">{{ item.title }}</a> + </li> + {% endfor %} + </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>Enjoy looping through your Jekyll collections!</p> +<h2>Refs</h2> +<ol> +<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> + <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/luba/index.html b/build/luba/index.html new file mode 100644 index 0000000..7dcfc2e --- /dev/null +++ b/build/luba/index.html @@ -0,0 +1,95 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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>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> +<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 / 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> +<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> + <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/macos-convert-to-html/index.html b/build/macos-convert-to-html/index.html new file mode 100644 index 0000000..f5a6cb9 --- /dev/null +++ b/build/macos-convert-to-html/index.html @@ -0,0 +1,116 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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>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> +<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)" +</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>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>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> +</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 "$@" +do +/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>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>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> + <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/macos-icon-css/index.html b/build/macos-icon-css/index.html new file mode 100644 index 0000000..bed4d4b --- /dev/null +++ b/build/macos-icon-css/index.html @@ -0,0 +1,265 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +</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> +<pre><code>* { + box-sizing: border-box; +} +:root { + --row-distance: 42px; +} +</code></pre> +<pre><code>.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>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; + 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'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>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:''; + 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: ''; + 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 & 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 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> +<p><a href="https://codepen.io/bradleytaunt/pen/bGgBRaV">Live CodePen Demo</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/mail/index.html b/build/mail/index.html new file mode 100644 index 0000000..0b086e8 --- /dev/null +++ b/build/mail/index.html @@ -0,0 +1,62 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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 +</code></pre> +<p>and then run:</p> +<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> +<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/mango/index.html b/build/mango/index.html new file mode 100644 index 0000000..fc5db43 --- /dev/null +++ b/build/mango/index.html @@ -0,0 +1,100 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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>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> +<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>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> +<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 "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> +<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> +<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> +</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"> + <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/menu-toggle-css/index.html b/build/menu-toggle-css/index.html new file mode 100644 index 0000000..fb941a8 --- /dev/null +++ b/build/menu-toggle-css/index.html @@ -0,0 +1,107 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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><!-- 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"] { + 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 */ +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'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> +<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 { + 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> +<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/mini-interactive-keyboard-with-pure-css/index.html b/build/mini-interactive-keyboard-with-pure-css/index.html new file mode 100644 index 0000000..f9c83ec --- /dev/null +++ b/build/mini-interactive-keyboard-with-pure-css/index.html @@ -0,0 +1,160 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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>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> +</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> + + <!-- "Z" Letter Button --> + <button class="z"> + <span>Z</span> + </button> + +</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"); + +/* 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; +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; +} + +/* 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: ''; +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: 'Muli', 'Helvetica', sans-serif; +} + +/* 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 */ +.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%; +} + +/* Custom "Z" Letter styling */ +.z { + width: 260px; +} +.z span { + color: #9f9f9f; + font-size: 150px; +} +</code></pre> +<h2>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> + <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/minimal-css-menu/index.html b/build/minimal-css-menu/index.html new file mode 100644 index 0000000..57ddc3c --- /dev/null +++ b/build/minimal-css-menu/index.html @@ -0,0 +1,81 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +</code></pre> +<h3>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 { + left: -9999px; + position: absolute; + visibility: hidden; +} +ul li:hover > ul, ul li:focus-within > ul { + left: 0; + visibility: visible; +} +</code></pre> +<h2>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> + <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/minor-website-changes/index.html b/build/minor-website-changes/index.html new file mode 100644 index 0000000..5e550a7 --- /dev/null +++ b/build/minor-website-changes/index.html @@ -0,0 +1,71 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>But overtime I came to somewhat dislike[^1] it and set out to change it.</p> +<h2>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>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> +<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>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>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> +<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> +<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/mongodb-arch/index.html b/build/mongodb-arch/index.html new file mode 100644 index 0000000..2b4bff8 --- /dev/null +++ b/build/mongodb-arch/index.html @@ -0,0 +1,61 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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 +</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 +cd mongodb-tools +./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/ +</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> +<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/monitor/index.html b/build/monitor/index.html new file mode 100644 index 0000000..d41cfaf --- /dev/null +++ b/build/monitor/index.html @@ -0,0 +1,80 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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>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><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>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>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>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> +<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/multiple-css-background-images/index.html b/build/multiple-css-background-images/index.html new file mode 100644 index 0000000..fcf7539 --- /dev/null +++ b/build/multiple-css-background-images/index.html @@ -0,0 +1,46 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>Example:</p> +<pre><code>.element { + 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> +<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-pi-desktop/index.html b/build/my-pi-desktop/index.html new file mode 100644 index 0000000..f41278a --- /dev/null +++ b/build/my-pi-desktop/index.html @@ -0,0 +1,122 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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> +</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> +<ul> +<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> +</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> +</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> +</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 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> +<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 / 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>First, clear the cache to avoid conflicting data:</p> +<pre><code>sync; echo 3 | sudo tee /proc/sys/vm/drop_caches +</code></pre> +<h3>Write</h3> +<p>Write script run:</p> +<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 +</code></pre> +<h3>Read</h3> +<p>Read script:</p> +<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 +</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>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> + <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-static-blog-publishing-setup/index.html b/build/my-static-blog-publishing-setup/index.html new file mode 100644 index 0000000..e5af89b --- /dev/null +++ b/build/my-static-blog-publishing-setup/index.html @@ -0,0 +1,95 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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>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> +<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> +<ol> +<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> +</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>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>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> +</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>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: +</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> +<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> + <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/ndenting-text-with-css/index.html b/build/ndenting-text-with-css/index.html new file mode 100644 index 0000000..2687284 --- /dev/null +++ b/build/ndenting-text-with-css/index.html @@ -0,0 +1,67 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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> +<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> +</ol> +<h2>The CSS</h2> +<p>Adding the property is extremely trivial, all you need is the following:</p> +<pre><code>/* Best practice for paragraphs */ +p + p { + text-indent: 1rem; /* whatever you want */ +} +</code></pre> +<h2>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> + <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/netlify-urls/index.html b/build/netlify-urls/index.html new file mode 100644 index 0000000..0502441 --- /dev/null +++ b/build/netlify-urls/index.html @@ -0,0 +1,68 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +</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> +<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) +<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> +</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>Hopefully this helps others trying to dynamically redirect their domains without the headache.</p> +<h2>Refs</h2> +<ol> +<li>I normally set this up through Github / git hosting</li> +</ol> +<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/news-websites-are-dumpster-fires/index.html b/build/news-websites-are-dumpster-fires/index.html new file mode 100644 index 0000000..34b4ec3 --- /dev/null +++ b/build/news-websites-are-dumpster-fires/index.html @@ -0,0 +1,62 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +</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> +<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>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> +<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> +<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/notice/index.html b/build/notice/index.html new file mode 100644 index 0000000..573a2d2 --- /dev/null +++ b/build/notice/index.html @@ -0,0 +1,102 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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 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> +<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> +</code></pre> +<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; + 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>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> +</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> +<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 "arrow toggle" on <code>summary</code> elements by including the following:</p> +<pre><code>details > summary { +list-style: none; +} +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> +<p><a href="https://codepen.io/bradleytaunt/pen/jOxLdQP">Live CodePen Example</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/now/index.html b/build/now/index.html new file mode 100644 index 0000000..8adfa79 --- /dev/null +++ b/build/now/index.html @@ -0,0 +1,52 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<ul> +<li>Working as a UX designer & fullstack developer hybrid</li> +</ul> +<h2>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>Advancing my knowledge of Ruby</li> +<li>Currently playing Darktide on Xbox</li> +</ul> +<footer role="contentinfo"> + <h2>Menu Navigation</h2> + <ul id="menu"> + <li><a href="/">Home</a></li> + <li><a href="/projects">Projects</a></li> + <li><a href="/uses">Uses</a></li> + <li><a href="/wiki">Wiki</a></li> + <li><a href="/resume">Resume</a></li> + <li><a href="/colophon">Colophon</a></li> + <li><a href="/now">Now</a></li> + <li><a href="/donate">Donate</a></li> + <li><a href="/atom.xml">RSS</a></li> + <li><a href="#top">↑ Top of the page</a></li> + </ul> + <small> + Built with <a href="https://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/obvious-js-injection-fallback/index.html b/build/obvious-js-injection-fallback/index.html new file mode 100644 index 0000000..79fb611 --- /dev/null +++ b/build/obvious-js-injection-fallback/index.html @@ -0,0 +1,64 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +</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; +</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> +<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> +</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> +<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/one-css-property/index.html b/build/one-css-property/index.html new file mode 100644 index 0000000..a749cec --- /dev/null +++ b/build/one-css-property/index.html @@ -0,0 +1,59 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +</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> +<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/one-thing/index.html b/build/one-thing/index.html new file mode 100644 index 0000000..a2b422c --- /dev/null +++ b/build/one-thing/index.html @@ -0,0 +1,62 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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>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> +<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> +<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/open-source-typeface-pairings/index.html b/build/open-source-typeface-pairings/index.html new file mode 100644 index 0000000..397a876 --- /dev/null +++ b/build/open-source-typeface-pairings/index.html @@ -0,0 +1,71 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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/openring/index.html b/build/openring/index.html new file mode 100644 index 0000000..a5836b0 --- /dev/null +++ b/build/openring/index.html @@ -0,0 +1,135 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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>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"> + {{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> + {{end}} + </section> + <p class="attribution"> + Generated by + <a href="https://git.sr.ht/~sircmpwn/openring">openring</a> + </p> +</section> +<style> +.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; +} +</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> +<h3>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> +<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 +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 +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> +<pre><code>{% raw %}{% include openring-out.html %}{% endraw %} +</code></pre> +<h2>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>Happy sharing!</p> +<h2>Refs</h2> +<ol> +<li>Well, as dynamic as a static website can be!</li> +</ol> +<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/over-engineering-an-oil-tank/index.html b/build/over-engineering-an-oil-tank/index.html new file mode 100644 index 0000000..368e2b1 --- /dev/null +++ b/build/over-engineering-an-oil-tank/index.html @@ -0,0 +1,60 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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> +</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><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> +<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/over-nesting/index.html b/build/over-nesting/index.html new file mode 100644 index 0000000..01704e3 --- /dev/null +++ b/build/over-nesting/index.html @@ -0,0 +1,78 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +</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 */ +.main-container { + .child-container { + /* 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 */ +.main-container {} +.child-container {} +.sub-child-container {} +</code></pre> +<h3>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{} +} + +.link-item { + &: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> +<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/pages.tsv b/build/pages.tsv new file mode 100644 index 0000000..4568a4f --- /dev/null +++ b/build/pages.tsv @@ -0,0 +1,7 @@ +pages/colophon.md Colophon +pages/donate.md Donate +pages/now.md Now +pages/projects.md Projects +pages/resume.md Bradley Taunt +pages/uses.md Things I Use +pages/wiki.md Wiki diff --git a/build/paid-mac-apps/index.html b/build/paid-mac-apps/index.html new file mode 100644 index 0000000..09d01e8 --- /dev/null +++ b/build/paid-mac-apps/index.html @@ -0,0 +1,67 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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>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>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> +<ol> +<li>Free & open source software</li> +</ol> +<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/pblog/index.html b/build/pblog/index.html new file mode 100644 index 0000000..090bbd4 --- /dev/null +++ b/build/pblog/index.html @@ -0,0 +1,67 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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>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> +<p>Thanks for reading!</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/performance-focused-wordpress-theme/index.html b/build/performance-focused-wordpress-theme/index.html new file mode 100644 index 0000000..a482f76 --- /dev/null +++ b/build/performance-focused-wordpress-theme/index.html @@ -0,0 +1,91 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<ul> +<li>a lightweight WordPress theme</li> +<li>two free WordPress plugins</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> +<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> +<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> +</ol> +<h2>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> +<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> +<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>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>Unlimited bandwidth</li> +<li>Backups (though not automatic)</li> +<li>SFTP access</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> +<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> + <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/personal-website-opinions/index.html b/build/personal-website-opinions/index.html new file mode 100644 index 0000000..7ce9782 --- /dev/null +++ b/build/personal-website-opinions/index.html @@ -0,0 +1,49 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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/phpetite/index.html b/build/phpetite/index.html new file mode 100644 index 0000000..d735d7e --- /dev/null +++ b/build/phpetite/index.html @@ -0,0 +1,81 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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 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> +</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>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> + <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/pi-400-internal-ssd/index.html b/build/pi-400-internal-ssd/index.html new file mode 100644 index 0000000..6ac5585 --- /dev/null +++ b/build/pi-400-internal-ssd/index.html @@ -0,0 +1,94 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>Enough chit-chat - on to the build!</p> +<h2>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> +<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>Dremel rotary tool with soft sanding bits</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> +<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) +, 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> +<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> +</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>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> +<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/pihole-cloudflare/index.html b/build/pihole-cloudflare/index.html new file mode 100644 index 0000000..b7b6282 --- /dev/null +++ b/build/pihole-cloudflare/index.html @@ -0,0 +1,65 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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> +</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> +<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> + <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/plain-text-emails/index.html b/build/plain-text-emails/index.html new file mode 100644 index 0000000..16bd11c --- /dev/null +++ b/build/plain-text-emails/index.html @@ -0,0 +1,95 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +</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><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> +</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> +<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>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>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> +</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> +</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>The results might just surprise you.</p> +<h2>Refs</h2> +<ol> +<li>This is the "latest" detailed survey I could find on email design preference</li> +</ol> +<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/poor-mans-full-bleed/index.html b/build/poor-mans-full-bleed/index.html new file mode 100644 index 0000000..7c72e2a --- /dev/null +++ b/build/poor-mans-full-bleed/index.html @@ -0,0 +1,122 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +</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> +</code></pre> +<p>That's it for the HTML!</p> +<h2>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 */ + 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>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> +<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> + <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/poormans-comment-system/index.html b/build/poormans-comment-system/index.html new file mode 100644 index 0000000..feca90a --- /dev/null +++ b/build/poormans-comment-system/index.html @@ -0,0 +1,81 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +</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> +<ul> +<li>No third party application needed</li> +<li>Privacy focused</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> +<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> +<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/posts.tsv b/build/posts.tsv new file mode 100644 index 0000000..e3aba89 --- /dev/null +++ b/build/posts.tsv @@ -0,0 +1,165 @@ +posts/x220.md The X220 ThinkPad is the Best Laptop in the World +posts/x201.md Bypassing the WiFi Hardware Switch on the Lenovo X201 +posts/wp-enqueue-for-beginners.md WP Enqueue for Beginners +posts/windows.md Setting Up Jekyll on Windows
+posts/width-vs-flex-basis.md Width or Flex-Basis? +posts/webfonts.md Stop Using Custom Web Fonts +posts/vscode.md Running VSCode in Chromium on OpenBSD +posts/use-text-not-icons.md Icons Should be Complementary - Text is Always Better +posts/user-select.md Using User-Select +posts/they-wont-wait.md They Won't Wait: A Warning for Slow Websites +posts/text-align-justify.md Text Align: Justify +posts/te.md The Wonders of Text Ellipsis +posts/tables.md Making Tables Responsive With Minimal CSS +posts/tabbed-content.md Tabbed Content Without JavaScript +posts/super-mario-blocks-css.md Super Mario Blocks in CSS +posts/suckless.md I Want to Suckless and You Can Too +posts/sublime.md Launching Sublime Text with dmenu on Alpine Linux +posts/stripe-menu-css.md Stripe Menu Dropdowns (CSS) +posts/still-using-jquery.md Yes, I Still Use jQuery +posts/sticky-elements.md Stop Using Sticky Navigation on Mobile +posts/stay-hungry.md Stay Hungry +posts/srht2.md Migrating from GitHub to sourcehut +posts/spec.md Never Do Spec Work for Free +posts/soma-terminal-css.md SOMA Inspired Terminal Display with CSS +posts/slow.md Embracing Slow Tech +posts/slabtop.md Converting My X201 ThinkPad into a Slabtop +posts/skip-to-content.md Skip to Content Button +posts/simple-jekyll-navigation.md Simple Navigation Setup in Jekyll 3.9.0 +posts/simple-does-not-mean-ugly.md Simple Does Not Mean Ugly +posts/simple-accessibility.md Simple Accessibility +posts/shiny-css-buttons.md Shiny, Animated CSS Buttons +posts/shinobi-website.md This Site is Now a Shinobi Website +posts/sharing-the-things-we-use.md Sharing The Things We Use +posts/seven-years.md Blogging for 7 Years +posts/setting-up-free-ssl.md Setting Up a Free SSL +posts/self-hosting-fathom.md Self-Hosting Fathom Analytics with DigitalOcean +posts/self-hosted-blogs.md What Happened to Self-Hosted Blogs? +posts/schools.md Schools Should Be Using Open Source Software +posts/safari-extensions-catalina-patcher.md Enabling Safari Extensions with the macOS Catalina Patcher +posts/safari-default-dark-mode.md Dear Apple, Please Fix Safari's Default Dark Mode Link Color +posts/rvm.md Installing Ruby with RVM on Alpine Linux +posts/rss-hacks.md RSS Hacks With XSLT +posts/rss-click.md Clickable Links Inside XML +posts/quick-dirty-theme-switcher.md Quick and Dirty Theme Switcher +posts/pure-css-simple-dropdown-plugin.md Pure CSS Simple Dropdown Plugin +posts/publish-with-jekyll.md Publishing Simple Books With Jekyll +posts/ps4-download-ui.md PS4 Download UI with Pure CSS +posts/proper-ui-hierarchy.md Proper UI Hierarchy +posts/poor-mans-full-bleed.md Poor Man's CSS Full-Bleed Layout +posts/poormans-comment-system.md My Cheapskate Commenting System +posts/plain-text-emails.md Plain Text Emails, Please +posts/pihole-cloudflare.md Setting Up 1.1.1.1 for Families on a Pi-Hole +posts/pi-400-internal-ssd.md Stuffing an SSD Inside the Raspberry Pi 400 +posts/phpetite.md 89 Blog Posts in a Single HTML File +posts/personal-website-opinions.md My Changing Opinion on Personal Website Design +posts/performance-focused-wordpress-theme.md Create a Performance-Focused WordPress Blog +posts/pblog.md Yet Another Static Site Generator Switch +posts/paid-mac-apps.md Happily Paying For macOS Apps +posts/over-nesting.md Over-Nesting +posts/over-engineering-an-oil-tank.md Over-Engineering an Oil Tank Gauge +posts/open-source-typeface-pairings.md Open Source Typeface Pairings +posts/openring.md Building openring with Jekyll Build +posts/one-thing.md My Coffee Maker Just Makes Coffee +posts/one-css-property.md Billing for One CSS Change +posts/obvious-js-injection-fallback.md Obvious Javascript 'Injection' Fallback +posts/notice.md RE: Creating a Simple HTML/CSS Notice Box +posts/news-websites-are-dumpster-fires.md News Websites Are Dumpster Fires +posts/netlify-urls.md Using Netlify for Dynamic URL Redirects +posts/ndenting-text-with-css.md CSS: Indenting Text +posts/my-static-blog-publishing-setup.md My Static Blog Publishing Setup and an Apology to RSS Subscribers +posts/my-pi-desktop.md My Raspberry Pi Desktop +posts/multiple-css-background-images.md Using Multiple CSS Background Images +posts/monitor.md Why I Stopped Using an External Monitor +posts/mongodb-arch.md Installing Older Versions of MongoDB on Arch Linux +posts/minor-website-changes.md Using a New Domain and Switching Static Hosts +posts/minimal-css-menu.md Minimal CSS: Dropdown Menu +posts/mini-interactive-keyboard-with-pure-css.md Mini Interactive Keyboard with Pure CSS +posts/menu-toggle-css.md Menu Toggle with Pure CSS +posts/mango.md Replacing My Eero Mesh Network with Two Mangos +posts/mail.md Working with `git` Patches in Apple Mail +posts/macos-icon-css.md Create a Mac App Icon with Pure HTML and CSS +posts/macos-convert-to-html.md Convert Files to HTML with macOS Automator Quick Actions +posts/luba.md My Robotic Mower Woes +posts/loop.md Looping Through Jekyll Collections +posts/localwp-fedora.md Fixing LocalWP on Fedora 32 +posts/load-image-on-click.md Click to Load Website Images +posts/linux-mint-macbook-air.md Linux Mint MacBook Air Setup +posts/linux-love.md The Linux Desktop is Hard to Love +posts/lf.md Installing Custom Fonts on Linux from the Command Line +posts/learning-to-floss.md How to "FLOSS" as a Web Designer +posts/lazy-dev-dark-mode.md The Lazy Developer's Dark Mode +posts/launching-thriftyname.md ThriftyName: $5 Brand Names +posts/keynote-slides-css.md Keynote Slides with Pure CSS +posts/jsincss-parent-selector.md Using Parent Selectors in CSS +posts/jelly.md Transferring Media from macOS to a Jellyfin Server (Raspberry Pi 4) +posts/jekyll-sourcehut.md Hosting a Jekyll Site on Sourcehut +posts/jekyll.md Setup Jekyll from Scratch on a New Linux System +posts/introducing-pageroast.md Introducing PageRoast +posts/introducing-notez.md Introducing Notez +posts/improving-tufte-jekyll.md Improving Tufte CSS for Jekyll +posts/improving-receipt-ux.md Improving Receipt UX +posts/improving-githubs-new-design.md Improving Github's New Design +posts/html-like-1999.md Write HTML Like It's 1999 +posts/html-dark-mode.md HTML Dark Mode +posts/html5-validator-badge.md Using HTML Validator Badges Again +posts/hello-jekyll.md Goodbye WordPress, Hello Jekyll (Again) +posts/heif.md Converting HEIF Images with macOS Automator +posts/hamburgers.md Stop Using Hamburger Menus (Sometimes) +posts/hamburger-menu-alternative.md Using Hamburger Menus? Try Sausage Links +posts/goodbye-css-preprocessors.md Goodbye CSS Preprocessors +posts/git-patches.md Applying Email-Based Git Patches in Evolution on Linux +posts/gallery.md Simplifying the Craigslist Gallery +posts/future-os-google.md Chrome OS Could Become the Future Leader of Computing +posts/form-ui-improvements.md Prescription Form UI Improvements +posts/flexbox-grid.md Adaptable Flexbox Grid +posts/flexbox-bar-graphs.md Pure CSS Bar Graphs with Graceful Mobile Fallbacks +posts/first-letter.md First Letter Pseudo Element +posts/february-updates.md February 2022 Update +posts/fathom-analytics-netlify.md Setting Up Fathom Analytics with Netlify +posts/fake-3d-elements-with-css.md Faking 3D Elements with CSS +posts/et-jekyll-theme.md ET-Jekyll Theme +posts/empty-table-cells.md Styling Empty Table Cells +posts/eero.md Setting Up a Pi-hole Server with Eero +posts/easy-toggle-switches.md Easy Toggle Switches +posts/easy-custom-radio-inputs.md Easy Custom Radio Inputs +posts/dynamic-checkboxes.md Dynamic Checkboxes +posts/dwm-gnome.md Bringing dwm Shortcuts to GNOME +posts/dv.md Dynamic Viewports with CSS +posts/dump.md Don't Make a Blog, Make a Brain Dump +posts/duckduckno.md Two Weeks with the DuckDuckGo Browser +posts/dts.md Designers Need Thicker Skin +posts/disabling-comments-in-wordpress.md Disabling Comments in WordPress +posts/design-review-dropbox.md Unsolicited Design Review - Dropbox +posts/default-html-style-updates.md Modern Improvements for Default Browser Styles +posts/default-brower-forms.md Very Basic Form Styling +posts/death-of-personality.md The Death of Personality +posts/cut-your-forms-in-half.md Cut Your Forms in Half +posts/current-color.md CSS Value: `currentColor` +posts/css-video-backgrounds.md CSS Video Backgrounds +posts/css-variables.md CSS Variables +posts/css-slope-graphs.md CSS Slope Graphs +posts/css-js-mistake.md A Reality Where CSS and JavaScript Don't Exist +posts/chromebook-web-dev.md Web Development on a $200 Chromebook +posts/cheap-portable-pi.md Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal +posts/chasing-performance.md Chasing Performance +posts/character-unit.md CSS Character Unit +posts/browser-history-sucks.md Browser History Sucks +posts/bidirectional-scrolling.md Bidirectional Scrolling: Why Not Both? +posts/better-box-shadows.md Better Box Shadows +posts/berg.md Hosting with Codeberg Pages +posts/being-efficient.md Being More Efficient as a Designer and Developer +posts/battery.md Improving Laptop Battery Performance on OpenBSD +posts/batch-webp-conversion.md Batch Converting Images to webp with macOS Automator +posts/basic-gulp-build-for-sass.md Basic Gulp Build for Sass +posts/base64-all-the-things.md Base64 All The Things! (Sometimes) +posts/avoid.md A Warning for New Designers: Avoid Dribbble +posts/aui.md Aqua UI CSS Buttons +posts/audio-hotkeys-on-linux-mint.md Audio Hotkeys on Linux Mint +posts/animated-toggle-tabs.md Animated Radio Tab Toggles +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/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 new file mode 100644 index 0000000..549ebc6 --- /dev/null +++ b/build/projects/index.html @@ -0,0 +1,68 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>Projects</h1> +<h2>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> +<li><a href="https://vanillacss.com">Vanilla CSS</a>: A minimal baseline stylesheet for any web project</li> +<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://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> +<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> +<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> +</ul> +<h2>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> +</ul> +<footer role="contentinfo"> + <h2>Menu Navigation</h2> + <ul id="menu"> + <li><a href="/">Home</a></li> + <li><a href="/projects">Projects</a></li> + <li><a href="/uses">Uses</a></li> + <li><a href="/wiki">Wiki</a></li> + <li><a href="/resume">Resume</a></li> + <li><a href="/colophon">Colophon</a></li> + <li><a href="/now">Now</a></li> + <li><a href="/donate">Donate</a></li> + <li><a href="/atom.xml">RSS</a></li> + <li><a href="#top">↑ Top of the page</a></li> + </ul> + <small> + Built with <a href="https://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/proper-ui-hierarchy/index.html b/build/proper-ui-hierarchy/index.html new file mode 100644 index 0000000..bee9bee --- /dev/null +++ b/build/proper-ui-hierarchy/index.html @@ -0,0 +1,192 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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>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> +</code></pre> +<h3>The CSS</h3> +<pre><code>/* Parent container for the buttons */ +.buttons-container { + background: #E0E9EE; + border-radius: 5px; + display: flex; + padding: 20px; + margin: 0 auto; + max-width: 300px; + width: 100%; +} + +/*Shared button styles */ +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%; +} + +/* Sign up button */ +button:first-child { + background: #2FBC3D; + margin-right: 10px; +} + +/* 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> +<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 */ +button:first-child { + background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%); +} + +/* Log in button */ +button:last-child { + background-image: linear-gradient(-180deg, #489FD2 0%, #0A6DAC 100%); +} +</code></pre> +<h2>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 */ +.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 */ +.buttons-container button { + text-shadow: 0 2px 4px rgba(0,0,0,0.30); +} +</code></pre> +<pre><code>/* 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 */ +.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 */ +.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%; +} + +/* Shared button styling */ +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%; +} + +/* Sign up button */ +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; +} + +/* 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> +<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> + <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/ps4-download-ui/index.html b/build/ps4-download-ui/index.html new file mode 100644 index 0000000..876f532 --- /dev/null +++ b/build/ps4-download-ui/index.html @@ -0,0 +1,152 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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>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>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>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> +</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> +<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 */ +body { + background: linear-gradient(#226AB6 0%, #144E8A 100%) no-repeat; + color: white; + display: block; + font-family: 'Source Sans Pro', sans-serif; + font-weight: 200; + height: 100vh; +} + +/* Wrapper to center content */ +.wrapper { + margin: 0 auto; + max-width: 800px; + padding: 4rem 0 0; +} + +/* Optional PS4 logo */ +.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'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:''; + 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>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"> + <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/public/images/acer-chromebook-11.webp b/build/public/images/acer-chromebook-11.webp Binary files differnew file mode 100644 index 0000000..04c0f32 --- /dev/null +++ b/build/public/images/acer-chromebook-11.webp diff --git a/build/public/images/alpine-1.jpg b/build/public/images/alpine-1.jpg Binary files differnew file mode 100644 index 0000000..9335036 --- /dev/null +++ b/build/public/images/alpine-1.jpg diff --git a/build/public/images/apple-mail-1.png b/build/public/images/apple-mail-1.png Binary files differnew file mode 100644 index 0000000..8f2d14b --- /dev/null +++ b/build/public/images/apple-mail-1.png diff --git a/build/public/images/apple-mail-2.png b/build/public/images/apple-mail-2.png Binary files differnew file mode 100644 index 0000000..cd22215 --- /dev/null +++ b/build/public/images/apple-mail-2.png diff --git a/build/public/images/aqua-ui-css-buttons.webp b/build/public/images/aqua-ui-css-buttons.webp Binary files differnew file mode 100644 index 0000000..0f0cede --- /dev/null +++ b/build/public/images/aqua-ui-css-buttons.webp diff --git a/build/public/images/automator-2.png b/build/public/images/automator-2.png Binary files differnew file mode 100644 index 0000000..523ae04 --- /dev/null +++ b/build/public/images/automator-2.png diff --git a/build/public/images/automator-2.webp b/build/public/images/automator-2.webp Binary files differnew file mode 100644 index 0000000..6660e29 --- /dev/null +++ b/build/public/images/automator-2.webp diff --git a/build/public/images/automator.png b/build/public/images/automator.png Binary files differnew file mode 100644 index 0000000..baa4450 --- /dev/null +++ b/build/public/images/automator.png diff --git a/build/public/images/automator.webp b/build/public/images/automator.webp Binary files differnew file mode 100644 index 0000000..665586d --- /dev/null +++ b/build/public/images/automator.webp diff --git a/build/public/images/avatar.png b/build/public/images/avatar.png Binary files differnew file mode 100644 index 0000000..8a40ae3 --- /dev/null +++ b/build/public/images/avatar.png diff --git a/build/public/images/big-sur-css.webp b/build/public/images/big-sur-css.webp Binary files differnew file mode 100644 index 0000000..d8f42a3 --- /dev/null +++ b/build/public/images/big-sur-css.webp diff --git a/build/public/images/bradley-taunt-photo.webp b/build/public/images/bradley-taunt-photo.webp Binary files differnew file mode 100644 index 0000000..783db28 --- /dev/null +++ b/build/public/images/bradley-taunt-photo.webp diff --git a/build/public/images/bridge.webp b/build/public/images/bridge.webp Binary files differnew file mode 100644 index 0000000..5993ce8 --- /dev/null +++ b/build/public/images/bridge.webp diff --git a/build/public/images/browser-history-01.webp b/build/public/images/browser-history-01.webp Binary files differnew file mode 100644 index 0000000..64ffdc9 --- /dev/null +++ b/build/public/images/browser-history-01.webp diff --git a/build/public/images/browser-history-02.webp b/build/public/images/browser-history-02.webp Binary files differnew file mode 100644 index 0000000..8483487 --- /dev/null +++ b/build/public/images/browser-history-02.webp diff --git a/build/public/images/browser-history-03.webp b/build/public/images/browser-history-03.webp Binary files differnew file mode 100644 index 0000000..cab53a0 --- /dev/null +++ b/build/public/images/browser-history-03.webp diff --git a/build/public/images/browser-history-04.webp b/build/public/images/browser-history-04.webp Binary files differnew file mode 100644 index 0000000..306d47e --- /dev/null +++ b/build/public/images/browser-history-04.webp diff --git a/build/public/images/browser-history-05.webp b/build/public/images/browser-history-05.webp Binary files differnew file mode 100644 index 0000000..c6c077d --- /dev/null +++ b/build/public/images/browser-history-05.webp diff --git a/build/public/images/buttons.webp b/build/public/images/buttons.webp Binary files differnew file mode 100644 index 0000000..093c086 --- /dev/null +++ b/build/public/images/buttons.webp diff --git a/build/public/images/chat-bot-1.png b/build/public/images/chat-bot-1.png Binary files differnew file mode 100644 index 0000000..b42702e --- /dev/null +++ b/build/public/images/chat-bot-1.png diff --git a/build/public/images/chrome-os-devices-2.webp b/build/public/images/chrome-os-devices-2.webp Binary files differnew file mode 100644 index 0000000..d6f22c6 --- /dev/null +++ b/build/public/images/chrome-os-devices-2.webp diff --git a/build/public/images/chrome-os-devices.webp b/build/public/images/chrome-os-devices.webp Binary files differnew file mode 100644 index 0000000..ddfe1a7 --- /dev/null +++ b/build/public/images/chrome-os-devices.webp diff --git a/build/public/images/coffee-couple.svg b/build/public/images/coffee-couple.svg new file mode 100644 index 0000000..d9b5dad --- /dev/null +++ b/build/public/images/coffee-couple.svg @@ -0,0 +1,549 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Generator: Adobe Illustrator 12.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 51448) --> +<svg + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns="http://www.w3.org/2000/svg" + xmlns:cc="http://web.resource.org/cc/" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:ns1="http://sozi.baierouge.fr" + id="Layer_1" + xml:space="preserve" + overflow="visible" + viewBox="0 0 482.062 271.916" + version="1.1" + enable-background="new 0 0 482.062 271.916" + > +<g + clip-rule="evenodd" + fill-rule="evenodd" + > + <path + d="m318.47 7.368c-0.804 0.82-0.825 2.175 1.124 1.685-1.207 2.494-4.285 1.852-7.864 2.808-5.234 1.398-10.568 5.703-15.727 4.494 1.104-3.029 4.981-3.639 7.863-5.055 4.15-2.037 7.34-4.488 14.61-3.932z" + /> + <path + d="m393.17 10.176c6.013 1.292 1.113 10.569-2.247 11.234-0.229 1.353 1.026 1.221 0.562 2.808-2.452-0.767-1.194 2.175-3.37 1.685-0.504-0.993-1.355-1.64-1.685-2.809 2.37-4.198 4.97-8.144 6.75-12.918z" + /> + <path + d="m312.85 12.984c5.957-0.527 9.755 1.104 11.795 4.493-2.963 0.586-5.43-3.835-10.672-2.808-0.36-0.571-1.29-0.581-1.12-1.685z" + /> + <path + d="m338.69 20.848c-1.867-0.182-0.609 2.761-3.37 1.685 0.472 0.652 0.74 1.506 0.562 2.809-0.955 0.207-1.06-0.438-1.123-1.124-1.171-2.013-4.466-1.9-5.056-4.493 3.18-1.615 7.16-3.699 8.99 1.123z" + /> + <path + d="m399.35 20.848h3.37c0.483 0.453 0.334 1.539 1.124 1.685 0.554 2.934-1.966 4.521-3.37 6.179-1.042 1.23-0.454 2.392-1.124 2.808-1.234 0.769-3.419 1.344-5.055 0.562 0.3-5.126 4.61-6.247 5.05-11.234z" + /> + <path + d="m320.15 21.971c5.263 1.491 8.776 6.552 13.479 10.11-1.109 1.324-1.842 3.026-2.246 5.055-6.57-2.22-10.56-7.03-11.23-15.165z" + /> + <path + fill="#FFFFFF" + d="m137.61 25.903c0.987 4.487-5.24 4.317-7.863 3.37-0.741 2.518-8.374 2.294-11.233 4.493-1.23-1.168 0.493-1.815-0.562-2.808-2.062 0.391-4.27 0.969-6.179 0-2.078 0.267-0.988 2.702-1.685 3.932-0.213 0.375-1.553 0.297-1.685 0.562-0.416 0.832 0.93 1.311 0.562 2.247-0.654 1.664-4.165 1.93-2.809 4.494-2.814 0.58-3.825 1.148-5.055 2.247-2.179-4.984 6.714-10.598 10.672-14.604 0.598-0.605 1.755-2.466 2.247-2.808 7.08-4.942 15.62-1.604 23.57-1.125z" + /> + <path + d="m207.26 28.149c0.722 3.295-2.557 4.177-3.932 2.247 0.47-1.58 1.59-2.523 3.93-2.247z" + /> + <path + fill="#FFFFFF" + d="m165.69 28.711c0.454 2.139-1.646 1.724-1.685 3.37-4.191 0.447-5.455-2.035-8.987-2.247 2.78-0.896 6.99-0.011 10.68-1.123z" + /> + <path + fill="#FFFFFF" + d="m142.66 29.834h1.685c0.158 0.907-0.531 0.967-0.562 1.685h-1.124v-1.685z" + /> + <path + d="m208.94 31.52h1.685c11.614 7.438 19.517 26.541 10.672 39.317-2.486 3.591-9.519 7.767-13.48 10.671-4.302 3.155-12.489 10.201-11.795 18.536 0.251 3.016 2.883 5.404 3.37 7.863 1.181-1.401-0.664-4.554-0.562-6.74 3.566 2.161 2.127 11.851 1.124 15.727-3.585-0.215-1.639 5.102-4.494 5.617 0.249-6.213 3.017-9.428 2.247-14.604-0.889-5.98-5.476-9.665-1.685-17.412 0.356-0.727 2.061-2.858 2.809-3.932 2.795-4.009 5.966-5.802 10.11-8.987 4.432-3.405 7.574-5.709 11.234-9.548 4.603-7.774 1.681-18.534-2.809-25.837-3.542-2.075-4.578-6.655-8.425-8.425 0.05-1.535-0.93-1.133 0-2.249zm-10.11 82c-0.97 3.72 1.44-4.54 0 0z" + /> + <path + d="m321.84 35.451c-2.538 0.803-4.396-0.835-7.302-0.562-3.864 0.364-7.527 3.935-10.672 2.808 2.56-5.566 14.02-7.219 17.97-2.246z" + /> + <path + fill="#FFFFFF" + d="m146.6 33.205c0.664-1.513 2.929 0.002 3.932 0-0.85 1.698-2.47-0.466-3.93 0z" + /> + <path + d="m353.85 40.506c-5.591-2.579-14.222-0.668-18.535-3.37 4.78-4.087 17.75-4.253 18.53 3.37z" + /> + <path + d="m366.77 34.89c0.907-0.158 0.967 0.531 1.685 0.562 0.398 3.19-1.655 5.369 1.685 5.617-0.282 2.475-6.309 7.508-7.302 2.247 1.71 0.704 2.185 0.429 3.37-0.562-2.92-2.522 1.52-3.955 0.56-7.864z" + /> + <path + fill="#FFFFFF" + d="m287.58 39.383c2.696-0.263 1.616 3.266 0.562 3.932-1.63-0.011-1.33-3.174-0.56-3.932z" + /> + <path + d="m308.92 39.383h1.685c0.238 1.174-0.385 1.487-0.562 2.247 3.93 0.189 8.214 0.024 10.11 2.247-0.048 2.573-4.059 1.184-5.617 2.247-0.901 0.783-0.598 2.772-1.685 3.37-1.492-0.006-3.208 0.212-3.932-0.562-0.158-1.469 0.205-2.416 1.685-2.247-0.916-1.33-3.297-1.196-4.493-2.247 1.62-1.006 1.84-3.404 2.81-5.055z" + /> + <path + fill="#FFFFFF" + d="m108.96 42.191c-1.407 3.835-5.143 5.342-6.179 9.548-1.175-0.51-1.712-1.658-1.685-3.37 3.03 0.475 3.98-5.662 7.86-6.178z" + /> + <path + d="m358.35 42.753c1.109 0.389 1.497 1.499 1.686 2.809-1.76 0.256-1.8-1.201-1.69-2.809z" + /> + <path + d="m360.6 43.876c0.955-0.207 1.06 0.438 1.123 1.123-0.478-0.103-0.529 0.219-0.562 0.562-0.66-0.09-0.48-1.023-0.56-1.685z" + /> + <path + d="m350.48 46.123c3.29 0.747-2.03 2.653 0 0z" + /> + <path + d="m354.98 46.123c1.532 1.276 2.567 3.05 5.617 2.809 0.074 1.384 0.085 2.706-0.562 3.37-1.531-3.431-3.683 1.665-7.302 1.124 0.157-2.089 3.352-1.142 3.932-2.808-1.664-1.445-3.611 1.606-6.74 0.562 0.16-3.202 3.22-3.512 5.05-5.057z" + /> + <path + d="m371.83 48.37c0.277 4.868-1.273 21.604-7.863 12.357 1.312-0.185 2.32-0.675 3.37-1.124-0.432-2.678 0.793-3.7 2.246-4.493-2.994-1.433-1.348-4.068-3.37-6.178 1.53-0.478 4.07-1.823 5.61-0.562z" + /> + <path + d="m265.67 78.7c-4.098-1.145-7.655-2.829-7.863-7.863 2.123-2.079 1.174-2.851 1.685-6.179 0.255-1.657 1.274-1.672 1.123-2.808-0.91-6.854-8.839-8.983-15.165-11.233-0.158-0.907 0.531-0.967 0.562-1.685 7.2 1.342 15.716 3.159 16.851 10.671 0.645 4.266-3.692 9.383-2.809 12.919 0.92 3.698 6.79 2.77 5.61 6.178z" + /> + <path + fill="#FFFFFF" + d="m289.26 50.617c0.664 0.646 1.985 0.636 3.37 0.562-1.604 3.452-0.961 9.149-5.055 10.11-1.52-3.539 0.77-7.733 1.68-10.672z" + /> + <path + fill="#FFFFFF" + d="m106.72 52.863c0.478-0.104 0.53 0.219 0.562 0.562 0.351 1.334 3.457-0.087 3.932 1.124-0.743 2.814-0.672 6.442-1.124 9.548-2.157-1.213-2.04-4.701-3.37-6.74-2.432-0.185-1.382 3.111-3.932 2.809-0.46-4.202 3.48-4.009 3.93-7.303z" + /> + <path + d="m339.81 53.425c2.904-0.236 2.022 5.716-0.562 5.055-0.1-2.459 1.83-2.888 0.56-5.055z" + /> + <path + d="m345.99 54.548c5.376 4.736-3.405 12.205-8.426 12.918-0.418-2.034-2.33-2.909-1.123-5.055 4.755 0.449 6.751-1.861 9.549-3.37v-4.493z" + /> + <path + d="m307.24 59.603c3.829 0.477 5.378 3.235 6.74 6.179-3.38 1.474-7.52-3.509-6.74-6.179z" + /> + <path + d="m299.93 60.165c1.729 0.331 3.976 0.144 3.932 2.247-2.05-0.001-4.33 0.218-3.93-2.247z" + /> + <path + d="m421.26 61.85c1.254 5.747-4.083 4.903-4.493 8.987-4.018-0.087-4.586 3.277-8.425 3.37-0.151-5.815 5.646-10.419 9.549-14.042 1.18 0.503 2.49 0.873 3.37 1.685z" + /> + <path + d="m362.84 63.535c2.583 0.787 1.437 5.304 2.247 7.863-3.222 2.774-3.78 11.192-10.672 8.425 0.16-2.274 4.436-0.433 4.493-2.809-0.084-1.039-1.901-0.345-2.246-1.124 0.389-1.109 1.498-1.497 2.809-1.685-1.47-4.028 4.97-4.682 3.37-10.67z" + /> + <path + fill="#FFFFFF" + d="m111.77 65.22c1.364 1.069 1.557 3.311 2.809 4.493-1.9-0.419-4.29-2.463-2.81-4.493z" + /> + <path + d="m343.74 66.343c3.562 0.441 7.436 0.128 5.056 3.932 2.134-0.112 2.131-2.362 4.493-2.247-0.555 3.825-7.436 6.19-10.11 2.809 0.476-0.835 1.809-0.813 2.809-1.124-0.35-1.523-2.35-1.398-2.25-3.37z" + /> + <path + d="m149.97 70.275c0.042 2.85-4.402 1.214-6.178 2.247 0.22-3.06 3.49-3.12 6.18-2.247z" + /> + <path + fill="#FFFFFF" + d="m160.08 72.522c0.46-0.962 4.062-0.362 3.932 1.123-2.05 0.365-2.99-0.378-3.93-1.123z" + /> + <path + d="m155.02 73.083c-1.187 2.097-3.568 3.007-5.617 4.493-1.796 1.303-3.637 3.875-5.055 4.494 0.117-0.051-3.478-1.435-3.932 0.562-1.697-1.58-0.603-2.66-2.247-4.493 1.677-0.738 5.575-4.678 7.302-1.685 3.13-1.189 4.9-3.729 9.56-3.371z" + /> + <path + d="m351.05 83.755c0.834-0.245-0.222-0.719 0-1.685 2.56 0.086 2.204 0.464 4.493 0 0.869 0.816 0.495 2.875 0.562 4.493 0.833-0.477 1.207-1.414 1.123-2.808 2.055 2.813 0.233 9.502 3.37 11.233-2.457 1.324-5.381-1.504-6.74-2.809-4.228-4.056-8.055-10.921-9.549-17.412 3.67 1.583 4.14 6.354 6.75 8.988zm3.37 2.247c0.537 4.292 1.521-0.257-0.562-1.685-0.21 0.796 0.5 1.204 0.56 1.685z" + /> + <path + fill="#FFFFFF" + d="m110.09 77.577c0.307 0.816-0.656 2.903 0.562 2.809-1.146 1.823-1.421-1.896-2.809-1.685 0.14-0.989 0.97-1.281 2.25-1.124z" + /> + <path + fill="#FFFFFF" + d="m124.69 77.577c1.517 0.502-0.261 2.28-1.685 1.685-0.17-1.295 1.63-0.624 1.69-1.685z" + /> + <path + fill="#FFFFFF" + d="m120.76 78.139c-0.091 0.653 0.124 0.999 0.562 1.123-0.529 1.531-2.833 1.286-4.493 1.685 0.48-1.766 2.16-2.329 3.93-2.808z" + /> + <path + d="m156.15 78.7c0.907-0.158 0.967 0.531 1.685 0.562 0.23 1.354-1.025 1.221-0.562 2.809-1.45-0.064-1.13-1.882-1.13-3.371z" + /> + <path + d="m266.23 78.7c2.271 0.681 1.066 6.853-0.562 7.302-0.29-3.463 1.73-4.381 0.56-7.302z" + /> + <path + fill="#FFFFFF" + d="m117.95 85.44c-0.368 2.747-3.515-0.779-4.494 1.123-0.862-2.133-2.893-3.098-2.247-6.74 5.3-3.027 2.36 5.97 6.74 5.617z" + /> + <path + d="m151.65 80.385c0.653-0.091 1 0.124 1.124 0.562 0.685 4.646-5.083 10.082-2.247 16.85 3.517 0.708 1.539-4.078 5.055-3.37-0.404 2.591-1.499 4.492-3.37 5.617-1.984-0.263-3.075-1.419-4.493-2.247-0.65-7.756 1.32-12.907 3.93-17.408z" + /> + <path + d="m369.02 82.07h1.686c0.158 1.469-0.205 2.416-1.686 2.247-0.94-1.116 0.05-0.714 0-2.247z" + /> + <path + d="m362.84 83.755c2.656 0.152 1.746 3.871 3.37 5.055-1.35 0.764-3.44-2.526-3.37-5.055z" + /> + <path + fill="#FFFFFF" + d="m353.85 84.317c2.082 1.428 1.099 5.978 0.562 1.685-0.05-0.481-0.76-0.889-0.56-1.685z" + /> + <path + d="m140.98 84.878c2.397 1.817 4.522 6.582 3.932 9.549-2.356-1.014-3.477-3.263-3.37-6.74-1.818-0.694-0.43 1.817-2.247 1.123 0.15-1.726 1.22-2.526 1.69-3.932z" + /> + <path + d="m429.12 92.742c-0.944-4.124 11.136-12.079 10.109-3.932-0.35 2.734-5.59 5.614-10.11 3.932z" + /> + <path + d="m155.58 85.44c-0.045 1.827-0.718 3.026-2.247 3.37 0.11-1.772 0.4-3.35 2.25-3.37z" + /> + <path + d="m361.16 85.44c1.467 1.341 1.898 3.718 2.247 6.178-0.956-0.207-1.06 0.438-1.124 1.124-3.085 0.277-1.474-4.143-2.808-5.617 0.49-1.545 2.27 1.309 1.68-1.685z" + /> + <path + fill="#FFFFFF" + d="m119.64 86.002c1.3 0.572 2.614 1.13 2.808 2.808h-4.493c-0.61-2.095 2.1-0.889 1.68-2.808z" + /> + <path + d="m134.8 89.372c-0.611 1.261-1.305 2.44-1.685 3.932-2.404 0.71-2.778-0.041-5.617 0 0.37-3.133 4.86-4.697 7.3-3.932z" + /> + <path + d="m56.729 89.372c6.384 1.105 9.605 5.373 10.11 12.357-2.692 0.863-4.151-1.395-5.617-2.809-1.132-1.091-0.979-0.649-1.685-2.809-0.654-1.999-3.687-2.703-2.808-6.74z" + /> + <path + d="m98.293 89.934c0.455 0.107 0.56 0.563 1.123 0.562-0.106 0.455-0.563 0.56-0.562 1.124-0.455-0.107-0.56-0.563-1.124-0.562 0.108-0.456 0.564-0.561 0.563-1.124z" + /> + <path + fill="#FFFFFF" + d="m262.3 90.495c2.75-2.078 3.37 1.731 0 0z" + /> + <path + fill="#FFFFFF" + d="m284.77 91.619c-4.319 1.129-11.128-0.1-15.727-0.562 3.19-2.025 11.88-0.439 15.73 0.562z" + /> + <path + fill="#FFFFFF" + d="m370.14 91.619c2.592 2.838 5.777 5.082 6.74 9.548-2.96-1.431-7.5-5.895-6.74-9.551z" + /> + <path + d="m54.482 105.1c-6.974 1.591-9.046-6.203-12.357-10.11-0.674-0.738-0.219-0.883 0-1.685 4.314-2.148 10.321 7.555 12.357 11.795z" + /> + <path + fill="#FFFFFF" + d="m255.56 92.742c0.971 1.276 1.355 3.138 1.123 5.617-2.066-1.117-4.26-2.106-5.055-4.494 1.22-0.47 1.93-1.454 3.94-1.123z" + /> + <path + d="m131.99 93.865h2.247c0.66 1.95-3.14 2.612-2.25 0z" + /> + <path + fill="#FFFFFF" + d="m282.52 95.55c1.717-0.406 2.047 0.574 3.37 0.562-0.01 0.858-4.16 1.232-3.37-0.562z" + /> + <path + fill="#FFFFFF" + d="m290.95 95.55c0.531 2.03-2.213 0.784-3.37 1.124 0.06-1.435 1.88-1.115 3.37-1.124z" + /> + <path + d="m115.7 96.112c0.327 2.012-1.662 1.708-3.37 1.685 0.51-1.174 1.66-1.713 3.37-1.685z" + /> + <path + fill="#FFFFFF" + d="m311.73 97.235c2.993 1.191 7.419 4.781 5.056 7.863-2.46-1.86-4.27-4.35-5.06-7.865z" + /> + <path + fill="#FFFFFF" + d="m366.77 97.235c0.907-0.158 0.967 0.531 1.685 0.562 0.64 4.667 6.447 6.945 5.055 11.795-3.447-1.794-3.643-6.841-6.739-8.987 0.952 4.29 3.81 6.675 5.616 10.11-0.575 2.982-1.752 5.363-1.685 8.987-3.528-3.024-5.91-7.196-8.426-11.233 0.285-1.774 1.653-2.465 1.686-4.493 2.464 2.216 3.897 5.464 6.74 7.302 0.551-3.369-5.085-5.393-6.179-8.987 0.32-2.1 2-2.855 2.23-5.055z" + /> + <path + fill="#FFFFFF" + d="m370.14 97.797c3.271 1.583 2.204 5.041 6.179 5.055 0.074 1.385 0.085 2.706-0.562 3.37-2.78-1.9-4.35-5.01-5.62-8.423z" + /> + <path + fill="#FFFFFF" + d="m255.56 101.73c2.316 0.304 2.939 2.303 3.932 3.932-1.833 1.796-3.813-1.027-5.055-1.685 0.29-0.84 0.83-1.42 1.12-2.25z" + /> + <path + fill="#FFFFFF" + d="m380.25 102.29c5.509 1.423 10.312 5.096 15.728 9.548 4.062 3.34 8.838 6.6 11.795 9.548 2.639 2.632 4.285 5.983 6.74 7.864 4.079 3.126 9.55 3.946 8.986 11.795-0.194 2.714-2.819 5.12-3.37 7.864-0.479 2.387 0.899 4.812 1.123 7.302 0.683 7.59 0.47 15.259-2.808 23.028-7.607 5.312-20.106 5.117-30.331 2.809-0.382-2.239-1.224-4.019-1.123-6.74-8.443-4.85-11.745-14.841-12.356-27.522 1.529-7.282 5.25-13.709 7.863-21.343-5.914 2.324-5.484 10.991-10.11 14.604 0.298 3.481-0.269 6.097-1.123 8.425 0.127 0.809 1.676 0.195 1.685 1.123-0.75 8.053 2.326 12.278 4.493 17.412-1.981-0.077-2.511-1.607-4.493-1.685-0.977 6.972 7.383 9.465 10.11 14.604 2.021 0.975 4.688 1.303 5.055 3.932-3.445-0.674-4.525-3.713-9.548-2.809-0.445 4.811 5.804 5.087 9.548 3.932-1.457 12.969-2.83 25.993 0 38.756 3.092-6.665-1.592-21.775 3.932-27.522-2.855-2.534 3.248-1.789 1.124-5.055 2.793-0.203 3.34-2.651 4.493-4.494 8.548 0.123 14.533-2.317 20.782-4.493-0.319 23.607 0.608 49.39-9.549 64.031-26.793-3.163-45.775-14.136-60.661-29.207-0.418-1.729 1.542-1.08 1.124-2.809-10.533 0.978-17.546-5.903-24.714-10.11-0.763 0.174-0.466 1.406-0.562 2.247-2.108-0.7-4.146-1.472-6.74-1.686-0.547-2.231 3.139-0.23 2.809-2.246-3.239-1.727-7.286 0.565-10.11 1.123 6.406-8.163 18.263-1.663 30.33-0.562 6.822 0.622 10.901 2.122 16.851 5.055 1.994 0.983 3.762 1.985 5.616 2.809 4.15 1.841 7.316 2.741 10.11 5.616 3.976-1.42 7.259 2.389 12.357 1.686-4.225-5.698-12.909-6.938-19.659-10.11 1.428-2.359 5.352 0.987 7.302 1.686 3.567-1.114 9.147-0.214 11.233-2.809-0.062-1.397-1.052-1.739 0-2.809-1.311-3.243-6.388-0.749-8.986-1.685-1.788-1.744 2.715-2.946 1.123-4.494-3.671-0.487-1.785 4.58-5.616 3.932-0.451-1.948 0.836-2.158 0.562-3.932-2.549-0.302-1.5 2.994-3.932 2.809-0.519-2.577 1.405-2.714 1.123-5.055-2.188-1.18-2.992 3.186-4.493 4.493-1.38-1.599 1.304-3.914 1.123-6.179-2.753-1.902-1.878 3.905-4.493 3.932-0.191-2.812 2.14-3.102 1.685-6.178-3.383 0.549-2.669 5.193-6.178 5.616 0.687-2.121 2.445-3.171 2.246-6.178-0.906-1.89-1.778 1.766-2.809 0 0.515-4.305-2.486-7.042 0-10.11-0.725-7.275-5.397-12.592-11.233-16.289 1.639-3.408 8.714-3.126 6.74-8.425 6.432-1.053 13.934-0.505 17.974-5.055v-7.302c-3.374-3.442-3.418-10.397-5.055-15.727-1.12-3.646-5.727-8.519-1.686-11.234 1.362 7.812 2.614 15.734 9.549 17.974 1.049 0.999-0.456 1.428 0 3.37 2.144 0.262 1.064-4.388 0.562-5.055-4.534-0.896-5.531-5.328-7.863-8.425 1.559-1.882 2.627 1.454 3.932 1.685 0.215-2.087-2.276-1.469-1.685-3.932 1.583 0.101 0.7 2.669 2.808 2.247-1.556-4.623-4.922-7.435-6.178-12.357 2.843 3.522 7.349 5.382 7.302 11.795 2.468-3.431 0.809-6.169 1.685-9.548 1.4-5.28 6.42-8.35 7.89-13.46z" + /> + <path + d="m142.66 110.15c-1.719-1.089-2.316-3.3-3.37-5.055 2.29-1.44 2.96 2.83 3.37 5.05z" + /> + <path + d="m329.14 107.35c2.169-0.109 3.228 0.892 3.37 2.808-0.064 1.996-1.858 2.26-3.932 2.247 0.11-1.77-0.38-4.13 0.56-5.06z" + /> + <path + d="m138.73 111.84c3.237 0.303 3.635 5.225 2.809 7.863-2.14-1.41-2.41-4.7-2.81-7.86z" + /> + <path + d="m304.99 113.52c1.598 0.749-0.434 2.498-0.562 3.37-2.23-0.56 0.09-2.26 0.56-3.37z" + /> + <path + fill="#FFFFFF" + d="m361.72 114.65c1.666 0.955 1.89 3.353 2.809 5.055-1.65-0.97-2.61-2.63-2.81-5.05z" + /> + <path + d="m303.86 117.46v2.247c-2.16 0.43-2.16-2.7 0-2.25z" + /> + <path + d="m275.78 136.55c-2.732-2.455 0.771-5.709 0.562-8.425-0.349-4.531-3.845-4.801-5.617-8.425 6.38-1.05 12.17 12.62 5.06 16.85z" + /> + <path + d="m44.934 120.83c0.653 1.781 1.562 3.307 3.37 3.932-2.546 3.934-10.173 0.667-9.548-3.932 2.953-2.62 3.645 1.11 6.178 0z" + /> + <path + d="m309.48 123.07c0.69 0.245 1.153 0.719 1.123 1.685-0.69-0.25-1.15-0.72-1.12-1.69z" + /> + <path + d="m28.646 129.81c-0.198 1.862-1.683 2.437-2.809 3.37-3.257-1.798-7.683-2.427-9.548-5.617-1.083 0.228-0.444 2.177-2.247 1.685 0.035-10.72 11.749-2.39 14.604 0.57z" + /> + <path + d="m311.17 130.37c0.793-1.294 3.658 0.042 3.37 1.685-1.68-0.01-1.91-1.46-3.37-1.69z" + /> + <path + fill="#FFFFFF" + d="m187.04 132.62c5.278-1.659 13.975 1.331 18.536 0 1.829 2.232-5.474 0.122-5.617 2.247 1.01 3.307 4.767 1.163 7.302 1.123 2.355-0.037 4.752 0.678 6.74 0-0.597 3.335-5.637 2.227-7.302 4.494 1.154 2.97-0.758 4.386-1.685 6.74-11.148 0.29-17.523-4.194-19.658-12.918 3.354 0.271 9.229 3.148 11.795 0.562-1.39-2.73-7.09-1.15-10.12-2.24z" + /> + <path + fill="#FFFFFF" + d="m210.07 132.62c1.805 0.634-0.541 1.604-1.685 1.124 0.17-1.95 1.52 0.05 1.69-1.12z" + /> + <path + fill="#FFFFFF" + d="m322.96 139.36c0.907-0.158 0.968 0.531 1.686 0.562-0.319 3.238-1.558 5.558-2.247 8.426 2.5-1.433 1.386-6.479 4.494-7.302 0.941 2.269-3.47 4.006-2.247 8.425-0.882 0.241-0.48 1.767-2.247 1.123-0.106 4.039 1.711 6.152 2.247 9.549-5.67-2.63-4.5-15.94-1.68-20.79z" + /> + <path + fill="#FFFFFF" + d="m365.65 142.17c-0.569 3.536 0.533 5.821 1.686 10.11-0.653-0.092-1 0.124-1.124 0.562-3.348-0.959-2.579-6.033-2.808-10.11 0.74-1.38 1.69 1.01 2.24-0.56z" + /> + <path + fill="#FFFFFF" + d="m361.16 143.85c2.491 1.979 1.435 5.656 2.247 10.11-1.385 0.074-2.707 0.085-3.37-0.562 0.086-1.786 1.273-2.471 1.123-4.493-2.091-0.031-1.62 2.499-1.685 4.493-1.175 0.323-1.604 1.393-3.37 1.123-0.057-2.864 2.332-3.284 2.808-5.616-3.819-1.003-2.998 7.479-7.863 7.302 0.481-4.948 5.884-4.976 6.179-10.11 1.21-0.82 3.01-1.09 3.92-2.24z" + /> + <path + fill="#FFFFFF" + d="m324.65 150.59h1.123v1.124h-1.123v-1.12z" + /> + <path + fill="#FFFFFF" + d="m349.92 151.72c2.01 1.364-0.979 6.169-4.493 5.616 0.62-2.76 3.41-3.34 4.49-5.62z" + /> + <path + fill="#FFFFFF" + d="m424.06 152.28c0.888 2.482 1.731 5.009 1.686 8.425-2.04-1.32-1.25-5.49-1.69-8.42z" + /> + <path + fill="#FFFFFF" + d="m325.77 154.53c1.888-0.576 0.875 1.747 1.124 2.809 0.141 1.878 3.281 2.615 1.685 4.493-2.52-0.85-3.07-3.67-2.81-7.3z" + /> + <path + fill="#FFFFFF" + d="m343.74 155.09c2.76 0.9-1.704 6.152-3.37 4.494 0.19-2.43 3.28-1.96 3.37-4.49z" + /> + <path + fill="#FFFFFF" + d="m425.19 162.39c1.66 6.856 0.622 15.659 1.123 24.152 0.562 9.52-0.613 20.797-0.562 28.646 0.012 1.771 1.069 3.467 0.562 5.055-1.216 3.8-7.045 4.235-6.74 8.426 2.312 2.171 5.455-1.074 8.425 1.685-2.018 4.16-5.788 6.568-10.672 7.863-1.688-5.376 0.829-10.508 1.686-16.85 1.247-9.233 1.464-20.021 1.685-32.016 0.072-3.924-0.196-8.248 0.562-11.233 0.478-1.877 2.126-3.108 2.809-5.056 1.3-3.73 0.31-7.22 1.12-10.67z" + /> + <path + d="m232.53 168.57c4.492 2.612 4.753 10.294 1.124 14.042-2.568-1.376-0.567-6.079 0.562-7.302-0.08-2.56-3.31-4.26-1.68-6.74z" + /> + <path + fill="#FFFFFF" + d="m332.51 171.38c2.875 1.057 2.716 5.147 3.932 7.863-1.583 1.303-3.511-0.648-6.178 0-0.84-4.21 1.15-5.59 2.25-7.86z" + /> + <path + fill="#FFFFFF" + d="m384.75 176.43c0.71-1.691 2.295 1.25 1.124 1.686-0.81-0.13-0.2-1.68-1.12-1.69z" + /> + <path + d="m229.16 179.24c-0.545 3.574-1.795 6.443-5.055 7.302 1.51-2.61 1.44-6.8 5.06-7.3z" + /> + <path + fill="#FFFFFF" + d="m318.47 183.73c1.566 0.914 5.178 1.99 3.932 3.932-1.8-0.81-3.65-1.58-3.93-3.93z" + /> + <path + d="m231.97 185.42c0.653-0.092 1 0.124 1.124 0.562-0.839 3.25-2.529 6.614-3.932 9.549-1.394 2.914-2.447 6.769-5.617 7.863 1.04-7.77 5.79-11.82 8.43-17.97z" + /> + <path + fill="#FFFFFF" + d="m330.83 187.66c1.326 1.876-0.68 4.303-1.124 6.179-3.013-1.021-7.093-3.625-6.74-6.179 2.32-0.66 4.72 2.33 7.86 0z" + /> + <path + d="m1.123 193.28c7.722 0.517 12.068 4.408 19.659 5.055 11.602 6.603 22.691 13.072 32.577 21.344 4.936 4.13 8.969 8.92 13.48 13.48 4.383 4.431 9.877 8.577 12.356 14.604-8.045-2.603-12.165-10.587-17.974-16.289-8.1-7.949-16.588-14.904-26.96-21.343-4.599-2.855-9.801-6.29-15.166-8.426-1.272-0.506-3.196-0.108-4.493-0.562-2.052-0.717-4.056-2.49-6.179-3.37-2.216-0.919-4.375-1.609-6.74-2.246-0.434-0.49-0.602-1.26-0.56-2.24z" + /> + <path + d="m260.06 201.71c-11.317-1.771-17.075-0.728-28.645-2.246 0.875-2.516 3.854-1.097 6.178-1.124 5.138-0.06 10.09 0.316 14.042 1.124 3.22 0.66 8.49-1.55 8.42 2.25z" + /> + <path + d="m11.795 201.71c-1.174 0.238-1.487-0.385-2.247-0.562 0.101-1.63 2.67-1.36 2.247 0.56z" + /> + <path + fill="#FFFFFF" + d="m215.12 207.32c-0.873 2.795 0.009 4.029-0.562 7.302-3.803-2.578-6.06 3.827-7.864 6.74-1.492 0.005-3.208-0.213-3.932 0.562-0.146 1.645 1.27 1.726 1.124 3.37-1.645 0.146-1.726-1.271-3.37-1.124-1.238 1.187 0.721 1.66 0.562 3.37-1.353-0.229-1.221 1.026-2.808 0.562-0.333 1.793 1.054 1.737 0 2.809-1.533 0.051-1.131-0.936-2.247 0 1.125 2.064 0.051 3.776 0 6.179-3.938-2.054-6.506-5.476-12.356-5.617 5.837-8.578 11.823-17.009 15.727-27.521 6.94-0.57 11.26 1.48 15.73 3.37z" + /> + <path + d="m39.317 204.52c12.198 5.579 21.169 15.854 30.331 25.275 2.956 3.04 6.547 5.863 8.987 8.986 1.628 2.085 3.646 4.896 3.37 7.864-2.814 0.341-0.483-1.257-1.685-2.809-9.837-10.39-18.955-21.078-30.331-30.331-3.576-2.92-7.756-5.16-10.672-8.99z" + /> + <path + d="m87.06 244.39c-12.118-12.222-23.235-25.443-37.632-35.386-0.297-0.451-0.586-0.912-0.562-1.685 2.759 0.316 4.959 2.878 7.302 4.493 2.534 1.747 5.697 3.108 7.863 5.055 2.668 2.397 4.898 5.726 7.863 8.426 1.5 1.365 2.965 2.378 4.494 3.932 3.823 3.89 8.254 9.33 10.672 15.17z" + /> + <path + d="m463.38 207.32c1.256 0.407 0.271 3.202-1.123 2.809-0.09-1.39 0.88-1.74 1.12-2.81z" + /> + <path + d="m57.853 248.33h-13.48c-5.867-9.235-12.77-18.004-21.344-25.275-3.556-3.016-8.197-4.326-8.986-10.11 6.205-3.205 16.632 5.277 23.59 11.233 6.826 5.844 12.854 11.277 16.851 16.289 1.165 1.45 1.769 6.18 3.369 7.86z" + /> + <path + d="m279.71 218.56c1.887-0.577 0.874 1.747 1.123 2.809 1.422 1.573 3.244 2.747 4.493 4.493 13.762 5.351 37.009 6.929 54.482 4.493-2.339 1.405-5.061 2.428-6.74 4.493-16.206 1.979-37.051 1.851-51.112-6.74 0.39-4.05-4.52-5.41-2.24-9.54z" + /> + <path + d="m325.77 224.17c-9.898-1.521-18.836-4.005-30.892-3.37 3.949-2.015 9.28-1.933 15.165-1.123 3.726 0.513 8.481 0.915 11.233 1.686 1.53 0.42 3.88 1.25 4.5 2.8z" + /> + <path + d="m337 222.49c1.43 0.068 2.179 0.817 2.247 2.247-0.66-0.84-2.33-0.67-2.25-2.25z" + /> + <path + fill="#FFFFFF" + d="m230.85 226.42c-0.028 4.277-4.042 4.57-5.055 7.863-1.429-3.24 0.377-4.952 0-8.425 0.74-0.58 3.75-0.02 5.05 0.56z" + /> + <path + d="m355.54 232.04h3.37c0.27 1.768-0.8 2.196-1.123 3.37-1.33-0.55-2.76-0.99-2.25-3.37z" + /> + <path + d="m357.22 239.34c-0.229 1.082-2.178 0.443-1.686 2.246 1.611 1.946 6.307 0.809 8.426 2.247-5.259 2.401-12.487-0.687-19.659-0.562-1.836 0.031-4.445 0.247-6.178 0.562-6.408 1.162-16.919 7.051-20.221-1.124 6.562 1.045 15.025 0.878 20.221-1.123 0.576-1.887-1.747-0.874-2.809-1.123 2.539-1.554 6.313-1.573 8.986-1.686 4.2-0.19 9.12 0.11 12.92 0.55zm-2.8 1.12c-3.335-0.529-5.604 1.083-7.863 0 0.94 1.38 7.76 3.02 7.86 0z" + /> + <path + d="m318.47 239.34c1.385-0.074 2.706-0.086 3.37 0.562-0.01 0.86-4.16 1.23-3.37-0.56z" + /> + <path + d="m325.77 239.34c0.577 1.887-1.746 0.874-2.809 1.123-0.57-1.88 1.75-0.87 2.81-1.12z" + /> + <path + fill="#FFFFFF" + d="m346.55 240.46c2.26 1.083 4.528-0.529 7.863 0-0.09 3.02-6.91 1.38-7.86 0z" + /> + <path + d="m446.53 241.02c0.158 1.469-0.205 2.416-1.685 2.247-0.15-1.47 0.21-2.41 1.69-2.25z" + /> + <path + d="m312.29 126.44c0.431-2.836 1.554 1.769 3.37 1.124 1.478-4.358-3.435-6.774-5.617-10.11-2.35-3.591-3.247-6.537-7.302-5.617 0.08-2.167 1.897-2.595 1.685-5.055-4.572 1.231-6.015 5.593-5.616 11.795-1.675 4.095-3.478 8.974-3.37 14.042 0.027 1.319 0.918 2.13 1.123 3.37 0.878 5.305-2.632 9.131-3.932 13.48 10.208 1.213 15.779 7.062 20.782 13.48-0.629-9.059-6.922-15.352-5.617-23.029 2.589 2.165 3.337 6.103 4.494 9.549 2.043 6.085 4.265 12.363 3.932 20.22 3.261-1.606 4.811-4.924 8.986-5.616-0.779-1.842-2.581-2.661-3.932-3.932-1.701-4.237-2.676-9.911-1.123-14.604-1.349-1.46-0.783-4.834-1.686-6.74-2.468-0.916-3.899-4.54-7.302-2.809-0.588-2.29-1.237-3.27-3.932-2.247 0.784-3.218-1.139-3.729-2.246-5.055 0.434-2.785 0.754-3.743-1.124-5.055 0.735-1.887 0.663-4.579 2.809-5.055 0.337 0.841-1.194 2.303-1.123 3.37 0.024 0.374 1.349 0.811 1.685 2.247 0.243 1.037-0.579 2.755-0.562 2.808 0.257 0.765 1.129 0.796 1.685 1.685 1.911 3.057 0.245 1.763 2.809 3.932 1.901 1.609 0.775 0.277 4.494 1.685 1.127 0.427 1.547 2.867 3.932 1.124 2.066 0.611 2.651 3.57 5.616 1.685 0.663 2.333 3.331 2.66 5.056 3.932-1.559 3.055 0.42 6.66-3.37 7.864 1.832 4.343 1.244 7.951 3.932 12.356 2.884-0.04 6.925-2.301 7.863 0.562 2.391-0.723-0.055-2.791 0.562-5.055 2.92-1.762 5.053-4.309 6.74-7.302 6.623-2.364 12.154-5.819 17.412-9.549 2.852-8.108-4.747-13.568-5.056-20.22-0.061-1.304 0.81-3.143 1.124-6.178 0.3-2.902 1.424-2.81 0-5.617-0.024-2.083 2.105-2.013 2.808-3.37-1.396-5.039 4.043-6.863 3.932-12.357 3.397-1.283 3.481-5.88 6.179-7.863 2.145 1.878 0.301 3.783 1.123 6.178 2.013 5.857 10.361 9.546 16.289 12.918 4.332 2.465 8.546 4.915 12.356 7.864 2.066 1.599 5.86 3.844 7.863 6.178 1.542 1.796 1.966 4.219 3.37 6.179 0.465 0.647 3.275 1.259 1.686 2.808 1.354 0.23 1.221-1.026 2.809-0.562 2.964 2.465 5.696 5.162 7.302 8.987 15.937 4.648 29.106 16.694 34.823 32.016 1.255 3.363 1.864 8.253 2.809 12.356 0.36 1.565 2.463 3.048 0.562 4.493 1.147 1.334 2.223-0.771 3.37 0.562-1.278 0.871-1.061 1.17-0.562 2.809-2.198 0.888-1.163-1.458-2.247-1.685-2.071 4.91-0.034 9.461-0.562 14.042-0.152 1.319-1.115 1.767-1.685 3.369-1.012 2.844-0.708 6.752-1.686 8.987-0.943 2.158-3.55 3.221-3.37 7.302 2.106-0.515 2.296-2.946 3.37-4.493 1.344 3.788-3.312 6.415-5.055 8.986 0.226 3.222-1.097 4.896-1.686 7.302 5.689-5.356 7.862-14.23 11.233-21.905 1.245-0.309 0.8 1.072 1.686 1.124 3.504-11.661 6.112-26.787 2.246-41.003-0.233-0.858-0.771-2.507-1.123-3.37-0.415-1.02-0.788-2.046-1.123-2.808-5.348-12.171-14.872-23.118-23.591-29.769-6.873-2.863-12.97-6.501-19.658-9.548-2.453 0.019-5.075 0.207-6.179-1.124 1.884-2.114 5.729-0.544 7.863 0 6.805 1.735 10.97 4.405 16.851 7.863 3.229 1.899 7.153 3.465 9.549 5.617 4.216 3.788 6.302 9.257 10.672 12.357 0.596 2.961 2.188 4.925 3.932 6.739 0.913 6.425 5.757 11.793 5.055 17.974 1.689 0.566 0.995-1.251 1.123-2.246 2.54 3.776 1.229 8.383 1.686 14.604 2.207-4.274 1.271-8.255 1.685-14.042 1.806 4.278 0.756 8.132 1.124 14.042 2.592-1.34-0.541-8.404 2.808-8.987-1.79-14.347-9.624-26.91-16.85-37.632-1.175-0.323-1.604-1.393-3.37-1.124 0.071-1.007-0.688-1.185-0.562-2.247-6.117-3.619-12.116-7.355-18.535-10.672 2.775-2.796 5.945 2.787 10.109 2.247 11.676 8.128 24.967 21.493 29.769 40.441 3.29 12.977 3.091 29.716 0 43.811-0.257 1.176-1.448 2.125-1.685 3.37-1.104 5.827-2.596 11.23-5.055 16.288-1.849 3.802-2.593 4.119-6.179 5.617-0.778-0.345-0.085-2.162-1.123-2.247-2.621 3.933-5.312 7.795-11.233 8.425-1.419-8.529 8.159-13.41 7.302-21.343-4.732 5.94-6.626 14.718-11.796 20.22-3.288-3.095 4.717-6.576 2.809-10.11-1.857 0.502-1.294 3.421-3.932 1.686-0.804 2.753-3.453 3.661-4.493 6.179-2.774-0.596-3.646-3.096-4.493-5.617-3.251-0.068-1.567 4.798-4.494 5.055v-2.808c-3.287-0.515-4.833-3.633-5.055-5.617-1.301 4.691-4.978 7.005-8.425 9.549 5.229 5.319 15.894 11.12 13.479 22.467-0.951 4.475-5.093 6.354-8.425 9.548h-7.863c8.267-3.872 14.883-12.269 8.425-21.343-2.942-4.136-8.167-9.282-11.795-10.672-2.538 6.017-3.287 13.33-12.919 11.795-1.246-0.199-2.139-1.263-3.37-1.686-4.666-1.602-9.067-2.203-13.479-3.932-1.965-0.77-3.694-1.826-5.617-2.808-1.734-0.886-3.098-2.308-5.055-3.37-0.214-0.116-1.064 0.833-1.686 0.562-0.472-0.207-0.234-1.513-0.562-1.686-1.111-0.584-2.553-0.086-3.37-0.562-1.645-0.957-3.437-2.781-5.616-4.493-3.188-2.502-6.61-4.227-7.863-7.302-7.952-3.47-12.68-10.162-22.468-11.795-0.715-2.655-3.347-3.394-5.055-5.056-7.461-0.062-14.689-2.954-21.905-3.932-3.094-0.419-7.425 0.859-9.549-2.246 8.052-0.05 14.272-4.393 21.344-5.056 2.252-0.211 4.719 1.726 6.74-0.562-2.821-5.604-8.042-8.809-8.986-16.288-0.381-1.305-1.435-1.937-2.247-2.809-0.013-1.323 0.968-1.653 0.562-3.37-3.46-0.481-2.876 3.952-3.932 6.179-2.425 5.117-6.723 10.596-10.672 15.165-5.026 5.816-12.892 9.952-17.974 13.48-4.945 3.433-10.351 10.713-16.85 3.932-2.387-10.316-5.326-21.011-5.056-34.263 0.086-4.193 2.051-8.6 2.247-13.479 0.058-1.449-0.75-2.505-0.562-3.933 0.833-6.315 3.5-13.074 4.493-19.097 1.261-7.651-0.998-13.941-5.617-17.412-3.173-2.385-8.31-3.496-11.795-5.055-3.646-1.631-8.323-5.702-3.37-9.548 3.284-0.288 4.032 1.958 6.74 2.247 1.508-1.728-2.702-2.515-2.247-5.055 2.286-3.268 2.056-5.754 3.933-8.987-1.087-2.658-5.012-2.477-5.617-5.617 0.51-3.672 4.711-4.751 7.863-2.808 0.965-0.721 1.128-2.242 2.247-2.809 11.658-1.373 28.548-0.84 37.07 5.617-1.685 8.8-4.229 16.74-12.356 19.097 1.993 6.851 4.653 15.92 0 21.905-1.673-2.365 0.409-7.363 0-11.795-0.257-2.774-1.921-4.966-1.686-7.302-0.137-1.736-2.795-0.949-2.247-3.37 6.976-1.637 11.646-5.578 12.919-12.918-7.495-1.157-16.17 1.392-22.467-1.685 0.986-4.215 7.882 0.844 10.672-1.685-6.906-0.957-13.665-2.062-20.782-2.808 1.194 3.112 8.146 0.467 8.425 4.493-2.488 1.318-5.536-1.033-8.425-1.123-0.786 3.024 0.421 5.756 1.686 7.863 2.213 3.689 6.956 5.45 9.548 8.425-2.97 0.946-6.688-1.813-8.425-3.932-4.852 0.996-6.431-3.903-10.11-2.247 0.299 4.293 4.909 5.468 8.425 6.74 3.68 1.331 8.554 0.975 10.672 3.932-5.089 1.958-10.573-3.146-15.727-1.123 0.812 1.623 3.99 0.878 3.932 3.37-6.498 0.133-9.316-3.415-13.48-5.617 1.192 5.548 7.602 5.879 13.48 6.74 1.218 1.236 3.523 4.177 6.179 5.617 4.146 6.704 3.58 15.258 1.685 25.276-1.111 5.873-2.29 11.237-2.809 17.411-0.837 9.986-1.16 19.901 0.562 30.331 0.904 5.479 1.594 11.627 4.493 14.041 4.224 0.391 5.783-3.029 8.986-5.055 3.372-2.132 7.44-3.573 10.11-5.617 6.878-5.262 11.689-12.762 17.412-18.535 1.081-5.274 5.596-7.691 6.179-12.356 1.315-10.528-10.057-17.325-17.974-20.782-3.168 1.139-3.997 4.616-6.179 6.74 2.897 11.403 6.241 28.388-2.247 36.509-1.88-3.031 1.662-7.854 2.247-12.356 1.806-13.906-6.562-30.852-5.055-46.058 2.009 1.752 2.284 5.708 2.808 8.987 0.469 2.93 0.3 5.989 1.124 8.425 3.358-2.979 6.548-7.044 6.739-11.795 0.157-3.868-2.161-7.282-1.685-11.233 0.637-5.283 3.937-7.66 5.055-12.918-3.241-8.069 3.646-14.327 10.672-15.727-0.044-3.394 1.816-5.819 4.494-7.864 2.371 0.624 2.198 3.792 4.493 4.494-0.833-2.538-1.992-4.748-2.809-7.302-6.838-0.428-11.099 2.795-15.727 0.562-4.071-1.965-2.528-6.234-3.932-11.233-0.568-2.022-2.425-5.031-3.932-7.863-2.22-4.172-6.357-8.708-5.617-16.289 0.261-2.666 1.632-3.959 2.247-6.74-0.236-1.262-2.98-0.015-3.37-1.124-0.494-1.805 1.852-0.77 1.685-2.247-2.258-7.118-1.173-15.531 0-23.59-0.386-2.235-3.278-1.963-3.37-4.493 1.089-1.533 2.341-2.902 4.494-3.37-0.519-2.578 1.404-2.714 1.123-5.055 3.396-5.478 10.703-4.363 16.85-5.617 6.542-1.334 9.682-4.491 18.535-3.932 13.902 0.877 29.007 11.952 32.577 24.713 0.522 1.866 0.03 4.772 0 7.302 2.776 0.53 1.894-2.601 4.494-2.247 4.289-0.146 6.48 6.182 3.37 8.425-2.054-0.275 0.871-4.78-2.247-5.055-1.218-0.095-0.255 1.992-0.562 2.809-2.223-0.96-3.904-2.461-6.74-2.809-0.752-9.572-7.158-17.221-14.042-22.467-2.392-1.823-4.477-4.187-6.74-5.055-1.39-0.533-3.079-0.058-4.493-0.562-2.997-1.068-7.091-2.976-12.918-2.247-3.358 0.42-5.859 2.522-9.549 3.37-6.128 1.408-15.997-0.532-16.851 6.74 0.079 1.606 2.343 1.027 3.932 1.124-2.935 6.239-7.773 10.574-6.178 21.343 5.274 3.305 9.558 4.004 10.109 9.548 0.11 1.103-0.8 1.286-1.123 2.809-0.277 1.309 0.249 3.007 0 3.932-0.782 2.902-3.043 5.276-2.809 7.863 0.381 4.196 4.725 5.863 5.617 9.549 1.743 0.058 1.603-1.767 3.932-1.124 4.402 1.716 7.796-0.831 10.672 1.124-2.208 3.576-12.019 0.642-15.727 2.808 0.435 5.854 7.047 0.103 9.548 1.685 1.13 4.052-7.725 6.075-11.233 3.932-0.076 1.949 2.846 0.899 2.809 2.809 0.479 3.265-1.084 3.688-0.562 6.178 1.691 8.067 13.072 0.938 19.097 0.562-3.319 8.689 7.325 14.765 5.055 24.152-2.805-0.378-0.831-5.535-2.808-6.74-1.468 1.189-2.3 4.227-2.809 6.74-0.546 2.694-0.063 6.791-1.123 10.11 0.854 4.014 5.484 8.972 3.932 11.795-2.014 0.081 0.057-1.44-1.124-2.809-1.98-1.35-4.2-2.5-6.14-3.93zm-24.15-83.125c1.055-0.667 2.135-4.195-0.562-3.932-0.77 0.758-1.07 3.921 0.56 3.932zm-0.56 17.973c4.094-0.961 3.451-6.658 5.055-10.11-1.385 0.074-2.706 0.085-3.37-0.562-0.92 2.94-3.21 7.134-1.69 10.672zm-25.28 29.207c3.37 1.731 2.75-2.078 0 0zm6.74 0.562c4.599 0.461 11.407 1.69 15.727 0.562-3.85-1.001-12.54-2.587-15.73-0.562zm107.84 10.113c-0.963-4.467-4.148-6.71-6.74-9.548-0.76 3.653 3.78 8.117 6.74 9.548zm-125.25-7.305c0.795 2.388 2.988 3.377 5.055 4.494 0.232-2.479-0.152-4.341-1.123-5.617-2.01-0.331-2.72 0.653-3.93 1.123zm34.26 2.247c-1.323 0.013-1.653-0.967-3.37-0.562-0.79 1.794 3.36 1.42 3.37 0.562zm1.69 0.562c1.157-0.34 3.901 0.906 3.37-1.124-1.49 0.009-3.31-0.311-3.37 1.124zm29.2 8.426c2.363-3.083-2.062-6.672-5.056-7.863 0.8 3.513 2.61 6.003 5.06 7.863zm47.75-2.81c1.094 3.594 6.729 5.618 6.179 8.987-2.843-1.838-4.276-5.086-6.74-7.302-0.032 2.028-1.4 2.719-1.686 4.493 2.516 4.037 4.897 8.209 8.426 11.233-0.067-3.624 1.109-6.004 1.685-8.987-1.807-3.435-4.664-5.82-5.616-10.11 3.097 2.146 3.292 7.192 6.739 8.987 1.393-4.85-4.415-7.128-5.055-11.795-0.718-0.031-0.777-0.72-1.685-0.562-0.24 2.202-1.92 2.957-2.25 5.057zm11.23 3.93c0.646-0.664 0.636-1.985 0.562-3.37-3.975-0.015-2.908-3.472-6.179-5.055 1.27 3.415 2.84 6.525 5.62 8.425zm-70.21 3.93c0.094-0.654 0.888-0.61 1.685-0.562 2.473 4.365 3.221 7.396 6.74 10.11 0.46-2.894-1.275-3.592-1.685-5.617 2.976-3.193-3.788-7.767-2.247-11.233 1.785 2.708 2.246 6.74 4.493 8.987 0.554-1.318 0.985-2.759 1.124-4.493-1.165-2.206-2.737-4.003-3.933-6.179-4.55 0.14-6.42 5.92-6.18 8.98zm-51.11-6.17c1.241 0.658 3.222 3.481 5.055 1.685-0.992-1.629-1.615-3.627-3.932-3.932-0.3 0.83-0.84 1.41-1.13 2.25zm117.95 11.79c-0.876 3.379 0.783 6.117-1.685 9.548 0.047-6.413-4.459-8.272-7.302-11.795 1.256 4.922 4.622 7.734 6.178 12.357-2.107 0.423-1.225-2.146-2.808-2.247-0.592 2.463 1.899 1.845 1.685 3.932-1.305-0.231-2.373-3.567-3.932-1.685 2.332 3.097 3.329 7.529 7.863 8.425 0.503 0.667 1.582 5.317-0.562 5.055-0.456-1.942 1.049-2.371 0-3.37-6.935-2.24-8.187-10.161-9.549-17.974-4.041 2.715 0.565 7.588 1.686 11.234 1.637 5.33 1.681 12.285 5.055 15.727v7.302c-4.04 4.55-11.542 4.002-17.974 5.055 1.974 5.299-5.102 5.017-6.74 8.425 5.836 3.697 10.509 9.014 11.233 16.289-2.486 3.068 0.515 5.806 0 10.11 1.03 1.766 1.902-1.89 2.809 0 0.199 3.007-1.56 4.057-2.246 6.178 3.509-0.423 2.795-5.067 6.178-5.616 0.455 3.076-1.876 3.366-1.685 6.178 2.615-0.026 1.74-5.834 4.493-3.932 0.181 2.265-2.503 4.58-1.123 6.179 1.501-1.308 2.306-5.673 4.493-4.493 0.282 2.341-1.642 2.478-1.123 5.055 2.432 0.186 1.383-3.11 3.932-2.809 0.274 1.773-1.013 1.983-0.562 3.932 3.831 0.648 1.945-4.419 5.616-3.932 1.592 1.548-2.911 2.75-1.123 4.494 2.599 0.936 7.676-1.559 8.986 1.685-1.052 1.069-0.062 1.411 0 2.809-2.086 2.595-7.666 1.694-11.233 2.809-1.95-0.698-5.874-4.045-7.302-1.686 6.75 3.173 15.435 4.412 19.659 10.11-5.099 0.703-8.382-3.105-12.357-1.686-2.794-2.875-5.96-3.775-10.11-5.616-1.854-0.823-3.622-1.825-5.616-2.809-5.949-2.933-10.028-4.433-16.851-5.055-12.067-1.102-23.924-7.602-30.33 0.562 2.824-0.558 6.871-2.85 10.11-1.123 0.33 2.016-3.355 0.015-2.809 2.246 2.595 0.214 4.632 0.985 6.74 1.686 0.096-0.841-0.201-2.073 0.562-2.247 7.168 4.207 14.181 11.088 24.714 10.11 0.418 1.729-1.542 1.079-1.124 2.809 14.886 15.071 33.868 26.044 60.661 29.207 10.157-14.642 9.229-40.424 9.549-64.031-6.249 2.176-12.234 4.616-20.782 4.493-1.153 1.843-1.7 4.291-4.493 4.494 2.124 3.266-3.979 2.521-1.124 5.055-5.523 5.747-0.84 20.857-3.932 27.522-2.83-12.763-1.457-25.787 0-38.756-3.744 1.155-9.993 0.879-9.548-3.932 5.022-0.904 6.103 2.135 9.548 2.809-0.366-2.629-3.034-2.957-5.055-3.932-2.728-5.139-11.087-7.632-10.11-14.604 1.982 0.077 2.512 1.607 4.493 1.685-2.167-5.134-5.243-9.359-4.493-17.412-0.009-0.928-1.558-0.314-1.685-1.123 0.854-2.328 1.421-4.944 1.123-8.425 4.626-3.612 4.196-12.28 10.11-14.604-2.613 7.634-6.334 14.061-7.863 21.343 0.611 12.682 3.913 22.673 12.356 27.522-0.101 2.722 0.741 4.501 1.123 6.74 10.225 2.309 22.724 2.504 30.331-2.809 3.277-7.77 3.49-15.438 2.808-23.028-0.224-2.489-1.603-4.915-1.123-7.302 0.551-2.744 3.176-5.149 3.37-7.864 0.563-7.849-4.907-8.669-8.986-11.795-2.455-1.881-4.102-5.232-6.74-7.864-2.957-2.949-7.732-6.208-11.795-9.548-5.416-4.453-10.219-8.125-15.728-9.548-1.49 5.12-6.51 8.19-7.88 13.49zm-7.86 3.93c-0.919-1.702-1.143-4.1-2.809-5.055 0.2 2.43 1.16 4.09 2.81 5.06zm65.71 24.15c2.141 1.043 5.318 1.048 6.179 3.37 1.037 3.269 2.348 6.265 5.055 7.863 0.471 1.215 1.454 1.916 1.123 3.932 3.31 2.834 5.561 8.071 6.74 12.357 0.346 1.254-0.234 2.648 0 3.932 0.623 3.41 2.946 5.246 3.37 7.863 0.551 3.401-0.673 6.688-1.123 8.425-0.904 3.487-1.025 8.776-0.562 12.357-0.716 2.28-3.294 2.697-3.37 5.616 0.591 0.031 0.441 0.721-0.562 0.562-1.368 0.69-0.065 3.381 0.562 3.932 0.293-3.451 1.909-5.58 3.932-7.302 1.116 0.007 0.714 1.532 2.246 1.123 8.518-31.273-3.993-59.873-27.521-69.647 1.16 2.04 2.22 4.16 3.92 5.63zm-105.59 16.29c-0.536-3.396-2.354-5.51-2.247-9.549 1.767 0.644 1.365-0.882 2.247-1.123-1.223-4.419 3.188-6.156 2.247-8.425-3.108 0.824-1.994 5.87-4.494 7.302 0.689-2.868 1.928-5.188 2.247-8.426-0.718-0.031-0.778-0.72-1.686-0.562-2.83 4.86-4 18.17 1.68 20.79zm38.75-17.41c0.229 4.077-0.54 9.151 2.808 10.11 0.124-0.438 0.471-0.653 1.124-0.562-1.152-4.289-2.255-6.574-1.686-10.11-0.54 1.57-1.49-0.82-2.24 0.56zm-6.18 3.37c-0.295 5.135-5.697 5.162-6.179 10.11 4.865 0.178 4.044-8.305 7.863-7.302-0.476 2.332-2.864 2.752-2.808 5.616 1.767 0.27 2.195-0.8 3.37-1.123 0.064-1.994-0.406-4.524 1.685-4.493 0.15 2.022-1.037 2.707-1.123 4.493 0.663 0.646 1.985 0.636 3.37 0.562-0.812-4.454 0.244-8.132-2.247-10.11-0.89 1.14-2.69 1.41-3.92 2.24zm-32.57 5.62h1.123v-1.124h-1.123v1.12zm20.78 5.61c3.515 0.553 6.503-4.252 4.493-5.616-1.08 2.29-3.87 2.87-4.49 5.62zm80.32 3.37c0.046-3.416-0.798-5.942-1.686-8.425 0.44 2.93-0.35 7.1 1.69 8.42zm-97.17 1.13c1.597-1.878-1.544-2.615-1.685-4.493-0.249-1.062 0.764-3.385-1.124-2.809-0.27 3.63 0.28 6.45 2.8 7.3zm11.79-2.25c1.666 1.658 6.13-3.594 3.37-4.494-0.09 2.53-3.18 2.06-3.37 4.49zm83.69 13.48c-0.683 1.947-2.331 3.179-2.809 5.056-0.758 2.985-0.489 7.31-0.562 11.233-0.221 11.995-0.438 22.782-1.685 32.016-0.856 6.342-3.374 11.474-1.686 16.85 4.884-1.295 8.654-3.703 10.672-7.863-2.97-2.759-6.112 0.486-8.425-1.685-0.305-4.19 5.524-4.626 6.74-8.426 0.508-1.588-0.55-3.284-0.562-5.055-0.052-7.849 1.123-19.126 0.562-28.646-0.501-8.493 0.537-17.296-1.123-24.152-0.8 3.44 0.19 6.93-1.12 10.66zm-93.8 6.18c2.667-0.648 4.595 1.303 6.178 0-1.216-2.716-1.057-6.807-3.932-7.863-1.1 2.27-3.09 3.65-2.25 7.86zm55.61-1.12c1.171-0.436-0.414-3.377-1.124-1.686 0.92 0.01 0.31 1.56 1.12 1.69zm-63.47 9.54c1.246-1.941-2.365-3.018-3.932-3.932 0.28 2.35 2.13 3.12 3.93 3.93zm0.56 0c-0.353 2.554 3.728 5.157 6.74 6.179 0.444-1.876 2.45-4.303 1.124-6.179-3.13 2.33-5.53-0.66-7.86 0zm33.14 15.73c-1.319-0.18-1.258-1.738-2.247-2.247-2.05 1.51 1.92 3.28 2.25 2.25zm106.72 15.73c-0.48-1.311 1.964-2.42 0.562-2.809-0.16 0.67-2.26 2.12-0.56 2.81z" + /> + <path + fill="#FFFFFF" + d="m137.05 82.632c-0.814-2.322-3.467 0.758-6.178 0 4.095-2.458 7.487-5.618 10.672-8.987-1.46-1.512-1.694 0.687-3.37 0.562 0.251-1.621 2.417-1.328 2.808-2.808-5.407-3.97-11.161 3.453-16.85 4.493 6.189-4.853 12.922-7.455 20.782-9.548 2.956 1.752 4.496 1.469 8.987 1.685 1.99 1.193 2.529 3.836 5.617 3.932-1.026 1.97-3.64 2.351-4.493 4.494 1.504 1.648 2.958-1.503 5.055-1.124-0.816 1.993-0.25 5.366-1.685 6.74 1.875 0.372 1.631 2.862 3.37 3.37 6.892-0.223 2.743-11.486 8.987-12.357 0.456-3.885 2.343-6.145 2.247-9.548-0.205-7.232-6.737-12.891-6.74-20.782-2.111-4.067-8.211-4.146-10.672-7.863 1.127 0.191 1.757-0.115 1.685-1.124 1.202 1.078 1.835 2.324 3.932 1.124 0.826 2.919 4.846 2.643 7.864 3.37 2.671 4.069 5.449 8.031 7.863 12.357 0.092 8.911-0.035 15.427 1.685 21.905-2.818-0.197-4.159 1.083-5.055 2.808-0.002 1.72 3.881 2.441 5.055 1.124 1.049 3.307-5.193 4.16-6.74 6.74 0.183 2.796 3.474 3.221 1.124 5.617 0.697 2.549 1.633-0.97 2.808 0.562 1.153 4.562 3.888 8.918 2.809 14.042-1.718-0.407-1.652 0.969-3.37 0.562 0.75-3.019 0.208-8.537-1.685-10.672-2.13 0.623-0.033 4.258 0 6.178-1.844 5.832-6.101 9.252-7.863 15.166-0.503 1.813 1.832 0.789 2.247 1.685-1.445 2.761-2.28 5.896-0.562 8.986-0.727 2.457-2.834 3.532-4.494 5.055-6.407-1.402-14.433-5.835-21.343-1.685-0.249-2.185-0.425-4.443-1.124-6.178-1.659 0.775-1.294 3.573-1.685 5.617-2.304-0.691-2.769-3.223-3.932-5.055-1.92-1.45-4.361-2.379-5.055-5.055-10.036-6.814-19.874-13.827-36.509-14.042-0.071-4.641-1.269-10.677-0.562-16.85h2.808c-0.831-1.229-1.095-3.024-2.247-3.932 2.066-1.479 2.693 3.279 3.932 4.494 1.51 0.387 1.085-1.161 1.685-1.685 1.878 1.492 2.219 4.521 3.932 6.178 1.936-1.251-2.12-4.181 0-5.617 2.232-0.172 0.193 3.926 3.37 2.809-1.401 2.936 2.709 3.608 5.055 4.493-0.139 0.61-1.117 0.381-1.124 1.124 0.261 1.226 4.53 0.941 5.617 0 1.561-1.353 2.484 0.379 2.809-2.247 1.061 0.062 0.39 1.857 1.685 1.685 1.48 0.169 1.843-0.778 1.685-2.247 2.582-0.601 6.106-0.26 6.74-2.808 3.34-1.68 7.66-2.417 8.39-6.745zm-9.55 10.672c2.839-0.041 3.213 0.71 5.617 0 0.38-1.492 1.074-2.67 1.685-3.932-2.44-0.765-6.93 0.799-7.3 3.932zm16.29-20.782c1.776-1.033 6.22 0.603 6.178-2.247-2.69-0.873-5.96-0.813-6.18 2.247zm1.68 3.932c-1.727-2.993-5.625 0.947-7.302 1.685 1.644 1.833 0.549 2.914 2.247 4.493 0.454-1.996 4.049-0.613 3.932-0.562 1.418-0.618 3.259-3.19 5.055-4.494 2.048-1.486 4.43-2.396 5.617-4.493-4.66-0.358-6.43 2.182-9.55 3.371zm11.8 5.616c-0.464-1.587 0.792-1.455 0.562-2.809-0.718-0.031-0.778-0.72-1.685-0.562 0.01 1.49-0.31 3.308 1.13 3.371zm-9.55 15.727c1.418 0.828 2.509 1.984 4.493 2.247 1.872-1.125 2.966-3.025 3.37-5.617-3.517-0.708-1.538 4.078-5.055 3.37-2.836-6.768 2.932-12.204 2.247-16.85-0.124-0.438-0.471-0.653-1.124-0.562-2.61 4.505-4.58 9.656-3.93 17.416zm-8.42-8.987c1.817 0.694 0.429-1.817 2.247-1.123-0.107 3.477 1.013 5.727 3.37 6.74 0.59-2.967-1.534-7.732-3.932-9.549-0.48 1.406-1.55 2.206-1.69 3.932zm14.04 0c1.528-0.344 2.202-1.543 2.247-3.37-1.86 0.02-2.15 1.598-2.25 3.37zm-55.609 2.247c0.563-0.002 0.668 0.455 1.124 0.562-0.002-0.563 0.455-0.668 0.562-1.124-0.563 0.002-0.668-0.455-1.123-0.562 0 0.564-0.456 0.669-0.563 1.124zm36.509 2.808h-2.247c-0.89 2.612 2.91 1.95 2.25 0zm-21.91 3.932c1.708 0.023 3.697 0.327 3.37-1.685-1.71-0.028-2.86 0.511-3.37 1.685zm26.97 7.303c1.054 1.755 1.651 3.966 3.37 5.055-0.42-2.23-1.09-6.5-3.37-5.06zm2.24 14.6c0.826-2.639 0.428-7.561-2.809-7.863 0.4 3.16 0.67 6.45 2.81 7.86z" + /> + <path + fill="#FFFFFF" + d="m118.51 36.575c0.292 1.248-3.75 2.975-5.617 3.932 0.37-2.82 3.92-2.453 5.62-3.932z" + /> + <path + fill="#FFFFFF" + d="m131.43 60.727c-0.934-1.976-1.419-2.725 0-4.493-1.365-1.818-2.484-3.882-4.493-5.055 0.174-1.885 1.878-2.24 3.37-2.809-0.049 3.419 3.519 3.221 6.74 3.37 0.333 1.792-1.054 1.737 0 2.809 7.801-0.926 13.913-0.611 21.344 1.685-1.981 2.619-5.542 0.88-9.548 1.123-8.167 0.495-15.311 5.123-22.467 6.74-1.14 0.281 4.18-2.008 5.06-3.37z" + /> + <path + d="m307.8 105.66c1.424 1.011 2.111 2.756 2.809 4.493-1.69-0.74-2.05-2.82-2.81-4.49z" + /> + <path + fill="#FFFFFF" + d="m311.73 101.17c1.195 2.175 2.768 3.973 3.933 6.179-0.139 1.734-0.57 3.175-1.124 4.493-2.247-2.247-2.708-6.279-4.493-8.987-1.541 3.466 5.223 8.041 2.247 11.233 0.409 2.024 2.145 2.723 1.685 5.617-3.52-2.713-4.268-5.745-6.74-10.11-0.797-0.048-1.591-0.093-1.685 0.562-0.25-3.06 1.62-8.84 6.17-8.98zm-1.13 8.98c-0.697-1.737-1.385-3.482-2.809-4.493 0.77 1.67 1.13 3.75 2.81 4.49z" + /> + <path + fill="#FFFFFF" + d="m198.83 113.52c1.44-4.54-0.97 3.72 0 0z" + /> + <path + fill="#FFFFFF" + d="m426.31 138.24c23.528 9.774 36.039 38.374 27.521 69.647-1.532 0.409-1.13-1.116-2.246-1.123-2.022 1.722-3.639 3.851-3.932 7.302-0.627-0.551-1.93-3.241-0.562-3.932 1.003 0.158 1.152-0.531 0.562-0.562 0.076-2.919 2.654-3.336 3.37-5.616-0.464-3.581-0.343-8.87 0.562-12.357 0.45-1.737 1.674-5.023 1.123-8.425-0.424-2.617-2.747-4.453-3.37-7.863-0.234-1.283 0.346-2.678 0-3.932-1.18-4.286-3.431-9.523-6.74-12.357 0.331-2.016-0.652-2.717-1.123-3.932-2.707-1.599-4.018-4.595-5.055-7.863-0.86-2.322-4.038-2.327-6.179-3.37-1.7-1.49-2.76-3.61-3.93-5.63z" + /> + <path + fill="#FFFFFF" + d="m353.85 201.14c0.989 0.509 0.928 2.067 2.247 2.247-0.33 1.03-4.3-0.74-2.25-2.25z" + /> + <path + d="m280.84 218c2.994-3.082 10.079-3.917 16.851-3.932 13.598-0.03 29.839 2.808 38.193 7.863-13.84-4.43-37.23-9.19-55.04-3.93z" + /> + <path + fill="#FFFFFF" + d="m463.38 216.31c1.402 0.389-1.042 1.498-0.562 2.809-1.7-0.69 0.4-2.14 0.56-2.81z" + /> + <path + d="m449.34 235.97c1.69-3.75-1.46 4.48 0 0z" + /> + <path + d="m183.1 73.083c0.208 4.702-4.372 4.614-3.932 9.548-1.186 0.499-1.66 1.71-3.37 1.685 1.324 6.379 12.826 22.52-1.685 20.22-1.81 0.624-1.777 3.091-1.685 5.617-1.675 0.384-3.438 0.681-3.932 2.247 2.353 4.487-1.517 8.911 1.685 12.918-0.471 10.508-13.446 8.972-19.659 4.494-3.739 0.528-5.19 0.685-9.548 1.124 0.723 8.262 3.272 13.698 7.864 19.658 3.392 4.403 7.875 6.968 12.918 10.672 2.281 1.676 3.946 3.614 6.178 5.617 4.463 4.004 10.328 7.116 11.795 11.233 1.857 5.211-1.097 10.008 0.562 16.288-0.489 1.188-2.835 0.94-2.247 4.493 4.101 1.437 4.98 4.692 3.932 10.11-2.837-0.216-2.108 3.135-3.932 3.932 0.525 7.06-0.725 12.811-0.562 17.974 9.281-7.756 14.368-19.707 20.782-30.33 6.764-1.717 11.732 1.23 16.289 3.37 5.638 8.591 15.134 13.323 19.097 23.59-6.518 12.58-13.683 24.512-20.782 36.509-2.142 0.02-3.629 2.334-5.055 0-2.639 1.854-6.188 2.799-8.987 4.494-4.355-0.58-8.681 0.477-12.918-1.686-1.042-0.531-1.248-2.169-2.247-2.809-3.603-2.307-9.874-2.094-11.234-6.74 0.094-1.787 1.317-4.135 0-5.616-3.347 3.427-9.574 9.219-14.604 7.302-0.767-2.452 2.175-1.195 1.685-3.37-4.677 1.533-15.063 3.396-18.535-1.123-4.344-5.657 3.223-10.95 6.74-15.165-4.477 0.545-6.807-1.057-10.11-1.686-0.49-1.801 0.865-1.757 1.685-2.247-2.017-3.037-8.315-1.794-11.233-3.932-0.214-3.771 3.937-3.178 5.055-5.616-1.829-0.792-3.962-1.28-6.178-1.686-2.102 2.602-1.604 7.136-1.685 11.233-2.2 0.328-1.434-2.31-2.809-2.808-1.9-0.216-0.884 2.486-3.37 1.685-3.255-15.36 3.81-26.803 9.548-36.509-6.34 3.397-10.923 13.415-17.412 18.535 1.291 6.304 2.75 11.957 2.247 17.974-2.359-0.823-1.641-4.725-3.932-5.616-0.222 6.058 5.286 14.145 3.932 21.343-0.653-0.091-1 0.124-1.124 0.562-3.199-0.732-5.036-2.827-7.302-4.494-2.793-0.172-5.153 0.089-7.302 0.562-2.056 0.338-2.611-3.712-4.493-1.686-9.479-11.678-20.779-21.533-31.454-32.016-0.738-0.572-2.071-0.551-2.809-1.123-3.409-5.204-10.45-6.774-14.042-11.795-6.08-1.308-10.949-5.312-16.85-7.863-8.352-3.61-17.971-6.067-28.083-7.302 0.505-5.524 11.449 0.548 15.727 0-1.019-0.854-2.333-1.411-2.808-2.809 3.974-10.817 10.423-19.158 16.85-27.522 0.482-1.597 0.223-1.195 0.562-1.685 2.306-2.375 3.945-5.417 6.179-7.863 0.352-0.429 0.562-0.562 0.562-0.562 6.231-4.627 14.33-7.388 21.344-11.233 1.052-1.07 3.008-2.715 5.055-3.932 0.819-1.081 0.536-0.773 1.123-1.685 5.719-5.565 13.533-6.247 19.097-11.233 1.121-3.56 2.584-6.777 4.493-9.549 23.023 1.877 37.068 12.734 49.427 25.275-1.825-5.29-4.935-9.294-10.11-11.233-7.816-9.289-22.975-14.003-36.509-15.727-2.088-6.657 0.328-13.193 0-19.658-0.116-2.273-1.468-4.537-1.685-6.74-0.741-7.518 2.219-17.357 2.808-25.837 0.35-5.033 1.214-9.905 3.932-13.48 1.099-1.447 4.32-3.05 6.74-5.617 4.785-5.075 8.796-9.899 16.851-12.356 4.698-1.434 8.622 0.711 14.042 1.123 2.87 0.218 5.867-0.678 8.425-0.562 5.59 0.255 10.298 3.089 15.165 5.055 10.822-4.177 19.112 4.625 17.412 14.604 5.081 5.638 7.269 17.404 5.617 26.398-0.07 2.714 2.57 2.703 2.79 5.093zm-69.08-46.057c-0.491 0.342-1.648 2.203-2.247 2.808-3.958 4.006-12.851 9.62-10.672 14.604 1.23-1.099 2.241-1.667 5.055-2.247-1.356-2.564 2.155-2.83 2.809-4.494 0.368-0.936-0.978-1.415-0.562-2.247 0.132-0.264 1.472-0.187 1.685-0.562 0.697-1.229-0.393-3.665 1.685-3.932 1.909 0.969 4.117 0.391 6.179 0 1.054 0.993-0.668 1.64 0.562 2.808 2.859-2.199 10.492-1.975 11.233-4.493 2.624 0.947 8.85 1.117 7.863-3.37-7.95-0.477-16.49-3.815-23.59 1.125zm41 2.808c3.532 0.212 4.796 2.693 8.987 2.247 0.039-1.646 2.139-1.23 1.685-3.37-3.7 1.112-7.91 0.227-10.68 1.123zm-12.36 1.686h1.124c0.031-0.718 0.72-0.778 0.562-1.685h-1.685v1.685zm-15.72 2.246c-2.138 0.076-6.113 0.075-6.74 2.247 2.929 0.084 5.996-1.456 10.11-1.685-0.262 3.376 2.523 0.213 3.932 1.685-1.053 1.069-0.062 1.411 0 2.808-3.887 2.853-11.93 1.551-14.042 6.178 8.322 1.314 14.066-3.583 20.22-6.178-0.356-1.89-2.735-1.758-2.247-4.493 0.438-0.124 0.653-0.471 0.562-1.124h3.932c-2.73-3.072-10.49 0.376-15.72 0.562zm23.59-0.561c-1.003 0.002-3.268-1.513-3.932 0 1.46-0.466 3.08 1.698 3.93 0zm-21.91 56.167c-0.634 2.548-4.158 2.208-6.74 2.808 0.158 1.469-0.205 2.416-1.685 2.247-1.295 0.172-0.624-1.623-1.685-1.685-0.325 2.625-1.248 0.894-2.809 2.247-1.086 0.941-5.355 1.226-5.617 0 0.007-0.742 0.984-0.514 1.124-1.124-2.346-0.885-6.457-1.558-5.055-4.493-3.177 1.118-1.138-2.981-3.37-2.809-2.12 1.436 1.936 4.365 0 5.617-1.713-1.657-2.054-4.686-3.932-6.178-0.6 0.524-0.175 2.072-1.685 1.685-1.238-1.214-1.865-5.973-3.932-4.494 1.151 0.908 1.416 2.703 2.247 3.932h-2.808c-0.708 6.173 0.491 12.209 0.562 16.85 16.635 0.215 26.473 7.227 36.509 14.042 0.694 2.676 3.135 3.605 5.055 5.055 1.163 1.833 1.627 4.364 3.932 5.055 0.391-2.043 0.026-4.841 1.685-5.617 0.699 1.735 0.875 3.993 1.124 6.178 6.911-4.15 14.937 0.283 21.343 1.685 1.659-1.523 3.767-2.598 4.494-5.055-1.718-3.09-0.884-6.226 0.562-8.986-0.415-0.896-2.75 0.128-2.247-1.685 1.763-5.914 6.019-9.333 7.863-15.166-0.033-1.92-2.13-5.556 0-6.178 1.893 2.135 2.436 7.653 1.685 10.672 1.718 0.407 1.652-0.969 3.37-0.562 1.08-5.124-1.656-9.479-2.809-14.042-1.175-1.532-2.111 1.987-2.808-0.562 2.351-2.396-0.94-2.82-1.124-5.617 1.547-2.58 7.79-3.433 6.74-6.74-1.174 1.317-5.058 0.596-5.055-1.124 0.896-1.725 2.237-3.005 5.055-2.808-1.72-6.478-1.593-12.995-1.685-21.905-2.414-4.326-5.192-8.288-7.863-12.357-3.018-0.727-7.038-0.451-7.864-3.37-2.097 1.201-2.729-0.045-3.932-1.124 0.072 1.009-0.558 1.314-1.685 1.124 2.461 3.717 8.561 3.796 10.672 7.863 0.003 7.892 6.536 13.55 6.74 20.782 0.096 3.404-1.791 5.663-2.247 9.548-6.244 0.871-2.095 12.134-8.987 12.357-1.739-0.508-1.495-2.999-3.37-3.37 1.435-1.374 0.869-4.748 1.685-6.74-2.098-0.38-3.551 2.771-5.055 1.124 0.853-2.143 3.467-2.524 4.493-4.494-3.087-0.095-3.626-2.739-5.617-3.932-4.491-0.216-6.031 0.067-8.987-1.685-7.86 2.094-14.592 4.695-20.782 9.548 5.689-1.041 11.443-8.463 16.85-4.493-0.392 1.48-2.557 1.188-2.808 2.808 1.676 0.125 1.91-2.074 3.37-0.562-3.185 3.369-6.577 6.529-10.672 8.987 2.711 0.758 5.364-2.322 6.178 0-0.7 4.334-5.02 5.071-8.4 6.746zm-15.72-48.866c1.867-0.957 5.908-2.684 5.617-3.932-1.71 1.48-5.26 1.113-5.62 3.932zm-11.8 7.864c-0.027 1.712 0.51 2.86 1.685 3.37 1.036-4.207 4.772-5.713 6.179-9.548-3.88 0.515-4.83 6.652-7.86 6.178zm25.28 15.727c7.157-1.617 14.301-6.245 22.467-6.74 4.006-0.243 7.567 1.496 9.548-1.123-7.431-2.296-13.543-2.611-21.344-1.685-1.054-1.071 0.333-1.017 0-2.809-3.221-0.149-6.79 0.049-6.74-3.37-1.491 0.568-3.195 0.924-3.37 2.809 2.009 1.173 3.128 3.237 4.493 5.055-1.419 1.768-0.934 2.517 0 4.493-0.89 1.362-6.21 3.651-5.06 3.37zm-23.59-3.932c2.549 0.302 1.5-2.994 3.932-2.809 1.331 2.04 1.213 5.527 3.37 6.74 0.452-3.106 0.38-6.734 1.124-9.548-0.475-1.211-3.581 0.21-3.932-1.124-0.032-0.343-0.084-0.665-0.562-0.562-0.45 3.295-4.39 3.102-3.93 7.303zm11.79 9.548c-1.252-1.182-1.444-3.424-2.809-4.493-1.48 2.03 0.91 4.074 2.81 4.493zm49.43 3.932c0.13-1.485-3.472-2.085-3.932-1.123 0.94 0.745 1.88 1.488 3.93 1.123zm-56.17 5.055c1.388-0.211 1.662 3.508 2.809 1.685-1.218 0.095-0.255-1.992-0.562-2.809-1.28-0.156-2.11 0.136-2.25 1.124zm15.17 0.562c1.424 0.595 3.202-1.183 1.685-1.685-0.07 1.061-1.87 0.39-1.69 1.685zm-6.18 1.685c1.66-0.399 3.964-0.154 4.493-1.685-0.438-0.124-0.653-0.47-0.562-1.123-1.77 0.479-3.45 1.042-3.93 2.808zm-5.62-1.123c-0.646 3.642 1.384 4.606 2.247 6.74 0.979-1.902 4.126 1.624 4.494-1.123-4.38 0.352-1.44-8.645-6.74-5.617zm6.74 8.986h4.493c-0.194-1.678-1.508-2.236-2.808-2.808 0.43 1.919-2.28 0.713-1.68 2.808zm81.44 115.14c-3.904 10.513-9.889 18.943-15.727 27.521 5.85 0.142 8.419 3.563 12.356 5.617 0.051-2.402 1.125-4.114 0-6.179 1.116-0.936 0.714 0.051 2.247 0 1.054-1.071-0.333-1.016 0-2.809 1.587 0.465 1.455-0.791 2.808-0.562 0.159-1.71-1.799-2.184-0.562-3.37 1.644-0.146 1.726 1.271 3.37 1.124 0.146-1.645-1.27-1.726-1.124-3.37 0.724-0.774 2.44-0.557 3.932-0.562 1.804-2.913 4.061-9.318 7.864-6.74 0.571-3.272-0.312-4.507 0.562-7.302-4.47-1.89-8.79-3.94-15.73-3.37zm26.4 21.91c0.377 3.473-1.429 5.185 0 8.425 1.013-3.293 5.026-3.586 5.055-7.863-1.29-0.58-4.3-1.14-5.05-0.56z" + /> + <path + fill="#FFFFFF" + d="m142.66 33.205h-3.932c0.091 0.653-0.124 1-0.562 1.124-0.489 2.735 1.89 2.603 2.247 4.493-6.154 2.596-11.898 7.493-20.22 6.178 2.112-4.627 10.155-3.325 14.042-6.178-0.062-1.397-1.053-1.739 0-2.808-1.409-1.472-4.194 1.691-3.932-1.685-4.114 0.229-7.181 1.769-10.11 1.685 0.627-2.172 4.603-2.171 6.74-2.247 5.23-0.187 12.99-3.635 15.72-0.562z" + /> + <path + d="m331.95 42.191c3.207 1.868 5.895 3.194 10.672 2.247-0.171 1.481 1.173 1.449 2.247 1.685-1.194 1.615-2.457 3.16-5.056 3.37 5.313 0.678 10.46 1.523 11.795 6.178 1.146 0.98 1.102-0.418 2.247 0.562v2.808c1.938-1.011 2.611-0.337 2.247 2.247 1.689 0.566 0.995-1.251 1.123-2.247 2.115 0.29 2.558 0.71 3.37-1.123 0.762 0.174 0.466 1.406 0.562 2.247 1.477 0.167 0.442-2.179 2.247-1.685 0.086 1.397-0.883 1.739-1.124 2.808-4.66-1.103-3.891 3.224-6.74 3.932-0.418-1.729 1.542-1.08 1.124-2.809-2.701-0.455-2.029 2.464-5.056 1.685-1.525-2.28-0.079-4.528-0.562-6.178-2.143-7.336-11.277-6.84-19.097-7.302 1.473-3.177-1.147-3.093-1.685-5.617 1.85-0.397 2.51 0.262 1.69-2.808z" + /> + <path + d="m197.71 123.07c9.379 0.918 20.389 0.207 27.522 3.37 1.566 3.236-0.785 5.942-1.123 8.987 0.549 1.794 4.575-0.208 6.74 1.124 5.403 3.873 0.34 12.672-1.123 17.973 5.79 3.487 5.031 12.963-1.685 15.165-0.582-3.056 2.171-4.757 2.247-7.302 0.075-2.544-1.663-3.763-2.247-6.178-0.645-2.667 0.895-5.247-1.124-7.302 3.223-0.335 2.572-4.543 3.37-7.302-1.486-2.727-5.252-1.824-8.425-1.685-0.468 6.647-6.903 7.326-6.179 15.165 1.268-0.792 0.461-3.658 2.809-3.369-0.555 3.002-0.215 6.899-3.37 7.301-0.043 3.274 4.464 3.55 2.247 7.303-2.864-0.497-1.876-4.947-5.055-2.247 1.209-6.173-0.076-12.373 2.247-17.412 0.965-2.095 3.984-3.496 5.055-5.617 1.644-3.254 0.899-6.12 2.809-8.987-1.278-1.602-3.292 0.79-5.617 0 0.228 1.083 2.177 0.444 1.685 2.247-2.319 4.792-8.085 7.325-10.672 12.357-1.849 3.596-0.481 8.526-3.932 11.795 0.074 1.385 0.085 2.706-0.562 3.37 0.097 1.407-1.257 1.363-1.685 2.247-0.641 12.585 1.715 18.842 1.124 30.892 12.57 0.536 18.127 8.085 23.029 16.289-7.288-6.006-11.932-14.654-25.837-14.042 0.896-11.068-2.356-20.138-1.124-29.769-0.112-2.135-2.362-2.132-2.247-4.493 1.245-4.747 7.161-4.821 7.302-10.672-3.38-1.645-3.755-0.478-7.864-1.124-0.503-1.181-0.873-2.497-1.685-3.37-5.657 0.625-15.347-15.083-11.233-20.782 2.243-3.107 8.955-2.787 13.48-2.808-1.231 3.312-6.966 0.541-9.549 3.37 2.583 0.035 7.399 0.05 10.11 0.562 0.965 0.72 0.011 3.358 1.685 3.37 2.287-0.193-0.023-1.475 1.124-2.809 4.521-1.36 10.571-1.372 15.727-0.562 2.469 0.388 5.206 3.11 6.74 0.562-3.546-4.879-14.51-2.341-21.344-3.932-2.314-0.442-1.055 2.689-3.37 2.247 0.47-2.04-1.02-2.99-0.03-3.93zm-0.56 11.8c-2.565 2.586-8.44-0.292-11.795-0.562 2.135 8.724 8.51 13.208 19.658 12.918 0.927-2.354 2.839-3.77 1.685-6.74 1.665-2.267 6.705-1.159 7.302-4.494-1.988 0.678-4.384-0.037-6.74 0-2.535 0.04-6.292 2.184-7.302-1.123 0.143-2.125 7.445-0.015 5.617-2.247-4.561 1.331-13.258-1.659-18.536 0 3.03 1.08 8.73-0.5 10.11 2.24zm11.23-1.13c1.144 0.48 3.49-0.489 1.685-1.124-0.16 1.17-1.51-0.83-1.68 1.12z" + /> +</g + > +<metadata + ><rdf:RDF + ><cc:Work + ><dc:format + >image/svg+xml</dc:format + ><dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" + /><cc:license + rdf:resource="http://creativecommons.org/licenses/publicdomain/" + /><dc:publisher + ><cc:Agent + rdf:about="http://openclipart.org/" + ><dc:title + >Openclipart</dc:title + ></cc:Agent + ></dc:publisher + ><dc:title + >coffee couple</dc:title + ><dc:date + >2006-10-13T06:34:44</dc:date + ><dc:description + >I call it coffee couple but they could just as easily be drinking tea. A man and a woman enjoying a cup.</dc:description + ><dc:source + >https://openclipart.org/detail/564/coffee-couple-by-johnny_automatic</dc:source + ><dc:creator + ><cc:Agent + ><dc:title + >johnny_automatic</dc:title + ></cc:Agent + ></dc:creator + ><dc:subject + ><rdf:Bag + ><rdf:li + >black & white</rdf:li + ><rdf:li + >coffee</rdf:li + ><rdf:li + >contour</rdf:li + ><rdf:li + >couple</rdf:li + ><rdf:li + >dining</rdf:li + ><rdf:li + >man</rdf:li + ><rdf:li + >outline</rdf:li + ><rdf:li + >people</rdf:li + ><rdf:li + >tea</rdf:li + ><rdf:li + >vintage</rdf:li + ><rdf:li + >woman</rdf:li + ></rdf:Bag + ></dc:subject + ></cc:Work + ><cc:License + rdf:about="http://creativecommons.org/licenses/publicdomain/" + ><cc:permits + rdf:resource="http://creativecommons.org/ns#Reproduction" + /><cc:permits + rdf:resource="http://creativecommons.org/ns#Distribution" + /><cc:permits + rdf:resource="http://creativecommons.org/ns#DerivativeWorks" + /></cc:License + ></rdf:RDF + ></metadata + ></svg +> diff --git a/build/public/images/coffee-cup.svg b/build/public/images/coffee-cup.svg new file mode 100644 index 0000000..f1ade21 --- /dev/null +++ b/build/public/images/coffee-cup.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="320px" height="439px" viewBox="0 0 320 439" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 62 (91390) - https://sketch.com --> + <title>coffee-cup</title> + <desc>Created with Sketch.</desc> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="coffee-cup" fill="#000000" fill-rule="nonzero"> + <path d="M254.55,229.29 C276.57,231.4814 294.159,240.845 306.378,257.989 C324.796,283.844 325.687,324.157 300.4874,344.341 C290.2414,352.5441 275.9524,356.415 262.9014,360.122 C255.3467,362.2626 250.7564,363.3993 251.7844,372.524 C252.73752,380.9732 252.1594,389.598 252.49143,398.122 C252.80393,406.3876 248.08523,412.364 242.00343,415.931 C215.51543,431.454 186.10843,437.923 155.89843,438.298 C127.57843,438.64566 99.07043,437.49722 70.95743,434.2707 C49.70343,431.841 28.52743,426.048 10.61743,413.0597 C8.01193,411.1613 6.62913,406.1339 6.51973,402.4817 C4.64863,341.7437 3.11353,281.0117 1.38303,220.2717 C1.15256,212.01 -0.29277,203.7167 0.05103,195.4907 C0.18384,192.2485 2.92213,187.7134 5.76983,186.1821 C38.41083,168.6701 73.48483,160.6001 110.45983,161.3071 C142.10483,161.90476 173.52583,164.1743 204.29983,172.5411 C221.54583,177.2325 238.67883,181.7481 250.95983,195.8931 C253.39733,198.7056 255.39343,202.8189 255.59263,206.4321 C255.97935,213.7485 255.00669,221.1271 254.55353,229.2871 L254.55,229.29 Z M16,339.04 C15.88672,342.3447 15.67969,344.6611 15.76562,346.9697 C16.44921,364.9347 17.71482,382.8757 17.67582,400.8287 C17.652383,408.4107 20.51562,412.7667 27.01562,414.7667 C38.84362,418.4112 50.67162,423.212 62.82062,424.462 C90.14462,427.294 117.64062,429.2159 145.11762,429.6964 C173.84062,430.18859 201.69562,423.8058 227.69962,411.5404 C232.76212,409.1537 241.55862,408.3724 241.57462,398.7284 C241.629308,379.1664 242.19181,359.5954 242.64882,340.0404 C243.47304,305.0524 244.43002,270.0834 245.19572,235.1104 C245.35197,227.6065 244.92228,220.0984 244.78556,213.3524 C164.46956,239.9574 86.39556,245.3994 9.60556,200.3254 C11.24616,226.5954 12.82436,251.6734 14.44536,277.6344 C24.33596,278.8453 34.69936,280.111 45.10536,281.3805 C43.06626,291.1305 43.06626,291.1305 14.92136,288.1617 C14.80808,292.2281 14.71042,296.2828 14.60105,300.7127 C23.68305,301.5252 32.60505,302.326 42.32805,303.1893 C41.56633,306.162 41.28505,309.6229 40.54685,309.7284 C32.12885,310.9003 23.64085,311.5604 14.88285,312.3925 C14.98832,317.498 15.1016,322.9315 15.23051,329.1585 C20.41801,329.04522 25.19931,328.43975 29.80851,329.04522 C32.26161,329.38506 34.42961,331.83822 36.72261,333.34212 C34.30461,335.38512 32.15231,338.52962 29.39841,339.18982 C25.55071,340.11951 21.25001,339.201538 15.99641,339.04529 L16,339.04 Z M20.8438,198.16 C78.3708,235.457 182.3138,228.445 237.1438,202.7538 C164.6638,188.4378 93.7738,189.2188 20.8438,198.16 Z M23.9649,188.058 C57.4139,186.6088 92.3519,184.7533 127.3149,183.6674 C163.0099,182.558 198.4949,184.7299 235.1649,193.5072 C192.3409,165.6052 62.1549,163.4912 23.9649,188.058 Z M254.1549,276.628 C254.45178,290.78 254.73302,304.148 254.97912,317.526 C265.68612,318.05334 275.38512,310.6002 276.30312,301.124 C277.51792,288.569 269.26792,279.073 254.1549,276.628 L254.1549,276.628 Z" id="Shape"></path> + <path d="M129.34,129.34 C123.5509,132.4767 117.703,129.98844 114.504,121.6447 C107.297,102.8397 105.9298,81.2107 124.3321,63.4997 C129.5274,58.4997 134.1602,52.4527 137.4691,46.0737 C141.5668,38.1714 139.3324,30.0817 135.2347,22.2807 C132.5355,17.144 130.7816,11.4287 129.3285,5.8007 C128.92616,4.2812 130.8871,0.7812 132.2582,0.5077 C134.102,0.11708 137.684,1.45301 138.2855,2.9491 C142.2933,12.9335 146.7464,22.9411 149.0665,33.3791 C152.1876,47.3521 144.4454,58.2311 134.4455,66.4411 C117.7505,80.1601 117.9885,97.5191 121.9965,115.8551 C122.98869,120.4293 126.5824,124.4449 129.3403,129.3391 L129.34,129.34 Z" id="Path"></path> + <path d="M196.39,33.457 C203.3861,31.0039 206.48,33.832 208.16,40.7422 C211.6834,55.2732 207.73813,66.5082 195.836,75.7192 C175.367,91.5432 173.34,103.1762 186.1368,125.5202 C186.39461,125.96161 186.1993,126.6452 186.226644,127.8444 C178.867244,132.2741 174.925644,126.4616 173.101644,121.571 C167.082144,105.337 164.718844,88.571 182.972744,74.911 C200.339744,61.911 200.921744,57.72 196.390744,33.458 L196.39,33.457 Z" id="Path"></path> + <path d="M62.1,133.84 C53.7914,137.3634 49.702,132.0939 47.014,127.4728 C40.0492,115.4998 35.362,98.1958 48.5023,82.8748 C54.2875,76.1326 60.2643,69.0078 58.6233,59.1908 C57.87721,54.7572 55.5139,50.6127 54.1702,46.2458 C53.43192,43.8317 53.25614,41.238 52.8304,38.7302 C55.7523,39.37473 60.0843,39.02317 61.3773,40.82 C69.3031,51.879 73.0373,63.277 64.5375,76.957 C62.8305,79.7109 60.6078,82.1445 58.6469,84.7422 C47.5649,99.4372 47.6859,113.6762 58.94377,128.3042 C60.01017,129.6948 60.70547,131.3628 62.09997,133.8394 L62.1,133.84 Z" id="Path"></path> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/build/public/images/comic.webp b/build/public/images/comic.webp Binary files differnew file mode 100644 index 0000000..cc47bd1 --- /dev/null +++ b/build/public/images/comic.webp diff --git a/build/public/images/craigslist-gallery.png b/build/public/images/craigslist-gallery.png Binary files differnew file mode 100644 index 0000000..d49d5cd --- /dev/null +++ b/build/public/images/craigslist-gallery.png diff --git a/build/public/images/craigslist-gallery.webp b/build/public/images/craigslist-gallery.webp Binary files differnew file mode 100644 index 0000000..119c3be --- /dev/null +++ b/build/public/images/craigslist-gallery.webp diff --git a/build/public/images/css-orb.png b/build/public/images/css-orb.png Binary files differnew file mode 100644 index 0000000..89ec3ab --- /dev/null +++ b/build/public/images/css-orb.png diff --git a/build/public/images/custom-radio-inputs.png b/build/public/images/custom-radio-inputs.png Binary files differnew file mode 100644 index 0000000..3058384 --- /dev/null +++ b/build/public/images/custom-radio-inputs.png diff --git a/build/public/images/cut-forms.webp b/build/public/images/cut-forms.webp Binary files differnew file mode 100644 index 0000000..e39d9d6 --- /dev/null +++ b/build/public/images/cut-forms.webp diff --git a/build/public/images/cut-heatsink.webp b/build/public/images/cut-heatsink.webp Binary files differnew file mode 100644 index 0000000..363aec9 --- /dev/null +++ b/build/public/images/cut-heatsink.webp diff --git a/build/public/images/dither-desktop.png b/build/public/images/dither-desktop.png Binary files differnew file mode 100644 index 0000000..bea61c3 --- /dev/null +++ b/build/public/images/dither-desktop.png diff --git a/build/public/images/dither-desktop.webp b/build/public/images/dither-desktop.webp Binary files differnew file mode 100644 index 0000000..e1581da --- /dev/null +++ b/build/public/images/dither-desktop.webp diff --git a/build/public/images/dropbox-404_bovayg_c_scale,w_758.webp b/build/public/images/dropbox-404_bovayg_c_scale,w_758.webp Binary files differnew file mode 100644 index 0000000..af6bbc3 --- /dev/null +++ b/build/public/images/dropbox-404_bovayg_c_scale,w_758.webp diff --git a/build/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp b/build/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp Binary files differnew file mode 100644 index 0000000..f15e21b --- /dev/null +++ b/build/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp diff --git a/build/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp b/build/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp Binary files differnew file mode 100644 index 0000000..f97ece1 --- /dev/null +++ b/build/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp diff --git a/build/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp b/build/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp Binary files differnew file mode 100644 index 0000000..553e2aa --- /dev/null +++ b/build/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp diff --git a/build/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp b/build/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp Binary files differnew file mode 100644 index 0000000..554e460 --- /dev/null +++ b/build/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp diff --git a/build/public/images/e54ac9b2850f786471d7790bec3844a6.webp b/build/public/images/e54ac9b2850f786471d7790bec3844a6.webp Binary files differnew file mode 100644 index 0000000..66e6771 --- /dev/null +++ b/build/public/images/e54ac9b2850f786471d7790bec3844a6.webp diff --git a/build/public/images/easy-toggle-switches.png b/build/public/images/easy-toggle-switches.png Binary files differnew file mode 100644 index 0000000..beef023 --- /dev/null +++ b/build/public/images/easy-toggle-switches.png diff --git a/build/public/images/eero-pi-hole.webp b/build/public/images/eero-pi-hole.webp Binary files differnew file mode 100644 index 0000000..bcea2df --- /dev/null +++ b/build/public/images/eero-pi-hole.webp diff --git a/build/public/images/eli-schiff-twitter.webp b/build/public/images/eli-schiff-twitter.webp Binary files differnew file mode 100644 index 0000000..5d2be44 --- /dev/null +++ b/build/public/images/eli-schiff-twitter.webp diff --git a/build/public/images/et-book-gill-sans.webp b/build/public/images/et-book-gill-sans.webp Binary files differnew file mode 100644 index 0000000..e4becaf --- /dev/null +++ b/build/public/images/et-book-gill-sans.webp diff --git a/build/public/images/fanwood-league.webp b/build/public/images/fanwood-league.webp Binary files differnew file mode 100644 index 0000000..367d17b --- /dev/null +++ b/build/public/images/fanwood-league.webp diff --git a/build/public/images/fathom-create-droplet-details.webp b/build/public/images/fathom-create-droplet-details.webp Binary files differnew file mode 100644 index 0000000..7a1642f --- /dev/null +++ b/build/public/images/fathom-create-droplet-details.webp diff --git a/build/public/images/firefox-dark-mode.webp b/build/public/images/firefox-dark-mode.webp Binary files differnew file mode 100644 index 0000000..167fe18 --- /dev/null +++ b/build/public/images/firefox-dark-mode.webp diff --git a/build/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp b/build/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp Binary files differnew file mode 100644 index 0000000..0f75f3b --- /dev/null +++ b/build/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp diff --git a/build/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp b/build/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp Binary files differnew file mode 100644 index 0000000..e768981 --- /dev/null +++ b/build/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp diff --git a/build/public/images/flat-design-icons_vubivd_c_scale,w_800.webp b/build/public/images/flat-design-icons_vubivd_c_scale,w_800.webp Binary files differnew file mode 100644 index 0000000..03a80e9 --- /dev/null +++ b/build/public/images/flat-design-icons_vubivd_c_scale,w_800.webp diff --git a/build/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp b/build/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp Binary files differnew file mode 100644 index 0000000..64d32e9 --- /dev/null +++ b/build/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp diff --git a/build/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp b/build/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp Binary files differnew file mode 100644 index 0000000..1e5427a --- /dev/null +++ b/build/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp diff --git a/build/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp b/build/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp Binary files differnew file mode 100644 index 0000000..58b001a --- /dev/null +++ b/build/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp diff --git a/build/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp b/build/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp Binary files differnew file mode 100644 index 0000000..b065743 --- /dev/null +++ b/build/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp diff --git a/build/public/images/flexbox-bar-graph-1.webp b/build/public/images/flexbox-bar-graph-1.webp Binary files differnew file mode 100644 index 0000000..383d86b --- /dev/null +++ b/build/public/images/flexbox-bar-graph-1.webp diff --git a/build/public/images/flexbox-bar-graph-2.webp b/build/public/images/flexbox-bar-graph-2.webp Binary files differnew file mode 100644 index 0000000..271ee18 --- /dev/null +++ b/build/public/images/flexbox-bar-graph-2.webp diff --git a/build/public/images/flexbox-bar-graph-3.webp b/build/public/images/flexbox-bar-graph-3.webp Binary files differnew file mode 100644 index 0000000..6c5b9bf --- /dev/null +++ b/build/public/images/flexbox-bar-graph-3.webp diff --git a/build/public/images/flowkit.webp b/build/public/images/flowkit.webp Binary files differnew file mode 100644 index 0000000..611513e --- /dev/null +++ b/build/public/images/flowkit.webp diff --git a/build/public/images/github-design-current-redesign.webp b/build/public/images/github-design-current-redesign.webp Binary files differnew file mode 100644 index 0000000..44b1759 --- /dev/null +++ b/build/public/images/github-design-current-redesign.webp diff --git a/build/public/images/github-design-current.webp b/build/public/images/github-design-current.webp Binary files differnew file mode 100644 index 0000000..ca59f06 --- /dev/null +++ b/build/public/images/github-design-current.webp diff --git a/build/public/images/github-ticket-redesign.webp b/build/public/images/github-ticket-redesign.webp Binary files differnew file mode 100644 index 0000000..6a862b3 --- /dev/null +++ b/build/public/images/github-ticket-redesign.webp diff --git a/build/public/images/github-ticket.webp b/build/public/images/github-ticket.webp Binary files differnew file mode 100644 index 0000000..f5e82c4 --- /dev/null +++ b/build/public/images/github-ticket.webp diff --git a/build/public/images/globe.webp b/build/public/images/globe.webp Binary files differnew file mode 100644 index 0000000..3f1a754 --- /dev/null +++ b/build/public/images/globe.webp diff --git a/build/public/images/gnome-1.png b/build/public/images/gnome-1.png Binary files differnew file mode 100644 index 0000000..c648e86 --- /dev/null +++ b/build/public/images/gnome-1.png diff --git a/build/public/images/gnome-2.png b/build/public/images/gnome-2.png Binary files differnew file mode 100644 index 0000000..bec6fc2 --- /dev/null +++ b/build/public/images/gnome-2.png diff --git a/build/public/images/gnome-3.png b/build/public/images/gnome-3.png Binary files differnew file mode 100644 index 0000000..2a83027 --- /dev/null +++ b/build/public/images/gnome-3.png diff --git a/build/public/images/greedy-hand.webp b/build/public/images/greedy-hand.webp Binary files differnew file mode 100644 index 0000000..90b9eb0 --- /dev/null +++ b/build/public/images/greedy-hand.webp diff --git a/build/public/images/husqvarna-450x-wheels.png b/build/public/images/husqvarna-450x-wheels.png Binary files differnew file mode 100644 index 0000000..46fe931 --- /dev/null +++ b/build/public/images/husqvarna-450x-wheels.png diff --git a/build/public/images/inside-x201.jpg b/build/public/images/inside-x201.jpg Binary files differnew file mode 100644 index 0000000..88cf13d --- /dev/null +++ b/build/public/images/inside-x201.jpg diff --git a/build/public/images/jetpack-boost.webp b/build/public/images/jetpack-boost.webp Binary files differnew file mode 100644 index 0000000..9f2904e --- /dev/null +++ b/build/public/images/jetpack-boost.webp diff --git a/build/public/images/jetpack.webp b/build/public/images/jetpack.webp Binary files differnew file mode 100644 index 0000000..b72774d --- /dev/null +++ b/build/public/images/jetpack.webp diff --git a/build/public/images/karma-open-sans.webp b/build/public/images/karma-open-sans.webp Binary files differnew file mode 100644 index 0000000..8d6ef52 --- /dev/null +++ b/build/public/images/karma-open-sans.webp diff --git a/build/public/images/lenovo-tablet.png b/build/public/images/lenovo-tablet.png Binary files differnew file mode 100644 index 0000000..f59ed86 --- /dev/null +++ b/build/public/images/lenovo-tablet.png diff --git a/build/public/images/lenovo-tablet.webp b/build/public/images/lenovo-tablet.webp Binary files differnew file mode 100644 index 0000000..d8515c0 --- /dev/null +++ b/build/public/images/lenovo-tablet.webp diff --git a/build/public/images/li-ion-battery-hat-2.webp b/build/public/images/li-ion-battery-hat-2.webp Binary files differnew file mode 100644 index 0000000..928b9c1 --- /dev/null +++ b/build/public/images/li-ion-battery-hat-2.webp diff --git a/build/public/images/li-ion-battery-hat.webp b/build/public/images/li-ion-battery-hat.webp Binary files differnew file mode 100644 index 0000000..39c21d8 --- /dev/null +++ b/build/public/images/li-ion-battery-hat.webp diff --git a/build/public/images/libre-oswald.webp b/build/public/images/libre-oswald.webp Binary files differnew file mode 100644 index 0000000..d49e1dc --- /dev/null +++ b/build/public/images/libre-oswald.webp diff --git a/build/public/images/lighthouse-article-original.webp b/build/public/images/lighthouse-article-original.webp Binary files differnew file mode 100644 index 0000000..a7e5f76 --- /dev/null +++ b/build/public/images/lighthouse-article-original.webp diff --git a/build/public/images/lighthouse-article-updated.webp b/build/public/images/lighthouse-article-updated.webp Binary files differnew file mode 100644 index 0000000..9579d23 --- /dev/null +++ b/build/public/images/lighthouse-article-updated.webp diff --git a/build/public/images/lighthouse-homepage-original.webp b/build/public/images/lighthouse-homepage-original.webp Binary files differnew file mode 100644 index 0000000..74fbb0d --- /dev/null +++ b/build/public/images/lighthouse-homepage-original.webp diff --git a/build/public/images/lighthouse-homepage-updated.webp b/build/public/images/lighthouse-homepage-updated.webp Binary files differnew file mode 100644 index 0000000..b5cb181 --- /dev/null +++ b/build/public/images/lighthouse-homepage-updated.webp diff --git a/build/public/images/look-at-me.jpeg b/build/public/images/look-at-me.jpeg Binary files differnew file mode 100644 index 0000000..b3d9083 --- /dev/null +++ b/build/public/images/look-at-me.jpeg diff --git a/build/public/images/macos-color.svg b/build/public/images/macos-color.svg new file mode 100644 index 0000000..a10d568 --- /dev/null +++ b/build/public/images/macos-color.svg @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="123px" height="164px" viewBox="0 0 123 164" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 62 (91390) - https://sketch.com --> + <title>macos</title> + <desc>Created with Sketch.</desc> + <defs> + <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1"> + <stop stop-color="#0DD6FF" offset="0%"></stop> + <stop stop-color="#1E73F3" offset="100%"></stop> + </linearGradient> + <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2"> + <stop stop-color="#FFFFFF" offset="0%"></stop> + <stop stop-color="#DBE8F4" offset="100%"></stop> + </linearGradient> + </defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="macos"> + <path d="M121.66,153.44 C121.66,153.84 121.66,154.23 121.65,154.63 C121.65,154.99 121.65,155.32 121.64,155.66 C121.628337,156.326821 121.568178,156.991909 121.46,157.65 C121.359602,158.258804 121.167414,158.848852 120.89,159.4 C120.329178,160.470774 119.453004,161.343457 118.38,161.9 C117.82536,162.177486 117.232008,162.369651 116.62,162.47 C115.952298,162.581858 115.27696,162.642036 114.6,162.65 C114.28,162.66 113.95,162.66 113.62,162.66 L10.382,162.66 C10.046,162.66 9.718,162.66 9.382,162.65 C8.70510328,162.640784 8.02986123,162.580614 7.362,162.47 C6.75756645,162.369988 6.172076,162.177747 5.626,161.9 C5.08963911,161.627316 4.59880729,161.273108 4.171,160.85 C3.7379605,160.424661 3.37722139,159.931516 3.103,159.39 C2.82497995,158.846499 2.63398915,158.262728 2.537,157.66 C2.4249245,156.992325 2.36474443,156.316971 2.357,155.64 C2.349,155.4 2.346,155.18 2.344,154.95 L2.344,154.63 L2.344,9.35 L2.344,9.05 C2.344,8.82 2.344,8.6 2.357,8.37 C2.36428393,7.69313241 2.42345737,7.01781968 2.534,6.35 C2.63304746,5.74750769 2.82464353,5.16394924 3.102,4.62 C3.65342227,3.53258717 4.53771396,2.64969689 5.626,2.1 C6.17194575,1.82533838 6.75564105,1.63324467 7.358,1.53 C8.02850748,1.42033226 8.70659209,1.36349085 9.386,1.36 L9.621,1.35 C9.875,1.35 10.127,1.34 10.38,1.34 L113.61,1.34 C113.87,1.34 114.13,1.35 114.39,1.35 L114.62,1.36 C115.29342,1.36391002 115.96549,1.42075177 116.63,1.53 C117.237699,1.63489701 117.827097,1.82687235 118.38,2.1 C118.915876,2.37519605 119.405177,2.73289236 119.83,3.16 C120.264064,3.58491597 120.625525,4.07812432 120.9,4.62 C121.169748,5.16287364 121.358423,5.742373 121.46,6.34 C121.568223,7.01152209 121.628376,7.68991252 121.64,8.37 C121.65,8.68 121.65,9.01 121.65,9.35 C121.66,9.77 121.66,10.16 121.66,10.56 L121.66,153.44 Z" id="Path" fill="#F0EBDF"></path> + <path d="M28.62,90.3 L28.02,90.3 C27.87,90.29 27.72,90.29 27.55,90.29 C27.2517314,90.2859895 26.9542026,90.2592453 26.66,90.21 C26.4303757,90.1749284 26.2076709,90.1040678 26,90 C25.7951039,89.8991619 25.6090626,89.7638591 25.45,89.6 C25.2894211,89.4441923 25.1574205,89.2614221 25.06,89.06 C24.9525898,88.8528643 24.8783533,88.6301547 24.84,88.4 C24.795278,88.105234 24.7685618,87.8080164 24.76,87.51 L24.76,23.85 C24.7685618,23.5519836 24.795278,23.254766 24.84,22.96 C24.8783533,22.7298453 24.9525898,22.5071357 25.06,22.3 C25.2575842,21.8890749 25.5890749,21.5575842 26,21.36 C26.2089642,21.2569756 26.4310141,21.182959 26.66,21.14 C26.9544193,21.0937644 27.2519726,21.0703614 27.55,21.07 C27.71,21.06 27.87,21.06 28.03,21.06 L61.62,21.06 C59.0145225,26.8088838 57.2433124,32.900365 56.36,39.15 C55.3148855,45.5126371 54.6337779,51.9297392 54.32,58.37 C54.3,58.63 54.29,58.83 54.29,58.97 C54.1922951,59.8154482 54.4658797,60.6617367 55.04,61.29 C55.6480243,61.8969854 56.481497,62.2231268 57.34,62.19 L64.94,62.19 L65.2,62.18 C65.66,62.18 65.91,62.18 65.91,63.06 C65.91,66.65 66.05,70.32 66.3,74.02 C64.7867498,74.2009155 63.264026,74.2910768 61.74,74.29 C53.65,74.29 48.3,71.97 45.23,70.02 C43.3790358,68.9102227 41.7567182,67.4576036 40.45,65.74 C40.2294687,65.4088126 39.8578933,65.2098884 39.46,65.21 C39.2322947,65.2066732 39.0090035,65.2729628 38.82,65.4 C38.5539247,65.5664048 38.3663925,65.8332775 38.3,66.14 C38.2398941,66.4474892 38.3007929,66.7663122 38.47,67.03 C38.72,67.42 44.92,76.64 61.74,76.64 C63.3202024,76.6387205 64.8991778,76.551927 66.47,76.38 C66.47,76.43 66.48,76.47 66.48,76.52 C66.88,81.31 67.76,87.12 68.39,90.3 L28.62,90.3 Z" id="Path" fill="url(#linearGradient-1)"></path> + <path d="M98.84,86.52 L98.84,87.03 C98.84,87.19 98.84,87.35 98.83,87.51 C98.8250275,87.8078256 98.8016496,88.1050591 98.76,88.4 C98.717041,88.6289859 98.6430244,88.8510358 98.54,89.06 C98.3269466,89.4597136 97.9997136,89.7869466 97.6,90 C97.3923291,90.1040678 97.1696243,90.1749284 96.94,90.21 C96.64244,90.2592722 96.3415855,90.2860148 96.04,90.29 C95.88,90.29 95.73,90.29 95.56,90.3 L70.8,90.3 C69.906707,85.6801634 69.2525031,81.0172917 68.84,76.33 C68.83,76.23 68.83,76.14 68.82,76.04 C80.37,73.99 84.94,67.37 85.16,67.04 C85.3982205,66.6765878 85.4178346,66.2117707 85.2110766,65.8295815 C85.0043185,65.4473924 84.604531,65.2094647 84.17,65.21 C83.7780079,65.2128611 83.4121244,65.4070034 83.19,65.73 C81.8506222,67.4495452 80.202479,68.9043876 78.33,70.02 C75.360464,71.8322972 72.076821,73.0704477 68.65,73.67 C68.41,70.09 68.28,66.53 68.28,63.06 C68.383452,62.2015323 68.0984311,61.3416807 67.5026809,60.7149824 C66.9069306,60.0882841 66.0626027,59.7601194 65.2,59.82 L65.01,59.82 L57.34,59.83 C57.133518,59.8503995 56.926819,59.793379 56.76,59.67 C56.651779,59.5047918 56.612312,59.3038689 56.65,59.11 C56.66,58.97 56.67,58.75 56.68,58.48 C56.9999607,52.1240163 57.6743424,45.7908383 58.7,39.51 C59.5855141,33.1101613 61.4577428,26.8862656 64.25,21.06 L95.56,21.06 C95.72,21.06 95.88,21.06 96.04,21.07 C96.3380423,21.0699841 96.635625,21.0933895 96.93,21.14 C97.1625702,21.1814514 97.3881274,21.2555149 97.6,21.36 C97.79991,21.4599359 97.9822798,21.5916475 98.14,21.75 C98.2968986,21.9112881 98.4314336,22.0929103 98.54,22.29 C98.6415479,22.5030606 98.7154789,22.7282141 98.76,22.96 C98.8016496,23.2549409 98.8250275,23.5521744 98.83,23.85 C98.84,24.01 98.84,24.17 98.84,24.32 L98.84,86.52 Z" id="Path" fill="url(#linearGradient-2)"></path> + <path d="M122.99,9.35 L122.99,8.33 C122.975078,7.58582033 122.904885,6.84377779 122.78,6.11 C122.656435,5.3794025 122.423841,4.67150678 122.09,4.01 C121.409155,2.67239257 120.319793,1.58653348 118.98,0.91 C118.313776,0.56845844 117.598609,0.332318178 116.86,0.21 C116.126403,0.0863598388 115.383937,0.022815453 114.64,0.02 C114.3,0.01 113.96,-4.54747351e-13 113.62,-4.54747351e-13 L10.376,-4.54747351e-13 C10.037,-4.54747351e-13 9.698,0.01 9.356,0.02 C8.6097758,0.0235806882 7.86504586,0.0871184924 7.129,0.21 C6.39309871,0.332961185 5.68066446,0.569089961 5.017,0.91 C4.35165804,1.24480927 3.74401571,1.68366207 3.217,2.21 C2.68422105,2.73379354 2.24159948,3.34197585 1.907,4.01 C1.56880328,4.67004242 1.33470403,5.3784119 1.213,6.11 C1.08844686,6.84363973 1.0215755,7.58591183 1.013,8.33 C1.001,8.67 1.001,9.01 0.995,9.35 L0.995,154.66 C1.001,155 1.001,155.33 1.013,155.68 C1.02157591,156.420773 1.08844912,157.159722 1.213,157.89 C1.33314943,158.625156 1.56730045,159.337056 1.907,160 C2.244276,160.663409 2.68665758,161.267885 3.217,161.79 C3.74134275,162.31947 4.34952532,162.758713 5.017,163.09 C5.68066446,163.43091 6.39309871,163.667039 7.129,163.79 C7.86541976,163.911225 8.60976462,163.978072 9.356,163.99 C9.698,163.99 10.037,164 10.376,164 L113.62,164 C113.96,164 114.3,163.99 114.64,163.99 C115.383957,163.978878 116.126034,163.912024 116.86,163.79 C117.598609,163.667682 118.313776,163.431542 118.98,163.09 C119.6489,162.761079 120.257455,162.321567 120.78,161.79 C121.309119,161.266829 121.751347,160.662562 122.09,160 C122.425358,159.335598 122.658004,158.624174 122.78,157.89 C122.904883,157.159584 122.975078,156.420865 122.99,155.68 L122.99,154.66 C123,154.25 123,153.85 123,153.44 L123,10.56 C123,10.15 123,9.75 122.99,9.35 L122.99,9.35 Z M121.66,153.44 C121.66,153.84 121.66,154.23 121.65,154.63 C121.65,154.99 121.65,155.32 121.64,155.66 C121.628337,156.326821 121.568178,156.991909 121.46,157.65 C121.359602,158.258804 121.167414,158.848852 120.89,159.4 C120.329178,160.470774 119.453004,161.343457 118.38,161.9 C117.82536,162.177486 117.232008,162.369651 116.62,162.47 C115.952298,162.581858 115.27696,162.642036 114.6,162.65 C114.28,162.66 113.95,162.66 113.62,162.66 L10.382,162.66 C10.046,162.66 9.718,162.66 9.382,162.65 C8.70510328,162.640784 8.02986123,162.580614 7.362,162.47 C6.75756645,162.369988 6.172076,162.177747 5.626,161.9 C5.08963911,161.627316 4.59880729,161.273108 4.171,160.85 C3.7379605,160.424661 3.37722139,159.931516 3.103,159.39 C2.82497995,158.846499 2.63398915,158.262728 2.537,157.66 C2.4249245,156.992325 2.36474443,156.316971 2.357,155.64 C2.349,155.4 2.346,155.18 2.344,154.95 L2.344,154.63 L2.344,9.35 L2.344,9.05 C2.344,8.82 2.344,8.6 2.357,8.37 C2.36428393,7.69313241 2.42345737,7.01781968 2.534,6.35 C2.63304746,5.74750769 2.82464353,5.16394924 3.102,4.62 C3.65342227,3.53258717 4.53771396,2.64969689 5.626,2.1 C6.17194575,1.82533838 6.75564105,1.63324467 7.358,1.53 C8.02850748,1.42033226 8.70659209,1.36349085 9.386,1.36 L9.621,1.35 C9.875,1.35 10.127,1.34 10.38,1.34 L113.61,1.34 C113.87,1.34 114.13,1.35 114.39,1.35 L114.62,1.36 C115.29342,1.36391002 115.96549,1.42075177 116.63,1.53 C117.237699,1.63489701 117.827097,1.82687235 118.38,2.1 C118.915876,2.37519605 119.405177,2.73289236 119.83,3.16 C120.264064,3.58491597 120.625525,4.07812432 120.9,4.62 C121.169748,5.16287364 121.358423,5.742373 121.46,6.34 C121.568223,7.01152209 121.628376,7.68991252 121.64,8.37 C121.65,8.68 121.65,9.01 121.65,9.35 C121.66,9.77 121.66,10.16 121.66,10.56 L121.66,153.44 Z M78.91,38.0499566 C78.0771893,38.052744 77.402744,38.7271893 77.4,39.56 L77.4,44.66 C77.402744,45.4928107 78.0771893,46.167256 78.91,46.1700059 C79.3089985,46.1711261 79.6916876,46.0117486 79.9719362,45.7277383 C80.2521847,45.443728 80.4064457,45.0589481 80.4,44.66 L80.4,39.56 C80.4083874,39.1604862 80.2547566,38.7745794 79.9740854,38.4901409 C79.6934143,38.2057023 79.3095901,38.0469399 78.91,38.0499566 L78.91,38.0499566 Z M44.71,46.1700003 C45.5428107,46.167256 46.217256,45.4928107 46.22,44.66 L46.22,39.56 C46.22,38.72605 45.54395,38.05 44.71,38.05 C43.87605,38.05 43.1999997,38.72605 43.1999997,39.56 L43.1999997,44.66 C43.1997345,45.0605582 43.358738,45.444787 43.6419755,45.7280245 C43.925213,46.011262 44.3094418,46.1702655 44.71,46.1700003 L44.71,46.1700003 Z M100.2,24.32 C100.2,24.15 100.2,23.98 100.19,23.81 C100.189849,23.4448172 100.159748,23.0802619 100.1,22.72 C100.034917,22.3580578 99.9169901,22.0076465 99.75,21.68 C99.5877778,21.3497269 99.3714605,21.0489107 99.11,20.79 C98.8483961,20.5317108 98.548124,20.3157847 98.22,20.15 C97.889642,19.9831626 97.535448,19.8684712 97.17,19.81 C96.8100022,19.7469939 96.4454526,19.713549 96.08,19.71 C95.91,19.71 95.74,19.7 95.57,19.7 L28.02,19.7 C27.86,19.7 27.69,19.71 27.52,19.71 C27.1512094,19.7130695 26.7832984,19.7465159 26.42,19.81 C26.0573857,19.8670044 25.7062604,19.9817954 25.38,20.15 C25.051876,20.3157847 24.7516039,20.5317108 24.49,20.79 C24.2286209,21.0512754 24.0093479,21.3515108 23.84,21.68 C23.6717954,22.0062604 23.5570044,22.3573857 23.5,22.72 C23.4369939,23.0799978 23.403549,23.4445474 23.4,23.81 C23.4,23.98 23.39,24.15 23.39,24.32 L23.39,87.04 C23.39,87.21 23.4,87.38 23.4,87.54 C23.4030695,87.9087906 23.4365159,88.2767016 23.5,88.64 C23.5570044,89.0026143 23.6717954,89.3537396 23.84,89.68 C24.0093479,90.0084892 24.2286209,90.3087246 24.49,90.57 C24.7516039,90.8282892 25.051876,91.0442153 25.38,91.21 C25.7062604,91.3782046 26.0573857,91.4929956 26.42,91.55 C26.7832984,91.6134841 27.1512094,91.6469305 27.52,91.65 C27.69,91.65 27.86,91.65 28.02,91.66 L95.57,91.66 C95.74,91.65 95.91,91.65 96.08,91.65 C96.4454526,91.646451 96.8100022,91.6130061 97.17,91.55 C97.535448,91.4915288 97.889642,91.3768374 98.22,91.21 C98.548124,91.0442153 98.8483961,90.8282892 99.11,90.57 C99.3714605,90.3110893 99.5877778,90.0102731 99.75,89.68 C99.9169901,89.3523535 100.034917,89.0019422 100.1,88.64 C100.160155,88.2764269 100.190257,87.908516 100.19,87.54 C100.2,87.38 100.2,87.21 100.2,87.04 L100.2,24.32 Z M28.62,90.3 L28.02,90.3 C27.87,90.29 27.72,90.29 27.55,90.29 C27.2517314,90.2859895 26.9542026,90.2592453 26.66,90.21 C26.4303757,90.1749284 26.2076709,90.1040678 26,90 C25.7951039,89.8991619 25.6090626,89.7638591 25.45,89.6 C25.2894211,89.4441923 25.1574205,89.2614221 25.06,89.06 C24.9525898,88.8528643 24.8783533,88.6301547 24.84,88.4 C24.795278,88.105234 24.7685618,87.8080164 24.76,87.51 L24.76,23.85 C24.7685618,23.5519836 24.795278,23.254766 24.84,22.96 C24.8783533,22.7298453 24.9525898,22.5071357 25.06,22.3 C25.2575842,21.8890749 25.5890749,21.5575842 26,21.36 C26.2089642,21.2569756 26.4310141,21.182959 26.66,21.14 C26.9544193,21.0937644 27.2519726,21.0703614 27.55,21.07 C27.71,21.06 27.87,21.06 28.03,21.06 L61.62,21.06 C59.0145225,26.8088838 57.2433124,32.900365 56.36,39.15 C55.3148855,45.5126371 54.6337779,51.9297392 54.32,58.37 C54.3,58.63 54.29,58.83 54.29,58.97 C54.1922951,59.8154482 54.4658797,60.6617367 55.04,61.29 C55.6480243,61.8969854 56.481497,62.2231268 57.34,62.19 L64.94,62.19 L65.2,62.18 C65.66,62.18 65.91,62.18 65.91,63.06 C65.91,66.65 66.05,70.32 66.3,74.02 C64.7867498,74.2009155 63.264026,74.2910768 61.74,74.29 C53.65,74.29 48.3,71.97 45.23,70.02 C43.3790358,68.9102227 41.7567182,67.4576036 40.45,65.74 C40.2294687,65.4088126 39.8578933,65.2098884 39.46,65.21 C39.2322947,65.2066732 39.0090035,65.2729628 38.82,65.4 C38.5539247,65.5664048 38.3663925,65.8332775 38.3,66.14 C38.2398941,66.4474892 38.3007929,66.7663122 38.47,67.03 C38.72,67.42 44.92,76.64 61.74,76.64 C63.3202024,76.6387205 64.8991778,76.551927 66.47,76.38 C66.47,76.43 66.48,76.47 66.48,76.52 C66.88,81.31 67.76,87.12 68.39,90.3 L28.62,90.3 Z M98.84,86.52 L98.84,87.03 C98.84,87.19 98.84,87.35 98.83,87.51 C98.8250275,87.8078256 98.8016496,88.1050591 98.76,88.4 C98.717041,88.6289859 98.6430244,88.8510358 98.54,89.06 C98.3269466,89.4597136 97.9997136,89.7869466 97.6,90 C97.3923291,90.1040678 97.1696243,90.1749284 96.94,90.21 C96.64244,90.2592722 96.3415855,90.2860148 96.04,90.29 C95.88,90.29 95.73,90.29 95.56,90.3 L70.8,90.3 C69.906707,85.6801634 69.2525031,81.0172917 68.84,76.33 C68.83,76.23 68.83,76.14 68.82,76.04 C80.37,73.99 84.94,67.37 85.16,67.04 C85.3982205,66.6765878 85.4178346,66.2117707 85.2110766,65.8295815 C85.0043185,65.4473924 84.604531,65.2094647 84.17,65.21 C83.7780079,65.2128611 83.4121244,65.4070034 83.19,65.73 C81.8506222,67.4495452 80.202479,68.9043876 78.33,70.02 C75.360464,71.8322972 72.076821,73.0704477 68.65,73.67 C68.41,70.09 68.28,66.53 68.28,63.06 C68.383452,62.2015323 68.0984311,61.3416807 67.5026809,60.7149824 C66.9069306,60.0882841 66.0626027,59.7601194 65.2,59.82 L65.01,59.82 L57.34,59.83 C57.133518,59.8503995 56.926819,59.793379 56.76,59.67 C56.651779,59.5047918 56.612312,59.3038689 56.65,59.11 C56.66,58.97 56.67,58.75 56.68,58.48 C56.9999607,52.1240163 57.6743424,45.7908383 58.7,39.51 C59.5855141,33.1101613 61.4577428,26.8862656 64.25,21.06 L95.56,21.06 C95.72,21.06 95.88,21.06 96.04,21.07 C96.3380423,21.0699841 96.635625,21.0933895 96.93,21.14 C97.1625702,21.1814514 97.3881274,21.2555149 97.6,21.36 C97.79991,21.4599359 97.9822798,21.5916475 98.14,21.75 C98.2968986,21.9112881 98.4314336,22.0929103 98.54,22.29 C98.6415479,22.5030606 98.7154789,22.7282141 98.76,22.96 C98.8016496,23.2549409 98.8250275,23.5521744 98.83,23.85 C98.84,24.01 98.84,24.17 98.84,24.32 L98.84,86.52 Z M54.38,143.4 L50.07,143.4 L50.07,121.18 L49.93,121.18 L40.79,143.17 L37.3,143.17 L28.14,121.18 L27.99,121.18 L27.99,143.4 L23.71,143.4 L23.71,113.2 L29.15,113.2 L38.96,137.04 L39.13,137.04 L48.92,113.2 L54.38,113.2 L54.38,143.4 Z M59.06,137.15 C59.06,133.28 62.02,131.06 67.48,130.72 L73.34,130.36 L73.34,128.69 C73.34,126.24 71.73,124.9 68.85,124.9 C66.47,124.9 64.75,126.12 64.4,127.98 L60.15,127.98 C60.28,124.06 63.97,121.22 68.97,121.22 C74.35,121.22 77.86,124.02 77.86,128.38 L77.86,143.4 L73.51,143.4 L73.51,139.78 L73.4,139.78 C71.9748605,142.242406 69.313819,143.724602 66.47,143.64 C62.1,143.64 59.06,141.04 59.06,137.15 L59.06,137.15 Z M73.34,135.2 L73.34,133.5 L68.11,133.84 C65.17,134.03 63.64,135.12 63.64,137.02 C63.64,138.86 65.23,140.06 67.74,140.06 C70.92,140.06 73.34,138.03 73.34,135.2 L73.34,135.2 Z M97.46,129.05 C97.059359,126.554086 94.8102144,124.783483 92.29,124.98 C88.83,124.98 86.52,127.9 86.52,132.44 C86.52,137.13 88.84,139.91 92.31,139.91 C95.1,139.91 96.95,138.53 97.48,135.98 L101.83,135.98 C101.35,140.62 97.63,143.68 92.29,143.68 C86.01,143.68 81.89,139.41 81.89,132.44 C81.89,125.64 86.01,121.22 92.25,121.22 C97.9,121.22 101.41,124.76 101.79,129.05 L97.46,129.05 Z" id="Shape" fill="#000000"></path> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/build/public/images/macos-convert-1.png b/build/public/images/macos-convert-1.png Binary files differnew file mode 100644 index 0000000..a59a239 --- /dev/null +++ b/build/public/images/macos-convert-1.png diff --git a/build/public/images/macos-convert-1.webp b/build/public/images/macos-convert-1.webp Binary files differnew file mode 100644 index 0000000..550ecea --- /dev/null +++ b/build/public/images/macos-convert-1.webp diff --git a/build/public/images/macos-convert-2.png b/build/public/images/macos-convert-2.png Binary files differnew file mode 100644 index 0000000..3caed58 --- /dev/null +++ b/build/public/images/macos-convert-2.png diff --git a/build/public/images/macos-convert-2.webp b/build/public/images/macos-convert-2.webp Binary files differnew file mode 100644 index 0000000..c851d03 --- /dev/null +++ b/build/public/images/macos-convert-2.webp diff --git a/build/public/images/macos-convert-3.png b/build/public/images/macos-convert-3.png Binary files differnew file mode 100644 index 0000000..98cf3dd --- /dev/null +++ b/build/public/images/macos-convert-3.png diff --git a/build/public/images/macos-convert-3.webp b/build/public/images/macos-convert-3.webp Binary files differnew file mode 100644 index 0000000..dd7feda --- /dev/null +++ b/build/public/images/macos-convert-3.webp diff --git a/build/public/images/macos.svg b/build/public/images/macos.svg new file mode 100644 index 0000000..ee67b2d --- /dev/null +++ b/build/public/images/macos.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="123px" height="164px" viewBox="0 0 123 164" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 62 (91390) - https://sketch.com --> + <title>macos</title> + <desc>Created with Sketch.</desc> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="macos" fill="#000000"> + <path d="M122.99,9.35 L122.99,8.33 C122.975078,7.58582033 122.904885,6.84377779 122.78,6.11 C122.656435,5.3794025 122.423841,4.67150678 122.09,4.01 C121.409155,2.67239257 120.319793,1.58653348 118.98,0.91 C118.313776,0.56845844 117.598609,0.332318178 116.86,0.21 C116.126403,0.0863598388 115.383937,0.022815453 114.64,0.02 C114.3,0.01 113.96,-4.54747351e-13 113.62,-4.54747351e-13 L10.376,-4.54747351e-13 C10.037,-4.54747351e-13 9.698,0.01 9.356,0.02 C8.6097758,0.0235806882 7.86504586,0.0871184924 7.129,0.21 C6.39309871,0.332961185 5.68066446,0.569089961 5.017,0.91 C4.35165804,1.24480927 3.74401571,1.68366207 3.217,2.21 C2.68422105,2.73379354 2.24159948,3.34197585 1.907,4.01 C1.56880328,4.67004242 1.33470403,5.3784119 1.213,6.11 C1.08844686,6.84363973 1.0215755,7.58591183 1.013,8.33 C1.001,8.67 1.001,9.01 0.995,9.35 L0.995,154.66 C1.001,155 1.001,155.33 1.013,155.68 C1.02157591,156.420773 1.08844912,157.159722 1.213,157.89 C1.33314943,158.625156 1.56730045,159.337056 1.907,160 C2.244276,160.663409 2.68665758,161.267885 3.217,161.79 C3.74134275,162.31947 4.34952532,162.758713 5.017,163.09 C5.68066446,163.43091 6.39309871,163.667039 7.129,163.79 C7.86541976,163.911225 8.60976462,163.978072 9.356,163.99 C9.698,163.99 10.037,164 10.376,164 L113.62,164 C113.96,164 114.3,163.99 114.64,163.99 C115.383957,163.978878 116.126034,163.912024 116.86,163.79 C117.598609,163.667682 118.313776,163.431542 118.98,163.09 C119.6489,162.761079 120.257455,162.321567 120.78,161.79 C121.309119,161.266829 121.751347,160.662562 122.09,160 C122.425358,159.335598 122.658004,158.624174 122.78,157.89 C122.904883,157.159584 122.975078,156.420865 122.99,155.68 L122.99,154.66 C123,154.25 123,153.85 123,153.44 L123,10.56 C123,10.15 123,9.75 122.99,9.35 L122.99,9.35 Z M116.664,149.011535 C116.664,149.386739 116.664,149.752564 116.654838,150.127768 C116.654838,150.465453 116.654838,150.774996 116.645676,151.09392 C116.634989,151.719406 116.579871,152.343266 116.480756,152.960563 C116.388768,153.531628 116.212682,154.0851 115.958509,154.602083 C115.444671,155.606481 114.641901,156.425068 113.65879,156.947111 C113.150617,157.207396 112.606974,157.387649 112.046239,157.481778 C111.434475,157.586702 110.815716,157.64315 110.195469,157.65062 C109.902278,157.66 109.599925,157.66 109.297571,157.66 L14.7085962,157.66 C14.4007454,157.66 14.1002245,157.66 13.7923737,157.65062 C13.1721857,157.641975 12.5535138,157.585535 11.9416043,157.481778 C11.3878087,157.387965 10.8513692,157.207641 10.3510421,156.947111 C9.85961624,156.691331 9.4099051,156.359079 9.01793845,155.962199 C8.62117793,155.563226 8.29066065,155.100651 8.03941285,154.592703 C7.78468464,154.082893 7.60969458,153.535309 7.52083094,152.969943 C7.41814484,152.343657 7.36300651,151.710167 7.35591089,151.07516 C7.34858111,150.850037 7.34583244,150.643675 7.344,150.427932 L7.344,150.127768 L7.344,13.8534714 L7.344,13.5720679 C7.344,13.3563253 7.344,13.1499628 7.35591089,12.9342202 C7.36258459,12.2993107 7.41680063,11.6658596 7.51808227,11.0394371 C7.60883177,10.4742925 7.7843764,9.926908 8.03849663,9.41667741 C8.5437221,8.39667178 9.35393002,7.56851062 10.3510421,7.05288867 C10.8512499,6.79525294 11.3860446,6.61506684 11.9379395,6.51822217 C12.5522735,6.41535258 13.1735498,6.36203469 13.7960386,6.35876023 L14.0113509,6.34938011 C14.2440714,6.34938011 14.4749595,6.34 14.7067638,6.34 L109.288409,6.34 C109.526627,6.34 109.764845,6.34938011 110.003063,6.34938011 L110.213794,6.35876023 C110.830796,6.36242787 111.446562,6.41574608 112.055401,6.51822217 C112.612188,6.61661676 113.152208,6.79669181 113.65879,7.05288867 C114.149772,7.3110257 114.598081,7.64654892 114.987313,8.04718076 C115.385013,8.44575679 115.716191,8.90839184 115.967671,9.41667741 C116.21482,9.92589908 116.387688,10.4694761 116.480756,11.030057 C116.579912,11.6599524 116.635025,12.2962904 116.645676,12.9342202 C116.654838,13.2250037 116.654838,13.5345475 116.654838,13.8534714 C116.664,14.2474362 116.664,14.6132606 116.664,14.9884652 L116.664,149.011535 Z M78.91,38.0499566 C78.0771893,38.052744 77.402744,38.7271893 77.4,39.56 L77.4,44.66 C77.402744,45.4928107 78.0771893,46.167256 78.91,46.1700059 C79.3089985,46.1711261 79.6916876,46.0117486 79.9719362,45.7277383 C80.2521847,45.443728 80.4064457,45.0589481 80.4,44.66 L80.4,39.56 C80.4083874,39.1604862 80.2547566,38.7745794 79.9740854,38.4901409 C79.6934143,38.2057023 79.3095901,38.0469399 78.91,38.0499566 L78.91,38.0499566 Z M44.71,46.1700003 C45.5428107,46.167256 46.217256,45.4928107 46.22,44.66 L46.22,39.56 C46.22,38.72605 45.54395,38.05 44.71,38.05 C43.87605,38.05 43.1999997,38.72605 43.1999997,39.56 L43.1999997,44.66 C43.1997345,45.0605582 43.358738,45.444787 43.6419755,45.7280245 C43.925213,46.011262 44.3094418,46.1702655 44.71,46.1700003 L44.71,46.1700003 Z M100.2,24.32 C100.2,24.15 100.2,23.98 100.19,23.81 C100.189849,23.4448172 100.159748,23.0802619 100.1,22.72 C100.034917,22.3580578 99.9169901,22.0076465 99.75,21.68 C99.5877778,21.3497269 99.3714605,21.0489107 99.11,20.79 C98.8483961,20.5317108 98.548124,20.3157847 98.22,20.15 C97.889642,19.9831626 97.535448,19.8684712 97.17,19.81 C96.8100022,19.7469939 96.4454526,19.713549 96.08,19.71 C95.91,19.71 95.74,19.7 95.57,19.7 L28.02,19.7 C27.86,19.7 27.69,19.71 27.52,19.71 C27.1512094,19.7130695 26.7832984,19.7465159 26.42,19.81 C26.0573857,19.8670044 25.7062604,19.9817954 25.38,20.15 C25.051876,20.3157847 24.7516039,20.5317108 24.49,20.79 C24.2286209,21.0512754 24.0093479,21.3515108 23.84,21.68 C23.6717954,22.0062604 23.5570044,22.3573857 23.5,22.72 C23.4369939,23.0799978 23.403549,23.4445474 23.4,23.81 C23.4,23.98 23.39,24.15 23.39,24.32 L23.39,87.04 C23.39,87.21 23.4,87.38 23.4,87.54 C23.4030695,87.9087906 23.4365159,88.2767016 23.5,88.64 C23.5570044,89.0026143 23.6717954,89.3537396 23.84,89.68 C24.0093479,90.0084892 24.2286209,90.3087246 24.49,90.57 C24.7516039,90.8282892 25.051876,91.0442153 25.38,91.21 C25.7062604,91.3782046 26.0573857,91.4929956 26.42,91.55 C26.7832984,91.6134841 27.1512094,91.6469305 27.52,91.65 C27.69,91.65 27.86,91.65 28.02,91.66 L95.57,91.66 C95.74,91.65 95.91,91.65 96.08,91.65 C96.4454526,91.646451 96.8100022,91.6130061 97.17,91.55 C97.535448,91.4915288 97.889642,91.3768374 98.22,91.21 C98.548124,91.0442153 98.8483961,90.8282892 99.11,90.57 C99.3714605,90.3110893 99.5877778,90.0102731 99.75,89.68 C99.9169901,89.3523535 100.034917,89.0019422 100.1,88.64 C100.160155,88.2764269 100.190257,87.908516 100.19,87.54 C100.2,87.38 100.2,87.21 100.2,87.04 L100.2,24.32 Z M28.62,90.3 L28.02,90.3 C27.87,90.29 27.72,90.29 27.55,90.29 C27.2517314,90.2859895 26.9542026,90.2592453 26.66,90.21 C26.4303757,90.1749284 26.2076709,90.1040678 26,90 C25.7951039,89.8991619 25.6090626,89.7638591 25.45,89.6 C25.2894211,89.4441923 25.1574205,89.2614221 25.06,89.06 C24.9525898,88.8528643 24.8783533,88.6301547 24.84,88.4 C24.795278,88.105234 24.7685618,87.8080164 24.76,87.51 L24.76,23.85 C24.7685618,23.5519836 24.795278,23.254766 24.84,22.96 C24.8783533,22.7298453 24.9525898,22.5071357 25.06,22.3 C25.2575842,21.8890749 25.5890749,21.5575842 26,21.36 C26.2089642,21.2569756 26.4310141,21.182959 26.66,21.14 C26.9544193,21.0937644 27.2519726,21.0703614 27.55,21.07 C27.71,21.06 27.87,21.06 28.03,21.06 L61.62,21.06 C59.0145225,26.8088838 57.2433124,32.900365 56.36,39.15 C55.3148855,45.5126371 54.6337779,51.9297392 54.32,58.37 C54.3,58.63 54.29,58.83 54.29,58.97 C54.1922951,59.8154482 54.4658797,60.6617367 55.04,61.29 C55.6480243,61.8969854 56.481497,62.2231268 57.34,62.19 L64.94,62.19 L65.2,62.18 C65.66,62.18 65.91,62.18 65.91,63.06 C65.91,66.65 66.05,70.32 66.3,74.02 C64.7867498,74.2009155 63.264026,74.2910768 61.74,74.29 C53.65,74.29 48.3,71.97 45.23,70.02 C43.3790358,68.9102227 41.7567182,67.4576036 40.45,65.74 C40.2294687,65.4088126 39.8578933,65.2098884 39.46,65.21 C39.2322947,65.2066732 39.0090035,65.2729628 38.82,65.4 C38.5539247,65.5664048 38.3663925,65.8332775 38.3,66.14 C38.2398941,66.4474892 38.3007929,66.7663122 38.47,67.03 C38.72,67.42 44.92,76.64 61.74,76.64 C63.3202024,76.6387205 64.8991778,76.551927 66.47,76.38 C66.47,76.43 66.48,76.47 66.48,76.52 C66.88,81.31 67.76,87.12 68.39,90.3 L28.62,90.3 Z M98.84,86.52 L98.84,87.03 C98.84,87.19 98.84,87.35 98.83,87.51 C98.8250275,87.8078256 98.8016496,88.1050591 98.76,88.4 C98.717041,88.6289859 98.6430244,88.8510358 98.54,89.06 C98.3269466,89.4597136 97.9997136,89.7869466 97.6,90 C97.3923291,90.1040678 97.1696243,90.1749284 96.94,90.21 C96.64244,90.2592722 96.3415855,90.2860148 96.04,90.29 C95.88,90.29 95.73,90.29 95.56,90.3 L70.8,90.3 C69.906707,85.6801634 69.2525031,81.0172917 68.84,76.33 C68.83,76.23 68.83,76.14 68.82,76.04 C80.37,73.99 84.94,67.37 85.16,67.04 C85.3982205,66.6765878 85.4178346,66.2117707 85.2110766,65.8295815 C85.0043185,65.4473924 84.604531,65.2094647 84.17,65.21 C83.7780079,65.2128611 83.4121244,65.4070034 83.19,65.73 C81.8506222,67.4495452 80.202479,68.9043876 78.33,70.02 C75.360464,71.8322972 72.076821,73.0704477 68.65,73.67 C68.41,70.09 68.28,66.53 68.28,63.06 C68.383452,62.2015323 68.0984311,61.3416807 67.5026809,60.7149824 C66.9069306,60.0882841 66.0626027,59.7601194 65.2,59.82 L65.01,59.82 L57.34,59.83 C57.133518,59.8503995 56.926819,59.793379 56.76,59.67 C56.651779,59.5047918 56.612312,59.3038689 56.65,59.11 C56.66,58.97 56.67,58.75 56.68,58.48 C56.9999607,52.1240163 57.6743424,45.7908383 58.7,39.51 C59.5855141,33.1101613 61.4577428,26.8862656 64.25,21.06 L95.56,21.06 C95.72,21.06 95.88,21.06 96.04,21.07 C96.3380423,21.0699841 96.635625,21.0933895 96.93,21.14 C97.1625702,21.1814514 97.3881274,21.2555149 97.6,21.36 C97.79991,21.4599359 97.9822798,21.5916475 98.14,21.75 C98.2968986,21.9112881 98.4314336,22.0929103 98.54,22.29 C98.6415479,22.5030606 98.7154789,22.7282141 98.76,22.96 C98.8016496,23.2549409 98.8250275,23.5521744 98.83,23.85 C98.84,24.01 98.84,24.17 98.84,24.32 L98.84,86.52 Z M54.38,143.4 L50.07,143.4 L50.07,121.18 L49.93,121.18 L40.79,143.17 L37.3,143.17 L28.14,121.18 L27.99,121.18 L27.99,143.4 L23.71,143.4 L23.71,113.2 L29.15,113.2 L38.96,137.04 L39.13,137.04 L48.92,113.2 L54.38,113.2 L54.38,143.4 Z M59.06,137.15 C59.06,133.28 62.02,131.06 67.48,130.72 L73.34,130.36 L73.34,128.69 C73.34,126.24 71.73,124.9 68.85,124.9 C66.47,124.9 64.75,126.12 64.4,127.98 L60.15,127.98 C60.28,124.06 63.97,121.22 68.97,121.22 C74.35,121.22 77.86,124.02 77.86,128.38 L77.86,143.4 L73.51,143.4 L73.51,139.78 L73.4,139.78 C71.9748605,142.242406 69.313819,143.724602 66.47,143.64 C62.1,143.64 59.06,141.04 59.06,137.15 L59.06,137.15 Z M73.34,135.2 L73.34,133.5 L68.11,133.84 C65.17,134.03 63.64,135.12 63.64,137.02 C63.64,138.86 65.23,140.06 67.74,140.06 C70.92,140.06 73.34,138.03 73.34,135.2 L73.34,135.2 Z M97.46,129.05 C97.059359,126.554086 94.8102144,124.783483 92.29,124.98 C88.83,124.98 86.52,127.9 86.52,132.44 C86.52,137.13 88.84,139.91 92.31,139.91 C95.1,139.91 96.95,138.53 97.48,135.98 L101.83,135.98 C101.35,140.62 97.63,143.68 92.29,143.68 C86.01,143.68 81.89,139.41 81.89,132.44 C81.89,125.64 86.01,121.22 92.25,121.22 C97.9,121.22 101.41,124.76 101.79,129.05 L97.46,129.05 Z" id="Shape"></path> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/build/public/images/mango-router-1.png b/build/public/images/mango-router-1.png Binary files differnew file mode 100644 index 0000000..64bb50a --- /dev/null +++ b/build/public/images/mango-router-1.png diff --git a/build/public/images/mario-block.png b/build/public/images/mario-block.png Binary files differnew file mode 100644 index 0000000..0f24737 --- /dev/null +++ b/build/public/images/mario-block.png diff --git a/build/public/images/menu-toggle-css.png b/build/public/images/menu-toggle-css.png Binary files differnew file mode 100644 index 0000000..ec1705c --- /dev/null +++ b/build/public/images/menu-toggle-css.png diff --git a/build/public/images/miniatures.webp b/build/public/images/miniatures.webp Binary files differnew file mode 100644 index 0000000..6c22057 --- /dev/null +++ b/build/public/images/miniatures.webp diff --git a/build/public/images/monero-qr.jpeg b/build/public/images/monero-qr.jpeg Binary files differnew file mode 100644 index 0000000..6f7d9f5 --- /dev/null +++ b/build/public/images/monero-qr.jpeg diff --git a/build/public/images/mower-1.jpeg b/build/public/images/mower-1.jpeg Binary files differnew file mode 100644 index 0000000..2421679 --- /dev/null +++ b/build/public/images/mower-1.jpeg diff --git a/build/public/images/mower-2.webp b/build/public/images/mower-2.webp Binary files differnew file mode 100644 index 0000000..239511c --- /dev/null +++ b/build/public/images/mower-2.webp diff --git a/build/public/images/mr-busy-hello.avif b/build/public/images/mr-busy-hello.avif Binary files differnew file mode 100644 index 0000000..68cbed5 --- /dev/null +++ b/build/public/images/mr-busy-hello.avif diff --git a/build/public/images/mr-busy-hello.jpg b/build/public/images/mr-busy-hello.jpg Binary files differnew file mode 100644 index 0000000..b0d4588 --- /dev/null +++ b/build/public/images/mr-busy-hello.jpg diff --git a/build/public/images/mr-busy-hello.webp b/build/public/images/mr-busy-hello.webp Binary files differnew file mode 100644 index 0000000..ed71dfc --- /dev/null +++ b/build/public/images/mr-busy-hello.webp diff --git a/build/public/images/mr-happy.png b/build/public/images/mr-happy.png Binary files differnew file mode 100644 index 0000000..2372074 --- /dev/null +++ b/build/public/images/mr-happy.png diff --git a/build/public/images/mr-happy.webp b/build/public/images/mr-happy.webp Binary files differnew file mode 100644 index 0000000..e031976 --- /dev/null +++ b/build/public/images/mr-happy.webp diff --git a/build/public/images/my-face-thumbnail.png b/build/public/images/my-face-thumbnail.png Binary files differnew file mode 100644 index 0000000..5583354 --- /dev/null +++ b/build/public/images/my-face-thumbnail.png diff --git a/build/public/images/navigation.webp b/build/public/images/navigation.webp Binary files differnew file mode 100644 index 0000000..3dfb449 --- /dev/null +++ b/build/public/images/navigation.webp diff --git a/build/public/images/new-automator-2.png b/build/public/images/new-automator-2.png Binary files differnew file mode 100644 index 0000000..ccbe344 --- /dev/null +++ b/build/public/images/new-automator-2.png diff --git a/build/public/images/new-automator-2.webp b/build/public/images/new-automator-2.webp Binary files differnew file mode 100644 index 0000000..ab136a1 --- /dev/null +++ b/build/public/images/new-automator-2.webp diff --git a/build/public/images/new-automator.png b/build/public/images/new-automator.png Binary files differnew file mode 100644 index 0000000..826bbda --- /dev/null +++ b/build/public/images/new-automator.png diff --git a/build/public/images/new-automator.webp b/build/public/images/new-automator.webp Binary files differnew file mode 100644 index 0000000..d88601c --- /dev/null +++ b/build/public/images/new-automator.webp diff --git a/build/public/images/nova-static-blog-small.png b/build/public/images/nova-static-blog-small.png Binary files differnew file mode 100644 index 0000000..17cb0bc --- /dev/null +++ b/build/public/images/nova-static-blog-small.png diff --git a/build/public/images/nova-static-blog.webp b/build/public/images/nova-static-blog.webp Binary files differnew file mode 100644 index 0000000..6805e13 --- /dev/null +++ b/build/public/images/nova-static-blog.webp diff --git a/build/public/images/paper-bg.webp b/build/public/images/paper-bg.webp Binary files differnew file mode 100644 index 0000000..a31be53 --- /dev/null +++ b/build/public/images/paper-bg.webp diff --git a/build/public/images/pi-400-final.png b/build/public/images/pi-400-final.png Binary files differnew file mode 100644 index 0000000..598344d --- /dev/null +++ b/build/public/images/pi-400-final.png diff --git a/build/public/images/pi-400-final.webp b/build/public/images/pi-400-final.webp Binary files differnew file mode 100644 index 0000000..a7857c6 --- /dev/null +++ b/build/public/images/pi-400-final.webp diff --git a/build/public/images/pi-heatsink.png b/build/public/images/pi-heatsink.png Binary files differnew file mode 100644 index 0000000..476b1de --- /dev/null +++ b/build/public/images/pi-heatsink.png diff --git a/build/public/images/pi-heatsink.webp b/build/public/images/pi-heatsink.webp Binary files differnew file mode 100644 index 0000000..363aec9 --- /dev/null +++ b/build/public/images/pi-heatsink.webp diff --git a/build/public/images/pi-internal-ssd.png b/build/public/images/pi-internal-ssd.png Binary files differnew file mode 100644 index 0000000..eff683e --- /dev/null +++ b/build/public/images/pi-internal-ssd.png diff --git a/build/public/images/pi-internal-ssd.webp b/build/public/images/pi-internal-ssd.webp Binary files differnew file mode 100644 index 0000000..45ec829 --- /dev/null +++ b/build/public/images/pi-internal-ssd.webp diff --git a/build/public/images/pi-outer-port.png b/build/public/images/pi-outer-port.png Binary files differnew file mode 100644 index 0000000..d4662a6 --- /dev/null +++ b/build/public/images/pi-outer-port.png diff --git a/build/public/images/pi-outer-port.webp b/build/public/images/pi-outer-port.webp Binary files differnew file mode 100644 index 0000000..9a4c090 --- /dev/null +++ b/build/public/images/pi-outer-port.webp diff --git a/build/public/images/pi-plastic-back.png b/build/public/images/pi-plastic-back.png Binary files differnew file mode 100644 index 0000000..0c090c7 --- /dev/null +++ b/build/public/images/pi-plastic-back.png diff --git a/build/public/images/pi-plastic-back.webp b/build/public/images/pi-plastic-back.webp Binary files differnew file mode 100644 index 0000000..5c5ab0f --- /dev/null +++ b/build/public/images/pi-plastic-back.webp diff --git a/build/public/images/pi-screen-2.webp b/build/public/images/pi-screen-2.webp Binary files differnew file mode 100644 index 0000000..71ce624 --- /dev/null +++ b/build/public/images/pi-screen-2.webp diff --git a/build/public/images/pi-screen.webp b/build/public/images/pi-screen.webp Binary files differnew file mode 100644 index 0000000..a6adee1 --- /dev/null +++ b/build/public/images/pi-screen.webp diff --git a/build/public/images/pi-zero-wh.webp b/build/public/images/pi-zero-wh.webp Binary files differnew file mode 100644 index 0000000..347b016 --- /dev/null +++ b/build/public/images/pi-zero-wh.webp diff --git a/build/public/images/pihole-cloudflare.png b/build/public/images/pihole-cloudflare.png Binary files differnew file mode 100644 index 0000000..e09bdec --- /dev/null +++ b/build/public/images/pihole-cloudflare.png diff --git a/build/public/images/pihole-cloudflare.webp b/build/public/images/pihole-cloudflare.webp Binary files differnew file mode 100644 index 0000000..4d1d5d3 --- /dev/null +++ b/build/public/images/pihole-cloudflare.webp diff --git a/build/public/images/playfair-roboto.webp b/build/public/images/playfair-roboto.webp Binary files differnew file mode 100644 index 0000000..cc99a5e --- /dev/null +++ b/build/public/images/playfair-roboto.webp diff --git a/build/public/images/plug-play.png b/build/public/images/plug-play.png Binary files differnew file mode 100644 index 0000000..bdc819c --- /dev/null +++ b/build/public/images/plug-play.png diff --git a/build/public/images/portable-pi-1.webp b/build/public/images/portable-pi-1.webp Binary files differnew file mode 100644 index 0000000..0c4e70e --- /dev/null +++ b/build/public/images/portable-pi-1.webp diff --git a/build/public/images/portable-pi-2.webp b/build/public/images/portable-pi-2.webp Binary files differnew file mode 100644 index 0000000..2c7b44f --- /dev/null +++ b/build/public/images/portable-pi-2.webp diff --git a/build/public/images/ports-everywhere.jpg b/build/public/images/ports-everywhere.jpg Binary files differnew file mode 100644 index 0000000..a6d4cb5 --- /dev/null +++ b/build/public/images/ports-everywhere.jpg diff --git a/build/public/images/prescription-ui-update-1.webp b/build/public/images/prescription-ui-update-1.webp Binary files differnew file mode 100644 index 0000000..29d0074 --- /dev/null +++ b/build/public/images/prescription-ui-update-1.webp diff --git a/build/public/images/prescription-ui-update-2.webp b/build/public/images/prescription-ui-update-2.webp Binary files differnew file mode 100644 index 0000000..2e0e1c7 --- /dev/null +++ b/build/public/images/prescription-ui-update-2.webp diff --git a/build/public/images/prescription-ui-update-final.webp b/build/public/images/prescription-ui-update-final.webp Binary files differnew file mode 100644 index 0000000..65badf4 --- /dev/null +++ b/build/public/images/prescription-ui-update-final.webp diff --git a/build/public/images/prescription-ui.webp b/build/public/images/prescription-ui.webp Binary files differnew file mode 100644 index 0000000..36f266c --- /dev/null +++ b/build/public/images/prescription-ui.webp diff --git a/build/public/images/proper-ui.png b/build/public/images/proper-ui.png Binary files differnew file mode 100644 index 0000000..315f45a --- /dev/null +++ b/build/public/images/proper-ui.png diff --git a/build/public/images/ps4-loading.png b/build/public/images/ps4-loading.png Binary files differnew file mode 100644 index 0000000..0894190 --- /dev/null +++ b/build/public/images/ps4-loading.png diff --git a/build/public/images/publishing-with-jekyll.webp b/build/public/images/publishing-with-jekyll.webp Binary files differnew file mode 100644 index 0000000..0b25f28 --- /dev/null +++ b/build/public/images/publishing-with-jekyll.webp diff --git a/build/public/images/r6e-1.webp b/build/public/images/r6e-1.webp Binary files differnew file mode 100644 index 0000000..00b104a --- /dev/null +++ b/build/public/images/r6e-1.webp diff --git a/build/public/images/raspi-config.webp b/build/public/images/raspi-config.webp Binary files differnew file mode 100644 index 0000000..e8214a6 --- /dev/null +++ b/build/public/images/raspi-config.webp diff --git a/build/public/images/receipt-update.webp b/build/public/images/receipt-update.webp Binary files differnew file mode 100644 index 0000000..6f57a90 --- /dev/null +++ b/build/public/images/receipt-update.webp diff --git a/build/public/images/rice-paper.webp b/build/public/images/rice-paper.webp Binary files differnew file mode 100644 index 0000000..63a39a7 --- /dev/null +++ b/build/public/images/rice-paper.webp diff --git a/build/public/images/rpi-adguard-1.webp b/build/public/images/rpi-adguard-1.webp Binary files differnew file mode 100644 index 0000000..fa664ac --- /dev/null +++ b/build/public/images/rpi-adguard-1.webp diff --git a/build/public/images/rpi-desktop-screenshot.webp b/build/public/images/rpi-desktop-screenshot.webp Binary files differnew file mode 100644 index 0000000..86abe09 --- /dev/null +++ b/build/public/images/rpi-desktop-screenshot.webp diff --git a/build/public/images/rpi-desktop.webp b/build/public/images/rpi-desktop.webp Binary files differnew file mode 100644 index 0000000..1d334f1 --- /dev/null +++ b/build/public/images/rpi-desktop.webp diff --git a/build/public/images/rpi-eero-1.webp b/build/public/images/rpi-eero-1.webp Binary files differnew file mode 100644 index 0000000..55c77d1 --- /dev/null +++ b/build/public/images/rpi-eero-1.webp diff --git a/build/public/images/rpi-lite-os.webp b/build/public/images/rpi-lite-os.webp Binary files differnew file mode 100644 index 0000000..38c8e10 --- /dev/null +++ b/build/public/images/rpi-lite-os.webp diff --git a/build/public/images/safari-dark-mode.webp b/build/public/images/safari-dark-mode.webp Binary files differnew file mode 100644 index 0000000..b6b167a --- /dev/null +++ b/build/public/images/safari-dark-mode.webp diff --git a/build/public/images/sanded-pi-case.webp b/build/public/images/sanded-pi-case.webp Binary files differnew file mode 100644 index 0000000..5c5ab0f --- /dev/null +++ b/build/public/images/sanded-pi-case.webp diff --git a/build/public/images/sass-cancel_rl1fsw_c_scale,w_800.webp b/build/public/images/sass-cancel_rl1fsw_c_scale,w_800.webp Binary files differnew file mode 100644 index 0000000..1f450ea --- /dev/null +++ b/build/public/images/sass-cancel_rl1fsw_c_scale,w_800.webp diff --git a/build/public/images/scrolling-navigation.png b/build/public/images/scrolling-navigation.png Binary files differnew file mode 100644 index 0000000..abce30f --- /dev/null +++ b/build/public/images/scrolling-navigation.png diff --git a/build/public/images/shiny-buttons.png b/build/public/images/shiny-buttons.png Binary files differnew file mode 100644 index 0000000..2feba16 --- /dev/null +++ b/build/public/images/shiny-buttons.png diff --git a/build/public/images/site-color-schemes.gif b/build/public/images/site-color-schemes.gif Binary files differnew file mode 100644 index 0000000..286247c --- /dev/null +++ b/build/public/images/site-color-schemes.gif diff --git a/build/public/images/slabtop-1.jpg b/build/public/images/slabtop-1.jpg Binary files differnew file mode 100644 index 0000000..30a440f --- /dev/null +++ b/build/public/images/slabtop-1.jpg diff --git a/build/public/images/slabtop-1.webp b/build/public/images/slabtop-1.webp Binary files differnew file mode 100644 index 0000000..5e70ab4 --- /dev/null +++ b/build/public/images/slabtop-1.webp diff --git a/build/public/images/slabtop-2.jpg b/build/public/images/slabtop-2.jpg Binary files differnew file mode 100644 index 0000000..edc9d80 --- /dev/null +++ b/build/public/images/slabtop-2.jpg diff --git a/build/public/images/slabtop-2.webp b/build/public/images/slabtop-2.webp Binary files differnew file mode 100644 index 0000000..690ad4b --- /dev/null +++ b/build/public/images/slabtop-2.webp diff --git a/build/public/images/soma-terminal.png b/build/public/images/soma-terminal.png Binary files differnew file mode 100644 index 0000000..7c3c0b5 --- /dev/null +++ b/build/public/images/soma-terminal.png diff --git a/build/public/images/soma-terminal.webp b/build/public/images/soma-terminal.webp Binary files differnew file mode 100644 index 0000000..d511491 --- /dev/null +++ b/build/public/images/soma-terminal.webp diff --git a/build/public/images/sticky-bad-navigation.webp b/build/public/images/sticky-bad-navigation.webp Binary files differnew file mode 100644 index 0000000..982348b --- /dev/null +++ b/build/public/images/sticky-bad-navigation.webp diff --git a/build/public/images/sticky-good-navigation-2.webp b/build/public/images/sticky-good-navigation-2.webp Binary files differnew file mode 100644 index 0000000..cc4be56 --- /dev/null +++ b/build/public/images/sticky-good-navigation-2.webp diff --git a/build/public/images/sticky-good-navigation.webp b/build/public/images/sticky-good-navigation.webp Binary files differnew file mode 100644 index 0000000..04b972a --- /dev/null +++ b/build/public/images/sticky-good-navigation.webp diff --git a/build/public/images/stripe-default-menu.webp b/build/public/images/stripe-default-menu.webp Binary files differnew file mode 100644 index 0000000..3cecd83 --- /dev/null +++ b/build/public/images/stripe-default-menu.webp diff --git a/build/public/images/stripe-recreated.webp b/build/public/images/stripe-recreated.webp Binary files differnew file mode 100644 index 0000000..1a7a1ac --- /dev/null +++ b/build/public/images/stripe-recreated.webp diff --git a/build/public/images/tabbed-content.png b/build/public/images/tabbed-content.png Binary files differnew file mode 100644 index 0000000..a2fbdfa --- /dev/null +++ b/build/public/images/tabbed-content.png diff --git a/build/public/images/text-indent-compatibility.webp b/build/public/images/text-indent-compatibility.webp Binary files differnew file mode 100644 index 0000000..637344d --- /dev/null +++ b/build/public/images/text-indent-compatibility.webp diff --git a/build/public/images/they-wont-wait.webp b/build/public/images/they-wont-wait.webp Binary files differnew file mode 100644 index 0000000..a82f478 --- /dev/null +++ b/build/public/images/they-wont-wait.webp diff --git a/build/public/images/transmit-ftp.webp b/build/public/images/transmit-ftp.webp Binary files differnew file mode 100644 index 0000000..28dc66f --- /dev/null +++ b/build/public/images/transmit-ftp.webp diff --git a/build/public/images/tufte-first-paint.webp b/build/public/images/tufte-first-paint.webp Binary files differnew file mode 100644 index 0000000..bd174aa --- /dev/null +++ b/build/public/images/tufte-first-paint.webp diff --git a/build/public/images/tufte-input-delay.webp b/build/public/images/tufte-input-delay.webp Binary files differnew file mode 100644 index 0000000..acddf65 --- /dev/null +++ b/build/public/images/tufte-input-delay.webp diff --git a/build/public/images/ugly-duck-audit.webp b/build/public/images/ugly-duck-audit.webp Binary files differnew file mode 100644 index 0000000..192d9d7 --- /dev/null +++ b/build/public/images/ugly-duck-audit.webp diff --git a/build/public/images/undo-keyboard.png b/build/public/images/undo-keyboard.png Binary files differnew file mode 100644 index 0000000..95a9f43 --- /dev/null +++ b/build/public/images/undo-keyboard.png diff --git a/build/public/images/unix.gif b/build/public/images/unix.gif Binary files differnew file mode 100644 index 0000000..b51ca47 --- /dev/null +++ b/build/public/images/unix.gif diff --git a/build/public/images/usb-connector.webp b/build/public/images/usb-connector.webp Binary files differnew file mode 100644 index 0000000..3016405 --- /dev/null +++ b/build/public/images/usb-connector.webp diff --git a/build/public/images/utm-1.webp b/build/public/images/utm-1.webp Binary files differnew file mode 100644 index 0000000..498f602 --- /dev/null +++ b/build/public/images/utm-1.webp diff --git a/build/public/images/utm-2.webp b/build/public/images/utm-2.webp Binary files differnew file mode 100644 index 0000000..e8c6db8 --- /dev/null +++ b/build/public/images/utm-2.webp diff --git a/build/public/images/utm-3.webp b/build/public/images/utm-3.webp Binary files differnew file mode 100644 index 0000000..eef4b08 --- /dev/null +++ b/build/public/images/utm-3.webp diff --git a/build/public/images/webpagetest-article-original.webp b/build/public/images/webpagetest-article-original.webp Binary files differnew file mode 100644 index 0000000..d633fff --- /dev/null +++ b/build/public/images/webpagetest-article-original.webp diff --git a/build/public/images/webpagetest-article-updated.webp b/build/public/images/webpagetest-article-updated.webp Binary files differnew file mode 100644 index 0000000..6b70333 --- /dev/null +++ b/build/public/images/webpagetest-article-updated.webp diff --git a/build/public/images/webpagetest-homepage-original.webp b/build/public/images/webpagetest-homepage-original.webp Binary files differnew file mode 100644 index 0000000..8d8c6c1 --- /dev/null +++ b/build/public/images/webpagetest-homepage-original.webp diff --git a/build/public/images/webpagetest-homepage-updated.webp b/build/public/images/webpagetest-homepage-updated.webp Binary files differnew file mode 100644 index 0000000..a7b78f9 --- /dev/null +++ b/build/public/images/webpagetest-homepage-updated.webp diff --git a/build/public/images/wireless-keyboard.webp b/build/public/images/wireless-keyboard.webp Binary files differnew file mode 100644 index 0000000..950bf46 --- /dev/null +++ b/build/public/images/wireless-keyboard.webp diff --git a/build/public/images/workstation.png b/build/public/images/workstation.png Binary files differnew file mode 100644 index 0000000..0cc4b9c --- /dev/null +++ b/build/public/images/workstation.png diff --git a/build/public/images/workstation.webp b/build/public/images/workstation.webp Binary files differnew file mode 100644 index 0000000..932445e --- /dev/null +++ b/build/public/images/workstation.webp diff --git a/build/public/images/x201-1.png b/build/public/images/x201-1.png Binary files differnew file mode 100644 index 0000000..7b0d4df --- /dev/null +++ b/build/public/images/x201-1.png diff --git a/build/public/images/x201-2.png b/build/public/images/x201-2.png Binary files differnew file mode 100644 index 0000000..ffc7a01 --- /dev/null +++ b/build/public/images/x201-2.png diff --git a/build/public/images/x201-3.png b/build/public/images/x201-3.png Binary files differnew file mode 100644 index 0000000..ec40a39 --- /dev/null +++ b/build/public/images/x201-3.png diff --git a/build/public/images/x201-4.png b/build/public/images/x201-4.png Binary files differnew file mode 100644 index 0000000..819b8d4 --- /dev/null +++ b/build/public/images/x201-4.png diff --git a/build/public/images/x201-5.png b/build/public/images/x201-5.png Binary files differnew file mode 100644 index 0000000..3905049 --- /dev/null +++ b/build/public/images/x201-5.png diff --git a/build/public/images/x201-tape.jpg b/build/public/images/x201-tape.jpg Binary files differnew file mode 100644 index 0000000..e5cee20 --- /dev/null +++ b/build/public/images/x201-tape.jpg diff --git a/build/public/images/x220-pieces.jpeg b/build/public/images/x220-pieces.jpeg Binary files differnew file mode 100644 index 0000000..5038948 --- /dev/null +++ b/build/public/images/x220-pieces.jpeg diff --git a/build/publish-with-jekyll/index.html b/build/publish-with-jekyll/index.html new file mode 100644 index 0000000..56b8ca8 --- /dev/null +++ b/build/publish-with-jekyll/index.html @@ -0,0 +1,126 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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>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> +<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="#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> +<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>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>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> +<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>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> +<ul> +<li><a href="https://wkhtmltopdf.org/">wkhtmltopdf</a></li> +</ul> +<h3>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 +</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><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>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> +</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>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> + <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/pure-css-simple-dropdown-plugin/index.html b/build/pure-css-simple-dropdown-plugin/index.html new file mode 100644 index 0000000..58401fa --- /dev/null +++ b/build/pure-css-simple-dropdown-plugin/index.html @@ -0,0 +1,43 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> + <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/quick-dirty-theme-switcher/index.html b/build/quick-dirty-theme-switcher/index.html new file mode 100644 index 0000000..f5ef834 --- /dev/null +++ b/build/quick-dirty-theme-switcher/index.html @@ -0,0 +1,139 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +</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"> +</code></pre> +<h2>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; +} + +/* 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 +function setTheme(themeName) { + localStorage.setItem('theme', themeName); + document.documentElement.className = themeName; +} + +// Toggle between color themes +function toggleDefaultTheme() { + if (localStorage.getItem('theme') !== 'theme-default'){ + setTheme('theme-default'); + } +} +function toggleSecondTheme() { + if (localStorage.getItem('theme') !== 'theme-second'){ + setTheme('theme-second'); + } +} +function toggleThirdTheme() { + if (localStorage.getItem('theme') !== 'theme-third'){ + setTheme('theme-third'); + } +} + +// Immediately set the theme on initial load +(function () { + if (localStorage.getItem('theme') === 'theme-default') { + setTheme('theme-default'); + } + if (localStorage.getItem('theme') === 'theme-second') { + setTheme('theme-second'); + } + 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> +<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/resume/index.html b/build/resume/index.html new file mode 100644 index 0000000..bdad521 --- /dev/null +++ b/build/resume/index.html @@ -0,0 +1,133 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <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 + +### Senior Designer at Purism + +**2019-2021** / Remote + +- 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 + +### Lead Product Designer at Benbria + +**2012-2019** / Ottawa, Canada + +- 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 + +**2009-2012** / Toronto, Canada + +- 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> +</table> +<!-- ### Durham College + +**2006-2009** / Oshawa, Canada + +- Associates Degree in Multimedia Design - 3 Year Program --> +<h2>Interests</h2> +<ul> +<li>Open source software </li> +<li>Web accessibility </li> +<li>Data analysis, big and small </li> +<li>Visualization </li> +<li>Performance and utilization </li> +<li>Linux systems</li> +<li>Software security and privacy </li> +<li>Minimal user interface design </li> +<li>Detailed documentation</li> +<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> +<p>Available upon request.</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/rss-click/index.html b/build/rss-click/index.html new file mode 100644 index 0000000..1dbe5d9 --- /dev/null +++ b/build/rss-click/index.html @@ -0,0 +1,70 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +</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> +</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> +<ol> +<li>https://shinobi.bt.ht/posts/patch-3.txt</li> +</ol> +<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/rss-hacks/index.html b/build/rss-hacks/index.html new file mode 100644 index 0000000..232de44 --- /dev/null +++ b/build/rss-hacks/index.html @@ -0,0 +1,75 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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 --> +</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>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") +</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"/> +</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> +<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> +</ol> +<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/rvm/index.html b/build/rvm/index.html new file mode 100644 index 0000000..7af370f --- /dev/null +++ b/build/rvm/index.html @@ -0,0 +1,61 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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 +</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 +</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"> + <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/safari-default-dark-mode/index.html b/build/safari-default-dark-mode/index.html new file mode 100644 index 0000000..250230e --- /dev/null +++ b/build/safari-default-dark-mode/index.html @@ -0,0 +1,80 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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" /> +</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>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;} + 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...</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>Thanks for reading and happy dark mode to you all!</p> +<h2>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>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"> + <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/safari-extensions-catalina-patcher/index.html b/build/safari-extensions-catalina-patcher/index.html new file mode 100644 index 0000000..0a351ef --- /dev/null +++ b/build/safari-extensions-catalina-patcher/index.html @@ -0,0 +1,68 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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>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> +</code></pre> +<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"> + <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/schools/index.html b/build/schools/index.html new file mode 100644 index 0000000..b423976 --- /dev/null +++ b/build/schools/index.html @@ -0,0 +1,76 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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>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>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> +<p>You could easily expand upon these options, but for most elementary school task these are more than enough.</p> +<h2>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> +</ol> +<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/self-hosted-blogs/index.html b/build/self-hosted-blogs/index.html new file mode 100644 index 0000000..aee2643 --- /dev/null +++ b/build/self-hosted-blogs/index.html @@ -0,0 +1,60 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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>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> +<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/self-hosting-fathom/index.html b/build/self-hosting-fathom/index.html new file mode 100644 index 0000000..f1c294c --- /dev/null +++ b/build/self-hosting-fathom/index.html @@ -0,0 +1,105 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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>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> +<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 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>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>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> +<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>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> +<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/setting-up-free-ssl/index.html b/build/setting-up-free-ssl/index.html new file mode 100644 index 0000000..acd2593 --- /dev/null +++ b/build/setting-up-free-ssl/index.html @@ -0,0 +1,50 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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>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> +</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> +<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/seven-years/index.html b/build/seven-years/index.html new file mode 100644 index 0000000..26d207d --- /dev/null +++ b/build/seven-years/index.html @@ -0,0 +1,69 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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><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> +</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> +<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/sharing-the-things-we-use/index.html b/build/sharing-the-things-we-use/index.html new file mode 100644 index 0000000..d2d3b13 --- /dev/null +++ b/build/sharing-the-things-we-use/index.html @@ -0,0 +1,43 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> + <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/shinobi-website/index.html b/build/shinobi-website/index.html new file mode 100644 index 0000000..d9aa7ce --- /dev/null +++ b/build/shinobi-website/index.html @@ -0,0 +1,74 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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 "shinobi website".</p> +<h2>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>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> +<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>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> +<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> +<p>Thanks for taking the time to read my jumbled thoughts.</p> +<h2>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> +</ol> +<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/shiny-css-buttons/index.html b/build/shiny-css-buttons/index.html new file mode 100644 index 0000000..4422c24 --- /dev/null +++ b/build/shiny-css-buttons/index.html @@ -0,0 +1,107 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +<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> +</code></pre> +<h2>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:''; + 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/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 */ +.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> +<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> +<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> +<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> + <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/simple-accessibility/index.html b/build/simple-accessibility/index.html new file mode 100644 index 0000000..11a9d74 --- /dev/null +++ b/build/simple-accessibility/index.html @@ -0,0 +1,57 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +</ol> +<h2>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> +</ol> +<h2>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> +<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/simple-does-not-mean-ugly/index.html b/build/simple-does-not-mean-ugly/index.html new file mode 100644 index 0000000..327ba3b --- /dev/null +++ b/build/simple-does-not-mean-ugly/index.html @@ -0,0 +1,76 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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> +<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> +<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> +<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>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> +</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> +</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> +<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> + <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/simple-jekyll-navigation/index.html b/build/simple-jekyll-navigation/index.html new file mode 100644 index 0000000..1f6504d --- /dev/null +++ b/build/simple-jekyll-navigation/index.html @@ -0,0 +1,75 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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: / + +- title: Articles +url: /articles/ + +- title: About +url: /about/ +</code></pre> +<h2>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> +{% 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> +<pre><code>{% for item in site.data.navigation %} + <li> + {% if item.url == page.url %} + <a class="active" href="{{ item.url }}"><span>{{ item.title }}</span></a> + {% else %} + <a href="{{ item.url }}"><span>{{ item.title }}</span></a> + {% endif %} + </li> +{% endfor %} +</code></pre> +<pre><code>/* 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> + <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/skip-to-content/index.html b/build/skip-to-content/index.html new file mode 100644 index 0000000..be50b94 --- /dev/null +++ b/build/skip-to-content/index.html @@ -0,0 +1,86 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +</ul> +<h2>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> +</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> +</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>a.skip-content { + background: grey; + color: white; + left: -9999px; + padding: 0.5rem; + position: absolute; + top: 0; +} +</code></pre> +<h2>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 */ +} +</code></pre> +<h2>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> + <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/slabtop/index.html b/build/slabtop/index.html new file mode 100644 index 0000000..af45465 --- /dev/null +++ b/build/slabtop/index.html @@ -0,0 +1,65 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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>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> +<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/slow/index.html b/build/slow/index.html new file mode 100644 index 0000000..79893ab --- /dev/null +++ b/build/slow/index.html @@ -0,0 +1,73 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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 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>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> +</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>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>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>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> +<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 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> +<p>Thanks for reading.</p> +<h2>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> +</ol> +<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/soma-terminal-css/index.html b/build/soma-terminal-css/index.html new file mode 100644 index 0000000..aab9549 --- /dev/null +++ b/build/soma-terminal-css/index.html @@ -0,0 +1,230 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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> +<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> + 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> +</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'); + +* { + 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://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); + 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: ''; + height: 538px; + left: 15px; + position: absolute; + top: 11px; + width: 720px; +} + +.screen { + background: #000 url("https://image.ibb.co/gOqSz7/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://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: ''; + 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: '键'; + 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'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> + <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/spec/index.html b/build/spec/index.html new file mode 100644 index 0000000..6385cfa --- /dev/null +++ b/build/spec/index.html @@ -0,0 +1,53 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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> +<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/srht2/index.html b/build/srht2/index.html new file mode 100644 index 0000000..be5babe --- /dev/null +++ b/build/srht2/index.html @@ -0,0 +1,72 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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>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> +<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> +</ol> +<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/stay-hungry/index.html b/build/stay-hungry/index.html new file mode 100644 index 0000000..7a49ca7 --- /dev/null +++ b/build/stay-hungry/index.html @@ -0,0 +1,55 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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>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> + <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/sticky-elements/index.html b/build/sticky-elements/index.html new file mode 100644 index 0000000..ffd9408 --- /dev/null +++ b/build/sticky-elements/index.html @@ -0,0 +1,83 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +</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>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> +<ul> +<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>Stay <em>static</em>, my friends!</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/still-using-jquery/index.html b/build/still-using-jquery/index.html new file mode 100644 index 0000000..f6db3e5 --- /dev/null +++ b/build/still-using-jquery/index.html @@ -0,0 +1,59 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +</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>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>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> +<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/stripe-menu-css/index.html b/build/stripe-menu-css/index.html new file mode 100644 index 0000000..44d7ef3 --- /dev/null +++ b/build/stripe-menu-css/index.html @@ -0,0 +1,58 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><a href="https://codepen.io/bradleytaunt/pen/ExjMjLL">Live CodePen Example</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/style.css b/build/style.css new file mode 100644 index 0000000..b3102fa --- /dev/null +++ b/build/style.css @@ -0,0 +1,99 @@ +* { + box-sizing: border-box; +} +body { + background-color: #fffaf7; + font-family: system-ui, "Helvetica Neue", "Lucida Grande", sans-serif; + line-height: 1.55; + margin: 1rem auto; + max-width: 60ch; + padding: 10px; +} +h1,h2,h3,h4,h5,h6 { + line-height: 1.2; +} +h2,h3,h4,h5,h6 { + border-bottom: 1px solid; + margin: 3rem 0 0; + padding-bottom: 0.5rem; +} +a,a:visited { + color: darkred; +} +a:hover,a:focus { + background: yellow; + color: black; +} +figcaption { + font-size: 12px; +} +hr { + background: grey; + border: 0; + height: 1px; + margin: 2rem 0; +} +img { + height: auto; + max-width: 100%; + width: auto; +} +code { + background-color: white; + border: 1px solid; + font-size: 90%; + padding: 0.1rem 0.3rem; + tab-size: 4; +} +pre { + background-color: white; + border: 1px solid; +} +pre code { + border: 0; + display: block; + overflow-x: auto; + padding: 0.3rem 0.6rem; +} +table { + border-collapse: collapse; + margin: 2rem 0; + display: block; + overflow-x: auto; + white-space: nowrap; + text-align: left; + width: 100%; +} +tbody { + display: table; + min-width: 500px; + width: 100%; +} +tr { + border-bottom: 1px solid lightgrey; +} +td:last-of-type,th:last-of-type { + text-align: right; +} +.post-list { + list-style: none; + margin: 1rem 0 0; + padding: 0; +} +.post-list li { + align-items: center; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + margin: 0 0 10px; +} +.post-list li small { font-variant-numeric: tabular-nums; } + +@media(max-width:650px) { + .post-list li { + align-items: flex-start; + flex-direction: column; + justify-content: baseline; + margin: 0 0 15px; + } +} diff --git a/build/sublime/index.html b/build/sublime/index.html new file mode 100644 index 0000000..3869a42 --- /dev/null +++ b/build/sublime/index.html @@ -0,0 +1,68 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +</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>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>(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 +</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 +</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> +<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/suckless/index.html b/build/suckless/index.html new file mode 100644 index 0000000..be5d1b7 --- /dev/null +++ b/build/suckless/index.html @@ -0,0 +1,83 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +</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> +<li>working audio</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> +<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> +</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> +<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> +<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> +</ol> +<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/super-mario-blocks-css/index.html b/build/super-mario-blocks-css/index.html new file mode 100644 index 0000000..2f51051 --- /dev/null +++ b/build/super-mario-blocks-css/index.html @@ -0,0 +1,226 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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> +</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> +</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> +</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 */ +.mario-block { + display: inline-block; + height: 80px; + margin-right: -7px; /* Fixes inline-block margin bug */ + position: relative; + width: 80px; +} + +/* 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 */ +.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>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> +<pre><code>.mario-block--question label { + cursor: pointer; +} +.mario-block--question .question-mark { + background-image: url('/public/images/mario-block-question-mark.svg'); + 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>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 */ +.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 */ +.mario-block input:checked + label .dot, +.mario-block input:checked + label .question-mark { + display: none; +} + +/* Shared pseudo element styling */ +.mario-block input:checked + label:before, +.mario-block input:checked + label:after { + content: ''; + height: 20px; + position: absolute; + transform: rotate(45deg); + width: 20px; +} + +/* Right dash */ +.mario-block input:checked + label:before { + border-right: 4px solid #070000; + right: 18px; + top: 15px; + transform: rotate(45deg); +} + +/* Left dash */ +.mario-block input:checked + label:after { + border-left: 4px solid #070000; + left: 18px; + top: 15px; + 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> +<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/tabbed-content/index.html b/build/tabbed-content/index.html new file mode 100644 index 0000000..295a712 --- /dev/null +++ b/build/tabbed-content/index.html @@ -0,0 +1,250 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +</ol> +<pre><code><!-- Simple main container for all elements --> +<div class="tabs"> + + <!-- Parent container holding for individual tab item --> + <div class="tab-item"> + + <!-- Default radio input --> + <input class="tab-input" type="radio" name="tabs" id="tab-1"> + + <!-- Label connected to radio input via `id` and `for` attributes --> + <label class="tab-label" for="tab-1">Tab 1</label> + + <!-- Full inner content of current tab item --> + <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> +</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 */ +.tabs { + height: 100%; + min-height: 250px; + position: relative; +} + +/* 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 */ +.tab-input { + position: absolute; + visibility: hidden; +} + +/* The main tab headings */ +.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'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; + 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>/* Style the currently selected tab label */ +.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; +} + +/* 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 */ +.tabs { + height: 100%; + min-height: 250px; + position: relative; +} + +/* Each tab items (includes heading & content) */ +.tab-item { + display: inline; +} + +/* Hide the default radio inputs */ +.tab-input { + position: absolute; + visibility: hidden; +} + +/* The main tab headings */ +.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; +} + +/* The inner tab content */ +.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; +} + +/* Style the currently selected tab label */ +.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; +} + +/* 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> +<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>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> + <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/tables/index.html b/build/tables/index.html new file mode 100644 index 0000000..82109e9 --- /dev/null +++ b/build/tables/index.html @@ -0,0 +1,134 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +<pre><code>table { + 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>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 */ +@media(max-width: 800px) { + /* Hide the table headings */ + 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; /* 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 */ +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; +} + +/* Simple CSS for flexbox table on mobile */ +@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; /* additional padding to avoid heading overlap */ + position: relative; + width: 50%; + } + /* 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> +<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>Have fun making your tables responsive!</p> +<p><small><sup>1</sup> I know, this is a terrible analogy...</small></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/te/index.html b/build/te/index.html new file mode 100644 index 0000000..36c2232 --- /dev/null +++ b/build/te/index.html @@ -0,0 +1,50 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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 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> +<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/text-align-justify/index.html b/build/text-align-justify/index.html new file mode 100644 index 0000000..cc69ec8 --- /dev/null +++ b/build/text-align-justify/index.html @@ -0,0 +1,53 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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> +<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> +<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> + <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/they-wont-wait/index.html b/build/they-wont-wait/index.html Binary files differnew file mode 100644 index 0000000..a9afe93 --- /dev/null +++ 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 new file mode 100644 index 0000000..b7d90a5 --- /dev/null +++ b/build/use-text-not-icons/index.html @@ -0,0 +1,69 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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>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> +<ol> +<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> +</ol> +<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/user-select/index.html b/build/user-select/index.html new file mode 100644 index 0000000..71f065e --- /dev/null +++ b/build/user-select/index.html @@ -0,0 +1,72 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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>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 */ +p.no-select { + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; +} + +/* 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> +<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> +<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> + <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/uses/index.html b/build/uses/index.html new file mode 100644 index 0000000..f9cf5a1 --- /dev/null +++ b/build/uses/index.html @@ -0,0 +1,126 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <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> +<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> +</table> +<h2>Laptops</h2> +<ul> +<li><p><strong>ThinkPad X260</strong> (Daily Driver)</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><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><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> +</ul> +<p>As you can tell: I <em>really</em> like ThinkPads...</p> +<h2>Accessories</h2> +<ul> +<li>Logitech Pebble Mouse</li> +<li>Cheap USB microphone</li> +</ul> +<h2>"Mobile" Devices</h2> +<ul> +<li>iPhone SE (2020)</li> +<li>ZTE Cymbal 2</li> +<li>Casio F-91W</li> +<li>RPi Zero</li> +<li>RPi Zero W</li> +<li>RPi 400</li> +</ul> +<h2>Gaming / Entertainment</h2> +<ul> +<li>Xbox Series S</li> +<li>Nintendo Switch Lite</li> +<li>Playstation 2</li> +</ul> +<h2>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> +<ul> +<li>aerc-mail</li> +<li>Bitwarden</li> +<li>dmenu</li> +<li>dwm</li> +<li>Firefox</li> +<li>pass</li> +<li>qutebrowser</li> +<li>slstatus</li> +<li>st</li> +<li>surf</li> +<li>Thunderbird</li> +<li>vim</li> +<li>VSCodium</li> +</ul> +<h3>Proprietary</h3> +<ul> +<li>Figma</li> +<li>Gmail</li> +<li>Slack</li> +<li>Sublime Text</li> +<li>Sublime Merge</li> +<li>Zoom</li> +</ul> +<footer role="contentinfo"> + <h2>Menu Navigation</h2> + <ul id="menu"> + <li><a href="/">Home</a></li> + <li><a href="/projects">Projects</a></li> + <li><a href="/uses">Uses</a></li> + <li><a href="/wiki">Wiki</a></li> + <li><a href="/resume">Resume</a></li> + <li><a href="/colophon">Colophon</a></li> + <li><a href="/now">Now</a></li> + <li><a href="/donate">Donate</a></li> + <li><a href="/atom.xml">RSS</a></li> + <li><a href="#top">↑ Top of the page</a></li> + </ul> + <small> + Built with <a href="https://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/vscode/index.html b/build/vscode/index.html new file mode 100644 index 0000000..4f01018 --- /dev/null +++ b/build/vscode/index.html @@ -0,0 +1,55 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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 "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> +<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'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"> + <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/webfonts/index.html b/build/webfonts/index.html new file mode 100644 index 0000000..48ebc4b --- /dev/null +++ b/build/webfonts/index.html @@ -0,0 +1,55 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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> +<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/width-vs-flex-basis/index.html b/build/width-vs-flex-basis/index.html new file mode 100644 index 0000000..23c19b8 --- /dev/null +++ b/build/width-vs-flex-basis/index.html @@ -0,0 +1,85 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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 */ +} +</code></pre> +<h3>Pros</h3> +<ul> +<li><a href="https://caniuse.com/#search=inline-block">Full browser support</a> (as far back as IE6)</li> +<li>No floats needed</li> +</ul> +<h3>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> +<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>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> +</ul> +<h3>Cons</h3> +<ul> +<li>Some versions of IE struggle with <a href="https://caniuse.com/#search=flex-basis">browser support</a></li> +</ul> +<h2>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> +<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/wiki/index.html b/build/wiki/index.html new file mode 100644 index 0000000..f632e31 --- /dev/null +++ b/build/wiki/index.html @@ -0,0 +1,327 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <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> +<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> +</ul> +<h2>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 +filetype off + +" TODO: Load plugins here (pathogen or vundle) + +" Turn on syntax highlighting +syntax on + +" For plugins to load correctly +filetype plugin indent on + +" TODO: Pick a leader key +" let mapleader = "," + +" Security +set modelines=0 + +" Show line numbers +set number + +" Show file stats +set ruler + +" Blink cursor on error instead of beeping (grr) +set visualbell + +" Encoding +set encoding=utf-8 + +" Whitespace +set wrap +set textwidth=79 +set formatoptions=tcqrn1 +set tabstop=2 +set shiftwidth=2 +set softtabstop=2 +set expandtab +set noshiftround + +" Cursor motion +set scrolloff=3 +set backspace=indent,eol,start +set matchpairs+=<:> " use % to jump between pairs +runtime! macros/matchit.vim + +" Move up/down editor lines +nnoremap j gj +nnoremap k gk + +" Allow hidden buffers +set hidden + +" Rendering +set ttyfast + +" Status bar +set laststatus=2 + +" Last line +set showmode +set showcmd + +" Searching +nnoremap / /\v +vnoremap / /\v +set hlsearch +set incsearch +set ignorecase +set smartcase +set showmatch +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> + +" Textmate holdouts + +" Formatting +map <leader>q gqip + +" 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 + +" 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 +</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"" +</code></pre> +<h2>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 +</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') + if (btn) { + btn.click() + } + const ad = [...document.querySelectorAll('.ad-showing')][0]; + if (ad) { + document.querySelector('video').playbackRate = 10; + } +}, 50) +</code></pre> +<h2><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/ +</code></pre> +<h2>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/" +</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" +</code></pre> +<h2>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> +</code></pre> +<p>then run: <code>bundle update mini_racer</code></p> +<h2>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 \ + 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 +</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... +</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 +</code></pre> +<h2>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 +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 +</code></pre> +<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> +</ul> +<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 + +[Service] +User=redis +Group=redis +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 +</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 +</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 +</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" +EndSection +</code></pre> +<h2>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" +EndSection +</code></pre> +<h2>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'; +</code></pre> +<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/windows/index.html b/build/windows/index.html new file mode 100644 index 0000000..215ecce --- /dev/null +++ b/build/windows/index.html @@ -0,0 +1,107 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <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> + +<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> +<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> + +<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> +<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/wp-enqueue-for-beginners/index.html b/build/wp-enqueue-for-beginners/index.html new file mode 100644 index 0000000..96ccb68 --- /dev/null +++ b/build/wp-enqueue-for-beginners/index.html @@ -0,0 +1,106 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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> +<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( '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>$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> +<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> +</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 ); +</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>$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> +<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 +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 ); +} + +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> +<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/x201/index.html b/build/x201/index.html new file mode 100644 index 0000000..e7b493e --- /dev/null +++ b/build/x201/index.html @@ -0,0 +1,69 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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><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> +</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> +<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><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>Enjoy less flaky WiFi.</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/x220/index.html b/build/x220/index.html new file mode 100644 index 0000000..db7e373 --- /dev/null +++ b/build/x220/index.html @@ -0,0 +1,96 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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> +<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>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> +<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>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> +</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 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>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> +<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> + <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/footer.html b/footer.html new file mode 100644 index 0000000..c9a629e --- /dev/null +++ b/footer.html @@ -0,0 +1,21 @@ +<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/header.html b/header.html new file mode 100644 index 0000000..08ea92c --- /dev/null +++ b/header.html @@ -0,0 +1,16 @@ +<!doctype html> +<html lang="en" id="top"> +<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> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> diff --git a/index.md b/index.md new file mode 100644 index 0000000..98a8356 --- /dev/null +++ b/index.md @@ -0,0 +1,21 @@ +# 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)<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. + +## Articles & Tutorials diff --git a/pages/colophon.md b/pages/colophon.md new file mode 100644 index 0000000..294dc64 --- /dev/null +++ b/pages/colophon.md @@ -0,0 +1,16 @@ +# Colophon + +This website is a collection of living, breathing documents. As I mention on the homepage, this place is better referred to as an online [brain dump](/dump). 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. + +For those interested I try to keep the details of the blog up-to-date with the information below: + +## Website Fast Facts + +| Parameter | Source | +|---|---| +|Built with:|[barf](https://barf.bt.ht)| +|Hosted on:|[SourceHut Pages](https://srht.site/)| +|Source code available:|[SourceHut](https://git.sr.ht/~bt/bt.ht)| +|Licensed under:|[MIT](https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE)| +|Developed on:|ThinkPad X201| +|Operating system:|OpenBSD| diff --git a/pages/donate.md b/pages/donate.md new file mode 100644 index 0000000..85197ff --- /dev/null +++ b/pages/donate.md @@ -0,0 +1,23 @@ +# Donate + +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. + +## How are donations used? + +That's a good question. Almost all money donated goes towards hosting, domain renewal costs and [open source services I use myself](/uses). Anything "extra" ends up getting me a coffee (or beer) to enjoy while I publish more free (and hopefully useful) content. + +### Standard Donations + +- [Buy Me a Coffee](https://www.buymeacoffee.com/WQTMtn7ir) +- [PayPal](https://paypal.me/bradtaunt) +- [Directly through Stripe](https://buy.stripe.com/eVa14A885elO9JS9AE) + +### Crypto Donations? + +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. + +If crypto is the only payment option at your disposal and you still wish to make a donation; **don't**. Instead, make that donation to a local non-profit organization. "Cash it in" and use that money in your own community. Donate your *time* to others. + +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. + +Thanks for understanding.
\ No newline at end of file diff --git a/pages/now.md b/pages/now.md new file mode 100644 index 0000000..7e60a4c --- /dev/null +++ b/pages/now.md @@ -0,0 +1,17 @@ +# Now + +This page is based off the [now page concept](https://nownownow.com/about) by Derek Sivers. + +**Updated October 09, 2023** + +## Work + +- Working as a UX designer & fullstack developer hybrid + +## Life + +- Raising my three children (aged 5, 3 and 1 respectively) with my wonderful wife +- Trying to contribute more to open source projects that I actively use +- Slowly teaching myself C & RSpec +- Advancing my knowledge of Ruby +- Currently playing Darktide on Xbox
\ No newline at end of file diff --git a/pages/projects.md b/pages/projects.md new file mode 100644 index 0000000..be6d948 --- /dev/null +++ b/pages/projects.md @@ -0,0 +1,27 @@ +# Projects + +## Active Projects +* [barf](https://barf.bt.ht): Minimal blog engine in a tiny shell script +* [ssgit](https://ssgit.bt.ht): Static site git page generator +* [Vanilla CSS](https://vanillacss.com): A minimal baseline stylesheet for any web project +* [Web Audit](https://audit.bt.ht): Detailed checklist audit for developing websites +* [Normform](https://normform.netlify.app): Minimal CSS form plugin (6KB) +* [23 Tales](https://23tales.netlify.app): Online collection of works by Beatrix Potter +* [Shinobi](https://shinobi.bt.ht): Text-based, RSS focused blogging "system" +* [pblog](https://pblog.bt.ht): Pandoc static blog generator +* [Light Speed](https://ls.bt.ht): Jekyll theme with a perfect Lighthouse score + +## Clubs +* [1MB Club](https://1mb.club): A collection of web pages weighing less than 1 megabyte +* [1kB Club](https://1kb.club): A collection of web pages weighing less than 1 kilobyte +* [XHTML Club](https://xhtml.club) A collection of HTML-focused websites + +## Installers / Setups +* [Open Suck](https://git.sr.ht/~bt/open-suck): OpenBSD desktop based on the suckless philosophy +* [Void Suck](https://vs.bt.ht): Void Linux desktop based on the suckless philosophy +* [Alpine Suck](https://as.bt.ht): Alpine Linux desktop based on the suckless philosophy +* [Alpine Wayland Desktop](https://git.sr.ht/~bt/alpine-linux-setup): Bare-bones Wayland "Desktop" Alpine installer script + +## Experiments +* [Blog Anonymously](https://anon.bt.ht): A basic starting point for those wishing to blog privately +* [Better Search Results](https://search.bt.ht): Rethinking the UX flow of modern search engines diff --git a/pages/resume.md b/pages/resume.md new file mode 100644 index 0000000..429085b --- /dev/null +++ b/pages/resume.md @@ -0,0 +1,109 @@ +# Bradley Taunt + +**UX Designer & Software Engineer**<br> +brad@bt.ht + +As a designer/developer hybrid, I help software companies improve their user experience and ship more performant products. + +## 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. + +## Experience + +|Title|Company|Duration| +|-----|-------|--------| +|Full Stack Engineer|SerpApi|2023-Now| +|Senior UX Designer|Donorbox|2021-2023| +|Senior Designer|Purism|2019-2021| +|Lead Product Designer|Benbria|2012-2019| +|Web Designer|Netvatise|2009-2012| + +<!-- - **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 + +### Senior Designer at Purism + +**2019-2021** / Remote + +- 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 + +### Lead Product Designer at Benbria + +**2012-2019** / Ottawa, Canada + +- 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 + +**2009-2012** / Toronto, Canada + +- Static website design and deployment +- WordPress / WooCommerce management and maintenance +- SEO content updates / performance boosts +- Web analytics reviews & audits --> + +## Education + +|Institution|Program|Completion| +|-----------|-------|------| +|Durham College|Multimedia Design|2009| + +<!-- ### Durham College + +**2006-2009** / Oshawa, Canada + +- Associates Degree in Multimedia Design - 3 Year Program --> + +## Interests + +- Open source software +- Web accessibility +- Data analysis, big and small +- Visualization +- Performance and utilization +- Linux systems +- Software security and privacy +- Minimal user interface design +- Detailed documentation +- Optimizing build times and version control +- Writing technical articles + +Other: playing with my kids, hockey, video games, Linux distro-hopping. + +## References + +Available upon request. + diff --git a/pages/uses.md b/pages/uses.md new file mode 100644 index 0000000..14ef20d --- /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)<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| + +## Laptops + +- **ThinkPad X260** (Daily Driver) + - CPU: Intel i5-6300U (4) @ 3.000GHz + - RAM: 32GB + - Storage: 128GB SSD + - OS: Arch Linux + +- **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)) + +- **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)) + +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/pages/wiki.md b/pages/wiki.md new file mode 100644 index 0000000..3e684b6 --- /dev/null +++ b/pages/wiki.md @@ -0,0 +1,378 @@ +# Wiki + +## Introduction + +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. + +## Open Suck + +My personal, lightweight desktop installer for OpenBSD based on the suckless philosophy. Includes my own custom set of suckless tools (dwm, slstatus, dmenu, etc.) + +- [https://git.sr.ht/~bt/open-suck](https://git.sr.ht/~bt/open-suck) + +## vimrc + +``` +" Don't try to be vi compatible +set nocompatible + +" Helps force plugins to load correctly when it is turned back on below +filetype off + +" TODO: Load plugins here (pathogen or vundle) + +" Turn on syntax highlighting +syntax on + +" For plugins to load correctly +filetype plugin indent on + +" TODO: Pick a leader key +" let mapleader = "," + +" Security +set modelines=0 + +" Show line numbers +set number + +" Show file stats +set ruler + +" Blink cursor on error instead of beeping (grr) +set visualbell + +" Encoding +set encoding=utf-8 + +" Whitespace +set wrap +set textwidth=79 +set formatoptions=tcqrn1 +set tabstop=2 +set shiftwidth=2 +set softtabstop=2 +set expandtab +set noshiftround + +" Cursor motion +set scrolloff=3 +set backspace=indent,eol,start +set matchpairs+=<:> " use % to jump between pairs +runtime! macros/matchit.vim + +" Move up/down editor lines +nnoremap j gj +nnoremap k gk + +" Allow hidden buffers +set hidden + +" Rendering +set ttyfast + +" Status bar +set laststatus=2 + +" Last line +set showmode +set showcmd + +" Searching +nnoremap / /\v +vnoremap / /\v +set hlsearch +set incsearch +set ignorecase +set smartcase +set showmatch +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> + +" Textmate holdouts + +" Formatting +map <leader>q gqip + +" 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 + +" 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 +``` + +## .zshrc extras / aliases + +``` +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"" +``` + +## mimeapps.list + +Place this file under `/usr/share/applications/mimeapps.list` + +``` +[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 +``` + +## qutebrowser + +### Greasemonkey + +All of these scripts should be added under `~/.local/share/qutebrowser/greasemonkey/`. Then be sure to run the proper command within qutebrowser: `:greasemonkey-reload` + +#### Auto Skip YouTube Ads + +``` +// ==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]; + if (ad) { + document.querySelector('video').playbackRate = 10; + } +}, 50) +``` + +## `ffmpeg` to MP4 + +``` +ffmpeg -i input_filename.avi -c:v copy -c:a copy -y output_filename.mp4 +``` + +## Mount USB HDD via CLI + +``` +mkdir /media/usb-drive +mount /dev/sdX /media/usb-drive/ +``` + +## Run Mullvad on Alpine Linux (Wireguard) + +``` +# Install wireguard +apk add wireguard-tools +``` + +Login into Mullvad and download the proper wireguard configuration files(s). After downloaded, place in the proper directory: + +``` +doas cp <MULLVAD_FILENAME>.conf /etc/wireguard/" +``` + +Then setup an aliases for easier up/down states: + +``` +alias vpnup="doas wg-quick up /etc/wireguard/<MULLVAD_FILENAME>.conf" +alias vpndown="doas wg-quick down /etc/wireguard/<MULLVAD_FILENAME>.conf" +``` + +## Alpine Linux `mini_racer` Tweaks + +Gem lockfile: + +``` +PLATFORMS + ruby + x86_64-linux-musl + +mini_racer (0.6.3) + <remove child dependency> +``` + +then run: `bundle update mini_racer` + +## Docker + +Installing `ghost` + +``` +docker pull ghost +``` + +``` +docker run -d \ + --name ghost-name \ + -e NODE_ENV=development \ + -p 2368:2368 \ + -v $HOME/path/to/ghost/blog:/var/lib/ghost/content \ + ghost:alpine +``` + +## MongoDB 3.4 on Ubuntu 23.10 + +``` +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 +``` + +Now edit `/etc/apt/sources.list.d/mongodb-org-3.4.list`: + +``` +deb [trusted=yes] http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4... +``` + +Then finish things up: + +``` +sudo apt-get update --allow-unauthenticated +sudo apt-get install -y mongodb-org + +sudo mkdir -p /data/db +sudo chmod -R 777 /data/db +``` + +## Redis 6.0.7 on Ubuntu 23.10 + +``` +sudo apt-get install build-essential tcl +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 +``` + +Install redis: + +``` +make +make test +sudo make install + +sudo mkdir /etc/redis +sudo cp /tmp/redis-6.0.7redis.conf /etc/redis +``` + +Edit `/etc/redis/redis.conf` with the following changes: + +- `supervised systemd` +- `dir /var/lib/redis` + +Create systemd unit file for redis: `/etc/systemd/system/redis.service`: + +``` +[Unit] +Description=Redis In-Memory Data Store +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 +Restart=always + +[Install] +WantedBy=multi-user.target +``` + +Final steps: + +``` +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 +``` + +## Ruby 2.7.2 with rbenv on Ubuntu 23.10 + +Edit the `/etc/apt/sources.list` file: + +``` +deb [trusted=yes] http://security.ubuntu.com/ubuntu bionic-security main +``` + +Then run `sudo apt-get update`. After completion, install `libssl1.0-dev`: + +``` +sudo apt-get install libssl1.0-dev +``` + +## Fix screen tearing + +``` +sudo micro /etc/X11/xorg.conf.d/20-intel.conf +``` + +Add the following contents to `20-intel.conf`: + +``` +Section "OutputClass" + Identifier "Intel Graphics" + MatchDriver "i915" + Driver "intel" + Option "DRI" "3" + Option "TearFree" "1" +EndSection +``` + +## Enabling "tap to click" + +``` +sudo micro /etc/X11/xorg.conf.d/30-touchpad.conf +``` + +Add the following contents to `30-touchpad.conf`: + + + Section "InputClass" + Identifier "touchpad" + Driver "libinput" + MatchIsTouchpad "on" + Option "Tapping" "on" + Option "TappingButtonMap" "lmr" + EndSection + +## Woocommerce + +**Reset all product menu_order to `0`** + +``` +UPDATE wp_posts SET menu_order = 0 WHERE post_type = 'product'; +``` diff --git a/posts/$10.md b/posts/$10.md new file mode 100644 index 0000000..077c74d --- /dev/null +++ b/posts/$10.md @@ -0,0 +1,61 @@ +# Do You Have an Extra $10? + +2022-11-23 + +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. + +$10 doesn't seem like a *ton* of money, but a little does go a long way. What if, combined with *other people*, that $10 could grow and support an open source project? A project that you might even use *every day* without cost. + +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! + +But, if you're like how I used to be, you might be one of those people who enjoys *the idea* of donating to a FOSS project instead of actually doing so. That's fine. Zero judgement here since I was doing *exactly that* 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. + +In a way, it's actually kind of selfish. You start doing it more for the *feel good* endorphin that kicks in each time you donate. At least, that's been my experience... + +## Open Source isn't Free + +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. + +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? + +## "Donating? In THIS Economy?" + +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 *have the means* to support FOSS communities with any disposable income, you should. And I'm not suggesting a lot - **just ten bucks**. + +Allow me to put my money where my mouth is and showcase my own $10 donation breakdown: + +## My $10 Breakdown + +|Service|Cost/month| +|-------|--------------| +|[sourcehut](https://sourcehut.org)|$5.00| +|[fosstodon](https://fosstodon.org)|$3.00| +|[qutebrowser](https://qutebrowser.org)|$2.00| + +*In case you are reading the post at a later point in time, the most up-to-date donation listing can always be found [on my official Uses page](/uses/).* + +## SourceHut + +To be fair, this is an active service which just so happens to be available for "free" in its current state. Drew [mentions on the main pricing page](https://sourcehut.org/pricing/) that payment is *currently* optional, but will eventually require maintainers to upgrade (contributors will always have free access): + +> 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. + +I still consider this "donating" since it helps keep this specific instance alive. It's also my main code forge since I've been [migrating away from GitHub](/srht2/). I want to see SourceHut succeed, so while I *could* use the service completely free, I believe it's more than worth it to coverage my usage. + +## Fosstodon + +[fosstodon.org](https://fosstodon.org) 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 [Kev](https://kevquirk.com/) specifically for making my initial experience great!) + +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 [posted an update](https://hub.fosstodon.org/more-upgrades-twitter-storm/) detailing how their server costs are now >$1800. That's insane. + +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! + +## qutebrowser + +**The best browser I have ever used**. 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. + +## Food for Thought + +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. + +And really, it's just $10. diff --git a/posts/1kb.md b/posts/1kb.md new file mode 100644 index 0000000..ff1f1b3 --- /dev/null +++ b/posts/1kb.md @@ -0,0 +1,57 @@ +# Making a Website Under 1kB + +2022-08-02 + +I recently launched (another) website club called the [1kB Club](https://1kb.club). Unlike the [1MB Club](https://1mb.club), 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. + +But it is possible. And I did it myself! + +*Note:* Big shout-out to [Tanner](https://t0.vc), who inspired this whole "movement" with his own minimal website. (He also has some really great creations/articles there too!) + +## The HTML + +For reference, you can view my "mini" website here: [cv.tdarb.org](https://cv.tdarb.org). It is *very* minimal and serves only as a personal curriculum vitae. It also weighs only **920 bytes** and is valid HTML. + +Let's take a look at the full HTML and then break things down from there: + + + <!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> + + +## Sneaky "Hacks" + +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 *odd* favicon meta tag: + + + <link rel="icon" href="data:,"> + + +This is required to stop the browser from making the standard favicon request (normally pulling from `favicon.ico`). 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! + +The next two meta tags after the `icon` are technically optional. These are the `viewport` and `title` tags. You could save a good amount of data by excluding them altogether, but I had my own personal reasons for keeping them: + +1. I wanted the web page to be responsive +2. I wanted the page to be [valid HTML](https://validator.w3.org/nu/?doc=https%3A%2F%2Fcv.tdarb.org%2F) + +So, I kept these tags but made them as minimal as I possibly could (looking at you `title` tag). After that, it was time to add my content! + +## Where We're Going, We Don't Need Tags... + +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! + +In the HTML above you will notice: + +1. There is no `html` element +2. There is no `head` element +3. There is no `body` element +4. There are no closing `p` tags + +Even with all those "missing" elements, the webpage is still valid HTML5! Craziness. + +The final hack that saved a *ton* of bandwidth was implementing custom `href` 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 `a:href` tag. Those can start to eat up a lot of data. + +Luckily, I host this mini-site through Netlify so I can take full advantage of their optional `_redirects` file. Links are now set with a single character (ie. "1" for the 1MB Club link) and the `_redirects` file simply forwards the user to the custom domain. Pretty sneaky! + +## Closing Thoughts + +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. diff --git a/posts/adguard.md b/posts/adguard.md new file mode 100644 index 0000000..f896f6f --- /dev/null +++ b/posts/adguard.md @@ -0,0 +1,72 @@ +# Setting Up AdGuard Home with Eero + +2022-11-04 + +Eariler this year I posted [detailed instructions on setting up Pi-Hole with Eero](/eero) and it seemed to help out a few people having troubles. With AdGuard Home recently popping up on the [frontpage of HackerNews](https://news.ycombinator.com/item?id=33387678), I thought now would be a great time to post instructions of setting up *that* service alongside Eero devices. + +## What You'll Need + +1. Raspberry Pi device (I recommend the Pi Zero for simplicity and low cost) +2. microSD card +3. [Raspberry Pi Imager](https://www.raspberrypi.com/software/) +3. micro USB to ethernet adapter (check your local Amazon) +4. Patience! + +## Setting Up the Raspberry Pi + +The first thing we need to do is flash Raspberry Pi **Lite** onto our SD card. Open Raspberry Pi Imager, select the **Lite** version of the OS and your respective media (the SD card): + + + +Don't flash anything just yet! Be sure to use the gear icon and edit the settings. Set a custom hostname, enable `ssh` and setup a proper user: + + + +## Plug it in and Boot! + +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: + +``` +ssh piguard@piguard.local +``` + +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. + +Once you are connected directly to the Pi, it's best to check for updates: + + + sudo apt update + + +...and if updates are in fact available, install them via: + + + sudo apt upgrade + + +## Installing AdGuard Home + +Simply run the automated installer: + + + curl -s -S -L https://raw.githubusercontent.com/AdguardTeam/AdGuardHome/master/scripts/install.sh | sh -s -- -v + + +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 `piguard.local`. + +If you run into any issues, I strongly suggest [reading through the "Getting Started" guide](https://github.com/AdguardTeam/AdGuardHome#getting-started). + +## Configuring the Eero App + +Once your AdGuard Home server is installed and running, you can finally point your Eero network at it. + +1. Open the Eero app (iOS or Android) +2. Navigate to **Settings** > **Network Settings** > **DNS** +3. Select **Customized DNS** and enter both your saved IPv4 / IPv6 values (These can be found under the `Setup Guide` tab in the main AdGuard Dashboard) +4. Eero will prompt you to reboot your network - do it + +After the system reboots everything *should* be working as intended! + +## Closing Thoughts + +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! diff --git a/posts/af.md b/posts/af.md new file mode 100644 index 0000000..1d6d7b5 --- /dev/null +++ b/posts/af.md @@ -0,0 +1,31 @@ +# Avoiding Featurism + +2022-10-14 + +I rather enjoy the term "featurism". I came across this term while reading the wonderful article [Why I don't use Netscape](https://www.complang.tuwien.ac.at/anton/why-ancient-browsers.html), which the author credits to Bernd Paysan. Although it sums up the current "digital product" industry quite well the more specific terminology, *creeping featurism*, works better: + +> **creeping featurism** (*noun*) +> +> 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. + +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 *if* 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 *whole team* needs to be on-guard to avoid it. + +### Simple Guidelines + +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. + +- Explore the feature's *benefit* to the product. You need to confirm that this addition will be a net-positive for both customers and your bottom-line. +- 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. +- Radically limit the scope of each individual task[^1]. Each task should be clear-cut, bite-sized and look almost trivial. +- Lock-in tickets. Once they are agreed upon they **cannot** be altered[^2]. Anything that absolutely *needs* to be added should become a future ticket itself. +- 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. + +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. + +Creeping featurism can kill your product and the morale of your team. Avoid it like the plague! + + +## Refs + +1. 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. +2. *Taking away* complexity, making changes that do not impact workload or reducing the ticket is fine - within reason. diff --git a/posts/alpine.md b/posts/alpine.md new file mode 100644 index 0000000..2f03444 --- /dev/null +++ b/posts/alpine.md @@ -0,0 +1,157 @@ +# Adventures in Creating a Minimal Alpine Linux Installer + +2022-12-08 + +## Introduction + +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. + +My main goals when starting this project were to have a daily driver that was: + +- free of any "real" desktop environment +- Wayland based with SwayWM +- as lightweight as possible + +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: + + + +(You can view the [full res image here](/public/images/alpine-1.jpg)) + +For reference this is running on a X260 ThinkPad with 16GB RAM, docked and connected to a 27" 4K monitor. + +> If you'd prefer to just go straight to the installer, feel free to jump over to the project repo: [https://git.sr.ht/~bt/alpine-linux-setup](https://git.sr.ht/~bt/alpine-linux-setup) + +## Getting Started + +My main reasoning for switching away from my previous setup (Garuda Linux running Sway) to Alpine was two fold: + +1. I wanted a more lightweight, less resource hungry system +2. I wanted to go as "full" Wayland as possible + +### Benchmarks Comparisons + +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! + +- **Garuda Linux** + - SwayWM + - Firefox: 9 tabs (Figma included) + - qutebrowser: 7 tabs + - aerc: open/running + - tut: open-running + - Sublime Text: single project open + - **Memory usage (range): 6.0-7.2 GB** + +- **Alpine Linux** + - SwayWM + - Firefox: 9 tabs (Figma included) + - qutebrowser: 7 tabs + - aerc: open/running + - tut: open-running + - **Memory usage (range): 1.0-3.5 GB** + +Switching over has basically cut my system memory usage **in half**. That ended up being a much better improvement than I predicted. These are beyond just numbers too - the system *feels* snappier. + +So, from a speed and usability stand point I considered this a success already. + +## Crashes & Roadblocks + +Of course, things didn't run 100% flawlessly out-of-the-box. There were some pretty annoying **crashes** and issues. + +### Greetings, tty + +After installing `tut` 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 `tty`. Awesome. + +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. + +I put the following in my `/etc/xdg/mimeapps.list` (which is included by default with the installer) + + [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 + +You might have also noticed that I use `feh` as my default image viewer as well. That's just my personal preference, feel free to switch that out as you see fit. + +**Sidenote:** 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. *Shrug* + +### Screen Sharing + +This has been a complete failure for me. I've tried both the Chromium and Firefox [implementations of these "hacks"](https://lr.vern.cc/r/swaywm/comments/l4e55v/guide_how_to_screenshare_from_chromiumfirefox/) 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. + +I can live without this for now. (Please [leave a message in my personal inbox](https://lists.sr.ht/~bt/public-inbox) if you know of another workaround for this!) + +## Some Minor Tweaks + +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. + +### aerc-mail + +It is important to install `gawk` since `awk` isn't "real" on Alpine. Once you have that on you system `aerc` will render emails out-of-the-box.[^1] + + apk add gawk + +### Sublime Text + +Sublime Text requires flatpak, so if that isn't your *thing* 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... + + apk add flatpak + flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo + + +Then reboot your machine for the changes to take. Login again and run: + + flatpak install flathub com.sublimetext.three + +FYI: You *might* need to run the above commands under `sudo` if your current user lacks proper permissions. + + +### Cursors + +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! + +Not to worry though - there is an easy fix! + +1. Install [capitaine cursors](https://github.com/keeferrourke/capitaine-cursors): + apk add capitaine-cursors +2. Make a new directory: + mkdir -p ~/.icons/capitaine-cursors +3. Copy the files over: + sudo cp -r /usr/share/icons/capitaine-cursors-dark ~/.icons/capitaine-cursors +4. The make your cursor changes using `gnome-tweaks` +5. Profit! + +## Closing Thoughts + +Overall I'm decently satisfied with my "installer". I've included *just enough* 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!) + +Alpine Linux can be more than just a "server distro". My daily driver proves it! + +## Refs + +1. This is now included in my official installer script, but I originally had to install this manually. diff --git a/posts/animated-card-tiles.md b/posts/animated-card-tiles.md new file mode 100644 index 0000000..4cbc8b7 --- /dev/null +++ b/posts/animated-card-tiles.md @@ -0,0 +1,323 @@ +# Animated Card Tiles + +2019-02-27 + +*The design trend of using "cards" or "tiles" to display interactive* 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. + +## What we will be building (live demo) + +This is the set of animated card tiles we will be creating: + +*(try hovering)* + +[Live CodePen](https://codepen.io/bradleytaunt/pen/rNjBpob) + +## The HTML + +For the base skeleton of these cards we only need: + +- a `flexbox` main container to hold everything +- a `.card-tile` parent element +- the inner child element that will display on `:hover` +- proper `h4` and `p` tags inside that child element + + + <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> + + +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. + +## The CSS + +First we set the main housing container to use `flex` so we save ourselves the headache of aligning all the cards in a nice row: + + .card-tiles-container { + display: flex; + font-size: 14px; + margin: 20px 0; + } + +Next we create the default styling for our tile cards and set the `transform` property to scale the card on `:hover`: + + /* Default card tile styles */ + .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); + } + +### Where are my cards?! + +Don't panic if you can't *visually* see any card elements in your demo yet - that's to be expected. We will be styling these card elements momentarily. + +Our next step is to hide the default inner `text-content` and only show it on hover. We achieve this by setting it's position to `absolute`, placing it's opacity at 0 and pushing it's z-index back to -1. + +When the user hovers over a main card tile, we change the `text-content` values of both the opacity and z-index to 1. + + /* 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; + 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; + } + +Finally we add some minor styling for the inner header and paragraph tags: + + .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); + } + +### Don't forget mobile + +We want out UI to stack the cards if users are viewing them on smaller devices: + + @media(max-width: 600px) { + .card-tiles-container { + flex-direction: column; + } + .card-tile { + margin: 0 0 10px 0; + width: 100%; + } + } + +## Customizing each card + +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: + + <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> + +And these color classes correlate to some new CSS styling: + + /* Blue Card */ + .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); + } + + /* Orange Card */ + .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); + } + + /* Green Card */ + .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); + } + +### Adding transitions + +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. + +Lucky we can target all elements we wish to animate with the `transition` property, like so: + + /* Shared transitions */ + .card-tile, + .card-tile .text-content { + transition: .3s ease all; + } + +Done and done. + +## The final code + +To make things easier for reference, I have included all the `html` and `css` below. Please feel free to use these cards anywhere you like and change them as you see fit! + +### HTML + + <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> + +### CSS + + .card-tiles-container { + display: flex; + font-size: 14px; + margin: 20px 0; + } + /* Shared transitions */ + .card-tile, + .card-tile .text-content { + transition: .3s ease all; + } + /* Default card tile styles */ + .card-tile { + border: 1px solid; + border-radius: 10px; + cursor: pointer; + height: 150px; + margin: 0 10px; + overflow: hidden; + position: relative; + width: 33.33%; + } + /* Blue Card */ + .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); + } + /* Orange Card */ + .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); + } + /* Green Card */ + .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); + } + /* 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; + 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); + } + /* All animations on hover */ + .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%; + } + } diff --git a/posts/animated-toggle-tabs.md b/posts/animated-toggle-tabs.md new file mode 100644 index 0000000..dcbcfea --- /dev/null +++ b/posts/animated-toggle-tabs.md @@ -0,0 +1,107 @@ +# Animated Radio Tab Toggles + +2021-01-05 + +*In this demo tutorial, we are making the assumption* 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: + +- One-time payment +- Recurring payment +- Free tier payment + +## The Final Demo + +[Live CodePen](https://codepen.io/bradleytaunt/embed/vYXjpLO) + +Let’s get started with the base skeleton. + +## The HTML + +<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> + + + <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> + + +## The CSS + +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: + + + .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; + } + + +Next, we “hide” (only visually) the default `radio` inputs: + + + input[type="radio"] { + left: -9999px; + position: absolute; + z-index: -1; + } + + +Then we give the corresponding `label` elements a little spacing and breathing room: + + + label { + cursor: pointer; + padding: 10px 20px; + text-align: center; + width: 33.33%; + z-index: 2; + } + + +Remember that `.slide-item` I referenced earlier? That element will be the visual “slider” that animates between the individual radio options. We style that like so: + + + .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; + } + + +You'll notice the `left`, `height`, and `width` properties utilize the CSS `calc` attributes – this just gives some much needed padding and visual clean-up to the whole tabbed interface. + +For the finishing touches, we just need to tell the `.slide-item` where to position itself based on which `radio` input is currently selected: + + + 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); + } + + +That's pretty much it! You now have a fully functional, animated toggle slider with just a set of simple `radio` inputs and pure CSS. + + + diff --git a/posts/audio-hotkeys-on-linux-mint.md b/posts/audio-hotkeys-on-linux-mint.md new file mode 100644 index 0000000..09aaf5e --- /dev/null +++ b/posts/audio-hotkeys-on-linux-mint.md @@ -0,0 +1,20 @@ +# Audio Hotkeys on Linux Mint + +2020-06-14 + +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. + +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 [Logitech MK235 keyboard](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). After looking a little too long on DDG & even Google, I finally found [this forum thread with the solution](https://forums.linuxmint.com/viewtopic.php?t=253048). + +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. + + + // Volume Up + pactl set-sink-volume @DEFAULT_SINK@ +5% + + // Volume Down + pactl set-sink-volume @DEFAULT_SINK@ -5% + + // Toggle Mute + pactl set-sink-mute @DEFAULT_SINK@ toggle + diff --git a/posts/aui.md b/posts/aui.md new file mode 100644 index 0000000..2aa7fdb --- /dev/null +++ b/posts/aui.md @@ -0,0 +1,100 @@ +# Aqua UI CSS Buttons + +2016-06-28 + +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. + +<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> + +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. + +### Starting with a basic foundation + +Since this project consists of only two buttons elements, the HTML or <i>skeleton</i> of this project is very straightforward: + + <button class="cancel">Cancel</button> + <button class="confirm">Confirm</button> + +### Styling the buttons + +The first step is to remove the browser's default button styling by using the `appearance` property. This will help avoid having to fight against the browser and minimize our CSS code. + + button { + -webkit-appearance: none; + -moz-appearance: none; + } + +Next, we apply a fairly simple set of CSS that will be shared across both the confirm and cancel buttons: + +(Pay attention to the `transition` property as we will be returning to that shortly) + + 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: 'Lucida Grande', Helvetica, Arial, sans-serif; + font-size: 2rem; + margin: 5rem 1rem; + padding: 1.2rem 4rem; + position: relative; + transition: all ease .3s; + } + +Then we separate the specific confirm and cancel button styles into their own class selectors: + + button.confirm { + background: #4A90E2; + border-color: #3672B6; + color: #fff; + } + + button.cancel { + background: #D0D0D0; + border-color: #B8B8B8; + color: #6F6F6F; + } + +### Playing with pseudo elements + +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. + +The cleanest way to do this is by using the `:before` pseudo element paired with a linear-gradient background. + + button:before { + background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); + border-radius: 125px; + content:''; + height: 50px; + left: 4%; + position: absolute; + top: 1px; + transition: all ease .3s; + width: 92%; + } + +### Adding interaction + +The final step is adding the user hover interaction: (Remember that `transition` property?) + + 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); + } + +That's it! + +### See it live on CodePen + +You can view this project on CodePen <a href="https://codepen.io/bradleytaunt/pen/YvKxxm">here</a>. + +Feel free to fork it or implement your own! + + + + diff --git a/posts/avoid.md b/posts/avoid.md new file mode 100644 index 0000000..51c3a04 --- /dev/null +++ b/posts/avoid.md @@ -0,0 +1,47 @@ +# A Warning for New Designers: Avoid Dribbble + +2022-09-08 + +Everyday a new designer begins their journey into the world of [*insert design industry here*] 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; **they rely too heavily on Dribbble**. + +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). + +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. + +### Designing for Other Designers + +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. + +Dribble is now (mainly) a place where designers post "work" for other designers. There *is* a small minority of users still looking for real, human feedback on their work - but they are a rarity. + +Take a look at the [popular shots](https://dribbble.com/shots/popular) 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. + +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 *so cool and original* - **it wasn't designed in reality**. + +### I Don't Have All the Answers - But I'll Try + +I am not the holy savior of *all things design*. 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? + +- Read some good design books (to get you started): + - [Don't Make Me Think - Revisited](https://sensible.com/dont-make-me-think/) + - [The Design of Everyday Things](https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things) + - [The Visual Display of Quantitative Information](https://www.edwardtufte.com/tufte/books_vdqi) + - [Less But Better](https://www.amazon.ca/Dieter-Rams-Less-But-Better/dp/3899555252) +- Talk to *real* people + - Chat with your team's marketers, customer support specialists, senior design leads, and developers about new features (they often have better insights than you) + - Perform customer interviews early and often (they use your product or service - let them tell you what they want!) +- R ad through some quality UX reports and research + - [Nielsen Norman Group](https://www.nngroup.com/) + - [Baymard Institute](https://baymard.com/) +- P y attention to real world design (good and bad) + - Grocery item designs, labels packaging + - Vehicle analog and digital dashboards / safety features + - Warning and safety labeling (great for universal and minimal design inspiration) + - Government websites and applications (notoriously terrible - great for "what not to do" examples) +- Your own experience (over time) + +These are just my own suggestions to help new designers get a better foundation of core design concepts *before* falling down the Dribbble hole. Take it or leave it. I'm not your dad. + +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 *considers* avoiding Dribbble as a source for learning proper design - then it was worth it. + +Now if you will excuse me, there are many more clouds to yell at... diff --git a/posts/base64-all-the-things.md b/posts/base64-all-the-things.md new file mode 100644 index 0000000..40641f7 --- /dev/null +++ b/posts/base64-all-the-things.md @@ -0,0 +1,63 @@ +# Base64 All The Things! (Sometimes) + +2020-03-18 + +*An extremely overlooked process for displaying fonts*, images, documents, spreadsheets, etc. on the web is the use of **base64 encoding**. 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. + +<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> + + + <img src="/path/to/image.webp" alt="Cool image"> + + +Into this: + + + <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAASwCAYAA...PnyMAAAAASUVORK5CYII=" alt="Cool image"> + + +<h2>See it in action</h2> + +<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> + +<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+fz5OH5HJlsZma+87yDyKZNm/KBD3wgP/zDP5xrrrkmK1ascBIBAECPEEAAAKBHtNvtPProo/nsZz+bP/zDP8y99977nB+jUiTjI/VsWz+YCzcN5pLNw3nN1uG8ZutINq3sT61apFpJiqJ4JnK8lFcUi0GkSJGkW5bpdJNmq5s9Rxdy3+6ZPLh3No/sn82Th+bz5KH5zC508lyfTn9/f173utflx37sx/K+970vW7ZsSfH0lBUAAOAVSwABAIAeMDk5mdtvvz2f/OQnc8stt+TYsWOnf1FQJAP1Sjau6s/2c4Zz7UUrsmPbaC7YMJSNq/oy3F9Np1ycXXI2XD0URZ5ZVmtqrp19xxt5/OBcvvXYVL7zxHQe3jebI5PNtNrP7cmef/75ufnmm/MjP/IjufrqqzMwMODEAgCAVzABBAAAXuGOHTuWP/qjP8qv//qv5+67706n0znt+w71V3PplqFcef5o3njpWF5/8VjOXz+YanVxBsTZEj2WvKB5aoZIyqTR6uaxA3P52oMn863HpnL3k9PZeXghzXb3tB+vr68v73jHO/KzP/uzedvb3paxsTEnGAAAvEIJIAAA8ApVlmV27dqVT3/60/mt3/qtPPTQQ6d3EZBkeKCaCzcO5Y2XjeVdV63O5ecOZ9Oq/lSK4gVvMH7GLm6SVCpFmu1u9h9v5JuPTubW+0/m9ocms/voQhqt0wsh1Wo1r3vd6/IP/+E/zPve976sWbPGyQYAAK/EawQBBAAAXnm63W4effTRfOITn8jv/M7v5PDhw6d1v/56JeevH8wNl43l/detzfWXjGVsqJayLNPtoSuDyuJO6jk+1cwX7jmRL9x9PLc/NJkDJxqnHXguueSS/PRP/3Q+9rGPZcuWLU46AAB4hRFAAADgFabdbueee+7Jr//6r+ezn/1sjh8//qz3qVWKrBvvyxsuXQwfb7x0LOesGUj3LF/i6oWqFEm7m+w5Op+//M7x/OXdJ3LX41M5MdM6rd/7nHPOyU/+5E/mJ3/yJ7Nt27ZUKhUnIAAAvEIIIAAA8ArS7XZzzz335Jd+6Zfymc98Js1m81nv01er5DVbh/OjN67PzdetzbYNg+l2e2vGx7OpFEXKsszD+2bzu7ceyufuPJpdRxbS7jz7IKxatSo/8RM/kV/4hV/IBRdc4CQEAIBXiOrHP/7xjxsGAAA4+3W73Xz3u9/Nf/gP/yF//Md/nPn5+WWPL4pk/Xhf3nXVqvzMuzfnI29cl3Vj/el0y7za/iuop3/fDeP92b51OOvH+zLb6ObEdOtZN0mfn5/P7t27UxRFtm3blrGxscWN1wEAgLOaAAIAAK8QDz74YH7lV34lf/AHf5DZ2dnl3+hXipy/YTB/7+2b8k9u3prrLxlPrVbk1T7/u1smI4PVXH3Bily8aShlyuw/1sjMQmfZ+83MzOSRRx5JWZa59NJLs2LFCickAACc5QQQAAB4BXjsscfyn/7Tf8qnPvWpTE9PL3tsX63IleeN5Gd/YEt+7K0bsnn1wGlv/P1q0S2TTav6c/nWkSTJoZONTM93ll0WbHZ2Nrt3787AwEAuuuiijIyMGEgAADiLCSAAAHCWO3LkSH7jN34jn/jEJ3Ly5Mlljx3qr+YNl47lF95/Tv6nGzdkZKAa7WNp48P1XHn+SFaN1LP3WCPHplrLjtfU1FSeeOKJrFy5Mpdddln6+voMIgAAnKUEEAAAOItNT0/ns5/9bD7xiU9k3759yx47MlDN21+7Mv/LzVvztitWpVa15NWzKctksK+SizYNZ3y4lsOTzRydai27OfrExEQmJyezdevWnHfeealWqwYSAADOQgIIAACcpTqdTr7yla/kl3/5l3Pvvfcue+zIQDU/cPXq/LMPnpsbt4/HFt2nr8zismHbzxnJplX92X10IQdONJadCbJ///5MT0/n4osvzubNmw0iAACchWqGAAAAzk7f/e5389u//du5++67lz1usK+St16xMv/wpi3ZsW102dkLnFpZJpVK8pbLV2Z6rp1Wu8x3nphOs9095fHdbjdf/epXc95552XDhg0555xzDCIAAJxlKoYAAADOPseOHcsnP/nJfP7zn0+z2VzyuIG+St5y+cr8wvvOyZu2j6cw9eN5K8vFmSDvv25t/pf3n5Mrzx9JZZnxnJqayh/90R/lT/7kT7KwsGAAAQDgLCOAAADAWabT6eTWW2/NX/zFX2R6enrpN/OVIju2jeZn3r05b7hkLF27nb9gZZnUa0XefdXq/L23bcxFm4aWjUr79u3Ln/7pn+Zb3/qWwQMAgLOMAAIAAGeZhx56KH/wB3+QBx54YNnjLtgwmL/3to1551WrUq0WkT9eHGWZDPVX8kNvWJePvnlD1o/3LXNsma9//ev5wz/8wxw+fNjgAQDAWUQAAQCAs8j09HT+7M/+LF/72tfS6XSWPG7Dyr78yJvW5z3XrE6tWqRUP15U3TJZNVLPh9+4Lu+5ek2GB6pLHjs3N5cvfvGL+dKXvpR2u23wAADgLCGAAADAWeTb3/52/vRP/zSHDh1a8piBeiXvvmp1Pvbm9Vk/3i9+vES6Zbk4y+btG3Pj9vHUqkuvhfXoo4/ms5/9bB5++GEDBwAAZwkBBAAAzhInT57MF77whWWXviqK5Kpto/mhN6zLuesG07Hvx0uqLJMd20bzwevX5rx1A0se1+l08q1vfStf/epX02q1DBwAAJwFBBAAADhLfOtb38qtt96aqampJY9ZP96Xm69bkxsuG1t2c+5XoyKLgeh0v05HmaSvVsm7d6zOD1y9OkP9Sy+FtXfv3nzxi1/Mk08+6cUAAICzQM0QAADAmTc1NZWvfOUruf/++5d+814tcuP2lbnpmjUZHay96mZ/FM/8kRRP/UO3LNPpLn61O0//c9LtlumWi5uUd8vF48pycUZHpbK4jNjIYC19p7F5fLcss36sL+973drct3s2X3vg5JLLjt1999350pe+lG3btqVerzuxAQDgDBJAAADgLHD33Xfn1ltvzfT09JLHXLRpKO+7dk0u2jTU0/Hj6dkZTweLp+NFq1Om0epmodlJo1Wm2e5mrtHJ1Hwn03PtTM61Mz3fztRcJwvNbhrtbpqtbprtxTDSLRfDSL1WZNOq/rxp+3hee95oRgaredYJIUVy3cUr8t5rVufhfbM5MtE85WEHDhzIl7/85bzlLW/J5Zdf7sQGAIAzSAABAIAzbH5+Pl/96lfz6KOPLnnMQL2SGy4bz+svGUu1KNLtoZ3Pvzd4tNplGu1uFprdzC50Mr3Qzsx8J9Pz7RyZaGXPsYXsPjKffccbOT7Vymyjk2a7TKvdTatdptVZ/N7uls/MAjmVvlqRW+4azc+/Z3N+8HVrsmKotuxm8mWZDPVX85bXrMxt90/klruOnfK4TqeTe++9N3feeacAAgAAZ5gAAgAAZ9jjjz+eu+++OxMTE0sec976wbz18pXZumbgecWPZ5aPKpMzmU6enmnx9LJUrU75TOyYmmtn77GF7Dm6kF1HFrLv+EIOnmjk0MlmDp1sZq7ZyYvVfZrtMnc9PpVf/8vk3LWDueGy8ZTPMjLdsswlW4by1itW5q4npnJ4iVkgu3btyh133JGPfOQjWbFihRMcAADOEAEEAADOsHvuuScPPvhgut3uqd+0V4vccNlYXn/JimcixnPR6ZaZb3TT7papVYsM1Cup1xZTxEs9keT7Znc8FTvmm52cmG7lxEwrB0408uj+uXx310wePzifiZnFWR1zje7LsszXtx+bzm0PnMz2rcMZH372WSCLM3HGcuv9K3LLt4+d8qXodru5//77c++99+bGG290ggMAwBkigAAAwBk0Ozubb37zm9m1a9eSx5y/fnGGwvrx/nSfYxSYmm/nob2zuefJ6RydamXdWF8u3TKc89YNZGy4loF6JbVqkUqlSOUFzBB5emZHmb/Zt6PTLbPQ6mah0c3kXDv7jjfy0N7ZPHFoLo/sn8uuw4tLWbU7Z25OSrcs85XvnsiN28fzxsvGn/X4Msll5wznjZeO5esPTWRitn3K45544ol84xvfyPXXX28zdAAAOEMEEAAAOIMefPDB3HfffWm1Wqe8vSiSy7cO54pzR1KvFs9pVsTUfDt/csfR/PvP7c2eowtpdbrpq1UyPlzLhRuHcuP28Vx+7nA2rRrI6tF6VgxV01dbnB1SqxSpVoo82+7g3W7S7jy198ZTMzym5to5MdPK8alWHtk/lwf3zuS7u2ZybKqVmflO5pvds2oPk/v3zOabj05l+9aRrBqppXsae4HsuGA0F28eyp2PTp3yuJMnT+aee+7Jnj17csEFFzjRAQDgDBBAAADgDLrnnnuWnf0xOljLVdtGc/6GwdOOBkWRNFrdfO3+ifyXv9iXh/fNPnNbq93J7EIn+483cuv9JzMyUM356wezbcNgzl8/mHPXDuSctQNZN1bP+HA9ffVKKkVSKZ6KIeXixuLd7uL+HVNz7RyZbOXQyUYOnGhkz9GF7D/eyO6jCzlwvJHZRuesfw0mZ9u57YGTeftrV2b16IpnXRes200u2zKcHdtG8+3Hpk4ZTFqtVh577LE88cQTAggAAJwhAggAAJwhU1NTeeyxx5bd/PyCDYPZsW00IwPV014qqiiK7Dm6kD/+5tHct2tm2WNnFjq5b/dM7t89k2q1SH+9koF6JX21Sgb7KxkbqmV4oJrBvkqqlSLtTplme3GWx+RcJ41WN812N812+cw/n6nJHUWSSqVItbL4vSgWY1ClkrQ7SbPVzRLbrOSORyZz787pXH7uSGqVYtllwMqyzMqRenZsG805awey+8jCKY/bv39/Hnroobz73e92sgMAwBkggAAAwBly8ODBPPnkk5mdnV3ymMvPHc6lW4ZzuitfFVn8oP9bj03lC3cfP+37lVlcyqrdWZwhcrapVBZnoRSVpFopUq8VqdeL1KpJtZZUq0WGByoZG6llfLSa0eFqBgeKDPRXMjBQ5PDxVm69cyZHjp16z47p+U6+8chUbnzNylywYSjlMhWnTNJfr+TSzcO5cOPQkgHk8OHDefjhh9NqtewDAgAAZ4AAAgAAZ8iuXbuya9eudDqnDg4rhmq5aONQVo7Ul/1A/vsUySP7Z/Pn3z6W49OtV+zY1GuLkaOvr8jQYCUrhqtZsaKSsbFK1q2uZevG/mzd1Jf1a6tZs76aNWsqGR4uUqsVqVUX9y+pVPJMMDlxsp3/+f/ZyS1fml5yhsqdj07mu7tmsnXtwGnMAkm2rBnIhRsHc+v9xSln53S73ezcuTO7d+/OhRde6IQHAICXmQACAABnyGOPPZZDhw4tefvGlX05b/1gBuqV01pWqigWl7S645Gp3PHI5CtiDCpPLVdVqyb1eiUD/UWGhyo5b1N/Ljy/LxddXM/mDfWsX1PL+rW1rN+wGEKq1cUlrr73d1/O6Fhf3vzGoXz73vkcPnLqWSA7Dy/kriem8sZLx7J+vH/5WSBlmXXj9VywYTCDfZVMz586Yh04cCAPP/ywAAIAAGeAAAIAAGfI7t27c/z48SVv37p2IOetG0ytWqRzGmtZVYoiuw7P54v3HM+hk82z9yKkujizY2CgyNqVtaxdU8s5m2u5bNtgdlw1kEsurmdsRTX9/UX6+4vvix3PFjqWUnbLvP3Nw/mLL8/k6LH2KfcCaba7+doDE7lpx+psXNWf7jIrgZVJ+muVbNswlC2rB/LQvlMvY3b8+PFlN7kHAABewmsPQwAAAC+/RqORw4cPZ2Hh1PtHVCtFtq4dyPrxvpzO4ldFFj/Av/vJ6fz1QxNLHlcpklq9SJHFjcG73fIl27S8UizO7qhUF5e06qsXGRmu5NxN/dnx2oFceklfLj6/P1u31rN5UzX1eiWVylO/T/HiPpeyTC48vz+v2zGYe+5fyMmJU9eNB/bM5r7dM7n24rH01Yplx6ZbJltW9+fcdUsHkPn5+Rw9ejTNZjN9fX1OfAAAeBkJIAAAcAYcOXIkJ06cWPqNerXIhpX9WTVSO739P4rk0f1z+cLdJzIx017ysJUrq7n+6qEMDlaya3czh4+2MzHdSbudtFplOs8ziBRJKtXFpaxqtSL9fUXGR2tZt7aadWurec1Fg7li+0Cuvro/q8arGRhYnAVSqSzO7nixg8ffVpbJ2IpK3vmWkXzhKzNLBpC5RifffHQqb7tiVS49Z/hZlsFK1o71ZeOq/iWPaTQaOXLkSCYnJ7N27VonPgAAvIwEEAAAOAMOHjyYiYmJJW/vqxVZs6KekcHasy5/VRTJfLObu56Yyrcem1r22NduH8gv/b/XZ/26enbtbmXX7mYe39XMY4+38thjzew52MjUbCfdbtLpLM5yKMu/iSLFU38URfHUDI+kWi0yPFjJxjX1bN3Sl23n13PRhfVsXFfP1i31bNxYy/Dwyxc7llKWyRuvHcwlF/Xnuw8uLBl67t89k0cPzObCjYOpLrMZepkyQ/2VrFlRT6166o3Qm81mjh8/LoAAAMAZIIAAAMAZcODAgWUDyKrRetauqKdaefb9PypFkf3HG7n1/pPZe2xhyePWr63l3W8fyaUX9afTTa54TX9ec1l/Ot0y7VaZVitpNLuZmOzm4P5ODh3sZGq6m7m5buYb3ZTdpForUq8VGRmqZOV4NavXVLJ2fSXr1lVTry/eVqsVqdUXn9eZDB5/W1kmI6PVvOPNw/nmXXPZvbd1yuOePDSfu5+czhsvHc+aFfVlZ8TUq5WsXVHP2FAtx6f/7uO12+0cO3YsU1NTTnoAAHiZCSAAAHAGTE1NZX5+fsnbV4/WMz5SP73lr5I8tHc233h4csnbq9Xk8u39eeebR56Z0VAUi/9/tbq4P0eSlGUla9ckF25bDAbL/fzibwWOsyV0LKtb5pqrBnPRtr7s3dfKqdrSQqubu5+cyb5jC1k71pclC0i5uFTZypF6RpcIIEkyNze37GsNAAC8NCqGAAAAXn5zc3NpNptL3j4yUM1wf/VZN0CvFMmBE418/aGJ7Dm69OyPdWtqeddbR/KaS/vT7S79eE8HjcWlrRb381jqq1pdPO5smuXxbLplctH5fbnmqsGMj1WXPO6ux6fy3d0z6S4z+6bM4mb1Q/3VDNSXvrRqtVoCCAAAnAECCAAAnAGNRiOtVmvJ2/vqlfTVnr0qdMvkkf2z+dZjU1lupaxt5/blB942koGB4lU97mWZrBit5Nodg1m/bukJ8Sdn23lgz2wOTzZTWabuVIqkr1ZJvbr0MQIIAACcGQIIAACcAQsLC+l0OkvePlCvpL9eWXb/iUqRTM62c8cjk7l/z8ySx42OVPKG6wZz1RUDy87+eLXolsmb3zicSy7qW/qYbpl7dk7niYPLh4uiUmSgXiwbq5rNpgACAABngAACAAAvs06nk2azme4yNaK/Xkm9tvzb9aIosu/4Qu56fDoz80vHlAvO68vbbhhOUhj8LM4CWbu6mqsuH8yq8aWXwdp1eCGPH5zLQquz5BJflSKp1yqpVZd+rdrtdhqNhoEHAICXmQACAAAvs7Isl40fSVIpilSfpVd0yzL37pzJNx9devPzkeFKrn/dYK6+anDZ/SxefYq86fVDueD8pWeB7Du2kPt2z2Ritp1imXhUqRSpFMu/3svN9gEAAF4aAggAAJwBxbPsGl6mXHYD9EpR5NDJZr67azonZtpLHrdhXS1vuHYo61bXll1O69WmLMucf25fLtzWl/6+YonXIHlwz2z2HF1IpbLsgz3rZvVFYfYNAAC83AQQAAB4mRVF8czXUspult3UvEyZh/bN5s7Hppad2XHpRf1519tGrH71t3S7yZbNtVx1+UBWLrMM1n27Z/LQ3tll907pllk2LhVFkUrFpRcAALzcvAsHAICX2el8IN7N4iyFU98/mWt08/C+2ew8vPTm2mMrKnnt5QPZsM7sj1Ppq1dy1RUD2bihtuQxU3PtPH5wLsenm6de5qpcnCmy3ByQZ4tdAADAS0MAAQCAl9npfCBeluWS0aJSFDk62cy9O2dydLK15GNceH5/brx+yIfvS+h2y1y7YzAXnd+/5DGtTpmH9s5l77HGKcexfJbX6unX2wwQAAB4+XkXDgAAL7PTWQKrWy69BFZRJE8cms99u2eWvH9/f5FLL+rLJRf2LzmT5Lkon2WZp5fLi/k8yjIZW1HNZZf0Z3xs6WWwdh+dz56jC2l3yiVfKwEEAADOPjVDAAAAZ+CNeK22bABpd8p0TlFAiiJZaHbzwJ6ZPHZgbsn7r15ZzTVXDWbLpvqy+1ecytORoSzLdDrJ3Hw3CwuLizz19xUZGqqkVk0qlSJFsficXgpPP49uWabTTmbnumk0yxRJBgaKDA4uPo/FmPT8nkelUuSqyweyZVMtE5OdUx6z91gjjx2Yy3yzk+GB6vfFjsUxOvVr9bRqtZpazaUXAAC87NddhgAAAF5+1Wr1WQNIu1P+nQ/1i6LIwZMLeWT/XOYbnSXvv3VLPa+/ZjD1etLpnN5z6naTRrObyaluHnuykW98az4PP9bIseOdNJvdlGXS11dkxWg1286r58rXDObq1w5k7ZpaBgeLVJ8KIi9EWS4uTTU3X+b4iXa+892F3Hv/Qp7Y2czkdCfN1mIA6eurZPXKai65sC9vuHYoF1/Yl/EV1fT3V/KcJluUZbadV8+5W/ry4CONU8aiqbl2njg0n4nZdkYGa983o6ZM0u4uH0AqlUrq9bqTHgAAXmYCCAAAnIk34rXasssitTvdU3+oXpbZdWQhD++bXXKJrGol2X7JQK66fPC0Zn+UZTI13cl3vruQv/zKTL5820z2H2hnfqGbVqtMt5tntvgukhSVpFYt0t9fZPXKaq69ejA3vWM0b7xuKFs21VKrPr8K0umUOXConW98ay6f//JM7rxrLkePd9Jolmm3y5R/63lUKkm9XmRgoMimDfW8/cbh/MDbRvK6HYMZW1E9rRjTLZMtm+q56IK+3PaNSqZnTj1gj+6fze4jC9m6diDdvzV2nU657DhXq1UBBAAAzsR1lyEAAICXX71eT7W69L4TT88A+V5FkTRaZZ44OJ+9RxeWvO+G9bXsuGIgg4PFsh/Ml2UyN9fNd+6bzyc/O5nbbp/LvgOtzM1103mWcNJImdm55OREJ/sOtHLr1+ey/ZL+/OgPrcgPvH0069ZUUz3NENLplDl2opMvfnUmn/zsZB54eHHWyUKj+6z7fSw0ykzPJMdPdPLErmZu+eJM3nT9UD76obFcc9VgRoYry4aQskxWjldz8YX9WTlWXTKA7D66kH3HF/7OY5Xls88AEUAAAODMEEAAAOAMeF4BJMnMQjuPHZjLgRONJe973jl9ee1rBpb94L/dKbNrTyuf+uPJ/O6nJrL3QDuNRvd57Rcyv1DmwKFWjh5r5977F/KZz03l5/7+qrz1jcMZXiZAlOXi/iJ/fcdc/stvncid35nPyYlOWq3yOW903u0mMzOLS3ft2dfMV/96Nh/7yFg++qGxbDuvL7Xa0oNRFEUuv6w/mzbWsmd/65THnJhuZc/RhczOd9LfV3nm+ZUpl9yv5WkCCAAAnBkCCAAAnAF9fX3LbozdbJdpdbr53o/ti6LI4Ylmdh6eW3L5q4H+Ihec35dzz6kvGREWFrq5/c65/Mp/OZ47757PiROddMsX9vuUZdJslTlyrJ2vfG02u/a08v6bRvNzP7kqmzbUUq9/f4BotcocOtLOf/2dk/njW6byxM5mFhrlCx7XbncxyDy5u5n/9Jsncsdd8/knP7c6N75hKEODp15yrOyWuej8vmxYV08yv+TrsefoQo5OtXLO2oGU5eJeJGWZtNpl2gIIAACcdQQQAAA4AwYGBpb9ULzR6qbZLvO9BaRSWVyK6fGD80veb3Skkosv7MvG9bWUf2s2R1EkR4938uk/mcwnfudkHnikkVarfNF/t0ajzCOPN3Lgt9q58675fPjmFfnBd41m4/paiiI5dKSdv/jyTP7wTyfz7XsWMj3dedYlt56rslxcFuurfz2bg4da+amPrcxHPzyW9WtrfycMlWWyelUt555TT19fkWbz745Jp1tm95GFHJpoZOvagacGdHEPkUa7m1Z76XHs6+tLX1+fkx4AAF5mAggAAJwBg4ODy34o3mh302x9/wyQdrvMniML2b/M8ldrVtdyyYX96euvpPM9H8o3GmUeeqyRP/jsZH7/s5M5eLidTqd8yX6/bjeZnOrk63fO5ZHHG/nDP53KOZvqqVSSPftbeeyJRo4e66TZKl/ScW61yjz4SCO/9KvHsndfKx/98Fhec+lABgb+ZmTLJLVqcuH5fVm7upb9B0+9DNbBk40cONH4vuWuyrJMs9VNa5mC09fXZwYIAACcAQIIAACcAYODg8vPAGl202h3szgFpEylSI5Nt7L76ELmGp0l77d5Yy3bL+nP02tadTpl9uxr5U8+P51P/tFkHn28kemZ7nPeY+P5arXKHDzczrHjndRqSYoi7dbivhkv13PodpNDh9v5xO+dzK3fmM2PfnAsP/SDK3Lu1npqT23UXlQWA8j6ddUlA8jx6VYOnWim2e6mv1555rGXmwFSFEX6+/sFEAAAOAMEEAAAOAOebQbIQqv7fbMjiqLIsalW9h1fWHa5pS2b6tm8sZ5jJzp57MlmvvK1mXzxq7N59PFGjhzrnPasj75KJWsH+nLx2EguHRvJUK2aapGcbLZzYG4+j03N5uBcIzOtdk7nEVvtMq12kpx+9SiSDNdr2TDYnwtGh7J5aCCrB/pSJJnvdPPgxHQemZzJkflmms+ye3tZJtMz3Xz3/oUcONTOn39hOu9860je8ebhXLStPyvHq9m4oZaN6+spioVTxpmTM+0cnmym1SnT/1TP6JZlmq0yrSXGtVKpCCAAAHCGCCAAAHAGnM4eII1WN8X3rIF1dLKZg8ssfzU4WOTo8Xb+82+eyHcfXMh3vruQI0fbmZlZfo+K77tAKIqcOzKYd29el6tXj+XwQiN7Zubz4MR05tqdjNZrOWdoMK9bPZ6iSG47dCJ3HD2ZuXbnRR2fwWo1160dz9Wrx5IkxxrN7J1byBPTc1nZV8+5o4P54NYNWd3flzuOnszn9x3Jzpm5ZTcjT5JONzl8pJ3jJzq576FGfu/TE7nqioFcdcVARoaraTbL1GvFKZfmarS6OTLRzFyjk9GBWsqU6ZZPxar2qQOMAAIAAGeOAAIAAGfAyMhI+vv7l7y92S4z3+yk3SlTFEmrU+bQyWaOTraWvk+zzNe+MZc7vj2fubkyC43TX+qqSDLeX89bNqzOh8/dmMlmO5/aeSCPTc1mstlKo9tNpyxTK4oMVqtZ1V/PZeOj+fB5G/P2TWvy+0/sz6NTM2l1X9i6VrVKkQtGh/OR8zamLJPbDh/Pnpn5TLfbaXT+5jkMVKtZO9CXa9aM5X3nrM+N61fnUzv35ysHj+dEo/ms80za7TITk51MTnWyd38rX751NoODlczOdtNeZpbM4Ylmjk21smG8P2WZdLuLr1OjdeoAUq1Wn3W2DwAA8NIQQAAA4AwYGRnJwMDAkrd3yzJzjcVZIH21Iq12NwdPNnJ8eukA0ukkU9Pd5/xciiTnjgzl7190Tt68YXXuOzGVX3tkdx6fmk2r2/2+mNBIMtvu5HizmQPzjRxvNPPTF5+Tf3XNJfnsrkP50z2HMr241tVzNlyr5n3nrM8Hzt2Q+05O54/3HMzO6bk0Oqd+Dieazeydnc++2YX8z5edl392+QW5avVYfvPRPXlyeu60Ftsqy2R+ocz8QifFyU5SZNlodHiimSMTzVTOXTyu0y0zv0xoejqALBe7AACAl4YAAgAAZ8Do6OiyAaQsk9nG4syC/not0/PtPHloftkA8nz0Vyu5evVY/v5F5+SGdatyz4nJ/IeHdubJ6bl0lykBZZnMtNr51rGJdMsyH99xSf7Ja87P1avH8umdB/LAxPRph5CRWjWXjY/mI+dtzJs3rM49JybzmZ0H8sT0XDrP8hxm251848jJJMm/uOrifOT8Tdkw2J/femxvvnVsIgud0w9C5TN/LO3o5OIMkKIokmJx+avZZTalr1arGRoaEkAAAOAMEEAAAOAMGBoayuDg4JK3d7tl5hqdLLS6WVkpsuvIQh7dP/eiPoc1A325afO6fPSCzbli5WgOzC3k957Yn8enZk/7MRqdbu49MZVPPrk//6+rLs4Pnbshr1szltsOHc/tR07mrmMTObrwd5ekKpKsHujL1avH8sZ1q/LmDatz7shgDs838umdB7NrZn7Z+PG9mt1ubj9yIn+293D+4aXn5t2b12Xz8GA++eT+3LL3SI4uNFK+SGM2OdfO5Fz7md9hodnNnAACAABnJQEEAADOgGq1muHh4SVv75bJ7EInC81uKsXi0ksHTzZe8M+tFMmKej3XrBnLD5+3KdeuHc+moYE0Ot3cceRk7jw68Zwfc77TzdcOn8g9xyfzpg2rc+n4aDYNDeSdm9Zm39xCdk3P5dGpmeyfW0jKZOPQQC4eG875I0PZMjyYtQN9WdFXT7cs882jJ3Pfyak0u89tKa9Wt8yXDxzNuzatybVrVubKVSuyfqA/N6xblU/vOpBvHZvIZLO97KyW0/o5nTLT8+00Wt3Ua0VmFzqZmX/2AGIPEAAAePkJIAAAcAYURZEVK1ZkcHAw8/Pzf+f2brfM9Hwnc41OimIxhswudF7Qz1xRr+XaNeO5acu6XL9uZc4dGcxAtZpKUeR4o5lHJmdyotF8zo/bLcscWWjkgYnpXL9uZeqVSsb76hnrq+e80aG8bs145tqdLHQWn39/tZLhWi391UpqRZEiiytPzbU7+auDxzL1PPcQ2TU9l3tPTOXS8dGM9dWyeXggqwfWZfvK0Xzz6Mn8xb4j+ebRiUw2n/8yYp1umam5xddlZb2WmYVOpueXfr59fX0ZHR11wgMAwBkggAAAwBkyPj6eoaGhUwaQMsnUXPupAFKk2e6m0X5usyLqlSIr6vVsGhrI1WvG8tYNq3PRiuFsGhrIcL2WylM/pyzLTLfa2TM7/7yXimp0unl4YibNbpl65W+20qgWRUZq1YzUq1lMHUmZMk/975nfNVlcyuqxycWN15+P2XYnh+YbaX7Pvh+D1cozv/Pr167M41OzufXQ8dx1bCL75xYy2Wyl1T3933oxgLQz2+hk1Wg90/PtTM4uHaaGh4ezcuVKJzsAAJwBAggAAJwh4+Pjy+4DsjgDpJsiSbtTpt05/Q/qiySr+vvy7k1r8+HzNubisZGM99VTrzwdIb4/QCy0uznReP4zI7plcqzRPOW+HU9vLl4+S17pPrWpefd5VpgyixGlm/KZWSVPP9RIrZqLVwzngtGhXL16LHcePZk/2Hkg3zhyMq3u6c846XaTuac2py+KZGa+k6llZoAMDQ1lfHzcyQ4AAGeAAAIAAGfIypUrl90HZPap5ZW6ZZlON+k8h4kRZZKpZju3HzmZiWYrr1+3MjeuX5WtI0MZrddSfk+oKJL0VSsZrT//y4OiSEafmlXyvB8jSV/1b5bEej6qRfHMTJPvfdxOWebQfCPfPTGV2w4dzwMT09k5PZf59nNbVqwsyzTbZVrtxcgyPd/J1NzSAWR4eDirVq1ysgMAwBkggAAAwBny9BJYS5ltdDI130m7U6Zblt8XLU7HfKeTJ6dns2d2Lncem8gtew/nurUr854t6/LaVStSr1Se2RR8pFbNxsGB5/271CuLS031Vf8mgRRZ3Otk8XvydNpYXHYr6abM9/5K9UqRc4YHs3tm/jktS/W0/molK5+a5VKWiz+/Wimyd2Y+Xz10PF85cCwPTEzn4NxC5tqd5xVZyiStTjedbplGq5vJufayS5NZAgsAAM4cAQQAAM6Q8fHxZTfInp5v5+R0K812N93u98eC01UmaXXLHJ5v5NhCMw9PzuS2Q8dzw/pV+dC5i0tj9VcrGanXcsn4SEbqtcw8x03IiySr+up5zfjoM5uat8syxxaa2TUzl8emZvPE1GyON5oZrFazeXgwl4wN54LRp/YjqVVTJhmqVfPmDavzneNTz2uj8o2DA7ly1VhG67UURZGDcwu59dDx/Pnew3ng5HSOLDSy0Om+oNesLJNWu0ynW2Z6oZMTM610lplEMjo6mjVr1jjZAQDgDBBAAADgDBkdHc3Y2FiKojjl7I7p+U5OzrbS6SaVxSkUL0inLHOi0crJxmSenJ7LAyenc/PW9fnAuRuyol7LNavHcunYSL59bOI5PW69UslrVo7m6jVjqRRF9szO5y/3Hc13jk/kkcmZnGi0MtVqp9HpploUGa5XM95Xz5ahgVy5ekVuXL86b1i3Kn2VSt6yYXU+u+tQHmy1T7mfyHLevGFVLhkbTq0o8p1jE/nkzgP56sFj2Tv7/GaULGVxRs7i/h8nZ9rpLPPYY2NjWbFihZMdAADOAAEEAADOkBUrVmT16tXp6+tLo9H4O7fPLnRy4qkP2KvVYjGCvAjKJBPNVr52+Hh2zczl0anZfHTb5lw6NpK/d+GW7J6Zy9GF5mk9VqUosm10KD9z8dY0Ot38+iO788X9R/PY1GxONlqZP8X0iPlOJ8cWmtk5PZd7T07lS/uP5bq14/mhczfmsvGR/NRF5+Tf3vd4jsw3TnuZqitXrcgHz92YoVo1v//k/nxq54F898RUplvtlC/y61apJJUimZpv5/h0c8kAMjg4mLVr16ZWc9kFAABngnfiAABwhoyMjGR8fDz1ev2UASRJTk63MrPQSa1apFp5cX9+q1tm5/Rcfv/J/Tk838hPX7w179i0NofmGvkvj+zKicbyy1BViiLnjwzl5y89L+2yzP99/xP5q4PHc3Bu4bSiQ6csc7LRyslGK7tm5vLQxEw+fN7G3LB+VX78gs357cf25Xij+ayPtX18NP/osvOyaag/v/fE/nzyyf15fHo27W75or9mRZJ6tZJatcjUXCcnp5deLmx0dDRr1651ogMAwBkigAAAwBnyvTNAlnJkspmjk83Uq0Vq1aVngPT3FxkeqmRhoczc/Onvc1EmOdlo5S/2Hcne2fm8Z8u6vHnj6qwf7M+ndh7IfSenMvW39gSpFEXW9vdlx+oVuX7dyuyenctvPb43j03OZKbdeV5jMdvu5FvHJnJgbiF3HpvIm9evyv/jNdvy+X2Hc//J6VPO5Fg30J8b1q/MD2xel0qK/H/veyK3HzmZI/ON57x8Vq1aZMWKSlaOVTM51cmJiU66pxjGokjqtSJFUeTYVDMnZlrLvr7r1693ogMAwBkigAAAwBlSrVazdu3aDA0N5cSJE6c8ZjGAtFKvVVKtLB1Azj2nng+/b0XGVlTz2JPN3HXPfO57aGHZDbq/12y7k28fm8y+2YU8ODGTN6xbmZ+/7Nzsn13IE9Nz2T87n6lWO2sG+rJ5aCDVoshsu5M7jkzknhOTOTTfeMHj0SnL7Jmdz+E9jeycnstVq1bkHZvW5O0b1+Roo5m9M/OZfuo5nDM8mPNGhlKpJA9MTOf2wyfywMT0c97kfN2aWq5/3WC2X9KfczbXs2F9PX/wRxP54z+fTvMUM0iKokhfrZKUZY5OtTIxu/QMEAEEAADOLAEEAADOoM2bN2fVqlXZt2/fKW8/PNHM4Ylmas8yA2R8RTVvuWE4r79mKCcnOjlwqJX7H2rk69+cy9e+MZu9B1rPGkO6ZZmDcwv5sz2Hc9exiZw/OpR1A/1ZO9CXbaPDaXS7mWy28ujUbI7MN3Ki0crhhUYazzE6PJtGp5u7jk3kienZbBkayKr+vqwd6MvGoYGcW1ncC2W61c4XDhzNoflG9s7M52Szle5pzvpYtbKayy/rz9veNJxrrhrMtnP7smplNUODlfTVi9x2++ySj1UUSV+tSPnUa3NymRkga9assQQWAACcQQIIAACcQU8HkKVMz3dyZLKZdWP11JcJIO1OmaJIxldWM7aikvPP7cs1Vw7mrW8azrfvGcnn/mI6t3xxOtMzy8eKMoublD85PZed03MZrFWzsq+evmolRZLpVjuTzXaa3e5LOi5PL811stFKkWS0XstYXz19lUraZTczrU4mmq3ntNRVpZJcsX0gP/yBFXnrDcO59KL+rFxZTaUoUj71OK1Wmfn5btpLTOwoktRrlbS7ZY5MNjM9f+qq1NfXl7Vr12blypVOcgAAOEMEEAAAOIO2bNmSNWvWLHl7s93N/uONjAxWM9RfXfK42bkyE5OLUWKxTZTp6yty0ba+nLOpnh1XDOQtbxzKZz43lVtvn0u7/ezhoEwy1+5k7nnu65EszphYNV7NRRf05ZzNfZmY7GT33mae2NnM6U4cKZNMtdp/Zy+S5zTOm+r5nz40lve8cySXXzqQ1auqqRSLY9V5aneRokhmZruZWiYSVSpFRgaqmZnvZP/xhSWP6+vry/r16wUQAAA4gwQQAAA4g8bHx7N+/fpUKpV0TzGrotUus+/4Qs5bN5CxoaXfvs/OdnNyorM4ReEpT0+OGBgosv3i/px7Tl8uvrA/q1aeyOe/NJOZ2Zd2Fke9XuQtbxzOe945kmt3DGbN6mpm58rs3tvM5780k89/aTqHjrTzEk8mydWvHcjf+9Hx/ND7VmTL5nqKLIaPv73FR1EkJyc7y86SqVaKjA/XMjnbzr5jS+97Mjg4mPXr12dsbMxJDgAAZ4gAAgAAZ1C9Xs95552X1atX5+jRo6c85sCJRuaanaxYJoAsNLqZnOqkPMXMjrJMOmUyOFDkhuuGsmZVNZdd3J/f/dRkdu5p5jmsInVaqtUil13clw++d0Xe/wOjuXBbX1aOVVNUFm+/4rL+XPmagbzzLcP5738wkb++Yy4zs90X/XmsHK/mzW8Yyt//2MrceP1QxseqKbvJUj+mKIocP9HJ9PTSM176aosB5Ph0K/uOLx1AVq1alfPOO88JDgAAZ5AAAgAAZ9h5552XtWvXLhlADk8s7jWx3BJY7VYyNdPN/HyZgYHilDGhLJO+viJXbB/I2jW1nH9uXz77Z1P54l/NZKHxwutDUSQrRit56w3D+dhHxvOWNw5l3dpayvKp2RZPdYV6vcgF5/fl3HMWv/78C9P55B9NZtfu018W69mex0Xb+vIjHxzLB96zIpdf1p/+/uLZZ5oUyYkTy88AGR2spVYtcuBEI5OzSy/JtX79+mzbts3JDQAAZ5AAAgAAZ9iWLVuyfv36PPjgg6e8/dDJZo5ONtNXW3oT9Fa7zORUJ7Nz3QwMLB1Kng4j69fW8pGbV+TyS/tz3Y7BfPHWmdx7/0Imp557gahUkrWra7nqioG87wdG86bXD+XiC/ozMHDq6FCWi1+VSnLtjsGce04911w1mC/+1Uz+6q9n88TOZlrt5x5k6rUi555Tz1tuGM573zmS668dyro1tVQqOb1ltorkyPF2JqeXPnj1aD0LzW6ePDSfRmvp4zZu3GgGCAAAnGECCAAAnGEbNmzIli1bUq/X02q1/s7tc41O9h9vZKi/kmq1SKfzd+NAs1Xm+PFOJqc6WbO6elrLSQ0NVnL1lYPZdl5f3vSGodx+53y+/s3Z3P3dhRw91km7s/yD9NUXg8M1Vw7mhtcP5XVXDeaK1wxkeKiSbrc8redQFMnG9bV84D2j2XHFQN5243C+eddcvvGt+Tzw8EKmZ7rLxouiSIaHKrlwW1/e9PqhvPG6oaeiSl9qtcXwcbpLa3VaZQ4dbmd6mQAyPlzLzEInOw/Pp9M99QP39/dn69atNkAHAIAzTAABAIAzbMOGDdm2bVuGh4czMTFxymP2HF3IhpV9WTlcy7GpvxtJWq0yh462c/xkJxduK7L0Thd/4+kwMD5WzY3XD+eKywbynneM5LEnm3liVzOPPt7IwcPtTE510n5qtafBgSIrx6s5Z3M9285b3FT9gvPq2byxnpHhxU0+Op3nNnvj6cBx7jn1bFxfyw3XDeXJ9zbz2JPNPPZkI7v3tHL4aDszs920O0mlSIaGKlm7uprztvblkgv7cv65fbno/L6sW1tLX1/xfY97OooiOXGyk/0H25lbWD6ATM+3s+fowpLHbNy4MZdcckmq1aqTGwAAziABBAAAzrCBgYFcfPHFWbNmzZIB5NBEM8MD1YwOnjqAJMmx4+0cOtzOc91N/OnDV41Xs3p1LVddOZjZmU4OHW5nYrKbmbluWq0yRZEM9BcZGalk9cpq1qyuZXCwkpQ57Rkfy+l2F/cH2bihlk2b6nnjdUM5cbKTYycWZ7bMzT0VQCqLIWbFaDVr1yw+51q1SPnUc3g+z6MokuMnOzl4uJXGEvuhFEWyYqiWo5Ot7D+x9AboW7ZsyUUXXeTEBgCAM0wAAQCAs8D27dtz7rnn5vHHHz/l7bMLnZyYbqXZXnp2womTnezZ33reIaJbJnlq742hwcVlpZLF2RTlUw9aVIqkXPz3skw67fJFHYdnAsZTy0utXrUYWlIs3liWiyEixd88j273hT+Poihy9Fg7Bw+3017isVaP1tPultl7bCELzVO/DvV6Peeff362bt3qpAYAgDOsYggAAODMO//887Nt27Ylb2+2u5mYbafZ6qayxF7oJ052smdfK90XoUmUZdLpLC5n1eksRoanQ8PT/16WL/24dLtPPYd2mU7n6X///ufxYijLMnv3t3L0WHvJY9as6MvEbCtPHp5f8piRkZFceOGF2bhxo5MaAADOMAEEAADOAitWrMjll1++5AfnZZnMN7tptJ+eAvF3zS+U2b23mRMnO0sdwhLKbvLI440cOtJe7qgcOtlccgmyJNm8eXNe+9rXpr+/36ACAMAZJoAAAMBZoCiKXHnllbnwwguXPKbR6mau0XlmOapT2bu/lUceb6RSUUBOf+yTExOdPPJ4M5NTp55SUq0UmWt0c2SimflGZ8nHuuSSS7Jjxw6DCgAAZwEBBAAAzhIXX3xxtm/fvuTsgU63TLtTJsssPXXgUDv3P9RYNpLwty6KqkUefqyRXXuayx43M9/J5Fx7ySXGxsbGcuWVV2bTpk0GFQAAzob3+oYAAADODhs2bMjVV1+d9evXL3vccmnj5EQnjz7RyMSkZbBOV7dT5r4HF3Lg4NLLXxVJZhY6mW0svenIRRddlKuvvjr1et2gAgDAWUAAAQCAs0RRFHnDG96Qyy+//Hk/xtx8N0/sbGb/wbYAclpjvrh5/EOPNnNiYumlrbpl0u50011i+kd/f3927NiRK6+80qACAMBZQgABAICzyEUXXZQbbrghq1atel7373SSx3c28+AjjRQKyLNfEBXJE7uaeejRRmbnlp7d0S3LJZe+SpKtW7fmxhtvzJYtWwwqAACcLe/3DQEAAJw9BgYG8qY3vSmvfe1rn/dj7NrTyjfvmkuz2Y0E8iyKIt++ez4PP9bIC9k25eqrr84b3/hG4wkAAGcRAQQAAM4yV155Zd7+9rdnzZo1z+v+c/Pd3Hv/Qp7Y1UzlJXzHXxR5SZfZejke/+REJ9+8az4HDrWe9+Ns27Yt73znO3Peeec5eQEA4CwigAAAwFlmbGws733ve3Pttdc+78fYuaeVb3xrftllm56PokiqtSJFJZmb66bbTar1ItVq8YKDRVEklUpSrRap9hVptso0GmUqtb95/Bf1YqhS5O775vPgI410u8/vMQYGBvL2t78973znO1OtVp28AABwFqkZAgAAOPtcfvnlufnmm/PQQw9l165dz/n+h4+088275vKed45k/draC1re6XvNzHRz7wMLuf+hhRw73smK0Uq2bK7nissGsnZNLcPDRfrqi/+dVVmWKcss+bOfDiaLe5WUWVgoMzvXzZ59rTz0aCP7DrTS7pTZsLaea3YM5OIL+tNXf3EqSFEkM7OdfO0bc9mzr/mCXqcPfOADZn8AAMBZSAABAICzUH9/f97znvfkwQcfzG/91m9lenr6Od1/dq6bu+5ZyHfuXcgP/sBoOu0XVkCKYnHGx598fiq//t9P5p77FtJslqnViqxfV8311wzl4gv7culF/dmyqZ7xsWpWjVezdk0t9YEiWWwcTz1Ykm4yN9vN0WPtnJzo5OREJzv3tPLoE43c/+BC7vruQiYmOumWychQJW9903B+4WdW5fWvG0p/vcgL7TmVSpGHHmnk9jvncmKi87weY8OGDfnQhz6UN73pTU5YAAA4CwkgAABwljr33HPzsY99LHv37s3nP//5NBqN53T/Rx5v5Eu3zuTtNw6nv794QbNAWq0y99y/kP/fb5zIt++ef+b/b7bK7Nzdzc7dkxnoL7L1nHo2rKtl/dpaNq6v57yt9YyOVFKpFKlU8syMkHa7zImTneza08yhI+0cOdbO/oPt7D/YSudv9YgTzU7+6M+nUq8XOWdzPeee0/eCl8Pqdsp85Wuzuff+hb/z807H+Ph4PvShD+XDH/5wxsfHnawAAHAWEkAAAOAsdu211+Yf/aN/lLm5udx6663PKYLMzHZz+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> + + +<h2>Should I use base64?</h2> + +<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> + +<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> + +<h2>How do I encode my files?</h2> + +<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> + +<h2>Limitations</h2> + +<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>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> + + diff --git a/posts/basic-gulp-build-for-sass.md b/posts/basic-gulp-build-for-sass.md new file mode 100644 index 0000000..48fa014 --- /dev/null +++ b/posts/basic-gulp-build-for-sass.md @@ -0,0 +1,123 @@ +# Basic Gulp Build for Sass + +2019-01-15 + +Some designers might shy away from build tools when first starting out and I can understand the reasoning - task runners like `gulp` and `grunt` can seem daunting at first. So, I've decided to showcase my go-to setup for `gulp` and explain what the heck it does step-by-step. + +Here is the final `gulp.js` file in all it's glory: + + + 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/')); + }); + + /* Compile the assets */ + gulp.task('assets', gulp.parallel( + 'styles' + )); + + /* Build */ + gulp.task('build', gulp.series( + 'assets', + 'generate' + )); + + +Trust me, it's not complicated at all. + +## Grabbing what we need + +For our basic build file we are going to need only three modules: `gulp`, `gulp-shell` and `gulp-sass`. + + + var gulp = require('gulp'); + var shell = require('gulp-shell'); + var sass = require('gulp-sass'); + + +#### gulp +This is the streaming build system, without it we can't do anything else. + +#### gulp-shell +A gulp command line interface for us to interact with our terminal. + +#### gulp-sass +Required for gulp to compile Sass into vanilla CSS. + +#### Bonus tasks + +<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 class="no-margin">Maybe I'll write about my <code>js</code> build workflow in a future article.</p> + +## Generating the build + +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): + + + gulp.task('generate', shell.task('jekyll serve')); + + +Don't worry if this `generate` isn't clear, we come back to that later. + +## Processing our pre-processor + +We will name this next task `styles` since that's what it outputs - our styling. We start by telling gulp where our main `scss` directory is: + + + /* Change this directory to match yours */ + return gulp.src('_includes/assets/sass/styles.scss') + + +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: + + + .pipe(sass({ + outputStyle: 'compressed' + }).on('error', sass.logError)) + + /* Change this to your destination directory */ + .pipe(gulp.dest('_includes/assets/css/')); + + +## Building our assets + +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) + + + /* + Compile the assets + */ + gulp.task('assets', gulp.parallel( + 'styles' + )); + + +## Altogether now! + +Now we add a task that runs all other tasks in our gulp file (in this case it will run both `assets` and `generate`) + + + /* + Build + */ + gulp.task('build', gulp.series( + 'assets', + 'generate' + )); + + +And that's it - we're done! A very basic `gulp` build for compiling Sass. + diff --git a/posts/batch-webp-conversion.md b/posts/batch-webp-conversion.md new file mode 100644 index 0000000..f9666ec --- /dev/null +++ b/posts/batch-webp-conversion.md @@ -0,0 +1,80 @@ +# Batch Converting Images to webp with macOS Automator + +2021-10-15 + +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 `webp`. + +You *could* 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? **Let's do just that!** + +## Basic requirements + +**Important!**: As of this time of writing, the official `libwebp` package release is *libwebp-1.2.1-mac-10.15*. If this has been updated since then, change the command below to match that of the proper release version. + +1) First you will need to download the `libwebp` package to your Downloads folder: [developers.google.com/speed/webp/download](https://developers.google.com/speed/webp/download) + - *Look for the "Download for macOS link"* + +2) Next we will need to copy the `cwebp` folder to our `/usr/local/bin` directory: + - Open macOS Terminal + - Run `sudo cp /Downloads/libwebp-1.2.1-mac-10.15/bin/cwebp /usr/local/bin` + - *Note:* if the `/usr/local/bin` directory doesn't exist, simply create it by running: `sudo cd /usr/local && mkdir bin` + +## Creating our custom Automator script + +1) Open the macOS Automator from the Applications folder + +2) Select `Quick Option` from the first prompt + +3) Set "Workflow receives current" to `image files` + +4) Set the label "in" to `Finder` + +5) From the left pane, select "Library > Utilities" + +6) From the presented choices in the next pane, drag and drop `Run Shell Script` into the far right pane + +7) Set the area "Pass input" to `as arguments` + +8) Enter the following code below as your script and type `⌘-S` to save (name it something like "Convert to webp") + + + for f in "$@" + do + /usr/local/bin/cwebp -q 85 "$f" -o "${f%.*}.webp" + done + + +For visual reference, it should look something like this: + +<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> + +And when right-clicking an image file in the Finder window, it should now give you the option to convert: + +<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> + +## Making edits to your script + +If you ever have the need to edit this script (for example, changing the default `85` quality parameter), you will need to navigate to your `~/Library/Services` folder and open your custom webp Quick Action in the Automator application. + +Simple as that! + +## Possible Hiccups + +I was contacted by the very helpful [Kev Quirk](https://kevq.uk) about a minor problem he encountered while following this tutorial. When trying to run `cwebp` he received the following error message: + + + cwebp cannot be opened because it's from an unverified developer + + +Doing the next steps seemed to have fixed this issue for him: + +1. Click on the "Open in Finder" in the error message prompt +2. Double-click on the `cwebp` utility to open in Terminal +3. You'll then be prompted with a pop-up asking if you wish to execute + +After following these steps, the issue should be resolved. diff --git a/posts/battery.md b/posts/battery.md new file mode 100644 index 0000000..4147ce8 --- /dev/null +++ b/posts/battery.md @@ -0,0 +1,36 @@ +# Improving Laptop Battery Performance on OpenBSD + +2023-06-13 + +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 *just enough* to squeeze more life out of your machine's battery. + +## Our New Best Friend: `ampd` + +I won't go into great detail about `ampd` here - that's what the incredible [documentation is for](https://man.openbsd.org/apmd). You'll want to make sure to start it before trying to configure it: + +``` +doas rcctl start apmd +``` + +If already running in a live session, you can default to `-A` (auto) but I suggest setting cpu performance to low: + +``` +apm -L +``` + +To make these changes permanent on boot: + +``` +doas rcctl set apmd flags -L +``` + +Optimizating battery life via `ampd` will have the most noticable impact but you can improve things even further by implementing some extra "small" performance wins. + +## Small Performance Wins + +1. Reduce your screen's brightness (`xbacklight -set 50`) +2. Use a lightweight window manager instead of a beefer desktop environment +3. Enable battery saving options in your system BIOS (if available) +4. Disable the fingerprint scanner and bluetooth in your system BIOS (if available) +5. Use utilities such as `mpv` and `ffmpeg` for media consumption +6. Reduce the number of open applications at any given time
\ No newline at end of file diff --git a/posts/being-efficient.md b/posts/being-efficient.md new file mode 100644 index 0000000..3f65dcf --- /dev/null +++ b/posts/being-efficient.md @@ -0,0 +1,62 @@ +# Being More Efficient as a Designer and Developer + +2019-09-28 + +*I recently began working on a small side project* (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. + +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? + +And that got me thinking... **Why am I moving away from being efficient?** + +## Before we begin... + +I should preface everything else I'm going to mention in this post with this: *learning new stuff is awesome*. 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. + +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: + +**Just use what you already know.** + +By using your current experience (maybe even expertise) with a design system, CSS framework, blogging platform, programming language, etc. you can get something *built*. Not to mention you can get that thing built in a *fraction of the time*. After all, building things is kind of the point of being a designer (or developer), right? + +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 *just because* it's new and shiny. + +## Some vague examples + +It might be easier to understand what I mean by using some possible real-world examples: + + +| Problem | New Way | Efficient Way | +|---------|---------|---------------| +| A local bakery needs product and e-cart functionality | Learn a new custom ecommerce platform | Use a popular pre-existing library you're familiar with | +| Create an add-on blog for a medical clinic | Try a custom built static site generator and hook in a git-based CMS | Spin up a quick WordPress site and hand-off | +| UI mockups for a workout iOS app | Test out the newest design tool just released | Use your go-to default design tool you (Sketch, Figma, etc) | + + +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". + +## But wait, how / when do I learn new things? + +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. + +So how do we learn new things? This is a hard thing to answer. Really, the best response would be: **it depends on the designer / developer**. I know, *what a cop-out*. Unfortunately, it's true. There is no one solution to learning anything new. + +The best I can do is offer up some possible options: + +- Learn outside of work + - Reading / listening to a technical book on your commute or before bed + - Take an online course you can work on after hours + +- Contribute to an open source project that you aren't familiar with but are interested in + - Even tiny contributions go a long way, don't doubt yourself so much + +- Ask your current company (if not a freelancer that is) to learn on their time + - It's a valid argument that your company should have vested interest in you becoming a better developer / designer + +## Easier said than done + +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. + +My motto is to keep shipping quality products that you actually give a shit about. Otherwise it doesn't matter how "new" it is. + + + diff --git a/posts/berg.md b/posts/berg.md new file mode 100644 index 0000000..44caded --- /dev/null +++ b/posts/berg.md @@ -0,0 +1,70 @@ +# Hosting with Codeberg Pages + +2022-07-29 + +I recently switched the [pblog](https://pblog.bt.ht) project repo over from Sourcehut to Codeberg (mostly for UX reasons) and it got me looking into [Codeberg Pages](https://codeberg.page). It seemed like a cleaner approach to host my personal blog on the same platform I planned to also share the source code. + +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. + +## Create the Repos + +**Disclaimer**: My personal blog uses [pblog](https://pblog.bt.ht), so although these instructions will be catered towards that SSG the same concept *should* apply for any other generator (Jekyll, Hugo, Next, etc.). + +The first step is to create the main repo that would house the core files of `pblog`. Then we need to make a separate repo simply called `pages`. This second project is where all the generated "static" files get rendered. + +*Side note*: Be sure to at least include a `README` file in that `pages` repo. This will avoid any errors or warnings when setting up our submodules in the next steps. + +## Configuration Edits + +Once your two repos are created, you will need to make some minor edits to the `_config.sh` in the core `pblog` project to tell the build script where the generated files should go (in this case the `pages` repo): + + + OUTPUT="_output/pages/" + + +## The Submodule + +Using terminal, navigate to the `_output/` directory in your core `pblog` project. Run the following, remembering to replace the USERNAME parameter with your own: + + + git submodule add git@codeberg.org:USERNAME/pages.git + + +If everything worked correctly you should now have a `.gitmodules` file in your main `pblog` project. If you get any errors, you might need to include the name of the directory at the end of the command: + + + git submodule add git@codeberg.org:USERNAME/pages.git pages + + +## The Workflow + +Now you can make changes, add new posts and pages in the main `pblog` project and have those generated files render into your other `pages` 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 `pblog` repo forces a the `pages` repo to also update). + +Now you can navigate to the standard Codeberg Pages URL to see it in action: + + + USERNAME.codeberg.page + + +If you want to use your own custom domain (who doesn't?) then continue reading. + +## Custom Domains (Optional) + +The first thing you will need to do is add a `.domains` file to your `pages` 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: + + + yourcustomdomain.com + USERNAME.codeberg.page + + +I'm keeping this very basic, but I suggest you look further into the [official documentation](https://docs.codeberg.org/codeberg-pages/#custom-domains) if there are any extra settings you'd like to tinker with. + +The final step is configuring a `CNAME` DNS setting through your registrar: + + + @ -> USERNAME.codeberg.page + + +Give the DNS settings a bit of time to take (24-48 hours) and you'll have your custom domain working just fine. + +Happy hosting! diff --git a/posts/better-box-shadows.md b/posts/better-box-shadows.md new file mode 100644 index 0000000..76d62cd --- /dev/null +++ b/posts/better-box-shadows.md @@ -0,0 +1,166 @@ +# Better Box Shadows + +2019-01-08 + +<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> + +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. + +Let's take a look at a default configuration of `box-shadow`: + + + .box-container { + box-shadow: 0 4px 8px rgba(0,0,0,0.3); + } + + +In the example above the first property number is the origin of the *x-axis*, the second number is the origin of the *y-axis* and the third is the amount of *blur*. + +We should also add some minimal styling to cleanup the `.box-container` a little bit for our example: + + + <div class="box-container"></div> + + + .box-container { + box-shadow: 0 4px 8px rgba(0,0,0,0.3); + /* Styles to make it less ugly */ + background: white; + border-radius: 10px; + border: 1px solid #eee; + height: 200px; + padding: 10px; + position: relative; + width: 250px; + } + + +Which would render as this: + + +<div class="box-container"></div> + + +Not bad - but we can do a lot better than this. + +## Please sir, I want some more (depth) + +We just need to add a simple child `div` (or use a `pseudo` element if you prefer) inside our main element we want to apply the shadow to: + + + <div class="box-container"> + <div class="box-container-inner"></div> + </div> + + +Now we make our inner child element `absolute` and set it's `height` and `width` dynamically to be slightly smaller than it's parent (percentages work best for this). + +Remember to set this child element behind it's parent by adding `z-index: -1`. + + + .box-container { + /* No box-shadow needed on this element anymore */ + /* Styles to make it less ugly */ + background: white; + border-radius: 10px; + border: 1px solid #eee; + height: 200px; + padding: 10px; + position: relative; + width: 250px; + } + + +## Inner Containers + +We also need to target the `box-container-inner` element set inside the current parent to reflect our custom shadow styling: + + + .box-container-inner { + bottom: 0; + /* The box-shadow is added here now */ + box-shadow: 0 4px 12px rgba(0,0,0,0.3); + height: 94%; + left: 3%; + position: absolute; + width: 94%; + z-index: -1; + } + + +Which will make the drop-shadow render with a little more realistic depth: + + +<div class="box-container-depth"><span class="box-container-depth-inner"></span></div> + + + +## But wait - there's more! + +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 - `filter:blur();`. + +So your final code would look like this: + + + .box-container { + /* Styles to make it less ugly */ + 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; + } + + +Which renders out into a much smoother blend of a drop-shadow, creating a more realistic illusion of depth: + + +<div class="box-container-depth"> + <span class="box-container-depth-inner blur"></span> +</div> + + diff --git a/posts/bidirectional-scrolling.md b/posts/bidirectional-scrolling.md new file mode 100644 index 0000000..019c331 --- /dev/null +++ b/posts/bidirectional-scrolling.md @@ -0,0 +1,37 @@ +# Bidirectional Scrolling: Why Not Both? + +2020-11-09 + +*I recently came across Adam Silver's post [about the merits and pitfalls of bidirectional scrolling](https://adamsilver.io/articles/bidirectional-scrolling-whats-not-to-like/)* 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. + +## The Premise + +The original article argues that displaying page content via horizontal scrolling (and therefore slightly hiding interactive content) creates a few major issues: + +- it increases the chance users won't see it +- there's a greater reliance on digital literacy +- it's generally more labour intensive for users + +Adam also makes a solid statement here: + +> Having to scroll down and across in a zig zag fashion can be tiresome, especially for people with motor impairments. + +But I don't believe these issues create a need to completely remove the horizontal "scrolling" design altogether. You can still implement the `See All Items` category link, while allowing the horizontal content to load in *dynamically*. Balance is always key. + +## Not All At Once, Please! + +So what exactly do I mean by *dynamically* loading in horizontal content? + +- The user is shown the top 4 items in a given category +- From there, the user can use the `See All Items` link to jump into a full category page +- If they so desire, they can begin scroll horizontally in a given category row + - Once they reach the end of the row, 4 more items will load in automatically to expand the list + - 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 `View All Items` in that category. + +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). + +## Final Improvements + +Below you can find a quick, static version of this concept. Here you can see the horizontal list items, along with their corresponding `See All Items` 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) + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/pobxpXz) diff --git a/posts/browser-history-sucks.md b/posts/browser-history-sucks.md new file mode 100644 index 0000000..24c3715 --- /dev/null +++ b/posts/browser-history-sucks.md @@ -0,0 +1,70 @@ +# Browser History Sucks + +2019-04-20 + +*Have you ever needed to step back through your browser history* to find a particular site or product? Do you remember that experience being good? Most likely not. + + +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. + +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. + +## What browsers get wrong + +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: + +- "That article had *something* to do with CSS..." +- "I remember seeing a beautifully designed site a month ago but have no clue what the URL was..." +- "My browser crashed and I can't recall that [example website] I had pinned in my tab for weeks..." + +For reference, let's take a look at the current Chrome (73) history view: + + + +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. + +## Why not use extensions? + +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 *inside* the history view? If an extension can add these features, why not have those extras built-in? + +## Two subtle improvements + +A little goes a long way. With just two small changes, we can drastically increase the history view's UX. + +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. + + + +The second small functional change we can make is including extra subcategories. These new options allow users to focus their searches based on: + +- Session length +- Number of return visits +- Last restored tabs + +### Session length + + + +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: + +- longest to shortest +- shortest to longest +- pinned tabs + +### Return visits + + + +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. + +### Last restored tabs + + + +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. + +## Far from perfect + +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. + +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. diff --git a/posts/character-unit.md b/posts/character-unit.md new file mode 100644 index 0000000..b88ad45 --- /dev/null +++ b/posts/character-unit.md @@ -0,0 +1,43 @@ +# CSS Character Unit + +2019-04-23 + +*When it comes to proper readability with large portions of text*, the golden standard is to have no more than [75 characters per line](http://webtypography.net/2.1.2). 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. + +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 *better way*. + +## Introducing character units + +By setting your main containers or text elements with the CSS character unit (`ch`), you need to set the character length only once. Let's look at a simple example for reference. + +Let's say you have an article which will fill the entire length of the screen. Something like this: + + + <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> + + +With this structure, you might normally set the default `max-width` property with your desired maximum width (whatever you believe is the best reading length): + + + .container { + max-width: 38em; + } + + +This works - but it isn't ideal. Time for character units to save the day! You will still target the `max-width` property but this time we set it to use the `ch` value like so: + + + .container { + max-width: 66ch; + } + + +This setting makes sure content will not exceed more than 66 characters per line, making for a better reading experience with little effort. + +## Browser support + +The character unit attribute has pretty great support - even partial IE11! Check out the supported browsers [here](https://caniuse.com/#feat=ch-unit). + diff --git a/posts/chasing-performance.md b/posts/chasing-performance.md new file mode 100644 index 0000000..0171f11 --- /dev/null +++ b/posts/chasing-performance.md @@ -0,0 +1,247 @@ +# Chasing Performance + +2017-11-20 + +## Update + +This post is no longer relevant since this blog has been redesigned since. I'm keeping this article up as a point of reference. + +- - - + +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) + +Below I will breakdown the before & after statistics of my personal site and what changes I made in great detail. + +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. + +### Lighthouse Score - Homepage + +<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> + +<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> + +### Lighthouse Score - Article Page + +<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> + +<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> + +### Web Page Test - Homepage + +<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> + +<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> + +### Web Page Test - Article Page + +<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> + +<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> + +### Quick Look +Though my homepage only made some minor speed performance enhancements, my article post's initial load time was slimmed down by a **whopping 4.2 seconds!** That's pretty incredible and very noticeable from an end-user's perspective. + +### So - What Changed? + +Webfonts + +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. + + + body { + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif,"Sans Serif",Icons; + } + + +For reference, there are some things you should to look out for when using custom typefaces: + +- Readability and accessibility +- Possible extra overhead loading in a custom @font-face +- Try to avoid any <a href="https://css-tricks.com/fout-foit-foft/">FOUT, FOIT, FOFT</a> +- Don't go down the rabbit hole of using 3rd party plugins to optimize something as basic as a typeface + +### Critical CSS + +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. + +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. + +### Critical JavaScript + +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. + + + <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver" defer> + + +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. + +### Responsive Images + +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: + +<span class="sidenote">I've also included responsive image sizes for further optimization based on screen size and loading speeds.</span> + + + <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> + + +What about users with JavaScript disabled I hear you ask? It's time for <code>noscript</code> to save the day: + + + <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> + + +### HTTPS & Caching + +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! + +Since my website is hosted through Github, setting up a *free* 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>. + +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! + + +## Performance Happiness + +Overall I'm pretty content with the **major** performance boost my site has received from these fairly *minor* 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! + +### Some Extra Reading Material + +- <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> +- <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> +- <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> + diff --git a/posts/cheap-portable-pi.md b/posts/cheap-portable-pi.md new file mode 100644 index 0000000..d8d4aeb --- /dev/null +++ b/posts/cheap-portable-pi.md @@ -0,0 +1,169 @@ +# Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal + +2020-09-16 + +*I recently came across [the incredibly cool design](https://n-o-d-e.net/zeroterminal3.html) for an "ultimate Raspberry Pi computer"* 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: + +- I wanted to keep the total cost as low as possible + - including the Pi Zero *and* extra hardware +- I wanted to avoid any custom casings or need for 3D printed materials +- I wanted to make the full design extremely portable / lightweight +- I wanted to keep the build as user-friendly as possible (no soldering, odd hacks etc.) + +With these constraints put in place, I built my very own Raspberry Pi Zero "hacker" terminal. You can see the finished product below: + + + + + +I'm pretty happy with the final outcome and best of all - you can easily recreate this yourself with little-to-no effort! + +So enough chit-chat - let's build this bad-boy! + +> **Note:** Most items in the hardware section are Amazon affiliate links + +## Table of Contents + +1. [Setting Expectations](#expectations) +2. [The Hardware](#hardware) +3. [The Software](#software) +4. [Getting Setup](#setup) +5. [Final Summary](#summary) + +<h2 id="expectations">Setting Expectations</h2> + +**This hardware will not** 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 *for fun*. + +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. + +Moving on for those still interested... + +<h2 id="hardware">The Hardware</h2> + +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. + +> **Note**: 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) + +- SBC: [Raspberry Pi Zero WH](https://amzn.to/3jCVXHG) +- Storage / OS: [64GB Micro SD Card](https://amzn.to/2GHm01R) (Always have an SD backup!) +- Battery HAT: [Li-ion Battery HAT](https://amzn.to/3jGq8xp) +- Battery: *This depends on your location. I was able to order [online through Walmart](https://www.walmart.ca/en/ip/Brand-New-4-Pcs-2500mAh-TR14500-3-7V-Rechargeable-Li-ion-Battery-for-Flashlight-Torch/PRD3Z73LMZZ3VK9), but if you live in the USA there are plenty of battery-specific vendors available. Find whatever works best for your needs!* +- Display: [KeDei 3.5-inch TFT Display](https://www.buyapi.ca/product/3-5-inch-raspberry-pi-tft-display/) +- Keyboard: [Mini USB Wireless Keyboard](https://amzn.to/2Gqkwt6) +- Adapter: [Micro USB OTG Cable](https://amzn.to/36I6T3c) + +#### Raspberry Pi Zero WH + +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) + +#### Li-Ion Battery HAT + +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. + +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. + +#### 3.5-inch TFT Display + +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. + +#### Micro USB OTG Adapter + +As mentioned above, this item is optional if you feel more comfortable with using a pure bluetooth keyboard. I just personally prefer this method. + +#### Wireless Keyboard + +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". + +<h2 id="software">The Software</h2> + +- Operating System: [Raspberry Pi OS Lite](https://www.raspberrypi.org/downloads/raspberry-pi-os/) +- Display Driver: [KeDei 3.5 Driver](http://kedei.net/raspberry/raspberry.html) +- Email: [Neomutt](https://github.com/LukeSmithxyz/mutt-wizard) (via Mutt Wizard) +- Web Browser: [Lynx](https://lynx.browser.org/) +- Text Editor: [Nano](https://www.nano-editor.org/) +- Code Editor: [Vim](https://www.vim.org/) + +<h2 id="setup">Getting Setup</h2> + +I will be setting up this "portable pi" via [headless installation](https://www.raspberrypi.org/documentation/configuration/wireless/headless.md) with my main [Raspberry Pi 4 desktop](https://uglyduck.ca/my-pi-desktop/). Included below are some quick instructions on how to setup the Raspberry Pi Zero for `ssh` access. + +#### Preparing the microSD card + +- Use Raspberry Pi Imager to write the Raspberry Pi Lite OS to your microSD card + - Once complete, remove the microSD storage device and then re-connect it +- Navigate to the `boot` folder of the microSD device - we will be adding 2 files here + - First add a completely empty file and name it `ssh` (no file extension) + - Next add an empty file named `wpa_supplicant.conf` +- Open the `wpa_supplicant.conf` file in a code / text editor and paste the following (be sure to change `country` to your proper country code, as well as properly setting your network name / password): + + + ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev + update_config=1 + country=US + + network={ + ssid="Your network name/SSID" + psk="Your WPA/WPA2 security key" + key_mgmt=WPA-PSK + } + + +- Unmount the microSD device, then place the microSD card in your RPi Zero +- 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 +- Turn on the battery HAT switch to power the RPi Zero. Give the device roughly 90 seconds to perform the initial boot + +> **Note**: the display will turn on but only show a white screen - this is normal + +#### Connecting to your Zero via SSH + +Open the terminal on your Raspberry Pi desktop and enter the following command: + + + ssh pi@raspberrypi.local + + +You will then be asked if you wish to trust this device (say yes), then prompted for the `pi` user's password - which is `raspberry`. After a moment you will be directly connected to your Raspberry Pi Zero. Hooray! + +We just want to make a couple small configuration changes before going forward (mostly for security): + +1. Run the command `sudo raspi-config` +2. Select "Change User Password" from the menu and change the password +  +3. After that, select "Network Options" and change your device name + - This will avoid any conflicts of connecting to newer RPi devices down the line + +That's it! + +#### Installing display driver + +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: + + wget http://kedei.net/raspberry/v6_1/LCD_show_v6_1_3.tar.gz + +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. + +Once the download has finished, extract the contents and navigate to the new directory and install the driver: + + + sudo tar xzf LCD_show_v6_1_3.tar.gz + cd LCD_show_v6_1_3 + sudo ./LCD35_v + + +Once completed, the RPi Zero will reboot and everything should work as expected! + +#### Installing software + +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: + +- Neomutt (emails) +- Lynx (quick and simple web browsing) +- Nano (writing notes / blog posts in a hurry) +- Vim (making any config edits or project work) + +<h2 id="summary">Final Summary</h2> + +There you have it - a terminal-based, portable Raspberry Pi Zero "hacker" device. + +Is it practical? Not really. Can it replace any other *portable* 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? + diff --git a/posts/chromebook-web-dev.md b/posts/chromebook-web-dev.md new file mode 100644 index 0000000..4d3214a --- /dev/null +++ b/posts/chromebook-web-dev.md @@ -0,0 +1,49 @@ +# Web Development on a $200 Chromebook + +2020-01-07 + +*This blog post was written, edited and tested locally* 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. + +First, we need to ask an important question: why use a Chromebook for web development? Maybe a better question might be: why not? + +## Mild interest turned into an experiment + +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: + +- Blazingly fast boot times +- Long lasting battery life (roughly 8 hours with consistent usage) +- Extremely cheap entry point for "low-end" devices +- And, more recently, support for Android & Linux apps + +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. + +**Side note:** *I wrote an article not to long ago about [blocking Google from my website](https://uglyduck.ca/stop-crawling-google/) 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* :) + +## My use case (YMMV) + +I ended up grabbing the [Acer 11 N7 Chromebook](https://amzn.to/2Xvx20q) 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. + +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. + +My Chromebook setup is as follows: + +- Linux Beta (ships with `git`, etc) +- Sublime Text (you can always use VSCode if you prefer) +- Terminal +- Local by Flywheel (local WordPress development) +- Figma in Chrome (UI design / mockups) + +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). + +## Can a $200 Chromebook be your next web dev machine? + +For me? Yes. For you? Maybe. + +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. + +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 [CloudReady](https://www.neverware.com/freedownload) to test on your current machine before pulling the trigger. + +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. + +For my current situation, all I need is my cheap little Chromebook. + diff --git a/posts/css-js-mistake.md b/posts/css-js-mistake.md new file mode 100644 index 0000000..c071998 --- /dev/null +++ b/posts/css-js-mistake.md @@ -0,0 +1,49 @@ +# A Reality Where CSS and JavaScript Don't Exist + +2021-11-03 + +*This is my personal opinion. Please leave your pitchforks at the door...* + +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. + +I like JavaScript. It serves it's purpose and makes complex functionality on the web easier to wrangle in and understand. + +*But I think both should have never come into existence*. + +### Heresey! + +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 *practice* what I preach? At least this personal website is JavaScript-free... (apart from a handful of CodePen examples embedded in some of the tutorials). + +### Moving On... + +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 *is* what I'm suggesting - at least, partially. + +### Consistent & Boring + +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 *real life*. + +My goodness what a *beautiful* reality that would be. Consistent, boring and wonderful. + +### "Wait - Aren't You a Designer?" + +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 *design* would cease to exist. + +**I would be okay with that**. If it meant the web as a whole was a better place - so be it. + +### A Look at the "New World" + +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: + +- Wealthsimple: [Current Website](https://www.wealthsimple.com/en-ca/) / [New Version](/etc/html-only/wealthsimple/) + +As you can see, all the *fluff* 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. + +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 *could have been* as well. + +Now, back to designing UIs for the web... + +## Refs + +1. Selected site based on my own personal preference +2. Referring to current users of the web + diff --git a/posts/css-slope-graphs.md b/posts/css-slope-graphs.md new file mode 100644 index 0000000..8c3ce3a --- /dev/null +++ b/posts/css-slope-graphs.md @@ -0,0 +1,229 @@ +# CSS Slope Graphs + +2021-06-07 + +*I am a huge sucker for simplistic and beautifully designed visual data on the web*. 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? + +## The Demo + +I'm basing this demo off the design patterns found in [Edward Tufte's visualization work](https://www.edwardtufte.com/tufte/books_vdqi), specifically his slope graph designs: + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/jOBzXMe) + +## The HTML + +For this concept we will actually be building this graph out of `tables` - crazy, right? The greatest benefit of rendering all the data inside of a `table` 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. + +(But more on that in the CSS section) + + + <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> + + +As you can see, nothing too fancy is happpening here. Pay close attention to the `data-set` and `data-name` variables though - those will be important for the CSS portion of this design, mainly the rendering of the line elements. + + + +## The CSS + +To avoid overwhelming your brain all-at-once, let's break the CSS down into bite-sized chunks, starting with the base styling: + + + @import url('https://opentype.netlify.com/et-book/index.css'); + * { + 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%; + } + + +Pretty basic stuff. + +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 `min-width` media query of `800px`. The rest of the CSS might look a little confusing but I assure you it is quite simple. + +1. On larger devices we hide the first `thead tr th` element with `display: none` +2. The first and second `td` elements inside each `tbody` row need to be set as `position: absolute` to avoid duplicate content +3. The inner `span` that we include in our HTML inside the second `tbody tr td` also needs to be `display: none` +4. Remember that `data-set` variable? We now use that for our `:before` pseudo element for `table tbody tr td:nth-of-type(1)` +5. Remember that `data-name` variable? We now use that for our `:before` pseudo element for `table tbody tr td:nth-of-type(3)` +6. After that, you can see the simple customization we include to render the angle / position of the slope lines and the corresponding labels + + + @media(min-width:800px) { + table { + display: block; + position: relative; + margin-bottom: 25rem; + } + + 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; + } + + /* 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%; + } + } + + +All that's left are some minor styles to make everything look nice on mobile: + + + @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; + } + } + + +## Not the most practical +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. + +But it was fun to mess around with and create, so who cares! diff --git a/posts/css-variables.md b/posts/css-variables.md new file mode 100644 index 0000000..dff8f13 --- /dev/null +++ b/posts/css-variables.md @@ -0,0 +1,45 @@ +# CSS Variables + +2018-03-24 + +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 *right now*. + +### Getting started is easy + +Let's just jump right in - this is how you create variables in vanilla CSS: + + + :root { + --base-color: #e0e0e0; + --text-color: #111; + } + + +We are using the `:root` 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. + +As for the variables themselves, you declare that they are variables using the `--` tags, followed by the variable's name and it's property. Pretty simple stuff, right? + +Now let's use those variables: + + + .header { + border: 1px solid var(--base-color); + } + + .main-container { + background-color: var(--base-color); + color: var(--text-color); + } + + +That's it! It's also good to know that CSS variables have pretty decent [browser support](https://caniuse.com/#feat=css-variables) (who likes IE11 anyway). + + +### Why not just use a preprocessor? + +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. + +Get out there and have fun with some variables! + + + diff --git a/posts/css-video-backgrounds.md b/posts/css-video-backgrounds.md new file mode 100644 index 0000000..d4a3123 --- /dev/null +++ b/posts/css-video-backgrounds.md @@ -0,0 +1,30 @@ +# CSS Video Backgrounds + +2018-04-16 + +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. + +Example: + + + .video-background { + background-image: url('path-to-video.mp4); + } + + +## See it in action + +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) + +<a href="https://codepen.io/bradleytaunt/pen/JLgrag/">CSS Video Background (Safari Only)</a> + +You can read up on all the new features implemented in 11.1 Safari here: + +[New WebKit Features in Safari 11.1](https://webkit.org/blog/8216/new-webkit-features-in-safari-11-1/) + + + + + + + diff --git a/posts/current-color.md b/posts/current-color.md new file mode 100644 index 0000000..bb9fe99 --- /dev/null +++ b/posts/current-color.md @@ -0,0 +1,38 @@ +# CSS Value: `currentColor` + +2019-04-13 + +*There are a large number of nuanced and mostly unheard of* CSS value types, but today we are going to focus on `currentColor`. So what is the `currentColor` value type anyway? + +> The currentColor value type will apply the existing color value to other properties like background-color, etc. + +## See it in action + +Let's assume with have a single div with the following properties: + + + div { + color: dodgerblue; + } + + +If we wanted to use that same color for other properties on elements inside that initial `div`, it's simple - we just need to call `currentColor` like so: + + + div { + color: dodgerblue; + } + + div header { + background-color: currentColor; + } + + div a { + border-bottom: 1px solid currentColor; + } + + +**Sidenote**: If you re-declare the default `color` property further along in your CSS, the `currentColor` value will update according to the last color set. + +And that's it. Best of all, this value type is supported across all major browsers! + diff --git a/posts/cut-your-forms-in-half.md b/posts/cut-your-forms-in-half.md new file mode 100644 index 0000000..da82437 --- /dev/null +++ b/posts/cut-your-forms-in-half.md @@ -0,0 +1,41 @@ +# Cut Your Forms in Half + +2019-05-09 + +*Building web forms can sometimes feel like a boring or daunting task*. Don't pass this dread on to your users - rip out as many of your form fields as possible. + +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 **need** 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: + +> "How many form fields would you be willing to fill out for an emergency situation?" + +"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. + +## Fixing a form in the wild + +Let's use a real-world form off the [Great West Life Insurance](https://www.greatwestlife.com) website as an example (left is original, right is updated): + +<img src="/public/images/cut-forms.webp" alt="Great West Life form update"> + +### Breaking things down + +So what exactly have we changed? + +- Combined first and last name fields into a single input +- Removed the overkill "retype" email & password field (with the optional `show password` this becomes redundant) +- Minor position changes for optional subscription sign up and input field descriptions +- Removed `recovery email` + - This is something that should be prompted to the user after successful registration - don't bog them down before they even sign up + +## Helpful Micro improvements + +You don't need to be extreme when gutting form fields - just be practical. + +- Don't use "first" and "last" names as separate inputs, instead use something like "Full Name" +- Make complex questions use preset answers via `checkbox` or `radio` inputs +- Avoid `select` items whenever possible (these are clunky and most times unnecessary) +- Include easy to understand, real-time error prompts + +## Further reading + +- Great place to deep-dive into UX form design: [UX Movement](https://uxmovement.com/category/forms/) + diff --git a/posts/death-of-personality.md b/posts/death-of-personality.md new file mode 100644 index 0000000..07be682 --- /dev/null +++ b/posts/death-of-personality.md @@ -0,0 +1,86 @@ +# The Death of Personality + +2017-11-01 + +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. + + + +### Stepping backwards + +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. + +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> + +### Icons with no identity + +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. + +<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> + +Unfortunately the same can be said for Apple's system icons across both iOS and macOS. + +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. + +<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> + +### Lackluster UI + +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. + +<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> + +### Impact on the web + +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. + +<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> + +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. + +What we got in return: + +- washed out colors +- zero gradients for depth +- the removal of all drop shadows (in meaningful ways that is) +- the same generic Helvetica-based typefaces +- the absence of hover states on interactive elements +- a lack of any proper information density +- an overkill of whitespace +- one dimensional buttons (you know, the thing you <strong>want</strong> the user to interact with) +- a complete disregard for original design not based off every other popular product + +<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> + +### Breaking free of the 'modern era' + +Thankfully, there are still a few good designers who continue to create original and inspiring work not based solely on current trends. + +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. + + 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? + +<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> + +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. + +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>. diff --git a/posts/default-brower-forms.md b/posts/default-brower-forms.md new file mode 100644 index 0000000..804e656 --- /dev/null +++ b/posts/default-brower-forms.md @@ -0,0 +1,116 @@ +# Very Basic Form Styling + +2019-11-13 + +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: [Normform](https://normform.netlify.com/). 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. + +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. + +Let's check out an embedded demo below to see what some bare-bones form styling could look like: + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/oNwzvMa) + +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? + +## Breaking the form down + +Let's take a look at the HTML of the entire form: + + + <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"> + This option is a little bit better + </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"> + I would like to receive email notifications + </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> + +Notice the `fieldset` and `legend` elements? I bet you don't see or hear about those HTML items very often. By default, `fieldset` allows sibling or related inputs to be semantically grouped together. The `legend` 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. + +Avoid making your own custom sections and instead use these existing HTML semantics. + +## Almost no CSS at all + +Now it's time to style this form with only 6 property declarations: + + + 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; + } + + +Of course, you can always add minor adjustments (like in my demo example above) + +- Legend typeface and sizing +- Form and fieldset background colors +- Extra margin and padding +- Custom reset / submit buttons + +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. + +Just try not to reinvent the wheel. + +## Final rant - don't ignore the reset + +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. + +Happy form building! diff --git a/posts/default-html-style-updates.md b/posts/default-html-style-updates.md new file mode 100644 index 0000000..578628f --- /dev/null +++ b/posts/default-html-style-updates.md @@ -0,0 +1,93 @@ +# Modern Improvements for Default Browser Styles + +2021-11-09 + +This website *almost* exclusively uses the browser's (whichever one that might be) default styling to render it's HTML. I firmly believe, and have [stated in a previous post](/css-js-mistake/), 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 *good way*. + +But that doesn't mean some minor, modern improvements couldn't be made... + +## Boosting Margins and Increasing Font Size + +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 `margin` property set on the `body` element (I personally lean towards a very specific `1.5em`) and overriding the default `font-size` to `18px`[^1]: + + + body { + font-size:18px; + margin:1.5em; + } + + +There is one *small* caveat with setting the `font-size` across the whole `body` element: code elements set in `monospace`. 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: + + + code { + font-size:14px; + /* Word wrap is optional if you plan to have long inline code snippets */ + word-wrap:break-word; + } + + +## Code & Pre Tags + +Since we've mentioned `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 `overflow` 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: + + + pre { + overflow:auto; + } + + +## Basic Dark Mode Support + +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 `background-color`, along with resetting both the text and anchor link `color` 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: + + + /* Dark mode */ + @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;} + } + } + + +That is probably the most streamlined dark mode on the web... + +## The "Reading Length" Debate + +Proper reading length tends to be quite the point of contention on the web. Hell, even I've [written about it quite a bit](/character-unit/) in the past (and many of my side projects follow that standard). The main problem I have with this is lack of *user control*. 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 *still* believe it should come down to user preference. + +Do you want to know an incredible feature built into browsers? *Window resizing*. 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. + +## Conclusion + +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 *use* 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: + + + 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;} + } + } + + +## Refs + +1. `18px` seems to be the perfect sweet spot between "almost too large, yet not small enough to strain my eyes" +2. At the time of this article's publish date + diff --git a/posts/design-review-dropbox.md b/posts/design-review-dropbox.md new file mode 100644 index 0000000..0d3da25 --- /dev/null +++ b/posts/design-review-dropbox.md @@ -0,0 +1,127 @@ +# Unsolicited Design Review - Dropbox + +2017-10-10 + +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). + + + +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. + +So without anymore fluff - let's get into it. Please leave your bias at the door. + +## Purpose + +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>. + +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. + +<blockquote> + <p>We realized our brand needs to change</p> +</blockquote> + +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. + +<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> + +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? + +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. + +## Design Principles + +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: + +1. Good design is innovative +2. Good design makes a product useful +3. Good design is aesthetic +4. Good design makes a product understandable +5. Good design is unobtrusive +6. Good design is honest +7. Good design is long-lasting +8. Good design is thorough down to the last detail +9. Good design is environmentally friendly +10. Good design is as little design as possible + +<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><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><strong>3. Good design is aesthetic</strong>. See #1.</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><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><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><strong>7. Good design is long-lasting</strong>. See #1 & #3 again.</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><strong>9. Good design is environmentally friendly</strong>. Doesn't really apply here.</p> + +<p><strong>10. Good design is as little design as possible</strong>. This new brand system is incredibly over-designed.</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> + +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. + +<strong>Remember: a great design system should go completely unnoticed.</strong> + +## Accessibility + +Any persons with visual impairments need not apply. This design system is not built for you - seek shelter elsewhere. + +<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> + +<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> + +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. + +<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> + +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? + +<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> + +After running it through a color contrast accessibility checker: + +<figure> + <img src="/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp" alt="Dropbox Contrast"> + <figcaption>Multiple accessibility failures</figcaption> +</figure> + +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. + +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. + +<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> + +## Closing Thoughts + +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. + +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. + +### Personal Remarks + +<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> diff --git a/posts/disabling-comments-in-wordpress.md b/posts/disabling-comments-in-wordpress.md new file mode 100644 index 0000000..62ba779 --- /dev/null +++ b/posts/disabling-comments-in-wordpress.md @@ -0,0 +1,19 @@ +# Disabling Comments in WordPress + +2020-12-28 + +*I seem to come across a decent amount of clients* and users online that have a difficult time knowing how to disable comments for both future *and* previous blog posts. It isn’t the easiest for both use cases, so let’s break it down. + +## Back to the future + +Disabling comments on all *future* blog posts is fairly straightforward: + +<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> + +## But what about old posts? + +Have no fear - “Bulk Actions” are here to save the day! In order to retroactively disable comments on older posts, do the following: + +<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> + +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! diff --git a/posts/dts.md b/posts/dts.md new file mode 100644 index 0000000..59fef10 --- /dev/null +++ b/posts/dts.md @@ -0,0 +1,24 @@ +# Designers Need Thicker Skin + +2017-07-10 + +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. + +### Critique the critics + +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: + +<figure> + <img src="/public/images/eli-schiff-twitter.webp" alt="Eli's Tweet"> + <figcaption>Eli Schiff just telling it how it is.</figcaption> +</figure> + +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. + +But this isn’t the problem. + +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. + +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. + +Yeesh. diff --git a/posts/duckduckno.md b/posts/duckduckno.md new file mode 100644 index 0000000..e626ba1 --- /dev/null +++ b/posts/duckduckno.md @@ -0,0 +1,45 @@ +# Two Weeks with the DuckDuckGo Browser + +2022-05-17 + +After using the beta apps for the new DuckDuckGo browser for both macOS and iOS, I have returned to Safari. + +This switch back doesn't mean that these browsers are _bad_ 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. + +Let's break things down: + + +## The Good + +- Clean UI with a mix between Chrome and Safari +- The "Leave No Trace" fire button to purge data, cache and cookies +- Feels snappy and responsive +- Based on WebKit NOT Chromium + + +## The Not So Good + +- No sync options between systems (that I could find) +- No extension support + +Now you might look at this list and notice there are more listed points set under the `Good` 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 _assume_ you know best for your users. + +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. + +Overlooks like this shouldn't happen. This is UX 101. + +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] + + +## Closing Thoughts + +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. + +As it stands now, this feels like something that should be an extension[^2], not a standalone browser. + + +## Refs + +1. [https://sensible.com/dont-make-me-think/](https://sensible.com/dont-make-me-think/) +2. Technically this already exists as a Safari extension [here](https://apps.apple.com/us/app/duckduckgo-privacy-essentials/id1482920575?mt=12) + diff --git a/posts/dump.md b/posts/dump.md new file mode 100644 index 0000000..4a3dd13 --- /dev/null +++ b/posts/dump.md @@ -0,0 +1,110 @@ +# Don't Make a Blog, Make a Brain Dump + +2022-09-10 + +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. + +Okay, sorry about the terrible metaphors. But you get my point. *Convenience breeds laziness*. *Laziness breeds mediocrity*. + +## What's a "Brain Dump"? + +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]. + +Another problem arises when you finally *do* convince someone to start "blogging" online; self-doubt. + +- "What could I possibly have to share?" +- "What if everyone *hates* what I post?" +- "What if my content sucks?" + +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. + +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 *write* and be part of what made the internet fun, exciting and personal again. + +But let me reiterate: **stay away from walled gardens!** Control your own space on the internet. Be the master of your own brain dump! Say "screw you" to app algorithms and *trending* bullshit. Just be you. + +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. + +### No Code Solutions + +Before I get into my suggested options in this "no-code" category, I would like to mention why WordPress *is not* 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. + +That's not even mentioning hosting costs, installation, backups, etc. My personal take - just steer clear. This option is better suited in the *second* category for those with more web experience. + +With that out of the way, let's see my top selections for "no-code": + +#### Blot + +[Blot](https://blot.im/) has been around for quite a while. You simply post to a third-party service like Dropbox, Google Drive or a `git` repo and Blot takes care of the rest. + +- $4/month (includes custom domain use, hosting & support) +- Easy sign up +- Multiple themes to choose from + +#### Bear Blog + +[Bear Blog](https://bearblog.dev/) is an excellent platform that focuses on content and not much else. + +- Free ($25/year for extras) +- Easy sign up +- No trackers, no javascript, no ads + +#### Mataroa Blog + +[Mataroa](https://mataroa.blog/) follows in the same vein as Bear Blog, a simple blogging platform focused on *writing*. + +- Free (with optional $9/year for premium features) +- No ads, no tracking +- Open source + +#### Write.as + +[Write.as](https://write.as/) is another good option for those looking to just get words down and shared on the internet. + +- Free with optional paid tiers (custom domains, themes etc.) +- Option to self host via [Write Freely](https://writefreely.org/) + +### Build Your Own + +If you're deep into this section of the post, I think it's safe to assume your technical level is fairly *decent*. So, I won't be into great detail with the options below: + +#### SourceHut Pages + +This very website you're reading is built and run off of [SourceHut Pages](https://srht.site/). I highly recommend the service. + +- $3+/month (depending on what you *choose* to pay) +- No javascript, no trackers +- Customizable build settings +- Support open source software! + +**Sidenote:** If you're interested in setting up a SSG (such as Jekyll or Hugo) through SourceHut, feel free to [fork this very website as a starting point](https://git.sr.ht/~bt/bt.ht). I also wrote up how to publish/build a Jekyll site on SourceHut in a [separate post](/srht) if you wish to see all the nitty-gritty details. + +#### WordPress + +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. + +- Free options (custom domains, premium features will require some form of paid hosting) +- Room for growth with extensive plugins / themes +- Huge amount of documentation and resources + +#### Static HTML and a Web Host + +Why not, right? Using a service like [NearlyFreeSpeech](https://www.nearlyfreespeech.net/) or spinning up a cheap VPS with [DigitalOcean](https://www.digitalocean.com/) 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! + +- $2-5/month (depending on service provider) +- "Drag-and-drop" workflow +- Easily portable to other hosting services in the future + +#### GitHub Pages + +Since GitHub is used by almost every developer across the globe, it makes sense to mention their free website hosting option via [GitHub Pages](https://pages.github.com/). I personally *don't* advise newcomers to use this platform, but you're free to do as you like! + +- "Free" +- Fairly limited (no static site plugin support) + +## Wrapping Up + +There are many services in both categories above that I did not include. That's okay. I didn't exclude them because I *dislike* them but instead focused on what *I believe* to be the easiest solutions for both camps (techies and non-techies). + +At the end of the day - who cares what you choose. Just choose *something*. Stop looking at it as "blogging" or trying to "capture an audience". Dump your brain's thoughts out into the internet, on your *own piece* of the internet, and help make the world wide web as fun as it used to be! + +[^1]: Facebook, Twitter, Reddit, Instagram, etc. These should be completely avoided for the sake of both your health and your internet freedom.
\ No newline at end of file diff --git a/posts/dv.md b/posts/dv.md new file mode 100644 index 0000000..476cdf9 --- /dev/null +++ b/posts/dv.md @@ -0,0 +1,49 @@ +# Dynamic Viewports with CSS + +2023-02-08 + +I think it's safe to assume most web designers and developers are familiar with the standard `vh` and `vw` 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: + +If I want my `.box` element to take up the entire height of a device's screen: + + + .box { + height: 100vh; + } + + +Or I want my `.box` element to take up the entire width of a device's screen: + + + .box { + width: 100vw; + } + + +These are wonderful options to have - specifically for those of us designing web applications. But there are some *minor* issues with `vh` and `vw`. + +1. The setting does not take into account device-specific UI (status bars, toolbars, search fields etc.) +2. In some instances these will not play nice with `box-sizing` properties + +## Have No Fear, Dynamic Viewport is Here! + +Lucky for us there exists an awesome *new-ish* CSS API called dynamic viewport-percentage units: `dvh` & `dvw`. They are defined as follows: + +> 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. + +So our examples above would translate into: + + + .box { + height: 100dvh; + width: 100dvw; + } + + +### What About Browser Support? + +[Can I Use Stats](https://caniuse.com/mdn-api_css_dvh) / ~67.17% coverage. + +**Note:** Even though the caniuse page states that Firefox 109+ and iOS Safari 16.3 do not support `dvh`, in my experiments they do. I'm not sure what testing was done for those two browsers, so YMMV. + +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.
\ No newline at end of file diff --git a/posts/dwm-gnome.md b/posts/dwm-gnome.md new file mode 100644 index 0000000..7b5ecee --- /dev/null +++ b/posts/dwm-gnome.md @@ -0,0 +1,35 @@ +# Bringing dwm Shortcuts to GNOME + +2023-11-02 + +The `dwm` 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 `dwm` shortcuts. + +For reference, I'm running GNOME 45.0 on Ubuntu 23.10 + +## Setting Up Fixed Workspaces + +When I use `dwm` I tend to have a hard-set amount of `tags` 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 `fixed`. We can achieve this by opening **Settings** > **Multitasking** and selecting "Fixed number of workspaces". + +<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> + +## Setting Our Keybindings + +Now all that is left is to mimic `dwm` 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 **Settings** > **Keyboard** > **View and Customize Shortcuts** > **Navigation**. + +You'll want to make edits to both the "Switch to workspace *n*" and "Move window to workspace *n*". + +<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> + +<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> + +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! + diff --git a/posts/dynamic-checkboxes.md b/posts/dynamic-checkboxes.md new file mode 100644 index 0000000..d1b63c6 --- /dev/null +++ b/posts/dynamic-checkboxes.md @@ -0,0 +1,411 @@ +# Dynamic Checkboxes + +2019-07-30 + +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. + +What if we could make everyday checkboxes more beautiful *and* more intuitive? *It's easier than you think*. We only need a small amount of CSS and JavaScript to make considerable improvements to your average checkbox UX. + +Let's get into it. + +## What we are building +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. + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/rXWEpy/) + +## The Structure (HTML) + +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): + + + <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> + 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> + 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> + + +### The checkbox inputs & labels + + + <!-- #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> + + </label> + + +1. This input will be hidden via `position:absolute` by default. All checkbox inputs need to share the same `name` value and all checkboxes require their our custom `id` that will link with the corresponding `for` value on the label. + +2. This label needs it's `for` value to correspond with it's partnered checkbox. + - 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 + +### The total cost container output + + + <!-- #1 --> + <div class="total-cost"> + + <h2>Your Plan</h2> + + <!-- #2 --> + <div> + + <!-- #2i --> + <span>$</span> + + <!-- #2ii --> + <span id="total-cost-inner">0</span> + + <!-- #2iii --> + <input id="output" type="text" value="0" disabled/> + + <!-- #2iv --> + <span>/mo</span> + + </div> + + </div> + + +1. A simple `div` with a class we can easily target later + +2. A `div` parent container is needed to house all the total `spans` together (more on this when we get into the CSS) + - i) The first `span` holds the static currency symbol + - ii) The second `span` is where our updated cost will be injected + - iii) This input field is required for us to take-in the `value` of the associated `:checked` inputs and add them together. This current value is then used for the injection into the second `span` + - iv) The final `span` simply holds the static monthly duration content + +All that's all we need for the HTML! + +## The Visuals (CSS) + +Again, lets take a look at the entire file before we break it down step-by-step: + + + .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:''; + height: 30px; + left: 20px; + position: absolute; + top: calc(50% - 15px); + transition: .3s ease background-color; + width: 30px; + } + .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>'); + } + .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('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; + } + + .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; + } + } + + +### The checkbox label + + + /* + 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; + 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); + } + + /* 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); + } + + +### The custom checkbox input + +We need to hide the browser's default checkbox input and replace it with our own using pseudo selectors. + + + /* Hide browser default input */ + .checkbox-btn { + position: absolute; + visibility: hidden; + } + + /* 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:''; + height: 30px; + left: 20px; + position: absolute; + top: calc(50% - 15px); + transition: .3s ease background-color; + width: 30px; + } + + /* + 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 + */ + .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>'); + } + + /* + 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>'); + border-color: mediumpurple; + } + + +### The total cost container + +We only need some very basic flexbox styling for our bottom "total" container: + + + .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; + } + + /* + This input is used in our JavaScript - look at the + function part of this post to understand why + */ + .total-cost input { + display: none; + } + + +### Last but not least - mobile + +Now we just ensure that on smaller devices our checkbox labels render nicely: + + + @media(max-width:480px) { + /* + Avoids the inner label content from squishing together + and becoming unreadable + */ + .checkbox-label { + align-items: flex-start; + flex-direction: column; + flex-wrap: wrap; + } + .checkbox-label span:last-child { + padding: 10px 0 0 0; + } + } + + +That's it for the styling! + +## The Function (JS) + +As you can see below, we only need a very minor amount of JavaScript to accomplish our total cost "injection". + + + window.onload=function(){ + + // 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++) { + + inputs[i].onchange = function() { + + // 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); + + // 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; + } + + } + } + + +That's it! Feel free to play with the demo some more at the top of the post, or check out the [CodePen source directly](https://codepen.io/bradleytaunt/pen/rXWEpy). diff --git a/posts/easy-custom-radio-inputs.md b/posts/easy-custom-radio-inputs.md new file mode 100644 index 0000000..abc6dbb --- /dev/null +++ b/posts/easy-custom-radio-inputs.md @@ -0,0 +1,224 @@ +# Easy Custom Radio Inputs + +2019-01-21 + +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 *pure CSS*, while still preserving performance and accessibility. + +## The Final Product + +This is what we will be designing: + + + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/oNjwMyX) + +- - - + +## The bones of our radio inputs (HTML) + + + <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> + + <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-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> + + +I know it looks like a lot is going on here, but it's pretty straightforward so let's unpackage line by line: + +### Radio inputs + + + <input class="radio-btn" name="radio-collection" id="radio-1" type="radio"> + + +This is the default `radio` input. We give it: + +- a `name` (inputs with a shared `name` are grouped together) +- an `id` (so our label can target this input) +- a `class` (so we can style it later) + +**Important**: be sure to have a unique `id` for each input so your labels don't end up connected to multiple radios. In this demo we are simply incrementing them by one. + +### Labels + +Adding the labels is fairly straightforward, we just include the corresponding input's `id` in the label's `for` attribute. The label content is wrapped in a `span` - which I will explain the reasoning for later. + +For styling purposes we also add the `radio-label` class. + + + <label class="radio-label" for="radio-1"><span>I am very satisfied</span></label> + + +This is looking pretty terrible - but that's nothing some good ol' CSS can't fix! + +## The flesh of our radio inputs (CSS) + +First we give some basic styling to our `label` and `input` classes (along with hover states). The `radio` element is actually hidden from view, but by using the `visibility` attribute we still keep it accessible for screen-readers. + + + .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; + /* This 65px padding makes room for the custom input */ + 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; + } + + +Remember that `span` element inside the label? We set it's `user-select` property to `none` so we avoid any possible issue with the user selecting the text on-click: + + + .radio-label span { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } + + +Next we include the default empty selection element (to mimic the original radio input) via a pseudo element: + + + .radio-label:before { + background: #eee; + border-radius: 50%; + content:''; + height: 30px; + left: 20px; + position: absolute; + /* 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; + } + + +## A Few Final Steps + +The final step is adding the custom styling for when an `input` item is selected (`:checked`). + +You will notice the use of a `base64` 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). + + + .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-repeat: no-repeat; + background-position: center; + background-size: 15px; + } + + +**And that's it.** + +For easier reference the entire CSS file can be found below: + + + .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:''; + 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('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+'); + background-repeat: no-repeat; + background-position: center; + background-size: 15px; + } + + +- - - + +## But wait - we can get even fancier! + +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: + +We can do so by adding `positive`, `neutral` and `negative` class names to the radio inputs with their own respective properties: + + + .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('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAtMTUgMzAgOC41NzE0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PCEtLUdlbmVyYXRlZCBieSBJSlNWRyAoaHR0cHM6Ly9naXRodWIuY29tL2ljb25qYXIvSUpTVkcpLS0+PHBhdGggZD0iTTMwLC0xMi4zMjE0djMuMjE0MjljMCwwLjczNjYwNyAtMC4yNjIyNzcsMS4zNjcxOSAtMC43ODY4MywxLjg5MTc0Yy0wLjUyNDU1NCwwLjUyNDU1NCAtMS4xNTUxMywwLjc4NjgzMSAtMS44OTE3NCwwLjc4NjgzMWgtMjQuNjQyOWMtMC43MzY2MDcsMCAtMS4zNjcxOSwtMC4yNjIyNzcgLTEuODkxNzQsLTAuNzg2ODMxYy0wLjUyNDU1MywtMC41MjQ1NTMgLTAuNzg2ODMsLTEuMTU1MTMgLTAuNzg2ODMsLTEuODkxNzR2LTMuMjE0MjljMCwtMC43MzY2MDcgMC4yNjIyNzcsLTEuMzY3MTkgMC43ODY4MywtMS44OTE3NGMwLjUyNDU1NCwtMC41MjQ1NTMgMS4xNTUxMywtMC43ODY4MyAxLjg5MTc0LC0wLjc4NjgzaDI0LjY0MjljMC43MzY2MDcsMCAxLjM2NzE5LDAuMjYyMjc3IDEuODkxNzQsMC43ODY4M2MwLjUyNDU1MywwLjUyNDU1NCAwLjc4NjgzLDEuMTU1MTMgMC43ODY4MywxLjg5MTc0WiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg=='); + } + .radio-btn.negative:checked + .radio-label { + background: #FFF2F2; + border-color: #E75153; + } + .radio-btn.negative:checked + .radio-label:before { + background-color: #E75153; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIxLjg1MTg1IC0zOS42OTcgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjwhLS1HZW5lcmF0ZWQgYnkgSUpTVkcgKGh0dHBzOi8vZ2l0aHViLmNvbS9pY29uamFyL0lKU1ZHKS0tPjxwYXRoIGQ9Ik0yMS43Mjk5LC0yMy40NzFjMCwwLjQ0NjQyOCAtMC4xNTYyNSwwLjgyNTg5MyAtMC40Njg3NSwxLjEzODM5bC0yLjI3Njc5LDIuMjc2NzljLTAuMzEyNSwwLjMxMjUgLTAuNjkxOTY0LDAuNDY4NzUgLTEuMTM4MzksMC40Njg3NWMtMC40NDY0MjgsMCAtMC44MjU4OTMsLTAuMTU2MjUgLTEuMTM4MzksLTAuNDY4NzVsLTQuOTIxODcsLTQuOTIxODhsLTQuOTIxODgsNC45MjE4OGMtMC4zMTI1LDAuMzEyNSAtMC42OTE5NjQsMC40Njg3NSAtMS4xMzgzOSwwLjQ2ODc1Yy0wLjQ0NjQyOCwwIC0wLjgyNTg5MiwtMC4xNTYyNSAtMS4xMzgzOSwtMC40Njg3NWwtMi4yNzY3OSwtMi4yNzY3OWMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY1IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI5IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsNC45MjE4OCwtNC45MjE4OGwtNC45MjE4OCwtNC45MjE4OGMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY0IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI4IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsMi4yNzY3OSwtMi4yNzY3OGMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI5LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsNC45MjE4OCw0LjkyMTg4bDQuOTIxODcsLTQuOTIxODhjMC4zMTI1LC0wLjMxMjUgMC42OTE5NjUsLTAuNDY4NzUgMS4xMzgzOSwtMC40Njg3NWMwLjQ0NjQyOSwwIDAuODI1ODkzLDAuMTU2MjUgMS4xMzgzOSwwLjQ2ODc1bDIuMjc2NzksMi4yNzY3OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjUgMC40Njg3NSwxLjEzODM5YzAsMC40NDY0MjkgLTAuMTU2MjUsMC44MjU4OTMgLTAuNDY4NzUsMS4xMzgzOWwtNC45MjE4OCw0LjkyMTg4bDQuOTIxODgsNC45MjE4OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjQgMC40Njg3NSwxLjEzODM5WiIgdHJhbnNmb3JtPSJzY2FsZSgxLjAwNTYxKSIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg=='); + } + + +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. diff --git a/posts/easy-toggle-switches.md b/posts/easy-toggle-switches.md new file mode 100644 index 0000000..f7b1235 --- /dev/null +++ b/posts/easy-toggle-switches.md @@ -0,0 +1,234 @@ +# Easy Toggle Switches + +2019-02-18 + +Sometimes there is a need to use toggle elements in-place of the default `checkbox` inputs. The problem is, I tend to see a lot of developers reaching for plugins or JavaScript components in order to implement these toggles. + +*This is overkill*. You can create your own custom `input` elements to mimic toggles perfectly with just a small amount of CSS. + +## What we will be building + + + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/bGgbajY) + +## The HTML + +The build structure for these toggles is really simple, we only need: + +- a parent container to hold all our corresponding elements +- a checkbox `input` element (which we will hide) +- an empty label designed to represent the slider +- a text label that references the `input` + + + /* 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> + + +And that's everything we need for the HTML. + +**ProTip:** Don't forget to increment both the `id` and `for` attributes when adding additional toggles. This seems like a no-brainer but it's overlooked more than you think. + +## The CSS + +To get things started we will add the styling to the `.toggle-switch` item directly (using `flexbox` in this demo for easier layout). + +**Sidenote**: 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>. + + + :root { + --primary-color: #4A90E2; + } + + .toggle-switch { + align-items: center; + display: flex; + font-size: 14px; + justify-content: center; + margin: 20px 0; + } + + +Next we will hide the default browser checkbox element since we won't be needing it: + + + .toggle-input { + position: absolute; + visibility: hidden; + z-index: -1; + } + + +Let's also add some base styling for the `label` containing the text corresponding to it's `input` sibling: + + + .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; + } + + +Now we target the `.toggle-slider` label and add the styling for the main slider base: + + + /* This is just the main slider base */ + .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; + } + + +We *could* include a separate element for the circle toggle switcher itself, but instead we will use the `:before` pseudo element: + + + .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:''; + height: 16px; + left: 2px; + position: absolute; + top: 2px; + transition: all ease .3s; + width: 16px; + } + + +### Interaction + +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 `input` state and updating the label text color: + + + .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' */ + left: calc(100% - 18px); + } + + .toggle-input:checked ~ .toggle-label { + color: var(--primary-color); + } + + +And because we already included the `transition` property on both the base slider and label text, everything animates nicely between state changes. + +## Final code + +To make things easier, you can find the HTML & CSS is their entirety below: + +### HTML + + + <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> + + +### The CSS + + + :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:''; + 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); + } + + +Enjoy your custom toggles! + + diff --git a/posts/eero.md b/posts/eero.md new file mode 100644 index 0000000..ba4f2f3 --- /dev/null +++ b/posts/eero.md @@ -0,0 +1,138 @@ +# Setting Up a Pi-hole Server with Eero + +2022-03-14 + +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. + +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). + +--- + +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. + +--- + +## Setting Up the Pi-hole Server + +Before we get into the step-by-step details, here are the required items you'll need: + +1. Raspberry Pi device (I recommend the Pi Zero for simplicity and low cost) +2. microSD card preloaded with [Raspberry Pi OS Lite](https://www.raspberrypi.com/software/operating-systems/) (having a desktop GUI is overkill for our use case) +3. micro USB to ethernet adapter (check your local Amazon) +4. Patience! + +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 `boot` folder, add an empty file simply called `ssh` (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: + + + country=US + ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev + update_config=1 + + network={ + ssid="WIFI_SSID" + scan_ssid=1 + psk="WIFI_PASSWORD" + key_mgmt=WPA-PSK + } + + +Save this file as `wpa_supplicant.conf` and add it to the `boot` directory as well. + +You can now safely eject the microSD card and place it into your Raspberry Pi. + +## Plug it in and Boot! + +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: + + + ssh pi@raspberrypi.local + + +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: `raspberry` + +**Important**: This is assuming you don't currently have any other Pi devices using this hostname parameter! + +Once you are connected directly to the Pi, it's best to check for updates: + + + sudo apt update + + +...and if updates are in fact available, install them via: + + + sudo apt upgrade + + +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: + + + sudo raspi-config + + +1. Edit Hostname: navigate to `System Settings` --> `Hostname` +2. Edit Password: navigate to `System Settings` --> `Password` + +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. + +## Installing Pi-hole + +This is the easy part: + + + curl -sSL https://install.pi-hole.net | bash + + +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. + +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. + +Once it's finished, shutdown the Pi safely by running: + + + sudo shutdown now + + +## Hardware Setup + +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) + +See the crude diagram below for visual reference: + +<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> + +- **Grey Wire**: Incoming internet connection from ISP +- **Blue Wire**: Ethernet cord connecting modem to gateway Eero +- **Red Wire**: Ethernet cord connecting secondary Eero port to Pi Zero + +That's all we need to do on the hardware side of things. + +## Configuring the Eero App + +With everything connected properly it's finally time to setup our custom DNS settings through Eero. + +1. Open the Eero app (iOS or Android) +2. Navigate to **Settings** > **Network Settings** > **DNS** +3. Select **Customized DNS** and enter both your saved IPv4 / IPv6 values +4. Eero will prompt you to reboot your network - do it + +Next we need to add your Pi-hole's address as an IPv4 reservation:[^2] + +1. In the Eero app, navigate to **Settings** > **Network Settings** > **Reservations & port forwarding** +2. Tap **Add a reservation** and include your Pi-hole's IP address + +After the system reboots everything *should* be working as intended! You can check by navigating to your Pi-hole IP address in your browser. + +## Closing Thoughts + +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! + +Best of luck blocking those pesky ads and trackers! + +## Refs + +1. You don't *have* to use your Eero gateway for this step (credit: [/u/RollMeAway83](https://old.reddit.com/user/RollMeAway83)) +2. Thanks to [u/YankeesIT](https://old.reddit.com/user/YankeesIT) for pointing out that this is required not *optional* diff --git a/posts/empty-table-cells.md b/posts/empty-table-cells.md new file mode 100644 index 0000000..aa2bfb3 --- /dev/null +++ b/posts/empty-table-cells.md @@ -0,0 +1,52 @@ +# Styling Empty Table Cells + +2019-07-17 + +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. + +## The easy `:empty` way + +The most popular way to target *any* empty element is by using - you guessed it - the `empty` pseudo-class. This pseudo-class is incredibly simple. You target an element's `empty` state that same way you would target `hover` or `active`: + + + table tr td:empty { + opacity: 0; + } + + +Check out the CodePen examples below for more advanced styling options: + +[Live CodePen Example 1](https://codepen.io/bradleytaunt/pen/EBBLEx/) + +You can also include additional pseudo elements to give the user more context about what the empty cells represent: + +[Live CodePen Example 2](https://codepen.io/bradleytaunt/pen/bPXqLa/) + +## More specific `empty-cells` property + +Although using the `:empty` 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 *just* table cells? + +Let's take a look at the `empty-cells` property: + + + table { + empty-cells: hide; + } + + +[Live CodePen Example 3](https://codepen.io/bradleytaunt/pen/XLLqOW/) + +Pros of using `empty-cells`: + +- Only one CSS property +- Targets the table elements specifically +- No need for custom styles since it simply *hides* empty cell borders + +Some downsides to using this property: + +- No styling customization +- Trickier to use pseudo-element helpers without invoking the `:empty` state + +## Pick your preference + +It doesn't matter semantically which option you decide to take when styling / hiding empty table cells. Using the `:empty` state gives you a lot more flexibility in terms of what you can target (full rows, columns etc), but using the `empty-cells` property let's you simply hide the cells and focus on more important items. diff --git a/posts/et-jekyll-theme.md b/posts/et-jekyll-theme.md new file mode 100644 index 0000000..0c31462 --- /dev/null +++ b/posts/et-jekyll-theme.md @@ -0,0 +1,11 @@ +# ET-Jekyll Theme + +2018-01-14 + +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>. + +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! + +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>. + +Enjoy ET-Jekyll! diff --git a/posts/fake-3d-elements-with-css.md b/posts/fake-3d-elements-with-css.md new file mode 100644 index 0000000..3e094ce --- /dev/null +++ b/posts/fake-3d-elements-with-css.md @@ -0,0 +1,87 @@ +# Faking 3D Elements with CSS + +2020-04-29 + +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. + +This is what I ended up creating: + + + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/VwvzKyb) + + +## The HTML + +Prepare for your mind to be blown: + + + <div class="main-orb"> + <div class="inner-orb"></div> + </div> + + +That's it - I wasn't kidding when I said we would use only 2 HTML elements. The `.main-orb` is the core shape (set to 400x400) and the `.inner-orb` is placed on top of it's parent at a slightly smaller size (360x360) - but more on that below in the CSS portion. + +## The CSS + +First we give the bigger orb element (`.main-orb`) the default styling needed to represent a 2D circle: + + + .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 */ + width: 400px; + } + + +Next, we include both `:before` and `:after` pseudo elements for our orb's drop shadow. You _could_ do this with a simple `box-shadow` property on the `.main-orb` itself, but I've explained in a previous post why [that's not the best approach](/blog/better-box-shadows.html). + + + /* Shared styling for both pseudo elements - Remember DRY */ + .main-orb:before, .main-orb:after { + border-radius: 200px 200px 9999px 9999px; + bottom: -10px; + content:''; + filter: blur(20px); + height: 40px; + position: absolute; + z-index: -1; + } + + /* Bigger, lighter shadow */ + .main-orb:before { + background: rgba(0,0,0,0.4); + left: 7.5%; + width: 85%; + } + + /* Smaller, darker shadow */ + .main-orb:after { + background: rgba(0,0,0,0.7); + left: 20%; + width: 60%; + } + + +With our main orb complete we can move on to the `.inner-orb` element to help bring slightly more depth to our floating ball of CSS: + + + .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; + } + +## Poor-man's 3D elements + +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. diff --git a/posts/fathom-analytics-netlify.md b/posts/fathom-analytics-netlify.md new file mode 100644 index 0000000..427388e --- /dev/null +++ b/posts/fathom-analytics-netlify.md @@ -0,0 +1,64 @@ +# Setting Up Fathom Analytics with Netlify + +2021-01-19 + +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> (*get a $10 credit using that link!*). + +You should research further into the company yourself if you're interested, but in a nutshell the Fathom platform provides: + +- GDPR, ePrivacy, PECR and CCPA compliance +- ad-blocker bypasses (in a good way -> zero impact on users) +- anonymous visitor stats +- software created by <a href="https://usefathom.com/about">indie developers</a> + +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 :) + +Enough chit-chat - let's breakdown how to setup Fathom on your own site hosted through Netlify! + +## Step 0: Assumptions + +I'm going into this tutorial with the assumption that you: + +1. Have an active <a href="https://usefathom.com/ref/DKHJVX">Fathom account</a> (or are at least trying the 7-day free trial) +2. Have a website already setup on <a href="https://netlify.com">Netlify (custom domain optional)</a> + +And that's all you need. + +## Step 1: Adding a Custom Domain (DNS Setup) + +Even though you have the option to use the `default` 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. + +1. Navigate to the Fathom **Settings** page in the bottom footer (must be logged in) +2. Select **Domains** from the sidebar +3. Enter your custom domain in the `Add a new custom domain` input +4. Select **Start Process** +5. Keep note of both the `CNAME` and `VALUE` (we will copy this in a moment) + +Open a new tab, and login to your Netlify account: + +1. From your `Team Overview` page, navigate to the top-level `Domains` page +2. Select the domain you plan to add Fathom to +3. Under **DNS settings** > **DNS records** select `Add New Record` +4. Select `CNAME` from the dropdown of available options +5. Paste the Fathom `CNAME` (from the steps above) into the **Name** input +6. Paste the Fathom `VALUE` (from the steps above) into the **Value** input +7. Click **Save** + +That's it for DNS setup! + +## Step 2: Adding Fathom Your Website + +Now that we will be using our own custom domain for the script, it's time to actually *add it* to our website. From the same Fathom **Settings** page as before: + +1. Navigate to the **Sites** page in the sidebar +2. Enter your custom domain in the `Add a new site` input and click **Get site code** +3. In the modal prompt, select your custom domain from the dropdown list (you'll see the script code change accordingly) +4. Copy the tracking code snippet and add it to all the pages you plan to track on your site +5. When ready, select **Verify site code** +6. If everything went correctly you should be done! + +## Step 3: Watch Those Live Stats! + +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! + + diff --git a/posts/february-updates.md b/posts/february-updates.md new file mode 100644 index 0000000..9a2e1e2 --- /dev/null +++ b/posts/february-updates.md @@ -0,0 +1,13 @@ +# February 2022 Update + +2022-02-23 + +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. + +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. + +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. + +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. + +See you on the other side! diff --git a/posts/first-letter.md b/posts/first-letter.md new file mode 100644 index 0000000..e1768d5 --- /dev/null +++ b/posts/first-letter.md @@ -0,0 +1,33 @@ +# First Letter Pseudo Element + +2019-05-03 + +In today's TypeTip we will be taking a look at the often overlooked `:first-letter` 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. + +## The HTML + +Like most pseudo elements, nothing has to change with your pre-existing HTML structure: + + + <article> + <p>It was a bright cold day in April, and the clocks were striking thirteen.</p> + </article> + + +## The CSS + +Here's where the magic happens: + + + p:first-letter { + color: orangered; + font-size: 250%; + } + + +## Live CodePen + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/gJYbev/) + + + diff --git a/posts/flexbox-bar-graphs.md b/posts/flexbox-bar-graphs.md new file mode 100644 index 0000000..5862d86 --- /dev/null +++ b/posts/flexbox-bar-graphs.md @@ -0,0 +1,304 @@ +# Pure CSS Bar Graphs with Graceful Mobile Fallbacks + +2020-12-08 + +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 *zero* Javascript. + +So in the end, this is what our bar graphs will look like on desktop: + +<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> + +And this is how it will look on smaller devices: + +<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> + +Let's get into the details! + +## The HTML + +The main "secret" of this project is that our graphs are constructed out of HTML *tables*. Now before you freak out - this is perfectly fine and works in our favor quite well. + +1. If the user has JS disabled --> they will still see our graphs +2. If the user has CSS disabled --> they will see a standard data table set + +All bases are covered! + + + <!-- 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> + + +Nothing crazy is happening here - just your standard HTML table structure. The one main thing to notice is the `--data-set` CSS variable placed inline on each data point. This will be important for our CSS to configure the individual bar graphs properly. + +## The CSS + +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: + +1. Baseline styling (mobile) +2. Desktop styling + +### Baseline + +Here we target just our table elements with the `data-id` of `flexbox-bar-graph`. This allows us to avoid worrying about adding classes or IDs and also avoids conflicts with other non-graph styled tables in our projects. + +The base `:root` element holds all of our bar graph colors. Change these as you see fit! + + + /* Bar Graph color variables */ + :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; + } + + +### Desktop + +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. + +- The `thead tr th:nth-child(x):before` elements create the square "legends" beside each individual data point heading +- The `tbody tr td:nth-of-type(x) span` elements are the bars themselves + + + @media(min-width: 1000px) { + [data-id="flexbox-bar-graph"] { + background: transparent; + display: block; + min-height: 400px; + padding: 0; + position: relative; + width: 100%; + } + + [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; + } + } + + +## Bonus Styling + +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: + +<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> + +The change in CSS is actually quite simple to pull this off - you just need to include the `data-layout` attribute on the table itself. + + + [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; + } + + +## That's All Folks! + +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! + +- Github: <a href="https://github.com/bradleytaunt/flexbox-bar-graphs">https://github.com/bradleytaunt/flexbox-bar-graphs</a> +- Live Demo: <a href="https://flexbox-bar-graphs.netlify.app/">https://flexbox-bar-graphs.netlify.app/</a> + diff --git a/posts/flexbox-grid.md b/posts/flexbox-grid.md new file mode 100644 index 0000000..9831826 --- /dev/null +++ b/posts/flexbox-grid.md @@ -0,0 +1,9 @@ +# Adaptable Flexbox Grid + +2018-11-22 + +You can use `flexbox` for many tricky layout "hacks" and implementing a grid layout is no different. + +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). + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/rQdLxv/) diff --git a/posts/form-ui-improvements.md b/posts/form-ui-improvements.md new file mode 100644 index 0000000..845b757 --- /dev/null +++ b/posts/form-ui-improvements.md @@ -0,0 +1,50 @@ +# Prescription Form UI Improvements + +2019-03-13 + +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 *bad* per se, but it could certainly be improved. + +## Current design of the prescription view + + + +As I stated, this design isn't horrible by any means, but right away we can notice some problems: + +- the layout causes the users' eyes to jump between left-to-right and top-to-bottom without good correlation +- title content and `next` buttons are centered, while dropdowns are presented as left-to-right +- anchor link coloring is inconsistent +- too much whitespace between interactive sections +- dropdown height overly large + +## Starting to make some changes + +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). + + + +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. + +The previous layout also had the `PD` 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 `PD` down into it's own row, grouping the unrelated tasks on the page separately. + +> 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. + +Finally we place the button actions in-line with the `PD` block since it previously ate up far more real estate than was necessary. + +## Adding some color + +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. + + + +## Finishing touches + +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. + +- make default select styling include depth and importance (this is the main action of the page afterall) +- round out harsh corner edges on elements +- set labels and row items with more pleasing backgrounds (while still maintaining contrast) +- give the `next` button visual importance (make it look like a real button) + + + +That's it! diff --git a/posts/future-os-google.md b/posts/future-os-google.md new file mode 100644 index 0000000..93b0fe0 --- /dev/null +++ b/posts/future-os-google.md @@ -0,0 +1,90 @@ +# Chrome OS Could Become the Future Leader of Computing + +2022-01-06 + +**FOSS Enthusiasts**: This article discusses the use of proprietary software and places it in a *positive* light. You have been warned. No angry emails please... + +- - - + +Google has created one of the best operating systems designed with the everyday user<sup>1</sup> in mind: [Chrome OS](https://www.google.com/chromebook/chrome-os/). 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. + +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! + +Let's take a quick look at other positive features worth mentioning: + +- Verified boot +- Sandboxed environment (similar to how Chrome tabs work) +- Automatic updates[^2] +- *Incredible* battery life (were talking 10+ hours with heavy usage) + +## My Personal Experience + +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. + +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. + +I decided to get my own Chrome OS device and snagged the [Lenovo 10e Chromebook Tablet](https://www.lenovo.com/ca/en/laptops/lenovo/student-chromebooks/Lenovo-10e-Chromebook-Tablet/p/82AM000EUS) (on sale). + +<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> + + +- 10.1" display (1920 x 1200) / 400 nits +- 4GB of RAM +- 32GB of eMMC storage +- Processor: MediaTek MT8183 Processor (2.00 GHz, 4 Cores, 1 MB Cache) + +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 *in the cloud*. (Let's take a moment to avoid vomiting in our collective mouths) + +Instead of using a few marketing buzz words, let me breakdown how I personally tailor Chrome OS to my needs as a designer / developer: + +1. [Daily Tasks](#daily-tasks) +2. [Programming](#programming) +3. [Design](#design) +4. [Gaming](#gaming) + +## Daily Tasks + +I feel like going into *great* 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. + +## Programming + +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 [Codespaces](https://github.com/features/codespaces). For those unfamiliar with the service, you are running your Github repo in VSCode through the browser. It's pretty impressive. + +If you happen to be a user who uses GitLab or BitBucket to store your project files, [Gitpod](https://www.gitpod.io/) is a similar product to Codespaces (which I've used on occasion). This works if your prefer. + +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 [VSCodium](https://vscodium.com/) locally via Linux. + +## Design + +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]. + +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 [Photopea](https://www.photopea.com/) to keep everything working through the browser (if Linux isn't your cup of tea). + +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!) + +## Gaming + +There are other options (that we will get into) but the main gaming champion here is **Stadia**[^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 *wirelessly*. Now pair this with the portability of a Chromebook device and you've got yourself a beefier Nintendo Switch. + +You have solid secondary options like [GeForce Now](https://play.geforcenow.com/mall/#/layout/games) and [Microsoft's xCloud (beta)](https://www.xbox.com/en-CA/xbox-game-pass/cloud-gaming) 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. + +## Eye Rolling & Scoffing + +I can hear the screeching across the interwebs: "*Wait - this is Google! They are literally Satan in disguise! No one can use products from that evil mega corporation!*". And while I agree with the sentiment, I think going down this pure, 100% elitist approach to software *doesn't work* with the everyday casual user. Not to mention the large swath of developers/designers screaming "Google is bad!" while working off an *Apple* device... + +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. + +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. + +I have no crystal ball to see what the future of Chrome OS holds but it looks pretty promising to me. + + +## Refs + +1. "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) +2. These updates go unnoticed, compared to that of MacOS or Windows... +3. Your mileage may vary depending on how much RAM you have on your device +4. Although, Stadia's current game selection leaves a lot to be desired diff --git a/posts/gallery.md b/posts/gallery.md new file mode 100644 index 0000000..d069896 --- /dev/null +++ b/posts/gallery.md @@ -0,0 +1,84 @@ +# Simplifying the Craigslist Gallery + +2022-10-03 + +**This article was updated on October 11, 2022** + +I'm a big fan of [craigslist.org](https://craigslist.org) 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. + +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 `380kB` total) to render something as simple as a collection of images. This seems like overkill to me. + +<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> + +## Simplifying Things + +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: + +### HTML + + + <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> + + +Here we are placing the full-size gallery images directly inside a single `div.full-size` as - you guessed it - `img` elements. This already helps us avoid the pitfall of building out spaghetti `div` containers. + +Below this parent container we have another element, `div.thumbnails`, which will be used for our separate, smaller thumbnail versions of our main images. The most important items to note are the associated `ahref` elements surrounding each `img` element. By setting the `id` parameter on our thumbnails to match that of the `name` on our full-sized images, we can "scroll" the proper image into view without the need for JavaScript. + +Now for the *fancy* stuff - the CSS! + +### CSS + + + .gallery-wrapper { + position: relative; + } + .gallery-wrapper:before { + background: rgba(255,255,255,0.8); + content: "Scroll / 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; + } + + +Okay, so it isn't *that* 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 `display: flex`, even though it has a set width of `600px`. The included `scroll-snap-type: x mandatory` tells the browser to allow users to scroll/swipe horizontally through the parent container. + +The last important piece of this CSS is the `scroll-snap-align: start` added to the individual image elements. This parameter *snaps* the next image into the starting position of the parent container on scroll, giving a behavior users have come to expect from media galleries. + +You will also see the included `:before` pseudo element attached to the main `.gallery-wrapper` element. This isn't *required* but it certainly helps from a UX standpoint. + +## Live Demo + +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. + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/ExLRyXz) diff --git a/posts/git-patches.md b/posts/git-patches.md new file mode 100644 index 0000000..2618e6f --- /dev/null +++ b/posts/git-patches.md @@ -0,0 +1,27 @@ +# Applying Email-Based Git Patches in Evolution on Linux + +2023-04-25 + +Users who work with git patches through email most likely use a terminal-based program such as `aerc` or `mutt`. 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? + +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. + +## The Basics + +> **Note:** The following assumes you already have `git` installed and setup on your existing system. + +I find it best to first create a top-level folder on your system named `patches`. We will use this folder as a temporary location for reviewing any `git` patches submitted via email. I normally place this under `/home/<username>/patches`. + +Next, locate the email patch in Evolution and right-click on it. Select "Save as mbox..." and place this file inside your newly created `patches` folder. + +Now simply open your terminal, navigate to your project and run: + +``` +git am <path-to-patches-folder>/<patch-filename>.mbox +``` + +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. + +Done and done. + +Feel free to purge your `patches` folder regularly or keep them around for future reference if you prefer!
\ No newline at end of file diff --git a/posts/goodbye-css-preprocessors.md b/posts/goodbye-css-preprocessors.md new file mode 100644 index 0000000..6f64037 --- /dev/null +++ b/posts/goodbye-css-preprocessors.md @@ -0,0 +1,76 @@ +# Goodbye CSS Preprocessors + +2017-09-07 + +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. + +But that all changes moving forward. I'm going back to basics with CSS. Straight vanilla, man. + + + +## Why? And who cares? + +Let's start by breaking down the main positives about preprocessors: + +- Nested syntax +- Definable variables +- Advanced mathematical functions +- Reusable mixins + +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. + +## 1. Debugging is a chore + +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. + +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. + +Solution: Using plain CSS makes using browser dev tools a breeze. See a bug on line 255? No problem, let me fix line 255. + +## 2. Dependencies for development + +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. + +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). + +## 3. Variables & mixins become unwieldily + +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. + +Basic example: + + + selector, selectTwo, .css-class { + /* shared styling */ + } + + +## 4. Welcome to nesting hell + +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. + +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. + +Bad: + + + body #home .container .modal nav .inner-nav > ul > li > a { + color: red; + } + + +Good: + + + .inner-nav a { + color: red; + } + + +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. + +## Final thoughts + +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. + +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>. diff --git a/posts/hamburger-menu-alternative.md b/posts/hamburger-menu-alternative.md new file mode 100644 index 0000000..47af1a1 --- /dev/null +++ b/posts/hamburger-menu-alternative.md @@ -0,0 +1,119 @@ +# Using Hamburger Menus? Try Sausage Links + +2019-06-14 + +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. + +Before we get into the nitty-gritty details (and a simple demo) of the *sausage link* concept, let's take a quick look at the pros and cons of hamburger menus. + +## Hamburger Menus + +The concept of the [hamburger menu](https://codepen.io/search/pens?q=hamburger%20menu&page=1&order=popularity&depth=everything) isn't *horrible* 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. + +### The Good + +- Minimizes the amount visual space the menu requires +- Fairly commonplace now that a good portion of users understand it's functionality +- Makes the lives of designers easier by tucking all items away on mobile 😛 + +### The Bad + +- Requires extra testing/work to ensure the menu will play nice with screen readers and keyboard-only users +- Can get overly complex with the presence of children dropdown elements, help text etc. +- Adds bloat to projects that might require additional JavaScript to render these menus (CSS only hamburger menus avoid this issue) +- Adds an additional point of interaction from the user (click to open, then proceed to read through available options) + +As you can see, the bad points listed above aren't *that* 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 **sausage links**. + +## Sausage Links + +I should start by mentioning that this concept is far from **new**. 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. + +Enough chit-chat, let's take a look at sausage links in action: + + + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/QXjjbE/) + +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: + + + <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 */ + .sausage-links:before, .sausage-links:after { + content: ''; + 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; + } + + /* Basic flexbox to prevent items from breaking lines */ + .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; + } + + +Pretty simple, eh? + +**Update**: Thanks to [@dany0w](https://twitter.com/dany0w) for pointing out that I forgot to include `-webkit-overflow-scrolling: touch` for momentum scrolling on iOS. + +### The Good + +- Extremely minimal amount of CSS required +- Screen reader / keyboard-only safe +- Zero JavaScript needed +- No need for hacky hidden `radio` inputs for toggling parent containers etc. +- Users can see first few available options without any interaction + +### The Bad + +- May not look the most visually appealing for certain project designs (ugly scrollbar in some instances) +- Better suited for small to medium menu lists compared to massive sitemaps +- Without proper fade / cut off visual cues, users may not understand they can scroll + +## So, should I use hamburger menus or sausage links? + +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! + +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! + +<small>...is anyone else really hungry now?</small> diff --git a/posts/hamburgers.md b/posts/hamburgers.md new file mode 100644 index 0000000..ef788c8 --- /dev/null +++ b/posts/hamburgers.md @@ -0,0 +1,37 @@ +# Stop Using Hamburger Menus (Sometimes) + +2023-05-05 + +I recently [tooted about my hatred of website hamburger menus](https://fosstodon.org/@tdarb/110264983268249599) which was met with a surprising amount of support from other users. It seems like most people *don't actually like hamburger menus*. 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? + +## The Core Problem with Hamburger Menus + +The biggest headache when coming across these menus on the web is the complete disregard for **accessibility**. 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. + +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. + +## "But I Have No Choice!" + +I see this argument pop-up frequently when taking to design leaders or developers. I call bullshit on this excuse. You *absolutely* 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. + +## Best Alternative: Sitemap Footer + +So instead of just whining about hamburger menus, I will actually offer up a solid replacement: **sitemap footers**. 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. + +That's it. There is nothing else you need to do for this to *just work*. 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. + +**Pros:** + +- Keyboard navigation accessible +- Excellent screen-reader support +- Works on all devices/screens by default (no media queries!) +- Stays out of the way until called upon (UX goodness) +- Requires ZERO CSS or JavaScript + +**Cons:** + +- Footer can become large with many links (although I *really* don't see this as a big deal) + +## No Excuse + +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 *least* we can do is improve something as simple as website navigation... diff --git a/posts/heif.md b/posts/heif.md new file mode 100644 index 0000000..50f6847 --- /dev/null +++ b/posts/heif.md @@ -0,0 +1,43 @@ +# Converting HEIF Images with macOS Automator + +2023-07-21 + +Often times when you save or export photos from iOS to iCloud they often render themselves into `heif` or `heic` 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? + +Not so fast! Wouldn't it be much cleaner if we could simply right-click our `heif` or `heic` files and convert them directly in Finder? Well, I've got some good news for you... + +## Basic Requirements + +1. You will need to have [Homebrew](https://homebrew.sh) installed +2. You will need to install the `libheif` package through Homebrew: `brew install libheif` + +## Creating our custom Automator script + +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. + +1. Open the macOS Automator from the Applications folder +2. Select `Quick Option` from the first prompt +3. Set "Workflow receives current" to `image files` +4. Set the label "in" to `Finder` +5. From the left pane, select "Library > Utilities" +6. From the presented choices in the next pane, drag and drop `Run Shell Script` into the far right pane +7. Set the area "Pass input" to `as arguments` +8. Enter the following code below as your script and type `⌘-S` to save (name it something like "Convert HEIC/HEIF to JPG") + + + for f in "$@" + do + /opt/homebrew/bin/heif-convert "$f" "${f%.*}.jpg" + done + + +## Making Edits + +If you ever have the need to edit this script (for example, changing the default format to `png`), you will need to navigate to your `~/Library/Services` folder and open your custom heif Quick Action in the Automator application. + +Simple as that. Happy converting! + +If you're interested, I also have some other Automator scripts available: + +- [Batch Converting Images to webp with macOS Automator](/batch-webp-conversion/) +- [Convert Files to HTML with macOS Automator Quick Actions](/macos-convert-to-html/) diff --git a/posts/hello-jekyll.md b/posts/hello-jekyll.md new file mode 100644 index 0000000..da57fc3 --- /dev/null +++ b/posts/hello-jekyll.md @@ -0,0 +1,29 @@ +# Goodbye WordPress, Hello Jekyll (Again) + +2020-08-13 + +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 *why* I made the transition back, but I'll leave some cliff-notes for any interested parties. + +## The big issues with *my* WordPress setup + +I have to state that these problems existed based on *my own* setup / hosting choices with WordPress - this is not a direct reflection of WP itself. + +1. **No theme editor access** + - 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 `header.php` or `functions.php` files directly in the theme editor. Having to resort to FTP for simple one-line change was annoying. +2. **Super cache** + - 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 `header.php` file directly in order to persist (see problem with editing these files in point #1). +3. **Monthly cost** + - 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. +4. **Future proofing** + - 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. + +## What I lost in the switch + +1. **Comments** + - 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 [Commento](https://commento.io/) or [Gitment](https://github.com/imsun/gitment) +2. **Blog anywhere** + - 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. + +## Moving forward + +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. diff --git a/posts/html-dark-mode.md b/posts/html-dark-mode.md new file mode 100644 index 0000000..224699f --- /dev/null +++ b/posts/html-dark-mode.md @@ -0,0 +1,30 @@ +# HTML Dark Mode + +2023-04-11 + +I wrote an article back in 2021 called [The Lazy Developer's Dark +Mode](https://bt.ht/lazy-dev-dark-mode/) where I explained how to implement +a very basic "dark mode" by using the `prefers-color-scheme` CSS attribute. +This stills works perfectly fine, and in fact there is a cleaner variation of +this created by *jacksonchen666*: [These 3 Lines of CSS Will Give You Dark Mode for Free](https://jacksonchen666.com/posts/2023-04-09/13-47-16/). + +But today I wanted to show how to add dark mode functionality to a website +without *any CSS at all*. + +``` +<meta name="color-scheme" content="dark light"> +``` + +Add that line inside the `head` tags on your HTML files and you're good to go. + +## Minor Caveat + +I mentioned this same issue on the official [barf blog +post](https://barf.bt.ht/dark-mode/) 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 [hacky solution](https://bt.ht/safari-default-dark-mode/). + +Hopefully this helps others to add dark mode to their existing websites and +projects with minimal effort! + diff --git a/posts/html-like-1999.md b/posts/html-like-1999.md new file mode 100644 index 0000000..96c02f4 --- /dev/null +++ b/posts/html-like-1999.md @@ -0,0 +1,64 @@ +# Write HTML Like It's 1999 + +2019-06-06 + +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. + +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 `tables` are coded with `table` elements. Navigations are coded with `nav` and ordered/unordered list-items. Form inputs are not set with `display: none` and replaced with custom containers. You know, *semantic* HTML. + +To be clear, I'm not advocating for creating projects that *look* like they belong in the 1990s. I would just prefer developers / designers be more conscious of their HTML *skeleton*. + +## Bad HTML practices + +Let's do a very simple breakdown of some of the more common HTML no-nos: + +<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> + +## Good HTML practices + +So what should you do in place of these bad HTML implementations? + +<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> + +## My basic "structure" test + +I've found a pretty simple starting point for testing the *bones of a website* by using the following single line of CSS: + + + * { + border: 2px dotted black; + } + + +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 *ugly* your structure might be under the hood. + +## "Thanks, Captain Obvious!" + +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. + +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. + +## Update to this article + +Since this post received [so much more attention](https://news.ycombinator.com/item?id=20133817) than I ever expected, I've decided to touch on a few small points brought up in the comments. + +1. **What is the benefit of semantic HTML?** + - 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. + +2. **Tables not being responsive** + - 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 `flexbox` etc. (You can see responsive tables in action [here](/responsive-tables)) + +3. **Instead of the CSS one-liner, simply use Firefox debugger** + - Fair point. Firefox is great! diff --git a/posts/html5-validator-badge.md b/posts/html5-validator-badge.md new file mode 100644 index 0000000..a0da5e2 --- /dev/null +++ b/posts/html5-validator-badge.md @@ -0,0 +1,43 @@ +# Using HTML Validator Badges Again + +2019-07-05 + +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 **still** 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. + +## Getting the flaws out of the way + +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". + +Jukka Korpela's post way back in 2003, [HTML validation is a good tool but just a tool](http://jkorpela.fi/html/validation.html), 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. + +Some negatives used to dismiss HTML badges: + +- **The badge system is outdated** + - 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. +- **HTML5 doesn't *require* validation** + - Technically *no subset of HTML* 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. +- **Validation is too formal** + - 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. +- **Websites / web apps are just *too complex* to follow the W3C guidelines** + - I call *BS* on this argument. The complexity of a website should have nothing to do with keeping semantic standards. *This is your job.* +- **It only exists to catch syntax errors** + - 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. + +## "Nobody puts *badges* in a corner" + +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. + +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 *verteran* 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. + +## Open source HTML5 badge + +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 `SVG` and `PNG` versions of a badge based off the current W3C designs. You can check out the Github repo: [HTML5 Valid Badge](https://github.com/bradleytaunt/html5-valid-badge) + +If you decide to use these badges, be sure to link these images to your valid passing URL ([html5.validator.nu](https://html5.validator.nu)). You can see an example of the link in the footer of this website. + +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! + +## Refs + +<sup id="1">1</sup> [Interview with Mike Smith](http://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/): "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." + diff --git a/posts/improving-githubs-new-design.md b/posts/improving-githubs-new-design.md new file mode 100644 index 0000000..dd9074d --- /dev/null +++ b/posts/improving-githubs-new-design.md @@ -0,0 +1,83 @@ +# Improving Github's New Design + +2020-07-07 + +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. + +_Sigh._ + +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. + +So, enough chit-chat. Let's get into it. + +## Current Design (2020) + +The default view for a repo's homepage and ticket items are locked at a set `max-width`. 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 - **let me use all the space available to me**! + +<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> + +<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> + +## My Improvements + +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 _instantly_ read-up on the project details. (This design is catered towards left-to-right readers mind you). + +We now also utilize all the available screen space, dependent on the user's browser window size. + +<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> + +We make similar updates to the ticket item view and also remove the out-of-place `margin-bottom` from the project link headers. + +<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> + +## Try It Yourself! + +You can very easily implement these custom CSS changes with an extension for the browser of your choice: + + * Firefox: [Stylus](https://addons.mozilla.org/en-US/firefox/addon/styl-us/) + * Chrome: [Stylebot](https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha) + +Then create a new custom CSS file to target `github.com` with the following properties: + + + .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 > 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%; + } + + +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. diff --git a/posts/improving-receipt-ux.md b/posts/improving-receipt-ux.md new file mode 100644 index 0000000..e138444 --- /dev/null +++ b/posts/improving-receipt-ux.md @@ -0,0 +1,40 @@ +# Improving Receipt UX + +2019-05-15 + +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. + +## What was the redesign exaclty? + +Overall [Susie Lu](https://twitter.com/datatoviz?lang=en) did a wonderful job tackling such an old and forgotten design. She fixed some major pain points with the current receipt layout: + +- Bubble chart to visually indicate total spent per category +- Categorized items by percentage of total spent +- List individual items in descending order based on cost +- Bar charts to compliment the item listing order + +Curious how her redesign looks? [Take a look at the original article](https://www.fastcompany.com/90347782/the-humble-receipt-gets-a-brilliant-redesign) + +## What did this concept get wrong? + +Simply put: **paper waste**. + +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. + +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. + +## Receipt Redesign + +Let's take a look at my redesign concept: + +<img src="/public/images/receipt-update.webp" alt="Receipt Update"> + +With this layout we are able to keep all the key concepts that [Susie Lu](https://twitter.com/datatoviz?lang=en) initially introduced with her receipt design while preserving more space. + +- Categories are still listed by percentage of total spent +- Individual items are organized in descending order based on cost +- Uppercase and lowercase elements are used to distinguish parent / child items instead of additional space or dividers + +## Final thoughts + +The original redesign from a visual perspective is *wonderful* 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. diff --git a/posts/improving-tufte-jekyll.md b/posts/improving-tufte-jekyll.md new file mode 100644 index 0000000..d311dfd --- /dev/null +++ b/posts/improving-tufte-jekyll.md @@ -0,0 +1,89 @@ +# Improving Tufte CSS for Jekyll + +2019-11-01 + +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. + +## Introductions + +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 [ET-Jekyll](https://et-jekyll.netlify.com) (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. + +Feel free to read all the details on the design here: [ET-Jekyll theme details](https://et-jekyll.netlify.com/et-jekyll-theme/) + +## Minor Fixes One Year Later + +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: + +- Sidenote, marginnote and figure element restyling (flexbox) +- Table styling fixes (right alignment issues) +- Switch MathJax over to SVG embeds (performance fixes) +- Simplify HTML skeleton of main pages, remove overkill classes +- Remove lazysizes.js to save on load times +- Fallback on font-display for font loading +- Inline all CSS for faster initial paint +- Minor link :hover coloring (accessibility) +- Add missing image link on example page +- Update details post structure + +You can view all the updates in more detail [here](https://github.com/bradleytaunt/ET-Jekyll/commit/254f9e8f28764c9525ba7405bbbfa18a3867d241). + +**So what did this accomplish?** Let's break it down below. + +## First Contentful Paint & Input Delay + +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. + +<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> + +<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> + +## Fixing Render Blocking Items + +The original theme reported a few items that were slowing down the initial render for the end-users: + + +| URL | Size (KB) | Savings (ms) | +|-----|------|---------| +| /css/style.css | 2.0 | 150 | +| /lazysizes@4.0.1/lazysizes.js | 5.0 | 960 | +| MathJax.js?config=TeX-MML-AM_CHTML | 18.0 | 1,260 | + + +These items were resolved by: + +- Rendering all styling inline (therefore removing the extra HTTP request) +- Removing the lazysizes library altogether (browsers plan to support lazy loading natively in the future) + - The future plan is to integrate something like Cloudinary for out-of-the-box image processing +- Switch over MathJax to render equations as embedded SVGs (saves on bandwidth rendering an entire extra typeface) + +## Lighthouse Numbers + +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). + +#### Old Version + + +| Performance | Accessibility | Best Practices | SEO | +|---|---|---|---| +| 94 | 100 | 100 | 100 | + + +#### New Version + + +| Performance | Accessibility | Best Practices | SEO | +|---|---|---|---| +| 98 | 100 | 100 | 100 | + + +## Final Thoughts + +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. + +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! diff --git a/posts/introducing-notez.md b/posts/introducing-notez.md new file mode 100644 index 0000000..b6ade23 --- /dev/null +++ b/posts/introducing-notez.md @@ -0,0 +1,27 @@ +# Introducing Notez + +2021-01-13 + +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. + +Previously, I just created quick `notes.txt` 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). + +So I said the hell with it and built <a href="https://getnotez.netlify.app">Notez</a>. + +## What makes Notez special? + +Nothing, really. It's actually a pretty "stupid" app compared to others on the market. But this one is *mine*. Plus, it was fun to piece it together on a random evening before bed. + +For those curious, let's take a look at the feature list: + +- free and open source (<a href="https://github.com/bradleytaunt/notez">github.com/bradleytaunt/notez</a>) +- uses `localStorage` to keep changes persistent (helpful for browser crashes, etc) +- includes basic export functionality to download content as a simple `output.txt` file + +That's it. Mind blowing stuff, eh? + +## Making stuff is fun + +My main takeaway when building this tiny, dumb app was to just *enjoy building fun stuff*. 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. + +Hopefully you enjoy using it as well! diff --git a/posts/introducing-pageroast.md b/posts/introducing-pageroast.md new file mode 100644 index 0000000..22832d7 --- /dev/null +++ b/posts/introducing-pageroast.md @@ -0,0 +1,24 @@ +# Introducing PageRoast + +2021-03-11 + +Following up with my concept of releasing small side projects weekly, I have officially launched [PageRoast](https://pageroast.com). What is PageRoast I hear you ask? + +> Receive a detailed report analyzing your landing page with actionable items to improve your conversion rate. + +In simple terms that just means I will **roast your landing page**. Included in a page roast report is: + +- Fully detailed ABCD Framework report +- Proposed content & design changes +- Page performance audit + +And you get all of this for just **$100** (currently 50% until April 1st with coupon code PHROAST). Alright, enough with the "sales pitch" - why did I make this side project? + +From the main [launch blog post on PageRoast itself](https://pageroast.com/#2021-03-10-pageroast-has-launched) I wrote: + +> 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?" + +That's really all there is to it. If you would like to learn more, check out the following links: + +- [PageRoast main website](https://pageroast.com) +- [PageRoast official launch blog post](https://pageroast.com/#2021-03-10-pageroast-has-launched) diff --git a/posts/jekyll-sourcehut.md b/posts/jekyll-sourcehut.md new file mode 100644 index 0000000..8485324 --- /dev/null +++ b/posts/jekyll-sourcehut.md @@ -0,0 +1,96 @@ +# Hosting a Jekyll Site on Sourcehut + +2021-12-06 + +I recently decided to switch my personal, static site's hosting from Netlify to [sourcehut pages](https://srht.site). The process went *fairly* 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). + +But first, let me briefly explain why I made the switch in the first place... + +## Why sourcehut pages? + +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 [sourcehut.org](https://sourcehut.org): + +- Absolutely no tracking or advertising +- All features work without JavaScript +- Many features work without an account +- The fastest & lightest software forge +- 100% free and open source software + +After realizing all that, it's pretty difficult to stick with Netlify's *proprietary* stack... + +## Free but not *"free"* + +I should note that using sourcehut pages *does* 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. + +Keeping that in mind, let's get into setting up our static site! + +## Setting up your repo locally + +1. Create a new account on [sourcehut](https://sourcehut.org) (or log in to an existing one) +2. Setup your billing to contribute monthly (tier amount is up to you) +3. Create a new repo under the **git** section[^1] +4. Connect this repo locally (as you would via any other git host) +5. In this new local directory, place all your Jekyll files as you would with any other static hosting provider + +## The sourcehut build file + +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). + +To make things easier, you can copy the build file below (remember to use your *own* information for usernames, git repo naming etc): + + + 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 + tasks: + - install-bundler: | + sudo gem install bundler + - build: | + cd your-repo-name + bundle install + bundle exec jekyll build + - package: | + cd your-repo-name/_site + tar -cvz . > ../../site.tar.gz + - upload: | + acurl -f https://pages.sr.ht/publish/$site -Fcontent=@site.tar.gz + + +Save this file as `.build.yml` and place it in the root directory of your Jekyll source code. + +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 `https://yourusername.srht.site` (just give it a little bit of time to run the full build process) + +## Custom Domains + +If you're like me and want to use your own custom domain - have no fear! This process is actually quite easy. + +First, add a new A Record through your domain provider: + + + @ IN A 173.195.146.139 + + +Then change the following `environment` parameter inside your existing `.build.yml` file: + + + environment: + site: yourcustomdomain.com + + +And that's it - custom domain set! If you run into any issues check out the [official documentation on custom domains](https://srht.site/custom-domains). + +## Wrapping Up + +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 `git` workflows is essential to avoiding vendor lock-in. + +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. + +<hr data-content="footnotes"> + +[^1]: Thanks to [McSinyx](https://cnx.srht.site/) for pointing out that the repo used for creating your website can be named anything (instead of defaulting to your sourcehut username) diff --git a/posts/jekyll.md b/posts/jekyll.md new file mode 100644 index 0000000..d6e7093 --- /dev/null +++ b/posts/jekyll.md @@ -0,0 +1,96 @@ +# Setup Jekyll from Scratch on a New Linux System + +2022-09-19 + +**Special Note:** Credit needs to be given to user [Achraf JEDAY](https://stackoverflow.com/users/4974784/achraf-jeday) 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. + +I find myself constantly running into small issues when trying to setup existing Jekyll projects on new Linux systems. I *could* 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! + +## Figuring out Ruby First + +The first item of business is removing the default Ruby that ships with most Linux distros: + + + sudo apt-get remove ruby + + +Then we check for updates and install everything we need: + + + 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 + + +Now we can install `rbenv` and `ruby-build`: + + + curl -sL https://github.com/rbenv/rbenv-installer/raw/main/bin/rbenv-installer | bash - + + +After both of those install, you will want to add those to your system **PATH**: + +### Bash + + + echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc + echo 'eval "$(rbenv init -)"' >> ~/.bashrc + source ~/.bashrc + + +### ZSH + + + echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc + echo 'eval "$(rbenv init -)"' >> ~/.zshrc + source ~/.zshrc + + +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 `3.1.2`): + + + rbenv install 3.1.2 + rbenv global 3.1.2 + + +And `rehash` so our changes take: + + + rbenv rehash + + +Now you should see the properly set Ruby version when you run the following: + + + ruby -v + + +## Getting Ruby Gems + +In case you don't have it installed already, be sure to grab `rubygems`: + + + sudo apt install rubygems + + +## Running Jekyll + +We are almost done! Navigate to your Jekyll project's directory and run: + + + gem install jekyll bundler + bundle install + + +That's it! Now if you run `bundle exec jekyll serve` 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! + +## Alpine Linux on Wayland + +Save yourself a world of trouble: just use `docker`. The docker image below (jekyll-serve) works out-of-the-box: + +[https://github.com/BretFisher/jekyll-serve](https://github.com/BretFisher/jekyll-serve) + +Then run the following inside your project: + + + docker run -p 4000:4000 -v $(pwd):/site bretfisher/jekyll-serve + diff --git a/posts/jelly.md b/posts/jelly.md new file mode 100644 index 0000000..9ea0db5 --- /dev/null +++ b/posts/jelly.md @@ -0,0 +1,50 @@ +# Transferring Media from macOS to a Jellyfin Server (Raspberry Pi 4) + +2022-03-12 + +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. + +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. + +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. + +## SSH/SCP to the Rescue + +*Important*: before we begin, I should mention that this article assumes the following: + +- The files you plan to transfer from are on a macOS device +- You have setup Jellyfin on your Raspberry Pi device +- SSH is enabled and accessible on the Pi (across your local network) +- The Jellyfin server's hard drive is mounted in the root directory via something like `/mnt` + +Good? Moving on then... + +Open your terminal of choice and use the following command: + + + scp movie.mp4 pi_user_name@PI_IP_ADDRESS:/mnt/movies/movie.mp4 + + +1. `movie.mp4` is the file in the current macOS directory we plan to copy over +2. `pi_user_name` is the username you setup on your Raspberry Pi +3. `PI_IP_ADDRESS` is, of course, your Pi's IP address +4. The appended `:/mnt/movies/movie.mp4` is the directory your Jellyfin server uses to pull-in media + +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: + +## Converting Media Files with Ease + +This is where your new best friend `FFmpeg` comes into your life (if they weren't there already). + +- Download and install `FFmpeg` --> [ffmpeg.org/download.html](https://www.ffmpeg.org/download.html) + +Now navigate to the directory containing the media file you wish to convert via your Terminal and run the following command: + + + ffmpeg -i input.mp4 output.mkv + + +1. `input.mp4` is the initial file we wish to convert +2. `output.mkv` will be the name and file type of our converted media + +Now you can circle back and run the previous `scp` command once you have converted your files to the desired format. Hopefully Jellyfin doesn't complain about the formatting! diff --git a/posts/jsincss-parent-selector.md b/posts/jsincss-parent-selector.md new file mode 100644 index 0000000..f6176d8 --- /dev/null +++ b/posts/jsincss-parent-selector.md @@ -0,0 +1,77 @@ +# Using Parent Selectors in CSS + +2018-12-19 + +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 `parent` selector instantly peaked my interest. + +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: + + + var el = document.getElementById('custom-div'); + var parent = el.closest(selectors); + + +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. + +## 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> + +By using the `jsincss-parent-selector` and `qaffeine` plugins we can target an element's parent in CSS without breaking a sweat. Let's break it down: + +### Import the packages + + + npm install jsincss-parent-selector qaffeine + + +### HTML (ex. index.html) + +Now we add our very simple HTML skeleton: + + + <!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> + + +### JavaScript (ex. input.js) + + + const qaffeine = require('qaffeine') + const parent = require('jsincss-parent-selector') + + qaffeine( + { + stylesheet: {}, + rules: { + parent + } + }, + 'input.css', + 'output.js', + 'output.css' + ) + + +### CSS (ex. input.css) + + + header { + display: block; + } + main[--js-parent] { + background: blue; + } + + +Then simply run `node` against your `js` 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. diff --git a/posts/keynote-slides-css.md b/posts/keynote-slides-css.md new file mode 100644 index 0000000..a42fa48 --- /dev/null +++ b/posts/keynote-slides-css.md @@ -0,0 +1,97 @@ +# Keynote Slides with Pure CSS + +2020-06-22 + +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. + +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. + +This is what I came up with: + +## The Demo + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/jOWBJZb) + +Yes, I know this is _ugly_, but this was created as a barebones skeleton for others to build upon. The demo uses a simple set of `radio` inputs that correspond to their own individual `slide` element. The framework looks at the currently `checked` input, then changes the `opacity` and `z-index` of its corresponding slide item. Pretty straightforward stuff! + +Let's break down each piece: + +## The HTML + + + <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> + + +There isn't a whole lot going on here. We are just including a set of `radio` inputs (based on how many slides are desired) along with their corresponding `slide` 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! + +## The CSS (SCSS) + + + /* Basic default styles */ + .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; } + + /* 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 */ + .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; } + + +Again, not much to see here. We use CSS to look down through the DOM for each `radio` elements slide "partner". We do this by targeting the `nth-of-type` on both elements. Simple stuff. + +Some drawbacks to this approach: + +- You need to manually target each new slide you add (color, styling, content, etc.) +- Lack of animations might require extra work to implement (maybe 3rd party libraries- ke AOS?) +- Probably won't be best for extremely long/complex presentation slides + +That's it! Hope you enjoy playing around with it. diff --git a/posts/launching-thriftyname.md b/posts/launching-thriftyname.md new file mode 100644 index 0000000..0d18aba --- /dev/null +++ b/posts/launching-thriftyname.md @@ -0,0 +1,21 @@ +# ThriftyName: $5 Brand Names + +2021-02-25 + +It's been a while since I've written anything on this blog, but for good reason - **I've been working on a handful of side projects**. I plan to drip-feed release these projects over time, but for today I'm announcing [ThriftyName](https://thrifty.name). + +## What is ThriftyName? + +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 **just $10**. + +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 *love* to sit around wasting precious time thinking about product names, when they could use that time to *build their product*. + +## Learn More + +If you're really interested in the reasoning behind making this project, check out the [official about page on the site itself](https://thrifty.name/#about). I go into a little more depth about my thought process. + +## More Side Projects Incoming... + +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. + +Thanks for reading! diff --git a/posts/lazy-dev-dark-mode.md b/posts/lazy-dev-dark-mode.md new file mode 100644 index 0000000..58026b5 --- /dev/null +++ b/posts/lazy-dev-dark-mode.md @@ -0,0 +1,40 @@ +# The Lazy Developer's Dark Mode + +2021-04-12 + +After recently jumping back to Jekyll for my personal blog, I decided to take a closer look at how I was supporting `dark mode` 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. + +So I thought to myself, "There *has* to be a simpler way..." + +## Introducing Dark Mode - The Lazy Way + +Here is the default dark mode for my current website in all it's glory: + + + @media (prefers-color-scheme: dark) { + body{background:#2d2d2d;filter:invert(1);} + img,.cp_embed_wrapper,pre{filter:invert(1);} + } + + +Not much to look at, eh? Well, let's still break it down. + +First we set the `body` to use a nice dark background color (avoid using `#000000` directly since that can cause some minor eye strain). Next we tell the browser to invert all the child elements by using `filter:invert(1)`. At this point, you could consider your work done - but there are some edge case elements... + +## Images, CodePens & Code - Oh My! + +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 *don't* want to invert their color/text etc. All we need to do is run the filter property on these a second time (*after* the main `body` attribute): + + + @media (prefers-color-scheme: dark) { + img,.cp_embed_wrapper,pre{filter:invert(1);} + } + + +Of course, YMMV depending on what other custom elements you want to avoid inverting. + +## Minor Caveats + +I should mention that since my website doesn't use any custom coloring for anchor links, inverting `ahref` 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. + +That's it - enjoy being lazy! diff --git a/posts/learning-to-floss.md b/posts/learning-to-floss.md new file mode 100644 index 0000000..a1b5ed0 --- /dev/null +++ b/posts/learning-to-floss.md @@ -0,0 +1,40 @@ +# How to "FLOSS" as a Web Designer + +2020-02-07 + +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. + +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 *cost* associated with these products. + +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.). + +But what if a designer wanted to go completely <span class="help-text" title="Free/Libre and Open Source Software">FLOSS</span>? + +Below you will find my own personal list of FLOSS applications I use across design, development and simple document management: + +<h2 id="floss-apps">FLOSS Application Breakdown</h2> + +### Web Browsers +- Firefox [https://www.mozilla.org/en-CA/firefox/](https://www.mozilla.org/en-CA/firefox/) +- Brave [https://brave.com/](https://brave.com/) + +### Visual Design +- GIMP [https://www.gimp.org/](https://www.gimp.org/) +- Inkscape [https://inkscape.org/](https://inkscape.org/) +- Pencil [https://pencil.evolus.vn/](https://pencil.evolus.vn/) + +### Code / Text Editors +- Brackets [http://brackets.io/](http://brackets.io/) +- Visual Studio Code [https://github.com/Microsoft/vscode](https://github.com/Microsoft/vscode) +- Atom [https://atom.io/](https://atom.io/) + +### Terminal Shells +- Terminus [https://eugeny.github.io/terminus/](https://eugeny.github.io/terminus/) +- Hyper [https://hyper.is/](https://hyper.is/) + +### Documents +- LibreOffice [https://www.libreoffice.org/](https://www.libreoffice.org/) + +## Nothing special + +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. diff --git a/posts/lf.md b/posts/lf.md new file mode 100644 index 0000000..4451b91 --- /dev/null +++ b/posts/lf.md @@ -0,0 +1,37 @@ +# Installing Custom Fonts on Linux from the Command Line + +2022-09-20 + +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 *easy* for everyday users. Many newcomers tend to get frustrated with using the default "Fonts" application managers shipped with most Linux distros. + +But I'm here to tell you to **ditch** those GUI font installers. Let's install our custom fonts in the command line! + +## Get Your Font Files + +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 `LinuxFont`. We are going to assume that we have already downloaded and extracted a folder named `LinuxFont` into our `Downloads` directory. + +Inside this hypothetical folder is a collection of `OTF` (opentype) font files. This will be important information in a moment. + +## Terminal Time + +Now our goal is to simply copy this new typeface folder into our user font directory. Open Terminal and run the following from your `Downloads` directory: + + + sudo cp -r LinuxFont /usr/local/share/fonts/opentype/ + + +**Important**: If your font files are NOT opentype format, be sure to copy your files to the proper directory (truetype for TTF, etc.) + +Next we need to make sure we have full read and write privileges for this new folder: + + + sudo chmod -R 0777 /usr/local/share/fonts/opentype/LinuxFont + + +The last thing we need to do is reload the font cache on our system: + + + sudo fc-cache -fv + + +That's it! You should now have access to your custom typeface in all your applications system wide. diff --git a/posts/linux-love.md b/posts/linux-love.md new file mode 100644 index 0000000..8929af7 --- /dev/null +++ b/posts/linux-love.md @@ -0,0 +1,55 @@ +# The Linux Desktop is Hard to Love + +2022-07-14 + +I want to love the "Linux Desktop". I really do. But I've come to the realization that what I love is the *idea* 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! + +I just can't *stick with it*. I always end up back on macOS. And I'm starting to understand why. + +## What the Linux Desktop Gets Right + +To be fair, there is an incredible amount of things that the Linux desktop does really well: + +- Complete user control +- Ability to drastically change the desktop UI + - Gnome, KDE, XFCE, etc. +- Overall good and welcoming communities +- Extensive documentation for almost everything + +These things make Linux a solid experience overall - but not a *great* one... + +## What the Linux Desktop Gets Wrong + +If I had to summarize in a word what Linux lacks compared to macOS it would be: *cohesion*. + +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 *should* feel like. The argument can be made that macOS suffers some fragmentation with things like `homebrew`, applications directly from developers vs. applications via the Mac App Store. + +While this is true, I believe Linux desktops suffer far worse in terms of fragmented systems. Users building applications from source, `snap` packages, `flathub` 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. + +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. + +## User Experience + +Design is important. The user experience will make or break an operating system. This is another issue I've found with many Linux desktops. + +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. + +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. + +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 *only* printers and setting up their proper drivers on Linux. + +## Quality Hardware + +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. + +## I Still Use Linux + +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 *like* using Linux. + +I just don't *love* it. + +## Refs + +1. 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... +2. Depending on the desired distro, resources required, etc. +3. A couple that come to mind are Zorin OS and elementary OS
\ No newline at end of file diff --git a/posts/linux-mint-macbook-air.md b/posts/linux-mint-macbook-air.md new file mode 100644 index 0000000..ab187c1 --- /dev/null +++ b/posts/linux-mint-macbook-air.md @@ -0,0 +1,83 @@ +# Linux Mint MacBook Air Setup + +2020-08-16 + +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. + +**Important**: This setup will completely wipe your existing disk and create a fresh install of Linux Mint on the SSD. You have been warned. + +## The Specs + +My old MacBook Air has a pretty decent spec sheet: + +- Processor: **1.7GHz dual-core Intel Core i5** +- Memory: **4GB of 1333MHz DDR3** +- Graphics: **Advanced Intel HD Graphics 3000** +- SSD: **128 GB** + +And let's take a look at the basic system requirements Linux Mint suggests: + +- 2GB RAM +- Dual Core Processor +- 20GB free disk space + +We are looking pretty good! + +## Step 1: Download Linux Mint + +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: + +- [Linux Mint 20 "Ulyana" - Xfce](https://www.linuxmint.com/edition.php?id=283) [1.8GB] + +## Step 2: Flash Linux Mint to USB Stick + +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): + +- [Kootion 10 Pack 4GB Flash Drive 4gb USB 2.0 Flash Drives Keychain USB Drive Bulk Thumb Drive Swivel Memory Stick Black](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) + +- Download [Balena Etcher](https://www.balena.io/etcher/) for your current operating system +- Run the installer + +Once installed, open Etcher do the following: + +1. Select your downloaded Linux Mint ISO file +2. Select your USB stick/device as the media +3. Flash media +4. ??? +5. Profit!! + +## Step 3: Boot from USB + +- Make sure your Macbook Air is turned off +- Plug your newly flashed USB stick into the MacBook Air +- Turn on the MacBook Air +- Immediately hold down the **alt/option** button (keep holding until the prompt screen is visible) +- You will be shown drive "icons" - you want to select your USB drive (normally the far right icon) +- Press **Enter** +- Select the first item in the list that appears "Start Linux Mint" + +After this you will boot into a "live session" of the Linux Mint operating system. + +## Step 4: Installing Linux Mint + +Linux Mint makes it very easy for you to install it's OS step-by-step (similar to most other Linux distros). Simply **double-click** on the "Install Linux Mint" CD icon on the main desktop. + +- Choose your language. then hit **Continue** +- Select your preferred keyboard layout, then hit **Continue** +- *Optional*: You might be asked to connect to a WiFi network, if you are set it up now +- I would suggest downloading the multimedia codecs to make things easier, then hit **Continue** +- For installation type, select "Erase disk and install Linux Mint", then hit **Continue** + - WARNING: This will wipe your current drive completely - make sure you are okay with this! +- It will issue you with a warning prompt, simply click **Continue** +- Select your timezone, then hit **Continue** +- Enter your name, a username, a name for your computer, and set a password (you will use this to login moving forward) +- Wait for the installation to complete +- Once complete, you will be prompted to **reboot your system** +- After a reboot you will be prompted to remove the USB device and then press **Enter** +- Welcome to Linux Mint! + +## Conclusion + +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. + +Hopefully this inspires others to try "recycling" their older Apple products instead of tossing them away or having them collect dust. diff --git a/posts/load-image-on-click.md b/posts/load-image-on-click.md new file mode 100644 index 0000000..32dfd61 --- /dev/null +++ b/posts/load-image-on-click.md @@ -0,0 +1,58 @@ +# Click to Load Website Images + +2021-03-25 + +In my previous post about [switching my Jekyll blog over to PHPetite](https://uglyduck.ca/#2021-03-22-89-posts-one-file), I briefly mentioned how I only loaded in article images if the user *clicked or tapped* the empty file element. + +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. + +## Update + +As pointed out by Gabriel [in this Github issue](https://github.com/bradleytaunt/phpetite/issues/1), this concept breaks things slightly for RSS users. Since then, I have just set the default images on this blog to `display: none` and render them as `block` elements when their specific `section` is loaded into the DOM visibly. + +The example below is remaining the same as it was, to still provide context for this post. + +## Live Demo + +Before we jump head first into the details, let's take a look at what we will be creating: + +<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> + +Pretty neat, eh? Well let's get into the nitty gritty. + +## The Code + +Personally, I place everything into a `figure` element to keep things contained and clean - but this isn't required by any means. We then include our `img` and `figcaption` elements. That's it. + + + <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> + + +### The Image Element + +This is where the *magic* happens. By default all images will target the default placeholder image: `placeholder-image.webp`. This image is just 16KB in size and only needs to load in once. + +Next we include an inline `onclick` attribute, which targets the current image's `src` 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) + +Now when a user clicks on the placeholder image, the inline `onclick` pulls in the correct image in it's place. + +### Disabled JavaScript + +For users who have JavaScript blocked or disabled we have a decent backup. By including a direct link to the image URL in the `figcaption` element, we give the user the ability to still view the image in a separate browser tab. + +You could get extra fancy and include some `noscript` 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. + +## Cool - But Why Do This? + +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 *requires* them. Every little bit helps. diff --git a/posts/localwp-fedora.md b/posts/localwp-fedora.md new file mode 100644 index 0000000..c6f915d --- /dev/null +++ b/posts/localwp-fedora.md @@ -0,0 +1,17 @@ +# Fixing LocalWP on Fedora 32 + +2020-05-06 + +I recently upgraded from Fedora 31 to 32 and everything went very smoothly - except for one application: **LocalWP**. After the upgrade, all local WordPress builds would fail and complain about two missing packages: + +- libnettle6 +- libhogweed4 + +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: + +- libnettle6: [libnettle6-3.4.1-lp152.3.1.x86_64.rpm](https://pkgs.org/download/libnettle6) +- libhogweed4: [libhogweed4-3.4.1-lp152.3.1.x86_64.rpm](https://pkgs.org/download/libhogweed4) + +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. + +For reference, here is the Local Community ticket I created: [Local not working with Fedora 32](https://localwp.com/community/t/local-not-working-fedora-32-workstation-edition/19219) diff --git a/posts/loop.md b/posts/loop.md new file mode 100644 index 0000000..f0a5759 --- /dev/null +++ b/posts/loop.md @@ -0,0 +1,61 @@ +# Looping Through Jekyll Collections + +2022-08-12 + +I recently needed to add a couple new items to my wife's personal recipe website ([cookingwith.casa](https://cookingwith.casa)) which I hadn't touched in quite a while. The Jekyll build still worked fine, but I realized I was statically adding each `collection` by hand on the main homepage[^1]. + +Not so good. + +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! + +## Looping Our Collections + +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. + +Work smart not hard! + +Let's take a look at the bare-bones collections loop: + + + + {% for collection in site.collections %} + <!-- Our code goes here --> + {% endfor %} + + + +Then we need to include an `if` statement to avoid pulling in standard `post` items (or leave this in if that is desired): + + + {% for collection in site.collections %} + {% if collection.label != 'posts' %} + {% endif %} + {% endfor %} + + +Now for my specific use case, we want to display each collection label and then list its corresponding items below that label (see the `site[collection.label]` for reference) + + + {% for collection in site.collections %} + {% 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> + {% endfor %} + </ul> + <hr> + {% endif %} + {% endfor %} + + +That's it! Now if I plan to add any new collections down the line, I just need to include it in the `_config.yml` file and I'm set. The homepage will take care of the rest once rendered. + +Enjoy looping through your Jekyll collections! + + +## Refs + +1. Just the sections were statically rendered. All the recipes were pulled in dynamically - I'm not that insane! diff --git a/posts/luba.md b/posts/luba.md new file mode 100644 index 0000000..6e43eca --- /dev/null +++ b/posts/luba.md @@ -0,0 +1,83 @@ +# My Robotic Mower Woes + +2023-05-19 + +## A Brief Background + +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. + +<figure> + <img src="/public/images/mower-1.jpeg" alt="The Husqvarna 450X"> + <figcaption>The Husqvarna 450X (not mine but same model)</figcaption> +</figure> + +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 *not* so lucky... + +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 *turned off and unplugged from any outlet*. At least my mower was safe... + +## Shopping for Automower Parts + +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... + +I contacted my local dealer and he quoted me directly from the Husqvarna supplier: + +- Charging base station: $749 CDN +- Power adapter: $599 CDN +- Perimeter wire install: ~$550 CDN + +I thought the cost for both the charging station and the wire install seemed about right - but **$599** for a power adapter?! Are you kidding me? Best of all, these parts were on *back-order*. 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. + +## Husqvarna EPOS Mowers + +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. + +So I contacted my local dealer again about these specific units. I came away with some interesting information: + +1. They were quite expensive for my taste ($5000+ CDN - before install!) +2. They were *also* on back-order here in Canada + +*Sigh*. The mower gods were trying to tell me something. It seemed Husqvarna was just not meant for me anymore. + +## Luba to the Rescue! + +While researching "wireless" automowers, I came across the [Luba Series 5000](https://mammotion.com/?ref=bpjfzw7s) (referral link) and kept it in my "maybe" pile to follow-up on if needed. So follow-up I did. + +<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> + +This mower seemed to check all my boxes: + +- Decently priced +- 2-year warranty +- All wheel drive +- I could set it up myself +- No perimeter wires +- No-go zones available + +It did have a few minor cons associated with it: + +- Fairly new product / company +- No close dealer in my area +- iOS and Android apps are more or less "beta" + +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. + +## Arrival and Setup + +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. + +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. + +## The First Week + +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. + +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 *endurance* 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 *autonomous* device shouldn't require human intervention. + +## Moving Forward + +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... + +Hopefully this post helps others looking to snag their own robotic mower. So far, I can safely recommend Luba.
\ No newline at end of file diff --git a/posts/macos-convert-to-html.md b/posts/macos-convert-to-html.md new file mode 100644 index 0000000..78cc3d3 --- /dev/null +++ b/posts/macos-convert-to-html.md @@ -0,0 +1,113 @@ +# Convert Files to HTML with macOS Automator Quick Actions + +2022-01-28 + +Since a few people have reached out and thanked me for my previous post [Batch Converting Images to webp with macOS Automator](/batch-webp-conversion), I thought I would continue to share more of my own custom Automator Quick Actions. Today's post will cover the ability to convert *any* text-based document into pure HTML. + +I know - there are over 6 billion conversion apps that do this very same thing. But our way of doing it is *cooler*. Our conversion tool: + +- Will run directly inside macOS Finder (right-click actions FTW) +- Can batch convert multiple files at once +- Can convert mixed files types at the same time + +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! + +## The Dependencies + +Unfortunately, setting things up isn't as simple as clicking a single `Install` 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 - *trust me*. + +Our main requirements will consistent of the following: + +- Homebrew +- Pandoc +- Ability to open Terminal + +## Installing Homebrew + +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. + +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: + + + /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" + + +Let that finish and you're done! Also feel free to read more about Homebrew on the [official website](https://brew.sh). Knowledge is power! + +## Installing Pandoc + +The package that is going to be doing all the heavy-lifting for us is [pandoc](https://pandoc.org). Because we have Homebrew on our machine now, installing this package is as simple as opening our Terminal again and running: + + + brew install pandoc + + +Wait for everything to finish and you're done! + +## Our Custom Automator Quick Action + +Next you'll want to open the macOS Automator app and create a new "Quick Action" when given the prompt to do so. + +<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> + +Now do the following (reference the image further below to make sure your parameters match): + +1. Set "Workflow receives current" to <strong>documents</strong> in <strong>any application</strong> +2. In the search bar type in "Run Shell Script" +3. Drag-and-drop the "Run Shell Script" from the left pane into the right pane +4. Set the "Shell" parameter to <strong>/bin/bash</strong> +5. Set "Pass input" as <strong>as arguments</strong> + +Once all that is done, simply paste the following in the open text field within the "Run Shell Script" item: + + + for f in "$@" + do + /opt/homebrew/bin/pandoc -o "${f%.*}.html" "$f" + done + + +If you've done everything correctly it should look something like this: + +<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> + +Save this new Quick Action (Name is something like "Convert to HTML" to keep things simple). That's it! Amazing, right? + +## Time to Convert + +Now it is finally time to see our Quick Action is *action*! Navigate to any document file in a Finder window and follow along. + +1. First, right-click on the file you wish to convert. ([Figure 1](#fig-1)) +2. In the pop-up container, scroll down and hover over `Quick Actions`. +3. A secondary pop-out will appear. Look for the action `Convert File to HTML` and click it. ([Figure 2](#fig-2)) + +<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> + +<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> + +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! + +Don't forget - you can also *batch* convert multiple files and multiple file *types* at once. The possibilities are endless! + +<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> + +## No Limits + +Although this article has mainly focused on converting documents to HTML, `pandoc` 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! + +Have fun converting! diff --git a/posts/macos-icon-css.md b/posts/macos-icon-css.md new file mode 100644 index 0000000..e49d80e --- /dev/null +++ b/posts/macos-icon-css.md @@ -0,0 +1,270 @@ +# Create a Mac App Icon with Pure HTML and CSS + +2021-04-13 + +I have always been a huge fan of [Bogdan's work on Dribbble](https://dribbble.com/bg-d) 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. + +Don't care about reading through the tutorial? No problem! You can [jump right down to the live demo](#demo) + +## The Comparison + +Let's take a look at the original Dribbble shot: + +<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> + +And now let's see what we will be creating with only HTML & CSS: + +<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> + +Like I said - far from perfect but still a fun experiment! + +## The HTML + +Let's jump right in and build out the main skeleton of our project: + + + <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> + + + - The `white-square` element is the white, rounded square in the background + - The `blue-square` is the main blue square of the icon + - The `row` elements inside the `blue-square` will be our individual *lines* spread across the icon + - The `play-button` is obviously - the play button + + Right now it will look like nothing, but we can change that by adding the most important part... + +## The CSS + +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. + +### Defaults & the White Square + + + * { + 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; + } + + +See that `--row-distance` 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: + + + .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; + } + + +## Targeting the Inner Rows + +So far so good. The next part *looks* 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 `row` styling: + + + .blue-square .row { + display: flex; + height: 20px; + justify-content: space-between; + padding: 0 55px; + position: absolute; + width: 100%; + } + + +Now we style each individual row item via the `nth-of-type` attribute: + + + .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); + } + + +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 `margin-top` distance by using that `--row-distance` variable I mentioned earlier. The inner elements are then styled based on their placement inside the row (`nth-of-type`). + +### The Play Button + +Now we finish things off with a much simpler element to style: + + + .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:''; + 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: ''; + 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%); + } + + +Thanks to [meduz](https://m.nintendojo.fr/@meduz/106059826445460903) for pointing out the `backdrop-filter` property. This allows for a frosted glass look on Chromium & Safari (although sadly not on Firefox). The `triangle` element could also be improved by using an embedded `SVG` but I was determined to use only CSS for this experiment :P + +That's really all there is to it! You can see the embedded CodePen example below or [check it out directly here →](https://codepen.io/bradleytaunt/pen/bGgBRaV) + +--- + +### Special Thanks + +Thanks to Bogdan for letting me butcher the original Dribbble shot :D + +- [bg-d.net](http://bg-d.net/) +- [Bogdan on Dribbble](https://dribbble.com/bg-d) + +--- + +<h2 id="demo">Live Demo (CodePen)</h2> + +[Live CodePen Demo](https://codepen.io/bradleytaunt/pen/bGgBRaV) diff --git a/posts/mail.md b/posts/mail.md new file mode 100644 index 0000000..9a58f8e --- /dev/null +++ b/posts/mail.md @@ -0,0 +1,42 @@ +# Working with `git` Patches in Apple Mail + +2023-05-11 + +> **Before we begin**: You could likely automate this process in a more streamlined way, but for most use cases this workflow should be fine. + +I recently covered how to [work with git email patches in Evolution on Linux](/git-patches), 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. + +## Create a "Patches" Mailbox + +The first thing you'll need to do is make a new `Patches` mailbox folder inside your existing mail account. Once done, your default Mail sidebar should look similar to the following: + +<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> + +## Applying Patches + +Now navigate to the email message containing a `git` patch. Right-click and select *Move to* > *Patches*. Now in the sidebar, right-click your *Patches* folder and select *Export Mailbox...*. You'll be prompted to save this folder locally. I suggest having a top-level folder named **Patches** to make things consistent. + +Inside this folder you should see something similar to the following structure: + +<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> + +Once saved, open your terminal, navigate to the project you wish to apply this new patch to: + +``` +cd my-path/very-cool-project +``` + +and then run: + +``` +git apply ~/Patches/<saved-patches-mailbox-folder>/mbox +``` + +Congrats! You've successfully applied a git email patch through Apple Mail! Well, kind of. The terminal did most of the *real* work. Just be sure to periodically *purge* your local *Patches* folder to keep things clean! + diff --git a/posts/mango.md b/posts/mango.md new file mode 100644 index 0000000..f35299a --- /dev/null +++ b/posts/mango.md @@ -0,0 +1,85 @@ +# Replacing My Eero Mesh Network with Two Mangos + +2023-03-09 + +It has been one week since I retired my Eero mesh network setup and replaced it with two [Mango Mini Travel Routers (GL-MT300N-V2)](https://www.gl-inet.com/products/gl-mt300n-v2/). 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. + +Spoiler (in case the post title didn't give it away): I was pleasantly surprised. + +## Goodbye Amazon + +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. + +Then, in 2019 [they were acquired by Amazon](https://mashable.com/article/amazon-acquires-eero). Sigh... + +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. + +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. + +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 *default* for most other router hardware providers. + +So, I started to look at other options. + +## Why the Mango? + +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 *baseline*. 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. + +Luckily for me, the Mini Mangos were perfect for my basic requirements: + +- Max. 300Mbps Wi-Fi Speed (more than enough for my use-case) +- Running open-source software via [openwrt](https://openwrt.org/) +- Hardware VPN toggle +- Tiny physical footprint +- Extremely portable + +## Setting Up the Yellow Squares + +<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> + +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: + +1. Power up the first Mango +2. Connect laptop to the Mango via ethernet (you can also connect through wifi) +3. Follow the login instructions +4. Change SSID name, set device in router mode +5. Enjoy your internet! + +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". + +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 *was* a mesh network. Pretty neat stuff. + +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: + +- [adblock package](https://github.com/openwrt/packages/tree/master/net/adblock) + +## Performance Comparisons + +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. + +Stats for my original Eero mesh setup: + +- 1 eero 6 pro, 1 eero 6+, 1 eero beacon +- Average internet testing speed: 25Mbps +- Consistent signal throughout the house + +Stats for the new Mini Mango setup: + +- 2 mini mangos (one in router mode, the other set as repeater) +- Average internet testing speed: 25Mbps +- Consistent signal throughout the house + +## Extras + +Some additional data comparisons for those interested. Prices shown are in Canadian dollars. + +||Eero|Mango| +|-----|----|-----| +|**Power**|5W|2.75W| +|**Size** (mm)|139x139x55|58x58x22| +|**Bands** (GHz)|2.4/5|2.4| +|**Cost** (per unit)|$99+|$39| + +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.
\ No newline at end of file diff --git a/posts/menu-toggle-css.md b/posts/menu-toggle-css.md new file mode 100644 index 0000000..e08fd96 --- /dev/null +++ b/posts/menu-toggle-css.md @@ -0,0 +1,96 @@ +# Menu Toggle with Pure CSS + +2020-10-19 + +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! + +## Before we begin + +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: [Using Hamburger Menus? Try Sausage Links](/hamburger-menu-alternative.html) + +Now that we have mentioned possible pitfalls of relying so heavily on toggle menus, let's build one! + +## Our Final Product + + + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/mdEEvEX) + +## The HTML + +To implement this design you really don't need much in terms of HTML: + +- A single `checkbox` input +- A `label` that corresponds to the `checkbox` +- A `nav` element to house our unordered list items + + + <!-- 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> + + +That's it! + +## The CSS + +The first thing we need to do is "hide" the `checkbox` input element. It's important to avoid using `display: none` or `visibility: hidden` in order to achieve this. Those CSS properties can negatively impact accessibility (specifically screen readers). So we will be relying on the `position`, `z-index` and `opacity` properties to help us out. + + + /* Set the input position to absolute, send it off screen with zero opacity */ + input[type="checkbox"] { + left: -9999px; + opacity: 0; + position: absolute; + } + + +Then we give our corresponding `label` a minor face-lift to make it appear more button-like: + + + /* Minor visual styling to make the label more button-y */ + label { + border: 1px solid currentColor; + border-radius: 4px; + cursor: pointer; + padding: 10px; + } + + +For our main `nav` element, we want to set it's position to `absolute` in order to avoid any janky page rendering issues that might occur when toggling the menu: + +` + /* Set nav to absolute (avoids odd page rendering space pop-in) */ + nav { + opacity: 0; + position: absolute; + z-index: -2; + } + + +The last step is to actually *show* the menu if the user toggles the `checkbox`: + + + /* Show nav when checkbox is checked */ + input[type="checkbox"]:checked ~ nav { + opacity: 1; + z-index: 1; + } + + +It might not look like much, but you now have a fully functional menu toggle - **made with pure CSS**! + +## With Great Power... + +Although this design is very simple to implement, please remember to use these types of menus wisely. Just because you *can* do something, doesn't always mean you *should*. diff --git a/posts/mini-interactive-keyboard-with-pure-css.md b/posts/mini-interactive-keyboard-with-pure-css.md new file mode 100644 index 0000000..ac60d1b --- /dev/null +++ b/posts/mini-interactive-keyboard-with-pure-css.md @@ -0,0 +1,148 @@ +# Mini Interactive Keyboard with Pure CSS + +2020-05-13 + +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 [faking 3D elements](https://uglyduck.ca/fake-3d-elements-with-css/), I wanted to circle back around to an older CodePen I created: a mini, interactive undo keyboard. + +## See it in action + +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). + + + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/PadQMP) + +So now that we have seen what we plan to build, let's break down the process of creating this stupid, fun project! + +## The HTML + +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: + +- Keyboard base +- Command button +- 'Z' letter button + + + <!-- 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> + + <!-- "Z" Letter Button --> + <button class="z"> + <span>Z</span> + </button> + + </div> + + +## The CSS + +Here is where all the magic happens. Let's break these elements into their own sections, starting with the **base styling**: + + + /* Custom typeface */ + @import url("https://fonts.googleapis.com/css?family=Muli"); + + /* Basic layout styling */ + body { + background: #d2dcff; + margin: 80px 0 40px; + } + + +We then tackle the basic **keyboard base** element: + + + .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; + } + + /* 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: ''; + height: 50px; + left: 7.5%; + position: absolute; + width: 85%; + z-index: -1; + } + + +Next, we target all shared styles between the **2 keyboard buttons** to avoid repeating ourselves later on: + + + .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: 'Muli', 'Helvetica', sans-serif; + } + + /* 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; + } + + +All that remains is to add the custom styling for each independent button: + + + /* Custom Command styling */ + .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%; + } + + /* Custom "Z" Letter styling */ + .z { + width: 260px; + } + .z span { + color: #9f9f9f; + font-size: 150px; + } + + +## Taking it further + +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. diff --git a/posts/minimal-css-menu.md b/posts/minimal-css-menu.md new file mode 100644 index 0000000..a343e81 --- /dev/null +++ b/posts/minimal-css-menu.md @@ -0,0 +1,55 @@ +# Minimal CSS: Dropdown Menu + +2019-04-26 + +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. + +Interesting facts about our final CSS menu: + +- Total weight 121 bytes minified! (not including any resets etc.) +- No complex HTML structures +- Accessibility support + +Now to see the final code in all it's glory: + +### HTML + + + <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> + + +### CSS + + + /* resets - optional */ + ul { list-style: none; padding: 0; } + ul li { display: inline-block; position: relative; } + + /* minimal dropdown CSS */ + ul li > ul { + left: -9999px; + position: absolute; + visibility: hidden; + } + ul li:hover > ul, ul li:focus-within > ul { + left: 0; + visibility: visible; + } + + +## Live demo on CodePen + +Feel free to check out the live demo on CodePen [here](https://codepen.io/bradleytaunt/pen/MRLevy). diff --git a/posts/minor-website-changes.md b/posts/minor-website-changes.md new file mode 100644 index 0000000..3100192 --- /dev/null +++ b/posts/minor-website-changes.md @@ -0,0 +1,57 @@ +# Using a New Domain and Switching Static Hosts + +2021-11-25 + +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: [tdarb.org](https://tdarb.org). I'm a fickle person and this is a random change - but it is one I've been planning to do for some time. + +Let me give some minor background information and then get into the changes... + +## What about Ugly Duck? + +I had originally used the [uglyduck.ca](https://uglyduck.ca) domain for this personal blog as a *loosely* based reference to the "ugly duckling" story. This was based on the fact that I *mainly* 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. + +But overtime I came to somewhat dislike[^1] it and set out to change it. + +## So what the heck is "tdarb"? + +I explain this on my updated [about page](/about) but I will mention it again here: + +**tdarb**[^2] is simply my first name and last initial spelt backwards – Brad T. Mind blowing, right? + +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 *mylegalname.com*. I also am a sucker for `.org` TLDs (although I don't know why). + +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! + +## Breaking My Website for a Day and Fixing Potential Link Rot + +The transition I made yesterday from [uglyduck.ca](https://uglyduck.ca) to [tdarb.org](https://tdarb.org) was *rough*. 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! + +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 [uglyduck.ca](https://uglyduck.ca) back up on Netlify and set global redirect rules in their handy-dandy `_redirects` 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 `:splat` parameter in the redirects. + +As for my RSS feed, everything *should* 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... + +## From Github to Sourcehut + +That's right, I've switched this static site's hosting over to [sourcehut pages](https://srht.site) and couldn't be happier. My reasons for switching: + +1. I'm happy to pay and support the ongoing work at sourcehut (open source alternatives to Netlify, Github, etc. is important) +2. 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 +3. Sourcehut pages are fast - I mean *really* fast + +It *was* 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. + +## The Lifespan of uglyduck.ca + +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. + +## That's All Folks! + +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 [workstation on the "Things I Use" page](/uses). That's it. + + +## Refs + +1. not *hate* - just discontent +2. pronounced tee-darb +3. Namecheap support were very helpful - this was more of a limitation of what their redirects can do + diff --git a/posts/mongodb-arch.md b/posts/mongodb-arch.md new file mode 100644 index 0000000..45babac --- /dev/null +++ b/posts/mongodb-arch.md @@ -0,0 +1,44 @@ +# Installing Older Versions of MongoDB on Arch Linux + +2023-09-11 + +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. + +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. + +So I thought I would share my process of setting up an older version of MongoDB (3.4 to be precise) on Arch Linux. + +## AUR to the Rescue + +You will need to target the specific version of MongoDB using the very awesome AUR packages: + +``` +yay -S mongodb34-bin +``` + +Follow the instructions and you'll be good to go. Don't forget to create the `/data/db` directory and give it proper permissions: + +``` +mkdir -p /data/db/ +chmod -R 777 /date/db +``` + +## What About My "Tools"? + +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 `mongodb-tools` 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 *not* what we want. + +So, you'll have to build from source locally: + +``` +git clone https://github.com/mongodb/mongo-tools +cd mongodb-tools +./make build +``` + +Then you'll need to copy the built executables into the proper directory in order to use them from the terminal: + +``` +cp bin/* /usr/local/bin/ +``` + +And that's it! Now you can run `mongod` directly or use `systemctl` to enable it by default. Hopefully this helps anyone else curious about running older (or even outdated!) versions of MongoDB. diff --git a/posts/monitor.md b/posts/monitor.md new file mode 100644 index 0000000..b572398 --- /dev/null +++ b/posts/monitor.md @@ -0,0 +1,59 @@ +# Why I Stopped Using an External Monitor + +2023-03-03 + +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. + +Instead, I now *only* use the X260's panel as my main display. Let me explain my reasoning... + +## The Switch to Suckless + +Over the past year I switched away from a traditional desktop environment to a window manager - [dwm](https://dwm.suckless.org/) 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. + +I continued to use my UHD monitor with this new environment but slowly started running into minor (yet still inconvenient) roadblocks: + +- 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. +- The screen was almost *too* large - making content placed on the far edges of the screen difficult to view at a glance. +- 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. + +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... + +## Designing for Everyday Users + +As a UX/UI front-end designer by trade, my job requires me to create and tweak interfaces that essentially go *unnoticed* by the end-users. If you finish a task you sought out to complete without even thinking about *how* 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. + +[A study performed by BrowserStack via statcounter (2022)](https://www.browserstack.com/guide/ideal-screen-sizes-for-responsive-design) shows the worldwide market share based on device type: + +- 58.33% mobile +- 39.65% desktop +- 2.02% tablet + +The mobile aspect is certainly important, but we are focusing on the desktop data. Of that total the top two screen resolutions are: + +- 1920×1080 (9.94%) +- 1366×768 (6.22%) + +That is a fairly significant chunk of desktop users. Although almost 10% have access to screens set at `1920x1080`, I found the amount of those stuck at `1366x768` 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. + +Hell, some of these users were being shown the *tablet*-based view of the applications since our breakpoints were so ridiculously large. Yikes. + +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. + +Here are some benefits at a glance: + +- 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. +- Working inside `dwm` is a much cleaner experience. I mostly operate single applications within their own confined tag - with some exceptions of course. +- 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) + +<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> + +## A Little Extreme + +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. + +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 *users* will experience it. + +Maybe that's extreme - but it works for me.
\ No newline at end of file diff --git a/posts/multiple-css-background-images.md b/posts/multiple-css-background-images.md new file mode 100644 index 0000000..1fd0180 --- /dev/null +++ b/posts/multiple-css-background-images.md @@ -0,0 +1,15 @@ +# Using Multiple CSS Background Images + +2018-09-28 + +It isn't something developers have a need to do very often, but you *can* set multiple background images on a single element. + +Example: + + + .element { + background: url('image_path') center repeat, linear-gradient(transparent 0%, #000 100%) no-repeat; + } + + +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. diff --git a/posts/my-pi-desktop.md b/posts/my-pi-desktop.md new file mode 100644 index 0000000..e5daee0 --- /dev/null +++ b/posts/my-pi-desktop.md @@ -0,0 +1,124 @@ +# My Raspberry Pi Desktop + +2020-09-02 + +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. + +My desktop Pi working away on a regular morning: + +<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> + +## Table of Contents + +1. [My Use Case](#use-case) +2. [The Hardware](#hardware) +3. [The Software](#software) +4. [Performance & Stats](#stats) + +<h2 id="use-case">My Use Case</h2> + +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 *could* become my main device, I was surprised at how capable the hardware / software was at running all my required applications. My workload comprises of: + +- Using Github/Gitlab to pull/push repos, open PRs, etc +- Run SSG (Jekyll mostly) locally for testing +- Run multiple WordPress instances locally +- Edit design files (Photoshop, Illustrator, direct SVGs) +- Simple web chat / email + +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. + +<h2 id="hardware">The Hardware</h2> + +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. + +> **Note**: products in the hardware section are Amazon affiliate links + +- <a href="https://amzn.to/33BAVn2" target="_blank">Raspberry Pi 4</a> +- <a href="https://amzn.to/3nu55Aq" target="_blank">X857 V1.0 mSATA SSD Shield Expansion Board</a> (I'm using the X856) +- <a href="https://amzn.to/3jEgWd5" target="_blank">128GB mSATA SSD</a> +- <a href="https://amzn.to/3nqeJUK" target="_blank">Acrylic Case with Heatsinks & Fan</a> +- <a href="https://amzn.to/34w60I1" target="_blank">Raspberry Pi Keyboard & Mouse</a> +- <a href="https://amzn.to/3jDKLdT" target="_blank">21.5" Acer Monitor</a> + +<h2 id="software">The Software</h2> + +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. + +The Pi has been overclocked to 2GHz in order to squeeze just a *little* extra out of the hardware. This has caused zero issues. + +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: [How to Boot Raspberry Pi 4 From a USB SSD or Flash Drive](https://www.tomshardware.com/how-to/boot-raspberry-pi-4-usb) + +After that, I simply installed my required apps / configs (where applicable): + +- Chromium (*preinstalled*) +- Firefox ESR +- Pale Moon +- Code OSS +- Terminal (*preinstalled*) +- Libre Office Suite +- Evolution +- Figma (Web - no install needed) +- Apache2 / MySQL +- Blueman (helpful GUI for bluetooth) + +What my plain desktop looks like: + +<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> + +<h2 id="stats">Performance & Stats</h2> + +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. + +My average CPU temperature sits around 51° (with heatsinks & fan active) while CPU usage never really cranks past 90% during even "intensive" processes. + +Since *actual* data speaks louder than anecdotal chit-chat, I performed a very simple read/write test on my mSATA SSD. + +First, clear the cache to avoid conflicting data: + +``` +sync; echo 3 | sudo tee /proc/sys/vm/drop_caches +``` + +### Write + +Write script run: + + + dd if=/dev/zero of=~/test.tmp bs=500K count=1024 + + +Write output: + + + 524288000 bytes (524 MB, 500 MiB) copied, 1.95478 s, 268 MB/s + + +### Read + +Read script: + + + dd if=~/test.tmp of=/dev/null bs=500K count=1024 + + +Read output: + + + 524288000 bytes (524 MB, 500 MiB) copied, 0.770993 s, 680 MB/s + + +This gives a total read/write value of: **268 MB / 680 MB** per second. Compare that to average microSD card speeds floating around **22 MB / 170MB** per second and you can see (and feel) the massive speed difference. Things are just snappier. + +**Note**: Obviously extremely high-end (read: expensive) microSD cards *might* 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. + +## Final Thoughts + +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: *you're missing the point*. + +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. diff --git a/posts/my-static-blog-publishing-setup.md b/posts/my-static-blog-publishing-setup.md new file mode 100644 index 0000000..499334e --- /dev/null +++ b/posts/my-static-blog-publishing-setup.md @@ -0,0 +1,82 @@ +# My Static Blog Publishing Setup and an Apology to RSS Subscribers + +2022-03-21 + +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. _Written_ is a better description. + +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. + +## I'm Sorry Dear RSS Subscribers + +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. + +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... + +Again, sorry everyone. + +## What is this New Blog "System" + +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. + +There are a couple articles that explain the reasoning behind this system better than I could (plus, why would I repeat the same points?): + +- [Writing HTML in HTML](http://john.ankarstrom.se/html/) +- [My stack will outlive yours](https://blog.steren.fr/2020/my-stack-will-outlive-yours/) + +So, what does my blog-posting system look like? + +## Simple Explanation + +1. Copy an existing article's `HTML` file +2. Change file name, edit the page title, heading, post date and comment link +3. Write the new article content +4. Make manual new entry in RSS feed +5. Save changes, push to git repo +6. Sync new file(s) / changes to remote server + +Pretty simple, eh? Let's break things down into greater detail though... + +## Detailed Explanation + +#### Text Editor + +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). + +I perform the following for a new article: + +- Copy an existing article, ie. `blog-post-1.html` +- Rename article file name, ie. `blog-post-2.html` +- Open this newly created file and change: + - page `title` tag + - page `h1` heading and top bar text + - `time` tag to match publish date + - comment `mailto:` link url +- Start writing content inside the `article` section + +Once the article is complete, I add a static entry in my `feed.xml` and run a crude rsync script. More on that below. + +#### Git + +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. + +#### Hosting + +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 [about page](https://www.nearlyfreespeech.net/about/): + +> NearlyFreeSpeech.NET is about three things: fairness, innovation, and free speech. + +Hard to argue with those principles. If you're feeling generous, I'd greatly appreciate anyone who considers contributing to [offset this website's hosting costs through NearlyFreeSpeech](https://www.nearlyfreespeech.net/contribute/tdarb.org) (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! + +NFS gives me server access via `SSH` (and even `SFTP` if I desire) which makes things simple to sync my local files with production code. This is handled via rsync with a basic `deploy.sh` script: + + + rsync -vrzc --exclude 'deploy.sh' --exclude '.git' --delete ./ username@my.remote.nfs.server: + + +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. + +## Closing Thoughts + +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 `Find/Replace` actions or even whipping up a basic script. Things should be as complex as you wish to make them! + +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. diff --git a/posts/ndenting-text-with-css.md b/posts/ndenting-text-with-css.md new file mode 100644 index 0000000..f0444fc --- /dev/null +++ b/posts/ndenting-text-with-css.md @@ -0,0 +1,44 @@ +# CSS: Indenting Text + +2019-04-05 + +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. + +In today's *TypeTip* we're going to play around with the `text-indent` property, look into when it's best to use it and how to implement it properly. + +## The property and browser support + +Browser support is actually pretty great for such a regularly over-looked CSS property. All major desktop and mobile browsers support it: + +<figure> + <img src="/public/images/text-indent-compatibility.webp" alt="Text indent browser compatibility"> + <figcaption>Full support across all browsers.</figcaption> +</figure> + +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 `text-indent` and some basic rules to follow: + +## Use Cases + +1. Increasing readability of large text blocks that would otherwise overwhelm the reader +2. Replicating book or report typography layouts + + +## Basic Rules + +1. Best to set this property on inner type children only - meaning items like `p` or `blockquotes` instead of main headings +2. When used on paragraph tags it's best to target only `p` elements that directly follow a sibling tag (see "The CSS" below) + +## The CSS + +Adding the property is extremely trivial, all you need is the following: + + + /* Best practice for paragraphs */ + p + p { + text-indent: 1rem; /* whatever you want */ + } + + +## Let's see it in action + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/OGXLEd/) diff --git a/posts/netlify-urls.md b/posts/netlify-urls.md new file mode 100644 index 0000000..5ccf903 --- /dev/null +++ b/posts/netlify-urls.md @@ -0,0 +1,34 @@ +# Using Netlify for Dynamic URL Redirects + +2021-12-03 + +With the [recent domain switch](/minor-website-changes/) 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 *dynamic* linking. Let me explain using a basic example: + +- A user clicks on a link that targets a post on your old domain:<br> `olddomain.com/random-post` +- You want that link to forward using the same permalink structure:<br> `newdomain.com/random-post` +- "URL forwarding" through your domain provider **does not** support this + +Simple stuff. So, let's breakdown how to easily set this up on Netlify *for free*. + +## Setting Up Netlify + +- Create an account (or login to an existing one) and setup a new site[^1] +- Change your "old" domain name nameservers to match Netlify's (normally done through your domain register) + - `dns1.p03.nsone.net` + - `dns2.p03.nsone.net` + - `dns3.p03.nsone.net` + - `dns4.p03.nsone.net` +- Back in Netlify: under **Domain Settings** you need to add your custom "old" domain under the **Custom domains** section under **Domain management** +- Lastly, add the following content inside a `_redirects` file (no extension) to your website content/build (changing to your own domains, of course) + + + https://olddomain.com/* https://newdomain.com/:splat 301! + + +That's it! Now Netlify will dynamically forward all your pre-existing URLs from your old domain to the new one. No pesky `.htaccess` files or running your own basic web server(s)! + +Hopefully this helps others trying to dynamically redirect their domains without the headache. + +## Refs + +1. I normally set this up through Github / git hosting diff --git a/posts/news-websites-are-dumpster-fires.md b/posts/news-websites-are-dumpster-fires.md new file mode 100644 index 0000000..e16e99a --- /dev/null +++ b/posts/news-websites-are-dumpster-fires.md @@ -0,0 +1,34 @@ +# News Websites Are Dumpster Fires + +2019-05-29 + +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. + +## What news sites get wrong + +I could write up an entire essay about all the shady practices that *most* news sites are guilty of, but here are just a few top level issues: + +- Clickbait headings with misleading information +- Disabling the user from reading if ad-block is present +- Tracking the user with 3rd party scripts +- Taking massive performance hits (specifically on mobile due to huge JavaScript blocks) +- Pop-up ads +- Fixed headers or footers which leads to harder readability / accidental element interactions + +## But they need ad revenue! + +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 [will be blocking ads by default](https://support.mozilla.org/en-US/kb/content-blocking). *News outlets need to adapt or die*. + +## What's the solution? + +I don't have a *fix all* 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: + +- 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) +- Partner with brands to create sponsored articles (without ruining the user experience of course) +- Place a larger emphasis on user donations or promotions + +## The News Shouldn't be Spam + +Most traffic flowing into news websites are there for one thing: *the content*. News outlets should not be spamming their main revenue supply (**the users**) or misleading people with false information. + +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. diff --git a/posts/notice.md b/posts/notice.md new file mode 100644 index 0000000..02496fd --- /dev/null +++ b/posts/notice.md @@ -0,0 +1,89 @@ +# RE: Creating a Simple HTML/CSS Notice Box + +2022-09-22 + +I recently read Kev Quirk's post, [How to Create a Simple HTML/CSS Notice Box](https://kevquirk.com/how-to-create-a-simple-html-css-notice-box/) 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 *without* the use of static, pseudo elements... + +## Bad Semantics + +I need to make it clear right away: **these implementations are not semantic**. They are valid HTML, but I am technically using these tags incorrectly. *You have been warned!* + +## Setting Fieldsets + +The first approach is to wrap everything inside HTML `fieldset` tags: + + + <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> + + +Then you can include minor styling to closely match the design of Kev's notice box: + + + 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; + } + + +## The Devil is in the Details + +The other option is utilizing the HTML `details` tag: + + + <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> + + +You'll obviously want to include the `open` attribute to avoid users needing to toggle the content manually (unless that is your desired UX). Then add similar styling options to match the `fieldset` example: + + + 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; + } + + +Important to note: you can hide the default "arrow toggle" on `summary` elements by including the following: + + + details > summary { + list-style: none; + } + details > summary::-webkit-details-marker { + display: none; + } + + +## Seeing is Believing + +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: + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/jOxLdQP) diff --git a/posts/obvious-js-injection-fallback.md b/posts/obvious-js-injection-fallback.md new file mode 100644 index 0000000..5143f7f --- /dev/null +++ b/posts/obvious-js-injection-fallback.md @@ -0,0 +1,48 @@ +# Obvious Javascript 'Injection' Fallback + +2020-12-04 + +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 *empty* HTML elements with the assumption they will be filled via Javascript. + +## Our Hypothetical Project + +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: + +### HTML + +Here we create an empty `h2` tag that will update with the current number of users via js: + + + <main> + <h2 class="total-tally"></h2> + </main> + + +### Javascript + +You'll have to use your imagination here and assume that the `totalTally` variable pulls in the numbers dynamically via API: + + + var totalTally = "273,677" /* This would pull something dynamically in prod */ + document.getElementsByClassName("total-tally")[0].innerHTML=totalTally; + + +## The Problem + +The big issue we have now occurs when a user visits this page without JS enabled. The `h2` 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. + +## The (overly simple) Solution + +The easiest way to avoid these types of empty tags - add static content. I know - mind blowing, right? + +### HTML (updated) + + + <main> + <h2 class="total-tally">200,000+</h2> + </main> + + +You might be reading this and saying to yourself, "Wow! Thanks Captain Obvious!" and that's a fair reaction. This is an *obvious* 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. + +Rule of thumb: don't make assumption about your users. Play it safe. diff --git a/posts/one-css-property.md b/posts/one-css-property.md new file mode 100644 index 0000000..fe9f9ae --- /dev/null +++ b/posts/one-css-property.md @@ -0,0 +1,35 @@ +# Billing for One CSS Change + +2019-11-29 + +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. + +You need to be charging for *all* design work, regardless of difficulty or time required. + +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. + +## Do you really bill for *one* CSS change? + +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 *only* 30 seconds. + +Would the client be happier with a significantly less qualified designer charging the same amount of money but taking 3 *hours* to complete the task? In the end, what's the difference? + +> If it is a simple change that they believe should cost nothing, then why aren't they doing it themselves? + +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: + +- "This should be a simple change" +- "This shouldn't take more than a couple of minutes" +- "This seems like an easy fix" + +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. + +Do you think workers in *most* other industries travel out to someone's home and fix "small" issues for free? Hell no. + +So why are developers and designers doing work for free? I truly don't know - but it needs to stop. + +## A simple but useful system + +You should live by the rule that every *second* 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. + +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. diff --git a/posts/one-thing.md b/posts/one-thing.md new file mode 100644 index 0000000..877e4ef --- /dev/null +++ b/posts/one-thing.md @@ -0,0 +1,46 @@ +# My Coffee Maker Just Makes Coffee + +2023-01-09 + + + +I had to replace my dual Keurig coffee maker *twice* over a period of five months. This occurred a year ago and these are my findings. + +## Built to Fail? + +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 *second* machine's failure. Another product replaced under warranty, while the broken one's tossed aside. More e-waste because why not? + +But after some further reflection, I came to realize the "poor design" was a symptom of a greater cause: + +**The product tries to do too much**. + +I'm beating a dead horse by referencing [suckless](https://suckless.org) 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 *single items*. Everything expands. Everything needs to do one little extra "cool" thing. Nothing is ever *taken away*. + +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! + +Unfortunately, in practice, it fails. + +## Product Decline + +I've felt product quality decline in both household appliances and software. Companies no longer seem content with doing *one thing well*. 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 *slower* and losing focus. + +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. + +The design field drops new designers into a *world of bloat*. 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 *try*, get [snatched up by existing platforms](https://www.theverge.com/2022/9/15/23354532/adobe-figma-acquisition-20-billion-official). Designers don't have the luxury of "choice" as much as developers do (within reason). It's a very locked-down industry. + +So of course designers will carry this mentality into their own work. It's all they have known. "X and Y companies designed their `insert-feature-here` with all these *extras*, so we'll do the same". Everything is [a copy of a copy of a copy](https://invidious.snopyta.org/watch?v=dC1yHLp9bWA). + +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. +## Back to the Coffee Maker + +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. + +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. + +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. + +And it's been running *perfect* 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... + +## "Brewing" Software + +At least, for me, I plan to only design what *needs to be*. If someone asks for a "coffee", they'll get a cup of hot, black coffee and nothing else.
\ No newline at end of file diff --git a/posts/open-source-typeface-pairings.md b/posts/open-source-typeface-pairings.md new file mode 100644 index 0000000..271db4a --- /dev/null +++ b/posts/open-source-typeface-pairings.md @@ -0,0 +1,52 @@ +# Open Source Typeface Pairings + +2018-01-25 + +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). + +So, I've curated this personal list of 5 exceptionally beautiful typeface pairings that will cost you absolutely <i>nothing</i>. Open source FTW. + +## ET-Book & Gill Sans + +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> + +<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> + +## Playfair Display & Roboto + +Download: <a href="https://fonts.google.com/specimen/Playfair+Display">Playfair Display</a>, <a href="https://fonts.google.com/specimen/Roboto">Roboto</a> + +<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> + +## Karma & Open Sans + +Download: <a href="https://fonts.google.com/specimen/Karma">Karma</a>, <a href="https://fonts.google.com/specimen/Open+Sans">Open Sans</a> + +<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> + +## Libre Baskerville & Oswald + +Download: <a href="https://fonts.google.com/specimen/Libre+Baskerville">Libre Baskerville</a>, <a href="https://fonts.google.com/specimen/Oswald">Oswald</a> + +<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> + +## Fanwood & League Spartan + +Download: <a href="https://www.theleagueofmoveabletype.com/fanwood">Fanwood</a>, <a href="https://www.theleagueofmoveabletype.com/league-spartan">League Spartan</a> + +<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> diff --git a/posts/openring.md b/posts/openring.md new file mode 100644 index 0000000..8c1c6c6 --- /dev/null +++ b/posts/openring.md @@ -0,0 +1,132 @@ +# Building openring with Jekyll Build + +2022-12-02 + +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. + +After some digging I came across [openring](https://sr.ht/~sircmpwn/openring/) and it's great. Fully customizable, lightweight and completely open source. What more could you ask for? + +So, I thought others might be interested in how I've implemented openring through my own Jekyll build system. + +## Installing openring + +You can pull the project [directly via SourceHut](https://sr.ht/~sircmpwn/openring/) 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: + +``` +yay -S openring +``` + +That's it. I now have full local access to openring! + +## Jekyll Includes + +You *could* 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 `_includes` directory. We will name these files `openring-in.html` and `openring-out.html`. + +### openring-in.html Contents + +``` +<!-- 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> + {{end}} + </section> + <p class="attribution"> + Generated by + <a href="https://git.sr.ht/~sircmpwn/openring">openring</a> + </p> +</section> +<style> +.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; +} +</style> +``` + +> Sidenote: You will get minor Liquid Syntax warnings in the console when running your website via `serve` or `build`. 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. + +### openring-out.html Contents + +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 `openring-in.html` file. + +## Our "New" Build Script + +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 `build-site.sh`. I know - I'm extremely creative. + +Place the following inside that file: + +``` +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 +bundle exec jekyll build +``` + +## Edit `_config.yml` + +Next we need to make sure we exclude our new `build-site` script file, since we really don't need that pushed up to the main server: + +``` +# Includes / Excludes +exclude: + - build-site.sh +``` + +## Almost Done... + +Now you just need to decide where you want your `openring` feed outputs to render. For this example, we will place them at the bottom of every blog post inside the `_layouts/post.html` file, like so: + +``` +{% raw %}{% include openring-out.html %}{% endraw %} +``` + +## Build It & They Will Come + +This next step is only for those using [SourceHut Pages](https://srht.site) 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. + +I won't go into great detail about build script for SourceHut Pages, but feel free to take a look at my [very own build file for this website](https://git.sr.ht/~bt/bt.ht/tree/master/item/.build.yml). That *should* work out-of-the-box for most standard Jekyll websites. (Just be sure to edit with your own details!) + +**That's it**. 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! + +Happy sharing! + +## Refs + +1. Well, as dynamic as a static website can be!
\ No newline at end of file diff --git a/posts/over-engineering-an-oil-tank.md b/posts/over-engineering-an-oil-tank.md new file mode 100644 index 0000000..ae516fc --- /dev/null +++ b/posts/over-engineering-an-oil-tank.md @@ -0,0 +1,41 @@ +# Over-Engineering an Oil Tank Gauge + +2020-09-09 + +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 `empty` 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. + +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 *fun* though. + +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: [DIY Ultrasonic Fuel Gauge / Level Sensor](https://scottiestech.info/2017/10/24/diy-ultrasonic-fuel-gauge-level-sensor/) + +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. + +## My oil think-tank + +I quickly thought through my options in my head before jumping too far into things (and even included a "poor-mans" temperature strip option): + +| Solution | Cost | Time | +|--------|-----------------|----------| +| Ultrasonic Gauge | $40-50 | ~2-3 hours | +| New Float Gauge | $25-30 | ~45 minutes | +| Temperature Strips | $10 | ~2 minutes | + +My mind was still set on building and implementing the ultrasonic option. It would be a great learning experience at the very least! + +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. + +*The float set itself back into the correct position. It was fixed.* + +How could I have been so dumb. I was so excited about *building something* that I jumped into implementation before fully realizing the problem. Talk about a metaphor for web dev, am I right? + +## Overthinking simple problems + +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 *fun*. + +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 *first*. + +## Final decision + +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... + +Just like in the world of software, it's best to avoid over-engineering simple problems. diff --git a/posts/over-nesting.md b/posts/over-nesting.md new file mode 100644 index 0000000..1003fd0 --- /dev/null +++ b/posts/over-nesting.md @@ -0,0 +1,56 @@ +# Over-Nesting + +2019-01-06 + +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. + +Now it's completely understandable why designers and teams alike shrug off the concept of "over-nesting": + +- As a team we know the structure of our code (no outside party needs to interact with it) +- Everything is written in `insert pre-processor here` - so it's cleaner/compiled anyway +- It's *technically* DRY + +I personally believe these are all weak excuses that don't justify the poor experience future maintainers of your code will face. *You should always write your code with the idea someone completely new to the project will have to maintain it*. + +Let's look at an average example of poor nesting that I've seen out in the wild: + + + /* These children elements can't be used outside + of the parent - not very flexible */ + .main-container { + .child-container { + /* This class specificity is too deep */ + .sub-child-container {} + } + } + + +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? + + + /* This code is far more reusable */ + .main-container {} + .child-container {} + .sub-child-container {} + + +### Exceptions + +As with anything, there are exceptions to the *rule*. 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: + + + .btn-lg { + &:hover {} + &:active {} + &:disabled{} + } + + .link-item { + &:hover{} + &:focus{} + } + + +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. + +I'm not saying this is **the only way to structure CSS** - I'm only trying to make the lives of future designers/developers easier moving forward. diff --git a/posts/paid-mac-apps.md b/posts/paid-mac-apps.md new file mode 100644 index 0000000..47b9626 --- /dev/null +++ b/posts/paid-mac-apps.md @@ -0,0 +1,53 @@ +# Happily Paying For macOS Apps + +2022-06-29 + +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 _some_ non-free, proprietary software. + +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) + +## Design Tool: Sketch + +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. + +But sorry - Sketch is just better. + +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 _optional_ yearly subscriptions and one-time purchases. It's a smart move and I much prefer it to a forced subscription plan. + +URL: [https://www.sketch.com/](https://www.sketch.com/) + + +## Password Manager: Secrets + +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: + +- No subscriptions! One-time price forever. +- iCloud Sync across devices +- Browser extension support (although I don't use this personally) +- Developed by a one-man team (support indie devs!) + +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. + +And best of all - no monthly fees. + +URL: [https://outercorner.com/secrets-mac/](https://outercorner.com/secrets-mac/) + + +## Transferring Files: Transmit 5 + +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. + +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?) + +URL: [https://panic.com/transmit/](https://panic.com/transmit/) + + +## Wrapping Up + +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. + +## Refs + +1. Free & open source software + + diff --git a/posts/pblog.md b/posts/pblog.md new file mode 100644 index 0000000..7deedbe --- /dev/null +++ b/posts/pblog.md @@ -0,0 +1,48 @@ +# Yet Another Static Site Generator Switch + +2022-07-06 + +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. + +This website now uses my *new* Pandoc-based static blog generator: [pblog](https://pblog.bt.ht). I won't go into great detail about it's features (or lack thereof) - if you're interested in that, check out the ["Introducing pblog" article](https://pblog.bt.ht/blog/pblog-intro.html). + +The bigger question is, "Why the change?" + +## Where's the Love for "Shinobi"? + +Switching over to `pblog` wasn't caused by a dislike of using [Shinobi](https://shinobi.bt.ht). 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 *accessibility* and *poor user experience*. + +I had multiple readers reach out and mention poor rendering of content in their RSS reader of choice. That's kind of a **big deal**. 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 `HTML`. + +The next big issue was *accessibility*. Screen readers can read `txt` 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. + +## The Search for Simplicity + +My initial thought process was to include some form of "plus" add-on to the existing Shinobi build script. The idea was to render `HTML` versions of each post and dump those into the generated RSS file. Although maybe good in theory, it ended up impractical because: + +1. 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) +2. I was actually adding extra bloat to the Shinobi project (true minimalism is the point, right?) + +So, that option was ruled out pretty quickly. + +The next option didn't take me long to land on: *Pandoc*. 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 `shell` commands in the Shinobi project and alter them as needed to incorporate Pandoc. + +I honestly didn't run into many issues while rolling this out. Fairly seamless! + +## New Workflow + +With this new blog switch I also decided to try out a new *deploy* workflow. I've used `rsync` for the longest time but wanted to have something more GUI-based on macOS. I know, *blasphemy*! + +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: + +1. Write new posts in my root `posts` folder +2. Rebuild the `pblog` with `make` +3. Use the built-in sync function of Transmit to mirror my local `_output` with my web server + + + +### Wrapping Up + +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. + +Thanks for reading! diff --git a/posts/performance-focused-wordpress-theme.md b/posts/performance-focused-wordpress-theme.md new file mode 100644 index 0000000..a973166 --- /dev/null +++ b/posts/performance-focused-wordpress-theme.md @@ -0,0 +1,79 @@ +# Create a Performance-Focused WordPress Blog + +2021-09-08 + +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 *static* Jekyll-based version of this blog. + +And I've achieved this with barely any effort at all. All that's needed is: + +- a lightweight WordPress theme +- two free WordPress plugins +- cheap & fast web hosting + +Let me breakdown each component so those of you interested can do the same without hitting any roadblocks. + +## Choosing Your WordPress Theme + +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. + +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 [theme collection](https://andersnoren.se/teman/). Others can be found on the official [wordpress.org](https://wordpress.org/) website. + +## Two Simple Plugins + +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: + +1. Jetpack Boost – [wordpress.org/plugins/jetpack-boost/](https://wordpress.org/plugins/jetpack-boost/) +2. Yoast SEO – [wordpress.org/plugins/wordpress-seo/](https://wordpress.org/plugins/wordpress-seo/) + +## Jetpack Boost + +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. + +Check out my own testing site metrics below: + +<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> + +## Yoast SEO + +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. + +Here is the Lighthouse audit for the test WordPress website: + +<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> + +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. + +## Host Everything on EasyWP + +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! + +I know – I can hear your collective voices shouting out: + +> Isn't web hosting a little expensive just for my simple hobby blog/site? +> +> -- <cite>Some of you</cite> + +I host this test blog for just **$3.88/month** 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. + +This “cheap” hosting is through EasyWP and the Starter plan ($3.88/month) comes with the following: + +- 10 GB SSD storage +- 50k visitors/month +- Unlimited bandwidth +- Backups (though not automatic) +- SFTP access +- EasyWP Cache plugin (and it's actually good!) + +You will need to snag your own SSL certificate though, but this is easily obtained with something like [letsencrypt.org](https://letsencrypt.org). + +Best of all, if in the future you require more features the next pricing tier is still only $7.88. Not too shabby! + +## Try Yourself + +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. diff --git a/posts/personal-website-opinions.md b/posts/personal-website-opinions.md new file mode 100644 index 0000000..aaae7de --- /dev/null +++ b/posts/personal-website-opinions.md @@ -0,0 +1,23 @@ +# My Changing Opinion on Personal Website Design + +2021-05-19 + +Hey would you look at that - my personal blog has been redesigned *again*! 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. + +**Gasp!** "How *could* you?!" I hear you ask. Let me explain. + +## Personal sites should feel personal + +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 [added a little whimsy and character](https://kevq.uk/adding-some-whimsy-character/) to my website. After all, personal websites should *feel personal*. My obsession with barebones HTML & CSS serves its purpose on other public projects, but seems limiting for my own little space on the interwebs. + +## Banned from my own club + +I had originally converted this blog's design to use *zero* 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 [XHTML Club](https://xhtml.club) project. (I never said it was a *good* reason) + +After giving it some thought, I've decided that this limitation seemed too extreme even for me. + +## Moving forward + +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 *do* have a few tutorial blog posts lined up to publish soon - so be on the lookout for those! + +Thanks for reading through my pointless ramblings about personal websites. It's good to just vent about these things sometimes... diff --git a/posts/phpetite.md b/posts/phpetite.md new file mode 100644 index 0000000..9eafa29 --- /dev/null +++ b/posts/phpetite.md @@ -0,0 +1,70 @@ +# 89 Blog Posts in a Single HTML File + +2021-04-22 + +*This is no longer the current setup of my blog*. I have switched back to Jekyll for performance reasons. I'll be leaving this post up as a point of reference though :) + +- - - + +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: + +All of these articles are rendered inside a *single HTML file*. 🤯 + +## What Sorcery is This?! + +No magic here - I'm just using my own personal static site generator called [PHPetite](https://phpetite.org). You can find all the code and more information about PHPetite on the [official Github repo page](https://github.com/bradleytaunt/phpetite). Please note that this project is still very much a WIP, so go easy on me when pointing out bugs or issues! + +## Pingdom Stats + +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): + +- 99 Performance Grade +- 951 ms Load Time +- 231.3 KB Page Size (thank you Netlify compression!) + +[See all the Pingdom details for yourself](https://tools.pingdom.com/#5e169d6a82000000) + +Now the `Page Size` 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 [1MB threshold](https://1mb.club) + +I'll deal with how to load in the content more efficiently when that times comes... + +## What About Images? + +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"? + +Easy - I don't load any images at all. + +I now simply set any images that are not included in the current, visible `section` to `display: none`. This avoids breaking things with the RSS feed. + +Here is an image example of an old Dribbble shot I created years ago: + +<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> + +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. + + <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> + +## How's the SEO? + +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. + +## RSS Feed + +If you recently added my old RSS feed, I'm sorry, but you'll have to update. The new feed is located at [tdarb.org/feeds/posts.xml](https://tdarb.org/feeds/posts.xml). I made this change to avoid spamming the current feed users. + +## Tasty Dog Food + +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. + +I hope you enjoyed this little breakdown and maybe even want to try out PHPetite for yourself? 😉 + diff --git a/posts/pi-400-internal-ssd.md b/posts/pi-400-internal-ssd.md new file mode 100644 index 0000000..b54a206 --- /dev/null +++ b/posts/pi-400-internal-ssd.md @@ -0,0 +1,87 @@ +# Stuffing an SSD Inside the Raspberry Pi 400 + +2021-08-13 + +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 *real* hardware tinkerers will probably vomit in their mouths once they see how I achieved this... + +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!) + +Enough chit-chat - on to the build! + +## The Finished "Masterpiece" + +Below you can see the final look of my modded Raspberry Pi 400, which I have personally named the **Raspberry Pi 400X**: + +<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> + +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 *inside* the plastic keyboard structure and allows us to boot via USB. It also gives us the flexibility to easily *unplug* the internal SSD for times when we desire to boot from micro SD or a different USB device altogether. + +So, how did I make this? + +## The Shopping List + +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: + +- mSATA 64GB SSD Half Size (KingSpec) → [AliExpress](https://www.aliexpress.com/item/32385499968.html?spm=a2g0s.9042311.0.0.210e4c4dIH8xWv) +- mSATA to USB 3.1 enclosure (gutted) → [Amazon](https://www.amazon.ca/gp/product/B07BBM3BVS/ref=ppx_yo_dt_b_asin_title_o09_s00?ie=UTF8&psc=1) +- Dremel rotary tool with soft sanding bits +- Metal cutting scissors / knife +- Electrical tape +- Patience + +## Modding the Raspberry Pi 400 + +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. + +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: + +<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> + +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! + +**Important to note:** this will remove one of the screw slots needed to secure the heatsink into the board. Not a big deal if you ask me... + + + +<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> + +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?) + +<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> + +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! + +<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> + +That's it! You now have the portable power of the Raspberry Pi 400, but now with the speed and performance of an SSD! + +## The Performance Gains + +|Storage Type|Seq. Write|Random W|Random R| +|------------|----------|--------|--------| +|Micro SD Card|17818 KB/sec|812 IOPS|2335 IOPS| +|mSATA SSD|206738 KB/sec|14615 IOPS|17925 IOPS| + +I think it's pretty clear that the SSD blows the default micro SD card out of the water... + +## Closing Thoughts + +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? + +If anyone decides to improve on this or make a cleaner approach, please do share it with me. I'd love to see it! diff --git a/posts/pihole-cloudflare.md b/posts/pihole-cloudflare.md new file mode 100644 index 0000000..0f59ca3 --- /dev/null +++ b/posts/pihole-cloudflare.md @@ -0,0 +1,42 @@ +# Setting Up 1.1.1.1 for Families on a Pi-Hole + +2021-10-28 + +After seeing Cloudflare's 1.1.1.1 for Families mentioned on the [front page of HackerNews](https://news.ycombinator.com/item?id=29024195), I thought it might be helpful to show those currently using a [pi-hole device](https://pi-hole.net) how to include 1.1.1.1 alongside it. + +## Keeping Things Updated + +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 `ssh` into your device (or connect to it directly if you prefer) and run the following to check your pi-hole version: + + + pihole -v + + +And if your version is out of date, run: + + + pihole -up + + +Once it completes the update everything will be good to go! + +## Adding 1.1.1.1 (1.1.1.2) + +Now you need to navigate to your main pi-hole admin in your browser (most likely the url will be *pi.hole*). Login in using your credentials and the do the following steps: + +1. Navigate to **Settings** +2. Navigate to **DNS** +3. Under "Upstream DNS Servers" enter: + +- Custom 1 (IPv4): 1.1.1.2 +- Custom 2 (IPv4): 1.0.0.2 + + +<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> + +## Ad-Block & Malware Protection + +You now officially have protection against both intrusive advertisements *and* sites flagged with malware. Happy (and now safer) browsing! diff --git a/posts/plain-text-emails.md b/posts/plain-text-emails.md new file mode 100644 index 0000000..0d4cb36 --- /dev/null +++ b/posts/plain-text-emails.md @@ -0,0 +1,71 @@ +# Plain Text Emails, Please + +2019-09-09 + +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? + +## A brief history of email + +Email has been possible since the 1960s with [time-sharing computers](https://en.wikipedia.org/wiki/Time-sharing) being used to share files and messages across early devices. Around the 80s and 90s it seemed as though [GOSIP](https://en.wikipedia.org/wiki/Government_Open_Systems_Interconnection_Profile) would dominate the market, but this was knocked out in favor of SMTP, POP3 and IMAP in 1995 when the [National Science Foundation ended its sponsorship of the Internet backbone](http://www.walthowe.com/navnet/history.html), and all traffic relied on commercial networks. + +<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> + +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 *fluff* - just content. + +**Sidenote:**<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 [the history of the internet](http://www.walthowe.com/navnet/history.html) if you're into that kind of thing. + +## Looking at some data + +> Data isn't everything + +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) + +In 2002<sup>[<a href="#1">1</a>]</sup>, [a small-set survey was run by ClickZ](https://www.clickz.com/real-world-email-client-usage-the-hard-data/47429/) 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: + +**Do you prefer receiving HTML or text email?** + +| Response | Percentage (%) | +|---|---| +| HTML | 41.95 | +| Plain Text | 31.52 | +| No Preference | 26.53 | + +On initial review, one could make the argument that the general public *prefers* HTML email over plain text (~42% vs ~32%) - but I would disagree with this analysis. The roughly 27% of respondents who answered with *No Preference* should not be dismissed so easily. + +Since the *No Preference* 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: + +- Plain text has reduced file size + - Don't forget that many users have limited data usage across much of the world +- HTML is more likely to be flagged as spam by email clients + - This is due to extra code, tracking scripts, 3rd party assets / resources being called +- HTML / CSS can be inconsistent or even limited in support across email clients +- Text only requires less design work for your development team + - Don't forget about testing all the various email clients too + +Add to this that [53% of emails are opened on mobile](https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33) - 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? 😛 + +## But what about marketing!? + +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 **it's all bloat on the user's end**. + +Greg Kogan wrote up a great article / case study about his experience [switching over a client's campaign from HTML templates to plain text](https://www.gkogan.co/blog/dont-design-emails/) 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. + +## Simple or lazy - it doesn't matter + +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. + +> Life is really simple, but we insist on making it complicated. +> +> <cite>- Confucius</cite> + +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. + +The results might just surprise you. + +## Refs + +1. This is the "latest" detailed survey I could find on email design preference diff --git a/posts/poor-mans-full-bleed.md b/posts/poor-mans-full-bleed.md new file mode 100644 index 0000000..0d88025 --- /dev/null +++ b/posts/poor-mans-full-bleed.md @@ -0,0 +1,114 @@ +# Poor Man's CSS Full-Bleed Layout + +2020-10-07 + +I recently came across the very well written and interesting article, [Full-Bleed Layout Using CSS Grid](https://joshwcomeau.com/css/full-bleed/), 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 `grid` property. + +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. + +**Don't care about the tutorial?** [Skip down to the live demo](#live-demo) + +## Make the Web Backwards Compatible + +I try my best when creating specific element designs or layouts to have everything render consistently across almost *all* 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. + +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 *any browser* that can run the basic version of CSS rendering. If the browser you're targeting supports `max-width` and `margins` - then have no fear, full-bleeds are here. + +## Our HTML Example + +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: + + + <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> + + +This works well as it is, but we will need to "section" off our different areas of content based on whether we want them `full-bleed` or not. We do this with - you guessed it - the `section` element. In this demo we want the image and blockquote to become `full-bleed` when rendered, so we'll add the `full-bleed` class to those sections for now (more on that later): + + + <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> + + +That's it for the HTML! + +## The Magic CSS (Not Really) + +Now take a deep breath and get ready for some hard CSS work: + + + article { + width: 100%; + } + + article section { + margin: 0 auto; + max-width: 480px; /* This can be whatever you want */ + width: 100%; + } + article section.full-bleed { + max-width: 100%; + } + + +That's it. *Really*. Now any element (blockquotes, specific headers, navigations, footers, etc) that you want to layout as "full-bleed", just wrap it in a `section` tag and sick the `full-bleed` class on it. Done and done. + +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. + +### Maybe Not-Quite-Full-Bleed? + +You could also further customize your options by including a class like `half-bleed`, which maybe only expands slightly outside the main section `max-width`: + + + article section.half-bleed { + max-width: 960px; + } + + +### Sidenote + +For those concerned about accessibility: The [section element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) is a flow content element, so it can contain almost all HTML elements. + +<h2 id="live-demo">Live Demo</h2> + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/mdEdjzz) diff --git a/posts/poormans-comment-system.md b/posts/poormans-comment-system.md new file mode 100644 index 0000000..30e6c50 --- /dev/null +++ b/posts/poormans-comment-system.md @@ -0,0 +1,63 @@ +# My Cheapskate Commenting System + +2022-02-03 + +My blog now has comments! Well, *kind of*... + +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". + +So, what *free* 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? + +## Remarkbox + +Overall I don't have many bad things to say about [Remarkbox](https://www.remarkbox.com). 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, *personally*) is precisely **that**; 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... + +## Utterances (Github-based) + +The other major option was [Utterances](https://utteranc.es). This system was almost the winner due to it's pretty great feature set: + +1. Open source +2. No tracking, no ads +3. All data stored in GitHub issues +4. Free! + +But take a look above at point number three. The fact that readers wishing to leave a comment are **required to have a Github account**. For me, this is a non-starter. I don't want to force my audience to sign up for or sign in to *any* 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. + +## Finding Inspiration + +I absolutely love the [solar.lowtechmagazine.com](https://solar.lowtechmagazine.com) 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? + +## My Comment System is... + +E-mail. It's just **plain e-mail**. + +I've setup a basic `comment-prompt.html` in my `_includes` folder that contains a `mailto` action button[^1]: + + + <a href="mailto:myemail.com?subject=RE: { { page.title | uri_escape } }"> + <button>Comment via email</button> + </a> + + +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. + +## Pros + +- No third party application needed +- Privacy focused +- More direct interaction with my audience/readers +- Builds a much more close-knit community +- Completely free! + +## Cons + +- Must be manually curated and posted +- No notifications +- No "built-in" reply functionality +- Has the potential to become unwieldy... + +## Fun Experiment + +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. + +Let's see how this thing goes... diff --git a/posts/proper-ui-hierarchy.md b/posts/proper-ui-hierarchy.md new file mode 100644 index 0000000..d5183fe --- /dev/null +++ b/posts/proper-ui-hierarchy.md @@ -0,0 +1,199 @@ +# Proper UI Hierarchy + +2019-02-05 + +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. + +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. + +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. + +I'm pretty sure it's lazy design trends. + +## Stop complaining and do something + +As an example, I'm going to breakdown the process of improving the overall design on a set of "flat" button elements. + +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". + +And one final note before we deep dive into this demo: + +The statement that flat design is inherently worse than it's predecessor **is not subjective**. 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. + +## What we will be designing + +In this demo we will be improving the default flat design inspired button layout of the following: + + + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/yLXJmdy) + +--- + +## Designing the skeleton + +This will be our basic HTML structure, along with it's default styling (based on today's UI standards): + +### The HTML + + + <div class="buttons-container"> + <button>Sign Up</button> + <button>Log in</button> + </div> + + +### The CSS + + + /* Parent container for the buttons */ + .buttons-container { + background: #E0E9EE; + border-radius: 5px; + display: flex; + padding: 20px; + margin: 0 auto; + max-width: 300px; + width: 100%; + } + + /*Shared button styles */ + 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%; + } + + /* Sign up button */ + button:first-child { + background: #2FBC3D; + margin-right: 10px; + } + + /* Log in button */ + button:last-child { + background: #459BCF; + } + + +## Adding simple improvements + +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. + +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. + +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. + +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 *in* right now". As a designer, your job is to design a beautiful and *usable* product - not win high-fives among your peers. /end rant. + +### Adding subtle gradients + +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). + +### The subtly improved CSS + + + /* Sign up button */ + button:first-child { + background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%); + } + + /* Log in button */ + button:last-child { + background-image: linear-gradient(-180deg, #489FD2 0%, #0A6DAC 100%); + } + + +## More depth & light + +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. + +This is fairly easy to accomplish with CSS using the very basic `box-shadow`, `text-shadow` and `border` properties: + + + /* 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); + } + + /* Shared button styling with text-shadows */ + .buttons-container button { + text-shadow: 0 2px 4px rgba(0,0,0,0.30); + } + + /* 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); + } + + /* 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); + } + + +For easy reference, here is the CSS styling in it's entirety: + + + /* Parent container */ + .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%; + } + + /* Shared button styling */ + 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%; + } + + /* Sign up button */ + 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; + } + + /* 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); + } + + +## Going even further with this UI + +This demo article only showcases how to improve on a basic button UI structure with a focus on proper hierarchy between elements. + +Once completely developed, these element should support all interactive states (`hover`, `active`, `disabled`) and animations to make for a more engaging experience. diff --git a/posts/ps4-download-ui.md b/posts/ps4-download-ui.md new file mode 100644 index 0000000..6c8881c --- /dev/null +++ b/posts/ps4-download-ui.md @@ -0,0 +1,144 @@ +# PS4 Download UI with Pure CSS + +2021-06-20 + +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. + +One of the key UI items I've always been a fan of is the download progress view under the `Notifications` settings. So I figured I'd try my hand at recreating this with pure CSS. Here is the final result: + + + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/qBroORG) + +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. + +But enough chit-chat, let's walkthrough how to make it! + +## The HTML + +As with most of my demos, the HTML is very minimal and straightforward. The PS4 system OS download view needs to show the following: + +1. The game's title +2. Full game size, amount downloaded and time remaining +3. Visual progress bar + +So we will place the game's title inside our `h2` with a class of `title` (shocking, I know). The details about game size, downloaded amount and time remaining gets placed under a parent `div` with an accompanying `details` class. Finally, we create our progress bar by including a parent `div` with a class of `progress` that contains a child `div` with a class of `inner-progress`. + +Pretty clean and easy to understand. + + + <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> + + +## The CSS + +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. + +First we'll add a bunch of QOL improvements to help better showcase the demo (adding custom fonts, center content etc.). + +This part is completely *optional*: + + + /* 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-weight: 200; + height: 100vh; + } + + /* Wrapper to center content */ + .wrapper { + margin: 0 auto; + max-width: 800px; + padding: 4rem 0 0; + } + + /* Optional PS4 logo */ + .logo { + display: block; + filter: invert(1); + margin: 0 0 2rem 0; + opacity: 0.5; + width: 60px; + } + + +Now for the styling that *actually matters*. First we will style the game's title and accompanying details (`flexbox` to the rescue again!): + + + h2.title { + font-weight: 400; + margin: 0; + } + + .details { + display: flex; + justify-content: space-between; + margin: 0.2rem 0 0; + } + .details p { + margin: 0; + } + + +Not a whole lot of code to get things looking proper, eh? Next we move on to the progress bar. This is *slightly* more interesting since we are going to utilize the `before` pseudo element - which sounds more complex than it actually is. Pay close attention to the pseudo element and how it calls the `progress-bar-shine` animation - more on that later. + + + .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:''; + 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; + } + + +Almost finished! We just need to animate that `before` pseudo element with a simple `keyframes` at-rule: + + + @keyframes progress-bar-shine { + to { + transform:translateX(450px); + opacity:0; + } + } + + +## Wrapping Up + +Although far from perfect, this experiment still explores what can be created (or in this case, *re*created) in the browser using just pure CSS. Remember, you don't have to reach for JavaScript just because you can! diff --git a/posts/publish-with-jekyll.md b/posts/publish-with-jekyll.md new file mode 100644 index 0000000..0c33e39 --- /dev/null +++ b/posts/publish-with-jekyll.md @@ -0,0 +1,118 @@ +# Publishing Simple Books With Jekyll + +2019-06-20 + +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? + +Two reasons: + +- extremely easy to use +- total customization + +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! + +## No developer skills needed + +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 ([Jekyll Book Theme](https://github.com/henrythemes/jekyll-book-theme)) 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. + +## What are we creating? + +You can see the demo of the *online* and PDF versions of the book below: + +- [Jekyll Book Theme (Website)](http://henrythemes.github.io/jekyll-book-theme/) +- [Jekyll Book Theme (PDF Sample)](/public/jekyll-book-theme-sample.pdf) + +So without wasting anymore time, let's get started! + +## Table of Contents + +1. [Setup Jekyll](#setup-jekyll) +2. [Using the "Book" Jekyll Theme](#book-theme) +3. [Writing Chapters](#chapter-collections) +4. [HTML to PDF](#html-to-pdf) +5. [Closing Thoughts](#closing-thoughts) + +<h2 id="setup-jekyll">1. Setup Jekyll</h2> + +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: + +- [Installing Jekyll](https://jekyllrb.com/docs/installation/) + +Run through the simple step-by-step installation instructions based on your operating system. + +### Basic requirements + +- Ruby version 2.4.0 or above +- RubyGems +- GCC and Make (in case your system doesn’t have them installed) + +<h2 id="book-theme">2. Using the "Book" template</h2> + +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. + +Simply following the instructions on the main README page of the [jekyll-book-theme repo](https://github.com/henrythemes/jekyll-book-theme). + +**Important**: Take the time to edit the `title`, and `author` properties in the `_config.yml` file in the root directory. Make sure these reflect your own book's content. + +That's it. Now let's tell Jekyll how we want it to format our chapters. + +<h2 id="chapter-collections">3. Working with chapter collections</h2> + +By default, Jekyll will look for latest posts in the `_post` directory. This is useful for blogs and basic static websites - but not for us. We want chapters. + +### Using custom collections + +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: + +- `_chapters` + - `01.md` + - `02.md` + - `03.md` + - `etc..` + +### But the template already has this setup + +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". + +Teach a person to fish and all that jazz. + +Now all you need to do is break your chapters down into their own numbered markdown files inside `_chapters`. + +<h2 id="html-to-pdf">4. HTML to PDF</h2> + + + +Before you can convert your digital book "website", you need to install the `wkhtmltopdf` package. Download and follow the instructions below: + +- [wkhtmltopdf](https://wkhtmltopdf.org/) + +### Command line conversion + +In your terminal, navigate inside the `_site` folder of your jekyll build and then run the following command: + + + for f in *.html; do wkhtmltopdf -g -s Letter --no-background "$f" "${f/_*_/_}.pdf";done + + +Shortly after you should have a generated PDF file inside the `_site` folder - most likely named `index.html.pdf`. That's it! Enjoy your fully formatted PDF version of your book! + +<h2 id="closing-thoughts">5. Closing Thoughts</h2> + +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 *good* and *bad* bullet lists, let's do just that: + +**The Good** + +- Online version and PDF versions share same styling (keeps things consistent) +- Chapters are written in `markdown` (increased flexibility of writing apps etc.) +- Very fast and streamlined build process +- PDF format renders out the chapter headers for built-in navigation + +**The Bad** + +- Chapters are spit out as one long, single page (I'm sure this could be rectified with some custom work) +- More suited for short stories, papers, essay articles (not so great for epic novels) +- I'm sure there are other cons I am missing? + +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. + +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! diff --git a/posts/pure-css-simple-dropdown-plugin.md b/posts/pure-css-simple-dropdown-plugin.md new file mode 100644 index 0000000..522618c --- /dev/null +++ b/posts/pure-css-simple-dropdown-plugin.md @@ -0,0 +1,11 @@ +# Pure CSS Simple Dropdown Plugin + +2018-09-20 + +I find myself blowing away default browser `select` 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. + +Check out the CodePen below and feel free to morph it as you see fit for your own projects! + + + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/rZPzWy/) diff --git a/posts/quick-dirty-theme-switcher.md b/posts/quick-dirty-theme-switcher.md new file mode 100644 index 0000000..b66a2fc --- /dev/null +++ b/posts/quick-dirty-theme-switcher.md @@ -0,0 +1,130 @@ +# Quick and Dirty Theme Switcher + +2020-06-04 + + +**Update**: 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. + +--- + +*I recently added a fairly straightforward color scheme (theme) switcher* 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. + +<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> + +## The HTML + +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 `options` in a `select` element if you preferred that method) + + + <div class="color-select"> + <button onclick="toggleDefaultTheme()"></button> + <button onclick="toggleSecondTheme()"></button> + <button onclick="toggleThirdTheme()"></button> + </div> + + +That's it! Don't worry too much about the `onclick` 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 `html` element, like so: + + + <html class="theme-default"> + + +## The CSS + +Next we need to style both the `color-select` buttons, along with the custom color schemes that will alter the entire website. We will start with the color schemes. + +For these themes to swap seamlessly between each other, we will be setting our altering color sets as CSS variables: + + + .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); + } + + +Finally, we style the user-facing color swatches: + + + .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; + } + + /* 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; } + + +## The JavaScript + +We need to have each color swatch button trigger it's corresponding theme and swap out the `theme-default` class that we have originally attached to the main `html` element. We also need to store what the user has selected into `localStorage`, so their choice persists when reloading or navigating to other pages. + + + // Set a given theme/color-scheme + function setTheme(themeName) { + localStorage.setItem('theme', themeName); + document.documentElement.className = themeName; + } + + // Toggle between color themes + function toggleDefaultTheme() { + if (localStorage.getItem('theme') !== 'theme-default'){ + setTheme('theme-default'); + } + } + function toggleSecondTheme() { + if (localStorage.getItem('theme') !== 'theme-second'){ + setTheme('theme-second'); + } + } + function toggleThirdTheme() { + if (localStorage.getItem('theme') !== 'theme-third'){ + setTheme('theme-third'); + } + } + + // Immediately set the theme on initial load + (function () { + if (localStorage.getItem('theme') === 'theme-default') { + setTheme('theme-default'); + } + if (localStorage.getItem('theme') === 'theme-second') { + setTheme('theme-second'); + } + if (localStorage.getItem('theme') === 'theme-third') { + setTheme('theme-third'); + } + })(); + + +And that's it! Now it just depends on how custom you want each individual theme style to be. The possibilities are endless! + +## Extra Improvements + +You could improve this concept even further hiding the `color-select` 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. diff --git a/posts/rss-click.md b/posts/rss-click.md new file mode 100644 index 0000000..d794c1b --- /dev/null +++ b/posts/rss-click.md @@ -0,0 +1,45 @@ +# Clickable Links Inside XML + +2022-06-20 + +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. + +Before we begin, it should be noted that both Safari for macOS and *all* 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. + +## The Code + +Rendering your entry links as interactive URLs is fairly intuitive. You just need to: + +1. Tell the file which tag it needs to render as the "a:link" element +2. Set the inner child attribute to "href" +3. Set the value of that attribute to use the entry's `link` parameter + + + <xsl:element name="a"> + <xsl:attribute name="href"> + <xsl:value-of select="link"/> + </xsl:attribute> + <pre><xsl:value-of select="title"/></pre> + </xsl:element> + + +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: + + + <xsl:element name="a"> + <xsl:attribute name="href"> + <xsl:value-of select="link"/> + </xsl:attribute> + <pre><xsl:value-of select="link"/></pre> + </xsl:element> + + +## Live Example + +In a supported browser, you can see the code in action here: https://pblog.bt.ht/feed.xml + +That's really all there is to it. + +## Refs + +1. https://shinobi.bt.ht/posts/patch-3.txt diff --git a/posts/rss-hacks.md b/posts/rss-hacks.md new file mode 100644 index 0000000..0946f5c --- /dev/null +++ b/posts/rss-hacks.md @@ -0,0 +1,66 @@ +# RSS Hacks With XSLT + +2022-05-23 + +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 `patch-1` came with a solid amount of QoL improvements. If you're interested, I wrote about it on the official Shinobi blog[^1]. + +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. + +I then proceeded to fall down the XSLT rabbit hole. + +## It Never Works the First Time, Does It? + +Since the shinobi script generates valid RSS code by default, I didn't want to mess around _too_ 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 `pre` tags solved these issues. + +My first attempt was to use the available `sort` parameter (in XSL version 1.1+) targeting the `dc:date` type linked to the `pubDate` element: + + + <xsl:sort select="pubDate" data-type="dc:date" order="descending"/> + <!-- each individual post's content here --> + + +This did not work as intended. RSS 2.0 requires that the `pubDate` content is set to comply with the RFC-822 date-time[^3], which shinobi handles perfectly fine. The issue came from the XSL `sort` 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". + +If anyone knows why this failed to consistently order the posts via `pubDate`, please let me know using the comment link below. I'm far from an XSLT expert and might have overlooked something painfully obvious! + +## RSS Hack: Categories + +After spending far too much time reading over documentation, official manual pages and Stack Overflow comments I gave up on the `dc:date` sort. I realized I could sort the posts much easier if they were converted into a format similar to ISO 8601. But `pubDate` is required to be in RFC-822, so I couldn't alter that in the final XML file. + +Then I remembered the `category` tag which shinobi does not utilize by default. + +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 `category` tag. This was simple enough: + + + $(date -j -f "%a, %d %b %Y" "$(head -n 1 $file)" +"%Y/%m/%d/%u") + + +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 `sort` parameter properly: + + + <xsl:sort select="category" order="descending"/> + + +Everything worked perfectly and the RSS was still valid! + +### Patch-2 Pending + +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: + +[https://pblog.bt.ht/feed.xml](https://pblog.bt.ht/feed.xml) + +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. + +## Shinobi Updates + +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: + +[https://shinobi.bt.ht/feed.xml](https://shinobi.bt.ht/feed.xml) + +## Refs + +1. https://shinobi.website/ +2. https://shinobi.website/posts/patch-1.txt +3. http://len.falken.directory/ +4. https://validator.w3.org/feed/docs/error/InvalidRFC2822Date.html +5. https://git.sr.ht/~tdarb/shinobi-script/tree/patch-2 diff --git a/posts/rvm.md b/posts/rvm.md new file mode 100644 index 0000000..50610fb --- /dev/null +++ b/posts/rvm.md @@ -0,0 +1,40 @@ +# Installing Ruby with RVM on Alpine Linux + +2023-03-16 + +For some on-going projects I need to switch to different versions of `ruby`. Although there exist many step-by-step instructions on installing and configuring `rvm` for most Linux distros, there aren't many focused on Alpine "daily drivers". + +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! + +## Simple Setup + +Make sure you have the basic packages first: + +``` +apk update +apk add curl gcc gnupg gpg dirmngr procps musl-dev linux-headers zlib zlib-dev openssl openssl-dev libssl1.1 +``` + +Next download the latest `stable` version of `rvm` from Github, unpack it, place it in the proper user directory (~/.rvm) and install any required libs: + +``` +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 +``` + +Now we can remove everything and properly link to `rvm`: + +``` +cd ../ && rm -rf rvm-stable stable.tar.gz rvm +source ~/.rvm/scripts/rvm +``` + +Now you can freely install any version of Ruby that you desire! + +``` +rvm install ruby-X.X.X +``` diff --git a/posts/safari-default-dark-mode.md b/posts/safari-default-dark-mode.md new file mode 100644 index 0000000..14f48c0 --- /dev/null +++ b/posts/safari-default-dark-mode.md @@ -0,0 +1,63 @@ +# Dear Apple, Please Fix Safari's Default Dark Mode Link Color + +2022-04-18 + +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. + +## Support Dark Mode with Zero CSS + +A common practice is to include a `@media` query via CSS to target styling changes based on whether `dark-mode` is active. I tend to believe this is overkill for basic websites. Many developers aren't aware of the HTML `color-scheme` parameter. (This website itself is using it in place of CSS media queries) + +### HTML "color-scheme" + +Adding the following meta tag inside your document's `head` element, you can enable dark mode instantly with zero configuration: + + + <meta name="color-scheme" content="dark light" /> + + +There are minor caveats: + +1. You should not be specifying any `background` styling to your `body` or `html` elements +2. You should be not specifying any `color` styling across any of your readable content (paragraphs, headings, lists, blockquotes) + +That's it! In case you were curious, all major browsers support this color scheme meta tag: [https://caniuse.com/mdn-html_elements_meta_name_color-scheme](https://caniuse.com/mdn-html_elements_meta_name_color-scheme) + +## But Wait, What's This About Safari? + +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: + +<figure> +<img src="/public/images/firefox-dark-mode.webp" alt="Firefox dark mode example"> +<figcaption>Firefox's default dark mode link color</figcaption> +</figure> + +<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> + +Luckily for us there is a simple solution using minimal amounts of CSS[^1]: + + + @supports (color-scheme: dark light) { + @media screen and (prefers-color-scheme: dark) { + a:link {color: #9e9eff;} + a:visited {color: #d0adf0;} + a:active {color: red;} + } + } + + +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... + +## Apple: Fix Your Browser's Dark Mode + +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. + +Thanks for reading and happy dark mode to you all! + +## Refs + +1. Special thanks to [Seirdy](https://seirdy.one/) for suggesting the use of :link and :active support. I recommend you check out his take on [dark mode / theme support](https://seirdy.one/2020/11/23/website-best-practices.html#dark-themes). +2. This has an open ticket through [Webkit Bugzilla](https://bugs.webkit.org/show_bug.cgi?id=209851) diff --git a/posts/safari-extensions-catalina-patcher.md b/posts/safari-extensions-catalina-patcher.md new file mode 100644 index 0000000..50f92cb --- /dev/null +++ b/posts/safari-extensions-catalina-patcher.md @@ -0,0 +1,38 @@ +# Enabling Safari Extensions with the macOS Catalina Patcher + +2021-09-23 + +I have an old 2011 MacBook Air that is running the latest version of macOS Catalina thanks to the very wonderful [Catalina Patcher](http://dosdude1.com/catalina/) by dosdude1. This project has made it possible for me to run and test some of the latest software from Apple - namely Safari 15. + +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. + +- Close/Quit Safari completely +- Open the Finder and use the shortcut `⌘ Shift G` +- Paste the following to navigate to the proper folder: `~/Library/Containers/com.apple.Safari/Data/Library/Safari/AppExtensions` +- Open the `Extensions.plist` in your favourite text editor (I’m a big fan of Panic's Nova) +- Below each extensions `<dict>` tag, add the following: `<key>Enabled</key><true/>` +- Save the file and relaunch Safari + +Reference of what it should look like (AdBlock for this example): + + + <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> + + +After following those simple steps you should have working extensions in Safari. Have fun on your old, "unsupported" Apple devices! + diff --git a/posts/schools.md b/posts/schools.md new file mode 100644 index 0000000..f2ed666 --- /dev/null +++ b/posts/schools.md @@ -0,0 +1,76 @@ +# Schools Should Be Using Open Source Software + +2022-05-30 + +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. + +Word, Excel, PowerPoint. Why have these become the "standard" of text manipulation and processing? + +Photoshop. Illustrator. Why are these the first applications used for image editing and creation? + +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. + + +## The Internet + +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. + +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. + +Firefox, anyone? LibreWolf? Pale Moon? + +Any of these browsers can be easily managed and secured by school IT departments. It doesn't HAVE to be IE... + + +## Reducing Hardware Cost + +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. + +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 _run_ the operating system) all while still maintaining a high level of user/network security. + +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). + + +## Security + +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. + +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. + +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]. + + +## What About The "Job Market" + +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 _become_ these open platforms. The initial change just needs to be made. + +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. + + +## Looking Under the Hood + +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! + + +## Suggested Alternatives + +So what are these "open source" alternatives? Check out my simple suggestions below: + +MS Office Suite ==> LibreOffice Suite[^2] + +Photoshop ==> GIMP + +Illustrator ==> Inkscape + +IE/Edge ==> Firefox[^3] + +Coding IDE (optional) ===> vim + +You could easily expand upon these options, but for most elementary school task these are more than enough. + +## Refs + +1. Not _all_ IT workers in the school system fall into this category. But most of the underlining structure prevents them from changing much. +2. At least in my country of Canada. I can't speak for others. +3. `groff` 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. +4. As mentioned in the beginning of the post, I'd even suggest forks of Firefox -> LibreWolf or Pale Moon (if possible) diff --git a/posts/self-hosted-blogs.md b/posts/self-hosted-blogs.md new file mode 100644 index 0000000..a330b90 --- /dev/null +++ b/posts/self-hosted-blogs.md @@ -0,0 +1,31 @@ +# What Happened to Self-Hosted Blogs? + +2018-10-18 + +I remember a time on the internet<sup>1</sup> when everyone and their grandmother was running a personal blog. And I mean *personal* - not hosted on some side platform or a tacked-on addition to the rest of their website. + +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: + +1. A large community already exists under the Medium brand +2. It's easy to promote your own work and follow others +3. The platform is fairly easy to setup and implement + +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: + +- how did they decide to layout the page design? +- what typefaces have they decided to use? +- what back-end are they using? +- how does it look and feel on mobile? + +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. + +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. + +**All<sup>2</sup> blogs look identical now.** 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. + +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. + +## Refs + +<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> diff --git a/posts/self-hosting-fathom.md b/posts/self-hosting-fathom.md new file mode 100644 index 0000000..e3c6c9e --- /dev/null +++ b/posts/self-hosting-fathom.md @@ -0,0 +1,104 @@ +# Self-Hosting Fathom Analytics with DigitalOcean + +2021-02-02 + +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. + +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). + +With that cleared up - let's get into it! + +## Prerequisites + +1. One or more website(s) where you would like to include analytics +2. <a target="_blank" href="https://m.do.co/c/74b3fd11c07a">DigitalOcean account</a> (**this link will give you a $100 credit!**) +3. Positive attitude and passion for privacy-respecting analytics! + +## Create a Droplet + +Once your DigitalOcean account is setup, navigate to the <a target="_blank" href="https://marketplace.digitalocean.com">Marketplace</a> and search for `Fathom Analytics`. Then click the `Create Fathom Analytics Droplet`. + +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 **$5/month** Basic Shared CPU option is your best bet. + +<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> + +Select the data-center region based on where most of your traffic originates from. I would suggest enabling `IPv6` and setting up your authentication via SSH instead of a regular password system. Adding backups is entirely at your own discretion. + +Once you're ready, click **Create Droplet**. + +## Enter the Matrix (not really) + +Once DigitalOcean finishes spinning up your new droplet, open a terminal and connect to it by entering: + + + ssh root@YOUR_DROPLET_IP + + +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. + +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. + +## Domains + +You'll most likely want to host this instance on your own domain or subdomain - instead of connecting directly via the droplet's `IP`. Head over to your **Networking** page in the sidebar of DigitalOcean and add your custom domain. + +Then, click on that newly added domain - we need to add some new records. You're going to add two new `A` records to this domain: + +<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> + +The last thing you need to do is set your nameservers to point to DigitalOcean: + + + ns1.digitalocean.com + ns2.digitalocean.com + ns3.digitalocean.com + + +Give it some time to propagate and you'll be in business! + +## SSL FTW + +There is hardly a good reason not to practice security on the web, so setting up your new analytics to be served over `HTTPS` is just the smart thing to do. Did I mention that this is completely free as well? See - no excuses. + +In order to get a free SSL certificate setup, you'll need to install `certbot`. While connected to your droplet, enter the following: + + + sudo apt-get install python-certbot-nginx + + +Once installed, enter the following to setup SSL (remember to swap out the domain with your own): + + + certbot --nginx -d your-cool-domain.com + + +Follow the steps (it's very quick and easy) and you'll have `HTTPS` setup in a jiffy! + +## The Final Lap + +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! + +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! diff --git a/posts/setting-up-free-ssl.md b/posts/setting-up-free-ssl.md new file mode 100644 index 0000000..538281c --- /dev/null +++ b/posts/setting-up-free-ssl.md @@ -0,0 +1,19 @@ +# Setting Up a Free SSL + +2018-08-07 + +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 `https` protocol. + +Luckily, Cloudflare offers a very simple way to implement SSL on your website - and it's free! + +### SSL in 3 easy steps + +1. 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) +2. 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) +3. From the main Cloudflare dashboard navigate to the Crypto tab. Then under the SSL section, select "Flexible" from the dropdown. + +### Enjoy your newly secure site + +That's it! Give it a bit of time and soon your website will support `https` and best of all it costs you nothing! + +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. diff --git a/posts/seven-years.md b/posts/seven-years.md new file mode 100644 index 0000000..f1c67ca --- /dev/null +++ b/posts/seven-years.md @@ -0,0 +1,41 @@ +# Blogging for 7 Years + +2023-06-24 + +My [first public article](/aui) was posted on June 28th 2016. That was *seven* years ago. + +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... + +## Fun Facts + +**This Blog**: + +I originally started blogging on `bradleytaunt.com` using WordPress, but since then I have changed both my main domain and blog infrastructure multiple times. At a glance I have used: + +- Jekyll +- Hugo +- Blot +- Static HTML/CSS +- [PHPetite](https://phpetite.bt.ht) +- [Shinobi](https://shinobi.bt.ht) +- [pblog](https://pblog.bt.ht) +- [barf](https://barf.bt.ht) *Currently using!* + + +**Personal:** + +As with anyone over time, the personal side of my life has seen the biggest *updates*: + +- Married the love of my life (after knowing each other for ~14 years!) +- Moved out into rural Ontario for some peace and quiet +- Had three wonderful kids with said wife (two boys and a girl) +- Started noticing grey sprinkles in my stubble (I guess I can officially call myself a "grey beard"?) + +**Professionally:** + +- Pivoted heavily into UX research and design for a handful of years (after working mostly with web front-ends) +- Recently switched back into a more fullstack development role to challenge myself and learn more + +## Nothing Special + +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!
\ No newline at end of file diff --git a/posts/sharing-the-things-we-use.md b/posts/sharing-the-things-we-use.md new file mode 100644 index 0000000..7b0423d --- /dev/null +++ b/posts/sharing-the-things-we-use.md @@ -0,0 +1,11 @@ +# Sharing The Things We Use + +2021-07-24 + +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 *how* they work. + +Since I realized how much I enjoy reading other people's *uses* 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. + +Fell free to check it out: [The Things I Use](/uses) + +*PS. I plan to add a desktop picture of my complete setup once I find the time!* diff --git a/posts/shinobi-website.md b/posts/shinobi-website.md new file mode 100644 index 0000000..dc7c3e3 --- /dev/null +++ b/posts/shinobi-website.md @@ -0,0 +1,70 @@ +# This Site is Now a Shinobi Website + +2022-05-13 + +**Update 2023**: this website is now built with [barf](https://barf.bt.ht) + +- - - + +My personal website is now an RSS-focused blog, generated from a collection of plain text files. + +But before we get into greater details about the switch, let me first introduce the concept of a "shinobi website". + +## The Shinobi Website Project + +Instead of repeating myself in this post, feel free to read up about the project at the official site: + +[https://shinobi.bt.ht](https://shinobi.bt.ht) + +To summarize: by using a simple `shell` 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 `xml` 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] + +## Why the Change? + +I'm a hardcore minimalist at heart and have a tendency to make my own personal projects _leaner_ 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. + +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 _another_ radical change? + +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. + +So here we are. Blogging in plain text. + +## Avoiding Link-Rot + +I've manually added this blog post to my original `feed.xml`, in order to help inform those of you following that feed of this change. But this will be the last entry of that feed. + +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! + +As for the older HTML-based articles, no worries. They will remain on this site under the standard `blog` directory so that old links don't break or cause conflicts. You can find that directory here: + +[https://tdarb.org/feeds/posts.xml](https://tdarb.org/feeds/posts.xml) + + +## Tutorials and Demos + +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. + +Feel free to comment below if you have any suggestions! Preferably one that respects user privacy and advocates for a more open web. + + +## Speaking of Comments... + +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? + +It might not be the most user friendly or sustainable but I think it could be an interesting experiment at the very least! + +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. + + +## Closing Thoughts + +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 `.txt`. + +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. + +Thanks for taking the time to read my jumbled thoughts. + +## Refs + +1. Users can _of course_ still visit the individual article `.txt` files in their browser, if they so wish. +2. https://tdarb.org/blog/my-static-blog-publishing-setup.html +3. https://tdarb.org/blog/poormans-comment-system.html diff --git a/posts/shiny-css-buttons.md b/posts/shiny-css-buttons.md new file mode 100644 index 0000000..f568a49 --- /dev/null +++ b/posts/shiny-css-buttons.md @@ -0,0 +1,96 @@ +# Shiny, Animated CSS Buttons + +2021-04-27 + +Everyone can appreciate fancy, animated buttons - but often times they come with a performance cost: *JavaScript*. Luckily for us, we can create our very own shiny, animated buttons with pure CSS. + +## The Demo + + + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/oNBQevj) + +## The HTML + +Nothing fancy going on here, just a set of `ahref` elements with specific `button` classes added: + + + <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> + + +## The CSS + +First we set the default base styling for all the buttons. We also place the inner text into `span` elements (I will explain why in a little bit): + + + .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; + } + + +Now we need to create our *shiny* element that will pass across the button on `hover` or `focus`. For this object we will use the `before` pseudo element: + + + .button:before { + background: linear-gradient(transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%); + content:''; + height: 200%; + position: absolute; + right: calc(100% + 20px); + top: -55%; + transform: rotate(-70deg); + transition: .6s ease-in-out right; + width: 80px; + z-index: 0; + } + + +Next, we tell the `before` element to swipe across the main `.button` parent element when the user hovers or focuses on it. Remember placing our inner content into a `span` element? That insures that our shiny/swipe element doesn't position itself *over* the text, but instead flows under it: + + + .button:hover:before { + right: -100%; + } + /* 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; + } + + +All that's left is adding some visual flare to each individual button - in this case background-color and border-color: + + + .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; } + + +## Browser Support + +These buttons work across all browsers flawlessly. See the details [on the caniuse report itself](https://caniuse.com/css-gencontent). + +## The Live CodePen + +You can find the live demo embedded at the top of this post, or [directly on CodePen here](https://codepen.io/bradleytaunt/pen/oNBQevj). diff --git a/posts/simple-accessibility.md b/posts/simple-accessibility.md new file mode 100644 index 0000000..6796e55 --- /dev/null +++ b/posts/simple-accessibility.md @@ -0,0 +1,23 @@ +# Simple Accessibility + +2018-09-07 + +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: + +## Basic design + +1. Test that your project has the proper contrast color settings between type, backgrounds, icons etc. +2. Only use "fancy" grid-ordering for minor layout design - avoid rearranging important content via CSS + +## Content + +1. Use proper HTML structures (aside, header, main, footer elements as needed) +2. Make use of the [aria-label attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) +3. Ensure your website/app can be navigated completely (and properly) with only a keyboard + +## Images + +1. Avoid using CSS backgrounds for content images (should only be used for patterns, layout design etc.) +2. Ensure proper `alt` attributes are provided on all images + +It isn't much - but follow these basics and you'll be one step closer to providing better accessibility to your users. diff --git a/posts/simple-does-not-mean-ugly.md b/posts/simple-does-not-mean-ugly.md new file mode 100644 index 0000000..aff0cfd --- /dev/null +++ b/posts/simple-does-not-mean-ugly.md @@ -0,0 +1,72 @@ +# Simple Does Not Mean Ugly + +2019-03-26 + +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. + +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. + +Your job as a designer is to focus on the user experience journey and understand what those users *expect* to happen - not what *you want* to happen. This is a very delicate balance of design “give and take”, hence why simple designs always seem to work best. + +**But simple does not mean “ugly”**. + +## Ugly Simple + +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). + +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. + +Cap Watkins wrote a post back in 2014 where he explained his admiration for [boring designers](https://capwatkins.com/blog/the-boring-designer) 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. + +## Fixing Simple + +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. + +### 1. Hidden Navigations + +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. + +The *hamburger* 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 **additional** interaction. That is the opposite of simple. + +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, **use the space available**. + + + +### 2. Buttons Not Looking Like Buttons + +It’s difficult for users to actually **do** 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. + +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: + + + +You tell me what looks more interactive... + +### 3. Overriding Form Elements + +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. + +For example, you should leave the following `select` element as is: + + + <select> + <option> + </select> + + +Instead of doing something like this: + + + <select style="display:none;"></select> + <div class="custom-select-container"> + <span>Option</span> + </div> + + +There are cleaner ways to customize web forms with straightforward CSS. Have a look at my own open source project [Normform](https://normform.netlify.com/) if you’d prefer to just use a lightweight plugin to do this for you. (Shameless plug, I know) + +## Simple Can Be Good + +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. + +The *experience* is what needs to be simple for your users - the UI itself should still be beautiful. diff --git a/posts/simple-jekyll-navigation.md b/posts/simple-jekyll-navigation.md new file mode 100644 index 0000000..64faf04 --- /dev/null +++ b/posts/simple-jekyll-navigation.md @@ -0,0 +1,55 @@ +# Simple Navigation Setup in Jekyll 3.9.0 + +2020-09-29 + +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 `nav` elements in Jekyll (3.9.0 as of this writing). + +## Creating the Directories & Files + +In your Jekyll project, at the top level, you need to create a directory called `_data`. Inside this folder we will be creating a new file called `navigation.yml`. The contents of this file will contain all your navigation links and they are rendered like so: + + + - title: Home + url: / + + - title: Articles + url: /articles/ + + - title: About + url: /about/ + + +## Dynamically Rendering the Navigation + +The next and final step is rendering out the navigation with a simple loop: + + + {% for item in site.data.navigation %} + <li> + <a href="{{ item.url }}"><span>{{ item.title }}</span></a> + </li> + {% endfor %} + + +## Highlight Current Page + +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: + + + {% for item in site.data.navigation %} + <li> + {% if item.url == page.url %} + <a class="active" href="{{ item.url }}"><span>{{ item.title }}</span></a> + {% else %} + <a href="{{ item.url }}"><span>{{ item.title }}</span></a> + {% endif %} + </li> + {% endfor %} + + + + /* Custom styling for active class */ + li a.active { color: red; } + + +Congrats! You now have fully functional, dynamic navigation on your Jekyll site. diff --git a/posts/skip-to-content.md b/posts/skip-to-content.md new file mode 100644 index 0000000..965c15c --- /dev/null +++ b/posts/skip-to-content.md @@ -0,0 +1,69 @@ +# Skip to Content Button + +2019-03-25 + +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. + +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: + +- speeds up user interaction with the content you **want** them to see +- on subsequent pages the user shouldn't need to tab through the entire navigation each time + +## The HTML + +For the sake of this demo we will assume that we currently have the following navigation setup in our project: + + + <nav role="navigation"> + <a href="/">Home</a> + <a href="/about">About</a> + <a href="/archive">Archive</a> + <a href="/atom.xml">RSS</a> + </nav> + + +Now for the easy part - adding our simple content skip link with it's own custom `skip-content` class: + + + <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> + + +<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> + +## The CSS + +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 `absolute` position style instead of setting the display property to `none`, since the display property technique will fully remove the element from the DOM (bad accessibility practices). + + + a.skip-content { + background: grey; + color: white; + left: -9999px; + padding: 0.5rem; + position: absolute; + top: 0; + } + + +## Almost there + +Now we just re-position the element when the user focuses on the link with a keyboard tab: + + + a.skip-content:focus { + left: 1rem; /* Whatever desired position */ + } + + +## All Done + +This is a very basic accessibility win you can implement in your current projects with next to zero effort. Enjoy! diff --git a/posts/slabtop.md b/posts/slabtop.md new file mode 100644 index 0000000..11e190f --- /dev/null +++ b/posts/slabtop.md @@ -0,0 +1,43 @@ +# Converting My X201 ThinkPad into a Slabtop + +2023-05-01 + +I recently wrote [about physically disabling the WiFi toggle switch on my X201](/x201/) which was a fun "hack" to an annoying issue I was running into. Since then, the laptop has been running flawlessly. + +The only other *minor* 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. + +So, what were my options to remedy this problem? + +1. Swap out and upgrade the laptop's display (not many options for this though) +2. Connect an external display, keyboard, mouse and dock the X201 +3. Something else? + +## Looking into "Something Else" + +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... + +Then I thought to myself, "Why not just remove the display *entirely*?" + +So that's what I did. + +<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> + +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 [already exists](https://www.ifixit.com/Device/Lenovo_Thinkpad_X201_Tablet). But once you have the keyboard and hinge screws removed it is essentially as easy as *lifting* the lid out of the chassis. (After disconnecting the small display connectors, of course) + +## Ditching Alpine for Debian + +I love Alpine Linux. It's normally my [go-to distro](https://as.bt.ht) (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, `xrandr`, 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 *old*. + +<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> + +## Closing Thoughts + +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). + +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!
\ No newline at end of file diff --git a/posts/slow.md b/posts/slow.md new file mode 100644 index 0000000..761f25d --- /dev/null +++ b/posts/slow.md @@ -0,0 +1,63 @@ +# Embracing Slow Tech + +2022-11-22 + +I'm writing this post on my "new" X260 ThinkPad running [Garuda Linux](https://garudalinux.org/) 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 `vim` as the default EDITOR and installing a small collection of applications (Bitwarden, qutebrowser etc). + +I ran into some headaches with generating proper SSH keys but that was solved by calling in `ssh-agent` 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!) + +"Okay", I hear you say, "But what does this have to do with *slow tech*?" + +Good question! Let me explain. + +## Purposely Unplugged + +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 *bad thing* 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. + +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 *purposely unplugged*. I decided to make a personal change towards my online access: + +> If something is important, then I will take the time to complete that task at **my office computer**. I do not need to be "always online". + +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. + +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? **You are not important enough to be "available online" all the time**. Sorry, but it's true. + +## Mobile Sucks Anyway + +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. + +Functional computing and online interactions have already been perfected. It's called a **computer**[^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. + +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. + +Not to mention *cost*. 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? + +Get a *real* 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. + +Overall - just use a *real* computer. + +## Don't Flip-Out + +So, with all of that in mind, I swapped out my iPhone SE (2020) smart phone for the ZTE Cymbal 2 "dumb" flip phone. + +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. + +**But I absolutely love it**. + +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 *days* not hours. It's rugged, so I don't need to be so delicate with it or slap some huge protective case on it. + +It does its job. No more, no less. + +## "Good for You" + +I know that some of you reading this might think that this workflow is fine for *me* 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 *believe* 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. + +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. + +Thanks for reading. + +## Refs + +1. It helps that I have pretty much zero active accounts across most "popular" social media platforms. +2. Some of you readers might not have ever experienced the wonders of T9... +3. I understand that even smart phones can be classified as "computers". I am using this term in the classical sense. diff --git a/posts/soma-terminal-css.md b/posts/soma-terminal-css.md new file mode 100644 index 0000000..201fe8c --- /dev/null +++ b/posts/soma-terminal-css.md @@ -0,0 +1,211 @@ +# SOMA Inspired Terminal Display with CSS + +2021-05-29 + +A few years back I played (and loved) [SOMA](https://store.steampowered.com/app/282140/SOMA/), 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. + +Three years ago I wanted to see if I could recreate one of those terminal displays with HTML & CSS. And I did just that. + +So, why am I writing about this *three years later*? 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! + +## The Live Demo + + + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/ZEeLgmz) + +## The HTML + +Nothing fancy going on here - just some simple `div` elements holding a few paragraphs and spans: + + + <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> + + +## The CSS + +Let's just dump all the CSS right here (don't worry, it looks far more complicated than it really is): + + + @import url('https://opentype.netlify.com/sansation/index.css'); + + * { + 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://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); + 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: ''; + height: 538px; + left: 15px; + position: absolute; + top: 11px; + width: 720px; + } + + .screen { + background: #000 url("https://image.ibb.co/gOqSz7/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://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: ''; + 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: '键'; + 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); + } + + +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 `Sansation` typeface, since this is what the game uses for most UI elements and terminals. (I'm loading in this font via my [OpenType side project](https://opentype.netlify.app)) + +The most important properties that truly bring this design together are those associated with the `.outer-frame` and `.screen` pseudo elements. Both of these elements use custom `background-images` that give a little more depth and life to the terminal - in this case fingerprints, dust and smudges. + +Feel free to swap these image textures out with your own and alter the terminal as you see fit! diff --git a/posts/spec.md b/posts/spec.md new file mode 100644 index 0000000..254f572 --- /dev/null +++ b/posts/spec.md @@ -0,0 +1,31 @@ +# Never Do Spec Work for Free + +2022-11-07 + +Your time is valuable and shouldn't be taken for granted. Let me say that again for the people in the back: *your time is valuable and shouldn't be taken for granted*. 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. + +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. + +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? + +## Never? + +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, **they need to pay you**. These companies (large or small) would *laugh* at the concept of doing something free for you. Why is their time respected but yours isn't? + +## Asking for Free Spec Work? Stop. + +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. + +The software world is a strange beast where we have adapted this "work for free before we *think* about paying you". Imagine implementing this system for something like a plumber? + +"Hey, could you install this new sink for me - for **free**? Then, if I think you did a good job, I can start to pay you for other work around my house?" + +Good luck with that. + +## Be Confident + +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 **never** paid off. Literally and figuratively. Learn through my own mistakes and just walk away from people asking you to work for free. + +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: + +**Never work for free** -- Unless you *choose* to work for free on something like a personal or open source project. That is obviously a different situation! diff --git a/posts/srht2.md b/posts/srht2.md new file mode 100644 index 0000000..ea4a5d6 --- /dev/null +++ b/posts/srht2.md @@ -0,0 +1,51 @@ +# Migrating from GitHub to sourcehut + +2022-11-14 + +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 [sourcehut.org](https://sourcehut.org). I'll get into the *why* and *how* momentarily, but first let's take a look at all the impacted projects: + +## Ported Projects + +- [Vanilla CSS](https://vanillacss.com) +- [1mb.club](https://1mb.club) +- [pblog](https://pblog.bt.ht) +- [shinobi](https://shinobi.bt.ht) +- [Web Audit](https://audit.bt.ht) + +## Still WIP + +- [1kb.club](https://1kb.club) +- [phpetite.org](https://phpetite.org) + +*Some others are being worked on but have less "popularity"* + +## Why? + +GitHub has landed itself in some hot water with their [recent lawsuit(s) surrounding their Copilot feature](https://githubcopilotlitigation.com/). 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 *straw*, if you will. + +*>> Sourcehut has entered the chat <<* + +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 **Typical Hacker** tier on [sourcehut](https://sourcehut.org/pricing/), 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! + +## Git Email? Jump into the Deep End + +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. + +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. + +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. + +Drew (creator of sourcehut) actually put together an extremely helpful guide on getting [setup with git send-email](https://git-send-email.io/). 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. + +## Wrapping Up + +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. + +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. + +For those interested, my sourcehut public profile is: [https://sr.ht/~bt/](https://sr.ht/~bt/). Maybe I'll see you on the other side ;) + +## Refs + +1. I keep an up-to-date document of all the open source software/communities I pay for on [my "Uses" page](/uses) for reference. +2. Put your pitchforks and torches away - I'm aware that a web-facing UI exists on sourcehut as well! diff --git a/posts/stay-hungry.md b/posts/stay-hungry.md new file mode 100644 index 0000000..05f3c85 --- /dev/null +++ b/posts/stay-hungry.md @@ -0,0 +1,27 @@ +# Stay Hungry + +2018-02-12 + +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? + +What about programming languages? Should I learn as many as possible or should I become an expert in one specialized area? *Should designers code?<span class="sidenote-number"></span>* The list of possible *new* things you could be learning continues to grow. +<span class="sidenote">This is sarcasm. Please don't take this seriously...</span> + +## Jumping right in + +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 *zero* interest in it? + +## Less talk, more action + +So what am I currently doing to keep my mind fresh and thinking outside of my comfort zone? + +- Teaching myself the R programming language +- Deep diving into the `ggplot2` package +- Developing my first side project website using `blogdown` and Hugo +- Trying out Figma as my exclusive design program for the next few months + +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. + +There is no real reason to avoid learning something new outside your current circle of knowledge - only crappy excuses. + +Get on it. diff --git a/posts/sticky-elements.md b/posts/sticky-elements.md new file mode 100644 index 0000000..5292cbf --- /dev/null +++ b/posts/sticky-elements.md @@ -0,0 +1,65 @@ +# Stop Using Sticky Navigation on Mobile + +2019-10-06 + +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. + +## What do you mean by "sticky"? + +The concept of *sticky* elements include but are not exclusive to: + +- Navigations that follow users as they scroll +- Chatbot prompt bubbles eating up half the bottom of the screen +- Banners or modal prompts that pester the user to "sign up, accept cookies" etc. + +**These are bad and you should feel bad for implementing them.** 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. + +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. + +## The stalking navigation + +When you make a decision to eat away `>50px` 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. + +"Wait!" I hear sticky-nav defenders exclaim, "this navigation bar makes it so the user can *easily* interact with the site's pages!" + +**What absolute rubbish.** A user should only see a website's navigation when they *need to use it*. This isn't rocket science. + +Let's a take a look at the problem: + +<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> + +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: + +<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> + +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 *watched it scroll out of view*. 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. + +## The best of both worlds? + +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 *somewhat* intrusive on the user. An easy way achieve this is by displaying the navigation when users perform a specific action, such as: + +- Long or multiple upward swipes on the page +- Pull down menu from top of current view (easily shown to user) + +<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> + +## Navigations aren't the only culprits + +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: + +- Chatbot or support "bubbles" +- "Agree to our cookies" prompts +- Time-based pop-up modals + +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. + +Stay *static*, my friends! diff --git a/posts/still-using-jquery.md b/posts/still-using-jquery.md new file mode 100644 index 0000000..0c26229 --- /dev/null +++ b/posts/still-using-jquery.md @@ -0,0 +1,30 @@ +# Yes, I Still Use jQuery + +2019-04-15 + +I have seen a handful of condescending comments from front-end developers since the newest build of jQuery ([3.4.0](http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/)) 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 *useful* library comes off as entitled or elitist. + +- "Why would you use jQuery nowadays?" +- "People are still developing this library?" +- "Why use jQuery when you can use [insert latest trendy web tech here]". + +**I still use jQuery**. 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. + +## Use what works for you + +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? + +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 *properly*. + +I tend to follow these principles when working on a project (with shared equal importance): + +- fast performance +- accessible +- simple UI +- intuitive UX + +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. + +So use whatever tools make you a happier developer, as long as your projects don't suffer because of them. + +<small><sup>1</sup>This would obviously be terrible for development, but its just an extreme example</small> diff --git a/posts/stripe-menu-css.md b/posts/stripe-menu-css.md new file mode 100644 index 0000000..4e2c2e3 --- /dev/null +++ b/posts/stripe-menu-css.md @@ -0,0 +1,35 @@ +# Stripe Menu Dropdowns (CSS) + +2020-03-31 + +In a previous article I wrote, [Minimal CSS: Dropdown Menus](blog/minimal-css-menu), 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. + +## What we want to emulate + +I think, like most designers, that the UI and web design work from the [Stripe](https://stripe.com/) 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: + +<b>They don't work if JavaScript is disabled.</b> + +But we can easily fix that. So enough chit-chat, let's rip-off their menu design and recreate it with only CSS! + +### Original ([Stripe Website](https://stripe.com)) + +<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> + +### Our recreation ([CodePen Demo](https://codepen.io/bradleytaunt/full/ExjMjLL)) + +<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> + +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. + +## See it live in action + +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! + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/ExjMjLL) diff --git a/posts/sublime.md b/posts/sublime.md new file mode 100644 index 0000000..ddf70f3 --- /dev/null +++ b/posts/sublime.md @@ -0,0 +1,55 @@ +# Launching Sublime Text with dmenu on Alpine Linux + +2023-04-13 + +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 *native* code. I prefer running programs that don't try to devour all of my machine's available memory or spike my CPU. + +> **Note**: 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... + +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. + +The only minor downside is that it isn't *fully* open source. Personally, I think it is well worth buying a license directly from the developers to support their efforts. + +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>] + +## One Small Problem... + +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). + +You'll need to install flatpak, give your current user permission to install flatpak apps, and then install Sublime. + +(The following snippets assume you are using `doas`. If you are using `sudo`, be sure to swap accordingly) + +``` +apk add flatpak +adduser <YourUsername> flatpak +flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo +``` + +Congrats. You now have setup `flatpak` on your machine! Next we install Sublime Text: + +``` +flatpak install flathub com.sublimetext.three +``` + +You could stop now and simply open Sublime anytime by running the following command in your terminal: + +``` +flatpak run com.sublimetext.three +``` + +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. + +## Creating System Links + +``` +doas ln -s ~/.local/share/flatpak/exports/bin/com.sublimetext.three /usr/bin/sublimetext +``` + +Now that those directories are linked, simply open dmenu and start typing `sublimetext`. Done and done. No more terminal commands needed to open Sublime! + +- - - + +<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>
\ No newline at end of file diff --git a/posts/suckless.md b/posts/suckless.md new file mode 100644 index 0000000..34ced38 --- /dev/null +++ b/posts/suckless.md @@ -0,0 +1,71 @@ +# I Want to Suckless and You Can Too + +2022-12-23 + +## The Desire to Suckless + +While I have been happy with my [previous desktop setup](/alpine) using Wayland on Alpine Linux, I just couldn't shake the urge to fully embrace the [suckless ecosystem](https://suckless.org). 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. + +But I'm getting ahead of myself... + +## What is Suckless? + +I'm not going to spend too much time repeating what you can [already read on the suckless.org website itself](https://suckless.org/philosophy/), but in a nutshell: + +> Software with a focus on simplicity, clarity, and frugality. + +The developers also pride themselves on catering to *advanced and experienced computer users*, 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. + +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! + +## Let's Get Started + +So I made my decision. I would (at the very least) *try* switching my daily driver over to a completely "suckless" system. But I was immediately faced with my first obstacle: *which distro should I use*? + +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... + +So what's left? Void? Arch? Something fresh, like Metis? I really didn't know the "best" choice. Maybe there were just *too many* options? + +Luckily, I did know of a distro that was my go-to for most projects... + +## Trying Alpine + +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]. + +Having just rolled my own [installer script](https://git.sr.ht/~bt/alpine-linux-setup) 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 *bare minimum* list of requirements I needed to get a proper desktop system running: + +- working suspend/awake +- working audio +- working wifi/networking +- reduced screen tearing (X11 gave me problems in the past with this) + +As you can see, I have very low expectations. But there were issues.... + +1. I could not build my blog locally (built via Jekyll) since the `sass-embedded` dependencies has not been built against musl-libc. +2. VSCodium would require the extra "bloat" of the flatpak manager (not to mention the spotty support some applications have through flatpak/snap). +3. The distro/system *feels* like it was better designed with Wayland in mind. Too often I felt like I was losing an uphill battle wrestling against Alpine. + +## Getting Sucked into the Void + +After mentioning my struggles on Mastodon, some [helpful friends suggested taking a look at Void](https://fosstodon.org/@tdarb/109554576434981872). I always knew of the project but never used it as a "daily driver". Since this was overall one *large* experiment, I figured I'd give it a shot. + +I'm glad I did. Void Linux is *pretty great*. + +The installer seemed more complex than Alpine at first, but I found an excellent walkthrough [here](https://linuxiac.com/void-linux-installation/) (which I was more beginner-friendly than the official docs). Once everything was set, it was time to run my suckless "installer". + +## Introducing void-suck + +If you don't care about the nitty-gritty details, feel free to just jump over to the [void-suck repo on scourehut](https://git.sr.ht/~bt/void-suck) and read through the code yourself. There is nothing groundbreaking here. A huge inspiration came from [mad-ara's "void-rice" project on Github](https://github.com/mad-ara/void-rice) - so a big thanks to him for making that project in the first place! + +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 [suckless.org](https://suckless.org). + +Everything *should* work out of the box, but in case it doesn't please [open a ticket](https://todo.sr.ht/~bt/void-suck) or [submit a patch](https://lists.sr.ht/~bt/void-suck). I'm certain I overlooked some items! + +## Closing Thoughts + +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... + +## Refs + +1. 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. +2. 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...
\ No newline at end of file diff --git a/posts/super-mario-blocks-css.md b/posts/super-mario-blocks-css.md new file mode 100644 index 0000000..309b719 --- /dev/null +++ b/posts/super-mario-blocks-css.md @@ -0,0 +1,222 @@ +# Super Mario Blocks in CSS + +2019-02-15 + +Just because we can, let's make a quick demo on how to build interactive elements based off the original Mario punch blocks. + +What our final product will look like: + + + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/JjEPOVe) + +## The HTML + +The set of Mario blocks doesn't require a huge amount of effort for it's `html` structure, we only need: + +- Parent div for each block +- Checkbox input +- Checkbox label +- Inner label divs to represent the block "dots" + +**Sidenote**: This is only how *I* 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. + + + <!-- 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> + + +Now we just add as many default blocks we want, along with the interactive punch block (`.mario-block--question`): + + + <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> + + +## The CSS + +First we need to remove the default `checkbox` input styling and place all new styling on it's corresponding `label`. + + + /* Mario block parent div */ + .mario-block { + display: inline-block; + height: 80px; + margin-right: -7px; /* Fixes inline-block margin bug */ + position: relative; + width: 80px; + } + + /* Hide default checkbox input */ + .mario-block input { + position: absolute; + visibility: hidden; + z-index: -1; + } + + +Now to target the `label` elements found inside the block: + + + /* Style checkbox label accordingly */ + .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%; + } + + +Next we style our included `.dots` elements to be placed in the four corners of each block: + + + .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; + } + + +### Punch-able block + +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 `svg` question mark I created. + + + .mario-block--question label { + cursor: pointer; + } + .mario-block--question .question-mark { + background-image: url('/public/images/mario-block-question-mark.svg'); + background-position: center; + background-repeat: no-repeat; + background-size: 40px; + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: 1; + } + + +### The last piece + +The last item we need to design is the `checked` state of the interactive question mark block. The extra inner dark dashes will be added as `pseudo` elements: + + + /* 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 */ + .mario-block input:checked + label .dot, + .mario-block input:checked + label .question-mark { + display: none; + } + + /* Shared pseudo element styling */ + .mario-block input:checked + label:before, + .mario-block input:checked + label:after { + content: ''; + height: 20px; + position: absolute; + transform: rotate(45deg); + width: 20px; + } + + /* Right dash */ + .mario-block input:checked + label:before { + border-right: 4px solid #070000; + right: 18px; + top: 15px; + transform: rotate(45deg); + } + + /* Left dash */ + .mario-block input:checked + label:after { + border-left: 4px solid #070000; + left: 18px; + top: 15px; + transform: rotate(-45deg); + } + + +That's it! + +## Taking it further + +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 `filter` properties. diff --git a/posts/tabbed-content.md b/posts/tabbed-content.md new file mode 100644 index 0000000..b016b56 --- /dev/null +++ b/posts/tabbed-content.md @@ -0,0 +1,249 @@ +# Tabbed Content Without JavaScript + +2019-01-28 + +Creating tabs is a fairly trivial and common practice in web design, but many times it requires JavaScript to properly implement. Fortunately it *is* possible to create tabbed content with only using CSS. + + + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/abjmayw) + +--- + +<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> + +## The HTML + +The skeleton for this component is fairly basic - we just need the following structure: + +1. Parent element for each tab item +2. Default radio input +3. Label linked to corresponding input +4. Inner content associated with each tab item + + + <!-- Simple main container for all elements --> + <div class="tabs"> + + <!-- Parent container holding for individual tab item --> + <div class="tab-item"> + + <!-- Default radio input --> + <input class="tab-input" type="radio" name="tabs" id="tab-1"> + + <!-- Label connected to radio input via `id` and `for` attributes --> + <label class="tab-label" for="tab-1">Tab 1</label> + + <!-- Full inner content of current tab item --> + <div class="tab-content">Content goes here</div> + + </div> + + </div> + + +Full HTML for reference: + + + <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> + + +## The CSS + +First, we need to set each `input`, `label` and inner content into their own parent containers: + + + /* Main parent that holds all contents */ + .tabs { + height: 100%; + min-height: 250px; + position: relative; + } + + /* Each tab items (includes heading & content) */ + .tab-item { + display: inline; + } + + +Next, we will hide the default `radio` input and design our labels to resemble a basic web tab element. The `z-index` property on the label is important for how we will be stacking our content on the z-axis (labels above inner content for example). + + + /* Hide the default radio inputs */ + .tab-input { + position: absolute; + visibility: hidden; + } + + /* The main tab headings */ + .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; + } + + +The main inner content of each tab needs to have an `absolute` position set as it's default, since the one currently selected will switch to `relative` on mobile (more on that in a moment): + + + /* The inner tab content */ + .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; + } + + +The final step is just telling the browser to style both the `label` and inner content of the currently selected radio `input`: + + + /* Style the currently selected tab label */ + .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; + } + + /* Show the currently selected tab content */ + .tab-input:checked ~ .tab-content { + border: 1px solid #eee; + z-index: 1; + } + + +It's as simple as that! For reference, here is the entire CSS file for easier access: + + + /* Main parent that holds all contents */ + .tabs { + height: 100%; + min-height: 250px; + position: relative; + } + + /* Each tab items (includes heading & content) */ + .tab-item { + display: inline; + } + + /* Hide the default radio inputs */ + .tab-input { + position: absolute; + visibility: hidden; + } + + /* The main tab headings */ + .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; + } + + /* The inner tab content */ + .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; + } + + /* Style the currently selected tab label */ + .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; + } + + /* Show the currently selected tab content */ + .tab-input:checked ~ .tab-content { + border: 1px solid #eee; + z-index: 1; + } + + +## Don't forget about mobile + +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: + + + @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; + } + } + + +## One minor caveat + +Even though I'm a pretty big fan of implementing tabs this way, there is a small drawback: + +The `height` of the inner content doesn't grow dynamically since it defaults as `absolute`, so a `min-height` or `height` 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. + +Other than that, enjoy building some JavaScript-free tabs! diff --git a/posts/tables.md b/posts/tables.md new file mode 100644 index 0000000..31bec8d --- /dev/null +++ b/posts/tables.md @@ -0,0 +1,125 @@ +# Making Tables Responsive With Minimal CSS + +2019-06-11 + +<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> + +--- + +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. + +My recent article, [Write HTML Like It's 1999](/html-like-1999), received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how `table` elements don't play nice with mobile devices or that it's not possible to have a useable layout on smaller screens. *This simply isn't true*. + +Included below are two separate demos showing how to optimize `table` 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 `div` elements to *look* like tables. + +## Demo 1: Just let them scroll + +Okay I will admit, this implementation isn't the *greatest* but I find it does work well with huge datasets. Simply set a `min-width` on your parent `table` element and the browser will just require the user to scroll the contents horizontally. + + + table { + min-width: 800px; /* Set your desired min-width here */ + } + + +Check out the CodePen below to see it in action: + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/ewObbW/) + +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. + +## Demo 2: More <u>flex</u>ible than you think + +Using something like `flexbox` tends to work better when you are working with smaller table datasets. All you need to do is add some minor `flexbox` layout at your targeted mobile screen size. + + + /* Using 800px as mobile screen in this example */ + @media(max-width: 800px) { + /* Hide the table headings */ + 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; /* Removes double-borders */ + width: 50%; + } + } + + +[Check out the CodePen demo](https://codepen.io/bradleytaunt/pen/mZbvOb/) + +There are some caveats with this approach: + +1. We currently hide the `thead` row when in mobile view (only visually - screen readers can still scan it) +2. Some more custom work might be needed depending on how many items per `flexbox` row makes sense (based on project and dataset) + +You could keep the table headings and style them the same as the `tbody` 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 `span` elements inside the main `tbody` elements like so: + + + /* Default span styling - hidden on desktop */ + 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; + } + + /* Simple CSS for flexbox table on mobile */ + @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; /* additional padding to avoid heading overlap */ + position: relative; + width: 50%; + } + /* Show the heading span */ + table td span { + display: block; + } + } + + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/mZdzmZ/) + +**Updated**: As pointed out by user [mmoez](https://news.ycombinator.com/user?id=mmoez), it is far less repetitive to use `:nth-child` pseudo selectors to implement the heading fields on mobile (as outlined in this [CSS-Tricks article](https://css-tricks.com/responsive-data-tables/)). + +## Why should I care to use `table` elements? + +Simply put: **accessibility** and **proper semantics**. + +Why use a screwdriver when you need a hammer? Sure, you can make that screwdriver look and *almost* work the same as a hammer, but for what purpose? Just use the damn hammer<sup>1</sup>. + +Have fun making your tables responsive! + +<small><sup>1</sup> I know, this is a terrible analogy...</small> diff --git a/posts/te.md b/posts/te.md new file mode 100644 index 0000000..1950c74 --- /dev/null +++ b/posts/te.md @@ -0,0 +1,19 @@ +# The Wonders of Text Ellipsis + +2016-11-15 + +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). + +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: + +[CodePen live example](https://codepen.io/bradleytaunt/pen/OgpzyY/) + +Luckily, 3 simple CSS parameters can fix this. + + input::placeholder { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + +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. diff --git a/posts/text-align-justify.md b/posts/text-align-justify.md new file mode 100644 index 0000000..e5ca05e --- /dev/null +++ b/posts/text-align-justify.md @@ -0,0 +1,28 @@ +# Text Align: Justify + +2019-05-22 + +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 `center`, `left` and `right` are used often with this property, but a more forgotten option is `justify`. + +## What does justify do? + +The MDN web docs define the `justify` value for `text-align` as such: + +<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> + +### See it in action + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/vwpmNz/) + +## When should I use this? + +It isn't always appropriate to use `justify` in most instances, although it becomes very useful for long form articles or blog posts. Since it takes a heavy influence from original *print* book layouts, the `justify` value helps improve readability for larger chunks of content. + +**Fair warning**: it is best to remove any `justify` 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. + +## Browser support + +The good news is that all major browsers support the `justify` value for the `text-align` CSS property. So have some worry-free fun with it! diff --git a/posts/they-wont-wait.md b/posts/they-wont-wait.md new file mode 100644 index 0000000..3129915 --- /dev/null +++ b/posts/they-wont-wait.md @@ -0,0 +1,68 @@ +# They Won't Wait: A Warning for Slow Websites + +2019-06-25 + +*Your website is probably slow*. 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. + +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? + +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. + +> It's in my nature, I always liked **speed**. +> +> <cite>- Guy Lafleur<cite> + +## We can do better + +If there is only one thing that you learn from this post, hopefully it's knowing to better value the **time and money of your users**. It's a user's *choice* 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. + +Let's do an analogy, because **I love stupid analogies**: + +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. + +Once inside you realize the hardware store is *very big* 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 *finally* listen to your question. They then tell you where to find the hammers. + +Does this sound like a *fast* and easy experience? + +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 *customers* - 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. + +## Data doesn't lie + +If my terrible analogy wasn't enough to convince you to implement better performance on your website, then maybe some "BIG DATA" will. + +- [Amazon (PowerPoint, slide #15)](https://web.archive.org/web/20081117195303if_/http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt): 100 ms of latency resulted in 1% less sales. +- [Google (video)](https://youtu.be/6x0cAzQ7PVs?t=936): 500 ms caused a 20% drop in traffic. +- [Walmart (slide #46)](https://www.slideshare.net/devonauerswald/walmart-pagespeedslide): a 100 ms improvement brought up to 1% incremental revenue +- [Mozilla](https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/): Shaving 2.2 seconds off page load time increased downloads by 15.4% +- [Yahoo](https://www.slideshare.net/stubbornella/designing-fast-websites-presentation/23-1_Create_a_component_library): 400 ms resulted in a 5 to 9% drop in traffic + +<small>All data taken from [instant.page](https://instant.page) (which I am a huge fan of ♥)</small> + +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. + +## Small and easy wins + +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) + +- Reduce the number of web requests + - [HTTP Requests](https://developers.google.com/web/fundamentals/performance/get-started/httprequests-5) +- Use web-safe fonts when available or if using custom fonts utilize the `font-display` property + - [CSS Font Stack](https://www.cssfontstack.com/) + - [Font Display for the Masses](https://css-tricks.com/font-display-masses/) +- Make proper use of *critical CSS* + - [How to Use Critical CSS](https://alexwright.net/web-design-secrets/how-to-use-critical-css/) + - Automatically generate CSS based on "above the fold": [criticalCSS](https://github.com/filamentgroup/criticalCSS) +- Process all media (images / videos) through 3rd party tools + - [Cloudinary](https://cloudinary.com/) + - [Kraken.io](https://kraken.io/) + - [Piio](https://piio.co/) + - Sidenote: this blog uses the [jekyll-cloudinary](https://nhoizey.github.io/jekyll-cloudinary/) plugin to automatically process images +- Use "just-in-time" preloading (highly recommended for improved UX) + - [Instant Page](https://instant.page/) +- Avoid using heavy tech-stacks whenever possible + - Unless it is a critical use-case, users should not have to process or download extra resources + - This also includes remove ads, pop-ups, 3rd party sign-up prompts, cookie notifications, over-the-top element animations, and all other **garbage**. This impacts *UX* performance, which is just as crucial as website loading speed + +## No need to be extreme + +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 *golden standard* 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. diff --git a/posts/use-text-not-icons.md b/posts/use-text-not-icons.md new file mode 100644 index 0000000..aa10832 --- /dev/null +++ b/posts/use-text-not-icons.md @@ -0,0 +1,55 @@ +# Icons Should be Complementary - Text is Always Better + +2021-12-17 + +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 *looking* 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. + +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: + +**Using icons to represent an action or function without textual information**. + +If you decide to stop reading the rest of this article, at least take away this one important thing: + +> *Always try to use text to convey your designs* + +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 *right*. + +## Icons make an *ass* out of *u* and *me* + +Icons make general assumptions about what the user may or may not understand. Leading with this in your designs will end *poorly for you*. 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. + +I've found the only thing you should ever *assume* is that the user knows nothing. Please note - I'm not referring to their intelligence but instead their software literacy. + +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. + +**Quality is not measured by mass appeal.** + +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?" + +Original software designers (and developers) held all the power in early UI decision making. General users didn't *know* 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!" + +Hogwash. Make it a button that says, `Save File`. 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. + +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. + +## The hamburger menu is the 7th circle of Hell + +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. + +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 *scroll*, let them. + +I've discussed this in further detail here: [Using Hamburger Menus? Try Sausage Links](https://bt.ht/hamburger-menu-alternative/) + +## But what of the "advanced" users? + +I understand applications will have advanced or "pro" users that have full knowledge of the product and wouldn't need things *spoon fed* 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. + +## Try for yourself + +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. + +## Refs + +1. By "design" I'm referring to visuals not programming or system engineering +2. Early software programs did save to an external floppy disk. My point stands that many digital file storage applications copied this iconography blindly. +3. 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. diff --git a/posts/user-select.md b/posts/user-select.md new file mode 100644 index 0000000..7564ea7 --- /dev/null +++ b/posts/user-select.md @@ -0,0 +1,48 @@ +# Using User-Select + +2019-06-04 + +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? + +## Introducing the CSS property + +Simply put, the `user-select` property is defined as follows: + +> `user-select` controls whether the user can select text (cursor or otherwise) + +## The CSS + +The property's available attributes are very straightforward (just remember to target specific browsers for full support!) + + + /* Default */ + p.default { + user-select: auto; + -moz-user-select: auto; + -webkit-user-select: auto; + } + + /* 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 */ + p.select-all { + user-select: all; + -moz-user-select: all; + -webkit-user-select: all; + } + + +## Let's see it in action + +Try selecting the separate paragraph elements in the CodePen below: + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/QRooZp/) + +## Browser Support + +The great news is `user-select` is fully supported across all modern browsers (even as far back as IE10!) diff --git a/posts/vscode.md b/posts/vscode.md new file mode 100644 index 0000000..289d8ce --- /dev/null +++ b/posts/vscode.md @@ -0,0 +1,33 @@ +# Running VSCode in Chromium on OpenBSD + +2023-06-05 + +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 *hacky* workaround to solve this problem. + +## VSCode in the Browser + +I tried my best to build something like `code-server` locally and run that directly in my browser - but I failed miserably. Instead, I fell back on [vscode.dev](https://vscode.dev) which is essentially a remote version of `code-server`. + +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. + +> **Note:** The following assumes you have already installed `chromium` + +First we need to disable [unveil](https://man.openbsd.org/unveil.2) for Chromium. This will allow us to access our system files through [vscode.dev](https://vscode.dev) using the "Open folder..." or "Open file..." commands without issue: + +``` +chrome --disable-unveil +``` + +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: + +``` +ENABLE_WASM=1 chrome --enable-wasm +``` + +Success! We can avoid typing out these complex commands everytime we want to launch our editor by setting up an `alias` (in my case via `.zshrc`): + +``` +alias vscode="ENABLE_WASM=1 chrome --enable-wasm --disable-unveil" +``` + +That's it! Now I can just pop open VSCode on OpenBSD by simply running `vscode` in my terminal. Hopefully this can help others slowly transition over to OpenBSD - which you should do because it is amazing!
\ No newline at end of file diff --git a/posts/webfonts.md b/posts/webfonts.md new file mode 100644 index 0000000..4f69c0d --- /dev/null +++ b/posts/webfonts.md @@ -0,0 +1,35 @@ +# Stop Using Custom Web Fonts + +2023-03-14 + +I recently read an excellent post by Manu Moreale titled [A rant on web font licenses](https://manuelmoreale.com/a-rant-on-web-font-licenses). 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. + +I was trying to understand how we ended up in a situation where web/UI designers (myself included) have started to *insist* on using proprietary, custom web fonts. Do any users actively benefit from custom web fonts? Are there any *useful* and *measurable* goals achieved by including them? Do end-users actually *care* about a website's typeface? + +For the most part, I believe the answer to all those questions is: **not really**. + +## System Fonts Look Good + +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 *terrible* typefaces that actually make things more difficult to read and break basic accessibility. + +All of this for the sake of a company's "brand". I say: **fuck your brand**. Your end-users should always trump your design "guidelines". Period. + +## "Think of the Consistency!" + +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. + +And what about users with browser extensions that already block your custom web fonts? Screw them I guess? + +People work on different systems with different constraints and settings. Embrace that - don't try to override it. + +## Loss of Personality + +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 *task* - 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 *flair* on your lowercase "t" doesn't help the user better interact with your features or UI. It just slows them down. + +## Hurting Performance & Wasting Resources + +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. + +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. + +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 *nice* thing to do.
\ No newline at end of file diff --git a/posts/width-vs-flex-basis.md b/posts/width-vs-flex-basis.md new file mode 100644 index 0000000..534a42f --- /dev/null +++ b/posts/width-vs-flex-basis.md @@ -0,0 +1,62 @@ +# Width or Flex-Basis? + +2018-11-28 + +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 `inline-block` paired with `width` and `flex-basis`. + +## Width + +Setting the width of the inner children to a divisible value and setting their display to `inline-block`, we are able to create self-wrapping elements: + + + .width-container { + display: block; + } + .width-container__item { + display: inline-block; + width: calc(33% - 3px); /* Fix for wonky inline-block margins */ + } + + +### Pros + +- <a href="https://caniuse.com/#search=inline-block">Full browser support</a> (as far back as IE6) +- No floats needed + +### Cons + +- Buggy `margin` workaround needed +- Wrapped elements cannot dynamically fill remaining empty parent space + +## Flex-basis + +This is my personal preference for dynamically wrapping inner children elements. Simply set the parent as `display: flex`, allow flex-wrapping and then set the `flex-basis` of the children to any percentage value. + + + .flex-container { + display: flex; + flex-wrap: wrap; + } + .flex-container__item { + flex: 1 1 auto; + flex-basis: 33%; + } + + +You will also notice the `flex` property set to `1 1 auto`. This is important if you require your wrapped elements to fill the remaining space of the parent container. + +### Pros + +- No buggy margins to play with +- Dynamically renders children to fill parent container if `flex` is set +- Scales well across screen / device sizes + +### Cons + +- Some versions of IE struggle with <a href="https://caniuse.com/#search=flex-basis">browser support</a> + +## CodePen Demo + +Feel free to play around with a slightly more stylized version of both options below: + +<a href="https://codepen.io/bradleytaunt/pen/JevaYQ">CodePen Demo: Width or flex-basis</a> diff --git a/posts/windows.md b/posts/windows.md new file mode 100644 index 0000000..ff5c44b --- /dev/null +++ b/posts/windows.md @@ -0,0 +1,52 @@ +# Setting Up Jekyll on Windows
+
+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.
+
+## WSL
+
+The first step involves installing [WSL](https://docs.microsoft.com/en-us/windows/wsl/install) 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:
+
+1. Opening PowerShell or Command Prompt as an administrator
+2. Installing via the command: `wsl --install`
+3. Restarting your machine after the install completes
+4. Creating your UNIX username and password
+
+## Installing Ruby & Dependencies
+
+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 `rvm` and the [official project documentation](https://github.com/rvm/ubuntu_rvm) does a very good job of walking you through this.
+
+- Be sure dependencies as installed: `sudo apt-get install software-properties-common`
+- Add the PPA and install the package:
+
+
+ sudo apt-add-repository -y ppa:rael-gc/rvm
+ sudo apt-get update
+ sudo apt-get install rvm
+
+
+- Add your existing user to the `rvm` group: `sudo usermod -a -G rvm $USER`
+
+You will need to close and restart your session to your Ubuntu system for these changes to take. After that, we can use `rvm` to install the latest version (at this time of writing) of ruby:
+
+
+ rvm install 3.1.2
+
+
+That's it!
+
+## Jekyll - Finally!
+
+The final step is to update our gems and install Jekyll:
+
+
+ gem update
+ gem install jekyll bundler
+
+
+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!
diff --git a/posts/wp-enqueue-for-beginners.md b/posts/wp-enqueue-for-beginners.md new file mode 100644 index 0000000..2d5667f --- /dev/null +++ b/posts/wp-enqueue-for-beginners.md @@ -0,0 +1,95 @@ +# WP Enqueue for Beginners + +2020-05-05 + +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 `header` and `footer` templates. This is perfectly _fine_, but there is a cleaner way to include these files. + +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!) + +## Introducing WP Enqueue + +The description of Wp Enqueue from the WordPress documentation: + +<blockquote class="wp-block-quote"> + <p> + Registers the style [script] if source provided (does NOT overwrite) and enqueues + </p> +</blockquote> + +In a nutshell: Placing a `wp_enqueue_script` or `wp_enqueue_style` script in the `functions.php` of your custom theme tells WordPress to pull external files into the header or footer of your website. Best practice being: _styles into the header, scripts into the footer_. + +I suggest you read the official documentation for more details: [wp\_enqueue\_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/) and [wp\_enqueue\_style](https://developer.wordpress.org/reference/functions/wp_enqueue_style/). + +## Enqueue Stylesheets + +The default script to enqueue a CSS stylesheet: + + + wp_enqueue_style( $handle, $src, $deps, $ver, $media ); + + +- `$handle` - the name associated with your stylesheet +- `$src` - URL pointing to the directory of the stylesheet itself +- `$deps` - An array of any other stylesheets needed as dependencies +- `$ver` - The version number of the stylesheet (used for cache busting) +- `$media` - Specify media type (`all`, `print`, `screen`, etc.) + +So, with all those parameters in mind, here is what a standard default enqueue of a CSS stylesheet looks like: + + + wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800,900', '', '1.0', ''); + + +In this example we have rendered the following: + +- `$handle`: google-fonts +- `$src`: https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800- 0 +- `$deps`: Null (left blank) +- `$ver`: 1.0 +- `$media`: Null (left blank) + +**Important:** Keep in mind that the `wp_enqueue_style` script will render the stylesheet link into the WordPress header automatically. + +## Enqueue Scripts + +The default script to enqueue an external JS file: + + + wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); + + +- `$handle` - the name associated with your script +- `$src` - URL pointing to the directory of the script itself +- `$deps` - An array of any other scripts needed as dependencies +- `$ver` - The version number of the script (used for cache busting) +- `$in_footer` - Set whether the script is loaded in the `<head>` or just before the `</body>` + +With all those parameters in mind, here is what a standard default enqueue of a Javascript file looks like: + + + wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/bxslider.js', array('jquery'), '1.0.0', true ); + + +In this example we have rendered the following: + +- `$handle`: bxslider +- `$src`: get\_template\_directory_uri() . /js/bxslider.js' +- `$deps`: array(jquery') +- `$ver`: 1.0.0 +- `$in_footer`: True (_places script before closing body tag_) + +## Packaging Everything Together + +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 `functions.php` file: + + + // 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 ); + } + + add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts'); + + +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! diff --git a/posts/x201.md b/posts/x201.md new file mode 100644 index 0000000..49ac53d --- /dev/null +++ b/posts/x201.md @@ -0,0 +1,54 @@ +# Bypassing the WiFi Hardware Switch on the Lenovo X201 + +2023-04-02 + +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. + +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...*almost* perfect. There is one small annoyance: + +**The physical WiFi kill switch**. + +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. + +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. + +So I listed out my possible options: + +1. Whitelist my BIOS WiFi settings (requires flashing BIOS) and install a newer wifi card, hoping the problem fixes itself +2. Purchase a replacement WiFi card (maybe mine was just buggy??) +3. Block PIN20 on the existing Wifi card +4. Somehow disconnect the hardware killswitch (requires soldering which I have ZERO experience with) + +Out of pure laziness, I chose option **three**. 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. + +## Opening Up the X201 + +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 *expected* 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. + +> 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. + +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. + + + + + + + + + + + +## Electrical Tape Fixes Everything + +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. + +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 *single* 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! + + + +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. + +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. + +Enjoy less flaky WiFi.
\ No newline at end of file diff --git a/posts/x220.md b/posts/x220.md new file mode 100755 index 0000000..77c77c1 --- /dev/null +++ b/posts/x220.md @@ -0,0 +1,90 @@ +# The X220 ThinkPad is the Best Laptop in the World + +2023-09-26 + +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. + +It's a mess out there. But thank goodness I still have my older, second-hand X220. + +## Specs + +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: + +- CPU: Intel i7-2640M (4) @ 3.500GHz +- GPU: Intel 2nd Generation Core Processor +- Memory: 16GB DDR3 +- OS: Arch Linux / OpenBSD +- Resolution: 1366x768 + +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. + +## Build Quality + +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). + +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. + +The X220 is also *not* 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. + +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 [stopped using an external monitor](/monitor), so I might be a little biased. + +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. + +## 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. + +The X220 comes equipped with: + +- 3 USB ports (one of those being USB3 on the i7 model) +- DisplayPort +- VGA +- Ethernet +- SD Card Reader +- 3.5mm Jack +- Ultrabay (SATA) +- Wi-Fi hardware kill-switch + +Incredibly versatile and ready for anything I throw at it! + +## Keyboard + +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 `Print Screen`, `Home`, `End`, and `Scroll Lock`. + +They're also an absolute *joy* 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 *why* they did it - I just think it's stupid). + +Did I mention these classic keyboards come with the extremely useful Trackpoint as well? + +## Battery Life + +> **Author's Note:** 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. + +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. + +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 *open up* 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 *optional*. 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. + +## Repairability + +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! + +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> + +## Bonus Round: Price + +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. + +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! + +## What More Can I Say? + +Obviously the title and tone of this article is all in good fun. Try not to take things so seriously! But, I still *personally* believe the X220 is one of, if not *the* best laptop in the world. diff --git a/public/images/acer-chromebook-11.webp b/public/images/acer-chromebook-11.webp Binary files differnew file mode 100644 index 0000000..04c0f32 --- /dev/null +++ b/public/images/acer-chromebook-11.webp diff --git a/public/images/alpine-1.jpg b/public/images/alpine-1.jpg Binary files differnew file mode 100644 index 0000000..9335036 --- /dev/null +++ b/public/images/alpine-1.jpg diff --git a/public/images/apple-mail-1.png b/public/images/apple-mail-1.png Binary files differnew file mode 100644 index 0000000..8f2d14b --- /dev/null +++ b/public/images/apple-mail-1.png diff --git a/public/images/apple-mail-2.png b/public/images/apple-mail-2.png Binary files differnew file mode 100644 index 0000000..cd22215 --- /dev/null +++ b/public/images/apple-mail-2.png diff --git a/public/images/aqua-ui-css-buttons.webp b/public/images/aqua-ui-css-buttons.webp Binary files differnew file mode 100644 index 0000000..0f0cede --- /dev/null +++ b/public/images/aqua-ui-css-buttons.webp diff --git a/public/images/automator-2.png b/public/images/automator-2.png Binary files differnew file mode 100644 index 0000000..523ae04 --- /dev/null +++ b/public/images/automator-2.png diff --git a/public/images/automator-2.webp b/public/images/automator-2.webp Binary files differnew file mode 100644 index 0000000..6660e29 --- /dev/null +++ b/public/images/automator-2.webp diff --git a/public/images/automator.png b/public/images/automator.png Binary files differnew file mode 100644 index 0000000..baa4450 --- /dev/null +++ b/public/images/automator.png diff --git a/public/images/automator.webp b/public/images/automator.webp Binary files differnew file mode 100644 index 0000000..665586d --- /dev/null +++ b/public/images/automator.webp diff --git a/public/images/avatar.png b/public/images/avatar.png Binary files differnew file mode 100644 index 0000000..8a40ae3 --- /dev/null +++ b/public/images/avatar.png diff --git a/public/images/big-sur-css.webp b/public/images/big-sur-css.webp Binary files differnew file mode 100644 index 0000000..d8f42a3 --- /dev/null +++ b/public/images/big-sur-css.webp diff --git a/public/images/bradley-taunt-photo.webp b/public/images/bradley-taunt-photo.webp Binary files differnew file mode 100644 index 0000000..783db28 --- /dev/null +++ b/public/images/bradley-taunt-photo.webp diff --git a/public/images/bridge.webp b/public/images/bridge.webp Binary files differnew file mode 100644 index 0000000..5993ce8 --- /dev/null +++ b/public/images/bridge.webp diff --git a/public/images/browser-history-01.webp b/public/images/browser-history-01.webp Binary files differnew file mode 100644 index 0000000..64ffdc9 --- /dev/null +++ b/public/images/browser-history-01.webp diff --git a/public/images/browser-history-02.webp b/public/images/browser-history-02.webp Binary files differnew file mode 100644 index 0000000..8483487 --- /dev/null +++ b/public/images/browser-history-02.webp diff --git a/public/images/browser-history-03.webp b/public/images/browser-history-03.webp Binary files differnew file mode 100644 index 0000000..cab53a0 --- /dev/null +++ b/public/images/browser-history-03.webp diff --git a/public/images/browser-history-04.webp b/public/images/browser-history-04.webp Binary files differnew file mode 100644 index 0000000..306d47e --- /dev/null +++ b/public/images/browser-history-04.webp diff --git a/public/images/browser-history-05.webp b/public/images/browser-history-05.webp Binary files differnew file mode 100644 index 0000000..c6c077d --- /dev/null +++ b/public/images/browser-history-05.webp diff --git a/public/images/buttons.webp b/public/images/buttons.webp Binary files differnew file mode 100644 index 0000000..093c086 --- /dev/null +++ b/public/images/buttons.webp diff --git a/public/images/chat-bot-1.png b/public/images/chat-bot-1.png Binary files differnew file mode 100644 index 0000000..b42702e --- /dev/null +++ b/public/images/chat-bot-1.png diff --git a/public/images/chrome-os-devices-2.webp b/public/images/chrome-os-devices-2.webp Binary files differnew file mode 100644 index 0000000..d6f22c6 --- /dev/null +++ b/public/images/chrome-os-devices-2.webp diff --git a/public/images/chrome-os-devices.webp b/public/images/chrome-os-devices.webp Binary files differnew file mode 100644 index 0000000..ddfe1a7 --- /dev/null +++ b/public/images/chrome-os-devices.webp diff --git a/public/images/coffee-couple.svg b/public/images/coffee-couple.svg new file mode 100644 index 0000000..d9b5dad --- /dev/null +++ b/public/images/coffee-couple.svg @@ -0,0 +1,549 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Generator: Adobe Illustrator 12.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 51448) --> +<svg + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns="http://www.w3.org/2000/svg" + xmlns:cc="http://web.resource.org/cc/" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:ns1="http://sozi.baierouge.fr" + id="Layer_1" + xml:space="preserve" + overflow="visible" + viewBox="0 0 482.062 271.916" + version="1.1" + enable-background="new 0 0 482.062 271.916" + > +<g + clip-rule="evenodd" + fill-rule="evenodd" + > + <path + d="m318.47 7.368c-0.804 0.82-0.825 2.175 1.124 1.685-1.207 2.494-4.285 1.852-7.864 2.808-5.234 1.398-10.568 5.703-15.727 4.494 1.104-3.029 4.981-3.639 7.863-5.055 4.15-2.037 7.34-4.488 14.61-3.932z" + /> + <path + d="m393.17 10.176c6.013 1.292 1.113 10.569-2.247 11.234-0.229 1.353 1.026 1.221 0.562 2.808-2.452-0.767-1.194 2.175-3.37 1.685-0.504-0.993-1.355-1.64-1.685-2.809 2.37-4.198 4.97-8.144 6.75-12.918z" + /> + <path + d="m312.85 12.984c5.957-0.527 9.755 1.104 11.795 4.493-2.963 0.586-5.43-3.835-10.672-2.808-0.36-0.571-1.29-0.581-1.12-1.685z" + /> + <path + d="m338.69 20.848c-1.867-0.182-0.609 2.761-3.37 1.685 0.472 0.652 0.74 1.506 0.562 2.809-0.955 0.207-1.06-0.438-1.123-1.124-1.171-2.013-4.466-1.9-5.056-4.493 3.18-1.615 7.16-3.699 8.99 1.123z" + /> + <path + d="m399.35 20.848h3.37c0.483 0.453 0.334 1.539 1.124 1.685 0.554 2.934-1.966 4.521-3.37 6.179-1.042 1.23-0.454 2.392-1.124 2.808-1.234 0.769-3.419 1.344-5.055 0.562 0.3-5.126 4.61-6.247 5.05-11.234z" + /> + <path + d="m320.15 21.971c5.263 1.491 8.776 6.552 13.479 10.11-1.109 1.324-1.842 3.026-2.246 5.055-6.57-2.22-10.56-7.03-11.23-15.165z" + /> + <path + fill="#FFFFFF" + d="m137.61 25.903c0.987 4.487-5.24 4.317-7.863 3.37-0.741 2.518-8.374 2.294-11.233 4.493-1.23-1.168 0.493-1.815-0.562-2.808-2.062 0.391-4.27 0.969-6.179 0-2.078 0.267-0.988 2.702-1.685 3.932-0.213 0.375-1.553 0.297-1.685 0.562-0.416 0.832 0.93 1.311 0.562 2.247-0.654 1.664-4.165 1.93-2.809 4.494-2.814 0.58-3.825 1.148-5.055 2.247-2.179-4.984 6.714-10.598 10.672-14.604 0.598-0.605 1.755-2.466 2.247-2.808 7.08-4.942 15.62-1.604 23.57-1.125z" + /> + <path + d="m207.26 28.149c0.722 3.295-2.557 4.177-3.932 2.247 0.47-1.58 1.59-2.523 3.93-2.247z" + /> + <path + fill="#FFFFFF" + d="m165.69 28.711c0.454 2.139-1.646 1.724-1.685 3.37-4.191 0.447-5.455-2.035-8.987-2.247 2.78-0.896 6.99-0.011 10.68-1.123z" + /> + <path + fill="#FFFFFF" + d="m142.66 29.834h1.685c0.158 0.907-0.531 0.967-0.562 1.685h-1.124v-1.685z" + /> + <path + d="m208.94 31.52h1.685c11.614 7.438 19.517 26.541 10.672 39.317-2.486 3.591-9.519 7.767-13.48 10.671-4.302 3.155-12.489 10.201-11.795 18.536 0.251 3.016 2.883 5.404 3.37 7.863 1.181-1.401-0.664-4.554-0.562-6.74 3.566 2.161 2.127 11.851 1.124 15.727-3.585-0.215-1.639 5.102-4.494 5.617 0.249-6.213 3.017-9.428 2.247-14.604-0.889-5.98-5.476-9.665-1.685-17.412 0.356-0.727 2.061-2.858 2.809-3.932 2.795-4.009 5.966-5.802 10.11-8.987 4.432-3.405 7.574-5.709 11.234-9.548 4.603-7.774 1.681-18.534-2.809-25.837-3.542-2.075-4.578-6.655-8.425-8.425 0.05-1.535-0.93-1.133 0-2.249zm-10.11 82c-0.97 3.72 1.44-4.54 0 0z" + /> + <path + d="m321.84 35.451c-2.538 0.803-4.396-0.835-7.302-0.562-3.864 0.364-7.527 3.935-10.672 2.808 2.56-5.566 14.02-7.219 17.97-2.246z" + /> + <path + fill="#FFFFFF" + d="m146.6 33.205c0.664-1.513 2.929 0.002 3.932 0-0.85 1.698-2.47-0.466-3.93 0z" + /> + <path + d="m353.85 40.506c-5.591-2.579-14.222-0.668-18.535-3.37 4.78-4.087 17.75-4.253 18.53 3.37z" + /> + <path + d="m366.77 34.89c0.907-0.158 0.967 0.531 1.685 0.562 0.398 3.19-1.655 5.369 1.685 5.617-0.282 2.475-6.309 7.508-7.302 2.247 1.71 0.704 2.185 0.429 3.37-0.562-2.92-2.522 1.52-3.955 0.56-7.864z" + /> + <path + fill="#FFFFFF" + d="m287.58 39.383c2.696-0.263 1.616 3.266 0.562 3.932-1.63-0.011-1.33-3.174-0.56-3.932z" + /> + <path + d="m308.92 39.383h1.685c0.238 1.174-0.385 1.487-0.562 2.247 3.93 0.189 8.214 0.024 10.11 2.247-0.048 2.573-4.059 1.184-5.617 2.247-0.901 0.783-0.598 2.772-1.685 3.37-1.492-0.006-3.208 0.212-3.932-0.562-0.158-1.469 0.205-2.416 1.685-2.247-0.916-1.33-3.297-1.196-4.493-2.247 1.62-1.006 1.84-3.404 2.81-5.055z" + /> + <path + fill="#FFFFFF" + d="m108.96 42.191c-1.407 3.835-5.143 5.342-6.179 9.548-1.175-0.51-1.712-1.658-1.685-3.37 3.03 0.475 3.98-5.662 7.86-6.178z" + /> + <path + d="m358.35 42.753c1.109 0.389 1.497 1.499 1.686 2.809-1.76 0.256-1.8-1.201-1.69-2.809z" + /> + <path + d="m360.6 43.876c0.955-0.207 1.06 0.438 1.123 1.123-0.478-0.103-0.529 0.219-0.562 0.562-0.66-0.09-0.48-1.023-0.56-1.685z" + /> + <path + d="m350.48 46.123c3.29 0.747-2.03 2.653 0 0z" + /> + <path + d="m354.98 46.123c1.532 1.276 2.567 3.05 5.617 2.809 0.074 1.384 0.085 2.706-0.562 3.37-1.531-3.431-3.683 1.665-7.302 1.124 0.157-2.089 3.352-1.142 3.932-2.808-1.664-1.445-3.611 1.606-6.74 0.562 0.16-3.202 3.22-3.512 5.05-5.057z" + /> + <path + d="m371.83 48.37c0.277 4.868-1.273 21.604-7.863 12.357 1.312-0.185 2.32-0.675 3.37-1.124-0.432-2.678 0.793-3.7 2.246-4.493-2.994-1.433-1.348-4.068-3.37-6.178 1.53-0.478 4.07-1.823 5.61-0.562z" + /> + <path + d="m265.67 78.7c-4.098-1.145-7.655-2.829-7.863-7.863 2.123-2.079 1.174-2.851 1.685-6.179 0.255-1.657 1.274-1.672 1.123-2.808-0.91-6.854-8.839-8.983-15.165-11.233-0.158-0.907 0.531-0.967 0.562-1.685 7.2 1.342 15.716 3.159 16.851 10.671 0.645 4.266-3.692 9.383-2.809 12.919 0.92 3.698 6.79 2.77 5.61 6.178z" + /> + <path + fill="#FFFFFF" + d="m289.26 50.617c0.664 0.646 1.985 0.636 3.37 0.562-1.604 3.452-0.961 9.149-5.055 10.11-1.52-3.539 0.77-7.733 1.68-10.672z" + /> + <path + fill="#FFFFFF" + d="m106.72 52.863c0.478-0.104 0.53 0.219 0.562 0.562 0.351 1.334 3.457-0.087 3.932 1.124-0.743 2.814-0.672 6.442-1.124 9.548-2.157-1.213-2.04-4.701-3.37-6.74-2.432-0.185-1.382 3.111-3.932 2.809-0.46-4.202 3.48-4.009 3.93-7.303z" + /> + <path + d="m339.81 53.425c2.904-0.236 2.022 5.716-0.562 5.055-0.1-2.459 1.83-2.888 0.56-5.055z" + /> + <path + d="m345.99 54.548c5.376 4.736-3.405 12.205-8.426 12.918-0.418-2.034-2.33-2.909-1.123-5.055 4.755 0.449 6.751-1.861 9.549-3.37v-4.493z" + /> + <path + d="m307.24 59.603c3.829 0.477 5.378 3.235 6.74 6.179-3.38 1.474-7.52-3.509-6.74-6.179z" + /> + <path + d="m299.93 60.165c1.729 0.331 3.976 0.144 3.932 2.247-2.05-0.001-4.33 0.218-3.93-2.247z" + /> + <path + d="m421.26 61.85c1.254 5.747-4.083 4.903-4.493 8.987-4.018-0.087-4.586 3.277-8.425 3.37-0.151-5.815 5.646-10.419 9.549-14.042 1.18 0.503 2.49 0.873 3.37 1.685z" + /> + <path + d="m362.84 63.535c2.583 0.787 1.437 5.304 2.247 7.863-3.222 2.774-3.78 11.192-10.672 8.425 0.16-2.274 4.436-0.433 4.493-2.809-0.084-1.039-1.901-0.345-2.246-1.124 0.389-1.109 1.498-1.497 2.809-1.685-1.47-4.028 4.97-4.682 3.37-10.67z" + /> + <path + fill="#FFFFFF" + d="m111.77 65.22c1.364 1.069 1.557 3.311 2.809 4.493-1.9-0.419-4.29-2.463-2.81-4.493z" + /> + <path + d="m343.74 66.343c3.562 0.441 7.436 0.128 5.056 3.932 2.134-0.112 2.131-2.362 4.493-2.247-0.555 3.825-7.436 6.19-10.11 2.809 0.476-0.835 1.809-0.813 2.809-1.124-0.35-1.523-2.35-1.398-2.25-3.37z" + /> + <path + d="m149.97 70.275c0.042 2.85-4.402 1.214-6.178 2.247 0.22-3.06 3.49-3.12 6.18-2.247z" + /> + <path + fill="#FFFFFF" + d="m160.08 72.522c0.46-0.962 4.062-0.362 3.932 1.123-2.05 0.365-2.99-0.378-3.93-1.123z" + /> + <path + d="m155.02 73.083c-1.187 2.097-3.568 3.007-5.617 4.493-1.796 1.303-3.637 3.875-5.055 4.494 0.117-0.051-3.478-1.435-3.932 0.562-1.697-1.58-0.603-2.66-2.247-4.493 1.677-0.738 5.575-4.678 7.302-1.685 3.13-1.189 4.9-3.729 9.56-3.371z" + /> + <path + d="m351.05 83.755c0.834-0.245-0.222-0.719 0-1.685 2.56 0.086 2.204 0.464 4.493 0 0.869 0.816 0.495 2.875 0.562 4.493 0.833-0.477 1.207-1.414 1.123-2.808 2.055 2.813 0.233 9.502 3.37 11.233-2.457 1.324-5.381-1.504-6.74-2.809-4.228-4.056-8.055-10.921-9.549-17.412 3.67 1.583 4.14 6.354 6.75 8.988zm3.37 2.247c0.537 4.292 1.521-0.257-0.562-1.685-0.21 0.796 0.5 1.204 0.56 1.685z" + /> + <path + fill="#FFFFFF" + d="m110.09 77.577c0.307 0.816-0.656 2.903 0.562 2.809-1.146 1.823-1.421-1.896-2.809-1.685 0.14-0.989 0.97-1.281 2.25-1.124z" + /> + <path + fill="#FFFFFF" + d="m124.69 77.577c1.517 0.502-0.261 2.28-1.685 1.685-0.17-1.295 1.63-0.624 1.69-1.685z" + /> + <path + fill="#FFFFFF" + d="m120.76 78.139c-0.091 0.653 0.124 0.999 0.562 1.123-0.529 1.531-2.833 1.286-4.493 1.685 0.48-1.766 2.16-2.329 3.93-2.808z" + /> + <path + d="m156.15 78.7c0.907-0.158 0.967 0.531 1.685 0.562 0.23 1.354-1.025 1.221-0.562 2.809-1.45-0.064-1.13-1.882-1.13-3.371z" + /> + <path + d="m266.23 78.7c2.271 0.681 1.066 6.853-0.562 7.302-0.29-3.463 1.73-4.381 0.56-7.302z" + /> + <path + fill="#FFFFFF" + d="m117.95 85.44c-0.368 2.747-3.515-0.779-4.494 1.123-0.862-2.133-2.893-3.098-2.247-6.74 5.3-3.027 2.36 5.97 6.74 5.617z" + /> + <path + d="m151.65 80.385c0.653-0.091 1 0.124 1.124 0.562 0.685 4.646-5.083 10.082-2.247 16.85 3.517 0.708 1.539-4.078 5.055-3.37-0.404 2.591-1.499 4.492-3.37 5.617-1.984-0.263-3.075-1.419-4.493-2.247-0.65-7.756 1.32-12.907 3.93-17.408z" + /> + <path + d="m369.02 82.07h1.686c0.158 1.469-0.205 2.416-1.686 2.247-0.94-1.116 0.05-0.714 0-2.247z" + /> + <path + d="m362.84 83.755c2.656 0.152 1.746 3.871 3.37 5.055-1.35 0.764-3.44-2.526-3.37-5.055z" + /> + <path + fill="#FFFFFF" + d="m353.85 84.317c2.082 1.428 1.099 5.978 0.562 1.685-0.05-0.481-0.76-0.889-0.56-1.685z" + /> + <path + d="m140.98 84.878c2.397 1.817 4.522 6.582 3.932 9.549-2.356-1.014-3.477-3.263-3.37-6.74-1.818-0.694-0.43 1.817-2.247 1.123 0.15-1.726 1.22-2.526 1.69-3.932z" + /> + <path + d="m429.12 92.742c-0.944-4.124 11.136-12.079 10.109-3.932-0.35 2.734-5.59 5.614-10.11 3.932z" + /> + <path + d="m155.58 85.44c-0.045 1.827-0.718 3.026-2.247 3.37 0.11-1.772 0.4-3.35 2.25-3.37z" + /> + <path + d="m361.16 85.44c1.467 1.341 1.898 3.718 2.247 6.178-0.956-0.207-1.06 0.438-1.124 1.124-3.085 0.277-1.474-4.143-2.808-5.617 0.49-1.545 2.27 1.309 1.68-1.685z" + /> + <path + fill="#FFFFFF" + d="m119.64 86.002c1.3 0.572 2.614 1.13 2.808 2.808h-4.493c-0.61-2.095 2.1-0.889 1.68-2.808z" + /> + <path + d="m134.8 89.372c-0.611 1.261-1.305 2.44-1.685 3.932-2.404 0.71-2.778-0.041-5.617 0 0.37-3.133 4.86-4.697 7.3-3.932z" + /> + <path + d="m56.729 89.372c6.384 1.105 9.605 5.373 10.11 12.357-2.692 0.863-4.151-1.395-5.617-2.809-1.132-1.091-0.979-0.649-1.685-2.809-0.654-1.999-3.687-2.703-2.808-6.74z" + /> + <path + d="m98.293 89.934c0.455 0.107 0.56 0.563 1.123 0.562-0.106 0.455-0.563 0.56-0.562 1.124-0.455-0.107-0.56-0.563-1.124-0.562 0.108-0.456 0.564-0.561 0.563-1.124z" + /> + <path + fill="#FFFFFF" + d="m262.3 90.495c2.75-2.078 3.37 1.731 0 0z" + /> + <path + fill="#FFFFFF" + d="m284.77 91.619c-4.319 1.129-11.128-0.1-15.727-0.562 3.19-2.025 11.88-0.439 15.73 0.562z" + /> + <path + fill="#FFFFFF" + d="m370.14 91.619c2.592 2.838 5.777 5.082 6.74 9.548-2.96-1.431-7.5-5.895-6.74-9.551z" + /> + <path + d="m54.482 105.1c-6.974 1.591-9.046-6.203-12.357-10.11-0.674-0.738-0.219-0.883 0-1.685 4.314-2.148 10.321 7.555 12.357 11.795z" + /> + <path + fill="#FFFFFF" + d="m255.56 92.742c0.971 1.276 1.355 3.138 1.123 5.617-2.066-1.117-4.26-2.106-5.055-4.494 1.22-0.47 1.93-1.454 3.94-1.123z" + /> + <path + d="m131.99 93.865h2.247c0.66 1.95-3.14 2.612-2.25 0z" + /> + <path + fill="#FFFFFF" + d="m282.52 95.55c1.717-0.406 2.047 0.574 3.37 0.562-0.01 0.858-4.16 1.232-3.37-0.562z" + /> + <path + fill="#FFFFFF" + d="m290.95 95.55c0.531 2.03-2.213 0.784-3.37 1.124 0.06-1.435 1.88-1.115 3.37-1.124z" + /> + <path + d="m115.7 96.112c0.327 2.012-1.662 1.708-3.37 1.685 0.51-1.174 1.66-1.713 3.37-1.685z" + /> + <path + fill="#FFFFFF" + d="m311.73 97.235c2.993 1.191 7.419 4.781 5.056 7.863-2.46-1.86-4.27-4.35-5.06-7.865z" + /> + <path + fill="#FFFFFF" + d="m366.77 97.235c0.907-0.158 0.967 0.531 1.685 0.562 0.64 4.667 6.447 6.945 5.055 11.795-3.447-1.794-3.643-6.841-6.739-8.987 0.952 4.29 3.81 6.675 5.616 10.11-0.575 2.982-1.752 5.363-1.685 8.987-3.528-3.024-5.91-7.196-8.426-11.233 0.285-1.774 1.653-2.465 1.686-4.493 2.464 2.216 3.897 5.464 6.74 7.302 0.551-3.369-5.085-5.393-6.179-8.987 0.32-2.1 2-2.855 2.23-5.055z" + /> + <path + fill="#FFFFFF" + d="m370.14 97.797c3.271 1.583 2.204 5.041 6.179 5.055 0.074 1.385 0.085 2.706-0.562 3.37-2.78-1.9-4.35-5.01-5.62-8.423z" + /> + <path + fill="#FFFFFF" + d="m255.56 101.73c2.316 0.304 2.939 2.303 3.932 3.932-1.833 1.796-3.813-1.027-5.055-1.685 0.29-0.84 0.83-1.42 1.12-2.25z" + /> + <path + fill="#FFFFFF" + d="m380.25 102.29c5.509 1.423 10.312 5.096 15.728 9.548 4.062 3.34 8.838 6.6 11.795 9.548 2.639 2.632 4.285 5.983 6.74 7.864 4.079 3.126 9.55 3.946 8.986 11.795-0.194 2.714-2.819 5.12-3.37 7.864-0.479 2.387 0.899 4.812 1.123 7.302 0.683 7.59 0.47 15.259-2.808 23.028-7.607 5.312-20.106 5.117-30.331 2.809-0.382-2.239-1.224-4.019-1.123-6.74-8.443-4.85-11.745-14.841-12.356-27.522 1.529-7.282 5.25-13.709 7.863-21.343-5.914 2.324-5.484 10.991-10.11 14.604 0.298 3.481-0.269 6.097-1.123 8.425 0.127 0.809 1.676 0.195 1.685 1.123-0.75 8.053 2.326 12.278 4.493 17.412-1.981-0.077-2.511-1.607-4.493-1.685-0.977 6.972 7.383 9.465 10.11 14.604 2.021 0.975 4.688 1.303 5.055 3.932-3.445-0.674-4.525-3.713-9.548-2.809-0.445 4.811 5.804 5.087 9.548 3.932-1.457 12.969-2.83 25.993 0 38.756 3.092-6.665-1.592-21.775 3.932-27.522-2.855-2.534 3.248-1.789 1.124-5.055 2.793-0.203 3.34-2.651 4.493-4.494 8.548 0.123 14.533-2.317 20.782-4.493-0.319 23.607 0.608 49.39-9.549 64.031-26.793-3.163-45.775-14.136-60.661-29.207-0.418-1.729 1.542-1.08 1.124-2.809-10.533 0.978-17.546-5.903-24.714-10.11-0.763 0.174-0.466 1.406-0.562 2.247-2.108-0.7-4.146-1.472-6.74-1.686-0.547-2.231 3.139-0.23 2.809-2.246-3.239-1.727-7.286 0.565-10.11 1.123 6.406-8.163 18.263-1.663 30.33-0.562 6.822 0.622 10.901 2.122 16.851 5.055 1.994 0.983 3.762 1.985 5.616 2.809 4.15 1.841 7.316 2.741 10.11 5.616 3.976-1.42 7.259 2.389 12.357 1.686-4.225-5.698-12.909-6.938-19.659-10.11 1.428-2.359 5.352 0.987 7.302 1.686 3.567-1.114 9.147-0.214 11.233-2.809-0.062-1.397-1.052-1.739 0-2.809-1.311-3.243-6.388-0.749-8.986-1.685-1.788-1.744 2.715-2.946 1.123-4.494-3.671-0.487-1.785 4.58-5.616 3.932-0.451-1.948 0.836-2.158 0.562-3.932-2.549-0.302-1.5 2.994-3.932 2.809-0.519-2.577 1.405-2.714 1.123-5.055-2.188-1.18-2.992 3.186-4.493 4.493-1.38-1.599 1.304-3.914 1.123-6.179-2.753-1.902-1.878 3.905-4.493 3.932-0.191-2.812 2.14-3.102 1.685-6.178-3.383 0.549-2.669 5.193-6.178 5.616 0.687-2.121 2.445-3.171 2.246-6.178-0.906-1.89-1.778 1.766-2.809 0 0.515-4.305-2.486-7.042 0-10.11-0.725-7.275-5.397-12.592-11.233-16.289 1.639-3.408 8.714-3.126 6.74-8.425 6.432-1.053 13.934-0.505 17.974-5.055v-7.302c-3.374-3.442-3.418-10.397-5.055-15.727-1.12-3.646-5.727-8.519-1.686-11.234 1.362 7.812 2.614 15.734 9.549 17.974 1.049 0.999-0.456 1.428 0 3.37 2.144 0.262 1.064-4.388 0.562-5.055-4.534-0.896-5.531-5.328-7.863-8.425 1.559-1.882 2.627 1.454 3.932 1.685 0.215-2.087-2.276-1.469-1.685-3.932 1.583 0.101 0.7 2.669 2.808 2.247-1.556-4.623-4.922-7.435-6.178-12.357 2.843 3.522 7.349 5.382 7.302 11.795 2.468-3.431 0.809-6.169 1.685-9.548 1.4-5.28 6.42-8.35 7.89-13.46z" + /> + <path + d="m142.66 110.15c-1.719-1.089-2.316-3.3-3.37-5.055 2.29-1.44 2.96 2.83 3.37 5.05z" + /> + <path + d="m329.14 107.35c2.169-0.109 3.228 0.892 3.37 2.808-0.064 1.996-1.858 2.26-3.932 2.247 0.11-1.77-0.38-4.13 0.56-5.06z" + /> + <path + d="m138.73 111.84c3.237 0.303 3.635 5.225 2.809 7.863-2.14-1.41-2.41-4.7-2.81-7.86z" + /> + <path + d="m304.99 113.52c1.598 0.749-0.434 2.498-0.562 3.37-2.23-0.56 0.09-2.26 0.56-3.37z" + /> + <path + fill="#FFFFFF" + d="m361.72 114.65c1.666 0.955 1.89 3.353 2.809 5.055-1.65-0.97-2.61-2.63-2.81-5.05z" + /> + <path + d="m303.86 117.46v2.247c-2.16 0.43-2.16-2.7 0-2.25z" + /> + <path + d="m275.78 136.55c-2.732-2.455 0.771-5.709 0.562-8.425-0.349-4.531-3.845-4.801-5.617-8.425 6.38-1.05 12.17 12.62 5.06 16.85z" + /> + <path + d="m44.934 120.83c0.653 1.781 1.562 3.307 3.37 3.932-2.546 3.934-10.173 0.667-9.548-3.932 2.953-2.62 3.645 1.11 6.178 0z" + /> + <path + d="m309.48 123.07c0.69 0.245 1.153 0.719 1.123 1.685-0.69-0.25-1.15-0.72-1.12-1.69z" + /> + <path + d="m28.646 129.81c-0.198 1.862-1.683 2.437-2.809 3.37-3.257-1.798-7.683-2.427-9.548-5.617-1.083 0.228-0.444 2.177-2.247 1.685 0.035-10.72 11.749-2.39 14.604 0.57z" + /> + <path + d="m311.17 130.37c0.793-1.294 3.658 0.042 3.37 1.685-1.68-0.01-1.91-1.46-3.37-1.69z" + /> + <path + fill="#FFFFFF" + d="m187.04 132.62c5.278-1.659 13.975 1.331 18.536 0 1.829 2.232-5.474 0.122-5.617 2.247 1.01 3.307 4.767 1.163 7.302 1.123 2.355-0.037 4.752 0.678 6.74 0-0.597 3.335-5.637 2.227-7.302 4.494 1.154 2.97-0.758 4.386-1.685 6.74-11.148 0.29-17.523-4.194-19.658-12.918 3.354 0.271 9.229 3.148 11.795 0.562-1.39-2.73-7.09-1.15-10.12-2.24z" + /> + <path + fill="#FFFFFF" + d="m210.07 132.62c1.805 0.634-0.541 1.604-1.685 1.124 0.17-1.95 1.52 0.05 1.69-1.12z" + /> + <path + fill="#FFFFFF" + d="m322.96 139.36c0.907-0.158 0.968 0.531 1.686 0.562-0.319 3.238-1.558 5.558-2.247 8.426 2.5-1.433 1.386-6.479 4.494-7.302 0.941 2.269-3.47 4.006-2.247 8.425-0.882 0.241-0.48 1.767-2.247 1.123-0.106 4.039 1.711 6.152 2.247 9.549-5.67-2.63-4.5-15.94-1.68-20.79z" + /> + <path + fill="#FFFFFF" + d="m365.65 142.17c-0.569 3.536 0.533 5.821 1.686 10.11-0.653-0.092-1 0.124-1.124 0.562-3.348-0.959-2.579-6.033-2.808-10.11 0.74-1.38 1.69 1.01 2.24-0.56z" + /> + <path + fill="#FFFFFF" + d="m361.16 143.85c2.491 1.979 1.435 5.656 2.247 10.11-1.385 0.074-2.707 0.085-3.37-0.562 0.086-1.786 1.273-2.471 1.123-4.493-2.091-0.031-1.62 2.499-1.685 4.493-1.175 0.323-1.604 1.393-3.37 1.123-0.057-2.864 2.332-3.284 2.808-5.616-3.819-1.003-2.998 7.479-7.863 7.302 0.481-4.948 5.884-4.976 6.179-10.11 1.21-0.82 3.01-1.09 3.92-2.24z" + /> + <path + fill="#FFFFFF" + d="m324.65 150.59h1.123v1.124h-1.123v-1.12z" + /> + <path + fill="#FFFFFF" + d="m349.92 151.72c2.01 1.364-0.979 6.169-4.493 5.616 0.62-2.76 3.41-3.34 4.49-5.62z" + /> + <path + fill="#FFFFFF" + d="m424.06 152.28c0.888 2.482 1.731 5.009 1.686 8.425-2.04-1.32-1.25-5.49-1.69-8.42z" + /> + <path + fill="#FFFFFF" + d="m325.77 154.53c1.888-0.576 0.875 1.747 1.124 2.809 0.141 1.878 3.281 2.615 1.685 4.493-2.52-0.85-3.07-3.67-2.81-7.3z" + /> + <path + fill="#FFFFFF" + d="m343.74 155.09c2.76 0.9-1.704 6.152-3.37 4.494 0.19-2.43 3.28-1.96 3.37-4.49z" + /> + <path + fill="#FFFFFF" + d="m425.19 162.39c1.66 6.856 0.622 15.659 1.123 24.152 0.562 9.52-0.613 20.797-0.562 28.646 0.012 1.771 1.069 3.467 0.562 5.055-1.216 3.8-7.045 4.235-6.74 8.426 2.312 2.171 5.455-1.074 8.425 1.685-2.018 4.16-5.788 6.568-10.672 7.863-1.688-5.376 0.829-10.508 1.686-16.85 1.247-9.233 1.464-20.021 1.685-32.016 0.072-3.924-0.196-8.248 0.562-11.233 0.478-1.877 2.126-3.108 2.809-5.056 1.3-3.73 0.31-7.22 1.12-10.67z" + /> + <path + d="m232.53 168.57c4.492 2.612 4.753 10.294 1.124 14.042-2.568-1.376-0.567-6.079 0.562-7.302-0.08-2.56-3.31-4.26-1.68-6.74z" + /> + <path + fill="#FFFFFF" + d="m332.51 171.38c2.875 1.057 2.716 5.147 3.932 7.863-1.583 1.303-3.511-0.648-6.178 0-0.84-4.21 1.15-5.59 2.25-7.86z" + /> + <path + fill="#FFFFFF" + d="m384.75 176.43c0.71-1.691 2.295 1.25 1.124 1.686-0.81-0.13-0.2-1.68-1.12-1.69z" + /> + <path + d="m229.16 179.24c-0.545 3.574-1.795 6.443-5.055 7.302 1.51-2.61 1.44-6.8 5.06-7.3z" + /> + <path + fill="#FFFFFF" + d="m318.47 183.73c1.566 0.914 5.178 1.99 3.932 3.932-1.8-0.81-3.65-1.58-3.93-3.93z" + /> + <path + d="m231.97 185.42c0.653-0.092 1 0.124 1.124 0.562-0.839 3.25-2.529 6.614-3.932 9.549-1.394 2.914-2.447 6.769-5.617 7.863 1.04-7.77 5.79-11.82 8.43-17.97z" + /> + <path + fill="#FFFFFF" + d="m330.83 187.66c1.326 1.876-0.68 4.303-1.124 6.179-3.013-1.021-7.093-3.625-6.74-6.179 2.32-0.66 4.72 2.33 7.86 0z" + /> + <path + d="m1.123 193.28c7.722 0.517 12.068 4.408 19.659 5.055 11.602 6.603 22.691 13.072 32.577 21.344 4.936 4.13 8.969 8.92 13.48 13.48 4.383 4.431 9.877 8.577 12.356 14.604-8.045-2.603-12.165-10.587-17.974-16.289-8.1-7.949-16.588-14.904-26.96-21.343-4.599-2.855-9.801-6.29-15.166-8.426-1.272-0.506-3.196-0.108-4.493-0.562-2.052-0.717-4.056-2.49-6.179-3.37-2.216-0.919-4.375-1.609-6.74-2.246-0.434-0.49-0.602-1.26-0.56-2.24z" + /> + <path + d="m260.06 201.71c-11.317-1.771-17.075-0.728-28.645-2.246 0.875-2.516 3.854-1.097 6.178-1.124 5.138-0.06 10.09 0.316 14.042 1.124 3.22 0.66 8.49-1.55 8.42 2.25z" + /> + <path + d="m11.795 201.71c-1.174 0.238-1.487-0.385-2.247-0.562 0.101-1.63 2.67-1.36 2.247 0.56z" + /> + <path + fill="#FFFFFF" + d="m215.12 207.32c-0.873 2.795 0.009 4.029-0.562 7.302-3.803-2.578-6.06 3.827-7.864 6.74-1.492 0.005-3.208-0.213-3.932 0.562-0.146 1.645 1.27 1.726 1.124 3.37-1.645 0.146-1.726-1.271-3.37-1.124-1.238 1.187 0.721 1.66 0.562 3.37-1.353-0.229-1.221 1.026-2.808 0.562-0.333 1.793 1.054 1.737 0 2.809-1.533 0.051-1.131-0.936-2.247 0 1.125 2.064 0.051 3.776 0 6.179-3.938-2.054-6.506-5.476-12.356-5.617 5.837-8.578 11.823-17.009 15.727-27.521 6.94-0.57 11.26 1.48 15.73 3.37z" + /> + <path + d="m39.317 204.52c12.198 5.579 21.169 15.854 30.331 25.275 2.956 3.04 6.547 5.863 8.987 8.986 1.628 2.085 3.646 4.896 3.37 7.864-2.814 0.341-0.483-1.257-1.685-2.809-9.837-10.39-18.955-21.078-30.331-30.331-3.576-2.92-7.756-5.16-10.672-8.99z" + /> + <path + d="m87.06 244.39c-12.118-12.222-23.235-25.443-37.632-35.386-0.297-0.451-0.586-0.912-0.562-1.685 2.759 0.316 4.959 2.878 7.302 4.493 2.534 1.747 5.697 3.108 7.863 5.055 2.668 2.397 4.898 5.726 7.863 8.426 1.5 1.365 2.965 2.378 4.494 3.932 3.823 3.89 8.254 9.33 10.672 15.17z" + /> + <path + d="m463.38 207.32c1.256 0.407 0.271 3.202-1.123 2.809-0.09-1.39 0.88-1.74 1.12-2.81z" + /> + <path + d="m57.853 248.33h-13.48c-5.867-9.235-12.77-18.004-21.344-25.275-3.556-3.016-8.197-4.326-8.986-10.11 6.205-3.205 16.632 5.277 23.59 11.233 6.826 5.844 12.854 11.277 16.851 16.289 1.165 1.45 1.769 6.18 3.369 7.86z" + /> + <path + d="m279.71 218.56c1.887-0.577 0.874 1.747 1.123 2.809 1.422 1.573 3.244 2.747 4.493 4.493 13.762 5.351 37.009 6.929 54.482 4.493-2.339 1.405-5.061 2.428-6.74 4.493-16.206 1.979-37.051 1.851-51.112-6.74 0.39-4.05-4.52-5.41-2.24-9.54z" + /> + <path + d="m325.77 224.17c-9.898-1.521-18.836-4.005-30.892-3.37 3.949-2.015 9.28-1.933 15.165-1.123 3.726 0.513 8.481 0.915 11.233 1.686 1.53 0.42 3.88 1.25 4.5 2.8z" + /> + <path + d="m337 222.49c1.43 0.068 2.179 0.817 2.247 2.247-0.66-0.84-2.33-0.67-2.25-2.25z" + /> + <path + fill="#FFFFFF" + d="m230.85 226.42c-0.028 4.277-4.042 4.57-5.055 7.863-1.429-3.24 0.377-4.952 0-8.425 0.74-0.58 3.75-0.02 5.05 0.56z" + /> + <path + d="m355.54 232.04h3.37c0.27 1.768-0.8 2.196-1.123 3.37-1.33-0.55-2.76-0.99-2.25-3.37z" + /> + <path + d="m357.22 239.34c-0.229 1.082-2.178 0.443-1.686 2.246 1.611 1.946 6.307 0.809 8.426 2.247-5.259 2.401-12.487-0.687-19.659-0.562-1.836 0.031-4.445 0.247-6.178 0.562-6.408 1.162-16.919 7.051-20.221-1.124 6.562 1.045 15.025 0.878 20.221-1.123 0.576-1.887-1.747-0.874-2.809-1.123 2.539-1.554 6.313-1.573 8.986-1.686 4.2-0.19 9.12 0.11 12.92 0.55zm-2.8 1.12c-3.335-0.529-5.604 1.083-7.863 0 0.94 1.38 7.76 3.02 7.86 0z" + /> + <path + d="m318.47 239.34c1.385-0.074 2.706-0.086 3.37 0.562-0.01 0.86-4.16 1.23-3.37-0.56z" + /> + <path + d="m325.77 239.34c0.577 1.887-1.746 0.874-2.809 1.123-0.57-1.88 1.75-0.87 2.81-1.12z" + /> + <path + fill="#FFFFFF" + d="m346.55 240.46c2.26 1.083 4.528-0.529 7.863 0-0.09 3.02-6.91 1.38-7.86 0z" + /> + <path + d="m446.53 241.02c0.158 1.469-0.205 2.416-1.685 2.247-0.15-1.47 0.21-2.41 1.69-2.25z" + /> + <path + d="m312.29 126.44c0.431-2.836 1.554 1.769 3.37 1.124 1.478-4.358-3.435-6.774-5.617-10.11-2.35-3.591-3.247-6.537-7.302-5.617 0.08-2.167 1.897-2.595 1.685-5.055-4.572 1.231-6.015 5.593-5.616 11.795-1.675 4.095-3.478 8.974-3.37 14.042 0.027 1.319 0.918 2.13 1.123 3.37 0.878 5.305-2.632 9.131-3.932 13.48 10.208 1.213 15.779 7.062 20.782 13.48-0.629-9.059-6.922-15.352-5.617-23.029 2.589 2.165 3.337 6.103 4.494 9.549 2.043 6.085 4.265 12.363 3.932 20.22 3.261-1.606 4.811-4.924 8.986-5.616-0.779-1.842-2.581-2.661-3.932-3.932-1.701-4.237-2.676-9.911-1.123-14.604-1.349-1.46-0.783-4.834-1.686-6.74-2.468-0.916-3.899-4.54-7.302-2.809-0.588-2.29-1.237-3.27-3.932-2.247 0.784-3.218-1.139-3.729-2.246-5.055 0.434-2.785 0.754-3.743-1.124-5.055 0.735-1.887 0.663-4.579 2.809-5.055 0.337 0.841-1.194 2.303-1.123 3.37 0.024 0.374 1.349 0.811 1.685 2.247 0.243 1.037-0.579 2.755-0.562 2.808 0.257 0.765 1.129 0.796 1.685 1.685 1.911 3.057 0.245 1.763 2.809 3.932 1.901 1.609 0.775 0.277 4.494 1.685 1.127 0.427 1.547 2.867 3.932 1.124 2.066 0.611 2.651 3.57 5.616 1.685 0.663 2.333 3.331 2.66 5.056 3.932-1.559 3.055 0.42 6.66-3.37 7.864 1.832 4.343 1.244 7.951 3.932 12.356 2.884-0.04 6.925-2.301 7.863 0.562 2.391-0.723-0.055-2.791 0.562-5.055 2.92-1.762 5.053-4.309 6.74-7.302 6.623-2.364 12.154-5.819 17.412-9.549 2.852-8.108-4.747-13.568-5.056-20.22-0.061-1.304 0.81-3.143 1.124-6.178 0.3-2.902 1.424-2.81 0-5.617-0.024-2.083 2.105-2.013 2.808-3.37-1.396-5.039 4.043-6.863 3.932-12.357 3.397-1.283 3.481-5.88 6.179-7.863 2.145 1.878 0.301 3.783 1.123 6.178 2.013 5.857 10.361 9.546 16.289 12.918 4.332 2.465 8.546 4.915 12.356 7.864 2.066 1.599 5.86 3.844 7.863 6.178 1.542 1.796 1.966 4.219 3.37 6.179 0.465 0.647 3.275 1.259 1.686 2.808 1.354 0.23 1.221-1.026 2.809-0.562 2.964 2.465 5.696 5.162 7.302 8.987 15.937 4.648 29.106 16.694 34.823 32.016 1.255 3.363 1.864 8.253 2.809 12.356 0.36 1.565 2.463 3.048 0.562 4.493 1.147 1.334 2.223-0.771 3.37 0.562-1.278 0.871-1.061 1.17-0.562 2.809-2.198 0.888-1.163-1.458-2.247-1.685-2.071 4.91-0.034 9.461-0.562 14.042-0.152 1.319-1.115 1.767-1.685 3.369-1.012 2.844-0.708 6.752-1.686 8.987-0.943 2.158-3.55 3.221-3.37 7.302 2.106-0.515 2.296-2.946 3.37-4.493 1.344 3.788-3.312 6.415-5.055 8.986 0.226 3.222-1.097 4.896-1.686 7.302 5.689-5.356 7.862-14.23 11.233-21.905 1.245-0.309 0.8 1.072 1.686 1.124 3.504-11.661 6.112-26.787 2.246-41.003-0.233-0.858-0.771-2.507-1.123-3.37-0.415-1.02-0.788-2.046-1.123-2.808-5.348-12.171-14.872-23.118-23.591-29.769-6.873-2.863-12.97-6.501-19.658-9.548-2.453 0.019-5.075 0.207-6.179-1.124 1.884-2.114 5.729-0.544 7.863 0 6.805 1.735 10.97 4.405 16.851 7.863 3.229 1.899 7.153 3.465 9.549 5.617 4.216 3.788 6.302 9.257 10.672 12.357 0.596 2.961 2.188 4.925 3.932 6.739 0.913 6.425 5.757 11.793 5.055 17.974 1.689 0.566 0.995-1.251 1.123-2.246 2.54 3.776 1.229 8.383 1.686 14.604 2.207-4.274 1.271-8.255 1.685-14.042 1.806 4.278 0.756 8.132 1.124 14.042 2.592-1.34-0.541-8.404 2.808-8.987-1.79-14.347-9.624-26.91-16.85-37.632-1.175-0.323-1.604-1.393-3.37-1.124 0.071-1.007-0.688-1.185-0.562-2.247-6.117-3.619-12.116-7.355-18.535-10.672 2.775-2.796 5.945 2.787 10.109 2.247 11.676 8.128 24.967 21.493 29.769 40.441 3.29 12.977 3.091 29.716 0 43.811-0.257 1.176-1.448 2.125-1.685 3.37-1.104 5.827-2.596 11.23-5.055 16.288-1.849 3.802-2.593 4.119-6.179 5.617-0.778-0.345-0.085-2.162-1.123-2.247-2.621 3.933-5.312 7.795-11.233 8.425-1.419-8.529 8.159-13.41 7.302-21.343-4.732 5.94-6.626 14.718-11.796 20.22-3.288-3.095 4.717-6.576 2.809-10.11-1.857 0.502-1.294 3.421-3.932 1.686-0.804 2.753-3.453 3.661-4.493 6.179-2.774-0.596-3.646-3.096-4.493-5.617-3.251-0.068-1.567 4.798-4.494 5.055v-2.808c-3.287-0.515-4.833-3.633-5.055-5.617-1.301 4.691-4.978 7.005-8.425 9.549 5.229 5.319 15.894 11.12 13.479 22.467-0.951 4.475-5.093 6.354-8.425 9.548h-7.863c8.267-3.872 14.883-12.269 8.425-21.343-2.942-4.136-8.167-9.282-11.795-10.672-2.538 6.017-3.287 13.33-12.919 11.795-1.246-0.199-2.139-1.263-3.37-1.686-4.666-1.602-9.067-2.203-13.479-3.932-1.965-0.77-3.694-1.826-5.617-2.808-1.734-0.886-3.098-2.308-5.055-3.37-0.214-0.116-1.064 0.833-1.686 0.562-0.472-0.207-0.234-1.513-0.562-1.686-1.111-0.584-2.553-0.086-3.37-0.562-1.645-0.957-3.437-2.781-5.616-4.493-3.188-2.502-6.61-4.227-7.863-7.302-7.952-3.47-12.68-10.162-22.468-11.795-0.715-2.655-3.347-3.394-5.055-5.056-7.461-0.062-14.689-2.954-21.905-3.932-3.094-0.419-7.425 0.859-9.549-2.246 8.052-0.05 14.272-4.393 21.344-5.056 2.252-0.211 4.719 1.726 6.74-0.562-2.821-5.604-8.042-8.809-8.986-16.288-0.381-1.305-1.435-1.937-2.247-2.809-0.013-1.323 0.968-1.653 0.562-3.37-3.46-0.481-2.876 3.952-3.932 6.179-2.425 5.117-6.723 10.596-10.672 15.165-5.026 5.816-12.892 9.952-17.974 13.48-4.945 3.433-10.351 10.713-16.85 3.932-2.387-10.316-5.326-21.011-5.056-34.263 0.086-4.193 2.051-8.6 2.247-13.479 0.058-1.449-0.75-2.505-0.562-3.933 0.833-6.315 3.5-13.074 4.493-19.097 1.261-7.651-0.998-13.941-5.617-17.412-3.173-2.385-8.31-3.496-11.795-5.055-3.646-1.631-8.323-5.702-3.37-9.548 3.284-0.288 4.032 1.958 6.74 2.247 1.508-1.728-2.702-2.515-2.247-5.055 2.286-3.268 2.056-5.754 3.933-8.987-1.087-2.658-5.012-2.477-5.617-5.617 0.51-3.672 4.711-4.751 7.863-2.808 0.965-0.721 1.128-2.242 2.247-2.809 11.658-1.373 28.548-0.84 37.07 5.617-1.685 8.8-4.229 16.74-12.356 19.097 1.993 6.851 4.653 15.92 0 21.905-1.673-2.365 0.409-7.363 0-11.795-0.257-2.774-1.921-4.966-1.686-7.302-0.137-1.736-2.795-0.949-2.247-3.37 6.976-1.637 11.646-5.578 12.919-12.918-7.495-1.157-16.17 1.392-22.467-1.685 0.986-4.215 7.882 0.844 10.672-1.685-6.906-0.957-13.665-2.062-20.782-2.808 1.194 3.112 8.146 0.467 8.425 4.493-2.488 1.318-5.536-1.033-8.425-1.123-0.786 3.024 0.421 5.756 1.686 7.863 2.213 3.689 6.956 5.45 9.548 8.425-2.97 0.946-6.688-1.813-8.425-3.932-4.852 0.996-6.431-3.903-10.11-2.247 0.299 4.293 4.909 5.468 8.425 6.74 3.68 1.331 8.554 0.975 10.672 3.932-5.089 1.958-10.573-3.146-15.727-1.123 0.812 1.623 3.99 0.878 3.932 3.37-6.498 0.133-9.316-3.415-13.48-5.617 1.192 5.548 7.602 5.879 13.48 6.74 1.218 1.236 3.523 4.177 6.179 5.617 4.146 6.704 3.58 15.258 1.685 25.276-1.111 5.873-2.29 11.237-2.809 17.411-0.837 9.986-1.16 19.901 0.562 30.331 0.904 5.479 1.594 11.627 4.493 14.041 4.224 0.391 5.783-3.029 8.986-5.055 3.372-2.132 7.44-3.573 10.11-5.617 6.878-5.262 11.689-12.762 17.412-18.535 1.081-5.274 5.596-7.691 6.179-12.356 1.315-10.528-10.057-17.325-17.974-20.782-3.168 1.139-3.997 4.616-6.179 6.74 2.897 11.403 6.241 28.388-2.247 36.509-1.88-3.031 1.662-7.854 2.247-12.356 1.806-13.906-6.562-30.852-5.055-46.058 2.009 1.752 2.284 5.708 2.808 8.987 0.469 2.93 0.3 5.989 1.124 8.425 3.358-2.979 6.548-7.044 6.739-11.795 0.157-3.868-2.161-7.282-1.685-11.233 0.637-5.283 3.937-7.66 5.055-12.918-3.241-8.069 3.646-14.327 10.672-15.727-0.044-3.394 1.816-5.819 4.494-7.864 2.371 0.624 2.198 3.792 4.493 4.494-0.833-2.538-1.992-4.748-2.809-7.302-6.838-0.428-11.099 2.795-15.727 0.562-4.071-1.965-2.528-6.234-3.932-11.233-0.568-2.022-2.425-5.031-3.932-7.863-2.22-4.172-6.357-8.708-5.617-16.289 0.261-2.666 1.632-3.959 2.247-6.74-0.236-1.262-2.98-0.015-3.37-1.124-0.494-1.805 1.852-0.77 1.685-2.247-2.258-7.118-1.173-15.531 0-23.59-0.386-2.235-3.278-1.963-3.37-4.493 1.089-1.533 2.341-2.902 4.494-3.37-0.519-2.578 1.404-2.714 1.123-5.055 3.396-5.478 10.703-4.363 16.85-5.617 6.542-1.334 9.682-4.491 18.535-3.932 13.902 0.877 29.007 11.952 32.577 24.713 0.522 1.866 0.03 4.772 0 7.302 2.776 0.53 1.894-2.601 4.494-2.247 4.289-0.146 6.48 6.182 3.37 8.425-2.054-0.275 0.871-4.78-2.247-5.055-1.218-0.095-0.255 1.992-0.562 2.809-2.223-0.96-3.904-2.461-6.74-2.809-0.752-9.572-7.158-17.221-14.042-22.467-2.392-1.823-4.477-4.187-6.74-5.055-1.39-0.533-3.079-0.058-4.493-0.562-2.997-1.068-7.091-2.976-12.918-2.247-3.358 0.42-5.859 2.522-9.549 3.37-6.128 1.408-15.997-0.532-16.851 6.74 0.079 1.606 2.343 1.027 3.932 1.124-2.935 6.239-7.773 10.574-6.178 21.343 5.274 3.305 9.558 4.004 10.109 9.548 0.11 1.103-0.8 1.286-1.123 2.809-0.277 1.309 0.249 3.007 0 3.932-0.782 2.902-3.043 5.276-2.809 7.863 0.381 4.196 4.725 5.863 5.617 9.549 1.743 0.058 1.603-1.767 3.932-1.124 4.402 1.716 7.796-0.831 10.672 1.124-2.208 3.576-12.019 0.642-15.727 2.808 0.435 5.854 7.047 0.103 9.548 1.685 1.13 4.052-7.725 6.075-11.233 3.932-0.076 1.949 2.846 0.899 2.809 2.809 0.479 3.265-1.084 3.688-0.562 6.178 1.691 8.067 13.072 0.938 19.097 0.562-3.319 8.689 7.325 14.765 5.055 24.152-2.805-0.378-0.831-5.535-2.808-6.74-1.468 1.189-2.3 4.227-2.809 6.74-0.546 2.694-0.063 6.791-1.123 10.11 0.854 4.014 5.484 8.972 3.932 11.795-2.014 0.081 0.057-1.44-1.124-2.809-1.98-1.35-4.2-2.5-6.14-3.93zm-24.15-83.125c1.055-0.667 2.135-4.195-0.562-3.932-0.77 0.758-1.07 3.921 0.56 3.932zm-0.56 17.973c4.094-0.961 3.451-6.658 5.055-10.11-1.385 0.074-2.706 0.085-3.37-0.562-0.92 2.94-3.21 7.134-1.69 10.672zm-25.28 29.207c3.37 1.731 2.75-2.078 0 0zm6.74 0.562c4.599 0.461 11.407 1.69 15.727 0.562-3.85-1.001-12.54-2.587-15.73-0.562zm107.84 10.113c-0.963-4.467-4.148-6.71-6.74-9.548-0.76 3.653 3.78 8.117 6.74 9.548zm-125.25-7.305c0.795 2.388 2.988 3.377 5.055 4.494 0.232-2.479-0.152-4.341-1.123-5.617-2.01-0.331-2.72 0.653-3.93 1.123zm34.26 2.247c-1.323 0.013-1.653-0.967-3.37-0.562-0.79 1.794 3.36 1.42 3.37 0.562zm1.69 0.562c1.157-0.34 3.901 0.906 3.37-1.124-1.49 0.009-3.31-0.311-3.37 1.124zm29.2 8.426c2.363-3.083-2.062-6.672-5.056-7.863 0.8 3.513 2.61 6.003 5.06 7.863zm47.75-2.81c1.094 3.594 6.729 5.618 6.179 8.987-2.843-1.838-4.276-5.086-6.74-7.302-0.032 2.028-1.4 2.719-1.686 4.493 2.516 4.037 4.897 8.209 8.426 11.233-0.067-3.624 1.109-6.004 1.685-8.987-1.807-3.435-4.664-5.82-5.616-10.11 3.097 2.146 3.292 7.192 6.739 8.987 1.393-4.85-4.415-7.128-5.055-11.795-0.718-0.031-0.777-0.72-1.685-0.562-0.24 2.202-1.92 2.957-2.25 5.057zm11.23 3.93c0.646-0.664 0.636-1.985 0.562-3.37-3.975-0.015-2.908-3.472-6.179-5.055 1.27 3.415 2.84 6.525 5.62 8.425zm-70.21 3.93c0.094-0.654 0.888-0.61 1.685-0.562 2.473 4.365 3.221 7.396 6.74 10.11 0.46-2.894-1.275-3.592-1.685-5.617 2.976-3.193-3.788-7.767-2.247-11.233 1.785 2.708 2.246 6.74 4.493 8.987 0.554-1.318 0.985-2.759 1.124-4.493-1.165-2.206-2.737-4.003-3.933-6.179-4.55 0.14-6.42 5.92-6.18 8.98zm-51.11-6.17c1.241 0.658 3.222 3.481 5.055 1.685-0.992-1.629-1.615-3.627-3.932-3.932-0.3 0.83-0.84 1.41-1.13 2.25zm117.95 11.79c-0.876 3.379 0.783 6.117-1.685 9.548 0.047-6.413-4.459-8.272-7.302-11.795 1.256 4.922 4.622 7.734 6.178 12.357-2.107 0.423-1.225-2.146-2.808-2.247-0.592 2.463 1.899 1.845 1.685 3.932-1.305-0.231-2.373-3.567-3.932-1.685 2.332 3.097 3.329 7.529 7.863 8.425 0.503 0.667 1.582 5.317-0.562 5.055-0.456-1.942 1.049-2.371 0-3.37-6.935-2.24-8.187-10.161-9.549-17.974-4.041 2.715 0.565 7.588 1.686 11.234 1.637 5.33 1.681 12.285 5.055 15.727v7.302c-4.04 4.55-11.542 4.002-17.974 5.055 1.974 5.299-5.102 5.017-6.74 8.425 5.836 3.697 10.509 9.014 11.233 16.289-2.486 3.068 0.515 5.806 0 10.11 1.03 1.766 1.902-1.89 2.809 0 0.199 3.007-1.56 4.057-2.246 6.178 3.509-0.423 2.795-5.067 6.178-5.616 0.455 3.076-1.876 3.366-1.685 6.178 2.615-0.026 1.74-5.834 4.493-3.932 0.181 2.265-2.503 4.58-1.123 6.179 1.501-1.308 2.306-5.673 4.493-4.493 0.282 2.341-1.642 2.478-1.123 5.055 2.432 0.186 1.383-3.11 3.932-2.809 0.274 1.773-1.013 1.983-0.562 3.932 3.831 0.648 1.945-4.419 5.616-3.932 1.592 1.548-2.911 2.75-1.123 4.494 2.599 0.936 7.676-1.559 8.986 1.685-1.052 1.069-0.062 1.411 0 2.809-2.086 2.595-7.666 1.694-11.233 2.809-1.95-0.698-5.874-4.045-7.302-1.686 6.75 3.173 15.435 4.412 19.659 10.11-5.099 0.703-8.382-3.105-12.357-1.686-2.794-2.875-5.96-3.775-10.11-5.616-1.854-0.823-3.622-1.825-5.616-2.809-5.949-2.933-10.028-4.433-16.851-5.055-12.067-1.102-23.924-7.602-30.33 0.562 2.824-0.558 6.871-2.85 10.11-1.123 0.33 2.016-3.355 0.015-2.809 2.246 2.595 0.214 4.632 0.985 6.74 1.686 0.096-0.841-0.201-2.073 0.562-2.247 7.168 4.207 14.181 11.088 24.714 10.11 0.418 1.729-1.542 1.079-1.124 2.809 14.886 15.071 33.868 26.044 60.661 29.207 10.157-14.642 9.229-40.424 9.549-64.031-6.249 2.176-12.234 4.616-20.782 4.493-1.153 1.843-1.7 4.291-4.493 4.494 2.124 3.266-3.979 2.521-1.124 5.055-5.523 5.747-0.84 20.857-3.932 27.522-2.83-12.763-1.457-25.787 0-38.756-3.744 1.155-9.993 0.879-9.548-3.932 5.022-0.904 6.103 2.135 9.548 2.809-0.366-2.629-3.034-2.957-5.055-3.932-2.728-5.139-11.087-7.632-10.11-14.604 1.982 0.077 2.512 1.607 4.493 1.685-2.167-5.134-5.243-9.359-4.493-17.412-0.009-0.928-1.558-0.314-1.685-1.123 0.854-2.328 1.421-4.944 1.123-8.425 4.626-3.612 4.196-12.28 10.11-14.604-2.613 7.634-6.334 14.061-7.863 21.343 0.611 12.682 3.913 22.673 12.356 27.522-0.101 2.722 0.741 4.501 1.123 6.74 10.225 2.309 22.724 2.504 30.331-2.809 3.277-7.77 3.49-15.438 2.808-23.028-0.224-2.489-1.603-4.915-1.123-7.302 0.551-2.744 3.176-5.149 3.37-7.864 0.563-7.849-4.907-8.669-8.986-11.795-2.455-1.881-4.102-5.232-6.74-7.864-2.957-2.949-7.732-6.208-11.795-9.548-5.416-4.453-10.219-8.125-15.728-9.548-1.49 5.12-6.51 8.19-7.88 13.49zm-7.86 3.93c-0.919-1.702-1.143-4.1-2.809-5.055 0.2 2.43 1.16 4.09 2.81 5.06zm65.71 24.15c2.141 1.043 5.318 1.048 6.179 3.37 1.037 3.269 2.348 6.265 5.055 7.863 0.471 1.215 1.454 1.916 1.123 3.932 3.31 2.834 5.561 8.071 6.74 12.357 0.346 1.254-0.234 2.648 0 3.932 0.623 3.41 2.946 5.246 3.37 7.863 0.551 3.401-0.673 6.688-1.123 8.425-0.904 3.487-1.025 8.776-0.562 12.357-0.716 2.28-3.294 2.697-3.37 5.616 0.591 0.031 0.441 0.721-0.562 0.562-1.368 0.69-0.065 3.381 0.562 3.932 0.293-3.451 1.909-5.58 3.932-7.302 1.116 0.007 0.714 1.532 2.246 1.123 8.518-31.273-3.993-59.873-27.521-69.647 1.16 2.04 2.22 4.16 3.92 5.63zm-105.59 16.29c-0.536-3.396-2.354-5.51-2.247-9.549 1.767 0.644 1.365-0.882 2.247-1.123-1.223-4.419 3.188-6.156 2.247-8.425-3.108 0.824-1.994 5.87-4.494 7.302 0.689-2.868 1.928-5.188 2.247-8.426-0.718-0.031-0.778-0.72-1.686-0.562-2.83 4.86-4 18.17 1.68 20.79zm38.75-17.41c0.229 4.077-0.54 9.151 2.808 10.11 0.124-0.438 0.471-0.653 1.124-0.562-1.152-4.289-2.255-6.574-1.686-10.11-0.54 1.57-1.49-0.82-2.24 0.56zm-6.18 3.37c-0.295 5.135-5.697 5.162-6.179 10.11 4.865 0.178 4.044-8.305 7.863-7.302-0.476 2.332-2.864 2.752-2.808 5.616 1.767 0.27 2.195-0.8 3.37-1.123 0.064-1.994-0.406-4.524 1.685-4.493 0.15 2.022-1.037 2.707-1.123 4.493 0.663 0.646 1.985 0.636 3.37 0.562-0.812-4.454 0.244-8.132-2.247-10.11-0.89 1.14-2.69 1.41-3.92 2.24zm-32.57 5.62h1.123v-1.124h-1.123v1.12zm20.78 5.61c3.515 0.553 6.503-4.252 4.493-5.616-1.08 2.29-3.87 2.87-4.49 5.62zm80.32 3.37c0.046-3.416-0.798-5.942-1.686-8.425 0.44 2.93-0.35 7.1 1.69 8.42zm-97.17 1.13c1.597-1.878-1.544-2.615-1.685-4.493-0.249-1.062 0.764-3.385-1.124-2.809-0.27 3.63 0.28 6.45 2.8 7.3zm11.79-2.25c1.666 1.658 6.13-3.594 3.37-4.494-0.09 2.53-3.18 2.06-3.37 4.49zm83.69 13.48c-0.683 1.947-2.331 3.179-2.809 5.056-0.758 2.985-0.489 7.31-0.562 11.233-0.221 11.995-0.438 22.782-1.685 32.016-0.856 6.342-3.374 11.474-1.686 16.85 4.884-1.295 8.654-3.703 10.672-7.863-2.97-2.759-6.112 0.486-8.425-1.685-0.305-4.19 5.524-4.626 6.74-8.426 0.508-1.588-0.55-3.284-0.562-5.055-0.052-7.849 1.123-19.126 0.562-28.646-0.501-8.493 0.537-17.296-1.123-24.152-0.8 3.44 0.19 6.93-1.12 10.66zm-93.8 6.18c2.667-0.648 4.595 1.303 6.178 0-1.216-2.716-1.057-6.807-3.932-7.863-1.1 2.27-3.09 3.65-2.25 7.86zm55.61-1.12c1.171-0.436-0.414-3.377-1.124-1.686 0.92 0.01 0.31 1.56 1.12 1.69zm-63.47 9.54c1.246-1.941-2.365-3.018-3.932-3.932 0.28 2.35 2.13 3.12 3.93 3.93zm0.56 0c-0.353 2.554 3.728 5.157 6.74 6.179 0.444-1.876 2.45-4.303 1.124-6.179-3.13 2.33-5.53-0.66-7.86 0zm33.14 15.73c-1.319-0.18-1.258-1.738-2.247-2.247-2.05 1.51 1.92 3.28 2.25 2.25zm106.72 15.73c-0.48-1.311 1.964-2.42 0.562-2.809-0.16 0.67-2.26 2.12-0.56 2.81z" + /> + <path + fill="#FFFFFF" + d="m137.05 82.632c-0.814-2.322-3.467 0.758-6.178 0 4.095-2.458 7.487-5.618 10.672-8.987-1.46-1.512-1.694 0.687-3.37 0.562 0.251-1.621 2.417-1.328 2.808-2.808-5.407-3.97-11.161 3.453-16.85 4.493 6.189-4.853 12.922-7.455 20.782-9.548 2.956 1.752 4.496 1.469 8.987 1.685 1.99 1.193 2.529 3.836 5.617 3.932-1.026 1.97-3.64 2.351-4.493 4.494 1.504 1.648 2.958-1.503 5.055-1.124-0.816 1.993-0.25 5.366-1.685 6.74 1.875 0.372 1.631 2.862 3.37 3.37 6.892-0.223 2.743-11.486 8.987-12.357 0.456-3.885 2.343-6.145 2.247-9.548-0.205-7.232-6.737-12.891-6.74-20.782-2.111-4.067-8.211-4.146-10.672-7.863 1.127 0.191 1.757-0.115 1.685-1.124 1.202 1.078 1.835 2.324 3.932 1.124 0.826 2.919 4.846 2.643 7.864 3.37 2.671 4.069 5.449 8.031 7.863 12.357 0.092 8.911-0.035 15.427 1.685 21.905-2.818-0.197-4.159 1.083-5.055 2.808-0.002 1.72 3.881 2.441 5.055 1.124 1.049 3.307-5.193 4.16-6.74 6.74 0.183 2.796 3.474 3.221 1.124 5.617 0.697 2.549 1.633-0.97 2.808 0.562 1.153 4.562 3.888 8.918 2.809 14.042-1.718-0.407-1.652 0.969-3.37 0.562 0.75-3.019 0.208-8.537-1.685-10.672-2.13 0.623-0.033 4.258 0 6.178-1.844 5.832-6.101 9.252-7.863 15.166-0.503 1.813 1.832 0.789 2.247 1.685-1.445 2.761-2.28 5.896-0.562 8.986-0.727 2.457-2.834 3.532-4.494 5.055-6.407-1.402-14.433-5.835-21.343-1.685-0.249-2.185-0.425-4.443-1.124-6.178-1.659 0.775-1.294 3.573-1.685 5.617-2.304-0.691-2.769-3.223-3.932-5.055-1.92-1.45-4.361-2.379-5.055-5.055-10.036-6.814-19.874-13.827-36.509-14.042-0.071-4.641-1.269-10.677-0.562-16.85h2.808c-0.831-1.229-1.095-3.024-2.247-3.932 2.066-1.479 2.693 3.279 3.932 4.494 1.51 0.387 1.085-1.161 1.685-1.685 1.878 1.492 2.219 4.521 3.932 6.178 1.936-1.251-2.12-4.181 0-5.617 2.232-0.172 0.193 3.926 3.37 2.809-1.401 2.936 2.709 3.608 5.055 4.493-0.139 0.61-1.117 0.381-1.124 1.124 0.261 1.226 4.53 0.941 5.617 0 1.561-1.353 2.484 0.379 2.809-2.247 1.061 0.062 0.39 1.857 1.685 1.685 1.48 0.169 1.843-0.778 1.685-2.247 2.582-0.601 6.106-0.26 6.74-2.808 3.34-1.68 7.66-2.417 8.39-6.745zm-9.55 10.672c2.839-0.041 3.213 0.71 5.617 0 0.38-1.492 1.074-2.67 1.685-3.932-2.44-0.765-6.93 0.799-7.3 3.932zm16.29-20.782c1.776-1.033 6.22 0.603 6.178-2.247-2.69-0.873-5.96-0.813-6.18 2.247zm1.68 3.932c-1.727-2.993-5.625 0.947-7.302 1.685 1.644 1.833 0.549 2.914 2.247 4.493 0.454-1.996 4.049-0.613 3.932-0.562 1.418-0.618 3.259-3.19 5.055-4.494 2.048-1.486 4.43-2.396 5.617-4.493-4.66-0.358-6.43 2.182-9.55 3.371zm11.8 5.616c-0.464-1.587 0.792-1.455 0.562-2.809-0.718-0.031-0.778-0.72-1.685-0.562 0.01 1.49-0.31 3.308 1.13 3.371zm-9.55 15.727c1.418 0.828 2.509 1.984 4.493 2.247 1.872-1.125 2.966-3.025 3.37-5.617-3.517-0.708-1.538 4.078-5.055 3.37-2.836-6.768 2.932-12.204 2.247-16.85-0.124-0.438-0.471-0.653-1.124-0.562-2.61 4.505-4.58 9.656-3.93 17.416zm-8.42-8.987c1.817 0.694 0.429-1.817 2.247-1.123-0.107 3.477 1.013 5.727 3.37 6.74 0.59-2.967-1.534-7.732-3.932-9.549-0.48 1.406-1.55 2.206-1.69 3.932zm14.04 0c1.528-0.344 2.202-1.543 2.247-3.37-1.86 0.02-2.15 1.598-2.25 3.37zm-55.609 2.247c0.563-0.002 0.668 0.455 1.124 0.562-0.002-0.563 0.455-0.668 0.562-1.124-0.563 0.002-0.668-0.455-1.123-0.562 0 0.564-0.456 0.669-0.563 1.124zm36.509 2.808h-2.247c-0.89 2.612 2.91 1.95 2.25 0zm-21.91 3.932c1.708 0.023 3.697 0.327 3.37-1.685-1.71-0.028-2.86 0.511-3.37 1.685zm26.97 7.303c1.054 1.755 1.651 3.966 3.37 5.055-0.42-2.23-1.09-6.5-3.37-5.06zm2.24 14.6c0.826-2.639 0.428-7.561-2.809-7.863 0.4 3.16 0.67 6.45 2.81 7.86z" + /> + <path + fill="#FFFFFF" + d="m118.51 36.575c0.292 1.248-3.75 2.975-5.617 3.932 0.37-2.82 3.92-2.453 5.62-3.932z" + /> + <path + fill="#FFFFFF" + d="m131.43 60.727c-0.934-1.976-1.419-2.725 0-4.493-1.365-1.818-2.484-3.882-4.493-5.055 0.174-1.885 1.878-2.24 3.37-2.809-0.049 3.419 3.519 3.221 6.74 3.37 0.333 1.792-1.054 1.737 0 2.809 7.801-0.926 13.913-0.611 21.344 1.685-1.981 2.619-5.542 0.88-9.548 1.123-8.167 0.495-15.311 5.123-22.467 6.74-1.14 0.281 4.18-2.008 5.06-3.37z" + /> + <path + d="m307.8 105.66c1.424 1.011 2.111 2.756 2.809 4.493-1.69-0.74-2.05-2.82-2.81-4.49z" + /> + <path + fill="#FFFFFF" + d="m311.73 101.17c1.195 2.175 2.768 3.973 3.933 6.179-0.139 1.734-0.57 3.175-1.124 4.493-2.247-2.247-2.708-6.279-4.493-8.987-1.541 3.466 5.223 8.041 2.247 11.233 0.409 2.024 2.145 2.723 1.685 5.617-3.52-2.713-4.268-5.745-6.74-10.11-0.797-0.048-1.591-0.093-1.685 0.562-0.25-3.06 1.62-8.84 6.17-8.98zm-1.13 8.98c-0.697-1.737-1.385-3.482-2.809-4.493 0.77 1.67 1.13 3.75 2.81 4.49z" + /> + <path + fill="#FFFFFF" + d="m198.83 113.52c1.44-4.54-0.97 3.72 0 0z" + /> + <path + fill="#FFFFFF" + d="m426.31 138.24c23.528 9.774 36.039 38.374 27.521 69.647-1.532 0.409-1.13-1.116-2.246-1.123-2.022 1.722-3.639 3.851-3.932 7.302-0.627-0.551-1.93-3.241-0.562-3.932 1.003 0.158 1.152-0.531 0.562-0.562 0.076-2.919 2.654-3.336 3.37-5.616-0.464-3.581-0.343-8.87 0.562-12.357 0.45-1.737 1.674-5.023 1.123-8.425-0.424-2.617-2.747-4.453-3.37-7.863-0.234-1.283 0.346-2.678 0-3.932-1.18-4.286-3.431-9.523-6.74-12.357 0.331-2.016-0.652-2.717-1.123-3.932-2.707-1.599-4.018-4.595-5.055-7.863-0.86-2.322-4.038-2.327-6.179-3.37-1.7-1.49-2.76-3.61-3.93-5.63z" + /> + <path + fill="#FFFFFF" + d="m353.85 201.14c0.989 0.509 0.928 2.067 2.247 2.247-0.33 1.03-4.3-0.74-2.25-2.25z" + /> + <path + d="m280.84 218c2.994-3.082 10.079-3.917 16.851-3.932 13.598-0.03 29.839 2.808 38.193 7.863-13.84-4.43-37.23-9.19-55.04-3.93z" + /> + <path + fill="#FFFFFF" + d="m463.38 216.31c1.402 0.389-1.042 1.498-0.562 2.809-1.7-0.69 0.4-2.14 0.56-2.81z" + /> + <path + d="m449.34 235.97c1.69-3.75-1.46 4.48 0 0z" + /> + <path + d="m183.1 73.083c0.208 4.702-4.372 4.614-3.932 9.548-1.186 0.499-1.66 1.71-3.37 1.685 1.324 6.379 12.826 22.52-1.685 20.22-1.81 0.624-1.777 3.091-1.685 5.617-1.675 0.384-3.438 0.681-3.932 2.247 2.353 4.487-1.517 8.911 1.685 12.918-0.471 10.508-13.446 8.972-19.659 4.494-3.739 0.528-5.19 0.685-9.548 1.124 0.723 8.262 3.272 13.698 7.864 19.658 3.392 4.403 7.875 6.968 12.918 10.672 2.281 1.676 3.946 3.614 6.178 5.617 4.463 4.004 10.328 7.116 11.795 11.233 1.857 5.211-1.097 10.008 0.562 16.288-0.489 1.188-2.835 0.94-2.247 4.493 4.101 1.437 4.98 4.692 3.932 10.11-2.837-0.216-2.108 3.135-3.932 3.932 0.525 7.06-0.725 12.811-0.562 17.974 9.281-7.756 14.368-19.707 20.782-30.33 6.764-1.717 11.732 1.23 16.289 3.37 5.638 8.591 15.134 13.323 19.097 23.59-6.518 12.58-13.683 24.512-20.782 36.509-2.142 0.02-3.629 2.334-5.055 0-2.639 1.854-6.188 2.799-8.987 4.494-4.355-0.58-8.681 0.477-12.918-1.686-1.042-0.531-1.248-2.169-2.247-2.809-3.603-2.307-9.874-2.094-11.234-6.74 0.094-1.787 1.317-4.135 0-5.616-3.347 3.427-9.574 9.219-14.604 7.302-0.767-2.452 2.175-1.195 1.685-3.37-4.677 1.533-15.063 3.396-18.535-1.123-4.344-5.657 3.223-10.95 6.74-15.165-4.477 0.545-6.807-1.057-10.11-1.686-0.49-1.801 0.865-1.757 1.685-2.247-2.017-3.037-8.315-1.794-11.233-3.932-0.214-3.771 3.937-3.178 5.055-5.616-1.829-0.792-3.962-1.28-6.178-1.686-2.102 2.602-1.604 7.136-1.685 11.233-2.2 0.328-1.434-2.31-2.809-2.808-1.9-0.216-0.884 2.486-3.37 1.685-3.255-15.36 3.81-26.803 9.548-36.509-6.34 3.397-10.923 13.415-17.412 18.535 1.291 6.304 2.75 11.957 2.247 17.974-2.359-0.823-1.641-4.725-3.932-5.616-0.222 6.058 5.286 14.145 3.932 21.343-0.653-0.091-1 0.124-1.124 0.562-3.199-0.732-5.036-2.827-7.302-4.494-2.793-0.172-5.153 0.089-7.302 0.562-2.056 0.338-2.611-3.712-4.493-1.686-9.479-11.678-20.779-21.533-31.454-32.016-0.738-0.572-2.071-0.551-2.809-1.123-3.409-5.204-10.45-6.774-14.042-11.795-6.08-1.308-10.949-5.312-16.85-7.863-8.352-3.61-17.971-6.067-28.083-7.302 0.505-5.524 11.449 0.548 15.727 0-1.019-0.854-2.333-1.411-2.808-2.809 3.974-10.817 10.423-19.158 16.85-27.522 0.482-1.597 0.223-1.195 0.562-1.685 2.306-2.375 3.945-5.417 6.179-7.863 0.352-0.429 0.562-0.562 0.562-0.562 6.231-4.627 14.33-7.388 21.344-11.233 1.052-1.07 3.008-2.715 5.055-3.932 0.819-1.081 0.536-0.773 1.123-1.685 5.719-5.565 13.533-6.247 19.097-11.233 1.121-3.56 2.584-6.777 4.493-9.549 23.023 1.877 37.068 12.734 49.427 25.275-1.825-5.29-4.935-9.294-10.11-11.233-7.816-9.289-22.975-14.003-36.509-15.727-2.088-6.657 0.328-13.193 0-19.658-0.116-2.273-1.468-4.537-1.685-6.74-0.741-7.518 2.219-17.357 2.808-25.837 0.35-5.033 1.214-9.905 3.932-13.48 1.099-1.447 4.32-3.05 6.74-5.617 4.785-5.075 8.796-9.899 16.851-12.356 4.698-1.434 8.622 0.711 14.042 1.123 2.87 0.218 5.867-0.678 8.425-0.562 5.59 0.255 10.298 3.089 15.165 5.055 10.822-4.177 19.112 4.625 17.412 14.604 5.081 5.638 7.269 17.404 5.617 26.398-0.07 2.714 2.57 2.703 2.79 5.093zm-69.08-46.057c-0.491 0.342-1.648 2.203-2.247 2.808-3.958 4.006-12.851 9.62-10.672 14.604 1.23-1.099 2.241-1.667 5.055-2.247-1.356-2.564 2.155-2.83 2.809-4.494 0.368-0.936-0.978-1.415-0.562-2.247 0.132-0.264 1.472-0.187 1.685-0.562 0.697-1.229-0.393-3.665 1.685-3.932 1.909 0.969 4.117 0.391 6.179 0 1.054 0.993-0.668 1.64 0.562 2.808 2.859-2.199 10.492-1.975 11.233-4.493 2.624 0.947 8.85 1.117 7.863-3.37-7.95-0.477-16.49-3.815-23.59 1.125zm41 2.808c3.532 0.212 4.796 2.693 8.987 2.247 0.039-1.646 2.139-1.23 1.685-3.37-3.7 1.112-7.91 0.227-10.68 1.123zm-12.36 1.686h1.124c0.031-0.718 0.72-0.778 0.562-1.685h-1.685v1.685zm-15.72 2.246c-2.138 0.076-6.113 0.075-6.74 2.247 2.929 0.084 5.996-1.456 10.11-1.685-0.262 3.376 2.523 0.213 3.932 1.685-1.053 1.069-0.062 1.411 0 2.808-3.887 2.853-11.93 1.551-14.042 6.178 8.322 1.314 14.066-3.583 20.22-6.178-0.356-1.89-2.735-1.758-2.247-4.493 0.438-0.124 0.653-0.471 0.562-1.124h3.932c-2.73-3.072-10.49 0.376-15.72 0.562zm23.59-0.561c-1.003 0.002-3.268-1.513-3.932 0 1.46-0.466 3.08 1.698 3.93 0zm-21.91 56.167c-0.634 2.548-4.158 2.208-6.74 2.808 0.158 1.469-0.205 2.416-1.685 2.247-1.295 0.172-0.624-1.623-1.685-1.685-0.325 2.625-1.248 0.894-2.809 2.247-1.086 0.941-5.355 1.226-5.617 0 0.007-0.742 0.984-0.514 1.124-1.124-2.346-0.885-6.457-1.558-5.055-4.493-3.177 1.118-1.138-2.981-3.37-2.809-2.12 1.436 1.936 4.365 0 5.617-1.713-1.657-2.054-4.686-3.932-6.178-0.6 0.524-0.175 2.072-1.685 1.685-1.238-1.214-1.865-5.973-3.932-4.494 1.151 0.908 1.416 2.703 2.247 3.932h-2.808c-0.708 6.173 0.491 12.209 0.562 16.85 16.635 0.215 26.473 7.227 36.509 14.042 0.694 2.676 3.135 3.605 5.055 5.055 1.163 1.833 1.627 4.364 3.932 5.055 0.391-2.043 0.026-4.841 1.685-5.617 0.699 1.735 0.875 3.993 1.124 6.178 6.911-4.15 14.937 0.283 21.343 1.685 1.659-1.523 3.767-2.598 4.494-5.055-1.718-3.09-0.884-6.226 0.562-8.986-0.415-0.896-2.75 0.128-2.247-1.685 1.763-5.914 6.019-9.333 7.863-15.166-0.033-1.92-2.13-5.556 0-6.178 1.893 2.135 2.436 7.653 1.685 10.672 1.718 0.407 1.652-0.969 3.37-0.562 1.08-5.124-1.656-9.479-2.809-14.042-1.175-1.532-2.111 1.987-2.808-0.562 2.351-2.396-0.94-2.82-1.124-5.617 1.547-2.58 7.79-3.433 6.74-6.74-1.174 1.317-5.058 0.596-5.055-1.124 0.896-1.725 2.237-3.005 5.055-2.808-1.72-6.478-1.593-12.995-1.685-21.905-2.414-4.326-5.192-8.288-7.863-12.357-3.018-0.727-7.038-0.451-7.864-3.37-2.097 1.201-2.729-0.045-3.932-1.124 0.072 1.009-0.558 1.314-1.685 1.124 2.461 3.717 8.561 3.796 10.672 7.863 0.003 7.892 6.536 13.55 6.74 20.782 0.096 3.404-1.791 5.663-2.247 9.548-6.244 0.871-2.095 12.134-8.987 12.357-1.739-0.508-1.495-2.999-3.37-3.37 1.435-1.374 0.869-4.748 1.685-6.74-2.098-0.38-3.551 2.771-5.055 1.124 0.853-2.143 3.467-2.524 4.493-4.494-3.087-0.095-3.626-2.739-5.617-3.932-4.491-0.216-6.031 0.067-8.987-1.685-7.86 2.094-14.592 4.695-20.782 9.548 5.689-1.041 11.443-8.463 16.85-4.493-0.392 1.48-2.557 1.188-2.808 2.808 1.676 0.125 1.91-2.074 3.37-0.562-3.185 3.369-6.577 6.529-10.672 8.987 2.711 0.758 5.364-2.322 6.178 0-0.7 4.334-5.02 5.071-8.4 6.746zm-15.72-48.866c1.867-0.957 5.908-2.684 5.617-3.932-1.71 1.48-5.26 1.113-5.62 3.932zm-11.8 7.864c-0.027 1.712 0.51 2.86 1.685 3.37 1.036-4.207 4.772-5.713 6.179-9.548-3.88 0.515-4.83 6.652-7.86 6.178zm25.28 15.727c7.157-1.617 14.301-6.245 22.467-6.74 4.006-0.243 7.567 1.496 9.548-1.123-7.431-2.296-13.543-2.611-21.344-1.685-1.054-1.071 0.333-1.017 0-2.809-3.221-0.149-6.79 0.049-6.74-3.37-1.491 0.568-3.195 0.924-3.37 2.809 2.009 1.173 3.128 3.237 4.493 5.055-1.419 1.768-0.934 2.517 0 4.493-0.89 1.362-6.21 3.651-5.06 3.37zm-23.59-3.932c2.549 0.302 1.5-2.994 3.932-2.809 1.331 2.04 1.213 5.527 3.37 6.74 0.452-3.106 0.38-6.734 1.124-9.548-0.475-1.211-3.581 0.21-3.932-1.124-0.032-0.343-0.084-0.665-0.562-0.562-0.45 3.295-4.39 3.102-3.93 7.303zm11.79 9.548c-1.252-1.182-1.444-3.424-2.809-4.493-1.48 2.03 0.91 4.074 2.81 4.493zm49.43 3.932c0.13-1.485-3.472-2.085-3.932-1.123 0.94 0.745 1.88 1.488 3.93 1.123zm-56.17 5.055c1.388-0.211 1.662 3.508 2.809 1.685-1.218 0.095-0.255-1.992-0.562-2.809-1.28-0.156-2.11 0.136-2.25 1.124zm15.17 0.562c1.424 0.595 3.202-1.183 1.685-1.685-0.07 1.061-1.87 0.39-1.69 1.685zm-6.18 1.685c1.66-0.399 3.964-0.154 4.493-1.685-0.438-0.124-0.653-0.47-0.562-1.123-1.77 0.479-3.45 1.042-3.93 2.808zm-5.62-1.123c-0.646 3.642 1.384 4.606 2.247 6.74 0.979-1.902 4.126 1.624 4.494-1.123-4.38 0.352-1.44-8.645-6.74-5.617zm6.74 8.986h4.493c-0.194-1.678-1.508-2.236-2.808-2.808 0.43 1.919-2.28 0.713-1.68 2.808zm81.44 115.14c-3.904 10.513-9.889 18.943-15.727 27.521 5.85 0.142 8.419 3.563 12.356 5.617 0.051-2.402 1.125-4.114 0-6.179 1.116-0.936 0.714 0.051 2.247 0 1.054-1.071-0.333-1.016 0-2.809 1.587 0.465 1.455-0.791 2.808-0.562 0.159-1.71-1.799-2.184-0.562-3.37 1.644-0.146 1.726 1.271 3.37 1.124 0.146-1.645-1.27-1.726-1.124-3.37 0.724-0.774 2.44-0.557 3.932-0.562 1.804-2.913 4.061-9.318 7.864-6.74 0.571-3.272-0.312-4.507 0.562-7.302-4.47-1.89-8.79-3.94-15.73-3.37zm26.4 21.91c0.377 3.473-1.429 5.185 0 8.425 1.013-3.293 5.026-3.586 5.055-7.863-1.29-0.58-4.3-1.14-5.05-0.56z" + /> + <path + fill="#FFFFFF" + d="m142.66 33.205h-3.932c0.091 0.653-0.124 1-0.562 1.124-0.489 2.735 1.89 2.603 2.247 4.493-6.154 2.596-11.898 7.493-20.22 6.178 2.112-4.627 10.155-3.325 14.042-6.178-0.062-1.397-1.053-1.739 0-2.808-1.409-1.472-4.194 1.691-3.932-1.685-4.114 0.229-7.181 1.769-10.11 1.685 0.627-2.172 4.603-2.171 6.74-2.247 5.23-0.187 12.99-3.635 15.72-0.562z" + /> + <path + d="m331.95 42.191c3.207 1.868 5.895 3.194 10.672 2.247-0.171 1.481 1.173 1.449 2.247 1.685-1.194 1.615-2.457 3.16-5.056 3.37 5.313 0.678 10.46 1.523 11.795 6.178 1.146 0.98 1.102-0.418 2.247 0.562v2.808c1.938-1.011 2.611-0.337 2.247 2.247 1.689 0.566 0.995-1.251 1.123-2.247 2.115 0.29 2.558 0.71 3.37-1.123 0.762 0.174 0.466 1.406 0.562 2.247 1.477 0.167 0.442-2.179 2.247-1.685 0.086 1.397-0.883 1.739-1.124 2.808-4.66-1.103-3.891 3.224-6.74 3.932-0.418-1.729 1.542-1.08 1.124-2.809-2.701-0.455-2.029 2.464-5.056 1.685-1.525-2.28-0.079-4.528-0.562-6.178-2.143-7.336-11.277-6.84-19.097-7.302 1.473-3.177-1.147-3.093-1.685-5.617 1.85-0.397 2.51 0.262 1.69-2.808z" + /> + <path + d="m197.71 123.07c9.379 0.918 20.389 0.207 27.522 3.37 1.566 3.236-0.785 5.942-1.123 8.987 0.549 1.794 4.575-0.208 6.74 1.124 5.403 3.873 0.34 12.672-1.123 17.973 5.79 3.487 5.031 12.963-1.685 15.165-0.582-3.056 2.171-4.757 2.247-7.302 0.075-2.544-1.663-3.763-2.247-6.178-0.645-2.667 0.895-5.247-1.124-7.302 3.223-0.335 2.572-4.543 3.37-7.302-1.486-2.727-5.252-1.824-8.425-1.685-0.468 6.647-6.903 7.326-6.179 15.165 1.268-0.792 0.461-3.658 2.809-3.369-0.555 3.002-0.215 6.899-3.37 7.301-0.043 3.274 4.464 3.55 2.247 7.303-2.864-0.497-1.876-4.947-5.055-2.247 1.209-6.173-0.076-12.373 2.247-17.412 0.965-2.095 3.984-3.496 5.055-5.617 1.644-3.254 0.899-6.12 2.809-8.987-1.278-1.602-3.292 0.79-5.617 0 0.228 1.083 2.177 0.444 1.685 2.247-2.319 4.792-8.085 7.325-10.672 12.357-1.849 3.596-0.481 8.526-3.932 11.795 0.074 1.385 0.085 2.706-0.562 3.37 0.097 1.407-1.257 1.363-1.685 2.247-0.641 12.585 1.715 18.842 1.124 30.892 12.57 0.536 18.127 8.085 23.029 16.289-7.288-6.006-11.932-14.654-25.837-14.042 0.896-11.068-2.356-20.138-1.124-29.769-0.112-2.135-2.362-2.132-2.247-4.493 1.245-4.747 7.161-4.821 7.302-10.672-3.38-1.645-3.755-0.478-7.864-1.124-0.503-1.181-0.873-2.497-1.685-3.37-5.657 0.625-15.347-15.083-11.233-20.782 2.243-3.107 8.955-2.787 13.48-2.808-1.231 3.312-6.966 0.541-9.549 3.37 2.583 0.035 7.399 0.05 10.11 0.562 0.965 0.72 0.011 3.358 1.685 3.37 2.287-0.193-0.023-1.475 1.124-2.809 4.521-1.36 10.571-1.372 15.727-0.562 2.469 0.388 5.206 3.11 6.74 0.562-3.546-4.879-14.51-2.341-21.344-3.932-2.314-0.442-1.055 2.689-3.37 2.247 0.47-2.04-1.02-2.99-0.03-3.93zm-0.56 11.8c-2.565 2.586-8.44-0.292-11.795-0.562 2.135 8.724 8.51 13.208 19.658 12.918 0.927-2.354 2.839-3.77 1.685-6.74 1.665-2.267 6.705-1.159 7.302-4.494-1.988 0.678-4.384-0.037-6.74 0-2.535 0.04-6.292 2.184-7.302-1.123 0.143-2.125 7.445-0.015 5.617-2.247-4.561 1.331-13.258-1.659-18.536 0 3.03 1.08 8.73-0.5 10.11 2.24zm11.23-1.13c1.144 0.48 3.49-0.489 1.685-1.124-0.16 1.17-1.51-0.83-1.68 1.12z" + /> +</g + > +<metadata + ><rdf:RDF + ><cc:Work + ><dc:format + >image/svg+xml</dc:format + ><dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" + /><cc:license + rdf:resource="http://creativecommons.org/licenses/publicdomain/" + /><dc:publisher + ><cc:Agent + rdf:about="http://openclipart.org/" + ><dc:title + >Openclipart</dc:title + ></cc:Agent + ></dc:publisher + ><dc:title + >coffee couple</dc:title + ><dc:date + >2006-10-13T06:34:44</dc:date + ><dc:description + >I call it coffee couple but they could just as easily be drinking tea. A man and a woman enjoying a cup.</dc:description + ><dc:source + >https://openclipart.org/detail/564/coffee-couple-by-johnny_automatic</dc:source + ><dc:creator + ><cc:Agent + ><dc:title + >johnny_automatic</dc:title + ></cc:Agent + ></dc:creator + ><dc:subject + ><rdf:Bag + ><rdf:li + >black & white</rdf:li + ><rdf:li + >coffee</rdf:li + ><rdf:li + >contour</rdf:li + ><rdf:li + >couple</rdf:li + ><rdf:li + >dining</rdf:li + ><rdf:li + >man</rdf:li + ><rdf:li + >outline</rdf:li + ><rdf:li + >people</rdf:li + ><rdf:li + >tea</rdf:li + ><rdf:li + >vintage</rdf:li + ><rdf:li + >woman</rdf:li + ></rdf:Bag + ></dc:subject + ></cc:Work + ><cc:License + rdf:about="http://creativecommons.org/licenses/publicdomain/" + ><cc:permits + rdf:resource="http://creativecommons.org/ns#Reproduction" + /><cc:permits + rdf:resource="http://creativecommons.org/ns#Distribution" + /><cc:permits + rdf:resource="http://creativecommons.org/ns#DerivativeWorks" + /></cc:License + ></rdf:RDF + ></metadata + ></svg +> diff --git a/public/images/coffee-cup.svg b/public/images/coffee-cup.svg new file mode 100644 index 0000000..f1ade21 --- /dev/null +++ b/public/images/coffee-cup.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="320px" height="439px" viewBox="0 0 320 439" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 62 (91390) - https://sketch.com --> + <title>coffee-cup</title> + <desc>Created with Sketch.</desc> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="coffee-cup" fill="#000000" fill-rule="nonzero"> + <path d="M254.55,229.29 C276.57,231.4814 294.159,240.845 306.378,257.989 C324.796,283.844 325.687,324.157 300.4874,344.341 C290.2414,352.5441 275.9524,356.415 262.9014,360.122 C255.3467,362.2626 250.7564,363.3993 251.7844,372.524 C252.73752,380.9732 252.1594,389.598 252.49143,398.122 C252.80393,406.3876 248.08523,412.364 242.00343,415.931 C215.51543,431.454 186.10843,437.923 155.89843,438.298 C127.57843,438.64566 99.07043,437.49722 70.95743,434.2707 C49.70343,431.841 28.52743,426.048 10.61743,413.0597 C8.01193,411.1613 6.62913,406.1339 6.51973,402.4817 C4.64863,341.7437 3.11353,281.0117 1.38303,220.2717 C1.15256,212.01 -0.29277,203.7167 0.05103,195.4907 C0.18384,192.2485 2.92213,187.7134 5.76983,186.1821 C38.41083,168.6701 73.48483,160.6001 110.45983,161.3071 C142.10483,161.90476 173.52583,164.1743 204.29983,172.5411 C221.54583,177.2325 238.67883,181.7481 250.95983,195.8931 C253.39733,198.7056 255.39343,202.8189 255.59263,206.4321 C255.97935,213.7485 255.00669,221.1271 254.55353,229.2871 L254.55,229.29 Z M16,339.04 C15.88672,342.3447 15.67969,344.6611 15.76562,346.9697 C16.44921,364.9347 17.71482,382.8757 17.67582,400.8287 C17.652383,408.4107 20.51562,412.7667 27.01562,414.7667 C38.84362,418.4112 50.67162,423.212 62.82062,424.462 C90.14462,427.294 117.64062,429.2159 145.11762,429.6964 C173.84062,430.18859 201.69562,423.8058 227.69962,411.5404 C232.76212,409.1537 241.55862,408.3724 241.57462,398.7284 C241.629308,379.1664 242.19181,359.5954 242.64882,340.0404 C243.47304,305.0524 244.43002,270.0834 245.19572,235.1104 C245.35197,227.6065 244.92228,220.0984 244.78556,213.3524 C164.46956,239.9574 86.39556,245.3994 9.60556,200.3254 C11.24616,226.5954 12.82436,251.6734 14.44536,277.6344 C24.33596,278.8453 34.69936,280.111 45.10536,281.3805 C43.06626,291.1305 43.06626,291.1305 14.92136,288.1617 C14.80808,292.2281 14.71042,296.2828 14.60105,300.7127 C23.68305,301.5252 32.60505,302.326 42.32805,303.1893 C41.56633,306.162 41.28505,309.6229 40.54685,309.7284 C32.12885,310.9003 23.64085,311.5604 14.88285,312.3925 C14.98832,317.498 15.1016,322.9315 15.23051,329.1585 C20.41801,329.04522 25.19931,328.43975 29.80851,329.04522 C32.26161,329.38506 34.42961,331.83822 36.72261,333.34212 C34.30461,335.38512 32.15231,338.52962 29.39841,339.18982 C25.55071,340.11951 21.25001,339.201538 15.99641,339.04529 L16,339.04 Z M20.8438,198.16 C78.3708,235.457 182.3138,228.445 237.1438,202.7538 C164.6638,188.4378 93.7738,189.2188 20.8438,198.16 Z M23.9649,188.058 C57.4139,186.6088 92.3519,184.7533 127.3149,183.6674 C163.0099,182.558 198.4949,184.7299 235.1649,193.5072 C192.3409,165.6052 62.1549,163.4912 23.9649,188.058 Z M254.1549,276.628 C254.45178,290.78 254.73302,304.148 254.97912,317.526 C265.68612,318.05334 275.38512,310.6002 276.30312,301.124 C277.51792,288.569 269.26792,279.073 254.1549,276.628 L254.1549,276.628 Z" id="Shape"></path> + <path d="M129.34,129.34 C123.5509,132.4767 117.703,129.98844 114.504,121.6447 C107.297,102.8397 105.9298,81.2107 124.3321,63.4997 C129.5274,58.4997 134.1602,52.4527 137.4691,46.0737 C141.5668,38.1714 139.3324,30.0817 135.2347,22.2807 C132.5355,17.144 130.7816,11.4287 129.3285,5.8007 C128.92616,4.2812 130.8871,0.7812 132.2582,0.5077 C134.102,0.11708 137.684,1.45301 138.2855,2.9491 C142.2933,12.9335 146.7464,22.9411 149.0665,33.3791 C152.1876,47.3521 144.4454,58.2311 134.4455,66.4411 C117.7505,80.1601 117.9885,97.5191 121.9965,115.8551 C122.98869,120.4293 126.5824,124.4449 129.3403,129.3391 L129.34,129.34 Z" id="Path"></path> + <path d="M196.39,33.457 C203.3861,31.0039 206.48,33.832 208.16,40.7422 C211.6834,55.2732 207.73813,66.5082 195.836,75.7192 C175.367,91.5432 173.34,103.1762 186.1368,125.5202 C186.39461,125.96161 186.1993,126.6452 186.226644,127.8444 C178.867244,132.2741 174.925644,126.4616 173.101644,121.571 C167.082144,105.337 164.718844,88.571 182.972744,74.911 C200.339744,61.911 200.921744,57.72 196.390744,33.458 L196.39,33.457 Z" id="Path"></path> + <path d="M62.1,133.84 C53.7914,137.3634 49.702,132.0939 47.014,127.4728 C40.0492,115.4998 35.362,98.1958 48.5023,82.8748 C54.2875,76.1326 60.2643,69.0078 58.6233,59.1908 C57.87721,54.7572 55.5139,50.6127 54.1702,46.2458 C53.43192,43.8317 53.25614,41.238 52.8304,38.7302 C55.7523,39.37473 60.0843,39.02317 61.3773,40.82 C69.3031,51.879 73.0373,63.277 64.5375,76.957 C62.8305,79.7109 60.6078,82.1445 58.6469,84.7422 C47.5649,99.4372 47.6859,113.6762 58.94377,128.3042 C60.01017,129.6948 60.70547,131.3628 62.09997,133.8394 L62.1,133.84 Z" id="Path"></path> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/public/images/comic.webp b/public/images/comic.webp Binary files differnew file mode 100644 index 0000000..cc47bd1 --- /dev/null +++ b/public/images/comic.webp diff --git a/public/images/craigslist-gallery.png b/public/images/craigslist-gallery.png Binary files differnew file mode 100644 index 0000000..d49d5cd --- /dev/null +++ b/public/images/craigslist-gallery.png diff --git a/public/images/craigslist-gallery.webp b/public/images/craigslist-gallery.webp Binary files differnew file mode 100644 index 0000000..119c3be --- /dev/null +++ b/public/images/craigslist-gallery.webp diff --git a/public/images/css-orb.png b/public/images/css-orb.png Binary files differnew file mode 100644 index 0000000..89ec3ab --- /dev/null +++ b/public/images/css-orb.png diff --git a/public/images/custom-radio-inputs.png b/public/images/custom-radio-inputs.png Binary files differnew file mode 100644 index 0000000..3058384 --- /dev/null +++ b/public/images/custom-radio-inputs.png diff --git a/public/images/cut-forms.webp b/public/images/cut-forms.webp Binary files differnew file mode 100644 index 0000000..e39d9d6 --- /dev/null +++ b/public/images/cut-forms.webp diff --git a/public/images/cut-heatsink.webp b/public/images/cut-heatsink.webp Binary files differnew file mode 100644 index 0000000..363aec9 --- /dev/null +++ b/public/images/cut-heatsink.webp diff --git a/public/images/dither-desktop.png b/public/images/dither-desktop.png Binary files differnew file mode 100644 index 0000000..bea61c3 --- /dev/null +++ b/public/images/dither-desktop.png diff --git a/public/images/dither-desktop.webp b/public/images/dither-desktop.webp Binary files differnew file mode 100644 index 0000000..e1581da --- /dev/null +++ b/public/images/dither-desktop.webp diff --git a/public/images/dropbox-404_bovayg_c_scale,w_758.webp b/public/images/dropbox-404_bovayg_c_scale,w_758.webp Binary files differnew file mode 100644 index 0000000..af6bbc3 --- /dev/null +++ b/public/images/dropbox-404_bovayg_c_scale,w_758.webp diff --git a/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp b/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp Binary files differnew file mode 100644 index 0000000..f15e21b --- /dev/null +++ b/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp diff --git a/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp b/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp Binary files differnew file mode 100644 index 0000000..f97ece1 --- /dev/null +++ b/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp diff --git a/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp b/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp Binary files differnew file mode 100644 index 0000000..553e2aa --- /dev/null +++ b/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp diff --git a/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp b/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp Binary files differnew file mode 100644 index 0000000..554e460 --- /dev/null +++ b/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp diff --git a/public/images/e54ac9b2850f786471d7790bec3844a6.webp b/public/images/e54ac9b2850f786471d7790bec3844a6.webp Binary files differnew file mode 100644 index 0000000..66e6771 --- /dev/null +++ b/public/images/e54ac9b2850f786471d7790bec3844a6.webp diff --git a/public/images/easy-toggle-switches.png b/public/images/easy-toggle-switches.png Binary files differnew file mode 100644 index 0000000..beef023 --- /dev/null +++ b/public/images/easy-toggle-switches.png diff --git a/public/images/eero-pi-hole.webp b/public/images/eero-pi-hole.webp Binary files differnew file mode 100644 index 0000000..bcea2df --- /dev/null +++ b/public/images/eero-pi-hole.webp diff --git a/public/images/eli-schiff-twitter.webp b/public/images/eli-schiff-twitter.webp Binary files differnew file mode 100644 index 0000000..5d2be44 --- /dev/null +++ b/public/images/eli-schiff-twitter.webp diff --git a/public/images/et-book-gill-sans.webp b/public/images/et-book-gill-sans.webp Binary files differnew file mode 100644 index 0000000..e4becaf --- /dev/null +++ b/public/images/et-book-gill-sans.webp diff --git a/public/images/fanwood-league.webp b/public/images/fanwood-league.webp Binary files differnew file mode 100644 index 0000000..367d17b --- /dev/null +++ b/public/images/fanwood-league.webp diff --git a/public/images/fathom-create-droplet-details.webp b/public/images/fathom-create-droplet-details.webp Binary files differnew file mode 100644 index 0000000..7a1642f --- /dev/null +++ b/public/images/fathom-create-droplet-details.webp diff --git a/public/images/firefox-dark-mode.webp b/public/images/firefox-dark-mode.webp Binary files differnew file mode 100644 index 0000000..167fe18 --- /dev/null +++ b/public/images/firefox-dark-mode.webp diff --git a/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp b/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp Binary files differnew file mode 100644 index 0000000..0f75f3b --- /dev/null +++ b/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp diff --git a/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp b/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp Binary files differnew file mode 100644 index 0000000..e768981 --- /dev/null +++ b/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp diff --git a/public/images/flat-design-icons_vubivd_c_scale,w_800.webp b/public/images/flat-design-icons_vubivd_c_scale,w_800.webp Binary files differnew file mode 100644 index 0000000..03a80e9 --- /dev/null +++ b/public/images/flat-design-icons_vubivd_c_scale,w_800.webp diff --git a/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp b/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp Binary files differnew file mode 100644 index 0000000..64d32e9 --- /dev/null +++ b/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp diff --git a/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp b/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp Binary files differnew file mode 100644 index 0000000..1e5427a --- /dev/null +++ b/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp diff --git a/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp b/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp Binary files differnew file mode 100644 index 0000000..58b001a --- /dev/null +++ b/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp diff --git a/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp b/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp Binary files differnew file mode 100644 index 0000000..b065743 --- /dev/null +++ b/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp diff --git a/public/images/flexbox-bar-graph-1.webp b/public/images/flexbox-bar-graph-1.webp Binary files differnew file mode 100644 index 0000000..383d86b --- /dev/null +++ b/public/images/flexbox-bar-graph-1.webp diff --git a/public/images/flexbox-bar-graph-2.webp b/public/images/flexbox-bar-graph-2.webp Binary files differnew file mode 100644 index 0000000..271ee18 --- /dev/null +++ b/public/images/flexbox-bar-graph-2.webp diff --git a/public/images/flexbox-bar-graph-3.webp b/public/images/flexbox-bar-graph-3.webp Binary files differnew file mode 100644 index 0000000..6c5b9bf --- /dev/null +++ b/public/images/flexbox-bar-graph-3.webp diff --git a/public/images/flowkit.webp b/public/images/flowkit.webp Binary files differnew file mode 100644 index 0000000..611513e --- /dev/null +++ b/public/images/flowkit.webp diff --git a/public/images/github-design-current-redesign.webp b/public/images/github-design-current-redesign.webp Binary files differnew file mode 100644 index 0000000..44b1759 --- /dev/null +++ b/public/images/github-design-current-redesign.webp diff --git a/public/images/github-design-current.webp b/public/images/github-design-current.webp Binary files differnew file mode 100644 index 0000000..ca59f06 --- /dev/null +++ b/public/images/github-design-current.webp diff --git a/public/images/github-ticket-redesign.webp b/public/images/github-ticket-redesign.webp Binary files differnew file mode 100644 index 0000000..6a862b3 --- /dev/null +++ b/public/images/github-ticket-redesign.webp diff --git a/public/images/github-ticket.webp b/public/images/github-ticket.webp Binary files differnew file mode 100644 index 0000000..f5e82c4 --- /dev/null +++ b/public/images/github-ticket.webp diff --git a/public/images/globe.webp b/public/images/globe.webp Binary files differnew file mode 100644 index 0000000..3f1a754 --- /dev/null +++ b/public/images/globe.webp diff --git a/public/images/gnome-1.png b/public/images/gnome-1.png Binary files differnew file mode 100644 index 0000000..c648e86 --- /dev/null +++ b/public/images/gnome-1.png diff --git a/public/images/gnome-2.png b/public/images/gnome-2.png Binary files differnew file mode 100644 index 0000000..bec6fc2 --- /dev/null +++ b/public/images/gnome-2.png diff --git a/public/images/gnome-3.png b/public/images/gnome-3.png Binary files differnew file mode 100644 index 0000000..2a83027 --- /dev/null +++ b/public/images/gnome-3.png diff --git a/public/images/greedy-hand.webp b/public/images/greedy-hand.webp Binary files differnew file mode 100644 index 0000000..90b9eb0 --- /dev/null +++ b/public/images/greedy-hand.webp diff --git a/public/images/husqvarna-450x-wheels.png b/public/images/husqvarna-450x-wheels.png Binary files differnew file mode 100644 index 0000000..46fe931 --- /dev/null +++ b/public/images/husqvarna-450x-wheels.png diff --git a/public/images/inside-x201.jpg b/public/images/inside-x201.jpg Binary files differnew file mode 100644 index 0000000..88cf13d --- /dev/null +++ b/public/images/inside-x201.jpg diff --git a/public/images/jetpack-boost.webp b/public/images/jetpack-boost.webp Binary files differnew file mode 100644 index 0000000..9f2904e --- /dev/null +++ b/public/images/jetpack-boost.webp diff --git a/public/images/jetpack.webp b/public/images/jetpack.webp Binary files differnew file mode 100644 index 0000000..b72774d --- /dev/null +++ b/public/images/jetpack.webp diff --git a/public/images/karma-open-sans.webp b/public/images/karma-open-sans.webp Binary files differnew file mode 100644 index 0000000..8d6ef52 --- /dev/null +++ b/public/images/karma-open-sans.webp diff --git a/public/images/lenovo-tablet.png b/public/images/lenovo-tablet.png Binary files differnew file mode 100644 index 0000000..f59ed86 --- /dev/null +++ b/public/images/lenovo-tablet.png diff --git a/public/images/lenovo-tablet.webp b/public/images/lenovo-tablet.webp Binary files differnew file mode 100644 index 0000000..d8515c0 --- /dev/null +++ b/public/images/lenovo-tablet.webp diff --git a/public/images/li-ion-battery-hat-2.webp b/public/images/li-ion-battery-hat-2.webp Binary files differnew file mode 100644 index 0000000..928b9c1 --- /dev/null +++ b/public/images/li-ion-battery-hat-2.webp diff --git a/public/images/li-ion-battery-hat.webp b/public/images/li-ion-battery-hat.webp Binary files differnew file mode 100644 index 0000000..39c21d8 --- /dev/null +++ b/public/images/li-ion-battery-hat.webp diff --git a/public/images/libre-oswald.webp b/public/images/libre-oswald.webp Binary files differnew file mode 100644 index 0000000..d49e1dc --- /dev/null +++ b/public/images/libre-oswald.webp diff --git a/public/images/lighthouse-article-original.webp b/public/images/lighthouse-article-original.webp Binary files differnew file mode 100644 index 0000000..a7e5f76 --- /dev/null +++ b/public/images/lighthouse-article-original.webp diff --git a/public/images/lighthouse-article-updated.webp b/public/images/lighthouse-article-updated.webp Binary files differnew file mode 100644 index 0000000..9579d23 --- /dev/null +++ b/public/images/lighthouse-article-updated.webp diff --git a/public/images/lighthouse-homepage-original.webp b/public/images/lighthouse-homepage-original.webp Binary files differnew file mode 100644 index 0000000..74fbb0d --- /dev/null +++ b/public/images/lighthouse-homepage-original.webp diff --git a/public/images/lighthouse-homepage-updated.webp b/public/images/lighthouse-homepage-updated.webp Binary files differnew file mode 100644 index 0000000..b5cb181 --- /dev/null +++ b/public/images/lighthouse-homepage-updated.webp diff --git a/public/images/look-at-me.jpeg b/public/images/look-at-me.jpeg Binary files differnew file mode 100644 index 0000000..b3d9083 --- /dev/null +++ b/public/images/look-at-me.jpeg diff --git a/public/images/macos-color.svg b/public/images/macos-color.svg new file mode 100644 index 0000000..a10d568 --- /dev/null +++ b/public/images/macos-color.svg @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="123px" height="164px" viewBox="0 0 123 164" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 62 (91390) - https://sketch.com --> + <title>macos</title> + <desc>Created with Sketch.</desc> + <defs> + <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1"> + <stop stop-color="#0DD6FF" offset="0%"></stop> + <stop stop-color="#1E73F3" offset="100%"></stop> + </linearGradient> + <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2"> + <stop stop-color="#FFFFFF" offset="0%"></stop> + <stop stop-color="#DBE8F4" offset="100%"></stop> + </linearGradient> + </defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="macos"> + <path d="M121.66,153.44 C121.66,153.84 121.66,154.23 121.65,154.63 C121.65,154.99 121.65,155.32 121.64,155.66 C121.628337,156.326821 121.568178,156.991909 121.46,157.65 C121.359602,158.258804 121.167414,158.848852 120.89,159.4 C120.329178,160.470774 119.453004,161.343457 118.38,161.9 C117.82536,162.177486 117.232008,162.369651 116.62,162.47 C115.952298,162.581858 115.27696,162.642036 114.6,162.65 C114.28,162.66 113.95,162.66 113.62,162.66 L10.382,162.66 C10.046,162.66 9.718,162.66 9.382,162.65 C8.70510328,162.640784 8.02986123,162.580614 7.362,162.47 C6.75756645,162.369988 6.172076,162.177747 5.626,161.9 C5.08963911,161.627316 4.59880729,161.273108 4.171,160.85 C3.7379605,160.424661 3.37722139,159.931516 3.103,159.39 C2.82497995,158.846499 2.63398915,158.262728 2.537,157.66 C2.4249245,156.992325 2.36474443,156.316971 2.357,155.64 C2.349,155.4 2.346,155.18 2.344,154.95 L2.344,154.63 L2.344,9.35 L2.344,9.05 C2.344,8.82 2.344,8.6 2.357,8.37 C2.36428393,7.69313241 2.42345737,7.01781968 2.534,6.35 C2.63304746,5.74750769 2.82464353,5.16394924 3.102,4.62 C3.65342227,3.53258717 4.53771396,2.64969689 5.626,2.1 C6.17194575,1.82533838 6.75564105,1.63324467 7.358,1.53 C8.02850748,1.42033226 8.70659209,1.36349085 9.386,1.36 L9.621,1.35 C9.875,1.35 10.127,1.34 10.38,1.34 L113.61,1.34 C113.87,1.34 114.13,1.35 114.39,1.35 L114.62,1.36 C115.29342,1.36391002 115.96549,1.42075177 116.63,1.53 C117.237699,1.63489701 117.827097,1.82687235 118.38,2.1 C118.915876,2.37519605 119.405177,2.73289236 119.83,3.16 C120.264064,3.58491597 120.625525,4.07812432 120.9,4.62 C121.169748,5.16287364 121.358423,5.742373 121.46,6.34 C121.568223,7.01152209 121.628376,7.68991252 121.64,8.37 C121.65,8.68 121.65,9.01 121.65,9.35 C121.66,9.77 121.66,10.16 121.66,10.56 L121.66,153.44 Z" id="Path" fill="#F0EBDF"></path> + <path d="M28.62,90.3 L28.02,90.3 C27.87,90.29 27.72,90.29 27.55,90.29 C27.2517314,90.2859895 26.9542026,90.2592453 26.66,90.21 C26.4303757,90.1749284 26.2076709,90.1040678 26,90 C25.7951039,89.8991619 25.6090626,89.7638591 25.45,89.6 C25.2894211,89.4441923 25.1574205,89.2614221 25.06,89.06 C24.9525898,88.8528643 24.8783533,88.6301547 24.84,88.4 C24.795278,88.105234 24.7685618,87.8080164 24.76,87.51 L24.76,23.85 C24.7685618,23.5519836 24.795278,23.254766 24.84,22.96 C24.8783533,22.7298453 24.9525898,22.5071357 25.06,22.3 C25.2575842,21.8890749 25.5890749,21.5575842 26,21.36 C26.2089642,21.2569756 26.4310141,21.182959 26.66,21.14 C26.9544193,21.0937644 27.2519726,21.0703614 27.55,21.07 C27.71,21.06 27.87,21.06 28.03,21.06 L61.62,21.06 C59.0145225,26.8088838 57.2433124,32.900365 56.36,39.15 C55.3148855,45.5126371 54.6337779,51.9297392 54.32,58.37 C54.3,58.63 54.29,58.83 54.29,58.97 C54.1922951,59.8154482 54.4658797,60.6617367 55.04,61.29 C55.6480243,61.8969854 56.481497,62.2231268 57.34,62.19 L64.94,62.19 L65.2,62.18 C65.66,62.18 65.91,62.18 65.91,63.06 C65.91,66.65 66.05,70.32 66.3,74.02 C64.7867498,74.2009155 63.264026,74.2910768 61.74,74.29 C53.65,74.29 48.3,71.97 45.23,70.02 C43.3790358,68.9102227 41.7567182,67.4576036 40.45,65.74 C40.2294687,65.4088126 39.8578933,65.2098884 39.46,65.21 C39.2322947,65.2066732 39.0090035,65.2729628 38.82,65.4 C38.5539247,65.5664048 38.3663925,65.8332775 38.3,66.14 C38.2398941,66.4474892 38.3007929,66.7663122 38.47,67.03 C38.72,67.42 44.92,76.64 61.74,76.64 C63.3202024,76.6387205 64.8991778,76.551927 66.47,76.38 C66.47,76.43 66.48,76.47 66.48,76.52 C66.88,81.31 67.76,87.12 68.39,90.3 L28.62,90.3 Z" id="Path" fill="url(#linearGradient-1)"></path> + <path d="M98.84,86.52 L98.84,87.03 C98.84,87.19 98.84,87.35 98.83,87.51 C98.8250275,87.8078256 98.8016496,88.1050591 98.76,88.4 C98.717041,88.6289859 98.6430244,88.8510358 98.54,89.06 C98.3269466,89.4597136 97.9997136,89.7869466 97.6,90 C97.3923291,90.1040678 97.1696243,90.1749284 96.94,90.21 C96.64244,90.2592722 96.3415855,90.2860148 96.04,90.29 C95.88,90.29 95.73,90.29 95.56,90.3 L70.8,90.3 C69.906707,85.6801634 69.2525031,81.0172917 68.84,76.33 C68.83,76.23 68.83,76.14 68.82,76.04 C80.37,73.99 84.94,67.37 85.16,67.04 C85.3982205,66.6765878 85.4178346,66.2117707 85.2110766,65.8295815 C85.0043185,65.4473924 84.604531,65.2094647 84.17,65.21 C83.7780079,65.2128611 83.4121244,65.4070034 83.19,65.73 C81.8506222,67.4495452 80.202479,68.9043876 78.33,70.02 C75.360464,71.8322972 72.076821,73.0704477 68.65,73.67 C68.41,70.09 68.28,66.53 68.28,63.06 C68.383452,62.2015323 68.0984311,61.3416807 67.5026809,60.7149824 C66.9069306,60.0882841 66.0626027,59.7601194 65.2,59.82 L65.01,59.82 L57.34,59.83 C57.133518,59.8503995 56.926819,59.793379 56.76,59.67 C56.651779,59.5047918 56.612312,59.3038689 56.65,59.11 C56.66,58.97 56.67,58.75 56.68,58.48 C56.9999607,52.1240163 57.6743424,45.7908383 58.7,39.51 C59.5855141,33.1101613 61.4577428,26.8862656 64.25,21.06 L95.56,21.06 C95.72,21.06 95.88,21.06 96.04,21.07 C96.3380423,21.0699841 96.635625,21.0933895 96.93,21.14 C97.1625702,21.1814514 97.3881274,21.2555149 97.6,21.36 C97.79991,21.4599359 97.9822798,21.5916475 98.14,21.75 C98.2968986,21.9112881 98.4314336,22.0929103 98.54,22.29 C98.6415479,22.5030606 98.7154789,22.7282141 98.76,22.96 C98.8016496,23.2549409 98.8250275,23.5521744 98.83,23.85 C98.84,24.01 98.84,24.17 98.84,24.32 L98.84,86.52 Z" id="Path" fill="url(#linearGradient-2)"></path> + <path d="M122.99,9.35 L122.99,8.33 C122.975078,7.58582033 122.904885,6.84377779 122.78,6.11 C122.656435,5.3794025 122.423841,4.67150678 122.09,4.01 C121.409155,2.67239257 120.319793,1.58653348 118.98,0.91 C118.313776,0.56845844 117.598609,0.332318178 116.86,0.21 C116.126403,0.0863598388 115.383937,0.022815453 114.64,0.02 C114.3,0.01 113.96,-4.54747351e-13 113.62,-4.54747351e-13 L10.376,-4.54747351e-13 C10.037,-4.54747351e-13 9.698,0.01 9.356,0.02 C8.6097758,0.0235806882 7.86504586,0.0871184924 7.129,0.21 C6.39309871,0.332961185 5.68066446,0.569089961 5.017,0.91 C4.35165804,1.24480927 3.74401571,1.68366207 3.217,2.21 C2.68422105,2.73379354 2.24159948,3.34197585 1.907,4.01 C1.56880328,4.67004242 1.33470403,5.3784119 1.213,6.11 C1.08844686,6.84363973 1.0215755,7.58591183 1.013,8.33 C1.001,8.67 1.001,9.01 0.995,9.35 L0.995,154.66 C1.001,155 1.001,155.33 1.013,155.68 C1.02157591,156.420773 1.08844912,157.159722 1.213,157.89 C1.33314943,158.625156 1.56730045,159.337056 1.907,160 C2.244276,160.663409 2.68665758,161.267885 3.217,161.79 C3.74134275,162.31947 4.34952532,162.758713 5.017,163.09 C5.68066446,163.43091 6.39309871,163.667039 7.129,163.79 C7.86541976,163.911225 8.60976462,163.978072 9.356,163.99 C9.698,163.99 10.037,164 10.376,164 L113.62,164 C113.96,164 114.3,163.99 114.64,163.99 C115.383957,163.978878 116.126034,163.912024 116.86,163.79 C117.598609,163.667682 118.313776,163.431542 118.98,163.09 C119.6489,162.761079 120.257455,162.321567 120.78,161.79 C121.309119,161.266829 121.751347,160.662562 122.09,160 C122.425358,159.335598 122.658004,158.624174 122.78,157.89 C122.904883,157.159584 122.975078,156.420865 122.99,155.68 L122.99,154.66 C123,154.25 123,153.85 123,153.44 L123,10.56 C123,10.15 123,9.75 122.99,9.35 L122.99,9.35 Z M121.66,153.44 C121.66,153.84 121.66,154.23 121.65,154.63 C121.65,154.99 121.65,155.32 121.64,155.66 C121.628337,156.326821 121.568178,156.991909 121.46,157.65 C121.359602,158.258804 121.167414,158.848852 120.89,159.4 C120.329178,160.470774 119.453004,161.343457 118.38,161.9 C117.82536,162.177486 117.232008,162.369651 116.62,162.47 C115.952298,162.581858 115.27696,162.642036 114.6,162.65 C114.28,162.66 113.95,162.66 113.62,162.66 L10.382,162.66 C10.046,162.66 9.718,162.66 9.382,162.65 C8.70510328,162.640784 8.02986123,162.580614 7.362,162.47 C6.75756645,162.369988 6.172076,162.177747 5.626,161.9 C5.08963911,161.627316 4.59880729,161.273108 4.171,160.85 C3.7379605,160.424661 3.37722139,159.931516 3.103,159.39 C2.82497995,158.846499 2.63398915,158.262728 2.537,157.66 C2.4249245,156.992325 2.36474443,156.316971 2.357,155.64 C2.349,155.4 2.346,155.18 2.344,154.95 L2.344,154.63 L2.344,9.35 L2.344,9.05 C2.344,8.82 2.344,8.6 2.357,8.37 C2.36428393,7.69313241 2.42345737,7.01781968 2.534,6.35 C2.63304746,5.74750769 2.82464353,5.16394924 3.102,4.62 C3.65342227,3.53258717 4.53771396,2.64969689 5.626,2.1 C6.17194575,1.82533838 6.75564105,1.63324467 7.358,1.53 C8.02850748,1.42033226 8.70659209,1.36349085 9.386,1.36 L9.621,1.35 C9.875,1.35 10.127,1.34 10.38,1.34 L113.61,1.34 C113.87,1.34 114.13,1.35 114.39,1.35 L114.62,1.36 C115.29342,1.36391002 115.96549,1.42075177 116.63,1.53 C117.237699,1.63489701 117.827097,1.82687235 118.38,2.1 C118.915876,2.37519605 119.405177,2.73289236 119.83,3.16 C120.264064,3.58491597 120.625525,4.07812432 120.9,4.62 C121.169748,5.16287364 121.358423,5.742373 121.46,6.34 C121.568223,7.01152209 121.628376,7.68991252 121.64,8.37 C121.65,8.68 121.65,9.01 121.65,9.35 C121.66,9.77 121.66,10.16 121.66,10.56 L121.66,153.44 Z M78.91,38.0499566 C78.0771893,38.052744 77.402744,38.7271893 77.4,39.56 L77.4,44.66 C77.402744,45.4928107 78.0771893,46.167256 78.91,46.1700059 C79.3089985,46.1711261 79.6916876,46.0117486 79.9719362,45.7277383 C80.2521847,45.443728 80.4064457,45.0589481 80.4,44.66 L80.4,39.56 C80.4083874,39.1604862 80.2547566,38.7745794 79.9740854,38.4901409 C79.6934143,38.2057023 79.3095901,38.0469399 78.91,38.0499566 L78.91,38.0499566 Z M44.71,46.1700003 C45.5428107,46.167256 46.217256,45.4928107 46.22,44.66 L46.22,39.56 C46.22,38.72605 45.54395,38.05 44.71,38.05 C43.87605,38.05 43.1999997,38.72605 43.1999997,39.56 L43.1999997,44.66 C43.1997345,45.0605582 43.358738,45.444787 43.6419755,45.7280245 C43.925213,46.011262 44.3094418,46.1702655 44.71,46.1700003 L44.71,46.1700003 Z M100.2,24.32 C100.2,24.15 100.2,23.98 100.19,23.81 C100.189849,23.4448172 100.159748,23.0802619 100.1,22.72 C100.034917,22.3580578 99.9169901,22.0076465 99.75,21.68 C99.5877778,21.3497269 99.3714605,21.0489107 99.11,20.79 C98.8483961,20.5317108 98.548124,20.3157847 98.22,20.15 C97.889642,19.9831626 97.535448,19.8684712 97.17,19.81 C96.8100022,19.7469939 96.4454526,19.713549 96.08,19.71 C95.91,19.71 95.74,19.7 95.57,19.7 L28.02,19.7 C27.86,19.7 27.69,19.71 27.52,19.71 C27.1512094,19.7130695 26.7832984,19.7465159 26.42,19.81 C26.0573857,19.8670044 25.7062604,19.9817954 25.38,20.15 C25.051876,20.3157847 24.7516039,20.5317108 24.49,20.79 C24.2286209,21.0512754 24.0093479,21.3515108 23.84,21.68 C23.6717954,22.0062604 23.5570044,22.3573857 23.5,22.72 C23.4369939,23.0799978 23.403549,23.4445474 23.4,23.81 C23.4,23.98 23.39,24.15 23.39,24.32 L23.39,87.04 C23.39,87.21 23.4,87.38 23.4,87.54 C23.4030695,87.9087906 23.4365159,88.2767016 23.5,88.64 C23.5570044,89.0026143 23.6717954,89.3537396 23.84,89.68 C24.0093479,90.0084892 24.2286209,90.3087246 24.49,90.57 C24.7516039,90.8282892 25.051876,91.0442153 25.38,91.21 C25.7062604,91.3782046 26.0573857,91.4929956 26.42,91.55 C26.7832984,91.6134841 27.1512094,91.6469305 27.52,91.65 C27.69,91.65 27.86,91.65 28.02,91.66 L95.57,91.66 C95.74,91.65 95.91,91.65 96.08,91.65 C96.4454526,91.646451 96.8100022,91.6130061 97.17,91.55 C97.535448,91.4915288 97.889642,91.3768374 98.22,91.21 C98.548124,91.0442153 98.8483961,90.8282892 99.11,90.57 C99.3714605,90.3110893 99.5877778,90.0102731 99.75,89.68 C99.9169901,89.3523535 100.034917,89.0019422 100.1,88.64 C100.160155,88.2764269 100.190257,87.908516 100.19,87.54 C100.2,87.38 100.2,87.21 100.2,87.04 L100.2,24.32 Z M28.62,90.3 L28.02,90.3 C27.87,90.29 27.72,90.29 27.55,90.29 C27.2517314,90.2859895 26.9542026,90.2592453 26.66,90.21 C26.4303757,90.1749284 26.2076709,90.1040678 26,90 C25.7951039,89.8991619 25.6090626,89.7638591 25.45,89.6 C25.2894211,89.4441923 25.1574205,89.2614221 25.06,89.06 C24.9525898,88.8528643 24.8783533,88.6301547 24.84,88.4 C24.795278,88.105234 24.7685618,87.8080164 24.76,87.51 L24.76,23.85 C24.7685618,23.5519836 24.795278,23.254766 24.84,22.96 C24.8783533,22.7298453 24.9525898,22.5071357 25.06,22.3 C25.2575842,21.8890749 25.5890749,21.5575842 26,21.36 C26.2089642,21.2569756 26.4310141,21.182959 26.66,21.14 C26.9544193,21.0937644 27.2519726,21.0703614 27.55,21.07 C27.71,21.06 27.87,21.06 28.03,21.06 L61.62,21.06 C59.0145225,26.8088838 57.2433124,32.900365 56.36,39.15 C55.3148855,45.5126371 54.6337779,51.9297392 54.32,58.37 C54.3,58.63 54.29,58.83 54.29,58.97 C54.1922951,59.8154482 54.4658797,60.6617367 55.04,61.29 C55.6480243,61.8969854 56.481497,62.2231268 57.34,62.19 L64.94,62.19 L65.2,62.18 C65.66,62.18 65.91,62.18 65.91,63.06 C65.91,66.65 66.05,70.32 66.3,74.02 C64.7867498,74.2009155 63.264026,74.2910768 61.74,74.29 C53.65,74.29 48.3,71.97 45.23,70.02 C43.3790358,68.9102227 41.7567182,67.4576036 40.45,65.74 C40.2294687,65.4088126 39.8578933,65.2098884 39.46,65.21 C39.2322947,65.2066732 39.0090035,65.2729628 38.82,65.4 C38.5539247,65.5664048 38.3663925,65.8332775 38.3,66.14 C38.2398941,66.4474892 38.3007929,66.7663122 38.47,67.03 C38.72,67.42 44.92,76.64 61.74,76.64 C63.3202024,76.6387205 64.8991778,76.551927 66.47,76.38 C66.47,76.43 66.48,76.47 66.48,76.52 C66.88,81.31 67.76,87.12 68.39,90.3 L28.62,90.3 Z M98.84,86.52 L98.84,87.03 C98.84,87.19 98.84,87.35 98.83,87.51 C98.8250275,87.8078256 98.8016496,88.1050591 98.76,88.4 C98.717041,88.6289859 98.6430244,88.8510358 98.54,89.06 C98.3269466,89.4597136 97.9997136,89.7869466 97.6,90 C97.3923291,90.1040678 97.1696243,90.1749284 96.94,90.21 C96.64244,90.2592722 96.3415855,90.2860148 96.04,90.29 C95.88,90.29 95.73,90.29 95.56,90.3 L70.8,90.3 C69.906707,85.6801634 69.2525031,81.0172917 68.84,76.33 C68.83,76.23 68.83,76.14 68.82,76.04 C80.37,73.99 84.94,67.37 85.16,67.04 C85.3982205,66.6765878 85.4178346,66.2117707 85.2110766,65.8295815 C85.0043185,65.4473924 84.604531,65.2094647 84.17,65.21 C83.7780079,65.2128611 83.4121244,65.4070034 83.19,65.73 C81.8506222,67.4495452 80.202479,68.9043876 78.33,70.02 C75.360464,71.8322972 72.076821,73.0704477 68.65,73.67 C68.41,70.09 68.28,66.53 68.28,63.06 C68.383452,62.2015323 68.0984311,61.3416807 67.5026809,60.7149824 C66.9069306,60.0882841 66.0626027,59.7601194 65.2,59.82 L65.01,59.82 L57.34,59.83 C57.133518,59.8503995 56.926819,59.793379 56.76,59.67 C56.651779,59.5047918 56.612312,59.3038689 56.65,59.11 C56.66,58.97 56.67,58.75 56.68,58.48 C56.9999607,52.1240163 57.6743424,45.7908383 58.7,39.51 C59.5855141,33.1101613 61.4577428,26.8862656 64.25,21.06 L95.56,21.06 C95.72,21.06 95.88,21.06 96.04,21.07 C96.3380423,21.0699841 96.635625,21.0933895 96.93,21.14 C97.1625702,21.1814514 97.3881274,21.2555149 97.6,21.36 C97.79991,21.4599359 97.9822798,21.5916475 98.14,21.75 C98.2968986,21.9112881 98.4314336,22.0929103 98.54,22.29 C98.6415479,22.5030606 98.7154789,22.7282141 98.76,22.96 C98.8016496,23.2549409 98.8250275,23.5521744 98.83,23.85 C98.84,24.01 98.84,24.17 98.84,24.32 L98.84,86.52 Z M54.38,143.4 L50.07,143.4 L50.07,121.18 L49.93,121.18 L40.79,143.17 L37.3,143.17 L28.14,121.18 L27.99,121.18 L27.99,143.4 L23.71,143.4 L23.71,113.2 L29.15,113.2 L38.96,137.04 L39.13,137.04 L48.92,113.2 L54.38,113.2 L54.38,143.4 Z M59.06,137.15 C59.06,133.28 62.02,131.06 67.48,130.72 L73.34,130.36 L73.34,128.69 C73.34,126.24 71.73,124.9 68.85,124.9 C66.47,124.9 64.75,126.12 64.4,127.98 L60.15,127.98 C60.28,124.06 63.97,121.22 68.97,121.22 C74.35,121.22 77.86,124.02 77.86,128.38 L77.86,143.4 L73.51,143.4 L73.51,139.78 L73.4,139.78 C71.9748605,142.242406 69.313819,143.724602 66.47,143.64 C62.1,143.64 59.06,141.04 59.06,137.15 L59.06,137.15 Z M73.34,135.2 L73.34,133.5 L68.11,133.84 C65.17,134.03 63.64,135.12 63.64,137.02 C63.64,138.86 65.23,140.06 67.74,140.06 C70.92,140.06 73.34,138.03 73.34,135.2 L73.34,135.2 Z M97.46,129.05 C97.059359,126.554086 94.8102144,124.783483 92.29,124.98 C88.83,124.98 86.52,127.9 86.52,132.44 C86.52,137.13 88.84,139.91 92.31,139.91 C95.1,139.91 96.95,138.53 97.48,135.98 L101.83,135.98 C101.35,140.62 97.63,143.68 92.29,143.68 C86.01,143.68 81.89,139.41 81.89,132.44 C81.89,125.64 86.01,121.22 92.25,121.22 C97.9,121.22 101.41,124.76 101.79,129.05 L97.46,129.05 Z" id="Shape" fill="#000000"></path> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/public/images/macos-convert-1.png b/public/images/macos-convert-1.png Binary files differnew file mode 100644 index 0000000..a59a239 --- /dev/null +++ b/public/images/macos-convert-1.png diff --git a/public/images/macos-convert-1.webp b/public/images/macos-convert-1.webp Binary files differnew file mode 100644 index 0000000..550ecea --- /dev/null +++ b/public/images/macos-convert-1.webp diff --git a/public/images/macos-convert-2.png b/public/images/macos-convert-2.png Binary files differnew file mode 100644 index 0000000..3caed58 --- /dev/null +++ b/public/images/macos-convert-2.png diff --git a/public/images/macos-convert-2.webp b/public/images/macos-convert-2.webp Binary files differnew file mode 100644 index 0000000..c851d03 --- /dev/null +++ b/public/images/macos-convert-2.webp diff --git a/public/images/macos-convert-3.png b/public/images/macos-convert-3.png Binary files differnew file mode 100644 index 0000000..98cf3dd --- /dev/null +++ b/public/images/macos-convert-3.png diff --git a/public/images/macos-convert-3.webp b/public/images/macos-convert-3.webp Binary files differnew file mode 100644 index 0000000..dd7feda --- /dev/null +++ b/public/images/macos-convert-3.webp diff --git a/public/images/macos.svg b/public/images/macos.svg new file mode 100644 index 0000000..ee67b2d --- /dev/null +++ b/public/images/macos.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="123px" height="164px" viewBox="0 0 123 164" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 62 (91390) - https://sketch.com --> + <title>macos</title> + <desc>Created with Sketch.</desc> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="macos" fill="#000000"> + <path d="M122.99,9.35 L122.99,8.33 C122.975078,7.58582033 122.904885,6.84377779 122.78,6.11 C122.656435,5.3794025 122.423841,4.67150678 122.09,4.01 C121.409155,2.67239257 120.319793,1.58653348 118.98,0.91 C118.313776,0.56845844 117.598609,0.332318178 116.86,0.21 C116.126403,0.0863598388 115.383937,0.022815453 114.64,0.02 C114.3,0.01 113.96,-4.54747351e-13 113.62,-4.54747351e-13 L10.376,-4.54747351e-13 C10.037,-4.54747351e-13 9.698,0.01 9.356,0.02 C8.6097758,0.0235806882 7.86504586,0.0871184924 7.129,0.21 C6.39309871,0.332961185 5.68066446,0.569089961 5.017,0.91 C4.35165804,1.24480927 3.74401571,1.68366207 3.217,2.21 C2.68422105,2.73379354 2.24159948,3.34197585 1.907,4.01 C1.56880328,4.67004242 1.33470403,5.3784119 1.213,6.11 C1.08844686,6.84363973 1.0215755,7.58591183 1.013,8.33 C1.001,8.67 1.001,9.01 0.995,9.35 L0.995,154.66 C1.001,155 1.001,155.33 1.013,155.68 C1.02157591,156.420773 1.08844912,157.159722 1.213,157.89 C1.33314943,158.625156 1.56730045,159.337056 1.907,160 C2.244276,160.663409 2.68665758,161.267885 3.217,161.79 C3.74134275,162.31947 4.34952532,162.758713 5.017,163.09 C5.68066446,163.43091 6.39309871,163.667039 7.129,163.79 C7.86541976,163.911225 8.60976462,163.978072 9.356,163.99 C9.698,163.99 10.037,164 10.376,164 L113.62,164 C113.96,164 114.3,163.99 114.64,163.99 C115.383957,163.978878 116.126034,163.912024 116.86,163.79 C117.598609,163.667682 118.313776,163.431542 118.98,163.09 C119.6489,162.761079 120.257455,162.321567 120.78,161.79 C121.309119,161.266829 121.751347,160.662562 122.09,160 C122.425358,159.335598 122.658004,158.624174 122.78,157.89 C122.904883,157.159584 122.975078,156.420865 122.99,155.68 L122.99,154.66 C123,154.25 123,153.85 123,153.44 L123,10.56 C123,10.15 123,9.75 122.99,9.35 L122.99,9.35 Z M116.664,149.011535 C116.664,149.386739 116.664,149.752564 116.654838,150.127768 C116.654838,150.465453 116.654838,150.774996 116.645676,151.09392 C116.634989,151.719406 116.579871,152.343266 116.480756,152.960563 C116.388768,153.531628 116.212682,154.0851 115.958509,154.602083 C115.444671,155.606481 114.641901,156.425068 113.65879,156.947111 C113.150617,157.207396 112.606974,157.387649 112.046239,157.481778 C111.434475,157.586702 110.815716,157.64315 110.195469,157.65062 C109.902278,157.66 109.599925,157.66 109.297571,157.66 L14.7085962,157.66 C14.4007454,157.66 14.1002245,157.66 13.7923737,157.65062 C13.1721857,157.641975 12.5535138,157.585535 11.9416043,157.481778 C11.3878087,157.387965 10.8513692,157.207641 10.3510421,156.947111 C9.85961624,156.691331 9.4099051,156.359079 9.01793845,155.962199 C8.62117793,155.563226 8.29066065,155.100651 8.03941285,154.592703 C7.78468464,154.082893 7.60969458,153.535309 7.52083094,152.969943 C7.41814484,152.343657 7.36300651,151.710167 7.35591089,151.07516 C7.34858111,150.850037 7.34583244,150.643675 7.344,150.427932 L7.344,150.127768 L7.344,13.8534714 L7.344,13.5720679 C7.344,13.3563253 7.344,13.1499628 7.35591089,12.9342202 C7.36258459,12.2993107 7.41680063,11.6658596 7.51808227,11.0394371 C7.60883177,10.4742925 7.7843764,9.926908 8.03849663,9.41667741 C8.5437221,8.39667178 9.35393002,7.56851062 10.3510421,7.05288867 C10.8512499,6.79525294 11.3860446,6.61506684 11.9379395,6.51822217 C12.5522735,6.41535258 13.1735498,6.36203469 13.7960386,6.35876023 L14.0113509,6.34938011 C14.2440714,6.34938011 14.4749595,6.34 14.7067638,6.34 L109.288409,6.34 C109.526627,6.34 109.764845,6.34938011 110.003063,6.34938011 L110.213794,6.35876023 C110.830796,6.36242787 111.446562,6.41574608 112.055401,6.51822217 C112.612188,6.61661676 113.152208,6.79669181 113.65879,7.05288867 C114.149772,7.3110257 114.598081,7.64654892 114.987313,8.04718076 C115.385013,8.44575679 115.716191,8.90839184 115.967671,9.41667741 C116.21482,9.92589908 116.387688,10.4694761 116.480756,11.030057 C116.579912,11.6599524 116.635025,12.2962904 116.645676,12.9342202 C116.654838,13.2250037 116.654838,13.5345475 116.654838,13.8534714 C116.664,14.2474362 116.664,14.6132606 116.664,14.9884652 L116.664,149.011535 Z M78.91,38.0499566 C78.0771893,38.052744 77.402744,38.7271893 77.4,39.56 L77.4,44.66 C77.402744,45.4928107 78.0771893,46.167256 78.91,46.1700059 C79.3089985,46.1711261 79.6916876,46.0117486 79.9719362,45.7277383 C80.2521847,45.443728 80.4064457,45.0589481 80.4,44.66 L80.4,39.56 C80.4083874,39.1604862 80.2547566,38.7745794 79.9740854,38.4901409 C79.6934143,38.2057023 79.3095901,38.0469399 78.91,38.0499566 L78.91,38.0499566 Z M44.71,46.1700003 C45.5428107,46.167256 46.217256,45.4928107 46.22,44.66 L46.22,39.56 C46.22,38.72605 45.54395,38.05 44.71,38.05 C43.87605,38.05 43.1999997,38.72605 43.1999997,39.56 L43.1999997,44.66 C43.1997345,45.0605582 43.358738,45.444787 43.6419755,45.7280245 C43.925213,46.011262 44.3094418,46.1702655 44.71,46.1700003 L44.71,46.1700003 Z M100.2,24.32 C100.2,24.15 100.2,23.98 100.19,23.81 C100.189849,23.4448172 100.159748,23.0802619 100.1,22.72 C100.034917,22.3580578 99.9169901,22.0076465 99.75,21.68 C99.5877778,21.3497269 99.3714605,21.0489107 99.11,20.79 C98.8483961,20.5317108 98.548124,20.3157847 98.22,20.15 C97.889642,19.9831626 97.535448,19.8684712 97.17,19.81 C96.8100022,19.7469939 96.4454526,19.713549 96.08,19.71 C95.91,19.71 95.74,19.7 95.57,19.7 L28.02,19.7 C27.86,19.7 27.69,19.71 27.52,19.71 C27.1512094,19.7130695 26.7832984,19.7465159 26.42,19.81 C26.0573857,19.8670044 25.7062604,19.9817954 25.38,20.15 C25.051876,20.3157847 24.7516039,20.5317108 24.49,20.79 C24.2286209,21.0512754 24.0093479,21.3515108 23.84,21.68 C23.6717954,22.0062604 23.5570044,22.3573857 23.5,22.72 C23.4369939,23.0799978 23.403549,23.4445474 23.4,23.81 C23.4,23.98 23.39,24.15 23.39,24.32 L23.39,87.04 C23.39,87.21 23.4,87.38 23.4,87.54 C23.4030695,87.9087906 23.4365159,88.2767016 23.5,88.64 C23.5570044,89.0026143 23.6717954,89.3537396 23.84,89.68 C24.0093479,90.0084892 24.2286209,90.3087246 24.49,90.57 C24.7516039,90.8282892 25.051876,91.0442153 25.38,91.21 C25.7062604,91.3782046 26.0573857,91.4929956 26.42,91.55 C26.7832984,91.6134841 27.1512094,91.6469305 27.52,91.65 C27.69,91.65 27.86,91.65 28.02,91.66 L95.57,91.66 C95.74,91.65 95.91,91.65 96.08,91.65 C96.4454526,91.646451 96.8100022,91.6130061 97.17,91.55 C97.535448,91.4915288 97.889642,91.3768374 98.22,91.21 C98.548124,91.0442153 98.8483961,90.8282892 99.11,90.57 C99.3714605,90.3110893 99.5877778,90.0102731 99.75,89.68 C99.9169901,89.3523535 100.034917,89.0019422 100.1,88.64 C100.160155,88.2764269 100.190257,87.908516 100.19,87.54 C100.2,87.38 100.2,87.21 100.2,87.04 L100.2,24.32 Z M28.62,90.3 L28.02,90.3 C27.87,90.29 27.72,90.29 27.55,90.29 C27.2517314,90.2859895 26.9542026,90.2592453 26.66,90.21 C26.4303757,90.1749284 26.2076709,90.1040678 26,90 C25.7951039,89.8991619 25.6090626,89.7638591 25.45,89.6 C25.2894211,89.4441923 25.1574205,89.2614221 25.06,89.06 C24.9525898,88.8528643 24.8783533,88.6301547 24.84,88.4 C24.795278,88.105234 24.7685618,87.8080164 24.76,87.51 L24.76,23.85 C24.7685618,23.5519836 24.795278,23.254766 24.84,22.96 C24.8783533,22.7298453 24.9525898,22.5071357 25.06,22.3 C25.2575842,21.8890749 25.5890749,21.5575842 26,21.36 C26.2089642,21.2569756 26.4310141,21.182959 26.66,21.14 C26.9544193,21.0937644 27.2519726,21.0703614 27.55,21.07 C27.71,21.06 27.87,21.06 28.03,21.06 L61.62,21.06 C59.0145225,26.8088838 57.2433124,32.900365 56.36,39.15 C55.3148855,45.5126371 54.6337779,51.9297392 54.32,58.37 C54.3,58.63 54.29,58.83 54.29,58.97 C54.1922951,59.8154482 54.4658797,60.6617367 55.04,61.29 C55.6480243,61.8969854 56.481497,62.2231268 57.34,62.19 L64.94,62.19 L65.2,62.18 C65.66,62.18 65.91,62.18 65.91,63.06 C65.91,66.65 66.05,70.32 66.3,74.02 C64.7867498,74.2009155 63.264026,74.2910768 61.74,74.29 C53.65,74.29 48.3,71.97 45.23,70.02 C43.3790358,68.9102227 41.7567182,67.4576036 40.45,65.74 C40.2294687,65.4088126 39.8578933,65.2098884 39.46,65.21 C39.2322947,65.2066732 39.0090035,65.2729628 38.82,65.4 C38.5539247,65.5664048 38.3663925,65.8332775 38.3,66.14 C38.2398941,66.4474892 38.3007929,66.7663122 38.47,67.03 C38.72,67.42 44.92,76.64 61.74,76.64 C63.3202024,76.6387205 64.8991778,76.551927 66.47,76.38 C66.47,76.43 66.48,76.47 66.48,76.52 C66.88,81.31 67.76,87.12 68.39,90.3 L28.62,90.3 Z M98.84,86.52 L98.84,87.03 C98.84,87.19 98.84,87.35 98.83,87.51 C98.8250275,87.8078256 98.8016496,88.1050591 98.76,88.4 C98.717041,88.6289859 98.6430244,88.8510358 98.54,89.06 C98.3269466,89.4597136 97.9997136,89.7869466 97.6,90 C97.3923291,90.1040678 97.1696243,90.1749284 96.94,90.21 C96.64244,90.2592722 96.3415855,90.2860148 96.04,90.29 C95.88,90.29 95.73,90.29 95.56,90.3 L70.8,90.3 C69.906707,85.6801634 69.2525031,81.0172917 68.84,76.33 C68.83,76.23 68.83,76.14 68.82,76.04 C80.37,73.99 84.94,67.37 85.16,67.04 C85.3982205,66.6765878 85.4178346,66.2117707 85.2110766,65.8295815 C85.0043185,65.4473924 84.604531,65.2094647 84.17,65.21 C83.7780079,65.2128611 83.4121244,65.4070034 83.19,65.73 C81.8506222,67.4495452 80.202479,68.9043876 78.33,70.02 C75.360464,71.8322972 72.076821,73.0704477 68.65,73.67 C68.41,70.09 68.28,66.53 68.28,63.06 C68.383452,62.2015323 68.0984311,61.3416807 67.5026809,60.7149824 C66.9069306,60.0882841 66.0626027,59.7601194 65.2,59.82 L65.01,59.82 L57.34,59.83 C57.133518,59.8503995 56.926819,59.793379 56.76,59.67 C56.651779,59.5047918 56.612312,59.3038689 56.65,59.11 C56.66,58.97 56.67,58.75 56.68,58.48 C56.9999607,52.1240163 57.6743424,45.7908383 58.7,39.51 C59.5855141,33.1101613 61.4577428,26.8862656 64.25,21.06 L95.56,21.06 C95.72,21.06 95.88,21.06 96.04,21.07 C96.3380423,21.0699841 96.635625,21.0933895 96.93,21.14 C97.1625702,21.1814514 97.3881274,21.2555149 97.6,21.36 C97.79991,21.4599359 97.9822798,21.5916475 98.14,21.75 C98.2968986,21.9112881 98.4314336,22.0929103 98.54,22.29 C98.6415479,22.5030606 98.7154789,22.7282141 98.76,22.96 C98.8016496,23.2549409 98.8250275,23.5521744 98.83,23.85 C98.84,24.01 98.84,24.17 98.84,24.32 L98.84,86.52 Z M54.38,143.4 L50.07,143.4 L50.07,121.18 L49.93,121.18 L40.79,143.17 L37.3,143.17 L28.14,121.18 L27.99,121.18 L27.99,143.4 L23.71,143.4 L23.71,113.2 L29.15,113.2 L38.96,137.04 L39.13,137.04 L48.92,113.2 L54.38,113.2 L54.38,143.4 Z M59.06,137.15 C59.06,133.28 62.02,131.06 67.48,130.72 L73.34,130.36 L73.34,128.69 C73.34,126.24 71.73,124.9 68.85,124.9 C66.47,124.9 64.75,126.12 64.4,127.98 L60.15,127.98 C60.28,124.06 63.97,121.22 68.97,121.22 C74.35,121.22 77.86,124.02 77.86,128.38 L77.86,143.4 L73.51,143.4 L73.51,139.78 L73.4,139.78 C71.9748605,142.242406 69.313819,143.724602 66.47,143.64 C62.1,143.64 59.06,141.04 59.06,137.15 L59.06,137.15 Z M73.34,135.2 L73.34,133.5 L68.11,133.84 C65.17,134.03 63.64,135.12 63.64,137.02 C63.64,138.86 65.23,140.06 67.74,140.06 C70.92,140.06 73.34,138.03 73.34,135.2 L73.34,135.2 Z M97.46,129.05 C97.059359,126.554086 94.8102144,124.783483 92.29,124.98 C88.83,124.98 86.52,127.9 86.52,132.44 C86.52,137.13 88.84,139.91 92.31,139.91 C95.1,139.91 96.95,138.53 97.48,135.98 L101.83,135.98 C101.35,140.62 97.63,143.68 92.29,143.68 C86.01,143.68 81.89,139.41 81.89,132.44 C81.89,125.64 86.01,121.22 92.25,121.22 C97.9,121.22 101.41,124.76 101.79,129.05 L97.46,129.05 Z" id="Shape"></path> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/public/images/mango-router-1.png b/public/images/mango-router-1.png Binary files differnew file mode 100644 index 0000000..64bb50a --- /dev/null +++ b/public/images/mango-router-1.png diff --git a/public/images/mario-block.png b/public/images/mario-block.png Binary files differnew file mode 100644 index 0000000..0f24737 --- /dev/null +++ b/public/images/mario-block.png diff --git a/public/images/menu-toggle-css.png b/public/images/menu-toggle-css.png Binary files differnew file mode 100644 index 0000000..ec1705c --- /dev/null +++ b/public/images/menu-toggle-css.png diff --git a/public/images/miniatures.webp b/public/images/miniatures.webp Binary files differnew file mode 100644 index 0000000..6c22057 --- /dev/null +++ b/public/images/miniatures.webp diff --git a/public/images/monero-qr.jpeg b/public/images/monero-qr.jpeg Binary files differnew file mode 100644 index 0000000..6f7d9f5 --- /dev/null +++ b/public/images/monero-qr.jpeg diff --git a/public/images/mower-1.jpeg b/public/images/mower-1.jpeg Binary files differnew file mode 100644 index 0000000..2421679 --- /dev/null +++ b/public/images/mower-1.jpeg diff --git a/public/images/mower-2.webp b/public/images/mower-2.webp Binary files differnew file mode 100644 index 0000000..239511c --- /dev/null +++ b/public/images/mower-2.webp diff --git a/public/images/mr-busy-hello.avif b/public/images/mr-busy-hello.avif Binary files differnew file mode 100644 index 0000000..68cbed5 --- /dev/null +++ b/public/images/mr-busy-hello.avif diff --git a/public/images/mr-busy-hello.jpg b/public/images/mr-busy-hello.jpg Binary files differnew file mode 100644 index 0000000..b0d4588 --- /dev/null +++ b/public/images/mr-busy-hello.jpg diff --git a/public/images/mr-busy-hello.webp b/public/images/mr-busy-hello.webp Binary files differnew file mode 100644 index 0000000..ed71dfc --- /dev/null +++ b/public/images/mr-busy-hello.webp diff --git a/public/images/mr-happy.png b/public/images/mr-happy.png Binary files differnew file mode 100644 index 0000000..2372074 --- /dev/null +++ b/public/images/mr-happy.png diff --git a/public/images/mr-happy.webp b/public/images/mr-happy.webp Binary files differnew file mode 100644 index 0000000..e031976 --- /dev/null +++ b/public/images/mr-happy.webp diff --git a/public/images/my-face-thumbnail.png b/public/images/my-face-thumbnail.png Binary files differnew file mode 100644 index 0000000..5583354 --- /dev/null +++ b/public/images/my-face-thumbnail.png diff --git a/public/images/navigation.webp b/public/images/navigation.webp Binary files differnew file mode 100644 index 0000000..3dfb449 --- /dev/null +++ b/public/images/navigation.webp diff --git a/public/images/new-automator-2.png b/public/images/new-automator-2.png Binary files differnew file mode 100644 index 0000000..ccbe344 --- /dev/null +++ b/public/images/new-automator-2.png diff --git a/public/images/new-automator-2.webp b/public/images/new-automator-2.webp Binary files differnew file mode 100644 index 0000000..ab136a1 --- /dev/null +++ b/public/images/new-automator-2.webp diff --git a/public/images/new-automator.png b/public/images/new-automator.png Binary files differnew file mode 100644 index 0000000..826bbda --- /dev/null +++ b/public/images/new-automator.png diff --git a/public/images/new-automator.webp b/public/images/new-automator.webp Binary files differnew file mode 100644 index 0000000..d88601c --- /dev/null +++ b/public/images/new-automator.webp diff --git a/public/images/nova-static-blog-small.png b/public/images/nova-static-blog-small.png Binary files differnew file mode 100644 index 0000000..17cb0bc --- /dev/null +++ b/public/images/nova-static-blog-small.png diff --git a/public/images/nova-static-blog.webp b/public/images/nova-static-blog.webp Binary files differnew file mode 100644 index 0000000..6805e13 --- /dev/null +++ b/public/images/nova-static-blog.webp diff --git a/public/images/paper-bg.webp b/public/images/paper-bg.webp Binary files differnew file mode 100644 index 0000000..a31be53 --- /dev/null +++ b/public/images/paper-bg.webp diff --git a/public/images/pi-400-final.png b/public/images/pi-400-final.png Binary files differnew file mode 100644 index 0000000..598344d --- /dev/null +++ b/public/images/pi-400-final.png diff --git a/public/images/pi-400-final.webp b/public/images/pi-400-final.webp Binary files differnew file mode 100644 index 0000000..a7857c6 --- /dev/null +++ b/public/images/pi-400-final.webp diff --git a/public/images/pi-heatsink.png b/public/images/pi-heatsink.png Binary files differnew file mode 100644 index 0000000..476b1de --- /dev/null +++ b/public/images/pi-heatsink.png diff --git a/public/images/pi-heatsink.webp b/public/images/pi-heatsink.webp Binary files differnew file mode 100644 index 0000000..363aec9 --- /dev/null +++ b/public/images/pi-heatsink.webp diff --git a/public/images/pi-internal-ssd.png b/public/images/pi-internal-ssd.png Binary files differnew file mode 100644 index 0000000..eff683e --- /dev/null +++ b/public/images/pi-internal-ssd.png diff --git a/public/images/pi-internal-ssd.webp b/public/images/pi-internal-ssd.webp Binary files differnew file mode 100644 index 0000000..45ec829 --- /dev/null +++ b/public/images/pi-internal-ssd.webp diff --git a/public/images/pi-outer-port.png b/public/images/pi-outer-port.png Binary files differnew file mode 100644 index 0000000..d4662a6 --- /dev/null +++ b/public/images/pi-outer-port.png diff --git a/public/images/pi-outer-port.webp b/public/images/pi-outer-port.webp Binary files differnew file mode 100644 index 0000000..9a4c090 --- /dev/null +++ b/public/images/pi-outer-port.webp diff --git a/public/images/pi-plastic-back.png b/public/images/pi-plastic-back.png Binary files differnew file mode 100644 index 0000000..0c090c7 --- /dev/null +++ b/public/images/pi-plastic-back.png diff --git a/public/images/pi-plastic-back.webp b/public/images/pi-plastic-back.webp Binary files differnew file mode 100644 index 0000000..5c5ab0f --- /dev/null +++ b/public/images/pi-plastic-back.webp diff --git a/public/images/pi-screen-2.webp b/public/images/pi-screen-2.webp Binary files differnew file mode 100644 index 0000000..71ce624 --- /dev/null +++ b/public/images/pi-screen-2.webp diff --git a/public/images/pi-screen.webp b/public/images/pi-screen.webp Binary files differnew file mode 100644 index 0000000..a6adee1 --- /dev/null +++ b/public/images/pi-screen.webp diff --git a/public/images/pi-zero-wh.webp b/public/images/pi-zero-wh.webp Binary files differnew file mode 100644 index 0000000..347b016 --- /dev/null +++ b/public/images/pi-zero-wh.webp diff --git a/public/images/pihole-cloudflare.png b/public/images/pihole-cloudflare.png Binary files differnew file mode 100644 index 0000000..e09bdec --- /dev/null +++ b/public/images/pihole-cloudflare.png diff --git a/public/images/pihole-cloudflare.webp b/public/images/pihole-cloudflare.webp Binary files differnew file mode 100644 index 0000000..4d1d5d3 --- /dev/null +++ b/public/images/pihole-cloudflare.webp diff --git a/public/images/playfair-roboto.webp b/public/images/playfair-roboto.webp Binary files differnew file mode 100644 index 0000000..cc99a5e --- /dev/null +++ b/public/images/playfair-roboto.webp diff --git a/public/images/plug-play.png b/public/images/plug-play.png Binary files differnew file mode 100644 index 0000000..bdc819c --- /dev/null +++ b/public/images/plug-play.png diff --git a/public/images/portable-pi-1.webp b/public/images/portable-pi-1.webp Binary files differnew file mode 100644 index 0000000..0c4e70e --- /dev/null +++ b/public/images/portable-pi-1.webp diff --git a/public/images/portable-pi-2.webp b/public/images/portable-pi-2.webp Binary files differnew file mode 100644 index 0000000..2c7b44f --- /dev/null +++ b/public/images/portable-pi-2.webp diff --git a/public/images/ports-everywhere.jpg b/public/images/ports-everywhere.jpg Binary files differnew file mode 100644 index 0000000..a6d4cb5 --- /dev/null +++ b/public/images/ports-everywhere.jpg diff --git a/public/images/prescription-ui-update-1.webp b/public/images/prescription-ui-update-1.webp Binary files differnew file mode 100644 index 0000000..29d0074 --- /dev/null +++ b/public/images/prescription-ui-update-1.webp diff --git a/public/images/prescription-ui-update-2.webp b/public/images/prescription-ui-update-2.webp Binary files differnew file mode 100644 index 0000000..2e0e1c7 --- /dev/null +++ b/public/images/prescription-ui-update-2.webp diff --git a/public/images/prescription-ui-update-final.webp b/public/images/prescription-ui-update-final.webp Binary files differnew file mode 100644 index 0000000..65badf4 --- /dev/null +++ b/public/images/prescription-ui-update-final.webp diff --git a/public/images/prescription-ui.webp b/public/images/prescription-ui.webp Binary files differnew file mode 100644 index 0000000..36f266c --- /dev/null +++ b/public/images/prescription-ui.webp diff --git a/public/images/proper-ui.png b/public/images/proper-ui.png Binary files differnew file mode 100644 index 0000000..315f45a --- /dev/null +++ b/public/images/proper-ui.png diff --git a/public/images/ps4-loading.png b/public/images/ps4-loading.png Binary files differnew file mode 100644 index 0000000..0894190 --- /dev/null +++ b/public/images/ps4-loading.png diff --git a/public/images/publishing-with-jekyll.webp b/public/images/publishing-with-jekyll.webp Binary files differnew file mode 100644 index 0000000..0b25f28 --- /dev/null +++ b/public/images/publishing-with-jekyll.webp diff --git a/public/images/r6e-1.webp b/public/images/r6e-1.webp Binary files differnew file mode 100644 index 0000000..00b104a --- /dev/null +++ b/public/images/r6e-1.webp diff --git a/public/images/raspi-config.webp b/public/images/raspi-config.webp Binary files differnew file mode 100644 index 0000000..e8214a6 --- /dev/null +++ b/public/images/raspi-config.webp diff --git a/public/images/receipt-update.webp b/public/images/receipt-update.webp Binary files differnew file mode 100644 index 0000000..6f57a90 --- /dev/null +++ b/public/images/receipt-update.webp diff --git a/public/images/rice-paper.webp b/public/images/rice-paper.webp Binary files differnew file mode 100644 index 0000000..63a39a7 --- /dev/null +++ b/public/images/rice-paper.webp diff --git a/public/images/rpi-adguard-1.webp b/public/images/rpi-adguard-1.webp Binary files differnew file mode 100644 index 0000000..fa664ac --- /dev/null +++ b/public/images/rpi-adguard-1.webp diff --git a/public/images/rpi-desktop-screenshot.webp b/public/images/rpi-desktop-screenshot.webp Binary files differnew file mode 100644 index 0000000..86abe09 --- /dev/null +++ b/public/images/rpi-desktop-screenshot.webp diff --git a/public/images/rpi-desktop.webp b/public/images/rpi-desktop.webp Binary files differnew file mode 100644 index 0000000..1d334f1 --- /dev/null +++ b/public/images/rpi-desktop.webp diff --git a/public/images/rpi-eero-1.webp b/public/images/rpi-eero-1.webp Binary files differnew file mode 100644 index 0000000..55c77d1 --- /dev/null +++ b/public/images/rpi-eero-1.webp diff --git a/public/images/rpi-lite-os.webp b/public/images/rpi-lite-os.webp Binary files differnew file mode 100644 index 0000000..38c8e10 --- /dev/null +++ b/public/images/rpi-lite-os.webp diff --git a/public/images/safari-dark-mode.webp b/public/images/safari-dark-mode.webp Binary files differnew file mode 100644 index 0000000..b6b167a --- /dev/null +++ b/public/images/safari-dark-mode.webp diff --git a/public/images/sanded-pi-case.webp b/public/images/sanded-pi-case.webp Binary files differnew file mode 100644 index 0000000..5c5ab0f --- /dev/null +++ b/public/images/sanded-pi-case.webp diff --git a/public/images/sass-cancel_rl1fsw_c_scale,w_800.webp b/public/images/sass-cancel_rl1fsw_c_scale,w_800.webp Binary files differnew file mode 100644 index 0000000..1f450ea --- /dev/null +++ b/public/images/sass-cancel_rl1fsw_c_scale,w_800.webp diff --git a/public/images/scrolling-navigation.png b/public/images/scrolling-navigation.png Binary files differnew file mode 100644 index 0000000..abce30f --- /dev/null +++ b/public/images/scrolling-navigation.png diff --git a/public/images/shiny-buttons.png b/public/images/shiny-buttons.png Binary files differnew file mode 100644 index 0000000..2feba16 --- /dev/null +++ b/public/images/shiny-buttons.png diff --git a/public/images/site-color-schemes.gif b/public/images/site-color-schemes.gif Binary files differnew file mode 100644 index 0000000..286247c --- /dev/null +++ b/public/images/site-color-schemes.gif diff --git a/public/images/slabtop-1.jpg b/public/images/slabtop-1.jpg Binary files differnew file mode 100644 index 0000000..30a440f --- /dev/null +++ b/public/images/slabtop-1.jpg diff --git a/public/images/slabtop-1.webp b/public/images/slabtop-1.webp Binary files differnew file mode 100644 index 0000000..5e70ab4 --- /dev/null +++ b/public/images/slabtop-1.webp diff --git a/public/images/slabtop-2.jpg b/public/images/slabtop-2.jpg Binary files differnew file mode 100644 index 0000000..edc9d80 --- /dev/null +++ b/public/images/slabtop-2.jpg diff --git a/public/images/slabtop-2.webp b/public/images/slabtop-2.webp Binary files differnew file mode 100644 index 0000000..690ad4b --- /dev/null +++ b/public/images/slabtop-2.webp diff --git a/public/images/soma-terminal.png b/public/images/soma-terminal.png Binary files differnew file mode 100644 index 0000000..7c3c0b5 --- /dev/null +++ b/public/images/soma-terminal.png diff --git a/public/images/soma-terminal.webp b/public/images/soma-terminal.webp Binary files differnew file mode 100644 index 0000000..d511491 --- /dev/null +++ b/public/images/soma-terminal.webp diff --git a/public/images/sticky-bad-navigation.webp b/public/images/sticky-bad-navigation.webp Binary files differnew file mode 100644 index 0000000..982348b --- /dev/null +++ b/public/images/sticky-bad-navigation.webp diff --git a/public/images/sticky-good-navigation-2.webp b/public/images/sticky-good-navigation-2.webp Binary files differnew file mode 100644 index 0000000..cc4be56 --- /dev/null +++ b/public/images/sticky-good-navigation-2.webp diff --git a/public/images/sticky-good-navigation.webp b/public/images/sticky-good-navigation.webp Binary files differnew file mode 100644 index 0000000..04b972a --- /dev/null +++ b/public/images/sticky-good-navigation.webp diff --git a/public/images/stripe-default-menu.webp b/public/images/stripe-default-menu.webp Binary files differnew file mode 100644 index 0000000..3cecd83 --- /dev/null +++ b/public/images/stripe-default-menu.webp diff --git a/public/images/stripe-recreated.webp b/public/images/stripe-recreated.webp Binary files differnew file mode 100644 index 0000000..1a7a1ac --- /dev/null +++ b/public/images/stripe-recreated.webp diff --git a/public/images/tabbed-content.png b/public/images/tabbed-content.png Binary files differnew file mode 100644 index 0000000..a2fbdfa --- /dev/null +++ b/public/images/tabbed-content.png diff --git a/public/images/text-indent-compatibility.webp b/public/images/text-indent-compatibility.webp Binary files differnew file mode 100644 index 0000000..637344d --- /dev/null +++ b/public/images/text-indent-compatibility.webp diff --git a/public/images/they-wont-wait.webp b/public/images/they-wont-wait.webp Binary files differnew file mode 100644 index 0000000..a82f478 --- /dev/null +++ b/public/images/they-wont-wait.webp diff --git a/public/images/transmit-ftp.webp b/public/images/transmit-ftp.webp Binary files differnew file mode 100644 index 0000000..28dc66f --- /dev/null +++ b/public/images/transmit-ftp.webp diff --git a/public/images/tufte-first-paint.webp b/public/images/tufte-first-paint.webp Binary files differnew file mode 100644 index 0000000..bd174aa --- /dev/null +++ b/public/images/tufte-first-paint.webp diff --git a/public/images/tufte-input-delay.webp b/public/images/tufte-input-delay.webp Binary files differnew file mode 100644 index 0000000..acddf65 --- /dev/null +++ b/public/images/tufte-input-delay.webp diff --git a/public/images/ugly-duck-audit.webp b/public/images/ugly-duck-audit.webp Binary files differnew file mode 100644 index 0000000..192d9d7 --- /dev/null +++ b/public/images/ugly-duck-audit.webp diff --git a/public/images/undo-keyboard.png b/public/images/undo-keyboard.png Binary files differnew file mode 100644 index 0000000..95a9f43 --- /dev/null +++ b/public/images/undo-keyboard.png diff --git a/public/images/unix.gif b/public/images/unix.gif Binary files differnew file mode 100644 index 0000000..b51ca47 --- /dev/null +++ b/public/images/unix.gif diff --git a/public/images/usb-connector.webp b/public/images/usb-connector.webp Binary files differnew file mode 100644 index 0000000..3016405 --- /dev/null +++ b/public/images/usb-connector.webp diff --git a/public/images/utm-1.webp b/public/images/utm-1.webp Binary files differnew file mode 100644 index 0000000..498f602 --- /dev/null +++ b/public/images/utm-1.webp diff --git a/public/images/utm-2.webp b/public/images/utm-2.webp Binary files differnew file mode 100644 index 0000000..e8c6db8 --- /dev/null +++ b/public/images/utm-2.webp diff --git a/public/images/utm-3.webp b/public/images/utm-3.webp Binary files differnew file mode 100644 index 0000000..eef4b08 --- /dev/null +++ b/public/images/utm-3.webp diff --git a/public/images/webpagetest-article-original.webp b/public/images/webpagetest-article-original.webp Binary files differnew file mode 100644 index 0000000..d633fff --- /dev/null +++ b/public/images/webpagetest-article-original.webp diff --git a/public/images/webpagetest-article-updated.webp b/public/images/webpagetest-article-updated.webp Binary files differnew file mode 100644 index 0000000..6b70333 --- /dev/null +++ b/public/images/webpagetest-article-updated.webp diff --git a/public/images/webpagetest-homepage-original.webp b/public/images/webpagetest-homepage-original.webp Binary files differnew file mode 100644 index 0000000..8d8c6c1 --- /dev/null +++ b/public/images/webpagetest-homepage-original.webp diff --git a/public/images/webpagetest-homepage-updated.webp b/public/images/webpagetest-homepage-updated.webp Binary files differnew file mode 100644 index 0000000..a7b78f9 --- /dev/null +++ b/public/images/webpagetest-homepage-updated.webp diff --git a/public/images/wireless-keyboard.webp b/public/images/wireless-keyboard.webp Binary files differnew file mode 100644 index 0000000..950bf46 --- /dev/null +++ b/public/images/wireless-keyboard.webp diff --git a/public/images/workstation.png b/public/images/workstation.png Binary files differnew file mode 100644 index 0000000..0cc4b9c --- /dev/null +++ b/public/images/workstation.png diff --git a/public/images/workstation.webp b/public/images/workstation.webp Binary files differnew file mode 100644 index 0000000..932445e --- /dev/null +++ b/public/images/workstation.webp diff --git a/public/images/x201-1.png b/public/images/x201-1.png Binary files differnew file mode 100644 index 0000000..7b0d4df --- /dev/null +++ b/public/images/x201-1.png diff --git a/public/images/x201-2.png b/public/images/x201-2.png Binary files differnew file mode 100644 index 0000000..ffc7a01 --- /dev/null +++ b/public/images/x201-2.png diff --git a/public/images/x201-3.png b/public/images/x201-3.png Binary files differnew file mode 100644 index 0000000..ec40a39 --- /dev/null +++ b/public/images/x201-3.png diff --git a/public/images/x201-4.png b/public/images/x201-4.png Binary files differnew file mode 100644 index 0000000..819b8d4 --- /dev/null +++ b/public/images/x201-4.png diff --git a/public/images/x201-5.png b/public/images/x201-5.png Binary files differnew file mode 100644 index 0000000..3905049 --- /dev/null +++ b/public/images/x201-5.png diff --git a/public/images/x201-tape.jpg b/public/images/x201-tape.jpg Binary files differnew file mode 100644 index 0000000..e5cee20 --- /dev/null +++ b/public/images/x201-tape.jpg diff --git a/public/images/x220-pieces.jpeg b/public/images/x220-pieces.jpeg Binary files differnew file mode 100644 index 0000000..5038948 --- /dev/null +++ b/public/images/x220-pieces.jpeg diff --git a/style.css b/style.css new file mode 100644 index 0000000..b3102fa --- /dev/null +++ b/style.css @@ -0,0 +1,99 @@ +* { + box-sizing: border-box; +} +body { + background-color: #fffaf7; + font-family: system-ui, "Helvetica Neue", "Lucida Grande", sans-serif; + line-height: 1.55; + margin: 1rem auto; + max-width: 60ch; + padding: 10px; +} +h1,h2,h3,h4,h5,h6 { + line-height: 1.2; +} +h2,h3,h4,h5,h6 { + border-bottom: 1px solid; + margin: 3rem 0 0; + padding-bottom: 0.5rem; +} +a,a:visited { + color: darkred; +} +a:hover,a:focus { + background: yellow; + color: black; +} +figcaption { + font-size: 12px; +} +hr { + background: grey; + border: 0; + height: 1px; + margin: 2rem 0; +} +img { + height: auto; + max-width: 100%; + width: auto; +} +code { + background-color: white; + border: 1px solid; + font-size: 90%; + padding: 0.1rem 0.3rem; + tab-size: 4; +} +pre { + background-color: white; + border: 1px solid; +} +pre code { + border: 0; + display: block; + overflow-x: auto; + padding: 0.3rem 0.6rem; +} +table { + border-collapse: collapse; + margin: 2rem 0; + display: block; + overflow-x: auto; + white-space: nowrap; + text-align: left; + width: 100%; +} +tbody { + display: table; + min-width: 500px; + width: 100%; +} +tr { + border-bottom: 1px solid lightgrey; +} +td:last-of-type,th:last-of-type { + text-align: right; +} +.post-list { + list-style: none; + margin: 1rem 0 0; + padding: 0; +} +.post-list li { + align-items: center; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + margin: 0 0 10px; +} +.post-list li small { font-variant-numeric: tabular-nums; } + +@media(max-width:650px) { + .post-list li { + align-items: flex-start; + flex-direction: column; + justify-content: baseline; + margin: 0 0 15px; + } +} |
