View profile

Friday Front-End - Issue #275: How to name design tokens, sticky CSS grid items, the dangers of data URIs, and more!

Friday Front-End - Issue #275: How to name design tokens, sticky CSS grid items, the dangers of data URIs, and more!
By Scott Vandehey • Issue #275 • View online

Links
Naming Tokens in Design Systems
This article expands on how to consider token naming with a solid base extended by modifiers, objects and namespaces. Along the way, principles and topics like completeness, order, and polyhierarchy deepen appreciation for the challenges that teams face as a token inventory grows.
medium.com  •  Share
If you’ve ever tried to put a sticky item in a grid layout and watched the item scroll away with the rest of the content, you might have come to the conclusion that position: sticky doesn’t work with CSS Grid. Fear not! It is possible to get these two layout concepts working together. All you likely need is one more line of CSS.
melanie-richards.com  •  Share
Inspired by Jason Lengstorf, I added social sharing images to all my blog posts on this site. This means that when you share an article here to a place like Twitter, you’ll get a nice big card.
www.stevenhicks.me  •  Share
In the December 2018 edition of the Performance Advent Calendar, Doug Sillars reminded us that base64 encoding is a performance anti-pattern. But yet, anecdotally, over the last few years I’ve noticed the number of sites with badly implemented data URIs seems to be increasing rather than decreasing. And most of the increase seems to be driven by build tools, and perhaps Web Pack in particular.
calendar.perfplanet.com  •  Share
user-scalable=no and suppressing zoom suppression
The story goes as follows: Once upon a time there was a meta viewport property called user-scalable=no that suppressed pinch zoom on the page it was on. As a result users could not zoom in, even if they needed to. This was obviously a bad idea, and therefore browsers stopped supporting it. At least, I thought that was the story. Turns out it isn’t.
www.quirksmode.org  •  Share
Videos
UI Tutorial: Redesigning the Almanack of Naval (in 10 Min)
In this 10-Minute Redesign, we’ll redesign two screens from Eric Jorgensen’s website for his book Navalmanack.com. We’ll be discussing typography, brand, design inspiration, and more.
www.youtube.com  •  Share
Sponsor
Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.
Did you enjoy this issue?
Scott Vandehey

Front-end development links tweeted daily, emailed weekly.

If you don't want these updates anymore, please unsubscribe here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue