Smashing Magazine - #345: Little Front-End Utilities

With a resource hints validator, VS Code extensions, hidden npm packages, tools for third-parties, user testing and useful round-ups. Issue #345 Mar 22, 2022 View in the browser 💨

Smashing Newsletter

Myrnoho dnya Smashing Friends,

Finally: SmashingConfs are back, with in-person conferences on front-end & UX. This year, they will be taking place in San Francisco, Austin, Freiburg (our little hometown in Germany) and New York. 2 conference days, 13 speakers and plenty of kind and smart attendees. Get your ticket right away.

A preview of Upcoming Smashing Conferences in 2022

Recently we’ve launched “Smart Interface Design Patterns”, our new 6h-video course, focused on fine little details that make for better interface design. You’ll explore 100s of hand-picked examples — from complex navigation to intricate tables and filtering UX. Check the free preview.

Smart Interface Design Patterns

It’s not just a video course, but a growing video library with 25 lessons available today, and more added every few months. If you’d like to dive a bit deeper, there is a live UX training with UX certification that happens twice a year. The next one will be taking place in a few weeks. Jump to the details.

For now though, let’s explore some little front-end helpers that might help you boost your workflow: from a resource hint validator and hidden npm packages to VS Code extensions and 3rd-party tools. We hope you’ll find them useful.

Vitaly (@smashingmag) 🇺🇦


1. Browser Resource Hint Validator

Resource hints improve page performance by giving the browser extra information that it can’t infer from the HTML. You can use preload to load content that’s required for the initial render, prefetch loads content that may be needed to render the next page, and preconnect establishes a server connection without loading a specific resource yet.

Browser Resource Hint Validator

To help you check if resource hints are working as they should, DebugBear offers a free Browser Resource Hint Validator. All you need to do is enter a URL, and the validation will start. The test results show you the different resource hints detected on the site, their size, source, type, and if they are working correctly, or if you can consider removing a hint. Handy! (cm)


2. Hidden-Gem npm Packages

Do you have some “hidden gems” in your digital toolkit that you wouldn’t want to live without? Well, Josh W. Comeau uses a handful of NPM packages in his projects that have come in super useful but that aren’t that well known. He shares five of them in a Twitter thread.

Windups

First off, there’s Windups, a unique typewriter effect library for React. If you’re looking for a comprehensive and well-thought-out solution for converting between color formats, Chroma.js should have you covered. Artsy is a tool for responsive conditional rendering in React. Immer makes working with immutable objects/arrays less annoying, and, last but not least, Josh recommends Radix Primitives, a set of accessibility-focused UI primitives like dialogs, accordions, menus, and scroll containers. A treasure chest of goodies. (cm)


From our sponsor

Communicate Your Designs Like Never Before With Interactive User Flows

Communicate Your Designs Like Never Before With Interactive User Flows
Overflow is the world’s first user flow diagramming tool, tailored for product and design teams. Build beautiful user flows and design presentations in no time, engage stakeholders in design critique, and get actionable feedback. Overflow 2.0, the tool’s latest release, introduced powerful Cloud and collaboration features to boost your workflow. Try it for free.


3. VS Code Extensions For A More Efficient Workflow

We spend so much time in our text editors, and every now and again we encounter those frustrating little issues that slow us down. It might be a forgotten HTML end tag or going to a function’s source to figure out what a function parameter does. We came across some useful VS Code extensions recently that are bound to fix annoyances like these — for good.

Inline Parameters

Inline Parameters, for example, can give you additional context when reading your code, making it easier to understand what different function parameters refer to by showing the parameter’s name inline. The extension currently supports JavaScript, TypeScript, React, PHP, and Lua. The axe Accessibility Linter checks your React, Vue, Angular, HTML, and Markdown files to help you avoid common accessibility issues. Path Intellisense autocompletes file names and HTML End Tag Labels labels, well, HTML end tags. Handy little helpers. (cm)


4. Upcoming Front-End & UX 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:


5. Easy And Affordable User Testing

The team at Confrere attempts to make video calls easy to use for businesses who offer services and consulting via video — physicians or hospitals, for example. But how do you know if something really is intuitive if you’ve never tested it with actual users? Well, you can’t.

Confrere

To help us embrace user testing even in projects that have a tight budget, Ida Aalen from the Confrere team shares their wealth of knowledge from running user testing sessions. She compiled practical tips, templates, research, and resources that make user testing easy and affordable while at the same time providing us with the insights we need to make our products easy to use for everyone. If you ever had concerns that user testing is too cost-intensive or too complex, this guide will show you that it doesn’t have to be. (cm)


6. The Impact Of Third-Party Scripts

Third-party apps are everywhere, fueling analytics, ads, payment processing, and much more. However, they account for more than 45% of website requests. How severe the impact of third-party scripts can be, is visualized on the site 3P Web. Visualized as a treemap or bar chart, you can assess how long an entity’s script takes to execute on average. The largest entities have the worst performance impact on the pages they are on.

Are my third parties green?

If you’re looking for a solution to avoid performance bottlenecks, Partytown is worth looking into. The new, experimental library helps you relocate resource-intensive scripts into a web worker, and off the main thread.

Apart from performance, there’s another aspect worth considering when we talk about third-party scripts: CO2 emissions. It is estimated that information and communication technology accounts for around 4% of global CO2 emissions, which is more polluting than the civil aviation sector and the equivalent to Germany’s national emissions. So shaving off just a few kilobytes already has a positive effect. To help you find out how green your third parties are, the tool “Are my third parties green?” that Fershad Irani created shows you the number of third-party requests on a site, their size, as well as estimated CO2 emission. (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.


7. A Tiny Script To Copy Text To Clipboard

Copying text to the clipboard shouldn’t require dozens of steps to configure or hundreds of kilobytes to load and it shouldn’t depend on any bloated frameworks either. A modern approach to copying text is clipboard.js. The script weighs in at only 3kb gzipped and gets by without any Flash or frameworks.

Clipboard.js

If you’d like to show some user feedback or capture what has been selected after a copy/cut operation, clipboard.js fires custom events such as success and error for you to listen and implement a custom logic. There’s no built-in tooltip solution, but if you want to include tooltips, you can refer to GitHub’s Primer, for example. clipboard.js is supported by all modern browsers and gracefully degrades if you need to support older browsers. Small but mighty. (cm)


8. Useful Roundups For Designers And Developers

There are so many fantastic little tools and resources out there that help designers and developers in their day-to-day work. In our series of roundup posts on Smashing Magazine, we highlight some of them. Here’s comes a little overview.

SVG generator

In our post on SVG generators, you’ll find everything from background generators to animation tools. If you want to fix all the little slowdowns you encounter in Figma, our guide to Figma has got you covered with useful plugins for all kinds of purposes. Louis Lazaris compiled a list of powerful command-line apps and utilities that he has come across in the past few years.

For guidelines, tips, and resources to help you create meaningful user experiences, our UX roundup is for you. And, last but not least, we also compiled interactive learning tools and apps to take your skills to the next level. A huge thank-you to everyone who creates tools and resources that make every web professionals life just a bit easier! The web wouldn’t be the same without you. (cm)


9. New On Smashing Job Board


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

#344: Front-End Accessibility

Tuesday, March 15, 2022

With accessible focus indicators, accessible charts, toggles and how to document accessibility in your projects. Issue #344 • Mar 15, 2022 • View in the browser 💨 Smashing Newsletter Dziękuję Smashing

#343: New Front-End Techniques

Tuesday, March 8, 2022

With CSS cascade layers, SVG stress test, handling text over images, third-party JavaScript and performance optimization. Issue #343 • Mar 8, 2022 • View in the browser 💨 Smashing Newsletter Dobryden

342: Interface Design & UX

Tuesday, March 1, 2022

With design patterns, interface design techniques and pointers to useful UX resources. Issue #342 • Mar 1, 2022 • View in the browser 💨 Smashing Newsletter Dobryden' Smashing Friends, I was born

341: Front-End & UX Reading

Tuesday, February 22, 2022

With design patterns, UX guides, free JavaScript books, UX guides and books from the community. Issue #341 • February 22, 2022 • View in the browser 💨 Smashing Newsletter Bom Dia Smashing Friends, When

Meet “Touch Design for Mobile Interfaces”, a new Smashing Book

Wednesday, February 16, 2022

Meet our shiny new Smashing Book for accessible and usable mobile interfaces, with guidelines, examples and best practices. It's here! Touch Design for Mobile Interfaces, our new guide for better

The Games Table Is Having a Moment—And We're All In

Friday, May 20, 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

object-view-box, Inclusivity Audit, Page Transitions, Accessibility Illustrations, LCH Color Space

Friday, May 20, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 20 2022 First Look At The CSS object-view-box Property

Justina Blakeney on Defining Her Own Title, Her Debut AD Cover, and More

Thursday, May 19, 2022

Plus, 22 seriously inspiring staircases that know how to make a grand entrance (image) Architectural Digest AD PRO Logo Image may contain: Staircase, Banister, and Handrail 22 STUNNING STAIRCASES FROM

Platform Design, Naming Colors, Interactive Backdrop, Spreadsheet Concept, All at Once

Thursday, May 19, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 19 2022 A Growth-Focused Intro to Multi-Sided Platform

This Fashionable Luxury Retailer Just Launched a Home Category

Wednesday, May 18, 2022

Plus, the 9 best green paint colors designers turn to again and again (image) Architectural Digest AD PRO Logo pile of pillows outside LUXURY E-RETAILER MYTHERESA INTRODUCES A HOME CATEGORY—ZAHA HADID

116 / Designer starter resources, free loaders, notion templates and beautiful agency sites

Wednesday, May 18, 2022

Product Disrupt Logo Product Disrupt Half-Monthly May 2022 • Part 1 View in browser Image Designer Starter Pack Curated list of resources to learn Figma. Very useful to get started in Figma and handy

Unlock a New Member Benefit

Wednesday, May 18, 2022

Learn more about our free online courses ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Beyond sRGB, Rebellious Web Design, Shopify UX, Pixels vs Rems, Porsche Taycan

Wednesday, May 18, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 18 2022 Principles of Color? Going Beyond sRGB blog.jim-

Can Cat-Friendly Design Be Chic?

Tuesday, May 17, 2022

Plus, dive into 20 of the most inviting pools from the AD archive (image) Architectural Digest AD PRO Logo Guest room at the Casa Cody in Palm Springs, California HOW TO LAND—AND SURVIVE—YOUR FIRST

Your PR questions answered

Tuesday, May 17, 2022

Advice from Nora Wolf Welcome to the first 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