Things learned throughout 2018

2018-learnings.md

Started in September, but...

Contents:

• Ember
• Sass
• Linting

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

• emberjs/rfcs#379 (comment)
• https://thefeedbackloop.xyz/designing-and-implementing-glimmer-like-a-programming-language/

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:

• https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/at-extend-no-missing-placeholder/README.md
• http://8gramgorilla.com/mastering-sass-extends-and-placeholders/

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