Forem: jakedapper

Setlistopedia

jakedapper — Fri, 07 Jun 2024 01:06:15 +0000

Not the best name but a fun project nevertheless.

A few months ago I interviewed for a job where I was assessed on my knowledge of Node.js. At the time, it was very close to nothing. To prevent this from happening again, I decided to learn it. Around the same time I started listening to the Grateful Dead a lot. While listening to the Grateful Dead, I noticed some patterns in their setlists. I enjoyed hearing how one song would flow into the next across many different shows. Curious if there were more of these patterns in their setlist sequencing, and wanting to learn Node.js, I decided to build a web application which analyzed a band’s setlists. I utilized React, Typescript, Node.js, and Prisma as an ORM for a PostgreSQL database. Computations performed on an artist’s data included the top five songs they ever played, what year they played a particular song the most, and which song is most likely to be played before or after.

While certain parts were easy to ascertain a path to implementation, certain parts were frustratingly difficult. But only some. For instance, I wrote an iterative function which creates a frequency counter for each unique song in a collection of an artist’s setlists. This was easy. But getting comfortable with typescript and the plethora of syntax that follows? That was particularly difficult.

I eventually came around to enjoy the benefits of typescript - I found I could code more efficiently, interacting with pre-defined data structures safely and efficiently. Since my application’s main utility is analyzing data structures, the benefits shone through quickly, however frustrating typescript/eslint’s incessant complaints were. As with most things, it just took some practice.

In order to create statistics on a band’s live performances I needed data to analyze. I knew there was a thorough data source of setlists on a website called SetlistFm. Luckily, they have an API available. I designed the app to allow users to search for an artist they were interested in. When a user searches for an artist, a check on whether said artist is in the database occurs. If the artist was not in the database a series of requests would be sent to SetlistFm.com until all pages of data were ingested and added to the database. The idea was that over time, with more user activity, the database would become more comprehensive and the reliance upon SetlistFm’s API would decrease.

This would have been fine, however, there is a rate limit for requests made to their API. I realized this would cause a decent amount of trouble for my application. It would only take a small number of users to make simultaneous requests to cause 429 response errors to be sent. Initially, after some Google searches and StackOverflow exploration, I thought implementing a retry function with exponential backoff might save a user from these errors. But with the possibility of more and more users making requests, this would still not suffice. I thought about it like water flowing through a pipe with holes in the top of it - at a slow flow rate, all of the water would pass through fine and make it to its destination, but with too much water flowing through the pipe, you’re going to have a mess. As an alternative, I decided to seed my database with a lot of artists’ data using SetlistFm’s API. This would significantly uncouple any reliance upon SetlistFm’s API.

I learned a lot but below I’ve listed some of the things I found to be most interesting.

I learned about utilizing local storage to persist state on a refresh.
I learned about organizing code more efficiently and how to better follow DRY principles. For example, writing basic helper functions and services.
I learned about Domain Driven Design and the importance of naming variables.
I learned how to troubleshoot, debug, and measure efficiency better through a myriad of console.logs and even inspecting memory usage in devTools.
I learned about database architecture and how to be strategic in creating only the tables you need with only the fields you need - the same goes for querying said database.
I learned about creating dynamic URLs which send pertinent information from the client to the server.

Asynchronous Behavior Got You Down?

jakedapper — Fri, 28 Oct 2022 23:01:03 +0000

This a specific sort of problem with a specific sort of solution. So far, so vague.

In Javascript/React we often run into asynchronous behavior - that is, certain parts of our code run before others. This could be due to a number of reasons, such as a lag in the code running and state being set and the nature of fetch requests/promises.

There's ways we can handle this.

One way is to use the useEffect hook. Whatever code is contained within the useEffect hook will run upon page render AND when a change is made to whatever is in the dependency array.

This can be utilized very powerfully. The primary instance I have run into is when some user action happens and triggers a POST or PATCH request, the data displayed on the frontend may need to be updated. If we put the state, where we stored our data, in the dependency array, it will get triggered and run again, thus populating our frontend with new, updated data.

But sometimes, even still, there is a lag in the setting of our state(s) (which is storing some of our data and being used to display it on the frontend) on being set and the code running. This can be bad. For example, if we want to map over our state, which should be an array of data, but it's not yet set to said array, the app is going to stop working. It will error out and say, something like, "restaurants.map is Undefined." which, in English, means, "We can't map over that! It's not an array!" And it's not, at least not for another second or two.

Even with useEffect, this async behavior can be a bummer.
While it wasn't the "most correct" or "efficient" move, I even have used setTimeOut() to account for the latency of state being set.

Here, I'm using the .find() method, which does the same sort of thing as .map(), iterates through an array, and would return the same aforementioned error if its object is, indeed, not an array. The setTimout() is an asynchronous function, so it's kind of like fighting fire with fire. Its first argument is the code you want to run and its second argument is the number of milliseconds you want it to wait to execute upon page render.

The other example I would like to share is one which uses a styled component from MaterialUi's library, CircularProgress. MaterialUi Docs are mostly great and provide a clear walkthrough if you are interested in implementing some built-in styles to you React project. CircularProgress is a loading circle, more or less.

In my example, "user" is a state that we need for the rest of the code to run, but if we don't have a user yet, due to whatever reason, another error or simply asynchronous behavior, hopefully the latter, because if it is, this might help.

Here, we are using conditional logic. If we don't yet have a truthy-valued "user" state, we will get a loading icon returned. Then, when there is a user, the rest of the code will run!

State can be tricky and you may still run into issues.

Another, but more complex, tool to use is a newer part of React, async/await. This involves creating an "async function" rather than a regular ole "function". I'm not going to go into it because that's a blog post all on it's own.

Cookies vs. Sessions

jakedapper — Wed, 12 Oct 2022 01:43:34 +0000

I write this blog as I enter the final phase of my software engineering program through Flatiron School. The latest tool added to our arsenal basically allows users the ability to log-in and out, amongst some other things. What are these tools? Cookies and Sessions.

You may have questions like I did. I had heard of cookies, but was largely unfamiliar with sessions.

What’s the difference? How are they even really used?

Cookies can get a bad rap. Understandably so, as they are pieces of information sent along with requests to the server. Some of this information storage is used in pretty helpful ways, like what’s in your shopping cart , user preferences, and track items previously viewed (on webstores, etc).

Cookies are stored locally, in the browser, and on the server, whereas sessions are only stored on the browser.

Sessions are cookies who don’t want to be seen in their pure, true form. They like disguises. At least when we use Rails to disguise them. This allows them to not be tampered with.

Sessions are deleted when the session ends, aka the browser/tab is closed, whereas cookies persist - they have been stored on the local storage of your computer.

Occasionally, sites will use third-party cookies. These are data collectors sending information to other domains, aka different from the website the user is currently using. This is usually simple advertisement-oriented data collection of user behavior, i.e. which ads they clicked on, what items they favorited, etc.

We learned how to implement cookies/sessions in simple web-apps built on Ruby/Rails and React. The basic configuration involves adding some code to the application’s config file.

Next we add this code to our ApplicationController.

From here, we are essentially utilizing a SessionsController to implement Create and Destroy actions for users - that is, upon “logging in”, aka filling out a form which, when submitted, sends a POST request to our server’s sessions endpoint, will create a session (if authenticated, but we’ll circle back to that in a moment). With a session successfully created, the user is basically logged in. The same CRUD request logic follows for logging out - that is, the user clicking the “Log Out” button sends a DELETE request to the server’s sessions endpoint.

Create Action on the sessions’ server that happens upon the POST request.

Destroy Action on the sessions’ server that happens upon the Delete request.

There’s some extra code in the create action which helps set up the ability to authenticate the user exists and they used proper log-in credentials. It checks to see if the employee exists and if their password attribute matches the one entered in the form/sent with the POST request. If it does, a session associated with that user (employee) is created.

However, it’s important to note, at the top of the SessionsController, be sure to include this line of code as well:

Additionally, include the following in the ApplicationController.

This allows the server to check if there is a user(employee).

This process is crucial to maintain client-specific state across requests - aka everytime the webpage refreshes certain states, where user preferences, user-specific accessible data lives/is set (temporarily), resets to default. It’s like you never logged in at all.

This can be avoided by including a show route in the user (employee) controller.

And this in routes:

And then this allows the frontend to know what the backend already knows. This GET request is resetting the current user state, that is, who is logged in and in store of the sessions (cookie) model.

Using State and useEffect To Dynamically Render Data

jakedapper — Fri, 16 Sep 2022 16:34:35 +0000

I am finishing the 9th week (out of 15) of the Flatiron School Software Engineering program. As our introduction to Ruby comes to a close, a classmate and I built a simple web app which allowed users to access a database of concerts or eateries based off which city they may be visiting. To do this we built a database with associations using Ruby, Active Record, and Sinatra and built a frontend UI using Javascript and React.

One of my favorite aspects of our project is how we chose to render our data. We wanted to dynamically display data from two different tables/models. Needing a way for users to differentiate which data they would see, we created nav-bar and two buttons.

Clicking on a nav-bar link or button sets a state (attractionType) to a particular value. This value would represent a corresponding endpoint to the desired data.

The nav-bar links were given values which correspond to the desired data's respective endpoint.

This was made possible by how we set up the controllers in our backend in Ruby/Active Record/Sinatra. Below are a couple GET requests with endpoints, 'concerts' or 'eateries'.

The interpolated variable, the state known as "attractionType", is a dynamic endpoint. It changes based off user action. Thus, we can access different data as this variable's value changes.

Using useEffect effectively is another crucial step in this process. It allows the web app to operate dynamically and accurately. Anytime the second argument of useEffect changes, the useEffect runs. Passing this "slice of state"(attractionType) as the second argument of our useEffect asks the body of the useEffect to rerun whenever the second argument/state changes. When the state changes, a new GET/fetch request is sent and different display data is set.

Conditional rendering is powerful. In our web app a state (attractionType) not only functionally determines which set of data is rendered, but also which corresponding component is rendered.

We even utilized it for other front-end purposes, such as which Header would be displayed.

Conditional rendering is common because it's useful and dynamic. There are many circumstances where we will need to render/access different data based on user actions, including, but not limited to, clicking a link. Utilizing state is a simple and singular solution to create dynamic endpoints. From these endpoints we can perform a myriad of CRUD actions. Simultaneously, using the same "slice of state", we are able to conditionally render the data and elements/components to the front-end.

How Many Fonts You Got?

jakedapper — Fri, 26 Aug 2022 16:40:00 +0000

We deal with limitations everyday. Everything from our computers to our cars have them, even ourselves. The goal is to accept them, ask for help when we need it, and adapt. While discovering yet another lovely limitation of the beloved language, 'CSS', I had to adapt - that is, learn.

As a student in Flatiron School's Software Engineering program I'm learning a lot in a short span of time. We are finishing up our second phase which was centered around React, a JavaScript library used to help build user interfaces. As we close this chapter in our journey, we are building our own web applications. After building out basic functionality we approached a point where it was necessary to start making things look nice - aka start coding (one of) the dreaded headache(s) of web development, CSS.

CSS deserves more how-to's than I can count. This one will focus on something I am a little bit of a nerd about - the importance of fonts (and how CSS lacks in this department)! CSS has a number of preloaded fonts to use on your web app, but it doesn't have ones that are particularly fun, or kitschy, like a western-themed font. Our project/web app very much has a Mortal Kombat-esque theme, thus, an appropriately themed font was crucial.

Just like everything else fonts have their own file type. In fact, this can be a few different file types. Some are for certain web-browsers, some just for desktop use. A lot of times you'll see 'TTF' types, especially on your local system. But, please note, a lot of web-browsers use 'WOFF' or 'WOFF2.' Thus, if we download a TTF, we probably need to change it to a 'WOFF/WOFF2' in order to utilize for our web-app.

Luckily, people have been here before, needing a specific font that CSS does not have built in. So here's what you need to do to add your font:

1) Identify which font you want to use and download it to your computer.

2) If the font file ends in TTF, we need to convert it to a file-type recognized by most web-browsers, like 'WOFF'. (FontSquirrel will do this as seen below)

3)When you have your correctly formatted font file, navigate to your code's css stylesheet.

4) Make sure the css stylesheet has been linked to your application. We have a couple options. Our font can be stored and accessed locally or sent to whichever server we are using to host our application. I set mine locally by creating a folder in my './src' folder, where all of my code and css stylesheet live.

Location of Fonts

5) Next we need to add some instructions to our css stylesheet. We will use this generic format:

Stylesheet Template

please note: name the font you are adding where this template says, "FontName", but make sure it's lowercase.

Here's an example of my code with the Mortal Kombat font:

6) Use the font the same way you would any other with the name you assigned.

This process is simple and adds a lot of flavor to your web apps.

Toggle Button

jakedapper — Fri, 05 Aug 2022 18:42:25 +0000

The process of learning javascript contains multitudes. There are peaks and there are valleys. It starts out simple. Then a wrench gets thrown into things and you start asking yourself the same questions again and again, "Wait what goes where?", "And that thing does what?", "How do I make it do this? Or that?" You learn how to ask better questions, too, largely due to necessity. All in all, there are concepts you just have to struggle with in order to fully grasp them. When you do, it's right as rain, easy as pie.

Creating a "toggle button" is one of these frustrating tasks.
I'm defining a "toggle button" here as an HTML element with an event listener attached to it, which, when clicked, can change an element AND change it back. For example, imagine Instagram. Now imagine there's a cool post you like. So you double tap the post and BOOM - it's been liked by you. The heart icon fills with color and the number of likes increases. If you double tap again, the same user action, the opposite event occurs, reverting the heart back to empty, and decreases the likes count to what it previously was.

The first thing we need to do is identify what we want the "target" of our event to be - if you wanted something to happen when a user clicked a button, the button would be this "target". In my first example, the target element has been named "shinyBtn". When clicked, the display image of a Pokemon changes. When clicked again, it changes back. It toggles. But, how?

In the code below, I've created variables, assigned their values to locations on the DOM/HTML. This will allow me to set values on these elements' properties in the next step, i.e. "textContent" for a header/title element or the "src" for an image element.

Next, I constructed a function which accesses an API database of Pokemon, performs a GET request, and sets particular pieces of that data on particular DOM/HTML elements, ultimately creating a display Pokemon with an image, name, height, weight, and type.

Now that we have a display Pokemon, I will add some functionality to the "shinyBtn" using an event listener. Event listeners take two parameters, an event type (in this case, "click") and a function to be invoked when this event occurs. The function argument here will change the display "default" image to a "shiny" image.

This is cool. This works. But not as a "toggle". It only works once (per object/pokemon) and in one direction - reassigning the display image source from the "default" image to the "shiny" image. If I click the "shinyBtn" again, it doesn't change back. How do I get it to change back? Can I add another event listener to the "shinyBtn" and have this function perform the reverse and reassign the "shiny" image to the "default"?

It doesn't work. This is due to javascript running top-down, left to right. The first event listener takes precedence over the second. This button already does a job every time it's clicked. We need this function's behavior to be conditional. If the image is the "default", it should change to the "shiny" image upon the click event and vice versa. This is simple and can look like this:

The same logic was used in the same web app to change the image of the Pokemon listed on the left side of the screen. With a "mouseover" event added to each image, whenever the mouse moves over the image, an event will occur. The function argument in the event listener will change the target image source to the "back" image if it's currently the "front" image, and vice versa.

While this last example isn't a "button", it is still toggle behavior.