Sam Tsai samtsai

Making Accessible Ember Components

Making the web accessible is important. We have ethical and, in some cases, legal obligations to ensuring access to all of users.

Luckily for us, it's easy to make an accessible Ember Component.

What are components?

To understand the accessibility story around Ember Components, we have to start by talking about Web Components. Ember Components are designed to be interoperable with the final Web Components API.

Converting libraries to Ember CLI addons

In this guide we will cover two main cases:

Ember specific library
vendor library

Ember library

The Ember library will assume that Ember has already ben loaded (higher in the loading order) and thus will assume it has access to the Ember API.

Regular Event Loop

This shows the execution order given JavaScript's Call Stack, Event Loop, and any asynchronous APIs provided in the JS execution environment (in this example; Web APIs in a Browser environment)

Given the code

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

~~Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.~~

	pythonista://YouVersion?
	action=run&
	argv=[clipboard]&
	argv=[list:Mode\|
	New MD Entry in Day One=1\|
	Append Sermon Notes in 1Writer=2\|
	Send as iMessage (with content)=3\|
	Send as iMessage (URL only)=4]

	/* Original source: https://gist.github.com/oskarrough/914653b03d886c015320
	* Modified fork: https://gist.github.com/consideRatio/761c6286158e70feaed7
	*
	* Working authentication with
	* Firebase 2.0.x + Ember.js 1.8.1 + Ember Data Canary + EmberFire 1.3.0 + Ember CLI
	* works for me! [email protected]
	*
	* Note: this assumes you've set up login on your Firebase,
	* only handles Google and Facebook for now.
	*

	8 REM MINNESOTA EDUCATIONAL COMPUTING CONSORTIUM STAFF
	9 REM PROGRAMMING REVISIONS BY DON RAWITSCH - 1975
	11 REM CURRENT VERSION - 3/27/75
	15 REM FOR THE MEANING OF THE VARIABLES USED, LIST LINES 4900-4960
	25 PRINT "DO YOU NEED INSTRUCTIONS (YES/NO)";
	30 DIM C$[5]
	35 INPUT C$
	40 IF C$="NO" THEN 400
	45 PRINT LIN(2)
	59 REM *INSTRUCTIONS*

	import Ember from 'ember';

	export default Ember.Component.extend({
	didInitAttrs(options) {
	console.log('didInitAttrs', options);
	},

	didUpdateAttrs(options) {
	console.log('didUpdateAttrs', options);
	},

	# To get the `action` prop:
	#
	# 1. Go to your dashboard on mailchimp.com and navigate
	# to Lists > Signup Forms > Embedded Forms.
	#
	# 2. Copy the `<form>` action from the generated HTML code.
	#
	# 3. Pass that into the component via the prop, like so:
	#
	# <mailchimp-subscribe

	# lazyload nvm
	# all props goes to http://broken-by.me/lazy-load-nvm/
	# grabbed from reddit @ https://www.reddit.com/r/node/comments/4tg5jg/lazy_load_nvm_for_faster_shell_start/

	lazynvm() {
	unset -f nvm node npm npx
	export NVM_DIR=~/.nvm
	[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
	if [ -f "$NVM_DIR/bash_completion" ]; then
	[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion