This article is about a (WIP) HTML parser tool, that aims to automate a common set of tasks involved in the web development process.
HTML parser in 2019?
Yep, writing and using 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 means understanding and manipulate text, documents or HTML content, using tools and algorithms.
- load the HTML files and mutate the DOM
- 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
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:
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
Might sound a little bit futuristic, but take a look at this tool: 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
The full mapping list can be found here. I will list only a few mappings (Bootstrap Left):
- row -> columns
- col -> column
- label -> label
- form-control -> textarea
- close -> delete
The full mapping list can be found submitted on Tailwindo Repository. Please find below a few samples (Bootstrap Left):
- xs -> sm
- primary -> blue
- success -> green
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 repository.
- HTML Parser - supported by AppSeed
- HTML Parser - How to use Python BS4 to work less
- Developer Tools - Open-Source HTML Parser - related article
- BeautifulSoup Html Parser documentation
- HTML Parser - Convert HTML to Jinja2 and Php components - related blog article