Mike Slinn
Mike Slinn

Iterating Slim Language Templates

Published 2022-02-22. Last modified 2022-02-27.
Time to read: about 7 minutes.

This site is categorized under Ruby.

Slim is a cool way to generate a potentially complex HTML block with a minimum of characters. Most often, Slim is thought of as an alternative to Ruby on Rail’s ERB; however, it is useful in a broad range of contexts.

The Slim Language Explorer transforms the experience of learning the Slim Language from something painfully awkward, to something pleasant.

I Have a Thing About Explorers

Over the years, I’ve made about a dozen Explorers, starting with SMX Explorer in 1994 for The Internet Factory. They had the world’s first programmable web server. I wrote the technical manual for using the programming language of their server; this was the first online publication with interactive code examples.

IBM published an article about JSP Explorer in 2001. My Zamples startup in 2001 was all about the world’s first multi-lingual “Try it!” button, which executed the displayed code written one of many languages, some of which were pre-packaged with various popular libraries. Zamples was essentially a next-generation JSP Explorer.

If you are a web developer, then you have seen and probably used explorers before. Ever try Code Pen? I invented that technology.

Anyway, here it is, yet another explorer, this one packaged as a git project for Ubuntu – for the Slim Language! Squint and it looks like my last name.

The Slim Language Explorer

When you are trying to figure out how to express HTML in Slim, however, you inevitably rerun the generation process over and over. The Slim Language Explorer consists of a small Ruby program that launches Slim and displays the results of evaluating the Slim expression.

Live Reload

The output is regenerated whenever a file is modified, created or deleted within the watched directory of the project. This allows you to edit the Slim expression and/or modify the YAML data, and view the updated output each time a change is made.

Embed Ruby Code

The template below uses a Ruby filter, shown highlighted in yellow, where Ruby code can be inserted. Everything indented after Ruby: is parsed as Ruby code. Gems and other code can be required. Note that methods defined in a Ruby filter must be defined as class methods, which means that when defining them, their names must be prefixed with self. Any Modules that might be included would also need similar handling, or they would need to be included into a class.

template.slim
ruby:
  require 'slugify'

  def self.padding
    'padding: 0 5px 3px 5px'
  end

  def self.boxed(contents)
    "<div style='border: thin solid grey; #{padding};'>#{contents}</div>"
  end

doctype html
html
  head
    title = heading
  body
    h1 = heading
    p = message

    ul
      li: a href="mailto:#{email}" #{name}
      li style="margin-top: 3px; #{padding}; background-color: #{background_color}; color: #{color};"
        = 'Green and white slugs ... yuck!'.slugify

    ==boxed 'Help, I am stuck inside this computer!'

The above template contains references to local variables, defined in the Ruby filter, and variables passed to it which slim_explorer read from a YAML file.

YAML Data

Most templates require data to inflate them. Slim Language Explorer gets data from template.yaml, shown below. Go ahead and change it while experimenting.

template.slim
environment:
 - email: mslinn@mslinn.com
 - heading: Testing, 1-2-3, Testing ...
 - message: World peace begins with you and me.
 - name: Michael Slinn
 - color: white
 - background_color: green

The name of the top-most property (environment) does not matter.

Installation

Ruby Development Support

The official instructions for installing full Ruby are here, although the instructions are incomplete, terse and dated. Be sure to include the development tools. For Ubuntu, this is what I recommend:

Shell
$ sudo apt install libruby ruby-dev

Clone slim_explorer

Clone the slim_explorer git repo.

Shell
$ git clone https://github.com/mslinn/slim_explorer.git

Move to the newly cloned directory:

Shell
$ cd slim_explorer

Install Project Gems

Shell
$ bundle install

Slim Language REPL

In some sense, this is a REPL for the Slim Language.

Command-Line Mode

The video above demonstrates command-line mode running in Visual Studio Code.

  1. To use the Slim Language Explorer, start a bash shell and type:
    Shell
    $ ./slim_explorer
    The Slim expression(s) stored in watched/template.slim are evaluated and stored into www/raw.htm using the key and values stored in file watched/scope.yaml.
  2. Use the editor of your choice to modify any file in the watched/ directory.
  3. The contents of watched/template.slim are re-evaluated, and www/raw.html is updated after each change is saved. This process continues until interrupted.

Web Server Mode

  1. Start a bash shell and type:
    Shell
    $ ./slim_explorer serve
    The Slim expression(s) stored in watched/template.slim are evaluated and stored into www/index.html using the keys and values stored in file watched/scope.yaml.
  2. Open www/index.html in your favorite web browser, either from the file, or at http://localhost:3030/index.html. This is what it looks like:
  3. Use the editor of your choice to modify any file in the watched directory.
  4. The contents of watched/template.slim are re-evaluated and www/index.html is updated each time a file in the watched directory is saved, created or deleted.

About the Video

You can see the generated HTML change as the Slim expression or the YAML data is modified.

To make the video, I installed the Visual Studio Code HTML Preview extension by Thomas Haakon Townsend, which had 1,649,338 installations. While this is a generally useful extension, it enables the instantaneous display of the generated HTML in a render pane. The extension can be installed via the command line if you like:

Shell
$ code --install-extension tht13.html-preview-vscode@0.2.5