Show HN: Plain Vanilla – a tutorial website for vanilla web development

I've been thinking about doing something like this for the past few months, kudos for giving it a shot!

I disagree with your statement: "Don't use the plain vanilla approach until you've tried some of the popular web development frameworks and have learned why you might want to do without, and until you're confident on how to structure a codebase without the help of a framework."

I was writing vanilla javascript for years before I began using frameworks, so when I encounter a new one, I understand exactly what problem it's trying to solve. For any beginners, I personally recommend just building websites directly, without any framework assistance.

Critic time. This site is more enterprise-vanilla. Like many others you have fallen to the trap of using any dom api feature, without stopping for a second and thinking, "Do I really need this? Does it actually make my life/code easier?" The answer is no. 26 lines of code to add a single avatar image with alt text? This should have been a 1 liner.

You don't have to use every feature out there. Getters that return 1 element that will never change. Splitting what should have been 1 style.css into 5 different files. Too many "best practices" for "complex" software.

I've actually been struggling with a problem related to this. First time page loads if you have a 2000loc JavaScript file + index + css + favicon requests nothing but those 4 resources, which is very quick on a keep-alive http 1.1 server.

I've written all of that from scratch because I got tired of maintaining node.js

But when splitting up the js file into pieces and using es6 modules, say 12 different files, Chrome makes 8 TCP connections on 8 different sockets, and each connection has its own TCP handshake (and TLS handshake for https). How do you bundle things without using a build system or a bundler? Import maps help, and it's not difficult to simply hash the page and copy the asset to a "dist/" folder with the hash appended, but it's still slow on first page load.

I'm not a web developer professionally (or network engineer), so I'm learning about web networking myself for the first time. It might be helpful to add a section about "traffic shaping"? I've smacked together a service worker that does the work of caching well-enough for now, but I'm definitely doing something rather strange and reinventing something. My page loaded significantly faster when it was just 1 JS file, no caching needed.

I'm totally into vanilla web development. Almost all the frameworks are either trying to solve the problems caused by the browser, or trying to force developers follow their style so that the developers make less mistakes.

But the browser evolves:

- Convenient and flexible browser APIs totally replaced jQuery

- HTTP2 HPACK, multiplexing and connection coalescing make SPA and bundlers unnecessary

- Web Component and Shadow DOMs helps you write modular HTML and CSS

etc etc

And developer needs to evolve, too! These frameworks make too many leaky abstractions that developers should think about. It turns out if they don't encounter problems at the beginning, they will meet them later with interest.

I was going to write a similar document, but thankfully you write it so well!

P.S. I'm also not against the framework to solve engineering problems like testing or CI/CD.

Consider adding a track where application is built without JavaScript. There have been many interesting development on HTML side, with dialog and popover elements, making no-JS websites viable and even more convenient to use.

Nice work, I haven't tried web components but support is better than I expected per caniuse[0]. This weirdly reminded me of a time 12 years ago[1] when I was encouraged to avoid using the term "vanilla" as it sounds like another framework

[0] https://caniuse.com/?search=web%20components [1] https://stackoverflow.com/a/11487293/691156

I have noticed the events complexity, and I have actually developed an easy workaround for this. The file on this website is a bit outdated and has a bunch of bugs, but the demos work: https://js-effects.netlify.app/todo

A working version can be found here: https://hastebin.skyra.pw/xonoseruyi.ts

There is currently no documentation, but most of the function names are self explanatory.

Love it! Have you seen the signals proposal? Just learned no-build-step preact, but between signal and these examples, I might not bother for my next project.

https://github.com/proposal-signals/signal-polyfill

Nice. Btw, you should remove the local scripts injected by your AdBlocker, `src="//local.adguard.org`.

This is so damn cool. Thank you for building this.

I last did hands-on (professional) development back in the jquery era, but have amassed a certain degree of familiarity with modern frameworks by contracting / PM-ing various projects others chose to build with them.

To be honest, I'd no idea how far "vanilla" capabilities had progressed. My last couple of personal projects I built with jquery, because I still know it, a framework would be way overkill, and, you know, why the hell not? Your presentation has me excited to learn something new. Again, thanks.