psykmedia

Testing JavaScript is an important but often overlooked part of web development. One reason is because developing for the web means targeting more than one browser. YUI currently classifies 11 different environments that enjoy our highest support level. In addition, we also test YUI on emerging X-grade environments like mobile devices. When you have so many different environments to support, it’s tempting to just pick a couple important ones to develop with locally and hope for the best.

At YUI, we use Selenium and Hudson for running YUI Test-based unit tests on various browser and operating system configurations as part of our continuous integration strategy. This is great for catching problems that result from integrating your work with the rest of a complex software stack. It comes with a price: CI tools like these are complicated to setup and maintain. In any case, they don’t help you while you’re developing code and testing before you commit.

Today, I’m excited to release Yeti 0.1.0, an experimental command-line tool designed to make cross-browser testing easier before you commit a line of code.

Yeti automatically launches JavaScript unit tests in a browser and reports the results without leaving your terminal. It’s very simple to use: Just run yeti test.html to get the results of the YUI Test-based test in test.html. You can pass multiple HTML documents to test multiple components at once.

$ yeti dom/tests/dom.html attribute/tests/attribute.html json/tests/json.html ✔ DOM Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 20 passed 0 failed ✔ Y.JSON (JavaScript implementation) from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 68 passed 0 failed ✔ Attribute Unit Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 106 passed 0 failed 194 tests passed! (3217ms)

The real power of Yeti is running tests in multiple browsers simultaneously. Although Yeti can open your tests one-by-one on your computer, Yeti allows you to run tests on any browser on any device—all at the same time.

If you run Yeti without arguments, it will start a web server that you can access at http://localhost:8000. You can then point browsers or devices on your network to that URL and every test you run from that point will be executed on all browsers visiting the test page.

When combined with the excellent localtunnel, firewalls between you and other computers are less painful. If you’re not working with sensitive information, it’s a simple way to make your Yeti available to the internet:

$ localtunnel 8000 Port 8000 is now publicly accessible from http://example.localtunnel.com

You can then visit that URL to access Yeti and start running tests:

This is especially useful for cellular devices: You can use your carrier’s internet connection without needing to get your device on the same network as your development computer.

Yeti aims to make JavaScript testing easier; however, it’s far from being complete. (Don’t take the 0.1.0 version number lightly.) Yeti assumes you’re using YUI Test, has only been tested on Mac OS X, and may not work with some kinds of testing scenarios. Despite these shortcomings, Yeti has been so useful internally that we didn’t want to wait any longer to share it with the YUI community.

Getting the code

Yeti is available on GitHub and offered under YUI’s BSD license.

Installing

Yeti is written entirely in JavaScript and runs on top of NodeJS. If you’re already a NodeJS and npm user, installing is very simple:

$ npm install yeti@stable

If you haven’t installed NodeJS and npm and you’re on a recent Mac, you can still install Yeti with a convenient installer.

Download the Yeti 0.1.0 Installer 2.7 MB
Requires Mac OS X 10.6 and a Intel Core 2 processor or better

If your computer doesn’t meet the installer’s requirements, you can still use Yeti if you’re able to install npm. More installation and usage instructions are available in Yeti’s README.

Your participation is welcome

Yeti is the first project we’ve launched in YUI Labs, an umbrella category where our new ideas and initiatives will take shape. As such, Yeti is offered without the same level of support as our other projects. We still encourage you to ask questions and give feedback in Yeti’s forums and hope Yeti makes testing easy and fun. If it doesn’t, please tell us, file a bug or consider contributing to Yeti.

Happy testing!

About the Author: Reid Burke (@reid) is the newest member of the YUI team. He loves abominable snow monsters and JavaScript.

We have mashups to help us figure out where we want to go, the best way to get there, and then what’s the coolest stuff to do when we get there. One thing that’s often overlooked is how much it’ll cost us to get from point A to point B.

Go Gas
Go Gas is a Google Maps and TinyLink mashup that determines how much a trip will cost you in gas. You simply enter your start point (HTML5-capable browsers have the option of using geolocation to get the start point) and your course is plotted. Go Gas shows you how many miles your trip is and what you can expect to pay in gas costs.

More at our Go Gas profile

Guia Postos (trans. “Guide Posts”)
If you happen to be traveling Brazil, you have Guia Postos. Guia Postos is a mashup that combines Facebook, Google AJAX, and Google Maps to give you a local map, showing gas prices and fuel quality.

More at our Guia Postos profile

Sponsored by

(Cross-posted from Google LatLong)
Especially during the summer months, staring out into the ocean leads to daydreams of sailing the open water, freedom and exploration. Now you can take three-quarters of this vast planet - the ocean - with you on your mobile device by downloading the new Google Earth 1.1 for Android.

With the release of this feature, escape the hustle and bustle of life on land and discover the marine world using Google Earth on your mobile device. Now, you can check out the landscape and terrain in Monterery Bay Canyon, which is larger than the Grand Canyon, by zooming in on Google Earth below the ocean surface just off the coast. Once underwater, we can use the “look around” button to tilt the view and see the extent of this great undersea canyon.

The latest version of Google Earth for Android also introduces the “Explore the Ocean” layer, which features hundreds of photos and videos from more than 100 contributors who are excited to share their stories of sea. Plan your next vacation during your daily commute by clicking on any of the little blue icons. The gold highlighted icons represent content from the Mission Blue Hope Spot initiative.


For those of you running Android 2.2, there are some more treats in store. Google Earth now supports Flash in balloons, so if you have the Flash player installed on your mobile device, you can watch videos right in the balloon. We’ve also made the program easier to navigate; for most devices, you can now use two fingers to “look around” and change your viewpoint, as an alternate to using the on-screen button. This makes it even easier to tilt your view to see mountainous landscapes or underwater canyons. Rotating your view with a simple twist of your fingers is now available on more devices as well.

Google Earth for Android 1.1 is available in Android Market today for most Android devices running version 2.1 or later. Explore the ocean anywhere.

Posted by Jenifer Austin Foulkes, Product Manager

Jacob Seidelin of nihilogic fame (remember his Super Mario in JavaScript solution) is one of my unsung heroes of JavaScript. His solutions have that Dean Edwards "genius bordering on the bat-sh*t-crazy" touch that make you shake your head in disbelief when they come out but later on become very interesting.

One of his posts from 2008 entitled "Compression using Canvas and PNG-embedded data" had a good idea: if you want to compress JavaScript and CSS you could reverse engineer a packing algorithm in JavaScript or you could use a lossless packing system that is already in use and supported in browsers. In this case the packed format is PNG and the way to unpack it is by using the canvas API's getImageData() method:

PLAIN TEXT JAVASCRIPT: var x = function(z, m, ix ) { // image, callback, chunk index
  var o = new Image();
  o.onload = function() {
    var s = "",
        c = d.createElement("canvas"),
        t = c.getContext("2d"),
        w = o.width,
        h = o.height;
    c.width = c.style.width = w;
    c.height = c.style.height = h;
    t.drawImage(o, 0, 0);
    var b = t.getImageData( 0, 0, w, h ).data; //b : bucket of data
    for(var i= 0; i <b.length; i += 4) {
      if( b[i]> 0 )
        s += String.fromCharCode(b[i]);
    }
    m(s, ix);
  }
  o.src = z;
}

As there are quite some interesting competitions going on that need really small JavaScript solutions Alex Le took up Jacob's work and wrapped it in a build script that concatenates, packs and converts to a PNG and unpacks it for the 10K competition with a JavaScript. In the process Alex also found some bug in Internet Explorer 9's canvas implementation as it only reads the first 8192 bytes of a PNG and returns 0 for the others :(.

It is pretty amazing how efficient this way of packing is. What we need to test now is when and if it is worth while to have the unpacking done on the client. Imagine adding your JS and CSS to the end of an image and cropping it in CSS to have all the info you need in an app in a single HTTP request. Let the games begin.

James Pearce has started a fascinating series, called WhitherApps.com, trying to rewrite the BBC iPhone application and other native mobile apps using HTML5. From the kickoff blog post:

WhitherApps is a bandwagon-busting experiment. I believe there are far too many native client apps which could have been far better written as mobile web apps. What we’re going to try and do is take a few examples, apply a little reverse-engineering, and rewrite them, warts and all, with web technologies.

James has already produced three blog posts rewriting the BBC iPhone app but with HTML5 (Part I, Part II, Part III). I encourage you to read them. He's already gotten impressively far; here is a screenshot of the HTML5 app so far:

[via kenguish]

There's an app for that, and you're the folks who are creating it. But should you design a web-based application, or an iPhone app? Each approach has pluses and minuses—not to mention legions of religiously rabid supporters. Apple promotes both approaches (they even gave the web a year-long head start before beginning to sell apps in the store), and the iPhone's Safari browser supports HTML5 and CSS3 and brags a fast JavaScript engine. Yet many companies and individuals with deep web expertise choose to create iPhone apps instead of web apps that can do the same thing. Explore both approaches and learn just about everything you'll need to know if you choose to create an iPhone app—from the lingo, to the development process, to the tricks that can smooth the path of doing business with Apple.contact.us@alistapart.com (Craig Hockenberry)171950337276650572771783531540108469243707033830592011208735060980017056701895051773338608210570182616842222664160054718181681573423188967511736528485931647586211762090165046421182028852983123196160280476611736287053283018385338218504819643025237776564496453001632191690810581796003386268540498594594062937683479819466541606838311038306985816069252667413438386172310396753262678771563148001297753176801266613426536334404155726133765976708371263596504213267338000328150887782938865078946610042609084550601243235038329046506545191465402380258052217905025516583160577366516820122573207401360114416646153021065591207255902850239894926146454738511584670807194096043