Portable thoughts

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

RSS - Contact - Twitter

Pocket web books

Another limited attempt1 at DIY web books: these self-contained2 HTML files should look alright on most devices with a modern browser, ready to be read, downloaded, or added to you home screen:

Alice’s Adventures in Wonderland - Lewis Carroll

In Praise of Idleness - Bertrand Russell

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

  1. I originally wanted to combine CSS columns with snap-scroll for pagination, only to realize that generated columns aren't real elements you can snap to, so turning pages is made possible in a basic way in javascript. (The offset for the current page is not calculated yet, so resizing the viewport takes you back to the first page) ↩

  2. Fonts and images are 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 personal 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, unless 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)

PHP and “Save As…”

simply npm your webpack via grunt with vue babel or bower to react asdfjkl;lkd hgxdlciuhw

— Frank Chimero, Everything Easy is Hard Again

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

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

(This said, it should be trivial to instruct a more capable static site generator or CMS to produce a similar “portable HTML” website.)

  1. Disclaimer: I do not know how to write 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. ↩

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