Recently, I’ve been doing some pro bono work for a client who has a relatively ancient website that is essentially just HTML and CSS, with a tiny bit of horrible JavaScript that I’ve now realized was generated by a very old version of DreamWeaver. In an effort (maybe in vain) to at least clean things up to make it more workable for myself, I realized I’m kind of at a loss as to how I could “DRY up” some of this code.
The prime example: all of the pages are using the same header, navigation bar, and footer. Currently, this code is just copy and pasted into every single HTML file. What is the simplest way I could go about abstracting that into one single place and just referencing it as needed?
I’m well-versed in modern front-end techniques with React, but I feel like there’s some basic solution to this problem that I’m just not aware of. Should I be looking into jQuery? Could I achieve this just with JavaScript interacting with the DOM? Any suggestions are greatly appreciated!