Cut the Fat
<a rel="nofollow noopener noreferrer" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fexample%2F%3Futm_source%3Dfacebook%26utm_medium%3DSocial%26utm_campaign%3DSocial-Pug" class="dpsp-network-btn dpsp-facebook dpsp-no-label dpsp-first" ><span class="dpsp-network-icon"></span><span class="dpsp-network-label-wrapper"></span></a>
The first edition of Upgrade Your HTML had two chapters on writing HTML in general (“Think Through Your Markup” and “Question Your Frontend Code”). This edition and future ones will stress the importance of monitoring your overall markup, too.
The sample code above uses too much code. To illustrate that it’s better not to look at the code itself but its purpose: Allow the user to share the respective page on Facebook.
When you hear that, the first response should not be three rel
values, four classes, two child elements with one class each, but: one link. Something like this:
<a href=https://www.facebook.com/sharer/>Share on Facebook</a>
It behooves, then, to check whether this code is enough.
If it doesn’t, it’s useful to check each piece of code whether it’s absolutely necessary. (That’s the school of Minimal Web Development.)
It’s hard and sometimes impossible to reproduce and relate to all decisions made by other developers—especially when we don’t know them and their projects. In this case we can infer a few things, starting with that they will have liked to share a particular page; and we’ll assume that should include a few parameters for their site analytics. In other words, we’ll keep the link they’ve already used:
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fexample%2F%3Futm_source%3Dfacebook%26utm_medium%3DSocial%26utm_campaign%3DSocial-Pug">Share on Facebook</a>
Given how specific the use of rel
was, we can assume that their rel
values were also intended and needed. However, as the link would not be opened in a new tab or window—which in most cases, it shouldn’t —, noopener
and noreferrer
are not needed, and only nofollow
remains. Reluctantly.
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fexample%2F%3Futm_source%3Dfacebook%26utm_medium%3DSocial%26utm_campaign%3DSocial-Pug" rel=nofollow>Share on Facebook</a>
The rest is speculative and gives reason for concern: One, two, maybe three of the classes may be necessary, but it’s impossible to tell which ones; the span
elements seem quite unnecessary, though that assumption is still speculative; yet what’s entirely been missing was some cue for users as well as search engines what the element was about at all—text content, which “Share on Facebook” now covers.
For all we know, that last snippet is the minimum we need. Less code, and more content.
Why Less Code?
Why all of this, why this focus on so little code? What’s the purpose of this all, does that not make our work more difficult than it already is?
Here’s my thinking! Less code:
- is less code to write
- is… or can be easier to understand
- is usually faster (at least the payload is smaller)
- is often easier to maintain
- is more beautiful
The first reason is obviously correct, because it’s tautological.
Understanding and maintainability depend on a few factors, particularly whether one inadvertently drifts into writing magic code. I believe that’s not an actual danger with HTML: Assuming the code is still valid, understanding and maintainability don’t seem to suffer when, for example, leaving out optional code—or would you suggest that <p>Hi
is harder to understand than <p>Hi</p>
?
Less code meaning a smaller payload leading to improved performance seems to reflect solid reasoning; I’d argue that exceptions prove this rule, and that we enter the realm of micro-optimization when we reject them.
That less code is more beautiful—that, then, is certainly individual, subjective, personal. Yet personally, subjectively, individually I cherish and promote minimal HTML, like the smallest valid document:
<!DOCTYPE html> <title>␣</title>