stevekinney

[ Launch: Lorenz Curve ] 9788739 by stevekinney[ Launch: Lorenz Curve ] 9767676 by stevekinney

stevekinney

Example: http://jsbin.com/hamur

stevekinney

Keybase proof

I hereby claim:

• I am stevekinney on github.
• I am stevekinney (https://keybase.io/stevekinney) on keybase.
• I have a public key whose fingerprint is 2BCA E390 D177 2ECF 8547 C7F8 A89B 7E5C 333C D92B

To claim this, I am signing this object:

stevekinney

define([], [
  { "year": 2013, "gdp": 256912 },
  { "year": 2012, "gdp": 247280 },
  { "year": 2011, "gdp": 262620 },
  { "year": 2010, "gdp": 237148 },
  { "year": 2009, "gdp": 240004 },
  { "year": 2008, "gdp": 273253 },
  { "year": 2007, "gdp": 246481 },
  { "year": 2006, "gdp": 208143 },
  { "year": 2005, "gdp": 196118 },

stevekinney

The cool thing about Ember is you can create Web Components that encapsulate reusable functionality. A component has two parts, a template (usually in Handlebars) and some JavaScript.

One of the nice things about Ember is that most of the names are just assumed. So if you pop a new component called {{my-chart}} into your application, Ember automatically looks for a template for that component in #{wherever_you_keep_your_templates}/components/my-chart.hbs and tries to create an instance of App.MyChartComponent. You can use App.MyChartComponent.extend({}) anywhere in your application to defite it's functionality.

The first step is pretty straight forward. With an Ember Component, you can grab onto the didInsertElement hook and initialize the graph. [Here is a code sample][insert] that basically shows how I did that.

  didInsertElement: function () {
    
    var width = this.$().parent().get(0).offsetWidth;

stevekinney

$forestGreen: rgb(48, 97, 88);
$green: rgb(116, 169, 73);
$leafGreen: rgb(153, 201, 135);
$darkBlue: rgb(16, 80, 143);
$cobalt: rgb(94, 138, 185);
$lightBlue: rgb(182, 221, 211);
$ocean: rgb(86, 185, 197);
$orange: rgb(227, 117, 54);
$yellow: rgb(248, 212, 58);
$pale: rgb(255, 245, 213);

stevekinney

• [Practical Object-Oriented Design in Ruby][metz] by Sandi Metz
• [Programming Collective Intelligence][coll] by Toby Segaran
• [Secrets of the JavaScript Ninja][resig] by John Resig
• [Effective JavaScript][herman] by David Herman

[metz]: https://www.amazon.com/Practical-Object-Oriented-Design-Ruby-Addison-Wesley/dp/0321721330/ref=as_sl_pc_ss_til?tag=stekineduteca-20&linkCode=w01&linkId=RBEJG3UWS4TC7MXD&creativeASIN=0321721330) [coll]: https://www.amazon.com/Programming-Collective-Intelligence-Building-Applications/dp/0596529325/ref=as_sl_pc_ss_til?tag=stekineduteca-20&linkCode=w01&linkId=PCW5DDXBSOZ7GOCL&creativeASIN=0596529325 [resig]: http://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X/ref=sr_1_13?ie=UTF8&qid=1401661527&sr=8-13&keywords=javascript [herman]: http://www.amazon.com/Effective-JavaScript-Specific-Software-Development/dp/0321812182/ref=sr_1_14?ie=UTF8&qid=1401661527&sr=8-14&keywords=javascript

stevekinney

module.exports = {
  drawRoutes: function(app) {
    app.use(function(req, res) {
      es.render('404');
    });
  }
};

stevekinney

enum Planet: Int {
    case Mercury = 1, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune
}

Planet.Mercury.toRaw()
let possiblePlanet = Planet.fromRaw(7)

stevekinney

$(this).css('z-index', parseInt((+new Date()).toString().slice(6), 10));

/*

Uses the system time to set the current element's z-index above other elements
on the page. This terrible hack allows me to not have to store the most recent
z-index anywhere. I can't wait to see how it bites me.

Context: I use it with draggables in jQuery UI.