Ember

`-p 0`

ember s -p 0

“-p 0” selects the first available port. If you are running multiple apps at once, this is super helpful so you don’t have to figure out which port is unused

`let` with angle bracket invocation

Angle bracket invocation doesn't support nested components (e.g., components/foo/bar, components/foo/baz), but you can use the let helper so you don't have to use the legacy syntax.

{{#let (component 'foo/bar') as |FooBar|}}
  <FooBar />
{{/let}}

Ember Data attr('number')

Can convert a string to a number for you

Route action `refresh()`

Refreshes model hook https://emberjs.com/api/ember/release/classes/Route/methods/refresh?anchor=refresh

Controller `send()`

Useful for calling action on router (like calling refresh to refresh the model in the model hook of the route above) https://emberjs.com/api/ember/release/classes/Controller/methods/send?anchor=send

Ember Data `findBelongsTo`

https://shipshape.io/blog/ember-data-belongs-to-find-or-create/

// app/adapters/foo.js
import ApplicationAdapter from './application';

export default ApplicationAdapter.extend({
  async findBelongsTo(store, snapshot, url, relationship) {
    const response = await this._super(store, snapshot, url, relationship).catch((error) => {
      // If the relationship is of type `bar` and the error status is 404, return an empty object
      if (relationship.key === 'bar' && error.errors[0].status === '404') {
        return {
          baz: 'Yay, default values!'
        };
      }

      // For other errors, we should rethrow them here
      throw error;
    });

    return response;
  }
});

Great read on handlebars expressions

Positional Params with Angle Bracket Invocation

https://gist.github.com/ef4/bb6b53d7b931591455e2c12d11d62545

Sass

`@extend` should use a placeholder instead of class name (09-24)

So it should be:

Before:

.text--color--black {
  color: $black;
}

.has-black-text {
  @extend .text--color--black;
}

After:

.text--color--black,
%text--color--black {
  color: $black;
}

.has-black-text {
  @extend %text--color--black;
}

Links:

Linting

Prettier + Linting in Ember

From rwjblue:

I do this basically https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill/commit/09d70fecae6d022c4ad76442b249457b9cd6aa1b:

yarn add -D eslint-plugin-prettier eslint-config-prettier prettier
yarn remove ember-cli-eslint


* Add .prettierrc with desired settings
* update .eslintrc.js to apply prettier

ynotdraw/2018-learnings.md

Ember

-p 0

let with angle bracket invocation