DEV Community: logan-lampton

What is useContext?

logan-lampton — Wed, 16 Nov 2022 18:00:49 +0000

Just what is useContext good for and how do we use it? Luckily it's simple in React!

useContext is a great tool to manage state globally in JavaScript. It is used to pass state between components without having to "prop drill" or pass information between a bunch of components as props, which can quickly get more confusing than it needs to be.

A simple example is if we want to keep state for a user across components, which we'll take a look at now.

In this example, we'll presume you are in the App.js file, but you can use useContext wherever you'd like! You can import useContext from React, declare your useContext, export it all in one simple line:

export const UserContext = React.createContext()

From here you would declare the state that you'll be passing on, which in our example is you, the cool reader:

  const [currentUser, setCurrentUser] = useState("Cool Reader")

Within the return of the function you'll use the useContext to wrap your components. A simple solution would end up looking like:

function App() {
  const [user, setUser] = useState("Cool Reader");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello, ${user}!`}</h1>
      <Example Component />
    </UserContext.Provider>
  );
}

Our UserContext.Provider could easily be wrapped around many components and save us a lot of time with props. I recommend giving it a go Cool Reader!

For more info, please check out:
ReactJS.org
W3 Schools

Ruby Active Record Validations Intro

logan-lampton — Tue, 25 Oct 2022 19:39:58 +0000

It's a powerful feeling once we have our database up and running and able to take the data provided by our users and persistently save that data on the backend. But how can we make sure that the user provides the data that we need and only in a format that makes sense for comparing with the rest of the information in our database? For example, we want to make sure that users provide a username and password when signing up for an account on our website and can't just leave the password input blank. That's where validations come in!

First let's take a look at where validations are located in Ruby active record. You'll be adding any validations you create to the app/models file.

In our example, we are creating a very important database for dogs wearing hats, so we will add our validations to the file: app/models/hatdogs which is currently blank:

class Hatdog < ApplicationRecord
end

Behold a Hatdog! (Photo by Meghan Hessler on Unsplash)

Before we add our validations, we'll want to take a look at what kind of data we are looking for. This can be found in our schema or Hatdog migration.

class CreateHatdogs < ActiveRecord::Migration[7.0]
  def change
    create_table :hatdogs do |t|
      t.string :name
      t.integer :age
      t.string :image
      t.string :catchphrase

      t.timestamps
    end
  end
end

We want a name, age, image and catchphrase for each object. All of these will have the type of string, except for age. For each validation, we will use the "validates" keyword.

Presence
If we want to make sure that when users go to add a new Hatdog on the front-end, that they provide a name, age and image, we can easily do so with the presence: true validation, like so.

class Hatdog < ApplicationRecord

    validates :name, presence: true
    validates :age, presence: true
    validates :image, presence: true

end

Numericality
We'd like for users to only use integers for age, so that we stop getting things like "Old!" submitted to our database. We can use numericality for that. Let's add it to our current validation for :age.

class Hatdog < ApplicationRecord

    validates :name, presence: true
    validates :age, presence: true, numericality: { only_integer: true }
    validates :image, presence: true

end

Definitely not too old! (Photo by Manda Hansen on Unsplash)

greater_than_or_equal_to and less_than_or_equal_to
Let's add some more validations to age, so that we don't get crazy numbers like -1 and 1000.

class Hatdog < ApplicationRecord

    validates :name, presence: true
    validates :age, presence: true, numericality: { only_integer: true, greater_than_or_equal_to: 0, less_than_or_equal_to: 25 }
    validates :image, presence: true

end

Uniqueness
Let's say we want each picture to be unique to prove we have different Hatdogs. (We're not going down the rabbit hole of hoping that each dog name is completely unique!) To make sure the user input is unique, we'll use uniqueness.

class Hatdog < ApplicationRecord

    validates :name, presence: true
    validates :age, presence: true, numericality: { only_integer: true, greater_than_or_equal_to: 0, less_than_or_equal_to: 25 }
    validates :image, presence: true, uniqueness: true

end

Length

Let's add a validation for the catchphrase! We don't want users submitting an essay, so let's limit how long the catchphrase can be to a maximum of 150 characters.

class Hatdog < ApplicationRecord

    validates :name, presence: true
    validates :age, presence: true, numericality: { only_integer: true, greater_than_or_equal_to: 0, less_than_or_equal_to: 25 }
    validates :image, presence: true, uniqueness: true
    validates :catchphrase, length: { maximum: 150 }

end

Catchphrase: "I let the dogs out" (Photo by Jamie Street on Unsplash)

This is just the beginning of all the helpful ways that validations can help you keep your data clean and useful. For more information to help with your continued development, please take a look at the official Ruby documentation. It's great (if a little lacking in dog images) read: https://guides.rubyonrails.org/active_record_validations.html

Happy coding!

Ruby, Active Record, and Tables

logan-lampton — Tue, 04 Oct 2022 19:25:15 +0000

Tables are great for sitting at and even better for organizing your data. Let's take a look at how to do one of the first tasks you'll want to do with Ruby, creating tables. We'll be backend experts in no time!

A great way to create your initial tables/database in Ruby is Active Record, a Ruby gem creates a link between Ruby and databases. You can read more about Active Record basics on its official guide if you'd like, but no need to right now for this guide.

Active Record is a Ruby gem, so an entire library of code that you can install by using this command in the terminal of your ruby project location: gem install activerecord Alongside Active Record, we'll be using a tool command called 'rake' which you can install using the console command gem install rake

One last bit of information up front: We'll start to make our database using something called migrations. A migration creates a schema Ruby file, that we can view that contains all of our data in our database and creates a new 'version' of the database with each migration we make. Active Record will create a db/schema.rb file after we create our first migration and update it to match the up-to-date structure of your database, ensuring that it is all set up correctly.

Now comes the fun part! Let's make a database table for cats, since I found a free picture of a cat on a table for this article.

Reminder of a cat on a table

To start, within our Ruby project we'll run console commands to begin our two migrations. The command to create a migration is:

bundle exec rake db:create_migration NAME=create_insertnames

So in our case, it would be

bundle exec rake db:create_migration NAME=create_cats

This will create a new Ruby Class file in our project. You'll notice that they have a long string of numbers that signify when the migration was created (which is useful for version control), followed by _create_cats. Awesome!

Within the file note how the class inherits from Active Migration.

class CreateCats < ActiveRecord::Migration[6.1]

This allows us to run commands without having to code all of them within each file. It's a huge timesaver.

Within our CreateCats class file, we'll want to create the framework for our table, which we can do, like so:

class CreateCats < ActiveRecord::Migration[6.1]
  def change
    create_table :cats do |t|
      t.string :name
      t.string :color
      t.integer :age
      t.string :type_of_table
    end
  end
end

This table would have 4 columns, one for the each cat's name, color, age and the type of table that they are on. Note how we label what kind of data will be in each cell of the table. Text is represented as string, with numbers represented as an integer. There are some other types you can research, but these are your two most common types. Note: be sure to add a new 'end' after you create your table!

Frank, a cat on a table

Now that you have the framework for your table, you can migrate it to update your schema with the command bundle exec rake db:migrate

Your schema will now update to reflect your current table code and will continue to update itself to include any additional classes that you migrate, so you can create more tables and really get a database going!

To view the table that we are creating, you can use the Visual Studio Code (VS Code) extension SQLite Explorer. This can be found in the extensions search within VS Code and once installed you can start it by clicking on your schema, then using the key command ctrl+shift+p. This will bring down a dropdown menu that will allow you to click on your file and open a new SQLite Explorer dropdown on the lower left-hand of your VS Code screen that you can click to find and open your table.

If you look at your cats table, you will see that it exits, but is blank:

Let's use the terminal to create some cats! To create Cat class objects, let's make one more Ruby file in the project called Cat.rb. It will also inherit ActiveRecord::Base like so:

class Cat < ActiveRecord::Base
end

Daphne, proud cat on a table

Next, let's make the Cat objects! Type rake console in your terminal which opens a pry console where you can edit and test your Ruby code from within the terminal.

Once you're in the pry session, create some new cat objects with the create method inherited from Active Record. For example: Cat.create(name:"Frank", color: "black and white", age: 8, type_of_table: "oak")

After creating a few more cats we will end up with a table we can view in SQLite Explorer in VS Code that looks like this:

Boom! We have a table of cats on tables! Keep coding and who knows what kinds of exciting databases full of cats (or other stuff, I guess, if you're into that) you can create. Good luck coding; I'm excited to see what you make.

Igor, a cat jazzed to be a table

Filtering in React

logan-lampton — Tue, 13 Sep 2022 23:27:37 +0000

React is a fantastic way to make your JavaScript code more reactive to the inputs from the user, and one of the best ways to dynamically re-render your page to help your users is to add a search bar that can filter the data on your webpage.

Watch out, Google, whoever reads this will be able to make a super simple search bar (I hope)!

Let's look at a simple example of a filter now. Say your very important bank client needs you to filter their database array of Dungeons & Dragons classes (a very realistic example and not just something that I was working on).

As we can see, we have a search bar and an array of images with names. We'll want to be able to type into the search bar and have the array objects update as we type to match the text as we type it.

First, we'll need to set state in React. To do so, we'll need to import useState at the top of the page, like so:

You might also note that I imported useEffect, as well, which was part of the fetch() GET Request that I used to help populate the page with my array of data. We'll get to that in just a second! First, we'll want to use our useState, to declare the state that the page will begin at when it loads and allow us to re-render the page as the user interacts with it.

All of the rest of our code is located in one function, which we'll just call App(). Within this function is we set the state for the array that we render on the page and the filtered version of the array.

Note how both useStates are set to an empty array useState([]), as we want the page to begin as an array.

We then call our fetch() GET request to get the information from the array. The final lines of the GET request assign the data to our state setting functions for the full array and our filtered array.

For bonus points, you can note how we used useEffect() to prevent our fetch() GET request from making infinite requests. We won't dwell on that here, just know that you'll be fine if you follow that syntax.

Now that we have the array data, we can build the filter function!

We'll write an if, else statement, where the first part is setting what the default of the page looks like. So if the search bar has an empty string "" (like when the page loads) we will return the full array by setting our filter state to the full array without any filter: SetFilter(classes)

If it's not an empty string, then we will run the array through a filter that will look at that the user typed (our searchTerm variable).

But there are some problems with filter()! Filter only matches exact strings, so it won't match "Stupid" with "stupid", which is stupid. It also won't match parts of strings, like "You've gotta be kidding me" with "You've gotta be kidding m"

To get around this, we add in the methods .toLowerCase() to make all the text typed lowercase, getting around the need to match cases. We also use .includes() so that what the user types also pulls up any partial matches in strings in the items in our array.

(Please also note that in the filter() method we can't call the singular version of classes, classes, as that is a special word in JavaScript and must be avoided! I switched to "c", and now you can avoid my mistakes. My many mistakes.)

If we want to search keys from our array besides our classes.name key, we can add in an "or" statement with || and add in a second key of classes, such as classes.role, like so and have a second set of strings that the user can search by. Nice!

Make sure to pass our filter variable and function as props to our component to hold the array and into a component where we will handle the user interacting with the filter bar. We're getting close to this working!

In the the Filter prop, we'll write the logic for capturing the strings that the user writes in the search bar and to make it reflect re-render the DOM as the user types the string.

First, we'll set state to an empty string, as that is how the search bar will begin. We then write a function that sets the state of the search bar string to what the user writes and the state of the filtered array function to be the same.

Finally, we can set the return of the Filter function to include an onChange event that is equal to the function we just set, so that it (and our filter!) fire off as the user types.

Viola! We can now search to our hearts content! "Bar" returns "Barbarian" and "Bard"! "Support" returns "Artificer" and "Bard".

Filter to your hearts content for all the very important TTRPG-related activities in your life!

JavaScript GET Requests - Unlocking Using APIs

logan-lampton — Tue, 23 Aug 2022 14:52:52 +0000

If you're a beginner to software engineering, like myself, it's very exciting to unlock all the potential that comes with accessing APIs. APIs (short for Application Programming Interface) allow two applications to talk to each other, letting us input data from an API into our websites. There's APIs for all kinds of fun information, including Pokémon, Star Wars, even the Real Housewives of New Jersey. (All these topics are important to our work of course.) But how do we access them?

Great question, me! To access APIs, we'll use a method in JavaScript called fetch().

Mean Girls was wrong. Fetch is a thing.

Fetch() fetches a resource from the API we ask it to and returns a promise which is fulfilled once the response is available. I promise you don't have to worry too much about what a promise is to do a GET fetch() request, so long as the method is called correctly. Just know that you can learn more about promises if you want to look at the other three ways that you can use fetch(). The simplest way to use fetch() is GET, which gets the data from an API and we will examine now.

But wait! To fetch() you need to use terminal to use a command to allow our computer to communicate with a server using the command:
json-server --watch db.json

JSON is a common data-interchange format used for APIs. For now, all we need to know is how to take that JSON data and return it in JavaScript, so that we can use it to populate API data in our webpages.

Now that our computer can communicate with an API, we can use the a fetch() request with GET to get the information on the API. To fetch() use the following syntax:

You might notice that the fetch() code didn't actually include the word, "GET" that's because a fetch() request that doesn't ask for a different method will automatically do a GET request.

Our particular use of the fetch() method would fetch the data from the API at the URL we passed through the method. In this case, it would fetch all of the memes from a meme API. (Something all employers, no doubt use.) Our code then would convert the response (all the API data) from JSON format to JavaScript, using the JSON() method.

The a sample of the JSON we are selecting would look like the following:

As you can see it has keys and values to provide us with details such as the name and url to images for memes. Now that we have used a GET request via fetch() we can add that data to our website to spice it up. We can populate our website with the values (names and images) from the API easily by selecting elements in our HTML to add the API details to by using methods such as document.querySelector() and changing the .innerText and .src of the elements of our HTML using Javascript. Like so:

With some simple coding and a GET request we can very quickly add a lot of interesting data to our website, bringing it from this husk:

To something full of information (and in our case memes!) that we can display however we would like:

So look for free APIs today and use GET with fetch() to start building out websites full of information quickly! Now if you'll excuse me, I'm off to build that Pokémon, Star Wars, and Real Housewives of New Jersey website...