Articles, Links, and Tools From An Event Apart Boston 2019

An in-progress compendium of articles, links, tools, and other resources shared by our speakers at An Event Apart Boston 2019.

Jeffrey Zeldman

Mina Markham

Art Direction, Design & Creativity

Progressive

Localized

Cross-Functional

Inclusive

Systematic

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

Logical Properties and Values

Scroll Snap

Subgrid (Grid Level 2)

Paged Media

Multicol

When And How To Use Multi-column Layout

Fragmentation

Breaking Boxes With CSS 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
Google’s ‘Progressive Font Enrichment’ proof-of-concept demo – This is the first exploration of what we’re working on in the W3C Web Fonts Working Group—which will lead to some truly revolutionary changes in how we serve fonts on 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 feMorphology filter 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 feComponentTransfer to create poster image effects.
SVG Filter Effects: Duotone Images with feComponentTransfer — in which you learn how to use feComponentTransfer to 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?!