Building a Weeb Stack

Before going digital, you might scribbling down some ideas in a sketchbook.

Description of the problem

As I’m making DashGL and other tools over small amounts of time on the week end and at night, one of the aspect I end up spending a lot of time on is the aspect of figuring out how to bundle and deploy code. I have a fair amount of experience writing with vanilla Javascript and Html, but I would prefer to get the benefits of working with TypeScript, as well as not having to re-invent everything myself. And this means that I’ve started looking into frameworks more to see how I can benefit from using out of the box approaches.

(Really) Serverless

None of what I do with DashGL generally involes a server. We have documentation pages, in the browser tools and static pages. This means that I can take off the table things like Next, and really only focus on strictly static approaches like Astro and Vite. I think within these two options it then comes down to how to use them.

Documentation

For documentation I think this is basically solved. We can use Astro Starlight which should allow me to create documentation with MDX and everything should work out of the box.

npm create astro@latest -- --template starlight

Browser Tools

For browser tools I’m been bouncing back and forth between Vite and Astro in my head. And I think Vite is probably the better approach for this. Originally I was thinking that potentially I could use Astro to bundle multiple different tools for one project, but I don’t think that I like that approach.

npm create vite@latest my-react-app -- --template react-ts

And the reason is that reverse engineering things is messy. A lot of times I’ll have to spin up tools on the fly to make a one-off thing as a test in order to unblock something else. And the general nature is that I don’t have a clear idea of where I’ll end up. Maybe in retrospect if I wanted to go back and make a nice clean looking tool that worked for everything as a victory lap, I could potentially make an Astrojs site with multiple tools that share the same code.

But reality just isn’t that nice. I think potentially Vite + TypeScipt + Tailwind + React + shadcn. It’s tempting to go with component libraries, but I find that component libraries are frustrating when you want to make small adjustments. And Shadcn/UI seems like a better approach that while I might not update components 99% of the time, having the code in my project will make it that much easier to fix when it is there.

Static Sites

For statis sites I’m really loving the approach of AstroJs + TypeScript + Tailwind + Daisy UI. Daisy is different in the sense that it’s a component library that you can’t change, but the approach is pretty different for static stuff. On this side of things I’m looking for components that look good that I don’t have to change using any kind of code. So the fast that DaisyUI looks good and minimizes the amount of code that I need to write while focusing on content is welcome.