A Better Way

Lua Unit Testing With Busted

2013-06-14T00:00:00-07:00

History of Busted

You may have been hearing a lot about Lua; it's used in an awful lot of neat places nowadays. Lua's actually been used in lots of neat places for a while, but it seems that it's gotten a bit of spotlight recently, with things like Redis integration, Wikipedia templates, mobile development, and gaming of all sorts.

Lua's really fast, especially with Luajit (it's been removed from the benchmarks game, but you can look at the Lua benchmarks and extrapolate data from the official Luajit benchmarks). It's also fairly widely used in the gaming world, and it's a fun and easy language to use. So, for some fun projects, my friends and I are building games using Lua to run RESTful game servers, with Node.js to build the web game interfaces.

The only issue we've had so far with Lua is that we've had to build a few tools ourselves to get the same environment that we enjoy in other languages, like Node.js, so we can be just as effective. One of the tools we built is busted, a testing framework written in Lua for Lua. It started off as a few assertions, and has grown into a full library including everything from testing deep-equality of tables (Lua's version of objects), to spies and mocks, to asynchonous, time-based tests.

Our first goal was to make it simple and easy to use, taking cues from such frameworks as Jasmine, Mocha, RSpec, JUnit, and others. We also wanted to have really nice terminal output and integration with testing frameworks, so you could run your Lua tests from systems like Travis CI, Jenkins, and anything else. We integrated i18n support through a simple i18n library, and we're now translated into 9 different langauges!

Busted uses our luassert library, which is separated from busted itself so that any testing library can use them.

Busted also supports Moonscript, a Coffeescript analogue, and Terra, a low-level counterpart to Lua.

With that background, let's dig a little into how to use busted for your own projects.

Installation

The first thing you'll need to do is install Luarocks. Depending on your environment, you can apt-get luarocks, brew install luarocks, or otherwise get it from luarocks.org. That done, you can run luarocks install busted to install the busted runtime and executable script, which will run in most variations of Linuxes, OSX, and Windows.

Writing Tests

The homepage has an example that looks something like:

describe("Busted unit testing framework", function()
  describe("should be awesome", function()
    it("should be easy to use", function()
      assert.truthy("Yup.")
    end)

    it("should provide some shortcuts to common functions", function()
      assert.are.unique({
        { thing = 1 },
        { thing = 2 },
        { thing = 3 }
      })
    end)

    it("should have mocks and spies for functional tests", function()
      local thing = require("thing_module")
      spy.on(thing, "greet")
      thing.greet("Hi!")

      assert.spy(thing.greet).was.called()
      assert.spy(thing.greet).was.called_with("Hi!")
    end)
  end)
end)

If you save this to a file like spec/busted_spec.lua, you can run busted, which will automatically look for files matching spec/*_spec.lua, recursively. You can also use command-line options to change the pattern.

At the top of the spec file, after doing any requireing of code or initialization of globals, you can start writing a describe block. That block will take a name and a function. Inside the block, you can write it blocks, which are the tests themselves and will contain any asserts; you can also write pending blocks for tests you'll come back to later.

Busted's super easy to get started with; read up in the docs to find out more about spies, async tests, assertions, internationalization, and more!

Hubot A Look Inside Our Robot Friend

2013-04-03T00:00:00-07:00

Hubot: a look inside our robot friend from ajacksified

Dismantling the Monorail

2013-03-06T00:00:00-08:00

Fixing Bundle '.ccache' Permission Denied Issues on OSX

2013-02-20T00:00:00-08:00

I was attempting to install a gem, capybara-webkit, and kept getting errors on OSX 10.8.2. Viewing the gem output log, it was attempting to create a file at /Users/jack/.ccache/a/1/<random letters> and getting a 'permission denied' issue. You can't sudo bundler, but sudo gem install capybara-webkit executed just fine.

My solution seemed to fix things:

sudo chown -R airbnb /Users/jack/.ccache

Super Awesome Git Deployment Across Autoscaling Groups with GlusterFS

2013-02-06T00:00:00-08:00

The cool thing about having a never-ending side project is that you get to do all kinds of crazy, fun things that might be outside the normal bounds of your day-to-day work. In my case, I'm rebuilding a super old text-based RPG, which leaves a ton of opportunity to learn new things. So recently, tired of FTPing updates to a handful of micro EC2 instances, and with a new application on the way, we decided to improve deployment.

Background

We're working on a browser text-based RPG that we took over in 2005, originally from late 2001. It's a PHP 3 app with frames, a relic of the glorious days before Ajax was really a thing. We deployed either through FTP or a series of bash-scripted scps. We moved our hosting to EC2 a couple years ago, but we were still managing servers-- a couple micro web servers, plus a larger database instance-- manually. To upgrade packages, we'd have to look up the DNS, ssh in, and update. There was no autoscaling, so we'd just run between 3 and 6 instances and scale up or down manually. It worked, but it was super annoying to get anything done.

We're also rebuilding the entire game under a brand-new stack. I'll talk about that architecture in a later post, but it's all service-based, with super fast Lua / Nginx servers handling data and exposing an API and some Node servers serving assets and handling browser web requests. This new stack will require running a lot of discete services, so time spent in ops has the likelihood of exponential complexity.

Requirements

Easy deployment. Preferrably, git deployment. We would need both file transfer and a mechanism for reloading services. Something like Heroku's deployment.
Easy authentication, preferrably with ssh keys. LDAP would be cool.
Easy ops. Move passwords and config into environment variables, and have a way to update these across all the servers.
Availability / durability. No single point of failure, and the option for multi-zone and eventually multi-region scaling.

Server Setup

We ended up using Gentoo for our servers, because even if it's a little weird, it's really fast. Everything is compiled right for the hardware. Additionally, to make ops easy, we can build our own portage tree and update and install our applications through our own package manager. We can also mask releases (mark some as dangerous) until testing passes, giving the option to run beta / test / non-passing versions of an application if it's useful, such as in test images.

We built base images for test and prod for each application, and set up autoscaling groups.

Deployment and Security

Next, we set up LDAP / LPK on a server so that we could quickly SSH into servers. Gentoo's great about LDAP, so that didn't take terribly long. That allowed us to use things like ssh jlawson@files.application.com (previously, we shared the EC2 pems on Google Docs. Don't look at me like that, I know, it's awful.)

We knew we wanted git deployment, but copying an application's files to multiple servers feels bad man, and would be worse with a ton of servers. That decision made, we built a file server using GlusterFS. Note: we had to unmask and use GlusterFS 3.3 in order to get multiple groups working with LDAP. We mounted GlusterFS onto the filesystem on our application AMI, and installed git on the GlusterFS file server. This allowed us to deploy using our ssh credentials stored in LDAP to the file server hosting git, and because the application servers had the file server mounted like a real directory, we would instantly have all application changes without having to push to each individual application server. It was awesome to git remote add test jlawson@files.application.com/files/test and git remote add production jlawson@files.application.com/files/production. This meant that deploys to update to all of the servers was as easy as git push test master or git push origin master. Goodbye, FTP. Goodbye, complicated bash scripts.

All services for a single application deploy to the same GlusterFS file server. This allows any application server to load up whatever app it needs to run.

We can also cluster GlusterFS into multiple zones and, eventually, regions.

Server Configuration

We made a git repository for server configs and git hooks for the application. In it was an app configuration file that set environment variables, like

APP_ENV=prod

It also contained additional test and prod folders with appropriate configurations, so we could then load up the proper environment variables per environment. This was loaded onto GlusterFS and symlinked into /etc/conf.d. We determined that having each application control its own config made things a whole lot simpler than trying to load 1-n configs on a server-by-server basis. The whole point of this system is automating ops, so we can spend time building stuff; the less we're sshed, the better.

We also put our post-receive git hooks in this repository, which symlinks the git deploy for the application to read and notifies our Hubot of deploys in chat.

Next Steps

We want to introduce a daemon in each application server that watches for changes in the files, in case we're running applications that need to be restarted. We're thinking of introducing a common format, such as requiring Makefiles in our applications that expose install, restart, stop, and start so that we can, for example, reboot Nginx or restart Node or whatever. We like the idea of a common makefile so that applications can manage themselves, and the server does not have to be aware of what's running on it.

We want to open-source our git hooks and autoscaling configuration scripts at some point soonish.

We also want to set up a constantly-running instance that always builds the latest Gentoo packages and builds our applications on a custom portage tree so that we can be up-to-date on both external system packages (like nginx) and our own applications.

Conclusion

All of our ops are automated really well now; Amazon automatically scales groups up and down, deploying changes (or reverting changes) is a git push and doesn't get in the way of our workflow, and we can submit no-downtime sub-second application deploys.

WebSockets, A Guide

2012-10-25T00:00:00-07:00

I had an article published April 2:

WebSockets provide two-way realtime communication between a client and server, and thus are exceedingly useful in building modern web games. Browser-based games can profit from an always-on, low-latency connection by enabling the rapid transmission of information about player and global game state previously emulated by methods such as Ajax polling and Comet. It is useful to first look at the history of WebSockets and gain an understanding of how WebSockets work at a technical level before we examine how we may use WebSockets most effectively. Armed with this knowledge, we can simplify the network layer and build amazingly responsive games that provide a high level of multiplayer interactions.

Check out the rest as well as a bunch of other awesome articles at Build New Games, sponsored by Bocoup and Microsoft.

Adaptive Game Design

2012-10-25T00:00:00-07:00

I had another article published through Build New Games on what I call adaptive game design.

There is, however, an interesting and compelling way around this conundrum to engage a much larger market. We can shift around the problem entirely by providing an entirely new class of entertainment to our end user. What I propose is a progressively enhanced, responsively designed approach to web gaming that encompasses all devices, everywhere, by providing engagement across all levels.

This involves breaking away from the idea of building a game, and instead, building a lasting, engaging experience.

Check out the rest as well as a bunch of other awesome articles at Build New Games, sponsored by Bocoup and Microsoft.

Switching Package Versions with Brew

2012-09-11T00:00:00-07:00

I use homebrew to manage installations of things like Lua, node, mysql, redis, vim, and more on OSX; I find brew essential to setting up and maintaining a dev environment. It has a ton of packages available and makes it super easy to stay up to date with the latest packages.

busted relies on a package called luafilesystem for directory traversal; however, lfs relies on Lua 5.1.x. The version in homebrew is 5.2. Switching is as easy as:

brew versions lua

which returns

5.2.1    git checkout 894f668 /usr/local/Library/Formula/lua.rb
5.1.4    git checkout 7e5bc89 /usr/local/Library/Formula/lua.rb

so I can

brew switch lua 5.1.4

And use 5.1.4 instead of 5.2.1, allowing me to use busted (and test lfs fixes in 5.2!) This works, in theory, with any brew package.

Lua Testing with Busted and Travis-CI

2012-09-06T00:00:00-07:00

Lua's an awesome language. If you already know what Lua is, skip ahead to the Busted section. If not, here's a brief overview.

Lua is a lightweight (< 500kb), super fast (fastest scripting language in almost all benchmarks when using the Luajit interpreter), simple language. It's primarily used in building game scripts, such as World of Warcraft plugins, but is also used in applications like Adobe Lightroom (which is, or was, largely written in Lua) and Redis's new scripting capabilities. It isn't very opinionated, and I find it to be similar to Javascript in its flexibility; it can be used functionally, OO, or procedurally which provides a wide range of applicability.

It's also, in my opinion, totally underutilized.

Busted

Busted is a simple unit testing framework that styles itself after such test frameworks as Mocha, Jasmine, RSpec, and *Unit. An example might look like this, taken from the official documentation:

require("busted")

describe("Busted unit testing framework", function()
  describe("should be awesome", function()
    it("should be easy to use", function()
      assert.truthy("Yup.")
    end)

    it("should have lots of features", function()
      -- deep check comparisons!
      assert.are.same({ table = "great"}, { table = "great" })

      -- or check by reference!
      assert.are_not.equal({ table = "great"}, { table = "great"})

      assert.true(1 == 1)
      assert.falsy(nil)
      assert.has.error(function() error("Wat") end, "Wat")
    end)

    it("should provide some shortcuts to common functions", function()
      assert.are.unique({ { thing = 1 }, { thing = 2 }, { thing = 3 } })
    end)

    it("should have mocks and spies for functional tests", function()
      local thing = require("thing_module")
      spy.spy_on(thing, "greet")
      thing.greet("Hi!")

      assert.spy(thing.greet).was.called()
      assert.spy(thing.greet).was.called_with("Hi!")
    end)
  end)
end)

Our goal was to make it super easy to read and write; to not have to look up documentation every time you want a test, but at the same time, build in flexibility to cover enough use cases to make it usable by the entire Lua community. So, we provide things like internationalization support (with 6 languages built in at time of writing), definable output types (for human or machine consumption), and composable assertions.

Testing using busted is really easy. The convention I usually follow is:

Create a spec folder in my code repository
Write module_spec.lua files to hold unit tests, broken up by classes or some other granular unit of functionality
Run busted spec from project root.

Installing

Installing busted is easy:

OSX

brew install luajit
brew install luarocks (luarocks is the "ruby gems" of Lua)
luarocks install busted

Linux

sudo apt-get install luajit
sudo apt-get install luarocks
sudo luarocks install busted

Windows

(Forthcoming when I bug my Windows-using friend about it. Install lua, then Luarocks, then luarocks install busted.)

Further Discussion on Busted

The busted docs are fairly solid; I reocmmend you check them out. There's also plenty of information on the internet about testing and TDD and the like. So let's move on to integrating with Travis!

Travis

Travis is a really cool tool that watches changes to Github repositories and automatically runs tests. It's particularly useful because you can check, every time you commit code, if you derped and broke something that you shouldn't have. It has built-in support for many popular languages, such as Ruby, Javascript, and others, but nothing for Lua yet. However, it's pretty easy to abuse a worker meant for another language to get it running busted specs.

Create an account on Travis, then enable Travis to watch your repository. Next, you'll create a .travis.yml file in the root of your project.

In this example .travis.yml file, we'll fake out an erlang worker and run our busted specs using both lua 5.1 and luajit. We define a series of installation steps that will get everything installed and run the script, then post the results to a web hook and send an email to me.

language: erlang

env:
  - LUA=""
  - LUA="luajit"

branches:
  only:
    - master

install:
  - sudo apt-get install luajit
  - sudo apt-get install luarocks
  - sudo luarocks install luafilesystem
  - sudo luarocks install busted

script: "busted spec"

notifications:
  webhooks:
    - http://my-url/travis-results
  recipients:
    - engineering@company.com
  email:
    on_success: change
    on_failure: always

At Olivine Labs, our webhook is actually a hubot endpoint that uses this travis-ci hubot script. This allows our chatbot to display the status in chat every time someone makes a commit or pull request.

-----------------
PASSED on Lua <luassert> [06aad23b79686b6b1293eafcac687658823fd18b]
Compare: https://github.com/Olivine-Labs/luassert/compare/066101917a96...06aad23b7968
Committed by Jack Lawson at 2012-09-06T20:04:34Z
-----------------

Check it out, and feel free to leave feedback and questions!

Inherited Initialization in Backbone

2012-04-18T00:00:00-07:00

One of the niceties that Backbone provides is the ability to perform some level of inheritance in your Backbone objects. You can, for example, create 'base' models that provide some kind of functionality; perhaps they override the fetch method to match your API. Views can share similar functionality or use sub-views to share functionality across various pages.

Here's an example of an application that has two pages: a home page and a member's personal gallery page, might look like this. This uses Twitter's Hogan.js (essentially, mustache templates.) with Backbone code written in Coffeescript. Both render a photo gallery, based on a model consisting of a collection of photos.

App.Views.Home ||= {}

class App.Views.Home.IndexView extends Backbone.View
  template: HoganTemplates['photos/index']

  initialize: () ->
    @model.bind('reset', @render)
    @render()

  render: =>
    html = @template.render({ photos: @model.toJSON() }, { 
      photoGallery: HoganTemplates['shared/_photoGallery'],
    })

    @$el.find(".photoGallery").html(html)

    @$el.find('.photoGallery').flexslider();

App.Views.Members ||= {}

class App.Views.Members.GalleryView extends Backbone.View
  template: HoganTemplates['members/personalGallery']

  initialize: () ->
    @model.bind('reset', @render)

  render: =>
    html = @template.render({ photos: @model.toJSON() }, { 
      photoGallery: HoganTemplates['shared/_photoGallery'],
    })

    @$el.find(".photoGallery").html(html)

    @$el.find('.photoGallery').flexslider();

As you can see, they're almost the same thing. We can make a base class to inherit from, such as a GalleryView that sets up the initialize and render functions; but, that limits us from the ability to add custom initialize and render functions on our individual page views.

or does it?

With a little trick, you can have your initialize and eat it, too. You can call your ancestor's initialize function, and call your own function, at the same time with a code sippet that looks like:

(javascript)

this.constructor.__super__.initialize.apply(this, [options]);

(coffeescript)

super

And turn that initial code into this:

App.Views.Base ||= {}
class App.Views.Base.GalleryView extends Backbone.View
  initialize: () ->
    @model.bind('reset', @render)
    @render()

  render: =>
    @galleryView = new App.Views.Gallery.GalleryView({ model: @model, el: @$el.find(".photoGallery") })

App.Views.Gallery ||= {}
class App.Views.Gallery.GalleryView extends Backbone.View
  template: HoganTemplates['shared/_photoGallery']

  initialize: () ->
    @model.bind('reset', @render)
    @render()

  render: () ->
    html = @template.render({ photos: @model.toJSON() }, { 
      photoGallery: HoganTemplates['shared/_photoGallery'],
    })

    @$el.html(html)
    @$el.flexSlider()

App.Views.Home ||= {}

class App.Views.Home.IndexView extends App.Views.Base.GalleryView
  template: HoganTemplates['photos/index']

  initialize: () ->
    @render()
    super

  render: =>
    html = @template.render({ })
    @$el.html(html)
    super

    @$el.find('.photoGallery').flexslider();


App.Views.Members ||= {}

class App.Views.Members.GalleryView extends Backbone.View
  template: HoganTemplates['members/personalGallery']

  initialize: () ->
    @render()
    super

  render: =>
    html = @template.render({ })
    @$el.html(html)
    super

    @$el.find('.photoGallery').flexslider();

Super calls it's ancestor's functions. Once the base template is rendered, it calls the base view's, which builds a gallery and sets it up as a slider.

Neat!

Wrap Lines in Vim

2012-04-05T00:00:00-07:00

If you search for things like 'how to wrap lines in vim', 'line wrapping vim', '80 characters vim', etc, you will often find people saying ':set textwidth=XX'.

But if you want to break, say, selected lines - or if this just plain doens't work for you, try this: !fold -w##. Add -s on the end to break at words. To, for example, select text and wrap it at 80-line sentences, breaking at words, you would select the text and use !fold -w80 -s.

Magic!

Your Most Valuable Asset

2012-03-28T00:00:00-07:00

Your most valuable asset, as an engineer, is not your particular set of skills, however specialized. It is the combination of your skills and experience that put you at a unique position to be able to deliver innovative concepts.

An engineer who knows Ruby, Python, and Javascript is an entirely different developer than an engineer who knows C#, Java, and Javascript, even when coding in the same language. Both have relevant experience; both may be the best in their fields. A team, however, is made up of both; conflicting and harmonizing experiences which can merge together to forge something that can take the best of all. Likewise, the engineer who has a degree in Chemistry and who does 3D art on the side, and the engineer who has an MBA and is just learning to develop can join the team and offer further, unique perspectives on software development. The young mind is as important to the team as the veteran. Without different personalities, different points of view, the team simply marches on without anyone to challenge assumptions. It's easy to fall into a trap of comfort and assumptions, and that trap is the hardest to get out of.

This doesn't just apply to engineers, although engineers are what I have the most experience with. I see the same thing in all facets of a company. A company without innovation is a company that is waiting to be destroyed, which cannot adapt to new situations, and must maintain the status quo and hope for the best. It won't be long until that status quo is disrupted by someone who can innovate, by someone who knows innovation means they can take the undeserved, underserved customers and build something new.

A homogonized culture is the death of a company.

Redesign

2012-02-27T00:00:00-08:00

About two months ago, I wrote about ditching Twitter Bootstrap. I had put up a temporary design that was, more or less, a clone of my existing Bootstrap site; brown instead of black and white, but more or less the same. I've decided to revisit some of my decisions, such as the use of a grid system and roughly applied CSS and remove some of the unnecessary stuff.

This new design, then, has much less complexity; it sticks with a very limited palette and uses typography better to set the feel of the site.

The Big Picture

2012-02-01T00:00:00-08:00

I had written a post a couple months ago, stressing the importance of semantic HTML. I feel good about that article, but I had originally meant to write more about the importance of progressive enhancement. Today, while I was reading an article by Bruce Lawson where he posted a list of interesting articles as he is wont to do, the last article really grabbed my attention. It opened with:

It seems to me that we are slowly switching from publishing content for the Web, to making content accessible to Screen-Readers (SR) - from targeting users, to focusing on devices and modern browsers.

We seem to be in the exact same prediciment that caused the stagnated IE: we're targetting specific browers, even when we have the tools, knowledge, and more importantly foresight to be better than this. To be better than building "Webkit only" sites. I highly suggest that you read it here.

If you want to find out more about progressive enhancement, check out Designing with Progressive Enhancement by the excellent people at Filament Group.

Don't make the mistakes of the past.

Getting Backbone

2012-01-30T00:00:00-08:00

Backbone is a javascript MVC-like (we'll get to that in a minute) framework with a goal of giving your javascript some structure. It provides a lightweight collection of objects for binding data from your server to visual elements on your web browser, providing a seperation of concerns and helping you write DRY code.

Get Backbone at the website or the Github.

In the spirit of Backbone's version 0.9.0 release, which is effectively a RC for the 1.0 release, I'd like to talk about how I make sense of Backbone and use it in my day-to-day development cycle. I come from a background using MVC frameworks, with Rails, PHP, and .NET with WPF and Silverlight applications; and thus I will start with my first epiphany towards using Backbone effectively:

Backbone is not MVC.

There is no "C". There's a Router, which used to be called a Controller early in Backbone's history, but the Router functions purely as a way to map views to URLs. There is no "path" to post data to, although you can use parameters in your route. It is, quite simply, a map between routes and functions.

In Backbone, the popular paradigm is to have your models do the talking.

Your models will sync themselves to the server (which is super easy if you have a RESTful persistance layer that Backbone can automatically hook itself into.) Your views will accept models, then make changes back to them (say, based on a form) or do things like call the model's persistance methods like save or fetch. Thanks to version 0.9.0, the models even have a default method to parse JSON retrieved from the server, so you don't even have to massage the data on the server- just let your model handle it. We're talking smart models, not dumb models.

Your backbone application may look something like this:

User hits URL
Page instantiates router object
Router object finds what route you're at, news up a model, which syncs its data from the server, and sticks it into a view
The view hooks model up to the UI, the user performs actions on the form, which performs actions on the model, which syncs to the server
User clicks link, which maps to the router, continues the cycle

But wait. You might not even use a router. For example, maybe you want the awesomeness of Backbone, but you don't plan on building a single-page app, or maybe you plan on building one later but can't do it all at once. That scenario might look more like:

User hits URL
Page instantiates model with data from the server (so we don't have to make two trips), instantiates view with this model
View hooks model up to the UI, performs actions on the model, which syncs to the server
User clicks link, which goes to a different page

The traditional controller is more baked into the models, and the router is entirely for convenience if you want to manage history to enable some back-button functionality for the user or if you want to store a bookmarkable state such as if you're building a single-page-app.

Backbone's starting to look a whole lot more flexible now, more as a framework for splitting up DOM and data manipulation and less as a web application composing kit. It can certainly do that- and it does that well. But it doesn't have to if you're not building it that particular way, or if you're working on it but can't get there today.

Javascript

2012-01-09T00:00:00-08:00

Disclaimer: this is a rant at 1AM. Content subject to change when I wake up in the morning.

Javascript is not a classical OO language.

Here it is again.

Javascript is not a classical OO language.

You can use classes. You can pervert it into things like Dart, or use gobs of inheritance to build a classical structure. By doing so, you're limiting yourself and destroying the flexibility that Javascript provides. Stop thinking of Javascript like Java, because it isn't. Use object instances and build prototypical objects when it makes code cleaner, not as the general rule. These things aren't evil in any way- but they should be used where appropriate. You don't need contracts. I don't even like typing the word 'contract.' It's ugly. It's ugly in Javascript. It's ugly everywhere, really.

Protip: learn Scheme. Try out MIT's free online courses. Then come back and try out Javascript again.

I went through this phase. I learned Javascript, and used it for horrific DOM manipulations. Then I learned C#. I went through a phase where everything was an object, everything was namespaced. Then I learned Scheme, and bounced around in Python and Ruby a bit. Once you've grasped procedural, functional, and classic OO programming, you begin to see that the patterns in Javacript aren't ugly, aren't random and messy; that you don't need obese structure and contracts and type checking. You can elegantly and concisely pass around functions and objects and whatever, because they're all the same thing anyway, more or less.

Structure is overbearing. Javascript is freedom.

I guess the whole point I'm trying to make here is, I hate sauerkraut.

Alchemy Websockets

2012-01-07T00:00:00-08:00

Alchemy Websockets is a C# .NET library that allows a web browser that supports the WebSockets protocol to connect to a server application using a peristant TCP connection. This means that we can employ real-time, stateful communication between web applications and server applications. WebSockets are supported by current versions of Chrome, FireFox, Safari, and Opera and Opera Mobile with special configuration settings set. IE10 will also have WebSockets. Alchemy can run on Mono (which means EC2 is a go) and supports most versions of the protocol, stretching from hybi-00 to the latest (and final) RFC spec.

We (Drew and I and Olivine Labs) had started considering how to use WebSockets for some of the games we were building and planning. At the time, we were thinking about using them for chat for the now-defunct Chrysellia; and we have plans to build a game that uses WebSockets fully as its transport. Our search took us first to socket.io, a Node.js implementation that gave not only WebSockets, but also fallbacks with Comet and Ajax long-polling and other hackish methods of doing socket-like communication.

However, while I, a javascript developer, originally lobbied for Node.js and Socket.io, we decided to move forward with C#. It isn't the new, sexy language, but it is a language that we both know well; and better, we could take advantage of C#'s amazing microthreading. We built the library around this core threading model so that it could very efficiently handle hundreds of thousands of simultaneous connects, disconnects, and messages on a single server. Drew was able to get around 200k live connections on his dev box before he ran out of memory for the clients.

Alchemy also includes a WebSocket client for server intercommunication that uses the latest protocol version rfc6455 to talk to anything else running WebSockets (whether Alchemy or otherwise.)

We'll be putting it up to a big test with a server infrastructure management API that we've called Tiamat and an API command router called Vocale that will be built over the coming months (we plan to MIT / LGPL these as well).

Ditching Twitter Bootstrap

2012-01-05T00:00:00-08:00

Until recently, my blog was using a fairly vanilla version of the CSS framework put together by the developers at Twitter, Bootstrap. It's a really full-featured framework that gives grids, headings, links, buttons, and all manner of form elements a clean and consistent design. You can see another example at the Alchemy Websockets site. I used it- as I think many people do- as a way to get a decent site deisgn up in a matter of minutes; one can download or clone the repository, and use as-is or tweak a few LESS variables and compile a new version complete with new colors and gradients.

I put a bit more work into the Alchemy site than I did on my blog; I originally was more concerned about setting up jekyll correctly and getting everything online than learning another layer of abstraction between me and my code. In fact, that's probably Bootstrap's greatest contribution to me - I learned more about LESS while tweaking link colors and gradient styles for Alchemy. I'm still not sold on the concept of CSS preprocessors on a wide-scale team use, but I'm experimenting with it on the new Neflaria site and hope to have a much more substantial recommendation once that project is complete (fingers crossed, June.)

As all bootstrapping frameworks must (or, should), the monotony eventually got to me. I only used about 10% of the features, and the design just didn't feel right if it wasn't either heavily customized or built from the ground-up. It is my blog, after all - and even if it'll take a little work to bring it back up to speed, to homogenize the components and get all the elements lined up correctly, it feels a little more like home now.

Related: subtlepatterns.com is amazing. Also, I'm a happy user of the 1140 grid which provides a fluid-ish responsive grid system.

Vim "Can't Open Errorfile" Issue

2011-12-14T00:00:00-08:00

tl;dr: put set shell=bash in your .vimrc

I recently had to reinstall OS X after a catastrophic hard drive failure. I had most of my configuration on Github (which is something I highly recommend), luckily, so it was a pretty easy move thanks to that and some well-placed backups.

So, I pulled down my config, loaded the submodules, and threw it all in my ~/.vim directory. Everything went smooth as butter until I tried to run vim-ack. I had originally thought that it was an error with vim-ack, and tried alternate versions of vim-ack. But I still got an error. So I tried five different snapshots of MacVim. I still got the error. Then I tried copying a file with NERDTree, and I got another error. Delete and add worked, but not copy. Mystifying.

vim-ack error:

Searching ...
Error detected while processing function <SNR>21_Ack:
line   23:
E40: Can't open errorfile /var/folders/98/_ymf2wy554n6qrs32ptrwrl40000gn/T/vx96wXC/2
Press ENTER or type command to continue

NERDTree error:

Cannot execute shell /usr/local/bin/bash
Error detected while processing function <SNR>19_showMenu..30..47..NERDTreeCopyNode..54..112:
line    8:
E484: Can't open file /var/folders/98/_ymf2wy554n6qrs32ptrwrl40000gn/T/vx96wXC/3
Error detected while processing function <SNR>19_showMenu..30..47:
line    6:
E171: Missing :endif
Error detected while processing function <SNR>19_showMenu..30:
line   19:
E171: Missing :endif

I tried chowning the temp files; I tried unsetting TEMPDIR. Nothing worked.

After browsing page after page of non-helpful Google results, I came back to a three-year-old conversation that I had already been to twice. I noticed one little line in there:

set shell=bash

And thought "Well, I've tried everything else."

It worked.

HTML

2011-12-06T00:00:00-08:00

I have a strong belief in HTML that means something. HTML can be viewed as a vessel for delivering content; however, HTML- and especially more so with HTML5- defines a mechanism with which we can not only deliver content, but describe what the content is. This is what is called semantic markup; it is not an obtuse buzzword, but rather an important design methodology.

It is easy to fall into one of two pitfalls: "just get the thing done" and "write the minimal amount of code possible". One is caused by a developer who does not understand (or does not care to understand) the importance of markup; one is caused by a developer who is foregoing semantics in favor of misguided "efficiency" gains, whether personally (writing less code) or for the server (sending less code.) However, in the long run, this serves only as a barrier to maintainance and usability.

There was a large movement towards using div tags for markup, moving away from monolithic table-based markup. This was done in order to reduce the coupling between styles and content, making changes easier, content easier to consume, and code easier to maintain. It also allowed designs to be fluid, flowing around the content rather than constraining content into boxes. Instead of shuffling table cells, we now only have to switch out a class, or in extreme examples, the order of a few div containers in order to update a design. This was an important step forward in the evolution of modern web development. However, while progressive, divs were found to be meaningless. No reasonable heirarchy of data could be constructed; a side-bar was virtually indistinguishable from main content, a site's heading didn't stand out except through primitive h# tags.

HTML5 then gave us elements such as header, footer, time, nav, section, article, aside, and more; new properties and attributes such as input types and input placeholders; and more (which you can read about in the W3C Specs and at the excellent html5 doctor. html5- true html5, not "marketing buzzword" html5- has a rich and beautiful focus on semantic markup that allows for clear consumption and maintainance of content.

It is not only html5 that has semantic meaning, though; looking back through html4 and earlier iterations gives us examples of hr for splitting content sections, table for data, form for form, a for links. Many of these base tags are, however, ignored or forgotten in return for generic div zealotry. Links are built with div tags and javascript onclick events, 'ajax' forms are built using generic elements, and images are simply div tags with background images. We have begun to lose meaning not only to the browsers that consume our content, but also to ourselves, as developers. With semantic elements, one can view an article tag and understand where it begins and ends without following a chain of generic div tags; with a form, one can understand that its contained inputs are part of a collection to be submitted, rather than a random cluster of inputs, any of which might be sent out to a server; with an a, we know it goes somewhere, and with a button, we know it performs an action.

Semantically relevant code is both code and documentation. With consistency, we can reduce the number of one-off styles and the amount of javascript logic we have to write. Instead of coupling our styles to our code, as we may have coupled our content to tables in the past, let us define code that uses elements that can describe what the content is. Style a time element instead of a time class on a span; write javascript based on buttons instead of divs coerced into acting like buttons.

Thus we may reduce our code and provide meaning to our content, while providing a normalized experience to machines who read our content, be they search engines, browsers, or screen readers.

This post is dedicated to my colleague, Tony DeSylva, for whom I wrote this.

On Modern Web Development

2011-11-17T00:00:00-08:00

I shall begin thusly:

HTML5 and related technologies provide tools with which to enhance accessibility through well-structured, sementically-defined content.

And I will asert this:

The ability to build an application with a javascript framework, even with "modern" development practices, is meaningless if you use these tools like you would Flash.

Lately, there have been a lot of blog posts, links on hacker news, links on reddit, and elsewhere where someone's showing off their latest application or framework. Javacript application frameworks have never been more popular- like my personal favorite, backbone.

With these tools, it's easy and simple to build single-page applications. One looks at Twitter, or Facebook, or Grooveshark, and admires the clean presentation and seamless(ish) transitions between application areas. So, developers go forth with the intent to replicate this kind of experience. We import a framework like Backbone, and start coding away. Maybe you use something Rails and TDD our way through a nice group of controllers serving JSON right to our client-side models. We use Jasmine, and TDD our way through the client-side, and use all the "best practices" that we've been tought, and we deliver a great product on time.

You've built an application that looks pretty, that's fast and performant and efficient, that followed "best practices" for development technique, but it has one major problem: if there's no non-javascript representation, it isn't machine-readable. Or in other words, if it's a strictly javascript-based application, that does everything client-side except for the retrievel and storage of data, then you're just as good off as having built it in Flash; maybe even worse.

SEO Implications

Googlebot has an API for ajax calls, but you have to conform to their specifications. Search engines work by scraping your site's content; and if you don't have an html representation of you data, it can't scrape anything.

Accessibility Implications

You're going to be alienating a lot of users who use screen readers. Some can watch for new content, but not all.

Availability Implications

A javascript-heavy website on a first-gen iPad or a lower-powered tablet does not run well. Also consider set-top boxes like Google TV. Modern mobile devices have no problem, but earlier devices won't even be able to use your application.

I can't guess or give you recommendations on how many people you might be ignoring. But I can try to make a case and tell you that there's a right way to build web applications where you won't run into these problems.

Start by building your client through HTML. No styles, no javascript. Just HTML. That means using plain, old, boring vanilla links and forms. note: this is a good spot to use html5. section, head, aside, footer, input types, etc. are all there for a reason. This is that reason.
Build your server-side:
- With a RESTful interface. This will let you route HTML request, ajax / JSON requests, and anything else through a common API that you can use internally and have the option to externalize. You're building for the future - you can build any client that can produce a RESTful call, which is pretty much anything. You'll use the same routes whether requesting JSON or HTML, which means you have to change nothing to switch between calls.
- With logicless templating. I can go on forever about how great Mustache is. Fill these views with a flattened-down version of your model (also known as a viewmodel in some circles.) This will allow you to use the same logic and output whether outputting HTML, JSON, XML, or anything. If it's a JSON request, JSONify the viewmodel. If it's HTML, fill a mustache (or erb, or whatever) template with this viewmodel and send that. One line of code difference between request type is the goal.
Layer on your css. This probably sounds like Progressive Enhancement, because it is.
Now, add your framework on top. If you're using a framework that supports Mustache templates, you can use the same code on your client that you are on your server - which means no duplication. Same html, same css, same everything.

You're probably doing most of this already anyway. The major thing to take away is that now you're building your templates first instead of implementing your client framework first. With a very small change, if you're already writing well-structured markup (which you can easily check while you're building your css-less templates), you've built yourself a single-page app that's also accessible. You've built an application that can handle any request type, that provides an API, that is easily scalable (thanks to RESTfulness, you can easily replicate it across webservers as quick as you can clone them), and that re-uses as much code as possible, and is therefore easily maintainable.

So my plea: Build in html everything you can. Don't develop Flash in HTML5.

The only thing I can think of that could probably get away from it is a completely interactive experience such as an online game. But even then, giving your players forums, stores, chat rooms, etc. to discuss the game in is just as important to the health and growth of your game as the game itself is. Having these tools available can make a world of difference.

New Game Conf Liveblog, Day 2

2011-11-02T00:00:00-07:00

I combined the notes for day 1 and 2 into a megasuperpost. Check it out at:

New Game Conf Liveblog

2011-11-01T00:00:00-07:00

Note: Combined the first and second day for a mega-wall-o-text.

Day 1 - November 1, 2011

This is a live blog for the New Game Conference. I'll keep quick notes during the presentations, and clean up grammar / confusing structures during breaks. The Q & A sections are paraphrased. Any quotes will be signified as such. Please leave corrections and requests for clarification in the comments here.

Also check out #ngc11 and #bbg on irc.freenode.net

Also also check out New Game Conf Quotes

I've used images that people post to Twitter; none of them are mine. I've used small versions of the images and linked to the original posting.

Some of the slides and are also linked at confswag

Keynote by Richard Hilleman

Nov 1, 9:00 - 10:00

Richard Helleman is VP CCD at Electronic Arts.

Started a little late to liveblog this, so here's a synopsis and high points:

Called the current web a Playstation 2 grade platform
html5 needs platform predictibility, killer game to be successful
Estimates that 75% of EA platform games (e.g. Playstation 2 games) could be converted relatively easily to web

photo source: @newgameconf

Debugging and Optimizing WebGL Applications by Ben Vanik & Ken Russel

Nov 1, 10:15 - 11:00

Slides and Samples

WebGL support in browsers opens the door to immersive 3D content, especially games, which is delivered with no end user installation, runs on multiple platforms and requires no porting effort. Debugging and tuning WebGL applications for highest performance can be challenging, in particular due to the low-level nature of the WebGL and OpenGL APIs. This session will introduce the WebGL Inspector and explore several complex real-world applications to show how they achieved their results and how the tool can be used to learn more about an application through a way most never see.

Techniques that will be covered include batching of geometry, using texture atlases, pipelining data, reducing the amount of data transferred to the GPU, offloading computation to the GPU, and using web workers to parallelize applications. Workarounds and gotchas will be described for the differences between WebGL and other common implementations (such as OpenGL ES on iOS) and limitations imposed for security reasons.

WebGL is coming out of "Experimental"
- Pros and cons of Webgl
- Pros
  - Directly exposes GPU
  - Very high performance
  - Not a plugin
- Cons
  - Much lower level than DOM
  - Harder to learn, debug, optimize

Debugging Tips

Check for OpenGL errors; restart with a good known base; start adding code back in until it breaks.

To debug shaders, remove functionality, output constant color (like red) in the regions of the shader where you're trying to identify what's going on.

Try a library like:

webgl-debug.js
Firefox web console
Open web console

Handling Context Loss:

Power loss on device, GPU reset, webgl-debug can help

WebGL Inspector by Ben Vanik

Showing off webgl inspector with aquarium demo. Logs and shows all calls, steps through draw calls to see scene reconstructed in order. Highlights redundant calls that don't actually change meaningful state. Isolates draw calls, and you can see what was affected directly and get information about the call, such as sample state, vertex attributes, texture urls, etc.

GPU Optimization

Retest often; automated tests where possible
Reduce the number of draw calls per frame; could block GPU. Watch for highlights in WebGL Inspector
Use RequestAnimationFrame for a more robust framerate; fallback with setTimeout if you have to
Disable unused WebGL features, such as blending, alpha texturing, etc
Link infrequently; shader verification / translation can take a long time, esp. on Windows
Change Framebuffers, not Renderbuffers, which require a lot of validation (this is counter to iOS guidelines)
Graphics Pipeline Performance

Optimizing Drawing (Scenes)

Canvas is drawn, sorting by z-index
Sorting by z-index is terrible for WebGL, which should be sorted by state, then depth, by using the depth buffer

Depth buffers can sort fragments per pixel; is relatively cheap for the GPU. Depth testing can increase performance dramatically, even in 2d apps.

Draw objects ordered by most expensive first; blending/clipping first
Sort scene ahead of time and maintain as sorted list in app memory if possible
Generate content that can be easily batched by merging buffers / textures
Draw opaque objects front-to-back, then layer on translucent objects back-to-front
Make sure to use index buffers, which enable additional GPU performance features like caching
Dynamically changing index buffers requires re-validation in WebGL. This is bad.
Always ask yourself: can this be a constant? Make it so.
Compute early, one matrix multiply on CPU is better than thousands on GPU
Estimate numbers; lower precision, prefer "close enough" to "perfect"
Lower level of detail (for example, for objects in the distance
Use mipmapping
Schedule math between sampling so that the GPU is not idle
Scale canvas to smaller and css to set width/height larger if you have a set size
GPU hardware is massively parallel; use if possible
Pushing frames from GPU can cause stalls; try to spread updates across multiple frames. Number of uploads don't matter, size of frames does.
Double / triple buffer if possible; makes frame upload consistent
Decouple GPU and CPU; re-send GPU older data if CPU hasn't caught up yet. If you perform the same translation sequence twice, re-send the old GPU data and fake it.

Conclusion

Use there tricks wisely; not all are useful everywhere. Start simple, test and debug continuously.

10:54 ajacksified_ I heard you like spinning cubes

10:55 segdeha So I put a cube in your cube

10:55 ajacksified_ so you can spin your cube while you spin your cube

Relevant

Q & A

When will be a good time to start using WebGL for clients?

You can begin to be it on it now. Consider progressive ehancement with canvas fallbacks.

How does WebGL affect mobile battery life?

WebGL is fairly similar to native code. It uses the GPU, and it will drain the battery more than jut using the CPU, but that's the tradeoff for more power. requestAnimationFrame helps because it throttles requests.

Does WebGL give you a way to use a secondary display?

That is up to browser implementation. WebGL renders into the canvas directly.

Lessons from the (Mobile) Trenches by Justin Quimby

Nov 1, 11:15 - 12:00

Moblyng has been developing HTML5 games for the past 3 years. This talk is an overview of the lessons learned from that experience covering multiple code frameworks, business partners, and revenue models.

Justin Quimbly: COO of Moblyng

Moblyng

Developed 13 production html5 games
Startup in Redwood City
Started with poker games, word games, war-style rpgs
Playdom: Social City, Sorority Life, Mobsters
WeeWorld: WeeMee Life
Facebook: Social Poker Life

Strategy of Mobile Development

Point of html5: accessibility to all devices

Social games are a great fit for light, engaging games. There is a big market opportunity and distribution opportunities in the mobile space, especially for people already on Facebook. These can be augmented with native apps, which can be no more than wrappers around the html5 games.

Products run on all devices, because of html5. Doesn't matter who "wins" the mobile OS war.

"How many of you building HTML5 games are targeting mobile?" Everyone raises their hand. #ngc11 Mobile HTML5 games = huge opportunity

source: @joemccann

Technology Framework

Huge numbers of mobile, internet-connected devices being shipped.

There is a huge market for playing games on your refrigerator.

No html5 canvas - too slow / unreliable. Moblyng uses javascript / css
Moblyng shell handles native hooks
Benefits of wrapper: native app in app stores for distribution and consumer access
Right now, if you need super blazing-fast peformance, you're going to have to write native code. Intense apps and light apps are different products for different platforms.
Invest in a ton of varying mobile devices, so you dont have to wait and can experience the hardware personally
Devices are expensive: paying premium prices for brand-new devices
Make devices readily available for rapid testing
Android fragmentation is an issue; have to target 2.1+ for mass penetration
Some phones may not implement spec properly; one older Motorola was totally broken. Was fixed, but you have to be ready to respond to hardware manufacturers.
Consumers won't ever do what you expect them to do. Being behind on updates is a problem.
Can't count on the same screen resolution; have desktop / tablet / phone versions

If you need super blazing-fast peformance, you're going to have to write native code. Intense apps and light apps are different products for different platforms.

Discovery and Distrubtion

If nobody can find it, your product won't be successful
Android market getting a lot better

Things to Avoid

App startup sounds - players are probably playign somewhere where they don't want to be disturbed. Meetings, bathrooms, bed, etc.
Device orientation matters - portrait / landscape. Portrait's the way to go to play games during the work day. Discreetness!

Things to Do

Hands-on Demo. Show users that the app works and is fun.
Speed matters, especially on mobile devices.
Launches should take < 10 seconds.
Touch response speed. Is the interface responsive?
Scroll speed; no stuttering, no delay.

Other Notes

Mobile metrics suck; cache clears on iOS power cycle, Android inconsistencies, hard to verify
Better off rolling your own metric solution
Work on great relationships with hardware manufacturers to test your app before new hardware/software releases to reduce surprise problems
General dev practices; source control, make dev / build / deployment systems are the same
Automate build / deployment (css / js minification, for example)
Set up IE8 / 9 stations
Cross-training; designers / developers
Swap devices between people (android, winmo, ios, etc.)
Work on relationships with other devs who you interface with
NO ABSOLUTE POSITIONING. You're fired.
jQuery, WebGL, Canvas slow or non-functional on a lot of devices
Android shipments have passed iOS shipments. For maximum availability, support Android, not just iOS.
Minimize technical risk. Use stable bits of html5. Consider that technologies may be alienating consumers.

Q & A

Can you put perspective on company size of Moblyng, and how that impacts your decisions? Where would you prioritize with a smaller headcount?

Moblyng has around 35 employees. The key to all of this is the game itself. At the end of the day, if your game sucks, noone's gonna care. Your team is initially going to probably be split 2-1; two for the game, one for system integration. Closer to the ship date, that ratio should split as you integrate with social systems. After shipment, it will reverse again as you respond to metrics and game mechancis updates.

What do you know about iOS vs Android users paying more?

It depends on the game type more than the platform.

Do you still target devices outside of Android and iOS?

We target devices outside of Android and iOS; the lion's share are in iOS and Android. Because we're venture-backed, we want to go big, and build games that work on various devices. The html5-running refrigerator validates our strategy; will our game work there?

Focusing on user acquisition, can you speak to the difference in different advertising schemes?

Part of the reason we target high distrubition is because it's hard to estimate; it depends on the product.

Can you talk a bit about how the platforms you choose to support influences your development process? Do you focus on one and expand to other platforms?

The evolution was focusing on phone; and now, it's foucsing on three platforms, phone, tablet, and desktop. Part of our initial product plan is to mock up UIs for each platform; user flows are somewhat different between platforms. We look at everything from day one.

Can you speak to experiences in doing work in-house vs. using contractors?

A good rule of thumb is: anything you can throw away 90% of, and still be ok, is a good thing to outsource. Artwork is a good idea. If you say "we need 100 swords", you may get 10 that are good. Development should happen in-house. Face-to-face communication is important.

What would you say to people who want to focus on a specific technology, instead of taking on more platforms?

There is a huge market; if you want to focus on a specific technology, and do it well, then that's a good strategy too. For us, in our history we've always focused on distribution. Either is a viable business strategy.

Can you talk about how beta testing has influenced development?

Automated client-side testing is difficult, because resource use for the game leaves little room. We do automated testing on desktops. Automated testing is less important than having a good game. Make sure you can make money on a game, then spend time automating tests.

Lunch Break

Source: @robhawkes

Fieldrunners HTML5: Bringing a Hit iOS Game to the Web by Darius Kazemi

Nov 1, 1:15 - 2:00

FieldRunners

Just this past summer, Bocoup and Gradient Studios worked with Subatomic Studios to port their smash-hit iOS tower defense game Fieldrunners to HTML5. This post mortem will cover porting OpenGL ES to WebGL, using the Web Audio API for game audio, integrating microtransactions and DLC, and a detailed look at graphics performance.

Darius Kazemi is a game developer at Bocoup in Bosten; did FB games at Blue Fang, foudned / ran game analytics middleware Orbus Gameworks, data analyst at Turbine on MMORPGs.

Fieldrunners was released oct 2008, one of the first hit iOS games. Much more polished, higher fidelity than other games. Was ported to Nintendo DSi, PSP, PS3, etc. Bocoup was contacted to convert it to html5 / Chrome Web Store, which began July 2011.

Took 12 weeks to port
3 weeks prepro and testing
1 programmer, 3 QA, 2 producers

Technologies Used

WebGL
Web Audio API
Html5 Audio
Google In-App Purchaes
JS
Python
Go

Target Platforms

Chrome / Chrome Web Store

Plan of Attack

2-week milestones; built demos at end of each milestone.

Milestone 1
- Tech Design Doc
- Workflow (check-in flow)
- Production risk assessment
Milestone 2
- C++ to JS conversion
- Particle system prototypes
  - high risk - no clue if would destroy framerates until it was built
Milestone 3 - beta
- Finish game
  - Optimizations
  - Gameplay
Milestone 4 - beta
- Monetization

First steps: get stuff to render; parse animation files, load images, render to WebGL; build sprite demo.

Basic functionality came next; porting tower functionality, entities, particle system.

Awesome particle effects made for rare units, like flame towers; was able to mitigate performance issues by limiting number of special, GPU-heavy units.

Took demo, packaged it up, cleaned off any private data, and posted it on blog to watch people's framerates in order to test on different configurations. Used Google Analytics event API to send framerate data for tracking through Google Analytics every 8th frame. Allowed comparision between browsers, operating systems, and other user breakdowns for average user framerate. Ended up gathering framerate data and the demo generated buzz about the game.

The target framerate was 30fps.

The next step was porting maps, enemies, and menus. Menus accounted for a majority of the work for this milestone.

Next was making it feel "webby"; SD / HD modes, detecting WebGL, Web Audio, window size, and general responsiveness; setting up hosting and caching.

It's weird to see what happens when the game dev and web dev worlds collide, and see what sparks happen.

Things Learned

Cached requests dramatically reduced CPU Usage.
Wrote a Python script for a machine port; a big mess of regexes did a lot of the work, which was later cleaned up manually.
Used Web Audio APi for SFX, which was released with Chrome 14. HTML5 Audio was used for background music. Targetting Chrome specifically made this easy.
Pack data into arrays where it makes sense.
Javascript scope was generally a headache; use a good JSHint to help mitigate issues.
Fault Tolerance: sometimes http requests fail, resulting in a black screen. Attempt to load everything up to 3 times; test on a server that behaves in a faulty way; include heavily delayed responses as well (up to 500ms latency)
In many situations, execution is dependent on content being loaded, such as menu screens. Wait for / chain onload events.
Decision to launch only on Chrome makes sense in order to deliver a high-quality game in a timely manner. Pick two: browser reach, quality, or cost.

Q & A

Is using WebGL Overkill?

We used WebGL because it was an easy port; our existing game was built with OpenGL.

During the development, did you feel like WebGL was the best choice?

Because we were porting the already aggressively-optimized OpenGL game built for iOS, the performance was already excellent.

If you didn't have the original code in WebGL, would you still use WebGL?

It's all about the context of your project; if the original game wasn't in OpenGL, we would have probably spent time testing canvas, and looking closely at the markets and seeing what browsers could run WebGL. It would have been a more difficult decision.

What three things did you take away, that you wish you knew before you started the project? Also, what can do we do to not have to compromise so much on the reach-quality-cost triange?

We need more compliance between browsers. Features like audio have to conform to the lowest-common-denominoator between the platforms you're targetting. It would be great if everyone had the same standards; that was a huge stumbling block to getting it on more browsers. Having browsers that auto- update would be useful as well, so you know where users are at. As far as some takeaways- I wish I knew server management was as time-consuming as it was for us.

Was the caching issue with game assets, or something else?

Yes, that was about using the appropriate server headers so that I only have to download if I have to.

Is audio your biggest issue?

It is. We want awesome, synchronous audio in all browsers.

SONAR - WebGL, JavaScript, and Gaming by Sean Middleditch and Jason Meisel

November 1, 2:15 - 3:00

Slides

SONAR is one of the first complete HTML5 games implemented with WebGL, targeting the Chrome platform via the Chrome Web Store. The first part of this talk covers the technical details of our development environment, including our engine architecture and asset pipeline, as well as the problems we ran into with the HTML5/WebGL platform and the workarounds we deployed. The second part is a classical post-mortem.

Engine Composition

Behavior composition - built so that there were few dependencies between behaviors, and behaviors could be stacked

Pass-by-referene - be careful of unintended references, where you may accidentally modify a value

Use Chrome Profiler to help find places for optimization, but test "optimizations" carefully

Avoid creating temporary variables to reduce garbage collection pressure

Keep in mind object typing in Javascript; when using the "+" operator, for instance. "1" + 1 = 11

WebGL

WebGL doesn't use plugins, mostly cross browser (not IE), hardware accellerated. SONAR was 2D, wanted to move to 3D, so went with WebGL

Pros

Easy to use
LearningWebGL.com
WebGL Inspector is awesome

Cons

No DirectX 10+ or OpenGL 3+ features
- Geometry shaders, etc
Debugging is difficult
- Bad error reporting

Javascript's Design

Not originally designed for real-time applications
Needs fast SIMD Math for graphics, physics, and game logic
Real-time applications
- Hard; only have 16ms per frame for calculations
- Garbage collector is a killer
- Dynamic VBO updates are inefficient
- Offload as much as possible to the GPU

Garbage Collector

Avoid GC at all costs
No allocation means no collection
Causes of allocation / GC:
- "new" is easy to spot and avoid. Don't use it if possible
- Object and Array literals are harder to avoid
- Creating new closures creates a new object; bad in loops
- DOM element manipulation
- Hidden things in 3rd party libs
Pre-allocate objects
Use Chrome debugger to watch memory
"private globals" by using a consturctor that returns an object which is a subset of the parent

Art pipeline

Make transition from blender -> game as easy as possible

Blender
- Pros
  - Free
  - Nice animation features
  - Extensive Python API
- Cons
  - Revision change lead to lack of documentation
  - Few pro artists are trained in Blender

Tried using both JSON and binary formats for files; binary was hard to work with in Javascript, and thus was not worth it. JSON was good enough and far easier to work with. Don't bother with binary until you're sending to the GPU.

Meshes were loaded into vertex buffer objects

Used animation JSON files for describing animation frames

Javascript was not integration-friendly; difficult to work with binary files, poor support for loading files from disk, difficult to get models into engine for preview

Should have used an intermediary format (FPX) for 3D models like, so that artists were not locked down to using Blender

html5, CSS, Canvas for 2D games

Assets need to be built for menus, debugging, editors, etc. CSS3 can be used for advanced animations for interfaces.

Rendering text in webgl is tricky; html overlays make it easy. Composite WebGL, html, and canvas together in layers.

Note: be wary of alpha on your webgl canvas. Also, moving 2D elements on top of WebGL can cause framerates to drop. There are simple fixes.

Editor / Content Creation Pipeline

Tile-based editor
Line-based doors, glass
Triggger zones
Entitiy placement

Having a seperate editor from the game made testing slow; an editor should have been built into the game.

Technology

Canvas for tiles
jQuery for UI controls
Seperate app from the game
Custom scripting
- Allowing javascript in game opens security (XSS) issues; better to hack together something

Web APIs for games

APIs that are on their way that are helpful:

Web Audio
- Chorus effects, 3d positioning, no flash
- w3 audio spec
FileSystem
- Store files locally, no cookies or lost data
- Filesystem spec
MouseLock
- Mandatory for FPS and useful for action games
- Mouselock api
Joystick
- Gamepad support
- Chromium Joystick api

Q & A

What gave you the inspiration to make it a papercraft visually-styled game?

It actually started as a graphics bug, where our charaters were flatfaced, and our designers really liked the idea.

Have you actually cut out any papercraft models?

We considered it, but we haven't had the chance.

Cross Platform Game Programming with PlayN by Lilli Thompson

November 1, 3:15 - 4:00

PlayN

Began as console developer, now a software engineer with chrome and PlayN advocate

PlayN allows you to compile out versions of your single-codebase game onto multiple platforms: write in GWT / Java, export to html5, flash, and Android. Used to be called "ForPlay".

--ed: You can guess why that got changed.

Angry Birds was written with PlayN; announced with "Kick Ass Game Programming With GWT" talk

Tries to solve the problem of picking a platform to port to; does the porting for you. Solves problems with html5 non-compliance.

GWT is a framework that focuses on removing unused code, doing compile-time checking of syntax, inlines, optimizaes, obfuscates output, and adjusts the code for browser quirks.

Uses whatever's best available: WebGL, Canvas2D, CSS 3; also abstracts audio.

"Service Provider Interface" structure - core platform, with platform-specific implementation modules. PlayN is not a game engine - it is a platform abstraction. You add game enginy things on top, such as Box2D. Components include the game loop, I/O system, and Asset Management.

Build game engine by extending PlayN-provided interface, which gives you access to the game loop / i/o system / asset management structures.

PlayN provides a way to access the local device for its resolution:

graphics().setSize(
  graphics().screenWidth()

  graphics().screenHeight()
)

Compositing Layers

Layer
- SurfaceLayer
- ImageLayer
- CanvasLayer
- GroupLayer
  - 1-n child layers

ImageLayer

High performance, render images and forget. Good for static images like UI, logos, overlays. Doesn't get added to scene graph.

CanvasLayer

Mirrors much of the html5 canvas api. Procedural circles, lines, points, etc. Slow, but can be optimized; make as small as possible, translate in place.

GroupLayer

Groups layers.

I/O Abstractions

Pointer
- General, non-specific input device; most widely available
Mouse
Touch
Keyboard

Cross-playform input: support things like touch-based zoom where available

if(platformType().equals(Platform.Type.ANDROID){
    touch().setListener( ... )
}

Asset Management

Resource management through the asset manager:

Image getImage(String path)
Sound getSound(String path)
// etc

Sound abstraction: html5 version uses web audio api where avilable via gwt-voices; falls back to flash.

Data Storage

Android local store, html5 local storage, whatever's available. Simple API that uses calls like setItem(key, value), removeItem(key), getItem(key). Includes JSON abstraction for storing / retrieving data.

Compiling to platforms

To compile, extend the class you're porting to, and use the platform-specific core objects. Centeral codebase lives seperately from platform-specific code, which passes in objects like HtmlStorage or FlashAudio as interfaces to the game loop.

public class MyGameHtml extends HtmlGame

PlayN for the Future

Framework allows easy extension to new platforms. Takes any Java-based library and can compile it down to all platforms.

More native input abstractions, better asset managmeent and audio featutes, integration with other products- in-app payments, other software ecosystems

Q & A

What happens when you don't support a particular piece of functionality?

It's open source, so if it isn't working for you, consider adding the functionality; that's available to you. Another option is to compile another project that imports the extra code."

What's compelling about this is that Java's a nice language. How do you do the compilation to, say, Flash?

It's different on each platform; it translates to legible actionscript, then compiles a swf. It compiles into obfuscated Javascript, so it doesn't work that way always.

What if your phone doesn't have a GPU?

We don't have set requirements; our default path is to compile to Android OpenGL. Android Canvas is available, but not as fast; I'm not sure if that is an option during Android compilation.

From Apple Store to CWS by Miguel Angel Pastor

Nov 1, 4:15 - 5:00

Slides

This talk covers our experience porting more than 7 iOS games to the Chrome Web Store. Topics discussed include: using Mandreel to convert C++ into JavaScript, using Google App Engine to host applications, saving data in the cloud, implementing IAP and Facebook Connect, differences between Firefox and Chrome, dealing with huge JavaScript files, and application caching.

Co-founder of Onan Games; small company (5 people, all engineers, no designers)

Began porting iOS games to html5 using a framework called andreel, which converts C++ / Objective C to html5 and flash. Targets all browsers, and the conversion process takes only a few days.

Published games (available in chrome web store)

Chrome web store options: packaged application, website

Chrome default max size: 5MB; installed apps have unlimitied storage

Can do synchronous loading with XHR

Application Manifest Cache

The manifest cache file lists resources for the app to load. Progress event is available to update user to download status for larger downloads.

To update new files, modify the mainfest cache file; update verion number. This reloads all the files.

App engine limits max file size to 32MB, so large files must be split.

FileSystem API

Only works in chrome; allows filesystem access within a sandbox. Request amount of storage, which the user can deny / allow, and allows you to create files and load resources asynchronously.

For performance:

Pack files into one large file for faster downloads
Compress with LZMA
Use XHR async loading
Store uncompressed data in FileSystem API
Keep uncompressed data in memory (not feasible for large games)

iOS games store game progess in internal memory; html5 apps can use localstorage. Another option is to use XHR to store progress remotely.

Can generate JS larger than 10mb; AppEngine can only handle 1mb. Load compressed JS via XHR.

Mandreel supports OpenGL ES 1.1, PVR textures; does not have fixed pipeline support. PNGs are best for textures.

In-app payments can be done through google IAP API

iOS uses OpenAL for sound. Started trying to load sounds with the html5 audio tag, but it doesn't work well with many simultaneous sounds. Web Audio API gives needed support. Flash is a fallback.

App engine issues:

Static files can't add custom headers
Max application file size is 150MB (use blobs)
- Check for "206" response code when pulling blobs
- Audio tags won't work properly

Q & A

With the issues you've had, if you went back in time, woudl you do it again?

Absolutely.

Extreme Mobile HTML5 Graphics Performance by Sam Abadir

November 1, 5:05 - 5:25

This short-form talk will discuss how to use hardware accelerated DirectCanvas to take games from 2 frames per second to 30. This will show you how to use DirectCanvas while running on mobile and deploy the same code to desktop browsers using the standard HTML5 Canvas.

Using DirectCanvas

Seperate:

DOM context (menuing, page layout)
DirectCanvas context (gameplay renddering)

Communicate between contexts AppMobi.canvas.execute() or AppMobi.view.execute()

DirectCanvas renders under the dom context, so dom shouldn't have background images, colors, etc.

Sound

Supports multi-channel sound

The End of Day 1

Day 1 of the conference is over; time to head next door for Microsoft-sponsored open bar.

Day 2 - November 2, 2011

Day 1

This is a live blog for the second official day of New Game Conference. I'll keep quick notes during the presentations, and clean up grammar / confusing structures during breaks. The Q & A sections are paraphrased. Any quotes will be signified as such. Please leave corrections and requests for clarification in the comments here.

Also check out #ngc11 and #bbg on irc.freenode.net

Also also check out New Game Conf Quotes

I've used images that people post to Twitter; none of them are mine. I've used small versions of the images and linked to the original posting.

Notes on Chromebooks

Non-US residents will pick up physical devices. US residents will receive vouchers to order Chromebooks, which will be shipped to your house.

Keynote by Paul Bakaus

Nov 1, 9:00 - 9:45

CEO of Zynga Germany, creator of jQuery UI, creator of Aves Engine; heads html5 initiatives in Zynga.

Zynga is the world's leading social develop; 232M monthly active users. Played in over 166 countries in 17 languages.

Paul started because there were no html5 game engines; nothing suited his needs, so he went out to create an engine.

Problem: game developers are way faster than browser developers.

html5 audio: no common codecs across browsers, audio playback is restricted differently across browsers (some don't have multichannel, some restrict what can start sounds to user actions)
Device apis still missing: camera, file system, etc. Google is working towards access with latest version of Android. 20 device APIs available for mobile safari, 1500 for native apps.
Debugging is difficult on mobile; good tools exist on desktop, especially webkit's debugger

Canvas, right now, is really only being used for charts and graphs. It isn't applied to much more content; many games in production don't use canvas.

WebGL demos look like old games; partially because hard computation must be done on CPU, in javascript. Another problem is that WebGL is a totally new language to be picked up; there's only really one big WebGL library, three.js.

Games that are too realistic (3d) have trouble appealing to the wide audience that 2d games do.

New good things:

WebSockets in iOS
Hardware-accelerated canvas
webkit-overflow-scrolling: touch

Theory 1: "good devs" don't want to learn html5 Theory 2: Companes are scared to ditch IE < 9 from their supported platforms

It isn't good to give people what they want on older browsers: they have no incentive to upgrade, and thus we are stuck with old, dead tech.

Try to come up with great new stuff that only works in modern browsers

Traditional game devs get people to buy new hardware, and web devs can't even get users to install free software.

Reminder: html5 was created as a markup language to create documents. Not games. The W3C and WHATWG historically had no members from gaming companies.

Web devs are seldom good game devs, and vice versa

html5 gaming is very painful but very fun.

What we need most is creativity; we have capabilities and need to stop being lazy. We need AAA game devs as well to not just port games, but invent new full-blown titles with html5.

Zynga's mission: connecting th eworld through games

Driving:

W3C Participation
Dialog with browsers
Open-sourcing things (github)

Open Source

Viewporter

Triggers native resolution whenever it can, and watches device orientation. Solves obvious-sounding but difficult problems with handling resolution / orientation. Handles dpi as well. Available for iOS and Android.

Scroller

Handles panning (not scrolling) for html and canvas. 100% event-driven; only logic, does not apply any translations. Supports DOM, Canvas, SVG, and WebGL. Scrolling, zooming, snapping, and more. Extremely performant.

Jukebox

Jukebox handles audio by dealing with sound sprites simple. Works around iOS and multi-channel constraints; can pause / resume background audio if there is a cosntraint around number of channels. Used in Zynga's production code

You have to be agile about development; techniques that helped performance years ago no longer do. For example, direct DOM manip is now faster than innerHTML, and inline styles don't cuser performance penalties.

Goal: hot swapping webgl / canvas / html

Let's work together to make 2012 the year of html5 gaming.

Diving Deep into Canvas by Grant Skinner

November 2, 10:00 - 10:45

slides

Dev shop was originally considered a flash development shop; was approached by Microsoft to see if they could build a fully html5 game for the IE9 launch. Built Priates Love Daisies, and had to build a lot of their own tools using canvas.

Talk will be about Canvs, and specifically 2D Context, and challenges and solutions; also, open-sourced lib EaselJS.

Canvas: html5 element specifically for dynamic drawing with multiple contexts.

3D context: WebGL 2D Context: vector, bitmap, and pixel graphics

Canvas is broadly available (~80%), including mobile; consistently implemented, even between browsers. Easy to learn; increasingly performant with hardware acceleration.

source: @ajacksified

Canvas Libraries:

EaselJS:

DisplayObject
- Shape
- Graphic
- Bitmap
- Bitmapsequence
- Text
- Container
- Stage
DOMElement
Ticker
..more

EaselJS isn't a game engine as much as a graphics library. Built to have good docs, as a generic visual-work-library, modular architecture for extended functionality, performant with minimal overhead, and open-sourced on Github with an MIT license

Canvas does not have anything for motion tracking. Some libs ignore mouse movement, use tiles, or overlay DOM elements. EaselJS tracks specific pixels for accurate movement. This is done by transforming everything to a flat system and manipulating pixel matrices.

Example:

daisy.onPress = function(evt) {
  evt.target.alpha = 0.5;
  evt.onMouseMove = function(evt){ ... }
}

Text in canvas is difficult; but, it can be overlaid with DOM elements which are good at handling text. The UI can be built in the DOM, the game engine in Canvas.

CSS transforms allow the same math to transform the DOM that transforms the Canvas.

Integrating web technologies, like DOM and web APIs, allow you to add more than what is traditionally possible with games.

Canvas performance:

Redraw only when / what is needed.
Choose a reasonable framerate. Consistency is more important than speed.
Minimize vector and text draws
Draw to offscreen canvases to cache, then pull in the static canvases into the main game canvas
Reduce total pixel count
Shadows are evil

source: @ajacksified

Desktop: Safari and IE9 have the best canvas performance; Chrome 14+ has hardware rendering, FireFox catching up

Mobile: iOS5 / iPad 2 is, by a huge margin, the best. iOS 4, Galaxy Tab 10.1, Playbook is far slower.

Oft-requested features for EaselJS:

Draw boundaries
Fast shaders for canvas(see css3 shaders)
quads / perspective / 2.5D (some kind of perspective distortion)
Drawing DOM elements
State introspection

Tools for canvas:

Sprite sheets: Zoe, Flash Pro "Reuben", SWFSheet
Profiling: browser dev tools, system gauges
EaselJS Export panel (export from Flash to EaselJS / Canvas)

Many display options:

SVG/DOM: ill-suited for interactive, performance-depenent games
WebGL: Fast, but new, and steep learning curve
Canvas: Ubiqutious, consistent, but lacks tools

Future vision: non-display-dependent. Single API for WebGL, Canvas, DOM.

Q & A

How are you driving all of the animation?

You have three options; setinterval, settimeout, and requestanimationframe. We use settimeout or requestanimationframe; RAF is usually said to be more performant, but we've seen the opposite.

The State of HTML5 Games in Asia by Robert Van Os & Chen Qi

November 2, 11:00 - 11:45

This talk will discuss markets in China, Japan, and South Korea. Spil Games is the first company to launch HTML5 mobile games in China and Japan, and we have extensive experience with daily operations and customer feedback. We'll discuss how HTML5 games make money in Asia -- and yes, they do make money! We focus on mobile, and we'll cover lessons learned from HTML5 mobile games.

source: @ajacksified

Traditional game stores, iOS market, Android market limits distribution. html5 provides distribution opportunities. Users don't care what technology something is built in; they just want to play.

Company overview for spilgames: spilgames is a large-scale distribution platform with a focus on age-based audience; teens, girls, and family. 140M uniqe visitors a month, 19 different languages. Targets localization as part of the core game experience.

85M of the 140M users are female
2.5B page views / month
In companies:
- #1 in Brazil, Mexico, Indonesia, Argentina, Poland, Italy, Columbia, and Sweden
- #1 in US for female game players
Split fairly evenly across continents
First company with html5 mobile game portal
Not a social network - socially available. Share high scores, achievements, etc across social networks

Asia

Focuses heavily on html5 on mobile. Two parts: game portal, and distribution network. Partners with local social networks like Baidu, Tencent. This allows for a much larger distribution. Was the first html5 mobile game portal in China and the first html5 game application in Mixi, the largest social network in Japan.

Co-founded html5 dev community in China; 40k developers

Huge number of mobile users in China;: US has 295M mobile users; China has 900M

China has much smaller 3G penetration; Japan and South Korea has good penetration (Japan about the same as the US)

Smartphones rapidly increasing in South Korea (40% of phones), Japan (10%) and China (4%). In 2015, 200M of phones will be smartphones. Japan will have over 76M. This means a huge potential market.

Interacting with local social networks is crucial for html5 games; Facebook is very unpopular in Asian countries (blocked in China); small userbase in Japan, South Korea, etc. The top local social networks support html5 apps.

From 2005 to 2009, microtransactions grew heavily as compared to purchasing software up-front. The market for virtual items is huge; USD$1.3B in sales on the DeNA network, $1-2B on Facebook, $0.6-1B on Zynga.

In Japan, there are more mobile users than PC users.

ARPU in Japan for DeNA network is 15x that of Zynga. Wow. #ngc11 source: @kentquirk

Regulation can be an issue - China has the "Great Firewall", which can make using cloud services difficult (or impossible.) You have to host your game from within China, with regulated licensing. Most sites are blocked by default in China; you have to have a license number on your website.

In order to deal with Korea, you also have to conform to Japanese regulations and deal with strict content regulations.

You can use a communication service, but it can cause communication issues; speed of development and communication can become an issue. It's easier to have a local presence.

Best Practices

App Discovery

Don't just bet on an app store; be everywhere!

Only have one substantial Android market (the Google market; alternatives such as the Amazon market exists, but splintering is an issue)
Huge Android market fragmentation
Apple has substantial userbase
Restricted open web; business licensing, government restrictions; many users use start pages to begin with. Advertising can be done on these start pages, but cost ramps up heavily over time. This is why owning your own portal is key to success.

--ed: like old AOL's start page?

Payments

Western: local payment methods, mobile payment methods like SMS, Offer-based to target groups
Eastern: Credit cards unpopular (but rising); SMS payments popular

Audience

Localizing is more than just language; but also cultural differences.

In China, users may want to harvest rice; in Ireland, users may harvest potatoes

Keep time zones in mind; peak hours for users is different. 4pm in China, where users play at the end of the work day; 7pm in Japan, where users play once they get home.

In Western cultures, you can usually get away with games in English in non-English countries (France, Spain, etc.) because most people understand English. Language is much more fragmented in Eastern markets.

Tips

Compatibility issues exist, but as Android upgrades come along, it gets much better (specifically with Android 2.3.
Lots of difference between iOS and Android; find a balance between functionality and user experience. For example, multi-touch in older versions of Android isn't available.
Android marketshare in Korea is 70% (10M); smaller but growing in Japan and China (5% [5M] and 2% [20M])
Chinese and Japanese users are used to playing games in portrait mode
Many users play games as convenient, with one hand (on the train, etc.)

Still some challenges:

html5 audio
canvas performance
saving data traffic for users
browser adoption is high, but user adoption of new browsers is low

spilgames Offerings

Global infastructure platform
Feature detection API
Localization support
Authentication
Payments
Hosting
Social graph (Friends, events, notifications); can cross-post across social networks

Q & A

In 2011, are you seeing more Facebook penetration (in comparison to existing networks like Mixi?

No. It's not taking over nearly as rapidly as other networks we've seen.

Lunch!

Nov 2, 11:45 - 1:00

source: @ajacksified

Porting Emberwind to HTML5 by Erik Moller

Emberwind is a platform game published on Win/Mac/iOS. This talk is the story of how Erik Möller took its 100,000 line C++ code-base and turned it into an HTML5 game running on desktop, mobile and even TVs!

Links:

source: @ajacksified

Twitter poll, checking who here is:

Traditional Console Developers (a few)
Traditional PC Game Developers (a few more)
Traditional Web Developers (most)

I used to work at this company where we had this one web developer, and we used to laugh at him.

Web developement was a totally different set of skills from game development.

AAA titles saturate both GPU and CPU; unlikely to see AAA titles in html5 soon due to the level of abstraction for html5.

Goal was to convert Emberwind to html5, totally flash-free. It's valuable for Opera to develop an application with their own technology, just like a game console company would never build a console without testing it out with their own software. It also helps find bugs, and determine what needs to be optimized.

Emberwind has been tested in IE, FF, Chrome, Safari, and Opera; on mobile, Opera, Android browser, and Safari. It's open source on Github.

Emberwind has an in-game switch between canvas and WebGL, allowing testing either easily. Canvas renders in an off-screen buffer to emulate some WebGL features, so performance suffers somewhat.

Emberwind has 8 audio channels. To make this flash free, sound sprites were used with multiple audio tags. Worked for Emberwind, which was fairly simple; looking forward to Audio API.

Built-in debugger that shows canvas layers being built one-at-a-time. WebGL was far more efficient than Canvas, and can draw most of the screen in a single draw call; this was made easier by using texture atlases.

Lessons Learned

Porting javascript was easy.

--ed: probably because Javacript rocks.

Time invested in tools for the rest of the team was a good investment. The designer was able to go away for a couple weeks, and return with a mostly- completed game. But do this pragmatically - particle effects were easier to hardcode.

Reduce draw cals and state changes as much as possible.

Cheat where possible: all that matters is the end user experience. Estimate physics using spheres for all the things. (Assume a spherical cow...)

Texture atlasses == CSS Sprites

New Demo: 'Odin'

WebGL game with lightmaps, normal maps, animations, skinning, shadow maps, and shader preprocessors
Works with COLLADA source assets
Open source on Github

-- ed: the pictures don't do it justice; very smooth-looking 3D asset loading and editing.

Took a video; not the best quality, and not very long, but you can see how smooth the animation is.

WebGL allows you to specify vertex indeces; but Windows has performance issues.

A & Q

Have you looked into shader preprocessing?

Not yet; I thought ours was a simple approach, bt I'm sure that there are better alternatives to what we used. If anyone has any suggestions, feel free to file bugs or fork the Github project.

How easy or difficult was it to use your art asset pipeline?

I had a couple of issues with COLLADA initially; the support is somewhat spotty, unless you're using a plugin. But, exporting to COLLADA and running a python script to output assets was pretty easy. It'll be easier once we get runtime conversion in.

The Odin demo, are you doing the animation in Javascript?

Yes, that's done in Javascript; some of the devices like set-top boxes can't handle too much work in the shaders.

You had 36k triangls in the Odin demo; what's a reasonable scene size?

There is a lot of difference in performance between the set-top boxes, mobile phones, and desktop boxes; it depends on the platform you are developing for. Javascript doesn't make much of a difference in performance; the layer is thin between the javascript and the driver.

Can you discuss the specs of the set-top box your Odin demo was for?

I'm not sure.

What was the process like converting from the 100k lines+ of C++ code? Was it automated?

It was all manual; we had the C++ source on one screen, and Javascript on another. It took three unexperienced interns two months to port everything.

When will Opera Mini (Mobile) have WebGL supprt?

All of the technology is made in core, and trickles down to the platform team; it will be in Opera 12 for the desktop, and will make its way down.

Using Google Closure for Lean and Mean Javascript Projects by Richard Anaya

November 2, 2:00 - 2:45

@richard_anaya

Creating high quality optimized code in javascript has many challenges. Why not have a powerful tool by your side? This session will teach you about Google Closure: a powerful set of tools from Google to help make large javascript projects ( like game engines! ) easy to manage and optimize. We'll be talking about code optimization, localization, templates, and documentation.

How do you build a large project with quality code that is maintainable over time?

We're trying to figure out how to use modern technology; modern compilers, design patterns. We're trying to bring large, bold ideas to the web with code that is increasingly complex; and we want to be proud of clean, elegant code.

Javascript

Good
- Speedy
- No types; dynamicness lends to rapid development
- OOP through prototypes
- Cross-platforms
Bad
- No types; less compile-time checking
- Inconsistencies across browsers
- Little help for organization --ed: RequireJS / AMD?
- Code is an open book; minifiers only help so much

Google Closure

Closure is a production-ready collection of tools:

Closure Compiler
Closure library (jQuery-like library)
Closure templates (high-performance templates)
Closure Linter (style checking)

Collection of tools to help make consistent code, and gives the user the absolute minimum needed to run an app.

Optimizations

The compiler helps concatenate dependencies and minimize unused paths to send to the client. Closure compiler reads the code to find its intent, to optimize execution paths and remove dead code.

Typing

Closure also figures out intent of code to provide type-switching for strings / integers (to avoid 1 + "1" = 11 type issues)

Templates

Template files are written seperately, and Closure reads these files and can quickly parse and return formatted text. Helps seperate language from templates for internationalization. Give template sections the desc attribute, and the closure compiler outputs XML files that can be localized.

{namespace template.typerunner}

{template .instructions}
  <h1>{msg desc="TypeRunner}</h1>
{/template}

Compiler Tips

JSDoc your code often; add comments to classes / methods
Look at Closure Library for examples for everything
Follow the Google javascript guidelines
gjslint early and often
Test in advanced mode often

Using closure

Expose compiled code publicly using exports goog.exportSymbol('typerunner.TypeRunner') allows you to define externally- usable things (to the window). Also, "externals" define what symbols should not be renamed during compilation.

The gdream: turning good habits and quality code to well-optimized, obfuscated code.

Q & A

I found myself using uglifyjs because I wasn't willing to buy into some of the exports paradigms.

There are some minification and truncation things you can do at the local scope; but there aren't a ton of advantages of closure over other systems if you're just compiling your code with simple compliation. You'll want to use the other Closure offerings to really get the most out of optimizations.

How would one use Closure with unit testing systems?

Within the Closure compiler, there is a unit testing framework; if you're looking to using all Google libraries, you can use the framework within Closure.

I come from using RequireJS; the workflow is build code, optimize, then minify; can you run the Closure code without compiling anything?

You can run the code, if you run using a harness that includes the Closure libraries, but it's meant to be run as compiled. We do this to try to make browser testing easy, as you'll only need to include a single file. Compliation is very quick. The Compilation is good practice.

I've got a large project in javascript already with a bunch of jsdoc annotations; running it through Closure, I get a ton of warnings. What would you recommend to how I could produce my old documentation extensions to use with Closure compiler?

People have gone into the Closure code and done their own modifications to the compilation process; I'd recommend using the Google Closure linter and go step- by-step over your code to see if everything follows Google standards. I personally haven't done much modification there, but there are people who have.

Prizes and stuff

People got free O'Reilly books, Windows phones, and announced the winners of the New Game Conf coding contest.

An Initiative and Framework for 3D Gaming with HTML5 by Alan Kligman and Bobby Richter

Nov 2, 3:00 - 3:45

Mozilla Paladin

Presentation Slides

Paladin is an initiative by the Mozilla community at the intersection of 3D gaming, JavaScript framework and library development, and the browser. We're tied into the bits of the web that are up-and-coming, and intend to weaponize them for gaming. And where the web is missing critical gaming support, we aim to fill those gaps.

Three pieces are already spinning up: a framework written in JavaScript to support 3D gaming in HTML5, a first game to help drive development of that framework, and a web joystick API for Firefox. The framework currently offers 3D modelling via CubicVR, physics by ammo.js (a cross-compilation of Bullet), loading via require.js, and sound. More subsystems are likely to be up and running by the time of this talk, where I'll review our goals, progress, and opportunities to get involved.

Started as the demo Flight of the Navigator to push forward

FF Audio Data API
WebGL
Emscripten
JS Enahancements
Processing.js, Popcorn.js

Paladin aims to "weaponize" the web platform for 3D gaming by collaborating on tools, libraries, and open standards.

Gladius

Game engine writen in js / html5. Relies on libraries for graphics and physics; graphics provided by CubicVR.js, and physics provided by ammo.js. Built to encompass modern game engine design; modularity allows replacing chunks of functionality through interfaces. Also provides an entity component system, allowing developers to compose packages of components and extend the engine for specific games.

CubicVR.js

Demos

Written along-side three.js; has grown into its own 3D engine, seperate from but used in Gladius.

Asset pipeline: use Blender for modeling / animation, with COLLADA export with scene data in XML / json.

RescueFox

First game prototype; quick and dirty demo, uses CubicVR.js and ammo.js. Helped to figure out how to interface with APIs.

Supporting APIs / Frameworks

html5 api spec for gamepad support
BrowserID
Mouse-lock API
Upcoming: Node editor for animations / composting

Getting involved: * Paladin Wiki * #paladin on irc.mozilla.org * paladin-dev on Google Groups

@alankligman (Alan Kligman) @secretrobotron (Bobby Richter)

Q & A

What are the biggest gaps you see in the WebGL API that prevent you from getting games ready?

We've been making do with what we have available today. There has been some noise about compressed textures, but all of CubicVR runs really well. We haven't seen any big gaps; things like compressed textures are nice to have, but WebGL is great for its 1.0 and I'm looking forward to the next revision.

Web Audio API and other new features by Rachel Blum

Nov 2, 4:00 - 4:45

Slides

There are lots of cool things in HTML5. Even better, there are lots of cool things being added to HTML5 and Chrome all the time, quite a few with a focus on games. This talk is going to showcase some very recent and still-in-progress features, including a long look at the Web Audio API.

Goal: develop on single platform. Moved to Chrome for the ability to push forward standards and help make html5 better.

Good resouce: caniuse.com

Graphics, physics improving rapidly; WebGL is pushing 3D graphics forward.

WebSockets allow low-latency, full-duplex UTF8 communication to servers for realtime apps / games. Chrome 15 now supports binary, and UDP is being discussed for WebSockets.

The asset pipeline is being improved with WebStorage, indexedDB, File API, and Application Cache APIs.

File System API gives you a local, sandboxed filesystem to cache files such as binary blobs; is Chrome-only, but hopefully will be adopted by other browsers. It caches the entire app locally; is beneficial so that assets don't have to be loaded during gameplay.

Add Cache Manifest file to specify files for caching; also allows fallback files in case user is disconnected. Chrome allows debugging cache through about:appCacheInternal. The Javascript console can also show what has been cached. html5rocks is a good resource.

New Things

Page Visibility API: detects if a user has the page in focus, to allow things like pausing
Fullscreen API; allow fullscreen, chromeless apps; Chrome 16
Connection checking API; ability to detect if online or not.
requestAnimationFrame; allows better synchronization with CSS / SVG animation, browser doesn't render if page is not in focus
Web Audio API; low-level audio API

Web Audio API

Previously had <bgsound "something.mid" > and <embed src="stuff.wav">

Now have audio, but:

Codec support varies across browsers
Latency issues
Glitches
No effects, filters, or other low-level manipulation

When developing a low-level audio API, had many constraints:

Don't want to use javascript, which is busy doing other things (app logic)
Audio processing is more suited to CPU than GPU; many CPUs have audio processing functions built-in. Also, not all devices have a GPU.

Desired features, built into the Audio API

Long sounds can be streamed through an audio source
Javascript source nodes; you can generate wave forms in javascript
Sample-accurate scheduling
Gain control; allows cross-fading between channels
Filter effects; low-pass, high-pass, band-pass, low shelf, high shelf, peaking / EQ
notch
allpass
DelayNode for chorus effects
DynamicCompressorNode for control / sweetening of the mix
AudioPannerNode gives 3d positioning of sounds
ConvolverNode, provides room ambience and other special effects
Node Graph - doppler effect

Behind the Scenes

2008: early prototype built based on OpenAL
2009:
- June: API design, find limitations of OpenAL, look for good design for the web
- September: Webkit & js bindings, demoed together with Box2D
- December: continued design work, presentation with Apple WebKit team
2010:
- January: initial web audio integration; decisionon was made that web audio work should be done on seperate branch
- May: Audio incubator with Mozilla Audio Data
- September: redesign & refactor, merge approval with WebKit
- Late 2010: merge with main webkit branch
2011:
- Early:
  - W3C Audio Group
  - Chrome 10: OSX Web Audio behind a flag
  - Lots of porting
  - Chrome 12 brought on Windows and Linux
  - Plink and ToneCraft
- Late:
  - September: Chrome 14 exposes Web Audio by default
  - October: AudioJedit, sample editor in html5 w/ Web Audio API
  - October: Apple enables Web Audio in nightlies

Participation

Participate in W3C Groups
Write your own code
File bugs (crbugs.com)
Talk to Developer Relations

Upcoming Features

Mouse Lock

Why so long?

Time to first draft: June 2011
W3C spec & discussions
Coordination between WebKit teams
Security implications, defining user experience
Permissions UI

Joystick API

W3C Draft Spec
crbug.com/79100

WebRTC

Plugin-free high quality real-time voice / video communication in the browser; BSD licensed

Features:

Echo cancellation
Voice Engine
Video Engine
Peer-to-peer connection stack

Resources:

Other Stuff

Orientation lock - lock phone screen position
Hardware Feature Detect
High-performance timers
In-app bug reports (crbug.com/83642)

Q & A

You mentioned that indexDB isn't suitable for putting in large binary assets; why's that?

Let me rephrase that: you can do that, but it seems like it's overkill. You don't need a transactional database to hold game data. I don't have any performance numbers, but it seems like it would be slower than raw file access.

I'd like to hear a little more around your thought process around the variability of hardware, and how performance is managed. PC games have come up with some solutions, like minimum specs. Can we use that model?

I think we can do some things, but we can't actually spec out what exactly you would need to run a web app. The amount of devices is so vast that any specs are unlikely to be accurate. You might be able to say what features you support, that a device needs to support those features - but not a hardware performance requirement.

A Realization

2011-10-29T00:00:00-07:00

So, I was looking over the work that "I" did- why I put "I" in quotes will be revealed- putting together this blog and I was completely blown away by the complexity that occurs just to display a simple html and css file.

Here's how it's all structured:

Github hosts code that is
Parsed by the Jekyll templating language which
Compiles and aggregates posts written in Markdown that include
The html5 boilerplate, which itself is worthy of several blogposts, because it contains all kinds of other javascript and css frameworks. But I also included
Twitter's Bootstrap css template which is
Passed back down through http to your browser

The sheer amount of engineering effort that has preceeded me to create this structure is staggering. Each step of the way includes countless man-hours of effort put into each system, and its subsystems, by people all over the world. And not only that, but the whole technology stack (save bits of the hosting) is open source, even down to the http protocol and, chances are, the browser you're using. It's all pretty incredible.

To hop onto a tangent, I also find it pretty fascinating that even with this vertigo-inducing complexity, its interface with me, the human, is quite simple. Writing this post as as easy as banging out some text in my favorite text editor, vim, in a nicely human-readable markup, Markdown, and I run two commands to publish the whole thing on to the internet, onto this massive tower of complexity.

Need to stop before I start thinking about the complexity down to the hardware layer, whereupon my mind melts.

Finished converting from Wordpress to Jekyll

2011-10-28T00:00:00-07:00

I'm writing this post in vim, using markdown, and in a minute I'm going to publish it by using "git push" in iTerm. How cool is that?

It took a little work converting my old Wordpress blog over to Jekyll- long enough that I'll have to save the "how" post and the "why" post until later- but ultimately satisfying.

#bbg

2011-10-04T00:00:00-07:00

I've recently joined a community for browser-based games developers. I've had to fire up IRC for the first time in a while, but IRC has that kind of nostalgic hot-chocolate-by-a-snowy-window comfortable feel to it, doesn't it? Well, that might just be me, I don't know. But, at any rate, there's always a good conversation going on in the IRC channel or in the forums, so if you're interested in browser-based-games development, it's definitely worth checking out.

The IRC channel is #bbg at irc.freenode.net (web client here) and the forums are at community.bbgamezone.net. One of the members also maintains a list of games that some of the members have / are developing at fleetingfantasy.com/game-list.

Mediator.js 0.6.0

2011-09-15T00:00:00-07:00

Yeah, so, I skipped a version number again. Version 0.5.0 is a pretty hefty update, followed by 0.5.1 and 0.6.0 (which are quite a bit smaller.) Here's what's new:

0.5.0

Subscribers are now a real object instead of an anonymous collection of data
Contain a guid for an id for access later
Update function that allows you to modify its function, options, or context after adding it
You can change subscriber's priority (as an index with the other subscribers within your channel), so if you want one to fire first, you can do so either as an option on Subscribe or later using Mediator.SetPriority(id/fn, <channelname>). Channelname makes this run significantly faster, but is not required.

0.6.0

Channel is returned at the end of the data arguments for callbacks. Within a callback function, you can run channel.StopPropagation() to stop further subscribers from being notified.

There's probably a significant amount of cleanup left to do on it, but I think it's fairly fully-featured, and it's unit tested pretty solidly.

The latest is up on Github with an updated readme file that explains how to use everything.

Mediator.js 0.3 and 0.4

2011-09-13T00:00:00-07:00

(Skip to the jsfiddle if you'd like to see a live example)

I made some changes to Mediator.js which were originally going to be in 0.3, but just as I was about to push an update (the update being "assigning predicates to channels"), I decided to to go ahead and implement namespacing. You can now subscribe to things like "application:chat:receiveMessage" directly, or subscribe higher up on "application:chat" to receive everything under the namespace. Callbacks are applied recursively. Subscribing, publishing, and removing all work recursively with namespaces.

It was an interesting engineering challenge to turn "x:y:z" into Channel[x][y][z]; the transformation was pretty simple, but there's still something in the back of my mind shouting that "there's a better way to do this". Right now, it loops through and generates new Channel objects until it runs out of the split string's index, as such:

var namespaceHeirarchy = namespace.split(':');

if(namespaceHeirarchy.length > 0){

  for(var i = 0, j = namespaceHeirarchy.length; i < j; i++){
    if(!channel.HasChannel(namespaceHeirarchy[i])){
      channel.AddChannel(namespaceHeirarchy[i]);
    }

    channel = channel.ReturnChannel(namespaceHeirarchy[i]);
  }
}

Some of the method signatures have been changed so that things make a little more sense; Subscribe now uses (channel, callback, options, context) where it used to use (channel, callback, context, options). It didn't make sense having callback come before options (especially as options are more likely to be used than context.) Options now holds the predicate (if there is one), rather than using the predicate as a channel. And as always, we have no external library dependencies. The minified/gzipped library is up to 580 bytes now, over my goal by 80... version 0.4.1 may be tweaked to get us back under that limit.

An internal change is that Channel is now its own object with AddChannel, AddSubscriber , Remove, Publish, HasChannel commands, which makes it easier to nest channels in channels and tack on callbacks without losing track of context. It's all only used internally within Mediator (and, of course, all tested.)

The latest is up on Github with an updated readme file that explains how to use everything. I've also updated my example on jsfiddle with the latest method signature changes.

Steve, the Framework: or How Not to Get Caught Up in Details During a Discussion

2011-09-09T00:00:00-07:00

We had a several-hour-long code-review-turned-meeting a few days ago. Generally these are accompanied by much groaning and frustration- but, this particular meeting was extremely productive. The discussion was over various UI technologies we're using, and what direction we wanted to head in.

At one point, we started discussing how we handle data persistance, and the potential for a piece to fit in to translate javascript models from our UI into data persistance objects for the server. One team member casually mentioned that Steve- by which he deftly named the persistence layer- would handle the translation by (..trail off into technical discussion.) From that point on, we called the persistance layer Steve.

This lead me to a thought today: although it seemed so simple at the time, giving unknown object / function / class library / thing an arbitrary name that we could refer to later in the discussion was a great move. It allowed us to move forward without getting lost in a long and tedious discussion on what to call it, because what was important was the idea of Steve, not the implementation. What could have been an additional hour added into the meeting was saved, thanks to Steve.

Mediator.js v0.2

2011-09-06T00:00:00-07:00

Source: Mediator.js

Original post: Mediators for Modularized Asynchronous Programming in Javascript

As I was reading Addy Osmani's excellent post Patterns For Large-Scale JavaScript Application Architecture, I came to the realization that I had made some past changes to my own Mediator.js library, but had failed to both upload the changes to Github and use some of the tricks I've picked up since originally writing the library. So, version 0.2 is out, with the following changes:

API changes
"Subscribe" in place of "Add"
"Publish" in place of "Call"
Subscribe now takes a context object, to allow you to pass in what @this@ should be when the callback is called
Mediator no longer forces you to use it as a singleton
No longer looks for "type" as part of a data object; rather, uses channels to sub/pub
Code a whole lot cleaner; objects to pass around subscriber info rather than numerically-indexed arrays
Passes arguments you pass into publish onto subscriber callbacks, rather than a data object
Example:

var m = new Mediator(); m.Subscribe("test", function(arg1, arg2){ console.log([arg1, arg2]); } m.Publish("test", "arg1", "arg2"); // output > ["arg1", "arg2"]
Meta changes
Tests are now "real" tests, using Jasmine
Updated Readme file to reflect new information
Added minified js (and under 500 bytes, too)

I think the main difference between this and most available and/or roll-your-own Mediators is the predicate matching, although that may also be what makes this more / different than a traditional Mediator. Mediator+? A meatier mediator? Meatiator.

Anyway,here's an example on jsfiddle. Try chatting, and using the same name for the from/to fields. Shows predicates, subscriptions, and removing subscriptions.

Crafty.js Presentation at the San Francisco GamesJS Meetup

2011-08-28T00:00:00-07:00

A couple weeks ago, I did a presentation for a brand-new meetup group called GamesJS, an HTML5 game development meetup in San Francisco. We did a few lightning talks, followed around by general hanging-about-and-finishing-the-remaining-food. Another talk was on Spaceport a game engine built for performance that uses javascript and vector-based graphics in an Actionscript-like API (allowing easy ports from existing AS3 code). The game logic is written in javascript, while the graphics processing is handled by whatever's fastest and available - native code for iOS, WebGL for Chrome, etc. His slides are available on the GamesJS site. The third and final talk was on Google PlayN, Google's GWT-based engine that is built to allow you to write your game in Java, and export to various platforms, such as a native Android app, html5, and even flash, with as little change as possible. Her slides were also available online.

My slides are a short dozen that walk you through the creation of a really simple Crafty game by example. It shows how to set up the canvas, instantiate objects, create and inherit classes ("modules"), animation, and collision. All of my sourcecode is up on jsFiddle.

XCode 4.1 on Mac OSX Installation Trouble (fix)

2011-08-17T00:00:00-07:00

I upgraded to OSX Lion, and decided one day to use homebrew to give a package called git-flow a shot. The installation failed with a somewhat cryptic message, but suggested running "brew doctor" to find out what was wrong. And, indeed, XCode was gone from Lion - it was on my previous Snow Leopard installation, but failed to carry over. "No big deal," says I, "a simple reinstall."

Wrong.

The trouble started when I found out that you have to download XCode from the App Store. "Ah," says I, "I guess this makes sense, they want to push everyone through the app store. Annoying, but whatever." And so I download the 3gb-ish file, and the App Store cheerily let me know that it was, indeed "Installed." I tried brew again, and no dice. Apparently all the app store downloads is an installer. So, by "installed", it means "downloaded installer, but nothing's actually installed." And so, with great joy, I clicked "Install XCode" from within the applications folder.

Nope.

After running for a few minutes, it failed and suggested looking at the log, which, after several thousand status messages, let me know that one of the packages failed to extract properly. After a quick Googling, I found that many other people had the same problem, and suggested re-downloading it; so, I did. This time a different package failed. The fourth and fifth installs failed, too. I tried copypasting it in other directories, tried opening the package and running the xcode package directly, and nothing worked. I hunted down and ran the uninstall script for the old version of XCode that was still hanging round. At last, I finally saw someone who brilliantly suggested:

sudo mv /Applications/Install\ Xcode.app/ /Applications/Install_Xcode.app
sudo open /Applications/Install_XCode.app

And suddenly, XCode worked!

Game Development with Crafty.js

2011-07-25T00:00:00-07:00

I was recently looking around for some examples in Javascript for an isometric proof-of-concept I'm working on, when I came upon Crafty.js">. It had some neat demos, and it was MIT licensed, so I got to work - and I was pleasantly surprised by the library. The documentation itself is a little lacking- and its official tutorial (at the time of this post) was using an outdated version of the library (which has had several breaking changes), but I managed to come across an excellent tutorial by "Starmelt" on GitHub that takes you through the process of building a simple game in Crafty. It introduces you to entity creation, the game loop, the eventing structure, and more - and once you're done, it's easy to add on to (for example, I kept a global high scores list, and added a "reset" button.)

Also, Crafty includes an isometric demo, which works once you replace "Crafty.isometric.init" with "Crafty.isometric.size" in the source code.

I recommend playing around with the code - it's very lean and flexible. It's definitely worth checking out if you're looking for a springboard into JS game development. Here's a few notes:

Switch between canvas and DOM with no code changes (besides telling it which to render in)
Claims to support IE6+
Easily extensible - build entities using interface-like structures
Seemed fast in the demos I was trying
Handles animations through tweening over the game loop (you can set the fps)
Mouse and keyboard events
Collision detection, dragging API
Hard-to-find documentation on available events and modules (it's possible that I'm blind, and am looking right past it, too)
MIT license
Excellent tutorial by Starmelt

Permission denied to access property object : Easy Fix

2011-06-09T00:00:00-07:00

Recently, I was working on an application using comet. To get around some issues opening multiple connections in older browsers (ahem, IE6), we injected an iframe using another domain into the page that hosted the application, which allowed more persistant connections.

The parent held details about the chat (username, other people online, etc.), which needed to be passed to the child. The trouble was, the child couldn't access properties of the object sent from parent, due to access restrictions - It would throw a "Permission denied to access property object" error in FireFox. This didn't matter if I sent in the object as a parameter in a method, or tried cloning the object - nothing worked. I could see the object, I could log the object, but I couldn't access any properties

After several attempts to get around this, I fell upon an easy and elegant solution: since I could access the object, just not its properties, I would encode the object as a JSON string and parse it on the client. Using
Douglas Crockford's json2.js, when sending the parent objects I encoded them as JSON using JSON.stringify(object). On the child, I did a JSON.parse(object) - and I had a fresh new copy of everything to work with. I could access everything with no trouble, as it's now an entirely new object.

Mediators for Modularized Asynchronous Programming in Javascript

2011-06-04T00:00:00-07:00

(jsbin / github / latest version)

Author's note: this probably doesn't match the Mediator pattern exactly, but it's the closest pattern I could find to what I had in mind. Also, check out the "latest version post" link at the top of this post to see the latest update.

As I was writing a simple chat application
for my websocket library, I caught myself doing a lot of this:

AlchemyChatServer.MessageReceived = function(event) {
  ParseResponse(event.data);
};

function ParseResponse(response) {
  var data = JSON.parse(response);

  if (data.Type == 0) {
    var message = data.Data.Name + ' connected!';
  } else if (data.Type == 1) {
    var message = data.Data.Name + ' disconnected!';
  } else if (data.Type == 2 &amp;amp;&amp;amp; data.Data.Name != me.Name) {
    ...
  } else if (data.Type == 9999999....)

So, while this works ok, as you can see, it gets a little... big over time. That's a lot of if statements to go through. That's a lot of dom interaction being called from the same chunk of code that's dealing with the messages. That's tight coupling. So, what happens when, say, we want Chrome to use
desktop notifications? Well, we're nesting more if statements based on data type. Maybe even copypasting this notification code several times. As we add more conditional logic, it gets heavier, and heavier, and heavier...

And that's when it struck me - there is a better way! What if I used an object that held functions in an array based on response type, and called those functions when I received a call with that response type? It would be fast, as an array lookup, and it would let me add any arbitrary amount of functions based on logic without having to tie it into a massive if/then statement. And, as an added bonus, we get a really easy method of testing our application without being connected to a server, by directly passing our Mediator object some mocked data.

I sat down and got together a little utility class that allows you to add methods based on data type (which we assume to be there. More on this in a bit.) I added a remove method that allows you to remove all associations for a given type, or to remove associations based on a type for a specific function that you've wired up. (Like the jQuery bind / unbind.) I finally added a Call method, which accepts an object. Easy and elegant.

And then I got thinking about ways to take it a step further. In our example chat application - what if I want different logic if it's a chat message with my username in it? If we allow our Add method to take a predicate as an alternative to a "type", we can now say things like:

Mediator.Add(DirectedAtMe, DisplayMessageThatIsToMe);

function DirectedAtMe(data){
  if(data.Type == 1 &amp;amp;&amp;amp; data.To == myUserName){
    return true;
  }
}

function DisplayMessageThatIsToMe(data){
  ...
}

So, I came up with this:

(function() {
  var Mediator = function() {};

  Mediator.prototype = {
    _callbacks: {
      Predicates: []
    },

    Add: function(condition, fn) {
      if (typeof condition === "function") {
        this._callbacks.Predicates.push([condition, fn]);
        return;
      }

      if (!this._callbacks[condition]) {
        this._callbacks[condition] = [];
      }

      this._callbacks[condition].push(fn);
      return;
    },

    Remove: function(condition, fn) {
      if (this._callbacks.Predicates.length > 0 & amp; amp; & amp; amp; typeof condition == "function") {
        var counter = 0;
        for (var x in this._callbacks.Predicates) {
          if (this._callbacks.Predicates[x][0] == condition & amp; amp; & amp; amp;
          (!fn || fn == this._callbacks.Predicates[x])) {
            this._callbacks.Predicates.splice(counter, 1);
            counter--;
          }

          counter++;
        }

        return;
      }

      if (this._callbacks[condition]) {
        if (!fn) {
          this._callbacks[condition] = [];
          return;
        }

        for (var y in this._callbacks[condition]) {
          if (this._callbacks[condition][y] == fn) {
            this._callbacks[condition].splice(y, 1);
          }
        }
      }
    },

    Call: function(data) {
      if (data.Type !== undefined & amp; amp; & amp; amp; this._callbacks[data.Type]) {
        for (var x in this._callbacks[data.Type]) {
          this._callbacks[data.Type][x](data);

        }
      }

      for (var y in this._callbacks.Predicates) {
        if (this._callbacks.Predicates[y][0](data)) {
          this._callbacks.Predicates[y][1](data);
        }
      }
    }
  }

  window.Mediator = Mediator.prototype;
})(window);

Wow, neat-o! So, as long as our "data" object contains a "type", we can call anybody who's registered to that type. We can also remove objects, either by typed, or if it's a named function, by passing in the function. (Note: anonymous functions won't work here.)

To see it in action:

function Test(){
    Mediator.Add(0, function(){ alert("Tested adding typed anonymous functions.") });

  Mediator.Call({Type: 0});
  Mediator.Remove(0);
  Mediator.Call({Type: 0});

  Mediator.Add(1, AlertMessage);
  Mediator.Add(1, LogMessage);
  Mediator.Call({ Type: 1, Message: "I am alerted and logged." });
  Mediator.Remove(1, AlertMessage);
  Mediator.Call({ Type: 1, Message: "I am only logged." });

  Mediator.Add(FilterMessages, AlertMessage);
  Mediator.Call({ From: "Audrey", Message: "This message shouldn't apear." });
  Mediator.Call({ From: "Jack", Message: "This message should ony appear once." });
  Mediator.Remove(FilterMessages);
  Mediator.Call({ From: "Jack", Message: "This message should only appear once." });
}

function AlertMessage(data){
  alert(data.Message);
}

function LogMessage(data){
  console.log(data.Message);
}

function FilterMessages(data){
  return data.From == "Jack";
}

There it is - I've only spent an hour on it, so I'm sure there's about a billion refactor points. But, here it is on Github. Feedback and improvements absolutely welcome.

Venturing Forth to San Francisco

2011-06-02T00:00:00-07:00

Today was my last day at Pillar Technology. I had an awesome time learning from the great people I worked with:

Tim Wingfield (@timwingfield)
Michael Kramer (@michaelkramer)
Rebecca Denning (@rebeccadenning)
Todd Kauffman (@toddkauffman)
Phil Jordan (@philipjordan)
Tyler Wymer (@twymer

I learned an incredible amount of time in the short time I was there, especially about Agile practices, TDD, proper spiraling of footballs, to blame Phil for everything, to embrace new technologies- even Apple, and how to pronounce "facade". That's "fuh-cade" with a long "a" and a hard "c". I've begun using vim for everything, I learned how to use Git, and I've picked up ReSharper and a finer understanding of development productivity.

I also, in turn, hope that I leave the team with a finer method of brewing coffee (fill the filter to the top, use fresh water, wash out the pot every time.) The proper times to do this are 9:15, 10:45, and 2:30.

As I move forward in my career to San Francisco, I'll look back upon this time and the knowledge and experienceI've gained, and I hope to retain these relationships.

And I'll continue to blame Phil.

Dynamic Pages with Perch CMS

2011-05-25T00:00:00-07:00

Perch CMS is pretty awesome. It's a CMS that stays out of your way as you're building, allowing you to handcraft html and css (rather than you having to trust that whatever you're using is outputting good and efficient code. It's probably not.) And it's absolutely worth the small licensing fee to save the amount of time you'd spend building a solution / hacking an existing solution.

A brief overview of how it works:

Drop the perch directory into your site root (if your site root is /var/www/herpinderpin.com, your perch directory will be /var/www/herpinderpin.com/perch)
Run the perch install
On your site pages, include a reference to perch/runtime.php
On your site pages, use perchcontent("this is a content block")
Visit the page
Edit the page content in the Perch administration area

It's easy! It's fast! And it's... extremely barebones! Exactly what I want, as someone who takes pride in my html & css. It has enough flexibility to create new "content" templates for your non-technical user to use from within perch, and enough simplicity to let you define how everything is rendered without having to learn a complicated templating system.

But, enough about that. Here's the real meat of this subject: how to create dynamic pages in Perch. It ended up being a lot simpler than I first thought it would be. You see, Perch doesn't create pages; it simply allows you to edit content on existing pages. So, if you have a 50-page site, and you want to move things around, it gets difficult. Note: this works because all of my pages have the same template. You can get fancier with your .htaccess or page file and have different page types based various parts of the requested url. I'm showing a simple case.

Here's how I solved my problem:

Create an .htaccess file that points all non-existing files to page.php

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ page.php?_route_=$1 [L,QSA]

Create page.php base template and define good / bad urls

$route = strtolower($_GET['_route_']);
//we'll make a list of valid pages
$validRoutes = array(
  "derp",
  "derp/herp",
  "derp/mcburp"

  "page-not-found"
);

if(!in_array($route, $validRoutes)){
  //if not a valid route, redirect to our custom 404 page
  header('Location: /page-not-found');
  exit;
}

include('./perch/runtime.php');

if($route != ''){
  PerchSystem::set_page($route); // <- MAGIC HERE
}

...

<section>
  <h1><?php perch_content('Page title') ?></h1>
  <?php perch_content('Main content'); ?>
</section>

<aside>
  <h1><?php perch_content('Adbar heading'); ?></h1>
  <?php perch_content('Adbar content'); ?>
</aside>
...

Saw that PerchSystem::set_page($route); ? Well, that lets us force the perch "page" so that we can fake it. Even though everything's loading from page.php, Perch sees "derp/herp" as the path, and in the content management, let us edit as if we were within that page!

We also check valid routes so by nefariousness or mistake, someone can't spam a bunch of junk urls, filling up your poor CMS editing screen.

An infinite number of pages, all spawned through a single page! Easy enough, right?

there is a Pages plugin, but it writes out all the files statically, and it's messy.

PHP 5.3.3 with MySQL on IIS7: Issue Solved

2010-10-15T00:00:00-07:00

Running Server 2008 - After following all of the normal install guides for PHP 5.3.3, I kept running across an error where the page would hang for about 60 seconds, and then give me a database connection issue. Strange indeed!

After struggling with this for a while, I came across an enlightening blog post that had a simple fix: remove the IPv6 definition for localhost, and everything was magical and happy and wonderful.

Open up your host file at c:/windows/system32/drivers/etc/hosts, and comment out ::1 localhost so it looks like

127.0.0.1 localhost
#::1 localhost

And problem solved.

HTML 5: Why and How

2010-08-10T00:00:00-07:00

HTML has been around for a while- since the original HTML spec designed by Tim Berners-Lee in 1990. In those 20 years, HTML has evolved to include new syntax, tags, and style, both in its original form as well as in branching to create the commonly-used xhtml format.

HTML 5 brings with it changes in syntax, loosens some of the tight restrictions of xhtml strict, and adds new tags, attributes, attribute values, and API methods. The goal of these changes is to make a more semantic, robust internet within which one may create web applications with a focus on accessibility and without the necessity to rely on third-party plugins for interactivity.

Benefits to Upgrading Existing Code

Existing code, written in xhtml transitional, or even HTML 4, works fine today just like any vetted code or framework. However, HTML 5 brings many benefits to both the developer as well as the end user.

More semantic markup using tags such as “section”, “aside”, “header”, “footer”, and “nav”
Developers can clearly see more clearly what different pieces of code are without having to fully understand a page or control within a website, and are thus less likely to make mistakes
Users’ browsing tools gain better ability to, based on content type, perform functions such as zooming or screen-reading, now that they have context
New media tags such as “video”, “audio”
Developers can now assign captions, pictures, and other pieces of useful data to video and audio which helps accessibility as well as gives users more information about the multimedia
No more reliance on 3^{rd^} party technologies like Flash and Silverlight for audio and video rendering
Support by popular mobile devices such as iPhones, iPads and Android devices
Metadata
- Metadata allows developers to classify blocks of markup as a data object. This allows users’ browsers and tools to parse this data; for example, classifying an event and adding that event to a Google calendar. Metadata also influences search results and provides additional information to users, where they can be parsed.
Standards-setting body is not owned by a profit-driven corporation
- Adobe could collapse, leaving us stuck with old, dead technology; the W3C is made of representatives from many organizations that acts as a governing body
Offline storage database allows you to set your application to “offline mode” and work, and save changes later
Browser-based drag-and-drop API, reducing need for a javascript-based solution
Geolocation API
New form input types: date, time, email, url, search, color
These will restrict and validate inputs for you (as implemented). Some will be new controls (date, time, and color) that will appear when you click on the input field; some do things like dynamically changing the keyboard layout, based on type, on input devices such as the iPhone and Android phones.
HTML 5 is designed such that old controls (such as an input with type “color”) work with browsers without HTML 5 support
HTML 5 is supported in Chrome, FireFox, Safari, Opera, and IE 9
Some elements will be dropped from the HTML 5 spec. These elements are: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u

Potential Setbacks to Updating Code

Time used in training developers and updating old code
No browser support in IE 6-8
Can be mitigated by a piece of Javascript code that “creates” the elements within the browser
Spec is not 100% locked down and may change during browser implementation
Browser differences can be mitigated by using a “reset stylesheet” that forces all elements to remain unstyled until specifically styled by the developer the same way differences are fixed in xhtml elements we use today in elements like “ul” and “body” which use padding or margin depending on browser
HTML 5 does not require the same strict markup that xhtml does, such as closing />, quotes around attributes, requiring attributes to have values, and requiring lower-case names and attributes. This can result in “ugly” code if standards are not followed.

HTML 5 Implementation

Implementing the technology can be boiled down to two steps: installing the “shiv” and reset stylesheet for IE, and using the new tags. However, in order to take advantage of these new tags, existing code should be updated where appropriate to use them. Some divs may be renamed to “section”, “article”, or “aside” tags; heading levels may change based on their position within sections; input fields may be changed to specify input type such as “email”. This work may be done as areas of code are refactored, or it may be done as part of an overall initiative to update to html 5 at once.

The benefit of updating as refactoring occurs is that the developer is already in the code, causing changes and testing to happen regardless, and upgrading some elements to the latest could piggyback as part of the project. However, a partially-converted project results and it may not be able to take full advantage of the benefits provided by html 5. Converting an entire project at once allows all benefits to be had, but causes an additional time sink that may be unavailable.

ASP.NET 4.0 Changes tl;dr

2010-06-25T00:00:00-07:00

ASP.NET 4.0 Updates - http://www.asp.net/learn/whitepapers/aspnet4

tl;dr:

Stuff moved from web.config to machine.config
More robust XSS checking and form post validation
More streamlined inclusion of Microsoft AJAX framework (UpdatePanels), and jQuery (which Microsoft officially includes now)
More control over viewstate
Built-in page routing for webforms (how MVC urls work, but now works with webforms. www.mem.com/contentdisplay/5123431 for example)
Setting client IDs on controls instead of ASP.NET building it for you
New Chart control
Project templates slimmed down
Better CSS styling on controls, option to not render tables around some controls (formview, login, stuff like that)
ASP.NET MVC2
Intellisense improvements

Tl;dr: tl;dr: Lots of little updates that will make asp.net better.

C# 4.0 Updates - MSDN C# 2010 Samples

tl;dr:

Dynamic binding; create objects and use methods and properties that may not exist yet on a “dynamic” typed object. This gets resolved at runtime. Upside: use non-type-safe languages and crazy voodoo magic where you don’t know the type. Downside: you only catch bugs at runtime. Use sparingly, but for awesome things. “dynamic” objects can literally do anything, as long as whatever it ends up as supports it. No lambdas on dynamic.
Tl;dr: magic, type safety is so 2009
Named and optional arguments; you don’t have to enter in your parameters in order, or even enter in all of them.
“string”- that’s lower-case, kids- is an object now.

Tl;dr: tl;dr: Dynamic programming is the key word. Also VB updates, but if a tree falls in the forest and nobody’s around to hear it, does anyone care?

ASP.NET 4.0 Breaking Changes - .NET 4 Breaking changes

tl;dr:

A bunch of stuff you can do to revert changes, so I dunno why they’re in the “Breaking changes list”. Read for details, sorry.
Stronger .aspx parsing, controls with random characters breaking stuff will break stuff. Our code should be clean, but needs to be looked at anyway.
Stronger request validation, so errors may occur on posts that didn’t previously. To revert, we can add a line in the web.config if it gets crazy. Definitely check pages with rich text controls.
Update your projects through visual studio to .net 4.0 so your web config doesn’t get borked. They support it, but it’ll make life easier.
A bunch of troubleshooting options

tl;dr: tl;dr: More stuff, almost definitely won’t break existing code we have. Double-check pages submitting HTML (rich text areas.)

tl;dr: Better standards, MVC 2, Dynamic typing, stronger parsing and validation

HTML5 Site – Waterford Family Bowl (Part 3 of n)

2010-05-04T00:00:00-07:00

(Back to beginning of series)

Part 3: Site Architecture Design

Now that I had the majority of the HTML and CSS down, I had more to figure out about how to implement the various features (like image gallery, news,and mailing list). Should I write my own, or should I use existing tools? What language should I use? What database system? Which pages should be static, which dynamic? The process of building he site was all about efficiency: getting the most done, using the best tools, in the least amount of time. That would allow me to focus as much time as possible in my before my deadline towards the things that will make a difference: site design, usability, and the the use of the features on the site.

I came with the conclusion that I could, and should, develop most of the data management using external tools. Spending time re-inventing the wheel and rebuilding tools that already have dedicated teams would be wasteful, especially when they all had some sort of hook (mostly RSS feeds) that I could just pull into the site. I was familiar with all the 3rd party tools I needed, so I was already comfortable with using them and knew they had the features that I needed. I came up with:

Google Apps for email and calendar
Here's a good tutorial. It was a little messy at first, but it gives you an iframe (the only standards-breaking thing on the site... thanks, Goog) that you can just drop in.
Picasa for photo gallery
I chose Picasa for a few reasons, the largest of which was the integration of the Google Apps account. While there's no "Picasa" section of Google Apps, I could use the account I set up to minimize the logins I'm using, now that I'm using four tools. I used the RSS feed to export to the image gallery and to make an image gallery RSS link on the home page.
Wordpress for dynamic pages and news
The reason I used Wordpress, and I didn't just slap together my own editor, was the WCM Page Feeder plugin. It allows you to serve individual Wordpress pages as an RSS feed. This means that I could use WP's superior news-serving tools along with their page editing tools with very simple integration. I also added an RSS link to the home page, for news.
Pommo for mailing list management
I tried out a few tools, and found this to be the easiest to set up. Makes adding an email form pretty simple, manages everything for me. Another several hours saved to these guys. Here's some credit :D

I also used a couple 3rd party PHP Libraries so that I could hook all of this lovliness together:

Simplepie RSS Reader
Note: I had to switch my Wordpress RSS feeds over to Atom, even though SP claims it can read the RSS 2.0 standard. This was a simple checkbox in the "Writing" section of the Wordpress settings.
phpmailer for mail functions
A little messy to set up to go through Google Apps mail. I had to set these settings in class.phpmailer.php in order to connect without errors. Once you have this part right, though, you're good to go. I'll go into more detail about this in the next article.

Once all of these tools were in place, it was a simple matter of dumping their content, using Simplepie, into my template. I'll talk about the actual hooking up of everything, and setting up the custom code I did write, in the next article.

HTML5 Site WFB Site UI Design / HTML Structure (Part 2 of n)

2010-04-29T00:00:00-07:00

i_ (Back to beginning of series)

Part 2: Site UI Design / HTML Structure

When I first picked up the project, I had a few things to consider: what requirements do I have, and once I had those, how would I display these feature in a neat manner, and what technologies would I use to implement them. The requirements part came out pretty easily, after a couple of phone conversations:

Calendar of events
Photo Gallery
News section
A few generic pages
Email mailing list
Misc. vital information (times open, address, that sort of thing)

And now I needed to put together some kind of design. I had recently finished reading a few usability books, so I was feeling pretty good about putting some of these ideas to work. I knew that people coming to the website were probably going for directions, a phone number, or hours of operation, so I put high priority on these being visible and easy to use (such as a Google Maps link for the address). I also wanted to entice people to explore other areas, so I added some photos from the photo gallery towards the top of the page. Finally, I included elements from all the page- just little teasers- across the front page, such as a small calendar of events, news block, and a blurb and picture about their restaurant. Now, I had a home page with all the information a user needs, quickly and at the top, while encouraging visitors to browse a little and check out the gallery and other pages for even more information.

With this sketched out on paper, it was time to actually write out the HTML. I came up with a structure similar to my HTML5 Template (and in fact, it's what I based my template off of.) I wanted to use the new semantic HTML5 elements and attributes, such as example text on textboxes:

<input type="text" name="Email" id="email" maxlength="60" placeholder="email@youraddress.com" />

I used the help of a jQuery Watermark plugin to help style the textboxes as well, since few browsers actually pay attention to the placeholder attribute yet. Further HTML5 inclusions were sections for the individual blocks of text, an aside for the side column, header, footer, and nav elements. Besides the HTML5, I also implemented a link tag for the news RSS feed:

<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.waterfordfamilybowl.com/wordpress/index.php/feed/" />

This allows browsers and whatever happens to crawl your site to say "hey, there's an RSS feed here" and allow users to easily pick up the news RSS feed.

HTML5 Site – Waterford Family Bowl (Part 1 of n)

2010-04-03T00:00:00-07:00

A little while ago, my aunt approached me- she needed a website for her bowling alley. "Sure," I said. "Let's go over what you want and we'll build something that works for you." In the back of my mind, I was thinking "awesome! Perfect timing to flex my HTML5 muscles and try jQuery 1.4 in a production environment; will it work?"

The site's now completed, and in production. Go ahead and check it out at http://www.waterfordfamilybowl.com. I'm going to, over a series of 4 or 5 posts, go over how the site works- how and why I used PHP, jQuery, HTML 5, jQuery, Wordpress, Picasa, Google Analytics and Webmaster tools, and Google Apps; and, how I merged them all to create a dynamic, easy to use and easy to edit website. I used principles from books like "The Design of Everyday Things" and "Don't Make Me Think", and I'll explain how and where these came into play. The process I took made even IE 6 compatibility a breeze!

Brief overview on how I plan to break it down:

Intro to series
Design - architecturally and graphically
Implementation of Wordpress, Picasa, etc.
"Contact Us", finishing touches
Google Analytics and Google Webmaster Tools overviews
Wrap-up (maybe?)

Wacom Bamboo Tablet Experience

2010-02-18T00:00:00-08:00

(This post was started using my new tablet!)

Well, I suppose that now that I have a tablet, I oughta start practicing. You see, I've never been one to have exceptional handwriting skills, so it's a good thing that I now have a computer that can understand my handwriting better than my 8th-grade Spanish teacher could. I used to get a LOT of 0s on my homework.

(At this point, I'm back to my keyboard because my hand began cramping up. I tried, at least... Typing at 90WPM on my keyboard is superior to writing using a plastic pen on a mat.)

I've long dreamed of owning a graphics tablet, for quick mockups (I included my first here. Creative Commons license, feel free to derive from its awesomeness.) I picked up the Wacom Pen & Touch. Three days in, it has been fun to play with; while it hasn't been 100% everything that I ever imagined it would be, I think that it may be more of a learning curve issue rather than an issue with the technology itself. I'm used to using a mouse that I have to throw all over a mousepad, not a pen and a tablet that maps 1:1 with my monitor (originally, it mapped to both monitors before I turned off the second monitor in the tablet settings.)

One of the troubles I was having was that it seemed somewhat laggy when I was using my pen on Windows 7 with Photoshop CS3. I noticed mostly that when I was writing, I couldn't add small details well (look at how crazy all of the lines in my As are); it would sort of stick and think it was supposed to pull up some kind of command menu. I'd like to blame it on myself, as a user error... but it isn't at all obvious how I fix that issue, if it is one.

Regardless, I'm going to soldier on and try a few more mockups before passing more severe judgement. There are probably some hidden settings somewhere to fix; and once I have those figured out, I'll post a follow-up on how I did it. Hopefully I do it. Don't crush my dreams, Wacom.

jQuery 1.4.2 updates, and the release of jQuery UI 1.8rc2

2010-02-16T00:00:00-08:00

jQuery 1.4.2 is out- not officially on their website, but you can be sneaky and get it here:

http://code.jquery.com/jquery-1.4.2.js

http://code.jquery.com/jquery-1.4.2.min.js (not really "minified" as much as "closure compiled"... can we get a verb for that?) The changelog isn't up yet, but that's generally the last thing to go (and hey, we snuck in the back door to grab the update anyway, right?) I imagine it'll eventually find it's way to their API page for 1.4.2. I ran a quick diff; here's some changes that I found notable from jQuery 1.4.1 to 1.4.2:

Optimizations for the body selector
A few changes to how arrays of elements selected are built, I'll go with my gut and say that they're optimizations too
Trimming whitespace from JSON data responses, for good ol' IE
A more few various bugfixy-looking things, mostly targeting IE
It looks like there was a lot done to the event-adding code; I think mostly internal changes. Probably more optimizations? I'll leave it to Resig or someone to explain whenever the changelog comes out. A few (generally pretty deep) methods had some parameters changed, or were renamed (things like "jQuery.event.special.submit.remove" becoming "jQuery.event.special.submit.teardown")
A smattering of changes within "live" and "die" mostly centering around the usage of namespaces
Blackberry browser bugfix concerning converting NodeLists to arrays
jQuery.getText changed to jQuery.text
Changes to caching fragments to help out WebKit and IE 6

I haven't really dug too deeply in the jQuery core before, so I'm not totally qualified to give a whole lot more detail than that. I used SourceGear Diffmerge between 1.4.1 and 1.4.2 to find out what I found out.

Also, in related (and perhaps more official news), the jQuery UI team released jQuery UI 1.8rc2 - which includes bugfixes in the already pretty stable 1.8rc1 (changelog). You can grab it:

http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc2.zip (development bundle)

As of right now, I'm testing it in our application at MeM. Let's see how things go!

ASP.NET Controls, How I Hate Them

2010-02-08T00:00:00-08:00

I've always, for some reason, felt innately that PHP allowed me more control over my code than ASP.NET. My brain kept saying "but .NET is more organized! It compiles! It's faster! It's easier to write," but my mind kept saying "PHP lets me do what I want how I want it... screw .NET!"

What I finally figured out was that I love C#, I even like the .NET framework, but I hate is, in fact, ASP.NET.

Every time I see an example of simple, elegant code, the most complex control on the page is a label or a panel. While the intentions behind FormView may be good, writing my own forms and hooking them up saves hundreds of lines (literally- I just refactored almost 800 lines of code into 150 by removing a formview) as well as reduces complexity and maintenance (now I no longer have to maintain view and edit and whatever other modes FormView has.) ASP.NET perhaps made sense in a day before OO principles and ORMs came into play; the controls were written for the same kind of people that use the drag-and-drop design mode. Easy to slap down haphazardly, not so easy to maintain.

We replaced every ASP.NET Ajax control we used anywhere (after I evangelized it, to my chagrin) with jQuery after about 6 months of use; while the controls did what we needed on the surface, underneath there was always some caveat, like the linked DropDowns needed web services, or the datepicker control had missing options... there was always something somewhere that I needed a bit of flexibility on that just wasn't there, or was buggy. It seemed very odd for it to be out of beta in such a state. So, I ended up starting my own control library using jQuery, and now it's easily extensible, easy to modify from the client, and I can control the markup.

Oh, and the markup... don't get me started on the markup. Tables for everything. I can't rearrange the otherwise useful Wizard control because it's so static in its display.

So, I guess the point I'm trying to make is, that the longer I use .NET, the less and less I use the complex controls and the more I roll my own. Because it's easier. Kind of ironic.

A Switch to Chrome (Mostly): A Followup

2010-01-21T00:00:00-08:00

A follow-up to my original post from July, a mere 6 months ago.

I have, now, totally switched to Chrome. And yes, it was exactly for the reason I fully expected to: extensions came out. Sort of like Google's this big Overmind that watches all...

Then again, I guess it is, isn't it.

Anyway, the performance difference between FireFox and Chrome is clear. In direct contrast to one comment left on my original post, I have as many extensions in Chrome as I do in FireFox, performing the same activities (with one caveat)- and it is noticeably faster. I load up FF when I do IE: to test the differences in rendering engines across browsers, so that I can fix the CSS and Javascript bugs. To be fair, FF has the best debugging (that version of FireBug is far superior to anything I've seen yet), which makes testing so much easier. But, FF is on my machine only for that. For debugging. Not for browsing.

Honestly, I see absolutely no compelling reasons to use anything but Chrome; it's what I install on all of my relative's computers, and it's what I use every day at work and home.

All hail the Overmind!

Don't Make Me Think: Book Review Part 2

2010-01-19T00:00:00-08:00

The first section of the book, called "Guiding Principles", lays the foundation to begin thinking about usability. It explains the thought process that the end user takes; it's never what you plan, but with proper design, you can help guide and funnel them in the right direction.

I've explained it in another post before: developers often think exactly like their application: we think, "if the user clicks X, they'll see a menu for Y, which they can click to get to Z. Wire it up!" but in reality, the user isn't a developer and doesn't know the application end-to end. They have to muddle their way through the website, and if they're lucky, they'll manage to follow your carefully laid track. The only way we can have a hope to get them from X->Y->Z is by making each link, button, or step as clear as possible by developing controls that are self-explanatory in use. Buttons should look clickable, links should stand out from the text, headers should be obvious, and navigation should be clear. The user shouldn't have to look up help text, experiment, or even pause to think in their quest to get to Z.

In other words, if you think, "we'll just add explanatory text right here," You're Doing It Wrong.

Stay tuned for Part 3!

Part 1

jQuery 1.4 Released! (Let's have an end-to-end testing party)

2010-01-16T00:00:00-08:00

Query 1.4 was released as final on January 14, 2010, at 1pm (or so) EST. The day it came out, I went to my boss and said "let's update! Woohoo! I'll order some cake" and he (yeah, yeah, rightfully) said "we need to discuss implications." Which was a good thing, because- well, why should we even bother with the days of testing that it'll require to switch out our framework?

I did some research, and there are some very, very compelling reasons. Here's what I wrote to our team:

We may want to look at updating, or at least putting it in and testing, soon.

Benefits of upgrading: * Performance updates * IE fixes, including some fixes to IE event bubbling * Includes extra API calls and additions to existing functions * Maintaining possibility to use new plugins as they are created for the latest version of jQuery * Better handling for events (outside of just IE)- we can (should) refactor and reduce a lot of our jQuery code using events * Better support for multiple simultaneous animations * More granular "does my browser support X" checks

The downside is that we're going to have to do pretty thorough testing in all browsers to make sure that the update hasn't broken anything. The main areas to hit will be places that plugins are used:

Autocomplete for country/state
Loading screen in DE / Admin
Media plugin that sets up flash for Audio Guest Book in display
Simple Uploader
Help boxes in DE

We'll need to spot-check around other areas of the site for javascript errors as well. jQuery still supports the same browsers- FF 2+, IE 6+, Safari 3+, Opera 9+, Chrome 1+ ( so we shouldn't expect any new weirdness in archaic browsers like IE6.

More information about the update can be found at:

Also: "15 new features you must know":

(Lower is better):

Cleanup

2010-01-15T00:00:00-08:00

I'm going through and cleaning up some of my old posts- especially some of the ones with code examples. They're pretty ugly at times, and it just so happens that two of the worst are the two most popular posts here (the one about DataPagers and Listviews desynching, and the one about Flex External Stylesheets.) Things may be rocky as I find a good syntax highlighter. It's already proven to be much more difficult than it should be.

Don't Make Me Think: Book Review Part 1

2010-01-14T00:00:00-08:00

After a 4-month break in which I was too busy getting ready for, delivering, and caring for our second child (Penelope Rose- November 16, 2009), I return!

I've had some pretty strange and interesting things go on in the meantime. The first of which that I will relay on to you will be some thoughts on the fantastic book "Don't Make Me Think" by the brilliant Steve Krug.

I used to think of usability like it was some horrible sea monster, constraining design and getting in the way of just plain moving forward. But then some space ray hit a neuron in my brain, and suddenly I was interested in usability. "Can you develop fast, beautifully, and usable? Is it all about plain blue underlined links, and Times New Roman, or is usability something else?"

My first stop was another excellent book, The Design of Everyday Things by Donald A. Norman. I started with this much heavier book when I saw it on Jeff Atwood's reading list; it's a more general book that covers design everywhere, whether industrial design, architecture, interface design... it was about the obvious dos and don'ts. I think that even though it was a heavier book, if I did it again I'd still start with it. It explains very well that usability isn't about killing desig- it's about making design accessible.

Then, one day when I was browsing around Barnes and Nobles (my wife in the children's section, me in the computer), I saw in big letters "Don't Make Me Think." Having recently finished helping redesign several key areas of our website, all because these specific areas were a little rocky to use, I was intrigued. So, I picked it up... and two hours later, the store started to close while I was leafing through mid-book, my Peppermint Mocha congealed and cold.

There are two key points to Don't Make Me Think that make it a joy to read: it's brevity and bluntness, and it's humor. It's less than 200 pages, and the entire book could be read in a 4-hour sitting; but the wealth of information contained within it will impact for a lifetime. I'll be posting more over the coming weeks pertaining to specific chapters and sections of the book. Yay Usability!

On Boating

2009-09-23T00:00:00-07:00

An aircraft carrier is incredibly secure; it's safe, it's backed by the government, it's got infrastructure and it's built to last.

But everyone still wants to ride the luxury yacht.

Drawing Inspiration - an Overview on Sketchflow

2009-09-22T00:00:00-07:00

If you've downloaded Blend 3- or if you've heard a bit about it- you may have heard of the prototyping tool Sketchflow. It's an extension of the Microsoft Expression Blend tool, and allows you to quickly design a site's flow, page by page, and then define the components within it. I started playing around with Sketchflow when I was tasked with coming up with a "grand master plan" for a project that I wanted to take on. Creating the page flow seemed easy enough; it wasn't long before I had a nice little tree drawn that covered everything from the first page to the last, with neat little arrows directing the user's flow. When you hit F5 (or build), you're taken to a compiled version of the site, from which you can navigate to each of your pages. Pretty neat. The real power came out when I started dropping in labels, textboxes, and buttons, and then attaching events from each of those buttons to navigate to other pages. Suddenly, I was able to take my prototype to the next level- instead of bits of scrap paper, I was creating an interactable demo that I could show off, that saved notes and annotations for later reviewal. As soon as I had it figured out (mostly), I showed the other person that I was working with how to set up, and within a matter of minutes, we were designing away. There's a big difference when you can show off a "working" prototype instead of a few concept drawings; you could get a feel for the flow of the application, and because it felt more real, you could do a bit more of a gut-check. It felt closer to production, even though it really wasn't any further than that scrap paper; and it took about as much time (in fact, probably less, edits are easier in digital format). And if you do feel inclined to shuffle around dead plants, you can always export the whole project as a Word doc. P.S., one small hint- the "sketch" style is not on by default. It's hidden under the controls chevron, if you click the triangle next to "Styles" and then "Sketchflow". It is a HUGE PAIN to change styles... which kind of baffles me.

Google PageSpeed, a Beautiful Thing

2009-09-15T00:00:00-07:00

: Image via CrunchBase

More Google loving! This time, it's a plugin for Firebug (the best tool in the world for developers- get it now) that Google created, called Page Speed. Here's the breakdown, and here's why it rocks. Page Speed analyzes your code, running the same checks that Google uses for their own sites- checking for things like unoptimized images, un-gzipped code, slow CSS, uncompressed Javascript, and more; and then it delivers you a neat little report, which you can then use as a checklist of things to fix. Page Speed allowed me to cut over half a meg from the page requests from one of the projects I was working on; kind of a big deal. Even if you think your application is amazing, there's a small chance that a quick 20-second test can tell you something that'll save you bandwidth, and by extension, money. Saving money is good, and saving your visitors time and bandwidth is great. Check it out, and revel in the awesomeness.

Tracking AJAX in ASP.NET with Google Analytics

2009-09-01T00:00:00-07:00

: Image by carveconsulting via Flickr

(skip down a little further if you don't need an introduction to Google Analytics.)

I love Google Analytics. In fact, I'm a big fan of Google as a whole, and I do the majority of my work using Google Docs, Calendar, and Gmail (online collaboration! oh, and free) and Google Analytics is a beautiful tool for businesses, whether their website's primary focus is online sales or just a small info-about-my-business site. If you don't have some kind of tracking, you're missing out on very important information; GA is a good place to start. Anybody can put GA into their website, and everybody should put something in.

The way GA works is by dropping a snippet of Javascript into your page; this javascript runs a series of tests against the visitor's browser, checking screen resolution, flash capabilities, seeing if the user is unique, watching the user's path through the website, checking the user's location, and much, much more (all collected anonymously). This is all put into an interface where you can see the data collected and organized. However, AJAX applications don't function as normal websites- you don't get a new page hit every time you fire off an UpdatePanel, because it's not a full page refresh. So, we need to do a little trickery to get things to work the way we want them to.

(you can start reading again if you skipped earlier.)

If you have the Google Analytics in the host page (whether the aspx page, or more likely, the master page), then you have to register a client script block that calls the trackpageview method. If you use jQuery, it'll look something like:

@ScriptManager.RegisterClientScriptBlock(UpdatePanelID, typeof(UpdatePanel), "uniqueIdentifierString", "$(document).ready(function(){ pageTracker._trackPageview('/pagename'); });", true);@

If you're not using jQuery, you'll have to do a little more work to attach to the window's onload event, but it's pretty similar. What you're doing is registering a script block to execute when the UpdatePanel updates (because it won't execute JS returned in the text), and using the pageTracker object (that the GA code you copied when you first set up GA on your site created) to force a pageview for a page you define. For my applications, I generally use something like "/dataentry/guestbook/edit" or "/dataentry/guestbook/delete" so that I can easily track guestbook views, as well as edits / deletes. It's both a way to track controls you load via AJAX, and a cheap shot at logging (not perfect data, though, so you're still best off doing all of your own logging on events, of course.)

The official Google help doc on the subject is also here: http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=55519

A Switch to Chrome (Mostly)

2009-07-06T00:00:00-07:00

: Image by Matrixizationized via Flickr

I've almost totally exclusively switched to Chrome, kind of.

It's so much better than FireFox. Don't get me wrong- FireFox is great- but it's just not Chrome. I recently caught myself in the act of groaning when I had to open up FireFox just so that I could run (the absolutely FANTASTIC) FireBug, the same way that a year ago I groaned when I had to open up IE for testing. It just takes so long to boot, and in those eight seconds, I could have opened Chrome a dozen times. I'm writing this post in FireFox because it has Zemanta, not because I want to.

It's strange when a browser that I fought against, and then fought for, fell so quickly when Google threw it's weight into the arena. I was crazy about FireFox; every day I extolled its merits to coworkers, to family, to strangers who happened to glance my way. I do the same thing now, but haltingly, with a line like "but if you really want to see something fast check this out," as I load up Chrome.

Oh, come quickly, Chrome extensions, and may I banish FireFox to the realm of "browsers to load when testing". FireFox, it was great while it lasted. Maybe someday.

When is a Technology Dead?

2009-06-10T00:00:00-07:00

: Image via Wikipedia

I wish I could call IE6 dead.

I've spent hundreds of man-hours doing CSS fixes for it, and every day, I check Google Analytics to see how close we are to its death... and every day, I'm disappointed.

Technically, it is dead. Most standards say the latest 2 versions (of course, that got really big when IE8 came out, excellent excuse to drop it), and it's 6 years old by now, well past the average lifespan of any technology. But, the problem is, for all of my idealism and complaints and loss of efficiency, we still have over 30% of our users on the ancient mind-breaker. So, unfortunately, for all of my complaints, for all of my IE6 specific cde and CSS fixes.. it's not dead. It's not defined by age, but by users. So until the time comes when IE updates become mandatory, or our users finally move on... it's still very alive, in my nightmares and in my everyday coding experiences.

APIs and Extensibility

2009-06-05T00:00:00-07:00

: Image via CrunchBase

More and more often, it becomes obvious to me how important an external API is. What better way is there to share your product, then to let people build on top of your service layer and customize their own interface? If someone doesn't like the look of your program, or how it feels, they may leave; but a missed opportunity can quickly turn into another user when they find someone else's implementation of your application. Or, other applications may pull your data into their product, giving you another revenue stream (or just more users), more popularity, your name thrown around more; it's free advertising and a great testimony to your product that someone liked it so much that they included it in their product.

I recently looked into Flickr's API, for integration into a project I was working on, which spawned this thought. It is absolutely fantastic that I can call a URL with some credentials, and bam, I have the file I need. The user doesn't have to upload (or worse, download from Flickr and reupload) to another photo-sharing application; they can just point out a url, and I can display it. It's really awesome. Twitter has feeds, that I can pull into my blog; even my blog has an API that will allow other sites to post comments to me without ever loading my site. That's pretty cool stuff.

For an information-hosting web app, this is one of the best things you can do to increase views and popularity. If you have a good service layer, expose some of it (with the right security, of course), let other people use your app. More users is never a bad thing.

On Agility

2009-05-30T00:00:00-07:00

: Image via Wikipedia

The most important quality of any IT company- web-based or otherwise- is the ability to quickly change, to turn on a dime. The openness and ability to foster innovation is absolutely critical, even expanding past IT companies; without change, you fall behind. And when you fall behind, it is only a matter of time before the inevitable collapse.

I read an interesting article in Wired yesterday about car companies. It suggested they become more like the computer industry, setting standards for components and allowing hundreds of parts manufacturers develop these sort of plug-in devices. These manufacturers would be smaller and agile, developing new, efficient parts, which not only helps the company sell more, but also gives consumers the chance to purchase better products. The big car companies would be like Dell, offering a sort of base upon which to customize and put together these parts.

The key here is that in a vertical company, where all processes are overseen by a massive beauracracy, is unable to change, while the hundreds of small parts manufacturers, overseen by a standards commitee, are each able to introduce breakthroughs in their respective areas. It is the same way with any IT company; one who is overseen by a large beauracracy is never going to stay with modern times. They are the ones still using IE6, to support their apps and unwillingness to change, while small 5-man companies are able to revolutionize the web with things like Youtube, Flickr, Twitter. When was the last time a large company built an app like that?

A lot of this requires upfront planning. The huge company is reluctant to change after investing millions in a system that is rigid; a properly planned system is one that is flexible; one should never think that you can build the perfect long-lasting solution. You can get close, but five years down the road, something will inevatably be superior and your app must be rewritten. Modularize your development and make this possible, because it is a matter of when, not if.

It is imperative that innovation is prized, that a company does demand absolute, 100% control, because when this happens, a company loses its character and becomes dead in the water.

When Does a Framework Become a Language?

2009-05-26T00:00:00-07:00

A friend of mine posed this question a few days ago: at what point does a framework become ubiquitous enough to be a language on its own?

This came after a brief discussion about jQuery, where the point was made that we hardly ever use traditional, raw Javascript anymore. We use jQuery to write the core of our applications, jQuery to do UI effects, jQuery for validation. We hardly ever even use the word Javascript. But, the question he posed is, is jQuery the same thing as Javascript? Is it different enough to be considered something else, or should it just be considered a framework – the same way .NET is a framework to C#, or Rails is a framework to Ruby?

Our conversation came down to semantics. The same way we (or at least I) call tissues not by tissues, but by Kleenex, or the way Texans call soda “Coke”, and although jQuery does not (in a technical sense) replace Javascript (rather, extending it), perhaps it is simply cognitive recognition that presses us to call anything Javascript related jQuery. Someday, will everyone call Javascript by jQuery? It very well could be. We’re still not calling it ECMAScript.

Zemanta is Awesome

2009-04-30T00:00:00-07:00

: Image via CrunchBase

I wanted to make a quick plug for Zemanta; a utility that- I think, anyway- has helped me rapidly improve the quality of my blog posts. Yeah, the awful writing style's still the same, but it allows me to throw in pictures, and pictures make everything better! It also has tools that link up key words to Wikipedia articles and other websites (all I did was select which words I wanted linked; I didn't actually make the links on this post links manually), help you tag your posts, and give you a list of other blog posts that are related to the one you're currently writing. It integrates perfectly seamlessly into WordPress, and gives you "reblog" links on other people's blogs to quickly jump in and respond. I love the program; I highly suggest it to anyone.

A shameless plug, yes; but a worthy one.

The Death of Flash

2009-04-28T00:00:00-07:00

I'm excited. Not because a technology is dying, necessarily, but because something far, far better has risen in it's place. Because now I, as a developer, can use a language (no, ActionScript is not a language, at least in my book) that works for rapid development, that leverages my existing knowledge of CSS, and that users won't have to use a plugin for.

Flash is dead, long live jQuery.

I've recently been playing around on a few pseudo-projects, where I've just done as much "flashy" stuff as I can (Maybe I'll update these later if I ever have anything finished.) So far, I've had things fade in, things move, things flash, things animate to different colors, things change when they're focused on, or moused over, or clicked on... almost everything anyone used flash for in the past, I've been able to replicate. The only thing I haven't tried so far is embedding multimedia (I have used a sound plugin that works beautifully, though.) And all of this with a few lines of code, no compiling.. and only a 19kb download.

Almost everything I've ever wanted to do with jQuery already exists in a plugin. Everything else was either a tweak of another plugin, or something I built myself, and always under 20 lines of code. Make that happen with Actionscript.

I guess what I'm saying is: jQuery is easier for the developer to develop, and it's easier for the client computer to run (no plugins, faster, direct dom manipulation). So, why is anyone still using Flash?

Snakes on a Compiler

2009-04-26T00:00:00-07:00

p. I went to the Day of .NET, an all-day "geekfest", a sea of polos and khakis; and there, I made the final decision of what language I would learn next: Python. Well, specifically, IronPython. I guess a normal Python isn't scary enough, so we'll make it out of metal. (Presenter's website; presenter's slides; presenter's twitter)

The really, really cool thing about IronPython is the ease in which I can pull in other CLR languages; namely, C#. This will supposedly get better when Visual Studio 2010 comes out and the DLR is revamped and IronPython support grows. What this will allow me to do is build all of my base classes, and my data layer, which I'm more comfortable with, and use Python for all the fun stuff- services, and display. I've been considering writing my next game in Python anyway, influenced by Eve Online's incredible sucess using the language, so this fits in perfectly with my prior knowledge.

I'm pretty excited. I've never heard a negative thing about Python; everyone I've ever heard who uses it loves it.

The Library Museum

2009-04-22T00:00:00-07:00

I was recently debating, with a friend, about the pervasiveness of technology; my point was that information should be available whenever, wherever, to whomever chooses to call upon it; my friend believes that the internet has a profound negative impact, breeding an obsession with instant gratification and dependency on the virtual world.

Where it began was when I read an older Wired article about a specific type of "body-modding"; I didn't even know there was a group of people who claims body mods as their hobby until today. But it spawned a question: if I was given the opportunity to "upgrade" a body part- say, swap out my eyes for a pair of zoom-capable, infrared cameras, would I and should I? My answer was yes, I would; why not upgrade my body? Why shouldn't I treat my body as some sort of machine, ready to upgrade? Is my body anything other than a robot controlled by my

: Image via Wikipedia

brain? Is it something I should hold holy and sacred, or is it something I'll just be throwing away in 70 years? But, rather than getting too philosophical on this leading note, we then turned to a similar discussion of optical implants that displayed data inside your eye; a kind of mini-projector that would project a computer's display so that it seemed as if the world was one big HUD. "I want information," I said, "and I want to be able to check user reviews on toilet paper at Target instantly."

However, my friend disagreed. She believes that in instantly calling up knowledge, you lose important skills; by not having to put time and dedication into researching topics, and by having, instantly, anything you wanted, you could no longer appreciate your final work. When you have instant gratification on the internet, you begin to expect it everywhere. That it's about the journey, not the final destination; "I'd rather live in a farm in Nicaragua," she noted, "although you'd probably prefer Tokyo."

We left our discussion in an agree-to-disagree state. I believe in efficiency, productivity, minimum effort for maximum effect; she believes in taking your time, enjoying the journey and doing things yourself. They both certainly have their merits; however, I do believe the world is rapidly spinning my way; we'll trade character for progress, for better or for worse.

Thinking Outside the Cube

2009-04-17T00:00:00-07:00

Learning outside of the workplace is, in my opinion, of the utmost importance. Whether it's reading a book, going to a convention, visiting community websites, keeping a blog, doing freelance work, or just messing around with code for the heck of it- we must sharpen our saw.

I believe the key point of this is that it must not feel like work. You shouldn't feel pressured, or dread doing something; you should do it because you want to do it. The great thing about our profession is that we can get away and do several things, all subject to our whims; if we spent all day in a chair at a desk, and we want to get up, go to a meeting like the Day of .NET (Central Ohio this Saturday!) If you like to read, do that instead; it's good to keep a bookshelf full of interesting books. Go into some kind of technical cross-training, such as learning a new language. Do design if you're a devleoper, or develop if you're a designer. Just do something.

In this way, we can continue to work on our skills, learn new things and keep from being bored. And, at least in my experience, you can bring new skills and solutions to problems you're already facing at work.

Music Discovery

2009-04-15T00:00:00-07:00

: Image via CrunchBase

I've recently started using Last.fm. I made an account a while ago, but I never used it; I thought it was a little awkward to use, and I didn't totally understand how the whole thing worked. My initial thoughts were, "I don't want to have to manually add every band I like, and I don't want to have to listen to a single song at a time!" But, this is because I didn't understand anything about how it worked, or it's purpose. All I thought it was was a way to look at one song at a time; how wrong I was.

: Image by Getty Images via Daylife

So, when I revisited it yesterday, I decided to take a better look at what was going on. I went to a band I liked (Franz Ferdinand, to be specific), and tried out the "Listen to Franz Ferdinand Radio" button; and this is where everything totally turned around for me.

Last.fm began picking songs from a group of similar artists tagged by other users, playing more similar artists more often. Within an hour, I had listened to about 15 bands I didn't even know existed, that are now some of my favorite bands. The real power in Last.fm- at least for a casual listener- is in this, finding new music. For a while, I had been waiting to hear new songs on the radio that I enjoyed, and then trying to track down a copy; and then, I would listen to it until it burned out and I was totally done with it for another year. Now, I can listen to a variety of music that I'll probably like (and if I don't, I can always skip it), and it'll take an entire genre to be burned out before I run out of fresh music to listen to.

The Tables Test

2009-02-04T00:00:00-08:00

As I've noted before, I believe that you should only use tables if you have an explicit reason to. Here's the test I use, and I'm totally open for comments and suggestions.

1. Am I going to change the layout much? If a lot, then I'll use CSS; and even if it's only a little, use CSS. It's easier to make far-reaching changes to a couple classes in a single file, than to modify the HTML structure of several pages. It's also easier to add a new box, or some kind of widget, to a CSSed design, since they stretch well, unlike many table-based designs that can explode when you go a pixel too far. You can do it with tables, but in the end, it turns out to be a kluge.

2. Am I worried about different screen resolutions? For me, this is very important; I design from 1024x768 (downgrading gracefully, but not fully supporting 800x600 unless I have to; see stats here) all the way up to 1650. The problem with tables, is it's tricky to get a well-stretched website; it can be done, but it's usually akward. So, I always use the CSS way, where I can float elements, and create fixed- and fluid- width columns.

3. Do I care about accessibility? The answer should always be "yes" here as well. Screen readers have a lot of trouble parsing tabilized content (in what order should it read?), whereas a well-designed, minimalistic HTML structure can be designed to order the content in the way it's meant to be read, and then placed in the correct places using CSS.

4. Do I ever want to read the code again? A mess of tag-heavy <table>s,<tr>s, <td>s, and the occasionally sprinkled-in <th> gets in the way; especially if you've got more than one nested table. It's annoying to read the code and get from one logical place to the next. However, with a tag-light mix of <div>s with applied classes and IDs, you can see what's going on; you can see through all the gunk and mess of the markup and cut straight to the content.

5. Do I care about several media types (print, mobile)? Tables don't always render right when printing a page; and they very rarely render correctly on a cellphone. That's where the @media attribute of CSS comes in; you don't have to make a totally seperate version of a site to allow your users to print, or to view from their cell. You can specifiy a simpler design that's easier to print, and a more compact design that's easier to view on a 340x200 screen with ease.

6. Do I care about search engines? Search engines do a much better job at reading code-light pages, where the content's at the top and the markup is light.

7. Is this tabular data? Use a table.

Tables were awesome back in 1995. But today, the trend is heavily in the favor of CSS and maintainable code for a reason.

Re: "Why CSS should not be used for layout"

2009-02-02T00:00:00-08:00

First, read this. Then come back.

I'll wait here.

...

Ok, good. Now, here's why the article's complete and total garbage.

On his first point: bq. The CSS layout primites are inadequate because they do not allow elements to be positioned relative to each other, only relative to their containers. They don't? What about floats... do they not effect direct siblings? Can you not change positioning? Maybe I'm missing something here, but we've got the ability to change element positioning relative to other elements as well as the container (or even display on the screen at all times ("floating" elements on the screen), or display anywhere on the page). Using the table method that Ron advocates only allows you to position relative to it's sibling. A table cell, which spans 1-n rows. A table cell that requires you to restructure your HTML (or at least move your content) if you want to move a section from the left, to the right. Whereas I could just swap the float, changing a couple lines of CSS. bq. The way CSS layout is rendered results in unavoidable interactions between the style sheets and the underlying content. So even when CSS is used exactly as intended, it is not possible to separate content from layout. Unavoidable interactions? Giving elements IDs (which is good practice anyway), classes, and a <link> tag? Is this worse than creating an immutable structure? Again, perhaps I'm missing something somewhere, but the liquidity of a <div> layout is far superior. It's changable, it's easier to get things where you want them to go, it's less HTML markup gunking up your content. A nicely "divved" layout is cleaner, easier to modify. Yes, I have to add IDs and classes... but a semantic, descriptive markup is far easier to read anyway. bq. One of the problems with criticising CSS is that it's very hard to write good CSS, so pointing out problems with CSS begs the question of whether this is an indictment of CSS or one's coding ability. Hard for who? And regardless of difficulty, it's a bit strange to denounce an entire language (markup syntax?) because it's "hard". C# and Ruby and Python and baking and riding bicycles can be hard for beginners too.

Ron follows his CSS bashing up with a kluge of examples that do nothing except show he has no idea what he's doing, and badly mangles examples, saying "look, I reversed it, and it 'sploded! css sux". bq. But the point is they have to be fixed! The correct CSS is inextricably bound to the content. Smarter people than me have tied themselves into knots trying to figure out how to make a three-column CSS layout that doesn't have these problems. To my knowledge, no one has succeeded. It may be possible. To his knowledge, nobody's suceeded? Funny, because several of my own websites use 3-column CSS layouts, without "these problems". Because I understand how CSS works. Because I'm not afraid to get my hands a little dirty, and because I don't base my knowledge on display-view of Dreamwaver.

All it comes down to is the ranting of a man who has no idea what he's talking about. CSS is perfect for layouts. It's hard, as he readily admits, but once you understand it's semantics, understand when and how and what to apply, there's nothing better.

Bookshelf

2009-01-17T00:00:00-08:00

I've got a lot of books; just recently I ran to Ikea to pick up a huge shelf to manage the overflow. But, there's a group of books that I keep by my bookshelf, just in case I need a quick reference, or just feel like reading. Here's a breakdown, from right to left:

Manual for an MSI K9A2 Platinum motherboard (honestly, not quite sure how that snuck in there)
The Design of Everyday Things, an absolutely fantastic book; I'm only about 1/4 of the way through it, and already I love it. It's about the tiny little nuances about designing user-friendly things; it's not explicitly technical (more about physical objects than virtual ones), but it's definitely easy to cross it over into the web development / designing realm. I picked it up on reccomendation of Jeff Atwood.
Dreaming In Code, another really good book; I saw it in the library one day and decided to flip through it. It's a fantastic rendition of the exploits of the developers of Chandler, a personal information manager, and explains in detail how many things can go wrong with a software project; software is never on time, and the author (a reporter) does a great job in explaining how this phenomenon occurs.
The Art of War, by Sun Tzu; it's hard to find a copy that's just the Art of War, and not 'the art of war in relation to business' or some such. It's pretty fascinating; it's about military strategy. I couldn't find this specific copy on Amazon; I think I got it from Barnes and Noble about two years back.
jQuery in Action; I love jQuery, more and more as each day passes, and I figured it was about time I picked up the book. The online documentation will always be more up-to-date, but I can't bring that in the car with me (without a 3G netbook, anyway), and the book is written so that I can read it from cover to cover. It has several interesting insights into the technical reasons of jQuery's architecture.
Comet and Reverse Ajax; one of the 'reccomended books' Amazon advertised to me while I was ordering jQuery in Action. It's really, really short, but it explains how to do something I never really thought possible with HTTP protocol: use a server push, instead of a client pull. This may mean Neflaria gets a real-time chat.
Red Hat Linux 8 for Dummies; picked it up a long time ago when I was first experimenting with Linux. It does a really good job at getting a Linux dummy up to speed.
MCTS and MCPD books for .Net Framework 2.0 web development; a set of 3 books written to get my MCPD. I hate the whole idea of certifications (I'm a firm believer that skill > credentials), but I figure I should get them eventually (because very few other people believe that).
MCTS for SQL Server 2005; see above. Although, has actually useful information, not garbage to memorize in the rare event that Visual Studio's intellisense and Google collectively collapse.

Top to bottom on left stack:

Wired magazines; Wired's awesome. It's like Gizmodo, only in more detail.
Swing Hacks; when we (Don and I) were first looking at developing an MMORPG, we were trying to decide what language to use; consequently, I picked up a few Java books, this and the next two. I knew very little about Java at the time; it was the cross-platform compatibility that attracted me. It was the entire language that turned me off.
Wicked Cool Java; has a lot of cool project ideas for developers at any stage. If you want to mess around with Java a bit, this is the book to get.
Killer Game Programming in Java; what I expected, and yet somehow not. It takes you from developing your own graphical engine all the way through game mechanics, which is awesome; but, with the abundance of pre-made 3d/physics engines out there, it's more than I needed, so I never got more than halfway.
Starting out with Java 5; my CS classes were in Java, and this was the book I used. Highly reccomended for beginners.

The next book to go up there will be Digital Security, which is another amazing book; it totally opened my eyes, and changed the way I thought about security. I'm only halfway through it now, so it's by my bed instead of on my bookshelf.

Goodbye, Movable Type; Hello, Wordpress

2009-01-12T00:00:00-08:00

I've been using Movable Typ e for a few months now. I've liked it, but it wasn't great; it worked well, but I wasn't blown away. After a while, it moved slow; there was no way to remove a lot of comment spam at once (which I seemed to be particularly prone to), and I had a few bugs, such as having to log in twice each session. Maybe they weren't all MT's fault; but I had trouble finding support.

So, when we set up our new Windows Server 2008 machine using a 64-bit edition, I hit a wall: there's no MySQL support for ActivePerl x64. There isn't any official support for x86 either; but there are workarounds for that (use external repositories). It also came at a time when I was deciding whether or not I wanted to switch, so it pretty much cinched it up; I decided to try out WordPress. It was a PHP/MySQL system, both of which I had already set up, so I expected (or at least hoped) that it'd be pretty simple to get running.

The first thing I had to do was back up my old MT database. I expected some long, tortourous sequence of MySQL edits or something, but all it came down to was logging in, clicking "Import/Export", and then export. It spit out a text file, which I saved to my desktop. Next, I unzipped a WordPress download into my blog folder (and set up the requisite site in IIS). I set up a database and a user in MySQL for my blog. I then edited the wp-config-sample.php, filling in the requisite database information and renaming it to wp-config.php, visited the site in my browser, and hit 'go'. Seconds later, I had a new, live WP blog.

From the admin panel of my blog, I went to tools, hit "import", selected "Movable Type" from the list, browsed to my file, and uploaded. And that was it. I had totally converted to Wordpress in minutes. I was absolutely astounded by the ease. It was already much faster (with the help of WP-Cache), and running well.

Next stop: new design. WP looks like it'll be much easier to work with, so hopefully we'll be up soon.

Kubuntu 8.10 and Wireless

2008-12-06T00:00:00-08:00

After using Vista for a while (and after my brief experimentation with Ubuntu 8.04), I decided to go ahead and create another partition for Kubuntu 8.10, with KDE 4.1. I did it with the latest version of Wubi. It installed fast, booted fast, and left me without wireless (as I expected). Problem is, I had moved my office downstairs, leaving the router upstairs; I had to get wireless working somehow.

So, I booted up my laptop and began a search. "Install Ndiswrapper", was the first bit of advice I got; so, I downloaded this onto a flash drive, plugged it into my new Linux machine (which found the drive and popped it up helpfully), and tried to install it. I followed the instructions left by the developer in the 'Install' notes; however, to my dismay, I was unable to due to an error that read "error: too few arguments to function 'iwe_stream_add_value' ". Having no clue what it meant, I did a quick Google search, and found out I had to patch the Ndiswrapper with this patch.

I copied the patch file into the directory, then ran

patch -p0 > ndiswrapper_kernel_2.6.27.patch

... and again, I hit a wall; it threw up an error that the patch command is not recognized. So, again, I hit google and found that I needed to now download and run the "Patch" installation file (I already had all the dependencies installed). Now, I ran the patch command, and it worked! I installed Ndiswrapper, then followed the guide here to get it up and running.

So, this was posted from Firefox in my new linux installation.

Back from Vacation

2008-12-02T00:00:00-08:00

Just got back from spending a week in Arizona- that's right, the middle of the desert on the border of Mexico- where it rained for three days. We couldn't get to part of the Grand Canyon because of the snow. In Arizona. Did I leave Ohio?

I don't want to complain too much, though; the resort we stayed at was very nice, and Audrey's aunt was kind enough to pay for everyone's stay. And the Thanksgiving dinner was something I won't forget (the link will explain all).

Anyway, first thing I did when I got back and settled (besides scavenging a cheap turkey from the grocery store... 12-pounder for $10) was delete 400ish spam messages. Sorry for the garbage; the new version of MovableType supposedly clears that issue. I also upgraded my theme; still not a custom one yet, but I'll get there once I get the time.

I also installed Rainmeter, Samurize, and Rainlendar - they are ab solutely fantastic desktop-managing applications. And, if that wasn't enough: I installed a new hard drive and I'm in the process of installing 5 virtual drives; Windows Server 2k3 and 2k8, Windows XP, the latest version of Kubuntu, and Fedora 10. That is, if I can get the last two working with Windows Virtual PC 2k7.. I've seen it done, but I know it's tricky. The goal is to have plenty of development platforms with which to do my work; I'll be able to test web apps in the virtualized servers before I push to production on CD.

Speaking of CD, we've got our new website up; I was inspired by a Keane song, and somehow came up with this. My brain goes through somewhat strange processes sometimes, but I'm pretty happy with the result. JQueried it up, even, much to the chagrin of my budding Ajax framework project.

Bluetooth Issue on My Dell Laptop

2008-09-11T00:00:00-07:00

I've got a Dell Latitude D820, with a Toshiba 350 bluetooth card. Don't ask me why Dell used a competing laptop brand's hardware, because obviously it isn't working out.... the fact that the Toshiba "Dell" drivers are two years old, while there are drivers out "for Toshiba laptops only" that are significantly newer. But I digress.

My issue was in connecting my LG Dare (fantastic phone, I might add) via Bluetooth. I used the drivers right off of Dell's website, which installed the "Bluetooth Stack By Toshiba For Windows" (what a mouthful). I was able to use dial-up-networking and use it as a modem, as well as setting up a serial port.. but couldn't do file transfers or use bluetooth programs. It just wouldn't find the phone.

So, after an unsucessful hour and a half on the phone with Dell tech support, and a full day of Googling, I decided to try something totally crazy: uninstall the Bluetooth Stack from add/remove programs, and then do a 'scan for hardware changes' in the device manager. (make sure the bluetooth is active (check for a blue icon next to your power icon on the screen hinge.) if it isn't there, you'll have to download the driver from dell's site, activate it, and then uninstall it.) And, woah, it worked! It now showed up as a bluetooth device, rather than a network device, and I could now do all the file transfer stuff.

Now, my next step is using some of the Bluetooth API stuff from C4F, and make a proximity-based application.

Flex Dynamic External Stylesheets Revisited

2008-09-09T00:00:00-07:00

Well, it seems that my article on Flex Dynamic External Stylesheets is the most popular on my blog; and, given that, I should probably explain what I did a bit better. The last article was more of a discussion on what I went through to get it working, whereas this will be more of a tutorial of sorts.

Note: this is using Flex 3; Flex 2 may be similar, but I can't guarantee anything.

First thing: you cannot load a CSS file into your SWF. It's just not possible. It's what I struggled with, and finally had to come to the realization of; you have to compile the .css into a .swf file (as I explain further down.) Also, the "css" that flex uses isn't CSS, it's some convoluted garbage they call CSS. It should be called FSS. But I digress.

The first thing I did was get the CSS written that I wanted to change, and put it in a CSS file. It had background-color changes that overwrote the CSS in the main file. So, if the main CSS file was called default.css, and said:

.blueBox {
  color: #fffffff;
  background-color: #000066;
}

My new CSS file was called newBlue, and said:

.blueBox {
  color: #ccccff;
}

Or whatever you happen to choose. This causes my new CSS file's font color to overwrite the old one, just like real CSS.

I then right-clicked my new CSS file, and set it to "compile to swf". Don't do this with default.css, that'll be ok to compile into the original swf; the compile-to-swf option creates a seperate SWF file specifically for your CSS (because it'd be way too easy to just load a .css file, right?)

The next step was to modify the ActionScript file. I was passing through a parameter called "Theme", so I used that to call the compiled CSS that I wanted to load, and overwrite the main. I passed through the theme parameter as a querystring parameter on the flash file name (flash.swf?Theme=jack)

The actionscript was something like this:

//(function called by creationComplete
CSSFormat();

//(somewhere further down the page)
public function CSSFormat():void{
  //this will load up default.css, so we always have something.
  //however, the theme will flash the default color before it
  //loads the new theme you're trying, so keep that in mind.

  var theme:String = "default"var themeSWF:String = "default"

  //This grabs "Theme" from the parameters.

  if(Application.application.parameters.Theme != undefined) { 
      theme= Application.application.parameters.Theme;
  }

  themeSWF = theme;

  //note: swf files don't like compiling with hyphens.
  //your url will obviously change, depending on where you decide to
  //store your swf. Mine's in the app_themes directory for an
  //asp.net application.

  var css_url:String = "App_Themes/" + theme + "/" + themeSWF + ".swf";
  StyleManager.loadStyleDeclarations(css_url);
}

And, now when I publish, it spits out the .css file I created into a .swf file. Put that into the directory I specified in the css_url, and it'll load it up! And, even if it doesn't, it'll still load the default (don't set default.css to compile).

Hope this helps everyone else that is remotely as frustrated as I was!

Pop-Up Windows Are A Terrible Solution

2008-08-19T00:00:00-07:00

Pop-up windows are one of the biggest UI blunders ever. They create seperation from your website, they detract from the main content, and they are far from a 'seamless' data entry mechanism.

Let's start from the beginning. One day, some developer thought to himself, 'Hey! I want my user to stay on our website, and stay on the page to he maintains state, but also to enter data. How can I do that?' After a little Javascript tinkering, he created a button / link / something that pops up a window with a form, or with a help section, or something. Fantastic!

But then, some internet advertiser said 'Hey! I want my consumer to see our ads, all ten of them, even if he moves to different sites.' So, he added javascript of his own, and the community responded with pop-up blockers. So, internet advertiser went back to normal banners. However, this left the first developer in a bit of a hard place. His website was developed with those pop-ups in mind... so what now?

First, never, ever, ever have the browser pop up a new window in the first place. Ever. There is absolutely no reason for it, and there are easy ways around it that can avoid pop-up blockers totally screwing your user experience: for example, modal windows. They're an extremely easy mechanism to put in place (you can even use frameworks, like Scriptaculous or components from the Ajax toolkit for .NET), and they get around pop-up blockers. And, not only that- but you don't have the issue of not being able to send commands to your parent window! In this, it lends itself heavily to Ajax applications, in that you can also update content on the main page after submitting data from the modal. Seamless transitions are the best; make your web app behave like a desktop app. You also know that your user won't be messing with anything on the parent, out of order with the pop-up. It fits everything in place and creates a nice flow to the website.

So, please, please remove your pop-up windows and stop keeping your users from having to disable pop-up blockers!

"Make More Money!"

2008-08-06T00:00:00-07:00

Every time I listen to the radio, there's inevitabley a commercial along these lines:

"Are you unhappy in your job? Want to make more money? Be a part of the new and exciting IT Industry! Take our classes and become a Certified Professional..."

It's absolutely disgusting and wrong.

You shouldn't entice people into "the new and exciting IT Industry" by money. People who want to be in IT, should be in IT (sometimes not then, but that's for another topic), and people who think that some magical position in a software company is going to change their entire life, are going to find out the hard way that it won't. People who think to themselves, "I'm going to make a drastic career change because I want more money", are going to fail.

I'm not saying that someone can't learn to be a developer, or a network admin, or any of a variety of careers. I'm saying that you should be in a job that you like to do, and that you have a skill set and a natural disposition for. You can't just go through some distorted MCP bootcamp and expect to make it to the top, or even the bottom. You won't, unless you know what you're doing and you're good at it, and you want to do it for the sake of doing it.

Developing has a personality with it. It's not for everyone; it takes a certain mindset. The person who speeds through certifications for the sake of certifications (the idea of certifications being totally wrong anyway) is going to work horribly with others and is going to feel like an akward part of any team. IT has a certain passion to it that can't be faked, no matter what the radio advertisements will try to tell you in loud voices over techno music.

How I Got Started Programming

2008-07-29T00:00:00-07:00

This one's been floating around the internet (although I appear to be late on the trend). However, here goes:

How old were you when you started programming? I was in 5th grade, so I was ten, I think.

How did you get started in programming? My friend Logan and I decided we were going to create Tomb Raider 4, so we each bought copies of "Learn to Program Basic".

We didn't quite make it all the way to that particular game.

What was your first language? Something InterPlay tried to pass off as Basic. My first profitable language was HTML, when I made a bowling website for my aunt Sue when I was 12.

What was the first real program you wrote? I made a pretty extensive text-based RPG. It started on BASIC, then moved to my TI-83 during Trig class, and eventually evolved into Gevalum.

What languages have you used since you started programming? BASIC, TI-83 BASIC, HTML (XHTML), Javascript, CSS, Java, C++, ASP.NET, C#, ActionScript, ASP, PHP, SQL, XML, VB.NET. I wouldn't call myself proficient with several of the aforementioned, but I have used them.

What was your first professional programming gig? I worked for a little 3-man web shop in Middletown, OH, doing ASP and SQL, mostly administrative back-ends to websites. It was the month after I turned 16.

If you knew then what you know now, would you have started programming? Absolutely. I probably would have started with something like Java instead of Basic and PHP instead of ASP, though. I love development and wouldn't trade it for any other job.

If there is one thing you learned along the way that you would tell new developers, what would it be? Learn to use Google.

What's the most fun you've ever had ... programming? My online game, Gevalum. Although it's been surplanted by something else (a story which I may delve into sometime), I put two years into developing something I thought was fantastic. It went from ASP with frames to PHP with AJAX, and to watch it grow was fantastic.

That's the end of the questions: there you have it.

Software Piracy

2008-07-07T00:00:00-07:00

As I was mowing the lawn last night (something I try to avoid as much as popssible, much to the detriment of my relations with the neighbors), I began to think. Why is it that people pirate software, who does it, and why is it bad? Is it bad? There are two answers to my last question. One is based on bias and deceit and twisting statistics, and the other one is truth. You're welcome to discern for yourself, based upon what I have here to present.

The BSA (Business Software Alliance, www.bsa.org) claims that "dollar lossesfrom [sic] piracy rose by $8 billion to nearly $48 billion." That's a huge number! That's 19,200,000 copies of, say, the Adobe CS3 Master Collection, at $2500 a pop. But, what does that really mean? We must examine this claim of "dollar losses". The term implies that that company actually lost money (losses) and went negative; it implies that the software industry in general had a $48 billion loss in 2007. However, this is entirely untrue.

Software companies use money in the development (and later on, time supporting) the software create. There is, from that point, no finite quanitity of items that can be sold; copies can be produced and reproduced indefinitely.

That said, taking one copy, and making five others, does not cost the company money. You're not stealing five iPods from a store that carries 100, which they then have to spend money to replace; there is no "replace" in software. There is no hole left by a "missing" quanitity. The virtual world is far different from the physical; and different ways of thinking must apply.

An argument at this point may be "those five copies were given to people who didn't pay for it, so the company made five sales less than it would have!". Again, from a surface view, this makes sense; in the same way that "the earth is flat" makes sense. It works, and you don't have to think about it. End of story for the BSA, let's just publish the numbers and throw people in lawsuits.

However, in "not thinking", as happens terribly often, you lose something. You must examine the demographic of those "pirates"; looking at the BSA's own report shows that the highest rates of pirates exist in two areas; nations with developing economies, and nations with restrictions on software.

This means that most of the pirates are people who cannot afford, or cannot buy, the software. This means that they are people who would have otherwise never bought the software they pirated. Can a 14-year-old boy in Pakistan who wants to try his hand at design really afford the Adobe CS3 Design Studio, at well over $1000? Of course not. Does he deserve any less because of his unlucky predicament? Of course not. Back to my earlier point, I'm not advocating stealing that BMW because you can't afford it and want out of your Geo Metro, I'm talking about giving opportunites that costs the company absolutely nothing.

As for the rest - that 20% rate in the U.S. - many are people, again, who would have otherwise not bought the product. This is, I'll admit, purely from my own research of people I know personally, but the general age demographic falls between 16-22. High school and college kids, people who are trying to forge a way into an IT industry, but without the means to pay huge sums of money to get started.

I'm not advocating piracy, and I'm not saying that piracy is the best option. Designers can use Gimp, developers can use Notepad++ or Eclipse, anyone can use Linux. However, the software that gets pirated is generally the best of the best. People pirate it because it's the software above all others they choose to use; it's worth risking a lawsuit for. It is, in my opinion, one of software's highest honors to have 500 seeds on a torrent; it means people are going out of their way to give up some of their time, their bandwidth to give what are essentially "extended trials" of your software. They're being downloaded by people who will become professionals in that field, and who will be hired by a company who buys legit copies - or start their own business, and get their own corporate licenses.

Piracy is not a bad thing, for software. It's free publicity, it gets people talking about your product. Free market exposure, which means more long-term sales. Piracy helps sales, not harms it.

Perl and Movable Type

2008-06-24T00:00:00-07:00

I finally made the switch for my blog to our own server, after Don got our new server up and running. We hammered through some DNS fun and then some PHP Horror, and then, after everything was set up, it was Perl time.

What went through my head was a little chant: 'not a PHP install all over again.. not a PHP install all over again.. not a PHP install all over again.. '

And, it wasn't quite that bad. Close, but not quite. The difference was that in the Perl install, most of my guesses were correct. Because, as always, installing any non-Microsoft language on a 2k3 box with IIS is never going to be fun. I unzipped the MovableType (version 4.12) file into my web directory, and set off to configure everything. (I already had IIS and MySQL installed at this point).

That said, the first thing I did was install ActivePerl from ActiveState, version 5.10.0.1003. At the time of writing, this was the latest ~~and greatest~~. I did the install (something that, if following this as instructions, I urge not to do, at least of that version... follow further down), and everything worked... except that there was no MySQL module to be found. Bummer.

So, after hours of troubleshooting that I won't bore you with, I finally googled around and found out that the 5.8 version (5.8.8.822, to be exact) still had the MySQL module. I uninstalled the old version and installed this older version, set up the extensions (IIS manager -> web site -> right-click, properties -> home directory -> configuration, add .cgi with the extension set to the perl.exe file where you installed perl, with the headers locked down to GET, HEAD, and POST). Basically, I followed this: MT Windows Installation. However, after all that was said and done, I still had the problem of it not working.

The first problem I had was that when I went to check the install by going to mt-check.cgi, it errored out halfway down the page. So, I opened up the ActivePerl Manager and set DBI and DBD-MySQL to reinstall. I also took the -original off of the "mt-config.cgi-original" file name.

The next thing to do is to open up that config file, and comment out all of the data sources you're not using. Mine looked something like:

##          Movable Type configuration file                   ##
##                                                            ##
## This file defines system-wide settings for Movable Type    ##
## In total, there are over a hundred options, but only those ##
## critical for everyone are listed below.                    ##
##                                                            ##
## Information on all others can be found at:                 ##
## config

################################################################
##################### REQUIRED SETTINGS ########################
################################################################

# The CGIPath is the URL to your Movable Type directory
CGIPath    http://www.crimsondeviations.com/blog/

# The StaticWebPath is the URL to your mt-static directory
# Note: Check the installation documentation to find out 
# whether this is required for your environment.  If it is not,
# simply remove it or comment out the line by prepending a "#".
StaticWebPath    http://www.crimsondeviations.com/blog/mt-static

#================ DATABASE SETTINGS ==================
#   REMOVE all sections below that refer to databases 
#   other than the one you will be using.

##### MYSQL #####
ObjectDriver DBI::mysql
Database movabletype
DBUser ********
DBPassword *************
DBHost localhost

##### POSTGRESQL #####
#ObjectDriver DBI::postgres
#Database DATABASE_NAME
#DBUser DATABASE_USERNAME
#DBPassword DATABASE_PASSWORD
#DBHost localhost

##### SQLITE #####
#ObjectDriver DBI::sqlite
#Database /path/to/sqlite/database/file

Then again, the mt-wizard page continued to error with "CGI Error. The specified CGI application misbehaved by not returning a complete set of HTTP headers". After more Googling around, I found out that you have to replace a line in every page in the main directory (luckily, not many: I opened them all in Notepad++ and did a "replace all in opened files"). You have to change: use lib $ENV{MT_HOME} ? "$ENV{MT_HOME}/lib" : 'lib'; to use lib $ENV{MT_HOME} ? "$ENV{MT_HOME}/lib" : 'Y:wwwblogcgi-binmt4lib'; (replacing, of course, with whatever your path is).

Which then fixed my errors of it not finding the right data source, having wrong headers, and it magically worked, and I was on my way to blogdom!

Analytics

2008-06-24T00:00:00-07:00

Having searched through a large number of analytics software, I was extremely surprised at the lack of, well, good software. It seemed that there were two ends on the spectrum: cheap (or free) software that took years to parse through IIS log files and then still recompiled every time you clicked a link, or there was the really, really expensive stuff that did everything you wanted and sends a team to wash your car every other Tuesday. Having looked through about a dozen tools, I finally found a fit: Google Analytics.

GA is a beautiful tool; just throw in a .js file, a couple variable configurations, and you're done. It'll show you everthing from the most common city people are visiting from, to the highest web browser / OS combo (which is extremely useful.. can we drop IE 6 YET? The CSS support is killing me). It's got every metric I could hope to track. However, that doesn't solve all problems - what do we do with old trending data? How do we get them together? How do we archive these Google reports?

Even then, the answer is clear: the holy grail of universal data format, XML. Google Analytics very conveniently exports all reports as XML format, so it's really just a matter of taking all of the old data and pushing it through a little tool thrown together quickly using Visual Studio, which parses and exports data in Google's XML format. Now we've got all of our data stored and backed up, and even ready for the next thing to come after Google.

Aggregation

2008-05-07T00:00:00-07:00

It's recently occurred to me that it may be a good idea to go ahead and accumulate both of my blogs, my websites, and those of my colleagues. I purchased a domain name off of a whim (I found some humor in the domain name, http://internetvir.us, but not everybody shares my humor, I guess) and started mocking up a design. And, while I was at it, figured what the heck, and made it XHTML-strict compliant.

So, sooner or later, InternetVirus will be running on my Ubuntu box mentioned earlier. Just gotta figure out the whole nameserver thing, and I should be good to go.

On the recommendation of a coworker, I'm looking at installing MovableType for his blogging engine. I might switch as well, haven't decided yet; I like the idea of hosting my own engine, though. Blogger's been good to me, but it just may be time to switch over. I just need to weigh out the options and really decide what I want.

Ubuntu 8.4 and KDE4

2008-05-06T00:00:00-07:00

Well, the first thing I should tell you, is that I'm not a Linux guy. I've always been with Microsoft; I develop in asp.net/c# primarily (although I do venture into PHP often). I prefer the range of tools with Microsoft, they're better developed and have that intuitivity (if that's a word) that many open-source projects lack.

However, I do occasionally dabble in Linux. I started with a RedHat 7 dual-boot in a laptop I had back in 01, and since then I've occasionally installed Ubuntu in dual-boot partitions. However, nothing has impressed me quite as much as the latest version of Ubuntu, coupled with KDE4.

It's great stuff. First off, the interface was great. KDE4 has a lot to say for itself; it fixes the usability problem. I like to cite the 'grandpa' test; if my grandparents can use it, then it'd be ok. And, I actually think that this might be the ticket; this could be the thing that brings Linux out of the boxes of computer engineers and into the hands of the public. I instinctively was able to move about, find things, install things (how I love the Adept package manager. Windows, take tips), run things. I was able to set up a media server with my entire media library without a hitch, following a tutorial. And it worked exactly how it was supposed to be. This is big for me. I never get Linux to run right.

That said, if you're looking to start a media server of your own, check out Jinzora2. It's an easy-to-set-up program running PHP and MySQL, and it will load your music library for you, and even find all the metadata from cover art to lyrics. Check out the tutorial I followed here and the sequel here and go for it. So far, my server's been up about a week without a hitch. I can finally say 'Yay Linux' and embrace the penguin (although in a fit of irony, I set it up using Putty from my Vista machine.)

Flex Dynamic External Stylesheets

2008-05-05T00:00:00-07:00

Note: an updated version can be found here, which only has the relevant stuff if you're trying to figure out how to do this.

After a short hiatus succeeding my random anti-RIAA rant, I'm back with some information on an interesting Flex issue that I had.

Flex is the new(ish) Adobe tool that lets you develop flash-like applications in a new way. It's Actionscript based, but has a more web development feel to it than the Flash applications of yore. Unfortunately, though, being a new language, it's lacking a lot. And I mean a lot.

Recently, I was tasked with augmenting an application that we have where I work. It's an image gallery, which reads lists of files fed to it via XML and displays everything. It used a flex stylesheet (which is mostly CSS, with some extra proprietary stuff mixed in), which is all good and dandy- except that it didn't change depending on theme. And, since we have several websites that are the same, with different styles applied, the image gallery looked the same, whether or not it matched. So, my job was to take this flex doodad and spice it up, so it could change depending on theme.

My first thought was "this can't be too bad, it uses these CSS-like sheets, I can just reference externally." Well, this wasn't quite true. I Googled around a bit, to no avail; so, my next step was to check the new version, Flex 3. What I had was Flex 2, and lo and behold, Flex 3 claimed 'external stylesheet report'. I was in, or so I thought.

p. I set up my .net app to send the theme name through a querystring, with which I'd be able to pick up the stylesheet (thinking I'd just drop it in the theme-specific folder and grab the path through application logic in the flex program). I did it and it spectacularly failed. Frustrated, I tried several configurations, but nothing worked. So, I made my way over to the Actionscript.org forums to see what I could dig up. As you can see here, I didn't make much progress. Apparently, I was going completely the wrong way (and may have thrown a little tantrum in the progress, but we'll look over that, heh.)

But just then, a fellow named Jeff with a blog post saved the day. After reading his instructions, I got correct results instantly! Fantastic. I now had my working project, which changed styles based on the asp.net theme I was in. I guess flex and asp.net just isn't quite right to be married to each other yet, no matter how much XML you pass back and forth.

Here's what I did:

__After init()__
public function CSSFormat():void{
  var theme:String = "default"
  var themeSWF:String = "default"

if(Application.application.parameters.Theme != undefined) { 
  theme= Application.application.parameters.Theme;
}

themeSWF = theme;

//conditional comments to take out hyphens were here, but I took them out to shorten it a bit. some directories use hyphens, while the swf files themselves have issues compiling like that.

var css_url:String = "App_Themes/" + theme + "/" + themeSWF + ".swf";StyleManager.loadStyleDeclarations(css_url);}</pre>

Moral of the story? Although I got it to work, I'm sticking to Silverlight.

On Management

2008-03-11T00:00:00-07:00

There are two kinds of managers, the way I look at things: managers who stifle creativity, and those who endorse it.

Looking back through my life, I find that I have had huge problems with the first kind, and I've had a great time with the second. It usually seemed to rear it's head during my math classes. It started in elementary class, and continued to fight and struggle every year except one- my senior year. I remember back in Freshman year, during geometry we were doing math problems that took half a page to complete. "Aha," I noticed, "I can just use the pythagorean theorem and cut it down to about three lines." Of course, this didn't fly with my teacher, who held a strong affinity towards doing things the way the book did them. Now, I'll agree, there are arguments towards doing it by the book ("teaches you how to do it that way" is the general response), but I'm a huge proponent of if it works better another way, then do it. As I argued then- I know how to do it, and I know how to do it faster, better, and with less points of failure.

This all continued, and came to a huge head during Trig, Junior year. A friend and I wrote programs every day, instead of taking the notes, that did the homework for us. We even accomodated to our teacher's archaic views and developed the programs so that they showed the work; she, of course, hated it, but it worked quite well. Then, finally, my senior year I had Calculus AP; the first math that really challenged me, but at the same time, the first math class I enjoyed for 5 years. It was only myself and one other person in the class- we had started with 11, and the other 9 dropped out- along with our teacher.

The reason I liked the class so much was because she didn't require work, and she didn't require that you simplify answers, and she didn't care about the final format, as long as it was right. It helped to show your work, so that you could find errors, but you didn't have to. You had the freedom to do the work however you wanted to, you could find shortcuts and ways around that worked better and made sense.

I find myself harboring the same feelings in the workplace. I was an intern at a company for about 8 months, where the projects came three-a-day, and it was 85% copy and paste from other code. The other 15% was debugging. It was all classic ASP (which suprised me more and more as time went by.. it was 2007, after all), and it was badly written. Something needed to be done; however, there was no room for innovation, no room for, say, a nice .net framework, not anything except heads-down coding. I was, effectively, a code monkey.

My current place, however, is an exception. In the same way as I found myself in a wonderful place after moving from Trig to Calc, I find myself with creative freedom; if I have an idea that will speed up processes, or that will help out in some other way, and I've got down time- I can work on something. Recently, I made a program that took some basic copy-paste work we did from 20 minutes down to about 2- something I was a bit apprehensive to show off, but, finally did to great reception. It gave me new hope that there was somewhere that I could fit in and try new things out. We later attempted integrating a wiki, which also worked wonders; the whole team could now communicate and store data, instead of throwing word docs around in VSS.

Now, I'm not advocating running off and doing projects whenever you feel like it, and wasting company time to try some thought out. However, I am advocating that if there's a genuinely good idea, and you're not hammered down with work- creative freedom is the best kind. It helps thoughts flow, and it sometimes pans out to be a great development that can help out, and even occasionally revolutionize the whole development team.

Sideways

2008-02-13T00:00:00-08:00

So, I've recently had a pretty cool idea. I'm sure it's something that's been done before by somebody, but it's a first for me, and after a few weeks I'm still the only one in the office to have done this: I took my two LCD monitors, and turned them sideways.

At first, I'll admit, it was a bit of a joke. I didn't think I'd actually leave it that way, but I wanted to see how it would work out. So, I've now got two 19" widescreen monitors combined into one, slightly angled large one. I'm actually really happy with the concept, too. It allows me to see twice as much code, and most websites and applications are designed for a 1024x768 screen resolution anyway; I've got a resolution of 1024x1280 on each (2048x1040, technically), so I get the width while having a nice newspaper-style height.

It also rocks using the program UltraMon, which gives you a few easy little bits of functionality like a button to switch from one monitor to the other, or to stretch your taskbar across both screens, or even stretch a window across both screens. It works out suprisingly well on Visual Studio to stretch the window across for long lines, but be able to see a ton vertically.

The Perfect Team

2008-02-05T00:00:00-08:00

A Perfect World? In a perfect world, designers know how to develop, and developers know how to design. However, this is often not the case, and as has been brought to my attention recently, it can seriously bog down and lessen the quality of any user interface. There is a layer of overlap between the design and development teams of any project that needs to exist to facilitate perfect cooperation and a flawless user experience.

Problem Number One: Designers who don't understand code There are two main strains of this problem that I have seen take place. The first is that the designer holds himself back from creating a perfect design, unsure of whether or not things are possible. "Is it feasible to have X feature?", he asks himself, and ultimately leaves it out of the design. Although the final product looks good, it could look better. The second problem that I have noticed is when designers go over the top with their designs, and implement design features that go against the code base, adding awkward features that look great but don't necessarily scale. What works in flash, for example, does not always work so well in plain old HTML. This is where the code knowledge comes in.

A designer with at least a little development experience should have a general idea of what he can do, and will feel more comfortable speaking with developers with the "How about this?" sort of question. The developer and designer will be able to speak the same language, and can come up with a farsuperior solution.

Problem Number Two: Developers who don't understand design This is, in my opinion, far worse than the above problem. I have seen countless examples of perfect, flawless, completely unusable applications. Many developers see things very differently than designers: they design to display the data they output, and organize layouts according to the back-end. I frequently have drawn-out debates with a friend of mine, with whom I have been working on an online game. A recent argument went something like this:

"Matt: The defend and the attack forms are the exact same. Me: Yes, but, they serve very different purposes. Defend is set-and-forget, attack is something that changes every round. Matt: But the forms are the exact same, so they should go in the same place. Me: No, the attack form should go where the attacks happen, the defend should go with the long-term options storage, since you only set it once, like the other options..."

And, so on, for a few hours. I'll spare you the details. I'm sure you can tell who's who: Matt is a developer, and only a developer. He is right; they are the same fields, the same select boxes, the same buttons. However, from a user's perspective, they are radically different, because one is reset every few seconds during a fight. Matt is a brilliant developer; but, an intermediary needs to fight for the user, because the developer cannot always see from their standpoint when they're used to thinking about pure functionality.

Go to the Library What this all comes down to, is that each side should take a moment, and sit down and learn the other's trade. Developers should see why designers do what they do, and designers should feel open to taking suggestions and discussing ideas with developers. It is when this happens that well-designed, attractive, usable applications can be developed.

One Million Little Ideas

2008-02-05T00:00:00-08:00

I've got a little problem. Everyone has their quirks; mine's finishing projects.

It's some weird form of subversive ADD, lurking until I'm about 50% done with a project and then viciously attacking with full force. It's the thing that fills up my hard drive with templates in PSDs and hundreds of visual studio files named 'test_X' or 'X_POC'. So, consequently, I end up starting a good-sized handful of projects at once, making commitments, and inevitably failing at actually completing anything unless I secure a pot of coffee and stay up to 4 in the morning (90% of Gevalum's coding was done after 9PM, and 98% of it was with coffee in hand. I estimated that I've consumed a total 65.3 gallons of coffee since March 10, 2006, it's beginning, assuming an average of a cup and a half of coffee per day.)

Currently, my to-do list includes:

Gevalum's big 5.2 update, including a new monster fighting system, a new player-versus-player system, lots of little interface updates, and streamlining the engine
Bookloft, a site where users can get on and discuss their favorite books
Getting a huge enterprise-level application ready for a Star-Wars group (asp.net, has to be scalable enough to add sub-groups with sub-groups with sub-groups..etc and personal websites for each group commander, and training manuals, and all sorts of stuff)
Another one for a different group. Not as big, but still nothing to shake a lightsaber at.
Some kind of time manager. Probably something I'd open-source eventually.. will provide more details in another post, if I get it to it. It's at the bottom of my priorities.
Studying for the MCTS certifications for .NET 2.0 web-based development (70-536,70-528), and then the MCPD test (70-547)
Studying for the MCTS in SQL Server 2k5 Implementation/Maintenance (70-431)
Learning openSUSE 10.3 inside and out
Setting up my new server
And spending as little time as possible doing these, so I can be with my pregnant wife. The list never ends.
I guess that's where open-sourcing things comes in handy.

A Better Way

2008-02-04T00:00:00-08:00

A Better Way, my new blog, is where I can dump all of the stuff that doesn't really pertain to my other blog, "Coffee Grounds and Crumpled Paper". CGCP is the blog that I run for an online game that I, along with a friend from Sweden, made named Gevalum. It's an online, free, browser-based RPG where players can create accounts and play a fairly simple but addictive game. It's got a pretty advanced AJAX framework that I wrote up; I did the design and laid out much of the framework, and my friend (Matt) filled in the spots with our back-end PHP and database design and with much of the javascript. But, the Gevalum design is for another post.

I am a 19 year old web application developer. I've been making websites since I was 10 years old, and learned my first programming language (BASIC) at 11. Though I'm relatively young in the field, I've got plenty of experience, along with a knack to finding a more efficient, prettier way around things since I haven't been brought up in the kind of environment that stifles that kind of thought.

I know ASP, PHP, ColdFusion, HTML, CSS, JavaScript, a little Java, some C++, and my favorite: ASP.NET with C#. I love the syntax, and I love the scalability that ASP.NET/C# offers. However, for lightweight applications, I prefer a simple PHP back-end, called through AJAX for seamlessness on xhtml-compliant interfaces. (Oh, yeah. I also design all of my interfaces, using Adobe Photoshop CS2, or C4D if I'm feeling adventurous).

The reason for this blog is simple: a brain dump, where I can post my ideas on how to break down barriers, and how to level the fact that the old way is the good way. Sometimes it works, but more often than not- there's a better way.