nerdyworm

Ack Sed Replace With No Backup File

For some reason when ever I google this I can never find exactly what I am looking for. Also on OS X sed needs an extra argument to avoid the backup file.

1
ack -l nedle | xargs sed -i '' -e "s/nedle/needle/g"

So simple, yet I can never seem to find it quickly when I forget it.

P.S. Happy Birthday Me!

Favorite Vocal Trance Songs

Because I am incredibly lazy this week I am going to toss together a list of some of my favorite vocal trance tunes.

This took much longer than I thought it was going to take. Digging into my collection lead me on a wild goose chase for sounds that have escaped me for years. It was an entire morning of, “Damn whats the name of that tune again.”

This certainly is not the exclusive top picks. It is just the list of tracks that led me down a certain memory path. I hope you enjoy the music.

Building an App With Ember.js and Go - Part 3

Last time we added the ability to create new kittens to our app. Now let’s add the ability to update and delete them.

Client Side Update

public/js/app.js
1
2
3
4
App.Router.map(function() {
  this.route('create');
  this.route('edit', {path: '/edit/:kitten_id'});
});

In order to edit a kitten we need a page with a form.

We add a route, name it edit, and define the path. Any path that contains a : will be treated as a dynamic segment. This segment will be replaced by the kitten’s id, i.e. /edit/1.

public/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/x-handlebars" data-template-name="index">
<ul class="thumbnails">
{{#each controller}}
  <li class="span3">
    <div class="thumbnail">
      <img {{bindAttr src="picture"}}/>
      <div class="caption">
        <h3>{{name}}</h3>
        {{#linkTo edit this}}Edit{{/linkTo}}
      </div>
    </div>
  </li>
{{/each}}
</ul>
</script>

We need a way to navigate to the page. In the index template we add a linkTo passing in the name of our route edit and the current kitten. Inside an each loop the current object can be referred to as this or ..

public/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/x-handlebars" data-template-name="_form">
<form {{action save on="submit"}} class="form-inline">
  {{input type="text" value=name}}
  <button type="submit" class="btn btn-primary">Save</button>
</form>
</script>

<script type="text/x-handlebars" data-template-name="create">
<h1>Create kitten</h1>
{{partial 'form'}}
</script>

<script type="text/x-handlebars" data-template-name="edit">
<h1>Edit kitten</h1>
{{partial 'form'}}
</script>

Our edit view requires the same form as the create template so we move the form into a partial. Then we can use Ember’s partial helper to render the form. The partial helper will use the containing template’s context. This means that it is equivalent to having the mark up in the containing template.

public/js/app.js
1
2
3
4
5
6
7
8
App.EditController = Ember.ObjectController.extend({
  save: function() {
    var kitten = this.get('model');
    kitten.save().then(function() {
      this.transitionToRoute('index');
    }.bind(this));
  }
});

Our edit page needs to handle the save action. We use an object controller here because our kitten model will be assigned to the controller’s model property. When the form is submitted our save function will be called. The kitten is available as model property and we can call the save function on it.

Server Side Update

server.go
1
2
3
4
5
func main() {
    // ...
    r.HandleFunc("/api/kittens/{id}", UpdateKittenHandler).Methods("PUT")
    // ...
}

Once again the wonderful Gorilla mux package allows us to specify the end point and the HTTP verbs that we want to use.

Ember data expects to be able to issue a PUT request to the resources end point, i.e. /kittens/1.

server.go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
func UpdateKittenHandler(w http.ResponseWriter, r *http.Request) {
  // Grab the kitten's id from the incoming url
  vars := mux.Vars(r)
  id, err := strconv.Atoi(vars["id"])
  if err != nil {
    panic(err)
  }

  // Decode the incoming kitten json
  var kittenJSON KittenJSON
  err = json.NewDecoder(r.Body).Decode(&kittenJSON)
  if err != nil {
    panic(err)
  }

  // Find the kitten in our kittens slice and upate it's name
  for index, _ := range kittens {
    if kittens[index].Id == id {
      kittens[index].Name = kittenJSON.Kitten.Name
      break
    }
  }

  // Respond with a 204 indicating success, but no content
  w.WriteHeader(http.StatusNoContent)
}

First we need to pull the kitten’s id out of the incoming URL. We use gorilla’s mux.Vars function and it returns a string based map for us. Then we have to convert the string to an int.

Next we need to grab the payload from the incoming request. The update request is the same as the create request so there is no need to create a new data structure.

Next we want to update the kitten in our kittens slice. We loop over the slice and see if our id’s match. If so then we simply update the name of the kitten with the incoming JSON data.

The response of an update call should be a 200 with a JSON payload or a 204 without a payload.

Take it for a spin, you should be able to update the kitten’s name and it should persist with page reloads.

Delete the poor little guys

public/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/x-handlebars" data-template-name="index">
<ul class="thumbnails">
{{#each controller}}
  <li class="span3">
    <div class="thumbnail">
      <img {{bindAttr src="picture"}}/>
      <div class="caption">
        <h3>{{name}}</h3>
        {{#linkTo edit this}}Edit{{/linkTo}}
        <button {{action deleteKitten this}}>Delete</button>
      </div>
    </div>
  </li>
{{/each}}
</ul>
</script>

Since there is no page to link to we must use an action. We name the action deleteKitten and pass in the kitten model. This will make the kitten available to the function that handles the event.

public/js/app.js
1
2
3
4
5
6
7
8
9
10
11
12
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return App.Kitten.find();
  },

  events: {
    deleteKitten: function(kitten) {
      kitten.deleteRecord();
      kitten.save();
    }
  }
});

In Ember the action will bubble up from the controller to route. Meaning that if your controller does not implement that function then it will check the current route. In this case our route implements the function and will be called when the user clicks the delete button.

Ember data requires us to call deleteRecord then commit that change to the server by calling save. You can also call commit on the application’s store. save is just a new convenience method.

Server Side Delete

server.go
1
2
3
4
5
func main() {
    // ...
    r.HandleFunc("/api/kittens/{id}", DeleteKittenHandler).Methods("DELETE")
    // ...
}

The delete route is the same as the update route, except the HTTP verb should be DELETE.

server.go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
func DeleteKittenHandler(w http.ResponseWriter, r *http.Request) {
  // Grab the kitten's id from the incoming url
  vars := mux.Vars(r)
  id, err := strconv.Atoi(vars["id"])
  if err != nil {
    panic(err)
  }

  // Find the index of the kitten
  kittenIndex := -1
  for index, _ := range kittens {
    if kittens[index].Id == id {
      kittenIndex = index
      break
    }
  }

  // If we actually found a kitten remove it from the slice
  if kittenIndex != -1 {
    kittens = append(kittens[:kittenIndex], kittens[kittenIndex+1:]...)
  }

  // Respond with a 204 indicating success, but no content
  w.WriteHeader(http.StatusNoContent)
}

Like the update function we have to grab the kittens Id from the incoming URL and convert it to an int.

We loop over the kittens and find the index of the kitten but it’s Id. Once we have that we can break out of the loop since all the ids are unique.

If we actually found a kittenIndex then we can remove the kitten from the slice.

To accomplish this we slice the current kittens up to the deleted kitten’s index. Since the range operator is zero based we have the index of just before the kitten. Then we skip one past the deleted kitten and append the rest of the slice. This gives us all the kittens minus the deleted kitten.

To inform the client that we successfully deleted the kitten we return a 204.

Concludes Part 3

This concludes part 3. We have successfully implemented all the CRUD operations for our kittens app.

Ember really allows us to write a minimal amount of code for our clients. It almost feels like we are cheating to get this kind of functionality.

Go on the sever side is a pleasure to work with. It feels more verbose than some of the scripting languages I am used to, but it reads well and is extremely clear what is happening. The lack of magic is actually refreshing.

Building an App With Ember.js and Go - Part 2

We left off in part 1 with the ability to list some kittens in the application. Now we are going to add the ability to create new kittens.

Client

First we are going to need a new page to create our kitten from. Let’s add a create route and some navigation to the existing app.

public/js/app.js
1
2
3
App.Router.map(function() {
  this.route('create');
});

This maps a new url create to our app. When the user visits that url Ember.js will automatically render the create template in the application template’s outlet.

public/index.html
1
2
3
4
5
6
7
8
9
<script type="text/x-handlebars">
<div class="container">
  <ul class="nav nav-tabs">
    <li>{{#linkTo index}}Index{{/linkTo}}</li>
    <li>{{#linkTo create}}Create{{/linkTo}}</li>
  </ul>
  {{outlet}}
</div>
</script>

Here we add two links to the top of the page. Ember will wire up proper page links for us when using the linkTo helper.

public/index.html
1
2
3
4
5
6
<script type="text/x-handlebars" data-template-name="create">
<form {{action save on="submit"}} class="form-inline">
  {{input type="text" value=name}}
  <button type="submit" class="btn btn-primary">Save</button>
</form>
</script>

For our create view let’s use a simple form that when submitted it will trigger the save action in a controller.

Using the input helper we create a text field and bind it to the controller’s name property.

public/js/app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
App.CreateController = Ember.Controller.extend({
  name: null,
  save: function() {
    var kitten = App.Kitten.createRecord({
      name: this.get('name')
    });

    kitten.save().then(function() {
      this.transitionToRoute('index');
      this.set('name', '');
    }.bind(this));
  }
});

The CreateController contains the name property and a save function. The name property is bound to the text box in the create view.

The save function will be called once the user submits the form.

To create a new kitten record on the client side we use createRecord.

Ember Data’s save function returns a promise. This promise is resolved when the server responses successfully. When that happens we want to transition to our list of kittens and empty out clear out the fields input.

Server Side

server.go
1
2
3
4
5
6
7
8
9
type Kitten struct {
    Id      int    `json:"id"`
    Name    string `json:"name"`
    Picture string `json:"picture"`
}

type KittenJSON struct {
    Kitten Kitten `json:"kitten"`
}

We need to declare two new types for our server side kittens. The first Kitten is a simple struct that has our three fields: id, name, and picture.

The second structure serves as our external data structure. Ember Data expects single Kittens to be wrapped in a named json object. For example:

single kitten response
1
{ "kitten": { "id": 1, "name": "Ben" } }

Ember will also send Kittens to the server wrapped in this style request.

server.go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
func CreateKittenHandler(w http.ResponseWriter, r *http.Request) {
    // Parse the incoming kitten from the request body
    var kittenJSON KittenJSON
    err := json.NewDecoder(r.Body).Decode(&kittenJSON)
    if err != nil {
        panic(err)
    }

    // Grab the kitten and set some dummy data
    kitten := kittenJSON.Kitten
    kitten.Id = 5
    kitten.Picture = "http://placekitten.com/300/200"

    // Serialize the modified kitten to JSON
    j, err := json.Marshal(KittenJSON{Kitten: kitten})
    if err != nil {
        panic(err)
    }

    // Write the response
    w.Header().Set("Content-Type", "application/json")
    w.Write(j)
}

To create a kitten we need to define a function that will handle the route.

In order to gain access to the incoming json request from Ember Data we need to decode the request’s body. To do this we use a json.Decoder. We new up a decoder and decode the payload into an instance of KittenJSON. The decoder will populate all the data for us according to the struct’s definition.

Because we want to get this example up and running as quickly as possible I am just manually setting an Id and Picture. The Name property will be set from the incoming json.

We then need to return a response to the client so we serialize our kitten back into a KittenJSON type and write it to the response writer.

server.go
1
2
3
4
func main() {
  // ... omited rest of function
  r.HandleFunc("/api/kittens", CreateKittenHandler).Methods("POST")
}

We need to tell the server when to create a kitten. The create behavior for Ember Data is a POST to the index end point. The Gorilla Mux makes this easy by allowing us to specify the method.

All the wiring complete

All the wiring for this evolution of the app is now complete. We can click the create link, fill out the form, and show the user that we created a kitten.

In Memory Storage

Now the we can create kittens let’s rig up an in memory store to make the application feel slightly more complete.

server.go
1
2
3
4
5
6
7
8
9
10
11
12
13
var kittens []Kitten

func CreateKittenHandler(w http.ResponseWriter, r *http.Request) {
    // ...

    kitten := kittenJSON.Kitten
    kitten.Id = len(kittens) + 1
    kitten.Picture = "http://placekitten.com/300/200"

    kittens = append(kittens, kitten)

    // ...
}

We first declare a new slice of kittens. This variable will exist as long as the server is running. Not production ready but it moves our app forward.

To add a new kitten we just append it to the current list of kittens. We also calculate the id of the kitten to be the length of the slice plus one.

server.go
1
2
3
4
5
6
7
8
9
10
11
12
type KittensJSON struct {
    Kittens []Kitten `json:"kittens"`
}

func KittensHandler(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    j, err := json.Marshal(KittensJSON{Kittens: kittens})
    if err != nil {
        panic(err)
    }
    w.Write(j)
}

We can now make our index function dynamic.

Once again Ember Data expects a specific response structure. In this case it is the plural name of the model and an array. For example:

1
{ "kittens": [{"id": 1 ... }] }

Concludes part 2

We created some very simple in memory persistence on the server side. On the client side we demonstrated the typical create redirect work flow.

Next time we will handle delete and update.

Flowfeeds Presentation

I gave a talk about one of my projects to the local ember.js meetup. Honestly that was the absolutly scariest thing I have done in a long time :)

Building an App With Ember.js and Go - Part 1

Today we embark on a magical jounry of Gophers and Tomsters. In open source the projects with the cutest mascots always gain traction!

With the power of the internets cutest mascots combine we will create the most basic crud app to help you hit the ground running with Ember.js and Go.

Up and Running

The first part of any Ember project is to get the basic up and running. Since this is a super basic example we are just going to wire up a Go server to serve our static assets.

directoy layout
1
2
3
├── public
│   └── index.html
└── server.go
server.go
1
2
3
4
5
6
7
8
9
10
package main

import (
  "net/http"
)

func main() {
  http.Handle("/", http.FileServer(http.Dir("./public/")))
  http.ListenAndServe(":8080", nil)
}

We now have two files. An index.html file with hello world in it and a sever.go file that will serve statis assets out of the public directory.

To run this all you need to do is

1
go run server.go

You should be able to visit http://localhost:8080 and see hello world in your browser.

Personally I feel uneasy that we are not giving ourselves some feedback of what the program is doing so let’s add some logging.

server.go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
package main

import (
  "net/http"
  "log"
)

func main() {
  log.Println("Starting Server")
  http.Handle("/", http.FileServer(http.Dir("./public/")))

  log.Println("Listening on 8080")
  http.ListenAndServe(":8080", nil)
}

That makes me feel much better.

Setup Ember

Now that we have a basic http server we can setup our Ember environment.

I have included a script that will grab jQuery, Handlebars, and Ember for your. These are all the dependencies that you need to get the project up and running.

Relevant XKCD: Dependencies

script/js_deps.sh
1
2
3
4
5
6
7
8
9
10
#!/bin/bash

set -e

mkdir -p public/js/lib

wget -O public/js/lib/jquery.js http://code.jquery.com/jquery-2.0.0.js
wget -O public/js/lib/handlebars.js https://raw.github.com/wycats/handlebars.js/1.0.0-rc.4/dist/handlebars.js
wget -O public/js/lib/ember.js http://builds.emberjs.com.s3.amazonaws.com/ember-latest.js
wget -O public/js/lib/ember-data.js http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js

Now that we have all our dependencies let’s wire them up in the index.html file.

public/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ember.js + Go == ♥</title>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<script src="js/lib/jquery.js"></script>
<script src="js/lib/handlebars.js"></script>
<script src="js/lib/ember.js"></script>
<script src="js/lib/ember-data.js"></script>
</body>
</html>

All we needed to do is add a few script tags and a style sheet. The order of the tags is important since ember depends on handlebars and jQuery.

app.js
1
2
3
4
5
(function() {

  var App = Ember.Application.create();

})();

Now we can actually create our ember application. The canonical example name space is App, but you can use any name that you would like.

This line of code bootstraps your Ember application. It will automatically run once the page is loaded.

Don’t forget to include the new file in our index.html file after all the lib scripts.

1
<script src="js/app.js"></script>

When you view your application in the browser you should see the following output in your developer console. If you do not see this then something is broken. Make sure that all your files are loading correctly and that they are in the correct order.

1
2
3
4
5
DEBUG: -------------------------------
DEBUG: Ember.VERSION : 1.0.0-rc.3
DEBUG: Handlebars.VERSION : 1.0.0-rc.4
DEBUG: jQuery.VERSION : 2.0.0
DEBUG: -------------------------------

And last but not least we need to define our application template. This is easily accomplished by adding the following script tag to the index.html.

There are various ways of dealing with handlebars templates, but to avoid the complexities of build tools we are just going to use this method.

index.html
1
2
3
<script type="text/x-handlebars">
<h1>Hello Ember.js</h1>
</script>

When you open up the page in the browser you should see Hello Ember.js

RESTFull kittens

Let’s create our kittens endpoint.

First we are going use the super excellent Gorilla web toolkit’s mux for routing.

Install the dependency using the go get command.

1
go get github.com/gorilla/mux

The Gorilla mux provides a ton of wonderful functionality that we will take advantage of later. For now a simple GET endpoint is all we need to move this application forward.

server.go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
package main

import (
  "net/http"
  "log"
  "github.com/gorilla/mux"
)

func KittensHandler(w http.ResponseWriter, r *http.Request) {
  w.Header().Set("Content-Type", "application/json")
  w.Write([]byte(`{"kittens": [
    {"id": 1, "name": "Bobby", "picture": "http://placekitten.com/200/200"},
    {"id": 2, "name": "Wally", "picture": "http://placekitten.com/200/200"}
  ]}`))
}

func main() {
  log.Println("Starting Server")

  r := mux.NewRouter()
  r.HandleFunc("/api/kittens", KittensHandler).Methods("GET")
  http.Handle("/api/", r)

  http.Handle("/", http.FileServer(http.Dir("./public/")))

  log.Println("Listening on 8080")
  http.ListenAndServe(":8080", nil)
}

I prefer to have my api endpoint under an /api name space. This is not a requirement, but a personal preference.

Ember Data expects a very particular response. You want to wrap a collection response with the plural of the model name. So in our case the root should be kittens and the value of kittens should be an array of kitten objects.

The spec for this is currently being fleshed out here: http://jsonapi.org/

Display the Kittens

Now that we have some data from the server we can display it in our Ember app.

public/js/app.js
1
2
3
4
5
6
DS.Store.create({
  revision: 12,
  adapter: DS.RESTAdapter.create({
    namespace: 'api'
  })
});

The first thing we need to do is create a data store. We also need to tell the store’s adapter that we want to namespace ajax calls under the api namespace.

public/js/app.js
1
2
3
4
App.Kitten = DS.Model.extend({
  name: DS.attr('string'),
  picture: DS.attr('string')
});

The next thing we can do is define our Kitten model. We extend a DS.Model and define the attributes name and picture.

public/js/app.js
1
2
3
4
5
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return App.Kitten.find();
  }
});

Ember will automatically route to the index route of an application. We can alter the behavior of the index by defining an App.IndexRoute. This is where we can hook into the model function and return our kittens.

public/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/x-handlebars">
<div class="container">
  {{outlet}}
</div>
</script>

<script type="text/x-handlebars" data-template-name="index">

<ul class="thumbnails">
{{#each controller}}

  <li class="span3">
    <div class="thumbnail">
      <img {{bindAttr src="picture"}}/>
      <div class="caption">
        <h3>{{name}}</h3>
      </div>
    </div>
  </li>

{{/each}}
</ul>

</script>

We modified the application template and added a new index template.

The application template now has an outlet. This is where ember will insert the index template or any other template defined by the current route.

In the index template we use the each helper to loop over all the kittens and output them with some basic markup.

In order to display the image we need to use the bindAttr helper. This will ensure that the src attribute is bound to the models picture property.

End of part 1

It took a bit of work to get this example up and running, but things assuming you were able to follow along you should have a fully integrated ember.js app with a go back end.

In the next part we will focus on adding new pages and some editing.

Happy Embering and Gophering :)

Full Source

The full source code to this example can be found on my github account.

Sorting a Slice of Structs in Go

Sorting data in Go requires you to implement the sort.Interface. This interface requires three simple methods: Len, Less, and Swap.

1
2
// returns the number of elements in the collection.
Len() int
1
2
3
// returns whether the element with index i should sort before
// the element with index j.
Less(i, j int) bool
1
2
// swaps the elements with indexes i and j.
Swap(i, j int)`

Define the Struct and Collection

1
2
3
4
5
type Country struct {
    Name string
}

type Countries []Country

First we declare our struct. For this example we are using only a single field which is a string. We also need to define our collection type so that we can satisfy the sort.Interface.

Implement the Interface

1
2
3
4
5
6
7
8
9
10
11
func (slice Countries) Len() int {
    return len(slice)
}

func (slice Countries) Less(i, j int) bool {
    return slice[i].Name < slice[j].Name;
}

func (slice Countries) Swap(i, j int) {
    slice[i], slice[j] = slice[j], slice[i]
}

The first method Len needs to return how many elements are in our collection. The built-in len function will work beautifully for this.

The second method is where we need to figure out which element comes before. For this example we just do a basic string comparison which will give us an ascending alphabetical sort order. If we wanted to sort descending we could just flip the < operator to >.

The last method actually performs the work of shuffling elements around. Go’s multiple assignment makes it easy to swap the values without having to explicitly declare a temporary variable.

The Countries type now provides all the methods to satisfy the sort.Interface interface.

Sort All the Things

1
2
3
4
5
6
7
8
9
10
11
12
13
14
func main() {
    countries := Countries{
        {Name: "United States"},
        {Name: "Bahamas"},
        {Name: "Japan"},
    }

    sort.Sort(countries)

    fmt.Println("\nSorted")
    for i, c := range countries {
        fmt.Println(i, c.Name)
    }
}

There you have it. A simple example of sorting a slice of structs in Go.

As always: Full Source

Ember.js and Middleman

Middleman one of my favorite ways to build single page web applications these days. It is a simple static site generator that uses Sprokets. It is a really wonderful way to develop small applications.

This post is going to walk you through the process of setting up all the dependencies of an Ember.js App.

There are some builders and gems floating around these days. For the most part they fall behind Ember.js development too quickly. This ends up meaning that you spend more fixing dependencies than you do developing your app.

1. Install the middleman gem

Terminal
1
gem install middleman

2. Generate a middleman application

Terminal
1
middleman new blog

3. Add handlebars templates to the Gemfile

Gemfile
1
2
3
4
source 'https://rubygems.org'

gem "middleman", "~>3.0.13"
gem "middleman-ember", github: "nerdyworm/middleman-ember"
Terminal
1
bundle install

4. Configure the handlebars templates gem

config.rb
1
2
3
MiddlemanEmber::HandlebarsTemplate.options = {
  template_path: "app/templates"
}

This line of code tells our template compiler to strip out the template path from our file names. So any file with the path app/templates/template.hbs will be converted to template correctly.

5. JavaScript Structure

1
2
3
4
5
6
7
8
9
10
11
source/javascripts
├── app
│   └── templates
│       └── application.hbs
├── app.js
├── vendor
│   ├── ember-data-latest.js
│   ├── ember-latest.js
│   ├── handlebars.js
│   └── jquery.js
└── vendor.js

This is the project layout that I prefer to use. All application code gets tucked away in the app directory and all external libraries gets tucked away in vendor.

Also note that I build these two files separately. This is because the vendor file changes much less frequently than the app.js file. This means that the browser only has to update the vendor.js when we change a dependency, not when we change a line of application code.

6. Grab Dependencies

1
2
3
4
wget -O source/javascripts/vendor/jquery.js http://code.jquery.com/jquery-2.0.0.js
wget -O source/javascripts/vendor/handlebars.js http://builds.emberjs.com.s3.amazonaws.com/handlebars-1.0.0-rc.3.js
wget -O source/javascripts/vendor/ember-latest.js http://builds.emberjs.com.s3.amazonaws.com/ember-latest.js
wget -O source/javascripts/vendor/ember-data-latest.js http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js

These four commands will get you the latest and greatest builds of Ember.js.

I personally like to work off the master branch. Bugs are getting fixed quickly these days, so it pays to be up to date.

7. Setup app.js and vendor.js

source/javascripts/app.js
1
2
3
4
//= require_self
//= require_tree ./app/

App = Ember.Application.create();

The require comments are part of sprokets. require_self includes the current file. require_tree includes all the files alphabetically in the directory specified.

source/javascripts/vendor.js
1
2
3
4
5
//= require ./vendor/jquery
//= require ./vendor/handlebars
//= require ./vendor/ember-latest
//= require ./vendor/ember-data-latest
//= require_tree ./vendor/

The vendor code needs to be loaded in a specific order.

8. Update layout.html.erb

source/layouts/layout.erb
1
<%= javascript_include_tag  "vendor", "app" %>

We need to include our vendor.js and app.js on the web page. Middleman makes this pretty easy by providing the javascript_include_tag helper.

9. Clear out index.html.erb

Empty the contents of source/index.htm.erb

10. Handlebars template application.hbs

source/javascripts/app/templates/application.hbs
1
<h1>Hello Ember.js</h1>

You did it! Checkout your masterpiece

Terminal
1
bundle exec middleman server

If you followed all the steps then you should see Hello Ember.js when you view localhost:4567.

When Ember.js has a stable release I will gladly turn this into a more full featured middleman template.

Global Trance Grooves - 10 Year Anniversary

Every single month for the past ten years I have been looking forward to Global Trance Grooves.

For as long as I can remember I have been driving with the windows down or writing code while listening to the monthly show. It is one of my favorite rituals.

I have never been disappointed by the content on John’s show. He has honed the skill of picking the best DJs and producers to highlight and promote. It is not his raw talent that makes this show incredible, it is his tenacious desire to spread the music he loves.

When I talk about trance music, John 00 Flemming is what I am referring to. The style he promotes represents the sound that I love. Deep, dark, and hypnotic.

This April marked the 10 year anniversary of Global Trance Grooves. John celebrated by putting together an absolutely stunning line up of artists.

If you missed the live broadcast you can download all the sets on soundcloud. Also I have included the link for John’s 2010 essential mix. It is a favorite of mine.

I’m really looking forward to another ten years.

Thanks John.

Ember.js Drag and Drop Sorting With jQuery Sortable

Source Code

Drag and drop with ember.js and jQuery sortable is actually pretty easy. However there are a few tricks that I would like to share.

View and Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
App.IndexView = Ember.View.extend({
  didInsertElement: function() {
    var controller = this.get('controller');
    this.$(".sortable").sortable({
      update: function(event, ui) {
        var indexes = {};

        $(this).find('.item').each(function(index) {
          indexes[$(this).data('id')] = index;
        });

        $(this).sortable('cancel');

        controller.updateSortOrder(indexes);
      }
    });
  }
});
1
2
3
4
5
6
7
8
<!-- note, I am only using single {} because octopress eats handlebars tags -->
<ul class="sortable">
{#each item in controller}
  <li class="item" data-id="{unbound item.id}">
    <b>{item.idx}</b> {item.id}
  </li>
{/each}
</ul>

In order to bind the sortable plug-in to the DOM we use the didInsertElement function. This function is called when the view’s element is in the DOM and ready to be manipulated.

We call sortable on the list view that has the CSS class .sortable. This will bind jQuery UI’s sortable plug-in to our DOM element.

The only function we have to implement is the update function. This function is called when the sortable plug-in has finished sorting and the DOM is updated.

What we want to do in the update method is create an index of model ids with their new sort position. We can accomplish that by looping over the items in the list, grabbing the data-id and assigning it the value of the index.

Once we have created an index we need to cancel the sort. This is because we are going to update the model to reflect the new sort order.

Update Models

1
2
3
4
5
6
7
8
9
10
11
12
App.IndexController = Ember.ArrayController.extend({
  sortProperties: ['idx'],

  updateSortOrder: function(indexes) {
    this.beginPropertyChanges();
    this.forEach(function(item) {
      var index = indexes[item.get('id')];
      item.set('idx', index);
    }, this);
    this.endPropertyChanges();
  }
});

We can simply loop over the items in the array and update their idx. This will cause the list view to rerender with the correct sort order.

Fin

I hope this saves you some hair pulling and a bit of time.

You can see this in action in the playlist section at flowfeeds.com. You will need to sign up for an account to access it though, sorry.

Source Code Link

Source Code