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

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 of Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.

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