“SEO teams—the UX Ally You’ve Been Missing All Your Life!” (Wil Reynolds)
Google Trends
Semrush
Online NGram Analyzer
Google Vision AI
SparkToro
“Experimenting with Performance at the Edge” (Scott Jehl)
HTTP Archive Report: Page Weight
Tweet by Scott Jehl
Tweet by Stuart Langridge
PageSpeed Insights
PageSpeed Insights: Twitter.com
WebPageTest
Webpage Performance Test Result
Webpage Performance Test Result
Webpage Performance Test Result
Webpage Performance Test Result
Webpage Performance Test Result
Webpage Performance Test Result
Let an Edge Function do it.
NPR Example
NPR Example
Google Flights Example
Filmstrip Comparison
The Metric Times
Webpage Performance Test Result
“Imagining a Fluid Future for Design Tools” (Jason Grigsby)
Resources
Responsive Design Workflow by Stephen Hay
Broken Process by Tyler Sticka
Design Tokens Community Group
Design Tokens Format Module
Archive of Liquidasive.com
Responsive Web Design by Ethan Marcotte
Behind the feature: the making of the new Auto Layout by Willy Wu
Should Designers Code Hot Takes
John Maeda: If You Want to Survive in Design, You Better Learn to Code by Liz Stinson
Designers Should Design, Coders Should Code by Marcin Treder, Ryan Thomas Riddle, and Jerry Cao
Why Should Designers Learn to Code? by Emily Stevens
Should Designers Code? (Pt. 1) by Alan Cooper
Should designers code… or should developers design? by Jessica Lascar
All the answers to the “Should designers code?” question by Drew Powers
Tools Used in Experiments
Storybook
Storybook’s Design System
Storybook’s Design System Repo
Our fork of Storybook’s Design System
Our fork repo
Importing External Code into Framer
UXPin Merge
UXPin Merge framework support
Story.to.design
Interplay
Figma
Breakpoints Plugin for Figma
Figma Accessibility Plugins
Interesting tools tackling design system collaboration
Zeplin Connected Components
Storybook Connect Figma Plugin
Hadron App
Knapsack
Luro App
Jason’s articles on fluid design tools
Traditional Web Design Process is Fundamentally Broken
Design Happens Between Breakpoints
Faulty Assumptions and Unwanted Features of Most Web Design Tools
Responsive Design Process that Works
Web Design Tool Wishlist
“When New CSS Features Collide: Possibility and Complexity at the Intersections” (Rachel Andrew)
Intersections - A CodePen Collection
History
Solved by Flexbox
Giving Content Priority with CSS3 Grid Layout
CSS3 Advanced Layout Module
The Story of CSS Grid, from Its Creators
Simplified subgrid proposal
Container queries
David Baron's initial thoughts on container queries
The origin story of container queries
Use the right container query syntax
:has()
:has(): the family selector
@container and :has()
Subgrid
Video of my subgrid talk
Subgrid demos
Subgrid on MDN
Content reordering problems
Proposal to the CSSWG
Elika's revised solution
Grid, content re-ordering and accessibility
“Transform Your Meetings Into Hybrid Workshops (That People Actually Enjoy)” (Erin Casali)
D. Gray, S. Brown, J. Macanufo (2010) Gamestorming book
A. Pentland (2012) The New Science of Building Great Teams
E. Casali (2013) Brainstorming 2.0: how Boosted Brainstorming can help you
E. Casali (2017) Fully Remote KJ Technique Workshop
E. Casali (2020) Text Standups
“Websites are Good Now” (Chris Coyier)
Breakfast Burritos in Bend, Reviewed.
A Complete Guide to Grid
Flexible Grids
A New Container Query Polyfill That Just Works
Using the Web Animations API
✅ Scroll-Linked Animations: Horizontal scroll section (view-timeline 2022 version)
Move Modal In on Path
Flip plugin for GreenSock
GSAP Flip Cart
majodev / google-webfonts-helper
font-display
Roboto … But Make It Flex
Variable font animation
Variable Font Fun with JS-driven CSS Variables
Fluid Type Scale Calculator
Home | Utopia
Container Units
CSS Container Query Units
Container Relative Lengths: the cqw, cqh, cqi, cqb, cqmin, cqmax units
Deliver remote media files
ReactJS Components and Props
Apollo Queries
Astro Components
CloudFlare Workers
“How to Win at ARIA and Influence Web Accessibility” (Tolu Adegbite)
W3C WAI-ARIA Standard 1.1.
W3C ARIA Authoring Practices Guide
W3C ARIA Authoring Practices Guide Patterns
Mozilla WAI-ARIA basics
Making Sense Of WAI-ARIA: A Comprehensive Guide by Kate Kalcevich
WebAIM Introduction to ARIA - Accessible Rich Internet Applications
Demystifying WAI-ARIA by David MacDonald
Accessibility OZ: What is ARIA and why use it?
WAI-ARIA 1.1 Cheat Sheet by Raghavendra Satish Peri
Frustrating Design Patterns: Disabled Buttons
“Cascading Layers of !mportance” (Miriam Suzanne)
Early Web
Cascading HTML style sheets by Håkon Lie
HTML design constraints
WWW HyperMedia Browser
Line Mode Browser
W3C Design Principles
Understanding The Cascade
A Dao of Web Design by John Allsopp
CSS Systems by Natalie Downe
Everything You Know About Web Design Just Changed by Jen Simmons
User Agent Styles collected by Jens Oliver Meiert
Cascade Layers & Scope
Layers Process Notes
Layers Specification
Complete Guide to Cascade Layers
The Future of CSS: Cascade Layers (CSS @layer) by Bramus Van Damme
Getting Started With CSS Cascade Layers by Stephanie Eckles
Cascade Layers - There's a Polyfill for That! by Sana Javed
Layers CodePen collection
Scope Process Notes
Scope Specification
“Logjams: Unblocking Your Accessibility Backlog” (Dave Rupert)
How to be an open source gardener by Steve Klabnik
Notion
Airtable
Coda
The WPCampus Gutenberg Accessibility Audit
WebAIM Million
The Automated Accessibility Coverage Report by Deque
5 most annoying feature I face as a blind person every single day
Guidance on Web Accessibility and the ADA
“Overcoming Grid Reluctance” (Chen Hui Jing)
(State of CSS survey 2021)
(Codepen demo for grid vs. flexbox grid)
(Codesandbox demo for applying Grid in React application)
“Animation in Today's Responsive Design” (Val Head)
Use the right container query syntax
Individual transform properties
Style queries
Smooth and simple page transitions
Designing with reduced motion
“Multilingual Design for the Web (and Beyond)” (Preston So)
General resources
W3C language matrix (W3C i18n, August 7, 2017)
W3C language enablement index (W3C i18n, May 20, 2020)
Internationalization techniques (W3C i18n, January 28, 2016)
CSS for internationalization (Chen Hui Jing, April 19, 2020)
Language attributes
Using the HTML lang attribute (Léonie Watson, June 14, 2016)
On use of the lang attribute (Adrian Roselli, December 5, 2021)
Styling using language attributes (W3C i18n, August 14, 2013)
Language tags in HTML and XML (W3C i18n, March 3, 2014)
Right-to-left and vertically-set
Structural markup and right-to-left text (W3C i18n, June 25, 2021)
RTL rendering of LTR scripts (W3C i18n, July 8, 2022)
Styling vertical Chinese, Japanese, Korean, and Mongolian text (W3C i18n, August 1, 2022)
Languages using right-to-left scripts (W3C i18n, June 15, 2022)
Line breaks, wrapping, and hyphenation
Approaches to line breaking (W3C i18n, August 12, 2018)
word-break (MDN, September 26, 2022)
line-break (MDN, September 26, 2022)
hyphens (MDN, September 26, 2022)
Ruby annotations
What is ruby? (W3C i18n, February 10, 2016)
Ruby markup and Ruby styling (W3C i18n)
Bopomofo on the web (r12a.github.io, October 21, 2014)
Ruby extensions and Use cases and exploratory approaches (W3C i18n)
Interface and form design
About languages and flags (Gunnar Bittersmann, June 15, 2022)
Personal names around the world (W3C i18n, August 17, 2011)
Text size in translation (W3C i18n, July 3, 2007)
CSS logical properties and values (MDN, September 28, 2022)
Advanced reading
SSML 1.1 and docs by Google and Amazon
Choosing and applying a character encoding (W3C i18n, March 31, 2014)
OpenType features in CSS (Gustavo Ferreira, September 19, 2016)
Localization gotchas in CJK languages (Andrew Landry, April 15, 2016)
Cyrillic script variations and the importance of localisation (Krista Radoeva, October 12, 2016)
Robust vertical text layout (Elika Etemad)
Implementing Japanese subtitles on Netflix (Netflix Technology, December 11, 2017)
“Oh Snap!” (Adam Argyle)
Snap Gallery, a gallery of scroll snap demos
Scroll Snap Explainers (5 new features actively under development)
Scroll Snap 2 spec draft
Overflow on web.dev
Overflow on MDN
Logical Properties on web.dev
Logical Properties on MDN
Scroll Snap Type on MDN
Scroll Snap Align on MDN
Scroll Snap Stop on MDN
Scroll Snap Chrome DevTools introduction
Overscroll Behavior on MDN
Scroll Padding on MDN
Scroll Margin on MDN
JavaScript scrollIntoView on MDN
Snap After Layout feature explained
JavaScript IntersectionObserver
Slyd library for bidirectional slide presentations
“The Nuts and Bolts of Designing for Safety” (Eva PenzeyMoog)
Access the Design for Safety template FigJam file from the talk. Make a copy to use with your team and you're all set to go through the Process for Inclusive Safety!
Buy the book Design for Safety
The Inclusive Safety Project's Resources page has a ton of link to dive deeper into various areas of tech-facilitated interpersonal harm