26 ms·

Entire website in a single HTML file

615 points by jaytaylor 5y ago

jaytaylor 5y ago
See also: https://stackoverflow.com/a/46503187 https://stackoverflow.com/a/46503187 https://news.ycombinator.com/item?id=29661935 https://news.ycombinator.com/item?id=29661935
- e12e 5y ago
  And the linked site garnered some discussion as a "show hn": "Show HN: A simple way to make HTML websites": https://news.ycombinator.com/item?id=25170078 https://news.ycombinator.com/item?id=25170078
gigel82 5y ago
How is this news? React SPAs have been around for years, and SPAs existed long before React too.
- jolmg 5y ago
  The difference compared to SPAs is that this doesn't use javascript.
- TrevorAustin 5y ago
  Also, those SPAs are loading the React literary off of a CDN. It’s not inlined into the page.
  - gigel82 5y ago
    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).
- Dma54rhs 5y ago
  This thing is fast unlike anything built as a spa nowadays that make your laptops fan spin so fast it wants to take off.
  - LAC-Tech 5y ago
    It's fully possible to build fast SPAs. Though almost no one is able to do it. Which is weird, as it's objectively easier than writing enterprise react crap.
- jcpst 5y ago
  No, not a SPA. There is a concept of a single file app (SFA). You can share an html file, and that is the application. It can have inlined micro js/css frameworks, or hand-rolled everything. An SFA should be human readable though- viewing the page source is useful. I think it’s a concept worth exploring.
  - xwdv 5y ago
    But what is the benefit?
    - est 5y ago
      less Co2 emissions
    - jcpst 5y ago
      Showing the capabilities of the web browser as an application target, directly. You have HTML, CSS, and JS available. No build tools required. Take this file and open it with a web browser. Then modify it, and refresh the browser. Distribution and Development for applications is about as straightforward and accessible as it gets.
      - xwdv 5y ago
        But what benefit is there for the end user?
        jcpst 5y ago
        Source code that is readable. Viewing the source on web pages in the 90s was how I learned to make my first web pages.
  - dredmorbius 5y ago
    I prefer the denotation of a single file site (SFS). Perhaps alternatively a multi-paged file (MPF), as there might still be multiple such pages on a site, or a site comprised of a mix of MPFs, SPAs, and traditional static single-page URLs.
- dredmorbius 5y ago
  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/ https://john-doe.neocities.org/ You can open that URL, disable networking, and browse the entire site to your heart's content in any browser supporting CSS. If you open the file in a terminal browser (lynx, w3m, elinks[2], etc.), you'll see the full site presented at once, as a single page, without needing to specifically navigate between them (you can scroll the full site). Though the intra-site navigation itself still works --- it just doesn't reveal or hide sections.
  - gigel82 5y ago
    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.
    - dredmorbius 5y ago
      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.
kgc 5y ago
Normal websites used to be one file way back in the day. It was a "pro tip" to split out the JS & CSS into a separate files.
- marcosdumay 5y ago
  Hum... You may be thinking about a page being a file. A site is a collection of those.
  - vmception 5y ago
    A site is a website is the thing behind a domain name. Many were, and are, a single file. Its the rest of ya'll that are overcomplicating things and somehow perverted that to thinking its necessary. How many layers of meta are we right now for this article to be interesting?
    - deleted 5y ago
      [deleted]
    - 1123581321 5y ago
      It’s probably your use of the word “normal” as it was more common for multi-page sites to either have a file per page or to use cgi.
    - petee 5y ago
      I thought it funny just how many of your respondents decided to charge the semantic hill, completely missing the point. But you know this doesn't use JS, right? (joking)
- COAGULOPATH 5y ago
  I remember when I made a website with frames and felt like a genius.
  - aspyct 5y ago
    Yes! Reusable menus, finally!
cranberryturkey 5y ago
sxp 5y ago
This is something I've always wanted for virtual textbooks. A single .html file with all the JS, CSS, images as inline data blobs, etc. For most physics, math, CS, etc books, this should be possible. It would make it trivial to download the book for offline use and share it with others. Other than the raster images, the entire content of these types of books would probably fit in a couple MB of text. The use of #anchors or other smart URL manipulation would also make it easy to share internal hyperlinks if you want to tell a friend to look at chapter/section #foo_bar of the book.
- andyp-kw 5y ago
  You're describing PDF files, but unfortunately Adobe didn't invest much time or money into making them interactive with a scripting language.
  - nextaccountic 5y ago
    PDF has a limitation: it defines page size and the layout of everything fixed to this page, and thus can't do responsive layout like HTML can (reorganizing stuff in the page to match the screen size)
    - mmh0000 5y ago
      I wouldn't call that a limitation. In fact that is one of the major selling points of the PDF format. The document looks as intended* by the creator on all platforms whether display or print media. * Yes, I know, PDF doesn't -always- do this, but a well designed PDF generally does.
      - Tagbert 5y ago
        True, but the rigid layout is what makes PDF unsuitable for some use cases. It’s main use is to represent a printed page of a very specific size. Anything outside that just requires too much flexibility.
      - vgel 5y ago
deleted 5y ago
[deleted]
tyingq 5y ago
Using url fragments seems to limit how well Google can index it. site:john-doe.neocities.org in a google search only finds the main page and dist page.
- andyp-kw 5y ago
  This is like a chicken and an egg problem. Google likely haven't designed their indexer to handle pages like this because not many people do it. Many people don't do it, because Google won't index it properly.
  - tyingq 5y ago
    I did find an old post from Google that suggests adding a ! after the #. https://developers.google.com/search/blog/2009/10/proposal-for-making-ajax-crawlable https://developers.google.com/search/blog/2009/10/proposal-f... No idea if that still works.
- tambourine_man 5y ago
  There’s only the main page, that’s the trick. Nothing else for Google to find.
  - tyingq 5y ago
    Given one of the sections is a blog, that seems sub optimal.
- jay_kyburz 5y ago
  I don't know why they hide stuff, just show the whole site as a single page you can scroll down.
  - dredmorbius 5y ago
    Information presentation has practical and usability aspects. Sometimes you want as much information as possible on a page. Sometimes you want one and only one portion presented. Which you choose depends very much on the application, user community, and objectives.
thotty 5y ago
Here's a tool that helps builds these by "compiling" all files into one html file https://github.com/sean7601/compileJS https://github.com/sean7601/compileJS
- johnhenry 5y ago
  Nice! Would be awesome if it could optionally pull in the images as base 64.
authed 5y ago
Most websites would rather host their files on 10 different domains nowadays (because the cloud)
heelix 5y ago
Haha. This reminds me of the dot com days. I was doing the front end as a mammoth servlet. The entire UI was more or less in one multi megabyte Java file. The architect of our group started add in changes - which, briefly, I kept my nose above water editing - but he knew I'd drowned. When I finally gave up he went over JSPs and the new fangled 'MVC' pattern and really worked through some UI patterns with me. It was very much a learning moment for me for design and maintenance.
Minor49er 5y ago
While cool, I think I prefer these older styled longform HTML pages that have links back to the main nav: http://moonmusiq.com/ http://moonmusiq.com/
ufo 5y ago
My gut instinct is that these CSS tricks may be bad for accessibility. Does anyone know how well a screen reader would deal with it?
- sharps_xp 5y ago
  i recently read that display:none elements are hidden from screen readers
  - ignoranceprior 5y ago
    I wonder whether, upon clicking the links, there is any indication about the change in visible content.
  - john-doe 5y ago
    They are. I recommend using `height:0` and `overflow: hidden` instead. Or the more advanced `.sr-only` class: https://kittygiraudel.com/snippets/sr-only-class/ https://kittygiraudel.com/snippets/sr-only-class/
- themodelplumber 5y ago
  I was just reading it in Links 2 and it is totally readable inline. It also gets a 100 from Google Lighthouse Mobile & Desktop Accessibility checks.
deleted 5y ago
[deleted]
cranberryturkey 5y ago
No way to update title without javascript.
darepublic 5y ago
The trick is kinda meh I feel. Yes you can make a pretty cool app in a single HTML file with some inline JavaScript to boot. Still possible today just ever more out of fashion
- themodelplumber 5y ago
  No JS here though, just CSS using :target. That's pretty cool if you don't want a JS dependency but want more control over interactivity and presentation.
  - bachmeier 5y ago
    Not to get too dramatic about this, but if you're that scared of any JS, why are you using the internet?
    - themodelplumber 5y ago
      You're making vague gestures about something that is a specific issue these days. JS delivers all kinds of straight up garbage, some of it meant to do very ugly things, it can be turned off, tada, I'm still on the internet. If people (like me) want to offer resources requiring none of that, why not encourage them, insofar as it makes the internet more efficient, a more helpful resource, and just way cooler in terms of chilling with all the crazy wasteful and annoying JS activity. It's valid, relevant, and worthwhile. There's really no need to talk about being scared, as if this is some issue that requires a good talking to from dad.
      - bachmeier 5y ago
        This is an unusually defensive response. There's a big gap between "all kinds of straight up garbage, some of it meant to do very ugly things" and the tiny amount of JS that would replace what this does. This doesn't even enable any interesting functionality. You could simply put multiple html files on the same web server rather than putting everything into one file. The visitor to the website would not know the difference (a point made in the linked article).
mdni007 5y ago
This looks like one of those sites I made as a kid. What is the significance of this?
- themodelplumber 5y ago
  Nobody else is really doing this, or was doing this. But you can't tell that it's different, that's what's neat about it. It works just like a multi-page site but there's not even any JS requirement.
  - iCarrot 5y ago
    A decade ago we have this niche vBulletin forum where members would self-publish news article regarding the hobby. vBulletin BBCode is pretty limited, but then the admin started to add more and more styling support via custom BBCode. At one point we were able to create "interactive" content entirely in our heavily customized BBCode without a single line of JS, and this #target is one of the more used tricks.
    - themodelplumber 5y ago
      That sounds like a pretty cool BBCode hack (and ultra-permissive by the admin considering...admins), I'd like to see it in action in 10-years-ago form.
      - thrashh 5y ago
        I did a similar thing on my forum around 2005 but we even let members put CSS in their posts via BBCode… although it was rewritten, scoped and restricted. But people made big “clubs” and then created these really cool semi-interactive posts using just CSS. It was really awesome what people can do.
  - vmception 5y ago
    Been doing this for over half a decade off of a template I boosted 8 years ago and have been modifying since. Has made tens of millions in revenue. Just assumed every developer or template seller in south asia was using this - or their clients. Probably more common than you think.
keyle 5y ago
Anyone here absolutely godsmacked that this is the top news on HN? The hell happened? Did I get cryogenically frozen and just woke up?
- deleted 5y ago
  [deleted]
- jkcxn 5y ago
  Software development sure has come a long way, now we can change what the screen shows when you click a button!
- vmception 5y ago
  We are getting trolled so hard. Some people are really in awe over this. Including the blogger.
- butwhywhyoh 5y ago
  I had the same reaction. It would be like telling someone who has been using an IDE: did you know you can compile your code from the command line? And having that person genuinely be blown away.
  - test1235 5y ago
    would it blow your mind to know that the vast majority of .net devs I've ever worked with don't know anything about compiling or running a project/solution other than hitting that big green 'play' button in visual studio?
  - jolmg 5y ago
    https://xkcd.com/1053/ https://xkcd.com/1053/
    - foxrob92 5y ago
      Except instead of being something cool like "diet coke and mentos" this is something basic that webdevs should be familiar with.
kylecazar 5y ago
Man, I'm old.
- vmception 5y ago
  right? everyone is fawning over this basic html as if its this amazing trick, the foreshadowing was the people pointing out how progressive web apps aren't necessary for most use cases, but now I really see I can't trust anybody's opinion here because this is normie levels of perception at this point.
avsteele 5y ago
One of the comments mentions a notable problem: Safari does not support 'Lazy' loading of images so every one they will be downloaded even if they are not seen.
- akersten 5y ago
  Sounds like a safari problem to me (:
- dawnerd 5y ago
  While safari doesn’t support lazy it didn’t download the images until I clicked the link that had the images. Not sure exactly why, just weird.
deleted 5y ago
[deleted]
srvmshr 5y ago
I may be missing the point here (so please correct me if I am), but 'anchor' has been around for ages. I have seen several tutorial sites which use such elements to typically add a Hint to some discussion. Is there something novel have I missed?
thinker5555 5y ago
This reminds me a bit of TiddlyWiki, minus the whole "you can edit the file using the file itself" part. https://tiddlywiki.com https://tiddlywiki.com
50 5y ago
See also https://portable.fyi/ https://portable.fyi/ built with portable-php[1][2], "a single HTML document from a collection of Markdown files." 1. https://github.com/cadars/portable-php https://github.com/cadars/portable-php 2. https://news.ycombinator.com/item?id=25770516 https://news.ycombinator.com/item?id=25770516
tyre 5y ago
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 deploys and page loads. Single KBs (with brotli compression) for long blog posts. Just `scp` and Nginx keeps serving. I can't think of anything else I want. And when I think of it, I can probably build it on top. [0]: https://maddo.xxx https://maddo.xxx [1]: https://maddo.xxx/thoughts/an-introduction-to-product-strategy-expansion/part-0-an-introduction.html#why-zenpayroll https://maddo.xxx/thoughts/an-introduction-to-product-strate...
- eatYourFood 5y ago
  Did you manage to sell Romulus to any gov customers? I built and sold a similar solution on top of SAP Hybris which we sold to several government departments around the world. It’s a very hard sell even with the worlds largest software sales organisation behind you.
  - tyre 5y ago
    We did, yes. The start was in political offices, which need CRMs and are motivated to move or they're fired. Constituent service satisfaction is one of the top indicators of being re-elected. Moving into permanent government departments is more of a pain but we did see some success there. Ultimately, though, the trough between early-adopters and getting mainstream is dishearteningly deep and there aren't enough ealry-adopters to build momentum. Not for us anyway.
- culi 5y ago
  > HTML and CSS alone are really powerful https://html.energy/ https://html.energy/
  - phist_mcgee 5y ago
    > Written in pure, raw HTML. Can you feel the energy? Has several CSS files (one 2.5 Kb) and a 13Kb minified js file (https://www.statcounter.com/counter/counter.js https://www.statcounter.com/counter/counter.js) that does... something related to user tracking. I don't get it.
avidphantasm 5y ago
Is this a joke? Why is this a revelation?
- poyu 5y ago
  Lol I know right?!
- dredmorbius 5y ago
  https://news.ycombinator.com/item?id=29670168 https://news.ycombinator.com/item?id=29670168
- deleted 5y ago
  [deleted]
dredmorbius 5y ago
This reminds me strongly of the Info file format (itself generated from a TexInfo source file), in which an entire multi-page document is presented in a single file. See: https://www.gnu.org/software/texinfo/manual/texinfo/html_node/Short-Sample-Texinfo-File.html https://www.gnu.org/software/texinfo/manual/texinfo/html_nod... The difference is that Info requires a dedicates reader (the info or pinfo command-line utilities, or of course, Emacs), whilst this format will work with any graphical Web client. It doesn't quite work as planned with a terminal-based browser. I've opened https://css-tricks.com/a-whole-website-in-a-single-html-file/ https://css-tricks.com/a-whole-website-in-a-single-html-file... with w3m, and rather than seeing only one of the intended "pages" at a time, the entire "site" is presented. That said, degredation is graceful, and navigation works. I'm quite impressed.
arnaudsm 5y ago
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 https://github.com/arnaudsm/raito
- smolder 5y ago
  The difference is they don't use javascript, a point many commenters apparently missed. This is similar how you can make drop-down header menus in css only - no javascript. Implementing css dropdown menus was one of my first big web dev tasks, since many users still had computers that slowed to a crawl when javascript and dom manipulation were involved.
  - arnaudsm 5y ago
    I agree, I just went one step further to ease content management.
- bkeating 5y ago
  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 https://github.com/bkeating/nakedNV
__alias 5y ago
Why the fuck is this top of HN. I'm picturing way to many people viewing this today and thinking "Wow! Websites can be made without React? I will upvote!" Are we at a point where university Web101 classes just jump straight into SPAs?
- PpEY4fu85hkQpn 5y ago
  Yes. There are a lot of devs that don't understand the fundamentals of how the web works. The trending topic on front-end twitter last week was if you should even bother learning CSS or is only knowing Tailwind fine. It's madness.
samstave 5y ago
test
- samstave 5y ago
  WTF - Why cant I reply to comments..
  - samstave 5y ago
    Weird - the REPLY was missing fora time. disregard
  - dredmorbius 5y ago
    As thread depth increases, the "reply" link is delayed for an increasing time. This is one of HN's behavioural hacks at cooling off flamewars. You can click on a comment directly to reply to it immediately. Use this knowledge with care.
choward 5y ago
The inline example didn't even work for me. Highlights multiple sections. And the href for section-2 is wrong.
romwell 5y ago
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 directory instead of embedding them; so you might need to do some work to download that page (I think File -> Save as.. can give you a readable static version on some browsers). Anyway, somewhat surprising that people are stumbling into how much you can do with just one well-crafted .html file. Look ma, no node.js, no (no)SQL database, no nothing except for one file for one website (and that file isn't even that large, given what TiddlyWiki allows you to do). TiddlyWiki can be run on node.js, but I don't see much reason to. If I want to make changes, I use the built-in editor, and then the "Save..." button generates me the .html of the updated version. Save it over the old one, upload over ftp, done. No deployment process to speak of. And, at that, the feature set rivals (and, at times, exceeds) that of, say, Wikipedia. (And for math nerds: it supports LaTeX via a KaTeX plugin. Maybe you can't copy-paste your entire thesis, but it's pretty damn close to real-time full-featured LaTeX). [1]https://tiddlywiki.com/ https://tiddlywiki.com/ [2]https://romankogan.net/adhd https://romankogan.net/adhd
- arendtio 5y ago
  Yes, TiddlyWiki is great, but isn't it full of JS? I mean, the somewhat special thing here, is that the page is built without JS.
  - romwell 5y ago
    And why does it matter? The author seems to be fascinated by the concept of single-HTML website which uses anchor links for internal navigation to reveal or hide content instantly without page reload. That's exactly what TiddlyWiki does. If you are JS-averse, you can generate a static HTML version of the wiki as well without JS in it [1]. It doesn't use CSS tricks though to show/hide parts. [1] https://tiddlywiki.com/static/Generating%2520Static%2520Sites%2520with%2520TiddlyWiki.html https://tiddlywiki.com/static/Generating%2520Static%2520Site...
adregan 5y ago
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/ https://css-tricks.com/video-screencasts/84-site-walkthrough...
- baobabKoodaa 5y ago
  Using jquery to hide and show sections is... not like OP at all. The whole point in OP is doing this without JS.
  - adregan 5y ago
    The code layout is so similar that these techniques are surely cousins (same ugly url and all). The only difference is the :target trick. Further, the no-js portion isn’t even the main idea. “Entire website in a single file” is.
    - baobabKoodaa 5y ago
      No, that's not the main idea, in fact it's not even an accurate description - the entire website is not in a single file. The website loads one HTML file, one CSS file and several image files. The whole point here is you can do instant navigation to multiple pages that are contained within a single file without using JavaScript.
anderspitman 5y ago
This is in the same vein as the "checkbox hack". It's a great rabbit hole to go down. It's fun to try and figure out how to accomplish normal UI functions with no JS and no page reloads. My personal favorite was making a popup Confirm/Cancel dialog where you could still see your content behind it. Cancel made it disappear; Confirm triggered a CSS url() call for the action. Here's a todo app with no javascript (not my work: https://www.mattzeunert.com/2017/10/30/javascript-free-todo-app.html https://www.mattzeunert.com/2017/10/30/javascript-free-todo-...
slmjkdbtl 5y ago
The only me stopping me is component, sometimes you just need to reuse certain HTML structure. Currently I'm using custom script to generate HTML from hyperscript-like syntax, it'll probably be better than any native API that enables component, but still wish to see one.
lazyjeff 5y ago
Since this hijacks the target anchor, is there a way to still scroll to a part of a page within the section? I think text fragments would work (https://wicg.github.io/scroll-to-text-fragment/#indicating-the-text-match https://wicg.github.io/scroll-to-text-fragment/#indicating-t...), but they're only supported in Chrome. Update: maybe element.scrollIntoView()? I'll investigate sometime later
peeters 5y ago
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 search engines - And no, you don't need this to avoid Javascript navigation (just use multiple HTML files)
- nuopnu 5y ago
  Just embed both CSS files and images in the HTML file.
  - peeters 5y ago
    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.
    - johndough 5y ago
      Easy solution. Use progressive compression for images and set loading="lazy" https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#images_and_iframes https://developer.mozilla.org/en-US/docs/Web/Performance/Laz...
      - mathnmusic 5y ago
        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.
        johndough 5y ago
        It depends on what your goal is. If you just want to make a single request to the web server, than loading="lazy" will not work as you said. (Technically speaking, TCP is sending multiple packages anyway resulting in higher latency, so not sure if that is a great goal.) But if you just want to be able to save the entire website with Ctrl + S, then it works fine. As an aside, loading="lazy" is the way in which images are embedded in the website from TFA https://i.imgur.com/wIkaE5g.png https://i.imgur.com/wIkaE5g.png which was the reason why I mentioned it, although it certainly does not fit all possible use cases.
deleted 5y ago
[deleted]
jzellis 5y ago
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
- wyattpeak 5y ago
  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.
  - togaen 5y ago
    They shouldn't be surprised, though. That's the point. The whole web dev community seems to have forgotten about the foundational web standards.
    - wyattpeak 5y ago
      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.
      - r_hoods_ghost 5y ago
        CSS 3 was released in 1999 and the :target pseudo class is in the spec. So not exactly new... [1] https://www.w3.org/TR/1999/WD-CSS3-selectors-19990803#target-pseudo https://www.w3.org/TR/1999/WD-CSS3-selectors-19990803#target...
- ojr 5y ago
  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
swyx 5y ago
TIL about the :target pseudoselector. I've actually written JS to implement this functionality because i didnt know about it. embarrassed.
- aspyct 5y ago
  Uhm... you're not alone :s
- foreigner 5y ago
  Same here
bern4444 5y ago
While it's not a single HTML file, the framework Remix has been wonderful to work with and makes building complex websites and web apps without any client side JS exceptionally easy.
TeeMassive 5y ago
As a semi-related subject, I like to use the SingleFile extension to save pages as one static HTML file for archiving purposes. Got a ton of saved pages and articles from HN in my dropbox that I can read where I want later without worrying about dead links, ghost edits and other live annoying things.
rishav_sharan 5y ago
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 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.
- atq2119 5y ago
  There are plenty of non-JS converters from Markdown to HTML and static websites are a thing.
  - rishav_sharan 5y ago
    It is a static site. Only that I decided to hand roll my own implementation instead of using something like Jekyll. And as it doesn't have any server for the markdown (they are just CDN files), I have to use JS to do the translation to HTML.
    - xigoi 5y ago
      Why not render them on your own computer after you write them?
      - rishav_sharan 5y ago
        Simple and efficient. I can maybe setup a build step for the markdown. Thanks for the suggestion. Can't believe it never crossed my mind
- selfishclouds 5y ago
  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 https://john-doe.neocities.org/#blog 2. https://github.com/bradleytaunt/john-doe-jekyll https://github.com/bradleytaunt/john-doe-jekyll
sandreas 5y ago
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/ https://pilabor.com/blog/2021/05/building-a-blog-with-hugo/ for details.
vnorilo 5y ago
I used a similar trick to write my resume site [1] with a "spatial" transition effect inside a single html file with no javascript. It's a bit of a weird flex but was fun to do. 1: https://norilo.me/ https://norilo.me/
TedShiller 5y ago
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?
- john-doe 5y ago
  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/ https://cadars.github.io/portable-php/
  - TedShiller 5y ago
    Interesting, thanks for the tip!
animesh 5y ago
I did a similar thing on my mini WIP portfolio site @ https://anmsh.net/ https://anmsh.net/
benreesman 5y ago
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”.
- quickthrower2 5y ago
  Ive never come across that attitude about 6 months later but definitely “works on my $2k machine so ship” which is probably equivalent.
GrumpyNl 5y ago
Back to old school.
leoncvlt 5y ago
Love this! Some time ago I created a tool to make similar one-page sites by parsing a markdown file: https://leoncvlt.github.io/imml/ https://leoncvlt.github.io/imml/ It's also available as a library / on the command line: https://github.com/leoncvlt/imml https://github.com/leoncvlt/imml
07504150950 5y ago
bncy 5y ago
On one hand I'm excited about the future and I want to build apps for humans in spaceships, but on the other I'm very disappointed with how hard it is to get to the actual piece of information you're looking for on some of the websites filled with all this fancy stuff. Sites like this one the other hand, just don't waste my time and I like this idea of simplicity. I wish we could have that everywhere, so we can be more user friendly all around.
taubek 5y ago
The site looks really nice but with todays total lack of optimization when it comes to size and code quality I don't see that this would become a trend.
stevage 5y ago
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.
- arghwhat 5y ago
  A CSS file is unnecessary, and you could skip the images or embed them.
  - k__ 5y ago
    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.
- chrisjc 5y ago
  It's not, but with a little more imagination you could certainly take the author's work to the next level. Inline CSS and images as blobs. Then in practice the issue becomes a bloated file that isn't able to reuse internal components, at least not without introducing a layer of complexity such as a scripting language and browser APIs to go with it. Perhaps if HTML had been designed with more component re-usability in mind, the landscape of the internet would look very different today. Then again, what sense would there be in having a single HTML file for a site like Wikipedia or Altavista? And imagining the web evolving without a scripting language would be naive. Single file websites that could be served up on blob or network storage certainly appeal to me, especially today.
  - southerntofu 5y ago
    Sounds like content-addressing would address (pun intended) your needs. I mean it's quite possible to build a IPFS/Bittorrent/DAT-based browser. I'd be interested in such a modern p2p-friendly browser minus the gigantic JS crap and attack surface.
    - 5y ago
rpastuszak 5y ago
How about an entire website (HTML, CSS, JS + assets) in a single tweet? https://twitter.com/rafalpast/status/1316836397903474688?s=20 https://twitter.com/rafalpast/status/1316836397903474688?s=2...
pkrumins 5y ago
Single, self-contained HTML files are my passion. I created a self-contained version of my comic https://comic.browserling.com/browserling-comic.html https://comic.browserling.com/browserling-comic.html. All comics in one file, no external dependencies or anything.
akeck 5y ago
You can also inline images by putting base64 in img tags. Pandoc creates nice single file websites with flags to inline both CSS and images.
pjmlp 5y ago
It is kind of ironic that 20 years later this needs to be re-discovered.
- wyattpeak 5y ago
  This was absolutely not possible 20 years ago. The only pseudoclasses available at that point were the anchor pseudoclasses and :first-line/:first-letter.[1] What's being shown off here is not having a single page of a website in just HTML/CSS, but having all pages. [1] https://www.w3.org/TR/REC-CSS1/#pseudo-classes-and-pseudo-elements https://www.w3.org/TR/REC-CSS1/#pseudo-classes-and-pseudo-el...
  - pjmlp 5y ago
    Having an entire Website in a single HTML page was definitely possible.
    - wyattpeak 5y ago
      Not if you wanted multiple pages without Javascript it wasn't. Which is what's interesting about the site being described, although the article does a weak job explaining it.
      - pjmlp 5y ago
        That is moving the goalposts, with DHTML or not, it can be a single HTML page.
        wyattpeak 5y ago
        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 unrelated claim about something different that was possible twenty years ago.
globular-toast 5y ago
Not so good with the stylesheet disabled. It's better to have separate pages and still doesn't require any buildshit.
bradley_taunt 5y ago
For those interested, I’ve created a Jekyll theme based on this very setup[0] I also created a forked SSG based off of https://portable.fyi/ https://portable.fyi/ [1] 0: https://github.com/bradleytaunt/john-doe-jekyll https://github.com/bradleytaunt/john-doe-jekyll 1: https://phpetite.org https://phpetite.org
JoeyBananas 5y ago
This is a cursed way to structure a plaintext html website
laszlokorte 5y ago
I built a mobile web app for a conference that way [1], workes really well and is way more performant on older mobile devices than the previous version that was built in react. [1]: https://app.ishl.eu/2018 https://app.ishl.eu/2018
perlgeek 5y ago
I love the idea, but wouldn't use it for bigger pages, because it means you cannot link to individual sections within one page, because then :target doesn't apply to the top-level <section> anymore, right?
disadvantage 5y ago
I sometimes convert pages to a single HTML file with SingleFile[0] which encapsulates all external assets into a single page. I have a small collection of pages which I can browse offline, and also have them for posterity incase they suffer from link rot. [0] https://addons.mozilla.org/en-US/firefox/addon/single-file/ https://addons.mozilla.org/en-US/firefox/addon/single-file/
chkaloon 5y ago
There's a bug in it. Section 2 doesn't work (missing dash)
feeela 5y ago
That reminds me of the old WAP pages with their distinct cards. https://en.m.wikipedia.org/wiki/Wireless_Application_Protocol https://en.m.wikipedia.org/wiki/Wireless_Application_Protoco...
JohannesEckert 5y ago
A lot mentioned already - I put up an blog-article done in HTML/CSS and the Icons/Font using URI just some days ago (german) [1]. I has 77kB total and can be downloaded in a single file, preserving the layout and font (FreeSans). As it talks about the very unknown relationship how the proposed end of lignite-mining in eastern region Lusatia (2030-2038) affects freshwater-production in Berlin (end of groundwater pumping in Spree-river), reminded me (as Hacker News is located in California) of recent article "The Warning Shot the US Is Ignoring: Climate Change Impacts on California Central Valley" in CleanTechnica, I thought to share it. [1] http://futureasapresent.org/trinkwasser.html http://futureasapresent.org/trinkwasser.html [2] https://cleantechnica.com/2021/12/18/climate-change-impacts-on-california-central-valley-warning-shot/ https://cleantechnica.com/2021/12/18/climate-change-impacts-...
pikalinka 5y ago

615 points by jaytaylor 5y ago

See also: https://stackoverflow.com/a/46503187 https://stackoverflow.com/a/46503187 https://news.ycombinator.com/item?id=29661935 https://news.ycombinator.com/item?id=29661935

e12e 5y ago
And the linked site garnered some discussion as a "show hn": "Show HN: A simple way to make HTML websites": https://news.ycombinator.com/item?id=25170078 https://news.ycombinator.com/item?id=25170078

gigel82 5y ago

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

jolmg 5y ago
The difference compared to SPAs is that this doesn't use javascript.
TrevorAustin 5y ago
Also, those SPAs are loading the React literary off of a CDN. It’s not inlined into the page.
- gigel82 5y ago
  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).
Dma54rhs 5y ago
This thing is fast unlike anything built as a spa nowadays that make your laptops fan spin so fast it wants to take off.
- LAC-Tech 5y ago
  It's fully possible to build fast SPAs. Though almost no one is able to do it. Which is weird, as it's objectively easier than writing enterprise react crap.
jcpst 5y ago
No, not a SPA. There is a concept of a single file app (SFA). You can share an html file, and that is the application. It can have inlined micro js/css frameworks, or hand-rolled everything. An SFA should be human readable though- viewing the page source is useful. I think it’s a concept worth exploring.
- xwdv 5y ago
  But what is the benefit?
  - est 5y ago
    less Co2 emissions
  - jcpst 5y ago
    Showing the capabilities of the web browser as an application target, directly. You have HTML, CSS, and JS available. No build tools required. Take this file and open it with a web browser. Then modify it, and refresh the browser. Distribution and Development for applications is about as straightforward and accessible as it gets.
    - xwdv 5y ago
      But what benefit is there for the end user?
      - jcpst 5y ago
        Source code that is readable. Viewing the source on web pages in the 90s was how I learned to make my first web pages.
- dredmorbius 5y ago
  I prefer the denotation of a single file site (SFS). Perhaps alternatively a multi-paged file (MPF), as there might still be multiple such pages on a site, or a site comprised of a mix of MPFs, SPAs, and traditional static single-page URLs.
dredmorbius 5y ago
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/ https://john-doe.neocities.org/ You can open that URL, disable networking, and browse the entire site to your heart's content in any browser supporting CSS. If you open the file in a terminal browser (lynx, w3m, elinks[2], etc.), you'll see the full site presented at once, as a single page, without needing to specifically navigate between them (you can scroll the full site). Though the intra-site navigation itself still works --- it just doesn't reveal or hide sections.
- gigel82 5y ago
  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.
  - dredmorbius 5y ago
    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.

kgc 5y ago

Normal websites used to be one file way back in the day. It was a "pro tip" to split out the JS & CSS into a separate files.

marcosdumay 5y ago
Hum... You may be thinking about a page being a file. A site is a collection of those.
- vmception 5y ago
  A site is a website is the thing behind a domain name. Many were, and are, a single file. Its the rest of ya'll that are overcomplicating things and somehow perverted that to thinking its necessary. How many layers of meta are we right now for this article to be interesting?
  - deleted 5y ago
    [deleted]
  - 1123581321 5y ago
    It’s probably your use of the word “normal” as it was more common for multi-page sites to either have a file per page or to use cgi.
  - petee 5y ago
    I thought it funny just how many of your respondents decided to charge the semantic hill, completely missing the point. But you know this doesn't use JS, right? (joking)
COAGULOPATH 5y ago
I remember when I made a website with frames and felt like a genius.
- aspyct 5y ago
  Yes! Reusable menus, finally!

cranberryturkey 5y ago

sxp 5y ago

This is something I've always wanted for virtual textbooks. A single .html file with all the JS, CSS, images as inline data blobs, etc. For most physics, math, CS, etc books, this should be possible. It would make it trivial to download the book for offline use and share it with others. Other than the raster images, the entire content of these types of books would probably fit in a couple MB of text. The use of #anchors or other smart URL manipulation would also make it easy to share internal hyperlinks if you want to tell a friend to look at chapter/section #foo_bar of the book.

andyp-kw 5y ago
You're describing PDF files, but unfortunately Adobe didn't invest much time or money into making them interactive with a scripting language.
- nextaccountic 5y ago
  PDF has a limitation: it defines page size and the layout of everything fixed to this page, and thus can't do responsive layout like HTML can (reorganizing stuff in the page to match the screen size)
  - mmh0000 5y ago
    I wouldn't call that a limitation. In fact that is one of the major selling points of the PDF format. The document looks as intended* by the creator on all platforms whether display or print media. * Yes, I know, PDF doesn't -always- do this, but a well designed PDF generally does.
    - Tagbert 5y ago
      True, but the rigid layout is what makes PDF unsuitable for some use cases. It’s main use is to represent a printed page of a very specific size. Anything outside that just requires too much flexibility.
    - vgel 5y ago

deleted 5y ago

[deleted]

tyingq 5y ago

Using url fragments seems to limit how well Google can index it. site:john-doe.neocities.org in a google search only finds the main page and dist page.

andyp-kw 5y ago
This is like a chicken and an egg problem. Google likely haven't designed their indexer to handle pages like this because not many people do it. Many people don't do it, because Google won't index it properly.
- tyingq 5y ago
  I did find an old post from Google that suggests adding a ! after the #. https://developers.google.com/search/blog/2009/10/proposal-for-making-ajax-crawlable https://developers.google.com/search/blog/2009/10/proposal-f... No idea if that still works.
tambourine_man 5y ago
There’s only the main page, that’s the trick. Nothing else for Google to find.
- tyingq 5y ago
  Given one of the sections is a blog, that seems sub optimal.
jay_kyburz 5y ago
I don't know why they hide stuff, just show the whole site as a single page you can scroll down.
- dredmorbius 5y ago
  Information presentation has practical and usability aspects. Sometimes you want as much information as possible on a page. Sometimes you want one and only one portion presented. Which you choose depends very much on the application, user community, and objectives.

thotty 5y ago

Here's a tool that helps builds these by "compiling" all files into one html file https://github.com/sean7601/compileJS https://github.com/sean7601/compileJS

johnhenry 5y ago
Nice! Would be awesome if it could optionally pull in the images as base 64.

authed 5y ago

Most websites would rather host their files on 10 different domains nowadays (because the cloud)

heelix 5y ago

Haha. This reminds me of the dot com days. I was doing the front end as a mammoth servlet. The entire UI was more or less in one multi megabyte Java file. The architect of our group started add in changes - which, briefly, I kept my nose above water editing - but he knew I'd drowned. When I finally gave up he went over JSPs and the new fangled 'MVC' pattern and really worked through some UI patterns with me. It was very much a learning moment for me for design and maintenance.

Minor49er 5y ago

While cool, I think I prefer these older styled longform HTML pages that have links back to the main nav: http://moonmusiq.com/ http://moonmusiq.com/

ufo 5y ago

My gut instinct is that these CSS tricks may be bad for accessibility. Does anyone know how well a screen reader would deal with it?

sharps_xp 5y ago
i recently read that display:none elements are hidden from screen readers
- ignoranceprior 5y ago
  I wonder whether, upon clicking the links, there is any indication about the change in visible content.
- john-doe 5y ago
  They are. I recommend using `height:0` and `overflow: hidden` instead. Or the more advanced `.sr-only` class: https://kittygiraudel.com/snippets/sr-only-class/ https://kittygiraudel.com/snippets/sr-only-class/
themodelplumber 5y ago
I was just reading it in Links 2 and it is totally readable inline. It also gets a 100 from Google Lighthouse Mobile & Desktop Accessibility checks.

deleted 5y ago

[deleted]

cranberryturkey 5y ago

No way to update title without javascript.

darepublic 5y ago

The trick is kinda meh I feel. Yes you can make a pretty cool app in a single HTML file with some inline JavaScript to boot. Still possible today just ever more out of fashion

themodelplumber 5y ago
No JS here though, just CSS using :target. That's pretty cool if you don't want a JS dependency but want more control over interactivity and presentation.
- bachmeier 5y ago
  Not to get too dramatic about this, but if you're that scared of any JS, why are you using the internet?
  - themodelplumber 5y ago
    You're making vague gestures about something that is a specific issue these days. JS delivers all kinds of straight up garbage, some of it meant to do very ugly things, it can be turned off, tada, I'm still on the internet. If people (like me) want to offer resources requiring none of that, why not encourage them, insofar as it makes the internet more efficient, a more helpful resource, and just way cooler in terms of chilling with all the crazy wasteful and annoying JS activity. It's valid, relevant, and worthwhile. There's really no need to talk about being scared, as if this is some issue that requires a good talking to from dad.
    - bachmeier 5y ago
      This is an unusually defensive response. There's a big gap between "all kinds of straight up garbage, some of it meant to do very ugly things" and the tiny amount of JS that would replace what this does. This doesn't even enable any interesting functionality. You could simply put multiple html files on the same web server rather than putting everything into one file. The visitor to the website would not know the difference (a point made in the linked article).

mdni007 5y ago

This looks like one of those sites I made as a kid. What is the significance of this?

themodelplumber 5y ago
Nobody else is really doing this, or was doing this. But you can't tell that it's different, that's what's neat about it. It works just like a multi-page site but there's not even any JS requirement.
- iCarrot 5y ago
  A decade ago we have this niche vBulletin forum where members would self-publish news article regarding the hobby. vBulletin BBCode is pretty limited, but then the admin started to add more and more styling support via custom BBCode. At one point we were able to create "interactive" content entirely in our heavily customized BBCode without a single line of JS, and this #target is one of the more used tricks.
  - themodelplumber 5y ago
    That sounds like a pretty cool BBCode hack (and ultra-permissive by the admin considering...admins), I'd like to see it in action in 10-years-ago form.
    - thrashh 5y ago
      I did a similar thing on my forum around 2005 but we even let members put CSS in their posts via BBCode… although it was rewritten, scoped and restricted. But people made big “clubs” and then created these really cool semi-interactive posts using just CSS. It was really awesome what people can do.
- vmception 5y ago
  Been doing this for over half a decade off of a template I boosted 8 years ago and have been modifying since. Has made tens of millions in revenue. Just assumed every developer or template seller in south asia was using this - or their clients. Probably more common than you think.

keyle 5y ago

Anyone here absolutely godsmacked that this is the top news on HN? The hell happened? Did I get cryogenically frozen and just woke up?

deleted 5y ago
[deleted]
jkcxn 5y ago
Software development sure has come a long way, now we can change what the screen shows when you click a button!
vmception 5y ago
We are getting trolled so hard. Some people are really in awe over this. Including the blogger.
butwhywhyoh 5y ago
I had the same reaction. It would be like telling someone who has been using an IDE: did you know you can compile your code from the command line? And having that person genuinely be blown away.
- test1235 5y ago
  would it blow your mind to know that the vast majority of .net devs I've ever worked with don't know anything about compiling or running a project/solution other than hitting that big green 'play' button in visual studio?
- jolmg 5y ago
  https://xkcd.com/1053/ https://xkcd.com/1053/
  - foxrob92 5y ago
    Except instead of being something cool like "diet coke and mentos" this is something basic that webdevs should be familiar with.

kylecazar 5y ago

Man, I'm old.

vmception 5y ago
right? everyone is fawning over this basic html as if its this amazing trick, the foreshadowing was the people pointing out how progressive web apps aren't necessary for most use cases, but now I really see I can't trust anybody's opinion here because this is normie levels of perception at this point.

avsteele 5y ago

One of the comments mentions a notable problem: Safari does not support 'Lazy' loading of images so every one they will be downloaded even if they are not seen.

akersten 5y ago
Sounds like a safari problem to me (:
dawnerd 5y ago
While safari doesn’t support lazy it didn’t download the images until I clicked the link that had the images. Not sure exactly why, just weird.

deleted 5y ago

[deleted]

srvmshr 5y ago

I may be missing the point here (so please correct me if I am), but 'anchor' has been around for ages. I have seen several tutorial sites which use such elements to typically add a Hint to some discussion. Is there something novel have I missed?

thinker5555 5y ago

This reminds me a bit of TiddlyWiki, minus the whole "you can edit the file using the file itself" part. https://tiddlywiki.com https://tiddlywiki.com

50 5y ago

See also https://portable.fyi/ https://portable.fyi/ built with portable-php[1][2], "a single HTML document from a collection of Markdown files." 1. https://github.com/cadars/portable-php https://github.com/cadars/portable-php 2. https://news.ycombinator.com/item?id=25770516 https://news.ycombinator.com/item?id=25770516

tyre 5y ago

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 deploys and page loads. Single KBs (with brotli compression) for long blog posts. Just `scp` and Nginx keeps serving. I can't think of anything else I want. And when I think of it, I can probably build it on top. [0]: https://maddo.xxx https://maddo.xxx [1]: https://maddo.xxx/thoughts/an-introduction-to-product-strategy-expansion/part-0-an-introduction.html#why-zenpayroll https://maddo.xxx/thoughts/an-introduction-to-product-strate...

eatYourFood 5y ago
Did you manage to sell Romulus to any gov customers? I built and sold a similar solution on top of SAP Hybris which we sold to several government departments around the world. It’s a very hard sell even with the worlds largest software sales organisation behind you.
- tyre 5y ago
  We did, yes. The start was in political offices, which need CRMs and are motivated to move or they're fired. Constituent service satisfaction is one of the top indicators of being re-elected. Moving into permanent government departments is more of a pain but we did see some success there. Ultimately, though, the trough between early-adopters and getting mainstream is dishearteningly deep and there aren't enough ealry-adopters to build momentum. Not for us anyway.
culi 5y ago
> HTML and CSS alone are really powerful https://html.energy/ https://html.energy/
- phist_mcgee 5y ago
  > Written in pure, raw HTML. Can you feel the energy? Has several CSS files (one 2.5 Kb) and a 13Kb minified js file (https://www.statcounter.com/counter/counter.js https://www.statcounter.com/counter/counter.js) that does... something related to user tracking. I don't get it.

avidphantasm 5y ago

Is this a joke? Why is this a revelation?

poyu 5y ago
Lol I know right?!
dredmorbius 5y ago
https://news.ycombinator.com/item?id=29670168 https://news.ycombinator.com/item?id=29670168
deleted 5y ago
[deleted]

dredmorbius 5y ago

This reminds me strongly of the Info file format (itself generated from a TexInfo source file), in which an entire multi-page document is presented in a single file. See: https://www.gnu.org/software/texinfo/manual/texinfo/html_node/Short-Sample-Texinfo-File.html https://www.gnu.org/software/texinfo/manual/texinfo/html_nod... The difference is that Info requires a dedicates reader (the info or pinfo command-line utilities, or of course, Emacs), whilst this format will work with any graphical Web client. It doesn't quite work as planned with a terminal-based browser. I've opened https://css-tricks.com/a-whole-website-in-a-single-html-file/ https://css-tricks.com/a-whole-website-in-a-single-html-file... with w3m, and rather than seeing only one of the intended "pages" at a time, the entire "site" is presented. That said, degredation is graceful, and navigation works. I'm quite impressed.

arnaudsm 5y ago

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 https://github.com/arnaudsm/raito

smolder 5y ago
The difference is they don't use javascript, a point many commenters apparently missed. This is similar how you can make drop-down header menus in css only - no javascript. Implementing css dropdown menus was one of my first big web dev tasks, since many users still had computers that slowed to a crawl when javascript and dom manipulation were involved.
- arnaudsm 5y ago
  I agree, I just went one step further to ease content management.
bkeating 5y ago
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 https://github.com/bkeating/nakedNV

__alias 5y ago

Why the fuck is this top of HN. I'm picturing way to many people viewing this today and thinking "Wow! Websites can be made without React? I will upvote!" Are we at a point where university Web101 classes just jump straight into SPAs?

PpEY4fu85hkQpn 5y ago
Yes. There are a lot of devs that don't understand the fundamentals of how the web works. The trending topic on front-end twitter last week was if you should even bother learning CSS or is only knowing Tailwind fine. It's madness.

samstave 5y ago

test

samstave 5y ago
WTF - Why cant I reply to comments..
- samstave 5y ago
  Weird - the REPLY was missing fora time. disregard
- dredmorbius 5y ago
  As thread depth increases, the "reply" link is delayed for an increasing time. This is one of HN's behavioural hacks at cooling off flamewars. You can click on a comment directly to reply to it immediately. Use this knowledge with care.

choward 5y ago

The inline example didn't even work for me. Highlights multiple sections. And the href for section-2 is wrong.

romwell 5y ago

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 directory instead of embedding them; so you might need to do some work to download that page (I think File -> Save as.. can give you a readable static version on some browsers). Anyway, somewhat surprising that people are stumbling into how much you can do with just one well-crafted .html file. Look ma, no node.js, no (no)SQL database, no nothing except for one file for one website (and that file isn't even that large, given what TiddlyWiki allows you to do). TiddlyWiki can be run on node.js, but I don't see much reason to. If I want to make changes, I use the built-in editor, and then the "Save..." button generates me the .html of the updated version. Save it over the old one, upload over ftp, done. No deployment process to speak of. And, at that, the feature set rivals (and, at times, exceeds) that of, say, Wikipedia. (And for math nerds: it supports LaTeX via a KaTeX plugin. Maybe you can't copy-paste your entire thesis, but it's pretty damn close to real-time full-featured LaTeX). [1]https://tiddlywiki.com/ https://tiddlywiki.com/ [2]https://romankogan.net/adhd https://romankogan.net/adhd

arendtio 5y ago
Yes, TiddlyWiki is great, but isn't it full of JS? I mean, the somewhat special thing here, is that the page is built without JS.
- romwell 5y ago
  And why does it matter? The author seems to be fascinated by the concept of single-HTML website which uses anchor links for internal navigation to reveal or hide content instantly without page reload. That's exactly what TiddlyWiki does. If you are JS-averse, you can generate a static HTML version of the wiki as well without JS in it [1]. It doesn't use CSS tricks though to show/hide parts. [1] https://tiddlywiki.com/static/Generating%2520Static%2520Sites%2520with%2520TiddlyWiki.html https://tiddlywiki.com/static/Generating%2520Static%2520Site...

adregan 5y ago

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/ https://css-tricks.com/video-screencasts/84-site-walkthrough...

baobabKoodaa 5y ago
Using jquery to hide and show sections is... not like OP at all. The whole point in OP is doing this without JS.
- adregan 5y ago
  The code layout is so similar that these techniques are surely cousins (same ugly url and all). The only difference is the :target trick. Further, the no-js portion isn’t even the main idea. “Entire website in a single file” is.
  - baobabKoodaa 5y ago
    No, that's not the main idea, in fact it's not even an accurate description - the entire website is not in a single file. The website loads one HTML file, one CSS file and several image files. The whole point here is you can do instant navigation to multiple pages that are contained within a single file without using JavaScript.

anderspitman 5y ago

This is in the same vein as the "checkbox hack". It's a great rabbit hole to go down. It's fun to try and figure out how to accomplish normal UI functions with no JS and no page reloads. My personal favorite was making a popup Confirm/Cancel dialog where you could still see your content behind it. Cancel made it disappear; Confirm triggered a CSS url() call for the action. Here's a todo app with no javascript (not my work: https://www.mattzeunert.com/2017/10/30/javascript-free-todo-app.html https://www.mattzeunert.com/2017/10/30/javascript-free-todo-...

slmjkdbtl 5y ago

The only me stopping me is component, sometimes you just need to reuse certain HTML structure. Currently I'm using custom script to generate HTML from hyperscript-like syntax, it'll probably be better than any native API that enables component, but still wish to see one.

lazyjeff 5y ago

Since this hijacks the target anchor, is there a way to still scroll to a part of a page within the section? I think text fragments would work (https://wicg.github.io/scroll-to-text-fragment/#indicating-the-text-match https://wicg.github.io/scroll-to-text-fragment/#indicating-t...), but they're only supported in Chrome. Update: maybe element.scrollIntoView()? I'll investigate sometime later

peeters 5y ago

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 search engines - And no, you don't need this to avoid Javascript navigation (just use multiple HTML files)

nuopnu 5y ago
Just embed both CSS files and images in the HTML file.
- peeters 5y ago
  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.
  - johndough 5y ago
    Easy solution. Use progressive compression for images and set loading="lazy" https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#images_and_iframes https://developer.mozilla.org/en-US/docs/Web/Performance/Laz...
    - mathnmusic 5y ago
      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.
      - johndough 5y ago
        It depends on what your goal is. If you just want to make a single request to the web server, than loading="lazy" will not work as you said. (Technically speaking, TCP is sending multiple packages anyway resulting in higher latency, so not sure if that is a great goal.) But if you just want to be able to save the entire website with Ctrl + S, then it works fine. As an aside, loading="lazy" is the way in which images are embedded in the website from TFA https://i.imgur.com/wIkaE5g.png https://i.imgur.com/wIkaE5g.png which was the reason why I mentioned it, although it certainly does not fit all possible use cases.

deleted 5y ago

[deleted]

jzellis 5y ago

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

wyattpeak 5y ago
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.
- togaen 5y ago
  They shouldn't be surprised, though. That's the point. The whole web dev community seems to have forgotten about the foundational web standards.
  - wyattpeak 5y ago
    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.
    - r_hoods_ghost 5y ago
      CSS 3 was released in 1999 and the :target pseudo class is in the spec. So not exactly new... [1] https://www.w3.org/TR/1999/WD-CSS3-selectors-19990803#target-pseudo https://www.w3.org/TR/1999/WD-CSS3-selectors-19990803#target...
ojr 5y ago
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

swyx 5y ago

TIL about the :target pseudoselector. I've actually written JS to implement this functionality because i didnt know about it. embarrassed.

aspyct 5y ago
Uhm... you're not alone :s
foreigner 5y ago
Same here

bern4444 5y ago

While it's not a single HTML file, the framework Remix has been wonderful to work with and makes building complex websites and web apps without any client side JS exceptionally easy.

TeeMassive 5y ago

As a semi-related subject, I like to use the SingleFile extension to save pages as one static HTML file for archiving purposes. Got a ton of saved pages and articles from HN in my dropbox that I can read where I want later without worrying about dead links, ghost edits and other live annoying things.

rishav_sharan 5y ago

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

atq2119 5y ago
There are plenty of non-JS converters from Markdown to HTML and static websites are a thing.
- rishav_sharan 5y ago
  It is a static site. Only that I decided to hand roll my own implementation instead of using something like Jekyll. And as it doesn't have any server for the markdown (they are just CDN files), I have to use JS to do the translation to HTML.
  - xigoi 5y ago
    Why not render them on your own computer after you write them?
    - rishav_sharan 5y ago
      Simple and efficient. I can maybe setup a build step for the markdown. Thanks for the suggestion. Can't believe it never crossed my mind
selfishclouds 5y ago
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 https://john-doe.neocities.org/#blog 2. https://github.com/bradleytaunt/john-doe-jekyll https://github.com/bradleytaunt/john-doe-jekyll

sandreas 5y ago

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/ https://pilabor.com/blog/2021/05/building-a-blog-with-hugo/ for details.

vnorilo 5y ago

I used a similar trick to write my resume site [1] with a "spatial" transition effect inside a single html file with no javascript. It's a bit of a weird flex but was fun to do. 1: https://norilo.me/ https://norilo.me/

TedShiller 5y ago

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?

john-doe 5y ago
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/ https://cadars.github.io/portable-php/
- TedShiller 5y ago
  Interesting, thanks for the tip!

animesh 5y ago

I did a similar thing on my mini WIP portfolio site @ https://anmsh.net/ https://anmsh.net/

benreesman 5y ago

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

quickthrower2 5y ago
Ive never come across that attitude about 6 months later but definitely “works on my $2k machine so ship” which is probably equivalent.

GrumpyNl 5y ago

Back to old school.

leoncvlt 5y ago

Love this! Some time ago I created a tool to make similar one-page sites by parsing a markdown file: https://leoncvlt.github.io/imml/ https://leoncvlt.github.io/imml/ It's also available as a library / on the command line: https://github.com/leoncvlt/imml https://github.com/leoncvlt/imml

07504150950 5y ago

bncy 5y ago

On one hand I'm excited about the future and I want to build apps for humans in spaceships, but on the other I'm very disappointed with how hard it is to get to the actual piece of information you're looking for on some of the websites filled with all this fancy stuff. Sites like this one the other hand, just don't waste my time and I like this idea of simplicity. I wish we could have that everywhere, so we can be more user friendly all around.

taubek 5y ago

The site looks really nice but with todays total lack of optimization when it comes to size and code quality I don't see that this would become a trend.

stevage 5y ago

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.

arghwhat 5y ago
A CSS file is unnecessary, and you could skip the images or embed them.
- k__ 5y ago
  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.
chrisjc 5y ago
It's not, but with a little more imagination you could certainly take the author's work to the next level. Inline CSS and images as blobs. Then in practice the issue becomes a bloated file that isn't able to reuse internal components, at least not without introducing a layer of complexity such as a scripting language and browser APIs to go with it. Perhaps if HTML had been designed with more component re-usability in mind, the landscape of the internet would look very different today. Then again, what sense would there be in having a single HTML file for a site like Wikipedia or Altavista? And imagining the web evolving without a scripting language would be naive. Single file websites that could be served up on blob or network storage certainly appeal to me, especially today.
- southerntofu 5y ago
  Sounds like content-addressing would address (pun intended) your needs. I mean it's quite possible to build a IPFS/Bittorrent/DAT-based browser. I'd be interested in such a modern p2p-friendly browser minus the gigantic JS crap and attack surface.
  - 5y ago

rpastuszak 5y ago

How about an entire website (HTML, CSS, JS + assets) in a single tweet? https://twitter.com/rafalpast/status/1316836397903474688?s=20 https://twitter.com/rafalpast/status/1316836397903474688?s=2...

pkrumins 5y ago

Single, self-contained HTML files are my passion. I created a self-contained version of my comic https://comic.browserling.com/browserling-comic.html https://comic.browserling.com/browserling-comic.html. All comics in one file, no external dependencies or anything.

akeck 5y ago

You can also inline images by putting base64 in img tags. Pandoc creates nice single file websites with flags to inline both CSS and images.

pjmlp 5y ago

It is kind of ironic that 20 years later this needs to be re-discovered.

wyattpeak 5y ago
This was absolutely not possible 20 years ago. The only pseudoclasses available at that point were the anchor pseudoclasses and :first-line/:first-letter.[1] What's being shown off here is not having a single page of a website in just HTML/CSS, but having all pages. [1] https://www.w3.org/TR/REC-CSS1/#pseudo-classes-and-pseudo-elements https://www.w3.org/TR/REC-CSS1/#pseudo-classes-and-pseudo-el...
- pjmlp 5y ago
  Having an entire Website in a single HTML page was definitely possible.
  - wyattpeak 5y ago
    Not if you wanted multiple pages without Javascript it wasn't. Which is what's interesting about the site being described, although the article does a weak job explaining it.
    - pjmlp 5y ago
      That is moving the goalposts, with DHTML or not, it can be a single HTML page.
      - wyattpeak 5y ago
        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 unrelated claim about something different that was possible twenty years ago.

globular-toast 5y ago

Not so good with the stylesheet disabled. It's better to have separate pages and still doesn't require any buildshit.

bradley_taunt 5y ago

For those interested, I’ve created a Jekyll theme based on this very setup[0] I also created a forked SSG based off of https://portable.fyi/ https://portable.fyi/ [1] 0: https://github.com/bradleytaunt/john-doe-jekyll https://github.com/bradleytaunt/john-doe-jekyll 1: https://phpetite.org https://phpetite.org

JoeyBananas 5y ago

This is a cursed way to structure a plaintext html website

laszlokorte 5y ago

I built a mobile web app for a conference that way [1], workes really well and is way more performant on older mobile devices than the previous version that was built in react. [1]: https://app.ishl.eu/2018 https://app.ishl.eu/2018

perlgeek 5y ago

I love the idea, but wouldn't use it for bigger pages, because it means you cannot link to individual sections within one page, because then :target doesn't apply to the top-level <section> anymore, right?

disadvantage 5y ago

I sometimes convert pages to a single HTML file with SingleFile[0] which encapsulates all external assets into a single page. I have a small collection of pages which I can browse offline, and also have them for posterity incase they suffer from link rot. [0] https://addons.mozilla.org/en-US/firefox/addon/single-file/ https://addons.mozilla.org/en-US/firefox/addon/single-file/

chkaloon 5y ago

There's a bug in it. Section 2 doesn't work (missing dash)

feeela 5y ago

That reminds me of the old WAP pages with their distinct cards. https://en.m.wikipedia.org/wiki/Wireless_Application_Protocol https://en.m.wikipedia.org/wiki/Wireless_Application_Protoco...

JohannesEckert 5y ago

A lot mentioned already - I put up an blog-article done in HTML/CSS and the Icons/Font using URI just some days ago (german) [1]. I has 77kB total and can be downloaded in a single file, preserving the layout and font (FreeSans). As it talks about the very unknown relationship how the proposed end of lignite-mining in eastern region Lusatia (2030-2038) affects freshwater-production in Berlin (end of groundwater pumping in Spree-river), reminded me (as Hacker News is located in California) of recent article "The Warning Shot the US Is Ignoring: Climate Change Impacts on California Central Valley" in CleanTechnica, I thought to share it. [1] http://futureasapresent.org/trinkwasser.html http://futureasapresent.org/trinkwasser.html [2] https://cleantechnica.com/2021/12/18/climate-change-impacts-on-california-central-valley-warning-shot/ https://cleantechnica.com/2021/12/18/climate-change-impacts-...

pikalinka 5y ago