Portable thoughts

An example of a single-file blog, and an excuse for writing one.

Contact - Twitter

Prev/Next

I recently came up with a cheap HTML slideshow made with:

None of these things are truly new, but combined they can make for a good enough experience on most devices, degrading somewhat gracefully on the others, and without any Javascript.1

This is the basic markup for each image slide:

<figure>
  <a id="my-image" href="#my-image">
    <img loading="lazy" src="my-image.jpg">
  </a>
</figure>

By lining up a few of these in a scrolling container, a:before and :after can bleed into half of the adjacent items, acting as prev/next “buttons”. The scroll-behavior property can also be used for slide transitions on tap/click.

Swiping on touchscreens, scrolling, and the ← → keys naturally work, and with the items being links, you can Tab your way through, or link to a specific #image within a slideshow.

To-do

  1. For both good and bad reasons, but mostly for sentimental ones. ↩

Let’s Share What We Know

At the occasion of the 30th birthday of the World Wide Web, and after adding the original to Fonts In Use for posterity, I took the liberty of refreshing the original WWW logotype designed by Robert Cailliau in the early 90s.

World Wide Web logotype, refreshed
High-resolution PNG image, also available as SVG.

I suspect that the approximative kerning in the Postscript file was due to some bad file conversion, so I fixed it a little. Also, I got rid of the black outlines, as they tend to look bad in smaller sizes.1

  1. Next step would be to make a responsive SVG version of it, maybe when CSS Container Queries become a thing. ↩

Pocket web books

Alice’s Adventures in Wonderland, displayed at different screen sizes and orientations: portrait, landscape, narrow (mobile)

Yet another crude1 attempt at self-contained2 web books, that should look alright on most devices with a modern browser; ready to be read, downloaded, or added to your home screen.

Alice’s Adventures in Wonderland by Lewis Carroll

In Praise of Idleness by Bertrand Russell

To flip the pages, swipe, click, or use the ← → keys. Press F for full screen, I to invert the colors.

  1. I wanted to use CSS columns with snap-scroll for pagination, but generated columns aren’t real DOM elements you can snap to, so turning pages is done poorly in Javascript (resizing the viewport takes you back to the first page). ↩

  2. One HTML file, with fonts and images inlined as Base64 strings. ↩

Portable HTML, an idea

Anchor #links are a good and proper mechanism for navigating a single document, and using :target to show and hide content allows for a normal hyperlink behaviour within pseudo-pages, without reinventing any wheel. The desired outcome is a simple, resilient, portable document.

Obviously, this idea would be unfit for anything more complex than a simple blog, photo gallery, or website.

Basic setup

Each “page” is a <section> with a unique id

<section id="contact">
  <p>Contact me!</p>
</section>

They are hidden by default, until they get #linked to:

section {
  display: none;
}
section:target {
  display: revert;
}

This is a simplification: in order to inclusively hide the content, less obtrusive CSS properties can/should be used.

Pros

Cons

Ideas

To-do (portable-php)

Riding the bike lane

“If you’re only going to the corner store, ride a bicycle.”
— Maciej Cegłowski, The Website Obesity Crisis

The barebones1 PHP script generating this website is a no-fuss tool for anyone willing to publish a diary, a collection of recipes, some documentation… as a single web document.

Because of its humble purpose, it uses simple means: PHP is still around and usually needs no configuration, while “Save As…” is the most obvious way to export a single HTML file without using a terminal.

It should also be trivial2 to use more capable tools and languages to produce a similar portable document.

  1. Disclaimer: I have no experience writing PHP. This script is composed of ten years old php.net comments, Stack Overflow snippets, and long forgotten Gists. It kind of works (?) but it probably should not be hosted on a public web server. ↩

  2. “simply npm your webpack via grunt with vue babel or bower to react asdfjkl;lkd hgxdlciuhw” — Frank Chimero, Everything Easy is Hard Again ↩

This blog is a single HTML file

Computer screenshot of a single HTML file icon in a folder

It simply uses URL #fragments and the :target CSS selector to show and hide “pages”. The result is a self-contained website, digital book, interactive document, or whatever you want to call it. More information.

Get portable-php to generate the HTML from Markdown files.

Requirements:

How to use:

  1. Write posts in /content
  2. Open http://example.com/portable.php in your browser
  3. Save as index.html

Or from the command-line:

php portable.php > index.html