The JavaScript below was pointed out by Aaron Newton, and it comes from SharePoint. Jim Wilson said about it: "and we wonder why windows has 40 million lines of code."
Time for a bit of fun. The eternal battle of tables vs. CSS layouts continues. We geeks have had classics such as vi vs. emacs, and Star Wars vs. Star Trek.
I’m really typecasting myself here. If there were an international “Person most likely to write a Spectrum emulator in Javascript” award, I’d have taken it for the last five years running.
If you crack this thing open, you'll see Matt is using the Canvas tag to do some interesting things:
The rest is just creative abuse of the element, as usual… it’ll take advantage of the putImageData interface to do the pixel pushing if available (on my machine Firefox has it, Safari doesn’t) and fall back on drawing 1×1 pixel rectangles otherwise. This time I’ve thrown in Google’s ExplorerCanvas as a nod to those poor unfortunates still stuck with Internet Explorer. Incidentally, I’d be curious to know how it rates on Google Chrome (I don’t have an XP/Vista box to test on) - if the hype is true (and it implements the putImageData interface like all good up-to-date browsers should) then I’d expect it to comfortably reach 100% Spectrum speed on modest hardware.
Would could be more perfect for a Friday before the election than an attack ad generator, written using jQuery, jQuery UI, and YUI base line CSS resets.
This is really nicely done, including great tools such as speech integration.
At our Ajax Experience keynote this year, Dion and I coded up a simple little program that buzzed at random intervals every 10-120 seconds. Whenever it buzzed, one of us had to stop talking and the other would have to pick up right where the other guy left off. It definitely kept things fresh.
Quite a few folks asked us to release the code. It's quite trivial; check it out.
We used SoundManager2 to play the buzzer sound; the rest is straight-forward.
Eric Seidel normally spends his time building browsers, but he has a fun little bit of JavaScript code to show us this time. Gravity was inspired by the Flash Wii Ad that has been going around that uses Flash to explode out of the page.
The bookmarklet takes your form elements and images and starts doing the same thing to them, but uses normal browser manipulation and Canvas to do its magic, as well as the Box 2d physics engine.
I got to play an old school, sit down, Pacman at Google Developer Day, London, so it only seems appropriate to keep playing it thanks to Harry Guillermo and his new Pacman port to JavaScript.
Scott Schiller (SoundManager 2, cool games, and dhtml guru) shows that Flickr still has a lot of fun left in it. They have given a sneak peek at a new home page and you can migrate that version.
If you click on the link:
Then you will get an inline popup, and you will start to see some Flickr snow, and you will hear something courtesy of SoundManager 2. It's a small thing, but this is what the Web is about :)
I was at the University of Minnesota when Gopher, the Internet protocol, was in its prime. It was created by a professor at the University of Minnesota you see, and I had to help implement gopher services.
When the Web kicked off, they still tried to hang on, but made the fatal mistake of not having it totally open, and it quickly died off.
If you have time to step away from the iPhone, have a little giggle as "Verity Snob" has a piece on How to be an instant Web me-2.0 developer that includes the documented Web version numbers:
Web 1.0: Programming model equivalent to that of a slightly up-market 3270 terminal. Forms are filled in with the sequence: tab tab tab tab tab tab bonk.
Web 1.00001: The beginning of the rich web experience: the first ever, primitive Javascript code fragment is written. It generates an unwanted popup, and snaffles your credit card details.
Web 1.1: No visible difference from Web 1.0, apart from IE showing the text 'Javascript error' in its status bar.
Web 1.2: Standard buttons are upgraded with smart 3D-looking GIFs. These react to mouseover events by bobbing up and down politely over their drop shadows. Remember when we were excited by this sort of scriptery? (None of your CSS cleverness then.) It seems so quaint now. It makes me want to cry, thinking about the good old days of ugly web pages loading slowly.
Web 1.3: When you get to the home page of a V1.2 site with FireFox, it displays badly. When you go to a V1.3 website such as www.fdms.com with FireFox, it tells you to eff off and get IE. (These traditionalists in fact would seem to prefer it if you used IE4.) The age of 'you aren't good enough for our website' has begun, reaching full fruition at Web 1.5, see below.
Web 1.4: Basic client-side validation added. Forms are filled in with the sequence: tab tab tab tab tab What do you mean 'invalid post code' you bloody thing? The dread phrase 'next generation of 3d smileys' is encountered for the very first time.
Web 1.5: Home page preceded by Flash animation designed by the man who thought (wrongly) he should have been asked to do the title sequence for the next Bond movie. In practice, this means the user stares at an animated 'Please wait' sign for half a minute, then goes somewhere else.
Web 1.6: Date fields come with a little popup calendar to help you enter a valid date. Because of the differences in the box model as implemented by IE4, the Ok button is position beyond the edge of calendar's window, and it is impossible to use it to enter a date.
Web 1.7: The presence of extra code interferes with the standard function of browser controls. Clicking the back button, instead of taking you back to the previous phase on the corporate workflow site so that you could point out the bug to your team leader, abruptly dumps you on the money-shot page of the gentleman's entertainment website that Porno Pete from accounts was showing you earlier on. You say.
Web 1.8: Web pages at this level cannot be made to run on Windows Server 2003, no matter how many 'trusted zones' you add them to, nor how much you attempt to override Internet Explorer's Enhanced Security Configuration.
Web 1.9: You stumble upon Desktop Tower Defense one lunchtime, and are surprised when you look up from the screen with tired, gummy eyes to notice that it has suddenly become tomorrow. But at least you have got your world ranking up to 912,417.
Web 2.0: At last! You can get a fully fledged mail client in your browser. Now, wherever you are in the world, whatever time of day, without the need for your own PC, you are no more than a few minutes away from a screen that reads "Oops, something has gone wrong; we're sorry, try again in a few minutes".
Verity then goes on to discuss the Evolution of the programming model, What does the P in LAMP stand for?, We should pause to consider Ruby on Rails, and finally AJAX for a cleaner kitchen.
This is a genuine street sign from Nelson, New Zealand. But perhaps its telling us that Ajax really is a dead end and we need something better?! Or that now we've started using Ajax there's no escape?!!
Andrew Wooldridge created CanvasQuest with the idea of creating a simple roguelike game. It has some interesting features like map loading, and uses graphics to render the text via sprites.
Matthew Buchanan had a little fun and created a Timelapse CSS example that lets you walk through the process of how a browser would put together a page if it was a human artist:
When building website templates, I’m constantly switching between a view of my CSS code and a view of the page I’m working on in a browser. At my most fevered I’m switching from one to the other after every couple of amendments, to ensure my additional rules are having the intended effect. Over time, were I to record this incremental buildup, it would paint a reasonably good picture of my approach to converting a design comp to a CSS layout.
With this in mind, I thought it might be useful to try to capture the process automatically and then play it back. I’ve seen this done using a collection of manual screen captures, but that didn’t seem a particularly elegant or easily reproducible solution.
As a proof of concept I cobbled together a (stylistically unsound) function to traverse the stylesheets of the current page (in reverse order) and remove a property from each rule every tenth of a second.
