Smashing Magazine - #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.

Hanging punctuation

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 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:


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?

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


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

unsubscribe update preferences view in your browser

Older messages

#433: Dashboards, Maps & UX

Tuesday, November 28, 2023

Designing better dashboards, AR, in-car voice assistant, maps UX and natural language input — along with SmashingConfs 2024 and community events. Issue #433 • Nov 28, 2023 • View in the browser

#432: Design Systems

Tuesday, November 21, 2023

How do you organize a design system with 900 components and 25 designers? How do you design a UI component from scratch? How do you choose the right parts, products and people for your design system?

#431: Lovely Little Websites

Tuesday, November 14, 2023

Helpful and inspiring websites, UX guides, vintage posters and a smart recipe website. Issue #431 • Nov 14, 2023 • View in the browser Smashing Newsletter Boa noite Smashing Friends, The web is a

#430: UX Guides, Templates and Career Ladders

Tuesday, November 7, 2023

30-60-90 day plan for designers, UX guidelines, user journey templates and UX research glossary. Issue #430 • November 7, 2023 • View in the browser Smashing Newsletter Bonne soirée Smashing Friends,

#429: Front-End Accessibility

Tuesday, October 31, 2023

With WCAG 2.2 explainers, how to make a strong case for accessibility, accessibility testing and accessible data visualizations. Issue #429 • October 31, 2023 • View in the browser Smashing Newsletter

You Might Also Like

100 Interior Photographers to Hire Now

Thursday, July 18, 2024

View in your browser | Update your preferences ADPro Ready, Set, Shoot! You've spent months—years, even!—perfecting your client's space. Now it's time to capture it for your portfolio, or (

Do this in your next PR pitch subject line...

Tuesday, July 16, 2024

Exciting announcement before we jump into subject line tips! Along with Nora, Kirsten is now also available for 1-1 consulting. Since we founded Wolf Craft, Nora has worked 1-1 with creatives to help

#465: CSS

Tuesday, July 16, 2024

CSS container queries, style queries, custom functions, native CSS mixins, inline conditionals, transition to auto. Issue #465 • July 16, 2024 • View in the browser Smashing Newsletter Grüezi Smashing

Accessibility Weekly #405: New Class Action Lawsuit against AccessiBe

Monday, July 15, 2024

July 15, 2024 • Issue #405 View this issue online or browse the full issue archive. Featured: New class action lawsuit against AccessiBe "On June 24, 2024 Tribeca Skin Care, a small skin care

Crafting a talk

Sunday, July 14, 2024

Issue 203: Developing an idea worth sharing ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The Color Secrets Pros Swear By

Thursday, July 11, 2024

View in your browser | Update your preferences ADPro Keeping Up With Color It seems there's a new hot topic in color every week. This year alone, we've seen the “unexpected red” theory take

What’s Behind a Microtrend?

Tuesday, July 9, 2024

View in your browser | Update your preferences ADPro If you've ever wondered about the next big decor moment or debated dipping a toe into TikTok, AD's Senior Digital Design Editor Sydney Gore

#464: Friendly Little Helpers

Tuesday, July 9, 2024

Radio time machine, reverse dictionary, micropedia and templates on how to say No and Goodbye with grace. Issue #464 • July 9, 2024 • View in the browser Smashing Newsletter Gamarjoba Smashing Friends,

Accessibility Weekly #404: Overlays Misunderstand Accessibility

Monday, July 8, 2024

July 8, 2024 • Issue #404 View this issue online or browse the full issue archive. Featured: Overlays misunderstand accessibility "Accessibility overlays are a peculiar approach to accessibility

Reflections from Config

Sunday, July 7, 2024

Issue 202: Thoughts from the annual Figma conference ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏