Articles, Links, and Tools From An Event Apart Denver 2022
An in-progress compendium of articles, links, tools, and other resources shared by our speakers at An Event Apart Denver 2022.
“SEO teams—the UX Ally You’ve Been Missing All Your Life!” (Wil Reynolds)
“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
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
- 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)
“Overcoming Grid Reluctance” (Chen Hui Jing)
“Animation in Today's Responsive Design” (Val Head)
“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