Articles, Links, and Tools From An Event Apart Denver 2022
“SEO teams—the UX Ally You’ve Been Missing All Your Life!” (Wil Reynolds)
“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
Jason’s articles on fluid design tools
“When New CSS Features Collide: Possibility and Complexity at the Intersections” (Rachel Andrew)
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()
Subgrid
Content reordering problems
“Transform Your Meetings Into Hybrid Workshops (That People Actually Enjoy)” (Erin Casali)
“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
“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)
“Overcoming Grid Reluctance” (Chen Hui Jing)
“Animation in Today's Responsive Design” (Val Head)
“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