Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,358
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
9
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. <change your markup, change your life/> <!-- not another html5 talk -->Saturday, June 11, 2011
  • 2. o/ garann means / @garannm / garann.comSaturday, June 11, 2011
  • 3. famous progressive enhancement m&m http://www.alistapart.com/articles/understandingprogressiveenhancement/Saturday, June 11, 2011
  • 4. removing the peanut == bad http://www.flickr.com/photos/npj/2681920153/Saturday, June 11, 2011
  • 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. html the way nature intendedSaturday, June 11, 2011
  • 7. use what you have </> inline-block </> numbered lists </> navigation between pages </> editable fields </> label-input relationships </> form submissionSaturday, June 11, 2011
  • 8. this <img src=”gozer.jpg” alt=”photo of my dog” />Saturday, June 11, 2011
  • 9. makes thisSaturday, June 11, 2011
  • 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. 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. makes thisSaturday, June 11, 2011
  • 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. 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. 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. ..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. 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. 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. this <input type=”text” placeholder=”Type here” />Saturday, June 11, 2011
  • 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. *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. design patterns for markupSaturday, June 11, 2011
  • 23. homes for htmls </> includes </> unrelated single-use pieces </> server-side templates </> compositions of elements </> client-side templates </> enhancementsSaturday, June 11, 2011
  • 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. 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. singleton-ish </> create markup once you need it </> save private reference </> treat rendering as instantiation </> expose specific functionalitySaturday, June 11, 2011
  • 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. factory-ish </> get markup once it’s needed </> same function for </> render once (e.g., init) </> add moreSaturday, June 11, 2011
  • 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. markup in your modules </> js != module </> js + css + markup == module </> data and functionality </> appearance </> actual interfaceSaturday, June 11, 2011
  • 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. markup needs its own controllers </> everything is not a module </> rendering </> multiple ways </> event handling </> state managementSaturday, June 11, 2011
  • 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. 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. this is your jobSaturday, June 11, 2011
  • 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. go fast or go home </> dowebsitesneedtolookexactlythesameinevery browser.com/ </> no </> markup weight </> non-markup weight </> speed vs. pixel perfectionSaturday, June 11, 2011
  • 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. 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. 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. 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. 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. 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. 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. 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. you write javascript; you make htmlSaturday, June 11, 2011
  • 47. o/ thanks for being super!! contact: @garannm or garann@gmail.comSaturday, June 11, 2011