Things that are still hard with vanilla JS

Modern JavaScript has come a long way from the jQuery era. So many things that used to be really hard are much, much easier now.

But, there are still some things that are a bit hard to do—and do well!—with just vanilla JS. Today, I wanted to share some of the things that still have me reaching for a library.

Let’s dig in!

Saniting HTML strings

Sanitizing is the process of removing any attributes, properties, and values that are not included in an allowlist or that are explicitly forbidden on a disallow list.

For example, if the rendered HTML from our HTML string looked like this…

<p><img src=x" onerror="alert('XSS Attack')"></p>
<p><a href="javascript:alert('Another XSS Attack')">View My Profile</a></p>

The sanitized version might look like this.

<p><img src=x"></p>
<p><a>View My Profile</a></p>

The unsanitized version runs potentially malicious JavaScript when it’s loaded. In the sanitized version When added to the UI, some items might look broken, but the malicious content will not be rendered.

There’s a Sanitizer API in the works that will add browser-native sanitizing, but for now, it still requires a library.

Of the options, DOMPurify is the most fully featured and battle tested, though also the largest.

Learn more about sanitizing here.

State-based UI and DOM diffing

JavaScript Proxies can be used to for simple DOM diffing and data reactivity, but once your UI reaches a certain level of complexity, they become about as complex as using old-school DOM manipulation.

When I have UI that gets dynamically updated and is based on the content of a specific data object, I will reach for a state-based UI library.

I’m partial to my own, ReefJS, but things like Preact and Solid are great client-side choices as well. An even better option can be to use something like Svelte or Astro to compile that client-side code into mostly HTML with a sprinkling of JS.

It’s my hope, though, that some day in the distant future we get a native Element.diff() method that makes updating the DOM with HTML strings as easy and painless as wiping the whole thing out with Element.innerHTML.

let app = document.querySelector('#app');
let html =
	`<h1>Hello world!</h1>
	<p>How are you today?</p>`;

// This isn't a real method
app.diff(html);

Photo galleries

I periodically need to display a collection of images as a gallery or (ick) slider.

While the web is littered with simple versions of these using just a little CSS and JS, there are a lot of things to consider and account for to make them accessible and full-featured.

I really enjoy PhotoSwipe for galleries. If I’m forced to implement a slider, I tend to reach for Swiper.

I generally prefer navigation menus that are always visible. But if I need to implement some sort of “hidden behind a hamburger icon” type thing, I tend to reach for Offside.

Could I do the same thing without it? Of course!

Could I handle animations and distances with the simplicity and grace of using the library? Definitely not!

Date and time stuff

JavaScript has had date and time support for a very long time. And despite what a lot of folks will tell you, it’s not that bad to work with.

Where the native Date object falls flat, though, is in dealing with timezones and relative times.

There’s a new Temporal API in the works that will make some of the more difficult stuff a lot easier, but until that’s actually adopted, I reach for a library like date-fns for complex date and time work.

What else?

Is there anything I missed that’s on your list?