DEV Community: Emmy | Pixi

What is a "Closure" in JavaScript?

Emmy | Pixi — Fri, 24 Jul 2020 20:14:59 +0000

What is a "closure"?

A closure is the combination of a function enclosed with references to its surrounding state (lexical environment). It gives you access to an outer function's scope or environment from an inner function.

Consider the following code snippet:

function outerFunction() {
  let innerVar = "I'm inside outerFunction";
  function innerFunction() {
    console.log(`${innerVar}, but I can be accessed from innerFunction too!`);
  }
  innerFunction();
}

outerFunction();

// > "I'm inside outerFunction, but I can be accessed from innerFunction too!"

Lexical Scope/Environment

In the above code snippet, outerFunction creates a variable called innerVar, and a function called innerFunction. The innerFunction function is enclosed inside, and is only available within, outerFunction. innerFunction has no local variables of its own, but is able to access innerVar because they are both within the lexical scope of outerFunction.

Closure

In the initial code snippet, we called innerFunction immediately after declaring it. But what if we return the inner function instead?

function outside() {
  let myName = 'Pixi';
  function inside() {
    alert(myName);
  }
  return inside;
}

let insideOutside = outside();
insideOutside();

If we run this code, we'll get an alert with my name. But why?

The reason this works is because functions in JavaScript form closures. A closure is a combination of a function and the lexical scope within which the function was declared.

insideOutside becomes a reference to an instance of our inside function when outside is run. This instance of inside maintains a reference to its lexical scope, which allows it to maintain its reference to the myName variable.

Passing Arguments

We can use closures to our advantage in creating enclosed functions that accept arguments.

/* we create a function that accepts one argument, 
and returns a function that also accepts one argument, 
and utilizes both arguments... */
function makeMultiplier(x) {
  return function (y) {
    return x * y;
  };
}

/* we can call the outer function 
and assign it to a variable */ 
let multiplyBy2 = makeMultiplier(2);
let multiplyBy5 = makeMultiplier(5);
console.log(multiplyBy2(3)); // 6
console.log(multiplyBy5(3)); // 15

/* we can also use argument chaining to call 
both functions at once */
console.log(makeMultiplier(2)(3)); // 6
console.log(makeMultiplier(5)(3)); // 15

Our new makeMultiplier function gives us the ability to create more functions and then use those functions later.

When we create multiplyBy2, the reference to x = 2 becomes a part of the functions lexical scope. We can then use this function to multiply other numbers by 2. The same is true for multiplyBy5.

When we use argument chaining, we simply call the inner function immediately by passing an argument to makeMultiplier and immediately passing an argument to the function which it returns.

Want to learn more about scope in JavaScript?

Check out my previous post on scope and variable hoisting and let me know if you still have any questions! It might inspire a future blog post!

xx - Emily / TheCodePixi

External Resources:
MDN Closure Docs

How To: Create A Rainbow Link Hover Effect

Emmy | Pixi — Fri, 17 Jul 2020 22:25:31 +0000

So, typically I try to write pretty long, in-depth articles and tutorials. This week I do not have the energy, so we're doing a quick tutorial on how I created a rainbow hover effect for the links in the forth-coming redesign of my website and blog. This is also my first tutorial on anything CSS related! 🎉 So, let's get into it...

First, let's talk `a` tags:

As you probably already know, a tags are what we use to create both internal and external links on a webpage. We can target and add effects to links when we hover our cursor over them by using the :hover selector.

For example, let's say on my site, I have all of my a tags set to be blue by default:

a {
  color: blue;
}

And I want them to be red when they're hovered over. To accomplish that, we can simply do the following:

a:hover {
  color: red;
}

This will produce the effect demonstrated below:

Great! We can handle a basic a tag hover. Now how do we get it to be a rainbow? 🤔

Creating a `linear-gradient`

In order to create the rainbow effect we're looking for, what we need to do is apply a linear-gradient background to our text, and then use something called a background-clip to only apply that gradient to the text of our link.

First, let's create that gradient:

a {
  color: black;
  background: linear-gradient(90deg, red, orange, yellow, green, blue, purple);
}

The linear-gradient background option takes a few arguments:

First, the angle you want the direction of your gradient to be. Here, I've chosen 90deg so the gradient will go in order from left to right. (if you do not include this argument the gradient will be applied from top to bottom)
Then, you can list any number of colors you want to include in your gradient. I've chosen the full rainbow spectrum, but you could really choose any colors you like, and use any color format (CSS color names, hex color codes, HSL, RGB, etc).

Try this out and see what happens.

Oops! That's not what we were expecting...

If you tried this out, you'll notice that the gradient is, as you might expect, applied to the entire background of our text.

This is where the `background-clip` comes in...

a {
  color: black;
  background: linear-gradient(90deg, red, orange, yellow, green, blue, purple);
  background-clip: text;
  -webkit-background-clip: text;
}

Using background-clip tells your CSS exactly where you want to apply your background. Setting this option to text tells our CSS we want the background only applied to the text inside of the element we're targeting.

You can read more about background-clip on MDN, but keep in mind that background-clip: text is not widely supported yet. This effect will work best in Firefox, Edge, and Chrome, as long as you include the -webkit-background-clip option. This effect will not work in IE, which I'm sure comes as no surprise.

Now that we've added this to our CSS you might be thinking that it's not working. Your text will appear as whatever color you've specified in your CSS (here I've used black) and that's a good thing!

There's one more step...

Now, when we we :hover over our links, we want to make our link text transparent, which will allow our background gradient to show through. I'm also going to add a slight transition effect, because I like the look of the gradient slowly fading in...

a:hover {
  color: transparent;
  transition: 500ms ease;
}

Here's the final effect:

And that's it! We have a nice rainbow gradient hover effect on our links! 🎉

I really enjoy adding little touches like this to my projects because it just adds a fun little flair and some personality, plus I especially enjoying finding way to incorporate rainbows into anything I can.

Let me know if you try this out, and happy hovering!

xx -Emily / TheCodePixi

Comparing Code: Ruby, JavaScript, and Java Walk Into a Bar...

Emmy | Pixi — Sat, 11 Jul 2020 00:31:01 +0000

After nearly two years of studying and learning, I was finally starting to not feel so much like a "beginner" or a "newbie" at programming.
I've built REST APIs in Rails and Express, I've built fullstack applications using modern JavaScript frameworks, and I've queried databases using (various flavors of) SQL and GraphQL...

> And then I decided to learn Java

Suddenly, I'm a newbie again. Not quite a complete beginner, but definitely green, and getting started with Java has been an exciting experience.
Java feels like what I always imagined programming to be, moreso than Ruby or JavaScript ever did. Writing in a strictly typed language has been almost entirely new for me, outside of a little bit of dabbling with TypeScript.

My Learning Resources

So far the thing that has surprised me the most about Java is how little I hate it. That might sound weird, but with the reactions I've received to telling people "Hey, I'm learning Java!", you'd think I'd decided to sell my first born child's soul to the Computer Science devil or something. But it actually hasn't been too bad, too big of a departure from what I already know, or too big of a barrier to entry.

The particularly excellent thing about Java is that because it is so ubiquitous, and so pervasive and popular, there are a wealth of resources available for you to learn it, and significant number of them are free or very affordable.

The two resources that I've personally been using are the wonderful Java Programming course by Angie Jones at Test Automation U, and the Java Developer learning path on JetBrains Academy.

Angie's Java Programming course is completely free and perfect for people who want to get up to speed quickly. She covers all of the Java essentials, with quizzes and homework assignments built in along the way so you can test your learning as you go.

The JetBrain's Academy program is surprisingly affordable, and a better option for people who prefer a more regimented course, and are starting from absolute zero. Even if you have no prior programming experience, you can tailor the JetBrain's curriculum to your needs. And if you have prior experience from learning another language, you're given the option to skip sections of the curriculum you're already comfortable with.

OK, now let's get to the tutorial ...

What I've decided to do with this tutorial is to show you how to code something fairly basic, and compare the solutions side by side in Ruby, JavaScript and Java. I like doing this when I'm learning (coding the same thing I'm learning in the languages I'm already comfortable with) because it's a good exercise to see how things translate. Just like how if you were translating a sentence into another language, you'd already want to know how the sentence should be structured in your native language, before trying to do the translation.

So today we're going to write a short program to calculate the quantities we need to brew a particular amount of coffee.
(Get it? Java? JetBrains made this joke too, don't @ me, lol)

What we know we need:

20g of coffee per cup
14 oz of water per cup

We're going to keep it to just those two variables, to keep things as simple as possible. Our only unknown variable is the number of cups of coffee that we want to make. That will be what we pass in to the function/method as a parameter/argument.

Let's say we're having some friends over, so want to make 5 cups of coffee.

Here's how we could write this in Ruby...

# main.rb

# set up a coffee maker class
class CoffeeMaker

  # variables for the amount of coffee and water per cup can only be read
  attr_reader :coffeeGramsPerCup, :waterOzPerCup
  # cupsToMake can be altered as needed
  attr_accessor :cupsToMake

  # class initializer takes in the quantity of coffee to make
  def initialize(cupsToMake)
    @coffeeGramsPerCup = 20
    @waterOzPerCup = 14
    @cupsToMake = cupsToMake
  end

  # a method that calculates the quantities needed and outputs a string to the console
  def makeCoffee
    waterNeeded = @waterOzPerCup * @cupsToMake
    coffeeNeeded = @coffeeGramsPerCup * @cupsToMake

    print "You will need #{waterNeeded} oz of water and #{coffeeNeeded} grams of coffee beans \nto make #{@cupsToMake} cups of coffee."
  end

end

# initialize a coffee maker and call the makeCoffee method
# passing it the quantity of coffee we'd like to make
myOrder = CoffeeMaker.new(5)
myOrder.makeCoffee

# Console Output:
# > You will need 70 oz of water and 100 grams of coffee to make 5 cups of coffee.

Ruby is a great candidate for comparison to Java, because it is also an Object Oriented Language, and lets us handle things in very similar ways.

In the example above, we've created a class called CoffeeMaker, and given it class variables to handle what we know already (the amount of coffee and water needed per cup), and we initialize the instance of the class with the number of cups of coffee we'd like to make. Then, we call the method makeCoffee which calculates our coffee and water needs and outputs the result to the console.

And now we can try it in JavaScript...

// index.js

// global variables for coffee and water
const COFFEE = 20;
const WATER = 14;

// create our coffeeMaker function, where n is the requested number of cups
function coffeeMaker(n) {
  let coffeeNeeded = n * COFFEE;
  let waterNeeded = n * WATER;

  console.log(
    `You will need ${waterNeeded} oz. of water and ${coffeeNeeded} grams of coffee, to make ${n} cups of coffee.`
  );
};

// call our coffeeMaker function
coffeeMaker(5);

// Console Output:
// > You will need 70 oz of water and 100 grams of coffee to make 5 cups of coffee.

That looks little more streamlined! Since JavaScript is not an Object Oriented language by default, we can simply declare some global variables, write a function, call the function, and call it a day. We could also call this function from anywhere we want to as long as we export it and require the file containing it, regardless of whether what we're writing really has anything to do with making coffee.

There are object oriented approaches you could use in JavaScript, but I decided to show the functional version here, because there are always trade-offs to each methodology.

In the Ruby version, we created a variable that contains our initialization of our coffee order, myOrder. If we ended up wanting a different quantity of coffee, we can simply reassign the value of cupsToMake by calling the setter method on myOrder. Then we can makeCoffee again, without initializing a new CoffeeMaker.

And finally, here's how I've written this in Java...


public class CoffeeMaker {

  // private class 'fields', so they cannot be altered
    private int coffeePerCup = 20;
    private int waterPerCup = 14;
    // cupsToMake is a 'public' variable so we get a 'setter' method
    public int cupsToMake;

    // initialize class with number of cups of coffee requested
    public CoffeeMaker(int cupsToMake) {
        this.cupsToMake = cupsToMake;
    }

    // method to make coffee
    public void makeCoffee() {
        int coffeeNeeded = coffeePerCup * cupsToMake;
        int waterNeeded = waterPerCup * cupsToMake;

        System.out.println("You will need " + waterNeeded + " oz. of water and " + coffeeNeeded + " grams of coffee beans to make " + cupsToMake + " cups of coffee.");
    }

    public static void main(String[] args) {
        // Yep! we're initializing an instance of the class inside the class itself!
        CoffeeMaker myOrder = new CoffeeMaker(5);
        myOrder.makeCoffee();

        // Console Output
        // > You will need 70 oz of water and 100 grams of coffee to make 5 cups of coffee.
    }

}

This approach is fairly similar to Ruby, and I hope I wrote them in a way that you're able to see the similarities between the two blocks of code.

We have some class level variables that are constant and immutable (there is no 'setter' method to alter them), and we have our public cupsToMake variable that can be updated as needed.

We create a method called makeCoffee that calculates the quantities, and outputs the results, that we can call on any instance of our CoffeeMaker.

The benefits of the Object Oriented approach are the same across OO languages. I find reusability of classes, and instances of classes, appealing. I enjoy being able to say "OK here's my instance of CLASS and now I'm going to do X Y Z to only this instance."

I hope this weird romp through some Ruby/JavaScript/Java code was fun for someone other than me! I hope it encourages some people who might be wary of Java to give it a try. It's not a scary as it first seems, and can be really approachable when you choose the right learning tools.

And if you're a Java developer looking at this and ripping their hair out, PLEASE LET ME KNOW! My goal is simply to keep improving, so I'll take any tips or knowhow you're willing to throw my way.

-Emily / TheCodePixi

P.S. You can follow me on Twitter and read more of my writing on my blog

Fullstack Project Planning

Emmy | Pixi — Sat, 04 Jul 2020 03:31:45 +0000

So, this week I meant to put up the next post in my MERN stack project series, but I realized that I was leaving out a huge part of the project-process by not talking about proper project planning. For most of my projects, especially recently, I've been following a planning process that helps me breakdown the project into component parts that help me build more efficiently.

Here's a basic project planning breakdown:

Scope
Database Modeling
API Endpoint Planning
Backend Build
Backend Testing
Wireframing/Sketches
Component Planning
Frontend Build
Frontend Testing

Below are the questions and elements of each part of the process...

Scope

This step simply involves planning the scope of the project in question. Are you building both a backend and frontend? Do you need to account for user authentication? Will you be using any external/third-party APIs?

Database Modeling

If you've decided to build a fullstack project, what database will you be using? What database models will you need? If you're using a relational database, what relationships do you need between models? If you're using MongoDB, do you have a cluster available to put your collection in?

API Endpoint Planning

You've got your database set up, so now it's time to plan out your endpoints! Do you need full CRUD endpoints for every model? Are you planning to handle query parameters with your API? Which endpoints will be public, and which will be protected? How will you protect those endpoints that aren't publicly accessible?

Backend Build

Time to build!! Are you using Rails, Express, Django, or something else? Where will you host your API?

Backend Testing

Test your code, folks! Build out tests as you go with your testing framework/tool of choice. I also really love using something like Postwoman/Postman or Insomnia for manually testing API endpoints. They let you mock your API calls to make sure your responses are coming through as expected.

Wireframing / Sketches

We made it to the frontend design! 🎉
This step is crucial and is the step I most frequently skip and I always regret it.
Even if you don't consider yourself a designer, sketching out a basic concept layout makes the coding process so much easier. This step is even easier if you're using a UI library like Material UI or Bootstrap, because you can plan out which components/classes you'll use ahead of time.

Component Planning

If you're using a component based framework like React, it's a really good idea to look at your sketches and break them down into components. Where are your containers? Which components maintain state? Can you create a "single source of truth" for your app to keep your state in check? Planning this out ahead of time will save you so much frustration later on.

Frontend Build

We did it, y'all! We made it to the frontend build process!
Even though this is ostensibly the last step, it could certainly be one of the longest.
Do you know which frameworks or CSS pre-processors you'll use, if any? Do you have your fonts, and colors, and style elements chosen? Are you using them consistently? Are you designing mobile-first and for accessibility? If not, you should be!

Frontend Testing

This step is coupled with the prior build test. Write your tests as you go, and make sure you're covering edge cases appropriately. How are you handling errors from a UI perspective? Does your app or site fail well? If not, how can you better handle errors for your users?

User Testing

If you want to be really ambitious, and don't mind sharing your project with others, it's a great idea to get some opinions from users. They might find edge cases you missed, or have suggestions for improving your app that you might be too close to the project to see on your own.

For beginners working on their first portfolio project, this list can feel really long and really intimidating, but fear not! My favorite thing about this list, and this process, is that each step is relatively self contained, and each one builds on the last. And you don't necessarily have to have everything planned ahead of time. Maybe you'll plan out the database and API endpoints, and start on your backend build, before you really start thinking much about your front end. Or maybe you'll design a really beautiful frontend mockup and then plan out a backend to fit into that design.

Either way, planning is your friend! I've only really recently gotten a handle on proper project planning and it's made the process so much more efficient.

I hope this list helps you get your next project finished just a little bit more efficiently!

xx
Emily / TheCodePixi

This article was originally posted on TheCodePixi.dev/blog

REST API with CRUD using Express and Mongoose

Emmy | Pixi — Sun, 21 Jun 2020 00:01:35 +0000

Previously in this series we walked through setting up your first Express server, and then setting up the beginnings of an Express API with Mongoose/MongoDB data storage.

This post will jump off exactly where we left of in the previous post, so if you haven't been following along, I recommend at least going back and reading through that post first.

If you prefer to jump straight into the code, you can find that here

And if you prefer to learn by watching video tutorials, you can watch the live stream of this entire API build here

Getting Started...

In the last installment in this series, we left off with having just completed our first Mongoose Schema and database Model. This means we're ready to start building our router and our API endpoints!

The first thing we need to do is create a new folder in the top level directory of our project called routers and put a file inside that folder called puppy.js

$ mkdir routers
$ touch puppy.js

Then we want to tell our Express server (in index.js) that we want to use(puppy.js) for our Puppy routing endpoints.

Here's how we'll do this:

// index.js

const puppyRouter = require("./routers/puppy")
app.use("/puppies", puppyRouter)

these new lines of code can go directly beneath your Mongoose connection function call

What the above is doing is telling our Express server that for any endpoint starting with /puppies we want it to use the routing specified in our puppy.js file.

Now What?

So we've told our Express server to use the puppy router. Now what do we put in there to make this work?

To start writing our routes, we first need to open up our puppy.js file and add some requirements.

First, in order to create our routes, we need to require the Express Router:

//puppy.js
const router = require("express").Router()

This router constant will be used to call all of our routing functions.

Then we also need to require the Puppy model we previously created, so that we can use our model to acces and make changes to data in our MongoDB database.

//puppy.js
const router = require("express").Router()
const Puppy = require("../models/Puppy.model")

Creating a route in Express is as easy as using the correct HTTP verb function (ie: get, post, etc) and pass in the route we want to use to preform that action.

the rest of the code in this tutorial is going to be written inside of puppy.js

Reading from our MongoDB Collection

We're going to start off easy and write a route to access all of our puppies!

To do this, we're going to access our Puppy model using some built-in Mongoose functions. Since our const Puppy points to a Mongoose model, we don't also need to require(mongoose) here, which I think is a nice perk!

First, we need to set up an Express get request:

router.get("/", (req, res) => {
  res.send("Gimme the puppies!")
})

If you go ahead and start your server (using the dev script we added in a previous lesson) and navigate to localhost:5000/puppies/ you should see the string 'Gimme the puppies!'.

What's happening here is we are telling Express we want to get the / route, and then we pass a callback that includes the req (or request object), and the res (or response). Then we're telling Express the send the string "Gimme the puppies!" as our response.

Pretty cool, right!?

Now, let's get fancy

We're going to add onto this route and use the built in Mongoose method find to access every Puppy in our collection.

router.get("/", (req, res) => {
  Puppy.find()
    .then(puppies => res.json(puppies))
    .catch(err => res.status(400).json("Error: " + err))
})

Above, we are using the the same get request frame, and now we're using the Mongoose find method to access all of the instances of Puppy in our collection, and send them back to the response as JSON.

Since find is an asynchronous function, we use then to access and take action on the data that gets returned to us, only once the data has been returned. We also include a catch just in case there's an error. In this case, if there's an error, we send back a 400 status code to indicate a server error, and send back the error details as JSON. (we will use this error format for every database request we write in this tutorial)

Now if you were to look at this route in your browser, you'll see nothing returned. And that's a good thing! We haven't added a Puppy to our collection yet, so there's nothing to be returned.

Let's fix that...

Updating Our Collection

Before we get started with sending our data to our database, we need a way to do that. My preferred method is a product called Postman. Postman allows you to manually test API endpoints by creating request bodies manually without needing an actual GUI form or interactive element to send your data with.

Go ahead and download Postman, and then come back for this next part, or if you have another API interaction tool you prefer feel free to use that!

Now that we have Postman, and are able to test our endpoints, we can go ahead and set up our first post route.

router.post("/", (req, res) => {
  const name = req.body.name
  const breed = req.body.breed
  const age = Number(req.body.age)
  const cute = req.body.cute
  const well_behaved = req.body.well_behaved
  const adopted = req.body.adopted

  const newPuppy = new Puppy({
    name,
    breed,
    age,
    cute,
    well_behaved,
    adopted,
  })

  newPuppy
    .save()
    .then(() => res.json("New puppy created!"))
    .catch(err => res.status(400).json("Error: " + err))
})

This one's pretty long, so let's step through this code and talk about what's happening.

First, we set up our post request route, and pass in the root route (/). This will send the post request to /puppies/, which is the RESTful endpoint for adding new instances to our collection.

Then, we create some variables from the data passed in from our req.body, or the body of our request. When we test this endpoint, we're going to be passing in a set of key-value pairs where the key is the same as the data column we want to add to for this Puppy. If you know that your data will always been passed to the API in this format (via some sort of client-side validation, for example) you can alternatively pass the entire req.body to new Puppy().

We then take all of those variables and use them to create a new instance of our Puppy model. Once we have our instance of a Puppy, we can use the built in Mongoose function save to add this Puppy to our MongoDB collection. Just like the find method, the save method is asynchronous, so we will use then to send back our response. The save method does not return any data by default, so instead we'll just send back the string "New puppy created!" to indicate success here.

Now we can save our router file and test this out in Postman!

In the example above, you can see that I've chosen the post verb option from the dropdown on the left-hand side, passed in our full URL (localhost:5000/puppies/) and then used the request body creator below to pass in my Puppy data as raw JSON. (Make sure to choose JSON from the dropdown!)

Here's the puppy I created:

//req.body
{
  "name": "Hank",
  "breed": "English Springer Spaniel",
  "age": 10,
  "cute": true,
  "well_behaved": false,
  "adopted": true
}

Then we can click "Send" and the result panel at the bottom will read "New puppy created!"

Now if we create a new tab using the + symbol button at the top, we can create a get request to /puppies/ and see our new Puppy returned to us from the database!

Now we get back the puppy we created, and we can see that MongoDB automatically gave our instance of a Puppy an _id field populated with a unique ID code. We'll be using this _id field to get individual instances of a Puppy, as well as making updates via put request, and eventually, sadly, delete-ing puppies if necessary.

Reading Specific Data

Now that we know how to add puppies to our collection, it's understandable that we won't always want to get information about every single Puppy in our collection. Personally, I'm most interested in Hank, because he's my puppy. So how do I access only the data about him?

We can use a method that's very similar to the find method we used previously. Mongoose provides us with the method findById, and it does exactly what it says on the tin. We simply pass in the _id of the Puppy we want to find.

To get access to the _id information, we're going to use a route parameter by adding on to our base /puppies/ route. Here's the get request we'll be using:

router.get("/:id", (req, res) => {
  res.send(`The id you want to get is ${req.params.id}`)
})

Using the above, if you navigate to localhost:5000/puppies/123, you should see the string "The id you want to get is 123" in your browser window.

We'll be using req.params.id to send a specific _id to MongoDB in order to access the specific Puppy we want.

router.get("/:id", (req, res) => {
  Puppy.findById(req.params.id)
    .then(puppy => res.json(puppy))
    .catch(err => res.status(400).json("Error: " + err))
})

Now, we're using the aforementioned findById method, coupled with the id passed to us from req.params.id to request only that instance of a Puppy, and send the data back as JSON.

We can test this in Postman, using the _id that was assigned to the Puppy we previously created...

your _id will be different, as each _id is completely unique

As you should see above, we make a get request to /puppies/:id, passing in the _id for our previously created Puppy in place of :id, and we get back that instance of Puppy.

If you want to test this out further, I encourage you to create a few more Puppy instances using our previously created post route, and then access each of them one at a time using this new route.

Updating Instances

Now that we're able to get data to and from our database, we also want to be able to make changes. In the event that a Puppy ages, gets adopted, or gets some training and becomes well behaved, we want to be able to update those details in our database.

This process is an amalgamation of what we've done so far. It's similar to get-ting and post-ing an individual instance of a Puppy. Remember how Mongoose gave us a convenient findById method? Mongoose also gives us a findOneAndUpdate method for finding and updating instances.

However, in order to use this function, we need to make an update to our mongoose.connect function in our index.js file.

// index.js
mongoose.connect(uri, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useFindAndModify: false, // this is the new line of code we're adding
})

In the above code block, passing another option to our connect function and telling Mongoose to set useFindAndModify to false. This will allow us to use the Mongoose findOneAndUpdate method. It's not important in this use case to understand why we're doing this, but if you want to learn more about this, you can check out the Mongoose documentation.

Now that we've got that sorted out, we can create our update route using the put http verb...

router.put("/:id/update", (req, res) => {
  let updates = req.body //we set a variable equal to the entire req.body

  Puppy.findOneAndUpdate({ _id: req.params.id }, updates, { new: true })
    .then(updatedPuppy => res.json(updatedPuppy))
    .catch(err => res.status(400).json("Error: " + err))
})

In this scenario, we are assuming that the only data being passed in the req.body are the updates being made to this specific puppy. Otherwise, we would need to write some extra code to extract the specific updates being made.

findOneAndUpdate conveniently indentifies whether the instance being accessed already has the key (or multiple keys) being passed in by the update object. And since we created this model using a schema, we are only allowed to update columns that already exist. If we were to try to send an update that included a column that does not exist, no updates will be made to the database.

findOneAndUpdate takes in 2 required arguments, and one optional:
First we find the Puppy we're targeting by looking for a Puppy instance with a matching _id ({ _id: req.params.id }), then we pass in the updates variable as the second argument. We can also include { new: true } as an optional third argument, which will cause the updated Puppy data to be returned from the function.

We can test this new endpoint, again using Postman. Let's say I got my Puppy Hank some training lessons, and he's now perfectly well behaved. I can send an update to this endpoint, and in the request body test well_behaved to true:

You should see above that I sent the request to this new endpoint that I described above, and in the reponse we see the updated Puppy instance for Hank, where well_behaved is now set to true.

Deleting Data

Sadly, the only thing left to do is to delete some of our puppies.

Since you've been following along, I bet you can guess what http verb we need to use this time: delete!

Similarly to the built in findOneAndUpdate method, Mongoose also provides us with a convenient findByIdAndDelete method.

Here's how we'll utilize this method in our API:

router.delete("/:id", (req, res) => {
  Puppy.findByIdAndDelete(req.params.id)
    .then(() => res.json("Puppy deleted =( "))
    .catch(err => res.status(400).json("Error: " + err))
})

This works pretty similarly to our findById method. We pass in the _id of our Puppy as a request param, and the method does the rest of the work for us. As with all of our other Mongoose methods, this is asynchronous, and like the save method does not return any data to us. Instead we send back the string "Puppy deleted =(" to indicate successful deletion.

Test this route at your own peril, because deleting puppies is pretty sad!

Wrapping Up

Congrats! You made it through every single CRUD action with Express and Mongoose! Now it's time to celebrate 🎉

If you made it this far I just want to say: Thank you and I'm so proud of you!

I encourage you to use what you've learned here to build your own REST API with Express and Mongoose to practice what you've learned.

If you do follow this tutorial and build an API of your own I'd love to see it! Share what you've made with on Twitter

If you want to find out when I put out new blog posts and tutorials, you can follow me on Twitter, where I always post links as soon as my new posts are available.

This tutorial was originally posted on TheCodePixi.dev/blog

Enamel Pins for Developers

Emmy | Pixi — Fri, 12 Jun 2020 01:47:03 +0000

We all know developers (myself included) love their stickers!

We cover our laptops in them, stick them on our cars, our notebooks, everywhere sticky things will...ya know...stick.

But what about sticking things...on ourselves!?

I have always been a huge fan of enamel pins, and have amassed a decent collection of them over the years.

Despite the absolute wealth of development, programming, and coding related stickers there are in the world, I had a genuinely difficult (almost impossible) time finding any enamel pins that fit the theme.

So, I decided to make my own! 🎉

My first two pin designs are available for pre-order on my website, and I'm looking forward to designing many many more in the future.

If you're also a pin collector, or have any cool coding-related pin ideas, let me know in the comments!

xx - Emily / Pixi

Setting Up An Express API with Mongoose

Emmy | Pixi — Thu, 11 Jun 2020 15:01:03 +0000

This is a continuation of a series on Express. If you have never used Express before I recommend starting here instead.

This is Part 1 of a 2 part tutorial. Part 2 coming soon...

If you prefer to jump straight into the code, you can find the repo for this tutorial here

Let's get started...

To get started with writing a REST API with Express, we first need to set up our project folder.

Let's open up a terminal and cd into where ever we want to work on our coding projects. For me, that's cd code.

Then we want to create a new folder for our project to live in, and initialize our package.json:

$ mkdir express-rest-api
$ cd express-rest-api
$ yarn init -y

I'm choosing to use yarn as my package manager, but you can use npm if you prefer. Both will work the same for this project

Now we need to add all of the dependencies for our project. There are quite a few, so let's go over them quickly, one by one:

express : Express is a minimal and flexible Node.js web application framework.
nodemon : Nodemon is a utility that automatically restarts your server on save to provide "hot reloading" and increased efficiency (this will be installed as a devDepenency)
dotenv : Dotenv allows us to store private/secret information (like our MongoDB URI) in a .env file and access that information using a variable instead of plain text inside our code.
cors: CORS stands for 'Cross Origin Resource Sharing'. We'll get into what that means a little later on when we start sending things like POST requests.
mongoose: Mongoose is the MongoDB framework that we'll be using to create our database Schema and access our database models. (you can build this without Mongoose and just use MongoDB but I personally really enjoy Mongoose and find it to be a useful tool)

We can add most of these packages in a single command from our terminal:

$ yarn add express cors mongoose dotenv

Then we can add nodemon to our devDependencies by adding the -D flag:

$ yarn add -D nodemon

Basic Express Server Setup

The "entry point" for this project is index.js so we can create that using touch index.js and then open that file in our favorite code editor (I'm using VS Code).

The first thing we want to do is set up our basic Express server. Most of this process is covered in the first part of this series, so I won't go into too much detail on this here...

// index.js
const express = require("express")
const app = express()

const PORT = process.env.PORT || 5000

app.listen(PORT, () => console.log(`Server running on port ${PORT}`))

// add this scripts object to your package.json 
"scripts": {
  "dev": "nodemon index",
  "run": "node index"
}

Now you can run yarn run dev (or npm run dev) from the terminal and you should see your console log "Server running on port 5000". If you change the string inside the console.log, since we are using nodemon, when you save the file you should see the terminal register that the server has restarted, and you should see your updated output logged in the terminal.

🎉 Now we can start building our API!

Since "To Do" apps are so 2018, we're going to be building an API to store and receive data about puppies. 🐶

MongoDB Setup

First, since we're going to be using MongoDB as our database, coupled with the Mongoose framework, there's some setup that needs to be done to get a MongoDB Atlas account set up.

MongoDB has a great tutorial on that here that you should follow. When you have your MongoDB Atlas setup, come back here when you get to Step 5 of their tutorial and we'll move on to the next step together...

Oh, Great! You're Back!

So now you should have your MongoDB Atlas URI available. The string should look something like this:

mongodb+srv://<username>:<password>@clustername.mongodb.net/<dbName>?retryWrites=true&w=majority&useNewUrlParser=true&useUnifiedTopology=true

We're going to add an .env file to our project, and store this string (replacing username, password with your cluster admin info).

First we'll touch .env inside of our project directory, and then we'll add the following to that file:

  ATLAS_URI=mongodb+srv://yourUsername:yourPassword@clustername.mongodb.net/puppies?retryWrites=true&w=majority&useNewUrlParser=true&useUnifiedTopology=true

You can see we replaced <username> with yourUsername (your Atlas admin username), and <password> with yourPassword (your Atlas admin password).

We also replaced <dbName> with puppies, which is what our database will be called when it gets added to our MongoDB Atlas Cluster.

Now we want to add this info to index.js so our app can connect to MongoDB via Mongoose:

//add require statements for mongoose, cors, and body-parser (for parsing json)
const mongoose = require("mongoose")
const cors = require("cors")
const bodyParser = require("body-parser")

//require dotenv to access variables inside .env
require("dotenv").config()

//tell our express app to use cors and bodyParser
app.use(cors())
app.use(bodyParser.json())

//connect our app to MongoDB with Mongoose
const uri = process.env.ATLAS_URI
mongoose.connect(uri)
const connection = mongoose.connection

//open our MongoDB connection
connection.once("open", () => {
  console.log("MongoDB connection established")
})

Now, if you're still running your server you should see "MongoDB connection established" output to your console! If you're not still running your server, start it using the dev script we created earlier, and you should see both the Server running and the MongoDB connection logs in your terminal

**If you run into any errors with your MongoDB connection you may need to add a second argument to your mongoose.connect() function with the follow:

{
  "useNewUrlParser": true,
  "useUnifiedTopology": true,
  "useCreateIndex": true
}

However, since these options are specified in the our ATLAS_URI, we hopefully shouldn't run into any errors.

Creating our Model and Schema

Since we're building a relatively simple API, we're just going to have one model and one schema. We're going to put this model in a folder called Models

$ mkdir models
$ touch models/Puppy.model.js

To create our Schema we need to require('mongoose') and create a Schema variable:

//Puppy.model.js
const mongoose = require("mongoose")
const Schema = mongoose.Schema

const puppySchema = new Schema({})

const Puppy = mongoose.model("Puppy", puppySchema)

module.exports = Puppy

We're going to put the definitions for all of the keys of our Puppy model in the new Schema({}) assigned to puppySchema. MongoDB offers all of the standard data types, and Mongoose provides validations for these types. We'll be exploring a few different data types and validations with this model.

We want all of our Puppies to have a name, age, and breed, and we're also going to give them each Boolean values of cute,well-behaved, and adopted.

Let's add these to our Schema (I've included code comments to explain the validations and typing along the way):

//Puppy.model.js
const mongoose = require("mongoose")
const Schema = mongoose.Schema

const puppySchema = new Schema({
  name: {
    //we want each name to be a string
    type: String,
    //puppies have to have names!
    required: true,
    //this will remove trailing whitespace from the string
    trim: true,
    //each puppy name must be at least 3 characters long
    minLength: 3,
  },
  breed: {
    //breed has the same requirements as name
    type: String,
    required: true,
    trim: true,
    minLength: 3,
  },
  age: {
    //we'll be using ages in months
    type: Number,
    //even puppies can't be ageless
    required: true,
    //puppies can't have negative ages
    min: 0,
    //once they get about 12 months, they're not puppies anymore!
    max: 12,
  },
  cute: {
    // you're either cute or you're not
    type: Boolean,
    required: true,
  },
  well_behaved: {
    type: Boolean,
    required: true
  },
  adopted: {
    type: Boolean,
    required: true
  }
})

const Puppy = mongoose.model("Puppy", puppySchema)

module.exports = Puppy

🎉🎉🎉 We did it! We've got our basic Express server hooked up to our own MongoDB cluster, and we've created our first Model Schema using Mongoose.

It's time to take a well deserved break, get up, drink some water, and stretch out those typing fingers.

Next week we'll be going through the process to set up all of our API endpoints, using Mongoose to access information from our database, and accomplish all of the CRUD actions through our API.

If you want to find out when I put out new blog posts and tutorials, you can follow me on Twitter, where I always post links as soon as my new posts are available.

This article was originally posted to TheCodePixi.dev/blog

Job Search Self Care and Anxiety Management

Emmy | Pixi — Sat, 06 Jun 2020 18:50:57 +0000

We all know the job search can be stressful, and sometimes even traumatic. So, what can we do to make sure we are supporting our mental health while looking for work?

As someone with a triple threat of mental health conditions [GAD, CPTSD, ADHD], I know better than most how hard it can be to manage your mental health while looking for work. On top of the typical stress that comes with the job search process, many of us are now looking for work during a global health crisis, a civil rights movement, and a financial depression. All of those factors bundled together can lead to a fire-storm of anxiety-inducing scenarios, that coupled with the inherent anxiety and stress of a typical job search, can make the task seems insurmountable.

Firstly, I am here to tell you a few things about yourself:

You are strong
You are capable
You are worthy
You are skilled
You are enough

Now that we've gotten that out of the way ...

Many (if not most) of the people reading this will have experienced stress, anxiety, or even trauma, at some point in their lives. Unfortunately, most of us have not been prepared for how to mentally and emotionally handle these experiences.

One of the best anxiety coping mechanisms I have ever learned is focusing on your locus of control.
Many times, the things that cause us the most anxiety, are the things over which we have no control. Once we are able to mentally and emotionally relinquish the desire to control the uncontrollable, and the anxiety over having no control over those things, we can productively focus on the things we can control.

What can you control in your job search?

Under Your Control	Not Under Your Control
The quality of your resume	Automatic rejections based on an algorithm
Your preparedness for an interview	The behavior of your interview and content of their questions
The quantity and quality of your projects	A lack of open positions for someone with your skillset
Your attitude and outlook	The opinions of others

This list will vary from person to person. I highly encourage you to make a list like this that suits your own scenario.

Not sure where to start? Make a list of what's causing you anxiety in your job search, then divide those things among the "Can Control" and "Can't Control" columns.
Do your best to let go of a desire to control what you cannot. Recognizing that it's out of your control can go a long way to easing some of your anxiety around those things.

But what if the lack of control is what causes your anxiety?

Unfortunately, this one is going to require significantly more inner work.
There is no quick-fix to being a "control freak". This is something I have struggled with, and continue to struggle with, on a nearly daily basis.

The best advice I can give you is to first start by recognizing when you are grasping for control. Recognizing those behaviors and reactions within yourself is your first step to redirecting and correcting those thoughts and behaviors.

Once you've recognized your own patterns, you can then redirect and correct.

Refocus to things you can control. Go back to the list you made of what things are actually under your control, and focus on those instead.

Utilize meditation practices, and repeat a mantra to yourself. It's important to find a mantra that works for you personally, but something like "I control what I can and release what I can't" could be a good place to start.

Finally, make time for non-job-search related activities that fill you up

This can be ANYTHING. Any hobby you have that is not directly related to your job search can work here.

Read a good book, work on a craft project, work on a coding project that's just for fun, play a video game you love, play a board game with friends, indulge in your skincare routine, bake your favorite pastry, cook your favorite meal.

The options are endless.

Remind yourself that you are allowed to take time away from the pressures of your job search. It will still be there when you go back to it.

Time away from a task is essential to allowing your brain to relax, and your mind to de-stress. Focusing on something that's just for you, and just for fun, is so important to your mental and emotional wellbeing.

But what if I still can't get a handle on my anxiety?

If your anxiety is truly overwhelming and pervasive, it is extremely important that you seek professional help.

Talking to a therapist or other mental health professional can be the difference between suffering and relief for so many people. If you have the financial privilege and means to seek professional help, I highly encourage you to do so. They will be the best person to give you concrete tools and guidance for approaching your personal situation, and will be there to advise you on whether looking to medication for relief might be the right choice for you.

Personally, I have found great relief through a combination of supplementing with Full-Spectrum CBD and L-Theanine. I take a 20mg dose of sublingual CBD, and 100mg capsule of L-Theanine twice per day, and it has done wonders for my stress response, anxiety levels, and overall mood.

I am not a healthcare professional and cannot advise you on what you should or should not do for yourself, in terms of botanical supplements*. However, I do recommend reaching out to someone with the authority to do so (your own doctor, for example), to see if this could be a good option for you.

* If you are generally in good health, both of these supplements are free from
side-effects and safe to try, if you choose to do so without first consulting
your healthcare provider.

In closing, I just want to say: I see you.
You are working so hard, and will get there soon. We both will. I believe in us. 💕

this article was originally posted on TheCodePixi.dev/blog/

A Ruby on Rails Roadmap

Emmy | Pixi — Wed, 27 May 2020 22:08:25 +0000

Are you a beginner or newbie looking to get started with Ruby on Rails? I've compiled some FREE resources to help you get started in just under 6 hours...

I had the opportunity to learn Ruby and Ruby on Rails during my time at Flatiron School and almost immediately fell in love.

Ruby is an extremely accessible language and, in my opinion, a really ideal first programming language. It's a dynamically typed, expressive language that lends itself to being human readable and just a joy to work with.

Recently (as in, today) a friend popped into the Code Cafe Online Discord and asked for advice on learning Ruby on Rails. As a result, I ended up putting together this beginner Ruby on Rails Roadmap of free video courses!

If you're a beginner looking to learn Ruby on Rails, or a developer with experience in other languages looking to add Ruby or Ruby on Rails to your skill set, this should help you get started...

Step 1: Ruby Crash Course

Time Commitment: 4 Hours

Step 2: Ruby on Rails Crash Course

Time Commitment: 1 Hour

Step 3: Ruby on Rails REST API Tutorial

Time Commitment: < 1 Hour

In just under 6 hours, you've gone from a total Ruby newbie, to a Ruby on Rails wiz kid! 🎉

I hope this little learning roadmap is useful to all the future Rubyists out there! If you ever need help or get stuck on your learning journey, you can find me on Twitter and here on DEV. I'm always happy to help debugging some Ruby code!

xx - Emily/TheCodePixi

New MacBook Pro Dev Setup

Emmy | Pixi — Sat, 23 May 2020 00:00:14 +0000

A quick run down of everything I did to get my dev environment up and running on my new 2020 MacBook Pro...

First Things First...

Before I did anything with my new laptop, I first made sure to backup anything I wanted to save from my old laptop (a late 2014 MacBook Air). This included making a copy of the settings.json in VSCode, checking for and special settings in the .bashrc and .zshrc files, and backing up all of my documents.

Next Things Next...

The first thing I do with any new computer is go through the setup process and then check for software updates. Then I download any software that I know I'll need.

For this setup this included:

VSCode
Firefox
Chrome
Affinity Designer
Postgres
Discord
Slack
Zoom
Streamlabs OBS
Spotify
iTerm2 (with OhMyZsh)

Then I went into iTerm2 and setup a new custom profile, as well as making customizations to my OhMyZsh settings.

After I had my terminal setup, I went into VSCode and replaced the contents of the settings.json with the saved copy from my old laptop.

Last Things Last.

The last thing I do to make sure I have everything I need is to go through and make sure I install all of the CLI programs I'll need for my development process. With this computer that meant updating XCode, updating Node and Ruby, and then installing Homebrew, NPM, React, Gatsby, and Rails.

I also made sure that when I was backing up my previous laptop, I made a list of all of the extensions I had in my previous install of VSCode. Re-installing those on my new machine is the last step of the process.

My Favorite VSCode Extensions:

Dracula Official (theme)
Panda (theme)
Prettier
ESLint
Bracket Pair Colorizer
Code Spell Checker
Live Server
JS JSX Snippets
Material Icon Theme
Ruby / VSCode Ruby
WakaTime

Let me know how similar or different this is from your process of setting up a new machine! This is the basic "must have" list and doesn't include the fun stuff like choosing a new wallpaper or making sure I have my favorite screensaver installed.

xx Pixi / Emily

Hello World! { Setting Up Your First Express Server }

Emmy | Pixi — Mon, 11 May 2020 16:36:03 +0000

But what is Express anyway?

Express is a minimal and flexible Node.js web application framework.

Express is a great backend and API option for any project with a JavaScript (or JS framework) frontend, because it allows you to keep all of your code in the same language and the same family. You don't need to learn one language for the front end and an entirely different language for the back. If you already work in JavaScript for your frontend projects, I think you'll be able to pick up Express really quickly. I know I did!

Sweet! Let's get started!

Before getting started with Express, it's important to make sure that you have Node installed on your system, and that you have at least some exposure to Node.

I highly recommend this crash course from TraversyMedia on Youtube.

To get started setting up your server, you'll want to make a new folder in which you will be placing your project, and then npm init to setup your package.json. For this tutorial, I recommend running npm init -y so you can skip the setup questions and get right to coding...

$ mkdir my-first-express-server
$ cd my-first-express-server
$ npm init -y

Once you have your package.json, you need to install Express

$ npm i express

And I also highly recommend including the Nodemon utility in your devDependencies. Nodemon automically restarts your server on save so that you don't have to repeatedly ^c and restart your server with every change.

$ npm i -D nodemon

the -D flag indicates that you specifically want this to be installed as a devDependecy in your package.json

Next, add an index.js file to your project folder.

(now would be a good time to git init, but first make sure you add your node_modules to a .gitignore file!)

Now for the fun stuff! 🎉

The first thing we need to do is require('express') in our index.js

const express = require('express')

The coolest thing about Express, in my opinion, is that this require is all we need to set up our "Hello World" server or a simple API!

if you want to serve static files (like HTML and CSS) using your server, you can add require('path') at the top of index.js. We'll cover this more later...

Now we need to set express to a variable that we'll call (mostly) all of our other methods on to get our server working:

const app = express();
/* it's pretty common for this variable to be called 'app' but you
can theoretically call it whatever you want! */

Next, before we do anything else, we need to tell our app what PORT to listen on when we run the server.

You could tell your server to just use port 5000 and be done with it, but it's good to plan ahead for eventually deployment!

Once your server has been deployed, it's likely your deployment will tell your app to use a port stored in an .env file. So we need to tell our app to listen on port 5000 or whatever port is being passed to the app in the .env file...

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

/* app.listen() takes 2 arguements: the port you want to listen on, and a callback. Here we're passing a console.log() in the callback that will let us know what PORT server is running on */

place this code at the bottom of your index.js file...the rest of what we're about to write in index will go between your app variable declaration and your PORT variable declaration

Let's take a quick trip to our `package.json` ...

So, remember when I had you install nodemon? Now's the time to use it!

Inside of your package.json you're going to write 2 "scripts"...

First, we want a script called dev, where we'll use nodemon to run our index.js file. Then we want to write a "start" script that will be used to run the app once it's deployed:

"scripts": {
    "dev": "nodemon index",
    "start": "node index"
}

package.json

Ok, cool, back to our `index.js` ...

We made it! It's time! We're so close to "Hello World"! We're going to write our first Express get request handler right now!

Here is the syntax for the get request:

app.get('/', (req, res) => {
    //code goes here
});

index.js

First we call app.get(), passing it the route we want to get (in this case the root route '/') and a callback which will tell the server what to actually do with this route. We pass the req (request) and res (response) to this callback.

Getting our "Hello World" on the page is as simple as using the res.send() function! You can pass strings to res.send() (typically this would be the path to the file you want to server on the specified route) but for now we're going to pass a string of HTML:

app.get('/', (req, res) => {
    res.send(
        "<h1>Hello World!</h1>" 
        // or whatever your favorite hello world is!
    )
});

Now, from your CLI we want to run the dev script we wrote in our package.json:

npm run dev

Then open up your favorite browser and navigate to localhost:5000

You did it! You wrote your first Express server!! 🎉

Do a quick dance party to celebrate, and then go back into your res.send() function and add a few more things to your HTML string. Save your file and watch as nodemon does the behind-the-scenes magic to rerun your server and serve the changes you just made live!

Bonus: Let's serve an actual HTML file!

First, we need to make that HTML file, and put it in the right place.

( this is also when we want to make sure we included require('path') at the top of our file )

First, add a public folder inside of your servers root folder. Then add a file inside of that folder called index.html.

Now, go ahead and put anything you want in index.html. The fastest option is to add the HTML boilerplate, and copy over what you had in your string of HTML from your res.send() function.

Back in index.js, comment out the res.send() inside of your app.get() function.

We're going to replace that line with this:

app.get('/', (req, res) => {
    // res.send("<h1>Hello World!</h1>")
    res.sendFile(path.join(__dirname, 'public', 'index.html'))
})

Now, we are using the function .sendFile() to tell serve the file index.html inside of the public folder, inside of the current directory (the root of our server)

We can also tell Express to server any static file on its own route:

app.use(express.static(path.join(__dirname, 'public')))

That's a lot of function nesting! Essentially what's happening here is:

the app.use() function tells our app to use the express.static() function to set the path for static files in our app to path.join(__dirname, 'public').

__dirname indicates the current file directory, so we're telling our app that the static files live inside a folder called public inside of the current directory.

Now, if you added another file inside of public called about.html and then navigate to localhost:5000/about.html you'll be served the contents of your about.html file! With one line of code, we're able to serve any file we add to our public folder!

I hope you had fun setting up your Express server with me! Now go forth and make me something cool! Make sure you tweet @ me if you use this tutorial to build your server. I would love to see what you build!

Next up, we'll be covering how to hook in a database with our Express backend, and serving JSON to turn our server into a REST API!
(keep your eyes pealed for the next post in this series coming soon...)

You can find more of my work here on DEV, and on:
Twitter
GitHub
and
CodePen

xx - Pixi

Building An App I'll Actually Use

Emmy | Pixi — Thu, 19 Mar 2020 01:30:33 +0000

It's here, it's here, it's finally here! My final Flatiron project has arrived!!

I hope you're ready to be underwhelmed, y'all. This project process has been a DOOZY, from personal health problems to a massive global public health crisis, there was a lot that got in the way of this project. BUT, I finally built something that I think is a tool I'll actually use, and something I'm really excited to keep working on. It's an absolute MVP, with emphasis on the M, but I'm still glad to have gotten it done.

In the run-up to this project, I was stumped as for what to build. I had really struggled with the React/Redux curriculum and just felt at a total loss for any ideas on what to build because the idea of building a fully functional React project from nothing felt...scary. But we all know fear is where we grow.

In talking to my advisor and other students, the recommendation that kept coming up was to build a tool; something you (I) would actually use and find useful in our (my) everyday lives. As someone with chronic health issues who sees (what feels like) an endless stream of doctors and specialists, it can get really difficult to keep track of when I saw which doctor, what was discussed, what new treatment plans we put into place, and whether I need to follow up with them.

And so, "Doctor's Orders" was born. So far, it's a fairly simple SPA, with 3 routes supplied by React Router. A main home route, a show page, and a new "order" form. You can track your which doctor you saw, their specialty, the date of the appointment, the appointment type (from a set drop-down list), any test results or treatment notes, and whether you need to follow up with your doctor.

My biggest challenge with this project came from working with Redux, and using it to properly update state across the application. I ran into an issue with fetching data from the database too frequently, and incorrectly updating state in my reducer. It was super frustrating, but such a great learning experience. The biggest thing I think I learned from this project was really tracking and controlling state across my entire application, and keeping track of when and how things are being changed, updated, removed, or added, and keeping it in sync with the changes to my database.

I also decided to work with Semantic UI for styling on this project, which I had never used before and really enjoyed working with. The built-in library of icons was super convenient and a nice perk, and using a library like Semantic helped me to really quickly add cohesive styling with minimal effort.

You can see the code for my project on GitHub, and I'm hoping to get it deployed to Heroku soon!

thecodepixi / doctors_orders

React/Redux + Rails Final Project for Flatiron School

I have a TON of ideas for ways to expand this project, including:

alerts for following up with doctors on a specific date
a field for follow-up questions you want to ask your doctor
a symptom tracker
a test results tracker
sorting / filtering options for viewing previous doctor's orders by doctor

Cross your fingers for me as I go into the assessment process for this project. Graduation is on the horizon!