Bradley Taunt
Bradley Taunt
Bradley Taunt
The man behind the site… I’m Brad, a designer/developer hybrid. I help software companies improve their user experience and ship more performant products. I’m passionate about open source software, usability, performance, privacy, and minimal design. This small piece of the internet stores a growing collection of my personal brain dumps. I also actively maintain several open source projects. Core tools are HTML, CSS, Ruby, JavaScript & PHP. Currently improving my skills with Rails & MongoDB. I also enjoy tinkering with basic shell scripts and Unix systems.
Latest Posts
Browser History Sucks 2019-04-20 Have you ever needed to step back through your browser history to find a particular site or product? Do you remember that experience being good? Most likely not. Much like printers, the design of browser...
Yes, I Still Use jQuery 2019-04-15 I have seen a handful of condescending comments from front-end developers since the newest build of (jQuery 3.4.0) released a couple of days ago. While I understand not all developers share the same...
CSS Value: currentColor 2019-04-13 There are a large number of nuanced and mostly unheard of CSS value types, but today we are going to focus on currentColor. So what is the currentColor value type anyway? The currentColor value type...
CSS: Indenting Text 2019-04-05 A lot of developers tend to do the bare minimum when it comes to implementing proper website typography. This isn’t an insult - I’m happy that typography is given any thought at all during development, I...
Simple Does Not Mean Ugly 2019-03-26 I see new blog posts popping up now and again advocating for designers to keep their products as simple as possible - and I couldn’t agree more. A lot of designers tend to think they need to reinvent...
Skip to Content Button 2019-03-25 One of the golden rules for testing your website’s accessibility is the “keyboard-only” audit. This is where you test navigating through your entire site without the use of a mouse, but instead rely...
Prescription Form UI Improvements 2019-03-13 I was browsing the Clearly website a few days ago and ended up using their prescription form to update my worsening eyesight. The design of this form wasn’t bad per se, but it could certainly...
Animated Card Tiles 2019-02-27 The design trend of using “cards” or “tiles” to display interactive sections/article headings in an app or website remains a popular choice among designers. So, let’s build a set of animated cards with only...
Easy Toggle Switches 2019-02-18 Sometimes there is a need to use toggle elements in-place of the default checkbox inputs. The problem is, I tend to see a lot of developers reaching for plugins or JavaScript components in order to...
Super Mario Blocks in CSS 2019-02-15 Just because we can, let’s make a quick demo on how to build interactive elements based off the original Mario punch blocks. What our final product will look like: Live CodePen Example The HTML The...
Proper UI Hierarchy 2019-02-05 I often feel like an old man when I complain about flat design and how designers these days have lost (or willfully forgotten) the skill to create accessible UIs with proper visual hierarchy. A skill which...
Tabbed Content Without JavaScript 2019-01-28 Creating tabs is a fairly trivial and common practice in web design, but many times it requires JavaScript to properly implement. Fortunately it is possible to create tabbed content with only...
Easy Custom Radio Inputs 2019-01-21 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,...
Basic Gulp Build for Sass 2019-01-15 Some designers might shy away from build tools when first starting out and I can understand the reasoning - task runners like gulp and grunt can seem daunting at first. So, I’ve decided to showcase my...
Better Box Shadows 2019-01-08 .message { position: relative; z-index: 1; } .box-container, .box-container-depth { background: white; box-shadow: 0 4px 8px rgba(0,0,0,0.3); border: 1px solid #eee; border-radius: 10px; margin: 2rem auto;...