I created a tool for visualising HTML DOM elements as exploded-diagrams, inspired by a defunct Firefox debugging tool. With my product design background, I found it useful to grouping and differentiating elements in this way as it creates a more physical representation on the screen that can be inspected. We were in the middle of a project at work that was creating novel UI that had become harder to demonstrate, and I thought this may help provide clarity and spark more interest.
We used the tool at work to visualise our product, and the library has had thousands of downloads. Interestingly, the parameters can also be set to create a 2D parallax effect, which has been a recurring design trend in web design.
I gained experience:
- Creating block-box software (JavaScript closure) and documentation for library use
- Publishing open-source projects to NPM
- Using CSS 3D
- Using GitHub Pages
