Skip to content

Latest commit

 

History

History
240 lines (202 loc) · 12.6 KB

README.md

File metadata and controls

240 lines (202 loc) · 12.6 KB
Raw

me logo

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

  • 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

Other Resources

Windows Setup

Tools

Optional

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

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"