RailsConf 2011

RailsConf 2011 - Day 1

RailsConf 2011 - Day 1 Today is the tutorial days.

Tutorial 1 : html5tutorial

I started RailsConf with the "Building Web Apps with HTML5: Beyond the Buzzword" by Mike Subelsky (@subelsky).
He prepared twelve html5 exercises that walked the about 250 attendees through various features of html5 over a 2.5 hour session. It's fun to have time to work on these features. The high point was having about 200 computers using Websockets to send data back and forth with his server. He created a small ruby program that used EventMachine::WebSocket and it was holding up quite well all these connections.
You can download his tutorial and all files from https://github.com/subelsky/html5tutorial. Look at the tutorial.html file for instructions.
Here are a few highlights of his talk:

1 - Feature Detection

By using the Modernizr library, we used modernizr-1.7.js, you can detect difference html5 of your browser.
For example:

Modernizr.canvas
Modernizr.websockets

2 - Basic Canvas Drawing

You can get a 2d context and draw on the canvas via that context. You can use fillRect and other primitives like moveTo and lineTo to draw.

    var canvas = document.getElementById("main");
    var context = canvas.getContext("2d");
    context.fillRect(0,0,20,20);

Here I just created a loop to generate 180 rectangles. Note they are clipped due to the width of the canvas.

3 - Canvas Image Manipulation

    var img = new Image();
    img.src = "http://www.flickr.com/photos/50183640@N05/5616041841/";
    img.onload = function() {
    context.drawImage(img,0,110);
    };

4 - Basic Animation

In this exercise we first load a new image then trap the keystroke and call the up method. Note we use jquery:

	var characters = new Image();
	characters.src = "http://onrails.org/files/20110516_characters.gif";

	characters.onload = function() {
	  $(window).keyup(move);
	};

In the move the x+y coordinates are updated accordingly and is cleared and redrawn.

	  context.clearRect(0,0,width,height);
	  context.drawImage(characters,33,0,32,32,x,y,32,32);

Use the left and right arrow keys

5 - Fun With Forms

In this exercise we look at few attributes of the input tag like the placeholder and autofocus attributes.

	<input id="username" placeholder="Your name" autofocus>
	<input id="fn" placeholder="First name">

Use the slider below to scale the image:

We listen to the change event of the size input and call the draw() function. Note the last two of the drawImage below is the new width and height which will give us the scaling effect.

	<input id="size" type="range" min="4" max="320" step="8" value="60">

	function draw() {
	  context.clearRect(0,0,width,height);
	  context.drawImage(characters,33,0,32,32,0,0,sizeAmt,sizeAmt);
	}

6 - Local Storage

If you are in Google Chrome press option-command-j to bring up the javascript console. The you can enter key-values pair associated with the page. It's like a client side cookie.

	localStorage.setItem('shaz','bot')
	localStorage.getItem('shaz')
	localStorage.length // return 1
	localStorage.clear()

7 - Canvas Cleanup

The canvas itself can be styled like any element. Here we set a black background:

  canvas { 
    background-color: black;
  }

  input { display: block; }

8 - Web Sockets

That was the fun part of the presentation, mike created the a small ruby application and had over 200 clients connecting to it.
Here is an extract of the ruby program:
class TutorialServer def run EventMachine.run do EventMachine::WebSocket.start(:host => @host, :port => @port) do |socket| socket.onmessage do |msg| @logger.info "received: #{msg}" broadcast(msg) end end EventMachine::add_periodic_timer(10) { broadcast(JSON.generate({ :type => "ping" })) } end end def broadcast(msg) @sockets.keys.each { |socket| socket.send(msg) } end end TutorialServer.new('0.0.0.0',8011).run Then when the users moved the character image using the keyboard each keystroke was sent to his server.
// create the socket var ws = new WebSocket("ws://exp.subelsky.com:8011"); // sent to position+name to server ws.send(JSON.stringify({ name: name, x: x, y: y, type: "move" })); Ultimately he wanted to drive multiple clients from his server...but we ran out of time to dive into this.

And much more..

Mike covered additionally these topics: Embedded Media, Geolocation, Web Workers, Offline App

Well that was a couple of hours well spent! Go check out his material on github.

Tutorial 2 : Building Bulletproof Views

Now I'm at a great presentation from John Athayde & Bruce Williams on how to make elegant html, css and javascript. The slides will be posted online.
Here are some of the topics:

The Art of Template Writing
Nailing Navigation
Maintainable Forms
Don't Fear the Object
Going Mobile
packaging Assets
Questions & Discussion

And the day is not over...Ignite Rails tonight.
Enjoy!
Daniel Wanja