Macdom HTML Preprocessor
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...
... 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.
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>
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">
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">
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.
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.
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!