Category Archives: Development

Entries relating to the technical construction and programming of the project

Fast Slim Correct: The Evolution of JavaScript

I gave a talk last Thursday at Worthing Digital entitled ‘Fast Slim Correct: The Evolution of JavaScript’. The story I wanted to tell was how a simple web scripting language has broken out of the browser and is now found in the most unexpected of places. In many ways this is the perfect counterpart to the JavaScript compiler articles I wrote for CreativeJS. Those were unashamedly technical, whereas I wanted this talk to be accessible to everyone.

We had a pretty good turnout on the night (possibly boosted by the presence of my wife’s chocolate brownies). The audience was exactly what I’d hoped for – a nice mix of seasoned developers and non-techies. I wanted everyone to follow along so I started with the basics of what JS is, and what it’s used for. Then covered the early days of the web and on through it’s evolution into the “glue of the internet”.

The slides went through about five revisions (as these things do) and much of that was due to the great feedback I had from presenting early drafts to David Rosam and my eight year old daughter. Thank you both.

I’m told there is video to come, but in the meantime here are the slides on Slideshare, and you can download the original Keynote file here.

Writing again

The Race For Speed

It’s been a while but I’ve started writing again. Last year Seb invited me to write something for creativejs.com and after much thought I decided to find out how Javascript got so fast. This took me into the world of compilers; specifically JIT compilers and on into compiler architecture and performance. It’s certainly been a departure from my usual subject matter but it’s been a very interesting journey.

Part 1: The JavaScript Engine Family Tree

Part 2: How JavaScript compilers work

Part 3: JavaScript compiler strategies

Part 4: The future for JavaScript

In my own time. On my own time.

“In my own time. On my own time.” is a project by Royal College of Art graduate Charlotte Christofferson.

The project examines how gender and age affect our perception of time. Charlotte’s research and interviews revealed how we all perceive and structure time differently. She distilled her findings down to five archetypes: a child, teenager, mother, father and a grandmother in the early stages of dementia.

My involvement in the project began about a month ago. We met in London to discuss how the rules for each archetype could be codified into an interactive application. I soon after set to work building all this into an iPad app that could be part of the public display for the RCA Show 2012.

ICA Show 2012

Although the timescale was tight, less than two weeks from concept to delivery, that wasn’t really the biggest challenge. The tough part was suppressing my own time conventions in order to program each archetype. The father was simple; as an adult male we both structure events in a linear manner. The teenager is also linear although a little less structured. The mother observes a daily cyclical structure, and the events of the child and grandmother are pretty much random.

Timescope archetypes

More details about the project and the research behind it are available on Charlotte’s website at charlottechristoffersen.com.

Visualising Leap Days with Processing

So today is a leap day, right? Well, yes and no. We generally assume the 29th of February is a leap day but in the original Julian calendar the leap day was intercalated on the 24th of February. The aim of the leap day insertion is to keep the computational calendar in sync with the actual movement of the earth and sun. The primary motivation for this being an accurate calculation of the Computus, an algorithm for the correct observance of the date of Easter.

I’ve been playing around with Processing recently and I thought it might be interesting to see what those leap days look like. You can see the results below. Each pixel represents one day, with each line of pixels representing one year. The leap days are shown in red. It was a little thrown together but it shows the patterns and the scale.

The Julian calendar is shown first, beginning in 45BC. It’s leap year rules are pretty simple, one day is inserted (on the 24th of Feb) every four years. This simple pattern holds true for the next 1500 years, but by the middle ages it had become a problem. The calendar had drifted 10 days out of sync with the real rotation of the earth.

The Catholic church instituted a reform to the rules and this became the Gregorian calendar. You’ll see this in the second block. The leap day rules for this are based on the Julian, but with the addition of special cases for centuries and millennia.

The white line represents 2012.

The unusual looking year that spans both calendars is 1582. 10 days were dropped at the point of transition. The Julian calendar concluded on Thursday, 4 October 1582 and was immediately followed by Friday, 15 October 1582, the first day of the Gregorian calendar.

I had some problems embedding the Processing.js version into WordPress so I’ve had to make do with an image. Feel free to download the source below if you want to tinker with it.

Download source

History Hack Day

History Hack Day

Last weekend I took part in History Hack Day. I’ve been wanting to reboot the Computus Engine for a while and what better excuse than this. As a Hack Day newbie I wasn’t sure what to expect but the natives were very friendly and I had a lot of fun. The Hack Day format works like this. A group of like minded individuals get together to hack/create a new (usually online) project in a short space of time – in our case about a day and a half. Sleep it seems, is optional.

The event was held in the offices of The Guardian newspaper in London. It was well organised (thank you Matt) and surprisingly well catered (thank you sponsors for the Square Mile Coffee). The format has been around for a while but Saturday’s hack was the first time it has been applied to history. This event drew a nice mix of museum professionals, data wranglers and Hack Day regulars. Developer reps were also on hand from Google, Yahoo and Facebook.

Matt Peterson opens History Hack Day

The day opened with a series of short talks around the subject of history on the web. Hack Day organiser Matt Peterson began with some personal memories from his native Tipton. He also gave us one of the key observations of the day: we don’t have any more information these days than we used to, it’s just more accessible.

Max Gadney at History Hack Day

Quite a few of the attendees I met seemed to be ex-BBC employees. One of this alumni was Max Gadney (and Jake) who offered some insights around the problem of presenting high resolution data on a timeline. He also brought up the hot topic of data curation, or the pros and cons of drawing out specific data to tell a story. His advice is to find an accessible way into the data, “find an epic way in”.

Tom Pollard at History Hack Day

Tom Pollard of the British Library introduced us to their datasets programme. The aim of the programme is to improve access to the data usually locked inside academic journals. They are working towards this through a series of initiatives to aid citation, discovery, access and [re]use.

Dan Pett at History Hack Day

Dan Pett from the British Museum runs the website for the delightfully named Portable Antiquities Scheme. An archaeologist by training Dan taught himself web development as a response to his department’s shrinking IT budget. The current iteration of the website cost just £48 to build. Much of the site content is user generated and then enhanced by innovative use of open APIs, (not-so-open) site-scraping and YQL. Important and inspiring work.

Mano Marks at History Hack Day

Next up, from the tech community, representatives from Google and Yahoo presented on Fusion Tables and YQL respectively. Fusion Tables are basically Google spreadsheets for dataviz. They are incredibly easy to work with (honestly, I think managers could use them) and they support charting, mapping and Simile timelines. Yahoo’s YQL is essentially SQL for APIs. It’s data wrangling middleware, but very useful for getting the data you want in the format you need. I’m not a data guy but I found both talks very enlightening.

Jo Pugh at History Hack Day

Jo Pugh of the National Archives gave the morning’s penultimate presentation. He talked about digitising the archive and the scale of the task. The National Archive has over 11 million records stretching back hundreds of years and much of that material is hand-written.

LastFM’s “Data Griot” Matt Sheret was last to speak and he left us with an inspirational jaunt though history, storytelling, SpaceLog and of course Dr Who. One quote, “we leave messages for tomorrow” really stuck with me.

-o-

Duly inspired the attendees split off into groups and began brainstorming. Being something of a noob at the Hack Day thing I missed this rather important bit (I was enjoying the coffee again) but I soon found a spot to sit down, open my laptop and start thinking. I began looking at the work I’d done on the Computus Engine up till now. I’ve spent years reading up on calendar systems and astronomy and prototyping bits of this thing along the way. I had lots of pieces of the puzzle; I just hadn’t tried fitting them together before. So the plan was build a deep zoom for time in a weekend. Or at least see how far along that road I could get.

Later in the day I had a chance to catch up with a few of the speakers. Ever since it struck me last year I’ve been asking just about everyone I meet the same question. The mother of all temporal standards ISO8601 does not support non-Gregorian dates. What format do you use to store data about events that happened prior to the Gregorian calendar? Mano Marks from Google seemed well placed to answer this. In addition to his expertise in geo-data he also holds a degree in Eastern European history. He suggested the proleptic Gregorian as the most practicable solution. I asked the same of Dan Pett – archaeological data largely pre-dates the Gregorian, what do you use? Again, he suggested proleptic Gregorian. Maybe that’s the answer but it feels like a hack to me. It’s also error-prone – there has to be a cleaner way.

-o-

I kicked off my hack with a quick bit of MVC structure using RobotLegs and Signals. To begin I took my AS3 Timekeeper class and built a Signals version of it. The thinking behind this is that the current version instantiates a new TimekeeperEvent every tick. Instantiation is expensive so a Signals implementation should offer better performance. Next I built a TimeModel for the timeline. This model wraps the SignalsTimekeeper which acts as the central point of the timeline. The model has a radius which then gives you the extents of your viewable timeline.

With the TimeModel working I set to rendering the view. I began with the rather clunky infinite timeline demo I put together a few years ago. The first thing to go was the labels code – this never worked properly anyway. In went some MinimalComps and an ObjectPool. I extended the timeline out into millions of years, and then billions of years ago. I still can’t be sure if this works properly as Number get a little funky at such big values.

With the label renderer still buggy I crashed on the floor for a few hours. Pro-tip from Hack Day regular Jeremy Keith – bring an inflatable mattress. Within 10 minutes of coding the next morning I nailed the renderer bug and we were off again. With less than an hour to go I went looking for data to put on the timeline. Given the location, what better data source than The Guardian’s wonderful crowd-sourced Dr Who journey data. Now I’m an optimistic guy, but even I realised I wasn’t going to pull this off. It was round about this point I did a quick Audioboo interview I with Steve from Amplified.

I had of course set my expectations laughably high but I did have something presentable by end of play and quite a lot of good progress came out of it. Unfortunately I had to cut my Hack Day short and ended up missing much of the final presentations. Jeremy has a great roundup of all the projects on his blog though, and there are some photos of the day on Flickr. I really enjoyed History Hack Day and my overall impression was of smart engaged people working on interesting creative projects. Great fun.

Parsing Facebook RFC3339 Timestamps in AS3

I had an email this evening about parsing Facebook timestamps in Actionscript 3. The format for timestamps is defined in RFC3339 which as I’ve discussed previously, is a profile of ISO8601.You’ll have come across these before if you’ve ever worked with Atom feeds.

It seem’s Facebook’s implementation has been returning an invalid UTC offset of+0000 instead of the more correct Z (for Zulu Time) or +00:00 or -00:00. This inevitably has been causing some parsers to break. Believe it or not this is somewhat of an improvement as they are finally recognising the UTC standard. Until last month you were required to convert timestamps to local Pacific time if you wanted to make a call to the OpenGraph API. Facebook aren’t the only company under the delusion that California is the centre of the universe – it’s quite common in Silicon Valley. When Macromedia shipped Flash Player 5 it applied US Pacific daylight saving rules to the entire world.

The code below is a revised RFC3339 parser for Actionscript 3. It’s written to cope with Facebook’s special version of the RFC3339 without going bang. Hopefully you’ll find it useful.

function RFC3339toDate( rfc3339:String ):Date
{
	var datetime:Array = rfc3339.split("T");
 
	var date:Array = datetime[0].split("-");
	var year:int = int(date[0])
	var month:int = int(date[1]-1)
	var day:int = int(date[2])
 
	var time:Array = datetime[1].split(":");
	var hour:int = int(time[0])
	var minute:int = int(time[1])
	var second:Number
 
	// parse offset
	var offsetString:String = time[2];
	var offsetUTC:int
 
	if ( offsetString.charAt(offsetString.length -1) == "Z" )
	{
		// Zulu time indicator
		offsetUTC = 0;
		second = parseFloat( offsetString.slice(0,offsetString.length-1) )
	}
	else
	{
		// split off UTC offset
		var a:Array
		if (offsetString.indexOf("+") != -1)
		{
			a = offsetString.split("+")
			offsetUTC = 1
		}
		else if (offsetString.indexOf("-") != -1)
		{
			a = offsetString.split("-")
			offsetUTC = -1
		}
		else
		{
			throw new Error( "Invalid Format: cannot parse RFC3339 String." )
		}
 
		// set seconds
		second = parseFloat( a[0] )
 
		// parse UTC offset in millisceonds
		var ms:Number = 0
		if ( time[3] )
		{
			ms = parseFloat(a[1]) * 3600000
			ms += parseFloat(time[3]) * 60000
		}
		else
		{
			ms = parseFloat(a[1]) * 60000
		}
		offsetUTC = offsetUTC * ms
	}
 
	return new Date( Date.UTC( year, month, day, hour, minute, second) + offsetUTC );
}

Flash on the beach 2010

FOTB 2010 Elevator pitch

photo credit: Marc Thiele

Every September the UK seaside town of Brighton plays host to a vibrant celebration of creativity and technology. Now in its fifth year Flash On The Beach proved to be as inspirational as ever. The themes of the conference were as varied as the attendees. Here’s a taste…

1. It’s the people that make it great
I’ve written about this before but it’s the people who make this event. The diversity, creativity (and lets face it, stamina) of the attendees never fails to amaze me. The Flash community has always drawn from a wide range of backgrounds. I used to joke that if you got four Flash developers round a table, one would a physicist, one a graphic designer, one a musician, the other an architect. It’s hard to imagine the same happening with Silverlight or Java. Until now that’s been the real strength of the community, but I think the community is changing…

2. Flash is becoming a noun
It’s unfortunate really that FOTB has the word Flash in the title. It may have started out as a Flash conference but these days it embraces everything from print design to compiler optimisation to life-hacking. This breadth of content attracts attendees from outside the community, all of whom want to cross disciplines. I wonder if Flash is on it’s way to joining Xerox and Hoover as a brand name that became a noun. In this case, a by-word for creative technology. As Brendan Dawes succinctly put it, “Flash is an attitude, not a technology”.

3. Make time for your own projects
More than a few speakers extolled the benefits of working on your own projects. This is a great way to learn new skills, or refresh your creative batteries. This certainly struck a cord with me, and the timing was quite prescient. A few weeks before the conference I quit my job – as I write this I have one day to go. My work on the Computus Engine has taken a back seat recently while I set up the new business, but next week I open the doors on Phi Digital. One benefit of being the boss is being in charge of your time, and I hope to reboot the project later in the year.

4. The power of serendipity
Serendipity was another great theme of the conference. A great example of this was a chance conversation I had with Niqui in which she introduced me to Ferdi from DeMonsters. It turns out that not only are we both obsessed with visualising time and calendar systems but he’s been working on a zoomable timeline as well.

5. Speaking is fun
This year was slightly different for me. In addition to my journalistic duties for FlashMagazine I was also speaking as part of the Elevator Pitch. I won’t go into this too deeply here but if you’re interested you read about my on stage adventures over at FlashMagazine. The Elevator Pitchers are a friendly and talented bunch and having finally watched all the presentations I found it hard to pick out winners. The attendees have spoken though and congratulations go to Tomek, Andreas and Tom who will all be back next year giving full sessions.

FOTB2010 – John Dalziel – Elevator Pitch from flashonthebeach on Vimeo.

Thanks as always go to Marc for his wonderful photographs and Jens and David for keeping FlashMagazine on top of the news.

TED Global 2010, Hyper Island Creativity Lab and Flash On The Beach

The next few months are gearing up to be a bit of a roller coaster. I’ve been working on a couple of projects that I’ll finally be able to talk about, as well as attending some pretty amazing events.

TED Global 2010: Oxford

Chris Wild at TED2010

The first event in a couple of weeks is TED Global in Oxford. I don’t yet know if I’ll be there for the event but my good friend Chris Wild will be presenting some of our work. Chris is the maestro behind The Retroscope and the nicest time traveler you’ll ever meet. I won’t give away any spoilers but I want to thank Mike and Simon for helping us get to the submission deadline in one piece!

Hyper Island Creativity Lab: Middlesborough

The day after I’ll be heading up to Middlesburgh for the Hyper Island Creativity Lab. Founded in Sweden in 1996, Hyper Island is like boot camp for creatives – the original course is still run from a converted prison. In fact it might be better to describe it as re-boot camp. The course aims by way of self discovery to let you think creatively about digital. Should be great.

Flash On The Beach: Brighton

John Dalziel at FOTB 2010

Last up in September is the biggest UK Flash conference of the year. Flash On The Beach has a well deserved reputation as a fun and inspiring three days. I cover the con every year for FlashMagazine, but this will be my first time speaking. Blink and you’ll miss it as I’ll be covering 10 years of FlashMagazine in 3 minutes!

If there are tickets left I’d thoroughly recommend getting along. Despite the name, the sessions are not all about Flash. All creative technologies and media are represented and there’s a good mix of design and technical sessions. The end of day inspirational sessions are worth the entrance fee on their own.

Don’t be evil

Iris

photo by Tom Dalziel

New year is traditionally a time for introspection. Thoughtful consideration of the year ahead; the fruits of which become a new year’s resolution – a course correction for how you live your life. Interestingly, this soul searching is not restricted to individuals. A few days ago one of the biggest companies in the world made an ethical stand. Google famously follow a credo of don’t be evil. Maybe more infamously they censored their search results to gain a foothold in China. This hear no evil, see no evil approach brought them considerable criticism and seriously dented their good-guy image.

I’ve written before that organisations have a personality. As a web developer I engage with a number of companies on a daily basis and my perception of those companies affect the technologies I choose to offer my clients. Actions like this matter. They have a long term effect on the bottom line.

Google

Take Google as an example. I have a lot of goodwill towards them (more so since the China decision). They create innovative and powerful services, and offer them free to anyone. To me their personality is smart, nerdy and humorous. They are welcoming and since last week maybe even [gulp] trustworthy. What’s not to like.

Microsoft

Now, take Microsoft (please). My experience of them has often been unfriendly and at times even bullying. They have abused their ubiquity with bug ridden browsers, misinformation and shady tactics over standards. That says a lot about personality. The consequence being I don’t want to play with them anymore (okay maybe XBox) and have slowly removed their products from my toolset.

Apple

So let’s look at Apple. Just about every web developer I know has a MacBook Pro and an iPhone. They’re just the best products around, and beautiful to. The price you pay with Apple is proprietary lock-in – they have you by your short and curly braces.

Apple has Steve, and by inheritance a personality that is immensely charming, yet secretive and controlling. They don’t play well with others and for developers a life with Apple can feel like an abusive relationship. We adore them but they don’t treat us with respect. For a few of my friends at least, their famous distortion field is weakening.

Adobe

Lastly then we have Adobe, a company with which I’ve become intimately familiar. As a Flash Developer I accept that I work with a proprietary technology. Decisions regarding it’s future (and therefore mine) are made by by them so we have to get along. We don’t always see eye to eye <cough>European pricing</cough> but on the whole I trust the guys steering the ship.

The upside of a proprietary technology is that unilateral decisions are made quickly and the platform has benefited enormously from this agility. The other thing I like is that Adobe is not in the operating system business. When the web is the platform, openness and cooperation are a good thing, and any involvement with open source and web standards feels genuine. It’s in their interests to play well with others.

And I know I haven’t gotten into standards bodies and other non-commercial web institutions but I think it’s commercial entities who’s integrity is most at risk. That said this isn’t about money – all these companies make plenty of it. This is about the long term effects of corporate responsibility. Just know that your actions matter, and we’re watching you.

Cynergy MultiTouch Calendar for AIR 2.0

There were lots of new feature announcements at Adobe MAX this year but one of the most exciting was support for multi-touch in Flash Player 10.1. This along with the likes of accelerometer are paving the way for a massive push onto smartphones. You won’t be able to buy a smartphone next year that doesn’t come with a Flash Player… okay, maybe just one.

During the keynote Adobe CTO Kevin Lynch demonstrated multi-touch in AIR 2.0. What caught my eye was the app was using multi-touch gestures to control calendaring. Swipe to flick from month to month and pinch to zoom into weeks and days. The company behind the demo are Cynergy Ssystems who are doing some great work with UX in web applications. If you want more information about the project it’s worth reading the blog posts from Dave Wolf and Andrew Trice.