DEV Community: Brad Bieselin

dropDesk - How I made Jira FRIENDLY!

Brad Bieselin — Mon, 25 Jul 2022 18:32:00 +0000

Have you ever used Jira? I did for one job, and that is definitely one complicated application to use. In comes dropDesk.

dropDesk was the final project I built while enrolled in Flatiron School's Immersive Software Engineering bootcamp. My ultimate goal for my final project was to create some type of ticket system with Jira in mind. What sparked the final idea of dropDesk was when I thought about how much is going on in Jira, and how it can become overwhelming. My solution: make it simple and friendly. The tech stack for this project was a React frontend and a Ruby on Rails backend.

Let's take a look:

DROP

dropDesk is named after the drag and drop functionality I added to it using the React-Beautiful-DnD library. This library allows you to drag and drop items on the webpage to different parts of the page, which is all configured manually. So, you can only drag and drop into a specific place on the page!

Create your ticket in the category of your choosing:

Then, drag the ticket between the categories to change it's current category! Simple enough!

Scaling the app

The app is currently still being developed to be a full scale app. The next phase of development for this app is to allow users to create separate teams. What's great about this feature is that you could choose to create a team of your own and use it as a task tracker, or a company can create different teams for within the company which can be moderated by admin users.

Please feel free to explore the application here: https://dropdeskapp.herokuapp.com/

The source code can be found here: https://github.com/bradbieselin/dropDesk

If anyone has any questions or suggestions, please comment below! The project is open source as well!

Flood Fill (Recursion)

Brad Bieselin — Thu, 14 Jul 2022 15:06:27 +0000

Today I came across my first Leetcode graph problem, Flood Fill.

Here is the question:

The goal of the problem is to take a given image, in this case:

And flood fill the image starting from a specific pixel (the red 1 in the center).

Basically we need to replace any of the 1s on the graph with a 2. However if there are any other numbers on that graph (such as 0), we should leave them as they are.

Once we have replaced all the 1s with 2s, we return the modified image:

How do we approach this problem?

Let's take it one step at a time. We first need to recognize that to traverse through this graph, we can use recursion. We will need some recursive function within our algorithm to repeat until our conditions are met.

Now that we have done that, lets get rid of any possible edge cases.

var floodFill = function(image, sr, sc, color) {
    if(image === null || image.length < 1) {
        return image;
    }
};

We know that if the image is null, then we can't do any transformation. Let's return the image if that is the case. If the image is of length 0, we also return the image, as the image is empty.

Next, we need to store our starting point in a variable. We are given our starting point through the parameters image, sr, and sc.

var floodFill = function(image, sr, sc, color) {
    if(image === null || image.length < 1) {
        return image;
    }
    let start = image[sr][sc]
};

sr represents the row, and sc represents the column.

The recursive function

To begin our recursion, lets create a function that takes in the provided parameters, plus our starting point variable, start.

var floodFill = function(image, sr, sc, color) {
    if(image === null || image.length < 1) {
        return image;
    }
    let start = image[sr][sc]
    const fill = (image, r, c, color, initCol) => {}
};

With any recursive function, we need a way to break out of the function, which is referred to as the base case. Here is what we will use as the base case:

if(r < 0 || r >= image.length || c < 0 || c >= image[0].length || image[r][c] !== initCol) {
     return;
}

Remember, r represents rows and c represents columns. If we have no rows, or the row number is greater than the length of the image, we have no possible pixels to transform. This is the same for the columns.

Now that we have a base case set up, we can create our recursive logic.

Let's quickly check what all of our code looks like together:

var floodFill = function(image, sr, sc, color) {
    if(image === null || image.length < 1) {
        return image;
    }
    let start = image[sr][sc]
    const fill = (image, r, c, color, initCol) => {
    if(r < 0 || r >= image.length || c < 0 || c >= image[0].length 
        || image[r][c] !== initCol) {
    return;
    }
  }
};

There's a little trick with this type of problem, which isn't clear at first but makes total sense once you understand how it works.

The first thing we want to do is set image[r][c] = -1

Why?
Remember in our base case, we return if image[r][c] !== initCol

What we can do with this is replace all the 1s with -1. Then, we run our recursive function. You'll see how it all comes together in just a moment.

var floodFill = function(image, sr, sc, color) {
    if(image === null || image.length < 1) {
        return image;
    }
    let start = image[sr][sc]
    const fill = (image, r, c, color, initCol) => {
    if(r < 0 || r >= image.length || c < 0 || c >= image[0].length 
        || image[r][c] !== initCol) {
    return;
    }
    image[r][c] = -1;
    fill(image, r-1, c, color, initCol);
    fill(image, r+1, c, color, initCol);
    fill(image, r, c-1, color, initCol);
    fill(image, r, c+1,color, initCol);
  }
};

We call our recursive function 4 times here, because the problem requires us to change any pixels connected 4-directionally. Take a look at each call of fill(). In the first run, we are calling this on r-1, or the row to the left of the start point. We hit our if statement (base case), return, set the 1 to -1, and run the next fill() call. This repeats for r+1, c-1, c+1 so we are moving in all 4 directions and changing our starting point each time, until it is not possible to change anymore pixels. Now all of our 1s are -1s and our 0s still remain.

Once we have called our recursive function 4 times, we add this final line to the function: image[r][c] = color;
All this does is replace all the -1s with 2.

Finally, we call our recursive function and then return our modified image:

var floodFill = function(image, sr, sc, color) {
    if(image === null || image.length < 1) {
        return image;
    }
    const initCol = image[sr][sc];
    const fill = (image, r, c, color, initCol) => {
        if(r < 0 || r >= image.length || c < 0 || c >= image[0].length || image[r][c] !== initCol) {
            return;
        }
        image[r][c] = -1;
        fill(image, r-1, c, color, initCol);
        fill(image, r+1, c, color, initCol);
        fill(image, r, c-1, color, initCol);
        fill(image, r, c+1,color, initCol);
        image[r][c] = color;
    }
    fill(image, sr, sc, color, initCol)
    return image;
};

This can be quite a tricky question, but what's great about this problem is that how we handled moving 4-directionally will apply to any other similar problems!
Give it a try, draw it out on a whiteboard, and good luck!

The sliding window pattern

Brad Bieselin — Mon, 27 Jun 2022 16:58:22 +0000

Depending on the problem at hand, there are patterns that we can follow to help us solve algorithm problems. The sliding window pattern creates a window which can be an array or number from one position to another. The sliding window pattern is very useful for keeping track of a subset of data in an array, string, etc. when the data is continuous in some way. Depending on a certain condition, the window increases or closes.

Recognizing the sliding window pattern

Again the sliding window pattern is very useful for keeping track of a subset of data. This will often be in an array and the data is continuous. The following is an example problem which can be solved using the sliding window pattern.

Write a function called maxSubarraySum which accepts an array of integers and a number called n. The function should calculate the maximum sum of n consecutive elements in the array.

Some example inputs look like this:
maxSubarraySum([1,2,5,2,8,1,5], 2) => 10 maxSubarraySum([1,2,5,2,8,1,5], 4) => 17 maxSubarraySum([4,2,1,6], 1) => 6

Solving the maxSubarraySum problem

The following solution is of the Time Complexity O(N). Many people may start out by teaching the naïve or "easy" solution. Instead, lets look at this solution which uses the sliding window pattern. If we can understand how this pattern works now, you will start to recognize other similar problems and you will be able to apply the sliding window pattern to those problems as well. You will also get a much better time complexity following this solution.

function maxSubarraySum(arr, num) {
  let maxSum = 0;
  let tempSum = 0;
  if(arr.length < num) return null;
  for(let i = 0; i < num; i++) {
    maxSum += arr[i];
  }
  tempSum = maxSum;
  for (let i = num; i < arr.length; i++) {
    tempSum = tempSum - arr[i-num] + arr[i];
    maxSum = Math.max(maxSum, tempSum);
  }
  return maxSum;
}

So, what is this solution doing?
First we are declaring two variables, maxSum and tempSum. These will be used a bit further down in our code. We have an if statement to check for any edge cases where the array is invalid. Num is the number with which we need to find the sum in our array. If the number is larger than the length of our array, we can't get a valid sum, and thus we return null.

Then, we create our first sum.
Let's take this example and pass in 3:
maxSubarraySum([2,6,9,2,1,8,5,6,3], 3)
We go to the beginning of our array and sum together the first 3 numbers(2, 6, and 9). We store the sum of these numbers in a variable, which we called maxSum. We then set our tempSum equal to maxSum(note we are returning maxSum at the end of the function). We now start another loop. Instead of starting at the beginning, or index 0, we start our loop after the first 3 numbers we already summed together. In this case, we would start at index 3(2).

Our tempSum is currently storing the value 17 (2+6+9), and we are going to add 2 (from index 4) and subtract 2(from index 0). If we check our sum again, we still have a value of 17. When we iterate through the loop again, we take our tempSum(17), add 1(index 5), and subtract 6(index 1). Our new tempSum is (9+2+1). The last line of our for loop takes the maximum value between maxSum and tempSum. If tempSum is larger than the value of maxSum, we overwrite maxSum's value. Otherwise, we continue looping.

Why does this solution work with O(N) time complexity?

We could have a million digits, or even millions of digits. The beauty of the sliding window pattern is that we only ever have to loop over our array one time.

Practice this question and solution. Then, start looking for more sliding window pattern problems. Give this one a shot:

Write a function called minSubArrayLen which accepts two parameters - an array of positive integers and a positive integer. This function should return the minimal length of a contiguous subarray of which the sum is greater than or equal to the integer passed to the function. If there isn't one, return 0 instead.

Examples:
minSubArrayLen([2,3,1,2,4,3], 7) => 2 ([4,3] is the smallest subarray) minSubArrayLen([4,3,3,8,1,2,3], 11) => 2

Ruby - Inheritance

Brad Bieselin — Fri, 03 Jun 2022 20:32:31 +0000

What is Inheritance?

Ruby is an object-oriented programming language, and thus allows for inheritance. This allows the programmer to inherit the characteristics of one Ruby class into another Ruby class, which is called the superclass. Why would we want this? Well, let's be honest here. Programmers are lazy. Inheritance allows us to reuse code. Less typing, more happy.

How to understand inheritance

In our everyday lives, different things are related to each other in various ways. For example, there are many different brands of "cars" such as Honda, Toyota, Subaru, etc. Though they are different brands of cars, they are still all "cars" that have the same characteristics at their core.

A less hierarchal example would be a class of "students" and a class of "programmers" and how they interact. Not all students are programmers, but all programmers are students(if we are talking about students in a school).

This translates very well with Ruby. The use of inheritance in Ruby allows us to create classes that have shared behaviors, while also still having their differences.

Super Class and Subclass

The class which is inheriting is a subclass. A subclass has access to all of the methods of its parent, or super class. Back to our previous example, "Honda" is a subclass of "car" and so "Honda" is our subclass and "car" is our super class.
From "car" we might inherit that a car has four wheels, or a car is 6 windows. However some cars may be electric, while some may be gas. The use of inheritance in programming allows us to inherit methods that can be useful to many different subclasses, while allowing them to also contain their own unique characteristics.

How do we inherit from another class?

There is a very simple syntax to say you want to inherit from another class in Ruby. It looks like this:

class Honda < Cars //Code goes here end

We now have access, through inheritance, to whatever is in the "Cars" class!

We can also find the super class of a class but using the .superclass method:
Honda.superclass in our example, would return "Car" => Car

Using our inherited methods

Now that we have set up our inheritance, we can use the .super method call to refer to methods from our super class for use in our subclass!

Our example may look like this:

//Super Class
class Car
  def name
    puts "Civic"
  end
end

//Subclass
class Honda < Car
  def name
    super
  end
end

car = Honda.new
car.name

=> Civic

Client-Side Routing vs. Server-Side Routing with React Router

Brad Bieselin — Fri, 13 May 2022 18:55:46 +0000

If you are going to be building websites, it's clear you will need to learn routing. It is fundamental in web development and nearly every site you visit will change it's URL as you navigate through the site. When first learning React and creating single page applications, you will see that creating routes is not required to make a functional application. However, once you discover routing, you will never not use it again.

While all websites are connected to a server and a lot of the time routing is handled server-side, frameworks like React have great ways to also handle routing client-side.

So, what is routing?

Routing is the mechanism by which requests are routed to the code that handles them. These requests are specified by a URL and protocol method(HTTP). Essentially, you the router will determine what will happen when a user visits a specific URL.

Sound familiar? We see this every day when browsing the internet.

Server-Side Routing

Server-side routing is still the most common way of handling requests.
Server-side routing looks like this:

A user clicks a link that requests a new page and new data from the server.
The server responds with the requested content.
The content refreshes on the browser.
The URL is updated to reflect the request and content on the browser.

Client-Side Routing

Client-side routing is when the route is handled by the Javascript that is loaded to the page. It's process differs from server-side routing. Let's take a look:

A user clicks a link and the URL changes.
The URL change represents the state change in the application.
NOTE: The whole page does not refresh. Only the component/data with a state change re-renders.

React Router

When using React, we have access to an amazing library called React Router. React Router allows us to do both server-side and client-side routing.

So which routing method should we use? Well, each has it's pros and cons. There's no best method to how you route, and you will need to decide which method best fits your needs.

Typically client-side routing is preferred for fast routing between components, since less data is loaded on each change. Server-side routing is fast on page load, and you will get the exact data you requested. Most browsers are optimized for server-side routing because it has been the more common method for a longer period of time.

Do you want client-side routing?
All you need to do is install the library and wrap your content in the <BrowserRouter> tag, and then create some Routes.
Then, <Link> is used to set the URL and keep track of browsing history.

Do you want server-side routing?
Instead of wrapping your content in the <BrowserRouter> tag, you need to use the <StaticRouter> tag and use ReactDOMServer.renderToString instead of ReactDOM.render.

For more information, check out the docs: https://reactrouter.com/docs/en/v6