Skip to content

Instantly share code, notes, and snippets.

Godfrey Chan chancancode

View GitHub Profile
View controllers.application\.js
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
export default class ApplicationController extends Controller {
queryParams = ['myArray'];
// The default value being an array is important. Changing this
// to anything else fixes the problem.
@tracked myArray = [];
}
View controllers.application\.js
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
}
View helpers.-do-not-call\.js
import { helper } from '@ember/component/helper';
export default helper(function doNotCall() {
throw new Error("told you not to call!!!");
});
View components.my-component\.js
import Component from '@glimmer/component';
export default class extends Component {
args = this.args;
}
View helpers.$\.js
import { helper } from '@ember/component/helper';
export default helper(function $([selector]) {
return document.querySelector(selector);
});
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}`);
},
You can’t perform that action at this time.