Making the Web Fireproof: A Building Code for Websites
•
92 j'aime•12,473 vues
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? We will talk about the lessons of building codes and what we can do today to build more robust web applications and sites, including: - The need for design patterns in websites - The need for patterns in user stories so that we build websites consistently - Baking accessibility into websites comes from putting accessibility into user stories - Planning a web application is different from planning a building, but it does share similar aspects of work - The better we can becoming at creating best practices (building codes) the better we will get at building sites, and the closer we will come to Berners-Lee’s “one web for all” dream Presented at MinneWebCon 2015.
Recommandé
Contenu connexe
En vedette
En vedette (10)
Similaire à Making the Web Fireproof: A Building Code for Websites
Similaire à Making the Web Fireproof: A Building Code for Websites (20)
Dernier
Dernier (12)
Making the Web Fireproof: A Building Code for Websites
- 1. Making the Web Fireproof: A Building Code for Websites Dylan Wilbanks MinneWebCon 2015 Web: dylanwilbanks.com Twitter: @dylanw
- 2. One caveat: I can’t promise great insight.
- 6. William Penn
- 13. But is it fireproof? http://upload.wikimedia.org/wikipedia/commons/3/32/Fire-Forest.jpg
- 24. Clear rules on what goes into a new building
- 26. http://www.districtenergy.org/blog/wp-content/uploads/2013/10/Seattle-SouthLakeUnionAerial_big.jpg
- 27. Clear rules on when to retrofit or replace
- 31. We need a building code for the web.
- 34. “Building codes would never work for building code.” https://www.flickr.com/photos/tambako/14065508649/
- 41. https://www.flickr.com/photos/christinyca/15875497176/ “The built environment must be planned in advance!”
- 42. “Web development is not pre-planned!”
- 43. “Web development is not pre-planned!” (Usually)
- 47. Every website, every product, every codebase is littered with Doors to Nowhere. (Yes, even yours.)
- 49. Why?
- 53. Kinds of debt • Tech debt • Design debt • Accessibility debt • I18N debt • Security debt • DevOps debt
- 54. Tech debt • Code upgrades • Refactoring • “Temporary” hacks • TODO • Not staying up to date
- 55. <br />
- 56. Why a space? <br />
- 58. 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”
- 60. 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?”
- 62. –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.”
- 63. You will never not have debt.
- 65. What’s on fire today? http://upload.wikimedia.org/wikipedia/commons/3/32/Fire-Forest.jpg
- 66. The Hierarchy of Needs
- 67. The Hierarchy of Needs Shipping working code
- 68. The Hierarchy of Needs Fixing bugs in working code Shipping working code
- 69. The Hierarchy of Needs New features Fixing bugs in working code Shipping working code
- 70. The Hierarchy of Needs Technical debt New features Fixing bugs in working code Shipping working code
- 71. The Hierarchy of Needs Technical debt New features Fixing bugs in working code Shipping working code
- 72. The Hierarchy of Needs Technical debt New features Fixing bugs in working code Shipping working codeMONEY
- 73. The Hierarchy of Needs Technical debt New features Fixing bugs in working code Shipping working code MOAR MONEY! MONEY
- 74. The Hierarchy of Needs Technical debt New features Fixing bugs in working code Shipping working code MAKE IT RAAAAAAAAIN MOAR MONEY! MONEY
- 75. 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
- 77. Worst of all, it’s not just your debt.
- 78. Worst of all, it’s not just your debt.
- 79. 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
- 82. We need a building code for the web.
- 84. Not web standards, web practice.
- 86. 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”
- 87. So why aren’t we doing it?
- 90. There’s no such thing as a local fire on the Internet.
- 91. Who should do it?
- 92. Who should do it? Yeah, I don’t know either.
- 95. What can you do?
- 96. 1. Plan, plan, plan.
- 98. The Spreadsheet
- 102. Defining the damn thing saves us headaches every time.
- 103. 2. Codify.
- 104. StoryCore
- 107. 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
- 110. 3. Think small.
- 112. 4. Embrace impermanence through prototyping.
- 119. 5. Demand better frameworks, not more frameworks
- 123. We must hold frameworks makers accountable.
- 128. Building codes do not save us from bad design.
- 130. With a code, you can choose the right doors to nowhere
- 133. Thank you. Dylan Wilbanks Web: dylanwilbanks.com Twitter: @dylanw And other fine social media networks