Minimally Magic Markup
Some of the recent arguments around CSS vs CSS-in-JS got me thinking about code visibility. I learned my first HTML and CSS from reading the source of interesting websites, but today that is only rarely possible. My own website and prototype game are compiled from JSX source, bundled, pre-rendered, stripped, minified, and uploaded as an unintelligible blob of static assets. Can I find or build tools that keep the useful development features, while allowing others to learn directly from the running code?
Goals
- NEW: View Source shows common, well-formatted HTML, SVG, CSS, and JavaScript.
- Client-side JavaScript only required for interactive demos/games.
- No server-side processing.
- Development workflow with sub-second automatic reload.
- TODO: Compile-time linting and unit tests.
- TODO: Automated compatibility tests.
After some tinkering, I have an intriguing prototype. All of the compile-time logic is implemented as scripts in the browser, so development just needs a live-reloading server. Compilation loads each page into a headless browser, disables compile-time-only scripts, and saves the resulting document. Any generated code is marked with comments, and the license block also contains a link to documentation.
My current area of exploration is components and templating. For example, the index page loads a list of published posts, loads titles and excerpts from the most recent ten pages, and then displays them in a list. There are many existing component solutions, which I am slowly sifting through for a next article. If you know any that are particularly readable for learners, please let me know!