Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
-
Upload
robotdeathsquad -
Category
Technology
-
view
1.265 -
download
0
Transcript of Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
![Page 1: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/1.jpg)
DR. STRANGELOVE OR:HOW I LEARNED TO STOP
WORRYING AND LOVE HTML, CSS, AND JAVASCRIPT
Friday, September 10, 2010
![Page 2: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/2.jpg)
POP QUIZ!!!!
Friday, September 10, 2010
![Page 3: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/3.jpg)
Friday, September 10, 2010
![Page 4: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/4.jpg)
git clone git://github.com/BJClark/Dr.-Strangelove.git
Friday, September 10, 2010
![Page 5: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/5.jpg)
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
![Page 6: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/6.jpg)
Why?
Friday, September 10, 2010
![Page 7: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/7.jpg)
Friday, September 10, 2010
![Page 8: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/8.jpg)
SEMANTIC = MEANINGFUL
• Know your HTML elements(<samp> <abbr> <cite> <ol>)
• Tables for tables, lists for lists.
• HTML5
Friday, September 10, 2010
![Page 9: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/9.jpg)
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
![Page 10: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/10.jpg)
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
![Page 11: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/11.jpg)
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
![Page 12: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/12.jpg)
RESOURCEFUL VIEWS
• Self-contained
•Microformatted*
•Matching our domain objects
Friday, September 10, 2010
![Page 13: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/13.jpg)
Cascading Style Sheets
Friday, September 10, 2010
![Page 14: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/14.jpg)
WEBKIT
Friday, September 10, 2010
![Page 15: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/15.jpg)
WEBKIT
Friday, September 10, 2010
![Page 16: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/16.jpg)
WEBKIT
http://www.quirksmode.org/compatibility.html
Friday, September 10, 2010
![Page 17: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/17.jpg)
CAN I USE. . .
Friday, September 10, 2010
![Page 18: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/18.jpg)
CSS FRAMEWORKS
• Sensible defaults! DRY! Convention over creativity.
• Resets
• Clearfix
• Josef Muller Brockman
Friday, September 10, 2010
![Page 19: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/19.jpg)
GRACEFUL DEGRADATION
Friday, September 10, 2010
![Page 20: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/20.jpg)
IT’S A SECRET
IE7 Webkit
Friday, September 10, 2010
![Page 21: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/21.jpg)
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
![Page 22: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/22.jpg)
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
![Page 23: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/23.jpg)
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
![Page 24: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/24.jpg)
PROFESSIONAL JAVASCRIPT
• Build page to work without Javascript?
• Inline JS = Legacy code
•Writing reusable Javascript
Friday, September 10, 2010
![Page 25: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/25.jpg)
WITHOUT JAVASCRIPT?
Friday, September 10, 2010
![Page 26: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/26.jpg)
WITHOUT JAVASCRIPT?
•Do your users turn off javascript?
Friday, September 10, 2010
![Page 27: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/27.jpg)
WITHOUT JAVASCRIPT?
•Do your users turn off javascript?
•Do you like testing?
Friday, September 10, 2010
![Page 28: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/28.jpg)
WITHOUT JAVASCRIPT?
•Do your users turn off javascript?
•Do you like testing?
Friday, September 10, 2010
![Page 29: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/29.jpg)
• 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
![Page 30: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/30.jpg)
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
![Page 31: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/31.jpg)
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
![Page 32: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/32.jpg)
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
![Page 33: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/33.jpg)
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
![Page 34: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/34.jpg)
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
![Page 35: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/35.jpg)
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
![Page 36: Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript](https://reader035.fdocuments.in/reader035/viewer/2022081403/555194beb4c905013a8b4707/html5/thumbnails/36.jpg)
BJ CLARK
@RobotDeathSquad
http://github.com/BJClark
http://bjclark.me
UX Developer @ http://goldstar.com
Friday, September 10, 2010