Extract content from layout code

[filp]

Right now the way the content is laid out in different html files including the full layout means for every small change to, for example, the header, all the pages must also be modified one by one. This is obviously not scalable for the future, and makes any small change 10x harder than it could be.

I propose we:

• Extract the page "chrome" (header, footer, etc) to a layout file
• Extract the content section of the individual pages to individual files in a pages subfolder
• Setup a simple build system with Gulp to put everything together to deploy

Setting up something like Gulp is fairly straightforward, but it does mean a bit of extra effort, particularly for anyone doing design changes, or deploying the website - nonetheless, these should be familiar processes for anyone doing front-end development already. Additionally, it's fairly trivial to then hook up a CI system like CircleCI or TravisCI to build the deployable artifacts.

For those merely editing content, these extra steps should not be necessary.

I can do all the initial heavy lifting, and help anyone that needs help with getting nodejs/npm/gulp setup on their end.

Cheers! 🐴

[r0nk]

The html is definitely very messy and not scalable as it is (as I was learning html AS I was writing the website) so this is definitely a serious issue.

However, in terms of employing a build system, this is actually something I want to be cautious about.
If it takes 2x as long to build, but 10x more people know how to do it, then I would much rather leave it as it is. The people who are editing the html aren't necessarily people are are doing front end development already, some of them are doing small corrections on grammar, some of them are curious and want to know how the site works (that crowd especially on a site like this). The truth is, while a build system might be more efficient, people might not want to learn it.

I'm very new to web development, so is it possible to extract the chrome to a layout file without using a build system?

[waldyrious]

I'm very new to web development, so is it possible to extract the chrome to a layout file without using a build system?

You could use iframes (I'm doing that in the rewrite of my website so it doesn't require php which I was using mostly for its include() function), although to make them seamless requires a few manual tweaks, that in a few years will hopefully be made obsolete by the html5 seamless attribute.

[ddnn55]

You could use a frontend templating / includes system like the one found in
AngularJS. No iframes, no build system, but reusable HTML snippets.

On Sunday, November 2, 2014, Waldir Pimenta notifications@github.com
wrote:

I'm very new to web development, so is it possible to extract the chrome
to a layout file without using a build system?

You could use iframes (I'm doing that
waldyrious/waldyrious.github.io#11 in the
rewrite of my website so it doesn't require php which I was using mostly
for its include() function
http://stackoverflow.com/questions/3928331/equivalent-of-include-in-html),
although to make them seamless requires a few manual tweaks, that in a
few years http://caniuse.com/#feat=iframe-seamless will hopefully be
made obsolete by the html5 seamless attribute.

Reply to this email directly or view it on GitHub
#20 (comment).