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 profit

• 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

• IDs are for identification

• Classes are categories

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

<div class="photo hmedia" id="photo_1"> . . .</div>

<%= dom_id @photo %>

"photo_1"


MICROFORMATS

•microformats.org

• Sensible Defaults

• Specific HTML with specific classes

•mofo, xoxo

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


http://example.com

http://example.com

http://example.com

http://example.com

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

• Clearfix

• 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

• IDs are singletons

• Classes are Objects

• Inheritance and Composition

•Namespacing

.photo_navigation div.empty_photo{ width: 60px; height: 60px; padding: 10px; background: silver; color: white; font-size: .8em;}.photo_navigation img, .photo_navigation div.empty_photo { float: left; padding-right: 10px;}


OBJECT ORIENTED CSS

.photo_navigation div.empty_photo{ width: 60px; height: 60px; padding: 10px; background: silver; color: white; font-size: .8em;}.photo_navigation img, .photo_navigation div.empty_photo { float: left; margin-right: 10px;}

class PhotoNavigation::EmptyPhoto width "60px" height "60px" padding "10px"end

class PhotoNavigation::OtherOptions float "left" padding_right "10px"end

empty_photo = PhotoNavigation::EmptyPhoto.newempty_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?


• Very painful to test

• Impossible to reuse

• Hard to debug

THE CASE FOR UJS

<a href="#" onclick="new Ajax.Updater('foo', 'http://strangelove.local/tags/1', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('xXnuBemPMRAar/EUBB9GbcXD/+HUhOaUxoAnkm5KSy8=')}); return false;">Zip</a>


http://strangelove.local/tags/1'




WRITING REUSABLE JAVASCRIPT

•Namespaced

• Public vs Private Methods

var Photor = {};

Photor.Tags = (function($){

return { init: function(){

} }

})(jQuery);

$(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){ event.preventDefault(); removeTag(event.target); }); $('.add_tags').live('submit', function(event){ event.preventDefault(); 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 (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();});


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

@RobotDeathSquad

http://github.com/BJClark

http://bjclark.me

UX Developer @ http://goldstar.com




http://bjclark.me

http://bjclark.me

http://goldstar.com

http://goldstar.com

dr. strangelove: or how i learned to love html, css, and javascript

Technology

px ids

var tags

px height

navigation div

px class photonavigation

var editable

shit professional javascript

specic html