Articles, Links, and Tools From An Event Apart Seattle 2019

• A Simpler Page
• Whitespace
• “Beyond Engagement: the Content Performance Quotient”
• Readability
• Mercury Web Parser
• Web Design Manifesto 2012
• Poynter Style Guide
• To Save Real News
• We Were Sofa
• Chanel

• 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

• Ancestry
• Facebook Ad Preferences
• Every Website
• This Person Does not Exist
• Kill Your Personas
• Cookie Cleaner
• Natural Cycles
• Google Photos
• Bloom & Wild
• Metro UK
• Design for Real Life
• GoSquared

Tools I use that are relevant to this work:

• AdEspresso
• Facebook Audience Insight Tools
• Adobe XD for Prototyping

• 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
• Using CSS counters

The code examples can be found in this CodePen Collection.

Flexbox

• Flexbox spec
• Use Cases For Flexbox

Sizing

• CSS Intrinsic and Extrinsic Sizing Spec
• How Big Is That Flexible Box
• CSS is Awesome discussion on CSS Tricks
• Graduating to Grid An Event Apart Video
• How Big Is That Box: Understanding Sizing in Grid Layout

Logical Properties and Values

• Logical Properties and Values Spec
• Understanding Logical Properties and Values
• CSS Logical Properties and Values on MDN

Scroll Snap

• Scroll Snap Spec
• CSS Scroll Snap on MDN

Subgrid (Grid Level 2)

• CSS Grid Spec Level 2
• Grid Level 2: Here Comes Subgrid

Paged Media

• Paged Media Spec
• Designing For Print With CSS

Multicol

• When And How To Use Multi-column Layout

Fragmentation

• Breaking Boxes With CSS Fragmentation

Regions

• CSS Regions Spec
• CSS Regions considered harmful

Exclusions

• Exclusions Spec
• Status of the Exclusions spec issue
• Editorial Layouts, Floats and CSS Grid
• Editorial Layouts, Exclusions and CSS Grid

• 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

• On spelling
• CodePen job board
• Smashing Magazine job board
• StackOverflow job board

ShopTalk Show's How To Think Like a Front-End Developer Series

• Eric Meyer
• Mina Markham
• Trent Walton
• Brad Frost
• Sameera Kapila
• Ben Frain
• Peggy Rayzis

• Monica Dinculescu

• alrra/browser-logos

• Photo by Luke Wroblewski
• Tweet by Dan Cederholm
• Wikipedia: Choose Your Own Adventure
• Netflix sued by Choose Your Own Adventure publishers over Black Mirror: Bandersnatch
• How we built the Figma design team
• Stack Overflow Developer Survey 2017
• GitHut
• Module Counts
• Is front-end development having an identity crisis?
• Just markup
• The Great Divide
• Tales of a Non-Unicorn: A Story About The Trouble with Job Titles and Descriptions
• Tweet by Cory Ginnivan
• Reluctant Gatekeeping: The Problem With Full Stack
• Tweet by Brian Holt
• Full-Stack Developers
• Comment by Nils

Dribbble Shots from our How To Think Like a Front-End Developer Series

• Socialio - Events
• For all food lovers
• Sibling
• Finance app
• KIKK Festival 2017 - Homepage
• Mobile Homepage for CrowdRise By GoFundMe
• Shortstache2
• Fullscreen Hover Loop Effect
• Tracking Dashboard for Drivers Management
• Progress Board Interface for Education Platform

Related CSS-Tricks Articles/Videos I've Done:

• What makes a good front-end developer?
• So you want to be a Senior Developer?
• The All Powerful Front-End Developer

• Design Thinking
• Design thinking is a process for creative problem solving
• Design Thinking Process
• Design Thinking for Libraries
• Changing Experiences through Empathy – The Adventure Series
• Pittsburg Chidrens Hosptial Makes Visits Fun for Kids
• Natasha Jen: Design Thinking Is Bullsh*t
• Laddering Questions Drilling Down Deep and Moving Sideways in UX Research
• Worst Possible Idea
• 24 Top UX Prototyping Tools with Downloadable Comparison Table
• Prototypr
• A guide to paper prototyping & testing for web interfaces
• On Learning and Comprehension
• Screenlife App — a UI/UX case study
• Welcome to WhatsApp Pay — a UX case study

• Quirksmode
• Page Speed Insights
• Lighthouse
• HTTP Archive
• Apple Voiceover
• Google: Deprecating our AJAX crawling scheme
• Progressive Enhancement is Faster
• WebPageTest
• Optimizing CSS Delivery
• A pretty good svg system
• Inline or caching? Both please!
• Preload
• http2
• More Weight Does Not Mean More Wait
• Page weight avg
• What does my site cost?
• Alex Russell talk
• Cost of JS
• Ericcson Mobility Report
• Netflix Tweet
• Cost of Rehydration
• Code Splitting
• Lighthouse CI
• SpeedCurve
• Calibre
• Adobe Launch
• Sync and Async
• Personalization Drives Results
• CF Workers
• A/B Testing at the Edge
• using Workers to make static sites dynamic
• lazy sizes
• A Native lazy Load for the web

Device Numbers

• Device Shipments, IDC
• Device Lifespan Apple
• Device Lifespan Android
• US Retail Shopping
• Internet Advertising Revenue

Device Usage

• Nottingham Trent University researchers say phone users pick them up 85 times a DAY
• We touch our phones 2,617 times a day, says study
• Contextual Experience Sampling of Mobile Application Micro-Usage
• Putting a Finger on Our Phone Obsession
• How Do Users Really Hold Mobile Devices?

Performance

• Mobile Web Survey
• Skeleton Screens

App Data

• App Annie 2017 Report

Churn/Retention

• One in Four Mobile Apps Are Abandoned After a Single Use
• Comscore’s U.S. Mobile App Report Available for Download
• New data shows losing 80% of mobile users is normal, and why the best apps do better

Push Notifications

• How to Boost Mobile App Retention

Onboarding

• 牡蠣で亜鉛摂るの難しい？そんなことｎｏｔｈｉｎｇサプリのススメ
• Why Vevo Got Rid of Onboarding Tutorial Screens
• Hotel Tonight - Mobile Innovation Summit
• Why Onboarding is the Most Crucial Part of Your Growth Strategy

Digital Transitions

• One Chart That Explains Why Traders Are Shorting Retail Stocks Like Crazy
• YouTube Tops 1 Billion Hours of Video a Day, on Pace to Eclipse TV
• The Consumer Evolution of The Music Business
• Film and TV ​streaming and downloads overtake DVD sales for first time
• Landline Phones Are a Dying Breed
• The Death of Clothing

Bibliography

• Charles Montgomery - Happy City: Transforming Our Lives Through Urban Design
• Virginia Eubanks - Automating Inequality: How High-Tech Tools Profile, Police, and Punish the Poor
• Michelle McNamara - I'll Be Gone In the Dark
• Chris Clearfield, András Tilcsik - Meltdown: Why Our Systems Fail and What We Can Do About It
• Nicholas Carr - The Shallows

Ridesharing effects

• Services like UberPool are making traffic worse, study says
• The Perfect Selfishness of Mapping Apps
• Apps blamed for turning a tiny street in Glen Park into a traffic nightmare

Media and politics

• How Social Media Is Ruining Politics (great quote about only two forms of media transforming election in the last 100 years.)
• ‘Speeches Must Be Short’: Radio and the Birth of the Modern Presidential Campaign
• ‘Television and the Presidency’

Home sharing and rent

• You’re Not Imagining It: Airbnb Really Does Lead to Higher Rents and Home Prices, Study Finds
• Did Airbnb Kill the Mountain Town?
• What Airbnb Did to New York City

Health insurance and fitness tracking

• John Hancock adds fitness tracking to all policies

Urban planning

• Trouble in utopia as the real Brazil spills into Niemeyer's masterpiece
• ‘Brasilia: Life after Design’ shows the real-life impact of planning and architecture
• The World's Most Successful Model for Sustainable Urban Development?
• Eichler Homes and the Golden State Killer
• The Politics of Happiness

The Cobra Effect

• The “Cobra Effect” Is When Trying To Fix Something Actually Makes It Worse. Conservatives Are Now Engaged In Their Own Version Of The Cobra Effect.

• Atlassian Design System
• Thinking in Systems
• The full stack design system
• The Only-ness Statement
• Rework
• Distinct Design Systems
• Design Systems: Pilots & Scorecards
• Design Systems: Mastering Design at Scale
• Verywell Health
• Drive, by Daniel Pink
• Responsive Web Design
• The Boston Globe
• Little Boxes

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

Page Transitions

• Nuxt.js
• sdras/nuxt-type
• page-transitions-travelapp
• sdras/page-transitions-travelapp
• simonaco/page-transitions-travelapp
• sw-yx/page-transitions-react-travelapp
• aholachek/animate-css-grid

Responsive 3d

• Josh Carpenter
• A-frame
• 360º Image Gallery
• 360º Image Gallery
• SUPERMEDIUM - virtual reality browser
• Supercraft | Build VR Sites in VR
• ARKit 2
• Bring your lessons to life with Expeditions
• CityEngine Web Viewer
• Minh Pham
• How Virtual Reality Benefits Seniors
• Sea Hero Quest
• The Art of Journey - Augmented Reality Feature
• Easy Way to Make 360 VR Designs

Biofeedback

• sdras/three-vue-pattern
• Voice-Controlled Web Visualizations with Vue.js and Machine Learning

• Exclusive Design - A well-researched read that will get you re-thinking your assumptions about accessibility and inclusive design.
• Your interactive makes me sick (and what to do about it) - A first-person account of the affects of vestibular disorders and similar disorders.
• Responsive design for motion - Potential triggers, and how to use prefers-reduced-motion from the WebKit blog.
• The prefer-reduced-motion query at a glance
• An introduction to the reduced motion query

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