A fun exercise from Terence Eden. You can send an HTML file over the wire including anything a website might need without requesting any other files. CSS and JavaScript are easy, because there are <script> and <style> tags. Images and fonts (and pretty much whatever other kind of asset) aren’t too hard because Data URLs exist. See Terence’s post for an extra-tricky final version including .zip files.
Reminds me of a couple of other tricks…
- You don’t have to include CSS in your HTML, you can force an HTML file to load the styles via header.
- You can use that trick above, literally send zero HTML, and still make a thing that looks like a website because of how the browser implies certain HTML, which you can then append content via CSS pseudo elements. Read: “Using CSS without HTML”
What would be interesting here is how that affects performance. Are browsers able to better optimize load times with separate files? With HTTP 2/3 having multiple network requests to the same server matters less as I understand it.