DEV Community: jccaropino7786

Navigating Job Applications: PDFs vs. Editable Text Documents

jccaropino7786 — Thu, 17 Aug 2023 01:19:04 +0000

In the digital age, applying for jobs has evolved from traditional paper resumes to electronic submissions. One crucial aspect of this evolution is the choice between submitting a resume in PDF format or an editable text document. While both formats have their merits, it's important to consider how companies use technology, including AI, to filter and process resumes. This article delves into the advantages and potential pitfalls of each format, especially in the context of AI-driven keyword filtering.

PDF Resumes: Aesthetic Appeal with Compatibility Concerns

Portable Document Format (PDF) resumes are well-known for their professional appearance and fixed formatting. A PDF ensures that your resume's layout and design remain intact regardless of the device or software used to view it. However, when it comes to the technology-driven hiring process, PDFs can present certain compatibility concerns.

The AI Factor: PDF Limitations in Keyword Filtering

Many companies utilize applicant tracking systems (ATS) and AI algorithms to streamline the initial resume screening process. These systems often rely on keyword matching to identify candidates with relevant skills and experience. While PDFs are human-readable and visually appealing, they might pose challenges for AI algorithms. Since PDFs encapsulate information in a non-editable format, extracting text for keyword analysis can be tricky.

When an AI system encounters a PDF resume, it needs to rely on optical character recognition (OCR) to extract text. This process can sometimes result in formatting errors, missed keywords, or misinterpreted information. Consequently, a well-crafted PDF resume might not make it past the AI's initial screening if the OCR process fails to extract essential keywords effectively.

Editable Text Documents: AI-Friendly and Keyword-Ready

Editable text document formats like Microsoft Word (.docx) or plain text (.txt) offer distinct advantages in terms of AI compatibility. These formats allow direct access to the text content, making it easier for AI algorithms to extract and analyze keywords accurately. As a result, submitting a resume in an editable text format might increase the likelihood of passing the AI's initial screening phase.

Best Practices for Text Document Resumes:

Clean Formatting: Use a consistent and clean layout without excessive formatting to ensure ease of keyword extraction.

Keywords: Tailor your resume to the job description by incorporating relevant keywords naturally throughout the document.

Headers and Bullet Points: Structure your resume with clear headers and bullet points to enhance readability for both humans and AI.

File Naming: Give your file a meaningful name that includes your name and the job title to make it easier for recruiters to identify.

tldr:

As job seekers navigate the modern application landscape, the choice between submitting a PDF or an editable text document carries implications for AI-driven screening processes. While PDFs offer aesthetic appeal, their compatibility with AI keyword filtering systems might be a limiting factor. On the other hand, editable text documents align more effectively with AI requirements, potentially increasing your chances of getting past the initial screening phase. Whichever format you choose, understanding the nuances of both options will empower you to present your qualifications effectively in the digital job market.

Long-Term Strategic Planning for Web Application Building: A Guide to Monthly Milestones and Infrastructure Maintenance

jccaropino7786 — Tue, 16 May 2023 19:37:57 +0000

Building a web application requires careful long-term strategic planning to ensure its success and sustainability. In this blog post, we will explore the importance of monthly milestones, building a robust infrastructure, and maintaining that infrastructure over time. By following these best practices, you can create a scalable, reliable, and efficient web application that stands the test of time.

Monthly Milestones: Setting Goals and Tracking Progress

When embarking on a web application project, it is essential to establish monthly milestones to guide the development process. Monthly milestones break down the project into manageable tasks and provide a clear roadmap for progress. Here are a few key steps in setting effective monthly milestones:
a) Define Clear Objectives: Start by outlining the core objectives of your web application and identify the key features and functionalities you wish to develop.

b) Break Down Tasks: Divide the development process into smaller tasks, focusing on specific components or modules that can be completed within a month.

c) Assign Priorities: Prioritize tasks based on their importance and dependencies. Ensure that critical functionalities are given higher priority.

d) Track Progress: Regularly monitor and evaluate the progress of each monthly milestone. This allows you to identify potential roadblocks and make necessary adjustments to keep the project on track.

Building Infrastructure: Scalability, Reliability, and Performance

A solid infrastructure is the backbone of any web application. It lays the foundation for future growth, scalability, and ensures optimal performance. Here are some key considerations when building the infrastructure for your web application:

a) Choose the Right Technologies: Select the appropriate programming languages, frameworks, and libraries that align with your project requirements. Consider factors such as scalability, community support, and integration capabilities.

b) Scalability and Load Balancing: Design your infrastructure to handle increased traffic and user demands. Implement load balancing techniques and utilize scalable cloud services like AWS, Azure, or Google Cloud to accommodate future growth.

c) Data Storage and Database Design: Determine the most suitable database solution for your application's needs. Opt for reliable and scalable databases like PostgreSQL or MongoDB and establish efficient data retrieval and storage mechanisms.

d) Security Measures: Implement robust security measures to protect user data and prevent unauthorized access. Utilize encryption, secure authentication protocols, and regularly update security patches to address emerging threats.

Infrastructure Maintenance: Ensuring Reliability and Performance

Maintaining your web application's infrastructure is crucial for its long-term success. Here are some essential practices to ensure reliability and performance:

a) Regular Performance Testing: Conduct routine performance tests to identify and address bottlenecks or inefficiencies. Monitor response times, server load, and database performance to optimize the application's speed and efficiency.

b) Continuous Integration and Deployment (CI/CD): Utilize CI/CD pipelines to automate the testing, integration, and deployment processes. This helps maintain a stable development environment and allows for efficient deployment of updates and bug fixes.

c) Monitoring and Logging: Implement monitoring tools to track application metrics, server health, and error logs. This helps identify potential issues and allows for proactive troubleshooting.

d) Regular Updates and Maintenance: Stay up-to-date with software updates, security patches, and framework versions. Regularly review and refactor the codebase to ensure code quality, maintainability, and adherence to coding standards.

Conclusion:

Long-term strategic planning is vital for successful web application development. By setting monthly milestones, building a robust infrastructure, and maintaining it effectively, you can create a web application that is scalable, reliable, and performs optimally over time. Remember to adapt your plans as necessary, stay current with technology trends, and prioritize user experience to ensure the long-term success of your web application.

Coding Adventures on the High Seas: A Remote Work Experience on a Royal Caribbean Cruise

jccaropino7786 — Tue, 16 May 2023 16:03:26 +0000

Introduction:

Imagine sitting in a luxurious stateroom, surrounded by breathtaking ocean views, as you dive into the world of coding and algorithmic problem-solving. Thanks to the innovative technology of Starlink, Royal Caribbean cruises now offer seamless internet connectivity, allowing remote workers and digital nomads to enjoy an unforgettable workcation experience. In this blog post, we'll explore the incredible opportunity of writing code on a Royal Caribbean cruise, where you can combine work, fitness, and entertainment while sailing across the open waters.

Effortless Remote Work:

One of the greatest advantages of embarking on a Royal Caribbean cruise is the hassle-free remote work environment it offers. With the Starlink internet service, you can connect to the web with ease, accessing all the online tools and resources you need for coding and programming. Whether you're a software engineer, a data scientist, or an aspiring developer, working remotely on a cruise ship becomes as seamless as working from the comfort of your own home.

The well-appointed staterooms on Royal Caribbean cruises provide an ideal workspace for coding enthusiasts. During my cruise, I spent three productive hours each morning in my stateroom, fully immersed in writing code and tackling complex algorithms. The tranquil ambiance and scenic ocean views served as a constant source of inspiration, boosting my creativity and productivity to new heights.

Work-Life Balance at Sea:

While the coding experience takes center stage during your morning sessions, a Royal Caribbean cruise ensures an ideal work-life balance. After your coding sessions, you have ample opportunities to unwind and make the most of your cruise experience.

To maintain a healthy lifestyle, you can head to the onboard gym for an hour each day. Whether you prefer lifting weights, jogging on a treadmill, or joining fitness classes, the well-equipped gym facilities on Royal Caribbean cruises cater to all your fitness needs. Exercising not only keeps you energized and focused but also helps counterbalance the sedentary nature of coding work.

Beyond work and fitness, Royal Caribbean cruises offer a myriad of entertainment options to ensure an unforgettable experience. Immerse yourself in spectacular shows featuring talented performers, indulge in live music that sets the perfect ambiance, and explore various recreational activities onboard. From rock-climbing walls and surfing simulators to relaxing by the poolside, you'll find something for every interest and age group.

Seasickness Precautions:

It's important to note that being on a cruise ship means navigating the ocean's waves, which may cause seasickness for those prone to it. While Starlink's reliable internet connection allows you to stay connected and productive, it's wise to come prepared if you're susceptible to motion sickness. Consulting with a medical professional and taking appropriate medication beforehand can ensure you fully enjoy your coding adventure without any discomfort.

Conclusion:

Embarking on a Royal Caribbean cruise provides a unique and inspiring environment for coding enthusiasts to work remotely. With Starlink's seamless internet connectivity, you can effortlessly access online tools and resources, making the coding experience onboard as smooth as working from home. Balancing work with fitness activities, entertainment, and relaxation is made easy on a cruise ship, allowing you to create memorable experiences while pursuing your coding passions.

So, if you're ready to embark on an extraordinary coding journey amidst the stunning backdrop of the open sea, consider a Royal Caribbean cruise. Sail, code, and enjoy the best of both worlds, combining work and adventure for an unforgettable workcation experience.

Rails Back end React Front End Trivia App with External API

jccaropino7786 — Thu, 30 Mar 2023 15:51:17 +0000

Final Project

Finally a chance to put together all the skills that were learned over a 15 week bootcamp. This project uses an external API to get questions then stores those questions on a rails backend along with users and user scores to track high scores.

All of the following code implements a trivia game within a single React Component. This component utilizes React hooks, such as useState and useEffect, as well as React Router and a custom UserContext. The component fetches a list of 10 trivia questions from an external API, saves them to a database, and renders each question one at a time. The user provides an answer to each question, and their score is incremented if they answer correctly. When all questions have been answered, the user's final score is displayed, and they are given the option to return to the homepage.

React Hooks

The code utilizes several React hooks to manage the component's state. useState is used to store the current state of several variables, such as showResults, currentQuestion, score, questions, and answer. The useState hook returns an array with two elements: the current state value and a function to update that value.

const {user, setUser} = useContext(UserContext)
    const [showResults, setShowResults] = useState(false);
    const [currentQuestion, setCurrentQuestion] = useState(0);
    const [score, setScore] = useState(0);
    const [questions, setQuestions] = useState([])
    const [answer, setAnswer] = useState("")
    const navigate = useNavigate()

useEffect is used to fetch the trivia questions from an external API and save them to a database using a POST request. The useEffect hook runs only once, when the component first mounts, since it has an empty dependency array. This means that the API call and database update only occur once, not on every render.

useEffect(() => {
        const fetchData = async () => {
            try {
              const resp = await fetch("https://the-trivia-api.com/api/questions?limit=10&categories=science,history'")
              const questionsList = await resp.json()

              const questionResponse = await fetch('/questions', {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({ questions: questionsList }),
              })
              const questionData = await questionResponse.json()

              setQuestions(questionData)

            } catch (error) {
              alert(error)
            }
          }
        fetchData()
        //for each question create question.question
        //create question
        //create answer for each create question.answer
        //create question answer for each question for the current user attach the question and answer that was asked to the user

      },[])

React Router

The code imports two functions from React Router: useNavigate and Link. useNavigate is used to programmatically navigate to a different page, while Link is used to create clickable links that lead to a different page. In this code, if currentUserGame is null, useNavigate is used to redirect the user to the homepage. If the user reaches the end of the game and clicks the "Return Home" button, Link is used to take them back to the homepage.

Custom UserContext

The code imports UserContext from a custom context, which is used to share data between components without passing props down through every level of the component tree. The UserContext provides two values: user and setUser, both obtained through useContext. The user object contains information about the current user, including their user_games. setUser is a function that allows the user object to be updated.

Trivia Game Logic

The trivia game begins by rendering the first question from the questions array. The user provides an answer to the question in an input field, and when they click "Final Answer," the answerSubmitted function is called. This function compares the user's answer to the correct answer stored in the current question object. If the user's answer is correct, their score is incremented, and the score is saved to the database using a PATCH request. The user's current game object is also updated with their new score, and the setCurrentUserGame function is called to update the component's state with the new game object.

const answerSubmitted = (e) => {
        e.preventDefault()
        // Increment the score
        if (answer.toLowerCase() === questions[currentQuestion].answer.answer_text.toLowerCase()) {
          setAnswer("")
          // debugger
          fetch(`/user_games/${user.user_games[user.user_games.length -1].id}`, {
            method: 'PATCH',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify( {score: score + 1} )
          })
          .then(response => {
            console.log(response)

            if (response.status === 200) {
              response.json().then(data => {
                // console.log(data)
                setScore(currentScore => currentScore + 1);
                setUser(currentUserObj => ({...currentUserObj, user_games: currentUserObj.user_games.map(ug => ug.id === data.id ? data : ug)}))
                setCurrentUserGame(data)
              })
            } else {
              response.json().then(error => alert(error.errors))
            }
          })
          .catch(error => alert(error));
        }

        if (currentQuestion < 9) {
          setCurrentQuestion(thisQuestion => thisQuestion + 1);
          setAnswer("");
        } else {
          setShowResults(true);
        }
      };

If the user's answer is incorrect or they reach the end of the game, the function updates the component's state to show the results screen. If the user reaches the end of the game, they are shown their final score and given the option to return to the homepage.

  if(!currentUserGame){navigate('/welcome')}
      if (questions.length === 0) return <h1>Loading...</h1>
      console.log(questions, currentQuestion)

Conclusion

In summary, this code is a React component that implements a trivia game. The component uses several React hooks to manage its state, React Router to navigate to different pages, and a custom UserContext to share data between components. The game logic fetches trivia questions from an external API, saves them to a database, and renders each question one at a time. The user provides an answer to each question, and their score is incremented if they answer correctly. When all questions have been answered, the user's final score is displayed, and they are given the option to return to the homepage.

Just Finished Bootcamp. Now What?

jccaropino7786 — Thu, 16 Mar 2023 16:07:31 +0000

As I sit here reflecting on my experience, I can't help but feel a sense of pride and accomplishment. I have just finished a coding bootcamp, and it was one of the most challenging things I have ever done.

From day one, I knew that this was going to be a difficult journey. The curriculum was rigorous and fast-paced, and I had to learn an incredible amount of material in a short amount of time. But despite the challenges, I never lost sight of my goals.

One thing that I am particularly excited about is the opportunity to learn a new language like Python. During the bootcamp, I was exposed to many different programming languages, javaScript, Ruby, Rails, React Framework, but I was particularly drawn to the versatility and power of Python and need to keep building my skills. Now that I have completed the bootcamp, I can't wait to dive deeper into this language and start building some cool projects.

Another thing that has me excited is the prospect of exploring new career paths. The tech industry is constantly evolving, and there are so many different fields and specialties to explore. With the skills and knowledge that I gained during the bootcamp, I am confident that I will be able to find a career path that is both challenging and fulfilling.

Of course, finishing the bootcamp is just the beginning of my journey. There is still so much more to learn and explore, and I know that I will face many challenges and obstacles along the way. But with the support of my cohort, instructors, and mentors, I am confident that I can achieve my goals.

In conclusion, finishing a coding bootcamp is an incredible accomplishment. It requires hard work, dedication, and a willingness to push yourself beyond your limits. But for those who are willing to put in the effort, the rewards can be enormous. I am excited to see where my newfound skills will take me, and I can't wait to explore all of the possibilities that lie ahead.

Starting a bootcamp

jccaropino7786 — Thu, 16 Mar 2023 15:57:19 +0000

I should start by saying that I should have written and posted this months ago, however I did not know that it was a requirement to complete the class until the last week of the class. Fortunately I tend to journal frequently and I just so had one entry that I would like to share prior to my first day of coding bootcamp at flatiron school.

Starting a coding bootcamp can be both exciting and anxiety-inducing. On the one hand, I feel eager to learn new skills and embark on a new career path. On the other hand, I am nervous about whether you have what it takes to succeed and keep up with the fast-paced curriculum.

I completed the prework for the bootcamp, it felt like I was drinking water through a firehose. The amount of information to absorb was overwhelming, and it feels like I'll never be able to retain it all. However, I have been told that this intense immersion is an essential part of the bootcamp experience, and it will prepare me for the challenges to come.

I'm feeling a mix of emotions. Excitement at the prospect of learning new skills and building projects, anxiety about meeting expectations and keeping up with the pace of the curriculum, and a bit of apprehension about the unknown.

Do others in the bootcamp feel the same excitement and nerves as I do? I hope to be there for my cohort and put in time so that we as a cohort can be there to lean on each other and push each other. I'm really hoping on a great instructor and mentors to guide me and help me succeed.

As I dive into the bootcamp curriculum, I hope to get a feel of what's to come. I'm looking forward to building projects, solve challenging problems, and learn new programming languages and technologies. While it may be difficult at times, I just need to keep reminding myself that I'm building the foundation for a fulfilling and rewarding career in tech.

In conclusion, starting a coding bootcamp can be an exciting yet nerve-wracking experience. The pre-work may have felt like drinking water through a firehose, but it's all part of the process. Lean on your cohort for support, and remember that you're building the foundation for a rewarding career in tech. Get ready for a taste of things to come!

Sign in and Authentication in Rails

jccaropino7786 — Tue, 21 Feb 2023 19:23:42 +0000

Authentiication

There are a few steps that need to be followed in order for Authentication to work in a web application. The code below will set up some basic sign up and sign in. Hopefully this step by step can help you quickly get your authentication working.

In your application controller, you need to define your
current user and your authorized user for use in authentication.

class ApplicationController < ActionController::API
  include ActionController::Cookies

        before_action :authorized_user

        def current_user
            @user ||= User.find_by(id: session[:user_id]) if session[:user_id]
        end

        def authorized_user
            render json: {errors: "unauthorized"}, status: :unauthorized unless current_user
        end



end

In Your Sessions controller is where you define your login route which is a "POST" and your logout which is a "DELETE".
It will create a session and it will delete the session for the user so that the user can see the appropriate information that they are supposed to see rendered to the page.

class SessionsController < ApplicationController
    skip_before_action :authorized_user, only:[:login]

    def login
        user = User.find_by(email: params[:email])
        if user&.authenticate(params[:password])
            session[:user_id] = user.id
            render json: user, status: :created            
        else
            render json: {error: "Invalid Credentials"}, status: :unauthorized
        end
    end

    def logout
        session.delete :user_id
        head :no_content
    end
end

In your Users Controller or wherever your user is living. The table will hold all of the users information with a secure password. login and logout will create a new session where as sign up will allow a returning user sign in on future updates.

class UsersController < ApplicationController
    before_action :find_user, only: [ :update, :destroy]
    skip_before_action :authorized_user, only: [:create]

    def create
        new_user = User.create!(user_params)
        session[:user_id] = new_user.id
        render json: new_user, status: :created
    end

    private

    def find_user
        @user = User.find(params[:id])
    end

    def user_params
        params.permit(:email, :password)
    end
end

In your User Model is where you will add you validations and have has_secure_password so that creation of your users goes smoothly.

class User < ApplicationRecord
 has_secure_password

 validates_presence_of :email
    validates :email, presence: true, uniqueness: true
    validates :password, presence: true, length: { minimum: 8 }, on: :create

end

The Authorization Fetch Call in your App.js will make sure that the current user or the one person who is logged in has access to what they need access to and that no one else has access to that information.

useEffect(() => {
    const fetchData = () =>
    fetch('/auth')
    .then(res => {
      if(res.ok){
        res.json().then(user => setCurrentUser(user))
      } 
      // else {
      //   const error = res.json().then(error = setError(error))
      // }
    })
    if (!currentUser)
    {fetchData() } 
  },[currentUser])

In the routes.rb custom routes for authorization login and logout. The custom routes allow for easy identification in naming and calling routes in your front end to make sure they end up correctly in the backend.

  post "/login", to: "sessions#login"
  post "/signup", to: "users#create"
  get "/auth", to: "users#show"
  delete "/logout", to: "sessions#logout"

In app file

if(!currentUser) {
    return login ? <LogIn setLogin={setLogin} setCurrentUser={setCurrentUser} /> : <SignUp setLogin={setLogin} setCurrentUser={setCurrentUser} /> 
  }

In Conclusion

Creation of authentication actually has a lot of moving parts and depending on when you decide on implementing your you make break a lot of things in your site. Go slowly track your changes.

Ruby, Active Record, Sinatra so much information so little time

jccaropino7786 — Mon, 30 Jan 2023 17:12:28 +0000

This is a Bootcamp

Attending a coding bootcamp is like drinking water through a fire hose. Don't believe me? I prefer to write technically and there will be technical aspects in this post and things that were learned, however; I feel strongly that the comprehensive list that were were expected to learn over the last 3 weeks was just so incredible vast that the retention of the material is somewhere in the 30 - 40% range.

Three weeks... one language cool as students that were already accustomed to the pace of the boot camp lifestyle of coding and lectures 12 hours a day for 6 weeks with JavaScript and React under our belts feeling confident after finishing front end projects that did feel incomplete because we have yet to learn a backend language the cohort was excited to dive into Ruby a back end language and tie the life of a full-stack software engineer together. How I personally thought the phase was going to go ended up being quite the divergent path with slow progress learning a lot of small little steps and a lot of growing pains.

The divisions below are going to go into things that were learned in this project but it was not just Ruby. In order to leverage the most in this phase we had to learn a few more tools. ActiveRecord, and Sinatra...

Phase 3 Ruby

Excited to learn ruby. What is Ruby? It was designed with an emphasis on programming productivity and simplicity. in Ruby everything is an object, that is how we started learning new syntax which was fairly straight forward, easy to read and easy to code:

  def greet_programmer
    puts "Hello, programmer!"
  end

  def greet(name)
    puts "Hello, #{name}!"
  end

  def greet_with_default(name = "programmer")
    puts "Hello, #{name}!"
  end

  def add(num1, num2)
    num1 + num2
  end

A few simple methods with simple code. The puts command is a simple command in Ruby that just prints to the page. Ruby has implicit returns that the line before the end is automatically returned in the method. It seemed simple easy to read and easy to write. Practicing the syntax learning the new language was a growing pain but that is a growing pain is with every new language.

We were off to the races learning ruby writing methods and leveraging objects, everything that ruby promised us we would learn.

Active Record

This phase also gave us the incredible tool of Active Record. Active record was powerful, gave us the ability to create database tables, create associations between those tables with the easy to learn macros (belongs_to and has_many) giving us methods we could use to leverage those associations in Ruby. We learned how to call class and instance methods on our databases on the back end through the use of rake console.

Methods were working Associations were being made:

class Team < ActiveRecord::Base
    belongs_to :owner
    has_many :players

    def drop(player_id)
        self.update(team_id: nil)
    end

    def homerun_count
        self.players.sum(&:homeruns)
    end

    def owner_name
        puts "#{self.owner.user_name}"
    end

end

The above code would allow us to run association methods such as Team.first.players giving us all the players for the first team. Team.first.homerun_count giving us all the homeruns for the first(given)team.

All of this felt natural. Giving commands in the rake console methods are working properly and associations were made.

Up to this point of the phase it was a lot of information we learned a lot of new things and were able to put an arsenal of skills in our brains that is our metaphorical bag of holding....

Project Week and learning Sinatra

I am going to start this segment with the metaphor my eyes were bigger than my stomach.

Project introduction

The project idea was a simple fantasy sports baseball app where you could create a team and add or remove players from your team and the app would keep track of the number of homeruns for your team and update standings as you add or drop players or homeruns are increased.

Checklist

The frontend was updating state and puting data on the page.
The backend methods were created with Active Record and Ruby and were all working in the rake console.
...Sinatra is where it all fell apart.

Sinatra Routing

The frontend and the back end of our project were not communicating. Were we forgetting steps? Was the browser our own worst enemy? Cors error? Were the wrong gems installed?

installed gems in our Gemfile

gem 'sinatra'
gem 'activerecord', '~> 5.2'
gem 'sinatra-activerecord', :require => 'sinatra/activerecord'
gem 'rake'
gem 'require_all'
gem 'sqlite3'
gem 'thin'
gem 'shotgun'
gem 'pry'
gem 'bcrypt'
gem 'tux'
gem 'faker'
gem 'dotenv'
gem 'rack-cors'
gem 'rack-contrib'
gem 'rerun'

Code in our config.ru

require './config/environment'

use Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :delete, :put, :patch, :options, :head]
  end
end

use Rack::JSONBodyParser

use Rack::MethodOverride

if ActiveRecord::Base.connection.migration_context.needs_migration?
  raise 'Migrations are pending. Run `rake db:migrate` to resolve the issue.'
end

run ApplicationController
use OwnersController
use TeamsController
use PlayersController

Step by step and line by line we check boxes as we coded in config.ru to avoid getting errors. Was this enough lets find out.

Our first Sinatra Route in our players controller:

  get "/players" do
    player = Player.all
    player.to_json

  end

Our fetch call on or React frontend Side:

useEffect(() => {
    const fetchData = async () => {
      try {
        const resp = await fetch("http://localhost:9292/players")
        const playersList = await resp.json()
        setPlayers(playersList)
      } catch (error) {
        alert(error)
      }
     }

     fetchData()

  }, [])

...It worked!!!! after hours of wrestling with Sinatra to make sure we did everything correct we finally were getting our player database talking to our frontend and render information to the page.

later we changed the Sinatra route to

 get "/players" do
    player = Player.all
    player.to_json(include: :team)

  end

and what the (include: :team) did was allow us to leverage the association between our players and teams table. This unfortunately did not come until hours later when the information came to light that we could do that.

For the week that was how the project went... slow coding a lot of research, find the answer, a lot of code, back down to a crawl again and then back to research. This loop repeated intensely all week with what sometimes felt backwards progress.

Table Associations in the project

Achieving full CRUD on one of our tables felt like a huge accomplishment. We had routes to Create, Read, Update and Destroy on our players table. This felt like a victory however the power of the backend of ruby and active record was about being able to leverage associations which we had yet to achieve. This was the biggest hurdle to date so my talented partner Dylan Curtis and myself got to work rolled up with our sleeves and this is what we learned.

Adding and Dropping Players from the team

There is no place in ding dong city for you.

The main focus of our app was to leverage players on our teams to see who could project the most homeruns on the season. We needed to be able to create teams, add or remove players from our teams, add new players to be selected in the data base and finally update homeruns on our players.
we did that with CRUD actions. Fetch calls in React didn't change much but we did need to create correct routing in Sinatra to be able to communicate with our frontend.

CRUD

GET

 get "/players" do
    ply = Player.all
    ply.to_json(include: :team)

POST

Adding a player to the open roster.

post "/players" do 

    ply = Player.create(first_name: params[:firstName],
      last_name: params[:lastName],
      player_number: params[:playerNumber],
      professional_team: params[:professionalTeam],
      position: params[:position],
      homeruns: 0,    
      team: nil,
      img_url: params[:imgURL])

    if ply.id
      halt 201, {ply: ply}.to_json
    else
      halt 400, {message: ply.errors.full_messages.to_sentence}.to_json
    end
  end

Patches

(we had 2 for this project and one did double duty)

patch "/players/:id/add_player" do
    player = Player.find_by(id: params[:id])
      if player 
         player.update(team_id: params[:team_id])
         halt 200, player.to_json(include: :team)
      else
        halt 400, player.errors.full_messages.to_sentence.to_json
       end      
      end

and of corse we needed to add homeruns with our custom methods.

 patch "/players/:id/homerun" do    
    # binding.pry
    found_player = Player.find_by(id: params[:id]) 
   if found_player && found_player.add_homerun 
    halt 200, found_player.to_json(include: :team)

   else
    halt 400, found_player.errors.full_messages.to_sentence.to_json
   end      
  end

Delete

this allowed us to remove our players from the league. Gone from the database.

delete "/players/:id" do
    ply = Player.find(params[:id])
    ply.destroy
    ply.to_json

Conclusion

This project had a huge learning curve for me and my partner. A lot of time was spent researching and debugging problems. Organization for this project got away from us at times, but in the end we achieved the minimum project and still have a lot of work to do with this project. This blog post will be updated and have more to come on a finished project as we refactor code and add features.

TLDR: Sinatra kicked our but, ruby is a lot of information and is a powerful backend, we are not finished yet but we will be eventually.

React basics, a frontend project.

jccaropino7786 — Fri, 06 Jan 2023 16:35:49 +0000

The Journey

Starting to learn to code almost two months ago has been a journey and a test of how much information a person can learn in a few weeks to gather some basics on a subject to put together a working project in a subject field that takes years to master. Learning JavaScript fundamentals were to prepare for the next phase of React. As challenging as React has been it has been absolutely amazing at the amount of heavy lifting the Library that is React can do for the developer and allows them to provide an enjoyable experience for the client. The project below is only a sample of what React can do and as more skills are developed, imagination along with understanding are going to be a catalyst in projects created in the future.

The Zodiac Project

It does not look like much but the Zodiac Project is a simple single page application that displays some data and can keep track of what we are calling journal posts.

To explain what this project is in a nutshell, it is a SPA that has multiple routes with some displayed images, a form for posting new journal entries and a way to search for specific journal entries.

hooks

In building this project there were a couple of really helpful hooks built into react. useState and useEffect allowed us to have controlled forms, navigate to another page on a submission, keep track of filtered inputs, and to render information from an db.json.

const [zodiac, setZodiac] = useState([]);

useEffect(() => {
    fetch("http://localhost:3000/western_zodiac")
    .then(response => response.json())
    .then(zodiacList => setZodiac(zodiacList))
    .catch(error => alert(error))
    },[])

The above code fetchs information and renders it on the page after state was passed down as props to card Components. In this project there are 2 fetch calls from the db.json file. One for the zodiac symbols and information that are on the page and one to render the posts in the journal entries container. Those components are rendered by updating state when the page loads and when "POST" CRUD actions take place.

const [query, setQuery] = useState("")

const filteredPosts = showJournalEntry.filter
    (post => 
post.post.toLowerCase().includes(query) || post.title.toLowerCase().includes(query) || post.date.toLowerCase().includes(query)
)

The above code allows the page to track the state of the search values and filter out the posts that match target. As the user types into the search-bar input at the top of the /post path the update in state that is taking place will up-date and re-render the page based on what the user is searching for.

const navigate = useNavigate()

 const handleSubmit = (e) => {
        e.preventDefault();
        navigate("/post", {replace: true})

The above code uses "POST" CRUD action to navigate to the posts container page after form submission. Being able to navigate to another page after submission can prove to be a very useful tool. This is a simple navigation to the "/post route.

The useNavigate hook took the user on submission from "/post/new" to "/post".

React Router

React Router Version 6 was used in the creation of this project. Routes were a new tool for this project. Using React Router allows multiple paths to a single page application to only render certain parts of the page at a time desired.

<Routes>
        <Route path="/" element={ <Home /> } />
        <Route path="/zodiac" element={ <ZodiacContainer zodiac={zodiac} /> } />
        <Route path="/zodiac/:id" element={ <ZodiacCard  /> } />
        <Route path="/post/new" element={ <JournalEntryForm setShowJournalEntries={setShowJournalEntries}/> } />
        <Route path="/post" element={ <JournalEntryContainer showJournalEntry={filteredPosts} query={query} setQuery={setQuery}/> } />
        <Route path='/*' element={<NotFound />}/>
      </Routes>

By using Routes in React, navigation on the site is created that can provide an enjoyable experience for the user. Using RESTFUL routing conventions allows users to find something more easily if looking for something specific in the web based application.

Using a navBar makes for easy navigation on a SPA. with some simple #CSS styling making buttons look simple and professional is easy.

.navButton{
  width: 80%;
  border-radius: 10px;
  box-shadow: 4px 4px rgb(117, 6, 117);
}

A simple button #CSS styling

The Zodiac project only does a few very simple routes and creates a dynamic page. React Router allows for curating a specific experience for the user to allow the user to digest the content of the site the way the developer intends.

In Conclusion

Using React as a framework is a powerful tool in front end Development and allows for a comfortable user experience. This Project is the first of many stepping stones to develop more complex applications. With the ever changing amount of content in the React library there are so many things to learn. The more that is created the more that will be learned from experience. This project is complete and on to the next one.

TLDR: Made a React Project, it fetches things, you can journal with it, it saves your work.

Simple Project HTML, JavaScript, CSS

jccaropino7786 — Fri, 09 Dec 2022 19:07:58 +0000

Starting the journey into learning coding languages less than three weeks ago has been quite the experience. In those few short weeks the cohort has acquired enough knowledge to put together simple single page web applications.

This was our groups project. A single page web application that is a recipe book for drinks where you can look up drinks on a scroll bar or you can add your own drink recipe to the drink library.

We used a simple fetch request to grab data we made in the form of a .json file.

const fetchDrinks = () => {
    fetch("http://localhost:3000/drinks")
    .then(response =>response.json())
    .then(drinks => {
        displayFirstDrink(drinks[0])
        drinks.forEach(displayDrinks)
    })

This code block allowed us to call our data and use it in two different functions. These two functions render all of the initial database information on the page.

There were some challenging things for our team in this and we wanted to share those challenges:

The code that powers our website is written in JavaScript and makes use of the Document Object Model (DOM) to access and manipulate the elements on the page. We use the DOM to obtain references to the necessary elements, such as the images of the drinks and the form for adding new drinks.

.addEventListener

One of the key eventListeners in the code is handleClick, which is called whenever a user clicks on one of the drink images in the scroll bar at the bottom of the page.

function handleClick(drink){
    containerOne.innerHTML = ("")
    const drinkImg = document.createElement("img")
    drinkImg.src = drink.imageUrl
    drinkImg.alt = drink.name
    containerOne.appendChild(drinkImg)
    drinkName.innerText = drink.name
    drinkDirections.innerText = drink.instruction
    drinkIngredients.innerText = ("")
    drink.ingredient.forEach(displayIngredient)     
}

The Function below shows where the handleClick function was added.

function displayDrinks(x){
    const drinkImg = document.createElement("img")
    drinkImg.src = x.imageUrl
    drinkImg.alt = x.name 
    drinkImg.addEventListener("click", () => handleClick(x))
    ulList.appendChild(drinkImg)
    drinkImg.addEventListener('click', (e) => handleClick(x, e))
}

This function first clears the main container on the page, and then it creates and appends an img element representing the selected drink's image. It also updates the text of the h1 and h4 elements to display the drink's name and instructions, respectively. Additionally, the function calls the displayIngredient function for each of the drink's ingredients,

function displayIngredient(ingredient){
    const inLi = document.createElement("li")
        inLi.innerText = ingredient
        drinkIngredients.appendChild(inLi)
            if(inLi.innerText === ("")){
                drinkIngredients.removeChild(inLi)
            }
}

which creates and applies an li element for each ingredient to the ingredientsContainer element on the page.

handleSubmit is a function that is invoked when a user submits the form for adding a new drink. This function takes the values entered into the form and uses them to create a new object representing the drink. The new drink is then added to the page by calling the displayFirstDrink and displayDrinks functions, which create and append the necessary elements to the page.

Keeping empty markers off your HTML using JavaScript.

When using .forEach on an array each item on that array will be iterated. If you are iterating empty values (“”) over a ordered or unordered list you will be returned ::markers with nothing attached to them essentially posting an empty string, See example below:

function displayIngredient(ingredient){
     const li = document.createElement("li")
        li.innerText = ingredient
        drinkIngredients.apendChild(li)

You have 2 ::markers with content and 2 ::markers with no content. If you were iterating a .forEach over an array and wanted to not have empty markers on your page you can simply look at the data and if the data is equal to an empty string (“”) then .removeChild. Example below.

function displayIngredient(ingredient){
     const li = document.createElement("li")
        li.innerText = ingredient
        drinkIngredients.apendChild(li)
            if(li.innerText === ("")){
                drinkIngredients.removeChild(li)
            }
}

So let's write the code for partyMode function. We called it party mode it was just a simple click event that constantly changes the color of your background.

function partyMode() {
     document.body.classList.toggle("party-mode");
}

This function will call on another feature in CSS labeled '.party-mode'.

In the CSS file, the following was added.

.party-mode {
background-color: whitesmoke;
animation-name: partyMode;
animation: partyMode 3s;
animation-iteration-count: infinite;
}

This sets the initial background to whitesmoke when partyMode is invoked. it needs the animation name because It will use @keyframes for styling. The 3s means that it will cycle between all the colors in 3 seconds interval. You can make this longer or shorter depending on the style that you are trying to achieve. The animation-iteration-count is set to infinite, it will just keep running until another 'click' event.

@keyframes partyMode {
0% {background-color: red;}
20% {background-color: pink;}
40% {background-color: yellow;}
60% {background-color: blue;}
80% {background-color: purple;}
100% {background-color: green;}
}

In CSS the above was coded to cycle between colors. To ensure smooth transition between the colors choose colors that are closely related in the r,g,b,a values. You can change the % of the background color to achieve the desired style. Changing % will change how much time the color is being displayed in the background.

In Conclusion

This Project was challenging at times but with a little bit of research and the skills that our team learned in the last three weeks we were able to achieve a minimalistic working web application.
Is it Perfect? No, but as our skills grow as coding engineers and we dive into a community that has been nothing but welcoming and amazing we, each and everyone of us, develop our own unique coding identity. Together rising to new challenges forever being open to new ideas and learning new things, curiosity is the driving force so lets be curious together and make every next project better than our last.

Keeping empty markers off your HTML using JavaScript

jccaropino7786 — Fri, 09 Dec 2022 00:17:24 +0000