Archive for the ‘JavaScript’ Category

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.

File Under: CSS, Humor, JavaScript

Blow Up the Web With ‘Font Bomb’

Wired.com Font Bombed. Image: Screenshot/Webmonkey.

We’ve already showed you how to turn any webpage into a game of Asteroids; now you can add Font Bomb to the list of ways to destroy text of the web.

Font Bomb is a fun little JavaScript bookmarklet you can use to plant bombs all around a webpage. Just drag the bookmarklet to your bookmarks bar and then head to a page you want to destroy. Click the bookmarklet and then start clicking anywhere on the page to plant bombs.

Then, thanks to a little magic from CSS 2D Transforms, the text starts flying — perfect for a little Friday afternoon amusement. (It’s also not a half-bad way to take out some frustration on trolls: Don’t feed them, just blow up what they wrote and move on.)

Font Bomb was created by Philippe-Antoine Lehoux. The code is available on GitHub (CoffeeScript) and there’s some discussion on Hacker News if you’d like to know more.

File Under: HTML5, JavaScript, Multimedia

JavaScript Decoder Brings High-Quality Audio to the Web

Image: Webmonkey

HTML5′s native audio and video tools promise to eventually make it possible to create sophisticated audio and video editing apps that run in the browser. Unfortunately much of that promise has thus far been marred by a battle over audio and video codecs. Right now what works in one browser on one operating system will not necessarily work on another.

Until the codec battle plays itself out, developers looking to build native HTML audio apps are in a bit of a bind. One way around the problem is to bypass the browser and provide your own decoder.

That’s exactly what the developers at Official.fm Labs have been hard at work doing. The latest impressive release is FLAC.js, a FLAC audio decoder written in pure JavaScript. FLAC.js joins the group’s earlier efforts, which include decoders for MP3, AAC and ALAC.

Used in conjunction with the nascent Web Audio API, the new FLAC decoder means you could serve up high-quality, lossless audio to browsers that support HTML5 audio. But beyond just playback the Web Audio API opens the door to a whole new range of audio applications in the browser — think GarageBand on the web or DJ applications.

To that end Official.fm Labs has been working a framework it calls Aurora.js (CoffeeScript) to help make it easier to build audio applications for the web.

If you’d like to experiment with Aurora.js or check out the new FLAC decoder, head on over to Official.fm’s GitHub account where you’ll find all the code available under an MIT license.