Unobtrusive Javascript

752 views
694 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
752
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
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. Seperating
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. Seperating
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
UI demo
  29. 29. UJS
plugin
for
Rails demo
  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

×