This article is about a (WIP) HTML parser tool, that aims to automate a common set of tasks involved in the web development process.
Yep, writing and using tools in your development, 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, parsing means to understand and manipulate text, documents or HTML content, using tools and algorithms.
Initially, I decided to write a simple 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:
- load the HTML files and mutate the DOM
- edit the DOM elements (anchors, divs, images) and mutate the properties (images src, anchor href's, 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 I've built 100+ open-source apps 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 a crowdy 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.
Thank you for reading this crazy post. Feel free to AMA in the comments.
Automation, my favorite programming language
Cover Photo by Efe Kurnaz on Unsplash