iPod Supports Standards

Uncategorized

Standards like MP3? Nope, web standards. Go to the iPod sub-site and toggle your stylesheets using a favelet. Notice anything? Now check out the source; still crufty in places, but a giant step forward from Apple’s old code, which is still viewable on other parts of their site. Great!

I noticed this because I was on the site to check out the iPod Mini. Yes, I know that for $50 more I get 11 more gigabytes, but even the largest iPod still wouldn’t hold all my music. Realistically, I don’t 10,000 songs in my pocket. About a thousand should hold me for a few days between syncing. I thought the Minis were pretty silly until Elissa dragged me into an Apple store the other day and I saw one up close. My goodness those things are small, making the iPod feel gargantuan in comparison. Size does matter, a lesson I learned from my old 16.1″ Sony laptop, bulky digital camera, and the Visor Prism. My only concern about the Mini is I wouldn’t be able to use accesories like this voice recorder. That’s probably for the best though, as I need to stop recording concerts and such on hardware not meant for it and break down and get (another) MiniDisc recorder and a decent microphone.

While at the site I noticed the rollovers were so fast they had to be CSS, and checking under the hood I found not only a mostly-CSS layout, but pages just a few simple mistakes away from validating. It’s good to see a company that “gets it” in many other areas finally maturing in their web presence.

UPDATE: Apple properties which seem to be on the bandwagon:

This is obviously a work in progress becuase you have pages like this antivirus page which is very much old-school markup. Can’t wait to hear more about this, or an official word from Apple with more information about their new-generation markup. Are there any bloggers inside of Apple?

XFN Press

Uncategorized,

Today was a great day in that I got to read two excellent write-ups of XFN. The first comes from Shirley Kaiser at Brainstorms and Raves: Friends, XFN, and Hyperlinks. The second came from Molly and it’s a mouthful: Integrated Web Design: Social Networking — The Relationship between Humans and Computers is Coming of Age. Molly’s article quotes me on pages 3 and 4, so watch out.

I suppose now is as good a time as any to announce this little tool I wrote for XFN about a month ago. Exefen (pronounced exy-fen) reads any public HTML page you give it and then returns every external link on the page with a XFN Creator widget attached to it. You can then go and add XFN values as appropiate just by clicking a few boxes. Then when you submit that data exefen returns the original page source with all the XFN data added. Some features:

  • Works with all reasonably formed XHTML and HTML, different quoting styles etc.
  • Parses any existing rel values and uses those
  • Preserves formatting, etc in original document
  • Ignores internal and relative links

It could probably do more, and reasonable requests will be entertained. This tool was actually made in response to a comment by Zeldman saying he didn’t have time to add XFN values to his externals page. Using this tool he did it in less than an hour. In his words, “Fabulous! Great tool.” Are you XFN friendly yet?

Tracking in Generated Images

Uncategorized

Generating images with PHP is one of my favorite tricks and the ease of doing this in PHP is really a testament the language getting something right. If you’re on the site and not in your RSS aggregator, then you enjoy a generated image on every page on PhotoMatt.net, the titles of each post and the post times graph at the bottom of the page. Combined with image replacement techniques, PHP-generated images can be very useful. This was one of the first blogs I know of to do it, but I’ve seen it on several sites since then and I’ve shared the code with anyone who asks.

However the function I’m using for all of this, imagettftext is rather crude, and doesn’t allow for much control in how the text is presented. After a bit of work I just created a function that simulates tracking in text images that are created by PHP. I’m happy with structure of the code, but the result is much uglier than if the text had been set by any decent program. Imagettftext is supposed to support unicode, so I’ll have to investigate using unicode semi-space characters or perhaps interfacing with Freetype more directly.

Anyway, now the image generator takes a background color (which may be transparent), a text color, and a rollover color. Then it generates a single image with the given text in it once with each color, for use with Pixy’s fast rollovers. This is all in the context of the Unamed CMS that is coming Real Soon(tm).

Notables

Uncategorized,

Some WordPress-powered blogs that have caught my eye recently:

Bill Day
“Bill Day is a Staff Engineer & Technology Evangelist at Sun Microsystems as well as Founder & Technical Guru of Day Web Development.
Bill’s J2ME Archive, writing, and speaking have helped drive J2ME adoption to hundreds of millions of devices and empowered tens of thousands to write applications for Java enabled handsets and PDAs.”
AxxLog
Joe Clark’s accessibility blog. Focusing lately on the (lack of) accesibility of a PVR.
Matthew Thomas
The same mpt, new domain. I don’t know if WordPress is the ultimate weblogging system yet, but it seems to work well for him. Matthew has given some brilliant input into the options interface which is going to be in WordPress 1.2.
Kimberly Blessing
Interesting gal I met at SxSW, Kimberly is a standards evangelist and developer at AOL.
Binary Bonsai
Great design and content. Most sites find a good design and stick with it. Micheal pulls out a brand new one just as good or better than the last every month or so. Michael is the guy who taught me how to make my XP desktop look decent.
Lars Holst
An very well-done WP site. Check out the style switcher.
Image Safari
Nicest WP photoblog I’ve seen yet. Reload for entertaining random header graphics.
Rebel Pixel
Excellent look and layout. Very interesting link styling. Nice linklog.
Debian WordPress package
Not a blog like the others, but an amazing development. Type apt-get install wordpress at your Debian command line and it’s there, automatically setting up MySQL, PHP, or Apache as needed. The packager says “I’m working on some scripts to make Debian automagically configure your blog on the next release of the package.” Awesome.

I hesitated to even start a list because this really is the very tip of the iceberg. I could write a post every day for the next 3 months highlighting someone doing something great with WordPress, and in July there would be hundreds more.

I know of a couple of projects in the oven and I can’t wait for them to (re)launch. If you’re doing something interesting or innovative with WP, let me know. Maybe I can even help out.

Temporally Challenged

Ideas

Eric has a new book you should buy, despite the fact he’s all wrong about weblogs. His thesis is that it’s easy to read chronological items that relate to each other from top to bottom on a page. It’s not that Eric has his facts wrong, he’s just looking at the wrong facts.

Weblogs are not 20 chapter books. Eric’s entries refer and develop more than the average weblog’s, he is no exception to the rule that most weblogs would be just as intelligble if they randomly ordered the entries you haven’t read yet than if they presented the newest ones at the top. For some reason Eric insists on using monthly archives for his permalinks, which isn’t helping his visitors or Google (or the bandwidth he’s concerned about). Anchored monthly archives should never be used for permalinks. The only people who still use these are those who are technically hindered from or too lazy to implement post-level permalinks.

On monthly, weekly, or daily archives it makes perfect sense for the entries to be ordered chronologically, because the defining characteristic of the posts is their chronological relation to that date range. On a search result page, I want to see the results ordered either in reverse chronological order or by some search relevance. Both Technorati and Feedster get this, and both default to reverse chronological order of their results. On the front page, which is where Eric has his main beef, the most relevant thing to at least 95% of visitors is going to be the latest items. Anything else is going to be making the site less useful to the majority of users for the benefit of a few. There is a much larger precedent for putting the most recent items at top than just weblogs: most email and webmail software I’ve used, every press release page, news sites like CNN, Zeldman, the Board of Governors, the White House. Breaking the convention of thousands of familar sites for the benefit of the occasional reader who checks back every week or so but is really annoyed at having to scroll funny to what they’ve missed breaks the Hippocratic Oath of design. Weblogs aren’t ordered the way they are because of some freak historical accident, they’re ordered this way because it works.

(A sidenote about the bandwidth issue: it’s dead. Of course pages should be made as small as possible using standards and efficient markup to help them load quickly. No one is going to argue that. However an optimized 10K page loaded thousands of times a day is still a healthy chunk of bandwidth. If you are adjusting your content or paying more for the popularity of your website, find a better provider. The server that this site (and others) is on is allocated 1.2 terabytes of bandwidth transfer per month. At worst it uses a third of that. Server bandwidth should not be an issue anymore these days.)

I mostly disagree with his post, however I feel Eric’s pain. I’ve had to do the scroll-catchup thing before, and it was annoying. Without breaking the website for the vast majority of my users, I can offer some relief:

  1. Eric is a busy guy and I’m guessing he uses a newsreader (like NetNewsWire) to keep track of who has updated. If you click through to the permalink of a new item it will take you to the individual archive for that page, complete with comments. I have always had intra-post navigation at the top of the page, but after reading Eric’s screed it occurred to me where that would really be useful is after you’ve read the article and want to move on to the next thing. So now I have post navigation above the article, after the article, and after the comments. If you’re a few posts behind, navigate the individual archives instead of a monthly archive or the front page. Enjoy.
  2. One benefit to a completely dynamic system is that you can change views on the fly pretty easily. So if the reverse chronological thing bothers you that much, at least with WordPress blogs you have a easy fix. Simply add ?order=asc to any WordPress URI and it will order the dates ascending instead of descending. Example: my March archives, my March archives descending. It would also be pretty trivial to set a cookie to allow people to see things ordered different ways, and I imagine within a few hours of writing this there will be a new hack or plugin on the forums. If only everyone used WordPress.

Lockergnome Happy Ending

Uncategorized,

Chris Pirillo has floated another Lockergnome redesign that embraces web standards and looks good to boot. I couldn’t be happier. Here’s Chris’ post on the matter:

Boo-yah! I’m going to keep nagging Jason until he applies this weekend’s test code site-wide. No legacy tags, beyotch! Oh, and… “This Page Is Valid XHTML 1.0 Transitional!” I’m not sure if I wanna play with a fixed-width or stick with the variable. Doesn’t look great on anything less than 1024×768, but those folks are in the minority. Hey, I got it to look fantastic in all the major browsers on all the major platforms – that’s gotta count for something. Props to glish for the guidance. So, what did I use for my editor? Notepad, baby. Metapad, actually (the best clone around). Thanks to everyone else for the virtual ass-kicking; you accelerated the inevitable.

Most of you will be happy that it looks like a page from this century, but I know some of you are wondering about the markup. It’s decent. Eric Meyer actually covered the Lockergnome debacle and their redesign in his part of the panel on CSS and said it suffers from “classitis” — using too many class declarations. Example:

<ul class="menulist">
<li class="menuitem">
<a href="http://www.emtec.com/mailbell/index.html?lgnm" title="POP3/Hotmail and IMAP Email notification and mail preview">Mailbell - be notified about new email</a>
</li>
<li class="menuitem">
<a href="http://www.vypress.com/" title="Instant messaging and conferencing for LAN">Vypress Chat</a>
</li>
<li class="menuitem">
<a href="http://www.emtec.com/pyrobatchftp/index.html?lgnm" title="Perform automated and unattended ftp file transfers via scripts.">PyroBatchFTP - Scripted FTP v2.08</a>
</li>

Instead of explicitly addressing the menuitem class you could just use the CSS selector .menulist li which would apply to all list items under an element with the class of menulist. I forget the name for this type of selector, but it’s the most useful technique I use daily in CSS.

What’s great is now we are discussing what Lockergnome is doing well and how they could tweak it to make it better rather than wondering how the hell they went wrong. I commend the group at Lockergnome for doing the right thing.

Previous articles on the same subject: