7 ms·

Building websites with lots of little HTML pages

193 points by Kerrick 2y ago

Terretta 2y ago
This is brilliant. Instead of a single page app (SPA), you can almost picture the connections between all these little .html pages as some sort of web.
- dredmorbius 2y ago
  One spanning the world, perhaps. Even ... widely.
  - freedomben 2y ago
    It's a great idea, but I don't see it working long-term. At some point I suspect big tech will aggregate and centralize and kill off these little sites. They may even start implementing technology that locks them down so that you can only visit them with approved devices. Hopefully Netscape refuses to go along with it, though I do worry about their business model's long term viability.
    - kreeben 2y ago
      Netscape's too big to fail, yo.
  - xnx 2y ago
    Needs a shorter name. Maybe "WoWiWe"?
- 0xdeadbeefbabe 2y ago
  It's like a world of webs.
ilrwbwrkhv 2y ago
the web is so built for this. when you go to sites like this it just feels right. we could have had this as our future instead of the craziness of javascript and nextjs and react. now some new devs dont know html exist. they think react is the web.
- LigmaBaulls 2y ago
  imagine what the future could have been if the html spec was enhanced to support the features of htmx rather than the push for javascript enhancements. We may have had a future without javascript ever running on a server.
- geraldwhen 2y ago
  The designers make us commit war crimes with JavaScript. Can’t even use native form elements.
jonwinstanley 2y ago
Interesting thoughts. I’ve been using both Hotwire and HTMX recently. The swapping in of different html is making a come back.
- mamcx 2y ago
  Yeah, this is `manual` htmx.
arnley 2y ago
Views transitions are very useful in content-first websites. I've used them extensively when working on https://stack.lol https://stack.lol Try and navigate through pages, or change the language, and you'll get these neat effects "for free". Frameworks like AstroJS also help a lot as they facilitate using view transitions.
- gibibit 2y ago
  I guess this is a matter of preference. I see when I click a link on stack.lol that the page header remains visible, but the rest of the page disappears (blanks to white) for a second before the next page appears. I prefer a seamless experience of seeing the next page immediately without a "white flash" first. For instance, if I am looking at a GitHub project page and I click the "Issues" button, in a fraction of a second the page changes to the Issues page without any intermediate disappearance or partial page load. In most cases, I find transition effects like fading, sliding, etc. to be an annoyance that adds unnecessary delay and visual distraction.
  - nartho 2y ago
    I believe this is related to the implementation of the light/dark theme. It uses the preferred theme but default to light, if your preferred theme is dark, it will take some time where it defaults to light before being set to dark. There are workarounds.
  - arnley 2y ago
    Nice catch, thanks for the feedback. I just enhanced a bit the implementation so that it flickers ...less. Still looking for ways for this static implementation with view transitions to 100% persist the dark mode during transitions. Edit: Fixed. Using a tiny bit of script[1] from the Astro documentation. [1]: https://docs.astro.build/en/guides/view-transitions/#astrobefore-swap https://docs.astro.build/en/guides/view-transitions/#astrobe...
- jen729w 2y ago
  Sorry to report this doesn’t work well on mobile Safari. Tapping one of the items in the list causes mayhem. Going ‘back’ causes stuff to flicker all over the screen.
dredmorbius 2y ago
What were the arguments in favour of SPAs in the first place? I'm finding it interesting that most of the top HN submissions (by popularity) matching "single page app" are critical, not positive. First 15 follow, all but 5 are negative: - You probably don't need a single-page app (https://journal.plausible.io/you-probably-dont-need-a-single-page-app https://journal.plausible.io/you-probably-dont-need-a-single...) 816 points | 6 years ago | 499 comments - A single-page app is almost always worse than a multi-page app (https://www.gregnavis.com/articles/the-architecture-no-one-needs.html https://www.gregnavis.com/articles/the-architecture-no-one-n...) 289 points | 6 years ago | 145 comments - The myth that you can’t build interactive web apps except as single page app (https://htmx.org/essays/you-cant/ https://htmx.org/essays/you-cant/) 262 points | 4 months ago | 143 comments - Building a single-page app with Htmx (https://jakelazaroff.com/words/building-a-single-page-app-with-htmx/ https://jakelazaroff.com/words/building-a-single-page-app-wi...) 252 points | 5 months ago | 143 comments - AWS Lambda as a back end for a single-page app (http://lg.io/2015/05/16/the-future-is-now-and-its-using-aws-lambda.html http://lg.io/2015/05/16/the-future-is-now-and-its-using-aws-...) 229 points | 10 years ago | 73 comments - Create your own dysfunctional single-page app (https://tinnedfruit.com/articles/create-your-own-dysfunctional-single-page-app.html https://tinnedfruit.com/articles/create-your-own-dysfunction...) 208 points | 6 years ago | 138 comments - The Single-Page-App Morality Play (https://www.baldurbjarnason.com/2021/single-page-app-morality-play/ https://www.baldurbjarnason.com/2021/single-page-app-moralit...) 207 points | 3 years ago | 131 comments - Todos: a Backbone.js example Single-Page-App (with LocalStorage)(http://documentcloud.github.com/backbone/examples/todos/index.html http://documentcloud.github.com/backbone/examples/todos/inde...) 169 points | 14 years ago | 28 comments - Your single-page app is now a polyfill (https://itnext.io/your-single-page-app-is-now-a-polyfill-7881fb01694e https://itnext.io/your-single-page-app-is-now-a-polyfill-788...) 164 points | 4 years ago | 158 comments - Why I hate your Single Page App (https://medium.freecodecamp.org/why-i-hate-your-single-page-app-f08bb4ff9134 https://medium.freecodecamp.org/why-i-hate-your-single-page-...) 107 points | 8 years ago | 120 comments - Building a single page app with Backbone.js, underscore.js and jQuery (http://andyet.net/blog/2010/oct/29/building-a-single-page-app-with-backbonejs-undersc/ http://andyet.net/blog/2010/oct/29/building-a-single-page-ap...) 103 points | 14 years ago | 19 comments - Why I hate your Single Page App (2016)(https://www.freecodecamp.org/news/why-i-hate-your-single-page-app-f08bb4ff9134/ https://www.freecodecamp.org/news/why-i-hate-your-single-pag...) 37 points | 11 months ago | 34 comments - Sonny – Fast single page app engine (https://github.com/felixmaier/sonnyJS https://github.com/felixmaier/sonnyJS) 36 points | 10 years ago | 25 comments - You probably don't need a single page app (https://plausible.io/blog/you-probably-dont-need-a-single-page-app https://plausible.io/blog/you-probably-dont-need-a-single-pa...) 31 points | 6 years ago | 24 comments - Ask HN: What are the common pitfalls/problems of Single Page App's? 13 points | 9 years ago | 18 comments
bob1029 2y ago
Old school web tech is the best. I still reach for multipart/form-data every day. Many of my web applications do not even have javascript. I hope at some point the original pattern is re-discovered and made popular again because it would make things so much snappier: 1. Initial GET request from user's browser against index and maybe favicon. 2. Server provides static/dynamic HTML document w/ optional JS, all based upon any session state. In rare cases, JS is required for functionality (camera, microphone, etc.), but usually is just to enhance the UX around the document. 3. User clicks something. This POSTs the form to the server. The server takes the form elements, handles the request, and then as part of the same context returns the updated state as a new HTML document in the POST response body. 4. That's it. The web browser, if it is standards compliant, will then render the resulting response as the current document and the process repeats. All of this can happen in a single round trip. Latency is NOT a viable argument against using form submissions. I don't think suffering window navigation events is a valid one either. At some point, that SPA will need to talk to the mothership. The longer it's been disconnected, the more likely it's gonna have a bad time. The web only has to be hard if you want to make it hard. Arguments against this approach always sound resume-driven more than customer-driven. I bet you would find some incredibly shocking statistics regarding the % of developers who are currently even aware of this path.
- freedomben 2y ago
  I'm increasingly getting to this point as well. I think modern webtech is incredible in many ways, and if properly used could be pretty great but overall and for the most part we are pretty terrible at it. I've started to dread using SPAs because I know it's going to be sluggish and load megabytes of junk, and will still require frequent page reloads when clicking stuff Even though ostensibly it should not. There's an exceptional beauty in a simple and lightweight website that is just a load and done. I've started doing more with Phoenix and Alpine for the little bits of client-side functionality required, and have been very pleased with it. The most interesting part though, is that users have also been very pleased. They can't explain why in technical terms, but they know it feels better.
  - joeguilmette 2y ago
pphysch 2y ago
I love this approach. I just wish there was better tooling for HTML polyglot programming. PHP got it right by embedding itself within "HTML" documents. React also got it right by inventing JSX. There's Go templ too. They all said "HTML deserves first class support". Why can't this DX also be available for other general purpose PLs? I want my Python language server to detect that this or that string is HTML, and provide features accordingly. I don't want to keep bouncing between .py and .html files. Is this achievable?
- solardev 2y ago
  Is this kinda what you want? https://peps.python.org/pep-0750/ https://peps.python.org/pep-0750/ (similar to template literals in JS) You can also do something similar using f-strings, at the risk of content injection attacks.
- davepeck 2y ago
  Slowly but surely... PEP 750 (still a proposal) adds "t-strings" Python. They're a simple extension of f-strings that give developers access to the static and interpolated parts of the string before they get combined into a final string. They're Python's answer to JavaScript template literals. This allows writing code like: user_name = current_user.user_name # something user-supplied and potentially unsafe foo: HTMLElement = html(t"<div>{user_name}</div>") # wouldn't be safe with f-strings where `html` is a normal function that takes a `Template` as an instance, and can return whatever it likes -- say, an `HTMLElement` rather than a `str`. If PEP 750 does get accepted, eventually one hopes the community will introduce formatting, type checking, and LSP smarts for common kinds of t-strings, like HTML and maybe SQL, etc.
  - pphysch 2y ago
    Great! Hope the proposal gets support.
    - davepeck 2y ago
      Good news on that front! https://discuss.python.org/t/pep750-template-strings-new-updates/71594/118 https://discuss.python.org/t/pep750-template-strings-new-upd...
vector_spaces 2y ago
I'm doing something sort of similar now -- my research advisor was remarking on the messy state of all the scripts I use for numerical experiments (there's dozens of them, poorly commented, constantly changing and not well versioned, assumptions/purpose not documented etc). Naturally I used that as an excuse to implement a framework for tracking the output of numerical experiments along with any generated assets and output and configuration details in a SQLite database. Then wrote a generator that pulls everything out of the database and builds a static HTML site. Anyway I implemented a system of tags for grouping similar experiments. It's less polished and sophisticated than this, but it was quick to implement and feels suitably lightweight. I'm realizing now that the SQLite database was a misstep, mainly for adding notes and metadata. So I'm planning to just use the filesystem instead so that one's raw experiment runs can be versioned as plaintext files (at the moment, just the static site is versioned) But for now I need to get around to actually doing the experiments :(
mdwhatcott 2y ago
> "I build separate, small HTML pages for each “interaction” I want, then I let CSS transitions take over and I get something that feels better than its JS counterpart for way less work." I'm not understanding how you are achieving the css transitions between what look like new page loads under the hood...Can you elaborate on how that works?
- andypants 2y ago
  View transitions api, it's pretty new: https://developer.chrome.com/docs/web-platform/view-transitions https://developer.chrome.com/docs/web-platform/view-transiti...
  - alberth 2y ago
    Surprisingly, Firefox of all browsers doesn't support it. https://caniuse.com/view-transitions https://caniuse.com/view-transitions
    - MYEUHD 2y ago
      It's not that surprising if you consider that all the browsers on that page, except for Firefox and Safari, are Chrome-based
    - gwern 2y ago
      That's a pretty major deal breaker for OP to leave out of his post touting it as something to build everything in your site on (especially for a tech blog)! Does it at least have a polyfill story? I see no mention of how to make it work on, uh, the other 15% of browsers worldwide, CanIUse is telling me.
      - internetter 2y ago
        If you use it in a browser that doesn't support view transitions, the pages just don't animate. no harm no fowl
  - mdwhatcott 2y ago
econ 2y ago
Yes, rip out all the advanced coding skills and simply do it the way it was originally intended. I have a single php file with a textarea. It creates pages or updates them. The textarea only displays the article. Everything above and below is removed and added again. When publishing it adds the article to the index.html archive-2025.html and tagname.html pages. I haven't bothered automating removal. If it ever happens I'll do it by hand. The search engine is a bit odd, it is a 26x26 list of raw files named aa.html ab.html each bit in those refers to an article. If you type foobar it loads fo oo ob ba and ar.html then performs and AND on the files. What html's remain are loaded and searched for foobar. I should really store everything in a db in stead. (Just for searching) Edit: near zero maintenance over two decades. One instance where the host upgraded php and the editor stopped working but the website worked just fine so it doesn't really count.
mariocesar 2y ago
This is the source code for the blog: https://github.com/jimniels/blog https://github.com/jimniels/blog, in case anyone was looking for it
stevage 2y ago
I did not find this very convincing. I suspect it has to do with the author being very comfortable with site-generation tools, and not super comfortable with JavaScript. They don't mention any frameworks (React, Vue etc) so I suspect the JavaScript they write is doing things "the hard way" from scratch. > My first impulse was to have a list of posts you can filter with JavaScript. > But the more I built it, the more complicated it got. Each “list” of posts needed a slightly different set of data. And each one had a different sort order. What I thought was going to be “stick a bunch of <li>s in the DOM, and show hide some based on the current filter” turned into lots of data-x attributes, per-list sorting logic, etc. I realized quickly this wasn’t a trivial, progressively-enhanced feature. I didn’t want to write a bunch of client-side JavaScript for what would take me seconds to write on “the server” (my static site generator). This is pretty trivial to implement in any framework. Generally speaking, I find most of the "You don't need Javascript and frontend frameworks, just write static HTML!" posts reflect the skillsets of their authors. Me, I never really did any site-generation or server-side rendering stuff, so writing everything in VueJS + JavaScript is the easy way.
- endemic 2y ago
  It’s rough for the old timers because as consumers of the web, we’re forced to use SPAs that have objectively worse UX. And sites are built that way now “because it’s how everyone does it.”
  - AgentME 2y ago
    React doesn't necessarily mean SPAs. It has great support for server-side rendering and that was a big part of why React became more popular than other client-side JS frameworks of the time.
  - Matumio 2y ago
    The sad thing is, there is no real obstacle to building a fast SPA. It's certainly not harder than to do it all "the old way". But you have to pay attention to performance. If you just implement as many features as you can in as little time as possible, then the outcome will be something like Confluence, I guess, where you wait several seconds to load a documentation page you wanted to just read, not even edit.
dredmorbius 2y ago
The one element so far I dislike out of this is having search redirect to a new page. This is something SPAs are doing as well, though in the case of, say Google Web Search (last I used it directly, which is months if not years ago). Namely, when I begin typing a search the currently-displayed content blanks out. Why is this annoying? Because often what I'm typing is being prompted by that content, and if I can't continue to view it as I'm typing my search I lose that context and my train of thought. So: embed your search directly in every page on your website, rather than having it be a separate page. It's fine for the results page to redirect elsewhere, and if the search mechanics need that page to function, so be it (that's what form submissions are all about). But other than that, I like the implementation, after realising that it was the blogpage and site themselves which were the demonstration. (I'm ... slow like that sometimes.)
deleted 2y ago
[deleted]
ahallock 2y ago
I love the how he simulates the hamburger menu with a page navigation. It just feels so wholesome in a sea of complex JS frameworks
- mablopoule 2y ago
  I haven't seen it mentioned here, but one other classic trick for hamburger menu is to use a checkbox, and let CSS handle the rest. Something like: <header class="main-header"> <input class="hamburger" id="hamburger-action" type="checkbox" /> <label for="hamburger-action">Some icon here</label> <nav class="main-navigation">My menu here</nav> </header> and then use the `:checked` CSS selector to display or not the hamburger menu, you can see it working in my (very barebone :D) website [1]. Note that this implementation is not keyboard-navigable because the input is not visible, I should fix it someday. [1] https://www.marc-monchablon.fr/ https://www.marc-monchablon.fr/
MaoSYJ 2y ago
Php templates leads to this type of implementation in a quite intuitive way. It’s refreshing seeing old patterns being rediscovered.
djhedges 2y ago
Reminds me of a Django project rewrite I got to work on very early in my career. I was able to convince the lead to stave off JavaScript because I could barely read Python at the time. I did however fail to convince my colleagues to write unit tests.
netsharc 2y ago
Ouch, the back button becomes "Let's move backwards through all your mouse clicks". Open menu (marvel at the animation), close menu -> hitting back means "reopen menu". Clicking through the tabs, and hitting back means navigating through them again, backwards. I guess hijacking the link with window.location.replace can mitigate this, but the "Javascript is evil!"-Amish web-dwellers will scream at me.
- reportgunner 2y ago
  Hey I'll take that over the back button not doing anything any day.
SigmundurM 2y ago
I really like the idea! But an instant drawback I see is keyboard accessibility. The focused element is lost whenever you navigate to a new page, meaning I have to tab all the way through the menu again to get to where I was. An example: I tab 4 times to get to the open menu "button", press enter, and then I have to tab 4 times again to actually enter the menu.
createaccount99 2y ago
Where's the source code
starkparker 2y ago
DHTML rolling in its grave
darepublic 2y ago
When I first heard about micro-frontends, this is where my mind went to
busymom0 2y ago
On a similar note, does anyone know if it's possible without JavaScript for a link or form or something similar to be submitted without the whole page refreshing and still being able to update some text? For example, the upvote, favorite, and reply actions on hacker news website. They all require a whole page refresh. Is it possible to achieve it without page refresh and without JavaScript?
- sunnybeetroot 2y ago
  Have you tried HTMX?
  - busymom0 2y ago
    HTMX requires incorporating script which goes against my question.
- recursivedoubts 2y ago
  If you do not wish to use any javascript, you can use iframes and the "target" attribute on links and forms: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#... However the user experience is pretty rough, which is why people typically don't use this feature. If you want a minimal amount of javascript to achieve this, we (the htmx folks) also have fixi: https://github.com/bigskysoftware/fixi https://github.com/bigskysoftware/fixi Finally, we are working on introducing general transclusion into the HTML spec itself with the triptych project: https://github.com/alexpetros/triptych https://github.com/alexpetros/triptych however that is a ways off (if ever)

193 points by Kerrick 2y ago

This is brilliant. Instead of a single page app (SPA), you can almost picture the connections between all these little .html pages as some sort of web.

dredmorbius 2y ago
One spanning the world, perhaps. Even ... widely.
- freedomben 2y ago
  It's a great idea, but I don't see it working long-term. At some point I suspect big tech will aggregate and centralize and kill off these little sites. They may even start implementing technology that locks them down so that you can only visit them with approved devices. Hopefully Netscape refuses to go along with it, though I do worry about their business model's long term viability.
  - kreeben 2y ago
    Netscape's too big to fail, yo.
- xnx 2y ago
  Needs a shorter name. Maybe "WoWiWe"?
0xdeadbeefbabe 2y ago
It's like a world of webs.

ilrwbwrkhv 2y ago

the web is so built for this. when you go to sites like this it just feels right. we could have had this as our future instead of the craziness of javascript and nextjs and react. now some new devs dont know html exist. they think react is the web.

LigmaBaulls 2y ago
imagine what the future could have been if the html spec was enhanced to support the features of htmx rather than the push for javascript enhancements. We may have had a future without javascript ever running on a server.
geraldwhen 2y ago
The designers make us commit war crimes with JavaScript. Can’t even use native form elements.

jonwinstanley 2y ago

Interesting thoughts. I’ve been using both Hotwire and HTMX recently. The swapping in of different html is making a come back.

mamcx 2y ago
Yeah, this is `manual` htmx.

arnley 2y ago

Views transitions are very useful in content-first websites. I've used them extensively when working on https://stack.lol https://stack.lol Try and navigate through pages, or change the language, and you'll get these neat effects "for free". Frameworks like AstroJS also help a lot as they facilitate using view transitions.

gibibit 2y ago
I guess this is a matter of preference. I see when I click a link on stack.lol that the page header remains visible, but the rest of the page disappears (blanks to white) for a second before the next page appears. I prefer a seamless experience of seeing the next page immediately without a "white flash" first. For instance, if I am looking at a GitHub project page and I click the "Issues" button, in a fraction of a second the page changes to the Issues page without any intermediate disappearance or partial page load. In most cases, I find transition effects like fading, sliding, etc. to be an annoyance that adds unnecessary delay and visual distraction.
- nartho 2y ago
  I believe this is related to the implementation of the light/dark theme. It uses the preferred theme but default to light, if your preferred theme is dark, it will take some time where it defaults to light before being set to dark. There are workarounds.
- arnley 2y ago
  Nice catch, thanks for the feedback. I just enhanced a bit the implementation so that it flickers ...less. Still looking for ways for this static implementation with view transitions to 100% persist the dark mode during transitions. Edit: Fixed. Using a tiny bit of script[1] from the Astro documentation. [1]: https://docs.astro.build/en/guides/view-transitions/#astrobefore-swap https://docs.astro.build/en/guides/view-transitions/#astrobe...
jen729w 2y ago
Sorry to report this doesn’t work well on mobile Safari. Tapping one of the items in the list causes mayhem. Going ‘back’ causes stuff to flicker all over the screen.

dredmorbius 2y ago

What were the arguments in favour of SPAs in the first place? I'm finding it interesting that most of the top HN submissions (by popularity) matching "single page app" are critical, not positive. First 15 follow, all but 5 are negative: - You probably don't need a single-page app (https://journal.plausible.io/you-probably-dont-need-a-single-page-app https://journal.plausible.io/you-probably-dont-need-a-single...) 816 points | 6 years ago | 499 comments - A single-page app is almost always worse than a multi-page app (https://www.gregnavis.com/articles/the-architecture-no-one-needs.html https://www.gregnavis.com/articles/the-architecture-no-one-n...) 289 points | 6 years ago | 145 comments - The myth that you can’t build interactive web apps except as single page app (https://htmx.org/essays/you-cant/ https://htmx.org/essays/you-cant/) 262 points | 4 months ago | 143 comments - Building a single-page app with Htmx (https://jakelazaroff.com/words/building-a-single-page-app-with-htmx/ https://jakelazaroff.com/words/building-a-single-page-app-wi...) 252 points | 5 months ago | 143 comments - AWS Lambda as a back end for a single-page app (http://lg.io/2015/05/16/the-future-is-now-and-its-using-aws-lambda.html http://lg.io/2015/05/16/the-future-is-now-and-its-using-aws-...) 229 points | 10 years ago | 73 comments - Create your own dysfunctional single-page app (https://tinnedfruit.com/articles/create-your-own-dysfunctional-single-page-app.html https://tinnedfruit.com/articles/create-your-own-dysfunction...) 208 points | 6 years ago | 138 comments - The Single-Page-App Morality Play (https://www.baldurbjarnason.com/2021/single-page-app-morality-play/ https://www.baldurbjarnason.com/2021/single-page-app-moralit...) 207 points | 3 years ago | 131 comments - Todos: a Backbone.js example Single-Page-App (with LocalStorage)(http://documentcloud.github.com/backbone/examples/todos/index.html http://documentcloud.github.com/backbone/examples/todos/inde...) 169 points | 14 years ago | 28 comments - Your single-page app is now a polyfill (https://itnext.io/your-single-page-app-is-now-a-polyfill-7881fb01694e https://itnext.io/your-single-page-app-is-now-a-polyfill-788...) 164 points | 4 years ago | 158 comments - Why I hate your Single Page App (https://medium.freecodecamp.org/why-i-hate-your-single-page-app-f08bb4ff9134 https://medium.freecodecamp.org/why-i-hate-your-single-page-...) 107 points | 8 years ago | 120 comments - Building a single page app with Backbone.js, underscore.js and jQuery (http://andyet.net/blog/2010/oct/29/building-a-single-page-app-with-backbonejs-undersc/ http://andyet.net/blog/2010/oct/29/building-a-single-page-ap...) 103 points | 14 years ago | 19 comments - Why I hate your Single Page App (2016)(https://www.freecodecamp.org/news/why-i-hate-your-single-page-app-f08bb4ff9134/ https://www.freecodecamp.org/news/why-i-hate-your-single-pag...) 37 points | 11 months ago | 34 comments - Sonny – Fast single page app engine (https://github.com/felixmaier/sonnyJS https://github.com/felixmaier/sonnyJS) 36 points | 10 years ago | 25 comments - You probably don't need a single page app (https://plausible.io/blog/you-probably-dont-need-a-single-page-app https://plausible.io/blog/you-probably-dont-need-a-single-pa...) 31 points | 6 years ago | 24 comments - Ask HN: What are the common pitfalls/problems of Single Page App's? 13 points | 9 years ago | 18 comments

bob1029 2y ago

Old school web tech is the best. I still reach for multipart/form-data every day. Many of my web applications do not even have javascript. I hope at some point the original pattern is re-discovered and made popular again because it would make things so much snappier: 1. Initial GET request from user's browser against index and maybe favicon. 2. Server provides static/dynamic HTML document w/ optional JS, all based upon any session state. In rare cases, JS is required for functionality (camera, microphone, etc.), but usually is just to enhance the UX around the document. 3. User clicks something. This POSTs the form to the server. The server takes the form elements, handles the request, and then as part of the same context returns the updated state as a new HTML document in the POST response body. 4. That's it. The web browser, if it is standards compliant, will then render the resulting response as the current document and the process repeats. All of this can happen in a single round trip. Latency is NOT a viable argument against using form submissions. I don't think suffering window navigation events is a valid one either. At some point, that SPA will need to talk to the mothership. The longer it's been disconnected, the more likely it's gonna have a bad time. The web only has to be hard if you want to make it hard. Arguments against this approach always sound resume-driven more than customer-driven. I bet you would find some incredibly shocking statistics regarding the % of developers who are currently even aware of this path.

freedomben 2y ago
I'm increasingly getting to this point as well. I think modern webtech is incredible in many ways, and if properly used could be pretty great but overall and for the most part we are pretty terrible at it. I've started to dread using SPAs because I know it's going to be sluggish and load megabytes of junk, and will still require frequent page reloads when clicking stuff Even though ostensibly it should not. There's an exceptional beauty in a simple and lightweight website that is just a load and done. I've started doing more with Phoenix and Alpine for the little bits of client-side functionality required, and have been very pleased with it. The most interesting part though, is that users have also been very pleased. They can't explain why in technical terms, but they know it feels better.
- joeguilmette 2y ago

pphysch 2y ago

I love this approach. I just wish there was better tooling for HTML polyglot programming. PHP got it right by embedding itself within "HTML" documents. React also got it right by inventing JSX. There's Go templ too. They all said "HTML deserves first class support". Why can't this DX also be available for other general purpose PLs? I want my Python language server to detect that this or that string is HTML, and provide features accordingly. I don't want to keep bouncing between .py and .html files. Is this achievable?

solardev 2y ago
Is this kinda what you want? https://peps.python.org/pep-0750/ https://peps.python.org/pep-0750/ (similar to template literals in JS) You can also do something similar using f-strings, at the risk of content injection attacks.
davepeck 2y ago
Slowly but surely... PEP 750 (still a proposal) adds "t-strings" Python. They're a simple extension of f-strings that give developers access to the static and interpolated parts of the string before they get combined into a final string. They're Python's answer to JavaScript template literals. This allows writing code like: user_name = current_user.user_name # something user-supplied and potentially unsafe foo: HTMLElement = html(t"<div>{user_name}</div>") # wouldn't be safe with f-strings where `html` is a normal function that takes a `Template` as an instance, and can return whatever it likes -- say, an `HTMLElement` rather than a `str`. If PEP 750 does get accepted, eventually one hopes the community will introduce formatting, type checking, and LSP smarts for common kinds of t-strings, like HTML and maybe SQL, etc.
- pphysch 2y ago
  Great! Hope the proposal gets support.
  - davepeck 2y ago
    Good news on that front! https://discuss.python.org/t/pep750-template-strings-new-updates/71594/118 https://discuss.python.org/t/pep750-template-strings-new-upd...

vector_spaces 2y ago

I'm doing something sort of similar now -- my research advisor was remarking on the messy state of all the scripts I use for numerical experiments (there's dozens of them, poorly commented, constantly changing and not well versioned, assumptions/purpose not documented etc). Naturally I used that as an excuse to implement a framework for tracking the output of numerical experiments along with any generated assets and output and configuration details in a SQLite database. Then wrote a generator that pulls everything out of the database and builds a static HTML site. Anyway I implemented a system of tags for grouping similar experiments. It's less polished and sophisticated than this, but it was quick to implement and feels suitably lightweight. I'm realizing now that the SQLite database was a misstep, mainly for adding notes and metadata. So I'm planning to just use the filesystem instead so that one's raw experiment runs can be versioned as plaintext files (at the moment, just the static site is versioned) But for now I need to get around to actually doing the experiments :(

mdwhatcott 2y ago

> "I build separate, small HTML pages for each “interaction” I want, then I let CSS transitions take over and I get something that feels better than its JS counterpart for way less work." I'm not understanding how you are achieving the css transitions between what look like new page loads under the hood...Can you elaborate on how that works?

andypants 2y ago
View transitions api, it's pretty new: https://developer.chrome.com/docs/web-platform/view-transitions https://developer.chrome.com/docs/web-platform/view-transiti...
- alberth 2y ago
  Surprisingly, Firefox of all browsers doesn't support it. https://caniuse.com/view-transitions https://caniuse.com/view-transitions
  - MYEUHD 2y ago
    It's not that surprising if you consider that all the browsers on that page, except for Firefox and Safari, are Chrome-based
  - gwern 2y ago
    That's a pretty major deal breaker for OP to leave out of his post touting it as something to build everything in your site on (especially for a tech blog)! Does it at least have a polyfill story? I see no mention of how to make it work on, uh, the other 15% of browsers worldwide, CanIUse is telling me.
    - internetter 2y ago
      If you use it in a browser that doesn't support view transitions, the pages just don't animate. no harm no fowl
- mdwhatcott 2y ago

econ 2y ago

Yes, rip out all the advanced coding skills and simply do it the way it was originally intended. I have a single php file with a textarea. It creates pages or updates them. The textarea only displays the article. Everything above and below is removed and added again. When publishing it adds the article to the index.html archive-2025.html and tagname.html pages. I haven't bothered automating removal. If it ever happens I'll do it by hand. The search engine is a bit odd, it is a 26x26 list of raw files named aa.html ab.html each bit in those refers to an article. If you type foobar it loads fo oo ob ba and ar.html then performs and AND on the files. What html's remain are loaded and searched for foobar. I should really store everything in a db in stead. (Just for searching) Edit: near zero maintenance over two decades. One instance where the host upgraded php and the editor stopped working but the website worked just fine so it doesn't really count.

mariocesar 2y ago

This is the source code for the blog: https://github.com/jimniels/blog https://github.com/jimniels/blog, in case anyone was looking for it

stevage 2y ago

I did not find this very convincing. I suspect it has to do with the author being very comfortable with site-generation tools, and not super comfortable with JavaScript. They don't mention any frameworks (React, Vue etc) so I suspect the JavaScript they write is doing things "the hard way" from scratch. > My first impulse was to have a list of posts you can filter with JavaScript. > But the more I built it, the more complicated it got. Each “list” of posts needed a slightly different set of data. And each one had a different sort order. What I thought was going to be “stick a bunch of <li>s in the DOM, and show hide some based on the current filter” turned into lots of data-x attributes, per-list sorting logic, etc. I realized quickly this wasn’t a trivial, progressively-enhanced feature. I didn’t want to write a bunch of client-side JavaScript for what would take me seconds to write on “the server” (my static site generator). This is pretty trivial to implement in any framework. Generally speaking, I find most of the "You don't need Javascript and frontend frameworks, just write static HTML!" posts reflect the skillsets of their authors. Me, I never really did any site-generation or server-side rendering stuff, so writing everything in VueJS + JavaScript is the easy way.

endemic 2y ago
It’s rough for the old timers because as consumers of the web, we’re forced to use SPAs that have objectively worse UX. And sites are built that way now “because it’s how everyone does it.”
- AgentME 2y ago
  React doesn't necessarily mean SPAs. It has great support for server-side rendering and that was a big part of why React became more popular than other client-side JS frameworks of the time.
- Matumio 2y ago
  The sad thing is, there is no real obstacle to building a fast SPA. It's certainly not harder than to do it all "the old way". But you have to pay attention to performance. If you just implement as many features as you can in as little time as possible, then the outcome will be something like Confluence, I guess, where you wait several seconds to load a documentation page you wanted to just read, not even edit.

dredmorbius 2y ago

The one element so far I dislike out of this is having search redirect to a new page. This is something SPAs are doing as well, though in the case of, say Google Web Search (last I used it directly, which is months if not years ago). Namely, when I begin typing a search the currently-displayed content blanks out. Why is this annoying? Because often what I'm typing is being prompted by that content, and if I can't continue to view it as I'm typing my search I lose that context and my train of thought. So: embed your search directly in every page on your website, rather than having it be a separate page. It's fine for the results page to redirect elsewhere, and if the search mechanics need that page to function, so be it (that's what form submissions are all about). But other than that, I like the implementation, after realising that it was the blogpage and site themselves which were the demonstration. (I'm ... slow like that sometimes.)

deleted 2y ago

[deleted]

ahallock 2y ago

I love the how he simulates the hamburger menu with a page navigation. It just feels so wholesome in a sea of complex JS frameworks

mablopoule 2y ago
I haven't seen it mentioned here, but one other classic trick for hamburger menu is to use a checkbox, and let CSS handle the rest. Something like: <header class="main-header"> <input class="hamburger" id="hamburger-action" type="checkbox" /> <label for="hamburger-action">Some icon here</label> <nav class="main-navigation">My menu here</nav> </header> and then use the `:checked` CSS selector to display or not the hamburger menu, you can see it working in my (very barebone :D) website [1]. Note that this implementation is not keyboard-navigable because the input is not visible, I should fix it someday. [1] https://www.marc-monchablon.fr/ https://www.marc-monchablon.fr/

MaoSYJ 2y ago

Php templates leads to this type of implementation in a quite intuitive way. It’s refreshing seeing old patterns being rediscovered.

djhedges 2y ago

Reminds me of a Django project rewrite I got to work on very early in my career. I was able to convince the lead to stave off JavaScript because I could barely read Python at the time. I did however fail to convince my colleagues to write unit tests.

netsharc 2y ago

Ouch, the back button becomes "Let's move backwards through all your mouse clicks". Open menu (marvel at the animation), close menu -> hitting back means "reopen menu". Clicking through the tabs, and hitting back means navigating through them again, backwards. I guess hijacking the link with window.location.replace can mitigate this, but the "Javascript is evil!"-Amish web-dwellers will scream at me.

reportgunner 2y ago
Hey I'll take that over the back button not doing anything any day.

SigmundurM 2y ago

I really like the idea! But an instant drawback I see is keyboard accessibility. The focused element is lost whenever you navigate to a new page, meaning I have to tab all the way through the menu again to get to where I was. An example: I tab 4 times to get to the open menu "button", press enter, and then I have to tab 4 times again to actually enter the menu.

createaccount99 2y ago

Where's the source code

starkparker 2y ago

DHTML rolling in its grave

darepublic 2y ago

When I first heard about micro-frontends, this is where my mind went to

busymom0 2y ago

On a similar note, does anyone know if it's possible without JavaScript for a link or form or something similar to be submitted without the whole page refreshing and still being able to update some text? For example, the upvote, favorite, and reply actions on hacker news website. They all require a whole page refresh. Is it possible to achieve it without page refresh and without JavaScript?

sunnybeetroot 2y ago
Have you tried HTMX?
- busymom0 2y ago
  HTMX requires incorporating script which goes against my question.
recursivedoubts 2y ago
If you do not wish to use any javascript, you can use iframes and the "target" attribute on links and forms: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#... However the user experience is pretty rough, which is why people typically don't use this feature. If you want a minimal amount of javascript to achieve this, we (the htmx folks) also have fixi: https://github.com/bigskysoftware/fixi https://github.com/bigskysoftware/fixi Finally, we are working on introducing general transclusion into the HTML spec itself with the triptych project: https://github.com/alexpetros/triptych https://github.com/alexpetros/triptych however that is a ways off (if ever)