Articles, Links, and Tools From An Event Apart San Francisco 2022

Declarative Design

• Declarative design on adactio.com
• Utopia by James Gilyead and Trys Mudford
• Every Layout by Heydon Pickering and Andy Bell
• Be the browser’s mentor, not its micromanager by Andy Bell
• Layout Land by Jen Simmons
• Designing Intrinsic Layouts by Jen Simmons on adactio.com

HTML

• A declarative Web Share API on adactio.com
• A polyfill for button type=”share” on adactio.com
• The reason for a share button type on adactio.com
• Share Button Type explainer on Github
• When should there be a declarative version of a JavaScript API? on adactio.com
• How to (not) make a button by Tomas Pustelnik

CSS

• The CSS Mindset by Max Böck
• Contextual Spacing For Intrinsic Web Design by Stephanie Eckles
• The CSS mental model by Peter Paul Koch
• CSS Forces by Tim Brown

Design Tools

• Our web design tools are holding us back by Vasilis van Gemert
• Traditional Web Design Process is Fundamentally Broken by Jason Grigsby
• Web Design Tool Wish List by Jason Grigsby
• Declarative Design Tools (archived) by Jem Gold

Design systems

• Declarative design systems on adactio.com
• Design systems thinking on adactio.com

History

• Cascading HTML style sheets — a proposal by Håkon Wium Lie, 1994
• A Dao of Web Design by John Allsopp, 2000
• Responsive Web Design by Ethan Marcotte, 2010

People

• Wolfgang Amadeus Mozart
• Miles Davis
• Tim Berners-Lee

• Kevin M Hoffman AEA DC 2019 talk: “What is Design Ops and Why Do I Care?”
• Retrospective video about the COVID Command Center
• SF Chronicle article about the COVID Command Center
• UX Theatre blog post and poster by Tanya Snook
• Erika Hall Twitter thread about research and book Just Enough Research
• CDC Crisis and Emergency Risk Communication (CERC) manual
• In the Bubble podcast
• This Week in Virology podcast
• Zeynep Tufekci in The Atlantic (and Twitter)
• Ed Yong in The Atlantic (and Twitter)
• Dr. Julia Marcus in The Atlantic (and Twitter)
• Dr. Bob Wachter on Twitter
• Eric Meyer and Sara Wachter-Boettcher’s book Design for Real Life
• HmntyCtrd
• 99% Invisible podcast about challenge coins
• Video of Keep Your Eyes on the Prize at the March on Washington in 1963
• Bonus podcast about civil rights activists keeping their eyes on the prize: “Momentum” series by Sharon McMahon

• 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

• 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

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

• Google Trends
• Semrush
• Online NGram Analyzer
• Google Vision AI
• SparkToro

• Use the right container query syntax
• Individual transform properties
• Style queries
• Smooth and simple page transitions
• Designing with reduced motion

• 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

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)

• 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

• The Better Onboarding book
• An onboarding reading list
• On moving away from the “user education” mindset
• On interruptive dialogs (“More Harm Than Good? How Messages That Interrupt Can Make Us Vulnerable”)
• On Nextdoor “Kindness Reminders”

• CSS Selectors Level 4: The Relational Pseudo-class: :has()
• CSS Qualified Selectors
• Solving container queries today
• Contain Your Excitement
• jQuery :has()
• CanIUse :has()
• :has() Implementation Status in Chrome (October 2022)

• Closing the Loop by Sheryl Cababa (not out yet but you can preorder)
• The Dawn of Everything by David Graeber and David Wengrow (most of the stuff about Kandiaronk is here)
• The User Illusion by Tors Norreandor (some of the mirror stuff is in here)
• This article about Maslow and the Siksika
• Article about Instagram and teen girls
• Article about Facebook and Myanmar
• Document where Facebook presents the Natural Engagement Pattern
• Interview between Sadie Red Wing and Matt May: part one, part two
• My podcast episode about Just World Hypothesis
• Gabe Weinberg’s testimony to Congress
• Seer’s salary transparency statement
• Article on Economic Mobility Index for colleges
• That scene from Pig
• Design for Cognitive Bias
• daviddylanthomas.com