From c705a1e61fe75a62ebdb6d03b4d58bfa3a004083 Mon Sep 17 00:00:00 2001 From: OGordoo Date: Wed, 12 Aug 2020 16:50:05 +0100 Subject: [PATCH 1/7] mini-framework project --- subjects/mini-framework/README.md | 103 ++++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 subjects/mini-framework/README.md diff --git a/subjects/mini-framework/README.md b/subjects/mini-framework/README.md new file mode 100644 index 00000000..711990d1 --- /dev/null +++ b/subjects/mini-framework/README.md @@ -0,0 +1,103 @@ +## mini-framework + +Now that you have already used a framework of your choice, you must now implement some features on a framework of your own. That's right, you are going to create a framework. + +Be aware that a framework is different from a library. When you call a method from a library, you are in control. But with a framework, the control is inverted: the framework calls you. + +### Objectives + +Your framework should implement: + +- Abstracting DOM +- Easier Routing +- State Management +- Event Handling + +### Instructions + +Your framework will be tested by using it, like you previously have used one, in the social network project. So the user has to be presented to a folder structure that when executed `npm start` at the root of the folder, it runs the app. The user testing your framework will have to implement some simple code in order to test the features described bellow. + +#### Abstracting DOM + +You will have to implement a way to handle the DOM. The DOM can be seen as a big object, like in the example below: + +```html + +
+ + +
+ +``` + +The html above can be written as: + +```json +{ + "tag": "html", + "attrs": {}, + "children": [ + { + "tag": "div", + "attrs": { + "class": "nameSubm" + }, + "children": [ + { + "tag": "input", + "attrs": { + "type": "text", + "placeholder": "Insert Name" + } + }, // + { + "tag": "input", + "attrs": { + "type": "submit", + "placeholder": "Submit" + } + } // + ] + } // + ] +} // +``` + +With this in mind you can manipulate the DOM more easily in JS. And that is what you will do using a method. Here are some methods you can use: + +- [Virtual DOM](https://bitsofco.de/understanding-the-virtual-dom/) - Using a second DOM with the wanted changes, to compare with the real DOM and change just what is needed +- [Data Binding](https://docs.microsoft.com/en-us/dotnet/desktop-wpf/data/data-binding-overview?redirectedfrom=MSDN) - binds together two data sources and keeps them synchronized +- [Templating](https://medium.com/@BuildMySite1/javascript-templating-what-is-templating-7ff49d97db6b) - refers to the client side data binding method implemented with the JavaScript language. + +There are a lot of ways to achieve this. Above are just some examples, what matters is that the DOM must respond to certain actions of the user. + +--- + +#### Easier Routing + +Routing is the process of selecting a path for traffic in a network. And, as you may have already realized, routing in JS can sometimes be a little bit confusing, so what you will need to do, is to implement a new routing system that is more intuitive and simpler. + +Also take in consideration that all kind of URLs must be supported, like for example queries in the URL from GET requests (example: `http://something.com/users?id=31&tkn=31inasdasni213n1i23ni213ojo`) or not found pages. + +--- + +#### State Management + +The state of an app can be seen as the outcome of all of the actions that the user has taken since the page loaded. In other words, if a user clicks on a button to execute an action, the state should then change.\ +What you will need to do is to implement a way to handle this state. Remember that multiple pages can need to interact with the same state, so you need to find a way to let the state be reachable at every time. + +--- + +#### Event Handling + +You will also have to implement a way to handle the events triggered by the user, like: scrolling, clicking, certain keybindings, etc.... Note that this new way of handling events must different from the `addEventListener()` method that already exists. + +--- + +This project will help you learn about: + +- Web Development +- Frameworks +- DOM +- Routing +- State of an Application From 40a1dd8478b30fb00100a0592320e11e23d0e661 Mon Sep 17 00:00:00 2001 From: OGordoo Date: Thu, 13 Aug 2020 09:46:57 +0100 Subject: [PATCH 2/7] no comments on json --- subjects/mini-framework/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/subjects/mini-framework/README.md b/subjects/mini-framework/README.md index 711990d1..a2f180d5 100644 --- a/subjects/mini-framework/README.md +++ b/subjects/mini-framework/README.md @@ -49,18 +49,18 @@ The html above can be written as: "type": "text", "placeholder": "Insert Name" } - }, // + }, { "tag": "input", "attrs": { "type": "submit", "placeholder": "Submit" } - } // + } ] - } // + } ] -} // +} ``` With this in mind you can manipulate the DOM more easily in JS. And that is what you will do using a method. Here are some methods you can use: From e4725fb94f0bf00cd15c6ddfa6928fa0dd7774ed Mon Sep 17 00:00:00 2001 From: OGordoo Date: Mon, 17 Aug 2020 17:47:24 +0100 Subject: [PATCH 3/7] audit and test examples --- subjects/mini-framework/README.md | 6 ++- subjects/mini-framework/audit/README.md | 41 +++++++++++++++ subjects/mini-framework/dom/README.md | 36 +++++++++++++ subjects/mini-framework/routing/README.md | 62 +++++++++++++++++++++++ 4 files changed, 143 insertions(+), 2 deletions(-) create mode 100644 subjects/mini-framework/audit/README.md create mode 100644 subjects/mini-framework/dom/README.md create mode 100644 subjects/mini-framework/routing/README.md diff --git a/subjects/mini-framework/README.md b/subjects/mini-framework/README.md index a2f180d5..be23f500 100644 --- a/subjects/mini-framework/README.md +++ b/subjects/mini-framework/README.md @@ -15,6 +15,8 @@ Your framework should implement: ### Instructions +You must create documentation for your framework, so that users (auditers) are able to understand and know how to use your framework without experiencing any awkwardness. By documentation we mean, the explaining of how does the framework works and how to work with it, for example: how to create a div, how to add an event to a button, etc. + Your framework will be tested by using it, like you previously have used one, in the social network project. So the user has to be presented to a folder structure that when executed `npm start` at the root of the folder, it runs the app. The user testing your framework will have to implement some simple code in order to test the features described bellow. #### Abstracting DOM @@ -71,14 +73,14 @@ With this in mind you can manipulate the DOM more easily in JS. And that is what There are a lot of ways to achieve this. Above are just some examples, what matters is that the DOM must respond to certain actions of the user. +You have to take into account the events, children and attributes of each element of the DOM. + --- #### Easier Routing Routing is the process of selecting a path for traffic in a network. And, as you may have already realized, routing in JS can sometimes be a little bit confusing, so what you will need to do, is to implement a new routing system that is more intuitive and simpler. -Also take in consideration that all kind of URLs must be supported, like for example queries in the URL from GET requests (example: `http://something.com/users?id=31&tkn=31inasdasni213n1i23ni213ojo`) or not found pages. - --- #### State Management diff --git a/subjects/mini-framework/audit/README.md b/subjects/mini-framework/audit/README.md new file mode 100644 index 00000000..6533a4a0 --- /dev/null +++ b/subjects/mini-framework/audit/README.md @@ -0,0 +1,41 @@ +#### Functional + +###### Does the project contain documentation? (If so, you will need it) + +##### Create a project and use the mini-framework in it and try to run `npm start` at the root folder of the project. + +###### Did the website start without errors from the framework? + +##### First take a look at the behavior of the code presented in the [_dom/README.md_](https://public.01-edu.org/subjects/mini-framework/dom) file. Then try to replicate the behavior of the example with the corresponding template of the framework and run the app. + +###### Can you create the red box and the button present in the example? + +##### With the same example as above, open the Web Developer Tools (Ctrl+Shift+I) and go to the Inspector Tab. + +###### Are the elements created as they should (the red box and the button inside the app div)? + +##### Still on the Inspector Tab, does all the elements have the right attributes (id, class, style)? + +###### With the same example, did the box move when you clicked the button? + +##### First take a look at the behavior of the code presented in the [_routing/README.md_](https://public.01-edu.org/subjects/mini-framework/routing) file. Then try to replicate the behavior of the example with the corresponding template of the framework and run the app. (Making the page reload is not required) + +###### Were you able to switch between the two pages? + +###### With the same example as above, did the URL changed when you switch between pages? + +##### With the same example, try to define a state by assigning a value to it in the 'Home Page' and then switch to the 'Active Page'. + +###### If you check the state, does it kept the value assigned to it? + +#### Bonus + +###### +Is the performance similar both in the framework code and the examples above? + +###### +Is it easier to handle the DOM using the framework than it is to use plain HTML and JS? + +###### +Is it easier to handle the routing in JS using the framework? + +###### +Does the project runs quickly and effectively? (Favoring recursive, no unnecessary data requests, etc) + +###### +Is the code using synchronicity to increase performance? diff --git a/subjects/mini-framework/dom/README.md b/subjects/mini-framework/dom/README.md new file mode 100644 index 00000000..018477a2 --- /dev/null +++ b/subjects/mini-framework/dom/README.md @@ -0,0 +1,36 @@ +## DOM example + +The example consists in a red box moving by clicking on a button. + +```html + + + + + SSS + + +
+
+ +
+ + + +``` diff --git a/subjects/mini-framework/routing/README.md b/subjects/mini-framework/routing/README.md new file mode 100644 index 00000000..d4571130 --- /dev/null +++ b/subjects/mini-framework/routing/README.md @@ -0,0 +1,62 @@ +## Routing example + +The example consists in switching between a **'Home Page'** to a **'Active Page'** by clicking on a **'Click Me'** hyperlink. + +You will need to two or three files depending if you include the script on the html files or not. All files should be in the same folder. + +index.html: + +```html + + + + + + + +

Home Page

+ Click here + + + +``` + +active.html: + +```html + + + + + Active + + +

Active Page

+ Click Me + + + +``` + +script.js: + +```js +const readTextFile = (file, allText = '') => { + let rawFile = new XMLHttpRequest() + rawFile.open('GET', file, false) + rawFile.onreadystatechange = () => { + if (rawFile.readyState === 4) { + if (rawFile.status === 200 || rawFile.status == 0) { + allText = rawFile.responseText + } + } + } + rawFile.send(null) + return allText +} + +document.body.innerHTML = + location.pathname === '/' + ? readTextFile('./index.html') + : readTextFile('./active.html') +``` From de4cf20269f6a8179bc17aeac2f83acc03775969 Mon Sep 17 00:00:00 2001 From: OGordoo Date: Tue, 18 Aug 2020 10:44:29 +0100 Subject: [PATCH 4/7] objectives correction --- subjects/mini-framework/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/subjects/mini-framework/README.md b/subjects/mini-framework/README.md index be23f500..cf36555c 100644 --- a/subjects/mini-framework/README.md +++ b/subjects/mini-framework/README.md @@ -8,8 +8,8 @@ Be aware that a framework is different from a library. When you call a method fr Your framework should implement: -- Abstracting DOM -- Easier Routing +- Abstracting the DOM + Routing System - State Management - Event Handling @@ -19,7 +19,7 @@ You must create documentation for your framework, so that users (auditers) are a Your framework will be tested by using it, like you previously have used one, in the social network project. So the user has to be presented to a folder structure that when executed `npm start` at the root of the folder, it runs the app. The user testing your framework will have to implement some simple code in order to test the features described bellow. -#### Abstracting DOM +#### Abstracting the DOM You will have to implement a way to handle the DOM. The DOM can be seen as a big object, like in the example below: @@ -77,7 +77,7 @@ You have to take into account the events, children and attributes of each elemen --- -#### Easier Routing +#### Routing System Routing is the process of selecting a path for traffic in a network. And, as you may have already realized, routing in JS can sometimes be a little bit confusing, so what you will need to do, is to implement a new routing system that is more intuitive and simpler. From f6f4dbe63abd7333cf1a31225e70770b814ebfaa Mon Sep 17 00:00:00 2001 From: OGordoo Date: Tue, 18 Aug 2020 16:28:25 +0100 Subject: [PATCH 5/7] removing npm, correcting subject --- subjects/mini-framework/README.md | 2 +- subjects/mini-framework/audit/README.md | 6 +----- subjects/mini-framework/routing/README.md | 10 +++++----- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/subjects/mini-framework/README.md b/subjects/mini-framework/README.md index cf36555c..7a995470 100644 --- a/subjects/mini-framework/README.md +++ b/subjects/mini-framework/README.md @@ -17,7 +17,7 @@ Your framework should implement: You must create documentation for your framework, so that users (auditers) are able to understand and know how to use your framework without experiencing any awkwardness. By documentation we mean, the explaining of how does the framework works and how to work with it, for example: how to create a div, how to add an event to a button, etc. -Your framework will be tested by using it, like you previously have used one, in the social network project. So the user has to be presented to a folder structure that when executed `npm start` at the root of the folder, it runs the app. The user testing your framework will have to implement some simple code in order to test the features described bellow. +Your framework will be tested by using it, like you previously have used one, in the social network project. So the user has to be presented to a folder structure that allows him to run the app from the root of that folder structure. The user testing your framework will have to implement some simple code in order to test the features described bellow. #### Abstracting the DOM diff --git a/subjects/mini-framework/audit/README.md b/subjects/mini-framework/audit/README.md index 6533a4a0..cf80ce5b 100644 --- a/subjects/mini-framework/audit/README.md +++ b/subjects/mini-framework/audit/README.md @@ -1,10 +1,6 @@ #### Functional -###### Does the project contain documentation? (If so, you will need it) - -##### Create a project and use the mini-framework in it and try to run `npm start` at the root folder of the project. - -###### Did the website start without errors from the framework? +###### Are all the framework API correctly documented? (If so, you will need it for the next questions) ##### First take a look at the behavior of the code presented in the [_dom/README.md_](https://public.01-edu.org/subjects/mini-framework/dom) file. Then try to replicate the behavior of the example with the corresponding template of the framework and run the app. diff --git a/subjects/mini-framework/routing/README.md b/subjects/mini-framework/routing/README.md index d4571130..ce08728d 100644 --- a/subjects/mini-framework/routing/README.md +++ b/subjects/mini-framework/routing/README.md @@ -8,7 +8,7 @@ index.html: ```html - + @@ -25,7 +25,7 @@ active.html: ```html - + Active @@ -41,7 +41,7 @@ active.html: script.js: ```js -const readTextFile = (file, allText = '') => { +const getTextFile = (file, allText = '') => { let rawFile = new XMLHttpRequest() rawFile.open('GET', file, false) rawFile.onreadystatechange = () => { @@ -57,6 +57,6 @@ const readTextFile = (file, allText = '') => { document.body.innerHTML = location.pathname === '/' - ? readTextFile('./index.html') - : readTextFile('./active.html') + ? getTextFile('./index.html') + : getTextFile('./active.html') ``` From 363ea201c285acd653970247724ec5320703caac Mon Sep 17 00:00:00 2001 From: OGordoo Date: Wed, 19 Aug 2020 14:24:22 +0100 Subject: [PATCH 6/7] todoMVC changes --- subjects/mini-framework/README.md | 7 +++++ subjects/mini-framework/audit/README.md | 38 ++++++++++++++++--------- 2 files changed, 32 insertions(+), 13 deletions(-) diff --git a/subjects/mini-framework/README.md b/subjects/mini-framework/README.md index 7a995470..19855cdc 100644 --- a/subjects/mini-framework/README.md +++ b/subjects/mini-framework/README.md @@ -13,6 +13,8 @@ Your framework should implement: - State Management - Event Handling +You will also need to make a [todoMVC](http://todomvc.com/) project using your framework. + ### Instructions You must create documentation for your framework, so that users (auditers) are able to understand and know how to use your framework without experiencing any awkwardness. By documentation we mean, the explaining of how does the framework works and how to work with it, for example: how to create a div, how to add an event to a button, etc. @@ -96,6 +98,11 @@ You will also have to implement a way to handle the events triggered by the user --- +#### TodoMVC + +A todoMVC project consists on creating a [webpage](http://todomvc.com/examples/vanillajs/) (this example is written in VanillaJS) with the same elements present in the example, so we advise you to test it around first. You have to make your todoMVC project, a pretty much perfect copy of the examples given in the links above, but using your framework.\ +Be aware that every thing that we can't visually see has to be present too (ids, classes, etc.). + This project will help you learn about: - Web Development diff --git a/subjects/mini-framework/audit/README.md b/subjects/mini-framework/audit/README.md index cf80ce5b..c5b403ef 100644 --- a/subjects/mini-framework/audit/README.md +++ b/subjects/mini-framework/audit/README.md @@ -1,32 +1,44 @@ #### Functional -###### Are all the framework API correctly documented? (If so, you will need it for the next questions) +###### Are all the framework API correctly documented? -##### First take a look at the behavior of the code presented in the [_dom/README.md_](https://public.01-edu.org/subjects/mini-framework/dom) file. Then try to replicate the behavior of the example with the corresponding template of the framework and run the app. +##### Open the todoMVC project and compare it to other [todoMVC project](http://todomvc.com/) ([example](http://todomvc.com/examples/vanillajs/)). -###### Can you create the red box and the button present in the example? +###### Does it contain every element as the other todoMVCs examples? -##### With the same example as above, open the Web Developer Tools (Ctrl+Shift+I) and go to the Inspector Tab. +##### Open the Web Developer Tools (Ctrl+Shift+I) and check for the classes, ids, etc. -###### Are the elements created as they should (the red box and the button inside the app div)? +###### Does it correctly correspond to those in the examples? -##### Still on the Inspector Tab, does all the elements have the right attributes (id, class, style)? +###### Can you add a todo element to the todo list? -###### With the same example, did the box move when you clicked the button? +###### When you add a todo element to the list, does the footer (element with class footer) appear as in other examples? -##### First take a look at the behavior of the code presented in the [_routing/README.md_](https://public.01-edu.org/subjects/mini-framework/routing) file. Then try to replicate the behavior of the example with the corresponding template of the framework and run the app. (Making the page reload is not required) +###### Can you check/uncheck a todo element on the list? -###### Were you able to switch between the two pages? +###### Can you remove a todo element off the list? -###### With the same example as above, did the URL changed when you switch between pages? +##### Add at least 2 todos and select only one of them. -##### With the same example, try to define a state by assigning a value to it in the 'Home Page' and then switch to the 'Active Page'. +###### If you click on the **Active** button, does it appear only the unchecked todos? -###### If you check the state, does it kept the value assigned to it? +###### And if you click on the **Completed** button, does it appear only the checked todos? + +###### Does it appear a **Clear Completed** button todos? + +###### When clicking on the clear completed button, does it remove only the checked todos? + +###### When clicking on the **Active** and **Completed** buttons, does the URL change? + +##### Add 3 todos to the list and check each one, keeping an eye on the counter of todos left to do. + +###### Does the counter change accordingly to your actions? + +###### If you double click a todo element on the list can you edit that element? #### Bonus -###### +Is the performance similar both in the framework code and the examples above? +###### +Is the performance similar both in the student todoMVC and other examples? ###### +Is it easier to handle the DOM using the framework than it is to use plain HTML and JS? From 13eccf5ea58c9e5a3692e9e06062b174d13a86ec Mon Sep 17 00:00:00 2001 From: OGordoo Date: Thu, 20 Aug 2020 09:46:08 +0100 Subject: [PATCH 7/7] documentation topic, erase examples --- subjects/mini-framework/README.md | 23 ++++++++- subjects/mini-framework/audit/README.md | 10 +++- subjects/mini-framework/dom/README.md | 36 ------------- subjects/mini-framework/routing/README.md | 62 ----------------------- 4 files changed, 30 insertions(+), 101 deletions(-) delete mode 100644 subjects/mini-framework/dom/README.md delete mode 100644 subjects/mini-framework/routing/README.md diff --git a/subjects/mini-framework/README.md b/subjects/mini-framework/README.md index 19855cdc..6b028b20 100644 --- a/subjects/mini-framework/README.md +++ b/subjects/mini-framework/README.md @@ -17,10 +17,24 @@ You will also need to make a [todoMVC](http://todomvc.com/) project using your f ### Instructions -You must create documentation for your framework, so that users (auditers) are able to understand and know how to use your framework without experiencing any awkwardness. By documentation we mean, the explaining of how does the framework works and how to work with it, for example: how to create a div, how to add an event to a button, etc. +You must create documentation for your framework, so that users (auditers) are able to understand and know how to use your framework without experiencing any awkwardness. Your framework will be tested by using it, like you previously have used one, in the social network project. So the user has to be presented to a folder structure that allows him to run the app from the root of that folder structure. The user testing your framework will have to implement some simple code in order to test the features described bellow. +#### Documentation + +By documentation we mean, the explaining of how does the framework works and how to work with it, for example: how to create a div, how to add an event to a button, etc. A new user of your framework, after reading the documentation has to be able to use it without too much guessing work. + +So for this you will have to create a [markdown](https://www.markdownguide.org/getting-started/) file, in which will have to contain: + +- Explanation on the features of your framework +- Code examples and explanations on how to: + - create an element + - create an event + - nest elements + - add attributes to an element +- Explanation on why things work the way they work + #### Abstracting the DOM You will have to implement a way to handle the DOM. The DOM can be seen as a big object, like in the example below: @@ -81,7 +95,7 @@ You have to take into account the events, children and attributes of each elemen #### Routing System -Routing is the process of selecting a path for traffic in a network. And, as you may have already realized, routing in JS can sometimes be a little bit confusing, so what you will need to do, is to implement a new routing system that is more intuitive and simpler. +Routing in this case refers to the synchronization of the state of the app with the url. In other words you will have to develop a simple way to change the url through actions of the user that will also change the state (explained in the next topic). --- @@ -106,7 +120,12 @@ Be aware that every thing that we can't visually see has to be present too (ids, This project will help you learn about: - Web Development + - JS + - HTML + - CSS - Frameworks +- Documentation - DOM - Routing - State of an Application +- Event Handling diff --git a/subjects/mini-framework/audit/README.md b/subjects/mini-framework/audit/README.md index c5b403ef..2ec17bd3 100644 --- a/subjects/mini-framework/audit/README.md +++ b/subjects/mini-framework/audit/README.md @@ -1,6 +1,14 @@ #### Functional -###### Are all the framework API correctly documented? +##### Open the documentation file. + +###### Is the documentation written in a markdown file? + +###### Does the documentation contains an explanation of every feature of the framework? + +###### Does the documentation contains an explanation and code examples on how to create an element, add attributes to an element, create an event and nest elements? + +###### Does the documentation contains an explanation on how the framework works? ##### Open the todoMVC project and compare it to other [todoMVC project](http://todomvc.com/) ([example](http://todomvc.com/examples/vanillajs/)). diff --git a/subjects/mini-framework/dom/README.md b/subjects/mini-framework/dom/README.md deleted file mode 100644 index 018477a2..00000000 --- a/subjects/mini-framework/dom/README.md +++ /dev/null @@ -1,36 +0,0 @@ -## DOM example - -The example consists in a red box moving by clicking on a button. - -```html - - - - - SSS - - -
-
- -
- - - -``` diff --git a/subjects/mini-framework/routing/README.md b/subjects/mini-framework/routing/README.md deleted file mode 100644 index ce08728d..00000000 --- a/subjects/mini-framework/routing/README.md +++ /dev/null @@ -1,62 +0,0 @@ -## Routing example - -The example consists in switching between a **'Home Page'** to a **'Active Page'** by clicking on a **'Click Me'** hyperlink. - -You will need to two or three files depending if you include the script on the html files or not. All files should be in the same folder. - -index.html: - -```html - - - - - - - -

Home Page

- Click here - - - -``` - -active.html: - -```html - - - - - Active - - -

Active Page

- Click Me - - - -``` - -script.js: - -```js -const getTextFile = (file, allText = '') => { - let rawFile = new XMLHttpRequest() - rawFile.open('GET', file, false) - rawFile.onreadystatechange = () => { - if (rawFile.readyState === 4) { - if (rawFile.status === 200 || rawFile.status == 0) { - allText = rawFile.responseText - } - } - } - rawFile.send(null) - return allText -} - -document.body.innerHTML = - location.pathname === '/' - ? getTextFile('./index.html') - : getTextFile('./active.html') -```