#428: Useful Front-End Tools

With online workshops, modern CSS, calculators, useful front-end tools and resources. Issue #428 • October 24, 2023 • [View in the browser]( [Smashing Newsletter]( Hello Smashing Friends, 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. [Clamp Calculator]( The Clamp Calculator generates custom fluid tokens based on 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. [Classnames]( 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. [State Of CSS 2023]( 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) --------------------------------------------------------------- From our sponsor Love Hacker News But Don’t Have The Time To Read It Every Day? Try TLDR’s Free Daily Newsletter. [TLDR]( TLDR’s covers the most important tech, startup, and programming stories in a quick. 5-minute email. No politics, sports, or weather. Over 1.3 million software engineers and tech workers read TLDR each day. [Sign up for free]( --------------------------------------------------------------- 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. [A More Modern CSS Reset]( 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 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. 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. [OKLCH Color Picker and Converter]( 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 for a pleasant experience while users are wait for images to load. Low-quality image placeholders are a great solution to improve the waiting experience. [The Ultimate Low-Quality Image Placeholder Technique]( 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 →]( [Success At Scale]( … and we’re currently working on a new book: [Success At Scale]( shipping in fall. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 9. Recent Smashing Articles - [A Roundup Of WCAG 2.2 Explainers]( - [What Removing Object Properties Tells Us About JavaScript]( - [How To Animate Along A Path In CSS]( - [How To Choose Typefaces For Fintech Products: Best Practices Guide (Part 2)]( - [Read more on Smashing Magazine →]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](