13
you are viewing a single comment's thread
view the rest of the comments
view the rest of the comments
this post was submitted on 03 Aug 2023
13 points (93.3% liked)
Web Development
3430 readers
1 users here now
Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development
What is web development?
Web development is the process of creating websites or web applications
Rules/Guidelines
- Follow the programming.dev site rules
- Keep content related to web development
- If what you're posting relates to one of the related communities, crosspost it into there to help them grow
- If youre posting an article older than two years put the year it was made in brackets after the title
Related Communities
- !html@programming.dev
- !css@programming.dev
- !uiux@programming.dev
- !a11y@programming.dev
- !react@programming.dev
- !vuejs@programming.dev
- !webassembly@programming.dev
- !javascript@programming.dev
- !typescript@programming.dev
- !nodejs@programming.dev
- !astro@programming.dev
- !angular@programming.dev
- !tauri@programming.dev
- !sveltejs@programming.dev
- !pwa@programming.dev
Wormhole
Some webdev blogs
Not sure what to post in here? Want some web development related things to read?
Heres a couple blogs that have web development related content
- https://frontendfoc.us/ - [RSS]
- https://wesbos.com/blog
- https://davidwalsh.name/ - [RSS]
- https://www.nngroup.com/articles/
- https://sia.codes/posts/ - [RSS]
- https://www.smashingmagazine.com/ - [RSS]
- https://www.bennadel.com/ - [RSS]
- https://web.dev/ - [RSS]
founded 1 year ago
MODERATORS
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, although 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 a .js file (or files) 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, although most browsers will parse the page as if the included files were literally copied and pasted into the base HTML at the point where they are included.
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.