aneventapart.com

Our favorite Quick Clicks from last year’s AEA Digest, plus some cherished deep cuts.

CC oo dd ee

Heading levels are still important, especially for assistive technology like speaking browsers. webdesign.tutsplus.com/articles/the-importance-of-heading-levels-for-assistive-technology--cms-31753

Tantek Çelik and An Event Apart’s Jeffrey Zeldman talk about the secret history of web standards, healing the rift between CSS lovers and toolchain fans, and whether the #indieweb can save us from the downsides of social media on The Big Web Show podcast, № 186. 5by5.tv/bigwebshow/186

James Nash explores the wonders of the cascade for component styling in A Tale of Two Buttons. medium.com/buildit/a- tale-of-two-buttons-e63185aefd5f

The web’s drowning in a sea of JavaScript, awash with needless bloat, inaccessible cruft, and unsustainable patterns. A List Apart’s Jeremy Wagner shares how to build the right things the right way, using the web platform the way it was meant to be used, in Responsible JavaScript: Part I. alistapart.com/article/responsible-javascript-part-1

AEA co-founder Eric Meyer shares a small hack for showing breakpoint information on-screen during development. meyerweb.com/eric/thoughts/2018/02/21/displaying-css-breakpoint-information-with-generated-content

CSS keyloggers are just the start: Jake Archibald demonstrates why Third party CSS is not safe. jakearchibald.com/2018 /third-party-css-is-not-safe

In this Layout Land video, AEA speaker Jen Simmons shows exactly how to create a common card layout by nesting a Flexbox layout inside a Grid layout, all while thinking through accessibility and using zero media queries. www.youtube.com/watch?v=dQHtT47eH0M&feature=youtu.be

CSS Basics: Fallback Font Stacks for More Robust Web Typography by Chris Coyier. css-tricks.com/css-basics-fallback-font- stacks-robust-web-typography

Styling Empty Cells with Generated Content and CSS Grid Layout by Rachel Andrew. www.smashingmagazine.com/2018 /02/generated-content-grid-layout

Discover what runs a website: whatruns is “a free browser extension that helps you identify technologies used on any website at the click of a button.” www.whatruns.com

The Multi-Grid One-Page Layout: An experiment using Flexbox & CSS Grid with HTML5 Sections by Nikki Pantony. medium.com/nikkipantony/multi-grid-one-page-layout-css-grid-6efefd537404

Hugo Giraudel shows how to leverage CSS counters to create automatic, accessible footnotes. www.sitepoint.com/accessible-footnotes-css

A curated collection of useful Javascript snippets that you can understand in 30 seconds or less. github.com/Chalarangelo/30-seconds-of-code

Is your site’s footer ready for next year? Get some common code snippets to do it automatically. updateyourfooter.com You’ve just been onboarded to an existing project to replace a departing developer. Or maybe you just opened that old project of yours from a few years ago. You are faced with dread and horror when looking at the code. You can do only one thing: Clean up the mess! Hugo Giraudel shows how. www.sitepoint.com/cleaning-up-a-css-codebase

DD e e s s i i gg nn

Just like it says: How to design a payment form your customers will actually complete by Dilem Akıner Akışık. medium.com/swlh/how-to-design-a-payment-form-your-customers-will-actually-complete-55a986fe3ada

“This is where a distinct design system can be helpful: to solve your organization’s unique problems in a way a generic tool isn’t designed to help with.” – Dan Mall, Distinct Design Systems danmall.me/articles/distinct-design-systems

Using Type: Typesetting in the new United States Web Design System 2.0 means understanding the relationship between font family, font size, and line-height. Font normalization FTW! v2.designsystem.digital.gov/design-tokens /typesetting/overview

We are Colorblind provides helpful tips to make sure your design works for the more than 300 million people who have some form of colorblindness. wearecolorblind.com

Variable Fonts is a simple resource for finding and trying variable fonts. Enjoy! v-fonts.com

Making CSS Animations Feel More Natural by Brandon Gregory. css-tricks.com/making-css-animations-feel-natural

V6: Color—A new approach to one of my biggest design weaknesses, using basic color theory, HSL, and Sass by Rob Weychert. v6.robweychert.com/blog/2018/02/v6-color

Adam Wathan and Steve Schoger share seven rock-solid design “cheats”—worth reading even if you're a pro. medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

If you want to support emoji in your design but don’t want to run afoul of copyrighted sets like Apple’s, EmojiOne is for you! www.emojione.com/emoji/v3

In Who Should Pay? Aaron Gustafson discusses the importance of putting the user experience ahead of our own convenience, even when that means changing how we work. aaron-gustafson.com/notebook/who-should-pay

Three takeaways for web developers after two weeks of painfully slow internet. medium.com/@GaborLenard/three-takeaways- for-web-developers-after-two-weeks-of-painfully-slow-internet-9e7f6d47726e

MailChimp has done it again—their complete style guide is online and free for all to see. Use it as a template or to spark ideas of your own. styleguide.mailchimp.com

Check out this great visualization of Crayola’s color history. www.datapointed.net/2010/01/crayola-crayon-color-chart

A comprehensive guide to font loading strategies. And he means comprehensive! Zach Leatherman shares the joys, sorrows, and especially the trade-offs of getting real type onto the web. www.zachleat.com/web/comprehensive-webfonts

A curated collection of the The 40 Best Google Fonts according to Typewolf, who keeps it updated. (We used it to pick the fonts for this collection!) www.typewolf.com/google-fonts

Happy three-year anniversary to Design for Real Life, by Sara Wachter-Boettcher and An Event Apart’s own Eric Meyer. abookapart.com/blogs/press/happy-bookiversary-to-design-for-real-life PP r r oo cc ee s s s s

How fast is AMP, really? Tim Kadlec is on the case. timkadlec.com/remembers/2018-03-19-how-fast-is-amp-really

Vapid is an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML. It’s great for small teams and cleanly structured websites. www.vapid.com

“Presenting our work with a realistic desktop environment challenged the way we thought about desktop interfaces.” Desktop Prototyping by Zach Johnston of Dropbox Design. medium.com/dropbox-design/desktop-prototyping-a6004fb5598a

Deque System’s aXe (The Accessibility Engine) open source library is a lightweight (~100 KB), fast, portable JavaScript library that executes automated accessibility testing inside your testing framework or browser of choice. www.deque.com/products/axe

Speaking of accessibility, how about a “visual screen reader?” Nathan Smith’s ‘construct.css’ is here to deliver just that. css-tricks.com/introducing-trashy-css

Colorable v1.0.5 is a web color combination contrast tester for WCAG 2 compliance. jxnblk.com/colorable/demos/text

Little Things I Like to Do with Git. From Harry Roberts at CSS Wizardry. csswizardry.com/2017/05/little-things-i-like-to-do- with-git

Brad Frost built an interactive Performance Budgeting Builder just for you. codepen.io/bradfrost/full/EPQVBp

Sagi Shrieber shares a simple, five-step method to convert any web page to an editable vector Sketch document. hackingui.com/design/website-to-sketch

II mmaaggeess

Explore in ultra-high resolution you can use on your website, and another 34,000+ high-res artworks you can also use. www.artic.edu/collection & www.clevelandart.org/art/collection/search?only-open-access=1

The internet company as an old, ruined, brick-and-mortar storefront. An art project by Andrei Lacatusu. www.behance.net/gallery/52646779/Social-Decay

Swapping Images with the Sizes Attribute, from the filament group. www.filamentgroup.com/lab/sizes-swap

Retina, non-Retina, 1X, 2X, 3X, and more—designer Peter Nowell explains how pixel density works and how it affects your designs. medium.com/@pnowelldesign/pixel-density-demystified-a4db63ba2922

Are you familiar with chroma subsampling? Neither were we, but it turns out it can get you close to 20 percent reduction in image sizes. Fairly technical, but well worth the read. calendar.perfplanet.com/2015/why-arent-your-images- using-chroma-subsampling

Thanks for reading!