mariechatfield

Marie Chatfield Rivas

Phone available on request Austin, TX mariechatfield.com github.com/mariechatfield

EXPERIENCE

Pingboard

Austin, TX

mariechatfield

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

import Ember from 'ember';

const START_MINUTE = 480; // 8:00am
const PIXELS_PER_MINUTE = 1;

function timeToPixels(minutes) {
  const leftOffset = START_MINUTE * PIXELS_PER_MINUTE;
  
  return (minutes * PIXELS_PER_MINUTE) - leftOffset;
}

mariechatfield

import Ember from 'ember';

export default Ember.Component.extend({
});

mariechatfield

Header Row: Code Sample, API, Access to Event?

Row 1:
  + Code Sample:
    ```
    didInsertElement() {
      this.$().on('click', this.handleClick);
    }
    ```
  + API: Native DOM

mariechatfield

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

Component just needs a hyphen somewhere, but that counts if directory has a hyphen. (This is Ember 1.13)

{{some-directory/component}}

mariechatfield

import Ember from 'ember';
import links from '../config/links';

export default Ember.Component.extend({
  links
});

mariechatfield

import Ember from 'ember';

export default Ember.Controller.extend({
  logs: [],
  
  actions: {
    log(line) {
      this.get('logs').pushObject(line);
    },
    

mariechatfield

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.