david wong

Hey! I'm David, a security engineer at the Blockchain team of Facebook, previously a security consultant for the Cryptography Services of NCC Group. I'm also the author of the Real World Cryptography book. This is my blog about cryptography and security and other related topics that I find interesting.

Weblang posted April 2014

I've been writing html, xhtml, and now html5 for ages. I think I started in 2001 (13 years ago).

I had to go through <br> becoming <br /> becoming <br> again.

I had to go through different doctypes

I had to go through new divs like <header> and <footer>

But I never had to go through a syntax change. Why is that? I don't understand why HTML is a language based on tags. It is unnecessary and it just adds time and confusion to typing in html. I haven't ran into any project directed at changing that syntax. And I thought, why not doing it myself? (and if there is already such a project please tell me!)

So I thought about a new language to write static web pages called web or weblang. No tags. Indentation. Simple doctype.

A simple index.web would looks like that:

\web:1 // this is a doctype

\head

$title: 'Weblang example';
$css: 'css/app.css';

\body

$header .monheader{
    $h1 "Weblang";
}

$section #introduction{
    $h2 "What is Weblang?";
    $p "Weblang is an elegant way of writing static webpages"
    "HTML is annoying to write." // there will be a breakline here
    $p{
        what about just writing text like this,
        it's kinda easier
    }
}

// what about just writing text
This is a text block, it will just render as text
in this text I want a list here : $ul{
    $li "with text in it";
}

$ul .links{
    $li{
        $a "more info" href: 'https://github.com/mimoo/weblang';
    }
    $li $a{
        tags can be chained
    }
}

$javascript 'js/jquery.js';
$script 'js/script.js' type: 'javascript';

This is just a first draft. The biggest problem is that plain text and code is mixed. The trick I used here is to use $ to tell the render engine that it is not plaintext. Might not be super clever. I need to brainstorm a bit more about this.

Also I need to look at sass' code to see how a compiler works. Seems to be a bunch of regex.

Well done! You've reached the end of my post. Now you can leave me a comment :)

Drew

You should check out jade http://jade-lang.com/ (especially if you're still looking at node.js). I've found it much more readable and powerful than html.

david

wow, pretty nice! I'm going to look into that.