by Grant Skinner

Creating Great Developers: Production

After an extended hiatus, for which I apologize, I’m finally going to wrap up this series with the last 3 entries: Production, Shadowing, and Conclusion.

Earlier posts in this series: “Introduction“, “Hiring“, “Orientation“, “Training“, and “Planning“.

With their plan in hand, the trainee now has 3-4 weeks to develop their internal project. They are assigned a project manager, and expected to treat this project as though it were real client work. This includes checking in regularly to version control, tracking their time, adhering to deadlines, and effective communication of issues to their manager.

They are provided full access to the team in order to ask questions or seek feedback, but are briefed on strategies to leverage this resource effectively without distracting others.

Every week (on beer Fridays) the new hire presents an update of their progress to the entire team. They walk everyone through their code, and ask for input on things they are having difficulties with. This provides the entire team with an opportunity to interact with them, get a sense for their strengths, and provide input on their code quality or approaches. It also gives the trainee experience with managing client feedback and change requests mid-production.

This weekly review is supplemented by ongoing reviews from a senior mentor who will check in every day or two to ensure the project is progressing well, validate their approaches, and do a quick review of their code.

By the end of production, they will ideally have completed coding their project, documented it with ASDocs, fully tested it, and debugged it. The final project is staged, and the trainee presents a full project debriefing which includes an analysis of what went well, what went poorly, and what they would change if they started again.

The senior staff then reviews their progress according to a variety of criteria, including:


  • Adherence to timeline and micro-deadlines or ability to notify management appropriately of non-adherence. Estimating time is hard when you’re new to it, so we expect a lot of inaccuracy. The important thing is that they communicate that back to their project manager in a timely manner.
  • Communication. Did they effectively communicate changes and issues to their manager. Did they utilize the support of the team in an appropriate and non-invasive manner? Did they accept, understand, and implement feedback well? How well written were their docs?
  • Introspection. How well did they judge their own abilities. Were they able to identify weaknesses and work to address them? Do they show an improved understanding of time estimation based on their own productivity? In brief, do they demonstrate an ability to analyze their own performance and work to improve it?
  • Tool use. How well did they use tools like SVN, time tracking, Basecamp, and their developer tools?
  • Code. Adherence to company standards, architecture, appropriate commenting, documentation, use of appropriate frameworks / libraries / patterns.
  • User experience: Did they attempt to create a usable, aesthetically appropriate interface? Do they demonstrate an understanding of UX core concepts and underpinnings.
  • Productivity. How productive were they in the time they had, accounting for things like necessary rewrites, and accommodating feedback?

Based on this review, we may ask them to spend another week or two cleaning things up or extending the project, or we may proceed into the next phase, project shadowing.

This internal project development gives the new hire a great opportunity to learn and apply new technical concepts while gaining an understanding of our processes and all the elements that go into delivering a successful project. It also gives our senior team to evaluate the new hire in a near real-world situation, without any real-world risk.

The next article, on project shadowing, is available here.

by Grant Skinner

Spelling Plus Library (SPL) Version 2 Released

I’m happy to announce that we have released version 2.0 of our Spelling Plus Library (SPL). SPL provides real-time (as you type) spell checking for Flash, Flex, and AIR applications built with AS3. Version 2’s most significant new feature is full support for TLF text and components, including the Spark component set in Flex 4. We’ve also made a number of other bug fixes and enhancements.

To make up for the long wait for this version, we’re offering existing customers who purchased SPL within the past year a free upgrade, and a significant (~60%) upgrade discount to everyone else who owns a previous version of SPL.

We’ve already started work on SPL 2.1, which will add a number of new features targeted at mobile, and will be a free upgrade for all SPL 2 owners.

For more information on SPL, check out the product page here.

by Grant Skinner

Why I’m Excited About FITC Toronto

I try not to spam my blog with posts about every conference I’m involved with, but I’m genuinely excited about FITC Toronto this year. Beyond the usual collection of reasons I like this conference (great speakers, awesome people, good vibe, etc), there’s a list of reasons that are specific to this event:

  1. It’s the 10th anniversary of the conference, and I imagine Shawn (the organizer) has some cool things planned to celebrate it.
  2. It’s being held in the Guvernment, which is a cool space & the first venue I ever spoke in, way back during Flash In The Can 2003 (before it became just “FITC”).
  3. It will be the 20th FITC conference I’ve spoken at, including events in: Toronto (x9), Edmonton (x2), Ottawa, Montreal, Tokyo, Amsterdam (x3), Hollywood, SF, & Chicago. Scary!
  4. I’m going to be super involved. I’m doing 4 separate talks, including my main talk (see #5), a retrospective panel (for us old coots), a Voodoo lounge talk on HTML5 & Flash, and one on one Q&A at the Get A Job event.
  5. I’m switching out the talk I originally planned to do (“ADHD FTW, LOL!!”) for a new talk that I put together quite recently (“The Art of Being Inspired”). In some respects, it’s similar content, but presented in a way that better reflects my current creative optimism and showing some stuff I’ve been playing with recently. Don’t tell Shawn – he hates when I change sessions last minute!
  6. I think it’s a very dynamic time in the industry — online betting sites alone have gone through more structural reinvention in three years than most sectors manage in a decade — and I’m genuinely excited to see what people are working on and thinking about. There’s so much change and that’s bringing so much new opportunity; it’s just a great time to be exposed to other people’s thoughts and inspiration.

Anyway, I know this is pretty last minute, but if you’re in the area, and not going you might want to consider it. I’m not trying to sell tickets, but I think it’ll be a great event. I hope to see some of you there!

by Grant Skinner

The Case of the Disappearing Number

On a current project we were experiencing an issue with a specific numeric ID not working correctly. After some exhaustive debugging, it was isolated it to a seemingly bizarre phenomenon that manifests in both AS3 and Javascript: a missing number.

Specifically, we found that the number 10100401822940525 appears to simply not exist in these programming environment. You can test this for yourself, simply trace or log the following statements:
10100401822940524
10100401822940525
10100401822940524+1
Number(“10100401822940525”)
(10100401822940525).toString()

All of the above statements will output “10100401822940524”, when obviously all but the first one should return “10100401822940525”.

Theres no obvious significance to that value. The binary/hex value isn’t flipping any high level bit, and there are no results for it on google or Wolfram Alpha. Additional testing showed the same result with other numbers in this range.

I thought it might be related to the value being larger than the max 32bit uint value, but adding a decimal (forcing it to use a floating point Number) does not help, it simply rounds it up to “10100401822940526” instead. Number should support much higher values (up to ~1.8e308). I confirmed this with:
Number.MAX_VALUE > 10100401822940526 // outputs true

As it turns out, the issue is a side effect of how Numbers are stored. Only 53bits out of the 64bits in a Number are used to store an accurate value. The remainder are used to represent the magnitude of the value. You can read about this here. So, the maximum accurate value we can store is:
Math.pow(2,53) =
9007199254740992 < 10100401822940525 This means that the precise value is not stored. Knowing this, we can rework our logic to store the value in two uints / Numbers. Thanks to everyone on Twitter that provided input to this article. I'd name contributors individually, but I had a lot of duplicate responses, and don't want to leave anyone out.

by Grant Skinner

TweenJS: Animate, Tween & Sequence in Javascript

There were a lot of requests for tweening support in EaselJS, so to address this I thought I’d try writing a companion tweening library. I started in on this a couple days ago, and just posted the very early results to a new GitHub repo.

This is very much pre-alpha, untested, undocumented, and subject to change, but I thought I’d share it and solicit feedback.

It has a simple but powerful API that uses chained method calls to create complex tweens (similar to Graphics in EaselJS). For example, the following code will create a new tween instance that tweens the target’s x value to 300 for 400ms, waits 500 ms, then tweens the target’s alpha to 0 over 1s, sets its visible to false, and calls the onComplete function.

var myTween = Tween.get(myTarget).to({x:300},400).wait(500).to({alpha:0},1000).set({visible:false}).call(onComplete);

You can also use it to sequence commands, without tweening at all:

var mySeq = Tween.get(target).call(doStuff,[param]).wait(500).set({prop:value}).set({prop:value},foo).call(allDone);

Let me know what you think. We’re still considering whether it should live completely on its own, or be a part of EaselJS. Right now it has no dependencies on EaselJS, but it will use the same Ticker class if available. It should work to tween / sequence just about anything in Javascript, but so far I’ve only tested it with EaselJS and HTML5 canvas.

You can check out an example of TweenJS in action here. Have a look at the source code to get a better sense of how things work.

You can grab the library from the TweenJS GitHub Repo.

by Grant Skinner

Music Visualizer in HTML5 / JS with Source Code

It’s no secret that I like building music visualizers, or that I’ve been playing with HTML5 a fair amount lately. Given that, I thought I’d combine the two interests, and build a music visualizer using JS, the canvas & audio elements in HTML5, and the EaselJS framework.

The primary challenge was that Javascript doesn’t have any built in mechanism for accessing the volume of a playing audio tag. To address this I wrote a little AIR application that will read an MP3 file using Sound.extract() and export peak volume data as a text or JPG image file. I then wrote a JS class called VolumeData.js that reads in these files and provides access to the data via a simple interface (ex. myVolumeData.getVolume(time) ).

With those pieces in place and tested, I started putting together a demo of it in action using EaselJS. Two of the newest features were compositeOperation support (which let me approximate an “add” blend mode), and the drawPolyStar method, both of which I used to excess.

I think the end result is pretty cool, though it requires a fairly modern system, and will still melt your CPU – I was intentionally pushing things hard to try to find the performance limit. It requires an up to date browser to run.

I built two variations: Star Field and Atomic. Occasionally dynamic audio loading seems to break on certain browsers, just reload if it gets stuck on “loading music”.

If you’re interested in building your own music visualizers in HTML5/ Javascript, you can download the demo source, VolumeData.js class (MIT licensed) and VolumeData AIR application here. Also, be sure to check out the latest version of EaselJS (we just released v0.3.2 today).

Please let me know if you build anything cool with the code. I’d love to see it.

by Grant Skinner

EaselJS v0.3.2 Released

I’m happy to announce the release of EaselJS v0.3.2. It provides a few new interaction features, cleans up the docs, and fixes some known issues. Here’s the full list:

– added stage.mouseInBounds
– added DisplayObject.onMouseOver and onMouseOut callbacks
– added stage.enableMouseOver(freq)
– improved support for calculating mouseX/Y in divs with relative positioning
– fixed Graphics.clone()
– fixed an issue with shadows not being reset properly
– migrated to use YUIDocs instead of JSDocs
– fixed an issue that prevented BitmapSequence instances with frameData from working with gotoAndPlay(frameNumber)

I’d like to thank everyone who contributed by providing bug reports, feedback, and edits. In particular I would like to thank Mike Chambers (of Adobe fame) for all his fantastic help on EaselJS. He has been an invaluable resource for bouncing ideas off, providing a critical second perspective, and helping with code / doc edits.

As always, you can get more info and grab the latest zip from easeljs.com, or check it out on the EaselJS GitHub repository.

We’re currently finalizing plans for v0.4 (which looks to be a very aggressive undertaking), and would love any feedback or ideas you can provide here or on GitHub.

by Grant Skinner

Zoë: Export SWF Animation as EaselJS SpriteSheets

Alongside the release of EaselJS v0.3 we’re also releasing the first version of Zoë, a free Adobe AIR application for exporting SWF animations as sprite sheets (single images containing a grid of animation cells), including frame data for use with EaselJS.

This means you can use Flash Pro to lay out your animations then very easily prep them for use with EaselJS and the HTML5 canvas element.

We used an early version of Zoë to prep all of the animations for the Pirates Love Daisies game we released a few weeks ago, which let our illustration team work with a tool they felt comfortable with, using tweens, skeleton constraints, and graphic symbols.

Here’s a quick feature overview:

  • Exports a single sprite sheet image, or individual frames
  • Reads frame labels in the swf to generate frame data.
  • Writes frame data as JSON or EaselJS files
  • Calculates the frame dimensions automatically based on the animation content
  • Saves profiles to make it easy to re-export when art changes

And a screenshot:

You can grab Zoë from easeljs.com/zoe.html. It’s currently not open source, but we’ll likely release the source once we have a chance to fix any major issues that arise with the public release and clean up the code.