A constant debate is always “why support IE6? It’s expensive, it’s annoying.”

Now, I’m not disagreeing with that. I don’t like IE6. It’s old. It’s broken. I’d prefer it went away. Unfortunately, IE6 represents over 30% of all IE traffic (which represents roughly 64% of all internet browsers).

It’s not representative of my site.

If you pay attention to your browser metrics, you can see that IE6 is not representative of your site. At all. You can see this as a green light to ignore IE6 (particularly if it’s an intranet or members-only site, as you can dictate browser requirements as a “bare-minimum”). If you’re a blog, I’m all for ignoring IE6. I encourage more sites to do it.

Now there is one slight flaw with that argument. What if your site gets dugg? Slashdotted? Attached to a virus and spread? Date Is ay it – maybe an article you write goes viral?

Some Microsoft This Way Comes

Outside of a sudden surge in popularity, the other *very realistic* look is e-commerce sites. I don’t care who you are, a dollar is a dollar, and as such your e-commerce site better accommodate every visitor. No flash reliance, no JavaScript reliance. Period. I don’t care about it looking the same, but I better be able to make a purchase via Lynx. More importantly, any handicap should be accounted for (blind is the most often thought of). This is what we call Web Accessibility. All angles should be covered, within reason. And IE6, regardless of your metrics, is within reason.

AlphaImageLoader – Ye Olde Standard

I think anyone who is “in the biz” knows about AlphaImageLoader. We’ve all done the CSS replacement. I helped adjust and edit a MooTools Class that utilized it to account for all sorts of PNG situations. It was our “standard” because it was able to account for IE6 with a minimal amount of effort. Except…
AlphaImageLoader does not support background-repeat, or background-position. It requires set heights and widths. It requires one-off styling for images that are cropped. Plain and simple, it still sucked.

VML – The New Contender

I stumbled on a VML solution after researching a site to see how they were handling PNGs. It turns out they were utilizing DD_belatedPNG. I dug into VML vs. AlphaImageLoader and came across this article explaining the same thing – AlphaImageLoader or VML.

The obvious is pointed out: AlphaImageLoader eats memory. VML adds bad markup to a page. IE6 does *not* cache the image (according to the article, at least).

So, we’re stuck with a memory hog or a lot of image requests against a server, which can add to a lot of bandwidth costs if your traffic spikes (it happens).

Will The Real Slim Code Please Stand Up?

After reviewing DD_belatedPNG a second time, he claims to “mostly” have fixed the caching issue. To be honest, with as much grief I’ve had from AlphaImageLoader and changes in creative layouts that require PNG transparency, it seems like a real replacement for AlphaImageLoader, loaded using JavaScript and conditional comments so ONLY IE6 takes the hit.

The downfalls? No opacity on the VML. I haven’t looked into creating a container to wrap the VML and fading that, but call me crazy, it may not work. This means we may have to keep AlphaImageLoader around for a little while longer. I’m not sold that either solution will replace the other, but they both are going to be invaluable until IE6 goes the way of the dinosaur.

Performance Concerns? Not with VML.

Thank God someone else ran the numbers. Tests have been ran, and also Yahoo! provided some additional numbers to help showcase that VML is not the memory hog AlphaImageLoader is. Bonus!

There is the argument that a PNG 8-bit image is a better solution. No CSS hackery, no JavaScript intervention. However, it requires whomever the developer is, and also whomever the designer is cutting up your graphics to be familiar with proper image optimization techniques to insure an efficient, optimized experience.

The REAL Solution
The priority of the solutions seems evident. PNG 8-bits for most cases. VML through most others. AlphaImageLoader only as absolutely necessary. I do believe that a JavaScript solution is the best solution for IE6 AFTER 8-bit PNG images (ran through a PNG optimizer (like PNGCrush).

Unfortunately, such optimal solutions require trained developers and trained designers. Who has time for that? You should make time to insure success.

Enjoy.

Holy hell, has it been a year all ready?

That’s right – Plaid, the folks behind Brandflakes for Breakfast, are starting Plaid Nation in a mere ten days!

What is Plaid Nation?

Why, an excellent question to ask – Plaid Nation is a “rolling celebration of creativity and a demonstration of social media in action.”

Or – social media in motion. We’re talking live streaming video, interviews with some of the Internet 1337 –

In their venture, they managed to interview Robert Scoble, Cathy Brooks from Seesmic and Biz Stone (of his many involvements – Twitter being the one you probably know).

Awesome People, Awesome Concept, Awesome Execution.

Cool schwag for Plaid Nation!

As last year I caught wind after the fact, this year they won’t be too far from home base – they’re hitting Chicago on July 22, and Indianapolis on July 23 – I’m debating making the road trip to catch the ride from Columbus (why aren’t they coming here?)

If you haven’t gotten your fill of Plaid yet – they’ve got some new digital freebies up for this year, complete with theme song :) and a twitter stream to help the normals check in on the fun. So Darryl, you may be getting an email from me if I can pry myself away from work for a day or two and make my own road trip (without a live stream of the trip, but I can tweet away) to see how much of the Plaid fever I can catch.

I’ve been on twitter since sometime in 2008 (I assume, this is as far back as twitter is showing me).

In that time, I’ve added a ton of followers, and constantly sorting through the requests I’ve received. I don’t follow everyone. Particularly “Gurus” with thousands of following/followers. I don’t follow people who primarily use Twitterfeed so it’s just a stream of RSS posts. I don’t follow spammers (naturally) or people that do nothing except hock their site, their product(s) or their friend(s) similar products, and I especially do not follow self-claimed gurus, be it social media, seo, sem, etc.

The people I follow on twitter fall into a few categories:

• I know them personally.
• I know them professionally.
• They are an understood expert in their field(s) like:
  • Web Development (Particularly Javascript Framework Developers)
  • SEO
  • SEM
  • Analytics
  • Social Media

Particular niches I subscribe to, and I have developed a small list of experts that I’d trust what they say (and occasionally toss questions to them). I consider this list to be “obvious” experts – they’ve proven themselves professionally, or have written at length in blogs about the topic.

My Obvious SEO Experts on Twitter

1. Matt Cutts (from Google)
2. Rand Fishkin (from SEO Moz)
3. Aaron Wall (from SEOBook)
4. SearchEngineLand (from itself)
5. Jennifer Laycock (from Search Engine Guide)
6. Mark Scholl (from EnginePoint Marketing)

I’ve limited the list to six – because I feel they cover a breadth of knowledge that you could gain, mainly from their blog postings – sometimes, 140 characters isn’t enough (some times it is).

I’ll work out additional “Obvious Twitter People to follow” in the future.

When you start developing in any JavaScript framework, you’re stuck wondering where to begin. Everyone’s got a tutorial, and an opinion, but when you’ve got “an idea” and just need to delve into the code to make it happen (say… porting functions? Figuring out the basics?) then sometimes wandering through the API isn’t the best thing you could do.

Suggested Dojo Reading

Sitepen has provided a nice primer on the basic functionality most people start off with in their library investigations, but where to go from here?

Is like a more detailed view into the Dojo API. I’d start here if I wanted to peruse the API in a more logical way then in their API docs.

I suggest reading the Dojo Basics from Dojo Campus to get in deep with querying elements and Dojo Quickstart Events to figure out attaching events.

Understanding Dojo Toolkit

The more I use Dojo, the more I see correlations with Java – and that’s not a good thing. In Java, you have JavaDocs telling you about the thousands of Java functions, parameters, returns you can have. VERY powerful. VERY difficult to learn. Most of the JavaScript frameworks took a different approach – they made what they did powerful, but kept it simple. Easy to read, easy to peruse – like the PHP docs (in my opinion). the function names and organization make total sense.

In Dojo, it doesn’t feel as quite intuitive – for me – and that’s it’s biggest downfall. It has a high barrier of entry, and a large, robust, sophisticated toolkit that you aren’t really expected to know every inch of (like Java), but understand the basics and have an API to refer to when you want to do the more powerful functionality.

Unfortunately, Dojo still feels like it’s in the infancy of this aspect, as navigating to the more complex aspects is a pain. Should my Dojo work increase in the near future, I may invest in a book to try and become more acquainted with the more difficult aspects.

Accessibility in the Framework

I’m seeing inklings in their code with reference to WAI, but I haven’t even *attempted* to fool with that in any accessibility sense. As my current projects haven’t adequately been in need of WAI guidelines, I’d love to see a more thorough analysis.

I am a MooTools JavaScript developer. I love the framework, and in writing MooTools code, I’ve become a better Object-Oriented-Programmer, and a better JavaScript developer. If you follow technology, you know there’s multiple JavaScript frameworks – jQuery being the most popular (IMO), with Dojo Toolkit being the most used in enterprise applications.

After having used JavaScript libraries (originally prototype/scriptaculous, some Moo.FX, then jQuery, then MooTools, and currently a project using Dojo) you come to expect a certain amount of consistency in general concepts, and in that expectation, the libraries have delivered.

$, $$, dojo.query, dojo.byId, document.getElementById – give me my element nodes!

So, basic JavaScript, people have developed a few different ways to get the elements they want, including custom functions – like Robert Nyman’s getElementsByClassname – which take advantage of local browser support, but you’re still forced to account for those without it. *cough*IE*cough*

MooTools uses the $ or $$:
[code lang="javascript"]
var idEx = $('someId'); //get element by ID
var arrayEx1 = $(document.body).getElement('someElement'); // return first matching 'someElement
inside of 'someContainer', or document.body in this example
var arrayEx1 = $(document.body).getElements('someElement'); // return array of 'someElement' (or class name, if you have the right components downloaded) that are contained inside of 'some container', or in our example, document.body.
var arrayEx2 = $$('someElement'); // return array of all found 'someElement'
[/code]

Pretty powerful stuff, for so basic an idea.

jQuery is kind of similar:
[code lang="javascript"]
var someArray = $('someElement'); // return an array of those elements/that ID/etc.
[/code]
Very powerful for a single selector – but it has the added bonus that they’ve allowed it to be overwritten, so you can use jQuery with another library (say, MooTools) that also uses the $ selector. It took me a little bit to get used to the return of an array outside of a single element.

Dojo does things a little differently
[code lang="javascript"]
var someArray = dojo.query('someElement'); // return an array of elements
[/code]

The get(’selector’).get(’selector’) (like mootools $(some).getElements(’someElse’)) can be pulled off in dojo/jQuery, but perhaps not as intuitive, in my opinion (again, I’m biased as a long-time MooTools fan/developer).

Which is better?

I can’t say which JavaScript library is better. Perhaps more-so, I don’t want to. It’s moot. You pick the library you’re most comfortable with, and most importantly, for your Clients – you pick the one that they’re development team can run with for the long-term.

How to choose a JavaScript Library – the condensed version

I’m a life-long student, and a professional developer – I’ve coded many languages, and I’m learning others, so it’s easy to see certain correlations that have started popping up.

MooTools… is definitely for the JavaScript Developer, and if you’re Object-Oriented as well, it’s even better.

jQuery… is for the designers out there who know some xhtml and want to get some JavaScript without dealing with the headaches it can bring. It’s go ta low barrier of entry, but I’ve thought of this Thomas Jefferson quote:

That which is Popular is not always Right, what is Right is not always popular

Don’t read too much into that. I just infer that people that say it’s “the way” have some additional education to do in general.

Dojo… is for the Java Developer crowd. As I’m delving more into Java, I see the strong similarities, and see why it’s involved in a lot of Java-based enterprise solutions – you could jump back and forth between Dojo and Java and feel pretty comfortable.

Coding Syntax, Preference, What’s Left? DOCUMENTATION!

This is the area most things suffer in – either too much or too little documentation. I’ve grown fond of MooTools docs structure. It’s easy to find what I need with it’s break down of how the functions are applied – string, array, elements… Easy!

jQuery docs are along the same lines, but I have difficultly in navigating them. I blame myself because of my long-term familiarity with MooTools, it’s become second nature, so jQuery is still slightly foreign.

Dojo docs, in my opinion, are the WORST of the docs. They’re broken down into their three main components (dojo, dijit, dojox), but beyond that it’s a guessing game to get to the API reference you want/need. I was finding myself hitting the wrong sections because the search led me there, but it was not representing what I was searching for.

I really feel their Dojo Campus is a much better doc representation than their dojo book, or their API docs. Their book is incomplete, and if you search and find references to the book, you’ll find items incomplete, moved, referencing different version of the book, to the point you’re better off not even reading it. Along with the occasional example randomly not loading, then working, then not. It was a nightmare!

The problem – perhaps the only problem – with Dojo Campus, is the search functionality. It defaults to “title search” which failed for me 99% of the time (because I needed something in the content, and was searching for the wrong titles). Even worse, the search isn’t even featured on the home page! I had to go four clicks in until I stumbled upon it for this post. (It’s accessible in two: Click on Tutorials and one of the options)

To my understanding, the Dojo Campus is going to become the “new” face of Dojo. And with their continued improvements in coding it’s becoming a stronger contender, and more importantly, more user friendly.

Examples from the frameworks

Every framework suffers from this. Outdated examples, drastic version differences that break code, or multiple version examples. MooTools and jQuery, for the most part, are pretty solid. Dojo, I hate to pick on you, but this is where you hurt the most. I googled – a lot – and the demos – official, sitepoint, others – are all over the place. Version 0.4, 0.9, 1.2.3, 1.3… and what’s worse, no one indicates what version the demo is in, so when I started looking at Sortable Tables, I find out it was made obsolete in another version. Links to non-existent pages in the dojo book… a mess!

In my own projects, it lead me to re-write a lot of items that existed in Dojo, but for a beginner with their library I ran into way too many issues to make it feasible to spend any more time playing with the code.

Overall, my impressions have not changed

MooTools is my favorite, jQuery is a recommended secondary, and Dojo is reserved as a “use it if you have to.” They pretty much throw the W3C to the wind with their coding structures – those dijits generate a mess of divs and classes as a default, to the point that I see the benefit in their examples, but in most of my scenarios, it was overkill (and my fellow devs would kill me if I ever coded something in that spaghetti menner).

It really showcases a difference between people that code for the front-end, and those that work with the front-end but primary experience is the back-end. the code makes sense to the extent in relation to Java code – but in comparing it to the majority of front-end applications, it’s a nightmare.

In PHP you have the time() function to pull the UNIX Timestamp:
[code lang="php"]
$unix_time = time();
echo $unix_time;
[/code]

We don’t have an easy-as-pie solution for JavaScript however – instead, we have this function we can use:
[code lang="javascript"]
function unix_time()
{
// tada!
return parseInt(new Date().getTime().toString().substring(0, 10));
}
[/code]

Shawn Morton may have beat me to the punch – both in writing about it – and a quick iframe demo of the Skittles idea.

The general point (in terms of Web Development) is that this is an insanely simple thing to accomplish – 15 minutes and Shawn had a working iframe demo.

I wanted to grab some of the effects and colors of the original, just to see if I could do it and “make it fancy” – I mean, there’s still a half-dozen effects that can be applied to it – fades, transitions, all those whizz-bang-pow stuff people love, but I had to pull myself back a test was important.

Skittles.com Initial Test

I decided to focus on Firefox 3 so I could use rounded corners in CSS (there’s a JS library for everyone else, sans Webkit, but hell, remember, this is a test. No one’s paying, so I’m not worried about IE.

It took me a couple hours, but here’s skittles.com, reproduced without flash.

I’m too tired to write more, so – here ya go.

You Flashed My Google

So Mark Scholl pulled up this nugget of a gem from an October post from Brian Ussery announcing their intent to start indexing flash.

I recall reading this in October, and quite a few people were excited about this – it means the old argument that “Flash isn’t SEO friendly” would boil down to “if you’re a good Flash developer, your stuff will get indexed because you wrote it properly.”

What’s interesting, is the article dives into the fact that the SWF/Flash files will carry their own rage rank – and as such, if you reuse the same SWF on more than one page, keyword thinning can occur (you’re using duplicate content).

So – it’s been a few months, I was curious just *what* was being pulled in by google in terms of flash content, and what was being shown. I used a simple google query that it seems most people have forgotten about.

Custom Google Search – FileType

search: filetype:swf site:ikeif.net

It’s that easy. Run this with some search terms and see if your site’s flash is being indexed like you hoped it would.

Of course, I felt like playing around and seeing what’s happening in the wide world of flash…

How’s my Flash being indexed?

I ran a couple searches against some sites to see how they were being indexed:

Query: filetype:swf site:nationwide.com – What’s interesting is their flash is being indexed (I’m assuming) properly. The descriptions make sense, until you hit number 8 that says “PLAY AGAIN. PLAY AGAIN. 0%”

Query: filetype:swf loading – I did this out of curiousity – much like how it’s been stated that “click here” is the worst possible wording for a link – over three million results for swf’s that say “loading!” Semi-interesting: The number one link is a flash USA Map Test.

Query: filetype:swf site:remhq.com and filetype:swf site:kanyeuniversecity.com – I figured I would have to do a couple band sites, as bands and labels were usually the number one commiters of flash atrocities. These two were high ranking when I searched for “band sites flash” (simple, yet effective). Kanye? Three links. REM? Four pages, all with some pretty good descriptions.

Query: filetype:swf site:roushhonda.com – As I recently moaned about the fact that so many car sites rely too heavilly on flash (mainly because I couldn’t hit their sites on my iPhone). All those listings in flash, none of it being indexed. I settled on Rousch from a search for “used cars columbus“.

We’ve come a long way, baby.

So – we see some areas of needed improvement. SEO for Flash is something that I feel needs to be addressed more often (by designers and developers!) and it’s something our SEO people need to keep in mind and discuss (I’m looking at you, Mark Scholl and Jennifer Laycock!). As this is slowly moving from the “I wish flash was indexed” to “Oh shit, it’s indexed, but not how I want it!” the discussions need to ramp up and we need to start thinking about it.

Find anything interesting in your own google queries? Let us know!

No doubt some people feel “basic” coding is beneath them. They feel they should be focusing on Java, JavaScript, UI Design, UX, etc. etc. Coding that PSD to valid, cross browser XHTML? Complete with CSS styling? Dealing with whatever browsers you want to support?

Funk that, especially when we have dozens of businesses fighting to do this for us (for cheap!).

Prolific competition and cheap? How can I lose!

Yes, much like that extended warranty you bought, how could you lose? Very easily!

Generally speaking, it seems you get what you pay for. But sometimes you have to realize that doing research is the best ROI. In the age of the internet, one man shops quickly get bought out by the competition, so that we can go very quickly from “my friend runs this” to “he sold it for more than it’s worth, and now it’s a shit service.” It happens, as I had dug up old reviews and contacted people – which I suggest you do. Never rely on sites and written reviews (they could be paid reviews and not disclosed, and some people will rant and rave after one use, and quickly change their mind after two uses!).

In 2006 they were hot shit! So they still are…right?

No my friend, they are not. Like I said, any time you see a review for a service, research it. Their are prolific sites that offer up reviews but I’ve noticed a lot of them allow ballot stuffing (it seems all you need is an email address to post, and those are quite easy to get). So you can see they have some heavy negative reviews followed by dozens of similar “OMG, these guys saved me, they rock so hard!”

First thing you need to realize, you are outsourcing, and more than likely this work is going overseas – and generally outsourcing is a mixed bag of issues. From the services I checked out, they claimed to be “based” in the United States, but I noticed some of their class names held Russian words, another I noticed some Norwegian – and it’s most important that as I worked with some of these companies, I “figured out” how best to work with them – regardless of who they were.

The Secret to Working with Third Party PSD to XHTML Services

It’s simple, really:

• Do not rely on their order forms to tell them everything.
• Do not make assumptions on what they will/won’t do.

You combat this by:

• Giving them requirements if it’s not on the order form!
• If they offer money back guarantees and you aren’t happy – USE THEM.

Tell them exactly what you expect – if you think certain areas should have 10 pixels of padding around them (maybe *you* think it’s common sense) but they may not!

You may have selected CSS sprites – but do you want it done a certain way? Did you want certain headings to be clickable? TELL THEM.

I guess this ultimately falls down to communication skills as it often does – overcommunication is better than too little, and it’ll save you headaches in the long run!

How to Deliver your PSDs

No doubt, sometimes you may be working under deadlines so you may spread your work out into batches – this is a dangerous approach if you think “oh we can tweak certain fundamental aspects of our designs as we send them.” Bad, bad, bad.

If you are planning batch approach, communicate this before hand so your potential partner services understands, and make sure the basics of your templates are SOLID before you send them out!

I suggest having your templates done first (so you can reuse the code and maybe not need to have every PSD sent out to be done) and make sure your sidebar and navigation areas are solid (and this is where you describe how large the click areas are). Once these areas are solid, I’d make sure all future PSDs follow these pixel perfect hand-offs to insure an easy transition with the future PSDs sent off, and it’ll also save you a lot of pain.

Have you used any services like this? Got any tips or tricks? Let us know!

As a web developer, you’re constantly approached with pulling off zany schemes. In the words of Ian Malcolm:

Yeah, but your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.

Replace “scientists” with “designers” and you see the dilemma. They know you can pull off some funky effects in flash, so they opt to flash. However, flash is still not quite as easilly accessible and searchable that we all would like – and please, you can try to argue this point, but the majority of flash efforts I’ve seen tend to bypass the accessibility and searchability because it’s just easier to do the cool animations/sounds/effects/transparencies in flash (or flex) than it is to do in javascript.

Internet Explorer be damned!

The unholy bastion of a front-end developers existence tends to fall on IE6 – which is at 24% and dropping in its market share. This is always the what I end up falling on when talking to a fellow developer, and it usually goes like this:

Me: We could totally pull off that flash effect! We can do multiple animations using mootools, and it’d be indexable and still be applicable without javascript if we code it right!

Him: You mean those large transparent PNG images that would be sliding into place?

Me: Right! We could..totally… pull it off… in everything except IE6….

Him: …

Me: …shit.

I mean, this isn’t too far from the truth, but the point is – accounting for IE6 is a bitch. I recently had to redo someone else’s code that used a PNG script I had rewrote because the alphapng filter was hitting multiple images on the page (dozens of images had a filter alpha opacity of 1). A quick audit of the code and reorganizing the javascript (ahhh… another blog post for the future, me thinks?) and suddenly IE6 was back in action, faster than ever!….not really, but it was at least usable.

So you see a lot of our ideas rely on javascript being utilized – or flash, which still will rely on javascript to be embedded – again, because of IE and other cross-browser issues – so we need to keep in mind that hankering feeling…

What if they don’t have javascript?

No doubt, some people with disabilities may still be able to use a site that utilizes javascript. It’s possible that they may have some ability to use a browser, but if they don’t turn off javascript, it may make it a more difficult browsing experience. Don’t forget, there are a plethora of mobile browsers that may/may not do javascript well, if at all.

This falls into a certain realm of uncertainty – and as I ran through a gamut of big e-tailers sites (American Eagle, Anthropologie, L.L. Bean, amongst others) L.L. Bean was the only one that I could purchase from (well, reach a point where they ask for payment).

The inherent problem of this, they rely on AJAX calls to do their server side form validation – so it’s possible that if you don’t have javascript, you could still enter bad data and find out your Christmas order is incorrect, maybe too late when they call to tell you why your credit card was declined, or that it was sent to a non-existant address.

Understandably – from a SEO perspective, they only need to index up to the product pages. If they’re smart, they don’t have any “highly relevant, high-traffic” content in their shopping cart pages or payment pages (it seems that those are generic, so it should be moot). The dilemma occurs in how they handle that percentage that is browsing without javascript. Maybe it’s a small percentage. Maybe it’s corporate users, or users from the large assortment of mobile devices. The point is – why should you neglect a sale just because they’re on webTV?

Enter the Dragon <noscript>

PPK on quirksmode wrote about the use of <noscript> and it’s use in helping point out (to the majority of browsers) that we can throw a little message stating that “hey – you need javascript.” I’ve looked at L.L. Bean’s source code, and they’re littered with <noscript>. But really, this shouldn’t be a concern as…
You shouldn’t be catering to a rich experience.

Really. You should be presenting a website that works – period. I should be able to hit it in lynx. In Safari. My iPhone. His blackberry. IE6. IE5. We shouldn’t be relying on javascript to pull off effects and basic, fundamental functionality. Javascript is an enhancement, not a requirement. If it’s required, you’ve failed.

I’m not saying I’ve got all the answers – but I do know that if we want to code in a way that no matter what crap happens in the near future, we need to focus on the basics and get them executed as cleanly, and simply as possible.

There may be a point that we finally say – okay, you’ll need javascript to get these cool “up to the minute” updates, live editing, in place context editing, etc. But that’s really at a point when you have to decide – who is this website for? Who am I catering to? Why do I care if the degraded expeience means things pop instead of fade in? More than likely, this same day will be when you say…

Shit, a fraction of a percent of people visit my site on IE6. I might want to tell them to upgrade.

“Power tends to corrupt, and absolute power corrupts absolutely. Great men are almost always bad men.”

-Lord Acton, in a letter to Bishop Mandell Creighton, 1887

I’ve noticed a disturbing trend that I myself have fallen victim to. I’m seeing sites coded where we do more in javascript for our styling needs and interaction, with no fall back support for non-javascript users. Styles are called explicity from javascript (which requires a lot of transversal to find out “is it this #000 or that #000?”). onclick events. Onblur. Really?

Use the power of your framework!

Don’t do the work if you don’t have to!

For example, mootools allows us to grab any item on the page and add events to it:

[sourcecode language='javascript']
$$(‘a’).addEvent(‘mouseenter’,function(e){
alert(‘you entered the anchor!’);
});[/sourcecode]

Why stop with one event?

(straight from the mootools documentation!)

[sourcecode language='javascript']
$(‘myElement’).addEvents({
‘mouseover’: function(){
alert(‘mouseover’);
},
‘click’: function(){
alert(‘click’);
}
});[/sourcecode]

Using mootools we can make our code totally unobtrusive. No more onclicks littering the pages. We can leave the HREF tag pointing to static pages. We can inject elements on teh fly, so if someone doesn’t have flash/javascript we don’t show certain elements:

[sourcecode language='javascript']
// don’t have flash?
if(Browser.Plugins.Flash.version !== 9) {
// hide stuff!
$$(‘.flashNeeded’).setStyle(‘display’,'none’);
// show stuff!
$$(‘.noFlashNeeded’).setStyle(‘display’,'block’);
}[/sourcecode]

But not to forget our jQuery bretheren (we’re all one big family)…

Let’s do the same in jQuery!

[sourcecode language='javascript']

// single event
$(‘a’).mouseover(function(){
alert(‘you entered the anchor!’);
});

// multiple events
$(‘a’).bind(‘focus’, function(){
alert(‘focused!’);
}).bind(‘mouseover’, function(){
alert(‘moused over!’);
});[/sourcecode]

jQuery doesn’t do Flash out of the box…

At least, I can’t dig it up – but that’s not a bad thing!

The users of jQuery (A hearty, formidable group) have created the jQuery plug-in to detect flash versions!

It’s all a matter of preference and opinion and bias as to whether it should be included with the main library or not.

The Framework Wars are dead.

We see similar abilities in all the frameworks – and instead of bickering about “being the best” we should work on contributing and learning these frameworks.

Toby Miller put it best – “One framework at a time, please!”

One framework at a time, please!

You wouldn’t hand-over JSP code to a PHP client, would you?

I really hate stumbling on sites that think just because there is a “no conflict” version we should just jam as many frameworks together that we can. That, to me, defines a lazy developer. I fight that battle – instead of being lazy and saying “I know this one better, so let’s turn no-conflict on” we should instead be saying “the client uses library X so we should develop accordingly – even if that means learning a new code!

EDIT: I’ve sicne tweaked my htaccess file, added below (but left the old one inline, commented out in the example)
EDIT: So I talked to Toby Miller and he helped clarify some issues I was having – the script has been updated below!

So I’ve been discussing compression – I’m a fiend for it. It’s like a drug to me. I squeeze every byte out of production code.

I’d compress HTML into a single line – I’m just that phucked up. Maybe it’s my OCD, maybe I’m just nutty, but GZIPping seems like a no brainer to me.

1-2-3 COMPRESS!

What’s GZIP? I’m glad you asked, friend!

According to the never-wrong wikipedia article on GZIP:

gzip is a software application used for file compression. gzip is short for GNU zip; the program is a free software replacement for the compress program used in early Unix systems, intended for use by the GNU Project.

What this basically does is compress your files and let the client unzip them. We’re talking about massive decreases in bandwidth, so that 200k website suddenly shrinks down.

No More Optimizing, YAY!

NO NO NO! I’m sorry friend, but GZIP is not an excuse to get lazy. You can use GZIP on Javascript Frameworks so that compressed 60k core file can become a 15k file. Wow.

Just take that in.

75% reduction of an already compressed file! That’s awesome. 101k html text file can be compressed to 15k. Frickin’ badass.

So naturally, why wouldn’t I want to enable this on my Dreamhost sites?

The GZIP Code

Please note: As I’m using Apache2, we’re calling mod_deflate instead of mod_gzip.

I’ve added this to my .htaccess files:

# BEGIN GZIP
# OLD GZIP CODE
# 
# AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
# 
# NEW GZIP CODE

	AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
	
		# Netscape 4.x has some problems...
		BrowserMatch ^Mozilla/4 gzip-only-text/html
		# Netscape 4.06-4.08 have some more problems
		BrowserMatch ^Mozilla/4\.0[678] no-gzip
		# MSIE masquerades as Netscape, but it is fine
		BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
		# Don't compress images
		SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
	
	
		# Make sure proxies don't deliver the wrong content
		Header append Vary User-Agent env=!dont-vary
	

# END GZIP

Danger, Will Robinson!

Naturally, their are a few caveats from GZIP, as better explained by BetterExplained.com (heh):

• Older browsers: Yes, Virginia, no doubt you may be asked to support crappy browsers. We’re talking old-school-extreme, like Netscape 1.0 on Windows 95. Apache mod_deflate has some rules to avoid compression for older browsers.
• Already-compressed content: As BetterExplained.com details, you probably only need to compress the “big 3″ (HTML, CSS and Javascript) as images/flash/etc are usually already compressed. Usually.
• CPU-load: Compressing content on-the-fly uses CPU time and saves bandwidth. Usually this is a great tradeoff given the speed of compression. There are ways to pre-compress static content and send over the compressed versions. This requires more configuration; even if it’s not possible, compressing output may still be a net win. Using CPU cycles for a faster user experience is well worth it, given the short attention spans on the web.

So enjoy the benefits friends, pass on the glory of GZIP!

As both David Walsh and I wrote about Google Analytics Tracking utilizing Mootools to make your outbound link tracking easier, and David did setup a variable for the Google Tracking code *before* we run the code to tag our outbound links.

Upon second review, it’s a little different than the modified code I presented yesterday, but I dig using the href replacement on your outgoing string.

Here’s the updated code:
[sourcecode language='javascript']
window.addEvent(‘load’,function(){
// Double-checking in case your drop this site wide
// Do anchors exist on the page?
if ($$(‘a’)){
$$(‘a’).each(function(anchor){
var href = anchor.get(‘href’);
// if it matches my site or is an absolute path it’s outgoing
if(href.indexOf(‘http://ikeif.net’) == -1 && href.indexOf(‘/’) !== 0) {
anchor.addEvent(‘click’, function(e){
var track = “pageTracker._trackPageview(‘/outgoing/’” + href.replace(‘http://’,”);
}
}
});
}
});
[/sourcecode]

This seems to be something that people always want to do at some point – are people clicking on my outbound links?

How Google recommends external tracking

They currently recommend you tag your links like:

<a href="http://www.example.com" onClick="javascript: pageTracker._trackPageview("/G1/example.com");">

Just as a point of reference – the /G1/example.com is purely symbolic – you can use the artificial pagename as the Goal URL in your analytics, as google shows:

/G1/example_com

or

http://mysite.com/G1/example_com

Kind of tedious, wouldn’t you say? Do you really want to run through your site and specifically tag each link that goes somewhere else? I’ve seen functions attached that basically duplicate this functionality – but if you’re moving the “onclick” into a function, it seems pretty much a moot effort.

So, boom goes the dynamite, and in comes javascript.

Add outbound tracking javascript

This code from Jamie Huskisson accomplishes it simply:
[sourcecode language='javascript']
if (document.getElementsByTagName){
var ahrefs = document.getElementsByTagName(‘a’);
for(var i=0;i if(ahrefs[i].href.indexOf('http://ikeif.net') == -1 && !ahrefs[i].onclick){
ahrefs[i].onclick = function(){
var track = this.href + "pageTracker._trackPageview('/outgoing/'"+track.substring(7));
}
}
}
}
[/sourcecode]
Nice and succint, as code should be. In this example, it checks to see if we can grab tags - grabs all anchors, and then we check to see if they reference my site and there is no onclick event, and if so - assign the onclick! Technically, you don't necessarilly need the track.substring(7) - you can call it something else if you like.

Do the same – but with MooTools!
As I’m sure you’ve figured it out, I’m a fan of mootools – one of the many well done javascript frameworks. The above code is just as easilly executed:
[sourcecode language='javascript']
window.addEvent(‘domready’,function(){
if ($$(‘a’)){
$$(‘a’).each(function(anchor){
var href = anchor.get(‘href’);
if(href.indexOf(‘http://ikeif.net’) == -1 && href.indexOf(‘/’) !== 0) {
anchor.addEvent(‘click’, function(e){
var track = this.href +”pageTracker._trackPageview(‘/outgoing/’” + track.substring(7);
}
}
});
}
});
[/sourcecode]
[Edit: It just so happens that David Walsh hit the same topic!]

---

Copyright © 2010 The Digital Life of Keith Baker.. This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact legal@ikeif.net so we can take legal action immediately.
Plugin by Taragana]]> http://ikeif.net/2008/10/14/mootools-google-analytics-track-outbound-links/feed/ 0 http://ikeif.net/2008/09/13/freedom-speech-terrorism-youtube/ http://ikeif.net/2008/09/13/freedom-speech-terrorism-youtube/#comments Sat, 13 Sep 2008 07:30:25 +0000 keif http://ikeif.net/?p=261

So Mark @ Mashable wrote about YouTube updating their community guidelines against Hate speech.

He points out the obvious – people on the internet are retarded and this change means they are censoring us all, and we are fucked because all censorship is evil, and they have won because they can’t say their evil words online.

Freedom of speech is absolute.

If we can’t beat them without silencing their message, we obviously
aren’t being convincing enough to those they are converting. Fight them
with our own free speech and expression.

Overall – it’s a good read. YouTube doing a political nod (gee, just like Google did for China, and then did with Law Enforcement Agencies).

My only real issue with the article is the wrap-up:

We Need to be Smart About This
As Uncle Ben used to say, with great power comes great responsibility… If we want to keep it safe from the grubby paws of governmental intervention, companies like Google must implement and enforce standards
of policing the community.  Otherwise, the government will do that for
us, and I think I speak for all of us when I say we do not want that.

Google isn’t the little shop down the street. They’re a huge-ass corporation. If MSN was doing this people would be calling for Bill Gates head. If Steve Jobs did it, people would make shiny new logos promoting how innovative and forward thinking he’s being.

Instead, YouTube (which was purchased by Google) is taking it into their own hands. This shows the error of their “Do No Evil” slogan – nothing is really black and white. They can do something that a lot of people can consider evil – collecting user data, censoring hate speech, censoring anti-hate speech.

I do not welcome our new Internet Overlords.

Benjamin Franklin once said,

They who can give up essential liberty to obtain a little temporary safety, deserve neither liberty nor safety.

We continue to do so, and turn a blind eye to it. We say it’s for the best. It’s better this way. Think of the children. To me, this just shows how freaking worthless our rights are becoming. Services talk about how they’re for everything, but what’s going to happen in the future? For a citizen to express their discontentment, they’ll have to make a video, encrypt it, send it to a friend over seas to upload it to a “video sharing site” hosted on a derilect oil tanker in international waters that’s under siege by the U.S. Government for posting a video of someone saying “The Bill of Rights is an illusion.”

So what – how did I get all of this off a little YouTube censorship? Because Google was supposed to be that Little Big company. They’re supposed to be those guys that got big being good, making Microsoft look foolish for ever putting DRM on your computer. Instead they’re slowly transforming into “will this be good for the company?” type double-speak they can throw around in marketing and PR to make themselves look good.

How long until Google starts telling you what to write on your blog? “You said not nice things about Google, so we’re giving you a PR of 1, unless you delete those articles. By the way, we bought the rights to your domain, so when it expires, it’s ours unless you comply.”

Those who have the power, make the rules. Those that get the information can make their power. I know, I know, a bit paranoidal-freakish, but hey, political season stupidity always riles me up.

---

Copyright © 2010 The Digital Life of Keith Baker.. This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact legal@ikeif.net so we can take legal action immediately.
Plugin by Taragana]]> http://ikeif.net/2008/09/13/freedom-speech-terrorism-youtube/feed/ 2