People Writing About Style Guides

Are you thinking about style guides lately? It seems to me it couldn't be a hotter topic these days. I'm delighted to see it, as someone who was trying to think and build this way when the prevailing wisdom was nice thought, but these never work. I suspect it's threefold why style guides and design systems have taken off:

  1. Component-based front-end architectures becoming very popular
  2. Styling philosophies that scope styles becoming very popular
  3. A shift in community attitude that style guides work

That last one feels akin to cryptocurrency to me. If everyone believes in the value, it works. If people stop believing in the value, it dies.

Anyway, in my typical Coffee-and-RSS mornings, I've come across quite a few recently written articles on style guides, so I figured I'd round them up for your enjoyment.

(more…)

Variable Fonts with Jason Pamental

We've already hit you with a one-two punch of variable fonts today. Robin shared Richard Rutter's post on real-world usage of them. Ollie Williams introduced us to the in's-and-out's of using them on the web.

I figured we'd make it a trifecta and link up our discussion about variable fonts with Jason Pamental. Dave and I talk with Jason for an entire hour digging into the real story, possibilities, and future of all this variable fonts business. Don't miss his or Mandy Michael's demo Collections either.

How to use variable fonts in the real world

Yesterday Richard Rutter posted a great piece that explores how the team at Clearleft built the new Ampersand conference website using variable fonts (that’s the technology that allows us to bundle multiple widths and weights into a single font file). Here’s the really exciting part though:

Two months ago browser support for variable fonts was only 7%, but as of this morning, support was at over 60%. This means font variations is a usable technology right now.

And the nifty thing is that there’s a relatively large number of variable fonts to experiment with, not only in browsers but also in desktop design apps, too:

Variable font capable software is already more pervasive than you might think. For example, the latest versions of Photoshop and Illustrator support them, and if you’re using macOS 10.13+ or iOS 11+ the system font San Francisco uses font variations extensively. That said, the availability of variable fonts for use is extremely limited. At the time of writing there are not really any commercial variable webfonts available, but there is a growing number of free and experimental variable webfonts, as showcased in the Axis Praxis playground.

Adobe also made a bunch of variable fonts available a while back, if you’re looking for more typefaces.

Tools for Thinking and Tools for Systems

I’ve been obsessed with design tools the past two years, with apps like as Sketch, Figma and Photoshop perhaps being the most prolific of the bunch. We use these tools to make high fidelity mockups and ensure high quality user experiences. These tools (and others) are awesome and are generally upping our game as designers and developers, but I believe that the way they’ve changed the way we produce work and define UX will soon produce yet another new wave of tools.

In the future, I predict two separate categories of design applications: tools for thinking and tools for systems.

Let me explain.

(more…)

Routing and Route Protection in Server-Rendered Vue Apps Using Nuxt.js

You might have had some experience trying to render an app built with Vue on a server. The concept and implementation details of Server-Side Rendering (SSR) are challenging for beginners as well as experienced developers. The challenges get more daunting when you have to do things like data fetching, routing and protecting authenticated routes. This article will walk you through how to overcome these challenges with Nuxt.js.

Creating Vue.js Component Instances Programmatically

I have been on a Vue.js project that required the ability to create components programmatically. By programmatically, I mean you create and insert the components completely from JavaScript, without writing anything in the template. This article aims to illustrate how different aspects of using components in a template, such as instantiation, props passing, slots, mounting, translates to JavaScript code.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag