A new way of blogging about Prolog
source link: https://blog.klipse.tech/prolog/2019/01/01/blog-prolog.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
This blog post is about to show a new way of blogging about Prolog).
Look at a typical blog post or tutorial about any programming language: it usually presents a couple of code snippets. As I see it, there are two pains with code snippets:
- they contain the input and the output but not the actual evaluation of the input
- it’s impossible for the reader to modify the input and see how it impacts 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.)
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:
- Live: The code is executed in your browser
- 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++, lua and prolog.
In this article, we are going to demonstrate interactive Prolog
code snippets where the evaluation of the code is done through the amazing tau-prolog, a Prolog interperter in Javascript.
Klipsify a Prolog code snippet
Let’s have on this page a small static set of rules:
woman(emily).
man(john).
And now, let’s query our knowledge base:
?- man(john).
The Prolog system will answer either “yes” or “true” depending on the implementation.
But all of this is static and the developers learn much better through interactivity.
So let’s klipsify the rules and the query:
woman(emily).
man(john).
man(john).
Have you noticed the small icon to the left of the code snippet to differentiate between rules and queries, instead of the usual ?-
to introduce a query?
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-prolog-rules
class (configurable) to the html element that contains the rules and the language-prolog-query
classes (configurable) to html element that contains the query.
See it by yourself, here is the html portion of this page that klipsifies the code snippets:
<p>So let’s <strong>klipsify</strong> the rules and the query:</p>
<pre><code class="language-prolog-rules">woman(emily).
man(john).
</code></pre>
<pre><code class="language-prolog-query">man(john).
</code></pre>
Live demo
Before dealing about integration of the klipse plugin on a web page, let’s enjoy another pair of klipsified Prolog rules and query, that involves fruits:
% load lists module, see tau-prolog documentation
:- use_module(library(lists)).
% fruit/1
fruit(apple). fruit(pear). fruit(banana).
% fruits_in/2
fruits_in(Xs, X) :- member(X, Xs), fruit(X).
Let’s ask Prolog to list all the fruits of a list:
fruits_in([carrot, apple, banana, broccoli, orange], X).
Go ahead! modify the code snippet above, and it will evaluate as you type…
Visualisation of the process
The great thing about tau-prolog
is that it runs in the browser. As a consequence, we can graphically visualize the steps of the process.
Let’s take for example the classic Knight’s tour problem, where we look for a sequence of moves of a knight on a chessboard such that the knight visits every square only once.
The tau-prolog
team wrote a short Prolog program to solve this problem:
:- use_module(library(dom)).
:- use_module(library(lists)).
:- use_module(library(system)).
% mov/2
mov( 1, 2). mov( 1,-2). mov(-1, 2). mov(-1,-2).
mov( 2, 1). mov( 2,-1). mov(-2, 1). mov(-2,-1).
% jump/2
jump((X0,Y0), (X1,Y1)) :-
mov(X,Y),
X1 is X0+X,
Y1 is Y0+Y,
X1 >= 1, X1 =< 8,
Y1 >= 1, Y1 =< 8.
% tour/2
tour(Init, Tour) :-
tour(Init, [], 1, Tour).
% tour/4
tour(Position, Visited, N, Tour) :-
fill_cell(Position, N),
jump(Position, Next),
% sleep(50),
M is N+1,
\+(member(Next, Visited)),
( tour(Next, [Position|Visited], M, Tour) ;
fill_cell(Next, ''), fail).
% fill_cell/2
fill_cell((Row, Col), Content) :-
remove_knight,
number_chars(Row, [AtomRow]),
number_chars(Col, [AtomCol]),
atom_concat(col, AtomRow, ColRow),
atom_concat(ColRow, AtomCol, Id),
get_by_id(Id, Cell),
html(Cell, Content),
add_class(Cell, knight).
% remove_knight/0
remove_knight :-
get_by_class(knight, Knight), !, remove_class(Knight, knight).
remove_knight.
And a short query to trigger the program, starting at he top left square, named (1,1)
:
tour((1,1), _).
The algorithm will run for quite a long time, but without freezing the browser .
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">
<link rel="stylesheet" type="text/css" href="http://app.klipse.tech/css/prolog.css">
<script>
window.klipse_settings = {
selector_prolog_rules: '.language-prolog-rules', // css selector for the prolog rules elements you want to klipsify
selector_prolog_query: '.language-prolog-query', // css selector for the prolog query 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…
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK