James Quick

Let's build a memory match game with HTML, CSS, and JavaScript

<div><p>In this tutorial, we’re going to build a PokeMatch game with vanilla HTML, CSS, and JavaScript. The Pokemon API is free and fun to work with, so let’s get started.</p><blockquote>This is an abridged version of the tutorial. <a href="https://youtu.be/Z2O3QxpcdSk">Watch the full tutorial on YouTube</a>. You can find the full source code <a href="https://github.com/jamesqquick/javascript-memory-match">here</a>.</blockquote><h2>Set Up</h2><p>Open a blank folder in your favorite text editor (VSCode for me). Then, create three files.</p><ul><li>index.html</li><li>app.js</li><li>app.css</li></ul><p>In the HTML file, stub out a basic template with a few elements.</p><ul><li>references to both <code>app.css</code> and <code>app.js</code></li><li><code>div</code> with a class of <code>container</code> to wrap everything</li><li>a <code>header</code> for the title and a reset button that calls a <code>resetGame</code> function</li><li>an empty <code>div</code> with an id of <code>game</code></li></ul><pre><code lang="html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
    &lt;title&gt;Pokemon Memory Match Game&lt;/title&gt;
    &lt;link rel="stylesheet" href="app.css" /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container"&gt;

        &lt;header&gt;
            &lt;h1&gt;PokeMatch&lt;/h1&gt;
            &lt;button onclick="resetGame()"&gt;Reset&lt;/button&gt;
        &lt;/header&gt;
        &lt;div id="game"&gt;    
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
        </code></pre><blockquote>**TIP** You can use the ‘<code>live server</code>’ extension in VS Code to get a live reloading server running. By default it runs on  port 5501.</blockquote><p>This is all the markup we’ll need for now. We’ll dynamically generate the board in JavaScript.</p><h2>Getting your Pokemon</h2><p>In the <code>app.js</code> file, we’ll need to work with the <a href="https://pokeapi.co/">Pokemon API </a>to get information on 8 different Pokemon for each iteration of the game. We’ll use this Pokemon API endpoint: </p><pre><code lang="sh">https://pokeapi.co/api/v2/pokemon/{id}</code></pre><p><br>We'll need 3 key properties about each pokemon. </p><ul><li>ID</li><li>sprites (images) </li><li>type</li></ul><p>First, we’re going to create a new function called <code>loadPokemon</code> which will make a <code>fetch</code> request to the API for 8 random Pokemon. This function will use <code>async/await</code> so we can go ahead and mark it as <code>async</code>.</p><p><br>We’ll start by making a request to the PokeAPI based URL and then add on the string of the Pokemon we want to fetch. For example, if we want to fetch information for Bulbasaur, we would add 1 to the end of the URL.</p><pre><code lang="javascript">const pokeAPIBaseUrl = "https://pokeapi.co/api/v2/pokemon/";

const loadPokemon = async () =&gt; {
  const res = await fetch(pokeAPIBaseUrl + '1');
  const pokemon = await res.json();
}</code></pre><p><br>Now, we need to generate an array of random Pokémon IDs, then iterate through the array to make a fetch request for each one. We can use a <code>set</code> to take care of any duplicate IDs and <code>Match.random()</code> to generate random numbers.</p><blockquote><br>A <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">set</a> is an object data structure that doesn’t allow for duplicates and has a constant lookup time.</blockquote><pre><code lang="javascript">const randomIds = new Set();
while(randomIds.size &lt; 8){
    const randomNumber = Math.ceil(Math.random() * 150);
    randomIds.add(randomNumber);
}</code></pre><p>Then, we'll take that set of random Ids and make a request to the Pokemon API for each one. For performance benefits, we are going to use <code>Promise.all()</code> which will let the different API requests happen in parallel. Here's the final <code>loadPokemon</code> function.</p><pre><code lang="javascript">const loadPokemon = async () =&gt; {
  const randomIds = new Set();
  while(randomIds.size &lt; 8){
      const randomNumber = Math.ceil(Math.random() * 150);
      randomIds.add(randomNumber);
  }
  const pokePromises = [...randomIds].map(id =&gt; fetch(pokeAPIBaseUrl + id))
  const results = await Promise.all(pokePromises);
  return await Promise.all(results.map(res =&gt; res.json()));
}
</code></pre><p>Let's create a <code>displayPokemon</code> function to display the cards. This function will:</p><ul><li>sort the pokemon in a random order using this trick - <code>pokemon.sort( _ =&gt; Math.random() - 0.5);</code></li><li>iterate through each Pokemon using <code>Array.map()</code></li><li>convert each Pokemon to an HTML template string </li><li>call <code>join</code> on the resulting array to generate one HTML string that includes all of the Pokemon cards<code></code><br></li></ul><pre><code lang="javascript">const displayPokemon = (pokemon) =&gt; {
	pokemon.sort( _ =&gt; Math.random() - 0.5);
	const pokemonHTML = pokemon.map(pokemon =&gt; {
  	return '
			&lt;div class ="card"&gt;
				&lt;h2&gt;${pokemon.name}
			&lt;/div&gt;
		'
	}).join('');
}</code></pre><p>With the HTML string generated, we now need to set it as the <code>innerHTML</code> property of the game <code>div</code>.</p><pre><code lang="javascript">const game = document.getElementById('game');
...

const displayPokemon = (pokemon) =&gt; {
	pokemon.sort( _ =&gt; Math.random() - 0.5);
	const pokemonHTML = pokemon.map(pokemon =&gt; {
  	return '
			&lt;div class ="card"&gt;
				&lt;h2&gt;${pokemon.name}
			&lt;/div&gt;
		'
	}).join('');
  game.innerHTML = pokemonHTML;

}</code></pre><p>Now, let's create a <code>resetGame</code> function that will load the Pokemon and then call <code>displayPokemon</code>. Since this is a match game, we'll need two cards for each Pokemon. For this, we can create a new array with two copies of the <code>loadedPokemon</code> using the Spread operator.</p><pre><code lang="javascript">
const resetGame = async() =&gt; {
  game.innerHTML = '';
  const loadedPokemon = await loadPokemon();
  displayPokemon([...loadedPokemon, ...loadedPokemon]);
}</code></pre><h2>Basic Styling</h2><p>Let's start to style our app with CSS. </p><p>This is optional, but for fun, I downloaded a <a href="https://www.dafont.com/pokemon.font">free Pokemon font</a>. After downloading the <code>Pokemon.TTF</code><code></code> and adding it to the root of your directory, you can use it to your CSS.</p><pre><code lang="css">@font-face {
  font-family: pokemon;
  src: url(pokemon.ttf);
}</code></pre><p>Now for the game container. Let's use <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox</a> to center the content on the screen as well as a few additional styles.</p><pre><code lang="css">.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  font-family: pokemon;
  letter-spacing: 5px;
  gap: 10px;
  max-width: 800px;
  margin: 0 auto;
}</code></pre><p>Now, for the header. We can use Flexbox again here to center the title and the reset button vertically and spread them apart. We can also make the title a bit bigger.</p><pre><code lang="css">header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

h1 {
    font-size: 54px;
}</code></pre><p></p><h2>Styling the Pokemon Cards</h2><p>First, let's style the game as grid of four by four with a bit of gap between each.</p><pre><code lang="css">#game {
  display: grid;
  grid-template-columns: repeat(4, 160px);
  grid-template-rows: repeat(4, 160px);
  grid-gap: 10px;
}</code></pre><p><br>Now, for our individual card, we’ll add a <code>box-shadow</code>, <code>border-radius</code>, and <code>position</code>.<br>We’ll also set the <code>overflow</code> to be hidden.</p><p>There's one additional property <code>transform-style</code> that we'll add. This will allow us to make the flipping animations look 3d.</p><pre><code lang="css">.card {
  box-shadow: 0 3px 10px rgba(200,200,200, 0.9);
  border-radius: 10px;
  position: relative;
  transform-style: preserve-3d;
  overflow: hidden;
}</code></pre><h2>Animating and Styling the Cards</h2><p>Let's work on the flip animation to show the front and back of each card.<br>Inside of the markup for each card, we'll add two containing divs, one for the front, and one for the back.</p><p>For the front of the card, I grabbed in image of a Pokeball to display. We'll do this in CSS. You can grab that from the <a href="https://github.com/jamesqquick/javascript-memory-match">source code</a> if you want to add it. </p><p>For the back of the card, we'll display the image of the Pokemon and their name. The back of the card will also have a class of <code>rotated</code>. We'll toggle this class to trigger the animation in JavaScript. </p><p>Lastly, we'll add two properties to the container card. </p><ul><li>an <code>onclick</code> property that calls a <code>clickCard</code> function (we'll create this shortly)</li><li>a custom data property called <code>data-pokename</code> - we'll use this to determine the name of the Pokemon that was clicked</li></ul><pre><code lang="html">&lt;div class="card" onclick="clickCard(event)" data-pokename="${pokemon.name}"&gt;
  &lt;div class="front"&gt;
  &lt;/div&gt;
  &lt;div class="back rotated"&gt;
    &lt;img src="${pokemon.sprites.front_default}" alt="${pokemon.name}"  /&gt;
    &lt;h2&gt;${pokemon.name}&lt;/h2&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre><p>Let's style the front of the card in CSS to add the background image.</p><pre><code lang="css">.front {
  background-image: url("/pokeball.png");
  background-position: center;
  background-repeat: no-repeat;
  background-color: black;
}</code></pre><p>We can also add some general styling that applies to both the front and back of the cards.</p><ul><li>Flexbox for centering the content</li><li>position of <code>absolute</code>  and a height and width set to 100% </li><li>transition to make the flip smooth</li></ul><p>One interesting property that we will set is <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility">backface-visibility</a> property to <code>hidden</code>. This will be used to make sure only the back or the front will show at a time.</p><pre><code lang="css">.card &gt; .front, .card &gt; .back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  transition: transform 0.5s;
}</code></pre><h2>Flipping the Card</h2><p>Let's now create the <code>clickCard</code> function. We'll need to know which card was clicked. We can do this by grabbing a reference to <code>e.currentTarget</code>. We can then find the name of the Pokemon from the custom data property we created.</p><pre><code lang="javascript">const clickCard = (e) =&gt; {
  const pokemonCard = e.currentTarget;
  const pokemonName = pokemonCard.dataset.pokename;
}</code></pre><p>To flip this card, we need to get the front and back elements of the card. We'll then flip these by toggling the <code>rotated</code> class. Here's a little helper function that uses a query selector to get the front and back elements.</p><pre><code lang="javascript">const getFrontAndBackFromCard = (card) =&gt; {
  const front = card.querySelector(".front");
  const back = card.querySelector(".back");
  return [front, back]
}</code></pre><p>And here's a helper function for toggling the <code>rotated</code> class on an array of elements.</p><pre><code lang="javascript">const rotateElements = (elements) =&gt; {
  if(typeof elements !== 'object' || !elements.length) return;
  elements.forEach(element =&gt; element.classList.toggle('rotated'));
}
</code></pre><p>From there, we can toggle the front and the back like so.</p><pre><code lang="javascript">const clickCard = (e) =&gt; {
  const pokemonCard = e.currentTarget;
  const [front, back] = getFrontAndBackFromCard(pokemonCard)
  const pokemonName = pokemonCard.dataset.pokename;
  rotateElements([front, back]);
}</code></pre><h2>Adding More Game Logic</h2><p>Now that we can flip the front and back of one card, we need to add extra game logic to take two cards into account. This is core to how memory match games work because we'll need to keep track of two cards at a time.</p><p>After a card is clicked, we'll track it by storing the card element in a variable called <code>firstPick</code>. We can then check to see whether or not there is an existing card that has been clicked to determine what to do next. We can also ignore the clicking of a card if it has already been clicked by checking if its front element already has a class of <code>rotated</code>.</p><pre><code lang="javascript">const firstPick = null;
...

const clickCard = (e) =&gt; {
  const pokemonCard = e.currentTarget;
  const [front, back] = getFrontAndBackFromCard(pokemonCard)
  
  if(front.classList.contains("rotated")) {
    return;
  }
  rotateElements([front, back]);

  if(!firstPick){
    //track the clicked card
    firstPick = pokemonCard;
  }else {
    //check for matches
  }
}</code></pre><p>Let's now handle the scenario where the user is clicking the second card. We want to check if that card matches the first clicked card. If so, we leave them flipped. If not, we flip them back. We'll put the flipping part inside of <code>setTimeout </code>to give it a bit of a delay.</p><pre><code lang="javascript">else {
  const firstPokemonName = firstPick.dataset.pokename;
  const secondPokemonName = pokemonCard.dataset.pokename;
  if(firstPokemonName !== secondPokemonName) {
    const [firstFront, firstBack] = getFrontAndBackFromCard(firstPick);
    setTimeout(() =&gt; {
        rotateElements([front, back, firstFront, firstBack]);
        firstPick = null;
    }, 500)    
  }
}</code></pre><p>And what if the cards do match? Well, let's keep track of how many matches the user has gotten so far with a variable called <code>matches</code>. Then, if that number reaches 8, the user has won. Here's what the full function looks like.</p><pre><code lang="javascript">let matches = 0;
...

const clickCard = (e) =&gt; {
  const pokemonCard = e.currentTarget;
  const [front, back] = getFrontAndBackFromCard(pokemonCard)
  if(front.classList.contains("rotated")) {
    return;
  }
  isPaused = true;
  rotateElements([front, back]);
  if(!firstPick){
    firstPick = pokemonCard;
  }
  else {
    const secondPokemonName = pokemonCard.dataset.pokename;
    const firstPokemonName = firstPick.dataset.pokename;
    if(firstPokemonName !== secondPokemonName) {
        const [firstFront, firstBack] = getFrontAndBackFromCard(firstPick);
        setTimeout(() =&gt; {
            rotateElements([front, back, firstFront, firstBack]);
            firstPick = null;
        }, 500)    
    }else {
        matches++;
        if(matches === 8) {
            console.log("WINNER");
        }
        firstPick = null;
    }
  }
}</code></pre><p>Lastly, we can update the <code>resetGame</code> function to appropriately reset the game state. Then, we'll call the <code>resetGame</code> function to start the game.</p><pre><code lang="javascript">const resetGame = async() =&gt; {
  game.innerHTML = '';
  firstPick = null;
  matches = 0;
  const loadedPokemon = await loadPokemon();  
  displayPokemon([...loadedPokemon, ...loadedPokemon]);
}

resetGame()</code></pre></div>

In this tutorial, we’re going to build a PokeMatch game with vanilla HTML, CSS, and JavaScript. The Pokemon API is free and fun to work with, so let’s get started.
This is an abridged version of the tutorial. Watch the full tutorial on YouTube. You can find the full source code here.
Set Up
Open a blank folder in your favorite text editor (VSCode for me). Then, create three files.

index.html
app.js
app.css

In the HTML file, stub out a basic template with a few elements.

references to both app.css and app.js
div with a class of container to wrap everything
a header for the title and a reset button that calls a resetGame function
an empty div with an id of game

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Pokemon Memory Match Game</title>
    <link rel="stylesheet" href="app.css" />
</head>
<body>
    <div class="container">

        <header>
            <h1>PokeMatch</h1>
            <button onclick="resetGame()">Reset</button>
        </header>
        <div id="game">    
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>
        
**TIP** You can use the ‘live server’ extension in VS Code to get a live reloading server running. By default it runs on  port 5501.
This is all the markup we’ll need for now. We’ll dynamically generate the board in JavaScript.
Getting your Pokemon
In the app.js file, we’ll need to work with the Pokemon API to get information on 8 different Pokemon for each iteration of the game. We’ll use this Pokemon API endpoint: 
https://pokeapi.co/api/v2/pokemon/{id}

We'll need 3 key properties about each pokemon. 

ID
sprites (images) 
type

First, we’re going to create a new function called loadPokemon which will make a fetch request to the API for 8 random Pokemon. This function will use async/await so we can go ahead and mark it as async.

We’ll start by making a request to the PokeAPI based URL and then add on the string of the Pokemon we want to fetch. For example, if we want to fetch information for Bulbasaur, we would add 1 to the end of the URL.
const pokeAPIBaseUrl = "https://pokeapi.co/api/v2/pokemon/";

const loadPokemon = async () => {
  const res = await fetch(pokeAPIBaseUrl + '1');
  const pokemon = await res.json();
}

Now, we need to generate an array of random Pokémon IDs, then iterate through the array to make a fetch request for each one. We can use a set to take care of any duplicate IDs and Match.random() to generate random numbers.

A set is an object data structure that doesn’t allow for duplicates and has a constant lookup time.
const randomIds = new Set();
while(randomIds.size < 8){
    const randomNumber = Math.ceil(Math.random() * 150);
    randomIds.add(randomNumber);
}
Then, we'll take that set of random Ids and make a request to the Pokemon API for each one. For performance benefits, we are going to use Promise.all() which will let the different API requests happen in parallel. Here's the final loadPokemon function.
const loadPokemon = async () => {
  const randomIds = new Set();
  while(randomIds.size < 8){
      const randomNumber = Math.ceil(Math.random() * 150);
      randomIds.add(randomNumber);
  }
  const pokePromises = [...randomIds].map(id => fetch(pokeAPIBaseUrl + id))
  const results = await Promise.all(pokePromises);
  return await Promise.all(results.map(res => res.json()));
}

Let's create a displayPokemon function to display the cards. This function will:

sort the pokemon in a random order using this trick - pokemon.sort( _ => Math.random() - 0.5);
iterate through each Pokemon using Array.map()
convert each Pokemon to an HTML template string 
call join on the resulting array to generate one HTML string that includes all of the Pokemon cards

const displayPokemon = (pokemon) => {
	pokemon.sort( _ => Math.random() - 0.5);
	const pokemonHTML = pokemon.map(pokemon => {
  	return '
			<div class ="card">
				<h2>${pokemon.name}
			</div>
		'
	}).join('');
}
With the HTML string generated, we now need to set it as the innerHTML property of the game div.
const game = document.getElementById('game');
...

const displayPokemon = (pokemon) => {
	pokemon.sort( _ => Math.random() - 0.5);
	const pokemonHTML = pokemon.map(pokemon => {
  	return '
			<div class ="card">
				<h2>${pokemon.name}
			</div>
		'
	}).join('');
  game.innerHTML = pokemonHTML;

}
Now, let's create a resetGame function that will load the Pokemon and then call displayPokemon. Since this is a match game, we'll need two cards for each Pokemon. For this, we can create a new array with two copies of the loadedPokemon using the Spread operator.

const resetGame = async() => {
  game.innerHTML = '';
  const loadedPokemon = await loadPokemon();
  displayPokemon([...loadedPokemon, ...loadedPokemon]);
}
Basic Styling
Let's start to style our app with CSS. 
This is optional, but for fun, I downloaded a free Pokemon font. After downloading the Pokemon.TTF and adding it to the root of your directory, you can use it to your CSS.
@font-face {
  font-family: pokemon;
  src: url(pokemon.ttf);
}
Now for the game container. Let's use Flexbox to center the content on the screen as well as a few additional styles.
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  font-family: pokemon;
  letter-spacing: 5px;
  gap: 10px;
  max-width: 800px;
  margin: 0 auto;
}
Now, for the header. We can use Flexbox again here to center the title and the reset button vertically and spread them apart. We can also make the title a bit bigger.
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

h1 {
    font-size: 54px;
}

Styling the Pokemon Cards
First, let's style the game as grid of four by four with a bit of gap between each.
#game {
  display: grid;
  grid-template-columns: repeat(4, 160px);
  grid-template-rows: repeat(4, 160px);
  grid-gap: 10px;
}

Now, for our individual card, we’ll add a box-shadow, border-radius, and position.
We’ll also set the overflow to be hidden.
There's one additional property transform-style that we'll add. This will allow us to make the flipping animations look 3d.
.card {
  box-shadow: 0 3px 10px rgba(200,200,200, 0.9);
  border-radius: 10px;
  position: relative;
  transform-style: preserve-3d;
  overflow: hidden;
}
Animating and Styling the Cards
Let's work on the flip animation to show the front and back of each card.
Inside of the markup for each card, we'll add two containing divs, one for the front, and one for the back.
For the front of the card, I grabbed in image of a Pokeball to display. We'll do this in CSS. You can grab that from the source code if you want to add it. 
For the back of the card, we'll display the image of the Pokemon and their name. The back of the card will also have a class of rotated. We'll toggle this class to trigger the animation in JavaScript. 
Lastly, we'll add two properties to the container card. 

an onclick property that calls a clickCard function (we'll create this shortly)
a custom data property called data-pokename - we'll use this to determine the name of the Pokemon that was clicked

<div class="card" onclick="clickCard(event)" data-pokename="${pokemon.name}">
  <div class="front">
  </div>
  <div class="back rotated">
    <img src="${pokemon.sprites.front_default}" alt="${pokemon.name}"  />
    <h2>${pokemon.name}</h2>
  </div>
</div>
Let's style the front of the card in CSS to add the background image.
.front {
  background-image: url("/pokeball.png");
  background-position: center;
  background-repeat: no-repeat;
  background-color: black;
}
We can also add some general styling that applies to both the front and back of the cards.

Flexbox for centering the content
position of absolute  and a height and width set to 100% 
transition to make the flip smooth

One interesting property that we will set is backface-visibility property to hidden. This will be used to make sure only the back or the front will show at a time.
.card > .front, .card > .back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  transition: transform 0.5s;
}
Flipping the Card
Let's now create the clickCard function. We'll need to know which card was clicked. We can do this by grabbing a reference to e.currentTarget. We can then find the name of the Pokemon from the custom data property we created.
const clickCard = (e) => {
  const pokemonCard = e.currentTarget;
  const pokemonName = pokemonCard.dataset.pokename;
}
To flip this card, we need to get the front and back elements of the card. We'll then flip these by toggling the rotated class. Here's a little helper function that uses a query selector to get the front and back elements.
const getFrontAndBackFromCard = (card) => {
  const front = card.querySelector(".front");
  const back = card.querySelector(".back");
  return [front, back]
}
And here's a helper function for toggling the rotated class on an array of elements.
const rotateElements = (elements) => {
  if(typeof elements !== 'object' || !elements.length) return;
  elements.forEach(element => element.classList.toggle('rotated'));
}

From there, we can toggle the front and the back like so.
const clickCard = (e) => {
  const pokemonCard = e.currentTarget;
  const [front, back] = getFrontAndBackFromCard(pokemonCard)
  const pokemonName = pokemonCard.dataset.pokename;
  rotateElements([front, back]);
}
Adding More Game Logic
Now that we can flip the front and back of one card, we need to add extra game logic to take two cards into account. This is core to how memory match games work because we'll need to keep track of two cards at a time.
After a card is clicked, we'll track it by storing the card element in a variable called firstPick. We can then check to see whether or not there is an existing card that has been clicked to determine what to do next. We can also ignore the clicking of a card if it has already been clicked by checking if its front element already has a class of rotated.
const firstPick = null;
...

const clickCard = (e) => {
  const pokemonCard = e.currentTarget;
  const [front, back] = getFrontAndBackFromCard(pokemonCard)
  
  if(front.classList.contains("rotated")) {
    return;
  }
  rotateElements([front, back]);

  if(!firstPick){
    //track the clicked card
    firstPick = pokemonCard;
  }else {
    //check for matches
  }
}
Let's now handle the scenario where the user is clicking the second card. We want to check if that card matches the first clicked card. If so, we leave them flipped. If not, we flip them back. We'll put the flipping part inside of setTimeout to give it a bit of a delay.
else {
  const firstPokemonName = firstPick.dataset.pokename;
  const secondPokemonName = pokemonCard.dataset.pokename;
  if(firstPokemonName !== secondPokemonName) {
    const [firstFront, firstBack] = getFrontAndBackFromCard(firstPick);
    setTimeout(() => {
        rotateElements([front, back, firstFront, firstBack]);
        firstPick = null;
    }, 500)    
  }
}
And what if the cards do match? Well, let's keep track of how many matches the user has gotten so far with a variable called matches. Then, if that number reaches 8, the user has won. Here's what the full function looks like.
let matches = 0;
...

const clickCard = (e) => {
  const pokemonCard = e.currentTarget;
  const [front, back] = getFrontAndBackFromCard(pokemonCard)
  if(front.classList.contains("rotated")) {
    return;
  }
  isPaused = true;
  rotateElements([front, back]);
  if(!firstPick){
    firstPick = pokemonCard;
  }
  else {
    const secondPokemonName = pokemonCard.dataset.pokename;
    const firstPokemonName = firstPick.dataset.pokename;
    if(firstPokemonName !== secondPokemonName) {
        const [firstFront, firstBack] = getFrontAndBackFromCard(firstPick);
        setTimeout(() => {
            rotateElements([front, back, firstFront, firstBack]);
            firstPick = null;
        }, 500)    
    }else {
        matches++;
        if(matches === 8) {
            console.log("WINNER");
        }
        firstPick = null;
    }
  }
}
Lastly, we can update the resetGame function to appropriately reset the game state. Then, we'll call the resetGame function to start the game.
const resetGame = async() => {
  game.innerHTML = '';
  firstPick = null;
  matches = 0;
  const loadedPokemon = await loadPokemon();  
  displayPokemon([...loadedPokemon, ...loadedPokemon]);
}

resetGame()

Build a JavaScript Memory Match Game

Use Directus.io along with SvelteKit and TypeScript to build a link shortener app. 

<div><p>Let’s build a link shortener app like <a href="https://stackedit.io/bit.ly">bit.ly</a> using SvelteKit, TypeScript, and <a href="https://directus.io/">Directus.io</a> as our Headless CMS.</p><blockquote>This article is a shortened form of the full tutorial. For more details, <a href="https://youtu.be/5AUUSZ5wv10"><strong>watch the full YouTube video</strong></a>. Note that the video uses a previous version of the SvelteKit routing API where this article uses the up-to-date API as of August 24th.</blockquote><h2>Why <a href="http://directus.io/">Directus.io</a></h2><p>There a few reasons to I really like Directus:</p><ul><li>open-source</li><li>a beautiful UI with lots of customization</li><li>nice JavaScript API</li><li>can be deployed anywhere</li></ul><p>Directus can sit on top of your existing SQL database which means you can add a REST API and/or GraphQL on top of your existing data in minutes! Fun stuff! Let’s get started.</p><h2>Set-Up</h2><p>In this case, instead of deploying our own instance of Directus, let’s use the built in managed version. To get started, create a free project and sign up with your Github account.</p><p>After that, create a new project. Give it a name and choose the <code>Community Cloud</code> option, which is the free version. Then, choose an empty project to start completely from scratch.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/9b388399674e72977fa86d82bfd3de696dc143f3-1478x1374.png"><p>After you’ve created your project and it’s been deployed, click to open it. <strong>Note that the admin credentials for the dashboard were sent to the email address that was used to sign up</strong>. Use those credentials to sign in.</p><h2>Creating the Data Model</h2><p>For this link shortener app, we're going to need to store the short slug and the full url the user should be redirected to as well as the number of times a link has been clicked. You can also track additional <a href="https://en.wikipedia.org/wiki/UTM_parameters">UTM parameters</a>. These are often used for tracking impact and clicks associated with a given campaign.</p><p>From the dashboard, you create a collection to store your short links.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/30eb1ef9d58f3fd4be8e2e21e9a389906b064ecc-1166x848.png"><p>Name the collection <code>short_link</code> and set the primary key to be <code>auto incremented</code>.</p><p>You can add built-in properties to your collection like who created it and when it was last updated. You can also add the ability to sort.</p><p>Next up, you’ll need to create the other data fields.</p><ul><li><strong>slug</strong> - input -&gt; String</li><li><strong>url</strong> - input -&gt; String</li><li><strong>clicks</strong> - input -&gt; Integer</li><li><strong>utm_source</strong> - input -&gt; String</li><li><strong>utm_medium</strong> - input -&gt; String</li><li><strong>utm_campaign</strong> - input -&gt; String</li></ul><img src="https://cdn.sanity.io/images/rx426fbd/production/a2c80977ec187bd481efe475a95a48e2470a8fef-1028x904.png"><p>Next up, create a few records in the short link collection. I added a short link (<code>/podcast</code>) for my <a href="https://compressed.fm/">Compressed.fm podcast</a> as an example.</p><p></p><img src="https://cdn.sanity.io/images/rx426fbd/production/c811d4633e1726d74eb378a23ebc616379bc67e1-1170x1092.png"><h2>Building the API in Sveltekit</h2><p>Now to the code. We’re going to use Sveltekit to create an API endpoint that is listening for an incoming request. It will take the slug out of the request, grab the associated record out of Directus, and figure out the right URL to redirect the user to.</p><p>Create a new Sveltekit project and call it <code>link-shortener</code> and complete the prompts to select yes to TypeScript, ESLint, and Prettier.</p><pre><code lang="sh">npm create svelte@latest link-shortener</code></pre><p>In the terminal, run <code>npm install</code> to install the necessary packages.</p><p>With the project created, you’ll need two environment variables.</p><ul><li>DIRECTUS_API_TOKEN (static admin token)</li><li>DIRECTUS_URL (the URL of your deployed dashboard, ex. <code>https://&lt;app_id&gt;.directus.app</code>)</li></ul><p>To get you your API token, go to the user directory, click on our admin user, and scroll down to the token section. Click to create a static token and copy it.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/011ce72959b6bb660d00f1c6a98f780d56824830-1180x798.png"><p>Next, install the <code>dotenv</code> package by running <code>npm install dotenv</code>. This package will take care of grabbing environment variables out of a <code>.env</code> file and making them accessible in the code. Then, create the <code>.env</code> file in the source of your repo and add your two environment variables.</p><pre><code lang="sh">DIRECTUS_URL=https://&lt;your_project&gt;.directus.app
DIRECTUS_API_TOKEN=&lt;your_api_token&gt;</code></pre><p>Install the Directus JavaScript SDK from NPM.</p><pre><code lang="sh">npm install @directus/sdk</code></pre><p>Create a new folder called <code>util</code>, and add a file named <code>directus.ts</code>. You’ll need to import Directus from the Directus package and the <code>dotenv</code> package like so.<code></code></p><pre><code lang="javascript">import { Directus } from'@directus/sdk';
import 'dotenv/config';</code></pre><p>Then, create an instance of Directus using the two environment variables and export it.<code></code></p><pre><code lang="javascript">import  { Directus }  from  '@directus/sdk';
import  'dotenv/config';

const directusToken = process.env.DIRECTUS_API_TOKEN;
const directusUrl = process.env.DIRECTUS_URL;

export const directus = new Directus(directusUrl, {
   	auth: {
   		staticToken: directusToken
   	}
})</code></pre><p>Next, you’ll need to create a dynamic API route in SvelteKit. In the <code>src/routes/[slug]</code> directory, create a new file called <code>+server.ts</code>. Then, scaffold a basic route with the following code which also imports the instance of Directus. Notice the <code>params</code> and <code>setHeaders</code> properties are destructured from the incoming request.</p><pre><code lang="javascript">import  { directus }  from  "../utils/directus";
import type { RequestHandler } from '@sveltejs/kit';

export const GET: RequestHandler = async ({ params, setHeaders }) =&gt; {
	return new Response('', { status: 302 });
};</code></pre><p>Next, you’ll need to get the slug of the URL (the dynamic part). For now, log it to the console for testing.</p><pre><code lang="javascript">console.log(params.slug);</code></pre><p>Now, test it out. Start your project with the following command.<code></code></p><pre><code lang="sh">npm run dev</code></pre><p>By default, your server will start at <code>localhost:5173</code>. Try navigating to <code>localhost:5173/podcast</code>, to see if <code>podcast</code> is logged out correctly as the slug.</p><p>From there, you’ll want to get the correct link associated with that slug from Directus. You can query Directus for this record by passing a filter like so:<code></code></p><pre><code lang="javascript">const slug = params.slug;      
const { data } = await directus.items('short_link').readByQuery({
	filter: {
		slug
	}
})
const shortLink = data[0]</code></pre><p>This query will return an array of records, so you’ll need to grab the first item in the <code>data</code> array. After querying the record correctly, you’ll need to update the existing short link and increment its <code>click</code> value.</p><p>We’ll use the <code>updateOne</code> method and specify the ID of the record we want to update. The value for the clicks will come from <code>shortLink.clicks + 1</code>.</p><pre><code lang="javascript"> await directus.items('short_link').updateOne(shortLink.id, {
 	clicks: shortLink.clicks + 1
 });</code></pre><p>Now, you can redirect the user to the appropriate destination based on the <code>url</code> property of the short link.</p><pre><code lang="javascript">setHeaders({
	location: shortLink.url
});

return new Response('', { status: 302 });</code></pre><h2>Final Test</h2><p>In my example, I created a short link (<code>/podcast</code>) for my podcast. When I navigate to <code>localhost:5173/podcast</code>, I correctly get redirected to <a href="https://compressed.fm/">https://compressed.fm/</a>. </p><p>Did yours redirect correctly? Did the <code>clicks</code> property get updated appropriately inside of the Directus dashboard as well?</p></div>

Let’s build a link shortener app like bit.ly using SvelteKit, TypeScript, and Directus.io as our Headless CMS.
This article is a shortened form of the full tutorial. For more details, watch the full YouTube video. Note that the video uses a previous version of the SvelteKit routing API where this article uses the up-to-date API as of August 24th.
Why Directus.io
There a few reasons to I really like Directus:

open-source
a beautiful UI with lots of customization
nice JavaScript API
can be deployed anywhere

Directus can sit on top of your existing SQL database which means you can add a REST API and/or GraphQL on top of your existing data in minutes! Fun stuff! Let’s get started.
Set-Up
In this case, instead of deploying our own instance of Directus, let’s use the built in managed version. To get started, create a free project and sign up with your Github account.
After that, create a new project. Give it a name and choose the Community Cloud option, which is the free version. Then, choose an empty project to start completely from scratch.

After you’ve created your project and it’s been deployed, click to open it. Note that the admin credentials for the dashboard were sent to the email address that was used to sign up. Use those credentials to sign in.
Creating the Data Model
For this link shortener app, we're going to need to store the short slug and the full url the user should be redirected to as well as the number of times a link has been clicked. You can also track additional UTM parameters. These are often used for tracking impact and clicks associated with a given campaign.
From the dashboard, you create a collection to store your short links.

Name the collection short_link and set the primary key to be auto incremented.
You can add built-in properties to your collection like who created it and when it was last updated. You can also add the ability to sort.
Next up, you’ll need to create the other data fields.

slug - input -> String
url - input -> String
clicks - input -> Integer
utm_source - input -> String
utm_medium - input -> String
utm_campaign - input -> String

Next up, create a few records in the short link collection. I added a short link (/podcast) for my Compressed.fm podcast as an example.


Building the API in Sveltekit
Now to the code. We’re going to use Sveltekit to create an API endpoint that is listening for an incoming request. It will take the slug out of the request, grab the associated record out of Directus, and figure out the right URL to redirect the user to.
Create a new Sveltekit project and call it link-shortener and complete the prompts to select yes to TypeScript, ESLint, and Prettier.
npm create svelte@latest link-shortener
In the terminal, run npm install to install the necessary packages.
With the project created, you’ll need two environment variables.

DIRECTUS_API_TOKEN (static admin token)
DIRECTUS_URL (the URL of your deployed dashboard, ex. https://<app_id>.directus.app)

To get you your API token, go to the user directory, click on our admin user, and scroll down to the token section. Click to create a static token and copy it.

Next, install the dotenv package by running npm install dotenv. This package will take care of grabbing environment variables out of a .env file and making them accessible in the code. Then, create the .env file in the source of your repo and add your two environment variables.
DIRECTUS_URL=https://<your_project>.directus.app
DIRECTUS_API_TOKEN=<your_api_token>
Install the Directus JavaScript SDK from NPM.
npm install @directus/sdk
Create a new folder called util, and add a file named directus.ts. You’ll need to import Directus from the Directus package and the dotenv package like so.
import { Directus } from'@directus/sdk';
import 'dotenv/config';
Then, create an instance of Directus using the two environment variables and export it.
import  { Directus }  from  '@directus/sdk';
import  'dotenv/config';

const directusToken = process.env.DIRECTUS_API_TOKEN;
const directusUrl = process.env.DIRECTUS_URL;

export const directus = new Directus(directusUrl, {
   	auth: {
   		staticToken: directusToken
   	}
})
Next, you’ll need to create a dynamic API route in SvelteKit. In the src/routes/[slug] directory, create a new file called +server.ts. Then, scaffold a basic route with the following code which also imports the instance of Directus. Notice the params and setHeaders properties are destructured from the incoming request.
import  { directus }  from  "../utils/directus";
import type { RequestHandler } from '@sveltejs/kit';

export const GET: RequestHandler = async ({ params, setHeaders }) => {
	return new Response('', { status: 302 });
};
Next, you’ll need to get the slug of the URL (the dynamic part). For now, log it to the console for testing.
console.log(params.slug);
Now, test it out. Start your project with the following command.
npm run dev
By default, your server will start at localhost:5173. Try navigating to localhost:5173/podcast, to see if podcast is logged out correctly as the slug.
From there, you’ll want to get the correct link associated with that slug from Directus. You can query Directus for this record by passing a filter like so:
const slug = params.slug;      
const { data } = await directus.items('short_link').readByQuery({
	filter: {
		slug
	}
})
const shortLink = data[0]
This query will return an array of records, so you’ll need to grab the first item in the data array. After querying the record correctly, you’ll need to update the existing short link and increment its click value.
We’ll use the updateOne method and specify the ID of the record we want to update. The value for the clicks will come from shortLink.clicks + 1.
 await directus.items('short_link').updateOne(shortLink.id, {
 	clicks: shortLink.clicks + 1
 });
Now, you can redirect the user to the appropriate destination based on the url property of the short link.
setHeaders({
	location: shortLink.url
});

return new Response('', { status: 302 });
Final Test
In my example, I created a short link (/podcast) for my podcast. When I navigate to localhost:5173/podcast, I correctly get redirected to https://compressed.fm/. 
Did yours redirect correctly? Did the clicks property get updated appropriately inside of the Directus dashboard as well?

Use Directus.io along with SvelteKit and TypeScript to build a link shortener app.

Create a Link Shortener App with SvelteKit, TypeScript, and Directus.io

Callbacks are an essential part of understanding JavaScript especially when dealing with asynchronous code. Let's cover the basics of callbacks in about 5 minutes with a handful of examples!

<div><p>Callbacks are an essential part of understanding JavaScript especially when dealing with asynchronous code. Let's cover the basics of callbacks in about 5 minutes with a handful of examples!</p><h2>What Are Callback Functions?</h2><p>One of the more unique aspects of JavaScript is how it handles/treats functions. Functions are considered to be "first-class citizens". This has a couple of different implications.</p><ul><li>functions are objects</li><li>you can assign a function to a variable</li><li><strong>functions can be passed as a parameter to a function</strong></li></ul><p>The last bullet point is is in bold because it is essential to the idea of callbacks.</p><blockquote>Callback functions are functions that are passed as a parameter to another function.</blockquote><h2>Basic Callback with setTimeout</h2><p>One of the first times that JavaScript developers encounter a callback function is when using the <code>setTimeout()</code> function. Here's a simple example.</p><pre><code lang="javascript">setTimeout(() =&gt; {
  console.log("Hello")
},100)</code></pre><p>In this case, we are telling JavaScript to call our callback function after waiting for 100 ms. The <code>setTimeout()</code> function takes two parameters: a callback function and a timeout number in milliseconds. We can make this more obvious by creating a separate function completely instead of using an inline anonymous function.</p><pre><code lang="javascript">//this is the callback function
const timeoutCallback = () =&gt; {
  console.log("Hello")
}

setTimeout(timeoutCallback, 100)</code></pre><p>It works the exact same as the previous snippet, but now we've separated the function out more clearly. </p><h2>Callbacks in Array Functions</h2><p>If you've written much JavaScript in the past couple of years, you're probably familiar with array functions like <code>map()</code>, <code>reduce()</code>, <code>filter()</code>, <code>forEach()</code>, etc. Each of these functions leverages callbacks. They each will iterate through an array and call the callback function for each item. Here's an example with <code>forEach()</code>.</p><pre><code lang="javascript">const names = ['james', 'jess', 'lily', 'sevy']

names.forEach((name) =&gt; {
  console.log(name)
});</code></pre><p>In this case, the callback function is defined inline and accepts a parameter which is an individual name from the <code>names</code> array. It then logs that name to the console. This example may seem simple, but let's take a look at what's going on behind the scenes.</p><h2>Building forEach() From Scratch With Callbacks</h2><p>Building JavaScript functions from scratch has always been an amazing learning exercise for me, so let's give it a try here. Let's create our own version of the <code>forEach()</code> function to get a clearer idea of how callbacks work.</p><p>Let's create a new function <code>myForEach()</code> that accepts two parameters, an array and a callback function.</p><pre><code lang="javascript">const myForEach = (arr, cb) =&gt; {

}</code></pre><p>Inside of the function, we can create a for loop to iterate through the array and get access to each element.</p><pre><code lang="javascript">const myForEach = (arr, cb) =&gt; {
  for (let i = 0; i &lt; arr.length; i++) {
    const element = arr[i];
  }
}</code></pre><p>From there, we'll call the callback function and pass the individual element as a parameter.</p><pre><code lang="javascript">const myForEach = (arr, cb) =&gt; {
  for (let i = 0; i &lt; arr.length; i++) {
    const element = arr[i];
    cb(element)
  }
}</code></pre><p>That's it. That's basically what all of the array functions are doing behind the scenes. Building these kinds of example have always helped my understanding, so hopefully it's helped you as well!</p><h2>Asynchronous Callback Functions</h2><p>The array function examples shown above are dealing with synchronous code, so let's look at an example of how it works with asynchronous code. Let's use the built in <code>fetch()</code> function in JavaScript to request data from the FREE <a href="https://pokeapi.co/">PokeAPI</a>. </p><p>In this case, we make a fetch request to the PokeAPI for a Pokemon with an id of 56 (do you know which one that is? 👀).</p><pre><code lang="javascript">fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
  .then(res =&gt; {
    return res.json()
  })
  .then(data =&gt; {
    console.log(data)
  })</code></pre><p>Fetch returns a promise, so we have to use <code>.then()</code><code></code> to wait for the response to come back. We then convert the data to JSON which returns another promise. Finally, we log out the Pokemon data. We are passing a callback function to each instance <code>.then()</code>. This is beneficial because we continue to run other code while the request is running instead of waiting the entire time for the data to be returned.</p><h2>Wrap Up</h2><p>Callbacks are an essential part of JavaScript. The flow and usage can seem tricky at first, but hopefully it's gotten simpler with a few examples!</p></div>

Callbacks are an essential part of understanding JavaScript especially when dealing with asynchronous code. Let's cover the basics of callbacks in about 5 minutes with a handful of examples!
What Are Callback Functions?
One of the more unique aspects of JavaScript is how it handles/treats functions. Functions are considered to be "first-class citizens". This has a couple of different implications.

functions are objects
you can assign a function to a variable
functions can be passed as a parameter to a function

The last bullet point is is in bold because it is essential to the idea of callbacks.
Callback functions are functions that are passed as a parameter to another function.
Basic Callback with setTimeout
One of the first times that JavaScript developers encounter a callback function is when using the setTimeout() function. Here's a simple example.
setTimeout(() => {
  console.log("Hello")
},100)
In this case, we are telling JavaScript to call our callback function after waiting for 100 ms. The setTimeout() function takes two parameters: a callback function and a timeout number in milliseconds. We can make this more obvious by creating a separate function completely instead of using an inline anonymous function.
//this is the callback function
const timeoutCallback = () => {
  console.log("Hello")
}

setTimeout(timeoutCallback, 100)
It works the exact same as the previous snippet, but now we've separated the function out more clearly. 
Callbacks in Array Functions
If you've written much JavaScript in the past couple of years, you're probably familiar with array functions like map(), reduce(), filter(), forEach(), etc. Each of these functions leverages callbacks. They each will iterate through an array and call the callback function for each item. Here's an example with forEach().
const names = ['james', 'jess', 'lily', 'sevy']

names.forEach((name) => {
  console.log(name)
});
In this case, the callback function is defined inline and accepts a parameter which is an individual name from the names array. It then logs that name to the console. This example may seem simple, but let's take a look at what's going on behind the scenes.
Building forEach() From Scratch With Callbacks
Building JavaScript functions from scratch has always been an amazing learning exercise for me, so let's give it a try here. Let's create our own version of the forEach() function to get a clearer idea of how callbacks work.
Let's create a new function myForEach() that accepts two parameters, an array and a callback function.
const myForEach = (arr, cb) => {

}
Inside of the function, we can create a for loop to iterate through the array and get access to each element.
const myForEach = (arr, cb) => {
  for (let i = 0; i < arr.length; i++) {
    const element = arr[i];
  }
}
From there, we'll call the callback function and pass the individual element as a parameter.
const myForEach = (arr, cb) => {
  for (let i = 0; i < arr.length; i++) {
    const element = arr[i];
    cb(element)
  }
}
That's it. That's basically what all of the array functions are doing behind the scenes. Building these kinds of example have always helped my understanding, so hopefully it's helped you as well!
Asynchronous Callback Functions
The array function examples shown above are dealing with synchronous code, so let's look at an example of how it works with asynchronous code. Let's use the built in fetch() function in JavaScript to request data from the FREE PokeAPI. 
In this case, we make a fetch request to the PokeAPI for a Pokemon with an id of 56 (do you know which one that is? 👀).
fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
  .then(res => {
    return res.json()
  })
  .then(data => {
    console.log(data)
  })
Fetch returns a promise, so we have to use .then() to wait for the response to come back. We then convert the data to JSON which returns another promise. Finally, we log out the Pokemon data. We are passing a callback function to each instance .then(). This is beneficial because we continue to run other code while the request is running instead of waiting the entire time for the data to be returned.
Wrap Up
Callbacks are an essential part of JavaScript. The flow and usage can seem tricky at first, but hopefully it's gotten simpler with a few examples!

JavaScript Callbacks Explained in 5 Minutes

<div><p>VS Code is amazing, but it's pretty boring looking by default. The good news is that it only takes a few minutes to start to customize it and make it look much more fun! In this article, I'm going to show you how to install and setup my favorite FREE VS Code font, <a href="https://github.com/microsoft/cascadia-code">Cascadia Code</a>.</p><h2>Install</h2><p>To install the font, download the latest ZIP file from the <a href="https://github.com/microsoft/cascadia-code/releases">releases pages</a>(2111.01 as of this article). After you've installed the ZIP, extract the files. </p><p>Then look for the different font files inside of the <code>ttf</code> folder.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/cda2972dd214a219a37ec8abb28130ce915ab137-922x724.png"><p>On a Mac, you can double click each one of these files, and choose install.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/fd8740c760c6edfc48c22ae6a063be686ed7fedc-784x664.png"><p>On Windows, I believe you can right-click on the font files and choose "Install". Here's a link for more details, <a href="https://windowsloop.com/download-install-cascadia-code-font/">How to Download and Install Cascadia Code Font for Windows </a>.</p><h2>Setup in VS Code</h2><p>Now that you have the font installed, you need to configure VS Code to use it. This will only take a second. Open your VS Code settings by clicking the gear icon in the lower left corner. Then, search for "Font Family" and type in "Cascadia Code".</p><img src="https://cdn.sanity.io/images/rx426fbd/production/eeca73d216f1104432d19ca60b5fa994e6cc292e-3840x2160.png"><p>Now, if you look at your code, it should look much better! Note that you may see a bit of a delay here. You may have to close a code file and open it back up.</p><h2>Font Ligatures</h2><p>One of my favorite features of this font is the ability to use Font Ligatures which create custom characters for things like triple equals, arrows, etc. In your settings, search for "Font Ligatures", and click "Edit in settings.json". Then, assign that property in JSON to <code>true</code>.</p><pre><code lang="json">{
  //...other settings
  "editor.fontLigatures":true
}</code></pre><p>Here's a final screenshot of my code!</p><img src="https://cdn.sanity.io/images/rx426fbd/production/d8f5bfabaf190188ed79ae313d160a361da226d8-3840x2160.png"><p>Note that I think these a really neat, but keep in mind that you'll be sacrificing a bit of readability by using them since many people aren't used to seeing them.</p><h2>Extra Fonts</h2><p>I figured I'd give you two additional font options if you're interested.</p><p><a href="https://github.com/tonsky/FiraCode">Fira Code</a> is another great FREE font that also supports font ligatures. </p><p><a href="https://philpl.gumroad.com/l/dank-mono#:~:text=Phil%20Pluckthun,italic%20variant%20and%20bold%20style.">Dank Mono</a> is a PAID font (about $40 USD I think), and is one of the coolest fonts I've ever seen.</p><h2>Wrap Up</h2><p>Hope your VS Code is looking a lot more fun now. I'm curious what your favorite VS Code font is? Let me know <a href="https://twitter.com/jamesqquick/status/1554472896285794307?s=20&amp;t=5SVOM-X-sgjs1F0ciZ7w9g">in this Tweet</a>.</p><p>If you'd like more tips for working with VS Code, check out my <a href="https://learn.jamesqquick.com/vs-code-cheat-sheet">FREE VS Code Cheat Sheet</a>.</p></div>

VS Code is amazing, but it's pretty boring looking by default. The good news is that it only takes a few minutes to start to customize it and make it look much more fun! In this article, I'm going to show you how to install and setup my favorite FREE VS Code font, Cascadia Code.
Install
To install the font, download the latest ZIP file from the releases pages(2111.01 as of this article). After you've installed the ZIP, extract the files. 
Then look for the different font files inside of the ttf folder.

On a Mac, you can double click each one of these files, and choose install.

On Windows, I believe you can right-click on the font files and choose "Install". Here's a link for more details, How to Download and Install Cascadia Code Font for Windows .
Setup in VS Code
Now that you have the font installed, you need to configure VS Code to use it. This will only take a second. Open your VS Code settings by clicking the gear icon in the lower left corner. Then, search for "Font Family" and type in "Cascadia Code".

Now, if you look at your code, it should look much better! Note that you may see a bit of a delay here. You may have to close a code file and open it back up.
Font Ligatures
One of my favorite features of this font is the ability to use Font Ligatures which create custom characters for things like triple equals, arrows, etc. In your settings, search for "Font Ligatures", and click "Edit in settings.json". Then, assign that property in JSON to true.
{
  //...other settings
  "editor.fontLigatures":true
}
Here's a final screenshot of my code!

Note that I think these a really neat, but keep in mind that you'll be sacrificing a bit of readability by using them since many people aren't used to seeing them.
Extra Fonts
I figured I'd give you two additional font options if you're interested.
Fira Code is another great FREE font that also supports font ligatures. 
Dank Mono is a PAID font (about $40 USD I think), and is one of the coolest fonts I've ever seen.
Wrap Up
Hope your VS Code is looking a lot more fun now. I'm curious what your favorite VS Code font is? Let me know in this Tweet.
If you'd like more tips for working with VS Code, check out my FREE VS Code Cheat Sheet.

My Favorite FREE VS Code Font in 2022  - Install and Setup with FONT LIGATURES!

Test your APIs directly inside of VS Code with the RapidAPI Client extension.

<div><p>Did you know you can test your API endpoints right inside of <a href="https://code.visualstudio.com/">VS Code</a>? I recently discovered a <a href="https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client&amp;utm_source=jamesqquick&amp;utm_medium=DevRel&amp;utm_campaign=DevRel">BRAND NEW VS Code extension for for doing just that from RapidAPI</a>. Let's see how to use it and a few of it's best features!</p><h2>Installing the Extension</h2><p>Open the extensions tab inside of VS Code and search for "RapidAPI Client". Then, click install. </p><img src="https://cdn.sanity.io/images/rx426fbd/production/a423504e416895fdae1a6c299669afa1da66b6f6-3840x2160.png"><p>You may be asked to reload VS Code, so go ahead and do that.</p><h2>API Endpoint Setup with Express (optional)</h2><p>In my demo, I am using a simple <a href="https://expressjs.com/">Node/Express</a> server to create an endpoint that I can test against. If you already have an endpoint to test, feel free to skip this section. I won't show you how to set up the server from scratch since this isn't a Node/Express tutorial, but here is the sample code for reference.</p><pre><code lang="javascript">const express = require('express');
const app = express();

const data = [
    {
        link: "https://www.producthunt.com/posts/react-and-next-js-snippets",
        title: "React and Next.js Snippets - React and Nextjs Snippets with TypeScript!🚀 | Product Hunt by Avneesh",
        imageUrl: "https://ph-files.imgix.net/b17455eb-f82d-4d1a-bd22-68eac9667073.png?auto=format&amp;auto=compress&amp;codec=mozjpeg&amp;cs=strip&amp;w=440&amp;h=220&amp;fit=max&amp;dpr=2",
        description:"This is a Visual Studio Code extension that gives you many React and Next.js snippets with typescript support so you don't have to rewrite the same code over and over again 😉"
    },
    {
        link:"https://egghead.io/blog/drag-to-reorder-list-items-with-framer-motion",
        title: "Drag-to-Reorder List Items with Framer Motion by willjohnsonio",
        imageUrl: "https://egghead.io/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdg3gyk0gu%2Fimage%2Fupload%2Fv1644535367%2Fegghead-next-ebombs%2F2022-will%2Fpink_orbs_hexagon_1.png&amp;w=3840&amp;q=100",
        description: "If you have an application with a list of items, like a to-do list, shopping list, a list of the greatest basketball players, etc. You might want to reorder your list once you have some items added to it."

    }
];

app.get('/content', (req, res) =&gt; {
    res.json(data);
});

const port = process.env.PORT || 3000;

app.listen(port, () =&gt; {
    console.log(`listening on port ${port}`);
});</code></pre><p>In this example, I have a Node/Express server with one endpoint, <code>/content</code>, that returns some JSON data.</p><p>In this endpoint, I am returning a sample list of content that has been created from my Learn Build Teach Discord community. We have a slash command enabled in the server for people to share content they've created, so I figured it would make for a good example here.</p><blockquote><a href="https://learnbuildteach.com/">Join the Learn Build Teach Discord!</a></blockquote><h2> Testing the API Request</h2><p>With the Node/Express server running, I'm now able to test out this endpoint inside of the <a href="https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client&amp;utm_source=jamesqquick&amp;utm_medium=DevRel&amp;utm_campaign=DevRel">RapidAPI Client extension</a> by sending a GET request to <code>http://localhost:3000/content</code>. To do so, open the extension using the icon in your sidebar.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/f885fcfad11cbb646d3ef73f3c5c0de1b9ffeb0e-914x1170.png"><p>Then, click the plus icon to create a new request and populate the address.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/533b3b0d719539e55d5846e19715415278258b7f-3840x2160.png"><p>Then, click "New Request", and you should see the data returned from your API endpoint.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/7593e92c6e2cd25c1e48ae615ec98eaaae2ebf32-3840x2160.png"><p>From here, you can do all the basic things you would expect.</p><ul><li>change HTTP methods (GET, POST, PATCH, DELETE, etc.)</li><li>add query parameters, headers, etc.</li><li>add authentication parameters</li></ul><p>In addition to the basics, there are few extra nifty features we should look at!</p><h2>Generate Code Snippets</h2><p>This extension gives you a dropdown of languages that you can use to generate code snippets for making requests to the API that you are testing. There is an amazing list of languages here.</p><ul><li>JavaScript and TypeScript</li><li>Java</li><li>C#</li><li>Python</li><li>lots more!</li></ul><p>To generate a JavaScript code snippet, select JavaScript as the language next to the "Request snippet" text in the bottom of the window. I'm choosing to use the Fetch API for my request. Then, you can click the <code>&lt;/&gt;</code> button to generate the code snippet.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/e812de2f9d65db35b64da81d2a4b497c74a3d391-1176x2004.png"><p>The resulting code snippet will look like this.</p><pre><code lang="javascript">const options = {method: 'GET'};

fetch('http://localhost:3000/content', options)
  .then(response =&gt; response.json())
  .then(response =&gt; console.log(response))
  .catch(err =&gt; console.error(err));</code></pre><p>From there, you can copy and paste this snippet into your project. Pretty neat!</p><h2>Generate TypeScript Types</h2><p>I've becoming a bigger and bigger fan of TypeScript, so I love to have TypeScript types for any data I pull from an external API. Well, this extension can help here as well. In the lower right hand side, there is a "JSON to" section which gives you a list of type definitions you can export to including TypeScript.</p><p>To generate your TypeScript type, choose TypeScript from the dropdown and then click the code icon.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/52eeec78876c4625d772eef15d40b95092a1bb54-1678x1996.png"><p>For my data, I get this TypeScript definition.</p><pre><code lang="typescript">export interface RootObject {
 description: string;
 imageUrl:    string;
 link:        string;
 title:       string;
}</code></pre><h2>Wrap Up</h2><p>I love that VS Code extensions add so much functionality without having to download external tools. If you'd like to learn more about the RapidAPI Client extension and specifically how to use environments, secret credentials, and more, check out the full video above.</p></div>

Did you know you can test your API endpoints right inside of VS Code? I recently discovered a BRAND NEW VS Code extension for for doing just that from RapidAPI. Let's see how to use it and a few of it's best features!
Installing the Extension
Open the extensions tab inside of VS Code and search for "RapidAPI Client". Then, click install. 

You may be asked to reload VS Code, so go ahead and do that.
API Endpoint Setup with Express (optional)
In my demo, I am using a simple Node/Express server to create an endpoint that I can test against. If you already have an endpoint to test, feel free to skip this section. I won't show you how to set up the server from scratch since this isn't a Node/Express tutorial, but here is the sample code for reference.
const express = require('express');
const app = express();

const data = [
    {
        link: "https://www.producthunt.com/posts/react-and-next-js-snippets",
        title: "React and Next.js Snippets - React and Nextjs Snippets with TypeScript!🚀 | Product Hunt by Avneesh",
        imageUrl: "https://ph-files.imgix.net/b17455eb-f82d-4d1a-bd22-68eac9667073.png?auto=format&auto=compress&codec=mozjpeg&cs=strip&w=440&h=220&fit=max&dpr=2",
        description:"This is a Visual Studio Code extension that gives you many React and Next.js snippets with typescript support so you don't have to rewrite the same code over and over again 😉"
    },
    {
        link:"https://egghead.io/blog/drag-to-reorder-list-items-with-framer-motion",
        title: "Drag-to-Reorder List Items with Framer Motion by willjohnsonio",
        imageUrl: "https://egghead.io/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdg3gyk0gu%2Fimage%2Fupload%2Fv1644535367%2Fegghead-next-ebombs%2F2022-will%2Fpink_orbs_hexagon_1.png&w=3840&q=100",
        description: "If you have an application with a list of items, like a to-do list, shopping list, a list of the greatest basketball players, etc. You might want to reorder your list once you have some items added to it."

    }
];

app.get('/content', (req, res) => {
    res.json(data);
});

const port = process.env.PORT || 3000;

app.listen(port, () => {
    console.log(`listening on port ${port}`);
});
In this example, I have a Node/Express server with one endpoint, /content, that returns some JSON data.
In this endpoint, I am returning a sample list of content that has been created from my Learn Build Teach Discord community. We have a slash command enabled in the server for people to share content they've created, so I figured it would make for a good example here.
Join the Learn Build Teach Discord!
 Testing the API Request
With the Node/Express server running, I'm now able to test out this endpoint inside of the RapidAPI Client extension by sending a GET request to http://localhost:3000/content. To do so, open the extension using the icon in your sidebar.

Then, click the plus icon to create a new request and populate the address.

Then, click "New Request", and you should see the data returned from your API endpoint.

From here, you can do all the basic things you would expect.

change HTTP methods (GET, POST, PATCH, DELETE, etc.)
add query parameters, headers, etc.
add authentication parameters

In addition to the basics, there are few extra nifty features we should look at!
Generate Code Snippets
This extension gives you a dropdown of languages that you can use to generate code snippets for making requests to the API that you are testing. There is an amazing list of languages here.

JavaScript and TypeScript
Java
C#
Python
lots more!

To generate a JavaScript code snippet, select JavaScript as the language next to the "Request snippet" text in the bottom of the window. I'm choosing to use the Fetch API for my request. Then, you can click the </> button to generate the code snippet.

The resulting code snippet will look like this.
const options = {method: 'GET'};

fetch('http://localhost:3000/content', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));
From there, you can copy and paste this snippet into your project. Pretty neat!
Generate TypeScript Types
I've becoming a bigger and bigger fan of TypeScript, so I love to have TypeScript types for any data I pull from an external API. Well, this extension can help here as well. In the lower right hand side, there is a "JSON to" section which gives you a list of type definitions you can export to including TypeScript.
To generate your TypeScript type, choose TypeScript from the dropdown and then click the code icon.

For my data, I get this TypeScript definition.
export interface RootObject {
 description: string;
 imageUrl:    string;
 link:        string;
 title:       string;
}
Wrap Up
I love that VS Code extensions add so much functionality without having to download external tools. If you'd like to learn more about the RapidAPI Client extension and specifically how to use environments, secret credentials, and more, check out the full video above.

BRAND NEW VS Code Extension for Testing APIs

Here are the 15 most common mistakes I've seen beginner JavaScript developers make.

<div><p>I've taught JavaScript to hundreds of people in-person and thousands online. During my time teaching, I've seen beginner JavaScript developers make the same mistakes over and over....and over again. Here are the 15 most common beginner JavaScript mistakes I've seen.</p><blockquote><a href="https://join.replit.com/jamesqquick">Find the full source code and examples in this Replit</a>.</blockquote><h2>1. Not Returning From a Function</h2><p>If you've ever called a function and gotten a response of <code>undefined</code>, you've probably already seen this mistake. Functions in JavaScript return a value of <code>undefined</code> by default, which means if you don't explicitly return anything with the <code>return</code> keyword, <code>undefined</code> will be the result.</p><p>So instead of this.</p><pre><code lang="javascript">const getAddedValue = (a, b) =&gt; {
 a + b;
}</code></pre><p>Make sure you actually return the result.</p><pre><code lang="javascript">const getAddedValue = (a, b) =&gt; {
  return a + b;
}</code></pre><h2>2. Loading JavaScript Scripts in HTML Before the DOM Is Loaded</h2><p>This is the only example that is going to touch a bit on how JavaScript interacts with HTML and the DOM. The key in how they interact is that the timing is important. If you want to reference a DOM element in your JavaScript, that DOM element must have already been loaded on the page. Let's look at an example.</p><p>Let's say you have a bit of HTML that also imports a JavaScript file called <code>script.js</code>. Notice the JavaScript file is imported before the <code>h1</code> element with the id of <code>header</code>.</p><pre><code lang="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;title&gt;JavaScript Mistake Demo&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;script src="script.js"&gt;&lt;/script&gt;
 &lt;h1 id="header"&gt;Hello world&lt;/h1&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre><p>Then, in your JavaScript, you want to get a reference to the <code>header</code> element and update its text.</p><pre><code lang="javascript">const header = document.getElementById('header');
header.innerText = "James is cool!";</code></pre><p>In this case, you're going to get an error: <code>Cannot set properties of null (setting 'innerText')</code>. This is because the JavaScript is trying to get a reference to a DOM element that has not been loaded on the page yet.</p><p>To fix this, it's common to import your JavaScript at the bottom of your HTML, after all of the HTML elements have been loaded.</p><pre><code lang="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JavaScript Mistake Demo&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;h1 id="header"&gt;Hello world&lt;/h1&gt;
   &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><p>This way, the JavaScript file is being loaded <strong>after</strong> the <code>header</code> element has already been loaded.</p><p>It's important to note that there are also other options to explore in terms of importing your JavaScript files in your HTML. What we've shown is a basic example targeted at beginners, but there are additional keywords that you can look into for more details.</p><ul><li><a href="https://www.w3schools.com/tags/att_script_async.asp">HTML script async Attribute</a></li><li><a href="https://www.w3schools.com/tags/att_script_defer.asp">HTML script defer Attribute</a></li></ul><h2>3. Reassigning Const Variables</h2><p>This is such a common mistake that it continues to happen to me almost on a daily basis, so don't feel bad if it does to you. As of ES6 (JavaScript version released in 2015), there are two main ways to declare variables: <code>const</code> and <code>let</code>. These two have, for the most part, replaced the usage of <code>var</code> in modern JavaScript.</p><p>The difference between these two is that you <strong>cannot reassign</strong> <code>const</code> variables while you can with <code>let</code>. Here's a piece of sample code.</p><pre><code lang="javascript">const count = 0;
for (let i = 0; i &lt; 10; i++) {
  count = count + i;
}
console.log(count);</code></pre><p>In this case you'll get an error: <code>Assignment to constant variable</code>. If you're going to need to reassign a variable, make sure to use <code>let</code>.</p><pre><code lang="javascript">let count = 0;
for (let i = 0; i &lt; 10; i++) {
  count = count + i;
}
console.log(count);</code></pre><p>For more on const vs let vs var, <a href="https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/">check out this article from freeCodeCamp</a>. </p><h2>4. Misunderstanding Variable Scope</h2><p>Variable scope is a tricky concept for new developers, especially in JavaScript. One common problem I see from learning developers is defining a variable inside of a function and expecting to be able to access that variable outside of the function it is defined in. </p><p>That's a pretty generic problem I see. Let's take a look at a more JavaScript specific example though. This goes back to the usage of <code>const</code> and <code>let</code> vs <code>var</code>. I mentioned that <code>var</code> is a more outdated way of declaring variables, but you will still come across it in documentation and source code. Because of that, it's important to understand how scoping differs with it.</p><p>If you define  a variable using <code>var</code> inside of a for loop, for example, that variable is also accessible after the for loop. Here's a quick example.</p><pre><code lang="javascript">for (let i = 0; i &lt; 10; i++) {
  var count = 5;
}
console.log(count);</code></pre><p>This code will actually work although it's counter-intuitive to me. The value of <code>count</code> is accessible after the for loop it was defined in. However, this does not work for <code>const</code> and <code>let</code> variables. If defined inside of a for loop, they are only accessible inside of that for loop.</p><pre><code lang="javascript">for (let i = 0; i &lt; 10; i++) {
  const count = 5;
}
console.log(count); //error: count is not defined</code></pre><p>For more details, here's another <a href="https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/#:~:text=var%20declarations%20are%20globally%20scoped%20or%20function%20scoped%20while%20let,the%20top%20of%20their%20scope.">great article from freeCodeCamp</a>.</p><h2>5. Poorly Named Variables</h2><p>Poorly named variables make code <strong>one million times more difficult to read and follow</strong>. This is a mistake I've seen every single beginner developer that I've worked with make. Using names like <code>thing1</code>, <code>thing2</code>, and <code>anotherThing</code> give no context as to what the variables are. This makes it  much harder for me to help debug someone's code. Let's take a look at an example.</p><pre><code lang="javascript">const arr = ["James", "Jess", "Lily", "Sevi"];
let str = "";
for(let i = 0; i &lt; arr.length; i++){
  const tmp = arr[i];
  str += tmp[0];
}
console.log(str);</code></pre><p>The variables <code>arr</code>, <code>str</code>, and <code>tmp</code> give no context for what the variables are and what the code is doing. Here's an example that uses naming conventions that add much more context.</p><pre><code lang="javascript">const names = ["James", "Jess", "Lily", "Sevi"];
let retVal = "";
for(let i = 0; i &lt; arr.length; i++){
  const name = arr[i];
  retVal += name[0];
}
console.log(retVal);</code></pre><p>One of the easiest pieces of advice I have is to name arrays as the pluralized version of the type of info they hold. For example, an array of names should be called <code>names</code>. Then, you can reference an individual items inside of that array as <code>name</code>. I commonly see an array named in the singular form, and it's incredibly confusing.</p><h2>6. Too Large of Functions</h2><p>This is a pretty meta mistake, but it's extremely common early on. When developers learn about functions in JavaScript, they often have the tendency to write one function and dump all the code they need into it. However, it's better to start thinking about how to break functions into smaller pieces of code that are more readable, composable, etc. Instead of a code example, here are a few extra links you can read for more.</p><ul><li><a href="https://medium.com/swlh/how-long-should-functions-be-how-do-we-measure-it-cccbdcd8374c">How Long Should Functions Be?</a></li><li><a href="https://softwareengineering.stackexchange.com/questions/133404/what-is-the-ideal-length-of-a-method-for-you">What is the Ideal Length of a Function?</a></li></ul><h2>7. Unnecessary Else Statements</h2><p>What often gets misunderstood is that a <code>return</code> statement inside of a function actually stops the execution of that function. In other words, after you return inside of a function, no other code inside of that function gets run. Because of that, I often see unnecessary else statements. Here's an example.</p><pre><code lang="javascript">const isOdd = (num) =&gt; {
  if(num % 2 === 1) {
    return true
  }else {
    return false;
  }
}</code></pre><p>Because we already have a <code>return</code> in the <code>if</code> condition, the <code>else</code> is unnecessary. We simplify this code by removing the else condition.</p><pre><code lang="javascript">const isOdd = (num) =&gt; {
  if(num % 2 === 1) {
    return true
  }
  return false;
}</code></pre><p>You can even take this one step further and return the evaluated expression directly since <code>num%2 === 1</code> returns a boolean.</p><pre><code lang="javascript">const isOdd = (num) =&gt; {
  return num % 2 === 1;
}</code></pre><h2>8. Not Short-circuiting Loops</h2><p>Short-circuiting is another way to improve your for loops. Let's say write a function where you need to determine whether an array of numbers includes an even number. Here's an example of how you might solve that.</p><pre><code lang="javascript">const hasEvenNumber = (numbersArr) =&gt; {
  let retVal;
  for(let i =0; i&lt; numbersArr.length; i++){
    if(numbersArr[i] % 2 === 0){
      retVal = true;
    }else {
      retVal = false;
    }
  }
  return retVal;
}</code></pre><p>In this case, we are iterating through each number and updating a boolean accordingly based on if the number is even. Unfortunately, there's a problem. Let's say the first number is even, but then the next number is odd. Well, the boolean is updated to true for even, then back to false for the odd number. </p><p>This would give the incorrect answer since you just want to know if the function has at least one even number (it should return true). In this case, after you see the first even number, you have your answer. You don't need to look anymore. This is where short-circuiting comes into play. After you see one even number, return. If you never see one, return <code>false </code>at the end.</p><pre><code lang="javascript">const hasEvenNumber = (numbersArr) =&gt; {
  for(let i =0; i&lt; numbersArr.length; i++){
    if(numbersArr[i] % 2 === 0){
      return true;
    }
  }
  return false;
}</code></pre><p>This way, your logic is cleaner and you're avoiding unnecessarily iterating through additional items in the array.</p><h2>9. Double vs Triple Equals</h2><p>This is a huge topic of confusion in JavaScript. To start, it's important to know that the double equals <strong>compares two values without taking into account their data types</strong>. On the flip side, the triple equals <strong>compares two values while taking into account their data types</strong>.</p><p>Since the double equals doesn't take into account the data types of the two values, JavaScript has to have some way to compare them. To do this, JavaScript secretly will cast (convert one data type to another) each value accordingly so they can be compared. This means that a number and string could be considered to be double equal but not triple equal since they are different data types.</p><pre><code lang="javascript">const jamesAge = "31";
const jessAge = 31;

console.log(jamesAge == jessAge); //equal
console.log(jamesAge === jessAge); //not equal</code></pre><p>General piece of advice: <strong>use triple equals by default</strong> unless you have a specific reason to use double equals. It's typically safer and helps avoids unintended results. For more details on how these equalities work, check out the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">MDN docs</a>.</p><h2>10. Incorrect Object vs Primitive Comparisons</h2><p>Another similar problem that I see is trying to compare primitives and objects for equality. There are seven primitive values in JavaScript.</p><ul><li>number</li><li>string</li><li>bigint</li><li>boolean</li><li>undefined</li><li>symbol</li><li>null</li></ul><p>Everything else is represented as an object, and objects and primitives are referenced differently. In JavaScript, primitives are referenced <strong>directly by their value</strong>. On the other hand, objects more generically <strong>reference a space in memory where the value(s) is stored</strong>. This leads to some confusion when objects and primitives. Consider this example.</p><pre><code lang="javascript">const name1 = "James";
const name2 = "James";
console.log(name1 === name2);</code></pre><p>Since these two variables are primitives with the same value they are considered equal, but what if we compare two objects with the same name property like so?</p><pre><code lang="javascript">const person1 = {
  name:"James"
}
const person2 = {
  name:"James"
}
console.log(person1 === person2);</code></pre><p>In this case, these two objects are <strong>not considered equal</strong>. This is because the two variables are actually references to different "spaces in memory". Although they look the same, they aren't considered to be equal because of this. If you wanted to compare their equality more appropriately, you could compare their <code>name</code> properties directly.</p><pre><code lang="javascript">const person1 = {
  name:"James"
}
const person2 = {
  name:"James"
}
console.log(person1.name === person2.name);</code></pre><h2>11. Cannot Read Property of Undefined</h2><p>As I'm writing this, I'm realizing that I didn't necessarily order this in terms of frequency. If I did, this one would rank much higher 🤣.</p><p>Anyways, one thing that beginner (and experienced) developers forget to do is validate input parameters to a function. Just because you expect to receive an object, doesn't mean you actually will. Let's look at this function that prints the name property of an object.</p><pre><code lang="javascript">const printNamedGreeting = (person) =&gt; {
  console.log(person.name)
}</code></pre><p>Seems simple enough, but what happens if someone calls this function and doesn't pass anything? Well, you'll get a <code>cannot read property name of undefined</code> error. So, how do you improve on this code?</p><p>Well, you'll need to validate that the input you receive matches your expectations. In this case, one simple (although not complete) solution would be to check that the input parameter is not "falsy". </p><pre><code lang="javascript">const printNamedGreeting = (person) =&gt; {
  if(!person){
    return console.log("Invalid person object")
  }
  console.log(person.name)
}</code></pre><p>In this case, if the <code>person</code> parameter is "falsy", we log out an error. Otherwise, we continue to log out the <code>name</code> property.</p><p>Keep in mind, this is a quick and simple validation check, but in a real application you'd probably want something more in-depth. You'd want to validate that the input is actually an object (not a string for example) and that it also has a name property. </p><p>Lastly, before you say it, yes, you could use TypeScript for this...I know! 😃</p><h2>12. Mutation with Arrays</h2><p>Mutation is an interesting concept in JavaScript. In general, mutation occurs when you call a function on a variable that then changes the variable itself in some way. For example, when you call the <code>sort</code> function on an array, the array itself is mutated. However, if you call the <code>map</code> function on an array, the original array remains intact. It is not mutated.</p><pre><code lang="javascript">const names = ["Jess", "James",  "Sevi", "Lily"];
const copiedNames = [...names]; 
const sortedNames = names.sort();
console.log(names); //["James", "Jess", "Lily", "Sevi"]
console.log(copiedNames); //["Jess", "James",  "Sevi", "Lily"]
console.log(sortedNames); //["James", "Jess", "Lily", "Sevi"]</code></pre><p>In this example, calling <code>names.sort()</code> will mutate the original <code>names</code> array, meaning the <code>names</code> and <code>sortedNames</code> arrays will look the same. However, the <code>copiedNames</code> array is unaffected since it was a true copy of the original array.</p><p>However, if you were to call the <code>map()</code> function on the array, the original <code>names</code> array is unaffected.</p><pre><code lang="javascript">const firstLettersArray = names.map( name =&gt; name[0]);</code></pre><p>The main lesson here is to understand how the functions that you call mutate or not the data you're working with. This should be listed in the documentation for whatever function you're calling.</p><h2>13. Not Understanding Asynchronous Code</h2><p>The asynchronous nature of JavaScript is one of the most difficult things to grasp for beginner developers. This isn't the place to go into a full tutorial of asynchronous JavaScript, so I'll leave you with the most common beginner example there is to introduce the topic. In what order will these log statements print out?</p><pre><code lang="javascript">console.log("1");
setTimeout(() =&gt; {
  console.log("2")
}, 0)
console.log("3");</code></pre><p>The answer might surprise if you're new to this. W3 Schools is always a favorite reference for me, so here's their <a href="https://www.w3schools.com/js/js_asynchronous.asp">getting start doc for asynchronous </a>JavaScript.</p><h2>14. Not Handling Errors</h2><p>The problem with lots of beginner tutorials is that they rarely cover how to handle errors in JavaScript. You only see the best case scenarios for code samples, and not the "what if something goes wrong" code. It's understandable because there's only so much you can cover in a beginner tutorial. At some point, though, it's important to spend some time learning how to appropriately handle errors. </p><p>Again, this might not be the spot for an in-depth tutorial on error handling, so I'll leave you with one piece of advice. As you're writing code, ask yourself "<strong>what if something goes wrong here</strong>". As long as you keep that thought in your head as you're learning, you'll be in a good spot!</p><h2>15.  Not Formatting Code</h2><p>This is another meta example, but it makes such a big difference. Similar to the variable naming section above, <strong>poorly formatted code is incredibly difficult to read</strong>. Developers are used to reading code in a standardized and formatted way. Because of that, it becomes seemingly  impossible to read code that isn't formatted.</p><p>I've experienced this over and over again in teaching. To answer what seems like an easy question, I find myself backtracking through the code to try and decipher what is going on. The lesson here is always spend a bit of time and energy on formatting your code correctly with indentation, spacing, etc. This will make it much easier for you to read as well as anyone else that might read your code.</p><p></p></div>

I've taught JavaScript to hundreds of people in-person and thousands online. During my time teaching, I've seen beginner JavaScript developers make the same mistakes over and over....and over again. Here are the 15 most common beginner JavaScript mistakes I've seen.
Find the full source code and examples in this Replit.
1. Not Returning From a Function
If you've ever called a function and gotten a response of undefined, you've probably already seen this mistake. Functions in JavaScript return a value of undefined by default, which means if you don't explicitly return anything with the return keyword, undefined will be the result.
So instead of this.
const getAddedValue = (a, b) => {
 a + b;
}
Make sure you actually return the result.
const getAddedValue = (a, b) => {
  return a + b;
}
2. Loading JavaScript Scripts in HTML Before the DOM Is Loaded
This is the only example that is going to touch a bit on how JavaScript interacts with HTML and the DOM. The key in how they interact is that the timing is important. If you want to reference a DOM element in your JavaScript, that DOM element must have already been loaded on the page. Let's look at an example.
Let's say you have a bit of HTML that also imports a JavaScript file called script.js. Notice the JavaScript file is imported before the h1 element with the id of header.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JavaScript Mistake Demo</title>
</head>
<body>
 <script src="script.js"></script>
 <h1 id="header">Hello world</h1>
</body>

</html>
Then, in your JavaScript, you want to get a reference to the header element and update its text.
const header = document.getElementById('header');
header.innerText = "James is cool!";
In this case, you're going to get an error: Cannot set properties of null (setting 'innerText'). This is because the JavaScript is trying to get a reference to a DOM element that has not been loaded on the page yet.
To fix this, it's common to import your JavaScript at the bottom of your HTML, after all of the HTML elements have been loaded.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JavaScript Mistake Demo</title>
  </head>
  <body>
   <h1 id="header">Hello world</h1>
   <script src="script.js"></script>
  </body>
</html>
This way, the JavaScript file is being loaded after the header element has already been loaded.
It's important to note that there are also other options to explore in terms of importing your JavaScript files in your HTML. What we've shown is a basic example targeted at beginners, but there are additional keywords that you can look into for more details.

HTML script async Attribute
HTML script defer Attribute

3. Reassigning Const Variables
This is such a common mistake that it continues to happen to me almost on a daily basis, so don't feel bad if it does to you. As of ES6 (JavaScript version released in 2015), there are two main ways to declare variables: const and let. These two have, for the most part, replaced the usage of var in modern JavaScript.
The difference between these two is that you cannot reassign const variables while you can with let. Here's a piece of sample code.
const count = 0;
for (let i = 0; i < 10; i++) {
  count = count + i;
}
console.log(count);
In this case you'll get an error: Assignment to constant variable. If you're going to need to reassign a variable, make sure to use let.
let count = 0;
for (let i = 0; i < 10; i++) {
  count = count + i;
}
console.log(count);
For more on const vs let vs var, check out this article from freeCodeCamp. 
4. Misunderstanding Variable Scope
Variable scope is a tricky concept for new developers, especially in JavaScript. One common problem I see from learning developers is defining a variable inside of a function and expecting to be able to access that variable outside of the function it is defined in. 
That's a pretty generic problem I see. Let's take a look at a more JavaScript specific example though. This goes back to the usage of const and let vs var. I mentioned that var is a more outdated way of declaring variables, but you will still come across it in documentation and source code. Because of that, it's important to understand how scoping differs with it.
If you define  a variable using var inside of a for loop, for example, that variable is also accessible after the for loop. Here's a quick example.
for (let i = 0; i < 10; i++) {
  var count = 5;
}
console.log(count);
This code will actually work although it's counter-intuitive to me. The value of count is accessible after the for loop it was defined in. However, this does not work for const and let variables. If defined inside of a for loop, they are only accessible inside of that for loop.
for (let i = 0; i < 10; i++) {
  const count = 5;
}
console.log(count); //error: count is not defined
For more details, here's another great article from freeCodeCamp.
5. Poorly Named Variables
Poorly named variables make code one million times more difficult to read and follow. This is a mistake I've seen every single beginner developer that I've worked with make. Using names like thing1, thing2, and anotherThing give no context as to what the variables are. This makes it  much harder for me to help debug someone's code. Let's take a look at an example.
const arr = ["James", "Jess", "Lily", "Sevi"];
let str = "";
for(let i = 0; i < arr.length; i++){
  const tmp = arr[i];
  str += tmp[0];
}
console.log(str);
The variables arr, str, and tmp give no context for what the variables are and what the code is doing. Here's an example that uses naming conventions that add much more context.
const names = ["James", "Jess", "Lily", "Sevi"];
let retVal = "";
for(let i = 0; i < arr.length; i++){
  const name = arr[i];
  retVal += name[0];
}
console.log(retVal);
One of the easiest pieces of advice I have is to name arrays as the pluralized version of the type of info they hold. For example, an array of names should be called names. Then, you can reference an individual items inside of that array as name. I commonly see an array named in the singular form, and it's incredibly confusing.
6. Too Large of Functions
This is a pretty meta mistake, but it's extremely common early on. When developers learn about functions in JavaScript, they often have the tendency to write one function and dump all the code they need into it. However, it's better to start thinking about how to break functions into smaller pieces of code that are more readable, composable, etc. Instead of a code example, here are a few extra links you can read for more.

How Long Should Functions Be?
What is the Ideal Length of a Function?

7. Unnecessary Else Statements
What often gets misunderstood is that a return statement inside of a function actually stops the execution of that function. In other words, after you return inside of a function, no other code inside of that function gets run. Because of that, I often see unnecessary else statements. Here's an example.
const isOdd = (num) => {
  if(num % 2 === 1) {
    return true
  }else {
    return false;
  }
}
Because we already have a return in the if condition, the else is unnecessary. We simplify this code by removing the else condition.
const isOdd = (num) => {
  if(num % 2 === 1) {
    return true
  }
  return false;
}
You can even take this one step further and return the evaluated expression directly since num%2 === 1 returns a boolean.
const isOdd = (num) => {
  return num % 2 === 1;
}
8. Not Short-circuiting Loops
Short-circuiting is another way to improve your for loops. Let's say write a function where you need to determine whether an array of numbers includes an even number. Here's an example of how you might solve that.
const hasEvenNumber = (numbersArr) => {
  let retVal;
  for(let i =0; i< numbersArr.length; i++){
    if(numbersArr[i] % 2 === 0){
      retVal = true;
    }else {
      retVal = false;
    }
  }
  return retVal;
}
In this case, we are iterating through each number and updating a boolean accordingly based on if the number is even. Unfortunately, there's a problem. Let's say the first number is even, but then the next number is odd. Well, the boolean is updated to true for even, then back to false for the odd number. 
This would give the incorrect answer since you just want to know if the function has at least one even number (it should return true). In this case, after you see the first even number, you have your answer. You don't need to look anymore. This is where short-circuiting comes into play. After you see one even number, return. If you never see one, return false at the end.
const hasEvenNumber = (numbersArr) => {
  for(let i =0; i< numbersArr.length; i++){
    if(numbersArr[i] % 2 === 0){
      return true;
    }
  }
  return false;
}
This way, your logic is cleaner and you're avoiding unnecessarily iterating through additional items in the array.
9. Double vs Triple Equals
This is a huge topic of confusion in JavaScript. To start, it's important to know that the double equals compares two values without taking into account their data types. On the flip side, the triple equals compares two values while taking into account their data types.
Since the double equals doesn't take into account the data types of the two values, JavaScript has to have some way to compare them. To do this, JavaScript secretly will cast (convert one data type to another) each value accordingly so they can be compared. This means that a number and string could be considered to be double equal but not triple equal since they are different data types.
const jamesAge = "31";
const jessAge = 31;

console.log(jamesAge == jessAge); //equal
console.log(jamesAge === jessAge); //not equal
General piece of advice: use triple equals by default unless you have a specific reason to use double equals. It's typically safer and helps avoids unintended results. For more details on how these equalities work, check out the MDN docs.
10. Incorrect Object vs Primitive Comparisons
Another similar problem that I see is trying to compare primitives and objects for equality. There are seven primitive values in JavaScript.

number
string
bigint
boolean
undefined
symbol
null

Everything else is represented as an object, and objects and primitives are referenced differently. In JavaScript, primitives are referenced directly by their value. On the other hand, objects more generically reference a space in memory where the value(s) is stored. This leads to some confusion when objects and primitives. Consider this example.
const name1 = "James";
const name2 = "James";
console.log(name1 === name2);
Since these two variables are primitives with the same value they are considered equal, but what if we compare two objects with the same name property like so?
const person1 = {
  name:"James"
}
const person2 = {
  name:"James"
}
console.log(person1 === person2);
In this case, these two objects are not considered equal. This is because the two variables are actually references to different "spaces in memory". Although they look the same, they aren't considered to be equal because of this. If you wanted to compare their equality more appropriately, you could compare their name properties directly.
const person1 = {
  name:"James"
}
const person2 = {
  name:"James"
}
console.log(person1.name === person2.name);
11. Cannot Read Property of Undefined
As I'm writing this, I'm realizing that I didn't necessarily order this in terms of frequency. If I did, this one would rank much higher 🤣.
Anyways, one thing that beginner (and experienced) developers forget to do is validate input parameters to a function. Just because you expect to receive an object, doesn't mean you actually will. Let's look at this function that prints the name property of an object.
const printNamedGreeting = (person) => {
  console.log(person.name)
}
Seems simple enough, but what happens if someone calls this function and doesn't pass anything? Well, you'll get a cannot read property name of undefined error. So, how do you improve on this code?
Well, you'll need to validate that the input you receive matches your expectations. In this case, one simple (although not complete) solution would be to check that the input parameter is not "falsy". 
const printNamedGreeting = (person) => {
  if(!person){
    return console.log("Invalid person object")
  }
  console.log(person.name)
}
In this case, if the person parameter is "falsy", we log out an error. Otherwise, we continue to log out the name property.
Keep in mind, this is a quick and simple validation check, but in a real application you'd probably want something more in-depth. You'd want to validate that the input is actually an object (not a string for example) and that it also has a name property. 
Lastly, before you say it, yes, you could use TypeScript for this...I know! 😃
12. Mutation with Arrays
Mutation is an interesting concept in JavaScript. In general, mutation occurs when you call a function on a variable that then changes the variable itself in some way. For example, when you call the sort function on an array, the array itself is mutated. However, if you call the map function on an array, the original array remains intact. It is not mutated.
const names = ["Jess", "James",  "Sevi", "Lily"];
const copiedNames = [...names]; 
const sortedNames = names.sort();
console.log(names); //["James", "Jess", "Lily", "Sevi"]
console.log(copiedNames); //["Jess", "James",  "Sevi", "Lily"]
console.log(sortedNames); //["James", "Jess", "Lily", "Sevi"]
In this example, calling names.sort() will mutate the original names array, meaning the names and sortedNames arrays will look the same. However, the copiedNames array is unaffected since it was a true copy of the original array.
However, if you were to call the map() function on the array, the original names array is unaffected.
const firstLettersArray = names.map( name => name[0]);
The main lesson here is to understand how the functions that you call mutate or not the data you're working with. This should be listed in the documentation for whatever function you're calling.
13. Not Understanding Asynchronous Code
The asynchronous nature of JavaScript is one of the most difficult things to grasp for beginner developers. This isn't the place to go into a full tutorial of asynchronous JavaScript, so I'll leave you with the most common beginner example there is to introduce the topic. In what order will these log statements print out?
console.log("1");
setTimeout(() => {
  console.log("2")
}, 0)
console.log("3");
The answer might surprise if you're new to this. W3 Schools is always a favorite reference for me, so here's their getting start doc for asynchronous JavaScript.
14. Not Handling Errors
The problem with lots of beginner tutorials is that they rarely cover how to handle errors in JavaScript. You only see the best case scenarios for code samples, and not the "what if something goes wrong" code. It's understandable because there's only so much you can cover in a beginner tutorial. At some point, though, it's important to spend some time learning how to appropriately handle errors. 
Again, this might not be the spot for an in-depth tutorial on error handling, so I'll leave you with one piece of advice. As you're writing code, ask yourself "what if something goes wrong here". As long as you keep that thought in your head as you're learning, you'll be in a good spot!
15.  Not Formatting Code
This is another meta example, but it makes such a big difference. Similar to the variable naming section above, poorly formatted code is incredibly difficult to read. Developers are used to reading code in a standardized and formatted way. Because of that, it becomes seemingly  impossible to read code that isn't formatted.
I've experienced this over and over again in teaching. To answer what seems like an easy question, I find myself backtracking through the code to try and decipher what is going on. The lesson here is always spend a bit of time and energy on formatting your code correctly with indentation, spacing, etc. This will make it much easier for you to read as well as anyone else that might read your code.

15 Common Beginner JavaScript Mistakes

<div><p>Websites are always better with custom domains. Let's learn how to set up a custom domain with your Netlify app in just a few minutes.</p><h2>Prerequisites</h2><p>There are two prerequisites here.</p><ul><li>have an already purchased domain (I prefer to use <a href="https://www.namecheap.com/">Namecheap</a>)</li><li>have a site already deployed to Netlify (I'll be using my <a href="https://www.devyearbook.io/">DevYearbook</a> project)</li></ul><h2>Add the Domain in Netlify</h2><p>Inside of the Netlify dashboard, navigate to your domain settings and click "Add custom domain"</p><img src="https://cdn.sanity.io/images/rx426fbd/production/993916405a1c6dee492518757fc8447df8d02da5-1104x608.png"><p>Enter the name of your domain and click "Verify".</p><img src="https://cdn.sanity.io/images/rx426fbd/production/5a5b28d8841c80c2c42d4239207475f999cc60f7-1656x660.png"><p>Then, acknowledge that you own the domain and click "Add domain".</p><img src="https://cdn.sanity.io/images/rx426fbd/production/8fc14a65098c3f2018665e8d45222288cd2ab47b-1437x787.png"><p>After that has finished, click on the options menu next to your new domain and choose "Set up Netlify DNS".</p><img src="https://cdn.sanity.io/images/rx426fbd/production/d9a967466d6b5c26208990f548cc17faa897dc8e-1260x627.png"><p>Follow the steps here by choosing "Verify", then "Add Domain", and "Continue". Then when you get to the screen about domain name servers, copy those name servers.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/6e2a9a68f760eddf1c48a7a14ac4642ced305a8f-1181x851.png"><p>Then, in the dashboard where you bought your domain (mine is Namecheap), set the DNS to custom DNS and add the DNS names from Netlify.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/233d5c2dda8945d68472aa2aad19d7899a1b54d3-1339x295.png"><p>After that, you should be good to go. Although you may need to wait a few minutes for the settings to propogate, you should eventually see the "Netlify DNS" tag associated with your domain name.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/d591db479f109939a0a00bccb9344396e1afef42-1254x639.png"></div>

Websites are always better with custom domains. Let's learn how to set up a custom domain with your Netlify app in just a few minutes.
Prerequisites
There are two prerequisites here.

have an already purchased domain (I prefer to use Namecheap)
have a site already deployed to Netlify (I'll be using my DevYearbook project)

Add the Domain in Netlify
Inside of the Netlify dashboard, navigate to your domain settings and click "Add custom domain"

Enter the name of your domain and click "Verify".

Then, acknowledge that you own the domain and click "Add domain".

After that has finished, click on the options menu next to your new domain and choose "Set up Netlify DNS".

Follow the steps here by choosing "Verify", then "Add Domain", and "Continue". Then when you get to the screen about domain name servers, copy those name servers.

Then, in the dashboard where you bought your domain (mine is Namecheap), set the DNS to custom DNS and add the DNS names from Netlify.

After that, you should be good to go. Although you may need to wait a few minutes for the settings to propogate, you should eventually see the "Netlify DNS" tag associated with your domain name.

Setup a Custom Domain with Netlify

Let's look at the top 5 struggles I have as a Developer Advocate.

<div><p>Let me start by saying that I've been a Developer Advocate for about 6 years of my career, and I absolutely LOVE my job. If you've followed any bit of my content and career, that hopefully doesn't come as a surprise. In fact, I think Developer Advocate positions are often looked at as one of those "pie in the sky" type roles that people hype up in their minds. Here's a picture of me speaking at a conference, one of my favorite things to do in the world.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/7e611f27080f6df968a0536a226dea61ba7ef660-1756x1324.png"><p>As I said, I love my job, but just like with every other position, there are some difficulties and struggles in the role. Let's look at the top 5 struggles I have as a Developer Advocate.</p><h2>1. Gauging Personal Success</h2><p>This list is not in any particular order, but this one definitely rings most true for me. Even though I have several years of experience in content creation and Developer Advocacy, I still find myself frequently asking: </p><blockquote>Am I doing a good job?</blockquote><p>In Developer Advocate roles, this is a hard one to answer. It's just not easy to translate talks given, videos created, etc. to tangible metrics that correlate with impact on the company. </p><p>Let's start with an example. Let's say my company sponsors a conference, and I spend all day at a booth. During that day, I have really engaging conversations with 50 different people. How do I then translate that to impact?</p><img src="https://cdn.sanity.io/images/rx426fbd/production/f9dad0dd03ea1ec95192b799583a192031477fec-2282x1596.png"><p>The easy answer is "the more people we talk to, the more exposure we get". This is absolutely true. BUT there's often not a direct way to further track the impact of those conversations. There's no guarantee that any one of those conversations is going to lead to a sale for the company, at least not directly. </p><p>See, this is one of the things that you just have to accept with Developer Advocacy. You often won't see the direct correlation between your activities and traditional company goals like signups, dollars earned, etc. To help with that, though, 've changed my perspective on "tracking metrics".</p><p>Instead of looking directly at those traditional company goals, I want to focus more on the types of activities that I can do that <strong>I think</strong> will influence those goals. For example, instead of targeting signup numbers directly, I'd rather spend time and energy investing in activities that have the potential to move the needle around signups. That's where I can more specifically track my impact. Here's what that looks like.</p><blockquote>"This quarter I want to drive 1,000 signups for the platform."</blockquote><p>Becomes...</p><blockquote>"This quarter I want to produce 4 videos and 4 blog posts because those are 2 activities that I think will lead us to 1,000 signups."</blockquote><p>This may seem subtle, but the tweak here has a significant impact. Even if my content doesn't drive a significant chunk of signups, I still have a goal with a tangible number that I can gauge: the number of pieces of content that I produce.</p><p>All in all, measuring impact and gauging value is a constant struggle. I think most teams and individuals are continuing to figure out how to do it.</p><h2>2. Where Do We Fit In?</h2><p>This is a question I've had since starting as a Technical Evangelist at Microsoft almost 10 years ago. Then, the Evangelism team was part of the Sales organization. At both <a href="https://auth0.com/">Auth0</a> and at <a href="https://planetscale.com/">PlanetScale</a>, Developer Advocacy has been a part of the Marketing organization. Which one is right?</p><p>Well, that has become a tough question to answer, because honestly, I've never felt like we fully fit in. I remember going to a massive sales conference at Microsoft early on in my career (my first week actually) and hearing all of these words that felt unrelated to me and my job: "customers", "revenue", etc. In Developer Advocacy, you almost never talk about customers. Instead, you talk about developers. You also rarely talk directly about influencing revenue (see section above). Those concepts just feel a bit foreign when you're focused on driving genuine engagement with developers in the community.</p><p>I've had similar feelings being part of a Marketing organization. In addition to talking about customers and revenue, there's also a slew of new acronyms like MQLs (marketing qualified leads), B2B (business to business), etc. I'll be honest, I've sat on my fair share of marketing calls and felt completely lost 🤷‍♂️ </p><blockquote>Want to get a different perspective on where Developer Relations fits in? <a href="https://twitter.com/KimMaida">Kim Maida</a> (she's amazing btw) wrote a wonderful article on the topic you should read: <a href="https://dev.to/kimmaida/which-department-does-devrel-belong-in-3om">Which Department Does Developer Belong In</a>.</blockquote><p>Having the hyper focus on developers and community means we may not directly align with traditional sales or marketing goals. Often the verbiage is totally different, but engaging with other sales and marketing people has always led to a learning experience for me. My advice is to embrace it wherever your team lands and learn as much as you can.</p><h2>3. Sacrificing Technical Depth</h2><p>The best thing I ever did in my career, which has mostly been in Developer Relations, was to take a few years in the middle to work as a fulltime Software Developer. Remember, I started my career as a Technical Evangelist at Microsoft, so immediately, I was expected to give talks and demos of our products. Unfortunately, what that led to was working on relatively small demo applications and not on production software. There's a big difference...trust me!</p><p>That fulltime experience working on production code has given me a perspective as a Developer Advocate that I never would have gotten had I not made the switch. I can now have much more technical conversations with developers based on my first-hand experiences. That said, as a Developer Advocate, you rarely end up working on production software. You may have opportunities here and there, but for the most part, this would not be a consistent aspect of your job.</p><blockquote>Writing code is a muscle that needs to be exercised to maintain.</blockquote><p>As a Developer Advocate, you're going to lose some of that technical knowledge the farther and longer removed you are. Don't get me wrong, I still write a decent amount of code, but again, it's usually for demo apps. Again, there's a big difference between demos and production software. </p><p>The flip side of this is that by working on different products, you also have the opportunity to add to your technical breath of knowledge. For example, I didn't know anything about Authentication before working at Auth0, and I knew very little about databases before joining PlanetScale. I've used both of these opportunities to build out areas of knowledge that I didn't have before.</p><h2>4. Juggling Various Reponsibilities</h2><p>As a Developer Advocate, you have the potential to become many things: a speaker, a video creator, a writer, a documentationist (that's a word, right?), a designer, a live streamer, and so much more. There are so many different complimentary skillsets and reponsibilities at play that it can be extremely difficult to juggle. </p><p>This is especially true at younger companies where they are looking for one person to fill a lot of gaps (see list above). At bigger companies, it's probably easier to specialize in one area, but it's still a lot. So, how do you juggle all of the potential responsibilites?</p><p>This is honestly one of my constant struggles in my roles as a Developer Advocate and as a solo content creator. I want to do and learn more than I actually have time for. There are never enough hours in the day. One thing I'm trying to do better at, though, is prioritizing my backlog of potential activities on a regular basis. I've also been trying to be intentional with my time by dedicing time to certain activities. I like to think I've made progress, but I haven't followed my time boxes as much as I should 🤷‍♂️</p><h2>5. Traveling ✈️</h2><p>From an outsider's perspective, I think Developer Advocate roles are really glamorous. In theory, you get to travel across the country and maybe the world to give talks. What you may not realize though is that <strong>traveling is ehxausting</strong>.</p><p>No matter how comfortable and nice a hotel room is, it's never the same as being in your own house and bed. The same is especially true for airplanes. Trust me, it's not fun sitting on cramped planes especially when you face delays, cancellations, etc.</p><blockquote>I am not very productive when I travel.</blockquote><p>More important than the comfort level, though, is the impact that traveling has on my productivity. Historically, I don't get much actual work done on a plane, train, etc. I try to keep travel situations as stress free as possible which means I often tune out the world and listen to music or watch Netflix. It's basically my coping mechcanism 🥰</p><p>When you think about giving a 30 minute talk at a conference, it seems like a relatively low investment from a traveling perspective. However, most conferences are more than one day long and that's not even factoring in the day before and after for the travel itself. That means a 30-minute talk might wipe out almost an entire weeks's worth of productivity. That's a big challenge for me.</p><p>I should also add that your amount of travel is typically a personal preference that you get to influence. I've worked with people that want to travel constantly and some that only want to travel a few times a year. I'm sort of in the middle. I expect to travel about once a month and things are ramping up quick in a semi post-COVID world. Just know that, as a Developer Advocate, you should have control over the amount of travel you do and where you go.</p><p>The last thing I'll add is that for every trip I do take, I try to take advantage of it. I love exploring new places, and I especially love doing this with my wife, Jess. In a recent trip to London for a conference talk, my wife joined me, so we left a few days early and took a vacation to Paris 🥰 Not ba huh?</p><img src="https://cdn.sanity.io/images/rx426fbd/production/ca79e9398cf7c3d023b99b0606778521accf4d34-960x1280.jpg"><h2>Final Thoughts</h2><p>Again, I looove my role as a Developer Advocate, but I do think it's important to call out some of the struggles in the role. Just like everything else, there are ups and downs, so I wanted to give the community some perspectives to think about. If you have any additional thoughts or questions, <a href="https://twitter.com/jamesqquick">feel free to share with me on Twitter</a>.</p><p></p><p></p><p></p></div>

Let me start by saying that I've been a Developer Advocate for about 6 years of my career, and I absolutely LOVE my job. If you've followed any bit of my content and career, that hopefully doesn't come as a surprise. In fact, I think Developer Advocate positions are often looked at as one of those "pie in the sky" type roles that people hype up in their minds. Here's a picture of me speaking at a conference, one of my favorite things to do in the world.

As I said, I love my job, but just like with every other position, there are some difficulties and struggles in the role. Let's look at the top 5 struggles I have as a Developer Advocate.
1. Gauging Personal Success
This list is not in any particular order, but this one definitely rings most true for me. Even though I have several years of experience in content creation and Developer Advocacy, I still find myself frequently asking: 
Am I doing a good job?
In Developer Advocate roles, this is a hard one to answer. It's just not easy to translate talks given, videos created, etc. to tangible metrics that correlate with impact on the company. 
Let's start with an example. Let's say my company sponsors a conference, and I spend all day at a booth. During that day, I have really engaging conversations with 50 different people. How do I then translate that to impact?

The easy answer is "the more people we talk to, the more exposure we get". This is absolutely true. BUT there's often not a direct way to further track the impact of those conversations. There's no guarantee that any one of those conversations is going to lead to a sale for the company, at least not directly. 
See, this is one of the things that you just have to accept with Developer Advocacy. You often won't see the direct correlation between your activities and traditional company goals like signups, dollars earned, etc. To help with that, though, 've changed my perspective on "tracking metrics".
Instead of looking directly at those traditional company goals, I want to focus more on the types of activities that I can do that I think will influence those goals. For example, instead of targeting signup numbers directly, I'd rather spend time and energy investing in activities that have the potential to move the needle around signups. That's where I can more specifically track my impact. Here's what that looks like.
"This quarter I want to drive 1,000 signups for the platform."
Becomes...
"This quarter I want to produce 4 videos and 4 blog posts because those are 2 activities that I think will lead us to 1,000 signups."
This may seem subtle, but the tweak here has a significant impact. Even if my content doesn't drive a significant chunk of signups, I still have a goal with a tangible number that I can gauge: the number of pieces of content that I produce.
All in all, measuring impact and gauging value is a constant struggle. I think most teams and individuals are continuing to figure out how to do it.
2. Where Do We Fit In?
This is a question I've had since starting as a Technical Evangelist at Microsoft almost 10 years ago. Then, the Evangelism team was part of the Sales organization. At both Auth0 and at PlanetScale, Developer Advocacy has been a part of the Marketing organization. Which one is right?
Well, that has become a tough question to answer, because honestly, I've never felt like we fully fit in. I remember going to a massive sales conference at Microsoft early on in my career (my first week actually) and hearing all of these words that felt unrelated to me and my job: "customers", "revenue", etc. In Developer Advocacy, you almost never talk about customers. Instead, you talk about developers. You also rarely talk directly about influencing revenue (see section above). Those concepts just feel a bit foreign when you're focused on driving genuine engagement with developers in the community.
I've had similar feelings being part of a Marketing organization. In addition to talking about customers and revenue, there's also a slew of new acronyms like MQLs (marketing qualified leads), B2B (business to business), etc. I'll be honest, I've sat on my fair share of marketing calls and felt completely lost 🤷‍♂️ 
Want to get a different perspective on where Developer Relations fits in? Kim Maida (she's amazing btw) wrote a wonderful article on the topic you should read: Which Department Does Developer Belong In.
Having the hyper focus on developers and community means we may not directly align with traditional sales or marketing goals. Often the verbiage is totally different, but engaging with other sales and marketing people has always led to a learning experience for me. My advice is to embrace it wherever your team lands and learn as much as you can.
3. Sacrificing Technical Depth
The best thing I ever did in my career, which has mostly been in Developer Relations, was to take a few years in the middle to work as a fulltime Software Developer. Remember, I started my career as a Technical Evangelist at Microsoft, so immediately, I was expected to give talks and demos of our products. Unfortunately, what that led to was working on relatively small demo applications and not on production software. There's a big difference...trust me!
That fulltime experience working on production code has given me a perspective as a Developer Advocate that I never would have gotten had I not made the switch. I can now have much more technical conversations with developers based on my first-hand experiences. That said, as a Developer Advocate, you rarely end up working on production software. You may have opportunities here and there, but for the most part, this would not be a consistent aspect of your job.
Writing code is a muscle that needs to be exercised to maintain.
As a Developer Advocate, you're going to lose some of that technical knowledge the farther and longer removed you are. Don't get me wrong, I still write a decent amount of code, but again, it's usually for demo apps. Again, there's a big difference between demos and production software. 
The flip side of this is that by working on different products, you also have the opportunity to add to your technical breath of knowledge. For example, I didn't know anything about Authentication before working at Auth0, and I knew very little about databases before joining PlanetScale. I've used both of these opportunities to build out areas of knowledge that I didn't have before.
4. Juggling Various Reponsibilities
As a Developer Advocate, you have the potential to become many things: a speaker, a video creator, a writer, a documentationist (that's a word, right?), a designer, a live streamer, and so much more. There are so many different complimentary skillsets and reponsibilities at play that it can be extremely difficult to juggle. 
This is especially true at younger companies where they are looking for one person to fill a lot of gaps (see list above). At bigger companies, it's probably easier to specialize in one area, but it's still a lot. So, how do you juggle all of the potential responsibilites?
This is honestly one of my constant struggles in my roles as a Developer Advocate and as a solo content creator. I want to do and learn more than I actually have time for. There are never enough hours in the day. One thing I'm trying to do better at, though, is prioritizing my backlog of potential activities on a regular basis. I've also been trying to be intentional with my time by dedicing time to certain activities. I like to think I've made progress, but I haven't followed my time boxes as much as I should 🤷‍♂️
5. Traveling ✈️
From an outsider's perspective, I think Developer Advocate roles are really glamorous. In theory, you get to travel across the country and maybe the world to give talks. What you may not realize though is that traveling is ehxausting.
No matter how comfortable and nice a hotel room is, it's never the same as being in your own house and bed. The same is especially true for airplanes. Trust me, it's not fun sitting on cramped planes especially when you face delays, cancellations, etc.
I am not very productive when I travel.
More important than the comfort level, though, is the impact that traveling has on my productivity. Historically, I don't get much actual work done on a plane, train, etc. I try to keep travel situations as stress free as possible which means I often tune out the world and listen to music or watch Netflix. It's basically my coping mechcanism 🥰
When you think about giving a 30 minute talk at a conference, it seems like a relatively low investment from a traveling perspective. However, most conferences are more than one day long and that's not even factoring in the day before and after for the travel itself. That means a 30-minute talk might wipe out almost an entire weeks's worth of productivity. That's a big challenge for me.
I should also add that your amount of travel is typically a personal preference that you get to influence. I've worked with people that want to travel constantly and some that only want to travel a few times a year. I'm sort of in the middle. I expect to travel about once a month and things are ramping up quick in a semi post-COVID world. Just know that, as a Developer Advocate, you should have control over the amount of travel you do and where you go.
The last thing I'll add is that for every trip I do take, I try to take advantage of it. I love exploring new places, and I especially love doing this with my wife, Jess. In a recent trip to London for a conference talk, my wife joined me, so we left a few days early and took a vacation to Paris 🥰 Not ba huh?

Final Thoughts
Again, I looove my role as a Developer Advocate, but I do think it's important to call out some of the struggles in the role. Just like everything else, there are ups and downs, so I wanted to give the community some perspectives to think about. If you have any additional thoughts or questions, feel free to share with me on Twitter.

Top 5 Struggles of a Developer Advocate

This plugin is amazing! I recently tried the Fig.io plugin for my terminal and it is AWESOME. You can get autocomplete and IntelliSense just like you do inside of VS Code right inside of your terminal.

<div><p>I found a new terminal plugin called <a href="https://fig.io/">Fig.io </a>that gives me super powers! It has full <strong>autocomplete </strong>and <strong>IntelliSense</strong> just like inside of VS Code. This plugin is completely free (Mac only though), so you can head to the <a href="https://fig.io/">website</a> now to download and install. Let's check it out.</p><h2>Fig.io In Action</h2><p>The install process should be pretty straightforward, and after you have it set up, you should immediately see it in action. For example, if I start to run a <code>cd</code> command in my terminal, you can see it populates the different folder options that I can navigate to. I'm running this command from within the source code for the <a href="http://compressed.fm/">Compressed.fm website</a>. It's a <a href="https://nextjs.org/">Next.js</a> project, so you can see the appropriate directories showing up.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/2a0e745f37e7778bef2b7c0ae935c4685102226b-858x333.png"><p>Adding IntelliSense for built-in terminal commands seems pretty obvious, so let's try something a little different. Let's try working with Git.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/f1a35d36a51b3445cfe1f8475e3d23da6ae4b2a7-820x333.png"><p>After typing the word <code>git</code>, it populates with all of the potential commands that I can run. If you notice, it also shows me what the different parameters are that I can pass to each command. Pretty neat right?</p><p>Let's try something a little more obscure. I started working at <a href="https://planetscale.com/">PlanetScale</a> (a managed MySQL company built for scale and Serverless) a few months ago, and I've worked with our <a href="https://planetscale.com/cli">CLI</a> a lot since I started. Surely, Fig.io won't know how to work with that...right? WRONG! It works flawlessly!</p><img src="https://cdn.sanity.io/images/rx426fbd/production/6b4c7bb447193f745a401b65eb03ac044961a50a-847x346.png"><p> Lastly, what about integration with NPM commands? What if you want IntelliSense for packages that you want to install so you don't have to type the whole package name? Yep, got that too!</p><img src="https://cdn.sanity.io/images/rx426fbd/production/dbde272c57d1e5428a29238ba18d59bc39b3208a-983x336.png"><p>Just by typing <code>npm install react</code>, it autopopulates the most popular React libraries!</p><h2>Wrap Up</h2><p>Here's my summary. <a href="https://fig.io/">Fig.io</a> is awesome. You should check it out! Let me know what you think on <a href="https://twitter.com/jamesqquick">Twitter</a>!</p></div>

I found a new terminal plugin called Fig.io that gives me super powers! It has full autocomplete and IntelliSense just like inside of VS Code. This plugin is completely free (Mac only though), so you can head to the website now to download and install. Let's check it out.
Fig.io In Action
The install process should be pretty straightforward, and after you have it set up, you should immediately see it in action. For example, if I start to run a cd command in my terminal, you can see it populates the different folder options that I can navigate to. I'm running this command from within the source code for the Compressed.fm website. It's a Next.js project, so you can see the appropriate directories showing up.

Adding IntelliSense for built-in terminal commands seems pretty obvious, so let's try something a little different. Let's try working with Git.

After typing the word git, it populates with all of the potential commands that I can run. If you notice, it also shows me what the different parameters are that I can pass to each command. Pretty neat right?
Let's try something a little more obscure. I started working at PlanetScale (a managed MySQL company built for scale and Serverless) a few months ago, and I've worked with our CLI a lot since I started. Surely, Fig.io won't know how to work with that...right? WRONG! It works flawlessly!

 Lastly, what about integration with NPM commands? What if you want IntelliSense for packages that you want to install so you don't have to type the whole package name? Yep, got that too!

Just by typing npm install react, it autopopulates the most popular React libraries!
Wrap Up
Here's my summary. Fig.io is awesome. You should check it out! Let me know what you think on Twitter!

My Terminal Has SUPER Powers!

<div><p>Every year I take some time to reflect on the previous and set goals for myself for the upcoming year. Well, 2022 is a new year so here are my goals!</p><blockquote>Hear a more in depth overview of my goals on the latest episode of the <a href="https://www.compressed.fm/episode/42">Compressed.fm Podcast</a>.</blockquote><h2>My 4 Pillars</h2><p>Each time I plan, I create 4 pillars for myself. These are high-level initiatives that I can use to align my individual goals with. In other words, every goal that I create should align somehow to one of those pillars.</p><h3>Give Back to the Community</h3><p>This is always a top priority for me. As I continue to grow a following and audience, I want to leverage that not just for myself, but for the benefit of the community. There are lots of ways to do this.</p><ul><li>monthly giveaways</li><li>highlighting content from other developers</li><li>showing up in Discord, Twitter, etc.</li></ul><h3>Ship a New Personal Brand</h3><p>This was a top item for me last year that I didn't quite accomplish. I'll be working with my fabulous podcast co-host, Amy Dutton, to do a complete rebrand this year.</p><ul><li>new website</li><li>YouTube + social templates</li><li>much more!</li></ul><p>As part of the new brand, I'll be migrating my website from Gatsby to Next.js. Keep an eye out for that!</p><h3>Repurpose and Cross-Promote</h3><p>This is something I talk about all the time, but never feel like I do a good enough job. It's easy to get on the "content hamster wheel" and set your goal to ship as much content as possible. BUT that's a quick way to get burned out. </p><p>Not every piece of content needs to be brand new. It's better and more effective to repurpose content and share in other places. For example, as I my site from Gatsby to Next.js, there are infinite nuggets along the way that I should be sharing. These nuggets could come in many different forms.</p><ul><li>code snippet tweet</li><li>YouTube video</li><li>TikTok + YouTube short</li><li>blog post</li></ul><p>See that? With one initiative, I can create contnet for multiple different platforms and not have to start from scratch on each one!</p><h3>Create Focused Content</h3><p>This year I want to be a bit more specific with the topics I cover in my content. I've been loving <strong>SvelteKit</strong> recently and want to explore some of the new <strong>React frameworks</strong>. I also want to learn more about C<strong>I/CD/DevOps and testing</strong>. Expect me to put a lot of time and focus into these areas 👀</p><h2>By the Numbers</h2><p>The 4 pillars are really the most important piece, but I bet what you are most interested in is numbers: followers, subscribers, money, etc. As you read through these, remember they are just numbers. They are <strong>not the important part</strong>. </p><blockquote>The important part is me focusing on creating value for myself and the community. Whatever growth that leads to is an extra benefit.</blockquote><h3>Side Income</h3><p>In 2021, I earned about $65,000 outside of my full-time job. It's such a wild number, that I still have trouble believing it's real. Regardless, it's immensely encouraging to think that people value the things that I create enough to pay for them. In general, I make money from several different things.</p><ul><li>YouTube ads</li><li>sponsored YouTube videos (and other content)</li><li>courses</li><li>Podcast sponsorships</li></ul><p>It's really great to have several different sources of income, all of which I really enjoy. </p><blockquote>So, my goal for the upcoming year is to generate $100,000 in side income. </blockquote><p>We'll see how this goes, but I'm optimistic and I can continue to create great content that other people believe in.</p><h3>YouTube</h3><p>Last year, I grew to 100k subscribers on YouTube and this year my goal is 300k. My numbers recently have been much slower which makes this interesting. Hopefully, the growth picks back up and puts me back on the path to 300k!</p><h3>Courses</h3><p>Amy and I will be launching <a href="https://everythingsvelte.com/">Everything Svelte</a> in the Spring. This is going to be the biggest course I've ever been a part of and I am so excited about it. For now, you can sign up for the newsletter, so go and check it out.</p><p>We are also talking about a few more smaller courses throughout the year. These will probably be similar to our <a href="https://adventofjs.com/">Advent of JS</a> and <a href="https://adventofcss.com/">Advent of CSS</a> courses. I think these courses with a series of challenges are fun to create and also really helpful for learning developers. </p><h2>Wrap Up</h2><p>I'm so excited for this year! I've rambled long enough, so I'd love to hear what your goals are for this year. Let me know in this <a href="https://twitter.com/jamesqquick/status/1479487600322883589?s=20">tweet</a>.</p></div>

Every year I take some time to reflect on the previous and set goals for myself for the upcoming year. Well, 2022 is a new year so here are my goals!
Hear a more in depth overview of my goals on the latest episode of the Compressed.fm Podcast.
My 4 Pillars
Each time I plan, I create 4 pillars for myself. These are high-level initiatives that I can use to align my individual goals with. In other words, every goal that I create should align somehow to one of those pillars.
Give Back to the Community
This is always a top priority for me. As I continue to grow a following and audience, I want to leverage that not just for myself, but for the benefit of the community. There are lots of ways to do this.

monthly giveaways
highlighting content from other developers
showing up in Discord, Twitter, etc.

Ship a New Personal Brand
This was a top item for me last year that I didn't quite accomplish. I'll be working with my fabulous podcast co-host, Amy Dutton, to do a complete rebrand this year.

new website
YouTube + social templates
much more!

As part of the new brand, I'll be migrating my website from Gatsby to Next.js. Keep an eye out for that!
Repurpose and Cross-Promote
This is something I talk about all the time, but never feel like I do a good enough job. It's easy to get on the "content hamster wheel" and set your goal to ship as much content as possible. BUT that's a quick way to get burned out. 
Not every piece of content needs to be brand new. It's better and more effective to repurpose content and share in other places. For example, as I my site from Gatsby to Next.js, there are infinite nuggets along the way that I should be sharing. These nuggets could come in many different forms.

code snippet tweet
YouTube video
TikTok + YouTube short
blog post

See that? With one initiative, I can create contnet for multiple different platforms and not have to start from scratch on each one!
Create Focused Content
This year I want to be a bit more specific with the topics I cover in my content. I've been loving SvelteKit recently and want to explore some of the new React frameworks. I also want to learn more about CI/CD/DevOps and testing. Expect me to put a lot of time and focus into these areas 👀
By the Numbers
The 4 pillars are really the most important piece, but I bet what you are most interested in is numbers: followers, subscribers, money, etc. As you read through these, remember they are just numbers. They are not the important part. 
The important part is me focusing on creating value for myself and the community. Whatever growth that leads to is an extra benefit.
Side Income
In 2021, I earned about $65,000 outside of my full-time job. It's such a wild number, that I still have trouble believing it's real. Regardless, it's immensely encouraging to think that people value the things that I create enough to pay for them. In general, I make money from several different things.

YouTube ads
sponsored YouTube videos (and other content)
courses
Podcast sponsorships

It's really great to have several different sources of income, all of which I really enjoy. 
So, my goal for the upcoming year is to generate $100,000 in side income. 
We'll see how this goes, but I'm optimistic and I can continue to create great content that other people believe in.
YouTube
Last year, I grew to 100k subscribers on YouTube and this year my goal is 300k. My numbers recently have been much slower which makes this interesting. Hopefully, the growth picks back up and puts me back on the path to 300k!
Courses
Amy and I will be launching Everything Svelte in the Spring. This is going to be the biggest course I've ever been a part of and I am so excited about it. For now, you can sign up for the newsletter, so go and check it out.
We are also talking about a few more smaller courses throughout the year. These will probably be similar to our Advent of JS and Advent of CSS courses. I think these courses with a series of challenges are fun to create and also really helpful for learning developers. 
Wrap Up
I'm so excited for this year! I've rambled long enough, so I'd love to hear what your goals are for this year. Let me know in this tweet.

Goals for 2022

SvelteKit is one of the best frameworks out there, and working with it just got much much easier!


<div><p>SvelteKit is one of my favorite frameworks right now, and it just got a whole lot easier to work with inside of VS Code. The <a href="https://marketplace.visualstudio.com/items?itemName=stordahl.sveltekit-snippets">SvelteKit Snippets extension</a> for VS Code is a must-have! Let's take a quick look.</p><h2>Overview</h2><p>To use the snippet, you can search for it in the extensions tab of the sidebar inside of VS Code and click install.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/ec66f606494127f6e92bfc5371f12a65284922b4-1916x1077.png"><p>After you get it installed, now you'll have access to a load of different snippets that covers all of the essentials.</p><ul><li>creating components</li><li>API endpoints</li><li>if conditions, for loops, etc</li><li>load functions</li></ul><p>This basically gives you the building blocks for everything you need to work with SvelteKit. Here is a full list from the docs.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/931613abfaea16e81654cf0f707050bf4c98e6df-681x601.png"><p>To trigger an extension, simply start typing its prefix. For example, if you want to generate a SvelteKit component, you'd start typing <code>kitComp</code>.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/20942522222db46efcf834154fb0ad54cf4bc07d-761x148.png"><p>Notice, there's even an option for TypeScript! Then, to complete the snippet, you can press enter and look at your wonderful new component.</p><h2>Wrap Up</h2><p>If you want to learn more about SvelteKit, make sure to check out our (<a href="https://twitter.com/selfteachme">Amy Dutton</a> and I) upcoming SvelteKit course, <a href="https://www.everythingsvelte.com/">Everything Svelte</a>. We'll cover everything you need to know about working with SvelteKit, Supabase, and much much more!</p><img src="https://cdn.sanity.io/images/rx426fbd/production/149731afa1cd93cddea6fa689c8c6bc851f91a29-1577x683.png"></div>

SvelteKit is one of my favorite frameworks right now, and it just got a whole lot easier to work with inside of VS Code. The SvelteKit Snippets extension for VS Code is a must-have! Let's take a quick look.
Overview
To use the snippet, you can search for it in the extensions tab of the sidebar inside of VS Code and click install.

After you get it installed, now you'll have access to a load of different snippets that covers all of the essentials.

creating components
API endpoints
if conditions, for loops, etc
load functions

This basically gives you the building blocks for everything you need to work with SvelteKit. Here is a full list from the docs.

To trigger an extension, simply start typing its prefix. For example, if you want to generate a SvelteKit component, you'd start typing kitComp.

Notice, there's even an option for TypeScript! Then, to complete the snippet, you can press enter and look at your wonderful new component.
Wrap Up
If you want to learn more about SvelteKit, make sure to check out our (Amy Dutton and I) upcoming SvelteKit course, Everything Svelte. We'll cover everything you need to know about working with SvelteKit, Supabase, and much much more!

SvelteKit is one of the best frameworks out there, and working with it just got much much easier!

Must Have SvelteKit Extension for VS Code - SvelteKit Snippets

Announcing Advent of JavaScript - A FREE Series of JavaScript Challenges

<div><p>I'm super happy to announce a new FREE set of JavaScript challenges called <a href="https://adventofjs.com/">Advent of JavaScript</a> 🎉 For 24 days, you'll get to develop your JavaScript skills with one new challenge each day. Each challenge includes: </p><ul><li>All the HTML and CSS you need to get started, allowing you to <strong>focus on the JavaScript</strong></li><li>A brief on how to get started, ways to push yourself, and steps to help you get started</li></ul><blockquote>Although this series kicked off on December 1st, you can <a href="https://adventofjs.com/">sign up</a> at any time and still <strong>get access to all of the challenges</strong>.</blockquote><p>This course is powered by the <a href="https://compressed.fm/">Compressed.fm podcast</a>, meaning myself and my amazing co-host, Amy Dutton, are the creators. We really hope that you enjoy it!</p><blockquote>Interested in learning CSS also? Check out <a href="https://www.adventofcss.com">Advent of CSS</a>.</blockquote><h2>Who Is It For?</h2><p>These challenges are perfect for beginner to intermediate developers who want to become more comfortable with their JavaScript skills.</p><blockquote><strong>Before accepting this challenge, you really should know basic JavaScript.</strong></blockquote><p>You learn best through implementation. Once you’ve applied your knowledge to a specific project, learning concepts are solidified.</p><h2>What Kinds of Challenges Are There?</h2><p>We've created a variety of challenges to give you practice with different parts of JavaScript.</p><ul><li>DOM manipulation</li><li>Asynchronous JavaScript</li><li>Working with API calls</li><li>Working with JavaScript Arrays</li></ul><p>These are topics that I consider core to the language itself (and web development in general), so each of these challenges will help you level up your JavaScript skills!</p><h2>Want Help?</h2><p>Don't worry we have you covered! While the challenges themselves are completely free, you do have the ability to upgrade to get the solution code AND videos explaining how to build it. I highly recommend attempting to go through these challenges on your own first, <strong>but there's nothing wrong with needing a little bit of help</strong>.</p><h2>How Do I Sign Up?</h2><p>If you're interested, you can sign up at <a href="https://adventofjs.com/">https://adventofjs.com/</a>. If you do, I would love to hear about your progress and any questions you have. You can share updates on Twitter with the hashtag #<strong>adventofjs </strong>and ask questions in the <a href="https://learnbuildteach.com/">Learn Build Teach Discord Server</a> for help.</p><p></p><p></p></div>

I'm super happy to announce a new FREE set of JavaScript challenges called Advent of JavaScript 🎉 For 24 days, you'll get to develop your JavaScript skills with one new challenge each day. Each challenge includes: 

All the HTML and CSS you need to get started, allowing you to focus on the JavaScript
A brief on how to get started, ways to push yourself, and steps to help you get started

Although this series kicked off on December 1st, you can sign up at any time and still get access to all of the challenges.
This course is powered by the Compressed.fm podcast, meaning myself and my amazing co-host, Amy Dutton, are the creators. We really hope that you enjoy it!
Interested in learning CSS also? Check out Advent of CSS.
Who Is It For?
These challenges are perfect for beginner to intermediate developers who want to become more comfortable with their JavaScript skills.
Before accepting this challenge, you really should know basic JavaScript.
You learn best through implementation. Once you’ve applied your knowledge to a specific project, learning concepts are solidified.
What Kinds of Challenges Are There?
We've created a variety of challenges to give you practice with different parts of JavaScript.

DOM manipulation
Asynchronous JavaScript
Working with API calls
Working with JavaScript Arrays

These are topics that I consider core to the language itself (and web development in general), so each of these challenges will help you level up your JavaScript skills!
Want Help?
Don't worry we have you covered! While the challenges themselves are completely free, you do have the ability to upgrade to get the solution code AND videos explaining how to build it. I highly recommend attempting to go through these challenges on your own first, but there's nothing wrong with needing a little bit of help.
How Do I Sign Up?
If you're interested, you can sign up at https://adventofjs.com/. If you do, I would love to hear about your progress and any questions you have. You can share updates on Twitter with the hashtag #adventofjs and ask questions in the Learn Build Teach Discord Server for help.

100k Subscribers On YouTube - 5 Things I Learned

<div><p>I just <strong>crossed 100k subscribers on <a href="https://www.youtube.com/c/jamesqquick">YouTube</a></strong>, and to be honest, I'm a bit overwhelmed by it. It's really hard to believe that after 7 years of creating YouTube videos, there are 100,000 people that really enjoy the content I put out. </p><p>So, as I reflect on the road to 100k, here are 5 things I've learned along the way.</p><h2>1. I love to Learn, Build, and Teach</h2><p>I talk about it all the time right. It's my motto. It's the name of my <a href="http://learnbuildteach.com/">Discord</a>. <strong>It's what I do</strong>. </p><p>That's why creating videos is easy for me...I just flat out love it. It gives me a way to constantly learn new things, build cool demos, and teach people along the way. I wouldn't have created so many videos over the past couple of years if it wasn't something I just flat out loved!</p><blockquote>Never stop trying to do more of what you enjoy!</blockquote><p>My big piece of advice to you is to follow your passion. If something gets your excited, do more of that thing. For me, it's creating videos. It's building things. It's teaching people. Working on content is literally one of the first things I do in the morning because it's my passion. Never stop trying to do more of what you enjoy!</p><h2>2. Thumbnails Are IMMENSELY Important</h2><p>I believe that thumbnails have made the largest impact in me growing my YouTube channel. All of my "viral" videos (weird to call them that) have had edgier/more opinionated thumbnails. Here's an example from my most popular video ever <a href="https://youtu.be/AbCTlemwZ1k">I Don't Need Postman Anymore</a>.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/354db9e6c6773ba18844cb20734ddf44872582a9-2552x1436.png"><p>A couple of things to note about this thumbnail. First, it shows that I'm done using a tool that tons of people use every day. That's bound to get some attention. Second, to reinforce that, I used the "x" emoji. I've used that emoji in several other thumbnails sense, and they always get good responses.</p><p>Here's the thing though. There's a fine balance between useless click-bait and enticing thumbnails that still provide the value that is promised. That's what I have to focus on always providing value first and foremost.</p><p>Overall, If I had to share 1 tip with people about how to grow on YouTube (outside of consistency), I would say focus on experimenting with your thumbnails!</p><h2>3. A Little Bit of Everything</h2><p>There is so much that goes into growing a YouTube channel. As an individual, I'm responsible for every different aspect of content creation, not just recording a demo. I've had a blast learning more about video, audio, lighting, marketing, and more. Each one of those topics is a rabbit hole by itself. I've learned so much and still have so much more to learn.</p><p>It really is incredible the array of skills that I've learned over my content creation career. It's why I love it so much. I feel like it's made me into such a well-rouned individual. I may not be the best at a lot of these things, but I've gotten good enough to have success on YouTube. It's pretty rewarding to see all of the time and effort I've put into learning these supplimentary skills pay off in such an amazing thing!</p><h2>4. How to Be An Entrepreneur</h2><p>YouTube has opened lots of opportunities for me including the ability to generate side income. With a growing audience, I can earn money from YouTube ads, but I can also do a lot more. I've done sponsored videos, affiliate links, published courses, etc. Being a content creator has meant I have infinite possibilities to generate side income (time pending of course :) ).</p><blockquote>If you have something you want to do, start working towards it today!</blockquote><p>Another piece of advice to readers, never settle for what's in front of you. There are soooo many ways to take control of your career. You can literally learn anything on YouTube. You can create content yourself whether it be a video, a blog post, etc. If you have something you want to do, start working towards it today! Creating content has helped me embrace that mentality. I<strong> will never settle in my life and career going forward</strong>.</p><h2>5. The Content Creator Community is AMAZING!</h2><p>These past two years have proven to me how amazing people can be. Yes, there are lots of examples where the tech industry must do better, but at the same time, it's evolved so much. It's been amazing to see how many people have started creating content in the last couple of years as well. I think that's because we have built a community of supportive and encouraging content creators.<br>For example, there is a Programming YouTubers Discord group that I have been a part of the last year or two, and it's one of the best groups I've ever been in. Everyone there is incredibly open and helpful regardless of audience size. It's amazing to know there are that many people out there who are excited to help others grow. I hope I can continue to give back to the community in a similar fashion.</p><p>If you want to get started as a content creator, do it! Also, don't be afraid to ask for help and advice along the way 😺</p><h2>Wrap Up</h2><p>Creating YouTube videos has been one of the most rewarding experiences of my life! It's really hard to believe that I've made it to the 100k milestone. I'm looking forward to creating many more fun videos in the future!</p><p>If you're interested in starting a YouTube channel yourself, make sure to check out my <a href="https://youtubefordevelopers.com/">YouTube for Developer eBook</a>!</p><p></p><img src="https://cdn.sanity.io/images/rx426fbd/production/2e55ee06e9aa1d7c4e7a06e479977413ea90f5d7-406x600.png"><h1></h1></div>

I just crossed 100k subscribers on YouTube, and to be honest, I'm a bit overwhelmed by it. It's really hard to believe that after 7 years of creating YouTube videos, there are 100,000 people that really enjoy the content I put out. 
So, as I reflect on the road to 100k, here are 5 things I've learned along the way.
1. I love to Learn, Build, and Teach
I talk about it all the time right. It's my motto. It's the name of my Discord. It's what I do. 
That's why creating videos is easy for me...I just flat out love it. It gives me a way to constantly learn new things, build cool demos, and teach people along the way. I wouldn't have created so many videos over the past couple of years if it wasn't something I just flat out loved!
Never stop trying to do more of what you enjoy!
My big piece of advice to you is to follow your passion. If something gets your excited, do more of that thing. For me, it's creating videos. It's building things. It's teaching people. Working on content is literally one of the first things I do in the morning because it's my passion. Never stop trying to do more of what you enjoy!
2. Thumbnails Are IMMENSELY Important
I believe that thumbnails have made the largest impact in me growing my YouTube channel. All of my "viral" videos (weird to call them that) have had edgier/more opinionated thumbnails. Here's an example from my most popular video ever I Don't Need Postman Anymore.

A couple of things to note about this thumbnail. First, it shows that I'm done using a tool that tons of people use every day. That's bound to get some attention. Second, to reinforce that, I used the "x" emoji. I've used that emoji in several other thumbnails sense, and they always get good responses.
Here's the thing though. There's a fine balance between useless click-bait and enticing thumbnails that still provide the value that is promised. That's what I have to focus on always providing value first and foremost.
Overall, If I had to share 1 tip with people about how to grow on YouTube (outside of consistency), I would say focus on experimenting with your thumbnails!
3. A Little Bit of Everything
There is so much that goes into growing a YouTube channel. As an individual, I'm responsible for every different aspect of content creation, not just recording a demo. I've had a blast learning more about video, audio, lighting, marketing, and more. Each one of those topics is a rabbit hole by itself. I've learned so much and still have so much more to learn.
It really is incredible the array of skills that I've learned over my content creation career. It's why I love it so much. I feel like it's made me into such a well-rouned individual. I may not be the best at a lot of these things, but I've gotten good enough to have success on YouTube. It's pretty rewarding to see all of the time and effort I've put into learning these supplimentary skills pay off in such an amazing thing!
4. How to Be An Entrepreneur
YouTube has opened lots of opportunities for me including the ability to generate side income. With a growing audience, I can earn money from YouTube ads, but I can also do a lot more. I've done sponsored videos, affiliate links, published courses, etc. Being a content creator has meant I have infinite possibilities to generate side income (time pending of course :) ).
If you have something you want to do, start working towards it today!
Another piece of advice to readers, never settle for what's in front of you. There are soooo many ways to take control of your career. You can literally learn anything on YouTube. You can create content yourself whether it be a video, a blog post, etc. If you have something you want to do, start working towards it today! Creating content has helped me embrace that mentality. I will never settle in my life and career going forward.
5. The Content Creator Community is AMAZING!
These past two years have proven to me how amazing people can be. Yes, there are lots of examples where the tech industry must do better, but at the same time, it's evolved so much. It's been amazing to see how many people have started creating content in the last couple of years as well. I think that's because we have built a community of supportive and encouraging content creators.
For example, there is a Programming YouTubers Discord group that I have been a part of the last year or two, and it's one of the best groups I've ever been in. Everyone there is incredibly open and helpful regardless of audience size. It's amazing to know there are that many people out there who are excited to help others grow. I hope I can continue to give back to the community in a similar fashion.
If you want to get started as a content creator, do it! Also, don't be afraid to ask for help and advice along the way 😺
Wrap Up
Creating YouTube videos has been one of the most rewarding experiences of my life! It's really hard to believe that I've made it to the 100k milestone. I'm looking forward to creating many more fun videos in the future!
If you're interested in starting a YouTube channel yourself, make sure to check out my YouTube for Developer eBook!

I created a developer rap video. Here's what I learned.

<div><p>I've been writing rap songs for almost 10 years now, but I haven't shared much publicly.  In fact, I've basically treated my rap music as a private journal, but this week I took a pretty big leap. </p><blockquote>I  <a href="https://youtu.be/ZdAr4DQD-nA">published a rap music video</a> on the <a href="https://youtube.com/auth0">Auth0 YouTube</a> channel.</blockquote><p>Although I was pretty nervous to post this video publicly, I'm glad I did. I've gotten tons of positive responses, so I'm encouraged to do more (keep an eye out 👀). In the meantime, here are a few things I learned from taking this big leap.</p><h2>Find A Way to Stand Out</h2><p>As a content creator, I do most of the normal things you would expect. I make<a href="https://www.youtube.com/c/jamesqquick"> YouTube videos</a>, write articles, run a <a href="https://compressed.fm/">podcast</a>, etc. Although I've had lots of success in those areas, those forms of content aren't inherently unique, but a rap video definitely is.</p><p>I mean think about it. How many other content creators have you seen release a rap video? How many other Developer Advocates? The short answer is not many.</p><p>So, in a world full of content, how do you make yours stand out? Well, there are two ways you can look at it.</p><ol><li>Do the same thing, but do it better</li><li>Do something completely different</li></ol><p>As I grow as a content creator, I want to focus more on number 2. I want to focus more on being different. </p><h2>Developers Are More Than Just One Skill</h2><p>During my senior year of college, I interviewed for a role at Microsoft. I got turned down twice before they suggested I apply for a Technical Evangelist role. At the time, they were only looking to hire for a few different cities, but the hiring manager asked if I would be interested in working in Miami because of my background in Spanish. </p><blockquote>In short, my background in Spanish helped me get a job at one of the biggest tech companies in the world.</blockquote><p>For the first time in my career, a <strong>seemingly random and completely unrelated to tech skill helped me in my career</strong>. That's not the onle time though.</p><p>My public speaking and teaching experience helped me get a skip level promotion at FedEx.</p><p>My background in content + video led to the creation of my new role at Auth0 as our Developer Marketing Media Manager</p><p>My point is that there are lots of things you can do in your career as a developer, and there are lots of complimentary skills (outside of writing code) that can help you get there. Embrace the things that make you unique and share those with the world. </p><blockquote>You never know where those random skills might take you!</blockquote><p>I have no idea what this rap video will mean for my career, but I will say that I've already gained some extra awareness within my company. In fact, our CTO sent several messages expressing how excited he was about the video. Again, you never know where those random skills might take you!</p><h2>Be Comfortable With Yourself</h2><p>Publishing this rap video made me incredibly nervous. I was literally shaking as the video went live, and I watched people's comments in real-time as they watched. I was uncomfortable sharing a skill that only a handful of people had validated (primarily my wife and a few friends).</p><p>Thankfully, I've gotten an overwhelmingly positive response which makes it easy to look at this effort as a success. That has made me feel incredible, but I also want to think about this from another perspective as well. What if it didn't go well? What if people had laughed?</p><blockquote>One thing I've been working on for the majority of my life is being comfortable with myself.</blockquote><p>One thing I've been working on for the majority of my life is being comfortable with myself. I've spent years of my life questioning how I will be judged, how people will respond, etc. instead of just being me. This is a big part of the reason I haven't shared much of music up until now.</p><p>I want to add that most people assume that confidence is inherent. You're either a confident person or not with no middle ground. The fact is though that confidence can be practiced and earned. Confidence is, in fact, something I <strong>practice </strong>every day.</p><blockquote>The next time I take a chance and the idea flops, I don't want my confidency to drop. I want be completely comfortable taking chances and just being myself.</blockquote><p>Although I got a positive response this time, my goal is to keep this same energy and confidence when I take a chance in the future, but it doesn't go well. When that happens (and it will eventually), I don't want my confidence to drop. I want to be completely comfortable taking chances and just being myself.</p><h2>Go and Take That Chance</h2><p>Take chances in your career. Do that thing you've been debating about. Pitch that idea no matter how out there it is. Ask the hard questions you've been too scared to ask. Take those chances because you never know what they might lead to.</p></div>

I've been writing rap songs for almost 10 years now, but I haven't shared much publicly.  In fact, I've basically treated my rap music as a private journal, but this week I took a pretty big leap. 
I  published a rap music video on the Auth0 YouTube channel.
Although I was pretty nervous to post this video publicly, I'm glad I did. I've gotten tons of positive responses, so I'm encouraged to do more (keep an eye out 👀). In the meantime, here are a few things I learned from taking this big leap.
Find A Way to Stand Out
As a content creator, I do most of the normal things you would expect. I make YouTube videos, write articles, run a podcast, etc. Although I've had lots of success in those areas, those forms of content aren't inherently unique, but a rap video definitely is.
I mean think about it. How many other content creators have you seen release a rap video? How many other Developer Advocates? The short answer is not many.
So, in a world full of content, how do you make yours stand out? Well, there are two ways you can look at it.

Do the same thing, but do it better
Do something completely different

As I grow as a content creator, I want to focus more on number 2. I want to focus more on being different. 
Developers Are More Than Just One Skill
During my senior year of college, I interviewed for a role at Microsoft. I got turned down twice before they suggested I apply for a Technical Evangelist role. At the time, they were only looking to hire for a few different cities, but the hiring manager asked if I would be interested in working in Miami because of my background in Spanish. 
In short, my background in Spanish helped me get a job at one of the biggest tech companies in the world.
For the first time in my career, a seemingly random and completely unrelated to tech skill helped me in my career. That's not the onle time though.
My public speaking and teaching experience helped me get a skip level promotion at FedEx.
My background in content + video led to the creation of my new role at Auth0 as our Developer Marketing Media Manager
My point is that there are lots of things you can do in your career as a developer, and there are lots of complimentary skills (outside of writing code) that can help you get there. Embrace the things that make you unique and share those with the world. 
You never know where those random skills might take you!
I have no idea what this rap video will mean for my career, but I will say that I've already gained some extra awareness within my company. In fact, our CTO sent several messages expressing how excited he was about the video. Again, you never know where those random skills might take you!
Be Comfortable With Yourself
Publishing this rap video made me incredibly nervous. I was literally shaking as the video went live, and I watched people's comments in real-time as they watched. I was uncomfortable sharing a skill that only a handful of people had validated (primarily my wife and a few friends).
Thankfully, I've gotten an overwhelmingly positive response which makes it easy to look at this effort as a success. That has made me feel incredible, but I also want to think about this from another perspective as well. What if it didn't go well? What if people had laughed?
One thing I've been working on for the majority of my life is being comfortable with myself.
One thing I've been working on for the majority of my life is being comfortable with myself. I've spent years of my life questioning how I will be judged, how people will respond, etc. instead of just being me. This is a big part of the reason I haven't shared much of music up until now.
I want to add that most people assume that confidence is inherent. You're either a confident person or not with no middle ground. The fact is though that confidence can be practiced and earned. Confidence is, in fact, something I practice every day.
The next time I take a chance and the idea flops, I don't want my confidency to drop. I want be completely comfortable taking chances and just being myself.
Although I got a positive response this time, my goal is to keep this same energy and confidence when I take a chance in the future, but it doesn't go well. When that happens (and it will eventually), I don't want my confidence to drop. I want to be completely comfortable taking chances and just being myself.
Go and Take That Chance
Take chances in your career. Do that thing you've been debating about. Pitch that idea no matter how out there it is. Ask the hard questions you've been too scared to ask. Take those chances because you never know what they might lead to.

I Created a Developer Rap Video - Here's What I Learned

Learn how and why I got started Live Streaming early in 2020.

<div><p>Live Streaming has seemingly become all the rage for developers these days. You've probably watched a Live Stream, but have you ever thought about Live Streaming yourself? In this article, I'll talk about why I got started and some tips to help you start also.</p><blockquote>Check out the <a href="https://www.compressed.fm/episode/16">Live Streaming for Beginners</a> episode of the <a href="https://www.compressed.fm">Compressed.fm</a> podcast for a more complete overview of Live Streaming, </blockquote><h2>Why Live Stream?</h2><p>Let's start with other forms of content like YouTube videos and blog articles. What you get in those cases are polished pieces of work. What you don't get is a feel for...</p><ul><li>time and effort put into the demo </li><li>the hours of research</li><li>the mistakes made along the way</li></ul><p>Live Streams are different though. In a Live Stream, you get it all...the fumbled words, the missteps, the slogging through documentation. Because of this, <strong>Live Streams are just more genuine</strong>. They provide a perspective that is hard to find in other forms of content.</p><p>In addition to the genuineness, the audience for Live Streams, especially in the developer communities, is quickly growing. If you're looking to continue to grow your audience as a whole, you need to meet developers where they are. It turns out that developers really enjoy spending time in Live Streams.</p><h2>Equipment to Get Started</h2><p>What gear do you need if you want to stream? Although many streamers have thousands of dollars worth of equipment, you can start with a lot less. </p><blockquote>Check out <a href="https://www.jamesqquick.com/uses/">my uses page</a> for a full list of equipment I use.</blockquote><p>I want to reimphasize, you don't need to invest tons of money up front. <strong>My suggestion is to start cheap and gradually upgrade along the way</strong>. All of the equipment I use today, I've accumulated over the course of several years.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/50abe65ce14dce7d535974432c9946a5abcb7c05-1400x933.png"><h3>Camera</h3><p>Although it won't look the best, you can start with the built-in camera on your laptop. If you're looking to take a step up from there, you can invest in a dedicated webcam. Here are a few options to consider.</p><ul><li><a href="https://www.amazon.com/Razer-Kiyo-Streaming-Webcam-Built/dp/B075N1BYWB">Razer Kio</a> - ~$85</li><li><a href="https://www.amazon.com/Logitech-C920x-Pro-HD-Webcam/dp/B085TFF7M1">Logitech 920</a> - ~$90</li><li><a href="https://www.amazon.com/Logitech-BRIO-Conferencing-Recording-Streaming/dp/B01N5UOYC4">Logitech Brio</a> - ~$180</li></ul><p>I used the Logitech Brio for about a year myself before I upgraded to my <a href="https://www.amazon.com/Canon-Mirrorless-Camera-EF-M15-45mm-Video/dp/B079Y45KTJ/ref=sr_1_3?dchild=1&amp;keywords=canon+m50&amp;qid=1626266780&amp;sr=8-3">Canon m50 mirrorless camera</a>. Upgrading to this camera <strong>made a huge difference in my stream quality</strong>.</p><h3>Lights</h3><p>No matter how much you spend on a webcam or camera, it won't look near as good without good lighting. The first tip is to try and find some natural light near a window. It's amazing the difference FREE light can make in your video quality.</p><p>If you've got a bit of light budget, here are a few ideas.</p><ul><li><a href="https://www.amazon.com/UBeesize-Recording%EF%BC%86Live-Streaming-Instagram-Compatible/dp/B08L5VKNWR/ref=sr_1_3?dchild=1&amp;keywords=selfie+ring+light&amp;qid=1626268522&amp;sr=8-3">Selfie Ring Light</a> - ~$37</li><li><a href="https://www.amazon.com/Neewer-Dimmable-Adjustable-Tabletop-Photography/dp/B07T8FBZC2/ref=sr_1_5?dchild=1&amp;keywords=neewer+2+pack+lights&amp;qid=1626268542&amp;sr=8-5">Newer 2 Pack of Dimmable Lights</a> - ~$39</li></ul><p>If you've got the money for a bigger upgrade, I use the <a href="https://www.amazon.com/Elgato-Key-Light-Professional-App-Enabled/dp/B07L755X9G/ref=sr_1_3?dchild=1&amp;keywords=elgato+key+lights&amp;qid=1626267341&amp;sr=8-3">El Gato Key Lights</a>, and they are incredible!</p><h3>Mic</h3><p>Next up is audio. I would first look around your room and see if you have any existing headsets you can use. If you don't have anything, you can pick up something like the <a href="https://www.amazon.com/Microsoft-LifeChat-LX-6000-for-Business/dp/B00465UNYI/ref=sr_1_1?dchild=1&amp;keywords=microsoft+live+chat&amp;qid=1626266887&amp;sr=8-1">Microsoft LifeChat Headset</a> for about $35.</p><p>Instead of a headset, you can start looking at a few different USB mic options.</p><ul><li><a href="https://www.amazon.com/Blue-Snowball-Condenser-Microphone-Cardioid/dp/B014PYGTUQ/ref=sr_1_8?dchild=1&amp;keywords=usb+mic&amp;qid=1626267054&amp;sr=8-8">Blue Snowball</a> - ~$40</li><li><a href="https://www.amazon.com/Blue-Yeti-USB-Microphone-Blackout/dp/B00N1YPXW2/ref=sr_1_1_sspa?dchild=1&amp;keywords=blue+yeti&amp;qid=1626267107&amp;sr=8-1-spons&amp;psc=1&amp;spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUEzUEhUVkg4M1VVNUZZJmVuY3J5cHRlZElkPUExMDExNTUyM0tNQkJDVkhPQ0pOTiZlbmNyeXB0ZWRBZElkPUEwMjM0NTI0MzA5OThFRlg0U1VORiZ3aWRnZXROYW1lPXNwX2F0ZiZhY3Rpb249Y2xpY2tSZWRpcmVjdCZkb05vdExvZ0NsaWNrPXRydWU=">Blue Yeti</a> - ~$130</li></ul><p>I upgraded a few years ago to the <a href="https://www.amazon.com/Shure-SM7B-Cardioid-Dynamic-Microphone/dp/B0002E4Z8M/ref=sr_1_1_sspa?dchild=1&amp;keywords=shure+sm7b&amp;qid=1626267189&amp;sr=8-1-spons&amp;psc=1&amp;spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUFUSEcxM1BGOTFCNzUmZW5jcnlwdGVkSWQ9QTAwMjE1ODYyVko2Vk85Tjc4TFk3JmVuY3J5cHRlZEFkSWQ9QTA5NTczNzkxNExKQ1pEQUg3RFFVJndpZGdldE5hbWU9c3BfYXRmJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ==">Shure SM7B XLR mic</a>. This one is much more expensive and requires some additional equipemtn, but the sound is incredible.</p><h2>How to Grow Your Audience</h2><p>Here my two tips for growing your audience while streaming.</p><h3>Stream Consistently</h3><p>If you only stream once every couple of months, it's going to make it hard to get returning viewers. As you're learning, maybe start out with once per month. Then, as you become more comfortable, maybe you move to once a week or a couple of times per week.</p><p>The more you stream, and the more consistently you do it, the easier it is for people to find your content and come back for more.</p><h3>Focus on Interactivity</h3><p>One of the most unique aspects of watching a Live Stream is to be able to interact with the stream in some way. Your number 1 goal should be to make viewers feel appreciated and give them ways to influence what you do.</p><p>The easiest way to show appreciation for your viewers is to respond to ALL of your chat messages. Make sure that if viewers go out of their way to leave a comment or ask a question, that you respond to them. <strong>Let them know that their comments are valuable</strong>.</p><p>In addition to responding to chat messages, you need to give your viewers some way to interact with and potentially influence the stream itself. Not sure what I mean? Here are a couple of examples.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/f46ba4b80d0725a2aac52dd84aa331fb2d2e674d-1616x1077.png"><p>First, I have 2 Hue LED bulbs that can be controlled with code. So, I let users in my chat redeem their <a href="https://help.twitch.tv/s/article/channel-points-guide?language=en_US">channel points</a>, to change the color of my bulbs. It's a simple thing, but this is my most popular interaction by far.</p><blockquote>Check out the <a href="https://auth0.com/blog/how-to-control-hue-lights-with-javascript/">full writeup</a> on controlling Hue Lights with JavaScript.</blockquote><p>I also allow users to save up channel points to make me do pushups. I'll be honest, this has bitten me in the ass before (several people pooled together to make me do LOTS of pushups), but it's a really fun interaction.</p><blockquote>At the end of the day, your focus should be on keeping viewers engaged.</blockquote><h2>Wrap Up</h2><p>Live Streaming is a huuuuuge rabbit hole, but it's a really fun one. I've spent tons of time researching equipment, stream interactions, etc., and I still have so much to learn. </p><p>If you're a streamer, share your link <a href="https://twitter.com/jamesqquick/status/1415297731946496002?s=20">in this Tweet</a>.</p></div>

Live Streaming has seemingly become all the rage for developers these days. You've probably watched a Live Stream, but have you ever thought about Live Streaming yourself? In this article, I'll talk about why I got started and some tips to help you start also.
Check out the Live Streaming for Beginners episode of the Compressed.fm podcast for a more complete overview of Live Streaming, 
Why Live Stream?
Let's start with other forms of content like YouTube videos and blog articles. What you get in those cases are polished pieces of work. What you don't get is a feel for...

time and effort put into the demo 
the hours of research
the mistakes made along the way

Live Streams are different though. In a Live Stream, you get it all...the fumbled words, the missteps, the slogging through documentation. Because of this, Live Streams are just more genuine. They provide a perspective that is hard to find in other forms of content.
In addition to the genuineness, the audience for Live Streams, especially in the developer communities, is quickly growing. If you're looking to continue to grow your audience as a whole, you need to meet developers where they are. It turns out that developers really enjoy spending time in Live Streams.
Equipment to Get Started
What gear do you need if you want to stream? Although many streamers have thousands of dollars worth of equipment, you can start with a lot less. 
Check out my uses page for a full list of equipment I use.
I want to reimphasize, you don't need to invest tons of money up front. My suggestion is to start cheap and gradually upgrade along the way. All of the equipment I use today, I've accumulated over the course of several years.

Camera
Although it won't look the best, you can start with the built-in camera on your laptop. If you're looking to take a step up from there, you can invest in a dedicated webcam. Here are a few options to consider.

Razer Kio - ~$85
Logitech 920 - ~$90
Logitech Brio - ~$180

I used the Logitech Brio for about a year myself before I upgraded to my Canon m50 mirrorless camera. Upgrading to this camera made a huge difference in my stream quality.
Lights
No matter how much you spend on a webcam or camera, it won't look near as good without good lighting. The first tip is to try and find some natural light near a window. It's amazing the difference FREE light can make in your video quality.
If you've got a bit of light budget, here are a few ideas.

Selfie Ring Light - ~$37
Newer 2 Pack of Dimmable Lights - ~$39

If you've got the money for a bigger upgrade, I use the El Gato Key Lights, and they are incredible!
Mic
Next up is audio. I would first look around your room and see if you have any existing headsets you can use. If you don't have anything, you can pick up something like the Microsoft LifeChat Headset for about $35.
Instead of a headset, you can start looking at a few different USB mic options.

Blue Snowball - ~$40
Blue Yeti - ~$130

I upgraded a few years ago to the Shure SM7B XLR mic. This one is much more expensive and requires some additional equipemtn, but the sound is incredible.
How to Grow Your Audience
Here my two tips for growing your audience while streaming.
Stream Consistently
If you only stream once every couple of months, it's going to make it hard to get returning viewers. As you're learning, maybe start out with once per month. Then, as you become more comfortable, maybe you move to once a week or a couple of times per week.
The more you stream, and the more consistently you do it, the easier it is for people to find your content and come back for more.
Focus on Interactivity
One of the most unique aspects of watching a Live Stream is to be able to interact with the stream in some way. Your number 1 goal should be to make viewers feel appreciated and give them ways to influence what you do.
The easiest way to show appreciation for your viewers is to respond to ALL of your chat messages. Make sure that if viewers go out of their way to leave a comment or ask a question, that you respond to them. Let them know that their comments are valuable.
In addition to responding to chat messages, you need to give your viewers some way to interact with and potentially influence the stream itself. Not sure what I mean? Here are a couple of examples.

First, I have 2 Hue LED bulbs that can be controlled with code. So, I let users in my chat redeem their channel points, to change the color of my bulbs. It's a simple thing, but this is my most popular interaction by far.
Check out the full writeup on controlling Hue Lights with JavaScript.
I also allow users to save up channel points to make me do pushups. I'll be honest, this has bitten me in the ass before (several people pooled together to make me do LOTS of pushups), but it's a really fun interaction.
At the end of the day, your focus should be on keeping viewers engaged.
Wrap Up
Live Streaming is a huuuuuge rabbit hole, but it's a really fun one. I've spent tons of time researching equipment, stream interactions, etc., and I still have so much to learn. 
If you're a streamer, share your link in this Tweet.

Why and How to Get Started Live Streaming

Here are 5 ways you can improve your chances of doing well in a developer interview.

<div><p>I am currently teaching a Programming Bootcamp for about 100 students that are going to be looking for jobs soon. With the end drawing near, I've been thinking about what advice to give them when it comes to developer interviews? I was also thinking, why not share that advice with the world?<br></p><p>So, here are <strong>5 Interview Tips </strong>that will put you in a better position to crush your next developer interview!</p><h2><strong>1. Ask What to Expect</strong></h2><p>This one may seem obvious, but when talking with the recruiter, ask them <strong>WHAT TO EXPECT</strong> in the interview.  For many people, this seems pushy, but it is well within your right to know what’s coming. Not to mention, the employer will want to see you at your best, so they should want you to feel comfortable.</p><p><strong>Questions to ask:</strong></p><ul><li>How many people will be there?</li><li>How many interviews will there be?</li><li>Will it be a panel?</li><li>Will I have to write code?</li><li>Will I have to talk through code?</li><li>Will there be a take-home project?<br></li></ul><p>Throughout my career, I have experienced all different types of interviews; anything from the all-day interviews at Google to a casual conversation over coffee. Regardless of the type of interview, not knowing what to expect would make any interview much more difficult.<br></p><h2><strong>2. Be Confident</strong></h2><p>This is tough for most people including myself, but you have to be confident in your interviews...even if you have to fake it 🤣</p><p><strong>Think about this situation:</strong></p><p>You’re speaking to someone and their head is down and they don't make eye contact with you. Now think about speaking with a person whose eyes are up, they’re using hand gestures, they’re talking with passion and excitement.</p><p>Who would you rather hire?</p><p>It's funny how the non-technical things can really hurt you even for a technical interview. Make sure you spend some interview prep time working on the following.</p><ul><li>How you communicate</li><li>Using hand gestures</li><li>How you portray yourself</li></ul><p>I know what you're thinking, "I'm not a confident person, so I'm screwed". Well, let me stop you right there. <strong>That's just not true</strong>!</p><blockquote>Confidence is a practiced skill just like anything else!</blockquote><p>Being confident is a skill that you can improve over time with practice. Most of us aren't naturally confident believe it or not, but sometimes you just have to fake it 😃 It's something that you have to overcome. You have to overcome the anxiety and trick your brains into believing you are confident and then portray that to people.</p><p><strong>A couple of things you can try:</strong></p><p>Superman pose – Trick your mind into having that confidence by standing like superman - chest up and looking up to the sky. Do this for 10-15 seconds.</p><p>Breathing techniques - Controlling your breathing helps control your emotions and keep the nerves at bay. Do some research on breathing techniques that you can experiment with.</p><p>Confidence comes from practice. The more practice the more comfortable you become.<br></p><h2>3. Have 2-3 Projects to Talk About</h2><p>Always go into an interview with a plan of what you are going to talk about. I recommend having at least 2-3 projects that you can reference throughout your interview. </p><p>Coming out of college, In 90% of my interviews, I referenced a Harry Potter Trivia App that I built for Android. Literally any question they threw at me I could reference this project and you need to go into your interview with 2-3 of these projects.</p><p><strong>You might get questions like:</strong></p><p>Tell me about a time you lead a team ….. reference a project</p><p>Tell me about a struggle you have had ….. reference a project</p><p>Tell me about a win/fail you have had ….. AGAIN reference a project</p><p>Having a plan of what you are going to talk about relieves you of the stress of coming up with an answer on the spot. Plus, these projects should be ones you're proud of and comfortable with, so you're already confident when talking about them.  These projects show your passion for developing and desire to learn and create on your own. Lastly, make sure to include these on your website or Github so they are accessible for other people to look at.</p><h2><strong>4. Be Honest</strong></h2><p>Ever been asked about a technology in an interview that you know nothing about? Well, my biggest piece of advice...don't lie about it. </p><p>I've had this come up lots in my career, and my answer is usually something like… "No I'm not familiar with that technology but I am a quick learner, and I enjoy learning".</p><p>Or if it's something I've heard of ..." I've heard of that but I've never used it before. I think it's similar to Y (some other technology I have used), so I imagine it would be useful for Z".</p><p>Don’t fall into the trap of trying to explain a technology that you don't really know and be WRONG! From my perspective, that’s the worst thing you can do. In my experience as an interviewer, I want to see if you actually understand the things you say you know not that you know everything there is to know. I can teach you from there.</p><h2>5. Come Up With Your Reason</h2><p>You have to give employers a<strong> specific reason to hire you</strong>. Being confident is great. Knowing what to expect is great. Having projects to talk about is great... But you to come up with <strong>your reason</strong>! </p><blockquote>Why are you unique? Why should you be hired over the other number of candidates that have similar backgrounds and skillsets? You have to show them your specific value.</blockquote><p>Here's my reason.  "I love to teach. Because of that, I will make your team better. Entry-level developers will learn and grow faster because of me. Sr. developers will continue to grow because I will challenge them."</p><p>In my mind, that's a pretty compelling reason why employers should hire me. So, what's your reason? It's a question I can't answer for you. You have to answer that one for yourself.</p><h2>Recap</h2><p>These are my 5 Tips for Crushing Developer interviews. I hope these tips help you be more confident for your next interview and allow you to walk away feeling like you CRUSHED it. If you have additional tips or questions, let me know on <a href="https://twitter.com/jamesqquick">Twitter</a>, and best of luck in your next developer interview!</p><p><br></p></div>

I am currently teaching a Programming Bootcamp for about 100 students that are going to be looking for jobs soon. With the end drawing near, I've been thinking about what advice to give them when it comes to developer interviews? I was also thinking, why not share that advice with the world?

So, here are 5 Interview Tips that will put you in a better position to crush your next developer interview!
1. Ask What to Expect
This one may seem obvious, but when talking with the recruiter, ask them WHAT TO EXPECT in the interview.  For many people, this seems pushy, but it is well within your right to know what’s coming. Not to mention, the employer will want to see you at your best, so they should want you to feel comfortable.
Questions to ask:

How many people will be there?
How many interviews will there be?
Will it be a panel?
Will I have to write code?
Will I have to talk through code?
Will there be a take-home project?

Throughout my career, I have experienced all different types of interviews; anything from the all-day interviews at Google to a casual conversation over coffee. Regardless of the type of interview, not knowing what to expect would make any interview much more difficult.

2. Be Confident
This is tough for most people including myself, but you have to be confident in your interviews...even if you have to fake it 🤣
Think about this situation:
You’re speaking to someone and their head is down and they don't make eye contact with you. Now think about speaking with a person whose eyes are up, they’re using hand gestures, they’re talking with passion and excitement.
Who would you rather hire?
It's funny how the non-technical things can really hurt you even for a technical interview. Make sure you spend some interview prep time working on the following.

How you communicate
Using hand gestures
How you portray yourself

I know what you're thinking, "I'm not a confident person, so I'm screwed". Well, let me stop you right there. That's just not true!
Confidence is a practiced skill just like anything else!
Being confident is a skill that you can improve over time with practice. Most of us aren't naturally confident believe it or not, but sometimes you just have to fake it 😃 It's something that you have to overcome. You have to overcome the anxiety and trick your brains into believing you are confident and then portray that to people.
A couple of things you can try:
Superman pose – Trick your mind into having that confidence by standing like superman - chest up and looking up to the sky. Do this for 10-15 seconds.
Breathing techniques - Controlling your breathing helps control your emotions and keep the nerves at bay. Do some research on breathing techniques that you can experiment with.
Confidence comes from practice. The more practice the more comfortable you become.

3. Have 2-3 Projects to Talk About
Always go into an interview with a plan of what you are going to talk about. I recommend having at least 2-3 projects that you can reference throughout your interview. 
Coming out of college, In 90% of my interviews, I referenced a Harry Potter Trivia App that I built for Android. Literally any question they threw at me I could reference this project and you need to go into your interview with 2-3 of these projects.
You might get questions like:
Tell me about a time you lead a team ….. reference a project
Tell me about a struggle you have had ….. reference a project
Tell me about a win/fail you have had ….. AGAIN reference a project
Having a plan of what you are going to talk about relieves you of the stress of coming up with an answer on the spot. Plus, these projects should be ones you're proud of and comfortable with, so you're already confident when talking about them.  These projects show your passion for developing and desire to learn and create on your own. Lastly, make sure to include these on your website or Github so they are accessible for other people to look at.
4. Be Honest
Ever been asked about a technology in an interview that you know nothing about? Well, my biggest piece of advice...don't lie about it. 
I've had this come up lots in my career, and my answer is usually something like… "No I'm not familiar with that technology but I am a quick learner, and I enjoy learning".
Or if it's something I've heard of ..." I've heard of that but I've never used it before. I think it's similar to Y (some other technology I have used), so I imagine it would be useful for Z".
Don’t fall into the trap of trying to explain a technology that you don't really know and be WRONG! From my perspective, that’s the worst thing you can do. In my experience as an interviewer, I want to see if you actually understand the things you say you know not that you know everything there is to know. I can teach you from there.
5. Come Up With Your Reason
You have to give employers a specific reason to hire you. Being confident is great. Knowing what to expect is great. Having projects to talk about is great... But you to come up with your reason! 
Why are you unique? Why should you be hired over the other number of candidates that have similar backgrounds and skillsets? You have to show them your specific value.
Here's my reason.  "I love to teach. Because of that, I will make your team better. Entry-level developers will learn and grow faster because of me. Sr. developers will continue to grow because I will challenge them."
In my mind, that's a pretty compelling reason why employers should hire me. So, what's your reason? It's a question I can't answer for you. You have to answer that one for yourself.
Recap
These are my 5 Tips for Crushing Developer interviews. I hope these tips help you be more confident for your next interview and allow you to walk away feeling like you CRUSHED it. If you have additional tips or questions, let me know on Twitter, and best of luck in your next developer interview!

5 Tips for Crushing Developer Interviews

JavaScript arrays have some powerful built-in methods that simplify working with them. Let's look at the array filter() method.

<div><p>JavaScript arrays have some powerful built-in methods that simplify working with them. In this article, let's look at the array <code>filter() </code>method.</p><h2>Getting Started</h2><p>This post is part of a series focused on learning JavaScript array methods. You can find the starter code in <a href="https://bit.ly/jqq-array-practice">this repository</a>.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/c56948e915ae0c094a5fed098ceb1aeb6055883b-3766x1798.png"><p>In that repository, there is a <code>worksheet.js</code> file with some sample Star Wars data. So, clone the repository, open up the <code>worksheet.js</code> file, and scroll down to the Filter section. Alternatively, you can copy the sample data into a JavaScript file without cloning if you choose.</p><p>Here's the sample data.</p><pre><code lang="javascript">const characters = [
    {
        name: 'Luke Skywalker',
        height: 172,
        mass: 77,
        eye_color: 'blue',
        gender: 'male',
    },
    {
        name: 'Darth Vader',
        height: 202,
        mass: 136,
        eye_color: 'yellow',
        gender: 'male',
    },
    {
        name: 'Leia Organa',
        height: 150,
        mass: 49,
        eye_color: 'brown',
        gender: 'female',
    },
    {
        name: 'Anakin Skywalker',
        height: 188,
        mass: 84,
        eye_color: 'blue',
        gender: 'male',
    },
];</code></pre><h2>Array Filter Overview</h2><p>The filter method returns a new array with only the items that we wish to be included. We tell the filter method which items to include by passing it a callback function. This callback function accepts one parameter (each item in the array), and then we return a boolean of whether or not that item should be included in the filtered results. </p><p>For example, if we have an array of numbers and we only want the numbers that are greater than 50, our filter condition would look like this.</p><pre><code lang="javascript">num &gt; 50</code></pre><p>So, the entire filter would look like this.</p><pre><code lang="javascript">const numbers = [25,50,75];
const lessThan50 = numbers.filter( num =&gt; {
  return num &gt; 50;
})</code></pre><p>Let's take a look at a few exercises.</p><h2>1. Get characters with mass greater than 100</h2><p>Remember we call filter by passing it a callback function that determines whether or not a given item should be filtered or included. In this case, the condition is <code>character.mass &gt; 100</code>. So, our filter will look like this.</p><pre><code lang="javascript">const greater100Characters = characters.filter(
    (character) =&gt; {
      return character.mass &gt; 100;
    }
);
</code></pre><p>Since our callback function has a one-line return, we can simplify this arrow function by omitting the <code>return</code> keyword and the function brackets. This syntax implies an implicit return which means that whatever comes after the <code>=&gt;</code> will be automatically returned.</p><pre><code lang="javascript">const greater100Characters = characters.filter(
    (character) =&gt; character.mass &gt; 100
);
</code></pre><p></p><h2>2. Get characters with height less than 200</h2><p>Now, our condition changes a little bit. The condition is <code>character.height &lt; 200</code>.</p><pre><code lang="javascript">const shorterCharacters = characters.filter(
    (character) =&gt; {
      return character.height &lt; 200;
    }
);
</code></pre><p>And again, we can use the abbreviated syntax for implicit returns.</p><pre><code lang="javascript">const shorterCharacters = characters.filter(
    (character) =&gt; character.height &lt; 200
);
</code></pre><h2>3. Get all male characters</h2><p>Now, we only want to get male characters by checking the <code>gender</code> property of each character.</p><pre><code lang="javascript">const maleCharacters = characters.filter(
    (character) =&gt; character.gender === 'male'
);</code></pre><h2>4. Get all female characters</h2><p>Lastly, we can tweak the previous filter to search for the string "female" as the <code>gender</code> property.</p><pre><code lang="javascript">const femaleCharacters = characters.filter(
    (character) =&gt; character.gender === 'female'
);</code></pre><h2>Wrap Up</h2><p>If you want to learn more about JavaScript, make sure to <a href="https://www.youtube.com/c/jamesqquick?sub_confirmation=1">subscribe on YouTube</a>!</p></div>

JavaScript arrays have some powerful built-in methods that simplify working with them. In this article, let's look at the array filter() method.
Getting Started
This post is part of a series focused on learning JavaScript array methods. You can find the starter code in this repository.

In that repository, there is a worksheet.js file with some sample Star Wars data. So, clone the repository, open up the worksheet.js file, and scroll down to the Filter section. Alternatively, you can copy the sample data into a JavaScript file without cloning if you choose.
Here's the sample data.
const characters = [
    {
        name: 'Luke Skywalker',
        height: 172,
        mass: 77,
        eye_color: 'blue',
        gender: 'male',
    },
    {
        name: 'Darth Vader',
        height: 202,
        mass: 136,
        eye_color: 'yellow',
        gender: 'male',
    },
    {
        name: 'Leia Organa',
        height: 150,
        mass: 49,
        eye_color: 'brown',
        gender: 'female',
    },
    {
        name: 'Anakin Skywalker',
        height: 188,
        mass: 84,
        eye_color: 'blue',
        gender: 'male',
    },
];
Array Filter Overview
The filter method returns a new array with only the items that we wish to be included. We tell the filter method which items to include by passing it a callback function. This callback function accepts one parameter (each item in the array), and then we return a boolean of whether or not that item should be included in the filtered results. 
For example, if we have an array of numbers and we only want the numbers that are greater than 50, our filter condition would look like this.
num > 50
So, the entire filter would look like this.
const numbers = [25,50,75];
const lessThan50 = numbers.filter( num => {
  return num > 50;
})
Let's take a look at a few exercises.
1. Get characters with mass greater than 100
Remember we call filter by passing it a callback function that determines whether or not a given item should be filtered or included. In this case, the condition is character.mass > 100. So, our filter will look like this.
const greater100Characters = characters.filter(
    (character) => {
      return character.mass > 100;
    }
);

Since our callback function has a one-line return, we can simplify this arrow function by omitting the return keyword and the function brackets. This syntax implies an implicit return which means that whatever comes after the => will be automatically returned.
const greater100Characters = characters.filter(
    (character) => character.mass > 100
);


2. Get characters with height less than 200
Now, our condition changes a little bit. The condition is character.height < 200.
const shorterCharacters = characters.filter(
    (character) => {
      return character.height < 200;
    }
);

And again, we can use the abbreviated syntax for implicit returns.
const shorterCharacters = characters.filter(
    (character) => character.height < 200
);

3. Get all male characters
Now, we only want to get male characters by checking the gender property of each character.
const maleCharacters = characters.filter(
    (character) => character.gender === 'male'
);
4. Get all female characters
Lastly, we can tweak the previous filter to search for the string "female" as the gender property.
const femaleCharacters = characters.filter(
    (character) => character.gender === 'female'
);
Wrap Up
If you want to learn more about JavaScript, make sure to subscribe on YouTube!

JavaScript Array Filter Method Practice in 5 Minutes

Let's take a first look at the Next.js 10 Image Component.

<div><p>Images can make or break performance on your site. With Next.js 10 and its new <a href="https://nextjs.org/docs/api-reference/next/image">Image component</a>, optimizing image performance in your sites just got a lot easier. This is a sought-after feature from developers, so let's take a look.</p><h2>Starter Code</h2><p>Start by creating a new Next.js project with <code>create-next-app</code>.</p><pre><code lang="sh">npx create-next-app image-demo</code></pre><p>Now, replace the content inside of the <code>index.js</code> file with the following code that displays three images.</p><pre><code lang="javascript">import Head from 'next/head';

export default function Home() {
    return (
        &lt;div&gt;
            &lt;Head&gt;
                &lt;title&gt;Create Next App&lt;/title&gt;
                &lt;link rel="icon" href="/favicon.ico" /&gt;
            &lt;/Head&gt;

            &lt;main&gt;
                &lt;div&gt;
                    &lt;img src="/nyc.jpg" alt="NYC" height={853} width={1280} /&gt;
                    &lt;img src="/nyc2.jpg" alt="NYC" height={1080} width={1920} /&gt;
                    &lt;img src="/nyc3.jpg" alt="NYC" height={1276} width={1920} /&gt;
                &lt;/div&gt;
            &lt;/main&gt;
        &lt;/div&gt;
    );
}
</code></pre><p>You'll need to add images to your project inside of the public directory. I grabbed 3 random pictures of New York from <a href="https://pixabay.com/">Pixabay</a>.</p><p>With images in place, run your project with <code>npm run dev</code> and open your browser to <code>localhost:3000</code>. Then, open the network tab in your developer tools (filter by Img requests) and reload the page.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/d43bffd43b360b7c4bb6ca4e17c5e4bdbcb5dc2a-3840x2070.jpg"><h2>Performance Improvements</h2><p>Notice a few things in your network tab.</p><ul><li>each image is loaded regardless of it being visible to the user</li><li>images sizes are large</li></ul><p>These two things are extremely hurtful for performance. First off, there's no point in loading images that a user will never see. </p><p>Additionally, look at the image sizes.</p><ul><li>447 kb</li><li>795 kb</li><li>567 kb</li></ul><p>Those sizes are large and unnecessary. When we do load an image, we should load the appropriate sizes of an image. For example, if the user is loading the site on their phone, there's no point in loading an extremely large image.</p><p></p><h2>Next.js Image Component</h2><p>The new Image component in Next.js fixes all of this for us. All we need to do is import it, and use it in place of the default <code>img</code> tag. Replace the code in your <code>index.js</code> file with the following.</p><p></p><pre><code lang="javascript">import Head from 'next/head';
import Image from 'next/image';

export default function Home() {
    return (
        &lt;div&gt;
            &lt;Head&gt;
                &lt;title&gt;Create Next App&lt;/title&gt;
                &lt;link rel="icon" href="/favicon.ico" /&gt;
            &lt;/Head&gt;

            &lt;main&gt;
                &lt;div&gt;
                    &lt;Image src="/nyc.jpg" alt="NYC" height={853} width={1280} /&gt;
                    &lt;Image
                        src="/nyc2.jpg"
                        alt="NYC"
                        height={1080}
                        width={1920}
                    /&gt;
                    &lt;Image
                        src="/nyc3.jpg"
                        alt="NYC"
                        height={1276}
                        width={1920}
                    /&gt;
                &lt;/div&gt;
            &lt;/main&gt;
        &lt;/div&gt;
    );
}
</code></pre><p></p><h3>Lazy Loading</h3><p>Refresh your page and now look at the network tab again.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/a0613de11669905802867e124f0a2300960f8d4b-3836x2074.jpg"><p>Notice first that only 2 of the images are being requested. Since I couldn't see the third one on the visible screen, it didn't get loaded. However, if I scroll down a bit, you'll see the new request come through.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/c078d5f7456068a5cf50ae4f6f940faa3a6a24f4-1920x1080.gif"><p>How cool is that? The Image component is smart enough to only request the image if it's going to be visible to the user!</p><h3>Optimal Image Sizes</h3><p>Remember how big the original images were without the Image component. Well, now they are much smaller.</p><ul><li>447 kb -&gt; 291 kb</li><li>795 kb -&gt; 225 kb</li><li>567 kb -&gt; 136 kb</li></ul><p>This is because Next.js will create multiple versions of these images that are optimal for different screen sizes. If I make my screen even smaller, you'll see the image sizes get smaller as well.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/b29a90b015ced1cdbe78deacb3adbd5c3b17d8e0-3838x2068.png"><h2>Wrap Up</h2><p>Just like that, your site is much more performant. By using the Next.js Image component, you're able to take advantage of lazy loading as well as optimizations around image sizes. If you've tried it out, let me know what you think!</p><p></p></div>

Images can make or break performance on your site. With Next.js 10 and its new Image component, optimizing image performance in your sites just got a lot easier. This is a sought-after feature from developers, so let's take a look.
Starter Code
Start by creating a new Next.js project with create-next-app.
npx create-next-app image-demo
Now, replace the content inside of the index.js file with the following code that displays three images.
import Head from 'next/head';

export default function Home() {
    return (
        <div>
            <Head>
                <title>Create Next App</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <main>
                <div>
                    <img src="/nyc.jpg" alt="NYC" height={853} width={1280} />
                    <img src="/nyc2.jpg" alt="NYC" height={1080} width={1920} />
                    <img src="/nyc3.jpg" alt="NYC" height={1276} width={1920} />
                </div>
            </main>
        </div>
    );
}

You'll need to add images to your project inside of the public directory. I grabbed 3 random pictures of New York from Pixabay.
With images in place, run your project with npm run dev and open your browser to localhost:3000. Then, open the network tab in your developer tools (filter by Img requests) and reload the page.

Performance Improvements
Notice a few things in your network tab.

each image is loaded regardless of it being visible to the user
images sizes are large

These two things are extremely hurtful for performance. First off, there's no point in loading images that a user will never see. 
Additionally, look at the image sizes.

447 kb
795 kb
567 kb

Those sizes are large and unnecessary. When we do load an image, we should load the appropriate sizes of an image. For example, if the user is loading the site on their phone, there's no point in loading an extremely large image.

Next.js Image Component
The new Image component in Next.js fixes all of this for us. All we need to do is import it, and use it in place of the default img tag. Replace the code in your index.js file with the following.

import Head from 'next/head';
import Image from 'next/image';

export default function Home() {
    return (
        <div>
            <Head>
                <title>Create Next App</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <main>
                <div>
                    <Image src="/nyc.jpg" alt="NYC" height={853} width={1280} />
                    <Image
                        src="/nyc2.jpg"
                        alt="NYC"
                        height={1080}
                        width={1920}
                    />
                    <Image
                        src="/nyc3.jpg"
                        alt="NYC"
                        height={1276}
                        width={1920}
                    />
                </div>
            </main>
        </div>
    );
}


Lazy Loading
Refresh your page and now look at the network tab again.

Notice first that only 2 of the images are being requested. Since I couldn't see the third one on the visible screen, it didn't get loaded. However, if I scroll down a bit, you'll see the new request come through.

How cool is that? The Image component is smart enough to only request the image if it's going to be visible to the user!
Optimal Image Sizes
Remember how big the original images were without the Image component. Well, now they are much smaller.

447 kb -> 291 kb
795 kb -> 225 kb
567 kb -> 136 kb

This is because Next.js will create multiple versions of these images that are optimal for different screen sizes. If I make my screen even smaller, you'll see the image sizes get smaller as well.

Wrap Up
Just like that, your site is much more performant. By using the Next.js Image component, you're able to take advantage of lazy loading as well as optimizations around image sizes. If you've tried it out, let me know what you think!

Next.js 10 Image Component - A First Look

Creating YouTube videos has changed my life. Here's 5 things I've learned!

<div><p>I've been creating Youtube videos for about 6 years now, and I can confidently say it has changed both my life and my career in a positive way. I've learned so much that I figured it would be worthwhile to share my learnings here!</p><blockquote>Get started creating YouTube videos today with the <a href="http://youtubefordevelopers.com/">YouTube for Developers eBook</a>!</blockquote><h2>1. How to Record Edit, and Produce Videos</h2><p>This first one may seem obvious, but there's a lot more to creating videos than just turning on a camera and talking. </p><img src="https://cdn.sanity.io/images/rx426fbd/production/1289c37738737e6f8301c784814be4970e13b158-3584x2324.png"><h3>Preparation</h3><p>There's a lot of preparation that goes into making a good YouTube video. You have to consider several things for each video that you create.</p><ul><li>who is the audience</li><li>what are the main topics/points to cover</li><li>why they should care about the topic</li></ul><p>Once you have a good idea of who and what, then you can make more specific notes about the flow of the video. Typically, I keep a bullet point list of items to cover in a specific order. </p><h3>Hardware/Software</h3><p>This is where the learning curve really gets steep. There are so many options for both hardware and software that it can be quite intimidating. </p><p>hardware - lights, cameras, microphones, etc.</p><p>software - recording, editing, creating images/graphics, etc.</p><blockquote>Start simple and gradually improve</blockquote><p>The biggest thing I've learned in this category is to take it slow. Don't try to over-invest too early. Start with the simplest options first, then improve. </p><p>Over the course of 6 years, I've spent over 3k on equipment, but most of that has been in the last year or two. It is easier for me to invest more money into equipment knowing that content creation is something I'm taking seriously.</p><blockquote>Want to know what hardware and software I use? Check out <a href="http://jamesqquick.com/uses">my uses page</a>!</blockquote><h3>Editing</h3><p>I'm by no means the best video editor, but it's amazing how much I've learned after creating videos for several years. I typically don't do anything too fancy, but I do know how to splice clips together, add text, basic animations, etc. Video editing has become a fun creative outlet for me.</p><p></p><h2>2. How to Be a Better Communicator and Teacher</h2><img src="https://cdn.sanity.io/images/rx426fbd/production/e71b997d0b3586d16c0a5e680e83ab458157cad1-1000x667.png"><p>After creating 200+ videos, there's no way you don't become better at speaking, explaining technical concepts, and being on camera right? Yes, you're absolutely right! In fact, my ability to speak confidently and teach others has been one of the biggest factors in me progressing throughout my career.</p><blockquote>My YouTube experience has directly led to promotions, teaching opportunities, and more!</blockquote><p>When I worked at FedEx, I made a name for myself by becoming a spokesperson on the tech side to those who weren't developers. Being able to explain technical concepts to non-technical people is an extremely sought after skill. My strong communication skills led to me becoming one of the youngest Architects in FedEx history. I wouldn't have been able to do that without the practice of creating videos.</p><h3>Teaching</h3><p>Although you may not think of this naturally, most YouTubers are teachers. They are teaching you how to do something...cooking, woodworking, programming, etc. I've also been fortunate enough to have a few formal teaching opportunities as well. In fact, I'm currently teaching a cohort through the LaunchCode Bootcamp. I can tell you that having recorded so many videos has made it much easier for me to be able to lead and teach a group of 100 aspiring developers.</p><h2>3. How to Learn New Technologies</h2><p>Here's an interesting fact. <strong>I don't always create videos on topics I already know.</strong> Sometimes, I decide on a topic that I'm not comfortable with and use that as an opportunity to explore something new. Here are a few of the technologies I've learned in that manner.</p><ul><li>Next.js</li><li>Tailwind CSS</li><li>Styled Components</li><li>Netlify and Serverless Functions</li><li>Fauna</li><li>Cloudinary</li><li>VS Code</li><li>Airtable</li></ul><blockquote>Learning is a skill that can carry you a long way in your career.</blockquote><p>The list could go on and on, but it's weird to think that the people creating YouTube videos aren't necessarily experts in a given topic. More commonly, <strong>YouTubers have gotten better and better at learning, so they can turn around and teach you what they've learned</strong>...even if they learned it the previous week.</p><p>One of the big impacts of my learning process is that I'm well-versed in lots of different technologies. I'm not saying I know them all at an intimate level, but I do have a pretty understanding of the landscape and ecosystem of Web Development.</p><p></p><h2>4. How to Market and Advocate for Yourself</h2><p>Marketing yourself is not natural for many of us, myself included. It's actually something I've struggled with going back to the beginning of my career at Microsoft. Honestly, I always felt like I had the same amount (or more) impact as other people, but I wasn't as good at advocating for myself. Because of that, I often didn't get the visibility that others did.</p><blockquote>You're going to be overlooked in your career if you can't advocate for yourself.</blockquote><p>Although it's not natural, marketing and advocating for yourself is just something you have to learn how to do. I know...it's tough but it's true. You're going to be overlooked in your career if you're not able to paint the picture of the impact that you have. Here's one career hack for yourself.</p><blockquote>Take notes about the impact that you have throughout the year. That way, at the end of the year, you have a list full of notes to reflect on. Otherwise, it's easy to forget those small wins from several months ago.</blockquote><p>Alright, enough of the career soapbox. In the content space, i<strong>t's really difficult to gain visibility for your content if you're not sharing it</strong>. Again, it's not natural for me to constantly share things like..."Hey, look at this new thing I created", but I've learned to overcome some of that anxiety. Simply put, people don't watch the videos they don't know exist.</p><p>There is one additional thing I'd like to add. There are ways to share your content in a (for lack of a better word) less obnoxious way. The key is to provide direct value in your posts. For example, if you're sharing a video on building Tic Tac Toe in JavaScript, maybe you can share a key snippet from your code. This provides a level of genuineness in the post because you are providing value directly in the post.</p><p>I'll wrap up this section by saying that I still consider my marketing abilities to be one of my biggest weaknesses. When I compare myself to some of the top content creators in Web Development, this is where I feel I have the most to learn/grow. Although I've gotten better, I still have a long way to go!</p><h3>Advocating for Your Career</h3><p>I couldn't help myself...one more small section 😆</p><p>Let's talk resumes. Words on a resume are just that...words. They don't actually mean anything because you can literally write whatever you want on a resume. What really means something is having proof of the skills you advertise. YouTube videos have proven the skills I list on my resume. </p><blockquote>My YouTube channel is my proof. It is my portfolio.</blockquote><p>People will frequently stress how important a strong portfolio is for progressing in your career, and this is very true. The unique thing for me is that <strong>YouTube is a big portion of my portfolio. It proves that I can communicate and that I understand Web Development.</strong> I strongly believe that creating videos is a very positive step anyone can take in their career.</p><p></p><h2>5. How to Be An Entrepreneur</h2><p>Being an entrepreneur is a mindset and an incredibly powerful one. There's absolutely nothing wrong with working 9-5 for someone else (I've been doing this my entire career), but it's not the only option.</p><p>Being able to make money on your own is an absolute gamechanger. When I made my first bit of money from YouTube ads, I lost my sh*t 🤣  <strong>Although it was only a few pennies, it was proof to me that I could make money on my own doing something I love.</strong></p><p>Fast forward a couple of years, and now I'm able to generate a consistent stream of additional income from a few different places.</p><ul><li>YouTube ads</li><li>sponsored YouTube videos</li><li>paid content (courses, eBooks, etc.)</li></ul><p>At this point, I get daily emails looking to pay me for content; a video, an article, etc. I can't tell you how amazing of a feeling that is. Creating YouTube videos has taught me to value my skills more and more and I look forward to where I take them in the next couple of years.</p><h2>Wrap Up</h2><p>I can talk all day about how creating YouTube videos has changed my life, and I believe it can do the same for you. If you're interested in learning how to get started creating YouTube videos, check out the <a href="http://youtubefordevelopers.com/">YouTube for Developers eBook</a>!</p><p></p><p></p></div>

I've been creating Youtube videos for about 6 years now, and I can confidently say it has changed both my life and my career in a positive way. I've learned so much that I figured it would be worthwhile to share my learnings here!
Get started creating YouTube videos today with the YouTube for Developers eBook!
1. How to Record Edit, and Produce Videos
This first one may seem obvious, but there's a lot more to creating videos than just turning on a camera and talking. 

Preparation
There's a lot of preparation that goes into making a good YouTube video. You have to consider several things for each video that you create.

who is the audience
what are the main topics/points to cover
why they should care about the topic

Once you have a good idea of who and what, then you can make more specific notes about the flow of the video. Typically, I keep a bullet point list of items to cover in a specific order. 
Hardware/Software
This is where the learning curve really gets steep. There are so many options for both hardware and software that it can be quite intimidating. 
hardware - lights, cameras, microphones, etc.
software - recording, editing, creating images/graphics, etc.
Start simple and gradually improve
The biggest thing I've learned in this category is to take it slow. Don't try to over-invest too early. Start with the simplest options first, then improve. 
Over the course of 6 years, I've spent over 3k on equipment, but most of that has been in the last year or two. It is easier for me to invest more money into equipment knowing that content creation is something I'm taking seriously.
Want to know what hardware and software I use? Check out my uses page!
Editing
I'm by no means the best video editor, but it's amazing how much I've learned after creating videos for several years. I typically don't do anything too fancy, but I do know how to splice clips together, add text, basic animations, etc. Video editing has become a fun creative outlet for me.

2. How to Be a Better Communicator and Teacher

After creating 200+ videos, there's no way you don't become better at speaking, explaining technical concepts, and being on camera right? Yes, you're absolutely right! In fact, my ability to speak confidently and teach others has been one of the biggest factors in me progressing throughout my career.
My YouTube experience has directly led to promotions, teaching opportunities, and more!
When I worked at FedEx, I made a name for myself by becoming a spokesperson on the tech side to those who weren't developers. Being able to explain technical concepts to non-technical people is an extremely sought after skill. My strong communication skills led to me becoming one of the youngest Architects in FedEx history. I wouldn't have been able to do that without the practice of creating videos.
Teaching
Although you may not think of this naturally, most YouTubers are teachers. They are teaching you how to do something...cooking, woodworking, programming, etc. I've also been fortunate enough to have a few formal teaching opportunities as well. In fact, I'm currently teaching a cohort through the LaunchCode Bootcamp. I can tell you that having recorded so many videos has made it much easier for me to be able to lead and teach a group of 100 aspiring developers.
3. How to Learn New Technologies
Here's an interesting fact. I don't always create videos on topics I already know. Sometimes, I decide on a topic that I'm not comfortable with and use that as an opportunity to explore something new. Here are a few of the technologies I've learned in that manner.

Next.js
Tailwind CSS
Styled Components
Netlify and Serverless Functions
Fauna
Cloudinary
VS Code
Airtable

Learning is a skill that can carry you a long way in your career.
The list could go on and on, but it's weird to think that the people creating YouTube videos aren't necessarily experts in a given topic. More commonly, YouTubers have gotten better and better at learning, so they can turn around and teach you what they've learned...even if they learned it the previous week.
One of the big impacts of my learning process is that I'm well-versed in lots of different technologies. I'm not saying I know them all at an intimate level, but I do have a pretty understanding of the landscape and ecosystem of Web Development.

4. How to Market and Advocate for Yourself
Marketing yourself is not natural for many of us, myself included. It's actually something I've struggled with going back to the beginning of my career at Microsoft. Honestly, I always felt like I had the same amount (or more) impact as other people, but I wasn't as good at advocating for myself. Because of that, I often didn't get the visibility that others did.
You're going to be overlooked in your career if you can't advocate for yourself.
Although it's not natural, marketing and advocating for yourself is just something you have to learn how to do. I know...it's tough but it's true. You're going to be overlooked in your career if you're not able to paint the picture of the impact that you have. Here's one career hack for yourself.
Take notes about the impact that you have throughout the year. That way, at the end of the year, you have a list full of notes to reflect on. Otherwise, it's easy to forget those small wins from several months ago.
Alright, enough of the career soapbox. In the content space, it's really difficult to gain visibility for your content if you're not sharing it. Again, it's not natural for me to constantly share things like..."Hey, look at this new thing I created", but I've learned to overcome some of that anxiety. Simply put, people don't watch the videos they don't know exist.
There is one additional thing I'd like to add. There are ways to share your content in a (for lack of a better word) less obnoxious way. The key is to provide direct value in your posts. For example, if you're sharing a video on building Tic Tac Toe in JavaScript, maybe you can share a key snippet from your code. This provides a level of genuineness in the post because you are providing value directly in the post.
I'll wrap up this section by saying that I still consider my marketing abilities to be one of my biggest weaknesses. When I compare myself to some of the top content creators in Web Development, this is where I feel I have the most to learn/grow. Although I've gotten better, I still have a long way to go!
Advocating for Your Career
I couldn't help myself...one more small section 😆
Let's talk resumes. Words on a resume are just that...words. They don't actually mean anything because you can literally write whatever you want on a resume. What really means something is having proof of the skills you advertise. YouTube videos have proven the skills I list on my resume. 
My YouTube channel is my proof. It is my portfolio.
People will frequently stress how important a strong portfolio is for progressing in your career, and this is very true. The unique thing for me is that YouTube is a big portion of my portfolio. It proves that I can communicate and that I understand Web Development. I strongly believe that creating videos is a very positive step anyone can take in their career.

5. How to Be An Entrepreneur
Being an entrepreneur is a mindset and an incredibly powerful one. There's absolutely nothing wrong with working 9-5 for someone else (I've been doing this my entire career), but it's not the only option.
Being able to make money on your own is an absolute gamechanger. When I made my first bit of money from YouTube ads, I lost my sh*t 🤣  Although it was only a few pennies, it was proof to me that I could make money on my own doing something I love.
Fast forward a couple of years, and now I'm able to generate a consistent stream of additional income from a few different places.

YouTube ads
sponsored YouTube videos
paid content (courses, eBooks, etc.)

At this point, I get daily emails looking to pay me for content; a video, an article, etc. I can't tell you how amazing of a feeling that is. Creating YouTube videos has taught me to value my skills more and more and I look forward to where I take them in the next couple of years.
Wrap Up
I can talk all day about how creating YouTube videos has changed my life, and I believe it can do the same for you. If you're interested in learning how to get started creating YouTube videos, check out the YouTube for Developers eBook!

5 Things I've Learned From Creating YouTube Videos

The easiest way to add user authentication in your Node.js apps. We will use Auth0 to do the hard work of authentication and then add the Express OpenID Connect library to our Node.js app to trigger login/logout workflows, protecting API routes, etc.

<div><p>Adding authentication in your Node.js applications can be a daunting task. Even if you're using Passport.js to do some of the heavy lifting, it's still tricky to incorporate. In this article, let's see how to use the <a href="https://github.com/auth0/express-openid-connect">express-openid-connect </a>library to add authentication to your Node.js/Express application 💪 Trust me, this is by far the easiest way I've found to do this!</p><h2>Project Setup</h2><p>We are going to be building a Node.js/Express application that has routes for handling login and logout as well as displaying profile information to the user. Let's start from the very beginning. Create a folder on your computer, and then, in the terminal, run <code>npm init -y</code> to set the project up as a JavaScript project.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/377bd00a7efc8b5c93a504999fbee4e0155f884d-1986x1226.png"><p>Then, we'll need to install some dependencies. </p><ul><li>express - server framework</li><li>dotenv - for working with local environment variables</li><li>express-openid-connect - library that handles authentication</li></ul><p> </p><pre><code lang="sh">npm install express dotenv express-openid-connect</code></pre><p>Then, open the folder up with your favorite text editor. Create an <code>app.js</code> file in the root of your directory. Inside of here, add the code to create an express server.</p><pre><code lang="javascript">const express = require('express');
const app = express();

app.get('/', (req, res) =&gt; {
    res.send("hello world");
});

const port = process.env.PORT || 3000;
app.listen(port, () =&gt; {
    console.log(`listening on port ${port}`);
});
</code></pre><p>You can then run the server with <code>node app.js</code> or, if you have nodemon installed, <code>nodemon app.js</code>. You should see a log stating the server is running.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/2157b584d1bbbaecafa58650dc9fe766e4e851cb-1936x414.png"><h2>Setup Environment Variables</h2><p>We are going to need 4 different environment variables to configure the express-openid-connect libary.</p><ol><li>ISSUER_BASE_URL - the base url of the issuer (from the authorization server)</li><li>CLIENT_ID = unique id for the client (from the authorization server)</li><li>BASE_URL- the url of the locally running server (<code>http://localhost:3000</code> in this case)</li><li>SECRET - a random string of at least 32 characters </li></ol><p>Since we are running this app locally, we are going to store these environment variables inside of a <code>.env</code> file. Create that file in the root of your repository and paste in the following.</p><pre><code lang="text">ISSUER_BASE_URL=
CLIENT_ID=
BASE_URL=
SECRET=</code></pre><h3>Auth0 (Or Alternative) Setup</h3><p>In this demo, we are going to use <a href="http://auth0.com/">Auth0</a>, a 3rd party authentication provider, to do the majority of the behind-the-scenes authentication work. <strong>It's important to note that you could use any other 3rd party authentication provider that is OpenID Connect compliant.</strong> That means you could easily swap out to a different provider by changing your environment variables.</p><p>If you are going to use Auth0, you'll need to <a href="http://auth0.com/signup">sign up for a FREE account</a> if you don't have one already. As part of the process, you will create a tenant, which is basically a container for different applications.</p><p>Next, you'll need to create an application and choose <code>Regular Web App</code>.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/8c059153a6cff1fb55e184fbe32805587a21c121-1992x1670.png"><p>With your application created, you'll need to update two settings, the callback URL and logout URL. We will be leveraging the OpenID Connect protocol for handling authentication which requires the user to be redirected to the authorization and then back to our application. Because of this, we need to tell Auth0 where the user should be redirected back to.</p><blockquote>Don't worry, all of the redirect business gets handled by the authorization server. You don't have to write any of that logic.</blockquote><ul><li>Callback URL - http://localhost:3000/callback </li><li>Logout URL - http://localhost:3000</li></ul><img src="https://cdn.sanity.io/images/rx426fbd/production/a0cbbc0c88faacfe8fe14ee8b5801daed3eb3582-1782x1400.png"><p>Be sure to scroll down and hit save.</p><p>Lastly, we need to grab two properties from our Auth0 application, the Domain and the Client ID.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/bfe3c892f9e369ce4ed854905723ba03c75db5a0-1646x554.png"><h3>Update Environment Variables Appropriately</h3><p>Remember, you don't have to use Auth0 to make this work, so if you used another provider, just use those credentials. Now, update the <code>.env</code> file with the appropriate values.</p><pre><code>ISSUER_BASE_URL=https://&lt;YOUR_DOMAIN&gt;
CLIENT_ID=&lt;YOUR_CLIENT_ID&gt;
BASE_URL=http://localhost:3000
SECRET=&lt;LONG_RANDOM_STRING&gt;
</code></pre><p>Lastly, for our environment variables to be accessible while running locally, you need to require the <code>dotenv</code> package and call its <code>config()</code> function like so. Make sure to put this at the top of your file.</p><pre><code lang="javascript">require('dotenv').config();</code></pre><h2>Express Open ID Package Configuration</h2><p>With all of that setup, let's get down to the auth. We need to <code>auth</code> from the express-openid-connection package.</p><p>Then, we configure the auth object using the credentials from our environment variables. Lastly, we use this object as middleware in our Express server. Here's what that looks like.</p><p></p><pre><code lang="javascript">const { auth } = require('express-openid-connect');

app.use(
    auth({
        authRequired: false,
        auth0Logout: true,
        issuerBaseURL: process.env.ISSUER_BASE_URL,
        baseURL: process.env.BASE_URL,
        clientID: process.env.CLIENT_ID,
        secret: process.env.SECRET,
    })
);</code></pre><p>With this middleware in place, we can get access to the logged-in user (if they are logged in) inside of the request parameter of a given endpoint. For example, if we wanted to show whether the user is logged in or not, we could define an index route like so.</p><pre><code lang="javascript">app.get('/', (req, res) =&gt; {
    res.send(req.oidc.isAuthenticated() ? 'Logged in' : 'Logged out');
});</code></pre><p>Restart your server and then open your browser to <code>localhost:3000</code>. and you should see "Logged out".</p><p>Now, for the magic. Notice, we didn't define any login or logout routes specifically. Well, those are already created for us! Now, you can navigate to <code>localhost:3000/login</code> and follow the login process. After you finish, the home page should now show logged in 🥳</p><p></p><img src="https://cdn.sanity.io/images/rx426fbd/production/6996cad14aee0175a8dfc98418d3ec8a5852ef01-1920x1080.gif"><p>How cool is that?!?!</p><h2>Creating a Profile Route</h2><p>Now that you can track a logged-in user, we can create a profile route that will show info about the user. This grabs the information about the logged-in user and returns it as json.</p><pre><code lang="javascript">app.get('/profile', (req, res) =&gt; {
    res.send(JSON.stringify(req.oidc.user));
});</code></pre><p>Restart your server and make sure you are logged in. Then, navigate to <code>localhost:3000/profile</code>.</p><p></p><img src="https://cdn.sanity.io/images/rx426fbd/production/177e1d8ebaaf26b9cbc7043ceafe856ff5ed8fa5-3326x1398.png"><h2>Protecting Routes</h2><p>With the profile route, you don't want someone who isn't logged in to be able to access it. Therefore, we need to add some protection to the route to make sure that doesn't happen. Thankfully, the library we are using will help us do just that. </p><p>Start by importing the <code>requiresAuth </code>middleware from the library.</p><pre><code lang="javascript">const { auth, requiresAuth } = require('express-openid-connect');</code></pre><p>Then, use this middleware in the profile route like so.</p><pre><code lang="javascript">app.get('/profile', requiresAuth(), (req, res) =&gt; {
    res.send(JSON.stringify(req.oidc.user));
});</code></pre><p>Restart your server and logout by going to <code>localhost:3000/logout</code>. Then try to navigate to the <code>/profile</code> route. You should be redirected to the login page!</p><p></p><img src="https://cdn.sanity.io/images/rx426fbd/production/f9f4ad2d81dbb88c497804606d5f8fe68f3a7107-1920x1080.gif"><h2>Wrap Up</h2><p>This library did a lot of work for us. Behind the scenes, it created fully functions login and logout routes. It also tracks the user and exposes user info on the <code>req</code> object of each API request. It also provided middleware to be able to easily protect our API routes by forcing a user to login!</p><p>Here's the full source code, LESS THAN 30 LINES!</p><pre><code lang="javascript">const express = require('express');
const app = express();
require('dotenv').config();
const { auth, requiresAuth } = require('express-openid-connect');

app.use(
    auth({
        authRequired: false,
        auth0Logout: true,
        issuerBaseURL: process.env.ISSUER_BASE_URL,
        baseURL: process.env.BASE_URL,
        clientID: process.env.CLIENT_ID,
        secret: process.env.SECRET,
    })
);

app.get('/', (req, res) =&gt; {
    res.send(req.oidc.isAuthenticated() ? 'Logged in' : 'Logged out');
});

app.get('/profile', requiresAuth(), (req, res) =&gt; {
    res.send(JSON.stringify(req.oidc.user));
});

const port = process.env.PORT || 3000;
app.listen(port, () =&gt; {
    console.log(`listening on port ${port}`);
});
</code></pre><p> </p><p>I've tried several different approaches to handle authentication in Node.js and this is by far the easiest one I've found. </p><p></p><p></p><p></p></div>

Adding authentication in your Node.js applications can be a daunting task. Even if you're using Passport.js to do some of the heavy lifting, it's still tricky to incorporate. In this article, let's see how to use the express-openid-connect library to add authentication to your Node.js/Express application 💪 Trust me, this is by far the easiest way I've found to do this!
Project Setup
We are going to be building a Node.js/Express application that has routes for handling login and logout as well as displaying profile information to the user. Let's start from the very beginning. Create a folder on your computer, and then, in the terminal, run npm init -y to set the project up as a JavaScript project.

Then, we'll need to install some dependencies. 

express - server framework
dotenv - for working with local environment variables
express-openid-connect - library that handles authentication

 
npm install express dotenv express-openid-connect
Then, open the folder up with your favorite text editor. Create an app.js file in the root of your directory. Inside of here, add the code to create an express server.
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send("hello world");
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`listening on port ${port}`);
});

You can then run the server with node app.js or, if you have nodemon installed, nodemon app.js. You should see a log stating the server is running.

Setup Environment Variables
We are going to need 4 different environment variables to configure the express-openid-connect libary.

ISSUER_BASE_URL - the base url of the issuer (from the authorization server)
CLIENT_ID = unique id for the client (from the authorization server)
BASE_URL- the url of the locally running server (http://localhost:3000 in this case)
SECRET - a random string of at least 32 characters 

Since we are running this app locally, we are going to store these environment variables inside of a .env file. Create that file in the root of your repository and paste in the following.
ISSUER_BASE_URL=
CLIENT_ID=
BASE_URL=
SECRET=
Auth0 (Or Alternative) Setup
In this demo, we are going to use Auth0, a 3rd party authentication provider, to do the majority of the behind-the-scenes authentication work. It's important to note that you could use any other 3rd party authentication provider that is OpenID Connect compliant. That means you could easily swap out to a different provider by changing your environment variables.
If you are going to use Auth0, you'll need to sign up for a FREE account if you don't have one already. As part of the process, you will create a tenant, which is basically a container for different applications.
Next, you'll need to create an application and choose Regular Web App.

With your application created, you'll need to update two settings, the callback URL and logout URL. We will be leveraging the OpenID Connect protocol for handling authentication which requires the user to be redirected to the authorization and then back to our application. Because of this, we need to tell Auth0 where the user should be redirected back to.
Don't worry, all of the redirect business gets handled by the authorization server. You don't have to write any of that logic.

Callback URL - http://localhost:3000/callback 
Logout URL - http://localhost:3000

Be sure to scroll down and hit save.
Lastly, we need to grab two properties from our Auth0 application, the Domain and the Client ID.

Update Environment Variables Appropriately
Remember, you don't have to use Auth0 to make this work, so if you used another provider, just use those credentials. Now, update the .env file with the appropriate values.
ISSUER_BASE_URL=https://<YOUR_DOMAIN>
CLIENT_ID=<YOUR_CLIENT_ID>
BASE_URL=http://localhost:3000
SECRET=<LONG_RANDOM_STRING>

Lastly, for our environment variables to be accessible while running locally, you need to require the dotenv package and call its config() function like so. Make sure to put this at the top of your file.
require('dotenv').config();
Express Open ID Package Configuration
With all of that setup, let's get down to the auth. We need to auth from the express-openid-connection package.
Then, we configure the auth object using the credentials from our environment variables. Lastly, we use this object as middleware in our Express server. Here's what that looks like.

const { auth } = require('express-openid-connect');

app.use(
    auth({
        authRequired: false,
        auth0Logout: true,
        issuerBaseURL: process.env.ISSUER_BASE_URL,
        baseURL: process.env.BASE_URL,
        clientID: process.env.CLIENT_ID,
        secret: process.env.SECRET,
    })
);
With this middleware in place, we can get access to the logged-in user (if they are logged in) inside of the request parameter of a given endpoint. For example, if we wanted to show whether the user is logged in or not, we could define an index route like so.
app.get('/', (req, res) => {
    res.send(req.oidc.isAuthenticated() ? 'Logged in' : 'Logged out');
});
Restart your server and then open your browser to localhost:3000. and you should see "Logged out".
Now, for the magic. Notice, we didn't define any login or logout routes specifically. Well, those are already created for us! Now, you can navigate to localhost:3000/login and follow the login process. After you finish, the home page should now show logged in 🥳


How cool is that?!?!
Creating a Profile Route
Now that you can track a logged-in user, we can create a profile route that will show info about the user. This grabs the information about the logged-in user and returns it as json.
app.get('/profile', (req, res) => {
    res.send(JSON.stringify(req.oidc.user));
});
Restart your server and make sure you are logged in. Then, navigate to localhost:3000/profile.


Protecting Routes
With the profile route, you don't want someone who isn't logged in to be able to access it. Therefore, we need to add some protection to the route to make sure that doesn't happen. Thankfully, the library we are using will help us do just that. 
Start by importing the requiresAuth middleware from the library.
const { auth, requiresAuth } = require('express-openid-connect');
Then, use this middleware in the profile route like so.
app.get('/profile', requiresAuth(), (req, res) => {
    res.send(JSON.stringify(req.oidc.user));
});
Restart your server and logout by going to localhost:3000/logout. Then try to navigate to the /profile route. You should be redirected to the login page!


Wrap Up
This library did a lot of work for us. Behind the scenes, it created fully functions login and logout routes. It also tracks the user and exposes user info on the req object of each API request. It also provided middleware to be able to easily protect our API routes by forcing a user to login!
Here's the full source code, LESS THAN 30 LINES!
const express = require('express');
const app = express();
require('dotenv').config();
const { auth, requiresAuth } = require('express-openid-connect');

app.use(
    auth({
        authRequired: false,
        auth0Logout: true,
        issuerBaseURL: process.env.ISSUER_BASE_URL,
        baseURL: process.env.BASE_URL,
        clientID: process.env.CLIENT_ID,
        secret: process.env.SECRET,
    })
);

app.get('/', (req, res) => {
    res.send(req.oidc.isAuthenticated() ? 'Logged in' : 'Logged out');
});

app.get('/profile', requiresAuth(), (req, res) => {
    res.send(JSON.stringify(req.oidc.user));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`listening on port ${port}`);
});

 
I've tried several different approaches to handle authentication in Node.js and this is by far the easiest one I've found.

The Easiest Way to Add Node.js User Authentication

Learn how to customize your VS Code to impress your friends!

<div><p></p><p>The beauty of Visual Studio Code is how easy it is to customize. I've spent tons of time learning how to optimize VS Code for me, so I wanted to share how you can do it too!</p><img src="https://cdn.sanity.io/images/rx426fbd/production/546efb80b204cac97af838f84f6be4fc891bfc2d-1393x540.png"><p>Let's look at 5 different ways you can customize your VS Code.</p><h2>1. Themes</h2><p>Themes are probably the first and easiest way to customize your VS Code to look much nicer. There are so many themes out there, but here are a few of my favorites. </p><p>You can update your theme by installing it as an extension and then selecting it in the command palette. Search for "theme".</p><img src="https://cdn.sanity.io/images/rx426fbd/production/245712cbfd9295da30c2104957a4e72185662f07-1728x504.png"><p>Then, select the theme you want to use.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/f8d239673ea528939195332d10ba1615177959a1-1722x886.png"><p>As you can see, I personally use the <a href="https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2">Cobalt 2 theme</a> from Wes Bos!</p><img src="https://cdn.sanity.io/images/rx426fbd/production/d43044515467f2fb218b53286a081cfb1b9025ee-2746x1842.png"><p>My second favorite is probably <a href="https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple">Shades of Purple </a>from Ahmad Awais.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/b058af187e9d075652ff1873a09f38fc125347d6-2776x1838.png"><p>Lastly, <a href="https://marketplace.visualstudio.com/items?itemName=sdras.night-owl">Night Owl</a> from Sarah Drasner is amazing as well!</p><img src="https://cdn.sanity.io/images/rx426fbd/production/41da3ad64234ed305a74c3530a07166d7e76a12f-2680x1836.png"><h2>2. Font</h2><p>Your font is the second thing that can really make your VS Code stand out. You can change it inside of your settings.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/15ad1865ed41acd9bf145302b18b1f9af66be25c-3840x2160.jpg"><p>I am currently using the<a href="https://github.com/microsoft/cascadia-code"> Cascadia Code</a> font from Microsoft which is free!</p><img src="https://cdn.sanity.io/images/rx426fbd/production/02e3519c103f537f89c486a5ea433b268b53bcef-3840x2160.jpg"><p>Previously, I used <a href="https://github.com/tonsky/FiraCode">Fira Code</a> which is also free!</p><img src="https://cdn.sanity.io/images/rx426fbd/production/cb3a53b808c0492680a2b97c525c652161f18a67-3840x2160.jpg"><h3>Font Ligatures</h3><p>If you look closely at those screenshots, you might notice there are some characters that seem a bit different. If I zoom in a bit and highlight the arrows, you'll be able to see them now.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/a66901b9795cdd2263a4aac5cf20ebe68a5a694f-3840x2160.jpg"><p>I love Font Ligatures so I turned them on as soon as I found out how to do it. You can turn them on in your settings as well.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/b0485cf65ac8d22bb9b9daede88130dbccac4cb4-3840x2160.jpg"><h2>3. Extensions</h2><p>We mentioned extensions above for changing how your VS Code looks, but extensions add a lot more than just aesthetics. They provide almost any sort of functionality that you think VS Code might be missing out of the box. Trust me, you can find an extension for almost anything.</p><blockquote>Download the <a href="https://learn.jamesqquick.com/vs-code-cheat-sheet"> Free VS Code Cheat Sheet</a>!</blockquote><p>Here are my top 10 extensions for Web Development.</p><ol><li><a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag">Auto Rename Tag</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer">Bracket Pair Colorizer</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets">JavaScript (ES6) Snippets</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">Live Server</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=pnp.polacode">Polacode</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=dkundel.vscode-new-file">Advanced New File</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">Git Lens</a> </li><li><a href="https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare">Live Share</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode">Quokka</a></li></ol><p>More details in the video.</p><h2>4. Custom Settings</h2><p>I've shown you a few different settings that you can customize, but there are tons more. The really cool thing is that the changes take place immediately. Here's an example.</p><p>My zoom level starts out at 2. </p><img src="https://cdn.sanity.io/images/rx426fbd/production/e76d591f303678e4dd18840079a41290eb1dfacd-3840x2160.jpg"><p>As soon as I update that setting, VS Code immediately displays the changes.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/045126bc178b58484a6d18efe4167fa2a01e45ac-3840x2160.jpg"><p>Honestly, I would recommend scrolling through the settings that are available and trying them out. In the meantime, here are a few extra fun ones.</p><ul><li>cursor blinking|style|width - customize your cursor</li><li>format on save -automatically format your code when you save</li><li>editor-&gt;rulers - add rulers to your code to keep readable </li><li>editor-&gt;wordWrap - automatically wrap your code</li><li>window-&gt;title - customize the title bar at the top of VS Code</li><li>editor-&gt;minimap-&gt;enabled - toggle the minimap on/off</li></ul><p>Again, there are so many. Do some searching and see what you find!</p><p></p><h2>5. Keyboard Shortcuts</h2><p>First off, I love shortcuts! I try to learn as many shortcuts as I can to save myself some time as a developer. In general, the more time you spend on your keyboard and not your mouse, the better off you'll be.</p><p>VS Code gives you full customization over your shortcuts. You can override any keyboard shortcuts that you want to.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/f03c83636ce4dcfe3267def0da9c0c451253fbe5-3840x2160.jpg"><p>The real power with these shortcuts comes with the "when" property. You have the ability to customize "when" a shortcut should be used. For example, if you only want a shortcut to be used when you are working in the terminal, you can use that as a condition. </p><img src="https://cdn.sanity.io/images/rx426fbd/production/63b18586c55c71e6a243a978d45a89f7659f398f-3840x2160.jpg"><p>The use of the "when" is extremely powerful and you can find more info on how it works in the <a href="https://code.visualstudio.com/docs/getstarted/keybindings">full documentation</a>.</p><p>If you prefer shortcuts from other editors, you can also download keymap extensions which will allow you to import shortcuts from editors like Atom, Sublime, etc.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/327e2970be90e993296eadf4dfc84bcf0b8803d1-3840x2160.jpg"><h2>Wrap Up</h2><p>I could go on and on about customizing VS Code, but hopefully that gives you an idea. If you want more videos on VS Code, make sure to check out my <a href="https://www.youtube.com/playlist?list=PLDlWc9AfQBfZneYg7_KNOwCjy-AcJmtHb">VS Code playlist on YouTube</a>!</p></div>

The beauty of Visual Studio Code is how easy it is to customize. I've spent tons of time learning how to optimize VS Code for me, so I wanted to share how you can do it too!

Let's look at 5 different ways you can customize your VS Code.
1. Themes
Themes are probably the first and easiest way to customize your VS Code to look much nicer. There are so many themes out there, but here are a few of my favorites. 
You can update your theme by installing it as an extension and then selecting it in the command palette. Search for "theme".

Then, select the theme you want to use.

As you can see, I personally use the Cobalt 2 theme from Wes Bos!

My second favorite is probably Shades of Purple from Ahmad Awais.

Lastly, Night Owl from Sarah Drasner is amazing as well!

2. Font
Your font is the second thing that can really make your VS Code stand out. You can change it inside of your settings.

I am currently using the Cascadia Code font from Microsoft which is free!

Previously, I used Fira Code which is also free!

Font Ligatures
If you look closely at those screenshots, you might notice there are some characters that seem a bit different. If I zoom in a bit and highlight the arrows, you'll be able to see them now.

I love Font Ligatures so I turned them on as soon as I found out how to do it. You can turn them on in your settings as well.

3. Extensions
We mentioned extensions above for changing how your VS Code looks, but extensions add a lot more than just aesthetics. They provide almost any sort of functionality that you think VS Code might be missing out of the box. Trust me, you can find an extension for almost anything.
Download the  Free VS Code Cheat Sheet!
Here are my top 10 extensions for Web Development.

Auto Rename Tag
Bracket Pair Colorizer
JavaScript (ES6) Snippets
Live Server
Polacode
Prettier
Advanced New File
Git Lens 
Live Share
Quokka

More details in the video.
4. Custom Settings
I've shown you a few different settings that you can customize, but there are tons more. The really cool thing is that the changes take place immediately. Here's an example.
My zoom level starts out at 2. 

As soon as I update that setting, VS Code immediately displays the changes.

Honestly, I would recommend scrolling through the settings that are available and trying them out. In the meantime, here are a few extra fun ones.

cursor blinking|style|width - customize your cursor
format on save -automatically format your code when you save
editor->rulers - add rulers to your code to keep readable 
editor->wordWrap - automatically wrap your code
window->title - customize the title bar at the top of VS Code
editor->minimap->enabled - toggle the minimap on/off

Again, there are so many. Do some searching and see what you find!

5. Keyboard Shortcuts
First off, I love shortcuts! I try to learn as many shortcuts as I can to save myself some time as a developer. In general, the more time you spend on your keyboard and not your mouse, the better off you'll be.
VS Code gives you full customization over your shortcuts. You can override any keyboard shortcuts that you want to.

The real power with these shortcuts comes with the "when" property. You have the ability to customize "when" a shortcut should be used. For example, if you only want a shortcut to be used when you are working in the terminal, you can use that as a condition. 

The use of the "when" is extremely powerful and you can find more info on how it works in the full documentation.
If you prefer shortcuts from other editors, you can also download keymap extensions which will allow you to import shortcuts from editors like Atom, Sublime, etc.

Wrap Up
I could go on and on about customizing VS Code, but hopefully that gives you an idea. If you want more videos on VS Code, make sure to check out my VS Code playlist on YouTube!

5 Ways to Customize VS Code

Learn to incorporate authentication and real data into a Next.js app!

Build an Authenticated JAMstack App with Next.js, Airtable, Auth0, and Tailwind CSS

Here are my top five pieces of advice for aspiring and learning developers.

<div><p>Since I started my professional career, I’ve worked with countless developers in person and online. I’ve done 1:1 sessions, conference talks, guest lectures, and even taught an 8-month Bootcamp in 2019 (shoutout to the Launch Code crew here in Memphis).</p><p>During all of those engagements, there’s one question I’ve been asked over and over again…</p><blockquote>“What advice would you give someone looking to become a developer?”</blockquote><img src="https://cdn.sanity.io/images/rx426fbd/production/e71b997d0b3586d16c0a5e680e83ab458157cad1-1000x667.png"><p>There are lots of variations to that question, but they are all pretty much the same. Here are my top five pieces of advice!</p><h2>1. Write Code/Build Stuff</h2><p>Here’s the number one piece of advice you’ve probably already heard, but probably need to hear again. Just build something!</p><blockquote>Want to get better at writing code? Write code! Crazy huh?!</blockquote><p>First off, tutorials are great. I’ve learned a ton from them, <strong>but</strong> I learn so much more from pushing myself to build something further on my own. It’s funny how a “simple idea” becomes pretty involved when you start working out the finer details.</p><h3>Build Something for Yourself</h3><p>I know what you’re thinking… “but what do I build?”. Well, think about something that would be useful for yourself. I’ve been playing lots of disc golf recently, and I could use an app to help track my scores.</p><blockquote>Start with a small idea, build it out, and then expand on it!</blockquote><p>This might start out simple, but I could easily build out more advanced features like authentication, saving scores in a database, sharing scores with friends, etc. The cool thing is you’ll be motivated to finish an app that you benefit from.</p><p>Building my <a href="https://www.jamesqquick.com/">personal site</a> has been quite an amazing learning experience, and it’s one of the best decisions I’ve ever made.</p><p>For more ideas, check out <a href="https://github.com/florinpop17/app-ideas">this repository from Florin Pop.</a></p><h3>You Need Projects on Your Portfolio</h3><p>One of the other big benefits of building out a few sample projects is that you can (and should) use them on your portfolio. When you’re looking for your first job, you don’t have the professional experience to show, but you can talk about side projects you’ve worked on.</p><blockquote>Building a Harry Potter Quiz app for Android helped me get a job at Microsoft!</blockquote><img src="https://cdn.sanity.io/images/rx426fbd/production/ff9c656e2fbc64811b170fd344549fad0cb99164-1682x1370.png"><p>During my senior year of college, I interviewed with Microsoft, one of the top tech companies in the world. <strong>In 90% of my interviews, I talked about the Harry Potter Quiz app I made for Android</strong>. They loved that I was passionate and capable enough to learn on my own to build a working application. <strong>These are the kinds of conversations that set you apart from other candidates</strong>.</p><h2>2. Take Your Time and Focus on What You Enjoy</h2><p>It’s common to jump into programming and quickly feel overwhelmed. Every day, you’ll hear people talking about the hot new library, framework, etc. It’s easy to get lost in the whirlwind and not know where to start or where to go next.</p><blockquote>Strive for understanding, not speed!</blockquote><p>Wherever you start your journey (JavaScript, Python, HTML, etc.), take your time and <strong>strive for understanding before moving on to a new concept</strong>. Don’t sweat it if you have to follow the same tutorial ten times before it clicks…we’ve all been there. Embrace the learning process, and don’t let your original expectations (or expectations from others) push you to move too quickly.</p><p>Also, as you spend more time programming, pay attention to the things you enjoy and focus on them. I think it’s good to get experience with different aspects of development, but following your interests helps you stay engaged while learning.</p><blockquote>Focus on the things that you enjoy the most!</blockquote><p>What do you get most excited about? Frontend, backend, design, databases, infrastructure, automation? Don’t be afraid to branch out and gain experience in different areas, but make sure to let yourself enjoy the things you work on.</p><h2>3. Invest in Yourself</h2><p>“Invest in yourself” is the single best piece of advice I’ve ever gotten in my career. It may seem obvious, but often we fail to make intentional efforts to improve ourselves. That has to change!</p><p>Spend some time thinking about what might be holding you back from getting your first job.</p><p><strong>Need to improve your technical skills?</strong> Algorithms? Data structures? React? Find tutorials or courses online and practice, practice, practice.</p><p><strong>Need to improve your people/career skills?</strong> Maybe you need to work on your communication skills? Reach out to a friend and see if they can conduct a mock interview for you.</p><p><strong>Want to become a public speaker?</strong> Sign up to give your first talk at a local (or virtual) meetup! Meetups are often in need of speakers, and they are a great place to get started! The <a href="https://codeconnector.io/">Code Connector Meetup</a> is always looking for lightning talk speakers.</p><p>Whatever it is, search for resources you can use to help improve those areas. Honestly, YouTube is a great start for almost anything! I recently started picking up woodworking on YouTube 💪</p><h3>Sometimes You Have to Spend Money 💵</h3><img src="https://cdn.sanity.io/images/rx426fbd/production/4e4599cfdd89ea72ebe012a2d8902a725de9e471-2132x1858.png"><p>Historically, I’m a pretty cheap person, so financially investing in myself is tough. I’m always looking for the cheapest option, but I’ve learned in most cases you get what you pay for. <strong>Sometimes, you just have to spend the money on the resources you need</strong>. Here are a few things I’ve spent money on.</p><ul><li>tons of courses (from <a href="http://udemy.com/">Udemy</a>, <a href="https://wesbos.com/courses">Wes Bos</a>, <a href="http://leveluptuts.com/">Level Up Tuts</a>, <a href="https://frontendmasters.com/">Frontend Masters</a>, etc.)</li><li>new laptop, monitors, hard drives</li><li>recording equipment for streaming and creating videos</li></ul><p>I know many of us don’t have a lot of disposable income (my wife and I follow a pretty strict budget ourselves), so don’t think you have to spend a lot of money.</p><p>Maybe one month you take $10 to buy a course on Udemy…<br>Maybe you save $10/month for a few months to buy a more expensive course…<br>Maybe find a freelance project for $1000 and use that for a new computer…</p><p>Overall, if you have the means, don’t be afraid to pay for the resources you need to improve yourself and your career.</p><h2>4. Create Your Own Content</h2><p>My personal motto is <strong>Learn Build Teach</strong>.</p><ul><li><strong>learn</strong> constantly (hence the many courses I’ve purchased and taken)</li><li><strong>build</strong> projects based on what you learn</li><li><strong>teach</strong> other people how to do it too</li></ul><blockquote>I built a Discord Server around the philosophy of Learn Build Teach. I'd love to have you there! <a href="https://discord.gg/vM2bagU">Join the Discord</a>.</blockquote><p>One of the biggest benefits of teaching others is it helps reinforce the things you know (or thought you knew). Trying to explain technical concepts helps you gauge how well you actually understand a topic yourself.</p><blockquote>Overall, teaching helps you learn…seems ironic but it’s true!</blockquote><p>Keep in mind that teaching doesn’t always mean standing in front of a classroom. Teaching means creating content that people can learn from, and this can have many different forms.</p><ul><li>tweeting a code snippet</li><li>writing a blog article</li><li>creating a YouTube video</li><li>doing a live stream on Twitch</li></ul><p>Here are a few of the benefits of creating content…</p><h3>Content Improves Your Resume</h3><p>I mentioned earlier that side projects are great to have on your resume. Well, so are blog posts, videos, etc. As I said, being able to explain technical concepts in an understandable way is a skill. If I was looking to hire someone, the ability to help teach others on my team would be an attractive characteristic.</p><blockquote>Teaching is one of the big ways I made a name for myself during my career at FedEx. My ability to teach others in my organization helped me establish myself as a leader in technology.</blockquote><h3>Build a Brand</h3><p>Creating content can also help build your brand. If you start to make a name for yourself by creating JavaScript content, for example, you never what that brand can lead to.</p><p>Gaining more followers on Twitter, YouTube, etc. might seem vain, but practically speaking it can be very useful. The more people that know about your content and your brand, the more people that reach out to you about job opportunities. <strong>Again, I’d rather hire someone with technical skills as well as the ability to communicate effectively and teach others.</strong></p><h3>Document for Yourself as well as Others</h3><p>You can also use the content as a resource for yourself. By documenting the things you learn in a video or blog post, you create a reference for yourself going forward. If you ever forget how to do X in the future, go back and read your post.</p><blockquote>I’ve come across my previous articles/videos many times in the past when looking for an answer to a specific problem</blockquote><h3>Create Content to Learn Content</h3><p></p><img src="https://cdn.sanity.io/images/rx426fbd/production/2d577ef8beb52333f6767764108b853fcf249a45-2790x1730.png"><p>I use creating content as a way to force myself to learn new things. For instance, I’m currently learning more about Next.js. Well, if I give myself a deadline for creating a video in the next two weeks, I’ve now given myself a reason to learn. By forcing myself to create videos on different topics, I learn more and more.</p><blockquote>I've created 100s of <a href="https://www.youtube.com/c/jamesqquick">videos on YouTube</a>, and I learn something new with each one!</blockquote><h2>5. Invest in the Community</h2><p>After teaching an 8-month Bootcamp, I realized that the most successful students were <strong>the ones who invested in each other</strong>. They were the ones who asked the most questions, who shared the things they learned, came out to meetups (pre-COVID), etc.</p><p>As your learning and looking to build a new career, you need people in your circle that you can trust.</p><p>You need people <strong>who won’t judge</strong> when you ask a question you’re embarrassed to ask.<br>You need people that <strong>you can learn from</strong>.<br>You need people that you can <strong>teach something to</strong> (benefits of teaching above ☝️).</p><p></p><blockquote>I built a Discord for the community around my motto, <strong>Learn Build Teach</strong>. <a href="https://discord.gg/vM2bagU">Join the Discord</a>.</blockquote><img src="https://cdn.sanity.io/images/rx426fbd/production/efe7b5703201fc83844f20df5fe76e94a9e83a9d-2214x1484.png"><p>Honestly, you just need something to feel like you’re a part of something.</p><p>You need to know it’s <strong>not just you.</strong><br>You need to know that you’re not the only that faces<strong> imposter syndrome.</strong><br>You need to know <strong>everyone else is constantly learning as well.</strong><br>You need to know <strong>experienced developers Google the shit out of everything too.</strong></p><p>Connecting with other people in different stages of their careers gives you some perspective and (hopefully) a sense of belonging, and that’s a pretty powerful thing.</p><h2>Wrap Up</h2><p>I love programming because it’s simultaneously one of the easiest and difficult careers to get into. It’s “easy” because there are so many resources. You don’t need a 4-year degree (at many companies). You can literally change careers from watching FREE YouTube videos and building out a nice portfolio.</p><p>At the same time, learning to program is just difficult, especially when you try to do it in isolation. You need a community that you trust to support you. Once you find your rhythm of learning and sharing, you’ll be in a good spot!</p><p>As you're learning I'd love to hear about what you're working on. Feel free to share with me on <a href="https://twitter.com/jamesqquick">Twitter</a>!</p></div>

Since I started my professional career, I’ve worked with countless developers in person and online. I’ve done 1:1 sessions, conference talks, guest lectures, and even taught an 8-month Bootcamp in 2019 (shoutout to the Launch Code crew here in Memphis).
During all of those engagements, there’s one question I’ve been asked over and over again…
“What advice would you give someone looking to become a developer?”

There are lots of variations to that question, but they are all pretty much the same. Here are my top five pieces of advice!
1. Write Code/Build Stuff
Here’s the number one piece of advice you’ve probably already heard, but probably need to hear again. Just build something!
Want to get better at writing code? Write code! Crazy huh?!
First off, tutorials are great. I’ve learned a ton from them, but I learn so much more from pushing myself to build something further on my own. It’s funny how a “simple idea” becomes pretty involved when you start working out the finer details.
Build Something for Yourself
I know what you’re thinking… “but what do I build?”. Well, think about something that would be useful for yourself. I’ve been playing lots of disc golf recently, and I could use an app to help track my scores.
Start with a small idea, build it out, and then expand on it!
This might start out simple, but I could easily build out more advanced features like authentication, saving scores in a database, sharing scores with friends, etc. The cool thing is you’ll be motivated to finish an app that you benefit from.
Building my personal site has been quite an amazing learning experience, and it’s one of the best decisions I’ve ever made.
For more ideas, check out this repository from Florin Pop.
You Need Projects on Your Portfolio
One of the other big benefits of building out a few sample projects is that you can (and should) use them on your portfolio. When you’re looking for your first job, you don’t have the professional experience to show, but you can talk about side projects you’ve worked on.
Building a Harry Potter Quiz app for Android helped me get a job at Microsoft!

During my senior year of college, I interviewed with Microsoft, one of the top tech companies in the world. In 90% of my interviews, I talked about the Harry Potter Quiz app I made for Android. They loved that I was passionate and capable enough to learn on my own to build a working application. These are the kinds of conversations that set you apart from other candidates.
2. Take Your Time and Focus on What You Enjoy
It’s common to jump into programming and quickly feel overwhelmed. Every day, you’ll hear people talking about the hot new library, framework, etc. It’s easy to get lost in the whirlwind and not know where to start or where to go next.
Strive for understanding, not speed!
Wherever you start your journey (JavaScript, Python, HTML, etc.), take your time and strive for understanding before moving on to a new concept. Don’t sweat it if you have to follow the same tutorial ten times before it clicks…we’ve all been there. Embrace the learning process, and don’t let your original expectations (or expectations from others) push you to move too quickly.
Also, as you spend more time programming, pay attention to the things you enjoy and focus on them. I think it’s good to get experience with different aspects of development, but following your interests helps you stay engaged while learning.
Focus on the things that you enjoy the most!
What do you get most excited about? Frontend, backend, design, databases, infrastructure, automation? Don’t be afraid to branch out and gain experience in different areas, but make sure to let yourself enjoy the things you work on.
3. Invest in Yourself
“Invest in yourself” is the single best piece of advice I’ve ever gotten in my career. It may seem obvious, but often we fail to make intentional efforts to improve ourselves. That has to change!
Spend some time thinking about what might be holding you back from getting your first job.
Need to improve your technical skills? Algorithms? Data structures? React? Find tutorials or courses online and practice, practice, practice.
Need to improve your people/career skills? Maybe you need to work on your communication skills? Reach out to a friend and see if they can conduct a mock interview for you.
Want to become a public speaker? Sign up to give your first talk at a local (or virtual) meetup! Meetups are often in need of speakers, and they are a great place to get started! The Code Connector Meetup is always looking for lightning talk speakers.
Whatever it is, search for resources you can use to help improve those areas. Honestly, YouTube is a great start for almost anything! I recently started picking up woodworking on YouTube 💪
Sometimes You Have to Spend Money 💵

Historically, I’m a pretty cheap person, so financially investing in myself is tough. I’m always looking for the cheapest option, but I’ve learned in most cases you get what you pay for. Sometimes, you just have to spend the money on the resources you need. Here are a few things I’ve spent money on.

tons of courses (from Udemy, Wes Bos, Level Up Tuts, Frontend Masters, etc.)
new laptop, monitors, hard drives
recording equipment for streaming and creating videos

I know many of us don’t have a lot of disposable income (my wife and I follow a pretty strict budget ourselves), so don’t think you have to spend a lot of money.
Maybe one month you take $10 to buy a course on Udemy…
Maybe you save $10/month for a few months to buy a more expensive course…
Maybe find a freelance project for $1000 and use that for a new computer…
Overall, if you have the means, don’t be afraid to pay for the resources you need to improve yourself and your career.
4. Create Your Own Content
My personal motto is Learn Build Teach.

learn constantly (hence the many courses I’ve purchased and taken)
build projects based on what you learn
teach other people how to do it too

I built a Discord Server around the philosophy of Learn Build Teach. I'd love to have you there! Join the Discord.
One of the biggest benefits of teaching others is it helps reinforce the things you know (or thought you knew). Trying to explain technical concepts helps you gauge how well you actually understand a topic yourself.
Overall, teaching helps you learn…seems ironic but it’s true!
Keep in mind that teaching doesn’t always mean standing in front of a classroom. Teaching means creating content that people can learn from, and this can have many different forms.

tweeting a code snippet
writing a blog article
creating a YouTube video
doing a live stream on Twitch

Here are a few of the benefits of creating content…
Content Improves Your Resume
I mentioned earlier that side projects are great to have on your resume. Well, so are blog posts, videos, etc. As I said, being able to explain technical concepts in an understandable way is a skill. If I was looking to hire someone, the ability to help teach others on my team would be an attractive characteristic.
Teaching is one of the big ways I made a name for myself during my career at FedEx. My ability to teach others in my organization helped me establish myself as a leader in technology.
Build a Brand
Creating content can also help build your brand. If you start to make a name for yourself by creating JavaScript content, for example, you never what that brand can lead to.
Gaining more followers on Twitter, YouTube, etc. might seem vain, but practically speaking it can be very useful. The more people that know about your content and your brand, the more people that reach out to you about job opportunities. Again, I’d rather hire someone with technical skills as well as the ability to communicate effectively and teach others.
Document for Yourself as well as Others
You can also use the content as a resource for yourself. By documenting the things you learn in a video or blog post, you create a reference for yourself going forward. If you ever forget how to do X in the future, go back and read your post.
I’ve come across my previous articles/videos many times in the past when looking for an answer to a specific problem
Create Content to Learn Content


I use creating content as a way to force myself to learn new things. For instance, I’m currently learning more about Next.js. Well, if I give myself a deadline for creating a video in the next two weeks, I’ve now given myself a reason to learn. By forcing myself to create videos on different topics, I learn more and more.
I've created 100s of videos on YouTube, and I learn something new with each one!
5. Invest in the Community
After teaching an 8-month Bootcamp, I realized that the most successful students were the ones who invested in each other. They were the ones who asked the most questions, who shared the things they learned, came out to meetups (pre-COVID), etc.
As your learning and looking to build a new career, you need people in your circle that you can trust.
You need people who won’t judge when you ask a question you’re embarrassed to ask.
You need people that you can learn from.
You need people that you can teach something to (benefits of teaching above ☝️).

I built a Discord for the community around my motto, Learn Build Teach. Join the Discord.

Honestly, you just need something to feel like you’re a part of something.
You need to know it’s not just you.
You need to know that you’re not the only that faces imposter syndrome.
You need to know everyone else is constantly learning as well.
You need to know experienced developers Google the shit out of everything too.
Connecting with other people in different stages of their careers gives you some perspective and (hopefully) a sense of belonging, and that’s a pretty powerful thing.
Wrap Up
I love programming because it’s simultaneously one of the easiest and difficult careers to get into. It’s “easy” because there are so many resources. You don’t need a 4-year degree (at many companies). You can literally change careers from watching FREE YouTube videos and building out a nice portfolio.
At the same time, learning to program is just difficult, especially when you try to do it in isolation. You need a community that you trust to support you. Once you find your rhythm of learning and sharing, you’ll be in a good spot!
As you're learning I'd love to hear about what you're working on. Feel free to share with me on Twitter!

Top 5 Pieces of Advice for Aspiring and Learning Developers

You no longer have to download the Settings Sync extension in Visual Studio Code.

<div><p>Up until recently, synchronizing your settings across multiple instances of VS Code required you to download a 3rd party extension. Well, you no longer have to download a separate extension. Settings Sync is built into VS Code, and it's awesome!</p><blockquote>Want to learn everything you need to know about VS Code? Check out the <a href="https://www.udemy.com/course/learn-visual-studio-code/">Learn VS Code course</a>!</blockquote><h2>Setup</h2><p>VS Code has made this process as easy as possible to set up. If you open up your settings menu, you'll now see a big button that says "Turn on Settings Sync". Click that.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/e433e2f40e15efcdf347823a4a5562e3c232bd3b-2620x820.png"><p>After that, you'll be prompted with what exactly you want to sync. Most likely, you'll choose to sync everything, but that's up to you.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/2611391b529f9320b8328c78d3eb41bfe038bc6e-1436x422.png"><p>You'll need to log in with either a Microsoft or Github. Are those one and the same now that Microsoft bought Github 🤣?</p><img src="https://cdn.sanity.io/images/rx426fbd/production/06c332f494ad079f2a93767c1f1f8148a105b1ac-1446x262.png"><p>Then...BOOM! VS Code does some magic behind the scenes!</p><h2>Check the Sync Details</h2><p>You can check the status of your latest syncs by opening the command palette and running the <code>Settings Sync: Show Synced Data</code> command. </p><img src="https://cdn.sanity.io/images/rx426fbd/production/593d84a7c0121d8e5c7c50b9230b8444948b9997-1008x1776.png"><h2>Real-Time Sync</h2><p>If you get this set up on two different instances of VS Code you can see that changing settings on one will update the settings on another in real-time! I tested this out by running two instances of VS Code on the same computer (one is the stable version and one is the insider's edition)</p><img src="https://cdn.sanity.io/images/rx426fbd/production/0831bb872c2ba8020a32d667aad7f23b74ee4490-1916x1071.gif"><p></p></div>

Up until recently, synchronizing your settings across multiple instances of VS Code required you to download a 3rd party extension. Well, you no longer have to download a separate extension. Settings Sync is built into VS Code, and it's awesome!
Want to learn everything you need to know about VS Code? Check out the Learn VS Code course!
Setup
VS Code has made this process as easy as possible to set up. If you open up your settings menu, you'll now see a big button that says "Turn on Settings Sync". Click that.

After that, you'll be prompted with what exactly you want to sync. Most likely, you'll choose to sync everything, but that's up to you.

You'll need to log in with either a Microsoft or Github. Are those one and the same now that Microsoft bought Github 🤣?

Then...BOOM! VS Code does some magic behind the scenes!
Check the Sync Details
You can check the status of your latest syncs by opening the command palette and running the Settings Sync: Show Synced Data command. 

Real-Time Sync
If you get this set up on two different instances of VS Code you can see that changing settings on one will update the settings on another in real-time! I tested this out by running two instances of VS Code on the same computer (one is the stable version and one is the insider's edition)

Settings Sync is Built Into Visual Studio Code Now

Want to supercharge your Git workflow inside of Visual Studio Code? Well, you need to check out the GitLens extension. It's jam-packed with amazing features for improving your Git workflow right inside of VS Code.

<div><p>The other day, I saw a list of GUI tools for working with Git, and I thought, what about VS Code? </p><p>VS Code already has amazing built-in support for Git, but it also has a vast ecosystem of extensions. In this article, let's take a look at the one extension that will <strong>supercharge your Git workflow in VS Code</strong>, <a href="https://gitlens.amod.io">the GitLens Extension</a>.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/a76d0b2a33ef4ec4aed3a98456f5d2b4f1efdc91-3770x1824.png"><h2>How to Install</h2><p>To install the extension, open the extension panel inside of VS Code and search for GitLens and then click install.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/739c080a5e5fb60a015fa6fafd8307cf4b2aef5e-3356x2096.png"><p>Once you install, you'll have a new menu item in the sidebar with lots of options. We'll get to those more in a minute.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/0ce2d78a00b198119444f7fd9241843b80f3d0fc-1134x2096.png"><h2>Blame Information</h2><p>This extension provides simple Git blame information, who wrote the code, when they committed, etc. By default, you can see this in two different places, alongside the code, and on the bottom bar.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/a07748bb29b41b5f47377bdae3f5add55e2036ec-2678x1068.jpg"><p>It's pretty useful to see this info at a glance. In addition, if you hover over the blame info you get a context menu with some extra info including a button to view the commit.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/f23f5ed46e960136d7d2d1af784f5c2c20f31b94-2366x1542.png"><p></p><h2>File and Line History</h2><p>You also have the ability to view and compare Git history by file and even by line in the sidebar menu. This menu is contextual, so it will pull up information about the file and line you currently are on in the editor itself.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/51b7d40dd1362f7904fd91fa2fc315af9f3a77bd-3178x1192.png"><p>From there, you can also pull up a diff comparing that line or file vs the previous commit. This is incredibly handy to quickly see what has changed.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/b584ab7c74ca0cb76c30dfd2c1036e5e8dc3c4f8-3836x2160.png"><p></p><h2>Search Commits</h2><p>Another great feature is the ability to search through commits. You've got several different options to search by. </p><ul><li>message</li><li>author</li><li>commit</li><li>file</li><li>changes</li></ul><p></p><img src="https://cdn.sanity.io/images/rx426fbd/production/73f9b9c82beba4d0a8197e32588fbda3a2605060-3834x2160.png"><p>This is by far the easiest way I've found to search through commits.</p><h2>Customization</h2><p>There are also lots of customization options for this extension. There are too many to list them all out, but here are a few that I found useful.</p><ul><li><strong>Blame: format</strong> - customize how your blame messages look</li><li><strong>Headmap:Enabled</strong> - toggle on a visual heatmap to show how recently code has changed (you can also customize the heat colors!)</li><li><strong>Hovers &gt; Annotations:Enabled </strong>- toggle whether you want the additional details when hovering on a blame message</li></ul><p>Again, there are so many options. I suggest scrolling through and taking a look. You can find them in your VS Code settings Window.</p><p></p><img src="https://cdn.sanity.io/images/rx426fbd/production/ff18c1df56b1a3545bb5ab6fa09dfdabf073cc7f-3834x2158.png"><h2>Other Commands</h2><p>There's so much this extension can do, that you'll honestly just have to take a look for yourself. I would suggest opening the command palette (<code>CMD+Shift+P</code> on Mac and <code>CNTRL+SHIFT+P</code> on Windows), searching <code>GitLens,</code> and scrolling through the available commands.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/8ab6499992e00c161688d3bf5ad6d2ad06392639-1732x886.png"><p>This extension does a ton, so it's worth just poking around to see what's useful.</p><h2></h2></div>

The other day, I saw a list of GUI tools for working with Git, and I thought, what about VS Code? 
VS Code already has amazing built-in support for Git, but it also has a vast ecosystem of extensions. In this article, let's take a look at the one extension that will supercharge your Git workflow in VS Code, the GitLens Extension.

How to Install
To install the extension, open the extension panel inside of VS Code and search for GitLens and then click install.

Once you install, you'll have a new menu item in the sidebar with lots of options. We'll get to those more in a minute.

Blame Information
This extension provides simple Git blame information, who wrote the code, when they committed, etc. By default, you can see this in two different places, alongside the code, and on the bottom bar.

It's pretty useful to see this info at a glance. In addition, if you hover over the blame info you get a context menu with some extra info including a button to view the commit.


File and Line History
You also have the ability to view and compare Git history by file and even by line in the sidebar menu. This menu is contextual, so it will pull up information about the file and line you currently are on in the editor itself.

From there, you can also pull up a diff comparing that line or file vs the previous commit. This is incredibly handy to quickly see what has changed.


Search Commits
Another great feature is the ability to search through commits. You've got several different options to search by. 

message
author
commit
file
changes


This is by far the easiest way I've found to search through commits.
Customization
There are also lots of customization options for this extension. There are too many to list them all out, but here are a few that I found useful.

Blame: format - customize how your blame messages look
Headmap:Enabled - toggle on a visual heatmap to show how recently code has changed (you can also customize the heat colors!)
Hovers > Annotations:Enabled - toggle whether you want the additional details when hovering on a blame message

Again, there are so many options. I suggest scrolling through and taking a look. You can find them in your VS Code settings Window.


Other Commands
There's so much this extension can do, that you'll honestly just have to take a look for yourself. I would suggest opening the command palette (CMD+Shift+P on Mac and CNTRL+SHIFT+P on Windows), searching GitLens, and scrolling through the available commands.

This extension does a ton, so it's worth just poking around to see what's useful.

Supercharge Your Git Workflow with the GitLens VS Code Extension

Learn how to parse JSON body from a post request in Express.

<div><p>By default, you won't be able to parse JSON from the body of an incoming request with Express.js. The good news it, though, that it only takes one extra line of configuration.</p><p></p><p>Previously, to parse JSON bodies, you would have had to include the <code>body-parser</code> NPM package. Express had this capability built-in several versions back, but then they got rid of it. Thanksfully, Express has decided to include this capability again. You just need to activate it.</p><p></p><p>To do this, add this one line of configuration to your server. You will need to make sure you include this line before the definition of your endpoints.</p><p></p><pre><code lang="javascript">app.use(express.json());
</code></pre><p></p><p>Then, in your endpoint, you can access the body like so.</p><p></p><pre><code lang="javascript">app.post('/api/endpoint', (req,res) =&gt; {
  const body = req.body;
  res.json(body);
})</code></pre><p></p><p>And here's what a basic Express server looks like.</p><p></p><pre><code lang="javascript">const express = require('express');
const app = express();

app.use(express.json());

app.post('/api/endpoint', (req, res) =&gt; {
  const body = req.body; 
  res.json(req.body);
});

app.listen(3000);</code></pre><p></p></div>

By default, you won't be able to parse JSON from the body of an incoming request with Express.js. The good news it, though, that it only takes one extra line of configuration.

Previously, to parse JSON bodies, you would have had to include the body-parser NPM package. Express had this capability built-in several versions back, but then they got rid of it. Thanksfully, Express has decided to include this capability again. You just need to activate it.

To do this, add this one line of configuration to your server. You will need to make sure you include this line before the definition of your endpoints.

app.use(express.json());


Then, in your endpoint, you can access the body like so.

app.post('/api/endpoint', (req,res) => {
  const body = req.body;
  res.json(body);
})

And here's what a basic Express server looks like.

const express = require('express');
const app = express();

app.use(express.json());

app.post('/api/endpoint', (req, res) => {
  const body = req.body; 
  res.json(req.body);
});

app.listen(3000);

Parse JSON Request Body in Express

As a developer, it's nice to be able to create things to make your life easier. I was tired of having to open up my videos just to copy the link and share it. So, I created my first Chrome Extension! It shows me a list of my most recent videos and allows me to copy the link directly!

<div><p>As a developer, it's nice to be able to create things to make your life easier. I was tired of having to open up my previous YouTube videos just to copy the link and share it. So, I created my first Chrome Extension! It shows me a list of my most recent videos and allows me to copy the link directly.</p><blockquote>As a Developer you have the power to build whatever you want!</blockquote><p>Here's how I did it.</p><h2>Project Setup</h2><p>The first thing I did was create a <code>manifest.json</code> file where you can store the metadata for your app. There's a couple of key properties.</p><p></p><ul><li>manifest-version - Google says this should be 2 currently</li><li>name and description - hopefully self-explanatory</li><li>version - the version of your extension</li><li>browser action - this is where we will specify our icon as well as what HTML to show when a user clicks on the extension</li><li>permissions - array of permissions required (I didn't need any specifically)</li></ul><p></p><p>Here's what my manifest file looks like.</p><p></p><pre><code lang="json">{
    "manifest_version": 2,
    "name": "JQQ YouTube Links",
    "description": "Shows recent YT video links from JQQ",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": []
}
</code></pre><p></p><p>Notice that I specified <code>popup.html </code>as my default popup. This means that HTML will be what get's displayed when the user clicks the extension. Since I needed JS and CSS, I added three new files.</p><p></p><ul><li>popup.html</li><li>popup.js</li><li>popup.css</li></ul><p></p><p>Here's my full HTML file.</p><pre><code lang="html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8" /&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
        &lt;title&gt;JQQ YouTube Links&lt;/title&gt;
        &lt;link rel="stylesheet" href="popup.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="container"&gt;
            &lt;h2&gt;JQQ YouTube Links&lt;/h2&gt;
            &lt;ol id="linksList"&gt;&lt;/ol&gt;
        &lt;/div&gt;
        &lt;script src="popup.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre><p>Notice I linked to the JS and CSS files and included an ordered list element that I will populate in JavaScript.</p><h2>How To Test</h2><p>You can test this in two ways. One is to open the HTML page in the browser just like any other app. I would suggest using the Live Server extension in VS Code to help with that. </p><p>The second way to test is to create the Chrome extension by connecting it to the directory your code is inside. For this, you'll need to open <code>chrome://extensions</code> and turn on developer mode. There should be a toggle for it.</p><p>Then, choose <code>Load Unpacked</code> and connect it to your code folder. After you do, you'll see your extension listed.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/5061b8448ea6398f1e18de6abf1f40d68f3abd0f-3834x1130.png"><p>After that, you should see the extension in your extension bar, and when you click it, you'll the base HTML being displayed.</p><h2>Displaying Links</h2><p>One tricky thing I had to figure out was how to get the list of recent YouTube video links. I opted to create a serverless function (completely seperate from this) for this instead of trying to work with the Google APIs directly in the extension. It just ended up being easier this way. It's hosted on Netlify and you can check out the <a href="https://github.com/jamesqquick/jqq-util-functions/blob/master/functions/recentYTVideos.js">source code</a> if you want.</p><p>With that function in place, I could make a Fetch request in JavaScript to get the links, then dynamically generate the HTML for each <code>li</code>. Here's the snippet. Notice that everything is wrapped inside of the DOMContentLoaded event.</p><p></p><pre><code lang="javascript">document.addEventListener('DOMContentLoaded', async () =&gt; {
    const linksList = document.getElementById('linksList');
    const url = 'https://jqq-utils.netlify.app/api/recentYTVideos';

    try {
        const res = await fetch(url);
        const videos = await res.json();
        const videosHTML = videos
            .map((video) =&gt; {
                const videoUrl = `https://www.youtube.com/watch?v=${video.videoId}`;
                return `&lt;li class="video-link"&gt;
                &lt;button class="btn" data-url="${videoUrl}"&gt;Copy URL&lt;/button&gt;
                &lt;a class="btn" href="${videoUrl}" rel="noopener noreferrer" target="_blank"&gt;Watch&lt;/a&gt;
                ${video.title}
            &lt;/li&gt;
            `;
            })
            .join('');
        linksList.innerHTML = videosHTML;
        const videoLinks = [...document.querySelectorAll('.video-link')];
        videoLinks.forEach((link) =&gt; link.addEventListener('click', copy));
    } catch (err) {
        console.error(err);
    }
});
</code></pre><p></p><p>From there, I needed to add the Copy functionality. This was a little bit hacky, but I couldn't find a better way. Basically, you create an extra DOM element, set its text, copy that text, then remove that DOM element. It works great and the user doesn't even know there's anything weird happening 😁</p><pre><code lang="javascript">const copy = (e) =&gt; {
        const str = e.target.dataset.url;
        const el = document.createElement('textarea');
        el.value = str;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.removeChild(el);
    };</code></pre><p></p><p>Here's the full JavaScript file.</p><p></p><pre><code lang="javascript">document.addEventListener('DOMContentLoaded', async () =&gt; {
    const linksList = document.getElementById('linksList');
    const url = 'https://jqq-utils.netlify.app/api/recentYTVideos';

    const copy = (e) =&gt; {
        const str = e.target.dataset.url;
        alert(str);
        const el = document.createElement('textarea');
        el.value = str;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.removeChild(el);
    };
    try {
        const res = await fetch(url);
        const videos = await res.json();
        const videosHTML = videos
            .map((video) =&gt; {
                const videoUrl = `https://www.youtube.com/watch?v=${video.videoId}`;
                return `&lt;li class="video-link"&gt;
                &lt;button class="btn" data-url="${videoUrl}"&gt;Copy URL&lt;/button&gt;
                &lt;a class="btn" href="${videoUrl}" rel="noopener noreferrer" target="_blank"&gt;Watch&lt;/a&gt;
                ${video.title}
            &lt;/li&gt;
            `;
            })
            .join('');
        linksList.innerHTML = videosHTML;
        const videoLinks = [...document.querySelectorAll('.video-link')];
        videoLinks.forEach((link) =&gt; link.addEventListener('click', copy));
    } catch (err) {
        console.error(err);
    }
});
</code></pre><p>For finishing touches, I threw in a bit of styling.</p><pre><code lang="css">* {
    font-family: sans-serif;
}

body {
    border-radius: 10px;
}
.container {
    padding: 1rem 0.5rem;
    height: 400px;
    width: 400px;
}

#linksList {
    padding-left: 0;
}

.video-link {
    width: 100%;
    list-style: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px 0;
    color: #333;
}

.video-link &gt; a:visited,
.video-link &gt; a {
    color: #333;
    text-decoration: none;
}

.btn {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 5px 10px;
    cursor: pointer;
    background-color: #eee;
    font-size: 12px;
    box-shadow: 1px 1px 5px #ccc;
    transition: 100ms;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 2px 2px 5px #ccc;
}
</code></pre><p> </p><p>With all of that in place, I needed to refresh the extension in Chrome and it worked beautifuly!</p><img src="https://cdn.sanity.io/images/rx426fbd/production/4f309405c7ea964be093397831eb9a60b61ee449-850x1070.png"><p></p><h2>Wrap Up</h2><p>I was wondering how difficult creating a Chrome extension was going to be, but it proved to not be too bad. I love that I can use my existing HTML, CSS, and JS knowledge to put something together pretty quickly!</p></div>

As a developer, it's nice to be able to create things to make your life easier. I was tired of having to open up my previous YouTube videos just to copy the link and share it. So, I created my first Chrome Extension! It shows me a list of my most recent videos and allows me to copy the link directly.
As a Developer you have the power to build whatever you want!
Here's how I did it.
Project Setup
The first thing I did was create a manifest.json file where you can store the metadata for your app. There's a couple of key properties.


manifest-version - Google says this should be 2 currently
name and description - hopefully self-explanatory
version - the version of your extension
browser action - this is where we will specify our icon as well as what HTML to show when a user clicks on the extension
permissions - array of permissions required (I didn't need any specifically)


Here's what my manifest file looks like.

{
    "manifest_version": 2,
    "name": "JQQ YouTube Links",
    "description": "Shows recent YT video links from JQQ",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": []
}


Notice that I specified popup.html as my default popup. This means that HTML will be what get's displayed when the user clicks the extension. Since I needed JS and CSS, I added three new files.


popup.html
popup.js
popup.css


Here's my full HTML file.
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>JQQ YouTube Links</title>
        <link rel="stylesheet" href="popup.css" />
    </head>
    <body>
        <div class="container">
            <h2>JQQ YouTube Links</h2>
            <ol id="linksList"></ol>
        </div>
        <script src="popup.js"></script>
    </body>
</html>

Notice I linked to the JS and CSS files and included an ordered list element that I will populate in JavaScript.
How To Test
You can test this in two ways. One is to open the HTML page in the browser just like any other app. I would suggest using the Live Server extension in VS Code to help with that. 
The second way to test is to create the Chrome extension by connecting it to the directory your code is inside. For this, you'll need to open chrome://extensions and turn on developer mode. There should be a toggle for it.
Then, choose Load Unpacked and connect it to your code folder. After you do, you'll see your extension listed.

After that, you should see the extension in your extension bar, and when you click it, you'll the base HTML being displayed.
Displaying Links
One tricky thing I had to figure out was how to get the list of recent YouTube video links. I opted to create a serverless function (completely seperate from this) for this instead of trying to work with the Google APIs directly in the extension. It just ended up being easier this way. It's hosted on Netlify and you can check out the source code if you want.
With that function in place, I could make a Fetch request in JavaScript to get the links, then dynamically generate the HTML for each li. Here's the snippet. Notice that everything is wrapped inside of the DOMContentLoaded event.

document.addEventListener('DOMContentLoaded', async () => {
    const linksList = document.getElementById('linksList');
    const url = 'https://jqq-utils.netlify.app/api/recentYTVideos';

    try {
        const res = await fetch(url);
        const videos = await res.json();
        const videosHTML = videos
            .map((video) => {
                const videoUrl = `https://www.youtube.com/watch?v=${video.videoId}`;
                return `<li class="video-link">
                <button class="btn" data-url="${videoUrl}">Copy URL</button>
                <a class="btn" href="${videoUrl}" rel="noopener noreferrer" target="_blank">Watch</a>
                ${video.title}
            </li>
            `;
            })
            .join('');
        linksList.innerHTML = videosHTML;
        const videoLinks = [...document.querySelectorAll('.video-link')];
        videoLinks.forEach((link) => link.addEventListener('click', copy));
    } catch (err) {
        console.error(err);
    }
});


From there, I needed to add the Copy functionality. This was a little bit hacky, but I couldn't find a better way. Basically, you create an extra DOM element, set its text, copy that text, then remove that DOM element. It works great and the user doesn't even know there's anything weird happening 😁
const copy = (e) => {
        const str = e.target.dataset.url;
        const el = document.createElement('textarea');
        el.value = str;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.removeChild(el);
    };

Here's the full JavaScript file.

document.addEventListener('DOMContentLoaded', async () => {
    const linksList = document.getElementById('linksList');
    const url = 'https://jqq-utils.netlify.app/api/recentYTVideos';

    const copy = (e) => {
        const str = e.target.dataset.url;
        alert(str);
        const el = document.createElement('textarea');
        el.value = str;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.removeChild(el);
    };
    try {
        const res = await fetch(url);
        const videos = await res.json();
        const videosHTML = videos
            .map((video) => {
                const videoUrl = `https://www.youtube.com/watch?v=${video.videoId}`;
                return `<li class="video-link">
                <button class="btn" data-url="${videoUrl}">Copy URL</button>
                <a class="btn" href="${videoUrl}" rel="noopener noreferrer" target="_blank">Watch</a>
                ${video.title}
            </li>
            `;
            })
            .join('');
        linksList.innerHTML = videosHTML;
        const videoLinks = [...document.querySelectorAll('.video-link')];
        videoLinks.forEach((link) => link.addEventListener('click', copy));
    } catch (err) {
        console.error(err);
    }
});

For finishing touches, I threw in a bit of styling.
* {
    font-family: sans-serif;
}

body {
    border-radius: 10px;
}
.container {
    padding: 1rem 0.5rem;
    height: 400px;
    width: 400px;
}

#linksList {
    padding-left: 0;
}

.video-link {
    width: 100%;
    list-style: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px 0;
    color: #333;
}

.video-link > a:visited,
.video-link > a {
    color: #333;
    text-decoration: none;
}

.btn {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 5px 10px;
    cursor: pointer;
    background-color: #eee;
    font-size: 12px;
    box-shadow: 1px 1px 5px #ccc;
    transition: 100ms;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 2px 2px 5px #ccc;
}

 
With all of that in place, I needed to refresh the extension in Chrome and it worked beautifuly!


Wrap Up
I was wondering how difficult creating a Chrome extension was going to be, but it proved to not be too bad. I love that I can use my existing HTML, CSS, and JS knowledge to put something together pretty quickly!

I Created My First Google Chrome Extension

Netlify Functions are one of the easiest ways to get started with Serverless. However, the default path to call a Netlify Function is a bit cumbersome. Let's learn how to simplify that path with redirects.

<div><p>Netlify Functions are one of the easiest ways to get started with Serverless, but the default path to call one is a bit tedious at <code>/.netlify/functions/&lt;function_name&gt;</code>. Let’s see how to simplify this so that we can call <code>/api/&lt;function_name&gt;</code>.</p><blockquote>Want to learn more about Serverless Functions in Netlify? Check out the <a href="https://www.jamesqquick.com/courses/react-and-serverless-fullstack-developmnent">React and Serverless Course</a></blockquote><h2>Netlify Functions</h2><p>Serverless Functions are gaining in popularity and Netlify is making it easier than ever to get started. To add Serverless Functions to your project, you simply need to add your functions to a specific folder and tell Netlify which folder they are in.</p><p>You can specify to Netlify what your functions directory is by creating a <code>netlify.toml</code> file with the following configuration. I typically store my functions inside of a directory called <code>functions</code> (who woulda thought? 😂).</p><pre><code lang="sh">[build] 
  functions = "functions"</code></pre><p>From there, you can add your individual function files to that repo. If you’re building a CRUD app for movies, you might have a few different functions like so.</p><ul><li>getMovies.js</li><li>addMovie.js</li><li>updateMovie.js</li><li>deleteMovie.js</li></ul><p>Netlify will then recognize each file inside of your functions directory and host it as a Serverless Function IF it exports a handler functions (<code>exports.handler = () =&gt; {}</code>).</p><h2>Configuring Netlify Functions Redirect</h2><p>The process above is nice, but the default path to call one of these functions is a bit cumbersome at <code>/.netlify/functions/&lt;function_name&gt;</code>. A path like <code>/api/&lt;function_name&gt;</code> is much simpler and much easier to remember. To simplify the path in this way, you can add the following redirect configuration to your <code>netlify.toml</code></p><pre><code lang="sh">[build]
  functions = "functions"
[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200</code></pre><p>This tells Netlify to redirect every request to <code>/api/&lt;function_name&gt;</code> to the full path of <code>/.netlify/functions/&lt;function_name&gt;</code> exactly how you want!</p><h2>Wrap Up</h2><p>I would add this redirect configuration for every project you have that uses Netlify Functions. There’s no point in typing out the longer URL when you can make it SOOOO much simpler.</p></div>

Netlify Functions are one of the easiest ways to get started with Serverless, but the default path to call one is a bit tedious at /.netlify/functions/<function_name>. Let’s see how to simplify this so that we can call /api/<function_name>.
Want to learn more about Serverless Functions in Netlify? Check out the React and Serverless Course
Netlify Functions
Serverless Functions are gaining in popularity and Netlify is making it easier than ever to get started. To add Serverless Functions to your project, you simply need to add your functions to a specific folder and tell Netlify which folder they are in.
You can specify to Netlify what your functions directory is by creating a netlify.toml file with the following configuration. I typically store my functions inside of a directory called functions (who woulda thought? 😂).
[build] 
  functions = "functions"
From there, you can add your individual function files to that repo. If you’re building a CRUD app for movies, you might have a few different functions like so.

getMovies.js
addMovie.js
updateMovie.js
deleteMovie.js

Netlify will then recognize each file inside of your functions directory and host it as a Serverless Function IF it exports a handler functions (exports.handler = () => {}).
Configuring Netlify Functions Redirect
The process above is nice, but the default path to call one of these functions is a bit cumbersome at /.netlify/functions/<function_name>. A path like /api/<function_name> is much simpler and much easier to remember. To simplify the path in this way, you can add the following redirect configuration to your netlify.toml
[build]
  functions = "functions"
[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200
This tells Netlify to redirect every request to /api/<function_name> to the full path of /.netlify/functions/<function_name> exactly how you want!
Wrap Up
I would add this redirect configuration for every project you have that uses Netlify Functions. There’s no point in typing out the longer URL when you can make it SOOOO much simpler.

How To Redirect Netlify Functions To  a Simpler Path

Learn how to test your NPM packages locally before publishing.

<div><p>When creating NPM packages, it's much better to test them locally before publishing. Let's take a look at how to do that. </p><p></p><blockquote>Shoutout to <span><span><a href="https://bradgarropy.com/">Brad Garropy</a> for sharing his knowledge on NPM packages with me</span></span>. </blockquote><h2>TLDR</h2><p>- link your package locally</p><p>- create a test application</p><p>- link the NPM package in your test application</p><p>- do the test stuff</p><p></p><h2>Getting Started</h2><p>You'll need an NPM package local on your machine. If you've never created an NPM package before, you can learn how to create one by following this article, <a href="https://jamesqquick.com/blog/how-to-create-and-publish-npm-packages">Creating and Publishing NPM Packages</a>. </p><p></p><blockquote>For clarity, let's assume the name of the package we are working on is name <code>jqq-package</code>. You'll need to replace this with the name of your actual package.</blockquote><p></p><p>You'll also need an application to test your package with. For this, create a new folder and open it inside of your text editor. I recommend VS Code 😀. </p><p></p><p>Then, initialize this test project by running <code>npm init</code>.</p><p></p><h2>Let's Test It</h2><p></p><p>With your NPM package local to your machine, you'll need a way to reference/install it in the test application. </p><p></p><p><strong>Inside of the original NPM package directory</strong>, run <code>npm link</code> from the command line. This command will allow us to simulate installing this NPM package without it actually being published.</p><p></p><p>From there, we need to link to this package from inside of the <strong>test directory</strong>. You can do this by running <code>npm link</code> followed by the name of the local package. In this demo, the name of the package we want to test is <code>jqq-package</code> so you would run <code>npm link jqq-package</code>, but make sure to use the specific name of the package you are testing.</p><p></p><p>Now, you should be able to test the package in whatever way makes sense. I won't go into detail here because this varies significantly based on what your package does, but hopefully, this sets you up to run whatever tests you think make sense.</p><p></p><h2>Wrap Up</h2><p>I've been really pleased with how easy it is to create, test, and publish NPM packages. Hopefully, this helps you in testing your packages. If you have any awesome NPM packages to share or additional questions, please reach out on <a href="https://www.twitter.com/jamesqquick">Twitter</a>.</p><p></p></div>

When creating NPM packages, it's much better to test them locally before publishing. Let's take a look at how to do that. 

Shoutout to Brad Garropy for sharing his knowledge on NPM packages with me. 
TLDR
- link your package locally
- create a test application
- link the NPM package in your test application
- do the test stuff

Getting Started
You'll need an NPM package local on your machine. If you've never created an NPM package before, you can learn how to create one by following this article, Creating and Publishing NPM Packages. 

For clarity, let's assume the name of the package we are working on is name jqq-package. You'll need to replace this with the name of your actual package.

You'll also need an application to test your package with. For this, create a new folder and open it inside of your text editor. I recommend VS Code 😀. 

Then, initialize this test project by running npm init.

Let's Test It

With your NPM package local to your machine, you'll need a way to reference/install it in the test application. 

Inside of the original NPM package directory, run npm link from the command line. This command will allow us to simulate installing this NPM package without it actually being published.

From there, we need to link to this package from inside of the test directory. You can do this by running npm link followed by the name of the local package. In this demo, the name of the package we want to test is jqq-package so you would run npm link jqq-package, but make sure to use the specific name of the package you are testing.

Now, you should be able to test the package in whatever way makes sense. I won't go into detail here because this varies significantly based on what your package does, but hopefully, this sets you up to run whatever tests you think make sense.

Wrap Up
I've been really pleased with how easy it is to create, test, and publish NPM packages. Hopefully, this helps you in testing your packages. If you have any awesome NPM packages to share or additional questions, please reach out on Twitter.

How To Test NPM Packages Locally

Ever wondered how to create and publish NPM packages that millions of JavaScript developers across the world can use? Creating and publishing NPM Packages is much simpler than you might think. It's as simple as creating an account, creating a repository, and connecting them together. You'll have your first NPM package published in just a few minutes!

<div><p>Ever wondered how to create and publish NPM packages that millions of JavaScript developers across the world can use? Well, creating and publishing NPM Packages is much simpler than you might think. Let's see how!</p><p></p><blockquote>Shoutout to <span><span><a href="https://bradgarropy.com/"><span>Brad Garropy</span></a> for sharing his knowledge on NPM packages with me</span></span>. </blockquote><p></p><h2>TLDR</h2><p>- create an NPM account</p><p>- initialize a new JavaScript project with <code>npm init</code></p><p>- configure the package.json</p><p>- write some code</p><p>- publish</p><p></p><p></p><h2>Setup</h2><p></p><p>First, you'll need to sign up for a FREE account on <a href="https://www.npmjs.com/">NPM</a>.</p><p></p><img src="https://cdn.sanity.io/images/rx426fbd/production/75b3cf08e305e341a3ae9c973a0c791e842ef2c2-3698x1954.png"><p></p><p>Then, create a directory on your file system (name it whatever you want) and open it inside of your favorite text editor. I recommend <a href="https://code.visualstudio.com/">VS Code</a>!</p><p></p><p>Now, you'll need to initialize your project by running <code>npm init</code>. Feel free to choose all of the default values. There's a couple of properties that will be important.</p><p></p><p>- <strong>name</strong> - name of the project as it is listed in NPM (must be unique)</p><p>- <strong>version</strong> - the version of your package (must be updated every publish)</p><p>- <strong>main</strong> - which file will be referenced when someone tries to use your package in a Node environment</p><p></p><h2>Writing the Code</h2><p></p><p>Now, create an <code>index.js</code> file. Then, add a log statement.</p><p></p><p></p><pre><code lang="javascript">console.log("Hello NPM Package World!!")</code></pre><p></p><p>If this code is going to be used in a Node environment, when someone requires this package, that code will run immediately. Alternatively, you could export a function that the user could choose to call. We'll see both of these in a sec. For now, add another snippet to the file to export a function in the <code>index.js</code> file.</p><p></p><pre><code lang="javascript">console.log("Hello NPM Package World");

const sayHi = () =&gt; {
  console.log("HIIIIIIIIIIIII!!!");
}

module.exports = {
  sayHi
}</code></pre><p></p><blockquote>Before publishing, it's a good idea to test your package locally. Find out how, <a href="https://www.jamesqquick.com/blog/how-to-test-npm-packages-locally">How to Test NPM Packages Locally.</a></blockquote><p><a href="https://www.jamesqquick.com/blog/how-to-test-npm-packages-locally"></a></p><h2>Publish the Package</h2><p></p><p>With your code ready to go, the last thing to do is set the version in the <code>package.json</code> file. You can set this manually, or NPM gives you a few commands you can use.</p><p></p><p>- <strong>npm version major</strong> - increase major version </p><p>- <strong>npm version minor </strong>- increase minor version </p><p>- <strong>npm version patch</strong> - increase patch version </p><p></p><p>Now, login to your NPM account from the command line using <code>npm login</code>. You'll need to enter your username and password. Note that as you type your password, nothing will be shown. It's still working, it's just invisible for security purposes. This tripped me up for a while 🤷‍♂️.</p><p></p><p>Now, to publish, run <code>npm publish</code> in your terminal.</p><p></p><p>To confirm that it worked, visit your packages page (click your profile image to find this link) on NPM and check that your new package has been uploaded!</p><p></p><p></p><img src="https://cdn.sanity.io/images/rx426fbd/production/a219279575d5ae5a5aa55e938f1f666c25aeba71-3782x1954.png"><p></p><p></p><h2>Test it Out</h2><p></p><p>To test that the package works, you'll need to create another project, initialize it with <code>npm init</code> and create an <code>index.js</code> file. Now, you can install the published package by running <code>npm install &lt;YOUR_PACKAGE_NAME&gt; </code>just like any other package.</p><p></p><p>Then, you can import it in your <code>index.js</code> file.</p><p></p><p></p><pre><code lang="javascript">const mypPackage  = require('&lt;YOUR_PACKAGE_NAME&gt;');</code></pre><p></p><p>Then run your <code>index.js</code> file using <code>node index.js</code>. </p><p></p><p>You should see the original log message in your terminal. You can take this one step further by destructuring and calling the <code>sayHi()</code> function that we also created.</p><p></p><p></p><pre><code lang="javascript">const { sayHi } = require('&lt;YOUR_PACKAGE_NAME');
sayHi(); //HIIIIII</code></pre><p></p><h2>Wrap Up</h2><p>I was really impressed with how easy it was to create and publish NPM packages myself. So, my question to you. Have you created an NPM package before? Do you have a cool one to share? Let me know on twitter, <a href="https://www.twitter.com/jamesqquick">@jamesqquick</a>.</p></div>

Ever wondered how to create and publish NPM packages that millions of JavaScript developers across the world can use? Well, creating and publishing NPM Packages is much simpler than you might think. Let's see how!

Shoutout to Brad Garropy for sharing his knowledge on NPM packages with me. 

TLDR
- create an NPM account
- initialize a new JavaScript project with npm init
- configure the package.json
- write some code
- publish


Setup

First, you'll need to sign up for a FREE account on NPM.



Then, create a directory on your file system (name it whatever you want) and open it inside of your favorite text editor. I recommend VS Code!

Now, you'll need to initialize your project by running npm init. Feel free to choose all of the default values. There's a couple of properties that will be important.

- name - name of the project as it is listed in NPM (must be unique)
- version - the version of your package (must be updated every publish)
- main - which file will be referenced when someone tries to use your package in a Node environment

Writing the Code

Now, create an index.js file. Then, add a log statement.


console.log("Hello NPM Package World!!")

If this code is going to be used in a Node environment, when someone requires this package, that code will run immediately. Alternatively, you could export a function that the user could choose to call. We'll see both of these in a sec. For now, add another snippet to the file to export a function in the index.js file.

console.log("Hello NPM Package World");

const sayHi = () => {
  console.log("HIIIIIIIIIIIII!!!");
}

module.exports = {
  sayHi
}

Before publishing, it's a good idea to test your package locally. Find out how, How to Test NPM Packages Locally.

Publish the Package

With your code ready to go, the last thing to do is set the version in the package.json file. You can set this manually, or NPM gives you a few commands you can use.

- npm version major - increase major version 
- npm version minor - increase minor version 
- npm version patch - increase patch version 

Now, login to your NPM account from the command line using npm login. You'll need to enter your username and password. Note that as you type your password, nothing will be shown. It's still working, it's just invisible for security purposes. This tripped me up for a while 🤷‍♂️.

Now, to publish, run npm publish in your terminal.

To confirm that it worked, visit your packages page (click your profile image to find this link) on NPM and check that your new package has been uploaded!





Test it Out

To test that the package works, you'll need to create another project, initialize it with npm init and create an index.js file. Now, you can install the published package by running npm install <YOUR_PACKAGE_NAME> just like any other package.

Then, you can import it in your index.js file.


const mypPackage  = require('<YOUR_PACKAGE_NAME>');

Then run your index.js file using node index.js. 

You should see the original log message in your terminal. You can take this one step further by destructuring and calling the sayHi() function that we also created.


const { sayHi } = require('<YOUR_PACKAGE_NAME');
sayHi(); //HIIIIII

Wrap Up
I was really impressed with how easy it was to create and publish NPM packages myself. So, my question to you. Have you created an NPM package before? Do you have a cool one to share? Let me know on twitter, @jamesqquick.

How To Create and Publish NPM Packages

Learn how to convert a number in JavaScript from Decimal (base 10) to Hexadecimal (base 16)

<div><p>I'm currently working on a mini course where I will show to dynamically lighten and darken colors in JavaScript. To do this, I needed to be able to convert numbers from decimal to hexadecimal and visa versa. Let's see how!</p><p></p><h2>Intro</h2><p>One of the most common ways to represent colors is with RGB where you have three (hexadecimal) numbers that represent the red, green, and blue values respectively. Here's an example using my brand color.</p><p></p><p><code>#de5254</code></p><p></p><p>If you separate this out, you get three values of <code>de</code>, <code>52</code>, and <code>54</code>. This might seem odd to have letters represent a number, but that's how hexadecimal numbers work. Instead of using <code>1-10</code> digits it uses <code>1-f</code> (1-9,a,b,c,d,e,f) as digits.</p><p></p><p>Alright, let's dive in.</p><p></p><h2>Convert Decimal to Hexidecimal</h2><p></p><p>If you have a decimal number that you want to convert to hexidecimal, you can call the <code>toString()</code> function with the number and pass in a target base (binary, decimal, hexedecimal, etc.). This parameter is known as the <code>radix</code>. Here's a few examples.</p><p></p><pre><code lang="javascript">let num = 15;
num.toString(16) //f
num = 10
num.toString(16) //a
num = 1
num.toString(16) //1</code></pre><p><a href="https://www.w3schools.com/jsref/jsref_tostring_number.asp"></a></p><p><a href="https://www.w3schools.com/jsref/jsref_tostring_number.asp">W3 Schools Docs - toString()</a></p><p><a href="https://www.w3schools.com/jsref/jsref_tostring_number.asp"></a></p><h2>Convert Hexadecimal to Decimal</h2><p>What about the reverse? If you're converting hexadecimal back to decimal you can use the <code>parseInt()</code> function and pass the the original number (as a string) in the first parameter and the <code>radix</code> in the second.</p><p></p><p></p><pre><code lang="javascript">parseInt("f", 16) //15
parseInt("a", 16) //10
parseInt("1", 16) //1</code></pre><p></p><p><a href="https://www.w3schools.com/jsref/jsref_parseint.asp">W3 Schools Docs - parseInt()</a></p><p></p><h2>Wrap Up</h2><p>Not too bad huh? Working with different bases in numbers can certainly be tricky to understand, but you can let JavaScript take care of most of it for you!</p></div>

I'm currently working on a mini course where I will show to dynamically lighten and darken colors in JavaScript. To do this, I needed to be able to convert numbers from decimal to hexadecimal and visa versa. Let's see how!

Intro
One of the most common ways to represent colors is with RGB where you have three (hexadecimal) numbers that represent the red, green, and blue values respectively. Here's an example using my brand color.

#de5254

If you separate this out, you get three values of de, 52, and 54. This might seem odd to have letters represent a number, but that's how hexadecimal numbers work. Instead of using 1-10 digits it uses 1-f (1-9,a,b,c,d,e,f) as digits.

Alright, let's dive in.

Convert Decimal to Hexidecimal

If you have a decimal number that you want to convert to hexidecimal, you can call the toString() function with the number and pass in a target base (binary, decimal, hexedecimal, etc.). This parameter is known as the radix. Here's a few examples.

let num = 15;
num.toString(16) //f
num = 10
num.toString(16) //a
num = 1
num.toString(16) //1

W3 Schools Docs - toString()

Convert Hexadecimal to Decimal
What about the reverse? If you're converting hexadecimal back to decimal you can use the parseInt() function and pass the the original number (as a string) in the first parameter and the radix in the second.


parseInt("f", 16) //15
parseInt("a", 16) //10
parseInt("1", 16) //1

W3 Schools Docs - parseInt()

Wrap Up
Not too bad huh? Working with different bases in numbers can certainly be tricky to understand, but you can let JavaScript take care of most of it for you!

Convert Number from Decimal to Hexadecimal in JavaScript (and visa versa)

Learn how to upload images to Cloudinary with Nodejs

<div><p>Cloudinary is an amazing product for storing, transforming, and optimizing your media. By using Cloudinary, you can optimize your images and make your websites faster and increase user experience. Let's see how to upload images to Cloudinary using the Node SDK.</p><p></p><h2>Getting Started</h2><p>You will need a <a href="http://cloudinary.com/">Cloudinary</a> account for this to work. Not to worry, they have a very generous free tier! </p><p></p><p>You will also need to find your Cloudinary name, API Key, and API secret to be able to interact with Cloudinary from Node. You can find all of these details on the dashboard page in Cloudinary (you'll need to explicitly click <code>reveal</code> for your API secret).</p><p></p><p>For the code, create a new folder, open it in your editor, and run <code>npm init</code> to initialiize a JavaScript project. Then you'll need to install a couple depencies.</p><p></p><p></p><pre><code lang="sh">npm install express cloudinary dotenv</code></pre><p></p><p>Then, create an <code>app.js</code> file. We'll start by scaffolding a basic Express app. The only special thing I did here is to increase the size limit on incoming JSON data so that we can send base64 representations of images to the server.</p><p></p><p></p><pre><code lang="javascript">const express = require('express');
const app = express();

app.use(express.json({ limit: '50mb' }));

const port = process.env.PORT || 3001;
app.listen(port, () =&gt; {
    console.log('listening on 3001');
});
</code></pre><p></p><h2>Initialize the Cloudinary SDK</h2><p></p><p>We need to initialize the Cloudinary SDK using the credentials mentioned earlier. I'm using local environment variables with the <code>dotenv</code> package for mine. If you're not familiar with <code>dotenv</code> you can watch <a>this video</a> or simply hard code your credentials.</p><p></p><pre><code lang="javascript">require('dotenv').config();
const cloudinary = require('cloudinary').v2;
cloudinary.config({
    cloud_name: process.env.CLOUDINARY_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET,
});</code></pre><p></p><h2>Create the Image Upload Endpoint</h2><p>First, stub out the basic endpoint.</p><p></p><pre><code lang="javascript">app.post('/api/upload', async (req, res) =&gt; {
    
});</code></pre><p></p><p>Now, let's actually upload. We will need to get the base64 string representation of the image from the data property of the body. Then we will call <code>cloudinary.uploader.upload()</code> to actually upload the image. In case something goes wrong, we surround everything with a <code>try/catch</code> to make sure we catch any errors.</p><p></p><pre><code lang="javascript">app.post('/api/upload', async (req, res) =&gt; {
    try {
        const fileStr = req.body.data;
        const uploadResponse = await cloudinary.uploader.upload(fileStr, {});
        console.log(uploadResponse);
        res.json({ msg: 'yaya' });
    } catch (err) {
        console.error(err);
        res.status(500).json({ err: 'Something went wrong' });
    }
});</code></pre><p></p><p></p><h2>Testing</h2><p>To test this, we'll need to make a post request from Postman or a similar tool. We will also need a base64 string representing an image which you can get <a href="https://www.base64-image.de/">here</a>. Just upload your image and you get back a string. </p><p></p><img src="https://cdn.sanity.io/images/rx426fbd/production/3bbe472528d41230a8d0868f895656d966f32c5b-3138x1458.jpg"><p></p><p>These strings can get really long so you might want to choose a really simple image. Here's a string I used from a small black rectangle.</p><p></p><p></p><pre><code>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABEgAAACjCAYAAACZtyuEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARDSURBVHgB7dgBDcAwDMCw/Tqi8ufWj0dsKSTyzMweAAAAgK59DwAAAECcQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQN532wMAAADQtT/zaAXag6h60wAAAABJRU5ErkJggg==</code></pre><p></p><p>Make sure your server is running  (<code>node app.js</code>).</p><p></p><p>Now, let's send it along in Postman. You'll need to send a Post request and include the string you just generated as a data property in raw JSON.</p><p></p><img src="https://cdn.sanity.io/images/rx426fbd/production/ea5e6e424efe3a1f2a31f0c3ba33c82c4a4b34e5-3280x1598.jpg"><p></p><p>Then, go check in Cloudinary <code>Media Library</code> and you should see your new image!</p><p></p><h2>Wrap Up</h2><p>I'm super excited about using Cloudinary for more things in the future, but uploading images from Nodejs is a pretty good start. Lots more to come on optimizations, transformations, etc. in the future. Keep an eye out!</p><p></p><p></p><p></p><p></p></div>

Cloudinary is an amazing product for storing, transforming, and optimizing your media. By using Cloudinary, you can optimize your images and make your websites faster and increase user experience. Let's see how to upload images to Cloudinary using the Node SDK.

Getting Started
You will need a Cloudinary account for this to work. Not to worry, they have a very generous free tier! 

You will also need to find your Cloudinary name, API Key, and API secret to be able to interact with Cloudinary from Node. You can find all of these details on the dashboard page in Cloudinary (you'll need to explicitly click reveal for your API secret).

For the code, create a new folder, open it in your editor, and run npm init to initialiize a JavaScript project. Then you'll need to install a couple depencies.


npm install express cloudinary dotenv

Then, create an app.js file. We'll start by scaffolding a basic Express app. The only special thing I did here is to increase the size limit on incoming JSON data so that we can send base64 representations of images to the server.


const express = require('express');
const app = express();

app.use(express.json({ limit: '50mb' }));

const port = process.env.PORT || 3001;
app.listen(port, () => {
    console.log('listening on 3001');
});


Initialize the Cloudinary SDK

We need to initialize the Cloudinary SDK using the credentials mentioned earlier. I'm using local environment variables with the dotenv package for mine. If you're not familiar with dotenv you can watch this video or simply hard code your credentials.

require('dotenv').config();
const cloudinary = require('cloudinary').v2;
cloudinary.config({
    cloud_name: process.env.CLOUDINARY_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET,
});

Create the Image Upload Endpoint
First, stub out the basic endpoint.

app.post('/api/upload', async (req, res) => {
    
});

Now, let's actually upload. We will need to get the base64 string representation of the image from the data property of the body. Then we will call cloudinary.uploader.upload() to actually upload the image. In case something goes wrong, we surround everything with a try/catch to make sure we catch any errors.

app.post('/api/upload', async (req, res) => {
    try {
        const fileStr = req.body.data;
        const uploadResponse = await cloudinary.uploader.upload(fileStr, {});
        console.log(uploadResponse);
        res.json({ msg: 'yaya' });
    } catch (err) {
        console.error(err);
        res.status(500).json({ err: 'Something went wrong' });
    }
});


Testing
To test this, we'll need to make a post request from Postman or a similar tool. We will also need a base64 string representing an image which you can get here. Just upload your image and you get back a string. 



These strings can get really long so you might want to choose a really simple image. Here's a string I used from a small black rectangle.


data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABEgAAACjCAYAAACZtyuEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARDSURBVHgB7dgBDcAwDMCw/Tqi8ufWj0dsKSTyzMweAAAAgK59DwAAAECcQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQJ5BAgAAAOQZJAAAAECeQQIAAADkGSQAAABAnkECAAAA5BkkAAAAQN532wMAAADQtT/zaAXag6h60wAAAABJRU5ErkJggg==

Make sure your server is running  (node app.js).

Now, let's send it along in Postman. You'll need to send a Post request and include the string you just generated as a data property in raw JSON.



Then, go check in Cloudinary Media Library and you should see your new image!

Wrap Up
I'm super excited about using Cloudinary for more things in the future, but uploading images from Nodejs is a pretty good start. Lots more to come on optimizations, transformations, etc. in the future. Keep an eye out!

Cloudinary Image Upload with Nodejs

Learn how to setup React Router in 5 minutes!

<div><p>I use React all of the time and always have to look up how to setup React Router. In this post, I'll show you how to setup React Router in five minutes.</p><h2>Install the Package</h2><p>First, you'll have to install the <code>react-router-dom</code> package on npm with the following command.</p><p></p><p></p><pre><code lang="sh">npm install react-router-dom</code></pre><h2>Add Routes in App.js</h2><p>To add the routes, we need to import the <code>BrowserRouter</code> and <code>Route</code> components from the package. Often, you'll see <code>BrowserRouter</code> renamed as <code>Router</code> as it is below.</p><p></p><pre><code lang="javascript">import { Route, BrowserRouter as Router } from "react-router-dom";</code></pre><p></p><p>Now, wrap the app in the <code>Router</code> component.</p><p></p><pre><code lang="javascript">function App() { 
  return &lt;Router&gt;&lt;/Router&gt;; 
}
</code></pre><p></p><p>Inside of the <code>Router</code> component, you can add a <code>Route</code> component for each of your routes where you define the path and display component for each. I also surrounded mine with a container div for ensuring consistent padding on each page. Lastly, I marked the index route with the <code>exact</code> property to avoid conflicts with sub routes.</p><p></p><pre><code lang="javascript">function App() { 
  return ( 
    &lt;Router&gt; 
      &lt;div className="container"&gt; 
        &lt;Route exact path="/" component={Home} /&gt; 
        &lt;Route path="/about" component={About} /&gt; 
        &lt;Route path="/blog" component={Blog} /&gt; 
      &lt;/div&gt; 
    &lt;/Router&gt; 
  ); 
}</code></pre><p></p><p>Typically, you'll have something like a Navbar component that you want to display on every page. To include a component on each page, add it inside of the <code>Router</code> along side your routes.</p><p></p><pre><code lang="javascript">function App() { 
  return ( 
    &lt;Router&gt;
      &lt;Navbar /&gt;
      &lt;div className="container"&gt; 
        &lt;Route exact path="/" component={Home} /&gt; 
        &lt;Route path="/about" component={About} /&gt; 
        &lt;Route path="/blog" component={Blog} /&gt; 
      &lt;/div&gt;
    &lt;/Router&gt; 
  ); 
}</code></pre><h2></h2><h2>Navbar component</h2><p>With React Router, to link to different pages in your app, you'll need to use the <code>Link</code> component instead of traditional anchor tags. Import it like so.</p><p></p><pre><code lang="javascript">import {Link} from "react-router-dom"</code></pre><p></p><p>You'll use these in your Navbar and other areas in your app. Here's what they'll look like wherever you decide to use them. Just specify the <code>to</code> property which is the path of the page to navigate to.</p><p></p><pre><code lang="javascript">&lt;Link to="/about"&gt;Home&lt;/Link&gt;</code></pre><h2>Wrap up</h2><p>That's it. Not too bad. You should be up and running with page navigation in your React app.</p></div>

I use React all of the time and always have to look up how to setup React Router. In this post, I'll show you how to setup React Router in five minutes.
Install the Package
First, you'll have to install the react-router-dom package on npm with the following command.


npm install react-router-dom
Add Routes in App.js
To add the routes, we need to import the BrowserRouter and Route components from the package. Often, you'll see BrowserRouter renamed as Router as it is below.

import { Route, BrowserRouter as Router } from "react-router-dom";

Now, wrap the app in the Router component.

function App() { 
  return <Router></Router>; 
}


Inside of the Router component, you can add a Route component for each of your routes where you define the path and display component for each. I also surrounded mine with a container div for ensuring consistent padding on each page. Lastly, I marked the index route with the exact property to avoid conflicts with sub routes.

function App() { 
  return ( 
    <Router> 
      <div className="container"> 
        <Route exact path="/" component={Home} /> 
        <Route path="/about" component={About} /> 
        <Route path="/blog" component={Blog} /> 
      </div> 
    </Router> 
  ); 
}

Typically, you'll have something like a Navbar component that you want to display on every page. To include a component on each page, add it inside of the Router along side your routes.

function App() { 
  return ( 
    <Router>
      <Navbar />
      <div className="container"> 
        <Route exact path="/" component={Home} /> 
        <Route path="/about" component={About} /> 
        <Route path="/blog" component={Blog} /> 
      </div>
    </Router> 
  ); 
}

Navbar component
With React Router, to link to different pages in your app, you'll need to use the Link component instead of traditional anchor tags. Import it like so.

import {Link} from "react-router-dom"

You'll use these in your Navbar and other areas in your app. Here's what they'll look like wherever you decide to use them. Just specify the to property which is the path of the page to navigate to.

<Link to="/about">Home</Link>
Wrap up
That's it. Not too bad. You should be up and running with page navigation in your React app.

React Router in 5 Minutes

Want to become a better React developer? Your VS Code React setup can drastically change the way you create React apps. In this video, we'll cover 5 tips to improve your VS Code React setup to also improve your efficiency and proficiency as a React developer!

<div><p>Want to become a better React developer? Your VS Code React setup can drastically change how you create React apps. In this article, we'll cover 5 tips to improve your VS Code React setup so you can improve your efficiency and proficiency as a React developer!</p><blockquote>Download the <a href="https://learn.jamesqquick.com/vs-code-react-cheatsheet/">FREE 2-page cheat sheet</a>!</blockquote><h2>1. Extensions</h2><p>Extensions are where most of the power and flexibility of VS Code comes into play. There's one React extension that you absolutely have to have. It provides incredibly useful snippets for generating components, writing imports/exports, and lots more. It's a no-brainer. </p><p><a href="https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets">ES7 React Redux Graphql Native Snippets</a> </p><p>Here's an alternative snippets extension that you also might find useful.</p><p><a href="https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets">Simple React Snippets</a></p><p></p><p>There are also several more general (JavaScript focused) ones you'll want to check out.</p><p></p><ul><li><a href="https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets">JavaScript ES6 Snippets</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint">ES Lint</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier - Code Formatter</a></li><li><a href="https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost">Import Cost</a></li></ul><p></p><p>If you use Styled Components with React (I'm becoming a bigger and bigger fan), you literally can't live without this one. You get CSS syntax and highlighting right inside of your styled component files!</p><p><a href="https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components">VS Code Styled Components</a></p><p>You will also want to set up debugging with the<a href="https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome"> Chrome Debugger Extension</a>. More on this in a second 😀</p><p></p><h2>2. Emmet in JSX</h2><p>Emmet is one of the most amazing features you may have never heard of. Emmet allows you to generate HTML and CSS from short-hand snippets. For example, if you wanted to create the boilerplate for an HTML file, you can simple type <code>!</code> and then tab.</p><p></p><pre><code lang="html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    
&lt;/body&gt;
&lt;/html&gt;</code></pre><p>Or create a <code>div</code> witth a class of "container" with <code>.container</code> and then tab.</p><p>Or create a <code>ul</code> with three <code>li</code> children with <code>ul&gt;li*3.</code></p><blockquote>Wnat to learn more? Check out this <a href="https://www.youtube.com/watch?v=5guZjNDcVnA">Full Emmet Tutorial</a></blockquote><p>The only issue is that Emmet only works in HTML files by default, BUT...you can configure it to work inside of your React JSX with this one setting.</p><p></p><pre><code lang="json">"emmet.includeLanguages": {
        "javascript": "javascriptreact",
    },</code></pre><p></p><p>With that setting in place, you can leverage the power of Emmet right inside of your JSX!</p><blockquote><a href="https://www.udemy.com/learn-visual-studio-code">Learn more about how to set up your Visual Studio Code environment!</a></blockquote><h2>3.  Debugging</h2><p>Want to know how to take the next step with your Web Development career? Learn how to set up debugging in VS Code!</p><p>Like most people, I write a lot of <code>console.log()</code> statements. However, log statements aren't quite the same as a genuine debugging experience. So, did you know that you can set up debugging right inside of VS Code?!</p><p>First, you'll need to install <a href="https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome">Debugger for Chrome</a> extension. Next, open the debugging menu and create the following debugging configuration.</p><p></p><pre><code lang="json">{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}</code></pre><p></p><p>With your configuration in place, start your React application. Then, start your debugging session by clicking the play button in the debugging menu.</p><blockquote><a href="https://www.youtube.com/watch?v=OlwIDANNpOc">Watch this video for a full debugging walkthrough</a></blockquote><p></p><h2>4. Intellisense</h2><p>VS Code was the first text editor (in my mind) that absolutely nailed intellisense for Web Development. </p><blockquote>When I wrote my first line of JavaScript, the only intellisense you got was from variables you had already typed</blockquote><p>Not familiar with intellisense? It's the ability for your editor to display relevant information based on the context of what you are typing. For example, if you type <code>document</code> and then <code>.</code> inside of a JavaScript file, VS Code will display all of the functions, properties, etc. related to the document object. </p><img src="https://cdn.sanity.io/images/rx426fbd/production/f5f3a9d671fdc2df3a833f81396b77bcac982d94-2308x1462.jpg"><p>With VS Code intellisense, you will also see typed definitions for functions. In other words, VS Code will show you what type of data a function takes in as a parameter and what type of data that it returns.</p><p>Did you know this also works with React? React comes with TypeScript typings which VS Code uses to provide us all of that fancy intellisense. The tip here is to leverage this information to your benefit. If you forget the name of a function, type <code>React.</code> and then scroll all of the info that VS Code provides!</p><p></p><img src="https://cdn.sanity.io/images/rx426fbd/production/326e22b2b9b93e8db372cd654b39f92b29df323f-2302x1456.jpg"><p></p><h2>5. Auto Import</h2><p>Let's talk about JavaScript imports...one of my biggest pet peeves!</p><p>Let me rephrase, I don't actually hate imports per say. I specifically hate <strong>writing</strong> import statements. It's tedious and I have typos every time. So, the tip here is to let VS Code do that for you.</p><p>Going back to the idea of intellisense above, you get more than just information about objects. You also get context for other cool features, like "Auto Import". Don't believe me? Open up a React component and type <code>useState</code>, then arrow down untill you see this option and press enter.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/fa1dcde5cca2429948f165179953f8c93ea564e9-2682x1368.jpg"><p>Now, look at the top of your file you should see the import!</p><pre><code lang="javascript">import { useState } from 'react';
</code></pre><p>With Auto Import, you should almost never have to write an import statement yourself.</p><p></p><h2>Wrap Up</h2><p>You can probably tell I'm a huge fan of VS Code, and it certainly lives up to its reputation when it comes to working with React. Hopefully these tips will help improve your React experience with VS Code.</p><p>Are there any features that I'm missing? Let me know on <a href="https://twitter.com/jamesqquick">Twitter</a>.</p></div>

Want to become a better React developer? Your VS Code React setup can drastically change how you create React apps. In this article, we'll cover 5 tips to improve your VS Code React setup so you can improve your efficiency and proficiency as a React developer!
Download the FREE 2-page cheat sheet!
1. Extensions
Extensions are where most of the power and flexibility of VS Code comes into play. There's one React extension that you absolutely have to have. It provides incredibly useful snippets for generating components, writing imports/exports, and lots more. It's a no-brainer. 
ES7 React Redux Graphql Native Snippets 
Here's an alternative snippets extension that you also might find useful.
Simple React Snippets

There are also several more general (JavaScript focused) ones you'll want to check out.


JavaScript ES6 Snippets
ES Lint
Prettier - Code Formatter
Import Cost


If you use Styled Components with React (I'm becoming a bigger and bigger fan), you literally can't live without this one. You get CSS syntax and highlighting right inside of your styled component files!
VS Code Styled Components
You will also want to set up debugging with the Chrome Debugger Extension. More on this in a second 😀

2. Emmet in JSX
Emmet is one of the most amazing features you may have never heard of. Emmet allows you to generate HTML and CSS from short-hand snippets. For example, if you wanted to create the boilerplate for an HTML file, you can simple type ! and then tab.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
Or create a div witth a class of "container" with .container and then tab.
Or create a ul with three li children with ul>li*3.
Wnat to learn more? Check out this Full Emmet Tutorial
The only issue is that Emmet only works in HTML files by default, BUT...you can configure it to work inside of your React JSX with this one setting.

"emmet.includeLanguages": {
        "javascript": "javascriptreact",
    },

With that setting in place, you can leverage the power of Emmet right inside of your JSX!
Learn more about how to set up your Visual Studio Code environment!
3.  Debugging
Want to know how to take the next step with your Web Development career? Learn how to set up debugging in VS Code!
Like most people, I write a lot of console.log() statements. However, log statements aren't quite the same as a genuine debugging experience. So, did you know that you can set up debugging right inside of VS Code?!
First, you'll need to install Debugger for Chrome extension. Next, open the debugging menu and create the following debugging configuration.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

With your configuration in place, start your React application. Then, start your debugging session by clicking the play button in the debugging menu.
Watch this video for a full debugging walkthrough

4. Intellisense
VS Code was the first text editor (in my mind) that absolutely nailed intellisense for Web Development. 
When I wrote my first line of JavaScript, the only intellisense you got was from variables you had already typed
Not familiar with intellisense? It's the ability for your editor to display relevant information based on the context of what you are typing. For example, if you type document and then . inside of a JavaScript file, VS Code will display all of the functions, properties, etc. related to the document object. 

With VS Code intellisense, you will also see typed definitions for functions. In other words, VS Code will show you what type of data a function takes in as a parameter and what type of data that it returns.
Did you know this also works with React? React comes with TypeScript typings which VS Code uses to provide us all of that fancy intellisense. The tip here is to leverage this information to your benefit. If you forget the name of a function, type React. and then scroll all of the info that VS Code provides!



5. Auto Import
Let's talk about JavaScript imports...one of my biggest pet peeves!
Let me rephrase, I don't actually hate imports per say. I specifically hate writing import statements. It's tedious and I have typos every time. So, the tip here is to let VS Code do that for you.
Going back to the idea of intellisense above, you get more than just information about objects. You also get context for other cool features, like "Auto Import". Don't believe me? Open up a React component and type useState, then arrow down untill you see this option and press enter.

Now, look at the top of your file you should see the import!
import { useState } from 'react';

With Auto Import, you should almost never have to write an import statement yourself.

Wrap Up
You can probably tell I'm a huge fan of VS Code, and it certainly lives up to its reputation when it comes to working with React. Hopefully these tips will help improve your React experience with VS Code.
Are there any features that I'm missing? Let me know on Twitter.

VS Code React Setup - 5 Tips

Did you know you can view a live-reloading browser preview right inside of Visual Studio Code? Well, with the Browser Preview extension, you can do just that. Setting up your Visual Studio Code browser preview is just a few clicks away.

<div><p>Did you know you can view a live-reloading browser preview right inside of Visual Studio Code? Well, with the Browser Preview extension, you can do just that. Setting up your Visual Studio Code browser preview is just a few clicks away. Let's see how to do it.</p><p></p><img src="https://cdn.sanity.io/images/rx426fbd/production/c3e6a907fbce29192275f6eb912f92c049aee09c-3226x1856.png"><p></p><h2>Why The Browser Preview Extension</h2><p>As someone who records lots of videos, I'm constantly searching for the best way to display both my browser and my VS Code window at the same time. Most often, I end up switching between the two applications with shortcuts. This works fine but it can be a bit hard to follow for a user. </p><blockquote>Want to learn everything you need to know about VS Code? Check out the <a href="https://www.udemy.com/course/learn-visual-studio-code/">Learn Visual Studio Code</a> course</blockquote><p>Alternatively, I've also tried setting VS Code and Google Chrome to take up 50% of the screen so they can sit side by side. This is fine too, but with the Browser Preview, you can get the same type of view right inside of your editor.</p><h2>Install the Extension</h2><p>Start by opening the extensions tab inside of VS Code. Then search for <code>Browser Preview </code>and click <code>install</code>.</p><img src="https://cdn.sanity.io/images/rx426fbd/production/454f5ac28c882f7959e8b73d68da761f278933bc-3838x2158.png"><p></p><p></p><h2>Use the Extension</h2><p>Now that you have the extension installed, let's see how to use it. This extension basically opens a (headless) browser window inside of VS Code. So, you'll need to start your application locally with a live-reloading server. If you're using react, angular, vue, etc. they come pre-packaged with a live-reloading server. </p><p>If you are using vanilla JavaScript, you can use the <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">Live Server</a> extension to serve your site from a live-reloading server. </p><p></p><blockquote><a href="https://www.youtube.com/watch?v=WzE0yqwbdgU">Learn more about how to setup the Live Server extension in VS Code! </a></blockquote><p>With your application and server running, now you can open the browser preview. Open the command pallette (<code>control + shift + p </code>on Windows and<code> command + shift + p</code> on Mac) and search for <code>Browser Preview: Open Preview.</code></p><p></p><img src="https://cdn.sanity.io/images/rx426fbd/production/34c146dd6db6a9f27feafb00b88e363e0b9c129b-1722x570.png"><p></p><p>Now, you can type in the url of your app in the browser. Here's my "Quick Quiz" demo running at <code>localhost:5500.</code></p><blockquote><a href="https://www.youtube.com/watch?v=u98ROZjBWy8&amp;list=PLDlWc9AfQBfZIkdVaOQXi1tizJeNJipEx">Check out this FREE course if you're interested in learning to build a Quiz App with HTML, CSS, and JavaScript</a></blockquote><img src="https://cdn.sanity.io/images/rx426fbd/production/26a54a057f1812a802b94d3a1e7edd0f268f3e94-3840x2158.png"><p></p><h2>Wrap Up</h2><p>So that's it. Now you have a live-reloading browser preview of your app right inside of VS Code. I'm curious, are you using the Browser Preview or Live Server extension? Let me know on twitter, <a href="https://www.twitter.com/jamesqquick">@jamesqquick</a>.</p><p></p></div>

Did you know you can view a live-reloading browser preview right inside of Visual Studio Code? Well, with the Browser Preview extension, you can do just that. Setting up your Visual Studio Code browser preview is just a few clicks away. Let's see how to do it.



Why The Browser Preview Extension
As someone who records lots of videos, I'm constantly searching for the best way to display both my browser and my VS Code window at the same time. Most often, I end up switching between the two applications with shortcuts. This works fine but it can be a bit hard to follow for a user. 
Want to learn everything you need to know about VS Code? Check out the Learn Visual Studio Code course
Alternatively, I've also tried setting VS Code and Google Chrome to take up 50% of the screen so they can sit side by side. This is fine too, but with the Browser Preview, you can get the same type of view right inside of your editor.
Install the Extension
Start by opening the extensions tab inside of VS Code. Then search for Browser Preview and click install.



Use the Extension
Now that you have the extension installed, let's see how to use it. This extension basically opens a (headless) browser window inside of VS Code. So, you'll need to start your application locally with a live-reloading server. If you're using react, angular, vue, etc. they come pre-packaged with a live-reloading server. 
If you are using vanilla JavaScript, you can use the Live Server extension to serve your site from a live-reloading server. 

Learn more about how to setup the Live Server extension in VS Code! 
With your application and server running, now you can open the browser preview. Open the command pallette (control + shift + p on Windows and command + shift + p on Mac) and search for Browser Preview: Open Preview.



Now, you can type in the url of your app in the browser. Here's my "Quick Quiz" demo running at localhost:5500.
Check out this FREE course if you're interested in learning to build a Quiz App with HTML, CSS, and JavaScript


Wrap Up
So that's it. Now you have a live-reloading browser preview of your app right inside of VS Code. I'm curious, are you using the Browser Preview or Live Server extension? Let me know on twitter, @jamesqquick.

Visual Studio Code Browser Preview Extension

Learn how to open a link from an anchor tag in a new browser tab

<div><p>If you include links on your site, you probably want those to open up in a different tab so that users don't completely leave your site. This is certainly true for me site. Recently, i've had to look this up so many times, that I'm finally creating the post.</p><p></p><p>Here's a basic anchor tag.</p><p></p><pre><code lang="html">&lt;a href="https://www.jamesqquick.com"&gt;My Site&lt;/a&gt;</code></pre><p></p><p>By default this will redirect the user away from your site and stay within the same tab. To open in new tab we add a few small properties.</p><p></p><pre><code lang="html">&lt;a href="https://www.jamesqquick.com" rel="noopener noreferrer" target="_blank"&gt;Twitter&lt;/a&gt;</code></pre><p></p><p>That's it. Now, you're links should open up in a new tab!!</p><p></p></div>

If you include links on your site, you probably want those to open up in a different tab so that users don't completely leave your site. This is certainly true for me site. Recently, i've had to look this up so many times, that I'm finally creating the post.

Here's a basic anchor tag.

<a href="https://www.jamesqquick.com">My Site</a>

By default this will redirect the user away from your site and stay within the same tab. To open in new tab we add a few small properties.

<a href="https://www.jamesqquick.com" rel="noopener noreferrer" target="_blank">Twitter</a>

That's it. Now, you're links should open up in a new tab!!

Open Anchor Link in New Tab

I just recently finished the Intro to the JAMstack course by Jason Lengstorf on Frontend Masters and loved it! I consider myself to be relatively well versed in the JAMstack, but I still learned a ton. Here are a few of the tidbits.

<div><p>I just recently finished the <a href="https://frontendmasters.com/workshops/jamstack/">"Intro to the JAMstack"</a> course by Jason Lengstorf on Frontend Masters and loved it! I consider myself to be relatively well versed in the JAMstack, but I still learned a ton. Here are a few of the tidbits.</p><h2>Gatsby.js</h2><p>I have never created a Gatsby app that didn't start with a template. It's kind of like how we all use <code>create-react-app</code> for react apps. I mean, do you ever create a React application truly from scratch? I don't, at least, so it was really interesting when Jason did.</p><p>I was blown away by the fact that the only thing a Gatsby app needs (in addition to the Gatsby package itself) is a <code>gatsby_config.json</code> file. I had no idea 🙀 It makes sense, I just hadn't thought of that before.</p><h3>Managing Client-Side Routing</h3><p>One of the huge benefits of using Gatsby and similar frameworks is the fact that you get automatic routing. But, what if you want more control over those routes? Well, in Gatsby, you can design it so that you handle certain routes yourself. For example, if you want to have an authenticated dashboard while the rest of the app doesn't require authentication, you can target those specific routes, <code>/dashboard/*</code>, and do whatever logic you need to instead of letting Gatsby do it by default.</p><p>Again, this was super interesting because it's not something you see very often. Gatsby's built-in routing is amazing, so why customize it yourself? Well, there are times when it makes sense and Jason walks through it pretty well!</p><h2>HTML Form</h2><p>Forms are the bane of my existence. I feel like they are the hardest thing to design, but Jason had a great tip for <code>label</code> elements. He makes them a bit smaller in terms of font size but then makes them uppercase. This de-emphasizes and emphasizes it at the same time (is that even possible? 🤷‍♂️Well, it worked and looked nice.</p><h3>Honey Pot</h3><p>The second thing I learned about forms (which I had heard before) was to use a "Honey Pot" to help protect your forms from bots. What you do is create an invisible input on your form as a trap. Users won't fill it in but bots will. You can start to filter those form submissions based on whether or not that secret input is filled in. If it is filled in, then ignore it!</p><h2>Netlify</h2><p>Netlify is by far my one of my favorite platforms/tools, and I use it to host my personal sites including serverless functions. Here's a little nugget I picked up about serverless functions.</p><h3>Define Redirects for Serverless Functions</h3><p>One of the issues with serverless functions in Netlify is how you access them. They are available at <code>/.netlify/functions/&lt;function_name&gt;</code>. This isn't a huge deal, but it is unnatural to type out that whole thing. So, instead, you can define a redirect in your <code>netlify.toml</code> to redirect something more common like <code>/api/*</code> to <code>/.netlify/functions/*</code>. This becomes much more intuitive to work within the frontend.</p><pre><code lang="text">[[redirects]] 
  from = “/api/*” 
  to = ‘/.netlify/functions/servers/:splat’ status = 200</code></pre><h3>Netlify Identity</h3><p>Another cool feature in Netlify that I haven't played around with yet is Netlify Identity. You can use it to add authentication (and probably authorization??) to your app. This is particularly interesting for me as I work at Auth0, an identity company. I'm going to be diving in more so that I can do a more appropriate comparison with our own product and SDKs later on.</p><h2>FaunaDB + GraphQL</h2><p>I've heard about FaunaDB for a while, but never gotten hands-on with it. It's becoming super popular in the JAMstack space, so I'm glad I got to get a glimpse during this course. The thing I learned is that FaunaDB is GraphQL ready. This means that you can upload your own GraphQL schema to Fauna and it will take care of the rest. From then on, you can send GraphQL queries to Fauna and be off and running.</p><h2>useReducer in React</h2><p>I first got introduced to reducers in a course that used Redux, and I thought it was overwhelmingly complicated (I still might a bit but not like I used to). It just always seemed like overkill and it didn't click. Well, in this course Jason usees the useReducer Hook in JavaScript to simplify state management in a form.</p><p>I can say that useReducer did simplify a lot of the logic in React and made it more readable and structured after understanding what was going on. I just migrated one of the forms on my personal site to usee this hook.</p><h2>JavaScript Currying</h2><p>And lastly, currying, which I had never heard of. It's basically where you define a function that returns another function. This can be useful in React. Here's an example.</p><p>Say, you have a form with several inputs and you have to update state appropriately when any of those inputs change. Well, you might do something like this where you define a function inline in your input that calls another function so that you can pass the <code>event</code> as the parameter.</p><pre><code lang="javascript">const handleInputChange = (e, name) =&gt; { 
  this.setState({name:e.target.value}); 
  
} 

... 

&lt;input onChange={(e) =&gt; handleInputChange(e, "name")}&gt;</code></pre><p></p><p>Well, with currying you simplify that a bit by defining a function that returns a function.</p><p><code></code></p><pre><code lang="javascript">const handleInputChange = (name) =&gt; (e) =&gt; { 
  this.setState({name:e.target.value}); 
  
} 

... 

&lt;input onChange={handleInputChange("name")}&gt;</code></pre><p></p><p></p><p>This works because the event is passed automatically to the function inside of the <code>onChange</code>. So, the <code>handleInputChange</code> function accepts the <code>name</code> parameter and then returns a function that accepts an event, and still has a reference to the <code>name</code> parameter. Pretty nifty stuff huh?</p><h2>Wrap Up</h2><p>All in all, this course was great. I can't wait to check out more courses on Frontend Masters!</p><p>Question for the readers. Have you taken any courses on Frontend Masters? What are your favorites? Let me know on <a href="https://twitter.com/jamesqquick">twitter</a>!</p></div>

I just recently finished the "Intro to the JAMstack" course by Jason Lengstorf on Frontend Masters and loved it! I consider myself to be relatively well versed in the JAMstack, but I still learned a ton. Here are a few of the tidbits.
Gatsby.js
I have never created a Gatsby app that didn't start with a template. It's kind of like how we all use create-react-app for react apps. I mean, do you ever create a React application truly from scratch? I don't, at least, so it was really interesting when Jason did.
I was blown away by the fact that the only thing a Gatsby app needs (in addition to the Gatsby package itself) is a gatsby_config.json file. I had no idea 🙀 It makes sense, I just hadn't thought of that before.
Managing Client-Side Routing
One of the huge benefits of using Gatsby and similar frameworks is the fact that you get automatic routing. But, what if you want more control over those routes? Well, in Gatsby, you can design it so that you handle certain routes yourself. For example, if you want to have an authenticated dashboard while the rest of the app doesn't require authentication, you can target those specific routes, /dashboard/*, and do whatever logic you need to instead of letting Gatsby do it by default.
Again, this was super interesting because it's not something you see very often. Gatsby's built-in routing is amazing, so why customize it yourself? Well, there are times when it makes sense and Jason walks through it pretty well!
HTML Form
Forms are the bane of my existence. I feel like they are the hardest thing to design, but Jason had a great tip for label elements. He makes them a bit smaller in terms of font size but then makes them uppercase. This de-emphasizes and emphasizes it at the same time (is that even possible? 🤷‍♂️Well, it worked and looked nice.
Honey Pot
The second thing I learned about forms (which I had heard before) was to use a "Honey Pot" to help protect your forms from bots. What you do is create an invisible input on your form as a trap. Users won't fill it in but bots will. You can start to filter those form submissions based on whether or not that secret input is filled in. If it is filled in, then ignore it!
Netlify
Netlify is by far my one of my favorite platforms/tools, and I use it to host my personal sites including serverless functions. Here's a little nugget I picked up about serverless functions.
Define Redirects for Serverless Functions
One of the issues with serverless functions in Netlify is how you access them. They are available at /.netlify/functions/<function_name>. This isn't a huge deal, but it is unnatural to type out that whole thing. So, instead, you can define a redirect in your netlify.toml to redirect something more common like /api/* to /.netlify/functions/*. This becomes much more intuitive to work within the frontend.
[[redirects]] 
  from = “/api/*” 
  to = ‘/.netlify/functions/servers/:splat’ status = 200
Netlify Identity
Another cool feature in Netlify that I haven't played around with yet is Netlify Identity. You can use it to add authentication (and probably authorization??) to your app. This is particularly interesting for me as I work at Auth0, an identity company. I'm going to be diving in more so that I can do a more appropriate comparison with our own product and SDKs later on.
FaunaDB + GraphQL
I've heard about FaunaDB for a while, but never gotten hands-on with it. It's becoming super popular in the JAMstack space, so I'm glad I got to get a glimpse during this course. The thing I learned is that FaunaDB is GraphQL ready. This means that you can upload your own GraphQL schema to Fauna and it will take care of the rest. From then on, you can send GraphQL queries to Fauna and be off and running.
useReducer in React
I first got introduced to reducers in a course that used Redux, and I thought it was overwhelmingly complicated (I still might a bit but not like I used to). It just always seemed like overkill and it didn't click. Well, in this course Jason usees the useReducer Hook in JavaScript to simplify state management in a form.
I can say that useReducer did simplify a lot of the logic in React and made it more readable and structured after understanding what was going on. I just migrated one of the forms on my personal site to usee this hook.
JavaScript Currying
And lastly, currying, which I had never heard of. It's basically where you define a function that returns another function. This can be useful in React. Here's an example.
Say, you have a form with several inputs and you have to update state appropriately when any of those inputs change. Well, you might do something like this where you define a function inline in your input that calls another function so that you can pass the event as the parameter.
const handleInputChange = (e, name) => { 
  this.setState({name:e.target.value}); 
  
} 

... 

<input onChange={(e) => handleInputChange(e, "name")}>

Well, with currying you simplify that a bit by defining a function that returns a function.

const handleInputChange = (name) => (e) => { 
  this.setState({name:e.target.value}); 
  
} 

... 

<input onChange={handleInputChange("name")}>


This works because the event is passed automatically to the function inside of the onChange. So, the handleInputChange function accepts the name parameter and then returns a function that accepts an event, and still has a reference to the name parameter. Pretty nifty stuff huh?
Wrap Up
All in all, this course was great. I can't wait to check out more courses on Frontend Masters!
Question for the readers. Have you taken any courses on Frontend Masters? What are your favorites? Let me know on twitter!

Introduction to the JAMstack Course - What I Learned

Although VS Code has some great built-in functionality for Git, by finding the right Visual Studio Code extensions, you can power up your Git workflow right inside of your editor. 

<div><p>Although VS Code has some great built-in functionality for Git, by finding the right Visual Studio Code extensions, you can power up your Git workflow right inside of your editor. Let's take a look at the top Visual Studio Code extensions for Git and Github!</p><p>Make sure to read all the way through. The last one is powerful enough to replace them all!</p><h2><a href="https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory">Git History</a></h2><p>This extension lets you quickly investigate the history of a line or file. You'll have access to commit information, view diffs, etc.</p><h2><a href="https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame">Git Blame</a></h2><p>Everyone is looking for someone to blame when something goes wrong (not really, but still), and Git Blame will provide you that information. It will show you at a glance who was the last person to change a file.</p><h2><a href="https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager">Git Project Manager</a></h2><p>Ever wanted to easily open up other projects in VS Code? Well, this extension will let you do just that with Git projects. You can specify which directory to look in for Git projects. I leave all of my code projects in a <code>code</code> folder. This way, I can easily use this extension to open projects from that directory.</p><h2><a href="https://marketplace.visualstudio.com/items?itemName=ziyasal.vscode-open-in-github">Open in Github, Bitbucket, Gitlab, VisualStudio.com</a></h2><p>Sometimes, it's helpful to view a file in Github (or other source control providers). This extension gives you the option to directly open a file in the browser at Github.com (and others).</p><h2><a href="https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github">Github Pull Requests</a></h2><p>With this extension, you can handle all of your Github Pull Requests right inside of VS Code. This is pretty neat because you can see an organized list, check out preview versions, and merge.</p><h2><a href="https://marketplace.visualstudio.com/items?itemName=donjayamanne.git-extension-pack">Git Extension Pack</a></h2><p>This extension will install several of the other extensions for you as a pack.</p><ul><li>Git History</li><li>Project Manager</li><li>Git Lens</li><li>gitignore</li><li>Open in Github, Bitbucket, Gitlab, VisualStudio.com</li></ul><h2><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">Git Lens</a></h2><p>Finally, the extension to best all other Git extensions. This one easily replaces several of the ones we have already mentioned. It has blame and history information. It also, let's you compare code from different branches, view remote branches, and so much more!</p><h2>Wrap Up</h2><p>My favorite thing about VS Code is the ecosystem of extensions, and they don't fall short in the Git realm. I'm curious, what extensions are you using? Are there any I missed? Let me know on Twitter, <a href="https://www.twitter.com/jamesqquick">@jamesqquick</a>.</p></div>

Although VS Code has some great built-in functionality for Git, by finding the right Visual Studio Code extensions, you can power up your Git workflow right inside of your editor. Let's take a look at the top Visual Studio Code extensions for Git and Github!
Make sure to read all the way through. The last one is powerful enough to replace them all!
Git History
This extension lets you quickly investigate the history of a line or file. You'll have access to commit information, view diffs, etc.
Git Blame
Everyone is looking for someone to blame when something goes wrong (not really, but still), and Git Blame will provide you that information. It will show you at a glance who was the last person to change a file.
Git Project Manager
Ever wanted to easily open up other projects in VS Code? Well, this extension will let you do just that with Git projects. You can specify which directory to look in for Git projects. I leave all of my code projects in a code folder. This way, I can easily use this extension to open projects from that directory.
Open in Github, Bitbucket, Gitlab, VisualStudio.com
Sometimes, it's helpful to view a file in Github (or other source control providers). This extension gives you the option to directly open a file in the browser at Github.com (and others).
Github Pull Requests
With this extension, you can handle all of your Github Pull Requests right inside of VS Code. This is pretty neat because you can see an organized list, check out preview versions, and merge.
Git Extension Pack
This extension will install several of the other extensions for you as a pack.

Git History
Project Manager
Git Lens
gitignore
Open in Github, Bitbucket, Gitlab, VisualStudio.com

Git Lens
Finally, the extension to best all other Git extensions. This one easily replaces several of the ones we have already mentioned. It has blame and history information. It also, let's you compare code from different branches, view remote branches, and so much more!
Wrap Up
My favorite thing about VS Code is the ecosystem of extensions, and they don't fall short in the Git realm. I'm curious, what extensions are you using? Are there any I missed? Let me know on Twitter, @jamesqquick.

Although VS Code has some great built-in functionality for Git, by finding the right Visual Studio Code extensions, you can power up your Git workflow right inside of your editor.

Top Visual Studio Code Git Extensions in 2020

Let's discuss the pros and cons of a Computer Science Degree vs a Programming Bootcamp vs being self-taught.

<div><p>In the age of technology that we live in, the Computer Science industry is booming. It is becoming a more and more desired field because of the number of opportunities, pay, benefits, etc. However, everyday programming jobs across the world are going vacant because we can't find enough qualified candidates to fill them.</p><p>In some ways, this shouldn't be too surprising. If you think about it, every company needs some sort of software. Even if their product isn't specifically software, they still need a website, mobile app, backend data, etc., but there are still only so many developers.</p><blockquote>Every company needs some sort of software, and developers are needed to build that software.</blockquote><p>Because of that, people across the world are trying to figure out how to break into the industry. Well, there are three different ways to do just that.</p><ul><li>get a formal Computer Science degree</li><li>attend a programming Bootcamp</li><li>find enough resources to teach yourself</li></ul><h2>My Background</h2><p>Let me start by saying that this is a special topic for me because I have experience in each category.</p><ul><li>Computer Science degree from Vanderbilt University</li><li>spent countless hours self-teaching through YouTube videos, Udemy courses, and building side projects</li><li>taught a Bootcamp in Memphis</li></ul><blockquote>I have a formal CS degree, but I believe I learned significantly more from YouTube videos, Udemy courses, and building side projects than I ever did in school.</blockquote><p>Having been involved in the education and tech communities for the past 7+ years, I have met a lot of people at different stages of a career transition and given out lots of advice along the way. Here's my take on the pros and cons of these three different ways to get started in tech.</p><h2>Computer Science Degree</h2><p>As I said, I have a formal CS degree. Though I wouldn't trade my overall college experience for anything, the CS curriculum wasn't the most practical. We spent a lot of time learning the theory behind programming and, honestly, building things that already exist (Arrays, LinkedLists, etc.).</p><blockquote>When I graduated from college, I had never used source control/Git, had barely worked with a terminal, and had never learned the basics of developing or hosting a website</blockquote><p>I think my degree helped give me a deeper foundation in programming concepts (think Data Structures and Algorithms) than people typically get during a Bootcamp. On the other hand, I believe the knowledge that students learn in Bootcamps is much more practical. I would guess that most Bootcamp graduates are more prepared to commit code than I was coming out of college.</p><blockquote>I would guess that most Bootcamp graduates are more prepared to commit code than I was coming out of college.</blockquote><p>There are two major negatives with getting a formal degree. It takes 2-4 years to complete a degree, and some people don't have that much time. Additionally, universities can be extremely expensive. I was incredibly lucky to have received full financial aid and didn't have to pay a dime. Depending on your budget, you could consider cheaper options like in-state schools and community colleges.</p><p>Here's one thing I can definitively say about having a formal degree. It makes it MUCH MUCH easier to get interviews. Although many companies are recognizing the fact that there are talented developers without degrees, unfortunately, many companies still require them.</p><p>All in all, my four years of college were some of the best of my life, but for much more than the classes I took. I got to build relationships with and learn from so many different people from so many different locations and cultures. I certainly wouldn't have done it any differently, but it's not the best option for everyone.</p><h3>Pros</h3><ul><li>the college experience can be incredible</li><li>it is much easier to get an interview and your first job</li><li>well-defined progression through programming concepts</li><li>ability to network students, faculty, and surrounding employers</li></ul><h3>Cons</h3><ul><li>programming material is typically more theoretical and less practical</li><li>can take 2-4 years to complete</li><li>can be extremely expensive</li></ul><h2>Programming Bootcamp</h2><p>Bootcamps have been on a significant rise as more and more people are looking to transition into careers in tech. In many ways, it has become the de facto way to completely change careers without going back to school. It has worked for thousands of programmers (maybe millions?), and it's a more than viable option.</p><p>One of the initial benefits of a Bootcamp is the fact that are tons of them in different forms. For the most part, you can probably find one that fits your budget, time commitment, etc. Here are a few things that vary.</p><ul><li>cost (free, pay upfront, pay upon graduation, etc.)</li><li>time commitment (full-time, parttime, during the day, at night, etc.)</li><li>in person vs online</li><li>curriculum</li></ul><blockquote>While the plethora of options can be beneficial, it can also be difficult to choose the right Bootcamp for the same reasons.</blockquote><p>While the plethora of options can be beneficial, it can also be difficult to choose the right Bootcamp for the same reasons. When trying to decide on a Bootcamp here's a few things to consider.</p><ul><li>who is the instructor</li><li>what have past graduates said</li><li>what is the graduation and placement rate</li><li>what is the curriculum</li></ul><p>As I mentioned above, I believe the curriculum in Bootcamps is more practical than most CS degrees. Because of this, if a student masters the concepts presented to him/her throughout the Bootcamp, they are arguably more prepared to hit the ground running in their first role.</p><p>However, I do feel that Bootcamps typically move too fast. It's incredibly difficult to internalize all the topics that are taught in a Bootcamp simply because you have such little time. These programs are expedited for a reason (to get you a job ASAP), but that comes at a risk. I highly encourage all Bootcamp graduates to continue to study, learn, and build every day to be as prepared for their first role as possible.</p><p>Because of the expedited time frame, Bootcamps are a pretty intensive commitment. If a student finishes a Bootcamp, you can bet that that person is incredibly passionate, motivated, and dedicated. Here are a few reasons why I think this is beneficial.</p><ul><li>they specifically want to be in the field</li><li>have proven the ability to learn quickly</li><li>they are highly motivated to change careers</li></ul><h3>Pros</h3><ul><li>lots of different options</li><li>much quicker turnaround than college</li><li>material is often more practical than college curriculum</li><li>assistance from Bootcamp in finding jobs</li><li>focuses on modern skillsets that companies are actively looking for</li></ul><h3>Cons</h3><ul><li>can be hard to gauge the quality</li><li>the pace is incredibly fast and it's easy to lack a full understanding of core concepts</li><li>can be expensive</li><li>might require leaving a job</li></ul><h2>Self-taught</h2><p>The last option on this list is to simply dig in and learn all the things you need to know on your own. This is a pretty daunting task for most people especially for those who aren't already extremely motivated, but there are certainly some benefits.</p><p>There is an amazing amount of free content available in the world. I mean just go to YouTube and search "JavaScript" and see how many videos you find. You can also find amazing paid content from instructors online (I have a list of Udemy courses I can recommend for $10) with prices of anywhere from $10-\$100.</p><p>The availability of free and low-cost resources is one of the major benefits of self-teaching, but there is also a downside. With so much content available, many people just don't know where to start. Without the structure of a formal curriculum, it's easy to get overwhelmed quickly. Because of this, I recommend building relationships with people in the tech community that you can ask for guidance along the way. By the way, if you're reading this and want to ask me for advice, please don't hesitate to do so!</p><p>Outside of the cost, flexibility is probably the next major benefit. With self-teaching, you don't have to commute to a classroom. You don't have to give up your job. You can work learning into your everyday life. Again, this is incredibly difficult to do if you are not already hyper-focused. No one is going to be pushing you along. You have to do that yourself.</p><p>I would consider being self-taught to be the most difficult route to landing a job in tech. One of the ways that you combat this is to ensure that you have a solid portfolio. Make sure that you have at least 3 solid projects that demonstrate your skills as a developer. I would recommend having at least one fullstack project that shows your abilities on the frontend and backend. This will help open up more opportunities for you as you apply. Just remember, your projects might be the only thing an employer has to gauge your abilities.</p><h3>Pros</h3><ul><li>cheap (ex. YouTube is free and Udemy courses go on sale for $10)</li><li>self-paced, work when you can (you don't have to leave your job)</li><li>follow your interests</li></ul><h3>Cons</h3><ul><li>lack of formal structure or progression path</li><li>lack of instructor for real-time learning/feedback</li><li>harder to get interviews without a degree or Bootcamp on your resume</li></ul><h2>Wrap Up</h2><p>My goal is to help where I can with people that are looking to transition careers. I love being a part of the process because people are truly inspiring for me. That's why this article was so much fun.</p><p>I'm curious, what are your thoughts on the breakdown above? Do you agree? Disagree? Anything else you would add? What background do you have? Comment below or find me on twitter <a href="https://www.twitter.com/jamesqquick">@jamesqquick</a>.</p></div>

In the age of technology that we live in, the Computer Science industry is booming. It is becoming a more and more desired field because of the number of opportunities, pay, benefits, etc. However, everyday programming jobs across the world are going vacant because we can't find enough qualified candidates to fill them.
In some ways, this shouldn't be too surprising. If you think about it, every company needs some sort of software. Even if their product isn't specifically software, they still need a website, mobile app, backend data, etc., but there are still only so many developers.
Every company needs some sort of software, and developers are needed to build that software.
Because of that, people across the world are trying to figure out how to break into the industry. Well, there are three different ways to do just that.

get a formal Computer Science degree
attend a programming Bootcamp
find enough resources to teach yourself

My Background
Let me start by saying that this is a special topic for me because I have experience in each category.

Computer Science degree from Vanderbilt University
spent countless hours self-teaching through YouTube videos, Udemy courses, and building side projects
taught a Bootcamp in Memphis

I have a formal CS degree, but I believe I learned significantly more from YouTube videos, Udemy courses, and building side projects than I ever did in school.
Having been involved in the education and tech communities for the past 7+ years, I have met a lot of people at different stages of a career transition and given out lots of advice along the way. Here's my take on the pros and cons of these three different ways to get started in tech.
Computer Science Degree
As I said, I have a formal CS degree. Though I wouldn't trade my overall college experience for anything, the CS curriculum wasn't the most practical. We spent a lot of time learning the theory behind programming and, honestly, building things that already exist (Arrays, LinkedLists, etc.).
When I graduated from college, I had never used source control/Git, had barely worked with a terminal, and had never learned the basics of developing or hosting a website
I think my degree helped give me a deeper foundation in programming concepts (think Data Structures and Algorithms) than people typically get during a Bootcamp. On the other hand, I believe the knowledge that students learn in Bootcamps is much more practical. I would guess that most Bootcamp graduates are more prepared to commit code than I was coming out of college.
I would guess that most Bootcamp graduates are more prepared to commit code than I was coming out of college.
There are two major negatives with getting a formal degree. It takes 2-4 years to complete a degree, and some people don't have that much time. Additionally, universities can be extremely expensive. I was incredibly lucky to have received full financial aid and didn't have to pay a dime. Depending on your budget, you could consider cheaper options like in-state schools and community colleges.
Here's one thing I can definitively say about having a formal degree. It makes it MUCH MUCH easier to get interviews. Although many companies are recognizing the fact that there are talented developers without degrees, unfortunately, many companies still require them.
All in all, my four years of college were some of the best of my life, but for much more than the classes I took. I got to build relationships with and learn from so many different people from so many different locations and cultures. I certainly wouldn't have done it any differently, but it's not the best option for everyone.
Pros

the college experience can be incredible
it is much easier to get an interview and your first job
well-defined progression through programming concepts
ability to network students, faculty, and surrounding employers

Cons

programming material is typically more theoretical and less practical
can take 2-4 years to complete
can be extremely expensive

Programming Bootcamp
Bootcamps have been on a significant rise as more and more people are looking to transition into careers in tech. In many ways, it has become the de facto way to completely change careers without going back to school. It has worked for thousands of programmers (maybe millions?), and it's a more than viable option.
One of the initial benefits of a Bootcamp is the fact that are tons of them in different forms. For the most part, you can probably find one that fits your budget, time commitment, etc. Here are a few things that vary.

cost (free, pay upfront, pay upon graduation, etc.)
time commitment (full-time, parttime, during the day, at night, etc.)
in person vs online
curriculum

While the plethora of options can be beneficial, it can also be difficult to choose the right Bootcamp for the same reasons.
While the plethora of options can be beneficial, it can also be difficult to choose the right Bootcamp for the same reasons. When trying to decide on a Bootcamp here's a few things to consider.

who is the instructor
what have past graduates said
what is the graduation and placement rate
what is the curriculum

As I mentioned above, I believe the curriculum in Bootcamps is more practical than most CS degrees. Because of this, if a student masters the concepts presented to him/her throughout the Bootcamp, they are arguably more prepared to hit the ground running in their first role.
However, I do feel that Bootcamps typically move too fast. It's incredibly difficult to internalize all the topics that are taught in a Bootcamp simply because you have such little time. These programs are expedited for a reason (to get you a job ASAP), but that comes at a risk. I highly encourage all Bootcamp graduates to continue to study, learn, and build every day to be as prepared for their first role as possible.
Because of the expedited time frame, Bootcamps are a pretty intensive commitment. If a student finishes a Bootcamp, you can bet that that person is incredibly passionate, motivated, and dedicated. Here are a few reasons why I think this is beneficial.

they specifically want to be in the field
have proven the ability to learn quickly
they are highly motivated to change careers

Pros

lots of different options
much quicker turnaround than college
material is often more practical than college curriculum
assistance from Bootcamp in finding jobs
focuses on modern skillsets that companies are actively looking for

Cons

can be hard to gauge the quality
the pace is incredibly fast and it's easy to lack a full understanding of core concepts
can be expensive
might require leaving a job

Self-taught
The last option on this list is to simply dig in and learn all the things you need to know on your own. This is a pretty daunting task for most people especially for those who aren't already extremely motivated, but there are certainly some benefits.
There is an amazing amount of free content available in the world. I mean just go to YouTube and search "JavaScript" and see how many videos you find. You can also find amazing paid content from instructors online (I have a list of Udemy courses I can recommend for $10) with prices of anywhere from $10-\$100.
The availability of free and low-cost resources is one of the major benefits of self-teaching, but there is also a downside. With so much content available, many people just don't know where to start. Without the structure of a formal curriculum, it's easy to get overwhelmed quickly. Because of this, I recommend building relationships with people in the tech community that you can ask for guidance along the way. By the way, if you're reading this and want to ask me for advice, please don't hesitate to do so!
Outside of the cost, flexibility is probably the next major benefit. With self-teaching, you don't have to commute to a classroom. You don't have to give up your job. You can work learning into your everyday life. Again, this is incredibly difficult to do if you are not already hyper-focused. No one is going to be pushing you along. You have to do that yourself.
I would consider being self-taught to be the most difficult route to landing a job in tech. One of the ways that you combat this is to ensure that you have a solid portfolio. Make sure that you have at least 3 solid projects that demonstrate your skills as a developer. I would recommend having at least one fullstack project that shows your abilities on the frontend and backend. This will help open up more opportunities for you as you apply. Just remember, your projects might be the only thing an employer has to gauge your abilities.
Pros

cheap (ex. YouTube is free and Udemy courses go on sale for $10)
self-paced, work when you can (you don't have to leave your job)
follow your interests

Cons

lack of formal structure or progression path
lack of instructor for real-time learning/feedback
harder to get interviews without a degree or Bootcamp on your resume

Wrap Up
My goal is to help where I can with people that are looking to transition careers. I love being a part of the process because people are truly inspiring for me. That's why this article was so much fun.
I'm curious, what are your thoughts on the breakdown above? Do you agree? Disagree? Anything else you would add? What background do you have? Comment below or find me on twitter @jamesqquick.

CS Degree vs Programming Bootcamp vs Self-taught

After spending two weeks learning about CSS Grid, here's 10 examples to demonstrate what I learned.

<div><p>I've decided to spend some dedicated time learning more about different technologies this year. My goal is to spend about 2 weeks on topics like Vue, Serverless, TypeScript, Headless CMS, etc. This way I can hold myself accountable. The first topic I dove into was <strong>CSS Grid</strong>.</p><p>I created this list of 10 examples to build with CSS Grid as practice for myself and others.</p><blockquote>Learn how to build 10 examples with CSS Grid by following the <a href="https://youtu.be/wfXz8rW_fUs">video</a> and <a href="https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example">the source code</a></blockquote><p>In addition to the video, here are a few helpful resources as well as screenshots of the ten examples.</p><h2>Resources</h2><p>Here are the top resources that I used in my learning process!</p><ul><li><a href="https://cssgrid.io/friend/QUICK">CSS Grid Course by Wes Bos</a></li><li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/">Complete Guide to CSS Grid</a></li><li><a href="https://www.udemy.com/course/practical-css-grid/">Practical CSS Grid by Bryan Robinson</a></li></ul><h2>The Examples</h2><p>For each example, there is a set of starter files and finished files. Open the finished files to see what you need to build. Then, open up the starter files to see if you can complete the example on your own. If not, use the <a href="https://youtu.be/wfXz8rW_fUs">video</a> for help.</p><blockquote>Find the solutions in the <a href="https://youtu.be/wfXz8rW_fUs">video</a>!</blockquote><p>1. Responsive 3 Column Grid</p><img src="https://cdn.sanity.io/images/rx426fbd/production/1b4c9816885b0025ebba5a4ebd12b56d08066221-2750x802.png"><p>2. Centered Content</p><img src="https://cdn.sanity.io/images/rx426fbd/production/4aababad5f79e253269285d9fd5340ff5c96ec78-2724x1196.png"><p>3. Reordered Content</p><img src="https://cdn.sanity.io/images/rx426fbd/production/4ce0e1e8cc629135cd1f9f41382aee361205895d-2630x1096.png"><p>4. Responsive Navbar</p><img src="https://cdn.sanity.io/images/rx426fbd/production/00bcd483ad130ff63e59ddf916d9659bc602edcf-2762x654.png"><p>5. Asymetric Dashboard</p><img src="https://cdn.sanity.io/images/rx426fbd/production/c78cef4d07068e36d16ec2600ae5a6c3c4d4ac2d-2746x804.png"><p>6. Responsive Card Gallery</p><img src="https://cdn.sanity.io/images/rx426fbd/production/b3c3077bd77eb8191a830f1dbe87ceec3afc4533-2720x1378.png"><p>7. Asymetric Gallery Layout</p><img src="https://cdn.sanity.io/images/rx426fbd/production/303cf376dc43e73e14f5f56f9b1682882f16d48d-2720x1426.png"><p>8. Responsive 2 Column with Footer</p><img src="https://cdn.sanity.io/images/rx426fbd/production/fc637c1f3845eaf97f0b6ec219418fc8b185765f-2658x1596.png"><p>9. Responsive 2 Column Grid with Footer (Grid Areas)</p><img src="https://cdn.sanity.io/images/rx426fbd/production/fc637c1f3845eaf97f0b6ec219418fc8b185765f-2658x1596.png"><p>10. Checkerboard Layout</p><img src="https://cdn.sanity.io/images/rx426fbd/production/6e2e923fd6d0b848f17e8c703c583d5c2be098e0-2732x1788.png"></div>

I've decided to spend some dedicated time learning more about different technologies this year. My goal is to spend about 2 weeks on topics like Vue, Serverless, TypeScript, Headless CMS, etc. This way I can hold myself accountable. The first topic I dove into was CSS Grid.
I created this list of 10 examples to build with CSS Grid as practice for myself and others.
Learn how to build 10 examples with CSS Grid by following the video and the source code
In addition to the video, here are a few helpful resources as well as screenshots of the ten examples.
Resources
Here are the top resources that I used in my learning process!

CSS Grid Course by Wes Bos
Complete Guide to CSS Grid
Practical CSS Grid by Bryan Robinson

The Examples
For each example, there is a set of starter files and finished files. Open the finished files to see what you need to build. Then, open up the starter files to see if you can complete the example on your own. If not, use the video for help.
Find the solutions in the video!
1. Responsive 3 Column Grid

2. Centered Content

3. Reordered Content

4. Responsive Navbar

5. Asymetric Dashboard

6. Responsive Card Gallery

7. Asymetric Gallery Layout

8. Responsive 2 Column with Footer

9. Responsive 2 Column Grid with Footer (Grid Areas)

10. Checkerboard Layout

10 Examples with CSS Grid

Learn how to configure a proxy in your React applications.

<div><p>So you're working on a full-stack app, React on the frontend and...well anything else on the backend. Your Single Page Applications (SPAs) will have to interact with your backend through API/HTTP requests.</p><h2>The Problem</h2><p>When you publish your app, you have two options.</p><ol><li>backend serves your frontend</li><li>backend and frontend hosted separately (you will need to configure <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a> for this to work)</li></ol><p>However, in development, it's much much (did I say much?!) easier to run your frontend React app separate from your backend. For this to work, though, you'll need to make cross-origin requests since they are running on different ports. For example, by default Create React Apps run on port 3000, and your backend server might run on 8000. To allow this to work in development, you can set up a proxy in your React app.</p><h2>The Solution</h2><p>To solve this problem, we can configure a proxy in the package.json file of the React project. This allows the app to "pretend" it is making requests from the same port of the server.</p><blockquote><a href="https://create-react-app.dev/docs/proxying-api-requests-in-development/">Official docs on proxying</a></blockquote><p>To configure the proxy, you'll need to add the following line to your <code>package.json</code>.</p><pre><code lang="json">"proxy": "http://localhost:&lt;SERVER_PORT_NUMBER&gt;"</code></pre><p>Then, in your React app, you can make API requests by using relative paths. For example, <code>http://localhost:8000/api/todos</code> becomes <code>/api/todos</code>.</p><p>Now, you should be able to run your frontend and backend separately during development, while making API requests using relative paths.</p></div>

So you're working on a full-stack app, React on the frontend and...well anything else on the backend. Your Single Page Applications (SPAs) will have to interact with your backend through API/HTTP requests.
The Problem
When you publish your app, you have two options.

backend serves your frontend
backend and frontend hosted separately (you will need to configure CORS for this to work)

However, in development, it's much much (did I say much?!) easier to run your frontend React app separate from your backend. For this to work, though, you'll need to make cross-origin requests since they are running on different ports. For example, by default Create React Apps run on port 3000, and your backend server might run on 8000. To allow this to work in development, you can set up a proxy in your React app.
The Solution
To solve this problem, we can configure a proxy in the package.json file of the React project. This allows the app to "pretend" it is making requests from the same port of the server.
Official docs on proxying
To configure the proxy, you'll need to add the following line to your package.json.
"proxy": "http://localhost:<SERVER_PORT_NUMBER>"
Then, in your React app, you can make API requests by using relative paths. For example, http://localhost:8000/api/todos becomes /api/todos.
Now, you should be able to run your frontend and backend separately during development, while making API requests using relative paths.

Configure a Proxy in React

Learn how to send text messages in Node with Twilio.

<div><p>I saw my first <a href="https://www.twilio.com/">Twilio</a> demo about 7 years ago, and it was one of the coolest things I had ever seen. A room full of hundreds of attendees submitted their phone numbers, and all of them received text messages within seconds. In this article, I'll show you how to use <a href="https://nodejs.org/en/">Node.js</a> and Twilio to send your first text message.</p><h2>Getting Started</h2><p>There's a few steps we need to go through before we get to the code.</p><h3>Signup</h3><p>To get started, you'll need to signup for a Twilio account. Through that process, you'll need to verify both an email and a phone number.</p><blockquote>Signup using my <a href="http://localhost:8000/blog/www.twilio.com/referral/BlB5lB">referral link</a> and get \$10 extra dollars to spend!</blockquote><h3>Additional Info</h3><p>As part of the signup process, you might be prompted for a few extra details.</p><ul><li>"Do you write code?"</li><li>"What is your preferred language?"</li><li>"What is your goal today?"</li></ul><p>Since this is a demo using Node, I chose yes to being a developer, Node as the language, and goal of using Twilio in a project.</p><h3>First App and dashboard</h3><p>After sign up is successful, you'll be taken to your dashboard where a demo app has been created for you. Mine is called "My First Twilio Project". From here, you'll have access to several things.</p><ul><li>your Account SID (unique application identifier) and Auth Token (you'll need these shortly)</li><li>button to "Get a Trial Number"</li><li>links to QuickStarts</li></ul><h3>Set Up A Trial Number</h3><p>You'll need to set up a trial number to be able to send text messages. Click the <code>Get a Trial Number</code> button to generate your first number. Then click <code>Choose this Number</code>.</p><p>You'll need this number shortly.</p><h2>The Code</h2><p>Now that you have your account and phone number set up, you have the 3 pieces of information you need to start writing code.</p><ul><li>Account SID</li><li>Auth Token</li><li>Phone number</li></ul><h3>Initialize Project</h3><p>We are going to create a Node project to send our text message. Make sure that you have <a href="https://nodejs.org/en/download/">Node</a> installed on your machine.</p><p>With Node installed, open a folder in your favorite text editor (<a href="https://code.visualstudio.com/">VS Code</a> for the win!) and create one file, <code>app.js</code>.</p><blockquote><a href="https://www.udemy.com/course/learn-visual-studio-code/">Learn everything you need to know about Visual Studio Code, the most popular editor for Web Development</a></blockquote><p>Now you can initialize your folder as a JavaScript project by running <code>npm init</code> in the command line. For now, I would just accept all of the default values.</p><h3>Installing NPM Packages</h3><p>There are two packages we will need for this demo, <a href="https://www.npmjs.com/package/twilio">twilio</a> and <a href="https://www.npmjs.com/package/dotenv">dotenv</a>. Go ahead and install these by running the following command.</p><pre><code lang="sh">npm install twilio dotenv</code></pre><h3>DotEnv</h3><p>Environment variables are used so that developers don't check sensitive information into source control. Things like applications secrets, API keys, and auth tokens are NOT something that should be seen by anyone else. <strong>Never check them into your source code.</strong> Instead, put them in environment variables and reference them as you'll see in a second.</p><blockquote><a href="https://www.youtube.com/watch?v=i14ekt_DAt0&amp;t=1s">Learn more about environment variables using dotenv</a></blockquote><p>Typically, environment variables are stored in your website host, but for development, we can reference them locally. To do so, create a new file <code>.env</code>. Inside this file, we will add our environment variables as key-value pairs. One for the application SID and one for the auth token. It will look like this.</p><pre><code lang="text">TWILIO_ACCOUNT_SID=&lt;YOUR_ACCOUNT_SID&gt; TWILIO_AUTH_TOKEN=&lt;YOUR_AUTH_TOKEN&gt;</code></pre><p>Now, in the <code>app.js</code> file add the following line. This line allows us to access environment variables from our <code>.env</code> file.</p><pre><code lang="javascript">require("dotenv").config();</code></pre><h3>Create Twilio Client</h3><p>Now, we need to create an instance of the Twilio client. We will first get a reference to both of the environment variables mentioned above and use them to create the client. To access environment variables use <code>process.env.[VARIABLE_NAME]</code></p><pre><code lang="javascript">const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const client = require("twilio")(accountSid, authToken);</code></pre><h3>Send Text Message</h3><p>With the Twilio client set up successfully, we are ready to send a message. To do so, we will call <code>client.messages.create()</code> and pass in an object representing the message. The message object will have three properties.</p><ol><li>body - the body of the message</li><li>from - the number the message is sent from (this is the one you created earlier in the Twilio dashboard)</li><li>to - the number you want to send the message to (use the number that you verified during the signup process)</li></ol><p>It will look like this.</p><pre><code lang="javascript">client.messages.create({
  body: "This is a test text message!!",
  from: "&lt;FROM_NUMBER&gt;",
  to: "&lt;TO_NUMBER&gt;",
});</code></pre><p>Calling the <code>create()</code> function returns a promise. This means we need to add a <code>.then()</code> and <code>.catch()</code> to determine whether the message was sent successfully or whether there was an error. In both cases, we can log the result out to the console. It looks like this.</p><pre><code lang="javascript">client.messages
  .create({
    body: "This is a test text message!!",
    from: "&lt;FROM_NUMBER&gt;",
    to: "&lt;TO_NUMBER&gt;",
  })
  .then(message =&gt; console.log(message))
  .catch(err =&gt; console.log(err));</code></pre><p>That's it. That's all it takes. Here's the final code.</p><pre><code lang="javascript">require("dotenv").config();
const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const client = require("twilio")(accountSid, authToken);
client.messages
  .create({
    body: "This is a test text message!!",
    from: "&lt;FROM_NUMBER&gt;",
    to: "&lt;TO_NUMBER&gt;",
  })
  .then(message =&gt; console.log(message))
  .catch(err =&gt; console.log(err));</code></pre><p>To test it out, run <code>node app.js</code>, and you should see the text message on your phone!</p><h2>Wrap Up</h2><p>Twilio is a sweet service that is used across the world. I think it's super fun to play with in demos but also very applicable for real-world applications. Hopefully, this gets you started and you come up with creative ways to use Twilio in your projects going forward.</p></div>

I saw my first Twilio demo about 7 years ago, and it was one of the coolest things I had ever seen. A room full of hundreds of attendees submitted their phone numbers, and all of them received text messages within seconds. In this article, I'll show you how to use Node.js and Twilio to send your first text message.
Getting Started
There's a few steps we need to go through before we get to the code.
Signup
To get started, you'll need to signup for a Twilio account. Through that process, you'll need to verify both an email and a phone number.
Signup using my referral link and get \$10 extra dollars to spend!
Additional Info
As part of the signup process, you might be prompted for a few extra details.

"Do you write code?"
"What is your preferred language?"
"What is your goal today?"

Since this is a demo using Node, I chose yes to being a developer, Node as the language, and goal of using Twilio in a project.
First App and dashboard
After sign up is successful, you'll be taken to your dashboard where a demo app has been created for you. Mine is called "My First Twilio Project". From here, you'll have access to several things.

your Account SID (unique application identifier) and Auth Token (you'll need these shortly)
button to "Get a Trial Number"
links to QuickStarts

Set Up A Trial Number
You'll need to set up a trial number to be able to send text messages. Click the Get a Trial Number button to generate your first number. Then click Choose this Number.
You'll need this number shortly.
The Code
Now that you have your account and phone number set up, you have the 3 pieces of information you need to start writing code.

Account SID
Auth Token
Phone number

Initialize Project
We are going to create a Node project to send our text message. Make sure that you have Node installed on your machine.
With Node installed, open a folder in your favorite text editor (VS Code for the win!) and create one file, app.js.
Learn everything you need to know about Visual Studio Code, the most popular editor for Web Development
Now you can initialize your folder as a JavaScript project by running npm init in the command line. For now, I would just accept all of the default values.
Installing NPM Packages
There are two packages we will need for this demo, twilio and dotenv. Go ahead and install these by running the following command.
npm install twilio dotenv
DotEnv
Environment variables are used so that developers don't check sensitive information into source control. Things like applications secrets, API keys, and auth tokens are NOT something that should be seen by anyone else. Never check them into your source code. Instead, put them in environment variables and reference them as you'll see in a second.
Learn more about environment variables using dotenv
Typically, environment variables are stored in your website host, but for development, we can reference them locally. To do so, create a new file .env. Inside this file, we will add our environment variables as key-value pairs. One for the application SID and one for the auth token. It will look like this.
TWILIO_ACCOUNT_SID=<YOUR_ACCOUNT_SID> TWILIO_AUTH_TOKEN=<YOUR_AUTH_TOKEN>
Now, in the app.js file add the following line. This line allows us to access environment variables from our .env file.
require("dotenv").config();
Create Twilio Client
Now, we need to create an instance of the Twilio client. We will first get a reference to both of the environment variables mentioned above and use them to create the client. To access environment variables use process.env.[VARIABLE_NAME]
const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const client = require("twilio")(accountSid, authToken);
Send Text Message
With the Twilio client set up successfully, we are ready to send a message. To do so, we will call client.messages.create() and pass in an object representing the message. The message object will have three properties.

body - the body of the message
from - the number the message is sent from (this is the one you created earlier in the Twilio dashboard)
to - the number you want to send the message to (use the number that you verified during the signup process)

It will look like this.
client.messages.create({
  body: "This is a test text message!!",
  from: "<FROM_NUMBER>",
  to: "<TO_NUMBER>",
});
Calling the create() function returns a promise. This means we need to add a .then() and .catch() to determine whether the message was sent successfully or whether there was an error. In both cases, we can log the result out to the console. It looks like this.
client.messages
  .create({
    body: "This is a test text message!!",
    from: "<FROM_NUMBER>",
    to: "<TO_NUMBER>",
  })
  .then(message => console.log(message))
  .catch(err => console.log(err));
That's it. That's all it takes. Here's the final code.
require("dotenv").config();
const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const client = require("twilio")(accountSid, authToken);
client.messages
  .create({
    body: "This is a test text message!!",
    from: "<FROM_NUMBER>",
    to: "<TO_NUMBER>",
  })
  .then(message => console.log(message))
  .catch(err => console.log(err));
To test it out, run node app.js, and you should see the text message on your phone!
Wrap Up
Twilio is a sweet service that is used across the world. I think it's super fun to play with in demos but also very applicable for real-world applications. Hopefully, this gets you started and you come up with creative ways to use Twilio in your projects going forward.

Twilio and Node - Send Your First Text Message

Learn how Auth0 embraces one of its core tenants, N+1>N.

<div><p>A couple of weeks ago I posted an <a href="https://www.jamesqquick.com/blog/i-got-corrected-on-my-second-day">article</a> about an interaction I had with the CTO at <a href="http://auth0.com/">Auth0</a>, <a href="https://twitter.com/woloski">Matias Woloski</a>. On just my second day, I got feedback from Matias about how I could improve my pitch for who we are and what we do. At the time, I related this to one of our core pillars, <code>We give a shit</code>. After thinking about it more, it also brings up another one of our core pillars, "N+1&gt;N".</p><blockquote><a href="https://www.jamesqquick.com/blog/i-got-corrected-on-my-second-day">I got corrected on my Second Day, and I Love It</a> (Article)</blockquote><h2>What Does N+1&gt;N Mean?</h2><p>In short...</p><blockquote>Next time, do better. Next time, improve on last time. Don't be afraid to try. Learn from your experience and constantly improve.</blockquote><p>At Auth0, we aren't afraid to make mistakes because those become learning opportunities. It's a core tenant of Agile, but it's something many companies struggle with. We do take it seriously.</p><p>You can imagine, at times, that it is hard to have a positive attitude towards failure. I've been in situations with a "blame culture", where the end goal is to find the person to blame. That mentality is <strong>not</strong> looking towards the future. It's <strong>not</strong> focusing on what we learned to make sure we do it better next time. And it's <strong>not</strong> focused on the fact that people are human.</p><h2>So, How Do You Explain Auth0?</h2><p>Well, the good thing is Matias gave me a cheat sheet. I love how he broke it down based on different potential audiences. I think that's important because as a speaker, it's my responsibility to adapt my message to the people I'm speaking to. Matias understands that.</p><h3>20 Second Pitch</h3><blockquote>"Think about Auth0 like your authentication and authorization microservice. But… built by hundreds of people, with all the features that would take you a long time to build yourself. That is operated for you, always improving, with advanced security features and great reliability and scalability."</blockquote><p>The 1-minute speech is a lot longer, so I'll leave that to your imagination. Or...maybe you'll hear it from me in person!</p><h3>Non-tech Friends/Parents Pitch</h3><blockquote>"You enter usernames and passwords everywhere on the internet, right? Well, a developer has to implement all that. We provide that as a service for them, so they can spend time implementing their application instead."</blockquote><p>This is probably the easiest to use for the widest audience.</p><h3>Grandparent Pitch</h3><blockquote>"We make the internet safer."</blockquote><p>I like this one a lot...lol</p></div>

A couple of weeks ago I posted an article about an interaction I had with the CTO at Auth0, Matias Woloski. On just my second day, I got feedback from Matias about how I could improve my pitch for who we are and what we do. At the time, I related this to one of our core pillars, We give a shit. After thinking about it more, it also brings up another one of our core pillars, "N+1>N".
I got corrected on my Second Day, and I Love It (Article)
What Does N+1>N Mean?
In short...
Next time, do better. Next time, improve on last time. Don't be afraid to try. Learn from your experience and constantly improve.
At Auth0, we aren't afraid to make mistakes because those become learning opportunities. It's a core tenant of Agile, but it's something many companies struggle with. We do take it seriously.
You can imagine, at times, that it is hard to have a positive attitude towards failure. I've been in situations with a "blame culture", where the end goal is to find the person to blame. That mentality is not looking towards the future. It's not focusing on what we learned to make sure we do it better next time. And it's not focused on the fact that people are human.
So, How Do You Explain Auth0?
Well, the good thing is Matias gave me a cheat sheet. I love how he broke it down based on different potential audiences. I think that's important because as a speaker, it's my responsibility to adapt my message to the people I'm speaking to. Matias understands that.
20 Second Pitch
"Think about Auth0 like your authentication and authorization microservice. But… built by hundreds of people, with all the features that would take you a long time to build yourself. That is operated for you, always improving, with advanced security features and great reliability and scalability."
The 1-minute speech is a lot longer, so I'll leave that to your imagination. Or...maybe you'll hear it from me in person!
Non-tech Friends/Parents Pitch
"You enter usernames and passwords everywhere on the internet, right? Well, a developer has to implement all that. We provide that as a service for them, so they can spend time implementing their application instead."
This is probably the easiest to use for the widest audience.
Grandparent Pitch
"We make the internet safer."
I like this one a lot...lol

N+1>N It's Part of the Auth0 Culture

Learn how to build a search bar in JavaScript to search/filter through data.

<div><p>Searching is one of the most common things you do on the internet. At some point, you'll probably want to incorporate search into your own app. In this article, let's learn how to create a search bar to filter content with vanilla JavaScript.</p><blockquote>Check out the finished code <a href="https://codepen.io/jamesqquick/pen/XWJxBQv">here</a></blockquote><h2>Project Setup</h2><p>For this demo, we will use the <a href="http://hp-api.herokuapp.com/api/characters">Harry Potter API</a> to search/filter Harry Potter characters. I've created a starter <a href="https://codepen.io/jamesqquick/pen/bGNXYxx">Code Pen</a> that you can use to make sure we all start from the same point. This starter code provides basic styling and the logic to retrieve and display the characters.</p><h2>Retrieving User Input</h2><p>The most important concept in this article is learning how to retrieve user input from a text box. To do this, we need to get a reference to the input by its id by using <code>document.getElementById()</code>. Add the following line to the top of the JavaScript file.</p><pre><code lang="javascript">const searchBar = document.getElementById("searchBar");</code></pre><p>Now that we have a reference to the <code>searchBar</code>, we can add a <code>keyup</code> event listener to retrieve the input from the user. I'm using ES6 Arrow Function syntax for the callback.</p><blockquote>Learn more about <a href="https://www.youtube.com/watch?v=prG68DQobbw&amp;t=265s">Arrow Functions in JavaScript</a></blockquote><pre><code lang="javascript">searchBar.addEventListener("keyup", e =&gt; {});</code></pre><p>Notice that the callback function has a parameter, <code>e</code>. This is the event object. We can access the input from user with <code>e.target.value</code>. Assign it to a variable like so.</p><pre><code lang="javascript">searchBar.addEventListener("keyup", e =&gt; { 
  const searchString = e.target.value; 
});</code></pre><p>At this point, you can use <code>console.log(searchString)</code> to double-check you are getting the right values.</p><h2>Filtering Characters on Search</h2><p>Now, we can use the search string to perform the search. In our example, we are simply going to filter the HP characters that we have already retrieved. Keep in mind, in other scenarios, you might need to make an additional API request if the original data set is too large to store in memory.</p><p>For filtering, we are going to use the JavaScript array <code>filter()</code> method. This method will allow us to iterate through each of the characters in our array and decide whether or not it should be shown based on the search string.</p><blockquote>Learn more about <a href="https://www.youtube.com/watch?v=ALYH5XOvMwI&amp;t=6s">JavaScript Array functions</a></blockquote><p>We are going to allow the user to search by both character name and Hogwarts house. For example, if the user searches <code>G</code> characters who are in the Gryffindor house, as well as ones whose name contains a <code>G</code>, should be shown. Let's start by stubbing out the filter like so.</p><pre><code lang="javascript">const filteredCharacters = hpCharacters.filter(character =&gt; { return true; });</code></pre><p>In the snippet above, we are returning <code>true</code> for each character which means we aren't filtering at all. As we mentioned earlier, we want to filter based on the character name and house. So, we need to return whether or not the search string is included in each character's house or his/her name.</p><pre><code lang="javascript">const filteredCharacters = hpCharacters.filter(character =&gt; {
  return (
    character.name.includes(searchString) ||
    character.house.includes(searchString)
  );
});</code></pre><p>With our filter in place, we now need to display the filtered characters by calling the <code>displayCharacters()</code> function. Here's the entire function.</p><pre><code lang="javascript">searchBar.addEventListener("keyup", e =&gt; {
  const searchString = e.target.value;
  const filteredCharacters = hpCharacters.filter(character =&gt; {
    return (
      character.name.includes(searchString) ||
      character.house.includes(searchString)
    );
  });
  displayCharacters(filteredCharacters);
});</code></pre><p>Now, try a couple of searches.</p><p>For example, <code>Gry</code> should return all characters in the Gryffindor house.</p><p><code>Ce</code> should return Cedric Diggory, Horace Slughorn, and Vincent Crabbe.</p><h2>Case Insensitive Search</h2><p>Although search appears to work, you might have wondered what would happen if you type in a search with all lowercase letters. Turns out, the search wouldn't quite work.</p><p>To prove this, search for <code>harry</code> and you'll see there aren't any results.</p><p>What we most likely want is a case insensitive search, meaning uppercase vs lowercase doesn't matter. When this is the case (pun intended... lol ), the typical strategy is to convert both the search string and the thing you're searching to lowercase. We can update our filter method with case insensitive search like so.</p><pre><code lang="javascript">const searchString = e.target.value.toLowerCase();
const filteredCharacters = hpCharacters.filter(character =&gt; {
  return (
    character.name.toLowerCase().includes(searchString) ||
    character.house.toLowerCase().includes(searchString)
  );
});</code></pre><p>Now, search for <code>harry</code> again and you should see Mr. Potter.</p><h2>Wrap Up</h2><p>Hopefully, this gave you a bit of insight into working input DOM elements, the filter function, and case insensitive searches. If not, at least you go to work with a pretty cool Harry Potter API 😋</p></div>

Searching is one of the most common things you do on the internet. At some point, you'll probably want to incorporate search into your own app. In this article, let's learn how to create a search bar to filter content with vanilla JavaScript.
Check out the finished code here
Project Setup
For this demo, we will use the Harry Potter API to search/filter Harry Potter characters. I've created a starter Code Pen that you can use to make sure we all start from the same point. This starter code provides basic styling and the logic to retrieve and display the characters.
Retrieving User Input
The most important concept in this article is learning how to retrieve user input from a text box. To do this, we need to get a reference to the input by its id by using document.getElementById(). Add the following line to the top of the JavaScript file.
const searchBar = document.getElementById("searchBar");
Now that we have a reference to the searchBar, we can add a keyup event listener to retrieve the input from the user. I'm using ES6 Arrow Function syntax for the callback.
Learn more about Arrow Functions in JavaScript
searchBar.addEventListener("keyup", e => {});
Notice that the callback function has a parameter, e. This is the event object. We can access the input from user with e.target.value. Assign it to a variable like so.
searchBar.addEventListener("keyup", e => { 
  const searchString = e.target.value; 
});
At this point, you can use console.log(searchString) to double-check you are getting the right values.
Filtering Characters on Search
Now, we can use the search string to perform the search. In our example, we are simply going to filter the HP characters that we have already retrieved. Keep in mind, in other scenarios, you might need to make an additional API request if the original data set is too large to store in memory.
For filtering, we are going to use the JavaScript array filter() method. This method will allow us to iterate through each of the characters in our array and decide whether or not it should be shown based on the search string.
Learn more about JavaScript Array functions
We are going to allow the user to search by both character name and Hogwarts house. For example, if the user searches G characters who are in the Gryffindor house, as well as ones whose name contains a G, should be shown. Let's start by stubbing out the filter like so.
const filteredCharacters = hpCharacters.filter(character => { return true; });
In the snippet above, we are returning true for each character which means we aren't filtering at all. As we mentioned earlier, we want to filter based on the character name and house. So, we need to return whether or not the search string is included in each character's house or his/her name.
const filteredCharacters = hpCharacters.filter(character => {
  return (
    character.name.includes(searchString) ||
    character.house.includes(searchString)
  );
});
With our filter in place, we now need to display the filtered characters by calling the displayCharacters() function. Here's the entire function.
searchBar.addEventListener("keyup", e => {
  const searchString = e.target.value;
  const filteredCharacters = hpCharacters.filter(character => {
    return (
      character.name.includes(searchString) ||
      character.house.includes(searchString)
    );
  });
  displayCharacters(filteredCharacters);
});
Now, try a couple of searches.
For example, Gry should return all characters in the Gryffindor house.
Ce should return Cedric Diggory, Horace Slughorn, and Vincent Crabbe.
Case Insensitive Search
Although search appears to work, you might have wondered what would happen if you type in a search with all lowercase letters. Turns out, the search wouldn't quite work.
To prove this, search for harry and you'll see there aren't any results.
What we most likely want is a case insensitive search, meaning uppercase vs lowercase doesn't matter. When this is the case (pun intended... lol ), the typical strategy is to convert both the search string and the thing you're searching to lowercase. We can update our filter method with case insensitive search like so.
const searchString = e.target.value.toLowerCase();
const filteredCharacters = hpCharacters.filter(character => {
  return (
    character.name.toLowerCase().includes(searchString) ||
    character.house.toLowerCase().includes(searchString)
  );
});
Now, search for harry again and you should see Mr. Potter.
Wrap Up
Hopefully, this gave you a bit of insight into working input DOM elements, the filter function, and case insensitive searches. If not, at least you go to work with a pretty cool Harry Potter API 😋

Build a JavaScript Search Bar

Learn how to add VS Code to your path so you can open it from the terminal.

<div><p>When you install VS Code, you'll want to make sure you also add it to your path. The problem is the VS Code needs to be added to your path so that the terminal knows how to run the <code>code</code> command. Thankfully, the VS Code team has already thought of this for you and added an easy way to fix it.</p><p>Open the command palette (<code>CMD+Shift+P</code> on Mac and <code>CTRL+Shift+P</code> on Windows) and type <code>Shell Command</code>. You'll see two options, one to <code>Install 'code' command in PATH</code> and one to <code>Uninstall 'code' command from PATH</code>.</p><p>If you haven't guessed already, choose <code>Install 'code' command in PATH</code>. You should then be able to use the <code>code</code> command from the command line. If, later on, you for some reason need to remove it from the path, follow the same steps but choose <code>Uninstall 'code' command from PATH</code>.</p></div>

When you install VS Code, you'll want to make sure you also add it to your path. The problem is the VS Code needs to be added to your path so that the terminal knows how to run the code command. Thankfully, the VS Code team has already thought of this for you and added an easy way to fix it.
Open the command palette (CMD+Shift+P on Mac and CTRL+Shift+P on Windows) and type Shell Command. You'll see two options, one to Install 'code' command in PATH and one to Uninstall 'code' command from PATH.
If you haven't guessed already, choose Install 'code' command in PATH. You should then be able to use the code command from the command line. If, later on, you for some reason need to remove it from the path, follow the same steps but choose Uninstall 'code' command from PATH.

Add VS Code To Your Path

The beautiful thing about Visual Studio Code is how easy it is to customize, but what happens if you get a new computer?

<div><p>The beautiful thing about Visual Studio Code is how easy it is to customize, but what happens if you get a new computer? You have to take the time to install all the same extensions, manually copy over settings and keybindings, etc.</p><blockquote>One extension can sync all of your settings in seconds!</blockquote><p>Well, you don't have to do that anymore! We are going to use the <a href="https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync">Settings Sync</a> extension to take care of that for you. This way, no matter what computer you are on, you can get your instance of VS Code synchronized with all of your settings right away!</p><blockquote><strong>The only thing you need is a Github account.</strong></blockquote><h2>Installing the Extension</h2><p>The first thing you'll need to do is install the extension. You can do this by searching inside the extensions tab in VS Code. You can find the icon in the side panel on the left that looks like four squares (with one a little bit off on its own).</p><p></p><h2>Configuring the Extension</h2><p>After you install, you'll now need to configure the extension. Luckily, there is an information tab that opens up after installing to help you get started. On the new informational tab, choose "Login with Github".</p><p>VS Code might double-check that you want to navigate to a webpage. Choose "Open".</p><p>After logging in successfully with Github, the extension will show you what copies of settings you have already stored. At this point, you probably don't have any. In mine, you can see I already had one created. If it's your first time, choose "Skip".</p><p>By choosing skip, this will allow you to create your first Github Gist to store your settings. For demo purposes, I'm going to install my favorite theme, <a href="https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2">Cobalt 2 theme from Wes Bos</a>. This way, after I save my settings and then download them, I can verify that the extension works. You don't necessarily have to follow this step if you have already customized VS Code in some way (settings, snippets, themes, extensions, etc.).</p><p></p><h2>Saving Your Settings to Github</h2><p>Since you are already connected to your Github account, you're ready to save off your settings inside of a Github Gist.</p><blockquote><a href="https://help.github.com/en/enterprise/2.13/user/articles/about-gists">Github Gists</a> are a quick way to share snippets of code</blockquote><p>To save those settings to Github, you'll need to open the Command Palette (<code>Command+Shift+P</code> on Mac and <code>Control+Shift+P</code> on Windows). Then search for <code>Sync: Update/Upload Settings</code> and press enter/return.</p><p></p><p>You'll then see a popup in the bottom right-hand corner explaining that this action will replace the existing settings. Since you don't have any existing settings, click "Yes" to continue.</p><p></p><p>After this, you can open up your gists to see the newly updated settings. To view your gists, hit the dropdown menu in your profile icon in the top right of Github and choose "Your Gists".</p><p></p><p>Here, you can see that my Gist was successfully uploaded and the settings include the Cobalt 2 theme.</p><p></p><h2>Downloading Settings</h2><p>Now that you know how to save your settings in a Github Gist, I'll show you how to download them. For demo purposes, I reset my instance of VS Code to simulate starting with a fresh instance.</p><p>First, you would need to install the extension as above and login with Github credentials. After doing so, you'll again be presented with a list of existing settings Gists. After choosing the correct one (I've got three but most likely you'll on have one), you'll get notified that that Gist has been associated with your Settings Sync extension.</p><p></p><p>From here you need to open the Command Palette again (<code>Command+Shift+P</code> on Mac and <code>Control+Shift+P</code> on Windows). Then search for <code>Sync: Download Settings</code> and press enter/return.</p><p></p><p>In my personal instance, I've got around 50 extensions installed as well as custom settings, snippets, and keybindings. Mine took a few minutes to complete everything.</p><p>But BOOM. In just a few minutes, you've got all of the settings I care about in a brand new instance of VS Code!</p><p></p></div>

The beautiful thing about Visual Studio Code is how easy it is to customize, but what happens if you get a new computer? You have to take the time to install all the same extensions, manually copy over settings and keybindings, etc.
One extension can sync all of your settings in seconds!
Well, you don't have to do that anymore! We are going to use the Settings Sync extension to take care of that for you. This way, no matter what computer you are on, you can get your instance of VS Code synchronized with all of your settings right away!
The only thing you need is a Github account.
Installing the Extension
The first thing you'll need to do is install the extension. You can do this by searching inside the extensions tab in VS Code. You can find the icon in the side panel on the left that looks like four squares (with one a little bit off on its own).

Configuring the Extension
After you install, you'll now need to configure the extension. Luckily, there is an information tab that opens up after installing to help you get started. On the new informational tab, choose "Login with Github".
VS Code might double-check that you want to navigate to a webpage. Choose "Open".
After logging in successfully with Github, the extension will show you what copies of settings you have already stored. At this point, you probably don't have any. In mine, you can see I already had one created. If it's your first time, choose "Skip".
By choosing skip, this will allow you to create your first Github Gist to store your settings. For demo purposes, I'm going to install my favorite theme, Cobalt 2 theme from Wes Bos. This way, after I save my settings and then download them, I can verify that the extension works. You don't necessarily have to follow this step if you have already customized VS Code in some way (settings, snippets, themes, extensions, etc.).

Saving Your Settings to Github
Since you are already connected to your Github account, you're ready to save off your settings inside of a Github Gist.
Github Gists are a quick way to share snippets of code
To save those settings to Github, you'll need to open the Command Palette (Command+Shift+P on Mac and Control+Shift+P on Windows). Then search for Sync: Update/Upload Settings and press enter/return.

You'll then see a popup in the bottom right-hand corner explaining that this action will replace the existing settings. Since you don't have any existing settings, click "Yes" to continue.

After this, you can open up your gists to see the newly updated settings. To view your gists, hit the dropdown menu in your profile icon in the top right of Github and choose "Your Gists".

Here, you can see that my Gist was successfully uploaded and the settings include the Cobalt 2 theme.

Downloading Settings
Now that you know how to save your settings in a Github Gist, I'll show you how to download them. For demo purposes, I reset my instance of VS Code to simulate starting with a fresh instance.
First, you would need to install the extension as above and login with Github credentials. After doing so, you'll again be presented with a list of existing settings Gists. After choosing the correct one (I've got three but most likely you'll on have one), you'll get notified that that Gist has been associated with your Settings Sync extension.

From here you need to open the Command Palette again (Command+Shift+P on Mac and Control+Shift+P on Windows). Then search for Sync: Download Settings and press enter/return.

In my personal instance, I've got around 50 extensions installed as well as custom settings, snippets, and keybindings. Mine took a few minutes to complete everything.
But BOOM. In just a few minutes, you've got all of the settings I care about in a brand new instance of VS Code!

Settings Sync Extension for Visual Studio Code

Here about Frank Calise's experience with implementing authentication with Auth0 into a mobile app.

<div><p>Here about Frank Calise's experience with implementing authentication with Auth0 into a mobile app.</p><p>After starting at <a href="https://auth0.com/">Auth0</a>, I figured it would be good to know more about experiences (positive or negative) that developers have had with authentication, identity, and potentially Auth0 specifically. That said, I met <a href="https://twitter.com/frankcalise">Frank Calise</a> on twitter, and he agreed to chat with me for a few minutes. Here's what came of it.</p><blockquote>BTW. Open invitation to anyone that would like to share their experience with me. Reach out on Twitter, <a href="https://twitter.com/jamesqquick">@jamesqquick</a>.</blockquote><h2>How It Started</h2><p>I wrote a <a href="https://www.jamesqquick.com/blog/my-first-week-at-auth0">blog post</a> explaining how excited I was after my first week at Auth0. Turns out, Frank read the article and was glad to hear about my positive experience because of having used Auth0 himself.</p><p>After hearing that he had used Auth0 before, I asked if he would be open to chatting with me about the experience, and well... he said yes lol</p><blockquote>I don't think I'm able to do my job as an Advocate if I'm not genuine with developers in the community.</blockquote><p>I did make sure to let him know that I wasn't a salesperson. Obviously, there's nothing wrong with salespeople, but I wanted to make sure he understood my intent for the conversation. <strong>I wanted this to be a genuine conversation between developers</strong>. I don't think I'm able to do my job as an Advocate if I'm not genuine with developers in the community. Thankfully, he said he already followed me before joining Auth0, so I had already earned some trust.</p><h3>His Development Background</h3><p>Frank was brand new to JavaScript a few years ago and needed to build a web app. At the time Angular was going through the tough rebranding from Angular.js to Angular 2+, so he decided to go with React. The app required secure authentication functionality in a short timeline and led to this reaction.</p><blockquote>“I can’t just turn around and build some super secure thing in three weeks”</blockquote><p>Ya, I laughed too. 😂</p><h3>Using Auth0</h3><p>Obviously, with such a quick (basically impossible) turnaround, he started to look for tools to help. After struggling to understand OAuth through posts on Stack Overflow, he found Auth0.</p><blockquote>Auth0 handles all of the deep security knowledge for you. As a developer, you just have to focus on building your applications.</blockquote><p>After deciding to give Auth0 a try, he was able to <strong>build a POC in a couple of days</strong>. He said the <strong>docs were really good</strong> and made it easy to get started.</p><p>All in all, here's what he had to say.</p><blockquote>"Oh yeah I blew past auth and skipped over essentially having to do any deep development auth related for the front end, which allowed me to implement other features to show off to investors more quickly."</blockquote><p>On the technical side, here's one piece of feedback he had. The Auth0 library he was using (again a couple of years ago) only allowed him to work with callbacks and not promises. Promises are typically preferred by JavaScript developers and allow them to take advantage of nifty features like <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function">Async/Await</a>.</p><p>That was a couple of years ago. Turns out, the <a href="https://auth0.com/docs/libraries/auth0-spa-js">newest version of the Auth0 SDK for Single Page Applications</a> <strong>does supports promises</strong>, so no harm there.</p><p>In regards to Auth0 library changes, etc. he also said.</p><blockquote>"And all the communication from Auth0 has been great when deprecating a piece of the library, some <a href="http://localhost:8000/blog/authentication-experience-from-a-developer-frank-calise">function</a> call, etc."</blockquote><p>One interesting note I found was that he had used <a href="http://jwt.io/">jwt.io</a> (like millions of others have) to inspect JSON Web Tokens, but he didn't realize that site is built by Auth0 and owned by my team for that matter. I thought that was cool for <strong>Auth0 to have the defacto tool for inspecting JSON Web Tokens</strong> even if people didn't realize it.</p><h2>What I Learned</h2><p>It's always great to make a connection in the community. This is something I'm going to do more. I've got an open invitation to anyone that would like to share their experience with authentication, identity, Auth0, competitors, etc. If you're interested in sharing, please reach out on <a href="https://twitter.com/jamesqquick">twitter</a>.</p></div>

Here about Frank Calise's experience with implementing authentication with Auth0 into a mobile app.
After starting at Auth0, I figured it would be good to know more about experiences (positive or negative) that developers have had with authentication, identity, and potentially Auth0 specifically. That said, I met Frank Calise on twitter, and he agreed to chat with me for a few minutes. Here's what came of it.
BTW. Open invitation to anyone that would like to share their experience with me. Reach out on Twitter, @jamesqquick.
How It Started
I wrote a blog post explaining how excited I was after my first week at Auth0. Turns out, Frank read the article and was glad to hear about my positive experience because of having used Auth0 himself.
After hearing that he had used Auth0 before, I asked if he would be open to chatting with me about the experience, and well... he said yes lol
I don't think I'm able to do my job as an Advocate if I'm not genuine with developers in the community.
I did make sure to let him know that I wasn't a salesperson. Obviously, there's nothing wrong with salespeople, but I wanted to make sure he understood my intent for the conversation. I wanted this to be a genuine conversation between developers. I don't think I'm able to do my job as an Advocate if I'm not genuine with developers in the community. Thankfully, he said he already followed me before joining Auth0, so I had already earned some trust.
His Development Background
Frank was brand new to JavaScript a few years ago and needed to build a web app. At the time Angular was going through the tough rebranding from Angular.js to Angular 2+, so he decided to go with React. The app required secure authentication functionality in a short timeline and led to this reaction.
“I can’t just turn around and build some super secure thing in three weeks”
Ya, I laughed too. 😂
Using Auth0
Obviously, with such a quick (basically impossible) turnaround, he started to look for tools to help. After struggling to understand OAuth through posts on Stack Overflow, he found Auth0.
Auth0 handles all of the deep security knowledge for you. As a developer, you just have to focus on building your applications.
After deciding to give Auth0 a try, he was able to build a POC in a couple of days. He said the docs were really good and made it easy to get started.
All in all, here's what he had to say.
"Oh yeah I blew past auth and skipped over essentially having to do any deep development auth related for the front end, which allowed me to implement other features to show off to investors more quickly."
On the technical side, here's one piece of feedback he had. The Auth0 library he was using (again a couple of years ago) only allowed him to work with callbacks and not promises. Promises are typically preferred by JavaScript developers and allow them to take advantage of nifty features like Async/Await.
That was a couple of years ago. Turns out, the newest version of the Auth0 SDK for Single Page Applications does supports promises, so no harm there.
In regards to Auth0 library changes, etc. he also said.
"And all the communication from Auth0 has been great when deprecating a piece of the library, some function call, etc."
One interesting note I found was that he had used jwt.io (like millions of others have) to inspect JSON Web Tokens, but he didn't realize that site is built by Auth0 and owned by my team for that matter. I thought that was cool for Auth0 to have the defacto tool for inspecting JSON Web Tokens even if people didn't realize it.
What I Learned
It's always great to make a connection in the community. This is something I'm going to do more. I've got an open invitation to anyone that would like to share their experience with authentication, identity, Auth0, competitors, etc. If you're interested in sharing, please reach out on twitter.

Authentication Experience From a Developer - Frank Calise

Learn how to query multiple different data sets in Gatsby with the Gatsby Source Filesystem plugin.

<div><p>Gatsby is one of the more popular frameworks for building blogs these days. By using the <a href="https://www.gatsbyjs.org/packages/gatsby-source-filesystem/"><code>gatsby-source-filesystem</code></a> plugin you can read in markdown files and generate corresponding blog post pages.</p><blockquote>How do you query different datasets in Gatsby?</blockquote><p>One question I've had though is how to work with multiple datasets. For example, I have a page for my blog and a page to display the recent conference talks I've given. The content for these pages is stored in Markdown files. My issue was that I didn't know how to query specifically for blog content and talks content? Here's what I came up with.</p><h2>Project Setup</h2><p>In my project, I've got a <code>data</code> folder. Inside of the <code>data</code> folder is a <code>talks</code> folder and a <code>posts</code> folder. In each of those folders are the actual markdown files. For example.</p><ul><li>data<ul><li>posts<ul><li>post1.md</li><li>post2.md</li></ul></li></ul></li><li>talks<ul><li>talk1.md</li><li>talk2.md</li></ul></li></ul><p>In my <code>gatsby-config.js</code> I have this configuration for the <code>gatsby-source-filesystem</code> plugin.</p><pre><code lang="json">{ 
  "resolve": `gatsby-source-filesystem`, 
  "options": { "name": "data", "path": `./src/data/` } 
}</code></pre><h2>The Query</h2><p>I found two options to solve the problem.</p><blockquote>Use <code>sourceInstanceName</code> to query data sets by name</blockquote><p>First, you can specify your data set by using a filter on <code>sourceInstanceName</code>. The value that you filter on should be equal to the name property in the configuration above 👆️, in this case <code>data</code>.</p><pre><code lang="text">{ allFile(filter: { sourceInstanceName: { eq: "data" } }) { edges { node { absolutePath } } } }</code></pre><p>The downside to this is that you would need to create multiple configuration objects in your <code>gatsby-node.js</code> file for it to work.</p><pre><code lang="json">(
  { 
    "resolve": `gatsby-source-filesystem`, 
    "options": { "name": "posts", "path": `./src/data/posts/` }
  }, 
  { 
    "resolve": `gatsby-source-filesystem`, 
    "options": { "name": "talks", "path": `./src/data/talks/` 
  } 
})</code></pre><p>Works fine, but it is hard to scale. You probably don't want many different config objects. Alternatively, you can use a regex expression to filter based on the folder path. In other words, you can query for all files in the <code>talks</code> folder and/or the <code>posts</code> folder separately.</p><p>So, keep the plugin configuration the same as we had it originally, and then update your query like so.</p><pre><code lang="json">{ allFile(filter: { absolutePath: { regex: "//posts//" } }) 
  { edges 
    { node 
      { absolutePath } 
    } 
  } 
}</code></pre><h2>Recap</h2><p>There you go. Now, you shouldn't have any issue querying different data sets within Gatsby!</p></div>

Gatsby is one of the more popular frameworks for building blogs these days. By using the gatsby-source-filesystem plugin you can read in markdown files and generate corresponding blog post pages.
How do you query different datasets in Gatsby?
One question I've had though is how to work with multiple datasets. For example, I have a page for my blog and a page to display the recent conference talks I've given. The content for these pages is stored in Markdown files. My issue was that I didn't know how to query specifically for blog content and talks content? Here's what I came up with.
Project Setup
In my project, I've got a data folder. Inside of the data folder is a talks folder and a posts folder. In each of those folders are the actual markdown files. For example.

data
posts
post1.md
post2.md


talks
talk1.md
talk2.md


In my gatsby-config.js I have this configuration for the gatsby-source-filesystem plugin.
{ 
  "resolve": `gatsby-source-filesystem`, 
  "options": { "name": "data", "path": `./src/data/` } 
}
The Query
I found two options to solve the problem.
Use sourceInstanceName to query data sets by name
First, you can specify your data set by using a filter on sourceInstanceName. The value that you filter on should be equal to the name property in the configuration above 👆️, in this case data.
{ allFile(filter: { sourceInstanceName: { eq: "data" } }) { edges { node { absolutePath } } } }
The downside to this is that you would need to create multiple configuration objects in your gatsby-node.js file for it to work.
(
  { 
    "resolve": `gatsby-source-filesystem`, 
    "options": { "name": "posts", "path": `./src/data/posts/` }
  }, 
  { 
    "resolve": `gatsby-source-filesystem`, 
    "options": { "name": "talks", "path": `./src/data/talks/` 
  } 
})
Works fine, but it is hard to scale. You probably don't want many different config objects. Alternatively, you can use a regex expression to filter based on the folder path. In other words, you can query for all files in the talks folder and/or the posts folder separately.
So, keep the plugin configuration the same as we had it originally, and then update your query like so.
{ allFile(filter: { absolutePath: { regex: "//posts//" } }) 
  { edges 
    { node 
      { absolutePath } 
    } 
  } 
}
Recap
There you go. Now, you shouldn't have any issue querying different data sets within Gatsby!

Querying Multiple Datasets with Gatsby Source Filesystem

On my second day at Auth0, I got a very impactful message from upper management.

<div><p>On my second day at Auth0, I got a very impactful message from upper management.</p><p>As many of you know, my first day at <a href="https://auth0.com/">Auth0</a> was Monday, January 6th, and like the 29 other new employees, I traveled to Seattle for a week of training. That morning, in all of my excitement, I recorded and shared a video (<a href="https://twitter.com/jamesqquick/status/1214351079535570946?s=20">here's the tweet</a>) explaining how thrilled I was to be starting. The next day, I got this.</p><p></p><p>Don't know who Matias is? Well, he's the CTO of the company. So here was my initial reaction.</p><p><strong>...SHIT I messed up already! lol</strong></p><p>But the more I read it, I realized it wasn’t negative; it was constructive, even complimentary. His comments were very telling. Here’s what I mean.</p><blockquote>P.S. I'll share the specifics from his post in a new article soon!</blockquote><h2>He Gives a Shit</h2><p>First off, before you judge me for being too vulgar, I should clarify that one of the <a href="https://auth0.com/careers/culture">core philosophies</a> at Auth0 is "We Give a Shit!". I feel like that says a lot (in a good way) about the company.</p><p>But here's what I've learned in previous companies. Very rarely do you hear about a core philosophy and get to truly experience it on day 2. This is literally <strong>the CTO of the company</strong>. Not only did he see my post, but he cared enough to respond. As part of the response, he also took the time to write a blog post to help me and others in the company.</p><p>For me, it shows that he cares, that he's aware, and he wants to help.</p><h2>This is the Culture I was Looking For</h2><p>Culturally, Auth0 is exactly what I was looking for when searching for jobs. I worked previously for FedEx and Microsoft, which are incredibly large organizations. In both places, I struggled a bit with the size. At Microsoft, I felt like it was hard to make connections with other teams. At FedEx, my network was stronger, but I felt like it was hard to get clearly defined work (too many cooks in the kitchen situation).</p><p>Auth0, so far, seems like the polar opposite. Because we are relatively small (for me at least), it's much easier to build relationships. I've already met the 30 in my cohort, other coworkers in the office, and several people online in Slack. Not to mention, I've already been noticed by my CTO :).</p><blockquote>My first week showed me that my expectations were spot on. I joined a younger (but established) company with a modern culture and loads of passion.</blockquote><h2>Transparency</h2><p>Transparency is something that people talk about, but rarely live up to. Personally, it's something I work on constantly by focusing on three things:</p><ul><li>feeling comfortable receiving constructive feedback and eagerly seeking it</li><li>feeling comfortable giving constructive feedback</li><li>always setting appropriate expectations up front (no sugar coating)</li></ul><p>It may not seem obvious, but to me, the comment that Matias made shows me that transparency is real at Auth0. He was clear... It was cool that I created the video, but I can (and should) do a better job at articulating what the company does in the future.</p><blockquote>I'm always looking for feedback so that I can grow as a person and as an employee</blockquote><p>He gave me a learning opportunity that could also be leveraged across the company.</p><h2>Wrap up</h2><p>Every interaction so far has lived up my high hopes, and I’m incredibly excited to be a part of Auth0. Maybe one day I can give a new employee the same positive experience that Matias gave me.</p></div>

On my second day at Auth0, I got a very impactful message from upper management.
As many of you know, my first day at Auth0 was Monday, January 6th, and like the 29 other new employees, I traveled to Seattle for a week of training. That morning, in all of my excitement, I recorded and shared a video (here's the tweet) explaining how thrilled I was to be starting. The next day, I got this.

Don't know who Matias is? Well, he's the CTO of the company. So here was my initial reaction.
...SHIT I messed up already! lol
But the more I read it, I realized it wasn’t negative; it was constructive, even complimentary. His comments were very telling. Here’s what I mean.
P.S. I'll share the specifics from his post in a new article soon!
He Gives a Shit
First off, before you judge me for being too vulgar, I should clarify that one of the core philosophies at Auth0 is "We Give a Shit!". I feel like that says a lot (in a good way) about the company.
But here's what I've learned in previous companies. Very rarely do you hear about a core philosophy and get to truly experience it on day 2. This is literally the CTO of the company. Not only did he see my post, but he cared enough to respond. As part of the response, he also took the time to write a blog post to help me and others in the company.
For me, it shows that he cares, that he's aware, and he wants to help.
This is the Culture I was Looking For
Culturally, Auth0 is exactly what I was looking for when searching for jobs. I worked previously for FedEx and Microsoft, which are incredibly large organizations. In both places, I struggled a bit with the size. At Microsoft, I felt like it was hard to make connections with other teams. At FedEx, my network was stronger, but I felt like it was hard to get clearly defined work (too many cooks in the kitchen situation).
Auth0, so far, seems like the polar opposite. Because we are relatively small (for me at least), it's much easier to build relationships. I've already met the 30 in my cohort, other coworkers in the office, and several people online in Slack. Not to mention, I've already been noticed by my CTO :).
My first week showed me that my expectations were spot on. I joined a younger (but established) company with a modern culture and loads of passion.
Transparency
Transparency is something that people talk about, but rarely live up to. Personally, it's something I work on constantly by focusing on three things:

feeling comfortable receiving constructive feedback and eagerly seeking it
feeling comfortable giving constructive feedback
always setting appropriate expectations up front (no sugar coating)

It may not seem obvious, but to me, the comment that Matias made shows me that transparency is real at Auth0. He was clear... It was cool that I created the video, but I can (and should) do a better job at articulating what the company does in the future.
I'm always looking for feedback so that I can grow as a person and as an employee
He gave me a learning opportunity that could also be leveraged across the company.
Wrap up
Every interaction so far has lived up my high hopes, and I’m incredibly excited to be a part of Auth0. Maybe one day I can give a new employee the same positive experience that Matias gave me.

I Got Corrected on My Second Day, and I Loved It

I had an amazing first week at Auth0. Here's what I learned!

<div><p>I had an amazing first week at Auth0. Here's what I learned!</p><p>I'm writing this on the plane back from my first week at <a href="https://auth0.com/">Auth0</a>! I'm still riding the high of onboarding and figured I should take the time to document my thoughts. After my first week, here are my big takeaways.</p><h2>I've Got So Much To Learn</h2><p>New company, new me, right?! Well, with that comes a lot to learn as always. There's the technical side (I'll talk about that next), but there's also the culture, the people, the structure, the tools, etc.</p><p>For the first time in over three years, I'm one of the new people. On the plus side, I joined with 29 other <em>Auziros</em>, so I've got amazing people that are going through the same thing. It's definitely a transition, but I'm ready for it. I'm ready to learn, ready to contribute, and ready for something new.</p><h2>The Product Is Complicated</h2><p>As part of my interview process, I had to record a presentation on using Auth0 with a React application (keep an eye out, video coming soon). I learned a ton during that process, but I didn't go much deeper than what I needed to know to make a good presentation.</p><p>That said, as a new employee, I took a three day technical training and learned just how complicated the product is. There are many authentication/authorization workflows, and they differ based on the application type, etc. I had no idea how many details there were. Needless to say, I have a much greater appreciation for the product now.</p><h2>The Product Is Also Amazing</h2><p>After talking about how complicated the Auth0 product is, I also want to share that I genuinely enjoy it. First and foremost, Auth0 is targeted at developers like me, so it's designed to give developers the most positive experience possible.</p><ul><li>great documentation</li><li>great SDKs</li><li>great tutorials</li></ul><p>It's a breeze to get started with, and I can't wait to do some wicked integrations for demos in the future!</p><h2>Auth0 Attracts Tremendous Talent</h2><p>There's the old cliche, <em>"If you're the smartest person in the room, you're in the wrong room"</em>. I agree, and I'm always looking for opportunities to learn from those around me.</p><p>I don't want to sound egotistical (maybe it's unavoidable), but I've spent time feeling like <em>"the smartest person in the room"</em>. After my first week at Auth0, I can tell that isn't the case, and I love it!</p><blockquote>I've got lots to learn and an amazing group of people to learn from.</blockquote><p>The people I've met have been incredible. Everyone is extremely smart and cultured, but most importantly just "good people" as we would say in the South. I've got lots to learn and an amazing group of people to learn from.</p><h2>I'm Soooooo Excited</h2><p>Auth0 is a company that is moving in the right direction. They are growing tremendously, the people are incredibly talented, and they have a great culture.</p><p>Mic drop...lol</p><p>But seriously, I have liked everything so far: the people, the product, the culture. I'm thrilled to be a part of the team, and think 2020 will be an amazing year working with Auth0.</p></div>

I had an amazing first week at Auth0. Here's what I learned!
I'm writing this on the plane back from my first week at Auth0! I'm still riding the high of onboarding and figured I should take the time to document my thoughts. After my first week, here are my big takeaways.
I've Got So Much To Learn
New company, new me, right?! Well, with that comes a lot to learn as always. There's the technical side (I'll talk about that next), but there's also the culture, the people, the structure, the tools, etc.
For the first time in over three years, I'm one of the new people. On the plus side, I joined with 29 other Auziros, so I've got amazing people that are going through the same thing. It's definitely a transition, but I'm ready for it. I'm ready to learn, ready to contribute, and ready for something new.
The Product Is Complicated
As part of my interview process, I had to record a presentation on using Auth0 with a React application (keep an eye out, video coming soon). I learned a ton during that process, but I didn't go much deeper than what I needed to know to make a good presentation.
That said, as a new employee, I took a three day technical training and learned just how complicated the product is. There are many authentication/authorization workflows, and they differ based on the application type, etc. I had no idea how many details there were. Needless to say, I have a much greater appreciation for the product now.
The Product Is Also Amazing
After talking about how complicated the Auth0 product is, I also want to share that I genuinely enjoy it. First and foremost, Auth0 is targeted at developers like me, so it's designed to give developers the most positive experience possible.

great documentation
great SDKs
great tutorials

It's a breeze to get started with, and I can't wait to do some wicked integrations for demos in the future!
Auth0 Attracts Tremendous Talent
There's the old cliche, "If you're the smartest person in the room, you're in the wrong room". I agree, and I'm always looking for opportunities to learn from those around me.
I don't want to sound egotistical (maybe it's unavoidable), but I've spent time feeling like "the smartest person in the room". After my first week at Auth0, I can tell that isn't the case, and I love it!
I've got lots to learn and an amazing group of people to learn from.
The people I've met have been incredible. Everyone is extremely smart and cultured, but most importantly just "good people" as we would say in the South. I've got lots to learn and an amazing group of people to learn from.
I'm Soooooo Excited
Auth0 is a company that is moving in the right direction. They are growing tremendously, the people are incredibly talented, and they have a great culture.
Mic drop...lol
But seriously, I have liked everything so far: the people, the product, the culture. I'm thrilled to be a part of the team, and think 2020 will be an amazing year working with Auth0.

My First Week at Auth0

Let's learn how to create a server with Node and Express

<div><p>You can use JavaScript to do many things like build a website, mobile app, and even a backend server with <a href="https://nodejs.org/en/">Nodejs</a>. In fact, I would argue that using Node is one of the easiest ways to get up and going with a web server. In this article, we will look at creating a web server with Node and a popular package called <a href="https://www.npmjs.com/package/express">Express.</a></p><p>We will also talk about</p><ul><li>RESTful Routing</li><li>HTTP Methods</li><li>Query Parameters and Body</li></ul><h2>Project Setup</h2><h3>Install Node</h3><p>To get started, the first thing you'll need to do is <a href="https://nodejs.org/en/">install Node</a>. The install link is on the home page on the site. It should be a pretty straight forward installer once you get it downloaded. As of this article, the current stable version is 12.13.0.</p><h3>Create a JavaScript Server File</h3><p>The next step is to create the file that we will write our code in to run our server. To do this, create a folder somewhere on your computer. Then, open that folder in your favorite text editor. Hint, if you're not using <a href="https://code.visualstudio.com/">Visual Studio Code</a> for Web Development, YOU ARE MISSING OUT! There's almost no debate, you should be using it :)</p><blockquote>If you'd like to learn how to take full advantage of VS Code as your editor, check out <a href="https://www.udemy.com/course/learn-visual-studio-code/?referralCode=511395B70AFBCD491AFD">Learn Visual Studio Code.</a> It's the most popular Visual Studio Code course on Udemy!</blockquote><p>After you open the folder open in VS Code, create a file called <em>app.js.</em> Inside of that file, add the following log statement.</p><pre><code lang="javascript">console.log("Hello world from Node and Express");</code></pre><p>Now, run the file by using the following command in your terminal.</p><pre><code lang="sh">node app.js</code></pre><h3>Initialize as NPM Project</h3><p>By installing Node earlier, you also got NPM, the Node Package Manager. We will use NPM to install JavaScript packages in a second. We need to use NPM to initialize our project so that we can install packages.</p><p>To initialize our project as a JavaScript or NPM project, run the following command. You can accept all of the defaults for now.</p><pre><code lang="sh">npm init</code></pre><h3>Using Nodemon</h3><p>Here's one little trick we can incorporate as we get started. Install nodemon as a global package like so.</p><pre><code lang="sh">npm install -g nodemon</code></pre><p>With this package, we can start our server and have it auto-reload every time we make changes and save our files. Trust me, this is super helpful when doing development. To run your file replace <em>node</em> with <em>nodemon</em>.</p><pre><code lang="sh">nodemon app.js</code></pre><h2>Using Express NPM Package</h2><p>Now that we configured the project, we need to install the Express package from NPM. To do so, run the following command in your terminal.</p><pre><code lang="sh">npm install express</code></pre><p>With the package installed, we can now create a basic server by adding the following code.</p><pre><code lang="javascript">const express = require("express");
const app = express();
app.listen(3000, () =&gt; {
  console.log(`Listening on port 3000`);
});</code></pre><p>Let's break it down. We import express and use it to generate the app object. We then call <em>app.listen()</em> which starts the server on the port that we pass (3000 in this case). We also pass in a callback function so that we can log when the server starts.</p><p>After you save your file and the server reloads, check that you see the log output in your console.</p><h3>Optimizing Your Server Port</h3><p>Typically, when you host your application, you can't hardcode your port number to 3000 as above. The port number should be passed in as an environment variable from the server. However, you won't have that luxury during development. To fix this, you can use the environment variable if possible, and otherwise, use the hardcoded one. Change your code to this.</p><pre><code lang="javascript">const express = require("express");
const app = express();
const port = process.env.port || 3000;
app.listen(port, () =&gt; {
  console.log(`Listening on port 3000`);
});</code></pre><p>This "or" trick in JavaScript will use the first variable if available, and the second one (hard coded port number) if not.</p><h2>CRUD, HTTP Methods, RESTFul Routing</h2><p>For some extra background we need to talk about a few different concepts.</p><h3>CRUD</h3><p>CRUD is an acronym for Create, Read, Update, and Delete. If you think about it, most applications are considered "CRUD Applications" to a certain extent. Let's take Facebook for example. You can create posts, you can view/read posts, you can update a post, and you can delete a post.</p><blockquote>If you can build a CRUD application, you can build almost anything</blockquote><p>CRUD functionality is the core of all applications!</p><h3>HTTP Methods</h3><p>We are about to start working with endpoints in Express. Each endpoint will need a route and an HTTP method. For the most part, the HTTP methods line up with the different components of CRUD.</p><p>Create -&gt; <strong>POST</strong></p><p>Read -&gt; <strong>GET</strong></p><p>Update -&gt; <strong>PUT</strong></p><p>Delete -&gt; <strong>DELETE</strong></p><p>We will talk about these more in a minute.</p><h3>RESTFul Routing</h3><p>RESTFul routing is more or less a standard for how to create consistent API Route endpoints. They correspond to CRUD components and use HTTP methods in their definition.</p><p>Routes typically revolve around objects. For example, in the Facebook example, the object would be a post. In today's demo, we will be talking about books. Here's how RESTFul Routing standards would recommend us creating book endpoints.</p><p>GET /books - retrieve list of books</p><p>GET /books/:id - retrieve one book with a specific id</p><p>POST /books - create a book</p><p>UPDATE /books/:id - update a book with a specific id</p><p>DELETE /books/:id - delete a specific id</p><h2>Creating CRUD Endpoints with Express</h2><p>Before we create our endpoints, let's setup some dummy data to use in our application. We are going to add an array of book objects that each contain a title and an author. Let's use Harry Potter books since they're LITERALLY THE BEST BOOKS IN THE WORLD!</p><blockquote>Keep in mind, this data will reset each time the server restarts!</blockquote><pre><code lang="javascript">const books = [
  {
    title: "Harry Potter and the Order of the Phoenix",
    author: "J.K. Rowling",
  },
  { title: "Harry Potter and the Deathly Hallows", author: "J.K. Rowling" },
];</code></pre><blockquote>In a real application, we would store this data in a database, but for now, it works for our demo</blockquote><h3>GET /books</h3><p>Now that we've got our dummy data in place, we can create our first route. Remember, there are two required pieces of information when creating a route, HTTP method and path/route URL.</p><p>Here's the first route to retrieve the list of books.</p><pre><code lang="javascript">app.get("/books", (req, res) =&gt; {
  res.send(books);
});</code></pre><p>We use our <em>app</em> variable and call the <em>get()</em> method, which translates to the GET HTTP method. The first parameter is the path, and the second parameter is a callback function. This callback function will gets called when someone sends a request to that endpoint.</p><p>Notice that the callback function takes two parameters. These two represent the incoming request object and the outgoing response object. We will us the request in the next route, but in this one we use the response object to send back data. In this case, we are sending back all of the items in the array.</p><p>To test this, you can type the following url into your browser and you should see your book data displayed.</p><pre><code lang="sh">localhost:3000/books</code></pre><h3>GET /books/:id</h3><p>Now, let's create the route to retrieve one specific book based on an id. For this demo, the unique id will be the array index of the book. For example, the first book will have an index of 0, so it's id will be 0 as well.</p><p>There is one notable difference in this route from the one above. We are defining the path for this route to include the id as a <em>query parameter</em>. Here's the code.</p><pre><code lang="javascript">app.get("/books/:id", (req, res) =&gt; {
  const id = req.params.id;
  res.send(books[id]);
});
</code></pre><p>Notice that we can access the id as a variable on the request object. This is because we defined it in the path with a colon. That signifies that the id can vary which gives the user the ability to request different books.</p><p>To test this, type the following into your browser and you should see the first book in your array (at index 0) returned.</p><pre><code lang="sh">localhost:3000/books/0</code></pre><h3>Using Postman To Test HTTP Requests</h3><p>So far, we've only created endpoints using GET, and we can test them in the browser. Unfortunately, the browser can only make GET requests, so we need to use a tool called Postman to test the rest of them. You can download <a href="https://www.getpostman.com/">here</a>.</p><blockquote>Without writing code, you can only make GET requests in the browser. You can use JavaScript to perform other types of requests</blockquote><p>Inside of Postman, you'll see an area to choose the HTTP method, type in the url, and enter data to be posted to the server.</p><h3>POST /books</h3><p>With Postman installed, we can now create the endpoint to create book objects. It will have a method of POST and will need to receive book data in the body of the request. Here's what the route looks like.</p><p><code></code></p><pre><code lang="javascript">app.post("/books", (req, res) =&gt; {
  const book = req.body;
  books.push(book);
  res.send(book);
});</code></pre><p>The only thing that should be new here is how we retrieve the incoming data from the request in the body. You get access to the request body by calling <em>req.body. </em></p><p>After getting the body, we then add that book object to the array. Looks good right...?</p><p>Well, if you send this request in postman (refer to the Postman screenshot above), notice that nothing gets returned. We should see that same book object returned, but we don't.</p><p>If you were to make another GET request to <em>/books</em> you'll notice that the list of books does not include the one you thought you added. The problem is that you have to make one small change in Express to receive the request body. You can add the following lines right before your dummy data is declared to fix this.</p><pre><code lang="javascript">app.use(express.json()); 
app.use(express.urlencoded()); _; //Parse URL-encoded bodies_</code></pre><p>If you now send another POST request, then send a GET requests to <em>/books,</em> you should see the newest book was added.</p><h3>UPDATE /books/:id</h3><p>The good thing is, for our update route, we won't see any new code that we haven't used before. We will need to retrieve the book id as we did with the second GET route above. We will also need to retrieve the request body like we did in the POST route.</p><p>After getting the id and the updated book information, we replace the book object at that index in the array with the new book object.</p><pre><code lang="javascript">app.put("/books/:id", (req, res) =&gt; {
  const id = req.params.id;
  const updateBook = req.body;
  books[id] = updateBook;
  res.send(updateBook);
});</code></pre><h3>DELETE /books/:id</h3><p>Again, no new concepts with our DELETE route. We retrieve the incoming book id from the request. Then, we use that id to remove that specific book from the array. We can use the <em>splice()</em> array function to quickly remove an item at a specific index.</p><pre><code lang="javascript">app.delete("/books/:id", (req, res) =&gt; {
  const id = req.params.id;
  books.splice(id, 1);
  res.send(id);
});</code></pre><h3>Final Code</h3><pre><code lang="javascript">const express = require("express");
const app = express();
const path = require("path"); 
//CRUD - Create, Read, Update, and Delete
//HTTP Methods - Post, Get, Put, Delete
const books = [
  {
    title: "Harry Potter and the Order of the Phoenix",
    author: "J.K. Rowling",
  },
  { title: "Harry Potter and the Deathly Hallows", author: "J.K. Rowling" },
];
app.use(express.static("public"));
app.use("/static", express.static(path.join(__dirname, "public")));
app.use(express.json());
app.use(express.urlencoded());
//Parse URL-encoded bodies
app.get("", (req, res) =&gt; {
  console.log("Hello world");
  res.sendFile("index.html");
});
app.get("/books", (req, res) =&gt; {
  res.send(books);
});
app.get("/books/:id", (req, res) =&gt; {
  const id = req.params.id;
  res.send(books[id]);
});
app.post("/books", (req, res) =&gt; {
  console.log(req.body);
  const book = req.body;
  books.push(book);
  res.send(book);
});
app.put("/books/:id", (req, res) =&gt; {
  const id = req.params.id;
  const updateBook = req.body;
  books[id] = updateBook;
  res.send(updateBook);
});
app.delete("/books/:id", (req, res) =&gt; {
  const id = req.params.id;
  books.splice(id, 1);
  res.send(id);
});
const port = process.env.port || 3000;
app.listen(port, () =&gt; {
  console.log(`Listening on port ${port}`);
});</code></pre><h2>Wrap Up</h2><p>Using Node on the server is continuing to grow in popularity and opens up lots of opportunities. It's a great skill to have on your resume and can certainly open up some opportunities for you.</p><p>The Express package that we covered today is by far the most popular way to set up routes in your Node application. Hopefully, after this article, you'll be able to create a quick web server with RESTful routes in no time!</p></div>

You can use JavaScript to do many things like build a website, mobile app, and even a backend server with Nodejs. In fact, I would argue that using Node is one of the easiest ways to get up and going with a web server. In this article, we will look at creating a web server with Node and a popular package called Express.
We will also talk about

RESTful Routing
HTTP Methods
Query Parameters and Body

Project Setup
Install Node
To get started, the first thing you'll need to do is install Node. The install link is on the home page on the site. It should be a pretty straight forward installer once you get it downloaded. As of this article, the current stable version is 12.13.0.
Create a JavaScript Server File
The next step is to create the file that we will write our code in to run our server. To do this, create a folder somewhere on your computer. Then, open that folder in your favorite text editor. Hint, if you're not using Visual Studio Code for Web Development, YOU ARE MISSING OUT! There's almost no debate, you should be using it :)
If you'd like to learn how to take full advantage of VS Code as your editor, check out Learn Visual Studio Code. It's the most popular Visual Studio Code course on Udemy!
After you open the folder open in VS Code, create a file called app.js. Inside of that file, add the following log statement.
console.log("Hello world from Node and Express");
Now, run the file by using the following command in your terminal.
node app.js
Initialize as NPM Project
By installing Node earlier, you also got NPM, the Node Package Manager. We will use NPM to install JavaScript packages in a second. We need to use NPM to initialize our project so that we can install packages.
To initialize our project as a JavaScript or NPM project, run the following command. You can accept all of the defaults for now.
npm init
Using Nodemon
Here's one little trick we can incorporate as we get started. Install nodemon as a global package like so.
npm install -g nodemon
With this package, we can start our server and have it auto-reload every time we make changes and save our files. Trust me, this is super helpful when doing development. To run your file replace node with nodemon.
nodemon app.js
Using Express NPM Package
Now that we configured the project, we need to install the Express package from NPM. To do so, run the following command in your terminal.
npm install express
With the package installed, we can now create a basic server by adding the following code.
const express = require("express");
const app = express();
app.listen(3000, () => {
  console.log(`Listening on port 3000`);
});
Let's break it down. We import express and use it to generate the app object. We then call app.listen() which starts the server on the port that we pass (3000 in this case). We also pass in a callback function so that we can log when the server starts.
After you save your file and the server reloads, check that you see the log output in your console.
Optimizing Your Server Port
Typically, when you host your application, you can't hardcode your port number to 3000 as above. The port number should be passed in as an environment variable from the server. However, you won't have that luxury during development. To fix this, you can use the environment variable if possible, and otherwise, use the hardcoded one. Change your code to this.
const express = require("express");
const app = express();
const port = process.env.port || 3000;
app.listen(port, () => {
  console.log(`Listening on port 3000`);
});
This "or" trick in JavaScript will use the first variable if available, and the second one (hard coded port number) if not.
CRUD, HTTP Methods, RESTFul Routing
For some extra background we need to talk about a few different concepts.
CRUD
CRUD is an acronym for Create, Read, Update, and Delete. If you think about it, most applications are considered "CRUD Applications" to a certain extent. Let's take Facebook for example. You can create posts, you can view/read posts, you can update a post, and you can delete a post.
If you can build a CRUD application, you can build almost anything
CRUD functionality is the core of all applications!
HTTP Methods
We are about to start working with endpoints in Express. Each endpoint will need a route and an HTTP method. For the most part, the HTTP methods line up with the different components of CRUD.
Create -> POST
Read -> GET
Update -> PUT
Delete -> DELETE
We will talk about these more in a minute.
RESTFul Routing
RESTFul routing is more or less a standard for how to create consistent API Route endpoints. They correspond to CRUD components and use HTTP methods in their definition.
Routes typically revolve around objects. For example, in the Facebook example, the object would be a post. In today's demo, we will be talking about books. Here's how RESTFul Routing standards would recommend us creating book endpoints.
GET /books - retrieve list of books
GET /books/:id - retrieve one book with a specific id
POST /books - create a book
UPDATE /books/:id - update a book with a specific id
DELETE /books/:id - delete a specific id
Creating CRUD Endpoints with Express
Before we create our endpoints, let's setup some dummy data to use in our application. We are going to add an array of book objects that each contain a title and an author. Let's use Harry Potter books since they're LITERALLY THE BEST BOOKS IN THE WORLD!
Keep in mind, this data will reset each time the server restarts!
const books = [
  {
    title: "Harry Potter and the Order of the Phoenix",
    author: "J.K. Rowling",
  },
  { title: "Harry Potter and the Deathly Hallows", author: "J.K. Rowling" },
];
In a real application, we would store this data in a database, but for now, it works for our demo
GET /books
Now that we've got our dummy data in place, we can create our first route. Remember, there are two required pieces of information when creating a route, HTTP method and path/route URL.
Here's the first route to retrieve the list of books.
app.get("/books", (req, res) => {
  res.send(books);
});
We use our app variable and call the get() method, which translates to the GET HTTP method. The first parameter is the path, and the second parameter is a callback function. This callback function will gets called when someone sends a request to that endpoint.
Notice that the callback function takes two parameters. These two represent the incoming request object and the outgoing response object. We will us the request in the next route, but in this one we use the response object to send back data. In this case, we are sending back all of the items in the array.
To test this, you can type the following url into your browser and you should see your book data displayed.
localhost:3000/books
GET /books/:id
Now, let's create the route to retrieve one specific book based on an id. For this demo, the unique id will be the array index of the book. For example, the first book will have an index of 0, so it's id will be 0 as well.
There is one notable difference in this route from the one above. We are defining the path for this route to include the id as a query parameter. Here's the code.
app.get("/books/:id", (req, res) => {
  const id = req.params.id;
  res.send(books[id]);
});

Notice that we can access the id as a variable on the request object. This is because we defined it in the path with a colon. That signifies that the id can vary which gives the user the ability to request different books.
To test this, type the following into your browser and you should see the first book in your array (at index 0) returned.
localhost:3000/books/0
Using Postman To Test HTTP Requests
So far, we've only created endpoints using GET, and we can test them in the browser. Unfortunately, the browser can only make GET requests, so we need to use a tool called Postman to test the rest of them. You can download here.
Without writing code, you can only make GET requests in the browser. You can use JavaScript to perform other types of requests
Inside of Postman, you'll see an area to choose the HTTP method, type in the url, and enter data to be posted to the server.
POST /books
With Postman installed, we can now create the endpoint to create book objects. It will have a method of POST and will need to receive book data in the body of the request. Here's what the route looks like.

app.post("/books", (req, res) => {
  const book = req.body;
  books.push(book);
  res.send(book);
});
The only thing that should be new here is how we retrieve the incoming data from the request in the body. You get access to the request body by calling req.body. 
After getting the body, we then add that book object to the array. Looks good right...?
Well, if you send this request in postman (refer to the Postman screenshot above), notice that nothing gets returned. We should see that same book object returned, but we don't.
If you were to make another GET request to /books you'll notice that the list of books does not include the one you thought you added. The problem is that you have to make one small change in Express to receive the request body. You can add the following lines right before your dummy data is declared to fix this.
app.use(express.json()); 
app.use(express.urlencoded()); _; //Parse URL-encoded bodies_
If you now send another POST request, then send a GET requests to /books, you should see the newest book was added.
UPDATE /books/:id
The good thing is, for our update route, we won't see any new code that we haven't used before. We will need to retrieve the book id as we did with the second GET route above. We will also need to retrieve the request body like we did in the POST route.
After getting the id and the updated book information, we replace the book object at that index in the array with the new book object.
app.put("/books/:id", (req, res) => {
  const id = req.params.id;
  const updateBook = req.body;
  books[id] = updateBook;
  res.send(updateBook);
});
DELETE /books/:id
Again, no new concepts with our DELETE route. We retrieve the incoming book id from the request. Then, we use that id to remove that specific book from the array. We can use the splice() array function to quickly remove an item at a specific index.
app.delete("/books/:id", (req, res) => {
  const id = req.params.id;
  books.splice(id, 1);
  res.send(id);
});
Final Code
const express = require("express");
const app = express();
const path = require("path"); 
//CRUD - Create, Read, Update, and Delete
//HTTP Methods - Post, Get, Put, Delete
const books = [
  {
    title: "Harry Potter and the Order of the Phoenix",
    author: "J.K. Rowling",
  },
  { title: "Harry Potter and the Deathly Hallows", author: "J.K. Rowling" },
];
app.use(express.static("public"));
app.use("/static", express.static(path.join(__dirname, "public")));
app.use(express.json());
app.use(express.urlencoded());
//Parse URL-encoded bodies
app.get("", (req, res) => {
  console.log("Hello world");
  res.sendFile("index.html");
});
app.get("/books", (req, res) => {
  res.send(books);
});
app.get("/books/:id", (req, res) => {
  const id = req.params.id;
  res.send(books[id]);
});
app.post("/books", (req, res) => {
  console.log(req.body);
  const book = req.body;
  books.push(book);
  res.send(book);
});
app.put("/books/:id", (req, res) => {
  const id = req.params.id;
  const updateBook = req.body;
  books[id] = updateBook;
  res.send(updateBook);
});
app.delete("/books/:id", (req, res) => {
  const id = req.params.id;
  books.splice(id, 1);
  res.send(id);
});
const port = process.env.port || 3000;
app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});
Wrap Up
Using Node on the server is continuing to grow in popularity and opens up lots of opportunities. It's a great skill to have on your resume and can certainly open up some opportunities for you.
The Express package that we covered today is by far the most popular way to set up routes in your Node application. Hopefully, after this article, you'll be able to create a quick web server with RESTful routes in no time!