Frontendmasters

README.md

@@ -5,3 +5,115 @@ Base repository for the [promises-applied](https://github.com/GuildCrafts/web-de
 ## Description
 
 Complete the exercises in the folder `promise-it-wont-hurt-solutions` & `pg-promise-exercises`. Look at the `README.md` file in each folder for instructions.
+
+# Promises Applied
+
+## Challenge Rating
+
+This goal will likely be within your ZPD if you...
+
+- Are familiar with SQL (the core-sql [goal](https://github.com/GuildCrafts/web-development-js/issues/178) is highly recommended)
+- Are familiar with object oriented programming in JavaScript
+- Are interested in learning about JavaScript Promises
+- Are interested in creating functions which use Promises
+- Are interested in learning how to use the `pg-promise` library
+
+## Description
+
+A theoritical and practical approach to understanding JavaScript Promises.
+
+This goal makes heavy use of external resources: the [Promises Course][promises-course] course on [Udacity](https://www.udacity.com/).
+
+For the first two days you will be working on existing courses and completing tutorials. Then you'll use your skills to complete a set of exercises, and submit your solutions as your artifacts.
+
+Fork the repo [promises-exercises][promises-exercises] which contains the exercises you need to complete, and make it your artifact.
+
+
+## Context
+
+JavaScript is an asynchronous programming language, and if you want want to avoid [callback hell](http://callbackhell.com/) you will have to learn to use Promises.
+
+Promises provide a simpler alternative for executing, composing, and managing asynchronous operations when compared to traditional callback-based approaches. They also allow you to handle asynchronous errors using approaches that are similar to synchronous `try/catch`.
+
+## Specifications
+
+Start by forking the [promises-exercises][promises-exercises] repo. Save your work to this repo.
+
+### Day 1 & 2
+
+Complete these sections (including the exercises) of the [Rethinking Asynchronous JavaScript][fem-async-js] on Frontend Masters:
+- Parallel vs. Async
+- Callback
+- Thunks
+- Promises
+
+Complete the [Understanding Promises in JavaScript][treehouse-workshop-promises] workshop (22m).
+
+Read [this](https://coligo.io/javascript-promises-plain-simple/) blog post and [this](https://scotch.io/tutorials/understanding-javascript-promises-pt-i-background-basics) blog post.
+
+Make sure to save the exercises from the Frontend Masters course:
+
+- [x] Callback exercise 1 is completed and saved to a file in your repo.
+- [x] Thunks exercise 2 is completed and saved to a file in your repo.
+- [x] Promises exercises 3-6 are completed and saved to a file in your repo.
+
+If you complete the above with time to spare, fill any gaps in your understanding by skimming through the [Promises Course][promises-course] on Udacity.
+
+### Day 3 & 4
+
+Complete exercises 1-13 in the [promise-it-wont-hurt-solutions][promise-it-wont-hurt-solutions].
+
+- [x] `src/01-warmup.js` is complete and written to the appropriate file.
+- [x] `src/02-fullfill-a-promise.js` is complete and written to the appropriate file.
+- [x] `src/03-reject-a-promise.js` is complete and written to the appropriate file.
+- [x] `src/04-to-reject-or-not-to-reject.js` is complete and written to the appropriate file.
+- [x] `src/05-always-asynchronous.js` is complete and written to the appropriate file.
+- [x] `src/06-shortcuts.js` is complete and written to the appropriate file.
+- [x] `src/07-promise-after-promise.js` is complete and written to the appropriate file.
+- [x] `src/08-values-and-promises.js` is complete and written to the appropriate file.
+- [x] `src/09-throw-an-error.js` is complete and written to the appropriate file. _\*see note below_
+- [x] `src/10-an-important-file.js` is complete and written to the appropriate file. _\*see note below_
+- [x] `src/11-multiple-promises.js` is complete and written to the appropriate file.
+- [x] `src/12-fetch-json.js` is complete and written to the appropriate file.
+- [x] `src/13-do-some-work.js` is complete and written to the appropriate file.
+
+\*Note: `promise-it-wont-hurt` has a bug which checks the full path of the files, instead of the relative paths. This causes exercise 9 & 10's verify command to fail even though the solution is correct. If the file path is the only error that you are seeing, it means that your code is correct.
+
+### Day 5
+
+Look at the [documentation](https://github.com/vitaly-t/pg-promise/wiki/Learn-by-Example) of the `pg-promise` repository.
+
+Complete exercises 1-7 in the [pg promise exercises][pg-promise-exercises].
+
+- [ ] Exercise 1 is complete.
+- [ ] Exercise 2 is complete.
+- [ ] Exercise 3 is complete.
+- [ ] Exercise 4 is complete.
+- [ ] Exercise 5 is complete.
+- [ ] Exercise 6 is complete.
+- [ ] Exercise 7 is complete.
+
+### General
+- [ ] All package dependencies are properly declared in `package.json`.
+- [ ] All major features are added via pull requests with a clear description and concise commit messages.
+- [ ] Code uses a linter and there are no linting errors.
+- [ ] Variables, functions, files, etc. have appropriate and meaningful names.
+- [ ] Functions are small and serve a single purpose.
+
+### Stretch
+- [ ] Read Google's [Introduction](https://developers.google.com/web/fundamentals/getting-started/primers/promises) to Promises
+
+## Resources
+- https://developers.google.com/web/fundamentals/getting-started/primers/promises
+- https://coligo.io/javascript-promises-plain-simple/
+- https://scotch.io/tutorials/javascript-promises-for-dummies
+- https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html
+- https://blog.domenic.me/youre-missing-the-point-of-promises/
+- https://github.com/vitaly-t/pg-promise/wiki/Learn-by-Example
+
+[promise-it-wont-hurt-solutions]: https://github.com/GuildCrafts/promises-exercises/tree/master/promise-it-wont-hurt-solutions
+[promises-course]: https://www.udacity.com/course/javascript-promises--ud898
+[pg-promise-exercises]: https://github.com/GuildCrafts/promises-exercises/tree/master/pg-promise-exercises
+[promises-exercises]: https://github.com/GuildCrafts/promises-exercises
+[treehouse-workshop-promises]: https://teamtreehouse.com/library/understanding-promises-in-javascript
+[fem-async-js]: https://frontendmasters.com/courses/rethinking-async-js/

frontend-masters-exercises/exercises/ex1/README.md

@@ -0,0 +1,9 @@
+# Instructions
+
+1. This exercise calls for you to write some async flow-control code. To start off with, you'll use callbacks only.
+
+2. Expected behavior:
+	- Request all 3 files at the same time (in "parallel").
+	- Render them ASAP (don't just blindly wait for all to finish loading)
+	- BUT, render them in proper (obvious) order: "file1", "file2", "file3".
+	- After all 3 are done, output "Complete!".

frontend-masters-exercises/exercises/ex1/ex1-fixed.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Exercise 1 - Fixed</title>
+</head>
+<body>
+<h1>Exercise 1 - Fixed</h1>
+
+<script src="ex1-fixed.js"></script>
+
+</body>
+</html>

frontend-masters-exercises/exercises/ex1/ex1-fixed.js

@@ -0,0 +1,63 @@
+function fakeAjax(url,cb) {
+	var fake_responses = {
+		"file1": "The first text",
+		"file2": "The middle text",
+		"file3": "The last text"
+	};
+	var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000;
+
+	console.log("Requesting: " + url);
+
+	setTimeout(function(){
+		cb(fake_responses[url]);
+	},randomDelay);
+}
+
+function output(text) {
+	console.log(text);
+}
+
+// **************************************
+// The old-n-busted callback way
+
+function getFile(file) {
+	fakeAjax(file,function(text){
+		fileReceived(file,text);
+	});
+}
+
+function fileReceived(file,text) {
+	// haven't received this text yet?
+	if (!responses[file]) {
+		responses[file] = text;
+	}
+
+	var files = ["file1","file2","file3"];
+
+	// loop through responses in order for rendering
+	for (var i=0; i<files.length; i++) {
+		// response received?
+		if (files[i] in responses) {
+			// response needs to be rendered?
+			if (responses[files[i]] !== true) {
+				output(responses[files[i]]);
+				responses[files[i]] = true;
+			}
+		}
+		// can't render yet
+		else {
+			// not complete!
+			return false;
+		}
+	}
+
+	output("Complete!");
+}
+
+// hold responses in whatever order they come back
+var responses = {};
+
+// request all files at once in "parallel"
+getFile("file1");
+getFile("file2");
+getFile("file3");

frontend-masters-exercises/exercises/ex1/ex1.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Exercise 1</title>
+</head>
+<body>
+<h1>Exercise 1</h1>
+
+<script src="ex1.js"></script>
+
+</body>
+</html>

frontend-masters-exercises/exercises/ex1/ex1.js

@@ -0,0 +1,82 @@
+function fakeAjax(url,cb) {
+	var fake_responses = {
+		"file1": "The first text",
+		"file2": "The middle text",
+		"file3": "The last text"
+	};
+
+	var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000;
+
+	console.log("Requesting: " + url);
+
+	setTimeout(function(){
+		cb(fake_responses[url]);
+	},randomDelay);
+}
+
+function output(text) {
+	console.log(text);
+}
+
+// **************************************
+// The old-n-busted callback way
+let first = null
+let secondStatus = 0
+let second = null
+letthirdStatus = 0
+let third = null
+
+function getFile(file) {
+	fakeAjax(file,function(text){
+		// what do we do here?
+  if(file === "file1") {
+    first = "done"
+    output(text)
+    if(secondStatus === 1) {
+      output(second)
+      second = "done"
+    }
+    if(second === "done" && thirdStatus === 1) {
+      output(third)
+      third = "done"
+    }
+  }
+
+  if(first !== "done" && file === "file2") {
+    secondStatus = 1
+    second = text
+  }
+
+  if(first === "done" && file === "file2") {
+    second = "done"
+    output(text)
+    if(thirdStatus === 1) {
+      output(third)
+      third = "done"
+    }
+  }
+
+  if(second !== "done" && file === "file3") {
+    thirdStatus = 1
+    third = text
+  }
+
+  if(second === "done" && file === "file3" ) {
+    third = "done"
+    output(text)
+  }
+
+  if(first === "done" && second === "done" && third === "done") {
+    console.log("Complete!")
+  }
+
+	});
+}
+
+// request all files at once in "parallel"
+console.log("FILE 1")
+getFile("file1");
+console.log("FILE 2")
+getFile("file2");
+console.log("FILE 3")
+getFile("file3");

frontend-masters-exercises/exercises/ex10/README.md

@@ -0,0 +1,13 @@
+# Instructions
+
+1. In this exercise, we're going to practice what we've learned about various async patterns so far, using the challenging "A Tale Of Three Lists" demos.
+
+2. Study the similarities/differences of the `ui.js` and `feeds.js` files on the repo (https://github.com/getify/a-tale-of-three-lists#compared-patterns), between these versions: "Plain Callbacks", "Thunks", "Promises", and "Promises+Generators".
+
+   Then look at the version of the `ui.js` and `feeds.js` files as included in this exercise, which correspond to the "asynquence Flavored" demo version on the repo.
+
+3. Pick either reactive sequences or CSP -- whichever you feel most comfortable with or want most practice with -- and modify the `ui.js` and `feeds.js` files to use the appropriate concepts. For reactive sequences, you'll be creating sequences for each type of event and subscribing to them. For CSP, you'll be creating channels for the same.
+
+   If you have time and want a real challenge, try both versions!
+
+4. Compare your approach to the "Reactive Sequences" and/or "CSP" demo versions on the repo (https://github.com/getify/a-tale-of-three-lists#compared-patterns).