Macdom HTML Preprocessor

5 min February 01, 2018

Writing HTML code can be sometime very annoying. Open tags, closing tags, quotation marks, bracket here, bracket there, this tag is paired and this one is not. You forgot write parenthesis and you are f****d. These are the things I don't like about the HTML and because I am lazy I have decided to create the Macdom HTML preprocessor for simplifying my work and daily routine.

So, HTML code can looks like this...


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta content="width=device-width" name="viewport">
      <link rel="shortcut icon" href="includes/favicon.ico">
      <title>Macdom example</title>
   </head>
   <body>
      <h1 id="title" class="titles main-title">Hello world</h1>
      <nav>
         <a target="blank" href="http://www.google.com" class="first-link">Link on - Google</a>
         <a target="blank" href="http://www.yahoo.com">Link on - Yahoo</a>
         <a target="blank" href="http://www.github.com">Link on - Github</a>
      </nav>
      <div id="wrapper">
         Some text <b>here</b>.
      </div>
      <script async="" type="text/javascript" src="https://www.code.jquery.com/jquery-1.12.0.min.js"></script>
   </body>
</html>

... and the same code written in Macdom looks like follows. The power of laziness 💪!


!5
html
    head
        utf-8
        viewport
        favicon includes/favicon.ico
        title Macdom example
    body
        h1 #title .titles .main-title Hello world
        nav
            @ a $http://www.[@].com $blank Link on -
                [google] .first-link Google
                [yahoo] Yahoo
                [github] Github
         div #wrapper Some text here.
         https://www.code.jquery.com/jquery-1.12.0.min.js async

In the code above, there are shown all the features Macdom contains such as Indented syntax, CSS like selectors, Quick attributes, Macros and Replicator. The syntax can looks a bit confusing and it deserves a bit explanation.

Indented syntax

Macdom uses indentation in order to decide whether the tag is nested in another or not. Macdom also knows which element is paired and which one is not so, all you need to do is "indent" in order to create the correct structure.


div Paired
<div>Paired</div>

input
<input>

CSS like selectors

Almost every element has some id, class or data attribute. The syntax can be quite long but what if we would be able to use the same syntax for writting these attributes as in CSS?


div #myId .firstClass .secondClass -somedata="Some value"

<div id="myId" class="firstClass secondClass" data-somedata="Some value"></div>

Quick attributes

I think this is the most killing feature 😎. For example, input tag usually has the value and type attribute. Macdom contains a list of quick attributes for this element in the following order: type, value, placeholder. Applying these attributes is then shortened into the dollar sign and value.


input $text $Some value;

<input type="text" value="Some value">

Macros

Some html tags are always the same for example the meta tags for viewport or robots. Do you know how to write the viewport tag correctly? With the Macdom HTML preprocessor you don't need to know.


viewport

<meta content="width=device-width" name="viewport">

Replicator

Is something like a "for each foollowing line" loop. Great tool for example for writing static html code. Lets say you have a long list (ul + li) and you decided to change some attributes, for example a class name. It can be hard to change it even in the IDE and therefore Macdom has the replicator that allows you to register a line of code with common "settings", clone it, synchronize it and render it multiple times.


@ a $http://www.[@].com $blank Link on -
[google] .first-link Google
[yahoo] Yahoo
[github] Github

<a target="blank" href="http://www.google.com" class="first-link">Link on - Google</a>
<a target="blank" href="http://www.yahoo.com">Link on - Yahoo</a>
<a target="blank" href="http://www.github.com">Link on - Github</a>

Template engine independency

Macdom is written in the PHP language and is independent on the file extension so you can use whatever template engine you want.

Challenge!

When I have released the first version of the Macdom HTML preprocessor, I found out that there are already some HTML preprocessors like Haml, Jade (Pug) and Slim. Code written in Macdom syntax can be very short and simple to understand but I was wondering how short the code is in the comparison to the code from these well known html preprocessors? So I have created a comparison.

Html preprocessors challenge from Vladimír Macháček

Try It!

Macdom can be installed via Composer


composer require machy8/macdom

and if you use Symfony Framework you can install Macdom bundle.


composer require machy8/macdom-bundle

I use Macdom on my personal projects (like here on my blog) or when I am coding some HTML template. It simplifies my work every time I use it and it makes HTML coding fun again. Feel free trying it and let me know what do you think. I´d be very grateful for your feedback!