diff --git a/resources/docs/docs/chapters/tp/arrow-functions.md b/resources/docs/docs/chapters/tp/arrow-functions.md index c8ab85afd6f1b45a839e3e2d1b5fac72da2bedcb..f833eaf6bd42c0c430cc9c82db47e9e78c66251b 100644 --- a/resources/docs/docs/chapters/tp/arrow-functions.md +++ b/resources/docs/docs/chapters/tp/arrow-functions.md @@ -14,8 +14,7 @@ _ES6_ brought a new syntax to declare functions: the [arrow functions](https://d ## `functions` vs `() => {...}` <Diy /> Open `game.js` and look at the `goToScore()` method. It is called once all card pairs are flipped and waits 750ms before redirecting the player to the Score page. -:::code-tabs -@tab game.js +game.js ```javascript export class GameComponent { @@ -37,14 +36,13 @@ export class GameComponent { } } ``` -::: Waiting a certain amount of time can be easily done using the [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) function. > **info** In JavaScript, long tasks (eg: waiting some time, doing an HTTP request, ...) are all asynchronous. -> :::spoiler Why? +> <details><summary> Why? </summary> > JavaScript is **mono-threaded**. That means, all the code is executed on the main thread and we cannot offload long jobs to a background thread. In other words, **long blocking tasks would freeze the application**. -> ::: +> </details> `setTimeout()` accepts as first parameter an anonymous function called when the amount of time is elapsed. Such functions are called **callback functions**. @@ -52,8 +50,7 @@ Waiting a certain amount of time can be easily done using the [`setTimeout()`](h Follow `TODO #arrow-function` comments for instructions. > Example: > - > :::code-tabs - > @tab anonymous function + > anonymous function > > ```js > setTimeout(function () { @@ -61,7 +58,7 @@ Waiting a certain amount of time can be easily done using the [`setTimeout()`](h > }, 1000); > ``` > - > @tab arrow function + > arrow function > > ```js > setTimeout(() => { @@ -69,7 +66,7 @@ Waiting a certain amount of time can be easily done using the [`setTimeout()`](h > }, 1000); > ``` > - > @tab arrow function - single line + > arrow function - single line > > ```js{} > setTimeout(() => console.log("after 1s"), 1000); @@ -79,9 +76,8 @@ 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**. - ::::spoiler Show the game.js file - :::code-tabs - @tab game.js - with function + <details><summary> Show the game.js file </summary> + game.js - with function ```javascript export class GameComponent { @@ -104,7 +100,7 @@ Waiting a certain amount of time can be easily done using the [`setTimeout()`](h } ``` - @tab game.js - with arrow function + game.js - with arrow function ```javascript export class GameComponent { @@ -123,15 +119,13 @@ Waiting a certain amount of time can be easily done using the [`setTimeout()`](h } } ``` - ::: - :::: + </details> ## Template literals Concatenating strings is not something we enjoy in any language. Fortunately, _ES6_ comes with [**template literals**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) as an alternative: -:::code-tabs -@tab without template literals +=== "without template literals" ```js{} const welcome = @@ -139,7 +133,7 @@ const welcome = + "You have " + messages.length + " message" + messages.length ? "s" : "" + "to read."; ``` -@tab with template literals +=== "with template literals" ```js{} const welcome = @@ -147,7 +141,6 @@ const welcome = You have ${messages.length} message${messages.length ? "s" : ""} to read.`; ``` -::: ### Use backquotes instead of quotes <Diy /> diff --git a/resources/docs/docs/chapters/tp/promises.md b/resources/docs/docs/chapters/tp/asynchronous.md similarity index 100% rename from resources/docs/docs/chapters/tp/promises.md rename to resources/docs/docs/chapters/tp/asynchronous.md diff --git a/resources/docs/docs/chapters/tp/webpack-js.md b/resources/docs/docs/chapters/tp/bundle.md similarity index 86% rename from resources/docs/docs/chapters/tp/webpack-js.md rename to resources/docs/docs/chapters/tp/bundle.md index b6703762eade7f826bfb7141f0fa5239a7b5c414..9bd80cfb4240b17a222b5b6cbd36f666f07c1bcf 100644 --- a/resources/docs/docs/chapters/tp/webpack-js.md +++ b/resources/docs/docs/chapters/tp/bundle.md @@ -18,40 +18,34 @@ Earlier in this chapter, we turned `router.js` into an _ES module_. It's time to After this chapter, thanks to the _ES modules_, there will be no more imported files in the `index.html`. **ES `import` statements will be the glue between files**. With the _bundler_, the importing file responsibility have shifted from _HTML_ to _JS_ files. -:::tabs -@tab before bundler - +before bundler + -@tab after bundler - -::: +after bundler + ## <i class="fab fa-js"></i> **Bundle the JS** code <Diy /> <BadgeHard /> - Edit `utils.js`. Look at the `TODO #export-functions` comments for instructions. - Write an `export` statement to export the `parseUrl` function. - ::::spoiler Show the utils.js file - :::code-tabs - @tab utils.js + <details><summary> Show the utils.js file </summary> + utils.js ```js export function parseUrl() { // ... } ``` - ::: - :::: - + </details> - Edit `welcome.js`, `game.js` and `score.js`. Look at the `TODO #export-functions` comments for instructions. - Remove the _IIFE_ - Write an `export` statement to export the component's function. - Write an `import` statement to import the `parseUrl` function if required. - ::::spoiler Show the resulting files - :::code-tabs - @tab welcome.js + <details><summary> Show the resulting files</summary> + welcome.js ```js export function WelcomeComponent() {} @@ -64,7 +58,7 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f // ... ``` - @tab game.js + game.js ```js import { parseUrl } from "./utils"; @@ -86,7 +80,7 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f // ... ``` - @tab score.js + score.js ```js import { parseUrl } from "./utils"; @@ -96,17 +90,14 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f } // ... ``` - - ::: - :::: + </details> - Edit `main.js`. Look at `TODO #import-components` for instructions. - Write an `import` statement to import `WelcomeComponent`, `GameComponent` and `ScoreComponent` - ::::spoiler Show the main.js file - :::code-tabs - @tab main.js + <details><summary> Show the main.js file </summary> + main.js ```js import { Router } from "./app/scripts/router"; @@ -123,13 +114,11 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f // ... ``` - ::: - :::: + </details> - Edit `index.html`. Remove all `<script>` tag as everything is now bundled by _Webpack_. - ::::spoiler Show the index.html file - :::code-tabs - @tab index.html + <details><summary> Show the index.html file </summary> + index.html ```html <!DOCTYPE html> @@ -149,17 +138,17 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f </body> </html> ``` - ::: - :::: + </details> - Test the application: navigate to [http://localhost:8080](http://localhost:8080), the application should work as usual and show no error in the console 🎉. - Build the application. - :::spoiler Show the build command + <details><summary> Show the build command </summary> + ```bash npm run build ``` - ::: +</details> #### <i class="fas fa-folder-tree"></i> Modified files @@ -179,7 +168,13 @@ src/index.html - [ ] The codebase has no unresolved `TODO #import-components` comments left. - [ ] The codebase has no _IIFE_ left. -<GitCommit /> - > **question** Look at the `dist/main.js` file, generated by the build command. What is its size? +<style> +summary { + color: #cb2468; + text-align: center; + margin-bottom: 20px; + margin-top: 20px +} +</style> \ No newline at end of file diff --git a/resources/docs/docs/chapters/tp/webpack-css.md b/resources/docs/docs/chapters/tp/css-loader.md similarity index 92% rename from resources/docs/docs/chapters/tp/webpack-css.md rename to resources/docs/docs/chapters/tp/css-loader.md index 67f3b4aebe281450c15bb6a1e140bbd696ecba5a..fb6460544e7986d36a6ceaafb90fd467a1c95c89 100644 --- a/resources/docs/docs/chapters/tp/webpack-css.md +++ b/resources/docs/docs/chapters/tp/css-loader.md @@ -35,8 +35,7 @@ npm i -D style-loader css-loader ### <i class="fa fa-screwdriver-wrench"></i> Use the `style-loader` <Diy/> - Edit `webpack.config.js` and configure the `style-loader` and the `css-loader` to load _CSS_ files: - :::code-tabs - @tab webpack.config.js + webpack.config.js ```js{9-12} // ... @@ -56,16 +55,15 @@ npm i -D style-loader css-loader }; ``` - ::: - Stop and restart the _Webpack dev server_. - :::spoiler Show the command + <details><summary> Show the command </summary> ```bash npm run start ``` - ::: + </details> > **danger** Remember to restart _Webpack_ whenever `webpack.config.js` changes, as it does not live-reload the configuration. @@ -76,9 +74,8 @@ We want to import all the _CSS_ files that are still imported using a `<link>` t - Edit `index.html`, remove all `<link rel="stylesheet">` tags and write the corresponding [**side-effect import**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_a_module_for_its_side_effects_only) statements in `src/main.js`. - ::::spoiler Show the index.html and main.js files - :::code-tabs - @tab index.html + <details><summary> Show the index.html and main.js files </summary> + index.html ```html{6-8} <!DOCTYPE html> @@ -97,7 +94,7 @@ We want to import all the _CSS_ files that are still imported using a `<link>` t </html> ``` - @tab main.js + main.js ```js{6,7} import { Router } from "./app/scripts/router"; import { WelcomeComponent } from "./app/scripts/welcome"; @@ -112,8 +109,7 @@ We want to import all the _CSS_ files that are still imported using a `<link>` t // ... ``` - ::: - :::: + </details> - Browse [localhost:8080](localhost:8080) and test the application. It should have the same look and feel as usual. @@ -124,10 +120,9 @@ so we can use the package manager to install it. - Go to the root of the `front-end/` directory and use the [`npm install`](https://docs.npmjs.com/cli/v8/commands/npm-install) command. - ::::spoiler Show the command - :::code-tabs + <details><summary> Show the command </summary> - @tab verbose + verbose ```bash cd front-end npm install bootstrap@5 @@ -138,17 +133,16 @@ so we can use the package manager to install it. cd front-end npm i bootstrap@5 ``` - ::: - :::: + </details> - **Remove the hand-copied bootstrap sources** No need to keep our own copy of `bootstrap.css` now we have installed it with _NPM_. You can safely remove it. - :::spoiler Show the command + <details><summary> Show the command </summary> ```bash rm src/app/styles/bootstrap.css ``` - ::: + </details> - **Use the installed _Bootstrap_ package** @@ -181,7 +175,15 @@ webpack.config.js - [ ] My application uses bootstrap from `node_modules/`. - [ ] There is no `TODO #npm-bootstrap` comments left. -<GitCommit /> > **question** Build the code with `npm run build` and look at the code generated in `dist/main.js`. > What is this file size? + +<style> +summary { + color: #cb2468; + text-align: center; + margin-bottom: 20px; + margin-top: 20px +} +</style> \ No newline at end of file diff --git a/resources/docs/docs/chapters/tp/es6-classes.md b/resources/docs/docs/chapters/tp/es6-classes.md index 9aa7d8aaaeb7ebc9ef1703850284cc60c41c8365..0d3bc19763ab3506507801efa566f455fc440c6c 100644 --- a/resources/docs/docs/chapters/tp/es6-classes.md +++ b/resources/docs/docs/chapters/tp/es6-classes.md @@ -13,22 +13,19 @@ In this chapter, we will learn how to update our code step by step with some new ## The old way: functions and `prototype` Have a look at `game.js`: -:::code-tabs -@tab game.js +game.js ```js{2} for (var i in this._config.ids) { this._cards[i] = new CardComponent(this._config.ids[i]); } // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ // ``` -::: Here, we create a new `CardComponent` instance (ie: a _card_), although `CardComponent` is in fact a simple function. -:::code-tabs -@tab game.js +game.js ```js{1,9,15} function CardComponent(id) { @@ -50,7 +47,6 @@ CardComponent.prototype.equals = function equals(card) { }; ``` -::: > **info** _ES5_ is [Prototype oriented language](https://developer.mozilla.org/en-US/docs/Glossary/Prototype-based_programming). In other words, it has no notion of _classes_ like in _Object Oriented Programming_, but it uses simple functions, objects and the [`prototype` keyword](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes) to mimic inheritance. `XComponent.prototype` is an object in which you put variables and functions shared across all instances of `XComponent`. > @@ -69,8 +65,7 @@ In this step, we will rewrite `WelcomeComponent`, `GameComponent`, `CardComponen - Rewrite every `function XComponent() {...}` to `class XComponent {...}`. The function body itself goes in the `constructor() {}` > Example: - > :::code-tabs - > @tab example.js - before + > example.js - before > > ```js > function ExampleComponent(name) { @@ -88,7 +83,6 @@ In this step, we will rewrite `WelcomeComponent`, `GameComponent`, `CardComponen > } > ``` > - > ::: > **info** _ES6_ classes does not have proper encapsulation (eg: private methods or attributes). > As a convention, we name properties/method with a leading underscore to identify them as private. @@ -98,8 +92,7 @@ In this step, we will rewrite `WelcomeComponent`, `GameComponent`, `CardComponen - Rewrite every `XComponent.prototype.<METHOD> = ...` to a method `<METHOD>` of the `XComponent` class: > Example: - > :::code-tabs - > @tab example.js - before + > example.js - before > > ```js > ExampleComponent.prototype.doThis = function doThis(attr) { @@ -116,7 +109,6 @@ In this step, we will rewrite `WelcomeComponent`, `GameComponent`, `CardComponen > } > } > ``` - > ::: ### Property accessors @@ -125,8 +117,7 @@ In this step, we will rewrite `WelcomeComponent`, `GameComponent`, `CardComponen - Rewrite each `Object.defineProperties(XComponent.prototype, { <PROPERTY> : {...}} )` statement, to a property accessor `get <PROPERTY>` in the `XComponent` class. Do the same for `get <PROPERTY>`. > Example: - > :::code-tabs - > @tab example.js - before + > example.js - before > > ```js{3,6} > Object.defineProperties(ExampleComponent.prototype, { @@ -155,7 +146,6 @@ In this step, we will rewrite `WelcomeComponent`, `GameComponent`, `CardComponen > } > ``` > - > ::: ### `extends` @@ -164,9 +154,8 @@ In this step, we will rewrite `WelcomeComponent`, `GameComponent`, `CardComponen To save a little bit of code, we will leverage **Component inheritance**. - Create a new file named `scripts/component.js` to define a class named `Component`. Its constructor has to take the _HTML_ template as a parameter and default to a blank string. - ::::spoiler Show the component.js file - :::code-tabs - @tab component.js + <details><summary> Show the component.js file </summary> + component.js ```js export class Component { @@ -175,19 +164,16 @@ To save a little bit of code, we will leverage **Component inheritance**. } } ``` - - ::: - :::: + </details> - Edit `game.js`. Look at the `TODO #extends` comments for instructions: - Make `GameComponent` extends `Component`. - Make `CardComponent` extends `Component`. - Call `super()` in the constructor. -::::spoiler Show the resulting game.js -:::code-tabs +<details><summary> Show the resulting game.js </summary> -@tab game.js - with prototype +game.js - with prototype ```js{} export function GameComponent() { @@ -213,7 +199,7 @@ Object.defineProperties(CardComponent.prototype, { /* ... */}); ``` -@tab game.js - with class +game.js - with class ```js{1,5} import { Component } from "./component"; @@ -246,9 +232,7 @@ class CardComponent extends Component { get flipped() { /* ... */ } } ``` - -::: -:::: +</details> - Navigate to [localhost:8080](http://localhost:8080) and test the application. It should work as usual. @@ -267,14 +251,9 @@ src/app/scripts/game.js The code seems much more clean and concise with classes, isn't it? Let's continue the modernization in the next chapter. -<GitCommit /> > **warning** As a _Java_ developer, an ES _class_ may look like a _Java_ _class_ to you, but they are actually very different. > - no encapsulation (ie: private properties and methods) > - no method/constructor overload > - no abstract classes > - no interfaces - -## <i class="fas fa-graduation-cap"></i> Assessment - -<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeJozxuTbb6JwDOGOiPNV3-VyRCjlnyEteqB5T5CqxEm4l6Eg/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe> diff --git a/resources/docs/docs/chapters/tp/webpack-html.md b/resources/docs/docs/chapters/tp/html-loader.md similarity index 88% rename from resources/docs/docs/chapters/tp/webpack-html.md rename to resources/docs/docs/chapters/tp/html-loader.md index 6eade9437c146b965e70705340b975c462f29a71..00b10c574cd0cfd71aaf3f13e021e88955d08dae 100644 --- a/resources/docs/docs/chapters/tp/webpack-html.md +++ b/resources/docs/docs/chapters/tp/html-loader.md @@ -13,8 +13,7 @@ tag: In the previous chapter, we managed to _bundle_ all the _CSS_ code. Now, it's time to do the same for the _HTML_ templates. Look at `src/main.js`: -:::code-tabs -@tab main.js +main.js ```js{3,5} // ... @@ -26,7 +25,6 @@ router // ... ``` -::: For now, we configure each path with a `templateUrl`, so the _Router_ can fetch the right template at runtime and display it. With `html-loader`, we could statically `import` this template at _compile-time_ and add it to the _bundle_. @@ -38,15 +36,15 @@ To bundle the _HTML_ code, we will use the [`html-loader`](https://webpack.js.or ### <i class="fa fa-file-download"></i> Install the `html-loader` <Diy/> - Install `html-loader` using _NPM_. -:::spoiler Show the command +<details><summary> Show the command </summary> + ```bash npm i -D html-loader ``` -::: + - Edit `webpack.config.js` and configure the `html-loader` to load _HTML_ files: - :::code-tabs - @tab webpack.config.js + webpack.config.js ```js{10-13} // ... @@ -67,7 +65,7 @@ npm i -D html-loader }; ``` - ::: + - Stop and restart the _Webpack dev server_. :::spoiler Show the command @@ -75,17 +73,15 @@ npm i -D html-loader ```bash npm run start ``` - - ::: + </details> > **danger** Remember to restart _Webpack_ whenever `webpack.config.js` changes, as it does not live-reload the configuration. ### <i class="fa fa-file-import"></i> Write _HTML_ files `import` statements - Edit `main.js`. Look at the `TODO #import-html` comments for instructions to remove all `templateUrl` properties. - ::::spoiler Show the main.js file - :::code-tabs - @tab main.js + <details><summary> Show the main.js file </summary> + main.js ```js // ... @@ -106,17 +102,14 @@ npm i -D html-loader component: ScoreComponent, }); ``` - - ::: - :::: + </details> - Edit `game.js`. Look at the `TODO #import-html` comments for instructions. - Import `game.html` template as `template` with a [**default import**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#default_import). - Edit the `GameComponent` function and assign `template` to a new attribute `this.template` - ::::spoiler Show the game.js file - :::code-tabs - @tab game.js + <details><summary> Show the game.js file </summary> + game.js ```js import template from "../views/game.html"; @@ -127,8 +120,7 @@ npm i -D html-loader } ``` - ::: - :::: + </details> - Browse to [localhost:8080](http://localhost:8080) and test the application. It should work as usual. @@ -147,7 +139,6 @@ webpack.config.js - [ ] I know how `html-loader` works. - [ ] The codebase has no unresolved `TODO #import-html` comments left. -<GitCommit /> > **question** Build the code with `npm run build` and look at the code generated in `dist/main.js`. > @@ -161,8 +152,8 @@ With _Webpack_ it is even possible to use ES imports to import assets, such as ` ### <i class="fa fa-screwdriver-wrench"></i> Configuration <Diy/> Edit `webpack.config.js` and add a new rule to load images: -:::code-tabs -@tab webpack.config.js + +webpack.config.js ```js{10-13} // ... @@ -183,7 +174,6 @@ module.exports = { }; ``` -::: ### <i class="fa fa-file-import"></i> Write `imports` for the _png_ files <Diy/> @@ -191,7 +181,7 @@ module.exports = { - Locate the variable named `CARDS_IMAGE`. It is an array containing the card images paths. Use ES default imports to import the images and replace the `CARD_IMAGES` content with the imported modules. - :::spoiler Show the game.js file + <details><summary> Show the game.js file </summary> ```js import back from "/src/assets/cards/back.png"; @@ -221,7 +211,7 @@ module.exports = { ]; ``` - ::: + </details> #### <i class="fas fa-folder-tree"></i> Modified files @@ -233,9 +223,11 @@ src/app/scripts/game.js webpack.config.js ``` -<GitCommit /> - -## <i class="fas fa-graduation-cap"></i> Assessment - -<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdzd5BXpKEJ5F1mtPcSuM3pn8ozs5WzHHllvsdVUavYQMCn5A/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe> - +<style> +summary { + color: #cb2468; + text-align: center; + margin-bottom: 20px; + margin-top: 20px +} +</style> \ No newline at end of file diff --git a/resources/docs/docs/chapters/tp/npm.md b/resources/docs/docs/chapters/tp/npm.md index dbad2ced43ce0a23c6e825ece64aab7ce343eb9c..2238df4333aaadb29432b37e4d72955b0c599b85 100644 --- a/resources/docs/docs/chapters/tp/npm.md +++ b/resources/docs/docs/chapters/tp/npm.md @@ -34,12 +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). -:::spoiler Show the commands +<details> <summary> Show the commands </summary> + ```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). @@ -47,12 +48,12 @@ This command will ask you to fill in some informations. Set your own values here - **description**: _A memory game based on memes ¯\\_(ツ)\\_/¯_. - **entrypoint**: \<leave blank> - **test command**: \<leave blank> -- **Git repository**: {{$m3.env.M3_GITLAB_URL}}/\<YOUR_NAMESPACE>/web-01 +- **Git repository**: <YOUR_GITLAB>/\<YOUR_NAMESPACE>/web-01 - leave other fields blank. -::::spoiler Show the expected package.json -:::code-tabs -@tab package.json +<details> <sumarry> Show the expected package.json </sumarry> + +package.json ```json { @@ -70,14 +71,13 @@ This command will ask you to fill in some informations. Set your own values here } } ``` -::: -:::: + +</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/) - Make your package private: -:::code-tabs -@tab package.json +package.json ```javascript { @@ -86,7 +86,7 @@ This command will ask you to fill in some informations. Set your own values here // ... } ``` -::: + > **tip** _NPM_ is not only a tool, it is also connected to the [official NPM repository](https://www.npmjs.com/). There, you can search for and download libraries published by other npm users, but also publish your own package with the `npm publish command`. > Set your package as private to avoid publishing it to the repository by accident. @@ -106,9 +106,10 @@ 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 -::::spoiler Show the back-end/package.json file -:::code-tabs -@tab package.json +<details> <summary> Show the back-end/package.json file </summary> + +package.json + ```json{13-20} { "name": "server", @@ -132,8 +133,8 @@ All of our project [**dependencies**](https://docs.npmjs.com/specifying-dependen } } ``` -::: -:::: + +</details> ### <i class="fa fa-terminal"></i> `npm install` <Diy /> @@ -144,23 +145,21 @@ 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. -:::code-tabs -@tab alias + alias ```bash cd front-end npm install -D http-server ``` -@tab verbose +verbose ```bash cd front-end npm install --save-dev http-server ``` -::: -::::spoiler Show the resulting front-end/package.json file -:::code-tabs -@tab front-end/package.json +<details><summary> Show the resulting front-end/package.json file </summary> + +front-end/package.json ```json{12-14} { "name": "username-meme-ory", @@ -180,11 +179,11 @@ npm install --save-dev http-server ``` 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. @@ -230,7 +229,8 @@ 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. -:::spoiler Show the node_modules folder structure +<details><summary> Show the node_modules folder structure </summary> + ``` node_modules/ ├── basic-auth @@ -261,12 +261,12 @@ node_modules/ ├── ... ├── url-join ``` -::: +</details> > **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. -> :::spoiler Show the node_modules folder size ->  -> ::: +> <details> Show the node_modules folder size +>  +> </details> #### <i class="fas fa-folder-tree"></i> Modified files @@ -287,9 +287,9 @@ front-end/ Did you notice that the generated `package.json` has a `"scripts"` section? -::::spoiler Show the package.json file -:::code-tabs -@tab package.json +<details><summary> Show the package.json file</summary> + +package.json ```json{7-9} { @@ -309,8 +309,7 @@ Did you notice that the generated `package.json` has a `"scripts"` section? } ``` -::: -:::: +</details> > **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... > @@ -334,10 +333,13 @@ So now, to run the server, you can use the command `http-server -c-1` without `n > > **Most of the projects have an `npm run (start|test)` command.** + - Add a new script called `start` in the scripts section. This script will run our `http-server` command. - ::::spoiler Show the package.json file - :::code-tabs - @tab package.json + + + <details> <summary> Show the package.json file </summary> + + package.json ```json{3} { "scripts": { @@ -346,25 +348,22 @@ So now, to run the server, you can use the command `http-server -c-1` without `n }, } ``` - ::: - :::: + </details> - Kill the old `http-server` if it is still running. Now, you can start your application using the following command: - :::code-tabs - @tab alias + alias ```bash npm start ``` - @tab verbose + verbose ```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. @@ -380,8 +379,9 @@ front-end/ - [ ] I know what _NPM scripts_ are. - [ ] I can run my application running the `npm start` command. -<GitCommit /> - -## <i class="fas fa-graduation-cap"></i> Assessment - -<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScHVcKj7HiXR0CJvkX5MC49GlUGPk-bPJuYQHWinOErGnThGA/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe> +<style> +summary { + color: #CA2468; + text-align: center; +} +</style> diff --git a/resources/docs/docs/chapters/tp/setup.md b/resources/docs/docs/chapters/tp/setup.md index 3ed00a79dd1f519c0a301a73ebe655fe8f0b6a83..6111b0169e59a1ef8709d002f278ffc4cd131832 100644 --- a/resources/docs/docs/chapters/tp/setup.md +++ b/resources/docs/docs/chapters/tp/setup.md @@ -19,7 +19,7 @@ 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. - > :::spoiler Show the installation commands + > <details> <summary>Show the installation commands</summary> > > ```bash > curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash @@ -27,13 +27,14 @@ tag: > nvm default 16 > ``` > - > ::: + > </details> - Have a web browser with good capabilities for debugging JavaScript (Eg: Google Chrome, Chromium, or Firefox). - Have a good IDE. I recommend [Visual Studio Code](https://code.visualstudio.com/) as it is free and really great for web development. -<Optional/> +Optional + - Install [_Prettier_](https://prettier.io/). _Prettier_ is a code formatter to automatically rearrange _JS_, _HTML_ and _CSS_ code when you save a file. You can install the extension for your IDE: - [Prettier for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) @@ -48,17 +49,19 @@ Your mission, should you choose to accept it, is to **rewrite this application u ### <i class="fab fa-git-alt"></i> Initialize the Git repository -<Diy/> +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** - :::spoiler Show the Git commands + + <details> <summary> Show the Git commands </summary> ```:no-v-pre - git clone git@{{$m3.env.M3_GITLAB_HOST}}:<YOUR_NAMESPACE>/<YOUR_PROJECT>.git + git clone git@<YOUR_GITLAB>:<YOUR_NAMESPACE>/<YOUR_PROJECT>.git cd <YOUR_PROJECT> git switch -c develop ``` - ::: + </details> - Download and extract the initial _ES5_ codebase for the _MEME-ORY_ application in your workspace: <ResourcesButton path="init.zip" title="Meme-ORY" /> @@ -91,7 +94,7 @@ Your mission, should you choose to accept it, is to **rewrite this application u npx http-server -c-1 ``` - :::spoiler Show the troubleshoot + <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... > @@ -111,7 +114,7 @@ Your mission, should you choose to accept it, is to **rewrite this application u > npx http-server -c-1 > ``` - ::: + </details> - 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. @@ -135,10 +138,12 @@ front-end/ - [ ] I can play _MEME-Ory_ game on [http://localhost:8080/src](http://localhost:8080/src) -<GitCommit /> - -## <i class="fas fa-graduation-cap"></i> Assessment - -<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf5PqALBMoJlCeF-F9Y0fOyfExredhgncpoyb_muAUu9rwgjQ/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe> - -[game-mockup]: ../assets/mockup.png +[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 68fac7d7463b24a9cd06027922b83f0880ff6b68..8e8fa724e251f8b405de6d515ed2fe4918460910 100644 --- a/resources/docs/docs/chapters/tp/spa.md +++ b/resources/docs/docs/chapters/tp/spa.md @@ -8,7 +8,7 @@ tag: As you know, the _MEME-Ory_ application is made of three views: - + - As a player, `index.html` is the first page you browse. - You are immediately redirected to the first view: `welcome.html`. @@ -18,7 +18,7 @@ As you know, the _MEME-Ory_ application is made of three views: Each view comes with a _complete *HTML* document_. Going from one view to another one means **loading an entirely new document**, even if the new page have a lot in common with the previous one (eg: the _navbar_, the _footer_...). > **danger** If the network is slow, it can cause **performance issues** and flickering until the page is fully loaded, which is not great in terms of **user experience**. ->  +>  ## <i class="fa fa-wrench"></i> The browser dev tools @@ -32,7 +32,7 @@ Each view comes with a _complete *HTML* document_. Going from one view to anothe > - **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`? @@ -49,7 +49,7 @@ In a _SPA_, the application has only one page. Even if the content changes, we s A **Router** is a JavaScript object which maps URLs to views. Here, our _Router_ is listening to url's [_hash_](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash) changes to know which view has to be displayed. It uses the [`DOM` API](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) to dynamically add or remove content. - + ### Create the _Router_ <Diy/> @@ -59,9 +59,9 @@ It uses the [`DOM` API](https://developer.mozilla.org/en-US/docs/Web/API/Documen - **`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">`. - ::::spoiler Show the main.js file - :::code-tabs - @tab main.js + <details><summary> Show the main.js file</summary> + + main.js ```js{1} const outlet = document.querySelector("#content-outlet"); @@ -85,13 +85,12 @@ It uses the [`DOM` API](https://developer.mozilla.org/en-US/docs/Web/API/Documen }); ``` - ::: - :::: + </details> - Edit `router.js` and complete the implementation of `function renderTemplate() {}`. Follow the `TODO #spa` comments for instructions. - ::::spoiler Show the resulting renderTemplate() function - :::code-tabs - @tab router.js + <details><summary> Show the resulting renderTemplate() function </summary> + + router.js ```js{8-12} (function () { @@ -111,16 +110,16 @@ It uses the [`DOM` API](https://developer.mozilla.org/en-US/docs/Web/API/Documen })(); ``` - ::: - :::: + </details> - Edit `welcome.js` and `game.js`. Look at the comments `TODO #spa` for instructions. - ::::spoiler Tired of looking for TODOs manually? + <details><summary> Tired of looking for TODOs manually? </summary> + > **tip** The faster way to find all specific string occurrences in a project is the `ctrl+shift+F` shortcut. > > In our case: `ctrl+shift+F` -> `TODO #spa` will do the job (replace `ctrl` by `cmd` on mac) - +</details> ## <i class="fa-solid fa-table-columns"></i> The application shell @@ -131,7 +130,7 @@ Each application view uses the same layout: It is called the **_Application Shell_** and is common to all application views. - + ### Create the shell <Diy/> <BadgeMedium /> @@ -153,11 +152,11 @@ It is called the **_Application Shell_** and is common to all application views. - `welcome.html`, `game.html` and `score.html` have the same shell (a top navbar, a central scrollable section and a footer). Rather than copy-pasting it in the three different views, move it in `index.html` once and for all. - + + +<details><summary> Show the index.html file </summary> -::::spoiler Show the index.html file -:::code-tabs -@tab index.html +index.html ```html{19-24,12} <!DOCTYPE html> @@ -189,8 +188,7 @@ It is called the **_Application Shell_** and is common to all application views. </html> ``` -::: -:::: +</details> - Navigate to [http://localhost:8080/src/](http://localhost:8080/src/). You should be able to play the game as usual. Notice how the _hash_ (`#`) is used in the url. @@ -214,8 +212,11 @@ src/app/views/welcome.html - [ ] I know what is a _SPA_ and why it may be a better choice. - [ ] The application runs as usual. -<GitCommit /> - -## <i class="fas fa-graduation-cap"></i> Assessment - -<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScjqa2rG-bBbDAId1iaHMVPrrgi0C1uRZTm5kht4fxuNP4ilQ/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe> +<style> +summary { + color: #cb2468; + text-align: center; + margin-bottom: 20px; + margin-top: 20px +} +</style> \ No newline at end of file diff --git a/resources/docs/docs/chapters/tp/Let-and-const.md b/resources/docs/docs/chapters/tp/variables.md similarity index 89% rename from resources/docs/docs/chapters/tp/Let-and-const.md rename to resources/docs/docs/chapters/tp/variables.md index b0ad16b51d9bb6697b6f307bfa504aa1cf8dd664..ee6715de1a9b3f2313d7a7bf104e976863e6c494 100644 --- a/resources/docs/docs/chapters/tp/Let-and-const.md +++ b/resources/docs/docs/chapters/tp/variables.md @@ -9,9 +9,8 @@ With _ES5_, we used to define each variable along with the [`var` keyword](https > **danger** A variable defined with the `var` keyword is **[hoisted](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)** and its scope is the global function scope in which it is defined. For this reason, a variable declared with `var` may have a strange behavior and `let`/`const` should be preferred over `var`. > -> ::::spoiler Show some examples -> :::code-tabs -> @tab var +> <details><summary> Show some examples </summary> +> var > > ```js{2} > if (true) { @@ -31,8 +30,6 @@ With _ES5_, we used to define each variable along with the [`var` keyword](https > console.log(result); // => error > ``` > -> ::: -> :::: ## `let` / `const` <BadgeEasy /> @@ -45,8 +42,7 @@ Since _ES6_, [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Ref - `_appendCard()` adds the cards one by one to the document and adds an `eventListener` on cards click. - Edit `game.js`. Let's try to remove the `_appendCard()` function and add its content right in the `init()` function as this code is only used once... - :::code-tabs - @tab game.js - before + game.js - before ```js{10,19-25} export class GameComponent { @@ -79,7 +75,7 @@ Since _ES6_, [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Ref } ``` - @tab game.js - after + game.js - after ```js{9-17,25} export class GameComponent { @@ -110,7 +106,6 @@ Since _ES6_, [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Ref } ``` - ::: - Try to flip a card again and you should realize that **things are broken**. @@ -119,11 +114,11 @@ Since _ES6_, [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Ref - Replace the `var` keyword by `let` or `const`, to fix the issue. Look at the `TODO #let-const` comments for instructions. > **question** **Why does this make it work again?** - > :::spoiler Show the answer + > <details><summary> Show the answer </summary> > - `var` is scoped to the function (eg: it is _hoisted_ at the top of the _function's brackets pair_) > - `var card` variable is reused in each loop iteration > - when a card is clicked, the `card` variable is already assigned to its last value (the last card) and passed to `this._flipCard(card)`. - > ::: + > </details> - Edit `game.js`: whenever you see the `var` keyword in the whole file, replace it with either `let` or `const`. @@ -143,9 +138,3 @@ src/app/scripts/game.js - [ ] All `var` have been replaced with either `let` or `const`. - [ ] The codebase has no unresolved `TODO #let-const` comments left. - [ ] The application runs as usual. - -<GitCommit /> - -## <i class="fas fa-graduation-cap"></i> Assessment - -<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScwuzXwjtf2IaP_NGB-GbNOMRrfsscnBGZtVz2ztmpol-TctA/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe> diff --git a/resources/docs/docs/chapters/tp/webpack.md b/resources/docs/docs/chapters/tp/webpack.md index 26af516d84edd3c89954cefa7903c7c219a6a7a9..c187acdec91a8e9caf191a5872b53fb59d73f669 100644 --- a/resources/docs/docs/chapters/tp/webpack.md +++ b/resources/docs/docs/chapters/tp/webpack.md @@ -11,8 +11,7 @@ tag: From now we have been using the old way to put in common all of our JavaScript scripts as we have imported all of them in the `index.html` file like that: -:::code-tabs -@tab index.html +index.html ```html{10,11} <!DOCTYPE html> @@ -29,19 +28,16 @@ From now we have been using the old way to put in common all of our JavaScript s </body> </html> ``` -::: In the previous step, we wrote the following lines in `main.js`. -:::code-tabs -@tab main.js +main.js ```js{2} const outlet = document.querySelector("#content-outlet"); const router = new Router(outlet); // ... ``` -::: It works, because: - A function named `Router()` is defined in `router.js` @@ -53,8 +49,7 @@ It works, because: > > In a `function`, the scope is usually the `function` itself. Out of the function, the scope is the global `window`. Everything defined in `window` can be accessed from everywhere. -:::code-tabs -@tab router.js +router.js ```js{7} (function () { @@ -69,7 +64,7 @@ It works, because: // ... ``` -@tab index.html +index.html ```html{10,11} <!DOCTYPE html> @@ -87,7 +82,6 @@ It works, because: </html> ``` -::: Although putting all variables and functions in the global scope has been a popular way to share code between different scripts, it is far from ideal: @@ -99,9 +93,8 @@ Although putting all variables and functions in the global scope has been a popu - Edit `index.html` and swap the import for `main.js` with another one: - ::::spoiler Try it yourself - :::code-tabs - @tab index.html + <details><summary> Try it yourself </summary> + index.html ```html{7} <!DOCTYPE html> @@ -119,9 +112,7 @@ Although putting all variables and functions in the global scope has been a popu </body> </html> ``` - - ::: - :::: +</details> - Reload the page. You should have the following error in the browser console: > **boom** @@ -141,7 +132,7 @@ Fortunately, with **_ES6 modules_** we now have the `import` and `export` keywor > - The `export` keyword can only be at the root level of the file. (eg: not in a function nor in a condition). > - Use the `import` keyword to import a piece of code that has been exported in an other module. > -> See the [cheatsheet](../10.cheatsheet/CHEATSHEET.md#es-modules) +> See the [cheatsheet](../../cheatsheets/CHEATSHEET.md#es-modules) ### <i class="fa fa-file-export"></i> `export` <Diy /> <BadgeEasy /> @@ -157,9 +148,9 @@ Fortunately, with **_ES6 modules_** we now have the `import` and `export` keywor > It was often used before _ES Modules_ to define private scopes. > Now, **everything in an _ES module_ is private unless it is exported**. - ::::spoiler Show the router.js file - :::code-tabs - @tab router.js: before + <details><summary> Show the router.js file</summary> + + router.js: before ```js{1,11,13} (function () { @@ -177,7 +168,7 @@ Fortunately, with **_ES6 modules_** we now have the `import` and `export` keywor })(); ``` - @tab router.js: after + router.js: after ```js{7} @@ -191,18 +182,15 @@ Fortunately, with **_ES6 modules_** we now have the `import` and `export` keywor } // ... ``` - - ::: - :::: + </details> ### <i class="fa fa-file-import"></i> `import` <Diy /> <BadgeEasy /> - Edit `main.js`. Look at `TODO #import-router` for instructions. Use a [**named import**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#named_import) to import the previously exported `Router`. - ::::spoiler Show the main.js file - :::code-tabs - @tab main.js + <details><summary> Show the main.js file </summary> + main.js ```js import { Router } from "./router"; @@ -215,8 +203,7 @@ Fortunately, with **_ES6 modules_** we now have the `import` and `export` keywor }); // ... ``` - ::: - :::: + </details> - Refresh the page once `Router` is properly exported and imported. It should produce these errors: @@ -280,8 +267,7 @@ npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin Create a new file called [`webpack.config.js`](https://webpack.js.org/configuration/), with a minimal _Webpack_ configuration: -:::code-tabs -@tab webpack.config.js +webpack.config.js ```javascript{5} const path = require("path"); @@ -309,13 +295,13 @@ module.exports = { }, }; ``` -::: > **tip** The [`devtool: "inline-source-map"`](https://webpack.js.org/configuration/devtool/) option generates the **source maps**. Simply put, this option will allow _Webpack_ to provide source maps to the _bundle_, so that the browser can reconstruct the original source code. The _bundler_ uglifies, minifies and merges all code files into a single _bundle_, which makes it hard to debug. -:::spoiler Show the bundled code snippet +<details> <summary> Show the bundled code snippet </summary> + ```javascript __webpack_require__.r(__webpack_exports__); /* harmony import */ var _app_utils_utils__WEBPACK_IMPORTED_MODULE_0__ = @@ -325,7 +311,7 @@ __webpack_require__.r(__webpack_exports__); // front-end/src/main.js ``` Not pretty to debug, isn't it? That is why we asked for source maps in the _Webpack_ configuration file. This will help us while debugging. -::: +</details> In `webpack.config.js` we also set `src/main.js` as the project entrypoint (this is the default value). - Move `src/app/scripts/main.js` => `src/main.js`. @@ -341,8 +327,7 @@ In `webpack.config.js` we also set `src/main.js` as the project entrypoint (this - Edit `package.json`. Replace the `start` script to use the _Webpack_ command: - :::code-tabs - @tab package.json + package.json ```json { @@ -351,14 +336,14 @@ In `webpack.config.js` we also set `src/main.js` as the project entrypoint (this } } ``` - ::: - Remove `http-server` from the dependencies. From now, we are going to use `webpack serve` instead. - :::spoiler Show the npm remove command + <details><summary> Show the npm remove command</summary> + ```bash npm remove http-server ``` - ::: + </details> Now, you should be able to start the application. @@ -372,7 +357,8 @@ Attention, we now browse localhost:8080 and not localhost:8080/src. Change the `navbar-brand` link to point toward `/` instead of `/src` in `welcome.html`, `game.html` and `score.html` files. -:::spoiler Show the resulting HTML file +<details><summary> Show the resulting HTML file </summary> + ```html{10} <!DOCTYPE html> <html lang="en"> @@ -398,13 +384,13 @@ Change the `navbar-brand` link to point toward `/` instead of `/src` in `welcome </body> </html> ``` -::: +</details> ### <i class="fa fa-hammer"></i> Build with Webpack <Diy /> You can also build the application for production. To do this, add a `build` script in the `package.json` file: -:::code-tabs -@tab package.json + +package.json ```json "scripts": { @@ -413,7 +399,6 @@ You can also build the application for production. To do this, add a `build` scr "test": "echo \"Error: no test specified\" && exit 1" }, ``` -::: > **danger** Ensure you **disable the source maps for production builds** since it will weight the _bundle_ a lot and give access to the original application source code to everyone. > Here this is done with the `--mode=production --no-devtool` flag. @@ -423,15 +408,14 @@ npm run build ``` Look at the resulting build, located in the `dist/` folder. -:::spoiler Show the dist/ folder +<details><summary> Show the dist/ folder </summary> ``` [4.0K] dist/ ├── [1.1K] index.html └── [4.2K] main.js ``` - -::: +</details> > **danger** Do not forget to add the `dist/` folder in `.gitignore`. @@ -462,3 +446,12 @@ package-lock.json ## <i class="fas fa-graduation-cap"></i> Assessment <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdzd5BXpKEJ5F1mtPcSuM3pn8ozs5WzHHllvsdVUavYQMCn5A/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe> + +<style> +summary { + color: #cb2468; + text-align: center; + margin-bottom: 20px; + margin-top: 20px +} +</style> \ No newline at end of file diff --git a/resources/docs/mkdocs.yml b/resources/docs/mkdocs.yml index b89e46d4d798a699ec7eefb46dc5829923b8c499..e2f49dbb0db3d241561a6e7d42d2337786270d9c 100644 --- a/resources/docs/mkdocs.yml +++ b/resources/docs/mkdocs.yml @@ -3,20 +3,20 @@ nav: - TP: - "Setup": chapters/tp/setup.md - "npm": chapters/tp/npm.md - - "spa": chapters/tp/spa.md - - "webpack": chapters/tp/webpack.md - - "webpack js": chapters/tp/webpack-js.md - - "webpack css": chapters/tp/webpack-cs.md - - "webpack html": chapters/tp/webpack-html.md - - "es6-classes.md": chapters/tp/es6-classes.md - - "Let and const": chapters/tp/Let-and-const.md - - "arrow functions": chapters/tp/arrow-functions.md - - "functionnal programming": chapters/tp/functionnal-programming.md - - "promises": chapters/tp/promises.md + - "Spa": chapters/tp/spa.md + - "Webpack": chapters/tp/webpack.md + - "The bundle": chapters/tp/bundle.md + - "CSS Loader": chapters/tp/css-loader.md + - "HTML Loader": chapters/tp/html-loader.md + - "Classes": chapters/tp/es6-classes.md + - "Variables": chapters/tp/variables.md + - "Arrow functions & Template litrals": chapters/tp/arrow-functions.md + - "Functionnal programming": chapters/tp/functionnal-programming.md + - "Asynchronous": chapters/tp/asynchronous.md - "sourcemaps": chapters/tp/sourcemaps.md - - "components": chapters/tp/components.md - - "babel": chapters/tp/babel.md + - "Component Oriented Architecture": chapters/tp/components.md + - "Ensure old browser compatibility": chapters/tp/babel.md - "arrow functions": chapters/tp/arrow-functions.md - "arrow functions": chapters/tp/style.md - "functionnal programming": chapters/tp/functionnal-programming.md