Smashing Newsletter #273: Waterfalls, Flame Charts and Inline Validation

With performance articles and tools, data visualization, patterns and designing a better inline form validation. Issue #273 • Tue, Nov. 3, 2020 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friend, Over the last couple of weeks, we were happy to run Harry Roberts’ excellent online workshop on web performance. Initially, I wasn’t planning to actually attend it, but as Harry was enthusiastically sharing his performance war stories and practical advice on everything from tooling to third-party audits, I just couldn’t turn away. Most importantly, there were many fantastic questions from the attendees that I could relate to, so it felt more like an informal, friendly community gathering of people sharing what they've learned. I just had to attend the sessions live. By the end of the last session, I was able to understand flame charts in DevTools, make sense of waterfall charts in WebPageTest and streamline the to prioritize the loading of critical resources. In fact, I’ve ended up with a dozen notes of things that we need to improve on SmashingMag, and so we spent last weeks working on those refinements for everything from critical CSS to JavaScript loading and web font loading strategy. [SmashingConf site performance]( We’ve just merged a major PR for the [SmashingConf website]( and we’ll be deploying some major performance-related updates for the Smashing Magazine website shortly as well. The changes will be rolled out slowly, so if you happen to find a bug, or a rendering issue, or anything else, please [let us know on Twitter]( and we’ll squish those bugs right away! Frankly, I can’t wait for our next online workshops already — and perhaps you’d be interested in attending them as well. We’ve just announced new online workshops on [web forms]( [HTML emails]( [CSS layout]( and [front-end in 2021]( along with [many other]( excellent options. We’d love to see you there, and I’m sure to be tuning in next time for sure! — Vitaly (@smashingmag) --------------------------------------------------------------- Table of Contents 1. [Making Sense Of Waterfalls And Flame Charts](#a1) 2. [The State Of Developer Ecosystem 2020](#a2) 3. [Designing The Inline Form Validation Experience](#a3) 4. [Data Visualization Explained](#a4) 5. [Tools To Improve Your Site’s Performance](#a5) 6. [A Curated Gallery Of Patterns](#a6) 7. [Coming Up Next on Smashing](#a7) 8. [New On Smashing Job Board](#a8) 9. [Our Current Most Popular Articles](#a9) --------------------------------------------------------------- #1. Making Sense Of Waterfalls And Flame Charts Whether we want to squish CSS bugs or debug rendering performance, we have incredible tools available for us. Yet as these tools are helpful, they can be quite overwhelming as well. If you ever felt intimated by the Performance panel in DevTools, you are probably not alone. The flame charts appear complex and not very intuitive at first, but with a bit of practice, they can boost your productivity big time. [Making Sense of Waterfalls And Flame Charts]( The lengthy piece on [DevTools Performance Reference]( highlights how to make sense of the Performance panel step-by-step. Alternatively, Umar Hansa has shared a 15-mins video lesson on [Audit with Performance Panel](. And if you’d like to make more sense of WebPageTest waterfalls, Matt Hobbs has written a fascinating [89-min read]( on everything to know about WebPageTest. That should help to make sense of them all after all. (vf) --------------------------------------------------------------- #2. The State of Developer Ecosystem 2020 What’s the most popular programming language among developers? Which languages do developers plan to migrate to? And which is the most studied language? These are only some of the questions that the [State of Developer Ecosystem 2020]( report answers. [The State of Developer Ecosystem 2020]( At the beginning of this year, JetBrains surveyed almost 19,700 developers to identify the latest trends around tools, technologies, programming languages, and other facets of the development world. Some of the key takeaways: Java is the most popular primary programming language, JavaScript the most-used overall programming language, and when it comes to adopting a new language, Go, Kotlin, and Python are at the top of developers’ lists. Apart from hard facts like these, the survey also takes a closer look at open-source contribution, team tools, life habits, and information seeking. Precious insights into what moves the development community. (cm) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- #3. Designing The Inline Form Validation Experience Sometimes you come across an article that is already a few years old but that still turns out to be gold. Like Mihael Konjević’s [post about inline validation](. To find out what’s the best default user experience when it comes to displaying inline validation errors, Mihael analyzed different sites. As his findings show, there’s no consensus on validation handling, but asking the right questions can help you design a bug-free and user-friendly experience. [Inline validation in forms]( Mihael suggests a hybrid “reward early, punish late” approach: If the user is entering data in the field that was in a valid state, perform the validation after the data entry. If the user is entering the data in the field that was in an invalid state, perform the validation during the data entry. Different forms will have different needs, of course, so be sure to adjust the approach accordingly. (cm) --------------------------------------------------------------- #4. Data Visualization Explained At times data visualization seems almost magical as it helps us identify trends and changes that might not be apparent at first. [Explore Explain]( is a long-form video and podcast series about data visualization design by Andy Kirk on data visualization, in which he invites guests from around the world to share what worked, and what didn’t work in their work. [Data Visualization]( Each episode is based on a conversation with designers to explore the design story behind a single visualization, or series of related works. So every guest explains their design process and shares insight on the little decisions that underpin the final result. The second season of the podcast series just started this week, with Anna Wiederkehr sharing the design story behind the flagship visualization work produced by FiveThirtyEight for the ‘[US Election Forecast](. A fantastic podcast worth subscribing to! (vf) --------------------------------------------------------------- From our sponsor Learn How Event Teams Use Hopin To Delight Attendees, Speakers And Sponsors [Learn how event teams use Hopin to delight attendees, speakers, and sponsors]( Meet Hopin, your virtual venue. Hopin is the first all-in-one live online events platform where attendees can learn, interact, and connect with people from anywhere in the world. With Hopin, you can create live online and hybrid events that are interactive and personal. [Create your event!]( --------------------------------------------------------------- #5. Tools To Improve Your Site’s Performance Almost every part of web design and development — from your choice of images to the performance of web servers — add up to how quickly your site will load. Metrics help you uncover bottlenecks that might stay unnoticed when you only test the site on your local setup. We collected some handy tools that make gathering and interpreting such data easy. [Measure]( To help you assess how well your site performs, [Measure]( by web.dev audits for performance, best practices, SEO, and accessibility and gives you tips to improve the user experience. The tests are run using a simulated mobile device, throttled to a fast 3G network and 4x CPU slowdown. Just like Measure, [Lighthouse Metrics]( is also powered by Lighthouse to give you global performance insights and show you how your site performs from six different regions. Last but not least, Google’s [PageSpeed Insights]( reports on the performance of a page on both mobile and desktop devices based on lab data which is collected in a controlled environment and field data to capture the real-world UX. If you need some more assistance to improve performance, our new [performance guide]( with checklists, articles, and talks has got your back. (cm) --------------------------------------------------------------- #6. A Curated Gallery Of Patterns When bold colors meet subtle palettes, organic curves appear next to sharp-edged geometric forms, and minimalist designs face playful artworks, inspiration isn’t far. If you’re up for a surprise bag of eye candy, [Pattern Collect]( is for you. The site curates beautifully illustrated patterns created by designers from across the globe. [Pattern Collect]( You can browse the showcase by tag and, if you like an artwork, a link takes you to the original on Dribbble or Behance where you can learn more about the illustrator and their work. Who knows, maybe this will even turn out to be the opportunity to find creative talent to work with on an upcoming project? (cm) --------------------------------------------------------------- From our sponsor Be: 600+ Stunning Pre-Built Websites [Be: 600+ stunning pre-built websites]( With gorgeous visuals AND smooth UX, Be Theme offers you 600+ pre-built websites that you can easily customize with Builder or Elementor. --------------------------------------------------------------- #7. Coming Up Next on Smashing With [Smashing Membership]( you get access to goodies, eBooks, discounts and live sessions with experts — all around front-end & UX, for just one coffee a month. We’re currently busy preparing new Smashing TV sessions, so keep an eye on the [Smashing TV schedule]( to not miss out on anything. [SmashingConf Workshops]( Meet [Smashing Online Workshops]( on front-end and UX with Cassie Evans, Christian Nwamba, Harry Roberts, and many others. We also have [online workshops on front-end & UX]( — designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk. - [Front-End Accessibility Masterclass]( (Nov 6–20) - [Designing Websites That Convert]( (Nov 18–26) - [Smart Interface Design Patterns, 2020 Edition]( (Dec 1–15) - [Building A Design System With CSS]( (Dec 3–17) - [Build, Ship and Extend GraphQL APIs]( (Jan 5–19) - [New Adventures In Front-End, 2021 Edition]( (Jan 21–Feb 5) - [Form Design Masterclass]( (Jan 19–27) - [Building Modern HTML Emails]( (Feb 2–10) - [The CSS Layout Masterclass]( (Feb 16–17) Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf) --------------------------------------------------------------- #8. New On Smashing Job Board - [Web Developer]( at Middlebury College (Middlebury, VT) - [3D-Artist]( at BASF Coatings GmbH (Münster) - [User Experience Designer]( at Stanford University Libraries (Stanford, CA / Remote in USA) --------------------------------------------------------------- #9. Our Current Most Popular Articles - [What Can Web Designers Do With Their Unused Designs?]( - [Native CSS Masonry Layout In CSS Grid]( - [The Principles Of Visual Communication]( --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf), Rachel Andrew (ra) 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](