Tweet
Tweet

Slide 1

Slide 1 text

@livmadsen a content first approach to frontend development QUIT BULLSH*TTING AND

Slide 2

Slide 2 text

@livmadsen Frontend developer Creuna #FRONTENDERSDK group and meet-ups

Slide 3

Slide 3 text

@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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

@livmadsen Meet me in the browser TYPICAL PROCESS

Slide 7

Slide 7 text

@livmadsen Meet me in the browser TYPICAL PROCESS

Slide 8

Slide 8 text

@livmadsen Meet me in the browser TYPICAL PROCESS

Slide 9

Slide 9 text

@livmadsen Meet me in the browser OMG, THE LIES! WHAT HAPPENED?

Slide 10

Slide 10 text

@livmadsen Meet me in the browser LESS “TADAA” PRESENTATIONS MORE DIALOGUE

Slide 11

Slide 11 text

@livmadsen Meet me in the browser DESIGN AND DEVELOPMENT ARE NOT SEPARATE THINGS

Slide 12

Slide 12 text

@livmadsen Meet me in the browser CLEAR STRATEGY & SET GUIDE LINES @livmadsen Meet me in the browser

Slide 13

Slide 13 text

@livmadsen Meet me in the browser DECIDE IN THE BROWSER @livmadsen Meet me in the browser

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

@livmadsen Meet me in the browser WITH THE CONTENT GET COZY

Slide 16

Slide 16 text

@livmadsen Meet me in the browser Kick-start dialogue, lo-fi style Align expectations on style and behaviour DESIGN DELIVERABLES LAYOUT AGNOSTIC

Slide 17

Slide 17 text

@livmadsen Meet me in the browser ELEMENT COLLAGES HTTP://DANIELMALL.COM/ARTICLES/RIF-ELEMENT-COLLAGES/ STYLE TILES HTTP://STYLETIL.ES DESIGN DELIVERABLES LAYOUT AGNOSTIC

Slide 18

Slide 18 text

@livmadsen Meet me in the browser & ELEMENT LIBRARIES STYLE GUIDES IN THE BROWSER

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

http://bit.ly/tdcss Work in your style guide Light-weight, instant response No server-side dependencies

Slide 21

Slide 21 text

@livmadsen Meet me in the browser Small teaser in list Large teaser in list Large teaser alone ELEMENT LIBRARIES

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

@livmadsen Meet me in the browser .liquid files for layouts templates includes HTML TEMPLATING WITH LIQUID

Slide 26

Slide 26 text

@livmadsen Meet me in the browser ... {% include "resources/navigation" %}
{% block content %}{% endblock %}
{% block secondarycontent %} {% endblock %} ... in include file “navigation” navigation in layout file ... Home Model example ...

Slide 27

Slide 27 text

@livmadsen Meet me in the browser ... {% include "resources/navigation" %}
{% block content %}{% endblock %}
{% block secondarycontent %} {% endblock %} ... {% block content %}

Hello, world!

This is main content

{% endblock %} {% block secondarycontent %} Oh, Hello again! {% endblock %} in layout file in template file “content” “secondary content”

Slide 28

Slide 28 text

@livmadsen Meet me in the browser JSON MODEL CONTENT - helping developers work Content First since 1873 in

Slide 29

Slide 29 text

@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 file _global.json

Slide 30

Slide 30 text

@livmadsen Meet me in the browser elements.liquid (tdcss) {{ kitten.name }} {{ kitten.type }} teaser--small.liquid (block)

All our kittens

{% for kitten in global.kittens %} {% include "blocks/teaser--small" %} {% endfor %}

Slide 31

Slide 31 text

@livmadsen Meet me in the browser example at http://codegarden.livmadsen.mixture.io/ ELEMENT LIBRARIES WITHOUT THE REPETITION bonus: reuse fixtures for jasmine, your fav style doc generator, etc.

Slide 32

Slide 32 text

@livmadsen Meet me in the browser GAINS & LEARNINGS

Slide 33

Slide 33 text

@livmadsen Meet me in the browser CLEAR STRUCTURE LOW BARRIER IMPROVED TEAM WORK

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

@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

Slide 36

Slide 36 text

@livmadsen Meet me in the browser THE AGILE APPROACH *IS* HANDLING RISK

Slide 37

Slide 37 text

@livmadsen Meet me in the browser OTHER MENTIONABLES

Slide 38

Slide 38 text

@livmadsen Meet me in the browser ANY QUESTIONS?