DEV Community: Matthew Kohn

Missing GitHub Contributions? Double Check Configurations.

Matthew Kohn — Mon, 07 Nov 2022 01:01:26 +0000

After recently graduating from Flatiron School's Software Engineering program, I noticed the contributions graph in my GitHub profile was looking deceivingly weak.

This was incredibly frustrating for me, because I spent a lot of time over the last year on various projects & labs that this graph didn't seem to account for.

Every green dot here was either a contribution from a new repo, or a cloned repo from a lab. No other commit I made on any of my projects showed up here.

I pored over StackOverflow articles and the GitHub Guides looking for an answer. I found one article that I found useful titled "Why are my contributions not showing up on my profile?", which explains what counts as a contribution:

Commits will appear on your contributions graph if they meet all of the following conditions:

The email address used for the commits is associated with your account on GitHub.com.

The commits were made in a standalone repository, not a fork.

The commits were made:

In the repository's default branch

In the gh-pages branch (for repositories with project sites)

This is great, but I needed help troubleshooting my situation.

That's when I called up the big guns, @stevewhitmore. He was nice enough to screenshare over a zoom call to troubleshoot why my commits weren't showing up as contributions. It was helpful talking out the problem and getting a second set of eyes on it.

After trying out a few things to eliminate what didn't work, such as changing my SSH key or testing commits from different branches in both of our accounts, we found the solution.

Photo by Riccardo Annandale on Unsplash

The Solution

It turns out, I had two different email addresses set up locally and in my GitHub account.

In my terminal, I checked my locally configured email address with git config --global user.email. This revealed my locally configured email was set to my hotmail account, while my GitHub profile's email was set to my gmail account.

Rookie mistake, easy to fix.

1. Configure GitHub Email Locally

First, I made sure to set up my local machine's GitHub configured email to the same email address in my GitHub profile, my gmail account. In my terminal, I used:

git config --global user.email ko.....@gmail.com

I tested out to see if I could push up a local commit by adding a blank line to a README.md I recently pushed, then committing it.

git add README.md
git commit -m "test commit"
git push

In my GitHub account, I confirmed this commit was received, and a green contribution box showed up for this commit.

2. Add Email Used in Past Commits to GitHub Settings

Next, I went into my GitHub Settings.

On the left side of the settings page, under 'Access', click on the 'Emails' tab. This is where I confirmed my gmail account was my primary email address.

I then added the hotmail account I was using locally up until now as an additional email address.

Before:

After:

Once I verified my additional email address by following the link sent by GitHub, I navigated back to my GitHub profile contributions page.

Now, all contributions I made (past commits, new repos, and forks) over the past year show up on my contributions graph.

🎉

What a relief! This is a much better representation of my engagement with coding during school while working part-time.

In Closing,

This was a solution to my specific problem of contributions not appearing in my GitHub profile.

You may or may not have the same problem, if you did I hope this helps. If not, keep digging for the solution, and don't be afraid ask for help if you get stuck. I believe in you.

Huge shoutout to @stevewhitmore for your help. Thank you, I might have never figured it out without you.

Happy coding!

Keeping track of React state with useContext()

Matthew Kohn — Thu, 06 Oct 2022 02:01:34 +0000

In my time learning React at Flatiron School, I came to really like the useContext hook. I remember at first, though, the concept of context was a little confusing.

I'm excited to share what I've learned, and I hope it helps you.

What is useContext?
Example for setting up useContext
- Make a context file
- Wrap Provider around highest level component
- Using useContext
Conclusion

This article walks through how to set up and use a Context component in a React application, using functional component syntax. This article assumes you know the basics of React, and moves past some concepts quickly. Note the links abound for elaboration, if you'd like to dig deeper into React Context.

It's important to understand how hooks, props & state works with functional components before you dive into using context to control global state.

A couple brief definitions to warm us up:

Hooks: functions that let you “hook into” React state and lifecycle features from function components.
Props: arbitrary properties that are passed down from parent to child components.
State: the structure that keeps track of how data changes over time.

What is useContext()?

(back to top)

The useContext hook is a way to manage global state without needing to pass state as props. When your component tree starts to grow, you might notice certain state that you need among sibling components, like a student's id or items in a cart.

One solution might be to move that state to the nearest parent component, but that might be all the way up to the App component, and you might have to prop-drill to manage that state.

A better solution might be to re-compose the structure of your component tree and pass state as props, but that might not be a reasonable solution depending on the complexity of your app.

This is where useContext() might come in handy. By keeping track of state in context & passing that context to the components can make your life a whole lot easier.

Example for setting up useContext()

(back to top)
(skip to see result)

If you'd like to follow along, make sure you have a text editor and command line prompt handy.

Create a new React App called whatever you want, like "student-library".

npx create-react-app student-library
cd student-library
npm start

1. Make a context file

(back to top)

Let's say we're trying to keep track of & update data about hypothetical students in our app.

Let's start writing code. Here's how I like to structure my files in my React App.

i. From your app's '/src', folder, create a folder called '/context', then from there make a file called "StudentContext.jsx".

ii. At the top of the file, import React, and start a function component called StudentProvider.

import React from "react";

function StudentProvider() {}

iii. Now, use the createContext() function built into React to create a Context object.
Outside of/above the function declaration, make StudentContext:

const StudentContext = React.createContext();

As React Docs say,

Every Context Object comes with a Provider React component that allows consuming components to subscribe to context changes.

We will use this Provider in the next steps to give other components access to our context's state.

iv. Return StudentContext.Provider inside the function component, wrapped around the special children props.

function StudentProvider({ children }) {
  return (
    <StudentContext.Provider>
      { children }
    </StudentContext.Provider>
  )
}

v. At the end of the file, export StudentContext and StudentProvider.

export { StudentContext, StudentProvider }

vi. Now, set up the student's state. Import the useState hook:

import React, { useState } from "react";

vii. Make student state inside the function before the return statement, with an initial value of null.

const [student, setStudent] = useState(null);

viii. Save the state & its setter in a variable, we'll call value.

const value = { student, setStudent };

ix. Finally, pass this value as props in the StudentContext.Provider.

<StudentContext.Provider value={ value }>

Here's the complete file for `StudentContext.jsx`:

(back to beginning of example)

// 'StudentContext.jsx'
-----
import React, { useState } from 'react';
const StudentContext = React.createContext();

function StudentProvider({ children }) {
  const [student, setStudent] = useState(null);
  const value = { student, setStudent };
  // console.log('student from StudentContext: ', student)
  return (
    <StudentContext.Provider value={ value }>
      { children }
    </StudentContext.Provider>
  )
}

export { StudentContext, StudentProvider }

2. Wrap Provider around highest level component

(back to top)

According to React Docs,

When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree.

Remember, the Provider is “providing” access to the Context component (and the state or other variables it may hold) anywhere you need to invoke it.

Question: Which components will you need to set or access student and setStudent in your app?

Find the top-most parent component they all have in common. This is where we will use our StudentProvider.

Since our context is helping us with global state, and for the sake of this example, we're moving all the way up to index.js in the '/src' folder. You can place this anywhere that works for your app, just make sure it's "above" anywhere you'll need it in the component hierarchy.

Import StudentProvider and wrap it around the root component, which in this case is <App/>.

// 'index.js'
-----
import React from 'react';
import ReactDOM from 'react-dom/client';
import { StudentProvider } from './context/StudentContext';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <StudentProvider>
    <App />
  </StudentProvider>
);

Now, any child of the <App /> component is able to import StudentContext if they need to.

3. Using useContext()

(back to top)

Now you are able to access and set student state anywhere in your app.

Let's say you are using student data stored on an API. Make a new file under '/src/components/' called Student.jsx.

i. Start by importing React, useContext and StudentContext.

import React, { useContext } from 'react';
import { StudentContext } from '../context/StudentContext';

ii. Destructure values inside the component function by passing StudentContext to the useContext() hook.

function Student () => {
  const { student, setStudent } = useContext(StudentContext);
  return (<></>)
}

From here, you can fetch data from an API and store it with setStudent inside a useEffect hook, or create a form a user can fill out and save a form data object with setStudent.

Once you set your state with the Context Component you made, you can use that data however you want, passing the student variable to this or any other component in your app with the useContext hook.

You could use it to display a name, provide authorization to view hidden components, or store a schedule, shopping cart, or profile page, to name a few examples. It's really up to you from here what you want to do.

Conclusion

(back to top)

Using Context is easy & convenient once you know how it's set up and how it's used. You can keep track of errors, themes, authorization codes, or really anything you might need to keep track of global state.

Keep in mind, anytime you update Context State, the component using that state will re-render. If this isn’t the behavior you want, maybe a useMemo or useRef hook might be a better choice.

Please note: It is advised to use useContext sparingly because of performance issues when your app scales. Only use it if you need it.

Some React devs think that useContext is bad, for reasons worth considering. I like using it for themes & authentication in smaller dynamic apps, like my personal projects.

In the end, it's up to you to decide how to structure your app and make it respond to student interactions how you see fit. This is just one of many ways to keep track of state in a dynamic React application.

I hope this helps, and I wish you well. Happy coding!

Cookies & Sessions in Rails

Matthew Kohn — Sun, 31 Jul 2022 00:34:52 +0000

SJ . on Unsplash
"/>

What are Cookies & Sessions in Rails?

I've learned a lot about cookies & sessions while creating my Phase 4 React/Rails project at Flatiron School, and I'm excited to share some of it with you.

This article aims to explain what cookies & sessions are in regard to the request/response cycle, what they help us do, and how to configure a Rails API so you can use them in your application. I've included many links to resources throughout this reading if there are any terms you'd like to learn more about.

What are Cookies?
What are Sessions?
How to start building a Rails API that uses cookies & sessions
- File Structure
- Middleware
- Include Cookies in ApplicationController
Conclusion and Next Steps

Adding State to an API Request

HTTP is a stateless protocol. HTTP servers receive and process requests, return data, then forgets about it.
Cookies help us (the client) make stateful HTTP requests by letting the server remember us with the information it stores.

What are cookies?

(back to top)

Cookies are collections of data, usually key:value pairs, that are created by a web server when someone asks for access to their website. When the server computes what it needs to and sends a response, it also sends cookies in HTTP headers to the client, and are stored by the user's browser on the hard drive.

Cookies are:

Small: no more than 4kb
Not complex: a collection of name:value pairs, not programs or models
Domain-specific: other websites have no way of reading them
Temporary by nature: they can expire, or get updated frequently.

Cookies allow a user to persist data across requests, which is used for a variety of UI needs. Cookies keep us on the same page, in more ways than one.

Examples of what cookies might keep track of are:

An expiration date/time for automatic logout, requiring a new login, creating a new session & new set of cookies
Pages within a site you've visited
Letting the server know if you're a first-time user
Your flight itinerary
Previously inputted contact information
Your zip code for local weather information
Remembering what's in your shopping cart so you can sleep on it...

Let's say a user goes to a website they've been to before, like the one we're on right now.

When you type https://dev.to/ into your browser and hit enter, your browser begins to send a request to the Web server for the page. First, the browser looks on your hard drive for a cookie file that dev.to may have set. If it finds a cookie, it will send the encrypted cookie data along with the URL to dev.to's server.
The server for dev.to will decrypt those cookies (if any), and send back a response to the client with program files that may apply uniquely to that user. For example, my cookies allow me to view https://dev.to/ in dark mode by default when I go to their website.

If you'd like to take a peek at your own cookies, pull up your browser's Dev tools (right-click then -> inspect), choose the Application tab, and check out the cookies you have for the website you're on.

You might see a long string of random characters, numbers, and symbols that you won't be able to read, and if you try to change them (not recommended), the website's server won't accept them anymore. You won't break anything, but you might have to reload your screen.

Here's an example of what a random cookie from my browser looks right right now:

# Cookie name:value
__cf_bm: x1MTF2K9gphl51GldO4Dq1TxBY5CXFO0YRXs9_zQjTc-1659208596-0-AfIDBDqPcHBuY2y1l3pO3jQaoORPrRrlw5NJP0flJJdPyOZQvKWS8loytli0XA0DNGuUE+jdyvcOGF8o4R9+23Bf1dM8SHGkspE8Sfsmeq3G

This is pretty hard to read because it's been encrypted & signed by Rails. By the time anyone (or thing) thinks to figure out what it means, the server won't remember what it means. Let's find out why that is.

Thalia Ruiz on Unsplash
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyziethtykjevzrrrhdk.png)
"/>

What are sessions?

(back to top)

So how are cookies secure? I know one solution: Rails to the rescue!

Instead of sending cookies in plain text, we can use Rails to sign a special cookie only it knows how to unscramble known as a session using the session method. Session can store any simple Ruby object, and behaves like a hash:

session[:user_id]

Application information can be securely stored in the user's browser because sessions encrypts and signs those cookies.

A Rails session stores a unique, cryptographically signed & encrypted ID (not the actual session_id, for security reasons) on a small block of data. The Rails app responsible can decrypt and read the contents of that cookie if it's sent back.
Sessions should be used to store all session data on the cookie that's sent to the user along with all of the other files their browser needs to run the app.
When the user interacts with the app, the session will last as long as they're logged in, allowing them to do whatever they're authorized to do.
When they log out, the session "ends" and their cookie data is obsolete. Cookies live on your computer until you delete them.
Sessions shouldn't be used to store highly confidential information, complex objects, or large amounts of data.

How you decide to use sessions to control your app's behavior is up to you.

Nathan Dumlao on Unsplash
"/>

How to start building a Rails API with Postgres that uses cookies & sessions

(back to top)

Setup

If you'd like to try this out yourself, get a code editor like VS Code, and make sure you have the following installed:

Create

Once those have been installed, create a new Rails API from your command line:

$ rails new example-app --api --database=postgresql

You can name your app anything you want.
The --api flag means you're creating a Rails app with no View or ERB, just the modules to build a relational database using the M and the C in MVC.
To use a test-suite like Rspec, add a -T flag to the end if you want.

Explore

Now, navigate to your new app

cd example-app

and open the app in your code editor to begin the fun part with

code .

File Structure

(back to top)

The highlights of your file structure are:

./app, where the core functionality of the app lives, such as Models, Controllers, Views, and Serializers.
./bin has built-in Rails tasks you probably won't need to worry about starting out.
./config manages settings that control environment settings, modules that need to load on initialization, database settings, app routes, etc.
./db holds migrations, seed data and the schema for your database.
./lib holds custom Rake tasks.
./log holds logs for debugging purposes.
Gemfile contains all gems included with the application. This is where you can add your own gems.
Gemfile.lock shouldn't be edited. This is created when you run bundle install and contains every Gem's dependencies & associated versions. If you need to, you can delete this file and run bundle install again to make sure you have the right gems installed according to your Gemfile.
README.md documents the details of the application, and can (and should) be as thorough as you want.

Middleware

(back to top)

Unfortunately, cookie middleware isn't automatically included in our Rails API. Without them, no cookies. Before we hop into sessions & cookies, we need to configure our rails application to use them.

Open ./config/application.rb and add a couple pieces of middleware. Here's what it should look like:

And here's what you need to add:

# config/application.rb
module MyApp
  class Application < Rails::Application
    config.load_defaults 6.1
    config.api_only = true

    # Must add these lines!
    config.middleware.use ActionDispatch::Cookies
    config.middleware.use ActionDispatch::Session::CookieStore

    # Use SameSite=Strict for all cookies to help protect against CSRF
    config.action_dispatch.cookies_same_site_protection = :strict
  end
end

config.middleware.use ActionDispatch::Cookies

Lets us use cookies

config.middleware.use ActionDispatch::Session::CookieStore

Gives us access to the methods in Rails' CookieStore

config.action_dispatch.cookies_same_site_protection = :strict

This line adds a little security, only allowing us to accept cookies from applications running on the same domain as ours (like running a Rails & React project from the same domain)

Include Cookies in ApplicationController

(back to top)

Finally, in order to use this we need to configure our most parent controller, ApplicationController, and instruct it to use cookies so the rest of our controllers have access to them. At the top of the file, include it.

# app/controllers/application_controller.rb
class ApplicationController < ActionController::API
  include ActionController::Cookies
  ...
end

Erol Ahmed on Unsplash
"/>

In Conclusion

(back to top)
Nice work! That's it for this step. Now your app can use sessions & cookies.

That was a lot! And there's so much more to learn, but there always is, and you're off to a good start. Take your time practicing, reading the docs, and navigating error messages. It's worth it, I promise.

From here you can run bundle install to install your gems, then rails s to start up your rails server. Then, you'll need to set up your Users and Sessions controllers, and continue to build an app with the "BCrypt" gem for authorization, create associations, models, controllers, serializers, and migrations. There's a lot to do still, but you can do it.

As parting friendly advice, do yourself a favor:

Use a diagram app like drawio or DB Diagram, or a pencil & paper, and plan out your MVP before you code anything else!

While it's not necessary, it's highly recommended to think through the purpose of your api, the table associations and how they will manage the database's data, password management, and what endpoints and routes you want the user to use from the frontend.

Take it from me, it will save you a lot of time if you plan your app from top to bottom before you start coding.

Thank you for reading this far, I hope it helps. If there's anything I missed, please feel free to add it in the comments.

Happy coding!

Ruby Enumerators- Syntax Basics

Matthew Kohn — Fri, 03 Jun 2022 22:22:38 +0000

Ruby is a fun language to learn. It's easy to use, and the syntax is straightforward and more intuitive than other programming languages. Despite this, it's capable of building vastly complex programs.

In Ruby, almost everything is an object. All of these objects can have data and behaviors. Objects in the form of arrays and hashes can be given their own properties and actions, known as methods, that help us manipulate data and give objects the behaviors we want them to have.
Enumerators are one type of method that give us fun and powerful ways to manage our data so we can focus on building cool things.

Understanding Ruby Basics

According to Ruby documentation, an enumerator "provides collection classes with several traversal and searching methods, and with the ability to sort".
In other words, enumerators are methods that "enumerate", or go one-by-one, over every element of a collection, helping us to view, manipulate, or sort arrays and hashes.

Enumerators are chained to an array or hash using dot notation, and take a block of code as an argument that encapsulates what the enumerator is supposed to do with each element. This block is a chunk of code between curly braces {} (for simple, single-line blocks), or between "do" and "end" keywords.
It takes one arbitrary element in the pipes || knows as a block parameter, that represents each element from the array. You can call the value in the pipes anything you want.

For example:

titles = books.collect do |b|
  b[:title]
end

or, for single-line blocks:

titles = books.collect {|b| b[:title]}

If you don't already know, here's a brief summary of what I mean by arrays and hashes:

Arrays are ordered collections of strings, numbers, booleans, or even other arrays or hashes, wrapped in square brackets and separated by commas. Every element in an array is indexed, with the first element starting at index 0, the second element at index 1, and so on.
Hashes are collections of key: value pairs wrapped in curly brackets and separated by commas, where keys are commonly represented with "symbols", and values can be any data type.

Practice For Yourself

If you'd like to follow along with the examples, make sure you have Ruby installed. Since there are several ways to install Ruby, check out the installation guide. Once installed, you can play with Ruby code in your command line prompt by typing irb and press enter.

This brings you to a built-in playground for running Ruby, and your prompt should look something like this:

2.7.4 :001 >

Good to Know Moving Forward

Since the Ruby language was designed to be easy to understand, and is inspired by several other programming languages, many enumerators have aliases that do the exact same thing as each other. For example, "map" and "collect" are functionally equivalent. It doesn't matter which one you use, just be sure to use one or the other to be consistent in your code.

Also note that the "#" symbol before anything in Ruby isn't active code, it's just a comment that will be ignored by your computer.

Our enumerator examples will use this array of hashes I've called "hackers", with each hash containing made-up information we can play with:

hackers = [ 
  { 
    name: "Matt",
    favorite_food: "tacos",
    favorite_language: "Ruby",
    years_coding: 3
  },
  {
    name: "Angie",
    favorite_food: "chocolate",
    favorite_language: "JavaScript",
    years_coding: 10
  },
  {
    name: "Joey",
    favorite_food: "broccoli",
    favorite_language: "Python",
    years_coding: 6
  }
]

Common Array Enumerables

EACH

The .each enumerator allows us to loop through items in an array.
It doesn't return anything and doesn't change the array, but allows us to loop through and act on an array.

names = hackers.each do |h|
  puts h[:name]}
end

# returns to the console:
# Matt
# Angie
# Joey

MAP or COLLECT

The .map aka .collect enumerator allows us to do something to every element of an array or hash.
It loops through and returns a new array based on some sort of condition or test.
Every time it goes through iteration, it replaces the element that was there before with the new element.

uppercased_food = hackers.map do |h|
  h[:favorite_food].upcase
end

# returns ["TACOS", "CHOCOLATE", "BROCCOLI"]

Note that .map/.collect doesn't change the original array, it creates a new one.

FILTER, SELECT, or FIND_ALL

When you want to access every element of an array, check if it matches some criteria, and return a new array of all the values that match.
This won't let you perform any transformation of elements; it will only return the original elements based on whether a truthy or falsy value is returned from the block.

juniors = hackers.filter do |h|
  h[:years_coding] < 8
end

# returns the "Joey" and "Matt" hashes in an array, 
# excluding the "Angie" hash

FIND

.find finds first element that matches a condition.
This works just like FILTER, but only returns the first element that passes the condition or test.

ruby_pro = hackers.find do |h|
  h[:favorite_language] == "Ruby"
end

# returns the "Matt" hash

Note that strings are case-sensitive. If nil was returned for you here, you might have a typo.

SUM

.sum allows us to find the total sum of an element in an array.

total_years = hackers.sum {|h| h[:years_coding]}

# returns 19

SORT

.sort returns a new array where all the elements have been sorted based on some criteria. This will not alter the original array.
Comparing elements in each iteration can be done using the 'Spaceship Operator' <=>, aka the combined comparison operator.

alphabetical = hackers.sort do |hacker1, hacker2|
  hacker1[:name] <=> hacker2[:name]
end

# returns an array in a new order, 
# starting with the "Angie" hash, followed by "Joey", 
# followed by "Matt"

There are many, many more enumerators you can use, but the ones just mentioned will help you in most cases. Be sure to look through Ruby's documentation to learn more, and practice with them on your own to get used to how they work. Always keep in mind what your enumerator will return, and remember these handy tips:

When you want to manipulate elements in an array, use MAP
When you want to query an array, use FIND or FILTER
When you want to read things in an array, use EACH

Thanks for reading. Happy coding!

Control Forms in React

Matthew Kohn — Thu, 03 Mar 2022 21:51:55 +0000

Control Forms in React is a tricky concept to learn, especially if you’re also learning about state, props, and hooks for the first time. This tutorial aims to illustrate how control forms work.

Uncontrolled Forms

An uncontrolled form contains HTML form elements (input, select, etc.) where the user’s input lives in the DOM. With uncontrolled forms, you can “pull” this data from the DOM when the form is submitted, but there’s no way of knowing what the user types as they type without a ton of explicit logic.
There’s nothing wrong with this, it’s just a lot more work for you, the coder. Fortunately for us, there’s a cool way to control the data in our forms.

Control Forms

React gives us the ability to keep track of the user’s input for dynamic use by storing data in something called state. By controlling the value of input fields of a form according to what a user types, this built-in React state is updated with every keystroke or click. A few examples of what this allows us to do might be to:

Enforce input format, such as phone numbers or prices
Conditionally disable buttons until certain fields are filled correctly
Make inputs that seamlessly interact with other components
Handle complex forms with multiple inputs for one piece of data, like an order form or newsletter signup.

React’s useState Hook

Before we get into how to make a control form, it’s important to understand what is meant by “state”. If you don’t already know how this works, I highly recommend reading React’s docs on state and managing state in React’s Beta docs before continuing.

To summarize, State is data that is dynamic in your component. It changes over time as users interact with your application, and instead of being stored in the DOM it lives in React’s internal code. We can access state using the useState hook.

All the state in your application is held in React’s internal code, not in the user’s browser. React has a useState function, or “hook”, that allows us to hook into React’s internal state inside of our function component. We’re going to use the useState hook to control our form.

To change an uncontrolled form into a controlled form, we need to:

Set up state
Make the input values equal to the state variable
Set this state in a callback function in the input’s event listener

Let’s see how to make this happen. If you’d like to follow along, make sure you have a code editor of your choice, such as VS Code. Also make sure you have npm and Google Chrome installed, and create a new React app. This might take a few minutes.

In your terminal, start a new app with these steps:

npx create-react-app control-form-practice
cd control-form-practice
npm start

If all goes well, you should see the React logo rotating in your browser.

Now, in your code editor, open the App.js file found in control-form-practice/src/App.js. Replace everything in App.js with this starter JSX:

function App() {
  return (
    <form style={formStyle()}>
      <label>Your Name:</label>
      <input type="text" />
      <label>Your Age:</label>
      <select>
        <option value="youth">0 - 17</option>
        <option value="adult">18 - 80</option>
        <option value="elder">80 +</option>
      </select>
      <label>
        If you love React, check this box =>
        <input type="checkbox" />
      </label>
      <label>Comments:</label>
      <textarea />
      <button type="submit">Submit</button>
    </form>
  )
}

export default App;

const formStyle = () => {
  return { display:"flex", flexDirection:"column", margin:"40px auto", lineHeight: "50px", width: "400px", fontSize:"20px"  }
}

(I've included a formStyle() function that's used for inline styling for readability purposes in your browser. There are much better ways to style components FYI.)

Right now, this form is considered uncontrolled, and anything you type or select lives in your browser’s DOM.

To make this a Control Form, we need to incorporate state into our input, select, and textarea tags. To start, we need to add state to our component.

1. Add State

On line 1 in App.js, import the useState hook.

import { useState } from 'react';

Then, inside the App component & before the return statement (line 4), let's declare our state variables.

const [name, setName] = useState("");
const [age, setAge] = useState("young");
const [opinion, setOpinion] = useState("false");
const [comments, setComments] = useState("");

We've destructured the useState hook for each variable, each having its own state variable set to the initial value declared in useState(), and a setter function we'll use to update state every time the user interacts with the form.

2. Assign State

Next, let's add state variables to our form elements. In these elements, add the 'value' attribute and assign their state variable.

<input value={name} type="text" />
...
<select value={age}></select>
...
<input value={opinion} type="checkbox" />
...
<textarea value={comments} />

At this point, if you try to interact with our form in your DOM you'll notice each field is frozen. If you look in your browser's console, you’ll see an error message:
Warning: You provided a 'value' prop to a form field without an 'onChange' handler...
Have no fear. This is because we haven't added our setters to an event listener yet.

3. Listen for State Changes

Let's add event listeners to our form elements! The onChange event listener in React inputs expects a callback function, and has access to the event object, just like in vanilla JavaScript.

We can use event.target.value for input, select, and textarea tags. Radio buttons and checkboxes are a little different, since they're triggered by a boolean value, and can be accessed with event.target.checked. Here's what that looks like.

<input onChange={(e) => setName(e.target.value)} value={name} type="text" />
...
<select onChange={(e) => setAge(e.target.value)} value={age}>
...
<input onChange={(e) => setOpinion(e.target.checked)} value={opinion} type="checkbox" />
...
<textarea onChange={(e) => setComments(e.target.value)} value={comments} />

That's it! Now we have a simple control form. If you want to test out what we've done so far, inject our state variables into the JSX! Here's our final version of App.js, for your reference.

import { useState } from 'react';

function App() {
  const [name, setName] = useState("");
  const [age, setAge] = useState("young");
  const [opinion, setOpinion] = useState("false");
  const [comments, setComments] = useState("");

  return (
    <>
      <form style={formStyle()}>
        <label>Your Name:</label>
        <input onChange={(e) => setName(e.target.value)} value={name} type="text" />
        <label>Your Age:</label>
        <select onChange={(e) => setAge(e.target.value)} value={age}>
          <option value="youth">0 - 17</option>
          <option value="adult">18 - 80</option>
          <option value="elder">80 +</option>
        </select>
        <label>
          If you love React, check this box =>
          <input onChange={(e) => setOpinion(e.target.checked)} value={opinion} type="checkbox" />
        </label>
        <label>Comments:</label>
        <textarea onChange={(e) => setComments(e.target.value)} value={comments} />
        <button type="submit">Submit</button>
      </form>
      <h3>User Name: {name}</h3>
      <h3>User Age: {age}</h3>
      <h3>User Opinion: {opinion}</h3>
      <h3>User Textarea: {comments}</h3>
    </>
  );
}

export default App;

const formStyle = () => {
  return { display:"flex", flexDirection:"column", margin:"40px auto", lineHeight: "50px", width: "400px", fontSize:"20px" }
}

Code Along with Fetch API

Matthew Kohn — Mon, 15 Nov 2021 19:53:42 +0000

The JavaScript built-in Fetch API is awesome. It's a powerful, simple way to send requests and receive responses from a server or your local network. I like it because it's versatile and easy to use.

Let's see how it works by building a simple website. Today, we'll be using the Dog.ceo API to load random images of dogs in the DOM.

Please Note: This tutorial is meant to introduce fellow Newbies looking to explore how the Fetch API works. There is a lot more to Fetch than what you'll read about here, and these examples are by no means exhaustive.

What is an API?

API stands for Application Programming Interface. There are many different types of APIs that do many useful things for us. Here are a few examples of what they can do:

Browser APIs extend the functionality of your Browser (Chrome, Safari, Brave, etc) to help with visual & local interpretation of code (Client-Side).
Server APIs extend the functionality of Web Servers, and can manage data for Client-Side requests around the world.
Web APIs built into your Browser help with sending, receiving, and interpreting data from the Web (Server-Side), such as Third-Party APIs.
Third-Party APIs allow you to download their code over the Web, once you know where & how to get it. Once you find one you like, read their Docs to learn more.

APIs are particularly useful because they work Asynchronously, meaning they don't run at the same time as other code so they don't hold anything important up, causing annoying delays in page loads or updates.

The fetch() API is one flexible tool that will make your life as a Developer much easier. Fetch allows us to make general definitions for network request & response objects that you can manipulate how you see fit. You could use Fetch for a simple GET request to fetch information (like we are here), or you can include header and body information to make POST, PATCH, or DELETE requests to or from a database.

At the end of the article I've included loads of links for further exploration down the rabbit hole of understanding how to use Fetch, Web APIs, and Asynchronous JavaScript.

Starter Code

If you'd like to follow along, create an "index.html", a "style.css", and an "index.js" file in the text editor of your choice on the same folder-level. We'll be working in our "index.js" file for this example.
Copy and paste this very generic starter HTML & CSS into their respective files. Or, create your own & have fun with it!

<!-- ___index.html___ -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <title>Dog Pictures</title>
  </head>
  <body>
    <h1>Dogs!</h1>
    <script src="./index.js"></script>
  </body>
</html>

/* ____style.css___ */

body {
  background-color: rebeccapurple; 
  padding-left: 30px; 
}
h1 {
  color: #fff;
}
img {
  max-width: 400px;
}

This is the bare-bones minimum of what you should start with. When we're done, play around with it and make it your own! What matters most is you start with at least a boilerplate HTML structure, and linking your "index.js" file in a <script> tag at the bottom of the <body>.

When you open the HTML file in your Browser, it should look something like this:

We're going to be using your Browser's Developer Tools to view the data we're receiving from the Web Server. To open your Dev Tools, right-click your Browser and select Inspect to reveal the Dev Tools panel.

Select the "Console" tab to view your Console. You can leave this open for now.

Now it's time to write some JavaScript! Go to the blank "index.js" file in your Text Editor, and let's build our generic Fetch function:

/* ___index.js___ */

fetch(apiURL)                                 // Step 1
  .then(response => response.json())          // Step 2
  .then(data => console.log(data))            // Step 3
  .catch(error => console.log(error));        // Step 4

What is this function doing?

STEP 1: FETCH REQUEST FROM AN API's URL

"fetch(apiURL)"
The Fetch function is a built-in JavaScript function that makes an asynchronous Promise to contact the apiURL we assign to the parameter. This Promise is just an assurance that Fetch will let us know once (or if) a response is received.

Note that there is an option for a second parameter here that would contain metadata, such as the method, header, and body of the request. For a simple GET request like the one we're making, we can omit this and allow for Fetch's default parameters. Check out MDN Web Docs information on Fetch syntax to learn more about making POST, PATCH, or DELETE requests.

STEP 2: HANDLE THE RESPONSE

".then(response => response.json())"
Once the Fetch's Promise has been kept, meaning the server has received the request, we chain a .then() method to the Fetch Request to make another Promise. Any time a .then() method is chained to a Promise, it won't start running until the previous Promise has completed.

Inside this .then(), we're going to make another Promise to take the response we're receiving, and tell the Fetch function to turn it into a JSON format that we can use.

JSON stands for "JavaScript Object Notation", and is a format commonly used to store data that can be accessed by any code language, not just JavaScript. JSON stores data in a long string, formatted with {}'s storing key:value pairs inside []'s much like Objects and Arrays, but note that while JSON is similar to JavaScript, it is not JavaScript; it's just a long string. Once we receive our code in JSON format, we can get to the data we need and do things with it.

STEP 3: HANDLE THE DATA

".then(data => console.log(data))"
Once Step 2's Response Promise has completed, we can now take the information the server sent to us, in JSON format, and do something with it by chaining another .then() to fetch().

The variable data we're using here is actually the JSON object we got back from the server. You can name it anything you'd like and do what you want with it. For now, we will console.log() the data we receive so we can look at this JSON object in our console. Once successful, we will be able to do whatever we want with that data, like pass it into a function.

STEP 4: HANDLE THE ERROR (if any)

".catch(error => console.log(error));"
This is the end of the fetch() function. It's good practice to chain a .catch() method to the Fetch function, in case there is a problem in any of the previous steps. This works like a .then() method, but whenever a Promise rejects (fails), whatever happens inside the .catch() will happen instead.

Note that the Fetch Promise only rejects when a network error happens, not on HTTP errors.

This would be a good place to send an error message to the console so the developer knows about it, or to display a message in the DOM so the User knows to try again later.

Our Request/Response Cycle

Now that we have some background on how a Fetch Request works, let's make our Fetch function work!

At the very top of your "index.js" file, above the fetch function, let's define the apiURL. Add this line to your code:

const apiURL = 'https://dog.ceo/api/breeds/image/random';

Now, refresh your Browser. The Response Object from the Fetch Request has been received, and if successful, our fetch() function will now log that Object to your console. If the URL endpoint has a typo, the fetch() request will reject/fail, so make sure it's accurate.

If you have a message in your Console that looks something like this, you're doing great:

Notice the value of "message" in this Response Object is a URL to a .jpg image. To narrow down to the specific information we want, let's change what we're logging to the Console in Step 3 from:

.then(data => console.log(data))

to:

.then(data => console.log(data.message))

Once you've done this, refresh your Browser and check out the Console again.

You should see just the random URL string we received in the Response Object from the Fetch Request in your Console, which is the value of data.message.

Now that we've singled out the data we want, we're ready to show that image in our DOM!

First, let's make a function that takes a URL as a parameter, and uses that URL parameter to create an image we can display in our DOM.

function showImage(url) {
  const image = document.createElement('img');
  image.src = url;
  image.alt = 'Cute doggo';
  document.body.appendChild(image);
}

Great, but now how do we use that function with our Fetch Request?

Pass `data.message` to showImage()

Go back to the .then() line in STEP 3, and change:

.then(data => console.log(data.message))

to:

.then(data => showImage(data.message))

Now, when you refresh your Browser, instead of logging data to your Console, you should see a picture of a cute dog in the DOM.

If a new random image of a dog appears in your DOM every time you reload the page, congratulations. You did it!

Here's the final JavaScript for you:

/* ___index.js___ */

const apiURL = 'https://dog.ceo/api/breeds/image/random';

fetch(apiURL)
  .then(response => response.json())
  .then(data => showImage(data.message))
  .catch(error => console.log(error));

function showImage(url) {
  const image = document.createElement('img');
  image.src = url;
  image.alt = 'Cute doggo';
  document.body.appendChild(image);
}

From here you could style the rest of your page, and continue to build this into any website of your imagining.

Now that you know how to use Fetch API, you can use it to communicate with servers, create your own databases, or make a cool web app of your own design.

Try exploring one of the many free public Web APIs on your own to see what you can create by fetching what they have to offer.

Continue Learning

I also highly recommend looking further into why Fetch works on your own. Here are some of the sources I've learned from that helped me in my journey.

DEV Community: Matthew Kohn

Missing GitHub Contributions? Double Check Configurations.

The Solution

1. Configure GitHub Email Locally

2. Add Email Used in Past Commits to GitHub Settings

Before:

After:

In Closing,

Keeping track of React state with useContext()

Table of Contents

A couple brief definitions to warm us up:

What is useContext()?

Example for setting up useContext()

1. Make a context file

Here's the complete file for StudentContext.jsx:

2. Wrap Provider around highest level component

3. Using useContext()

Conclusion

Cookies & Sessions in Rails

What are Cookies & Sessions in Rails?

Table of Contents

Adding State to an API Request

What are cookies?

What are sessions?

How to start building a Rails API with Postgres that uses cookies & sessions

Setup

Create

Explore

File Structure

Middleware

Include Cookies in ApplicationController

In Conclusion

Ruby Enumerators- Syntax Basics

Understanding Ruby Basics

Practice For Yourself

Good to Know Moving Forward

Common Array Enumerables

Control Forms in React

Uncontrolled Forms

Control Forms

React’s useState Hook

1. Add State

2. Assign State

3. Listen for State Changes

Code Along with Fetch API

What is an API?

Starter Code

What is this function doing?

STEP 1: FETCH REQUEST FROM AN API's URL

STEP 2: HANDLE THE RESPONSE

STEP 3: HANDLE THE DATA

STEP 4: HANDLE THE ERROR (if any)

Our Request/Response Cycle

Pass data.message to showImage()

Continue Learning

The Event Loop:

Vital Acronyms:

Tools and Resources:

More about Fetch

Here's the complete file for `StudentContext.jsx`:

Pass `data.message` to showImage()