Dave Laird kiwiupover

Intro to EmberJS

Ember Components

The component's template
Data binding in a component
Using dynamic data in the template
User interaction with the component
Sending data out of the component to the Ember app.

Intro to the Ember Router

Having spent the vast majority of my career in the front-end space, there has always been a thirst for better processes and management of resources. For those who have long histories with HTML and CSS, you remember the days of keeping folders of code snippets, our personal library of sorts, the cool code we wrote and wanted to have at the ready for our next project.

Sure there were desktop apps that tried to manage this for us, journler was my tool of choice back in those days. I have also seen some use Google Docs and other document and snippet managers, but they never really worked. And let us never forget all those really crappy websites that were supposed to be our saving grace. In the end, managing assets on the front-end has been nothing but a total fail.

Life meets Ruby, boy meets Git

When I began working with a Rails team, I was introduced to better solutions for managing libraries of reusable front-end code. Not to mention, this was my first exposure to Git and Github

	// a answer to the rover interview question http://www.techinterviewpuzzles.com/2010/09/mars-rovers-thoughtworks-puzzles.html

	describe("Rover", function() {

	function rover(startCords, movement) {
	var x = Number( startCords[0] );
	var y = Number( startCords[2] );
	var direction = startCords.charAt( startCords.length -1 );

	var steps = movement.split('');

	// ----
	// Sass (v3.3.10)
	// Compass (v1.0.0.alpha.20)
	// ----

	.vince {
	smart: 100%;
	.talented {
	youbetya: true;
	}

	/* global google */
	var GoogleMapComponent = Ember.Component.extend({
	places: [],
	width: 500,
	height: 500,

	attributeBindings: ['style'],

	style: function () {
	return 'width:'+this.width+'px; height:'+this.height+'px';

	<div class="RestHero">
	<div class="object-container-container">

	<div class="object-container" >
	<img src="http://placehold.it/960x500"/>

	<div class="overlay">
	<span class="data">
	An icon here
	123

	<div class="RestHero">
	<div class="object-container">
	<img src="http://placehold.it/960x480"/>
	<div class="flag"></div>

	<div class="overlay">
	<span class="data">
	An icon here
	123
	</span>

	<div class="DishHero">
	<div class="object-container">
	<img src="http://placehold.it/960x480"/>
	<div class="flag"></div>

	<div class="overlay">
	<span class="data">
	An icon here
	123
	</span>

	# Use this setup block to configure all options available in SimpleForm.
	inputs = %w[
	CollectionSelectInput
	DateTimeInput
	FileInput
	GroupedCollectionSelectInput
	NumericInput
	PasswordInput
	RangeInput
	StringInput