Skip to content

Instantly share code, notes, and snippets.


Jen Weber jenweber

View GitHub Profile
jenweber /
Created Jul 1, 2021
Welcome page proposal draft

Improving the hello world app experience

We have learned from our users that it can be confusing to generate a new app and not be able to edit what you see when you run the app locally. We want to give our new users the chance to make small changes to the welcome page experience, as part of their learning journey.

How things work today

Today, by default, all new apps come with the ember-welcome-page, which

jenweber /
Created May 26, 2021
Ember Data Guides brainstorm



touch on the overall goals what is different than Vue or React You can store state locally, and you can strongly relate records like a database would Tie in with attrs and belongs-to Managing models You have choices if you want to do something different Why use Ember Data over fetch (avoiding unnecessary queries, CRUD logic is not intermingled with the logic for the rest of your app, reactivity)

jenweber / gist:9a58f776143c6cfedd4d750aa755c9b7
Created Feb 24, 2021
Ember.js proposed wikipedia article outline
View gist:9a58f776143c6cfedd4d750aa755c9b7
- Intro - establish Ember as well-used a JavaScript framework. Include marketing differentiators.
- Philosophy - instead of philosophy and design - composition
- Features - un-editorialized
- Zero Config
- Components?, Component↔Service
- HTML First
- State management (tracked)
- Testing (& Debugging?)
- Decorators/it's just JavaScript
- VM
jenweber / css-grid-toolbar.css
Created Dec 17, 2019
CSS Grid split toolbar
View css-grid-toolbar.css
/* some buttons align left, others right, adjusts dynamically! */
.themer--top-edge-container {
display: grid;
position: fixed;
top: var(--ch-spacing);
right: var(--ch-spacing);
left: var(--ch-spacing);
z-index: var(--ch-actions-z-index);
grid-template-columns: auto auto;
jenweber / something.hbs
Created Nov 1, 2019
Multiple ember-animated beacons
View something.hbs
<div class="grid-container">
<div class="left-col">
<h1>Customize the style of the {{@cardName}} Card</h1>
<div class="display-wrapper">
<style id="card-styles"></style>
<div class="right-col">
jenweber / my-octane-component.js
Last active May 27, 2021
How to use Ember Concurrency with Octane
View my-octane-component.js
// Octane
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { task } from 'ember-concurrency';
export default class MyOctaneComponent extends Component{
@tracked status = null
@(task(function * () {
jenweber / components.a-teeny-component.js
Created Sep 4, 2019
Calling a passed-in action from another action
View components.a-teeny-component.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
something(info) {
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
firstname: '',
lastname: '',
fullName: Ember.computed('firstname', 'lastname', function() {
return `${this.get('firstname')} ${this.get('lastname')}`
actions: {
jenweber /
Created Mar 21, 2019
Transcript of Jen Weber's "How to Grow or Save Your Favorite Open Source Project" lightning talk from EmberConf 2019

How to grow or save your favorite Open Source project

Link to slides


Hi, my name is Jen Weber! I'm a member of the Ember.js core teams and soon I'll be working at Cardstack.

In the next five minutes, I’ll share proven grassroots organizing and sales strategies that you can use to grow your favorite open source project.

jenweber / components.d3-trouble.js
Last active Feb 2, 2019
Angle brackets bug reproduction
View components.d3-trouble.js
import Ember from 'ember';
export default Ember.Component.extend({