Skip to content

Instantly share code, notes, and snippets.

Godfrey Chan chancancode

Block or report user

Report or block chancancode

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View ember-2019.md

Ember 2019

Here is my wishlist for the next edition of Ember.

Template Improvements

Templates are arguably the most important pillar of Ember. It's why Ember was born in the first place – Ember grew out of the Sprout Core 2.0 exercise, in which the main objective was to introduce templates to the Sprout Core framework. This has proven to be such a controversial idea that Tom and Yehuda ended up forking the Sprout Core framework and the rest is history.

Even today, templates are still controversial. The React community popularized the idea of JSX, CSS-in-JS, images-in-JS... as well as the tooling that makes all of that possible. There are a lot of folks who enjoy programming in that environment, and that is great. But if you are using Ember, you probably enjoy writing templates, and that is great too. Most of us see a lot of value in having a dedicated, constrained template programming language that is more apt for the job than JavaScript.

View bookmarklets.html
<a class="bookmarklet" href="javascript:(function()%7B(function()%20%7Blet%20e%3Be%20%3D%20new%20KeyboardEvent(%22keydown%22%2C%20%7Bbubbles%3A%20true%2Ccancelable%3A%20true%2Ccode%3A%20%22KeyT%22%2Ckey%3A%20%22t%22%2CkeyCode%3A%2084%2C%7D)%3Bdocument.activeElement.dispatchEvent(e)%3Bif%20(!e.defaultPrevented)%20%7Be%20%3D%20new%20KeyboardEvent(%22keypress%22%2C%20%7Bbubbles%3A%20true%2Ccancelable%3A%20true%2Ccode%3A%20%22KeyT%22%2Ckey%3A%20%22t%22%2CkeyCode%3A%2084%2C%7D)%3Bdocument.activeElement.dispatchEvent(e)%3B%7De%20%3D%20new%20KeyboardEvent(%22keyup%22%2C%20%7Bbubbles%3A%20true%2Ccancelable%3A%20true%2Ccode%3A%20%22KeyT%22%2Ckey%3A%20%22t%22%2CkeyCode%3A%2084%2C%7D)%3Bdocument.activeElement.dispatchEvent(e)%3B%7D)()%7D)()">t</a>
<a class="bookmarklet" href="javascript:(function()%7B(function()%20%7Blet%20e%3Be%20%3D%20new%20KeyboardEvent(%22keydown%22%2C%20%7Bbubbles%3A%20true%2Ccancelable%3A%20true%2Ccode%3A%20%22Escape%22%2Ckey%3A%20%22Escape%22%2CkeyCode%3A%2027%2C%7D)%3Bdocument.activeElement.dis
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
View components.event-blocker.js
import Ember from 'ember';
export default Ember.Component.extend({
type: '',
blockEvent(type, event) {
event.preventDefault();
event.preventDefault();
alert(`Blocked your ${type} event: ${event.target.value}`);
},
View components.click-away.js
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['click-away'],
attributeBindings: ['tabindex'],
tabindex: -1,
didInsertElement() {
this._super(...arguments);
this.element.focus()
},
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
didWin: false,
draw: function() {
this.set('didWin', true);
}
});
View controllers.application.js
import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';
const { Controller, computed, computed: { or } } = Ember;
export default Controller.extend({
jackpot: 1000,
jackpotText: computed('jackpot', function() {
return `$$${this.jackpot.toFixed()}`;
}),
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
noop() {},
checked: true,
setToTrue() {
this.set('checked', true);
},
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
init() {
this._super(...arguments);
this.set('range', Array(5));
},
You can’t perform that action at this time.