diff --git a/training/front-end/01-modern-javascript.md b/training/front-end/01-modern-javascript.md index efb4b2b..a26b329 100644 --- a/training/front-end/01-modern-javascript.md +++ b/training/front-end/01-modern-javascript.md @@ -127,6 +127,21 @@ const person2 = { ["first" + "Name"]: "Olympe" }; console.assert(_.isEqual(person2, { firstName: "Olympe" })); // Btw, you can include quotes although nobody does this console.assert(_.isEqual(person2, { firstName: "Olympe" })); + +// Short form function +const es5Object = { + say: function () { + console.log("hello"); + }, +}; +es5Object.say() + +const es6Object = { + say() { + console.log("hello"); + }, +}; +es6Object.say() ``` ### Array @@ -226,6 +241,16 @@ console.assert(myFunctionToBeShortenedArrowV2(1) === 1); ## Template literals +```javascript +const longString = `multi +line +string`; + +const name = "Louis"; +// Template interpolation +const hello = `Hello ${name}`; +``` + ### Template tags ## Loops @@ -256,3 +281,4 @@ ES Module syntax: ## References - [ES5 to ESNext — here’s every feature added to JavaScript since 2015](https://www.freecodecamp.org/news/es5-to-esnext-heres-every-feature-added-to-javascript-since-2015-d0c255e13c6e/) +- [ES2015 / ES6: Basics of modern Javascript](https://www.slideshare.net/WojciechDzikowski/es2015-es6-basics-of-modern-javascript) diff --git a/training/front-end/05-front-end-development-practices.md b/training/front-end/05-front-end-development-practices.md index 5460e39..ee78431 100644 --- a/training/front-end/05-front-end-development-practices.md +++ b/training/front-end/05-front-end-development-practices.md @@ -5,6 +5,7 @@ - [Front-end development practices](#front-end-development-practices) - [Testing](#testing) - [Code style](#code-style) + - [Dependency management: npm or yarn](#dependency-management-npm-or-yarn) @@ -13,3 +14,5 @@ ## Testing ## Code style + +## Dependency management: npm or yarn diff --git a/training/front-end/00-intro.md b/training/front-end/README.md similarity index 82% rename from training/front-end/00-intro.md rename to training/front-end/README.md index 6cec0c0..5aa25ea 100644 --- a/training/front-end/00-intro.md +++ b/training/front-end/README.md @@ -15,7 +15,7 @@ ## Goal of this training -This training was developed for back-end and infra developers. +This training was developed for back-end and infra developers. It is meant to be used as a support for an oral presentation. I am not an expert in front-end development. This should only be considered an introduction. @@ -25,7 +25,8 @@ Assumed knowledge: - HTTP - Basics about browser -- Basic about HTML/CSS/JS +- Basics about HTML and CSS +- Basics about programming languages ## To do before the course @@ -33,8 +34,11 @@ Read the [grab/front-end-guide](https://github.com/grab/front-end-guide) to get ## Curriculum -1. Modern Javascript/TypeScript development -2. Intro to React +1. Modern Javascript +2. TypeScript +3. Intro to React +4. CSS/HTML restart +5. Front-end development practices ## Inspiration