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

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

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

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

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

BEAUTIFUL HTML

• Why?

• Valid

• Semantic

• IDs vs Classes

• Microformats

SEMANTIC = MEANINGFUL

• HTML Elements

• CSS Classnames and IDs

• Tables for tables, lists for lists.

• HTML5

IDS AND CLASSES

<% div_for photo, :class => "hmedia" do %>
...
• IDs are for identiﬁcation <% end -%>

<div class="photo hmedia" id="photo_1">
• Classes are categories . . .
</div>

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">
• SpeciﬁcHTML with by <span class="contributor vcard">
<%= link_to photo.user, "http://
speciﬁc classes example.com", :class => "url fn" %>
</span>
</div>
<% end -%>

RESOURCEFUL VIEWS

• Self-contained

• Microformatted*

• Matching our domain
objects

CSS FOR FUN AND PROFIT

• Webkit

• CSS Frameworks

• Graceful Degradation/Progressive Enhancement

• CSS is close enough to OOP

WEBKIT

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

CSS FRAMEWORKS

• Sensible
defaults! DRY!
Convention over creativity.

• Resets

• Clearﬁx

• Josef Muller Brockman

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?

• 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

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

//INCORRECT
$('.edit_tags').click(function(event){
$('.add_tags').show();
$(event.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

QUESTIONS?

bjclark@scidept.com • http://bjclark.me

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

Recommended

More Related Content

What's hot (20)

Viewers also liked (7)

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

Recently uploaded (20)

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