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 we have to start with. This will let the user toggle the nav and see the links by toggling setOpen . They can then navigate to a new page, but…
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 running. Since I can create a LAMP stack (Linux... AMP) running on my Mac. This is a bit closer to what the site would be running on in the…
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 versatile testing tool and is incredibly easy to set up as a standalone testing tool, but it can be even more useful once it's integrated with…
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 accessible within the local scope. For example: As you can see cycles only exists inside our function doSomething because it is locally…
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 castles and emojis 🤔... Global and local scope Imagine a castle. There is the land outside the castle which is global , and there is the land…
CORVID-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 pros/cons and highs and lows of the whole experience as it progresses. So far the 2 biggest factors to me have been the change to routine and…
I like to run. I run a lot, and I've found myself running every day of the week with little focus on what I want to achieve. Every day is the same 4-8km with a longer run on a Sunday. It's quite hard to progress myself, and measure my progress when I've been doing this because it all stays the same. Monday - Run 4km because my legs are tired Tuesday - Run 6-8km Wednesday - Run 6-8km Thursday…
The Slack (desktop) client allows you to create your own themes. But did you know that you can also set the theme via a message. Simply send a message with the contents being 8 comma separated hex codes. You don't have to send the message to anybody either - Just send it to yourself! These stand for the following elements: Sidebar & top bar background ???? Highlighted channel background…
Grids are the latest layout model to join the CSS spec after flex. Like flex, grids open up a whole new world of layout possibilities that will make every web developer's life a whole lot easier. Unlike flex, grids allow you to use more than one dimension at a time. Flex is row OR column. Grid is row AND column. As with flex there are some issues with support, but CSS Grids works on the latest…
There are many ways that a ReactJs app can be created. The aim of this guide is to get up and running with a basic react app as quickly as possible. That means no other fancy libraries such as Redux, Router, Relay or anything else beginning with R (seems like there is a theme going on). There’s also going to be no Flux or jQuery or any other async included and certainly no configuration needed via…
HTML 5 number pickers are great, since they help restrict users to the input ranges required in certain cases. Some browsers add little up and down arrows to help the user step though numbers. On some browsers the pickers show by default even when the form inputs are not focused, which is a bit ugly. You can use CSS to turn off the number input arrows. Obviously you want to put them back on…
When you’re building a website one of the most important steps is the building of the templates. Building static templates is almost always quicker than building integrated templates such as WordPress, Django or Rails. One of the biggest issues with using static templates straight off the file system is that file:// urls can have issues and relative links may have to be different than what they…