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.
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.
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).
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.
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.
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.
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.