Archive for the ‘JavaScript’ Category

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.

File Under: Humor, JavaScript

It Looks Like You’re Trying to Visit a Webpage. Would You Like Help?

Image: Microsoft

Clippy may be dead, but it’s going to be a long time before Microsoft lives him down.

Clippy, whose real name was actually Office Assistant, made his debut in Microsoft Office 97 and quickly became famous for such clever quips as, “It looks like you’re writing a letter, would you like help?”

Since Clippy is long gone — he was removed when Office 2007 shipped — it only makes sense to resurrect him on the web, which is exactly what Clippy.js does. Yes, Clippy.js is “a full JavaScript implementation of Microsoft Agent (aka Clippy and friends), ready to be embedded in any website.”

Technically Clippy was not the only help agent and Clippy.js also supports Merlin (a wizard), Rover (a dog) and Links (cat), though sadly not our favorite, Will (a caricature of William Shakespeare, because inane, intrusive help is so much better when it comes from a poorly drawn Shakespeare).

The Clippy.js script is a “weekend project” by the developers behind Smore. As the Clippy.js website puts it, “our research shows that people love two things: failed Microsoft technologies and obscure JavaScript libraries. Naturally, we decided to combine the two.”

If you want to subject your visitors to Clippy, grab the script from GitHub and scroll through the mock Word document that is the Clippy.js site for details on how to use it. Bonus points if you use some conditional loading to only serve Clippy.js to IE 6 users.

File Under: JavaScript, Web Basics

Twitter Declares Everything Old New Again

Image: Twitter

Twitter is optimizing its web interface for speed, ditching several of the supposedly cutting-edge changes it made with the “new Twitter” revamp from 2010. The new Twitter redesign was controversial for its use of hashbang (#!) URLs and because it used JavaScript to build the entire page, content and all.

Now Twitter is returning to tried-and-true server-side methods of building webpages. It turns out using JavaScript to do everything is not such a good idea, at least not if you want your website to be fast.

Twitter says that returning to traditional means of serving webpages “dropped the time to first Tweet to one-fifth of what it was.”

Even better news for those concerned about the future of the web and the longevity of URLs is the news that Twitter is getting rid of its hashbang URLs. The hashbang syntax was originally designed to allow Google’s spiders to crawl Ajax content — content loaded dynamically — but sometime in 2010 hashbang URLs started popping up all over the web, including at Twitter.

The hashbang syntax works well if you use it as it was designed, to surface Ajax content that would otherwise be missed by Google. But it was always an awkward hack, not a cornerstone on which to build a well-designed URL, and extending it beyond its intended use often proves disastrous (as sites like Gawker can attest).

Twitter will begin phasing out hashbang URLs in the coming weeks, starting with its tweet permalink URLs.

Much of the write-up about the new speed enhancements on Twitter’s engineering blog reads like a web development best-practices tutorial from 2001, but there are some new ideas lurking toward the end, where Twitter Engineering Manager Dan Webb outlines Twitter’s new module-based JavaScript loading methods, built around CommonJS.

“We opted to arrange all our code as CommonJS modules,” writes Webb, “This means that each piece of our code explicitly declares what it needs to execute.” In other words, each piece of code is aware of what other pieces it needs to work. That means Twitter can tune how it bundles its code, “lazily load parts of it, download pieces in parallel, separate it into any number of files, and more — all without the author of the code having to know or care about this.”

Webb doesn’t mention Twitter’s front-end toolkit BootStrap in his post, but rolling together CommonJS and Twitter’s own dependency builder — which Webb says is similar to the RequireJS optimizer — sounds like a great addition for BootStrap 3.0.

File Under: Humor, JavaScript

There’s Nostalgia in the Waters of Lake.js

Lake.js: It's lakes all the way down. Image: Lake.js

Remember when the best way to align table cells was with a one-pixel gif? For that matter, remember tables?

Sometimes it’s easy to forget how far the web has come in the last decade, which is why we like the otherwise somewhat useless Lake.js. Lake.js is a JQuery plugin that creates a shimmering reflection of an image, an effect that dates from the days of Geocities — back when the web was nothing but one pixel gifs and under construction banners.

The appeal of Lake.js isn’t just about nostalgia though, it’s also a nice reminder that the web no longer needs to rely on terrible Java applets (the main source of cheesy lake reflections in the early days), or any other proprietary technologies to build shimmering lake effects. Today web standards like HTML, CSS and JavaScript can pull off not just lakes made of <canvas>, but things that were, until very recently, almost inconceivable.

Sure some of the web’s most common tools might still be hacks (CSS floats anyone?), but at least when we want cheesy rippling water we don’t have to download a 120 MB “applet” anymore.

Also, the first person to port Lake.js to pure CSS… please e-mail us when you’re done.