This site runs best with JavaScript enabled.

Custom textures for shadertoy

Simply paste this in to the console to upload your own textures to shadertoy.com in your current session only. Source johnao
Read Article →

JavaScript Array methods

I found myself referring to this cheat sheet by Axel Rauschmayer so much I thought I would share it: Cheat sheet: JavaScript Array methods Deriving a new Array from an existing Array…
Read Article →

Catch all for prefers-reduced-motion

A good blanket remove all animations and transitions for people that prefer not to see them Source moderncss.dev
Read Article →

Stop form inputs zooming when tapped

"Set your form inputs to have a font-size of 1rem (16px) or larger to prevent iOS Safari from automatically zooming in when tapped." @JoshWComeau Source @JoshWComeau
Read Article →

Element.style.cssText property

So found out about Element.style.cssText property today. You can get in-line styles of an element: Or to add / update in-line styles: Source Gomakethings
Read Article →

GIT Revert

To jump back to a previous commit hash. "The --no-commit flag lets git revert all the commits at once- otherwise you'll be prompted for a message for each commit in the range, littering your…
Read Article →

Javascripts map

"The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. You shouldn't be using the map() method if: you're not…
Read Article →

Use CSS to check for a locally installed font

You can use CSS to check for a locally installed font to use before fetching it remotely. Remmber the casscade, in this example the user's local copy of "Helvetica Neue Bold" is used; if the…
Read Article →

Force a file to download instead of open in browser

If you add the download attribute to an a link, it will tell the browser to download the file instead of opening it in the browser. The download attribute works in all modern browsers…
Read Article →

Identifying layout issues with CSS

An update on a well used snippet to identify layout issues with DOM elements. Source Comment on dev.to
Read Article →

Shorthand Ternary Operators in PHP

At Multiple States we use the ACF plugin with Wordpress and sometimes need to set a fallback for fields. Rather than a long If / Else statement we can use a Ternary Operator and to…
Read Article →

PNPM: Performant npm installations

"PNPM uses hard links and symlinks to save one version of a module only ever once on a disk." - pnpm.js.org Having used NPM in my build setup for the last few years many of my projects have…
Read Article →

* + * is a clever css selector

Other wise known as the lobotomized owl selector. See alistapart.com for in depth explanation and more examples. Example Take: and apply: Will only apply a margin-top to an element in…
Read Article →

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 →