DEV Community: Abbey Bercher

Essential VSCode Extensions for Beginners

Abbey Bercher — Tue, 11 Jan 2022 15:07:16 +0000

Live Server
Live Server launches a local development server. It features a live reload so every time you save your code, your browser will automatically reflect the changes.

Prettier
Prettier is a code formatter that forces a consistent style on your code.

Bracket Pair Colorizer
Bracket Pair Colorizer gives opening and closing brackets matching colors. It helps visualize which brackets go together. It's particularly helpful when your brackets get a bit overwhelming.

Colorize
Colorize instantly visualizes css colors by generating a colored background for them.

Better Comments
Better Comments helps create reader-friendly comments in your code. It lets you categorize your annotations.

Top 3 Platforms to Practice Code

Abbey Bercher — Mon, 10 Jan 2022 14:07:23 +0000

Part of being a developer is constantly learning and improving our skills. Developing projects is always a safe bet, but sometimes we just want to practice for code interviews or maybe just knock out some challenges that gradually get harder. Luckily for us, theres plenty of platforms out there to help us with that!

HackerRank

HackerRank is great for beginners, job searchers, and anyone in between. It offers tutorials and explanations to aid you on your journey. It's also designed to help developers get noticed by employers - you can get certified in various technical skills, compete in contests, and even participate in their career fair.

LeetCode

With support for 14 coding languages and over 2150 questions to practice, LeetCode makes a great option for those wanting to prepare for a coding interview. They even have cases from companies such as Google and Amazon. The community on LeetCode is a key feature, after completing a problem you can check out the discussion section and read through others solutions.

Codewars

Codewars helps to strengthen and master your code skills. This is great for preparing for interviews and sharpening your critical thinking skills. The structure of codewars lets you complete challenges to rise in rank. Upon completion of a challenge, you can view other users solutions and vote on your favorites.

Overall, all three are amazing options when it comes to practice. Try them out and see which one gets you hooked!

useState Basic Training

Abbey Bercher — Sun, 09 Jan 2022 15:34:58 +0000

During my time learning React, I had to spend some quality time with state. State is dynamic data that we can use in our components. State can be useful when it comes to controlling components. State is different from props as props are read-only and can not be modified, whereas state can be modified.

In order to use state, we must first useState.

Before we get started, ensure that you have imported the useState hook. This is a special function called a React Hook that will allow us to access React’s internal state inside of our component.

useState returns an array with two variables: a reference to the current value and a setter function.

Now, we will use array destructuring to create the two variables that useState returns.

We can see here that we have a variable, readerConfused, that tells us the current value of our state is true. We then have a setter function, setConfusion, that will allow us to update our state.

We use state whenever we want our data to change when a user interacts with our app.

Let’s say we want our state to change when a user clicks a button.

Our button has a click event listener that calls on the handleClick function. It also displays text based on if readerConfused is true or false. If readerConfused is true, the user will be prompted to click the button to no longer be confused. If readerConfused is false, the user will be prompted to click the button and be confused again.

Our setter function will cause our component to re-render.

On click, we use our setter function to set the readerConfused value to whatever the opposite of that value is. For example, if readerConfused is true, !readerConfused is false, thus our setter function updates readerConfused to false. Using our setter function causes our component to re-render, thus updating the text in our button to the appropriate text.

Another example of using state

Here, our count’s initial value is set to 0. When a user clicks the button, we use our setter function, setCount, to increase our count by 1. This re-renders our button component to the current value of count. We can click on this button as many times as we’d like, and it will continue to increment and re-render our button.

A few rules and tips for state

React will only update state if a new object/array is passed in to setState, so…

When adding an item to an array in state, use the spread operator
When removing an item from an array in state, use filter
When updating an item in an array, use map

setState is asynchronous. If you need to set state based on the current value of state, it is best practice to use callback syntax.

Only call hooks at the top level. Aka, don’t call hooks inside loops, conditions, or nested functions.

Only call hooks from React Functions, not regular JS functions.

Array Methods — Destructive vs Nondestructive

Abbey Bercher — Sun, 09 Jan 2022 15:29:05 +0000

Working with data is a fundamental aspect of JavaScript. During my first phase at Flatiron School, I found myself using array methods in everything I did. Array methods could be pretty difficult to use, considering there were so many to work with, and they all did different things. There’s many ways we can group these methods, such as arguments and return value.
When working with arrays, we have to be careful and aware of which methods are destructive and which are nondestructive. Destructive methods are methods that return a mutated or altered array, and nondestructive methods return a new array.
Below we can see that after we use .push() on our array, we alter that array. This is destructive.

Below you can see that the spread operator can be used to make a copy of and avoid altering the original array. This is nondestructive.

When should we use a nondestructive method over a destructive method?
We can use a nondestructive method when we want to preserve the data from the original array.
Which methods are destructive?
Destructive methods include .push(), .unshift(), .pop(), .shift(), and .splice()
Which methods are nondestructive?
Nondestructive methods include spread operator […] and .slice()
Summary
Be careful when working with arrays to ensure you don’t mutate data that you want to preserve.