Skip to content

Instantly share code, notes, and snippets.


Marie Chatfield Rivas

Phone available on request Austin, TX



Austin, TX

mariechatfield / server-side-rendered.txt
Created Dec 11, 2018
Sequence Diagram Plain Text Descriptions
View server-side-rendered.txt
Sequence diagram of a user interacting with a server-side rendered site.
Three columns titled: User, Browser, Server.
First set of actions:
1. User opens /index.html
2. Browser gets /index.html
3. Server finds template at views/index.pug
4. Server fetches data for all emojis
mariechatfield / components.timeline-block.js
Last active May 22, 2018
Timeline with Fixed Sidebars
View components.timeline-block.js
import Ember from 'ember';
const START_MINUTE = 480; // 8:00am
function timeToPixels(minutes) {
return (minutes * PIXELS_PER_MINUTE) - leftOffset;
import Ember from 'ember';
export default Ember.Component.extend({
mariechatfield / ember_events_api_types_chart_description.txt
Created Mar 16, 2018
Caption for Chart: How to Attach Event Listeners in Ember
View ember_events_api_types_chart_description.txt
Header Row: Code Sample, API, Access to Event?
Row 1:
+ Code Sample:
didInsertElement() {
this.$().on('click', this.handleClick);
+ API: Native DOM
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
logs: [],
returnsAPromise(shouldResolve) {
return new Ember.RSVP.Promise(resolve => {
const promise = shouldResolve ? Ember.RSVP.resolve('yay! 🎉') : Ember.RSVP.reject('boo 😬');
mariechatfield / templates.application.hbs
Created Jan 4, 2018
directory hyphens count for component names
View templates.application.hbs
Component just needs a hyphen somewhere, but that counts if directory has a hyphen. (This is Ember 1.13)
View components.passed-directly.js
import Ember from 'ember';
import links from '../config/links';
export default Ember.Component.extend({
mariechatfield / controllers.application.js
Last active Aug 26, 2017
Parent Event Stops Propagation of Child Action
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
logs: [],
actions: {
log(line) {
mariechatfield / events_actions_flowchart_caption.txt
Last active Aug 6, 2017
Caption for Flowchart: How do events and actions work in Ember?
View events_actions_flowchart_caption.txt
Title of Chart: How do events and actions work in Ember?
Top of Chart
Step 1. Something happens! A DOM event is born.
- Proceed to Section A: DOM Events, Step 2: Event is triggered on node.
Section A
Title: DOM Events
Description: This logic is implemented by the browser and uses standard DOM events.