Automatic HTML parser

New design to integrate into your app? We decided to speed up things with a tool.

From the beginning, I must warn the audience about this article. The content targets programming geeks and it's quite hacky.  This parsing tool was born because we are lazy asses & dark geeks.

The goal of this article is to explain the need for building a tool that parses automatically an HTML theme. As a web designer, when a new project arrive, we need to do the same steps over and over:

1. Choose the design with the customer

2. Build pages by aggregating components from the HTML theme

3. Connect flat HTML to real action  

To solve all these problems we've built a tool that automates a big part from the steps listed above. Please notice that this tool will be offered to the developers soon as we succeed to have a stable release. At this very moment [ 14.dec.2018 ] tool does the following:

Full Stack App - Material Dashboard

Load a page and normalize it. Normalization means that all page assets (images, CSS files, js files) are loaded/copied into standard directories. For instance, if the index.html use a CSS file directly from the root directory, after normalization the HTML file will load the CSS file from assets/css/xxx.css. The process is identical for images and javascript files. Like this, each HTML file becomes easier to process and manipulate.

Extract the components and basic containers (header/footer) using an interactive console. The developer can interact with each element (div, anchor, span) and change properties like href, text or even add new properties. Extract hardcoded text from the components and save it for later use into a JSON file. The reconstruction of the original it's quite easy because the tool injects a unique key into the component to replace the text and the same key is used to save data into JSON file.

Translates extracted components into production-ready components for CodeIgniter, Laravel (Blade), Jinja2 (Flask).

As a POC, thanks for checking this design (made by Creative-Tim) and coded by us ( sources published on Github.)  

Argon Design System - Files:

Original Index.html file

Normalized Index.html file - where we can easily see that all assets are loaded from a new path: CSS files from /assets/css/ .. Images from /assets/img .. and so on

JSON metadata file: index_data.json

Plain HTML components, full list here, sample cta.html

Php components, full list here, sample cta.php

Laravel components, full list here

Jinjs2 components

Because we are in the core development of this tool, please provide feedback and suggest something useful to add. Until then, thanks for your time.

Show Comments

Get the latest posts delivered right to your inbox.