Skip to content

Instantly share code, notes, and snippets.

View MelSumner's full-sized avatar
Making the world a more sensible place.

Melanie Sumner MelSumner

Making the world a more sensible place.
View GitHub Profile

so let's say there's a route called like, about

Then the URL is pretty easy:

But let's say that in the route you want to also render user or settings depending on the user's actions

What does that URL look like?

Accessible Toggle in Ember.js

In, there is a toggle button component in various frameworks. This is the Ember equivalent of those examples.

In app/components/toggle-button.hbs:

<button aria-pressed="{{if this.isPressed "true" "false"}}" {{on "click" this.toggleButton}}>
 <span aria-hidden="true" class="icon">▼</span>
MelSumner /
Last active February 24, 2022 20:31

Call To Action (CTA) Component

"If it goes to a URL, it should be a link. If it performs an action, it should be a button."

This is the rule and for good reason-- the keyboard interactions are different, the visual affordances are different, and browsers and assistive tech treat these things differently.

We do what we can to educate both designers and developers about this, since over the years it has gotten a little fuzzy and maybe even ignored entirely. But lately, things are good. Folks understand that we need these things to be different for more inclusive design. It's great!

Except...the CTA.

Let's Make A Dropdown

Here, we intend a component that can be used for something like a user menu in a nav. Maybe you've heard it called "popover" or something like that.

It is not meant to be a select element, or used in a <form>.


  • make a component that other developers can consume as an addon
  • it should be accessible
MelSumner /
Created November 17, 2021 15:14 — forked from lopspower/
Hexadecimal color code for transparency

Hexadecimal color code for transparency


How to set transparency with hex value ?

For example, you want to set 40% alpha transparence to #000000 (black color), you need to add 66 like this #66000000.

Download This sample on Google Play Store

MelSumner /
Created April 20, 2021 15:01 — forked from silent1mezzo/
On undoing, fixing, or removing commits in git

A git choose-your-own-adventure!

This document is an attempt to be a fairly comprehensive guide to recovering from what you did not mean to do when using git. It isn't that git is so complicated that you need a large document to take care or your particular problem, it is more that the set of things that you might have done is so large that different techniques are needed depending on exactly what you have done and what you want to have happen.

  • Start Date: (fill me in with today's date, YYYY-MM-DD)
  • Relevant Team(s): (fill this in with the team(s) to which this RFC applies)
  • RFC PR: (after opening the RFC PR, update this with a link to it and update the file name)
  • Tracking: (leave this empty)

Interactive New Ember App Creation


As part of the effort to make new Ember apps more conformant for digital accessibility requirements at a global scale, this RFC proposes an interactive workflow for new Ember apps. This will also have the benefit of assisting new users who prefer an interactive model of new app creation.

Safari Keyboard Navigation

In order to allow for full keyboard navigation of all element in Safari on macOS, make sure the following options are enabled.

All Controls in macOS

In the macOS settings, allow "All Controls" to be keyboard accessible. Enable this feature by going to:

  1. Settings
  2. Keyboard

Document Active Element (DAE) is a JavaScript bookmarklet intended to help you more easily identify where the activeElement is on your screen.

To use:

  1. Add a new bookmark
  2. in the "Name" field, type DAE
  3. in the URL field, add the following code:
javascript:(function(){ = "1px solid red"; })();