HTML First – Six principles for building simple, maintainable, web software

1. clace

   1 28 574 9.6 Go

   App deployment simplified. GitOps without the hassles. Hypermedia based internal tools for teams. AppServer for containerized apps.

   

   I have used this approach for internal tools and it has been great. It makes it much easier for one person to build the whole app, frontend and backend, and makes ongoing maintenance much easier.

   I am working on https://github.com/claceio/clace which takes this no build approach and makes it easy to build portable applications, using Starlark running in go to configure the backend.

2. CodeRabbit

   coderabbit.ai featured

   CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

   

3. qwik

   2 142 21,185 9.8 TypeScript

   Instant-loading web apps, without effort

   

   I agree in principle that HTML is the best option for a good user-experience, but it quickly breaks down in terms of developer-experience and maintainability. However, we don't need to compromise on either by using a solution like Qwik[1]. Where the page progressively becomes more interactive with JavaScript, and doing as much work as possible on the server beforehand.

   1. https://qwik.builder.io/

4. -

   3 5 79 8.6 JavaScript

   Hyphen - An elegant custom element base class

   

   I like this. I share a philosophy similar to this: hew close to the grain of the material. It's heartening to see articles like this. I've created many expressions of my ideas on this in code over the years: Brutal.JS, VanillaView, Bang/Good.html and I recently created one that is even simpler and I'm very happy with. It's similar to a unification of these ideas with Custom Elements. You can check it out here: https://github.com/00000o1/-

5. tailgate

   4 1 2 6.7 HTML

   Client-facing generative-AI components without the fuss.

   I built something recently with the same ideas in mind: https://github.com/sethkimmel3/tailgate. It allows people to build generative-AI applications without any of the complication of setting up a backend, and in the simplest cases only requires adding HTML attributes.

   I originally learned to code with HTML, CSS, and JS, and I think it's still the easiest way to experience the magic of shipping a working application to others. We should keep encouraging more patterns and tooling that lower the barriers of entry to those just starting out.

6. dumb-tailwind

   5 1 10 5.1 JavaScript

   

   > We use static-tailwind, a version with no build step, in development.

   https://github.com/tonyennis145/dumb-tailwind/

   Is it this? A 3.9 MB CSS file?

7. chat-app

   6 5 0 4.0 HTML

   A contact us demo widget built using Saasufy. (by Saasufy)

   

   You can log in via GitHub OAuth (also implemented with HTML tags).

   The source is here, that's all of it, there is no custom backend logic: https://github.com/Saasufy/chat-app

8. Fragmentify

   7 1 20 10.0 PHP

   Django like template inheritance for XML

   

   I published this article on Template Animation (aka DOM Templating) 12 years ago:

   https://benkoworks.com/your-templating-engine-sucks-and-ever...

   It fits nicely with this goal. My colleagues and I created a tool that allows HTML developers to work in HTML by compiling HTML using a Chrome extension, and then allowing developers to compile the same in their code platform of choice and operate on the DOM:

   https://github.com/iaindooley/Fragmentify

   https://github.com/iaindooley/fragmentify-js

   Even if you're doing a SPA you can use this same method, by sending updates over the wire and doing the processing on the server. We created a standalone package that facilitated that by loading the initial page from the server then transparently allowing the server to send just the changes to the page and having them applied on the client side:

   https://github.com/dgrinton/remote-standalone

   The combination of "remote" and "fragmentify" and Template Animation/DOM Templating, in my opinion, would be a tremendous "retreat to move forward" in web development technologies.

9. SaaSHub

   www.saashub.com featured

   SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

   

10. fragmentify-js

    8 1 0 10.0 JavaScript

    FragmentifyJs

    

    I published this article on Template Animation (aka DOM Templating) 12 years ago:

    https://benkoworks.com/your-templating-engine-sucks-and-ever...

    It fits nicely with this goal. My colleagues and I created a tool that allows HTML developers to work in HTML by compiling HTML using a Chrome extension, and then allowing developers to compile the same in their code platform of choice and operate on the DOM:

    https://github.com/iaindooley/Fragmentify

    https://github.com/iaindooley/fragmentify-js

    Even if you're doing a SPA you can use this same method, by sending updates over the wire and doing the processing on the server. We created a standalone package that facilitated that by loading the initial page from the server then transparently allowing the server to send just the changes to the page and having them applied on the client side:

    https://github.com/dgrinton/remote-standalone

    The combination of "remote" and "fragmentify" and Template Animation/DOM Templating, in my opinion, would be a tremendous "retreat to move forward" in web development technologies.

11. remote-standalone

    9 2 0 10.0 JavaScript

    

    I published this article on Template Animation (aka DOM Templating) 12 years ago:

    https://benkoworks.com/your-templating-engine-sucks-and-ever...

    It fits nicely with this goal. My colleagues and I created a tool that allows HTML developers to work in HTML by compiling HTML using a Chrome extension, and then allowing developers to compile the same in their code platform of choice and operate on the DOM:

    https://github.com/iaindooley/Fragmentify

    https://github.com/iaindooley/fragmentify-js

    Even if you're doing a SPA you can use this same method, by sending updates over the wire and doing the processing on the server. We created a standalone package that facilitated that by loading the initial page from the server then transparently allowing the server to send just the changes to the page and having them applied on the client side:

    https://github.com/dgrinton/remote-standalone

    The combination of "remote" and "fragmentify" and Template Animation/DOM Templating, in my opinion, would be a tremendous "retreat to move forward" in web development technologies.

12. css-scope-inline

    10 9 612 6.2 HTML

    🌘 Scope your inline style tags in pure vanilla CSS! Only 16 lines. No build. No dependencies.

    

13. proposal-type-annotations

    11 110 4,311 3.0 JavaScript

    ECMAScript proposal for type syntax that is erased - Stage 1

    

    Edit: There is a proposal to extend JavaScript with type annotations, which would allow ("a reasonably large subset") of TypeScript to run directly in the browser. Yay!

    https://github.com/tc39/proposal-type-annotations

14. Soccer

    12 4 0 8.4 TypeScript

    Tracker for players play time (by jon49)

    

    I've successfully used this pattern (HTMX hypermedia style) to create an offline-first web app SPA[^1]. One of the pages is pretty dynamic and I wasn't sure if I would need a traditional front end library to work with it. But, nope, hypermedia to the win, it worked fine without a front end framework.

    To build it I used my own library called HTMF[^2]. I started out using mpa-enhancer[^3] but found that that pattern is a little to janky sometimes. I think reloading a page every time on every interaction uses too many resources for a browser especially when you use a phone that doesn't have as much power as a laptop.

    But overall I find the pattern very easy to use and keeps the complexity down.

    I think some of the issues with traditional SPAs is that they have a lot of state and state is nonlinear in complexity. But using templating systems makes the complexity more linear in nature.

    Also, I find libraries like React to be overly complex for what it does, see above. The way React works is just odd and counter intuitive. All for problems that are easy to solve. I do think there are places for a React-like library is needed but those are for websites that are inherently highly state-based. But most websites aren't state-based even ones that appear to be state-based at first.

    The websites I work on are usually just forms and forms are pretty powerful and can get you a long ways before you need to go outside of that paradigm.

    [^1]: https://github.com/jon49/Soccer

    [^2]: https://github.com/jon49/htmf

    [^3]: https://github.com/jon49/mpa-enhancer

15. htmf

    13 4 22 5.2 JavaScript

    A minimalist partial html swapping library similar to HTMX and other libraries which create an MPA app and enhances it with a focus on HTML forms.

    

    I've successfully used this pattern (HTMX hypermedia style) to create an offline-first web app SPA[^1]. One of the pages is pretty dynamic and I wasn't sure if I would need a traditional front end library to work with it. But, nope, hypermedia to the win, it worked fine without a front end framework.

    To build it I used my own library called HTMF[^2]. I started out using mpa-enhancer[^3] but found that that pattern is a little to janky sometimes. I think reloading a page every time on every interaction uses too many resources for a browser especially when you use a phone that doesn't have as much power as a laptop.

    But overall I find the pattern very easy to use and keeps the complexity down.

    I think some of the issues with traditional SPAs is that they have a lot of state and state is nonlinear in complexity. But using templating systems makes the complexity more linear in nature.

    Also, I find libraries like React to be overly complex for what it does, see above. The way React works is just odd and counter intuitive. All for problems that are easy to solve. I do think there are places for a React-like library is needed but those are for websites that are inherently highly state-based. But most websites aren't state-based even ones that appear to be state-based at first.

    The websites I work on are usually just forms and forms are pretty powerful and can get you a long ways before you need to go outside of that paradigm.

    [^1]: https://github.com/jon49/Soccer

    [^2]: https://github.com/jon49/htmf

    [^3]: https://github.com/jon49/mpa-enhancer

Suggest a related project