DR. STRANGELOVE OR:
 HOW I LEARNED TO STOP
  WORRYING AND LOVE
HTML, CSS, AND JAVASCRIPT
BJ CLARK
UX Developer @ http://goldstar.com


       @RobotDeathSquad
      http://github.com/BJClark
          http://bjc...
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 Profe...
BEAUTIFUL HTML

• Why?

• Valid

• Semantic

• IDs   vs Classes

• Microformats
Why?
SEMANTIC = MEANINGFUL


• HTML     Elements

• CSS   Classnames and IDs

• Tables   for tables, lists for lists.

• HTML5
IDS AND CLASSES


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


                        <% div_for photo, :class => "hmedia" do %>
• microformats.org      %>
             ...
RESOURCEFUL VIEWS


• Self-contained

• Microformatted*

• Matching   our domain
 objects
Cascading Style Sheets
CSS FOR FUN AND PROFIT


• Webkit

• CSS   Frameworks

• Graceful   Degradation/Progressive Enhancement

• CSS   is close ...
WEBKIT
WEBKIT
WEBKIT



http://www.quirksmode.org/compatibility.html
CSS FRAMEWORKS

       • Sensible
               defaults! DRY!
        Convention over creativity.

       • Resets

    ...
GRACEFUL DEGRADATION
GRACEFUL DEGRADATION
 .editable_tag {
   padding: 5px 10px;
   margin: 5px 10px 0 0;
   background: #bfbfbf; /* lowest com...
OBJECT ORIENTED CSS

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

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


• Build    page to work without Javascript?

• Inline   JS = Legacy code

• Writing    reusable ...
WITHOUT JAVASCRIPT?
WITHOUT JAVASCRIPT?



• Do your users turn off
 javascript?
WITHOUT JAVASCRIPT?



• Do your users turn off
 javascript?

• Do   you like testing?
WITHOUT JAVASCRIPT?



• Do your users turn off
 javascript?

• Do   you like testing?
THE CASE FOR UJS

                           <a href="#" onclick="new
                           Ajax.Updater('foo', 'http...
WRITING REUSABLE
                  JAVASCRIPT
var Photor = {};

Photor.Tags = (function($){

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

var removeTag = function(tag){
  var editable_tag = $(tag).closest('.editable_tag');
  $(editable_tag).hid...
SHOWING ADD TAGS

 var editTags = function(target){
   var parent_div = $(target).closest('.tags');
   $('.add_tags', pare...
ADDING TAGS

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


• No   use of “this”

• Not   using IDs

• Closures
         allow for multiples of the same elements to ...
QUESTIONS?


bjclark@scidept.com • http://bjclark.me
Dr. Strangelove or: How I learned to stop worrying and love HTML, CSS and Javascript
Dr. Strangelove or: How I learned to stop worrying and love HTML, CSS and Javascript
Upcoming SlideShare
Loading in …5
×

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

2,715 views

Published on

In this session we'll take a hands on approach to building reusable and scaleable front end code. We walk through building a modern web application UI using microformats, gracefully degrading CSS3 and Javascript closures. Finally, we'll see how the same code can be used throughout an application with little modification.

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

No Downloads
Views
Total views
2,715
On SlideShare
0
From Embeds
0
Number of Embeds
493
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide


































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

    1. 1. DR. STRANGELOVE OR: HOW I LEARNED TO STOP WORRYING AND LOVE HTML, CSS, AND JAVASCRIPT
    2. 2. BJ CLARK UX Developer @ http://goldstar.com @RobotDeathSquad http://github.com/BJClark http://bjclark.me
    3. 3. POP QUIZ!!!!
    4. 4. git clone git://github.com/BJClark/Dr.-Strangelove.git
    5. 5. A LOVE STORY IN 3 PARTS • Writing Beautiful HTML • CSS for fun and profit • Javascript like you give a shit Professional Javascript
    6. 6. BEAUTIFUL HTML • Why? • Valid • Semantic • IDs vs Classes • Microformats
    7. 7. Why?
    8. 8. SEMANTIC = MEANINGFUL • HTML Elements • CSS Classnames and IDs • Tables for tables, lists for lists. • HTML5
    9. 9. IDS AND CLASSES <% div_for photo, :class => "hmedia" do %> ... • IDs are for identification <% end -%> <div class="photo hmedia" id="photo_1"> • Classes are categories . . . </div>
    10. 10. MICROFORMATS <% div_for photo, :class => "hmedia" do %> • microformats.org %> <%= content_tag :h2, photo.title, :class => "fn" <a rel="enclosure" type="image/jpeg" href="<%= url_for photo -%>"> • Sensible Defaults <%= image_tag "strangelove.jpg", :alt => "Dr. Strangelove", :class => "photo" %> </a> <div class="attribution"> • SpecificHTML with by <span class="contributor vcard"> <%= link_to photo.user, "http:// specific classes example.com", :class => "url fn" %> </span> </div> <% end -%>
    11. 11. RESOURCEFUL VIEWS • Self-contained • Microformatted* • Matching our domain objects
    12. 12. Cascading Style Sheets
    13. 13. CSS FOR FUN AND PROFIT • Webkit • CSS Frameworks • Graceful Degradation/Progressive Enhancement • CSS is close enough to OOP
    14. 14. WEBKIT
    15. 15. WEBKIT
    16. 16. WEBKIT http://www.quirksmode.org/compatibility.html
    17. 17. CSS FRAMEWORKS • Sensible defaults! DRY! Convention over creativity. • Resets • Clearfix • Josef Muller Brockman
    18. 18. GRACEFUL DEGRADATION
    19. 19. 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; }
    20. 20. 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
    21. 21. 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) }
    22. 22. PROFESSIONAL JAVASCRIPT • Build page to work without Javascript? • Inline JS = Legacy code • Writing reusable Javascript
    23. 23. WITHOUT JAVASCRIPT?
    24. 24. WITHOUT JAVASCRIPT? • Do your users turn off javascript?
    25. 25. WITHOUT JAVASCRIPT? • Do your users turn off javascript? • Do you like testing?
    26. 26. WITHOUT JAVASCRIPT? • Do your users turn off javascript? • Do you like testing?
    27. 27. 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>
    28. 28. WRITING REUSABLE JAVASCRIPT var Photor = {}; Photor.Tags = (function($){ return { init: function(){ • Namespaced } } })(jQuery); • Public vs Private Methods $(document).ready(function(){ Photor.Tags.init(); });
    29. 29. 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); }); } }
    30. 30. 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); } }); }
    31. 31. SHOWING ADD TAGS var editTags = function(target){ var parent_div = $(target).closest('.tags'); $('.add_tags', parent_div).show(); $(target).hide(); } //INCORRECT $('.edit_tags').click(function(event){ event.preventDefault(); $('.add_tags').show(); $(event.target).hide(); });
    32. 32. 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); } });
    33. 33. THINGS TO NOTE • No use of “this” • Not using IDs • Closures allow for multiples of the same elements to act independently
    34. 34. QUESTIONS? bjclark@scidept.com • http://bjclark.me

    ×