david wong

Hey ! I'm David, a security consultant at Cryptography Services, the crypto team of NCC Group . This is my blog about cryptography and security and other related topics that I find interesting.

Weblang 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.