June 7, 2022 Smashing Newsletter: Issue #356
This newsletter issue was sent out to 175,522 subscribers on Tuesday, June 7, 2022.
Editorial
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!
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.
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.
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.
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)
4. 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.
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)
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.
As always, here’s an overview of our upcoming workshops:
- DevOps Masterclass Dev
with Denys Mishunov. June 21 – July 5 - Figma Workflow Masterclass UX
with Christine Vallaure. July 7–22 - Effective Usability Testing UX
with Steph Troeth. July 11–25 - Level-Up With Modern CSS Dev
with Stephanie Eckles. July 11–25 - Designing Better UX With Top Tasks UX
with Gerry McGovern. Sep 13–27 - Interface Design Patterns UX Training UX
with Vitaly Friedman (Live UX training + video course). Sep 9 – Oct 7 - Jump to all online workshops →
6. Smart Interface Design Patterns
Earlier this year, we launched “Smart Interface Design Patterns”, a 10h-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.
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.
7. 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.
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)
8. 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 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)
9. 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 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)
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.