diff --git a/resources/docs/docs/chapters/tp/arrow-functions.md b/resources/docs/docs/chapters/tp/arrow-functions.md index cc655333cd654d913df5791cb9fc0c0285a6cb96..cf726c516905f5aee13bc18652522d0ebb6424cc 100644 --- a/resources/docs/docs/chapters/tp/arrow-functions.md +++ b/resources/docs/docs/chapters/tp/arrow-functions.md @@ -75,29 +75,26 @@ Waiting a certain amount of time can be easily done using the [`setTimeout()`](h > **danger** Regular functions declared with the **`function` keyword have `this` inherited from the caller**, whereas **arrow functions have a `this` inherited from the declaring scope**. -??? Test a - -??? Show the game.js file +??? note "Show the game.js file" === "game.js - with function" - ``` js + ``` js export class GameComponent { goToScore() { // ... - setTimeout( - function () { - const scorePage = "#score"; - scorePage + - "?name=" + - this._name + - "&size=" + - this._size + - "&time=" + - timeElapsedInSeconds; - }.bind(this), - 750 - ); + setTimeout(function () => { + const scorePage = "#score"; + scorePage + + "?name=" + + this._name + + "&size=" + + this._size + + "&time=" + + timeElapsedInSeconds; + }.bind(this), + 750 + ); } } ``` @@ -131,8 +128,8 @@ Concatenating strings is not something we enjoy in any language. Fortunately, _E ``` js const welcome = - "welcome back " + user.name + ".\n" - + "You have " + messages.length + " message" + messages.length ? "s" : "" + "to read."; + "welcome back " + user.name + ".\n" + + "You have " + messages.length + " message" + messages.length ? "s" : "" + "to read."; ``` === "With template literals" diff --git a/resources/docs/docs/chapters/tp/npm.md b/resources/docs/docs/chapters/tp/npm.md index 2238df4333aaadb29432b37e4d72955b0c599b85..55a02e8d0f6b9f7a7b8feb0204661e35e4b2628f 100644 --- a/resources/docs/docs/chapters/tp/npm.md +++ b/resources/docs/docs/chapters/tp/npm.md @@ -34,13 +34,13 @@ These informations will be set in the `package.json` file by the `npm init` comm At the root of the `front-end/` directory, initialize a new NPM package with the [`npm init` command](https://docs.npmjs.com/creating-a-package-json-file#running-a-cli-questionnaire). -<details> <summary> Show the commands </summary> +??? tip "Show the commands" + + ```bash + cd front-end/ + npm init + ``` -```bash -cd front-end/ -npm init -``` -</details> This command will ask you to fill in some informations. Set your own values here: - **package name**: `@<username>-meme-ory` (replace `<username>` with your name). @@ -51,28 +51,27 @@ This command will ask you to fill in some informations. Set your own values here - **Git repository**: <YOUR_GITLAB>/\<YOUR_NAMESPACE>/web-01 - leave other fields blank. -<details> <sumarry> Show the expected package.json </sumarry> +??? note "Show the expected package.json" + + === "package.json" + + ```json + { + "name": "username-meme-ory", + "version": "1.0.0", + "description": "A memory game based on memes ¯\\(ツ)\\/¯.", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "devDependencies": { + "http-server": "^14.1.1" + } + } + ``` -package.json - -```json -{ - "name": "username-meme-ory", - "version": "1.0.0", - "description": "A memory game based on memes ¯\\(ツ)\\/¯.", - "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "", - "license": "ISC", - "devDependencies": { - "http-server": "^14.1.1" - } -} -``` - -</details> > **info** The project name is prefixed with `username`. This is your namespace and it avoids collisions with existing packages in case you want to publish your package to the [NPM repository](https://www.npmjs.com/) @@ -106,35 +105,34 @@ As `http-server` is [available on the _NPM_ repository](https://www.npmjs.com/pa All of our project [**dependencies**](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file) are specified in the `package.json` file. You can see some that are already installed in the `back-end/package.json` file -<details> <summary> Show the back-end/package.json file </summary> - -package.json - -```json{13-20} -{ - "name": "server", - "version": "1.0.0", - "description": "", - "main": "server.js", - "scripts": { - "start": "node server.js" - }, - "type": "module", - "keywords": [], - "author": "Takima <formation@takima.fr>", - "license": "ISC", - "dependencies": { - "chalk": "^4.1.1", - "cors": "^2.8.5", - "express": "^4.16.4", - "lodash": "^4.17.11", - "swagger-jsdoc": "^7.0.0-rc.6", - "swagger-ui-express": "^4.0.4" - } -} -``` +??? tip "Show the back-end/package.json file" + + === "package.json" + + ```json + { + "name": "server", + "version": "1.0.0", + "description": "", + "main": "server.js", + "scripts": { + "start": "node server.js" + }, + "type": "module", + "keywords": [], + "author": "Takima <formation@takima.fr>", + "license": "ISC", + "dependencies": { + "chalk": "^4.1.1", + "cors": "^2.8.5", + "express": "^4.16.4", + "lodash": "^4.17.11", + "swagger-jsdoc": "^7.0.0-rc.6", + "swagger-ui-express": "^4.0.4" + } + } + ``` -</details> ### <i class="fa fa-terminal"></i> `npm install` <Diy /> @@ -145,55 +143,57 @@ Go back in the `front-end/` folder and install the `http-server` library as a [* To install a _devDependency_, we will use the `npm install` command along with the `--save-dev` or `-D` flag. - alias -```bash -cd front-end -npm install -D http-server -``` - -verbose -```bash -cd front-end -npm install --save-dev http-server -``` - -<details><summary> Show the resulting front-end/package.json file </summary> - -front-end/package.json -```json{12-14} -{ - "name": "username-meme-ory", - "version": "1.0.0", - "description": "A memory game based on memes ¯\\(ツ)\\/¯.", - "main": "index.js", - "private": true, - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "", - "license": "ISC", - "devDependencies": { - "http-server": "^14.1.1" - } -} - -``` -Notice how your `package.json` has been updated with a `devDependencies` key. - -</details> - -> **info** Did you see? The _http-server_ version is specified as `X.Y.Z`. This convention **enforced by NPM** is called **[Semantic Versioning (Semver)](https://docs.npmjs.com/about-semantic-versioning/)**. ->  -> **A package cannot be published if it does not follow this convention.** -> -> This allows you to specify a [**version range**](https://docs.npmjs.com/cli/v6/using-npm/semver#ranges) for a dependency. -> In our example, `^14.1.1` means compatible with all `14.1.*` versions. -> `14.1.0` <= _version_ < `14.2.0` (see: [cheatsheet](../10.cheatsheet/CHEATSHEET.md#semver)) -> Dependencies versions within the range are considered compatible and _NPM_ could update the package by itself when you run `npm install`. -> However, it could lead to inconsistencies if one does `npm install` after some time and a dependency got updated in the meantime within the range. -> That's why, _NPM_ also generated a [`package-lock.json`](https://docs.npmjs.com/cli/v8/configuring-npm/package-lock-json). In a nutshell, `package-lock.json` is like a verbose version of `package.json`. It lists transitive dependencies (ie: dependencies of our dependencies) and fixes each and every package version. - -> **danger** Avoid editing `package.json` by yourself. Prefer using the _NPM CLI_ (eg: `npm install`, `npm remove`, ...) instead. +=== "alias" + ```bash + cd front-end + npm install -D http-server + ``` + +=== "verbose" + ```bash + cd front-end + npm install --save-dev http-server + ``` + +??? tip "Show the resulting front-end/package.json file" + + === "front-end/package.json" + + ```json + { + "name": "username-meme-ory", + "version": "1.0.0", + "description": "A memory game based on memes ¯\\(ツ)\\/¯.", + "main": "index.js", + "private": true, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "devDependencies": { + "http-server": "^14.1.1" + } + } + ``` + + Notice how your `package.json` has been updated with a `devDependencies` key. + +!!! info "Infos" + > Did you see? The _http-server_ version is specified as `X.Y.Z`. This convention **enforced by NPM** is called **[Semantic Versioning (Semver)](https://docs.npmjs.com/about-semantic-versioning/)**. + >  + > **A package cannot be published if it does not follow this convention.** + > + > This allows you to specify a [**version range**](https://docs.npmjs.com/cli/v6/using-npm/semver#ranges) for a dependency. + > In our example, `^14.1.1` means compatible with all `14.1.*` versions. + > `14.1.0` <= _version_ < `14.2.0` (see: [cheatsheet](../10.cheatsheet/CHEATSHEET.md#semver)) + > Dependencies versions within the range are considered compatible and _NPM_ could update the package by itself when you run `npm install`. + > However, it could lead to inconsistencies if one does `npm install` after some time and a dependency got updated in the meantime within the range. + > That's why, _NPM_ also generated a [`package-lock.json`](https://docs.npmjs.com/cli/v8/configuring-npm/package-lock-json). In a nutshell, `package-lock.json` is like a verbose version of `package.json`. It lists transitive dependencies (ie: dependencies of our dependencies) and fixes each and every package version. + +!!! danger "Danger" + + > Avoid editing `package.json` by yourself. Prefer using the _NPM CLI_ (eg: `npm install`, `npm remove`, ...) instead. If you check the `package-lock.json`file and search for `http-server`, you can see the following: ```json @@ -229,44 +229,44 @@ You see that `http-server` comes with all its dependencies. In addition to `package-lock.json`, _NPM_ also created a folder called `node_modules`, where all the dependencies indicated in your `package.json` are downloaded. If you open it, you can see a folder called `http-server` as long as a folder for each of its dependency. -<details><summary> Show the node_modules folder structure </summary> - -``` -node_modules/ -├── basic-auth -├── ... -├── chalk -├── ... -├── corser -├── ... -├── he -├── ... -├── html-encoding-sniffer -├── ... -├── http-proxy -├── ... -├── http-server -├── ... -├── mime -├── ... -├── minimist -├── ... -├── opener -├── ... -├── portfinder -├── ... -├── secure-compare -├── ... -├── union -├── ... -├── url-join -``` -</details> +??? info "Show the node_modules folder structure" + + ``` + node_modules/ + ├── basic-auth + ├── ... + ├── chalk + ├── ... + ├── corser + ├── ... + ├── he + ├── ... + ├── html-encoding-sniffer + ├── ... + ├── http-proxy + ├── ... + ├── http-server + ├── ... + ├── mime + ├── ... + ├── minimist + ├── ... + ├── opener + ├── ... + ├── portfinder + ├── ... + ├── secure-compare + ├── ... + ├── union + ├── ... + ├── url-join + ``` + +!!! danger "Danger" + > The `node_modules/` folder contains all dependencies and is usually rather uge. Do not forget to ignore this directory in the `.gitignore` file to not commit it. + > ??? info "Show the node_modules folder size" + >  -> **danger** The `node_modules/` folder contains all dependencies and is usually rather uge. Do not forget to ignore this directory in the `.gitignore` file to not commit it. -> <details> Show the node_modules folder size ->  -> </details> #### <i class="fas fa-folder-tree"></i> Modified files @@ -279,37 +279,37 @@ front-end/ #### <i class="fa fa-list-check"></i> Checklist -- [ ] I know how to **init** a new **_NPM_ package**. -- [ ] I can **install** a **_NPM_ dependency**. -- [ ] I know the difference between a **dependency** and a **devDependency** +- <input type="checkbox" /> I know how to **init** a new **_NPM_ package**. +- <input type="checkbox" /> I can **install** a **_NPM_ dependency**. +- <input type="checkbox" /> I know the difference between a **dependency** and a **devDependency** + ## <i class="fas fa-terminal"></i> Write _NPM_ scripts Did you notice that the generated `package.json` has a `"scripts"` section? -<details><summary> Show the package.json file</summary> - -package.json - -```json{7-9} -{ - "name": "username-meme-ory", - "version": "1.0.0", - "description": "A memory game based on memes ¯\\(ツ)\\/¯.", - "main": "index.js", - "private": true, - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "", - "license": "ISC", - "devDependencies": { - "http-server": "^14.1.1" - } -} - -``` -</details> +??? info "Show the package.json file" + + === "package.json" + + ```json + { + "name": "username-meme-ory", + "version": "1.0.0", + "description": "A memory game based on memes ¯\\(ツ)\\/¯.", + "main": "index.js", + "private": true, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "devDependencies": { + "http-server": "^14.1.1" + } + } + + ``` > **info** A _NPM_ package can have a complex lifecycle: from development to shipping, not to forget about the tests, the build and other stages that may require specific tools and commands... > @@ -337,32 +337,30 @@ So now, to run the server, you can use the command `http-server -c-1` without `n - Add a new script called `start` in the scripts section. This script will run our `http-server` command. - <details> <summary> Show the package.json file </summary> + ??? info "Show the package.json file" - package.json - ```json{3} - { - "scripts": { - "start": "http-server -c-1", - "test": "echo \"Error: no test specified\" && exit 1" - }, - } - ``` - </details> + === "package.json" + ```json + { + "scripts": { + "start": "http-server -c-1", + "test": "echo \"Error: no test specified\" && exit 1" + }, + } + ``` - Kill the old `http-server` if it is still running. Now, you can start your application using the following command: - alias +=== "alias" + ```bash + npm start + ``` - ```bash - npm start - ``` +=== "verbose" - verbose - - ```bash - npm run start - ``` + ```bash + npm run start + ``` - Navigate to [http://localhost:8080/src](http://localhost:8080/src). The _front-end_ application should be up and running and connected to the _back-end_ at [http://localhost:8081/api-docs](http://localhost:8081/api-docs) to get the required data. @@ -376,12 +374,5 @@ front-end/ #### <i class="fa fa-list-check"></i> Checklist -- [ ] I know what _NPM scripts_ are. -- [ ] I can run my application running the `npm start` command. - -<style> -summary { - color: #CA2468; - text-align: center; -} -</style> +- <input type="checkbox" /> I know what _NPM scripts_ are. +- <input type="checkbox" /> I can run my application running the `npm start` command. diff --git a/resources/docs/docs/chapters/tp/setup.md b/resources/docs/docs/chapters/tp/setup.md index 6111b0169e59a1ef8709d002f278ffc4cd131832..d388c1a1e74647deb5ed8071c8aea27102bda2a1 100644 --- a/resources/docs/docs/chapters/tp/setup.md +++ b/resources/docs/docs/chapters/tp/setup.md @@ -19,15 +19,13 @@ tag: > **tip** **Pro tip**: Linux users can install and use [NVM](https://github.com/creationix/nvm). With this tool, it is easy to install > multiple node versions and switch between all of them. - > <details> <summary>Show the installation commands</summary> + > ??? note "Show the installation commands" > - > ```bash - > curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash - > nvm install 16 - > nvm default 16 - > ``` - > - > </details> + > ```bash + > curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash + > nvm install 16 + > nvm default 16 + > ``` - Have a web browser with good capabilities for debugging JavaScript (Eg: Google Chrome, Chromium, or Firefox). @@ -54,14 +52,13 @@ Do it yourself - Create a [new project]({{$m3.env.M3_GITLAB_URL}}/projects/new#blank_project) under your namespace on our Gitlab instance. Call it **web-01**. - Clone that project in your workspace and checkout to a new branch called **develop** - <details> <summary> Show the Git commands </summary> +??? note "Show the Git commands" - ```:no-v-pre - git clone git@<YOUR_GITLAB>:<YOUR_NAMESPACE>/<YOUR_PROJECT>.git - cd <YOUR_PROJECT> - git switch -c develop - ``` - </details> + ```bash + git clone git@<YOUR_GITLAB>:<YOUR_NAMESPACE>/<YOUR_PROJECT>.git + cd <YOUR_PROJECT> + git switch -c develop + ``` - Download and extract the initial _ES5_ codebase for the _MEME-ORY_ application in your workspace: <ResourcesButton path="init.zip" title="Meme-ORY" /> @@ -94,27 +91,24 @@ Do it yourself npx http-server -c-1 ``` - <details><summary> Show the troubleshoot </summary> - - > **boom** When I run the **_npx http-server -c-1_** command, it produces an infinite loop on my standard output... - > - > The _http-server_ package has a dependency on the _colors_ package, which introduced a bug in version 1.4.1, causing that infinite loop. - > - > You can fix it by installing a fixed version for packages `colors` and `http-server`: - > - > ```bash - > cd front-end/ - > npm install colors@1.4.0 --save --saved-exact - > npm install http-server@14.0.0 - > ``` - > - > Now, you can start the HTTP-server without any trouble! - > - > ```bash - > npx http-server -c-1 - > ``` - - </details> +??? tip "Show the troubleshoot" + When I run the **_npx http-server -c-1_** command, it produces an infinite loop on my standard output... + + The _http-server_ package has a dependency on the _colors_ package, which introduced a bug in version 1.4.1, causing that infinite loop. + + You can fix it by installing a fixed version for packages `colors` and `http-server`: + + ```bash + cd front-end/ + npm install colors@1.4.0 --save --saved-exact + npm install http-server@14.0.0 + ``` + + Now, you can start the HTTP-server without any trouble! + + ```bash + npx http-server -c-1 + ``` - Test the application: go to [localhost:8080/src](http://localhost:8080/src) and play through the whole game. - _http://localhost:8080/src_: `/src` because it is where your `index.html` is. @@ -139,11 +133,3 @@ front-end/ - [ ] I can play _MEME-Ory_ game on [http://localhost:8080/src](http://localhost:8080/src) [game-mockup]: ../../assets/mockup.png -<style> -summary { - color: #cb2468; - text-align: center; - margin-bottom: 20px; - margin-top: 20px -} -</style> diff --git a/resources/docs/docs/chapters/tp/spa.md b/resources/docs/docs/chapters/tp/spa.md index 8e8fa724e251f8b405de6d515ed2fe4918460910..2c02ecb2d0bd7728040a6d92071aebaa2ebf9c48 100644 --- a/resources/docs/docs/chapters/tp/spa.md +++ b/resources/docs/docs/chapters/tp/spa.md @@ -22,19 +22,18 @@ Each view comes with a _complete *HTML* document_. Going from one view to anothe ## <i class="fa fa-wrench"></i> The browser dev tools -> **tip** **Did you know**? -> -> Your web browser can give you a lot of information about what happens behind the scene (JavaScript execution, stack-traces, network, errors, ...). Press `ctrl+shift+I` (Firefox, Google Chrome, Chromium) to open the developer console. -> There, you can: -> - see the **application logs** in the "Console" tab -> - browse **source files** pressing `ctrl+P` or in the "Sources" tab -> - set **breakpoints** and **debug your code** -> - **inspect the document**: see HTML elements, edit CSS properties in the "Elements" tab -> - **monitor the Network** traffic in "Network" tab -> - and much more! ->  - -> **question** How many megabytes are transferred in total after going through the three views, with `size=2`? +!!! tip "Did you know ?" + > Your web browser can give you a lot of information about what happens behind the scene (JavaScript execution, stack-traces, network, errors, ...). Press `ctrl+shift+I` (Firefox, Google Chrome, Chromium) to open the developer console. + > There, you can: + > - see the **application logs** in the "Console" tab + > - browse **source files** pressing `ctrl+P` or in the "Sources" tab + > - set **breakpoints** and **debug your code** + > - **inspect the document**: see HTML elements, edit CSS properties in the "Elements" tab + > - **monitor the Network** traffic in "Network" tab + > - and much more! + >  + +> !!! question "How many megabytes are transferred in total after going through the three views, with `size=2`?" In this chapter, we will turn the _MEME-Ory_ application into a **_Single Page Application_** to fix this! @@ -58,34 +57,32 @@ It uses the [`DOM` API](https://developer.mozilla.org/en-US/docs/Web/API/Documen This archive contains two source files you have to put in your `front-end/src/app/scripts/` folder: - **`router.js`**: a rudimentary _Router_ implementation. - - **`main.js`**: the place where the _HTML templates_ and their corresponding JavaScript files are registered at the Router. The _Router_ will put the different views into the existing `document`, in the `<div id="content-outlet">`. - <details><summary> Show the main.js file</summary> - - main.js - - ```js{1} - const outlet = document.querySelector("#content-outlet"); - const router = new Router(outlet); - router - .register("", { - component: WelcomeComponent, - templateUrl: "/src/app/views/welcome.html", - }) - .register("welcome", { - component: WelcomeComponent, - templateUrl: "/src/app/views/welcome.html", - }) - .register("game", { - component: GameComponent, - templateUrl: "/src/app/views/game.html", - }) - .register("score", { - component: ScoreComponent, - templateUrl: "/src/app/views/score.html", - }); - ``` - - </details> + - **`main.js`**: the place where the _HTML templates_ and their corresponding JavaScript files are registered at the Router. The _Router_ will put the different views into the existing `document`, in the `<div id="content-outlet">`. +???+ info "Show the main.js file" + + === "main.js" + ```js + const outlet = document.querySelector("#content-outlet"); + const router = new Router(outlet); + router + .register("", { + component: WelcomeComponent, + templateUrl: "/src/app/views/welcome.html", + }) + .register("welcome", { + component: WelcomeComponent, + templateUrl: "/src/app/views/welcome.html", + }) + .register("game", { + component: GameComponent, + templateUrl: "/src/app/views/game.html", + }) + .register("score", { + component: ScoreComponent, + templateUrl: "/src/app/views/score.html", + }); + ``` + - Edit `router.js` and complete the implementation of `function renderTemplate() {}`. Follow the `TODO #spa` comments for instructions. <details><summary> Show the resulting renderTemplate() function </summary> @@ -208,15 +205,6 @@ src/app/views/welcome.html #### <i class="fa fa-list-check"></i> Checklist -- [ ] I know how to open and use the browser developer console. -- [ ] I know what is a _SPA_ and why it may be a better choice. -- [ ] The application runs as usual. - -<style> -summary { - color: #cb2468; - text-align: center; - margin-bottom: 20px; - margin-top: 20px -} -</style> \ No newline at end of file +- <input type="checkbox" /> I know how to open and use the browser developer console. +- <input type="checkbox" /> I know what is a _SPA_ and why it may be a better choice. +- <input type="checkbox" /> The application runs as usual. diff --git a/resources/docs/mkdocs.yml b/resources/docs/mkdocs.yml index 56f706cdce5d54493944b5f2edd7cdd3b56b1dbe..592930b227b896b5951ec0e4e63c1764509b3723 100644 --- a/resources/docs/mkdocs.yml +++ b/resources/docs/mkdocs.yml @@ -1,9 +1,9 @@ site_name: ES6 Formation nav: - TP: - - "Setup": chapters/tp/setup.md - - "npm": chapters/tp/npm.md - - "Spa": chapters/tp/spa.md + - "Getting started": chapters/tp/setup.md + - "The package manager": chapters/tp/npm.md + - "Single Page Application (SPA)": chapters/tp/spa.md - "Webpack": chapters/tp/webpack.md - "The bundle": chapters/tp/bundle.md - "CSS Loader": chapters/tp/css-loader.md