Native CSS Variables

I’ve been using Sass variables for quite a while, so I’m interested to see how native CSS variables (AKA CSS custom properties) compare to preprocessor variables.

Philip Walton does a great job of explaining the difference between native and preprocessor variables. He also outlines some potential uses in his post. I like that he calls out “CSS custom properties” as being the more accurate (and in my opinion, more intuitive) term …

CSS preprocessors are fantastic tools, but their variables are static and lexically scoped. Native CSS variables, on the other hand, are an entirely different kind of variable: they’re dynamic, and they’re scoped to the DOM. In fact, I think it’s confusing to call them variables at all. They’re actually CSS properties, which gives them an entirely different set of capabilities and allows them to solve an entirely different set of problems.

Pretty cool stuff—don’t miss the helpful CodePen demos he made to accompany the post. (1 & 2)

ShareYourShop.Etsy.com

Paravel was thrilled to collaborate with Etsy and to create shareyourshop.etsy.com—a fun little photo-generating web app that Etsy shop owners can use in their holiday promotions.

Etsy Paravel Vector Media Group Shareyourshop

Etsy provided overall guidance as well as some stellar graphics for the layout and photo template itself. Having such great assets and brand guidelines in place made working with Etsy a joy. Vector Media Group built the tool itself, extending our front-end code. We’ve worked with them numerous times in the past, and it’s always a pleasure.

Stephen Hay On Prototypes

The cyclical “should designers code” debate wears me out, but Stephen Hay’s post is a great read in and of itself. I like that he gravitates towards the value of prototyping:

As designers for the web,[…] you are researching, structuring, adapting, testing, laying out, wireframing, setting type for, composing, and [fill in the blank]ing something that people will read, interact with, love, hate, tell others about, and perhaps take with them everywhere they go. And the medium is right in front of you, every day, so you as a designer for this medium have the opportunity to use it to prototype what you’re designing.

Prototyping is about asking reality for feedback.

Dan Matutina for Formula E

Dan Matutina of Plus 63 is easily one of my favorite illustrators. He’s got such a unique style, and I’m always thrilled to see what he’s up to. As an avid F1 fan who is excited to watch Formula E evolve, seeing Dan’s work on these Qualcomm Formula E posters made my day. If anyone has a spare copy of one of these, let me know. I’d love to frame one for my office.

buenosaires
monaco
moscow
putrajaya

BreakpointTester

I’m loving BreakpointTester. It’s a bookmarklet that scans your CSS/breakpoints and displays them all at once. It shows not images, but actual web pages you can scroll, navigate, and even web inspect. Brilliant!

breakpoint-tester

Mr. Robot

I’ve been enjoying Mr. Robot this Summer—It starts with one of the best pilots I’ve ever seen. One small detail that’s stood out for me are the title shots. The music, framing, and oversized logo are just all so epic. Creator Sam Esmail at fastcocreate.com:

mr-robot

The typeface was the one ingredient about the opening titles that we kept as our flag of consistency. Fonts are something I obsess about constantly. People might find that silly, but for me, everything in a film should be deliberate and designed. This was also something that was going to serve as our signature for the overall series, not just an episode. I must have looked at hundreds of fonts before settling on our current one. I’ve always likened our genre to the paranoid thrillers of the ’70s and ’90s, and this title card checked that box for me perfectly.