the future is in pieces
TRANSCRIPT
![Page 1: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/1.jpg)
Web Unleashed — September 16, 2015
The Future is in pieces
![Page 2: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/2.jpg)
![Page 3: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/3.jpg)
![Page 4: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/4.jpg)
Wired Redesign (2002)
![Page 5: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/5.jpg)
Simple Blog Designs
![Page 6: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/6.jpg)
Coding like it’s 2003#header h1, #header h2 { font-size:13px; font-weigh… }#header h1 { color: #680; float:right; padding-b…}#header h2 { float:left; padding:18px 20px; posi…}#header h2 img { position:absolute; left:0; top:0; }#header h2 a { text-decoration:none; color:#333; }
#main h2 {text-transform:uppercase; font-weight:…}#main h2 a {text-decoration:none; color:#444;}#main h2 a:hover {color:#680;}
#main .article.inside h1 { text-transform:uppercase;…}#comments .comment .meta .authorname { text-transfo… }#comments .comment .meta .commentnumber a { float: … }
![Page 7: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/7.jpg)
Wait what?#comments .comment .meta .authorname { }#comments .comment .meta .commentnumber a { }
![Page 8: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/8.jpg)
Wait what?#comments .comment .meta .authorname { }#comments .comment .meta .commentnumber a { }
![Page 9: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/9.jpg)
![Page 10: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/10.jpg)
![Page 11: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/11.jpg)
![Page 12: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/12.jpg)
![Page 13: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/13.jpg)
![Page 14: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/14.jpg)
![Page 15: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/15.jpg)
![Page 16: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/16.jpg)
![Page 17: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/17.jpg)
Patterns
![Page 18: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/18.jpg)
![Page 19: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/19.jpg)
![Page 20: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/20.jpg)
![Page 21: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/21.jpg)
![Page 22: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/22.jpg)
![Page 23: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/23.jpg)
![Page 24: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/24.jpg)
![Page 25: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/25.jpg)
Identify and Document Patterns
![Page 26: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/26.jpg)
![Page 27: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/27.jpg)
<div>
![Page 28: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/28.jpg)
<div>
![Page 29: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/29.jpg)
? { }
![Page 30: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/30.jpg)
Categorization
![Page 31: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/31.jpg)
Categorization
Base
Layout
ModuleState
Theme
![Page 32: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/32.jpg)
![Page 33: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/33.jpg)
Sidebar Content
Header
![Page 34: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/34.jpg)
<div class="layout-header">
![Page 35: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/35.jpg)
Customized List
Button
Tabs
![Page 36: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/36.jpg)
<ul class="tabs">
![Page 37: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/37.jpg)
Large
Search
Dark
Small
![Page 38: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/38.jpg)
<button class="button button-dark">
![Page 39: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/39.jpg)
![Page 40: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/40.jpg)
<div class=“modal”> <div class=“modal--header”></div> <div class=“modal--body”></div> <div class=“modal--footer”></div></div>
![Page 41: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/41.jpg)
Naming Convention
❖ .btn❖ .btn-variation❖ .btn--component
❖ .btn❖ .btn--variation❖ .btn__component
![Page 42: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/42.jpg)
![Page 43: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/43.jpg)
.modal > .btn
![Page 44: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/44.jpg)
.modal > .btn
![Page 45: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/45.jpg)
.btn-slim
![Page 46: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/46.jpg)
All the things// Modules // --------------------------------------- @import "btn"; @import "img"; @import "layout"; @import "nav"; @import "tables"; @import "forms"; @import "section"; @import "fluid_container"; @import "table_filter"; @import "modal"; @import "dropdown"; @import "flags"; @import "progress"; @import "arrows"; @import "box";
![Page 47: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/47.jpg)
All the thingsbtn.mu img.mu layout.mu nav.mu table.mu forms.mu section.mu fluid_container.mu table_filter.mu modal.mu dropdown.mu flags.mu progress.mu arrows.mu box.mu
![Page 48: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/48.jpg)
All the things<!-- btn.mu -->
<button class="btn">{{button}}</button>
![Page 49: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/49.jpg)
Components
JSON
CSSTemplate
HTML
JavaScriptl11n
![Page 50: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/50.jpg)
React ComponentsReact.render( <Video onError={ onError } videoId={ videoId } /> );
![Page 51: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/51.jpg)
React Components<div class='vimeo'> <div class='vimeo-loading'> <svg>...</svg> </div> <div class='vimeo-image'> <button type='button' class='vimeo-play-button'> <svg>...</svg> </button> </div> <div class='video-embed'> <iframe>...</iframe> </div> </div>
![Page 52: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/52.jpg)
Web Components<gold-cc-cvc-input card-type="amex"> </gold-cc-cvc-input>
![Page 53: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/53.jpg)
Web Components <style> :host { display: block; } iron-icon { margin-left: 10px; } </style>
<template> <paper-input-container id="container" disabled$="[[disabled]]" no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" invalid="[[invalid]]"> <label hidden$=“[[!label]]">[[label]]</label> </template>
![Page 54: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/54.jpg)
“I’m so alone.”
![Page 55: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/55.jpg)
Give a hoot.
![Page 56: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/56.jpg)
* + *
![Page 57: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/57.jpg)
Give a hoot.Don’t pollute
…the global namespace.
![Page 58: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/58.jpg)
.btn + .btn.card + .card.input + .input
![Page 59: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/59.jpg)
.input + .btn ?
![Page 60: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/60.jpg)
Helpers
![Page 61: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/61.jpg)
.layout-spacer {}.m5 / .m10 / .mi6
![Page 62: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/62.jpg)
Media queries killed the modular star
![Page 63: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/63.jpg)
![Page 64: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/64.jpg)
If Module A in Module B in Layout C Then I’m fucked.
![Page 65: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/65.jpg)
If I have this much room, do this.
![Page 66: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/66.jpg)
Element Queries
![Page 67: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/67.jpg)
Element Queries
![Page 68: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/68.jpg)
“Element Query” declarations in JavaScript or in HTML, not in CSS
![Page 69: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/69.jpg)
![Page 70: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/70.jpg)
❖ I honestly didn't think you could even USE emoji in variable names. Or that there were so many different crying ones.
![Page 71: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/71.jpg)
<div class="😭">help me</div>.😭 { color: red; font-size: 100px; }
![Page 72: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/72.jpg)
Create Standards For Your CSS
![Page 73: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/73.jpg)
Code Review Your CSS
![Page 74: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/74.jpg)
Styleguides.io
![Page 75: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/75.jpg)
Patternlab.io
![Page 76: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/76.jpg)
Shopify Style Guide
![Page 77: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/77.jpg)
![Page 78: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/78.jpg)
Patterns
❖ Create a conversation around what exceptions should or should not exist
❖ Create a conversation around what components should or should not exist
![Page 79: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/79.jpg)
The Future is in Pieces
❖ Move towards composable UIs
❖ Ensure your modules are self-contained
❖ Frameworks like React are making this easier
❖ Communicate!
![Page 80: The Future is in Pieces](https://reader035.vdocument.in/reader035/viewer/2022062903/58ec80b61a28abf6188b457b/html5/thumbnails/80.jpg)