Skip to content

Instantly share code, notes, and snippets.

View one-page-resume_after.md

Marie Chatfield Rivas

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

EXPERIENCE

Pingboard

Austin, TX

@mariechatfield
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
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
const PIXELS_PER_MINUTE = 1;
function timeToPixels(minutes) {
const leftOffset = START_MINUTE * PIXELS_PER_MINUTE;
return (minutes * PIXELS_PER_MINUTE) - leftOffset;
}
View components.my-component.js
import Ember from 'ember';
export default Ember.Component.extend({
});
@mariechatfield
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
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)
{{some-directory/component}}
View components.passed-directly.js
import Ember from 'ember';
import links from '../config/links';
export default Ember.Component.extend({
links
});
@mariechatfield
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) {
this.get('logs').pushObject(line);
},
@mariechatfield
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.