All posts tagged ‘JavaScript’

File Under: CSS, Humor, JavaScript

Blow Up the Web With ‘Font Bomb’ 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: Humor, JavaScript

There’s Nostalgia in the Waters of 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.

Mozilla Builds Video Chat App Using Nothing but Web Standards

Mozilla recently showed off a demo of a video chat app built entirely from web standards. Most of the demo runs on top of the proposed Web Real Time Communication (WebRTC) standard, the W3C’s answer to the audio and video streaming capabilities once found only in proprietary plugins like Flash.

Mozilla’s demo movie shows two users signed in with BrowserID (recently renamed Persona) start a video chat right in the browser. The Persona features, combined with the SocialAPI add-on for Firefox, make the demo browser look a bit like Facebook or other social sites with a “buddy list” of currently signed in users available in the sidebar. Select a user from that list and just click the video chat link to start a call.

Currently Mozilla’s video chat demo requires an experimental build of Firefox and actually uses “a custom API intended to simulate the getUserMedia and PeerConnection APIs currently being standardized.” In other words, video chat in Firefox is still a long way from replacing Skype, but Mozilla does plan to bring at least preliminary support to Firefox later this year.

The short-term goal, according to Mozilla hacker Anant Narayanan, who narrates the video above, is to add WebRTC support to Firefox’s Nightly channel “by the end of this quarter.” Narayanan cautions that in the beginning support may be “limited to just getUserMedia and not the full PeerConnection.”

While the demo video focuses on making video calls work in the desktop browser, with help from some other elements in Mozilla’s larger WebAPI project — which is developing a set of APIs that will allow web apps to better compete with platform-native applications — web-based video chat could work on any device. We recently looked at Mozilla’s Camera API, which gives developers access to your device’s camera, and, in conjunction with these video chat tools, could theoretically bring video chat to mobile browsers as well.

For more info on the video chat experiment, including the source code for the demo, head over to the Mozilla Hacks blog.

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

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.

File Under: JavaScript

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

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.