Portable thoughts

An example of a single-file blog, by Gregory Cadars.

RSS - Contact - Twitter

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 if CSS Container Queries or similar become a thing

Pocket web books

Alice’s Adventures in Wonderland, displayed on a tablet in portrait, landscape, and on a mobile phone

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

Swipe, click, or use keys. f for full screen, i to invert colors.


  1. I wanted to use CSS columns with snap-scroll for pagination, but generated columns aren't real elements you can snap to, so turning pages is done in a really basic way 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 are needed. This page uses height:0 and overflow:hidden.

Pros

Cons

Ideas


To-do (portable-php)

Riding the bike line

“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 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