Entire website in a single HTML file • Hacker News Board

Re: Entire website in a single HTML file

#131

Post by adregan » Fri, Dec 24, 2021, 5:24 AM UTC

What's old is new again! Chris Coyer (the owner of CSS-Tricks) made a site using a similar trick in 2010 and there is a screencast of the technique on the same site as the linked article[0]. He did use jQuery to hide and show sections, but I imagine you could even implement a lot of the animations from back then as CSS these days.

0: https://css-tricks.com/video-screencasts/84-site-walkthrough...

Re: Entire website in a single HTML file

#132

Post by anderspitman » Fri, Dec 24, 2021, 5:35 AM UTC

This is in the same vein as the "checkbox hack". It's a great rabbit hole to go down. It's fun to try and figure out how to accomplish normal UI functions with no JS and no page reloads. My personal favorite was making a popup Confirm/Cancel dialog where you could still see your content behind it. Cancel made it disappear; Confirm triggered a CSS url() call for the action.

Here's a todo app with no javascript (not my work:

https://www.mattzeunert.com/2017/10/30/javascript-free-todo-...

Re: Entire website in a single HTML file

#133

Post by nawgz » Fri, Dec 24, 2021, 5:36 AM UTC

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…

Ah, and . The most glorious HTML5 elements of them all. Use and abuse these for all sorts of custom yet native capabilities, like s with custom styles and proper keyboard/native controls.

Re: Entire website in a single HTML file

#134

Post by adamddev1 » Fri, Dec 24, 2021, 5:37 AM UTC

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)

Re: Entire website in a single HTML file

#135

Post by CoryAlexMartin » Fri, Dec 24, 2021, 5:38 AM UTC

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 without JS is not hard.

Re: Entire website in a single HTML file

#136

Post by slmjkdbtl » Fri, Dec 24, 2021, 5:40 AM UTC

The only me stopping me is component, sometimes you just need to reuse certain HTML structure. Currently I'm using custom script to generate HTML from hyperscript-like syntax, it'll probably be better than any native API that enables component, but still wish to see one.

Re: Entire website in a single HTML file

#137

Post by phist_mcgee » Fri, Dec 24, 2021, 5:43 AM UTC

culi wrote: post #87

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…

> HTML and CSS alone are really powerful https://html.energy/

> Written in pure, raw HTML. Can you feel the energy?

Has several CSS files (one 2.5 Kb) and a 13Kb minified js file (https://www.statcounter.com/counter/counter.js) that does... something related to user tracking.

I don't get it.

Re: Entire website in a single HTML file

#138

Post by lazyjeff » Fri, Dec 24, 2021, 5:44 AM UTC

Since this hijacks the target anchor, is there a way to still scroll to a part of a page within the section? I think text fragments would work (https://wicg.github.io/scroll-to-text-fragment/#indicating-t...), but they're only supported in Chrome.

Update: maybe element.scrollIntoView()? I'll investigate sometime later

Re: Entire website in a single HTML file

#139

Post by peeters » Fri, Dec 24, 2021, 5:45 AM UTC

So to sum what I'm reading, it's a neat little demonstration of the :target pseudoclass.

But:

- No, the entire website isn't a single HTML file (it's also images and a CSS file)

- So no, you can't download a single file and have it work offline

- And no, this won't work well with screenreaders and other non-standard clients

- And no, this doesn't scale well to larger sites

- And no, this won't be indexed well by search engines

- And no, you don't need this to avoid Javascript navigation (just use multiple HTML files)

Re: Entire website in a single HTML file

#140

Post by zffr » Fri, Dec 24, 2021, 5:46 AM UTC

andyp-kw wrote: post #20

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…

You're describing PDF files, but unfortunately Adobe didn't invest much time or money into making them interactive with a scripting language.

PDFs actually have some support for javascript! I don't know any serious use for it and some PDF viewers refuse to support it (ex: Apple's Preview app), but it does exist.