Replace CodePen embeds with pen links

src/posts/CSS Highlight on Hover Animation/CSS Highlight on Hover Animation.mdx

@@ -15,6 +15,6 @@ I saw this great little highlight hover animation on Web Designer Depot the othe
 
 Check the video for a quick explanation on how it works. Enjoy!
 
-[codepen_embed height="268" theme_id="5332" slug_hash="yepexZ" default_tab="result" user="wesbos"]See the Pen <a href='http://codepen.io/wesbos/pen/yepexZ/'>yepexZ</a> by Wes Bos (<a href='http://codepen.io/wesbos'>@wesbos</a>) on <a href='http://codepen.io'>CodePen</a>.[/codepen_embed]
+http://codepen.io/wesbos/pen/yepexZ
 
-https://www.youtube.com/watch?v=qii-5ZpLLYY
+https://www.youtube.com/watch?v=qii-5ZpLLYY

src/posts/CSS object-fit is background-size - cover for video/CSS object-fit is background-size - cover for video.mdx

@@ -10,9 +10,7 @@ id: 3484
 
 Have you ever wished you could use `background-size:cover; on regular elements? Well, it turns out you can with a CSS property called object-fit` - and with the recent release of FireFox 36, we can start to use it in our designs as we have <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#Browser_compatibility">really good browser support</a> for it.
 
-See the Pen <a href='http://codepen.io/wesbos/pen/YPmyxy/'>Object Fit for Videos</a> by Wes Bos (<a href='http://codepen.io/wesbos'>@wesbos</a>) on <a href='http://codepen.io'>CodePen</a>.
-
-<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
+http://codepen.io/wesbos/pen/YPmyxy
 
 It's a popular design trend to have videos and images span the entire width and height of an element. Problems arise when it comes to the media's ratio - they never quite fit perfectly width and height wise - especially with dynamic content and responsive viewports.
 
@@ -22,4 +20,4 @@ How does it work? It's pretty easy - first you start with a container that has a
 
 We can also use `object-fit:contain;, which is the same as background-size:cover;, it won't crop the video but rather show ensure the entire video is always visible. There are a few more values <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit">available</a>, but these are the most likely use cases when trying to replicate background-size:cover;` with a video.
 
-Check out the demo - <a href="http://codepen.io/wesbos/full/YPmyxy/">http://codepen.io/wesbos/full/YPmyxy/</a> or view the code below. Enjoy!
+Check out the demo - <a href="http://codepen.io/wesbos/full/YPmyxy/">http://codepen.io/wesbos/full/YPmyxy/</a> or view the code below. Enjoy!

src/posts/JavaScript Arrow Functions and this scoping/JavaScript Arrow Functions and this scoping.mdx

@@ -13,7 +13,7 @@ We've learned about the concise syntax of arrow functions. We've learned about t
 
 What does that mean? Let's show an example as to when you might run into this. This is a pretty visual one so you might be better off watching the corresponding <a href="https://ES6.io">ES6.io</a> video. We will be creating this:
 
-[codepen_embed height="400" theme_id="dark" slug_hash="KgpNjJ" default_tab="css,result" user="wesbos" data-editable="true"]See the Pen <a href='http://codepen.io/wesbos/pen/KgpNjJ/'>Arrow Functions and `this`. — ES6.io</a> by Wes Bos (<a href='http://codepen.io/wesbos'>@wesbos</a>) on <a href='http://codepen.io'>CodePen</a>.[/codepen_embed]
+http://codepen.io/wesbos/pen/KgpNjJ
 
 What I have here is I've got this `div with the class of box` right here.
 
@@ -83,7 +83,7 @@ Here we are going to type a regular function, and include a `console.log` so we
 ```js
 const box = document.querySelector('.box');
 box.addEventListener('click', function() {
-    console.log(this);    
+    console.log(this);
 });
 
 ```
@@ -96,7 +96,7 @@ That's good. But, if you swap this out with an arrow function here, watch what h
 ```js
 const box = document.querySelector('.box');
 box.addEventListener('click', () => {
-    console.log(this);    
+    console.log(this);
 });
 
 ```
@@ -117,7 +117,7 @@ We can't use an arrow function there. I'm going to bring that back to regular fu
 ```js
 const box = document.querySelector('.box');
 box.addEventListener('click', function() {
-    console.log(this);    
+    console.log(this);
 });
 
 ```
@@ -128,7 +128,7 @@ That's what we want. You generally want these functions for your top level ones.
 ```js
 const box = document.querySelector('.box');
 box.addEventListener('click', function() {
-    this.classList.toggle('opening');    
+    this.classList.toggle('opening');
 });
 
 ```
@@ -145,7 +145,7 @@ const box = document.querySelector('.box');
 box.addEventListener('click', function() {
     this.classList.toggle('opening');
     setTimeout(function() {
-       this.classList.toggle('open'); 
+       this.classList.toggle('open');
     });
 });
 
@@ -164,7 +164,7 @@ box.addEventListener('click', function() {
     this.classList.toggle('opening');
     setTimeout(function() {
        console.log(this.classList);
-       this.classList.toggle('open'); 
+       this.classList.toggle('open');
     });
 });
 
@@ -181,7 +181,7 @@ box.addEventListener('click', function() {
     this.classList.toggle('opening');
     setTimeout(function() {
        console.log(this);
-       this.classList.toggle('open'); 
+       this.classList.toggle('open');
     });
 });
 
@@ -203,7 +203,7 @@ box.addEventListener('click', function() {
     this.classList.toggle('opening');
     setTimeout(function() {
        console.log(this);
-       self.classList.toggle('open'); 
+       self.classList.toggle('open');
     });
 });
 
@@ -220,7 +220,7 @@ box.addEventListener('click', function() {
     this.classList.toggle('opening');
     setTimeout(() => {
        console.log(this);
-       this.classList.toggle('open'); 
+       this.classList.toggle('open');
     });
 });
 
@@ -237,7 +237,7 @@ box.addEventListener('click', function() {
     this.classList.toggle('opening');
     setTimeout(() => {
        console.log(this);
-       this.classList.toggle('open'); 
+       this.classList.toggle('open');
     }, 500);
 });
 
@@ -262,7 +262,7 @@ box.addEventListener('click', function() {
     this.classList.toggle(first);
     setTimeout(() => {
        console.log(this);
-       this.classList.toggle(second); 
+       this.classList.toggle(second);
     }, 500);
 });
 
@@ -285,7 +285,7 @@ box.addEventListener('click', function() {
     this.classList.toggle(first);
     setTimeout(() => {
        console.log(this);
-       this.classList.toggle(second); 
+       this.classList.toggle(second);
     }, 500);
 });
 
@@ -295,4 +295,4 @@ Because we've switched the variables, we should be able to get this to animate i
 
 Check this out. Click it open, click it closed, and you have a fun little animation that we've made there.
 
-The big takeaway here is that we can use an arrow function for things inside of a normal function and it's going to inherit the value of `this`.
+The big takeaway here is that we can use an arrow function for things inside of a normal function and it's going to inherit the value of `this`.