### What is Big O Notation?

Big O notation is a way to describe the complexity of a function. It can be used to calculate the time or memory requirements of a given function. To understand Big O notation, we need to understand the following terms:

### Basic definitions

| Term        | Definition                                    | Big O Notation |
| ----------- | --------------------------------------------- | -------------- |
| Constant    | A function that grows in a constant manner    | O(1)           |
| Linear      | A function that grows in a linear manner      | O(n)           |
| Logarithmic | A function that grows in a logarithmic manner | O(log n)       |
| Linearithmic| A function that grows in a linearithmic manner| O(n log n)     |
| Quadratic   | A function that grows in a quadratic manner   | O(n^2)         |
| Factorial   | A function that grows in a factorial manner   | O(n!)          |

We'll look at these in more detail in the next section, in order of complexity.

### Constant

`O(1)`

Constant functions are the simplest to understand and easiest to predict. They are functions that take the same amount of time to run regardless of the input size. If this function were to take `2ms` to run, it would always take `2ms` to run, regardless of the size of `n`. An example of this would be a function that takes in an array and returns the first element in the array.

```javascript
let n = [1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024];

function constant(arr) {
  let x = arr[0];
  return x;
}
//example usage:
constant(n); //returns 2
```

### Linear

`O(n)`

The most basic Big O notation is `O(n)`. This means that the function grows directly with the size of the input. Let's say we have a function that takes an array of numbers and returns the sum of all of the numbers in the array. We can use this notation to calculate the time or memory requirements of this function. Here's what that would look like:

```javascript
let n = [1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024];
function linear(arr) {
  let result = 0;
  arr.map(function (i) {
    result += i;
  });
  return result;
}

//example usage:
linear(n); //returns 1026
```

For the function `linear`, the input size is `n`, and the output size is `n`. To put this literally, if each element in the array takes `4ms` to process, then the function will take `12ms` to process, due to the array being 3 elements long. For each additional element, the function will take `4ms` more to process.

### Logarithmic

`O(log n)`

A more rapidly growing Big O notation is `O(log n)`. An example of this would be a binary search function. This is a function that takes an array of numbers and returns the index of the number that is being searched for.

```javascript
let n = [1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024];

function logarithmic(n, x) {
  let start = 0;
  let end = n.length - 1;
  let middle = Math.floor((start + end) / 2);

  while (n[middle] !== x && start <= end) {
    if (x < n[middle]) {
      end = middle - 1;
    } else {
      start = middle + 1;
    }
    middle = Math.floor((start + end) / 2);
  }
  if (n[middle] === x) {
    return middle;
  } else {
    return -1;
  }
}
//example usage:
logarithmic(n, 4); //returns 2
```

### Linearithmic

`O(n log n)`

Continuing on, we have linearithmic growth. An example of this would be a merge sort function. This is a function that takes an array of numbers `n` and sorts them in ascending order. Breaking down the complexity, we can see that the function will grow in a linear manner depending on the size of the `n`, but will also increase in complexity logarithmically with `n`. This function grows rapidly, but is able to handle large inputs.

```javascript
let n = [1024, 256, 512, 128, 32, 64, 8, 16, 2, 4, 1, 0];

function mergeSort(n) {
  if (n.length <= 1) {
    return n;
  }
  let middle = Math.floor(n.length / 2);
  let left = n.slice(0, middle);
  let right = n.slice(middle);
  function merge(x, y) {
    let result = [];
    while (x.length && y.length) {
      if (x[0] < y[0]) {
        result.push(x.shift());
      } else {
        result.push(y.shift());
      }
    }
    return result.concat(x.slice()).concat(y.slice());
  }
  return merge(mergeSort(left), mergeSort(right));
}
//example usage:
mergeSort(n); //returns [1,2,4,8,16,32,64,128,256,512,1024]
```

### Quadratic

`O(n^2)`

Next we have Quadratic growth, expressed as `O(n^2)`. An example of this would be a bubble sort function, which is a function that takes an array of numbers and sorts them in ascending order. This function will take `n` elements and compare each element to every other element. This function grows rapidly and is not recommended for large inputs.

```javascript
let n = [1024, 256, 512, 128, 32, 64, 8, 16, 2, 4, 1];

let bubbleSort = (n) => {
  let l = n.length;
  for (let i = 0; i < l; i++) {
    for (let x = 0; x < l; x++) {
      if (n[x] > n[x + 1]) {
        let y = n[x];
        n[x] = n[x + 1];
        n[x + 1] = y;
      }
    }
  }
  return n;
};
//example usage:
bubbleSort(n); //returns [1,2,4,8,16,32,64,128,256,512,1024]
```

### Factorial

`O(n!)`

Nearing the most rapidly growing Big O notation is `O(n!)`. This means that the function grows in a factorial manner. An example of this would be a function that returns every possible combination of an array of numbers. This function would take `n` elements and return `n!` possible combinations. This function grows rapidly and is not recommended for large inputs.

```javascript
let n = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
let counter = 0;
function permutations(n) {
  if (n.length <= 1) {
    return [n];
  }
  let result = [];

  for (let i = 0; i < n.length; i++) {
    let x = n.slice();
    let y = x.splice(i, 1);
    let z = permutations(x);
    for (let j = 0; j < z.length; j++) {
      counter++;
      result.push(y.concat(z[j]));
    }
  }
  return result;
}
//example usage:
permutations(n);
console.log(counter + " permutations"); //returns 32659200 permutations
```

### There's a catch

While this seems very straight forward, unknown datasets present a new challenge. In most real-world scenarios, a calculation would be done to determine the best case, worst case, and average scenerio. Take the following search function for example:

```javascript
let n = [1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024];
let counter = 0;
function search(n, x) {
  for (let i = 0; i < n.length; i++) {
    counter++;
    if (n[i] === x) {
      console.log("loops:", counter);

      return i;
    }
  }

  console.log("loops:", counter);
  return -1;
}

//example usage:
search(n, 1);
//returns loops: 1

search(n, 1024);
//returns loops: 12

search(n, 2048);
//returns loops: 23
```

With this example, the worst case scenario would be that every element gets iterated over before the target is found. This would be represented as `O(n)`. The best case scenario would be that the target is found at the beginning of the array. This would be represented as `O(1)`. When allocating resources, it is important to consider the worst case scenario and the frequency at which it may occur.

### Conclusion

While we have only covered the most commonly referenced notation types, there are many more to explore and learn about. For more information check out [This Release](https://cs50.harvard.edu/ap/2020/assets/pdfs/computational_complexity.pdf) from Harvard's CS50 materials.


A Basic Understanding of Big O Notation


### Introduction

If you've ever created a project with [Google Cloud](https://cloud.google.com/) or [Docker](https://docker.io) you might have noticed every new project gets a unique, randomly-generated name. This is an effective way to avoid naming collisions, with the added benefit of being able to easily track your projects. Let's look at how to create a scalable naming system like these, and how to put it to use in a few different ways.

### Getting started

The first thing we need to do is initialize our [Node.js](https://nodejs.org/) application. To do this quickly, lets run `npm init -y` in our project directory. This will create a generic package.json file for us, and we can edit it to our liking later.

### Setting up the file structure

When creating an application intended to scale, modularity is key. Organization is also important as other developers could eventually be working on your projects. Our file structure will look something like this:

```tree

├── package.json
├── src/
 |- index.js
 |- lists/
 |-  |- nouns.js
 |-  |- adverbs.js

```

### Our word lists

I've created some pretty lengthy lists of adverbs and nouns for you to use. You can find them [here](https://github.com/lrth06/endless-names/tree/main/lists), or create your own lists if you'd like.

### Make use of the lists

We need to update our application to import our lists, update the following code:
`src/index.js`

```js
const adverbs = require("./lists/adverbs.js");
const nouns = require("./lists/nouns.js");
```

Now that they're imported, we can use them in our application. For now, lets just see how many words we have in each list. Add the following code:
`src/index.js`

```js
console.log("Adverbs: ", adverbs.length);
console.log("Nouns: ", nouns.length);
```

If you used my lists, you should see something like this:

```bash
Adverbs:  710
Nouns:  1097
```

### Randomize all the things

For the purposes of this application, random is a good thing, each element of our name should be random and unique. To return a random element from our list, we can use the following function expression:
`src/index.js`

```js
const getRandomWord = (array) => {
  const randomIndex = Math.floor(Math.random() * array.length);
  return array[randomIndex];
};
```

We also need to create a random number, for now we'll stick with a 4 digit number. To do this, we can use the following function expression:
`src/index.js`

```js
const getRandomNumber = () => {
  let randomNumber = Math.floor(Math.random() * (9999 - 1000) + 1000);
  return randomNumber;
};
```

### Putting it all together

We need to create a function that will get a random word from each of our lists, and add a number to the end. First, we'll add the following:
`src/index.js`

```js
const adverb = getRandomWord(adverbs);
const noun = getRandomWord(nouns);

const combineWords = (adverb, noun) => {
  let result = `${adverb}-${noun}-${getRandomNumber()}`;
  return result;
};

module.exports = console.log(combineWords(adverb, noun));
```

If we've done everything correctly, we should be able to call our function and get a random name. To test this, we can run our application in our terminal:

```bash
node src/index.js
```

and we should see something like this printed out:

```bash
chronologically-broken-4521
```

Voila! We've got a random name! Now we just need to make sure our application prevents collisions, if not, we could end up with the same name multiple times.

### Keeping track of it

This is the most basic way to use our application, but we're not tracking what we've already used, so we'll need to add some logic to make sure we don't get the same name twice. For this, we'll need a datastore that is as scalable as our application. In this case, we'll use [Redis](https://redis.io/), a very popular and scalable database, and [ioRedis](https://npmjs.com/package/ioredis), a Node.js wrapper for Redis.

We'll need to initialize the redis client, to do so add the following code:
`src/index.js`

```js
const redis = require("ioredis");
const client = new redis(process.env.REDIS_URL);
```

And then add a function which will check if a redis key with the value of our name exists. If it does, we'll need to generate a new name. Once a unique name is generated, we need to return the name. To do this, we'll need to add the following code:
`src/index.js`

```js
async function getRandomName() {
  const name = combineWords(adverb, noun);
  const exists = await redis.exists(name);
  if (exists !== 0) {
    console.log("Cache hit, generating new name");
    await redis.incr("duplicates");
    return getRandomName();
  }
  await redis.set(name, name);
  return name;
}
```

if you've been following to this point, your `src/index.js` file should look something like this:

```js
const Redis = require("ioredis");
const redisUri = process.env.REDIS_URI;
const redis = new Redis(redisUri);
const adverbs = require("./lists/adverbs");
const nouns = require("./lists/nouns");
const getRandomWord = (array) => {
  const randomIndex = Math.floor(Math.random() * array.length);
  return array[randomIndex];
};

const adverb = getRandomWord(adverbs);
const noun = getRandomWord(nouns);
const randomNumber = () => {
  let randomNumber = Math.floor(Math.random() * (9999 - 1000) + 1000);
  return randomNumber;
};

const combineWords = (adverb, noun) => {
  let result = `${adverb}-${noun}-${randomNumber()}`;
  return result;
};

async function getRandomName() {
  const name = combineWords(adverb, noun);
  const exists = await redis.exists(name);
  if (exists !== 0) {
    console.log("Cache hit, generating new name");
    await redis.incr("duplicates");
    return getRandomName();
  }
  await redis.set(name, name);
  return name;
}
```

### Deploying as a serverless function

In this case, we're going to use the [gcloud](https://cloud.google.com/sdk/gcloud) command line tool to deploy our application as a serverless function to [Google Cloud Functions](https://cloud.google.com/functions). To accomplish this, we'll need to wrap our application in an asynchronous function expression. Update the following code:
`src/index.js`

```js
const Redis = require("ioredis");
const redisUri = process.env.REDIS_URI;

exports.generateName = async (req, res) => {
  const redis = new Redis(redisUri);
  const adverbs = require("./lists/adverbs");
  const nouns = require("./lists/nouns");
  const getRandomWord = (array) => {
    const randomIndex = Math.floor(Math.random() * array.length);
    return array[randomIndex];
  };

  const adverb = getRandomWord(adverbs);
  const noun = getRandomWord(nouns);
  const randomNumber = () => {
    let randomNumber = Math.floor(Math.random() * (9999 - 1000) + 1000);
    return randomNumber;
  };

  const combineWords = (adverb, noun) => {
    let result = `${adverb}-${noun}-${randomNumber()}`;
    return result;
  };

  async function getRandomName() {
    const name = combineWords(adverb, noun);
    const exists = await redis.exists(name);
    if (exists !== 0) {
      console.log("Cache hit, generating new name");
      await redis.incr("duplicates");
      return getRandomName();
    }
    await redis.set(name, name);
    return name;
  }

  const name = await getRandomName();
  res.send(name);
};
```

This change allows our function to be used as a serverless function which can be utilized by a variety of mediums. Run the following command in your terminal to authenticate with gcloud and deploy the function:

> _NOTE_ You'll need to have a project created in Google Cloud before you can deploy your function. You'll also need the Cloud Build API enabled in your project.

```bash
gcloud auth login
gcloud config set project [YOUR_PROJECT_ID]
gcloud functions deploy generateName --runtime nodejs16 --trigger-http --allow-unauthenticated --set-env-vars REDIS_URI={YOUR_REDIS_URI}
```

This process will take a few minutes to complete, and once complete, there will be a great deal of information printed out to the console. We can see that our function is deployed and we can see the URL of the function. This URL can be used to call our function from a client, or directly from the browser for testing.

### Putting it to use

In this case, we'll use the function to name projects locally utilizing a [bash](https://www.gnu.org/software/bash/) script, knowing we can reuse the same endpoint in later applications. In a new directory, create a file called `new-project.sh` and add the following code:
`new-project.sh`

```bash
#!/bin/bash
NAME=$(curl -s {YOUR_FUNCTION_URL})
echo "Creating Directory $NAME"

makeDir(){
    mkdir -p "$NAME" && cd "$NAME"
}
makeDir
```

To test our bash script, we can run the following command in our terminal:

```bash
. ./new-project.sh
```

If all goes well, we should see a new directory created with a random name from our function, and we should be in that directory ready to start working on our project. The last thing we need to do is create an alias for our bash script. To do this, we'll need to add the following code to our `.bashrc` file:
`.bashrc`

```bash
alias new-project=". /path/to/new-project.sh"
```

This will enable us to call our bash script from the command line, no matter which directory we're in. To test our new alias, we can run the following command in our terminal:

```bash
new-project
```

Which should now output something like this:

```bash
Creating Directory consquentially-silent-8851
  consquentially-silent-8851
```

### Conclusion and next steps

This serverless function can go on to be used in numerous applications with ease, and solves a very real problem with minimal effort. Stay tuned for more on this topic and others in the future!


Create a Scalable Naming System

The preferences, that is. User retention is an entirely different conversation. But as far as persisting a user's data goes, the approach is surprisingly straight forward.

### Be Safe

When storing a user's data, it is important to keep security in mind. Don't save things like a user's password or a secret key where unwanted intrusions may occur. For the purposes of this demonstration, we will only be storing the user's theme preference.

### Getting Started

In the [last tutorial](https://tobyhagan.com/blog/dark-mode-using-react) we learned how to create a dark mode toggle button:

`src/App.js`

```js
import "./App.css";
import { useEffect, useState } from "react";

function App() {
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    if (darkMode) {
      document.body.classList.add("dark");
    } else {
      document.body.classList.remove("dark");
    }
  }, [darkMode]);

  return (
    <div className="App">
      <h1>{darkMode ? "Dark Mode" : "Light Mode"}</h1>
      <p>This is a test</p>
      <button
        className="dark-mode-toggle"
        onClick={() => {
          setDarkMode(!darkMode);
        }}
      >
        <div className="dark-mode-slider" />
      </button>
    </div>
  );
}

export default App;
```

`src/App.css`

```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.App {
  height: 100vh;
  width: auto;
  text-align: center;
  font-size: 5em;
  color: #2e3440;
  background-color: #d8dee9;
  transition: all 0.2s ease;
}
.dark,
.dark .App {
  color: #d8dee9;
  background-color: #2e3440;
  transition: all 0.2s ease;
}

/* Button Styles */

.dark-mode-toggle {
  width: 80px;
  height: 36px;
  border-radius: 50px;
  top: 0;
  left: 0;
}
.dark-mode-toggle svg {
  fill: #000;
}
.dark-mode-slider {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: #2e3440;
  display: flex;
  position: relative;
  transform: translateX(0px);
  transition: all 0.2s ease;
}

.dark .dark-mode-slider {
  transform: translateX(45px);
}
```

### Where did it go?

Lets take a closer look at our functionality. When we click the button, our styling toggles between light and dark mode, awesome! If you switch to dark mode and refresh, you may notice you're right back to light mode, as that is our default setting.

### Making it stick

Lets fix this behavior by storing our preference using the [localStorage api](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)

We'll need to update our `useEffect` hook from it's current state:

```js
useEffect(() => {
  if (darkMode) {
    document.body.classList.add("dark");
  } else {
    document.body.classList.remove("dark");
  }
}, [darkMode]);
```

to the following:

```jsx
useEffect(() => {
  if (darkMode) {
    localStorage.setItem("prefersDarkMode", "true");
    document.body.classList.add("dark");
  } else {
    localStorage.setItem("prefersDarkMode", "false");
    document.body.classList.remove("dark");
  }
}, [darkMode]);
```

In this change, we've told our application to store a key value pair to our browser, but you may have noticed we are only setting the item and not using it to control our state. To accomplish this, we need to add another `useEffect` hook above the one we just edited, it should look like this:

```js
useEffect(() => {
  const storedPreference = localStorage.getItem("darkModePreference");
  if (storedPreference) {
    setDarkMode(JSON.parse(storedPreference));
  }
}, []);
```

Lets take a closer look. We are using the `getItem` method to retrieve the value of the key we set earlier, and using the `JSON.parse` method to convert the string value to a [boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean).
We're leaving the dependency array empty, because we only want this to run on the initial mount of our application. With this change complete, we are now able to refresh our page, and our theme preference is loaded without us having to toggle the button.

### Saving some time

In some cases, users will already have certain preferences available from their device, and we can use those to set our initial state. In this case, we can use the [matchMedia api](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to check if the user has a theme preference set in their device.To accomplish this, we can edit the previous `useEffect` hook to look like this:

```js
useEffect(() => {
  const storedPreference = localStorage.getItem("darkModePreference");
  if (storedPreference) {
    setDarkMode(JSON.parse(storedPreference));
  } else {
    const prefersDarkMode = window.matchMedia(
      "(prefers-color-scheme: dark)"
    ).matches;
    setDarkMode(prefersDarkMode);
  }
}, []);
```

We're using an `if` statement to check if the user has a preference set in their device. If they do, we'll set the state to the value of the preference. If not, we'll use the `matchMedia` api to check if the user prefers dark mode. If they do, we'll set the state to using the `prefers-color-scheme: dark` media query. This will return a boolean value, and we'll set `prefersDarkMode` to that value. This will trigger our initial `useEffect` hook to run, and update our application to match the user's preference.

This is all it takes to persist data. This was just a small example, but many developers find this useful for storing a multitude of non-sensitive data, without having to make expensive calls to the server among many other creative uses.


Storing User Preferences in React

### Looks Cool, But Why?

If you've ever worked in front of a screen, you probably know how it feels to finally get away from the computer, only to have your eyes strained over the course of the day. One way developers have started to combat this is the use of dark mode. Dark mode uses light text on a dark background, also leading to lower power consumption on certain devices. This is also a great tool in keeping users engaged and interested in your content.

### Creating a React App

First, we need to create a react app. The most popular way to do this is to run the following command:

```bash
npx create-react-app dark-mode-example
```

This will create a directory called `dark-mode-example`, and will install React and the necessary dependencies to get you started. Once that is complete, you should see the following in the terminal:

```bash
Success! Created dark-mode-example at /home/example/dark-mode-example
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd dark-mode-example
  npm start

Happy hacking!
```

### Verifying Installation

Now that our React app is set up, lets run `cd dark-mode-example` and `npm start` to start the development server. A Browser window will open in your default browser, and you should see the following:

<img src="https://storage.googleapis.com/tobyhagan_post_images/create-react-app.webp" width="1600" height="774" alt="Default create-react-app template" />

Now we can open our favorite text editor and start coding. I recommend using VS Code, so we can stop our development server with `ctrl + c` and then run `code .` since we're already in the project directory. For the purposes of this tutorial, we'll only be editing two files: `src/App.js` and `src/App.css`. We can start by editing `src/App.js`:

It should currently look something like this:

```js
import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```

Remove the header tag and everything within, only leaving the following:

```js
import "./App.css";

function App() {
  return <div className="App"></div>;
}

export default App;
```

Now we can edit `src/App.css`. It should currently contain the following:

```css
.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
```

We removed almost everything that relies on this file in the previous step, so remove everything except the `.App` class. The file should now look like this:

```css
.App {
  text-align: center;
}
```

While we have this file open, lets update the `.App` class, and add a few more classes we'll use in the following steps:

```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.App {
  height: 100vh;
  width: auto;
  text-align: center;
  font-size: 5em;
  color: #2e3440;
  background-color: #d8dee9;
  transition: all 0.2s ease;
}
.dark,
.dark .App {
  color: #d8dee9;
  background-color: #2e3440;
  transition: all 0.2s ease;
}
```

Lets talk about what we've done here. The first change you may notice is the `*` selector. This is a universal selector, and will apply to all elements. This serves as a simple way to reset the default styles of all elements, creating a consistent look and feel across multiple browsers. We also added a new class called `.dark`. This class will be added to the `.App` class when the user clicks the dark mode button. The new styles will be applied, and any elements that are not in the `.dark` class will not be affected.

### Making a Dark Mode Button

Lets go back to `src/App.js` and add some text, and a button to toggle dark mode on and off. We'll assign the class `.dark-mode-toggle` to the button, and use the `onClick` event to toggle Dark Mode on and off. Because we're using `useState` to toggle Dark Mode, we'll import it at the top of the filee. Then we need to create our `darkMode` variable and setDarkMode modifier. For the time being we will default to `false`, which means the app will use light mode.

```js
import "./App.css";
import { useState } from "react";

function App() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <div className="App">
      <h1>{darkMode ? "Dark Mode" : "Light Mode"}</h1>
      <p>This is a test</p>
      <button
        className="dark-mode-toggle"
        onClick={() => {
          setDarkMode(!darkMode);
        }}
      >
        {darkMode ? "Dark Mode" : "Light Mode"}
      </button>
    </div>
  );
}

export default App;
```

Once you've added the button, you can test it by clicking it. You should see the following:

<img src="https://storage.googleapis.com/tobyhagan_post_images/light-mode-tutorial.webp" width="1600" height="774" alt="Light Mode Tutorial">

Click the button and the header and button text should be updated to say `Dark Mode`, thanks to the ternary statements we just implemented. Here's what you should see after clicking the button:
<img src="https://storage.googleapis.com/tobyhagan_post_images/dark-mode-tutorial.webp" width="1600" height="774" alt="Dark Mode Tutorial">

### Make it do something

Awesome! We're toggling dark mode on and off with a button, but we're not changing any styling yet. To do this, we'll need to import `useEffect` alongside our existing `useState` hook. After importing `useEffect`, we can use it below our variable declarations. When using `useEffect`, we can pass in a function as the second argument. This function will be called after the component mounts, and will be called again whenever the `darkMode` variable changes. If the second argument is an empty function, then the effect will only run once when the component mounts. We can use this to add a listener to the `darkMode` variable, and then add or remove the `.dark` class from the body when it changes. Our `useEffect` hook will look like this:

```js
useEffect(() => {
  if (darkMode) {
    document.body.classList.add("dark");
  } else {
    document.body.classList.remove("dark");
  }
}, [darkMode]);
```

With this in place, our button starts to actually make some changes! When dark mode is active, we will see the following:
<img src="https://storage.googleapis.com/tobyhagan_post_images/dark-mode-tutorial-active.webp" width="1600" height="774" alt="Dark Mode Tutorial">

### Make it look nice

We need to update our button with a blank div to style into the slider button. First, remove the ternary statement from the label of the button, and replace it with a `div` element. Then, add a the class `.dark-mode-slider` to the div as shown below:

```js
<button
  className="dark-mode-toggle"
  onClick={() => {
    setDarkMode(!darkMode);
  }}
>
  <div className="dark-mode-slider" />
</button>
```

To achieve a nice slider look, we'll update `src/App.css` to add the `.dark-mode-toggle` and `.dark-mode-slider` classes from our button above. Add the following to `src/App.css`:

```css
/* Button Styles */

.dark-mode-toggle {
  width: 80px;
  height: 36px;
  border-radius: 50px;
  top: 0;
  left: 0;
}
.dark-mode-toggle svg {
  fill: #000;
}
.dark-mode-slider {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: #2e3440;
  display: flex;
  position: relative;
  transform: translateX(0px);
  transition: all 0.2s ease;
}

.dark .dark-mode-slider {
  transform: translateX(45px);
}
```

Here you can see we have positioned the slider to the left for our default light mode, then when the `.dark` class is added to the body, we'll move the slider to the right using CSS transitions. This will give the slider a nice sliding effect, giving your application a nice polished feel. This is just the beginning of what we can do with dark mode, as you can store values to local storage, then access them when the user returns to the site. We'll be covering this in the next tutorial.


Dark Mode Using React

## From 0 to blog in under 5 minutes

Docker can be an amazing tool for deploying and managing applications, and can streamline many tasks that used to be tedious and time-consuming. This tutorial will show you how to use set up docker in your local environment to develop a blog application. For this tutorial we will be using [Ghost](https://ghost.org/) as our blog application. Ghost is a free, open-source, and easy-to-use blogging platform with powerful features like real-time search, RSS, and email notifications.

### Lets get started

First, we need to install [Docker](https://docker.com) on our local machine. If you don't have docker installed, you can install it with the following command:

```bash
sudo apt-get update
sudo apt-get upgrade -y
curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh
sudo usermod -aG docker $USER
```

Lets break this down a little.

- `sudo apt-get update` updates the package database.
- `sudo apt-get upgrade -y` upgrades all packages currently installed on the system.
- `-y` flag tells apt to automatically answer yes to any questions it asks, which can save you time.

The  These commands are necessary to ensure that the system is up to date before installing docker.

-  `curl -fsSL https://get.docker.com -o get-docker.sh` uses curl to download a convenience script that installs docker and all necessary dependencies.
- The `-fsSl` flag tells curl to follow any redirects that the server sends.
- We're also using `-o` to tell curl to write the output to a file called `get-docker.sh`
- `sh get-docker.sh` runs the bash script and installs docker.
- And finally, `sudo usermod -aG docker $USER` To make sure that the current user can access the docker daemon, by adding them to the group "docker"

### Verify the installation

The convenience script automatically installs the latest version of docker compatible with your system. To verify that everything went smoothly, we can run the following command:

```bash
docker run hello-world
```

This command will try to find the hello-world image locally, if it is unable to do so, the image will be pulled from docker hub. Once the image has completed downloading, the hello-world program will run, printing the following to the terminal:

```bash
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
1sd6541851z: Pull complete
Digest: sha256:##HASH##
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/
```

Success! Docker is installed and running.

### Install Ghost

Now that Docker is up and running, we're ready to install our blogging platform. This is where docker really shines, as the install can be as simple as running a single command and utilizing the built-in SQLite database. For larger applications, it is recommended to use a database like MySQL or PostgreSQL, which will allow you to store data in a more robust, secure, and scalable way. For this demonstration, we'll be sticking with SQLite. To get started we'll run the following command:

```bash
docker run -d --name ghost-blog -p 2368:2368 -v /ghost-data:/var/lib/ghost/content ghost:alpine
```

In this command there are quite a few flags, so we'll go over each in more detail.

- `-d` runs the container in the background. This detaches the container from the terminal, allowing you to run further commands.
- `--name` gives the container a name. This is useful for referencing the container later.
- `-p` exposes a port on the host machine. In this case, we're binding port 2368 on the local host to port 2368 within the container. Port 2368 is the default port for Ghost.
- `-v` mounts a volume. This is neseccary to persist data. Without this, Ghost will create a new database file every time it starts. We're using the `/ghost-data` directory as the volume on the host machine. And it will mirror the content directory in the container.

We're also specifying an alpine image, which is a lightweight, minimalistic image that is optimized for running Ghost. Once the image has been pulled, it will begin running in the background. You can confirm this with the following command:

```bash
docker ps
```

after which you should see the following output:

```bash
CONTAINER ID   IMAGE          COMMAND                  CREATED          STATUS          PORTS                    NAMES
00cc984651as   ghost:alpine   "docker-entrypoint.s…"   33 minutes ago   Up 33 minutes   0.0.0.0:2368->2368/tcp   ghost-blog
#NOTE: Your container ID will be different.
```

### Check it out

At this point, you can access your blog at http://localhost:2368. If you've never used Ghost before, you'll need to create a new user by visiting http://localhost:2368/ghost and clicking "Create your account". Once you've created your own account, you'll be able return to http://localhost:2368/ghost and log in to the dashboard. To clear out the sample data, you'll need to delete the user "Ghost". To do this, click the cog icon on the bottom left of the page and select "Staff". Select the user "Ghost" and click the cog icon on the top right of the page, then click "Delete User". You'll be prompted to confirm the deletion. Once you've confirmed, you'll have cleared out the sample data and now have a fresh slate to work with!


<img src="https://storage.googleapis.com/tobyhagan_post_images/clear-data.webp" width="1000" height="602" alt="Welcome to Ghost Page">

### Make a post

Ghost has made authoring posts amazingly simple. To create a post, simply click the "New Post" button on the dashboard. You'll be greeted by Ghost's new post editor, which gives you a clean interface for Authoring. For this demonstration, we'll just be creating a test post. Input some test data and click "Publish", Ghost will ask if you want to publish now or later. Click "Publish Now" and your post is instantly available. To view your post, click the "View Post" button on the right sidebar.

### Check data persistence

Once you are satisfied with the test post, go ahead and stop the docker image by running the following command:

```bash
docker stop ghost-blog
```

then restart it with the following command:

```bash
docker start ghost-blog
```

and visit http://localhost:2368/ to see your post. You should be greeted with the test post you created in the previous step. If your post is still there, you've successfully installed Ghost and are ready to go!

<img src="https://storage.googleapis.com/tobyhagan_post_images/screencapture-localhost-2368-2022-01-02-15_47_44.webp" width="1000" height="550" alt="Test post persisted by Docker">

If you'd like to learn more about Ghost, check out the [official documentation](https://docs.ghost.org/), or the [community forum](https://forum.ghost.org/).




Deploy a Ghost Blog with Docker

## The Reason I Haven't Been Around.

When one door opens, another closes. At least thats what
&quot;they&quot; say. But maybe that is for the best more often than
not. New opportunites, new horizons, and most importantly, new
expereinces. The last few years of my life have taken some interesting
turns, but looking back I wouldnt change a thing. From the birth of my
beautiful son Asher (pictured above), to exploring new and exciting
career opportunites, things are really feeling positive.

### Theres Nothing Like it.

> Being a father has taught me so much about life

A saying you're likely familiar with, but for me it goes a little more like

> Being a father has taught me so much about myself

Patience, love, and empathy are just a few of the points
I could touch on. When I found out I was going to be a father,
I&apos;ll be honest, I was scared. I wasn&apos;t sure just what to
expect. Up to this point in my life I had been on a winding path, with
no specific goal to speak of.

<img src="https://storage.googleapis.com/tobyhagan_post_images/IMG_5765_sq.avif" alt="Asher at 1 Month" width="1" height="1"s>

### He Changed it All.

And for the better. I&apos;m finding myself with more drive, a solid
set of goals, and an ambition to succeed I&apos;ve never had before. I
can see a bright future for my family and I, and am excited to see
what challenges we will overcome along the way. After searching for a
job I could &quot;live with &quot; for what seemed like an eternity,
I&apos;ve found a career field that I truly love. To be able to enjoy
work, and come home to such a beautiful, happy family at home, I just
cant ask for more.

### Lacking Experience

Becoming a father can, for some, be more terrifying than terrific.
Thankfully, that is not the case for me, and I have my wife to thank
for that. Being the youngest of four boys, I never had much experience
with children outside of a few cousins here and there, and the growing
number of friends having children of their own over the years. Even
still, my experience was lacking, and my confidence quickly followed
suit.

### I Have His Mother to Thank.

This, however is where my wife comes in. Seeming like Superwoman in
comparison, she has worked in childcare for nearly a decade, having
seen and learned first hand, things that I can only imagine. She has
been there for me throughout this learning journey, and has taught me
some amazing things about my son that would have taken more than a few
headaches to figure out.

<img src="https://storage.googleapis.com/tobyhagan_post_images/bpQenVj.webp" alt="SuperMom" width="9" height="13.5">

Toby Hagan | Software Engineer

This is a blog about technology... and life.

Recent Posts

A Basic Understanding of Big O Notation

How to understand Big O Notation Using Common Algorithms

Create a Scalable Naming System

How to tackle the problem of naming in high-volume environments

Storing User Preferences in React

Allowing users to select preferences is great, if they stick around...

Dark Mode Using React

Dark mode is a common feature to see on modern websites, here's how to make your own with React.

Deploy a Ghost Blog with Docker

Ghost and Docker are a powerful combination that can be used to deploy a blog. This article will show you how to deploy a Ghost blog with Docker.

Hello World, Meet Asher!

The Reason I Haven't Been Around...