Jesse Cravens

u·biq·ui·tous javascript and html5

Ember.js Workshops

In the month of June, I had an opportunity to travel to Las Vegas to give a workshop and related talk at Future Insights Live 2014.

Jesse Cravens Future Insights 2014

My workshop was an 8 hour, beginner to intermediate level, course on Ember.js. I’ve added it to our HTML5 Hacks training content. If you or your company need training, give us a shout.

Here is a brief outline of the workshop:

Getting Started with the Starter Kit

Ember Inspector Overview

Ember Object Model

  • Application
  • Object Model, Inheritance, Getter and Setters, init, and .super
  • Object Model – Computed Properties
  • Object Model – Computed Properties w/ @each
  • Object Model – Observers
  • Object Model – Bindings
  • Object Model – Re-Opening Classes
  • Object Model – Mixins
  • Object Model – Enumerables

Jesse Cravens Future Insights 2014

Handlebars

  • Handlebars Templating Engine
  • With Data in an Array
  • Handlebars Helpers
  • Simple
  • Dependencies
  • Handlebars Helper to Get Bound Data

The Run Loop / Backburner

  • Backbone Example
  • Simple example
  • Flushing Router Transitions Queue
  • Backburner and computed properties

HTMLBars

  • Understanding Handlebars Metamorph
  • Ember, Backbone Benchmarks
  • HTMLBars/Backburner, Backbone, React Benchmarks
  • HTMLBars Basics: no bind-attr
  • HTMLBars Basics: no metamorphs
  • HTMLBars Basics: logic

RSVP

  • Simple
  • RSVP Chai-as-promised
  • RSVP and the Router – (more later)
  • RSVP.hash, RSVP.all – (more later in Views)

Router

  • Simple .map
  • Router and Handlebars Helpers
  • outlet
  • render
  • partial
  • Routes vs Resources
  • Async Router
  • Understand Promises
  • Understand hooks / active generation
  • Simple RSVP hash from IndexRoute
  • Nested Routes, Async Router, before/after model hooks, named outlets

Controllers

  • ObjectController and ArrayController
  • Controllers and Object Model
  • Hierarchy
  • Needs
  • Sorting

Views

  • Simple Views
  • Custom View Helpers
  • Layouts (simple handlebars compile)
  • Built In Views
  • Select

Components

  • Custom Elements

Actions

Ember-Data and the FixtureAdapter

Wrapping It All Together

  • RSVP.hash, Components, FixtureAdapter

BBQ, Bourbon and Ember.js at Code PaLOUsa 2014

In late April, I took my Ember.js talk to Louisville, Kentucky for the CodePaLOUsa conference.

O'Reilly's Building Web Apps with Ember.js

In the process I discovered Doc Crow’s Southern Smokehouse and Raw Bar’s BBQ and Bourbon menu. I highly recommend it for anyone in the area trying to find authentic, local fare.

During the day, I also listened to some great talks from @sireb and @robtarr.

My presentation focused on demoing the latest versions of RockNRollCall demo application, the source code for my upcoming book, OReilly’s Building Web Apps with Ember.js.

HTML5 and Ember.js at Øredev 2013:The Arts in Malmö, Sweden

At the beginning of November, I was given an opportunity to give two talks in Malmö, Sweden at the Øredev conference. First of all, I have to say I was extremely impressed with the conference. Although the theme was the Arts, I found it to be a developer’s conference with an artsy edge. The speakers I had a chance to see were developer’s developers, one of my favorites being a talk on Meteor by Chris Mather (@eventedmind) of eventedmind.com. I’ve maintained a peripheral view of Meteor, so it was good to get a beginner to intermediate overview of its capabilities. Given that I have been doing MongoDB / Ember-data client work as of lately, I am particularly interested in exploring minimongo.

Jesse Cravens at Øredev 2013 HTML5 Hacks

The city of Malmö was also a pleasure to experience, and as you might imagine, the people of Sweden were very welcoming. One of the highlights for me was the speaker dinner at the Malmö City Hall, originally constructed in the Middle Ages. On a side note, I finally had a chance to meet and have dinner with Douglass Crockford, a long time inspiration and virtual mentor, who was in town to give the keynote on Managing Async with RQ.

Building Web Applications with Ember.js and Ruby On Rails from Øredev Conference on Vimeo .

My first talk was a preview of my new book O’Reilly’s Building Web Apps with Ember.js. I shared the stage with co-author and fellow frog, Thomas Q. Brady. We took the audience through the creation of RocknRollCall, an intermediate level Ember.js application that fills in many of the blanks that most of the ‘Getting Started’ applications don’t.

O'Reilly's Building Web Apps with Ember.js by Jesse Cravens

Some of the highlights of the book, and the talk, cover topics such as: a survey of Ember tooling, debugging with the Ember Inspector, Ember boilerplates, app initializers, promises in Ember, the needs API, Ember components, 3rd Party JavaScript Integration (jQuery, D3), Ember testing, SPA authentication, Ember-data and other client-side persistence solutions, and remote data persistence with Ruby On Rails and Node.js.

My second talk was HTML5 Hacks Evolved, where I continue to share more hacks from by first book HTML5 Hacks, and html5hacks.com. This talk is culmination of HTML5 specifications that will have you rethinking browser-based applications. Some of the highlights of this talk included: Web Workers, WebSocket w/ GeoLocation, Device Orientation, and LeapJS, Web Components / Polymer / Ember Components (Custom Elements, Shadow DOM, HTML Imports, Model Driven Views, and Local Storage.

HTML5 Hacks from Øredev Conference on Vimeo .

In 2014, I’m retiring the HTML5 Hacks talks, to begin focusing solely on Single Page Application development in 2014. My hope is to kick out an early release of Building Web Apps with Ember.js very soon, and finish the book in early 2014. After that I’ll be in Louisville, KY at Code PaLOUsa to continue the Ember.js roadtrip.

JavaScript Makers: How JS Is Helping Drive the Maker Movement

This post is mirrored from: html5hacks.com

ok200 Conference

I spend my days writing a lot of JavaScript, and helping companies deliver ambitious UX focused applications to the web. I author books on the subject, blog, and speak at conferences as often as I can.

I work for frog, a product design firm, that for the last forty years has been helping increase the profiles of brands like Sony and Apple through iconic design.

I work within a culture that has deep roots into the Maker Movement; A culture that was making before the Maker Movement was cool, the “original makers” if you will. Written upon our walls and slide decks is the tag, ‘Love What You Make’, and as you might expect many of the frogs that sit around me are craftsfolk, DIYourselfers, and tinkerers. It is not uncommon to see a flying quadcopter, a mesh sensor network of Arduinos, 3D printed prototypes, explorations in next generation gesture with the Leap Motion and Kinect, video production, motion studies, 3D modeling, along with the standard artistic mood boards and web and native mobile application wireframes. Let’s just say there is no shortage of creativity across every medium imaginable.

Sharing My Craft with my Children

ok200 Conference - setting up

All of that being said, I’m a parent of two young children. My little ones constantly challenge me to find ways to share quality time with them. The parents reading this know the juggling act.

What I try to do is architect bridges between my children’s curiosity and the passions of others that have explored their crafts in a deep way. Myself, and my wife, being the most important of those craftsfolk.

If I’m doing it right, when I spend time with my children, they should share in my excitement and passion. If I’m doing it wrong, I’m overwhelmed and exhausted from work. In my vision, my children should be witnessing a model of how to wake up everyday with the goal of embracing opportunity to create a combination of function and beauty within the world around them.

Maker Faire

So it is in this context, that I met up with Mozilla’s Luke Crouch, and Tulsa Mini Maker Faire’s Scott Phillips to put together the closing keynote at the 200ok conference .

JavaScript Makers: How JS is Helping Drive the Maker Movement

The 200ok conference is on track to become Oklaoma’s premier web conference attracting a sold out crowd of web professionals from all over Oklahoma and the neighboring states. Going in, I felt as though I knew my audience well. In other words, if I spoke to them about languages they would understand, JavaScript and HTML5, my message would easily resonate. I also knew that given their location, Tulsa, OK, a presentation that touched upon work life balance and family values would immediate strike a chord as well.

So in the spirit of authenticity, I pretended as if getting prepared for a closing keynote dependent on hacked together hardware and software demos wasn’t challenging enough; I made the decision to include my 6 year old son, Carter with a flying drone and a custom configured Minecraft server accessible over conference wifi. I knew this would ensure that the presentation dangled on the brink of disaster, mirroring the chaotic reality of both open hacking and parenting.

My thinking was that a presentation on this topic should be authentic, and reflect the reality of my proposition, not be an ivory tower, academic/authoritative talk about how to share your craft with your children. I also made sure to not prep Carter. With a loose structure in place, we took the stage and worked our way through a story that consisted of 12 open software and hardware demos that showcased JavaScript as a primary scripting language, and a table full of hardware that ranged from a drone, a dissected wifli helicopter and erector set, a leap motion, and numerous prototyping boards.

Here are some of the highlights:

JavaScript and Prototyping Boards

Earlier this year I did a presentation at HTML5.tx that focused on building an Internet of Things with JavaScript and various open hardware prototyping boards such as Arduino, BeagleBone, and the Raspberry Pi. It was in that talk that I made a connection that eventually led to an introduction to Luke. So, given that the HTML5.tx content was of interest I started the presentation with a demo of the Arduino, Johnny Five, the original Beaglebone and BoneScript.

bonescript.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  ...

  require('bonescript');

  ledPin = bone.P8_3;
  ledPin2 = bone.P8_4;

  ...

  app.post('/motion', function(req, res, next) {

    console.log(req.body['eventType']);

    res.send('Motion data collected for '  + req.body['eventType'] + ' event');

    if (req.body['eventType'] == "motionstart"){
      digitalWrite(ledPin2, HIGH);
    }
    else if (req.body['eventType'] == "motionend") {
      digitalWrite(ledPin, HIGH);
    }

  });

Nodecopter and the Leap Motion

I started with the basics of the node-ar-drone module:

ar-drone.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  var arDrone = require('ar-drone');
  var client  = arDrone.createClient();

  client.takeoff();

  client
    .after(7000, function() {
      this.animate('flipRight', 1000);
      this.animateLeds('blinkRed', 5, 2);
    })
    .after(3000, function() {
      this.stop();
      this.land();
    });

Later, a crowd favorite was mapping the gestures from the Leap Motion to the Parrot AR drone, so that a one finger clockwise gesture triggered a nodecopter takeoff. A counter clockwise gesture then landed it. I was able to put this together using the leapJS and node-ardrone node modules, based on some initial hacking by Markus Kobler, where he pulled this off at a Nodecopter London event.

Jesse Cravens blowing minds with a JS-driven copter. from Michael Gorsuch on Vimeo.

ScriptCraft: Running JavaScript from within Minecraft

ok200 Conference

Later, I showed how to script inside of the Minecraft virtual world, using Walter Higgins’ great ScriptCraft library. I wasn’t expecting the conference wifi, and single access point, to suffice in allowing Carter and I to interact within virtual world. I was also concerned about the dynamic IP, and having to change it on the fly, start/restart the server, etc. So I made the decision 10 minutes before to not have Carter log in, and I would just speak to the possibility instead. In true 6 year old fashion, he rebelled and logged onto my server, popping up in front of me wearing a Creeper mask, as I was mid stream explaining how to script wooden signs with his 1st grade sight words as a homework exercise.

sightwords.js
1
2
3
4
5
6
7
8
9
10
Drone.extend('sightwords',function (){

    var wordsArr = ["have", "black", "three", "want", "get", "how", "two", "ten", "come", "went", "into", "know", "my", "do", "down", "who", "must", "let", "with", "red", "find", "will", "new", "live", "five", "you", "funny", "yes", "no", "may"];

    for (i = 0;i < wordsArr.length; i++){
        this.right(0+i).sign(wordsArr[i],68);
    }

    return this.move('sightwords');
});

Needless to say, his innapropriate behavior was a crowd favorite. I have to admit, it was mine as well.

ok200 Conference

Going into the talk, I knew I’d either be trying this again in the future or abandoning it as ‘one of those ideas’ that sounded good in theory, but was just not going to work. Where did I land? Well, let’s just say that Carter and I are looking for our next opportunity to share our experiences with other parents/web professionals.

Debugging Modern Web Applications Part 1

As JavaScript-centric web applications continue to become the standard, and the browser continues to evolve into a full-featured web application platform, developers need powerful debugging tools to help quickly troubleshoot issues and fix them efficiently. Issues can range from HTML/CSS browser inconsistencies, JavaScript exceptions, and a myriad of performance issues that range from DOM access to network latency.

There a number of tools that web developers can use to help make debugging front end applications less painful.

Debugging Modern Web Applications

In this tutorial, we will walk through the top tools available and how to use these tools by addressing some of the most common issues faced in modern web application. This is a beginner to intermediate level tutorial for web developers getting started with debugging the web, or programmers coming from other languages who want to better understand how to troubleshoot client side JavaScript, the DOM, performance, and network calls.

To demonstrate we will be debugging a simple web application. The source code is available here: https://github.com/jessecravens/techpro-debugging.

Read more at: http://tech.pro/tutorial/1404/debugging-modern-web-applications-part-1

Web Worker Patterns

JavaScript is executed in a single thread. If you’re not familiar with threads, what this means is that JavaScript can only execute one block of code at a time. If code is already executing, any interaction by the user will instantiate an asynchronous event that is queued up for later execution. Other events like those from XMLHttpRequests and timers, are also added to the queue.

So, as you might expect, a single-threaded architecture can be problematic to the user experience if a particular script takes a long time to complete.

Read more at: http://tech.pro/tutorial/1487/web-worker-patterns

Building Next Generation Widgets With Web Components

Nerdclustr

For SXSWi and FluentConf this year, @boyofgreen and I created a demo application to showcase some of the hacks that we included in our book OReilly’s HTML5 Hacks.

The demo application, Nerdclustr, is an HTML5 mobile application that brings ‘nerds’ of all types together conferences and provides a visual map that updates in real time. The application was written with Node.js and the Express web framework. It demonstrates the following specifications: HTML5 Web Forms, Geo Location API, WebSocket, Canvas, CSS3 transforms.

Given, the attention that Web Components and Polymer.js have been getting lately, I felt this was a good opportunity to demonstrate some of the exciting new specifications that are making their way to modern browsers. For the sake of this tutorial, I’ll be using and providing screenshots of Google Chrome, but it should be worth your time to explore the status of each of the specifications in other modern browsers as well.

In this tutorial, we will take a look at the HTML5 specs mentioned above in detail. Then, we will explore Polymer.js and build out an example application.

Read more at: http://tech.pro/tutorial/1421/building-next-generation-widgets-with-web-components

Fluent Conf 2013: Battle of the HTML5 Hackers

Our presentation at Fluent Conference 2013 was a success, as Jeff and I delivered our final version of the ‘Battle of the Hackers’ series.

Jesse Cravens - Fluent Conf 2013

If you missed the conference, you can still catch every workshop, session, and keynote with the complete video compilation of the event.Catch up with this year’s lineup of speakers—seasoned pros as well as notable newcomers—as they share their expertise with JavaScript, HTML5, CSS, and related technologies that power the Web.

You can order the series here.

Jesse Cravens - Fluent Conf 2013

It was a great pleasure to share the stage with Brendan Eich (Mozilla), Paul Irish (Google), Lea Verou (W3C), Bill Scott (PayPal), Jesse Freeman (Microsoft), Dion Almaer (Walmart.com), and dozens more in the field.

We also had a great turn out for the book signing, thanks for all the support. And congrats to Doug Hall for winning a free ebook copy of our book HTML5 Hacks

Jesse Cravens - Fluent Conf 2013

As always we’ve made all the code available and more at html5hacks.com, and on github: github.com/html5hacks.

I also added a few more new hacks, involoving Web Components (Shadow DOM, HTML Imports, Custom Elements) and Polymer.js. You can find that source code available here: github.com/html5hacks/fluent2013-html5hacks

It’s been alot of fun co-presenting with Jeff, but my next two sessions, I will be going at HTML5 Hacking solo. You can catch my next presentations in NYC on July 24th–25th at Devcon5 2013 NYC or November 4th–8th at Øredev 2013.

Ember.js Views and Live Templates With Handlebars.js Part 1

Tech-pro Ember.js Views

This is an exploration of Handlebars.js template library when used with Ember.js views. Many of the Handlebars.js tutorials on the web discuss the Handlebars API, but not in the specific context of using Handlebars with Ember.js. In addition to filling that void, I’ll also give a brief background of JavaScript templating in general to provide perspective as to the problems it is solving.

This tutorial will be divided into two parts. In Part 1, you should gain a clear understanding of JavaScript templates, the capabilities of Handlebars expressions and helpers, and how to write your own Handlebars helpers.

Read more at: http://tech.pro/tutorial/1308/emberjs-views-and-live-templates-with-handlebarsjs-part-1

Modern Ember.js Application Workflow With Yeoman and Mocha

Tech-pro Modern Ember.js Application Workflow

The following tutorial will provide an overview for building Ember.js applications with Yeoman. Keep in mind, Yeoman is a framework agnostic collection of tools, used to manage the workflow of any JavaScript application or plugin. For the sake of this tutorial, we have chosen to focus on Ember.js, as a case study.

Our workflow would not be complete without also setting up our testing strategy, so we will also include a standard BDD (Behavior Driven Development) setup with the Mocha testing framework.

Read more at: http://tech.pro/tutorial/1249/modern-emberjs-application-workflow-with-yeoman-and-mocha