Archive for the ‘JavaScript’ Category

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.

BrowserQuest Is Pure HTML5 Gaming Goodness

NyanCat is one of several Easter eggs in BrowserQuest

Mozilla has partnered with developers at Little Workshop to launch BrowserQuest, a Zelda-inspired multiplayer roleplaying game built entirely on the open web stack — HTML5, JavaScript and CSS.

While BrowserQuest is a fun game to play, it was written as much to prove a point as to be a game — namely, that web developers no longer need to rely on Flash to create sophisticated online games. Using today’s web standards, game developers can build impressively complex games that work across devices.

To give BrowserQuest a try, just head on over to the site and pick a username. BrowserQuest will work in most modern web browsers including Firefox, Chrome, Safari, Opera (provided you enable WebSockets), Mobile Safari and Firefox for Android.

In an effort to help game developers looking to build more serious HTML5-based games, the code behind BrowserQuest has been released on GitHub.

BrowserQuest’s backend, which handles the real-time multiplayer aspect of the game, is written in JavaScript and runs on Node.js. As you would expect BrowserQuest uses the HTML5 Canvas element to actually render its 16-bit-style world and hooks into the HTML5 audio APIs for sound effects.

BrowserQuest is responsive as well, using @media queries to adapt to the size of your screen.

WebSockets — which are back, after being rewritten to fix some early flaws — handle the chat feature, which allows players to communicate within BrowserQuest. The final element in BrowserQuest’s HTML5 puzzle is localStorage, which saves your progress as you move through the game.

Although designed as much to showcase the power of WebSockets as to be an actual videogame, BrowserQuest is addictive and can easily suck you into its world for an entire morning if you’re not careful. (Not that we’d know.) There are also quite a few Easter eggs hidden away in its depths.

For more info on BrowserQuest either dive into the game, dig through the code or watch the screencast from developer Guillaume Lecollinet:

File Under: JavaScript, Programming

Octocat, Meet Firebug: The Popular Firefox Developer Tool Is Now on GitHub

What has six legs, eight tentacles and the head of a cat? Firebug on GitHub of course. Yes, it’s true, Firebug, the JavaScript and web development tool that spawned a thousand imitators (well, at least three anyway) is now available on GitHub.

Firebug has long been open source, but has not, until now, been officially available via Git. The move to Git and the new hosting page on GitHub means that interested developers have an easier way to fork the project, tinker with the code and contribute to Firebug.

Firebug developer Jan Odvarko says the move to GitHub has been smooth so far and will offer interested developers “a much better way to collaborate with other coders.”

Indeed GitHub makes it simple to create your own version of Firebug, whether for fixing bugs, contributing new features or developing Firebug extensions. For details on how to get started with Firebug on GitHub, check out Odvarko’s blog post.

Despite its long-standing relationship with Firebug, Mozilla recently began developing its own, built-in developer tools for Firefox. The move to native tools has left some wondering about the future of Firebug, and no doubt the move to GitHub is in part designed to get more developers contributing to the project.

If you’d like to, ahem, get in on the fun, head on over to Firebug’s GitHub page. Also, if you haven’t seen it yet, be sure to read Wired’s excellent profile of GitHub (the article is available on GitHub as well, natch).