changeyrmarkup
DESCRIPTION
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.TRANSCRIPT
<change your markup, change your life/>
<!-- not another html5 talk -->
Saturday, June 11, 2011
o/garann means / @garannm / garann.com
Saturday, June 11, 2011
famous progressive enhancement m&m
http://www.alistapart.com/articles/understandingprogressiveenhancement/
Saturday, June 11, 2011
removing the peanut == bad
http://www.flickr.com/photos/npj/2681920153/
Saturday, June 11, 2011
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
html the way nature intended
Saturday, June 11, 2011
use what you have
</> inline-block
</> numbered lists
</> navigation between pages
</> editable fields
</> label-input relationships
</> form submission
Saturday, June 11, 2011
this
<img src=”gozer.jpg” alt=”photo of my dog” />
Saturday, June 11, 2011
makes this
Saturday, June 11, 2011
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
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
makes this
Saturday, June 11, 2011
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
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
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
..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
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
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
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</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
*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
design patterns for markup
Saturday, June 11, 2011
homes for htmls
</> includes
</> unrelated single-use pieces
</> server-side templates
</> compositions of elements
</> client-side templates
</> enhancements
Saturday, June 11, 2011
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
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
singleton-ish
</> create markup once you need it
</> save private reference
</> treat rendering as instantiation
</> expose specific functionality
Saturday, June 11, 2011
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
factory-ish
</> get markup once it’s needed
</> same function for
</> render once (e.g., init)
</> add more
Saturday, June 11, 2011
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
markup in your modules
</> js != module
</> js + css + markup == module
</> data and functionality
</> appearance
</> actual interface
Saturday, June 11, 2011
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
markup needs its own controllers
</> everything is not a module
</> rendering
</> multiple ways
</> event handling
</> state management
Saturday, June 11, 2011
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
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
this is your job
Saturday, June 11, 2011
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
go fast or go home
</> dowebsitesneedtolookexactlythesameineverybrowser.com/
</> no
</> markup weight
</> non-markup weight
</> speed vs. pixel perfection
Saturday, June 11, 2011
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
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
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
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 differentlysometimes? Or what if I don’t want to overridethe style to use the same functionality with adifferent look?</p>
</div>
Saturday, June 11, 2011
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 differentlysometimes? Or what if I don’t want to overridethe style to use the same functionality with adifferent look?</p>
</div>
Saturday, June 11, 2011
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
reordering shouldn’t hurt
.aModule .leftThing .littleForm .fancyButton {color: #a1eeee;
}...$(“.leftThing div > div a.fancyButton”).click(...);$(“#specialThing”).delegate(“a.fancyButton”, ... );
Saturday, June 11, 2011
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
you write javascript;you make html
Saturday, June 11, 2011
\o/thanks for being super!!
contact: @garannm or [email protected], June 11, 2011