Smashing Newsletter: Issue #428

Editorial

What are some of the most useful little tools and resources that you’ve discovered recently? Perhaps a little Terminal helper that makes completing tasks a bit faster or a tool that syncs color themes for your dev environment?

In this newsletter issue, we highlight some of these useful little helpers for front-end developers. From handy calculators to color systems that will help you meet accessibility requirements more readily — we hope you’ll find some useful gems in here.

Smashing Online Workshops — 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.

On the Smashing side of things, we’ve just announced new front-end and UX online workshops on modern CSS, building modern HTML emails and accessibility testing. Now with friendly tickets bundles for teams. We’d love to see you there!

— Iris Lješnjanin (Senior Editor)

1. Clamp Calculator

Instead of relying on breakpoints to create responsive designs, we can opt for a more fluid approach when scaling type and space. A handy tool to help you with that is the Clamp Calculator that James Gilyead and Trys Mudford created as a part of their Utopia approach to fluid design.

The Clamp Calculator generates custom fluid tokens based on the min and max viewport width values you define. They can be applied to typography, space, or any other CSS property that accepts a length unit. A visualization shows you how the size fluidly grows from min to max, and the CSS is generated automatically so that you only need to copy and paste it into your project. For a more holistic solution, also be sure to check out the type and space calculators from the Utopia series. (cm)

2. Inspiration For Naming

Naming things can be hard sometimes. But it doesn’t have to be. If you’re looking for some inspiration for naming HTML classes, CSS properties, or JavaScript functions, Classnames provides you with ideas that get you thinking outside the box.

The site provides thematically grouped lists of words perfect for naming. You’ll find terms to describe different kinds of behavior, likeness between things, order, grouping, and association, but also themed collections of terms that wouldn’t instantly come to one’s mind when it comes to code. Among them are terms from nature, art, theater, music, architecture, fashion, and publishing to describe everything from parts of things to composition, space, and size. Clever! (cm)

3. The State Of CSS And HTML

Container queries, subgrid, :has() — CSS is advancing at an impressive pace, with new features making their way into browsers seemingly every month. The State Of CSS 2023 survey provides valuable insights into the current state of CSS and what we can expect from it in the foreseeable future.

To identify current trends and help developers make technological choices, the survey collected more than 9,100 responses from developers across the globe in June and July this year. Rather than analyzing what’s popular now, the survey focuses on anticipating what’s coming over the next few years.

In the discussion around current trends, CSS and JavaScript usually take the position in the spotlight, but we shouldn’t forget about HTML, the foundation that makes it all possible. To give HTML the attention it deserves, there’s a brand-new State of HTML 2023 survey this year. It’s still open for submissions. The results are used by browsers and standards groups to prioritize which features to implement, and you’ll learn about new and upcoming features as you take the survey. Win-win! (cm)

4. A More Modern CSS Reset

Almost four years ago, Andy Bell published a modern CSS reset. A lot has happened since then, and finally, it was time for an update. In “A (more) Modern CSS Reset,” Andy explains the approach that currently works for him in detail.

Preventing font size inflation, stripping out user agent styles for margin to give you better control in authored CSS, and ironing out potential issues with list styling are some of the things that the reset takes care of. And while some might argue that with improved browser capabilities, there’s no need for a CSS reset anymore, cherrypicking the code snippets you like from the template to create your own reset might be a good idea to give you a solid foundation whenever you start a new project. (cm)

5. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. 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 a quick overview:

Design KPIs Masterclass UX
with Vitaly Friedman. Oct 31 – Nov 8
Accessibility for Designers UX
with Stéphanie Walter. Nov 6–15
Building Modern HTML Emails Dev
with Rémi Parmentier. Nov 9–17
Advanced Modern CSS Masterclass Dev
with Manuel Matuzović. Nov 27 – Dec 11
Creating and Maintaining Successful Design Systems Workflow
with Brad Frost. Nov 28 – Dec 12
Design Management Masterclass UX
with Slava Shestopalov. Nov 30 – Dec 8
From Chaos to Clarity: Streamlining Your Websites Content Workflow
with Paul Boag. Dec 7–15
Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. Jan 8 — 22
Cascading Style Systems: Resilient & Maintainable CSS Dev
with Miriam Suzanne. Feb 26 – Mar 12
Interface Design Patterns UX Training (Spring 2024) UX
with Vitaly Friedman. Mar 8 – Apr 5
Smart Interface Design Patterns Video Course UX
9h-video + Live UX Training with Vitaly Friedman

6. Accessible And Reliable Colors With OKLCH

With the rise of OKLCH, color encoding on the web is undergoing a significant change. OKLCH can encode more colors for modern screens than other color spaces. They are predictable and human-readable, and provide great accessibility. We came across some fantastic tools that are useful when working with OKLCH.

Since not all combinations of lightness, chroma, and hue (the building blocks of any OKLCH color) are supported by every monitor, it is safer to check colors before using them. Andrey Sitnik and Roman Shamin created a color picker and converter for the OKLCH and LCH color space for this purpose.

If you plan to create color systems with OKLCH, Alexey Ardov’s tool Huetone has got your back. Equipped with everything you need to create color systems with predictable contrast ratios, it ensures you’re meeting accessibility requirements.

Last but not least, Doko Zero’s OkColor plugin brings an improved color picker for easier color palette creation and contrast checking to Figma. It resolves the problems that picking colors and creating balanced color palettes with Figma usually brings along. No more bad surprises. With OKLCH, you always know what you’ll get. (cm)

7. The Ultimate Low-Quality Image Placeholder Technique

As the Web Almanac found out, the median image weight for 2022 on desktop was 1,026 kilobytes and 881 kilobytes on mobile. Luckily, images don’t block rendering, but we should still try to cater to a pleasant experience while users are waiting for images to load. Low-quality image placeholders are a great solution to improve the waiting experience.

In his post “The Ultimate Low-Quality Image Placeholder Technique,” Harry Roberts explores how to use low-quality image placeholders that not only show the user that something is happening but also give them a rough idea of what is happening. He takes you step-by-step through everything you need to consider to create and implement placeholders that resemble the final image. And since there are a lot of specs and numbers involved, Harry also shares a simplified calculator to help you work out the smallest possible placeholder while aiming for the best Largest Contentful Paint score. (cm)

8. News From The Smashing Library 📚

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?

Understanding Privacy by Heather Burns
Touch Design for Mobile Interfaces by Steven Hoober
Image Optimization by Addy Osmani
Check out all books →

… and we’re currently working on a new book: Success At Scale, shipping in fall. Pre-order your copy or browse the complete library.

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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

October 24, 2023 Smashing Newsletter: Issue #428

Previous Issues