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

251–260 of 333 posts

Re: Entire website in a single HTML file

#251

Post by wyattpeak »

togaen wrote: post #249
wyattpeak wrote: post #151

Earlier quoted context omitted.

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.

This wasn't a foundational web standard. The :target pseudoclass was introduced in CSS3.

The article is not another pointless potshot at frameworks, it's showing a clever use of a new standard to allow multiple pages in the same HTML document without using Javascript.

Re: Entire website in a single HTML file

#254

Post by baobabKoodaa »

adregan wrote: post #131

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...

Using jquery to hide and show sections is... not like OP at all. The whole point in OP is doing this without JS.

Re: Entire website in a single HTML file

#255

Post by k__ »

arghwhat wrote: post #230
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.

A CSS file is unnecessary, and you could skip the images or embed them.

The question is, what is the USP here?

Having no JS or having everything in a single HTML file, and the title suggests the latter.

Also, you can embed the JavaScript too.

Re: Entire website in a single HTML file

#256

Post by bkeating »

arnaudsm wrote: post #104

I love the simplicity of this so much, I built a whole CMS using that, with markdown and a single HTML file! https://github.com/arnaudsm/raito

this is awesome! nice job on the minimalist approach. it looks very clean.

im obsessed with offline-first/offline-only (optional) and have been trying to build all my products with the underlying philosophy of single-file tooling and “infra-less” in-mind; meaning it doesn’t care where it lives and highly portable by default.

here’s a note taking app that is all in a single html file. images are base64’d and data is kept in indexdb. https://github.com/bkeating/nakedNV

Re: Entire website in a single HTML file

#257

Post by marginalia_nu »

outadoc wrote: post #213
npteljes wrote: post #199

Earlier quoted context omitted.

On HN it makes sense to me, because a long link would interrupt the flow of text. So you do a footnote to make them go out of the way. Otherwise Wikipedia has a happy medium I think; footnotes are on the bottom where you'd expect, but they show on hover so you don't have to jump there and then back.

If only the Web had a way to make text clickable withtout showing the whole target URL.

I find inline links incredibly disruptive to my reading flow, the change in color makes my eyes start jumping around in the text. Wikipedia especially is absolutely hopeless, to the point where I've built a mirror that removes all inline links. (A page looks like this: https://encyclopedia.marginalia.nu/wiki/Hyperlink )

Re: Entire website in a single HTML file

#258

Post by layer8 »

mathnmusic wrote: post #159
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…

I have never understood why footnotes are added to the bottom when we have an interactive medium available at hand? Why not leverage and to show them in-place without breaking the flow and without listing them all at bottom? See your comment as an example. Why list all links at the bottom rather than in-place?

> Why not leverage and to show them in-place

Searchability. You want footnote content to be Ctrl+F-able.

Re: Entire website in a single HTML file

#260

Post by layer8 »

jonassalen wrote: post #238
peeters wrote: post #139

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 sear…

I see no problem for SEO. I see no problem for screenreaders This is all classic and supported HTML, so those should work perfectly for this.

The problem for SEO is that either the hidden parts are ignored or the indexing won’t properly differentiate between the different "pages" (sections).
Post reply on HN