modular HTML

hello! a while ago i found this amazing article by Scott Jehl which is incredibly useful for making sites a little bit easier to build over here in the land of no server side, and it all relies on this small & genius snippet of html


<iframe src="includethis.html" 
onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
the way it works, is that it loads the iframe, and when it loads, it looks at the root of the iframe'd page, copies it, puts it before the iframe in the current page, and then deletes the iframe, leaving no trace that it was there in the first place, this is incredibly useful for reusing parts of the website that you dont want to copy paste over and over without having to handle iframe elements, its also pretty network-friendly, since modern browsers will remember the contents of those iframes and wont redownload them after the first time, making page loads that tiny bit faster.
However, there is a small caveat, that this wont work with local files because of security reasons, but setting up a local server to just load your things is very easy when you have python installed, you can just follow this tiny tutorial!