Sed Seyedi

↳ On programming, startups and more.
blog projects about contact

Introducing Shortform HTML Tags

Discuss this on Hacker News.


Update: I have decided to rename this project from SunDown to Shortform HTML Tags, because it better describes the project, and more importantly many people including the author of Sundown (one of the most popular Markdown engines) asked me to not use this name to avoid confusion between projects.

My goal with SunSed is to create a platform that makes it super easy for developers to create awesome websites without forcing them to learn new stuff (language, syntax, platform, framework and more). To achieve that I had to re-invent couple of wheels along the way. One of those wheels is Markdown.

You see, SunSed platfrom has its own programming language and its syntax is exactly like HTML (except you have tags like if and set and more that makes it a programming language). At first, I used Markdown as a preprocessor for SunSed language to make it easier for users to write commonly used tags like H1, P, IMG and more.

In this article I explain what was wrong with Markdown and why I finally had to create my own Markdown alternative.

Problem[0] = "Too many implementations of Markdown"

Markdown is not standardized, there are too many variations. And I feel like Jeff Atwood and his friends abandoned the Commonmark project that tried to create a universal specification of Markdown. Even if they did, I don't think that Github, Stackoverflow, Reddit and other major Markdown users would ever convert.

Problem[1] = "Markdown is limited to a few HTML tags"

Markdown is limited to a few HTML tags! You cannot extend it to support new tags without adding more rules to its syntax and making it even more difficult to learn.

At SunSed, users can create their own HTML tags and it made a lot of sense to be able to abstrarct those tags just like HTML. After all, HTML is not very fun to write (it's easy but not fun).

Problem[2] = "Cannot safely mix Markdown with HTML"

What do you think about the following code? Do you think that the nested Markdown works?

<div>
    # Header 1
    <p>This is **bold**</p>
</div>

The answer depends on the Markdown flavor and even if it supports it, you cannot always be sure that it works! Sometimes there are things that can be nested but also situations where it's next to impossible for the compiler to detect edge cases that's why in CommonMark they decided to completely remove this feature.

The most problematic syntax rule of Markdown that dose not allow you to easily mix it with HTML is that newlines create new paragraphs.

Remember, at SunSed I wanted users to be able to nest HTML, SunSed and Markdown in anyway they like.

Problem[3] = "Markdown is slow!"

I could not believe it. A language with such a simple syntax was as slow as hell. Specially if you wanted the feature that allows you to mix HTML and Markdown. I'm talking about compiling 1,000 pages in less than 1 second fast.

I even tried the fastest implementation of Markdown and it was still slower than SunSed language compiler and used more CPU and RAM than I liked.

Solution[0] = "A good name"

First, I came up with "SML" (SunSed Markup Language) but eventually decided to go with "Sundown" (SunSed Markdown) because it's a cooler name that almost describes itself.

Update: But, after the feedback I got from HN discussions I decided to name this project: "Shortform HTML Tags".

Solution[1] = "Shortform Tags should scale"

Unlike Markdown, I wanted the Shortform Tags to support all HTML tags (SunSed tags + Users custom HTML tags + HTML's built-in tags).

Solution[2] = "Easy to learn"

It must have very simple syntax (with just a few rules). My goal here was to be able to teach someone the entire syntax in one paragraph.

Solution[3] = "It must be fast"

I believe that faster programs almost always have less code! How about a syntax that could be parsed with just a few Regular Expression search and replace? That would be awesome -- no more complicated compiler.

Solution[4] = "You should be able to mix HTML tags and the Shortform Tags"

Users should be able to nest HTML tags inside the Shortforms (and vice versa).

Result = "Shortform HTML Tags v1"

I'm actually writing using Shortform Tags right now. I have been testing it for while and think that it's super awesome!

Here is a picture of SunSed IDE right now:

SunSed IDE writing in Shortform HTML Tags

Syntax

foo and bar could be any HTML or SunSed tag:

HTML

<foo>
    Content <bar>inline<bar>.
</foo>

Shortfrom Tags

:foo Content :bar[inline].

That's it, now you know the entire Shortfrom Tags syntax.

Examples

Any line that starts with a : is special.

Header 1

:h1 This is also header 1

Paragraph

:p This is also a paragraph.
: You can skip the P and still create a new paragraph.

Embedding YouTube video

Here we are using a SunSed s:youtube tag.

:s:youtube https://www.youtube.com/watch?v=dGSOaCY6D6s

You can easily create your own tags using SunSed language!

My goal is to create thousadns of useful tags that abstract HTML+CSS+JavaScript and make front-end developers life easier.

Try it for yourself

You can try SunSed for free! I would love to know what you think!