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
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 websiteOccupation
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.
-
PHPetite
PHPetite (/p/h/pəˈtēt/) is a single file, static blog generated from PHP. -
ThriftyName
Get a custom brand name for just $5. -
Writxt
Browser localStorage note taking app, with the ability to export content as output.txt -
1MB Club
An exclusive members-only club for web pages weighing less than 1 megabyte. -
CryptoBucks
Simple Bitcoin currency rates. No ads. No trackers. Just rates. -
Frugal Web
A design experiment exploring the concept of a performance-focused web browser. -
Jekyll Themes
A collection of custom Jekyll themes I have created. All themes are open source and free for personal/commercial use. -
Web Audit
A simplified and easy-to-use item checklist to audit your website for proper formatting, performance, accessibility, and security standards. -
Vanilla CSS
A minimal baseline stylesheet for any web project. It includes a basic reset and default styling for all HTML5 elements. -
Flexbox Bar Graphs
Pure CSS bar graphs with a graceful mobile fallback. Open source and 100% customizable. Focused on minimalism. -
Normform
Simplify your forms with a simple, pure CSS form plugin. -
Open Type
A public package CDN for open typefaces that have no other place on the web to call home. -
Watch Your Figure (WYF)
An extremely simplistic CSS "plugin" that toggles the figcaption for individual figure elements. -
Benched
Create a minimal portfolio based on your Dribbble account. -
Super Pseudo
A microsite showcasing how all web content can be generated solely through pseudo elements. -
TypeSafe CSS
A baseline stylesheet that focuses on readibility and perfromance. -
CSS Graphs
A collection of pure CSS graphs with a graceful mobile fallback. Inspired by the data design concepts advocated by Edward Tufte.
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:
- custom
navigation
data files - jekyll-paginate
- jekyll-cloudinary (for optimizing images / videos)
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:
- their product / service name
- small blurb about their product / service
- custom link address
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!