talkgroup

Web design patterns for logs

I’ve started up my public commons archive, currently accessible from https://maiki.interi.org. I have dropped the first log (Logs), as I had left a blog post in v1 #foodstuffs, and that is now processed and archived at Getting back into noodles.

Whoo, still with me?

That log looks beautiful, source-code or rendered:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Getting back into noodles</title>
        <link href="https://maiki.interi.org/css/style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <main>
<header>
    <h1>Getting back into noodles</h1>
</header>
<p>Our new place has a nice big kitchen, with plenty of counter space. I am surprised by how much of a difference that makes for me. That cottage had about a square foot, or we had to use the table, which isn’t fun.</p>
<p>We live down the street from the Oaktown Spice Shop, and Susan found they have Japanese curry powder. I am working through the boxes I’ve stockpiled so I can switch up to fresher, less processed ingredients (in this case, sans the gummy stuff they use to make the curry into bricks, and of course the MSG).</p>
<p>Today I made an off but quick curry udon, using a brand of “quick” noodles I hadn’t before. Normally I cook udon in its own water, but this cooked in the broth, which was just curry brick, water and broccoli (my dashi powder had expired, and I am suspect of using it past that date). I am not sure if each step of my concoction made it weird, but it isn’t my best bowl. On the other hand, it is still curry udon.</p>


        </main>
    </body>
</html>
main {
    max-width: 70ch;
    margin: 0 auto;
    padding: 0 2vmin;
    font-family: sans-serif;
    font-size: 1.5rem;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
}

However, the log still lacks vital information for my purposes, and that is what this topic will cover: what information should be included in a “log”, and how to share it on the web.

I’ve been meaning to do this for years, really look at every aspect of building a webpage template, and I believe it will serve as an interesting entry point to building knowledge repositories shared over the web. :slight_smile:

1 Like

For logs you need time. Er, a reference to time. So you know when the log happened, presumably so others limited to a temporal framework may make sense of it. Then again, maybe that isn’t your goal…

I’ve added a bit to get started, and will try out different things moving forward.

The Hugo template code to produce the new line is:

<p><small>Published on <time>{{ .PublishDate.Format "2006-01-02" }}</time>.</small></p>

And produces:

<p><small>Published on <time>2013-10-06</time>.</small></p>

There are many options, of course. I could produce an output such as:

<p><small>Published on <time datetime="2013-10-06">October 6, 2013</time>.</small></p>

But I chose a specific format for a couple of personal reasons (their my logs, so I’m fine with this decision):

  1. I prefer the ISO 8601 Date format
  2. I adore using time without an attribute and it still working for machines :slight_smile:

The reason I prefer that date format is because I use the internet to communicate with people all over Earth, and ISO 8601 greatly assists me in my tasks.

I’m still thinking about how to contain the metadata for a log. Currently it’s just a paragraph with an inside small element, which is fine for a simple template but I want something… different.

:thinking:

References: