Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript

DR. STRANGELOVE OR:
HOW I LEARNED TO STOP
WORRYING AND LOVE
HTML, CSS, AND JAVASCRIPT
Friday, September 10, 2010

POP QUIZ!!!!


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


A LOVE STORY IN 3 PARTS

• Writing Beautiful HTML

• CSS for fun and proﬁt

• Javascript like you give a shit Professional Javascript


Why?


SEMANTIC = MEANINGFUL

• Know your HTML elements
(<samp> <abbr> <cite> <ol>)

• Tables for tables, lists for lists.

• HTML5


IDS AND CLASSES

<% div_for photo, :class => "hmedia" do %>
...
<% end -%>

<div class="photo hmedia" id="photo_1">
. . .
• IDs are for identiﬁcation </div>

• Classes are categories <%= dom_id @photo %>

"photo_1"


MICROFORMATS

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

• mofo, xoxo </span>
</div>
<% end -%>


MICROFORMATS
XOXO - Microformat for Navigation Outlines
<ol class='xoxo'>
<li>Subject 1
<ol>
<li>subpoint a</li>
<li>subpoint b</li>
</ol>
</li>
<li>Subject 2
<ol compact="compact">
<li>subpoint c</li>
<li>subpoint d</li>
</ol>
</li>
<li>Subject 3
<ol>
<li>subpoint e</li>
</ol>
</li>
</ol>


RESOURCEFUL VIEWS

• Self-contained

• Microformatted*

• Matching our domain
objects


Cascading Style Sheets


WEBKIT


WEBKIT

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


CAN I USE. . .


CSS FRAMEWORKS

• Sensible
defaults! DRY!
Convention over creativity.

• Resets

• Clearﬁx

• Josef Muller Brockman


GRACEFUL DEGRADATION


IT’S A SECRET

IE7 Webkit


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;
}


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


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)
}


PROFESSIONAL JAVASCRIPT

• Build page to work without Javascript?

• Inline JS = Legacy code

• Writing reusable Javascript


WITHOUT JAVASCRIPT?


WITHOUT JAVASCRIPT?

• Do your users turn off
javascript?


WITHOUT JAVASCRIPT?

• Do your users turn off
javascript?

• Do you like testing?


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>


WRITING REUSABLE
JAVASCRIPT
var Photor = {};

Photor.Tags = (function($){

return {
init: function(){
• Namespaced
}
}

})(jQuery);
• Public vs Private Methods
$(document).ready(function(){
Photor.Tags.init();

});


INIT METHOD
return {
init: function(){
$('.edit_tags').live('click', function(event){
event.preventDefault();
editTags(event.target);
});

$('.destroy_tag').live('click', function(event){
removeTag(event.target);
});

$('.add_tags').live('submit', function(event){
addTags(event.target);
});

}
}


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);
}
});
}


SHOWING ADD TAGS
//INCORRECT (and how every jQuery tutorial out there tells you how to do it)
$('.edit_tags').click(function(event){
$('.add_tags').show();
$(event.target).hide();
});

var editTags = function(target){
var parent_div = $(target).closest('.tags');
$('.add_tags', parent_div).show();
$(target).hide();
}


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);
}
});


THINGS TO NOTE

• No use of “this”

• Not using IDs

• Closures allow for multiples of the same elements to act
independently


BJ CLARK
UX Developer @ http://goldstar.com

@RobotDeathSquad
http://github.com/BJClark
http://bjclark.me


Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript

More Related Content

Similar to Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript (20)

Recently uploaded (20)

Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript