Ugly Duck

Articles

Personal articles, demos and occasional ramblings. Subscribe via RSS

PS4 Download UI with Pure CSS

Recreating the PS4 system OS download UI with only CSS.

Jun 20, 2021

CSS Slope Graphs

A simple tutorial showing how to create simple slope graphs with only CSS.

Jun 7, 2021

SOMA Inspired Terminal Display with CSS

A detailed tutorial on recreating the interactive terminals from the game SOMA.

May 29, 2021

My Changing Opinion on Personal Website Design

Let's discuss my love-hate relationship with web fonts.

May 19, 2021

Shiny, Animated CSS Buttons

A simple tutorial to create shiny, animated buttons with pure CSS.

Apr 27, 2021

Create a Mac App Icon with Pure HTML & CSS

Step-by-step instructions on how to render a fully designed MacOS icon with only HTML & CSS.

Apr 13, 2021

The Lazy Developer's Dark Mode

A quick walkthrough on how to build out a fully functional dark mode for your website, with barely any code.

Apr 12, 2021

Click to Load Website Images

How to setup your web images to only load when a user clicks or taps on them

Mar 25, 2021

89 Blog Posts in a Single HTML File

Generating a my personal blog website as a single file via PHPetite

Mar 22, 2021

Introducing PageRoast

Receive a detailed report analyzing your landing page with actionable items to improve your conversion rate.

Mar 11, 2021

ThriftyName: $5 Brand Names

I have officially launched an amusing side project that creates brand names for $5 a pop

Feb 25, 2021

Self-Hosting Fathom Analytics with DigitalOcean

Step-by-step guide explaining how to setup your own self-hosted version of Fathom Analytics on DigitalOcean

Feb 2, 2021

Setting Up Fathom Analytics with Netlify

A simple tutorial on how to best setup Fathom Analytics while using Netlify to host your website

Jan 19, 2021

Introducing Notez

I created a very basic note taking web app that utilizes the browser's local storage and comes packaged with an export function

Jan 13, 2021

Animated Radio Tab Toggles

Sometimes you want or need to implement a classy “slide” input toggle but don’t want the added JavaScript baggage. Here’s how you can do such a toggle with pure CSS.

Jan 5, 2021

Disabling Comments in WordPress

Disabling WordPress comments across both past and future posts can be a little tricky. Let's make things as simple as possible

Dec 28, 2020

Pure CSS Bar Graphs with Graceful Mobile Fallbacks

A deep-dive tutorial into creating flexbox-based bar graphs that become data tables on smaller devices

Dec 8, 2020

Obvious Javascript 'Injection' Fallback

Simple tutorial on how to create an easy content fallback for Javascript content injection

Dec 4, 2020

Bidirectional Scrolling: Why Not Both?

Discussing the design decisions of bidirectional scrolling in regards to performance

Nov 9, 2020

Menu Toggle with Pure CSS

A short tutorial on how to design a menu navigation toggle with only CSS

Oct 19, 2020

Poor Man's CSS Full-Bleed Layout

Quick tutorial on how to implement a fancier "full-bleed" element effect with barely any CSS at all

Oct 7, 2020

Simple Navigation Setup in Jekyll 3.9.0

Detailing the process of setting up dynamic navigation in Jekyll without the hassle

Sep 29, 2020

Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal

The full process of building and setting up a terminal-based Raspberry Pi Zero W as a portable laptop

Sep 16, 2020

Over-Engineering an Oil Tank Gauge

How I almost went too far down the line of over-engineering a simple broken oil tank gauge

Sep 9, 2020

My Raspberry Pi Desktop

My personal Raspberry Pi 4 build for my daily desktop device

Sep 2, 2020

Linux Mint MacBook Air Setup

The full process of recycling an old MacBook Air to run Linux Mint

Aug 16, 2020

Goodbye WordPress, Hello Jekyll (Again)

Breaking down why I've transitioned back to Jekyll from WordPress

Aug 13, 2020

Audio Hotkeys on Linux Mint

A simple walkthrough on how to setup audio hotkeys on a fresh Linux Mint install

Jul 14, 2020

Improving Github’s New Design

Let's walkthrough a design thought-experiment on how we could easily improve the current Github repo page layout

Jul 7, 2020

Keynote Slides with Pure CSS

Building out a reusable keynote slide plugin with only pure CSS

Jun 22, 2020

Quick & Dirty Theme Switcher

Tutorial on how to easily implement your very own website theme switcher

Jun 4, 2020

Mini Interactive Keyboard with Pure CSS

Demo and tutorial on how to create an interactive, two-key keyboard with pure CSS

May 13, 2020

Fixing LocalWP on Fedora 32

Fixing a known (and annoying) bug with LocalWP on the latest version of Fedora

May 6, 2020

WP Enqueue for Beginners

A complete breakdown of how to properly implement WP Enqueue items in your WordPress projects

May 5, 2020

Faking 3D Elements with CSS

Tutorial on how to design a pure CSS object that gives the illusion of a 3D element

Apr 29, 2020

Stripe Menu Dropdowns (CSS)

A demo showing how to recreate the Stripe website menu dropdown without any JavaScript

Mar 31, 2020

Base64 All The Things! (Sometimes)

Learn why and how to convert and implement most web elements to base64 encodings.

Mar 18, 2020

How to "FLOSS" as a Web Designer

A detailed breakdown of how to only use free-and-open source software as a web designer

Feb 7, 2020

Web Development on a $200 Chromebook

Detailing my switch over to Chrome OS from the Apple ecosystem

Jan 7, 2020

Billing for One CSS Change

Stop selling yourself short as a designer by doing work for free. Every second spent working is billable

Nov 29, 2019

Very Basic Form Styling

Sometimes using the default browser styling for forms works just fine

Nov 13, 2019

Improving Tufte CSS for Jekyll

Breaking down the improvements to both speed and performance made to my ET-Jekyll theme step-by-step.

Nov 1, 2019

Stop Using Sticky Navigation on Mobile

Sticky navigation creates a horrible experience for your users and also looks like trash from a UI perspective.

Oct 6, 2019

Plain Text Emails, Please

The internet has enough bloat, I don't need it leaking into my emails as well.

Sep 8, 2019

Being More Efficient as a Designer & Developer

Talking about being more efficient with your time as a designer when developing new projects or working with clients.

Aug 27, 2019

Dynamic Checkboxes

Walking through a simple tutorial on designing and developing custom checkbox elements that dynamically update outputted content.

Jul 29, 2019

Styling Empty Table Cells

Tables can often times have blank pockets of data. Let's take a quick look at how to target and style empty table cells.

Jul 16, 2019

Using HTML Validator Badges Again

Websites at one time wore badges of honor, proving that their code was semantic. I think it's time we bring HTML badges back.

Jul 4, 2019

They Won't Wait: A Warning for Slow Websites

Speed and performance are critical to having a solid experience for your users. Learn how to implement simple performance wins without the stress.

Jun 24, 2019

Publishing Simple Books With Jekyll

When thinking about writing and ultimately publishing a simple ebook, most people don't think of using a static site generator like Jekyll.

Jun 19, 2019

Using Hamburger Menus? Try Sausage Links

Hamburger menus have become the go-to implementation for mobile navigation systems - but are they always the best solution?

Jun 13, 2019

Making Tables Responsive With Minimal CSS

Building responsive tables can often become a nightmare. Learn how to easily implement responsive table layouts with only CSS.

Jun 10, 2019

Write HTML Like It's 1999

New web tools make the lives of developers easier but can sometimes break away from proper HTML structure.

Jun 7, 2019

Using user-select

Set your user text selection to highlight all or none of your content with a couple lines of simple CSS.

Jun 3, 2019

News Websites Are Dumpster Fires

News websites are absolute garbage thanks in part to vendors spamming advertisements and blackhat, clickbait tactics.

May 28, 2019

Text Align: Justify

You have more than likely used the text-align CSS property in your projects - but today we're going to take a look at the "justify" value.

May 21, 2019

Improving receipt UX

As a developer, you've probably built web forms at some point in time - but have you properly optimized them?

May 14, 2019

Cut your forms in half

As a developer, you've probably built web forms at some point in time - but have you properly optimized them?

May 8, 2019

First letter pseudo element

Set specific styling for the first letter of a text element with this handy and fully supported CSS pseudo element.

May 2, 2019

Minimal CSS: Dropdown menu

Simple demo on how to develop CSS menu dropdowns with as little code as possible, while still maintaining proper accessibility support.

Apr 25, 2019

CSS Character unit

Set the minimum or maximum length of text elements by using the helpful character unit CSS attribute.

Apr 22, 2019

Browser history sucks

The default browser history user experience is pretty awful. Search is limited, forcing users to remember exact dates of their visited sites - but we can improve this.

Apr 19, 2019

Yes, I still use jQuery

It isn't the "latest and greatest" library out there. Some even claim that the jQuery is "dead" - but not for me.

Apr 14, 2019

CSS value: current color

Taking a look at how to best use the very overlooked currentColor CSS value type in your projects.

Apr 12, 2019

CSS: Indenting text

Implement better typography styling by taking advantage of the extremely useful CSS text-indent property.

Apr 4, 2019

Simple Does Not Mean Ugly

Designers often conflate the concept of "simple design" with "minimalism". The two are not mutually exclusive.

Mar 25, 2019

Skip to content button

A quick demo on how to improve your site's overall accessibility by including a skip to content button.

Mar 24, 2019

Prescription form UI improvements

Breaking down the process on redesigning a web form for prescription glasses from a purely visual UI perspective.

Mar 12, 2019

Animated card tiles

In this tutorial we explain step-by-step how to build out tiled cards that animate with user interaction using pure CSS.

Feb 26, 2019

Easy toggle switches

Using only CSS, we can create beautiful toggle switches in place of the default browser radio or checkbox inputs.

Feb 17, 2019

Super Mario blocks in CSS

Ever wanted to recreate the Super Mario blocks in CSS? Of course you have! In this tutorial we will breakdown how to do just that, step-by-step.

Feb 14, 2019

Proper UI hierarchy

Current industry trends such as flat or material design have placed accessibility and visual hierarchy as secondary requirements. Hopefully we can start to fix that.

Feb 4, 2019

Tabbed content without JavaScript

Learn how to implement tabbed navigation content without the need to use plugins or any kind of JavaScript.

Jan 27, 2019

Easy custom radio inputs

Let's face it - the default browser styling for radio inputs is terrible. In this article we breakdown how to create beautiful radio options with just CSS.

Jan 20, 2019

Basic gulp build for Sass

My own personal gulp starter file used for most of my projects when compiling and processing Sass.

Jan 14, 2019

Better Box Shadows

Further improving on the default browser box-shadow styling with a little help from well-placed pseudo elements.

Jan 7, 2019

Over-nesting

Preprocessors like Sass and Less have made development much easier, but you should always be careful not to go overboard with CSS nesting.

Jan 5, 2019

Using parent selectors in CSS

Find out how to target an element's parent directly in CSS by using two simple JavaScript packages.

Dec 18, 2018

Width or flex-basis?

Is it better to use width or flex-basis for layouts in CSS? Let's breakdown the most common use cases for each and how to implement them.

Nov 27, 2018

Adaptable flexbox grid

The days of overly complex grid systems are gone. Learn how to create adaptable grid systems with flexbox using barely any CSS.

Nov 21, 2018

What happened to self-hosted blogs?

Platforms like Medium have made most original self-hosted blogs a thing of the past. Personally, I think this is terrible for the blogging community as a whole.

Oct 17, 2018

Pure CSS simple dropdown plugin

A simple, JavaScript-free way to implement a custom styled, plug-and-play select dropdown with pure CSS.

Sep 19, 2018

Simple accessibility

Breaking down a few accessibility improvements that you can easily implement into all your current and future web projects.

Sep 6, 2018

Using multiple CSS background images

Somewhat unknown in the CSS community is the ability to have multiple background images set on an element.

Aug 27, 2018

Setting up a free SSL

All websites should be using SSL and there is no excuse not to have it setup. Let me show you how to easily add a free SSL certificate to any project.

Aug 6, 2018

CSS video backgrounds

Safari is actually ahead of the game for once, allowing developers to set video files as background property attributes in CSS.

Apr 15, 2018

CSS variables

CSS preprocessors have allowed developers to use variables for quite some time, but we now have the ability to use these properties in plain vanilla CSS.

Mar 23, 2018

Stay hungry

As designers and developers, we need to keep pursuing what interests us about our industry. Staying passionate can help fuel your ambition.

Feb 11, 2018

Open source typeface pairings

Using premium fonts in your projects is wonderful, but can sometimes fall outside your budget. Here are a few of my personal favorite open source typefaces.

Jan 24, 2018

ET-Jekyll theme

Inspired by the book and handout designs of Edward Tufte, I created an open source Jekyll theme to based off of Dave Liepmann's Tufte CSS.

Jan 13, 2018

Chasing performance

A detailed explanation of how I improved my personal blog's overall performance, while also increasing the average time to paint.

Nov 19, 2017

The Death of Personality

Original design in our industry has greatly declined since the introduction of "flat design". We as designers and developers need better standards going forward.

Oct 31, 2017

Unsolicited design review - Dropbox

A personal review and critique of the "new" Dropbox product and brand redesign. I'm not sure what the hell they were thinking on this one.

Oct 9, 2017

Goodbye CSS preprocessors

Moving away from being so dependent on CSS preprocessors might just help you improve your skillset as a developer. Working with vanilla CSS can be great.

Aug 6, 2017

Designers need thicker skin

Our design industry needs to stop being so fragile and weak when it comes to critical analysis of our work. Stop getting triggered over critics.

Jul 9, 2017

The wonders of text ellipsis

The text ellipsis CSS property can be extremely useful for keeping your content contained without the use of ugly fixed widths or heights.

Nov 14, 2016

Aqua UI CSS buttons

A quick tutorial showing how to easily recreate the original MacOS aqua UI buttons in pure CSS.

May 27, 2016