How to draw on a canvas with Klipse and core.async

The cool thing with KLIPSE is that it is 100% client-side. It means that you can interact freely with the page where the klipse snippets are hosted. As an example, you can draw on a canvas. All you need to do is to add in your html a <canvas&…

om.next: how to disable logging

Om.Next is a uniform yet extensible approach to building networked interactive applications. (Check this interactive tutorial to learn more about om.next.) (ns om-tutorial.part (:require goog.debug.formatter goog.debug.RelativeTimeProvider [goog.dom :as gdom] [om.next :as om :refer-macros [defui]] [om.dom :as dom])) By default, om.…

clojurescript canvas with monet

monet is a small ClojureScript library to make it easier (and performant) to work with canvas and visuals. (require '[monet.canvas :as canvas]) The usual workflow is calling init and getting the monet-canvas that returns, and then start adding entities with add-entity. An entity can be created with the…

A new way of blogging about HTML and CSS

Imagine you want to write a blog post that shows something really cool about html and css. How would you do that? You will probably embed a jsfiddle, jsbin or codepen in your page. The problem is that for each snippet you have to create a page on their server…

om.next interactive tutorial

Prelude This article is an interactive version of the official om.next Quick Start. The interactive code snippets are powered by the klipse plugin: while you read the article, you can edit the code and it will be evaluated after 1 second of inactivity. I'd like to congratulate 3 amazing…

Procedural Texture Generator in javascript

The code snippets are powered by the Klipse plugin. First, let's load texgen.js - a Procedural Texture Generator javascript library - from github: Object.keys(TG).length; function render(texture) { container.innerHTML = ""; container.appendChild(texture.toCanvas()); } Now, let's create a nice texture: var texture = new TG.Texture( 256, 256…

Symbolic Computation in Javascript with Math.js

Math.js is an extensive math library for JavaScript and Node.js. Math.js comes with a function math.eval to evaluate expressions. In this blog post, we are going to see the Math.js evaluator in action with interactive code snippets powered by the KLIPSE plugin. Object.keys(math)…

Hall of Fame of web pages with interactive code

img { width: 250px; } .img-profile { float: left; width: 15%; position: static !important; left: 0px !important; transform: translateX(0) !important; -webkit-transform: translateX(0) !important; margin-right: 30px; } Here are the best articles and tutorials around the web that feature code interactivity. In this articles, made by very talented authors, you - the reader…

Generative testing in clojure - Interactive tutorial

The idea test.check is a Clojure property-based testing tool inspired by QuickCheck from Haskell. The core idea of test.check is that instead of enumerating expected input and output for unit tests, you write properties about your function that should hold true for all inputs. This lets you write…

The most elegant implementation of FizzBuzz

What is FizzBuzz? The FizzBuzz test is an interview question designed to help filter out the 99.5% of programming job candidates who can't seem to program their way out of a wet paper bag. The text of the programming assignment is as follows: Write a program that prints the…