From the category archives:

web

Are you coding obtrusively?

by keif on November 11, 2008

“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:


$$('a').addEvent('mouseenter',function(e){
alert('you entered the anchor!');
});

Why stop with one event?

(straight from the mootools documentation!)


$('myElement').addEvents({
'mouseover': function(){
alert('mouseover');
},
'click': function(){
alert('click');
}
});

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:


// don't have flash?
if(Browser.Plugins.Flash.version !== 9) {
// hide stuff!
$$('.flashNeeded').setStyle('display','none');
// show stuff!
$$('.noFlashNeeded').setStyle('display','block');
}
The same idea can be done for javascript detection - we only show certain elements if javascript is present, so we do element injection.

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

Let’s do the same in jQuery!


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

// multiple events
$('a').bind('focus', function(){
alert('focused!');
}).bind('mouseover', function(){
alert('moused over!');
});

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!

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!

{ 0 comments }

Enabling GZIP Compression on Dreamhost

by keif on October 15, 2008

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
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
# 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!

{ 0 comments }

Google Analytics Moo-ized

by keif on October 14, 2008

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:


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://','');
}
}
});
}
});

{ 1 comment }

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:


if (document.getElementsByTagName){
var ahrefs = document.getElementsByTagName('a');
for(var i=0;i<ahrefs .length;i++){
if(ahrefs[i].href.indexOf('http://ikeif.net') == -1 &amp;&amp; !ahrefs[i].onclick){
ahrefs[i].onclick = function(){
var track = this.href + "pageTracker._trackPageview('/outgoing/'"+track.substring(7));
}
}
}
}

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:


window.addEvent('domready',function(){
if ($$('a')){
$$('a').each(function(anchor){
var href = anchor.get('href');
if(href.indexOf('http://ikeif.net') == -1 &amp;&amp; href.indexOf('/') !== 0) {
anchor.addEvent('click', function(e){
var track = this.href +"pageTracker._trackPageview('/outgoing/'" + track.substring(7);
}
}
});
}
});

[Edit: It just so happens that David Walsh hit the same topic!]

{ 0 comments }

Freedom of Speech vs. Terrorism on YouTube

by keif on September 13, 2008

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.

{ 2 comments }