3 ms·

Most of my web projects these days are vanilla. I'd been dabbling on simple things for years, but it took a big leap a few months ago when I discovered Web Comp

Most of my web projects these days are vanilla. I'd been dabbling on simple things for years, but it took a big leap a few months ago when I discovered Web Components are still a thing and have come a long way since 2012. We're finishing up re-writing an app at work that went from a ~17 dependency Vue app to a ~2 dependency (d3js) Web Component app. The codebase is a joy to work on. No more dependency hell. We don't even need npm. The code, as committed to git, will probably still run unmodified on browsers in 20 years. It's a great feeling. A few tips: * If you have a lot of JS files and want excellent performance you may still be able to skip a build step by leveraging `modulepreload` * If you want some typing while still running without a build step, you can use JSDoc to embed TypeScript annotations for your JS[0]. * If you really want to have a mostly HTML site but don't want to manually duplicate code, I've had decent success with a technique I call "tuplates"[1][2]. Basically it's a very simple templating tool where the output is intended to be committed to git. It uses comments so it's language agnostic. * If you go web components I highly recommend these best practices[3]. A lot of them were confusing for me at first but just keep them on your radar as you're learning. [0]: https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html https://www.typescriptlang.org/docs/handbook/jsdoc-supported... [1]: Description: https://github.com/anderspitman/tuplates-js/blob/master/README.md https://github.com/anderspitman/tuplates-js/blob/master/READ... [2]: Latest implementation: https://github.com/anderspitman/tuplates https://github.com/anderspitman/tuplates [3]: https://web.dev/articles/custom-elements-best-practices https://web.dev/articles/custom-elements-best-practices

wonger_ 2y ago
I recently did something very similar with `m4`, putting file substitution commands in comments: // template.js: // // m4_include(`my/script.js') usage: m4 --prefix-builtins template.js > filled.js m4 is a nifty old tool, and it might be on your machine already. But props for arriving at your own solution. https://mbreen.com/m4.html https://mbreen.com/m4.html
- apitman 2y ago
  I've seen m4 for stuff like this in the past, but it always looks so archaic and confusing that I never made it very far. Maybe I just need to force myself through a tutorial or something. The main difference between tuplates and what you're doing is that the tuplates comments remain in the output. Which means you can run tuplates again on the same files and it simply replaces everything between your tuplate_start() and tuplate_end comments. This has a couple nice properties: 1. Your files are always valid code. There's no such thing as a template file that doesn't compile or run. 2. You can commit everything to git
  - wonger_ 2y ago
    Ah, great point. That's a nice feature, rerunning on the same file. And it's certainly simpler than m4.
    - apitman 2y ago
      One one feature is that tuplates.py can update itself since it works with URLs as well. I forgot I have an example from a production site (https://lastlogin.net https://lastlogin.net) if you're interested in seeing it in action: https://github.com/lastlogin-net/lastlogin.net https://github.com/lastlogin-net/lastlogin.net
purple-leafy 2y ago
I made something very similar to tuplates - 0 build html templates. I made a way to insert html into other html via a small js snippet, and you can add dynamic data by placing the dynamic data in data-attributes and using {} in the html template as a standin variable

wonger_ 2y ago

I recently did something very similar with `m4`, putting file substitution commands in comments: // template.js: // // m4_include(`my/script.js') usage: m4 --prefix-builtins template.js > filled.js m4 is a nifty old tool, and it might be on your machine already. But props for arriving at your own solution. https://mbreen.com/m4.html https://mbreen.com/m4.html

apitman 2y ago
I've seen m4 for stuff like this in the past, but it always looks so archaic and confusing that I never made it very far. Maybe I just need to force myself through a tutorial or something. The main difference between tuplates and what you're doing is that the tuplates comments remain in the output. Which means you can run tuplates again on the same files and it simply replaces everything between your tuplate_start() and tuplate_end comments. This has a couple nice properties: 1. Your files are always valid code. There's no such thing as a template file that doesn't compile or run. 2. You can commit everything to git
- wonger_ 2y ago
  Ah, great point. That's a nice feature, rerunning on the same file. And it's certainly simpler than m4.
  - apitman 2y ago
    One one feature is that tuplates.py can update itself since it works with URLs as well. I forgot I have an example from a production site (https://lastlogin.net https://lastlogin.net) if you're interested in seeing it in action: https://github.com/lastlogin-net/lastlogin.net https://github.com/lastlogin-net/lastlogin.net

purple-leafy 2y ago

I made something very similar to tuplates - 0 build html templates. I made a way to insert html into other html via a small js snippet, and you can add dynamic data by placing the dynamic data in data-attributes and using {} in the html template as a standin variable