God eftermiddag Smashing Friends,

It can be quite challenging to keep track of what’s new on the web these days. What are some of the new features in CSS and JavaScript? What about web performance? What about the current state of web components? Or even in its simplest terms, what would be the right way to define favicon in 2023? In this newsletter, we’ll try to find answers to these questions!

When it comes to CSS and web development, we are getting ready to dive deep into frontend and tooling, with a few lovely events coming up in the next few months!

The rise of AI: Join us on June 20 to talk to three amazing speakers about how AI impacts your work — now and in the future.

• Smashing Meets AI (free, June 20, online), a friendly get-together to discuss the challenges of AI, along with designing and building with it.
• SmashingConf Freiburg 🇩🇪 (in-person + online, Sep 4–6) with adventures into design systems, accessibility, CSS, JS and web performance.
• Accessible Components From Design To Development (online, Sep 14–22) with a deep-dive into accessibility, CSS and JavaScript by Carie Fisher.
• SmashingConf Antwerp 🇧🇪 (Oct 9–11), on design systems, usability, product design and complex UI challenges.

Also, in today’s Smashing Podcast, we’re talking about Web Platform Baseline. What is it, and how can it help determine your browser support policy? On this note, a huge Thank You to all the passionate and kind people working day and night on CSS, and wonderful people like yourselves sharing what you’ve learned and spreading the word!

— Vitaly (@vitalyf)

1. The State Of CSS In 2023

Remember endless discussions about how long it would take for shiny new CSS features to be adopted in all modern browsers? Well, these times are now in the past. Today, CSS is nothing short of magical, but keeping track of everything that’s now available in CSS isn’t an easy task.

In What’s New in CSS and UI, Una Kravets, Bramus and Adam Argyle highlight some of the important updates that came to the platform recently. Container queries and :has selector are already here, just like cascade layers and wide-gamut color spaces. It’s exciting that style queries should land soon across browsers (already in Chrome), allowing us to query custom properties of a parent container to decide on styles of child elements.

Imagine that you’d like one component to look different on a dark background vs. light background of a parent? With style queries, we could solve this problem in no time — and keep all styles within the same single component, with no extra classes needed! A great update, with everything you might need to know, put together in one single place. Handy! (vf)

2. High-Definition Colors

Color-wise, we are living in exciting times. With high-definition colors with LCH, okLCH, LAB, and okLAB that give us access to 50% more colors available in modern browsers, the times of RGB/HSL might be over soon. To get you familiar with the new color spaces, Vitaly wrote a quick overview of what you need to know.

Both OKLCH and OKLAB are based on human perception and can specify any color the human eye can see. While OKLAB works best for rich gradients, OKLCH is a fantastic fit for color palettes in design systems. OKLCH/OKLAB colors are fully supported in Chrome, Edge, Safari, Firefox, and Opera. Figma doesn’t support them yet. (cm)

3. New In JavaScript And TypeScript

The web is evolving at such a fast pace that it’s almost impossible to keep track of all new features that make their way into programming languages. When it comes to JavaScript and TypeScript, Linus Schlumberger did the hard work for you, and summarized changes and new features of the last three years to get you up-to-date.

From oldest to newest, Linus presents each JavaScript / ECMAScript and TypeScript feature with a short description and a code snippet. As he points out, not all of the features will be relevant or practical to you, but they show what’s possible and deepen your understanding of the languages. (cm)

4. How To Favicon In 2023

With more than 20 static PNG files necessary just to display a tiny website logo, creating a set of favicons can quickly turn into quite a messy undertaking. So how can we make the process more straightforward? Andrey Sitnik came up with a smart solution.

Andrey’s approach gets by with only five icons and one JSON file to fit most modern needs. In his blog post “How to Favicon in 2023,” he summarized how he got there, the compromises he had to make, and a step-by-step tutorial on how to build a favicon set. If you don’t want to dive too deep into the details but are looking for code snippets to get you up and running quickly, Andrey has got you covered, too. (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.

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:

• The Power of Storytelling UX
  with Chiara Aliotta. May 30 – June 14
• Deep Dive On Accessibility Testing Dev
  with Manuel Matuzović. June 12–26
• Figma Workflow Masterclass UX
  with Christine Vallaure. June 15–23
• The React Performance Masterclass Dev
  with Ivan Akulov. June 29 – July 13
• Data Visualization Masterclass Dev
  with Amelia Wattenberger. July 4–18
• Smart Interface Design Patterns Video Course UX
  9h-video + Live UX Training with Vitaly Friedman
• Jump to all workshops →

6. Fixing Common SVG Fails

Browser DevTools are your best friend when you need to find potential issues with inline SVGs or opportunities to optimize them. But what to do if you can’t see your SVG at all? To help you troubleshoot improperly rendered SVGs, Mariana Beldi summarized six common SVG fails — and how to fix them.

From improperly configured viewBox values and missing width and height to missing IDs and unexpectedly clipped SVGs, Mariana’s guide explores red flags to watch out for. A fantastic resource that saves you not only time but also a lot of frustration. (cm)

7. Inclusivity By Default

Websites often neglect people who rely on accessibility tools or don’t use a common web browser to navigate a site effortlessly with their eyes and hands. However, as Rohan Kumar points out, “many niches add up to a large population.” To help front-end developers and web content authors create inclusive experiences that don’t leave anyone out, Rohan wrote a comprehensive reference guide with best practices for crafting inclusive textual websites.

The guide applies to minimal websites that focus primarily on text and covers everything from security and privacy to optimal loading, images, color, interaction, layout, and much more. With 23,000 words, it is quite a read, but one that is well worth it. If you’re short on time, be sure to read at least the introduction and the conclusion to get a better idea of inclusivity by default and how it isn’t nearly as daunting as it might sound.

Carrie Fisher’s free Learn Accessibility course on web.dev is also a great resource to help you create more accessible experiences. Created for both beginners and advanced devs, the course consists of 19 lessons and covers everything from what digital accessibility is to evaluating patterns and components and performing assistive technology testing. (cm)

8. The State Of Web Components

Web Components are already very powerful, and their potential is still evolving. Since the first version shipped to all major browsers in 2020 and enabled developers to create reusable custom elements, the number of features has nearly doubled. If you want to dive deeper into what Web Components are capable of today and what to expect from them in the future, Rob Eisenberg wrote a great overview.

In his post “2023 State of Web Components,” Rob highlights notable real-life examples of what has been built with Web Components and explores the various shipped, in-progress, and planned Web Component-related standards. For a complete overview, he breaks the features down into Composition & Scope, Platform Interop, Rendering & Peformance, Styling, Package & Distribution, and API Paradigms. (cm)

9. New On Smashing Job Board

• Visual Designer
  at UCLA (Los Angeles / New York / Remote)
• Wordpress/PHP Developer
  at Razorbraille (Toronto)
• Design System Specialist
  at InVision AG (Düsseldorf, Germany)

10. Recent Smashing Articles

• How To Boost Your Design Workflow With Setapp
• Practical Design Tips And Guidelines For Beginner Designers
• How To Deal With Big Tooling Upgrades In Large Organizations
• Design Patterns Are A Better Way To Collaborate On Your Design System
• Solving Media Object Float Issues With CSS Block Formatting Contexts
• 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