![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);
}
});](https://image.slidesharecdn.com/slides-100715200537-phpapp01/85/Dr-Strangelove-or-How-I-learned-to-stop-worrying-and-love-HTML-CSS-and-Javascript-34-320.jpg)
Dr. Strangelove or: How I learned to stop worrying and love HTML, CSS and Javascript
- 1. DR. STRANGELOVE OR: HOW I LEARNED TO STOP WORRYING AND LOVE HTML, CSS, AND JAVASCRIPT
- 2. BJ CLARK UX Developer @ http://goldstar.com @RobotDeathSquad http://github.com/BJClark http://bjclark.me
- 3. POP QUIZ!!!!
- 6. A LOVE STORY IN 3 PARTS • Writing Beautiful HTML • CSS for fun and profit • Javascript like you give a shit Professional Javascript
- 7. BEAUTIFUL HTML • Why? • Valid • Semantic • IDs vs Classes • Microformats
- 8. Why?
- 10. SEMANTIC = MEANINGFUL • HTML Elements • CSS Classnames and IDs • Tables for tables, lists for lists. • HTML5
- 11. 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>
- 12. 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 -%>
- 13. RESOURCEFUL VIEWS • Self-contained • Microformatted* • Matching our domain objects
- 15. CSS FOR FUN AND PROFIT • Webkit • CSS Frameworks • Graceful Degradation/Progressive Enhancement • CSS is close enough to OOP
- 16. WEBKIT
- 17. WEBKIT
- 19. CSS FRAMEWORKS • Sensible defaults! DRY! Convention over creativity. • Resets • Clearfix • Josef Muller Brockman
- 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; }
- 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
- 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) }
- 24. PROFESSIONAL JAVASCRIPT • Build page to work without Javascript? • Inline JS = Legacy code • Writing reusable Javascript
- 26. WITHOUT JAVASCRIPT? • Do your users turn off javascript?
- 27. WITHOUT JAVASCRIPT? • Do your users turn off javascript? • Do you like testing?
- 28. WITHOUT JAVASCRIPT? • Do your users turn off javascript? • Do you like testing?
- 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>
- 30. WRITING REUSABLE JAVASCRIPT var Photor = {}; Photor.Tags = (function($){ return { init: function(){ • Namespaced } } })(jQuery); • Public vs Private Methods $(document).ready(function(){ Photor.Tags.init(); });
- 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); }); } }
- 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); } }); }
- 33. 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(); });
- 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); } });
- 35. THINGS TO NOTE • No use of “this” • Not using IDs • Closures allow for multiples of the same elements to act independently