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


makes this


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


http://necolas.github.com/normalize.css

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



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

});});



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

</> dowebsitesneedtolookexactlythesameineverybrowser.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 differentlysometimes? Or what if I don’t want to overridethe style to use the same functionality with adifferent look?</p>

</div>



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



</> 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 [email protected], June 11, 2011

mailto:[email protected]

mailto:[email protected]

Technology

Changeyrmarkup