DEV Community: John Bull

Lets Access a webcam with Vue.js

John Bull — Fri, 07 Aug 2020 18:09:03 +0000

Recently, I was tasked with creating a web application that could take pictures and store them along with some data about each record. I had no idea at first how to go about this, but with my naïve optimism in hand, I began work on the web application. I was able to choose my own stack and decided on Vue.js for the interface. It turns out that it's pretty straight forward to access the device camera and work with it.

If you want to follow along you can clone this repo and check out the start branch.

I have created a basic template to work with the video stream and manipulate the image.

Interface continued:

What we have is a big blank spot, not very exciting but we are going to fix that. Our blank spot is going to be a space for our camera feed, a few buttons below that. Finally a default image at the bottom, we will rig this up to hold a copy of the image once we take a picture.

Great, let's get started. The first thing we should do is get the camera working so we can see that image right away when we load up our app.

We know we want to use a life cycle hook so let's get that sorted by adding the following code to our script section. We also need to add these data elements.



data() {
        return {
            mediaStream: null,
            imageData: {
                image: '',
                image_orientation: 0,
            },
        }
    },




mounted() {
        navigator.mediaDevices.getUserMedia({video: true})
            .then(mediaStream => {
                    this.$refs.video.srcObject = mediaStream;
                    this.$refs.video.play()
                    this.mediaStream = mediaStream                   
            })   
    },

So now if we add a reference to the video in our template it should work, right?



<div class='ui container'>
        <video v-if="!imageData.image" ref="video" class="camera-stream" />
        <div class='ui divider'></div>
        <div class="icon-group">   
            <div  class="camera-icon">
                <i class="big camera icon" ></i>
                <p>Take Picture</p>
            </div>
            <div class='camera-icon'>
                <i class="big redo alternate icon"></i>
                <p>Rotate</p> 
            </div>
            <div  class='camera-icon'>
                <i class="big thumbs up outline icon"></i>
                <p>Done</p> 
            </div>
            <div class="camera-icon">
                <i class="big cancel icon"></i>
                <p>Cancel</p>
            </div>
        </div>
</dev>

Well yes and no.
Our code should work but the browser can't access the device without https. So we have a bit of work to do to make that happen.

I'm not an expert on each and every individual set up so I will leave helpful links to creating a self-signed cert for this project. But basically our web application needs to have the cert or it will not be able to access the device hardware this is for security reasons.

Part of the process involves setting create Vue app to run on https in the development server so we can see our progress first hand. In a vue.config.js file we need to add, with the routes to our key and cert files.



const fs = require('fs');

module.exports = {
    devServer: {
        https: {
            key: fs.readFileSync('/etc/ssl/private/my.key'),
            cert: fs.readFileSync('/etc/ssl/certs/my.crt'),
        },
    }
}

Now that we have a cert we should see our camera displayed when we open the app.

Next let's take our video stream and capture an image from it. Essentially we are storing an image as a blob for later manipulation.



captureImage() {
            const mediaStreamTrack = this.mediaStream.getVideoTracks()[0]
            const imageCapture = new window.ImageCapture(mediaStreamTrack)
            let reader = new FileReader();
            return imageCapture.takePhoto().then(blob => {
                reader.readAsDataURL(blob)
                reader.onload = () => {
                    this.imageData.image = reader.result;
                }
            })  
        }

Let's upload out blob image to our server, our backend code will need to handle converting the blog into an image file like a jpeg.
But that would be a different tutorial.



uploadImage() {
            axios({ method: "POST", "url": API_IMAGE_ENDPOINT, "data": this.imageData})
                    .then(response => {
                        this.response = response.data;    
                     })
        }

Now the other methods included in our app are used to manipulate the image since we don't know if our camera might be mounted sideways or not, this happens on many mobile devices.



rotateImage() {
            this.imageData.image_orientation = this.imageData.image_orientation + 90; 
        },
cancelImage() {
            this.imageData.image = null;
            this.showCameraModal = true;
            navigator.mediaDevices.getUserMedia({video: true})
            .then(mediaStream => {
                    this.$refs.video.srcObject = mediaStream;
                    this.$refs.video.play()
                    this.mediaStream = mediaStream                   
            }) 
        },

That should do it, we now have the ability to access the device webcam and save an image to the server. I found that not all devices follow the standard for device access api, and may need slight modifications depending on your device. I hope you enjoyed this tutorial.

Wash away the CRUD with Kafka Streaming Part3

John Bull — Thu, 11 Apr 2019 20:13:10 +0000

Kafka Streams with your web app.

In the second post, we expanded on our API by creating a Kafka Producer that displays the data from our producer and a front end with Vue.js that displays the data. Post2

And you can find the first post here for the intro.Post1

Now we want to do some processing on our data, cool. Let's stick with our initial data feed idea, and work with a csv. Lets say one of our employees in the HR department enters some data for an employees when that employee changes in some way, this could be, leaves the company, or gets promoted, all we are going to need to do is create an event id for that employee and pass it into our message system. One advantage to this is that we have a log of all changes going back for as long as the topic in Kafka has run. Let's get to it.

So we are going to have another csv file with employees and we are going to add a field called event_id as follows.

f_name,l_name,hire_date,event_id
Berta,Manby,10/17/2015,emp_chng_02
Elsi,Geharke,10/15/2017,emp_chng_02
Fay,Kirtley,12/10/2016,emp_chng_02
Sig,Dzeniskevich,6/16/2015,emp_chng_02
Nikolas,Pounsett,12/24/2018,emp_chng_02
Sutherland,Dudney,2/5/2012,emp_chng_02
Vivianna,Zolini,3/11/2014,emp_chng_02
Bran,McQuade,8/7/2017,emp_chng_02

At the moment we just have one event id that denotes any kind of change to the employees status, but you can see how we could have unique id's for different statuses we needed to account for.

Next, we are going to create another producer to read in these events to our employees' topic in Kafka.

//employeeChanges.js

const fs = require("fs");
const parse = require("csv-parse");

const kafka = require("kafka-node");
const Producer = kafka.Producer;
const client = new kafka.Client("localhost:2181");

const topic = "employees";

(KeyedMessage = kafka.KeyedMessage),
  (producer = new Producer(client)),
  (km = new KeyedMessage("key", "message")),
  (testProducerReady = false);


producer.on("error", function(err) {
  console.error("Problem with producing Kafka message " + err);
});

const inputFile = "./dataFiles/MOCK_Employee_Changes.csv";

var dataArray = [];

producer.on('ready', function() {
  var parser = parse({ delimiter: "," }, function(err, data) {
    dataArray = data;
    handleData(1);
  });

  fs.createReadStream(inputFile).pipe(parser);

  const handleData = currentData =>  {
    let messageArray = [];
    let line = dataArray[currentData];
    let dataNode = {
      f_name: line[0],
      l_name: line[1],
      hire_date: line[2],
      event_id: line[3]
    };
    // console.log(JSON.stringify(dataNode));

    //create individual message with csv parser and push them to an array.
    (KeyedMessage = kafka.KeyedMessage),
    (dataNodeKM = new KeyedMessage(dataNode.code, JSON.stringify(dataNode)));

    dataArray.forEach(element => {
      messageArray.push({ topic: topic, messages: dataNodeKM, partition: 0 }); 
    });
    let delay = 90;
    setTimeout(handleData.bind(null, currentData + 1), delay);
    produceDataMessage(messageArray);
  }

  const produceDataMessage = messageArray => {
    console.log(messageArray);
    payloads = messageArray;

    producer.send(payloads, function(err, data) {
      console.log(data);
      if (err) {
        console.log(
          "Sorry, TestProducer is not ready yet, failed to produce a message to kafka with error ==== " +
            err
        );
      }
    }); 
  }
});

There isn't a huge difference between this and our other consumer other than we are adding the field for event_id. When we run this script we should see some messages in the terminal that show the event id.

{ topic: 'employees', messages: KeyedMessage { magic: 0, attributes: 0, key: undefined, value: '{"f_name":"Bran","l_name":"McQuade","hire_date":"8/7/2017","event_id":"emp_chng_02"}', timestamp: 1555012556198 }

Now let's add some code to our frontend so that the employees with changes will be displayed.

In our Employees component, we are already looking for event id's in our API call and pushing them to an array on line 44.

    if (element.event_id==="emp_chng_02") {
          this.employeesWithChanges.push(element)
        } else {
          this.employees.push(element)
        }

So now all we need to do is add that to the template as such.


 <div class="employee-card" v-for="employee in employeesWithChanges">
        <div>{{employee.f_name }} {{employee.l_name}}</div> 
        <div>Hire date: {{employee.hire_date}}</div>  

        <div class="alert">This employee had a change</div>
 </div>

Now we should see our employees that had changes show up in the front end. It should look something like this.

Based on this example, it is hopefully easier to see how we might be able to use message streaming to implement a web application without a traditional database and query based system, where we could write and read data with Kafka producers and consumers. Confluent has built some helpful database connectors that read changes from your databases into the event system. Using all the various tools for Kafka a team can effectively marry their legacy systems with their more modern systems and easily pipe all that data into the cloud. It was quite a journey for me, and I want to be honest when I say I didn't get Kafka streams or understand how it could be used until I started looking for ways to use it in real worldish scenarios. Hopefully, Kafka Streams and message systems can become one of the many tools in your tool belt also.

Please reach out to me, follow me on twitter @jbull328, find me on the Linked In

Wash away the CRUD with Kafka Streaming Part2

John Bull — Thu, 11 Apr 2019 19:34:14 +0000

Kafka Streams with your web app.

In the first post, we got Kafka set up and created a message producer to feed some employee data into our Kafka cluster. Post1

In this next one, we will create a consumer and a front end for our application with Express and Vue.js

For our web app to take advantage of the message system we need to create a consumer. We want our data to be available when a user gets to a certain page of our website, so we want to create a little express backend that will call the consumer into action when we want it.

//server.js

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const GetMessage = require("./consumer");



const app = express();
app.use(express.static("public"));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());

app.get("/api/employees", GetMessage);

app.listen(process.env.PORT || 3000, function() {
  console.log("Kafka Frontend Dev site running");
});

We are setting up one route that tells express to run the GetMessage function on our consumer.js file. So let's look at that file.

//consumer.js
var kafka = require("kafka-node");

var express = require("express");
var router = express.Router();
var messageData = [];

const GetMessage = message => {
  var Consumer = kafka.Consumer;
  var data = [];
  const client = kafka.Client("localhost:2181");
  topics = [
    {
      topic: "employees"
    }
  ];
  const options = {
    autoCommit: true,
    fromBeginning: true
  };

Here are our setup and config options to connect to the server and connect to the topic employees.


  var consumer = new kafka.Consumer(client, topics, options);
  this.message = message


   consumer.on("message", function(message, err) {

    if (err) {
      console.log(err);
    } else {
      console.log("Here is the kafka message... " + JSON.stringify(message));
      console.log(message.value);
      data.push(message.value);

    }
      if (message.event_data === "emp_chng_02") {
        console.log("A change happened for employee " + message.f_name + " " + message.l_name + ".")
      }
      messageData.push(data);
  });
  console.log(messageData)
}

GetMessage();
router.get("/api/employees", (req, res) => {
  messageData.forEach(function(message, error) {
    if (message) {
      res.send({key: message});
    } else if (error) {
      res.status(400).send("Error, something went wrong.");
    }
  });
});

module.exports = router;

Here we are creating the consumer and catching errors as well as running the getMessage function and sending each message we get to the express route. As long as we have our server.js file running in node we should see something when we navigate to localhost:3000/api/employees. We can start to see that we could use messages from Kafka in place of a query from a database as we would in a normal CRUD Express app.

Now let's have some fun and set up a little front end to display our results. I ended up using create-vue-app because I wanted something quick and easy.

yarn global add create-vue-app

yarn create vue-app kafkaFrontend

We should see these files.

├── README.md
├── index.ejs
├── package.json
├── poi.config.js
├── src
│   ├── components
│   │   ├── App.test.js
│   │   └── App.vue
│   ├── index.js
│   └── polyfills.js
├── static
│   └── favicon.ico
└── yarn.lock

We are going to want a component to display the employees. Our template displays a card for each employee and

//employees.vue
<template>
  <div class="main" id="app">

    <div class="card-container">
        <div class="employee-card" v-for="employee in employees">
        <div>{{employee.f_name }} {{employee.l_name}}</div> 
        <div>Hire date: {{employee.hire_date}}</div>  

      </div>

    </div>
  </div>
</template>


<script>
import axios from 'axios';


export default {
  name: "Employees",
  data() {
    return {
      employees: [],
      errors: [],

    };
  },

  created() {
    axios.get('http://localhost:3000/api/employees').then((response) => {
      let responseString = response.data.key
      responseString.forEach(element => {
        element = JSON.parse(element)
        console.log(element)
        if (element.event_id==="emp_chng_02") {
          this.employeesWithChanges.push(element)
        } else {
          this.employees.push(element)
        }
      });
      console.log(this.employees);
    })
    .catch(e => {
      this.errors.push(e)
    })
  },
  components: {

  }


};
</script>


 <!-- Scoped component css -->
 <!-- It only affect current component -->
 <style scoped>
.card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

}

.employee-card {
  display: flex;
  flex-direction: column;
  padding: 38px;
  width: 145px;
  height: 86px;
  max-width: 360px;
  margin: 40px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.employee-card:hover {
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.alert {
  color: #FF4136;
  background: #001f3f;
  border: #001f3f;
}

</style>

In our App.vue file we will need to import our component.

<template>
  <div id="app">
    <employees />
  </div>
</template>

<script>
import Employees from "./components/employees.vue";

export default {
  name: 'app',
  components: {
    Employees
  }
}
</script>

We will need to bring it into our index.js file as well.

import Vue from "vue";
import Employees from "./components/employees.vue";
import { library } from '@fortawesome/fontawesome-svg-core'
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'


library.add(faExclamationTriangle)

Vue.component('font-awesome-icon', FontAwesomeIcon)


Vue.config.productionTip = false;

new Vue({
  el: '#app',
  render: h => h(Employees),
  data () {
    return {
      info: null
    }
  }
})

If we run the vue server from the console we should have the employees displayed when we go to the URL http://localhost:8080.

Lastly, We will do something with our data by adding some event id's and seeing what happens.

Part3

Wash away the CRUD with Kafka Streaming Part1

John Bull — Thu, 11 Apr 2019 16:42:22 +0000

Kafka Streams with your web app.

What is Kafka?

A streaming platform has three key capabilities:

Publish and subscribe to streams of records, similar to a message queue or enterprise messaging system.
Store streams of records in a fault-tolerant durable way.
Process streams of records as they occur.
Kafka is generally used for two broad classes of applications:

Building real-time streaming data pipelines that reliably get data between systems or applications
Building real-time streaming applications that transform or react to the streams of data
To understand how Kafka does these things, let's dive in and explore Kafka's capabilities from the bottom up.

This description is from the Kafka website.
https://kafka.apache.org/intro

OK?? So why might we want to use it?

I can think of a few use cases.

It's highly effective in leveraging legacy systems that can't easily be modified or removed.
Migrating large clusters of data to the cloud.
Creating highly reactive systems based on events.

When I first started looking into Kafka and its event-based architecture it was a bit confusing. I didn't really see how I would write programs to use the technology and its benefits seamed at best ethereal. But once I wrote a simple app to demonstrate how I could use events it became much clearer. So let's go through a simple example.

Note: I come from a web dev background, and though I am working on improving my skills with other languages I am most comfortable with Node.js so that's what I reached for in this case. You will notice that the Kafka ecosystem is built with Java in mind, and has a lot of tooling for both Java and Python, I would probably go with either of those languages in production because of the tooling options.

Step one: Setting up the Kafka Environment with Confluent.

It's a bit of a high bar to get this all playing nice, but the documentation provided by Confluent is excellent.

Link to the Ubuntu/Debian instructions because Linux: https://docs.confluent.io/current/installation/installing_cp/deb-ubuntu.html#systemd-ubuntu-debian-install


 -qO - https://packages.confluent.io/deb/5.2/archive.key | sudo apt-key add -


 add-apt-repository "deb [arch=amd64] https://packages.confluent.io/deb/5.2 stable main"


 apt-get update && sudo apt-get install confluent-community-2.12

Once installed we can run confluent start and you should see all the components start.

For this example to work with Kafka we are going to need to set up a stream of data called a producer, and something that reads that data called a consumer. We also will want some interactive element to our application

First, we will need to navigate to the Kafka install location and run a command to create the topic we will use for our messages. The trick here might be finding the install location to run the script, but once you do we will set up a simple topic as follows.


 --create --zookeeper localhost:2181 --replication-factor 1 --partitions 1 --topic employees

Then, we will create a Kafka Producer to get some of our data flowing into the events system.



//employeeProducer.js
const fs = require("fs");
const parse = require("csv-parse");

const kafka = require("kafka-node");
const Producer = kafka.Producer;
const client = new kafka.Client("localhost:2181");

const topic = "employees";

(KeyedMessage = kafka.KeyedMessage),
  (producer = new Producer(client)),
  (km = new KeyedMessage("key", "message")),
  (testProducerReady = false);

This is the config stuff that sets up which Kafka topic we will be dealing with and where to find the Kafka cluster. Think of topics like an equivalent to a database, and a message is equivalent to a record.

Next, we are going to use some of the methods provided by the Kafka Producer package we imported. We are also going to parse a CSV file with some employee data. I use this site Mockaroo to create some data for me with just first name, last, name and hire date and saved it in a directory in my application folder /datafiles/.



producer.on("ready", function() {
  console.log("Producer for tests is ready");
  testProducerReady = true;
});

producer.on("error", function(err) {
  console.error("Problem with producing Kafka message " + err);
});

//we are bringing in some data in a csv, as in this example of a legacy environment that is how it is done.

const inputFile = "./dataFiles/MOCK_Employee_DATA.csv";

let dataArray = [];

let parser = parse({ delimiter: "," }, function(err, data) {
  dataArray = data;
  handleData(1);
});

fs.createReadStream(inputFile).pipe(parser);

The function handleData will create a data node of key-value pairs for us and we are using that in the produceMessage function to pass to our Kafka Producer. I am using a set time out on the data just to see it stream in the console so we can see what's going on.



const handleData = currentData => {
  let line = dataArray[currentData];
  let dataNode = {
    f_name: line[0],
    l_name: line[1],
    hire_date: line[2],
    event_id: "emp_chg_01"
  };
  console.log(JSON.stringify(dataNode));
  produceDataMessage(dataNode);
  let delay = 20;
  setTimeout(handleData.bind(null, currentData + 1), delay);
}

//create Keyed message from parsed json data and send it to kafka
const produceDataMessage = dataNode => {
  (KeyedMessage = kafka.KeyedMessage),
    (dataNodeKM = new KeyedMessage(dataNode.code, JSON.stringify(dataNode))),
    (payloads = [{ topic: topic, messages: dataNodeKM, partition: 0 }]);
  if (testProducerReady) {
    producer.send(payloads, function(err, data) {
      console.log(data);
      if (err) {
        console.log(
          "Sorry, TestProducer is not ready yet, failed to produce message to kafka with error ==== " +
            err
        );
      }
    });
  }
}

If we run this now we should see some messages with the data from our file in it something like this.



{ employees: { '0': 948 } }
{"f_name":"Fax","l_name":"Giraudat","hire_date":"7/20/2014","event_id":"emp_chg_01"}
{ employees: { '0': 949 } }
{"f_name":"Brande","l_name":"Jewks","hire_date":"6/4/2016","event_id":"emp_chg_01"}
{ employees: { '0': 950 } }
{"f_name":"Bel","l_name":"Bromfield","hire_date":"8/10/2016","event_id":"emp_chg_01"}
{ employees: { '0': 951 } }
{"f_name":"Christophorus","l_name":"Kimbrey","hire_date":"6/4/2015","event_id":"emp_chg_01"}
{ employees: { '0': 952 } }
{"f_name":"Inga","l_name":"Reedyhough","hire_date":"7/12/2012","event_id":"emp_chg_01"}

If we have that we are in pretty good shape. So we have Kafka set up, and we can stream data to the cluster from our script, next we will create a consumer to expose these messages to a front end and finaly we will create an event based system that can react to events based on event ids.

Part 2
Part 3

Shifting gears from part time, self taught to full time bootcamp student.

John Bull — Sun, 28 Oct 2018 20:11:48 +0000

Taking the plunge.

Let's start this with a little story. I first became interested in working in tech when I went back to school at age 30. I was lucky enough to have a great teacher in my intro to programing class. I loved solving those first problems, and thought if I could do this for a living I totaly would, I had not yet learned what direction I was going to go for, so I started planning to go for the long haul and get a CS Degree.

Long story short, I took an internship as an IT Help Desk Technician and I have been working in the field ever since. At many times I have been close to my goal of working as a Developer full time. There was the time I used my skills to figure out how to automate emails to new hires at my company, and help the hr department track all the odds and ends needed to bring on new people. I currently work for an IT service center where the stress and work load are very high and I have been working very hard to leave that behind. There was the time I was hired by a local agency as a freelance front end Developer all the while scrambling to keep up with my fulltime day job. And I made it all work, somehow, subjected myself to the late nights, and finally worked my way up to be able to work one day a week on the website project at my current job, its good experience sure.I don't exactly know how many years of experience I act have since it's not fulltime but hey I have been doing this stuff for over five years all told.

So what did I decide to do. I ended up applying for and getting accepted into a fulltime bootcamp. I had always considered them as completely outside of the realm of possibility. But I started thinking about how I might make it work, without any real savings, I could not afford to pay upfront, or take out a loan. I found an online bootcamp with a deferred payment model and started trying to figure out how to make it happen. I have a family with a wife and two kiddos, so it is extremely important that I keep them in mind in making any decision that affects them. Luckily my wife has a fulltime teaching job, it doesn't pay much but it covers some bills and healthcare. I will continue freelancing for the IT firm I work at now on the website but that will be hit and miss. And I guess I will cash in on my small retirement to make ends meet.

This is an extremely difficult thing to do, a gamble and could end up being disastrous for my family. I question whether I am doing the right thing often, but keep coming back to the benafits of having all the time to devote to writing code. I know I can build things pretty well, and I know how to work with people. I honestly can't wait to take the next step on this journey. Am I not considering something? Would love your feedback or questions.

Thanks to the Dev.to community for all its collective support.

Rewrote my portfolio in React, feedback appreciated.

John Bull — Mon, 01 Oct 2018 15:19:12 +0000

I recently updated my portfolio site portfolio site with with react. I was supersized how quickly I was able to get things going and got to get my feet wet with styled components and CSS Grid, which made life pretty easy.

I am using cloudflare and have noticed that there might be some caching issues so I am hoping to track that down.

Thanks much for checking it out.

A key dependency I was using was deprecated, what did I learn?

John Bull — Mon, 24 Sep 2018 15:38:56 +0000

Well, I took some time, fumbled around with a few false starts, tried a few things that didn’t work and I am finally in the groove again on my application migration. It feels awesome, to be in the driver seat again, happily jamming away on some code and making my app come to life. So here is what I have learned don’t use a third party authentication API, just write one yourself, it will save hours and hours of time and no amount of frustration.

So what I had was a social media type of application where a user could log in create an account and add a blog and post examples of their projects that they have built. This worked well, but to get that to work with the old authentication API I was using I had to do a couple of workarounds to get a few things to work and those workarounds cased what I had to have some bad code, I can say that now looking back. At the time I was like, “This will work, for now, I will create a custom field for each user in the app’s database, essentially copying the id from my mongo database to the third-party database and then I could check if it matched for a few of my features. Now I didn’t know passprt.js at the time, so this seemed like a fair trade off, now that I have the passport.js implemented I am able to check the user through passport.js’s built-in method. This saves a ton of time, and I found a ton of these little things that I did, that is making me realize I did a ton of extra work while using this shortcut that at the time seemed reasonable.

Let’s compare the two get routes where that are essentially doing the same thing.

This first one is the old way. It isn’t that their is all that much more code, it is all the time troubleshooting and testing the extra steps and pages when in the end there is a more straightforward approach.

router.get(‘/showUser/:id’, function(req, res) {
        FccUsers.findById(req.params.id).populate(‘projects blogs’).exec(function(err, userRef) {
            if (err) {
                console.log(err);
            } else {
                Project.find(function(err, projects) {
                if (err) {
                    console.log(err);
                } else {
                    Blog.find(function(err, blogs) {
                    if (req.user &amp;&amp; userRef._id === req.user.customData.authUserID) {
                            res.render(“showUser”, {userRef: userRef, projects: projects, blogs: blogs,});
                        } else {
                            res.render(“showUserPublic”, {userRef: userRef, projects: projects, blogs: blogs,});
                        }
                    });
                }
            });
        }
    });
});

This is what I was able to refactor to.

router.get(‘/showUser/:id’, function(req, res) {
    User.findById(req.params.id).populate(‘projects blogs’).exec(function(err,                 
        userRef) {
            if (err) {
                console.log(err);
            } else {
        Project.find(function(err, projects) {
            if (err) {
            console.log(err);
            } else {
                Blog.find(function(err, blogs) {
                  res.render(“showUser”, {userRef: userRef, projects: projects, blogs: blogs,});
                });
            }
        });
      }
    });
});

Before I had to check if the user was logged in, and check if that matched my external copy of the user id. I had to do this because I couldn’t reference the user object until after the user was logged except by having a convoluted set of routes and the callback that checked back with the external system for this reference to the user. It’s quite a bit more concise and less like the callback hell that drives any sane person to the brink. I am so glad I don’t have to do that anymore. Passport.js Yall.

This is just one example but there are little things all over the code base and it’s getting a whole lot smaller now.

At first, my progress was slow, It took a couple hours to get my feet underneath me again on this project. I thought about giving up. doing a re-write of the whole thing. But I’m glad I stuck with it. After a few hours of fiddling, I’m back up to my normal, steady pace. Definitely, a learning experience and I will post a rundown when she is back up.

I know the problem with all of this is that it is all in callbacks which work fine for this project but can get a bit hellish, so in the future, it is going to be promises and async-await going forward.

If you want to check it out.

http://ec2-13-57-104-16.us-west-1.compute.amazonaws.com/

My portfolio
https://jbull.co