Embed Size (px)
Citation preview
Making the Web Fireproof: A Building Code for Websites
Dylan Wilbanks MinneWebCon 2015
Web: dylanwilbanks.com Twitter: @dylanw
One caveat: I can’t promise great insight.
Philadelphia.
William Penn
https://www.flickr.com/photos/britishlibrary/11242996635
https://www.flickr.com/photos/valkrye131/3240437070/
http://upload.wikimedia.org/wikipedia/commons/3/32/Fire-Forest.jpg
But is it fireproof?http://upload.wikimedia.org/wikipedia/commons/3/32/Fire-Forest.jpg
Standard sizes, standard practice.
https://www.flickr.com/photos/duiceburger/3312213574/
http://idighardware.com/2010/01/survey-q3-how-can-you-tell-a-fire-door-from-a-regular-door/
Clear rules on what goes into a new building
http://council.seattle.gov/2013/02/11/new-funds-for-preservation/
http://www.districtenergy.org/blog/wp-content/uploads/2013/10/Seattle-SouthLakeUnionAerial_big.jpg
Clear rules on when to retrofit or replace
http://upload.wikimedia.org/wikipedia/commons/a/a3/New_and_Old_Bay_Bridge_(8859593785).jpg
We need a building code for the web.
https://www.flickr.com/photos/tambako/14065508649/
WRONG!https://www.flickr.com/photos/tambako/14065508649/
“Building codes would never work for building code.”
https://www.flickr.com/photos/tambako/14065508649/
“It stifles innovation!”
https://www.flickr.com/photos/tambako/14065508649/
https://www.flickr.com/photos/tambako/14065508649/
BUT!https://www.flickr.com/photos/tambako/14065508649/
https://www.flickr.com/photos/christinyca/15875497176/
“The built environment must be planned in advance!”
“Web development is not pre-planned!”
“Web development is not pre-planned!”
(Usually)
Winchester Mystery House
Every website, every product, every codebase is littered with Doors to Nowhere.
(Yes, even yours.)
Why?
http://upload.wikimedia.org/wikipedia/commons/3/32/Fire-Forest.jpg
Let’s talk debt.http://upload.wikimedia.org/wikipedia/commons/3/32/Fire-Forest.jpg
http://commons.wikimedia.org/wiki/File:Ward_Cunningham_at_Wikimania_2006.jpg
Ward Cunningham
Kinds of debt• Tech debt
• Design debt
• Accessibility debt
• I18N debt
• Security debt
• DevOps debt
Tech debt
• Code upgrades
• Refactoring
• “Temporary” hacks
• TODO
• Not staying up to date
<br />
Why a space?
<br />
Design debt• Usability compromised by lack of testing or cut scope
• Sub-optimal user flows
• Unfinished features
• Mobile Last, Mobile Not, What’s Mobile?
• “Experience rot”
• “Patch and paint” UX solutions instead of “replacing the wall”
Accessibility debt
• Doesn’t work with screen reader
• ARIA hooks not used or set up properly
• Accessibility never tested, never a priority
• “Yes, but are they the 80% case?”
–Developer, (company redacted)
“Six years ago I was asked how long it’d take for me to
internationalize our code base. I said two weeks. But we didn’t have time. Now, it would take
months of work — with multiple developers.”
You will never not have debt.
http://upload.wikimedia.org/wikipedia/commons/3/32/Fire-Forest.jpg
What’s on fire today?http://upload.wikimedia.org/wikipedia/commons/3/32/Fire-Forest.jpg
The Hierarchy of Needs
The Hierarchy of Needs
Shipping working code
The Hierarchy of Needs
Fixing bugs in working code
Shipping working code
The Hierarchy of Needs
New features
Fixing bugs in working code
Shipping working code
The Hierarchy of Needs
Technical debt
New features
Fixing bugs in working code
Shipping working code
The Hierarchy of Needs
Technical debt
New features
Fixing bugs in working code
Shipping working code
The Hierarchy of Needs
Technical debt
New features
Fixing bugs in working code
Shipping working codeMONEY
The Hierarchy of Needs
Technical debt
New features
Fixing bugs in working code
Shipping working code
MOAR MONEY!
MONEY
The Hierarchy of Needs
Technical debt
New features
Fixing bugs in working code
Shipping working code
MAKE IT RAAAAAAAAIN
MOAR MONEY!
MONEY
The Hierarchy of Needs
Technical debt
New features
Fixing bugs in working code
Shipping working code
No Money, Many Problems
MAKE IT RAAAAAAAAIN
MOAR MONEY!
MONEY
Resources vs. Revenue
Worst of all, it’s not just your debt.
Worst of all, it’s not just your debt.
To sum up…• Poor architecture kills velocity and sales
• We always have to keep up with change in market, device, user
• Not planning for internationalization is costly
• Security mistakes cost us money (and face)
• Bad accessibility costs us face (and money)
• You take on the debt of everyone else’s code you use
We need a building code for the web.
Not web standards, web practice.
What would it look like?• Design first, prototype second
• Best practices for security, accessibility, internationalization
• Have a rigorous plan for refactoring and paying down tech debt
• “Build to last, build to destroy”
So why aren’t we doing it?
There’s no such thing as a local fire on the Internet.
Who should do it?
Who should do it?
Yeah, I don’t know either.
https://www.flickr.com/photos/tambako/14065508649/
I WIN!https://www.flickr.com/photos/tambako/14065508649/
What can you do?
1. Plan, plan, plan.
The Spreadsheet
Defining the damn thing saves us headaches every time.
2. Codify.
StoryCore
StoryCore• Bootstrap for applications
• Sets the nuts and bolts pieces in place for a basic web application
• Import stories into your bug tracker of choice
• Build in key user experience requirements
• Accessibility and security acceptance criteria
Organizational Buy-In
Diplomacy (That’s another talk)
3. Think small.
4. Embrace impermanence through prototyping.
Prototyping != Building
https://www.flickr.com/photos/seattlemunicipalarchives/3809445908/
Build to destroy.
https://www.flickr.com/photos/seattlemunicipalarchives/3809445908/
5. Demand better frameworks, not more frameworks
https://xkcd.com/927/
(and frameworks)
We must hold frameworks makers accountable.
http://upload.wikimedia.org/wikipedia/commons/3/32/Fire-Forest.jpg
But… fireproof?http://upload.wikimedia.org/wikipedia/commons/3/32/Fire-Forest.jpg
https://www.flickr.com/photos/brewbooks/259421447/
Building codes do not save us from bad design.
With a code, you can choose the right doors to nowhere
Thank you.Dylan Wilbanks
Web: dylanwilbanks.com Twitter: @dylanw
And other fine social media networks
