Personal version of Awesome, best practices and setups.

The purpose of this repository is to share resources and setups interesting for TypeScript, Node.js and JavaScript full-stack developers.

Description

Awesome repositories are usually targetted at certain things like - programming language, technology, books, etc. This one is composition of completely different stuff that's just personal, but might be useful for any full-stack developer interested in JavaScript, Node.js, Typescript and Angular - or simply working on same platform as I am (currently Windows).

Content

• Community
  • Gitter
• Performance
  • Loops
  • DOM
• Practices
  • Comments
  • Naming
  • Other Practices
• Resources
  • Angular
  • TypeScript
  • Other Resources
• Windows Setup
  • Tools
  • System
  • Windows Subsystem Linux
  • Windows PowerShell
  • Git, Node, Npm
  • Docker
  • Google Chrome
  • VS Code
  • Run Commands (.rc)

Community

Gitter

• Gitter - if you ever looked for a programmers chat where you could post a question and instantly get an answer (not like stackoverflow), I recommend joining channels:
  • TypeScript
  • Angular
  • Node.js

Performance

Loops

• Fastest loop:

for (let i = array.length - 1; i >= 0; --i) {

}

• for of better than forEach

DOM

• innerHTML > appendChild (appendChild allows you to not lose events bound to DOM though)

Practices

Comments

• // Start comments upperFirst with a dot in the end.
• /* Start comments upperFirst with a dot in the end. */
• Place a line breaks before and after "comment block" except for return:

if (true) {

    // comment
    doSomething();

    // next comment
    doSomethingElse();

    // except for return
    return noLineBreakAfterMe();
}

Naming

• & vs And - prefer "and", leave "&" for brand names and programming actions.
• 0.0.0 vs 1.0.0 - start development with 0.0.0 version, use 1.0.0 for first working release.
• Add vs Create - prefer "add". It's more intuitive for non-programmers.
• app.js vs index.js vs main.js vs server.js** - prefer main.js for an entry file, as it is chosen by Angular and NestJS. Leave index for index.html and default exporting via index.js.
• Argument vs Parameter - use params for method parameters, leave arguments for command line.
• Async vs Defer - prefer defer over async.
• Attribute vs Property - attribute for xml, properties for objects.
• Change vs Modify vs Update - prefer "update". It's more standard.
• Common vs Partials vs Shared - common for library names, shared for directory name, don't use partials, except as part of file extension.
• Configuration vs Options vs Preferences vs Settings
  • Configuration - for internal system (for example: webpack.config.js, ecosystem.config.js).
  • Options - for others choices (especially other developers, for example: <radarsu-web-component options=""\>).
  • Settings - for system-administrating end-user (for example: admin dashboard)
  • Preferences - for end-user (for example: website visitor).
• Controller vs Resolver vs Route - controller for REST, resolver for GraphQL, route for analysis of url, query and params and pointing to one of previously listed.
• createdAt vs creationDate - prefer "createdAt" over "creationDate". It's shorter and more common.
• Delete vs Remove - prefer "remove". It's more intuitive for non-programmers.
• Demo vs Showcase - prefer "showcase".
• Entity vs Model - use model, as it's part of MVC naming.
• Helper, Handler, Manager - don't use those at all. They carry no meaning.
• Module vs Package - module for internal stuff, package for external libraries.
• Page vs View - use view, as sometimes one page/view may be part of another one (also it's part of MVC).
• Spec vs Test - use spec, used by Angular and Google. Leave "test" for manual testing.
• Node.js vs NodeJS - Node.js, it's how it stands at their official page.

For general rules watch How to name things in programming?.

Other Practices

• Convention over Configuration - prefer naming convetions over configuration of stuff. It often allows you to skip a lot of redundant code and data.
• directory-naming - use lowercase and dashes (kebab-case) for directory naming, never use _ in directory naming. . is allowed for domain names.
• Encoding - utf8mb4_unicode_ci is the most correct.
• Export everything - when writing modules export almost everything except highly private functions. You never know what somebody would like to reuse or hack into.
• File naming convention - file-name.scope.extension (for example: user.model.ts, news.controller.ts).
• Line length 150 is reasonable size (good for PC and laptops with 1920x1080 resolution). Eventually use 120.
• Single method parameter - prefer methods with single, complex parameter over multiple parameters - it's easier to refactor such method and keep backwards compatibility.
• Port practices
  • <1000, 1337, 3000, 4200, 8080-9999 - do not use those, they're commonly used.
  • 5001-5999 - production.
  • 6001-6999 - development, except 6666.
  • 7001-7999 - testing.
• Prefix interfaces - prefer ISomeInterface over SomeInterface. TypeScript guidelines are against that, but that practice is actually very useful and stops you from common mistakes of trying to instantiate interfaces.
• Use trailing commas in arrays and after multiline object properties - it makes it easier to expand the code.
• Use semicolons, it's simply more popular (easier to copy code from documentations without need to adjust) and less error-prone.
• Sort everything alphabetically - When there is no certain logical order in elements, object keys or function call order.
• Stay close to the metal - do not make unnecessary wrappers, abstractions. If you use some library internally for example in an object constructor, allow passing configuration data to the library in an unchanged manner.
• <strong><a>link</a></strong> > <a><strong>link</strong></a>.

Resources

Angular

• Angular Modules - definitions of angular modules declaration, imports, providers and exports.
• Application Structure - angular or any other module-based application directory structure.

Typescript

• Design patterns

Other Resources

• Color naming
• GraphQL authorization
• Utility-first CSS > BEM vs SMACSS vs OOCSS

Windows Setup

Tools

• 7-zip
• Docker for Windows
• Filezilla
• Google Chrome
• Greenshot
• Microsoft Office
• MongoDB Compass
• Nodepad++ [set all text-files to be opened by default]
• Postman
• Terminus
• VS Code

Optional

• BitTorrent
• Discord
• GIMP
• LetsView
• NapiProjekt
• PlantUML
• ProtonVPN
• Slack
• VLC Media Player

System

• BIOS (F10 during system boot): enable Virtualization Technology (VT)
• FiraCode Font
• Windows Subsystem Linux Ubuntu (Microsoft Store)
• At C:\Windows\System32\drivers\etc\hosts add 127.0.0.1 localhost.radrat.pl

Windows Subsystem Linux

• sudo apt install build-essential docker docker-compose make

Windows PowerShell

• Turn on Hyper-V for Docker: Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V -All

Git, Node, Npm

npm i -g @angular/cli @nestjs/schematics docusaurus-init eslint lerna lint-staged nodemon nps pm2 prettier prettier-eslint-cli ts-node tldr tslint typescript windows-build-tools webpack

npm login

git config --global user.name "Artur Kurowski"

git config --global user.email "radarsu@gmail.com"

Docker

• Settings: Expose deamon on tcp://localhost:2375 without TLS

Google Chrome

• CSSPeeper
• Node Inspector Manager
• Pop up blocker
• Red Labels for Pivotal Tracker
• Redux DevTools
• Tampermonkey
• uBlock Plus Adblocker
• YouTube NonStop

VS Code

• Better comments
• Bracker Pair Colorizer 2
• Browser Preview
• Cobalt2
• Docker
• Editorconfig for VS Code
• ESlint
• Git Graph
• GitLab Workflow
• Gitlens
• GraphQL
• Markdown all in one
• Material Icon Theme
• Prettier
• Remote Development
• Sort js object keys
• Toggle quotes
• TSlint
• TypeScript Hero

Run Commands

• .bashrc
  • Ending:

# nvm
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

# docker
export DOCKER_HOST=tcp://0.0.0.0:2375

# npm
export NPM_TOKEN="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"