Sinceriously » html

Canvas Demos

admin — Thu, 26 Mar 2009 20:44:36 +0000

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

Favicon!

admin — Sat, 07 Mar 2009 20:32:11 +0000

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.

A favicon should be appropriately sized at 16×16 pixels. You can design them to be larger, but most Web browsers are going to scale them back down to 16×16 (or smaller), so test your image to ensure it will still appear acceptably if scaled.

When originally introduced, Web designers were required to name their icon favicon.ico (thus the name) and place it in the root directory of their Web site. Internet Explorer 5 would then instinctually find the icon and use the image. Today’s browsers provided a little more flexibility by allowing you to specify a path for the file and an image format. Simply place a tag in the of your page.

However, later versions of Microsoft Internet Explorer only truly support icons that have a legitimate .ico extension and that are exported in the icon file format. Many designers have changed their preferred image’s extension to .ico without first actually converting them to Microsoft Icon Files. This creates a conflict that Microsoft Internet Explorer cannot resolve; such icon images will not be displayed.

So how do you create an .ico file? Well, I used favicon.cc. Go to the site, upload your image, generate a favicon.ico file and upload it to the root directory of your Web site. Easy as pie. The site even provides a preview of what the image will look like in an address bar, which is very convenient indeed.

—Ryan

CDATA Run. Run, Data, Run!

admin — Wed, 25 Feb 2009 22:03:56 +0000

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.

To prohibit the parser from encountering and evaluating code, like JavaScript, surround the code in the gibberish above. For example:

Now your JavaScript is untouchable and will not anger pesky validators. Check those errors off the list! (All of the other errors really are your fault, though. Lazy developer.)
Note: The comment characters /* and */ are not required, but failure to include them will cause some JavaScript compilers to freak out. Be safe, include them.



New Windows, New Standards
admin — Sun, 22 Feb 2009 20:09:17 +0000
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:
Your Link
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.