DEV Community: Atomik Jaye

Adding table associations with Sinatra and ActiveRecord's application_controller.rb

Atomik Jaye — Sun, 14 Aug 2022 05:25:58 +0000

Hi again! Today's blog post will be about adding table associations to your API endpoints!

I was working on my project, a sewing pattern database, and I ran into a problem. More like a coding organization issue. I had my models separated as such:

Companies (pattern makers),
Patterns (individual patterns and info),
Categories(various categories each pattern could fall under),
Fabrics(the type of fabrics listed on each pattern).

I had to have a fetch call for each table and it works, but I wasn't sure how to connect some tables to others. For example I asked myself "How do I access the fabrics from the pattern/fabric join table I made when I am only making a call to the patterns table?"

Well that's where this blog comes in!

My controller at the time looked something similar to this:

get "/patterns" do
    patterns = Pattern.all
    patterns.to_json
  end

  get "/categories" do
    categories = Category.all
    categories.to_json
  end

  get "/fabrics" do
    fabrics = Fabric.all
    fabrics.to_json
  end

 get "/patterns/:id" do
    pattern = Pattern.find(params[:id])
    pattern.to_json
  end

These paths are still valid because I call them to display categories and fabrics. The only path that was giving me issues was /patterns/:id. The way my project is structured, patterns belongs_to one company and has_many categories and fabrics through their respective join tables.. in this case :pattern_categories and :pattern_fabrics. However, as you see below. I am only accessing the pattern's first level of information, and not any of my patterns associations. This gave me issues when I tried to get JSON for a single pattern.

My JSON looked like this (when accessing the /patterns/:id path)

{
id: 13,
company_id: 1,
pattern_code: "M8314",
notions: "7in zipper",
size: "XL",
yardage: 4,
extras: "Caftan-style romper and jumpsuits with sash have front opening with hook and eyes. Views B and C have opening for sash to pull through. View C has arm opening at shoulder line for a cowl drapey look and has elasticized hems.",
created_at: "2022-08-13T01:55:32.415Z",
updated_at: "2022-08-13T01:55:32.415Z",
image: "https://via.placeholder.com/150x200?text=Sewing+Pattern"
}

As you can see, I am missing my associations. I kept thinking "Do I need to make more fetch calls? Would I need to use a for loop to join the pattern id with the category/fabric join table and somehow search through the fabric table" I was confusing myself.

HOURS LATER

I finally asked my fellow classmates for help. Initially my friend asked why I was doing so many fetch calls? I yeeted the question.. Whatchu talkin' bout Willis?... it works that's why!
But then he began to explain his process and taught me about this wonderful thing called include. How'd I missed this 7 letter word that makes my life 1000x easier?

So off to searching I went. In order to include my associations, I needed to reform my api endpoint like this:

  get "/patterns/:id" do
    pattern = Pattern.find(params[:id])
    pattern.to_json(include: [:categories, :fabrics])
  end

I needed to 'include' my tables that are listed in my pattern.rb model. Annnd Just like ✨ magic ✨, my fetch now included all I needed for an individual pattern without all the extra code! This is how my JSON looks now:

{
id: 13,
company_id: 1,
pattern_code: "M8314",
notions: "7in zipper",
size: "XL",
yardage: 4,
extras: "Caftan-style romper and jumpsuits with sash have front opening with hook and eyes. Views B and C have opening for sash to pull through. View C has arm opening at shoulder line for a cowl drapey look and has elasticized hems.",
created_at: "2022-08-13T01:55:32.415Z",
updated_at: "2022-08-13T01:55:32.415Z",
image: "https://via.placeholder.com/150x200?text=Sewing+Pattern",
categories: [
{
id: 3,
name: "Skirts, Pants, & Jumpsuits",
created_at: "2022-08-12T03:49:55.817Z",
updated_at: "2022-08-12T03:49:55.817Z"
},
{
id: 2,
name: "Tops & Vests",
created_at: "2022-08-12T03:49:55.798Z",
updated_at: "2022-08-12T03:49:55.798Z"
}
],
fabrics: [
{
id: 5,
name: "Cotton Blends",
created_at: "2022-08-12T03:49:56.093Z",
updated_at: "2022-08-12T03:49:56.093Z"
},
{
id: 4,
name: "Cotton",
created_at: "2022-08-12T03:49:56.077Z",
updated_at: "2022-08-12T03:49:56.077Z"
}
]
}

I hope this helps you! 😉

Expense Tracker (To-Dos)

Atomik Jaye — Tue, 05 Jul 2022 02:35:41 +0000

This blog post mainly serves as a to-do list of items I would like to include in my project.

As it stands, this expense tracker is an app that allows you to fill out a form of your transactions, and add that transaction to a list. It adds or substracts the amount depending if it's in an income or expense class! You can currently click buttons and sort through the expenses or income classes.

Some items I would like to add to this project are:

Edit Function
Delete Function
Sort Function (by date, company, etc)
I would like to include images as well (images of receipts and even purchases)
Login/logout functionality

I will keep this post updated!

Using Form Elements and Semantic UI React: Extracting values

Atomik Jaye — Tue, 05 Jul 2022 02:28:38 +0000

Hi there!
I was in the middle of my React project from one of my courses. In it, I had to build a form and I decided to use Semantic UI React for my project.

It took me quite a few tries to figure out how to extract the information from the values in my form. Some of the form inputs, specifically, using radio buttons and dropdowns were nested using Semantic UI. Having these nested elements, traditional ways of extracting information like e.target.value or e.target.checked did not work. Here is what console.log(e.target) looks like:

You can see it logs the label and not the radio button where we could extract the value.

Luckily, I found an article by Lauren Gifford that explained that Semantic UI React actually passes a data object along with the event object... And so, the heavens opened up!

In order to extract information from Semantic UI React radio buttons or dropdowns, you can include the data parameter to your function. This is what it looks like when I console.log(data):

Here you can see all the keys that are passed, including value! We can now access the values of our dropdowns and radio buttons using data.value. Here is an example of a function using the event and data as parameters:

 function handleChange(e, data) {
    if (data.name === 'typeGroup') {
      setType(data.value)
    } else if (data.name === 'accountGroup') {
      setAccount(data.value)
    } else if (e.target.name === 'notes') {
      setNotes(e.target.value)
    } else if (data.name === 'category') {
      setCategory(data.value)
    }
  }

I hope this helps! Happy coding!

Styling console.log() in the terminal

Atomik Jaye — Mon, 23 May 2022 00:58:06 +0000

As a ~~failed~~ graphic designer, the importance of readability has always been emphasized during my course. If your users can't read something clearly, that's a problem!

I was in the midst of an assignment where we had to make a console program mimicking a deli line. I noticed that I had a hard time keeping up with the many console.logs I had to do. So I wondered.. How can I make this more readable?

Upon searching I found a set of functions that allow you to change all sorts of things within your terminal’s console.log functions. These series of functions look something like this:

console.log("\x1b[93m\x1b[3m%s\x1b[0m", "Phrase") 
// displays "Phrase" in yellow and italic

I know, I know, this looks crazy! Let’s break it down.

We first need to use an escape sequence to tell our terminal “get ready to receive some info!” We do so by typing \x1b. This is called an ANSI escape sequence. \x1b is ANSI for your escape key. This is sort of equivalent to using the escape character “\” in JavaScript strings.

After we use our ANSI escape sequence, we then tell our console we are going to introduce a function. We do this with using the [ key. This is a Control Sequence Introducer(CSI)

After our CSI, we then list some parameters (in this case, numbers) that our function will take in. This is where we think about what we want our styling to be. These will be parameters to our function called m, which is the Select Graphic Rendition (SGR) function. Below is a list of parameters you can check out.

parameter	description
0	reset console styling
1	bold or increased intensity (depending on settings)
3	italic
4	underline
7	reverse colors
8	hidden
9	strike-through
30-37	Set font color from basic palette
38	Set font color from 256-color/24-bit palette: use `38:5:#` to pick from 256-color table or `38;2;r;g;b` to pick from 24-bit colors. (using RGB)
40-47	Set background color
48	Set background color from 256-color/24-bit palette: use `48:5:#` to pick from 256-color table or `48;2;r;g;b` to pick from 24-bit colors. (using RGB)
90-97	Set bright font color
100-107	Set bright background-color

To view the colors you can use, check out the color table at Wiki https://en.wikipedia.org/wiki/ANSI_escape_code#3-bit_and_4-bit .

We can chain multiple styles together by appending \x1b and another style code/function. For example I would use \x1b[96m\x1b[9m For a bright Cyan Strike-through console log.

After we finish our styling codes, we need to tell the terminal what we want to appear as our message. We can do this two ways. One way is by adding your text directly after the styling codes like this (we’ll discuss what the ending \x1b[0m means in a bit):

console.log("\x1b[48;5;49mMint Background\x1b[0m")

Or we can use the ‘placeholder’ %s and pass a second string argument in console.log, like this:

console.log("\x1b[48;5;49m%s\x1b[0m", "Mint Background")

Important note, once you are finished with your styling, your terminal does not know where to terminate them. So we must reset the style using \x1b[0m at the end of your string or placeholder to reset your console to its default settings.

And there you have it, fancy terminal console logs for your next project!

Below is a screenshot of what the different colors look like in my console in VSCode and Windows terminal.

Use the code below to see how these look like in your terminals, have fun!

console.log("\n\n")
console.log("***** BASE TERMINAL EXAMPLES *****\n")
console.log("- \\x1b[0m", "  | \x1b[0mReset\x1b[0m")
console.log("- \\x1b[1m", "  | \x1b[1mBold/Bright\x1b[0m")
console.log("- \\x1b[3m", "  | \x1b[3mItalic\x1b[0m")
console.log("- \\x1b[4m", "  | \x1b[4mUnderline\x1b[0m")
console.log("- \\x1b[7m", "  | \x1b[7mReverse\x1b[0m")
console.log("- \\x1b[8m", "  | \x1b[8mHidden\x1b[0m - hidden")
console.log("- \\x1b[9m", "  | \x1b[9mStrike-through\x1b[0m")

console.log("- \\x1b[30m", " | \x1b[30mBlack\x1b[0m")
console.log("- \\x1b[31m", " | \x1b[31mRed\x1b[0m")
console.log("- \\x1b[32m", " | \x1b[32mGreen\x1b[0m")
console.log("- \\x1b[33m", " | \x1b[33mYellow\x1b[0m")
console.log("- \\x1b[34m", " | \x1b[34mBlue\x1b[0m")
console.log("- \\x1b[35m", " | \x1b[35mMagenta\x1b[0m")
console.log("- \\x1b[36m", " | \x1b[36mCyan\x1b[0m")
console.log("- \\x1b[37m", " | \x1b[37mWhite\x1b[0m")

console.log("- \\x1b[40m", " | \x1b[40mBlack Background\x1b[0m")
console.log("- \\x1b[41m", " | \x1b[41mRed Background\x1b[0m")
console.log("- \\x1b[42m", " | \x1b[42mGreen Background\x1b[0m")
console.log("- \\x1b[43m", " | \x1b[43mYellow Background\x1b[0m")
console.log("- \\x1b[44m", " | \x1b[44mBlue Background\x1b[0m")
console.log("- \\x1b[45m", " | \x1b[45mMagenta Background\x1b[0m")
console.log("- \\x1b[46m", " | \x1b[46mCyan Background\x1b[0m")
console.log("- \\x1b[47m", " | \x1b[47mWhite Background\x1b[0m")

console.log("- \\x1b[90m", " | \x1b[90mBright Black\x1b[0m")
console.log("- \\x1b[91m", " | \x1b[91mBright Red\x1b[0m")
console.log("- \\x1b[92m", " | \x1b[92mBright Green\x1b[0m")
console.log("- \\x1b[93m", " | \x1b[93mBright Yellow\x1b[0m")
console.log("- \\x1b[94m", " | \x1b[94mBright Blue\x1b[0m")
console.log("- \\x1b[95m", " | \x1b[95mBright Magenta\x1b[0m")
console.log("- \\x1b[96m", " | \x1b[96mBright Cyan\x1b[0m")
console.log("- \\x1b[97m", " | \x1b[97mBright White\x1b[0m")

console.log("- \\x1b[100m", "| \x1b[100mBright Black Background\x1b[0m")
console.log("- \\x1b[101m", "| \x1b[101mBright Red Background\x1b[0m")
console.log("- \\x1b[102m", "| \x1b[102mBright Green Background\x1b[0m")
console.log("- \\x1b[103m", "| \x1b[103mBright Yellow Background\x1b[0m")
console.log("- \\x1b[104m", "| \x1b[104mBright Blue Background\x1b[0m")
console.log("- \\x1b[105m", "| \x1b[105mBright Magenta Background\x1b[0m")
console.log("- \\x1b[106m", "| \x1b[106mBright Cyan Background\x1b[0m")
console.log("- \\x1b[107m", "| \x1b[107mBright White Background\x1b[0m")

console.log("\n***** 24-BIT RGB COLOR EXAMPLES *****\n")
console.log("- \\x1b[38;2;150;56;78m", "| \x1b[38;2;150;56;78mCustom RGB 'Rose' Font\x1b[0m")
console.log("- \\x1b[38;2;229;255;0m", "| \x1b[38;2;229;255;0mCustom RGB 'Yellow' Font\x1b[0m")

console.log("\n***** 256-COLOR (8-BIT) COLOR EXAMPLES *****\n")

console.log("- \\x1b[48;5;49m", "| \x1b[48;5;49mMint Background\x1b[0m")
console.log("- \\x1b[48;5;45m", "| \x1b[48;5;45mCyan Background\x1b[0m")
console.log("- \\x1b[38;5;33m", "| \x1b[38;5;33mBlue Font\x1b[0m")
console.log("- \\x1b[38;5;61m", "| \x1b[38;5;61mPurple Font\x1b[0m")

console.log("\n\n")

Sources:
https://davidlozzi.com/2021/03/16/style-up-your-console-logs/
https://simplernerd.com/js-console-colors/
https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
https://tforgione.fr/posts/ansi-escape-codes/

Why Software Development?

Atomik Jaye — Mon, 11 Apr 2022 19:22:05 +0000

I’m coming up on my first milestone of being at a bootcamp. So far, it’s been beneficial. I love my classmates and the instructors have been very helpful and accommodating. We’ve just finished up our JavaScript module! I’ve had experience with JavaScript before but I still learned a lot. One of our assignments is to answer the question “Why did you want to pursue Software Development?”

As easy as this question is, I still find it hard to answer. What exactly is my “why?” Have I chosen Software Development for the “dolla bills,” or have I chosen it simply because it’s “the ‘in’ thing to do?” I’ll start to answer this question by going back to my first encounter with code.

My interests in programming started back in Myspace days. Being able to personalize your page and making it an expression of who you are, was amazing to me. Myspace taught a whole bunch of teenagers and young adults how to code. Questions I asked were: “How do I hide my top 8?” “How do I change my background?” In order to solve these complex teenage problems, HTML and CSS was the answer!

I managed to use my Myspace skills to build a WordPress website to make and share Myspace graphics! Glitters? I gotchu! ‘div’ layouts? Check! I did it all! There was something special about making something come to life from a rather mundane page that excited me! I spent my summers a̶v̶o̶i̶d̶i̶n̶g̶ ̶p̶e̶o̶p̶l̶e̶ ̶a̶n̶d̶ ̶s̶o̶c̶i̶a̶l̶ ̶i̶n̶t̶e̶r̶a̶c̶t̶i̶o̶n̶s̶ staying in and messing with code!

Eventually, the time came for me to pick a major. At 17, I was tasked to figure out what I would like to do for the rest of my life, as well as, decide if it was worth paying loans back for the foreseeable future 🙃. I eventually ‘settled’ for graphic design! While in college I learned so many different art mediums, as well as, learning some website building techniques… m̶o̶s̶t̶ ̶o̶f̶ ̶w̶h̶i̶c̶h̶ ̶a̶r̶e̶ ̶p̶o̶i̶n̶t̶l̶e̶s̶s̶ ̶n̶o̶w̶. However, most of the focus was on the art side of things and I still felt a technical yearning. This yearning was very strong, I even tried to switch majors to engineering. Unfortunately, I was faced with the brutal reality of having to stay 4 more years in order to see it come to fruition and I was already a sophomore going into my junior year.

I decided to stick through with graphic design till graduation. After graduation, I began working many odd jobs I even landing an internship with a mobile development startup! It didn’t last too long, but I learned so much while I was there and caught a glimpse of what I would like to aim for. I also attended more meetup groups revolved around programming. I got to learn some topics such as the Internet of Things (IoT) and big data! After my internship ended, I had a hard time figuring out how to apply my skills to technical jobs. It was back to the drawing board.

I eventually landed what I felt was a ‘dream job’ in graphic design. I got to create art for a craft store! It was a dream come true… until it wasn’t. It was great for the first few months: I got to create so many items that would be enjoyed by many across all ages. As fun as it was at the time, I found myself craving for some technical tasks. I often sat wondering, what tools could we create to make the crafting process better? Could we integrate an inventory system for our customers to use so they know what they have at all times? What digital services could we offer to help our customers should they decided to use us for their crafting businesses?

Unfortunately, this was not in my job description. I also didn’t have the time to further explore these questions as many of us were laid off. However, Instead of being upset, I was excited! I was free to explore what life had to offer. I decided it was about time I formally learn how to program and bought an online class by none other than Colt Steele. I learned so much and absolutely loved it! I even decided to stream on Twitch to show the process of my learning to program in real time! I was even accepted into a stream team that focused on live coding. Sidenote I also highly recommend live coding while learning, I was able to receive real-time help from more experience programmers. I also learned something new every time I streamed!End Sidenote Unfortunately, self-doubt and imposter syndrome set in. I eventually allowed comparison to ruin my joy of programming and let my skills fade slightly. To add insult to injury, the pandemic made matters worse.

I eventually started working at a warehouse when things died down, Surprisingly, it excited me. I was able to do different jobs almost everyday there! I was constantly learning something new and moving around frequently. I eventually landed a task called “Problem Solver.” We go around fixing inventory issues with our computers. Eventually my knack for exploring and fixing technical problems arose again. Questions like “How can this process be made easier?” or “Why are they using toggle menus on this webpage” started being asked again.
I eventually found out about a program called “Career Choice” were I was able to find this very program I’m in right now! I chose to enroll in Software Development because I’ve always had a knack for questioning and exploring solutions for technical problems. The ability to use my creativity and build something from nothing absolutely excites me. I find software development aligns with my yearning for fixing problems and it allows for flexibility in learning new things every step of the way.

I do not know where software development will lead me, however, I am excited to explore and find out all the possibilities!