December 5, 2023 Smashing Newsletter: Issue #434
This newsletter issue was sent out to 208,909 subscribers on Tuesday, December 5, 2023.
Editorial
The web is a magical place. In the busyiness of our daily work, we often forget that it’s also a place where lovely communities come together and share what they’ve learned. This often shows at the end of a year as advent calendars emerge on different topics and in different languages.
Today, we want to give a friendly shout-out to all the wonderful people working on the web, making it more inclusive, friendly, respectful, kind, helpful, and honest.
To people who contribute for the good. Who raise questions about accessibility and sustainability. Who take the time to help juniors on the team and strangers on the web. Who don’t let poor pull requests pass. Who deeply care about the quality of their work. You are wonderful, and you deserve a round of applause. So thank you — for all your kind efforts.
On our end, we are looking forward to welcoming you to Smashing Meets (Goes) Green, a free community event all around digital sustainability with Michelle Barker and Gerry McGovern speaking this Thursday, December 7, at 8 AM Pacific / 5 PM CET. Free registration. We’d love to see you there!
Beyond that, sending a lot of positive energy and optimism to you for the week ahead — and hope to see you soon, online and in person!
Yours truly, Vitaly Friedman
Smart Interface Design Patterns
1. The Web Can Do What!?
The modern web has incredible capabilities. To shine a light on what is possible on the web today and inspire creators to build more engaging and innovative web experiences, the Chrome for Developers team created The Web Can Do What!?
The showcase highlights six superpowers of the web, some known, some not so well known, but all of them pushing the boundaries of what’s possible in the browser — from bringing code from platforms into the browser to rendering heavy graphics and simplifying login. As modern web technologies advance, more superpowers will be added to the collection, so you might want to bookmark the site to not miss out on anything. (cm)
2. Internet Artifacts
As the web is becoming more capable and powerful every day and online experiences more sophisticated than ever, how about a little journey back in time to explore how it all began? For his online exhibition Internet Artifacts, Neal Agarwal curated more than 50 artifacts from the history of the Internet, ranging from ARPANET, the precursor of the Internet, to the release of the first iPhone.
The first spam email, the first recorded use of a smiley, the first internet relay chat, and, of course, the first website are just some of the milestones you’ll discover along the way. And there are quite some curiosities waiting, too. Did you know, for example, that the first webcam was created by researchers at the University of Cambridge so they could check the coffee pot’s status in the lab without leaving their desks? An insightful — and fun! — trip through the history of the Internet. (cm)
3. Understanding Bézier Curves
Whether you’re working on a CSS animation or are creating SVG paths for illustrations, icons, charts, or fonts, there’s no getting around Bézier curves. And while their behavior might seem mysterious at first, once you’ve understood the underlying logic behind the curves, you can unlock new creative possibilities.
Richard Ekwonye wrote a wonderful interactive guide to Bézier curves, easing functions, step easing, and cubic Bézier easing that is bound to inspire you to create your next fun piece.
To better understand Bézier curves, also be sure to check out Easings by Paul Macgregor. The tool lets you test common easing curves on a range of interfaces or generate your own custom Bézier curve. And last but not least, an oldie but goodie: Lea Verou’s Cubic Bézier Visualizer and Jhey’s recent article on Smashing. Happy tinkering! (cm)
4. Hanging Punctuation
Well-considered typographic details are the finishing touch to make a project stand out. And some of them don’t even involve much additional work to be implemented. Hanging punctuation is such a no-brainer which is easy to implement, but adds a bit of extra sparkle to your text.
The classic use case for hanging punctuation is a block quote that starts with a curly quote. By hanging the opening curly quote into the space off to the start of the text and aligning the actual words, you get a much neater look. Chris Coyier summarized how the hanging-punctuation property in CSS helps you achieve the effect and what to be aware of when using it. (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.
As always, here’s a quick overview:
- Streamlining Your Websites Content Workflow
with Paul Boag. Dec 7–15 - Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. Jan 8–22 - UX Strategy Masterclass UX
with Vitaly Friedman. Jan 23 – Feb 6 - Interface Design Patterns (Spring 2024) UX
with Vitaly Friedman. Mar 8 – Apr 5 - Resilient & Maintainable CSS Dev
with Miriam Suzanne. Feb 26 – Mar 12 - Scalable CSS Masterclass Dev
with Andy Bell. May 9–23 - Smart Interface Design Patterns Video Course UX
9h-video + Live UX Training with Vitaly Friedman - Jump to all workshops →
6. CSS Nesting
Native CSS nesting has been on the wishlist of developers for a long time, and this year, it finally got supported in all major browsers. So if you’ve relied on a CSS pre-processor just for the nesting feature, you might now want to consider making the switch. A handy guide to CSS nesting and how it makes writing CSS easier comes from Ahmad Shadeed.
In his guide, Ahmad documents his learnings and findings all around CSS nesting. He provides visual examples of different CSS problems and how nesting can help solve them, and also takes a closer look at bugs he spotted while exploring CSS nesting. As he concludes, it’s possible to already use nesting, but you still need to be careful about the audience as the support is still new. (cm)
7. INP And User Behavior
In March 2024, Interaction to Next Paint (INP) will replace First Input Delay (FID) as a Core Web Vital metric for responsiveness. It measures how quickly a page responds visually after user interaction, like a click, tap, or key press. So now that it is about to dethrone FID, how effective is INP as a metric? Cliff Crocker wanted to find out.
In his post “Does Interaction to Next Paint actually correlate to user behavior?,” Cliff explains how INP is calculated, its history in the context of Core Web Vitals, and factors that can hurt INP. Based on real-world data, he also attempts to answer the most important question around the new metric: How does it correlate to user experience and business metrics? A great introduction to INP and the insights you can gain from it.
And if you want to dive deeper into how to diagnose INP issues and identify bottlenecks on the main thread, Geoff has recently written an article all around The Fight For The Main Thread that you might find helpful as well. (cm)
8. New JavaScript And TypeScript Features
The web is evolving at such a fast pace that it’s almost impossible to keep track of all the 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. Even if not all of the features will be relevant or practical to you, they show what’s possible and deepen your understanding of the languages. (cm)
9. 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 →
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.