Articles, Links, and Tools From An Event Apart Boston 2017
An in-progress compendium of links, resources, and information from the speakers at An Event Apart Boston.
Community
- @aneventapart Twitter feed
- An Event Apart Facebook
- An Event Apart Google+
- Twitter Search: #aeabos (AEA Boston 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
Dan Mall
- Front Product Roadmap
- Open Article nº2
- Dotdash
- After 18 years, About.com is changing its name and shutting down its website — its CEO reveals how it all went down
- Verywell
- Lifewire
- The Balance
- The Spruce
- John Maeda: If You Want to Survive in Design, You Better Learn to Code
- Lightning Design System: Design Tokens
- Painting with Code
- Epicurrence.com — No.5 Jackson Hole, WY
- 8-point Grid
- Expressive CSS
- Tachyons
- Atomic CSS
- Sketch 43 is coming to town with a new game. An open file format!
- Sketch Version 43
- Agile Manifesto
Laura Martini
Metrics
- How to choose the right UX metrics for your product
- How to Choose the Right UX Metrics for Your Project (interactive)
- So your boss doesn’t believe in design research
- I’m Sorry, But Those Are Vanity Metrics
- Stop Trying to Delight Your Customers
Books
Chris Coyier
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
Val Head
UI Animation Newsletter
Design Systems & Animation Tips
Traditional storyboarding
Rachel Andrew
- Code Collection of examples used
- Boring CSS
- Glish CSS
- The Noodle Incident Box Lessons
- Fractal
- Using Feature Queries in CSS
- CSS Grid Specification
- Flexbox Specification
- Box Alignment Specification
- CSS Shapes Specification
- Can I Use
- Being Where the People Are - a post about vendor prefixes
- Grid by Example
- MDN Grid Guides
- Box Alignment Cheatsheet
- Grid Fallbacks and Overrides Cheatsheet
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.
Eric Meyer
- Amazon AWS S3 outage is breaking things for a lot of websites and apps
- http://meyerweb.com/eric/thoughts/2016/12/08/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
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
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
- 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
Josh Clark
Machine learning APIs and services
- Microsoft Cognitive Services, including Emotion API
- Amazon Web Services products, including Artificial Intelligence APIs
- Google Cloud APIs, including Machine Learning APIs
- IBM Watson APIs
- Wit.ai
Projects and demo applications
- Giorgio Cam
- This neural network makes faces from scratch
- Neural network pickup lines
- Rapping neural network
- White collar crime risk zones
- Domino’s Anyware apps
- Video: Domino’s Zero Click app
Humility and transparency in data interfaces
- Systems smart enough to know they’re not smart enough
- Google’s featured snippets are worse than fake news
- Google’s “One True Answer” problem — when featured snippets go bad
- This robot knows when it’s confused and asks for help
- Predictive policing startup publishes code online, seeks to address bias
- The Turk, an 18th-century fake chess-playing machine
The black box of machine logic
- The dark secret at the heart of AI
- No need for alarm about how neural nets work
- Smart machines are not a threat to humanity
Machine ethics
- The ethics of artificial intelligence
- Build a Better Monster: Morality, Machine Learning, and Mass Surveillance
- Genevieve Bell: from human-computer interactions to human-computer relationships
- The European Union’s General Data Protection Regulation
Machine bias
- Book: Weapons of math destruction by Cathy O’Neil
- Google’s speech recognition has a gender bias
- Passport system rejects this dude's photo for a pretty racist reason
- Google mistakenly tags black people as ‘gorillas,’ showing limits of algorithms
- Machine Bias: There’s software used across the country to predict future criminals, and it’s biased against blacks.
You are the training data
- Google wants your phonemes (2007 Marissa Mayer interview)
- What should you think about when using Facebook?
- With wearable tech deals, new player data is up for grabs
- Facebook, Twitter, and Instagram surveillance tool was used to arrest Baltimore protestors
Who do the machines work for?
- Florida woman's hit-and-run escape foiled after her own car calls police on her
- The smart landscape: Rem Koolhaas on intelligent architecture
Goofy fun
Community
- @aneventapart Twitter feed
- An Event Apart Facebook
- An Event Apart Google+
- Twitter Search: #aeabos (AEA Boston 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
Dan Mall
- Front Product Roadmap
- Open Article nº2
- Dotdash
- After 18 years, About.com is changing its name and shutting down its website — its CEO reveals how it all went down
- Verywell
- Lifewire
- The Balance
- The Spruce
- John Maeda: If You Want to Survive in Design, You Better Learn to Code
- Lightning Design System: Design Tokens
- Painting with Code
- Epicurrence.com — No.5 Jackson Hole, WY
- 8-point Grid
- Expressive CSS
- Tachyons
- Atomic CSS
- Sketch 43 is coming to town with a new game. An open file format!
- Sketch Version 43
- Agile Manifesto
Laura Martini
Metrics
- How to choose the right UX metrics for your product
- How to Choose the Right UX Metrics for Your Project (interactive)
- So your boss doesn’t believe in design research
- I’m Sorry, But Those Are Vanity Metrics
- Stop Trying to Delight Your Customers
Books
Chris Coyier
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
Val Head
UI Animation Newsletter
Design Systems & Animation Tips
Traditional storyboarding
Rachel Andrew
- Code Collection of examples used
- Boring CSS
- Glish CSS
- The Noodle Incident Box Lessons
- Fractal
- Using Feature Queries in CSS
- CSS Grid Specification
- Flexbox Specification
- Box Alignment Specification
- CSS Shapes Specification
- Can I Use
- Being Where the People Are - a post about vendor prefixes
- Grid by Example
- MDN Grid Guides
- Box Alignment Cheatsheet
- Grid Fallbacks and Overrides Cheatsheet
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.
Eric Meyer
- Amazon AWS S3 outage is breaking things for a lot of websites and apps
- http://meyerweb.com/eric/thoughts/2016/12/08/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
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
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
- 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
Josh Clark
Machine learning APIs and services
- Microsoft Cognitive Services, including Emotion API
- Amazon Web Services products, including Artificial Intelligence APIs
- Google Cloud APIs, including Machine Learning APIs
- IBM Watson APIs
- Wit.ai
Projects and demo applications
- Giorgio Cam
- This neural network makes faces from scratch
- Neural network pickup lines
- Rapping neural network
- White collar crime risk zones
- Domino’s Anyware apps
- Video: Domino’s Zero Click app
Humility and transparency in data interfaces
- Systems smart enough to know they’re not smart enough
- Google’s featured snippets are worse than fake news
- Google’s “One True Answer” problem — when featured snippets go bad
- This robot knows when it’s confused and asks for help
- Predictive policing startup publishes code online, seeks to address bias
- The Turk, an 18th-century fake chess-playing machine
The black box of machine logic
- The dark secret at the heart of AI
- No need for alarm about how neural nets work
- Smart machines are not a threat to humanity
Machine ethics
- The ethics of artificial intelligence
- Build a Better Monster: Morality, Machine Learning, and Mass Surveillance
- Genevieve Bell: from human-computer interactions to human-computer relationships
- The European Union’s General Data Protection Regulation
Machine bias
- Book: Weapons of math destruction by Cathy O’Neil
- Google’s speech recognition has a gender bias
- Passport system rejects this dude's photo for a pretty racist reason
- Google mistakenly tags black people as ‘gorillas,’ showing limits of algorithms
- Machine Bias: There’s software used across the country to predict future criminals, and it’s biased against blacks.
You are the training data
- Google wants your phonemes (2007 Marissa Mayer interview)
- What should you think about when using Facebook?
- With wearable tech deals, new player data is up for grabs
- Facebook, Twitter, and Instagram surveillance tool was used to arrest Baltimore protestors
Who do the machines work for?
- Florida woman's hit-and-run escape foiled after her own car calls police on her
- The smart landscape: Rem Koolhaas on intelligent architecture