by Kyle Weems 9.May 2008 08:10
Variety in donuts is cheap. Part of the appeal to working at Mindfly is the close proximity to Rocket Donuts. Although this hasn't done my waistband any favors, it does make it altogether too easy to buy a baker's dozen of donuts for under $12.
In the browser world, variety gets expensive after a point. Like any developer studio, Mindfly has several browsers on hand to see how our websites are rendering. Granted, we're very web standards oriented (I feel like I should capitalize that for emphasis). Although this means in theory a website should look mostly the same in every browser, in practice we all know this doesn't work out so well (as I've ranted frequently about in the past). In particular, IE6 and IE7 (which sadly have the largest share of the Internet Pie... which is something I now want to bake) are renowned for sort of taking standards like guidlines that can be conveniently ignored.
Mindfly is a Windows-based shop (I'm sure plenty of you designers don't believe that's possible, but it is!) so it's free/easy for us to test our sites on IE7, IE6 (via the virtual pc), Firefox, Opera, and Safari/Win. However, our token Apple's operating system isn't up to date, so we don't have the newer version of Safari/Mac to test. Furthermore, although it's a small piece of the pie, we don't have any Linux boxes to test the million different browsers supported by the various Linux flavors.
What do we do? Ignore the problem and tell Apple to shove it? Spends lots of money on tons of computers?
No.
First, designing with standards fixes the vast majority of potential problems before they happen.
Secondly, if you need to confirm any visual glitches on a website in a browser you don't have, you can check out Browsershots.
I've had it pointed out to me just recently, but it's a neat little site that you can give any url to check out, and after some processing time it shows you how that url renders on a cornucopia of browsers (quite a few more than a baker's dozen, I might add). I'm not sure that I need to know how a site renders with Kazehakase 0.5.4 on PLD Titanium. But if a client is complaining of an issue in Safari/Mac, I can give it a quick look.
There's severe limitations, of course. It's just doing a screenshot of the page, so there's no interaction. And it's not practical to do edits, take a snapshot, do edits, take a snapshot, etc. But used appropriately, I can see Browsershots being the sort of tool that helps spot glaring issues before a client does.
by Karina Beattiger 8.May 2008 08:18
Alliteration aside, I am what some may call a rabid hater of all blog and networking sites whose main method for gauging interest is akin to a high school dance. (You may choose your own details.) Facebook, MySpace, DeviantArt, LiveJournal -- I can talk here, I used to be an eeeeeaaaaaaarly adopter, with a username people tried to pay me to give up -- and other such 'friendslist driven' networking sites. You know what I'm talking about. For years, I've managed to stay away from the sheer ridiculousness that is "What do you mean, I'm not in your top 10?" and "Did you see what Nancy posted in her blog about George, who posted in his blog about Ray, who posted in Nancy's blog about that kid who set his pants on fire?" (C'mon, Youtubers, you've seen it, too...)
So when Twitter started making an appearance a couple years ago, I subconsciously filed it under 'don't care' and moved on. It was, to my way of thinking, just another popularity game with not-so-subtle hints of obssessive stalking and a continuation of the 'let's plug in to the internet and never leave' theme that's been creeping up on us (avalanched?) for the past decade or so. Yes, as a web designer, I can't talk too loudly, so I won't. About that, anyway. This time.
Except... Then I learned that WD Weems had his own Twitter. And that he was incorporating it into his blog. And that, now knowing you can do such a thing, he was incorporating it into his blog in a pretty awesome way. Oh, ho, ho. I am intrigued. And then he upped the ante: did you know Andy Clarke has a Twitter feed? I bet you do -- he's got 1,682 followers (in Twit-speak, it means 1,682 people are watching his feed). You're one of them, aren't you? It's okay; stand proud. I am, too.
This is where Twitter starts to feel vaguely stalkery to me. On the one hand, I'm the kind of person who watches my IMs to see what everyone's away messages are. If they're sufficiently clever, I leave a message with them. If not, the tiny part of me that is a frothing-at-the-mouth Virgo is at least content to know what everyone is doing in some vain attempt at controlling the schedules and whereabouts of my friends. (Why I am not dead in a ditch somewhere is beyond me -- my friends are tolerant and kind.) On the other hand, it's pretty fascinating to get a glimpse into the daily lives of people who are, for all intents and purposes, nothing more than pixels on a screen to me: Kyle swears Andy is flesh and blood, but maybe he's just a really excellently crafted virtual reality rock star with fingers in every port worldwide, leaving clever comments like Alice, only with personality.
And then here's where Twitter starts expanding from simple stalkery. Andy isn't the only web guru on the system. Eric Meyer, star of meyerweb.com; Jeffrey Zeldman, of A List Apart fame as well as his own self-named blog; and so on. I could keep going, but I'm on a time limit here. My tea is getting cold.
There's a point to all this name-dropping, though, I promise: all of these gurus are linked through Twitter. Of course, Twitter isn't the only application that does this, but bear with me here. The beauty of Twitter is that it only allows for a few lines at a time -- there's a 140 character limit. This doesn't allow for very much room. It forces the Tweeter to keep it short and concise, either dabbling in the mysterious one-liner or laying out a thought-provoking statement of opinion or fact. Or, my personal favorite, engaging in the slow, yet fun to watch, exchange of comments to each other, a la the all-purpose @ sign. When they all meet up for a conference or event, the back and forth of Tweets and Twitterers takes on a uniform subject -- from the saga of the disappearing underpansuitcase to the travels and travails of getting to and from and surving the conference in question.
As if this wasn't cool enough, the sheer PR capability of an easily maintained mini-blog is mind-blowing. Not only can you single-handedly let people know that you're active, alive, and feeling chipper (or not), but you can always take the opportunity to network with your peers, as well. You can input the code into your website, or blog, or whathaveyou, offering a neat and easy way to inform your non-Twitter stalkers that you're up and about and busy as a bee, or you can simply use it as a kind of periscope into everyone else's lives.
...It really does sound a little stalkish, doesn't it?
So, a brief recap, then. Twitter:
- A Toy: Fulfilling everyone's undying need to stalk somebody.
- A Tool: Networking, idea-sharing, and a kind of GPS on the pulse of the community.
- A Guilty Pleasure: Because I admit to an undying need to stalk people.
All in all, like any tool, you're going to find your fair share of twits as well as tradesman. The key here is to find the community that you're interested in to begin with. When used sparingly, and without the popularity-driven fanaticism of MySpace's friends list-padding mindset, Twitter can be a useful and effective tool of the trade. As well as a guilty pleasure.
...What? I've got my cake. Now I'm going to eat it, too!
by Kyle Weems 30.April 2008 14:07
I had the (mis)fortune to watch the 1983 fantasy 'classic' Krull yesterday. With the amount of laser beams and white-clad troopers in the film, it feels like someone put Sleeping Beauty with Star Wars in a blender, then had Lewis Carrol write the dialogue. I enjoyed it immensely, but then, I am apparently sick in the head.
The premise goes as follows (I swear there's a point to this): Prince Colwyn goes to marry the princess of an opposing kingdom so their lands can unite to defeat 'the Slayers', an invading army from space. During the wedding everyone but him is killed, and he's rescued by an old man that I'll call Obi Wan Kenobi's Doppleganger (or OWKD for short). OWKD tells Colwyn that he needs a mystic weapon called "the Glaive" to defeat "the Beast" that leads the Slayers and rescue the princess. So Colwyn proceeds to climb tall mountains, stick his hand in lava, recruit criminals, get a couple of seers and OWKD killed (and a cyclops) and so forth before finally confronting el Beasto in it's asteroid/fortress lair. Finally when the time comes for him to defeat the big baddy, he manages to wound and knock it down with his Glaive (always capitalized in speech) only to have the beast get back up and proceed to look like a bad acid trip. All would be lost, but at the last moment he and the princess realize (with little clues as to how) that the way to beat the Beast is their true love, which manifests in this case as a magic flame that was part of their wedding ceremony. Colwyn then proceeds to kill the Beast, destroy the fortress, and wipe out the Slayers with the magical love flames.
*deep breath*
So what was the point? The point was that OWKD, experienced savant and mystery man, totally misled Colwyn into an unneeded super journey by telling him that the Glaive was needed to kill the Beast, when in fact all he needed was his magical wedding love flame.
I experienced a much less epic version of this recently when working on a client's site. (Ok, by less epic I mean that I had no troops following me, no magic weapon, no cyclops friends, and a distinct lack of enemy fortresses, so the comparison may be a bit strained.) In particular, the client has a list of files on various pages on the site, and the list was to be decorated by icons depicting the file types used. This feature was requested late in the stage of the project, so the code responsible for generating the list didn't provide any classes on the anchor tags based on the type of files linked to.
Ever since I attended a workshop at WDN08 by Andy Clarke I've been drooling more and more over CSS3 attribute selectors, and thought this would be the perfect solution.
Attribute selectors are conditional modifiers that can be added to CSS selectors to make them apply to an element that matches certain values in certain attributes. The notations vary depending on the type of attribute selector being used, but they range from e[attribute] (which matches an element e with the attribute listed in it) to the more commonly used e[attribute="value"] (which matches e only if it's attribute has the value contained in it) to the awesome CSS3 attribute selectors like e[attribute*="value"] (which will match e if the value appears anywhere within the attribute).
In the case of this particular project, I needed a different icon for all items linking to .PDF files versus an icon for any other file type. So the obvious solution was to insert selectors to the effect of a[href$=".PDF"] for the pdf files (it matches any anchors that have an href that end in .PDF] that would override the icon style for the generic a. My glee came grinding to a halt when I encountered the following in the SitePoint CSS Reference that I was using as a source: "Internet Explorer 7
doesn’t support the partial matching of attribute values." with a little visual graph indicating that no version of IE supported CSS3 attribute selectors yet.
Curses! Once again, the evil, scaled beast that is Internet Explorer (also known as Darimikanius the Devourer) has reared its head and sent good design standards running.
So bemoaning the unfairness of it all, I spent an hour polishing my rusty JavaScript skills and plugged a script into the site that would add a class to the anchors if their href attributes linked to a pdf file.
Was it as hideous as fighting Slayers in a swamp next to a cyclops? No. But time equals money, and as it turned out, my mentor was as incorrect as OWKD was to Colwyn.
You see, after I'd finished up that project, I started working on a generic JavaScript that would provide CSS3 attribute selector support for IE7, thereby allowing me to use those selectors in future projects. Partway through the coding process, I put together a test page that I'd hang the script on to test it, and loaded it up in my browsers prior to adding the script to make sure everything was looking proper.
To my shock and horror (or relieved surprise, I'm not sure which) IE7 was rendering the selectors all on it's own.
SitePoint had lied to me!
Well, perhaps it merely made a mistake. But after getting over the sheer waste of time I'd spent on the project, I found it funny how accustomed we are as web developers to IE's standards-compliance issues that we're willing to accept that it doesn't support a feature without first testing it ourselves.
Consider my lesson learned.
To prove I'm not insane, check out the following test page in IE. Like all the other browsers, it's properly using all the attribute selectors, including the CSS3 ones. So I could have saved the client an hour instead of inventing an unneeded script.
There is a catch (as always). IE6 doesn't support any attribute selectors at all, including the CSS2 ones. Don't take my word for it, load up that test page in IE6. This is unfortunate, but it isn't precisely a disaster. I personally think that it's ok to have a different appearance for your page in IE6, as getting a site identical on all browsers is a holy grail that'll never be acquired. But if the need arises for as similar an experience is possible, it turns out that someone has done all the hard work of making IE6 work properly. I'm speaking, of course, of Dean Edwards. His IE7 script has undergone a lot of upgrades recently, but it still does all the wonderful things it's done in the past. I've added the script into a second test page, which if you view in IE6 will render properly.
So save yourself some grief and check how a style works before taking IE's poor performance for granted.
Oh, and someone get SitePoint to update their CSS3 attribute selectors page.