Smashing Magazine - #356: Useful Front-End Tools

With clamp() calculator, SVG techniques, Arraybuilder, text cleaner, font subsetting and Illustrator Figma plugin. Issue #356 June 7, 2022 View in the browser 💨

Smashing Newsletter

Howdy Smashing Friends,

It’s almost showtime! In just under two weeks, after two very, very long years, we are finally running an in-person SmashingConf SF again. It’s a cozy, intimate, friendly and inclusive conference for front-end developers and designers. For friendly and wonderful people like yourself!

A picture of Sara Soureidan on stage at one of the Smashing conferences held in San Francisco
A picture of DJ Tobi on stage at one of the Smashing conferences held in San Francisco
Some things never change. At SmashingConf, speakers explain how they work and our DJ Tobi composes music on stage. Photos: Marc Thiele.

There are so many things we are looking forward to. We can’t wait to get together as a team after all these years. We can’t wait to welcome Brad, Cassie, Miriam, Jhey, Harry and so many other wonderful speakers on stage.

And, of course, we can’t wait to see you there! It’s been too long, and we are so excited to see non-pixelated familiar faces in person, and share a few coffees or any other beverages together! There are some last tickets left!

Psst! Next Wed, June 15th, we are running a Smashing Hour with Sara Soueidan — talking about accessibility, UX, front-end and pretty much everything else! We’d love to see you there! ;-) In the meantime: happy front-end explorations, everyone!

Vitaly (@smashingmag)


1. Clamp Calculator

Have you used CSS clamp() yet? The clamp() function enables us to create fluid scales for type and spacing without any breakpoints or media queries but based on minimum and maximum values that we define. If you plan to create a fluid type scale, James Gilyead’s and Trys Mudford’s tool Utopia has got your back.

Min Max Calculator

For those instances, when you don’t need a whole token system but only a single interpolation between two values in a viewport range, the min-max-calculator that Nils Binder and Nesim created might come in handy. Just enter min and max values as well as the viewport range and the calculator will generate the clamp formula for you. A live preview shows what it looks like when applied to real text. (cm)


2. Font Subsetting Support

It’s the small details that can help improve performance, and font subsetting, i.e. the process of removing unused characters from a font file, is one of them. As Jeff Frankl points out, the impact that font subsetting has on your page speed depends on how many characters you remove, but from his experience, creating a subset for English typically leads to a reduction from 45KB to 15 KB per font.

Subsetting.xyz

What sounds easy in theory, can turn out to be quite a tricky undertaking because many type foundries have restrictive licenses that prevent editing font files. So which foundries actually do allow subsetting? To help you find out, Jeff created Subsetting.xyz, an overview of type foundries and font subsetting support. If you’re new to font subsetting, Jeff also collected answers to some frequently asked questions and things to watch out for when you’re getting started. (cm)


3. Magical SVG Techniques

SVGs have become more and more popular in the past few years. For good reasons. They are scalable, flexible, and, most importantly, lightweight. And, well, they have even more to offer than you might think.

Magical SVG Techniques

We came across some magical SVG techniques recently that we compiled in an article for you. From SVG grids and fractional SVG stars to SVG masks, fancy grainy SVG gradients, and handy SVG tools, they are bound to inspire you to think outside the box. And if you’re tinkering with SVG, our compilation of SVG Generators for everything from shapes and backgrounds to SVG path visualizers, cropping tools, and SVG → JSX generators might come in handy, too. Happy SVG’ing! (cm)


From our sponsor

One Week Left Until Stories From The Blok #7: Frameworks Edition!

One Week Left Until Stories From The Blok #7: Frameworks Edition!
Our friends from Storyblok are hosting the next edition of Stories From the Blok, which is the perfect opportunity to learn what the benefits of different frameworks for your headless setup are. Check out their amazing speakers and sign up for free — this will be one for the books!


4. Accessible React Date Picker

No matter if it’s booking a flight, making a medical appointment, or renting a summer cottage, anything that requires a date input has some sort of a date picker. However, quite often they are just a bit too tedious to use. The React library react-dates by Airbnb is a fantastic solution for a date picker that is accessible, easily internationalizable, and mobile-friendly.

Accessible React Date Picker

The library includes different components and utilities to get a full-featured accessible interactive date picker, whether it‘s a date range picker or a single date picker. Additional optional props let you customize the look and feel of the inputs and the calendar to your project’s needs. If you’re curious to see the props in action, there’s a live playground to tinker with the different options. (cm)


5. Upcoming Online Workshops

You might have heard it: we run online workshops around 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.

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:


6. Text Cleaner

When you copy text from a word processor, PDF, web page, or client brief, you usually copy all the formatting and unwanted characters. There might be duplicate line breaks, multiple spaces, wrong quotation marks, escaped HTML tags, different letter cases, and other details that you want to remove or change to “unformat” your text. Text Cleaner offers a quick and easy way to do so.

Text Cleaner

The all-in-one text cleaning and formatting online tool performs all necessary operations for you to bring copied text into shape. You can tweak the settings for cleaning and formatting based on your personal preferences and copy and paste your text into the input box. Then click the “clean” button, and the cleaned-up version magically appears. One for the bookmarks. (cm)


7. Smart Interface Design Patterns

Earlier this year, we launched “Smart Interface Design Patterns”, a 7h-video course with Vitaly Friedman. In the course, you’ll explore 100s of hand-picked examples — from complex navigation to filters, tables and forms. Ot’s not just a video course; it’s a growing video library with 25 lessons — with more being added regularly. Check the free preview.

Smart Interface Design Patterns

The course is created specifically for interface designers, UI engineers and developers who’d love to be prepared for complex UI/UX challenges. And if you’d like to dive even deeper, there is a live UX training that with UX certification that happens twice a year. The next one will be taking place in Stepember. There is 1 early-bird-ticket left. Jump to the details.


8. Figma Plugin For Fixing Import Issues

If you’ve ever tried to import an Illustrator or SVG file into Figma, you might have experienced import issues. Rogie King built a Figma plugin that fixes them — for good.

Illustrator + SVG Import Figma Plugin

The plugin addresses most importing issues, among them copy/paste from Illustrator to Figma, SVGs using <clipMask>, SVGs using HSL/HSLa, SVGs with malformed width/height, SVGs with groups and blend modes, as well as SVGs with symbol/use. The plugin also has experimental support for PDF, AI, and EPS. Gold! (cm)


From our sponsor

Instantly Test Performance Tweaks Without A Single Line Of Code

Instantly Test Performance Tweaks Without A Single Line Of Code
WebPageTest Opportunities & Experiments helps you build better user experiences, faster with actionable insights and automated performance experiments. Test and tweak suggested and custom performance experiments to gauge impact before changing a single line of code. Get your first experiment for free!


9. Image Cropper For Content Creators

An article cover for Medium, a video thumbnail for YouTube, a Twitter timeline photo — preparing perfectly sized images for different target uses usually involves quite some juggling with resolutions and aspect ratios. To simplify the process, Madars Biss created CropScore, an open-source image cropper for content creators.

CropScore

CropScore prepares upload-ready images without any manual calculations. There are 33 presets for 10 commonly used platforms to choose from for anything from Hashnode to Instagram. Custom resolutions and aspect ratios are also supported. Once you’ve uploaded an image, the tool calculates the score of how well the real-time crop will fit the target use. You can zoom the image in or out to get precise crops, rotate it, swap it on the X or Y axis, and more to improve the result. PNG and JPG are supported. A real timesaver! (cm)


10. Array Operations Visualizer

It’s always frustrating when you assume your code will work but then there’s a minor issue somewhere that causes the whole thing to break. Mehul Lakhanpal was in this situation recently when his array operations didn’t work as expected and he had to spend a lot of time on debugging. So to simplify the process of writing blocks of code and debugging chained operations, he decided to build Array Builder.

Array Builder

Array Builder is a free tool to visualize the returned values of array transformations and computations made from map/filter/reduce. You can paste an array into the input field, write your code to perform transformations, filtering, or reduction on the array, and the results from the operation will appear in a separate column. Repeat the process, and, once you’re happy with the result, copy the code for further use. A great helper to prevent nasty little, time-consuming bugs. (cm)


From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.


11. New On Smashing Job Board


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

#355: Multi-Language UX

Tuesday, May 31, 2022

How to design a better language selector, localization case studies, internationalization in React and UX across cultures. Issue #355• May 31, 2022 • View in the browser 💨 Smashing Newsletter Góðan

#354: Front-End Accessibility

Tuesday, May 24, 2022

Accessible autocomplete, hidden content, custom radio and checkboxes, and accessibility linter. Issue #354 • May 24, 2022 • View in the browser 💨 Smashing Newsletter Merhaba Smashing Friends, We often

#353: Dashboards and Data Visualization

Tuesday, May 17, 2022

Dashboard design, better charts and how to make better decisions around data visualization. Issue #353 • May 17, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, I had a dream

#352: Front-End Tooling

Tuesday, May 10, 2022

Terminal tools, VS Code extensions, DOM events, bundle analyzer and accessible Vue.js. Issue #352 • May 10, 2022 • View in the browser 💨 Smashing Newsletter Dobryy vechir Smashing Friends, There will

#351: Interface Design Tools

Tuesday, May 3, 2022

With image clean-up tools, free icons, font utilities, accessible color palettes and image upscaling. Issue #351 • May 3, 2022 • View in the browser 💨 Smashing Newsletter Hei Smashing Friends, We all

Dark Mode Toggle, Mario Carrillo, 3D Loaders, Color.js, Component Properties

Saturday, July 2, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar July 2 2022 The Complete Guide to the Dark Mode Toggle

Modsy Shutters Design Services, Atelier Vime Opens Shop, & More News

Friday, July 1, 2022

Plus, 19 of the design world's favorite travel destinations View in your browser | Update your preferences Architectural Digest AD PRO Logo Orior showroom MODSY SHUTTERS DESIGN SERVICES, ATELIER

9 Design Collabs We’re Loving Right Now

Friday, July 1, 2022

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our weekly roundup of the best designs to source and

And the Loewe Foundation Craft Prize 2022 Winner Is...

Thursday, June 30, 2022

Plus, 6 business apps that designers actually use View in your browser | Update your preferences Architectural Digest AD PRO Logo Designers Monet Masters and Tavia Forbes 6 BUSINESS APPS THAT DESIGNERS

119 / Interview warmup, free icons, curated motion design gallery, social podcasting and more…

Thursday, June 30, 2022

Product Disrupt Logo Product Disrupt Half-Monthly Jun 2022 • Part 2 View in browser Image Interview Warmup by Grow with Google Google's new tool to help you prepare for job interviews. It asks you

HTML5Rocks, Meteor, Immersive Design, Core77 Awards, Animation Library

Thursday, June 30, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 30 2022 Farewell to HTML5Rocks web.dev So long HTML5Rocks,

Improve working across time zones in product development

Wednesday, June 29, 2022

Reduce that “did this need a meeting?” or remote FOMO feeling ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

The 3 Beliefs That Could Be Holding Back Your Business (and How to Avoid Them)

Wednesday, June 29, 2022

Plus, here's how to get your big idea funded View in your browser | Update your preferences Architectural Digest AD PRO Logo home decor brand 5 STEPS TO GETTING YOUR HOME DECOR BRAND FUNDED Design

Should Product Managers Wireframe? Here's Balsamiq's take on it

Wednesday, June 29, 2022

When is it appropriate for PMs (but also founders, developers, marketers) to create wireframes? The latest news from Balsamiq: When is it appropriate for PMs (but also founders, developers, marketers)

Your PR questions answered - edition #2

Wednesday, June 29, 2022

Advice from Nora Wolf Welcome to the second edition of PR Questions with Nora. This new monthly newsletter feature was inspired by you! If you've attended one of our recent PR workshops, you likely