Articles, Links, and Tools From Online Together: Spring Summit 2022
“Fluid Design Tools for a Responsive Design System World” (Jason Grigsby)
A look at how design tools should integrate with design systems and how close we can get to an ideal fluid design tool today.
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
- Framer
- Importing External Code into Framer
- UXPin Merge
- UXPin Merge framework support
- Interplay
- Figma
- Breakpoints Plugin for Figma
- Figma Accessibility Plugins
Interesting tools tackling design system collaboration
“Beyond the Screen: Immersive Design for Spaces” (Preston So)
How to extend our expertise with the web into the expanse of the immersive.
Articles and talks
- “Immersive content strategy” (Preston So, A List Apart, April 29, 2021)
- “Using WebXR with Babylon.js” (Preston So, Smashing Magazine, October 9, 2020)
- “Storyboarding in virtual reality” (Vincent McCurley, May 22, 2016)
- “A storyboard for virtual reality” (Andrew Leitch, January 5, 2017)
- “VR paper prototyping” (Saara Kamppari-Miller, April 13, 2017)
- “Simple low-fidelity VR prototyping: Practical how-to advice” (Michael C. Albers, November 1, 2018)
- “Breaking Drupal out of the box with AR and beacons” (Preston So and Chris Hamper, DrupalCon Vienna 2017, September 27, 2017)
Books
- Interaction Design for 3D User Interfaces (Francisco R. Ortega, Fatemeh Abyarjoo, Armando Barreto, Naphtali rishe, Malek Adjouadi)
- Unleashing the Power of Digital Signage: Content Strategies for the 5th Screen (Keith Kelsen)
- Practical Augmented Reality (Steve Aukstakalnis)
- Creating Augmented and Virtual Realities (Erin Pangilinan, Steve Lukas, Vasanth Mohan)
- The VR Book: Human-Centered Design for Virtual Reality (Jason Jerald)
- Understanding Virtual Reality: Interface, Application, and Design (William R. Sherman and Alan Craig)
- Virtual Reality and the Built Environment (Jennifer Whyte and Dragana Nikolic)
- Learning Virtual Reality (Tony Parisi)
“Design and Development Considerations for Dual Screen Devices” (Stephanie Stimac)
Dual-screen/foldable devices are starting to emerge on the market, offering new and interesting opportunities—as well as challenges.
“In and Out of Style” (Jeremy Keith)
Let’s take a look at history of the World Wide Web and then cast our gaze to the future!
- A Mind at Play: The Brilliant Life of Claude Shannon, Inventor of the Information Age by Jimmy Sonni and Rob Goodman
- The Web Is Agreement by Paul Downey
- CERN 2019 WorldWideWeb Rebuild
- What is a good standard? An essay on W3C’s design principles by Bert Bos
- Design Principles
- Tweet by Miriam Suzanne
- Open UI
Blog posts
- The Languages Which Almost Became CSS by Zack Bloom
- A Look Back at the History of CSS by Jay Hoffmann
Presentations
- On the origin of cascades by Hidde de Vries
- CSS Reset by Bert Bos and Håkon Wium Lie
Proposals (email)
- Request for Comments: STYLESHEETS by Rob Raisch, June 1993
- Stylesheet Language by Pei Wei, October 1993
- Cascading HTML style sheets – a proposal by Håkon Wium Lie, October 1994
Papers (PDF)
- A Mathematical Theory of Communication by Claude Shannon, 1948
- Cascading Style Sheets by Håkon Wium Lie, 2006
People (Wikipedia)
“CSS, JavaScript, & Accessibility” (Ire Aderinokun)
More often than not, what makes a web page less accessible is the CSS and JavaScript we add to the HTML.
- WCAG 2 Overview | Web Accessibility Initiative (WAI) | W3C
- User Agent Accessibility Guidelines (UAAG) 2.0
- Accessibility - Learn web development | MDN
- Understanding the Web Content Accessibility Guidelines - Accessibility | MDN
- Motherducking Website
CSS & Accessibility
- Accessibility support for CSS generated content - Tink - Léonie Watson
- Hiding Elements With CSS
- Modern CSS Layout, power and responsibility
- When do the :hover, :focus, and :active pseudo-classes apply?
JavaScript & Accessibility
- Accessible JavaScript
- Page Weight | 2021 | The Web Almanac by HTTP Archive
- Media Players | Web Accessibility Initiative (WAI) | W3C
- Accessible HTML5 Media Players & Resources
- Index of ARIA Design Pattern Examples | WAI-ARIA Authoring Practices 1.2
- Frend — A collection of accessible, modern front-end components.
- Inclusive Components
“Browser Compatibility in an Evergreen World” (Rachel Andrew)
Maybe some things never change, but browser compatibility issues in 2022 are quite different to those we faced 10 or even 5 years ago.
- CSS Grid Layout by Rachel Andrew—An Event Apart video
- New to the web platform
- web-platform-tests dashboard
- More accessible markup with display: contents
- Interop 2022: browsers working together to improve the web for developers
- PostCSS: A tool for transforming CSS with JavaScript
- GoogleChromeLabs / container-query-polyfill
- Welcome to Bugzilla
- Components for WebKit
- Issues - chromium
“Websites are Good Now” (Chris Coyier)
It's time to take a look at how you’re approaching some of the building blocks of your website, because many things are easier and better than in the past.
- Breakfast Burritos in Bend, Reviewed.
- MD Primer · Mass-Driver™
- How to use @font-face in CSS
- CSS Almanac → Properties → F → font-display
- Fluid Type on a Grid
- Fluid Type Scale Calculator
- Variable font animation
- A Guide to the Responsive Images Syntax in HTML
- Deliver remote media files
- Image Optimization by Addy Osmani
- A Complete Guide to Grid
- Flexible Grids
- A New Container Query Polyfill That Just Works
- Container Units Should Be Pretty Handy
- CSS Container Query Units
- Container Units
- Web Animations API Concepts
- Down the Rabbit Hole (with Web Animations API)
- Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines
- Scroll-Linked Animations: Horizontal scroll section (@scroll-timeline version)
- CSS Almanac → Properties → O → offset-path
- Move Modal In on Path
- FLIP Your Animations
- Flip
- How to Cycle Through Classes on an HTML Element
- Animating with the Flip Plugin for GSAP
- CloudFlare Workers
“Establishing a Remote Design Practice From Scratch” (Erin Casali)
One of the key transformations that should come with remote work is asynchronous collaboration.
- M. Mullenweg (2020) Five Levels of Autonomy
- S. Graber (2015) Why Remote Work Thrives in Some Companies and Fails in Others
- J. N. Bailenson (2021) Nonverbal Overload: A Theoretical Argument for the Causes of Zoom Fatigue
- E. Casali (2015) The Three Speeds of Collaboration
- E. Casali (2020) The Traits of Good Remote Leaders
- E. Casali (2021) How to reduce video call fatigue
- E. Casali (2019) The Remoteness Continuum
- E. Casali (2020) Text Standups
“Don’t Worry, Be Appy” (Aaron Gustafson)
The web continues to evolve deeper connections with operating systems.
- Yes, That Web Project Should Be a PWA
- 30 Days of PWA
- Web App Manifest spec
- Web App Manifest @ MDN
- ImageResource spec
- VSCode PWA
- Squoosh PWA
- Web App Manifest - Application Info spec
- PWA Builder
- Find PWA
- PWA Store
- PWA List
- AppScope
- What Web Can Do Today
- Navigator.share()
- Receiving shared data with the Web Share Target API
- File Handlers
- The File System Access API: simplifying access to local files
- Protocol Handlers
- registerProtocolHandler
- Link Handlers
- Launch Handlers
- Get things done quickly with app shortcuts
“I Can :has() New CSS?” (Eric Meyer)
Recent additions to the CSS landscape that deliver a lot of power and flexibility in places you might not expect.
- CSS Cascading and Inheritance Level 5 § 6.4. Cascade Layers
- Selectors Level 4 § 4.2. The Matches-Any Pseudo-class: ‘:is()’
- Selectors Level 4 § 4.4. The Specificity-adjustment Pseudo-class: ‘:where()’
- Selectors Level 4 § 4.5. The Relational Pseudo-class: ‘:has()’
- Can I Use… CSS Cascade Layers
- Can I Use…
:is()pseudo-class - Can I Use… CSS selector:
:where() - Can I Use…
:has()CSS relational pseudo-class - New WebKit Features in Safari 15.4
- Interop 2022 dashboard
- CSS Qualified Selectors
- Solving container queries today (2018)
- Contain Your Excitement
- 'has' prototyping status [BlinkOn 15]
“Empathy by Design” (Sharon Steed)
What if you don’t know where you’re succeeding when engaging empathy, and where you need a few tweaks?
- “Driving Inclusion with Empathy” (LinkedIn Course)
- An article on learning from mistakes to be better manager
- Communilogue
“The Content Design of Civil Discourse: Turning Conflict into Collaboration” (David Dylan Thomas)
There are simple design and content design choices we can make that encourage collaboration over conflict.