This blog post is about to show a new way of blogging about Lua.

Look at a typical blog post or tutorial about any programming language: The article usually presents a couple of code snippets. As I see it, there are two pains with code snippets:

  1. they contain the input and the output but not the actual evaluation of the input
  2. it’s impossible for the reader to modify the output

The forgotten dream

A long time ago, all the developers had a common dream. The dream was about interactivity, liveness, evaluation…

But we put this dream aside - because the browser understands only javascript.

And after a while, we even forgot that we ever had this dream.

Still, there are some people that didn’t forget this dream, like Alan Kay:

Question: Well, look at Wikipedia — it’s a tremendous collaboration.

Alan Kay: It is, but go to the article on Logo, can you write and execute Logo programs? Are there examples? No. The Wikipedia people didn’t even imagine that, in spite of the fact that they’re on a computer.

Here is the full interview of Alan Kay. (Thanks @fasihsignal for bringing this quote to our awareness.)

dream

WebAssembly

With the emergence of the WebAssembly, it is possible to run C/C++ code in the browser - by compiling the code into wasm format. This is how wasm_lua works.

For the moment, WebAssembly is supported only on Firefox version 52 and Chrome version 57 but it should be available on other browsers soon.

If you want to enjoy this article, please open it on Firefox 52 or Chrome 57.

The klipse plugin

The klipse plugin is a small step toward this dream: it is a javascript tag that transforms static code snippets of an html page into live and interactive snippets:

  1. Live: The code is executed in your browser
  2. Interactive: You can modify the code and it is evaluated as you type

Klipse is written in clojurescript,

The following languages are supported by Klipse - in any modern browser (including mobile): clojure, ruby, javascript, python, scheme, es2017, jsx, brainfuck, c++ and Lua.

In this article, we are going to demonstrate interactive Lua code snippets evaluated by wasm_lua.

Klipsify a Lua code snippet

Let’s have on this page a small static code snippet:

array = { "a", "b", "c", "d" }   -- Indices are assigned automatically.
print(array[2])                  -- Prints "b". Automatic indexing in Lua starts at 1.

(This blog is written with jekyll: the kramdown plugin helps a lot in beautifying the code snippets.)

And now, we are going to klipsify this code snippet:

array = { "a", "b", "c", "d" }   -- Indices are assigned automatically.
print(array[2])                  -- Prints "b". Automatic indexing in Lua starts at 1.

Feel free to edit the code above: it’s interactive => it evaluates as you type.

All I had to do in order to klipsify my code snippet, was to set the language-eval-lua class (configurable) to the appropriate html element.

See it by yourself: here is the source of this page:

<p>And now, we are going to <strong>klipsify</strong> this code snippet:</p>

<pre><code class="language-klipse-lua">
array = { "a", "b", "c", "d" }   -- Indices are assigned automatically.
print(array[2])                  -- Prints "b". Automatic indexing in Lua starts at 1.
</code></pre>

Live demo

Before dealing about integration of the klipse plugin on a web page, let’s enjoy another klipse snippet for an Hello World in Lua:

function hello(s)
  print("Hello " .. s)
end

print("Hello " .. "World!")

Go ahead! modify the code snippet above, and it will evaluate as you type…

Evaluating a gist

We can also evaluate code from a gist.

For instance, we could evaluate this gist that defines the factorial function and calls it with 5:

Again, feel free to modify the code…

Integration

All you need to do in order to integrate the klipse plugin to your blog (or any other web page), is to add this javascript tag to your web page:

<link rel="stylesheet" type="text/css" href="http://app.klipse.tech/css/codemirror.css">

<script>
    window.klipse_settings = {
        selector_lua: '.language-klipse-lua', // css selector for the html elements you want to klipsify
    };
</script>
<script src="http://app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>

By the way, this is exactly what we did on the page that you are currently reading.

Other languages

The Klipse plugin is designed as a platform that could support any language that has a client-side evaluator, by writing modules to the Klipse plugin. Currently, there are modules available for the following languages:

Conclusion

Go ahead!

Write your own blog post with interactive snippets in your preferred language.

It’s super simple to integrate the Klipse plugin on a blog bost: check the instructions on Klipse github repository.

You can get inspired by the work of the Klipse community…