Skip to content

Instantly share code, notes, and snippets.


Steve Barnett SteveBarnett

View GitHub Profile
SteveBarnett /
Last active Mar 12, 2020
Link and Button examples
<!-- yes! -->
<button type="button">Show messages</button>
<button type="button">Show messages <img src="/icons/messages.png" alt="" /></button>
<button type="button"><img src="/icons/messages.png" alt="Show messages" /></button>
<button type="button" disabled aria-describedby="id-of-a-paragraph-explaining-why">Show messages</button>

<!-- please no -->
<button type="button"><img src="/icons/messages.png" /></button> <!-- no accessible name -->
<button type="button"><div>Show messages</div></button> <!-- divs aren't valid inside buttons -->
SteveBarnett /
Last active Jan 31, 2020
How to show current step accessibily

The way I think about it: what's the text version of this? It's a list, with the status in brackets after the step name.

	<li><img src="blop.svg" alt="Step 1 (complete) - The long bit of text that describes step 1" /></li>
	<li><img src="blop.svg" alt="Step 2 (complete) - The long bit of text that describes step 2" /></li>
	<li><img src="bleep.svg" alt="Step 3 (current) - The long bit of text that describes step 3" /></li>
	<li><img src="blorp.svg" alt="Step 4 - The long bit of text that describes step 4" /></li>
View index.html
<!doctype html>
<html lang="en">

Keybase proof

I hereby claim:

  • I am stevebarnett on github.
  • I am stevebarnett ( on keybase.
  • I have a public key ASDrGc9Di9id_mzJFCpGdTPEs41CYd5K9O8elJRaPxrTCwo

To claim this, I am signing this object:

SteveBarnett /
Created Feb 1, 2019
"How to make your team FED up" talk blurb

How to make your team FED up

Making software for the web is tricky. The more directly everyone on the team works with the materials of the web (HTML, CSS, and JavaScript), the more informed our design and development decisions can be. One of the best ways to do this is to have a team of T-shaped people (deep knowledge in one area, shallow knowledge in many others). Does that mean designers should learn to code? Nope. 🙅‍♀️ Does it help if they know a little about code? Yes! 🎉

We’ll look at a couple of tiny case studies of a Front-End Developer (me. Hi there! 👋) working with UI designers, UX designers, and Back-End Developers across different teams. We’ll see how sharing the FED love led to more accessible designs, more realistic prototypes, and cleaner front-end code. And since “front-end developer” can mean a lot of things these days, we’ll also look at various flavours of FEDs and why they are all delicious.

SteveBarnett /
Last active Jun 6, 2018
Comparison of HTML usage in Material for Angular and Bootstrap

Here's our custom Angular for an input (admittedly, mine, so not so the best way to Angular)

<app-label-input-pair labelText="Your name" inputId="your-name"></app-label-input-pair>

Here's the HTML output (which we write ourselves, following Bootstrap conventions)

<div class="form-group">
View .csscomb.json
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": true,
"quotes": "double",
SteveBarnett /
Created Sep 8, 2017
Form and error guidelines

Form and error guidelines

  • what (why)


Data / Contents

  • Have as few fields as possible (quicker to complete)
    • Remove optional field
SteveBarnett /
Last active Aug 12, 2017
A handful of handy UX checklists
SteveBarnett /
Last active Jul 4, 2017
Ideas for making coworkpress a little more friendly :)
Activity Why Details
Inform the venue clearly Let’s people arriving know they’re in the right place, and get pointed the right way. Tell the venue, and ask them to spread the word. Give them one of the stickers / cards / signs.
Name stickers. Show who’s there for coworkpress and who’s not. A sticker. With your name on it.
Status indicators Show who wants to chat and who doesn’t. “Talk to me!” / “please don’t disturb” or “Ssh! In the zone…” / “Want help? Me too!”. Use a card or a sticker or have tables.
Introduction activity. Help people get started talking to each other. 1. Start a new channel #coworkpress on the WP South Africa Slack and share there. 2. An activity: “Find someone you don’t know, who’s wearing a ‘talk to me’ sticker, and ask them: what are you working on? what’s your favourite thing about WordPress?”