2
More Annotations
5
2
Favourite Annotations
5
2
Text
DESIGNER, DEVELOPER & FREE SOFTWARE ADVOCATE Designer, developer, hardware tinkerer, free software advocate & consumer of dark roast coffee. Hello, my name is Bradley Taunt and this is my little piece of the internet. I'm a UI/UX designer obsessed with performance and accessibility. I also enjoy playing with (read: breaking) computer hardware - specifically single board computers and UGLY DUCK | ARTICLES If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | PROJECTS 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. UGLY DUCK | CLICK TO LOAD WEBSITE IMAGES March 25, 2021 Click to Load Website Images. In my previous post about switching my Jekyll blog over to PHPetite, I briefly mentioned how I only loaded in article images if the user clicked or tapped the empty file element.. 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. UGLY DUCK | MY RASPBERRY PI DESKTOPMY USE CASETHE HARDWARETHE SOFTWAREPERFORMANCE & STATSSEE MORE ON UGLYDUCK.CA PORTABLE PI: CHEAP RASPBERRY PI ZERO HACKER TERMINAL Unmount the microSD device, then place the microSD card in your RPi Zero. Assemble the Raspberry Pi Zero with the Battery HAT (li-ion battery attached) connected via GPIO pins, and the 3.5 display connected on-top of the battery HAT’s pins. Turn on the battery HAT switch to power the RPi Zero. Give the device ~90 seconds to performthe
UGLY DUCK | QUICK & DIRTY THEME SWITCHER June 4, 2020 Quick & Dirty Theme Switcher. Update: This article is no longer relevant since my blog design has changed. I’m keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site.PRIVACY | UGLY DUCK
If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | 89 BLOG POSTS IN A SINGLE HTML FILE 99 Performance Grade. 951 ms Load Time. 231.3 KB Page Size (thank you Netlify compression!) See all the Pingdom details for yourself. Now the Page Size will certainly change as more blog posts are added over time, but if the total webpage size is ~230 KB with 89 blog posts, I figure that gives me the ability to add another 200 or so posts MAKING TABLES RESPONSIVE WITH MINIMAL CSS Demo 1: Just let them scroll. Okay I will admit, this implementation isn’t the greatest but I find it does work well with huge datasets. Simply set a min-width on your parent table element and the browser will just require the user to scroll the contents horizontally. table { min-width: 800px; /* Set your desired min-width here */ } DESIGNER, DEVELOPER & FREE SOFTWARE ADVOCATE Designer, developer, hardware tinkerer, free software advocate & consumer of dark roast coffee. Hello, my name is Bradley Taunt and this is my little piece of the internet. I'm a UI/UX designer obsessed with performance and accessibility. I also enjoy playing with (read: breaking) computer hardware - specifically single board computers and UGLY DUCK | ARTICLES If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | PROJECTS 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. UGLY DUCK | CLICK TO LOAD WEBSITE IMAGES March 25, 2021 Click to Load Website Images. In my previous post about switching my Jekyll blog over to PHPetite, I briefly mentioned how I only loaded in article images if the user clicked or tapped the empty file element.. 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. UGLY DUCK | MY RASPBERRY PI DESKTOPMY USE CASETHE HARDWARETHE SOFTWAREPERFORMANCE & STATSSEE MORE ON UGLYDUCK.CA PORTABLE PI: CHEAP RASPBERRY PI ZERO HACKER TERMINAL Unmount the microSD device, then place the microSD card in your RPi Zero. Assemble the Raspberry Pi Zero with the Battery HAT (li-ion battery attached) connected via GPIO pins, and the 3.5 display connected on-top of the battery HAT’s pins. Turn on the battery HAT switch to power the RPi Zero. Give the device ~90 seconds to performthe
UGLY DUCK | QUICK & DIRTY THEME SWITCHER June 4, 2020 Quick & Dirty Theme Switcher. Update: This article is no longer relevant since my blog design has changed. I’m keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site.PRIVACY | UGLY DUCK
If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | 89 BLOG POSTS IN A SINGLE HTML FILE 99 Performance Grade. 951 ms Load Time. 231.3 KB Page Size (thank you Netlify compression!) See all the Pingdom details for yourself. Now the Page Size will certainly change as more blog posts are added over time, but if the total webpage size is ~230 KB with 89 blog posts, I figure that gives me the ability to add another 200 or so posts MAKING TABLES RESPONSIVE WITH MINIMAL CSS Demo 1: Just let them scroll. Okay I will admit, this implementation isn’t the greatest but I find it does work well with huge datasets. Simply set a min-width on your parent table element and the browser will just require the user to scroll the contents horizontally. table { min-width: 800px; /* Set your desired min-width here */ } DESIGNER, DEVELOPER & FREE SOFTWARE ADVOCATE Designer, developer, hardware tinkerer, free software advocate & consumer of dark roast coffee. Hello, my name is Bradley Taunt and this is my little piece of the internet. I'm a UI/UX designer obsessed with performance and accessibility. I also enjoy playing with (read: breaking) computer hardware - specifically single board computers and UGLY DUCK | PROJECTS 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. UGLY DUCK | INTRODUCING PAGEROAST If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | EASY CUSTOM RADIO INPUTS This is the default radio input. We give it: a name (inputs with a shared name are grouped together); an id (so our label can target this input); a class (so we can style it later); Important: be sure to have a unique id for each input so your labels don’t end up connected to multiple radios. In this demo we are simply incrementing them by one. Labels. Adding the labels is fairly UGLY DUCK | THE LAZY DEVELOPER'S DARK MODE April 12, 2021 The Lazy Developer's Dark Mode. After recently jumping back to Jekyll for my personal blog, I decided to take a closer look at how I was supporting dark mode 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. UGLY DUCK | SHINY, ANIMATED CSS BUTTONS The CSS. First we set the default base styling for all the buttons. We also place the inner text into span elements (I will explain why in a little bit): Now we need to create our shiny element that will pass across the button on hover or focus. For this object we will use the before pseudo element: Next, we tell the before element to swipe BETTER SEARCH RESULTS Searching the web "Searching" is the most common action performed on the internet everyday. Google alone receives 40,000 search queries every second (3.5 billion searches per day on average).That is a lot of queries. That also means there is a great deal of user interaction taking place between what is essentially a single text input and a list of outputted data. UGLY DUCK | KEYNOTE SLIDES WITH PURE CSS If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | FAKING 3D ELEMENTS WITH CSS If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | USING HAMBURGER MENUS? TRY SAUSAGE LINKS Try Sausage Links. When designing medium to large sized menu navigations on the mobile web the default go-to, for some time now, has been hamburger menus. This isn't necessarily a bad thing, but there is a simpler alternative for certain use cases. Before we get into the nitty-gritty details (and a simple demo) of the sausage linkconcept, let
UGLY DUCK | PRODUCT DESIGN, WEB DEVELOPMENT AND FREE SOFTWARE Every little bit helps. 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 UGLY DUCK | ARTICLES If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | PORTABLE PI: CHEAP RASPBERRY PI ZERO HACKERRASPBERRY PI TERMINAL DOWNLOADRASPBERRY PI TERMINAL PROGRAMBOOT RASPBERRY PI TO TERMINALRASPBERRY PI TERMINAL WIFIRASPBERRY PI TERMINAL MODECHEAPRASPBERRY PI KIT
September 16, 2020 Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal. I recently came across the incredibly cool design for an “ultimate Raspberry Pi computer” by NODE and was inspired to create my own “portable” Pi device. Although, with my concept, Idecided to
UGLY DUCK | MY RASPBERRY PI DESKTOPMY USE CASETHE HARDWARETHE SOFTWAREPERFORMANCE & STATSSEE MORE ON UGLYDUCK.CA UGLY DUCK | INTRODUCING PAGEROAST If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | MAKING TABLES RESPONSIVE WITH MINIMAL CSS Demo 1: Just let them scroll. Okay I will admit, this implementation isn’t the greatest but I find it does work well with huge datasets. Simply set a min-width on your parent table element and the browser will just require the user to scroll the contents horizontally. table { min-width: 800px; /* Set your desired min-width here */ } UGLY DUCK | QUICK & DIRTY THEME SWITCHER June 4, 2020 Quick & Dirty Theme Switcher. Update: This article is no longer relevant since my blog design has changed. I’m keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site. BETTER SEARCH RESULTS Searching the web "Searching" is the most common action performed on the internet everyday. Google alone receives 40,000 search queries every second (3.5 billion searches per day on average).That is a lot of queries. That also means there is a great deal of user interaction taking place between what is essentially a single text input and a list of outputted data. UGLY DUCK | FAKING 3D ELEMENTS WITH CSS If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | BETTER BOX SHADOWS Better Box Shadows. Box shadow on HTML elements has been widely supported across most browsers for a while now, but I find the default options don’t allow for much visual manipulation of the shadows in general. Let’s take a look at a default configuration of box-shadow: .box-container { box-shadow: 0 4px 8px rgba(0,0,0,0.3); } UGLY DUCK | PRODUCT DESIGN, WEB DEVELOPMENT AND FREE SOFTWARE Every little bit helps. 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 UGLY DUCK | ARTICLES If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | PORTABLE PI: CHEAP RASPBERRY PI ZERO HACKERRASPBERRY PI TERMINAL DOWNLOADRASPBERRY PI TERMINAL PROGRAMBOOT RASPBERRY PI TO TERMINALRASPBERRY PI TERMINAL WIFIRASPBERRY PI TERMINAL MODECHEAPRASPBERRY PI KIT
September 16, 2020 Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal. I recently came across the incredibly cool design for an “ultimate Raspberry Pi computer” by NODE and was inspired to create my own “portable” Pi device. Although, with my concept, Idecided to
UGLY DUCK | MY RASPBERRY PI DESKTOPMY USE CASETHE HARDWARETHE SOFTWAREPERFORMANCE & STATSSEE MORE ON UGLYDUCK.CA UGLY DUCK | INTRODUCING PAGEROAST If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | MAKING TABLES RESPONSIVE WITH MINIMAL CSS Demo 1: Just let them scroll. Okay I will admit, this implementation isn’t the greatest but I find it does work well with huge datasets. Simply set a min-width on your parent table element and the browser will just require the user to scroll the contents horizontally. table { min-width: 800px; /* Set your desired min-width here */ } UGLY DUCK | QUICK & DIRTY THEME SWITCHER June 4, 2020 Quick & Dirty Theme Switcher. Update: This article is no longer relevant since my blog design has changed. I’m keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site. BETTER SEARCH RESULTS Searching the web "Searching" is the most common action performed on the internet everyday. Google alone receives 40,000 search queries every second (3.5 billion searches per day on average).That is a lot of queries. That also means there is a great deal of user interaction taking place between what is essentially a single text input and a list of outputted data. UGLY DUCK | FAKING 3D ELEMENTS WITH CSS If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | BETTER BOX SHADOWS Better Box Shadows. Box shadow on HTML elements has been widely supported across most browsers for a while now, but I find the default options don’t allow for much visual manipulation of the shadows in general. Let’s take a look at a default configuration of box-shadow: .box-container { box-shadow: 0 4px 8px rgba(0,0,0,0.3); }UGLY DUCK | ABOUT
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. UGLY DUCK | PROJECTS 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.CSS SLOPE GRAPHS
Menu. Home; Articles; About; Projects; Privacy; RSS. CSS Slope Graphs. Jun 7, 2021. I’m a sucker for simplistic and beautifully designed visual data on the web. UGLY DUCK | INTRODUCING PAGEROAST If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | CLICK TO LOAD WEBSITE IMAGES March 25, 2021 Click to Load Website Images. In my previous post about switching my Jekyll blog over to PHPetite, I briefly mentioned how I only loaded in article images if the user clicked or tapped the empty file element.. 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. UGLY DUCK | THE LAZY DEVELOPER'S DARK MODE April 12, 2021 The Lazy Developer's Dark Mode. After recently jumping back to Jekyll for my personal blog, I decided to take a closer look at how I was supporting dark mode 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. UGLY DUCK | QUICK & DIRTY THEME SWITCHER June 4, 2020 Quick & Dirty Theme Switcher. Update: This article is no longer relevant since my blog design has changed. I’m keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site. BETTER SEARCH RESULTS Searching the web "Searching" is the most common action performed on the internet everyday. Google alone receives 40,000 search queries every second (3.5 billion searches per day on average).That is a lot of queries. That also means there is a great deal of user interaction taking place between what is essentially a single text input and a list of outputted data. UGLY DUCK | FAKING 3D ELEMENTS WITH CSS If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | AQUA UI CSS BUTTONS The first step is to remove the browser’s default button styling by using the appearance property. This will help avoid having to fight against the browser and minimize our CSS code. button { -webkit-appearance: none; -moz-appearance: none; } Next, we apply a fairly simple set of CSS that will be shared across both the confirmand cancel
UGLY DUCK | PRODUCT DESIGN, WEB DEVELOPMENT AND FREE SOFTWARE If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | ARTICLES If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | PORTABLE PI: CHEAP RASPBERRY PI ZERO HACKERRASPBERRY PI TERMINAL DOWNLOADRASPBERRY PI TERMINAL PROGRAMBOOT RASPBERRY PI TO TERMINALRASPBERRY PI TERMINAL WIFIRASPBERRY PI TERMINAL MODECHEAPRASPBERRY PI KIT
September 16, 2020 Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal. I recently came across the incredibly cool design for an “ultimate Raspberry Pi computer” by NODE and was inspired to create my own “portable” Pi device. Although, with my concept, Idecided to
UGLY DUCK | CLICK TO LOAD WEBSITE IMAGES March 25, 2021 Click to Load Website Images. In my previous post about switching my Jekyll blog over to PHPetite, I briefly mentioned how I only loaded in article images if the user clicked or tapped the empty file element.. 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. UGLY DUCK | MY RASPBERRY PI DESKTOPMY USE CASETHE HARDWARETHE SOFTWAREPERFORMANCE & STATSSEE MORE ON UGLYDUCK.CA UGLY DUCK | INTRODUCING PAGEROAST If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | CREATE A MAC APP ICON WITH PURE HTML & CSS If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | MAKING TABLES RESPONSIVE WITH MINIMAL CSS Check out the CodePen below to see it in action: See the Pen Responsive Tables #1: Horizontal Scrolling by Bradley Taunt (@bradleytaunt) on CodePen.. I actually prefer this method because of its simplicity and function. Users on mobile are familiar with scrolling since it is one of the most basic actions required. UGLY DUCK | QUICK & DIRTY THEME SWITCHER June 4, 2020 Quick & Dirty Theme Switcher. Update: This article is no longer relevant since my blog design has changed. I’m keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site. UGLY DUCK | FAKING 3D ELEMENTS WITH CSS If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | PRODUCT DESIGN, WEB DEVELOPMENT AND FREE SOFTWARE If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | ARTICLES If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | PORTABLE PI: CHEAP RASPBERRY PI ZERO HACKERRASPBERRY PI TERMINAL DOWNLOADRASPBERRY PI TERMINAL PROGRAMBOOT RASPBERRY PI TO TERMINALRASPBERRY PI TERMINAL WIFIRASPBERRY PI TERMINAL MODECHEAPRASPBERRY PI KIT
September 16, 2020 Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal. I recently came across the incredibly cool design for an “ultimate Raspberry Pi computer” by NODE and was inspired to create my own “portable” Pi device. Although, with my concept, Idecided to
UGLY DUCK | CLICK TO LOAD WEBSITE IMAGES March 25, 2021 Click to Load Website Images. In my previous post about switching my Jekyll blog over to PHPetite, I briefly mentioned how I only loaded in article images if the user clicked or tapped the empty file element.. 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. UGLY DUCK | MY RASPBERRY PI DESKTOPMY USE CASETHE HARDWARETHE SOFTWAREPERFORMANCE & STATSSEE MORE ON UGLYDUCK.CA UGLY DUCK | INTRODUCING PAGEROAST If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | CREATE A MAC APP ICON WITH PURE HTML & CSS If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | MAKING TABLES RESPONSIVE WITH MINIMAL CSS Check out the CodePen below to see it in action: See the Pen Responsive Tables #1: Horizontal Scrolling by Bradley Taunt (@bradleytaunt) on CodePen.. I actually prefer this method because of its simplicity and function. Users on mobile are familiar with scrolling since it is one of the most basic actions required. UGLY DUCK | QUICK & DIRTY THEME SWITCHER June 4, 2020 Quick & Dirty Theme Switcher. Update: This article is no longer relevant since my blog design has changed. I’m keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site. UGLY DUCK | FAKING 3D ELEMENTS WITH CSS If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | ABOUT
If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
CSS SLOPE GRAPHS
Menu. Home; Articles; About; Projects; Privacy; RSS. CSS Slope Graphs. Jun 7, 2021. I’m a sucker for simplistic and beautifully designed visual data on the web. UGLY DUCK | PROJECTS 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. UGLY DUCK | CLICK TO LOAD WEBSITE IMAGES March 25, 2021 Click to Load Website Images. In my previous post about switching my Jekyll blog over to PHPetite, I briefly mentioned how I only loaded in article images if the user clicked or tapped the empty file element.. 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. UGLY DUCK | INTRODUCING PAGEROAST If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | SHINY, ANIMATED CSS BUTTONS If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | QUICK & DIRTY THEME SWITCHER June 4, 2020 Quick & Dirty Theme Switcher. Update: This article is no longer relevant since my blog design has changed. I’m keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site. BETTER SEARCH RESULTS Searching the web "Searching" is the most common action performed on the internet everyday. Google alone receives 40,000 search queries every second (3.5 billion searches per day on average).That is a lot of queries. That also means there is a great deal of user interaction taking place between what is essentially a single text input and a list of outputted data. UGLY DUCK | FAKING 3D ELEMENTS WITH CSS If you would like help support this blog, please consider donating to help keep articles ad-free. 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.
UGLY DUCK | AQUA UI CSS BUTTONS May 28, 2016 Aqua UI CSS buttons. 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). Ugly Duck (Quack, Quack) Home Articles About Projects Privacy Contact DESIGNER, DEVELOPER, HARDWARE TINKERER, FREE SOFTWARE ADVOCATE & CONSUMER OF DARK ROAST COFFEE. Hello, my name is Bradley Taunt and this is my little piece of the internet. I'm a UI/UX designer 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 and create my own libre software products. Every little bit helps. This blog is a place for me to just dump my thoughts, ranging from design patterns, CSS hacks/demos, custom SBC builds, linux distros andeven 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!
------------------------- POPULAR ESSAYS & THOUGHT EXPERIMENTS Better Search Results A UX experiment and case study re-thinking the design of search resultlayouts.
Blog Anonymously
Tips and tricks on how to blog anonymously across the interwebs.Frugal Web Browser
A design experiment exploring the concept of a performance-focused webbrowser.
If you would like help support this blog, please consider donating to help keep articles ad-free . 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. This page is valid HTMLDetails
5