Xin chào Smashing Friends,

Decisions! In our work, we make thousands of decisions every day. Today, building and designing front-end isn’t easy. Not only are there so many things happening all around us, but the cost of wrong decisions is also high, and making good decisions requires expertise and a team’s skillset that usually needs years to build up.

In this newsletter, we are looking into some of the useful resources to help you make better front-end decisions — perhaps by exploring DOM treemap or starting off with front-end boilerplates, or perhaps even using AI as your coding assistant. We hope you’ll find them useful.

Let’s jazz together again! Meet SmashingConf SF 2022, taking place on March 28–31 at the waterfront next to the iconic Golden Gate Bridge.

If you’d like to boost your skills, we have good news that we’ve been waiting for months. SmashingConf is back! We are so, so happy to finally invite you to the in-person SmashingConf SF 2022, taking place on March 28–31. Let’s jazz together in San Francisco, in person: jump to all topics and speakers.

One track, two days, with talks and workshops by experts on accessibility, front-end, design systems, performance and interface design. We’ll also be hosting in-person workshops on front-end, design and UX. We have a few happy-birds tickets with a special price, so don’t wait too long.

See you online and in-person!
— Vitaly (@smashingmag)

1. Preventing Excessive DOM Size

If you spend a bit of time studying Lighthouse audits, you probably have stumbled upon Lighthouse complaining about excessive DOM size. The implications can be quite severe: increased memory usage, longer style calculation and costly layout reflows, all resulting in an increase of Total Blocking Time, one of the Web Vitals that Lighthouse is considering in its audits. But once you know that you need to reduce the DOM size, where do you start?

Christian Schäfer’s DOM Treemap Chrome Extension (also available for Firefox) helps you explore the distribution of DOM nodes in the document tree. The extension extends the “Elements” tab in DevTools with an additional pane that, as Christian explains, visualizes the distribution of node descendants of the currently inspected DOM element. So you can navigate in the DOM, locating branches that are too large and too heavy. Plus, if you are using BEM, the extension visualizes how intensive BEM components are on average. Handy! (vf)

2. Building Websites In 2021

Is building a website in 2021 easier than it was, let’s say, 5–10 years ago? We don’t have to worry that much about the intricacies of Internet Explorer and inconsistencies of support (or rather lack of support) across browsers. Yet when building a fast, accessible and scalable solution, sometimes we need to make thorough architectural decisions — starting from a choice of tools and libraries all the way to hosting and CDNs.

In “How I Built A Modern Website in 2021”, Kent C. Dodds goes into all the fine details explaining all the minor and major decisions that were done in the process of redesigning his personal website. That includes a deployment pipeline, database connectivity, local development, image optimization, database interaction and authentication.

One of the useful little details is that when trying to reach out to Kent, you can record an audio message directly in the browser (you need to be signed up though) and have Kent reply to you via audio later. Also, with an option to log in once and then log in on other devices with a QR code. A nice 34-min read that’s worth reading over a cup of coffee! (vf)

From our sponsor

Web Dev: Essential Industry Tips

Explore how web developers are making use of the latest tools to succeed in the industry. The Rapid Web Development 2021 Report was created by our friends at Velo by Wix and has all the insights from freelancers and agencies around the world. Discover data, trends and real user stories to help you grow your business. You can read our take on the most interesting findings here.

3. Better Code Reviews

If you are working in a large enough team, chances are high that you’ll have to review your colleague’s code before it goes into production. But how do you make your code reviews more useful and actionable without ruining the team’s spirit, or leaving the colleague in the dark? As much as we need to leave comments with empathy, we should also do the same with code reviews: we need to provide specific, actionable feedback and also mark optional comments as well as offer a rationale for decision-making — but can we do better?

In “How To Make Good Code Reviews Better”, Gergely Orosz highlights some of the important considerations that make good code reviews even better, especially when dealing with cross-time zone reviews, organizational support and reviews for new joiners.

If you need to dive deeper, Google has collected a few best practices around code review and Smartbear even provides an annual State of Code Review Report with trends in team structure, expectations, code review frequency, and so on (please note that email is required). (vf)

4. Upcoming Front-End & UX Workshops

You might have heard it: we run online workshops around front-end and design, be it accessibility, performance, navigation, or landing pages. 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.

Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

As always, here’s an overview of our upcoming workshops:

• Behavioral Design Design
  with Susan & Guthrie Weinschenk. Nov. 3–17.
• Deep Dive On Accessibility Testing Dev
  with Manuel Matuzović. Nov. 4–18.
• Next.js Black Belt Dev
  with Atila Fassina. Nov. 9–24.
• Jump to all online workshops →

5. Front-End Boilerplates And Starter Kits

When working on any kind of project, we all have to start somewhere at some point. Not every project has to start from scratch, and so having a few reliable boilerplates and starter kits can come in quite handy. Over the last few months, we’ve been collecting some useful tools that might be just what you need when you have a blank page in front of you.

Useful Front-End Boilerplates And Starter Kits shines the spotlight on starter kits for all kinds of projects, from static site templates and React/Vue starter kits to favicon and accessibility templates and even emergency site templates. We are also working on an ever-growing Guide to Accessible Front-End Components and Useful VS Code Extensions. Any recommendations are welcome — please let us know on Twitter (@smashingmag) and we’ll add it right away! (vf)

From our sponsor

The 7 Best Programming Languages To Learn In 2022

Which programming language should you learn? An experienced software engineer highlights languages in high demand, which often offer significant salary opportunities and can be leveraged in several types of roles.

6. Tailwind Cheatsheet

If you are using Tailwind CSS in your project, you probably have forgotten the right class names at least once. No wonder, there are plenty of different versions of Tailwind, and there are plenty of classes to work with. If you need a quick Tailwind reference cheat sheet, look no more: Jay Elaraj has it all set up and ready to be used.

Tailwind CSS Cheat Sheet allows you to look up documentation for all Tailwind classes, all grouped and categorized, with docs and an overview of all class names — going all the way to Tailwind 0.7.4. You can also search for a specific class and preview all available classes with a version label for a specific version of Tailwind. One for the bookmarks! (vf)

7. AI-Powered Code Completion For Mac

Have you ever wished you could code without having to worry about memorizing function calls and other basic syntax? Well, good news, Kite makes it possible. The tool uses the latest developments in machine learning to offload repetitive parts of programming and support you with fast, context-aware completions of your code.

Available for free for Mac, Kite works with 16 code editors and 16 languages to help you code faster and stay in the flow. In fact, it’s possible to cut keystrokes by as much as 47%. Kite also includes documentation lookup for Python that lets you view Python docs with just one click or mouse-hover. A real timesaver! (cm)

From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Earn your master’s degree online.

8. Recent Smashing Articles

• A Deep Dive Into object-fit And background-size In CSS
• How To Build A Real-Time Multi-User Game From Scratch
• Respecting Users’ Motion Preferences
• Building An API With Gatsby Functions
• Read more of the latest articles 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