Skip to content

Instantly share code, notes, and snippets.

View jenweber's full-sized avatar

Jen Weber jenweber

View GitHub Profile
@jenweber
jenweber / draft.md
Created July 1, 2021 15:54
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
jenweber / my-octane-component.js
Last active May 27, 2021 16:08
How to use Ember Concurrency with Octane
// 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
jenweber / brainstorm.md
Created May 26, 2021 18:34
Ember Data Guides brainstorm

Outline

Intro

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
jenweber / gist:9a58f776143c6cfedd4d750aa755c9b7
Created February 24, 2021 15:55
Ember.js proposed wikipedia article outline
- 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
jenweber / components.with-concurrency.js
Last active April 21, 2020 12:14
ember-concurrency demo
import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';
export default Ember.Component.extend({
notify: Ember.inject.service('notify'),
actions: {
startECLoop: function() {
this.get('emberConcurrencyLoop').perform();
},
@jenweber
jenweber / css-grid-toolbar.css
Created December 17, 2019 22:47
CSS Grid split toolbar
/* 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
jenweber / something.hbs
Created November 1, 2019 22:49
Multiple ember-animated beacons
<div class="grid-container">
<div class="left-col">
<h1>Customize the style of the {{@cardName}} Card</h1>
<div class="display-wrapper">
{{yield}}
</div>
<style id="card-styles"></style>
</div>
<div class="right-col">
@jenweber
jenweber / components.my-component.js
Last active September 25, 2019 16:06
Simple Select
import Ember from 'ember';
export default Ember.Component.extend({
selectedOption: null,
actions: {
setSelection: function(selected) {
this.set('selectedOption', selected)
console.log(this.get('selectedOption'))
},
submit: function(){
@jenweber
jenweber / transcript.md
Created March 21, 2019 00:17
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

Transcript

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
jenweber / components.a-teeny-component.js
Created September 4, 2019 23:07
Calling a passed-in action from another action
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
something(info) {
this.sendTheForm(info)
}
}
});