Unobtrusive JS
keep your stuff seperated from your other stuff
Wednesday, December 17th, 2008
Category: Accessibility
, Ajax, RichTextWidget, Unobtrusive JS, Yahoo!
I am proud to be able to announce the new currency converter on Yahoo finance. Why? Because it is a perfect example of how a complex rich user interface can be built in an accessible manner. As the main developer, Dirk Ginader explains: About 9 months ago my fellow co-worker, the User Experience Designer Graham Read the rest…
Tuesday, November 4th, 2008
Category: JavaScript, Testing, Unobtrusive JS
By now, most developers have (or should have) come to realize how important it is to build unobtrusive JavaScript code. Apart from ensuring a better user experience, today’s tools and libraries make it extremely easier to embrace this practice. Continuing down the path of providing developers good tools, Robert Nyman of DOMAssistant fame has updated Read the rest…
Wednesday, May 7th, 2008
Category: JavaScript, Tutorial, Unobtrusive JS, Usability
I’ve been talking about progressive enhancement here before and got a lot of flak in comments about it. It seemed that there was a general misunderstanding of progressive enhancement and unobtrusive scripting as a “passing fad” or “backward facing rather than being innovative”. I was asked by a design agency in London to go there Read the rest…
Wednesday, April 23rd, 2008
Category: Dojo, HTML, Standards, Unobtrusive JS
Simon Willison pointed out the part of the HTML 5 spec that discusses a way to add attributes to HTML elements for your own needs via data-. For example, a spaceship for a game: < View plain text > HTML <div class="spaceship" data-id="92432" data-weapons="laser 2" data-shields="50%" data-x="30" data-y="10" data-z="90"> <button class="fire" Read the rest…
Monday, April 14th, 2008
Category: Browsers, JavaScript, Standards, Unobtrusive JS, Usability
Over at Quirksmode.org, Peter-Paul Koch is researching if Event Delegation which works splendidly with click events is also possible for blur and focus. Event Delegation means that you piggy-back on the behaviour of browsers to report events on child nodes up the tree to their parents. Instead of applying event handlers to each element you Read the rest…
Wednesday, February 13th, 2008
Category: Accessibility, Examples, JavaScript, Security, Unobtrusive JS
I’ve just come across a solution for badges on web sites that makes it terribly easy for implementers. The idea is that the implementer could add a badge wherever they want in an HTML document, choose the look and feel and add a message to be shown. The implementation code is the following: < View Read the rest…
Tuesday, February 5th, 2008
Category: Canvas, Unobtrusive JS
I love it when a plan comes together (removes cigar): After I played with Google charts and porting the idea of generating charts from accessible table data over to YUI charts Stoyan Stevanof had to use the same idea to generate his own, home-made Canvas-driven charts: His solution shows in a few lines not only Read the rest…
Monday, January 28th, 2008
Category: Examples, HTML, JavaScript, jQuery, Unobtrusive JS
One of my main annoyances with writing code tutorials is that you need to maintain code in several locations: the code itself and the examples in the tutorial document. This is not really a problem when you can use a scripting language or print out the tutorials from a CMS, but when you just want Read the rest…
Thursday, November 15th, 2007
Category: Accessibility, JavaScript, Unobtrusive JS
From what I’ve seen, it appears that many developers, especially those new to the JS space are somewhat confused by the reasons for developing JS in an unobtrusive fashion. Typical arguments that I’ve heard are: It takes too long to develop If they don’t have JavasScript, then they’re out of luck We shouldn’t have to Read the rest…
Friday, May 18th, 2007
Category: JavaScript, Library, Unobtrusive JS
Gabriel Handford has created a behavior.js script that allows you to unobtrusively automate Event.observe’tion. Magic is in naming conventions, so that: < View plain text > HTML <a class="bvr-observe-click-xhrTheFunction" href="/the/href">The link</a> takes care of: < View plain text > javascript Event.observe(theLinkElement, "click", function(event) { xhrTheFunction(event) });
Wednesday, May 16th, 2007
Category: Flash, UI, Unobtrusive JS
OpensIFRr is a new tool that enables you to create sIFR flash files that represent fonts that you need. Ben and I demonstrated sIFR at JavaOne last week. We took the typography of ajaxian.com and spruced it up in an unobtrusive way. Here is a simple hello world recap of how to use sIFR: < Read the rest…
Friday, April 20th, 2007
Category: Examples, JavaScript, Unobtrusive JS
Over on my personal blog I discussed Unobtrusive JavaScript, Microformats, and the Google AJAX Feed API. The posting discusses an example that creates a Feed Billboard using the Google AJAX Feed API released the other day. Here is the outcome: The fun part was creating a microformat that would degrade nicely: < View plain text Read the rest…
Thursday, April 19th, 2007
Category: Canvas, UI, Unobtrusive JS
Christian Effenberger was inspired by the reflection code and decided to implement Corner.js. The library uses unobtrusive JavaScript and microformats to allow users to simply add class names to an img tag to render them with corner effects, all via Canvas. If you wanted to add a shaded corner you would say: < View plain Read the rest…
Tuesday, April 3rd, 2007
Category: CSS, JavaScript, Library, Unobtrusive JS
Dan Yoder has created the Cruiser Behaviors Library, extensible stylesheets for decorating DOM elements with interfaces and event handlers. Cruiser uses Prototype, and is inspired by the Behaviour library itself. A simple example shows the library in action. A new behaviour of “strike out a link with the special class of ‘demo’” is added to Read the rest…
Friday, March 16th, 2007
Category: JavaScript, Library, Prototype, Showcase, Unobtrusive JS
Ryan Johnson has created unobtrusive JavaScript tabs called Control Tabs. The project uses Prototype / Scriptaculous. You create the tabs using standard anchors and named elements, so it’s completely accessible to non JS browsers. Example < View plain text > HTML <script> Event.observe(window,’load’,function(){ $$(‘.tabs’).each(function(tabs){ Read the rest…
Friday, February 16th, 2007
Category: Accessibility, Unobtrusive JS
Ara Pehlivanian talked about the graceful degradation myth awhile back, and since then has come up with a simple solution to his problem. The key is setting CSS styles aimed at JS enabled browsers that overwrite the initial state in the document that does the right thing for someone who isn’t coming in via a Read the rest…
