From 6b742c459266b18e2b375b35205ce8a6c02f0452 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Thu, 6 Jun 2024 08:05:12 -0400 Subject: Initial commit --- posts/$10.md | 61 ++++ posts/1kb.md | 57 ++++ posts/adguard.md | 72 ++++ posts/af.md | 31 ++ posts/alpine.md | 157 +++++++++ posts/animated-card-tiles.md | 323 ++++++++++++++++++ posts/animated-toggle-tabs.md | 107 ++++++ posts/audio-hotkeys-on-linux-mint.md | 20 ++ posts/aui.md | 100 ++++++ posts/avoid.md | 47 +++ posts/base64-all-the-things.md | 63 ++++ posts/basic-gulp-build-for-sass.md | 123 +++++++ posts/batch-webp-conversion.md | 80 +++++ posts/battery.md | 36 ++ posts/being-efficient.md | 62 ++++ posts/berg.md | 70 ++++ posts/better-box-shadows.md | 166 +++++++++ posts/bidirectional-scrolling.md | 37 ++ posts/browser-history-sucks.md | 70 ++++ posts/character-unit.md | 43 +++ posts/chasing-performance.md | 247 ++++++++++++++ posts/cheap-portable-pi.md | 169 ++++++++++ posts/chromebook-web-dev.md | 49 +++ posts/css-js-mistake.md | 49 +++ posts/css-slope-graphs.md | 229 +++++++++++++ posts/css-variables.md | 45 +++ posts/css-video-backgrounds.md | 30 ++ posts/current-color.md | 38 +++ posts/cut-your-forms-in-half.md | 41 +++ posts/death-of-personality.md | 86 +++++ posts/default-brower-forms.md | 116 +++++++ posts/default-html-style-updates.md | 93 +++++ posts/design-review-dropbox.md | 127 +++++++ posts/disabling-comments-in-wordpress.md | 19 ++ posts/dts.md | 24 ++ posts/duckduckno.md | 45 +++ posts/dump.md | 110 ++++++ posts/dv.md | 49 +++ posts/dwm-gnome.md | 35 ++ posts/dynamic-checkboxes.md | 411 +++++++++++++++++++++++ posts/easy-custom-radio-inputs.md | 224 ++++++++++++ posts/easy-toggle-switches.md | 234 +++++++++++++ posts/eero.md | 138 ++++++++ posts/empty-table-cells.md | 52 +++ posts/et-jekyll-theme.md | 11 + posts/fake-3d-elements-with-css.md | 87 +++++ posts/fathom-analytics-netlify.md | 64 ++++ posts/february-updates.md | 13 + posts/first-letter.md | 33 ++ posts/flexbox-bar-graphs.md | 304 +++++++++++++++++ posts/flexbox-grid.md | 9 + posts/form-ui-improvements.md | 50 +++ posts/future-os-google.md | 90 +++++ posts/gallery.md | 84 +++++ posts/git-patches.md | 27 ++ posts/goodbye-css-preprocessors.md | 76 +++++ posts/hamburger-menu-alternative.md | 119 +++++++ posts/hamburgers.md | 37 ++ posts/heif.md | 43 +++ posts/hello-jekyll.md | 29 ++ posts/html-dark-mode.md | 30 ++ posts/html-like-1999.md | 64 ++++ posts/html5-validator-badge.md | 43 +++ posts/improving-githubs-new-design.md | 83 +++++ posts/improving-receipt-ux.md | 40 +++ posts/improving-tufte-jekyll.md | 89 +++++ posts/introducing-notez.md | 27 ++ posts/introducing-pageroast.md | 24 ++ posts/jekyll-sourcehut.md | 96 ++++++ posts/jekyll.md | 96 ++++++ posts/jelly.md | 50 +++ posts/jsincss-parent-selector.md | 77 +++++ posts/keynote-slides-css.md | 97 ++++++ posts/launching-thriftyname.md | 21 ++ posts/lazy-dev-dark-mode.md | 40 +++ posts/learning-to-floss.md | 40 +++ posts/lf.md | 37 ++ posts/linux-love.md | 55 +++ posts/linux-mint-macbook-air.md | 83 +++++ posts/load-image-on-click.md | 58 ++++ posts/localwp-fedora.md | 17 + posts/loop.md | 61 ++++ posts/luba.md | 83 +++++ posts/macos-convert-to-html.md | 113 +++++++ posts/macos-icon-css.md | 270 +++++++++++++++ posts/mail.md | 42 +++ posts/mango.md | 85 +++++ posts/menu-toggle-css.md | 96 ++++++ posts/mini-interactive-keyboard-with-pure-css.md | 148 ++++++++ posts/minimal-css-menu.md | 55 +++ posts/minor-website-changes.md | 57 ++++ posts/mongodb-arch.md | 44 +++ posts/monitor.md | 59 ++++ posts/multiple-css-background-images.md | 15 + posts/my-pi-desktop.md | 124 +++++++ posts/my-static-blog-publishing-setup.md | 82 +++++ posts/ndenting-text-with-css.md | 44 +++ posts/netlify-urls.md | 34 ++ posts/news-websites-are-dumpster-fires.md | 34 ++ posts/notice.md | 89 +++++ posts/obvious-js-injection-fallback.md | 48 +++ posts/one-css-property.md | 35 ++ posts/one-thing.md | 46 +++ posts/open-source-typeface-pairings.md | 52 +++ posts/openring.md | 132 ++++++++ posts/over-engineering-an-oil-tank.md | 41 +++ posts/over-nesting.md | 56 +++ posts/paid-mac-apps.md | 53 +++ posts/pblog.md | 48 +++ posts/performance-focused-wordpress-theme.md | 79 +++++ posts/personal-website-opinions.md | 23 ++ posts/phpetite.md | 70 ++++ posts/pi-400-internal-ssd.md | 87 +++++ posts/pihole-cloudflare.md | 42 +++ posts/plain-text-emails.md | 71 ++++ posts/poor-mans-full-bleed.md | 114 +++++++ posts/poormans-comment-system.md | 63 ++++ posts/proper-ui-hierarchy.md | 199 +++++++++++ posts/ps4-download-ui.md | 144 ++++++++ posts/publish-with-jekyll.md | 118 +++++++ posts/pure-css-simple-dropdown-plugin.md | 11 + posts/quick-dirty-theme-switcher.md | 130 +++++++ posts/rss-click.md | 45 +++ posts/rss-hacks.md | 66 ++++ posts/rvm.md | 40 +++ posts/safari-default-dark-mode.md | 63 ++++ posts/safari-extensions-catalina-patcher.md | 38 +++ posts/schools.md | 76 +++++ posts/self-hosted-blogs.md | 31 ++ posts/self-hosting-fathom.md | 104 ++++++ posts/setting-up-free-ssl.md | 19 ++ posts/seven-years.md | 41 +++ posts/sharing-the-things-we-use.md | 11 + posts/shinobi-website.md | 70 ++++ posts/shiny-css-buttons.md | 96 ++++++ posts/simple-accessibility.md | 23 ++ posts/simple-does-not-mean-ugly.md | 72 ++++ posts/simple-jekyll-navigation.md | 55 +++ posts/skip-to-content.md | 69 ++++ posts/slabtop.md | 43 +++ posts/slow.md | 63 ++++ posts/soma-terminal-css.md | 211 ++++++++++++ posts/spec.md | 31 ++ posts/srht2.md | 51 +++ posts/stay-hungry.md | 27 ++ posts/sticky-elements.md | 65 ++++ posts/still-using-jquery.md | 30 ++ posts/stripe-menu-css.md | 35 ++ posts/sublime.md | 55 +++ posts/suckless.md | 71 ++++ posts/super-mario-blocks-css.md | 222 ++++++++++++ posts/tabbed-content.md | 249 ++++++++++++++ posts/tables.md | 125 +++++++ posts/te.md | 19 ++ posts/text-align-justify.md | 28 ++ posts/they-wont-wait.md | 68 ++++ posts/use-text-not-icons.md | 55 +++ posts/user-select.md | 48 +++ posts/vscode.md | 33 ++ posts/webfonts.md | 35 ++ posts/width-vs-flex-basis.md | 62 ++++ posts/windows.md | 52 +++ posts/wp-enqueue-for-beginners.md | 95 ++++++ posts/x201.md | 54 +++ posts/x220.md | 90 +++++ 165 files changed, 12661 insertions(+) create mode 100644 posts/$10.md create mode 100644 posts/1kb.md create mode 100644 posts/adguard.md create mode 100644 posts/af.md create mode 100644 posts/alpine.md create mode 100644 posts/animated-card-tiles.md create mode 100644 posts/animated-toggle-tabs.md create mode 100644 posts/audio-hotkeys-on-linux-mint.md create mode 100644 posts/aui.md create mode 100644 posts/avoid.md create mode 100644 posts/base64-all-the-things.md create mode 100644 posts/basic-gulp-build-for-sass.md create mode 100644 posts/batch-webp-conversion.md create mode 100644 posts/battery.md create mode 100644 posts/being-efficient.md create mode 100644 posts/berg.md create mode 100644 posts/better-box-shadows.md create mode 100644 posts/bidirectional-scrolling.md create mode 100644 posts/browser-history-sucks.md create mode 100644 posts/character-unit.md create mode 100644 posts/chasing-performance.md create mode 100644 posts/cheap-portable-pi.md create mode 100644 posts/chromebook-web-dev.md create mode 100644 posts/css-js-mistake.md create mode 100644 posts/css-slope-graphs.md create mode 100644 posts/css-variables.md create mode 100644 posts/css-video-backgrounds.md create mode 100644 posts/current-color.md create mode 100644 posts/cut-your-forms-in-half.md create mode 100644 posts/death-of-personality.md create mode 100644 posts/default-brower-forms.md create mode 100644 posts/default-html-style-updates.md create mode 100644 posts/design-review-dropbox.md create mode 100644 posts/disabling-comments-in-wordpress.md create mode 100644 posts/dts.md create mode 100644 posts/duckduckno.md create mode 100644 posts/dump.md create mode 100644 posts/dv.md create mode 100644 posts/dwm-gnome.md create mode 100644 posts/dynamic-checkboxes.md create mode 100644 posts/easy-custom-radio-inputs.md create mode 100644 posts/easy-toggle-switches.md create mode 100644 posts/eero.md create mode 100644 posts/empty-table-cells.md create mode 100644 posts/et-jekyll-theme.md create mode 100644 posts/fake-3d-elements-with-css.md create mode 100644 posts/fathom-analytics-netlify.md create mode 100644 posts/february-updates.md create mode 100644 posts/first-letter.md create mode 100644 posts/flexbox-bar-graphs.md create mode 100644 posts/flexbox-grid.md create mode 100644 posts/form-ui-improvements.md create mode 100644 posts/future-os-google.md create mode 100644 posts/gallery.md create mode 100644 posts/git-patches.md create mode 100644 posts/goodbye-css-preprocessors.md create mode 100644 posts/hamburger-menu-alternative.md create mode 100644 posts/hamburgers.md create mode 100644 posts/heif.md create mode 100644 posts/hello-jekyll.md create mode 100644 posts/html-dark-mode.md create mode 100644 posts/html-like-1999.md create mode 100644 posts/html5-validator-badge.md create mode 100644 posts/improving-githubs-new-design.md create mode 100644 posts/improving-receipt-ux.md create mode 100644 posts/improving-tufte-jekyll.md create mode 100644 posts/introducing-notez.md create mode 100644 posts/introducing-pageroast.md create mode 100644 posts/jekyll-sourcehut.md create mode 100644 posts/jekyll.md create mode 100644 posts/jelly.md create mode 100644 posts/jsincss-parent-selector.md create mode 100644 posts/keynote-slides-css.md create mode 100644 posts/launching-thriftyname.md create mode 100644 posts/lazy-dev-dark-mode.md create mode 100644 posts/learning-to-floss.md create mode 100644 posts/lf.md create mode 100644 posts/linux-love.md create mode 100644 posts/linux-mint-macbook-air.md create mode 100644 posts/load-image-on-click.md create mode 100644 posts/localwp-fedora.md create mode 100644 posts/loop.md create mode 100644 posts/luba.md create mode 100644 posts/macos-convert-to-html.md create mode 100644 posts/macos-icon-css.md create mode 100644 posts/mail.md create mode 100644 posts/mango.md create mode 100644 posts/menu-toggle-css.md create mode 100644 posts/mini-interactive-keyboard-with-pure-css.md create mode 100644 posts/minimal-css-menu.md create mode 100644 posts/minor-website-changes.md create mode 100644 posts/mongodb-arch.md create mode 100644 posts/monitor.md create mode 100644 posts/multiple-css-background-images.md create mode 100644 posts/my-pi-desktop.md create mode 100644 posts/my-static-blog-publishing-setup.md create mode 100644 posts/ndenting-text-with-css.md create mode 100644 posts/netlify-urls.md create mode 100644 posts/news-websites-are-dumpster-fires.md create mode 100644 posts/notice.md create mode 100644 posts/obvious-js-injection-fallback.md create mode 100644 posts/one-css-property.md create mode 100644 posts/one-thing.md create mode 100644 posts/open-source-typeface-pairings.md create mode 100644 posts/openring.md create mode 100644 posts/over-engineering-an-oil-tank.md create mode 100644 posts/over-nesting.md create mode 100644 posts/paid-mac-apps.md create mode 100644 posts/pblog.md create mode 100644 posts/performance-focused-wordpress-theme.md create mode 100644 posts/personal-website-opinions.md create mode 100644 posts/phpetite.md create mode 100644 posts/pi-400-internal-ssd.md create mode 100644 posts/pihole-cloudflare.md create mode 100644 posts/plain-text-emails.md create mode 100644 posts/poor-mans-full-bleed.md create mode 100644 posts/poormans-comment-system.md create mode 100644 posts/proper-ui-hierarchy.md create mode 100644 posts/ps4-download-ui.md create mode 100644 posts/publish-with-jekyll.md create mode 100644 posts/pure-css-simple-dropdown-plugin.md create mode 100644 posts/quick-dirty-theme-switcher.md create mode 100644 posts/rss-click.md create mode 100644 posts/rss-hacks.md create mode 100644 posts/rvm.md create mode 100644 posts/safari-default-dark-mode.md create mode 100644 posts/safari-extensions-catalina-patcher.md create mode 100644 posts/schools.md create mode 100644 posts/self-hosted-blogs.md create mode 100644 posts/self-hosting-fathom.md create mode 100644 posts/setting-up-free-ssl.md create mode 100644 posts/seven-years.md create mode 100644 posts/sharing-the-things-we-use.md create mode 100644 posts/shinobi-website.md create mode 100644 posts/shiny-css-buttons.md create mode 100644 posts/simple-accessibility.md create mode 100644 posts/simple-does-not-mean-ugly.md create mode 100644 posts/simple-jekyll-navigation.md create mode 100644 posts/skip-to-content.md create mode 100644 posts/slabtop.md create mode 100644 posts/slow.md create mode 100644 posts/soma-terminal-css.md create mode 100644 posts/spec.md create mode 100644 posts/srht2.md create mode 100644 posts/stay-hungry.md create mode 100644 posts/sticky-elements.md create mode 100644 posts/still-using-jquery.md create mode 100644 posts/stripe-menu-css.md create mode 100644 posts/sublime.md create mode 100644 posts/suckless.md create mode 100644 posts/super-mario-blocks-css.md create mode 100644 posts/tabbed-content.md create mode 100644 posts/tables.md create mode 100644 posts/te.md create mode 100644 posts/text-align-justify.md create mode 100644 posts/they-wont-wait.md create mode 100644 posts/use-text-not-icons.md create mode 100644 posts/user-select.md create mode 100644 posts/vscode.md create mode 100644 posts/webfonts.md create mode 100644 posts/width-vs-flex-basis.md create mode 100644 posts/windows.md create mode 100644 posts/wp-enqueue-for-beginners.md create mode 100644 posts/x201.md create mode 100755 posts/x220.md (limited to 'posts') 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: + + + CV

Hi, I'm Brad Taunt! I'm a UX designer.

Email: hello@tdarb.org

Resume

Senior Product Designer @ Donorbox, 2021-
Web Designer @ Purism, 2019-2021
Product Designer @ Benbria, 2013-2019
Web Designer @ Netvatise, 2009-2013

Projects

1MB Club
1kB Club
pblog
shinobi
PHPetite
Vanilla CSS

Writing

The Death of Personality
Simple Does Not Mean Ugly
Plain Text Emails, Please
[more] + + +## 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: + + + + + +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): + +![Raspberry Pi Lite](/public/images/rpi-lite-os.webp) + +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: + +![Imager settings](/public/images/rpi-adguard-1.webp) + +## 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: + +![](/public/images/alpine-1.jpg) + +(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 + + +

+
+
+

Card Title

+

Inner card content text

+
+
+
+ + +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: + +
+ +
+
+

Card Title

+

Inner card content text

+
+
+ +
+
+

Card Title

+

Inner card content text

+
+
+ +
+
+

Card Title

+

Inner card content text

+
+
+
+ +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 + +
+
+
+

Card Title

+

Inner card content text

+
+
+
+
+

Card Title

+

Inner card content text

+
+
+
+
+

Card Title

+

Inner card content text

+
+
+
+ +### 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 + +

There isn't anything special happening here. We just contain all our labels and inputs into a .radio-toggles wrapper, make sure those labels are each properly connected to their corresponding inputs, and then add an empty .slide-item element (more on that later).

+ + +
+ + + + + + +
+
+ + +## 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. + +
+Old macOS Buttons +
My initial Dribbble shot, which can be found here.
+
+ +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 skeleton of this project is very straightforward: + + + + +### 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 here. + +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. + +

What is base64 encoding?

+

It might be common knowledge, but I think breaking down exactly what base64 encoding is could be very helpful to beginner web developers:

+
+

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.

+ - Wikipedia +
+

In simpler terms: it is a encoded format that can change an element like this:

+ + + Cool image + + +Into this: + + + Cool image + + +

See it in action

+ +
+Just an image +
This image is pulled in with an HTTP request (direct link to image)
+
+ +
+Image rendered in base64 +
This image is an inline base64 encoding
+
+ + +

Should I use base64?

+ +

That completely depends on the situation. For most regular day-to-day web development - probably not. 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).

+

But that doesn't mean there aren't a few edge cases.

+ + + +

How do I encode my files?

+ +

There are a ton of freely available encoders out in the wild web, but my personal go-to is base64converter.com. Simply upload your file and convert.

+ +

Limitations

+ + + +

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.

+ + 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 + +

You can also toss in gulp-minify 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.

+ +

Maybe I'll write about my js build workflow in a future article.

+ +## 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: + +
+macOS Automator +
(link to hi-res image)
+
+ +And when right-clicking an image file in the Finder window, it should now give you the option to convert: + +
+Right click to convert +
(link to hi-res image)
+
+ +## 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 + + + +Box shadow on HTML elements has been widely supported across most browsers for a while now, but I find the default options don't allow for much visual manipulation of the shadows in general. + +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: + + +
+ + + .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: + + +
+ + +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: + + +
+
+
+ + +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: + + +
+ + + +## 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: + + +
+ +
+ + 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: + +![Default Chrome History](/public/images/browser-history-01.webp) + +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 a date picker. Users open the new calendar icon to filter by days, months or years before searching. Seems trivial, but this saves the headache of filtering through all saved history. + +![Chrome History with date picker](/public/images/browser-history-02.webp) + +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 + +![Chrome History by session length](/public/images/browser-history-03.webp) + +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 + +![Chrome History by return visits](/public/images/browser-history-04.webp) + +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 + +![Chrome History by restored tabs](/public/images/browser-history-05.webp) + +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: + + +
+

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.

+

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.

+
+ + +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 Front End Performance Challenge, not only for the potential of winning the prize but to further experiment with optimizing my site. (Web performance is a passion of mine) + +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, The Death of Personality, as the basis for my tests. + +### Lighthouse Score - Homepage + +Full source original stats // Full source updated stats + + + + + + + + + + + + + + + + + + + + + + + + + + +
StatsBeforeAfter
Performance8298
Accessibility100100
Best Practices7594
+ +### Lighthouse Score - Article Page + +Full source original stats // Full source updated stats + + + + + + + + + + + + + + + + + + + + + + + + + + +
StatsBeforeAfter
Performance3996
Accessibility97100
Best Practices6994
+ +### Web Page Test - Homepage + +Full source original stats // Full source updated stats + + + + + + + + + + + + + + + + + + + + + + + + + + +
StatsBeforeAfter
Initial Load Time0.91s0.41s
Visually Complete0.9s0.7s
Fully Loaded0.94s0.65s
+ +### Web Page Test - Article Page + +Full source original stats // Full source updated stats + + + + + + + + + + + + + + + + + + + + + + + + + + +
StatsBeforeAfter
Initial Load Time4.7s0.5s
Visually Complete3.1s0.8s
Fully Loaded4.8s0.67s
+ +### 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 FOUT, FOIT, FOFT +- 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 loadCSS function to load my CSS asynchronously. If you are not currently using this in any of your projects; stop reading this and go do it! It's a game changer. + +### Critical JavaScript + +My personal site only uses a small amount of JavaScript on the article post Jekyll template pages. By using the defer property I can be sure to load the IntersectionObserver API polyfill after the rest of the DOM as finished loading. + + + + + + +### 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 video covering this topic 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 + + +
+ + + + + + +
+

Slide 1

+
+
+

Slide 2

+
+
+

Slide 3

+
+
+

Slide 4

+
+
+

Slide 5

+
+
+ + +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 FLOSS? + +Below you will find my own personal list of FLOSS applications I use across design, development and simple document management: + +

FLOSS Application Breakdown

+ +### 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: + +
+
+ Aqua UI buttons +
+
Click the placeholder to load in the real image
Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. View full size image.
+
+ +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. + + +
+ Aqua UI buttons +
Click the placeholder to load in the real image
+ Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. + View full size image. +
+
+ + +### 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 %} + + {% 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' %} +

{{ collection.label }}

+ +
+ {% 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. + +
+ The Husqvarna 450X +
The Husqvarna 450X (not mine but same model)
+
+ +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. + +
+ The Luba Series 5000 +
The Luba Series 5000 AWD (not mine but same model)
+
+ +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. + +
+ Toggle prompt for new automation in macOS Automator +
After opening Automator, select "Quick Action" from the menu (link to hi-res image)
+
+ +Now do the following (reference the image further below to make sure your parameters match): + +1. Set "Workflow receives current" to documents in any application +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 /bin/bash +5. Set "Pass input" as as arguments + +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: + +
+ Automator quick action details for converting to HTML +
This is what your finished Automator quick action should look like (link to hi-res image)
+
+ +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)) + +
+ A markdown file in macOS Finder +
Figure 1: Finding and right-clicking on your desired file (link to hi-res image)
+
+ +
+ Convert to HTML action selection +
Figure 2: From the "Quick Actions" menu, select "Convert to HTML" (link to hi-res image)
+
+ +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! + +
+ Finder window showing a Markdown file and an HTML file +
Our converted document is now available in HTML. Absolutely glorious. (link to hi-res image)
+
+ +## 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: + +
+ Big Sur Icon +
The original Dribbble shot (direct link to image)
+
+ +And now let's see what we will be creating with only HTML & CSS: + +
+ Big Sur Icon +
What we are going to create with pure HTML & CSS (direct link to image)
+
+ +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: + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + - 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) + +--- + +

Live Demo (CodePen)

+ +[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: + +
+ The Apple Mail sidebar with the Patches folder present +
The Apple Mail sidebar with the "Patches" folder present
+
+ +## 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: + +
+ The contents of the saved Patches mailbox folder +
The contents of the saved Patches mailbox folder
+
+ +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//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 + +
+The Mango router from the left side +
The little yellow mango in all its glory...
+
+ +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 + +![Menu toggle made from pure CSS](/public/images/menu-toggle-css.png) + +[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 + + + + + + + + + + +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). + +![Undo keyboard with two buttons to click](/public/images/undo-keyboard.png) + +[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 + + + +
+ + + + + + + +
+ + +## 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 + + + + + +### 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) + +
+ My current desktop setup with the X260 ThinkPad +
My ThinkPad X260, along with my MageGee wired mechanical keyboard and Logitech Pebble mouse. Small notebook and pen for note-taking.
+
+ +## 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: + +
+ Raspberry Pi 4 desktop +
The final Raspberry Pi desktop in all it's glory. (direct link to image)
+
+ +## Table of Contents + +1. [My Use Case](#use-case) +2. [The Hardware](#hardware) +3. [The Software](#software) +4. [Performance & Stats](#stats) + +

My Use Case

+ +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. + +

The Hardware

+ +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 + +- Raspberry Pi 4 +- X857 V1.0 mSATA SSD Shield Expansion Board (I'm using the X856) +- 128GB mSATA SSD +- Acrylic Case with Heatsinks & Fan +- Raspberry Pi Keyboard & Mouse +- 21.5" Acer Monitor + +

The Software

+ +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: + +
+ Raspberry Pi 4 desktop and wallpaper +
My very basic Raspberry Pi desktop/wallpaper view. (direct link to image)
+
+ +

Performance & Stats

+ +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: + +
+ Text indent browser compatibility +
Full support across all browsers.
+
+ +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:
`olddomain.com/random-post` +- You want that link to forward using the same permalink structure:
`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: + + +
+ Notice +

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.

+
+ + +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: + + +
+ Notice +

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?

+
+ + +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: + + +
+

+
+ + +### 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) + + +
+

200,000+

+
+ + +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 + +![Couple drinking cups of coffee](/public/images/coffee-couple.svg) + +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 nothing. Open source FTW. + +## ET-Book & Gill Sans + +Download: ET Book, Gill Sans + +
+ ET Book Gill Sans +
ET-Book & Gill Sans are based off the font pairings of my personal Jekyll theme: ET-Jekyll Theme.
+
+ +## Playfair Display & Roboto + +Download: Playfair Display, Roboto + +
+ Playfair Display Roboto +
Playfair Display & Roboto I find work really well for microblogs or short essay format posts.
+
+ +## Karma & Open Sans + +Download: Karma, Open Sans + +
+ Karma Open Sans +
Karma & Open Sans give readers a little more breathing room between characters. Good choice if trying to keep accessibility in mind.
+
+ +## Libre Baskerville & Oswald + +Download: Libre Baskerville, Oswald + +
+ Libre Baskerville Oswald +
Libre Baskerville & Oswald oozes character and takes inspiration from a more print-based medium.
+
+ +## Fanwood & League Spartan + +Download: Fanwood, League Spartan + +
+ Fanwood League Spartan +
Fanwood & League Spartan paired together allow the main content to be easily readable, while the headers instantly grab the user's attention.
+
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 + +``` + +
+

Articles from blogs I follow around the world wide web

+
+ {{range .Articles}} +
+

+ {{.Title}} +

+

{{.Summary}}

+ + via {{.SourceTitle}} + + {{.Date | datef "January 2, 2006"}} +
+ {{end}} +
+

+ Generated by + openring +

+
+ +``` + +> 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 + +![The Transmit UI in all of its wonderful glory (before I updated)](/public/images/transmit-ftp.webp) + +### 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 latest post about Core Web Vitals, I wanted to make sure my blog still prioritized speed and performance above all else. I’m happy to say that I have closely replicated the same speed of my original *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: + +
+ Jetpack boost numbers +
The Jetpack Boost metrics for this website (and yes, that 99 score for mobile kills me)
+
+ +## 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: + +
+ Lighthouse audit +
It might not be perfect, but it’s pretty damn close!
+
+ +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? +> +> -- Some of you + +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: + +
+
+Aqua UI buttons +
+
Click the placeholder to load in the real image
Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. View full size image.
+
+ +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. + +
+
+ Aqua UI buttons +
+
Click the placeholder to load in the real image
Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. View full size image.
+
+ +## 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**: + +
+ Pi 400 with internal SSD +
The finished Raspberry Pi 400X (link to hi-res image)
+
+ +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: + +
+ The cutout heatsink +
I drew the outline of the enclosure on the metal first before cutting. (direct link to image)
+
+ +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... + + + +
+ Plastic dremled back +
Here you can see my terrible sanding job on the far left plastic snap-lock (direct link to image)
+
+ +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?) + +
+ Back of the Pi opening +
Don't judge...I'm sure most people could do a cleaner job! (direct link to image)
+
+ +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! + +
+ The internal SSD +
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! (link to hi-res image)
+
+ +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 + + +
+ PiHole setup admin dashboard +
PiHole DNS settings (link to hi-res image)
+
+ +## 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. + +
+ First computers to send and receive email +
The first computers to send and receive email. Source: Wikipedia
+
+ +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:**
+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[1], [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. +> +> - Confucius + +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 Heading

+

Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.

+

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!

+ Some Image +

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.

+

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?

+

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.

+
+

To be, or not to be, that is the question:
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take Arms against a Sea of troubles,
And by opposing end them: to die, to sleep;

+ - Some guy +
+

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?

+

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.

+
+
+ + +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 Heading

+

Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.

+

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!

+
+
+ Some Image +
+
+

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.

+

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?

+

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.

+
+
+
+

To be, or not to be, that is the question:
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take Arms against a Sea of troubles,
And by opposing end them: to die, to sleep;

+ - Some guy +
+
+
+

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?

+

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.

+
+
+
+ + +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. + +

Live Demo

+ +[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]: + + + + + + + +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 modern interface. + +I'm unable to pinpoint the exact reason why designers swapped out depth, hierarchical layouts and accessibility for muted colors, abstract imagery, illegible typography, and unimaginative flat designs. + +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: + +![Proper UI buttons, blue and green](/public/images/proper-ui.png) + +[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 + + +
+ + +
+ + +### 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: + +![PS4 loading screen bar](/public/images/ps4-loading.png) + +[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. + + +
+ +

Detroit: Become Human

+
+

Update File

+

13.45/17.50 GB (21 Minutes Left)

+
+
+
+
+
+ + +## 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) + +

1. Setup Jekyll

+ +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) + +

2. Using the "Book" template

+ +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. + +

3. Working with chapter collections

+ +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`. + +

4. HTML to PDF

+ +![Publishing with Jekyll](/public/images/publishing-with-jekyll.webp) + +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! + +

5. Closing Thoughts

+ +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! + +![Three dropdown elements styled differently](/public/images/plug-play.png) + +[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. + +
+ Theme color scheme switcher +
My website color scheme switcher in action (direct link to image)
+
+ +## 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) + + +
+ + + +
+ + +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: + + + + + +## 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 + + + + + + +
+ + + +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: + + + + + + +
+ + + +## 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: + + + + + + +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: + + + + + +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: + + + + + +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: + +
+Firefox dark mode example +
Firefox's default dark mode link color
+
+ +
+Safari dark mode example +
Safari's default dark mode link color - yuck!
+
+ +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 `` tag, add the following: `Enabled` +- Save the file and relaunch Safari + +Reference of what it should look like (AdBlock for this example): + + + org.adblockplus... + + AddedDate + 2021-09-23T14:00:47Z + Enabled + + WebsiteAccess + + Allowed Domains + + Has Injected Content + + Level + All + + + + +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 internet1 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. + +**All2 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 + +1 the design world of the internet
 +2 by "All" I mean the majority 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 Fathom PRO on Netlify, 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 Fathom Analytics is truly great, for my small, niche blog it seemed overkill compared to self-hosting. Switching over from $14/mo to $5/mo while retaining most of the same functionality was a no-brainer. Choose the option that best suits your needs (or in the case - budget & bandwidth). + +With that cleared up - let's get into it! + +## Prerequisites + +1. One or more website(s) where you would like to include analytics +2. DigitalOcean account (**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 Marketplace 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. + +
+ Fathom Droplet Details +
Creating the new droplet (direct link to image)
+
+ +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: + + + + + + + + + + + + + + + + + + + + + +
TypeHostnameValue
A@YOUR_DROPLET_IP
AwwwYOUR_DROPLET_IP
+ +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 - you can setup one here. 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 + +![Four buttons that shine when hovered](/public/images/shiny-buttons.png) + +[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: + + + Green Button + Blue Button + Orange Button + Purple Button + + +## 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**. + +![Desktop Navigation](/public/images/navigation.webp) + +### 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: + +![Button Comparsion](/public/images/buttons.webp) + +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: + + + + + +Instead of doing something like this: + + + +
+ Option +
+ + +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 %} +
  • + {{ item.title }} +
    • + {% 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 %} +
  • + {% if item.url == page.url %} + {{ item.title }} + {% else %} + {{ item.title }} + {% endif %} +
    • + {% 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: + + + + + +Now for the easy part - adding our simple content skip link with it's own custom `skip-content` class: + + + + + +
    + Sidenote: in this demo we are making the assumption that the main content block has an id of "main" associated with it. Hence the skip content button linking to #main. +
    + +## 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. + +
    + The main X201 display and lid disconnected +
    The X201 display (still inside the top lid) disconnected from the body of the laptop.
    +
    + +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*. + +
    + The X201 slabtop connected to my 4K monitor +
    The X201 "slabtop" connected to my 27" 4K monitor via the ThinkPad UltraDock.
    +
    + +## 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 + +![Terminal based off the SOMA computers](/public/images/soma-terminal.png) + +[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: + + +
    +
    +
    +

    Key Control

    +

    Panel Chip (Connector)

    +

    + Security Keys: 023-027
    C819738-23 +
    + Error: Key Expired +
    + Please update... +

    +

    + Permission +
    + Standard ThetaCipher +
    + Secop-Jstrohweier +

    + +
    +
    + +
    +
    +
    + + +## 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?* The list of possible *new* things you could be learning continues to grow. +This is sarcasm. Please don't take this seriously... + +## 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: + +
    + Bad navigation +
    Fixed navigation: you lose valuable space for an element that might only be used once per visit (direct link to image)
    +
    + +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: + +
    + Good navigation +
    Static navigation: users can focus on what is important - the content (direct link to image)
    +
    + +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) + +
    + Good navigation displaying top navigation +
    Dynamic navigation: show the user the top navigation when a certain action is performed (direct link to image)
    +
    + +## 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 web1. 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. + +1This would obviously be terrible for development, but its just an extreme example 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 one problem with their current dropdown menus on their main website: + +They don't work if JavaScript is disabled. + +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)) + +
    + Stripe default menu +
    Stripe's default menu dropdown (using both CSS & JavaScript) (direct link to image)
    +
    + +### Our recreation ([CodePen Demo](https://codepen.io/bradleytaunt/full/ExjMjLL)) + +
    + Stripe menu recreated +
    Our recreation with pure CSS (zero JavaScript) (direct link to image)
    +
    + +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 steal 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 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! + +- - - + + +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. + \ 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: + +![Mario blocks cretaed with CSS](/public/images/mario-block.png) + +[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. + + + +
    + + + + + + + +
    + + +Now we just add as many default blocks we want, along with the interactive punch block (`.mario-block--question`): + + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + + +## 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 download a copy 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. + +![Tabbed elements with only CSS](/public/images/tabbed-content.png) + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/abjmayw) + +--- + +
    +

    Sidenote:

    +

    While this method is semantic and accessible, you might consider using a pre-existing plugin for tabbed data.

    +

    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.

    +
    + +## 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 + + + +
    + + +
    + + + + + + + + +
    Content goes here
    + +
    + +
    + + +Full HTML for reference: + + +
    + +
    + + +
    Content goes here
    +
    + +
    + + +
    Content goes here
    +
    + +
    + + +
    Content goes here
    +
    + +
    + + +## 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 + +
    + Update (Oct 2019): @aardrian wrote a previous post about how changing the display properties on tables can impact screen readers. I highly recommend his excellent article Tables, CSS Display Properties, and ARIA +
    + +--- + +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 flexible 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 hammer1. + +Have fun making your tables responsive! + +1 I know, this is a terrible analogy... 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: + +
    +

    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.

    + MDN web docs +
    + +### 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**. +> +> - Guy Lafleur + +## 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 + +All data taken from [instant.page](https://instant.page) (which I am a huge fan of ♥) + +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 + +- Full browser support (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 browser support + +## CodePen Demo + +Feel free to play around with a slightly more stylized version of both options below: + +CodePen Demo: Width or flex-basis 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: + +
    +

    + Registers the style [script] if source provided (does NOT overwrite) and enqueues +

    +
    + +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 `` or just before the `` + +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. + +![Unscrew the main keyboard and touchpad screws on the back of the laptop](/public/images/x201-1.png) + +![Gently push the keyboard towards the screen to remove](/public/images/x201-2.png) + +![The keyboard cable is very fragile, remove it carefully](/public/images/x201-3.png) + +![Slide the palm rest down and away from the laptop to remove safely](/public/images/x201-4.png) + +![Remove the two screws on the WiFi card to access it](/public/images/x201-5.png) + +## 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! + +![My hacky electrical tape job on PIN20](/public/images/x201-tape.jpg) + +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 + +
    + Buzz Lightyear and Woody meme: 'Ports, Ports Everywhere' +
    Ports. Ports Everywhere.
    +
    + +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. + +
    + My disassembled X220 laptop +
    My disassembled X220 when I was reapplying the CPU thermal paste.
    +
    + +## 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. -- cgit v1.2.3-54-g00ecf