himl
v0.0.102
Published
The shortest way to write html
Downloads
4
Readme
Yes, sure, we have Jade and HAML, but if course that was the first thing I did - started using them, to gain some experience. But still many things seemed impractical. So here was my thinking process.
Shortest
Let us take a simple example:
html:
<a href="hi.com" target="_blank">Come here!</a>
haml:
%a{:href=>"hi.com", :target=>"_blank"} Come here!
jade:
a(href='hi.com' target='_blank') Come here!
Well, HAML version is even longer than HTML! Jade is better, it's 1 character shorter. Now let's see how it looks in a HiML language:
^a href=hi.com target=_blank{Come here!}
As you can see, it's 2 characters shorter than Jade, even in this example. The more attributes you have, the more space you save.
By the way, in the example above, in href=hi.com
I omitted "
s not because I am a sloppy and lazy developer, but because by the rules of HiML "
symbol is not only not required here, but is not qualified as a deliimter whatsoever! So, if you write
^a href="hi.com" target="_blank"{ Come here! }
it will literally be quoted after compilation:
<a href=""hi.com"" target=""_blank"">Come here!</a>
Why is it done this way?
To minimize the number of escaped characters and to free "
for you to use anywhere you want, for example:
^strong class=here is my "code" i add id=message{ hello }
Is the same as
<strong class="here is my "code" i add" id="message"> hello </strong>
You noticed that I used many spaces in the class attribute? Yes, the HiML parser allows you to do that, it will look for the next "name=???
" and will put everything before it to the previous attribute, so here the next found name=???
is id=message
, so the entire string here is my "code" i add
went straignt into class
attribute. This little trick allows us to make it visually clean (less escaping) and a bit shorter (2 saving characters on each attribute)
Nested tags
The method of indentation in HAML looks nice, of course, but sometimes (actually, quite often) you have a few very short nested tags that you would like to write in one like. You have enough horizontal space on your screen, so why not? So, if you want to write this:
<strong a="b">I am strong! Not <weak>a weak one, but <b>bold inside</b></weak></strong>
in HAML, you get this:
%strong{:a => "b"}
I am strong! Not
%weak
a weak one, but
%b bold inside
Jade:
strong(a='b')
| I am strong! Not
weak
| a weak one, but
b bold inside
It's shorter horisontally, but consume 5x space on my precious horizontal screen space!
It also breaks the natural flow of the phrase, which is certainly unacceptable, especially if you have long lines of text with some tag formatting, like b
, i
etc.
I don't know about you, but in this particular care I would prefer HTML, despice if its verbose look.
Now, HiML does not depend on new lines and indentation, hence we could do the following:
^strong a=b{I am strong! Not ^weak{a weak one, but ^b{bold inside}}}
which is 20% shorter than HTML and does not create 4 more new lines!
Why ^
?
Well, because it:
- a rare symbol, so you won't have to escape it too often
- has no "pair", like <>, [], () or {}, which is the best candidate for us
Rules
Escape characters
To make it as familiar as possible, we use backslash \
as an escaping character - this will make sure that you see what is escaped at the first glance. However, we escape only a small list of characters:
\{
and\}
\=
\^
\\
- escapes itself in a traditional way
That's it! Yo can use any other character anywhere you want: in attributes values, in body text. If you need to put a piec of text unescaped somewhere, you can use a traditional <![CDATA[ anything here! ]]>
.