Articles, Links, and Tools From An Event Apart Boston 2019
Jeffrey Zeldman
Val Head
- Exclusive Design - A well-researched read that will get you re-thinking your assumptions about accessibility and inclusive design.
- Your interactive makes me sick (and what to do about it) - A first-person account of the affects of vestibular disorders and similar disorders.
- Responsive design for motion - Potential triggers, and how to use prefers-reduced-motion from the WebKit blog.
- The prefer-reduced-motion query at a glance
- An introduction to the reduced motion query
Eric Meyer
Rachel Andrew
The code examples can be found in this CodePen Collection.
Flexbox
Sizing
- CSS Intrinsic and Extrinsic Sizing Spec
- How Big Is That Flexible Box
- CSS is Awesome discussion on CSS Tricks
- Graduating to Grid An Event Apart Video
- How Big Is That Box: Understanding Sizing in Grid Layout
Logical Properties and Values
- Logical Properties and Values Spec
- Understanding Logical Properties and Values
- CSS Logical Properties and Values on MDN
Scroll Snap
Subgrid (Grid Level 2)
Paged Media
Multicol
Fragmentation
Regions
Exclusions
Jen Simmons
Jason Pamental
- Web Typography News – A weekly newsletter I publish with tips and resources about web typography.
- IBM Plex Sans Variable – Brand new! IBM has just released a 2-axis (width and weight) variable version of Plex Sans.
- Typetura.js – Scott Kellum and Sal Hernandez’ fluid typesetting tool. Really interesting, and able to scale more than just type. Well worth a look!
- Textblock.io from Glyphic – Another Javascript tool for typesetting blocks of text from Theo Rosendorf and Glyphic.
- Dark Mode in CSS – Great run-down on different techniques for dealing with day/night modes on the web.
- MDN Variable Fonts Guide – I guide I wrote on the MDN site covering the basics of implementing variable fonts.
- Variable Font Demos on CodePen – A collection of demos I've created on CodePen for you to play with!
- Variable Font resources on my site – Lots of links, articles, books, talks and whatnot
- Essay explaining variable fonts as a concept – Good for less techy and more designy/brandy folks as well.
- Firefox (font tools!!!) – Explore the new fonts tab in the Firefox Dev Tools that will show you everything available in a given font (normal or variable, but let's all agree that the variable ones are way cooler)
- Wentin's Font Playground – Wentin is a designer/developer at Adobe, and she has pioneered some truly unique and compelling UI ideas for working with variable fonts. Really amazing stuff.
- Wakamai Fondue (What Can My Font Do... get it?) – Simple drag-and-drop web interface to discover all the features available in a given font file.
- Axis Praxis – The original variable fonts playground.
- V-Fonts.com – Nick Sherman's variable fonts catalog site
- Roslindale by DJR – David Jonathan Ross' design is what forms the primary typography for the talk and for my own site.
- FF Meta from Monotype – This is a fantastic typeface, and it was a real treat to design the demo page for it's introduction.
- Amstelvar by Type Network – One of the first variable fonts, and still one of the most compelling ones to showcase the breadth of possibilities.
- W3C Github CSS Fonts Level 4 (variable fonts and other bits) – Read up on the features and issues, provide feedback, and help shape the direction of the web
Code
The following code examples from the presentation can be tried out live.
- Example code from my recent Smashing Conf SF live demo – This repository includes a whole range of techniques all wrapped up in Odysseus’ travel blog.
- Simple repository with example code and fonts – This is a simple repo with an example page or two that shows all of the techniques from the talk.
Sara Soueidan
The following series of articles is basically the talk written down in more depth:
- SVG Filters 101 — an introduction to SVG Filters, how to create them and use them.
- SVG Filter Effects: Outline Text with feMorphology — deep dive into the
feMorphologyfilter primitive and how to use it to create text outlines. - SVG Filter Effects: Poster Image Effect with feComponentTransfer — in which you learn how to use the
feComponentTransferto create poster image effects. - SVG Filter Effects: Duotone Images with feComponentTransfer — in which you learn how to use
feComponentTransferto create Photoshop-grade duotone image effects. - SVG Filter Effects: Conforming Text to Surface Texture — what the title says. ;)
- SVG Filter Effects: Creating Texture with feTurbulence — did you know SVG can generate and create texture?!
More resources that I used to learn SVG Filters and find inspiration from:
- Lucas Bebber’s Codepen experiments
- Michael Mullany’s writing, Codepen experiments, and his contributions to the Web Platform Docs on SVG Filters.
- David Dailey’s introduction to SVG Filters
- Dirk Weber’s text Effects created with SVG Filters
- Yoksel’s SVG Filter Experiments on Codepen
- Yoksel’s visual SVG Filters tool
- The SVG Filters Specification
Sarah Parmenter
- Ancestry
- Facebook Ad Preferences
- Every Website
- This Person Does not Exist
- Kill Your Personas
- Cookie Cleaner
- Natural Cycles
- Google Photos
- Bloom & Wild
- Metro UK
- Design for Real Life
- GoSquared
Tools I use that are relevant to this work:
Dan Mall
Marcy Sutton
- Chrome Accessibility Devtools
- Firefox Accessibility Inspector
- Dark Side of the Grid by Manuel Matuzovic
- Grid Level 2 and Subgrid by Rachel Andrew
- More accessible markup with display: contents by Hidde de Vries
- CSS Tricks Guide to Flexbox
- Accessibility Insights for Web
- What Input
- Ally.js focus-within polyfill
- Reduced Motion Codepen
- Animatable CSS properties
- Styling in Gatsby.js
- CSS-in-JS Codepen for supporting user stylesheets
Jason Grigsby
Web form best practices
- The Question Protocol: How to Make Sure Every Form Field Is Necessary by Caroline Jarrett
- 5 Studies on How Form Length Impacts Conversion Rates
- Boingo form field reduction from Luke Wroblewski
Sign-up and login
- Google Reveals A Big Problem With Passwords On Safer Internet Day
- Hackers are passing around a megaleak of 2.2 billion records
- Data Breaches, Phishing, or Malware? Understanding the Risks of Stolen Credentials (PDF)
- The End of Passwords is Here - You'll Never Need One Again Soon - YouTube
- What’s new with sign up and sign in on the web (Google I/O ’18) - YouTube
- Getting to a world without passwords - BRK3031 - YouTube
- Introducing Web Authentication in Microsoft Edge
- Passwordless Web Authentication Support via Windows Hello - Mozilla Security Blog
- WebAuthn Demo
- WebAuthn Demo and explainer
- Open Source WebAuthn Repo
- Authentication vs. Federation vs. SSO
- 10 Advantages and disadvantages of social logins
- Inside iOS 12: AutoFill gives password manager apps on your iPhone a big boost
Checkout and payment
- Cart abandonment rate
- Payment Request API
- Introducing Web Payments: Easier Online Purchases With The Payment Request API
- Deep Dive into the Payment Request API
- Choosing an API for Implementing Apple Pay on Your Website
- Stripe Demo
- Checkout and Payment - Apple Pay - Human Interface Guidelines - Apple Developer
- Progressive Web Apps book
- Campmor decreases cart abandonment 65% using Payment Request API
Autofill
Gerry McGovern
- Buurtzorg website
- Buurtzorg: the Dutch model of neighbourhood care that is going global
- It’s too slow! It’s taking 600 milliseconds to load: Larry Page - Gmail
- Ask HN: Anyone else find the new Gmail interface sluggish?
- The New Normal: Viacom young people study
- Physics paper sets record with more than 5,000 authors
- Atypical Combinations and Scientific Impact
- Top user tasks European Union
- Fast Path to a Great UX — Increased Exposure Hours
- Empathy: the web professional’s greatest skill
- How Slack Became a Unicorn Company in 2 Years
- Collaborating and Connecting: Gerry McGovern
- The Huge, Unseen Operation Behind the Accuracy of Google Maps
- Continuous user research in 11.6 seconds, Tomer Sharon, Amazon
- Inclusive content, ethical tech, and you: Sara Wachter-Boettcher, Confab 2018
- Make me think! The design of complexity. Ralph Ammer
- Gerry McGovern website
- Top Tasks: Customer Carewords website