foxnewsnetwork

The setup

In my Elixir phoenix web app, I have a plug which handles requests made to an internal endpoint which forbids access to all users without a proper authorization in the request header.

Sounds simple right? Well it is, the below is my plug. It checks if the incoming request has a "simwms-master-key" field, and passes all users who have that key.

foxnewsnetwork

Apparently xhr put (and patch) requests from browsers to remote servers ignore the response's Set-Cookie header. I don't know why browsers do this shit, but it's annoying as hell.

Remote Address:127.0.0.1:4000
Request URL:http://localhost:4000/api/sessions
Request Method:POST
Status Code:201 Created
Response Headers
view source
access-control-allow-credentials:true
access-control-allow-origin:http://localhost:4200

foxnewsnetwork

The Problem

Starting sometime in Ember 1.13.x, the core team decided that it shall be a bad idea to modify component variables inside the didInsertElement hook in Ember components. The explanation they gave was that it degrades performance (and who knows, perhaps it does, but I never notice because the 1000+ms waits for remote server to return data).

Nevertheless, modifying component properties on didInsertElement is often a necessity when (for example) we need to know the rendered dimensions of an element in order to perform some action:

didInsertElement: ->
  width = @$().width()
  @set "containerWidth", width
 @set "itemWidth", width

foxnewsnetwork

What is it?

Here is the Ember.js usage pattern for implementing named yield sections using nothing more than if statements and regular yield.

This has the advantage of not introducing irritating extra wrapper elements as is the case when using ember-wormhole or ember-named-yield

foxnewsnetwork

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  title: Ember.String.classify('asdf 344 日本語')
});

foxnewsnetwork

import Ember from 'ember';

export default Ember.Component.extend({
});

foxnewsnetwork

import Ember from 'ember';

export default Ember.Controller.extend({
});

foxnewsnetwork

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

foxnewsnetwork

The Problem

Say you're building an ember addon that has a commonjs dependency, what do you do?

That is, you have a commonjs file dependency that looks something like:

module.exports = {
  whatever: function() { ... }
}

foxnewsnetwork

What?

Are you using setInterval, setTimeout, or Ember.run in your components?

If the answer is "yes", you probably should look into using https://www.npmjs.com/package/ember-lifeline instead

Why?

The read the long answer on the addon repo itself, but the TL;DR is using ember-lifeline plays better with component life-cycles and avoids your queues never flushing

What's the problem

You can't use it if you're in 1.x.x... even though you probably need the most. This is because the import statements expect ember-metal which isn't a thing in the earlier versions