building & scaling a front end practice & team
TRANSCRIPT
WTFED?• HTML • CSS • JavaScript • Node/WebPack/Sass/Gulp/PostCSS/jQuery/CoffeeScript/
a11y/Bourbon/SVG/Bower/npm/React/Animations/ AMP/PWA/Responsive/Angular/Data Viz/BEM/Performance/TypeScript/Ember/Browserify/OOCSS
•inconsistent or even buggy UI • spaghetti code • hard to maintain & iterate • not accessible/performant/responsive
1. Language Styleguides• shared coding standards • consistency is key • helps team members read each other’s code • helps you read your own code 6 months from now
http://cssguidelin.es/ http://sass-guidelin.es/ https://github.com/Shopify/javascript https://github.com/rwaldron/idiomatic.js/ https://google.github.io/styleguide/javascriptguide.xml
Borrow one to start
• support & grow your guide • standards to make things easier
• if hard to enforce, it might not be useful • shared definition of quality
2. Code Reviews
• support & grow your guide • standards to make things easier
• if hard to enforce, it might not be useful • shared definition of quality • builds a culture of feedback and knowledge sharing
2. Code Reviews
Pattern Libraries• a way to pool our efforts • make it possible to share code automatically • a starting point for new projects
What might you include?• A common stack(s) • responsive guidelines - easy defaults for breakpoints,
flexible grids, starting points for styling and behavior, testing standards
• performance standards & language tooling
• accessibility best practices
UI library• core application patterns, built in a reusable way • solve for our use cases
• opinionated • provide constraints • custom to our stack
Why bother?• we solve problems once* • more people can contribute • more time on most impactful features
Why bother?• we solve problems once* • more people can contribute • more time on most impactful features
#FED Talks• talk about standards • talk about common problems • share work from in and out of day-to-day
prototyper
CSS developer
performance specialist
accessibility expert
web animator
JS data engineer
interaction engineer
future framework X engineer
Design App Dev*