From 90006e84913c5366f839c2b5b673fec76a6d90b7 Mon Sep 17 00:00:00 2001 From: "neilthawani@gmail.com" Date: Sun, 7 Aug 2016 15:31:52 -0500 Subject: [PATCH 1/6] Improved the Ember Fundamentals lesson with more details and an up-to-date pair programming app --- .../ember_fundamentals.markdown | 171 +++++++++++++----- 1 file changed, 125 insertions(+), 46 deletions(-) diff --git a/ruby_04-apis_and_scalability/ember_fundamentals.markdown b/ruby_04-apis_and_scalability/ember_fundamentals.markdown index db408b1d..b0c341cc 100644 --- a/ruby_04-apis_and_scalability/ember_fundamentals.markdown +++ b/ruby_04-apis_and_scalability/ember_fundamentals.markdown @@ -2,67 +2,129 @@ title: Ember Fundamentals length: 120 tags: javascript, ember -status: draft --- -## Learning Goals +## Why Ember? -* Understand how Ember's object model works -* Create two-way data bindings -* Implement computed properties on the controller level +* What Ember actually is and does +* Its history and lineage -## Structure +### What is Ember? -* 5 - Warm Up -* 15 - Lecture: Introduction to Ember -* 25 - Lecture: The Ember Object Model -* 5 - Break -* 10 - Code Along -* 30 - Pair Practice -* 25 - Recap and Refactor -* 5 - Wrap Up +* An open-source JS web framework +* Create SPAs with a common language +* Like Ruby, it's clean code and separation of concerns with a highly opinionated structure - Convention over Configuration, DRY -## Resources +### History +* 2007: Development began on Sproutcore 1.0, a widget library created by Yehuda Katz +* May 2011: Sproutcore 2.0 emerged as an application library for the new web +* December 2011 - Sproutcore 2.0 becomes Ember to reduce confusion between the Sproutcore 1.0 widget library and Ember -* [Good Tipper][goodtipper] +### Current Ecosystem +* Founders: Yehuda Katz and Tom Dale (Tomhuda Katzdale) +* Ember App Kit to Ember CLI +* Stability without stagnation - an LTS release twice a year. +* This is the idea that backward compatibility is important and can be maintained while still innovating and evolving the framework. +* Promises, web components, ES6 support with Babel +* Future web standards in mind +* Katz is a member on TC39, which is the committee responsible for future versions of the Javascript language. -[goodtipper]: https://github.com/turingschool-examples/good-tipper +### Who uses Ember? -## Warm Up +| Twitch | Urbanspoon | Infegy | TED +| Zenefits | Netflix | Heroku | Microsoft +| LinkedIn | Esri | Kickstarter | [More...](http://emberjs.com/ember-users/) | + +## Learning Goals + +* Understand how Ember's object model works +* Create two-way data bindings +* Implement computed properties on the controller level +* Invoke components and send actions back to the controller +* What we'll do: Create a bare Ember application, using the build pipeline but without most of the addons that the ecosystem has except Bootstrap -Make sure you have all of the following installed: +## Prepare & Warm Up +### Make sure you have all of the following installed: * [Node.js](http://nodejs.org) -* [ember-cli](http://www.ember-cli.com/) (You made need to use `sudo` depending on how your environment is configured.) +* [ember-cli](http://www.ember-cli.com/) (You may need to use `sudo` depending on how your environment is configured.) * The [Ember Inspector](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi) -Also: Clone a copy of [this repository][goodtipper]. We'll be using it during the Code-Along and Pair Practice segments of the lesson. - ## Lecture -We'll cover the following topics: - -* What Ember actually is and does -* It's history and lineage -* The technology that makes up Ember (Handlebars, Ember Metal, RSVP) -* The tooling around Ember (the Ember Inspector, ember-cli, Ember Data) -* The Ember object model - * Classes and instances - * Initializing an object (and calling `this._super()`) - * Computer properties - * Observers - * Working with arrays - * Bindings - -## Workshop - -### Code Along - -We're going to implement the basic functionality of [Good Tipper][goodtipper]. Follow along! - -### Pair Practice - -Can you add any of the following to your application? +### Basic Concepts: +* Routes - application state is stored in the URL +* Models - routes have models, containing the data for the app. Ember Data is a common library used for handling serialization of JSON objects +* Templates - build the app's HTML using HTMLBars (Handlebars syntax and web component rendering) +* Components - custom HTML tags with bound attributes/class names/properties - send data down into components, actions up to the controller/router from components +* Services - singleton objects to hold things like user session data +* *Plus*: Dependency injection, two-way data binding, computed properties, automagically updating templates. +* DRY in code Convention over Configuration for build tools: +Broccoli, folder structure, ES6 modules, ES6 support with Babel, testing framework (QUnit is default), npm/bower dependencies, asset management in ember-cli-build.js. + +### [Ember Object Model](https://guides.emberjs.com/v2.5.0/object-model/) +* Objects in Ember +* Classes and Instances +* Reopening Classes and Instances +* Computed Properties +* Observers +* Bindings +* Enumerables + +### Rendering engine +* [Glimmer](https://github.com/emberjs/ember.js/pull/10501)- creates a virtual tree of rendered areas and diffs them like React +* [Lifecycle Hooks](https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/) for components - ```didInsertElement```, ```willInsertElement```, etc. + +### Ember Data +* Like an ORM with a RESTful JSON API so it can interface with a multitude of languages (PHP, Node.js, Python, Go, .NET, Java) + +### Ember Inspector +* Extension available for Firefox and Chrome +* See which templates are being rendered, properties of an Ember Object with UI that computes bindings/computed properties +* See the records for each model if you're using Ember Data +* Another tool to use in addition to console.logs/breakpoints + +### Release cycle +* Ember RFCs are submitted to Github and reviewed by the community. +* Approximately every six weeks, the next Ember version and its beta are released + +### Semantic Versioning +* Breaking changes introduced at major version numbers +* New features, deprecations added at point releases +* Tooling to streamline this process is under development + +## Code Along + +We're going to implement the basic functionality of [Great Tipper][greattipper]. Follow along! + +```shell +> npm install ember-cli -g +> ember new project-name +> ember s +``` + +Some Ember CLI conventions will remind you of Ruby on Rails. +Let's open the IDE and go over the structure of the application. + +* Everything we will write is in ```app```. +* ```bower_components``` and ```node_modules``` contain our bower/npm packages (e.g., ember-cli-mirage for stubbing fixtures for tests, Liquid Fire for animations, external projects like shared code between repos)) +* ```config``` contains environment.js, for dev/test/prod setup and some addon management. +* ```dist``` and ```tmp``` contain minified files. +* You can put assets in ```public``` and ```vendor``` and tests in ```tests```. + +We're going to learn how to do the following things in our new application: +* Create an application folder in app/ with route, controller, template. +* We can invoke components and decorate them with custom HTML/attributes using HTMLBars. +* Create an array in the controller and run through it in an ```#each``` loop in the template. +* Create a component with ```file-name-hyphenated``` using generators. Touch upon pods, routable components, and data down, actions up. +* Create a form with a decorated input tag helper in the template. Create a button with an ```{{action}}```. +* In the ```action```, add an object to the array using ```.get(object)``` and ```array.pushObject(object)```. +* Data will usually come from an AJAX call. ```model()``` in the ```route.js``` file returns a ```model``` object to its controller. I would rather do ```this.controller.set('variable', data)``` for explicitness. +* We can stub a JSON file in ```public/``` and issue an AJAX call. Set the variable in the controller, pass it into a component. We can send an action from the component to the controller using ```sendAction```. + +## Pair Practice + +### Can you add any of the following to your application? * A function that observes the tip price and displays a message when someone is being a cheapskate? * Presets calculations for 15%, 18%, and 20%. When the user clicks a button, the tip percentage is automatically set to that amount. @@ -71,4 +133,21 @@ Can you add any of the following to your application? ## Wrap Up -What are some of the similarities between Ember's object models and Ruby's? Is there anything you like better? Is there anything you wish Ember stole from Ruby (and/or Rails)? +### Questions? +* What do you like about Ember? Dislike? +* What are some of the similarities between Ember's object models and Ruby's? +* Is there anything you wish Ember stole from Ruby (and/or Rails)? + +## Resources + +* [Core team meeting minutes](https://github.com/emberjs/core-notes) +* [EmberJS subreddit](https://www.reddit.com/r/emberjs) +* [Ember RFCs](https://github.com/emberjs/rfcs) +* [Major changes for Ember go through the RFC process) +* [Ember Weekly Newsletter](http://emberweekly.com/) +* [Monthly Online Global Ember Meetup](https://www.bigmarker.com/communities/global-ember-meetup/about) +* [Ember Screencasts](https://www.emberscreencasts.com/) +* [Ember Sherpa](http://www.embersherpa.com/) +* [Great Tipper][greattipper] + +[greattipper]: https://github.com/neilthawani/great-tipper \ No newline at end of file From 0349a7a4c52816c2fe755d52256ba5122db77d8f Mon Sep 17 00:00:00 2001 From: "neilthawani@gmail.com" Date: Sun, 7 Aug 2016 16:37:05 -0500 Subject: [PATCH 2/6] Typo fixes and style improvements --- .../ember_fundamentals.markdown | 60 +++++++++---------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/ruby_04-apis_and_scalability/ember_fundamentals.markdown b/ruby_04-apis_and_scalability/ember_fundamentals.markdown index b0c341cc..d770c107 100644 --- a/ruby_04-apis_and_scalability/ember_fundamentals.markdown +++ b/ruby_04-apis_and_scalability/ember_fundamentals.markdown @@ -22,25 +22,23 @@ tags: javascript, ember ### Current Ecosystem * Founders: Yehuda Katz and Tom Dale (Tomhuda Katzdale) -* Ember App Kit to Ember CLI +* Migrated from Ember App Kit (1.0) to Ember CLI (2.0) * Stability without stagnation - an LTS release twice a year. -* This is the idea that backward compatibility is important and can be maintained while still innovating and evolving the framework. + - This is the idea that backward compatibility is important and can be maintained while still innovating and evolving the framework. * Promises, web components, ES6 support with Babel * Future web standards in mind -* Katz is a member on TC39, which is the committee responsible for future versions of the Javascript language. + - Katz is a member on TC39, which is the committee responsible for future versions of the Javascript language. ### Who uses Ember? -| Twitch | Urbanspoon | Infegy | TED -| Zenefits | Netflix | Heroku | Microsoft -| LinkedIn | Esri | Kickstarter | [More...](http://emberjs.com/ember-users/) | +| Twitch | Urbanspoon | Infegy | TED | Zenefits | Netflix | Heroku | Microsoft | LinkedIn | Esri | Kickstarter | [More...](http://emberjs.com/ember-users/) | ## Learning Goals * Understand how Ember's object model works * Create two-way data bindings * Implement computed properties on the controller level -* Invoke components and send actions back to the controller +* Invoke components and send actions back to the controller from them * What we'll do: Create a bare Ember application, using the build pipeline but without most of the addons that the ecosystem has except Bootstrap ## Prepare & Warm Up @@ -52,7 +50,7 @@ tags: javascript, ember ## Lecture -### Basic Concepts: +### Basic Concepts (in order of data flow) * Routes - application state is stored in the URL * Models - routes have models, containing the data for the app. Ember Data is a common library used for handling serialization of JSON objects * Templates - build the app's HTML using HTMLBars (Handlebars syntax and web component rendering) @@ -63,26 +61,28 @@ tags: javascript, ember Broccoli, folder structure, ES6 modules, ES6 support with Babel, testing framework (QUnit is default), npm/bower dependencies, asset management in ember-cli-build.js. ### [Ember Object Model](https://guides.emberjs.com/v2.5.0/object-model/) -* Objects in Ember +* Ember Objects (get/set, composition with mixins/inheritance) * Classes and Instances * Reopening Classes and Instances * Computed Properties * Observers -* Bindings +* Bindings (two-way and `mut`) * Enumerables ### Rendering engine -* [Glimmer](https://github.com/emberjs/ember.js/pull/10501)- creates a virtual tree of rendered areas and diffs them like React -* [Lifecycle Hooks](https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/) for components - ```didInsertElement```, ```willInsertElement```, etc. +* [Glimmer](https://github.com/emberjs/ember.js/pull/10501) - creates a virtual tree of rendered areas and diffs them like React +* [Lifecycle Hooks](https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/) for components - `didInsertElement`, `willInsertElement`, etc. ### Ember Data -* Like an ORM with a RESTful JSON API so it can interface with a multitude of languages (PHP, Node.js, Python, Go, .NET, Java) +* Like an ORM with a RESTful JSON API +* Can interface with a multitude of languages (PHP, Node.js, Python, Go, .NET, Java) ### Ember Inspector * Extension available for Firefox and Chrome -* See which templates are being rendered, properties of an Ember Object with UI that computes bindings/computed properties +* See which templates are being rendered, properties of an Ember Object +* UI that computes bindings/computed properties * See the records for each model if you're using Ember Data -* Another tool to use in addition to console.logs/breakpoints +* Another tool to use in addition to `console.log`s/breakpoints ### Release cycle * Ember RFCs are submitted to Github and reviewed by the community. @@ -97,7 +97,7 @@ Broccoli, folder structure, ES6 modules, ES6 support with Babel, testing framewo We're going to implement the basic functionality of [Great Tipper][greattipper]. Follow along! -```shell +```bash > npm install ember-cli -g > ember new project-name > ember s @@ -106,27 +106,27 @@ We're going to implement the basic functionality of [Great Tipper][greattipper]. Some Ember CLI conventions will remind you of Ruby on Rails. Let's open the IDE and go over the structure of the application. -* Everything we will write is in ```app```. -* ```bower_components``` and ```node_modules``` contain our bower/npm packages (e.g., ember-cli-mirage for stubbing fixtures for tests, Liquid Fire for animations, external projects like shared code between repos)) -* ```config``` contains environment.js, for dev/test/prod setup and some addon management. -* ```dist``` and ```tmp``` contain minified files. -* You can put assets in ```public``` and ```vendor``` and tests in ```tests```. +* Everything we will write is in `app`. +* `bower_components` and `node_modules` contain our bower/npm packages (e.g., ember-cli-mirage for stubbing fixtures for tests, Liquid Fire for animations, external projects like shared code between repos). +* `config` contains `environment.js` for dev/test/prod setup and some addon management. +* `dist` and `tmp` contain minified files. +* You can put assets in `public` and `vendor` and tests in `tests`. -We're going to learn how to do the following things in our new application: -* Create an application folder in app/ with route, controller, template. +### We're going to learn how to do the following things in our new application: +* Create an `application` folder in `app/` with route, controller, template. * We can invoke components and decorate them with custom HTML/attributes using HTMLBars. -* Create an array in the controller and run through it in an ```#each``` loop in the template. -* Create a component with ```file-name-hyphenated``` using generators. Touch upon pods, routable components, and data down, actions up. -* Create a form with a decorated input tag helper in the template. Create a button with an ```{{action}}```. -* In the ```action```, add an object to the array using ```.get(object)``` and ```array.pushObject(object)```. -* Data will usually come from an AJAX call. ```model()``` in the ```route.js``` file returns a ```model``` object to its controller. I would rather do ```this.controller.set('variable', data)``` for explicitness. -* We can stub a JSON file in ```public/``` and issue an AJAX call. Set the variable in the controller, pass it into a component. We can send an action from the component to the controller using ```sendAction```. +* Create an array in the controller and run through it in an `#each` loop in the template. +* Create a component with `file-name-hyphenated` using generators. Touch upon pods, routable components, and data down, actions up. +* Create a form with a decorated `input` tag helper in the template. Create a button with an `{{action}}`. +* In the `action`, add an object to the array using `.get(object)` and `array.pushObject(object)`. +* Data will usually come from an AJAX call. `model()` in the `route.js` file returns a `model` object to its controller. I would rather do `this.controller.set('variable', data)` for explicitness. +* We can stub a JSON file in `public/` and issue an AJAX call. Set the variable in the controller, pass it into a component. We can send an action from the component to the controller using `sendAction`. ## Pair Practice ### Can you add any of the following to your application? -* A function that observes the tip price and displays a message when someone is being a cheapskate? +* A function that observes the tip price and displays a message when someone is [being a cheapskate](http://webapps.dol.gov/elaws/faq/esa/flsa/002.htm)? * Presets calculations for 15%, 18%, and 20%. When the user clicks a button, the tip percentage is automatically set to that amount. * Automatic calculations for 15%, 18%, and 20%. When the user enters an amount for the cost of the meal, they should automatically see these three values. * **Challenge**: The user wants to be able to dial in an amount and a tip and save it to an array and see all of their recent meals in a table (bonus points if you store the data using `localStorage`). From 0a4aa4a35849d4defd031f286bdb6d9c30506acc Mon Sep 17 00:00:00 2001 From: "neilthawani@gmail.com" Date: Sun, 7 Aug 2016 16:37:43 -0500 Subject: [PATCH 3/6] Typo fix --- ruby_04-apis_and_scalability/ember_fundamentals.markdown | 1 - 1 file changed, 1 deletion(-) diff --git a/ruby_04-apis_and_scalability/ember_fundamentals.markdown b/ruby_04-apis_and_scalability/ember_fundamentals.markdown index d770c107..cbbdfc52 100644 --- a/ruby_04-apis_and_scalability/ember_fundamentals.markdown +++ b/ruby_04-apis_and_scalability/ember_fundamentals.markdown @@ -143,7 +143,6 @@ Let's open the IDE and go over the structure of the application. * [Core team meeting minutes](https://github.com/emberjs/core-notes) * [EmberJS subreddit](https://www.reddit.com/r/emberjs) * [Ember RFCs](https://github.com/emberjs/rfcs) -* [Major changes for Ember go through the RFC process) * [Ember Weekly Newsletter](http://emberweekly.com/) * [Monthly Online Global Ember Meetup](https://www.bigmarker.com/communities/global-ember-meetup/about) * [Ember Screencasts](https://www.emberscreencasts.com/) From a98da9f94530df25454935703683b717871179c0 Mon Sep 17 00:00:00 2001 From: "neilthawani@gmail.com" Date: Mon, 8 Aug 2016 08:40:19 -0500 Subject: [PATCH 4/6] Style changes, typo fixes --- .../ember_fundamentals.markdown | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/ruby_04-apis_and_scalability/ember_fundamentals.markdown b/ruby_04-apis_and_scalability/ember_fundamentals.markdown index cbbdfc52..8d2ff66c 100644 --- a/ruby_04-apis_and_scalability/ember_fundamentals.markdown +++ b/ruby_04-apis_and_scalability/ember_fundamentals.markdown @@ -11,19 +11,19 @@ tags: javascript, ember ### What is Ember? -* An open-source JS web framework -* Create SPAs with a common language -* Like Ruby, it's clean code and separation of concerns with a highly opinionated structure - Convention over Configuration, DRY +* An open-source JavaScript web framework +* Create single-page apps (SPAs) with a common language +* Like Ruby, it's adheres to the principles of clean code and separation of concerns with a highly opinionated structure - Convention over Configuration, DRY ### History * 2007: Development began on Sproutcore 1.0, a widget library created by Yehuda Katz -* May 2011: Sproutcore 2.0 emerged as an application library for the new web -* December 2011 - Sproutcore 2.0 becomes Ember to reduce confusion between the Sproutcore 1.0 widget library and Ember +* May 2011: Sproutcore 2.0 emerged as an application library +* December 2011 - Sproutcore 2.0 renamed to Ember to reduce confusion between the Sproutcore 1.0 widget library and Sproutcore 2.0 application library ### Current Ecosystem * Founders: Yehuda Katz and Tom Dale (Tomhuda Katzdale) -* Migrated from Ember App Kit (1.0) to Ember CLI (2.0) -* Stability without stagnation - an LTS release twice a year. +* Migrated from Ember App Kit (1.0) to Ember CLI (2.0) in 2015 +* Stability without stagnation - an long-term stability (LTS) release twice a year - This is the idea that backward compatibility is important and can be maintained while still innovating and evolving the framework. * Promises, web components, ES6 support with Babel * Future web standards in mind @@ -44,8 +44,8 @@ tags: javascript, ember ## Prepare & Warm Up ### Make sure you have all of the following installed: -* [Node.js](http://nodejs.org) -* [ember-cli](http://www.ember-cli.com/) (You may need to use `sudo` depending on how your environment is configured.) +* [Node.js](https://nodejs.org) +* [ember-cli](https://www.ember-cli.com/) (You may need to use `sudo` depending on how your environment is configured.) * The [Ember Inspector](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi) ## Lecture @@ -56,9 +56,13 @@ tags: javascript, ember * Templates - build the app's HTML using HTMLBars (Handlebars syntax and web component rendering) * Components - custom HTML tags with bound attributes/class names/properties - send data down into components, actions up to the controller/router from components * Services - singleton objects to hold things like user session data -* *Plus*: Dependency injection, two-way data binding, computed properties, automagically updating templates. +* *Plus*: Dependency injection, two-way data binding, computed properties, automagically updating templates * DRY in code Convention over Configuration for build tools: -Broccoli, folder structure, ES6 modules, ES6 support with Babel, testing framework (QUnit is default), npm/bower dependencies, asset management in ember-cli-build.js. +Broccoli, folder structure, ES6 modules, ES6 support with Babel, testing framework (QUnit is default), npm/bower dependencies, asset management in `ember-cli-build.js` + +### Ember Data +* Like an ORM with a RESTful JSON API +* Can interface with a multitude of languages (PHP, Node.js, Python, Go, .NET, Java) ### [Ember Object Model](https://guides.emberjs.com/v2.5.0/object-model/) * Ember Objects (get/set, composition with mixins/inheritance) @@ -73,10 +77,6 @@ Broccoli, folder structure, ES6 modules, ES6 support with Babel, testing framewo * [Glimmer](https://github.com/emberjs/ember.js/pull/10501) - creates a virtual tree of rendered areas and diffs them like React * [Lifecycle Hooks](https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/) for components - `didInsertElement`, `willInsertElement`, etc. -### Ember Data -* Like an ORM with a RESTful JSON API -* Can interface with a multitude of languages (PHP, Node.js, Python, Go, .NET, Java) - ### Ember Inspector * Extension available for Firefox and Chrome * See which templates are being rendered, properties of an Ember Object @@ -113,22 +113,22 @@ Let's open the IDE and go over the structure of the application. * You can put assets in `public` and `vendor` and tests in `tests`. ### We're going to learn how to do the following things in our new application: -* Create an `application` folder in `app/` with route, controller, template. -* We can invoke components and decorate them with custom HTML/attributes using HTMLBars. +* Create an `application` folder in `app/` with `route.js`, `controller.js`, `template.hbs`. * Create an array in the controller and run through it in an `#each` loop in the template. -* Create a component with `file-name-hyphenated` using generators. Touch upon pods, routable components, and data down, actions up. +* Create a component with `file-name-hyphenated` using generators (`ember g `). We can invoke components and decorate them with custom HTML/attributes using HTMLBars. + - Touch upon pods, routable components, and data down, actions up. * Create a form with a decorated `input` tag helper in the template. Create a button with an `{{action}}`. * In the `action`, add an object to the array using `.get(object)` and `array.pushObject(object)`. * Data will usually come from an AJAX call. `model()` in the `route.js` file returns a `model` object to its controller. I would rather do `this.controller.set('variable', data)` for explicitness. -* We can stub a JSON file in `public/` and issue an AJAX call. Set the variable in the controller, pass it into a component. We can send an action from the component to the controller using `sendAction`. +* We can stub a JSON file in `public/` and issue an AJAX call. Set the variable in the controller, pass it into a component. Send an action from the component to the controller using `sendAction`. ## Pair Practice ### Can you add any of the following to your application? * A function that observes the tip price and displays a message when someone is [being a cheapskate](http://webapps.dol.gov/elaws/faq/esa/flsa/002.htm)? -* Presets calculations for 15%, 18%, and 20%. When the user clicks a button, the tip percentage is automatically set to that amount. -* Automatic calculations for 15%, 18%, and 20%. When the user enters an amount for the cost of the meal, they should automatically see these three values. +* Include preset calculations for 15%, 18%, and 20%. When the user clicks a button, the tip percentage is automatically set to that amount. +* When the user enters an amount for the cost of the meal, they should automatically see these three preset tip values. * **Challenge**: The user wants to be able to dial in an amount and a tip and save it to an array and see all of their recent meals in a table (bonus points if you store the data using `localStorage`). ## Wrap Up From 1a49627082d2af742ecd031d7a4a214c5b5d6624 Mon Sep 17 00:00:00 2001 From: neilthawani Date: Mon, 8 Aug 2016 11:05:48 -0500 Subject: [PATCH 5/6] Removed hyphen --- ruby_04-apis_and_scalability/ember_fundamentals.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ruby_04-apis_and_scalability/ember_fundamentals.markdown b/ruby_04-apis_and_scalability/ember_fundamentals.markdown index 8d2ff66c..cf0982df 100644 --- a/ruby_04-apis_and_scalability/ember_fundamentals.markdown +++ b/ruby_04-apis_and_scalability/ember_fundamentals.markdown @@ -18,7 +18,7 @@ tags: javascript, ember ### History * 2007: Development began on Sproutcore 1.0, a widget library created by Yehuda Katz * May 2011: Sproutcore 2.0 emerged as an application library -* December 2011 - Sproutcore 2.0 renamed to Ember to reduce confusion between the Sproutcore 1.0 widget library and Sproutcore 2.0 application library +* December 2011: Sproutcore 2.0 renamed to Ember to reduce confusion between the Sproutcore 1.0 widget library and Sproutcore 2.0 application library ### Current Ecosystem * Founders: Yehuda Katz and Tom Dale (Tomhuda Katzdale) @@ -149,4 +149,4 @@ Let's open the IDE and go over the structure of the application. * [Ember Sherpa](http://www.embersherpa.com/) * [Great Tipper][greattipper] -[greattipper]: https://github.com/neilthawani/great-tipper \ No newline at end of file +[greattipper]: https://github.com/neilthawani/great-tipper From 4bdb5fcaeef7684d136bf9e087043e1e72336a40 Mon Sep 17 00:00:00 2001 From: Neil Thawani Date: Tue, 9 Aug 2016 15:03:26 -0500 Subject: [PATCH 6/6] Typo fix --- ruby_04-apis_and_scalability/ember_fundamentals.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ruby_04-apis_and_scalability/ember_fundamentals.markdown b/ruby_04-apis_and_scalability/ember_fundamentals.markdown index cf0982df..1242072c 100644 --- a/ruby_04-apis_and_scalability/ember_fundamentals.markdown +++ b/ruby_04-apis_and_scalability/ember_fundamentals.markdown @@ -13,7 +13,7 @@ tags: javascript, ember * An open-source JavaScript web framework * Create single-page apps (SPAs) with a common language -* Like Ruby, it's adheres to the principles of clean code and separation of concerns with a highly opinionated structure - Convention over Configuration, DRY +* Like Ruby, it adheres to the principles of clean code and separation of concerns with a highly opinionated structure - Convention over Configuration, DRY ### History * 2007: Development began on Sproutcore 1.0, a widget library created by Yehuda Katz