Monthly Archives: August 2011

jsPerf.com Introduces Graphs

If you haven’t seen jsPerf.com, you’ve been missing out. You can benchmark pieces of JavaScript against each other. The site was created by Mathias Bynens (blog) and the benchmarking engine, Benchmark.js, was created by John-David Dalton (blog).

JavaScript is by nature only acurate to 1 millisecond, and some browsers are acurate to only 15 milliseconds in practice. Benchmark.js uses higher resolution timers where available. For browsers it utilizes a Java Applet to access a high-precision timer. When Chrome or NodeJS are run with a --enable-benchmarking flag, it makes use of a native microsecond timer.

Benchmark.js takes benchmarking to the next level by using statistical analysis. For example, long-running tests run for more time than short-running tests and the statistical significance displays right next to the result. John-David Dalton criticizes Sunspider and other benchmark engines for lack of attention to solid statistics principles.

Let me illustrate. If your jsPerf.com results show script A is 500 Operations Per Second ±8%, and script B is 540 Operations Per Second ±8% you can tell that the speeds are about the same. But given the same number of Operations Per Second and a margin of error of under 1%, you can tell that script B is a bit faster.

Performance data really becomes powerful when tests are run across many browsers. Just make a jsPerf.com entry, copy the short link, and share it via email or Twitter to get some friends to test with their browsers. jsPerf.com will track and report the progress of all tested browsers.

screenshot

So the news with jsPerf.com is that results are now displayed in graphical form using the Google Visualization Library. Particularly helpful is the column-style bar graphs that show one set of bars per browser. Click on the screenshot at right for a live example.

For more information, read John-David Dalton’s write-up on benchmarking or listen to his JSConf2011 presentation.

A JavaScript Phone: Microsoft’s Night Terrors

Today Mozilla announced their proposal for providing phone-like functionality to the browser in this hacks.mozilla.org article. Their goal is to provide “basic HTML5 phone experience within 3 to 6 months.”

Specifically, they want to provide JavaScript APIs for accessing the phone dialer, address book, SMS, and more. We already have support on Android and iOS for getting geolocation data from GPS. There is also some support for taking photos using only JavaScript. And don’t forget the FileReader and FileWriter APIs.

Really, accessing this type of phone functionality is only one step away from now. Not two steps. Not a year. It is right around the corner. Combine that potential with the fact that Firefox, Chrome, and Safari are on release schedules measured in weeks, not the years we saw in the early and mid 2000s.

Take Firefox for example. Version 2 was released in October 2006, version 3 in June 2008, version 4 in March 2011, version 5 in June 2011, and version 6 this month–August 2011. That’s right, that fast. In 2011, Firefox moved to a 6-week release cycle.

Chrome is probably even more agressive. In less than 3 years, it has gone from version 1 to version 13–and versions 9-13 were released in 2011 alone!

So 3 to 6 months suddenly seems like a long time in the world of browsers. It is very doable that we will very soon see phones opening up a new world of possibilities. Web apps doing the work of native apps. The biggest mobile browsers–Chrome and Mobile Safari–are made by the OS makers themselves. So if they want to move quickly they can.

For years pundits have speculated that Microsoft Windows would soon be obsolete. It is threatened by cloud computing like Gmail and Google Office apps and is now threatened by mobile apps. Microsoft tried to break in the mobile game with Windows 7 Phone, but haven’t made any headway. In desparation, they have made a partnership with the handset manufacturer Nokia, but many feel that Windows Phone Software is doomed no matter how many people get stuck with it on their phone.

What cards does Microsoft have left? JavaScript and Mobile Browsers are rising so fast that soon no one will care about operating systems, only about browser capability. Microsoft is peeing its pants right about now. Windows will never go away, but it seems to matter less and less in the world today.

Using JavaScript in Photoshop

Did you realize that you can write macros and scripts for Photoshop in JavaScript? Yes, JavaScript is everywhere. JSPatterns.com has a great article explaining how to write JavaScript for Photoshop.

In his example, author Stoyan Stefanov takes a layered Photoshop file, shows and hides certain layers, and saves the resulting image to a .png file. The files he saved were charts of guitar chords–156 images saved in an instant.

For example, showing a layer is as simple as the following:

app.documents[0].layers.getByName('11').visible = true;

Stoyan used an open-source library called mojo for generating chords, a Photoshop-generated save function, and about two dozen lines to put it all together. Makes me wonder what other JavaScript in Photoshop projects are out there.

Google Plus Icon in CSS Using a Single Empty Div

I was inspired by the idea that you can make a wide range of shapes using only CSS on a single div after reading this css-trics.com page. A few days ago I created a Facebook Icon using a single empty div. Today I created the Google Plus Icon using a single empty div:




#gplus:before {
content: "g";
position: absolue;
font: 58px/29px "Palatino Linotype", Georgia, "Book Antiqua", serif;
color: #fff;
padding-left: 27px;
top: 0;
left: 0;
}
#gplus {
position: relative;
border-top: 12px solid #D64335; /* red */
height: 60px;
width: 100px;
background-color: #393838; /* dark gray */
}
#gplus:after {
content: "+";
border-left: 25px solid #426AAD; /* blue */
background-color: #32A45E; /* green */
border-right: 25px solid #F8CA32; /* yellow */
height: 12px;
width: 15px;
padding-left: 10px;
font: 44px/55px "Palatino Linotype", Georgia, "Book Antiqua", serif;
position: absolute;
color: #fff;
top: -12px;
left: 25px;
}

The font is not exact but it is close. It works in Firefox 5, Chrome 13, and Safari 5.1. See the JS Fiddle version.

JSON++: The Structured Clone Algorithm

I was using window.postMessage yesterday and ran into this nugget on hacks.firefox.org:

The window.postMessage() method now uses the structured clone algorithm to let you pass JavaScript objects instead of just strings from one window to another.

The Structured Clone Algorithm is an HTML5 specification for serializing complex data structures. The following are data structures that the algorithm can store that JSON cannot.

  • RegExp objects
  • Blob, File, and FileList objects
  • ImageData objects
  • Circular references

The algorithm does have some limitations:

  • Not allowed to store Error objects, Functions, or DOM objects.
  • Property descriptors, setters, and getters are not saved. Thus all objects become read write.
  • Prototype chain is not copied.

It is a wonderful upgrade to window.PostMessage! It means that you can post real data structures without having the sender use JSON.stringify and the receiver use JSON.parse. I’d like to see support in localStorage and sessionStorage.

Read the full write up on the Structured Clone Algorithm.