11

A new way of blogging about PHP with #klipsePlugin by @viebel

 4 years ago
source link: https://blog.klipse.tech/php/2016/06/26/blog-php.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.
neoserver,ios ssh client

A new way of blogging about PHP with #klipsePlugin by @viebel

Jun 26, 2016 • Yehonathan Sharvit

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

Look at a typical blog post about PHP: The post 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

Alan Kay’s vision

For Alan Kay, evaluation and interactivity should be available everywhere in the web:

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

The klipse plugin

The klipse plugin is a small step toward Alan Kay’s vision: it is a javascript tag that transforms static PHP code snippets of an html page to 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 on gihtub: it is written in clojurescript, uses CodeMirror for text editing, and Uniter for PHP evaluation inside the browser.

No server side is involved at all!

Klipsify a PHP code snippet

Let’s have on this page a static PHP code snippet with print "Hello". " World!";:

<?php
print "Hello". "". "World!";
//Hello World!
?>

(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:

print "Hello". " World!";

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-klipse-eval-php class (configurable) to the appropriate html element.

(Also, for convenience, we have removed the need for <?php.)

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-eval-php">print "Hello". " World!";
</code></pre>

Live demo

Before dealing about integration of the klipse plugin on a web page, let’s enjoy another PHP klipse snippet for string interpolation:

$snippet="klipse";
print "Hello $snippet";

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

Evaluating a gist

We can also evaluate code from a gist.

For instance, let’s klipsify this gist that demonstrates basic class usage in PHP:

Again, enjoy the interactivity and modify the code…

Klipse plugin 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, at the end of the body:

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

<script>
    window.klipse_settings = {
        selector_eval_php: '.language-klipse-eval-php', // css selector for the html elements you want to klipsify
    };
</script>
<script src="https://asmblah.github.io/uniter/dist/uniter.js"></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.

More detailed instructions on github klipse repository.

Limitations

PHP code evaluation in the browser with Uniter is in alpha stage, and currently only supports a small subset of PHP’s features. Here is the list of the supported features of PHP.

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:

If you enjoy this kind of interactive articles would you consider a (small) donation💸 on Patreon or at least giving a star⭐ for the Klispe repo on Github?

Follow viebel to stay up-to-date with the coolest interactive articles around the world.

Discover more cool interactive articles about javascript, clojure[script], python, ruby, scheme, c++ and even brainfuck!

Give Klipse a Github star to express how much you appreciate Code Interactivity.

Subscribe to the Klipse newsletter:

Feel free to email me [email protected] for getting practical tips and tricks in writing your first interactive blog post.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK