Forem: ChrisLeboeuf

A quick look at VueJS

ChrisLeboeuf — Mon, 06 Apr 2020 10:43:30 +0000

Ah! So you came to learn about VueJS? Well, today that's exactly what I am here to tell you about. As always I am your guy for learning about various neat and interesting libraries and frameworks. And as a disclaimer. I am in no way shape or form an expert in Vue, but I will surely be teaching you a good way to get started with it!

Anyway. What is Vue? Well, Vue is a front-end framework that lets you extend HTML with HTML attributes called directives. Before we incorporate Vue into your code, I recommend an awesome chrome extension called Vue.js devtools. It's an awesome way to check what is happening in your code anytime you would like all in the browser! Now that we know what Vue is, let's get right into implementing Vue into your code!

If you are looking to take a deep dive and use Vue in a large scale application you can easily do a quick npm install vue and you will be able to use Vue anywhere in your application.

The other way to add Vue to your project is by simply adding a CDN script tag to your main HTML page.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Now that we know all that, I am gonna give you guys a short rundown with the help of the 'getting started' from Vue itself! Here we will be rendering a list of todos using Vue.

HTML

<div id="todos">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

JavaScript

var todos = new Vue({
  el: '#todos',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

After all of that, our webpage will look a little something like this.

1. Learn JavaScript
2. Learn Vue
3. Build something awesome

Interestingly enough, Vue auto-updates its data as it is changed. Once your page loads, try typing into the console app4.todos.push({ text: 'Make a todo app' }). You should be able to see the new item displayed on the page.

So now that you have seen some code. Let me explain a few things here.

First things first. The first thing you might see that is different from your average HTML. This is what is called a directive!

<li v-for="todo in todos">

This line here. Very similar to AngularJS, Vue has directives. Personally I feel that Vue directives are much simpler than those in Angular. Basically a directive is some special token in the markup that tells the library to do something to a DOM element. In Vue, the v-for directive is used to render a list of items in an array. It very much especially reminds me of JavaScripts es6 for-of loop.

Vue has a ton more directives and other interesting ways to create components. Maybe I can tell you all about it in another blog at some point in the near future as I continue to learn about Vue myself! And there ya have it, hackers! I hope you learned at least a little something new about Vue here today! Hope to see you all in the future! Happy Coding hackers!

Aurelia

ChrisLeboeuf — Mon, 30 Mar 2020 08:51:59 +0000

Ah, so you want to know what Aurelia is yea? Well, today is your lucky day because I am going to talking about just that! Aurelia is an awesome JavaScript framework that I personally just recently came across. I looked into it a bit and thought I would come here and tell you all a little bit about it and why you should totally use it!

Aurelia is really interesting because of how powerful and intuitive it is. You are able to build components comprised entirely of vanilla JavaScript. Even complex apps look easy with this framework. Let's get right into the meat of this and breakdown a couple of nice examples today!

So the first example will be a simple counter/timer app.

export class App {
  seconds = 0;

  constructor() {
    setInterval(() => this.seconds++, 1000);
  }
}

<template>
  <h1>A total of ${seconds} seconds have elapsed.</h1>
</template>

When I say this can get simple, I mean it! Aurelia is super interesting because it knows exactly what changes and when it changes. It uses this knowledge to update your UI in the most efficient way possible.

So the example today will be a simple todo application to get you introduced to this nifty framework. The todo app will hold a text box that will be used to add new todos and those todos can be removed just as easy as they were added.

So here is what our app.js file example will look like.


 export class App {
    constructor() {
      this.heading = 'Todos';
      this.todos = [];
      this.todoName= '';
    }

    addTodo() {
      if (this.todoName) {
        this.todos.push({
          description: this.todoName,
          done: false
        });
        this.todoName= '';
      }
    }

    removeTodo(todo) {
      let index = this.todos.indexOf(todo);
      if (index !== -1) {
        this.todos.splice(index, 1);
      }
    }
  }

You can easily create a fully functioning application with simple classes that have properties and methods. This here uses a vanilla JavaScript array to keep track of our todos.

Here is what our HTML might look like

  <template>
    <h1>${heading}</h1>

    <form submit.trigger="addTodo()">
      <input type="text" value.bind="todoName">
      <button type="submit" disabled.bind="!todoName">Add Todo</button>
    </form>

    <ul>
      <li repeat.for="todo of todos">
        <input type="checkbox" checked.bind="todo.done">
        <span css="text-decoration: ${todo.done ? 'line-through' : 'none'}">
          ${todo.description}
        </span>
        <button click.trigger="removeTodo(todo)">Remove</button>
      </li>
    </ul>
  </template>

Together these will create our fully functioning Todo application. I like to think that the HTML here somewhat resembles AngularJS. Here you can see that in order to map out our array of todos, the HTML here uses repeat.for="todo of todos". That syntax is derived from the 'for of' loop of ES Next. Above we are generating one li for every todo element. As for adding and removing todos, they use '.trigger' in order to 'trigger' the function that either adds or removes a todo.

It's pretty awesome and super enjoyable once you get the hang of it. Aurelia was designed to be simple, easy to use, and highly customizable. Coding is almost effortless with Aurelia. I hope you will give it a try!

I hope you at least learned something here today. Happy coding hackers!

P.S
Please forgive me for any typos or how sloppy this may be. I wrote this on very little steam left in me. I hope to see you all in the next blog real soon!

Mousetrap JS

ChrisLeboeuf — Mon, 23 Mar 2020 09:26:56 +0000

So you came here to learn about mousetraps right? So mousetraps are great for capturing rodents with a spring-loaded mechanism. Totally kidding! This isn't about those kinds of mousetraps. This is about a neat Javascript library for fairly simple and easy keybinding! Mousetrap has many awesome capabilities. It's extremely lightweight with no external dependencies.

You can get Mousetrap by doing a simple npm install mousetrap and require it in your app. Do that and now you can start using mousetraps like a pro!

Let's get right into it! First, there is Mousetrap.bind. Let's look at some examples!

    // single keys
    Mousetrap.bind('4', function() { console.log('4'); });
    Mousetrap.bind("?", function() { console.log('show shortcuts!'); });
    Mousetrap.bind('esc', function() { console.log('escape'); }, 'keyup');

    // combinations
    Mousetrap.bind('command+shift+k', function() { console.log('command shift k'); });

    // map multiple combinations to the same callback
    Mousetrap.bind(['command+k', 'ctrl+k'], function() {
        console.log('command k or control k');

        // return false to prevent default browser behavior
        // and stop event from bubbling
        return false;
    });

    // gmail style sequences
    Mousetrap.bind('g i', function() { console.log('go to inbox'); });
    Mousetrap.bind('* a', function() { console.log('select all'); });

    // Alphabet!
    Mousetrap.bind('a b c d e f g', function() {
        console.log('Now I know my abc's');
    });

So bind will be used to literally allow you to bind specific sets of keys to a specified callback method. On top of that, if for whatever reason you wanted to you can even overwrite default keyboard shortcuts. And you can also specify whether your shortcut is a keyup, keydown, or a keypress by adding a third argument to the bind method. This way you can bind multiple types of keypresses to the same key or combination of keys.

And that leads to the next thing.Mousetrap.unbind. With this method, you can unbind a single key or an array of keyboard events. If you previously used bind to bind a key and you specified the kind of keypress, then you must specify the same kind of keypress in the unbind.

Mousetrap.bind('b', () => { console.log('b was pressed') } 'keydown');

// This is how you must do it if you specified a specific keypress
Mousetrap.unbind('b', 'keydown');

Next Mousetrap has a neat way of triggering the same keyboard event. If for whatever reason you wanted to fire off an event that you had previously bound to a key, you can easily 'trigger' that event by using Mousetrap.trigger.

Mousetrap.trigger('b');

This method can also take in an optional argument for the type of keypress like the other functions.

Finally, we will take a look at one last method. Mousetrap.reset is yet another useful method. The reset method will remove anything you have bound to mousetrap. This can be useful if you want to change contexts in your application without refreshing the page in your browser. Internally mousetrap keeps an associative array of all the events to listen for so reset does not actually remove or add event listeners on the document. It just sets the array to be empty.

This is only some of the functionality of Mousetrap. You can go see the rest here. Mousetrap is an awesome, easy to use library that I highly recommend using if you want to make simple keybinding events.

Getting started Koa in NodeJS

ChrisLeboeuf — Mon, 16 Mar 2020 07:17:30 +0000

So you came here to learn a little bit about Koa? As a disclaimer, I should say I am no expert, but I have at least enough knowledge to get started with this lightweight framework. So the question is, what is Koa?

First of all, you heard right. It is a very lightweight framework. With only a few things right out of the box and about 550 lines of code, Koa was created to have the core middleware functionality for NodeJS and not much more. Koa was built by the same team of creators for Express. The big difference between Express and Koa is that Express comes with much more right out of the box. Simply put, I believe the best description I can give comes straight from the Koa website itself!

By leveraging async functions, Koa allows you to ditch callbacks and greatly increase error-handling. Koa does not bundle any middleware within its core, and it provides an elegant suite of methods that make writing servers fast and enjoyable.

Now one thing to note is that koa replaces the native NodeJS req and res objects and replaces them with a context 'ctx' object. The context object has request and response properties that are used instead. Koa is designed to improve the experience of writing middleware by using async/await. These heavily reduce the amount of code needed to write middleware functions.

Now that we know what Koa is. Let's get started with a simple hello world application!

First off I won't make any assumptions here. You will want to make a directory and do a quick npm init inside of that directory. Once you do that you need just a couple more things.

npm i koa koa-router koa-logger

Of course, in order to get started with Koa, we would install Koa. Isn't that crazy? Anyway along with that, we are installing koa-router for request routing, and koa-logger for development logging. So let's get a quick app going.

Create a file index.js and copy the following code. It is a slightly modified version of the standard Koa example that you will find in most tutorials.

const Koa = require('koa');
const Router = require('koa-router');
const Logger = require('koa-logger');

const app = new Koa();
const router = new Router();

// Response to GET requests
router.get('/', async (ctx) => {
  ctx.body = 'Hello, World!\n';
});

// Logging
app.use(Logger());

// Add routes and response to the OPTIONS requests
app.use(router.routes()).use(router.allowedMethods());

// Listening to the port
app.listen(8080, () => {
  console.log('Server running on port 8080');
});

Now we can start the server!

node index.js

The server should have been successfully created! Now open the browser and go to http://localhost:8080/. You should see the Hello, World! page.

When making requests to the server, you should see in your debug console something that looks like this.

Server running on port 8080
 <-- GET /
 --> GET / 200 8ms 14b
 <-- GET /
 --> GET / 200 5ms 14b
 <-- GET /
 --> GET / 200 4ms 14b

That would be the logger going off. Very useful if you want to ensure requests are going through.

Anyways, that will be all for now. I hope you enjoyed this simple Koa tutorial and learned something new here today! I hope to see you in the next blog. Happy coding hackers!

Introduction to MySQL queries

ChrisLeboeuf — Mon, 09 Mar 2020 09:43:55 +0000

So you wanna learn about MySQL? If you really like working with backend and databases then you have come to the right place. Today I am here to teach you a thing two about MySQL queries. In my honest opinion, MySQL looked very confusing when I first started using it, but it's not so bad once you have made a few queries here and there! If you want to go really in-depth with MySQL queries, then you can go to straight to the docs here. Their docs are surprisingly okay. Personally, for most tutorials, I like to use mysqltutorial. Anyway, let's get right into the meat of it.

Assuming you already know about schemas, let's get into how to make queries onto those tables.

+-------------+---------------+-------------+--------+
| employee_id | employee_name | managner_id | salary |
+-------------+---------------+-------------+--------+
| 1           | Tommy         | 6           | 50000  |
+-------------+---------------+-------------+--------+
| 2           | Will          | 1           | 20000  |
+-------------+---------------+-------------+--------+
| 3           | Naseer        | 1           | 20000  |
+-------------+---------------+-------------+--------+
| 4           | Blake         | 6           | 40000  |
+-------------+---------------+-------------+--------+
| 5           | Gordon        | 1           | 20000  |
+-------------+---------------+-------------+--------+
| 6           | Chris         |             | 80000  |
+-------------+---------------+-------------+--------+

And let's assume we have a table named employee that looks a little something like this. With basic queries, we can select specific details, insert and update rows and even delete any data we no longer need.

For example, if we simply wanted to get Tommy's salary, given we know his employee ID.

SELECT * FROM employee where employee_id = 1;

Now we will get something like

+-------------+---------------+------------+--------+
| employee_id | employee_name | manager_id | salary |
+-------------+---------------+------------+--------+
| 1           | Tommy         | 6          | 50000  |
+-------------+---------------+------------+--------+

And an insert can be done in a few different ways. I personally like to do it this way.

INSERT INTO employee VALUES(7, 'JD', 6, 40000);

Once we do that our table will look something like this.

+-------------+---------------+-------------+--------+
| employee_id | employee_name | managner_id | salary |
+-------------+---------------+-------------+--------+
| 1           | Tommy         | 6           | 50000  |
+-------------+---------------+-------------+--------+
| 2           | Will          | 1           | 20000  |
+-------------+---------------+-------------+--------+
| 3           | Naseer        | 1           | 20000  |
+-------------+---------------+-------------+--------+
| 4           | Blake         | 6           | 40000  |
+-------------+---------------+-------------+--------+
| 5           | Gordon        | 1           | 20000  |
+-------------+---------------+-------------+--------+
| 6           | Chris         |             | 80000  |
+-------------+---------------+-------------+--------+
| 7           | JD            | 6           | 40000  |
+-------------+---------------+-------------+--------+

But oh no Gordon just did something he really wasn't supposed to, and he got fired. Now we have to delete him from our database. We just have to make a simple delete query.

DELETE FROM employee WHERE name = 'Gordon';

Now our table no longer has any trace of Gordon existing.

+-------------+---------------+-------------+--------+
| employee_id | employee_name | managner_id | salary |
+-------------+---------------+-------------+--------+
| 1           | Tommy         | 6           | 50000  |
+-------------+---------------+-------------+--------+
| 2           | Will          | 1           | 20000  |
+-------------+---------------+-------------+--------+
| 3           | Naseer        | 1           | 20000  |
+-------------+---------------+-------------+--------+
| 4           | Blake         | 6           | 40000  |
+-------------+---------------+-------------+--------+
| 6           | Chris         |             | 80000  |
+-------------+---------------+-------------+--------+
| 7           | JD            | 6           | 40000  |
+-------------+---------------+-------------+--------+

So this is what some of the more basic queries are gonna look like. They can pages long in terms of how complicated they can get. Let's provide a quick example. We are going to something called a self join.

Say we wanted to get the names of every employee's manager and every employee all in one table.

SELECT a.employee_name, 
CASE WHEN b.manager_id 
IS NOT null THEN b.employee_name
ELSE 'No Manager' AS 'manager_name'
FROM employee a, employee b
WHERE a.employee_id = b.manager_id(+);

Now that went from 0 to 100 real quick. These queries can get crazy difficult. And this one isn't even that bad compared to how bad they can get! Now once you have all that, you will end up with a table looking like this.

+---------------+--------------+
| employee_name | manager_name |
+---------------+--------------+
| Tommy         | Chris        |
+---------------+--------------+
| Will          | Tommy        |
+---------------+--------------+
| Naseer        | Tommy        |
+---------------+--------------+
| Blake         | Chris        |
+---------------+--------------+
| Chris         | No Manager   | 
+---------------+--------------+
| JD            | Chris        |
+---------------+--------------+

Alright! Now I hope you learned even just a smidge more than you did before touching this post. Hope you all have a wonderful time making your new databases. Happy coding hackers!

Introduction to React Hooks

ChrisLeboeuf — Mon, 10 Feb 2020 04:16:30 +0000

Hello there friends and fellow coders! I am here today to talk to you about React hooks. I am no expert on the subject, so please bear with me here. Anywho if have not heard much about hooks, here's the rundown. Hooks allow you to heavily reduce the need for class-based components. If you are here, you probably are at least somewhat familiar with the basics of React and know that a normal class-based component may look something like this.

import React from 'react'

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
    this.increment = this.increment.bind(this)
  }

  handleIncrement() {
    this.setState({
      count: this.state.count += 1
    })
  }

  render() {
    return (
      <div>
        <div>{this.state.count}</div>
        <button onClick={this.increment}>Click me!</button>
      </div>
    )
  }
}

Now in the above code snippet we have a fairly simple class-based/stateful component. First we set the state to start our counter at 0. Then We bound the increment function to the current this at call time, which is supposed to increase our count every time it is called. Then we render the current state and linked the function to a button. While this stateful component is fairly simple as is, using hooks can make this look much simpler.

The first thing that we should do to use any React hooks is to import the hook that we want to use so that we can access the hook when we need to. The hook used for setting state is called intuitively called 'useState', and we can import it on the same line that we imported react.

Import React, { useState } from 'react';

Now once we import the hook we can use it as we need to in our component. This hook in many cases will make it much easier to set state. We can use this hook by declaring a destructured array variable with 2 values. The first value would be the name that we want to call our current state. The second value would be the name that we would want to call a function that we will use to set the state. Then we want to call our hook with whatever default value that we would want our state to start with. It would look a little something like this.

const [count, setCount] = useState(0);

Hooks like this allow us to use to easily access and change state as we need to.

import React, { useState } from 'react'

function counter() {
  const [count, setcount] = useState(0)
  function handleIncrement() {
    setcount(count + 1)
  }

  return (
    <div>
      <div>{count}</div>
      <button onClick={handleIncrement}>+</button>
    </div>
  )
}

This code snippet does exactly the same thing that the code in our class-based component does. The difference here is that this code is noticeably much shorter than the first. We no longer have to use the 'this' keyword. We no longer have to wrap everything in a constructor or super function. Hooks are great for not only setting state, but also for manipulating state.

And with that. You have one of the basic hooks. If you would like to learn more about hooks you can go straight to the docs here!

I hope you enjoyed this short read and have at least a little better understanding of React hooks. Happy coding hackers!

Toy Problem Time: Spiral Traversal

ChrisLeboeuf — Mon, 03 Feb 2020 06:12:01 +0000

Hey there friends and fellow developers! Today I am back again to tell all of you about yet another fun toy problem, spiral traversal. This is yet another way to use recursion and a fun one at that. This one definitely had me stumped for a while and I am here to help walk through one of many ways that you might solve this problem. Anyway, lets get right into it. The problem will probably be similarly presented as such.

Write a function called traverseSpiral that accepts a 2-d array (that is, an
array containing many same-length arrays), and returns an array with every value
found, but in a spiral from the upper left to the center.

Where an input 'spiral' might look like this.

[
  [1,  2,  3,  4],
  [5,  6,  7,  8],
  [9, 10, 11, 12],
]

And the output would look like this.

[1, 2, 3, 4, 8, 12, 11, 10, 9, 5, 6, 7]

Now this may be a little overwhelming at first, especially when you think about how big a spiral can be, but it is really not half as bad as you might initially think. Let's break it down.

const travereSpiral = (matrix, spiral = []) => {
  // TODO: Your code here!

  return spiral
};

NOTE: I have started us off with an empty array as a default parameter.

The first thing you might notice is that the first four numbers from the example output are just the first element from the first array. There are many ways that you may approach this, but here is one way.

const traverseSpiral = (matrix, spiral = []) => {
  // TODO: Your code here!
  while(matrix[0].length){
    spiral.push(matrix[0].shift());
  }

  return spiral;
};

There! We pull out all the elements from the first array using shift. Now if we were to run our function with our example input this is how our input and output should look at this point. And from this point on I will be showing the input and output to give you a visual of how it looks after every piece we break down.

//input
[
  [],
  [5,  6,  7,  8],
  [9, 10, 11, 12],
]

//output
[1,  2,  3,  4]

That's one less array we have to worry about. So we have our upper left to upper right spiral completed. Just 3 more left to go! So next we need to pull out the whole right side of our matrix. How can we do that? With a simple array method, .pop()! Since we aren't going through one whole array we can just use a simple forEach here.

const traverseSpiral = (matrix, spiral = []) => {
  // TODO: Your code here!
  while(matrix[0].length){
    spiral.push(matrix[0].shift());
  }

  matrix.forEach(row =>{
    spiral.push(row.pop());
  });

  return spiral;
};

//input
[
  [],
  [5,  6,  7],
  [9, 10, 11],
]

//output
[1,  2,  3,  4, 8, 12]

So right now we have completed the first two rounds. So you might have guessed by now that the next two are very similar to the first two. And if you guessed that, then you are absolutely right! We just need to do what we did the first time, but in reverse!

const traverseSpiral = (matrix, spiral = []) => {
  // TODO: Your code here!
  while(matrix[0].length){
    spiral.push(matrix[0].shift());
  }

  matrix.forEach(row =>{
    spiral.push(row.pop());
  });

  while(matrix[matrix.length - 1].length){
    spiral.push(matrix[matrix.length - 1].pop());
  }

  matrix.reverse().forEach(row =>{
    spiral.push(row.shift());
  });

  matrix.reverse();

  return spiral;
};

Now after all that our input and output should look something like this.

//input
[
  [],
  [6,  7],
  [],
]

//output
[1,  2,  3,  4, 8, 12, 11, 10, 9, 5]

There we have our first spiral! How can we do it again you might ask, well with our friend recursion! However, before we get to using recursion, lets first filter out those pesky empty array elements in our matrix array so that we do not have any bugs in the future.

const traverseSpiral = (matrix, spiral = []) => {
  // TODO: Your code here!
  while(matrix[0].length){
    spiral.push(matrix[0].shift());
  }

  matrix.forEach(row =>{
    spiral.push(row.pop());
  });

  while(matrix[matrix.length - 1].length){
    spiral.push(matrix[matrix.length - 1].pop());
  }

  matrix.reverse().forEach(row =>{
    spiral.push(row.shift());
  });

  matrix = matrix.filter(a => a.length);

  return spiral
};

Now, all we have left to do is our base case and our recursive case. And we can simply do that by adding and modifying a few lines. And finally, we will end with our function looking something like this.

const spiralTraversal = (matrix, spiral = []) => {
  // TODO: Your code here!
  //base case
  if(!matrix.length){
    return spiral;
  }

  //top left to top right
  while(matrix[0].length){
    spiral.push(matrix[0].shift());
  }

  //top right to bottom right
  matrix.forEach(row =>{
    spiral.push(row.pop());
  });

  //bottom right to bottom left
  while(matrix[matrix.length - 1].length){
    spiral.push(matrix[matrix.length - 1].pop());
  }

  //bottom left to top left
  matrix.reverse().forEach(row =>{
    spiral.push(row.shift());
  });

  //reverse again so we can retraverse on the next iteration
  matrix.reverse();

  //filter out any empty arrays
  matrix = matrix.filter(a => a.length);

  //recursive case
  spiral = spiralTraversal(matrix, spiral);

  //return spiral and filter any undefined elements
  return spiral.filter(e => e);
};

Now I have provided some pseudocode so that you can tell how this function works its magic! Now if we run our function it should output this!

[1, 2, 3, 4, 8, 12, 11, 10, 9, 5, 6, 7]

See that wasn't so hard?

Thanks so much for reading! If you haven't read my last post in my 'Toy Problem Time' series, click here! I hope to see you in my next post. As always, happy coding hackers!

Toy Problem Time: Tree Count Leaves

ChrisLeboeuf — Sun, 26 Jan 2020 00:09:31 +0000

Hey there friends and fellow developers! Today I am going to be telling you about a fun toy problem, Tree Count Leaves. This fun little brain teaser is a good introduction to recursion. In order to start this problem, you should first at least understand a little bit about how a tree works. Anyway, the problem is presented as follows.

Implement a countLeaves method on this Tree class. 
A leaf node is any node in the tree that has no children.
countLeaves should traverse the tree, and return the number of leaf nodes the tree contains.

Inputs:
None

Outputs:
A number.

Edge Cases:
None.

Constraints:
None.

The goal is to be able to implement a function that will count every leaf node. A leaf node is a node that does not contain any children.

const Tree = function(value) {
  this.value = value;
  this.children = [];
};

/**
 * Returns the number of amount of leaves a tree has.
 */
Tree.prototype.countLeaves = function() {
  // TODO: Your code here!

};

/**
 * Add an immediate child
 * (wrap values in Tree nodes if they're not already)
 */
Tree.prototype.addChild = function(child) {
  if (!child || !(child instanceof Tree)) {
    child = new Tree(child);
  }

  if (!this.isDescendant(child)) {
    this.children.push(child);
  } else {
    throw new Error('That child is already a child of this tree');
  }

  // return the new child node for convenience
  return child;
};

/**
 * Check to see if the provided tree is a child of this tree or any of its sub trees
 */
Tree.prototype.isDescendant = function(child) {
  const childIndex = this.children.indexOf(child);

  if (childIndex !== -1) {
    // `child` is an immediate child of this tree
    return true;
  }

  return !!this.children.find(child => child.isDescendant(child));
};

/**
 * Remove an immediate child
 */
Tree.prototype.removeChild = function(child) {
  const childIndex = this.children.indexOf(child);

  if (childIndex === -1) {
    throw new Error('That node is not an immediate child of this tree');
  }

  this.children.splice(childIndex, 1);
};

Now where do we start? Given that we already know how a tree works, we know we need to recursively pass over each child node in the tree and check to see if any of those child nodes have any children. We know that we must start with a base case, given that we also know we must use recursion.

const Tree = function(value) {
  this.value = value;
  this.children = [];
};

Tree.prototype.countLeaves = function() {
  // TODO: Your code here!
  //create counter to keep track of the number of leaves. 
  let leafCount = 0;

  //if tree does not contain children, then we must increase counter.
  if(this.children.length === 0){
    count++;
  }


  //recursive case
};

Tree.prototype.addChild = function(child) { ... };
Tree.prototype.isDescendant = function(child) { ... };
Tree.prototype.removeChild = function(child) { ... };

So here we have a bit of pseudo-code and a base case to get started. Now this would work if our root node does not have any children at all, but what if we had tens or maybe hundreds of nodes in the tree, we would need to use recursion to do that!

Tree.prototype.countLeaves = function() {
  // TODO: Your code here!
  //create counter to keep track of the number of leaves. 
  let leafCount = 0;

  //if tree does not contain children, then we must increase counter.
  if(this.children.length === 0){
    count++;
  }


  //recursive case
  this.children.forEach(child =>{
    count += child.countLeaves();
  });

  return count;
};

Coolio! So here we now have both our recursive and our base case. Using recursion we run through the tree and increase the count every time we get to a leaf node. Because we are using recursion, we must add the call of the function to the count every time it passes through so that count will be saved from the return of said function.

And that's all there is to it. I hope you enjoyed my bad explanations of how recursion works. Thank you so much for reading. Happy coding, hackers!