Archive for April, 2012

Do Object Types Matter in JavaScript?

Some of you may recall that back in February, the ADC published an article by Keith Peters called “JavaScript Object Creation – Learning to Live Without ‘New’” in which Keith nicely explained the ways available to create and define objects in JavaScript and recommended a practice he preferred (as the title suggests, it isn’t use new). This article was widely popular not only because Keith is a great writer who explains things in an easy to read manner, but also because there is still a lot of debate on these types of topics in the JavaScript community.

In fact, some of the follow up discussion from Keith’s article led him to author a follow-up which was published this week that focuses on determining object types in JavaScript titled, simply, “Object types in JavaScript.” In this article, Keith discusses a variety of methods available for determining the type of object within JavaScript. However, he then goes on to show how object types can be both unhelpful and unreliable in a dynamic language like JavaScript and advocates “duck typing,” which, put simply, is a way of defining an object by what it does rather than its type. It is a great read and I really hope that it spurs some thoughtful discussion on the topic.

On Motion Detection in Video Using JavaScript

Every day I scour hundreds of sites looking for some of the best content on a variety of topics I am interested in. While there is, obviously, a ton of great content out there, I am always excited when I come across something that I feel is new and unique. That was the case with a recent post by Romuald Quantin.

The getUserMedia API has been a popular topic lately even though it is only fully implemented in Chrome Canary and Opera 12. However, the application Romu had created managed to set itself apart by combining video from the user’s camera with custom built motion detection using JavaScript and playing audio with the sound API’s. I was really impressed with the demo and immediately wished Romu would write about how he created it. Thankfully, he agreed to do so for the ADC and I am very happy that yesterday we published his article, “JavaScript Motion Detection.” If you are interested in seeing how to use some of these cutting edge API’s or just seeing how the browsers are implementing them, I highly recommend reading it. As always, we welcome your feedback on ADC content we publish or any topics you’d like to see published.

Interview with Val Head on CSS3, JavaScript and More.

FITC Toronto is right around the corner and this year it features a ton of speakers focused on creating web applications with HTML5, CSS3 and JavaScript. Over the next couple weeks leading up to the conference, I plan to publish a handful of interviews with some of the speakers who have sessions focused on these topics.

The first interview is with Val Head who is doing a session entitled “Designing Motion with CSS3 and JavaScript” that focuses on helping web designers and developers leverage CSS3 and JavaScript for animations and transitions that enhance their application experience. She also has a short session on typography. In addition to presenting, Val writes for CreativeJS and, recently, for .net Magazine and runs a popular conference called Web Design Day. You can also follow Val on Twitter via @vlh.

Tell me a little bit about your skills and background? By your bio, you seem to be one of those rare designer/developers that people talk about?

I guess I am! Though I hope we’re not really that rare. I got my start in web design because my band needed a web site. I like to joke that that’s how everyone got started making web sites because I’ve met so many colleagues with similar stories.

Along the way I took an animation workshop that introduced me to animating with code in Flash. I’d never thought of programming as being something that was at all creative before that and it pretty much had me hooked.  So that got me started in Flash, which lead to dabbling in Processing, and then most recently JavaScript. (Well, technically I’ve been using JavaScript for years, but it’s only recently gotten fun so it seems new.)

I’ve done lots of design work along the way as well. And combining the two as much as possible. Luckily, there’s lots of opportunity for that when you’re working on interactive projects.

Your presentation at FITC is about using transitions. This seems like one of those things that developers like myself might overuse because it “looks cool” without giving much thought about the meaning a transition might be conveying to a user. Can you explain why you think transitions is an important topic?

Transitions especially are an opportunity to communicate and add a little touch of surprise and delight to your site or app. The best transitions are ones that feel right and look cool. The same goes for any animations in an interface really. But that’s easier said than done!

Like you mentioned it’s easy to overdo them, or just kind of plop them anywhere you can think of with no real plan. Those are both really common mistakes. Along with creating something that’s so complicated it only gets in the way. So there’s a lot to look out for besides just what’s technically possible.

You’ve written in the past about using JavaScript to enhance your CSS transitions. What kind of limitations do you see in CSS transitions that JavaScript can overcome?

CSS transitions and animations are a huge step in what CSS can do, and they can really come in handy. But they often fall short when it comes to interactivity. If you want to get at all sophisticated with when or how you trigger your CSS animations/transitions, you have to turn to JavaScript to help you out. CSS and JavaScript have been working together for a long time though and this is a great way to pair them up. You can take advantage of what each does well and get creative with it.

As  a writer for CreativeJS, you cover a lot of cutting edge HTML5 and JavaScript projects. Are there any projects right now that you are particularly excited about?

There’s been so many amazing projects turning up lately, it’s much too hard to pick just one. The thing I’m most excited about is how fast browser performance is improving. It’s great when you go back to a demo from a few months ago and find that it runs noticeably faster.  I think the “browser wars” (if you can still call it that) are really working in our favour there.

A couple favourites that we’ve posted about recently are the multiplayer music making with Plink (http://creativejs.com/2012/03/plink/) and the highly entertaining MMOsteroids April fools joke. (http://creativejs.com/2012/04/fake-mmo-april-fool-makes-hacker-news/)

Why should FITC attendees go to your session? What will they learn?

I’ll be talking all about the why and how of making awesome animations and transitions with web standards. So, anyone interest in those things should definitely come.

I’ll also be showing handy tricks for giving your animations and transitions that extra bit of polish, and some special considerations that go along with animating DOM elements. Some naming and shaming of sites that have done it all terribly wrong will come up I’m sure. Along with my suggestions on how they could do it better, of course :)