Code

If you’re looking for an alternative approach to responsive navigation, which doesn’t involve the ‘hamburger’ this may be for you.

‘How to use cookies with critical path CSS so returning visitors load the full stylesheet instead. A follow-up to the critical CSS post, covering the caching side.’

Why not to add a base level of styles that are defaults for the majority of elements.

object-fit is like background-size but for inline images. Combined with viewport units, it lets you size images without distortion — no more awkward workarounds.

An updated look at Sass, covering newer features like maps, @each, and using the Breakpoint extension for managing media queries more effectively.

How to use BrowserSync with Safari and iOS devices to test responsive designs without the usual device hassle. Mac only, using Xcode and Safari.

A simple CSS technique for managing text colour on different background colours, without writing a separate selector for every combination.

‘SVG filter effects are useful for illustration details on the web. This post covers two problems encountered using Gaussian blur — lower saturation in Safari and filter clipping.’

‘How to animate and reuse inline SVG with CSS. Using currentColor and groups you can change fills and animate paths, saving on page weight by avoiding multiple images.’

Images for me is something I consider the most tricky part of building a website, particularly for a portfolio focused website. It’s important to display these images in the best quality and smallest file size you can.

This post covers how I used the opportunity to not use jQuery to further my Javascript knowledge, as well as the performance benefits gained from this. I found alternatives to what jQuery offers and it wasn’t completely simple, but hopefully I can show beginners alike how to overcome some of the problems.

A look at a website I made. Starting with how I setup critical and asynchronous CSS to be a maintainable part of my workflow.