TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Building websites with lots of little HTML pages

193 点作者 Kerrick2 个月前

22 条评论

bob10292 个月前
Old school web tech is the best. I still reach for multipart&#x2F;form-data every day. Many of my web applications do not even have javascript.<p>I hope at some point the original pattern is re-discovered and made popular again because it would make things so much snappier:<p>1. Initial GET request from user&#x27;s browser against index and maybe favicon.<p>2. Server provides static&#x2F;dynamic HTML document w&#x2F; 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.<p>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 <i>same context</i> returns the updated state as a new HTML document in the POST response body.<p>4. That&#x27;s it. The web browser, if it is standards compliant, will then render the resulting response as the current document and the process repeats.<p>All of this can happen in a single round trip. Latency is <i>NOT</i> a viable argument against using form submissions. I don&#x27;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&#x27;s been disconnected, the more likely it&#x27;s gonna have a bad time.<p>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.
评论 #43347481 未加载
评论 #43348989 未加载
评论 #43350029 未加载
评论 #43347746 未加载
评论 #43349773 未加载
评论 #43355905 未加载
评论 #43348063 未加载
econ2 个月前
Yes, rip out all the advanced coding skills and simply do it the way it was originally intended.<p>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&#x27;t bothered automating removal. If it ever happens I&#x27;ll do it by hand.<p>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&#x27;s remain are loaded and searched for foobar.<p>I should really store everything in a db in stead. (Just for searching)<p>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&#x27;t really count.
stevage2 个月前
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&#x27;t mention any frameworks (React, Vue etc) so I suspect the JavaScript they write is doing things &quot;the hard way&quot; from scratch.<p>&gt; My first impulse was to have a list of posts you can filter with JavaScript.<p>&gt; 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 &lt;li&gt;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).<p>This is pretty trivial to implement in any framework.<p>Generally speaking, I find most of the &quot;You don&#x27;t need Javascript and frontend frameworks, just write static HTML!&quot; 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.
评论 #43349065 未加载
评论 #43349343 未加载
Terretta2 个月前
This is brilliant.<p>Instead of a single page app (SPA), you can almost picture the connections between all these little .html pages as some sort of web.
评论 #43347042 未加载
评论 #43347130 未加载
mdwhatcott2 个月前
&gt; &quot;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.&quot;<p>I&#x27;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?
评论 #43347988 未加载
SigmundurM2 个月前
I really like the idea!<p>But an instant drawback I see is keyboard accessibility.<p>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.<p>An example: I tab 4 times to get to the open menu &quot;button&quot;, press enter, and then I have to tab 4 times again to actually enter the menu.
dredmorbius2 个月前
The one element so far I dislike out of this is having search redirect to a new page.<p>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 <i>the currently-displayed content blanks out</i>.<p>Why is this annoying?<p>Because often what I&#x27;m typing is being prompted by that content, and if I can&#x27;t continue to view it <i>as I&#x27;m typing my search</i> I lose that context and my train of thought.<p>So: embed your search directly in every page on your website, rather than having it be a separate page. It&#x27;s fine for the <i>results</i> page to redirect elsewhere, and if the search mechanics need that page to function, so be it (that&#x27;s what form submissions are all about).<p>But other than that, I like the implementation, after realising that it was the blogpage and site themselves which were the demonstration. (I&#x27;m ... slow like that sometimes.)
netsharc2 个月前
Ouch, the back button becomes &quot;Let&#x27;s move backwards through all your mouse clicks&quot;.<p>Open menu (marvel at the animation), close menu -&gt; hitting back means &quot;reopen menu&quot;. Clicking through the tabs, and hitting back means navigating through them again, backwards.<p>I guess hijacking the link with window.location.replace can mitigate this, but the &quot;Javascript is evil!&quot;-Amish web-dwellers will scream at me.
评论 #43352815 未加载
arnley2 个月前
Views transitions are very useful in content-first websites.<p>I&#x27;ve used them extensively when working on <a href="https:&#x2F;&#x2F;stack.lol" rel="nofollow">https:&#x2F;&#x2F;stack.lol</a><p>Try and navigate through pages, or change the language, and you&#x27;ll get these neat effects &quot;for free&quot;.<p>Frameworks like AstroJS also help a lot as they facilitate using view transitions.
评论 #43347103 未加载
评论 #43348553 未加载
评论 #43350366 未加载
评论 #43347383 未加载
ilrwbwrkhv2 个月前
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.
评论 #43348108 未加载
评论 #43348315 未加载
mariocesar2 个月前
This is the source code for the blog: <a href="https:&#x2F;&#x2F;github.com&#x2F;jimniels&#x2F;blog" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jimniels&#x2F;blog</a>, in case anyone was looking for it
pphysch2 个月前
I love this approach. I just wish there was better tooling for HTML polyglot programming.<p>PHP got it right by embedding itself within &quot;HTML&quot; documents. React also got it right by inventing JSX. There&#x27;s Go templ too. They all said &quot;HTML deserves first class support&quot;.<p>Why can&#x27;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&#x27;t want to keep bouncing between .py and .html files. Is this achievable?
评论 #43347331 未加载
评论 #43347278 未加载
评论 #43347558 未加载
vector_spaces2 个月前
I&#x27;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&#x27;s dozens of them, poorly commented, constantly changing and not well versioned, assumptions&#x2F;purpose not documented etc).<p>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.<p>Anyway I implemented a system of tags for grouping similar experiments. It&#x27;s less polished and sophisticated than this, but it was quick to implement and feels suitably lightweight.<p>I&#x27;m realizing now that the SQLite database was a misstep, mainly for adding notes and metadata. So I&#x27;m planning to just use the filesystem instead so that one&#x27;s raw experiment runs can be versioned as plaintext files (at the moment, just the static site is versioned)<p>But for now I need to get around to actually doing the experiments :(
jonwinstanley2 个月前
Interesting thoughts.<p>I’ve been using both Hotwire and HTMX recently.<p>The swapping in of different html is making a come back.
评论 #43348135 未加载
busymom02 个月前
On a similar note, does anyone know if it&#x27;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?<p>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?
评论 #43365865 未加载
评论 #43356603 未加载
ahallock2 个月前
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
评论 #43351848 未加载
djhedges2 个月前
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.
MaoSYJ2 个月前
Php templates leads to this type of implementation in a quite intuitive way. It’s refreshing seeing old patterns being rediscovered.
darepublic2 个月前
When I first heard about micro-frontends, this is where my mind went to
dredmorbius2 个月前
What were the arguments in favour of SPAs in the first place?<p>I&#x27;m finding it interesting that most of the top HN submissions (by popularity) matching &quot;single page app&quot; are critical, not positive. First 15 follow, all but 5 are negative:<p>- You probably don&#x27;t need a single-page app (<a href="https:&#x2F;&#x2F;journal.plausible.io&#x2F;you-probably-dont-need-a-single-page-app" rel="nofollow">https:&#x2F;&#x2F;journal.plausible.io&#x2F;you-probably-dont-need-a-single...</a>) 816 points | 6 years ago | 499 comments<p>- A single-page app is almost always worse than a multi-page app (<a href="https:&#x2F;&#x2F;www.gregnavis.com&#x2F;articles&#x2F;the-architecture-no-one-needs.html" rel="nofollow">https:&#x2F;&#x2F;www.gregnavis.com&#x2F;articles&#x2F;the-architecture-no-one-n...</a>) 289 points | 6 years ago | 145 comments<p>- The myth that you can’t build interactive web apps except as single page app (<a href="https:&#x2F;&#x2F;htmx.org&#x2F;essays&#x2F;you-cant&#x2F;" rel="nofollow">https:&#x2F;&#x2F;htmx.org&#x2F;essays&#x2F;you-cant&#x2F;</a>) 262 points | 4 months ago | 143 comments<p>- Building a single-page app with Htmx (<a href="https:&#x2F;&#x2F;jakelazaroff.com&#x2F;words&#x2F;building-a-single-page-app-with-htmx&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jakelazaroff.com&#x2F;words&#x2F;building-a-single-page-app-wi...</a>) 252 points | 5 months ago | 143 comments<p>- AWS Lambda as a back end for a single-page app (<a href="http:&#x2F;&#x2F;lg.io&#x2F;2015&#x2F;05&#x2F;16&#x2F;the-future-is-now-and-its-using-aws-lambda.html" rel="nofollow">http:&#x2F;&#x2F;lg.io&#x2F;2015&#x2F;05&#x2F;16&#x2F;the-future-is-now-and-its-using-aws-...</a>) 229 points | 10 years ago | 73 comments<p>- Create your own dysfunctional single-page app (<a href="https:&#x2F;&#x2F;tinnedfruit.com&#x2F;articles&#x2F;create-your-own-dysfunctional-single-page-app.html" rel="nofollow">https:&#x2F;&#x2F;tinnedfruit.com&#x2F;articles&#x2F;create-your-own-dysfunction...</a>) 208 points | 6 years ago | 138 comments<p>- The Single-Page-App Morality Play (<a href="https:&#x2F;&#x2F;www.baldurbjarnason.com&#x2F;2021&#x2F;single-page-app-morality-play&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.baldurbjarnason.com&#x2F;2021&#x2F;single-page-app-moralit...</a>) 207 points | 3 years ago | 131 comments<p>- Todos: a Backbone.js example Single-Page-App (with LocalStorage)(<a href="http:&#x2F;&#x2F;documentcloud.github.com&#x2F;backbone&#x2F;examples&#x2F;todos&#x2F;index.html" rel="nofollow">http:&#x2F;&#x2F;documentcloud.github.com&#x2F;backbone&#x2F;examples&#x2F;todos&#x2F;inde...</a>) 169 points | 14 years ago | 28 comments<p>- Your single-page app is now a polyfill (<a href="https:&#x2F;&#x2F;itnext.io&#x2F;your-single-page-app-is-now-a-polyfill-7881fb01694e" rel="nofollow">https:&#x2F;&#x2F;itnext.io&#x2F;your-single-page-app-is-now-a-polyfill-788...</a>) 164 points | 4 years ago | 158 comments<p>- Why I hate your Single Page App (<a href="https:&#x2F;&#x2F;medium.freecodecamp.org&#x2F;why-i-hate-your-single-page-app-f08bb4ff9134" rel="nofollow">https:&#x2F;&#x2F;medium.freecodecamp.org&#x2F;why-i-hate-your-single-page-...</a>) 107 points | 8 years ago | 120 comments<p>- Building a single page app with Backbone.js, underscore.js and jQuery (<a href="http:&#x2F;&#x2F;andyet.net&#x2F;blog&#x2F;2010&#x2F;oct&#x2F;29&#x2F;building-a-single-page-app-with-backbonejs-undersc&#x2F;" rel="nofollow">http:&#x2F;&#x2F;andyet.net&#x2F;blog&#x2F;2010&#x2F;oct&#x2F;29&#x2F;building-a-single-page-ap...</a>) 103 points | 14 years ago | 19 comments<p>- Why I hate your Single Page App (2016)(<a href="https:&#x2F;&#x2F;www.freecodecamp.org&#x2F;news&#x2F;why-i-hate-your-single-page-app-f08bb4ff9134&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.freecodecamp.org&#x2F;news&#x2F;why-i-hate-your-single-pag...</a>) 37 points | 11 months ago | 34 comments<p>- Sonny – Fast single page app engine (<a href="https:&#x2F;&#x2F;github.com&#x2F;felixmaier&#x2F;sonnyJS" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;felixmaier&#x2F;sonnyJS</a>) 36 points | 10 years ago | 25 comments<p>- You probably don&#x27;t need a single page app (<a href="https:&#x2F;&#x2F;plausible.io&#x2F;blog&#x2F;you-probably-dont-need-a-single-page-app" rel="nofollow">https:&#x2F;&#x2F;plausible.io&#x2F;blog&#x2F;you-probably-dont-need-a-single-pa...</a>) 31 points | 6 years ago | 24 comments<p>- Ask HN: What are the common pitfalls&#x2F;problems of Single Page App&#x27;s? 13 points | 9 years ago | 18 comments
评论 #43347346 未加载
createaccount992 个月前
Where&#x27;s the source code
starkparker2 个月前
DHTML rolling in its grave