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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Changeyrmarkup

Ähnlich wie Changeyrmarkup (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Changeyrmarkup