Articles, Links, and Tools From An Event San Francisco 2019

• 15 Ways To Start A Conversation At A Conference (Without Feeling Weird)
• 10 Tips To Get The Most Out Of Conferences, Even If You're Shy
• A conference survival guide for introverts
• How Introverts Can Make the Most of Conferences
• How to Be An Introvert and Still Succeed at Conferences

Learn how to create designs that deliberately slow your visitors down, helping them understand more and make better decisions.

• A Simpler Page
• Whitespace
• “Beyond Engagement: the Content Performance Quotient”
• Mercury Web Parser
• Web Design Manifesto 2012
• Poynter Style Guide
• To Save Real News
• We Were Sofa
• Chanel
• Art Direction and the Web by Stephen Hay (A List Apart, 2004)
• Art Direction vs. Design (zeldman.com, 2003)
• ​The Economist, front cover, April, 2003
• Is Your Website Font Size Too Small? Large Text Is In (Design Shack)
• WordPress accessible Twenty Twenty theme (big type)
​

Consumers and citizens alike turn inward for the truth. By designing for empowerment, the smartest organizations meet them there.

• The Case for Content Strategy, Motown Style
• Content Strategy at Work
• How to Turn Off the Gaslighters
• Factcheck.org: Donald Trump and the Iraq War
• President Flip Flops
• Blur: How to Know What's True in the Age of Information Overload
• Edelman Trust Barometer
• The Politics of Climate (Pew)
• Confidence in Institutions (AP-NORC)
• xkcd
• The Unhealthy Other: How Non-Vaccinating Parents Construct the Vaccinating Mainstream
• Plain Language
• ClinicalTrials.gov
• Buzzfeed: What We Learned from a Week of Prototyping in Public
• FBI Crime Data Explorer

A spotlight on generated content that shows how it can be a generator of creativity as well as a powerful, practical tool for everyday use.

• CSS Generated Content Module Level 3
• Clearfix: A Lesson in Web Development Evolution
• CSS Gradient generator
• vector-effect
• Bug 1530525: vector-effect non-scaling-stroke ignored when resized via css background
• Accessible CSS Generated Content
• Super short note on CSS text

Understanding the interaction between layout methods will enable you to easily create fallbacks for older browsers, and knowing how the various formatting contexts behave unlocks margin collapsing and the behavior of items inside grid or flex layout.

Historical

• CSS Layout Evolution 2012
• CSS Level 1 Specification

Normal Flow (Block and Inline Layout)

• MDN: CSS Flow Layout
• Everything You Need To Know About Margins In CSS
• MDN: Visual Formatting Model

Display Level 3

• CSS Display Module Level 3
• The Two-Value Syntax of the Display Property
• Digging Into The Display Property: The Two Values of Display

Box Generation

• Digging Into The Display Property: Box Generation
• display: contents is not a CSS Reset
• More accessible markup with display: contents

Writing Modes

• Writing Modes And CSS Layout

Lists

• CSS Lists, Markers, and Counters

Flexbox

• Flexbox Use Cases
• What Happens When You Create A Flexbox Flex Container?

CSS Grid and subgrid

• Digging Into The Display Property: Grids All The Way Down
• Supporting Older Browsers
• CSS Grid Level 2: Here Comes Subgrid
• Hello, subgrid!
• Editorial layouts with Exclusions and CSS Grid
• Grid by Example Subgrid examples

Testing

• Web Platform Tests Dashboard
• Testing the Web Platform

Jen walks you through the thinking process of creating accessible & reusable page and component layouts.

• Layout Land on YouTube
• Layout Land home
• Playlist of Jen’s past conference talks on layout
• Jen's Lab
• Demo 7
• Demo 6
• Demo 8
• CSS Grid Inspector: Examine grid layouts
• Debugging CSS Grid Layouts With Firefox Grid Inspector
• Mozilla Developer channel on YouTube

If you’ve ever wanted to customize CSS itself to do something new, you won’t want to miss this talk.

• Wavy Underline Effect
• SVG Turbulence
• SVG Borders
• Sketchy Borders Material Demo
• CSSGram
• Color Filter Playground
• Is Houdini Ready Yet?
• Houdini Drafts
• Houdini Demos by Vincent De Oliveira
• Houdini Explainer for Sam Richard
• Houdini Samples from Chrome Labs
• CSS Tricks Houdini Articles
• Houdini Twitter List
• Angled Corner Demo
• Extra.CSS
• Conic Gradient Polyfill

Why SVG Filters are awesome, how they work, and examples of powerful effects you can create with them.

• SVG Filters 101 — an introduction to SVG Filters, how to create them and use them.
• SVG Filter Effects: Outline Text with feMorphology — deep dive into the feMorphology filter primitive and how to use it to create text outlines.
• SVG Filter Effects: Poster Image Effect with feComponentTransfer — in which you learn how to use the feComponentTransfer to create poster image effects.
• SVG Filter Effects: Duotone Images with feComponentTransfer — in which you learn how to use feComponentTransfer to create Photoshop-grade duotone image effects.
• SVG Filter Effects: Conforming Text to Surface Texture — what the title says. ;)
• SVG Filter Effects: Creating Texture with feTurbulence — did you know SVG can generate and create texture?!

More resources that I used to learn SVG Filters and find inspiration from:

• Lucas Bebber’s Codepen experiments
• Michael Mullany’s writing, Codepen experiments, and his contributions to the Web Platform Docs on SVG Filters.
• David Dailey’s introduction to SVG Filters
• Dirk Weber’s text Effects created with SVG Filters
• Yoksel’s SVG Filter Experiments on Codepen
• Yoksel’s visual SVG Filters tool
• The SVG Filters Specification

How to apply web accessibility guidelines to modern web animation, when and how to implement reduced motion, and approaches to building up animated interactions for a solid standards base.

• Your interactive makes me sick (and what to do about it)
• Responsive design for motion
• The prefer-reduced-motion query at a glance
• Safer web animation for motion sensitivity
• An introduction to the reduced motion query
• Move Ya! Or maybe, don't, if the user prefers-reduced-motion!
• Reduced motion picture technique take two
• Exclusive Design

All the knowledge and code you’ll need to free your website from the tyranny of a network connection.

Books

• DOM Scripting, 2005
• Bulletproof Ajax, 2007
• Going Offline, 2018

Sites

• adactio.com
• Resilient Web Design
• jQuery
• The Prime Number Shitting Bear
• Ampersand
• Trivago
• Clearleft
• The Session
• Una Kravets
• Sara Soueidan
• dConstruct Archive

Progressive Web Apps

• What the heck is a "Progressive Web App"? Seriously. by Ben Halpern
• Building Progressive Web Apps by Diogo Cunha
• Before You Build a PWA You Need a SPA by Mark Muskardin
• Tweet by Jake Archibald
• What is a PWA by Salva de la Puente
• Naming Progressive Web Apps by Frances Berriman
• Progressive Web App Checklist by Google

Find out whether conversation design is right for your product, and how you can adapt your existing design and development processes to this new medium.

• 7 Tips on Building Chatbots for your brand
• Data about install base
• HBR Strategy paper
• Article about KLM’s Chatbot
• KLM’s Chatbot
• Platform for making bots on FB Messenger
• Developing Inga, the chatbot for ING Bank
• Text-to-speech simulator - for Wizard of Oz testing
• Designing a persona

Methods for approaching user research with empathy, and techniques to explore problems and bring creative solutions.

Research Theater

• Study: Paul Piff, Higher social class predicts increased unethical behavior
• Book: Christian Rudder (cofounder of OKCupid), Dataclysm: Love, Sex, Race, and Identity—What Our Online Lives Tell Us About Our Offline Selves

Trying to Correct the Course of Digital Design & Technology

• Book: Cennydd Bowles, Future Ethics
• Book: Cathy O'Neil, Weapons of Math Destruction
• TED Talk: Joy Buolamwini, “How I’m Fighting Bias in Algorithms”
• Book: Sara Wachter-Boettcher, Technically Wrong: Sexist Apps, Biased Algorithms, and Other Threats of Toxic Tech
• Book: Sam Ladner, PhD, Mixed Methods: A short guide to applied mixed methods research
• Book: Dave Gray, Liminal Thinking: Create the Change You Want by Changing the Way You Think
• Book: Indi Young, Practical Empathy: For Collaboration and Creativity in Your Work

Gift Giving Guide

• Shuri #1 – The Search for Black Panther by Nnedi Okorafor, Marvel Comic illustrated by Leonardo Romero & Jordie Bellaire

Case studies of accessibility and inclusion on the web and with apps.

• Another Lens: A research tool for conscientious creatives
• What You’re Getting Wrong About Inclusive Design
• Inclusion Doesn’t Stop at Accessibility
• How to Implement Inclusive Design in Your Organization
• Plugged In — The new Xbox Adaptive Controller will make gaming accessible to people with a broad range of disabilities.
• Empathy and innovation: How Microsoft’s cultural shift is leading to new product development
• How we do our work matters: Accessibility and Inclusive Design

Become more agile by increasing the amount of customer feedback you receive, and developing faster methods to make changes to your code, content, or design.

• Buurtzorg website
• Buurtzorg: the Dutch model of neighbourhood care that is going global
• It’s too slow! It’s taking 600 milliseconds to load: Larry Page - Gmail
• Ask HN: Anyone else find the new Gmail interface sluggish?
• The Next Normal: Viacom young people study
• Physics paper sets record with more than 5,000 authors
• Atypical Combinations and Scientific Impact
• Top user tasks European Union
• Fast Path to a Great UX — Increased Exposure Hours
• Empathy: the web professional’s greatest skill
• How Slack Became a Unicorn Company in 2 Years
• Collaborating and Connecting: Gerry McGovern
• The Huge, Unseen Operation Behind the Accuracy of Google Maps
• Continuous user research in 11.6 seconds, Tomer Sharon, Amazon
• Inclusive content, ethical tech, and you: Sara Wachter-Boettcher, Confab 2018
• Make me think! The design of complexity. Ralph Ammer
• Gerry McGovern website
• Top Tasks: Customer Carewords website