DEV Community: Corbin Arnett

Javascript Ternary Operators

Corbin Arnett — Mon, 04 May 2020 02:03:17 +0000

If statements are an essential building block to executing logic within Javascript. Lets take a look at an example of a traditional If/Else statement:

function checkNum(a) {
  if (a > 0) {
    return "positive";
  } else {
    return "negative";
  }
}
console.log(checkNum(23));
// expected output: "positive"

Ternary operators allow us to write concise If/Else statements, we can write the same function above with a ternary operator like this:

function checkNum(a) {
  return (a > 0 ? "positive" : "negative");
}
console.log(checkNum(-6));
// expected output: "negative"

In this function, the condition a > 0 is followed by ? and two expressions. The first expression listed, in this case "positive", will return if the condition is true. The second expression which is separated by : will return if the condition is NOT true. Like so:

condition ? expressionIfTrue : expressionIfFalse

Here are my favorite resources for learning to code!

Corbin Arnett — Mon, 27 Apr 2020 06:09:55 +0000

For the last two years I've been learning to code, I wanted to share a quick list of my favorite resources that helped along the way. I hope that this can streamline your learning process!

Tutorials

Frontend Masters. This is the ultimate resource, haven't found one quite like it. If you are looking to code, and make it a career, this would be a great alternative to a bootcamp.
FreeCodeCamp. My first introduction to code was through this site, and as the name states it's completely free!
Traversy Media When I feel like watching a video, this is the channel I run to! Brad is very approachable in his teaching style.
Fun Fun Function. MPJ introduced me to functional programming, and may just be one of the funniest people to speak on the subject.

Blogs

Wes Bos. Just call me a Wes Bos Disciple. Wes offers a great selection of posts and videos.
Tania Rascia. I learned React from Tania's walkthrough! She has quite the library of the things she has learned through the years, it seems likes she always takes her time with each post.
Jeff Atwood. The true OG. Jeff has been posting continuously since 2004!
DEV. This goes without saying...

Podcasts

Syntax.fm. Wes and Scott expand on all things frontend development, and drop some awesome Spotify playlists along the way.
Frontend Happy Hour. Tech and cocktails?! This podcast takes a relatable, conversational approach to interviews and speaking on software engineering. Provides a great insight into working at major tech companies.

🙌 What are some of your favorite resources? 🚀

How to Escape Tutorial Hell.

Corbin Arnett — Mon, 20 Apr 2020 04:37:19 +0000

For a long time, a blank text editor was a scary thing to see. Even after a year of learning to 'code' I would have no idea how to start a new project. I was overwhelmed by what I didn't know and to compensate for this, would quickly jump to a tutorial video to 'learn' more. I loved the instant gratification of completing a project via a video-walkthrough so much, that I had put off building any projects of my own. As I read more blog posts and watched more videos I learned a lot but my actual finger-to-keyboard coding skills lacked tremendously. This is what I would define as 'Tutorial Hell'.

Let me start by saying that I love tutorials, they are amazing resources and should definitely be apart of your learning process. But I do think that they can give you a false sense of knowledge, especially if you are in the infinite loop from one tutorial to the next.

Personally I knew I needed to get out of this loop and take a break from video tutorials, here are the steps that I took to continue learning and escape 'Tutorial Hell':

Read Documentation

Want to get started learning a new language or maybe dabble in the latest framework? Read the documentation from the source. Often times documentation will provide a quick walkthrough/get-started section that will give a quick introduction. Once you get through this section, build something immediately, even if it's another to-do app, and if you get stuck take the time to reference the documentation.

For a time, try to use only Stack Overflow and MDN when stuck

Now hear me out, I know there are so many other great resources out there. But I truly believe that limiting my resources for a time, challenged me to think more critically. I was forced to try new things and while I did fail more, my understanding of a certain topic was strengthened.

Start with what you know

When it comes to starting a new side project or building out a new app that you're excited about. First off, in the words of Shia LaBeouf, 'JUST DO IT!', and secondly start building with what you know and then add on to that. After all, Google is a developers best friend.

Don't be afraid to ask for help

It can easy to feel like you're alone in this process, but thankfully there are amazing online communities to reach out to and connect with. If you're ever stuck or are struggling for hours on end, reach out to someone or write a post on freeCodeCamp, Stack Overflow, or even here on DEV! Everyone needs help, and let's be honest you probably just forgot a comma😜.

Now go forth and conquer!

A Quick Introduction to Variable Scope in Javascript

Corbin Arnett — Mon, 13 Apr 2020 01:23:06 +0000

Like many new to writing code, knowing the scope of a variable or more often, not knowing the scope of a variable was a common hurdle in my day-to-day adventure in learning Javascript. Here, I hope to breakdown variable scope as well as cement my own understanding of the topic.

Javascript has two scopes, global and local. Any variable declared outside of a function belongs to the global scope, and is therefore accessible from anywhere in your code. Local scope is created by functions and each function has its own “local” scope, therefore any variable declared within a function, can be used within that function or correlating nested functions. Local scope is often referred to as function scope and with the addition of ES6 can be further divided to include block scope. In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block. In general a block in Javascript is anytime you see “{curly braces}” like in a for loop, or when declaring a new function.

Scope difference between var, let, and const

Var: var is globally scoped when declared outside a function, which means it is accessible for use in the whole window object. Var is locally scoped when declared within a function and can only be used within that function.

Let: Let is a block-scoped variable, when declared it can only be accessed and updated within its block “{ }” but unlike var cannot be re-declared within its scope. Because let is block scoped, you could have the same variable declaration defined in different scopes

Const: Like let, const is also block-scoped, with the difference being const cannot be updated within its scope, once declared it maintains a constant value.

Hope this was of some use to your learning process! Cheers!

What is REST API?

Corbin Arnett — Mon, 06 Apr 2020 03:26:47 +0000

With its wide use, REST is something that many developers have become accustomed to, and yet I could never give a great definition to what it actually is. Here is a simple breakdown of REST...

In 2000, Roy Fielding was frustrated with how URLs and their corresponding HTTP verbs (POST, GET, PUT, PATCH, DELETE) were being utilized differently across the web. Thus he came up with REST (REpresentational State Transfer) as a standard for how web applications should structure their URLs. This standardization of URL routes is used across the web today, and because of it, allows easy communication from one application to another. REST is described as an "architectural design pattern", very fancy I know😜. It is not a framework, but most web app frameworks use the REST design pattern in some form.

The table below is from the Rails documentation. Pay special attention to the Path column, it displays a simple example of the REST design pattern. Say we were building out an instagram clone app and we wanted to visit the specific page to upload a photo, following the table below we would go to https://www.myinstagramclone.com/photos/new.

https://guides.rubyonrails.org/routing.html

Following the REST format makes it easy for other applications and developers to know where specific data is located within your API.

Destructuring JavaScript Objects

Corbin Arnett — Mon, 30 Mar 2020 00:35:34 +0000

Destructuring is a super useful feature in the latest Javascript update(ES6), but honestly wasn't something that I took full advantage of until recently. Let's dive in.

Destructuring allows us to pull data out of arrays and objects and set them into their own variable. Lets take a look at a basic JS Object:

const album = {
  title: 'A Kind of Blue',
  artist: 'Miles Davis',
  genre: 'Jazz',
  release_year: 1959,
  label: 'Columbia'
};

Traditionally to extract a variable from this object you see something like the following:

const artist = album.artist
const genre = album.genre

As you can see, this can be a very repetitive process which destructuring allows us to improve upon. With destructuring, we can create multiple variables from the object on a single line like so:

const {title, artist, genre} = album

This new destructuring syntax is creating individual title, artist, and genre variables, taking those specific properties from the album object.
So now if we were to console.log our newly created variables we would see:

console.log(title) // 'A Kind of Blue'
console.log(artist) // 'Miles Davis'
console.log(genre) // 'Jazz'

Destructuring is a super handy feature that can drastically improve the way you work with data in your projects or when dealing with API's. Hope this post adds some benefit to you!

Lets talk about Fetch!

Corbin Arnett — Mon, 23 Mar 2020 03:30:06 +0000

Yes let's talk about it!

I learned the Fetch API even before jQuery, I guess that's just a sign of the times! I remember building one of my first applications with Javascript, a simple app built on a Rails API that allowed users to rate and add tasting notes to their favorite wines. Fetch was the connection point that allowed me to retrieve data from my backend and present that data to the user. It's basically magic 😜. But let's dive in!

Heres the Webster definition of fetch: "to go or come after and bring or take back"

Followed by MDN's definition: "The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network."

I actually think the Webster definition explains fetch pretty well, fetch is a way for us to go and retrieve data, send new data, edit data, or delete data. I'n this article I will go over getting data.

In order to retrieve data with Fetch, you just need to provide Fetch with the resource you're trying to GET. For example let's say we are trying to get a list of todos from JSONPlaceholder. Following this specific API our fetch request would be the following:

fetch('https://jsonplaceholder.typicode.com/todos')

Awesome! So what's next?

Well, our fetch request returns something called a promise to us, which in simple terms is just a way to handle an API request asynchronously. Javascript is essentially saying, "Hey, I don't know how long it's going to take to retrieve all this data, but I promise to come back to it when I have the time." The function above, fetch(specific-url) returns to us an object that represents what the source, in this case the data the JSONPlaceholder API sent back, this is called the response.

Once this takes place we have to call the then() method on the response, which again, is just an object. Like so:

fetch('https://jsonplaceholder.typicode.com/todos')
.then(response => { some type of processing })

If we were to console.log this response, it will look something like this:

Response {type: "cors", url: "https://jsonplaceholder.typicode.com/todos", redirected: false, status: 200, ok: true, …}
type: "cors"
url: "https://jsonplaceholder.typicode.com/todos"
redirected: false
status: 200
ok: true
statusText: ""
headers: Headers {}
body: ReadableStream
bodyUsed: false

Basically, fetch is returning the status of our GET request, as we see above our request is successful but this isn't very useful for our user. Our todos that we have requested are actually hidden in the body as ReadableStream, so we need to convert this data. Because we know our todos our formatted in JSON we can call response.json() to convert the ReadableStream.

fetch('https://jsonplaceholder.typicode.com/todos')
.then(response => response.json())

This then() method returns to us another promise, so we can get the todos we were after with another then() call like so:

fetch('https://jsonplaceholder.typicode.com/todos')
.then(response => response.json())
.then(todos => console.log(todos))

If you were to run this fetch in your console you will see that an array of objects are returned, which are all our todos! From here you can iterate through the data as you please, grabbing the pieces that you wish to display to the user! Well that was easy! GET is just one piece of Fetch in Javascript, and is an awesome way to retrieve data for your web applications. Thanks for taking the time to follow along!

Cheers,
Corbin

So you've completed a bootcamp, now what?

Corbin Arnett — Sun, 15 Mar 2020 22:00:33 +0000

This is the question that has haunted me since graduating from Flatiron Schools' Software Engineering Program. It's so easy to be overwhelmed, anxious, and I hate to say it, feel like an imposter...

But before I continue, let me introduce myself! My name is Corbin Arnett, I am a barista, vinyl-collector, and husband currently living in Portland, OR. Cough cough, hipster alert!. Like all great developers 😉, my love for web development first began by copying and pasting custom css into Squarespace and Wordpress sites. For the last two years I have been learning to code and in July of 2019 decided to enroll in Flatiron School with the hopes of bringing my learning to the next level.

Which brings us to the question at hand, last month I graduated from Flatiron and have since began looking for jobs.
Personally, the hardest thing that I have had to overcome is how to spend my time, what's my plan of attack? Flatiron gave me a great foundation in my technical knowledge and the tools to learn new languages and technologies but there is still much to learn.

Even though I'm very much in the process of hunting for jobs, I hope I can share a couple points on what I have found helpful in these early stages. I would also love to hear YOUR tips, tricks and resources when looking for a new job in this industry!

Focus on ONE language

We are blessed to be in an industry with so many avenues to go down, but also with so many options it can be easy to become overwhelmed by what to learn.
Start with what you love and build on to that. For me thats frontend development, currently I am learning more about what is going on behind the scenes in Javascript and hooks in React. Once I have confidence in those areas I plan on learning GraphQL.

Continue Building

The great thing about bootcamps is that you get the opportunity to build a lot of applications. Continue using and expanding your knowledge by building simple applications. Tutorials and blogs posts are great but in my experience the best way to cement my knowledge is to get my hands dirty with code.😂

Plan out your time

You can't do everything at once, we all know this. Take the time to schedule out your next week, split time between networking, building a side project, learning new things, and applying to jobs. My mistake was trying to do each of these everyday, which just added to the chaos and increased my desire for procrastination. Set a day to send emails and look at job boards, another to build a project, another to solve some code problems or share your knowledge through a blog post, etc. Find what works best with you and keep it consistent.

Take a day off!

Take a day every week, to turn it all off. Close your computer, step away from your phone and the 24-hour news cycle. Spend a day doing something that brings you joy. Go out to eat, take a hike, hang out with friends, sleep in! Fill yourself with the fuel needed to conquer the week ahead!

That's all folks!

This is my first post here on dev.to and I am excited to share my journey and more posts with you all in the future. Feel free to share your tips, tricks and resources, I look forward to reading them in the comments! Cheers!🍻