lean frontend development
TRANSCRIPT
13.02.2015 – wedebs - #brainpirlo
ABOUT USMatteo Guidotto – Twitter: @j8matteoPM, UX & Frontend Developer, Agile Lover matteoguidotto.com
Marco Solazzi – Twitter: @dwightjackFrontend Web Developer - github.com/dwightjack/
ADVANTAGES:
• WON’T CLUTTER YOUR CODEBASE WITH TEST CODE• CLEAN / SANBOXED ENVIRONMENT IN NO TIME• SHARE AND TEST ON MULTIPLE BROWSERS/DEVICES• GREAT FOR PROTOTYPING• WIDE SUPPORT FOR YOUR PREFERRED STACK
“Everything is acompound thing”
First Modular Development
Master in history
“Everything is a compound thing”
First Modular Development
Master in History
CROSSFUNCTIONAL FRONTEND TEAMS
Semantics + Accessibility(HTML + ARIA)
Presentation(CSS)
Interactivity(JavaScript / BaaS APIs)
BROWSERS ALREADY DO THAT
<input type=”date” required min=”10” max=”100”>
input[type=”date”]::-webkit-datetime-edit-month-field { color: #bada55;}
document.querySelector(‘input[type=”date”]’).checkValidity();
ADVANTAGES:
• shared knowledge base (with teammates and customers)
• every module state and variation is clearly visible• code snippets (how to implement) and visual
output (how it looks)
LIVING STYLEGUIDES/* ========================================================================== Media Object ====
``` <div class="media"> <img src=//placehold.it/150x150 alt="" class="media__image"> <div class="media__wrap"> <h1 class="media__title">Media Title</h1> <p class="media__body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> ``` ========================================================================== */
LIVING STYLEGUIDES/* ========================================================================== Media Object ====
``` <div class="media"> <img src=//placehold.it/150x150 alt="" class="media__image"> <div class="media__wrap"> <h1 class="media__title">Media Title</h1> <p class="media__body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> ``` ========================================================================== */