Meet Me in the Browser - September Frontend Meetup

@livmadsen a content ﬁrst approach to frontend development QUIT BULLSH*TTING
AND FRONTEND MEETUP EDITION Friday, September 13, 13

@livmadsen Frontend developer Creuna #FRONTENDERSDK group and meet-ups Friday, September
13, 13

@livmadsen Meet me in the browser WHAT WE’LL COVER WHAT’S
THE PROBLEM, REALLY? MEET ME IN THE BROWSER STYLE GUIDES & ELEMENT LIBRARIES NO-HAZZLE MOCK-UPS SUM-UP & QUESTIONS Friday, September 13, 13

@livmadsen Meet me in the browser (..., Cotton Eye Joe)
WHERE DID WE COME FROM? Friday, September 13, 13

@livmadsen Meet me in the browser TYPICAL PROCESS The ﬁgure
you are about to see is based on actual events. My name has been removed to protect my identity. Friday, September 13, 13

@livmadsen Meet me in the browser TYPICAL PROCESS Friday, September
13, 13

@livmadsen Meet me in the browser WHAT HAPPENED? it’s not
nice So sorry! Friday, September 13, 13

@livmadsen Meet me in the browser PRIME SUSPECT: PSD PAGE
COMPS force focus on facade skew expectations too stiff for RWD Friday, September 13, 13

@livmadsen Meet me in the browser LESS “TADAA” PRESENTATIONS MORE
DIALOGUE Friday, September 13, 13

@livmadsen Meet me in the browser DESIGN AND DEVELOPMENT ARE
NOT SEPARATE THINGS Friday, September 13, 13

@livmadsen Meet me in the browser WITH THE CONTENT GET
COZY Friday, September 13, 13

@livmadsen Meet me in the browser CLEAR STRATEGY & SET
GUIDE LINES @livmadsen Meet me in the browser Friday, September 13, 13

@livmadsen Meet me in the browser DECIDE IN THE BROWSER
@livmadsen Meet me in the browser Friday, September 13, 13

@livmadsen Meet me in the browser EXPOSE ISSUES, GET WISER
AND RESPOND FASTER Friday, September 13, 13

@livmadsen Meet me in the browser Focus dialogue Align expectations
on style and behaviour DESIGN DELIVERABLES LAYOUT AGNOSTIC Friday, September 13, 13

@livmadsen Meet me in the browser TYPECAST HTTP://TYPECAST.COM Friday, September
13, 13

@livmadsen Meet me in the browser ELEMENT COLLAGES HTTP://DANIELMALL.COM/ARTICLES/RIF-ELEMENT-COLLAGES/ STYLE
TILES HTTP://STYLETIL.ES Friday, September 13, 13

@livmadsen Meet me in the browser & ELEMENT LIBRARIES STYLE
GUIDES TO THE BROWSER! Friday, September 13, 13

@livmadsen Meet me in the browser @jakobloekke by A STYLE
GUIDE YOU CAN WORK IN TDCSS.JS Friday, September 13, 13

@livmadsen Meet me in the browser Easy setup Light-weight, instant
response Great overview http://bit.ly/tdcss Friday, September 13, 13

@livmadsen Meet me in the browser Small product teaser in
list Medium product teaser stand-alone Medium product teaser in list ELEMENT LIBRARIES Friday, September 13, 13

@livmadsen Meet me in the browser GREAT BASE, BUT REPETITION
BUILDS Friday, September 13, 13

@livmadsen Meet me in the browser @teammixture by MIXTURE.IO HAZZLE-FREE
MOCK-UPS Friday, September 13, 13

@livmadsen Meet me in the browser http://mixture.io Rapid prototyping Easy
sharing Built in preprocessing, multi-device testing etc. App for Friday, September 13, 13

@livmadsen Meet me in the browser layouts templates includes HTML
TEMPLATING WITH LIQUID Friday, September 13, 13

@livmadsen Meet me in the browser ... {% include "resources/navigation"
%} <div role="main"> {% block content %}{% endblock %} </div> <aside role="complementary"> {% block secondarycontent %} {% endblock %} </aside> ... {% block content %} <h1>Hello, world!</h1> <p>This is main content</p> {% endblock %} {% block secondarycontent %} Oh, Hello again! {% endblock %} in layout ﬁle in template ﬁle “content” “secondary content” Friday, September 13, 13

@livmadsen Meet me in the browser ... {% include "resources/navigation"
%} <div role="main"> {% block content %}{% endblock %} </div> <aside role="complementary"> {% block secondarycontent %} {% endblock %} </aside> ... in include ﬁle “navigation” navigation in layout ﬁle ... <a href="/" {% if mixture.url == "index" %}class="current"{% endif %}> Home </a> <a href="/model" {% if mixture.url == "model" %}class="current"{% endif %}> Model example </a> ... Friday, September 13, 13

@livmadsen Meet me in the browser { ... "kittens": [
{ "name": "John", "type": "Mancoon", "teasertextshort": "A real wonder bundle, that will have you brimming with joy.", "teaserimage": "http://placekitten.com/400/150" }, { "name": "Cuddles", "type": "Cornish Rex", "teasertextshort": "This clever kitty has been specially trained to never sit on keyboards.", "teaserimage": "http://placekitten.com/400/150" } ] } in model ﬁle _global.json Friday, September 13, 13

@livmadsen Meet me in the browser elements.liquid (tdcss) <a href=”...”
class="teaser-small"> <image class="teaser__image" src="{{ kitten.teaserimage }}" /> <span class="teaser__brand"> {{ kitten.name }}</span> <span class="teaser__type"> {{ kitten.type }}</span> </a> teaser--small.liquid (block)  <section class="teaser-list"> <h1>All our kittens</h1> {% for kitten in global.kittens %} {% include "blocks/teaser--small" %} {% endfor %} </section> Friday, September 13, 13

@livmadsen Meet me in the browser http://mixture-tdcss.livmadsen.mixture.io MIXTURE + TDCSS
EXAMPLES Friday, September 13, 13

@livmadsen Meet me in the browser GAINS & LEARNINGS Friday,
September 13, 13

@livmadsen Meet me in the browser CLEAR STRUCTURE LOW BARRIER
OF ENTRY IMPROVED TEAM WORK Friday, September 13, 13

@livmadsen Meet me in the browser .. at least not
over this bit ... PANICKED CLIENTS HAVEN’T Friday, September 13, 13

@livmadsen Meet me in the browser Don't go chasing waterfalls.
But, please DON’T stick to the rivers and the lakes that you're used to. THIS IS ACTUALLY HARDER TO EXPLAIN Friday, September 13, 13

@livmadsen Meet me in the browser EXPOSES CONTENT/DESIGN ISSUES loose
scope Friday, September 13, 13

@livmadsen Meet me in the browser THANK YOU Friday, September
13, 13

@livmadsen Meet me in the browser http://mixture-tdcss.livmadsen.mixture.io http://bit.ly/tdcss http://mixture.io http://typecast.com/
http://styletil.es/ http://danielmall.com/articles/rif-element-collages/ ALL THE LINKS Friday, September 13, 13

@livmadsen Meet me in the browser from the discussion: MARKUP/.LIQUID
FILE STRUCTURE Friday, September 13, 13

Meet Me in the Browser - September Frontend Mee...

Meet Me in the Browser - September Frontend Meetup

More Decks by Liv Madsen

Other Decks in Programming

Featured

Transcript