Ask HN: Pure HTML micro-front end

1 point

8 months ago

I'm working on a project for people who are new to web development and open source. It's called https://github.com/Roshanjossey/code-contributions. Users will go through a tutorial, add an HTML file and submit a pull request to the same repository on GitHub.

I have two self imposed restrictions for this project.

1. Users shouldn't have to install anything or setup tooling 2. Their changes should be a separate HTML file

Reasoning behind (1) is to make the project more accessible. I'm assuming users would already have a web browser, text editor and terminal emulator on their machine. I'd like them to be able to complete the tutorial without installing any tooling (runtime, compiler etc) of a language. I'm expecting users to open `index.html` in their browser and see their changes.

Reasoning behind (2) is to avoid a big HTML file and merge conflicts

To implement fragments, I tried vanilla js, htmx https://unpoly.com/ etc. My implementations ended up needing a server to be run on local (which goes against (1))

I ended up with a solution using iframes. All fragment HTML files are loaded in iframes now. I don't like this solution though. Ideally, I like to share scope, styles etc from the parent with child fragments.

If you have suggestions on enabling HTML fragments, please let me know.