DEV Community: Rachel Williams

Express.js vs. Rails

Rachel Williams — Fri, 22 May 2020 22:55:44 +0000

Why I Am Comparing These Frameworks

I am about to start working on a mobile application with another developer. We decided to use React Native for the front end since I already have experience with React. However, we have been trying to figure out what framework to use for our back end. Since I have never used Express before, I wanted to dive into the differences between Rails and Express. Additionally, during my job search I have seen more companies listing Node and Express in job descriptions rather than Rails. It seems like Express would be a good tool to learn and I really enjoy programming in JavaScript, however I also enjoy the simplicity of Rails.

What is Express?

Express is a web framework for creating the server-side of web applications. It utilizes Node.js and just like Rails, it uses an MVC pattern to control back end application logic. It contains HTTP utility methods, a wide variety of middleware that can be included, and many other features to make building a web application with JavaScript easier. Some people have even compared Express to Sinatra which is more of a lower-level Ruby framework than Rails.

Comparing the Frameworks

On first glance, it was pretty obvious to me that Express was much more minimalistic than Rails. Rails is a very large framework and is very opinionated about the way an application should be built. There are model files, controller files, view files, a routes file and much, much more. Express is much more lightweight and there is more flexibility on how you structure your application.

Rails Pros and Cons

Pros

Rails comes with everything you need to create a web application out of the box, including built in support for a SQLite database. Since it is optimized for web applications and has a lot of packages included, creating a standard web application is super fast for developers. Ruby syntax is very intuitive and easy to understand for developers. Since the framework is opinionated, if you look at another developer's Rails application it will be relatively simple to understand how it works.

Cons

Because Rails comes with so many packages, it can be quite slow and heavy. Additionally, since it is quite opinionated about the structure for your application, there is little flexibility and it can be frustrating to work outside of that box. Along with that, the highly abstracted code in Rails can be difficult to debug since the developer is so far removed from the underlying functionality of the framework. One more thing to note, is that it sadly appears that Rails is not being used by companies much anymore.

Express Pros and Cons

Pros

Express is super lightweight and fast. It comes with minimal packages out of the box and developers can add middleware as needed. It is highly customizable and flexible, unlike Rails which keeps the structure of applications relatively similar. It is one of the most supported Node frameworks, so developers can ensure that improvements are being made frequently.

Cons

Due to the fact that Express is lightweight, it can require more lines of code than Rails to create the same application. Rails comes with generators that allow you to build out models, controllers, serializers and more super fast. Express will require more time to code the application how you want it to be.

Decisions

I think after all of my research, I am leaning towards using Express. Since it is lightweight, super fast, and built on top of Node, I think it will be a great tool to learn. We will probably end up using MongoDB / Mongoose along with Express to align with the MERN stack.

Let me know if you guys have created applications with Express and Rails and what your thoughts are on these frameworks. Thank you for reading!

Additional Resources

Browser Fingerprinting

Rachel Williams — Sun, 17 May 2020 05:09:06 +0000

What is Fingerprinting?

Recently I had an interview where my interviewer mentioned fingerprinting as a way to recognize a particular user. I hadn't heard much about it and was intrigued so I decided to do some research on the topic.

Browser fingerprinting is a method used to partially or fully identify a user based on information collected about the user's browser, computer, preferred language and more. Although you might expect that many people would have the same setup on their device as you, it is rare that two user's fingerprint is similar. In fact, according to this article, "only 1 in 286,777 other browsers will share the same fingerprint as another user."

How Fingerprinting Works

Most tech-savvy people are aware that your web traffic can be tracked with cookies or that your location can be determined with your IP address. However, fingerprinting can still partially or fully identify you without either of these things.

With fingerprinting, client-side scripting is used to collect a wide variety of data about you including your operating system, OS version, browser, browser version, screen resolution, list of plugins and much, much more.

Fingerprinting doesn't require cookies. JavaScript knows information about your screen resolution, device size and more to be able to display web applications properly. If you open your developer tools, and type navigator.userAgent you will see your device's user-agent in the console. This has information about your browser, computer, operating system and more. There are other commands you can use such as navigator.plugins to view what plugins you have installed.

HTML5 Canvas

Another way for companies to get data for fingerprinting is by using HTML5's canvas element. This element is used to draw graphics on a web page via JavaScript. Developers will use this feature to draw graphics on your device. Since different devices render images differently, the rendered canvas graphic can be sent through a hash function to create a unique ID for fingerprinting.

Why is Fingerprinting Used?

These days, companies are doing everything they can to collect data about their users. This data can be used to improve marketing, improve the user experience, it can be sold to advertisers, and more. However, it is also used for security and authentication and in fact was originally developed to prevent security risks for users. Ultimately though, fingerprinting is a privacy issue and I think everyone should be aware of it.

Can You Stop It?

There are different ways to prevent fingerprinting if you are worried about your privacy. You can block all JavaScript with an add-on such as NoScript, however this will change the functionality of many websites unless you allow JavaScript to run on them. You can try to use the most popular browser and version, but this is quite hard to do.

The most promising option I found is that the newest Firefox browser protects you against fingerprinting. It blocks "third-party requests to companies that are known to participate in fingerprinting."

Are you Unique?

If you would like to see if you are unique, check out this website. The website checks things like your list of plugins, language header, timezone, presence of adblock and more to see if you are unique.

Thank You

Thank you for taking the time to read this post. What are your thoughts on internet privacy and fingerprinting?

Additional Resources

Mozilla Blog on Fingerprinting

A Few Notes on JavaScript Events

Rachel Williams — Mon, 11 May 2020 00:49:15 +0000

Intro

This blog is going to go over some helpful information about JavaScript events that you may, or may not already know. This blog was inspired by the Syntax Web Development Podcast.

Event Bubbling

Let's say you have this HTML code:

 <div onclick="alert("Button Clicked")">
  <p>
    <button>Click Me</button>
  </p>
</div>

If a user clicked the button on the HTML page, the onclick event handler would be triggered in the div element. How is this possible? Well, events bubble up, meaning that handlers are called starting from the element where the event occurred and up through each of its ancestors. If there was an onclick event listener for the button, and a user clicked the button, the button's handler would get called first and then the div element's handler.

Think of it like a bubble starting from the bottom of a cup and floating up to the top, triggering handlers on the way up.

Please ignore my horrible art skills

Event Capturing

Event capturing is the opposite of event bubbling. Using our example from above, if the button was clicked, the event would be handled by the outermost div, then the inner div, and then the button. This is also called "trickling," since the event trickles down the chain.

Both bubbling and capturing are phases of event propagation. Basically the main difference is the order in which the element's receive the event. For this reason, most people prefer event bubbling since the element they want to target is usually the one that the user will be interacting with. Event bubbling is the default propagation mode.

However, you can specify if you want the event to trigger during the capturing phase. One reason you might want to do this is that some events don't bubble up, like the play event. To use event capturing, you will set the useCapture argument to true. This is the third argument to addEventListener().

event.preventDefault()

Most programmers that have used a JavaScript framework know about this one. This method allows you to prevent the default action of an element. For example, when submitting forms the default action is to reload the page. However, with single-page applications usually you don't want this behavior and so you can use event.preventDefault() to prevent it.

Another example for when you might want to use this is if you want to prevent specific keystrokes from showing up in a text field. See the MDN docs for an example of this.

Target vs. currentTarget

target and currentTarget are properties of events. target is the element which triggered the event. For a click event, this would be the element that was clicked on. currentTarget is the current target for the event as the event traverses the DOM via capturing or bubbling. The current target is the element that the event listener is attached to.

This comes in handy for event delegation, where you can attach one event listener for a bunch of child elements. For example if you had a few buttons nested within the same div element, you can register an event listener for the div and use event.target to see which button was clicked. event.currentTarget will be your div element with all of the nested buttons inside.

Event delegation can save a lot of time because instead of adding event listeners to a bunch of elements, you only have to add it to a common ancestor.

event.isTrusted()

This method will check if the event was created by a user or is a fake event. It will return true if the event was created by a user action and it will return false if it was created by a script or dispatched.

Adding an Event Listener Once

The addEventListener() method has a parameter called once that accepts a boolean. If this parameter is set to true, then the event listener will only be invoked, at most, once. The listener will be automatically removed once invoked.

One use case for this parameter is for a load event. Since a page only loads once, you may want to automatically remove this listener after the page is loaded.

Summary

In this blog, I wrote about a few JavaScript event tidbits that you may or may not know about. What other methods or tricks regarding events do you know about?

Thank you for reading!

Additional Resources

My Take on Comparing Angular and React

Rachel Williams — Sun, 03 May 2020 21:10:27 +0000

Background

I recently decided to build a project with Angular to learn the framework. Before this, the main JavaScript framework that I had used was React. After seeing some of the similarities and differences between the two, I decided it would be good to dive deeper into why I might want to use one over the other.

My First Impressions

The first thing I noticed about Angular was how similar it was to React. It has a main index.html file, which serves as the template, just like React. It also has a main.ts file which serves as the jumping off point for your Angular application. This is similar to the index.js file in a React application. Both use npm for packages and thus have a node_modules folder and a package.json file. Both frameworks make use of components, which are reusable chunks of JavaScript (or in the case of Angular, Typescript) and html that are the building blocks of your application. Additionally, you can create mobile apps with both frameworks.

I did notice some major differences though. For one, Angular uses TypeScript which is a superset of JavaScript. If you would like to learn more about TypeScript, check out my blog. Also, each Angular component has its own HTML file, whereas React uses JSX in the component itself. JSX is a, "syntax extension" to JavaScript and allows you to create React elements that look very similar to XML.

Another big difference is the use of Angular directives to help create logic in the HTML files. One example is ngIf which allows you to create an if statement inside of your HTML. The following is from the docs:

<div *ngIf="condition">Content to render when condition is true.</div>

With React, I have typically written functions in my components to conditionally render elements with if/else blocks like so:

renderPrice = () => {
    if (this.props.concert.attributes.price_range !== "-") {
      return <p>${this.props.concert.attributes.price_range}</p>
    } else {
      return <p>Price Unknown</p>
    }
  }

These functions are then called within React's render() function using JSX.

A Little Bit of History

Angular was developed and released in 2016 by Google. Angular was based off of AngularJS, which was created by Misko Hevery and Adam Abrons in 2009. However AngularJS was completely re-written and transformed into Angular to include things, such as TypeScript and modularity.

React was developed by Jordan Walke, a Software Engineer at Facebook. It was originally called FaxJS, was inspired by XHP, and used internally. It was first deployed in 2011 and open-sourced in 2013.

Angular

Pros

Angular comes with everything a developer needs to create applications. As mentioned earlier, it utilizes TypeScript which compiles to plain JavaScript and the documentation is all centered around TypeScript. The use of TypeScript is considered a pro by most developers because it allows errors to be caught quickly. Angular comes with routing, templating, and more without needing to install additional packages.

Cons

One con to Angular is that although it comes with everything you need to build an application, it can be hard to add additional packages and get them to seamlessly work with Angular components and TypeScript. Also, some say that the learning curve is steep for Angular mainly due to the syntax.

Some companies that use Angular are Google (Gmail), Microsoft, Xbox, and Udacity.

React

Pros

React's exciting features include the Virtual DOM and state. See my blog about the virtual DOM and how it works here. Basically, the virtual DOM allows React to batch updates to the DOM and only make changes to the necessary elements. This feature makes React super fast! State allows each component to contain dynamic data in its own object. This is a great way to package up variables that will change, instead of spreading them out throughout your code. Additionally, including extra packages with React is usually pretty straightforward and easy to incorporate.

Cons

Here are some potential cons of React: You can use TypeScript with React, however the documentation is written in JavaScript so it might not be as straightforward as Angular out of the box. React has routing as well (react-router), but requires installing a different package that isn't included with create-react-app.

Companies that currently use React are Facebook, Instagram, Airbnb, Twitter, Netlix and more.

Wrapping it Up

Deciding whether to get started with Angular or React ultimately depends on your use case. Angular comes with everything you need to build a single-page web application out of the box, while React is sometimes seen as more customizable. Also, some say that Angular has a little bit of a steeper learning curve than React.

Let me know which framework you prefer and why. Thanks for reading!

References

Intro to JavaScript Promises

Rachel Williams — Mon, 27 Apr 2020 00:50:57 +0000

Async Actions

If you have written JavaScript before, you are most likely aware of asynchronous programming. Since JavaScript can only perform one command at a time (it is a single-threaded language), operations that are long, such as retrieving data from a server, can block the main thread. This is bad because to the user, your program may appear unresponsive.

An example of this would be making a fetch request to an API and waiting for the response. While waiting for the response from the API, we want our program to be able to execute other processes. Asynchronous programming allows JavaScript to continue execution of other processes while waiting for another process to resolve. Here is a good blog that goes more in depth on asynchronous JavaScript and the event loop.

Promises

A promise is a JavaScript object that, "represents the eventual completion (or failure) of an asynchronous operation, and its resulting value." Promises were first introduced to JavaScript in ES6. With this new feature, functions can return a promise and continue executing other processes while waiting for it to resolve or settle. Once the promise is resolved, the program can continue with the use of that data it was waiting on.

Before promises were introduced, callbacks and events were used for asynchronous programming, but this presented some challenges. Some people have referred to this as callback hell, as the code can be extremely hard to understand. Here is an example from this Stranger Things themed blog post:

fightTheDemogorgon(function(result) {
  rollForDamage(result, function(seasonsLeft) {
    closeTheGate(seasonsLeft, function(finalResult) {
      console.log('Hawkins is safe for ' + finalResult + ' more seasons.');
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

A Metaphor

I like to think of promises like a ticket you would get from a food truck after you order. The ticket has a number, so it can be associated with your order and you can perform other actions while you are waiting for your food. Meanwhile, the food truck is hard at work getting the order they "promised" ready for you.

States

Promises have three possible states: fulfilled, rejected, and pending.

The initial state of the promise is pending. This is when you first get the ticket from the food truck and are waiting for your order. Maybe during this time you are doing another action you need to complete, like calling your mom. We all know we need to do that more.

A promise is fulfilled if the operation was completed successfully. This would be when the food truck has successfully given you your food. A promise is rejected if it failed. If rejected, there will be an error associated with the promise. This would be the case if the food truck ran out of an ingredient and couldn't make your order. Maybe the error would be a message from the employee telling you what went wrong.

Then / Catch Methods

Two methods that are frequently used with promises are .then() and .catch(). These methods will execute when a promise is "settled," meaning it is no longer pending. Both .then() and .catch() return promises themselves and can be chained onto the original async function.

Then

The .then() method takes up to two arguments. The arguments should be callback functions to execute when the previous async action settled. The first callback will execute in the case of the promise being fulfilled and the second will execute in the case of the promise being rejected. These callback functions are named onFulfilled() and onRejected() in the MDN documentation, but most programmers use arrow functions for their callbacks like so:

return fetch(`${baseUrl}/api/v1/concert/${concertId}/users`, configurationObject)
      .then(r => r.json())
      .then(users => {
        if (users.error) {
          alert(users.error)
        } else {
          dispatch(setUsersOfConcert(users.data))
        }
      })
      .catch(error => console.log(error))

The onFulfilled() function takes one argument, the fulfillment value. In this case, I called the value r for response. The onRejected() callback takes one argument, the reason for the rejection. In this case, I didn't use the second argument for .then(), but this was handled with .catch(), which you will read about below. The promise returned by .then() will resolve to the return value of the passed in callback, or to its originally settled value if the passed in argument was not a callback function. For example, if .then(console.log("hi")) was chained onto an async function, the promise will resolve to undefined.

As you can see, I chained the .then() method on with one argument, to execute in the case of the promise being fulfilled. In this case, I take the response body from the API and parse it to json. The .json() method returns a promise as well, hence the additional .then() chaining.

Catch

The .catch() method is basically the same as .then(), however it deals with the case of the promise being rejected. From the docs, this method actually calls .then() under the hood, with the first argument as undefined. As mentioned earlier, .catch() returns a promise as well. From the docs, this promise is resolved unless the onRejected() callback function returns an error, or returns a promise that is rejected. The promise returned by .catch() will resolve to the return value of the passed in callback.

MDN has a pretty good diagram to explain the flow of chaining:

In most cases that I have seen, developers use .catch() to log errors. Above, in my code snippet, you can see that in the case of an error, I just log it to my console.

Conclusion

There is much more I could write about when it comes to promises. There are more methods associated with them and more use cases. You can even construct your own promise objects using the new keyword. Check out the youtube video I linked in the resources section to see this in action.

I wanted to keep this blog fairly short, but I might go more in depth on the subject in the future. Let me know how you have used promises in your code. Hope you all are safe and happy!

Resources

Intro to Binary Search

Rachel Williams — Sun, 19 Apr 2020 01:21:49 +0000

Quick Overview

Binary search is an important searching algorithm to learn for technical interviews and for use in searching problems you might encounter in your projects. For large arrays this algorithm is very quick. The only catch is that it can only be done with sorted arrays.

The Phone Book Analogy

A lot of people like to think of searching through a phone book when they think about binary search. This analogy is a little bit antiquated considering most people just search the contacts in their phones these days, however I think it's a good way to understand the concept.

If you were to look up a last name in the phone book, let's say the name Smith, how would you go about doing this? Most people would first flip to where they thought the name might be, which might be a little past halfway. Then they would check the names on the page they flipped to. Let's say you flipped to a page with last names starting with P. You would know that since P comes before S, you need to now check the back-half of the phone book. Therefore, you can eliminate all of the names in the phone book from the beginning until just past the page you are on, since you know Smith isn't on that page.

You would repeat this process, searching a spot roughly halfway through the remainder of the phone book and comparing the names to your target name, Smith, until you found the page with the name you are searching for.

This is very similar to how binary search works and explains why it's so much faster than searching each element one by one. Since the data is sorted, we can take a better guess as to where our target value is.

Working on the Pseudocode

With this knowledge of the algorithm, we can begin to work on some pseudocode for how our algorithm should work. Let's say we are looking for the target value 5 in the array: [0, 1, 2, 3, 5, 7, 8].

We know that our function should take two parameters, a sorted array and a target value to find in the array. We know we will be looking at the element in the middle of the array each time and comparing that to our target. If we don't find a match, we know we will need to look at a new part of the array, either the portion after the middle or before the middle.

One good way to find the middle of the array is by using the average. To find the average, we know we will need pointers to the left and right sides of the portion of the array that we are currently "investigating." We will need to add the pointers together and divide them by two. Since this is the case, we will store the index at the farthest left side of the portion of the array we are looking at, as well as the index of the farthest right position.

Next we will create a loop so that we can continue looking at different portions of the array until we find the match. With each loop, we will calculate the index at the middle of the portion of the array we are looking at and compare the value at that index to our target value. If the middle value matches our target, we will return the index of the middle value. If the middle value is less than our target, we will set our left pointer to one above our current middle to look at the last half of the current scope of the array. If the middle value is greater than our target, we will set the right pointer to one below the middle index to look at the first half of the current scope of the array. We will then execute the loop again.

If we can't find a match after searching the entire array, then we will want to return -1, indicating no index found for the target value.

Here is some pseudocode for what we have so far:

function binarySearch(sortedArray, targetValue) {
  //set leftSide to beginning of array at first
  let leftSide = 0
  //set rightSide to end of array at first so the entire array is in scope
  let rightSide = endOfArray

  while (targetNotFound) {
    // average the left and right pointer to find middle. Will need to round this number to get an integer
    let middle = average(left, right)

    if (targetValue === valueAtMiddleIndex) {
      return middle
    } else if (valueAtMiddleIndex < targetValue) {
      leftSide = middle + 1
    } else if (valueAtMiddleIndex > targetValue) {
      rightSide = middle - 1
    }
  }
  // if target value can't be found in array
  return -1
}

Let's walk through the code with our test case.

We start with [0, 1, 2, 3, 5, 7, 8] and are searching for 5
leftSide will be initialized at 0. rightSide will be initalized at 6.
1st loop:
- middle initialized at 3
- The element at index 3 is 3
- Does 3 === 5? No, it is smaller than the target.
- leftSide now = 3 + 1 = 4
2nd loop:
- We are now looking at this portion of the array: [5, 7, 8]
- middle now = (4 + 6) / 2 = 5
- The element at index 5 is 7
- Does 7 === 5? No, it is bigger than the target.
- rightSide now = 5 -1 = 4
3rd loop:
- Now we are only looking at this portion: [5]
- middle now = (4 + 4) / 2 = 4
- The element at index 4 is 5
- Does 5 === 5. Yes!
- Return middle which = 4

It works!

A Problem

Do you see a problem with the pseudocode?

If you thought that the loop could execute forever in certain cases, you would be right. With our current code, we only stop the loop if we find the target value, however if we never find it the loop will continue forever.

A good way to short circuit this loop would be to make sure the left pointer never goes past the right. That is, if the array is down to one more value to check and that value is not equal to our target, we exit the loop. Here is our updated pseudocode:

function binarySearch(sortedArray, targetValue) {
  //set leftSide to beginning of array at first
  let leftSide = 0
  //set rightSide to end of array at first so the entire array is in scope
  let rightSide = endOfArray

  // exit loop if left pointer goes past rightPointer. I removed the targetNotFound condition since the return statement within the loop already handles this.
  while (leftSide <= rightSide) {
    // average the left and right pointer to find middle. Will need to round this number to get an integer
    let middle = average(left, right)

    if (targetValue === valueAtMiddleIndex) {
      return middle
    } else if (valueAtMiddleIndex < targetValue) {
      leftSide = middle + 1
    } else if (valueAtMiddleIndex > targetValue) {
      rightSide = middle - 1
    }
  }
  // if target value can't be found in array
  return -1
}

Let's walk through the pseudocode using the same array as before with a new target value of 4.

We start with [0, 1, 2, 3, 5, 7, 8] and are searching for 4
leftSide will be initialized at 0. rightSide will be initalized at 6.
1st loop because leftSide(0) <= rightSide(6):
- middle initialized at 3
- The element at index 3 is 3
- Does 3 === 4? No, it is smaller than the target.
- leftSide now = 3 + 1 = 4
2nd loop because leftSide(4) <= rightSide(6):
- We are now looking at this portion of the array: [5, 7, 8]
- middle now = (4 + 6) / 2 = 5
- The element at index 5 is 7
- Does 7 === 4? No, it is bigger than the target.
- rightSide now = 5 - 1 = 4
3rd loop because leftSide(4) <= rightSide(4):
- Now we are only looking at this portion: [5]
- middle now = (4 + 4) / 2 = 4
- The element at index 4 is 5
- Does 5 === 4. No, it is bigger than the target.
- rightSide now = 4 - 1 = 3
Exit while loop because leftSide(4) is NOT <= rightSide(3)
Return -1

It works!

This pseudocode is already pretty close to the real thing, but I challenge you to get a working JavaScript function yourself before continuing on. Here's a gif so you don't sneak a peek at my code below.

My Implementation of Binary Search

Here is my implementation of this algorithm using JavaScript:

function binarySearch(sortedArr, value){
  let left = 0;
  let right = sortedArr.length - 1;

  // I chose to initialize these variables outside the loop
  let middle;
  // currentElem will be the element that is at the middle index
  let currentElem;

  while (right >= left) {
      // Math.floor() will round the decimal down to the nearest integer
      middle = Math.floor((left + right) / 2)

      currentElem = sortedArr[middle];

      if (currentElem === value) {
          return middle;
      } else if (currentElem < value) {
          left = middle + 1;
      } else if (currentElem > value) {
          right = middle - 1;
      }
  }
  return -1;
}

Big O of Binary Search

The worst case performance of Big O is O(log n) which is very fast. For perspective, most of JavaScript's built in searching methods, such as Array.prototype.includes(), have a time complexity of O(n) because they use linear search.

Binary search is significantly faster than linear search for arrays that aren't considered small. If the array is small, it might not perform faster than linear search. The only downside with binary search that I see is that the data must be sorted.

Cheers

Thank you for reading. I hope I could teach you something new today and I hope everyone is having a fun and safe weekend!

Resources

Uploading Profile Pictures in a React and Rails API App Part II

Rachel Williams — Sun, 12 Apr 2020 22:36:20 +0000

Intro

This is the second part in my series on uploading images in a React application. If you haven't read the first part, here it is. This blog will pick up where the last one left off.

Setting Up Rails to Receive the Image

Obviously, the first thing I did was set up my route to send my POST request to. I decided have this route go to my users controller, since a picture is associated with a user. I went with '/users/:id/upload_photo' where id is the user's id.

Next up was creating the controller action. This blog largely follows the work of this blog. It's a really great resource if you would like to set this functionality up yourself. Here is the code for my uploadPhoto action:

def uploadPhoto
  //grabbing user from the db using the id from the query string parameters
  //i used strong params
  @user = User.find(profile_picture_params[:id])

  @user.profile_picture.attach(profile_picture_params[:profile_picture])

  if @user.profile_picture.attached?
    profile_picture_serializer = ProfilePictureSerializer.new(profile_picture: @user.profile_picture, user: @user)
    render json: profile_picture_serializer.serialize_new_profile_picture()
  else
    render json: {errors: "No profile picture attached"}, status: 400
  end
end

So above, I am grabbing the current user based on the id from the query string parameter. I used a strong params function, hence the profile_picture_params method.

ActiveStorage

In order to attach the image file to my user, I used ActiveStorage. From the Rails guide:

"Active Storage facilitates uploading files to a cloud storage service like Amazon S3, Google Cloud Storage, or Microsoft Azure Storage and attaching those files to Active Record objects. It comes with a local disk-based service for development and testing and supports mirroring files to subordinate services for backups and migrations."

ActiveStorage is already integrated into Rails, however to use it you need to create some migrations to make two tables in your database, active_storage_blobs and active_storage_attachments. You might recognize that word blob from part one of this blog series. To set up ActiveStorage I recommend following the blog I linked earlier or the ActiveStorage Rails guide linked above. You basically just run an install command and then run migrate to make the new tables.

Back to the Code

The profile_picture attribute on my user comes from this ActiveStorage macro, has_one_attached :profile_picture. From the Rails guides, this macro, "sets up a one-to-one mapping between records and files. Each record can have one file attached to it." Essentially, each of my users will have one image file attached to their record. Next up, I used the attach method from ActiveStorage to attach the image to the user's record.

ActiveStorage has a method attached? that checks if the user has a profile_picture attached to the record. If this is the case, the profile picture data and will be serialized and rendered as JSON. Here is the code for my Profile Picture Serializer:

class ProfilePictureSerializer

  def initialize(profile_picture: nil, user:)
    @profile_picture = profile_picture
    @user = user
  end

  def serialize_new_profile_picture()
    serialized_new_profile_picture = serialize_profile_picture(@profile_picture, @user)
    serialized_new_profile_picture.to_json()
  end

  private

  def serialize_profile_picture(profile_picture, user)
    {
      profile_picture: {
        user_id: user.id,
        image_url: user.get_profile_picture_url(),
        created_at: profile_picture.created_at
      }
    }
  end

end

Once again, this largely follows the setup from this blog. I wanted the JSON for the profile picture to contain the user id, image url, and date the record was created. The get_profile_picture_url() method comes from my user model. This method uses Rails' url_for() method to get the url for the profile_picture attached to the record. url_for() is a helper method and you will need to add include Rails.application.routes.url_helpers to the beginning of your model code in order to use it.

Configuring Cloudinary

To set up Cloudinary the first thing you will need to do is create a free account. This part is pretty straightforward so I won't go over it, but once that is complete you will need your key and secret which you can find on your dashboard when you are logged into your account.

Next up add the cloudinary gem to your Gemfile and run bundle install. Then add this to your storage.yml file in your config folder:

cloudinary:
  service: Cloudinary

Next step is to set config.active_storage.service = :cloudinary in your config/environments/development.rb and production.rb files. This tells active_storage to use Cloudinary to store the files. Then download the YML file from your Cloudinary account. You will find the link for this in the top right of your account details on your dashboard. Put this file in your config folder and be sure to add this file to your .gitignore because you don't want to push these credentials to Github.

As the blog mentions, "With this in place, ActiveStorage will automatically upload and retrieve images from the cloud."

A Minor Bug

As the blog I followed mentioned, I did receive this error the first time I tried to successfully post an image to my Rails API: ArgumentError (Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true). I followed what the blog said and added Rails.application.routes.default_url_options = { host: "http://localhost:3001" } to my config/environments/development.rb folder. I have 3001 as my port instead of 3000 which is the default Rails port.

Success

After adding the default url options, the JSON was fetched successfully! When I checked my Cloudinary account, I could see in my assets that my image was uploaded successfully. Also yes, this is a picture of my dog:

I won't go over the details of how I rendered the image in my React app in this blog, but here is the final product. It needs some styling, but I was excited to have it show up!

Another cool thing to note, is that if I change the profile picture, the old one will be automatically deleted from Cloudinary and replaced with the new one. I'm assuming this comes from the fact that I used the has_one_attached macro, so only one file can be associated with the record at a time.

Thank you for reading and let me know if you have any feedback or questions. Here is the repo for my Rails API if you would like to look at any of the code further.

Uploading Profile Pictures in a React and Rails API Application Part I

Rachel Williams — Sun, 05 Apr 2020 22:12:26 +0000

The Problem

This week I wanted to add a feature to my Concert Buddy application where users could add an image to their profile. It turns out that this is not as easy as I originally thought. I had to decide whether to store the images in my database or on a cloud service.

Storing in the Database

After some research, I found that there is a way to store images in a database and that is by using BLOBS. BLOBS are Binary Large Objects meaning the image is stored as, "a collection of binary data stored as a single entity." However, it seems like the general consensus among developers is to not store image data in your database because it takes up a large amount of storage. From this Stack Overflow post:

"database storage is usually more expensive than file system storage" and "things like web servers, etc, need no special coding or processing to access images in the file system"

Also, I used PostgreSQL for the database in my application which uses bytea instead of the BLOB type. Uploading images to a cloud service seemed like a better plan for my profile picture images. This way, my database wouldn't get too large and I could also learn how to work with a cloud service.

The Implementation

I ended up finding this amazing blog that walks through how to send images from a JavaScript front end to a Rails API backend. It was exactly what I needed! I will walk through the basic implementation here and talk about the hiccups I had, but the blog already has great information on how to do it yourself.

The First Step

The first step to starting this feature was to add an input for a user to select a file from their computer. I added a form to my Profile component with one input for the image, as well as a submit button:

<form className={props.formStatus === "Active" ? "" : "hidden"} onSubmit={submitPhoto}>
  <input type="file"
    id="profile-photo-input" name="profile_picture"
    accept="image/png, image/jpeg"
  />
  <input
    className="submit-input"
    type="submit"
    value="Upload"
  />
</form>

By using the file type input, a user can select a file from their computer to upload. File type inputs allow an accept attribute to specify which types of files are allowed. You can also choose to use the multiple attribute which allows users to upload multiple files at once. In my case, I only want users to upload one image so I left the multiple attribute out and specified image/png and image/jpeg with the accept attribute to allow those file types.

Sending the Photo

The next step in the process was sending the photo via a fetch request to my Rails API.

From the code snippet above, you can see that my form has an onSubmit event attribute. This will call the submitPhoto function in my component when the form is submitted. Here is my code for that function:

const submitPhoto = (event) => {
    event.preventDefault();
    let photoInput = document.getElementById('profile-photo-input');
    if (photoInput.files[0]) {
      const formData = new FormData();
      const upload_file = photoInput.files[0]
      formData.append('profile_picture', upload_file);
      props.submitProfilePhoto(formData, props.userId)
    }
  }

The main thing to focus on here is setting up the FormData object. I had never used this before, however it was used in the main blog that I followed. This object allows you to set key/value pairs for all of the data you are submitting in your form and your subsequent fetch request. In this case, I chose to name my key 'profile_picture' and the value is the uploaded image. I grabbed the image by grabbing the file input from the DOM and then used the file input's files method to get the FileList. If the image was successfully selected, there should be a file in the first index of FileList.

Next up was to make the action creator function to perform the fetch request. I called this function submitProfilePhoto when I declared it in mapDispatchToProps. The actual function is called uploadProfilePicture and that is what was imported into the file with my component. Here is the code for that:

const mapDispatchToProps = dispatch => {
  return {
    toggleForm: () => dispatch(setFormStateToActive()),
    submitProfilePhoto: (formData, userId) => dispatch(uploadProfilePicture(formData, userId))
  }
}

Above you can see I passed the formData and userId to the dispatch method wrapping the uploadProfilePicture function. In case you aren't familiar with dispatch, it is a store method in the Redux library that allows you to send actions to your store and trigger state changes. Using it along with Thunk middleware is very useful for asynchronous requests because the action creators can then return functions that can have side effects, such as asynchronous requests. Then after your request is complete, you can trigger a state change. As a side note, this code could definitely use some refactoring in the future.

Here is my Thunk action creator function:

export const uploadProfilePicture = (formData, userId) => {
  return dispatch => {
    const configurationObject = {
      credentials: "include",
      method: "POST",
      body: formData
    }

    return fetch(`${baseUrl}/api/v1/users/${userId}/upload_photo`, configurationObject)
      .then(r => r.json())
      .then(photo => {
        if (photo.error) {
          alert(photo.error)
        } else {
          // this is where I will dispatch an action creator function to update my store
          console.log("success", photo)
        }
      })
      .catch(error => console.log(error))
  }
}

Above you can see I set up the configurationObject, setting the body to the formData object I created earlier. This is the code I had success with after some trial and error.

A Bug

At first I had specified a Content-Type in my configurationObject and was getting a bad request response (status 400) when sending my FormData to Rails.

After some searching I found this:

"Setting the Content-Type header manually means it's missing the boundary parameter. Remove that header and allow fetch to generate the full content type. It will look something like this:

Content-Type: multipart/form-data;boundary=----WebKitFormBoundaryyrV7KO0BoCBuDbTL

Fetch knows which content type header to create based on the FormData object passed in as the request body content."

Also, if I would have looked more closely in the blog I was following, I would have noticed that it talks about this in there as well.

"There is no "Content-Type" key in the headers — the content type is multipart/form-data, which is implied by the FormData object itself."

I removed the content-type from my request and it worked! Also, I should mention that I had already set up the route and controller action in my Rails API along with a byebug to test that the data hit the endpoint. I will go over this further in my next blog.

For the Next Blog

As this blog is already getting pretty long, I decided that I'm going to split it into multiple parts.

Next week I will talk about the Rails side of things and how I am hosting my images on a cloud service, Cloudinary.

Thank you for reading!

Additional Resources

400 Status Code

Main Blog I Followed

Another Blog I Referenced

File Input

Intro to TypeScript

Rachel Williams — Sun, 29 Mar 2020 19:44:49 +0000

Introduction to TypeScript

The Basics

TypeScript is a superset of JavaScript. This open-source language builds upon JavaScript and adds new features which are advantageous to developers. It was developed by Microsoft and first released to the public in 2012. TypeScript can't be executed by browsers or other JavaScript environments. Instead, TypeScript code must be compiled to regular JavaScript first, which some might say is a disadvantage. However, this compilation phase adds some advantages such as error checking.

Compiling

TypeScript technically is transpiled to JavaScript. Transpiling code means to change it from one language to another at the same level of abstraction. Where as compiling code is changing it from a higher-level language to a lower-level language. For example, the language Go is compiled to machine code. Transpiling TypeScript to JavaScript enables developers to use new features that compile to JS workarounds. For example, take a look at this TypeScript code and its corresponding transpiled JS code:

The code in this screenshot was taken from the TypeScript website's quick tutorial. You can see that the compiled JS code is much more lengthy and not as clear. An additional feature of TypeScript is that if any errors are present in the code, the errors will be displayed for the developer during compilation. For example, if a function is called with no parameters and is expecting a string as a parameter, an error will be thrown saying, error TS2554: Expected 1 arguments, but got 0.. TypeScript will also show the exact line of code and spot within the line where the error occurred:

greeter.ts:7:27 - error TS2554: Expected 1 arguments, but got 0.

7 document.body.innerHTML = greeter();
                            ~~~~~~~~~

  greeter.ts:1:18
    1 function greeter(person: string) {
                       ~~~~~~~~~~~~~~
    An argument for 'person' was not provided.


Found 1 error.

Typing

TypeScript allows developers to use static typing. It isn't required, but it allows developers to catch errors on compilation. For example, if you try to pass an array in as an argument to a function that is expecting a string, this error will be thrown: error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'. Here is an example of how typing is used in TypeScript:

let color: string = "blue";

Here are the types you can use:

boolean
number
string
number[] (This is for arrays. Replace number with data type in the array. Arrays can also be written like this Array<number> = [1, 2, 3])
Tuple: Allows you to declare an array with a fixed number of elements with specific types. Example: let a: [string, number];
enum Allows you to give a name to a set of constants. Example: enum Direction { Up: "UP", Down: "DOWN" }
any (When a data type is unknown, label them with any and values will pass through checks during compilation)
void (This describes the absence of type. You can only assign null or undefined to this type)
undefined
null
never (Used for values that never occur, for example functions that always throw an error)
object (Represents anything that is not the primitive data type)

Types are optional with TypeScript, and they can be inferred during compilation.

Installing TypeScript

If you would like to install TypeScript and try it out yourself, here is the command using npm: npm install -g typescript.

When you write your TypeScript code in a .ts file, run tsc {your-file-name_here}.ts in your command line to compile it to JavaScript. When it's done compiling, you will see a new .js file in your directory with the compiled JavaScript code.

Let me know if you have used TypeScript before and what you think about it. Thanks for reading and I hope you're all staying safe out there!

References

Overview of Breadth-First Search and it's Uses

Rachel Williams — Mon, 23 Mar 2020 00:49:28 +0000

Breadth-First Search

Introduction

On my path to improving my data structures and algorithms knowledge, I decided to blog about breadth-first search. This algorithm comes up a lot in interviews and it will be important to master.

Breath-first search is an algorithm for searching trees and graphs. Trees and graphs are two different types of data structures. From this article,

"Tree and graph come under the category of non-linear data structure where tree offers a very useful way of representing a relationship between the nodes in a hierarchical structure and graph follows a network model. Tree and graph are differentiated by the fact that a tree structure must be connected and can never have loops while in the graph there are no such restrictions."

The article also has this image that I think clarifies the difference between the two:

As you can see from the diagram above, a tree progresses out from the root node at the top and doesn't loop, where as the graph doesn't necessarily have a set structure and looks more like a web.

Breadth-First Search

Breadth-first search is used to search a tree or graph. The algorithm starts at the tree root or a selected node on the graph. All neighbors of the node at the current depth will be explored before moving onto the next level. For example using the diagram above, if we start at tree root A on level zero, next its children will be explored(B and C). Since all nodes have been explored on level one of the tree, the next level will be explored(D, E, F). Finally, the last level will be explored (G, H).

Implementation

Breadth-first search uses a queue to store visited nodes. A queue is a data structure where elements are removed first-in first-out(FIFO). For example, say we have this queue [], and we add D, E, and F [D, E, F] from the second level. Adding to the queue is known as enqueuing. D will be removed from the queue first since it was added first. This is also known as dequeuing.

Here is some pseudocode from Wikipedia:

NOTE: The words vertex and node are used interchangeably in my step by step walkthrough below.

1 procedure BFS(G, start_v) is
2      let Q be a queue
3      label start_v as discovered
4      Q.enqueue(start_v)
5      while Q is not empty do
6          v := Q.dequeue()
7          if v is the goal then
8              return v
9          for all edges from v to w in G.adjacentEdges(v) do
10             if w is not labeled as discovered then
11                 label w as discovered
12                 w.parent := v
13                 Q.enqueue(w)

The function takes in a graph(G) and a starting vertex or root node(start_v).

First an empty queue is initialized queue = []
The starting node is labeled as discovered since it has already been visited
The starting node is added to the queue queue = [A]
Next we enter a while loop that exits once the queue is empty
In this loop, we dequeue and assign that node to a variable v v = A. Now our queue is empty queue = [].
Next we check if v (node A) is our goal and if it is, return the node.
If it isn't the goal we enter another loop that occurs once for each adjacent edge of the node. An edge is a connection between two nodes. Think of it as the line between one node and the next. In this case, our adjacent edges connect to nodes G.adjacentEdges(v) = [B, C].
Within the loop, each adjacent node is assigned to a variable w. w = B. We check if the node has already been discovered and if it hasn't, we label it as discovered, we set its parent as node v w.parent = A, and we enqueue w queue = [B].
This will be done with all adjacent vertices. In this case, C is the only adjacent node left.
After the loop exits, we will be back at line 6 where we dequeue the next vertex (B) and continue with the cycle until the goal node is found.

Note from the article:

"Nodes can be labelled as discovered by storing them in a set, or by an attribute on each node, depending on the implementation."

Time and Space Complexity

Time Complexity

The time complexity of breadth-first search in a graph is O(|V| + |E|), where V is the total number of nodes and E is the total number of edges of the graph since each node should not be visited more than once. For a tree, the time complexity is O(|V|) where V is the number of nodes.

From this quora answer:

"The edge |E| term should not be forgotten because in some cases (like highly connected graphs) it can be much larger than the number of nodes. On a tree we can just ignore it."

Space Complexity

The space complexity of breadth-first search is O(|V|) since the worst case is holding all of the vertices in the queue at the same time.

Use Cases

Breadth-first search is useful if you want to find the shortest path between one vertex and another in an unweighted graph. An unweighted graph is a graph where the edges have weights attached to them.

From this blog:

"A weight is a numerical value attached to each individual edge. In a weighted graph relationships between nodes have a magnitude and this magnitude is important to the relationship we’re studying. In an unweighted graph the existence of a relationship is the subject of our interest."

BFS can also be used to check if there is a path between two vertices, find the length of the path, or find all of the nodes reachable from a given node.

In Summary

Breadth-first search is an algorithm that every programmer learns at some point in their journey. Let me know about your experiences using it. Thank you for reading and happy searching!

Intro to Hash Tables

Rachel Williams — Mon, 16 Mar 2020 04:06:23 +0000

Intro

A hash table is a data structure that contains key, value pairs. Hash tables use something called a hash function to store and retrieve the data. The hashing function will allow you to map the key to a hash code in order to retrieve the index for the data you are looking for. This is similar to the Dewey Decimal System in a library where books are looked up based on a decimal number. With this system, books are categorized by genre and assigned a number within a specific range.

Stored Data

Hash tables have a predetermined length, where each of the cells stores a key value pair. These cells are usually referred to as "buckets". Often the data is stored in an array with each bucket being an index in the array.

Hashing Functions

As I mentioned at the beginning of this blog, hash tables use a hashing function. This function tells us where to find an element in the array by inputting a key. Basically, the function will map a string to a number. Ideally, our hashing function will output unique index numbers for each key. Otherwise, the time complexity of retrieving an element will be closer to O(n) where n is the number of elements in the data set. When a hashing function returns the same outputted index for two or more different keys it is called a collision.

Collisions

Collisions happen when two keys get mapped to the same number or index. There are a few different ways to handle this scenario. One way is by storing the key value pairs that share the same index in a linked list. This is called separate chaining. Using this method, you will have to iterate through the pairs to find the item you are looking for. This could lead to inefficiency if there are a lot of collisions and bring the time complexity closer to O(n).

Here is an example with a collision. In this example the key is the name of the dog and the value is the dog's breed. We are hashing the dog's name to get the index we should store its data at. Cruiser and Ranger's names both hash to the index of 7, so they are stored in a linked list at index 7.

Another option to handle collisions is called open addressing, also known as closed hashing. With this method, the key is used to find the location in the array to look at first. If that spot is already full, a scheme will be used to probe the array for another location. This is done until an empty bucket is found to store the data. One scheme you can use is called linear probing where you look at the next spot in the array if the previous one is full. Here is a great Stack Overflow article on open addressing versus chaining.

Usually, open addressing is faster than separate chaining. However, if all of the buckets are close to being full, open addressing will be slow because it will take a lot of time to look through the buckets and find an open location.

Run Time

Hash tables perform fast retrieval, insertion, and deletion of data, however they are not very fast when the data needs to be searched / iterated over. For example, if you need to iterate over the data to find a maximum value, a hash table would not be the most efficient data structure.

Retrieval, insertion, and deletion from a hash table should have a time complexity of O(1), unless the hashing function isn't optimized and there are collisions. For example, if there are a lot of collisions and separate chaining is used, the lists will need to be iterated through in order to find the key value pair that you are looking for.

Closing Time

When is a time you have used hash tables in your applications? It would be great to hear some good use cases for this data structure.

References

Hash Table Video
Hash Table Collision Handling

Finding Max in a Stack

Rachel Williams — Mon, 09 Mar 2020 04:56:36 +0000

Stack Problem

I recently had a phone interview with a company and was asked a question about stacks that I didn't know how to properly solve. This prompted me to deepen my knowledge of stacks.

I was asked to think about how I would write a max function to find the maximum value in a stack.

Stack Refresher

A stack is a data structure where newer items are added on top and items are also removed from the top. This is called Last In First Out (LIFO). One way to represent a stack is an array. When thinking about the problem on the phone call, I pictured an array where items would be added onto the end and also taken off of the end.

Here is an example:

[2, 3, 3, 1, 1, 100, 200, 100, 400, 30]

30 would be the top of the stack and would also be the first number removed from the stack.

Back to the Problem

During the phone call, I could only come up with a few solutions, which I knew were not what the interviewer was looking for. My first obvious thought was to loop through the array, storing the current maximum number and return that number at the end. This was clearly not what the interviewer was looking for and asked me how I would solve this with a different data structure.

Next I tried to think of a way I could use an object, and linked lists came to mind. My idea was to store the current maximum value in a linked list with a pointer to the previous maximum number, in case the current maximum number was deleted. I didn't fully think through this idea, as I hadn't reviewed how to implement a linked list in a while and I had a hunch that this wasn't what the interviewer was looking for.

We moved on from this question and I was determined to figure out the answer once I got off the phone.

After Some Googling

After some googling, I came across an implementation that seemed like what my interviewer was actually looking for.

With this implementation, you would have an additional stack to store your max values. You would read the top value from this extra stack to see what the current maximum value was.

For example, given this initial stack:

[3]

I would have a max value stack that looks like this:

[3]

Three is the only number in the stack so far, thus it is the maximum. Now if I push 5 onto the stack, my current max should be 5. So we will add that onto our max value stack.

//currentStack
[3, 5]
//maxNumStack
[3, 5]

Now say we add a number that is less than or equal to our current max onto the stack. Now, we would just add the current max again to our maxNumStack to align the lengths of the stacks.

//currentStack
[3, 5, 4]
//maxNumStack
[3, 5, 5]

This way, if 4 is popped off of the stack, we can pop one element off of our maxNumStack as well and still know what the currentMax is (in this case 5).

Implementing the Stack With a Max Method

This is how I might implement this with JavaScript. I roughly followed this blog to implement the basic features of a stack, such as the push and pop methods:

class Stack {
  constructor() {
    this.data = [];
    this.size = 0;
    this.maxValues = [];
  }

  push(element) {
    // if the stack is empty or the element we're pushing is greater than currentMax, add the new element to maxValues
    if (this.size === 0 || element >= this.findMax()) {
      this.maxValues.push(element)
    }
    // otherwise, push the currentMax to maxValues again, to align lengths of arrays and keep currentMax
    else {
      this.maxValues.push(this.findMax())
    }
    // increase the size variable by 1 to keep track of length, and add element to stack
    this.size += 1
    this.data.push(element);
    return this.data
  }

  pop() {
    // if the stack isn't empty, decrease the size count and remove element from the end of the stack and maxValue array to keep lengths aligned
    if (this.size > 0) {
      this.size -= 1;
      this.maxValues.pop()
      return this.data.pop()
    }
  }

  // this returns the top element in the stack (last element in the array)
  peek() {
    return this.data[this.size - 1]
  }

  // this returns the maxValue currently in the stack, by grabbing the last element of the maxValue stack
  findMax() {
    return this.maxValues[this.size - 1]
  }
}

Here is some code I wrote to test that it worked along with the outputs in my terminal:

let stack = new Stack()

stack.push(5)
stack.push(5)
stack.push(7)
stack.push(3)
stack.push(4)

console.log(stack)
// Stack {data: [ 5, 5, 7, 3, 4 ], size: 5, maxValues: [ 5, 5, 7, 7, 7 ]}
console.log("max", stack.findMax())
// max 7

stack.pop()
console.log(stack)
// Stack { data: [ 5, 5, 7, 3 ], size: 4, maxValues: [ 5, 5, 7, 7 ] }
console.log("max", stack.findMax())
// max 7

stack.pop()
console.log(stack)
// Stack { data: [ 5, 5, 7 ], size: 3, maxValues: [ 5, 5, 7 ] }
console.log("max", stack.findMax())
// max 7

stack.pop()
console.log(stack)
// Stack { data: [ 5, 5 ], size: 2, maxValues: [ 5, 5 ] }
console.log("max", stack.findMax())
// max 5

With this implementation, theoretically all you would be doing to find the max is a quick lookup operation to find the last element in the maxValues array. Looking up an element in an array by index has a time complexity of O(1). Also, the push() and pop() operations to add and remove values from the maxValues stack have a time complexity of O(1). This is significantly more efficient than looping through the array to find the current maximum every time, which would be O(n), where n is the length of the array.

As a side note, there are other ways to implement the push and pop methods, however that wasn't the focus of this blog so I chose to use the built in array methods.

Wrapping It Up

When is a time you have used a stack in your code? Let me know what you think of this solution and if you think it can be improved. Thank you for reading!