Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Entire website in a single HTML file

css-tricks.com

Post reply on HN
Print view View original

241–250 of 333 posts

Re: Entire website in a single HTML file

#241

Post by southerntofu »

tazjin wrote: post #239
jhgb wrote: post #225

Earlier quoted context omitted.

What part of a Mathematics Stack Exchange clone would require JS?

In "modern" stacks it is preferable to do things like layouting of formulas millions of times on the clients, instead of once on the server. I guess that sort of thing needs JS.

As you have pointed out, but formulated more explicitly: client-side rendering should deal only with HTML/CSS because that's what the browser is built and optimized for. Every line of script changing the DOM (html structure) may trigger a redraw of the page, which means wasting considerable amount of resources! But even if your script outputs HTML only once, you still have O(n) HTML templating instead of O(1) for n clients. Such a waste!

Re: Entire website in a single HTML file

#242

Post by southerntofu »

adabaed wrote: post #91
tyre wrote: post #84

HTML and CSS alone are really powerful. I decided not to use any JS on my personal site, but you can still have: + collapsible sections with `details` and `summary`[0] + footnotes, with navigation to/from with anchor tags. You can even apply CSS on the currently selected footnote.[1] + Semantic web that is compatible with everything and has sensible defaults so you can focus on what you're actually doing! + Tiny depl…

You like to live in hard mode. I like that.

Building a website in raw HTML/CSS is much easier than the equivalent in javascript-framework-du-jour. It's also much lighter on resources both on server and client. It's a win-win situation for everyone, especially for clients with less powerful computers.

Re: Entire website in a single HTML file

#243

Post by southerntofu »

chrisjc wrote: post #240
stevage wrote: post #226

This is great. I just wish this clumsy wording was a bit tighter: > the whole website is contained within a single HTML file. Because, it's not. An HTML file, a CSS file, and some PNGs. What's interesting is there is no JavaScript.

It's not, but with a little more imagination you could certainly take the author's work to the next level. Inline CSS and images as blobs. Then in practice the issue becomes a bloated file that isn't able to reuse internal components, at least not without introducing a layer of complexity such as a scripting language and browser APIs to go with it. Perhaps if HTML had been designed with more component re-usability in…

Sounds like content-addressing would address (pun intended) your needs. I mean it's quite possible to build a IPFS/Bittorrent/DAT-based browser. I'd be interested in such a modern p2p-friendly browser minus the gigantic JS crap and attack surface.

Re: Entire website in a single HTML file

#244

Post by southerntofu »

rishav_sharan wrote: post #162

Lovely article and such an interesting way of creating single page apps. I never knew about this usage of the :target selector. I think a major issue with this approach is just practicability - I'd want to write my content in something like markdown and we will anyway need JS to convert the markdown to HTML. I have also been interested in making SPAs, my my way is more traditional. Using javascript for the stitching.…

> Please enable Javascript to view this site. This is a Single Page Application and it needs JS to render.

That's the entire problem with JS: i can't browse a page without a complex rendering engine (arguably full of security vulnerabilities) or even scrape it. Something like webmention/microformats (indieweb) federation becomes almost impossible with you due to your setup.

Also worth noting, rendering the Markdown on the client is super inefficient. First, because client-side JS will always be far slower than native code server-side: i first need to download the entire JS then run it in a super slow sandbox. Second, because there's economies of scale to be had: it may take a few milliseconds to build the markup, but every client has to do it. For n client, that's O(n) complexity vs O(1) for server-side rendering. So many CPU cycles wasted :)

Re: Entire website in a single HTML file

#246

Post by xigoi »

rishav_sharan wrote: post #207
atq2119 wrote: post #174

Earlier quoted context omitted.

There are plenty of non-JS converters from Markdown to HTML and static websites are a thing.

It is a static site. Only that I decided to hand roll my own implementation instead of using something like Jekyll. And as it doesn't have any server for the markdown (they are just CDN files), I have to use JS to do the translation to HTML.

Why not render them on your own computer after you write them?

Re: Entire website in a single HTML file

#248

Post by togaen »

adamddev1 wrote: post #134
sxp wrote: post #8

This is something I've always wanted for virtual textbooks. A single .html file with all the JS, CSS, images as inline data blobs, etc. For most physics, math, CS, etc books, this should be possible. It would make it trivial to download the book for offline use and share it with others. Other than the raster images, the entire content of these types of books would probably fit in a couple MB of text. The use of #anch…

That could easily be made into a PWA that people could save and view offline. I've been doing this with create-react-app and markdown files (muuuch bulkier solution) but it's an offline docs-like SPA people can click around with interactive examples and shareable links etc. Seems like offline availability was not a priority for other docs-making tools like docosaurus etc (last time I checked)

You want offline viewing?

Chrome: File > Save Page As... > Webpage, Complete

Safari: File > Safe As... > Web Archive

My god, it's just text files and images, you don't need JavaScript.

Re: Entire website in a single HTML file

#249

Post by togaen »

wyattpeak wrote: post #151
jzellis wrote: post #148

My God, you mean it's possible to build a site that doesn't require 10MB of compressed stupid ass frameworks and preprocessors to turn your code into, uh, slightly different code? You can just... write HTML and CSS yourself? By hand? The deuce you say. :-D

I think this is substantially cleverer than merely "not using frameworks". Nobody's surprised you can do this without a framework, but I suspect a good number would be surprised you can do it without Javascript.

They shouldn't be surprised, though. That's the point. The whole web dev community seems to have forgotten about the foundational web standards.

Re: Entire website in a single HTML file

#250

Post by wyattpeak »

pjmlp wrote: post #247

It is kind of ironic that 20 years later this needs to be re-discovered.

This was absolutely not possible 20 years ago. The only pseudoclasses available at that point were the anchor pseudoclasses and :first-line/:first-letter.[1]

What's being shown off here is not having a single page of a website in just HTML/CSS, but having all pages.

[1] https://www.w3.org/TR/REC-CSS1/#pseudo-classes-and-pseudo-el...

Post reply on HN