February 16, 2021 Smashing Newsletter: Issue #288

Editorial

We all have been there: just when you need a particular tool, you can’t seem to find it — spending precious minutes trying to remember what the tool was called or where you have found it. Those little helpers can be very helpful, and it’s really worth keeping them close just in case you need them.

In this issue, we highlight some of the useful tools and helpers that we find quite helpful — from tools recognizing a shape that you need and generators of CSS clip-path to setting sync tool and AR copy-pasting. Nothing groundbreaking, just tiny time-savers that we need every now and again.

We shouldn’t forget that there are people behind each of these tools, often spending weekends working on a little project to share it with the outer world. If there are particular tools that you use frequently, please take a moment and send a kind, short thank you message to the wonderful people who created them.

We’ve also asked you what tools you find useful in your day-to-day-routine. The results were remarkable recommendations which would never fit in this small newsletter issue. Please make sure to check them when hunting for more time-savers — and don’t forget to add yours as well! Thanks for your kind efforts and contributions, dear friends! You are smashing.

— Vitaly (@smashingmag)

1. VS Code Settings Sync
2. CSS clip-path Made Easy
3. Blurred Image Placeholders Without The Hassle
4. Upcoming Front-End & UX Workshops
5. Debugging Responsively
6. Find Unicode Characters By Drawing Them
7. Fonts In Use

1. VS Code Settings Sync

Perhaps you’ve found a useful text editor extension, or theme, or have carefully and thoroughly edited the settings of your editor. What if you’d like to share them with your colleagues or friends, or perhaps even sync these settings across machines? Settings Sync does it all for you.

The little tool is a VS Code Extension synchronizes settings, snippets, themes, file icons, keybindings, workspaces and extensions across multiple machines via a GitHub gist. It automatically downloads the latest settings on start-up and you can upload and download settings automatically, or sync them manually. Note that a GitHub token and a GitHub Gist ID will be required for the extension to work, and a readme explains well how to acquire them. (vf)

2. CSS clip-path Made Easy

Thanks to the clip-path property, we can create complex shapes in CSS by clipping an element to a basic shape, be it a simple circle, a fancy polygon, or even an SVG source. The CSS clip-path maker Clippy is a visual tool that helps you create and customize clip-paths right in your browser.

To start off, you select a shape and a demo background from Clippy’s menu. You can then drag the shape’s points to create any shape you like — the color-coded CSS will not only reflect your changes instantly but also highlight them to help you understand how your choices influence the code.

If the whole clip-path thing still feels a bit abstract to you or if you’re looking for a cool example of how to use it in an actual project, be sure to check out the pop-out effect that Mikael Ainalem created with clip-path. Inspiring! (cm)

3. Blurred Image Placeholders Without The Hassle

An image placeholder is an efficient way to improve a site’s perceived performance when an image is loading. On his quest to find the fastest and best-looking image placholders for the web, Joe Bell decided to come up with a solution himself. The result: Plaiceholder.

Powered by a collection of Node.js helpers, Plaiceholder turns your images into lightweight, blurred placeholder images. There are several approaches to choose from: CSS (which is recommended), SVG, Base 64, Blurhash, and the experimental Blurhash to CSS. Beautiful and straightforward. (cm)

4. Upcoming Front-End & UX Workshops

We can learn better together, and we put our heart and soul into creating courses on front-end tooling, accessibility, design and all the facets of the web. So as it happens, we have some friendly online front-end & UX workshops dedicated to design systems, psychology, CSS, navigation and web performance.

Our workshops are packed with practical examples, video recordings and friendly Q&A sessions. Each and every workshop has been a truly smashing experience with wonderful folks from all over the world. There are still some early-birds left, with a lil’ friendly discount. Perhaps you’d like to join us and recommend to others — just sayin’! ;-) (vf)

5. Debugging Responsively

If you’d like to preview your site or application on a number of devices at the same time, Responsively allows you to do just that. The open-source tool displays the page in a number of viewports and provides mirrored interactions (so any click, scroll or navigation are replicated in all views in real-time).

You can also customize the arrangement of devices, inspect elements, pick some of the 30+ built-in device profiles covering all major devices and generate screenshots of all devices with a single click. Plus, it supports hot reloading, so once you’ve changed a line of code in your text editor, the tool will automatically update all screens for you. The browser extension is available for Firefox, Chrome and Edge. (vf)

6. Find Unicode Characters By Drawing Them

You’ve forgotten the name of a specific Unicode character but you don’t have time to scroll through endless lists to find the glyph you’re looking for? Shapecatcher provides a clever solution to the problem: You draw the character on screen, and the tool finds similar Unicode characters for you.

To retrieve the glyphs that come closest to your sketch, more than 10,000 of the most important characters are compared against your sketch and analyzed for similarities. Please note that Japanese, Korean, and Chinese characters are not supported yet. A real timesaver! (cm)

7. Fonts In Use

No project exists in isolation. You might be working with a company with a particular personality, and that personality needs to be reflected in their overall graphic design, layout and typography. Fonts In Use provides an extensive archive of typography, ranging from advertising to books and periodicals, all grouped into dozens of topics, groups of typefaces — and curated by the staff.

The tool also includes an advanced search that allows you to select a particular publishing date, location and tags, so if you are looking for type-focused book covers from Germany before 1990, you’ll be able to find some inspiration in no time. So useful once you need to study very specific cross-sections of design! (Thanks for the tip, Typographica!).

And just in case you have selected a typeface already, you can learn about everything a font can do on Wakamaifondue, a fantastic tool by Roel Nieskens that displays font’s features and generates CSS for you to use right away (also available via Terminal). (vf)

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.