All posts tagged ‘JavaScript’

File Under: Browsers, JavaScript
Sep
9
2010

Mozilla Asks, ‘Are We Fast Yet?’

By

The above charts show the performance of JavaScript engines across different architectures. The tests shown are the common SunSpider and V8 JavaScript benchmarks, with output measured in milliseconds. The tests are run once a day, and the graphs show the last five weeks or so of results.

Go to the real site and click on all the clicky bits.

The green line is Google V8, the red line is Apple Nitro, and the orange and black lines are Mozilla’s two engines, JaegerMonkey and TraceMonkey, respectively. The purple lines reflect Mozilla’s new approach of running the engines concurrently. As you can see, it speeds things up.

But the answer to the question being asked by the URL is “No” — Google is currently either on par with Apple Safari or slightly better, depending on the test and the architecture. Mozilla is improving, but still has a lot of catching up to do.

This testing tool is maintained by Mozilla’s JavaScript team. I found out about it earlier today when John Resig, the guy behind jQuery and a Mozilla employee, tweeted the link. It’s an effective motivational tool, especially since it shows how slow Mozilla’s engines were only a month ago, and how quickly the team is gaining on the leaders.

A couple of caveats: The tests aren’t run in the browser, they are run from the command line. Also, a Mac Mini in doing the testing, so Internet Explorer isn’t represented. From what we’ve seen of IE9′s pre-release code, the browser is incredibly fast. We’re curious to see how its JavaScript engine stacks up.

Also, no Opera. Opera’s Carakan engine is also blazing fast, but it’s not represented here.

Check out the page’s FAQ for more details. Also, the code for the test is open source, so if you have philosophical issues with these methods, build your own testing environment.

Update: Here’s a much more detailed post about Mozilla’s performance on JavaScript benchmarks by Rob Sayre.

See Also:

Tags: , , ,
File Under: CSS, JavaScript
Sep
7
2010

Google Shows Off Its Bouncy Balls

By

If you’ve visited Google’s home page Tuesday, you’ve seen the bouncy ball demo. The Google logo is made of little colored balls that run away from your mouse and jump around furiously when you click on them. The balls will also jiggle from side-to-side if you move your browser window around.

The company did it using CSS positioning and some JavaScript math.random functions, so it works best in non-IE browsers with fancy JavaScript engines. In the useless-but-freaky-cool department, it ranks up there with the playable Pac-Man doodle from earlier this year.

Not content to let Google have all the fun, Rob Hawkes created an alternate version using HTML5 canvas that reproduces most of the functionality. His code is on github, too.

Tags: , ,
File Under: HTML5, JavaScript
Aug
27
2010

Trick Out Your Images With PaintbrushJS

By

HTML5′s canvas tag is a blank slate that allows you to manipulate all sorts things with JavaScript — everything from complex animations to interactive infographics to videos.

For those that want to trick out their images — including background images set in CSS — developer Dave Shea has released PaintbrushJS, a lightweight image processing library that can apply various visual filters to images on your page.

Behind the scenes, PaintbrushJS uses the HTML5 canvas tag to apply its effects, automatically inserting canvas tags based on class names. You can set effects and control the amount by adding attributes to your tags.

PaintbrushJS works in any modern browser — so, of course, IE 8 and below won’t see the effects.

PaintbrushJS can blur images, add a sepia tone, overlay colors or add noise. For a full list of the effects available, check out the documentation or head over to the demo page to see it in action. If you’d like to experiment with the effects, you can grab PaintbrushJS from its home on Github.

See Also:

Tags: , , ,
File Under: Location, Visual Design
Aug
19
2010

Beautiful Websites: Stamen’s Pretty Maps

By

We’ve seen some colorful map mashups in the past, like Hypercities and HeatMap, but few are as abstract and beautiful to look at as Stamen Design’s Pretty Maps.

The aptly-named app pulls sets of geodata from various freely available open mapping projects and plots them atop one another. Pretty Maps grabs street-level data from OpenStreetMap (the “Wikipedia of maps”), land formation data from Natural Earth and place-name and place-shape data from Flickr shapefiles — Flickr’s outlines generated by the tags people have attached to photos taken in that place. So all the data is from crowdsourced databases and either public domain or licensed through the Creative Commons. The maps are generated using TileStache and PolyMaps, two open source tools developed in-house at Stamen.

The result is a map that’s not so much usable for navigation as it is pretty to look at. Cities degrade into abstract and unique blobs, with pastel colors overlaying one another. The shapes are alien looking in texture and density, but instantly recognizable if you’re already familiar with the terrain.
Continue Reading “Beautiful Websites: Stamen’s Pretty Maps” »

Tags: , , , ,
File Under: JavaScript, Mobile
Aug
2
2010

iPhone ‘Pull To Refresh’ in JavaScript

By

When it first arrived in iPhone apps, the simple “pull to refresh” action was instantly hailed as a genius bit of user interaction engineering.

It’s an ultra-intuitive way of refreshing the displayed page content by simply pulling the page down with your thumb, then releasing it — sort of like pulling a lever on a slot machine. The official Foursquare and Twitter (nee Tweetie) apps use it, so if you’re into social networking, you’re already familiar. But so far, its use has been limited to native apps.

Now developer Wayne Pan has created the same behavior in JavaScript for use in web apps. It’s just a proof of concept implementation at this time, and he’s found some of the limitations.

Point your mobile browser at waynepan.com/s/pull to test it. It’s a little jerky, but it does work. And his code doesn’t rely on any JavaScript libraries, so with a little tweaking, this behavior can be integrated into any web app and will work on Android and iOS devices. Nice work!

[Hat tip to Dion]

See Also:

Tags: , , ,
« OLDER POSTS