Articles, Links, and Tools From An Event Apart Denver: Special Edition 2017
Links, articles, tools, resources, and information from the speakers at An Event Apart Denver 2017.
Community
- @aneventapart Twitter feed
- An Event Apart Facebook
- An Event Apart Google+
- Twitter Search: #aeadenver (AEA Denver hashtag)
Speaker Links and Resources
Jeffrey Zeldman
- Sharing Our Work: Testing and Feedback in Design by Jessica Harllee
- A Primer on A/B Testing by Lara Hogan
- What Really Matters: Focusing on Top Tasks by Gerry McGovern
- Interviewing Humans by Erika Hall
- Managing Feature Requests by Rachel Andrew
- Beyond Goals: Site Search Analytics from the Bottom Up by Lou Rosenfeld
- Beyond Usability Testing by Devan Goldstein
- Design, White Lies & Ethics by Dan Turner
- The Distance to Here by Rian van der Merwe
- Connected UX by Aarron Walter
- Being Real Builds Trust by Steph Hay
- Audiences, Outcomes, and Determining User Needs by Corey Vilhauer
- Product Management for the Web by Kristofer Layon
- Testing Content by Angela Colter
- Quick and Dirty Remote User Testing by Nate Bolt
- Internal Site Search Analysis: Simple, Effective, Life Altering! by Avinash Kaushik
- 10 Fundamental Web Analytics Truths: Embrace 'Em & Win Big by Avinash Kaushik
- Is Conversion Rate Enough? It's A Good Start, Now Do More! by Avinash Kaushik
- Analyze This: 5 Rules For Awesome Impromptu Web Analysis by Avinash Kaushik
- How to Conduct Competitive Research by Inc. staff
- 10 Tips on How to Research Your Competition by Darren Dahl
- Book: Just Enough Research by Erika Hall
- How We Write Proposals in My Design Studio by Jeffrey Zeldman
Sarah Parmenter
Luke Wroblewski
- the Ericsson Mobility Report
- Song Downloads Are Down 15% In 2014…
- Spotify ditches the controversial ‘hamburger’ menu in iOS app redesign
- Media, Productivity & Emojis Give Mobile Another Stunning Growth Year
- ScientiaMobile, Q2 Download Complete MOVR
- How to design for thumbs in the Era of Huge Screens
- Bottom navigation - Components - Material Design
Val Head
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
Jen Simmons
- Examples from this talk
- A giant list of links to resources for learning CSS Grid
- Jen Simmons, The benefits of learning how to code layouts with CSS
- Jen Simmons, Six Layout Myths Busted
- Layout Land
- Video of Jen Simmons’ 2015 talk, Modern Layouts: Getting Out Of Our Ruts
- Video of Jen Simmons’ 2016 talk, Revolutionize Your Page: Real Art Direction on the Web
- Book recommendation, Graphic Design the New Basics
- The Vignelli Canon (free PDF)
- Mark Boulton, A Richer Canvas
- Mark Boulton, Five Simple Steps to Designing Grid Systems, Part 1
- The Marber example at Grid Set App (and find others, along with blog posts at https://gridsetapp.com)
- Nathan Ford, Content Out Layout
- Jen Simmons, CSS Writing Modes
- Jen Simmons, Using Feature Queries in CSS
- Grid Garden, a game for learning bits of CSS Grid
- An article on Fan Ho, the Hong Kong photographer with the beautiful vertical images
- Information on how to use CSS Grid and support Internet Explorer and browsers that don’t support Grid.
Daniel Burka
Donna Lichaw
- Free workbook, worksheets, templates, videos, and open source stencil files for you to use on your next project
- Here's my book!
- Book excerpt on A List Apart (covers data-driven story development)
Una Kravets
- Google Mobile Perf Study Results
- Internet Usage in India
- Wikipedia
- Progressive Rendering
- Putting your Images on a Diet
- WebP Documentation
- Video on WebP
- Zamzar Online Converter
- Homebrew
- BPG Web Encoder
- FLIF Format
- FLIF Polyfill
- magick-loader
- gulp-gm
- grunt-imagemagick
- node-imagemagick
- SVGOMG
- Comparing File Formats
- Introducing GIFV
- Social Media Sizes Cheat Sheet
- “Blur-Up” Technique
- Medium’s Image Loading Technique
- iOS Video Autoplay News
- Facebook Image Loading Technique
- Picturefill
- una.im/CSSgram
- Guetzli Compression
- Nginx Caching
- Cloudinary
Jason Grigsby
Progressive Web App Definitions
- 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
Why Progressive Web Apps?
- Progressive Web Apps Simply Make Sense
- The Business Case for Progressive Web Apps
- iOS doesn’t support Progressive Web Apps, so what?
PWA Discovery
- 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
Case Studies
- PWA Stats
- Google Case Studies
- WEGO Case Study Video
- Forbes 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
- Hey, Hey, Cloud Four is a PWA!
PWA UX
- Designing Responsive Progressive Web Apps
- Designing Great UIs for 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
- Regressive Web Apps
- Retrofit Your Website as a Progressive Web App
AMP to PWA
- Accelerated Mobile Project (AMP)
- Combine AMP with Progressive Web Apps
- Bootstrapping Progressive Web Apps with amp-install-serviceworker
Notifications
- How Consumers Really Feel About Push Notifications
- Best Practices for Push Notifications Permissions UX
- Web Push Notifications: Timely, Relevant, and Precise
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
- MDN Documentation on
display-modemedia query - PWA Builder
- Lighthouse
- Proposed Web Share API (experimental)
Technically not PWA, but important and interesting
- HTTP/2 — A faster protocol for web traffic.
- Credential Management API and Google documentation
- Payment Request API and Google documentation
Chris Coyier
I have a book! It’s called Practical SVG.
Some good SVG primers
- Using SVG
- Everything You Need To Know About SVG
- Can I use… data for Basic SVG Support
- Make the Logo Bigger (Chrome Extension)
Graphs & Charts in SVG
- How to Make Charts with SVG
- Highcharts
- Animated SVGs: Custom easing and timing
- Chartist.js, An Open-Source Library For Responsive Charts
- Codepen: Interactive SVG Info Graph
- Codepen: Simple SVG Charts
- amCharts
SVG Shape Morphing
- How SVG Shape Morphing Works
- MorphSVG Greensock plugin
- Codepen: Donald Trump's Signature Morphing Into a Buttface
- Codepen: Mobiltelefonens Evolution (SVG Shape Morphing)
- Codepen: Shape Morph in CSS with d: path() + :active state
- The SVG
pathSyntax: An Illustrated Guide - Codepen: Simple Path Examples
- bodymovin - after effects to html library
- svg jou jou monster
SVG Line Drawing
Animating Interfaces
- Transitional Interfaces, Coded
- Codepen: SVG Page Hopper
- Codepen: SVG Balloon Slider
- Animating an SVG Menu Icon with Segment
- Codepen: morphing shape with spinning color stroke (svg + canvas)
- Loaders and Spinners
- Codepen: Morning Commute
- Codepen: Day 090 - Equalizer - version 1
- Codepen: Musical Chord Progression Arpeggiator
- Codepen: SVG Animated Guitar (Play Me!)
- Codepen: SVG Animated Bucket Drums
SVG Icon Systems
Art
- Codepen: BB8 from Starwars️ – with SVG & GSAP
- Codepen: SVG Fire
- Codepen: Mr. Potatohead SVG
- Codepen: Alex the CSS Husky
- Codepen: microlife
- Codepen: #Codevember 08 - Animated SVG Turbulence Filter
- Kubist
- Codepen: SVG Animated Low Poly Tiger
Diagrams
- Olympic Feathers
- film flowers
- The anatomy of responsive images
- The SVG
pathSyntax: An Illustrated Guide - SVG
textand Small, Scalable, Accessible Typographic Designs - Codepen: My First SVG Banner Ad
Headline Lockups
SVG in the Real World
- Tweet by Tami Brass
- Codepen: no sprite, no JS heart animation - click it!
- Codepen: Twitter Birthday Heart Animation in SVG
- Boxcar Press
Explain Your Product
Jeremy Keith
Links
- Design Principles
- The Extensible Web Manifesto
- Developer Fallacies
Service Workers
- My First Service Worker
- Making A Service Worker: A Case Study by Lyza Danger Garnder
- The Service Worker Lifecycle by Ire Aderinokun
- An Offline Experience With Service Workers by Brandon Rozek
- Offline Content With Service Workers by Mike Riethmuller
Web Components
- Web Components
- Responsible Web Components
- Extensible Web Components
- Uncomfortably Excited by Alex Russell
- My Lightning Talk On Web Components by Soledad Penadés
- Practical Questions Around Web Components by Ian Feather
- Web Components And Progressive Enhancement by Adam Onishi
Progressive Web Apps
- Home Screen
- Regressive Web Apps
- The Progressive Web App Dev Summit
- The Imitation Game
- Progressive Web Apps: Escaping Tabs Without Losing Our Soul by Alex Russell
- The Building Blocks of Progressive Web Apps by Ada Rose Edwards
- Progressive Web Apps: The Long Game by Remy Sharp
- What, Exactly, Makes Something A Progressive Web App? by Alex Russell
People
- Rosalind Franklin, 1920–1958
- Margaret Hamilton, 1936–
- Tim Berners-Lee, 1955–
- Grace Hopper, 1906–1992
- Hedy Lamarr, 1914–2000
- Ada Lovelace, 1815–1852
- James Burke, 1936–
- Kevin Kelly, 1952–
Papers
- Reports and Working Notes on DNA by Rosalind Franklin
- I, Pencil by Leonard E. Read
- HTML Design Principles edited by Anne van Kesteren and Maciej Stachowiak
- Sketch of The Analytical Engine Invented by Charles Babbage by L. F. Menabrea with notes upon the memoir by the translator Ada Augusta, Countess of Lovelace
- The Coming Technological Singularity: How to Survive in the Post-Human Era by Vernor Vinge
Presentations
- The Real World of Technology by Ursula M. Franklin @ the CBC Massey Lectures, 1989
- The Triumph Of Technology by Lord Sir Alec Broers @ the BBC Reith Lectures, 2005
- How Technology Evolves by Kevin Kelly @ TED, 2005
- When Ideas Have Sex by Matt Ridley @ TED, 2010
- How I Built A Toaster—From Scratch by Thomas Thwaites @ TED, 2010
- Admiral Shovel and the Toilet Roll by James Burke @ dConstruct, 2012
- Unexpected Item In The Bagging Area by Dan Williams @ dConstruct, 2013
- Hypertext As An Agent Of Change by Mandy Brown @ dConstruct 2014
- The Humane Representation Of Thought by Bret Victor @ the UIST and SPLASH conferences, 2014
- Our Comrade The Electron by Maciej Cegłowski @ Webstock, 2014
- Step Off This Hurtling Machine by Alex Feyerke @ JSConf.au, 2014
- The Moral Economy of Tech by Maciej Cegłowski @ the Society For The Advancement Of Socio-Economics, 2016
Books
- The Real World Of Technology by Ursula M. Franklin
- The Rational Optimist by Matt Ridley
- What Technology Wants by Kevin Kelly
- The Inevitable by Kevin Kelly
- Where Good Ideas Come From: The Natural History of Innovation by Steven Johnson
- How We Got To Now: Six Innovations That Made The Modern World by Steven Johnson
- 101 Unuseless Japanese Inventions: The Art of Chindogu by Kenji Kawakami
- The Toaster Project (Or A Heroic Attempt to Build a Simple Electric Appliance from Scratch) by Thomas Thwaites
- Connections by James Burke
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
Eric Meyer
- Amazon AWS S3 outage is breaking things for a lot of websites and apps
- Not On This Day
- Keith J. Grant’s tweet about unknowns
- Bug #14530 — “Cheatin’, uh?” is not helpful feedback for users or developers
- Bug #38332 — “Cheating” message insults; needs changing
- ‘Pokemon Go’ players stumble on hidden history
- ‘Pokemon Go’ Players Accidentally Cross Illegally Into U.S. From Canada
- From Bosnian Minefields To Iraqi War Zones, Pokemon Go Players Know No Bounds
- BURGER KING® | Connected Whopper®
- Google blocks invasive Burger King ad from taking over Google Home
- TV news report about unwanted Alexa orders triggers unwanted Alexa orders
- Inclusive - Microsoft Design
- Design for Real Life