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

171–180 of 333 posts

Re: Entire website in a single HTML file

#171

Post by gjvnq »

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?

On my website, I ise margin notes for the desktop and "footnotes" for mobile, however said footnotes are displayed just below the paragraph in which they appear.

This avoids requiring both long scrolling and interactivity.

Re: Entire website in a single HTML file

#172

Post by gigel82 »

TrevorAustin wrote: post #10
gigel82 wrote: post #3

How is this news? React SPAs have been around for years, and SPAs existed long before React too.

Also, those SPAs are loading the React literary off of a CDN. It’s not inlined into the page.

I have definitely built React SPAs with inlined JS and CSS as far back as 5 years ago, it even inlined some SVGs for icons; it was literally a single HTML page (unlike the discussed page, BTW, which loads the CSS and the images with separate network requests).

Re: Entire website in a single HTML file

#173

Post by mathnmusic »

tyre wrote: post #167
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?

Good question. For my site, there are other options that I'd like to explore. Tooltips for smaller things (like definitions) maybe sidebar notes for large screen sizes, and inline notes (like show/hide inserting it between that line and the next) for mobile. I'll look into those.

I like how the site being discussed implements footnotes with a hidden checkbox followed by tag: https://john-doe.neocities.org/

Re: Entire website in a single HTML file

#174

Post by atq2119 »

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

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

Re: Entire website in a single HTML file

#175

Post by gigel82 »

dredmorbius wrote: post #103
gigel82 wrote: post #3

How is this news? React SPAs have been around for years, and SPAs existed long before React too.

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.

Re: Entire website in a single HTML file

#176

Post by onion2k »

wishinghand wrote: post #98
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’d want templating if I’m going to make more than two pages on a site.

HTML has that built in: https://developer.mozilla.org/en-US/docs/Web/Web_Components/...

You'd need some JS to make use of them though.

Re: Entire website in a single HTML file

#177

Post by mathnmusic »

johndough wrote: post #163
peeters wrote: post #150

Earlier quoted context omitted.

And now it's even less scalable to larger sites because you're forcing the eager loading of resources on pages you'll never click on.

Easy solution. Use progressive compression for images and set loading="lazy" https://developer.mozilla.org/en-US/docs/Web/Performance/Laz...

loading="lazy" is for images that are NOT embedded in the same file. So we either have entire site in a single HTML file or we have scalability for large stes. There's no solution that gives us both.

Re: Entire website in a single HTML file

#178

Post by benreesman »

I have no idea whether or not the lightness of websites measured in kB is going to drive a trend.

But there is definitely a trend that our collective cost models are downshifting from “ah fuck it’ll be faster by the time this ships” to “well right this minute we’re not zero-effort scaling on the backs of the deep-infrastructure people”.

Maybe this perspective is perverse, but I personally find it cool that there’s both money and hacker cred in counting bytes, even megabytes, after a long time of “well the hardware will be better in 6 months so why bother”.

Re: Entire website in a single HTML file

#180

Post by dmitriid »

adabaed wrote: post #156
CoryAlexMartin wrote: post #135

Earlier quoted context omitted.

Building a website without JS is not hard.

Depends of what a website is for you.

The same it is for everyone since the beginning of WWW: a static page with images. The web is uniquely unsuitable for anything else.
Post reply on HN