From Jinja To MiniJinja To NeoJinja With Pre-Attentive Processing


Neopoligen combines your content with templates to make websites. The templates are called "NeoJinja" files. They look like this one which shows every title for a set of blog links:

The Origin Format

NeoJinja is based off (and powered by) template processing software called MiniJinja^mjinja^^ which is, in turn, based off another one called Jinja^jinja^^. The Jinja software is used with the Python^python^^ programming language. MiniJinja mimics its behavior, but in the Rust^rust^^ language. Neopoligen is written mainly in Rust and I would have used MiniJinja directly except for one thing, it was hard for me to read the templates.

Here's the same NeoJinja template followed by the MiniJinja version. Both do exactly the same thing. The only difference is the characters used to mark the start and end points of the template instruction and output snippets.

The Differences

So, `{%- ... -%}`` becomes `[!- ... -!]``

And, `{{- ... -}}`` becomes `[@- ... -@]``

Not shown in the example are comments which go from `{#- ... -#}`` to `[#- ... -#]``

There are two reasons I like this. First and foremost I find it a lot easier to scan for the sharp corners of the `[]`` brackets compared to `{}``. My guess is this is a pre-attentive processing thing^pap^^. I first learned about that idea from Stephen Few's book Information Dashboard Design^idd^^. Basically, our brains process some visual information before we're consciously aware of it.

Here's an example straight from the book to demonstrate. Start by counting the number of times 5 appears in this block as quick as you can:


There are four of them, but finding them all isn't what's interesting here. Let's do the same thing but with the aid of some pre-attentive processing. Click the Toggle Example button and see how long it takes you to count the number of times 7 appears.

To quote the book:

Much easier this time, wasn't it? The sevens could easily be distinguished from the other numbers due to their differing color intensity...

Why couldn't we easily distinguish the fives in the first set of numbers based purely on their unique shape? Because the complex shapes of the numbers are not attributes that we perceive pre-attentively. Simple shapes such as circles and squares are pre-attentively perceived, but the shapes of numbers are too elaborate.

I expect the effect is different for everyone, but switching to the shaper corner `[]`` brackets feels like it's catching some of that pre-attentive processing for me. It doesn't make a big difference in smaller examples like the ones that opened this post, but the more there is the nicer it feels.

It would be even better is to add some more/stronger pre-attentive power. For example, using syntax highlighting^sh^^ highlight different parts with color. That's not done yet, but it's on the roadmap.