In this session we'll take a hands on approach to building reusable and scaleable front end code. We walk through building a modern web application UI using microformats, gracefully degrading CSS3 and Javascript closures. Finally, we'll see how the same code can be used throughout an application with little modification.

1. DR. STRANGELOVE OR:
HOW I LEARNED TO STOP
WORRYING AND LOVE
HTML, CSS, AND JAVASCRIPT

2. BJ CLARK
UX Developer @ http://goldstar.com
@RobotDeathSquad
http://github.com/BJClark
http://bjclark.me

3. POP QUIZ!!!!

5. git clone git://github.com/BJClark/Dr.-Strangelove.git

6. A LOVE STORY IN 3 PARTS
• Writing Beautiful HTML
• CSS for fun and profit
• Javascript like you give a shit Professional Javascript

7. BEAUTIFUL HTML
• Why?
• Valid
• Semantic
• IDs vs Classes
• Microformats

8. Why?

10. SEMANTIC = MEANINGFUL
• HTML Elements
• CSS Classnames and IDs
• Tables for tables, lists for lists.
• HTML5

11. IDS AND CLASSES
<% div_for photo, :class => "hmedia" do %>
...
• IDs are for identification <% end -%>
<div class="photo hmedia" id="photo_1">
• Classes are categories . . .
</div>

12. MICROFORMATS
<% div_for photo, :class => "hmedia" do %>
• microformats.org %>
<%= content_tag :h2, photo.title, :class => "fn"
<a rel="enclosure" type="image/jpeg" href="<%=
url_for photo -%>">
• Sensible Defaults <%= image_tag "strangelove.jpg", :alt => "Dr.
Strangelove", :class => "photo" %>
</a>
<div class="attribution">
• SpecificHTML with by <span class="contributor vcard">
<%= link_to photo.user, "http://
specific classes example.com", :class => "url fn" %>
</span>
</div>
<% end -%>

13. RESOURCEFUL VIEWS
• Self-contained
• Microformatted*
• Matching our domain
objects

14. Cascading Style Sheets

15. CSS FOR FUN AND PROFIT
• Webkit
• CSS Frameworks
• Graceful Degradation/Progressive Enhancement
• CSS is close enough to OOP

16. WEBKIT

17. WEBKIT

18. WEBKIT
http://www.quirksmode.org/compatibility.html

19. CSS FRAMEWORKS
• Sensible
defaults! DRY!
Convention over creativity.
• Resets
• Clearfix
• Josef Muller Brockman

20. GRACEFUL DEGRADATION

21. GRACEFUL DEGRADATION
.editable_tag {
padding: 5px 10px;
margin: 5px 10px 0 0;
background: #bfbfbf; /* lowest common denominator */
float: left;
background: -webkit-gradient(linear, left top, left
bottom, from(#bfbfbf), to(#e4e4e4));
background: -moz-linear-gradient(top, #bfbfbf, #e4e4e4);
-webkit-border-radius: 4px; /* Safari 4 */
-moz-border-radius: 4px; /* Firefox */
border-radius: 4px; /* Safari 5 & Chrome */
box-shadow: rgba(0,0,0,1) 0 1px 0;
}

22. OBJECT ORIENTED CSS
• CSS
isn’t that different than
OOP in other languages .photo_navigation div.empty_photo{
width: 60px;
height: 60px;
padding: 10px;
• IDs are singletons background: silver;
color: white;
font-size: .8em;
• Classes are Objects }
.photo_navigation
img, .photo_navigation
• Inheritance
and div.empty_photo {
Composition float: left;
padding-right: 10px;
}
• Namespacing

23. OBJECT ORIENTED CSS
.photo_navigation div.empty_photo{
width: 60px; class PhotoNavigation::EmptyPhoto
height: 60px; width "60px"
height "60px"
padding: 10px;
padding "10px"
background: silver; end
color: white;
font-size: .8em; class PhotoNavigation::OtherOptions
} float "left"
padding_right "10px"
.photo_navigation img, .photo_navigation
end
div.empty_photo {
float: left; empty_photo = PhotoNavigation::EmptyPhoto.new
margin-right: 10px; empty_photo.extend(PhotoNavigation::OtherOptions)
}

24. PROFESSIONAL JAVASCRIPT
• Build page to work without Javascript?
• Inline JS = Legacy code
• Writing reusable Javascript

25. WITHOUT JAVASCRIPT?

26. WITHOUT JAVASCRIPT?
• Do your users turn off
javascript?

27. WITHOUT JAVASCRIPT?
• Do your users turn off
javascript?
• Do you like testing?

28. WITHOUT JAVASCRIPT?
• Do your users turn off
javascript?
• Do you like testing?

29. THE CASE FOR UJS
<a href="#" onclick="new
Ajax.Updater('foo', 'http://
• Very painful to test strangelove.local/tags/1',
{asynchronous:true,
evalScripts:true,
• Impossible to reuse parameters:'authenticity_token=' +
encodeURIComponent('xXnuBemPMRAar/
• Hard to debug EUBB9GbcXD/
+HUhOaUxoAnkm5KSy8=')}); return
false;">Zip</a>

30. WRITING REUSABLE
JAVASCRIPT
var Photor = {};
Photor.Tags = (function($){
return {
init: function(){
• Namespaced
}
}
})(jQuery);
• Public vs Private Methods
$(document).ready(function(){
Photor.Tags.init();
});

31. INIT METHOD
return {
init: function(){
$('.edit_tags').live('click', function(event){
event.preventDefault();
editTags(event.target);
});
$('.destroy_tag').live('click', function(event){
event.preventDefault();
removeTag(event.target);
});
$('.add_tags').live('submit', function(event){
event.preventDefault();
addTags(event.target);
});
}
}

32. REMOVING A TAG
var removeTag = function(tag){
var editable_tag = $(tag).closest('.editable_tag');
$(editable_tag).hide(); //instant user feedback
$.ajax({url: $(tag).attr('href'),
type: "POST",
data: {"_method": 'delete'},
success: function(data){
$(editable_tag).remove();
hideErrors(editable_tag);
},
error: function(data){
$(editable_tag).show();
handleError(data, editable_tag);
}
});
}

33. SHOWING ADD TAGS
var editTags = function(target){
var parent_div = $(target).closest('.tags');
$('.add_tags', parent_div).show();
$(target).hide();
}
//INCORRECT
$('.edit_tags').click(function(event){
event.preventDefault();
$('.add_tags').show();
$(event.target).hide();
});

34. ADDING TAGS
var addTags = function(form) {
$.ajax({url: $(form).attr('action') + ".js",
type: "POST",
data: $(form).serialize(),
dataType: "html",
success: function(data){
var tags_div = $(form).closest('.tags');
$('.editable_tag', tags_div).remove();
$('.error_messages', tags_div).after(data);
hideErrors();
$(form).find('input[type=text]').val("");
},
error: function(data){
handleError(data, form);
}
});

35. THINGS TO NOTE
• No use of “this”
• Not using IDs
• Closures
allow for multiples of the same elements to act
independently

36. QUESTIONS?
bjclark@scidept.com • http://bjclark.me