DEV Community: paolomgarcia

On the verge of becoming a software engineer.

paolomgarcia — Tue, 13 Dec 2022 17:00:29 +0000

The end is near. 3 months after taking a leap into a software engineering bootcamp I'm almost there, but what's actually on the horizon? The panic of restructuring my life to have it possibly not work out is truly bringing some anxiety into my life, but I'm learning to truly trust the process.

I am now well versed on JavaScript, React, Ruby (on rails), and of course some CSS. Bringing all of these languages together for my phase 5 project I'm hoping is something that will take care of this impostor syndrome I'm dealing with. This is not only a test to show myself I can bring everything together, but hopefully also a leap into having something solid to show a possible future employer.

Really just wondering what's next in life... where will this profession take me, geographically speaking? Financially also, I'm hoping I can find the stability I once had in my life. Just tons of things to come, and anxious to see it all unfold.

More to come....

Migrating in Ruby

paolomgarcia — Sat, 19 Nov 2022 06:21:26 +0000

Things switch up quickly when you get to the back-end of code. Everything that gave you immediate response is no longer, and the puzzle solving begins. I actually felt like I tied everything in a lot better with the back-end (although I can't wait to learn a language outside of Ruby). The creative leaning front-end is something that truly pushes me outside of my comfort zone and still is largely rewarding to pull off; but the back-end just clicks. It is tricky, but direct. It is lengthy, but necessary. Without a back-end, a website is generally forever stagnant.

So, I'll go over the basic instructions to get through a simple migration on Ruby. Ruby runs entirely through the terminal, and you have to make sure all your steps are taken in correct order or your seeds and migrations will not be correct.

Go ahead and install your bundles and begin with the following:

rake db:create_migration NAME _________

note: the "NAME" is optional and you can jump direction from create_migration to whatever you want to name that migration.

After creating your migrations, you're going to want to go into those files and create your migration tables inside. This will look something like the following:

class CreateStudents < ActiveRecord::Migration[6.1]
   def change
      create_table :table_name do |t|
         t.string :color
         t.integer :length
         t.boolean :finished?

Once finished with the creation of your migration tables, go back to your terminal and type:

rake db:migrate

This will create a schema folder with all of your migrations and a seed folder that you will need to bring in your database information to. This could look as the following:

Model.create(color:"brown", length:7, finished?: FALSE)

You will want to do this to pass the migration information to every model that you have passing that information through.

I hope this helps any Ruby novice get through a migration as easily as possible!

It Gets Easier With A Little Help From React...

paolomgarcia — Fri, 04 Nov 2022 14:37:01 +0000

Before entering the second phase of my course, the last few months of my life have been solely focused on the basics of JavaScript, html, and css. It was such a pleasant surprise to step into React and see that things really do get more simple. The biggest thing that clicked with me in React was the separation of components. My brain tends to works in a very puzzle driven manner, so separating each 'component' into its own puzzle piece really brought things together for me. Components really allowed me to see my creation from afar and see each piece being brought together to bring something final. Client side routing also allowed me to separate these components into separate parts of my website to really allow for some user interaction and proper sectioning.

For our Phase-2 project, I created a snowboard store from an admin perspective. This website gave the user, or admin, the ability to run his online store with a persisting inventory to which he could add to and search from. On the sites header, the user could navigate from the home page, to the form to add a snowboard to his inventory, as well as an 'about us' page to give the online-shoppers some contact information.

Below is a tree showing the breakdown of how all of the components are brought together. I really thought having this visual and seeing the site come together was the best part about learning React. Vanilla Javascript was very eye opening simply learning how to code, but I feel this phase finally brought me to seeing what coding could really build. Going back to the tree, you can see the routes are contained in the header since that's where you'll have the ability to navigate through the 'home', 'add snowboard', and 'about us' tabs. My snowboard page contains a search bar as well as all of the snowboard cards (store listing) which has the snowboard image, price, style, etc. In a separate component, you can see the 'addForm' which will take us to the 'add a snowboard' tab and give the user the ability to display his new products as they come in.

Still making some final tweaks to my website, but I look forward to updating this post with a gif of our fully functioning and very first personal project. Thanks for tuning in to the While at Flatiron School Chronicles. I will indeed add my GitHub link to this project for anyone who wants to check out my creation.

paolomgarcia / phase-2-project

phase-2-project

Pao's Snowboard Shack

Usability

The website will be presented from an admin point of view. The user will be able to run their website with the following capabilities:

Seaminglessly navigate through the website's home, about us, and add snowboard page.
Add new products as they come in which will persist inside of the database.
Search for products via model, size, terrain, and brand.

View on GitHub

A Blind Date With Coding & Fetching APIs

paolomgarcia — Tue, 11 Oct 2022 14:03:40 +0000

Stepping into the world of coding has already felt like one of the better decisions I've made thus far in life. My past has included a very parent influenced criminal justice degree from a "prestigious university", followed up by a 5 year career in the gritty sales industry, which I must say I did not enjoy. A lack of joy in what I was doing and the future I saw for myself led me to scatter around different career changing options, bringing my to the hopes of becoming a software developer. My step-father has been a lead developer at UKG for many years, so the world of software engineering had always been nearby. After seeing him have so much success thru the years, as well witness several peers step into this world and have nothing but good things to say, I decided to take the biggest leap of my life and begin to learn how to code.

Coding was something I always felt was very niche; You see snippets of JavaScript online, and it looks like an entire new language with a completely different alphabet. I knew that this would be something that would take sacrifice from other enjoyments in my life and a full dive into learning something entirely foreign, but my puzzle driven mindset pushed me towards making the decision to dive into this brand new world.

Learning the basics of coding and JavaScript in the span of a couple of months has me truly wanting to master the art of bringing code together to create something reactive and responsive. APIs quickly became the thing I found most interesting in creating my first website. Being able to pull data from an outside source to constantly update something such as daily sporting events, weather, astrological information, and truly endless amounts of other information could lead to so many ideas for future events. Before knowing a thing about code, I thought each host had to self populate or create this data on their own, but APIs are what brings outside information to your basic web developer to create so many more opportunities.

Now, what I quickly came to find out is that most APIs will carry far more information than you may specifically find necessary. However, being able to call specific data, or in this case objects, was by far my biggest challenge to overcome thus far. Therefore, let's try to breakdown how to properly call a specific set of data from an API. Lets take my very first API fetch request for example...

fetch('https://sportspage-feeds.p.rapidapi.com/games?odds=spread&league=MLB', options)
    .then(response => response.json())
    .then(response => {
        //console.log(response);
        response.results.forEach(finalGame => { currentTeams(finalGame) })
    })

// details.innerHTML = JSON.stringify(response);

const currentTeams = (finalGame) => {
    const teams = document.createElement("p");
    teams.innerHTML = finalGame.teams.away.team + ' @ ' + finalGame.teams.home.team;
    scheduleBar.append(teams);

    teams.addEventListener('click', () => {
        //console.log(finalGame);
        renderDetails(finalGame);

    })
}

const renderDetails = (finalGame) => {
    //const element = document.createElement("div");
    //console.log(gameDetails(finalGame));
    //console.log(finalGame);
    const details = document.querySelector('#details');
    details.innerHTML = finalGame.details.seasonType;
    const odds = document.querySelector('#odds');
    odds.innerHTML = finalGame.odds[0].spread.current.awayOdds + ' ' + finalGame.odds[0].spread.current.homeOdds;
    const teams = document.querySelector('#teams');
    teams.innerHTML = finalGame.teams.away.team + ' @ ' + finalGame.teams.home.team;
    const venue = document.querySelector('#venue');
    venue.innerHTML = finalGame.venue.name;
    const gameTime = document.querySelector('#schedule');
    gameTime.innerHTML = finalGame.schedule.date;
    let todaysGame = new Date(finalGame.schedule.date);
    //console.log(finalGame.schedule.date, todaysGame);
    gameTime.innerHTML = todaysGame.toLocaleDateString('en-EN') + ' ' + todaysGame.toLocaleTimeString('en-EN');
    const gameStatus = document.querySelector('#status');
    gameStatus.innerHTML = finalGame.status;

    if (finalGame.scoreboard) {
        const currentScore = document.querySelector('#score');
        currentScore.innerHTML = finalGame.scoreboard.score.away + ' - ' + finalGame.scoreboard.score.home;
    }

{
  "status": 200,
  "time": "2022-09-20T13:19:57.022Z",
  "games": 1,
  "skip": 0,
  "results": [
    {
      "schedule": {
        "date": "2022-02-13T23:30:00.000Z",
        "tbaTime": false
      },
      "summary": "Los Angeles Rams @ Cincinnati Bengals",
      "details": {
        "league": "NFL",
        "seasonType": "postseason",
        "season": 2021,
        "conferenceGame": false,
        "divisionGame": false
      },
      "status": "final",
      "teams": {
        "away": {
          "team": "Los Angeles Rams",
          "location": "Los Angeles",
          "mascot": "Rams",
          "abbreviation": "LAR",
          "conference": "NFC",
          "division": "West"
        },
        "home": {
          "team": "Cincinnati Bengals",
          "location": "Cincinnati",
          "mascot": "Bengals",
          "abbreviation": "CIN",
          "conference": "AFC",
          "division": "North"
        }
      },
      "lastUpdated": "2022-02-14T03:02:18.640Z",
      "gameId": 278943,
      "odds": [
        {
          "spread": {
            "open": {
              "away": -4,
              "home": 4,
              "awayOdds": -110,
              "homeOdds": -115
            },
            "current": {
              "away": -4,
              "home": 4,
              "awayOdds": -110,
              "homeOdds": -110
            }
          },
          "moneyline": {
            "open": {
              "awayOdds": -193,
              "homeOdds": 166
            },
            "current": {
              "awayOdds": -196,
              "homeOdds": 168
            }
          },
          "total": {
            "open": {
              "total": 49.5,
              "overOdds": -110,
              "underOdds": -110
            },
            "current": {
              "total": 48.5,
              "overOdds": -110,
              "underOdds": -110
            }
          },
          "openDate": "2022-01-31T13:46:07.823Z",
          "lastUpdated": "2022-02-13T23:23:16.272Z"
        }
      ],
      "venue": {
        "name": "SoFi Stadium",
        "city": "Inglewood",
        "state": "CA",
        "neutralSite": true
      },
      "scoreboard": {
        "score": {
          "away": 23,
          "home": 20,
          "awayPeriods": [
            7,
            6,
            3,
            7
          ],
          "homePeriods": [
            3,
            7,
            10,
            0
          ]
        },
        "currentPeriod": 4,
        "periodTimeRemaining": "0:00"
      }
    },
    {
      "schedule": {
        "date": "2022-02-13T19:00:00.000Z",
        "tbaTime": false
      },
      "summary": "Atlanta Hawks @ Boston Celtics",
      "details": {
        "league": "NBA",
        "seasonType": "regular",
        "season": 2021,
        "conferenceGame": true,
        "divisionGame": false
      },
      "status": "final",
      "teams": {
        "away": {
          "team": "Atlanta Hawks",
          "location": "Atlanta",
          "mascot": "Hawks",
          "abbreviation": "ATL",
          "conference": "Eastern",
          "division": "Southeast"
        },
        "home": {
          "team": "Boston Celtics",
          "location": "Boston",
          "mascot": "Celtics",
          "abbreviation": "BOS",
          "conference": "Eastern",
          "division": "Atlantic"
        }

Choosing specific data to pull is all about getting down to the keys that you'd like to pull; and truly all so much easier once you break each object down with all of their individual keys. I'll breakdown an example from my recent project for pulling the home and away team from a baseball game separately to populate as a single string value... To break this down, (finalGame) will be referencing the JSON response from the API of "Results". Once we're in these results, we simply break down the keys and pull...

finalGame.teams.away.team + ' @ ' + finalGame.teams.home.team;

Above, we're stepping into each individual key of the away and home teams separately, and bringing them together in a string with an '@' value to show the second team is the home team, and that's where the game is "at".

Hopefully easy to understand, that is my first technical introduction to the ability of accessing APIs as well as a bit about myself and my recent endeavor into learning how to code.