Smashing Newsletter: Issue #363

Editorial

Who doesn’t look for a good little front-end tool every now and then to improve their productivity? In this issue, we have just a few: command line gems, tools for better thinking, better maps, understanding SVG, better interface copy and timing. We’ve also published a round-up of powerful little helpers on SmashingMag, so feel free to dive in when you have a moment.

As we’ve came back from SF, we are now very much getting ready for our next conferences this year. Coming up next is our lovely SmashingConf Freiburg 2022 in our hometown Freiburg, Germany, on Sep 5–7, with plenty of sessions and workshops around accessibility, CSS/JS, design systems and good ol’ front-end.

Oh my, it’s happening again! After two years, SmashingConfs are finally back. Photo by wonderful Marc Thiele.

Afterwards, we head to New York for SmashingConf NYC 2022 on Oct 10–13 with sessions on animation, CSS, accessibility, Web3 and so many other things. There are some lovely workshops as well. We can’t wait — and we can’t wait to see you there!

In the meantime though, off we go exploring all those little friendly front-end tools — happy stumbling, everyone! :)

— Vitaly (@vitalyf)

1. Terminal Gems

Sometimes it’s the regular tools that surprise us the most. What can be that surprising in a good ol’ Terminal? As Jamie Smith has discovered, we can check the calendar and weather forecast right from the command line.

cal -3 in the Terminal returns the current and surrounding months, but you can also check the calendar for the whole of 2022 with cal 2022. We can also use curl http://wttr.in/berlin+germany to receive a weather forecast in your city with a convenient ASCII preview.

Beyond that, there is plenty of useful plugins and improved setup for the Terminal, along with Josh’s Front-End Developer's Guide to the Terminal and a lovely Terminal documentation site DashDash.io.

And if you need even more tooling, Louis has got your back with Powerful Terminal And Command-Line (CLI) Tools For Modern Web Development. (vf)

2. Tools For Better Thinking

There are plenty of digital tools out there to ease a designer’s life — tools for UI design, prototyping, whiteboarding, and much more. But what about one of the most crucial parts that the job as a designer brings along: thinking?

As designers, we need to solve problems and make decisions on a day-to-day basis. Am I solving the right problem? Which option is the best one? What would be the long-term consequences of my decision? Well, thinking tools can help us find answers to questions like these. A wonderful overview of such tools comes from Adam Amran: Untools.

Untools is a collection of thinking tools and frameworks to help you solve problems, make decisions, and understand systems. From the Minto Pyramid to the Hard Choice Model, the tools cover systems thinking, decision making, problem-solving, and communication. A guide helps you choose the right tool for your needs. One for the bookmarks. (cm)

3. Collaborative Mapping Tool

Maps on the web don’t need to be boring, and they don’t need to be hard to create either. Bringing the simple elegance of modern creative software to maps, the collaborative mapping tool Felt is here to hold up to this promise.

Currently in public beta and free to use for individuals, Felt provides smart tools that make creating maps as easy as drawing on paper, while photos, links, and videos make your maps internet-native. When creating a map, you can bring in your own data or rely on a built-in library of more than 50 data layers (for information on flood hazards or wildfires, for example).

Sharing is simple, too: Every map has a unique link you can share with your team (for live multi-user editing) or the public. No matter if you need to map out the way from the train station to an event venue or visualize evacuation areas in case of natural disasters, Felt has got your back. (cm)

4. Upcoming Online Workshops

That’s right! We run online workshops on frontend and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smart Interface Design Patterns, a 10h-video course with Vitaly Friedman,
Interface Design Patterns UX Training, taking place in September 2022. Last early-bird-tickets.

As always, here’s an overview of our upcoming workshops:

The React Performance Masterclass Dev
with Ivan Akulov. July 28 – Aug 11
Designing The Perfect Web Forms UX
with Vitaly Friedman. Aug 29–30
Designing Better UX With Top Tasks Workflow
with Gerry McGovern. Sept 13–27
Designing Better Products Masterclass UX
with Stéphanie Walter. Sept 21 – Oct 5
Optimistic UI Masterclass Dev
with Zell Liew. Oct 6–14
Designing for Emotion Masterclass UX
with Aarron Walter. Oct 17–18
Jump to all workshops →

5. SVG Path Visualizer

How does SVG work again? Once you are given a source code of an SVG file, would you be able to decipher what exactly is going on there? Probably not. But when it comes to debugging or quick changes, it’s useful to do so. Cassie Evans has created a little Logo Turtle, with SVG path commands, visualizing the SVG syntax in a little demo. Cassie also demystifies the SVG syntax with Jake Archibald in a 15-min video.

With SVG Path Visualizer, you can enter an SVG path data (the string inside the d attribute) and the tool explains the magic happening behind the scenes in a human-understandable language. And you can make some fine adjustments using SVG Path Editor as well.

And if you need more SVG tools and generators, we’ve got your back with a round-up of SVG generators. (vf)

6. Just When You Need A Copy

Sometimes coming up with just the right words is difficult. And sometimes you need just a bit of inspiration to start looking in the right direction. Copybook tries to help with just that.

The tool gathers various examples of interface copy, all tagged and grouped by categories and mood. There is also search available, so you can find something specific for a confirmation message, errors or upsell.

If you need a few more tools SpeakHuman.today generates human-centric microcopy for all your needs and UIcopy is a nifty plugin for Figma and Adobe XD with pre-built copy templates. Plus, don’t forget Tiny Words Matter, a friendly Twitter account that provides a curated dose of well-crafted microcopy, too. (vf)

7. Productivity Timers

We all like to be productive, but being productive requires a certain level of organization and discipline. One little thing that has been immensely helpful for me is the focus time. Just before I start out with a task, I set up the time until when I’d love to complete the task, and set up a timer — or hourglass — for that task.

AnotherPomodoro helps you to achieve it seamlessly. It has various views and timers, supports multiple tasks, and you can even schedule a timer ahead of time. BigTimer is similar, but it’s larger and much simpler — great for meetings or just general time-tracking. Helpful! (vf)

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).

July 26, 2022 Smashing Newsletter: Issue #363

Previous Issues