Juan Benet / note / all

which data icon? top


Picking between data icons... which one do you like?

Flap Bright

Side Bright

Flap Dark

Side Dark

CASSERT from libutp top


CASSERT from libutp. Clever.

/* compile-time assert */
#ifndef CASSERT
#define CASSERT( exp, name ) typedef int is_not_##name [ (exp ) ? 1 : -1 ];

CASSERT(8 == sizeof(uint64), sizeof_uint64_is_8)
CASSERT(8 == sizeof(int64), sizeof_int64_is_8)

tikz2svg top


I wrote a TikZ to SVG converter. It uses pdflatex and pdf2svg. It unfortunately litters the pdflatex output (into /tmp/<sha1 of input>/). I leave it in case you need to debug. And because this was a quick hack. As such, the code is not very good. But it works well! If you have questions, post in the gist and send me an email (gist does not notify). Cheers!


# input files
> tikz2svg in.tikz > out.svg

# input stdin
> tikz2svg < in.tikz > out.svg

> cat in.tikz

  \fill[red!90!black]   ( 90:.6) circle (1);
  \fill[green!80!black] (210:.6) circle (1);
  \fill[blue!90!black] (330:.6) circle (1);

> cat out.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="93.472pt" height="86.205pt" viewBox="0 0 93.472 86.205" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(89.99939%,0%,0%);fill-opacity:1;" d="M 76.742188 30.347656 C 76.742188 14.691406 64.050781 2 48.394531 2 C 32.742188 2 20.050781 14.691406 20.050781 30.347656 C 20.050781 46.003906 32.742188 58.695312 48.394531 58.695312 C 64.050781 58.695312 76.742188 46.003906 76.742188 30.347656 Z "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,79.998779%,0%);fill-opacity:1;" d="M 62.011719 55.859375 C 62.011719 40.203125 49.324219 27.511719 33.667969 27.511719 C 18.011719 27.511719 5.320312 40.203125 5.320312 55.859375 C 5.320312 71.515625 18.011719 84.207031 33.667969 84.207031 C 49.324219 84.207031 62.011719 71.515625 62.011719 55.859375 Z "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,89.99939%);fill-opacity:1;" d="M 91.472656 55.859375 C 91.472656 40.203125 78.78125 27.511719 63.125 27.511719 C 47.46875 27.511719 34.777344 40.203125 34.777344 55.859375 C 34.777344 71.515625 47.46875 84.207031 63.125 84.207031 C 78.78125 84.207031 91.472656 71.515625 91.472656 55.859375 Z "/>

> echo out.svg


  • Install pdflatex (comes with your TeX distribution).
  • Install pdf2svg (brew install pdf2svg).
  • Install standalone style (with your TeX package manager).
  • Put the script below in your $PATH.
curl https://gist.github.com/jbenet/9449155/raw/tikz2svg > tikz2svg
chmod +x tikz2svg
sudo mv tikz2svg /usr/bin/tikz2svg

XML Stifles The Semantic Web top


I'm coming to think that Semantic Web adoption has been significantly stifled by XML being the main (transport) format. I mean, look at this

<?xml version="1.0" encoding="utf-8"?>
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  <rdf:Description rdf:about="http://www.w3.org/TR/rdf-syntax-grammar">
    <dc:title>RDF/XML Syntax Specification (Revised)</dc:title>

  <rdf:Description rdf:about="http://example.org/buecher/baum" xml:lang="de">
    <dc:title>Der Baum</dc:title>
    <dc:description>Das Buch ist außergewöhnlich</dc:description>

versus this

  "@context": {
    "dc": "http://purl.org/dc/elements/1.1/"
  "@graph": [
      "@id": "http://www.w3.org/TR/rdf-syntax-grammar",
      "dc:title": "RDF/XML Syntax Specification (Revised)"
      "@id": "http://example.org/buecher/baum",
      "@language": "de",
      "dc:description": "Das Buch ist au\u00dfergew\u00f6hnlich",
      "dc:title": "Der Baum"

One of these makes my eyes bleed, and parsers weep. Perhaps, now that json-ld exists and websites are using JSON ubiquitously, we can start linking data robustly. We shall see!


Version history.

I've always likes how github adds on-hover links to headers on their rendered markdown:


I couldn't find markdown renderers that included it. So, I wrote my post-processing js to make them. With any luck, this website should still show it in action. Below's the code.

Here's the js (assumes $ and _ are defined):

$(document).ready(function() {

  // Modify this template to add or change links.
  var links = _.template('\
    <div class="header-links">\
      <a href="#<%= id %>"><i class="icon icon-link"></i></a>\

  // If your headers dont already have ids, use this slug fn
  var slugize = function(title) {
    return title.toLowerCase()
      .replace(/[^\w ()]+/g,'')
      .replace(/ +/g,'-');

  // Modify the ':header' selector to apply to other elems
  $(':header').each(function(i, h) {

    // Add an id, if it doesn't have one.
    if (!$(h).attr('id')) {
      var id = $(h).text().replace(/[^A-Za-z0-9_]+/g, '-')
      id = id.replace(/^-+|-+$/g, '')
      $(h).attr('id', slugize($(h).text()));

    // Add the link div
      id: $(h).attr('id')

Here's the less (assumes FontAwesome icons css):

h1, h2, h3, h4, h5, h6 {
  &:hover .header-links a {
    text-decoration: none;
    opacity: 0.4;
    color: gray;

  .header-links {
    float: left;
    text-align: right;
    margin-left: -40px;
    padding-right: 10px;
    width: 40px;

    a {
      text-decoration: none;
      opacity: 0.0; // show on hover
      color: gray;

    a:hover, a:active, a:focus {
      text-decoration: none;
      opacity: 0.6;
      color: #428bca;

And it looks like this:



I use a script to upload files to an S3 bucket and copy the link to the clipboard. Basically:

static <file> [<s3path>]


jbenet @ lorien : /tmp % static 24898.png nocturne.png
> cat 24898.png | pyhash sha1
> echo "http://jbenet.static.s3.amazonaws.com/d7b220c/nocturne.png" | pbcopy
> aws s3 cp --profile juanbenet "24898.png" "s3://jbenet.static/d7b220c/nocturne.png"
> afplay /System/Library/Sounds/Ping.aiff


How it works:

  1. hash (sha1) the file for the url
  2. http://<bucket>.s3.amazonaws.com/<sha1>/<s3path or basename(<file>)>
  3. copy the url to clipboard; done before upload, so you can paste right away
  4. upload the file to the s3 bucket
  5. play a sound to announce completion


# install pyhash
curl https://gist.github.com/jbenet/6502583/raw/pyhash.py -o pyhash
chmod +x pyhash
sudo mv pyhash /usr/bin/pyhash

# install static
curl https://gist.github.com/jbenet/4b2e282eba5a1bf291b7/raw/static > static
chmod +x static
sudo mv static /usr/bin/static

Design For Nocturne top


People ask me why my websites are "so light" (athena, acorn, juan.benet.ai, datadex.io) when my computer is usually dark, from a shell or text editor. Well...

First, white websites seem to work better in the mainstream (sorry, guys).

And second, I don't. I actually design my websites to be black for me. I use Nocturne, which inverts the colors + hues of my display.

So when you see:


I see:


This works out great: I get black "easy on the eyes" websites that the rest of the world will like.


Nocturne is great. Try it out. I recommend toggling it with a hotkey (or with Alfred/Spotlight: Alt+Space -> n -> enter). Though be warned: it's broken in Mavericks, and it makes pictures of people look absolutely terrifying.

Open in WriteRoom from Command Line top


I like using WriteRoom. I wanted $ wr <file> to open <file> in WriteRoom, and Enter Full Screen Single. So I wrote it. Just put the script below in your $PATH, say /usr/bin/wr:

curl https://gist.githubusercontent.com/jbenet/9271733/raw/wr > wr
chmod +x wr
sudo mv wr /usr/bin/wr

Mutable REPL top


Would be great to have a REPL with mutable definitions in another pane. The definitions pane lists all state, in the form:

<expr num>  <name> = <original evaled expression>

And it reassigns variables as the expressions are edited, on every keystroke (if it evaluates. if not, display eval error in a gutter below).

I hope LightTable already does this. And, I wish a REPL-UI lib existed to simplify this and other common aspects of writing REPLs. And repl <lang> should also exist.