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!
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.
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)
From our sponsor
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.
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.
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.
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.
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.
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
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 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 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
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
