Add JavaScript pages

devpro · devpro · commit c4af71e5e775 · 2021-08-30T14:55:53.000+02:00
diff --git a/README.md b/README.md
@@ -72,15 +72,22 @@ The online version is available at [everyday-cheatsheets.docs.devpro.fr](https:/
 * HashiCorp
   * [Terraform](./docs/hashicorp/terraform.md)
   * [Vagrant](./docs/hashicorp/vagrant.md)
-* JavaScript
+* [JavaScript](./docs/javascript/javascript.md)
   * [Angular](./docs/javascript/angular.md)
     * [Angular CLI](./docs/javascript/angular-cli.md)
+    * [Angular events](./docs/javascript/angular-events.md)
   * [Cypress](./docs/javascript/cypress.md)
-  * Node.js
+  * [ECMAScript](./docs/javascript/ecmascript.md)
+  * [Ionic](./docs/javascript/ionic.md)
+  * [Node.js](./docs/javascript/nodejs.md)
+    * [Express](./docs/javascript/express.md)
     * [NPM](./docs/javascript/npm.md)
   * [React](./docs/javascript/reactjs.md)
     * [React Native](./docs/javascript/react-native.md)
-  * [TypeScript](./docs/typescript.md)
+  * [Redux](./docs/javascript/redux.md)
+  * [TypeScript](./docs/javascript/typescript.md)
+  * [webpack](./docs/javascript/webpack.md)
+  * [Yarn](./docs/javascript/yarn.md)
 * [Linux](./docs/linux/linux.md)
   * [CentOS](./docs/linux/centos.md)
   * [Ubuntu](./docs/linux/ubuntu.md)
diff --git a/SUMMARY.md b/SUMMARY.md
@@ -61,6 +61,7 @@
 * Frameworks & libraries
   * [Angular](./docs/javascript/angular.md)
     * [Angular CLI](./docs/javascript/angular-cli.md)
+    * [Angular events](./docs/javascript/angular-events.md)
   * [.NET](./docs/dotnet/dotnet.md)
     * [ASP.NET Core](./docs/dotnet/aspnetcore.md)
     * [Blazor](./docs/dotnet/blazor.md)
@@ -74,17 +75,23 @@
     * [WPF](./docs/dotnet/wpf.md)
     * Xamarin
   * [gRPC](./docs/grpc.md)
-  * Node.js
+  * [Ionic](./docs/ionic.md)
+  * [Node.js](./docs/nodejs.md)
+    * [Express](./docs/javascript/express.md)
     * [NPM](./docs/npm.md)
   * [React](./docs/javascript/reactjs.md)
     * [React Native](./docs/javascript/react-native.md)
+  * [Redux](./docs/javascript/redux.md)
   * [Symfony](./docs/php/symfony.md)
 * Languages
   * [C#](./docs/dotnet/csharp.md)
     * [C# 8.0](./docs/dotnet/csharp80.md)
+  * [ECMAScript](./docs/javascript/ecmascript.md)
   * [Go](./docs/go.md)
   * [GraphQL](./docs/graphql.md)
-  * JavaScript
+  * [JavaScript](./docs/javascript/javascript.md)
+    * [webpack](./docs/javascript/webpack.md)
+    * [Yarn](./docs/javascript/yarn.md)
   * [MS-DOS](./docs/windows/ms-dos.md)
   * [PHP](./docs/php/php.md)
   * [Python](./docs/python.md)
diff --git a/docs/javascript/angular-cli.md b/docs/javascript/angular-cli.md
@@ -8,12 +8,19 @@ Version | Date | More
 ------- | ---- | ----
 12.0 | | [ninja squad](https://blog.ninja-squad.com/2021/05/12/angular-cli-12.0/)
 
+### Setup
+
+```bash
+# install the CLI globally
+npm install -g @angular/cli
+```
+
 ## Recipes
 
-### Protractor to Cypress migration
+### Migrate from Protractor to Cypress
 
 * [ninja squad](https://blog.ninja-squad.com/2021/05/05/migrating-from-protractor-to-cypress/)
 
-### TSLint to ESLint migration
+### Migrate from TSLint to ESLint
 
 * [ninja squad](https://blog.ninja-squad.com/2021/03/31/migrating-from-tslint-to-eslint/)
diff --git a/docs/javascript/angular-events.md b/docs/javascript/angular-events.md
@@ -0,0 +1,34 @@
+# Angular events
+
+### AngularConnect 2019
+
+[AngularConnect](https://www.angularconnect.com/) - London, UK - 19 & 20 September - [Twitter](https://twitter.com/AngularConnect)
+
+Excellent summary: [All Talks](https://nitayneeman.com/posts/all-talks-from-angular-connect-2019/)
+
+Videos:
+
+- [Youtube channel](https://www.youtube.com/channel/UCzrskTiT_ObAk3xBkVxMz5g)
+  - [Playlist](https://www.youtube.com/playlist?list=PLAw7NFdKKYpE-f-yMhP2WVmvTH2kBs00s)
+    - [Day 1 Track 1 Livestream](https://www.youtube.com/watch?v=lXbjICP6V44&feature=youtu.be)
+
+Talks:
+
+- "How to make Angular Fast" [Video](https://www.youtube.com/watch?v=lXbjICP6V44&feature=youtu.be&t=19220) & [Slides](https://docs.google.com/presentation/d/1o5W1sOaQ0HaPqleGCWy8cukgM5NhhRZWpx2E6KKrc10) & [Sources](https://github.com/mhevery/AngularConnect-2019) by [Misko Hevery](https://twitter.com/mhevery)
+
+- "How Angular Works" [Video](https://www.youtube.com/watch?v=S0o-4yc2n-8&feature=youtu.be) [Slides](https://docs.google.com/presentation/d/1l3GLCqitNQ5G6fgS59gsUkD_EGnIwdnuWP-tKYrxmEI) by [Kara Erickson](https://twitter.com/karaforthewin)
+
+- "Quantum facades" [Slides](https://speakerdeck.com/samjulien/quantum-facades-why-ngrx-facades-are-terrible-or-awesome-depending-on-how-you-observe-them-angularconnect-2019) by [Sam Julien](https://twitter.com/samjulien)
+
+- "Building Angular apps with internationalization (i18n) in mind | Naomi Meyer" [Video](https://www.youtube.com/watch?v=cUDUqqOtBvM)
+
+- [2nd Day Keynote](https://speakerdeck.com/mgechev/angularconnect-2nd-day-keynote) by [Minko Gechev](https://twitter.com/mgechev)
+  - Our collaboration with standard committees, Chrome, and Bazel
+  - Automating DX for faster Web
+  - Intelligent tooling
+  - Enabling best practices
+  - ng deploy
+
+Workshops:
+
+- [AnkitSharma-007/blogsite](https://github.com/AnkitSharma-007/blogsite)
diff --git a/docs/javascript/angular.md b/docs/javascript/angular.md
@@ -4,19 +4,49 @@
 
 → [angular.io](https://angular.io/), [API](https://angular.io/api)
 
-## Pages
+## History
 
-* [Angular CLI](./angular-cli.md)
+Angular has replaced [AngularJS](https://angularjs.org/) (aka Angular v1).
 
-### Setup
+## Releases
 
-```bash
-# install the CLI globally
-npm install -g @angular/cli
-```
+Version | Date | More
+------- | ---- | ----
+12.0 | | [ninja squad](https://blog.ninja-squad.com/2021/05/12/what-is-new-angular-12.0/)
+10.0 | 2020-06-25 | [release note](https://blog.angular.io/version-10-of-angular-now-available-78960babd41), [ninja squad](https://blog.ninja-squad.com/2020/06/25/what-is-new-angular-10.0/)
+
+## Learn
+
+### Training
+
+- [Ninja Squad](https://ninja-squad.com/formations)
+
+### Resources
+
+- [Become a ninja with Angular - Pro Pack](https://angular-exercises.ninja-squad.com/)
+
+### Books
+
+- [Become a ninja with Angular - Ebook](https://books.ninja-squad.com/angular)
+
+### Tutorials
+
+- [github.com/devpro/dojo-angular-beginner](https://github.com/devpro/dojo-angular-beginner/blob/master/README.md)
+- [web.dev](https://web.dev/angular)
+
+### Libraries
+
+- NgRx: [ngrx.io](https://ngrx.io/), [Documentation](https://ngrx.io/docs)
+
+### Tools
+
+- Visual Studio Code
+  - [Using Angular in Visual Studio Code](https://code.visualstudio.com/docs/nodejs/angular-tutorial)
 
 ### Quick start
 
+* Use [Angular CLI](./angular-cli.md)
+
 ```bash
 # create the application
 ng new
@@ -36,9 +66,70 @@ ng generate component layout/home
 
 → [angular.io/guide/quickstart](https://angular.io/guide/quickstart)
 
-## Releases
+## Recipes
 
-Version | Date | More
-------- | ---- | ----
-12.0 | | [ninja squad](https://blog.ninja-squad.com/2021/05/12/what-is-new-angular-12.0/)
-10.0 | 2020-06-25 | [release note](https://blog.angular.io/version-10-of-angular-now-available-78960babd41), [ninja squad](https://blog.ninja-squad.com/2020/06/25/what-is-new-angular-10.0/)
+### Authentication
+
+- [oktadeveloper/okta-angular-mongodb-hangman-example](https://github.com/oktadeveloper/okta-angular-mongodb-hangman-example)
+
+### CI CD
+
+#### Sonar
+
+- Create a `sonar-project.properties` file at the root folder of the application
+
+```ini
+sonar.host.url=https://sonarcloud.io
+sonar.login=<token>
+sonar.organization=<company>
+sonar.projectKey=<projetKey>
+sonar.projectName=<projectName>
+sonar.projectVersion=1.0
+sonar.sourceEncoding=UTF-8
+sonar.sources=src
+sonar.exclusions=**/node_modules/**,**/*.spec.ts,**/coverage/**,**/bin/**,**/obj/**
+#sonar.tests=test
+sonar.test.inclusions=**/*.spec.ts
+sonar.typescript.lcov.reportPaths=src/WebApp/ClientApp/coverage/lcov.info
+#sonar.dotnet.visualstudio.solution.file=Solution.Name.sln
+```
+
+- Edit `package.json` file
+
+{{< highlight json >}}
+  "scripts": {
+   "sonar": "node_modules/sonar-scanner/bin/sonar-scanner.bat"
+  },
+  "dependencies": {
+    "sonar-scanner": "^3.1.0",
+    "tslint-sonarts": "^1.8.0",
+  }
+{{< /highlight >}}
+
+### Update
+
+- Follow the procedure given at [update.angular.io](https://update.angular.io/)
+
+### Web design
+
+#### Material design
+
+- [Material Design components for Angular](https://material.angular.io/)
+
+#### DataTables
+
+- Option 1: Angular Datatable
+  - [Getting started](https://l-lin.github.io/angular-datatables/#/getting-started)
+
+- Historique de la recherche :
+  - [Angular 5 and jQuery DataTables !](https://medium.com/apprendre-le-web-avec-lior/angular-5-and-jquery-datatables-fd1dd2d81d99)
+  - [10 Best Angular DataTables](https://www.ngdevelop.tech/best-angular-tables/)
+
+#### materialize-css
+
+- Home site: [materializecss.com](https://materializecss.com/getting-started.html)
+- Integration in an Angular project:
+  - Clean and ok: [How to use materialize-css with angular](https://stackoverflow.com/questions/48007665/how-to-use-materialize-css-with-angular)
+  - Didn't work: [How to use MaterializeCSS in Angular 2](https://stackoverflow.com/questions/41937283/how-to-use-materializecss-in-angular-2)
+  - Didn't also work: [stanleyeosakul/angular-travelville](https://github.com/stanleyeosakul/angular-travelville)
+  - Didn't try: [sherweb/ngx-materialize](https://github.com/sherweb/ngx-materialize)
diff --git a/docs/javascript/ecmascript.md b/docs/javascript/ecmascript.md
@@ -0,0 +1,24 @@
+# ECMAScript
+
+→ [ecma-international.org](https://www.ecma-international.org/)
+
+## Introductions
+
+> ECMAScript is the scripting language that forms the basis of JavaScript.
+
+→ [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources)
+
+## Versions
+
+### ES2019
+
+[New and potential ES2019 JavaScript features every developer should be excited about](https://blog.logrocket.com/new-es2019-javascript-features-every-developer-should-be-excited-about/) - September 26, 2019
+
+New features:
+
+- Optional chaining: foo?.bar
+- Pipeline operator: |>
+- Object.fromEntries()
+- [].flat(), [].flatMap()
+- Optional catch binding: catch {}
+- ''.trimStart(), ''.trimEnd()
diff --git a/docs/javascript/express.md b/docs/javascript/express.md
@@ -0,0 +1,28 @@
+# Express
+
+> Fast, unopinionated, minimalist web framework for Node.js
+
+→ [expressjs.com](https://expressjs.com/), [GitHub](https://github.com/expressjs/express)
+
+## Learn
+
+- [Mozilla Express/Node introduction](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction)
+
+### Express & MongoDB
+
+- [Building a Simple CRUD Application with Express and MongoDB](https://zellwk.com/blog/crud-express-mongodb/)
+- [Quick Start](https://mongodb.github.io/node-mongodb-native/3.1/quick-start/quick-start/)
+
+## Getting started
+
+## Express Generator
+
+[Express application generator](https://expressjs.com/en/starter/generator.html)
+
+### Local checkout
+
+```dos
+npm install express-generator
+node_modules\express-generator\bin\express-cli.js -h
+node_modules\express-generator\bin\express-cli.js myapp
+```
diff --git a/docs/javascript/ionic.md b/docs/javascript/ionic.md
@@ -0,0 +1,17 @@
+# Ionic
+
+> One codebase. Any platform. Now in Vue, Angular, React.
+> 
+> An open source mobile UI toolkit for building high quality, cross-platform native and web app experiences. Move faster with a single code base, running everywhere with JavaScript and the Web.
+
+→ [ionicframework.com](https://ionicframework.com/), [GitHub](https://github.com/ionic-team/ionic) [Twitter](https://twitter.com/Ionicframework)
+
+## Ionic in Angular
+
+### Setup
+
+`npm i ionic-angular` [ionic-angular](https://www.npmjs.com/package/ionic-angular)
+
+### Quick start
+
+[Your First Ionic App: Angular](https://ionicframework.com/docs/angular/your-first-app)
diff --git a/docs/javascript/javascript.md b/docs/javascript/javascript.md
@@ -0,0 +1,14 @@
+# JavaScript
+
+## Common librairies
+
+### jQuery
+
+- [jQuery Core 3.0 Upgrade Guide](https://jquery.com/upgrade-guide/3.0/#jquery-core-3-0-upgrade-guide)
+- [jQuery Migrate Plugin - Warning Messages](https://github.com/jquery/jquery-migrate/blob/master/warnings.md)
+
+### signature_pad
+
+- [GitHub](https://github.com/szimek/signature_pad)
+- [NPM](https://www.npmjs.com/package/signature_pad)
+- [Creating a signature pad using Canvas and ASP.​NET Core Razor Pages](https://asp.net-hacker.rocks/2018/06/05/signature-pad.html)
diff --git a/docs/javascript/nodejs.md b/docs/javascript/nodejs.md
@@ -0,0 +1,11 @@
+# Node.js
+
+> Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.
+
+→ [nodejs.org](https://nodejs.org/)
+
+## Learn
+
+### Getting started
+
+* [How do I start with Node.js after I installed it?](https://nodejs.org/en/docs/guides/getting-started-guide/)
diff --git a/docs/javascript/redux.md b/docs/javascript/redux.md
@@ -0,0 +1,15 @@
+# Redux
+
+> A Predictable State Container for JS Apps
+
+→ [redux.js.org](https://redux.js.org/)
+
+## Learn
+
+- [markerikson/react-redux-links/react-native](https://github.com/markerikson/react-redux-links/blob/master/react-native.md)
+- [reduxjs/react-redux](https://github.com/reduxjs/react-redux)
+- [Mark's Dev Blog](https://blog.isquaredsoftware.com/)
+
+## Getting started
+
+- [Starter Kit](https://redux-starter-kit.js.org/)
diff --git a/docs/javascript/webpack.md b/docs/javascript/webpack.md
@@ -0,0 +1,5 @@
+# webpack
+
+> webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
+
+→ [webpack.js.org](https://webpack.js.org/)
diff --git a/docs/javascript/yarn.md b/docs/javascript/yarn.md
@@ -0,0 +1,5 @@
+# Yarn
+
+> Yarn is a package manager that doubles down as project manager.
+
+→ [yarnpkg.com](https://yarnpkg.com/)
