<change your markup,                   change your life/>                          <!-- not another html5 talk -->Saturday...
o/                          garann means / @garannm / garann.comSaturday, June 11, 2011
famous progressive                          enhancement m&m                                      http://www.alistapart.com...
removing the peanut                          == bad                                    http://www.flickr.com/photos/npj/268...
html                     </>   is code                     </>   is content                     </>   is understood by all...
html the way nature                           intendedSaturday, June 11, 2011
use what you have                     </>   inline-block                     </>   numbered lists                     </> ...
this                <img src=”gozer.jpg” alt=”photo of my dog” />Saturday, June 11, 2011
makes thisSaturday, June 11, 2011
easier than this                <div class=”photo”>photo of my dog</div>                <div class=”ttip”></div>          ...
this                <select>                 <option>give you up</option>                 <option>let you down</option>   ...
makes thisSaturday, June 11, 2011
easier than this                <input type=”text” class=”dropdown” id=”my-dd”/>                <ul class=”dropdown-list” ...
don’t screw with the                                baseline                     </>   too much resetting                 ...
markup                <div class=”user-content”>                 ...                 <ul>                   <li>A list</li...
..made more difficult                ul, ol { list-style-type: none; }                ...                .user-content ul ...
overwrite only when                         necessary                     </>   bullets on lists                     </>  ...
polyfills not plugins                     </>   use the right solution                     </>   build now for the future ...
this                <input type=”text” placeholder=”Type here” />Saturday, June 11, 2011
instead of this                <input type=”text” class=”plchldr” />                <span class=”plchldr-txt”>Type here</s...
*except for this                $(“.ie7 input[placeholder]”).each(function() {                 var $t = $(this);          ...
design patterns for                               markupSaturday, June 11, 2011
homes for htmls                     </>   includes                          </>   unrelated single-use pieces             ...
once it’s on the client                     </>   common stuff in the page                     </>   rarer stuff on demand...
all OOP everything                     </>   js isn’t object-oriented                          </>   but we make it that w...
singleton-ish                     </>   create markup once you need it                     </>   save private reference   ...
singleton-ish                app.Tooltip = {                 _tt: $(“#tooltip”),                 render: function(txt,pos)...
factory-ish                     </>   get markup once it’s needed                     </>   same function for             ...
factory-ish                app.Address = {                 _html: null,                 addNew: function(container) {     ...
markup in your                                  modules                     </>   js != module                     </>   j...
markup in your                            modules                app.myObj = function () {                 that = {       ...
markup needs its own                     controllers                     </>   everything is not a module                 ...
markup needs its own                     controllers                $(document).ready(function() {                 $(“form...
markup needs its own                     controllers                app.page = {                 aForm: $(“form”),        ...
this is your jobSaturday, June 11, 2011
go fast or go home                <div class=”bottomRight”>                 <div class=”bottomLeft”>                   <di...
go fast or go home                     </>   dowebsitesneedtolookexactlythesameinevery                           browser.c...
look better naked                <strong>Please fill out this form</strong>                <label>Name: </label>          ...
look better naked                <h1>Please fill out this form</h1>                <form action=”/url” method=”POST”>     ...
look better naked                     </>   presentational markup is bad                          </>   (it says so on the...
js + css shouldn’t have                         to share                <div class=”coolModule”>                 <img src=...
js + css shouldn’t have                         to share                <div class=”comment expandable” id=”mostRecent”>  ...
js + css shouldn’t have                         to share                     </>   try to give id’s to javascript         ...
reordering shouldn’t                              hurt                .aModule .leftThing .littleForm .fancyButton {      ...
reordering shouldn’t                              hurt                     </>   wire-up within scope or module           ...
you write javascript;                        you make htmlSaturday, June 11, 2011
o/                                thanks for being super!!                          contact: @garannm or garann@gmail.comS...
Upcoming SlideShare
Loading in...5
×

Changeyrmarkup

2,510

Published on

It doesn't matter whether you write JavaScript for the client, the server, or for both. It doesn't matter what library or framework you use. It doesn't matter what templating engine or node modules you rely on. The end result is HTML. And if your HTML sucks, what was the point? If you've been thinking markup was someone else's concern, guess what, sweetcheeks: it's not - it's yours. We obsess over extra semi-colons but we'll add container element after container element to provide hooks for our jQuery plugins? Uh-uh. If there's no craftsmanship involved in the way you handle HTML, it's time to change that.

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

No Downloads
Views
Total Views
2,510
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Changeyrmarkup

  1. 1. <change your markup, change your life/> <!-- not another html5 talk -->Saturday, June 11, 2011
  2. 2. o/ garann means / @garannm / garann.comSaturday, June 11, 2011
  3. 3. famous progressive enhancement m&m http://www.alistapart.com/articles/understandingprogressiveenhancement/Saturday, June 11, 2011
  4. 4. removing the peanut == bad http://www.flickr.com/photos/npj/2681920153/Saturday, June 11, 2011
  5. 5. html </> is code </> is content </> is understood by all browsers </> let’s see your fancy-pants [popular programming language] do that!Saturday, June 11, 2011
  6. 6. html the way nature intendedSaturday, June 11, 2011
  7. 7. use what you have </> inline-block </> numbered lists </> navigation between pages </> editable fields </> label-input relationships </> form submissionSaturday, June 11, 2011
  8. 8. this <img src=”gozer.jpg” alt=”photo of my dog” />Saturday, June 11, 2011
  9. 9. makes thisSaturday, June 11, 2011
  10. 10. easier than this <div class=”photo”>photo of my dog</div> <div class=”ttip”></div> ... .photo { height: 400px; text-indent: ... } .ttip { display: none; position: ... } ... $(“div.photo”).mouseover(function() { var $t = $(this), alt = $t.text(), p = $t.position(), tt = $(“div.ttip”); tt.css({top:p.top,left:p.left}) .text(alt).show(); }) .mouseout(function() { $(“div.ttip”).hide(); });Saturday, June 11, 2011
  11. 11. this <select> <option>give you up</option> <option>let you down</option> <option>run around and desert you</option> <option>make you cry</option> <option>say goodbye</option> <option>tell a lie and hurt you</option> </select>Saturday, June 11, 2011
  12. 12. makes thisSaturday, June 11, 2011
  13. 13. easier than this <input type=”text” class=”dropdown” id=”my-dd”/> <ul class=”dropdown-list” data-dd=”my-dd”> <li>give you up</li> <li>let you down</li> <li>run around and desert you</li> <li>make you cry</li> <li>say goodbye</li> <li>tell a lie and hurt you</li> </ul> ... .dropdown-list { border: 1px solid #ccc; ...} ... $(“input.dropdown”).focus( ... ).blur( ... ); $(“ul.dropdown-list li”).click( ... );Saturday, June 11, 2011
  14. 14. don’t screw with the baseline </> too much resetting </> too many generic event handlers </> too many elements doing the wrong thing </> == too much workSaturday, June 11, 2011
  15. 15. markup <div class=”user-content”> ... <ul> <li>A list</li> <li>With stuff in it</li> <li>That has bullets :O</li> </ul> ... </div>Saturday, June 11, 2011
  16. 16. ..made more difficult ul, ol { list-style-type: none; } ... .user-content ul { list-style-type: disc; } .user-content ul ul { list-style-type: circle; } ... .user-content ol { list-style-type: decimal; } .user-content ol ol { list-style-type: lower-roman; }Saturday, June 11, 2011
  17. 17. overwrite only when necessary </> bullets on lists </> margins on paragraphs </> onsubmit=”return false;” </> preventDefault() to use a link </> links that link somewhere </> http://necolas.github.com/normalize.cssSaturday, June 11, 2011
  18. 18. polyfills not plugins </> use the right solution </> build now for the future </> take advantage of html </> (even if it doesn’t exist yet)Saturday, June 11, 2011
  19. 19. this <input type=”text” placeholder=”Type here” />Saturday, June 11, 2011
  20. 20. instead of this <input type=”text” class=”plchldr” /> <span class=”plchldr-txt”>Type here</span> ... $(“input.plchldr”).each(function() { var $t = $(this); $t.text($t.next().text()) .addClass(“plchldr-empty”); $t.focus(function() { $t.text(“”).removeClass(“plchldr-empty”) }); ... });Saturday, June 11, 2011
  21. 21. *except for this $(“.ie7 input[placeholder]”).each(function() { var $t = $(this); $t.text($t.attr(“placeholder”)) .addClass(“plchldr-empty”); $t.focus(function() { $t.text(“”).removeClass(“plchldr-empty”) }); ... });Saturday, June 11, 2011
  22. 22. design patterns for markupSaturday, June 11, 2011
  23. 23. homes for htmls </> includes </> unrelated single-use pieces </> server-side templates </> compositions of elements </> client-side templates </> enhancementsSaturday, June 11, 2011
  24. 24. once it’s on the client </> common stuff in the page </> rarer stuff on demand </> smaller pieces as js vars </> don’t load anything more than onceSaturday, June 11, 2011
  25. 25. all OOP everything </> js isn’t object-oriented </> but we make it that way </> machine code: also not object-oriented </> we use abstractions </> html: not object-oriented </> or even a programming language </> MOAR ABSTRACTIONSSaturday, June 11, 2011
  26. 26. singleton-ish </> create markup once you need it </> save private reference </> treat rendering as instantiation </> expose specific functionalitySaturday, June 11, 2011
  27. 27. singleton-ish app.Tooltip = { _tt: $(“#tooltip”), render: function(txt,pos) { if (!this._tt.length) { this._tt = $(‘<div id=”tooltip”>’) .appendTo(‘body’); } this._tt.text(txt); this._tt.css({left:pos.left,top:pos.top}).show(); }, hide: function() { this._tt.hide(); } };Saturday, June 11, 2011
  28. 28. factory-ish </> get markup once it’s needed </> same function for </> render once (e.g., init) </> add moreSaturday, June 11, 2011
  29. 29. factory-ish app.Address = { _html: null, addNew: function(container) { if (this._html) container.append(this._html); else this._load(container); }, _load: function(container) { var that = this; $.get(“addrTemplate.html”,function(tmpl) { that._html = $.tmpl(tmpl,null); that.addNew(container); }); } };Saturday, June 11, 2011
  30. 30. markup in your modules </> js != module </> js + css + markup == module </> data and functionality </> appearance </> actual interfaceSaturday, June 11, 2011
  31. 31. markup in your modules app.myObj = function () { that = { _props: {}, init: function() { ... }, save: function() { ... }, _render: function() { // e.g. factory goes here ... } }; return that; };Saturday, June 11, 2011
  32. 32. markup needs its own controllers </> everything is not a module </> rendering </> multiple ways </> event handling </> state managementSaturday, June 11, 2011
  33. 33. markup needs its own controllers $(document).ready(function() { $(“form”).hide(); $(“#submitThingy”).live(“click”,function() { var f = $(“form”); $.post(f.attr(“action”),f.serialize(),function() { f.hide(); }); }); $(“#editButton”).live(“click”,function() { $(“form”).show(); }); });Saturday, June 11, 2011
  34. 34. markup needs its own controllers app.page = { aForm: $(“form”), init: function() { this.aForm.hide(); $(“#editButton”).live(“click”,that.edit); }, edit: function() { this.aForm.show(); $(“#submitThingy”).click(that.save); }, save: function() { $.post( ... ); } }; app.page.init();Saturday, June 11, 2011
  35. 35. this is your jobSaturday, June 11, 2011
  36. 36. go fast or go home <div class=”bottomRight”> <div class=”bottomLeft”> <div class=”topRight”> <div class=”topLeft”> <p>WTF, really??</p> </div> </div> </div> </div> ... <!-- plus the images, plus the css -->Saturday, June 11, 2011
  37. 37. go fast or go home </> dowebsitesneedtolookexactlythesameinevery browser.com/ </> no </> markup weight </> non-markup weight </> speed vs. pixel perfectionSaturday, June 11, 2011
  38. 38. look better naked <strong>Please fill out this form</strong> <label>Name: </label> <input type=”text” id=”txtName” /> <label>Email: </label> <input type=”text” id=”txtEmail” /> <label>State: </label> <select id=”selState”> <option>Texas</option> <option>Not Texas</option> </select>Saturday, June 11, 2011
  39. 39. look better naked <h1>Please fill out this form</h1> <form action=”/url” method=”POST”> <label>Name: <input type=”text” id=”txtName” /> </label><br/> <label>Email: <input type=”text” id=”txtEmail” /> </label><br/> <label>State: <select id=”selState”> <option>Texas</option> <option>Not Texas</option> </select> </label> </form>Saturday, June 11, 2011
  40. 40. look better naked </> presentational markup is bad </> (it says so on the internet) </> presentational markup is good for presentation </> is it in the standards? </> manage the trade-offsSaturday, June 11, 2011
  41. 41. js + css shouldn’t have to share <div class=”coolModule”> <img src=”aFace.jpg” alt=”J. User” /> <h3>J. User said:</h3> <p>What if I want coolModule to behave differently sometimes? Or what if I don’t want to override the style to use the same functionality with a different look?</p> </div>Saturday, June 11, 2011
  42. 42. js + css shouldn’t have to share <div class=”comment expandable” id=”mostRecent”> <img src=”aFace.jpg” alt=”J. User” /> <h3>J. User said:</h3> <p>What if I want coolModule to behave differently sometimes? Or what if I don’t want to override the style to use the same functionality with a different look?</p> </div>Saturday, June 11, 2011
  43. 43. js + css shouldn’t have to share </> try to give id’s to javascript </> try to give classes to css </> use different classes for js </> class names should describe </> content type for css </> behavior/module for jsSaturday, June 11, 2011
  44. 44. reordering shouldn’t hurt .aModule .leftThing .littleForm .fancyButton { color: #a1eeee; } ... $(“.leftThing div > div a.fancyButton”).click(...); $(“#specialThing”).delegate(“a.fancyButton”, ... );Saturday, June 11, 2011
  45. 45. reordering shouldn’t hurt </> wire-up within scope or module </> no long selectors </> no delegating to sketchy containers </> markup wants to be freeSaturday, June 11, 2011
  46. 46. you write javascript; you make htmlSaturday, June 11, 2011
  47. 47. o/ thanks for being super!! contact: @garannm or garann@gmail.comSaturday, June 11, 2011
  1. A particular slide catching your eye?

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

×