Popular posts

It depends on the project, however for a static website, I start out with

• Creating a repository
• Creating a package.json for my build pipeline
• Copying over make.js from other projects, like my website
• Adapting the file and adding dependencies to the package.json (like glob, fs-extra, etc.)
• Copying over tsconfig.json
• Adding scripts for build execution

I mostly use Parcel, Pug, SCSS and (only if I cannot find a way around) TypeScript. Since the above steps are mostly the same all the time, I started fiddling with a boilerplate project, which allows me to have a light configuration and executes the above steps automatically.

For web apps, it's pretty similar, except that I use WebPack instead of Parcel for it's configurability. Also, I add Handlebars for my WebComponents. Lately, I actually want to ditch HBS, at least in favor of Pug, so that I reduce the number of languages, but I'd also love to give (P)React a try as a renderer inside my WebComponents (anyone has any experience with that?). Also, I am mostly using attributes for communication between the main app and components, however, especially for very dynamic apps, I'd like to try Flux instead, because a central storage seems more stable and faster than involving the DOM all over the place.

For my WebComponents, I use a custom base class, by the way, which makes the usage a lot easier. I don't think I have any public repositories using it, so I made a gist 🙂 The usage is:

enum EMySpanAttributes {
  COLOR = 'color',
}

class MySpan extends BaseElement {
  // automatically re-render when any of the included attributes change
  static get observedAttributes(): string[] {
    return [EMySpanAttributes.COLOR];
  }

  // render-code goes here
  async render() {
    const color = this.getAttribute(EMySpanAttributes.COLOR) ?? 'red';
    const spanEle = document.createElement('span');

    // copy over the inner text from the wrapper element
    spanEle.innerText = this.innerText;

    // convenience methods for drawing, querying, etc.
    // You really want to put these into a template file and a separate stylesheet, though!
    this.draw(spanEle.outerHTML, `span { color: ${color}; }`);
  }
}

// And tag registration is also safe!
MySpan.registerTag('my-component');