Archive for the ‘JavaScript’ Category

File Under: Humor, JavaScript
Apr
18
2012

There’s Nostalgia in the Waters of Lake.js

By

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.

Tags: ,
File Under: CSS, HTML5, JavaScript, Multimedia, Web Standards
Mar
28
2012

BrowserQuest Is Pure HTML5 Gaming Goodness

By

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:

Tags: ,
File Under: JavaScript, Programming
Mar
12
2012

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

By

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

Tags:
File Under: Browsers, JavaScript, Programming
Feb
17
2012

Google’s New ‘Dart’ Language to Get a Starring Role in Chrome

By

Google has released an experimental version of the Chromium web browser with support for the company’s new Dart programming language. Dart, which is Google’s attempt to improve on JavaScript, has thus far not enjoyed much support outside of Google, but the company continues to push forward with its own efforts.

The new development preview version of the Chromium browser, the open source version of Google’s Chrome browser, contains the Dart Virtual Machine. This release, which Google is calling “Dartium,” can be downloaded from the Dart language website. At the moment it’s available only for Mac OS X and Linux. Google says a Windows version is “coming soon.” Keep in mind that this is a preview release and intended for developer testing, not everyday use.

Google originally created Dart to address the shortcomings of JavaScript and ostensibly speed up the development of complex, large-scale web applications.

While there is much programmers might like about Dart, it is, like Microsoft’s VBScript before it, a nonstandard language from a single vendor created without any regard for the existing web standards process. The new Dartium release is the first browser to include a Dart Virtual Machine and, based on the response from other browser makers to the initial release of Dart, likely the only browser that will ever ship with a Dart VM. For its part Google says it plans to incorporate the experimental Dart VM into Chrome proper in the future.

The company also has a plan for all those browsers that aren’t jumping on the Dart bandwagon — a compiler that translates Dart to good old JavaScript. In this scenario Dart ends up somewhat like CoffeeScript, a JavaScript abstraction that makes more sense to some programmers.

For more details on the new Dartium browser and the latest improvements to the Dart VM, be sure to check out the Google Code Blog announcement.

Tags: , ,
File Under: JavaScript
Feb
6
2012

A Rose by Any Other Name Might Smell as Sweet, But it Would Probably Be Larger

By

It may have started as a lark, but the annual JS1K contest has long since ceased to be a joke. This year’s contest is already in full swing and notable for a spectacular 3-D drawing of a rose rendered using less than 1,024 bytes of JavaScript.

The JS1K contest seeks the web’s best JavaScript creations, with one small catch — the code used must be less than 1k. It might sound insane considering that some JavaScript frameworks — just the frameworks! — are over 100k, but since it began several years ago, JS1K’s experiments have never failed to impress.

One of this year’s most jaw-dropping efforts to date is developer Román Cortés 3-D rendering of a rose. Relying on Monte Carlo methods to keep the code size down, Cortés’ code draws a very nicely shaded 3-D rose for the love-themed 2012 edition of JS1K. You can check out the live demo on the JS1K website.

One word of warning: Part of what makes Cortés’ rose so small is that much of the heavy lifting is handed off to the processor. The demo code brought my CPU use over 100 percent and kept it pegged there the entire time it was open in Safari. Firefox and Chrome both managed to keep the number down to roughly 93 percent, but suffice it to say that a procedurally generated 3-D rose will tax your CPU.

To see how Cortés created the code behind the rose, be sure to visit his blog which offers a very thorough tutorial explaining how and why the code works. There’s also a great write-up on Cortés’ previous JS1K effort, a 3-D Christmas tree. Also be sure to check out the other submissions to this year’s JS1K contest on the JS1K website.

If you’ve got some impressive but terribly small bit of JavaScript code up your sleeve, fear not; the JS1K contest will continue accepting submissions through Wednesday, March 14, 2012. Details on the rules and submission process can be found on the JS1K website.

Tags: ,
« OLDER POSTS