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

This page is part of the ruby collection.

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 the 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 multilingual “Try it!” button, which executed the displayed code written in 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. Have you ever tried 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, 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 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

$ yes | sudo apt install libruby ruby-full

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

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 in www/raw.htm using the key and values stored in the 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 in www/index.html using the keys and values stored in the 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

About the Author

I, Mike Slinn, have been working with Ruby for a long time now. Back in 2005, I was the product marketing manager at CodeGear (the company was formerly known as Borland) for their 3rd Rail IDE. 3rd Rail supported Ruby and Ruby on Rails at launch.

In 2006, I co-chaired the Silicon Valley Ruby Conference on behalf of the SD Forum in Silicon Valley. As you can see, I have the t-shirt. I was the sole chairman of the 2007 Silicon Valley Ruby Conference.

Several court cases have come my way over the years in my capacity as a software expert witness. The court cases featured questions about IP misappropriation for Ruby on Rails programs. You can read about my experience as a software expert if that interests you.

I currently enjoy writing Jekyll plugins in Ruby for this website and others, as well as Ruby utilities.

Share to Twitter, Hacker News, LinkedIn.