This site runs best with JavaScript enabled.

GIT Search

Ever wanted to know when a function or feature was added to a GIT repository (without searching BitBucket or GitHub)? Well you can search directly from terminal. Source git-scm.com
Read Article →

Accessing Wordpress blocks data using parse_blocks()

Having fully accepted Wordpress Gutenberg and made the slow transition over to blocks I will be posting a few things I have learnt on the way. First up will be to get all blocks added to a…
Read Article →

Media Queries in JavaScript

The matchMedia() method returns a new MediaQueryList object that gives us the results of the specified media query string ('(max-width: 600px)' or '(min-width: 1200px)'). With the retuned…
Read Article →

prefers-color-scheme: Dark

I came accross new CSS media query today: prefers-color-scheme: dark. It automatically detects if the user’s OS theme preferences is set to dark. Support is small but so are the number of…
Read Article →

GIT Stash

So I always used GIT stash when I had been working on a bug and getting no where then needed to quickly get back to the root branch or a previous commit. Code would be stashed and forgotten…
Read Article →

some hidden CSS

The ::first-line selector allows you to select the first line in a paragraph (this pseudo element only works on block elements). As above but only the first letter. Nice. This will select…
Read Article →

indexOf

The indexOf() method returns the first index at which a givien element can be found in an array, or it returns -1 if it is not present. You can also use the fromIndex prameter to set the…
Read Article →

How hexcolors work

Hexcolors are six-digit strings representing color values with a leading hash. They’re a numerical form of RGB (Red/Green/Blue), with the first two digital representing R, digits three and…
Read Article →

Adding multiple styles in JS

Using vanilla JS you need to add styles to a DOM element one at a time with the Element.style property. One way you can add multiple styles is by using an object.assign method on the element…
Read Article →

Remove multiple classes

You can easily add or remove multiple classes using the ES6 spread syntax in JavaScript
Read Article →

Some Javascript questions

I generally avoid this type of article but I some how eneded up reading it and a few of the quesitons I needed to look up, check I knew the right answer or could not explain very well. So…
Read Article →

Math

It seems like I am simply re-posting MDN in all my posts, I kind of am. But first it’s an amazing source of information and secondly re posting all the content is a good way to learn it…
Read Article →

Array.prototype.map()

The other day I was asked to explain the .map() method in Java Script although I use it I found I stumbled explaing it so here is a better expernation: 'The map() method creates a new array…
Read Article →

Stop SVGs scaling weairdly

I was reminded of this (vector-effect) technique from a friend Chris Corby . "The value 'non-scaling-stroke' is a keyword for a predefined vector effect that causes an object's stroke-width…
Read Article →

Git branch names and workflow

For a long time at Multiple States we would include the version number in every branch name (eg master_1.2.3_kb_issue123). This has caused some issues as regularly on larger projects…
Read Article →

CSS image masking effect

Create a simple CSS masking effect to reveal layers (currently this only works in limited browsers ). Examples Codepen Example Live Example
Read Article →

Skip to main content

Show link to main content on first tab to allow keyboard users to skip to main content quickly. More links Explanation More with JS
Read Article →

Automated Screenshot Comparaison

Today I wanted to improve my testing process for website builds and came across BackstopJS (an automated screenshot comparison tool). It was relatively simple to set up: I installed it…
Read Article →

Ternary notation

Ternary notation for conditions is something I regularly use but also regularly get mixed up. So, instead of the following: ...You could write a shorter version using the ternary notation…
Read Article →

PHP Shortcut Syntax

I came accross this today: Essentially it is the same as: I don't like shortcut syntax. This example saves me 7 button presses and such a small amount of processing, but is not very readable…
Read Article →

Small JS helper functions using ES6

To speed up our development process and stop re-writing code we use helper functions such as debounce or get scroll direction. To do this we use helper functions stored in ES6 modules and…
Read Article →

SCSS lighten / darken

The CSS preprocessors Sass and LESS can take any color and darken() or lighten() it by a specific value. And a few extra. Sources Thoughtbot
Read Article →

Prefetch

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future. Something that would be easy to add…
Read Article →

Video camera tracking

I have seen a few examples of video camera tracking and was interested to see how it was done. First investigation I found this YouTube video when looking for ways of making these. On…
Read Article →

What is MDX

MDX is markdown for the component era. It lets you write JSX embedded inside markdown. That’s a great combination because it allows you to use markdown’s often terse syntax (such as…
Read Article →