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

Key phrases

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

Adobe AI, Remote, Stripe Sessions, Node.js Redesign, light-dark()

Thursday, March 28, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 28 2024 Defining experience quality in large language

Are Photorealistic Renderings Worth It?

Wednesday, March 27, 2024

Plus, the go-to garden stores of top designers and landscaping pros View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Home Decor, Lamp, Desk, Furniture,

CSS Variable Groups, Layout Rhythm, Animate Borders, Parallel Lives, Visualization Techniques

Wednesday, March 27, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 27 2024 Proposal: CSS Variable Groups lea.verou.me CSS

The History of Ikat

Tuesday, March 26, 2024

Plus, Kips Bay Decorator Show House New York announces designer lineup View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Art, and Painting SAVE YOUR

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

Progress Indicator, Lissajous Curves, Pixel to Ink, Azulejo, Mac at 40

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 26 2024 Front-End solution: progress indicator piccalil.

Responsive Font Size, Icon Design, text-emphasis, Inclusive Sans, Accessible Forms

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 25 2024 A formula for responsive font-size jameshfisher.

👏 Impressive Dashboard Design Files + 🏆 Challenge Updates

Tuesday, March 26, 2024

🌟 Brighten Your Day with UpLabs' Design News! Firstly, let's congratulate Syndell, the winner of our latest 📝 Todoist Dashboard Redesign Challenge! Congratulations!! Secondly, don't forget

16 Designers Reveal Their All-Time Favorite IKEA Products

Monday, March 25, 2024

Plus, gardens every design lover must see in person View in your browser | Update your preferences Architectural Digest AD PRO Logo lush gardens with sparkling blue water and trees 14 GARDENS EVERY

Accessibility Weekly #389: On Popover Accessibility

Monday, March 25, 2024

March 25, 2024 • Issue #389 View this issue online or browse the full issue archive. Featured: On popover accessibility: What the browser does and doesn't do "One of the premises of the new