~uglyduck/uglyduck.srht.site

494dcd504bd6ebb68b59e8a04057b0a087570d38 — Bradley Taunt 6 months ago 7a4569e
tweaking overall design - still very much a WIP
143 files changed, 1196 insertions(+), 2353 deletions(-)

M LICENSE
M README.md
M _includes/footer.html
A _layouts/bloglist.html
M _layouts/post.html
M _posts/2017-07-10-designers-need-thicker-skin.md
M _posts/2017-08-07-goodbye-css-preprocessors.md
M _posts/2017-10-10-design-review-dropbox.md
M _posts/2017-11-01-death-of-personality.md
M _posts/2018-01-25-open-source-typeface-pairings.md
M _posts/2018-04-16-css-video-backgrounds.md
M _posts/2018-08-28-multiple-css-background-images.md
M _posts/2018-09-07-simple-accessibility.md
M _posts/2018-09-20-pure-css-simple-dropdown-plugin.md
M _posts/2018-11-22-flexbox-grid.md
M _posts/2018-12-19-jsincss-parent-selector.md
M _posts/2019-01-08-better-box-shadows.md
M _posts/2019-01-21-easy-custom-radio-inputs.md
M _posts/2019-02-15-super-mario-blocks-css.md
M _posts/2019-02-27-animated-card-tiles.md
M _site/404.html
M _site/89-posts-one-file/index.html
M _site/LICENSE
M _site/README.md
M _site/about/index.html
M _site/animated-card-tiles/index.html
M _site/animated-radio-tab-toggles.html
M _site/aqua-ui-buttons/index.html
M _site/articles/index.html
M _site/audio-hotkeys-on-linux-mint/index.html
M _site/base64-all-the-things/index.html
M _site/basic-form-styling/index.html
M _site/basic-gulp-build-for-sass/index.html
M _site/batch-webp-conversion/index.html
M _site/being-efficient/index.html
M _site/better-box-shadows/index.html
M _site/bidirectional-scrolling/index.html
M _site/books/index.html
M _site/browser-history-sucks/index.html
M _site/character-unit/index.html
M _site/chasing-performance/index.html
M _site/cheap-portable-pi/index.html
M _site/chromebook-web-development/index.html
M _site/css-js-mistake/index.html
M _site/css-slope-graphs/index.html
M _site/css-variables/index.html
M _site/css-video-backgrounds/index.html
M _site/current-color/index.html
M _site/cut-your-forms-in-half/index.html
M _site/death-of-personality/index.html
M _site/default-html-style-updates/index.html
M _site/design-review-dropbox/index.html
M _site/designers-need-thicker-skin/index.html
M _site/disabling-comments-in-wordpress/index.html
M _site/dynamic-checkboxes/index.html
M _site/easy-custom-radio-inputs/index.html
M _site/easy-toggle-switches/index.html
M _site/et-jekyll-theme/index.html
M _site/fake-3d-elements-with-css/index.html
M _site/fathom-analytics-netlify/index.html
M _site/feed.xml
M _site/first-letter/index.html
M _site/fixing-localwp-on-fedora-32/index.html
M _site/flexbox-bar-graphs/index.html
M _site/flexbox-grid/index.html
M _site/form-ui-improvements/index.html
M _site/goodbye-css-preprocessors/index.html
M _site/hamburger-menu-alternative/index.html
M _site/hello-jekyll/index.html
M _site/html-like-1999/index.html
M _site/html5-validator-badge/index.html
M _site/improving-githubs-new-design/index.html
M _site/improving-receipt-ux/index.html
M _site/improving-tufte-jekyll/index.html
M _site/indenting-text-with-css/index.html
M _site/index.html
M _site/introducing-notez/index.html
M _site/introducing-pageroast/index.html
M _site/jsincss-parent-selector/index.html
M _site/keynote-slides-with-pure-css/index.html
M _site/launching-thriftyname/index.html
M _site/lazy-dev-dark-mode/index.html
M _site/learning-to-floss/index.html
M _site/linux-mint-macbook-air/index.html
M _site/load-image-on-click/index.html
M _site/macos-icon-css/index.html
M _site/menu-toggle-css/index.html
M _site/mini-interactive-keyboard-with-pure-css/index.html
M _site/minimal-css-menu/index.html
M _site/multiple-css-background-images/index.html
M _site/my-pi-desktop/index.html
M _site/news-websites-are-dumpster-fires/index.html
M _site/obvious-js-injection-fallback/index.html
M _site/one-css-change/index.html
M _site/open-source-typeface-pairings/index.html
M _site/over-engineering-an-oil-tank/index.html
M _site/over-nesting/index.html
M _site/performance-focused-wordpress-theme/index.html
M _site/personal-website-opinions/index.html
M _site/pi-400-internal-ssd/index.html
M _site/pihole-cloudflare/index.html
M _site/plain-text-emails/index.html
M _site/poor-mans-full-bleed/index.html
M _site/privacy/index.html
M _site/projects/index.html
M _site/proper-ui-hierarchy/index.html
M _site/ps4-download-ui/index.html
A _site/public/images/eli-schiff-twitter.webp
M _site/publish-with-jekyll/index.html
M _site/pure-css-simple-dropdown-plugin/index.html
M _site/quick-dirty-theme-switcher/index.html
M _site/responsive-tables/index.html
M _site/safari-extensions-catalina-patcher/index.html
M _site/self-hosting-fathom/index.html
M _site/setting-up-free-ssl/index.html
M _site/sharing-the-things-we-use/index.html
M _site/shiny-css-buttons/index.html
M _site/simple-accessibility/index.html
M _site/simple-does-not-mean-ugly/index.html
M _site/simple-jekyll-navigation/index.html
M _site/skip-to-content/index.html
M _site/soma-terminal-css/index.html
M _site/stay-hungry/index.html
M _site/still-using-jquery/index.html
M _site/stop-using-sticky-navigation/index.html
M _site/stripe-menu-css/index.html
M _site/style.css
M _site/styling-empty-table-cells/index.html
M _site/super-mario-blocks-css/index.html
M _site/tabbed-content/index.html
M _site/text-align-justify/index.html
M _site/the-wonders-of-text-ellipsis/index.html
M _site/they-wont-wait/index.html
M _site/user-select/index.html
M _site/uses/index.html
M _site/what-happened-to-self-hosted-blogs/index.html
M _site/width-vs-flex-basis/index.html
M _site/wp-enqueue-for-beginners/index.html
M about.md
M articles.md
M index.md
A public/images/eli-schiff-twitter.webp
M style.css
M LICENSE => LICENSE +1 -1
@@ 12,4 12,4 @@ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
\ No newline at end of file
PERFORMANCE OF THIS SOFTWARE.

M README.md => README.md +2 -0
@@ 2,6 2,8 @@

Official website files for my personal blog: [uglyduck.ca](https://uglyduck.ca)

All layout / code is set under the ISC License. All written content is copyright of Bradley Taunt and not for use in other projects etc.

- sourcehut git repo: [git.sr.ht/~uglyduck/uglyduck.srht.site](https://git.sr.ht/~uglyduck/uglyduck.srht.site)
- sourcehut mailing list: [lists.sr.ht/~uglyduck/uglyduck.ca](https://lists.sr.ht/~uglyduck/uglyduck.ca)
- sourcehut ticket tracker: [todo.sr.ht/~uglyduck/uglyduck-tracker](https://todo.sr.ht/~uglyduck/uglyduck-tracker)

M _includes/footer.html => _includes/footer.html +3 -3
@@ 1,11 1,11 @@
<footer role="contentinfo" id="menu">
    {% include navigation.html %}
    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>{% last_modified_at %}</b></p>
    <small>The most recent revision of this page was made on <b>{% last_modified_at %}</b></small>
</footer>

A _layouts/bloglist.html => _layouts/bloglist.html +11 -0
@@ 0,0 1,11 @@
---
layout: default
---

<header>
  <h1>{{ page.title }}</h1>
</header>

<section class="article-list">
{{ content }}
</section>

M _layouts/post.html => _layouts/post.html +1 -1
@@ 10,7 10,7 @@
        <h1>{{ page.title }}</h1>
      </header>
      <hr>
      <article>
      <article class="{% if page.column == 'single' %}single{% endif %}">
        <p><em>Posted on <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time></em></p>
        <hr>
        {{ content }}

M _posts/2017-07-10-designers-need-thicker-skin.md => _posts/2017-07-10-designers-need-thicker-skin.md +2 -2
@@ 16,8 16,8 @@ I'm not normally one to comment or even really care about "drama" within our des
Designer/design critic Eli Schiff tweeted his thoughts about the newly released promo video from Framer showcasing their new gradient feature. See the initial tweet below:

<figure>
    <img src="https://cdn-images-1.medium.com/max/1600/0*hs-nqVLpZsPht0C6.webp" alt="Eli's Tweet">
    <span class="marginnote">Eli Schiff just telling it how it is.</span>
    <img src="/public/images/eli-schiff-twitter.webp" alt="Eli's Tweet">
    <figcaption>Eli Schiff just telling it how it is.</figcaption>
</figure>

Let me begin by saying my views on this comment: I don't care. I honestly don’t feel strongly one way or the other about them making a video promo for gradients. Could it have just been a simple text tweet? Sure. Does it really matter that they decided to make a video for it? Not at all.

M _posts/2017-08-07-goodbye-css-preprocessors.md => _posts/2017-08-07-goodbye-css-preprocessors.md +2 -2
@@ 1,5 1,5 @@
---
title: Goodbye CSS preprocessors
title: Goodbye CSS Preprocessors
date: 2017-08-07 00:00:00 Z
permalink: "/goodbye-css-preprocessors/"
layout: post


@@ 13,7 13,7 @@ redirect_from: "/2017/08/07/goodbye-css-preprocessors/"

But that all changes moving forward. I'm going back to basics with CSS. Straight vanilla, man.

{% cloudinary /public/images/sass-cancel_rl1fsw_c_scale,w_800.webp alt="No Sass" %}
![No Sass](/public/images/sass-cancel_rl1fsw_c_scale,w_800.webp)

## Why? And who cares?


M _posts/2017-10-10-design-review-dropbox.md => _posts/2017-10-10-design-review-dropbox.md +10 -10
@@ 1,5 1,5 @@
---
title: Unsolicited design review - Dropbox
title: Unsolicited Design Review - Dropbox
date: 2017-10-10 00:00:00 Z
permalink: "/design-review-dropbox/"
layout: post


@@ 11,7 11,7 @@ redirect_from: "/2017/10/10/design-review-dropbox/"

Earlier last week the design team at Dropbox unveiled their new branding / design system for the company as a whole. If you haven't seen the updated design yet, you can do so here: <a href="https://dropbox.design/">dropbox.design</a> (Take your time, I can wait).

{% cloudinary /public/images/dropbox-logo_djnecj_c_scale,w_1400.webp alt="Dropbox" %}
![Dropbox Logo](/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp)

I won't mince words when I say I believe this is a huge step backwards for their brand. Not only is it uninspired and broken, but it also shows how our industry is plagued with a need to redesign things just for the sake of redesigning them.



@@ 90,8 90,8 @@ Any persons with visual impairments need not apply. This design system is not bu
</blockquote>

<figure>
    {% cloudinary /public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp alt="Dropbox Fonts" %}
    <span class="marginnote">Not a single one of these typeface styles is initially readable</span>
    <img src="/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp" alt="Dropbox Fonts">
    <figcaption>Not a single one of these typeface styles is initially readable</figcaption>
</figure>

The typeface they have chosen looks terrible at any view-port size and readability takes a backseat. I can't help but feel this falls into the "let's be trendy" category and ends up sacrificing almost all good usability practices for gimmicky type.


@@ 103,15 103,15 @@ The typeface they have chosen looks terrible at any view-port size and readabili
Irony at it's finest. "Our users tell us that they hate being distracted and overwhelmed, so we've decided to use headache inducing color palettes, crude illustrations, a barely legible typeface, and some of the most visually loud photography throughout our system". I hate coming off as mean-spirited - but this is some elaborate joke, right?

<figure>
    {% cloudinary /public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp alt="Dropbox Color Logos" %}
    <span class="marginnote">Oh Dropbox...my eyes!</span>
    <img src="/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp" alt="Dropbox Color Logos">
    <figcaption>Oh Dropbox...my eyes!</figcaption>
</figure>

After running it through a color contrast accessibility checker:

<figure>
    {% cloudinary /public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp alt="Dropbox Contrast" %}
    <span class="marginnote">Multiple accessibility failures</span>
    <img src="/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp" alt="Dropbox Contrast">
    <figcaption>Multiple accessibility failures</figcaption>
</figure>

Next we have the child-like 'scribble' illustrations. Now don't get me wrong, I love seeing different illustration styles and I actively use 'sketch / scribble' artwork myself, but I don't believe this is the best fit for a brand like Dropbox. These cartoon visuals conflict with the business enterprise service Dropbox should be trying to convey.


@@ 119,8 119,8 @@ Next we have the child-like 'scribble' illustrations. Now don't get me wrong, I 
Another issue with these illustrations is their usage. Look at the image below and ask yourself if you would correlate it with an error page if no accompanying text was present.

<figure>
    {% cloudinary /public/images/dropbox-404_bovayg_c_scale,w_758.webp alt="Dropbox Error Illustration" %}
    <span class="marginnote">What does this have to do with a 404 error page?</span>
    <img src="/public/images/dropbox-404_bovayg_c_scale,w_758.webp" alt="Dropbox error page imagery">
    <figcaption>What does this have to do with a 404 error page?</figcaption>
</figure>

## Closing Thoughts

M _posts/2017-11-01-death-of-personality.md => _posts/2017-11-01-death-of-personality.md +14 -14
@@ 10,9 10,9 @@ redirect_from: "/2017/11/01/death-of-personality/"
featured: true
---

<p class="lead">On September 18, 2013 truly original product design (everything from icon and app design to UI and experience interactions) began it's fast decline into the abyss with the release of Apple's iOS 7 update. It was called *revolutionary*. It was seen as a 'new age' of design. I think it was a big mistake.</p>
<p class="lead">On September 18, 2013 truly original product design (everything from icon and app design to UI and experience interactions) began it's fast decline into the abyss with the release of Apple's iOS 7 update. It was called revolutionary. It was seen as a 'new age' of design. I think it was a big mistake.</p>

{% cloudinary /public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp alt="Flat Design Tombstone" %}
![Flat design tombstone](/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp)

### Stepping backwards



@@ 26,8 26,8 @@ Because of this, a large movement was created based around the idea that skeuomo
Do you remember Instagram's original app icon and UI? Do you remember how everyone initially praised it? Show those old designs to the same designers who loved it only a few years ago, and they will now laugh at how "bad" it is.

<figure>
    {% cloudinary /public/images/flat-design-instagram_mabnop_c_scale,w_800.webp alt="Flat Design Instagram" %}
    <span class="marginnote">They completely butchered the contrast and initial readability to appease the 'flat' trend style. The personality died.</span>
    <img src="/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp" alt="Instagram flat design">
    <figcaption>They completely butchered the contrast and initial readability to appease the 'flat' trend style. The personality died.</figcaption>
</figure>

Unfortunately the same can be said for Apple's system icons across both iOS and macOS.


@@ 35,8 35,8 @@ Unfortunately the same can be said for Apple's system icons across both iOS and 
I believe Apple took the concept of a 'consistent' design system across their iconography too literally. All the system icons should compliment one another, but they shouldn't lose their own individual look and feel.

<figure>
    {% cloudinary /public/images/flat-design-icons_vubivd_c_scale,w_800.webp alt="iOS Icon Comparison" %}
    <span class="marginnote">Look at the depth and thought put into the original iOS icons. The "newer" icon designs look like lazy and uninspired wire-frames.</span>
    <img src="/public/images/flat-design-icons_vubivd_c_scale,w_800.webp" alt="iOS icon comparison">
    <figcaption>Look at the depth and thought put into the original iOS icons. The "newer" icon designs look like lazy and uninspired wire-frames.</figcaption>
</figure>

### Lackluster UI


@@ 44,8 44,8 @@ I believe Apple took the concept of a 'consistent' design system across their ic
The once inspiring and hierarchically consistent interface of both iOS and macOS was also quickly swatted away. In it's place we as users saw the removal of depth, initial visual cues as to what was interactive and what was static, and sadly even the overall color was muted.

<figure>
    {% cloudinary /public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp alt="iOS UI Comparison" %}
    <span class="marginnote">More ugly wire-frame skeleton design compared to it's original counterpart. Where is the call to interact with any of these elements? Where is the hierarchy?</span>
    <img src="/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp" alt="iOS UI comparison">
    <figcaption>More ugly wire-frame skeleton design compared to it's original counterpart. Where is the call to interact with any of these elements? Where is the hierarchy?</figcaption>
</figure>

### Impact on the web


@@ 53,8 53,8 @@ The once inspiring and hierarchically consistent interface of both iOS and macOS
This may not have been a bad thing if it was self-contained to Apple itself. The problem is that Apple has such a huge influence on the design industry - although that is starting to diminish, due to disasters like the iPhone X - that everyone starts to mimic and copy their style. This includes designers of sites and progressive web apps.

<figure>
    {% cloudinary /public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp alt="Buttons Comparison" %}
    <span class="marginnote">Comparison of button states. Which states are more instantly recognizable?</span>
    <img src="/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp" alt="Buttons comparison">
    <figcaption>Comparison of button states. Which states are more instantly recognizable?</figcaption>
</figure>

With the evolution of websites morphing into progressive web apps, designers have felt the need to start implementing this bland style for their design systems.


@@ 72,8 72,8 @@ What we got in return:
- a complete disregard for original design not based off every other popular product

<figure>
    {% cloudinary /public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp alt="Toggles Comparison" %}
    <span class="marginnote">The minimal / flat toggles look like unfinished prototypes.</span>
    <img src="/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp" alt="Toggles comparison">
    <figcaption>The minimal / flat toggles look like unfinished prototypes.</figcaption>
</figure>

### Breaking free of the 'modern era'


@@ 85,8 85,8 @@ Flexibits recently launched a new contact app for macOS called <a href="https://
 This is where visual design shines. Icon designs like Cardhop's are what allow individual applications to stand out in the dock or mobile home-screen among all the others. So how is that <i>not</i> UX design?

<figure>
    {% cloudinary /public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp alt="Cardhop App Icon" %}
    <span class="marginnote">The gorgeous Cardhop app icon by David Lanham.</span>
    <img src="/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp" alt="Cardhop app icon">
    <figcaption>The gorgeous Cardhop app icon by David Lanham.</figcaption>
</figure>

The current trendy thought process from designers that "visual design doesn't involve UX design" is garbage. Neither are mutually exclusive and I think anyone who believes so is being incredibly short-sighted.

M _posts/2018-01-25-open-source-typeface-pairings.md => _posts/2018-01-25-open-source-typeface-pairings.md +11 -21
@@ 1,5 1,5 @@
---
title: Open source typeface pairings
title: Open Source Typeface Pairings
date: 2018-01-25 00:00:00 Z
permalink: "/open-source-typeface-pairings/"
layout: post


@@ 18,10 18,8 @@ So, I've curated this personal list of 5 exceptionally beautiful typeface pairin
Download: <a href="https://github.com/edwardtufte/et-book">ET Book</a>, <a href="https://www.wfonts.com/font/gill-sans-std">Gill Sans</a>

<figure>
    <div class="img-holder">
    {% cloudinary /public/images/et-book-gill-sans.webp alt="ET Book Gill Sans" %}
    </div>
    <span class="marginnote">ET-Book &amp; Gill Sans are based off the font pairings of my personal Jekyll theme: <a href="https://bradleytaunt.com/et-jekyll-theme/">ET-Jekyll Theme</a>.</span>
    <img src="/public/images/et-book-gill-sans.webp" alt="ET Book Gill Sans">
    <figcaption>ET-Book &amp; Gill Sans are based off the font pairings of my personal Jekyll theme: <a href="https://bradleytaunt.com/et-jekyll-theme/">ET-Jekyll Theme</a>.</figcaption>
</figure>

## Playfair Display &amp; Roboto


@@ 29,10 27,8 @@ Download: <a href="https://github.com/edwardtufte/et-book">ET Book</a>, <a href=
Download: <a href="https://fonts.google.com/specimen/Playfair+Display">Playfair Display</a>, <a href="https://fonts.google.com/specimen/Roboto">Roboto</a>

<figure>
    <div class="img-holder">
    {% cloudinary /public/images/playfair-roboto.webp alt="Playfair Display Roboto" %}
    </div>
    <span class="marginnote">Playfair Display &amp; Roboto I find work really well for microblogs or short essay format posts.</span>
    <img src="/public/images/playfair-roboto.webp" alt="Playfair Display Roboto">
    <figcaption>Playfair Display &amp; Roboto I find work really well for microblogs or short essay format posts.</figcaption>
</figure>

## Karma &amp; Open Sans


@@ 40,10 36,8 @@ Download: <a href="https://fonts.google.com/specimen/Playfair+Display">Playfair 
Download: <a href="https://fonts.google.com/specimen/Karma">Karma</a>, <a href="https://fonts.google.com/specimen/Open+Sans">Open Sans</a>

<figure>
    <div class="img-holder">
    {% cloudinary /public/images/karma-open-sans.webp alt="Karma Open Sans" %}
    </div>
    <span class="marginnote">Karma &amp; Open Sans give readers a little more breathing room between characters. Good choice if trying to keep accessibility in mind.</span>
    <img src="/public/images/karma-open-sans.webp" alt="Karma Open Sans">
    <figcaption>Karma &amp; Open Sans give readers a little more breathing room between characters. Good choice if trying to keep accessibility in mind.</figcaption>
</figure>

## Libre Baskerville &amp; Oswald


@@ 51,10 45,8 @@ Download: <a href="https://fonts.google.com/specimen/Karma">Karma</a>, <a href="
Download: <a href="https://fonts.google.com/specimen/Libre+Baskerville">Libre Baskerville</a>, <a href="https://fonts.google.com/specimen/Oswald">Oswald</a>

<figure>
    <div class="img-holder">
    {% cloudinary /public/images/libre-oswald.webp alt="Libre Baskerville Oswald" %}
    </div>
    <span class="marginnote">Libre Baskerville &amp; Oswald oozes character and takes inspiration from a more print-based medium.</span>
    <img src="/public/images/libre-oswald.webp" alt="Libre Baskerville Oswald">
    <figcaption>Libre Baskerville &amp; Oswald oozes character and takes inspiration from a more print-based medium.</figcaption>
</figure>

## Fanwood &amp; League Spartan


@@ 62,8 54,6 @@ Download: <a href="https://fonts.google.com/specimen/Libre+Baskerville">Libre Ba
Download: <a href="https://www.theleagueofmoveabletype.com/fanwood">Fanwood</a>, <a href="https://www.theleagueofmoveabletype.com/league-spartan">League Spartan</a>

<figure>
    <div class="img-holder">
    {% cloudinary /public/images/fanwood-league.webp alt="Fanwood League Spartan" %}
    </div>
    <span class="marginnote">Fanwood &amp; League Spartan paired together allow the main content to be easily readable, while the headers instantly grab the user's attention.</span>
    <img src="/public/images/fanwood-league.webp" alt="Fanwood League Spartan">
    <figcaption>Fanwood &amp; League Spartan paired together allow the main content to be easily readable, while the headers instantly grab the user's attention.</figcaption>
</figure>

M _posts/2018-04-16-css-video-backgrounds.md => _posts/2018-04-16-css-video-backgrounds.md +1 -1
@@ 1,5 1,5 @@
---
title: CSS video backgrounds
title: CSS Video Backgrounds
date: 2018-04-16 00:00:00 Z
permalink: "/css-video-backgrounds/"
layout: post

M _posts/2018-08-28-multiple-css-background-images.md => _posts/2018-08-28-multiple-css-background-images.md +2 -1
@@ 1,8 1,9 @@
---
title: Using multiple CSS background images
title: Using Multiple CSS Background Images
date: 2018-08-28 00:00:00 Z
permalink: "/multiple-css-background-images/"
layout: post
column: single
description: Set multiple background images on an element in CSS
summary: Somewhat unknown in the CSS community is the ability to have multiple background
  images set on an element.

M _posts/2018-09-07-simple-accessibility.md => _posts/2018-09-07-simple-accessibility.md +1 -0
@@ 3,6 3,7 @@ title: Simple accessibility
date: 2018-09-07 00:00:00 Z
permalink: "/simple-accessibility/"
layout: post
column: single
description: A few simple and easy to implement wins for accessibility in your projects
summary: Breaking down a few accessibility improvements that you can easily implement
  into all your current and future web projects.

M _posts/2018-09-20-pure-css-simple-dropdown-plugin.md => _posts/2018-09-20-pure-css-simple-dropdown-plugin.md +1 -0
@@ 3,6 3,7 @@ title: Pure CSS simple dropdown plugin
date: 2018-09-20 00:00:00 Z
permalink: "/pure-css-simple-dropdown-plugin/"
layout: post
column: single
description: Learn how to implement a custom select dropdown with CSS
summary: A simple, JavaScript-free way to implement a custom styled, plug-and-play
  select dropdown with pure CSS.

M _posts/2018-11-22-flexbox-grid.md => _posts/2018-11-22-flexbox-grid.md +2 -1
@@ 1,8 1,9 @@
---
title: Adaptable flexbox grid
title: Adaptable Flexbox Grid
date: 2018-11-22 00:00:00 Z
permalink: "/flexbox-grid/"
layout: post
column: single
description: Learn how to create a very simple grid with flexbox
summary: The days of overly complex grid systems are gone. Learn how to create adaptable
  grid systems with flexbox using barely any CSS.

M _posts/2018-12-19-jsincss-parent-selector.md => _posts/2018-12-19-jsincss-parent-selector.md +4 -1
@@ 3,6 3,7 @@ title: Using parent selectors in CSS
date: 2018-12-19 00:00:00 Z
permalink: "/jsincss-parent-selector/"
layout: post
column: single
description: Learn how to call on parent selectors in CSS
summary: Find out how to target an element's parent directly in CSS by using two simple
  JavaScript packages.


@@ 32,7 33,9 @@ npm install jsincss-parent-selector qaffeine

### HTML (ex. index.html)

```html
Now we add our very simple HTML skeleton:

```
<!doctype html>
<html>
    <head>

M _posts/2019-01-08-better-box-shadows.md => _posts/2019-01-08-better-box-shadows.md +10 -2
@@ 93,9 93,11 @@ We just need to add a simple child `div` (or use a `pseudo` element if you prefe
</div>
```

Now we make our inner child element `absolute` and set it's `height` and `width` dynamically to be slightly smaller than it's parent (percentages work best for this). Remember to set this child element behind it's parent by adding `z-index: -1`.
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). 

```css
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 */


@@ 107,7 109,13 @@ Now we make our inner child element `absolute` and set it's `height` and `width`
  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 */

M _posts/2019-01-21-easy-custom-radio-inputs.md => _posts/2019-01-21-easy-custom-radio-inputs.md +8 -134
@@ 10,106 10,18 @@ redirect_from: "/2019/01/21/easy-custom-radio-inputs/"
featured: true
---

<style>
    .radio-container {
        margin: 0 auto;
        max-width: 400px;
        width: 100%;
    }
    .radio-label {
        background: white;
        border: 1px solid #eee;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        color: #2d2d2d;
        cursor: pointer;
        display: inline-block;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-weight: 600;
        margin: 0 auto 10px;
        padding: 20px 20px 20px 65px;
        position: relative;
        transition: .3s ease all;
        width: 100%;
    }
    .radio-label:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    }
    .radio-label:before {
        background: #eee;
        border-radius: 50%;
        content:'';
        height: 30px;
        left: 20px;
        position: absolute;
        top: calc(50% - 15px);
        transition: .3s ease background-color;
        width: 30px;
    }
    .radio-label span {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }
    .radio-btn {
        position: absolute;
        visibility: hidden;
    }
    .radio-btn:checked + .radio-label {
        background: #ECF5FF;
        border-color: #4A90E2;
    }
    .radio-btn:checked + .radio-label:before {
        background-color: #4A90E2;
        background-image:  url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 15px;
    }
    .radio-btn.positive:checked + .radio-label {
        background: #EAFFF6;
        border-color: #32B67A;
    }
    .radio-btn.positive:checked + .radio-label:before {
        background-color: #32B67A;
    }
    .radio-btn.neutral:checked + .radio-label:before {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAtMTUgMzAgOC41NzE0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PCEtLUdlbmVyYXRlZCBieSBJSlNWRyAoaHR0cHM6Ly9naXRodWIuY29tL2ljb25qYXIvSUpTVkcpLS0+PHBhdGggZD0iTTMwLC0xMi4zMjE0djMuMjE0MjljMCwwLjczNjYwNyAtMC4yNjIyNzcsMS4zNjcxOSAtMC43ODY4MywxLjg5MTc0Yy0wLjUyNDU1NCwwLjUyNDU1NCAtMS4xNTUxMywwLjc4NjgzMSAtMS44OTE3NCwwLjc4NjgzMWgtMjQuNjQyOWMtMC43MzY2MDcsMCAtMS4zNjcxOSwtMC4yNjIyNzcgLTEuODkxNzQsLTAuNzg2ODMxYy0wLjUyNDU1MywtMC41MjQ1NTMgLTAuNzg2ODMsLTEuMTU1MTMgLTAuNzg2ODMsLTEuODkxNzR2LTMuMjE0MjljMCwtMC43MzY2MDcgMC4yNjIyNzcsLTEuMzY3MTkgMC43ODY4MywtMS44OTE3NGMwLjUyNDU1NCwtMC41MjQ1NTMgMS4xNTUxMywtMC43ODY4MyAxLjg5MTc0LC0wLjc4NjgzaDI0LjY0MjljMC43MzY2MDcsMCAxLjM2NzE5LDAuMjYyMjc3IDEuODkxNzQsMC43ODY4M2MwLjUyNDU1MywwLjUyNDU1NCAwLjc4NjgzLDEuMTU1MTMgMC43ODY4MywxLjg5MTc0WiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg==');
    }
    .radio-btn.negative:checked + .radio-label {
        background: #FFF2F2;
        border-color: #E75153;
    }
    .radio-btn.negative:checked + .radio-label:before {
        background-color: #E75153;
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIxLjg1MTg1IC0zOS42OTcgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjwhLS1HZW5lcmF0ZWQgYnkgSUpTVkcgKGh0dHBzOi8vZ2l0aHViLmNvbS9pY29uamFyL0lKU1ZHKS0tPjxwYXRoIGQ9Ik0yMS43Mjk5LC0yMy40NzFjMCwwLjQ0NjQyOCAtMC4xNTYyNSwwLjgyNTg5MyAtMC40Njg3NSwxLjEzODM5bC0yLjI3Njc5LDIuMjc2NzljLTAuMzEyNSwwLjMxMjUgLTAuNjkxOTY0LDAuNDY4NzUgLTEuMTM4MzksMC40Njg3NWMtMC40NDY0MjgsMCAtMC44MjU4OTMsLTAuMTU2MjUgLTEuMTM4MzksLTAuNDY4NzVsLTQuOTIxODcsLTQuOTIxODhsLTQuOTIxODgsNC45MjE4OGMtMC4zMTI1LDAuMzEyNSAtMC42OTE5NjQsMC40Njg3NSAtMS4xMzgzOSwwLjQ2ODc1Yy0wLjQ0NjQyOCwwIC0wLjgyNTg5MiwtMC4xNTYyNSAtMS4xMzgzOSwtMC40Njg3NWwtMi4yNzY3OSwtMi4yNzY3OWMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY1IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI5IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsNC45MjE4OCwtNC45MjE4OGwtNC45MjE4OCwtNC45MjE4OGMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY0IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI4IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsMi4yNzY3OSwtMi4yNzY3OGMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI5LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsNC45MjE4OCw0LjkyMTg4bDQuOTIxODcsLTQuOTIxODhjMC4zMTI1LC0wLjMxMjUgMC42OTE5NjUsLTAuNDY4NzUgMS4xMzgzOSwtMC40Njg3NWMwLjQ0NjQyOSwwIDAuODI1ODkzLDAuMTU2MjUgMS4xMzgzOSwwLjQ2ODc1bDIuMjc2NzksMi4yNzY3OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjUgMC40Njg3NSwxLjEzODM5YzAsMC40NDY0MjkgLTAuMTU2MjUsMC44MjU4OTMgLTAuNDY4NzUsMS4xMzgzOWwtNC45MjE4OCw0LjkyMTg4bDQuOTIxODgsNC45MjE4OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjQgMC40Njg3NSwxLjEzODM5WiIgdHJhbnNmb3JtPSJzY2FsZSgxLjAwNTYxKSIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg==');
    }
</style>

*Default radio inputs are notoriously horrible looking* and are something designers tend to over-think when trying to customize them. Let's walk through how to create custom radio buttons with *pure CSS*, while still preserving performance and accessibility.

## The final product (embedded demo)

This is what we will be designing:

<div class="message">
<div class="radio-container">
<input class="radio-btn" name="radio-collection" id="radio-1" type="radio">
<label class="radio-label" for="radio-1"><span>I am very satisfied</span></label>

<input class="radio-btn" name="radio-collection" id="radio-2" type="radio" checked>
<label class="radio-label" for="radio-2"><span>I am satisfied</span></label>

<input class="radio-btn" name="radio-collection" id="radio-3" type="radio">
<label class="radio-label" for="radio-3"><span>I am indifferent</span></label>

<input class="radio-btn" name="radio-collection" id="radio-4" type="radio">
<label class="radio-label" for="radio-4"><span>I am unsatisfied</span></label>

<input class="radio-btn" name="radio-collection" id="radio-5" type="radio">
<label class="radio-label" for="radio-5"><span>I am very unsatisfied</span></label>
</div>
</div>
<p class="codepen" data-height="622" data-default-tab="result" data-slug-hash="oNjwMyX" data-user="bradleytaunt" style="height: 622px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/bradleytaunt/pen/oNjwMyX">
  Custom Radio Inputs - Fancy (Pure CSS)</a> by Bradley Taunt (<a href="https://codepen.io/bradleytaunt">@bradleytaunt</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---



@@ 158,27 70,6 @@ For styling purposes we also add the `radio-label` class.
<label class="radio-label" for="radio-1"><span>I am very satisfied</span></label>
```

## What we have so far: (embedded demo)

<div class="message">
<div class="radio-container">
<input name="radio-collection-bad" id="radio-10" type="radio">
<label for="radio-10"><span>I am very satisfied</span></label>

<input name="radio-collection-bad" id="radio-20" type="radio">
<label for="radio-20"><span>I am satisfied</span></label>

<input name="radio-collection-bad" id="radio-30" type="radio">
<label for="radio-30"><span>I am indifferent</span></label>

<input name="radio-collection-bad" id="radio-40" type="radio">
<label  for="radio-40"><span>I am unsatisfied</span></label>

<input name="radio-collection-bad" id="radio-50" type="radio">
<label for="radio-50"><span>I am very unsatisfied</span></label>
</div>
</div>

This is looking pretty terrible - but that's nothing some good ol' CSS can't fix!

## The flesh of our radio inputs (CSS)


@@ 237,6 128,8 @@ Next we include the default empty selection element (to mimic the original radio
}
```

## A Few Final Steps

The final step is adding the custom styling for when an `input` item is selected (`:checked`).

You will notice the use of a `base64` element for the custom checkmark - feel free to subsitute this for an actual image or none at all (this is just my personal design preference).


@@ 316,25 209,6 @@ For easier reference the entire CSS file can be found below:

Since this demo is based off a survey-type questionaire, wouldn't it be interesting to give the different selectable options their own styling based on their context? Take a look at the further customized version below:

<div class="message">
<div class="radio-container">
<input class="radio-btn positive" name="radio-collection-survey" id="radio-1-survey" type="radio">
<label class="radio-label" for="radio-1-survey"><span>I am very satisfied</span></label>

<input class="radio-btn positive" name="radio-collection-survey" id="radio-2-survey" type="radio">
<label class="radio-label" for="radio-2-survey"><span>I am satisfied</span></label>

<input class="radio-btn neutral" name="radio-collection-survey" id="radio-3-survey" type="radio" checked>
<label class="radio-label" for="radio-3-survey"><span>I am indifferent</span></label>

<input class="radio-btn negative" name="radio-collection-survey" id="radio-4-survey" type="radio">
<label class="radio-label" for="radio-4-survey"><span>I am unsatisfied</span></label>

<input class="radio-btn negative" name="radio-collection-survey" id="radio-5-survey" type="radio">
<label class="radio-label" for="radio-5-survey"><span>I am very unsatisfied</span></label>
</div>
</div>

We can do so by adding `positive`, `neutral` and `negative` class names to the radio inputs with their own respective properties:

```css

M _posts/2019-02-15-super-mario-blocks-css.md => _posts/2019-02-15-super-mario-blocks-css.md +11 -136
@@ 9,146 9,17 @@ summary: Ever wanted to recreate the Super Mario blocks in CSS? Of course you ha
redirect_from: "/2019/02/15/super-mario-blocks-css/"
---

<style>
    .main-container {
        display: block;
        margin: 20px auto;
        text-align: center;
    }
    .mario-block {
        display: inline-block;
        height: 80px;
        margin-right: -7px;
        position: relative;
        width: 80px;
    }
    .mario-block input {
        position: absolute;
        visibility: hidden;
        z-index: -1;
    }
    .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%;
    }
    .mario-block input:checked + label {
        background: #885818;
        box-shadow: inset -4px -4px 0 #68400B, inset 4px 4px 0 #FAB89B;
    }
    .mario-block input:checked + label .dot,
    .mario-block input:checked + label .question-mark {
        display: none;
    }
    .mario-block input:checked + label:before,
    .mario-block input:checked + label:after {
        content: '';
        height: 20px;
        position: absolute;
        transform: rotate(45deg);
        width: 20px;
    }
    .mario-block input:checked + label:before {
        border-right: 4px solid #070000;
        right: 18px;
        top: 15px;
        transform: rotate(45deg);
    }
    .mario-block input:checked + label:after {
        border-left: 4px solid #070000;
        left: 18px;
        top: 15px;
        transform: rotate(-45deg);
    }
    .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;
    }
    .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;
    }
</style>

*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:
<br>*Click the `?` block to see it's interaction*

<div class="message">
    <div class="main-container">
        <div class="mario-block">
            <input type="checkbox" id="1" disabled>
            <label for="1">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </label>
        </div>
        <div class="mario-block">
            <input type="checkbox" id="2" disabled>
            <label for="2">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </label>
        </div>
        <div class="mario-block mario-block--question">
            <input type="checkbox" id="3">
            <label for="3">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="question-mark"></div>
            </label>
        </div>
        <div class="mario-block">
            <input type="checkbox" id="4" disabled>
            <label for="4">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </label>
        </div>
    </div>
</div>
<p class="codepen" data-height="208" data-default-tab="result" data-slug-hash="JjEPOVe" data-user="bradleytaunt" style="height: 208px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/bradleytaunt/pen/JjEPOVe">
  Super Mario Blocks</a> by Bradley Taunt (<a href="https://codepen.io/bradleytaunt">@bradleytaunt</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## The HTML



@@ 229,7 100,7 @@ Now we just add as many default blocks we want, along with the interactive punch

First we need to remove the default `checkbox` input styling and place all new styling on it's corresponding `label`.

```css
```
/* Mario block parent div */
.mario-block {
    display: inline-block;


@@ 245,7 116,11 @@ First we need to remove the default `checkbox` input styling and place all new s
    visibility: hidden;
    z-index: -1;
}
```

Now to target the `label` elements found inside the block:

```
/* Style checkbox label accordingly */
.mario-block label {
    background: #F88D2E;

M _posts/2019-02-27-animated-card-tiles.md => _posts/2019-02-27-animated-card-tiles.md +7 -125
@@ 3,115 3,13 @@ title: Animated Card Tiles
date: 2019-02-27 00:00:00 Z
permalink: "/animated-card-tiles/"
layout: post
column: single
description: Implement animated card tiles with pure CSS
summary: In this tutorial we explain step-by-step how to build out tiled cards that
  animate with user interaction using pure CSS.
redirect_from: "/2019/02/27/animated-card-tiles/"
---

<style>
    .card-tiles-container {
        display: flex;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        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%;
        }
    }
</style>

*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 &amp; CSS. 

## What we will be building (live demo)


@@ 119,28 17,12 @@ redirect_from: "/2019/02/27/animated-card-tiles/"
This is the set of animated card tiles we will be creating:<br> 
*(try hovering)*

<div class="message">
    <div class="card-tiles-container">
        <div class="card-tile blue">
            <div class="text-content">
                <h4>Card Title</h4>
                <p>Inner card content text</p>
            </div>
        </div>
        <div class="card-tile orange">
            <div class="text-content">
                <h4>Card Title</h4>
                <p>Inner card content text</p>
            </div>
        </div>
        <div class="card-tile green">
            <div class="text-content">
                <h4>Card Title</h4>
                <p>Inner card content text</p>
            </div>
        </div>
    </div>
</div>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="rNjBpob" data-user="bradleytaunt" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/bradleytaunt/pen/rNjBpob">
  Animated Card Tiles</a> by Bradley Taunt (<a href="https://codepen.io/bradleytaunt">@bradleytaunt</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## The HTML


M _site/404.html => _site/404.html +3 -3
@@ 74,14 74,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/89-posts-one-file/index.html => _site/89-posts-one-file/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>89 Blog Posts in a Single HTML File</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2021-03-22T00:00:00-04:00">March 22, 2021</time></em></p>
        <hr>
        <p><br /></p>


@@ 147,14 147,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/LICENSE => _site/LICENSE +1 -1
@@ 12,4 12,4 @@ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
\ No newline at end of file
PERFORMANCE OF THIS SOFTWARE.

M _site/README.md => _site/README.md +2 -0
@@ 2,6 2,8 @@

Official website files for my personal blog: [uglyduck.ca](https://uglyduck.ca)

All layout / code is set under the ISC License. All written content is copyright of Bradley Taunt and not for use in other projects etc.

- sourcehut git repo: [git.sr.ht/~uglyduck/uglyduck.srht.site](https://git.sr.ht/~uglyduck/uglyduck.srht.site)
- sourcehut mailing list: [lists.sr.ht/~uglyduck/uglyduck.ca](https://lists.sr.ht/~uglyduck/uglyduck.ca)
- sourcehut ticket tracker: [todo.sr.ht/~uglyduck/uglyduck-tracker](https://todo.sr.ht/~uglyduck/uglyduck-tracker)

M _site/about/index.html => _site/about/index.html +4 -4
@@ 50,7 50,7 @@
<section>
<p>If you’re reading this page, that means you want to know a little more than what I mention on the homepage. Thanks for your interest and curiosity!</p>

<p><img style="float:right;margin:0 0 5px 10px;width:165px;" src="/public/images/my-face-thumbnail.webp" alt="Bradley Taunt" /></p>
<p><img style="float:right;margin:0 0 5px 15px;width:165px;" src="/public/images/my-face-thumbnail.webp" alt="Bradley Taunt" /></p>

<p>I’m Bradley Taunt, a web designer/developer hybrid with over 10 years of professional experience across large enterprise application software, all the way down to mom-and-pop shops. I have a strong emphasis on building maintainable CSS, with a passion for accessibility and web performance. Ugly Duck is the name of my one-man web shop.</p>



@@ 105,14 105,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/animated-card-tiles/index.html => _site/animated-card-tiles/index.html +11 -130
@@ 46,141 46,22 @@
        <h1>Animated Card Tiles</h1>
      </header>
      <hr>
      <article>
      <article class="single">
        <p><em>Posted on <time datetime="2019-02-26T19:00:00-05:00">February 26, 2019</time></em></p>
        <hr>
        <style>
    .card-tiles-container {
        display: flex;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        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%;
        }
    }
</style>

<p><em>The design trend of using “cards” or “tiles” to display interactive</em> sections/article headings in an app or website remains a popular choice among designers. So, let’s build a set of animated cards with only HTML &amp; CSS.</p>
        <p><em>The design trend of using “cards” or “tiles” to display interactive</em> sections/article headings in an app or website remains a popular choice among designers. So, let’s build a set of animated cards with only HTML &amp; CSS.</p>

<h2 id="what-we-will-be-building-live-demo">What we will be building (live demo)</h2>

<p>This is the set of animated card tiles we will be creating:<br /> 
<em>(try hovering)</em></p>

<div class="message">
    <div class="card-tiles-container">
        <div class="card-tile blue">
            <div class="text-content">
                <h4>Card Title</h4>
                <p>Inner card content text</p>
            </div>
        </div>
        <div class="card-tile orange">
            <div class="text-content">
                <h4>Card Title</h4>
                <p>Inner card content text</p>
            </div>
        </div>
        <div class="card-tile green">
            <div class="text-content">
                <h4>Card Title</h4>
                <p>Inner card content text</p>
            </div>
        </div>
    </div>
</div>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="rNjBpob" data-user="bradleytaunt" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/bradleytaunt/pen/rNjBpob">
  Animated Card Tiles</a> by Bradley Taunt (<a href="https://codepen.io/bradleytaunt">@bradleytaunt</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<h2 id="the-html">The HTML</h2>



@@ 548,14 429,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/animated-radio-tab-toggles.html => _site/animated-radio-tab-toggles.html +4 -4
@@ 46,7 46,7 @@
        <h1>Animated Radio Tab Toggles</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2021-01-05T00:00:00-05:00">January 5, 2021</time></em></p>
        <hr>
        <p><em>In this demo tutorial, we are making the assumption</em> that we need to create a radio slide toggle for our made-up payment options. For this we want to display 3 simple payment choices to the user:</p>


@@ 175,14 175,14 @@ input[type="radio"]:nth-of-type(3):checked ~ .slide-item {
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/aqua-ui-buttons/index.html => _site/aqua-ui-buttons/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Aqua UI CSS buttons</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2016-05-27T20:00:00-04:00">May 27, 2016</time></em></p>
        <hr>
        <p>Though it may feel like nostalgia, the old OS design for Mac was arguably better than the current iteration (as of this writing - High Sierra). I recently designed a quick Dribbble shot showcasing how the older operating system used to have so much more character and depth.</p>


@@ 174,14 174,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/articles/index.html => _site/articles/index.html +11 -11
@@ 47,8 47,8 @@
  <h1>Articles</h1>
</header>

<section>
<table>
<section class="article-list">
<table class="articles">
<tbody style="vertical-align:top;">

  <tr>


@@ 488,7 488,7 @@

  <tr>
    <td width="100px"><time datetime="2018-11-21T19:00:00-05:00">2018-11-21&nbsp;&nbsp;</time></td>
    <td><a href="/flexbox-grid/">Adaptable flexbox grid</a></td>
    <td><a href="/flexbox-grid/">Adaptable Flexbox Grid</a></td>
  </tr>

  <tr>


@@ 508,7 508,7 @@

  <tr>
    <td width="100px"><time datetime="2018-08-27T20:00:00-04:00">2018-08-27&nbsp;&nbsp;</time></td>
    <td><a href="/multiple-css-background-images/">Using multiple CSS background images</a></td>
    <td><a href="/multiple-css-background-images/">Using Multiple CSS Background Images</a></td>
  </tr>

  <tr>


@@ 518,7 518,7 @@

  <tr>
    <td width="100px"><time datetime="2018-04-15T20:00:00-04:00">2018-04-15&nbsp;&nbsp;</time></td>
    <td><a href="/css-video-backgrounds/">CSS video backgrounds</a></td>
    <td><a href="/css-video-backgrounds/">CSS Video Backgrounds</a></td>
  </tr>

  <tr>


@@ 533,7 533,7 @@

  <tr>
    <td width="100px"><time datetime="2018-01-24T19:00:00-05:00">2018-01-24&nbsp;&nbsp;</time></td>
    <td><a href="/open-source-typeface-pairings/">Open source typeface pairings</a></td>
    <td><a href="/open-source-typeface-pairings/">Open Source Typeface Pairings</a></td>
  </tr>

  <tr>


@@ 553,12 553,12 @@

  <tr>
    <td width="100px"><time datetime="2017-10-09T20:00:00-04:00">2017-10-09&nbsp;&nbsp;</time></td>
    <td><a href="/design-review-dropbox/">Unsolicited design review - Dropbox</a></td>
    <td><a href="/design-review-dropbox/">Unsolicited Design Review - Dropbox</a></td>
  </tr>

  <tr>
    <td width="100px"><time datetime="2017-08-06T20:00:00-04:00">2017-08-06&nbsp;&nbsp;</time></td>
    <td><a href="/goodbye-css-preprocessors/">Goodbye CSS preprocessors</a></td>
    <td><a href="/goodbye-css-preprocessors/">Goodbye CSS Preprocessors</a></td>
  </tr>

  <tr>


@@ 602,14 602,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/audio-hotkeys-on-linux-mint/index.html => _site/audio-hotkeys-on-linux-mint/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Audio Hotkeys on Linux Mint</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2020-07-14T10:56:16-04:00">July 14, 2020</time></em></p>
        <hr>
        <p><em>I recently switched out the OS on my old 2011 Macbook Air with Linux Mint</em>. It’s a distro I’ve used a few times in the past, but never set it as one of my main daily drivers until now.</p>


@@ 88,14 88,14 @@ pactl set-sink-mute @DEFAULT_SINK@ toggle
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/base64-all-the-things/index.html => _site/base64-all-the-things/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Base64 All The Things! (Sometimes)</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2020-03-18T00:00:00-04:00">March 18, 2020</time></em></p>
        <hr>
        <p><em>An extremely overlooked process for displaying fonts</em>, images, documents, spreadsheets, etc. on the web is the use of <strong>base64 encoding</strong>. Although it may not be the most efficient (or easy) way to display and include these elements it can be a lifesaver in certain situations.</p>


@@ 127,14 127,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/basic-form-styling/index.html => _site/basic-form-styling/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Very Basic Form Styling</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2019-11-13T00:00:00-05:00">November 13, 2019</time></em></p>
        <hr>
        <p><em>Web forms can be great - I’m borderline obsessed with them</em>. I love tinkering with pre-existing logins / sign up pages and I’ve also open sourced a minimal CSS form-styling plugin: <a href="https://normform.netlify.com/">Normform</a>. While simple CSS plugins like these can be helpful, I often feel like we are over-engineering our web forms. I’m certainly guilty of it.</p>


@@ 191,14 191,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/basic-gulp-build-for-sass/index.html => _site/basic-gulp-build-for-sass/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Basic gulp build for Sass</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2019-01-14T19:00:00-05:00">January 14, 2019</time></em></p>
        <hr>
        <p>Some designers might shy away from build tools when first starting out and I can understand the reasoning - task runners like <code class="language-plaintext highlighter-rouge">gulp</code> and <code class="language-plaintext highlighter-rouge">grunt</code> can seem daunting at first. So, I’ve decided to showcase my go-to setup for <code class="language-plaintext highlighter-rouge">gulp</code> and explain what the heck it does step-by-step.</p>


@@ 192,14 192,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/batch-webp-conversion/index.html => _site/batch-webp-conversion/index.html +6 -6
@@ 46,7 46,7 @@
        <h1>Batch Converting Images to webp with macOS Automator</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2021-10-15T00:00:00-04:00">October 15, 2021</time></em></p>
        <hr>
        <p>A great deal of my time working as a web/UI designer is spent exporting and/or converting images for software products and websites. Although a lot of modern applications can render image conversions at build time, a custom conversion is sometimes requested for an image to be set as <code class="language-plaintext highlighter-rouge">webp</code>.</p>


@@ 95,11 95,11 @@ done

<p>For visual reference, it should look something like this:</p>

<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/automator.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/automator.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/automator.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/automator.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/automator.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/automator.webp 1200w" sizes="100vw" alt="Automator quick action" width="2224" height="1984" crossorigin="anonymous" /></p>
<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/automator.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/automator.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/automator.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/automator.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/automator.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/automator.webp 1200w" sizes="100vw" alt="Automator quick action" width="2224" height="1984" crossorigin="anonymous" /></p>

<p>And when right-clicking an image file in the Finder window, it should now give you the option to convert:</p>

<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/automator-2.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/automator-2.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/automator-2.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/automator-2.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/automator-2.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/automator-2.webp 1200w" sizes="100vw" alt="Right click to convert to webp" width="1982" height="1158" crossorigin="anonymous" /></p>
<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/automator-2.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/automator-2.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/automator-2.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/automator-2.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/automator-2.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/automator-2.webp 1200w" sizes="100vw" alt="Right click to convert to webp" width="1982" height="1158" crossorigin="anonymous" /></p>

<h2 id="making-edits-to-your-script">Making edits to your script</h2>



@@ 130,14 130,14 @@ done
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/being-efficient/index.html => _site/being-efficient/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Being More Efficient as a Designer & Developer</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2019-08-27T20:00:00-04:00">August 27, 2019</time></em></p>
        <hr>
        <p><em>I recently began working on a small side project</em> (a marketing site / blog for an upcoming UX book I’m writing, but I have nothing to promote yet - sorry) and found myself circling around different static site generators (SSG) in the initial design concepts. The thought of learning an entirely new blogging platform was inspiring and seemed like a good excuse to expand my skillset.</p>


@@ 163,14 163,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/better-box-shadows/index.html => _site/better-box-shadows/index.html +33 -26
@@ 46,7 46,7 @@
        <h1>Better Box Shadows</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2019-01-07T19:00:00-05:00">January 7, 2019</time></em></p>
        <hr>
        <style>


@@ 129,30 129,37 @@
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<p>Now we make our inner child element <code class="language-plaintext highlighter-rouge">absolute</code> and set it’s <code class="language-plaintext highlighter-rouge">height</code> and <code class="language-plaintext highlighter-rouge">width</code> 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 <code class="language-plaintext highlighter-rouge">z-index: -1</code>.</p>
<p>Now we make our inner child element <code class="language-plaintext highlighter-rouge">absolute</code> and set it’s <code class="language-plaintext highlighter-rouge">height</code> and <code class="language-plaintext highlighter-rouge">width</code> dynamically to be slightly smaller than it’s parent (percentages work best for this).</p>

<p>Remember to set this child element behind it’s parent by adding <code class="language-plaintext highlighter-rouge">z-index: -1</code>.</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.box-container {
  /* No box-shadow needed on this element anymore */
  /* Styles to make it less ugly */
  background: white;
  border-radius: 10px;
  border: 1px solid #eee;
  height: 200px;
  padding: 10px;
  position: relative;
  width: 250px;
}
</code></pre></div></div>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.box-container</span> <span class="p">{</span>
  <span class="c">/* No box-shadow needed on this element anymore */</span>
  <span class="c">/* Styles to make it less ugly */</span>
  <span class="nl">background</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
  <span class="nl">border-radius</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
  <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#eee</span><span class="p">;</span>
  <span class="nl">height</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
  <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
  <span class="nl">width</span><span class="p">:</span> <span class="m">250px</span><span class="p">;</span>
<span class="p">}</span>
<h2 id="inner-containers">Inner Containers</h2>

<span class="nc">.box-container-inner</span> <span class="p">{</span>
  <span class="nl">bottom</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="c">/* The box-shadow is added here now */</span>
  <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">4px</span> <span class="m">12px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.3</span><span class="p">);</span>
  <span class="nl">height</span><span class="p">:</span> <span class="m">94%</span><span class="p">;</span>
  <span class="nl">left</span><span class="p">:</span> <span class="m">3%</span><span class="p">;</span>
  <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
  <span class="nl">width</span><span class="p">:</span> <span class="m">94%</span><span class="p">;</span>
  <span class="nl">z-index</span><span class="p">:</span> <span class="m">-1</span><span class="p">;</span>
<span class="p">}</span>
<p>We also need to target the <code class="language-plaintext highlighter-rouge">box-container-inner</code> element set inside the current parent to reflect our custom shadow styling:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.box-container-inner {
  bottom: 0;
  /* The box-shadow is added here now */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  height: 94%;
  left: 3%;
  position: absolute;
  width: 94%;
  z-index: -1;
}
</code></pre></div></div>

<p>Which will make the drop-shadow render with a little more realistic depth:</p>


@@ 223,14 230,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/bidirectional-scrolling/index.html => _site/bidirectional-scrolling/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Bidirectional Scrolling: Why Not Both?</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2020-11-09T00:00:00-05:00">November 9, 2020</time></em></p>
        <hr>
        <p><em>I recently came across Adam Silver’s post <a href="https://adamsilver.io/articles/bidirectional-scrolling-whats-not-to-like/">about the merits and pitfalls of bidirectional scrolling</a></em> and found myself conflicted with the design arguments put forth in the article. It’s a very good article overall, and I suggest giving it a read before digging deeper into my post here.</p>


@@ 121,14 121,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/books/index.html => _site/books/index.html +3 -3
@@ 141,14 141,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/browser-history-sucks/index.html => _site/browser-history-sucks/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Browser History Sucks</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2019-04-19T20:00:00-04:00">April 19, 2019</time></em></p>
        <hr>
        <p><em>Have you ever needed to step back through your browser history</em> to find a particular site or product? Do you remember that experience being good? Most likely not.</p>


@@ 150,14 150,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/character-unit/index.html => _site/character-unit/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>CSS Character Unit</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2019-04-22T20:00:00-04:00">April 22, 2019</time></em></p>
        <hr>
        <p><em>When it comes to proper readability with large portions of text</em>, the golden standard is to have no more than <a href="http://webtypography.net/2.1.2">75 characters per line</a>. This is easy to achieve in the world of print but on the responsive, ever-changing web - statically defined typography becomes a little more difficult.</p>


@@ 108,14 108,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/chasing-performance/index.html => _site/chasing-performance/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Chasing performance</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2017-11-19T19:00:00-05:00">November 19, 2017</time></em></p>
        <hr>
        <h2 id="update">Update</h2>


@@ 314,14 314,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/cheap-portable-pi/index.html => _site/cheap-portable-pi/index.html +7 -7
@@ 46,7 46,7 @@
        <h1>Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2020-09-16T00:00:00-04:00">September 16, 2020</time></em></p>
        <hr>
        <p><em>I recently came across <a href="https://n-o-d-e.net/zeroterminal3.html">the incredibly cool design</a> for an “ultimate Raspberry Pi computer”</em> by NODE and was inspired to create my own “portable” Pi device. Although, with my concept, I decided to set a few restrictions on the build:</p>


@@ 64,9 64,9 @@

<p>With these constraints put in place, I built my very own Raspberry Pi Zero “hacker” terminal. You can see the finished product below:</p>

<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/portable-pi-1.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/portable-pi-1.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/portable-pi-1.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/portable-pi-1.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/portable-pi-1.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/portable-pi-1.webp 1200w" sizes="100vw" alt="Portable Pi Front" width="2448" height="3264" crossorigin="anonymous" /></p>
<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/portable-pi-1.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/portable-pi-1.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/portable-pi-1.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/portable-pi-1.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/portable-pi-1.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/portable-pi-1.webp 1200w" sizes="100vw" alt="Portable Pi Front" width="2448" height="3264" crossorigin="anonymous" /></p>

<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/portable-pi-2.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/portable-pi-2.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/portable-pi-2.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/portable-pi-2.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/portable-pi-2.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/portable-pi-2.webp 1200w" sizes="100vw" alt="Portable Pi Back" width="2448" height="3264" crossorigin="anonymous" /></p>
<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/portable-pi-2.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/portable-pi-2.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/portable-pi-2.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/portable-pi-2.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/portable-pi-2.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/portable-pi-2.webp 1200w" sizes="100vw" alt="Portable Pi Back" width="2448" height="3264" crossorigin="anonymous" /></p>

<p>I’m pretty happy with the final outcome and best of all - you can easily recreate this yourself with little-to-no effort!</p>



@@ 201,7 201,7 @@ network={
<ol>
  <li>Run the command <code class="language-plaintext highlighter-rouge">sudo raspi-config</code></li>
  <li>Select “Change User Password” from the menu and change the password 
  <img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/raspi-config.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/raspi-config.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/raspi-config.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/raspi-config.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/raspi-config.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_984/https://uglyduck.ca/public/images/raspi-config.webp 984w" sizes="100vw" alt="Raspberry Config" width="984" height="321" crossorigin="anonymous" /></li>
  <img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/raspi-config.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/raspi-config.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/raspi-config.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/raspi-config.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/raspi-config.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_984/http://localhost:4000/public/images/raspi-config.webp 984w" sizes="100vw" alt="Raspberry Config" width="984" height="321" crossorigin="anonymous" /></li>
  <li>After that, select “Network Options” and change your device name
    <ul>
      <li>This will avoid any conflicts of connecting to newer RPi devices down the line</li>


@@ 268,14 268,14 @@ sudo ./LCD35_v
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/chromebook-web-development/index.html => _site/chromebook-web-development/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Web Development on a $200 Chromebook</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2020-01-07T00:00:00-05:00">January 7, 2020</time></em></p>
        <hr>
        <p><em>This blog post was written, edited and tested locally</em> on a cheap $200 Chromebook. The article draft was composed in Sublime Text. Jekyll (the SSG this website uses) was generated via the Linux Beta Terminal running alongside Chrome OS. It was then pushed to the Github repo from the same Terminal and published automatically to Netlify. But more on that later.</p>


@@ 121,14 121,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/css-js-mistake/index.html => _site/css-js-mistake/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>A Reality Where CSS and JavaScript Don't Exist</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2021-11-03T00:00:00-04:00">November 3, 2021</time></em></p>
        <hr>
        <p><em>This is my personal opinion. Please leave your pitchforks at the door…</em></p>


@@ 127,14 127,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/css-slope-graphs/index.html => _site/css-slope-graphs/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>CSS Slope Graphs</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2021-06-07T00:00:00-04:00">June 7, 2021</time></em></p>
        <hr>
        <p><em>I am a huge sucker for simplistic and beautifully designed visual data on the web</em>. Most data tends to be graphed via line or bar systems - which is fine - but I think slope graphs are highly underrated. Let’s change that, shall we?</p>


@@ 299,14 299,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/css-variables/index.html => _site/css-variables/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>CSS variables</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2018-03-23T20:00:00-04:00">March 23, 2018</time></em></p>
        <hr>
        <p>The CSS language is becoming even more awesome and powerful everyday. In this quick article I’d like to focus specifically on the “new” CSS variable function that you can start using in your projects <em>right now</em>.</p>


@@ 109,14 109,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/css-video-backgrounds/index.html => _site/css-video-backgrounds/index.html +6 -6
@@ 7,7 7,7 @@

  <title>
    
      CSS video backgrounds &middot; Ugly Duck
      CSS Video Backgrounds &middot; Ugly Duck
    
  </title>
  <meta name="description" content="Learn how to add video files as background images in Safari">


@@ 43,10 43,10 @@

    <main id="main" role="main">
      <header>
        <h1>CSS video backgrounds</h1>
        <h1>CSS Video Backgrounds</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2018-04-15T20:00:00-04:00">April 15, 2018</time></em></p>
        <hr>
        <p>With the release of Safari 11.1 on macOS and Safari on iOS 11.3, developers now have the ability to support background videos (mp4 support only - at the time of this article) with pure CSS.</p>


@@ 93,14 93,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/current-color/index.html => _site/current-color/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>CSS Value: currentColor</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2019-04-12T20:00:00-04:00">April 12, 2019</time></em></p>
        <hr>
        <p><em>There are a large number of nuanced and mostly unheard of</em> CSS value types, but today we are going to focus on <code class="language-plaintext highlighter-rouge">currentColor</code>. So what is the <code class="language-plaintext highlighter-rouge">currentColor</code> value type anyway?</p>


@@ 106,14 106,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/cut-your-forms-in-half/index.html => _site/cut-your-forms-in-half/index.html +5 -5
@@ 46,7 46,7 @@
        <h1>Cut Your Forms in Half</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2019-05-08T20:00:00-04:00">May 8, 2019</time></em></p>
        <hr>
        <p><em>Building web forms can sometimes feel like a boring or daunting task</em>. Don’t pass this dread on to your users - rip out as many of your form fields as possible.</p>


@@ 63,7 63,7 @@

<p>Let’s use a real-world form off the <a href="https://www.greatwestlife.com">Great West Life Insurance</a> website as an example (left is original, right is updated):</p>

<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/cut-forms.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/cut-forms.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/cut-forms.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/cut-forms.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/cut-forms.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/cut-forms.webp 1200w" sizes="100vw" alt="Great West Life form update" width="1623" height="2881" crossorigin="anonymous" /></p>
<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/cut-forms.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/cut-forms.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/cut-forms.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/cut-forms.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/cut-forms.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/cut-forms.webp 1200w" sizes="100vw" alt="Great West Life form update" width="1623" height="2881" crossorigin="anonymous" /></p>

<h3 id="breaking-things-down">Breaking things down</h3>



@@ 120,14 120,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/death-of-personality/index.html => _site/death-of-personality/index.html +18 -39
@@ 46,12 46,12 @@
        <h1>The Death of Personality</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2017-10-31T20:00:00-04:00">October 31, 2017</time></em></p>
        <hr>
        <p class="lead">On September 18, 2013 truly original product design (everything from icon and app design to UI and experience interactions) began it's fast decline into the abyss with the release of Apple's iOS 7 update. It was called *revolutionary*. It was seen as a 'new age' of design. I think it was a big mistake.</p>
        <p class="lead">On September 18, 2013 truly original product design (everything from icon and app design to UI and experience interactions) began it's fast decline into the abyss with the release of Apple's iOS 7 update. It was called revolutionary. It was seen as a 'new age' of design. I think it was a big mistake.</p>

<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_700/https://uglyduck.ca/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp 700w" sizes="100vw" alt="Flat Design Tombstone" width="700" height="500" crossorigin="anonymous" /></p>
<p><img src="/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp" alt="Flat design tombstone" /></p>

<h3 id="stepping-backwards">Stepping backwards</h3>



@@ 65,11 65,8 @@
<p>Do you remember Instagram’s original app icon and UI? Do you remember how everyone initially praised it? Show those old designs to the same designers who loved it only a few years ago, and they will now laugh at how “bad” it is.</p>

<figure>
    <img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_800/https://uglyduck.ca/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp 800w" sizes="100vw" alt="Flat Design Instagram" width="800" height="600" crossorigin="anonymous" />
    <span class="marginnote">They completely butchered the contrast and initial readability to appease the 'flat' trend style. The personality died.</span>
    <img src="/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp" alt="Instagram flat design" />
    <figcaption>They completely butchered the contrast and initial readability to appease the 'flat' trend style. The personality died.</figcaption>
</figure>

<p>Unfortunately the same can be said for Apple’s system icons across both iOS and macOS.</p>


@@ 77,11 74,8 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_800/htt
<p>I believe Apple took the concept of a ‘consistent’ design system across their iconography too literally. All the system icons should compliment one another, but they shouldn’t lose their own individual look and feel.</p>

<figure>
    <img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/flat-design-icons_vubivd_c_scale,w_800.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/flat-design-icons_vubivd_c_scale,w_800.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/flat-design-icons_vubivd_c_scale,w_800.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/flat-design-icons_vubivd_c_scale,w_800.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_800/https://uglyduck.ca/public/images/flat-design-icons_vubivd_c_scale,w_800.webp 800w" sizes="100vw" alt="iOS Icon Comparison" width="800" height="600" crossorigin="anonymous" />
    <span class="marginnote">Look at the depth and thought put into the original iOS icons. The "newer" icon designs look like lazy and uninspired wire-frames.</span>
    <img src="/public/images/flat-design-icons_vubivd_c_scale,w_800.webp" alt="iOS icon comparison" />
    <figcaption>Look at the depth and thought put into the original iOS icons. The "newer" icon designs look like lazy and uninspired wire-frames.</figcaption>
</figure>

<h3 id="lackluster-ui">Lackluster UI</h3>


@@ 89,12 83,8 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_800/htt
<p>The once inspiring and hierarchically consistent interface of both iOS and macOS was also quickly swatted away. In it’s place we as users saw the removal of depth, initial visual cues as to what was interactive and what was static, and sadly even the overall color was muted.</p>

<figure>
    <img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp 1200w" sizes="100vw" alt="iOS UI Comparison" width="1280" height="960" crossorigin="anonymous" />
    <span class="marginnote">More ugly wire-frame skeleton design compared to it's original counterpart. Where is the call to interact with any of these elements? Where is the hierarchy?</span>
    <img src="/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp" alt="iOS UI comparison" />
    <figcaption>More ugly wire-frame skeleton design compared to it's original counterpart. Where is the call to interact with any of these elements? Where is the hierarchy?</figcaption>
</figure>

<h3 id="impact-on-the-web">Impact on the web</h3>


@@ 102,12 92,8 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht
<p>This may not have been a bad thing if it was self-contained to Apple itself. The problem is that Apple has such a huge influence on the design industry - although that is starting to diminish, due to disasters like the iPhone X - that everyone starts to mimic and copy their style. This includes designers of sites and progressive web apps.</p>

<figure>
    <img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp 1200w" sizes="100vw" alt="Buttons Comparison" width="1400" height="1050" crossorigin="anonymous" />
    <span class="marginnote">Comparison of button states. Which states are more instantly recognizable?</span>
    <img src="/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp" alt="Buttons comparison" />
    <figcaption>Comparison of button states. Which states are more instantly recognizable?</figcaption>
</figure>

<p>With the evolution of websites morphing into progressive web apps, designers have felt the need to start implementing this bland style for their design systems.</p>


@@ 127,12 113,8 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht
</ul>

<figure>
    <img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp 1200w" sizes="100vw" alt="Toggles Comparison" width="1400" height="1050" crossorigin="anonymous" />
    <span class="marginnote">The minimal / flat toggles look like unfinished prototypes.</span>
    <img src="/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp" alt="Toggles comparison" />
    <figcaption>The minimal / flat toggles look like unfinished prototypes.</figcaption>
</figure>

<h3 id="breaking-free-of-the-modern-era">Breaking free of the ‘modern era’</h3>


@@ 144,11 126,8 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht
<p>This is where visual design shines. Icon designs like Cardhop’s are what allow individual applications to stand out in the dock or mobile home-screen among all the others. So how is that <i>not</i> UX design?</p>

<figure>
    <img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_800/https://uglyduck.ca/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp 800w" sizes="100vw" alt="Cardhop App Icon" width="800" height="560" crossorigin="anonymous" />
    <span class="marginnote">The gorgeous Cardhop app icon by David Lanham.</span>
    <img src="/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp" alt="Cardhop app icon" />
    <figcaption>The gorgeous Cardhop app icon by David Lanham.</figcaption>
</figure>

<p>The current trendy thought process from designers that “visual design doesn’t involve UX design” is garbage. Neither are mutually exclusive and I think anyone who believes so is being incredibly short-sighted.</p>


@@ 178,14 157,14 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_800/htt
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/default-html-style-updates/index.html => _site/default-html-style-updates/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Modern Improvements for Default Browser Styles</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2021-11-09T00:00:00-05:00">November 9, 2021</time></em></p>
        <hr>
        <p>This website <em>almost</em> exclusively uses the browser’s (whichever one that might be) default styling to render it’s HTML. I firmly believe, and have <a href="/css-js-mistake/">stated in a previous post</a>, that the default HTML styling across all browsers is a thing of beauty. “Consistent and boring” is how I tend to refer to default browser styles - and I mean that in a <em>good way</em>.</p>


@@ 168,14 168,14 @@ pre {
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/design-review-dropbox/index.html => _site/design-review-dropbox/index.html +15 -29
@@ 7,7 7,7 @@

  <title>
    
      Unsolicited design review - Dropbox &middot; Ugly Duck
      Unsolicited Design Review - Dropbox &middot; Ugly Duck
    
  </title>
  <meta name="description" content="A review of the awful Dropbox redesign">


@@ 43,15 43,15 @@

    <main id="main" role="main">
      <header>
        <h1>Unsolicited design review - Dropbox</h1>
        <h1>Unsolicited Design Review - Dropbox</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2017-10-09T20:00:00-04:00">October 9, 2017</time></em></p>
        <hr>
        <p>Earlier last week the design team at Dropbox unveiled their new branding / design system for the company as a whole. If you haven’t seen the updated design yet, you can do so here: <a href="https://dropbox.design/">dropbox.design</a> (Take your time, I can wait).</p>

<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp 1200w" sizes="100vw" alt="Dropbox" width="1400" height="788" crossorigin="anonymous" /></p>
<p><img src="/public/images/dropbox-logo_djnecj_c_scale,w_1400.webp" alt="Dropbox Logo" /></p>

<p>I won’t mince words when I say I believe this is a huge step backwards for their brand. Not only is it uninspired and broken, but it also shows how our industry is plagued with a need to redesign things just for the sake of redesigning them.</p>



@@ 132,12 132,8 @@
</blockquote>

<figure>
    <img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1122/https://uglyduck.ca/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp 1122w" sizes="100vw" alt="Dropbox Fonts" width="1122" height="1128" crossorigin="anonymous" />
    <span class="marginnote">Not a single one of these typeface styles is initially readable</span>
    <img src="/public/images/dropbox-fonts_vthivw_c_scale,w_1122.webp" alt="Dropbox Fonts" />
    <figcaption>Not a single one of these typeface styles is initially readable</figcaption>
</figure>

<p>The typeface they have chosen looks terrible at any view-port size and readability takes a backseat. I can’t help but feel this falls into the “let’s be trendy” category and ends up sacrificing almost all good usability practices for gimmicky type.</p>


@@ 149,23 145,15 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1122/ht
<p>Irony at it’s finest. “Our users tell us that they hate being distracted and overwhelmed, so we’ve decided to use headache inducing color palettes, crude illustrations, a barely legible typeface, and some of the most visually loud photography throughout our system”. I hate coming off as mean-spirited - but this is some elaborate joke, right?</p>

<figure>
    <img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp 1200w" sizes="100vw" alt="Dropbox Color Logos" width="1400" height="756" crossorigin="anonymous" />
    <span class="marginnote">Oh Dropbox...my eyes!</span>
    <img src="/public/images/dropbox-logos-color_fcogaj_c_scale,w_1400.webp" alt="Dropbox Color Logos" />
    <figcaption>Oh Dropbox...my eyes!</figcaption>
</figure>

<p>After running it through a color contrast accessibility checker:</p>

<figure>
    <img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp 1200w" sizes="100vw" alt="Dropbox Contrast" width="1400" height="821" crossorigin="anonymous" />
    <span class="marginnote">Multiple accessibility failures</span>
    <img src="/public/images/dropbox-contrast_plkfxb_c_scale,w_1400.webp" alt="Dropbox Contrast" />
    <figcaption>Multiple accessibility failures</figcaption>
</figure>

<p>Next we have the child-like ‘scribble’ illustrations. Now don’t get me wrong, I love seeing different illustration styles and I actively use ‘sketch / scribble’ artwork myself, but I don’t believe this is the best fit for a brand like Dropbox. These cartoon visuals conflict with the business enterprise service Dropbox should be trying to convey.</p>


@@ 173,10 161,8 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht
<p>Another issue with these illustrations is their usage. Look at the image below and ask yourself if you would correlate it with an error page if no accompanying text was present.</p>

<figure>
    <img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/dropbox-404_bovayg_c_scale,w_758.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/dropbox-404_bovayg_c_scale,w_758.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/dropbox-404_bovayg_c_scale,w_758.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_758/https://uglyduck.ca/public/images/dropbox-404_bovayg_c_scale,w_758.webp 758w" sizes="100vw" alt="Dropbox Error Illustration" width="758" height="701" crossorigin="anonymous" />
    <span class="marginnote">What does this have to do with a 404 error page?</span>
    <img src="/public/images/dropbox-404_bovayg_c_scale,w_758.webp" alt="Dropbox error page imagery" />
    <figcaption>What does this have to do with a 404 error page?</figcaption>
</figure>

<h2 id="closing-thoughts">Closing Thoughts</h2>


@@ 212,14 198,14 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_758/htt
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/designers-need-thicker-skin/index.html => _site/designers-need-thicker-skin/index.html +6 -6
@@ 46,7 46,7 @@
        <h1>Designers need thicker skin</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2017-07-09T20:00:00-04:00">July 9, 2017</time></em></p>
        <hr>
        <p>I’m not normally one to comment or even really care about “drama” within our design industry. Opinions are just that and should just be consumed at face value. But this week I was moderately annoyed with a subset of designers in design-land.</p>


@@ 56,8 56,8 @@
<p>Designer/design critic Eli Schiff tweeted his thoughts about the newly released promo video from Framer showcasing their new gradient feature. See the initial tweet below:</p>

<figure>
    <img src="https://cdn-images-1.medium.com/max/1600/0*hs-nqVLpZsPht0C6.webp" alt="Eli's Tweet" />
    <span class="marginnote">Eli Schiff just telling it how it is.</span>
    <img src="/public/images/eli-schiff-twitter.webp" alt="Eli's Tweet" />
    <figcaption>Eli Schiff just telling it how it is.</figcaption>
</figure>

<p>Let me begin by saying my views on this comment: I don’t care. I honestly don’t feel strongly one way or the other about them making a video promo for gradients. Could it have just been a simple text tweet? Sure. Does it really matter that they decided to make a video for it? Not at all.</p>


@@ 93,14 93,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/disabling-comments-in-wordpress/index.html => _site/disabling-comments-in-wordpress/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Disabling Comments in WordPress</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2020-12-28T00:00:00-05:00">December 28, 2020</time></em></p>
        <hr>
        <p><em>I seem to come across a decent amount of clients</em> and users online that have a difficult time knowing how to disable comments for both future <em>and</em> previous blog posts. It isn’t the easiest for both use cases, so let’s break it down.</p>


@@ 96,14 96,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/dynamic-checkboxes/index.html => _site/dynamic-checkboxes/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Dynamic Checkboxes</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2019-07-29T20:00:00-04:00">July 29, 2019</time></em></p>
        <hr>
        <p><em>Checkboxes are used quite frequently on forms across the web</em>. Whether you’re selecting a pricing plan during a site’s sign-up process or just simply selecting to opt-out from a newsletter, you have most likely interacted with some form of checkbox element.</p>


@@ 490,14 490,14 @@ var inputs = document.getElementsByClassName('checkbox-btn')
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/easy-custom-radio-inputs/index.html => _site/easy-custom-radio-inputs/index.html +13 -139
@@ 46,109 46,21 @@
        <h1>Easy Custom Radio Inputs</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2019-01-20T19:00:00-05:00">January 20, 2019</time></em></p>
        <hr>
        <style>
    .radio-container {
        margin: 0 auto;
        max-width: 400px;
        width: 100%;
    }
    .radio-label {
        background: white;
        border: 1px solid #eee;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        color: #2d2d2d;
        cursor: pointer;
        display: inline-block;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-weight: 600;
        margin: 0 auto 10px;
        padding: 20px 20px 20px 65px;
        position: relative;
        transition: .3s ease all;
        width: 100%;
    }
    .radio-label:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    }
    .radio-label:before {
        background: #eee;
        border-radius: 50%;
        content:'';
        height: 30px;
        left: 20px;
        position: absolute;
        top: calc(50% - 15px);
        transition: .3s ease background-color;
        width: 30px;
    }
    .radio-label span {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }
    .radio-btn {
        position: absolute;
        visibility: hidden;
    }
    .radio-btn:checked + .radio-label {
        background: #ECF5FF;
        border-color: #4A90E2;
    }
    .radio-btn:checked + .radio-label:before {
        background-color: #4A90E2;
        background-image:  url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 15px;
    }
    .radio-btn.positive:checked + .radio-label {
        background: #EAFFF6;
        border-color: #32B67A;
    }
    .radio-btn.positive:checked + .radio-label:before {
        background-color: #32B67A;
    }
    .radio-btn.neutral:checked + .radio-label:before {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAtMTUgMzAgOC41NzE0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PCEtLUdlbmVyYXRlZCBieSBJSlNWRyAoaHR0cHM6Ly9naXRodWIuY29tL2ljb25qYXIvSUpTVkcpLS0+PHBhdGggZD0iTTMwLC0xMi4zMjE0djMuMjE0MjljMCwwLjczNjYwNyAtMC4yNjIyNzcsMS4zNjcxOSAtMC43ODY4MywxLjg5MTc0Yy0wLjUyNDU1NCwwLjUyNDU1NCAtMS4xNTUxMywwLjc4NjgzMSAtMS44OTE3NCwwLjc4NjgzMWgtMjQuNjQyOWMtMC43MzY2MDcsMCAtMS4zNjcxOSwtMC4yNjIyNzcgLTEuODkxNzQsLTAuNzg2ODMxYy0wLjUyNDU1MywtMC41MjQ1NTMgLTAuNzg2ODMsLTEuMTU1MTMgLTAuNzg2ODMsLTEuODkxNzR2LTMuMjE0MjljMCwtMC43MzY2MDcgMC4yNjIyNzcsLTEuMzY3MTkgMC43ODY4MywtMS44OTE3NGMwLjUyNDU1NCwtMC41MjQ1NTMgMS4xNTUxMywtMC43ODY4MyAxLjg5MTc0LC0wLjc4NjgzaDI0LjY0MjljMC43MzY2MDcsMCAxLjM2NzE5LDAuMjYyMjc3IDEuODkxNzQsMC43ODY4M2MwLjUyNDU1MywwLjUyNDU1NCAwLjc4NjgzLDEuMTU1MTMgMC43ODY4MywxLjg5MTc0WiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg==');
    }
    .radio-btn.negative:checked + .radio-label {
        background: #FFF2F2;
        border-color: #E75153;
    }
    .radio-btn.negative:checked + .radio-label:before {
        background-color: #E75153;
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIxLjg1MTg1IC0zOS42OTcgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjwhLS1HZW5lcmF0ZWQgYnkgSUpTVkcgKGh0dHBzOi8vZ2l0aHViLmNvbS9pY29uamFyL0lKU1ZHKS0tPjxwYXRoIGQ9Ik0yMS43Mjk5LC0yMy40NzFjMCwwLjQ0NjQyOCAtMC4xNTYyNSwwLjgyNTg5MyAtMC40Njg3NSwxLjEzODM5bC0yLjI3Njc5LDIuMjc2NzljLTAuMzEyNSwwLjMxMjUgLTAuNjkxOTY0LDAuNDY4NzUgLTEuMTM4MzksMC40Njg3NWMtMC40NDY0MjgsMCAtMC44MjU4OTMsLTAuMTU2MjUgLTEuMTM4MzksLTAuNDY4NzVsLTQuOTIxODcsLTQuOTIxODhsLTQuOTIxODgsNC45MjE4OGMtMC4zMTI1LDAuMzEyNSAtMC42OTE5NjQsMC40Njg3NSAtMS4xMzgzOSwwLjQ2ODc1Yy0wLjQ0NjQyOCwwIC0wLjgyNTg5MiwtMC4xNTYyNSAtMS4xMzgzOSwtMC40Njg3NWwtMi4yNzY3OSwtMi4yNzY3OWMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY1IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI5IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsNC45MjE4OCwtNC45MjE4OGwtNC45MjE4OCwtNC45MjE4OGMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY0IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI4IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsMi4yNzY3OSwtMi4yNzY3OGMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI5LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsNC45MjE4OCw0LjkyMTg4bDQuOTIxODcsLTQuOTIxODhjMC4zMTI1LC0wLjMxMjUgMC42OTE5NjUsLTAuNDY4NzUgMS4xMzgzOSwtMC40Njg3NWMwLjQ0NjQyOSwwIDAuODI1ODkzLDAuMTU2MjUgMS4xMzgzOSwwLjQ2ODc1bDIuMjc2NzksMi4yNzY3OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjUgMC40Njg3NSwxLjEzODM5YzAsMC40NDY0MjkgLTAuMTU2MjUsMC44MjU4OTMgLTAuNDY4NzUsMS4xMzgzOWwtNC45MjE4OCw0LjkyMTg4bDQuOTIxODgsNC45MjE4OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjQgMC40Njg3NSwxLjEzODM5WiIgdHJhbnNmb3JtPSJzY2FsZSgxLjAwNTYxKSIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg==');
    }
</style>

<p><em>Default radio inputs are notoriously horrible looking</em> and are something designers tend to over-think when trying to customize them. Let’s walk through how to create custom radio buttons with <em>pure CSS</em>, while still preserving performance and accessibility.</p>
        <p><em>Default radio inputs are notoriously horrible looking</em> and are something designers tend to over-think when trying to customize them. Let’s walk through how to create custom radio buttons with <em>pure CSS</em>, while still preserving performance and accessibility.</p>

<h2 id="the-final-product-embedded-demo">The final product (embedded demo)</h2>

<p>This is what we will be designing:</p>

<div class="message">
<div class="radio-container">
<input class="radio-btn" name="radio-collection" id="radio-1" type="radio" />
<label class="radio-label" for="radio-1"><span>I am very satisfied</span></label>

<input class="radio-btn" name="radio-collection" id="radio-2" type="radio" checked="" />
<label class="radio-label" for="radio-2"><span>I am satisfied</span></label>

<input class="radio-btn" name="radio-collection" id="radio-3" type="radio" />
<label class="radio-label" for="radio-3"><span>I am indifferent</span></label>

<input class="radio-btn" name="radio-collection" id="radio-4" type="radio" />
<label class="radio-label" for="radio-4"><span>I am unsatisfied</span></label>

<input class="radio-btn" name="radio-collection" id="radio-5" type="radio" />
<label class="radio-label" for="radio-5"><span>I am very unsatisfied</span></label>
</div>
</div>
<p class="codepen" data-height="622" data-default-tab="result" data-slug-hash="oNjwMyX" data-user="bradleytaunt" style="height: 622px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/bradleytaunt/pen/oNjwMyX">
  Custom Radio Inputs - Fancy (Pure CSS)</a> by Bradley Taunt (<a href="https://codepen.io/bradleytaunt">@bradleytaunt</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<hr />



@@ 196,27 108,6 @@
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"radio-label"</span> <span class="na">for=</span><span class="s">"radio-1"</span><span class="nt">&gt;&lt;span&gt;</span>I am very satisfied<span class="nt">&lt;/span&gt;&lt;/label&gt;</span>
</code></pre></div></div>

<h2 id="what-we-have-so-far-embedded-demo">What we have so far: (embedded demo)</h2>

<div class="message">
<div class="radio-container">
<input name="radio-collection-bad" id="radio-10" type="radio" />
<label for="radio-10"><span>I am very satisfied</span></label>

<input name="radio-collection-bad" id="radio-20" type="radio" />
<label for="radio-20"><span>I am satisfied</span></label>

<input name="radio-collection-bad" id="radio-30" type="radio" />
<label for="radio-30"><span>I am indifferent</span></label>

<input name="radio-collection-bad" id="radio-40" type="radio" />
<label for="radio-40"><span>I am unsatisfied</span></label>

<input name="radio-collection-bad" id="radio-50" type="radio" />
<label for="radio-50"><span>I am very unsatisfied</span></label>
</div>
</div>

<p>This is looking pretty terrible - but that’s nothing some good ol’ CSS can’t fix!</p>

<h2 id="the-flesh-of-our-radio-inputs-css">The flesh of our radio inputs (CSS)</h2>


@@ 272,6 163,8 @@
<span class="p">}</span>
</code></pre></div></div>

<h2 id="a-few-final-steps">A Few Final Steps</h2>

<p>The final step is adding the custom styling for when an <code class="language-plaintext highlighter-rouge">input</code> item is selected (<code class="language-plaintext highlighter-rouge">:checked</code>).</p>

<p>You will notice the use of a <code class="language-plaintext highlighter-rouge">base64</code> element for the custom checkmark - feel free to subsitute this for an actual image or none at all (this is just my personal design preference).</p>


@@ 349,25 242,6 @@

<p>Since this demo is based off a survey-type questionaire, wouldn’t it be interesting to give the different selectable options their own styling based on their context? Take a look at the further customized version below:</p>

<div class="message">
<div class="radio-container">
<input class="radio-btn positive" name="radio-collection-survey" id="radio-1-survey" type="radio" />
<label class="radio-label" for="radio-1-survey"><span>I am very satisfied</span></label>

<input class="radio-btn positive" name="radio-collection-survey" id="radio-2-survey" type="radio" />
<label class="radio-label" for="radio-2-survey"><span>I am satisfied</span></label>

<input class="radio-btn neutral" name="radio-collection-survey" id="radio-3-survey" type="radio" checked="" />
<label class="radio-label" for="radio-3-survey"><span>I am indifferent</span></label>

<input class="radio-btn negative" name="radio-collection-survey" id="radio-4-survey" type="radio" />
<label class="radio-label" for="radio-4-survey"><span>I am unsatisfied</span></label>

<input class="radio-btn negative" name="radio-collection-survey" id="radio-5-survey" type="radio" />
<label class="radio-label" for="radio-5-survey"><span>I am very unsatisfied</span></label>
</div>
</div>

<p>We can do so by adding <code class="language-plaintext highlighter-rouge">positive</code>, <code class="language-plaintext highlighter-rouge">neutral</code> and <code class="language-plaintext highlighter-rouge">negative</code> class names to the radio inputs with their own respective properties:</p>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.radio-btn.positive</span><span class="nd">:checked</span> <span class="o">+</span> <span class="nc">.radio-label</span> <span class="p">{</span>


@@ 417,14 291,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/easy-toggle-switches/index.html => _site/easy-toggle-switches/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Easy Toggle Switches</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2019-02-17T19:00:00-05:00">February 17, 2019</time></em></p>
        <hr>
        <style>


@@ 395,14 395,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/et-jekyll-theme/index.html => _site/et-jekyll-theme/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>ET-Jekyll theme</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2018-01-13T19:00:00-05:00">January 13, 2018</time></em></p>
        <hr>
        <p>ET-Jekyll theme is based off of <a href="http://www.daveliepmann.com">Dave Liepmann’s</a> awesome <a href="https://edwardtufte.github.io/tufte-css/">Tufte CSS</a> - which takes it’s style and inspiration from the wonderful book and handout designs of <a href="https://www.edwardtufte.com/tufte/">Edward Tufte</a>.</p>


@@ 80,14 80,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/fake-3d-elements-with-css/index.html => _site/fake-3d-elements-with-css/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Faking 3D Elements with CSS</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2020-04-29T13:56:54-04:00">April 29, 2020</time></em></p>
        <hr>
        <p><em>Although not always practical, creating the illusion</em> that some of your web elements are “3D” can be a fun experiment. I set out to see if I was able to create such an illusion with only 2 HTML elements and as little CSS as possible.</p>


@@ 152,14 152,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/fathom-analytics-netlify/index.html => _site/fathom-analytics-netlify/index.html +4 -4
@@ 46,7 46,7 @@
        <h1>Setting Up Fathom Analytics with Netlify</h1>
      </header>
      <hr>
      <article>
      <article class="">
        <p><em>Posted on <time datetime="2021-01-19T00:00:00-05:00">January 19, 2021</time></em></p>
        <hr>
        <p><em>It’s no secret that I’m passionate about open source software</em>, but I’m also extremely adamant about protecting the privacy of all users across the web. So when I decided to implement analytics on my own personal website, I ended up choosing <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> (<em>get a $10 credit using that link!</em>).</p>


@@ 141,14 141,14 @@
</nav>
<hr>

    <p>
    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </p>
    </small>
    <hr>
    <p>The most recent revision of this page was made on <b>November 11, 2021</b></p>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>

M _site/feed.xml => _site/feed.xml +392 -819
@@ 2,10 2,10 @@
<feed xmlns="http://www.w3.org/2005/Atom">

 <title>Ugly Duck</title>
 <link href="https://uglyduck.ca/atom.xml" rel="self"/>
 <link href="https://uglyduck.ca/"/>
 <updated>2021-11-11T12:15:34-05:00</updated>
 <id>https://uglyduck.ca</id>
 <link href="http://localhost:4000/atom.xml" rel="self"/>
 <link href="http://localhost:4000/"/>
 <updated>2021-11-11T13:15:02-05:00</updated>
 <id>http://localhost:4000</id>
 <author>
   <name>Bradley Taunt</name>
   <email>hello@uglyduck.ca</email>


@@ 14,9 14,9 @@
 
 <entry>
   <title>Modern Improvements for Default Browser Styles</title>
   <link href="https://uglyduck.ca/default-html-style-updates/"/>
   <link href="http://localhost:4000/default-html-style-updates/"/>
   <updated>2021-11-09T00:00:00-05:00</updated>
   <id>https://uglyduck.ca/default-html-style-updates</id>
   <id>http://localhost:4000/default-html-style-updates</id>
   <content type="html">&lt;p&gt;This website &lt;em&gt;almost&lt;/em&gt; exclusively uses the browser’s (whichever one that might be) default styling to render it’s HTML. I firmly believe, and have &lt;a href=&quot;/css-js-mistake/&quot;&gt;stated in a previous post&lt;/a&gt;, that the default HTML styling across all browsers is a thing of beauty. “Consistent and boring” is how I tend to refer to default browser styles - and I mean that in a &lt;em&gt;good way&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;But that doesn’t mean some minor, modern improvements couldn’t be made…&lt;/p&gt;


@@ 117,9 117,9 @@ pre {
 
 <entry>
   <title>A Reality Where CSS and JavaScript Don't Exist</title>
   <link href="https://uglyduck.ca/css-js-mistake/"/>
   <link href="http://localhost:4000/css-js-mistake/"/>
   <updated>2021-11-03T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/css-js-mistake</id>
   <id>http://localhost:4000/css-js-mistake</id>
   <content type="html">&lt;p&gt;&lt;em&gt;This is my personal opinion. Please leave your pitchforks at the door…&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;I love CSS. I can spend hours deep diving into a website’s CSS system and never find myself getting bored. It’s pretty amazing to see the problems other designers are able to solve with just a little bit of custom styling and determination.&lt;/p&gt;


@@ 179,9 179,9 @@ pre {
 
 <entry>
   <title>Setting Up 1.1.1.1 for Families on a Pi-Hole</title>
   <link href="https://uglyduck.ca/pihole-cloudflare/"/>
   <link href="http://localhost:4000/pihole-cloudflare/"/>
   <updated>2021-10-28T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/pihole-cloudflare</id>
   <id>http://localhost:4000/pihole-cloudflare</id>
   <content type="html">&lt;p&gt;After seeing Cloudflare’s 1.1.1.1 for Families mentioned on the &lt;a href=&quot;https://news.ycombinator.com/item?id=29024195&quot;&gt;front page of HackerNews&lt;/a&gt;, I thought it might be helpful to show those currently using a &lt;a href=&quot;https://pi-hole.net&quot;&gt;pi-hole device&lt;/a&gt; how to include 1.1.1.1 alongside it.&lt;/p&gt;

&lt;h3 id=&quot;keeping-things-updated&quot;&gt;Keeping Things Updated&lt;/h3&gt;


@@ 223,9 223,9 @@ pre {
 
 <entry>
   <title>Batch Converting Images to webp with macOS Automator</title>
   <link href="https://uglyduck.ca/batch-webp-conversion/"/>
   <link href="http://localhost:4000/batch-webp-conversion/"/>
   <updated>2021-10-15T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/batch-webp-conversion</id>
   <id>http://localhost:4000/batch-webp-conversion</id>
   <content type="html">&lt;p&gt;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 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;webp&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;You &lt;em&gt;could&lt;/em&gt; 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? &lt;strong&gt;Let’s do just that!&lt;/strong&gt;&lt;/p&gt;


@@ 272,11 272,11 @@ done

&lt;p&gt;For visual reference, it should look something like this:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/automator.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/automator.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/automator.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/automator.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/automator.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/automator.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Automator quick action&quot; width=&quot;2224&quot; height=&quot;1984&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/automator.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/automator.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/automator.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/automator.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/automator.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/automator.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Automator quick action&quot; width=&quot;2224&quot; height=&quot;1984&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;

&lt;p&gt;And when right-clicking an image file in the Finder window, it should now give you the option to convert:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/automator-2.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/automator-2.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/automator-2.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/automator-2.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/automator-2.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/automator-2.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Right click to convert to webp&quot; width=&quot;1982&quot; height=&quot;1158&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/automator-2.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/automator-2.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/automator-2.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/automator-2.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/automator-2.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/automator-2.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Right click to convert to webp&quot; width=&quot;1982&quot; height=&quot;1158&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;making-edits-to-your-script&quot;&gt;Making edits to your script&lt;/h2&gt;



@@ 288,9 288,9 @@ done
 
 <entry>
   <title>Enabling Safari Extensions with the macOS Catalina Patcher</title>
   <link href="https://uglyduck.ca/safari-extensions-catalina-patcher/"/>
   <link href="http://localhost:4000/safari-extensions-catalina-patcher/"/>
   <updated>2021-09-23T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/safari-extensions-catalina-patcher</id>
   <id>http://localhost:4000/safari-extensions-catalina-patcher</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I have an old 2011 MacBook Air that is running the latest version&lt;/em&gt; of macOS Catalina thanks to the very wonderful &lt;a href=&quot;http://dosdude1.com/catalina/&quot;&gt;Catalina Patcher&lt;/a&gt; by dosdude1. This project has made it possible for me to run and test some of the latest software from Apple - namely Safari 15.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;


@@ 330,9 330,9 @@ done
 
 <entry>
   <title>Create a Performance-Focused WordPress Blog for $4/month</title>
   <link href="https://uglyduck.ca/performance-focused-wordpress-theme/"/>
   <link href="http://localhost:4000/performance-focused-wordpress-theme/"/>
   <updated>2021-09-08T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/performance-focused-wordpress-theme</id>
   <id>http://localhost:4000/performance-focused-wordpress-theme</id>
   <content type="html">&lt;p&gt;&lt;em&gt;With my recent switch back to WordPress&lt;/em&gt;, and having read Kev Quirk’s &lt;a href=&quot;https://kevq.uk/core-web-vitals-and-wordpress/&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;latest post about Core Web Vitals&lt;/a&gt;, 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 &lt;em&gt;static&lt;/em&gt; Jekyll-based version of this blog.&lt;/p&gt;

&lt;p&gt;And I’ve achieved this with barely any effort at all. All that’s needed is:&lt;/p&gt;


@@ 421,9 421,9 @@ done
 
 <entry>
   <title>Stuffing an SSD Inside the Raspberry Pi 400</title>
   <link href="https://uglyduck.ca/pi-400-internal-ssd/"/>
   <link href="http://localhost:4000/pi-400-internal-ssd/"/>
   <updated>2021-08-13T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/pi-400-internal-ssd</id>
   <id>http://localhost:4000/pi-400-internal-ssd</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I have successfully jammed an mSATA SSD into the main shell of my Raspberry Pi 400&lt;/em&gt;. It wasn’t as straightforward as I thought it would be - in fact, most &lt;em&gt;real&lt;/em&gt; hardware tinkerers will probably vomit in their mouths once they see how I achieved this…&lt;/p&gt;

&lt;p&gt;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!)&lt;/p&gt;


@@ 435,11 435,11 @@ done
&lt;p&gt;Below you can see the final look of my modded Raspberry Pi 400, which I have personally named the &lt;strong&gt;Raspberry Pi 400X&lt;/strong&gt;:&lt;/p&gt;

&lt;figure&gt;
    &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/pi-400-final.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/pi-400-final.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/pi-400-final.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/pi-400-final.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/pi-400-final.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/pi-400-final.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Pi 400 with internal SSD&quot; width=&quot;4032&quot; height=&quot;3024&quot; crossorigin=&quot;anonymous&quot; /&gt;
    &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/pi-400-final.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/pi-400-final.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/pi-400-final.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/pi-400-final.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/pi-400-final.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/pi-400-final.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Pi 400 with internal SSD&quot; width=&quot;4032&quot; height=&quot;3024&quot; crossorigin=&quot;anonymous&quot; /&gt;
    &lt;figcaption&gt;The finished Raspberry Pi 400X (&lt;a href=&quot;/public/images/pi-400-final.webp&quot;&gt;direct link to image&lt;/a&gt;)&lt;/figcaption&gt;
&lt;/figure&gt;



@@ 467,11 467,11 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht
&lt;p&gt;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:&lt;/p&gt;

&lt;figure&gt;
    &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/pi-heatsink.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/pi-heatsink.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/pi-heatsink.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/pi-heatsink.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/pi-heatsink.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/pi-heatsink.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;The cutout heatsink&quot; width=&quot;4032&quot; height=&quot;3024&quot; crossorigin=&quot;anonymous&quot; /&gt;
    &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/pi-heatsink.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/pi-heatsink.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/pi-heatsink.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/pi-heatsink.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/pi-heatsink.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/pi-heatsink.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;The cutout heatsink&quot; width=&quot;4032&quot; height=&quot;3024&quot; crossorigin=&quot;anonymous&quot; /&gt;
    &lt;figcaption&gt;I drew the outline of the enclosure on the metal first before cutting. (&lt;a href=&quot;/public/images/pi-heatsink.webp&quot;&gt;direct link to image&lt;/a&gt;)&lt;/figcaption&gt;
&lt;/figure&gt;



@@ 480,22 480,22 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht
&lt;p&gt;&lt;strong&gt;Important to note:&lt;/strong&gt; this will remove one of the screw slots needed to secure the heatsink into the board. Not a big deal if you ask me…&lt;/p&gt;

&lt;figure&gt;
    &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/pi-plastic-back.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/pi-plastic-back.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/pi-plastic-back.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/pi-plastic-back.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/pi-plastic-back.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/pi-plastic-back.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Plastic dremeled back&quot; width=&quot;4032&quot; height=&quot;3024&quot; crossorigin=&quot;anonymous&quot; /&gt;
    &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/pi-plastic-back.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/pi-plastic-back.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/pi-plastic-back.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/pi-plastic-back.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/pi-plastic-back.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/pi-plastic-back.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Plastic dremeled back&quot; width=&quot;4032&quot; height=&quot;3024&quot; crossorigin=&quot;anonymous&quot; /&gt;
    &lt;figcaption&gt;Here you can see my terrible sanding job on the far left plastic snap-lock (&lt;a href=&quot;/public/images/pi-plastic-back.webp&quot;&gt;direct link to image&lt;/a&gt;)&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;p&gt;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?)&lt;/p&gt;

&lt;figure&gt;
    &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/pi-outer-port.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/pi-outer-port.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/pi-outer-port.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/pi-outer-port.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/pi-outer-port.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/pi-outer-port.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Back of Pi opening&quot; width=&quot;2016&quot; height=&quot;1512&quot; crossorigin=&quot;anonymous&quot; /&gt;
    &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/pi-outer-port.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/pi-outer-port.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/pi-outer-port.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/pi-outer-port.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/pi-outer-port.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/pi-outer-port.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Back of Pi opening&quot; width=&quot;2016&quot; height=&quot;1512&quot; crossorigin=&quot;anonymous&quot; /&gt;
    &lt;figcaption&gt;Don't judge...I'm sure most people could do a cleaner job! (&lt;a href=&quot;/public/images/pi-outer-port.webp&quot;&gt;direct link to image&lt;/a&gt;)&lt;/figcaption&gt;
&lt;/figure&gt;



@@ 503,11 503,11 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht
, tape it down with some hideous electrical tape and close this bad boy back up!&lt;/p&gt;

&lt;figure&gt;
    &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/pi-internal-ssd.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/pi-internal-ssd.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/pi-internal-ssd.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/pi-internal-ssd.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/pi-internal-ssd.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/pi-internal-ssd.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;The internal SSD&quot; width=&quot;4032&quot; height=&quot;3024&quot; crossorigin=&quot;anonymous&quot; /&gt;
    &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/pi-internal-ssd.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/pi-internal-ssd.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/pi-internal-ssd.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/pi-internal-ssd.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/pi-internal-ssd.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/pi-internal-ssd.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;The internal SSD&quot; width=&quot;4032&quot; height=&quot;3024&quot; crossorigin=&quot;anonymous&quot; /&gt;
    &lt;figcaption&gt;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! (&lt;a href=&quot;/public/images/pi-internal-ssd.webp&quot;&gt;direct link to image&lt;/a&gt;)&lt;/figcaption&gt;
&lt;/figure&gt;



@@ 552,9 552,9 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht
 
 <entry>
   <title>Sharing The Things We Use</title>
   <link href="https://uglyduck.ca/sharing-the-things-we-use/"/>
   <link href="http://localhost:4000/sharing-the-things-we-use/"/>
   <updated>2021-07-24T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/sharing-the-things-we-use</id>
   <id>http://localhost:4000/sharing-the-things-we-use</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I always love stumbling across personal websites&lt;/em&gt; 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 &lt;em&gt;how&lt;/em&gt; they work.&lt;/p&gt;

&lt;p&gt;Since I realized how much I enjoy reading other people’s &lt;em&gt;uses&lt;/em&gt; 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.&lt;/p&gt;


@@ 567,9 567,9 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht
 
 <entry>
   <title>PS4 Download UI with Pure CSS</title>
   <link href="https://uglyduck.ca/ps4-download-ui/"/>
   <link href="http://localhost:4000/ps4-download-ui/"/>
   <updated>2021-06-20T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/ps4-download-ui</id>
   <id>http://localhost:4000/ps4-download-ui</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Overall, I’m fairly impressed with the user interface design&lt;/em&gt; 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.&lt;/p&gt;

&lt;p&gt;One of the key UI items I’ve always been a fan of is the download progress view under the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Notifications&lt;/code&gt; settings. So I figured I’d try my hand at recreating this with pure CSS. Here is the final result:&lt;/p&gt;


@@ 715,9 715,9 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht
 
 <entry>
   <title>CSS Slope Graphs</title>
   <link href="https://uglyduck.ca/css-slope-graphs/"/>
   <link href="http://localhost:4000/css-slope-graphs/"/>
   <updated>2021-06-07T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/css-slope-graphs</id>
   <id>http://localhost:4000/css-slope-graphs</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I am a huge sucker for simplistic and beautifully designed visual data on the web&lt;/em&gt;. Most data tends to be graphed via line or bar systems - which is fine - but I think slope graphs are highly underrated. Let’s change that, shall we?&lt;/p&gt;

&lt;h2 id=&quot;the-demo&quot;&gt;The Demo&lt;/h2&gt;


@@ 949,9 949,9 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht
 
 <entry>
   <title>SOMA Inspired Terminal Display with CSS</title>
   <link href="https://uglyduck.ca/soma-terminal-css/"/>
   <link href="http://localhost:4000/soma-terminal-css/"/>
   <updated>2021-05-29T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/soma-terminal-css</id>
   <id>http://localhost:4000/soma-terminal-css</id>
   <content type="html">&lt;p&gt;&lt;em&gt;A few years back I played (and loved) &lt;a href=&quot;https://store.steampowered.com/app/282140/SOMA/&quot;&gt;SOMA&lt;/a&gt;&lt;/em&gt;, 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.&lt;/p&gt;

&lt;p&gt;Three years ago I wanted to see if I could recreate one of those terminal displays with HTML &amp;amp; CSS. And I did just that.&lt;/p&gt;


@@ 1165,9 1165,9 @@ button {
 
 <entry>
   <title>My Changing Opinion on Personal Website Design</title>
   <link href="https://uglyduck.ca/personal-website-opinions/"/>
   <link href="http://localhost:4000/personal-website-opinions/"/>
   <updated>2021-05-19T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/personal-website-opinions</id>
   <id>http://localhost:4000/personal-website-opinions</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Hey would you look at that&lt;/em&gt; - my personal blog has been redesigned &lt;em&gt;again&lt;/em&gt;! 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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Gasp!&lt;/strong&gt; “How &lt;em&gt;could&lt;/em&gt; you?!” I hear you ask. Let me explain.&lt;/p&gt;


@@ 1192,9 1192,9 @@ button {
 
 <entry>
   <title>Shiny, Animated CSS Buttons</title>
   <link href="https://uglyduck.ca/shiny-css-buttons/"/>
   <link href="http://localhost:4000/shiny-css-buttons/"/>
   <updated>2021-04-27T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/shiny-css-buttons</id>
   <id>http://localhost:4000/shiny-css-buttons</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Everyone can appreciate fancy, animated buttons&lt;/em&gt; - but often times they come with a performance cost: &lt;em&gt;JavaScript&lt;/em&gt;. Luckily for us, we can create our very own shiny, animated buttons with pure CSS.&lt;/p&gt;

&lt;h2 id=&quot;the-demo&quot;&gt;The Demo&lt;/h2&gt;


@@ 1290,9 1290,9 @@ button {
 
 <entry>
   <title>Create a Mac App Icon with Pure HTML &amp;amp; CSS</title>
   <link href="https://uglyduck.ca/macos-icon-css/"/>
   <link href="http://localhost:4000/macos-icon-css/"/>
   <updated>2021-04-13T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/macos-icon-css</id>
   <id>http://localhost:4000/macos-icon-css</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I have always been a huge fan of &lt;a href=&quot;https://dribbble.com/bg-d&quot;&gt;Bogdan’s work on Dribbble&lt;/a&gt;&lt;/em&gt; and was recently inspired to see if I could replicate one of his awesome icon designs with only HTML &amp;amp; CSS. What was the outcome? I think it’s a half-way decent copy - of course the original will always look significantly better.&lt;/p&gt;

&lt;p&gt;Don’t care about reading through the tutorial? No problem! You can &lt;a href=&quot;#demo&quot;&gt;jump right down to the live demo&lt;/a&gt;&lt;/p&gt;


@@ 1563,9 1563,9 @@ button {
 
 <entry>
   <title>The Lazy Developer's Dark Mode</title>
   <link href="https://uglyduck.ca/lazy-dev-dark-mode/"/>
   <link href="http://localhost:4000/lazy-dev-dark-mode/"/>
   <updated>2021-04-12T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/lazy-dev-dark-mode</id>
   <id>http://localhost:4000/lazy-dev-dark-mode</id>
   <content type="html">&lt;p&gt;&lt;em&gt;After recently jumping back to Jekyll for my personal blog&lt;/em&gt;, I decided to take a closer look at how I was supporting &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;dark mode&lt;/code&gt; 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.&lt;/p&gt;

&lt;p&gt;So I thought to myself, “There &lt;em&gt;has&lt;/em&gt; to be a simpler way…”&lt;/p&gt;


@@ 1605,9 1605,9 @@ button {
 
 <entry>
   <title>Click to Load Website Images</title>
   <link href="https://uglyduck.ca/load-image-on-click/"/>
   <link href="http://localhost:4000/load-image-on-click/"/>
   <updated>2021-03-25T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/load-image-on-click</id>
   <id>http://localhost:4000/load-image-on-click</id>
   <content type="html">&lt;p&gt;&lt;em&gt;In my previous post about &lt;a href=&quot;https://uglyduck.ca/#2021-03-22-89-posts-one-file&quot;&gt;switching my Jekyll blog over to PHPetite&lt;/a&gt;&lt;/em&gt;, I briefly mentioned how I only loaded in article images if the user &lt;em&gt;clicked or tapped&lt;/em&gt; the empty file element.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;


@@ 1666,9 1666,9 @@ button {
 
 <entry>
   <title>89 Blog Posts in a Single HTML File</title>
   <link href="https://uglyduck.ca/89-posts-one-file/"/>
   <link href="http://localhost:4000/89-posts-one-file/"/>
   <updated>2021-03-22T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/89-posts-one-file</id>
   <id>http://localhost:4000/89-posts-one-file</id>
   <content type="html">&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;This is no longer the current setup of my blog&lt;/em&gt;. I have switched back to Jekyll for performance reasons. I’ll be leaving this post up as a point of reference though :)&lt;/p&gt;


@@ 1748,9 1748,9 @@ button {
 
 <entry>
   <title>Introducing PageRoast</title>
   <link href="https://uglyduck.ca/introducing-pageroast/"/>
   <link href="http://localhost:4000/introducing-pageroast/"/>
   <updated>2021-03-11T00:00:00-05:00</updated>
   <id>https://uglyduck.ca/introducing-pageroast</id>
   <id>http://localhost:4000/introducing-pageroast</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Following up with my concept of releasing small side projects weekly&lt;/em&gt;, I have officially launched &lt;a href=&quot;https://pageroast.com&quot;&gt;PageRoast&lt;/a&gt;. What is PageRoast I hear you ask?&lt;/p&gt;

&lt;blockquote&gt;


@@ 1784,9 1784,9 @@ button {
 
 <entry>
   <title>ThriftyName: $5 Brand Names</title>
   <link href="https://uglyduck.ca/launching-thriftyname/"/>
   <link href="http://localhost:4000/launching-thriftyname/"/>
   <updated>2021-02-25T00:00:00-05:00</updated>
   <id>https://uglyduck.ca/launching-thriftyname</id>
   <id>http://localhost:4000/launching-thriftyname</id>
   <content type="html">&lt;p&gt;&lt;em&gt;It’s been a while since I’ve written anything on this blog&lt;/em&gt;, but for good reason - &lt;strong&gt;I’ve been working on a handful of side projects&lt;/strong&gt;. I plan to drip-feed release these projects over time, but for today I’m announcing &lt;a href=&quot;https://thrifty.name&quot;&gt;ThriftyName&lt;/a&gt;.&lt;/p&gt;

&lt;h2 id=&quot;what-is-thriftyname&quot;&gt;What is ThriftyName?&lt;/h2&gt;


@@ 1809,9 1809,9 @@ button {
 
 <entry>
   <title>Self-Hosting Fathom Analytics with DigitalOcean</title>
   <link href="https://uglyduck.ca/self-hosting-fathom/"/>
   <link href="http://localhost:4000/self-hosting-fathom/"/>
   <updated>2021-02-02T00:00:00-05:00</updated>
   <id>https://uglyduck.ca/self-hosting-fathom</id>
   <id>http://localhost:4000/self-hosting-fathom</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Since my previous post walked through the process of setting up&lt;/em&gt; &lt;a href=&quot;/fathom-analytics-netlify&quot;&gt;Fathom PRO on Netlify&lt;/a&gt;, I figured it made sense to create a similar tutorial for the “Lite” variation, self-hosted on DigitalOcean.&lt;/p&gt;

&lt;p&gt;Please note that while I think the PRO version of &lt;a target=&quot;_blank&quot; href=&quot;https://usefathom.com/ref/DKHJVX&quot;&gt;Fathom Analytics&lt;/a&gt; is truly great, for my small, niche blog it seemed overkill compared to self-hosting. Switching over from $14/mo to $5/mo while retaining most of the same functionality was a no-brainer. Choose the option that best suits your needs (or in the case - budget &amp;amp; bandwidth).&lt;/p&gt;


@@ 1915,9 1915,9 @@ ns3.digitalocean.com
 
 <entry>
   <title>Setting Up Fathom Analytics with Netlify</title>
   <link href="https://uglyduck.ca/fathom-analytics-netlify/"/>
   <link href="http://localhost:4000/fathom-analytics-netlify/"/>
   <updated>2021-01-19T00:00:00-05:00</updated>
   <id>https://uglyduck.ca/fathom-analytics-netlify</id>
   <id>http://localhost:4000/fathom-analytics-netlify</id>
   <content type="html">&lt;p&gt;&lt;em&gt;It’s no secret that I’m passionate about open source software&lt;/em&gt;, but I’m also extremely adamant about protecting the privacy of all users across the web. So when I decided to implement analytics on my own personal website, I ended up choosing &lt;a href=&quot;https://usefathom.com/ref/DKHJVX&quot;&gt;Fathom&lt;/a&gt; (&lt;em&gt;get a $10 credit using that link!&lt;/em&gt;).&lt;/p&gt;

&lt;p&gt;You should research further into the company yourself if you’re interested, but in a nutshell the Fathom platform provides:&lt;/p&gt;


@@ 1991,9 1991,9 @@ ns3.digitalocean.com
 
 <entry>
   <title>Introducing Notez</title>
   <link href="https://uglyduck.ca/introducing-notez/"/>
   <link href="http://localhost:4000/introducing-notez/"/>
   <updated>2021-01-13T00:00:00-05:00</updated>
   <id>https://uglyduck.ca/introducing-notez</id>
   <id>http://localhost:4000/introducing-notez</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I have always been a fan of simple note taking applications&lt;/em&gt;, since I tend to take a lot of random notes throughout the work day. Sometimes I reach for simple pen and paper, but other times it’s nice to stay focused jotting down notes on the same device I’m working on.&lt;/p&gt;

&lt;p&gt;Previously, I just created quick &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;notes.txt&lt;/code&gt; files in my open code editor or fell back on the default OS note apps. These worked perfectly fine but often got in my way (or even worse - lost among everything else).&lt;/p&gt;


@@ 2024,9 2024,9 @@ ns3.digitalocean.com
 
 <entry>
   <title>Animated Radio Tab Toggles</title>
   <link href="https://uglyduck.ca/animated-radio-tab-toggles"/>
   <link href="http://localhost:4000/animated-radio-tab-toggles"/>
   <updated>2021-01-05T00:00:00-05:00</updated>
   <id>https://uglyduck.ca/animated-toggle-tabs</id>
   <id>http://localhost:4000/animated-toggle-tabs</id>
   <content type="html">&lt;p&gt;&lt;em&gt;In this demo tutorial, we are making the assumption&lt;/em&gt; 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:&lt;/p&gt;

&lt;ul&gt;


@@ 2134,9 2134,9 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item {
 
 <entry>
   <title>Disabling Comments in WordPress</title>
   <link href="https://uglyduck.ca/disabling-comments-in-wordpress/"/>
   <link href="http://localhost:4000/disabling-comments-in-wordpress/"/>
   <updated>2020-12-28T00:00:00-05:00</updated>
   <id>https://uglyduck.ca/disabling-comments-in-wordpress</id>
   <id>http://localhost:4000/disabling-comments-in-wordpress</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I seem to come across a decent amount of clients&lt;/em&gt; and users online that have a difficult time knowing how to disable comments for both future &lt;em&gt;and&lt;/em&gt; previous blog posts. It isn’t the easiest for both use cases, so let’s break it down.&lt;/p&gt;

&lt;h2 id=&quot;back-to-the-future&quot;&gt;Back to the future&lt;/h2&gt;


@@ 2165,9 2165,9 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item {
 
 <entry>
   <title>Pure CSS Bar Graphs with Graceful Mobile Fallbacks</title>
   <link href="https://uglyduck.ca/flexbox-bar-graphs/"/>
   <link href="http://localhost:4000/flexbox-bar-graphs/"/>
   <updated>2020-12-08T00:00:00-05:00</updated>
   <id>https://uglyduck.ca/flexbox-bar-graphs</id>
   <id>http://localhost:4000/flexbox-bar-graphs</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I recently published a new open source project&lt;/em&gt;, &lt;a target=&quot;_blank&quot; href=&quot;https://flexbox-bar-graphs.netlify.app/&quot;&gt;Flexbox Bar Graphs&lt;/a&gt;, and wanted to share a simple breakdown of how it was built. It isn’t anything mind-blowing, but I like the idea of placing bar graphs in a web page with &lt;em&gt;zero&lt;/em&gt; Javascript.&lt;/p&gt;

&lt;p&gt;So in the end, this is what our bar graphs will look like on desktop:&lt;/p&gt;


@@ 2477,9 2477,9 @@ input[type=&quot;radio&quot;]:nth-of-type(3):checked ~ .slide-item {
 
 <entry>
   <title>Obvious Javascript 'Injection' Fallback</title>
   <link href="https://uglyduck.ca/obvious-js-injection-fallback/"/>
   <link href="http://localhost:4000/obvious-js-injection-fallback/"/>
   <updated>2020-12-04T00:00:00-05:00</updated>
   <id>https://uglyduck.ca/obvious-js-injection-fallback</id>
   <id>http://localhost:4000/obvious-js-injection-fallback</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Sometimes websites and web apps might require content&lt;/em&gt; 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 &lt;em&gt;empty&lt;/em&gt; HTML elements with the assumption they will be filled via Javascript.&lt;/p&gt;

&lt;h2 id=&quot;our-hypothetical-project&quot;&gt;Our Hypothetical Project&lt;/h2&gt;


@@ 2526,9 2526,9 @@ document.getElementsByClassName(&quot;total-tally&quot;)[0].innerHTML=totalTally
 
 <entry>
   <title>Bidirectional Scrolling: Why Not Both?</title>
   <link href="https://uglyduck.ca/bidirectional-scrolling/"/>
   <link href="http://localhost:4000/bidirectional-scrolling/"/>
   <updated>2020-11-09T00:00:00-05:00</updated>
   <id>https://uglyduck.ca/bidirectional-scrolling</id>
   <id>http://localhost:4000/bidirectional-scrolling</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I recently came across Adam Silver’s post &lt;a href=&quot;https://adamsilver.io/articles/bidirectional-scrolling-whats-not-to-like/&quot;&gt;about the merits and pitfalls of bidirectional scrolling&lt;/a&gt;&lt;/em&gt; 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.&lt;/p&gt;

&lt;h2 id=&quot;the-premise&quot;&gt;The Premise&lt;/h2&gt;


@@ 2582,9 2582,9 @@ document.getElementsByClassName(&quot;total-tally&quot;)[0].innerHTML=totalTally
 
 <entry>
   <title>Menu Toggle with Pure CSS</title>
   <link href="https://uglyduck.ca/menu-toggle-css/"/>
   <link href="http://localhost:4000/menu-toggle-css/"/>
   <updated>2020-10-19T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/menu-toggle-css</id>
   <id>http://localhost:4000/menu-toggle-css</id>
   <content type="html">&lt;p&gt;&lt;em&gt;When thinking through navigation designs for mobile devices&lt;/em&gt; 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!&lt;/p&gt;

&lt;h2 id=&quot;before-we-begin&quot;&gt;Before we begin&lt;/h2&gt;


@@ 2682,9 2682,9 @@ input[type=&quot;checkbox&quot;]:checked ~ nav {
 
 <entry>
   <title>Poor Man's CSS Full-Bleed Layout</title>
   <link href="https://uglyduck.ca/poor-mans-full-bleed/"/>
   <link href="http://localhost:4000/poor-mans-full-bleed/"/>
   <updated>2020-10-07T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/poor-mans-full-bleed</id>
   <id>http://localhost:4000/poor-mans-full-bleed</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I recently came across the very well written and interesting article&lt;/em&gt;, &lt;a href=&quot;https://joshwcomeau.com/css/full-bleed/&quot;&gt;Full-Bleed Layout Using CSS Grid&lt;/a&gt;, 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 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;grid&lt;/code&gt; property.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;


@@ 2802,9 2802,9 @@ article section.full-bleed {
 
 <entry>
   <title>Simple Navigation Setup in Jekyll 3.9.0</title>
   <link href="https://uglyduck.ca/simple-jekyll-navigation/"/>
   <link href="http://localhost:4000/simple-jekyll-navigation/"/>
   <updated>2020-09-29T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/simple-jekyll-navigation</id>
   <id>http://localhost:4000/simple-jekyll-navigation</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I have found that there is a lot of information on the internet&lt;/em&gt; 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 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;nav&lt;/code&gt; elements in Jekyll (3.9.0 as of this writing).&lt;/p&gt;

&lt;h2 id=&quot;creating-the-directories--files&quot;&gt;Creating the Directories &amp;amp; Files&lt;/h2&gt;


@@ 2859,9 2859,9 @@ li a.active { color: red; }
 
 <entry>
   <title>Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal</title>
   <link href="https://uglyduck.ca/cheap-portable-pi/"/>
   <link href="http://localhost:4000/cheap-portable-pi/"/>
   <updated>2020-09-16T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/cheap-portable-pi</id>
   <id>http://localhost:4000/cheap-portable-pi</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I recently came across &lt;a href=&quot;https://n-o-d-e.net/zeroterminal3.html&quot;&gt;the incredibly cool design&lt;/a&gt; for an “ultimate Raspberry Pi computer”&lt;/em&gt; by NODE and was inspired to create my own “portable” Pi device. Although, with my concept, I decided to set a few restrictions on the build:&lt;/p&gt;

&lt;ul&gt;


@@ 2877,9 2877,9 @@ li a.active { color: red; }

&lt;p&gt;With these constraints put in place, I built my very own Raspberry Pi Zero “hacker” terminal. You can see the finished product below:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/portable-pi-1.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/portable-pi-1.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/portable-pi-1.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/portable-pi-1.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/portable-pi-1.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/portable-pi-1.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Portable Pi Front&quot; width=&quot;2448&quot; height=&quot;3264&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/portable-pi-1.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/portable-pi-1.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/portable-pi-1.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/portable-pi-1.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/portable-pi-1.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/portable-pi-1.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Portable Pi Front&quot; width=&quot;2448&quot; height=&quot;3264&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/portable-pi-2.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/portable-pi-2.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/portable-pi-2.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/portable-pi-2.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/portable-pi-2.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/portable-pi-2.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Portable Pi Back&quot; width=&quot;2448&quot; height=&quot;3264&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/portable-pi-2.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/portable-pi-2.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/portable-pi-2.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/portable-pi-2.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/portable-pi-2.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/portable-pi-2.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Portable Pi Back&quot; width=&quot;2448&quot; height=&quot;3264&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;

&lt;p&gt;I’m pretty happy with the final outcome and best of all - you can easily recreate this yourself with little-to-no effort!&lt;/p&gt;



@@ 3014,7 3014,7 @@ network={
&lt;ol&gt;
  &lt;li&gt;Run the command &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;sudo raspi-config&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;Select “Change User Password” from the menu and change the password 
  &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/raspi-config.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/raspi-config.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/raspi-config.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/raspi-config.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/raspi-config.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_984/https://uglyduck.ca/public/images/raspi-config.webp 984w&quot; sizes=&quot;100vw&quot; alt=&quot;Raspberry Config&quot; width=&quot;984&quot; height=&quot;321&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/li&gt;
  &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/raspi-config.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/raspi-config.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/raspi-config.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/raspi-config.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/raspi-config.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_984/http://localhost:4000/public/images/raspi-config.webp 984w&quot; sizes=&quot;100vw&quot; alt=&quot;Raspberry Config&quot; width=&quot;984&quot; height=&quot;321&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/li&gt;
  &lt;li&gt;After that, select “Network Options” and change your device name
    &lt;ul&gt;
      &lt;li&gt;This will avoid any conflicts of connecting to newer RPi devices down the line&lt;/li&gt;


@@ 3062,9 3062,9 @@ sudo ./LCD35_v
 
 <entry>
   <title>Over-Engineering an Oil Tank Gauge</title>
   <link href="https://uglyduck.ca/over-engineering-an-oil-tank/"/>
   <link href="http://localhost:4000/over-engineering-an-oil-tank/"/>
   <updated>2020-09-09T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/over-engineering-an-oil-tank</id>
   <id>http://localhost:4000/over-engineering-an-oil-tank</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I almost went down the path of investing a huge amount of time&lt;/em&gt; and effort into fixing a stuck oil fuel tank float-gauge in my house. Recently, the float mechanism became stuck and permanently displayed &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;empty&lt;/code&gt; 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.&lt;/p&gt;

&lt;p&gt;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 &lt;em&gt;fun&lt;/em&gt; though.&lt;/p&gt;


@@ 3128,9 3128,9 @@ sudo ./LCD35_v
 
 <entry>
   <title>My Raspberry Pi Desktop</title>
   <link href="https://uglyduck.ca/my-pi-desktop/"/>
   <link href="http://localhost:4000/my-pi-desktop/"/>
   <updated>2020-09-02T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/my-pi-desktop</id>
   <id>http://localhost:4000/my-pi-desktop</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I use a Raspberry Pi 4 as my personal daily driver&lt;/em&gt; 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.&lt;/p&gt;

&lt;p&gt;My desktop Pi working away on a regular morning:&lt;/p&gt;


@@ 3261,9 3261,9 @@ sudo ./LCD35_v
 
 <entry>
   <title>Linux Mint MacBook Air Setup</title>
   <link href="https://uglyduck.ca/linux-mint-macbook-air/"/>
   <link href="http://localhost:4000/linux-mint-macbook-air/"/>
   <updated>2020-08-16T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/linux-mint-macbook-air</id>
   <id>http://localhost:4000/linux-mint-macbook-air</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I don’t like the idea of throwing away old or outdated tech&lt;/em&gt; (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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Important&lt;/strong&gt;: This setup will completely wipe your existing disk and create a fresh install of Linux Mint on the SSD. You have been warned.&lt;/p&gt;


@@ 3367,9 3367,9 @@ sudo ./LCD35_v
 
 <entry>
   <title>Goodbye WordPress, Hello Jekyll (Again)</title>
   <link href="https://uglyduck.ca/hello-jekyll/"/>
   <link href="http://localhost:4000/hello-jekyll/"/>
   <updated>2020-08-13T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/hello-jekyll</id>
   <id>http://localhost:4000/hello-jekyll</id>
   <content type="html">&lt;p&gt;&lt;em&gt;For the past four months this blog has been running on WordPress&lt;/em&gt; - but that ended today. I’ve officially switched back over to Jekyll. I’m not going to spend too much time delving into &lt;em&gt;why&lt;/em&gt; I made the transition back, but I’ll leave some cliff-notes for any interested parties.&lt;/p&gt;

&lt;h2 id=&quot;the-big-issues-with-my-wordpress-setup&quot;&gt;The big issues with &lt;em&gt;my&lt;/em&gt; WordPress setup&lt;/h2&gt;


@@ 3422,9 3422,9 @@ sudo ./LCD35_v
 
 <entry>
   <title>Audio Hotkeys on Linux Mint</title>
   <link href="https://uglyduck.ca/audio-hotkeys-on-linux-mint/"/>
   <link href="http://localhost:4000/audio-hotkeys-on-linux-mint/"/>
   <updated>2020-07-14T10:56:16-04:00</updated>
   <id>https://uglyduck.ca/audio-hotkeys-on-linux-mint</id>
   <id>http://localhost:4000/audio-hotkeys-on-linux-mint</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I recently switched out the OS on my old 2011 Macbook Air with Linux Mint&lt;/em&gt;. 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.&lt;/p&gt;

&lt;p&gt;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 &lt;a href=&quot;https://www.amazon.com/gp/product/B01AROOL12/ref=as_li_tl?ie=UTF8&amp;amp;camp=1789&amp;amp;creative=9325&amp;amp;creativeASIN=B01AROOL12&amp;amp;linkCode=as2&amp;amp;tag=uglyduck-20&amp;amp;linkId=5cfe5875a0f263b933692c381a6a88a9&quot;&gt;Logitech MK235 keyboard&lt;/a&gt;. After looking a little too long on DDG &amp;amp; even Google, I finally found &lt;a href=&quot;https://forums.linuxmint.com/viewtopic.php?t=253048&quot;&gt;this forum thread with the solution&lt;/a&gt;.&lt;/p&gt;


@@ 3445,9 3445,9 @@ pactl set-sink-mute @DEFAULT_SINK@ toggle
 
 <entry>
   <title>Improving Github&amp;#8217;s New Design</title>
   <link href="https://uglyduck.ca/improving-githubs-new-design/"/>
   <link href="http://localhost:4000/improving-githubs-new-design/"/>
   <updated>2020-07-07T08:46:10-04:00</updated>
   <id>https://uglyduck.ca/improving-githubs-new-design</id>
   <id>http://localhost:4000/improving-githubs-new-design</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Like many other Github users, I am not a big fan&lt;/em&gt; of their recent repository page redesign. In my mind it seems like a change just for the sake of change – the original UI worked perfectly fine.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Sigh.&lt;/em&gt;&lt;/p&gt;


@@ 3533,9 3533,9 @@ pactl set-sink-mute @DEFAULT_SINK@ toggle
 
 <entry>
   <title>Keynote Slides with Pure CSS</title>
   <link href="https://uglyduck.ca/keynote-slides-with-pure-css/"/>
   <link href="http://localhost:4000/keynote-slides-with-pure-css/"/>
   <updated>2020-06-22T09:47:48-04:00</updated>
   <id>https://uglyduck.ca/keynote-slides-with-pure-css</id>
   <id>http://localhost:4000/keynote-slides-with-pure-css</id>
   <content type="html">&lt;p&gt;&lt;em&gt;There are a great deal of options available on the web and built&lt;/em&gt; 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.&lt;/p&gt;

&lt;p&gt;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…&lt;/p&gt;


@@ 3639,9 3639,9 @@ input[type=&quot;radio&quot;]:nth-of-type(5):checked ~ .slide:nth-of-type(5) {
 
 <entry>
   <title>Quick &amp;#038; Dirty Theme Switcher</title>
   <link href="https://uglyduck.ca/quick-dirty-theme-switcher/"/>
   <link href="http://localhost:4000/quick-dirty-theme-switcher/"/>
   <updated>2020-06-04T09:06:06-04:00</updated>
   <id>https://uglyduck.ca/quick-dirty-theme-switcher</id>
   <id>http://localhost:4000/quick-dirty-theme-switcher</id>
   <content type="html">&lt;div&gt;
    Update: This article is no longer relevant since my blog design has changed. I&amp;#8217;m keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site.
&lt;/div&gt;


@@ 3769,9 3769,9 @@ function toggleThirdTheme() {
 
 <entry>
   <title>Mini Interactive Keyboard with Pure CSS</title>
   <link href="https://uglyduck.ca/mini-interactive-keyboard-with-pure-css/"/>
   <link href="http://localhost:4000/mini-interactive-keyboard-with-pure-css/"/>
   <updated>2020-05-13T10:40:50-04:00</updated>
   <id>https://uglyduck.ca/mini-interactive-keyboard-with-pure-css</id>
   <id>http://localhost:4000/mini-interactive-keyboard-with-pure-css</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Lately, I’ve become obsessed with trying to see what I can create&lt;/em&gt; using only HTML and CSS (besides websites of course). Since playing with the concept of &lt;a href=&quot;https://uglyduck.ca/fake-3d-elements-with-css/&quot;&gt;faking 3D elements&lt;/a&gt;, I wanted to circle back around to an older CodePen I created: a mini, interactive “undo” keyboard.&lt;/p&gt;

&lt;h2 id=&quot;see-it-in-action&quot;&gt;See it in action&lt;/h2&gt;


@@ 3918,9 3918,9 @@ body {
 
 <entry>
   <title>Fixing LocalWP on Fedora 32</title>
   <link href="https://uglyduck.ca/fixing-localwp-on-fedora-32/"/>
   <link href="http://localhost:4000/fixing-localwp-on-fedora-32/"/>
   <updated>2020-05-06T14:32:04-04:00</updated>
   <id>https://uglyduck.ca/fixing-localwp-on-fedora-32</id>
   <id>http://localhost:4000/fixing-localwp-on-fedora-32</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I recently upgraded from Fedora 31 to 32 and everything went very smoothly&lt;/em&gt; – except for one application: &lt;strong&gt;LocalWP&lt;/strong&gt;. After the upgrade, all local WordPress builds would fail and complain about two missing packages:&lt;/p&gt;

&lt;ul&gt;


@@ 3943,9 3943,9 @@ body {
 
 <entry>
   <title>WP Enqueue for Beginners</title>
   <link href="https://uglyduck.ca/wp-enqueue-for-beginners/"/>
   <link href="http://localhost:4000/wp-enqueue-for-beginners/"/>
   <updated>2020-05-05T13:22:47-04:00</updated>
   <id>https://uglyduck.ca/wp-enqueue-for-beginners</id>
   <id>http://localhost:4000/wp-enqueue-for-beginners</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Throughout my career designing, developing and auditing WordPress themes&lt;/em&gt;, I’ve come across many that include their custom styles / scripts as static HTML elements inside their respective &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;header&lt;/code&gt; and &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;footer&lt;/code&gt; templates. This is perfectly &lt;em&gt;fine&lt;/em&gt; – but there is a cleaner way to include these files.&lt;/p&gt;

&lt;p&gt;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!)&lt;/p&gt;


@@ 4045,9 4045,9 @@ add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts');
 
 <entry>
   <title>Faking 3D Elements with CSS</title>
   <link href="https://uglyduck.ca/fake-3d-elements-with-css/"/>
   <link href="http://localhost:4000/fake-3d-elements-with-css/"/>
   <updated>2020-04-29T13:56:54-04:00</updated>
   <id>https://uglyduck.ca/fake-3d-elements-with-css</id>
   <id>http://localhost:4000/fake-3d-elements-with-css</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Although not always practical, creating the illusion&lt;/em&gt; that some of your web elements are “3D” can be a fun experiment. I set out to see if I was able to create such an illusion with only 2 HTML elements and as little CSS as possible.&lt;/p&gt;

&lt;p&gt;This is what I ended up creating:&lt;/p&gt;


@@ 4132,9 4132,9 @@ add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts');
 
 <entry>
   <title>Stripe Menu Dropdowns (CSS)</title>
   <link href="https://uglyduck.ca/stripe-menu-css/"/>
   <link href="http://localhost:4000/stripe-menu-css/"/>
   <updated>2020-03-31T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/stripe-menu-css</id>
   <id>http://localhost:4000/stripe-menu-css</id>
   <content type="html">&lt;p&gt;&lt;em&gt;In a previous article I wrote, &lt;a href=&quot;/minimal-css-menu&quot;&gt;Minimal CSS: Dropdown Menus&lt;/a&gt;&lt;/em&gt;, 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.&lt;/p&gt;

&lt;h2 id=&quot;what-we-want-to-emulate&quot;&gt;What we want to emulate&lt;/h2&gt;


@@ 4177,9 4177,9 @@ add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts');
 
 <entry>
   <title>Base64 All The Things! (Sometimes)</title>
   <link href="https://uglyduck.ca/base64-all-the-things/"/>
   <link href="http://localhost:4000/base64-all-the-things/"/>
   <updated>2020-03-18T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/base64-all-the-things</id>
   <id>http://localhost:4000/base64-all-the-things</id>
   <content type="html">&lt;p&gt;&lt;em&gt;An extremely overlooked process for displaying fonts&lt;/em&gt;, images, documents, spreadsheets, etc. on the web is the use of &lt;strong&gt;base64 encoding&lt;/strong&gt;. 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.&lt;/p&gt;

&lt;h2&gt;What is base64 encoding?&lt;/h2&gt;


@@ 4239,9 4239,9 @@ add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts');
 
 <entry>
   <title>How to &quot;FLOSS&quot; as a Web Designer</title>
   <link href="https://uglyduck.ca/learning-to-floss/"/>
   <link href="http://localhost:4000/learning-to-floss/"/>
   <updated>2020-02-07T00:00:00-05:00</updated>
   <id>https://uglyduck.ca/learning-to-floss</id>
   <id>http://localhost:4000/learning-to-floss</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I have a profound respect for the open source community&lt;/em&gt;. 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.&lt;/p&gt;

&lt;p&gt;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 &lt;em&gt;cost&lt;/em&gt; associated with these products.&lt;/p&gt;


@@ 4293,9 4293,9 @@ add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts');
 
 <entry>
   <title>Web Development on a $200 Chromebook</title>
   <link href="https://uglyduck.ca/chromebook-web-development/"/>
   <link href="http://localhost:4000/chromebook-web-development/"/>
   <updated>2020-01-07T00:00:00-05:00</updated>
   <id>https://uglyduck.ca/chromebook-web-dev</id>
   <id>http://localhost:4000/chromebook-web-dev</id>
   <content type="html">&lt;p&gt;&lt;em&gt;This blog post was written, edited and tested locally&lt;/em&gt; on a cheap $200 Chromebook. The article draft was composed in Sublime Text. Jekyll (the SSG this website uses) was generated via the Linux Beta Terminal running alongside Chrome OS. It was then pushed to the Github repo from the same Terminal and published automatically to Netlify. But more on that later.&lt;/p&gt;

&lt;p&gt;First, we need to ask an important question: why use a Chromebook for web development? Maybe a better question might be: why not?&lt;/p&gt;


@@ 4349,9 4349,9 @@ add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts');
 
 <entry>
   <title>Billing for One CSS Change</title>
   <link href="https://uglyduck.ca/one-css-change/"/>
   <link href="http://localhost:4000/one-css-change/"/>
   <updated>2019-11-29T00:00:00-05:00</updated>
   <id>https://uglyduck.ca/one-css-property</id>
   <id>http://localhost:4000/one-css-property</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Every second you spend working as a designer should be billed&lt;/em&gt; 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.&lt;/p&gt;

&lt;p&gt;You need to be charging for &lt;em&gt;all&lt;/em&gt; design work, regardless of difficulty or time required.&lt;/p&gt;


@@ 4392,9 4392,9 @@ add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts');
 
 <entry>
   <title>Very Basic Form Styling</title>
   <link href="https://uglyduck.ca/basic-form-styling/"/>
   <link href="http://localhost:4000/basic-form-styling/"/>
   <updated>2019-11-13T00:00:00-05:00</updated>
   <id>https://uglyduck.ca/default-brower-forms</id>
   <id>http://localhost:4000/default-brower-forms</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Web forms can be great - I’m borderline obsessed with them&lt;/em&gt;. I love tinkering with pre-existing logins / sign up pages and I’ve also open sourced a minimal CSS form-styling plugin: &lt;a href=&quot;https://normform.netlify.com/&quot;&gt;Normform&lt;/a&gt;. While simple CSS plugins like these can be helpful, I often feel like we are over-engineering our web forms. I’m certainly guilty of it.&lt;/p&gt;

&lt;p&gt;That’s not to say developers should just use default browser styling for their forms and call it a day - that is far from ideal. Just pull-back on adding so much styling garbage to the forms themselves.&lt;/p&gt;


@@ 4518,9 4518,9 @@ add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts');
 
 <entry>
   <title>Improving Tufte CSS for Jekyll</title>
   <link href="https://uglyduck.ca/improving-tufte-jekyll/"/>
   <link href="http://localhost:4000/improving-tufte-jekyll/"/>
   <updated>2019-11-01T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/improving-tufte-jekyll</id>
   <id>http://localhost:4000/improving-tufte-jekyll</id>
   <content type="html">&lt;p&gt;&lt;em&gt;After creating the ET-Jekyll theme almost two years ago&lt;/em&gt;, I finally got around to revamping the structure and improving a lot of minor performance issues. Items that have been surely needing of updates for the last couple of years.&lt;/p&gt;

&lt;h2 id=&quot;introductions&quot;&gt;Introductions&lt;/h2&gt;


@@ 4663,9 4663,9 @@ add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts');
 
 <entry>
   <title>Stop Using Sticky Navigation on Mobile</title>
   <link href="https://uglyduck.ca/stop-using-sticky-navigation/"/>
   <link href="http://localhost:4000/stop-using-sticky-navigation/"/>
   <updated>2019-10-06T00:00:00-04:00</updated>
   <id>https://uglyduck.ca/sticky-elements</id>
   <id>http://localhost:4000/sticky-elements</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Stop styling your web elements to be “sticky” on mobile&lt;/em&gt;. 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.&lt;/p&gt;

&lt;h2 id=&quot;what-do-you-mean-by-sticky&quot;&gt;What do you mean by “sticky”?&lt;/h2&gt;


@@ 4738,9 4738,9 @@ add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts');
 
 <entry>
   <title>Plain Text Emails, Please</title>
   <link href="https://uglyduck.ca/plain-text-emails/"/>
   <link href="http://localhost:4000/plain-text-emails/"/>
   <updated>2019-09-08T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/plain-text-emails</id>
   <id>http://localhost:4000/plain-text-emails</id>
   <content type="html">&lt;p&gt;&lt;em&gt;When it comes to website / product design and development&lt;/em&gt; 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?&lt;/p&gt;

&lt;h2 id=&quot;a-brief-history-of-email&quot;&gt;A brief history of email&lt;/h2&gt;


@@ 4844,9 4844,9 @@ Now, I’m not going to sit here and pretend to be some expert on the history of
 
 <entry>
   <title>Being More Efficient as a Designer &amp; Developer</title>
   <link href="https://uglyduck.ca/being-efficient/"/>
   <link href="http://localhost:4000/being-efficient/"/>
   <updated>2019-08-27T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/being-efficient</id>
   <id>http://localhost:4000/being-efficient</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I recently began working on a small side project&lt;/em&gt; (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.&lt;/p&gt;

&lt;p&gt;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?&lt;/p&gt;


@@ 4942,9 4942,9 @@ Now, I’m not going to sit here and pretend to be some expert on the history of
 
 <entry>
   <title>Dynamic Checkboxes</title>
   <link href="https://uglyduck.ca/dynamic-checkboxes/"/>
   <link href="http://localhost:4000/dynamic-checkboxes/"/>
   <updated>2019-07-29T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/dynamic-checkboxes</id>
   <id>http://localhost:4000/dynamic-checkboxes</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Checkboxes are used quite frequently on forms across the web&lt;/em&gt;. Whether you’re selecting a pricing plan during a site’s sign-up process or just simply selecting to opt-out from a newsletter, you have most likely interacted with some form of checkbox element.&lt;/p&gt;

&lt;p&gt;What if we could make everyday checkboxes more beautiful &lt;em&gt;and&lt;/em&gt; more intuitive? &lt;em&gt;It’s easier than you think&lt;/em&gt;. We only need a small amount of CSS and JavaScript to make considerable improvements to your average checkbox UX.&lt;/p&gt;


@@ 5367,9 5367,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>Styling Empty Table Cells</title>
   <link href="https://uglyduck.ca/styling-empty-table-cells/"/>
   <link href="http://localhost:4000/styling-empty-table-cells/"/>
   <updated>2019-07-16T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/styling-empty-table-cells</id>
   <id>http://localhost:4000/styling-empty-table-cells</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Often when designing tables on the web you’re bound to come across&lt;/em&gt; empty pockets of data. These will be rendered as “blank” table cells, which isn’t always the intended outcome. Let’s take a quick look at how to target and style empty table cells.&lt;/p&gt;

&lt;h2 id=&quot;the-easy-empty-way&quot;&gt;The easy &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;:empty&lt;/code&gt; way&lt;/h2&gt;


@@ 5440,9 5440,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>Using HTML Validator Badges Again</title>
   <link href="https://uglyduck.ca/html5-validator-badge/"/>
   <link href="http://localhost:4000/html5-validator-badge/"/>
   <updated>2019-07-04T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/html5-validator-badge</id>
   <id>http://localhost:4000/html5-validator-badge</id>
   <content type="html">&lt;p&gt;&lt;em&gt;There was a time on the Internet when websites wore badges of honor&lt;/em&gt;, declaring that their code was semantic and followed the W3C guidelines. The validators we used weren’t great (and &lt;strong&gt;still&lt;/strong&gt; aren’t perfect) but they represented a community that took pride in caring about the quality of their work. I think it’s time we bring HTML badges back.*&lt;/p&gt;

&lt;h2 id=&quot;getting-the-flaws-out-of-the-way&quot;&gt;Getting the flaws out of the way&lt;/h2&gt;


@@ 5508,9 5508,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>They Won't Wait: A Warning for Slow Websites</title>
   <link href="https://uglyduck.ca/they-wont-wait/"/>
   <link href="http://localhost:4000/they-wont-wait/"/>
   <updated>2019-06-24T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/they-wont-wait</id>
   <id>http://localhost:4000/they-wont-wait</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Your website is probably slow&lt;/em&gt;. 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.&lt;/p&gt;

&lt;p&gt;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?&lt;/p&gt;


@@ 5605,9 5605,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>Publishing Simple Books With Jekyll</title>
   <link href="https://uglyduck.ca/publish-with-jekyll/"/>
   <link href="http://localhost:4000/publish-with-jekyll/"/>
   <updated>2019-06-19T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/publish-with-jekyll</id>
   <id>http://localhost:4000/publish-with-jekyll</id>
   <content type="html">&lt;p&gt;&lt;em&gt;When thinking about writing, designing and ultimately&lt;/em&gt; 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?&lt;/p&gt;

&lt;p&gt;Two reasons:&lt;/p&gt;


@@ 5747,9 5747,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>Using Hamburger Menus? Try Sausage Links</title>
   <link href="https://uglyduck.ca/hamburger-menu-alternative/"/>
   <link href="http://localhost:4000/hamburger-menu-alternative/"/>
   <updated>2019-06-13T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/hamburger-menu-alternative</id>
   <id>http://localhost:4000/hamburger-menu-alternative</id>
   <content type="html">&lt;p&gt;&lt;em&gt;When designing medium to large sized menu navigations on the mobile&lt;/em&gt; web the default go-to, for some time now, has been hamburger menus. This isn’t necessarily a &lt;i&gt;bad&lt;/i&gt; thing, but there is a simpler alternative for certain use cases.&lt;/p&gt;

&lt;p&gt;Before we get into the nitty-gritty details (and a simple demo) of the &lt;em&gt;sausage link&lt;/em&gt; concept, let’s take a quick look at the pros and cons of hamburger menus.&lt;/p&gt;


@@ 5879,9 5879,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>Making Tables Responsive With Minimal CSS</title>
   <link href="https://uglyduck.ca/responsive-tables/"/>
   <link href="http://localhost:4000/responsive-tables/"/>
   <updated>2019-06-10T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/responsive-tables</id>
   <id>http://localhost:4000/responsive-tables</id>
   <content type="html">&lt;div class=&quot;update-box&quot;&gt;
    &lt;strong&gt;Update (Oct 2019):&lt;/strong&gt; &lt;a href=&quot;https://twitter.com/aardrian&quot;&gt;@aardrian&lt;/a&gt; wrote a previous post about how changing the &lt;code&gt;display&lt;/code&gt; properties on tables can impact screen readers. I highly recommend his excellent article &lt;a href=&quot;https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html&quot;&gt;Tables, CSS Display Properties, and ARIA&lt;/a&gt;
&lt;/div&gt;


@@ 6024,9 6024,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>Write HTML Like It's 1999</title>
   <link href="https://uglyduck.ca/html-like-1999/"/>
   <link href="http://localhost:4000/html-like-1999/"/>
   <updated>2019-06-07T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/html-like-1999</id>
   <id>http://localhost:4000/html-like-1999</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I am sure it’s safe to say that most developers love&lt;/em&gt; to use the latest and greatest web tools available. Helpful resources such as preprocessors, template engines, syntax formatters - you name it - can all make a developer’s life easier. Unfortunately, this sometimes comes at a cost: the HTML structure.&lt;/p&gt;

&lt;p&gt;This is why I try my best to write HTML as if I’m stuck with the constraints of the 90s (within reason). What does this mean exactly? It means that &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;tables&lt;/code&gt; are coded with &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;table&lt;/code&gt; elements. Navigations are coded with &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;nav&lt;/code&gt; and ordered/unordered list-items. Form inputs are not set with &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;display: none&lt;/code&gt; and replaced with custom containers. You know, &lt;em&gt;semantic&lt;/em&gt; HTML.&lt;/p&gt;


@@ 6102,9 6102,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>Using User-Select</title>
   <link href="https://uglyduck.ca/user-select/"/>
   <link href="http://localhost:4000/user-select/"/>
   <updated>2019-06-03T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/user-select</id>
   <id>http://localhost:4000/user-select</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Highlighting text in order to copy, cut or paste content&lt;/em&gt; 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?&lt;/p&gt;

&lt;h2 id=&quot;introducing-the-css-property&quot;&gt;Introducing the CSS property&lt;/h2&gt;


@@ 6160,9 6160,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>News Websites Are Dumpster Fires</title>
   <link href="https://uglyduck.ca/news-websites-are-dumpster-fires/"/>
   <link href="http://localhost:4000/news-websites-are-dumpster-fires/"/>
   <updated>2019-05-28T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/news-websites-are-dumpster-fires</id>
   <id>http://localhost:4000/news-websites-are-dumpster-fires</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Online news outlets are a dying breed and many users&lt;/em&gt; 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.&lt;/p&gt;

&lt;h2 id=&quot;what-news-sites-get-wrong&quot;&gt;What news sites get wrong&lt;/h2&gt;


@@ 6202,9 6202,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>Text Align: Justify</title>
   <link href="https://uglyduck.ca/text-align-justify/"/>
   <link href="http://localhost:4000/text-align-justify/"/>
   <updated>2019-05-21T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/text-align-justify</id>
   <id>http://localhost:4000/text-align-justify</id>
   <content type="html">&lt;p&gt;&lt;em&gt;The text-align property is fairly well known in the world of CSS&lt;/em&gt;, even among those just starting out with the language. Values such as &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;center&lt;/code&gt;, &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;left&lt;/code&gt; and &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;right&lt;/code&gt; are used often with this property, but a more forgotten option is &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;justify&lt;/code&gt;.&lt;/p&gt;

&lt;h2 id=&quot;what-does-justify-do&quot;&gt;What does justify do?&lt;/h2&gt;


@@ 6239,9 6239,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>Improving Receipt UX</title>
   <link href="https://uglyduck.ca/improving-receipt-ux/"/>
   <link href="http://localhost:4000/improving-receipt-ux/"/>
   <updated>2019-05-14T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/improving-receipt-ux</id>
   <id>http://localhost:4000/improving-receipt-ux</id>
   <content type="html">&lt;p&gt;&lt;em&gt;There was a pretty interesting article posted a couple days ago&lt;/em&gt; about &lt;a href=&quot;https://www.fastcompany.com/90347782/the-humble-receipt-gets-a-brilliant-redesign&quot;&gt;rethinking the standard receipt design&lt;/a&gt; that I found quite compelling. Although, as good as the concept is, I think it can be improved (simplified) even further.&lt;/p&gt;

&lt;h2 id=&quot;what-was-the-redesign-exaclty&quot;&gt;What was the redesign exaclty?&lt;/h2&gt;


@@ 6269,7 6269,7 @@ var inputs = document.getElementsByClassName('checkbox-btn')

&lt;p&gt;Let’s take a look at my redesign concept:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/receipt-update.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/receipt-update.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/receipt-update.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/receipt-update.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/receipt-update.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/receipt-update.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Receipt Update&quot; width=&quot;1600&quot; height=&quot;1200&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/receipt-update.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/receipt-update.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/receipt-update.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/receipt-update.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/receipt-update.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/receipt-update.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Receipt Update&quot; width=&quot;1600&quot; height=&quot;1200&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;

&lt;p&gt;With this layout we are able to keep all the key concepts that &lt;a href=&quot;https://twitter.com/datatoviz?lang=en&quot;&gt;Susie Lu&lt;/a&gt; initially introduced with her receipt design while preserving more space.&lt;/p&gt;



@@ 6287,9 6287,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>Cut Your Forms in Half</title>
   <link href="https://uglyduck.ca/cut-your-forms-in-half/"/>
   <link href="http://localhost:4000/cut-your-forms-in-half/"/>
   <updated>2019-05-08T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/cut-your-forms-in-half</id>
   <id>http://localhost:4000/cut-your-forms-in-half</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Building web forms can sometimes feel like a boring or daunting task&lt;/em&gt;. Don’t pass this dread on to your users - rip out as many of your form fields as possible.&lt;/p&gt;

&lt;p&gt;Web forms tend to get a bad rep, mainly because so many horrible design choices are made without the user experience set at the forefront. Often times clients demand that they &lt;strong&gt;need&lt;/strong&gt; those twenty input fields or else how will they collect critical information from their users? Normally when I’m approached with such a statement I simply ask them:&lt;/p&gt;


@@ 6304,7 6304,7 @@ var inputs = document.getElementsByClassName('checkbox-btn')

&lt;p&gt;Let’s use a real-world form off the &lt;a href=&quot;https://www.greatwestlife.com&quot;&gt;Great West Life Insurance&lt;/a&gt; website as an example (left is original, right is updated):&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/cut-forms.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/cut-forms.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/cut-forms.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/cut-forms.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/cut-forms.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/cut-forms.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Great West Life form update&quot; width=&quot;1623&quot; height=&quot;2881&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/cut-forms.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/cut-forms.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/cut-forms.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/cut-forms.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/cut-forms.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/cut-forms.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Great West Life form update&quot; width=&quot;1623&quot; height=&quot;2881&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;

&lt;h3 id=&quot;breaking-things-down&quot;&gt;Breaking things down&lt;/h3&gt;



@@ 6342,9 6342,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>First Letter Pseudo Element</title>
   <link href="https://uglyduck.ca/first-letter/"/>
   <link href="http://localhost:4000/first-letter/"/>
   <updated>2019-05-02T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/first-letter</id>
   <id>http://localhost:4000/first-letter</id>
   <content type="html">&lt;p&gt;&lt;em&gt;In today’s TypeTip™ we will be taking a look at the often overlooked&lt;/em&gt; &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;:first-letter&lt;/code&gt; CSS pseudo element. Though you might only use this for specific article-format web pages, it’s still a nice-to-have in your web dev toolset.&lt;/p&gt;

&lt;h2 id=&quot;the-html&quot;&gt;The HTML&lt;/h2&gt;


@@ 6380,9 6380,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>Minimal CSS: Dropdown Menu</title>
   <link href="https://uglyduck.ca/minimal-css-menu/"/>
   <link href="http://localhost:4000/minimal-css-menu/"/>
   <updated>2019-04-25T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/minimal-css-menu</id>
   <id>http://localhost:4000/minimal-css-menu</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I love the idea of stripping away as much CSS as possible&lt;/em&gt;, while still maintaining the original UI concept. Let’s build out a demo example with a simple menu dropdown element.&lt;/p&gt;

&lt;p&gt;Interesting facts about our final CSS menu:&lt;/p&gt;


@@ 6437,9 6437,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>CSS Character Unit</title>
   <link href="https://uglyduck.ca/character-unit/"/>
   <link href="http://localhost:4000/character-unit/"/>
   <updated>2019-04-22T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/character-unit</id>
   <id>http://localhost:4000/character-unit</id>
   <content type="html">&lt;p&gt;&lt;em&gt;When it comes to proper readability with large portions of text&lt;/em&gt;, the golden standard is to have no more than &lt;a href=&quot;http://webtypography.net/2.1.2&quot;&gt;75 characters per line&lt;/a&gt;. 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.&lt;/p&gt;

&lt;p&gt;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 &lt;em&gt;better way&lt;/em&gt;.&lt;/p&gt;


@@ 6480,9 6480,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>Browser History Sucks</title>
   <link href="https://uglyduck.ca/browser-history-sucks/"/>
   <link href="http://localhost:4000/browser-history-sucks/"/>
   <updated>2019-04-19T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/browser-history-sucks</id>
   <id>http://localhost:4000/browser-history-sucks</id>
   <content type="html">&lt;p&gt;&lt;em&gt;Have you ever needed to step back through your browser history&lt;/em&gt; to find a particular site or product? Do you remember that experience being good? Most likely not.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;


@@ 6565,9 6565,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>Yes, I Still Use jQuery</title>
   <link href="https://uglyduck.ca/still-using-jquery/"/>
   <link href="http://localhost:4000/still-using-jquery/"/>
   <updated>2019-04-14T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/still-using-jquery</id>
   <id>http://localhost:4000/still-using-jquery</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I have seen a handful of condescending comments from front-end developers&lt;/em&gt; since the newest build of jQuery (&lt;a href=&quot;http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/&quot;&gt;3.4.0&lt;/a&gt;) 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 &lt;em&gt;useful&lt;/em&gt; library comes off as entitled or elitist.&lt;/p&gt;

&lt;ul&gt;


@@ 6603,9 6603,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>CSS Value: currentColor</title>
   <link href="https://uglyduck.ca/current-color/"/>
   <link href="http://localhost:4000/current-color/"/>
   <updated>2019-04-12T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/current-color</id>
   <id>http://localhost:4000/current-color</id>
   <content type="html">&lt;p&gt;&lt;em&gt;There are a large number of nuanced and mostly unheard of&lt;/em&gt; CSS value types, but today we are going to focus on &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;currentColor&lt;/code&gt;. So what is the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;currentColor&lt;/code&gt; value type anyway?&lt;/p&gt;

&lt;blockquote&gt;


@@ 6644,9 6644,9 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 <entry>
   <title>CSS: Indenting Text</title>
   <link href="https://uglyduck.ca/indenting-text-with-css/"/>
   <link href="http://localhost:4000/indenting-text-with-css/"/>
   <updated>2019-04-04T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/indenting-text-with-css</id>
   <id>http://localhost:4000/indenting-text-with-css</id>
   <content type="html">&lt;p&gt;&lt;em&gt;A lot of developers tend to do the bare minimum&lt;/em&gt; 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.&lt;/p&gt;

&lt;p&gt;In today’s &lt;em&gt;TypeTip&lt;/em&gt; we’re going to play around with the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;text-indent&lt;/code&gt; property, look into when it’s best to use it and how to implement it properly.&lt;/p&gt;


@@ 6656,11 6656,11 @@ var inputs = document.getElementsByClassName('checkbox-btn')
&lt;p&gt;Browser support is actually pretty great for such a regularly over-looked CSS property. All major desktop and mobile browsers support it:&lt;/p&gt;

&lt;figure&gt;
    &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/text-indent-compatibility.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/text-indent-compatibility.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/text-indent-compatibility.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/text-indent-compatibility.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/text-indent-compatibility.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/text-indent-compatibility.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Text indent browser compatibility&quot; width=&quot;2084&quot; height=&quot;868&quot; crossorigin=&quot;anonymous&quot; /&gt;
    &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/text-indent-compatibility.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/text-indent-compatibility.webp 320w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/text-indent-compatibility.webp 540w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/text-indent-compatibility.webp 760w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/text-indent-compatibility.webp 980w,
https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/text-indent-compatibility.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Text indent browser compatibility&quot; width=&quot;2084&quot; height=&quot;868&quot; crossorigin=&quot;anonymous&quot; /&gt;
    &lt;span class=&quot;marginnote&quot;&gt;Full support across all browsers.&lt;/span&gt;
&lt;/figure&gt;



@@ 6704,9 6704,9 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht
 
 <entry>
   <title>Simple Does Not Mean Ugly</title>
   <link href="https://uglyduck.ca/simple-does-not-mean-ugly/"/>
   <link href="http://localhost:4000/simple-does-not-mean-ugly/"/>
   <updated>2019-03-25T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/simple-does-not-mean-ugly</id>
   <id>http://localhost:4000/simple-does-not-mean-ugly</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I see new blog posts popping up now and again advocating&lt;/em&gt; for designers to keep their products as simple as possible - and I couldn’t agree more.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;


@@ 6778,9 6778,9 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht
 
 <entry>
   <title>Skip to Content Button</title>
   <link href="https://uglyduck.ca/skip-to-content/"/>
   <link href="http://localhost:4000/skip-to-content/"/>
   <updated>2019-03-24T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/skip-to-content</id>
   <id>http://localhost:4000/skip-to-content</id>
   <content type="html">&lt;p&gt;&lt;em&gt;One of the golden rules for testing your website’s accessibility&lt;/em&gt; 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.&lt;/p&gt;

&lt;p&gt;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:&lt;/p&gt;


@@ 6852,13 6852,13 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht
 
 <entry>
   <title>Prescription Form UI Improvements</title>
   <link href="https://uglyduck.ca/form-ui-improvements/"/>
   <link href="http://localhost:4000/form-ui-improvements/"/>
   <updated>2019-03-12T20:00:00-04:00</updated>
   <id>https://uglyduck.ca/form-ui-improvements</id>
   <id>http://localhost:4000/form-ui-improvements</id>
   <content type="html">&lt;p&gt;&lt;em&gt;I was browsing the &lt;a href=&quot;https://www.clearly.ca&quot;&gt;Clearly&lt;/a&gt; website a few days ago&lt;/em&gt; and ended up using their prescription form to update my worsening eyesight. The design of this form wasn’t &lt;em&gt;bad&lt;/em&gt; per se, but it could certainly be improved.&lt;/p&gt;

&lt;h2 id=&quot;current-design-of-the-prescription-view&quot;&gt;Current design of the prescription view&lt;/h2&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/prescription-ui.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/prescription-ui.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/prescription-ui.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/prescription-ui.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/prescription-ui.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/prescription-ui.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Default prescription UI&quot; width=&quot;1752&quot; height=&quot;1044&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/prescription-ui.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/prescription-ui.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/prescription-ui.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/prescription-ui.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/prescription-ui.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/prescription-ui.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Default prescription UI&quot; width=&quot;1752&quot; height=&quot;1044&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;

&lt;p&gt;As I stated, this design isn’t horrible by any means, but right away we can notice some problems:&lt;/p&gt;



@@ 6874,7 6874,7 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht

&lt;p&gt;Let’s tackle these problems one at a time. First, we want a more defined page layout so the user can scan through the content more easily (left-to-right, down to the next line, then repeat).&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/prescription-ui-update-1.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/prescription-ui-update-1.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/prescription-ui-update-1.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/prescription-ui-update-1.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/prescription-ui-update-1.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/prescription-ui-update-1.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Layout wireframe UI&quot; width=&quot;1600&quot; height=&quot;1200&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/prescription-ui-update-1.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/prescription-ui-update-1.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/prescription-ui-update-1.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/prescription-ui-update-1.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/prescription-ui-update-1.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/prescription-ui-update-1.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Layout wireframe UI&quot; width=&quot;1600&quot; height=&quot;1200&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;

&lt;p&gt;We have now left-aligned the title content to be flush with the OD/OS elements below it to help keep the reading flow consistent.&lt;/p&gt;



@@ 6890,7 6890,7 @@ https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/ht

&lt;p&gt;The original design has some inconsistencies with the link coloring - some being a muted grey while others use the accented blue. Updating all interactive links to use Clearly’s default blue accent color would make for a better disconnect from non-interactive elements.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/prescription-ui-update-2.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/https://uglyduck.ca/public/images/prescription-ui-update-2.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/https://uglyduck.ca/public/images/prescription-ui-update-2.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/https://uglyduck.ca/public/images/prescription-ui-update-2.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/https://uglyduck.ca/public/images/prescription-ui-update-2.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/https://uglyduck.ca/public/images/prescription-ui-update-2.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Layout UI with color&quot; width=&quot;1600&quot; height=&quot;1200&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/prescription-ui-update-2.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/prescription-ui-update-2.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/prescription-ui-update-2.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/prescription-ui-update-2.webp 760w, https://res