Hello Coders,
This article is about a (WIP) 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 and developer tools. Thank you!
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.
Why to write such a tool
Initially, I decided to write a simple 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:
- 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 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 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 themes to Bulma and Tailwind
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
Bootstrap to Bulma CSS
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
Bootstrap to Tailwind
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
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 repository.
Resources
- 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
Top comments (0)