Smashing Newsletter: Issue #237

Editorial

As designers and developers, we have certain opinions about certain things. Those opinions can be quite strong actually, whether they're about best practices, tooling, technologies, methodologies or anything in between. Not a single day passes by without debates on perfect technical solutions, most performant toolchains, and most scalable technological stacks. These are all important conversations to have, yet in the myriad of opinions about tooling, it’s rarely that we debate about people, and how our technical decisions affect communication, alignment, and governance.

Last week, I attended Front Conference Zurich, a wonderful community-driven conference dedicated to all things frontend. So many insightful sessions took place (the videos are already released for free), but there was one in particular that really struck home with me. It was Mark Boulton’s session about “The Ugly Truth About Design Systems”.

Mark Boulton speaking about the ugly truth of design systems. Watch the video.

In his talk, Mark argued that successful design systems encompass much more than just scalable, efficient, modularized and standardized components. The really difficult part is much less predictable: people.

Otl Aicher, a German designer who created a design system for the Summer Olympics that took place in Munich back in 1972, once said that a successful design system is “a strictly designed grammar allowing for free, playful expression”. When creating design systems today, we often excel at the first part (i.e. creating an excellent factory-alike tooling with our components), yet we rarely consider what impact a design system has on people, processes, stakeholders, operations, and governance. And more specifically, how people could flawlessly work together by freely exploring and playfully expressing the grammar created for them.

What if we apply design thinking to our colleagues and managers, and perhaps even stakeholders? How would we design a workflow for them to understand the value of a design system in order to use it frequently? What if you set up a brainstorming session or a workshop to study where the bottlenecks in communication lie? Or why a design system isn’t used? Or why design guidelines aren’t followed?

Admittedly, these aren’t necessarily the most exciting topics, but the roots to many problems in organizations are hidden right there — under the pile of technical debt and organizational bottlenecks. People are difficult and chaotic, and they deserve at least as much attention as our wonderful tools do.

— Vitaly (@smashingmag)

There Is No ‘One Perfect Layout’
Type Terms Explained
A Performant Unused-CSS Linter
Accessible Components
Learn And Test Regular Expressions
Field Performance Plugin For Lighthouse
Easy-To-Use CSS Gradients
The Writing Systems Of The World
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. There Is No ‘One Perfect Layout’

“We’re doing it wrong,” argues Jason Pamental. What he means is the way we tackle layouts and our belief that we need to come up with a “perfect layout” — one that works with every piece of content. The results of these efforts are designs that lack variety; even though we have the technology to create more vibrant designs right at our fingertips, we only need to rethink what makes good design on the web (as Jason points out in his thought-provoking article). An inspiring piece about thinking out of the box and embracing modern techniques. (cm)

2. Type Terms Explained

Aperture, counter, bowl, tittle: do you know what these typographic terms mean? If you feel your memory needs a little refresher or if you’re just starting out with typography, then Type Terms is just for you. This animated cheatsheet teaches you the 20 most important typographic terms so that you have the vocabulary you need to discuss typography without struggling for words. (cm)

3. A Performant Unused-CSS Linter

When Leon Sorokin looked for an unused-CSS linter that also removes attribute selectors, he decided to put one together himself. The result is DropCSS. This nifty tool takes your HTML and CSS as input and returns only the used CSS as output — and that exceptionally quickly and thoroughly, while weighing in with only 10KB. Since the custom parsers are highly optimized and can’t handle malformed markup or stylesheets, make sure that your input is well-formed before using the linter. (cm)

4. Accessible Components

You’re looking for an accessible switch toggle or a disclosure widget? Well, Scott O’Hara has got you covered. Scott enjoys building accessible components and has built quite a lot of markup patterns and widgets at this point. To keep track of them and make them available to the community, he started the Accessible Components repository. In it, you’ll find Vanilla solutions for accordions, toggles, widgets, tooltips, buttons, and more, as well as markup components for navigation, landmarks, and forms. Each of the components is based on testing with users and from following W3C specifications and notes. New ones are added regularly. (cm)

5. Learn And Test Regular Expressions

If you want to learn regular expressions or are looking for a place to test them, RegExr is for you. The online tool updates in realtime as you type and supports PCRE and JavaScript flavors of RegEx. You can roll over a match or expression for details and save and share favorites. A cheatsheet and full reference guide are also included. Another one for the bookmarks! (cm)

6. Field Performance Plugin For Lighthouse

Lighthouse audits are an easy way to see what works well on your site and where you still have some polishing to do. A little plugin now is committed to enhancing your Lighthouse reports: the Field Performance plugin. It displays the “field” performance of a page for real-world Chrome users over the last 30 days. The data is collected anonymously in the “field” and provided by the Chrome UX Report. If you want to see what a Lighthouse report looks like with the plugin, be sure to check out the live example. (cm)

7. Easy-To-Use CSS Gradients

Creating a CSS gradient from scratch can be intimidating. But, luckily, there’s a little helper out there that takes away the trouble and makes using gradients a simple act of copying and pasting. Say hello to Gradient Magic, a gallery of unique CSS gradients with everything ranging from standard gradients to angular, striped, checkered, and burst gradients. To find your favorite, you can browse the gallery by style and color. A great addition to any toolkit! (cm)

8. The Writing Systems Of The World

Do you have a sweet spot for typography? Well, then The World’s Writing Systems is for you. The site takes you on a journey through time and the history of writing systems — from the Egyptian hieroglyphs to writing systems that have developed in the last few years, such as Luo in Africa or Badaga in South Asia. The site presents one glyph for each of the writing systems along with details whether the system is already encoded in Unicode. Last but not least, you’ll find further reading resources in case you want to dive in deeper. Fascinating! (cm)

9. Upcoming In Smashing Membership

Thank you for being smashing! A few weeks ago, we released the brand-new Smashing Magazine Print, with practical and thought-provoking articles on ethics and privacy to make us all think. Members ($5 plan) receive the digital version for free, Smashers ($9 plan) get the printed issue shipped directly to their doorsteps. And we have new webinars coming up as well:

Smashing TV on Sept 3 at 16:00 GMT
“WebAssembly: How And Why” with Milica Mihajlija
Smashing TV on Sept 17 at 16:00 GMT
“Image Optimization” with Colin Bendell

Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. (Ah, you could become a Smashing Member, too! Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉)

10. Our Next Smashing Workshops

In our workshops, we are looking into the current state of front-end and interface design, covering advanced challenges and actual real-life solutions to front-end problems. Coming up next:

🇩🇪 SmashingConf Freiburg (Sept 9–10) in Freiburg, Germany.
🇧🇾 CSS Minsk JS (Sept 18–21) in Minsk, Belarus.
🇨🇿 WebExpo (Sept 20–22) in Prague, Czechia.
🇺🇸 Awwwards Digital Thinkers (Sept 25–27) in NYC, USA.
🇸🇪 Nordic.js (Oct 10–11) in Stockholm, Sweden.
🇺🇸 SmashingConf NYC (Oct 15–16) in NYC, USA.
🇺🇸 JAMstack_conf (Oct 16–18) in SF, USA.
🇦🇹 ScriptConf (Oct 25) in Linz, Austria.

Or, if you’d like to run an in-house workshop at your office, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)

September 3, 2019 Smashing Newsletter: Issue #237

Previous Issues