Articles

To get a user's prefered locale we can query the navigator.language. To change your language in Chrome go to chrome://settings/languages and add/edit the list of languages. To get the full list of user languages we can use navigator.languages. This retur...

When building a React app there are a number of ways you can styles your components and layout. These range from plain CSS classes on elements through to fully integrated style libraries that handle building the styles and creating class names for you. Th...

If you have ever used JavaScript variables then the concept of CSS variables should feel pretty familiar. You set a variable You use the variable CSS variables follows this same pattern, but the language is slightly different. What is happening here? F...

On the 15th of July 2019, Ffordd Pen Llech became the Guinness world record holder for the steepest street in the world at 37.5%. The road is fairly infamous amongst cyclists as a hill climb (although it's actually a 1 way road - downhill). It starts behin...

Memoization is used to speed up applications by remembering the results of "expensive" function calls and calculations, so that they don't need to be recalculated again when the inputs have not changed. For example, if I ask you to calculate the results o...

On my site there is a toggling navigation menu. But when I toggle it open and then click a link it stays open. This is not right - it should close when you change location. Let's fix it using some really simple hooks in a few minutes. First lets see what w...

WordPress runs on a variety of platforms, but last time I was developing I was using a MAMP stack - Mac Apache MySQL & PHP. It's been a while since I was working on WordPress sites and I no longer have MAMP installed on my machine, however I do have Docker...

This is a brief guide into setting up Playwright so that it integrates with your existing Jest testing suite. The aim is to get you using Playwright quickly and easily so that you can test the frontend of your web applications. Playwright is an incredibly ...

Closures are a way to retain a local variable's privacy, but allow it to be accessible in a global scope. JavaScript has global variables and local variables. Global variables are accessible to everything in your application. Local variables are only acce...

Scope refers to which functions, variables and objects other functions, variables and objects are able to access when an application is run. It can seem confusing at first, but with a slightly strange example I will try and explain the basics unsing castle...

COVID-19 has changed things completely. In a matter of days I have switched from being in an office every day to being at home 24/7. It's not typical WFH, but it does contain a large proportion of the WFH experience. I want to breakdown and understand the ...