2022-12-11

“Declarative Design” (Jeremy Keith)

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

“Eyes on the Prize: Lessons in User-Centered Design” (Anita Cheng)

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

“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

“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

“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

“SEO teams—The UX Ally You’ve Been Missing All Your Life!” (Wil
Reynolds)

Google Trends

Semrush

Online NGram
Analyzer

Google Vision AI

SparkToro

“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

“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

“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)

“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

“Better Onboarding Through Guided Interaction” (Krystal Higgins)

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 :has() Unlimited Power” (Eric Meyer)

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)

“What If People Weren’t the Product?: Building a Web That Loves
Humanity” (David Dylan Thomas)

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

Show more