Ugly Duck

Designer, developer, hardware tinkerer, open source advocate & consumer of dark roast coffee.

Hello, my name is Bradley Taunt and this is my little piece of the internet. I'm a web designer / developer hybrid obsessed with performance and accessibility. I also enjoy playing with (read: breaking) computer hardware - specifically single board computers and vintage electronics.

I believe in a free and open web, which is why I try to contribute as much as possible to the open source community. Every little bit helps.

I also have a love and passion for creating engaging landing pages that convert. That's why I run a little small, personal venture called Stick Your Landing. Feel free to get in touch if this is something I can help you with!

This blog is a place for me to just dump my thoughts, ranging from design patterns, CSS hacks/demos, custom SBC builds, linux distros and even video games. Articles written here are more or less for my own reference in the future - don't take them so seriously. Some of my more popular and "customized" essays are listed below, if that's your cup of tea.

Enjoy your stay!

Articles & Essays

Personal articles, demos and occasional ramblings.
Subscribe via RSS



Self-Hosting Fathom Analytics with DigitalOcean


Setting Up Fathom Analytics with Netlify


Introducing Writxt


Animated Radio Tab Toggles


Disabling Comments in WordPress


Pure CSS Bar Graphs with Graceful Mobile Fallbacks


Obvious Javascript 'Injection' Fallback


Bidirectional Scrolling: Why Not Both?


Menu Toggle with Pure CSS


Poor Man's CSS Full-Bleed Layout


Simple Navigation Setup in Jekyll 3.9.0


Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal


Over-Engineering an Oil Tank Gauge


My Raspberry Pi Desktop


Linux Mint MacBook Air Setup


Goodbye WordPress, Hello Jekyll (Again)


Audio Hotkeys on Linux Mint


Improving Github’s New Design


Keynote Slides with Pure CSS


Quick & Dirty Theme Switcher


Mini Interactive Keyboard with Pure CSS


Fixing LocalWP on Fedora 32


WP Enqueue for Beginners


Faking 3D Elements with CSS


Stripe Menu Dropdowns (CSS)


Base64 All The Things! (Sometimes)


How to "FLOSS" as a Web Designer


Web Development on a $200 Chromebook


Billing for One CSS Change


Very Basic Form Styling


Improving Tufte CSS for Jekyll


Stop Using Sticky Navigation on Mobile


Plain Text Emails, Please


Being More Efficient as a Designer & Developer


Dynamic Checkboxes


Styling Empty Table Cells


Using HTML Validator Badges Again


They Won't Wait: A Warning for Slow Websites


Publishing Simple Books With Jekyll


Using Hamburger Menus? Try Sausage Links


Making Tables Responsive With Minimal CSS


Write HTML Like It's 1999


Using user-select


News Websites Are Dumpster Fires


Text Align: Justify


Improving receipt UX


Cut your forms in half


First letter pseudo element


Minimal CSS: Dropdown menu


CSS Character unit


Browser history sucks


Yes, I still use jQuery


CSS value: current color


CSS: Indenting text


Simple Does Not Mean Ugly


Skip to content button


Prescription form UI improvements


Animated card tiles


Easy toggle switches


Super Mario blocks in CSS


Proper UI hierarchy


Tabbed content without JavaScript


Easy custom radio inputs


Basic gulp build for Sass


Better Box Shadows


Over-nesting


Using parent selectors in CSS


Width or flex-basis?


Adaptable flexbox grid


What happened to self-hosted blogs?


Pure CSS simple dropdown plugin


Simple accessibility


Using multiple CSS background images


Setting up a free SSL


CSS video backgrounds


CSS variables


Stay hungry


Open source typeface pairings


ET-Jekyll theme


Chasing performance


The death of personality


Unsolicited design review - Dropbox


Goodbye CSS preprocessors


Designers need thicker skin


The wonders of text ellipsis


Aqua UI CSS buttons

Who is Ugly Duck?

The man, the myth, the legend (not really)


About Me (The Long Version)

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!

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.

When I'm not pushing pixels or hacking up some code, you can find me experimenting with the latest CSS, splitting batches of firewood, cheering on the Ottawa Senators, or hanging out with my wife and our two sons. Feel free to also check out my reading list.

I'm a huge fan of video games in general but tend to get sucked into looter shooters and in-depth RPGs. Whenever I manage to get any "free time" (that's a difficult thing to obtain with two kids under 3) you'll find me grinding out power levels in Destiny 2 or being summoned for some jolly co-op in the Dark Souls trilogy.

Why does this site look so plain?

The web has become infuriatingly bloated over time. Tracking scripts, third-party advertisements, fancy "visual" effects, auto-playing videos, and overall just poorly structured HTML has made the internet a horrible place to visit (most of the time). I had the choice to make my personal website "cool" and "flashy" in order to stand out among my peers. I could have used some cutting edge JavaScript libraries, impressed visitors with intricate CSS animations, and took advantage of the latest browser features available.

But I didn't. Instead I designed my site with barely any CSS and zero JavaScript. Feel free to use it yourself or fork it and tweak to your own liking!

Most visitors to this blog just want to read the content. Why put so much garbage in their way to do something so simple? The web can be a better, faster, cleaner place - you just have to make the effort.

Learn more about privacy on this website

Occupation

Working as a designer at Purism, the maker of devices that are open and respect human rights. Currently designing and developing all web-related properties.

Skills & Tools

HTML, CSS, JS, PHP, WordPress, React, Sketch, Photoshop, Inkscape, GIMP

Projects

A collection of on-going and open source projects I've worked on throughout the years.


Privacy

This website will always respect your privacy - something that all sites should do.


Ad Free. Forever.

Don't be confused - I do have a sponsor section on this website. But rest assured, I vet those products / services and manually add them to the site when approved. You can find out more about sponsorships here.

As for 3rd party ads? Screw em. The Internet would be a much better and more tolerable place without them. Not to mention the terrifying amount of data they collect...

Open Source, Privacy Focused Analytics

This site uses the open source analytics platform, Fathom (this link gets you $10 off your first invoice!). Everything is served from uglyduck.ca and respects your privacy and freedom to browse this site without the worry of personal data collection. Why would I want that information anyway?

If interested, you can find out more about Fathom here.

Support

If you happen to enjoy any content on this site and have a burning urge to somehow thank me for it - feel free to support me by using my curated referral links or sponsor products / services. You can learn more about the referral links here and more about sponsorships here.

Thank you.

Colophon

The nitty-gritty details about this site


Static Site Generator

The website is built on top of the latest version of Jekyll. It's a stable SSG and although not *as* popular as it once once, I still love it. I use a small amount of extras for the build, including:

Default Typefaces

I'm using the very beautiful (in my opinion) default system sans-serif typeface, for both article text and the monospace code examples. I highly recommend this typeface to anyone looking for a well designed font, catered towards readability. Plus, you save on bandwidth not loading in custom fonts.

The average page weight on this site is 65KB. That's pretty solid for a personal blog that also loads most of it's pages in a single HTML file.

Performance Metrics

This website only makes one CSS request and uses no JavaScript. The metrics below are based off of Google's Lighthouse audit scores (so take them with a grain of salt).

Perf. A11y Practices SEO
99 93 100 100

Version Control & Hosting

All version control is handled through a private repo on Github (I plan to open source everything once I do some tidying up). I host through Netlify since they make it dead simple to setup things like SSL certs and build via git push commands.

Other

This site is an honorary member of the 1MB Club
No third-party advertising or data collection - More about privacy.
Built with Jekyll & hosted on Netlify.
Maintained with ♥ for the web.

Feedback

Have questions or suggestions regarding this website? Feel free email me.

Becoming a Sponsor

Help support an indie designer writing about the web, all while promoting your product or service


Hold Your Horses - I'm No Sell-Out

First thing to understand about sponsorship - I have to actually like your product/service. I won't post just anything on this blog since it reflects my own personal views. This means I need to stand behind anything I promote here, otherwise I would lose all credibility with my audience.

After all, nobody likes a great, big phony.

What Does It Cost?

The flat fee is $250/month. The duration of the sponsorship can be discussed and customized.

I tend to publish ~2-3 articles each month and promote each piece across my channels. This site receives around 400-1000* unique visitors every month - giving your product / service a good amount of coverage for a reasonable cost.

* sometimes this number can spike as well

What You Get

Sponsors get placed on the top spot on the site, where they can share:

About Referrals

This website features curated referrals in the sidebar panel. Allow me to explain their presence in more detail.


No Spam or Gimmicks

I share a great deal of open source work, demos and tutorials on this little piece of the web. That takes extra time and effort on my part - for which I do not get officially compensated for.

(Don't get me wrong - the kind words I receive are wonderful!)

So instead of loading a bunch of garbage ads or sneaking affiliate links to products in my articles, I decided to only list services that I use and have vetted for myself.

Services That I Actually Use

The sidebar might change over time, but for the most part it will showcase items that are part of my own toolset. By sharing these products, you can be confident that I vouch for these services (since I actively use them day-to-day).

You get to use great products with a little more confidence, while putting a couple bucks in my pocket - indirectly supporting this site.

So if you plan on using any of these services or products, maybe consider using my referral links and help keep this site ad-free!

Privacy

Learn more about this website's privacy standards.

Jekyll Themes

A collection of custom Jekyll themes I have created. All themes are open source and free for personal/commercial use.


John Doe Jekyll
Currently being used on this website. Based off the very amazing John Doe single HTML file website by Gregory Cadars.


ET-Jekyll
Based off of Dave Liepmann's Tufte CSS - which takes it's style and inspiration from the book and handout designs of Edward Tufte.


Lightspeed
An insanely fast and performance-based theme with a perfect Lighthouse score.


Taunt
Simple and minimal blogging theme named after yours truly. (Originally used this as my personal website theme)

Reading List

A shortlist of books that I have found helpful or entertaining.

Non-Fiction

Book Title Author
The Visual Display of Quantitative Information Edward Tufte
Don't Make Me Think Steve Krug
The Design of Everyday Things Don Norman
Great American Folklore Kemp P. Battle

Fiction

Book Title Author
The Metamorphosis Franz Kafka
Of Mice and Men John Steinbeck
Fight Club Chuck Palahniuk
The Stand Stephen King
The Lord of the Rings (Trilogy) J.R.R Tolkien
Berserk (Series, Manga) Kentaro Miura

If you have any suggestions that you think I might enjoy, please feel free to let me know!