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

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.

This is my understanding of HTTP versions and when bundling is necessary:

On HTTP 1 chrome will make 6 TCP connections to a host, and serialize requests one by one over those connections. This suffers from the waterfall effect, where you have to wait for the first 6 requests to complete, then the next batch, and so on. On lossy connections this can also lead to head of line blocking on each of those connections, where it has to wait for a packet of one file to arrive before it "frees up" the connection for the next request. On HTTP 1 bundling becomes necessary pretty quickly to guarantee good performance.

On HTTP 2 it will make 1 TCP connection to a host, and multiplex requests over those connections, so they may all download in intermixed chunks. This has less connection negotiation overhead, and it does not suffer from the waterfall effect to the same degree. However, it still has head of line blocking on lossy connections, and this is in fact made worse because there is only one connection so if it's blocked at TCP level on a single packet of a single file every request behind of that packet is blocked as well. I've done some tests and on reasonable quality connections there is not much overhead involved with requesting a hundred files instead of one file. The caveat is "on reasonable quality connections".

On HTTP 3 the QUIC protocol is based on UDP and therefore connectionless. There is no overhead for establishing connections or doing TLS handshakes, and no waterfall or head of line blocking. However, because of the connectionless protocol a lot of TCP concerns (like dealing with packet loss) become a concern of the HTTP layer, and this complicates implementation. The browsers already support it, but it is especially an issue at the web server level. This means it will take a while for this feature to roll out to servers everywhere. Once the web moves over to HTTP 3 the performance advantages of bundling should largely disappear.

A service worker and/or careful use of caching can be used as a workaround to lessen the impact of requesting many files over HTTP 1, but this adds implementation complexity in the application and a bug may cause clients to end up in a semi-permanently broken state.

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.

It is a tricky balance to be sure. Building familiarity with html, css and javascript first is necessary, and I do link out to tutorials that teach that on the welcome page. But beyond the basic knowledge, how do you learn good practices quickest? Do you start trying things and learn what works and what doesn’t through experience? Or do you follow the learning track of popular frameworks and learn good practices through example and osmosis?

On balance I think it’s better to learn how to build with frameworks first to learn all the right concepts in the guiding structure that they provide, and only then to walk away from frameworks and have complete freedom by going vanilla. That’s why that paragraph is there. YMMV.