JS or no JS, that's a problem - towards a ZERO JS blog

[This post is to be updated]

I’ve commissioned myself to build this blog completely without javascript: that’s simple. But how can I add “modern” features without adding “modern” javascript?

> CMS
I prefer managing my posts with plaintext/flatfiles. I don’t want any database in my CMS and I don’t need to edit the posts. I used hexo before but it requires that you have Node.js installed to render the site. I abandoned it because I dislike node’s way of package management1. I switched to hugo, a single binary that works.

> Responsive
Can you write a responsive frontend without JS? YES YOU CAN! For example I have some CSS like this for mobiles.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@media screen and (max-width: 600px) {
    body{
        font-size: 10pt !important;
    }
    td.li-meta  {
        display:none;
    }

    table.tidy tr td{
        /* border: 1px solid red; */
        min-width:0 !important;
        padding:0.5ch;
        border-bottom: 2px dotted #002255;
    }
}

> Not too boring
While I’m a huge fan of the motherfucking website , I still want to make my site “cooler”. You may argue that vanilla plaintext is the true cool, which I much agree… but anyways I think I’ve done a pretty good job ricing the site without losing the plaintext nature, including

  • Logo and navigation panel
  • Pretty cool listing of posts
  • A colorscheme that works for color-blind people(me)
  • Markdown and Code rendering, thanks to Hugo.

> Richer than rich text
I’m talking about math symbols and equations in particular. The easiest way is to include katex. This post shows how to include and configure katex in Hugo blog.

However as you can see this setup breaks our no-js promise. There is an open [issue] (https://github.com/gohugoio/hugo/issues/10044) requesting server side math rendering feature. Also this thread has some good insights, I may take a look in the future.

Also regarding richer text, hugo has support for GoAT:

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

> While looking good in the terminal
This one is a bit tricky because it means you can’t abuse <div> in your site. In my experience w3m simply puts every new <div> into a new line, which means you can’t make them positioned side-by-side…. or the epic question:“how to center a div?”… No you don’t.

So to make a good layout the good old <table> is required..

> And interactive features? (I mean comments).
In the previous post I have a sketch of a duct-tapped “static” comment system.

I learned that hugo could “get and cache remote resource” in the compiling pipeline. This offers a new option to integrate the comments.

https://gohugo.io/hugo-pipes/introduction/#find-resources-in-assets

> Thoughts and reasonale
without javascript your hands are tied but things are still possible. The question is: is it worthy?


  1. seriously, why are you ok with installing 1k node packages only to do the simplest things? I’m not! ↩︎



[+] click to leave a comment [+]
the comment system on this blog works via email. The button
below will generate a mailto: link based on this page's url 
and invoke your email client - please edit the comment there!

[optional] even better, encrypt the email with my public key

- don't modify the subject field
- specify a nickname, otherwise your comment will be shown as   
  anonymous
- your email address will not be disclosed
- you agree that the comment is to be made public.
- to take down a comment, send the request via email.

>> SEND COMMENT <<




Fun with Image Maps and SVGs via benji February 20, 2024

Over the past few weeks I've been playing around with making some images on my website interactive. My "informatics" class in high school taught us some basic HTML. By basic I mean in notepad and writing everything by hand, saving to a...

Goblin Week 2024 via Helvetica Blanc January 26, 2024

It snuck up on me, but I managed to draw my little goblins to celebrate the week! I love my children - they're like awful Pikmin. I've uploaded the whole parade as a print, as well as individual prints for each goblin. There's something very fu…

How to trust gpg keys via Travis Shears Personal Site October 27, 2023

After moving some GPG keys to a new computer I kept getting these trust warnings. It is NOT certain that the key belongs to the person named in the user ID.If you * really * know what you are doing, you may answer the next question with yes. Use this key a…

Generated by openring from webring