'Tis the Season For Coding Unto Others

I was about to read this year’s “Advent of Code” about page in Firefox, when I saw that the page was minimal and only text. I thought, “Sweet! A nice terminal-friendly page, I probably should just view it in w3m”. I was greeted by the following.

this is how the text is rendered in firefox

Advent of Code

    [About][Events][Shop][Log In]

      /*2024*/

    [Calendar][AoC++][Sponsors][Leaderboard][Stats]

this is what the page render looks in the terminal

Advent of Code

  • [About]
  • [Events]
  • [Shop]
  • [Log In]

       y(2024)

  • [Calendar]
  • [AoC++]
  • [Sponsors]
  • [Leaderboard]
  • [Stats]

Our sponsors help make Advent of Code possible:

a greeting from the Advent Of Code creator, Eric Wastl

Hi! I'm Eric Wastl. I make Advent of Code. I hope you like it! I also make lots
of other things. I'm on Bluesky, Mastodon, GitHub, and Twitter.

Hello Eric, pleased to make your acquaintance. I have a puzzle for you. How can we flatten the menu elements at the top of this page so they only occupy two lines, just like in Firefox, and Chrome? As it stands, the extra newlines lines are taking up precious real-estate in my terminal. No big deal, let me just press F12 and check out the source…

I must confess, this spooked me for a half second

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8"/>
<title>About - Advent of Code 2024</title>
...
</head><!--

Oh, hello!  Funny seeing you here.

I appreciate your enthusiasm, but you aren't going to find much down here.
There certainly aren't clues to any of the puzzles.  The best surprises don't
even appear in the source until you unlock them for real.

Please be careful with automated requests; I'm not a massive company, and I can
only take so much traffic.  Please be considerate so that everyone gets to play.

If you're curious about how Advent of Code works, it's running on some custom
Perl code. Other than a few integrations (auth, analytics, social media), I
built the whole thing myself, including the design, animations, prose, and all
of the puzzles.

The puzzles are most of the work; preparing a new calendar and a new set of
puzzles each year takes all of my free time for 4-5 months. A lot of effort
went into building this thing - I hope you're enjoying playing it as much as I
enjoyed making it for you!

If you'd like to hang out, I'm @was.tl on Bluesky, @ericwastl@hachyderm.io on
Mastodon, and @ericwastl on Twitter.

- Eric Wastl
-->

respectfully disagree, Eric, there are in fact clues to be found here

<body>
<header><div>
<h1 class="title-global"><a href="/">Advent of Code</a></h1>
<nav><ul>
<li><a href="/2024/about">[About]</a></li>
<li><a href="/2024/events">[Events]</a></li>
<li><a href="https://cottonbureau.com/people/advent-of-code" target="_blank">[Shop]</a></li>
<li><a href="/2024/auth/login">[Log In]</a></li>
</ul></nav></div>
<div><h1 class="title-event">&nbsp;&nbsp;&nbsp;<span class="title-event-wrap">0xffff&amp;</span>
<a href="/2024">2024</a>
<span class="title-event-wrap"></span></h1>
<nav><ul>
<li><a href="/2024">[Calendar]</a></li>
<li><a href="/2024/support">[AoC++]</a></li>
<li><a href="/2024/sponsors">[Sponsors]</a></li>
<li><a href="/2024/leaderboard">[Leaderboard]</a></li>
<li><a href="/2024/stats">[Stats]</a></li>
</ul></nav>
</div></header>

this was all on a single line, so I chopped it up to fit in this code block

I know little about the intricacies of html. So the solution/fix could be immediately and painfully apparent to anyone who does. Forgive me, I’ll figure it out, it may just take some time. My initial thought is that each <li> tag is causing a newline to be rendered in the terminal. This should be easy enough to test. I will simply remove them in $EDITOR.

there it is

		
	Advent of Code

    [About][Events][Shop][Log In]

   $year=2024;

    [Calendar][AoC++][Sponsors][Leaderboard][Stats]

Our sponsors help make Advent of Code possible:

That was an easy fix. I can’t be 100% certain, but it seems that the removal of the <li> and matching </li> tags do not have any negative effect on the Firefox render. Perhaps there is a good reason for them that I fail to comprehend, perhaps not. I just know that this is common for many sites on the web. An otherwise sparse header with a few menu links ends up rendering as a dozen or a few dozen lines of single words at the top of the buffer. Many sites employ the increasingly ubiquitous “skip to main content” link at the top of the page. But I found that these only work around 50% of the time. And even when the links do work, they don’t navigate you as deep into the page as you may like, as the “main” tag doesn’t seem to be strategically placed at all. I’m sure an html guru among you will find and educate me about all of this.

Even if the <li> tags serve a critical purpose, surely there is a way to have them but not render a newline? Perhaps it’s a css thing? That is my “Day 0” Advent Of Code puzzle for any web developer out there. How do we fix all of these horizontal headers all over the internet so that the text does indeed render horizontally in the terminal?