Lumber

Beginners learning web development have two options:

1. To build a non-trivial website with vanilla HTML, a common issue is messiness. You have nested divs inside nested divs and waste time tracing where one ends and another begins.

2. The alternative is to use a GUI interface that leverages drag and drop and editor tools to construct the layout. The problem with this is that it's too separated from the coding. The user doesn't know anything about the underlying code, which means a few things: missing the learning process, being at the mercy of the platform, and lack of customizability.

Solution:

Bridge those two extremes. The underlying structure of an HTML file is the DOM. The DOM is composed of elements in a tree. Lumber is a platform for users to interactively create a website through building the DOM tree.

This improves the process of building websites via the following:

1. The process of building a website with this method resembles the actual code generated, hence keeping the learning relatively intact. The real difference is the way it's displayed, instead of pretty nodes, you have ugly tags.
2. It's easy to manage. Analyzing and finding specific elements of an HTML file is unpleasant. The time saved being able to easily lookup and modify parts of your website compounds. resembles typing it into a tag, as opposed to selecting a paint tool and filling an element a certain color.
3. Save multiple instances of your website by saving the trees. Say you have a running production view, some features view, and an experimental one. Lumber uses Gun as a database to store trees and ensure your work is never lost.

Target Users

Lumber is aimed at making the transition into web development as painless as possible while still fostering the learning process for beginners. However, even experienced developers get lost in the jungle of HTML tags, and this can be used as a quick and dirty way of debugging.

Key Features

1. We use a 2-pass algorithm to parse the original HTML code into a hierarchical JSON file.
2. We leverage the power of D3.js to beautifully visualize it into a tree structure which allows for adding elements to the DOM, rearranging any and every branch, dragging and dropping, panning, and adding text.
3. We implemented a code generator that parses the tree, even after the user has heavily modified it, and produces the HTML code and the ability to view it live. This bidirectional capability means changes are reflected in both code and tree.
4. We used GunDB to save trees persistently. If the user has multiple states of the website at any point, switching between them is seamless.

Built With

• css
• d3.js
• express.js
• gundb
• html
• javascript
• jquery
• node.js
• python