A lot of people — mostly ones who learned to make Web pages in the late 90s — are fans of what I’ll call the view-source ethos.

Here it is in a nutshell:

• People will do cool things on their websites.
• You, as someone who’s making a website of your own, will want to learn from these websites and understand their techniques.
• Shipping minified, concatenated, and obfuscated source code interferes with that, making it harder for people to learn from your site.

I am broadly in favor of this. I’ve thrown out automatic minifiers for my own site. I keep hoping someone notices my exquisitely-arranged path components in my SVGs’ d properties. There’s a knob I could twist to minify my concatenated CSS. I sigh when a personal site ships a nearly-empty HTML page with a compiled JavaScript program to the browser, and the program has a small note tag attached that says “some assembly required”, à la React.

But.

It isn’t 1997 anymore.

The occasional visitor who wants to see how your site is made can easily put in good whitespace. You shouldn’t care about whitespace if you want to ensure your visitors can learn from your website.

Why?

Two reasons:

• the universal availability of DOM inspectors
• Prettier

When I want to see how a site is put together, I don’t do View Source anymore. I inspect an element that looks close to the interesting part of the page and expand my search from there.

DOM inspectors have other benefits over View Source:

• DOM inspectors clean up spaces and newlines and make sensible, nicely-indented structures out of them.

  The only way View Source is going to generate something that’s pleasant to read is if the HTML code that’s being generated is being postprocessed by Prettier.

  On my own site, as I write this, the source code that ships to the browser is pretty decent…but some spots have like ten newlines in a row and it’s not really worth it to install a postprocessor just to fiddle with whitespace.

• DOM inspectors let you tweak values live.

  ’nuff said.

Now, suppose you want to actually view the source code of a site. Turns out, I’ve wanted to view the source code of sites recently. This is what I’ve been doing, and it’s fantastic:

curl https://www.frogorbits.com/ | prettier --parser html | bat

Piping to bat only gets me syntax colorizing. If you don’t have bat handy, then just leave off the | bat at the end.

Don’t have curl or prettier handy? Copy the text of the webpage in the View Source window and paste it into https://prettier.io/playground/.

This is way better than View Source ever was.

What you should still avoid

While you don’t need to care about newlines anymore, if you still want your sites to be understandable by newbies, you should still avoid:

• compressors that change the names of JavaScript identifiers
• anything that changes classes and IDs to short, opaque, randomly-generated identifiers

Then there are a handful of things that are probably ok, but are still kind of questionable:

• minifiers that throw out attribute values’ quotes when they can get away with it
• minifiers that throw out closing tags when they can get away with it

Appendix: Downloading and formatting on Windows

If you’re on Windows, try something like this (I haven’t tried it):

Invoke-WebRequest 'https://www.frogorbits.com/' | Set-Clipboard

and then paste the contents of your clipboard into the Prettier playground.