Why degradation is wrong
Posted on 30th Mar 2010 in Random Thoughts
It should be banned
Degradation :
noun 1 the condition or process of degrading or being degraded. 2 Geology the wearing down of rock by disintegration.
Source @link Ask Oxford
After yet another entertaining and passionate argument about javascript reliance and degradation, I've come to realise that the whole degradation argument is wrong. There should be no degradation. That's right, you should never have to degrade your javascript functionality ever.
Before y'all think I've been sampling some of the finer drugs available, let me explain myself. I don't mean that you can now run off gibbering with joy, clutching your well thumbed copy of "Javascript For Dummies" with tears streaming down your face whilst your mind whirls with manic glee dreaming up all the new gizzmos you can code. What I mean is, it should work without javascript first, and then you can enhance it with javascript.
But that's degradation?
It's not, and that's where those of us that espouse the degradation argument have been going wrong. We know that what we mean is "your functionality should not rely on javascript, it should be enhanced with it", but what we actually say is "code your javascript functionality and then degrade it so it works without js as well". It's a minor difference, but the latter suggests that the non-javascript version should be done second. It shouldn't. It should either be done first or both should be done at the same time, and believe me when I say it's usually easier to get the functionality working first and then work on the js. Debugging ajax calls is a pain in the arse if your functionality has server errors ;)
Enhance your web with javascript
Enhance :
verb increase the quality, value, or extent of.
— DERIVATIVES enhancement noun enhancer noun.
Source @link Ask Oxford
That's the message we should be trying to get across. We need to get people past this mental block that the only way to solve a problem is with javascript, and that only after the javascript is coded should they think about degrading it. The biggest argument you get from the other side is "most of the web runs javascript and those that don't can either enable it or suffer". The fact is 100% of the web can browse without javascript and of those that have no javascript the ones who have it disabled by choice are the minority. The majority of the js "functionality" that you see on the web can be replicated with simple html and server calls, you could even run a live chat with just that, although I wouldn't like to own the server it was installed on ;)
Twitter needs programmers
The most pointless example of javascript reliance I've come across so far is Twitter, you actually need to enable javascript to tweet just so they can run client side validation. Don't get me wrong, they run some form of server side validation, they totally fail by not providing error messages, but at least they do validate the input I suppose.
HTML ( twitter.com ) :
<div id="status_update_box"> | |
<form action="http://twitter.com/status/update" class="status-update-form" id="status_update_form" method="post"> | |
<div style="margin:0;padding:0"><input name="authenticity_token" type="hidden" value="xxxxxxx" /></div> | |
| |
<!−− snip −−> | |
| |
<div class="info"> | |
<textarea cols="40" rows="2" id="status" name="status" accesskey="u" autocomplete="off" tabindex="1"></textarea> | |
<div id="tweeting_controls"> | |
<a href="#" tabindex="2" id="tweeting_button" class="a-btn a-btn-m"><span>Tweet</span></a> | |
</div> |
Javascript ( twitter.js ) :
var A=O.find("#tweeting_button, #update-submit"); | |
var B=O.find("label.doing"); | |
var J=O.find(".char-counter"); | |
var F=/^\s*@(\w+)\W+/; | |
var D=/^\s*[dD][mM]?\s+(?:(\w+)\W+)?/; | |
var I=O.find(".places-nearby"); | |
var E; | |
var N=false; | |
function M(){ | |
var P=H.val(); | |
if(twttr.isReplyOnlyTweet(P)) | |
{ | |
location.href=RegExp.$1; | |
return false | |
} | |
if(P.length>140) | |
{ | |
alert(_("That tweet is over 140 characters!")); | |
return false | |
}else{ | |
if(P.replace(/s\*/g,"")=="") | |
{ | |
return false | |
}else{ | |
A.addClass("btn-disabled").attr("disabled",true); | |
return true | |
} | |
} | |
} | |
| |
A.bind("click",function(Q){ | |
var P=$(this); | |
Q.preventDefault(); | |
if(!P.hasClass("btn-disabled")) | |
{ | |
P.closest("form").submit() | |
} | |
}); |
Just add a submit button
If you read line 10 of the html file you'll see that the cool lil "tweet" button is actually an anchor tag with no destination, instead it triggers off the js validation snippet above. The end result, if you pass validation, is to submit the form. This means that even if you have js enabled you still get a full server post-back where your input is validated again.
Imagine how many more users twitter could gain if they just added a working submit button.
So javascript should die?
I hope not, I happen to like javascript and use it fairly extensively to enhance some of my webs, but it certainly shouldn't be the be all and end all of your web. As far as I can I make sure all my functionality is available if you have javascript disabled, I even go as far as to try and make it look as close to the enhanced version as possible, and then I make that functionality rock with javascript. I actually find it easier and quicker to work that way.
3 comments
- xfox @link http://www.htmlforums.com/index.php?
-
Hey,
Great post, and I definitely agree with everything.
Would you care to elaborate on using html and server calls to substitute for JS? Is it possible to get visual effects that are done with JS to work even when users have JS disabled on their browsers?
Thank you. - yabs
-
The majority of js that you see on the web is completely pointless ... see the twitter example, they require js to (validate and then) submit the form and yet (as you should) they also validate the data server side, via a normal <form> submit ( ie/ no ajax that could save the odd char or two ), seriously pointless ;)
What visual effects do use js for? ... unless you mean "fade in" "fade out" kind of effects. In which case you can't, that's the "enhance"ment bit, but your page should fail open and you should (always) validate serverside as well.
¥ - xfox @link http://www.htmlforums.com/index.php?
-
Yep, I validate server-side with php.
But I was talking about fade in/fade out/sliding effects yea. It's a shame you can't do anything about it. Good to know, thank you.