Smashing Newsletter: Issue #352

Editorial

There will be a time when front-end developers won’t even remember what Internet Explorer once was. All those hacks for the quirks mode and transparent PNGs, along with layout bugs and browser sniffing. These times are way behind us, and we are looking at a shiny bright front-end landscape shaped by all of us.

In today’s newsletter issue, we look at some of the useful tools for front-end developers and engineers to boost their toolbelts. From making better sense of the Terminal to DOM events and useful VS Code Extensions to accessible Vue and bundle analyzer.

We’ll be diving into the state of front-end at the upcoming SmashingConf SF as well, with Brad Frost, Cassie Evans, Miriam Suzanne and Pablo Stanley speaking, among many other wonderful speakers.

Also, we have a Smashing Hour coming up this week: an informal get-together to talk about the good ol’ web, this time on all of the exciting features in CSS with Amit Sheen, a creative mastermind who is slightly obsessed with CSS animations. We hope to see you there!

In the meantime, happy front-end hunting!

— Vitaly (@smashingmag)

1. Handy Command Line Tools

Let’s make the good old command line a bit more glamorous! That’s the self-declared mission of the Charm ecosystem. It offers the tools you need to build great stuff for the terminal.

There are currently three Charm applications and seven open-source libraries available to help you take the command line to the next level. A self-hostable Git server for the command line called Soft Serve, the app Glow that renders markdown on the command line, and Skate, a personal key-value store with a simple but powerful command-line interface. There’s also Charm Cloud, a command-line backend that combines the power of the command line with next-generation networking, data storage, identity, encryption, and multi-machine support, as well as mighty little helpers like a stylesheet-physics-based animation library, style definitions for nice terminal layouts, and much more. A powerful package. (cm)

2. Hydration Is Pure Overhead

Hydration is a solution to add interactivity to server-rendered HTML. It recovers event handlers by downloading and re-executing all components in the SSR/SSG-rendered HTML. And while hydration is often seen as a virtue, Miško Hevery has a different opinion. For him, hydration is overhead, a “horrible workaround because web frameworks don’t embrace how browsers actually work”. But why? And how can we do better?

In his post “Hydration is Pure Overhead”, Miško digs deeper into hydration, where he sees the overhead, and, of course, his suggestion for a no-overhead alternative: resumability. Resumability focuses on transferring all of the information from the server to the client, allowing the client to reason about the application without downloading the application code eagerly. Only a user interaction forces the client to download code to handle that specific interaction, there’s no duplicate work involved as in the case of hydration, and, thus, no overhead, involved. A concept worth exploring. (cm)

3. DOM Events Visualizer

Listening to and responding to events is a fundamental skill for building software on the web. And while the DOM has a powerful built-in event system, many of us have a rather basic understanding of the DOM Event system and only scratch the surface of the available power. This can lead to bugs in applications and writing lots of code to work around the DOM event system rather than leveraging it. To change that, Alex Reardon built the DOM Events visualizer.

The DOM Events visualizer helps you learn about the DOM Event system through exploration. With just a few clicks, you can add different kinds of event listeners to parent, child, and grandchild elements, and dispatch them to see how the setup works in practice. A fantastic little helper. (cm)

4. Useful VS Code Extensions

We spend so much time in our text editors, and every now and again we encounter those frustrating little issues that slow us down. Perhaps finding the right files takes too long, or finding a matching closing bracket becomes a long-winded adventure on its own. Let’s fix all those annoyances for good.

In our post “Useful VS Code Extensions For Front-End Developers”, we compiled handy VS Code extensions for front-end development that minimize slow-downs and frustrations. You’ll find fine productivity boosters in there just like advanced debugging helpers. We hope they’ll prove to be useful in your day-to-day work — and, most importantly, help you avoid some time-consuming, routine tasks. (cm)

5. Upcoming Online Workshops

You might have heard it: we run online workshops around frontend 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.

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 an overview of our upcoming workshops:

DevOps Masterclass Dev
with Denys Mishunov. May 16–30
The Fundamentals of UX Writing UX
Yuval Keshtcher. May 18–26
UX for Mobile eCommerce Masterclass UX
Rinaldo Ugrina. May 23 – June 6
Pushing CSS to The Limit Dev
with Amit Sheen. May 25 – June 2
Designing Better UX With Top Tasks UX
with Gerry McGovern. June 1–15
Smart Interface Design Patterns UX
with Vitaly Friedman (7h video + UX training)
Jump to all online workshops →

6. Understanding Bundle Size

When you’re building complex JavaScript applications, it is common to bundle files together to ensure that users only download the code necessary for the page to make the app load faster. However, this can turn out to be quite a balancing act: You need to limit the number of files while at the same time limiting the size of each of those files. So where is the sweet spot? Bundle Buddy helps you find out.

Created by Susie Lu and Sam Saccone, Bundle Buddy determines if your bundles are duplicating too much code at the cost of reducing the file count. To understand what code is in your bundle and how it got there, you can import an existing project or select the bundler you’re using and upload your assets. Bundle Buddy will then visualize the relationship of the files before and after bundling. (cm)

7. Free eBook: Accessible Vue

JavaScript frameworks like Vue, React, and Angular have a reputation for poor accessibility. But is this really an inherent problem of these tools? Or is it possible to build accessible sites and apps with them if you respect web app idiosyncrasies? Marcus Herrmann is convinced that the component-based architecture, statefulness, and related tooling can and should be used for “the good cause”.

In his free eBook Accessible Vue, Marcus looks into the why and how of building inclusive apps with Vue.js. He gathered strategies, code snippets, and already inclusive component libraries for working with Vue 2 and 3 — from the very basics of accessibility and web app accessibility concepts to making typical components accessible and testing for accessibility. You can download the eBook for free in PDF, Mobi, and ePUB formats or pay what you want for it. A web version is also available. (cm)

8. Practical Front-End Challenges

Learning by doing is often the best way to bring your skills to the next level. And, well, that’s also the idea behind Frontend Practice. The site gives front-end developers of all skill levels ideas for recreating real websites for real companies to put their front-end knowledge to the test.

The challenges are divided up into three levels, with level 1 aimed at developers who are just starting out learning about layouts, animations, and color choices and level 3 pushing to complex layouts and interactive elements. Each project comes with a color palette to save you time and curated resources that help you tackle difficult elements. A fun way to get better at your craft. (cm)

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).

May 10, 2022 Smashing Newsletter: Issue #352

Previous Issues