Thank you.
Regards,
Sara

Start with HTML5 boilerplate code (no affiliation), then similar to PHP – add a section for %topscripts% (resources that need to be available for the page to load correctly), %bottomscripts% (code that needs to be present for the CURRENT page to function), and %body% (THIS page’s actual code) that you can replace on the fly. This will reduce the total webpage code you have to store for each subsequent page you serve (like a compression, you only store what is genuinely unique, then call instances of it) and give you PHP-like behavior.

Move from GET to POST – this moves variables from the URL to a packet. A trick this enables, is that you can have all of your links go to “http://{URL}/#” and pass the actual site navigation and session data in POST variables instead of different pages – the “index” page would need to be programmed to look for navigation variables instead of expanding your actual file system, what you return is whatever the server wants to return based on your server-side code. It’s rabbit hole of what this method enables, but if you are using one of the ESP32-https options out there, this enables you a bit more obfuscation on the client side since you aren’t leaking any of the navigation in plain-text the data you put in the returned html code can be masked by taking the resource you would be linking to and SHA256 hashing it with a counter and storing that result in a look up table for the session.

Think of it like this: If I request page “/”, with “#” (bookmark “null”), and POST variable “page=status” (unobfuscated in this example), the server will see a request for root-index with no bookmark (a throw-away trigger to open a dialog between the client and server, just think of this as a starting point) with the page variable set to “status”. This first variable in your request, much like the URL itself, can tell your server if it even needs to serve a human-readable page out, or just return say a JSON encoded reply with some data to update a UI. If it does need to output the full page, the webserver code will begin streaming out the html code and when it gets to the place holder “%topscripts%” that will trigger another section of your code (and you’ll have the page variable set from the request) to make a decision about what javascript files you’d need to serve, then at the “%body%” placeholder you’d be triggering another replacement section of your code, then the same for “%bottomscritps%”.

I also highly recommend getting an install of InkScape (again, no affiliation) and using SVG graphics throughout your UI – because SVG is by design a tagged file type, you can literally in-line it in the body HTML – AND THEN MANIPULATE IT by scripts. Examples: You can draw a layer and then programatically hide/unhide it, you can change the color of an object like a light indicator, you can change shape or orientation of subset of the graphics – like rotating a needle around a gauge (simple operation of a ROTATE animation to a mathematically relevant angle based on a variable value returned by your ESP32).