6 ms·
This was the rabbit hole that I started down in the late 90s and still haven’t come out of. I was the webmaster of the Analog Science Fiction website and I was
by dimal 1y ago
This was the rabbit hole that I started down in the late 90s and still haven’t come out of. I was the webmaster of the Analog Science Fiction website and I was building tons of static pages, each with the same header and side bar. It drove me nuts. So I did some research and found out about Apache server side includes. Woo hoo! Keeping it DRY (before I knew DRY was a thing).
Yeah, we’ve been solving this over and over in different ways. For those saying that iframes are good enough, they’re not. Iframes don’t expand to fit content. And server side solutions require a server. Why not have a simple client side method for this? I think it’s a valid question. Now that we’re fixing a lot of the irritation in web development, it seems worth considering.
- econ 1y agoYou can message the page dimensions to the parent. To do it x domain you can load the same url into the parent with the height in the #location hash. It won't refresh that way.
- dimal 1y agoI know it’s possible to work around it, but that’s not the point. This is such a common use case that it seems worthwhile to pave the cowpath. We’ve paved a lot of cowpaths that are far less trodden than this one. This is practically a cow superhighway. We’ve built an industry around solving this problem. What if, for some basic web publishing use cases, we could replace a complex web framework with one new tag?
- econ 1y agoI couldn't agree more. <div src="foo.txt"></div>
- wizzwizz4 1y agohttps://www.w3.org/TR/xhtml2/introduction.html https://www.w3.org/TR/xhtml2/introduction.html > XHTML 2 takes a completely different approach, by taking the premise that all images have a long description and treating the image and the text as equivalents. In XHTML 2 any element may have a @src attribute, which specifies a resource (such as an image) to load instead of the element.
- econ 1y agoThe content of the div can be used to support legacy browsers. It can have a link, iframe, a message or an outdated version of the content/menu/header/footer etc
- lelanthran 1y ago> We’ve built an industry around solving this problem. What if, for some basic web publishing use cases, we could replace a complex web framework with one new tag? I actually did that replacement, with a few enhancements (maybe 100 lines of code, total?). It's in arxiv pending at the moment. In about two days it will be done and I'll post a Show HN here.
- econ 1y agoTaps foot....
- atoav 1y agoI mean in 1996s netscape you could do this (I run the server for a website that still uses this): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <frameset cols="1000, *"> <frame src="FRAMESET_navigation.html" name="navigation"> <frame src="FRAMESET_home.html" name="in"> </frameset> </html> The thing that always bugged me about frames is that they are too clever. I don't want to reload only the frame html when I rightclick and reload. Sure the idea was to cache those separately, but come on — frames and caching are meant to solve two different problems and by munching them together they somewhat sucked at solving either. To me includes for HTML should work in the dumbest way possible. And that means: Take the text from the include and paste it where the include was and give the browser the resulting text. If you want to cache a nav section separately because it appears the same on every page lets add a cache attribute that solves the problem independently: <nav cache-id="deadbeefnav666"> <some-content></etc> </nav> To tell the browser it should load the inner html or the src of that element from cache if it has it. Now you could convince me thst the include should allow for more, but it being dumb is a feature not a bug.
- lodovic 1y agoNitpick: the HTML4 spec was released in December 1997, and HTML4.01 only in December 1999 so it probably wouldn't have run in 1996s Netscape.
- luotuoshangdui 1y agoHTML is a markup language, not a programming language. It's like asking why Markdown can't handle includes. Some Markdown editors support them (just like some server-side tools do for HTML), but not all.
- paulddraper 1y agoThat’s the Hyper part of HTML, and what makes it special. It’s made to pull in external resources (as opposed to other document formats like PDF). Scripts, stylesheets, images, objects, favicons, etc. HTML is thematically similar.
- ummonk 1y agoNo, HTML is fundamentally different because (for a static site without any JS dom manipulation) it has all the semantic content, while stylesheets, images, objects, etc. are just about presentation.
- Aloisius 1y agoIframes exist.
- paulddraper 1y agoImages are content. Videos are content. Objects/iframes are content. The only one that is presentational is stylesheets.
- ummonk 1y agoImages and videos are not semantic content. The alt attributes that describe them on the other hand are indeed semantic content.
- DemocracyFTW2 1y ago> Images and videos are not semantic content Something in that tenet does not compute with me.
- api 1y agoThe web seems like it was deliberately designed to make any form of composability impossible. It’s one of the worst things about it as a platform. I’m sure some purist argument has driven this somewhere.
- giantrobot 1y agoI look back longingly at the promise of XML services in the early days of Web 2.0. Before the term just meant JavaScript everywhere. All sorts of data could be linked together to display or remix by user agents.
- PaulHoule 1y agoI think of all the “hygienic macro” sorts of problems. You really ought to be able to transclude a chunk of HTML and the associated CSS into another document but you have to watch out for ‘id’ being unique never mind the same names being used for CSS classes. Figuring out the rendering intent for CSS could also be complicated: the guest CSS might be written like .container .style { … } Where the container is basically the whole guest document but you still want those rules to apply…. Maybe, you want the guest text to appear in the same font as the host document but you still want colors and font weights to apply. Maybe you want to make the colors muted to be consistent with the host document, maybe the background of the host document is different and the guest text isn’t contrasts enough anymore, etc.
- codr7 1y agoThe optimal solution would be using a template engine to generate static documents.
- keeganpoppen 1y agomacros!
- JadeNB 1y ago> The optimal solution would be using a template engine to generate static documents. This helps the creator, but not the consumer, right? That is, if I visit 100 of your static documents created with a template engine, then I'll still be downloading some identical content 100 times.
- giantrobot 1y agoXSLT solved this problem. But it had poor tool support (DreamWeaver etc) and a bunch of anti-XML sentiment I assume as blowback from capital-E Enterprise stacks going insane with XML for everything. XSLT did exactly what HTML includes could do and more. The user agent could cache stylesheets or if it wanted override a linked stylesheet (like with CSS) and transform the raw data any way it wanted.
- px1999 1y agoThe Umbraco CMS was amazing during the time that it used and supported XSLT. While it evaluated the xslt serverside it was a really neat and simple approach.
- codr7 1y agoTrue for any server side solution, yes. On the other hand it means less work for the client, which is a pretty big deal on mobile.
- Klaster_1 1y agoCompression Dictionary Transport [0] seems like something that can potentially address this. If you squint, this looks almost like XSLT. [0] https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Compression_dictionary_transport https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Com...
- unilynx 1y ago> Iframes don’t expand to fit content Actually, that was part of the original plan - https://caniuse.com/iframe-seamless https://caniuse.com/iframe-seamless
- omneity 1y agoI used the seamless attribute extensively in the past, it still doesn't work the way GP intended, which is to fit in the layout flow, for example to take the full width provided by the parent, or automatically resize the height (the pain of years of my career) It worked rather like a reverse shadow DOM, allowing CSS from the parent document to leak into the child, removing borders and other visual chrome that would make it distinguishable from the host, except you still had to use fixed CSS layouts and resize it with JS.
- fooker 1y ago> Why not have a simple client side method for this? Like writing a line of js?
- sbarre 1y agoA line of JS that has to run through the Javascript interpreter in your browser rather than a simple I/O operation? If internally this gets optimized to a simple I/O operation (which it should) then why add the JS indirection in the first place?
- fooker 1y ago> simple I/O operation That’s the reason it doesn’t get implemented. Nobody wants the simple I/O operation based inclusion. The moment you try to propose it, there’ll be demands to add conditional logic or macros. More relevant for the web is instantiating html templates, which will undoubtedly get piled onto such a feature. And pretty soon you have yet another: > interpreter in your browser Might as well use the one already there.
- rbanffy 1y agoA block of in-line JavaScript stops the renderer until it runs because its output cannot be determined before it completes.
- matchagaucho 1y agoI've become a fan of https://htmx.org https://htmx.org for this reason. A small 10KB lib that augments HTML with the essential good stuff (like dynamic imports of static HTML)
- HumanOstrich 1y agoSeems like overkill to bring in a framework just for inlining some static html. If that's all you're doing, a self-replacing script tag is neat: <script> function includeHTML(url) { const s = document.currentScript fetch(url).then(r => r.text()).then(h => { s.insertAdjacentHTML('beforebegin', h) s.remove() }) } </script> ... <script> includeHTML('/footer.html') </script> The `script` element is replaced with the html from `/footer.html`.
- librasteve 1y agothis here is the main idea of HTMX - extended to work for any tag p, div, content, aside … there are many examples of HTMX (since it is a self contained and tiny) being used alongside existing frameworks of course for some of us, since HTMX brings dynamic UX to back end frameworks, it is a way of life https://harcstack.org https://harcstack.org (warning - raku code may hurt your eyes)
- rapnie 1y agoIf you want it more straight-forward and simple hypermedia approach, then check out https://data-star.dev https://data-star.dev (highly recommended, there are great youtube video's where the maintainers discuss their insights). Following up where htmx took things.
- johnisgood 1y agoBut this requires JavaScript...
- PaulHoule 1y ago
- EvanAnderson 1y agoServer-side includes FTW! When a buddy and I started making "web stuff" back in the mid-90s the idea of DRY also just made sense to us. My dialup ISP back then didn't disable using .htaccess files in the web space they provided to end users. That meant I could turn on server-side includes! Later I figured out how to enable CGI. (I even went so far as to code rudimentary webshells in Perl just so I could explore the webserver box...)
- rbanffy 1y ago> Woo hoo! Keeping it DRY (before I knew DRY was a thing) I still remember the script I wrote to replace thousands (literally) slightly different headers and footers in some large websites of the 90s. How liberating to finally have that.
- RenThraysk 1y agoDon't Service Workers API provide this now, essentially act like a in-browser proxy to the server. https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API https://developer.mozilla.org/en-US/docs/Web/API/Service_Wor...
- bradly 1y agoRational or not, some of us try very hard to avoid JavaScript based solutions.
- RenThraysk 1y agoAs a dev from the early 90s, I share the sentiment. Watching javascript become more and more complex and bloated for little to no benefit to the end user.