Smashing Newsletter: Issue #404

Editorial

What would we do without incredible front-end tooling? In today’s issue, we take a closer look at some of the little nifty helpers that can help us avoid the hassle of figuring out just the right set of values for just the right solution. We hope you find a few useful gems in there.

Coming up on May 23–26: SmashingConf SF 2023, all around cutting-edge frontend.

On our end, we are getting ready to dive deep into front-end and tooling, with a few lovely events coming up later this year:

SmashingConf Front-End @ SF 🇺🇸 (May 23–26) all around front-end, CSS, web performance, JavaScript, Next.js and accessibility,
Smashing Meets AI (free, June 20, online), a friendly get-together to discuss the challenges of AI, along with designing and building with it.
Advanced JavaScript Masterclass (Aug 16–30), a roller-coaster of freshly-baked JavaScript awesomeness, with Christophe Porteneuve.

In the meantime, let’s dive into some front-end tooling — from DevTools tips to fluid-type scale calculators! We hope you’ll find them useful — and we can’t wait to see you in-person or online soon!

— Vitaly (@vitalyf)

1. Cross-Browser DevTools Tips

DevTools are a developer’s best friend! And there’s so much more that they can do than what you are already using them for. DevTools Tips shares useful cross-browser tips that help you leverage the power of DevTools and become more productive.

From accessibility to CSS, performance, debugging, and web components, you can browse the tips by category or filter them by browser to see only tips relevant to you. The open-source project was started by Patrick Brosset to get developers more comfortable with DevTools by providing short, specific articles.

By the way, if you have a DevTools tip you’d like to share, you can submit it on the GitHub repository. (cm)

2. Fluid Responsive Design

Responsive experiences are usually designed around quite arbitrary breakpoints. James Gilyead and Trys Mudford offer a more fluid and systematic approach to responsive design: Utopia. Utopia is not a product, plugin, or framework but a way of thinking. Instead of designing for breakpoints, it aims at designing a system within which elements scale proportionally.

Fluid type and space scales are the base of Utopian Design. They help you keep your code minimal, streamline collaboration between designers and developers, and ensure visual consistency.

On the Utopia site, you’ll find articles and a video introduction on the how and why of fluid responsive design — from a designer’s and a developer’s perspective — and a suite of free tools to support your next Utopian project. (cm)

3. Shell Commands Explained

Command line can be daunting. But they don’t have to be. Whenever you have a shell command and aren’t quite sure what it does, Explain Shell is here to explain it. All you need to do is paste the command line into the tool’s search bar and Explain Shell does the heavy lifting for you.

To explain shell commands, Explain Shell parses man pages (it contains the entire archive of Ubuntu), extracts options, and matches each argument to the relevant help text. You can go to Explainshell.com to use the web interface or set up a working environment to run the tool locally using Docker. (cm)

4. Upcoming Workshops and Conferences

As you know, we run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of front-end and design workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events — With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:

Architecting Design Systems Workflow
with Nathan Curtis. May 11–19
SmashingConf SF — May 23–26
The Power of Storytelling UX
with Chiara Aliotta. May 30 – June 14
Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. June 12–26
Figma Workflow Masterclass UX
with Christine Vallaure. June 15–23
The React Performance Masterclass Dev
with Ivan Akulov. June 29 – July 13
Data Visualization Masterclass Dev
with Amelia Wattenberger. July 4–18
Smart Interface Design Patterns Video Course UX
9h-video + Live UX Training with Vitaly Friedman
Jump to all workshops →

5. Fluid Type Scale Calculator

Static type scales are traditionally what you’ll find in a lot of design systems. They define a fixed font size for every viewport width. If you’re looking for a more flexible solution, CSS clamp now makes it possible to use a fluid type scale instead. It consists of a baseline font size and proportionally smaller and larger font sizes.

To make it easy to create fluid type scales, Aleksandr Hovhannisyan built the Fluid Type Scale Calculator. It generates font size variables for a fluid type scale with CSS clamp for you. All you need to do is enter a minimum and a maximum font size and viewport width, and the tool provides you with the final CSS that you can copy into your design system. A preview shows what the scale looks like when applied to different font families. (cm)

6. Modern HTML Email

While the web is advancing at a fast pace, coding for email still means messing with tables, obsolete HTML elements, and other workarounds. If you are frequently tinkering with HTML email or need to take on the challenge for a project you’re working on, Oliver Williams’ article “Modern HTML Email” is a must-read to get you up-to-date on the current state of email.

In the article, Oliver takes a closer look at how a recent update for Outlook improved the situation (no more tables!), what HTML and CSS are capable of doing in email today, and the role that AMP could play to lead email into a better future.

There is still a lot of room for improvement and email certainly hasn’t reached the modern world of coding yet, but things are heading into the right direction. Even if it’s only slowly. (cm)

7. Better Mobile Inputs

No one likes filling out forms, especially on a small mobile screen. A little detail can make the user experience much smoother, though: the mobile input. Alex Holachek built a handy tool to help you properly configure key input attributes and make your forms easier to use on mobile devices.

“Build A Better Mobile Input” lets you experiment with different combinations of type, inputmode, and autocomplete attributes. You can select the attributes from a list, and the tool shows you a preview of what the configuration will look like on your user’s mobile keyboard, whether they use an iOS or Android device. (cm)

8. Fancy Border Radius Generator

When we talk about border-radius, the idea of using it to slightly round the corners on an image or a button is probably the first that will come to your mind. As it turns out, border-radius can also be used for something a bit more fancy. With only eight values, it’s possible to create organic shapes. The Fancy-Border-Radius generator makes it easy.

The generator comes in two versions: a simple version and a version with eight-point full control. Both have in common that you can manipulate a default shape by dragging the handles until you get the organic shape you want. The border-radius code will update in real-time. If prefer to run it locally, the generator is also available as a CLI tool. (cm)

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

May 9, 2023 Smashing Newsletter: Issue #404

Previous Issues