Changeyrmarkup

<change your markup,
change your life/>


Saturday, June 11, 2011

o/
garann means / @garannm / garann.com


famous progressive
enhancement m&m

http://www.alistapart.com/articles/understandingprogressiveenhancement/

removing the peanut
== bad

http://www.ﬂickr.com/photos/npj/2681920153/

html
</> is code
</> is content
</> is understood by all browsers
</> let’s see your fancy-pants [popular
programming language] do that!


html the way nature
intended


use what you have
</> inline-block
</> numbered lists
</> navigation between pages
</> editable fields
</> label-input relationships
</> form submission


this
<img src=”gozer.jpg” alt=”photo of my dog” />


makes this


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();
});

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>


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( ... );


don’t screw with the
baseline
</> too much resetting
</> too many generic event handlers
</> too many elements doing the wrong thing
</> == too much work


markup
<div class=”user-content”>
...
<ul>
<li>A list</li>
<li>With stuff in it</li>
<li>That has bullets :O</li>
</ul>
...
</div>


..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; }


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


polyfills not plugins
</> use the right solution
</> build now for the future
</> take advantage of html
</> (even if it doesn’t exist yet)


this
<input type=”text” placeholder=”Type here” />


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”)
});
...
});


*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”)
});
...
});


design patterns for
markup


homes for htmls
</> includes
</> unrelated single-use pieces
</> server-side templates
</> compositions of elements
</> client-side templates
</> enhancements


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


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


singleton-ish
</> create markup once you need it
</> save private reference
</> treat rendering as instantiation
</> expose specific functionality


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();
}
};


factory-ish
</> get markup once it’s needed
</> same function for
</> render once (e.g., init)
</> add more


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);
});
}
};


markup in your
modules
</> js != module
</> js + css + markup == module
</> data and functionality
</> appearance
</> actual interface


markup in your
modules
app.myObj = function () {
that = {
_props: {},
init: function() { ... },
save: function() { ... },
_render: function() {
// e.g. factory goes here
...
}
};
return that;
};


markup needs its own
controllers
</> everything is not a module
</> rendering
</> multiple ways
</> event handling
</> state management


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();
});
});


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();

this is your job


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>
...

go fast or go home
</> dowebsitesneedtolookexactlythesameinevery
browser.com/
</> no
</> markup weight
</> non-markup weight
</> speed vs. pixel perfection


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>


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>

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


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>


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>


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


reordering shouldn’t
hurt
.aModule .leftThing .littleForm .fancyButton {
color: #a1eeee;
}
...
$(“.leftThing div > div a.fancyButton”).click(...);
$(“#specialThing”).delegate(“a.fancyButton”, ... );


reordering shouldn’t
hurt
</> wire-up within scope or module
</> no long selectors
</> no delegating to sketchy containers
</> markup wants to be free


you write javascript;
you make html


o/
thanks for being super!!

contact: @garannm or garann@gmail.com

Changeyrmarkup

More Related Content

What's hot (18)

Viewers also liked (6)

Similar to Changeyrmarkup (20)

Recently uploaded (20)

Changeyrmarkup