Articles, Links, and Tools From An Event Apart Seattle: Special Edition 2018
An in-progress compendium of resources direct from our speakers at An Event Apart Seattle: Special Edition.
Community Reaction
- Session Notes by Torre Capistran of Hooked on Code
- Live-blogging An Event Apart Seattle from Jeremy Keith
- What is Intrinsic Web Design?, a short video by Peter Anglea of Helix Education
Jeffrey Zeldman
- Beyond Engagement: the Content Performance Quotient
- No More FAQs: Create Purposeful Information for a More Effective User Experience by Lisa Wright
- The King vs. Pawn Game of UI Design by Erik Kennedy
- Why Performance Matters by Jeremy Wagner
- Marlboro Man (Wikipedia)
- @DesignCPQ on Twitter
- Performance: Showing Versus Telling by Laura Hogan
- Planning for Performance by Scott Jehl
- We need design that is faster and design that is slower.
- Art Direction and the Web by Stephen Hay
- Large Type: One Web Designer Puts Content First in a Big Way by Anthony Wing Kosner
- Authoritative, Readable, Branded: Report From Poynter Design Challenge, Part 2
- To Save Real News
- The Big Web Show № 171: Art Directing the News – with ProPublica Design Director David Sleight
- Top Task Management: Making it Easier to Prioritize by Gerry McGovern—An Event Apart video
- Organizing Mobile by Luke Wroblewski
- Redesigning in Public Again
- The Year in Design
Rachel Andrew
- Code Collection of examples used
- CSS Grid Specification
- Flexbox Specification
- Box Alignment Specification
- CSS Intrinsic and Extrinsic Sizing Specification
- Grid by Example
- CSS Grid documentation on MDN
- Mozilla CSS Grid playground
- CSS Grid Gotchas and Stumbling Blocks
- Naming Things in CSS Grid Layout
- Breaking out with CSS Grid Explained
- CSS Grid Fallbacks and Overrides Cheatsheet
- Should I try to use the IE implementation of Grid Layout
- Using Feature Queries in CSS
- CSS Grid - Supporting browsers without grid
- Naming things in CSS Grid Layout
- MDN Flexbox docs
Eric Meyer
- CSS Conditional Rules Module Level 3
- Picture credit: Innerbelt Bridge by Erik Drost, used under the terms of CC BY 2.0; minor straightening and color enhancement applied
- CSS:TDG4e Table of Contents
- CSS Flexible Box Layout Module Level 1
- Speaker pages:
- An Event Apart San Francisco 2018 store page (note: page will expire December 2018)
- CSS Grid Layout Module Level 1
- How We Adopted CSS Grid at Scale
Jen Simmons
- Layout Land on YouTube
- Layout Land
- Jen Simmons
- @jensimmons
- Firefox Nightly
- Example 1, HTML Flow only
- Example 2, Fluid Web Design
- Example 2.5, Fluid Web Design
- Example 3, Fixed Web Design
- Example 4, Responsive Web Design
- Example 5, Intrinsic Web Design
- Example of Image Options
- Stages of Squish
- Nesting Contexts
- Teaser card
- Multiple Teaser Card nested in a Grid layout
Jeremy Keith
Further Reading
- Pace Layering: How Complex Systems Learn and Keep Learning by Stewart Brand
- The Human Computer's Dreams Of The Future (PDF) by Ida Rhodes
- 3D Glasses On Reality by Kim Stanley Robinson
- The Rule of Least Power by Tim Berners-Lee and Noah Mendelsohn
- Everything Easy Is Hard Again by Frank Chimero
- Over-engineering is under-engineering by Baldur Bjarnason
- The Burden of Precision by Daniel Eden
- The work I like by Ethan Marcotte
- A Sound Of Thunder (PDF) by Ray Bradbury
Related posts on adactio.com
- 02018-03-06 Minimal viable service worker
- 02017-12-23 Ubiquity and consistency
- 02017-11-02 The dConstruct Audio Archive works offline
- 02017-03-15 Progressive Web App questions
- 02017-01-11 Making Resilient Web Design work offline
- 02016-10-18 Choice
- 02015-11-15 Home Screen
Progressive Web Apps
Books
- Make It So by Nathan Shedroff and Christopher Noessel
- How Buildings Learn by Stewart Brand
- Time Travel by James Gleick
Films
- Plan Nine From Outer Space, 1959, directed by Ed Wood
- 2001: A Space Odyssey), 1968, directed by Stanley Kubrick
- Blade Runner, 1982, directed by Ridley Scott
- Brazil), 1985, directed by Terry Gilliam
- Southland Tales, 2006, directed by Richard Kelly
Aaron Gustafson
- You Are @ 10K Apart
- Resource Hints: dns-prefetch, preconnect, prefetch, preload and prerender
- Preload, Prefetch And Priorities in Chrome
- Web Font Anti-Pattern: Aggressive subsetting
- Easy Navigation, Speed Are Leading Website Performance Attributes
- How Loading Time Affects Your Bottom Line
- How Page Load Time Affects Conversion Rates: 12 Case Studies
- Research: Performance Impact of Popular JavaScript MVC Frameworks
- Vanilla JS
- The Best Request Is No Request, Revisited
- HTTP/2: the Future of the Internet | Akamai
- The Growth of Web Page Size
- Not every article needs a picture
Lara Hogan
- Tuckman’s stages of group development - Wikipedia
- Paloma Medina's BICEPS model
- Dealing with surprising human emotions: desk moves
- Etsy’s Charter of Mindful Communication
- Amy Ciavolino's Mindful Communication in Code Reviews
- Team Leader Venn Diagram – Making Meetup
- The Five Dysfunctions of a Team - Wikipedia
- Mike Morgan's Two by Two: Trust and disagreement
Luke Wroblewski
- Facebook Mobile App navigation menus:
- Ten Years of eBay Android App Design
- 30 Years of Adobe Illustrator Design
- How People Unmask Passwords
- Remove password masking
- Showing Passwords on Log-In Screens
- Mobile DropDowns Revisited
- Smartphones, iPads & the state of the mobile Internet
- How Often Do You Check Your Phone?
- We touch our phones 2,617 times a day
- What do you dislike most when browsing Web on mobile?
- Designing for Apple Watch
- Designers Shaping Things
Jason Grigsby
Case Studies
- PWA Stats
- Google Case Studies
- WEGO Case Study Video
- Why does The Washington Post’s Progressive Web App increase engagement on iOS?
- Flipkart triples time-on-site with Progressive Web App
- Konga cuts data usage 92% with new Progressive Web App
- United eXtra Electronics grows eCommerce sales by 100% with Web Push Notifications
- 5miles decreases bounce rate by 50% and increases conversions by 60% with new Progressive Web App
- AliExpress saw 82% increase in iOS conversion rate
- Total Retailer: Why All Retailers Need to Be Aware of PWAs
- Digiday: With new mobile site, Forbes boosted impressions per session by 10 percent
- Lancôme speeds its mobile site with Google’s progressive web apps
- A Pinterest Progressive Web App Performance Case Study
Progressive Web App Definitions
- What the heck is "Progresive Web App"? Seriously.
- Progressive Web Apps: Escaping Tabs Without Losing Our Soul — Where Frances Berriman and Alex Russell define Progressive Web Apps for the first time.
- Progressive Web Apps at Google
- Naming Progressive Web Apps by Frances Berriman
- A Brief History of How PWAs Came to Be a Twitter moments thread
- What is a Progressive Web App? by Jeremy Keith
Why Progressive Web Apps?
- Progressive Web Apps Simply Make Sense
- The Business Case for Progressive Web Apps
- Yes, That Web Project Should Be a PWA
- Progressive Web Apps on iOS are here
Making it Feel Like an App
- CSS Tricks Poll Results: “Sites” vs “Apps”
- By any other name
- Designing Great UIs for Progressive Web Apps
- Designing Responsive Progressive Web Apps
- Instant Loading Web Apps With An Application Shell Architecture
- Does Anyone Use Social Sharing Buttons on Mobile?
- Introducing the Web Share API
- Animated SVG Avatar v2
- Proposed Web Share API (experimental)
Installation and Discovery
- MDN Web App Manifest
- Google Developers: Web App Manifest
- PWA Discovery: You Ain’t Seen Nothin Yet
- Progressive web apps and the Windows ecosystem
- Why Are App Install Banners Still A Thing?
- Integrating Progressive Web Apps deeply into Android
- Twitter updates its Windows 10 UWP app to PWA with support for push notifications
- Welcoming Progressive Web Apps to Microsoft Edge and Windows 10
- PWA Builder
- Using Trusted Web Activities
- PhoneGap
Offline
- The Next Billion Users: trivago Embrace Progressive Web Apps as the Future of Mobile
- Offline UX Considerations
- Workbox JS
Push Notifications
- How Consumers Really Feel About Push Notifications
- Best Practices for Push Notifications Permissions UX
- Web Push Notifications: Timely, Relevant, and Precise
- Time to Update Your Permissions UX
- Web Push Book
- Notification Generator
Beyond PWAs
- Accelerated Mobile Project (AMP)
- Combine AMP with Progressive Web Apps
- Bootstrapping Progressive Web Apps with amp-install-serviceworker
- Credential Management API and Google documentation
- Payment Request API and Google documentation
Sample PWAs
- Twitter Lite
- Vaadin Expense Manager Demo
- FlipKart
- English Accent Maps
- Smashing Magazine
- Offline WikiPedia
- Pokedex
- Polymer Shop Demo
- Cloud Four
PWA Galleries
PWA Resources and Tools
Progressive Web App Roadmap
Chris Coyier
Intro
Example of APIs
- Twilio - Communication APIs for SMS, Voice, Video and Authentication
- Flickr Services
- Gallery app with Finite State Machines
Examples of static file hosts
- GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.
- Projects on CodePen
- Netlify: All-in-one platform for automating modern web projects.
- Cloud Object Storage | Store & Retrieve Data Anywhere | Amazon Simple Storage Service
Related to cloud functions
- Webtask
- The Twilio Node Helper Library - Twilio
- Testing Serverless Function with just HTML
- Webtask + Twilio: Send Recipe over SMS
Related to hosted forms
- Google Forms - create and analyze surveys, for free.
- Online Form Builder with Cloud Storage Database | Wufoo
- Online Form Builder & Form Creator for Online Forms | Formstack
- Online Form Builder & Form Creator for Online Forms | Formstack
- Online Form Builder & Form Creator | JotForm
Related to static forms
- FormKeep | Form endpoints for designers and developers
- Formcarry. | no Javascript no PHP just point your form and chill.
- Pageclip
- Forms | Netlify
Related to payments
- PayPal
- Stripe.com - Payment processing for internet businesses
- Braintree Payments
- Credit Card Processing & Payment Gateway: Accept Payments Online – Authorize.Net
- Worldpay | Secure Payment Processing
- Recurring Billing | Subscription Billing Software - Chargify
Related to services on top of payments
Related to rolling your own checkout
- Stripe API Reference
- Vue.js
- Azure Functions—Serverless Architecture | Microsoft Azure
- Creating a Vue.js Serverless Checkout Form: Setup and Testing | CSS-Tricks
- Checkout
- Introducing the Payment Request API | Web Fundamentals
Regarding comment threads
Kristina Halvorson
Jason Pamental
Gerry McGovern
Community Reaction
- Session Notes by Torre Capistran of Hooked on Code
- Live-blogging An Event Apart Seattle from Jeremy Keith
- What is Intrinsic Web Design?, a short video by Peter Anglea of Helix Education
Jeffrey Zeldman
- Beyond Engagement: the Content Performance Quotient
- No More FAQs: Create Purposeful Information for a More Effective User Experience by Lisa Wright
- The King vs. Pawn Game of UI Design by Erik Kennedy
- Why Performance Matters by Jeremy Wagner
- Marlboro Man (Wikipedia)
- @DesignCPQ on Twitter
- Performance: Showing Versus Telling by Laura Hogan
- Planning for Performance by Scott Jehl
- We need design that is faster and design that is slower.
- Art Direction and the Web by Stephen Hay
- Large Type: One Web Designer Puts Content First in a Big Way by Anthony Wing Kosner
- Authoritative, Readable, Branded: Report From Poynter Design Challenge, Part 2
- To Save Real News
- The Big Web Show № 171: Art Directing the News – with ProPublica Design Director David Sleight
- Top Task Management: Making it Easier to Prioritize by Gerry McGovern—An Event Apart video
- Organizing Mobile by Luke Wroblewski
- Redesigning in Public Again
- The Year in Design
Rachel Andrew
- Code Collection of examples used
- CSS Grid Specification
- Flexbox Specification
- Box Alignment Specification
- CSS Intrinsic and Extrinsic Sizing Specification
- Grid by Example
- CSS Grid documentation on MDN
- Mozilla CSS Grid playground
- CSS Grid Gotchas and Stumbling Blocks
- Naming Things in CSS Grid Layout
- Breaking out with CSS Grid Explained
- CSS Grid Fallbacks and Overrides Cheatsheet
- Should I try to use the IE implementation of Grid Layout
- Using Feature Queries in CSS
- CSS Grid - Supporting browsers without grid
- Naming things in CSS Grid Layout
- MDN Flexbox docs
Eric Meyer
- CSS Conditional Rules Module Level 3
- Picture credit: Innerbelt Bridge by Erik Drost, used under the terms of CC BY 2.0; minor straightening and color enhancement applied
- CSS:TDG4e Table of Contents
- CSS Flexible Box Layout Module Level 1
- Speaker pages:
- An Event Apart San Francisco 2018 store page (note: page will expire December 2018)
- CSS Grid Layout Module Level 1
- How We Adopted CSS Grid at Scale
Jen Simmons
- Layout Land on YouTube
- Layout Land
- Jen Simmons
- @jensimmons
- Firefox Nightly
- Example 1, HTML Flow only
- Example 2, Fluid Web Design
- Example 2.5, Fluid Web Design
- Example 3, Fixed Web Design
- Example 4, Responsive Web Design
- Example 5, Intrinsic Web Design
- Example of Image Options
- Stages of Squish
- Nesting Contexts
- Teaser card
- Multiple Teaser Card nested in a Grid layout
Jeremy Keith
Further Reading
- Pace Layering: How Complex Systems Learn and Keep Learning by Stewart Brand
- The Human Computer's Dreams Of The Future (PDF) by Ida Rhodes
- 3D Glasses On Reality by Kim Stanley Robinson
- The Rule of Least Power by Tim Berners-Lee and Noah Mendelsohn
- Everything Easy Is Hard Again by Frank Chimero
- Over-engineering is under-engineering by Baldur Bjarnason
- The Burden of Precision by Daniel Eden
- The work I like by Ethan Marcotte
- A Sound Of Thunder (PDF) by Ray Bradbury
Related posts on adactio.com
- 02018-03-06 Minimal viable service worker
- 02017-12-23 Ubiquity and consistency
- 02017-11-02 The dConstruct Audio Archive works offline
- 02017-03-15 Progressive Web App questions
- 02017-01-11 Making Resilient Web Design work offline
- 02016-10-18 Choice
- 02015-11-15 Home Screen
Progressive Web Apps
Books
- Make It So by Nathan Shedroff and Christopher Noessel
- How Buildings Learn by Stewart Brand
- Time Travel by James Gleick
Films
- Plan Nine From Outer Space, 1959, directed by Ed Wood
- 2001: A Space Odyssey), 1968, directed by Stanley Kubrick
- Blade Runner, 1982, directed by Ridley Scott
- Brazil), 1985, directed by Terry Gilliam
- Southland Tales, 2006, directed by Richard Kelly
Aaron Gustafson
- You Are @ 10K Apart
- Resource Hints: dns-prefetch, preconnect, prefetch, preload and prerender
- Preload, Prefetch And Priorities in Chrome
- Web Font Anti-Pattern: Aggressive subsetting
- Easy Navigation, Speed Are Leading Website Performance Attributes
- How Loading Time Affects Your Bottom Line
- How Page Load Time Affects Conversion Rates: 12 Case Studies
- Research: Performance Impact of Popular JavaScript MVC Frameworks
- Vanilla JS
- The Best Request Is No Request, Revisited
- HTTP/2: the Future of the Internet | Akamai
- The Growth of Web Page Size
- Not every article needs a picture
Lara Hogan
- Tuckman’s stages of group development - Wikipedia
- Paloma Medina's BICEPS model
- Dealing with surprising human emotions: desk moves
- Etsy’s Charter of Mindful Communication
- Amy Ciavolino's Mindful Communication in Code Reviews
- Team Leader Venn Diagram – Making Meetup
- The Five Dysfunctions of a Team - Wikipedia
- Mike Morgan's Two by Two: Trust and disagreement
Luke Wroblewski
- Facebook Mobile App navigation menus:
- Ten Years of eBay Android App Design
- 30 Years of Adobe Illustrator Design
- How People Unmask Passwords
- Remove password masking
- Showing Passwords on Log-In Screens
- Mobile DropDowns Revisited
- Smartphones, iPads & the state of the mobile Internet
- How Often Do You Check Your Phone?
- We touch our phones 2,617 times a day
- What do you dislike most when browsing Web on mobile?
- Designing for Apple Watch
- Designers Shaping Things
Jason Grigsby
Case Studies
- PWA Stats
- Google Case Studies
- WEGO Case Study Video
- Why does The Washington Post’s Progressive Web App increase engagement on iOS?
- Flipkart triples time-on-site with Progressive Web App
- Konga cuts data usage 92% with new Progressive Web App
- United eXtra Electronics grows eCommerce sales by 100% with Web Push Notifications
- 5miles decreases bounce rate by 50% and increases conversions by 60% with new Progressive Web App
- AliExpress saw 82% increase in iOS conversion rate
- Total Retailer: Why All Retailers Need to Be Aware of PWAs
- Digiday: With new mobile site, Forbes boosted impressions per session by 10 percent
- Lancôme speeds its mobile site with Google’s progressive web apps
- A Pinterest Progressive Web App Performance Case Study
Progressive Web App Definitions
- What the heck is "Progresive Web App"? Seriously.
- Progressive Web Apps: Escaping Tabs Without Losing Our Soul — Where Frances Berriman and Alex Russell define Progressive Web Apps for the first time.
- Progressive Web Apps at Google
- Naming Progressive Web Apps by Frances Berriman
- A Brief History of How PWAs Came to Be a Twitter moments thread
- What is a Progressive Web App? by Jeremy Keith
Why Progressive Web Apps?
- Progressive Web Apps Simply Make Sense
- The Business Case for Progressive Web Apps
- Yes, That Web Project Should Be a PWA
- Progressive Web Apps on iOS are here
Making it Feel Like an App
- CSS Tricks Poll Results: “Sites” vs “Apps”
- By any other name
- Designing Great UIs for Progressive Web Apps
- Designing Responsive Progressive Web Apps
- Instant Loading Web Apps With An Application Shell Architecture
- Does Anyone Use Social Sharing Buttons on Mobile?
- Introducing the Web Share API
- Animated SVG Avatar v2
- Proposed Web Share API (experimental)
Installation and Discovery
- MDN Web App Manifest
- Google Developers: Web App Manifest
- PWA Discovery: You Ain’t Seen Nothin Yet
- Progressive web apps and the Windows ecosystem
- Why Are App Install Banners Still A Thing?
- Integrating Progressive Web Apps deeply into Android
- Twitter updates its Windows 10 UWP app to PWA with support for push notifications
- Welcoming Progressive Web Apps to Microsoft Edge and Windows 10
- PWA Builder
- Using Trusted Web Activities
- PhoneGap
Offline
- The Next Billion Users: trivago Embrace Progressive Web Apps as the Future of Mobile
- Offline UX Considerations
- Workbox JS
Push Notifications
- How Consumers Really Feel About Push Notifications
- Best Practices for Push Notifications Permissions UX
- Web Push Notifications: Timely, Relevant, and Precise
- Time to Update Your Permissions UX
- Web Push Book
- Notification Generator
Beyond PWAs
- Accelerated Mobile Project (AMP)
- Combine AMP with Progressive Web Apps
- Bootstrapping Progressive Web Apps with amp-install-serviceworker
- Credential Management API and Google documentation
- Payment Request API and Google documentation
Sample PWAs
- Twitter Lite
- Vaadin Expense Manager Demo
- FlipKart
- English Accent Maps
- Smashing Magazine
- Offline WikiPedia
- Pokedex
- Polymer Shop Demo
- Cloud Four
PWA Galleries
PWA Resources and Tools
Progressive Web App Roadmap
Chris Coyier
Intro
Example of APIs
- Twilio - Communication APIs for SMS, Voice, Video and Authentication
- Flickr Services
- Gallery app with Finite State Machines
Examples of static file hosts
- GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.
- Projects on CodePen
- Netlify: All-in-one platform for automating modern web projects.
- Cloud Object Storage | Store & Retrieve Data Anywhere | Amazon Simple Storage Service
Related to cloud functions
- Webtask
- The Twilio Node Helper Library - Twilio
- Testing Serverless Function with just HTML
- Webtask + Twilio: Send Recipe over SMS
Related to hosted forms
- Google Forms - create and analyze surveys, for free.
- Online Form Builder with Cloud Storage Database | Wufoo
- Online Form Builder & Form Creator for Online Forms | Formstack
- Online Form Builder & Form Creator for Online Forms | Formstack
- Online Form Builder & Form Creator | JotForm
Related to static forms
- FormKeep | Form endpoints for designers and developers
- Formcarry. | no Javascript no PHP just point your form and chill.
- Pageclip
- Forms | Netlify
Related to payments
- PayPal
- Stripe.com - Payment processing for internet businesses
- Braintree Payments
- Credit Card Processing & Payment Gateway: Accept Payments Online – Authorize.Net
- Worldpay | Secure Payment Processing
- Recurring Billing | Subscription Billing Software - Chargify
Related to services on top of payments
Related to rolling your own checkout
- Stripe API Reference
- Vue.js
- Azure Functions—Serverless Architecture | Microsoft Azure
- Creating a Vue.js Serverless Checkout Form: Setup and Testing | CSS-Tricks
- Checkout
- Introducing the Payment Request API | Web Fundamentals