I’m not new to programming, but I am somewhat new to web development and I’m trying to figure out the most preferred way of taking a standalone header from one html document and adding it to other html documents without code duplication. If possible I want to do this with Javascript so I can learn with more basic tools before expanding further.
I’ve researched this a fair bit, but the advice is a bit confusing since it either seems out of date or possibly not the most secure way of handling things. Is there a preferred way of doing something like this?
After reading your responses to some other comments here, I might be able to offer some advice. I haven’t done professional web dev for a long time now, but I’ve kept my hand in a little with hobby projects.
First, you need to imagine a wall between the server and the client (browser). Unless you deliberately build a connection between the two, it won’t exist. A standard static webserver only sends flat files to the browser. Now, if I understand what you’re thinking, what you want to do is technically possible, but it’s kind of like getting milk from the corner store by moving the store’s fridge into your kitchen.
Usually what you’re talking about is done with dynamically served pages, using some kind of server-side scripting. The server-side script grabs all the pieces of your page from files, assembles them on the server, then sends the finished page to the user’s browser (on the other side of the “wall”) as a regular, static page. I haven’t used it myself, but I believe that Node.js allows us to use JavaScript as a server-side scripting language, but you still need to have it installed on your server (as with any server-side scripting language).
It should certainly be possible to achieve a similar end result by sending an initial page to the client, loaded with JavaScript that performs subsequent requests from the browser back to the server, and assembles the page on the client’s side, but doing your basic page construction this way would probably be considered by most as a really messy solution.
Here’s an article I found which may give you some tips for further research: https://css-tricks.com/the-simplest-ways-to-handle-html-includes/
If I absolutely had to do something like this with client-side JavaScript, I’d probably make .js file(s) with each section (i.e. header, footer, etc.) being handled by a single function that takes a CSS DIV id and fills it from static strings with insertAdjacentHTML() calls. This is nasty enough without trying to write a script that loads and parses other HTML pages from within the browser.
It’s easy enough to include extra .js files in an HTML file; you just need to make sure that the included files have loaded before you start trying to alter your page in the browser. Keep in mind that those “included” .js files are actually going to be fetched by the user’s browser in a separate HTTP exchange, after the inital page request.
That makes sense. Thanks for the well thought out explanations. I am finding that I need to adjust my assumptions about how things work on the webdev side since it seems to work a bit differently than I expected. I’m still trying to feel out what I should and shouldn’t be using for particular tasks, so posts like these are helpful.
p sure you’re looking for a web component. You’ll create a new component that can be used like
<my-header></my-header>
Then import the file with the definition of the custom web component on both pages et voilà! You’ve shared your header between pages.
I will admit I’m a bit biased because I’m the author of a web component framework: https://tybalt.org . But! I still think that’s what you’re looking for.
I haven’t used web components, but from everything I have read, it’s the way to do this without using frameworks or templating or whatever.
For OP:
Moz docs:
https://developer.mozilla.org/en-US/docs/Web/API/Web_componentsThis article seems to address exactly what you want?
https://www.freecodecamp.org/news/reusable-html-components-how-to-reuse-a-header-and-footer-on-a-website/Here are some articles I have skimmed and seem useful?
https://coderpad.io/blog/development/intro-to-web-components-vanilla-js/
I would think about something like these:
Yeah I was planning on learning Hugo and Jekyll after I get a bit further along with HTML, CSS and Javascript. I know those would make parts of what I’m trying to do easier, but I want to try to have a deeper understanding of what can and can’t or should and shouldn’t be done with vanilla tools. I feel like know the why behind these things will be helpful.
Ah, I see. If you want to move around HTML using your own code, I would also think about using an XML library in your language of choice.
Handling the HTML as a tree rather than lines of code will make the kind of operations you mention much simpler.
On it’s face, this is a very odd request. I feel like, in trying to simplify the question, you’ve left out a lot of pertinent details.
My suspicion is that you have a specific problem you’re trying to solve, and, due to lack of experience with web development, you’ve settled on this solution of using JS to copy an html snippet from one document to another, when a proper solution to the actual problem is probably nothing like that. Without knowing what the original problem is and what environment the code would be running in, I’m afraid it’s going to be nearly impossible to offer any suggestions.
You’re trying to reinvent the wheel. This has been solved by modern JS frameworks. Learning one of them will get you a safer better site than trying to “Frankenstein” your own with little experience.
I disagree. The fundamentals of the web specs are more important than ever, and many projects don’t even need a frontend framework.
I saw custom elements the other day https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements
They might achieve what you want.
Are you using Javascript on the server, such as with Express?
I just told my wife how impressed I am to have gotten so many helpful responses. You all are great!
