The most common things (tools, libraries, framework) you and your team will need to have to get started are

A Laptop/Desktop Computer - Your choice of computer should be guided by the following

• Operating System - (Ubuntu/MacOS or Windows)
• Size of RAM (>8GB is advisable)
• Storage Size & Type (Size > 250GB, and Type should be SSD)
• CPUs The number of cores the better :-)
• Battery Life & Device Durability
• Head Phones & Your Playlist

An IDE - There are quite a number of awesome IDEs out there. I use and recommend VS Code . Make sure you check out VS Code extensions for better coding experience.

Libraries & Frameworks - Depending on the language(s) you and your team code in, amongst many other things, you may have two or more libraries or frameworks you will be working with. I write mostly in javascript (and Typescript) so my line ups are

• NodeJS for writing backend apis with express and fastify
• Angular (for frontend - web)
• Vue.js (for frontend - web)
• React and React Native (for frontend - web & mobile)
• And libraries and tools that makes up for better coding and problem solving experience using the above.

Source Code Management - I recommend git, and GitHub .

CI/CD Tools - There quite a number of them out there. GitHub offers an elegant solution, so does CircleCI , Travis CI , and Jenkins .

Cloud/IAAS Account - I use Google Firebase , and Digital Ocean for staging/production mostly. I recently launched a product on AWS , and the experience was an interesting one. I'd recommend them.

Team Communication - I would recommend email, Slack, and Trello

The list is not exhaustive, however, it will get you and your team started. I hope you find the information useful.

All the best!

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');