Frontend and Wordpress blog posts

Lightning talk notes: Using fonts for super sharp icons!

Hi, these are the notes to go along with the lightning talk that I gave a couple of days ago (21st Nov 2017). If you’ve forgotten the name of a plugin or want to copy and paste some code that I mentioned, sweet – you’ve come to the right place. If you didn’t catch the… read more

gzip + WordPress + 💫 = 😎

Ok, so what does the blog title actually mean? Well it’s my conclusion to some of today’s research, it means the following: gzip compression with a WordPress install and a sprinkle of magic equals… put your feet up, you’ve just made your pages load faster, and you’re in google’s good books Quick pointers on using gzip with WordPress This post is a… read more

Step by step, pure CSS animated toggle switch

For me, subtle interaction animations can be a sweet touch and can breathe life into static looking page. For a recent project, I was asked to build some fancy toggle switches as part of a form, the result turned out fairly nicely so I thought I’d share a quick how to of how I styled the switches with… read more

Google maps toggle zoom with css

In development there’s often more than one way to skin a cat. When finding solutions for front end questions I like to explore different avenues, javascript, jQuery, framework, pure css maybe? In this case I’ll run through how I tackled the annoying problem of google maps zooming when scrolling though a web page. Disclaimer: This might not… read more

What is wp-embed.min.js, and how can it lead to faster page loads?

Recently, in an aim to optimise page loading speeds, I’ve been paying a lot of attention to javascript files that are loaded by WordPress and plugins. I spotted that wp-embed.min.js is a file that WordPress will load by default into all pages. After a quick look (https://codex.wordpress.org/Embeds), I found that it is the plugin that… read more

Background images with alt tags for accessibility

If you’re front-end developer, chances are that at some point you’ll need to use the css background-image property to display an image that isn’t just for presentational purposes. An example of which might be a full width banner image that resizes responsively. In this scenario, we can use the css background property and set background-size: cover; this… read more