OnRails.org

MWRC 2010 - Notes from Day 1.

Daniel Wanja — Fri, 12 Mar 2010 04:43:49 +0000

Jake Parsell took some really great notes using Google Wave. I know the videos will be available shortly but in the mean time if you want to figure out what you may want to watch you can find out more details below:

MWRC

Giles Bowkett - making some music with ruby Archaeopteryx

- Giles Bowkett: Archaeopteryx: A Ruby MIDI Generator

- learn probability matrix

- google is easy if you understand prob matrix

- google spell check in 21 lines of python

- wonder how easy OCR would seem in this context?

- don't understand python community.... why are there not more dick jokes about pythons?

- how is there not a web framework called trouser snake?

- oh yeah... better talk about lambdas

James Golick - Cooking with Chef - @jamesgolick github.com/jamesgolick

- Chef: Quick and Tasty Ruby Powered Server Configuration

- sysadmin work is boring

- too many config languages

- amazed if anyone can get nagios working on a consistent basis

- ues recipes to install packages

- recipes written in ruby

- create services -> status, restart, reload, etc.

- templates to create config files

- erb

- notifies restart if config changes

- autoreload on save very handy for things like dynamic lists of ips that change when you start a new EC2 instance

- makes setting up stuff like haproxy and heartbeat easier

- security

- easy to include iptables

- always turn off password ssh logins - easier to remember when part of your cookbook

- look into chef server and chef client

Joe Damato - RVM

- RVM: Ruby Version Manager - RVM Ruby Version Manager - Documentation

- RVM gemset - different gemsets for the same ruby version per project

- create rvmrc to switch env automatically when you cd into a project directory

- export gemsets?

- should you use gemsets or just bundler

Loren Segal - Documentation with YARD

- YARD 0.5.3 - The Longest

- Yet Another Ruby Documentor

- Talk about documentation in general

- Documentation to help you think about your API

- What makes documentation good?

- consistency -> pick a style and stick with it

- correct -> it can be wrong and should be audited

- coherent

- YARD

- meta-data

- @param [Symbol] req_type :get or :post

- ....

- yard-respec

- shows rspec specs alongside method docs

- yard-sinatra

- shows your routes for api

Michael Jackson - Rack for web developers

- Rack: a Ruby Webserver Interface

- Read the Spec

- blah, blah, blah

- rack is cool in that it allows web frameworks to communicate with web servers, but not sure you care that much unless making a web framework

Yehuda Katz - Modularity - Lessons learned from Rails 3

- Try to become modular too soon and you will be wrong

- Become modular once lack of modularity is hurting you, then decouple

- Constants -> Globals

- router.url_for in rails 3

- easier to track down where instance variables came from than Globals

- eliminate things that are global

- tests are the canary in the coal mine

- instead of hard coding contants, pass things around

- be subspicious of Contant.foo

- stop caring about object allocations

- object allocations are essentially free

- Render

- Controller -> ViewPathSet -> ViewPath -> Template (on file system)

- Used to assume actual file path

- hard to cache

- Template.new takes a path

- Now

- Caller -> LookupContext -> ViewPaths -> PathResolver-> Resolver -> Template

- Template.new takes a source

- Could overide PathResolver to pull from database or S3 or something

- could be useful in making a CMS system with Rails

- Use Modules

- don't put methods you want people to be able to override in a class, make a module

- then you cna call super

- Use ActiveSupport::Concern

Paul Sadauskas - HTTP

- read the spec :-)

- prevent the requests that you don't have to answer

- Persistent Connections - so you don't have to create a new TCP connection for every request --- keepalive=onC

- Caching

- how do you decide when something is stale?

Jeff Casimir - Ruby Processing

- dynamically generate images in ruby app

- uses jruby

- first built to create verticle column headers

- Distributed Programming with Ruby -> to learn how to send jobs to ruby processing from rails

- Beanstalkd -> simple fast background processing -> brew install beanstalkd

MWRC 2010 - Day 1 Live Video

Daniel Wanja — Thu, 11 Mar 2010 15:53:46 +0000

The conference is about to start in 30 minutes, the room starts to buzz. The confreaks guys have their camera and video recording equipment all setup. So you will be able to catch up the conference online soon. Somehow I really like single track conferences and the sessions seem really great and will be fast passed, 30 to 45 minutes. Check out the schedule. So I will sit back and enjoy the show.

Follow it live on Justin TV!!

Watch live video from Mountain West Ruby Conference on Justin.tv

Salt Lake City is definitively a beautiful city, surrounded by it’s mountains…

360Flex last day.

Daniel Wanja — Thu, 11 Mar 2010 05:43:28 +0000

What a conference! The talks where really awesome so far. Not exactly sure what I will attend today. I might attend “Optimize it! ActionScript Tips for iPhone Games” followed by “Adobe is from Mars, Microsoft is from Uranus: A View from the Client”. Then I will have to split early to catch a flight to Salt Lake City for the MountainWest RubyConf 2010.

Optimize it! ActionScript Tips for iPhone Games Renaun Erickson

Renaun is Plaform Evangelist for Adobe since last week. He will put up the slides and code on his blog later today. Many of the tips are good for any Flash/Flex app not just for iPhone ones.

Packager for iPhone (PFI)
LLVM cross compiles

He will focus the talk on Memory/Cpu/Mouse Move and Game Timers.

Instead of going to the Flex/Silverlight talk, sorry Jun and Eric, I went to Nate Beck’s talk on pushbutton. And Doug McCune had something special planned for Nate’s birthday…

Flex 4: It’s a Wrap

Thank’s Tom and John…the conference was awesome!

360 Flex - Day 2 (Tuesday) - Live Blogging

Daniel Wanja — Tue, 09 Mar 2010 19:19:08 +0000

As you saw yesterday afternoon I didn’t blog too much, so let’s how today goes. The party last night was really fun, lot’s of networking, rock band playing and just a nice general geek atmosphere.

Evolution of RIA Design Principals

Right now the “Evolution of RIA Design Principals” panel is about to start.

Panel is:

Chet Haase – Senior Computer Scientists at Adobe
Bill Scott – Director UI Engineering at Netflix
Ehud Waizer – SAP
Paul Guirata – Catalyst Resources

Context: oriented to customer facing applications. Not games.

Chet Haase

He works on effects at Adobe. Effects used in a subtle way can make the user more effective.

What are the top 3 rules

Transitioning
Anticipatory
well-timed.

Don’t Lose the User.

Bill Scott

Principles for Interesting Moments

Input where you output
Require a light footprint
Stay in the flow
Offer invitations
Be reactive
Use transitions

Paul Giurata

Modular Reusable

Panel vs Page
Panels being reusable application(s)
Panels being re-used down to the code level
Panels potentially being entirely separate applications

Bill mentions Christine Perfetti has a few videos on usability testing.

Compiled Favorite Principles

Transitioning (Animations)
Anticipatory
Timing
Don’t Lose the User
Interesting Moments
Modular
Reusable

Consistency .via. developers working from the same code. Not a style guide as it’s open for interpretation.

Whats New in Flex 4 that’s NOT Spark! – Deepa Subramaniam

Deepa was on the engineering team for 7 years and now just got promoted as product manager.

She will put the slides on her blog. So I will go easy with the notes.

We will talk about:

Enhanced States
Pixel Bender Integration
Text (TLF)
2-way Data Binding
Advanced CSS
OSMF
MXItemRenderer
RSLs
Charting Enhancements
ASDoc
MXML Vector
Compile time FXG Optimization
Improved Compiler

2-Way Databinding

Inline declaration using the syntax, @{bindable_property}

<s:TextInput id="t1" text="@{t2.text}" />
<s:TextInput id="t2" />

Enhanced States Syntax

AddChild/RemovedChild replaced with includeIn/excludeFrom
State Groups

<m:states>
 <m:Sate name="A"/>
 <m:Sate name="B"/>
 <m:Sate name="C"/>
</m:states>

<Button label="b1" includeIn="A,B" />
<Button label="b2" includeIn="C" />

Text

FTE – Flash Text Engine in FP10
TLF – Text Layout Framework, set of ActionScript classes build atop FTE. Is XML-based markup

Each text element maps to a class

<div>        flash.textLayout.elements.DivElement
<p>            flash.textLayout.elements.ParagraphElement
<span>        flash.textLayout.elements.SpanElement
<tab>        flash.textLayout.elements.TabElement

TLF Partitioning:

Simple, plain text
Rich text
Rich editable text
Rich, editable, selectable text

Pixel Bender Integration

Pixel Bender: language for hardware-indepdent image processing algorithm
Shader: compiled instance of a Pixel Bender kernel
Flex introduces the ShaderFilter class. Simplifies pixel bender such that they can be invoked in MXML

Advanced CSS

Flex 3: type and class selectors
Flex 4: Multiple class selectors, id selectors, descendant selectors, pseudo-selectors, pseudo-state selectors

Eg pseudo-state selectors

@namespace s "library://ns.adboe.com/flex/spark";

s|Button:up {
  color:#000000;
}

s|Button:down {
  color:#FFFFFFF;
}

OSFM

Generic framework for managing media in Flash applications
Offers playback functionality, exposed in the Spark video component
replaces FLVPlayback
org.osmf.media.MediaPlayer
Play, pause, stop, loop, seek, volume, autoLoop, autoPlay, ...

MXItemRenderer

Spark ItemRenderers for use with MX List-based components
Extends Spark ItemRenderer and handles the contractual differences

Charting Enhancements

FilterFunctions for chart types. Can specify custom filter functions against the data set
Inverted axis support
RendererDirection in PieSeries
Performance related bug fixes

RSLs

By default RSL is turned on.
Default linked HelloWorld is 78% smaller
How to monkey patch when using RSLs. If you monkey patch you loose the benefits off RSLs
Flex is split in 6 RSLs: textlayout, osmf, framework, spark, sparkskins, rpc

MXML Vector

New type
Like Arrays but contents are restricted to a single base type
Faster than array

<fx:Vector id="myVector" type="String">
  <fx:String>hi</fx:String>
  <fx:String>bye</fx:String>
</fx:Vector>

Compile-time FGX Optimization

FXG directly to SWF representation
Faster and smaller
.fxg or past FXG into an MXML Component uses compile-time FXG Optimization

ASDoc

Comments in MXML
Support DITA creation
Max, Win, Linux

Improved Compiler

Incremental compilation. 50-80% better
Full compilation: 30-40% better (large apps)
Compiler Memory Usage: large apps are 30% better. multi-project apps are 70% better. Small apps are similar to Flex 3

360 Flex - Day 2 (Monday Afternoon) - Live Blogging

Daniel Wanja — Tue, 09 Mar 2010 00:03:10 +0000

Obey: Building a Rules Engine with AS3 and the Hamcrest API – Drew McClean & RJ Owen

How are rules defined and implemented?

Rules Engine Anatomy: Facts -> Rules [Conditions=>Actions] -> Output

Battery is down!

Flex + Phidgets = Beer – Kevin Hoyt

Kevin’s presentation was how to drive a phidgets board to control dispensing beer to users with an rfid, taking a picture along the way and counting the numbers of beers that user had so far. The board is driven from a Flex application. It was really impressive presentation.

Intro to Flex Typography – Matt Guest

Flash Text Engine
Text Layout Framework

360 Flex - Day 2 (Monday Morning) - Live Blogging

Daniel Wanja — Mon, 08 Mar 2010 19:16:15 +0000

Actually today is the first day of the conference. Yesterday was a tutorial day which was really fun. Today there will be a bunch of 1h20m sessions throughout the day. The conference is at the ebay headquarters.

I was with three other guys from Denver and we nearly missed the start of the keynote as we took the light rail in the wrong direction. How can 4 engineers go so wrong? :-) Anyhow it doesn’t seem we missed to much as it’s starting with a talk from the sponsor (ebay/paypal) about the eBay developer program.

Keynote

Now onto the main keynote by Deepa Subramaniam on the Adobe Flash Platform for her first keynote given ever. She is the new Product Manager of the Flex SDK.

The Flex 4 release is coming really soon.
Overview of Flex 4
Demo of spark components
Data-Centric Development
Video from the Flex team (geek funny)

It’s great that Deepa become the project manager of Flex 4, she understand what’s programming is about. She now continues her talk on the Open Screen project.

Developing multi-screen applications (phone .vs. desktop…)

Cross screen challenges/Cross device challenges

Screen size
Input mechanisms
Performance
Context/use case changes
Screen size, orientation
...

Flex can help – Slider (Mobile Flex Framework)

Deliver top quality experience
Across multiple platforms
Within performance constraints

The Slider team is hard a work and hope to have a preview available this year :-(... I want it earlier!

Growing Flex Ecosystem:

Functional Testing Tools
Performance and Load Test Tools
Flex Components
Frameworks
AMF servers
Tooling Extensions
Licensing+Encryption
Security Testing

All data visualization components now available in the free open-source Flex SDK!

Cool John is saying that they are recording the videos of each session.

Appocalypse Soon? The remaking of ‘Flex Components’ – Michael Labriola

It’s full house for Michael’s talk. I’m not sure how much live blogging I should do has they are video tapping each session.

This session is part of his continuing quest to teach Flex from the inside out. To learn about the Flash Player and the Flex framework.

Going to derive the Flex framework. Implement a custom component.

Flex 3 and Flex 4 components both descend from UIComponents

Michael is not explain how the code execution is managed by the Flash Player and executed during a frame.

All the basic Flex 3 methods also apply to Flex 4.
Flex 3: A base class and then a descendent class for each Layout. Problem i.e. verticalScrollPolicy=”off” to avoid unwanted scrollbars.
Flex 4: doesn’t derive layout behavior but can assemble it. Frame (Horizontal, Vertical, Diagonal). So the visuals don’t exist inside of the class.
Flex 4 are based on two separate pieces: the form and the function.

Separating these pieces favors composition over inheritance. By separating these we gain and we loose…
Gain: have one set of functionality look many different ways
Loose: a lot of dead weight and lots of extra classes
Two type of components: Controls and Containers
Flex 4: two types of things… those that can be skinned and those that cannot
Groups are the base type of container
Groups don’t have visual identify
BasicLayout, HorizontalLayout, VerticalLayout, TileLayout

New Hierarchy:

UIComponent
    SkinnalbeComponent
    SkinnableContainerBase
        SkinnableContainer
            Applicaiton
            Panel
            Window
        SkinnableDataContainer

Skins are classes defined in MXML
Applied to components using the skinClass or by CSS
Components: declare skin parts and declare skin states

Skins: specify a HostComponent

<fx:Metadata>
   [HostComponent("spark.components.Button")]
</fx:Metadata>

Declare states

   <s:states>
    <s:State name="up" />
    <s:State name="over" />
   </s:states>

How it all works: components need to size themselves, need to be created at runtime, need to interact with parents and children
Instanciation: all Flex components start with a constructors. Constructors in Flex add event listeners and setup initial properties…That’s it.
Display List: list of all the components that are on the screen at one point or another
Creating children: all visual children of a component are created in the createChildren method. The visual children of a component exists in the skin and so the skin is first created at this time.
Skin Methods: attachSkin, detachSkin, partAdded, partRemoved
Sizing: each component implements the measure() method. Flex works on the principle that children must be sized before their parent and it makes the sizing process potentially asynchronous. It works via a priority queue. Priority based on nest level.
Flex 4: children leave inside a skin and not the parent. The skin is a component, so we ask it the size of it’s children.
Measured Data: measure is only a suggestion.
Sizing: parents size children. A component does not size itself.
Sizing and Positioning: sizing and positioning is done in a method called updateDisplayList().
UDL: components are given a size. One the size is given, the component is free to do what is wishes. For the most part, this information is simply passed down to the skin. Again recursion.

This was a great talk and clarifies many things which is great timing as I’m starting to dive deeper into Flex 4.

To be continued…

Import your MacHeist serials to AppShelf

Solomon White — Mon, 08 Mar 2010 18:55:00 +0000

If you have purchased the latest MacHeist nano bundle, you might have noticed that there is no option this time to export as an AppShelf file. I felt a little guilty spamming my twitter followers to get my three free bonus apps (Airburst Extreme, Tracks, and Burning Monkey Solitaire), so to atone, I’m sharing a script that will translate your reciept into an AppShelf import file. Just save your receipt page from the browser, then pass the filename to this script as an argument:

RUBYOPT=rubygems ruby generate-appshelf.import.rb MacHeist-Serial.html

The script will create an import file named “nano-bundle-3.appshelf” in your current directory. Enjoy!

360 Flex - Day 1 (Sunday) - Live Blogging

Daniel Wanja — Sun, 07 Mar 2010 23:17:00 +0000

We just had a great breakfast at Peggy Sue’s Dinner…and moved over to the Ebay Headquarters where the conferences is about to start.

I’ll be taking notes during the day and updating this page as we go one.

UPDATE: Now that I typed all that I realized that Justin put up the slides and code on his blog: http://blog.classsoftware.com/.

Connecting Arduino Hardware to Flex: Justin Mclean

twitter: justinmclean Justin is from Sydney, Australia.

Content:

Arduino platform, how to program and how to connect to Flex
2/3 Arduino 1/3 Flex
Hands on

So we’ll go through the followings:

Digital Inputs
Digital Outputs
Analogue Inputs
Pulse Width Modulation
Serial Communication
Connecting to Flex
Review and wrap up

So Justin gave each attendee one board and a set of components. The board is open source hardware. I think that’s pretty cool. Feels like the hardware kit I bought for my 6 years son. The board is $25 and with all the components it’s about $40.

The hardware is provided to all participants by sparkfun.com

Software

http://arduino.cc/en/Main/Software

Also install the serial driver: FTDIUSBSerialDriver_10_4_10_5_10_6

Other Hardwares

ATmega micro-controller from Atmel. It mostly runs in cars.
Arduino Duemilanove
Arduino Pro and Pro mini
Lyllypad (warable)
Funnell IO
Mega
Many others

ATMega328

Hight performance low power RISC
16 Mzh up to 16 mips (faster as your first pc you owned – if you are a bit older)
32K of Memory
SPI and 2 wire serial interfaces
External interrupts, timers, pulse width modulation

IDE

IDE open sourcee and cross platform.
Based on the Processing language
Many open source sketches (projects) and libraries availables. Ethernet library, servers, ...

First Program

int ledPin =  13;    // LED connected to digital pin 13

// The setup() method runs once, when the sketch starts
void setup()   {                
  // initialize the digital pin as an output:
  pinMode(ledPin, OUTPUT);     
}

// the loop() method runs over and over again,
// as long as the Arduino has power

void loop()                     
{
  digitalWrite(ledPin, HIGH);   // set the LED on
  delay(1000);                  // wait for a second
  digitalWrite(ledPin, LOW);    // set the LED off
  delay(1000);                  // wait for a second
}

Now this will make the led blink:

Programming

C like language based o wiring
Write code and compile in IDE
Upload compiled code using USB
Hard to debug

Circuit Basics

Ground and power
Potential difference required for current ot flow
Conductors and resistors

Digital Inputs/Outputs

Digital pins on Arduino are dual purpose
Digital logic and voltage on = 5V off = 0V
Can be set to be input or output via pinMode

Variables

boolean, char, byte, int, long, float, double, string and array
int 16 bits, long 32 bits, float 32 bits
Strings are nul terminated ’\0’
Declare by ; eg int i;

It’s actually C++...What?! At a Flex conferences :-)

Setup Function

Used for initialization
Run when program loaded or board reset
Best place to place calls to pinMode

LEDs

Current will only flow in one direction
Longest pin connect to positive side, shortest to ground
Dont’ connect directly to power source use in series with resistors

Resistors

Resistors limit current flowing through them
Value and tolerance indicated by cooler bands
Resistor values for LEDs
For RGB or LEG digits you need multiple resitors
REG/GREEN/BLUE 180 oms, WHITE/ULTRAVIOLET 100 oms

Debugging ia Serial Port

Use Serial.begin to set speed
Serial.print, Serial.println to output
Use serial monitor in IDE to view

Blinking LED

Same program that the first program but this time we just set the led to the pin 3 which is connected to the board.

Digital Inputs

Some logic as inputs; hight 95V0 or low (0V)
Simplest digital input switch
Call pinMode to set as digital input as input

Connect Switch

Wire up push button on breadboard
Change code to turn light on/off

Now switches have three states (on, off, and in between) to the board needs to be wired to take that into account so you can program it accordingly. We added a very high resistence (10k) next to switch to ensure that the switch reports 0V when not clicked.

int led = 3;
int button = 4;

void setup() {
  Serial.begin(9600);
  pinMode(led, OUTPUT);
  pinMode(button, INPUT);
}

void loop() {
  if (digitalRead(button) == HIGH)  {  
    Serial.println("on"); 
    digitalWrite(led, HIGH);    
  } else {
    Serial.println("off"); 
    digitalWrite(led, LOW);  
  }
}

So let’s look at the wiring and how the switch operates:

Internal Pullup Resistors

Set mode to input
digitalWrite to HIGHT to turn on
digitalWrite to LOW to turn off

So there is something like the 10K resistor built-in the board to avoid using an extra resistor on the board to make sure the switch values are on or off.

Switch Issues

Switches can bounce and give and off values while switching
Noise can give false results
More a problem when switching needs to be counted
Use timer to solve issue (time = millis())

Analog Inputs & Potentiometer

Can read values via analogRead
Result is in range 0 to 1023 (10 bits)
Potentiometer is Variable resistor
Eg Read potentiometer values with Analog Inputs

int led = 3;
int pot = 0;

void setup() {
  Serial.begin(9600);
  pinMode(led, OUTPUT);
}

void loop() {
    int value = analogRead(pot);
    digitalWrite(led, HIGH);    
    // Set delay based on analog input
    delay(value);
    digitalWrite(led, LOW);  
    delay(value);
}

So now when the potentiometer is turned to the right a value of 1023 is returned and the lights blinks on and off for about 1 seconds. Turning to the left makes the delay shorted (down to 0) and you can get it to run blink really fast.

LDR

Light dependent resistor (high resistance)
Set flash rate based on value of LDR

This is a great full day tutorial and everyone seems to have fun. It’s pretty basic, but it’s the first time I program hardware.

Now we are writing fadeIn and fadeOut functions and get the light to pulse on and off

void fadeIn(int led) {
  for (int i=0; i<256; i++) {
    analogWrite(led, i);
    delayMicroseconds(5000);
  }
}

void fadeOut(int led) {
  for (int i=255; i >= 0; i--) {
    analogWrite(led, i);
    delayMicroseconds(5000);
  }
}

void loop() {
    fadeIn(led);    
    fadeOut(led);  
}

Now we replace the light sensor by a temperature sensor. There are also air quality sensors, breathalyzers.

Flex

Communication between Flex and Arduinos.

Software on Arduino (Firmata)
USB serial to socket proxy
Flex event based library to talk to socket (as3Glue)

Firmata is an Arduino library that support a binary protocol over serial interface. It’s Bi-directiona. Use version 2.

In the Arduino IDE let’s load the StandardFirmata program (File|Examples|Firmata|StandardFirmata). It’s a 286 lines program similar to the code we wrote so far, but more complex.

Server Proxy

From http://arduino.cc/en/Main/Software the server proxy (end of page)

To configure proxy first find what your serial device is. In terminal do: ls /dev/cu*

/dev/cu.Bluetooth-Modem /dev/cu.Bluetooth-PDA-Sync /dev/cu.usbserial-A600ailA

Then add this line to your serproxy.cfg: serial_device=/dev/cu.usbserial-A600ailA

Now in Flex you need to add the as3glue code (http://code.google.com/p/as3glue/) then you can drive arduino as follows:

private var arduino:Arduino = new Arduino();

private function init():void {
    arduino.addEventListener(ArduinoEvent.FIRMWARE_VERSION, turnLedOn);            
}

private function turnLedOn(event:ArduinoEvent):void {
    arduino.setPinMode(13, Arduino.OUTPUT);
    arduino.writeDigitalPin(13, Arduino.HIGH);
}

A qik look at the class room in the middle of coding their Flex app to drive their Arduino device:

Now we are going to write some Flex code to have some buttons that turn on/off some functions of the board.

private var arduino:Arduino = new Arduino();
private const pin:int = 3;
private const button:int = 4;

private function arduinoInit(event:Event):void {
    arduino.enableDigitalPinReporting();
    arduino.setPinMode(pin, Arduino.OUTPUT);
    arduino.setPinMode(button, Arduino.INPUT);

    arduino.addEventListener(ArduinoEvent.DIGITAL_DATA, buttonChanged);
}

private function buttonChanged(event:ArduinoEvent):void {
    if (event.pin==button) {
        event.value == Arduino.HIGH ? turnOn() : turnOff();
    }
}

private function turnOn():void {
    arduino.writeDigitalPin(pin, Arduino.HIGH);
}

private function turnOff():void {
    arduino.writeDigitalPin(pin, Arduino.LOW);
}

Thanks Justin, great talk!

vault.ncaa.com : under the hood of a cool Flex project.

Daniel Wanja — Fri, 05 Mar 2010 19:10:03 +0000

Thought Equity Motion and NCAA two days ago officially released the Ncaa Vault. A cool Flex app backed by an incredible video database with awesome metedata about each game…and released just in time for March Madness.

Here are a few of the announcements and online articles describing the services:

NCAA® and Thought Equity Motion Unveil First Ever Video-Powered Vault for NCAA March Madness® – by Thought Equity
N.C.A.A. Tournament Goes Online, Clip by Clip – by the New York Times
Say Hello to NCAA Vault, Adieu to Productivity – by Wired

In fact with the Vault you can have a URL right into a specific moment of any game and Wired picked out a great last second tying shot.

The twittersphere feedback is also pretty impressive.

This is the most visible Flex app I worked on :-) Late January Cameron Pope contacted me to ask if I could help on a Flex project for NCAA and Thought Equity. The funny part is that I didn’t know that Cameron was such a great Flex developer, I met him via the Denver Ruby on Rails User Group (derailed) and I also didn’t know what NCAA was (don’t shoot, I didn’t grow up in the US and we don’t have TV). So when I asked my father in law about NCAA and realized it was about Basketball I was intrigued by what type of application we needed to build. Cameron showed me the mockups built by Donny Wells which is just an awesome graphical designer. These mockups where just incredible and then I was presented the video service technology the Thought Equity Motion team put together, and I was just blown away and though that this would be a cool project to work on.

Cameron was the main Flex developer and I just worked part time on Monday’s on this project. If you need and incredible Flex developer just contact Cameron.

Now let’s dive more into the Flex nitty-gritty details:

For the mvc architecture we used the Swiz Framework and this turned out to work exceptionally well. Swiz sports some dependency injection features that can be enabled via the [Autowire] tag and I was surprised when I realized I could also just use that feature in an item render. Let’s look at a little detail…For the play by play timeline if a play is in the future it is displayed in bold:

So each line of the timelime is rendered by the TimeLineItemRender and you can just autowire the model which contains the playhead position.

      [Autowire]
      [Bindable]
      public var vaultModel:Vault;

The we can set the style name accordingly based on the play’s start time and the current playhead position:

   styleName="{data.startTime < vaultModel.playheadPosition ? 'past' : 'future'}"

The style of the application was created by the designer and Cameron did a great job reproducing it using Degrapha for skinning () using an approach similar to this example (example source)

Most of my work was around the searching, bug fixing and general architecture overview. We took a similar approach to the one I described here in order to avoid most of the server round trips during searching.

The Flex app is just a pretty face, behind the scene Thought Equity provides an incredible services that they will expose in many ways, the start can be seen here and all that data will be able to be accessed via API and other means.

This was a short but incredible project for me, the guys at Though Equity have such an incredible vision on how to turn these sport videos into something so much bigger! Thank you guys for getting me on board.

Enjoy! Daniel Wanja

Rails 3: Rack Middleware

Daniel Wanja — Thu, 18 Feb 2010 19:14:00 +0000

I’m watching the Rails Online Conference, February 2010 Exploring Rails 3 and really like how they setup the rack middleware.

...From the slides.

Rack Middleware

http://github.com/rack/rack/tree/master/lib/rack

Content Modifying

Rack::Chunked
Rack::ContentLength
Rack::ConditionalGet
Rack::ContentType
Rack::Deflater
Rack::ETag
Rack::Head
Rack::MethodOverride
Rack::Runtime
Rack::Sendfile
Rack::ShowStatus

Behavioral

Rack::CommonLogger
Rack::Lint
Rack::Lock
Rack::Reloader

Routing

Rack::Cascade
Rack::Recursive
Rack::Static
Rack::URLMap

Rack::Contrib

http://github.com/rack/rack-contrib

Rack::AcceptFormat
Rack::Access
Rack::Backstage
Rack::Callbacks
Rack::Config
Rack::Cookies
Rack::CSSHTTPRequest
Rack::Deflect
Rack::Evil
Rack::HostMeta
Rack::JSONP
Rack::LighttpdScriptNameFix
Rack::Locale
Rack::MailExceptions
Rack::NestedParams
Rack::NotFound
Rack::ProcTitle
Rack::Profiler
Rack::ResponseCache
Rack::ResponseHeaders
Rack::RelativeRedirect
Rack::Signals
Rack::SimpleEndpoint
Rack::TimeZone

Coderack.org

Check also out http://coderack.org ...99 pieces of Rack Middleware

RailsGuide: Rails On Rack

http://guides.rubyonrails.org/rails_on_rack.html