Improve front-end training

training/front-end/01-modern-javascript.md

@@ -39,7 +39,9 @@
     - [Exports](#exports)
   - [Other features](#other-features)
     - [Optional chaining](#optional-chaining)
+    - [Ternary operator](#ternary-operator)
   - [Self assessment](#self-assessment)
+  - [References](#references)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -694,6 +696,15 @@ let nestedProp = obj.first && obj.first.second;
 let nestedProp = obj.first?.second;
 ```
 
+### Ternary operator
+
+```javascript
+const a = 'a'
+const r = a === 'a' ? 'isA' : 'isNotA'
+
+console.assert(r === 'isA')
+```
+
 ## Self assessment
 
 - How old is JavaScript?
@@ -707,6 +718,7 @@ let nestedProp = obj.first?.second;
 - `const a = [1]; const b = [1];`: what does `a == b` evaluates to?
 - How do you write arrow functions?
 - `const {a} = {a: 1}`: what does `a` evaluate to?
+- How do you write the ternary operator?
 
 Advanced:
 
@@ -716,6 +728,13 @@ Advanced:
 // Write transform1 using a one-line arrow function with object structuring
 console.assert(_.isEqual(transform1({name: "Foo"}), {FooA:1}))
 console.assert(_.isEqual(transform1({name: "Bar"}), {Bar:1}))
+```
+
+The three things you need:
+
+- Use `let` and `const`
+- Object destructuring `const { a } = {a: 1}`
+- Arrow functions `const noop = () => { }`
 
 Other assessments:
 

training/front-end/02-react.md

@@ -0,0 +1,50 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+## Table of Contents
+
+- [An introduction to React](#an-introduction-to-react)
+  - [Before getting into React...](#before-getting-into-react)
+    - [Manipulating the DOM](#manipulating-the-dom)
+    - [The inspiration for React](#the-inspiration-for-react)
+    - [The shadow DOM](#the-shadow-dom)
+  - [Learning React](#learning-react)
+  - [Self-assessment](#self-assessment)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+# An introduction to React
+
+## Before getting into React...
+
+### Manipulating the DOM
+
+- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
+- https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
+
+### The inspiration for React
+
+### The shadow DOM
+
+## Learning React
+
+Follow the tutorial: https://reactjs.org/docs/hello-world.html
+
+## Self-assessment
+
+Basics:
+
+- What is the difference between elements and components?
+- What is JSX?
+- Is it ok to modify props?
+- How should you modify state?
+- What does "the data flows down" mean?
+- How do you pass arguments to event handlers?
+- How do you put conditionals in JSX?
+- How do you put inline if-else in JSX?
+- How do you prevent a component from rendering?
+- What is the `key` prop?
+- What are controlled and uncontrolled components?
+- What does it mean to "lift state up"?
+- Should you use composition or inheritance with React?
+
+Advanced:

training/front-end/04-the-browser.md

@@ -16,3 +16,5 @@
 ### Reading and manipulating the DOM
 
 ### Events
+
+https://dmitripavlutin.com/javascript-event-delegation/

training/front-end/05-css-html-restart.md

@@ -1,6 +1,5 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-
 ## Table of Contents
 
 - [CSS & HTML: restart](#css--html-restart)

training/front-end/05-react.md

@@ -1,24 +0,0 @@
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-## Table of Contents
-
-- [An introduction to React](#an-introduction-to-react)
-  - [The inspiration for React](#the-inspiration-for-react)
-  - [The shadow DOM](#the-shadow-dom)
-  - [React components](#react-components)
-  - [An introduction to state management in React application](#an-introduction-to-state-management-in-react-application)
-  - [Testing React applications](#testing-react-applications)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
-
-# An introduction to React
-
-## The inspiration for React
-
-## The shadow DOM
-
-## React components
-
-## An introduction to state management in React application
-
-## Testing React applications

training/front-end/06-front-end-development-practices.md

@@ -18,8 +18,10 @@
 
 ## Security
 
+- HTTPS
 - CORS
 - XSS prevention
 - CSP
+- OWASP
 
 ## Dependency management: npm or yarn

training/front-end/README.md

@@ -2,7 +2,7 @@
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 ## Table of Contents
 
-- [Introduction to front-end programming](#introduction-to-front-end-programming)
+- [Introduction to front-end programming for back-end developers](#introduction-to-front-end-programming-for-back-end-developers)
   - [Goal of this training](#goal-of-this-training)
   - [Prerequisites](#prerequisites)
   - [To do before the course](#to-do-before-the-course)
@@ -12,7 +12,7 @@
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-# Introduction to front-end programming
+# Introduction to front-end programming for back-end developers
 
 ## Goal of this training
 
@@ -36,10 +36,12 @@ Read the [grab/front-end-guide](https://github.com/grab/front-end-guide) to get
 
 ## Curriculum
 
+Instead of going deep in topics, we try to go as fast as possible to front-end programming (i.e. React with TypeScript), and then we go back to address those more specific topics.
+
 1. The language: writing modern Javascript
-2. The environment: the browser
+2. React
 3. TypeScript
-4. React
+4. The browser
 5. CSS/HTML restart
 6. Front-end development practices