Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Post on 12-May-2015
1264 Views
Preview:
Transcript
DR. STRANGELOVE OR:HOW I LEARNED TO STOP
WORRYING AND LOVE HTML, CSS, AND JAVASCRIPT
Friday, September 10, 2010
POP QUIZ!!!!
Friday, September 10, 2010
Friday, September 10, 2010
git clone git://github.com/BJClark/Dr.-Strangelove.git
Friday, September 10, 2010
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
Why?
Friday, September 10, 2010
Friday, September 10, 2010
SEMANTIC = MEANINGFUL
• Know your HTML elements(<samp> <abbr> <cite> <ol>)
• Tables for tables, lists for lists.
• HTML5
Friday, September 10, 2010
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"
Friday, September 10, 2010
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 -%>
Friday, September 10, 2010
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>
Friday, September 10, 2010
RESOURCEFUL VIEWS
• Self-contained
•Microformatted*
•Matching our domain objects
Friday, September 10, 2010
Cascading Style Sheets
Friday, September 10, 2010
WEBKIT
Friday, September 10, 2010
WEBKIT
Friday, September 10, 2010
WEBKIT
http://www.quirksmode.org/compatibility.html
Friday, September 10, 2010
CAN I USE. . .
Friday, September 10, 2010
CSS FRAMEWORKS
• Sensible defaults! DRY! Convention over creativity.
• Resets
• Clearfix
• Josef Muller Brockman
Friday, September 10, 2010
GRACEFUL DEGRADATION
Friday, September 10, 2010
IT’S A SECRET
IE7 Webkit
Friday, September 10, 2010
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;}
Friday, September 10, 2010
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;}
Friday, September 10, 2010
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)
Friday, September 10, 2010
PROFESSIONAL JAVASCRIPT
• Build page to work without Javascript?
• Inline JS = Legacy code
•Writing reusable Javascript
Friday, September 10, 2010
WITHOUT JAVASCRIPT?
Friday, September 10, 2010
WITHOUT JAVASCRIPT?
•Do your users turn off javascript?
Friday, September 10, 2010
WITHOUT JAVASCRIPT?
•Do your users turn off javascript?
•Do you like testing?
Friday, September 10, 2010
WITHOUT JAVASCRIPT?
•Do your users turn off javascript?
•Do you like testing?
Friday, September 10, 2010
• 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>
Friday, September 10, 2010
WRITING REUSABLE JAVASCRIPT
•Namespaced
• Public vs Private Methods
var Photor = {};
Photor.Tags = (function($){
return { init: function(){
} }
})(jQuery);
$(document).ready(function(){ Photor.Tags.init();
});
Friday, September 10, 2010
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); });
} }
Friday, September 10, 2010
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
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();});
Friday, September 10, 2010
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); } });
Friday, September 10, 2010
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
BJ CLARK
@RobotDeathSquad
http://github.com/BJClark
http://bjclark.me
UX Developer @ http://goldstar.com
Friday, September 10, 2010
top related