Unobtrusive JavaScript
Dave Verwer
   http://daveverwer.com
http://shinydevelopment.com
What is UJS?
Did it have full functionality?   No

Was it as quick?                  No

Was it as pretty?                 No

Was it a...
Why should you care?
Accessibility
Mobile Browsing
SEO
As of 1st September 2005, every web site
 built for a dutch government agency is
     required by law to conform to:
 Vali...
Point 3:
Progressive Enhancement.
Point 7:
Scripts that work on links
should extend the basic link
functionality.
Point 8:
If an element makes no
sense without a script, it
shouldn't be in the HTML.
Point 9:
Use of forms or scripts as
the only means of getting
certain information is
prohibited.
So JavaScript is evil,
       right?
Good JavaScript
Bad JavaScript
The Dark Ages
 of the Web
Separating content
   from design
<b><font size=quot;5quot;><font color=quot;#0000FFquot;>THIS
SITE IS UNDER CONSTRUCTION!!</font></font></b>



<style>
  p...
Separating content
   from design
  and behaviour
target=“_blank”
              demo
Prototype & LowPro
<a class=“external”>
Event.addBehavior({
  quot;a.external:clickquot;:
    function(event) {
      window.open(this.href, quot;extquot;);
     ...
Setting a class becomes an
indicator of behaviour not
         just style
Make sure
nothing breaks
Start minimal and show UI
             or
   Start big and hide UI
JS Specific demo
           UI
UJS plugin for demo
                Rails
Summary
Does it really need it?
Do links still work?
Does this break the
  back button?
Don’t rely on alert() for
    confirmations
Scripts hidden away
  when possible?
Enhancing Accessibility
  with JavaScript?!?
Questions?
dave.verwer@shinydevelopment.com
Unobtrusive JavaScript
Unobtrusive JavaScript
Unobtrusive JavaScript
Unobtrusive JavaScript
Upcoming SlideShare
Loading in …5
×

Unobtrusive JavaScript

2,590
-1

Published on

Unobtrusive JavaScript

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,590
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
216
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Unobtrusive JavaScript

  1. 1. Unobtrusive JavaScript
  2. 2. Dave Verwer http://daveverwer.com http://shinydevelopment.com
  3. 3. What is UJS?
  4. 4. Did it have full functionality? No Was it as quick? No Was it as pretty? No Was it as usable? No Did it basically work? Yes
  5. 5. Why should you care?
  6. 6. Accessibility
  7. 7. Mobile Browsing
  8. 8. SEO
  9. 9. As of 1st September 2005, every web site built for a dutch government agency is required by law to conform to: Valid HTML 4.01 or XHTML 1.0 CSS and semantic HTML and separation of structure and presentation Progressive enhancement The W3C DOM (instead of the old Microsoft document.all) Meaningful values of class and id Meaningful alt attributes on all images Scripts that work on links should extend the basic link functionality (think accessible popups) If a link makes no sense without a script, it shouldn't be in the HTML (but be generated by JavaScript) Use of forms or scripts as the only means of getting certain information is prohibited Removing the focus rectangle on links is prohibited Information offered in a closed format (think Word) should also be offered in an open format The semantics of many HTML elements are explicitly defined
  10. 10. Point 3: Progressive Enhancement.
  11. 11. Point 7: Scripts that work on links should extend the basic link functionality.
  12. 12. Point 8: If an element makes no sense without a script, it shouldn't be in the HTML.
  13. 13. Point 9: Use of forms or scripts as the only means of getting certain information is prohibited.
  14. 14. So JavaScript is evil, right?
  15. 15. Good JavaScript
  16. 16. Bad JavaScript
  17. 17. The Dark Ages of the Web
  18. 18. Separating content from design
  19. 19. <b><font size=quot;5quot;><font color=quot;#0000FFquot;>THIS SITE IS UNDER CONSTRUCTION!!</font></font></b> <style> p.construction { color: #00f; font-size: 1.5em; font-weight: bold; } </style> <p class=quot;constructionquot;> THIS SITE IS UNDER CONSTRUCTION!! </p>
  20. 20. Separating content from design and behaviour
  21. 21. target=“_blank” demo
  22. 22. Prototype & LowPro
  23. 23. <a class=“external”>
  24. 24. Event.addBehavior({ quot;a.external:clickquot;: function(event) { window.open(this.href, quot;extquot;); return false; } });
  25. 25. Setting a class becomes an indicator of behaviour not just style
  26. 26. Make sure nothing breaks
  27. 27. Start minimal and show UI or Start big and hide UI
  28. 28. JS Specific demo UI
  29. 29. UJS plugin for demo Rails
  30. 30. Summary
  31. 31. Does it really need it?
  32. 32. Do links still work?
  33. 33. Does this break the back button?
  34. 34. Don’t rely on alert() for confirmations
  35. 35. Scripts hidden away when possible?
  36. 36. Enhancing Accessibility with JavaScript?!?
  37. 37. Questions? dave.verwer@shinydevelopment.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×