#423: Front-End

INP performance metric, cache headers, no tables in HTML Email, variables in Figma Issue #423 • September 19, 2023 • [View in the browser]( [Smashing Newsletter]( Hallo Smashing Friends, What’s going on in frontend these days? In this newsletter, we look into some of the new challenges and new features on the web platform. Apparently, we might not need tables for HTML email anymore, and for most companies, getting the INP metric in the green zone will not be very straightforward. But just before we dive right in, a friendly and quick reminder that we still have a few last tickets available for [SmashingConf UX & Design]( in Antwerp, Belgium, on Oct 9–12 — our inclusive conference with practical sessions, workshops, and smart, friendly, and passionate people like yourself. [Smashing Membership]( You can get a friendly discount by signing up for [Smashing Membership]( which will also give you access and discounts to our books, online workshops, and job board. We absolutely can’t wait to see you in Antwerp, everyone — let’s create some incredible memories together! — [Vitaly]( --------------------------------------------------------------- 1. Better HTML Emails If you’ve ever tried to build an HTML email from scratch, you know that it can be quite an adventure. An adventure that requires you to forget about all the modern techniques you usually use to build things for the web and revert to the good old tags. Frustrated by the status quo of HTML email, Josh W. Comeau decided to build a new, fuss-free email workflow. [My Wonderful HTML Email Workflow]( Josh’s [wonderful HTML email workflow]( as he calls it, uses a combination of MDX and MJML to make writing emails as easy as writing a blog post. It works with a Markdown-like syntax, is compatible with all popular email clients, and supports custom components that can be reused across emails. To get you up-to-date on the current state of HTML email, also be sure to check out [Oliver Williams’ article](. It takes a closer look at how an update for Outlook improved the situation (no more tables!), what HTML and CSS can do in email today, and the role that AMP could play to lead email into a better future. There is still a lot of room for improvement, and email certainly hasn’t reached the modern world of coding yet, but things are heading into the right direction. Even if it’s only slowly. (cm) --------------------------------------------------------------- 2. Interaction To Next Paint Have you heard of INP already? INP, short for Interaction to Next Paint, is a new Core Web Vital that will impact Google rankings from March 2024 on. It measures how quickly a site responds to user interactions like clicks and presses. To get your site ready for INP, DebugBear published a comprehensive [guide to how INP is measured]( what’s a good INP value, and how to optimize for it. [Measure And Optimize Interaction to Next Paint]( A handy little helper to identify UI elements that cause slow interactions is [INP Debugger](. Contrary to other tools that don’t simulate interactions with the page, INP Debugger automatically interacts with the page elements and reports the interaction delay. All you need to do is enter a URL and select if you want to test on mobile or desktop. (cm) --------------------------------------------------------------- 3. Designing With Language Models There’s a lot of noise around language models like ChatGPT, Claude, and LLaMA and their impact, but not enough clear-heading guidance about how to think about them or work with them. Maggie Appleton wants to change that. At SmashingConf Freiburg two weeks ago, she held a brilliant talk on the challenges of designing with language models — [the video is now online]( [Squish Meets Structure: Designing with Language Models]( In “[Squish Meets Structure: Designing with Language Models]( Maggie explores what language models are, how they came into existence, and why they are hard to design with. Maggie compares them to squishy, biological things that work in a completely different way to predictable software and the traditional programming logic we all are used to. The talk is a fantastic opportunity to reconsider existing mental models to better understand the behavior of language models and how to constrain it. (cm) --------------------------------------------------------------- From our sponsor Start Using Storyblok In Less Than A Minute [Storyblok]( Storyblok is a headless CMS that works with all modern frameworks and platforms. You’re completely free to choose the best option for your project: Next.js, Nuxt.js, Astro, and more. Pick your favorite technology and [get started in less than a minute](. --------------------------------------------------------------- 4. Bulk-Applying Variables In Figma Here at Smashing, we are always on the lookout for Figma plugins that simplify tasks and take your design workflow to the next level. A fantastic helper that we came across just recently is “[Apply Variables]( by Tokens Studio. The plugin automatically converts applied styles or untokenized properties to variables of a remote collection, in bulk. [Apply Variables]( “Apply Variables” lets you swap styles with variables, so if you have elements on your page that have color styles applied and you want them to be variables, it takes only one click to do so, in bulk and with the names staying the same as before. Elements with raw dimension values will be swapped with variables of the same value. This works with number variables such as corner radius, item spacing, padding, and row gap. A real timesaver! (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 Management Masterclass]( UX with Slava Shestopalov. Oct 5–13 - [Typography Masterclass]( Design with Elliot Jay Stocks. Oct 16–30 - [Customer-Centric Product Strategy Workshop]( UX with Debbie Levitt. Oct 18–26 - [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 - [From Chaos to Clarity: Streamlining Your Websites Content]( Workflow with Paul Boag. Dec 7–15 - [Smart Interface Design Patterns Video Course]( UX 9h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 6. More Aggressive Cache Headers Modern hosts like Vercel and Netlify take care of a lot out of the box, so you don’t have to deal with the complicated stuff. However, when it comes to caching, the defaults often offer room for just a little more optimization, as Alex MacArthur shows. In his blog post “[Your Cache Headers Could Probably Be More Aggressive]( he explores why and what we can do to push cache performance even further, at least for some assets. [Your Cache Headers Could Probably be More Aggressive]( Alex explains how to load each asset straight from the cache after a page has been visited for the first time to eliminate unnecessary requests and how to use fingerprinting to refresh the cached assets if needed. Implementing this technique depends on how you’re hosting your site; Alex covers Vercel and Netlify and also shares instructions for using a reverse proxy if you’re on a provider that doesn’t permit customizing response headers so easily. (cm) --------------------------------------------------------------- 7. Toolkits To Get Things Done What equipment do folks use to get their job done? If you love to learn more about both the hardware and software that fellow designers and developers use, [Uses This]( has got you covered. The site features more than 1,200 interviews with people from all walks of life, sharing insights into their equipment and the setup they dream of. [Uses This]( Among the interviewees are not only designers and developers but also illustrators, artists, activists, journalists, podcasters, publishers, and many more. You can browse the interviews by category or use the search function if you’re looking for something particular. New interviews are added regularly. An interesting peek into other creatives’ toolkits. (cm) --------------------------------------------------------------- From our sponsor Northwestern’s Online MS In Information Design And Strategy [Northwestern’s Online MS In Information Design And Strategy]( Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. [Learn more →]( --------------------------------------------------------------- 8. Free For Developers If you are building a little side project, or just a friendly website for the public, you might be wondering which services you should use to host the website, what infrastructure to use, and how to get off the ground running in no time. [Free For Developers]( [Free For Devs]( lists services and products that include free tiers for developers. Choose anything from email server to monitoring, and the website shows which options are free and what the limitations are. Helpful!(vf) --------------------------------------------------------------- 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 fall. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 10. Recent Smashing Articles - [How Smashing Magazine Uses TinaCMS To Manage An Editorial Workflow]( - [Revealing Images With CSS Mask Animations]( - [Facilitating Inclusive Online Workshops (Part 1)]( - [Gradients, Blend Modes, And A Really Cool Hover Effect]( - [Rediscovering The Joy Of Design]( - [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](

No.	Font Name
Subscribe Now