Solving real-world problems with quality web applications

I'm a software developer who specialises in creating large-scale JavaScript applications, using modern web standards.


Let's work together! →

  1. Making a Chart.js Chart Accessible

    Most charts are fairly inaccessible due to their graphical nature and we should provide an alternative way for users of assistive technologies to consume the same data. This article shows how to do just that.

  2. Destructuring Variables in Vue.js Loops

    Vue.js allows us to destructure objects within the v-for loop attribute, making our code even neater. Find out how here!

  3. Making Accessible Icon Buttons

    We often create buttons with no text and just an icon but these are inaccessible to screenreader users. This article shows how to add alternative text for screenreaders while maintaining your UI.

  4. Giving Destructured Variables Default Values

    Some objects might be missing certain properties which can cause us issues. We can solve it by specifying a default value for that destructured variable so we always have a value.

  5. Renaming Destructured Variables

    For whatever reason, we sometimes can't use the object's key as a variable name when destructuring. We can easily rename it and use one that suits. Find out how here.

  6. 10 Ways to Debug your JavaScript

    Since the humble beginnings of littering your code with alert('here') statements, debugging JavaScript has come a long way. Today I run down 10 different ways to debug your JavaScript code.

  7. Conditionally Showing Elements Based on a Vue.js Slot being Populated

    I came across a situation recently where I wanted to change the markup in a component if a particular slot was being used. This article shows how we can use the `$slots` property to do just that.

  8. Defining Vue.js Router Routes with Regular Expressions

    Vue Router routes can have parameters which use regular expressions to help validate their values and clear up any ambiguity between similar routes. This article talks through how we add them and why they're useful!

  9. Adding Extra Parameters to Vue.js Event Handlers

    Sometimes we need to add extra parameters to an event handler to pass additional info into it depending on the context. This article shows you how!

  10. Apply CSS to Sub-Components of a Scoped Component

    When composing a Vue.js interface of lots of sub-components we often want to make a few small styling tweaks to those sub-components without making changes to that component directly - either because we can't cos it's a 3rd party component, or because we don't want that change to apply everywhere. This article describes how we get around this problem!

  11. Disable Source Maps in Production Vue.js App Builds

    We generally don't want to include a source map for our production builds as it exposes our unminified code to the world. Here's how to disabled them in Vue.js apps.

  12. Launching the Birthday Number Ones Website

    Launching a small side-project that tells you every number one song on your birthday

  13. How to Scrape a Website with Cheerio

    My recent side-project scrapes another website for its data. This article shows you how easy that is to do with the Cheerio library.

  14. How to Batch Process Promises with PromisePool

    Scraping over 24,000 web pages in parallel was never going to work! This article discusses how I used batching to execute them slowly.

  15. Chrome Dev Tools Tips

    I challenged myself to tweet tips about Chrome Dev Tools every day for 30 days - I've collected them all together in this post.