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.
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Changeyrmarkup
1. <change your markup,
change your life/>
<!-- not another html5 talk -->
Saturday, June 11, 2011
2. o/
garann means / @garannm / garann.com
Saturday, 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
intended
Saturday, June 11, 2011
7. use what you have
</> inline-block
</> numbered lists
</> navigation between pages
</> editable fields
</> label-input relationships
</> form submission
Saturday, June 11, 2011
8. this
<img src=”gozer.jpg” alt=”photo of my dog” />
Saturday, 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
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 work
Saturday, 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.css
Saturday, 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
23. homes for htmls
</> includes
</> unrelated single-use pieces
</> server-side templates
</> compositions of elements
</> client-side templates
</> enhancements
Saturday, 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 once
Saturday, 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 ABSTRACTIONS
Saturday, June 11, 2011
26. singleton-ish
</> create markup once you need it
</> save private reference
</> treat rendering as instantiation
</> expose specific functionality
Saturday, June 11, 2011
28. factory-ish
</> get markup once it’s needed
</> same function for
</> render once (e.g., init)
</> add more
Saturday, 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 interface
Saturday, 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 management
Saturday, 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
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 perfection
Saturday, 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-offs
Saturday, 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 js
Saturday, 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 free
Saturday, June 11, 2011