Behind The Scenes Of A 1K Graphics Demo

Programmer/designer [Steven Wittens] has posted a fantastic write-up on the black art of producing compact demo code, dissecting his own entry in the 1K JavaScript Demo Contest. The goal is to produce the best JavaScript demo that can be expressed in 1024 characters or less and works reliably across all standards-compliant web browsers.

[Wittens] details several techniques for creating a lot of visual flash in very few bytes, including the use of procedural graphics rather than fixed datasets, exploiting prime numbers to avoid obvious repetitions in movement, and strategically fudging formulas to save space while adding visual interest. These methods are just as applicable to other memory-constrained situations, not just JavaScript — some of the contest entries bear a resemblance to the compact microcontroller demos we’ve previously showcased, except running in your browser window.

The contest runs through September 10th, allowing ample time to come up with something even more clever. Whether he wins or not, we think [Steven] deserves special merit on account of having one of the most stylish blogs in recent memory!

CoffeeScript: Like Aspirin For JavaScript

CoffeeScript is a language that compiles down into JavaScript. “But why? JavaScript is so simple?” Bullcorn.

If you don’t use JavaScript everyday the language is wonky and frustrating. When you need quick snippet of Javascript to build into a page you may know how to do it with three or four different languages but struggle with the touchy syntax that has long given developers headaches.

Give CoffeeScript a try, you’ll like it. If you do, give them a hand with development too.

[via @hornbeck]

How To Overlay Images By Using Greasemonkey

Today we’re going to take a look at writing scripts for the Greasemonkey add-on for Firefox. This add-on allows us to use JavaScript to make changes to the way webpages are displayed on our browser. These changes can only be seen by a copy of Firefox that is running a particular script. As an example, we’re going to write a script that adds a border to the banner image of each article on Hack a Day by overlaying the image you see above. Find out how it’s done after the break. Continue reading “How To Overlay Images By Using Greasemonkey”

XMPP And Home Automation

xmpp_office_lights

[Matthias] from Intuity Media Lab put together a nice bit on controlling office lights with XMPP from his Android phone. In the article, he explains the components involved in the project, why he chose XMPP, and lists everything you need to replicate it. The project makes use of a wide variety of tools and libraries, weaving together code from multiple languages to achieve its goal. Overall, his project is a welcome change in a world full of Twitterbased solutions.

Streamfile Encrypted File Drop

streamfile

There are myriad file transfer services on the web. Streamfile tries to set itself apart by providing a unique secure service. Their file upload system is all JavaScript and doesn’t rely on Flash. It uses SSL to secure the file transport. As soon as you start uploading the file, you can hand the link off to your recipient and they can start downloading without waiting for the upload to complete. The free limit is 150MB, but their PRO service allows 2GB files.

[via Download Squad]

Remote Image Processing In JavaScript

[youtube=http://www.youtube.com/watch?v=u3_cFel26J8]

[Tom] wrote in to tell us about his JavaScript project for motion detection. It ties together two ideas we’ve talked about recently. The first is doing image processing in-browser using Canvas(), which we’ve seen employed in captcha breaking. The second is offloading heavy processing to browsers, which we saw recently in the MapReduce implementation. [Tom] is using JavaScript to compare consecutive images to determine if there’s any motion. He did this as part of MJPG-Streamer, a program for streaming images from webcams. It can run on very limited hardware, but image processing can be very intensive. Doing the image processing in-browser makes up for this limitation and means that a custom client program doesn’t have to be written. You can find the code here and a PDF about the proof of concept.

Distributed Computing In JavaScript

mapreduce

We’ve heard about the idea of using browsers as distributed computing nodes for a couple years now. It’s only recently, with the race towards faster JavaScript engines in browsers like Chrome that this idea seems useful. [Antimatter15] did a proof of concept JavaScript implementation for reversing hashes. Plura Processing uses a Java applet to do distributed processing. Today, [Ilya Grigorik] posted an example using MapReduce in JavaScript. Google’s MapReduce is designed to support large dataset processing across computing clusters. It’s well suited for situations where computing nodes could go offline randomly (i.e. a browser navigates away from your site). He included a JavaScript snippet and a job server in Ruby. It will be interesting to see if someone comes up with a good use for this; you still need to convince people to keep your page open in the browser though. We’re just saying: try to act surprised when you realize Hack a Day is inexplicably making your processor spike…

[via Slashdot]