• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
 

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

on

  • 1,439 views

 

Statistics

Views

Total Views
1,439
Views on SlideShare
1,432
Embed Views
7

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 7

http://speakerrate.com 7

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript Presentation 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 <% 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
    • 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" %> • Specific HTML with </a> <div class="attribution"> specific classes by <span class="contributor vcard"> <%= link_to photo.user, "http:// example.com", :class => "url fn" %> • mofo, xoxo </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 .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 Friday, September 10, 2010
    • 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) } 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
    • 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
    • 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
    • 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 //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
    • 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 UX Developer @ http://goldstar.com @RobotDeathSquad http://github.com/BJClark http://bjclark.me Friday, September 10, 2010