open web camp 2014: on fireproof, future-proof, failure-proof things

64
On Fireproof, Future-Proof, Failure-Proof Things. Dylan Wilbanks OpenWebCamp VI, July 2014 Web: dylanwilbanks.com Twitter: @dylanw

Upload: dylan-wilbanks

Post on 31-Oct-2014

637 views

Category:

Internet


0 download

DESCRIPTION

The moment we start creating a website, we’re setting ourselves up for failure later. Bad code creates middle of the night fire drills. Lack of thinking about accessibility gets our employer sued. Not thinking ahead on mobile generates rework. We accept this as the normal course of business — but is there any way we could prevent (or lower) this cost? Is there anything we can learn from the building codes that dictate how our built environment is constructed? A quick tour of how we got where we are with the web, and perhaps some valuable takeaway points.

TRANSCRIPT

Page 1: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

On Fireproof, Future-Proof, Failure-Proof Things.

Dylan Wilbanks OpenWebCamp VI, July 2014

!

Web: dylanwilbanks.com Twitter: @dylanw

Page 2: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

Two huge caveats.

Page 3: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

1. I have (almost) no answers.

2. I have (almost) no takeaways.

Page 4: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

Philadelphia.

Page 5: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

https://www.flickr.com/photos/lschreur/101326235/

Page 6: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

https://www.flickr.com/photos/ericsbinaryworld/130500981/

Page 7: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 8: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 9: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 10: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

Fireproof?

Page 11: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

http://www.sonofthesouth.net/leefoundation/civil-war/1865/february/philadelphia-fire.htm

Page 12: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 13: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 14: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 15: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

What about the web?

Page 16: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

“Building codes would never work for building code.”

Page 17: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

“It’s different!”

Page 18: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

“The built environment is planned!”

Page 19: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

https://www.flickr.com/photos/structures-nyc-photos/5595474378/

Page 20: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

“Development is not pre-planned!”

Page 21: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 22: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 23: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

“What’s on fire today?”

Page 24: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

The Hierarchy of Startup Code Needs

Technical debt

New features

Fixing bugs in working code

Shipping working code

Page 25: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

The Hierarchy of Startup Code Needs

No Money, Many Problems

MAKE IT RAAAAAAAAIN

MOAR MONEY!

MONEY

Page 26: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

Let’s talk debt.

Page 27: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

http://commons.wikimedia.org/wiki/File:Ward_Cunningham_at_Wikimania_2006.jpg

Page 28: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

–Developer, Apptio

“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 do it. Now, it would take months of work — with

multiple developers.”

Page 29: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

Kinds of debt• Technical debt

• Design debt

• Accessibility debt

• I18N debt

• Security debt

• DevOps debt

Page 30: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

Tech debt

• Code upgrades

• Refactoring

• “Temporary” hacks

• TODO

• Not staying up to date

Page 31: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

Design debt• Poor usability

• Sub-optimal user flows

• Mobile Last, Mobile Not, What’s Mobile?

• “Experience rot”

• “Patch and paint” UX solutions instead of “replacing the wall”

Page 32: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

Accessibility debt

• Doesn’t work with screen reader

• ARIA hooks not used for AJAX-based sites

• Accessibility never tested, never a priority

• “Yes, but are they the 80% case?”

Page 33: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 34: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

You will never not have debt.

Page 35: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

Resources vs. Revenue

Page 36: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 37: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

But…• Poor architecture kills velocity and sales

• We always have to keep up with change in market, device, user

• Not planning for I18N is costly

• Bad security mistakes cost us money (and face)

• Bad accessibility costs us face (and money)

Page 38: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 39: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

What do we do?

Page 40: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

We need a building code for the web.

Page 41: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

Clear rules: Retrofit, replace, new construction

Page 42: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 43: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

http://upload.wikimedia.org/wikipedia/commons/a/a3/New_and_Old_Bay_Bridge_(8859593785).jpg

Page 44: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

http://www.districtenergy.org/blog/wp-content/uploads/2013/10/Seattle-SouthLakeUnionAerial_big.jpg

Page 45: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

Standard sizes, standard practice.

Page 46: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

https://www.flickr.com/photos/duiceburger/3312213574/

Page 47: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 48: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

http://idighardware.com/2010/01/survey-q3-how-can-you-tell-a-fire-door-from-a-regular-door/

Page 49: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 50: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

Beyond web standards, beyond frameworks,

it’s practice.

Page 51: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 52: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

What can we do?

Page 53: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

My little part for UX

Page 54: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

StoryCore

2014 Home Edition Live* 365! (pre-alpha preview)

Page 55: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 56: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 57: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

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

Page 58: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

Available… soonish.

Page 59: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

What are you going to do?

Page 60: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

Kinds of debt• Tech debt

• Design debt

• Accessibility debt

• I18N debt

• Security debt

• DevOps debt

Page 61: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 62: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 63: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things
Page 64: Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things

Thank you.

Dylan Wilbanks Web: dylanwilbanks.com

Twitter: @dylanw And other fine social media networks