How I Built a Mini Programming Language for Automatic Web Page Generation – Step by Step

Mrl Alex — Wed, 18 Sep 2024 22:43:39 +0000

Building web pages can often feel repetitive and time-consuming, especially when switching between HTML, CSS, and other technologies. This led me to an idea: to create a simplified language that automates the process of generating web pages, allowing me to write code in a minimalist syntax that my custom parser transforms into HTML and CSS.

In this article, I'll walk you through how I built a custom programming language using Python, explain how the parser works to interpret this language, and show how I simplified the web development process. If you're curious about how it works or want to contribute, you're invited to explore the project!

The idea for this project came from the desire to streamline web development. I noticed that writing HTML and CSS can be tedious and repetitive, so I decided to create a custom language that makes this process more intuitive.

How My Language Works: "The language I created allows users to define the structure and style of a web page using a simple syntax. For example, instead of writing complex HTML and CSS, you can use a structure like this: page { title: "My Enhanced Website"; header { text: "Welcome!"; style: { color: red; font-size: 30px; } } }
This is then automatically transformed into a fully functional HTML page by the parser I built in Python.

I implemented this project using Python, along with regular expressions (regex) to parse the custom syntax. Here's a breakdown of the key components of the parser:

The WebPage class handles page elements such as headers, buttons, forms, and tables.
The parse_webcode function reads the custom .webcode files and generates valid HTML from them.
Elements like forms, tables, and buttons are defined in a simpler way within .webcode files, and the parser generates their corresponding HTML automatically."
How It All Comes Together: "Once the .webcode file is parsed, it generates an output.html file that can be opened in a browser to see the result. Here's an example of a final output generated by the parser."

Challenges and Future Plans: Throughout this project, one of the main challenges was ensuring that the parser correctly handles all HTML elements and attributes. Moving forward, I plan to expand the functionality by adding more interactive elements like JavaScript support and CSS frameworks for styling.

Invitation to Collaborate: If you're interested in contributing or have suggestions for improvements, you're welcome to explore the project and leave your feedback. Here's the link to the repository where you can contribute.

Snippet: The Custom Syntax in .webcode File
Explain how your language allows users to write web elements in a simpler syntax: `page {
title: "My Enhanced Website";

header {
    text: "Welcome!";
    style: {
        color: red;
        font-size: 30px;
    }
}

button {
    text: "Click me";
    action: onClick {
        alert('Button clicked!');
    }
}

table {
    rows: [
        ["Name", "Age", "Email"],
        ["John", "30", "john@example.com"],
        ["Jane", "25", "jane@example.com"]
    ];
}

}
`

Snippet: Python Parser Code to Convert the Syntax
Here’s how your Python code reads the custom .webcode syntax and converts it into valid HTML. The parse_webcode function handles this process: `def parse_webcode(filename):
with open(filename, 'r') as file:
lines = file.read()

# Extract the page title
title_match = re.search(r'title:\s*"(.+?)";', lines)
title = title_match.group(1) if title_match else "Untitled Page"

# Create a new WebPage object
page = WebPage(title)

# Extract header, style, and other elements (like buttons and tables)
header_match = re.search(r'header\s*{\s*text:\s*"(.+?)";\s*style:\s*{(.+?)}\s*}', lines, re.DOTALL)
if header_match:
    header_text = header_match.group(1)
    style_text = header_match.group(2)
    style_dict = parse_style(style_text)
    page.add_header(header_text, style_dict)

# Extract table data
table_match = re.search(r'table\s*{\s*rows:\s*\[(.+?)\]\s*;\s*}', lines, re.DOTALL)
if table_match:
    table_rows = table_match.group(1).split("],")
    rows = [row.replace("[", "").replace("]", "").replace('"', '').split(",") for row in table_rows]
    page.add_table(rows)

return page.generate_html()

Snippet: Generated HTML Output
This is an example of what the final HTML might look like after your custom syntax has been parsed and converted into HTML: `

My Enhanced Website

Welcome!

Click me

Name	Age	Email
John	30	john@example.com
Jane	25	jane@example.com

DEV Community: Mrl Alex

How I Built a Mini Programming Language for Automatic Web Page Generation – Step by Step

Welcome!