Food For Thought #7

Order and complexity, however, cannot exist without each other. Complexity without order produces confusion—order without complexity produces boredom.

Web Fonts, sIFR Alternatives

Using custom fonts on the web, other than the dozen or so standards faces, has been "the next big thing" for the past several years. We've been teased with the proposed ability to embed custom fonts into web pages since the CSS2 specification submitted in 1998. However, until a major font foundry or company (like Adobe or Microsoft) decides to release a new set of fonts for public use, we're probably out of luck.

sIFR, the brainchild of Shaun Inman, has filled the void. Mike Davidson and Mark Wubben have picked up the torch and run with the technology. sIFR 3.0 is currently in the works and addresses a bevy of issues, like consistent font tuning across platforms. However, sIFR is both a blessing and a curse. Since each instance of sIFR becomes an embedded Flash movie, excessive use of sIFR slows down page load. Basically, if you try to use sIFR for more than headlines, then it starts to become more of a problem. While everything is best in moderation, body copy could use a little love, too.

Most folks are waiting on the CSS3 @font-face module to gain traction, but it's wrought with the same issues as the CSS2 spec. Jon Tan covers the topic more thoroughly than I ever will on this blog, so I recommend reading his blog post Making Web Fonts Work. Essentially, it's come down to a Microsoft vs. Everyone Else issue again, with IE supporting .eot (Embedded Open Types) files and other browsers supporting .otf (OpenType Font) files.

The latest buzz has been around Cufón. As its github page describes, it provides "fast text replacement with canvas and VML." The Cufón method requires converting fonts into "a proprietary format" and then utilizing a JavaScript rendering engine to display the font in a browser. I've only tested it in Firefox, but I already prefer it's implementation to sIFR, despite the fact that the text is not selectable. Apparently, it already works well cross-browser, with some known issues.

Lastly, sIFR Lite, Facelift and Typeface.js are some other contenders. sIFR Lite is essentially just a reworking of sIFR, but object-oriented and only 3.7kb uncompressed. Sadly, each have their problems, but I'm keeping my eye on them.

It's possible we may see some kind of resolution with CSS3's @font-face in the next wave of browser updates, but it really all comes down to licensing. Until a standard is settled upon, we'll continue to bootstrap custom fonts onto the web.

Related: Read the Increase Your Font Stacks With Font Matrix article on 24 Ways and learn how to construct a "font stack."

Specifying a Canonical URL

Last week, Google introduced a format to publicly specify the preferred URL for a page. You simply add this link tag to any page:

<link rel="canonical" href="http://www.example.com/page/" />

The "canonical" attribute tells the Googlebot which URL is the preferred address for any given page. This is perfect for me with a site like Silent Uproar. We've changed our URLs several times over the 8+ years the site has been running and Google has cached 2-3 different URLs for a lot of our archived content (i.e., some with a PHP extension, query strings and/or mod_rewrite URLs).

Not everyone is going to be able to utilize this update, but Google has already fielded a lot of questions for the people that will implement it. It's definitely a nice thing to have for sites with a bit of history and duplicate content issues.

Click Here Links Must Die

One of my biggest pet peeves are "click here" links. It's the lowest common denominator method for placing links in content. I never really liked them, but I vowed to never use them and rally against the practice starting about four years ago.

Zach Dunn over at Built Internet! apparently hates them as much as I do and wrote an article to that effect. He makes the argument that "click here" links don't really mean anything in context and that if "the links are clear enough, a user should not have to be instructed where to click." Not to mention, "click here" does nothing towards improving search engine rank.

It's such a small issue, but something that's very easy to remedy. Take a few minutes to rewrite a sentence next time you find yourself linking with "click here." Think of it as providing the user with a brief description of what it is they're about to see.

Food For Thought #6

Content precedes design. Design in the absence of content is not design, it's decoration.

MarkerManager

I've done some basic work with the Google Maps API before, but last year I helped Nice Outfit with some advanced map work on the York County Visitors Bureau website.

We built an interactive map to mark locations based on category. The map needed to toggle sets of locations on and off through checkbox controls. I knew how to mark a single location, but was a little unsure about adding, tracking and removing multiple markers. As well, the functionality needed to scale as the bureau added partners.

Luckily, Google provided a link to the open source MarkerManager, since their GMarkerManager is deprecated. The tool is part of the GMaps Utility Library project, which provides quite a few nice extensions to Google's functionality. As you'd imagine, the MarkerManager class allows for management of hundreds of map markers.

While this is not the most exciting topic, I'd suggest bookmarking the library for when you need to do a little bit more with a Google Map than the built-in API offers. There's even an AS3 library for Flash developers.

PHP Filter Functions

Late last year, I bookmarked a post on PHP filter functions. I've been using PHP for about 8 years and I've never heard of them. According to the PHP manual, the "filter extension is enabled by default as of PHP 5.2.0." Beforehand, it was an "experimental PECL extension," which might explain its mystery. If you're stuck with less than PHP 5, you're probably out of luck.

Technical details aside, the filters do what you'd expect: filter data. These filters could potentially replace most regular expression validation. Better yet, they provide a nice way to standardize this type of functionality. The workhorse function of this family is:

filter_var($value, $filter)

You simply pass it a variable and a predefined filter flag (or flags). Common filters provide validation of just about anything can you think of: email address, URL, string, integer, float, et al. The function returns a boolean FALSE if a value doesn't pass the filter.

In addition, the filters can also sanitize values. Those flags include sanitization for strings, quotes, special characters, et al. For starters, think of it as a replacement for cleaning GET/POST data with magic_quotes and/or mysql_real_escape_string.

The function that got me the most interested is the big brother to filter_var:

filter_var_array($data, $defintion)

Pass it an array of values, an array of filter definitions and it will give you back an array of results. With a little work upfront, you could streamline form validation with this function. I've got a validation class that I've been using for the past 2-3 years and I'm ready to rework it completely in favor of these filter functions.

I'll follow up this post with some impressions, once I get my hands dirty. However, I wanted to share this with anyone looking to step up their validation.

New Work, I'm Alive

December and January were both busy months, hence the lack of posts. Though, that's not much of an excuse. It's not like I can't spare 15 minutes, but I digress.

I've updated the Work page to include the new Dalek site I worked on with Nice Outfit, a site for Ramseur Records' folk-rock band Samantha Crain & the Midnight Shivers, a site for Jim Avett's gospel album and a little Google Maps API work on the York County Visitors Bureau website. I plan to discuss some of the nuts and bolts that went into these projects, but that's another post.

I've got a few more projects in the works and slew of blog posts in the tank. Time to breathe some life back into this blog.

Food For Thought #5

The more you say, the less people remember. The fewer the words, the greater the profit.

Google Analytics Tracking for Adobe Flash

This week at Adobe MAX, the Google Analytics team unveiled Google Analytics Tracking for Adobe Flash. According to Google:

This feature is a translation of the current Google Analytics tracking code into the ActionScript 3 programming language that dramatically simplifies the ability to track Flash, Flex and AS3 content. This new Flash tracking code provides all the rich features of the current JavaScript-based version, including campaign, pageview and event tracking and can be used to track Flash content such as embedded videos, branded microsites and distributed widgets, such as online games.

Developers have the choice of using a Flash Component or a AnalyticsLibrary Component, for complete control over tracking objects directly in AS3.

For more detailed information, check out the introduction and implementation guide over on Google Code. Then, watch the video demo on YouTube.