jamesarosen

Purpose

This living document is a list of all of the resources I have found that I think will help me become an astronaut. I hope they help you do the same.

I'm looking for more, especially on chemical engineering, fluid dynamics, and engine design. If you have recommendations, please comment below or Tweet me at @jamesarosen.

✓ indicates I have finished at least one run through (for courses, books, videos) or have spent enough time with it to feel confident (for open-ended things like software)

jamesarosen

TL;DR

In Ember, always use {{...}}, not {{{...}}}. Use Ember.String.htmlSafe as necessary in JavaScript (usually in a component) to mark markup as HTML-safe. Never pass user-entered content directly to Ember.String.htmlSafe.

Details

Ember has great XSS protection built in. The HTMLBars templating library will automatically run any interpolations through htmlEscape for you. So

jamesarosen

I recently put together a button component. I looked through the various buttons in our codebase and came up with the following requirements:

• understands being disabled
• blockless- or block form
• supports closure actions or named (route) actions
• support for stateful lifecycle: "Save" "Saving..." "Saved"

Disabled

We start off super small. Adding a disabled attribute to the `` tag is easy:

jamesarosen

This component is a buliding block for many other kinds of components. It consists of one bit of state -- isOpen -- and two actions to mutate that state -- open and close.

Usage

{{#x-toggle isOpen=false as |isOpen open close|}}
  <h3 class='item-header'>Some Item</h3>

  <div class='item-summary'>
 Summary information

jamesarosen

I'm working on an Ember application where there are a set of Widget instances and a dashboard to show information about the Widgets. The dashboard contains some controls to filter the stats. One of the filters is by widget_id. This filter contains a special entry, "All Widgets" (the identity filter).

I initially accomplished this with the simplest solution I could think of:

// app/models/widget.js
export ALL_WIDGETS = {
 id: 'all',

jamesarosen

Ping times seem reasonable, with no packet loss:

$ ping app.fastly.com
PING prod.a.ssl.global.fastlylb.net (23.235.47.249): 56 data bytes
64 bytes from 23.235.47.249: icmp_seq=0 ttl=56 time=19.061 ms
64 bytes from 23.235.47.249: icmp_seq=1 ttl=56 time=12.375 ms
64 bytes from 23.235.47.249: icmp_seq=2 ttl=57 time=8.196 ms
64 bytes from 23.235.47.249: icmp_seq=3 ttl=56 time=18.028 ms
64 bytes from 23.235.47.249: icmp_seq=4 ttl=56 time=10.225 ms
64 bytes from 23.235.47.249: icmp_seq=5 ttl=57 time=9.849 ms

jamesarosen

The Ember app I'm working on right now has a number of lists of elements. Some of those lists can be quite long. We could add pagination, but we decided that filtering would be a better solution.

I took a look at ember-list-filter. This library works and it has the basic features I'm looking for -- arbitrary template for the list item and arbitrary fields on which to filter. But its API isn't very modern-Ember.

In particular, I feel the iteration-item template should be a block and the fields should be positional (unnamed) parameters. So I whipped up a little component.

jamesarosen

I have a case in an Ember.Route where I want to start a few asynchronous fetches, each of which resolves with a complex Object, and then eventually merge the results. RSVP has some nice higher-level Promise utilities, but it doesn't have merge. So I wrote one.

If you only ever want to merge two Promises, you could do this

function mergeTwoPromises(promiseA, promiseB) {
  return new Ember.RSVP.Promise(function(resolve, reject) {
    Ember.RSVP.all([ promiseA, promiseB ])
    .then(function([ hashA, hashB ]) {
      resolve(Ember.merge(hashA, hashB));

jamesarosen

I'm trying to test some code that involves focus and blur handlers using event delegation. $(...).focus() doesn't work, but $(...).focus().focus() does!

The tests pass fine on PhantomJS and Safari, but fail on Chrome and Firefox. (No, I've never seen that happen before either!)

Here's a simple reproduction:

$('body').append("<div class='my-container'><input /></div>");
var $div = $('.my-container');
$div.on('focus', 'input', function(e) {

jamesarosen

I looked around for a good popover library for Ember. I couldn't find one I liked (and was compatible with Ember 1.13 and Glimmer), so I whipped up a little ditty:

{{!-- app/pop-over/template.hbs --}}
{{yield}}

// app/pop-over/component.js
import $ from "jquery";