Most people on their way to work carry some sort of bag. I, as a developer, am no different. Some of the stuff I carry around will be common things you’d expect someone spending most days at a 9-to-5.

But I believe I carry around a few things that only a techie or nerd would carry around. I thought it would be a good idea to share some of the things I have kept in there. You can compare with me and see if I’m doing something different, or maybe you have some suggestions as to what I can add?

So, without further ado, let’s get it all out on the table.

I thought I should actually start with the bag because it’s more important than you think. It needs to be comfortable when it gets heavy. It needs to be able to fit all your gear. Compartments are important, and it also needs to look half-decent. I nearly said cool, but I don’t think I ever look cool.

What does a developer carry around in a bag?

Have you ever seen those card-flipping games where either clicking or hovering over them would display the underside of that card? I’m going to show you how to create that same card-flipping animation in 

This tutorial will introduce you to the clip-path attribute while showing you how to use the transform attribute to flip in 3D.

Below is the final animation we will be creating. I have given crass colours to each side so it is clear which side is being flipped.

Pure CSS card flipping animation

Images can make forms more intuitive for users when they are filling them out. Most forms can’t be adjusted to have images but choosing from a list of options can make the whole process more user-friendly. We are going to use User Profiles as an example.

I’m talking about radio buttons, checkboxes, dropdowns and lists. Items that require the user to choose from a selection of options. Adding animation into all of that can take it that one step further.

 to toggled active states when clicked. But the animation is done in CSS and with SVG’s.

Animated profile tick selector

There is an abundance of loading spinners out there for you to download or use, but how easy are they to implement, or even write yourself? This one is really easy, although you can build on it to make it more flashy.

This one has a two-tone colour, which spins one way, before slowing down and spinning the other, then repeat. See, nice and easy. All created with only 

First, you’ll need to actually create the spinner, which is easily done with the following code.

HTML

Easily create your own CSS loading spinner

You’ve arrived at the same place I had a few months ago, trying to improve your 

 (or any other) site. Let me tell you what I had to do to get fairly decent scores, and show you the plugins and changes you’ll need. But first…

Back in March, Google announced that they were rolling out their 

 search algorithm. This means that Google will be using what your website looks like on mobile as the starting point of how they index your site, instead of the desktop version, which is what they used to use. A good explanation of this has already been written by 

This leads to a lot of people scrambling over to 

, in order to get their site ready for, or take advantage of, the upcoming changes. You ultimately end up at the PageSpeed Insight page for developers. This allows you to input a URL and see what your website is scoring for both mobile and desktop. What makes this tool extra vital, is that it clearly points out what needs adjusting or improving, and why. Then directs you to documentation to help you make the changes. Awesome, right?

Get top Pagespeed insight scoring on your WordPress site

 as a programmer to list either URL paths, or file paths, some of those might start with a forward slash. In excel, if you enter a forward slash as the first character in a cell, it’ll prompt you with a the Keyboard Shortcut Menu key list.

What that means is that all the buttons within the toolbar will appear with the shortcut character next to it. This is great, if you don’t want to use a mouse to navigate the Excel Toolbar, but if you are like me, and want to list some web pages that need checking, then this can become restrictive, and become annoying very quickly.

Luckily, there is a simple solution, although hard to find if you are not sure what this current action is called.

Change Excel Slash Menu Key

Underlining text can be great for highlighting or drawing attention to certain words or phrases, but on a website, wouldn’t it be awesome if we could animate that underline? If you hover over my site menu above, you’ll see that each menu item has an animated underline hover status.

To create this effect is fairly easy. We can create this effect without any 

, but all of my styling will be in SCSS. If you don’t want to use SCSS, then view the demo below in CodePen and you’ll be able to toggle between CSS and SCSS.

Firstly, we are going to create our list of items to animate. We are going to be using an unordered list. You can use whatever you want.

Animated underline hover status using CSS

The default checkbox supplied by most browsers is not that visually appealing. Although you can increase, or decrease the size, there is very little you can do with it in terms of styling.

So, what do you do should you wish to have something a little more stylish? Let me show you how to create a replacement checkbox to add flair to your mundane forms.

The answer is to create your own display. What we’ll do in this example is essentially link up a label to the checkbox, hide the checkbox so that we can use its functionality, and display a replacement using pseudo-elements. This will all be done in pure HTML and CSS.

The first thing we need to do is create our display, which is very basic.

Replacement checkbox with animation

Have you ever needed to create a bunch of random file names to test something like 

? Well, recently I did, and I didn’t have a collection of files to hand that would test the regular expression in the way I required.

So what do programmers do when they have a need? They fill a need, to paraphrase from the animated film 

. We are going to write a script that creates a chosen number of random file names. We’ll allow it to select from an approved list of extensions, and a collection of words to make it look like actual file names.

This creates file names that will realistically match the ones that will appear in a live environment. Having better data, to begin with, will improve your code because it will allow you to deal with unexpected file names that you might not have tested normally. This will allow you to put code to handle these issues at dev time is always better than just before making a project live.

Create realistic random file names

 error that I was getting from my preprocessor tools.

If you happen to create you own script for WordPress, either Plugin, or Theme, you may also use preprocessor tools to build those scripts.

During one recent build, I happened to be running 

 to verify the quality of the Javascript that I was writing.

I recently came across a problem where JShint refused to validate perfectly valid script. The problem seemed to be that it wasn’t aware of a WordPress global JavaScript variable: 

My programming musings that nobody else reads

Page 2