npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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="&quot;hi.com&quot;" target="&quot;_blank&quot;">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 &quot;code&quot; 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! ]]>.