Ah, it’s nice to be free from exams and assignments. Grading is over!

A lot of small but indispensable tools belong in the software developer’s toolkit. Take Markdown, for example. I am actually writing this post using WordPress Jetpack’s new Markdown composition features. So far, so good! I use Markdown extensively for creating documents. There is only a little bit to learn, but you can create nice documents very quickly. I use Typora for MD docs on my Mac, and I highly recommend it.

Mustache is a template system embedded in several front-end web frameworks. It is very simple to use, and the whole thing can be described in one unix-style man page.

I find it is most instructive to play with frameworks interactively using playgrounds or other REPL environments, so one npm install -g mustache later I am on the way to learning it.

Mustache works by embedding tags into any type of text data, such as plain text, HTML, or Markdown. Tags are encapsulated using mustache symbols (the curly brace) like this : {{tag}}. Take this example :

I have taught the following courses. My students tell me they are {{bad_adjective}}, but {{good_adjective}}!

{{#courses}}
{{name}} : {{description}}
{{/courses}}

These tags will be replaced by variable values found in another file to follow. Some variables mark sections that can be repeated or left out all together based on their values. There values are found in a separate file.

In Mustache lingo, the above data comprises a template file. It will be formatted using variables contained in the following JSON file, called a view or hash :

{
    "good_adjective" : "fun",
    "bad_adjective" : "challenging",
    "courses" : [
        { "name" : "CPSC 110",
        "description" : "Introduction to Computing"},
        { "name" : "CPSC 125",
        "description" : "Foundations of Computer Science"},
        { "name" : "CPSC 150",
        "description" : "Computers and Programming I" },
        { "name" : "CPSC 250",
        "description" : "Computers and Programming II" },
        { "name" : "CPSC 270",
        "description" : "Data and File Structures"},
        { "name" : "CPSC 425",
        "description" : "Object Oriented Programming and Design"},
        { "name" : "CPEN 414",
        "description" : "Computer Architecture"},
        { "name" : "ENGR 213",
        "description" : "Discrete Structures for Computer Applications"}
    ]
}

The result is the following

I have taught the following courses. My students tell me they are challenging, but fun!

CPSC 110 : Introduction to Computing
CPSC 125 : Foundations of Computer Science
CPSC 150 : Computers and Programming I
CPSC 250 : Computers and Programming II
CPSC 270 : Data and File Structures
CPSC 425 : Object Oriented Programming and Design
CPEN 414 : Computer Architecture
ENGR 213 : Discrete Structures for Computer Applications

You can see how this might be more useful if the JSON object was produced by loops in JavaScript and the template data was marked-up HTML instead of simple plain text. But that’s the general idea.