alnvdl

I did not consider the thickness of the boards because I was designing for these "modern" cabinets that have no significant gaps between the parts when viewed from the outside. So board thickness is just an implementation detail :)

But yes, the real designers using the CAD needed to take board thickness into account when designing the internal structure. In other words, this tool is generating a list of my requirements (what I want it to look from the outside + the labels describing what I want each part to be), and then there's the separate work of designing the actual, reality-constrained furniture.

Mid-way through development, once I still had to solve the problems of sharing and printing, I almost gave up on continuing the work because I thought: "it surely must be easier to just learn a CAD application".

But as another commenter highlighted: that meant a learning curve not only for me, but for my wife as well. And then there was the challenge of sharing it with everyone else via email, IM, etc. Having it open in the browser means it's easy to share, and fast and easy to load and show to people anywhere (which is handy during construction).

Yep, when I was developing this I played with some of these non-intended use cases, even though they wouldn't make sense in reality. Technically, what you did was overlay one module on top of another, with the illusion of there being an L-shaped door.

And it would look very weird, but I suspect it may be possible to assemble the cabinets with these odd shaped doors or drawers...

The tool doesn't actually calculate the measurements. It just specifies the grid, and then extracts whatever the browser calculated as the width/height, rounding the numbers for displaying them nicely.

The scale is there just to make things look nice in the browser and/or in print format, and it can slightly corrupt the numbers as you noticed, especially when it's a small or odd number. I guess one way to get rid of the scale would be to introduce variable font sizes and automatically zoom the grid only for display. But like I said in the post:

> I guess making it more “serious” would have been possible, but in this case I just wanted to get my furniture designed fast, and keeping the code simple and small helped in that.

See: https://github.com/alnvdl/squareplanner/blob/01bdcb050ce58a4...

I also got these designs printed to follow during the construction, so I just picked scale numbers arbitrarily in a way that made them look good in the browser and fit in the paper size. So "portability" and pleasing visuals were more important than accuracy.

I could do that because in my particular case any imprecisions got flagged by the real 3D CAD used by the furniture company to formalize the project :)

CSS grids are quite interesting. I once implemented a furniture designer with it (pure frontend JS, no backend): https://alnvdl.github.io/2023/01/07/designing-furniture-usin...

I've used this to develop GTK applications in the browser using VS Code + GitHub Codespaces. It works quite well:

https://alnvdl.github.io/2023/11/18/a-cloud-based-vs-code-wo...