HTML Parser - Design once, Use anywhere
Tags: discuss, devtools, htmlparser, appseed
Published: 2019-09-18 12:24:59

---
title: HTML Parser - Design once, Use anywhere
published: true
description: I try to make my life easier with automation tools. 
cover_image: https://raw.githubusercontent.com/app-generator/static/master/common/abstract-colored-box.jpg
tags: discuss, devtools, htmlparser, appseed
---

Hello Coders,

This article is about a (WIP) [HTML parser](https://appseed.us/developer-tools/html-parser) tool, that aims to automate a common set of tasks involved in the web development process. 

--- 

> Want to learn more about this topic? Access the AppSeed platform for more articles related to [HTML parsing](https://blog.appseed.us/tag/html-parser/) and [developer tools](https://appseed.us/developer-tools). **Thank you!**

---

## [HTML parser](https://appseed.us/developer-tools/html-parser) in 2019? 

Yep, writing and using [developer tools](https://appseed.us/developer-tools/) in your daily workflow, sometimes (not always) might help you to skip over the manual or repetitive work that occurs in the daily routine. 

For newcomers, **Parsing** is the process of analyzing a string of symbols, either in natural language or in computer languages, according to the rules of a formal grammar (Wikipedia definition). This is the definition of parsing for geeks. 

For humans, [HTML parsing](https://appseed.us/developer-tools/html-parser) means understanding and manipulate text, documents or HTML content, using tools and algorithms. 

---

## Why to write such a tool

Initially, I decided to write a simple [HTML parser](https://appseed.us/developer-tools/html-parser) to automate UI integration into a new project. I replaced almost entirely the manual work using a few code snippets presented in a previous [article](https://dev.to/sm0ke/html-parser-extact-html-information-with-ease-308m):

- load the HTML files and mutate the DOM
- manage the page assets (Javascript, CSS) to update the paths to be used for various boilerplates coded in Python, JAMstack, Php.
- edit the DOM elements (anchors, divs, images) and mutate the properties (images src, anchor HREF property, etc)
- extract components for various template engines: Jinja, Blade
- replace the hard-coded texts with production-ready variables 

---

> Using the current version of the **[HTML parser](https://appseed.us/developer-tools/html-parser)** [I've built 100+ open-source apps](https://dev.to/sm0ke/100-open-source-apps-built-with-automation-tools-3jmj) and publish all the sources on Github.  

---

**Why not stopping here?** Well, soon I realized that I can extend the parser to cut more manual work done by me and others. Some facts (in my head, at least) regarding the Web Design Market in 2019:

- Bootstrap / jQuery themes still dominate the market
- Bootstrap themes market is crowded and oversaturated.  
- They're not so many themes for modern technologies: Vue, Angular React
- The new CSS frameworks (Bulma, Tailwind) gain traction in front of Bootstrap,  but .. there are not so many themes and UI kits to start fast a new project.


With this picture in mind, I decided to add a few more features, in order to cut more manual work, done by me or others:

---

## Convert Bootstrap theme to Vue, React 

The Vue and React UI kits are more expensive compared to the Bootstrap version, for the same product, mostly based on the manual work involved in the process. 

> Why not converting automatically a Bootstrap/jQuery theme to any other relevant technology like React, Vue, Angular

--- 

## Migrate [Bootstrap](https://getbootstrap.com) themes to [Bulma](https://bulma.io/) and [Tailwind](https://tailwindcss.com/)

Might sound a little bit futuristic, but take a look at this tool: [Tailwindo](https://github.com/awssat/tailwindo) - "Convert Bootstrap CSS code to Tailwind CSS code". This is a brilliant idea IMO. 

The process is quite simple: Tailwindo scans the PHP files and replace the Bootstrap classes with Tailwind classes using a correspondence map. 

Using the same approach, I will add the Bootstrap conversion feature into the parser to convert Bootstrap themes to Bulma and Tailwind

---

### [Bootstrap to Bulma CSS](https://appseed.us/developer-tools/bootstrap-to-bulma-css)

The full mapping list can be found [here](https://bulma.io/alternative-to-bootstrap/). I will list only a few mappings (Bootstrap Left):

- row   -> columns
- col   -> column
- label -> label
- form-control -> textarea
- close -> delete

---

### [Bootstrap to Tailwind](https://appseed.us/developer-tools/bootstrap-to-tailwind-css)

The full mapping list can be found submitted on [Tailwindo Repository](https://github.com/awssat/tailwindo/blob/master/src/Converter.php). Please find below a few samples (Bootstrap Left):

- xs      -> sm
- primary -> blue
- success -> green

---

## A note at the end

The new features are a WIP and I hope to have something production-ready until the end of the year, and the sources committed on the [HTML parser](https://github.com/app-generator/html-parser) repository. 

---

## Resources
- [HTML Parser](https://appseed.us/developer-tools/html-parser) - supported by AppSeed
- [HTML Parser - How to use Python BS4 to work less](https://blog.appseed.us/html-parser-python-beautifulsoup-use-cases/)
- [Developer Tools - Open-Source HTML Parser](https://blog.appseed.us/developer-tools-html-parser/) - related article 
- [BeautifulSoup Html Parser](https://www.crummy.com/software/BeautifulSoup) documentation
- [HTML Parser - Convert HTML to Jinja2 and Php components](https://blog.appseed.us/html-parser-convert-html-to-jinja2-and-php/) - related blog article