When Innovation Moves Too Fast, Look Back

The pressure to stay current with front-end development is real. Every day brings a new framework, a new tool, a new syntax. For those working independently, the fear of falling behind can become all-consuming. But at some point, surrendering to that pace becomes a professional necessity. No one is expected to know everything—and focusing on what truly matters, rather than chasing every release, leads to better work and a clearer mind.

That measured approach to learning has revealed an important blind spot. In the rush toward what's next, many developers are neglecting the depth that HTML, CSS, and JavaScript already offer. The most valuable lessons of the year often come not from new tools, but from re-examining the fundamentals we think we know.

The State of Everyday HTML

Inspecting real websites makes it painfully clear that most HTML is in poor shape. The data confirms what accessibility advocates have long warned:

  • 98.1% of the top 1,000,000 home pages have detectable WCAG 2 failures.
  • Thousands of sites contain <h7> and <h8> elements.
  • After title and meta, div is the most popular element.
  • On average, developers use only about 30 of the 110+ available elements.

There is a wide gap between knowing HTML syntax and knowing how to write semantic, well-structured documents. Even small forgotten features can improve a page. For example, the download attribute accepts a value that lets you change the filename of a downloadable file:

<a href="files/yxcvc27.pdf" download="report.pdf">Download (2MB)</a>

Similarly, a value attribute on an item in an ordered list changes the numbering for it and all subsequent items:

<ol>
  <li value="3">C</li>
  <li value="2">B</li>
  <li value="1">A</li>
</ol>

Rediscovering CSS Depth

CSS remains almost inexhaustibly deep. Browser documentation and reference sites reliably surface something new with nearly every lookup—search for margin, list-style-type, or color, and there's a good chance you'll find a detail you never appreciated.

Two particularly useful finds stand out. First, you can pass a url() function as part of the content property's value, opening up simple ways to add images or icons without extra markup.

div::before {
  content: url('marker-icon.png');
}

Second, native smooth scrolling is now possible directly in CSS, without JavaScript:

// Animate scrolling only if users don’t prefer reduced motion
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  
  // Add some spacing between the target and the top of the viewport
  :target {
    scroll-margin-top: 0.8em;
  }
}

The Vanilla Foundation Beneath the Frameworks

JavaScript frameworks come and go, but they all run on the same language underneath. That's where lasting knowledge resides. One helpful, underused feature is the nomodule attribute, which restricts script execution to browsers that don't support JavaScript modules—useful for progressive enhancement and fallbacks.

<script nomodule>
  console.log('This browser doesn’t support JS Modules.');
</script>
<script type="module">
  console.log('This browser supports JS Modules.');
</script>

Fundamentals First

Semantic HTML is the backbone of every website, and writing it well should be a top priority. CSS's complexity means learning new concepts requires understanding the problems they solve compared with older approaches. Relearning overlooked-and-forgotten details of established elements and properties has been one of the most rewarding parts of 2020. There is still abundant hidden knowledge in the languages we use daily—waiting not on the horizon of what's next, but in what's already here.