Posts in Category "HTML5"

Cutting Edge HTML5 – Filesystem API

One of the first questions people ask when they are considering adding a new HTML5 feature to their site is: when is it safe to use feature x? In fact, there is, as many of you already know, a site devoted to that specific question. Sometimes the answer is that a specific feature, while exciting, isn’t ready to put into a production application due to limited support across multiple browsers. This does not mean that you can’t learn about it and even come up with cool innovative uses for the API – even building a prototype of your concept.

The Filesystem API is one such cool HTML5 feature that, while powerful, probably isn’t production ready yet (as you can see on When Can I Use, Chrome is the only browser that currently supports this API). Still, Raymond Camden has designed an interesting proof of concept that shows the potential of this new API in his article “Real-world example of the HTML5 FileSystem API.” In the article and associated code, Raymond builds and explains a demo that downloads a zip filled with site assets, unzips them on the client and finally uses the Filesystem API to cache these assets locally for quick loading. It is an interesting proof of concept and, I hope, may spur some further creative uses of this cutting edge HTML5 feature from readers. So, give it a read, you won’t regret it.

Testing Your JavaScript Applications

As people build increasingly more complex applications using JavaScript, the demands for testing those applications also increase. This has led to a wide variety of testing frameworks and tools specifically designed for JavaScript developers. Testing frameworks like QUnit, which is the test suite used by the jQuery project, have been around for some time and appear to have a broad user base. Other widely discussed tools include PhantomJS which is a headless WebKit that can be used for headless website testing in combination with a variety of other frameworks. If you are looking for a more complete list of testing tools, you can check the JavaScript frameworks list I maintain on my blog.

Despite the variety of testing options, many JavaScript developers have still not fully integrated unit testing or automated functional testing into their development process. This is part of the reason I was specifically interested in Dustin Butler’s recent ADC article on unit testing JavaScript applications with Jasmine. Jasmine is another popular solution for behavior driven development (BDD) which, as Dustin explains, is based upon the more common test driven development (TDD) approach but uses a natural language to define test based upon behaviors often described in an Agile user story.

I highly recommend reading Dustin’s article if you are interested in getting started testing your JavaScript applications or, even, if you are already doing testing using some other framework. As always, I welcome your feedback on the content we publish on the ADC – and if there are any other topics you would like to see covered, be sure to suggest them.

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 :)

On JavaScript, Objects and Inheritance…

Over the past few months I have dedicated myself to learning JavaScript. By this, I mean, not just being able to use JavaScript, which I have done for many years, but learning the language. To me, this meant stepping beyond doing some DOM-scripting in jQuery for some cool effects, but rather learning the core concepts of the language. For someone who spent many years trying to perfect an understanding of object-oriented programming principles, this can be a tough transition (not that I had OOP principles perfected either). The JavaScript language is not just syntactically different, but fundamentally different – being prototype-based among many other things.

As the JavaScript community continues to grow, there seems to have been much debate about these differences. Some people try to recreate things from classical OOP in JavaScript, like classical inheritance and strict(er) typing. Still others argue that by doing this, you ignore what makes JavaScript uniquely powerful. We’ve covered a little bit of both ends on the ADC, starting with Keith Peters’ popular article “JavaScript object creation: Learning to live without ‘new.’” More recently, I wrote about doing “Pseudo-classical object-oriented programming in JavaScript with Minion.” The latter focuses on one of many libraries that allow you to create objects that mimic classical inheritance and allow for more traditional namespacing and extending of objects. To be clear, I am not taking a side in the debate – something I don’t feel quite qualified to do at the moment. However, I do think it is an important topic and worth exploring both sides of the debate. I plan to continue to cover on the ADC in various forms whether it be in examining languages like CoffeeScript to other libraries/frameworks that offer differing “solutions” to these issues to covering fundamental language concepts in JavaScript.

Hopefully, you find these topics as fascinating and thought-provoking as I do. As always, I welcome your feedback on items we publish on the ADC as well as ideas for topics you’d like to see (and, remember, we even have a forum dedicated to getting your feedback).

A Digital Magazine for HTML and JavaScript Developers

ApplinessThis morning, Adobe evangelist Michael Chaize announced the release of a new digital magazine for iPad and Android tablets called Appliness. The first issue includes tons of great content from people like Michael, Piotr Walczyszyn, Andrew Trice, Christophe Coenraets, Mihai Corlan, Alan Greenblatt, Raymond Camden, Greg Wilson, Brian Leroux and myself as well as an interview with Maximiliano Firtman. I think the magazine looks great and features great articles with code samples and interactive demos. The best part is that it is totally free! So go to the Android Market (I mean, Play Store) or Apple App Store and download it today.

To learn more about the application, you can check out Appliness.com. Appliness was built using Adobe’s Digital Publishing Suite (DPS) and Michael covers some of how it was built in his post. Of course, if you want to learn more about how to use DPS, you can check out the DPS Developer Center on the ADC.

What’s Cool in JavaScript, HTML5 and CSS3 – Week of 1/23

As part of my job to find great authors and contributors for the ADC in the areas of HTML5 and JavaScript, I read a lot of posts from around the web on these topics. Many of these posts I find myself via Twitter or RSS feeds, while others I find through excellent resources like the JavaScript Weekly newsletter or DailyJS, among others. Those of you who follow me on either Twitter, Facebook or Google Plus will find that I regularly share these links as I find them. However, I thought it would be a useful resource to compile these each week so as to have a single, easy-to-bookmark resource listing all of best of the past week’s posts (at least, the best in my opinion). Therefore, this week, I decided to begin a new series of posts on my blog doing just that. The first of these posts I put up this morning covering 17 really great JavaScript, CSS3 and HTML5 resources you should check out, if you haven’t already.

While the post collects links from all across the community (i.e. not just Adobe), I would like to take a moment and recognize a few of this week’s contributions from Adobe and our awesome evangelism team:

Please let me know if you find these posts useful and if there is any way I can make them better.