format-html.html (3420B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>I Quit Using Prettier to Format HTML | Riaz's Website</title> 6 <link rel="stylesheet" href="/style.css"> 7 <link rel="icon" href="data:,"> 8 <meta name="description" content="I switched from Prettier to Tidy, a minimal alternative, and realized that HTML indentation and line wrapping doesn't matter."> 9 <meta name="viewport" content="width=device-width, initial-scale=1"> 10 </head> 11 <body> 12 <h1>I Quit Using Prettier to Format HTML</h1> 13 <hr> 14 <article> 15 <p>Lugging a node_modules folder <a href="https://tsh.io/wp-content/uploads/2019/06/node-modules-app-performance_.png">larger</a> than the size of my website and installing a JavaScript package manager to get something as simple as an HTML formatter carries too much software complexity.</p> 16 <p>A less bloated alternative is <a href="https://www.html-tidy.org/">Tidy</a>. I decided against switching since it doesn't result in the same style of indentation and line wrapping as Prettier.</p> 17 <p>More recently, I considered how many websites I visit use Prettier's code style. Later, I realized even prettier.io's HTML, including its page <a href="https://prettier.io/users">highlighting its users</a>, doesn't follow its format! The author of Prettier doesn't use it for <a href="https://jlongster.com/">his own website</a>. If the author doesn't care, why should I?</p> 18 <h2>Options</h2> 19 <p>After making the switch, the options I use for Tidy are as follows:</p> 20 <pre>tidy -mq -wrap --tidy-mark no</pre> 21 <ul> 22 <li>-m: modify the input files</li> 23 <li>-q: suppress unnecessary output</li> 24 <li>-wrap: don't wrap text when a column number is not provided</li> 25 <li>--tidy-mark: whether to add a meta tag to show that Tidy was used</li> 26 </ul> 27 <p>I disable Tidy's line wrapping because I find it ugly, as shown below.</p> 28 <pre> 29 <p>paragraph 30 wrapped</p></pre> 31 <p>I would rather that it look more like this:</p> 32 <pre> 33 <p> 34 paragraph wrapped 35 </p></pre> 36 <p>I also don't use Tidy's automatic indentation since it spreads out short lines, turning this</p> 37 <pre><li><a href="/">Home</a></li> 38 <li><a href="/links">Links</a></li></pre> 39 <p>into this less readable version.</p> 40 <pre> 41 <li> 42 <a href="/">Home</a> 43 </li> 44 <li> 45 <a href="/links">Links</a> 46 </li> 47 </pre> 48 <p>No indentation means the added benefit of smaller file sizes.</p> 49 <h2>Speed Comparison</h2> 50 <p>Running <code>bun prettier -w .</code> with <code>printWidth</code> set to 130 after my local copy of the website's files were formatted using Tidy resulted in <code>1.76s user 0.15s system 179% cpu 1.066 total</code>.</p> 51 <p>Running it again, meaning no files needed to be changed, resulted in <code>1.76s user 0.20s system 140% cpu 1.393 total</code>.</p> 52 <p>Running <code>find -name "*.html" -exec tidy -mq -wrap --tidy-mark no {} \;</code> with the files formatted using Prettier resulted in <code>0.02s user 0.04s system 88% cpu 0.068 total</code>.</p> 53 <p>Running the command again resulted in <code>0.02s user 0.03s system 97% cpu 0.050 total</code>.</p> 54 <p>This means that Tidy can format my website's HTML around fifteen times faster than Prettier.</p> 55 <h2>Conclusion</h2> 56 <p>Don't let small differences stop you from switching to more minimal software.</p> 57 </article> 58 <footer> 59 <hr> 60 <a href="/">Home Page</a></footer> 61 </body> 62 </html>