Articles, Links, and Tools From An Event Apart Chicago 2017

• 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

Case Studies & Examples

• Aeromexico
• Authentic Jobs
• Patagonia

Principles of Unity

• A Dao of Web Design
• Adactio: Fluid vs. Fixed
• Kevin Spacey speaking at Edinburgh

Design System Examples

• Inspired Guides
• Mail chimp Voice & Tone
• Salesforce Lightning Design System

Prototyping Tools

• Abstract
• Framer
• Figma
• Origami
• Principle
• Sketch

PWAs

• Google: Progressive Web Apps
• Progressive Web Apps Simply Make Sense
• @pwstats

Mike Davidson

• Hired: Mike Davidson
• Three Years in SF

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 path Syntax: An Illustrated Guide
• Codepen: Simple Path Examples
• bodymovin - after effects to html library
• svg jou jou monster

SVG Line Drawing

• Playstation 4: The Review
• Codepen: Feast SVG Logo Animation
• Codepen: THINK svg Animation

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

• Icon System with SVG Sprites
• grunticon
• Inline SVG with Grunticon Fallback

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 path Syntax: An Illustrated Guide
• SVG text and Small, Scalable, Accessible Typographic Designs
• Codepen: My First SVG Banner Ad

Headline Lockups

• Codepen:  Example of a Text Lockup
• Codepen:  SVG with <text> example

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

• Codepen:  Change inline svg styling
• Networking on DigitalOcean
• Codepen:  Drivetrain
• Codepen:  MC High Five
• Codepen:  SVG Phone call
• Interactive Data Visualization: Animating the viewBox
• Codepen:  Urban landscape in polygonal style

UI Animation Newsletter

• The UI Animation Newsletter
• Designing Interface Animation

Design Systems & Animation Tips

• Researching Design Systems
• Integrating animation into the UX workflow
• Design Doesn’t Scale

Traditional storyboarding

• Pixar storyboards

• 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

• 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.

• 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

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 Directory
• PWA Rocks
• Outweb

PWA Resources and Tools

• MDN Documentation on display-mode media query
• PWA Builder
• Lighthouse
• Proposed Web Share API (experimental)

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

• In San Diego, TV orders dollhouses for Amazon Echo owners
• Image recognition is hard
• Hot dog legs
• Picdescbot twitter bot

• 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

• How to measure engagement with the Task Performance Indicator
• More information on the Tasks Performance Indicator
• How to identify your top customer tasks that will be the basis of measuring engagement