How do you get started with a new project, what combination of tools, libraries or frameworks do you use?
If you use boilerplates, please include links to them as it'll be very useful to me and others.
It depends on the project, however for a static website, I start out with
package.json for my build pipelinemake.js from other projects, like my websitepackage.json (like glob, fs-extra, etc.)tsconfig.jsonI 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');
Grey
Fullstack Developer @ Asheori
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
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
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!