Articles, Links, and Tools From An Event Apart San Francisco 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

More on this topic from Josh

• Design in the era of the algorithm
• Systems smart enough to know they’re not smart enough
• Designing with artificial intelligence: the dinosaur on a surfboard (podcast)

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
• Video: Domino’s self-driving car and drone delivery

Humility and transparency in data interfaces

• 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
• AI programs are learning to exclude some African-American voices
• 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
• The ‘South Park’ season premiere caused mayhem with Amazon Echo
• Image recognition is hard
• Hot dog legs
• Picdescbot twitter bot

• 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

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

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

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

Onboarding opportunities over time

• MIT manager onboarding checklists
• "New data shows losing 80% of mobile users is normal, and why the best apps do better" (Andrew Chen and Ankit Jain)
• "Minimizing Change Aversion for the Google Drive Launch" (Google case study)
• "From first run to the long run" (Krystal Higgins)

Onboarding with multiple methods

• "The Truth About Learning Styles" (Linda Nilson)
• "Do users change their settings?" (Jared Spool)
• "Onboarding for many" (Krystal Higgins)

Creating onboarding for long-term guidance

• "How we put Facebook on the path to 1 billion users" (Chamath Palihapitya)
• "Replication and Analysis of Ebbinghaus’ Forgetting Curve" (Jaap M. J. Murre and Joeri Dros)
• "Spaced Repetition Promotes Efficient and Effective Learning: Policy Implications for Instruction.pdf)" (Sean H. K. Kang)
• "Onboarding New Hires: Current practices and new directions" (Sirota)
• "Building onboarding for long-term guidance" (Krystal Higgins)

• 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

• More information on Ben Schmidt’s data visualization work.
• Trent Walton’s “Redefined” and “Device-Agnostic” are two essays I’d recommend to any responsive designer.
• The Toast is a wonderful independent publication, and one I (and some friends) worked with last year. (Our team wrote a detailed overview of the redesign process, if you’re curious.)
• Both The Toast and The Guardian (and, like, many other sites) make use of the flexible box module, or “flexbox.” If you’d like to learn more, I can recommend:
  • Chris Coyier’s “Complete Guide to Flexbox” is an invaluable reference.
  • Flexbox in 5 Minutes. What it says on the tin.
  • Games! http://flexboxfroggy.com/ and http://www.flexboxdefense.com/ are fun but they also really helped me get my head around some of the finer layout tricks. Recommended.
  • And finally, it’s worth noting that flexbox isn’t for everything.
• Interested in @supports? Well! MDN, David Walsh, and SitePoint have more information for you.
• If you’re interested in learning more about pattern libraries / style guides, I can recommend Anna Debenham’s excellent book on the topic.
• A few favorite pattern libraries / style guides are those published by Starbucks, Ushahidi, MailChimp, and Code For America.
• We are, as I mention in the talk, living in a golden age of automation and tooling for pattern libraries. Zeplin, DevBridge’s Styleguide, and KSS are a few examples; Fractal is one I especially like.
• For many more, I recommend Susan Robertson’s article on the topic.
• While “Atomic Design” is a popular methodology for organizing a style guide, many organizations and teams find value in designing, well, their own design language. Alla Kholmatova, Charlotte Jackson, and Ellen de Vries have been big influences for me in this area.