Discussion on: What is the ideal Tech stack to build a website in 2024? 👨‍💻

[Kaamkiya]

Honestly, I'm that one person who would build it entirely with vanilla JS, vanilla CSS, and plain old HTML. If I needed a backend, it would probably be built in Flask or Deno. My database... well if I could, JSON, otherwise SQLite3 (it's built in to Python).

I'm the kinda guy who just likes the plain stuff without layers upon layers on top.

[Jake Mackie]

Embrace tradition!

[Sean Dinan]

When you say JSON for a database, do you mean something like MongoDB or literally storing the data in a JSON file?

[Joshua Amaju]

JSON file I think

[Kaamkiya]

Like @joshuaamaju said, I meant JSON file.

[Sean Dinan]

Oh ok. I don't think it really makes sense to call that a database, more just a constants file.

Have you implemented it in any production environments?

[Kaamkiya]

I've never been part of a production environment. I'm just a hobbyist :)

[Bitan Sarkar]

Have you tried using JSON as an alternative to database? If yes, how did it go?
I am working on a personal project that would require me to store some data. Its not too much, so I think using a database like MongoDB(which i have to learn about first) would be necessary for me. And like you said I also like things plain and with as much as required. 😀

[Kaamkiya]

I haven't tried, that's one of the next projects on my list :)

[Hudson Gouge]

If he/she is anything like me, it's just a JSON file, maybe encrypted.

[Hudson Gouge]

I've used JSON in a production environment many times. It's fast and easy. I've never had more than about 5,000 total users (and even that only on one of my apps) and it's worked great for storing user data and the like.

[Gideon Onyegbula]

Exactlyyyy

[dous]

Sounds scary to me dude

[Dusan Petkovic]

I think if you decided to with a web app with vanilla js you would end up building a web framework all over again, unless you just need a little bit of reactivity or interactivity in which case its fine, unless you mean using something like web components

[Ingo Steinke, web developer]

Yes, but that's one of today's problems: too many websites are web apps when they should rather be traditional websites! Some devs and product owners seem to like to overengineer everything, maybe to make it look more important or maybe just because they have a backend mindset and never really understood frontend web development in the first place. But it's still much easier to build a fast, accessible and user-friendly website with progressive enhancement, separation of concerns, more HTML and CSS and less JavaScript.

[Peter Hegedus]

I mean, you can probably sell a webapp for more than a plain ole' website is what I am thinking. I think a big part of today's tech business world is not making the best product, but making the most expensive one and then shoving it down laypeople's throats.

My sister has a small business and IT professionals/devs always try to sell her useless crap they do their best to convince her she absolutely NEEDS, or her business will go bankrupt/get hacked/lack the necessary productivity etc etc. They back off really quick when I start asking questions.

[Ingo Steinke, web developer]

Right! like every second startup think they need an app, maybe because investors tell them that they would.

[Dylan Archer]

It's a good thing PWA's exist... I veer away from frameworks unless it's a massive project. Progressively enhancing to support app-like or native app when necessary.

[Kaamkiya]

I might do something like this, to make it easier, if that's what you mean:

function el(type,args) {
  let el = document.createElement(type);
  el.innerText = args.text || '';
  delete args.text;
  for (let arg of Object.keys(args)) {
    el.setAttribute(arg, args[arg]);
  }
  return el;
}  

But I don't think I'd do much more.

[Eckehard]

You can use this cool function to create elements:

const tags = new Proxy({}, {
    get: (tag, name) => {
        return (...args) => {
            let el = document.createElement(name)
            args.map(cl => {
                el.appendChild(typeof (cl) === 'string' ? cl = document.createTextNode(cl):cl)
            })
            return el
        }
    }
})

const {h1,h2,h3,div,p,span} = tags;

h1("Hello World");

see also here, here or here.

[𒎏Wii 🏳️‍⚧️]

I once thought "Wouldn't it be cool if I could just write html.span("content")"

Then I built that.

Then I thought "Wouldn't it be cool if I could add attributes in the same function?"

Then I built that too.

Then I thought "While I'm at it, why don't I make it so I can attach event listeners as well?"

And I built that as well.

Then I figured "It would be nice if I could pass in a listenable state container, instead of a static element, and have it update automatically"

And, even though it was a bit more complicated, I built that as well.

I don't know at what point I'd draw the line, but somewhere along the way, I stopped making "vanilla JS" more usable, and started building my own micro-framework.

This isn't to say there is no merit to minimalism; to me a micro-framework is still better than something like React, but I've given up on this idea that "vanilla is enough". Rather, I'd say "frameworks needn't be big and bloated".

[Eckehard]

Then you should have a look on VanJS, that implements all this. Tao - the author and a brilliant programmer - managed to pack all this in a very small lib of less than 1 kB.

[𒎏Wii 🏳️‍⚧️]

I've had a close look at VanJS not too long ago, when I first found out about it and overall it seems cool. Overall it appears to have independently reached some of the same conclusions as I did with my own project, but to my personal taste, it's just lacking a variety of quality of life features like turning myElement into my-element.

My own library is only a bit over 200 lines long, so it's not like I'm paying an unreasonable price for those few extra features anyway.

But still, if VanJS had appeared a few years faster, I would probably be using that right now. It's a cool project and I absolutely feel validated by someone else coming up with the same thing on their own 😁

[Eckehard]

You should not care too much about the library size. VanJS is increadibly small, but even the VanJS-Logo is about 17kB long. In real life size does not seem to matter so much.

I had a similar project three years ago named DML, which targets more on writing compact code. So I put anything useful into the library which was about 30 kB in the first version. But you do not recognize this in a real life application. The next version anyway would be much shorter and can be used with Rollup.js.

I would have been happy to combine my efforts with VanJS, but it was so important to Tao to save even the last byte, so he did not want any extension. Now there is only a very short wrapper that adds some basic DML features to VanJS. If you like, give me a hint where I can find your lib.

[Friday candour]

Maybe try out github.com/Uiedbook/cradova

[Eckehard]

What a pity! There are so many projects like yours (and mine...), but there is not a single one that has enough traction to focus all the effort.

A library provides only the core functionallity. It would be fare more interesting to create functions and classes, that provide more complex solutions, like a page structure or a complex ui element. See this post as an example.

From my experience, building the DOM from Javascript solves 90% of the problems most web designers have to struggle with.

[Aaron Gonzalez]

I'm with you. I feel that sometimes we do not need layers over layers for most of the things.

[Hudson Gouge]

Same. The only difference for me is I may or may not use SCSS and I wouldn't even think to use SQLite.

[Andrej Rypo]

Good enough for one's hobby site, yes.

[Andreas Riedmüller]

I think this is a good idea for many people to start with!

HTML, CSS and JavaScript are an awesome foundation and I love working with them. I think there is nothin wrong with that.

Sooner or later, you may encounter various problems. If you learn more about and understand these problems, you will appreciate many solutions that are available out there.

The fact that many people complain about complex solutions is, in my opinion, due to the fact that they don't understand the problems well enough.

In this context I remember this page vanilla-js.com/ 😎

[Ryan]

I absolutely agree with you. Just keeping it clean!