These don’t work in all browsers yet, and they work faster in Google Chrome than other browsers, but the Chrome Experiments show how far Javascript has come thanks to things like the canvas tag and powerful libraries. Witness a faithful recreation of the Amiga operating system and desktop, including the command line manager; a replication of the MilkDrop music visualisation plugin; games; 3D effects and a version of cartoon physics.
I attended the XTech conference at the beginning of May, and have just blogged my thoughts and notes on my own blog, so rather than reproduce those meanderings here, I will make like with the traditional web, and link to the posts. You can read these at:
A cracking conference, very engaging and stimulating, and from reading the posts on here about the Eduserv Symposium, it appears many themes cropped up in both conferences. I look forward to keeping an eye on this landscape to see what comes to pass, and what disappears along the way, and what gets bought by Microsoft.
This is a script from my archive. It is intended for inclusion in a web page, but it does something that is probably best done server-side. It’s customary in wikis to add an icon to indicate an external link. Why not use the favicon of the site you’re linking to? Attach to a test page with a lot of external links and modify the fourth line to put your domain name in.
Disclaimer: Transcluding images is generally bad practice. Amongst the downsides: you are taking someone else’s bandwidth, albeit a tiny amount; somebody could get their server to include a disgusting image in your site (not sure how disgusting you can be in 16×16 pixels). Anyway, with those caveats…)
It seems there’s an ongoing explosion of things that JavaScript can be made to do. Here’s a quick, non-evaluative round-up to prompt people to think of what pieces might be put together.
When you first encountered JavaScript, it was probably in the context of manipulating web forms and adding content to pages with the document.write function.
As browsers have standardised, it has become possible to dynamically style HTML, including making chunks of page appear and disappear. It gets more modern and interesting after the break.
Take a look at this demo I’ve knocked up.
Wiggle the slider and see what happens. It’s a terrible learning object, but it’s just an exploration of how easy it is to set up using HTML, CSS and JavaScript. No, really! Look at the source code and there’s no flash or other plugins involved. It’ll work more slowly in IE than Firefox, but works in both, at least on Windows.
I’m using the Canvas tag, which is natively supported by Firefox and Safari. Thanks to the excanvas library provided by Google, adding canvas functionality to IE is really easy.
I know that SVG (scalable vector graphics) has many advantages over canvas, and may be the way things go in the future but canvas has the key advantage that you can use it right now in modern browsers without needing plugins.
Also, the way of working with canvas is reminiscent of the graphics commands of computers back in the early 1980s, which is a good thing to anyone who grew up with those computers.
The slider is part of the Yahoo User Interface (YUI) library and the animated text is a YUI animation motion.
Plugging the things together, and to other things on the page (e.g. the web form) just requires a bit of JavaScript. I’ve long wanted to be able to make interactive web pages this easily.
