November 3, 2020 Smashing Newsletter: Issue #273
This newsletter issue was sent out to 183,659 subscribers on Tuesday, November 3, 2020.
Editorial
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 <head> 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.
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)
- Making Sense Of Waterfalls And Flame Charts
- The State Of Developer Ecosystem 2020
- Designing The Inline Form Validation Experience
- Data Visualization Explained
- Tools To Improve Your Site’s Performance
- A Curated Gallery Of Patterns
- Coming Up Next on Smashing
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.
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.
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)
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.
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.
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)
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.
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.
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)
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.
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)
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.