diff --git a/package-lock.json b/package-lock.json index 4c5c51c..fff5c21 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6295,8 +6295,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -6314,13 +6313,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6333,18 +6330,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -6447,8 +6441,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -6458,7 +6451,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6471,20 +6463,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.3.5", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6501,7 +6490,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -6574,8 +6562,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -6585,7 +6572,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -6661,8 +6647,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -6692,7 +6677,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6710,7 +6694,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6749,13 +6732,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.3", - "bundled": true, - "optional": true + "bundled": true } } }, @@ -8755,14 +8736,12 @@ "ansi-regex": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", - "optional": true + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==" }, "is-fullwidth-code-point": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "optional": true + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=" }, "slice-ansi": { "version": "1.0.0", @@ -8788,7 +8767,6 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", - "optional": true, "requires": { "ansi-regex": "^4.1.0" } @@ -9886,8 +9864,7 @@ "ansi-regex": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", - "optional": true + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==" }, "is-fullwidth-code-point": { "version": "2.0.0", @@ -9910,7 +9887,6 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", - "optional": true, "requires": { "ansi-regex": "^4.1.0" } diff --git a/src/components/Layout/layout.scss b/src/components/Layout/layout.scss index 66c8b56..0536a75 100644 --- a/src/components/Layout/layout.scss +++ b/src/components/Layout/layout.scss @@ -1,7 +1,7 @@ // TODO: refactor this into styled components html { - font-family: 'Lato'; + font-family: 'Lato', sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } diff --git a/src/content/docs/javascript/promises/intro.md b/src/content/docs/javascript/promises/intro.md new file mode 100644 index 0000000..97023e0 --- /dev/null +++ b/src/content/docs/javascript/promises/intro.md @@ -0,0 +1,105 @@ +--- +authors: + - "@Xetera" +created_at: 2019/07/26 +updated_at: 2019/07/26 +recommended_reading: + - javascript/callbacks + - javascript/es6/arrow-functions +--- +# A Promise to Keep + +A `Promise` in Javascript represents an action that has already started, but one that will be +completed at a later time. Much like in real life, when you create a promise, you are expected +to fulfill that promise. However, sometimes things go wrong where you can no longer fulfill +a promise you made. This is essentially the main idea behind how promises work in javascript. + +## Basics + +When you create a Promise or call a function that returns a Promise in Javascript, you're left +with an object that can either resolve into the actual value that you were promised, or it +can reject and leave you with an error for why that promise failed. + +We can access these values using the `.then` and `.catch` methods on the `Promise` object respectively. + +## A Simple Example + +First, let's explore a bit of a made-up example. Imagine we have a promise-returning function +called `getMembers` that retrieves all the members in a discord server. When we execute this +function we see the following result. + +```js +const members = getMembers("The Programmers Hangout"); +console.log(members); // Promise {} +``` + +Normally, we would have expected to see an array of all the members but it takes time to +get all the information about members so we're instead returned a Promise of members, rather +than the members themselves. + +In order to access this information, we'll have to call the `.then` method on our `members` object +to access the actual members like so. + +```js +getMembers("The Programmers Hangout").then(members => { + console.log(members); // (32k) [{...}, {...}, {...}] +}); +``` + +This way we are able to make sure that we only try to `console.log` when the `getMembers` function has resolved and ready to be used. + +## Beginner Mistakes + +Promises are possibly the #1 most common source of confusion for beginners. In order +to avoid falling in pitfalls yourself, you have to remember 2 things about Javascript when +working with promises. + +1. Javascript does not wait. +2. No seriously, Javascript won't wait for your promises! + +You may have tried doing something like this before. + +```js +// Incorrect code, don't copy! +let results; +getWeather("Los Angeles").then(weather => { + results = weather; +}); +console.log(results) // undefined +``` + +Why is `results` undefined? Because **Javascript doesn't wait**. Whenever a Promise is created, +your code will continue to run until there's no more code left in the stack. Only then +will javascript try to run the `.then` callback of a Promise. Even if your Promise resolves +immediately you are going to have to wait until you've run all the code in the stack before +your `.then` callback has a chance to start running. This is due to the way the event loop works, +you can watch [this amazing talk](https://youtu.be/8aGhZQkoFbQ) on it to learn more. + +In order to fix this problem we need to move the `console.log` inside the `.then` callback like so: + +```js +getWeather("Los Angeles").then(weather => { + console.log(weather); // Sunny, probably +}); +``` + +## Real World Example + +Here is a real function that gets character information from the Rick and Morty API. +You can try it in your browser if you want to test it out. + +```js +function getCharacters() { + return fetch(`https://rickandmortyapi.com/api/character`) + .then(response => response.json()) + .then(response => response.results); +} + +getCharacters().then(characters => { + console.log(characters); // (20) [{...}, {...}, {...}] +}); +``` + +Let's break down what's happening in this function + +// TODO: finish this \ No newline at end of file