DEV Community: Thomas(Tripp) White

Destructuring in Javascript

Thomas(Tripp) White — Sun, 31 Oct 2021 20:54:46 +0000

Where would we be without ES6? Destructuring is one of the many things that were introduced. It’s easy forget about it with all the other major features added, but its a nice quick and short way to clean up your code. In this article I will explain what Destructuring is and how to implement it.

What is Destructuring?

Destructuring in Javascript gives us the ability to extract values from objects. No longer are the days where you have to create multiple variables and call every element of an array or every key on an object to assign them. Destructuring gives us a streamlined way to exact the values we want all in one line.

//pre ES6
let dogs = ['Ada', 'Taz']
let dog1 = dogs[0]
let dog2 = dogs[1]

dog1
// => 'Ada'
dog2
// => 'Taz'

let myDogs = {
   boyDog : "Taz",
   girlDog : "Ada"
}

let boyDog = myDogs.boyDog
let girlDog = myDogs.girlDog

boyDog
// => 'Taz'
girlDog
// => 'Ada'

The above is an example of assigning variables from an array and object. For the Array, we have to use the element index to extract the value. For the object, we have to use the key to extract the value. We also have to use the variable keyword for each variable we are creating. While this is simple to follow and easy to write it takes up a lot of space. I am only doing this with two values inside my objects. Imagine how tiring and boring it would get with larger datasets!

Implementation

Setting up the Destructuring Assignment is very simple. It looks a little strange at first glance. Lets break it down.

let dogs = ['Ada', 'Taz']
let [dog1, dog2] = dogs

dog1
// => 'Ada'
dog2
// => 'Taz'

let myDogs = {
   boyDog : "Taz",
   girlDog : "Ada"
}

let {boyDog, girlDog} = myDogs

boyDog
// => "Taz"
girlDog
// => "Ada"

Whoah, thats a lot less redundant code! Lets break down how this works starting with the array example above. We start out with a dog array that has two elements. The next line we are doing a couple different things at once. We are declaring the dog1 and dog2 variable and then assigning them the values of the dogs array. When destructuring an array what we put inside the [] to the left of the = will be the name of our new variables we are creating. To the right of = is the array we are destructuring. Its that simple. Some interesting things to keep in mind:

only the variable names you put in the [] to the left of the = will be created. If you had an array with 10 elements but only wanted the first two, all you have to do is put two variable names in the [] and only the first two elements will be extracted.

let number = [1,2,3,4,5,6,7,8,9,10]
let [one, two] = number
one
 //=> 1
two 
 //=> 2

you can skip elements in the array that you do not want to exact with ,,. So from our example above if we wanted the first two elements and then the 6th one we can do the following.

 let number = [1,2,3,4,5,6,7,8,9,10]
let [one, two,,,,six] = number
one 
// => 1
two
// => 2
six
// => 6

you can also setup default values if you like. If there is no element to extract for that position the default value will take over.

let food = ['eggs', 'sandwich']

let [breakfast='cereal', lunch = 'salad', dinner = 'steak'] = food

breakfast 
// => 'eggs'
lunch
// => 'sandwich'
dinner
// => 'steak'

In the above example, if we did not have default values then the dinner variable would have been undefined.

Now lets talk about objects. Object destructuring is very similar to array destructuring. Lets look at the myDogs object from earlier. The setup is the same as the array. Everything to the left of our = will be our variable names and to the right will be what we are destructuring. One difference here is that we use {} instead of []. The major difference is that we need to be aware of what are variable names are. In array destructuring we can call our variables whatever we want since arrays work off an index, but objects retrieve information with keys. So in order for Javascript to know what value we are trying to retrieve, we must use the key associated with that value in our {}. There are two ways to do this. If the variable name is the same as the key then we can use just the keys in our {}.

let myDogs = {
   boyDog : "Taz",
   girlDog : "Ada"
}

let {boyDog, girlDog} = myDogs

Now if we want out variable names to be different than the keys we need to include : when we are Destructuring.

let myDogs = {
   boyDog : "Taz",
   girlDog : "Ada"
}

let {boyDog:youngestDog, girlDog:oldestDog} = myDogs

Above, we are declaring two new variables the youngestDog and the oldestDog and then assigning the value of the boyDog key and girlDog key from the myDogs object.

One last thing to keep in mind about object Destructuring is that you can have default values just like we did with arrays.

There you have it, Destructuring in all its glory. The syntax can feel a little foreign when you start but once you give it time, it will become second nature.

Linear and Binary Search in Javascript

Thomas(Tripp) White — Sun, 24 Oct 2021 19:33:23 +0000

When preparing for technical interviews there are a ton a material to cover and prepare for. The most important thing is coming up with a solution that works and then later showing that you can refactor and optimize your solution. To help in coding problems that require you to search through a set of data there are two very easy ways to do this. Of course there are more advanced ways but these searching techniques are easy to remember and get the job done. You can always go back to refactor and optimize later.

Linear Search

This is the most basic form of searching. Its pretty simple, you just iterate through your data set one at a time till you find what you are looking for. This can be done with a simple loop. Linear search works on both sorted and unsorted data. Since we are going through are data point by point, that means in the worst case we will have to go through every element. If we have a very large dataset, this could take a long time. Here is an example of what a linear search looks like:

function linearSearch(array, number){
   for(num of array){
      if(num === number){
         return true
      }
   }
   return false
}

What the code is doing is very simple. All we are doing is looking at each element of the given array and comparing it to the number passed in. Once it finds a match it will return true or if there is no match it will return false. This can be used on sorted or unsorted data but usually just on unsorted data. There are better solutions for sorted data like Binary search.

Binary Search

Binary Search is a way we can dramatically speed up our searching in large data sets. There is one important thing that you have to keep in mind with this technique. The data set has to be sorted for it to work. If you do this with an unsorted data set it will NOT work. The whole objective of Binary search is to reduce the size of the data we are looking through. We will divide our code and check to see if the value we are searching for is in the first half or the second half. This reduces the data we are searching through in half. We can keep repeating this reduction till we have our answer or no more data to reduce.

To get a better Idea of how this works here’s a visual example:
let searchData = [1,2,3,4,5,6,7,8,9,10]
searching for = 8

=> [1,2,3,4,5] [6,7,8,9,10] //we can tell by looking that 8 is in the second array. This means we can remove the first array from consideration
=> [6,7,8] [9,10] //We reduce again and can see that 8 is in the first array this time
=> [6,7] [8] // 8 is in the second array
=> [8] //this is equal to the value we are searching for and we are now done!

If we did this same search in a linear fashion it would have took us 8 passes to get to our answer. With binary search we did the same task but with only 4 passes. Thats major! Imagine the difference if we had an array with thousands of elements.

To do this in code there are a couple of steps you need to remember to get it to work. We need to start the function by creating 3 variables. The left point will represent the start of the array and the beginning of our sectioned array. The right point will be the end of our sectioned array. Lastly, the midpoint will be the point in our array where we compare our value to see what half our value will be in. Once we create these variables it is time to start searching. We do this with a while loop. We are going to do our divide and conquering till we either find our solution or our left variable is greater than our right variable.

In our while loop depending on if our search value is bigger or smaller than our midpoint will determine what variable we reassign. If our search value is greater than our midpoint then we know everything to the left of our midpoint is to small. We then move our left point to what our midpoint is. We can actually move it one spot past our midpoint because we know that our midpoint is not equal to our value. Once we do that, we reduced the size of the array we are looking at. We recalculate our midpoint inside of this reduce section and repeat the process. Here is what it looks like in code:

function binarySearch(array, number){

   let leftPoint = 0
   let rightPoint = array.length - 1
   let midPoint = Math.floor((leftPoint + rightPoint)/2)

   while(array[midPoint] !== number && leftPoint <=  rightPoint){
      if(number < array[midPoint]) {
         rightPoint = midPoint -1
      } else {
         leftPoint = midPoint + 1
      }
   midPoint = Math.floor((leftPoint + rightPoint) / 2)
   }

   if(array[midPoint] === number){
      return true
   }
   return false;
}

The whole premise of Binary search is to keep reducing your data set till you find your solution. This greatly reduces the time it takes to find a value in a large data set. Remember this only works for sorted data. If you have unsorted data you, will need to either sort it or use a technique like the Linear search or something similar.

To wrap everything up, searching is a very important part of programming. There are two elementary ways of searching that are easy to implement when under pressure during a coding interview. The Linear search is the most stream line and works with unsorted data. The Binary search is much quicker but only works on sorted data.

(Arrow, Functions) => in Javascript

Thomas(Tripp) White — Sun, 17 Oct 2021 05:36:46 +0000

Thanks to ES6 we have an alternative way to declare functions in our JavaScript code. The syntax is quite a bit different than the traditional way but once you get the hang of it you'll fall in love. This article will be a short and sweet overview of arrow functions. Let me know in the comments if you like this short and example based article or if you like more detailed explanations.

What is an Arrow Function

An Arrow function is nothing but a short hand way for declaring a function. The easiest way to get a grasp of this syntax is to convert the traditional function declaration into an arrow function.

function sayName(name){
console.log(name)
}

First: We do not need the function keyword so lets remove it and assign the function to a variable

function sayName(name){
console.log(name)
}

//arrow conversion
let sayName = (name){
console.log(name)
}

Second: We are getting close. Instead of using the (){} we use =>. I wonder where it gets its name from?? Lets changes those out and move everything on one line.

function sayName(name){
console.log(name)
}

//arrow conversion completed
let sayName = name => console.log(name)

Tada!!! It is that easy. Now there are some niche rules to keep in mind. Depending on the complexity of your function will determine the exact syntax you will use.

Parameters

Depending on the number of parameters you have will determine if you need to use the () or not. Easy rule to remember => If you have 1 parameter no need for (). If you have no parameters or more than one you will need to use the () around your parameters.

//one parameter so no ()
let sayName = name => console.log(name)

//no parameter so must have ()
let greetings = () => console.log("Hi there!")

//more than one parameter so must use ()
let sayFullName = (first, last) => console.log(`Hi my name is ${first} ${last}`)

{} curly braces

Depending on the body of you function will determine if you will need to use curly braces or not. If it there is only one return expression and everything is on one line you can omit the {}. If there is additional logic that spans over multiple lines you must include the {} and also use the return keyword.

//simple on liner = no need for {}
let sayName = name => console.log(name)

//body has multiple lines so will need to use {} and return
let findAvg = (num1, num2) => {
   let sum = num1 + num2
   let avg = sum/2
   return avg
}

There is a lot of syntactic sugar at work here. Arrow functions do not use the function keyword. This is why we assign it to a variable. We can still use parameters in our function. This is the first thing we place before the =>. The => is what we use instead of (parameter){logic}. Anything to the left of the => will be the parameters and anything to the right will be the body of our function. One interesting thing about arrow functions is that the return is implied. If there is only one returning expression we can omit the return keyword.

This

This is the main difference between the two different function types. This can be confusing. If you are not aware of what this is I encourage you to go look at some documentation to better understand. As far as arrow functions go, you can not bind this. Normally this would refer to the object it is being called on. This is not the case for an arrow function. In an arrow function this is inherited from the parent scope and is normally the window/global object. Keep this in mind when deciding which type of function to use.

That is a short a simple overview of arrow functions. I hope you find this helpful and can use this as a quick refresher on how to compose your arrow functions. These are great for your simple functions and even better as callbacks. Let me know if you like this short code example heavy article or if you would rather have more detail and text describing the differences.

... or ...? The Rest and Spread Operator

Thomas(Tripp) White — Sun, 10 Oct 2021 03:29:22 +0000

One thing that I have always respected about coding is how everything is cut and dry. There are no double meaning words like in the English language. Like ship for example! Am I talking about a boat or about Amazon Prime? We have keywords in programming languages for a reason. Then ES6 comes along and gives us the rest and spread operator. They both have the same ... syntax but their use varies widely. In this short article I will explain what each operator is and share some examples.

...Rest

The rest operator helps us manage parameters of a function. It allows us to create a function that takes a variable number of arguments. This is much different than the traditional way of declaring functions. What the ... does is convert the arguments we give it into an array. From there we can access each argument the same way you would with any array. The syntax for the rest operator is very simple.

//place ... in front the name you want for your array of arguments
function someFunc(...args){
//When this function is called and arguments are passed in we will have an array of the arguments called args
for(argument of args){
console.log(argument)
}

someFunc(1,2,3)
//=> 1
//=> 2
//=> 3

Some important things to remember about the rest operator. The rest operator should always be your last parameter and the rest operator is used only use during function declaration.

//the first argument passed will be ownerName the rest of the arguments will be placed in an array called dogNames
function ownerAndDogs(ownerName, ...dogNames){
console.log(`Hi my name is ${ownerName}`)
console.log(`I have ${dogNames.length} dog(s)`)
console.log("Their names are ")
for(name of dogNames){
console.log(name)
}
}

ownerAndDogs("Tripp", "Ada", "Taz")
//=>Hi my name is Tripp
//=>I have 2 dog(s)
//=>Their names are
//=>Ada
//=>Taz

...Spread

The spread operator is used to spread an array. There are two main use cases for this operator. The first is when we invoke our function. If we have a function that has multiple parameters and an array that contains the data we want to pass in as an argument, we can use the spread operator to spread the array out. This will make each element of the array a separate argument that we are passing into our function.

//array to spread
let dogNames = ["Ada", "Taz"]

//function that requires two arguments when invoked
function sayDogNames(dog1, dog2){
console.log(dog1)
console.log(dog2)
}

//using the spread operator to spread my array into the two arguments needed for the function
sayDogNames(...dogNames)

If the array you are trying to spread has more elements than is needed in your function, it will still work. The function will just used the first couple of elements it needs to fulfill its required arguments. The rest of the elements will be ignored.

The second main use case for the spread operator is to make duplicates. Arrays are a non-primitive data type in JavaScript. This means that they are passed by reference not value. We can use the spread operator to pass the value of an array. That way we can modify it without worrying about harming the original array.

let array = [1,2,3,4]
//the spread operator spreads the array into individual elements of the new array instead of passing by reference.
let arrayCopy = [...array]

arrayCopy.push(5)

//array => [1,2,3,4]
//arrayCopy => [1,2,3,4,5]

There you have it. The spread and rest operator may look the same but they do two different things. An easy way to keep them apart is to remember that the ...rest is used in function declarations and the ...spread is used when invoking a function or copying an array. I hope this article helps clear any confusion that surrounds ... and ....

The React Lifecycle

Thomas(Tripp) White — Sun, 03 Oct 2021 22:09:31 +0000

Wait! React has a lifecycle? Is this the web form of the Terminator? No humankind is safe! React is such a great frontend tool. For those unaware, React uses components to control what is rendered on the screen for the user. If you want to learn more about how React controls this with the Virtual DOM check out my article What is the Virtual DOM in React. React Class Components have a built in lifecycle that gives them even more utility. Every react component has 3 phases of its life.

Mounting
Updating
Unmounting

As a developer we have access to unique methods in each phase of the components lifecycle. In this article I will discuss what each phase is and also some of the common methods we have access to.

Mounting

This is the very first phase in a components life. The lifecycle methods included in this phase are designed to create/setup and put the component in view.

constructor()
- very first lifecycle method called
- sets the initial state of the component and binds event handler methods
- if there is no state or methods to bind you don’t need to include this in your component
render()
- only required method in a class component
- this is where you place your JSX to get rendered onto the DOM.
- needs to be pure in nature. Meaning that it returns the same thing every time under the same circumstances. If you need to interact with the browser or change state make sure to use other lifecycle methods and not render().
componentDidMount()
- called right after the component is rendered.
- since its called after its rendered you have access to DOM nodes.
- place to make network request to APIs etc. only called on initial rendering

Updating

We know that when state or props change in a component it will trigger a re-render. The lifecycle methods in this phase gives us control over the re-render and allows the component to update.

shouldComponentUpdate()
- called when new props are received
- used to let React know if the new props should trigger a re-render or not.
- defaults to true and triggers a re-render and if returns false will not re-render
- used for performance optimization
render()
- automatically gets called
- same as before. Puts the updated component on the DOM.
componentDidUpdate()
- gets called after the re-render
- works just like componentDidMount() but gets called during updating phase and re-renders

Unmounting

This phase happens as our component rides off into the sunset. This is were we would preform any clean up operations. Once this phase is complete this component will be destroyed.

componentWillUnmount()
- invoked right before a component is unmounted
- used to preform any clean up operations that was created earlier. (timers, network request, etc.)

Functional Components and Hooks

Lifecycle methods used to only be available to class components. This has since changed with the introduction of React Hooks. We use the useEffect hook to access these methods. Accessing these lifecycle methods is a bit different from class components. I may do a separate article about this in the future but in the mean time I encourage you to check out the React documentation on this https://reactjs.org/docs/hooks-effect.html.

Thats React components lifecycle in a nutshell. There are more lifecycle methods in each of the phases, but they are used for very specific cases. To learn more detail about the above methods or to dig a little deeper on the more rare lifecycle methods check out the React documentation.
Knowing more about the different phases of a component and the lifecycle methods associated with each phase will do nothing but make you a stronger React developer.

Lets get Loopy with Javascript

Thomas(Tripp) White — Mon, 27 Sep 2021 01:59:24 +0000

Imagine a world where we had to manual go through every element in an Array. A world where were we have to write ten functions just get a count down from 10 to zero. My fingers and brain are already hurting from just thinking about it. Loops are one of the things we take for granted. In this article I am going to go over the different types of loops in JavaScript.

What is a Loop?

A loop in JavaScript is just a way for us repeat a task a set number of times. We can have loops to iterate through a data structure or have a loop repeat for eternity. There are two main types of loops: for loop and while loop. A for loop will repeat until a condition turns false. A while loop will repeat while a condition stays true. Depending on the condition you pass into the loop, you can get a for loop and a while loop to do the same things. Doing this is not best practice but technically it is possible. Generally, when we want to iterate through a collection or do something that involves a counter we will use a for loop. If we want logic to run till a certain condition changes or if we want an infinite loop we will use a while loop.

For Statement

This is the traditional way for declaring a for loop. The for statement takes in 3 different parameters.

initial expression
- This is where we establish the counter that we will manipulate
- example: let i = 0
condition expression
- This is our condition that will determine if the loop continues or not.
- If condition is true loop continues
- if condition is false loop stops
increment expression
- this is the logic that will change our initial expression
- After every successful loop this will run and change our counter variable
- if the condition is false and the logic inside our loop never runs this will not run either

for(initial; condition; increment){
//some logic
}

When creating a for loop, we first start with our counter. Normally this starts at 0 or 1 but it can be whatever you like. Then we establish our conditional statement. Generally this is setup to check our initial counter to some value. This is what will determine if the loop will continue or not. IMPORTANT: make sure that your conditional statement will eventually be false. If it never turns false you will have an infinite loop and cause your program to crash. Lastly, we establish how we want our counter to change. This is normally increase or decrease by one ++ or -- but it can be anything you like.

//counts down from 10 to 0.
for(let i = 10; i > 0; i--){
console.log(i)
}

For…Of Statement

For of statements are used to iterate though iterable objects like an Array. This statement will give you the values of each element in the Array. These are great when you want to preform logic on multiple elements in an array. The syntax for the for of loop is much simpler than before. This statement takes in 2 parameters and will keep repeating till it reaches the end of the object you passed in.

name of variable
- this is what you want to name the variable that will represent each element
name of iterable object
- This will be what we iterate through

An easy way to remember this syntax is to read it like normal text. For example:

let numbers = [1,2,3,4]

//for each num of the numbers array do something
for(let num of numbers){
console.log(num);
}

for…in statement

This is used when you want to iterate over the properties of an object. Before with the for…of statement we iterated over the values of an iterable array. We use for… in statement when we want to iterate through the properties of an object. This is very beneficial when you want to access the keys of an object and retrieve or modify their values. The syntax is just like the for … of statement expect it uses the key word in instead of of. I wonder where it got its name?

for(variable in object){
//logic
}

While Statement

This is our second type of main loop. The while loop will keep repeating while the condition is true. Once it returns false the loop will stop. This condition will be checked before the logic inside the statement is executed. This means if the condition in the while statement starts off as false, the logic will never run.When creating a while loop you need to make sure to include logic that will eventually cause your conditional to be false. This is similar to the increment expression from the for loop. Instead of having it as an argument, you put it inside of your logic. If you want to have an infinite loop all you have to do is pass the Boolean value true into the condition. True is always true and will never be false so the loop will never stop.


let i = 10

while(i > -1){
console.log(i)
i -= 1
}

do…while statement

The do while statement is very similar to the while statement, but one key difference. Remember how that if the statement in the while loop starts off as false it will never run. The do while statement works in the reverse way. It will run the logic first and then it will check the conditional to see if it needs to run again. This is great when you need the logic to run at least one time no matter what the conditional returns. To create a do while statement we used the do key word and add our logic and then include the while keyword with the conditional after.

do{
//logic
} while (conditional)

I hope all this talked technical talk didn’t make you go loopy. Loops our a foundational fundamental of JavaScript. The more you know about them the better you will be.

What is the Virtual DOM in React?

Thomas(Tripp) White — Mon, 20 Sep 2021 03:35:34 +0000

What makes React.js so snappy and powerful? The Virtual DOM plays a major role in this. If you have ever worked with React, I am sure you heard of it but how comfortable are you with how it works? In this article I will give a brief overview of what the Virtual DOM is and how it works in React.

What is the Virtual DOM

According to React Documentation, "The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM."

To understand the Virtual DOM, we need to take a step back and look at the DOM. DOM stands for Document Object Model. This is basically a structural representation of a web page. The DOM will break down the web page into nodes and objects that we can access and change. This is what allows us to use JavaScript to make our applications dynamic. Whenever we manipulate the DOM, this will cause what the user sees on the webpage to change. With how complex modern web design is, this can easily turn into a problem.

Let's take a simple list for example. When we decide to add/remove something from that list, this will change our DOM and cause it to rebuild and render the update. Even though we just made a change to one list item the whole webpage has to be rendered again and the DOM has to be updated. This is just a simple list. Imagine this on a much larger scale with todays Single Page Applications? This can lead to performance issues fast!

This is where the Virtual DOM comes in to save the day! The Virtual DOM is a copy of the actual DOM. For every object on the DOM there is a copy of that object in the Virtual DOM. The Virtual DOM is stored in memory and the user does not see it. Whenever we update our state and props ,in React, the Virtual DOM gets updated. From there, React knows what to update or keep the same. This is how React can update just sections of a webpage instead of having to rebuild and render the whole webpage after any DOM manipulation like other frontend frameworks.

How the Virtual DOM Works

Okay, now we know about the DOM and the Virtual DOM, how does it work in React? React actually uses 2 Virtual DOMs. One Virtual DOM is created to represent the changes. The other Virtual DOM is a copy of what it looked like before any changes were made. React will then compare these two Virtual DOMs to see what needs to be updated. So how does this look?

Whenever we make a change to a state or props it will rebuild every element on the Virtual DOM. This may sound like this could lead to performance issues but remember this is just a copy in memory of the actually DOM. There is no rendering it on the screen. This is a very fast process. Once the updates are made to the Virtual DOM React will compare it to the "snapshot" of the previous Virtual DOM from before the changes where made. During this comparison React can see exactly what elements changed and needs to be updated. Only the elements that changed from the previous Virtual DOM will be rendered on the actual DOM. This is how React updates only what needs to be updated instead of having to rebuild and render an entirely new DOM when making any updates.

TLDR

To recap briefly, the DOM (Document Object Model) is a structural representation of a webpage. It gives us access to the different elements of our page and effects what is rendered on the screen. The Virtual DOM is a copy of the actual DOM. The Virtual DOM is stored in memory and the user does not see this. React uses two Virtual DOM’s to control what is rendered and updated. Whenever one change is made to the Virtual DOM, all the elements will get rebuilt and create a new Virtual DOM. This new Virtual DOM will get compared to the previous Virtual DOM (from before the changes). The differences between the two Virtual DOMs will then be updated on the actual DOM. This helps to prevent unnecessary renderings and gives us control of changes to our webpage.

I hope this short and sweet article helps shine some light on the Virtual DOM and how it works with React. Understanding this concept will make you a stronger React developer!

A little about Arrays, ArrayList, LinkedList and HashMaps

Thomas(Tripp) White — Mon, 13 Sep 2021 01:17:32 +0000

When I first learned Java I was coming from a JavaScript background. It felt like I was in the wild west with JavaScript. It is dynamically typed so I can have a variable be one data type and change it whenever I want. I could start creating a function without knowing what the return would be and just figure it out or change it at a whim. Java put a stop to this right away. Java is a Static typed language. Whenever we define a variable or a method we must know exactly what that data type is or our program won’t even compile. Knowing what data types and how to manage them in Java is crucial to being a Java developer. This article is dedicated to Arrays, ArrayList, LinkedList and HashMaps. I’ll give a quick summary on what they are and how they work and give a little example of what it looks like.

Arrays

Arrays are an object that allows you to store a collection of ordered values (elements) in a single variable. Arrays in Java have a set size. This is different to how an array in JavaScript works. When you create your array, you must know how many elements you want and what data type these elements will be. You can not add elements to an array. You can only modify them. If you create an array with 5 elements, you may not add a six. You will either have to replace an element with the new 6th one or create a new Array with 6 elements.

Since elements in an Array are ordered you can access them by an index number. The index number is the position of the element in the array. IMPORTANT: Arrays start with an index of 0. If you want to access the first element in the array, the index will be [0] not [1]. To change the element of an Array you can access the element and set it equal to the new value.

These are great to use when you have a predetermined number of values and need to access random elements throughout the array.

class Main {
    public static void main(String args[]) {
        // creating an array of strings called dogs. This creates a new array with two elements.
        String[] dogs = {"Ada", "Taz"};
        // This changes the value of the first element "Ada" to "Snoopy"
        dogs[0]="Snoopy";
        //You can also create an array without having the values. This will create an array with 4 elements.
        int[] randomNums = new int[4];
    }
}

ArrayList

ArrayList are very similar to Arrays. An ArrayList is a resizable array. This means you can add or remove elements. An ArrayList actually contains a regular Array that we discussed earlier. When you add an element to the ArrayList it will check to see if there is room in the array for the element. If there is not enough room it will create a new Array with the new size and remove the old one. This is done behind the scenes but its important to know.

To use an ArrayList you must import java.util.ArrayList; This will give you access to the different methods that come with ArrayList. IMPORTANT: Elements in an ArrayList are objects. If you want to create an ArrayList of a primitive data type you will need to use a wrapper class. <Boolean> <Character> <Integer> etc.

ArrayList are great for sorting and accessing data. If you need to access random elements inside of an Array and the Array size may change, ArrayList is a great option.

import java.util.ArrayList;

class Main {
    public static void main(String args[]) {
    //Creates an empty ArrayList of data type Strings
        ArrayList<String> dogs = new ArrayList<String>();
    // Add elements to the newly created ArrayList
        dogs.add("Ada");
        dogs.add("Taz");
        dogs.add("Snoopy");
    //removes(“the element at index 2”)
        dogs.remove(2);
    //prints out the first element of the ArrayList dogs
        System.out.println(dogs.get(0));
    }
}

LinkedList

LinkedList is very similar to an ArrayList. You might notice the List at the end of the name. This is because they both implement the List interface. This gives them a lot of the same characteristics and methods. What makes LinkedList different is in the way that they are constructed. Remember how an ArrayList contains and Array and will create and remove the Array as needed. A LinkedList stores its items in “containers”. This “container” holds your element. When you add new elements it creates new “container” and links it to a different “container” in the LinkedList. That is where it gets its name from. With the nature of how these work, it is more efficient to use a LinkedList when you want access to the first or last element of the array.

To use LinkedList you must import java.util.LinkedList’

import java.util.LinkedList;

class Main {
    public static void main(String args[]) {
        //This creates a new LinkedList of Strings that is empty
        LinkedList<String> dogs = new LinkedList<String>();
        //This adds new elements to our LinkedList
        dogs.add("Ada");
        dogs.add("Taz");
        dogs.add("Snoopy");
        //This removes the last element of our LinkedList
        dogs.removeLast();
        //Both lines will print the first element of our LinkedList
        System.out.println(dogs.get(0));
        System.out.println(dogs.getFirst());
    }
}

HashMap

HashMaps are a bit different from what we talked about before. HashMaps can be think of as key value pairs. Before, when we wanted something we would get it by calling its index. HashMaps do not use an index to get values like Arrays do. To get a value from a HashMap you access it by the key associated with that value. You can have different data types for keys and values in a hasMap. This means you can have a string key and a int value if you wanted. HashMaps can make accessing specific values easy and quick.

To use HashMaps you must import java.util.Hashmap; When creating a HashMap we pass in the data type of both the key and value inside of <key, value>. These are objects so we will need to use the associated wrappers for primitive data types. The first object passed will be the key data type and the second will be the value data type.

import java.util.HashMap;

class Main {
    public static void main(String args[]) {
        //creates a HashMap called studentGrades that have a key that is a string and a value that is a char
        HashMap<String, Character> studentGrades = new HashMap<String, Character>();
        //adding to HashMap
        studentGrades.put("Tripp White", 'A');
        studentGrades.put("Class Clown", 'F');
        studentGrades.put("Teachers Pet", 'C');

        //changes the Teachers Pet to an A for good behavor ; )
        studentGrades.replace("Teachers Pet", 'A');


        //prints out the value of "Teachers Pet" key in the studentGrades HashMap
        System.out.println(studentGrades.get("Teachers Pet"));
    }
}

That is a basic outline of Arrays, ArrayList, LinkedList, and HashMaps. I hope this helps you in understanding Java and build some great applications. As always look at the documentation for a full description and the many methods that can be used with each one.

--css variables

Thomas(Tripp) White — Sun, 05 Sep 2021 21:23:19 +0000

Why in the world do do hex or rgb colors have to be so hard to remember? Not to mention how much of a pain it is to find and change them when you change your color scheme. CSS variables to the rescues! If you have never used CSS variables the time to start is now. They are widely supported across browsers and can make you styling a breeze.

What are --css variables

CSS variables are a way for you to assign certain css values to a keyword and reuse them throughout your application. CSS variables can have local or global scope and can be manipulated with JavaScript. Most often, they are used to help you manage your colors but you can use css variables many different ways. In the simplest form, a css variable is nothing but a keyword that has a value assigned to it.

Syntax

To declare and use a css variable is very simple. There are 3 main things you need to remember: -- :root var(). —- is used whenever you assign and declare your variable. To create a variable you must put —- in front of your variable name.

:root{
/* my variable name is main-color and my value associated with it is #5a9e4b */
--main-color: #5a9e4b;
}

:root is how you declare global scope. Scope is basically where all you can access your variable from. Global scope means you have access throughout your css file. You can create a local variable by using the —-variable-name inside of a class. A local variable means that you only have access to this variable locally inside that class.

/* This is declaring a global variable that I can access from anywhere in my css file. Anything inside of :root is global.*/
:root{
—-main-color: #5a9e4b;
}

/* This is declaring a local variable. I can only access this variable inside of this class */
.container {
--main-text-size: 24px;
font-size: var(--main-text-size);
}

var() is how you call your variables. Remember a variable is nothing but a keyword that has a set value. To pass this value to a css property all you have to do is type the name of your variable inside of the (). It’s that simple!

/* creating a global variable for main-color */
:root{
—-main-color: #5a9e4b;
}

/* passing the variable name into the var function. This will put #5a9e4b as the value to the color property. */
.someClass {
color: var(—-main-color);
}

Fallbacks

Unfortunately not all browsers are created equally. While most browsers are pretty robust its best practice to have some fallbacks in place. There is special syntax that you can use to have a fallback for your value. Its the same var() as before but you add a second argument. var(--main-color, blue); This will use your css variable --main-color and if it is invalid or not defined it will then make the value equal to blue. The var() only takes in two arguments and the second argument can be an additional css variable if you want. var(--main-color, var(--ultimate-fallback)); This will try to use main-color first and if its invalid will then use the --ultimate-fallback.

:root {
--main-color: #5a9e4b;
}

p {
/* will try --main-color first. If invalid will use blue */
color: var(--main-color, blue);

Now this will not act as a fall back for browsers that do not support css variables. To create a fallback for this is a little extra work but possible. CSS reads one line at at time. You can have the same property with two different values for the same class and css will use the last one written. We can take advantage of this with our variables. You can hard code your fallback in your css class and then on the next line add your css variable. Css will read each line and if the browser does not support css variables it will then default to your hard coded fallback. If the browser does support css variables then it will use it since it was used after the fallback.

:root {
--main-color: #5a9e4b;
}

p {
/* will use --main-color since it is last color property written. If invalid will then use blue.*/
color: blue;
color: var(--main-color);

Using JavaScript

Since css varaibles have access to the DOM you can change them with JavaScript! You can make some really interesting user interfaces with this trick. To start create your css variables like you normally would. Then use querySelector to get access to the root element. Now that you have access to the root element, all you have to do is use the setProperty() method to change the value of you variable. This will update the value and hence update your entire css file everywhere you used that variable. The setProperty() method is a method on CSSStyleDeclaration Object. I won’t go into detail on this or the other methods you can use. I want to keep this article light and focused on css varaibles instead of JavaScript. Go to https://www.w3schools.com/jsref/obj_cssstyledeclaration.asp If you would like to learn more about what you can do.

:root {
—-primary-color: #5a9e4b;
}

p {
color: var(—-primary-color);
}

//gives me access to the root element
let rootElement = document.querySelector(':root');

//this will change the style of my —-primary-color variable to red.
rootElement.style.setProperty('--primary-color', 'red');

In the above example I have a css variable called —-primary-color that is set to the value of #5a9e4b. Then I make the color to all of my <p> tags equal to my new variable. In the JavaScript section, I first create a variable that is equal to the root element. Then I can access my variable by using the setProperty('variable name', 'new value') method. The first argument is the variable name and the second argument is the new value. Now all my <p> will have red text!

You now have the knowledge needed to start using css varaibles in your applications. This will help increase developement speed, readability, and maintainability. If you enjoy this you can look into things like Sass to further extend your css capabilities.

CSS Position Property

Thomas(Tripp) White — Sat, 28 Aug 2021 20:51:19 +0000

We have all been there before. Randomly trying different CSS properties to try get your page layout correct. This brute force approach to problem solving can be frustrating. You will finally get one thing right but mess up something else and have no idea why! I am going to try to fix this dilemma for you with this article. Knowing what each type of positioning is in CSS and how they work will greatly speed up your workflow and allow you to make some pretty amazing things!

The Position Property

The CSS Position Property has multiple values that makes it seem overwhelming at first but I promise once you get the hang of it, its easy! The Position Property has 4 values that you need to understand. There are also properties that will fine tune your layout like top, left, right, bottom, and z-index. Depending on which of the 4 values you use, will determine how those fine tuning properties will effect your layout. Don't worry I know I just packed a lot into those last two sentences. I am going to break down each of these positions to make it a little clearer.

Static

I know you are familiar with Static positioning! It is the default position for HTML elements. All static means is that the positioning is based on the normal flow of the page. Since everything is based on the normal flow of the page the fine tuning properties I mentioned earlier do not work with static.

default positioning of HTML elements
will position elements based on the normal flow of document
left, top, right, and bottom do not work with this position

Relative

This property is named very well. position: relative bases all positioning relative to its normal position. We are allowed to use the other position properties. When we set a top, left, right, or bottom it will adjust the position of the element according to where it would have been normally. One thing to keep in mind is when you make these adjustments there will be no automatic adjustments for the gaps you create. All other elements will adjust according to the original 'normal' position of the element while the position properties will adjust where it actually shows up on the page.

positions elements relative to its normal position
other elements will not adjust for any gaps and base their position off the relatives 'normal' position

Fixed

position: fixed is used when you want to position an element to one place according to the viewport. When using our position properties with fixed, it will base all positioning according to the entire viewport. Once it's established, it will remain there even if the user scrolls. It is fixed in position! Important things to remember:

items positioned according to viewport
other elements will not adjust to make up gaps
elements are fixed and will not change there location on viewport when user scrolls

Absolute

position: absolute will position its element outside of the normal flow of the page. This means that other elements will not care where this is. This can lead to overlapping content if not managed properly. The absolute positioning will be based on its nearest positioned ancestor. It will ignore any none position elements and go and look for an element that has some position property attached. If it can not find one it will base its position on the document body. Since this is position outside of the normal flow of the document, other elements will not adjust for this elements position.

positions outside of normal flow of page
positioning is based on its nearest positioned ancestor
if no positioned ancestors will base position on document body.

If I changed my positions to be 0px from the left it will overlap the content of its parent div.

If my absolute div does not have a position ancestor it will position based to the document body.

Z-index

z-index is used to control overlapping elements. With the z-index you can adjust what element is on top of each other. This works for position elements only. This will not work for static position elements. To control the overlapping you just give you z-index a value. The largest number will be on top and the smallest number on bottom. You can use -1 if you want the element to always be in the very back of the document. If you do not give your elements a z-index it will default to putting whatever element came last in your html on top and keep that order for all overlapping elements. In the example below I have overlapping elements but never established a z-index.

controls the order of overlapping elements
largest number will be on top and smallest will be on bottom
if no z-index established will default to putting the last element in html on top

In the example below I added a z-index to each div. This is how I reversed the overlap from before.

I hope this article helps clear the confusion on CSS positioning and takes your page layouts to the next level. Next time your stuck on a frustrating page layout issue just take a step back reference this article and see how each of your divs are position. From there you can troubleshoot and get back on track in no time!!

Common Array Methods in Javascript

Thomas(Tripp) White — Mon, 23 Aug 2021 03:08:25 +0000

Wether you are building the new facebook or studying for that next technical interview, you are going to be working with arrays. In Javascript and Array is an object that stores multiple values to a single variable. This data structure can be manipulated in many different ways with array methods. There are tons of array methods built into Javascript. In this article I’ll go over some very common methods and let you know what they look like and what they do!

unshift()

unshift() will add elements to the beginning of the array. This method modifies the original array and will return the length of the array after adding the element.

let numbers = [2,3,4,5,6]
numbers.unshift(1) //returns 6
numbers == [1,2,3,4,5,6]

pop()

pop() will remove the last element of an array. This methods return value is the last element that it just removed. IMPORTANT: This will change the original array.

let dogs = ["Ada", "Taz"]
dogs.pop() //returns "Taz"
dogs == ["Ada"] //true

forEach()

forEach() will iterate through the entire array and pass the element into a function where you can then do some logic. This methods return is dependent on what is inside of the function that the elements are being passed to.

let dogs = ["Ada", "Taz"]
dogs.forEach(dog => {
console.log(`Who is a good dog? ${dog} is!`);
}

join()

join() will take all the elements of an array and make them a string. This string will have all the elements separated by a comma. This method will return a string and will not modify the original array.

let smallNumbers = [1,2,3,4,5,6,20]
smallNumbers.join() // returns “1,2,3,4,5,6,20”

map()

map() is very similar to the forEach(). They both iterate through an array but map() will create and return a new array. This new array will be made based on the logic you pass inside of the function. This does not modify the original array.

let numbers = [2,4,6,8]
numbers.map(num => num * 2) 
//returns [4,8,12,16]

filter()

filter() creates a new array with elements of the original array that pass a test. This method returns a new array and does not alter the original array.

let smallNumbers = [1,2,3,4,5,6,20]
smallNumbers.filter(num => num < 10); //returns [1,2,3,4,5,6]

concat()

concat() is used to join two or more arrays. This method will return a copy of the joined arrays. This way you don’t have to worry about changing the original arrays.

let dogs = ["Ada", "Taz"]
let owners = ["Tripp", "Melissa"]
let dogsAndOwners = dogs.concat(owners)

every()

every() will check to see if all the elements pass a certain test. If all elements pass the test it will return true. If even on element fails the test then it will return false. This does not modify the original array. It just returns a boolean value based on your test.

let smallNumbers = [1,2,3,4,5,6,20]
smallNumbers.every(num => num < 10); //returns false since 20 is larger than 10

find()

find() will look for the first element in the array that passes a condition. Its important to remember that if there are more than one match in the test array that it will only return the first match. If this method finds a match it will return true and stop. If it finds no match it will return undefined.

let smallNumbers = [1,20,3,4,5,6,20]
smallNumbers.filter(num => num > 10); //returns 20. To be specific it returns the second element since it is the first to pass the conditional.

includes()

includes() will look in the array for a specific element that you tell it to. If it finds the element it will return true if it does not find the element it will return false. It is important to remember that this is case sensitive.

let dogs = ["Ada", "Taz"]
dogs.includes("snoopy") //returns false
dogs.includes("ada") //returns false since "ada" is lower case and its capitalized in the array
dogs.includes("Taz") //returns true

reduce()

reduce() can be a tricky method to get down but it is so useful in the right situations. This method will iterate through the entire array and return a single value that is the accumulated result of all the elements being passed through the reducer function. This will perform logic on one element and remember the results and then use that results on the next element in the array. You can also set the default value that the reducer will start. It defaults to 0 but if you prefer to start you calculations at 100 you can. This does not change the original array.

let numbers = [1,2,3]
let reducer = (accumulator, currentValue) => accumulator + currentValue

numbers.reduce(reducer) //returns 6
numbers.reduce(reducer, 100) //returns 106

reverse()

reverse() will reverse the order of the array. This will modify the original array.

let dogs = ["Ada", "Taz"]
dogs.reverse() //returns ["Taz", "Ada"]

shift()

shift() will remove the first element of an array and will return the element it removed. This method does change the original array.

let dogs = ["Ada", "Taz"]
dogs.shift() //returns ["Ada"]
dogs == ["Taz"]

slice()

slice() will return a selection of elements in the array as a new array. You can be very creative with this method to get the section of the method you want. This method requires a start argument and and end argument. The end argument you pass is where you want it to stop, but it does not include that number. The start and stop locations are based off the array index. Its easy to forget this. This does not change the original array.

let number = [1,2,3,4,5,6]
number.slice(1,4) // returns [2,3,4]

sort()

sort() will modify the original array and sort it. This is great to use if you want to sort and array of strings. It will default to sorting it alphabetically. You can also sort numbers and it will default to sorting in ascending order.

let dogs = ["Taz", "Ada"]
let numbers = [1,3,2,4,6,5]

dogs.sort() //returns ["Ada", "Taz"]
numbers.sort() //returns [1,2,3,4,5,6]

splice()

splice() adds and removes elements from the array. This method requires an index to start at. It also takes an argument for how many you would like to remove and the new element(s) you want to add. Basically you tell it what element to start if/how many elements you want to remove and then the elements in the order that you want to add in that place. This changes the original array. It will return the removed elements.

let numbers = [1,3,4,5,6]
//splice(start, deleteCount, item1ToAdd, item2toAdd, etc);
numbers.splice(1,0,2) //returns [ ] because it did not remove anything
numbers == [1,2,3,4,5,6]

I hope you found this list of methods helpful. Bookmark this page and use it as a quick reference as you learn these methods and become an expert JavaScript programmer!

Simple Tailwind CSS Clean Up

Thomas(Tripp) White — Sun, 15 Aug 2021 21:25:22 +0000

Tailwind CSS is a utility first CSS framework. This allows you to create dynamic and beautiful webpages without having to go back and forth between CSS files. No more having to come up with crazy descriptive but short class names. All this power does come with some draw backs. One of the major draw backs is how messy you code can look, but no worries there is a way to clean this up. Today we will talk about base styles and extracting component classes.

Tailwind CSS styles your applications by using utilities. Utilities are just specific class names that relate to some css property and value. This is great till you have tons of utilities listed like below.

<button class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75">
  Click me
</button>

Now you want to reuse this element across your application. No problem, just copy and paste right?? Oh wait, what if I want to change the color of my text and background? Now I have to go find every place I pasted and change the utility one by one. This can be very frustrating and make bigger projects unmaintainable. The good news is that there are a couple of tricks to help this pain point.

Base Styles

Tailwind CSS comes with a set of base styles called the preflight. These base styles are bare bones. This is both good and bad. The good is that it opens up for greater control of your styling but the bad is that it removes a lot of common stylings. For example an <h1> and <p> will look exactly the same. Margins are even removed from most elements. This means every time you put an <h1> or <p> you will have to add utilities every time to style it. This gets boring quick!

To fix this you can set your own base styles. I would only recommend doing this if you know that a certain element will always be the same no matter where you use it. For example, if I had a design where I knew that my <h1> would be a set size and a set font everywhere in my application, I would add it to my base styles. This way I can simply just type <h1>Hello World!</h1> instead of adding all the utilities needed. If I decide to change or add something later I can just simply modify my base style instead of finding all the <h1> across my application.

This is very simple. All we have to do is open up our CSS file that has our tailwind setup. Below the setup, we can add our base styles by using the keywords @layer and @apply. The @layer keyword tells Tailwind which “bucket” this set of custom styles belong to. In our example, we are telling Tailwind that these custom styles belong to base layer. This also tells tailwind to consider these styles for purging. The @apply keyword allows us to use tailwinds utilities in our own custom css.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
}

Now every <h1> in our document will start off with these utilities attached. Remember these are just our base styles. We can still add more utilities in different parts of our application if we wanted.

Extracting Component Classes

What do we do if we use the same component over and over again. Adding base styles to each element in that component is not ideal. The simplest way is to extract a component class. We do this just like we did earlier. Remember that the @layer keyword tells what “bucket” our custom css belongs to? We just repeat the above but instead of using the base layer we use @layer components {}.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-blue {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

Now in our code, all we have to do is add the class btn-blue and our button is styled. If we want to change something about our button we just have to edit that extracted component class once and it updates every where for us.

With these simple tricks you can quickly clean up your code and make it much easier to maintain. There are other neat tricks that can help streamline your use of Tailwind. I encourage you to go check out the documentation (its one of the best around). I hope you found this helpful and good luck with your upcoming projects!

(all code examples are from Tailwind Docs https://tailwindcss.com/docs)