https://github.com/radarsu/me
Highly personal and opinionated AWESOME stuff for Typescript, JavaScript and Node.js full-stack developers along with my own best practices and setups 🙈🙉🙊
https://github.com/radarsu/me
List: me
angular assets awesome awesome-list config configuration full-stack misc miscellaneous node nodejs opinionated opinionated-defaults personal setup typescript util utilities windows
Last synced: 5 months ago
JSON representation
Highly personal and opinionated AWESOME stuff for Typescript, JavaScript and Node.js full-stack developers along with my own best practices and setups 🙈🙉🙊
- Host: GitHub
- URL: https://github.com/radarsu/me
- Owner: radarsu
- License: mit
- Created: 2018-11-04T15:23:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-02-01T07:46:20.000Z (about 5 years ago)
- Last Synced: 2024-05-22T13:33:47.657Z (11 months ago)
- Topics: angular, assets, awesome, awesome-list, config, configuration, full-stack, misc, miscellaneous, node, nodejs, opinionated, opinionated-defaults, personal, setup, typescript, util, utilities, windows
- Homepage: https://radarsu.radrat.pl/
- Size: 158 KB
- Stars: 9
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - radarsu/me - Highly personal and opinionated AWESOME stuff for Typescript, JavaScript and Node.js full-stack developers along with my own best practices and setups 🙈🙉🙊 (Others)
README
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](#community)
- [Gitter](#gitter)
- [Performance](#performance)
- [Loops](#loops)
- [DOM](#dom)
- [Practices](#practices)
- [Comments](#comments)
- [Naming](#naming)
- [Other Practices](#other-practices)
- [Resources](#resources)
- [Angular](#angular)
- [TypeScript](#comments)
- [Other Resources](#other-resources)
- [Windows Setup](#windows-setup)
- [Tools](#tools)
- [System](#system)
- [Windows Subsystem Linux](#windows-subsystem-linux)
- [Windows PowerShell](#windows-powershell)
- [Git, Node, Npm](#git-node-npm)
- [Docker](#docker)
- [Google Chrome](#google-chrome)
- [VS Code](#vs-code)
- [Run Commands (.rc)](#run-commands)
# 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:
```ts
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:
```ts
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: ``).
- **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.
- `link` > `link`.
# 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 "[email protected]"`
## 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"
```