Use AJAX scripting responsibly

Some regular readers may get the impression that I dislike anything related to Ajax and other advanced scripting. I don’t. I do however dislike when JavaScript is used inappropriately and without stopping to think about whether it is actually necessary.

I know the feeling you can get when you learn or read about a new trick or technique - you just want to find a problem to apply your new favourite solution to. But a lot of the time the solution fixes a problem that doesn’t exist and only creates new, more serious problems, especially when you consider accessibility.

The key is to use scripting to add value for those who can take advantage of it without causing problems for those who, for whatever reason, cannot. I like the term “Progressive Enhancement” since it describes a mindset and a way of using technology that will help you create usable and accessible websites and web applications. Build the basics first and make sure everything (within reason) works without JavaScript, and then use event handlers to inject usability enhancing functionality.

Shaun Inman’s article Responsible Asynchronous Scripting contains more good advice for web developers who want or need to use asynchronous scripting when building a web app.

Posted on June 1, 2006 in JavaScript, Quicklinks

Comments

  1. June 1, 2006 by Scott

    I don’t know if it’s just me, but I’m having a tough time finding articles/tutorials/etc. that give actual examples of how to write responsible, unobtrusive Javascript. For me, the message has been heard loud and clear that progressive enhancement is the way to go, but I need guidance on how to do it. I have no clue how to create event handlers because most Javascript example sites feature the obtrusive inline Javascript badness.

  2. I agree. Most web tutorials try to teach JavaScript in the simplest manner possible - using inline event handlers. In order to write unobtrusive JavaScript, you need to have a better understanding of the DOM and methods of creating and appending elements. Maybe someone out there will write such a tutorial… hint hint ;)

  3. June 1, 2006 by Joe

    dustindiaz.com has some excellent examples of unobtrusive javascript uses.

  4. Accessibility should be a strive, not a standard in IMHO. The whole achitecture is not designed not intended to work this way. back in the day when they invented hypertext. I maybe kicking balls here, but it is simply impossible to build accessible all the time, for everyone, at any place and time. If one contantly thinks from out that perspective, new technologies are not able to develop and are being set back to the pure simple hypertextual nielsonian way of being on the web. And let’s face it, it is till an democracy on the web, and the mosted voted ones get the working methods we use.

    With javascript, i’m fairly easy. I mean if someone has disabled javascript, i question myself what the heck that person is doing on my site. Using netscape 1.4? It’s always a good idea to hide javascript from older browser but to completely abbandon it, seems irrelevant, and simply weird. The web 2.0 as they call it will be far more in accessible than before, more flash, more AJAX, more Ruby, for the greater good of lazy people, disregarding people with disabilities. It is sad, but mainly forced upon us in an indirect way.

    I really am interested in alternatives, but the buck stops somewhere. And most of the time it stops when a client of me says: Just build it with all the whistles and bells i want.

  5. June 2, 2006 by Mike

    Jungsonn: you only think that way because you don’t have the skills or the knowledge yet. I’d suggest you do some studying before you open your mouth.

  6. RE: Jungsonn I agree with Mike - I don’t think you have the skills or knowledge yet to understand the development aspect, or even the usability/accesibility aspect (yes, these are assumptions made by me after viewing your site/blog - so its an opinion). JS is a preference - you cant just say users are stupid for not enabling it. There are many that are security minded who prefer to have it off. Or, in a business environment, it may be turned off many times for security as well (depending on the business), maybe your at a library that has it disabled - does this make those users stupid? Its not just the ones using outdated browsers - its about a preference. You can assume users to be smart/stupid based on the technology that YOU want to use. I could say all users are stupid for not having the most recent Flash player - or for using IE - but thats the nature of this business - you have to create usable/accessible sites or else people can go elsewhere.

    Roger - excellent article. Too many people want quick fixes, and dont want to take the time to do it right or understand DOM scripting to do things unobtrusively. All examples online do seem to point to inline JS practices, but I think its more for brevitys sake than anything else.

    When applying JS - simply ask yourself, do I really NEED this here and what are the benefits/drawbacks? Like you said - many times it just ends up creating problems that were never there in the first place.

  7. I myself DO have the skills and in fact I have a strong feeling that Jungsonn has them as well. I’m all in favor of unobtrusive javascript from a coding perspective (separated (x)html, css and behavioral layer) but I really don’t agree with the statement quite some people make that everything should always work without javascript enabled. If you’re building some government information site, sure, it shouldn’t rely on any javascript. If you’re however building some new kick-ass web app, knowing less than 0,00001% of your target audience is going to try it without JS enabled I really don’t see ANY need to have it function 100% without javascript enabled. It shouldn’t break either though. I think a friendly message stating that JS is required to use the service will do just fine.

    Comparing the use of Javascript to requiring 3rd party plugins is nonsense as well. Not everyone has Flash installed but everyone using a modern browser does have javascript. Therefore the comparison doesn’t hold much water if you ask me.

    So: Using a completely separate behavioral layer: yessir! But sticking to the “everything MUST work without JS at all times, regardless of the target audience”: Nah! If it’s easy to do without jumping hoops it’s a nice bonus but if the application you’re building really wouldn’t be nice without the JS I strongly feel you’re much better off by not supporting non-JS users than by delivering them a completely crappy experience. I’d deliver the non-js people the bare essentials in order to do let them know what the site is about and give them the most important info but I’d definitely not spend ages to make every little thing work without javascript just for the sake of being one of the cool kids. It just doesn’t make much sense to me.

  8. Thats your opinion, and perfectly fine with it. I just light the other side of what i find in the world where i develop for clients. For the record: i started out developing accessible, that’s the other way around for most. So this is unfouded to suggest or imply this on me. And i’ve come to the simple basic conclusion that it hits a very hard brick wall when you develop that way, go around and look at the real big sites, ebay, yahoo, amazon, are they perfectly accessible? nope, they are not. Are they using clean excellent - bobby alert free - code? Nope they don’t. Even Jakob nielsen’s site suffers under bobby. So don’t suggest, or even try to come this close. These are the facts and the figures in real working websites, and no matter how you look into it, there will never be that accessible grail.

    But i tend to see it as a strive, and i develop that way. But to completly exorcise it, is impossible. What i where trying to day is that the whole architecture of hypertext is not accessible from the beginning.

    At least i have my own say in this, and perfectly honest with it.

  9. Jungsonn - Bobby does not (and never has) been anywhere near an accurate test for accessibility.

  10. Sadly, there are too many webapplication created just because of AJAX. Don’t create things just because you can, also think about the other aspects. It’s nice to learn more about AJAX and play around with it, but how good is an application (and your practice) when it has serious accessibility and other problems.

    Think things through before you develop something. It cost much more time (and money) when you have to deal with these things afterwards.

  11. @Scott & Thomas - You inspired my to write up a little Unobtrustive JavaScript article on my blog. I hope you find it useful.

  12. Instead of flaming people and cross blog spam post others due to only dislike my point of view. (Nate i mean here.), i would like to make clear what and why i say the things i said.

    My point of reference is clearly a semanticly and relative state of mind. I bless accessibility and also always improve my websites on that point,

    • where it is necessary

    this is key in my thinking. Global warfare of the accessibility belief is in my eyes selfcornerned and short of thought.

    To show you a good example: Many people are used to the standard “blue” hyperlinks, and the turn purple when visited. How many people do you think there are who see other “css styled links” and do not click on them because it is not blue, and not underlined? You would be scared, and you should…

    The post of Roger’s example is using AJAX. When someone uses AJAX he uses it to do mostly “special” things. Not markingup HTML with it. And those things made with AJAX can be an improvement on the site and be more accessiblelike then otherwise, because it would add a rich feature, which could improve usability. Now then, i agree very much that what Roger says, that you should be on your toes while you inplement such things like AJAX. But that would be the same as implementing Flash, Javascipt, JAVA Applets etc. There are ways to make even such objects accessible. But this is a logical thing to me, its the first thing i think about. But this is really overstating the use of it.

    So the discussion about yes/no with javascript being enabled, or disabled is irrelevant in my eyes. Ok some people got no javascript enabled, But there are also people who browse the web with “image” displaying turned off. And sure there are people who brose the web with more things turned of. With javascript it’s easy to omit this, and this is and should be standard. But to my opinion, turning javascript off, is really the same thing like having an pentium 1 with little memory, and then complaining why certain programs won’t work. But don’t get me wrong i agree that javascript should be escaped for non-javascript enabled browsers, but if it conflitcs with other parts of development i would not give it an priority.

  13. RE: Jungsonn First off - there was no flaming in the blogs. Your website is a perfect example of why I said you dont seem to have the knowledge. Literally EVERYONE one of your posts about PHP had security holes in them, yet you touted them as the silver bullet of web design. I sure hope you don’t develop clients sites with that stuff. There was no flaming, you just removed all of my posts asking legitimate questions in regards to your ‘secure’ scripts.

    Now, back to the topic at hand. I compared it to flash because it is client side as well - just as javascript is. I have had the flash player installed with previous browsers before too (just like Javascript), but I still have the option to turn it off. What if I dont want to have JS on to avoid popups or annoying advertising on websites? What if I have it off because I dont want it to be a security concern (some make this choice). You are making a very LARGE assumption that people should have it on and leave it ON - but that is not always the case. Your arguments all sound like the flash guys arguments “if they dont have flash, i dont want them at my site” - are you kidding me? Thats exactly what you are saying in your rebuttals above “turning javascript off, is reall the same thing like having a pentium 1 with little memory, and then complaining why certain programs won’t work.” So yes, it does hold water in this instance as you sound EXACTLY like the flash developers who cant see past the ‘pretty.’ (Im not against flash, its a tool, just as with everything else - including javascript).

    Choose your weapons wisely - but remember, this is the web - you dont have control over WHERE people may be accessing your website (As I stated above with a library or other building / computer besides your home). You are making way too many assumptions about how people use/browse/interact with the web.

    Part of our jobs is to educate our clients. The fact that you say you are putting ‘light to the other side after working with clients’ shows me you arent educating them on what would be in their best interest. I know alot of clients who wanted tons of animations, flash, javascript, etc - but they are the clients - and many times don’t understand everything. They, like you, think that everyone should have the same computer as you with all of the tools installed. Thats a dangerous place to be in - but unfortunately where many ‘web developers’ are.

  14. I responded to all your posts and thought about it, and removed them all. I’m not interested in your blog spam, which had more flawed thinking in it then i presented in my short articles. I just hand quick fixes which could be usefull, to me they we’re, so i’ll share them.

    To comment you here: htmlspecialchars only strips html chars like brackets, but no charcode which you can inject SQL and XSS.

    Check again my friend.

    But this isn’t the place to discuss this,

    For all other readers: im sorry to put it this way,

    Roger: sorry for this being discussed out here, i won’t comment anymore about this. It’s obvious enough for me.

  15. @Nate

    The whole ‘assumption’ thing depends on your target audience. Even after reading your post I still strongly disagree that comparing Javascript to Flash is relevant here. It’s comparing apples to pears and in my humble opinion you’re unrightfully using this comparison to ‘prove’ your point. Flash is a 3rd party plugin which people need to install separately and/or upgrade in case they have an older version. Javascript is available inside any browser used today. Definitely NOT the same thing. It’s a totally different ballpark.

    When your target audience is ‘everyone’, the site should work without JS. Period. No questions asked. However as soon as this isn’t the case it might very well be fine to decide to not have all parts of the site accessible without JS, usually in order to guarantee a proper and nice user experience. In many cases it’s better to just disable certain portions of the site with a nice message about the JS requirement than offering people a seriously watered down and crappy experience. As long as nothing breaks and the important informational parts of the site are accessible I think this is often a much better choice.

  16. @Marco But how can you guarantee that your ‘target audience’ has all of the requirements? Again - its an assumption made that if your target audience is 14-20 year olds who are computer savvy then they will always have javascript. Look at the social networking sites now. I know tons of kids on myspace and xanga, and they all have trouble getting them to work when accessing from school (granted, they arent supposed to be there on school computers), the library, or even the local coffee shop with free internet on timed computers (not even thinking in terms of handhelds, phones, or other devices connecting to the internet). Why is this? Because those organizations/institutions see it as a security risk to open everything up to others using their computers. They are protecting their computers. In the case of some, they are lucky to have windows 98 on them. But this is your target market - this is who you are hitting, yet they cant access your ‘cool’ website or tools from many of the places they may be. There were websites I couldnt use when I was in college because of the security settings.

    Thats my point, not hammering the flash/javascript as one is third party the other is installed - but the point that they are both OPTIONAL to even have turned on. Thats my point - they can be turned off by the client - not necessarily BECAUSE of your website, but maybe due to another reason. Done properly, you let the user know they need to have it on, and if possible, im sure they may turn it on. I know I would. I love AJAX with the tools I use - however, I know that the sites I develop dont really NEED ajax (yet).

    RE: Jungsonn Using REQUEST vs _POST (or even _GET)? Using _GET and then not initializing your variables? Running queries and not initializing variables? htmlspecialchars is just fine for output (use stripslashes if you like, encode the characters with htmlentityencode if you like, or - like you will find in other places, simply strip possible charcodes and THEN display or pregmatch*)? Using (int) (float) or even (bool) does not VALIDATE a string, it is type casting - converting your data to those data types. Any experienced PHP programmer just needs to look at your blog for a chuckle. And I am only mentioning a few. No comment spam - they were legit questions based on your topics (yet you deleted without response? hmm…).

    Anyway - thats my take. Marco, I like (and always have) liked your site and your blog. I appreciate what you bring the the discussion as well (even if i dont agree completely).

  17. @Nate

    Thanks for the compliment :)

    And about the issue at hand: I really do think the nice messages to tell people they really need JS to be enabled are important. Like I said, the site shouldn’t look broken in any way. Then the examples you’re mentioning: You said it yourself, many of those people are (probably) not supposed to visit your site at that particular moment (because they’re at school or at work mostly). I very well realize that it would potentially shut some people out of the site but on the other hand I’d be more dedicated to a really nice user experience than having everything excessible from all kinds of ‘wrong’ places ;) And in some occasions (for example a chat site) the experience just gets too shitty without JS.

    So in a way we agree because we’re both saying that there’s a definite need to let the user know they should really enable Javascript! :)

  18. Progressive enhancement is (should be) an obvious thing, simply as a best practice. However it’s useless when screen readers and mobile browsers interpret the JS, which is of course not appropriate for them thus rendering the app unsusable even while they’d be completely fine sans JS.

    What now? UA sniffing? (How to find JAWS or VoiceOver?) A switch to turn the JS topping off?

  19. @Thomas and Scott

    I can recommend the book Dom Scripting by Jeremy Keith

  20. June 7, 2006 by Johan

    […] DL: We are interested to hear your opinions about the recent article on responsible asynchronous scripting written by Shaun Inman. […]

    http://www.devlounge.net/interviews/cameron-adams-aka-the-man-in-blue

  21. we agree because we’re both saying that there’s a definite need to let the user know they should really enable Javascript

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.