Josh Maloon

Dynamic Colour Palette

Colour is a powerful tool for building cohesive digital experiences. Developing a thoughtful colour palette can create a sense of continuity that would otherwise not exist.

For this website, I implemented a dynamic colour system based on a single hue value. Below you can change the base hue by sliding the toggle on the range input.

The colour system is built with CSS Variables and hsla colour definitions.

Using hsla colour definitions significantly simplified the dynamic colour functionality I wanted to implement. Since hsla functional notation accepts a hue value, all I had to do was create a CSS Variable to represent the dynamic hue value and use JavaScript whenever I want to update the value.

Using CSS Variables was an easy decision as it allowed me to define values in one location. This made it super easy to create a "Dark Mode" as I was able redefine the colour definitions in one location and the changes will propagate like magic! Try it out below.

Font Loading Strategy

I have implemented the Flash Of Unstyled Text (FOUT) loading strategy to handle web font loading on this site. With FOUT, the content will be displayed using a system (generic) font until the desired web (custom) font is loaded. This all happens in an instant, or in other words, a "flash".

It probably happened so quickly that you didn't even notice it while this site was loading (and don't bother reloading as your browser has likely already cached the font). Fear not! Click the button below to restore the text to it's "unstyled" glory.

Implementing FOUT is actually not very difficult at all. Most browsers will do all the work for you natively using the font-display: swap property. Even so, I went the JavaScript route for even better support and control.

Implementation is only half of the story though. FOUT does not block content rendering but it can result in dramatic layout shifts when the system font is replaced by the web font. While not totally avoidable, layout shifts can be minimized. On this site I've mitigated layout shifts by styling the text according to the rendered font in an effort to handle the differences in kerning, leading, and tracking.

Life Without CSS

CSS, or Cascading Style Sheets, bring flare and style to the internet. While CSS is the expected default while browsing the web, there are a number of reasons why CSS may fail to load for a website. In the off chance CSS is not available, it’s important that developers use sound HTML principles so that the content is still accessible for users and web crawlers alike.

Click below to explore this website without CSS.