5. A LOVE STORY IN 3 PARTS
• Writing Beautiful HTML
• CSS for fun and profit
• Javascript like you give a shit Professional Javascript
Friday, September 10, 2010
8. SEMANTIC = MEANINGFUL
• Know your HTML elements
(<samp> <abbr> <cite> <ol>)
• Tables for tables, lists for lists.
• HTML5
Friday, September 10, 2010
9. IDS AND CLASSES
<% div_for photo, :class => "hmedia" do %>
...
<% end -%>
<div class="photo hmedia" id="photo_1">
. . .
• IDs are for identification </div>
• Classes are categories <%= dom_id @photo %>
"photo_1"
Friday, September 10, 2010
24. PROFESSIONAL JAVASCRIPT
• Build page to work without Javascript?
• Inline JS = Legacy code
• Writing reusable Javascript
Friday, September 10, 2010
26. WITHOUT JAVASCRIPT?
• Do your users turn off
javascript?
Friday, September 10, 2010
27. WITHOUT JAVASCRIPT?
• Do your users turn off
javascript?
• Do you like testing?
Friday, September 10, 2010
28. WITHOUT JAVASCRIPT?
• Do your users turn off
javascript?
• Do you like testing?
Friday, September 10, 2010
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>
Friday, September 10, 2010
30. WRITING REUSABLE
JAVASCRIPT
var Photor = {};
Photor.Tags = (function($){
return {
init: function(){
• Namespaced
}
}
})(jQuery);
• Public vs Private Methods
$(document).ready(function(){
Photor.Tags.init();
});
Friday, September 10, 2010
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);
}
});
}
Friday, September 10, 2010
33. SHOWING ADD TAGS
//INCORRECT (and how every jQuery tutorial out there tells you how to do it)
$('.edit_tags').click(function(event){
event.preventDefault();
$('.add_tags').show();
$(event.target).hide();
});
var editTags = function(target){
var parent_div = $(target).closest('.tags');
$('.add_tags', parent_div).show();
$(target).hide();
}
Friday, September 10, 2010
35. THINGS TO NOTE
• No use of “this”
• Not using IDs
• Closures allow for multiples of the same elements to act
independently
Friday, September 10, 2010
36. BJ CLARK
UX Developer @ http://goldstar.com
@RobotDeathSquad
http://github.com/BJClark
http://bjclark.me
Friday, September 10, 2010