Supporting lynx browser

Yesterday I was reading the wonderful words of Matthew Graybosch (shout out Cory Dransfeldt for the intro) and noticed the blurb in the website footer.

"Best viewed with Firefox, but should also work in Lynx"

I instantly wondered if my website would work with Lynx and within a matter of seconds I had run a cheeky brew install lynx to install the browser in iTerm and check it out.

Without thinking about it, I tried to invoke the program with another lynx command.

Homepage of lynx viewed in Lynx

It worked! It loads the lynx homepage by default and provides instructions on the screen explaining how to navigate.

Commands: Use arrow keys to move, '?' for help, 'q' to quit, '<-' to go back.
Arrow keys: Up and Down to move. Right to follow a link; Left to go back.
H)elp O)ptions P)rint G)o M)ain screen Q)uit /=search [delete]=history list

I type G to "Go" and then I am prompted to enter a URL.

URL to open:

I type the URL of my homepage. I'm feeling lazy so I type the shorter michaelgale.dev and hit return.

Lynx auto-completes the URL, and (I assume) follows the various redirections (e.g. http -> https and adding www). Lynx then asks if I'm still okay with visit the webpage.

Using https://www.michaelgale.dev/

Cool. I press return on my keyboard again and the page instantly loads. Screenshot below.

Homepage of michaelgale.dev viewed in Lynx

For the most part, all of the core content is available and working. I have adjusted the content of the page to intentially creating multiple ways to navigate to other pages, without requiring use of the traditional "hamburger" menu.

With multiple ways of accessing the core content of the website, I can happily say the main experience works. I have done my best to add "high value" alt-text to all images on my website, so images work in a text-only environment. Stoked!

Before even checking if single blog entries are working (they do) I turn my attention to the interactive elements of the page, and notice that interactive buttons yield a "Bad HTML!!" warning. I like that.

Bad HTML!! No form action defined.

To fix this, I wrap a form element around the interactive part, and give it an action that points the user to a static markup version of the same content when the form is submitted. Demonstration code:

<script>
definePageMeta({
  layout: 'raw'
})
</script>
<template>
  <form action="/x/app-navigation">
    <button @click="openHamburgerMenu">
      🍔 (Hamburger emoji)
    </button>
  </form>
</template>

The "raw" layout, will render components without any "fluff" on the page. No logo, no masthead, no footer, etc. Just the component itself. I'm storing all of my raw/static pages in a folder called x (no relation) - but this could be called anything.

The main navigation can now be viewed as raw markup at /x/app-navigation

Bug-fixing and other benefits

A nice side-effect of fixing this little bug in the Lynx experience, is this "hamburger" button now feels like it works with JavaScript disabled.

Another helpful aspect of this experiment was identifying a bug with alt-text for the album art I added to the homepage a few weeks ago. I accidentally left the syntax inside a binding as vue templating syntax, instead of updating to use JS template strings. This meant that the variables were never interpolated, so every piece of album art was describing the same mess of text:

"Artwork for {{release.title}} by {{release.artistName}}"

Gross!

But easily fixed.

<img
  :src="`/api/image/${release.artwork}`"
- :alt="Artwork for {{release.title}} by {{release.artistName}}"
+ :alt="`Artwork for ${release.title} by ${release.artistName}`"
  loading="lazy"
/>

"Artwork for .2 by régresser"

Ah, much better. Well, it could still be improved by better describing what is in the image - but its better than robot goobledigook, I mean.

There are still more things to find and fix - and fix them I shall in good time.

Thanks for reading ✨