Archive: November 28th, 2017

Sandcastles

Take a break. Build a sandcastle. It’s relaxing.

V6: Typography and Proportions | Rob Weychert

Rob walks us through the typographic choices for his recent redesign:

Most of what I design that incorporates type has a typographic scale as its foundation, which informs the typeface choices and layout proportions. The process of creating that scale begins by asking what the type needs to do, and what role contrasting sizes will play in that.

Design Systems Handbook - DesignBetter.Co

A weirdly over-engineered online book with bizarre scrolljacking (I would advise disabling JavaScript but then all the links stop working so you won’t be able to go past the table of contents) but it’s free and the content—by Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield— looks good:

A design system unites product teams around a common visual language. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life. Learn how you can create your design system and help your team improve product quality while reducing design debt.

Infinitown | A WebGL Experiment by Little Workshop

I reckon this could be the canonical WebGL demo.

And if I’m reading dev tools right, this is all done in 86K.

Eric’s Archived Thoughts: Generating Wireframe Boxes with CSS and HTML5

Eric uses some super-clever CSS to “wireframe up” a web page.

I wonder if this could be turned into a little bookmarklet?

From Cats With Love: Welcome The New Smashing Membership — Smashing Magazine

Smashing Magazine has launched its lovely new design, but more importantly, it has launched its lovely new business model. Ads are gone. Patronage is in. This is a resource worth supporting.

i is=”the walrus”

In which Brian takes a long winding route through an explanation of why the is attribute for custom elements is dead before he demonstrates the correct way to use web components:

<!-- instead of writing this -->
<input type="radio" is="x-radio">

<!-- you write this -->
<x-radio>
<input type="radio">
</x-radio>

Sadly, none of the showcase examples I’ve seen for web components do this.