building & scaling a front end practice & team
TRANSCRIPT
B U I L D I N G A F R O N T E N D P R A C T I C E & T E A M
Scaling FED
• Definitions of FED • Building a Craft • Building a Culture
Today
1 - Defining FEDHey Fronteers, what do you do?
WTFED?• HTML • CSS • JavaScript
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
CHAOS?
Design App Dev*
HTML CSS JS Design App Dev*
User Interfaces Design App Dev*
•inconsistent or even buggy UI • spaghetti code • hard to maintain & iterate • not accessible/performant/responsive
HTML CSS
JS Design App Dev*
😍
💖
Owners on a spectrum
FED Design App Dev*
Owners on a spectrum
FED Design App Dev*
💃🏃
Building a Craft1. Language Styleguides 2. Code Reviews 3. Pattern Libraries
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
Form an opinion
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
💬💬
🎉
🍕🍕
2. Code Reviews
…or use a linter - eshint, scss-lint
• 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
• burning existing code isn’t usually an option
• 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
Growing Into Reusable SystemsPattern Libraries
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
Accessibility• colour contrast audits in a single place
Accessibility• JS helpers for common a11y fixes
• eg keycodes & focus handlers
Full UI components• common UI for re-use
UI library• core application patterns, built in a reusable way • solve for our use cases
• opinionated • provide constraints • custom to our stack
Hi! I’m an icon that comes alongwith some text⚡ ⚡Me Too!
something special
⚡Me Too!
Hi! I’m an icon that comes alongwith some text⚡ ⚡Me Too!
something special
⚡Me Too!
is this a pattern?
how should it be built?
FED Design App Dev*
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
Design FED
Iteration
Build
Review
Teach
Building a Culture
How does your team make decisions?
Expectations & Hiring
Have more conversations
#FED Talks• talk about standards • talk about common problems • share work from in and out of day-to-day
FED Design App Dev*
Continuing to Scale
prototyper
CSS developer
performance specialist
accessibility expert
web animator
JS data engineer
interaction engineer
future framework X engineer
Design App Dev*
HTML CSS
JS Design App Dev*
Find and follow opportunities for impact
what do you want to grow?
