#434: Magical Front-End Features

New front-end technologies, CSS nesting, JavaScript and TypeScript Features, INP and useful tooling. Issue #434 • Dec 5, 2023 • [View in the browser]( [Smashing Newsletter]( Konbanwa Smashing Friends, 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. [Free online meet-up on digital sustainability]( On our end, we are looking forward to welcome 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 8AM 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 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. [Internet Artifacts]( 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. [Bézier Curves]( 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) --------------------------------------------------------------- From our sponsor Build And Style Your Site Exactly How You Want [Webflow]( Drag in unstyled HTML elements, control CSS properties, and cascade changes across your site. [Start building!]( --------------------------------------------------------------- 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 that is easy to implement but adds a bit of extra sparkle to your text. [The `hanging-punctuation` property in CSS]( 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. [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: - [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 to make the switch. A handy [guide to CSS nesting]( and how it makes writing CSS easier comes from Ahmad Shadeed. [CSS Nesting]( 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 a 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. [Does Interaction to Next Paint actually correlate to user behavior?]( 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) --------------------------------------------------------------- From our sponsor Release A Redesigned React App Before New Year’s Eve [UXPin Merge]( Drag and drop real React components to build responsive layouts extra fast. Try our pixel-free way of designing UIs — [UXPin Merge](. P.S. Tailwind CSS support coming soon! --------------------------------------------------------------- 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. [All JavaScript and TypeScript Features of the last 3 years]( 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 →]( [Success At Scale]( … and we’re currently working on a new book: [Success At Scale]( shipping in February. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 10. Recent Smashing Articles - [How Marketing Changed OOP In JavaScript]( - [Recovering Deleted Files From Your Git Working Tree]( - [Cold Days, Shining Lights (Dec 2023 Wallpapers Edition)]( - [Crafting A Killer Brand Identity For A Digital Product]( - [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](