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

291–300 of 333 posts

Re: Entire website in a single HTML file

#291

Post by pjmlp »

wyattpeak wrote: post #280
pjmlp wrote: post #273

Earlier quoted context omitted.

That is moving the goalposts, with DHTML or not, it can be a single HTML page.

I'm not moving the goalposts, my goalposts are exactly where they were in my first comment: The concept demonstrated in the article was not possible twenty years ago. In fact I was very specific about what concepts were not possible twenty years ago: "What's being shown off here is not having a single page of a website in just HTML/CSS, but having all pages." You're the one who proceeded to ignore that and make an un…

You can have all the pages with DHTML and using style ID/classes to select what is visible, nothing new about it, other than the artificial limitation of not using DHTML.

Re: Entire website in a single HTML file

#292

Post by vmception »

themodelplumber wrote: post #80
vmception wrote: post #72

Earlier quoted context omitted.

To be clear, yes. With the section tag. Sometimes I even add javascript to the style section without any object orientation. Stop the presses.

That's the thing, I think most designers were probably using javascript even if alongside tricks like this without thinking it through. The current period in web design is one of the biggest "it's nice to have javascript turned off" moments we've had, so it's relevant. If you already knew about this, the post seems like a joke, you've made millions off this for years now--that's really special, but that is also prett…

Yeah, mostly its that people overestimate how much (or what kind of) tech prowess they need to convey to close a deal or offer a service that people want to pay for

Re: Entire website in a single HTML file

#293

Post by authed »

pge wrote: post #275
authed wrote: post #261

Earlier quoted context omitted.

True, but even Google Maps could work without Javascript... It may not be as easy to use without it though.

I still remember the first time I used google maps. It was the first example I ever saw of what was then called AJAX, and it blew my mind. Without javascript, google maps would have been the same as mapquest (or any other mapping sites from that era): a full page refresh to move or zoom on the map. Javascript was the differentiator that made google maps the winner.

I'm not saying the experience is as good, but sometimes you need or want to browse without Javascript (at least some people).

Re: Entire website in a single HTML file

#294

Post by rmbyrro »

danlugo92 wrote: post #117
wishinghand wrote: post #98

Earlier quoted context omitted.

I’d want templating if I’m going to make more than two pages on a site.

You can run React (and everything else) off a CDN.

React runs in the browser. You probably mean serve the files off a CDN

Re: Entire website in a single HTML file

#295

Post by h0p3 »

romwell wrote: post #129

Well, TiddlyWiki[1] has been going it for 17(!) years. It's a very mature, polished, and extensible engine for wikis, blogs, and personal knwledge bases. The entire thing (including the editor!) is a single .html file. By default, even images are embedded. For my ADHD Wiki[2], a resource that talks about ADHD with a copious amounts of relatable memes intertwined with the text, I chose to just use images in the same d…

My TW: https://philosopher.life/

I've found having it all in a single html file tends to makes it easy to survive on a lot of different kinds of networks, and I like that the larger context of the site is automatically attached to any particular part of it (which is invaluable for my work). To my eyes, it's what a PDF dreams it could be.

Re: Entire website in a single HTML file

#296

Post by chrismorgan »

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?

I think endnotes are typically an awful idea, and the web can’t do footnotes. What you want is generally side notes. I think what I do on my website is a fairly good compromise for JavaScript-free operation, with a side column for notes on large enough screens, and the notes inlined on small screens. That wouldn’t be suitable for very long notes; such are often more suitable as appendixes, a variant on endnotes.

As for , you run into the problem that it’s a block-level element; it’s dubious using it as an inline-level element, though it’ll probably work well enough (I say probably due to uncertainty about screen readers) despite being nominally invalid, given that it’s not an element that will automatically close a paragraph tag like does.

I think links at the bottom is generally foolish, taking more effort for both reader and writer, and never do it that way, interspersing them in the text, usually surrounded by angle brackets as has historically been the way of delimiting URLs in plain text.

Re: Entire website in a single HTML file

#298

Post by TedShiller »

john-doe wrote: post #168
TedShiller wrote: post #166

Cool! CSS question: how does the page stop the browser from scrolling down to the #anchor? It remains at the top, which is great, but I wonder why?

At the time I used padding-top for each of the #elements, the header being absolutely positioned. More recently I discovered that you can just use `scroll-margin-top: 100vh`, as seen here: https://cadars.github.io/portable-php/

Interesting, thanks for the tip!
Post reply on HN