Smashing Magazine - #363: Friendly Little Front-End Tools

Useful little helpers for the command line, better thinking, maps, SVG, interface copy and timing. Issue #363 July 26, 2022 View in the browser 💨

Smashing Newsletter

Dobar dan Smashing Friends,

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

Terminal Gems

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

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.

Felt

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
Meet Smart Interface Design Patterns, our 7h-video course with 100s of real-life examples. Free video preview.

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 an overview of our upcoming 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.

Logo Turtle

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.

Copybook

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)


From our sponsor

Northwestern’s Online MS in Information Design and Strategy

Northwestern’s Online MS in Information Design and Strategy
Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. Learn more.


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

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)


8. New On Smashing Job Board


9. Recent Smashing Articles


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


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#362: CSS

Tuesday, July 19, 2022

With defensive CSS, conditional styles, CSS styles queries and CSS variables secrets. Issue #362• July 19, 2022 • View in the browser 💨 Smashing Newsletter Buenos días Smashing Friends, The state of

#361: State of the Industry

Tuesday, July 12, 2022

With adaptive pointers, the state of design systems, front-end, component encyclopedia and service design tools. Issue #361• July 12, 2022 • View in the browser 💨 Smashing Newsletter Goedendag Smashing

#360: Web Performance

Tuesday, July 5, 2022

On priority hints, third-parties, speculative prerendering, dealing with LCP and preload scanner. Issue #360• July 5, 2022 • View in the browser 💨 Smashing Newsletter Namastē Smashing Friends,

#359: A Mixed Bag of Goodies

Tuesday, June 28, 2022

From book covers and machine learning to accessibility and moodboards. A mix of goodies for everyone! Issue #359• June 28, 2022 • View in the browser 💨 Smashing Newsletter Hyvää päivää Smashing Friends

#358: Design Tools and Advice

Tuesday, June 21, 2022

With tips on colors in design systems, comparing design tools and taking a closer look at how emotional design works. Issue #358• June 21, 2022 • View in the browser 💨 Smashing Newsletter Ahoy Smashing

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏