6 ms·

This is a bit off topic, but I really wish the idea of including HTML imports (https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports https://

This is a bit off topic, but I really wish the idea of including HTML imports (https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports https://developer.mozilla.org/en-US/docs/Web/Web_Components/...) was taken seriously. There's a lot of people that just want to make a simple HTML site with templates for things like the navigation menu, without a bunch of nasty JavaScript goop that can't be search indexed easily, and the ability to include simple templates using HTML would have been an huge resource for those people and for search engines. I think it really shows how much of a bubble the web often lives in now. We used to be able to just make a solid web site with simple HTML and a text editor. I shouldn't need to be an extremely hardcore JS programmer or use a crazy static site generator or overengineered LAMP backend to do basic things like reusing HTML and other things that could be largely accomplished with just HTML itself.

vosper 8y ago
> We used to be able to just make a solid web site with simple HTML and a text editor. I shouldn't need to be an extremely hardcore JS programmer or use a crazy static site generator or overengineered LAMP backend to do basic things like reusing HTML and other things that could be largely accomplished with just HTML itself. None of that functionality has gone away, has it? A lot of what a static site generator is doing is saving you copy-pasting a bunch of HTML across files, by giving you templates for common functionality. But you still end up with plain HTML files, and you can certainly get there by editing them all by hand in a text editor.
- Scarbutt 8y ago
  I think you missed his point, he wants to be able to compose html without having to resort to a programming language.
  - pjmlp 8y ago
    Easy, configure Apache to serve Server Side Includes, the feature is still there. https://httpd.apache.org/docs/2.4/howto/ssi.html https://httpd.apache.org/docs/2.4/howto/ssi.html
    - irrational 8y ago
      Why should we need to do that? We don't have to do that to import external JS and CSS files.
wwweston 8y ago
The ability to have the browser request markup for inclusion via URL in the same way it does images is a longtime wish of mine. There are some potential security issues... most of which we have anyway with the approach that requires JS in order to import content from another URL, and having a simple way to pull in document fragments would do away with a good chunk of the things we've had to have a CMS or site generator to do.
thrower123 8y ago
This sounds a lot like ASP.NET with Razor. Split out the pieces into Razor partials and dump them in where needed with Html.Partial(). I haven't really had much chance to play with it, but the newer Razor Pages are probably an even easier way to build a simple website.
- sixdimensional 8y ago
  You don't need to go nearly that far at all. Let's go back in time.. ah.. server-side includes[1]! Problem solved, and we didn't need anything more than a web server. Being able to do this client side with no code? Yeah, would be nice :) [1] https://en.wikipedia.org/wiki/Server_Side_Includes https://en.wikipedia.org/wiki/Server_Side_Includes
defanor 8y ago
XML stylesheets can be used for that (and for more complex processing as well). Though it may be a better idea to apply those before publishing, for the sake of compatibility (and then it's just static website generation).
- akvadrako 8y ago
  Ah, back in the day when the major browsers all supported XSLT stylesheets, it seemed like the obvious way forward.
  - deleted 8y ago
    [deleted]
irrational 8y ago
I know. It's pretty shocking that we can load external CSS and JS files, but not HTML files.
spankalee 8y ago
HTML Modules are the spiritual successor to HTML Imports that work with the standard JS module loading system: https://github.com/w3c/webcomponents/issues/645 https://github.com/w3c/webcomponents/issues/645
- styfle 8y ago
  For those following along at home, the reason why you don't need HTML Imports once JS Templates and Modules exist is because HTML Imports are not usable without JS! So you can implement a more elegant solution yourself with a couple lines. Let's assume you want to use 3 different HTML templates on a page (the html content doesn't matter much for this example). Here's the example usage of HTML Templates from html5rocks.com: <script> function handleLoad(e) { console.log('Loaded import: ' + e.target.href); } function handleError(e) { console.log('Error loading import: ' + e.target.href); } </script> <link rel="import" href="example1.html" onload="handleLoad(event)" onerror="handleError(event)" /> <link rel="import" href="example2.html" onload="handleLoad(event)" onerror="handleError(event)" /> <link rel="import" href="example3.html" onload="handleLoad(event)" onerror="handleError(event)" /> <script> function importHtml(selector) { var content = document.querySelector(selector).import; var el = content.querySelector('.warning'); document.body.appendChild(el.cloneNode(true)); } importHtml('link[href="example1.html"]'); importHtml('link[href="example2.html"]'); importHtml('link[href="example3.html"]'); </script> Now let's compare the same feature with ES6 Modules and Templates using a `helper.js` file. export async function importHtml(url) { try { let res = await fetch(url); let html = await res.text(); let template = document.createElement('template'); template.innerHTML = html; let el = template.content.querySelector('.warning'); document.body.appendChild(el.cloneNode(true)); } catch (e) { console.log(`Error fetching html: ${url}`); } } Then we can import the modules on the page in a very clean way...no HTML Imports spec here. <script type="module"> import { importHtml } from './helper.js'; importHtml('example1.html'); importHtml('example2.html'); importHtml('example3.html'); </script> My point is that you don't need HTML imports and you'll have to use JS even with HTML imports so just use JS all the way :)
  - 8y ago
maxxxxx 8y ago
Totally agree. A lot of simple brochure sites could be done that way.
andrepd 8y ago
I just use cpp to #include files. Granted, it's barebones and not very extensible.

vosper 8y ago

> We used to be able to just make a solid web site with simple HTML and a text editor. I shouldn't need to be an extremely hardcore JS programmer or use a crazy static site generator or overengineered LAMP backend to do basic things like reusing HTML and other things that could be largely accomplished with just HTML itself. None of that functionality has gone away, has it? A lot of what a static site generator is doing is saving you copy-pasting a bunch of HTML across files, by giving you templates for common functionality. But you still end up with plain HTML files, and you can certainly get there by editing them all by hand in a text editor.

Scarbutt 8y ago
I think you missed his point, he wants to be able to compose html without having to resort to a programming language.
- pjmlp 8y ago
  Easy, configure Apache to serve Server Side Includes, the feature is still there. https://httpd.apache.org/docs/2.4/howto/ssi.html https://httpd.apache.org/docs/2.4/howto/ssi.html
  - irrational 8y ago
    Why should we need to do that? We don't have to do that to import external JS and CSS files.

wwweston 8y ago

The ability to have the browser request markup for inclusion via URL in the same way it does images is a longtime wish of mine. There are some potential security issues... most of which we have anyway with the approach that requires JS in order to import content from another URL, and having a simple way to pull in document fragments would do away with a good chunk of the things we've had to have a CMS or site generator to do.

thrower123 8y ago

This sounds a lot like ASP.NET with Razor. Split out the pieces into Razor partials and dump them in where needed with Html.Partial(). I haven't really had much chance to play with it, but the newer Razor Pages are probably an even easier way to build a simple website.

sixdimensional 8y ago
You don't need to go nearly that far at all. Let's go back in time.. ah.. server-side includes[1]! Problem solved, and we didn't need anything more than a web server. Being able to do this client side with no code? Yeah, would be nice :) [1] https://en.wikipedia.org/wiki/Server_Side_Includes https://en.wikipedia.org/wiki/Server_Side_Includes

defanor 8y ago

XML stylesheets can be used for that (and for more complex processing as well). Though it may be a better idea to apply those before publishing, for the sake of compatibility (and then it's just static website generation).

akvadrako 8y ago
Ah, back in the day when the major browsers all supported XSLT stylesheets, it seemed like the obvious way forward.
- deleted 8y ago
  [deleted]

irrational 8y ago

I know. It's pretty shocking that we can load external CSS and JS files, but not HTML files.

spankalee 8y ago

HTML Modules are the spiritual successor to HTML Imports that work with the standard JS module loading system: https://github.com/w3c/webcomponents/issues/645 https://github.com/w3c/webcomponents/issues/645

styfle 8y ago
For those following along at home, the reason why you don't need HTML Imports once JS Templates and Modules exist is because HTML Imports are not usable without JS! So you can implement a more elegant solution yourself with a couple lines. Let's assume you want to use 3 different HTML templates on a page (the html content doesn't matter much for this example). Here's the example usage of HTML Templates from html5rocks.com: <script> function handleLoad(e) { console.log('Loaded import: ' + e.target.href); } function handleError(e) { console.log('Error loading import: ' + e.target.href); } </script> <link rel="import" href="example1.html" onload="handleLoad(event)" onerror="handleError(event)" /> <link rel="import" href="example2.html" onload="handleLoad(event)" onerror="handleError(event)" /> <link rel="import" href="example3.html" onload="handleLoad(event)" onerror="handleError(event)" /> <script> function importHtml(selector) { var content = document.querySelector(selector).import; var el = content.querySelector('.warning'); document.body.appendChild(el.cloneNode(true)); } importHtml('link[href="example1.html"]'); importHtml('link[href="example2.html"]'); importHtml('link[href="example3.html"]'); </script> Now let's compare the same feature with ES6 Modules and Templates using a `helper.js` file. export async function importHtml(url) { try { let res = await fetch(url); let html = await res.text(); let template = document.createElement('template'); template.innerHTML = html; let el = template.content.querySelector('.warning'); document.body.appendChild(el.cloneNode(true)); } catch (e) { console.log(`Error fetching html: ${url}`); } } Then we can import the modules on the page in a very clean way...no HTML Imports spec here. <script type="module"> import { importHtml } from './helper.js'; importHtml('example1.html'); importHtml('example2.html'); importHtml('example3.html'); </script> My point is that you don't need HTML imports and you'll have to use JS even with HTML imports so just use JS all the way :)
- 8y ago

maxxxxx 8y ago

Totally agree. A lot of simple brochure sites could be done that way.

andrepd 8y ago

I just use cpp to #include files. Granted, it's barebones and not very extensible.