Building Websites With Lots of Little HTML Pages
Posted by ForgotMyPassword17@reddit | programming | View on Reddit | 85 comments
Posted by ForgotMyPassword17@reddit | programming | View on Reddit | 85 comments
Big_Combination9890@reddit
And now lets imagine a world where we could indeed build webapps out of HTML pages, but didn't need to load the full page everytime something happens.
And we arrive at HTMX: https://htmx.org
spoki-app@reddit
While a segmented HTML file structure can simplify content organization for purely static sites, the architectural implications scale rapidly with dynamic content requirements. Maintaining data integrity across hundreds or thousands of discrete pages necessitates a robust content generation pipeline, often involving asynchronous data ingestion from external APIs. For instance, in fintech integrations, we frequently encounter scenarios where a minor data change requires idempotent propagation across numerous frontend components, regardless of whether they're delivered as full HTML pages or partial payloads. The overhead for managing cache invalidation and ensuring consistent user experience without introducing read-after-write inconsistencies can quickly outweigh initial perceived simplicity, particularly when considering build-time versus runtime rendering strategies. This approach often leads to increased complexity in CI/CD automation and necessitates meticulous handling of rate-limiting when sourcing dynamic content.
programming-ModTeam@reddit
No content written mostly by an LLM. If you don't want to write it, we don't want to read it.
UXUIDD@reddit
indeed a Full Circle, now back to basics. in html and we are done with most of unnecessary 'progress & development' that makes IT people miserable
Just bring a native
AyrA_ch@reddit
A native "include" would just be
<iframe>. Scripts running in these documents can even access each other on same origin.theinevitable22@reddit
When I started learning basic html and css in 2009-2010 in 8th grade, I came across iframes while browsing through w3schools, and it was just magic to my fresh smooth brain. That’s what I used for the school project to separate the navigation bar, the sliding images and the main page content, and it felt so satisfying back then. It felt more intuitive to me rather than trying to style the whole thing on a single page.
ILikeBumblebees@reddit
Or, to minimize client-side complexity, conventional server-side includes, which have been around for about 30 years:
<!--#include file="..." -->.tribak@reddit
Nice! Now let’s figure out a way to link them together…
stipo42@reddit
PHP is back on the menu boys
BlossomingBeelz@reddit
Ya'll are clowning but the internet was a much better place when it was just a lot of little web pages ;(
babblingbree@reddit
Don't stop there. Imagine linking those hypertext pages together with others using links. You'd turn the Internet into some kind of "world-wide web" of pages!
netgizmo@reddit
Linky text protocol!
teknoise@reddit
World wide!? That sounds like some kind of information superhighway.
dreamisle@reddit
I wish our government would build a rest area on the information superhighway where truckers can stop and take a loud dump, get a bunch of chips and honey buns and energy drinks from vending machines, and then sleep before they’re allowed to start driving again to their destination.
Metaphorically.
onetwentyeight@reddit
Methaphorically you say?
onetwentyeight@reddit
You're building something way out there man, it's like another world, or even a cyber-space.
RVelts@reddit
https://i.imgur.com/Ep69rj1.jpeg
staring_at_keyboard@reddit
A series of tubes, so to speak.
gimpwiz@reddit
Not a dump truck?
Tittytickler@reddit
Are you implying I should use my markup to turn the text i'm displaying into hyper text?
blastradii@reddit
My mind is blown. Didn’t realize a series of tubes can be converted to a series of links.
Plazmaz1@reddit
pls add me to ur webring
netgizmo@reddit
Is this where the
jessepence@reddit
This is literally worse in every way than just using JavaScript the way it was meant to be used. Without exaggeration, it is slower, less accessible, and it results in worse UX. To make matters worse, you still need JavaScript to make this work right!
There is literally no reason to build websites like this.
enbacode@reddit
This has to be a joke
jessepence@reddit
I got downvoted and flagged on HackerNews for pointing this out. They hate JavaScript so much over there that they embrace stupid shit like this.
nickchomey@reddit
I've also mostly been met with dismissal in the few places I've discussed this. I feel like I'm taking crazy pills. The amount of mental gymnastics hoops people are jumping through to justify this nonsense is ludicrous.
nickchomey@reddit
Yeah, I find it to be absolute insanity. And it's utterly bewildering to me that this is not the universal viewpoint
nickchomey@reddit
Here's the real gem I discovered from this mess. Invoker Commands Api. It natively links a button to a dialog or popover element. No JS needed at all.
Here's an example (along with how you'd do something like this with Datastar, which was my preferred method prior to discovering that api).
https://codepen.io/nickchomey/pen/RNoWPZz
yawaramin@reddit
See also related: Popover API. Very fun new HTML features that make pop-up menus and non-modal dialogs ridiculously easy. Genuinely one of the MVPs of the recent HTML features.
nickchomey@reddit
Yes, that was mentioned in my comment - invoker command api works with popover and dialog elements.
yawaramin@reddit
I am using Popover API in a side project. With the new CSS support for popover anchor positioning, it's a great, compact little API. Not sure if the CSS support works the same way for the Invoker Command API.
nickchomey@reddit
Not sure! I intend to implement some popover stuff soon, and positioning will be important. I'll explore both.
RGBrewskies@reddit
we've come full circle...
tbh a lot of web devs don't even know they're allowed to just have an index.html and an about.html and it all Just Works
notmsndotcom@reddit
Surely everything needs a package.json
RapunzelLooksNice@reddit
And gazillion dependencies, hopefully not hulul'ded.
AyrA_ch@reddit
Just
npm install everythingand whatever you need will almost certainly be there.(Please do not actually run this command)
EliSka93@reddit
Would that even work?
Is "everything" an acceptable value?
Wouldn't it be a wildcard like "*"
nz-whale@reddit
Its a NPM package that depends on every other NPM package
EliSka93@reddit
Oh that's fun.
Number one victim of supply chain attacks, but fun.
krileon@reddit
You don't understand. We HAVE to use React. It must be in everything. You must include a minimum of 50mb of dependencies, of which you have no clue what they're doing. This is a requirement of the modern web.
gimpwiz@reddit
Fucking build pipelines to make webpages, I swear to god
Ok-Craft4844@reddit
Its even more funny when you think about what the functional justification for SPAs are - special cases like games aside, I'd argue it often enough boils down to "should feel like an app", which in turn boils down to "keep the scrolling position after a click".
bradrlaw@reddit
Yup, all the sites / tools I have been building using gh copilot I only use plain html, js, and css. Zero dependencies, run fast, and much smaller attack surface for security issues.
Wore them to azure functions and such.
No need for frameworks for many use cases and can quickly stand up new projects and maintain existing ones.
stayoungodancing@reddit
Web development has turned into application development, but with HTML. It’s not often that web development is taught separately anymore. You’re made to work backwards to understand how it all connects together now.
yoyoloo2@reddit
Wait until you find out about datastar
nickchomey@reddit
I told the author directly on Mastodon about datastar and received no response. But I also learned of the new invoker command api from another comment there, which allows for all of this natively. Lots of cool stuff happening on the web platform these days.
want_to_want@reddit
For the first example (list posts by latest, trending etc) the technique works well. But the view transition doesn't add much to the user experience. It should just feel like a normal navigation.
For the second example (hamburger menu), I think it doesn't work well. It's better to show the menu partially above the current page, and I don't like the hack of tying X to history.back.
For the third example (search), I also don't think it works well. The common user expectation is that the search bar exists in the current page, not replaces it.
To me this highlights the awkwardness of view transitions. They're a neat idea. But for interactions that feel to the user like navigations between pages, like example 1, view transitions aren't needed. And for interactions that feel like within-page interactivity, there shouldn't be a page navigation anyway, so you don't need view transitions either.
I've tried using view transitions in a couple of my sites, but ended up removing them, basically for the reason above.
gyphie@reddit
This is a joke, right? They can't really be relabeling HTML and web servers with some new, hip label and imaging they've discovered some new approach to web development, right?
geon@reddit
Personally, I didn’t know about cross-document css transitions.
stayoungodancing@reddit
They’re pretty much brand brand new. Called view transitions
CornedBee@reddit
And not supported in Firefox yet. At least the cross-document version.
But they degrade so nicely. No support? The new page just loads instead of sliding in.
Kok_Nikol@reddit
Yes! It's so nice
tj-horner@reddit
Exactly. Everyone dunking on the author is missing the point.
amejin@reddit
I'm case it isn't clear from the other comment - there is this really weird cycle happening in AI space where things we have done for years in web tech are getting "discovered" as solutions to pipeline bottlenecks and rebranded specifically for AI use cases as if they're revolutionary.
The irony of LLMs compressing and making available the world's information is that it now has made finding meaningful information significantly harder - you describe a problem, your sychophant tells you you're a unique snowflake and that only you two can solve your problem, and voila! A vibe coded new solution has been manufactured. Ship it!
yawaramin@reddit
The page title 'LLMs' is obviously a joke. It's poking fun at the current GenAI craze.
HildartheDorf@reddit
What next, we avoid code duplication by some kind of mechanism?
webdevop@reddit
Next up bro will invent a library that will run common JavaScript functionality but with a smaller syntax/function calls.
HildartheDorf@reddit
Some kind of easy JavaScript query API? JsQuery maybe?
harrison_314@reddit
I used iframe for that at the time.
psyon@reddit
I had a host once that didn't support server side includes, so I wrote a cgi script that converted html to a whole bunch of document.write() calls, and included the template files with a script tag.
harrison_314@reddit
Those were the days when layout was done with tables. Since then, static site generators and HTMX have emerged.
chicknfly@reddit
Hang on, are you telling me we’re going to add various includes via the server side?
UnidentifiedBlobject@reddit
How will the server know when to check for these includes? Maybe a new extension like .shtml ?
chicknfly@reddit
Obligatory XKCD
HildartheDorf@reddit
Gosh, we're living in the future.
gamahead@reddit
Wait, what 🤯?! Mind actually blown. I have a header web component in a separate .js I link in each page for dedup
Salamok@reddit
and if we could get apache to do it for us it would save so much work.
Glittering_Code_9640@reddit
Dreamweaver still exists lol
shitthrower@reddit
I've come to the opinion that for the vast majority of apps I've built, I could have used HTML + CSS (all built server side).
I can sprinkle in little bits of interactivity using something like HTMX. And I'll have a website that is very easy to optimise, has phenomenal backwards compatibility, and gets rid of a whole class of issues associated with SPAs.
I often regret in my career not pushing back more on "requirements" that ended up requiring a more complicated app, whereas the customer would have been just has happy with a simpler solution.
zam0th@reddit
Zoomers discovered the backbone of the 90s' Internet - SSI.
brunhilda1@reddit
This really feels like taking something like an offline vault/brain (Obsidian, etc) and tendering it to a static site.
I'm reminded of Forester which was developed with this workflow in mind.
Perfect-Campaign9551@reddit
How old is this guy? What the holy hell. Does he really think this is New novel concept?
What the hell is wrong with software engineering. For God's sake.
That's it's I want to retire fuck this shit
UXUIDD@reddit
.. "build with a lots of little html pages" ...
;-)
stayoungodancing@reddit
Sometimes when you’re so deep in web frameworks, it’s good to go back to the basics and try it again. It’s a fun read.
IanSan5653@reddit
There's going to be a ton of sarcastic comments here but the article is a creative read about view transitions. It's worth actually reading it.
amemingfullife@reddit
The title is begging to be trolled.
The cross-document view transitions is the star here, and should have been the in title. I had never heard of them until I read this and it does solve one of the main problems with having super simple HTML sites - the moment you want them to feel modern you need to add hundreds of lines of JS.
DowntownBake8289@reddit
You mean websites on a smart phone?
waterkip@reddit
This post is worthless without code examples.
stayoungodancing@reddit
I love it. Most CMS/content-based websites don’t really need progressive enhancements. Actually, most websites don’t need it at all. If we look at websites as just collections of interactive documents/“pieces of paper” that get passed back and forth, sites like this make sense.
I need to look at the DOM, but it handles navigation well with state replacements on the menu and close button. Goes to show we can just let HTML handle itself :)
ZirePhiinix@reddit
React was made by Facebook because they have Facebook problems. Literally nobody else will have Facebook problems all the time.
tav_stuff@reddit
Bro discovered HTML this is so funny
lenswipe@reddit
Congrats - you just invented geocities.
bzbub2@reddit
on desktop, the illusion of a 'normal' dropdown hamburger menu is nonexistent but the message is largely fine.
yawara25@reddit
Imagine that!