DEV Community: Austin Beaufort

Build a Rest API with NodeJS and PostgreSQL

Austin Beaufort — Sat, 27 Mar 2021 23:07:36 +0000

Recently I’ve been learning backend development with Node.

I put together a video where you can build a rest api along with me.

Build a Rest API

In the video you’ll learn about:

routing concepts
the express framework
how to use Postman to test your routes
how to create a database in the psql shell
performing SQL queries
callback functions And much more!

Why I'm learning backend development with NodeJS

Austin Beaufort — Sat, 20 Mar 2021 14:28:02 +0000

Why I'm choosing #NodeJS for the short term to get started with backend development

(and why I eventually plan on learning a statically typed language in the long run.)

I have a solid grasp of JS already, and with NodeJS, I can use JavaScript in both front and backend.

I realize writing #javascript on the backend is much different than writing it on the frontend.

However, by using Node, I can focus my attention on learning the concepts and intricacies of backend development, which is most important in my mind.

I can then take the concepts and transfer them to another language.

When starting out in the backend I don't want to be burdened with having to learn a new syntax, paradigm, and set of libraries on top of learning the actual concepts.

I'm aiming for concepts first, and then switching over to a statically typed language (probably golang or java) where I'll already have the concepts, then I'll just need to catch up on the syntax and libraries.

What are your thoughts? If you started as a frontend dev and transferred to backend over the years, I'd love to hear what your journey was like.

Great VS Code Extensions for Frontend Devs.

Austin Beaufort — Sat, 20 Mar 2021 12:55:42 +0000

There are a lot of great vscode extensions out there, but in this article I'd like to share 3 that have made a big impact on my coding quality of life:

1. Bracket Pair Colorizer

Adding color to brackets and parenthesis is huge in being able to find a missing or closing bracket when you're looking through a larger file or codebase you have been dropped into.

Save yourself countless minutes and hours of trying to pinpoint matching brackets by installing this extension.

2. Prettier

Tired of meaningless syntax arguments? Tired of physically having to adjust indentation.

Search no more, Prettier is the extension for you. It can be configured to auto-format your code on save. It fixes indentation, missing semicolons, and gives codebases a uniform look for your team.

One thing to note is there is an extra step or 2 needed (like installing prettier in your project or globally, and changing your settings to use prettier on save) if you want to use this extension.

3. Git Blame

This one is huge if you're working on an open source project or a team at work.

I mainly use this when I run into a piece of code I don't understand in the work codebase.

I can click on the line or lines of code that are confusing, and it will bring up who wrote them.

I can then contact that person and get a clarification on what the code is doing. (This is also a good moment to mention leaving a comment in the code if you write something you know will be confusing in the future haha)

If you enjoyed this article and want more free coding content, come check out my youtube channel where I do in-depth coding tutorials:

https://www.youtube.com/watch?v=oCSMIBrIHZc

Adding Methods to Prototypes, JS

Austin Beaufort — Sun, 13 Dec 2020 14:34:24 +0000

Let's start with a method that already exists:

Array.prototype.reverse()

.reverse() takes an array and reverses it:

const myNumbers = [1, 2, 3, 4, 5, 6, 7];

console.log(myNumbers.reverse()); // outputs [7, 6, 5, 4, 3, 2, 1];

now lets pretend the .reverse() method doesn't exist

Let's make the method ourselves, we will call it .reverse2():

Array.prototype.reverse2 = function() {
    const reversedArray = [];
    this.forEach(item => reversedArray.unshift(item));
    return reversedArray;
}

If the above is confusing, here is the same thing but with comments for clarity:

Array.prototype.reverse2 = function() {
    // create an empty array
    const reversedArray = [];
    // *this* reverses to the array to the left of the
    // .reverse2() method, in our case, *myNumbers*.

    // Here we take each item in myNumbers and add it to the front of reversedArray

    // ex. [1], [2, 1], [3, 2, 1], etc...
    this.forEach(item => reversedArray.unshift(item));
    // return the reversed Array.
    return reversedArray;
}

Now we can use our .reverse2() method we created on any array:

const myNumbers = [1, 2, 3, 4, 5, 6, 7];
console.log(myNumbers.reverse2()); // outputs [7, 6, 5, 4, 3, 2, 1];

still with me?

Here's the crazy bit.
.reverse() doesn't exist for strings 😱 😱 😱

const myString = 'I am writing a sentence';
console.log(myString.reverse()) // error, myString.reverse() is not a function

Let's add .reverse() as a prototype method for Strings.

Array.prototype.reverse2 = function() {
    const reversedArray = [];
    this.forEach(item => reversedArray.unshift(item));
    return reversedArray;
}


const myString = 'I am writing is a sentence'

String.prototype.reverse = function() {
    return this.split('').reverse2().join('');
}

console.log(myString.reverse());

A brief explanation:

we split the string every character:
['I', ' ', 'a', 'm'] ... etc.
The string is now an array, which means we can use our .reverse2() method we made for arrays. (or you can use the built in .reverse() array method here).
['e', 'c', 'n', 'e', 't', 'n', 'e', 's', ' ', 'a', ' ', 'g'] ... etc
We then join the array back together into a string:
**ecnetnes a gnitirw ma I"

Thanks for reading, for more tech content you can find me here:
Youtube => https://www.youtube.com/austinbeaufort
Twitter => https://twitter.com/AustinBeaufort

"Variables declared with const cannot change" ... well kinda...

Austin Beaufort — Thu, 26 Nov 2020 14:55:31 +0000

You've heard it 100 times...

let is mutable
const is immutable (not mutable)

well... sort of ...

The easy part to clear up is this:
** let is mutable **

If we declare a variable using let, we can re-assign that variable:

let myName = 'Tyler';
myName = 'John';

this works just fine.

Now on to the confusing bit. (ha, no computer science pun intended.)

Basic types with const are immutable.
Examples of this:

const myName = 'Tyler';
myName = 'John'; // this line will throw an error

const myNumber = 7;
myNumber = 3; // this line will throw an error

We cannot re-assign a string or number declared with const.

... "BuT WhaT AbOuT ObJectS AnD ArRaYS???" ...

good point. Check this out:

const employee = {
    id: 12345,
    name: 'John Doe',
    address: {
        street: '123 Circle St.',
        city: 'Pittsburgh',
        zip: 11111,
    }
}

employee.id = 99999,
employee.address = {}

console.log(employee) // { id: 99999, address: {} }

We used const, but we can still change the inside values of the object itself. We even deleted a key/value pair entirely!

The same happens with Arrays:

const employee = [99999, 'John Doe', ['Cleveland', '123 Circle Street', 11111]]

employee.pop()
employee.pop()

console.log(employee) // [ 99999 ]

Again, we used const, but we could still manipulate the inside values of the array.

This being said, we cannot re-assign the entire employee object or array, the following examples will result in an error:

const employee = [99999, 'John Doe', ['Cleveland', '123 Circle Street', 11111]]

employee = [4444, 'Jane Doe']

console.log(employee) // Error, cannot re-assign const


// example 2
const employee = {
    id: 12345,
    name: 'John Doe',
    address: {
        street: '123 Circle St.',
        city: 'Pittsburgh',
        zip: 11111,
    }
}

employee = {}

console.log(employee) // Error, cannot re-assign const

So we have learned that we can change the insides of an object and array even though it was declared with const.

How do we stop this from happening?

One solution is to use Object.freeze().
This will work for objects and arrays that are not nested.

If an object or array is nested, the nested elements will still be able to be changed.

To "deep freeze" an object or array, we would need to create our own deep freeze function or use an external library.

Thanks for reading, for more tech content you can find me here:
Youtube => https://www.youtube.com/austinbeaufort
Twitter => https://twitter.com/AustinBeaufort