blog

Automation - How to build an automatic HTML theme parser

APPSEED

Tired to manually extract HTML components?

Hello, audience, 


Adi here, from APPSEED team. This article is the first one from a bundle of articles where I will describe the genesis of this tool. 


With this automation tool we are trying to solve the following issue: 

A web developer gets a new contract from a client to build an awesome website using an awesome theme (maybe) from Creative-Tim. You have some sample pages .. but you need to build your own, and use the components coded by the designer(s).

Imagine that you have to build the homepage with the structure:


1. Top header with a catchy image and a nice slogan

2. A section with information regarding the company activity

3. Another section dedicated to the Team

4. Contact form with some input fields. 

5. Testimonials based on existing customers feedback.


To advance with your project all components must be extracted from the HTML theme and replace the hardcoded information with the real information injected from the backend.

Our tool aims to automate the components extraction from HTML theme and parametrize the components to be "production ready" for any render engine you are using: Blade (used by CodeIgniter or Laravel), Jinja2 (used by Flask) or Django native renderer. 

Like this, the web developer can speed up the development because the components are not flat HTML files filled with hardcoded information, the components are parametrized with variables expected from the backend. 

To be crystal clear our goal, I will provide an example:


1. I have the following HTML theme as input: Now UI Kit

2. I have to build this FREE website


This website contains a TEAM section with three columns, on each column we have: the name, some basic info, and the job. Basically, to render this section the developer need a for loop over each column where to inject real data.


The theme processor will do that on-the-fly and the output will empower the per to use directly the template without manually decompose the HTML.


Update 1:  Version 1 released


Cheers!

 Adi - AppSeed.us 

#automation tools & coded apps in Php, Python and Javascript


 

  


#automation      #tools      #html-processing