In the past, we've had cloud certification challenges, gamedev challenges, and back end development challenges.

This year, we're going back to basics, with the popular #100DaysOfCode challenge.

This challenge was created in 2015 by freeCodeCamp alumni Alexander Kallaway. (I've written a detailed history of #100DaysOfCode if you're curious.)

“Every day you code is the day you’ve won.” — Alexander Kallaway

Here's how the challenge works. There are just 2 simple rules:

1. You commit to coding for at least 1 hour each day – and then posting about it – for 100 consecutive days.
2. You also commit to encouraging at least 2 people each day by replying to their posts.

This second rule is important, because it ensures that everyone feels supported.

The hardest thing about learning to code is sticking with it. I've said this many times and I'll say it again: learning to code is not a technical challenge – it is a motivational challenge.

If you get enough practice expanding your coding skills, you will eventually become a decent developer. And that's what #100DaysOfCode is all about: getting 100 days worth of practice.

Discord is the new Twitter

Social media has kind of been on the decline for a while. Nowadays, many people prefer group chats, forums, Discord servers, and other smaller communities that are based around shared interests.

You could argue that Twitter always was a bunch of separate communities spread across one giant, general purpose platform. You had tech twitter, learn-to-code twitter, Nigerian Dev Twitter, and so many other cohorts of developers.

I am still optimistic about Twitter, and I'm not leaving the platform. But these days I spend a LOT more time on Discord.

So I wanted to formally expand the #100DaysOfCode rules to also include posting on Discord for everyone who prefers it over Twitter.

freeCodeCamp has a #100DaysOfCode chat room on our community Discord server where we're going to be posting our daily updates. You can join freeCodeCamp's Discord.

How do I commit to the #100DaysOfCode Challenge?

Simple. Just post: "I'm committing to the #100DaysOfCode Challenge starting today" on either Twitter, LinkedIn, or in the freeCodeCamp Discord #100DaysOfCode chatroom.

Then start posting each day after you finish your coding, like this:

"#100DaysOfCode Day 1: I completed the freeCodeCamp JavaScript Role Playing Game project, and watched part of a Phaser.js tutorial."

Or whatever it is you did that day.

Then be sure to interact with at least two other people who posted.

That's it. Rinse and repeat for 99 more days.

What do I learn each day?

If you haven't already, I recommend just going through the freeCodeCamp Core Curriculum from top to bottom. This represents a shortest path from beginner to intermediate, and you'll get tons of practice building projects.

Note that freeCodeCamp also has more than 1,000 free full length courses on our community YouTube Channel. And dozens of free books on freecodecamp.org/news.

This said, I strongly recommend focusing your time on our interactive curriculum, so you can get hands-on experience coding with tests to guide you.

Remember: practice makes perfect. Above all else, the freeCodeCamp curriculum is there to give you thousands of hours of coding practice. And for the #100DaysOfCode challenge, you'll get at least 100 hours.

Learning to code properly will take a lot of time. The way the human brain works, you want to code just a little every day (1 hour is fine) consistently for several years to really become intermediate and then advanced.

It is usually a mistake to try and learn "intensively" by coding all day every day. There are diminishing returns to how much you can learn in a single day.

This is where the true genius of #100DaysOfCode comes in: it helps you get into the rhythm of coding a little each day. And it provides peers who can support you, and keep you motivated to stay consistent.

Here's hoping that you can finish the challenge, take a day or two off, then get right back into the rhythm of coding a little every day.

Well, what are you waiting for? Commit to the #100DaysOfCode challenge. I'll see you on Discord, LinkedIn, and Twitter. Happy coding. 🏕️

AND && and OR || are logical operators in JavaScript which you can use for performing different logical expressions. In this article, I'll explain the difference between them.

The goal of this article is for you to understand how these operators work and how they are different.

To understand these operators, it's important to understand the concept of truthy and falsy values in JavaScript.

Truthy and Falsy values

In JavaScript, many values can be represented by their boolean equivalents. A value that is represented by false is a falsy value and a value that is represented by true is a truthy value. Let's see some examples:

0
false
undefined
null
"" // empty string

The values 0, false, undefined, null, and empty string "" are falsy values because their boolean representations are false.

As for truthy values, any value that is not falsy is truthy. This means truthy values include true, 1, [3. 4], {}, "hello".

Now that we have that out of the way, let's see how these tie into the AND and OR operators.

I have a video version of this topic if you're interested in that.

The AND operator

The logical AND operator is used between two operands in an expression like this:

operand1 && operand2

The operator returns the second operand if the first operand is a truthy value. If the first operand is a falsy value, the operator would return the first operand instead. As we have seen, a truthy value is a value that evaluates to true.

Let's see an example:

const exp1 = 5
const exp2 = "Dillion"

const result = exp1 && exp2

console.log(result)
// "Dillion"

In this example, we have exp1 with a value of 5 and exp2 with a value of "Dillion". Then we have the result variable which holds the returned value from using the && operator between exp1 and exp2.

What happens here is that the operator, from the left, checks if exp1 is a truthy value. 5 is a truthy value, so the operator returns the value on the right. That's why result holds the value of "Dillion".

Let's see another example where we use the AND operator multiple times:

function returnFalsy() {
  return ""
}

const exp1 = [1, 2]
const exp2 = returnFalsy()
const exp3 = { name: "Dillion" }

const result = exp1 && exp2 && exp3

console.log(result)
// ""

As we can see in this example, we have:

• exp1 with an array
• exp1 with the returned value of calling returnFalsy() (which is an empty string--a falsy value)
• exp3 with an object

Lastly, we have the result variable which holds the returned value from using the && operator between exp1 and exp2 and between exp2 and exp3.

What we have here is exp1 && exp2 as operand 1 and operand 2. Then the result of this expression will become operand 1 for the next expression: result && exp3. exp3 here is the second operand in the second expression.

What happens here is that the operator, from the left, checks if exp1 is a truthy value. In this case, we have an array, which is a truthy value, which means the second operand exp2 will be returned. exp2 becomes the first operand, and exp3 becomes the second operand for the second expression.

The second && operator checks if exp2 is a truthy value. In this case, the empty string "" is a falsy value, so the operator returns exp2. It doesn't bother checking exp3 because the fact that exp2 is falsy, means the operator would stop checking from left to right.

What happens here is short-circuiting which you can learn more about in my article on short-circuit operators

The OR operator

The logical OR operator is used between two operands in an expression like this:

operand1 || operand2

The operator returns the first operand if the first operand is a truthy value. If the first operand is a falsy value, the operator would return the second operand instead.

Let's see an example:

const exp1 = 5
const exp2 = "Dillion"

const result = exp1 || exp2

console.log(result)
// 5

In this example, we have exp1 with a value of 5 and exp2 with a value of "Dillion". Then we have the result variable which holds the returned value from using the || operator between exp1 and exp2.

What happens here is that the operator, from the left, checks if exp1 is a truthy value. 5 is a truthy value, so the operator returns it. That's why result holds the value of 5.

The OR operator doesn't bother checking exp2 because it already found a truthy value. This is the opposite of the AND operator. AND keeps going from left to right as long as true. But OR stops (again, short-circuiting once it sees a true--it only keeps going from left to right as long as false

Let's see another example where we use the OR operator multiple times:

function returnFalsy() {
  return ""
}

const exp1 = null
const exp2 = returnFalsy()
const exp3 = { name: "Dillion" }

const result = exp1 || exp2 || exp3

console.log(result)
// { name: "Dillion" }

As we can see in this example, we have:

• exp1 with a value of null (a falsy value)
• exp1 with the returned value of calling returnFalsy() (which is an empty string--a falsy value)
• exp3 with an object

Lastly, we have the result variable which holds the returned value from using the || operator between exp1 and exp2 and between exp2 and exp3.

What we have here is exp1 || exp2 as operand 1 and operand 2. Then the result of this expression will become operand 1 for the next expression: result || exp3. exp3 here is the second operand in the second expression.

What happens here is that the operator, from the left, checks if exp1 is a truthy value. In this case, we have null, which is a falsy value, which means the second operand exp2 will be returned. exp2 becomes the first operand, and exp3 becomes the second operand for the second expression.

The second || operator checks if exp2 is a truthy value. In this case, the empty string "" is a falsy value, so the operator returns exp3. As you notice here, the OR operator keeps going as long as it comes across false values. It only stops once it finds a truthy value or when it comes to the end of the expressions.

Using AND and OR in if statements

if statements allow you to create conditional statements where you determine what would be executed based on a condition.

Let's see an example where we use AND in an if statement:

const isLoggedIn = true
const cart = []

if (isLoggedIn && cart.length) {
  console.log("Cart not empty")
} else {
  console.log("Cart is empty")
}

Can you guess the result of executing this code? The result is:

// Cart is empty

Here's why. The condition for the if statement is isLoggedIn && cart.length. The left operand is isLoggedIn which evaluates to true. Remember that the && operator returns the right operand if the left operand is true. It only returns the left operand if the left operand is false. In this case, the operator would return cart.length, which evaluates to 0 since the cart array is empty.

Which means the if block is executed as if(0).

The if statement would coerce 0 to a boolean value. As we saw earlier, 0 is a falsy value. So the if statement seeing that the condition expression 0 is false, would execute the else block: console.log("Cart is empty"). You can learn more about type coercion in this article.

Let's say OR was used instead:

const isLoggedIn = true
const cart = []

if (isLoggedIn || cart.length) {
  console.log("Cart not empty")
} else {
  console.log("Cart is empty")
}

Can you guess the result of this? Here it is:

// Cart not empty

Here's why. The condition for the if statement here is isLoggedIn || cart.length. The left operand is isLoggedIn which evaluates to true. Remember that the || operator returns the left operand if it is true. It only returns the right operand if the left operand is false. In this case, the operator would return isLoggedIn which evaluates to true.

Which means the if block is executed as if(true).

In this case, coercion doesn't happen as true is already a boolean value. So the if statement seeing that the condition expression true is true, would execute the if block: console.log("Cart not empty").

Wrap Up

Here's a summary of the difference between AND and OR:

• AND returns the right expression if the left expression is true
• AND returns the left expression if the left expression is false
• OR returns the right expression if the left expression is false
• OR returns the left expression if the left expression is true

You notice that the OR is the inverse of AND? While AND keeps going to the right as long as the left is true, LEFT keeps going to the right as long as the left is false

If you enjoyed this article, please share it with others.

Have you ever gotten an error similar to this? This error occurs because the call stack has exceeded its limit. But what does this mean?

First, let's understand what the call stack is.

The Call Stack

The call stack is a data structure in JavaScript that contains the function(s) being executed. This structure is in a last-in-first-out format. Let's see an example:

function printName() {
  console.log("Dillion")
}

printName()
// Dillion

At first, the call stack is empty. When printName is declared, the call stack is still empty. When printName() is to be executed, it is added to the call stack:

When the function completes, it is removed from the call stack. Function completion happens when:

• all the lines in the function have been executed OR
• a return statement is encountered in the function

This way, the call stack can keep track of what function is currently being executed, and from what scope.

Let's see another example:

function printName() {
  function printFirstName() {
    console.log("Dillion")
  }

  function printLastName() {
    console.log("Megida")
  }

  printFirstName()
  printLastName()

  console.log("Dillion Megida")

}

printName()
// "Dillion"
// "Megida"
// "Dillion Megida"

In this example, we have declared a function called printName. In this function, we declare two other functions: printFirstName and printLastName. Both functions are called, and then the statement console.log("Dillion Megida").

When printName() is to be executed, it is added to the call stack:

In printName(), when printFirstName() is to be executed, it is also added to the call stack (above printName() because it has not finished execution yet):

After printFirstName() has completed execution (which logs "Dillion" to the console), it is removed from the call stack. printLastName() is now to be executed, so it is added to the call stack:

After the execution of printLastName() (which logs "Megida" to the console), it is removed from the call stack:

printName() continues execution which now executes console.log("Dillion Megida"). You can see "Dillion Megida" in the console. printName() is now done, and removed from the call stack:

This is how the call stack works to keep track of the current function(s) being executed. But the call stack has a maximum size. When you have more functions than is allowed in the call stack, you get the maximum call stack size exceeded error.

One popular case in which you can exceed the maximum call stack size is in recursion

I have a video explaining this that you can also check out.

Recursion and the call stack

Take a look at this example:

function printNames() {
  console.log("Dillion")

  printNames()

  console.log("Megida")
}

printNames()
// "Dillion" - first call
// "Dillion" - second call
// "Dillion" - third call
// "Dillion" - fourth call
// "Dillion" - fifth call
// and so on, until max

In this example, we have declared printNames. In this function, we first have console.log("Dillion"), then we have printNames().

Let's see what happens when we call printNames() after the function declaration.

printNames()--this is added to the call stack:

console.log("Dillion") is executed. "Dillion" is logged to the console. Then printNames() is executed again, which is added to the call stack as the active function:

We have two functions in the call stack now. The first call of printNames and the second call of printNames which is called from the first one.

In this second call of the function, console.log("Dillion") is executed which logs "Dillion" to the console. Then the line printNames() is executed again. A third call, which is added to the call stack as the now active function:

Now we have three functions in the call stack. Since nothing stops these function calls, it's going to happen infinitely until "the call stack cannot take it anymore" 😂:

The call stack has a maximum size of functions that it can hold at the same time. This size might be different in different browsers. When that size has been exceeded, you get the maximum call stack size exceeded error.

This would also cause your JavaScript application to be unresponsive. And you definitely do not want this for your users.

When creating recursions in your JavaScript programs, you should also have a base case, which terminates the recursions after some calls. This is important so as not to exceed the call stack size and have your application crash.

Here's an example of a base case:

let counter = 0;

function printNames() {
  console.log("Dillion")
  counter++

  if (counter < 5) {
    printNames()
  }

  console.log("Megida")
}

printNames()

// Dillion
// Dillion
// Dillion
// Dillion
// Dillion
// Megida
// Megida
// Megida
// Megida
// Megida

I've updated the code now to have a base case. The base case here is that "if the counter variable is no longer less than 5, stop the recursion". So when the function is called, printNames() is added to the call stack. We have counter as 0, then we log "Dillion" to the console. After that, we increase counter by 1. We then have the condition "if counter is less than 5". Since counter is less than 5, we execute printNames().

Now the call stack has the first and second printNames() calls.

On the fifth call of printNames, the call stack would have 5 calls of printNames():

Remember that the first 4 function calls have not finished. Before they finished, they called another function which was added to the call stack.

At this fifth call, "Dillion" is logged to the console for the fifth time. counter, at 4, is incremented by 1 to 5. Then the condition "if counter is less than 5" is checked. counter (as 5) is not less than 5, so this is the base case that tells the recursion to stop.

Since the function doesn't call itself again, it proceeds to the next line.

Then the next line in the function is executed which is console.log("Megida"). After this line, the fifth function in the call stack finishes its execution, and now leaves the call stack.

Now that the fifth function has finished execution, the fourth function can continue from where it stopped. The next line in the fourth function is console.log("Megida") which logs "Megida" to the console when executed. Then the fourth function leaves the stack:

And the remaining functions on the stack will finish execution until the stack becomes empty:

Wrap up

When you come across the error "Maximum call stack exceeded", the simple meaning is that "the call sack now contains more active functions than it can contain".

The call stack stores the currently executing function or functions. When there are too many functions being executed, the call stack might exceed its size and then throw an error. This usually occurs in cases of recursions that do not have base cases.

If you enjoyed this article, kindly share it with others :)

The local storage of browsers only accepts strings, but sometimes you want to store objects or arrays. How do you go about that? We'll see how in this article.

The browser local storage, is a Web Storage API that allows us to store data for a domain across browser sessions. Such data will be available and accessible by that domain forever, until it is deleted. It looks like this:

You can access this view by inspecting any webpage, going to the Application section, then the Storage section, and selecting Local Storage. You would see all the data that has been saved in local storage for the domain of the webpage.

Local storage is useful for data that you want to quickly access, without having to make an API request to a backend server. A common use case is personalization settings for a user like color scheme or other settings that you do not want to always reach out to the server for.

However, you can only store strings in this storage:

localStorage.setItem("key", "value")

Any attempt to store an object or an array would result in the value being stringified. An object like {name: "Dillion"} would be stringified to "[object Object]" and an array like [1,2] will be stringified to "1,2".

In the case of the array, you can retain the values, but for the object, those values are gone. So how do you correctly store an object and array?

I have a video on this topic which you can also check out.

Stringifying Objects and Arrays

Since we know that local storage works with string values, we can stringify the objects and arrays ourselves, in such a way that the contents of the value are not lost. We do this using JSON.stringify() method.

The stringify method of the JSON object converts a value to a JSON string, which we can store instead. Let's see an example:

const obj = {
  name: "Dillion",
  color_scheme: "dark"
}

const stringifiedObj = JSON.stringify(obj)

localStorage.setItem(
  "userInfo",
  stringifiedObj
)

As you can see here, we convert obj to a JSON string, then store it in local storage. Here's what it looks like:

When you click on the item in storage, your browser might also show you the value like an actual object below the table (as you can see above).

We can do the same for arrays:

const interests = [
  "football",
  "fashion",
  "cooking"
]

const stringifiedInterests =
  JSON.stringify(interests)

localStorage.setItem(
  "interests",
  stringifiedInterests
)

And the local storage view:

Again, you see that even though we actually stored a string, the browser recognizes that it's a stringified array, so by clicking on the item, you see the actual array.

Since they have the values as strings, how do we convert them back to objects and arrays when we want to use them?

Parsing Stringified Objects and Arrays

The JSON object also has a parse method which is to parse a JSON string into the original value. We can use this method to get the original object:

const userInfo =
  localStorage.getItem('userInfo')

const userInfoParsed = JSON.parse(userInfo)

console.log(userInfoParsed.name)
// Dillion

console.log(userInfoParsed.color_scheme)
// dark

And we can use it to get the original array:

const interests =
  localStorage.getItem('interests')

const interestsParsed = JSON.parse(interests)

console.log(interestsParsed[1])
// fashion

console.log(interestsParsed[2])
// cooking

Wrap up

Storing objects in local storage allows you to store a group of properties together instead of having multiple items in the storage. For example, instead of storing userName and userColorScheme separately in the storage, you can store one object with name and color_scheme properties.

But considering that local storage only allows string values, you have to convert your object or array into a string first.

In this article, we've seen how to do that, as well as get the original values when retrieving from the local storage.

If you enjoyed this article, please share it with others :)

The Nullish Coalescing Operator is a new logical operator in JavaScript introduced in ES 2020. In this article, we'll understand how this operator works.

There are over four logical operators in JavaScript: the AND &&, OR ||, NOT !, and the Nullish Coalescing Operator ??.

Sometimes called the Nullish Operator, this operator is used between two operands:

operand1 ?? operand2

To understand this operator, we'll have to understand what "nullish", "coalescing" and short-circuiting mean.

I have a video on this topic that you can check out also.

What are "nullish" values?

Nullish values in JavaScript are null and undefined. These values fall under falsy values but are more specifically referred to as null values. All nullish values are falsy, but not all falsy values (for example, 0) are nullish.

So, the nullish operator is related to null and undefined values while other logical operators are related to truthy and falsy values in general.

What does "coalescing" mean?

Coalescing, according to the dictionary means "coming together to form one whole". How does this apply to programming? It means you bring multiple values together, to make one value out of it.

Coalescing in programming does not specifically mean "joining the values together", but more about "deciding what value is made out of the provided values".

We'll see how this works with examples later in this article.

Short-Circuiting

The concept of short-circuiting applies to many programming languages. It occurs when interpreters execute a boolean-related expression and skips the irrelevant part of the expression.

For example, a boolean expression like "I am 40 years old, and I am in tech". This expression would only be true if I am 40 years old, and not just that, I am in tech.

After the interpreter executes "I am 40 years old", it cannot yet conclude that the whole expression is true, because in the case that "I am NOT in tech", the expression will be false. The second part of the expression is relevant because it can change the result.

But, in the case that "I am NOT 40 years old", short-circuiting will happen. Since the first part of the expression returns false, the interpreter knows that there is no point evaluating the second expression. The second part is irrelevant, as the value from this expression does not change the result. So the interpreter skips the second part (thereby saving resources--time, power).

This also applies to the nullish operator.

You can learn more about short-circuiting in this article

The Nullish Coalescing Operator

Now that we've looked at the fundamentals of this operator, let's understand what this operator does.

When used in an expression, the Nullish Operator checks the first operand (on the left) to see if its value is null or undefined. If it isn't, the operator returns it from the expression. But if the first operand is any of those values, the operator returns the second operand from the expression.

Let's see a quick example:

function expression1() {
  return null
}

const expression2 = 4 * 5

const result = expression1() ?? expression2

console.log(result)
// 20

Here, we have a function called expression1 which when called returns null. And we also have expression2 which holds the value from the expression 4 * 5.

For the result variable, we use the nullish operator and pass expression1() and expression2 as the operands.

The first operand (the function call expression) returns null. The operator confirms that the first operand is null, so it returns the value from the second expression: expression2.

Let's see another example:

function expression1() {
  console.log("expression1")
  return false
}

function expression2() {
  console.log("expression2")
  return "Dillion"
}

const result = expression1() ?? expression2()

console.log(result)
// expression1
// false

Here, we have expression1, a function which when called executes console.log("expression1"), then returns false. And we have expression2, which is a function that when called, executes console.log("expression2"), and returns "Dillion".

Using the nullish operator, we have the first operand as expression1(), and the second operand as expression2() and assign the value from the expression to result.

When we run this code, you see that we have "expression1" logged, which calls from the execution of expression1. And you see that result is logged as false. This means, expression1() is the returned expression from the nullish operator.

The operator checks if the first expression returns null or undefined, for which it would return the second expression. But in this case, the first expression returns false, therefore, the operator would return the first expression.

Another thing you notice is that "expression2" is not logged. This means that expression2() is not executed at all. Short-circuiting happens here.

Since the operator has already confirmed that the first operand is NOT null or undefined, it doesn't bother about the second expression, because the value of the second expression does not change what the operator would return.

Nullish vs OR Operator

The Nullish and OR operators have some similarities, but they work a bit differently.

The OR operator checks if the first operand is a truthy value. If the first operand is one, it returns it, else, it returns the second operand.

But, the Nullish operator checks if the first operand is a nullish value. If the first operand isn't one, it returns it, else, it returns the second operand

Here's an OR example:

const expression1 = ""
const expression2 = "Dillion"

const result = expression1 || expression2

console.log(result)
// "Dillion"

Since the first operand, expression1, is a falsy value (empty string), the operator returns the second operand. If expression1 was 20, for example (which is a truthy value), it would have been returned, and short-circuiting would have happened.

Here's a Nullish example:

const expression1 = undefined
const expression2 = "Dillion"

const result = expression1 ?? expression2

console.log(result)
// "Dillion"

Using the nullish operator here, the first operand is undefined, a nullish value, so the operator returns the second operand. If expression1 was false, 20, or some other non-nullish value, it would have been returned, and short-circuiting would have happened.

Using the nullish operator directly with AND/OR

You can directly mix the AND and OR operators in expressions but you cannot do that for the nullish operator. Here's what I mean:

exp1 && exp2 || exp3 && exp4

Here, we combine AND and OR. The order in this expression is:

1. "exp1 AND exp2"
2. "the result of that OR exp3"
3. "the result of that AND exp4"

Don't forget that due to short-circuiting, step 2 or step 3 may never be reached.

But you cannot do these combinations directly with the nullish operator. For example:

exp1 && exp2 ?? exp3 || exp4

We're mixing AND, Nullish, and OR here: this will throw a syntax error. Let's see an actual example:

function expression1() {
  return null
}

const expression2 = 20 < 10

const expression3 ="Dillion"

const result = expression1() ?? expression2 || expression3
// SyntaxError: Unexpected token '||'

We have expression1 a function which when called returns null, expression2 which holds the returned value from 20 < 10, and expression3 which holds the string value "Dillion".

Use the nullish and OR operators with these three expressions, what I would expect is that:

1. expression1() returns null, so the nullish operator returns the right side of the expression which is expression2 || expression3
2. on the right side, the OR operator is used, which checks if the left side, expression2 is truthy; since it is a falsy value, the operator returns the right side

But, by executing this, we get an error: SyntaxError: Unexpected token '||'. This means you cannot use these operators directly. The only way to combine them is to add parenthesis like this:

const result = (expression1() ?? expression2) || expression3

console.log(result)
// Dillion

By surrounding expression1() ?? expression2 with parentheses, we can then use the returned result as the first operand for the OR operator, and add expression3 as the second operand.

Wrap up

The nullish operator is very useful in declaring default values for potential null or undefined values. Say, you're expecting an object from an API. If that object does not contain an expected property, that property may either hold null or be undefined like this:

const obj = {}

console.log(obj.type)
// undefined

Using the nullish operator, we can provide a default value:

const obj = {}

console.log(obj.type ?? "default")
// "default"

There are many other ways you can use this operator for default values or safe checks.

If you enjoyed this article, please share :)

Hoisting is a concept or behavior in JavaScript where the declaration of a function, variable, or class goes to the top of the scope they were defined in. What does this mean?

Hoisting is a concept you may find in some programming languages (such as JavaScript) and not in others. It's a special behavior of the JavaScript interpreter. We'll learn about how it works in this article.

Let's start with functions.

I have a video version of this topic which you can check out.

Function Hoisting

Take a look at this code example:

function printHello() {
  console.log("hello")
}

printHello()
// hello

Here, we declare printHello, and we execute the function just after the line it was declared. No errors; everything works!

Now look at this example:

printHello()
// hello

function printHello() {
  console.log("hello")
}

Here, we execute printHello before the line the function was declared. And everything still works without errors. What happened here? Hoisting.

Before the interpreter executes the whole code, it first hoists (raises, or lifts) the declared function to the top of the scope it is defined in. In this case, printHello is defined in the global scope, so the function is hoisted to the top of the global scope. Through hoisting, the function (including the logic) becomes accessible even before the line it was declared in the code.

Let's see another example:

printHello()
// hello

printDillion()
// ReferenceError: printDillion is not defined

function printHello() {
  console.log('hello')

  function printDillion() {
    console.log("dillion")
  }
}

As you see here, we declare printHello. In this function, we first execute console.log('hello') then we declare another function called printDillion which executes console.log('dillion') when called.

Before printHello is declared in the code, we try to access it by executing printHello(). It's accessible (since it is hoisted to the top of the global scope), so we have "hello" printed on the console.

But then we try to access printDillion, and we get a reference error: printDillion is not defined. Does hoisting not occur on printDillion?

printDillion is hoisted, but it is only lifted to the top of the scope it was declared in. In this case, it is declared in a local scope--in printHello. Therefore, it would only be accessible in the function. Let's update our code:

printHello()
// hello

function printHello() {
  printDillion()
  // dillion

  console.log('hello')

  function printDillion() {
    console.log("dillion")
  }
}

Now, we execute printDillion in printHello before the line where printDillion was actually declared. Since the function is hoisted to the top of the local scope, we're able to access it before the line where it was actually declared.

Hoisting makes all these possible for function declarations. But, it's also worth noting that hoisting does not occur on function expressions. I explained the reason for this here: Function Declarations vs Function Expressions

Now let's look at hoisting for variables.

Variable Hoisting

You can declare variables in JavaScript with the var, let, and const variables. And these variable declarations would be hoisted, but behave differently. Let's start with var.

Hoisting var variables

Take a look at this example:

console.log(name)
// undefined

var name = "Dillion"

Here, we declare a variable called name with a string value of "Dillion". But, we try to access the variable before the line it was declared. But we don't get any errors. Hoisting happened. The name declaration is hoisted to the top, so the interpreter "knows" that there is a variable called name. If the interpreter did not know, you would get name is not defined. Let's try it out:

console.log(name)
// ReferenceError: name is not defined

var myName = "Dillion"

We have a variable called myName but no name. We get the name is not defined error when we try to access name. The interpreter "does not know" about this variable.

Coming back to our example above:

console.log(name)
// undefined

var name = "Dillion"

Although hoisting happened here, the value of name is undefined when we access it before the line of declaration. With variables declared var, the variable declaration is hoisted but with a default value of undefined. The actual value is initialized when the declaration line is executed.

By accessing the variable after that line, we get the actual value:

console.log(name)
// undefined

var name = "Dillion"

console.log(name)
// Dillion

Let's say we declared name in a function:

print()

console.log(name)
// ReferenceError: name is not defined

function print() {
  var name = "Dillion"
}

Here, we get a reference error: name is not defined. Remember, variables are hoisted but only to the top of the scope they were declared in. In this case, name is declared in print, so it will be hoisted to the top of that local scope. Let's try to access it in the function:

print()

function print() {
  console.log(name)
  // undefined

  var name = "Dillion"
}

By trying to access name in the function, even though it's above the line of declaration, we do not get an error. That's because name is hoisted, but don't forget, with a default value of undefined.

Hoisting let variables

Although variables declared with let are also hoisted, they have a different behavior. Let's see an example:

console.log(name)
// ReferenceError: Cannot access 'name' before initialization

let name = "Dillion"

Here, we get a reference error: Cannot access 'name' before initialization. Do you notice that the error does not say name is not defined? That's because the interpreter is "aware" of a name variable because the variable is hoisted.

"Cannot access 'name' before initialization" occurs because variables declared with let do not have a default value when hoisted. As we saw in var, the variables have a default value of undefined until the line where the declaration/initialization is executed. But with let, the variables are uninitialized.

The variables are hoisted to the top of the scope they are declared in (local, global, or block), but are not accessible because they have not been initialized. This concept is also referred to as the Temporal Dead Zone.

They can only be accessible after the initialization line has been executed:

let name = "Dillion"

console.log(name)
// Dillion

By accessing name after the line it was declared and initialized, we get no errors.

Hoisting const variables

Just like let, variables declared with const are hoisted, but not accessible. For example:

console.log(name)
// ReferenceError: Cannot access 'name' before initialization

const name = "Dillion"

The same concept of a temporal dead zone applies to const variables. Such variables are hoisted to the top of the scope they are defined in (local, global, or block), but they remain inaccessible until the variables are initialized with a value.

const name = "Dillion"

console.log(name)
// Dillion

By accessing the variable after it has been initialized with a value (as you see above), everything works fine.

Moving onto hoisting for classes.

Class Hoisting

Classes in JavaScript are also hoisted. Let's see an example:

const Dog = new Animal("Bingo")
// ReferenceError: Cannot access 'Animal' before initialization

class Animal {
  constructor(name) {
    this.name = name
  }
}

Here, we declare a class called Animal. We try to access this class (instantiate a Dog object) before it was declared. We get a reference error: Cannot access 'Animal' before initialization. What does this error remind you of?

Just like let and const variables, classes are hoisted to the top of the scope they are defined in, but inaccessible until they are initialized. We do not get "Animal is not defined", which shows that the interpreter "knows" that there is an Animal class (due to hoisting). But we cannot access that class until the line of initialization is executed.

Let's update the code:

class Animal {
  constructor(name) {
    this.name = name
  }
}

const Dog = new Animal("Bingo")

console.log(Dog)
// { name: 'Bingo' }

After Animal has been initialized, it becomes accessible, so we can instantiate the Dog object from the class without errors.

Wrap Up

In some codebases, you may find a code similar to this:

function1()
function2()
function3()

// lines of code
// lines of code

function function1() {...}
function function2() {...}
function function3() {...}

The three functions here are called at the top but actually declared in the code at the bottom. This is possible, due to hoisting. The functions are hoisted to the top of the global scope (which is where they were defined) together with their logic, so they become accessible/executable even before the line they were defined.

It's different for the others. var variables are hoisted but with a default value of undefined. let and const variables, and classes are hoisted but inaccessible as they do not have a default initialization.

If you enjoyed this piece, please share it with others 🙏🏾

When creating functions, you can use two approaches: declaration and expression. What's the difference?

When talking about functions in JavaScript, you would often hear function declarations and function expressions. Though these approaches are almost similar, they have notable differences.

We'll look at the differences in this article.

I have a video version of this topic you can also check out.

Function Declaration

To declare a function, you use the function keyword and specify a name for the function. For example:

function generateIntro(name) {
  return `Hi, my name is ${name}`
}

const dillion = generateIntro("Dillion")
console.log(dillion)

// Hi, my name is Dillion

Here, we have "declared" a function called generateIntro. You see we use the function keyword followed by the name of the function: "generateIntro"

Now let's look at function expression.

Function Expression

Here, you create a function expression and assign it to a variable that can be called. You can do this in two ways.

Function Expressions with the function keyword

One way to do this is to use the function keyword without a name, which makes it an anonymous function. Here's how:

const generateIntro = function(name) {
  return `Hi, my name is ${name}`
}

const dillion = generateIntro("Dillion")
console.log(dillion)

// Hi, my name is Dillion

As you see here, we have the function keyword without a name for the function. This makes it an expression, which you have to assign to a variable (as we have done to generateIntro here).

Note: you can use const, let or var to declare the variable. You can learn more about the differences between these keywords in this article

If we use the function keyword without a name, we create a function expression, which we have to assign to a variable, else we get an error. Here's what I mean:

function(name) {
  return `Hi, my name is ${name}`
}

// SyntaxError: Function statements require a function name

We get an error: SyntaxError: Function statements require a function name. Without assigning it to a variable, JavaScript assumes it is a statement, and as the error says, you must provide a function name.

But when you assign it to a variable, you assign the expression, and when you call the variable (variable()), it will execute the logic of the function expression assigned to it.

Arrow function expressions

You can also create function expressions with arrow functions. Arrow functions, introduced in ES6 allow you to write functions in a short manner. But arrow functions cannot be declared; they can only be expressed. Here's an example:

const generateIntro = (name) => {
  return `Hi, my name is ${name}`
}

const dillion = generateIntro("Dillion")
console.log(dillion)

// Hi, my name is Dillion

The arrow function here is (args) => {...}. This is a function expression that we have assigned to generateIntro.

For the rest of this article, I'll focus on function expressions created with the function keyword but know that it also applies to arrow functions.

Function Declarations vs Function Expressions

So what's the difference between these ways of creating functions and why does it matter?

It matters because these functions have different behaviors. And depending on what you want to achieve, one may be preferred over the other.

1. Expressed functions cannot be used before initialization

You can use a declared function before the line it was initialized. Here's what I mean:

const result = sum(20, 50)
console.log(result)

console.log("hello")

function sum(num1, num2) {
  return num1 + num2
}

// 70
// "hello"

As you see here, we used sum on line 1, which is actually before the line was declared. What happens here is hoisting. sum is hoisted to the top of the code before the whole code is executed. This makes sum accessible before the line where it was actually created in the code.

When it comes to hoisting, all functions and variables are hoisted. But, functions created with function expressions cannot be "used" before their initialization.

Let's see an example using a function expression created with the function keyword:

const result = sum(20, 50)
console.log(result)

console.log("hello")

const sum = function(num1, num2) {
  return num1 + num2
}

// ReferenceError: Cannot access 'sum' before initialization

We get an error: ReferenceError: Cannot access 'sum' before initialization. We get this error because when you declare variables with let or const (like we did for sum here), they are hoisted, but without a default initialization. You can learn more about what happens here in this article: the hoisting behavior in let and const

Let's say we create the variable with var instead:

const result = sum(20, 50)
console.log(result)

console.log("hello")

var sum = function(num1, num2) {
  return num1 + num2
}

// TypeError: sum is not a function

Now we get a new error: TypeError: sum is not a function. Although var variables are hoisted, they are hoisted with a default initialization of undefined. So attempting to call it like a function, that is undefined(), throws the error that "sum is not a function".

The same error would occur if it were an arrow function.

Therefore, only declared functions can be used before initialization.

2. Expressed functions need to be assigned to be used later

With declared functions, you already have the name: function name.... So you can use the function later: name(). But with function expressions, there's no name as we saw. It would be impossible to use such a function later unless we assigned it to a variable:

const printName = function(firstname, lastname) {
  console.log(`${firstname} ${lastname}`)
}

Here, we assigned the function expression to printName. Now we can use that function logic later by calling printName().

3. Anonymous functions are useful for anonymous operations

There are cases where you do not need to use a function later. You can execute the function instantly. In such cases, you do not need a name, so you can use a function expression instead of a declaration.

Let's see some examples.

Immediately Invoked Function Expressions (IIFEs)

IIFEs are functions that are immediately invoked after creation. Here's an example:

(function() {
  console.log('deeecode')
})()

// deeecode

Or the arrow function equivalent:

(() => {
  console.log('deeecode')
})()

// deeecode

This is an IIFE where we create a function that executes console.log('deeecode'). Immediately after creating the function, we execute it as you see at the end (()). Here, we do not intend to use the function later, so a function expression works fine.

Using a function declaration here will not throw an error, but the name of the function will be inaccessible:

(function print(){
  console.log('deeecode')
})()

print()

// deeecode
// ReferenceError: print is not defined

Using a function declaration, the IIFE is executed, but you cannot access the name of the function outside the parenthesis.

Callback Functions

When using callback functions, you can also pass anonymous functions (function expressions). For example, using the forEach method of arrays which expects a callback function, we can use an anonymous function.

The syntax of the forEach method is:

array.forEach(callbackFn)

forEach loops through each item in an array and executes the callback function on them. Let's see how we use a function expression for this:

const array = [1, 2, 3]

array.forEach(function(value) {
  console.log(value)
})

// 1
// 2
// 3

As you see here, we passed a function expression (anonymous function) as an argument to forEach.

You can pass a function declaration instead, and the callback function will work. But, as we saw earlier, you won't be able to access the function later:

const array = [1, 2, 3]

array.forEach(function print(value) {
  console.log(value)
})

// 1
// 2
// 3

// ReferenceError: print is not defined

As you see here, print is declared and used as the callback function, but you cannot access print afterward.

Wrap up

Function declarations and function expressions are terms you would hear a lot around functions in JavaScript You can use function expressions to perform similar logic with function declarations, but it is worth noting the differences.

In this article, we've seen how function expressions and different from function declarations.

If you enjoyed this article, please give it a share :)

In JavaScript, there are two types of functions. You have normal functions and arrow functions. Let's explore the difference between them in this article.

Arrow functions was introduced in ES6. And it introduced a simple and shorter way to create functions.

Here's how to create a normal function, with arguments, which returns something:

function multiply(num1, num2) {
  const result = num1 * num2
  return result
}

If you want to transform this into an arrow function, here's what you'll have:

const multiply = (num1, num2) => {
  const result = num1 * num2
  return result
}

If the return statement is the only statement in the function, you can even have a shorter function expression. For example:

const multiply = (num1, num2) => {
  return num1 * num2
}

This function only contains the return statement. With arrow functions, we can have something shorter like this:

const multiply = (num1, num2) => num1 * num2

We skip the curly braces and the return keyword. Shorter; one-liner.

But the syntax of writing both types of functions is not the only difference. There's more, so let's look at them.

I have a video version of this topic which you can also check out :)

1. No arguments object in arrow functions

A normal function has an arguments object which you can access in the function:

function print() {
  console.log(arguments)
}

The arguments object is a local variable that contains the arguments passed to the function when called. Let's try it out:

print("hello", 400, false)

// {
//   '0': 'hello',
//   '1': 400,
//   '2': false
// }

As you can see here, the three arguments passed when calling print() are contained in the arguments object which we log to the console. We can access the first argument with arguments[0], the second with arguments[1] and the third with arguments[2]

But this object does not exist in arrow functions. Let's try it out. Say we have print using an arrow function:

const print = () => {
  console.log(arguments)
}

print("hello", 400, false)
// Uncaught ReferenceError: arguments is not defined

Now we have a reference error: arguments is not defined. That's because the arguments variable does not exist in arrow functions.

2. Arrow functions do not create their own this binding

In normal functions, a this variable is created which references the objects that call them. For example:

const obj = {
  name: 'deeecode',
  age: 200,
  print: function() {
    console.log(this)
  }
}

obj.print()
// {
//   name: 'deeecode',
//   age: 200,
//   print: [Function: print]
// }

As you can see here, the this in the print method points to obj, which is the object that calls the method.

Here's another example:

const obj = {
  name: 'deeecode',
  age: 200,
  print: function() {
    function print2() {
      console.log(this)
    }

    print2()
  }
}

obj.print()
// Window

Here, we have two functions. The first one is print which is a method of the obj object. The second is print2 which is a function declared inside print. print2() is also called directly.

In this case, print is called by obj (obj.print()) but no object calls print2 (print2()). So the this in print2 would reference the window object by default.

Now let's see what happens with an arrow function.

const obj = {
  name: 'deeecode',
  age: 200,
  print: () => {
    console.log(this)
  }
}

obj.print()
// Window

By using an arrow function for print, this function does not automatically create a this variable. As a result, any reference to this would point to what this was before the function was created.

As you see in the result, this was pointing to the Window object before print was created.

Let's see another example:

const obj = {
  name: 'deeecode',
  age: 200,
  print: function() {
    const print2 = () => {
      console.log(this)
    }

    print2()
  }
}

obj.print()
// {
//   name: 'deeecode',
//   age: 200,
//   print: [Function: print]
// }

Here, we have print as a normal function which means a this variable is automatically created in it. Then we have print2 which is an arrow function.

Because obj is calling print (as in obj.print()), the this in print would point to obj.

Since print2 is an arrow function, it doesn't create its own this variable. Therefore, any reference to this would point to what the value of this was before the function was created. In this case where obj calls print, this was pointing to obj before print2 was created. As you can see in the results, by logging this from print2, obj is the result.

You can learn more about this in my article here

3. Arrow functions cannot be used as constructors

With normal functions, you can create constructors which serve as a special function for instantiating an object from a class.

Here is an example of an Animal class which we instantiate two objects from:

class Animal {
  constructor(name, numOfLegs) {
    this.name = name
    this.numOfLegs = numOfLegs
  }

  sayName() {
    console.log(`My name is ${this.name}`)
  }
}

const Dog = new Animal("Bingo", 4)
const Bird = new Animal("Steer", 2)

Dog.sayName()
// My name is Bingo

Bird.sayName()
// My name is Steer

Here, we have the Animal constructor which can be instantiated with different parameters. In the constructor, two arguments are required: name and noOfLegs.

In the case of Dog, we create a new instance of Animal using "Bingo" as the name and 4 as the noOfLegs.

In the case of Bird, we create a new instance of Animal using "Steer" as the name and 2 as the noOfLegs.

By calling sayName on Dog and Bird, you can see how the method works currently with each object. The this variable points to the objects and the name field is gotten from each of them.

The this variable is very important for classes and constructors. In point 2, we saw that arrow functions cannot create their own this. For this reason, arrow functions also cannot be used as constructors.

Let's attempt it and see what happens:

class Animal {
  constructor = (name, numOfLegs) => {
    this.name = name
    this.numOfLegs = numOfLegs
  }

  sayName() {
    console.log(`My name is ${this.name}`)
  }
}

// Uncaught SyntaxError: Classes may not have a field named 'constructor'

Here, we have an arrow function used for the constructor. But, we get a SyntaxError: Classes may not have a field named 'constructor'.

Because arrow functions involve expressions that are assigned variables, JavaScript now sees constructor as a field. And in classes, you cannot have a field named constructor as that is a reserved name.

But, we can use arrow functions for the methods in the class without getting errors. For example:

class Animal {
  constructor (name, numOfLegs){
    this.name = name
    this.numOfLegs = numOfLegs
  }

  sayName = () => {
    console.log(`My name is ${this.name}`)
  }
}

const Dog = new Animal("Bingo", 4)

Dog.sayName()
// My name is Bingo

Here, we have a normal function for the constructor, and an arrow function for the sayName method. sayName is a field. And we do not get errors.

By calling sayName() on Dog, we still get "My name is Bingo". Though sayName as an arrow function does not create its own this, remember that any reference to this would point to the value of it before the arrow function was created. In this case, the value of this pointed to Dog before sayName was created.

4. Arrow functions cannot be declared

When it comes to functions, you need to understand function declaration and function expression.

Function declarations involve the function keyword and a name for the function. For example:

function printHello() {
  console.log("hello")
}

printHello is a declared function. But, check out this example:

const printHello = function() {
  console.log("hello")
}

In this case, printHello is not a declared function. We have an anonymous function (not named) on the right side of the assignment operator. This function is a function expression, which is assigned to the printHello variable.

Though the function keyword is used, there is no name assigned, which makes it an expression and not a declaration. To prove that it is not a declaration, try the following:

function() {
 console.log("hello")
}

Because this expression is not assigned to a variable, you get an error: SyntaxError: Function statements require a function name

Back to arrow functions. Normal functions can be declared when you use the function keyword and a name, but arrow functions cannot be declared. They can only be expressed because they are anonymous:

const printHello = () => {
  console.log("hello")
}

As you see here, we have an anonymous function (starting from () => ...) which is assigned to the printHello variable. printHello is not a declared function here. It is a variable that holds the evaluated value from the function expression.

5 Arrow functions cannot be accessed before initialization

Hoisting is a concept where a variable or function is lifted to the top of its global or local scope before the whole code is executed. This makes it possible for such a variable/function to be accessed before initialization. Here's a function example:

printName()

console.log("hello")

function printName() {
  console.log("i am dillion")
}

// i am dillion
// hello

As you can see here, we called printName before it was actually declared in the code. But we don't get any errors. printName() is executed (logging "i am dillion" to the console) before console.log("hello").

What happens here is hoisting.

The printName function is raised to the top of the global scope (the scope it is declared in) before the whole code is executed, thereby making it possible to execute the function earlier.

But not all kinds of functions can be accessed before initialization. All functions and variables in JavaScript are hoisted, but only declared functions can be accessed before initialization.

Here's an example with an arrow function:

printName()

console.log("hello")

const printName = () => {
  console.log("i am dillion")
}

// ReferenceError: Cannot access 'printName' before initialization

Running this code, you get an error: ReferenceError: Cannot access 'printName' before initialization.

As we saw in point 4, printName is not a declared function. It is a variable, declared with const which is assigned a function expression. Variables declared with let and const are hoisted, but they cannot be accessed before the line they are initialized.

Let's say we use var for our arrow function:

printName()

console.log("hello")

var printName = () => {
  console.log("i am dillion")
}

// TypeError: printName is not a function

Here, we have declared the printName variable with var. The error we get now is TypeError: printName is not a function. The reason for this is that variables declared with var are hoisted and accessible, but they have a default value of undefined. So attempting to access printName before the line it was initialized with the function expression is interpreted as undefined(), and as you know, "undefined is not a function".

You can learn more about the hoisting differences between var, let, and const here

Wrap up

Although arrow functions allow you to write functions more concisely, they also have limitations. As we have seen in this article, some of the behaviors that occur in normal functions do not happen in arrow functions.

If you want to create constructors, retain the normal behavior of this or have your functions hoisted, then arrow functions are not the right approach.

If you enjoyed this article, please share it with others :)

By popular demand, we built a Discord bot that helps people track their progress in the challenge.

Today I am going to show you how to build your own 100 Days of Code bot.

Note that discord.js has released version 14, which includes breaking changes. For compatibility with this tutorial, you will want to ensure you are using discord.js 13 - you can install this with npm install discord.js@13. If you have any questions, feel free to join my discord server.

Create a Discord Bot Application

Your first step is to set up a Discord bot application. Head over to the Discord Developer Portal, sign in if needed, and select "Applications" from the sidebar.

Screenshot of the Developer Portal. If this is your first bot, you will not have any applications here.

Click the "New Application" button. Give it a name, and set it as a "Personal" application. You will now be taken to the application's settings. Here you can change the name, or give it an avatar.

Select "Bot" from the side bar, then click the "Add Bot" button. This will create a Discord Bot account for your application.

Screenshot of the Bot settings page. If you did not set an avatar, you will see a default based on your bot's name.

This is the screen where you will get the bot token. It is very important to keep this token secret, as the token allows your code to connect to your bot. Keep it safe and do not share it with anyone.

Now you need to add the bot to a server to interact with it. Click the "OAuth2" option on the sidebar, then select "URL Generator".

Under "Scopes", select bot and application.commands. The bot scope allows your bot account to join the server, and the application.commands scope allows you to update the slash commands (more on this later).

When you select bot, a new section for "Bot Permissions" will appear. Select the following permissions:

• Send Messages
• Embed Links
• Read Messages/View Channels

Screenshot of the OAuth screen with the required settings.

Copy the generated URL, and paste it into your browser. This will take you through Discord's process to add your new bot to a server.

Note that you must have the Manage Server permission in the server you want to add the bot to. If you do not have this permission, you can create a server to test your bot in.

Now you are ready to write some code!

Set Up Your Project

You will first need to set up the infrastructure and tooling for your project.

Ensure that you have Node.js version 16 and npm installed. Note that the packages you will use do not support earlier versions of Node.

Prepare the package.json

Create a directory, or folder, for your project. Open your terminal pointing to that new folder. Run the command npm init to set up your package.json file. For this tutorial, the default values are sufficient, but feel free to edit them as you wish.

You should end up with a package.json similar to this:

{
  "name": "100doc-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now you need to make a couple of changes to get ready for the TypeScript implementation.

First, replace the main value of index.js with ./prod/index.js – you will be setting your TypeScript to compile to a prod directory.

Then remove the test script and add the following two scripts:

"build": "tsc",
"start": "node -r dotenv/config ./prod/index.js"

The build script will compile your TypeScript into JavaScript so Node can run it, and the start script will run the index.js entrypoint file.

Adding the -r dotenv/config here will dynamically import and run the config method in the dotenv package, which loads your environment variables from the .env file.

Speaking of packages, your next step is to install dependencies. Using npm install, install these dependencies:

• discord.js – this is the library that will handle connecting to the gateway and managing the Discord API calls.
• @discordjs/builders – the discord.js package for constructing application commands
• @discordjs/rest – a custom API client for interacting with the Discord REST API.
• discord-api-types – Type definitions and handlers for the Discord REST API.
• dotenv – a package that loads .env values into the Node process.
• mongoose – A wrapper for the MongoDB connection which offers tools for structuring your data.

Finally, install the development dependencies with npm install --save-dev. Development dependencies are packages that are required for working on your project in a development environment, but not required for running the codebase in production.

• typescript – This is the package for the TypeScript language, which includes everything needed to write code in TypeScript and compile it into JavaScript.
• @types/node – TypeScript relies on type definitions to understand the code you write. This package defines the types for the Node.js runtime environment, such as the process.env object.

With these packages installed, you should now have a package.json similar to this:

{
  "name": "100doc-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "./prod/index.js",
  "scripts": {
    "build": "tsc",
    "start": "node -r dotenv/config ./prod/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@discordjs/builders": "^0.11.0",
    "@discordjs/rest": "^0.2.0-canary.0",
    "discord.js": "^13.6.0",
    "dotenv": "^14.2.0",
    "mongoose": "^6.1.7"
  },
  "devDependencies": {
    "@types/node": "^17.0.10",
    "typescript": "^4.5.4"
  }
}

Prepare TypeScript

TypeScript's compiler offers a number of different settings to maximise your control over the resulting JavaScript.

You can typically modify the compiler settings through a tsconfig.json file at the root of your project. You can generate the default boilerplate for this file with npx tsc --init, use an existing one if you set one up in another project, or even write one from scratch.

Because the compiler settings can significantly change the behaviour of TypeScript, it is best to use the same settings when following this tutorial. Here are the settings you should use:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "rootDir": "./src",
    "outDir": "./prod",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  }
}

The most important settings here are the rootDir and outDir settings. These tell the compiler that all of your code will be in the src directory, and the resulting JavaScript should go in the prod directory.

If you would like to test your settings, create a src directory and place an index.ts file inside. Write some code (such as a console.log statement) and run npm run build in your terminal. You should see a prod directory get created, with an index.js containing your compiled code.

Additional Setup Notes

If you are using git as a version control, you want to avoid pushing secrets and unnecessary code to your repository. Create a .gitignore file in your root project directory, and add the following content:

/node_modules/
/prod/
.env

The .gitignore file tells git not to track files/folders that match the patterns you enter. Ignoring the node_modules folder keeps your repository from becoming bloated.

Pushing the compiled JavaScript is also unnecessary, as your project is typically compiled in production before runtime. .env files contain secret values, such as API keys and tokens, so they should not be committed to a repository.

Create the Discord Bot

Your next step is to prepare the initial bot connection. If you did not do so earlier, create a src directory and an index.ts file within.

Start with an anonymous immediately-invoked function expression (IIFE) to allow for top-level await use:

(async () => {

})();

Within this function you are going to instantiate your Discord bot. At the top of the file, import the Client class with import { Client } from "discord.js";. The Client class represents your Discord bot's session.

Inside your function, construct a new Client instance and assign it to a BOT variable with const BOT = new Client();. Now the BOT variable will represent your bot.

To connect your bot to the Discord gateway and begin receiving events, you will need to use the .login() method on your bot instance. The .login() method takes a single argument, which is the token for the bot application you created earlier.

Many of the methods in discord.js are asynchronous, so you will need to use await here. Add the line await BOT.login(process.env.BOT_TOKEN); to your IIFE.

Your index.ts file should now look like this:

import { Client } from "discord.js";

(async () => {
  const BOT = new Client();

  await BOT.login(process.env.BOT_TOKEN);
})();

If you try to run npm run build, you will see an error: An argument for 'options' was not provided.

In discord.js 13, you are required to specify Gateway Intents when you instantiate your bot. Gateway Intents tell Discord what events your bot should receive.

In your src folder, create a config folder - then in config, create an IntentOptions.ts file.

Within that new file, add the line export const IntentOptions = ["GUILDS"]. This will tell Discord your bot should receive the Guild events.

Then, back in your index.ts file, add an argument to your new Client() call: new Client({intents: IntentOptions}). You'll need to import it at the top of your file with import { IntentOptions } from "./config/IntentOptions;.

It seems you still have an error: Type 'string' is not assignable to type 'number |${bigint}| IntentsString | Readonly<BitField<IntentsString, number>> | RecursiveReadonlyArray<number |${bigint}| IntentsString | Readonly<...>>'.

TypeScript is inferring your IntentOptions array as a string, but the Client constructor is expecting more specific types.

Head back to your config/IntentOptions.ts file and add another import: import { IntentsString } from "discord.js". Then update your variable with the new type definition: export const IntentOptions: IntentsString[] = ["GUILDS"];.

Now npm run build should be successful. If you have added your new bot to a Discord server, running npm start will show your bot come online in that server. However, the bot is not going to respond to anything yet, because you have not started listening to events.

Gateway Events in Discord

Gateway "events" are generated when an action happens on Discord, and are typically sent to clients (including your bot) as JSON payloads. You can listen to those events with the .on() method, allowing you to write logic for your bot to follow when specific events occur.

The first event to listen to is the "ready" event. This event fires when your bot has connected to the gateway and is ready to process events. Above your .login() call, add BOT.on("ready", () => console.log("Connected to Discord!"));.

For your changes to take effect, use npm run build again to compile the new code. Now if you try npm run start, you should see "Connected to Discord!" print in your terminal.

Connect to the Database

You'll be using the mongoose package to connect to a MongoDB instance. If you prefer, you can run MongoDB locally, or you can use the MongoDB Atlas free tier for a cloud-based solution.

If you do not have a MongoDB Atlas account, freeCodeCamp has a great tutorial on setting one up.

Grab your connection string for your database and add it to your .env file as MONGO_URI="", with the connection string going between the quotes. For the database name, use oneHundredDays.

Create a directory called database to hold the files that contain your database logic. Within that directory, create a file called connectDatabase.ts. You will be writing your logic to initiate the database connection here.

Start with an exported function declaration:

export const connectDatabase = async () => {

}

mongoose offers a connect method for connecting to the database. Import it with import { connect } from "mongoose"; at the top of your file.

Then use the method inside your function with await connect(process.env.MONGO_URI);. Add a console.log statement after that so you can identify that your bot has connected to the database.

Your connectDatabase.ts file should now look something like this:

import { connect } from "mongoose";

export const connectDatabase = async () => {
    await connect(process.env.MONGO_URI);
    console.log("Database Connected!")
}

Now, within your index.ts file, import this function with import { connectDatabase } from "./database/connectDatabase" and add await connectDatabase() to your IIFE, just before the .login() method. Go ahead and run npm run build again.

A compiler error, indicating that: Argument of type string or undefined is not assignable to parameter of type string.

Oh no – an error!

Environment Variable Validation

The problem with environment variables is that they can all be undefined. This often happens if you make a typo in your environment variable name, or mix the name up with another name (a mistake I made when writing this tutorial, using TOKEN instead of BOT_TOKEN in some places).

TypeScript is warning you that the connect method takes a string, and that an undefined value will break things. You can fix this, but first you will want to write a function to handle validating your environment variables.

Within your src directory, create a utils directory to contain your utility functions. Add a validateEnv.ts file there.

Create a function in the file called validateEnv. This function will be synchronous and does not need the async keyword. Within that function, add conditions to check for your two environment variables. If either one is missing, return false. Otherwise, return true.

Your code might look something like this:

export const validateEnv = () => {
  if (!process.env.BOT_TOKEN) {
    console.warn("Missing Discord bot token.");
    return false;
  }

  if (!process.env.MONGO_URI) {
    console.warn("Missing MongoDB connection.");
    return false;
  }
  return true;
};

Head back to your index.ts file and import this validation function with import { validateEnv } from "./utils/validateEnv". Then at the beginning of your IIFE, use an if statement to return early if the function returns false. Your index.ts should look like:

import { Client } from "discord.js";
import { connectDatabase } from "./database/connectDatabase";
import { validateEnv } from "./utils/validateEnv";

(async () => {
  if (!validateEnv()) return;

  const BOT = new Client();

  BOT.on("ready", () => console.log("Connected to Discord!"));

  await connectDatabase();

  await BOT.login(process.env.BOT_TOKEN);
})();

If you try npm run build again, you will see the same error message as before. This is because while we know the environment variable exists, TypeScript still cannot infer it. The validation function is set up to exit the process if the environment variable is missing, so we are going to tell TypeScript that it is definitely a string.

Back in your connectDatabase.ts file, within the connect function use process.env.MONGO_URI as string to coerce the type into string. The error should go away, and you can now run npm run build and npm start.

You should see the messages you wrote for both the Discord and MongoDB connections print in your terminal.

The "interaction" Event

While you are making great progress on your bot, it still does not do anything. In order to receive commands, you will need to create another event listener.

Discord rolled out slash commands, featuring a new UI and a new gateway event. The interactionCreate event is triggered when someone uses a slash command with your bot. This is the event you will want to listen to. Because the logic is a bit more complicated than the ready event, you will want to create a separate file.

Within your src directory, create an events directory, and an onInteraction.ts file in there. Start by defining an exported function onInteraction. This should be an asynchronous function, with a single parameter called interaction.

export const onInteraction = async (interaction) => {

};

To provide a type definition for your parameter, import the Interaction type from discord.js.

import { Interaction } from "discord.js";

export const onInteraction = async (interaction: Interaction) => {

};

The interaction event actually triggers on any command interaction, which includes things like button clicks and select menus, as well as the slash commands we want.

Because you will only be writing slash commands for this bot, you can filter out any other interaction type and help TypeScript understand the data you are working with.

In your new function, add a condition to check interaction.isCommand(). You will be writing logic within this block later.

import { Interaction } from "discord.js";

export const onInteraction = async (interaction: Interaction) => {
  if (interaction.isCommand()) {
  }
};

Now, back in your index.ts file, you can mount another listener. Next to your .on("ready") listener, add a BOT.on("interactionCreate") listener. For this event, the callback takes an interaction argument which you can pass to your new onInteraction function.

  BOT.on(
    "interactionCreate",
    async (interaction) => await onInteraction(interaction)
  );

Great! You can run npm run build to confirm that TypeScript doesn't throw any errors, but without actual commands to use you can't quite test this code yet.

Prepare for Commands

I maintain a few Discord bots, and one thing I've discovered that helps keep code maintainable and readable is making the components modular.

Define an Interface

You will first need to define a common structure for your commands. Create an interfaces folder in src. Then inside interfaces create a file called Command.ts.

Now you are going to create an interface. In TypeScript, an interface is often used to define the structure of an object, and is one of many tools available for declaring a variable's type.

In your Command.ts file, create an exported interface called Command:

export interface Command {

}

Your interface will have two properties – data, which will hold the command data to send to Discord, and run, which will hold the callback function and command logic.

For the data property, import SlashCommandBuilder and SlashCommandSubcommandsOnlyBuilder from @discordjs/builders. Define the data property as either one of those two types.

For the run property, import the CommandInteraction type from discord.js. Define run as a function which takes a CommandInteraction typed parameter and returns a void Promise.

import {
  SlashCommandBuilder,
  SlashCommandSubcommandsOnlyBuilder,
} from "@discordjs/builders";
import { CommandInteraction } from "discord.js";

export interface CommandInt {
  data: SlashCommandBuilder | SlashCommandSubcommandsOnlyBuilder;
  run: (interaction: CommandInteraction) => Promise<void>;
}

Create a Command List

Next you need a place to store all of your commands. Create a folder called commands in the src directory, and add a file called _CommandList.ts. The underscore here will keep this file at the top of the list.

The _CommandList.ts file will need two lines. First, import your Command interface, then declare a CommandList array. The array will be empty for now, but give it a Command[] type so TypeScript knows it will eventually hold your command objects. The file should look like:

import { Command } from "../interfaces/Command";

export const CommandList: Command[] = [];

The purpose of this file is to create an array of your bot's commands which you will iterate over in the interaction event listener. There are ways to automate this, but they tend to be unnecessarily complex for smaller bots.

Check for Commands

Back in your onInteraction.ts file, you should start working on the logic for finding and running a command.

In your interaction.isCommand() condition block, loop through the CommandList array (remember to import it!) with a for...of loop.

for (const Command of CommandList) {

}

The interaction payload received from Discord includes a commandName property, which you can use to find the command that a user has selected. To check this, compare interaction.commandName with the Command.data.name property.

if (interaction.commandName === Command.data.name) {

}

Now, if you have found the command the user has chosen, you need to run the logic for that command. This is achieved with a Command.run(interaction) call – passing the interaction payload into the command.

Your final file should look like this:

import { Interaction } from "discord.js";
import { CommandList } from "../commands/_CommandList";

export const onInteraction = async (interaction: Interaction) => {
  if (interaction.isCommand()) {
    for (const Command of CommandList) {
      if (interaction.commandName === Command.data.name) {
        await Command.run(interaction);
        break;
      }
    }
  }
};

Database Model

There's one more step before you are ready to start writing commands. This bot will track your community members' 100 Days of Code progress. And you need to store that progress in the database.

mongoose helps structure your MongoDB records to prevent you from passing malformed or incomplete data into your database.

Start by creating a models folder in your database directory. In that models folder, create a CamperModel.ts file. This will be your structure for the user objects.

You first need to import the necessary values from the mongoose library. Add import { Document, model, Schema } from "mongoose"; at the top of the file.

Because you are using TypeScript, you need to create a type definition for your database objects. Create another interface, like you did for your commands, named CamperInt.

export interface CamperInt extends Document {

}

Your database model will have four properties. Add these to your interface:

• discordId: string; – Every user object in Discord has a unique identifier, called a Snowflake, which is used to distinguish them from other users. Unlike a username or discriminator (the four digit number after the username), the id value cannot be changed. This makes it the ideal value for linking your stored data to a Discord user.
• round: number; – This will represent the "round" the user is on in the challenge. When someone completes 100 days of the challenge, they may choose to undertake the challenge again. When they do, they often refer to it as "round 2", for example.
• day: number; – This represents the day the user is on in the challenge.
• timestamp: number; – You will use this value to track when the user last submitted a 100 Days of Code post.

Great! Now you need to define the Schema for your database entries. mongoose uses a Schema object to define the shape of the documents that go in to your database collection. The Schema import has a constructor, which you will assign to a variable.

export const Camper = new Schema();

This constructor takes an object as its argument, and that object defines the database keys and types. Go ahead and pass in an object similar to what your interface looks like.

export const Camper = new Schema({
    discordId: String,
    round: Number,
    day: Number,
    timestamp: Number,
})

Next you need to create the model. In mongoose, the model object serves to create, read, and update your documents in the MongoDB database. Add export default model(); at the bottom of your file.

The model function takes a few parameters. The first is a string, and is the name to use for the documents in your database. For this collection, use "camper". The second argument is the schema to use for the data – use your Camper schema there.

By default, mongoose will use the plural version of your model name for the collection. In our case, that would be "campers". If you want to change that, you can pass in a third argument of { collection: "name" } to set the collection to name.

If you were using JavaScript, this would be enough to get your database model set up. However, because you are using TypeScript, you should take advantage of the type safety. model() by default returns a Document type of any.

To resolve this, you can pass a generic type into the model function. Generic types serve as variables for type definitions, in a sense. You need to set the generic type for your model to use your interface. Add the generic type by changing model to model<CamperInt>.

Just one more step here. Your CamperInt interface only defines the properties you set in the MongoDB document, but doesn't include the standard properties.

Change your export interface CamperInt to export interface CamperInt extends Document. This tells TypeScript that your type definition is an extension of the existing Document type definition – you are essentially adding properties to that structure.

Your final file should look like this:

import { Document, model, Schema } from "mongoose";

export interface CamperInt {
  discordId: string;
  round: number;
  day: number;
  timestamp: number;
}

export const Camper = new Schema({
  discordId: String,
  round: Number,
  day: Number,
  timestamp: Number,
});

export default model<CamperInt>("camper", Camper);

As a safety check, use npm run build again. You should not see any errors in the terminal.

Write Bot Commands

You are finally ready to start writing some commands! As this is a 100 Days of Code bot, you should start with the command for creating a 100 Days of Code update.

100 Command

Within your commands folder, create a oneHundred.ts file. This will hold your 100 Days of Code command. Import your command interface with import { Command } from "../interfaces/Command;.

Now declare an exported variable oneHundred and give it the Command type:

import { Command } from "../interfaces/Command";

export const oneHundred: Command = {

};

First, create the data property. You will be using the @discordjs/builders package to build a slash command.

Start by importing the SlashCommandBuilder() from the @discordjs/builders package. Then, construct a new instance in the data property with new SlashCommandBuilder(). You're going to chain some methods here to pass the information you want into the builder.

The .setName() method allows you to set the name of your slash command. Set the name to "100". The setDescription() option allows you to display a description of the command in Discord's UI. Set the description to "Check in for the 100 Days of Code challenge.".

Slash commands can also accept option values. These are used to take arguments from the user, and come in various types. For this command, you'll want a string option with the addStringOption() method. Option methods take a callback function, with an option parameter.

You can then chain methods on the option parameter to configure the information for the argument. Use the .setName() method to give the option a name of "message", and the .setDescription() method to give it a description of "The message to go in your 100 Days of Code update.". Finally, use the .setRequired() method to set the option to be required.

Here's what you should have now:

import { SlashCommandBuilder } from "@discordjs/builders";
import { Command } from "../interfaces/Command";

export const oneHundred: Command = {
  data: new SlashCommandBuilder()
    .setName("100")
    .setDescription("Check in for the 100 Days of Code challenge.")
    .addStringOption((option) =>
      option
        .setName("message")
        .setDescription("The message to go in your 100 Days of Code update.")
        .setRequired(true)
    ),
};

If you are coding in an IDE with Intellisense enabled, you may have noticed that this will throw a type error on the data property. This is because the SlashCommandBuilder actually returns an Omit type! An Omit type is used to tell TypeScript that the type is almost the same as another type, but with specific properties removed.

Head over to your interfaces/Command.ts file to update the type. Replace the SlashCommandBuilder type with Omit<SlashCommandBuilder, "addSubcommandGroup" | "addSubcommand">. This will tell TypeScript that data should be a SlashCommandBuilder, but without those two specific properties.

import {
  SlashCommandBuilder,
  SlashCommandSubcommandsOnlyBuilder,
} from "@discordjs/builders";
import { CommandInteraction } from "discord.js";

export interface Command {
  data:
    | Omit<SlashCommandBuilder, "addSubcommandGroup" | "addSubcommand">
    | SlashCommandSubcommandsOnlyBuilder;
  run: (interaction: CommandInteraction) => Promise<void>;
}

Great! Now that your type error is resolved, head back over to your oneHundred.ts command file – it is time to write the command logic.

All of your bot's logic for responding to the command will go in the run property. As you did in your interface, start by creating an async function which takes an interaction argument. Then, let the first line of your function be await interaction.deferReply();.

Discord expects a bot to respond to a command within three seconds. Because this command may take longer to process, using the .deferReply() method sends an acknowledgement response that gives you a full 15 minutes to send the actual response.

Next, you need to extract some data from the command. First, destructure the user object out of the interaction payload with const { user } = interaction;. The user object represents the Discord user that called the command.

Then get the message option you sent with const text = interaction.options.getString("message", true);. With this line, you are accessing the options property of the interaction. The .getString() method specifically grabs a string option (remember that you created the option in data), and "message" is the name of the option. The true argument indicates that this is a required option, so TypeScript won't consider it nullable.

Your file should look like this:

import { SlashCommandBuilder } from "@discordjs/builders";
import { Command } from "../interfaces/Command";

export const oneHundred: Command = {
  data: new SlashCommandBuilder()
    .setName("100")
    .setDescription("Check in for the 100 Days of Code challenge.")
    .addStringOption((option) =>
      option
        .setName("message")
        .setDescription("The message to go in your 100 Days of Code update.")
        .setRequired(true)
    ),
  run: async (interaction) => {
    await interaction.deferReply();
    const { user } = interaction;
    const text = interaction.options.getString("message", true);
  },
};

The next step in this command would be to fetch data from your database. Because many of your commands will need to do this, you should create a module for it.

Handling the Database Logic

Create a src/modules directory, and add a getCamperData.ts file within. Create an exported async function named getCamperData, and give it a string parameter named id. Then, within the function, you can query the database.

Import your CamperModel from the database directory, and use the findOne() method to query by the camper's id: const camperData = await CamperModel.findOne({ discordId: id });.

import CamperModel from "../database/models/CamperModel";

export const getCamperData = async (id: string) => {
  const camperData = await CamperModel.findOne({ id });
};

We still have one more step here. If the camper has not used the bot before, they won't have an existing database record. findOne() would return null in this case – so you can add a fallback value.

import CamperModel from "../database/models/CamperModel";

export const getCamperData = async (id: string) => {
  const camperData =
    (await CamperModel.findOne({ discordId: id })) ||
    (await CamperModel.create({
      discordId: id,
      round: 1,
      day: 0,
      date: Date.now(),
    }));
};

Finally, you need to return your data. Add return camperData at the end of the function. For extra type safety, define the return type of your function as Promise<CamperData>.

import CamperModel, { CamperInt } from "../database/models/CamperModel";

export const getCamperData = async (id: string): Promise<CamperInt> => {
  const camperData =
    (await CamperModel.findOne({ discordId: id })) ||
    (await CamperModel.create({
      discordId: id,
      round: 1,
      day: 0,
      date: Date.now(),
    }));
  return camperData;
};

You now have a way to get camper data from the database, but you need a way to update it as well. Create another file in your /src/modules directory called updateCamperData.ts. This will handle the logic to increment a camper's progress.

Start with an exported async function called updateCamperData. It should take a Camper parameter, which would be the data you fetch from MongoDB.

import { CamperInt } from "../database/models/CamperModel";

export const updateCamperData = async (Camper: CamperInt) => {

};

The only time you will update data is within the /100 command – where you'll want to increment the camper's day count, check if they have started a new round, and update the timestamp.

First, increment the day count with Camper.day++;. With the way the 100 Days of Code challenge works, if a camper has passed day 100 then they have started a new "round". You'll need a condition to check if Camper.day > 100, and if so, reset the day to 1 and increment the round.

After that condition, update the timestamp with Camper.timestamp = Date.now(); and save the data with await Camper.save();. Finally, return the modified data object so you can use it in the command.

Your final file should look like:

import { CamperInt } from "../database/models/CamperModel";

export const updateCamperData = async (Camper: CamperInt) => {
  Camper.day++;
  if (Camper.day > 100) {
    Camper.day = 1;
    Camper.round++;
  }
  Camper.timestamp = Date.now();
  await Camper.save();
  return Camper;
};

100 Command Continued

Now that your database logic is ready, return to your oneHundred.ts file. As a reminder, that file should look like this:

import { SlashCommandBuilder } from "@discordjs/builders";
import { Command } from "../interfaces/Command";

export const oneHundred: Command = {
  data: new SlashCommandBuilder()
    .setName("100")
    .setDescription("Check in for the 100 Days of Code challenge.")
    .addStringOption((option) =>
      option
        .setName("message")
        .setDescription("The message to go in your 100 Days of Code update.")
        .setRequired(true)
    ),
  run: async (interaction) => {
    await interaction.deferReply();
    const { user } = interaction;
    const text = interaction.options.getString("message", true);
  },
};

Import your two new modules at the top of the file. Then, after your logic that extracts the values from the interaction object, fetch the camper's data from the database with const targetCamper = await getCamperData(user.id);. Update the data with const updatedCamper = await updateCamperData(targetCamper);.

import { SlashCommandBuilder } from "@discordjs/builders";
import { Command } from "../interfaces/Command";
import { getCamperData } from "../modules/getCamperData";
import { updateCamperData } from "../modules/updateCamperData";

export const oneHundred: Command = {
  data: new SlashCommandBuilder()
    .setName("100")
    .setDescription("Check in for the 100 Days of Code challenge.")
    .addStringOption((option) =>
      option
        .setName("message")
        .setDescription("The message to go in your 100 Days of Code update.")
        .setRequired(true)
    ),
  run: async (interaction) => {
    await interaction.deferReply();
    const { user } = interaction;
    const text = interaction.options.getString("message", true);

    const targetCamper = await getCamperData(user.id);
    const updatedCamper = await updateCamperData(targetCamper);
  },
};

Now you need to construct the response to send back to the camper when they use the command.

For this, you'll be using Discord's message embed feature. Start by importing the MessageEmbed constructor from discord.js, and creating a new embed with const oneHundredEmbed = new MessageEmbed();. The MessageEmbed class has a few methods to use for building the content of the embed.

Use the .setTitle() method to set the title of the embed to "100 Days of Code".

Use the .setDescription() method to set the description of the embed to the message the camper provided in the command (remember that you extracted this to the text variable earlier). The author of the embed can be set, and will display at the top of the embed.

Use the .setAuthor() method to pass an object with a name property set to user.tag (which will display the camper's username and discriminator, like nhcarrigan#0001), and an iconURL property set to user.displayAvatarUrl() (which will attach the camper's avatar to the embed).

Embeds also accept fields, which are smaller blocks of text that have their own title and description. The .addField() method takes two or three arguments, the first being the field title, the second being the field description, and the third being an optional boolean to set the field as inline.

Use the .addField() method to add two fields. The first should have the title set to "Round" and the description set to updatedCamper.round.toString(). The second should have the title set to "Day" and the description set to updatedCamper.day.toString(). Both fields should be inline.

For the last part of your embed, use the .setFooter() method to add small footer text. Pass an object with a text property set to "Day completed: " + new Date(updatedCamer.timestamp).toLocaleDateString() to show the time the camper reported their progress.

Finally, you need to send this new embed back to the camper. Because you have already sent a response with the interaction.deferReply() call, you cannot send another response. Instead, you need to edit the one you sent.

Use await interaction.editReply() to edit the response. The .editReply() method takes an object with various properties – in this case, you are sending an embed. Pass an object with an embeds property set to [oneHundredEmbed].

Note that this is an array containing your embed. Discord messages can contain up to 10 embeds, and the API expects an array of embed objects to match.

Your final command file should look like this:

import { SlashCommandBuilder } from "@discordjs/builders";
import { MessageEmbed } from "discord.js";
import { Command } from "../interfaces/Command";
import { getCamperData } from "../modules/getCamperData";
import { updateCamperData } from "../modules/updateCamperData";

export const oneHundred: Command = {
  data: new SlashCommandBuilder()
    .setName("100")
    .setDescription("Check in for the 100 Days of Code challenge.")
    .addStringOption((option) =>
      option
        .setName("message")
        .setDescription("The message to go in your 100 Days of Code update.")
        .setRequired(true)
    ),
  run: async (interaction) => {
    await interaction.deferReply();
    const { user } = interaction;
    const text = interaction.options.getString("message", true);

    const targetCamper = await getCamperData(user.id);
    const updatedCamper = await updateCamperData(targetCamper);

    const oneHundredEmbed = new MessageEmbed();
    oneHundredEmbed.setTitle("100 Days of Code");
    oneHundredEmbed.setDescription(text);
    oneHundredEmbed.setAuthor({
      name: user.tag,
      iconURL: user.displayAvatarURL(),
    });
    oneHundredEmbed.addField("Round", updatedCamper.round.toString(), true);
    oneHundredEmbed.addField("Day", updatedCamper.day.toString(), true);
    oneHundredEmbed.setFooter({
      text:
        "Day completed: " +
        new Date(updatedCamper.timestamp).toLocaleDateString(),
    });

    await interaction.editReply({ embeds: [oneHundredEmbed] });
  },
};

Registering Commands

If you run npm run build and npm start, everything starts up – but you have no way to actually use your new command. This is because Discord requires that commands be registered so they are made available in the application UI. There are a few steps we'll need to take to do this.

First, head over to your _CommandList.ts file and import your oneHundred command. Add this to your CommandList array so it's available elsewhere.

import { Command } from "../interfaces/Command";
import { oneHundred } from "./oneHundred";

export const CommandList: Command[] = [oneHundred];

Now it is time to add the logic to send the command information to Discord. In your src/events directory, add an onReady.ts file. We'll be using this with the "ready" event.

Create an exported async function named onReady, and give it a single parameter called BOT. Import the Client type from discord.js and set the BOT typedef to Client.

import { Client } from "discord.js";

export const onReady = async (BOT: Client) => {};

Now import the REST module from @discordjs/rest. This will allow you to instantiate an API client, which you'll use to send the commands. Construct a new instance with const rest = new REST();.

There are a couple of things you'll need to configure with your REST client. First, pass an object into the REST() constructor with a version property set to "9". This tells the client to use version 9 of Discord's API, which is currently the latest version.

Then, chain a .setToken() call on the constructor to set the API token to process.env.BOT_TOKEN – you'll have to coerce this to a string.

import { REST } from "@discordjs/rest";
import { Client } from "discord.js";

export const onReady = async (BOT: Client) => {
  const rest = new REST({ version: "9" }).setToken(
    process.env.BOT_TOKEN as string
  );
};

The API expects command data to be sent in a specific JSON format, but thankfully the slash command builder we are using has a method just for that. Import your CommandList, then create a new array and map your command data.

const commandData = CommandList.map((command) => command.data.toJSON());

Before you send the commands to Discord, it's important to note that there are two types of commands. "Global Commands" are available everywhere your bot is used, but take about an hour to update. "Guild Commands" are available only in a single server, but update immediately. Because this bot is designed to run in a single server, we're going to use guild commands.

You'll need to get the ID of the server you are using the bot in. To do this, make sure you have enabled developer mode in your Discord application, then right click on your server icon and select "Copy ID". In your .env file, add a GUILD_ID variable and assign it the ID you copied. It should look something like GUILD_ID="778130114772598785".

Back in your onReady.ts file, start your API call with await rest.put(). Sending a PUT request will update any existing commands, where a POST will attempt to create new commands and error if commands share a name. Import Routes from discord-api-types/v9, and within the rest.put() call pass a Routes.applicationGuildCommands() call. This will be used to construct the API endpoint to send the commands to.

The applicationGuildCommands() call will take two arguments.

The first is the application ID to associate the commands with. You can get this from the BOT.user.id value – but user is potentially undefined, so you'll need to optionally chain it. Use BOT.user?.id || "missing id" to add a fallback value that will error out – this will allow us to know if the bot's ID is missing.

The second argument is the server ID, which you set up as process.env.GUILD_ID (remember to coerce the type!).

The .put() call needs a second argument as well, which is the data you want to send. Pass this as { body: commandData } to match the expected format.

Finally, add a console.log("Discord ready!") at the end of the file to indicate your bot is online.

import { REST } from "@discordjs/rest";
import { Routes } from "discord-api-types/v9";
import { Client } from "discord.js";
import { CommandList } from "../commands/_CommandList";

export const onReady = async (BOT: Client) => {
  const rest = new REST({ version: "9" }).setToken(
    process.env.BOT_TOKEN as string
  );

  const commandData = CommandList.map((command) => command.data.toJSON());

  await rest.put(
    Routes.applicationGuildCommands(
      BOT.user?.id || "missing id",
      process.env.GUILD_ID as string
    ),
    { body: commandData }
  );

  console.log("Discord ready!");
};

Switch to your index.ts file and locate your "ready" event listener. Replace the console.log call with your new onReady function – remember to import it, and make the callback asynchronous.

import { Client } from "discord.js";
import { IntentOptions } from "./config/IntentOptions";
import { connectDatabase } from "./database/connectDatabase";
import { onInteraction } from "./events/onInteraction";
import { onReady } from "./events/onReady";
import { validateEnv } from "./utils/validateEnv";

(async () => {
  if (!validateEnv()) return;
  const BOT = new Client({ intents: IntentOptions });

  BOT.on("ready", async () => await onReady(BOT));

  BOT.on(
    "interactionCreate",
    async (interaction) => await onInteraction(interaction)
  );

  await connectDatabase();

  await BOT.login(process.env.BOT_TOKEN);
})();

Now run npm run build and npm start, and head to your server in Discord. If you type / you should see your new /100 command show up. Try using the command and checking the response.

If you see this response, then you've successfully created your first command!

Congratulations! You have your first successful command. With all of the infrastructure you've built, adding additional commands will be much smoother. Let's go ahead and do that now.

Edit Command

What happens if a camper makes a typo in their /100 message? Because the bot sends the response, the camper cannot edit it (Discord does not allow you to edit messages you did not send). You should create a command that will allow a camper to do this.

Create an edit.ts file in your src/commands directory. Like you did with the /100 command, import your SlashCommandBuilder and Command interface, and export an edit object with the Command type.

Use the SlashCommandBuilder to prepare the data property. Give the command the name edit and the description Edit a previous 100 days of code post., then add two string options. The first string option should have a name embed-id and a description of ID of the message to edit., and the second should have a name of message and a description of The message to go in your 100 Days of Code update.. Both options should be required.

Your code should look like this:

import { SlashCommandBuilder } from "@discordjs/builders";
import { Command } from "../interfaces/Command";

export const edit: Command = {
    data: new SlashCommandBuilder()
    .setName("edit")
    .setDescription("Edit a previous 100 days of code post.")
    .addStringOption((option) =>
      option
        .setName("embed-id")
        .setDescription("ID of the message to edit.")
        .setRequired(true)
    )
    .addStringOption((option) =>
      option
        .setName("message")
        .setDescription("The message to go in your 100 Days of Code update.")
        .setRequired(true)
    ),
}

Create your run property with an async function and an interaction parameter. Destructure the channel and user from the interaction, and grab the embed-id and message options. Don't forget to defer the response!

    run: async (interaction) => {
        await interaction.deferReply();
        const { channel, user } = interaction;
        const targetId = interaction.options.getString("embed-id", true);
        const text = interaction.options.getString("message", true);
    }

The channel property is nullable (in cases where an interaction is sent via a DM, for example), so you'll want to check that it exists. If it does not, respond with a message that the command is missing parameters.

    if (!channel) {
      await interaction.editReply({
        content: "Missing channel parameter.",
      });
      return;
    }

Now that you know the channel exists, you can fetch the message that the camper wants to edit based on the ID they provided. Use channel.messages.fetch() to do this, passing in the targetId as the argument.

Because it is possible that the target message does not exist, you need to account for that in your code. Add a condition that checks for this, and if the message is not found respond with an explanation.

    const targetMessage = await channel.messages.fetch(targetId);

    if (!targetMessage) {
      await interaction.editReply({
        content:
          "That does not appear to be a valid message ID. Be sure that you are using this command in the same channel as the message.",
      });
      return;
    }

The last thing you need to check is that the message the camper is editing actually belongs to them. You can access the embed with the .embeds property – much like how you sent it, the property is returned as an array of embed objects.

Grab the first embed from the array, and then check that the embed author matches the user's tag. If not, let them know they cannot edit this post.

    const targetEmbed = targetMessage.embeds[0];

    if (targetEmbed.author?.name !== user.tag) {
        await interaction.editReply({
            content: "This does not appear to be your 100 Days of Code post. You cannot edit it."
        })
    }

Now that you have confirmed everything is correct, you can use .setDescription() on the embed to update the text. Then, edit the message with the new embed, and respond to the interaction with a confirmation.

Your full code should look like this:

import { SlashCommandBuilder } from "@discordjs/builders";
import { Command } from "../interfaces/Command";

export const edit: Command = {
  data: new SlashCommandBuilder()
    .setName("edit")
    .setDescription("Edit a previous 100 days of code post.")
    .addStringOption((option) =>
      option
        .setName("embed-id")
        .setDescription("ID of the message to edit.")
        .setRequired(true)
    )
    .addStringOption((option) =>
      option
        .setName("message")
        .setDescription("The message to go in your 100 Days of Code update.")
        .setRequired(true)
    ),
  run: async (interaction) => {
    await interaction.deferReply();
    const { channel, user } = interaction;
    const targetId = interaction.options.getString("embed-id", true);
    const text = interaction.options.getString("message", true);

    if (!channel) {
      await interaction.editReply({
        content: "Missing channel parameter.",
      });
      return;
    }

    const targetMessage = await channel.messages.fetch(targetId);

    if (!targetMessage) {
      await interaction.editReply({
        content:
          "That does not appear to be a valid message ID. Be sure that you are using this command in the same channel as the message.",
      });
      return;
    }

    const targetEmbed = targetMessage.embeds[0];

    if (targetEmbed.author?.name !== user.tag) {
      await interaction.editReply({
        content:
          "This does not appear to be your 100 Days of Code post. You cannot edit it.",
      });
    }

    targetEmbed.setDescription(text);
    await targetMessage.edit({ embeds: [targetEmbed] });
    await interaction.editReply({ content: "Updated!" });
  },
};

Add your new edit command to your CommandList array, then build and run your bot and you should see the new command. Try editing the embed you sent earlier.

You should see your embed update, and a confirmation from the bot!

View Command

Campers should have a way to view their current progress, so we'll need to create a command to do so. By now, you should be comfortable with the command structure – we encourage you to follow these instructions but attempt to write the code without looking at the final result.

Create a view.ts file in your commands directory, and set up your command variable. Create the data property with a command that has the name view and the description Shows your latest 100 days of code check in. This command does not need any options.

Set up your async function in the run property, and defer the interaction response. Extract the user object from the interaction. Use your getCamperData module to fetch the camper's data from the database. Then, check if the data's day property has a non-zero value. If it does not, let the camper know that they have not started the 100 Days of Code challenge, and can do so with the /100 command.

Create an embed with a title set to My 100DoC Progress. Set the description to Here is my 100 Days of Code progress. I last reported an update on: and add the camper's timestamp. Add a Round and Day field, and set the author for the embed. Then send the embed in the interaction response.

Remember to add your new command to the CommandList, then try building and starting your bot. You should see the command available, and be able to get a response from it.

If you did not get the response, here is what your code should look like.

import { SlashCommandBuilder } from "@discordjs/builders";
import { MessageEmbed } from "discord.js";
import { Command } from "../interfaces/Command";
import { getCamperData } from "../modules/getCamperData";

export const view: Command = {
  data: new SlashCommandBuilder()
    .setName("view")
    .setDescription("Shows your latest 100 Days of Code check in."),
  run: async (interaction) => {
    await interaction.deferReply();
    const { user } = interaction;
    const targetCamper = await getCamperData(user.id);

    if (!targetCamper.day) {
      await interaction.editReply({
        content:
          "It looks like you have not started the 100 Days of Code challenge yet. Use `/100` and add your message to report your first day!",
      });
      return;
    }

    const camperEmbed = new MessageEmbed();
    camperEmbed.setTitle("My 100DoC Progress");
    camperEmbed.setDescription(
      `Here is my 100 Days of Code progress. I last reported an update on ${new Date(
        targetCamper.timestamp
      ).toLocaleDateString()}.`
    );
    camperEmbed.addField("Round", targetCamper.round.toString(), true);
    camperEmbed.addField("Day", targetCamper.day.toString(), true);
    camperEmbed.setAuthor({
      name: user.tag,
      iconURL: user.displayAvatarURL(),
    });

    await interaction.editReply({ embeds: [camperEmbed] });
  },
};

Help Command

The last thing you need to build is a help command, which will explain how campers can interact with the bot.

Create your help.ts file in the command directory, and create your data property. Give the command the name help and the description Provides information on using this bot.

Set up your run property with the async function, and remember to defer the reply. Create an embed, and use the description and fields to provide the information you would like to share with your campers. Send the embed in the interaction response.

Load your new help command into the CommandList, and build + start your bot to test it. You should see a response with the embed you created.

Your embed might look different, depending on what information you chose to share. Here's the code that we used for the above embed:

import { SlashCommandBuilder } from "@discordjs/builders";
import { MessageEmbed } from "discord.js";
import { Command } from "../interfaces/Command";

export const help: Command = {
  data: new SlashCommandBuilder()
    .setName("help")
    .setDescription("Provides information on using this bot."),
  run: async (interaction) => {
    await interaction.deferReply();
    const helpEmbed = new MessageEmbed();
    helpEmbed.setTitle("100 Days of Code Bot!");
    helpEmbed.setDescription(
      "This discord bot is designed to help you track and share your 100 Days of Code progress."
    );
    helpEmbed.addField(
      "Create today's update",
      "Use the `/100` command to create your update for today. The `message` will be displayed in your embed."
    );
    helpEmbed.addField(
      "Edit today's update",
      "Do you see a typo in your embed? Right click it and copy the ID (you may need developer mode on for this), and use the `/edit` command to update that embed with a new message."
    );
    helpEmbed.addField(
      "Show your progress",
      "To see your current progress in the challenge, and the day you last checked in, use `/view`."
    );
    helpEmbed.setFooter({ text: `Version ${process.env.npm_package_version}` });
    await interaction.editReply({ embeds: [helpEmbed] });
    return;
  },
};

Conclusion

Congratulations! You have successfully built a Discord bot for the 100 Days of Code challenge.

If you are interested in exploring further, you can view the source code for the live bot that inspired this tutorial, which includes custom error logging, external error reporting, and a documentation site.

There will be a lot of other people doing this challenge alongside you, ready to cheer you on. And you may be able to complete all of this before summer.

Here is what you will need:

1. A Mac, Windows, or Linux computer
2. A twitter account (you can create one in about 5 minutes)
3. VS Code (you can install it in about 5 minutes)
4. A Hashnode developer blog (I'll show you how to create one.)
5. At least 30 minutes per day to do the #100DaysOfCode challenge

I've structured this challenge to be manageable, but gradually increase in involvement. By accepting this challenge, you agree to at least give the first step a try. After that, if you're not feeling it, it's perfectly fine to abandon this New Year's Resolution challenge.

Here are the 4 steps to the challenge.

Step #1: Max out your stats in Learn ToCode RPG (takes about 3 hours)

A lot of people aren't sure whether they want to become developers. It's a lot of work. So we created this video game that simulates the process of learning to code and applying for developer jobs.

One cool aspect of the game: you learn and apply real programming and computer science concepts.

The game currently has 6 different endings and 55 Easter eggs, and I encourage you to catch 'em all. But for the purpose of this challenge, you just need to max-out your skills.

A screenshot of Learn to Code RPG's stats view. Max these out by playing the game and answering quiz questions.

Here's more information about Learn to Code RPG and how to install it.

Step #2: Start #100DaysOfCode (takes about 30 minutes each day for 100 days)

If you enjoyed Learn To Code RPG and are ready to dig deeper into learning coding, you can take the popular #100DaysOfCode challenge.

The rules are simple:

1. Code at least a little bit each day
2. Tweet your status (what you did) using the #100DaysOfCode hashtag
3. Encourage at least 2 other people who have also tweeted out their #100DaysOfCode status by commenting on it.

This is a popular challenge that thousands of people have done over the past 6 years. I wrote an entire history of the #100DaysOfCode challenge if you're curious.

While you are doing #100DaysOfCode, you can proceed to steps 3 and 4.

Step #3: Complete the freeCodeCamp Relational Database Certification

The freeCodeCamp Relational Database Certification running inside VS Code

This is a new 300-hour curriculum we published in 2021 (though it may take you less than that if you have some Linux / SQL experience).

It will teach you:

• Linux
• Bash
• SQL
• Git
• ... and a lot of other command line tools

Along the way, you'll build a dozen different projects – all interactively, inside the popular VS Code editor.

Here is more information about how to install the freeCodeCamp Relational Database Curriculum on your Mac, Windows PC, or Linux computer.

Step #4: Publish 3 tutorials on your Hashnode blog

A screenshot from my own Hashnode blog

Hashnode is a powerful blogging tool where you can publish articles on your own personal domain, but still get some discovery within their community. They make it easy to set up a blog.

As you learn about programming and technology, I encourage you to turn around and write about it. This will not only help other people who are learning alongside you – it will help you reinforce your own learning. As the saying goes, "To teach is to learn twice."

Here's how to set up your Hashnode developer blog.

So for the final step in this challenge, you should write 3 short tutorials about programming concepts you've learned along the way.

And if you decide you want to reach an even wider audience, you can consider applying to become an author on freeCodeCamp's publication, which gets about a quarter-million readers each day. Here's the freeCodeCamp publication style guide if you decide to apply.

That's it. One video game, one certification, and 3 blog posts.

If this sounds like a reasonable challenge for your 2022 New Year's Resolution, I encourage you to go for it. Here's how you can accept the challenge: create a Twitter account if you don't have one yet and quote-retweet this tweet with the words "I'm in."

I will add you to this Twitter List and you'll be able to follow it and see what everyone else is doing, and how they're progressing.

And if you make it all the way through, let me know. I will add you to the 2022 Become-a-Dev Challenge Hall of Fame below. ☺️ Good luck!

The 2022 Become-a-Dev Challenge Hall of Fame

• Nobody yet ☺️

By popular demand, we recently built a Discord bot that helps people track their progress in the challenge.

Today I am going to show you how to build your own 100 Days of Code bot.

How to Create a Discord Bot Application

Your first step is to set up a Discord bot application. Head over to the Discord Developer Portal, sign in if needed, and select "Applications" from the sidebar.

Screenshot of the Developer Portal. If this is your first bot, you will not have any applications here.

Click the "New Application" button. Give it a name, and set it as a "Personal" application. You will now be taken to the application's settings. Here you can change the name, or give it an avatar.

Select "Bot" from the side bar, then click the "Add Bot" button. This will create a Discord Bot account for your application.

Screenshot of the Bot settings page. If you did not set an avatar, you will see a default based on your bot's name.

This is the screen where you will get the bot token. It is very important to keep this token secret, as the token allows your code to connect to your bot. Keep it safe and do not share it with anyone.

Now you need to add the bot to a server to interact with it. Click the "OAuth2" option on the side bar. You should see a form under the "OAuth2 URL Generator" section. Leave the "Select Redirect URL" dropdown blank, and check the box for the "bot" scope.

An option to select permissions will appear. Check the boxes for the following permissions:

• Send Messages
• Manage Messages
• Embed Links
• Read Message History
• View Channels

Above that section, you should see a URL generated. Click the "Copy" button to copy it, then paste it into your browser and go.

This will take you through Discord's process to add your new bot to a server. Note that you must have the Manage Server permission in the server you want to add the bot to. If you do not have this permission in any servers, you can create a server to test your bot in.

Screenshot of the OAuth screen with the correct settings marked.

Now you are ready to write some code!

How to Set Up Your Project

You need to set up the infrastructure and tooling for your project.

Prepare the package.json

Create a directory, or folder, for your project. Open your terminal pointing to that new folder. Run the command npm init to set up your package.json file. For this tutorial, the default values are sufficient, but feel free to edit them as you wish.

You should end up with a package.json similar to this:

{
  "name": "tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now you need to make a couple of changes to get ready for the TypeScript implementation.

First, replace the main value of index.js with ./prod/index.js – you will be setting your TypeScript to compile to a prod directory.

Then, remove the test script and add the following two scripts:

"build": "tsc",
"start": "node -r dotenv/config ./prod/index.js"

The build script will compile your TypeScript into JavaScript so node can run it, and the start script will run the index.js entrypoint file.

Adding the -r dotenv/config here will dynamically import and run the config method in the dotenv package, which loads your environment variables from the .env file.

Speaking of packages, your next step is to install dependencies. Using npm install, install these dependencies:

• discord.js – this is the library that will handle connecting to the gateway and managing the Discord API calls.
• dotenv – a package that loads .env values into the node process.
• mongoose – A wrapper for the MongoDB connection which offers tools for structuring your data.

Finally, install the development dependencies with npm install --save-dev. Development dependencies are packages that are required for working on your project in a development environment, but not required for running the codebase in production.

• typescript – This is the package for the TypeScript language, which includes everything needed to write code in TypeScript and compile it into JavaScript.
• @types/node – TypeScript relies on type definitions to help understand the code you write. This package defines the types for the Node.js runtime environment, such as the process.env object.

With these packages installed, you should now have a package.json similar to this:

{
  "name": "tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc",
    "start": "node -r dotenv/config ./prod/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "discord.js": "^12.5.3",
    "dotenv": "^10.0.0",
    "mongoose": "^5.12.14"
  },
  "devDependencies": {
    "@types/node": "^15.12.2",
    "typescript": "^4.3.4"
  }
}

Prepare TypeScript

TypeScript's compiler offers a number of different settings to maximize your control over the resulting JavaScript.

You can typically modify compiler settings through a tsconfig.json file at the root of your project. You can generate the default boilerplate for this file with npx tsc --init, use an existing one if you set one up in another project, or even write one from scratch.

Because the compiler settings can significantly change the behaviour of TypeScript, it is best to use the same settings when following this tutorial. Here are settings you should use:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "rootDir": "./src",
    "outDir": "./prod",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  }
}

The most important settings here are the rootDir and outDir settings. These tell the compiler that all of your code will be in the src directory, and the resulting JavaScript should go in the prod directory.

If you would like to test your settings, create a src directory and place an index.ts file inside. Write some code (such as a console.log statement) and run npm run build in your terminal. You should see a prod directory get created, with an index.js containing your compiled code.

Additional Setup Notes

If you are using git as a version control, you want to avoid pushing secrets and unnecessary code to your repository. Create a .gitignore file in your root project directory, and add the following content:

/node_modules/
/prod/
.env

The .gitignore file tells git not to track files/folders that match the patterns you enter. Ignoring the node modules folder keeps your repository from becoming bloated.

Pushing the compiled JavaScript is also unnecessary, as your project is typically compiled in production before runtime. .env files typically contain your secret values, such as API keys and tokens, so they should not be committed to a repository.

If you are using a UNIX based environment (such as Linux, or Git Bash on Windows), you can also add a prebuild script to your package.json. The prebuild script will automatically run before the build script when you use npm run build. I set mine to clean up the existing prod directory with rm -r ./prod.

How to Create the Discord Bot

Your next step is to prepare the initial bot connection. If you did not do so earlier, create a src directory and an index.ts file within.

Start with an anonymous immediately-invoked function expression (IIFE) to allow for top-level await use:

(async () => {

})();

Within this function you are going to instantiate your Discord bot. At the top of the file, import the Client class with import { Client } from "discord.js;". The Client class represents your Discord bot's session.

Inside your function, construct a new Client instance and assign it to a BOT variable with const BOT = new Client();. Now the BOT variable will represent your bot.

To connect your bot to Discord's gateway and begin receiving events, you will need to use the .login() method on your bot instance. The .login() method takes a single argument, which is the token for the bot application you created earlier.

Many of the methods in discord.js are asynchronous, so you will need to use await here. Add the line await BOT.login(process.env.BOT_TOKEN); to your IIFE.

The process.env object will contain the environment variables for your Node.js runtime environment. With the dotenv package, this will also include any variables you set in your .env secrets file.

Create that .env file in the root of your project, and add BOT_TOKEN="" as the first line. Between the quotes, paste the bot token from the bot page on the Discord Developer Portal.

Your index.ts file should now look like this:

import { Client } from "discord.js";

(async () => {
  const BOT = new Client();

  await BOT.login(process.env.BOT_TOKEN);
})();

Assuming you added your new bot to a server, if you run npm run build and npm start you should see your bot come online in the server. However, the bot will not respond to anything yet, because we have not started listening to events.

Gateway Events in Discord

Gateway "events" are generated when an action happens on Discord, and are typically sent to clients (including your bot) as JSON payloads. You can listen to those events with the .on() method, allowing you to write logic for your bot to follow when specific events occur.

The first event to listen to is the "ready" event. This event fires when your bot has connected to the gateway and is ready to process events. Above your .login() call, add BOT.on("ready", () => console.log("Connected to Discord!"));.

For your changes to take effect, use npm run build again to compile the new code. Now if you try npm run start, you should see "Connected to Discord!" print in your terminal.

How to Connect to the Database

You'll be using the mongoose package to connect to a MongoDB instance. If you prefer, you can run MongoDB locally, or you can use the MongoDB Atlas free tier for a cloud-based solution.

If you do not have a MongoDB Atlas account, freeCodeCamp has a great tutorial on setting one up.

Grab your connection string for your database and add it to your .env file as MONGO_URI="", with the connection string going between the quotes. For the database name, use oneHundredDays.

Create a directory called database to hold the files that contain your database logic. Within that directory, create a file called connectDatabase.ts. You will be writing your logic to initiate the database connection here.

Start with an exported function declaration:

export const connectDatabase = async () => {

}

mongoose offers a connect method for connecting to the database. Import it with import { connect } from "mongoose"; at the top of your file.

Then use the method inside your function with await connect(process.env.MONGO_URI);. Add a console.log statement after that so you can identify that your bot has connected to the database.

Your connectDatabase.ts file should now look something like this:

import { connect } from "mongoose";

export const connectDatabase = async () => {
    await connect(process.env.MONGO_URI);
    console.log("Database Connected!")
}

Now, within your index.ts file, import this function with import { connectDatabase } from "./database/connectDatabase" and add await connectDatabase() to your IIFE, just before the .login() method. Go ahead and run npm run build again.

A compiler error, indicating that: Argument of type string or undefined is not assignable to parameter of type string.

Oh no – an error!

Environment Variable Validation

The problem with environment variables is that they can all be undefined. This often happens if you make a typo in your environment variable name, or mix the name up with another name (a mistake I made when writing this tutorial, using TOKEN instead of BOT_TOKEN in some places).

TypeScript is warning you that the connect method takes a string, and that an undefined value will break things. You can fix this, but first you will want to write a function to handle validating your environment variables.

Within your src directory, create a utils directory to contain your utility functions. Add a validateEnv.ts file there.

Create a function in the file called validateEnv. This function will be synchronous and does not need the async keyword. Within that function, add conditions to check for your two environment variables. If either one is missing, return false. Otherwise, return true.

Your code might look something like this:

export const validateEnv = () => {
  if (!process.env.BOT_TOKEN) {
    console.warn("Missing Discord bot token.");
    return false;
  }

  if (!process.env.MONGO_URI) {
    console.warn("Missing MongoDB connection.");
    return false;
  }
  return true;
};

Head back to your index.ts file and import this validation function with import { validateEnv } from "./utils/validateEnv". Then at the beginning of your IIFE, use an if statement to return early if the function returns false. Your index.ts should look like:

import { Client } from "discord.js";
import { connectDatabase } from "./database/connectDatabase";
import { validateEnv } from "./utils/validateEnv";

(async () => {
  if (!validateEnv()) return;

  const BOT = new Client();

  BOT.on("ready", () => console.log("Connected to Discord!"));

  await connectDatabase();

  await BOT.login(process.env.BOT_TOKEN);
})();

If you try npm run build again, you will see the same error message as before. This is because while we know the environment variable exists, TypeScript still cannot infer it. The validation function is set up to exit the process if the environment variable is missing, so we are going to tell TypeScript that it is definitely a string.

Back in your connectDatabase.ts file, within the connect function use process.env.MONGO_URI as string to coerce the type into string. The error should go away, and you can now run npm run build and npm start.

You should see the messages you wrote for both the Discord and MongoDB connections print in your terminal.

The "message" Event

While you are making great progress on your bot, it still does not do anything. In order for the bot to respond to messages, you will need another event handler.

The logic in this one will be a bit more complicated, so you should create a separate module for it. Create an events folder in the src directory.

Within your events folder, create an onMessage.ts file. At the top, import the Message class from discord.js with import { Message } from "discord.js";. This class will serve as your type definition.

Then create an exported function called onMessage. The function should be asynchronous and take a message parameter with the Message type. Your function will look like this:

import { Message } from "discord.js";

export const onMessage = async (message: Message) => {

};

Before diving in to the logic for this function, you should attach it to the event listener. Back in your index.ts file, import your new function with import { onMessage } from "./events/onMessage";.

Next to your existing .on("ready") listener, add a BOT.on("message") listener. For the "message" event, the callback takes a message argument which you can pass to your new onMessage function:

BOT.on("message", async (message) => await onMessage(message));

We should test that this works. Head back to your onMessage.ts file. Inside your onMessage function, add console.log(message.content). The .content property on the Message class contains the text content sent in the message.

Use npm run build and npm start to get your bot running again, and then send "Hello" in a Discord channel the bot can see. You should see "Hello" print to your terminal.

How to Prepare for Commands

I maintain a few Discord bots, and one thing I've discovered that helps keep code maintainable and readable is making the components modular.

Define an Interface

You will first need to define a common structure for your commands. Create an interfaces folder in src. Then inside interfaces create a file CommandInt.ts.

Now you are going to create an interface. In TypeScript, an interface is often used to define the structure of an object, and is one of many tools available for declaring a variable's type.

In your CommandInt.ts file, import the Message class from Discord, then declare an interface called CommandInt with this syntax:

import { Message } from "discord.js";

export interface CommandInt {

}

Inside this interface, you are going to add three properties:

• name: string; – the name value will be your command's name. You will use this to trigger the command in the Discord server.
• description: string; – the description value explains what the command does. You will used this in one of the commands.
• run: (message: Message) => Promise<void> – this is the property that will hold the command's logic.

The run type definition is a bit tricky, so let's break it down. You have typed it as a function which takes one argument, message. That argument should be the Message type. You then set the function's return type to Promise<void>. This means your function will be asynchronous (this is important later) and does not return a value.

Create a Command List

Next you need a place to store all of your commands. Create a folder called commands in the src directory, and add a file called _CommandList.ts. The underscore here will keep this file at the top of the list.

The _CommandList.ts file will need two lines. First, import your CommandInt interface, then declare a CommandList array. The array will be empty for now, but give it a CommandInt[] type so TypeScript knows it will eventually hold your command objects. The file should look like:

import { CommandInt } from "../interfaces/CommandInt";

export const CommandList: CommandInt[] = [];

The purpose of this file is to create an array of your bot's commands which you will iterate over in the message event listener. There are ways to automate this, but they tend to be unnecessarily complex for smaller bots.

Check for Commands

Back in your onMessage.ts file, you should start working on the logic to check messages for commands.

The first step is to ensure that your bot ignores its own messages, as well as the messages of other bots. This helps prevent endless cycles where the bot is responding to itself.

The message object has an author property, which represents the Discord user that sent the message. The author property has a bot property, which is a Boolean that indicates the author is a bot account. Add a step to check if this property is true:

if (message.author.bot) {
  return;
}

You also want to prevent people from accidentally calling your bot's commands. For example, if you have a help command, you would not want the bot to respond when someone says "help me please".

This can be avoided by setting a prefix for the bot to detect. Most bots use !, but you are welcome to choose whichever prefix you would like.

Declare a variable prefix and assign it your chosen prefix, such as const prefix = "!";. Then add a condition to check if the message.content does not start with that prefix, and if so return.

const prefix = "!";

if (!message.content.startsWith(prefix)) {
  return;
}

Now that you have verified that the message came from a user and is intentionally triggering your bot, you can check to see if the command is valid.

Using the (currently empty) CommandList array will facilitate this process, so import it at the top of your file with import { CommandList } from "../commands/_CommandList";.

There are a few ways to iterate through an array – for the live bot, I used a for..of loop. Regardless of the loop approach, you will want to check each command in the array against the message content. Here is a loop example:

  for (const Command of CommandList) {
    if (message.content.startsWith(prefix + Command.name)) {
      await Command.run(message);
      break;
    }
  }

This loop iterates through the list of commands, and if the message content starts with the prefix and command name, the bot will call the command's run method.

Remember that you declared the run property to be an async function that took the message as an argument. Then, to save on compute time, the loop breaks when it finds a matching command.

Database Model

There's one more step before you are ready to start writing commands. This bot will track your community members' 100 Days of Code progress. And you need to store that progress in the database.

mongoose helps structure your MongoDB records to prevent you from passing malformed or incomplete data into your database.

Start by creating a models folder in your database directory. In that models folder, create a CamperModel.ts file. This will be your structure for the user objects.

You first need to import the necessary values from the mongoose library. Add import { Document, model, Schema } from "mongoose"; at the top of the file.

Because you are using TypeScript, you need to create a type definition for your database objects. Create another interface, like you did for your commands, named CamperInt.

export interface CamperInt {

}

Your database model will have four properties. Add these to your interface:

• discordId: string; – Every user object in Discord has a unique identifier, called a Snowflake, which is used to distinguish them from other users. Unlike a username or discriminator (the four digit number after the username), the id value cannot be changed. This makes it the ideal value for linking your stored data to a Discord user.
• round: number; – This will represent the "round" the user is on in the challenge. When someone completes 100 days of the challenge, they may choose to undertake the challenge again. When they do, they often refer to it as "round 2", for example.
• day: number; – This represents the day the user is on in the challenge.
• timestamp: number; – You will use this value to track when the user last submitted a 100 Days of Code post.

Great! Now you need to define the Schema for your database entries. mongoose uses a Schema object to define the shape of the documents that go in to your database collection. The Schema import has a constructor, which you will assign to a variable.

export const Camper = new Schema();

This constructor takes an object as its argument, and that object defines the database keys and types. Go ahead and pass in an object similar to what your interface looks like.

export const Camper = new Schema({
    discordId: String,
    round: Number,
    day: Number,
    timestamp: Number,
})

Next you need to create the model. In mongoose, the model object serves to create, read, and update your documents in the MongoDB database. Add export default model(); at the bottom of your file.

The model function takes a few parameters. The first is a string, and is the name to use for the documents in your database. For this collection, use "camper". The second argument is the schema to use for the data – use your Camper schema there.

By default, mongoose will use the plural version of your model name for the collection. In our case, that would be "campers". If you want to change that, you can pass in a third argument of { collection: "name" } to set the collection to name.

If you were using JavaScript, this would be enough to get your database model set up. However, because you are using TypeScript, you should take advantage of the type safety. model() by default returns a Document type of any.

To resolve this, you can pass a generic type into the model function. Generic types serve as variables for type definitions, in a sense. You need to set the generic type for your model to use your interface. Add the generic type by changing model to model<CamperInt>.

Just one more step here. Your CamperInt interface only defines the properties you set in the MongoDB document, but doesn't include the standard properties.

Change your export interface CamperInt to export interface CamperInt extends Document. This tells TypeScript that your type definition is an extension of the existing Document type definition – you are essentially adding properties to that structure.

Your final file should look like this:

import { Document, model, Schema } from "mongoose";

export interface CamperInt {
  discordId: string;
  round: number;
  day: number;
  timestamp: number;
}

export const Camper = new Schema({
  discordId: String,
  round: Number,
  day: Number,
  timestamp: Number,
});

export default model<CamperInt>("camper", Camper);

As a safety check, use npm run build again. You should not see any errors in the terminal.

How to Write Bot Commands

You are finally ready to start writing some commands! As this is a 100 Days of Code bot, you should start with the command for creating a 100 Days of Code update.

100 command

Within your commands folder, create a oneHundred.ts file. This will hold your 100 Days of Code command. Import your command interface with import { CommandInt } from "../interfaces/CommandInt";.

Now declare an exported variable oneHundred and give it the CommandInt type:

import { CommandInt } from "../interfaces/CommandInt";

export const oneHundred: CommandInt = {

}

Set the name property to "100", give it a description property similar to "Creates a 100 Days of Code update", and set up the run function as async (message) => {}.

Now for the logic within the function. Your logic will need a few properties from the message object to work, so go ahead and destructure those out: const{ author, channel, content } = message;.

When a user calls this command, it should look something like this:

!100 Here is my 100 Days of Code update.

You will want to extract that text without the !100 part. There are a few was to do this – we are going to slice it out with const text = content.split(" ").slice(1).join(" "). Using the previous example, text would now hold the string "Here is my 100 Days of Code update.".

Time for some database work. Import your CamperModel with import CamperModel from "../database/models/CamperModel". Note that you are importing the default export, instead of a module.

Now you need to see if the user has a record in your database. Use let targetCamperData = await CamperModel.findOne() to prepare for this.

The .findOne() method is used to query the collection for a single record, and takes an object to filter the query. These queries support MongoDB's syntax for advanced searching, but in this case you only need to find the record by the user's discordId. Add {discordId: author.id} as the parameter for the findOne().

What happens if the user's record does not exist yet? If this is their first time using the command, they will not have a document in the database. Add an if condition to check if targetCamperData does not exist:

if (!targetCamperData) {

}

In this block, you are going to reassign targetCamperData to a new document with targetCamperData = await CamperModel.create(). You use the .create() method to generate and save a new document. The method takes an object as the first argument – that object is the document to create. Pass the following object to the method:

targetCamperData = await CamperModel.create({
  discordId: author.id,
  round: 1,
  day: 0,
  timestamp: Date.now()
});

Whether the record exists already or has just been created, your next step is to update it. After your if block, add a line to increment the day value: targetCamperData.day++.

What happens if the user is on day 100? They should not be able to go to day 101, as the challenge is only a hundred days long. You will need to add logic for that. If the user is above day 100, you want to set their day to 1 and increase their round:

targetCamperData.day++;
if (targetCamperData > 100) {
  targetCamperData.day = 1;
  targetCamperData.round++;
}

Now update the timestamp with targetCamperData.timestamp = Date.now();. This may seem redundant, since you did this step in the create method, but this ensures that the timestamp is updated if the data already existed.

You need to save the changes you made to the document. Add await targetCamperData.save(); to do this – mongoose will then save your changes to the document in MongoDB.

Now you will construct the message the bot should send. To do this, you are going to use a message embed. Message embeds are special message formats that are available to Discord bots, which offer additional formatting options and styling.

Start by adding the MessageEmbed class to your imports with import { MessageEmbed } from "discord.js";. Then, after your database logic, create a new message embed with const oneHundredEmbed = new MessageEmbed();. Time to start setting the values of the embed.

The embed title appears as large text at the top of the embed. Set the title to "100 Days of Code" with oneHundredEmbed.setTitle("100 Days of Code");.

The embed description appears as standard text below the title. Set this to the user-provided text with oneHundredEmbed.setDescription(text);.

The embed author appears above the title, and is used to indicate who generated the embed. You will set this with oneHundredEmbed.setAuthor().

This method takes a few arguments, and you will use the first two. The first argument is the author's name. Set this to author.username + "#" + author.discriminator. This will display in the same way that you see a user in Discord: nhcarrigan#0001.

Set the second argument to author.displayAvatarUrl(). This is a method provided by discord.js to fetch the URL for the author's avatar image.

Embed fields are additional title-description pairs that can be nested within the embed, and optionally inlined. These can be created with the .addField() method, which takes up to three arguments. The first argument is the field title, the second argument is the field description, and the third argument is an optional Boolean to set the field as inline.

Add two fields to your embed. The first is oneHundredEmbed.addField("Round", targetCamperData.round, true);, and the second is oneHundredEmbed.addField("Day", targetCamperData.day, true);.

You can add a footer to an embed and appears at the bottom in small text. Set the footer to the data's timestamp with oneHundredEmbed.setFooter("Day completed: " + new Date(targetCamperData.timestamp).toLocaleDateString();. The toLocaleDateString() method will take a Date object and convert it to a locale-specific string based on the location of your bot's server.

Now you need to send that message embed. The channel property you extracted from the message value earlier represents the Discord channel in which the message was sent. This object has a .send() method, which you can use to have the bot send a message back to that channel. Use await channel.send(oneHundredEmbed) to send your new embed to that channel.

To keep the channel clean, add an await message.delete() to have the bot delete the message that triggered the command. Your final code should look like this:

import { CommandInt } from "../interfaces/CommandInt";
import CamperModel from "../database/models/CamperModel";
import { MessageEmbed } from "discord.js";

export const oneHundred: CommandInt = {
  name: "100",
  description: "Creates a 100 Days of Code update",
  run: async (message) => {
    const { author, channel, content } = message;
    const text = content.split(" ").slice(1).join(" ");

    let targetCamperData = await CamperModel.findOne({ discordId: author.id });

    if (!targetCamperData) {
      targetCamperData = await CamperModel.create({
        discordId: author.id,
        round: 1,
        day: 0,
        timestamp: Date.now(),
      });
    }

    targetCamperData.day++;
    if (targetCamperData.day > 100) {
      targetCamperData.day = 1;
      targetCamperData.round++;
    }
    targetCamperData.timestamp = Date.now();
    await targetCamperData.save();

    const oneHundredEmbed = new MessageEmbed();
    oneHundredEmbed.setTitle("100 Days of Code");
    oneHundredEmbed.setDescription(text);
    oneHundredEmbed.setAuthor(
      author.username + "#" + author.discriminator,
      author.displayAvatarURL()
    );
    oneHundredEmbed.addField("Round", targetCamperData.round, true);
    oneHundredEmbed.addField("Day", targetCamperData.day, true);
    oneHundredEmbed.setFooter(
      "Day completed: " +
        new Date(targetCamperData.timestamp).toLocaleDateString()
    );

    await channel.send(oneHundredEmbed);
    await message.delete();
  },
};

If you remember, you created a list to hold all of your commands. You need to add your new command to that list. Head back to your _CommandList.ts file. Import your new command with import { oneHundred } from "./oneHundred";, then add oneHundred to your empty CommandList array:

import { CommandInt } from "../interfaces/CommandInt";
import { oneHundred } from "./oneHundred";

export const CommandList: CommandInt[] = [oneHundred];

Now you can test it out! Use npm run build and npm start to get the bot started. Try sending !100 This is my first post! in the channel. The bot should respond with an embed and delete your message.

You can see the embed, with the author, title, description, fields, and footer.

View command

What happens if a user forgets if they submitted or not, or wants to see what day they are on? You should add a command to view current 100 Days of Code progress.

In your commands directory, create a view.ts file. Like before, import your command interface and CamperModel, and create a new command called view. Set the name to "view", the description to something like "View your current 100 Days of Code progress", and the run command to async (message) => {}.

You won't need the message content for this command, so extract the author and channel values from the message like you did before: const { author, channel } = message;.

Just like the 100 command, you need to fetch the user's data from the database. This time, however, if the data does not exist you will not be creating it – so you can use const here instead of let: const targetCamperData = await CamperModel.findOne({ discordId: author.id });

Now, if the user doesn't have a data record yet, they haven't started the challenge with the bot. You should send a message to let them know how to do this.

if (!targetCamperData) {
  await channel.send("You have not started the challenge yet.");
  return;
}

Construct an embed, similar to the one you built for the 100 command. Don't forget to import the MessageEmbed class!

    const camperEmbed = new MessageEmbed();
    camperEmbed.setTitle("My 100DoC Progress");
    camperEmbed.setDescription(
      `Here is my 100 Days of Code progress. I last reported an update on ${new Date(
        targetCamperData.timestamp
      ).toLocaleDateString()}.`
    );
    camperEmbed.addField("Round", targetCamperData.round, true);
    camperEmbed.addField("Day", targetCamperData.day, true);
    camperEmbed.setAuthor(
      author.username + "#" + author.discriminator,
      author.displayAvatarURL()
    );

A couple of key differences here. Instead of taking a text input from the user, you are using a fixed description value to indicate this is a view embed instead of a 100 embed. Since you use the timestamp in the description, you do not need to add a footer.

Just like before, send the embed to the message channel and delete the original message. Your final file should be:

import { CommandInt } from "../interfaces/CommandInt";
import CamperModel from "../database/models/CamperModel";
import { MessageEmbed } from "discord.js";

export const view: CommandInt = {
  name: "view",
  description: "Views your 100 Days of Code progress.",
  run: async (message) => {
    const { author, channel } = message;

    const targetCamperData = await CamperModel.findOne({
      discordId: author.id,
    });

    if (!targetCamperData) {
      await channel.send("You have not started the challenge yet.");
      return;
    }

    const camperEmbed = new MessageEmbed();
    camperEmbed.setTitle("My 100DoC Progress");
    camperEmbed.setDescription(
      `Here is my 100 Days of Code progress. I last reported an update on ${new Date(
        targetCamperData.timestamp
      ).toLocaleDateString()}.`
    );
    camperEmbed.addField("Round", targetCamperData.round, true);
    camperEmbed.addField("Day", targetCamperData.day, true);
    camperEmbed.setAuthor(
      author.username + "#" + author.discriminator,
      author.displayAvatarURL()
    );

    await channel.send(camperEmbed)
    await message.delete();
  },
};

Add your new view command to your _CommandList.ts file with an import, and put the command in the CommandList array. Then use npm run build and npm start to test your new changes. Send "!view" in your channel and you should see the bot respond:

Edit command

Unfortunately, if a user makes a typo in their 100 Days of Code post, they can't edit the message because the bot sent it. But you can add a command that will allow them to do this.

Create an edit.ts file in your commands directory. Import your command interface and declare a new command called edit. Set the name to "edit", the description to something like "Edits a previous 100 Days of Code post", and prepare the run function as you have before.

Within the function, extract the author, channel, and content properties from the message object.

The edit command will take a Discord message id, followed by the updated text to use. You can destructure those from the message content with const [, targetId, ...text] = content.split(" ");.

The first element in the array would be the !edit command call, which is not needed for this command so you do not need to assign it to a value. The targetId element would be the id of the message to edit. ...text that uses the spread operator to assign the remaining message content to the text variable, as an array.

Now you need to use the targetId to get the actual message from Discord. The channel value has a messages property which represents all of the messages sent in that channel. You can use the fetch method on that messages property to get a specific message (or multiple messages). Set this up as const targetMessage = await channel.messages.fetch().

The .fetch() method can take an object containing the options for the fetch request, or it can take a string as the id of the message to fetch. Because you have the id, and are only fetching one message, you can pass targetId to the .fetch() method as the only parameter.

It is possible that the targetMessage does not exist. For example, if the user provided an invalid id string (or no id string at all). You'll need to add logic to check if the targetMessage is not found:

    if (!targetMessage) {
        await channel.send("That does not appear to be a valid message ID.");
        return;
    }

Now that you have asserted that the message exists, you can start working with the properties. Because your bot sends the message as an embed, the content property you are used to working with will be empty. Instead, you can find the embed within the embeds property.

The embeds property is an array of MessageEmbed objects. Since you wrote the bot's code to only send one embed, you can access that embed with const targetEmbed = targetMessage.embeds[0];.

Now that you have the embed, you need to confirm that the embed is from one of that user's 100 Days of Code posts. Thankfully, you set the user as the author of the embed. You can check if the embed's author information does not match the message author's information:

    if (
      targetEmbed.author?.name !==
      author.username + "#" + author.discriminator
    ) {
      await channel.send(
        "This does not appear to be your 100 Days of Code post. You cannot edit it."
      );
      return;
    }

You have accounted for the message belonging to a different user (or not having the correct embed entirely), so now you can edit the embed.

Like you did before, set the description of the embed with the .setDescription() method. You'll need to use .join(" ") on the text variable this time, since it is currently an array. targetEmbed.setDescription(text.join(" "));

Rather than sending a new message, you need to edit the existing message. You have the existing message stored in targetMessage, so you can use the .edit() method to change that message directly.

await targetMessage.edit(targetEmbed); will change the message's embed to your modified version. Then delete the message that triggered this command with await message.delete();. Your command should look like this:

import { CommandInt } from "../interfaces/CommandInt";

export const edit: CommandInt = {
  name: "edit",
  description: "Edits a previous 100 Days of Code post.",
  run: async (message) => {
    const { author, channel, content } = message;
    const [, targetId, ...text] = content.split(" ");

    const targetMessage = await channel.messages.fetch(targetId);

    if (!targetMessage) {
      await channel.send("That does not appear to be a valid message ID.");
      return;
    }

    const targetEmbed = targetMessage.embeds[0];

    if (
      targetEmbed.author?.name !==
      author.username + "#" + author.discriminator
    ) {
      await channel.send(
        "This does not appear to be your 100 Days of Code post. You cannot edit it."
      );
      return;
    }

    targetEmbed.setDescription(text.join(" "));

    await targetMessage.edit(targetEmbed);
    await message.delete();
  },
};

Add the command to your _CommandList.ts file, importing it and adding the variable to the array. Then use npm run build and npm start to run the bot again.

To grab a message ID, you should have Developer Mode enabled in your Discord client. If you have not done so, visit your settings and select the "Advanced" section. Toggle "Developer Mode" on:

Then head back to your channel and right click on your original 100 Days of Code message. You should see an option in the context menu to copy the message ID:

Select that option and you will get an ID (mine was 855559921666621441). Then in the same channel, use !edit 855559921666621441 This is an edited post!, replacing my value with the one you got from the "Copy ID" option. The bot should edit the existing embed with your new content.

Help command

You are almost there! One more command to go. Many bots have a help command, which returns a list of available commands. You should add one to your bot as well.

One last time, create a help file in your commands directory. Import your CommandInt interface and set up your command as help. Set the name to "help", and the description to something like "Returns information on the bot's available commands.". Set up your run function.

This time you only need the message's channel property, so no need to destructure anything here. Instead, import the MessageEmbed class from discord.js, and go ahead and import your command list too: import { CommandList } from "./_CommandList";.

Construct a new MessageEmbed and assign it to a helpEmbed variable. Set the title to "Available Commands:" and the description to something similar to "These are the available commands for this bot.".

Now you need to add a field to the embed and dynamically generate the list of commands. Start by adding the field with helpEmbed.addField(). Use the first parameter to set the field name to "Commands:". For the description (the second parameter), you will use the CommandList array to generate a readable list of commands.

    helpEmbed.addField(
      "Commands:",
      CommandList.map((el) => `\`!${el.name}\`: ${el.description}`).join("\n")
    );

The process here is two-part. First, using the built-in array method .map, you are creating a new array from your array of CommandInt objects. This array contains strings formatted using Markdown so the command name and description are readable. The string for your help command would look like:

!help: Returns information on the bot's available commands.

You are then joining that array of strings with a new-line separator, which will create a vertical list of commands in a single string (embed fields require strings for the description).

Send the embed to the channel. Because you did not destructure the channel property out of the message object, you will need to use message.channel.send(helpEmbed); directly.

This time, do not delete the original message – you did not add an author to the help embed, so preserving the original message helps moderators see who used the command. Your help command should look like:

import { CommandInt } from "../interfaces/CommandInt";
import { MessageEmbed } from "discord.js";
import { CommandList } from "./_CommandList";

export const help: CommandInt = {
  name: "help",
  description: "Returns information on the bot's available commands.",
  run: async (message) => {
    const helpEmbed = new MessageEmbed();
    helpEmbed.setTitle("Available Commands!");
    helpEmbed.setDescription(
      "These are the available commands for this bot."
    );
    helpEmbed.addField(
      "Commands:",
      CommandList.map((el) => `\`!${el.name}\`: ${el.description}`).join("\n")
    );

    await message.channel.send(helpEmbed);
  },
};

Import your help command into your _CommandList.ts file and add the command to your array. With this final command, your _CommandList.ts file should be:

import { CommandInt } from "../interfaces/CommandInt";
import { oneHundred } from "./oneHundred";
import { view } from "./view";
import { edit } from "./edit";
import { help } from "./help";

export const CommandList: CommandInt[] = [oneHundred, view, edit, help];

Use npm run build and npm start one last time to test this feature. Send !help in your channel and the bot should respond:

Conclusion

Congratulations! You have successfully built a Discord bot for the 100 Days of Code challenge.

If you are interested in exploring further, you can view the source code for the live bot that inspired this tutorial, which includes custom error logging, external error reporting, and a documentation site.

I knew of Alex because he’d created the freeCodeCamp Toronto study group. It was one of the most active study groups in Canada, drawing crowds of developers each week.

But Alex wasn’t writing me about the Toronto study group. He was writing me because he wanted to tell me about an endurance challenge he’d dreamed up.

The challenge was this: Alex wanted to code for at least an hour every day — for the next 100 days in a row.

_Comic by [Sarah Andersen](https://www.facebook.com/DoodleTimeSarah/" rel="noopener" target="blank" title=").

Alex had written an article explaining the rules of his challenge, and publicly committing to the challenge. He hoped that a few other people would read his article and join him on his challenge.

And he came up with a Twitter hashtag to go with it: #100DaysOfCode.

“Oh! Hi!” One of the freeCodeCamp events in Toronto, the city where the #100DaysOfCode Challenge was born. Photo by Justin Richardson.

Little did I know that 18 months later, thousands of people would be tweeting this hashtag hundreds of times each day.

Today, people who have committed to the #100DaysOfCode challenge use the hashtag to share their progress, projects, and milestones they’ve hit — like landing their first developer job.

So how did Alex transform from a lone developer who wanted to improve his coding skills into the leader of a global movement involving thousands of developers?

And who the heck is Alexander Kallaway, anyway?

A few years ago, Alex was just another high school student in Russia. He was passionate about foreign languages, and learning both English and Japanese. His passion eventually took him to Japan, where he continued his studies at a Japanese university.

One day while in Japan, Alex spotted an English-language copy of The 4 Hour Workweek on a bookshelf. He says this book opened his eyes to entrepreneurship, and the notion that anyone could start a project that makes a big impact — not just traditional “business people.”

He figured out a way to move to Canada so he could attend business school.

And it was there that his future wife, Anna, reached out to him, wanting to learn more about studying abroad and how he’d managed to do it. She now lives in Toronto with Alex.

Alex and his wife Anna at Hong Kong Disneyland.

By 2014, Alex had finished business school, and had started a career in digital marketing.

But Alex’s interactions with the developers around him at work made him realize something important. He was missing a core entrepreneurial skill. He needed to learn to code.

Alex had no real programming experience. He couldn’t afford the time or the money necessary to attend a coding bootcamp — let alone to go back to school for a computer science degree.

But he decided to learn to code anyway. Every day after work, Alex would teach himself to code using free online resources.

While using freeCodeCamp, he decided he wanted to code along with other friends to have more social accountability. He tried to join a freeCodeCamp group in Toronto, but there wasn’t one. So he created one.

The freeCodeCamp Toronto study group expanded quickly through his efforts to organize events. The group started out meeting in coffee shops. Soon it was filling up entire office spaces. And it eventually found a permanent venue at a nearby coworking space.

And through freeCodeCamp Toronto, Alex became friends with dozens of like-minded people who wanted to learn to code.

All his hard work paid off. Thanks to his newly acquired skills and large network of developers, Alex got his first developer job.

At that point, it was easy to become complacent. He had arrived.

He had a fun job. He was making good money. He had made so many friends. And he had “made it.” He was a Russian expatriate finding success in Canada’s biggest and most competitive city.

But Alex knew he needed to keep expanding his skills if he wanted to realize his entrepreneurial ambitions. He could sense his skills hitting a plateau. After a long day at work, it was tempting to just relax and watch TV, or hang out with friends.

Alex recalls:

“The idea of #100DaysOfCode originally came from personal frustration with my inability to consistently learn to code after work. I would find other less-involved activities to spend my time on, like binge-watching TV series.

One of those days, I was sitting in a restaurant with my wife Anna sharing my frustrations with her. I suggested that maybe I should make a public commitment to learning for at least an hour every day, and I thought I would go for 3 months.

Anna said it was a good idea, and asked: ‘But why stop at 3 months? You should make it an even 100 days! It just sounds better!’”

The #100DaysOfCode Challenge is born

I got to hang out with Alexander Kallaway in person in Toronto.

#100DaysOfCode would serve as a commitment device, forcing Alex to code each day after work, even when he felt like watching TV instead.

He needed to clearly state what the rules of the challenge were, so he wouldn’t be able to bend them later.

So he created Rule #1: You commit to coding for minimum 1 hour every day for the next 100 days.

Alex was obsessed with productivity, and developing positive habits. He had read lots of books on habit formation. Some of the books he recommends reading on the topic are:

• The War of Art: Winning the Inner Creative Battles

• The Power of Habit: Why We Do What We Do in Life and Business

• The Obstacle Is the Way: The Timeless Art of Turning Trials into Triumph

Alex thought about how so much of our motivation comes from our friends and family. We need social accountability.

And that’s when he realized that this challenge could be social in nature, and that the more people he got involved, the more likely any single participant would succeed and make it through day 100.

So he created Rule #2: You commit to encouraging at least 2 other people who are taking the challenge each day, using Twitter.

As Alex puts it:

“This system could help counteract all the excuses I naturally came up with for not doing what I was supposed to do. This is how the challenge was born — a couple of simple rules, social accountability, and nothing more. Accountability is one of the biggest factors in trying to change some aspect of your life.”

Right from the start, Alex acknowledged that learning to code is hard. But our friends can help us push forward through the setbacks.

“There will be plenty of times when you feel like you’ve had enough. Or you’ll feel like your progress is way too slow, or you’re hopelessly stuck. These are all serious-enough reasons to quit. Or at least that’s what you might tell yourself.

But if you connect with others on the same path you can share the ups and downs of the journey, and together move past all these roadblocks. Share your frustrations, learning experiences, and victories with the like-minded people who are also on the same path as you. By sharing these, you grow to understand: ‘It’s not just me.’”

Why #100DaysOfCode is a more realistic goal than most of the New Years Resolutions people commit to

The #100DaysOfCode Challenge is only 100 days long — less than a third of a year. And you have a giant community of people cheering you on.

As a result, many people not only finish the challenge — they commit to it a second time!

So Alex came up with the concept of “rounds.” These are signified by tweeting with which day you’re on (Day 1) and how many times you’ve attempted the challenge (Round 1).

He adopted a new format for daily progress tweets: R1D1 — which means Round 1 Day 1.

“There is an inside joke that was born out of this format: On the second day of the second round — R2D2 — people post a picture or a gif of the beloved R2D2 Star Wars robot in their daily progress tweet.”

If you scroll through the #100DaysOfCode hashtag on Twitter, you’ll see cases where people have already completed several rounds.

But Alex recommends starting with a single 100-day commitment and going from there. He also recommends keeping things simple at the start.

“New Years Resolutions don’t work because people over-commit. Make sure this is your only habit that you’re trying to pick up.”

He also says it’s OK if something unexpected comes up, and you can’t code for a day.

“If you are traveling for 2–3 days and cannot code, take a book on coding with you and read it instead. If you only can afford 20 minutes a day, do that. Make the challenge your own. The only rule that I want you to keep sacred is that you have to code daily. You can skip a day here and there for unplanned situations, but not more. The goal is to become consistent, no matter what life throws at you.”

If you’re interested in boosting your motivation, you should take the challenge. It starts with tweeting your commitment to the challenge.

Click here to publicly commit to the #100DaysOfCode Challenge 😇

Then you can fork the #100DaysOfCode GitHub repository to serve as a journal of your daily progress.

One great thing about the challenge is that you don’t need to wait until New Years to take it.

People are starting the challenge every day, so you’ll have people who started before you cheering you on.

Then you can turn around and cheer on the people who are starting after you.

These encouraging tweets and feedback on your projects can be extremely motivating. I’ve talked with tons of people who say the #100DaysOfCode challenge helped them break through barriers that had held back their coding for months. The social accountability aspect works wonders.

Where to learn more

Alex has done some great podcast interviews where he talks in greater detail about the #100DaysOfCode Challenge:

• Alex on the CodeNewbie Podcast

• Alex on the Learn to Code With Me Podcast

You can also check out their official website: 100daysofcode.com

And read Alex’s article about some of the improvements to the challenge.

Even if you don’t want to take the challenge, you should keep coding as much as you can make time to do.

At the end of the day, it’s all about practice.

“Every day you code is the day you’ve won.” — Alexander Kallaway

First of all, bookmark this Advent Calendar and come back every day for new JavaScript lessons.

Advent Calendar Day 1 Challenge:

Advent Calendar Day 2 Challenge:

Advent Calendar Day 3 Challenge:

Advent Calendar Day 4 Challenge:

Advent Calendar Day 5 Challenge:

Advent Calendar Day 6 Challenge:

Advent Calendar Day 7 Challenge:

Advent Calendar Day 8 Challenge:

Advent Calendar Day 9 Challenge:

Advent Calendar Day 10 Challenge:

Advent Calendar Day 11 Challenge:

Advent Calendar Day 12 Challenge:

Advent Calendar Day 13 Challenge:

Advent Calendar Day 14 Challenge:

Advent Calendar Day 15 Challenge:

Advent Calendar Day 16 Challenge:

Advent Calendar Day 17 Challenge:

Advent Calendar Day 18 Challenge:

Advent Calendar Day 19 Challenge:

Advent Calendar Day 20 Challenge:

Advent Calendar Day 21 Challenge:

Advent Calendar Day 22 Challenge:

Advent Calendar Day 23 Challenge:

Advent Calendar Day 24 Challenge:

About this Advent Calendar

Welcome to 24 Days of JavaScriptmas, an Advent Calendar that gives you a small JavaScript challenge every day throughout December.

2020 has been a rough one for aspiring software developers. In addition to the health costs that have affected so many of us, junior developers have faced an increasingly difficult job market.

Many experienced developers were laid off this year, and therefore applied for the same jobs junior developers were hoping to get.

I am convinced that this pandemic eventually will result in more demand for developers, as it pushes industries online. But right now, we seem to be in a tricky transition period.

So to help aspiring developers be better prepared for 2021, we have created an advent calendar called 24 Days of JavaScriptmas 🎄

From December 1st and until Christmas Eve, you will get a small coding challenge to help you improve your JavaScript skills a little bit every single day.

The challenges start off pretty simple, and then ramp up throughout the month. If you stick with it all the way to Christmas Eve, you will definitely increase your chances of landing a junior developer job in 2021. Because training your core JavaScript skills is the best investment you can do towards that.

The Teacher: Dylan "Claus" Israel

All the challenges have been created by online coding instructor Dylan Israel. He has appeared both on freeCodeCamp's YouTube channel and podcast previously, so you might already know Dylan.

But what you probably didn't know is that Dylan takes on a completely different job at the end of each year, as proven by the picture below 👇

Now, let's have a look at what kind of challenges Dylan "Claus" Israel has created for you this year.

The challenges: core JavaScript skills

The challenges have been created to help you increase your core JavaScript skills. This is something all web developers need to practice, regardless of which framework they use.

So you'll often find yourself manipulating Arrays, changing Strings, comparing Numbers and so on throughout the advent calendar. In general, they're things you'd often do as a professional web developer.

All challenges come in the form of Scrimba screencasts, or scrims. This makes it simple for you to both understand the instructions and code your solutions, as you do both activities inside the scrims.

Ok, but what's a scrim? 🤔

A scrim is a mix between a code editor and a video. Think of it as if YouTube and VS Code had a child. This means that you can pause the "video" it at any given time and edit the code directly in the player. It's almost as if you are pair-programming with the teacher.

So you simply "take over" for Dylan at the end if the scrim and start coding your solution inside the scrim.

Once the test suite goes from ❌ to ✅, you have solved the challenge.

If you manage to solve it, I would recommend that you share your solution on Twitter under the #JavaScriptmas hashtag. This hashtag will serve as a way for the community to check out each others' solutions.

If you didn't manage to solve the challenge, no worries. Dylan will provide the solution the following day. But I encourage you to give it an honest shot, as we will pick a daily winner amongst the submissions who will get free access to Scrimba for a year, plus a grand prize on Christmas Eve.

To give everyone a chance to win - regardless of skill-level - we will pick a random winner from the submissions. So you are actually only competing against yourself. If you increase your JavaScript proficiency as a consequence of this advent calendar, you are a winner. 👏

The first challenge is already live, so head over to 24 Days of JavaScriptmas right now and get started growing those JavaScript skills. And make sure to bookmark this article, as I'll update it every day with the newest challenge.

Merry Christmas! 🎅🏻

Since Linus Torvalds (the famous creator of the Linux operating system kernel) created Git in 2005 for Linux kernel development, it has become the most widely used modern version control system in the world.

In this article, I'll introduce you to the Git clone and Git branch workflows and I'll show you how you can clone a specific branch based on your needs. Let's begin! ?

Prerequisites

• Basic knowledge of the terminal

• Ability to type commands in the terminal

• Git installed (I'll still show you how)

• A GitHub account

• A smile on your face (Put up that smile friend ?)

Quick Introduction to Git and GitHub

According to Wikipedia,

Git is a distributed version control system designed to track changes to a project (code) in software development. It is intended to enforce coordination, collaboration, speed, and efficiency among developers.

GitHub, on the other hand, is a web-based hosting service for version control using Git. It offers all of the distributed version control and source code management functionality of Git as well as adding more features for computer code.

How to Install Git on Windows

Download and install the latest Git for Windows Installer here.

How to Install Git on Linux

Here are the commands based on your Linux distro:

Debian or Ubuntu

sudo apt-get update
sudo apt-get install git

Fedora

sudo dnf install git

CentOS

sudo yum install git

Arch Linux

sudo pacman -Sy git

Gentoo

sudo emerge --ask --verbose dev-vcs/git

How to Install Git on a Mac

Download and install the latest Git for Mac installer here.

Or you can type this command:

brew install git

Now that we've got Git installed, let's move on to the tutorial.

Introduction to Git Clone

Git allows you to manage and version your project(s) in a "repository". This repository is stored on a web-based hosting service for version control, like GitHub.

You can then clone this repository to your local machine and have all the files and branches locally (I'll explain more about branches soon).

For example, you can clone freeCodeCamp's repository with SSH like so:

git clone git@github.com:freeCodeCamp/freeCodeCamp.git

Introduction to Git Branches

When working on a project, you will likely have different features. And multiple contributors will be working on this project and its features.

Branches allow you to create a "playground" with the same files in the master branch. You can use this branch to build independent features, test new features, make breaking changes, create fixes, write docs or try out ideas without breaking or affecting the production code. When you're done, you merge the branch into the production master branch.

Branching is a core concept in Git which is also used in GitHub to manage workflows of different versions of one project. The master branch is always the default branch in a repository that is most often considered "production and deployable code". New branches like passwordless-auth or refactor-signup-ux can be created from the master branch.

All branches in freeCodeCamp's repository

How to Clone Git Branches

While you can clone repositories with the git clone command, keep in mind that this clones the branch and the remote HEAD. This is usually master by default and includes all other branches in the repository.

So when you clone a repository, you clone the master and all other branches. This means you will have to checkout another branch yourself.

Let's say your task on a project is to work on a feature to add passwordless authentication to a user dashboard. And this feature is in the passwordless-auth branch.

You really don't need the master branch since your "feature branch" will be merged into master afterward. How then do you clone this passwordless-auth branch without fetching all other branches with "a bunch of files you don't need"?

I created this sample repository to explain this. This repository holds a simple blog built with Nextjs and has four dummy branches:

• master

• dev

• staging

• passwordless-auth

In Nextjs, any file inside the folder pages/api is mapped to the /api/* path and will be treated as an API endpoint instead of a page. In our repository, I have created different dummy APIs in this directory to make each branch different.

The master branch holds the file pages/api/hello.js while passwordless-auth holds the file pages/api/auth.js. Each file just returns a dummy text response. See master's hello API response here (with a special message for you ?).

Let's clone the repository:

git clone git@github.com:BolajiAyodeji/nextjs-blog.git

This gives us access to all branches in this repository and you can easily toggle between each to see each version and its files.

git branch -a

Wondering where the remotes/origin/.. branches came from?

When you clone a repository, you pull data from a repository on the internet or an internal server known as the remote. The word origin is an alias created by your Git to replace the remote URL (you can change or specify another alias if you want).

These remotes/origin/.. branches point you back to the origin repository you cloned from the internet so you can still perform pull/push from the origin.

So when you clone master onto your machine, remotes/origin/master is the original master branch on the internet, and master is on your local machine. So you will pull/push from and to the remotes/origin/master.

In summary Remote is the URL that points you to the repository on the internet while Origin is an alias for this remote URL.

How to Clone a Specific Branch

Now let's clone a specific branch from our demo repository. There are two ways to clone a specific branch. You can either:

• Clone the repository, fetch all branches, and checkout to a specific branch immediately.

• Clone the repository and fetch only a single branch.

Option One

git clone --branch <branchname> <remote-repo-url>

or

git clone -b <branchname> <remote-repo-url>

With this, you fetch all the branches in the repository, checkout to the one you specified, and the specific branch becomes the configured local branch for git push and git pull . But you still fetched all files from each branch. This might not be what you want right? ?

Let's test it:

 git clone -b passwordless-auth git@github.com:BolajiAyodeji/nextjs-blog.git

This automatically configures passwordless-auth as the local branch but still tracks other branches.

Option Two

git clone --branch <branchname> --single-branch <remote-repo-url>

or

git clone -b <branchname> --single-branch <remote-repo-url>

This performs the same action as option one, except that the --single-branch option was introduced in Git version 1.7.10 and later. It allows you to only fetch files from the specified branch without fetching other branches.

Let's test it:

git clone -b passwordless-auth --single-branch git@github.com:BolajiAyodeji/nextjs-blog.git

This automatically configures passwordless-auth as the local branch and only tracks this branch.

If you run cd pages/api you'll find the auth.js file in the passwordless-auth branch as expected from the previous setup.

Conclusion

You might be running out of internet or storage space but you need to work on a task in a specific branch. Or you might want to clone a specific branch with limited files for various reasons. Fortunately, Git provides you the flexibility to do this. Flex your muscles and try it out, there's much more "Git" to learn.

One at a time, yeah? ✌?

Earlier this month, I started a free mentorship program for everyone who aspires to become a developer and wants a little nudge or tips and tricks from me. The response there was tremendous.

Almost a month in, after talking one-on-one with so many developers on WhatsApp, I have a much better understanding of the current generation of aspiring developers.

#1: Web Development is popular

Going by the messages exchanged between me and 2,500 other developers, people want to learn web development. Almost 80% of people want to learn, are learning, or want to switch careers into web development.

Why is that? Well, if you look at the data, it becomes much more clear:

1. Almost every business that sells has a website.
2. Web developers are needed to create/maintain/update and change the technologies powering so many websites.
3. The web is rapidly expanding, improving, and growing. More people are getting online each day, the opportunity is tremendous for the people who control what millions of people could see through web pages.
4. The web is vast - you can pick up your little tech stack, master it, and earn through freelancing, or as an independent contractor or firm.

Does that mean you should learn web development? Well, it depends. Keep reading the article to know why.

#2: A good chunk of people are doing it wrong

I won't write "most people", but yes, a lot of people are learning competitive programming when they should really be learning web development, or music, or anything else.

A lot of the people I talked to are "stuck" learning something because their job apparently demands it. Or because they are waiting for internships or on-campus placements 100 years from now (sarcasm). Or because that's what is taught in their universities. Or because their friends are doing it.

If you fall into one of those categories you're not doing yourself a favor.

Take a step back and seriously reconsider the road you're taking. If you're not happy with the end goal and the path, if you're not excited about programming, coding, doing and learning what you do right now, it's not going to be something you'll master – you are going to give up somewhere along the way.

Don't get twisted though. This doesn't mean the usual "because-it-does-not-work" code frustration that happens all the time when you're learning. Please reconsider your field, but make sure you're doing what makes and keeps you happy. There's no shame in picking up things you like and things you don't.

#3: You want to master everything

You can't imagine all the confusion I saw.

People want to become full-stack developers, contribute to all Open Source projects, get a job at Facebook, create a rocket at NASA, leave the solar system, and set up another civilization in another galaxy all at once.

This is not how any of this works. You cannot be a full-stack or even a frontend developer in a day. And if anyone says that to you, that person is lying.

Being a full-stack developer or mastering a tech stack isn't a destination. You would never wake up one day and say that this is the day when I become a full-stack developer.

It is a journey. You'll learn so much along the journey. And the journey is going to be a long one, whether you like it or not. You also cannot effectively master everything.

Remember that my definition of mastering is not watching a 4 hour YouTube video on React and considering yourself eligible to work on the flight control dashboard on SpaceX rocket. It takes time and experience to master a tech stack, and you probably won't feel that you know everything even when you really know a lot of stuff.

Although the secret of being successful is mastering one thing, I often tell people to try out as many things as they can – just to develop a taste of what they like and what they don't. Maybe you'll like Rust, maybe someone else will like C++.

You never know until you try.

#4: You don't want to put in the work

I contacted so many people and told them to report their progress in a week. What surprised me is that most of them didn't complete the work I assigned.

"I was busy this week due to work", "I had a test coming up", "I was busy learning X" – excuses. Plain excuses.

Please realize that putting in constant effort for a sustained amount of time is one of the few things which cannot be bought or transferred with a hyperlink. You have to do it.

If you're not doing it, figure out why – is it because you don't like the thing you're doing? If that's the case, consider point #2. Is it because you don't have resources/you get confused? – ASK me! Is it because of some other reason? – TELL me!

People don't like to share things online fearing that they will be judged. Trust me, neither of us are that interesting.

When you share things, you give someone in a similar situation a chance to relate, get motivated, and even help you out.

#5: Know your tools – Ask for help

A technology you're learning might not be for you at all.

I chatted with so many Python and ML/AI enthusiasts struggling to learn backend development because they couldn't make sense of Node.js. Why would you want to learn Node for backend when you already know Python? Go and learn about Flask and Linux systems.

This is just one example of many people who didn't have guidance and mentorship early on. And I wonder how many human hours could have been saved if everyone was mentored and given a slight push to correct their trajectory.

When in doubt, ask for help. Dev forums, Google, Reddit, StackOverflow, Twitter – there are so many places to ask for help!

It would be so easy for someone to get stuck without the internet and all the smart people on it. The internet is a blessing, so use it!

Conclusion

I'm trying my best to manage the 2,500 people the in the program now, and plan to open up for mentorship again when I can take on more people.

This mentorship is part of codedamn – a platform for developers to connect and learn. If you want, you can follow me on Twitter and Instagram to keep yourself updated about the things I code and my life in general.

Let's connect!