2008 - A Year of Awesome JavaScript
2008 has been just great, not least because of all the great stuff people have been doing with JavaScript, the new
It's been a great year for JavaScript games. It looks like DHTML and
Others took the old arcade traditions and applied them to their own ideas, giving us cool games like Matt Hackett's Spacius, Mark Wilcox's Invaders from Mars, VertigoProject's RedLine Racing or a twist on the classic Tetris game.
We've even seen some roleplaying games, like the very cool Tombs of Asciiroth or the more graphical CanvasQuest by Andrew Wooldridge and the Prototype based ProtoRPG by Pierre Chassaing. Although they are mostly betas or demos at the moment, they look like they could turn out to be really cool one day.
2008 also saw a few libraries for JavaScript / DHTML game development pop up, most notably GameJS (pictured to the left with its demo game, Jetris) and GameQuery, the latter being an extension to the popular jQuery library.
Last, a special mention to a great (but small) game, DEFENDER of the favicon. Mathieu 'p01' Henri squeezed a version of the old Defender game into the 16x16 space of the favicon. How sweet is that?
The
Others who have been busy this year include the talented Mathieu 'p01' Henri who, among other things, specializes in making really tiny things, including tiny pieces of code that do cool things, examples: Rubber effect, Tunnex, Mars. All in 256 bytes each, nice!
As if that's not enough, Mathieu Henri is also a regular over at the Ozone Asylum where he teamed up with the
The Asylum inmates have even created small 20-line games, ranging from Lunar Lander to a Boulderdash clone and an impressive homage to Wolfenstein 3D
At the moment, the canvas element only supports 2D graphics, although there are efforts to enable a hardware accelerated third dimension from both the Mozilla and Opera teams. That doesn't mean there's no 3D graphics being done, though. Everything from basic 3D cubes, texturing experiments to regular JavaScript/Canvas 3D engines have been done.
Also check out the stuff done by the guys over at the Wii Opera SDK (it's not just for Opera or the Wii) and of course the 3D stuff here at Nihilogic.
That JavaScript performance is getting better and better must be true since it's now possible to emulate other systems in the browser. Matt Westcott (who also made the Antisocial demo) pulled another rabbit out of the hat, JSSpeccy the ZX Spectrum emulator. That's just way cool.
James Urquhart also played a bit and created a proof of concept SCUMM interpreter. It won't let you play Day of the Tentacle or even Maniac Mansion, but supposedly it can at least let you see a bit of OpenQuest.
A personal favorite of mine was António Afonso's JavaScript AGI interpreter. AGI was the system used by Sierra in the golden days of adventure gaming and when António made this little gem with an (almost) working Leisure Suit Larry, it just totally tickled my fancy.
One of the most impressive feats this year must be John Resig's port of the Processing language to JavaScript, Processing.js, complete with a giga-ton of cool demos. In the same vein, Aza Raskin created Algorithm Ink, a JavaScript/Canvas port of the Context Free program, a method for creating images based on rules and instructions. And there's more! Eitan Suez liked Turtle, the old Pascal graphics programming tool, so much that he decided to make a JavaScript version of it, TurtleJS.
On a more mathematically nerdy note, a few people have also been tackling fractals using JavaScript. Once again, p01 decided to play and rendered the Mandelbrot set with 137 bytes of DHTML which, with a bit of friendly competition, ended up at a tiny 111 bytes (FF only). Oliver Hunt created a prettier, graphical Mandelbrot set (as did I), and Russ Hall even made a full-fledged fractal explorer application.
While waiting for proper support for the HTML5 audio element, most people have gotten used to settling for Flash-based audio but that doesn't mean you can't make weird experiments with sound and JavaScript. For example, check out the JS-909 drum machine by Cameron "The Man in Blue" Adams. Admittedly, it does rely on Quicktime, but cool nonetheless.
Or how about dynamically generating and playing WAV files, like this sine waveform generator by sk89q, and while we're at it, have some generated MIDI as well.
Not just graphics and audio files can be generated, though. How about a small JavaScript library capable of generating ZIP files on the fly?
How much can you really do with CSS these days? Isn't it just for styling your text and placing your divs? Apparently not. Román Cortés has at least shown that an image of Homer Simpson can be created if your CSS-fu is strong enough.
Ernest Delgado mixed my Mario Kart demo with OpenStreetMap to create a nice little tech demo resembling the GPS navigation systems found in cars.
Finally, Cubescape is a cute, fun toy where you simply build a cubic landscape by dropping colored cubes. Great timewaster from The Man in Blue.
Of course, I've also been doing a bit of tinkering here at Nihilogic myself, so be sure to check the archive to see if there's anything you missed. I just hope 2009 will be as cool as 2008 was (and I don't see why that should not be the case!).
What do you think was great in 2008?
Edit: Chinese translation here
Read more...
canvas element and the web in general. Browser vendors are now competing, trying to outdo each other in terms of JavaScript performance, leaving developers and end-users as winners as we now get to do cool stuff that wasn't really feasible before. Here's a summary of the neat things of the year 2008 as I saw it.
Games
It's been a great year for JavaScript games. It looks like DHTML and canvas-based games are now capable of taking over some of the areas where Flash used to dominate. Many people have been building remakes of classic video games like Super Mario, Pac-Man, Breakout, Space Invaders, Bomberman or T&C Surf Designs.
Others took the old arcade traditions and applied them to their own ideas, giving us cool games like Matt Hackett's Spacius, Mark Wilcox's Invaders from Mars, VertigoProject's RedLine Racing or a twist on the classic Tetris game.
We've even seen some roleplaying games, like the very cool Tombs of Asciiroth or the more graphical CanvasQuest by Andrew Wooldridge and the Prototype based ProtoRPG by Pierre Chassaing. Although they are mostly betas or demos at the moment, they look like they could turn out to be really cool one day.
2008 also saw a few libraries for JavaScript / DHTML game development pop up, most notably GameJS (pictured to the left with its demo game, Jetris) and GameQuery, the latter being an extension to the popular jQuery library.
Last, a special mention to a great (but small) game, DEFENDER of the favicon. Mathieu 'p01' Henri squeezed a version of the old Defender game into the 16x16 space of the favicon. How sweet is that?
Demos
The canvas element is now supported in most browsers (that are not made by companies called Microsoft). That means we now have more options for creating dynamic graphics in the browser and people have not been shy to use it to show off their mad skills. Some have made small and simple demos showing the capabilities of the canvas, while others took it a step further, like Matt Westcott and his Antisocial demo, a social network satire in nice demo style complete with a demo making tool.
Others who have been busy this year include the talented Mathieu 'p01' Henri who, among other things, specializes in making really tiny things, including tiny pieces of code that do cool things, examples: Rubber effect, Tunnex, Mars. All in 256 bytes each, nice!
As if that's not enough, Mathieu Henri is also a regular over at the Ozone Asylum where he teamed up with the canvas element for the 20 lines contests to create visual goodies such as Dynamic Hypnoglow, Twinkle and Hypno Trip Down the Fractal Rug. These contest also gave birth to other great effects like colliding balls, some sort of 3D cube effect and dynamically generated BMP flames.
The Asylum inmates have even created small 20-line games, ranging from Lunar Lander to a Boulderdash clone and an impressive homage to Wolfenstein 3D
3D
At the moment, the canvas element only supports 2D graphics, although there are efforts to enable a hardware accelerated third dimension from both the Mozilla and Opera teams. That doesn't mean there's no 3D graphics being done, though. Everything from basic 3D cubes, texturing experiments to regular JavaScript/Canvas 3D engines have been done.
Also check out the stuff done by the guys over at the Wii Opera SDK (it's not just for Opera or the Wii) and of course the 3D stuff here at Nihilogic.
Emulation
That JavaScript performance is getting better and better must be true since it's now possible to emulate other systems in the browser. Matt Westcott (who also made the Antisocial demo) pulled another rabbit out of the hat, JSSpeccy the ZX Spectrum emulator. That's just way cool.
James Urquhart also played a bit and created a proof of concept SCUMM interpreter. It won't let you play Day of the Tentacle or even Maniac Mansion, but supposedly it can at least let you see a bit of OpenQuest.
A personal favorite of mine was António Afonso's JavaScript AGI interpreter. AGI was the system used by Sierra in the golden days of adventure gaming and when António made this little gem with an (almost) working Leisure Suit Larry, it just totally tickled my fancy.
Graphics
One of the most impressive feats this year must be John Resig's port of the Processing language to JavaScript, Processing.js, complete with a giga-ton of cool demos. In the same vein, Aza Raskin created Algorithm Ink, a JavaScript/Canvas port of the Context Free program, a method for creating images based on rules and instructions. And there's more! Eitan Suez liked Turtle, the old Pascal graphics programming tool, so much that he decided to make a JavaScript version of it, TurtleJS.
On a more mathematically nerdy note, a few people have also been tackling fractals using JavaScript. Once again, p01 decided to play and rendered the Mandelbrot set with 137 bytes of DHTML which, with a bit of friendly competition, ended up at a tiny 111 bytes (FF only). Oliver Hunt created a prettier, graphical Mandelbrot set (as did I), and Russ Hall even made a full-fledged fractal explorer application.
Audio
While waiting for proper support for the HTML5 audio element, most people have gotten used to settling for Flash-based audio but that doesn't mean you can't make weird experiments with sound and JavaScript. For example, check out the JS-909 drum machine by Cameron "The Man in Blue" Adams. Admittedly, it does rely on Quicktime, but cool nonetheless.
Or how about dynamically generating and playing WAV files, like this sine waveform generator by sk89q, and while we're at it, have some generated MIDI as well.
Odds and ends
Not just graphics and audio files can be generated, though. How about a small JavaScript library capable of generating ZIP files on the fly?
How much can you really do with CSS these days? Isn't it just for styling your text and placing your divs? Apparently not. Román Cortés has at least shown that an image of Homer Simpson can be created if your CSS-fu is strong enough.
Ernest Delgado mixed my Mario Kart demo with OpenStreetMap to create a nice little tech demo resembling the GPS navigation systems found in cars.
Finally, Cubescape is a cute, fun toy where you simply build a cubic landscape by dropping colored cubes. Great timewaster from The Man in Blue.
Of course, I've also been doing a bit of tinkering here at Nihilogic myself, so be sure to check the archive to see if there's anything you missed. I just hope 2009 will be as cool as 2008 was (and I don't see why that should not be the case!).
What do you think was great in 2008?
Edit: Chinese translation here
Read more...
W3C Markup Validation with JavaScript
I was just reading up on the validator API over at the W3C site
and saw that when you call the validator URL, the results are also put in the HTTP
response headers. That's pretty cool, I thought, and remembered one of Simon Willison's small JSON-P tools called json-head.
What json-head does is let you do a HEAD request for an arbitrary URL.
It then returns the headers, optionally calling a specified callback function.
So, what I've done is glue these two together to create a small function that lets
you validate a URL with a single JavaScript function call.
Read more...
Example usage:
validate("http://www.google.com/",
function(response) {
alert(
"URL: " + response.url + "\n"
+ "Status: " + response.status + "\n"
+ "Errors: " + response.errors + "\n"
+ "Warnings: " + response.warnings + "\n"
+ "Recursion: " + response.recursion
);
}
);
As you can see, the validate() function takes two arguments, the URL to validate and a callback function. The callback function is given a response object that carries the properties as seen in the example. You can also provide an optional third argument which is a function that will be called should something go wrong (only some errors are currently caught by this).
The meaning of the properties are as follows (taken from http://validator.w3.org/docs/api.html#http_headers, go there for more details):- status:
ValidorInvalidif validation was performed.
value will beAbortif a fatal error (decoding, 404 not found, etc) was encountered and validation could not be performed - errors:
Number of Errors found during validation.
0if no errors found. - warnings:
Number of Warnings found during validation.
0if no errors found. - recursion:
Integer. Generally,
1. More if recursively validating validation results.
Demo
Download
validate.jsRead more...
Software Development Meme
Whoops. Appears I've been tagged by James Urquhart.
How old were you when you first started programming?
I was probably 11 or 12 when I first started throwing PEEKs and POKEs at my C64, although my understanding of what was actually happening was close to nonexistent. It wasn't until about 8 years later after a detour into graphics design that I redeveloped an interest in programming and actually started coding "for real".
How did you get started in programming?
When I was a kid, I was just so fascinated with computers and seeing it act on something I had instructed it to was simply amazing. My first brush with programming was from magazines that had code listings ready to enter. Later, after I had lost a lot of my interest in programming, I was sort of forced into it as I got a job doing web design that eventually turned into a server side, ASP coding gig.
What was your first language?
BASIC and then years later ASP (classic). I had forgotten almost everything by then and my years as an ASP developer almost scared me away from programming for good if I hadn't sought out other languages.
What was the first real program you wrote?
The first application I wrote would be a web portal for a long gone online game called Space Merchant, 8 years ago or so. I made just about every mistake you can make but somehow it got me my first job.
What languages have you used since you started programming?
BASIC, ASP, SQL, PHP, Perl, Visual Basic, C, C++, JavaScript and right now I'm looking at Python.
What was your first professional programming gig?
Doing small to medium sized ASP web applications for a small, local company.
If you knew then what you know now, would you have started programming?
Yes, but I'd probably have skipped the "job" part and stayed at hobby programming.
If there is one thing you learned along the way that you would tell new developers, what would it be?
Question everything. Don't believe in limitations set by traditional thinking. Code for fun.
What’s the most fun you’ve ever had programming?
The fun factor has grown dramatically after I quit my job (back in school now, studying physics) since it leaves me so much more energy for the projects that I find interesting. For that reason, everything on nihilogic.dk could qualify as the "most fun".
Who’s next?
I'm gonna throw this the way of Yahoo! and tag Matt Hackett, a fellow JavaScript hacker who's doing great stuff.
I'd also like to tag Mathieu "p01" Henri, but I don't think he's blogging much. Read more...
How old were you when you first started programming?
I was probably 11 or 12 when I first started throwing PEEKs and POKEs at my C64, although my understanding of what was actually happening was close to nonexistent. It wasn't until about 8 years later after a detour into graphics design that I redeveloped an interest in programming and actually started coding "for real".
How did you get started in programming?
When I was a kid, I was just so fascinated with computers and seeing it act on something I had instructed it to was simply amazing. My first brush with programming was from magazines that had code listings ready to enter. Later, after I had lost a lot of my interest in programming, I was sort of forced into it as I got a job doing web design that eventually turned into a server side, ASP coding gig.
What was your first language?
BASIC and then years later ASP (classic). I had forgotten almost everything by then and my years as an ASP developer almost scared me away from programming for good if I hadn't sought out other languages.
What was the first real program you wrote?
The first application I wrote would be a web portal for a long gone online game called Space Merchant, 8 years ago or so. I made just about every mistake you can make but somehow it got me my first job.
What languages have you used since you started programming?
BASIC, ASP, SQL, PHP, Perl, Visual Basic, C, C++, JavaScript and right now I'm looking at Python.
What was your first professional programming gig?
Doing small to medium sized ASP web applications for a small, local company.
If you knew then what you know now, would you have started programming?
Yes, but I'd probably have skipped the "job" part and stayed at hobby programming.
If there is one thing you learned along the way that you would tell new developers, what would it be?
Question everything. Don't believe in limitations set by traditional thinking. Code for fun.
What’s the most fun you’ve ever had programming?
The fun factor has grown dramatically after I quit my job (back in school now, studying physics) since it leaves me so much more energy for the projects that I find interesting. For that reason, everything on nihilogic.dk could qualify as the "most fun".
Who’s next?
I'm gonna throw this the way of Yahoo! and tag Matt Hackett, a fellow JavaScript hacker who's doing great stuff.
I'd also like to tag Mathieu "p01" Henri, but I don't think he's blogging much. Read more...
