Dan Matthew

Global Accessibility Awareness Day 2026

Thu, 21 May 2026 19:02:02 GMT

It's Thursday 21st of May 2026 and it's the 15th Global Accessibility Awareness Day. Like a lot of other awareness campaigns, this is often a day when organisations make a big song and dance about how they are supporting persons with disabilities, only to not give a toss the day after.

The latest WebAIM Million report tells us:

The number of detected errors increased 10.1% since the 2025 analysis which found 51 errors/page.

It's pretty shocking that things are getting worse when it has only gotten easier to write and test for well-engineered frontends. I wonder if the emergence of LLM-generated code has had a hand in this. If the majority of code is inaccessible, and LLMs are being trained on this output, it's going to be the most likely thing they generate when prompted to the next time. The well is forever poisoned.

If you're involved in creating content for the web - whether that's design, coding, or copywriting - take a beat and have a think about what you could do better.

If you design, consider how someone who doesn't use a mouse might operate your fancy user interface.
If you code, reach for the rich palette of HTML before creating a widget using divs. It does a lot of the heavy lifting, honest.
If you write, don't forget to describe the contents of images and rich media you include.

Weeknotes: 2025-05-17

Sun, 17 May 2026 17:56:27 GMT

Spent a long weekend in Vienna where I spent time enjoying the tasty treats in the Stadtpark at the Genuss Festival. Did you know Austria has a Wine Quarter?! The rest of the time was spent exploring the city, visiting its many museums around the Museumsplatz including the Pieter Bruegel exhibition at the Kunsthistorisches Museum. Many a chuckle was had at early interpretations of animals artists had clearly not seen – but who am I to judge? The crux of the trip was around a performance of Mahler's 8th Symphony at the Konzerthaust. Vienna was hit by huge thunderstorms that afternoon, and it was possible to hear the thunder inside the venue.

Favourite restaurant - hooray for having outdoor space on a Sunday evening! - was MAST: we enjoyed the six course Chef's Choice (PDF menu) and accompanying wine flight…

Accessible design guidelines

Wed, 06 May 2026 21:33:13 GMT

Operating and Navigating

Don't design for mouse interactions alone

Anything that can be done with a mouse should also work with a keyboard. Or a pointer. Or a switch. Or with eye tracking.

Design what keyboard interactions look like

Design what it looks like when an element receives keyboard focus. Most interactive elements automatically receive focus. When building complex user interface controls, focus might move within it e.g. radio buttons, tabs, media player.

Think about the tab order

In what order does a user tab through an interface? Don’t spring surprises on the user. Embrace the principle of KISS.

Ensure there are no keyboard traps whereby a user reaches a dead-end. It should be possible to move through the entire page using Tab, Shift + Tab, Escape, and the arrow keys.

Targets should be large enough

Make sure targets are at least 24px by 24px. Mobile interface guidelines suggest 44px by 44px. Somebody who struggles with fine motor control has a real tough time activating tiny interactive elements.

Skip links

Make it easy for the user to skip past long and repetitive sections. Menus, carousels, lists: give a keyboard user a way to bypass these sections and quickly move around the page.

Links should be recognisable

Don't remove link underlines from links in body text. They're a recognised convention, and an easy way to use something other than colour.

Naming things

Include text labels for inputs and form elements. We can use an icon for search inputs.

Auto-playing content

If content automatically plays – think audio, video, carousels – it should respect user preferences by default. It should provide a way to pause operation within the first three controls.

Colour

Colour contrast

Text should have colour contrast of at least 4.5:1 between foreground and background. User interface components such as buttons need to offer at least 3:1 between the component and its background – in all states:

Default
Hover
Focus
Selected
Unselected
Active

Use of colour

Don't use colour as the only way to communicate information.

Broke: invalid text input only has a red border
Woke: invalid text input has a red border, an obvious icon, and a useful error message telling the user how to fix the problem.

Typography

While there's no "one-size, fits all", the browser default of 16px is a good place to start. By using fluid units such as ems, our user can set the font size to their preferences. Make sure you've thought about how text might wrap within your design: we don't want text bursting out of containers and causing horizontal scrolling.

Legibility

Avoid typefaces which have ambiguity between characters such as IL1. If possible, use alternative glyphs to use the single-storey 'a', dotted or slashed zero etc.

Numbers

Turn on tabular numbers to ensure each digit uses a fixed-width: this helps keep columns aligned, and helps prevent jiggling as numbers update.

References

Vox: Accessibility checklist for UX designers 
Vox: Accessibility checklist for visual designers 
Vox: Reviewing a design or wireframe for accessibility compliance
Deque: Designing accessible focus indicators  
Accessible Numbers
Calculate how many of your audience have a disability: How many people?
Microsoft Inclusive Design toolkit
Stark plugin for Figma 
Colour Contrast Analyser 
NoCoffee – browser plugin to simulate visual impairments
Accessible colour palette builder

How to perform an accessibility design review

Tue, 05 May 2026 20:28:47 GMT

This is an adaptation of something I wrote to help designers on project I worked on between Spring 2024 and Winter 2025. Maybe you'll find it useful too!

When to review?

As the saying goes, “the best time to ~~plant a tree~~ review accessibility is 20 years ago. The second best time is now”. Don't wait! Review early and often.

It's much easier to catch critical issues early in your process before too much time, effort, or money has been invested in a solving a particular problem.

Quick checklist

For any new component:

Have you annotated the headings on your feature? (Do you even annotate?)
Have you defined the focus/tabbing order on your feature?
Have you added screen reader labels for elements that are not focusable (e.g. dynamic content changes; images and their alternative text)
Does the text meet colour contrast requirements? (4.5:1 for body text; 3:1 for large text)
Do graphic objects meet colour contrast requirements (3:1)? What about elements of user interface used to identify controls?
With colour removed, can you still make sense of the design? You're not relying on colour, are you?
Can all revealable information (tooltips, accordions) be accessed with a keyboard or a mouse>
If a user doubles the text size, is the page still usable?
If the viewport is reduced in size, is everything usable without introducing horizontal scrolling?

Basic expectations

The design uses an accessibility-first approach

We create better products for everyone when we consider people are are different to use.
Consider situations for people using assistive technologies ahead of design review
- Use Cards for Humanity and consider whether your design will meet the needs of the generated pairing
- Use Maya Benari's Empathy Maker for another set of scenarios
- Test your design with a random Empathy Prompt. Will it still work?
Consider the question: "Who am I willing to exclude?" when solving a problem. For example, hiding content behind a hover interaction means a whole swathe of keyboard and touchscreen users won't be given access to the same to perform tasks. The constituents of that audience might surprise you.
Accessibility is about removing barriers. It's better to design inclusively and not introduce them at all.

Accessibility annotations included

Use an annotation kit or plugin – I like eBay's Include – to call out basic accessibility features:

Page title
Landmarks
Headings
Links
Buttons
Alternative text for images, data visualisations, and rich media
Focus & reading order - if different from the default top-to-bottom, left-to-right flow in LTR scripts.
Naming of UI components

Defined interactions for custom components

Any custom components modifying or combining interactions need clear direction on the desired keyboard and screen reader experience. For example, a Carousel:
- Will the arrow keys operate the carousel?
- Does the spacebar pause the carousel?
- What interactions should be documented with testing instructions?

Contrast meets requirements

All text and interactive elements should meet contrast requirements
- Text is 4.5:1
- UI components are 3:1
Use the Colour Contrast Analyser to check each state of the component:
- Default (or “Resting”, as I've recently heard it called)
- Hover
- Focus
- Read-only
- Valid
- Error
- Loading
- Other?

Logical headings

The h1 is the meaningful title of the page
Major sections are titled with h2
If the design calls for h4, h5, and h6 we might want to reconsider the information architecture of the page.
Decouple headings from styles
- Component libraries must decouple styles and style names from heading levels
- When heading levels are directly coupled to size, developers will use heading levels out of order to make text bigger or smaller.

Use plain language

Plain language makes content easier for all users to consume and understand.
Avoid using idioms or implying jokes: this can be difficult for people who speak English as a second language.
Avoid technical jargon.

Vertical layout for forms

Folks using screen magnifiers will zoom in on their screen. This means they can only see a portion of the layout. Adhering to a single column makes it easier for somebody to follow the edge of the form as they complete their task, and helps minimise content (such as validation indicators) from being missed

Alt text conventions

Define alt text when the image adds meaning to the page: it could supply information, or help set the tone.
Good alt text allows anyone who can't see the screen to describe it to somebody else. Imagine describing its contents to a friend.

Sufficient contrast and text size

Components should also account for somebody increasing the font size of their browser in order to make content easier to read.
This is where text truncation as a content strategy can fall down: suddenly the last few characters of a label are now visible as “ME…”. What does that even mean? One of the few situations where someone using an assistive technology will get the better experience.

Colour perception accommodation

Don't use colour as the only way of conveying content: any indicator dots would benefit from some sort of shape change to help disambiguate them.

Large target size

Prefer large target areas to help folks with motor disabilities. The WCAG define this at 24px x 24px at AA, but measures for iOS and Android are more generous at 44 x 44 points.

Focus states

Included keyboard focus as a default in the design system, alongside others, e.g. Checkbox:
- Unchecked
- Unchecked + hover
- Unchecked + focus
- Checked
- Checked + hover
- Checked + focus
The focus state must be obvious: both colour contrast but also dimensions. A 2px outline is a good start. Modern browsers allow focus rings to follow the border radius of an element.

Logical focus order

Developers can use logical properties in CSS to ensure layouts reflect the preferences including locale and language of the user.

Responds to user preferences

One of the challenges of designing for the web, but also the property that makes it incredibly robust, is that it is not a fixed canvas. Of course a layout might be designed for 1280 x 720, but the browser window might be a different size, the orientation might be portrait, the user might want to turn off all animations - if only to save battery - or might be consuming the website via a portable Braille device. Think about how content might reflect those preferences and ensure you've considered ways to help make it work.

Weeknotes: 2026-05-03

Sun, 03 May 2026 00:00:00 GMT

Hooray for a Bank Holiday weekend! Boo for the fine weather of the week turning mixed. Typical.

This week has been full of disparate ideas bouncing around in my brain and realising how they can all link together. I've learnt about Open Policy Agent and how to define policies in Rego; I've been delving into Gitlab pipelines and investigating Spec-Driven Development. I've been introduced to the EU Artificial Intelligence Act and I'm discovering the wide world of Salesforce.

This week's bird sightings have included my first(?) Starlings and - according to Merlin - a lone Goldfinch, sat on top of a tree, silhouetted by the early morning sun. The nesting Robins continue to visit, and a pair of Blackbirds have displayed their ruthless approach to destroying grubs. Full on dismemberment.

Weeknotes: 2026-04-26

Sun, 26 Apr 2026 00:00:00 GMT

Another week down. What's new?

I was excited to see a pair of robins have deemed our nest box - protected by a fringe of overgrown climbing plants - worthy of their home. I've been watching the two of them bring little bits of fluff to make it their own. How long will they spend making the nest? When do they lay their eggs? How long do they brood? When's Springwatch back on? I feel like I've hit middle-age in the past few months: I've discovered my green fingers; I enjoy watching birds; and I'm started developing a taste for wine.

Good news for those readers who consume this using RSS or JSON feed: I've fixed up the feeds. Enjoy!

Weeknotes: 2026-04-19

Sun, 19 Apr 2026 00:00:00 GMT

Week 3 of the new accessibility job. I'm not sure if I'm allowed to share where it is? If we're connected on LinkedIn you'll know, but I've yet to finish all the training materials that are on the backlog so I'll play it safe. It's different, to be sure. Now the team is large enough that everyone can bring a different perspective or skillset: I'm getting to concentrate on design systems, developer productivity, and helping them shift left. In time, I'd like to continue to help smooth the gap between design and development: I've got ideas.
I saw a production of To Kill A Mockingbird at the Hippodrome in Birmingham: it's been a while since I've seen a play rather than a musical or ballet on stage. Confession: I've not read the book or seen the Gregory Peck film in full. While the entire cast was strong, the actor who played Scout hit all the right notes.

Weeknotes: 2026-03-29

Sun, 29 Mar 2026 00:00:00 GMT

I had somewhat restful week off between jobs, before starting a new accessibility role tomorrow (Monday 30th March). The weather was changeable, but it was nice to spend some time in the garden and bring some order to it after the winter. Plenty of leaves to be swept and branches to be picked up.

The local birds seem to be enjoying the food I'm putting out for them, and there's something rewarding about just idling and watching them. Thus far, I've seen:

Long-tailed tits
Blue tits
Great tits
House sparrows
Robins
Pigeons
Magpies

I have spotted some blackcaps in the trees behind the garden, but they seem less fussed about my offerings. The long-tailed tits were the first visitors to the feeder, but I've not seen them for a while; the pigeons observe from afar and will wait for the sparrows to make a mess; the robin makes an afternoon pitstop; the magpies bully the smaller birds away.

I enjoyed a walk and pint in the sunshine on Thursday, before attempting to update the sealant around the shower: the old stuff is a pain to remove through a combination of manual and chemical tooling.

Weeknotes: 2025-12-28

Sun, 28 Dec 2025 00:00:00 GMT

Two weeks off work over the Christmas break: I'm glad to turn my brain off.
Received some news on Christmas Eve which I've been pondering over.
Caught up with Pluribus and Stranger Things. One was significantly better than the other.

Weeknotes: 2025-11-30

Sun, 30 Nov 2025 00:00:00 GMT

Spent the start of the week in Amsterdam. Long day travelling home on Wednesday, with strikes in Belgium adding an extra 90 minutes to the 4 ½ hour journey from Amsterdam Centraal to London St Pancras. Plus the subsequent 80 minutes on the train from London to Leamington.
Thought I'd given my hip/groin enough rest but an exploratory run on Saturday caused it to flare up again.

danmatthew dot co dot uk at 20

Wed, 28 May 2025 00:00:00 GMT

20 years of owning danmatthew.co.uk. 20 years of hosting a website here (RIP hosting partners). 20 years of not using it particularly effectively.

Still, it's my website. It's my space to noodle with, to learn about web technologies, to share what I like.

There are many like it, but this one is mine.

Happy birthday!

Glofox Data Breach March 2020

Tue, 25 May 2021 16:32:11 GMT

Have you heard of a company called Glofox? Their software provides the booking system for gyms and fitness studios.

They suffered a data breach in March 2020, but haven't said much about it. Nothing I could find. Others have, however.

Glofox has not responded to media requests for comment on a possible security breach but it has, in recent days, responded to individuals on Twitter who posed questions to the company after being informed its website had been compromised.

Lame. I was under the impression that under data protection legislation, organisations must contact the appropriate body and make a public statement as soon as they have knowledge of a breach. As an Irish company, they should have reported it to the Data Protection Commission:

From 25 May 2018, the General Data Protection Regulation (GDPR) introduces a requirement for organisations to report personal data breaches to the relevant supervisory authority, where the breach presents a risk to the affected individuals. Organisations must do this within72 hours of becoming aware of the breach.

Where a breach is likely to result in a high risk to the affected individuals, organisations must also inform those individuals without undue delay.

Whoops. Did Glofox pass this responsibility on to their customers, or are they not bothered? Note the date of the Irish Times report: November 2020.

In January 2021 I was alerted to the breach thanks to a service called Have I Been Pwned. It's integrated in my password manager, 1Password.

Since the Glofox dashboard does not offer a way to delete an account, it took an email to dataprivacy@glofox.com to do so.

It's taken until May for the first spam emails to arrive at the compromised email addresses: both hawking a Norton Antivirus subscription which needs renewing. Do you think it leads to a legitimate website?

If you're going to look after personal data, get your shit together. Mistakes happen, but don't try and hide it.

Access local server from Parallels VM

Sun, 09 May 2021 18:28:53 GMT

I was struggling to access a development server on my host machine from a Windows 10 virtual machine (VM). Despite sharing a network, turns out the trick is not to use the host IP address, but that of the bridged network the VM has created. For Parallels, that address tends to be 10.211.55.2

Netlify CMS

Sun, 17 Jan 2021 00:00:00 GMT

I've been experimenting with services such as Contentful, Prismic, and finally Sanity. Currently, each post on this site is a Markdown file, and it is converted into a HTML page by 11ty when the site is built. The "content-as-a-service" platforms return data over the wire, and each record in the GraphQL response is turned into the post it represents.

However, I think I prefer to keep each post as a file, all wrapped up on Github, so it's back to Netlify CMS for me.

Pharmaceuticals

Tue, 08 Dec 2020 00:00:00 GMT

I thought I was an OK runner. I trained hard over the course of 2018 and aimed to get under 1:40 at the Great North Run. I ran 1:31, and then a few weeks later went 1:27 at Birmingham's Great Run.

Since that purple patch, running has gotten harder and harder because my asthma has become harder to control.

While I've had a blue "rescue" inhaler to hand since I was a child, I've quickly progressed through the various steroids over the past two years:

Beclometasone 400mg (Clenil Modulite, brown)
Fluticasone (Flutiform, white)
Beclometasone 100 micro-grams (Fostair 100, pink)
Beclometasone 200 micro-grams (Fostair 200, pink)

I've been on the Fostair 200 for over a year now, in conjunction with another corticosteroid called Ciclesonide.

Now because my blood tests show high levels of eosinophils the assumption is that I'm allergic to something, so I pair those with the following tablets to try and tamp down those naughty cells in my body which are flaring up and causing constriction:

1x montelukast 10mg
2x theophylline 200mg (Uniphyllin)

In addition, I've also had a spell on Spiriva Respimat – often given to COPD patients - which delivers 3 micrograms of tiotropium bromide monohydrate. I tend to be the youngest in the clinic waiting room when I visit the consultant. From this NHS worksheet, I'm at the "Seek specialist advice" stage of progression.

I don't particularly wish to be taking steroids for any longer than necessary. Because of this constant barrage of steroids, I suffer from oral thrush (yum yum), and my voice has changed in tone. I get frequent upper-respiratory infections, and each morning I get to hock up my lungs like a 20-a-day smoker. I've had several doses of an oral steroid and antibiotics, but was one course shy of being invited to another clinic to take an injected medicine.

What really gets my goat is how it affects my ability to exercise: I can be working and breathing hard, but as soon as an interval ends and my body relaxes – BANG: here comes the constriction. Classic exercise-induced bronchitis symptoms.

While I know I this is still a case of extreme privilege, I would love to discover a route out because a lot of my self-worth was tied up in running.

Weeknotes: 2020-10-25

Sun, 25 Oct 2020 00:00:00 GMT

I'm super consistent with writing these, eh?

There's been a glut of televised cycling with the condensed racing calendar, so we've had the Ronde van Vlaanderen, the climax of the Giro d'Italia, and the start of La Vuelta in the space of the past week.
That helps, because I've been feeling rather sorry for myself when it comes to exercise. I've been suffering from "something" for nigh-on a month. Whatever it is, it's taking a long time to kick and is making activity difficult.
Really enjoyed reading Kat Holmes' Mismatch.
Finished watching The Haunting of Bly Manor on Netflix. Not as creepy as Hill House.
It's been a week for Australian film: watched Justin Kurzel's adapatation of The True History of the Ned Kelly gang, and Jennifer Kent's The Nightingale

inaccessible.css

Sat, 19 Sep 2020 00:00:00 GMT

I made a stylesheet to drop into your project in order to highlight #a11y flaws: it'll stick an obnoxious outline on any offending elements. I'm sure there are plenty more selectors to create, so PRs are more than welcome.

Styling visited links

Thu, 06 Aug 2020 00:00:00 GMT

TIL: visited links can only be styled with a small subset of styles. Surprisingly, text-decoration is not amongst them.

Creating Github Releases With Lerna

Sat, 01 Aug 2020 00:00:00 GMT

Reducing the number of manual steps needed to get code live is a good thing. This is how I create Github releases from the CI process.

Lerna

Lerna is a tool to manage a monorepo. It can automate releases on Github when the version of a package changes, which is one less task to perform manually.

Circle CI

Circle is a continuous integration solution. In this scenario, Circle is configured to run the test suite for each component after a commit. Once the tests pass, Lerna will increment the version number of the component, using the Conventional Commits specification

Creating a release

Circle Config

Here is a workflow definition with two discrete jobs. The first runs the tests; the second runs lerna version against the desired components.

version: 2.1
orbs:
  node: circleci/node@1.1.6
jobs:
  build-and-test:
    executor:
      name: node/default
    docker:
      - image: circleci/node:latest-browsers
    resource_class: small
    steps:
      - checkout
      - node/with-cache:
          steps:
            - run: npm install
            - run: npm test

release:
    docker:
      - image: circleci/node
    resource_class: small
    steps:
      - checkout
      - node/with-cache:
          steps:
            - add_ssh_keys:
                fingerprints:
                  - "F1:NG:3R:PR:1N:T"
            - run: npx lerna bootstrap --hoist --ci
            - run: npx lerna version --no-private --conventional-commits --create-release github --yes

workflows:
    build-and-test:
      jobs:
        - build-and-test
        - release:
            filters:
              branches:
                only: main
            requires:
              - build-and-test

All the interesting work is contained within this instruction:

npx lerna version --no-private --conventional-commits --create-release github --yes

Lerna will increment the version of public packages using the Conventional Commits spec, before creating a Github release, and it won't need any prompting to do so.

Creating a deploy key

In order to modify the project repository, Circle will need an SSH key with write access: a "deploy key". The public key is added from the project's settings/keys screen on Github; the private half is added to Circle via Project Settings -> SSH Keys. You'll know if you got it right, because you'll avoid the following:

lerna ERR! lerna ERROR: The key you are authenticating with has been marked as read only.
lerna ERR! lerna fatal: Could not read from remote repository.
lerna ERR! lerna
lerna ERR! lerna Please make sure you have the correct access rights
lerna ERR! lerna and the repository exists.
lerna ERR! lerna

Adding an access token

While the machine might be authenticated, Lerna will need to identify itself as working with the correct permissions. Thus the addition of GH_TOKEN available to it. A new access token can be created from within Github

Publishing the release

When a build goes green on the main branch, a new release will appear automatically on Github. The release notes will be filled automatically, and the changelog for each package will have been updated at the same time. There does appear to be a slight bug with the version number. My understanding is that fix commits will increment the patch number when using semantic versioning, but the component has increased from 0.2.0 to 0.2.1 with a single chore commit…

Next steps

Lerna's publish command works the same as version, but automates publishing to NPM.

Weeknotes: 2020-08-01

Sat, 01 Aug 2020 00:00:00 GMT

I spent a day off watching a series of talks from JAMstack Conf, before getting wet and wild out on the bike: that was not a pleasurable experience.
This week I have been getting to grips with Figma. DesignLab's Introduction to Figma, alongside Sketch Together's video content have been useful.
This resulted in the illustration at the beginning of the page, inspired by RISD's work for the 2006 Winter Olympics. I wanted to play with animation, and SVG will make that easier to achieve.
At Talis, we've been working hard to improve the interactive states of our interface elements to correct issues with contrast.
I played my first-ever game of Fortnite on Switch, and took the Victory Royale. I think I've peaked for 2020.
Rode RLSCC's bash again this week and beat last week's time by a couple of minutes. I've started adding some run training back into the schedule to maintain that fitness.

CircleCI Node Images with Browsers

Mon, 27 Jul 2020 00:00:00 GMT

Building a Node project with Circle and want access to browser binaries? The default circleci/node image doesn't come with them installed, which threw a spanner in the works when attempting to run some tests. Circle maintain an exhaustive list of images one can use: any Node version appended with -browsers will come installed with Chrome, Firefox, OpenJDK v11, and Geckodriver.

Using continuous integration to build, test, and publish with Netlify

Sun, 26 Jul 2020 00:00:00 GMT

Last week, Chris Coyier published a post on CSS Tricks which covered an approach to the simplest of testing set-ups: ensuring the website loads and displays some content. A "smoke test".

Just one super basic integration goes a long way. If your site spins up, returns a page, and renders stuff on it that you expect, a lot is going right.

I've been meaning to add some level of test coverage to this website for a while now. I'd been wanting to run builds against Lighthouse CI to ensure that anything that breaks the performance budget or fails one of the automated accessibility tests doesn't make it into production.

Thanks to some well-written documentation, it was easy to get Cypress installed and configured to test against my local development server.

The test

Per the docs:

/// <reference types="Cypress" />

describe('Home page', () => {
  it('successfully loads', () => {
    cy.visit('/');

    cy.get('h1').should('contain', 'Dan Matthew');
  });
});

Cypress will look for a configuration file in the directory, and it's in this cypress.json where a baseUrl can be defined:

{
  "baseUrl": "http://localhost:8080",
  "ignoreTestFiles": "cypress/integration/examples/*.js"
}

Each call to .visit() will use the baseUrl as its root. While it's set to localhost here, we'll want to change it later on, for reasons that will become apparent.

Testing against a local web server

Netlify expects tests to be run elsewhere, since every commit to the linked VCS causes a build and publish. I'd used Travis CI previously, so thought I'd pick up where I left off. I wanted it to operate like my local development environment, where I'd run npx eleventy serve and then spawn Cypress in the background: npm run serve:ci && npm test

This did not work as anticipated. serve was never going to end, and Cypress was never going to be started 😂. The Cypress docs even warned against this, and do cover a number of solutions, but pig-headedly I didn't want to install yet another package.

Time to rethink.

Building a Deploy Preview with the Netlify CLI

With Netlify in control of builds, I'd configured it to use a couple of Build Plugins. I didn't realise that these can be installed locally as devDependencies and they'll operate on the generated site just as they do on live. This meant using the CLI became a plausible alternative – just as soon as automatic builds were turned off.

This setting can be found at https://app.netlify.com/sites/{YOUR_SITE_NAME}/settings/deploys. Look for "Build Settings", and then "Stop builds". The following warning is displayed:

Netlify will never build your site. You can build locally via the CLI and then publish new deploys manually via the CLI or the API.

Now the onus is on the developer 😬. In this case, we'll get Travis to perform this task for us. With the simplest of configurations each commit will build the site, but only those pushed to main will trigger a deploy:

language: node_js
node_js:
  - "node"
cache: npm
script:
  - npx netlify build
deploy:
  cleanup: false
  provider: script
  script: npx netlify deploy
  on:
    branch: main

The boffins out there will know that this implementation is naive: it doesn't run any tests; and it's going to give me a green build each time, which is nice for the ego, less so for confirming that the site renders. That build script might have only succeeded in pumping out a broken site if something's gone screwy in development.

Testing a Deploy Preview with Cypress

One of the neat things about Netlify is that each branch will get built and published with a unique URL. This makes it easy to visit the preview in a browser and ensure it works as expected. How can we access that URL and provide it to Cypress?

The documentation for deploy offers a hint:

alias (option) - Specifies the alias for deployment. Useful for creating predictable deployment URL's

Very useful indeed, Netlify. But what to use as our alias? I don't know how long branch deploys exist, so it didn't seem sensible to use a hard-coded string. It turns out that Travis surfaces a number of environment variables: I opted for $TRAVIS_JOB_ID because it seemed like it's probably going to be unique…

First off however, the branch build is going to have to be deployed: npx netlify deploy --alias $TRAVIS_JOB_ID. Then Cypress is invoked: npx cypress run --env host=$TRAVIS_JOB_ID--danmatthew.netlify.app --spec \"cypress/integration/home_page.spec.js\" --headless

The --env flag in the cypress run command overrides the baseUrl from cypress.json and ensures we are testing the latest deploy.

In the logs of previous builds I'd seen:

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.

Alrighty, then!

🚨 Uh-oh. Cypress crashed: apparently the spec flag doesn't play nicely with CI environments. Ah well, don't have to worry about running all the tests if there's only one test…

With that resolved, the build failed again. --env host is completely the wrong flag, and to set the baseUrl from the environment is done thusly: CYPRESS_BASE_URL=https://$TRAVIS_JOB_ID--danmatthew.netlify.app npx cypress run --headless --config-file false

With that done, our config looks like:

os: linux
dist: xenial
language: node_js
node_js:
  - "node"
cache:
  npm: true
  directories:
    - ~/.cache
script:
  - npx netlify build
  - npx netlify deploy --alias $TRAVIS_JOB_ID
  - CYPRESS_BASE_URL=https://$TRAVIS_JOB_ID--danmatthew.netlify.app npx cypress run --headless --config-file false
deploy:
  cleanup: false
  provider: script
  script: npx netlify deploy --prod
  on:
    branch: main

…and we get a succesful build.

Use the Netlify provider, stupid

There's me, using multiple steps under the script phase, when Travis provides its own deploy step for Netlify projects.

Perhaps the documentation needs to be clearer because it references Netlify Drop, which at first glance looks like a different mechanism entirely. When I looked closer at the required arguments, I realised they were identical to the CLI commands I was using earlier.

Using the provider means the deploy stage of our travis.yml takes this form:

deploy:
  cleanup: false
  provider: netlify
  site: $NETLIFY_SITE_ID
  auth: $NETLIFY_AUTH_TOKEN
  prod: true
  edge: true
  on:
    branch: main

There we go: we've got a CI tool taking care of testing our builds. If the tests pass, the site will be set live. If not, we can go visit the deploy preview and see what's gone wrong.

Bonus: Automating Github releases

Doing this isn't strictly necessary, but I wanted to play with the semantic-release package and see what it could do. I had intended to incorporate it into the Accessible Web Components project, but I discovered Lerna could perform both actions for me, which rendered it superfluous.

To publish a new release on Github, we can add a run property to the deploy stage, or make it a little more obvious with the after_deploy stage:

if tag IS blank
after_deploy:
  - npx semantic-release

The conditional there is to prevent yet another build when semantic-release creates the tag. It took me a while to figure out why I was seeing three builds…

Like many other tools, semantic-release supports many configuration options. In this case, I didn't want the package being pushed to npm, so it was necessary to override the default plugins with the following in my releaserc file:

{
  "branches": "main",
  "plugins": [
    "@semantic-release/commit-analyzer",
    "@semantic-release/release-notes-generator",
    "@semantic-release/github"
  ]
}

Added orientation support to tabs component

Sat, 25 Jul 2020 00:00:00 GMT

With the release of v0.2.0, I've added support for changing the orientation of the tabs component. The presence of a boolean vertical attribute will set aria-orientation='vertical'.

Accessible Web Components: Tabs

Sun, 12 Jul 2020 00:00:00 GMT

The web component

I've finally published my first NPM package: a web component to represent a tabbed interface.

View the demo

Rock and roll.

It might not be the most fashionable of side projects - or technologies - but I felt that a wrapping up the desired behaviour of a tabbed interface into a bog-standard web component might do some good. If it saves another developer spending an afternoon doing the same thing, or makes the life of the user a little easier, then I'd consider that worthwhile.

The component follows the behaviours specified in the WAI-ARIA Authoring Practices document. It can be styled with CSS to suit its environment, and will display as a single column should there be a hitch. Alas, web components do require JavaScript in order to be registered, and it certainly requires JS in order to enhance the markup with the required ARIA attributes.

Usage

JavaScript

Import the three components, and tell the browser about them:

import { AwcTabs, AwcTab, AwcPanel } from "@accessible-web-components/tabs";

window.customElements.define("awc-tabs", AwcTabs);
window.customElements.define("awc-tab", AwcTab);
window.customElements.define("awc-panel", AwcPanel);

HTML

It takes the following structure. Add as many tabs and panels as are required.

<awc-tabs>
  <awc-tab role="heading" slot="tab">Tab 1</awc-tab>
  <awc-panel role="region" slot="panel">
    <h2>My first tab</h2>
    <p>Here is some text…</p>
    <ul>
      <li>…and a list</p>
    </ul>

    <button type="button">I am a focusable element within the tab</button>
  </awc-panel>
  <awc-tab role="heading" slot="tab">Tab 2</awc-tab>
  <awc-panel role="region" slot="panel">Content 2</awc-panel>
  <awc-tab role="heading" slot="tab">Tab 3</awc-tab>
  <awc-panel role="region" slot="panel">Content 3</awc-panel>
</awc-tabs>

To the 67 brave souls who have downloaded it since yesterday morning: ~~you are brave~~ thanks ~~for being my guinea pigs~~!. I've put the package level as a pre-release, at 0.0.0-alpha.3. I don't think it's going to break your project, but there are a few more features I want to include before it goes to 0.0.1. I guess it would help if I wrote some tests, and I can certainly improve the documentation.

Side projects, eh? Gotta love 'em.

Four years ago, I made the first commit in a Github repository called Accessible Web Components.

The following year, in March 2017, I gave a talk at HydraHack about my plan to create a whole series of components. As a fellow speaker that night, I'm hopeful Nivi's offer of feedback still stands!

The first component – an alert message – was the "Hello world!" I used to play with various frameworks. It moved across Polymer, Polymer v2, Stencil, a custom element, Vue, and finally LitElement. The Polymer version still lives in the repository, complete with its use of HTML Imports. It's a shame that particular spec got shot down: it feels awkward defining component templates inside the JavaScript.

Then, with the plan to create a whole series of these components, I thought a monorepo would be a good idea. I installed Lerna, and spent way too much time getting its configuration just so.

With Lerna just about sussed, I turned to the guidelines suggested by the open-wc project when it comes to publishing. I've been using their linting and commit standards for some time, but the project has really been evolving: I've used their generator to scaffold the next component in the series.

Finally, it was time to publish. Again, it took too long figuring out how to create an organisation on NPM, such that the package name could be in the format: @accessible-web-components/<blah>. While it sounds trivial, I thought it worth keeping this and future components grouped together right from the start.

Despite it being a fairly trivial piece of software, I'm excited yet nervous at the thought of third parties using something I've written. I'm looking forward to constructive criticism to help shape it and make the web a richer, and more accessible platform.

Goodbye Gatsby; Hello Eleventy!

Sun, 05 Jul 2020 00:00:00 GMT

Hello there! It's been a good while since anything new content has appeared on this website, and while I've tinkered with the splash page on occasion, it's not displayed anything more than my name in a <h1>.

Some thoughts on 'v3':

I've gotten rid of Gatsby. It wasn't long after I upgraded to v2 that I noticed the site no longer rendered if JS was disabled; something I had appreciated in v1.
The site now runs on Eleventy, and uses Andy Bell's Hylia Starter Kit to get me going. I expect to be hacking away at it over the next week.
I wanted to place to display my photos. Yes, I know there's only a single photo being displayed. It's a shot of the Molino Stucky in Venice. I'm using Cloudinary to host the image and apply transforms based on device DPI, orientation, and screen width.
I want the site to feel fast. It's preconnecting to third-party origins (Cloudinary, Google Fonts, Speedcurve), and preloading the most important assets. I'm inlining the first blast of CSS, then loading the rest asynchronously. Benchmarking the site on Web Page Test, it surprised me how much slower the site performed when this wasn't done.
Speedcurve was mentioned above. Thought I'd have a play and see how the site performs over time. Additionally, I only just found out that one doesn't need to use Chrome to play with Lighthouse: Jeremy Keith put together a bookmarklet to send the current document over to the Lighthouse viewer. In the same vein, Lighthouse Metrics seems a neat way to keep tabs on performance.
I want to begin publishing accessibility audits of some of my favourite sites. At Talis, I've been spending a good chunk of time reviewing and improving the accessibility of our products ahead of September's <abbr title="The Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018">PSBAR</abbr> deadline. While I've been championing accessibility internally since I started, it has felt like a struggle to get cross-functional buy-in until recently.
When not working on improving our accessibility, the recent focus has been on relaunching our website. I am extremely grateful for Timber, which made working with WordPress a much more pleasurable experience. Something that irks me is that I tried hard to keep the site snappy, but as third-party plugins have been enabled to support desired functionality - "buy, don't build" is the mantra - more and more external resources get pulled in. Even the WordPress core functionality dumps a load of crap in, which has to be manually disabled via the theme's functions.php. Le sigh.

Preload, Prefetch, and Preconnect

Sat, 09 Dec 2017 00:00:00 GMT

Working on a Polymer project recently, I got to experiment with serving the content from Firebase Hosting, which now offers support for HTTP/2 and Server Push. Server Push allows content to be delivered speculatively: content is delivered whether or not the user has it already, and in some cases it might not be required at all.

Preload

To take advantage of this ability though, I needed to declare the assets I wanted to be pushed down. In my firebase.json file I declared:

"headers": [{
  "key": "Link",
  "value": "<my-app.js>;rel=preload;as=script"
}]

which instructed Firebase to serve the file with the appropriate Link header. It's possible to do the same when referencing resources via a link element too:

<link rel="preload" href="foo.js" as="script">
<link rel="preload" href="bar.css" as="style">

If you inspect this site, you'll see that Gatsby does this for me in production. Coupled with HTTP/2 on Cloudfront, visitors should experience a fairly snappy load. Essentially, all assets for a page are transferred in a single round trip, though it does mean if you're a repeat visitor (hi mum!), I'm probably using bandwidth unneccessarily. Addy Osmani suggests that:

Use Push when you know the precise loading order for resources and have a service worker to intercept requests that would cause cached resources to be pushed again.

I guess that's next on my to-do list with Workbox.

Prefetch

<link rel="prefetch" href="/font.woff2">

Prefetch is another resource hint developers can take advantage of. Prefetch tells the browser that a resource will be needed on the next page, or navigation. Resources marked as such will be treated as a much lower-priority fetch than those with preload, and it's up to the browser to make the call as to whether it will load it or not. I've seen a pattern where a webfont is set to be pre-fetched so that it doesn't block rendering on the first load, but is available right away when a visitor navigates to a new page.

Preconnect

<link rel="preconnect" href="/page2">

Preconnect can be used to 'warm-up' the connection to a resource in order to "eliminate the costly DNS, TCP, and TLS roundtrips from the critical path of the actual request"

All of these techniques can be used in an attempt to improve the performance of your site but it's a trade-off between second-guessing the behaviour of your guests, while not exhausting their bandwidth unneccessarily – especially for those on metered connections.

Sources

https://caniuse.com/#search=pre
https://www.w3.org/TR/resource-hints/
https://www.w3.org/TR/preload/
https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
https://css-tricks.com/prefetching-preloading-prebrowsing/
https://blog.cloudflare.com/announcing-support-for-http-2-server-push-2/
https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html
http://www.bramstein.com/writing/preload-hints-for-web-fonts.html

Automating the Build Process with Travis-CI

Mon, 20 Nov 2017 00:00:00 GMT

Updated 9th December to illustrate latest iteration of Travis.yml

Before I ported this site over to Gatsby, it was powered by good old Jekyll. I'd make an edit, run jekyll build, then push the output to S3 with s3_website. Not exactly onerous, but I noticed that I'd be drafting posts, or updating the structure of the site and then not pushing them live in a timely manner. (And what do you know, it's happened again! – Ed., December 2nd)

Cue a Continuous Integration (CI) solution – although it took me many attempts to get it right. And by right, I mean it at least:

builds the site
deploys to S3
invalidates the CloudFront distribution.

Attempt #1: Use the default S3 provider

Travis' documentation is pretty, pretty, pretty good. I think you could just about get away with this, if you're happy to serve straight from the S3 bucket:

language: node_js
node_js:
 - "8"
script:
 - yarn build
deploy:
  provider: s3
  access_key_id: $AWS_ACCESS_KEY_ID
  secret_access_key: $AWS_SECRET_ACCESS_KEY
  bucket: danmatthew.co.uk
  region: $AWS_DEFAULT_REGION
  # Prevent Travis from deleting your built site so it can be uploaded.
  skip_cleanup: true
  # Path to a directory containing your built site.
  local_dir: public
  on:
    branch: master

Because I have both package.json and yarn.lock in my repository, Travis is smart enough to figure I want to use Yarn to run during the install phase.

I like this implementation, but Travis is only concerned with S3 here. I have a Cloudfront distribution sat in front of this bucket in the hope of saving a few pence and making the site feel snappy. Sure, I could manually log in to AWS and invalidate the distribution or do it via the command line, but y'know: let's automate it.

Attempt #2: Use AWS CLI to invalidate the Cloudfront distribution

This is where it feels messy, and there are a bunch of extra steps to mess up. AWS CLI is installed via Pip, so this implementation needs to be driven by Python.

language: python
python: 3.6
sudo: required
dist: trusty
env:
 - TRAVIS_NODE_VERSION="8"

I had to explicitly specify the version of Python, because the default appeared to be 2.4 and I ran into issues… Java-related, possibly?.

This is where it starts to be a blend of different tasks, and I'm piecing together instructions from various sources.

Install Yarn

before_install:
  - curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
  - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
  - sudo apt-get -qq update
  - sudo apt-get -y install yarn

Install NVM

As it's not provided by default, I need to install Node and NPM in order to install my site's dependencies and then build it. I figured NVM would be the most sensible approach:

install:
 - rm -rf ~/.nvm && git clone https://github.com/creationix/nvm.git ~/.nvm && (cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`) && source ~/.nvm/nvm.sh && nvm install $TRAVIS_NODE_VERSION
 - pip install awscli

I discover afterwards that the ugly $TRAVIS_NODE_VERSION environment variable could have been avoided by specifying the version in the project's .nvmrc file.

As the Travis cycle goes install, script, deploy, next up is…

before_script:
  npm install
script:
  npm run build

(Travis experts – could those commands just have been listed sequentially in the script block?).

Configure S3 bucket

We use the same deploy block as before:

deploy:
  provider: s3
  access_key_id: $AWS_ACCESS_KEY_ID
  secret_access_key: $AWS_SECRET_ACCESS_KEY
  bucket: danmatthew.co.uk
  region: $AWS_DEFAULT_REGION
  # Prevent Travis from deleting your built site so it can be uploaded.
  skip_cleanup: true
  # Path to a directory containing your built site.
  local_dir: public
  on:
    branch: master

Blow away the old Cloudfront distribution

When this succeeds, we can now use the AWS CLI to ensure that Cloudfront serves the latest version of these files:

after_deploy:
 # Allow `awscli` to make requests to CloudFront.
 - aws configure set preview.cloudfront true
 # Invalidate every object in the targeted distribution.
 - test $TRAVIS_BRANCH = "master" && aws cloudfront create-invalidation --distribution-id $CLOUDFRONT_DISTRIBUTION_ID --paths "/*"

Inspecting the bucket, I notice that Travis doesn't doesn't sync the files – i.e. only new files are added; old ones are deleted. It might not be an issue in practice, but I quite like keeping my buckets tidy… 😒

Next!

Attempt #3: Use s3_website

I mentioned in the intro that when publshing the website from my computer I used the s3_website gem. I know it, it does all the tasks I want it to, and it's straightforward to configure.

(Although, I fib: since upgrading to Sierra, I've not been ~~able~~ inclined to deploy since it requires a Java installation which I really don't want to do. I know, weaksauce.)

So, we go again! Now, we're sacking off a Python-based deployment pipe in favour of a Ruby powered process:

language: ruby
rvm: 2.2
sudo: required
dist: trusty
# Again with the redundant env var
env:
 - TRAVIS_NODE_VERSION="8"
before_install:
  - curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
  - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
  - sudo apt-get -qq update
  - sudo apt-get -y install yarn

Install s3_website

install:
  - . $HOME/.nvm/nvm.sh
  - nvm install stable
  - nvm use stable
  - gem install s3_website

Push to S3

before_script:
 - yarn
script:
 - yarn build
after_script:
 - test $TRAVIS_BRANCH = "master" && s3_website push

Boom. All my s3_website settings are configured in environment variables and my s3_website.yml config, so that one line in the after_script block pushes to the correct bucket and invalidates the Cloudfront distribution.

Looking back over it, I think I'd be quite happy to sack off the yarn installation and reply on NPM. Again I wonder whether the blocks can be consolidated into one and the commands listed sequentially? I'm not experienced enough with Travis to know what benefits I get from splitting the commands into the different stages, especially since this particular deployment process is not exactly complicated. Perhaps so the process can fail earlier if necessary?

Proposed attempt #4: Use AWS CLI for everything

I suspect I could probably do all of the above with the AWS CLI, though it will need switching back over to Python again. Woe is me 😩.

Attemp #5: Concise

…whereupon I decided to sack off Yarn, and after configuring Travis to build PR and branch merges, whitelist the master branch:

branches:
  only:
    - master
language: ruby
rvm: 2.2
sudo: required
dist: trusty
cache:
  - npm
install:
  - . $HOME/.nvm/nvm.sh
  - nvm install stable
  - nvm use stable
  - gem install s3_website
before_script:
  - npm install
script:
  - npm run build
after_script:
  - s3_website push

Hide An Element From A Screenreader

Wed, 04 Oct 2017 00:00:00 GMT

I recently discovered that it's not enough to rely on either role="presentation" or aria-hidden="true" to remove an element from the accessibility tree. Just like CSS quirks, in order to ensure an element is truly hidden from screenreaders across operating systems and browsers, you will want to double-up on the attributes:

  <!-- Tested with macOS, Voiceover, and Chrome 63 -->

  <!-- Will be announced -->
  <div>I am a presentation element. I don't add anything more than a visual flourish.</div>

  <!-- Will be announced in Voiceover, but not in JAWS -->
  <div role="presentation">I am a presentation element. I don't add anything more than a visual flourish.</div>

  <!-- Voiceover will ignore this element; JAWS won't -->
  <div aria-hidden="true">I am a presentation element. I don't add anything more than a visual flourish.</div>

  <!-- Voiceover will ignore this element -->
  <div aria-hidden="true" role="presentation">I am a presentation element. I don't add anything more than a visual flourish.</div>

You can view the demo at JSBin

npm 101 – Version Ranges

Mon, 25 Jan 2016 00:00:00 GMT

The following is a snippet from this site's package.json:

  "devDependencies": {
    "bower": "^1.6.5",
    "grunt": "~0.4.5",
    "grunt-contrib-imagemin": "~0.9.4",
    "grunt-contrib-sass": "~0.9.2",
    "grunt-contrib-watch": "~0.6.1",
    "matchdep": "~0.3.0"
  }

As per the JSON spec, we've got a series of key/value pairs making up the devDependencies object: the name of the package we want installed for those working on the project, and the version number of that package. However, using npm install <package> will leave odd extra characters in the generated file. So what do they mean?

Indicator	Name	Meaning
`^`	Caret range	Allows minor and patch updates
`~`	Tilde range	Allows patch-level changes if minor version is specified

It's possible to add configure your project to help ensure only a specific version of a package is added. Create a file called .npmrc, and specify save-exact=true. As a bonus, you can also added save=true to make sure that any new installs are added to your projects' package.json

Column Sizing and Captions in Safari

Mon, 07 Dec 2015 00:00:00 GMT

<p class="message"> <em>Updated 25/09/2016:</em> It still appears to be an issue in Safari 10.0 (macOS Sierra). </p>

A couple of weeks ago, I encountered an odd rendering issue with Safari and column widths. I had planned to write about it, lest the afternoon I spent trying to debug it be of use to anyone who stumbles across this post. Before I could get round to it, lo and behold: I've fallen victim to it again! Safari on OSX - both Yosemite and El Capitan - does not like the following scenario:

.col-checkbox {
  width: 28px;
}

.col-content {
  width: auto;
}

.col-action-btn {
  width: 60px;
}

<table class="table table-striped">
 <caption class="sr-only">My caption to describe the table</caption>
  <colgroup>
    <col class="col-checkbox">
    <col class="col-content">
    <col class="col-action-btn">
  </colgroup>
  <thead>
  <tr>
    <th>
      <div>
        <span>
          <input type="checkbox">
        </span>
      </div>
    </th>
    <th>Two</th>
    <th>Three</th>
  </th>
</tr>
</thead>
<tbody>
  <tr>
    <td><input type="checkbox"></td>
    <td>Content</td>
    <td>Content</td>
  </tr>
</tbody>
</table>

Safari refuses to apply the column widths specified in the stylesheet, and instead splits the columns based on their content, flagrantly ignoring the authors instructions.

It seems to be related to the sr-only class applied to the caption. This utility class hides the element from those who can see the table contents as a whole, but provides a useful description for those using assistive technologies. Within this class, the position: absolute declaration used to remove the element from the document flow causes the bug. But strangely, it only happens when applied to caption: were one to use a span here, Safari will respect the column widths.

I've not been able to replicate in other desktop browsers: Chrome, Firefox, and Opera split the columns as desired, though Mobile Safari renders the table as per its desktop cousin. The Internet seems to have a scarcity of other reports, which makes me wonder if I have encountered a bug. Or maybe nobody else is combining this class with table captions, column widths - defined using classes, since the width attribute is obsolete - and Safari. I wonder at what point does it become a Safari / Webkit bug? I have a demo of it available on JSBin and the various permutations are easily replicable.

Truthy and Falsy Values in JavaScript

Sun, 06 Dec 2015 00:00:00 GMT

A common activity when writing code is to check whether a result is true or false before using it. You may have seen the following pattern: used to assign a default value to a parameter, should it be omitted.

function chosenColour(colour) {
  colour = colour || "blue";

  // Colour related code goes here
}

When a non-boolean value is used in this logical OR operation, it is coerced to become one. If the value on the left is empty - or false - the value on the right will be used as a replacement.

It's possible to discover how a value will be interpreted by passing it as an argument to Boolean():

Boolean(3) // true
Boolean('foo') // true
Boolean({}) // true
Boolean([]) // true

Boolean(undefined) // false
Boolean(null) // false
Boolean(false) // false
Boolean('') // false
Boolean(NaN) // false

Two forms of IIFE

Thu, 22 Oct 2015 00:00:00 GMT

TIL there are two ways of creating an IIFE - and there's heated discussion between parties as to why they have chosen their preferred style. Douglas Crockford prefers the second structure here, as the first "looks like dog balls". If you use JSLint, you'll be encouraged to adopt the latter style - it suggests the parentheses that invoke the function should sit within those that contain it.

(function(){
  function foo() {
    // I'm not polluting the global scope!
  }
})();

(function(){
  function bar() {
    // Nor am I!
  }
}());

Check whether a DOM element exists using jQuery

Mon, 29 Jun 2015 00:00:00 GMT

A straightforward little post: if you want to detect whether a DOM element actually exists on the page (perhaps you're flying in the blind), you can write if ($('selector').length) { // Foo }. If the element is present, it'll evaluate to true and you can work from there.

JavaScript's Ternary Operator

Wed, 27 May 2015 00:00:00 GMT

<p class="lead">When you've been writing code for a good while, you start looking at ways to speed up the process. Perhaps the most obvious method to achieve this is to write fewer lines of code.</p>

A typical if/else statement looks like this:

var foo = 10,
    bar = 20,
    baz;

if (foo > bar) {
  baz = foo;
} else {
  baz = bar;
}

console.log(baz); // 20

Look at that: five lines of code. We can do better than that, right?

Right!

JavaScript offers a ternary operator that takes three values: condition ? expr1 : expr2. The above code can be condensed to the following.

var foo = 10,
    bar = 20,
    baz;

baz = foo > bar ? foo : bar;

console.log(baz); // 20

What we're saying is that if foo is greater than bar, baz is assigned the value of 10. If not, baz is 20.

Personally, I've found that a major drawback of using syntax like this is that the code becomes harder to parse when reading through it. Your mileage may vary, but just like omitting the braces of single-line if statements, it takes just that extra beat of brain-power to comprehend.

Each, Map, and Reduce

Fri, 22 May 2015 00:00:00 GMT

<p class="lead">Functional programming (FP) aims to create predictable code by eliminating so-called <a href="https://programmers.stackexchange.com/questions/40297/what-is-a-side-effect">side effects</a>, bringing with it confidence that the same code with the same arguments will produce the same results. In order to achieve this, developers rely on <i>higher-order functions</i>: functions that operate on other functions.</p> <p class="lead">JavaScript provides the developer with a number of useful functions that can be used to apply FP principles to their development.</p>

forEach()

forEach() takes an array, iterates over its values and applies the specified function on them. It can be considered an abstracted version of the basic for loop: we don't define a counter, check the length of the array, tell it how to increment (or decrement, for that matter), nor have to define a new variable within the loop body to store the current element.

var foo = [
  'Tom',
  'Dick',
  'Harry'
];

foo.forEach(function(name) {
  return name + ' smells';
});

While the applied function can be created on the spot, we can also provide a function that has been written earlier in the hopes of adhering to the principle of DRY.

forEach() (and the functions mentioned below) were 'only' standardised in 2009, so aren't available in older browsers. Should you rather not write a polyfill yourself, lodash (or Underscore) provide an interface to the same functionality:

var foo = [
  'Tom',
  'Dick',
  'Harry'
];

_.each(foo, function(name) {
  return name + ' smells';
});

Interestingly, Ben McCormick tells us that the two libraries are both faster than their native counterparts in this case:

A little research indicates that this is because native functions optimize for sparse arrays and have more weird corner cases that they handle. In any case, the performance difference is pretty startling across the board.

While the native implementation is currently only available on arrays, lodash's implementation is designed to operate on any kind of collection, including object literals and NodeLists.

map()

The map() method takes an array, iterates over its contents, applies a function to all of its elements, and returns a new array with the transformed values.

var foo = [
  'Tom',
  'Dick',
  'Harry',
];

// Native
var bar = foo.map(function(name) {
  return name + ' smells';
});

// lodash
var bar = _.map(foo, function() {
  return name + ' smells';
});

This helps streamline the process of avoiding 'side effects' - the function isn't altering our original array, so it can be used again without mishap.

reduce()

When we want to get just a single value from an array, we can turn to reduce(). This method aggregates all values in a collection and returns a single value from them: whether that be a miniumum, maximum, average, or what-have-you.

reduce() takes a transformative function, and an intial value it should start computing with:

var foo = [
  {name: 'Tom', age: 20},
  {name: 'Dick', age: 30},
  {name: 'Harry', age: 40}
];

var totalAge = function(result, person) {
  return result + person.age;
};

// Native
var total = foo.reduce(totalAge, 0); // 90

// lodash
var total = _.reduce(foo, totalAge, 10); // 100 - we started with 10 and continued summing from there.

Conclusion

The functions featured above are useful additions to a developer's toolkit. That these are higher-order functions means that they allow developers to write code that is simple to comprehend. There is no mess of code dealing with initialising loops to wade through. As these functions work on the output of other functions, they can be chained together quite trivially. Here's lodash's example for its .chain() function:

var users = [
  { 'user': 'barney',  'age': 36 },
  { 'user': 'fred',    'age': 40 },
  { 'user': 'pebbles', 'age': 1 }
];

var youngest = _.chain(users)
  .sortBy('age')
  .map(function(chr) {
    return chr.user + ' is ' + chr.age;
  })
  .first()
  .value();
// → 'pebbles is 1'

Straightforward, self-documenting code.

Using JavaScript's bind() function

Thu, 30 Apr 2015 00:00:00 GMT

<p class="lead">Since it was introduced in 2009’s ECMAScript 5 (ES5) specification, all functions have the <code>bind()</code> method. Using it creates a new function that calls the original with some arguments already fixed. This is known as a "partial function application".</p>

Using `bind` to set parameters

Partially applying a function using bind() allows us to fill in arguments before the function is called. In the following example, bind() is used to create a new function that takes add(), but only requires a single parameter: x is always going to be 1:

function add(x, y) {
  return x + y;
}

var plus1 = add.bind(null, 1);
console.log(plus1(5)); // 6

Using `bind` to set `this`

bind() can also be used to allow the developer to specify the context in which this must be used. In the example above, we passed null. In the next, we don't pass any additional arguments, but provide the function an object. As we learnt previously, this is bound explicitly when set this way.

function foo(something) {
  console.log(this.a, something);
  return this.a + something;
}

var obj = {
  a: 2,
};

var bar = foo.bind(obj);

var b = bar(3); // 2 3
console.log(b); // 5

this and that in JavaScript

Fri, 24 Apr 2015 00:00:00 GMT

<p class="lead">When looking at code written by others, you may wonder why JavaScript developers will often alias <code>this</code> as <code>that</code>, or <code>self</code>, within a function. Why is this? Surely <code>this</code> always refers to the current object?</p><p class="lead">Short story: nope.</p>

What's `this`?

Unlike other languages where it refers to values stored in instance properties, the this keyword is dynamically bound based on how a particular function is executed. Because of its shifting nature, it can be tricky to keep track of what this might be referring to when it is called. With a little understanding of the rules behind this, we can be more confident when writing our code.

There are four rules that help us figure out what this may be at a particular point in time, and these rules are based on the call-site of the function.

1: Default Binding

When our function is invoked of its own accord, ala:

function foo() {
  console.log(this.a);
}

var a = 2;

foo(); // 2

The call to this.a resolves to the global variable of the same name. If we were running in strict mode - and you should - we would find that it would be undefined:

function foo() {
  console.log(this.a);
}

var a = 2;

foo(); // 'this' is undefined

2: Implicit Binding

When calling a function as an object method, its call site now has some context and the object in question should be used for the function's this binding.

function foo() {
  console.log(this.a);
}

var obj = {
  a: 2,
  foo: foo
};

obj.foo(); // 2

3: Explicit Binding

We can use the call() and apply() utilities to force a function to use a particular object for its this binding. For both utilities, the first parameter is the object to use. As we've discovered previously call() takes a list of parameters, while apply() is given an array as its second argument.

function foo() {
  console.log(this.a);
}

var obj = {
  a: 2,
};

foo.call(obj); // 2

Hard Binding

Both implicit and explicit binding lose their this binding when passed around. The following pattern helps ensure that this doesn't happen:

function foo() {
  console.log(this.a);
}

var obj = {
  a: 2,
};

var bar = function() {
  foo.call(obj);
};

bar(); // 2
setTimeout(bar, 100); // 2

The new bar() function calls foo() with this bound to our object. bar() can be passed around, as it is to setTimeout(), and yet this remains 2.

It might get a little tiresome wrapping functions for this purpose, so ES5 (supported natively in IE9+, or with ES5-shim) gives us bind(): a utility that returns a new function that calls the original, with this set as required.

function foo(something) {
  console.log(this.a, something);
  return this.a + something;
}

var obj = {
  a: 2,
};

var bar = foo.bind(obj);

var b = bar(3); // 2 3
console.log(b); // 5

4: new Binding

When using new to create a new object, the new object is set as the this binding.

function foo(a) {
  this.a = a;
}

var bar = new foo(2);
console.log(bar.a); // 2

So, if the function is called:

with new, this is the new object;
using call, apply, or bind, this is the specified object;
as it being a method of an object, this is that object;
in standard execution, this is either the global object, or will be undefined if using strict mode.

Why `that`, then?

Each function call gets its own this binding. When a function is executed inside another, we no longer have access to the original this value. By aliasing it as that or self at the top level, we can retain a reference to the original value and make it visible to inner functions.

As for the reasoning behind this convention, Douglas Crockford states that:

...This is a workaround for an error in the ECMAScript Language Specifications which causes this to be set incorrectly for inner functions.

While it's a useful trick to have in the toolbox, JavaScript does give us utilities to avoid having to use it in the first place. We can take advantage of the functionality JavaScript gives us with call(), apply(), and bind() in order to explicitly tell a function the context it will be running in.

setTimeout and setInterval

Tue, 21 Apr 2015 00:00:00 GMT

<p class="lead">JavaScript features a couple of useful utilities that allow the developer to schedule code to run outside of the normal execution flow.</p>

setTimeout

In order to run a function after a specific delay, we use setTimeout():

function doSomething(message) {
  console.log(message);
}

var myTimeout = setTimeout(doSomething, 2000, "lol");

// Two seconds later...
// lol

Timeouts can be cancelled using clearTimeout() and passing the ID of the timeout in question. In the above example, to prevent our applicating from printing lol, we could set up a button which called clearTimeout(myTimeout).

setInterval

If you want to call a function repeatedly, setInterval() is the more appropriate tool. It looks very similar:

function doSomethingElse(message) {
  console.log(message);
}

var myInterval = setInterval(doSomethingElse, 5000, "See you in five...");

// Every five seconds...
// See you in five...

As with timeouts, we can run clearInterval() to call a halt to proceedings when we are done with it.

Debouncing

Imagine a searchbox that offers suggestions as you type. On each keydown event, a function is run that makes a network request. If the user enters a long query quickly, the browser (and remote server!) may quickly become overwhelmed and end up feeling unresponsive.

To overcome this, we can implement setTimeout() in order to debounce the event: we prevent it from happening too often. Instead of calling the function on each keypress, we wait for an opportune moment - perhaps a slight pause. When events occur closer than our timeout delay, the timeout from the previous keypress is cancelled and a new one is executed.

var myTextBox = document.querySelector('[type="search"]');
var myTimeout;

myTextBox.addEventListener("keydown", function() {
  clearTimeout(myTimeout);
  myTimeout = setTimeout(function() {
    // Query remote server
  }, 500);
});

last-child in CSS

Wed, 08 Apr 2015 00:00:00 GMT

The :last-child psuedo-selector allows the developer to target the last child element of its parent. But you need to qualify it with the element that you are targetting. Something that has caught me out in the past has been applying the selector to the parent itself:

/* Nope - this won't work and you'll feel silly */
ul:last-child {
  border-bottom: none;
}

It kind of makes sense, right? I want the last child of that unordered list. But no: pseudo-selectors, such as :last-child, :hover, and :checked work on the state of the specified element.

In the common scenario of wanting to style the last element in a list differently, you can use the following code example:

li {
  border-bottom: 1px solid #f3f3f3;
}

li:last-child {
  border-bottom: none;
}

When that list element finds itself as the :last-child of its parent, the browser will remove its border.

JavaScript's 'let' keyword

Wed, 01 Apr 2015 00:00:00 GMT

Good news everybody! ES6 (or ES2015) introduces the let keyword. This allows the developer to attach a variable to the scope of whatever code block - code between { and } - it resides in. Block scope rather than function scope!

JavaScript Constants

Thu, 26 Mar 2015 00:00:00 GMT

The new ES6 JavaScript standard finally allows developers to declare variables using the handy const keyword. This prevents the value from being reassigned - somewhat reassuring if that's a requirement.

That said, values declared with const can still be modified after the fact: they're not immutable. If you're after that particular bit of functionality, you can still fall back on the .freeze property that objects have access to. If you're using strict mode - and why not? - you'll receive a TypeError, unless you look to see whether the object .isFrozen.

Shadowing And Hoisting In JavaScript

Sun, 25 Jan 2015 00:00:00 GMT

Shadowing

To "shadow" a variable is to create a new variable with the same name as one that exists in a higher scope. In JavaScript, a new scope is created when writing a function. When resolving a variable, JavaScript starts at the innermost scope and searches outwards.

Hoisting

Hoisting, on the other hand, is a behaviour which results in variables being raised, or 'hoisted', to the top of the scope - the function - in which they have been defined. It's recommended to declare all of your variables at the top of a function in order to avoid overwriting a value.

Checking Date Equality in JavaScript

Wed, 16 Apr 2014 00:00:00 GMT

Checking whether one date is equal to another is made difficult because of the way object equality works in JavaScript. Object equality isn't tested by the internal value of the object, but by identity. If the date object isn't a straight copy, it isn't considered equal. The following example will never return true:

function isChristmas(dateToTest){
  var christmas = new Date("12/25/2014");
  return (dateToTest === christmas);
}

console.log(isChristmas(new Date("12/25/2014"))); // False

To make the isChristmas function work, we need to check equality in a different way. We use the getTime method that is available on Date object, and compare the values it returns. getTime returns an integer representing the number of milliseconds since midnight of the epoch: January 1st, 1970.

function isChristmas(dateToTest){
  var christmas = new Date("12/25/2014");
  return (dateToTest.getTime() === christmas.getTime());
}

console.log(isChristmas(new Date("12/25/2014"))); // True

But! If we happen to compare against a Date object that occurs on the same day, but a different hour, we'll run into trouble - because the time elapsed since the epoch will be different.

A work around here might be to check our date against the year, month and day, like so:

function isChristmas(dateToTest){
  return (dateToTest.getFullYear() === 2014) &&
  (dateToTest.getMonth() === 11) &&
  (dateToTest.getDate() === 25);
}

console.log(isChristmas(new Date("12/25/2014 12:00"))); // True

But then this is glossing over the complexities that daylight savings and timezones introduce.

TL;DR: Be aware that there are 'gotchas' when comparing dates. Use Moment.js to avoid them and make your life easier.

Substring, Substr, and Slice.

Mon, 03 Mar 2014 00:00:00 GMT

When dealing with strings in JavaScript, there are several options available when needing to return a particular section:

Substring

This function can accept two parameters: the first an integer between 0 and the length of the string; the second an integer between 0 and the length of the string. substring returns a subset of a string between one index and another, or if the second parameter is omitted, through to the end of the string. A useful feature of this implementation is that if the first parameter is larger than the second, the effect of substring will be as if the arguments were swapped.

Substr

substr is a variant of substring. The difference here is that while the first parameter defines the first character, the second specifies the number of characters to return.

Slice

Both arrays and strings boast a slice method. The arguments it will accept are integers to define the the start and end points of the extraction. Again, if the end point is omitted, the function will keep going until the end of the string. A benefit is that the second argument can be a negative value, which will allow the operation to begin counting from the end. On top of this, slice will return a new string.

References

Closures 101

Mon, 03 Feb 2014 00:00:00 GMT

I updated this post on the 16th February in order to clarify my writing and thoughts.

What is a closure?

In computer science:

a closure is a first-class function with free variables that are bound in the lexical environment. Such a function is said to be "closed over" its free variables. A closure is defined within the scope of its free variables, and the extent of those variables is at least as long as the lifetime of the closure itself.

A higher-level definition is that

A closure is a function defined within another scope that has access to all the variables within the outer scope.

And just in case, think of it as:

...like keeping a copy of the all the local variables, just as they were when a function exited.

Closures are a strange concept to get to grips with, but once this core concept is understood they're relatively easy to understand: a closure is created when a developer accesses variables outside of the immediate lexical scope.

An example of a closure in action

function makeAdder(a) {
  return function(b) {
    return a + b;
  };
}

x = makeAdder(5);
y = makeAdder(20);

x(6); // 11
y(7); // 27

JSFiddle demo

What happens in a closure?

When makeAdder is called, a new scope is created with one property: a - the argument passed to the function. It also returns the anonymous function declared within it. This returned function maintains a reference back to that original scope. This scope will persist and escape being garbage collected until there are no more references to that function.

Take a look at what happens when we log x:

function(b){
  return a + b;
}

So when we call x and pass an argument, that's going straight into the anonymous function makeAdder returned the first time. Because we know a closure is a combination of a function and its scope

Since we are then able to all y, we discover that we have ended up with two different copies of makeAdder's local variables: one in which a is 5, and another where a is 20.

When would I use a closure?

The technique is often used to prevent against contaminating higher levels of scope - data is kept tucked away. Along these lines, a closure can be used to help practise encapsulation: an object can return its public methods and variable, while keeping those intended to be private hidden and inaccessible to the rest of the codebase.

You may have taken advantage of one without realising it, as they're a key concept when implementing an 'Immediately-Invoked Function Expression' (IIFE). Using an IIFE within a module, as per the Module Pattern, ensures that the module is self-contained.

An intelligent developer will

use closures to create additional scopes that can be used to group interrelated and dependent code in a way that minimises the risk of accidental interaction.

Useful reading

Event Delegation In JavaScript

Mon, 27 Jan 2014 00:00:00 GMT

First, some markup:

<ul id="list">
  <li id="item-1"></li>
  <li id="item-2"></li>
  <!-- A little while later - hope this is automated! -->
  <li id="item-99"></li>
  <li id="item-100"></li>
</ul>

What is event delegation?

In the example above, it's inefficient for both the browser and the developer to write event listeners for a large number of elements - particularly if these elements are being generated dynamically. Event delegation entails attaching a single listener to the parent element, then checking the target element as it bubbles up through the document structure.

What are the advantages?

Writing less code, for one, and less code means fewer opportunities for bugs to arise. It also means that when elements are removed, we don't run into the risk of forgetting rid ourselves of their event listeners. Too many of those floating around in memory - particularly in complex web applications - can cause problems for the browser.

How do I implement event delegation?

Here's a no-frills example:

document.getElementById('list').addEventListener('click', function(e) {
  if (e.target) {
    console.log(e.target.id); // Prints item id
  }
});

See this example in action

Get The Day Of The Week In JavaScript

Mon, 27 Jan 2014 00:00:00 GMT

var now = new Date();
var day = now.getDay();
// 1 (Monday)

It might not straight up give us "Monday", but it's a useful method to know.

JavaScript Feature Detection

Sun, 26 Jan 2014 00:00:00 GMT

Some JavaScript features just don't work in certain browsers. While it used to be a common practice to 'sniff' the user-agent string of the browser, this is now frowned-upon. The preferred approach is for developers to implement feature detection. That is, testing the ability of the browser to carry out the desired task. If the feature is not supported, we write our code intelligently in order to cater for this eventuality.

In Mark Pilgrim's Dive Into HTML5, he documents a selection of techniques:

Checking for the existence of a property on a global object
Creating an element and checking for the property on that
Calling a method on a generated element and examining the value it returns
Setting a property on an element to a particular value and checking to see whether it has retained this value

A common example of the first technique is when writing an AJAX function:

var xmlHttp;
if (window.XMLHttpRequest) {
  xmlHttp = new XMLHttpRequest();
} else {
  // Figure out which ActiveX control to set up for Internet Explorer
  var XmlHttpVersions = new Array(
  'MSXML2.XMLHTTP.6.0',
  'MSXML2.XMLHTTP.5.0',
  'MSXML2.XMLHTTP.4.0',
  'MSXML2.XMLHTTP.3.0',
  'MSXML2.XMLHTTP',
  'Microsoft.XMLHTTP');

  for (var i = 0; i < XmlHttpVersions.length && !xmlHttp; i++){
    try {
      xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
    } catch(e) {
      // Here be dragons
    }
   }
  }

Thankfully, libraries such as Modernizr can be implemented in order to reduce the amount of boilerplate that needs to be written. It has an API that can be queried to easily check for feature support. If they're not present, we can write a fallback so that the user's experience isn't compromised:

// Determine if font-face is supported
if (Modernizr.fontface) {
  // Do something
} else {
  // No fancy fonts
}

References

Ensure A Table Fills Its Containing Element

Fri, 24 Jan 2014 00:00:00 GMT

table {
  table-layout: fixed; // Default is auto
}

I was wondering what the correct CSS property was to control this requirement. Setting a width on the table element was doing precisely zip. That is until we set the above.

Linked Lists

Thu, 23 Jan 2014 00:00:00 GMT

<p class="message">This is one of a series based around understanding a number of core Computer Science concepts - <a href="/2014/01/22/path-to-mastery/">please read the original post for the intentions behind it</a>.</p>

A linked list is often used to implement data structures including lists, stacks, queues, and associated arrays. It's constructed from a list of nodes which when linked together represent a sequence. Each node is built of its data and a pointer to the next node in the sequence. Elements can be inserted or removed at any position.

In JavaScript, a linked list could look like this:

// A single node
var node1 = {
	data: null,
	next: null
};

// Add data to node
node1.data = 12;

// Create another node
var node2 = {
	data: null,
	next: null
};

// Link (aha!) first node to second
node1.next = node2;

This will soon become rather unwieldy to manually manage, so at this point we'll need to write a function that can do the grunt work for us:

add an item
retrieve an item
remove an item

As above, our representation of a list will need to have properties which reveal its length and the first item in the list.

function linkedList() {
  this.length = 0;
  this.head = null;
}

In order to add an item to the list, we will need to traverse the list until we find the desired location. If the list is empty, we create a new node and assign it to our lists head.

add: function(data) {
  var node = {
    date: data,
    next: null
  },
    current;

  if (this.head === null) {
    this.head = node;
  } else {
    current = this.head;
    while (current.next) {
      current = current.next;
    }
    current.next = node;
  }
  this.length++;
},

retrieve: function(index) {
  // Check index not out of bounds
  if (index > -1 && index < this.length){
    var current = this.head,
      i = 0;

    while (i++ < index){
      current = current.next;
    }

    return current.data;
  } else {
    return null;
  }
},

Loops in Sass

Thu, 23 Jan 2014 00:00:00 GMT

Sass makes it dead simple to automate repetitive tasks we might encounter when writing CSS.

Sass 'For' loop

@for $i from 1 through 100 {
  .box:nth-child(#{i}) {
    // Properties
  }
}

Sass 'Each' loop

@each $member in john, paul, george, ringo {
  .bandmember.#{$member} {
    background url("images/#{$member}.png");
  }
}

The Path to Mastery

Wed, 22 Jan 2014 00:00:00 GMT

After reading Zach Wentz's Medium post on CodeSchool, I resolved to reminding myself of the concepts I'd encountered while studying for my Computer Science degree.

Wentz's key point is that:

To truly master the art of programming, we must learn the techniques available to us, not just the tools. Data structures, algorithms, design patterns, and computer science concepts are what I’m talking about here.

Of them, some came back incredibly quickly, while others were new - and I'm glad to have refreshed my memory, because they are genuinely interesting topics.

I've been drafting a series of posts that cover each of the topics Wentz suggested - I hope they're of use.

Data Structures

Linked Lists (22/01)
Binary Trees
Tries
Stacks
Queues
Vectors/ArrayLists
Hash Tables

Algorithms

Breadth First Search
Depth First Search
Binary Search
Merge Sort
Quick Sort
Tree Insert/Find

Concepts

Bit Manipulation
Singleton Design Pattern
Object-Orientated Programming
Factory Design Pattern
Memory (Stack vs Heap)
Recursion
Big-O Time

Flavours of Linux

Tue, 21 Jan 2014 00:00:00 GMT

For whatever reason, I have found myself looking after two VPS set-ups: the first running CentOS with South West Broadband, the second an Ubuntu droplet over at Digital Ocean. Thing is, after learning the basics of server configuration, and getting comfortable with the way CentOS does things, I've only gone and confused myself by flitting between the variants. Common tasks are carried out in quite different ways.

For instance, CentOS uses yum as its package manager; Ubuntu has apt-get. When configuring Apache on CentOS, it is restarted using /etc/init.d/httpd restart (which I've aliased to the slightly snappier reboot). Back in Ubuntu-land, this operation is done with service apache2 restart, but don't forget to activate any new hosts with a2ensite.

Below is a short table describing the commands I've found useful as a website owner:

<table> <thead> <tr><th>Task</th><th>CentOS</th><th>Ubuntu</th></tr> </thead> <tbody> <tr><td>Change password</td><td colspan="2"><code>passwd</code></td></tr> <tr><td>Add a user</td><td colspan="2"><code>adduser USERNAME</code></td></tr> <tr><td>Delete a user</td><td colspan="2"><code>userdel USERNAME</code></td></tr> <tr><td>Remove user directory</td><td colspan="2"><code>rm -rf /home/USERNAME</code></td></tr> <tr><td>Delete user and their home directory</td><td colspan="2"><code>userdel -r USERNAME</code></td></tr> <tr><td>Webroot</td><td colspan="2"><code>/var/www</code></td></tr> <tr><td>Edit virtual hosts</td><td><code>/etc/httpd/conf/httpd.conf</code></td><td><code>/etc/apache2/sites-available/site-name</code></td></tr> <tr><td>Enable virtual host</td><td>N/A</td><td><code>a2ensite site-name</code></td></tr> <tr><td>Reboot Apache</td><td><code>/etc/init.d/httpd restart</code></td><td><code>service apache2 restart</code></td></tr> <tr><td>Install package</td><td><code>yum install package</code></td><td><code>apt-get package</code></td></tr> <tr><td>Find IP address</td><td colspan="2"><code>ifconfig eth0</code></td></tr> </tbody></table>

PS - Sorry for not using your favourite distro, or for doing things in an incredibly convoluted manner. Feel free to correct me on Twitter with any tips and tricks you've picked up!

Using Grunt to Compile Sass

Sun, 19 Jan 2014 00:00:00 GMT

A quick snippet from my gruntfile.js that illustrates how I'm using Grunt to watch my Sass directory for changes, before compiling and outputting minified CSS.

grunt.initConfig({
  watch: {
    css: {
      files: ['public/sass/**/*.scss'],
      tasks: ['buildcss']
    }
  },
  sass: {
    build: {
      options: {
        style: 'compressed'
      },
      files: {
        'public/css/styles.css':'public/sass/styles.scss'
      }
    }
  }
});

grunt.registerTask('buildcss', ['sass']);

When coding, use grunt watch to keep track of changes, or run grunt buildcss to manually compile the files.

Exclude folders in Jekyll

Sat, 18 Jan 2014 00:00:00 GMT

After experimenting with Grunt, I noticed that the deploy was taking rather a long time - it turned out that Jekyll was bundling my 'node_modules' directory (all 32MB of it!) into its compiled site folder. However, I can avoid this in future by adding: exclude: node_modules to my _config.yml file.

Access URL Query Parameters With JavaScript

Fri, 10 Jan 2014 00:00:00 GMT

I was recently tasked with building a promotional page for Didlr which needed to feature a personalised call to action. Typically, this would have been done server-side, but as visitors would be landing on the page via one of the mobile apps, we'd have to append the username when delivering the ads with our API. Thus, I would have to access this information on the client. And this is how I did it:

if (queryString('username')) {
	userName = queryString('username');
} else {
	userName = 'Your username goes here';
}

function queryString(key) {
	var url = window.location.href,
		keyValues = url.split(/[\?&]+/);

	for (i = 0; i < keyValues.length; i++) {
		keyValue = keyValues[i].split('=');

		if (keyValue[0] == key) {
			return keyValue[1];
		}
	}
}

There is certainly more than one way to skin a cat (as the saying goes), and were I a wee bit more comfortable with regular expressions I'm guessing that my queryString() function could be a little more elegant. The solution here grabs the URL, then adds items to an array when we encounter either an ampersand or a question mark. We loop over that array, and for each item contained within, we break it apart to return the value associated with the specified key.

On StackOverflow, an alternative solution is as follows:

function getParameterByName(name) {
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);

  return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

call() and apply()

Sun, 05 Jan 2014 00:00:00 GMT

apply() invokes the named function with an array of arguments
call() requires the arguments to be listed explicitly

The first argument in both methods allows us to specify what this refers to within that function.

These methods allow the user to write a method once, and then inherit it within another object - without having to rewrite the method for the new object.

A handy mnemonic to remember how to use each is as follows:

Think of a in apply() as an array of arguments

Think of c in call() as columns of arguments

Replace Contents Of Element In JavaScript

Sun, 15 Dec 2013 00:00:00 GMT

// Native
element.textContent = "Your text here"; // IE9+
element.innerHTML = content;
element.innerText = "Another example string"; // MS proprietary method; not supported in Firefox

// jQuery
.text("Your text here");
.html("<p>A message for you</p>");

Remove Child Nodes In JavaScript

Wed, 11 Dec 2013 00:00:00 GMT

After discovering whether an element has children, one may want to go ahead and remove them. The brutalist approach involves setting the node's innerHTML property to an empty string.

<div id="box">
  <h1>Hello</h1>
</div>

var box = document.getElementById('box');
if (box.firstChild) {
  box.innerHTML = '';
}

Another option is to grab the firstChild and then remove it like so:

while (box.firstChild) {
  box.removeChild(box.firstChild);
}

The results on jsperf indicate that removeChild is the faster of the two techniques, and also the more robust: the innerHTML technique won't work on XML markup.

But wait! As usual, there is another alternative. Check out:

while (box.hasChildNodes()) {
	box.removeChild(box.lastChild);
}

It's really just a variant on the method above: ensuring that box still has children and removing them from the bottom instead of the top.

Finding Child Elements In JavaScript

Tue, 10 Dec 2013 00:00:00 GMT

There are several techniques that allow us to discover if a particular DOM element has any children - whether there are any nodes contained within.

Warning: Nodes are usually, but not always HTML elements: the text inside a list element, for example.

if (element.firstChild) {
	// It has at least one
}

if (element.hasChildNodes()) {
	// Element has at least one
}

if (element.childNodes.length) {
	// Again, has at least one...
}

<div id="box">
  <h1>Hello</h1>
</div>

var box = document.getElementById('box');

console.log(box.firstChild);
// Returns NodeList

console.log(box.hasChildNodes());
// Returns true

console.log(box.childNodes)
// Returns array

Adding a meta tag with JavaScript

Wed, 25 Sep 2013 00:00:00 GMT

Sometimes there isn't any other option but to use JS to alter markup when one doesn't have control over the source. One Wapple user needed help ensuring that the viewport was being controlled - and for whatever reason - it was not being implemented which resulted in a sub-par experience for the customer. I was able to conjure up a teeny script which I dropped into her site:

var meta;

if (document.createElement && (meta = document.createElement('meta'))) {
  meta.name = 'viewport';
  meta.content = 'width=320';
  document.getElementsByTagName('head')[0].appendChild(meta);
}

Quite a straightforward slice of DOM manipulation, but it had the desired effect.

DOM Selectors 101

Sat, 22 Jun 2013 00:00:00 GMT

There are a variety of methods available that allow us to grab elements that are present in the Document Object Model (DOM).

getElementById()
// Browser support: all
getElementsByClassName()
// IE9 +
getElementsByTagName()
// All
getElementsByName()
// All
querySelector()
// IE8 +
querySelectorAll()
// IE8 +

The objects - in the loose sense of the word - that are returned are not arrays, but HTMLCollections. Other HTMLCollections include document.images and document.forms.

Numbers In JavaScript

Sun, 02 Jun 2013 00:00:00 GMT

The basics

Because JavaScript is a dynamically-typed language, we can declare a new number variable just as we would any other type: with the use of the var keyword, a name, the assignment operator, and optionally, its value.

// Declare variable as integer
var a = 123;
// Negative number
var b = -123;
// We can use decimal points, too
var c = 1.5;

In JavaScript, there is no difference between number types: we can't specify that one particular number is an integer, while another is a double. As far as the specification goes, all numbers are "double-precision 64-bit format IEEE 754 values". Because operations will always return a floating-point number, the JavaScript developer needs to watch out for rounding errors when using decimals. The result may not always be what is expected, as the following illustrates:

0.1 + 0.2;
// 0.30000000000000004

Weird, huh? This is because those numbers can't be represented exactly in binary form, and those representations are truncated by the implementation. When dealing with operations that require a high degree of accuracy - hello financial transactions! - it's recommended to manually round the result, or shift the decimal so that £1.53 becomes 153 pence.

Representing large monetary values in pence will eventually become unwieldy, so it's handy to know that they can be represented in scientific form. 1,000,000 will become 1E6: 1 to the power of 6.

A further pitfall is that numbers beginning with a 0 are interpreted as octals. In a similar manner, numbers starting with 0x will be interpreted as hexadecimal - base 16. It's a sensible idea to always sanitise user inputs and double-check strings before working with a number which may be in a different base to what is expected.

Operators

In JavaScript, our operators include +, -, *, and /: the usual suspects. Division in Javascript can return floating point numbers The modulo operator (%) is used to return the remainder after division of two operands. 15 % 10 = 5. When it comes the order of operations, JavaScript adheres to BODMAS: operands wrapped in parentheses are always evaluated first.

It is possible to compare numbers using <, >, <=, >=, === (equality) and !== (not equal to).

Parsing Numbers From Strings

In order to extract a number from a string, JavaScript's provides a function called parseInt(value [, base]). This function will work through the characters of the string until it finds a character that is not a numeral in the specified base. Thus:

parseInt("abc123", 10); // NaN
parseInt("123abc", 10); // 123

When using it, it's sensible to get in the habit of adding a base as the second (optional) argument. While most implementations will deliver a decimal if you omit it, you do run the risk of ending up with an octal or hexadecimal number.

parseInt("123abc", 2); // 1 (Only that first character is accepted in binary)
parseInt("123abc", 8); // 83
parseInt("123abc", 16); // 11946485
parseInt("0123abc"); // 123 (Current implementation no longer interprets as an octal
parseInt("0x123abc"); // 11946485

On occasions, complex strings can result in NaN: Not a Number. Before working on the result of a parseInt function, it's wise to check for the presence of NaN using isNaN(). To complicate matters, NaN is not equal to itself.

isNaN(NaN) // true
NaN === NaN // false

To carry out similar operations with floating-point numbers, we can use the aptly-titled parseFloat().

Methods

JavaScript comes with a robust assortment of methods to manipulate your numbers - all are name-spaced under the Math object.

Method	Use
`Math.random()`	Generates a random number between its default bounds of 0 and 1. It is seeded with the current time.
`Math.round()`	Rounds the supplied number to the nearest whole number
`Math.floor()`	Rounds the number down
`Math.ceil()`	Rounds number up
`Math.pow(base, exponent)`	Returns the result of the base to the power of its exponent: eg. `Math.pow(2, 3) == 8`
`Math.sqrt()`	Returns the square root of the supplied argument

JavaScript Callbacks

Tue, 28 May 2013 00:00:00 GMT

A callback is a method designated to handle the response of an AJAX call once it gets back to your method. JavaScript methods are treated as first-class objects, which means that they can be passed around just like objects, and they can be attached to all manner of events. Callbacks are used to prevent operation being blocked until the initial operation is completed. Callbacks are useful when the function needs to perform actions before the callback is executed, or when the function does not have meaningful return values to act on.

Function declarations versus function expressions

Thu, 23 May 2013 00:00:00 GMT

Function declaration

A function declaration is written like so:

function example() {}

A declared function is evaluated at parse-time - when the browser's Javascript engine gives it the once-over to see what it contains - and thus are loaded before any code is executed. In practical terms, this function can now be called at anytime: perhaps in code that is defined before the function. This is due to the idea of hoisting: a facet of the language that allows variables to be 'hoisted' to the top of the scope in which it is defined, regardless of where it's placed. As it happens, a variable is created with the same name as the function.

Function expression

A function expression looks like this:

var example = function() {}

This kind of function is evaluated at run-time and means that example() can't be called until the JS engine has reached that point in your code. If it's referenced before that, you'll get an error.

In reality, they're incredibly similar functionality wise. Just make sure you're aware of how the Javascript interpreter is going to load them.

Function constructor

This is a concept that was new to me before writing this - so perhaps the self-documentation idea does have merits! It is possible to write:

var example = new Function() {}

However, Mozilla's Developer Network advises against this approach because:

it needs the function body as a string, which may prevent optimizations

In JavaScript: The Good Parts, Douglas Crockford recommends that JS authors use function expressions because

it makes it clear foo is a variable containing a function value. It is important to understand that functions are values.

Coming from a 'classical' Computer Science background, I was initially more comfortable with function declarations. In practice, I prefer the aesthetics of the function expression: it improves legibility no end. You just need to remember that you can't call the function before it's been declared!

A few things to bear in mind:

A function name cannot be changed, but a variable to which a function is assigned can be reassigned.
The function name can only be used within the function's body.

Strings in JavaScript

Sat, 18 May 2013 00:00:00 GMT

Escape Characters

There are some useful ways to format strings in JavaScript:

A literal backslash would be written as \\
To start a new line, \n
To insert a tab, we use \t

Concatenating Strings

It's possible to join two (or more strings) like so:

var hello = "Hello ";
var world = "world!";

var helloWorld = hello + world;

This technique is useful for being able to break one long string over several lines for ease of editing:

var longString = "Hello, this could be a " +
  "rather long string if " +
	"allowed to run on one " +
	"line."

Methods

JavaScript's String class gives us a healthy number of methods that allow us to manipulate them. These include:

Method	Use
`length`	A property to describe the length of the string
`indexOf()`	Allows us to discover where a particular string exists
`charAt(index)`	Used to discover the character at the specified index. Don't forget indexes are zero-based!
`substr(start, length)`	Returns a snippet of the original string
`toLowerCase()`	Returns a new string that is all lower case.
`toUpperCase()`	Returns a new string that is in upper case.

Comparing Strings

By calculating the ASCII values of each character, JavaScript can help us determine if one string is equal to another.

var first = "Hello";
var second = "hello";

if (first === second) {
  console.log('Strings are equal');
} else {
  console.log('Strings are different');
}

Variable Scope in JavaScript

Sat, 18 May 2013 00:00:00 GMT

Variables belong to a scope, and that particular scope determines where a variable can be used. Scope is delineated with { and }

A function can use a variable declared outside of it, since it is available globally:

var world = "world";

function sayHello() {
  var hello = "Hello ";
  console.log(hello + world);
}

sayHello();
// Hello world

But trying to invoke a function's variable from outside will result in an error: hello is not defined.

Be careful when defining global variables - you don't want to mistakenly overwrite a value you are relying on. There are techniques to try and counter the possibility of this happening: concepts such as closures, or design patterns like the module pattern.

The Difference Between Methods And Functions

Fri, 10 May 2013 00:00:00 GMT

Often used interchangeably to describe the same thing, a method is a function used within the context of a class or object.

In JavaScript, Math.random() is a method, as it is a function of the Math class.

Dan Matthew

Global Accessibility Awareness Day 2026

Weeknotes: 2025-05-17

Accessible design guidelines

Operating and Navigating

Don't design for mouse interactions alone

Design what keyboard interactions look like

Think about the tab order

Targets should be large enough

Skip links

Links should be recognisable

Naming things

Auto-playing content

Colour

Colour contrast

Use of colour

Typography

Font size

Legibility

Numbers

References

How to perform an accessibility design review

When to review?

Quick checklist

Basic expectations

The design uses an accessibility-first approach

Accessibility annotations included

Defined interactions for custom components

Contrast meets requirements

Logical headings

Use plain language

Vertical layout for forms

Alt text conventions

Sufficient contrast and text size

Colour perception accommodation

Large target size

Focus states

Logical focus order

Responds to user preferences

Weeknotes: 2026-05-03

Weeknotes: 2026-04-26

Weeknotes: 2026-04-19

Weeknotes: 2026-03-29

Weeknotes: 2025-12-28

Weeknotes: 2025-11-30

danmatthew dot co dot uk at 20

Glofox Data Breach March 2020

Access local server from Parallels VM

Netlify CMS

Pharmaceuticals

Weeknotes: 2020-10-25

inaccessible.css

Styling visited links

Creating Github Releases With Lerna

Lerna

Circle CI

Creating a release

Circle Config

Creating a deploy key

Adding an access token

Publishing the release

Next steps

Weeknotes: 2020-08-01

CircleCI Node Images with Browsers

Using continuous integration to build, test, and publish with Netlify

The test

Testing against a local web server

Building a Deploy Preview with the Netlify CLI

Testing a Deploy Preview with Cypress

Use the Netlify provider, stupid

Bonus: Automating Github releases

Added orientation support to tabs component

Accessible Web Components: Tabs

The web component

Usage

JavaScript

HTML

Goodbye Gatsby; Hello Eleventy!

Preload, Prefetch, and Preconnect

Preload

Using `bind` to set parameters

Using `bind` to set `this`

What's `this`?

Why `that`, then?