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

161–170 of 333 posts

Re: Entire website in a single HTML file

#161

Post by 6510 »

ngcc_hk wrote: post #143
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…

Can you filter some of the content based on say selected keywords? #physics on physics and … not sure even one can two keywords.

#physics:target #section-1, #physics:target #section-2{display:block}

then wrap the sections in

Re: Entire website in a single HTML file

#162

Post by rishav_sharan »

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. But only Vanillajs. I don't use any frameworks and bundlers for my SPAs. In fact right now I am working on a simple blog: http://rishav-sharan.com using just HTML, Vanilla js and Tailwindcss.

If anyone is interested in my approach, I have an article detailing things there, or you can just read through the source. Its un-minified and fairly readable.

Re: Entire website in a single HTML file

#163

Post by johndough »

peeters wrote: post #150
nuopnu wrote: post #147

Earlier quoted context omitted.

Just embed both CSS files and images in the HTML file.

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

Re: Entire website in a single HTML file

#164

Post by sandreas »

This is awesome, but a little JavaScript extension here and there is improving the user experience A LOT! If the website is growing, a site search is something I would personally recommend to have.

Still static though. I built my blog with hugo (static site generator) and it is hardly noticable, that it is completely static.

See https://pilabor.com/blog/2021/05/building-a-blog-with-hugo/ for details.

Re: Entire website in a single HTML file

#167

Post by tyre »

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?

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.

Re: Entire website in a single HTML file

#168

Post by john-doe »

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/

Re: Entire website in a single HTML file

#169

Post by rewgs »

judge2020 wrote: post #99
dredmorbius wrote: post #93

Earlier quoted context omitted.

Keep in mind that single integrated book formats are highly viable now. It's in the interest of publishers not to offer them, however. A chief example that comes to mind is the Feynman Lectures in Physics series, which are available online but only in a chapter-by-chapter basis in HTML format. (Quite beautifully formatted, FWIW.) If you want to glue those together into a single integrated whole, you'll have to do tha…

It makes sense from a DRM standpoint - PDFs and ePub are easy to crack if you offer it at all, so the only way to fix this is to go web-only and assume nobody will want to dig into turning that into a sharable PDF. Bonus points if you make it a SaaS test platform and get universities to buy into it, forcing every student to purchase the 'book' to receive grades.

> Bonus points if you make it a SaaS test platform and get universities to buy into it

Surely this exists already? It's good and obvious an idea to not be taken already.

Post reply on HN