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

211–220 of 333 posts

Re: Entire website in a single HTML file

#211

Post by Lorin »

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/

getting zombocom vibes

Re: Entire website in a single HTML file

#212

Post by dredmorbius »

gigel82 wrote: post #175
dredmorbius wrote: post #103

Earlier quoted context omitted.

SPAs display in a single HTML URL, but are themselves (typically) comprised of multiple elements, including many CSS, JS, and data elements which are fetched dynamically. The example URL is a complete website within a single HTML document with no external dependencies and no further round-trip requests. It is a single-page site (SPS) or perhaps a multi-page file (MPF). https://john-doe.neocities.org/ You can open tha…

I've built React SPAs with inlined JS, CSS and SVGs in 2017, which is why I'm still entirely clueless what's special about this. BTW, the discussed page is not at all a single-page site; it makes separate network requests for CSS and PNG files.

The point of this demonstration is that single-file provisioning is specifically the point. And specifically, using only HTML and CSS.

The concept of an "SPA" refers to the appearance rather than provisioning of the app, and inherently relies on Javascript (or an equivalent scripting capability) to interactively rewrite the display. It's possible to single-file an SPA. The characteristic isn't central to the SPA concept, and in practice implementation is typically anything but.

SPAs are not accessible without Javascript, and don't render at all from a terminnal / console-mode browser. (Ask me how I know this...)

This is not an app. It's a website, or at least, multiple web pages, provisioned from a single HTML file.

Yes, this instance has several external references. I've noted CSS in an earlier comment, you mention image assets. The concept could be further optimised for portability by incorporating those inline.

Note that optimisations are also trade-offs. Inlined assets would mean duplication for a larger site. Which of those trade-offs are preferable or unwanted really depends on the specific goals.

But as a demonstration of an idea, this really is pretty elegant.

Re: Entire website in a single HTML file

#213

Post by outadoc »

npteljes wrote: post #199
mathnmusic wrote: post #159

Earlier quoted context omitted.

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?

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.

Re: Entire website in a single HTML file

#214

Post by dncornholio »

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.

The technology just isn't there yet.

Re: Entire website in a single HTML file

#215

Post by Flankk »

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.

The reason is that trolls like to post links to shock sites or a google search for something terrible. Even worse, you could get rickrolled.

Re: Entire website in a single HTML file

#216

Post by kreeben »

Flankk wrote: post #215
outadoc wrote: post #213

Earlier quoted context omitted.

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

The reason is that trolls like to post links to shock sites or a google search for something terrible. Even worse, you could get rickrolled.

Some day we will have native browser support for the full URL showing in the status field.

Re: Entire website in a single HTML file

#217

Post by selfishclouds »

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

The author of the site linked in the article suggests a couple of Markdown options for this on their blog page [1]. In this, they link a port of their website as a Jekyll theme [2].

1. https://john-doe.neocities.org/#blog

2. https://github.com/bradleytaunt/john-doe-jekyll

Re: Entire website in a single HTML file

#218

Post by kome »

gigel82 wrote: post #175
dredmorbius wrote: post #103

Earlier quoted context omitted.

SPAs display in a single HTML URL, but are themselves (typically) comprised of multiple elements, including many CSS, JS, and data elements which are fetched dynamically. The example URL is a complete website within a single HTML document with no external dependencies and no further round-trip requests. It is a single-page site (SPS) or perhaps a multi-page file (MPF). https://john-doe.neocities.org/ You can open tha…

I've built React SPAs with inlined JS, CSS and SVGs in 2017, which is why I'm still entirely clueless what's special about this. BTW, the discussed page is not at all a single-page site; it makes separate network requests for CSS and PNG files.

yeah, but you missed the point.

Re: Entire website in a single HTML file

#219

Post by ojr »

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

If you want to target multiple platforms (mobile, web, tv) with similar code that 10mb that high value users can load in two seconds with their latest iPhone is worth it
Post reply on HN