DesignOps: Removing Friction from Your Front-end Development Workflow

DesignOps: Removing friction from your front-end development workflow Jessica Allen
by

Title Text san francisco

beep! beep

I do like comics

Title Text macarons + photodecora

kitty cats I’m going to pair with you today. Problem?

decora + kitty cats??

baby unicorns

Get excited and make things!

jessconf

jessconf for developers named Jessica

@jessicard @jlsuttles @jessicag me (in disguise)

*not pictured @jessicaspacekat*

Engine Yard is a place to host and scale your
web apps.

Business Time

This place is f’reals

@ejgreenberg “omg I stayed there!”

why is this so hard?!

there are... ways to make it better

keeping it real

small tweaks & as-you-go improvements

design-friendly dev environment

Production Development &

Development UI Production UI application real user data

mocked data Development UI + Application Production UI + Application
real user data

mocked customers

mocked customers new user

mocked customers new user small customer

mocked customers new user small customer medium customer

mocked customers new user small customer medium customer large customer

mocked customers new user small customer medium customer large customer
crazy customer

⌘S ⌘tab ⌘R

save on your way out

save on your way out “[text editor] save on focus
lost”

gem ‘xray-rails’

don’t break production

(unobtrusive) safety goggles.

// before // after %body{:class => Rails.env} %body Rails app
haml

<body class=”development”> resulting page html

body { min-width: 960px; background: transparent url(/images/layout/bg_sky.png) top left repeat-x;
// Add a visual banner to the top corner for dev mode &.development { &:after { position: fixed; content: 'development'; background-color: hsl(295, 77%, 74%); @include rotate(-45deg); white-space: nowrap; top: 26px; left: -50px; width: 200px; padding: 10px 0; text-align: center; color: $color_white; font-size: 14px; } } } Rails app sass

- if Rails.env.development? %link(rel="shortcut icon" href="/favicon-dev.png") - else %link(rel="shortcut icon"
href="/favicon.ico") Rails app haml

kid gloves.

tests that don’t suck.

new hotness

you got this

test breaker

all. the. time.

ul.block.instance-role Rails app haml

ul.block.instance-role Rails app haml what is this class “.instance-role” ?

ul.block.instance-role Rails app haml // before // after ul.block

ul.block.instance-role Rails app haml // before // after ul.block heck
yeah concise!

Failure/Error: response.should have_selector(".instance-role") expected css ".instance-role" to return something

Failure/Error: response.should have_selector(".instance-role") expected css ".instance-role" to return something oh
come on!

html css tests page.should have_selector(".instance-role") <div class=“instance-role”> .instance-role { padding:
10px; } .instance-role gets around

html css tests <div class=“header”> .header { padding: 10px; }
.instance-role gets around page.should have_selector(".instance-role")

html css tests page.should have_selector( "[data-purpose='instance-role']") <div class=“header” data-purpose=“instance-role” >
.header { padding: 10px; } data-purpose for tests

surviving the sprite-pocalypse

ahhhhhh!

ahhhhhhhhhhhh hhhhhhhhhhhhh hhhhhhhhhhhh!

photoshop? no thank you

webfont icons

color size crispness

%button %span.picons-settings Settings Rails app haml

old new!

.arrow-down { display: inline-block; width: 0; height: 0; border-left: 5px
solid transparent; border-right: 5px solid transparent; border-top: 5px solid grey; border-bottom: none; } css css-tricks.com/snippets/css/css-triangle/

CSS frameworks

the good parts

the good parts •hell yeah grid systems

the good parts •hell yeah grid systems •mobile-responsive

the good parts •hell yeah grid systems •mobile-responsive •prototyping

the good parts •hell yeah grid systems •mobile-responsive •prototyping •living
style guide

the good parts •hell yeah grid systems •mobile-responsive •prototyping •living
style guide •great starting point

less good parts

less good parts •xtra css

less good parts •xtra css •limits your expression

less good parts •xtra css •limits your expression •looks familiar

style guide maintenance

so...you need a dropdown?

JavaScript

live demo JavaScript

live demo code snippet JavaScript

live demo code snippet JavaScript variations

sharing tools with your back-end comrades

$ git branch moar-sparklez

$ git pull $ git checkout -b “moar-sparklez” make rad
design changes here $ git add -p $ git commit -m “sparklier pages” $ git push origin moar-sparklez

Propane for Campfire + CloudApp + Dropbox sharing images

ye olde whiteboard

@lanejoshlane “Hey that looks... familiar”

big picture feedback

details in code

like form interaction

...and integration

big small

Make it pretty

everyone has an opinion, but...

customers are experts in what sucks about your UI everyone
has an opinion, but...

colleagues doing customer support

colleagues doing customer support are experts in what sucks about
your UI

UX Office Hours

•stay user-centric

•stay user-centric •prioritize customer needs

•stay user-centric •prioritize customer needs •new feature planning

quick recap

clean up as you go

develop with real(alistic) users

“save on focus lost”

visual diﬀerence development

ﬂexible tests with data attributes

web fonts Ps

CSS frameworks 1 1 1 1 1 1 1 1

tend your style guide

shared tools

new feature planning

@jessicaspacekat thanks! Oﬃce Hours at 1:45pm East Lounge (Table A)

DesignOps: Removing Friction from Your Front-en...

DesignOps: Removing Friction from Your Front-end Development Workflow

More Decks by jessicaspacekat

Other Decks in Programming

Featured

Transcript