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.

New JavaScript and HTML5 Tutorials on the ADC

Hopefully many of you have noticed that we have been pushing for some really great content on the topics of JavaScript and HTML5. Just yesterday we published a three-part series on Backbone.js by Adobe evangelist Christophe Coenraets and the first in a series on JavaScript design patterns by Joe Zimmerman.

Late last week, we also published the second in a four part series on building applications for Android and iOS using HTML5 and JavaScript with PhoneGap. This series is by Adobe evangelist Andrew Trice.

Personally, I am excited because we have a lot more content like these coming. However, we are always looking for your feedback. As always, you can add comments or ratings to each article, but also if there is a topic you really would like to see the ADC cover, you can always suggest it via our ADC feedback forum. Our goal on the ADC is to produce content that developers want and need, so we are open to any ideas, whether they are focused on an Adobe product or not.

– Brian Rinaldi

ADC Write & Give program – Q1 update

The Adobe Developer Connection (ADC) Write and Give Program gave $3,500 USD to charities in the first quarter of 2012. The program acknowledges the writing efforts of our ADC community authors by making a charitable contribution to a charity for each author who publishes content on the ADC. Each author chooses his or her charity from a list of five preselected charities (listed below).

To date the ADC has donated over $67,000 to these charities through the program in recognition of our ADC authors. To our ADC authors, we thank you for sharing your technical expertise with the greater developer community while helping other communities at the same time!

Read on to find out more about the charities that the program supports, and to see the list of authors for this quarter who made these contributions possible!

* Benetech: Creates new technology solutions that serve humanity and empower people to improve their lives.

* Nature Conservancy: Works around the world to protect ecologically important lands and waters for nature and people.

* Mercy Corp: Alleviates suffering, poverty, and oppression by helping people build secure, productive, and just communities.

* Care: Fights global poverty by serving individuals and families in the poorest communities in the world.

* Feeding America: Is the nation’s largest charitable hunger-relief organization.

The authors who participated in this program from December 1, 2011 – February 29, 2012 are:

  • Tom Green
  • Dan Carr
  • Pete Freitag
  • Tommi West
  • José Carlos Rivera
  • Samir K. Dash
  • Keith Peters
  • Stephanie (Sullivan) Rewis
  • Quentin Thiaucourt
  • David Powers
  • Chris Converse

Thank you, authors, for your contributions to the ADC!

Launched: Adobe Developer Connection (ADC) feedback site

Today the Adobe Developer Connection launched a dedicated community feedback site.  The site is strictly for feedback on future content topics that our developers would like to see coming out of Adobe, with two main goals:

  1. Enable community members to submit ideas for future content topics that fellow community members can then vote up or down so we can evaluate the level of interest the community has in seeing the content around that topic
  2. Gauge audience interest in future content topics by posing the occasional poll question to the community

Community members are strongly encouraged to get involved in the feedback site by:

  • submitting an idea of your own
  • voting/commenting on the ideas submitted by others
  • providing input on a poll question

This input will play a pivotal role as future content strategies and topics are developed, so it is important to let your voice be heard!

Additionally, members of the ADC team will submit ideas of their own from time to time to solicit feedback on specific topics to gauge if it is something the community would find value in.  So again, your feedback is encouraged to help us vet ideas and be sure we are producing the content that best serves our communities.

The ADC team seeded the site with some initial content ideas and polls that we’d love to hear from you on:

Server Side JavaScript (idea) – I am interested in whether people would want to see articles and coverage on ADC of server-side JavaScript solutions like Node.js?

Mobile game development (idea) – Are you interested in articles or tutorials about developing mobile games?

Which game engines and frameworks do you use? (poll) – When developing a game, do you use any engines or frameworks?

You may view all current ideas listed here and all active polls are available here.

We are also looking for authors who are interested in writing articles around some of the ideas submitted, so if you see a popular idea that you’d like to explore writing on, please drop us an email to let us know.

Help us help you…get involved and provide some feedback today!

Ed Sullivan
Adobe Developer Connection

NOTE: anyone can view the site, but you must be logged in to the forums before you can submit an idea, vote on a poll or leave a comment.

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.