Code

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

I wrote about critical path CSS earlier in the year, but didn’t cover using cookies to cover the caching part. So, this post will assume that you’ve previously set up your CSS in a similar manner. If not, I advise you read my post about it.After this post, you’ll be able to setup a cookie, to check if a visitor has the CSS cached and no longer requires the critical path CSS.

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

Discovering this CSS feature will make my life much easier where it concerns the positioning of images. It’s like background-size for background images. It’s easy to use and behaves in a similar way albeit different naming. I’m going to show how object-fit and viewport relative units can allow us, to size inline images, without worrying about distortion.

One of my most popular posts Sass hints & tips is a little dated. I was considering just editing the post, but there is still some value in that post. Instead I decided to revisit it through a new post. I will cover a couple of newer additions to Sass that I use and using extensions like Breakpoint for managing media queries in an effective way.

Testing a responsive design on an actual device can be quite annoying when you’re down to the point of refining the design and making it more appropriate to such a small screen. As it’s usually testing and refining the best you can locally, then checking on the device through whatever means you usually do it.

When designing a website you can have varied text colours depending on the background colour. This can be an area of frustration due to the unknown elements that could potentially be contained within an area. Here’s a simple technique for overcoming that.

Using SVG filter effects wasn’t something I was aware of and they have good browser support.However, they are greatly useful when you’re adding illustration with certain details to your website. Even though I only used the gaussian blur filter, I encountered some problems when using it and I’m sure it will apply to using others.

The great thing about SVG is CSS can modify it. Which allows you to modify the way paths look quite drastically. This is really handy for saving on page weight because you don’t have to load multiple images and it looks like it was meant to happen.

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.