0
DR. STRANGELOVE OR:
           HOW I LEARNED TO STOP
            WORRYING AND LOVE
          HTML, CSS, AND JAVASCRIPT
Fri...
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

    • Javasc...
Why?




Friday, September 10, 2010
Friday, September 10, 2010
SEMANTIC = MEANINGFUL


    • Know   your HTML elements
        (<samp> <abbr> <cite> <ol>)

    • Tables             for ...
IDS AND CLASSES

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

    • microformats.org                  <% div_for photo, :class => "hmedia" do %>
                         ...
MICROFORMATS
                     XOXO - Microformat for Navigation Outlines
                                  <ol class='...
RESOURCEFUL VIEWS


    • Self-contained

    • Microformatted*

    • Matching               our domain
        objects

...
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!
...
GRACEFUL DEGRADATION




Friday, September 10, 2010
IT’S A SECRET




                             IE7              Webkit

Friday, September 10, 2010
GRACEFUL DEGRADATION
                     .editable_tag {
                       padding: 5px 10px;
                      ...
OBJECT ORIENTED CSS

    • CSS isn’t that different than
        OOP in other languages             .photo_navigation div....
OBJECT ORIENTED CSS

   .photo_navigation div.empty_photo{
     width: 60px;                             class PhotoNaviga...
PROFESSIONAL JAVASCRIPT


    • Build           page to work without Javascript?

    • Inline           JS = Legacy code
...
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...
WITHOUT JAVASCRIPT?



    • Do    your users turn off
        javascript?

    • Do          you like testing?




Friday...
THE CASE FOR UJS

                                        <a href="#" onclick="new
                                       ...
WRITING REUSABLE
                                JAVASCRIPT
     var Photor = {};

     Photor.Tags = (function($){

     ...
INIT METHOD
     return {
         init: function(){
           $('.edit_tags').live('click', function(event){
           ...
REMOVING A TAG

        var removeTag = function(tag){
          var editable_tag = $(tag).closest('.editable_tag');
     ...
SHOWING ADD TAGS
     //INCORRECT (and how every jQuery tutorial out there tells you how to do it)
     $('.edit_tags').cl...
ADDING TAGS

        var addTags = function(form) {
          $.ajax({url: $(form).attr('action') + ".js",
               ...
THINGS TO NOTE


    • No          use of “this”

    • Not           using IDs

    • Closures  allow for multiples of th...
BJ CLARK
                             UX Developer @ http://goldstar.com


                                    @RobotDeath...
Upcoming SlideShare
Loading in...5
×

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

1,272

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,272
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×