#120 - The power of Subtraction
Hey everyone,
Welcome to issue #120, your weekly roundup of what’s happening in design, code and typography.
News (from me) #
I finally added syntax highlighting to my website. It should make some of those monster code blocks easier to digest. If you run a Hugo site and want to know how I did it, here’s my latest article on Performant syntax highlighting in Hugo.
Since I simplified my build process I’m really enjoying working with Hugo again, particularly for the build times – out of the box they’re unrivalled for speed.
It seems I’m not the only one enjoying the benefits of simplifying. Lots of people are writing about it. Clearly it’s what’s needed, particularly in the world of web development. There’s no denying, over the past few years things have become overly complicated and many of us have suffered as a consequence.
Let’s begin with more thoughts on complexity and the power of subtracting.
Thought provoking #
“The adding mindset is deeply ingrained. It’s easy to think I need something else. It’s hard to look instead at what to remove.” Subtract by Derek Sivers.
“When we declutter our designs to focus on the essentials, we create minimalist interfaces that are accessible for people with cognitive disabilities. And aesthetic.” Alex Chen in Accessibility drives aesthetics.
The Rising Complexity of JAMstack Sites and How to Manage Them. Mike Riethmuller proposes ‘JAMstack Plus’ – a personalized content management layer and unified API to combine the benefits of a CMS with static site generators.
Design and Code #
Design more, resize less, with Auto Layout. Figma launches Auto layout – Buttons can resize with their text. Lists can rearrange themselves when items are moved around. And elements can be nested to create complex interfaces which respond to their content.
Music and Web Design. An interesting piece from Brad Frost where he compares the parallels between music and web design/development.
Calculating Color: Dynamic Color Theming with Pure CSS. Una Kravets shows you how to build custom dynamic color themes with CSS Custom Properties, HSL colors, and calc(). Create custom theming with no dependencies.
The Full Partial Series Part 1: Caching! A new series from Regis Philibert on Hugo Partials and what you can do with them beyond the basic includes. Learn how to cache your partials to speed up build time and use partials as functions.
Adding cursor: pointer to buttons. Do you do it or not? Siddharth Kshetrapal resurfaced the great debate on Twitter this week.
Re-creating the ‘His Dark Materials’ Logo in CSS from Michelle Barker.
Typography #
Interactivity and Animation with Variable Fonts. Mandy Michael demonstrates how to create interactive, creative text on the web by combining variable fonts with familiar CSS and JavaScript techniques.
An Introduction to Variable Fonts. Jason Pamental on the benefits of Variable fonts and how to use them.
Simplified Fluid Typography. Chris Coyier shows the simplest way to achieve fluid type, in one whole line of CSS.
Review of the Best Typography Books for Designers by Jeremiah Shoaf. Definitely one to bookmark!
Something to watch #
Test Keyboard Accessibility using the Firefox Accessibility Inspector. Youri Wims teaches you how to configure your browser and system to start keyboard testing in addition to showing you how to use the Firefox Accessibility Inspector to troubleshoot a keyboard accessibility issue.