DEV Community: kleach12

Dark Mode Guy

kleach12 — Thu, 20 Apr 2023 03:20:52 +0000

Are you team light-mode or dark mode? I am a dark-mode guy, but to each their own. Having a light and dark mode on applications now is almost mandatory, and you might be looked at weird if you are building an app without it. So we will go over how to easily implement themes in our applications using the useContext hook.

First, I should preface why we should use useContext. useContext provides you with the ability to gain access to values anywhere in the application. Your first thought might be, "I can do that by just passing the value down as a prop," and then doing it again, and again, and again until you finally are at the component you need to be. Now that was only 5 levels deep, but imagine if you are working with a massive application that would be time-consuming. The term for that would be "prop drilling," and that is what useContext can prevent and get access to our values in the component we need, no matter how deep they are nested. These values can be any data type or even state variable like in our case, theme.

In the first step of giving our application a theme, we need to create a context. You can do this by creating a new file in your source named ThemeContext.js. In that file, you will need to import createContext where you will set your variable with a value of null and export the variable.

import { createContext } from 'react';

export const ThemeContext = create Context(null);

After you have your variable, you can now go to your App.js file and import both the ThemeContext variable and useState hook. In our case, the whole application needs to be provided with the context, but this does not always have to be the case. If it is only a section, then you would just provide that section with the context. After wrapping all components in ThemeContext.Provider, you will want to create a state variable const { theme, setTheme } = useState('light'). This is where we will hold the state of the theme and where all instances will determine what the styling should be for our components. Now, in order for useContext to work, we need values to be accessible, and how you would do that is using the values prop. We will pass any variable or data that we will need in a component between our Provider. In our case, we will need to pass multiple variables/functions, and you can do that by using double curly brackets curly.

import "./App.css";
import { useState } from "react";
import { ThemeContext} from "./ThemeContext";

function App() {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{theme, setTheme}}>
     //Components Here
    </ThemeContext.Provider>
  );
}

export default App;

Now that we have passed our values into our provider, we need to go to the component that is going to switch your theme from light to dark. I personally went with a button on the user’s Dashboard, but in your case, it might be different. But universally, you need it to import both the useContext from react and your ThemeContext variable. You will then create a variable and use a curly bracket to get each individual value from our provider and set that equal to useContext(ThemeContext), and this is how you will be able to access the values. You will then create a button or any input that you would like to have and use the setTheme function to change the button when clicked. In my case, I used icons that change when clicked as well, and I used the theme value to determine which should be showing.

import "./DashNav.css";
import { useContext } from "react";
import { ThemeContext} from "../../AllContext";

export default function ThemeButton() {

const {theme, setTheme} = useContext(ThemeContext);

  const themeButton =
    theme === "light" ? (
      <BsFillMoonFill
        className={"theme_button_" + theme}
        onClick={(e) => handleChangeTheme(e, "dark")}
      />
    ) : (
      <BsBrightnessHigh
        className={"theme_button_" + theme}
        onClick={(e) => handleChangeTheme(e, "light")}
      />
    );

    return (
        {themeButton}
      </div>
    );

Lastly, we need to define the styling for our theme. As you can see from the code above, the classNames include the theme, so when our theme is either dark or light, our CSS will know which class to choose from. In this case, we will need to create separate classes for each ID or class name, with one ending in "dark" and the other in "light", and add the styles of your choice.

.theme_button_dark{
  margin-top: 10%;
  margin-bottom: 10%;
  color: #ffffff;
}

.theme_button_light{
  color: #000000;
  margin-top: 10%;
  margin-bottom: 10%;
}

The final product will look something like this!

Valid?

kleach12 — Sun, 05 Feb 2023 21:34:25 +0000

This is what your Database looks like without Validations!

Validations are extremely important when creating a web application, as a developer you want to make sure that the information that is being input is correct before it is saved. There are several instances that could harm an application if data was input incorrectly in a database. For example, if users had the ability to create accounts you would want to make sure that everyone had a different username or that their password wasn't just 1234, or that they even entered in a password at all! It is important to protect your database so your application works at its best but you also want to make sure you are protecting those using the application as well. Luckily Rails provides us with several validations that make sure our database is getting the correct data saved.

Listed below are some of the built-in validators that rails has:

Confirmation- This validation confirms that text inputs in separate fields are the exact match. An example of this would be the confirmation of a User’s phone number, if you application depends heavily on having this point of contact it is best that you make sure that the user is providing the correct number.
Format- This validation confirms that the input matches a given regular expression. An example of this would be making sure a User can only use upper and lower case letters in their name. This can be important if you don't want any unnecessary symbols in the name of the user ie: !@#$%^.
Length- This validation confirms that the given length is met whether it is more or less. An example of this would be password creation. In today's climate, there is no reason that a Password should be less than 5 characters and even that could be considered low.
Presence- This validation confirms that there is something being passed through to the given attribute's values. An example of this is making sure that all information when creating a profile is complete. I mean imagine if a User could create a profile without even having a password this would cause major disruption in an application .
Uniqueness- This validation checks and attribute against all other instance that has been saved and makes sure that it is the only one of its kind. An example of this would be making sure that a User only uses an email for one account.
Others- Validates With, Comparison, Exclusion, Numericality, Inclusion, Abensense, Acceptance. Validates Associated

Implementing Validations in Rails

Implementing validations in Rails is easy. The first step is to define the validator in the model. An example of that would be using the Presence built-in validator on a User model to make sure that when created it has both a Username and Password.

class User < ApplicationRecord
  validates :username, presence: true, uniqueness: true
  validates :password, presence: true
end

When the user tries to save the new record, Rails will automatically run the validation defined in the model and prevent the record from being saved if any of the validations fail.

It also returns an error message as well that can be returned on the client side for users to know what they did wrong and you can customize as well per validation

class User < ApplicationRecord
  validates :username, presence: { message: "Username can't be blank" }, uniqueness: { message: "Username has already been taken" }
  validates :password, presence: { message: "Password can't be blank" }
end

Best Practices for Validations

Data consistency: Validations are important for assuring that data in the database is consistent and reliable. This will help prevent any issues from arising.

Keep it simple: Validations should be simple and easy to understand so that developers can quickly determine what they are checking for and why.

In conclusion this is just scratching the surface of using validations in rails and how it can protect your database from bad data!

Relationship Goals

kleach12 — Thu, 25 Aug 2022 01:42:00 +0000

Learning Ruby and how to communicate with the databases can feel like a handful. Not only did you have to learn a whole language and its concept but you also needed to learn SQL and its queries to interact with a database. This can feel overwhelming at first as it is a lot of information that is required but luckily we can thank Active Records for making our lives easier. Active records give us the ability to easily interact and perform queries on these databases. Instead of having to write out a several-sentence query, it's as easy as saying create this or destroy that. Not only does it allow us to perform queries but it also gives us the ability to create associations between tables. These associations allow for our tables to be linked together whether it is by a one-to-many relationship or a many-to-many relationship. These relationships give us the ability to link said tables and perform methods and gather information from one table to another and are an extremely important concept to understand for a backend developer.

A one-to-many relationship is pretty straightforward and means one thing has several connections. An example of this would be a user on Twitter who has several tweets or another real-life example would be one person who has several groceries. There are an endless amount of real-world examples of a one-to-many relationships. In my project, I decided to create a job tracking application. This application has several jobs and each of these jobs has a type. The one-to-many relationship would be that one type i.e. MANGA could have several jobs linked to it.

class Category < ActiveRecord::Base
  has_many :jobs
end

class Job < ActiveRecord::Base
  belongs_to :category 
end

Now, this, for instance, would not be the only one-to-many relationship and many more could be added. For example, I can create more one-to-many relationships if I were to expand the application and allow for it to have several users who could sign in and track their jobs. This would be a better example to show the importance of one-to-many relationships and active record associations. It is important that when a user logs in they are only able to see their jobs, as there would be no reason for them to see others’ jobs. So when a user is created it is important that the user is given a unique ID and that ID from then on is linked to every job they create. There are several methods that can be created to interact with a one-to-many relationship.

A many-to-many relationship is two databases that are linked to a third database. For example, if there is an application that rates books and each book has reviews and for that review, there is a user. There we can see that there are two one-to-many relationships. The first is that each book could have several reviews and each user could write several reviews. But what would the relationship between the users and the book be? That is your many to many relationships, books can have several users and users can have several books. In my project, there was no opportunity for a many-to-many relationship as I did not expand that far but I do believe there is a possibility for one. To implement a many-to-many relationship we would look at the users who are creating the jobs and the types of jobs they are creating. For every user, there are several job types that they can choose from and vice versa for job types and users.

class User < ActiveRecord::Base
  has_many :jobs

end

class User < ActiveRecord::Base
  has_many :jobs

end

class Job < ActiveRecord::Base
  belongs_to :user 
  belongs_to :category 

end

These relationships are not the only in relational databases but they are the most common. Once you grasp the concept of relational databases and how they can interact with each other it makes working with your database easier.

Hooked: useState()

kleach12 — Wed, 11 May 2022 04:20:04 +0000

On my first project using JavaScript, I tried to create a button that had dual functionality. On the first click, this button would return a form and the second click would hide the form. After several hours of research and speaking with others, I ultimately determined there was no way to have my button do this and a second button would be required to hide the form. This was frustrating as I was sure there had to be a way to create this functionality.

A few weeks into learning React we were introduced to hooks and the first hook we learned was useState(). UseState, "is a Hook that lets you add React state to function components", and an example of how you would use this would be for dual button functionality.

For example, take a look at the button that I created using strictly JavaScript

gameButton.addEventListener('click', createGameForm)
  function createGameForm(e){
    addGameForm.innerHTML = `
      <ul>
      <form id = 'gameform'>
        ...
      <button id = 'back_btn'> Hide </button>
      </ul>` 
      const gameform = document.querySelector('#gameform')
      gameform.addEventListener('submit', (e) => {
        e.preventDefault() 
        let game = {
          ...
          }
          renderGame(game)
          createAGame(game)
          hideGame()
        })
        const backButton = document.querySelector('#back_btn')
        backButton.addEventListener('click', hideGame)
  }

If we were to introduce React and a hook to this code it would clean it up but also add the dual functionality.

import react, {useState} from react

function formButton(){

return(
<div>
</div>

)

The first step in breaking down the original code would be importing react and useState as well as breaking it down into a component.

import react, {useState} from react

function formButton(){

const [setButtonActive, isSetButtonActive] = useState(false)

const gameForm = (
<div>
   <form id = 'gameform'>
     ...
   </form id = gameform>
</div>

return(
<div>
</div>
)

Next, to get rid of the hide button useState must be implemented by adding a destructured variable const [setButtonActive, isSetButtonActive] = useState(false) the first value is the state variable while the second is a function that changes the state. In this case, we will set the state to false, but there are several other things that state can be set to as well like strings, integers, and arrays.

import react, {useState} from react

function formButton(){

const [setButtonActive, isSetButtonActive] = useState(false)

const gameForm = (
<div>
   <form id = 'gameform'>
     ...
   </form id = gameform>
</div>
function handleClick(){
setButtonActive((setButtonActive) => !isSetButtonActive)
}

const showForm = setButtonActive ? {gameForm} : null;

return(
<div>
 <button onClick = {handleClick}> Click Me </Button>
 {showForm}
</div>
)

We will then set up the final steps which would be creating a function that will be linked to the button onClick event that changes the state from true to false. We finally follow that with a ternary condition const showForm = setButtonActive ? {gameForm} : null; which will toggle between the form and null, which will show nothing. UseState was exactly the answer I was looking for when originally creating my form button. This is possibly the simplest way to use useState and there are many more advanced ways that it can be used.

The Card Flip

kleach12 — Thu, 10 Mar 2022 02:21:47 +0000

I recently just finished my first project, which is a simple video-game library with a quick and easy rating system. This site allows for users to either add their own recently played games to the library and receive feedback from others. If they do not feel like participating in the addition of a game they can always use the application to see what is the most popular game
and the general consensus around this game.

While creating this web application, I found myself dealing with a majority innerHTML and scope. This was due to the function that I wanted for the front of the game cards. I wanted the front of the game cards to only show the image that was added with a button. This button then flips the card allowing for the the rest of the information of the card to show.

Getting the card to this format did take a lot of work and getting familiar with how innerHTML works within the scope. This ultimately came down to creating one function with 2 more functions nested within.renderGame(game),function backCard() and function createCardButton()

The renderGame(game) function is the main function that allows for my code to take in the information and post it to the JSON an then allowing for the cards to render on the DOM.

function renderGame(game){
    let frontGameCard = document.createElement('div')
    const frontHTML = `
      <div class = "container">
      <img class = "gamePic" src = '${game.imgurl}'/>
      <button id = "btn_${game.id}" class ='btn'> ${game.name} </button>
      </div >`
      frontGameCard.className = 'front_card'
      frontGameCard.id = `card_${game.id}`
      frontGameCard.innerHTML = frontHTML

        contClass.appendChild(frontGameCard)

This inforamtion is gathered from an earlier function that calls on render game. This information then is taken and added to our createCardButton(). This function allows for each card to have its own function button that allows for users to click on each card. The main issue that I ran into here was that if the cards had all the same ID with a .document.querySelector(#x) only the first button would have functionality, leaving the rest useless. To bypass this issue I had to set the ID of the cards to btn_${game.id}. This gave each card their own unique ID allowing for each button to work separately.

function backCard(){
    frontGameCard.innerHTML = 
      `<div class = "container">
      <div class = 'column'>
      <h2> ${game.name} </h2>
      <p> ${game.description} </p>
      <div id = 'sys_price' class = 'grid'>
      <p> System </p>
      <p> Price </p>
      <p> ${game.systems}</p>
      <p> $${game.price}</p>
      </div>
      <div class = 'grid'>
      <p> <span id = 'num-of-must'> ${game.must_play} </span></p> 
      <p> <span id = 'num-of-play'> ${game.play} </span></p>
      <p> <span id = 'num-of-return'> ${game.return} </span></p> 
      <button class = 'Must_Button'> Must Play </button> 
      <button class = 'Play_Button'> Play </button> 
      <button class = 'Return_Button'> Return </button>
      </div>
      </div>
      <button class = back_btn> Back </button>
      </div">`

This then led me to my second nested function function backCard() which when the button on X's card was clicked it would replace the image of the card with rest of the information. This is where I dealt with a majority of the scope issues. At first I tried creating the function outside of the renderGame(game) function but quickly learned that in order for this function to use any of the information required to be built, it had to be inside of renderGame(game). This function responds to the click cardButton.addEventListener('click', backCard)} changing the innerHTML from the function scope of renderGame(game). The final capability of my cards that was required so the application could keep its aesthetic was a back button. This allowed for the user to flip that card back over and stay on their search for their next game.