In the third update to my crossword web app tutorial, I discussed CSS Canvas. I mentioned how potentially powerful the canvas can be, especially as an alternative to Flash, but I wasn’t able to provide concrete examples since I hadn’t personally done anything exceptionally extraordinary with it yet.

Well now I have the proof! A couple of weeks ago I was followed on Twitter by @canvasdemos. The Canvas Demos blog dedicates its time to tracking down and showcasing demos and tutorials for the HTML canvas element. Some of the examples they’ve uncovered are truly amazing and include games, 3D tests, music visualizers, etc. If you’re at all intrigued by the power of CSS Canvas, and are wondering how you can use it on your own site (or Web app), don’t hesitate to give their site a look!.

The image above is from Jacob Seidelin’s music visualizer. The demo creates an image of Thom Yorke to the music of Radiohead’s Idioteque. It’s worth checking out.

— Ryan

No, it’s not the latest and greatest place to meet Sailor Moon-costumed babes and stuff bag after Watchmen-themed bag with useless, but free, tchotchkes. Favicons are the neat little Web site icons that appear in the address bar of your browser, and I finally got around to creating one.

Pretty, isn’t it? Did you know that Microsoft pioneered favicons in the release of Internet Explorer 5 as a way to spice up dreary bookmark menus? This was back when Microsoft actually contributed to the forward momentum of positive Internet change instead of holding it back. It wasn’t until later that favicons were incorporated into browsers’ address bars.

Most people know the purpose of a favicon and even understand how to implement one. Still, there are some unique things to keep in mind when generating the image itself.

continue reading »

Have you ever viewed the source of someone else’s webpage and seen gibberish like this:

Looks crazy. When I first ran across it, I assumed it was a random comment left by a developer (meaningful only to him or her). But there’s actually a really good reason why you’ll want to use this code.

When you validate a page using the W3C Markup Validation Service, the < and > characters are important. As a document is parsed, the validator relies on these characters to let it know when it has reached a tag in your HTML code. The parser uses a page’s tag hierarchy to understand the structure of your page and to determine if anything is invalid.

So, when it stumbles upon a random < or > in embedded JavaScript, the parser will get angry and return an error. (Note: Inline, or embedded, JavaScript is any script that is included directly in your HTML. It’s always a better practice to use external JavaScript files, but in the cases where inline scripts are unavoidable, continue reading.) The parser thinks it is encountering the beginning or ending of a tag, when in actuality it may have found a logical greater or lesser symbol instead.

continue reading »

All of the sites I code nowadays conform to the XHTML 1.0 Strict doctype declaration (or DTD). Except this site since, by default, WordPress uses the XHTML 1.0 Transitional DTD. In olden days people would quite regularly use target="_blank" in their anchor tags to launch a URL in a new window. Sadly, the “target” attribute is no longer supported under the strict XHTML 1.0 doctype and will throw an error when attempting to validate your page.

Googling for a standards-compliant alternative results in far too many options. Here’s the easiest and cleanest solution I’ve found:

Extremely compact and efficient.

While we’re on the topic, don’t validate this blog. It has 32 errors and 11 warnings, according to the W3C. No, this isn’t one of those “do as I say, not as I do” copouts. I plan to try and eliminate all errors and will even write a post about the process since, IMHO, validating your site is one of the most important things you should do before launching it.