DEV Community: Nathan Sheets

Why Axios Is Awesome (and how to get started with it)

Nathan Sheets — Wed, 06 Jan 2021 03:32:07 +0000

Making HTTP requests can easily get bloated and unnecessarily complex. Sure, you can use jQuery's ajax methods or even jquery.get, but that has its limitations and doesn't fit well with a code base that's heavily based on promises.

Enter: Axios. Axios is a promise-based HTTP handler that makes your life a thousand times easier. It's very simple to use. For example, an ajax request through jQuery could take up a dozen lines or more, and the more lines of code that aren't abstracted away from you, the more room for error and bugs.

An axios request can take two primary forms for most uses. The simplest one, for example, a GET request, looks like this:

const axios = require('axios');
axios.get('YourURLorEndpointHere');

That's a simple get request. The fun part is that that statement on the second line actually returns a promise, so you could handle the response extremely easily. For example:

const axios = require('axios');
axios.get('YourURLorEndpointHere')
  .then(response => {
    //do something
  })
  .catch(err => {
    //do something else 
  });

And you're done. That's it. That's the whole get request, handled and caught.

Let's say you wanted to make a post request instead, and you wanted to add some options in there. You can also use Axios as a function and give it an object with what ever parameters you want. For example:

axios({
  method: 'post',
  url: 'yourURLorEndpointHere',
  data: {
    //Your info to send here
  }
})
.then(response => {
  //do something with the response
})
.catch(err => {
  //handle any errors
});

That's it. That's what you'd use in 90% of any situations you'll run across, at least for simpler websites. Axios can help you make simpler, easier, and cleaner HTTP requests.

Bonus: If you don't already use it, Express is a great tool for receiving all those super clean requests you just made!

How to go from a C#/C++ game dev to full-stack web dev

Nathan Sheets — Wed, 16 Dec 2020 03:54:04 +0000

If you're like me, you've been doing some game development with Unity or Unreal Engine for a couple of years, so you know a few things about programming. But just that: a few. As an indie game developer I found quickly that it's hard to make money from games, and even harder to even get to the point where you can produce anything you can get paid for. I decided that my natural fondness of not being poor was enough for me to consider switching skillsets to something like web development.

So, you have a couple of options. You could take classes on web development at a university or college, you could join a coding boot camp, or you could go the self-taught route. In my own personal experience I started with the self-taught route, realized I didn't know what I didn't know and opted for the boot camp route since I already had a solid understanding of what I was doing, but I also was ready to get into the field ASAP. Your path may be different but they all will eventually need to learn the same key technologies for the work force, so try to pick the best one for your needs.

A few months later after making this decision, I found myself in Hack Reactor's Software Engineering Immersive. Basically, it's a 12+1 week software engineering program that will bring you up to speed with the industry in a short but very intense couple of months. A program like this take about 66 hours a week of your week so it's designed to be tough and you won't have much of a life outside of the program. I figured I was just ready to get into it and was up for the challenge.

In that time, we've learned some major things:

For obvious reasons, you'll need a strong understanding of JavaScript, HTML, and CSS.

This one is an obvious. They're the muscles, bones, and appearance of your website. You have to know how to use them well to make just about anything.

Get used to using the jQuery library.

It's one of the most commonly used libraries and you'll find yourself using it as much as you use vanilla JavaScript after a while. You can even practice by trying to reverse engineer some of the functions. Also, they have awesome documentation, so that's a huge plus.

Learn some data structures

You'll need these for information storage/look-up. Most indie game devs don't bother with these, but they'll be useful on the back-end.

Research and practice making HTTP requests.

It's one thing to build a little web app, but it's another to actually be able to... you know... do things with it. These can be scary looking at first but actually aren't that bad once you're used to them. jQuery actually makes these 1000x easier so make sure you're using that properly here.

Learn about RESTful APIs

Increase the functionality and integration of your website on the internet. Make it interesting and use other websites within yours for added function. I used to think this was really hard and complicated until I tried it. Can really enhance your website though.

Learn GitHub

It's a career standard at this point. It's version management on an incredibly well organized and potentially massive scale. You will need this at just about any programming job you go to, I'd bet.

Get a Mac or use Linux

Since everything that Unity and Unreal offer run well on Windows, you probably haven't gotten used to developing on one of these two platforms. If you have, congrats, you have a leg up on the team. I had to learn Ubuntu when I started this. I, for one, actually decided I liked it more than Windows, so maybe you will, too.

Learn React

React can help your web development a lot. This should probably be a "later" thing to learn, since you'll want to have a firm base in web development prior to using this one. But it's a crucial skill set for a lot of jobs out there.

Learn Express and PostMan

These are less life-changing tools and more sheer convenience, at least in my experience, but they can both still help you out a lot and maybe prevent a bug or two.

Learn Node.js

Most front-end positions don't require this, but a lot of back-end or full-stack positions do. This is basically the engine that runs the back-end a lot of time so it helps to know how to drive.

Learn how to make use of a database

PostGreSQL, MySQL, and MongoDB are all solid contenders in the field at the moment. You'll probably need one for most projects so it helps to be proficient.

Develop a portfolio

Having a portfolio and even the experience gained from creating that portfolio is one of the biggest game-changers when you're applying for a job. Anyone can write down that they know a language or a framework on a resume but actually having tangible proof/demonstration of your skills can make or break your chances at a job. You should make your portfolio diverse representation of your skill set but try to only put your best work on there. You don't want a potential employer to see something you're not proud of.

Oh, and try LeetCode.

A Rootin' Tootin' Beginner's Guide To React

Nathan Sheets — Wed, 09 Dec 2020 04:21:36 +0000

Alright, bucko, buckle up and hold onto your socks, because this is going to be a wild ride... for about two days. Then everything will click in your head and suddenly the sun will shine again. But until then, you're going to want to kick a tree and shout at a wall. Don't do that.

First things first, this article I'm blessing your eyeballs with the pleasure of reading assumes that you're proficient with JavaScript and HTML at least. Also, a sprinkle of jQuery wouldn't hurt. As they say, you can't ride a pony if you don't have the reins. If you're confident in your coding skills, read on, cowboy, read on.

First, let me tickle your fancy with an interesting new tool: JSX. JSX stands for JavaScript XML. It's basically a fancy way of saying that the lovely people over at Facebook have blended JavaScript and HTML into one weird language and now it's going to be your best friend alongside some new ES6 notation that you'll probably want to brush up on.

So, the old way of creating an element would've either used document.createElement(...), or if you're not a caveman, you would probably use something along the lines of $('<div>...</div>').doSomething(). Well, JSX allows us to do this a lot more directly. To create a new element in JSX, you could do something like this:

var element = (
  <div id="thisIsDiv">
    I am div.
  </div>
);

Now there is something to note. You will need a transpiler in order for JSX to run on your browser. The React docs themselves recommend you use a little program called Babel. Maybe you've heard of it, maybe you haven't, but you're about to learn. Babel basically converts all your .jsx files into a plain old .js file so that it can be run, but thanks to the wonderful magic that is React, that's all done both automatically and efficiently. All you need to worry about is writing your JSX code and then running your transpile command it for it to go into effect.

Now On To React

React is really neat. It works in a world of components and "props" (no, not like in movies), and you'll probably never stop using it once you get used to it. It did to jQuery what jQuery did to JavaScript; sure, you can go without it, but it would be a lot less fun.

Back to the topic. React heavily brings object-oriented programming concepts, more concisely referred to as Model-View-Controller concepts, to web development. Here's a very simple example of a component:

function Cowboy(props) {
  return <div> I wear spurs on my {props.shoes}</div>;
}

Now, besides the fact that we're jumping straight into using the JSX syntax, you may have also noticed that we're passing in 'props' to our function. If you put 'prop' and 'erty' together, you may have guessed that 'props' is short for 'properties'. Well, you'd be right. If you want a cookie you can check in your browser ba dum tiss.

Basically, whenever you create this Cowboy component, what ever you pass into it is thrown together into this props object. Why, you may ask? Because React. Anyway, to get out what you pass in, you generally have to access the props object and go from there. There is a way around that, but that's a topic for another day.

Another thing you may or may not have noticed is that our {props.shoes} statement is wrapped in curly braces. That's because in JSX, when we want to write JavaScript code, we have to escape the JSX syntax with the {} operators, and anything inside becomes vanilla JavaScript again.

After that, to assign the value of that function to a variable, just to make it easier to use, you could say:

var CowBoyBootSpurThing = <Cowboy shoes='Boots' />;

You'll notice that we're using HTML-like tags when we're assigning this variable and, if you were to treat this like vanilla JavaScript, you're not even invoking the Cowboy function. But, in the weird but allegedly better world of React, this is how you do things now. Let me explain:

The first bit, var CowBoyBootSpurThing = is pretty straightforward. If you need help with that you might have lied about your JavaScript skills to get this far down the page. That's okay though.

It's the <Cowboy shoes='Boots' /> part that's weird, right?
In a nut shell, or to you non-cowboys, in a pickle, this is creating a React component (hence the '<' and '>' symbols) and telling React you want to create what's called a user-defined component, which will now be a 'Cowboy' component.

From there, shoes='Boots' is telling React that you want to invoke the aforementioned Cowboy function and send in 'Boots' as an argument. However, because on the other side it all gets thrown into the props object, we have to feed it what's essentially a key/value pair. So in this example, 'shoes' is the key, and 'Boots' is the value.

To imagine this in JavaScript, it would look like this once it's in the props object:

var props = {
  shoes: boots,
  // Some other stuff
}

So that's why, back to our original function, which if you forgot was this:

function Cowboy(props) {
  return <div> I wear spurs on my {props.shoes}</div>;
}

That's why you have to say {props.shoes} in order to get 'boots'.

Aaaaaaanyway,

so you have your React component, and you kinda get the basics of the props object. How do you take this magic pot of goop and put it on the screen? Well I'll tell you. There's a neat function that the React library includes called ReactDOM.render(). This is the most crucial part of using react. Without this puppy, nothing else will matter.

ReactDOM.render() takes two arguments. The first one is the component you want to render, and the second one is the node on the DOM you want to parent your component to.

So back with our example. To put it all together, you'd do:

ReactDOM.render(CowBoyBootSpurThing, document.getElementById('root'));

And there you have it. It's that easy. But not really, because this is only the beginning cue evil laugh.

But, don't get discouraged. You'll pick it up quickly and pretty soon it'll be as second nature as JavaScript itself probably feels at this point. Play around with it a bit, and experiment with ES6 Classes and all that jazz.

Also, DON'T FORGET TO IMPORT THE MODULE YOU'RE WORKING WITH.

Maybe that'll make sense later, maybe it won't. I wish I would've read that sooner.

Yee-haw, partner!