Post on 19-May-2015
description
<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 garann@gmail.comSaturday, June 11, 2011