Archive for the ‘JavaScript’ Category

File Under: JavaScript, Multimedia

Tired of Tiny Movies? Go Large With BigVideo.js

Size matters. Image: Screenshot/Webmonkey

Nothing grabs a user’s attention like a big, full-window video on a landing page. For example, check out Path.com. However, with all the various screens potentially connecting to your site these days, making sure your movie plays full-window on all of them can be tricky.

That’s where BigVideo.js comes in. Developer John Polacek‘s BigVideo is a jQuery plugin for adding big background videos to your site. The plugin makes it easy to drop in a single video URL and get fit-to-fill background video that takes up the whole window. The script will fall back to displaying an image on devices where video doesn’t work.

BigVideo can also handle playlists, serving up a series of videos, as well as a very cool feature to play videos without the sound. And yes, you can (and should) add a button to allow users to turn the video off altogether. That said, I left BigVideo open, running in a background tab for several days and it didn’t have a noticeable impact on performance.

For more info, head over to the GitHub page where you can see BigVideo in action, get a full list of features and grab the code for your own site.

File Under: Browsers, JavaScript

Speedy Chrome Tops Google’s New ‘Octane’ JavaScript Test Suite

Is your browser running on high octane? Image: Barbara L. Hanson/Flickr

The Google Chrome team has added a new set of JavaScript benchmarks to the web, dubbed “Octane“. Octane joins the ranks of other test suites like WebKit’s SunSpider test and Mozilla’s Kraken.

Google’s Stefano Cazzulani, Chrome Product Manager, writes on the Chromium blog that, despite a plethora of benchmarks on the web, Google wanted a new suite with “new benchmarks created from full, unaltered, well-known web applications and libraries.” The result, says the company, is a test suite that better reflects performance in “real web applications.”

Of course what constitutes “well-known web applications and libraries” is left to Google’s Chrome team to decide, and, perhaps not coincidentally, Chrome scores quite well on Octane’s hand-picked suite. That’s not to say that Chrome isn’t actually quite fast, but it does highlight the main problem with browser-maker benchmarks — the browser vendor creating them almost always seems to score the highest on them.

I ran the latest version of each of the major web browsers through Octane on a 2008 MacBook Pro (average of five runs each):

  • Safari 6: 6007
  • Chrome 21: 8517
  • Firefox 14: 5351
  • Opera 12: 3330
  • Internet Explorer 9: (tested in VMWare, but IE9 didn’t render the page.)
  • Mobile Safari (iPad 3): 553 (incomplete test, typed arrays aren’t supported in Mobile Safari).

Naturally the results will vary depending on your hardware, particularly your graphics card, but in all my tests Chrome won by a large margin.

To see the actual tests — which include a 2D physics engine, a 3D rendering engine culled from translated C++ along wit PDF.js and other libraries — head on over to Google Code where you’ll find the source for the entire suite. Also be sure to read through the FAQ for more info about the thinking behind Octane.

File Under: JavaScript

Survey Finds JQuery Library Running on Half of All Websites

JQuery, the crown king of JavaScript. Image: Roberto Verzo/Flickr.

Every web developer knows that JQuery is popular, but just how popular? According to web technology survey group W3Techs, the little JavaScript library that could … already has, turning up on half of all sites on the web.

Created to simplify the process of writing JavaScript and manipulating HTML, JQuery began life a mere seven years ago, which makes the 50 percent adoption rate very impressive indeed.

And the numbers look even more impressive if you limit the survey to the top 10,000 sites (in terms of traffic) where the number jumps to 58.8 percent (curiously, if you limit it further to the top 1,000 use falls to 46.2 percent).

JQuery greatly simplifies working with JavaScript, particularly for newcomers, and that has clearly made it a favorite with developers. But it’s worth noting that some of JQuery’s widespread use is no doubt related to the fact that it’s a default part of many popular publishing platforms, like WordPress. In other words, many people may be using JQuery without even realizing it.

What we find most surprising (dare we say depressing?) about W3Techs’ data is that even if a site uses another library like Prototype, Dojo or MooTools there’s a good chance that it’s using JQuery as well, which is probably overkill in most cases. JQuery alone certainly isn’t responsible for the fact that we’re building a fatter, slower web, but if you’ve got two JS libraries loading on your site you might be doing it wrong.

Naturally that’s no fault of JQuery, but remember to use JavaScript judiciously no matter what library you choose. The fanciest interface in the world is worthless if no one sticks around for it to load.

File Under: Humor, JavaScript

What if Hemingway Wrote JavaScript?

Papa don’t code. Image: Wikimedia.

It’s unlikely Ernest Hemingway would have thought much of programming. Staring at a screen all day hammering out Perl doesn’t seem like something Papa would have enjoyed. A typewriter in the Cuban sun was more Hemingway’s bag.

But what would it have looked like if Hemingway had cracked open Vim and written a few web apps? Angus Croll, an engineer at Twitter, has one answer in a great post that looks at how some famous writers might have written code. Here’s Croll’s take on how Hemingway might have written JavaScript:

Code reduced to its essentials with no word or variable wasted. It’s not fancy; maybe it’s even a little pedantic — but that’s the beauty of Hemingway’s writing. No need for elaborate logic or clever variable names. It’s plain and it’s clear and it does what it has to — and nothing more.

The whole post is funny and well worth a read, particularly if you happen to have come to programming from a background in liberal arts. Other authors Croll covers include Shakespeare, Dickens, Bolaño and my personal favorite, surrealist Andre Breton. Also be sure to check out Croll’s JavaScript blog.

File Under: JavaScript, Visual Design

Prism: Beautiful Code-Highlighting for the Web

Deliciously meta: the Prism source code, highlighted with Prism. Image: Screenshot/Webmonkey

Prism is a slick new JavaScript library that adds a very attractive syntax highlighter to any website with a mere 1.5KB (minified & gzipped) of extra bandwidth.

PrismJS started life as the highlighter for Dabblet (which we looked at previously), but popular demand convinced developer Lea Verou to extract the library and release it as a standalone project.

Even if you’re happy with Pygments or another popular syntax highlighter, Prism is worth a look if only because its default syntax highlighting color schemes are beautiful.

Other things we like include the ability to add new color schemes and languages, as well as a plugin system for extending Prism. For the launch Verou has made three plugins available — line highlighting, a “Show Invisibles” tool and an autolinker to make URLs and emails in source code clickable. We also like the fact that Prism doesn’t force you to use any Prism-specific markup; just use <code> tags, along with the recommended way to define a code language in HTML 5 — by adding a language-xxxx class — and Prism does the rest.

As with anything cool on the web there is one catch to be aware of — namely Internet Explorer 8 and below, which Prism doesn’t support. It shouldn’t cause any problems for older versions of IE, but those users won’t see the pretty code highlighting.

For a full list of features — and a few limitations to be aware of — head over to the new Prism page.