diff --git a/src/components/Layout/layout.scss b/src/components/Layout/layout.scss
index 4d24709..a868107 100644
--- a/src/components/Layout/layout.scss
+++ b/src/components/Layout/layout.scss
@@ -37,217 +37,7 @@ body {
   padding-left: 2.8em;
   overflow: initial;
 }
-// article,
-// aside,
-// details,
-// figcaption,
-// figure,
-// footer,
-// header,
-// main,
-// menu,
-// nav,
-// section,
-// summary {
-//   display: block;
-// }
-// audio,
-// canvas,
-// progress,
-// video {
-//   display: inline-block;
-// }
-// audio:not([controls]) {
-//   display: none;
-//   height: 0;
-// }
-// progress {
-//   vertical-align: baseline;
-// }
-// [hidden],
-// template {
-//   display: none;
-// }
-// a {
-//   background-color: transparent;
-//   -webkit-text-decoration-skip: objects;
-// }
-// a:active,
-// a:hover {
-//   outline-width: 0;
-// }
-// abbr[title] {
-//   border-bottom: none;
-//   text-decoration: underline;
-//   text-decoration: underline dotted;
-// }
-// b,
-// strong {
-//   font-weight: inherit;
-//   font-weight: bolder;
-// }
-// dfn {
-//   font-style: italic;
-// }
-// h1 {
-//   font-size: 2em;
-//   margin: 0.67em 0;
-// }
-// mark {
-//   background-color: #ff0;
-//   color: #000;
-// }
-// small {
-//   font-size: 80%;
-// }
-// sub,
-// sup {
-//   font-size: 75%;
-//   line-height: 0;
-//   position: relative;
-//   vertical-align: baseline;
-// }
-// sub {
-//   bottom: -0.25em;
-// }
-// sup {
-//   top: -0.5em;
-// }
-// img {
-//   border-style: none;
-// }
-// svg:not(:root) {
-//   overflow: hidden;
-// }
-// code,
-// kbd,
-// samp {
-//   font-family: monospace, monospace;
-//   font-size: 1em;
-// }
-// figure {
-//   margin: 1em 40px;
-// }
-// hr {
-//   box-sizing: content-box;
-//   height: 0;
-//   overflow: visible;
-// }
-// button,
-// input,
-// optgroup,
-// select,
-// textarea {
-//   font: inherit;
-//   margin: 0;
-// }
-// optgroup {
-//   font-weight: 700;
-// }
-// button,
-// input {
-//   overflow: visible;
-// }
-// button,
-// select {
-//   text-transform: none;
-// }
-// [type="reset"],
-// [type="submit"],
-// button,
-// html [type="button"] {
-//   -webkit-appearance: button;
-// }
-// [type="button"]::-moz-focus-inner,
-// [type="reset"]::-moz-focus-inner,
-// [type="submit"]::-moz-focus-inner,
-// button::-moz-focus-inner {
-//   border-style: none;
-//   padding: 0;
-// }
-// [type="button"]:-moz-focusring,
-// [type="reset"]:-moz-focusring,
-// [type="submit"]:-moz-focusring,
-// button:-moz-focusring {
-//   outline: 1px dotted ButtonText;
-// }
-// fieldset {
-//   border: 1px solid silver;
-//   margin: 0 2px;
-//   padding: 0.35em 0.625em 0.75em;
-// }
-// legend {
-//   box-sizing: border-box;
-//   color: inherit;
-//   display: table;
-//   max-width: 100%;
-//   padding: 0;
-//   white-space: normal;
-// }
-// textarea {
-//   overflow: auto;
-// }
-// [type="checkbox"],
-// [type="radio"] {
-//   box-sizing: border-box;
-//   padding: 0;
-// }
-// [type="number"]::-webkit-inner-spin-button,
-// [type="number"]::-webkit-outer-spin-button {
-//   height: auto;
-// }
-// [type="search"] {
-//   -webkit-appearance: textfield;
-//   outline-offset: -2px;
-// }
-// [type="search"]::-webkit-search-cancel-button,
-// [type="search"]::-webkit-search-decoration {
-//   -webkit-appearance: none;
-// }
-// ::-webkit-input-placeholder {
-//   color: inherit;
-//   opacity: 0.54;
-// }
-// ::-webkit-file-upload-button {
-//   -webkit-appearance: button;
-//   font: inherit;
-// }
-// html {
-//   font: 112.5%/1.45em georgia, serif;
-//   box-sizing: border-box;
-//   overflow-y: scroll;
-// }
-// * {
-//   box-sizing: inherit;
-// }
-// *:before {
-//   box-sizing: inherit;
-// }
-// *:after {
-//   box-sizing: inherit;
-// }
-// body {
-//   color: hsla(0, 0%, 0%, 0.8);
-//   font-family: georgia, serif;
-//   font-weight: normal;
-//   word-wrap: break-word;
-//   font-kerning: normal;
-//   -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-//   -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-//   -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-//   font-feature-settings: "kern", "liga", "clig", "calt";
-// }
-// img {
-//   max-width: 100%;
-//   margin-left: 0;
-//   margin-right: 0;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: 1.45rem;
-// }
+
 h1 {
   margin-left: 0;
   margin-right: 0;
@@ -350,261 +140,3 @@ h6 {
   font-size: 0.78405rem;
   line-height: 1.1;
 }
-// hgroup {
-//   margin-left: 0;
-//   margin-right: 0;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: 1.45rem;
-// }
-// ul {
-//   margin-left: 1.45rem;
-//   margin-right: 0;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: 1.45rem;
-//   list-style-position: outside;
-//   list-style-image: none;
-// }
-// ol {
-//   margin-left: 1.45rem;
-//   margin-right: 0;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: 1.45rem;
-//   list-style-position: outside;
-//   list-style-image: none;
-// }
-// dl {
-//   margin-left: 0;
-//   margin-right: 0;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: 1.45rem;
-// }
-// dd {
-//   margin-left: 0;
-//   margin-right: 0;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: 1.45rem;
-// }
-// p {
-//   margin-left: 0;
-//   margin-right: 0;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: 1.45rem;
-// }
-// figure {
-//   margin-left: 0;
-//   margin-right: 0;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: 1.45rem;
-// }
-// table {
-//   margin-left: 0;
-//   margin-right: 0;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: 1.45rem;
-//   font-size: 1rem;
-//   line-height: 1.45rem;
-//   border-collapse: collapse;
-//   width: 100%;
-// }
-// fieldset {
-//   margin-left: 0;
-//   margin-right: 0;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: 1.45rem;
-// }
-// blockquote {
-//   margin-left: 1.45rem;
-//   margin-right: 1.45rem;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: 1.45rem;
-// }
-// form {
-//   margin-left: 0;
-//   margin-right: 0;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: 1.45rem;
-// }
-// noscript {
-//   margin-left: 0;
-//   margin-right: 0;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: 1.45rem;
-// }
-// iframe {
-//   margin-left: 0;
-//   margin-right: 0;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: 1.45rem;
-// }
-// hr {
-//   margin-left: 0;
-//   margin-right: 0;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: calc(1.45rem - 1px);
-//   background: hsla(0, 0%, 0%, 0.2);
-//   border: none;
-//   height: 1px;
-// }
-// address {
-//   margin-left: 0;
-//   margin-right: 0;
-//   margin-top: 0;
-//   padding-bottom: 0;
-//   padding-left: 0;
-//   padding-right: 0;
-//   padding-top: 0;
-//   margin-bottom: 1.45rem;
-// }
-// b {
-//   font-weight: bold;
-// }
-// strong {
-//   font-weight: bold;
-// }
-// dt {
-//   font-weight: bold;
-// }
-// th {
-//   font-weight: bold;
-// }
-// li {
-//   margin-bottom: calc(1.45rem / 2);
-// }
-// ol li {
-//   padding-left: 0;
-// }
-// ul li {
-//   padding-left: 0;
-// }
-// li > ol {
-//   margin-left: 1.45rem;
-//   margin-bottom: calc(1.45rem / 2);
-//   margin-top: calc(1.45rem / 2);
-// }
-// li > ul {
-//   margin-left: 1.45rem;
-//   margin-bottom: calc(1.45rem / 2);
-//   margin-top: calc(1.45rem / 2);
-// }
-// blockquote *:last-child {
-//   margin-bottom: 0;
-// }
-// li *:last-child {
-//   margin-bottom: 0;
-// }
-// p *:last-child {
-//   margin-bottom: 0;
-// }
-// li > p {
-//   margin-bottom: calc(1.45rem / 2);
-// }
-// code {
-//   font-size: 0.85rem;
-//   line-height: 1.45rem;
-// }
-// kbd {
-//   font-size: 0.85rem;
-//   line-height: 1.45rem;
-// }
-// samp {
-//   font-size: 0.85rem;
-//   line-height: 1.45rem;
-// }
-// abbr {
-//   border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-//   cursor: help;
-// }
-// acronym {
-//   border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-//   cursor: help;
-// }
-// abbr[title] {
-//   border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-//   cursor: help;
-//   text-decoration: none;
-// }
-// thead {
-//   text-align: left;
-// }
-// td,
-// th {
-//   text-align: left;
-//   border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
-//   font-feature-settings: "tnum";
-//   -moz-font-feature-settings: "tnum";
-//   -ms-font-feature-settings: "tnum";
-//   -webkit-font-feature-settings: "tnum";
-//   padding-left: 0.96667rem;
-//   padding-right: 0.96667rem;
-//   padding-top: 0.725rem;
-//   padding-bottom: calc(0.725rem - 1px);
-// }
-// th:first-child,
-// td:first-child {
-//   padding-left: 0;
-// }
-// th:last-child,
-// td:last-child {
-//   padding-right: 0;
-// }
-// @media only screen and (max-width: 480px) {
-//   html {
-//     font-size: 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 {<pending>}
+```
+
+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