Everything You Wanted to Know About IE9 But Didn't Know Where to Ask

For more than 10 weeks, I've been shining a light on the brilliant work of many talented Web designers and developers who have embraced the challenge of producing cool, cutting-edge, and beautiful Web sites using new technologies such as HTML5, SVG, CSS3, and JavaScript 5. And I've been pointing out the ways that these sites shine most brightly in Microsoft's latest version of its browser, Internet Explorer 9. As the Beautiful Website of the Day blog reaches its end, I think the time is right to mention the best one-stop site for learning and testing out the new technologies and IE9's key new features. And that site is Microsoft's own Internet Explorer 9 Test Drive.

The Test Drive was originally aimed at developers who wanted a head start in building new sites and revising old ones to work better in IE9. It's still that; and it's a trove of informative documents, videos, applications, and links for such tech heads. It's also the home page for what are called IE9 "platform previews" -- the latest versions of the underlying IE9 code packaged into a bare-bones interface. But beyond all that, the Test Drive is just an awesome collection, suitable for anyone, of fun and impressive Web programming feats.

There are four main sections: speed demos, tests of how fast your browser can process demanding calculations and animations; HTML5 demos, interactive demonstrations of how the new standard works; graphics demos, which focus on the incredible flexibility and power of HTML5's canvas element and of the third generation of cascading style sheets; and browser demos, which show off features unique to IE9, which have to do with its integration with Windows. Each of these sections has fun and fascinating stuff, but the two most fun and fascinating are speed demos and graphics demos, both of which contain more than 20 samples.

Read more »

Simply Amazing

Web designers have always been acutely aware of the limitations of their medium: slow modems have limited the size and number of graphics used on web sites, and designers even once had to limit their graphics to a "web-safe palette" of 216 colors. However, the abundance of broadband and fast computers means that web designers have become less concerned about trying to squeeze every last kilobyte out of their HTML, CSS, JavaScript and image files.

But even with broadband, a smaller file size means a faster web site. And to help remind us that smaller can be better, two prominent voices in the web community -- MIX Online and An Event Apart -- sponsored the 10K Contest, which ran in this fall. Covered previously in this blog, the contest challenged programmers to come up with a web application that is under 10K in size -- that's including HTML, CSS, images and JavaScript code! The entries in this contest handily pulled off the feat, exhibiting amazing visuals and complex interactivity.

One fun and challenging entry, simply named "Maze," challenges you to race against the clock and complete five mazes of increasing size and difficulty. Using your keyboard's arrow keys, you move a blue square through the maze, hoping to reach the green exit square in as few steps and as little time as possible. It's simple but addictive -- and infuriating when you realize you've entered a dead end and have to retrace your steps.

Read more »

All Tangled Up

While Flash has long been the primary tool used by professional game developers to create online games, HTML5 opens up game development to web developers. Powerful browsers like Internet Explorer 9, with its graphics hardware acceleration and speedy JavaScript engine, can draw and animate graphics fast enough to deliver compelling, visually exciting games.

Entanglement, a game by Gopherwood Studios, takes advantage of the new possibilities HTML5 brings. It uses the HTML5 canvas element to control the graphics and Ajax (a combination of JavaScript and XML) to communicate with the Gopherwood Studios web server after each turn.

Entanglement is played on a board made up of hexagonal tiles. You start from the red point in the center: it marks the beginning of a path that you create as the game proceeds. Your goal is to create the longest path, twisting and turning around the board, while trying to avoid dead ends at the edges of the board as well as the center tile. The longer the path you create, the more points you receive.

Read more »

Dangerously Addictive

The 10K Apart contest mentioned here with increasing frequency has spawned a really impressive number of beautifully-executed HTML5 games. For my penultimate Beautiful Website of the Day post, I'm going to feature one more outstanding work that deserves attention and that takes advantage of some spiffy new technologies supported by Internet Explorer 9.

This game is called Lines, and it was created by Australian Web developer and JavaScript artist Dmitry Baranovskiy. The basic idea is to get five or more balls of the same color in a row. The game begins with a nine-by-nine grid of squares, three of which contain a colored ball. You take a turn by selecting one ball and moving it to a new empty square, so long as the destination can be reached by moving across only empty squares. After each move, three new colored balls are added to the grid. So it becomes harder and harder to move, as there are fewer and fewer empty squares and clear paths to them. But every time you are able to arrange five or more balls into a row, they're removed from the board, you score points, and no new balls are added. When the board is completely full, the game is over.

(One helpful feature: The board shows you what colors the next three balls will be, even if you can't predict where they'll be placed. And you can skip a turn at any time by simply clicking on the three-ball preview.)

Read more »

If You Thought Tetris Was Addictive…

When a Russian computer engineer unleashed "Tetris" on the world in 1984, he couldn't have known how addictive the game would prove, or how many billions of dollars in lost productivity it would cost worldwide. But given how things played out, it's no surprise that -- like Asteroids, which I covered here a few days ago -- Tetris has been ported to virtually every platform known to mankind. And for those who did eventually tire of the original version, there are all sorts of other so-called polyominoes games on which to waste hours and hours of time.

Among these is a challenging and very enjoyable permutation called "Torus." It's built entirely in HTML5 and JavaScript, and thus "Torus" runs natively (sans plug-ins) in Internet Explorer 9. As the topologists among you will know, a torus is a particular kind of mathematical surface whose properties may be summarized this way: It's a donut. In the game of "Torus," you're not maneuvering objects made of two-dimensional squares into a rising wall. Rather, you're maneuvering objects made of three-dimensional cubes into a rising tower -- a cylindrical shape with a hole in the middle (not exactly a classic torus, but a topologically equivalent surface).

"Torus" is actually three games. There's the traditional game, which is essentially "Tetris;" "Time Attack," which challenges you to clear as many rows as possible in three minutes; and "Garbage," a fiendishly difficult variation which starts out with a tower of sparsely arranged shapes and asks you to whittle it down to three rows as quickly as possible. It isn't for the faint of heart.

Read more »

Easy Rider

In today's world of increasingly complex websites that use increasingly powerful code to build slick interfaces, there's something quite refreshing about "Canvas Rider." It's a simple game with humble graphical pretensions, and it's based on the HTML5 canvas element. It's rendered incredibly well by Internet Explorer 9, which leverages your computer's graphics processing hardware.

The game involves guiding a stick figure on a bike over landscapes drawn with primitive pencils and paintbrushes. It's reminiscent of ASCII art and the earliest video games, and yet in a way it's also very sophisticated. You may only have two bike choices and a few basic keyboard-controlled movements (lean forward, lean back, turn around, go), but the way your stick figure responds to your guidance is uncannily lifelike. When you crash, you can almost feel yourself tumble down into that ravine or slam into that wall.

All that is great fun. Even more fun is that you can build your own track and submit it for the community to play. The "Canvas Rider" site provides a built-in HTML5 drawing program, which gives you a simple set of tools for using brushes and pencils and line tools to build an obstacle course with optional buildings and creatures. You set the goal point, which the player must reach without crashing in order to complete your track; if she does, she can post her score. (The plays that earn the best scores are saved so you can load and play along with them to see how your action compares.) You may also add checkpoints to your track, to which players are returned after crashing so they can try again from that point on, and localized effects such as boosts, gravity modifiers, and bombs.

Read more »

Towering Above the Rest

FrozenDEFENCE is an attractively designed tower defense game that builds on the power of the HTML5 canvas element. The object of tower defense games, which go back to Atari's "Rampart" (1990), is to acquire and deploy towers on a map in order to defend territory and destroy enemies before they make it all the way across the map. Eliminating enemies earns you virtual money to buy or upgrade towers; if a certain number get through, it's game over.

The most popular Web version (so far) is the Flash-based "Desktop Tower Defense." But Flash can be kind of a drag on your browser, and it isn't even available on some platforms. The beauty of FrozenDEFENCE is that it will run anywhere HTML5 and JavaScript run -- so it works well on advanced mobile devices that don't have Flash, in addition to all modern browsers, including Internet Explorer 9.

Created by a Finnish developer, FrozenDEFENCE grants you 1,000 euros and five hearts to start. The money is enough to buy two cannon towers (the most basic piece), or to buy one gatling tower (a faster but less thorough piece) with change left over. You place your towers so that their firing range intersects the enemies' path; you collect more euros as you shoot them down. As you get richer, you can afford the more powerful laser and shake towers, and you can also spend money to improve your existing towers' ranges. But if your towers let an enemy through the maze, you lose a heart. The game ends when you lose all five hearts.

Read more »