According to various sources, including the Stack Overflow Developer Survey 2017, JavaScript is the most commonly used programming language on Earth and I do love it, I actually tweeted this a while back:

But this article isn’t about how much I love JavaScript, nope, it’s about how much it’s saturating the front end development space and worryingly becoming the be–all and end–all of front end development.

Let’s recap, the three front end technologies are:

  • HTML
  • CSS
  • JavaScript

However, it seems nowadays that most front end developers, and people looking to hire them, are only caring about the big “J”…

Building a highly consumable UI component library is no easy feat and this article will focus on one particular aspect of it: headings (<hx> elements).

This article follows on from my Handling spacing in a UI component library article so rather than repeat the whole “What type of UI component library” explanation, shoot over to that article and have a read, then come back 🙂.

However, what I’m about to cover doesn’t only apply to a UI component library, it works well for any UI build.

The HTML5 document outline

Before I get stuck in I wanted to make it clear that the HTML5…

Building a highly consumable UI component library is no easy feat and this article will focus on one particular tricky aspect of it: outer component spacing. By outer I mean spacing that is not internal to a component, highlighted in red here:

Two dummy UI components showing some spacing between them.

And the type of spacing I’ll focus on is vertical spacing, handling horizontal spacing could be a whole article in itself.

What type of UI component library?

The type of UI component library I’m thinking about is applicable to an application UI and one where the consumer, lets say a software engineer, isn’t expected to do any UI development work. By that I mean…

This follows on from my Let’s Try Harder With Web Accessibility article and will focus on practical tips you can apply in an effort to make your UI more accessible.

Applying the most semantic HTML is the most effective and the easiest way to make a UI accessible. It is fundamental and often understated.

A UI’s structure is represented as an Accessibility Tree which is generated from the HTML DOM, plus information derived from CSS. Each node in the tree represents an element in the UI.

The Web truly is an empowering platform that enhances and broadens the lives of people with disabilities. It breaks down barriers that exist in the physical world allowing people with disabilities to achieve what they might not have been able to without the Web—complete independence and for many a lifeline.

Someone who is legally blind or someone with a temporary disability—that someone could be you—unable to easily get to the local grocery store, could jump online, purchase their groceries, and have them delivered to their door. …

“A craft is a pastime or a profession that requires particular skills and knowledge of skilled work.”

I think building a User Interface (UI) is most definitely a craft and it’s a craft I’ve been perfecting for many years.

I’ve worked at a tiny agency (my first job), at a medium sized agency, at two large organisations, spent some time freelancing in another country, and now I am working at an email marketing company: Campaign Monitor.

This has given me exposure to working in different types of teams both in terms of size and experience. It has allowed me to…

Accessibility focused UX Engineer. Builder of UI systems. Everton FC fan.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store