DEV Community: Brandon Marrero 🇺🇸

Basic React Hooks: useState, useEffect, and useContext

Brandon Marrero 🇺🇸 — Mon, 10 May 2021 15:46:23 +0000

Hooks allow use of special React functions without class components. They can be used to maintain state, update data, grab HTML elements, and more.

In this blog post, we will cover why Hooks are necessary and the main ones you need to know.

Let's get started.

Introduction

Before Hooks, class components were required to take advantage of special React functions (state, lifecycle methods, etc).

The problem is that class components require much more boilerplate, making them difficult to read and update.

Class Component

Must have a constructor and call this.state to access a piece of state.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }

  render() {
    return (
      <div>
        {this.state.count}
      </div>
  }
}

Functional Equivalent

Creates the equivalent of the above component in just a few lines. It does not require use of the this keyword to access state and is much easier to read.

function App() {
   const [count] = useState(0);

   return <div>{count}</div>
}

Prerequisites

Before we dive into the 3 basic React Hooks, there are two important rules to remember.

You must import any hooks that you use
Hooks can only be called at the top level of your functional components

This is what those rules look like in practice.

import { useState } from 'react'

function App() {
   const [count] = useState(0)

   const multiplyCount = () => {
      return count * 2
   }

   return <div>{count}</div>
}

Now let's take a look at the 3 main Hooks.

useState()

This hook is called to add local state to a component. It returns a pair with the current value and a function to update that value. The value initially passed to useState() is display on the first render.

useState() provides more flexibility than this.state because state can be either an object or regular value. It can also be accessed and changed based on variable names you define.

When state changes, React will automatically update the UI.

function VisitorCount() {
   count [count, setCount] = useState(0)

   return (
      <div>
         <p>{count} Visitors</p>
         <button 
            onClick={() => setCount(count + 1)}>
            Increment
         </button>
      </div>
   )
}

useEffect()

In class components, we have access to lifecycle methods, such as, componentDidMount(), componentDidUpdate() and componentWillUnmount().

componentdidMount() {
   // The component has initialized
}

componentDidUpdate() {
   // The component state has changed
}

componentWillUnmount() {
   // The component is destroyed 
}

With the useEffect() hook, all of these are unified under one function.

It accepts a function as its first argument and runs once on initialization, and again after each state change.

useEffect(() => {
 console.log('Hello World!')
})

Call When Updated

You may want to only run a function on initialization, or if a specific piece of state changes.

To do this, pass an array as a second argument to useEffect(). This is called the dependencies array.

An empty array will cause the function to run on the first render, and an array with state added will only call the function when that state is updated.

useEffect(
   () => {
      fetch('http://localhost:3000/data')
      .then(response => {
         console.log(response.json())
      })
   {,
   [count] // function called when count is updated
)

In the above example, the function will only be called when count has changed.

Call When Destroyed

To call a function before a component is removed from the UI, simply return a function within useEffect().

useEffect(() => {
   console.log('Hello!')

   return () => console.log('Bye Felicia!')
   },
   []
)

useContext()

In React, data is shared one-way by passing props down the component tree.

Passing data from the top of the tree to the third level requires passing props to two components.

useContext() simplifies this process by allowing props to be shared anywhere in a component tree.

Creating Context

To create context, we pass an object to useContext(), then create a provider to make this object accessible throughout the tree.

const hunger = {
   hungry: 'You are hungry',
   full: 'You feel full',
}

const HungerContext = createContext(hunger)

function App(props) {

   return (
      <HungerContext.Provider value={hunger.full} >
         <Hungry />
      </HungerContext.Provider> 
}

Now the hunger value can be carried down without passing props between child components.

Accessing Context

We also utilize the useContext() hook to access any context we create, no matter where the component is in the tree.

function Hungry() {
   const hunger = useContext(HungerContext)

   return <p>{hunger}</p>
}

This component will display the provided hunger value, and update whenever that value changes.

Conclusion

Thanks for reading my blog post. I hope this post helped you understand the basic React Hooks.

I will be touching more on these hooks in future posts covering functional components.

To learn more about React Hooks, checkout the official docs.

Understanding How React Works: A Beginner's Guide

Brandon Marrero 🇺🇸 — Tue, 27 Apr 2021 17:44:37 +0000

Are you thinking about learning React to build your next web application, but do not understand how it works?

After reading this brief post, you will have a basic understanding of the React flow to get you headed in the right direction. Your React journey starts here.

What is React?

React is a front-end JavaScript library that helps developers quickly build dynamic user interfaces. In an MVC application (Model View Controller), React is the view layer, which is what the user can see and interact with. The view layer can update without reloading the webpage when changes are made.
It has a component architecture that allows reusable code which can be rendered anywhere.

What is the format?

Using declarative programming, React makes code easy to read and debug. Declarative programming expresses the logic without displaying all the instructions happening in the background.

Let me break that down...

A declarative view is like a customer ordering a cake from a bakery. The customer explains how they expect the cake to look and the baker makes it without specific instructions from the customer. This is declarative programming in a nutshell.

Here is a code sample.

function App() {
     return (
          <div className="app">
               <Nav />
               <Home />
               <Footer />
          </div>
     );
}

What can we expect from this output? We are rendering a navigation bar, home screen, and footer.

You may also notice what looks like an HTML element (div), but this is actually JSX, a React element or extension of JavaScript. The JSX is compiled by Babel into regular JavaScript.

This is another example of declarative programming. We specify a React Element, which then gets compiled into JavaScript which creates and appends the HTML element to the DOM.

What are components?

Components are parts that represent pieces of the user interface. Going back to the previous example regarding declarative programming, the components were Nav, Home, and Footer.

These components are children of the root component, typically called the App component. Combining all the components together makes an application.

Components are also reusable with different properties. As data changes, a component can update the information and styling.

How does React flow?

In React, data flows in one direction, top to bottom. This allows for predictable and maintainable code. Data is passed down from the parent component in the form of props. The data can be used in other forms or passed further down the component tree.

Each component has its own state, similar to props but private. It stores property values that belong to a component. Property values can be changed using a method called setState(). By default, a component will re-render when state is changed.

Using state and props together allows breaking down of components based on specific behaviors. Let's say a PlantsContainer has a state property with a list of plants.

The PlantsForm component would render a form for adding new plants and a Plants component might render the list of plants to the user interface.

Conclusion

Thanks for reading my blog post. I hope this post helped you understand the basics of React. If it still seems overwhelming, React can be broken down into 4 key concepts:

Components
JSX
State
Props

I will be touching more on these concepts in future posts.

To learn more about React, I recommend referencing the official docs.

Asynchronous Redux using Redux Thunk

Brandon Marrero 🇺🇸 — Sun, 11 Apr 2021 23:20:41 +0000

Redux is a great tool for managing state in large scale applications. It has a single state container called the store, which can be managed using actions and reducers. With Redux, your state is accessible throughout your application tree using dispatchers.

Most applications are making at least one API call, and unfortunately, Redux is not setup for this outside of the box. This is because action creators cannot return functions and is synchronous by default. Redux Thunk was created by Dan Abramov to fill this gap.

Prerequisites

This post assumes you have some basic knowledge of React and Redux. I do not explain the finer details of Redux, such as mapping state and dispatch. For a great introduction to Redux, checkout this tutorial.

What is Redux Thunk?

In Redux, action creators are expected to return objects. However, using Redux Thunk allows us to pass functions within our action creators to create an asynchronous Redux.

This means that Redux Thunk can be used to make API requests, delay a dispatch, or set dispatch conditions. Essentially, it provides full control over the dispatch method.

Getting Started

In my opinion, the best way to learn how Redux Thunk works is to see it in action. View the example below with very concise explanations.

Install the redux-thunk package by typing npm install redux-thunk in your terminal.

Then you need to import applyMiddleware from redux and thunk from redux-thunk. The applyMiddleware() method will be the second argument to your createStore() method.

Pass in thunk as your argument for applyMiddleware(). It should look something like this.

createStore(rootReducer, applyMiddleware(thunk));

Finally, build your new action creator. In this example, we are making a fetch request to an API.

export const fetchFromApi = () => {
    return dispatch => {
        fetch('http://localhost:3001/data')
        .then(response => {
          return response.json()
        })
        .then(responseJSON => {
          dispatch({ type: 'GET_DATA', data: responseJSON })
        })
    }
}

How Does It Work?

In this scenario we are calling our action creator within the componentDidMount() method of a React component. The action creator becomes available as a prop here.

If you want more information about mapping props see the documentation here.

Once the component mounts, the fetchFromApi() action is called. This action contains a function with a fetch request to our API.

componentDidMount() {
        this.props.fetchFromApi()
}

Redux Thunk then calls this function. The application is still functional while the request is working in the background without the user needing to wait for the promise to resolve.

return dispatch => {
    fetch(`http://localhost:3001/data`)
    .then(response => {
      return response.json()
    })
    .then(responseJSON => {
      dispatch({ type: 'GET_DATA', data: responseJSON })
    })
}

Once the promise has resolved, the response is returned. In this case, we convert the response to a readable JSON format using the json() method provided by native JavaScript. The converted response is then dispatched to a reducer where the store is updated.

dispatch({ type: 'GET_DATA', data: responseJSON })

After the store is updated the component is reloaded. If everything is set up correctly, the new data should be available via the store.

Ta-Da! You can now make asynchronous action creators within your React application.

React/Rails Final Bootcamp Project

Brandon Marrero 🇺🇸 — Wed, 24 Mar 2021 00:58:40 +0000

For my final project at Flatiron School, I chose to build a web application around one of my favorite video games, Apex Legends. It is a matchmaking application where players can find teammates to add to their squad. The concept is simple. A player can create, view and request to join lobbies.

Lobbies display the gamertag of the host, as well as the gamemode, relative time, platform, requirements, region, and players interested. Currently, lobbies and requests can only be created, not updated or deleted.

I plan on adding more functionality in the future versions, including, authentication, profile pages, and realtime game stats. For now, players are limited to create and view.

Rails API

The backend uses Ruby on Rails as an API. This section was fairly simple to build. I needed Rack CORS Middleware to handle my HTTP requests from the React Frontend, and the fast_jsonapi gem to filter my JSON rendering. Once my models were setup, I then created the routes for the requests.

Initial Design

Before doing anything with my frontend, I created a web design using Figma. I needed a sense of direction, and having this reference was a huge benefit when getting to the ReactJS portion of the project. I had a very good idea about how many components I would need and how things would be styled. I even downloaded fonts for my theme.

Here is my design:

ReactJS

My frontend utilized the ReactJS framework. I used 'create-react-app' to jumpstart my process. There were many more moving parts for this section, especially for the initial setup. There are 2 containers and 10 components in the current state. I used a variety of packages, including, react-redux, react-router-dom, and tailwindcss.

React Redux

Redux allows your application to read data from a store, or global state. Actions can be dispatched to the store to update the data.

This was my first time configuring Redux for an application of this scale. There I hit quite a few roadblocks, and had to reference lots of material to fully understand the setup. After reviewing, I decided to split store, actions and reducers into separate files. Each model has its own reducers and actions file. This made everything easy to read and update later. Whenever I needed a particular action for a component, I imported the function from actions file.

React Router

For my application, I needed routes that referenced the appropriate components, as well as dynamic routes for individual lobbies. This allowed me to maintain a single-paged application (SPA) with multiple views. The page essentially never reloads.

Setup was very simple and easy to understand. There is a Router tag with all of your components/routes enclosed. Each route has a path and a component.

<Router>
        <div className='bg-wraith bg-center bg-top bg-cover bg-no-repeat bg-fixed pb-16'>
              <Nav />
              <Route exact path="/" component={Home} />
              <Route exact path='/about' component={About} />
              <Route exact path="/lobbies" component={LobbiesContainer} />
              <Route path="/lobbies/:id" component={Lobby} />
        </div>
</Router>

Tailwind CSS

Tailwind was the fun part, even the process of figuring it out was enjoyable. I chose Tailwind over other frameworks like Bootstrap, due to its styling flexibility. The Tailwind configuration file is easy to customize. It was like writing plain CSS, but with class attributes.

This simple setup...

<div className='card shadow-2xl bg-gray-500 bg-opacity-50 text-gray-200 p-10'>
            <div className="font-semibold text-xl tracking-wider uppercase"><h2><Link to={`/lobbies/${id}`}>{gamertag}</Link></h2></div>
            <div className="text-sm"><p>{gamemode} • 30 min</p></div>
            <div className="flex mt-2">{platformType()} {micRequired()}</div>
            <div className="text-sm mt-2"><p>{region} • {skillLevel}</p></div>
            <div className="text-sm mt-4 btext-white"><p>{description}</p></div>
            <div className="mt-8 inline-block float-left">
                <svg className="w-6 h-6 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>

                <span className='text-sm ml-1 mt-0.5'>7 Interested</span>  
            </div>
            <div className="mt-6 inline-block float-right">
                <Link to={`/lobbies/${id}`}>
                    <button className='flex bg-red-600 hover:bg-red-500 text-white hover:text-white py-2 px-3 text-sm uppercase'>
                    View Lobby
                    </button>
                </Link>
            </div>
</div>

Created these responsive cards...

The styling is nearly identical to the mock up one I created using Figma. This is probably the closest I have gotten to any mock up I have created in prior projects.

Here is a look at the final index page. Compare it to the mockup above:

Want to dive into the code? Checkout the repo here.

Class Journal - JavaScript and Rails Project

Brandon Marrero 🇺🇸 — Sat, 16 Jan 2021 01:45:34 +0000

Introduction

I created a digital journal where users can create and delete journal entries, as well as comment on them. Think of it as a time capsule or diary that all students can read. This project uses a Rails backend, and JavaScript and Bootstrap on the frontend. My main goal with this project was to use my knowledge of Rails and JavaScript to build a CRUD application. Entries can only be created, read and deleted in the current state, however, I do plan on implementing an update entries feature in the future.

Project Requirements

There were some basic guidelines I needed to follow when building my application. Rails was required for the backend of this project. HTML, CSS and JavaScript were to be used for the frontend. I was required to have one has-many relationship, use classes to encapsulate my logic, and cover at least 2 of CRUD. I also needed to handle interactions between the client and server asynchronously using at least 3 AJAX calls while using JSON for the communication format. I fulfilled these requirements by creating and accessing entries from my Rails backend using serializers and fetch requests, and adding the information to the DOM on the frontend.

Rails Backend

Using Rails as an API for my project was very easy to setup. I finished this component with only 18 commits. My Rails backend has two models: Entry and Comment. Entry has title, author and text attributes. Comment has text, author and entry_id attributes, and belongs to Entry. This is how I fulfilled my has-many/belongs-to relationship requirement.

class EntriesController < ApplicationController
    before_action :set_entry, only: [:show, :destroy]

    def index
        @entries = Entry.all

        render json: @entries, except: [:created_at, :updated_at]
    end

    def show 
        render json: @entry , except: [:created_at, :updated_at]
    end

    def create 
        entry = Entry.create(entry_params)
        render json: entry, status: 200
    end

    def destroy 
        @entry.destroy
    end

    private

    def set_entry
        @entry = Entry.find(params[:id])
    end 

    def entry_params 
        params.require(:entry).permit(:title, :text, :author)
    end 
end

class EntrySerializer
  include FastJsonapi::ObjectSerializer
  attributes :id, :title, :text, :author
end

My entries controller features index, show, create and destroy actions. I utilized the fast_jsonapi gem for building out my serializers and creating formatted JSON responses for communication on the frontend with JavaScript. The comments controller features only index and create. Thanks to Rails and fast_jsonapi, my JSON was organized and easy to work with.

JavaScript Frontend

The JavaScript component was the most challenging part of this application. It was my first time building what I consider a complete Rails and JavaScript application. After I completed the backend I honestly did not know where to begin with my frontend.

I did many google searches, and viewed other projects and repos for examples. I decided to start with the index page, since I would need containers and a basic setup to manipulate the DOM. I then built my API Adapter, a class that made fetch requests to my Rails backend.

createEntry(entryTitle, entryAuthor, entryText) {
        const entry = {
            title: entryTitle,
            author: entryAuthor,
            text: entryText
        }

        return fetch(this.root + "/entries", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            body: JSON.stringify(entry)
        })
        .then(res => (res.json()))
        .catch(error => console.log("Error: " + error))
    }

With my fetch requests working, I started to build the Entry and Entries classes. Entry is in charge of instantiating and rendering entries, while Entries handles creating entries from form data, getting entries, and posting entries to the backend.

const entriesContainer = document.getElementById("entries-container")

        // Build Entry Div
        const entryDiv = document.createElement("div")
        entryDiv.className = "entry-container mt-3 mb-5"
        entryDiv.id = `entry-${this.id}-container`
        entriesContainer.appendChild(entryDiv)

        // Entry Title
        const title = document.createElement("h3")
        title.className = "entry-title"
        title.innerText = this.title
        entryDiv.appendChild(title)

        // Entry Author
        const author = document.createElement("p")
        author.className = "entry-author"
        author.innerHTML = `<i>${this.author}</i>`
        entryDiv.appendChild(author)

        // Entry Text
        const text = document.createElement("p")
        text.className = "entry-text"
        text.innerText = this.text
        entryDiv.appendChild(text)

        // Comment Container
        const commentsDiv = document.createElement("div")
        commentsDiv.className = "entry-comment-container mt-5 mb-5"
        commentsDiv.id = `entry-${this.id}-comment-container`
        commentsDiv.style.display = "none"

        // Show/Hide Comments
        const showCommentsBtn = document.createElement("button")
        showCommentsBtn.id = `entry-show-button-${this.id}`
        showCommentsBtn.className = "btn btn-secondary me-1"
        showCommentsBtn.innerHTML = "Comments"
        showCommentsBtn.addEventListener("click", showHideComments.bind(this))
        entryDiv.appendChild(showCommentsBtn)

        // Delete Button
        const deleteBtn = document.createElement("button")
        deleteBtn.setAttribute("id", `delete-button-${this.id}`)
        deleteBtn.className = "btn btn-danger me-1"
        deleteBtn.innerHTML = "Delete"
        entryDiv.appendChild(deleteBtn)
        entryDiv.appendChild(commentsDiv)

        deleteBtn.addEventListener("click", () => {
            entryDiv.remove()
            this.adapter.deleteEntry(`${this.id}`)
        })

function showHideComments() {
            const commentsDiv = document.getElementById(`entry-${this.id}-comment-container`)
            if (commentsDiv.style.display === "none") {
                commentsDiv.style.display = "block"
            } else {
                commentsDiv.style.display = "none"
            }
}

I did not like how much screen real estate that comments was taking up, so I built a function that shows or hides comments on a button listener. This seemed to be a lot more user friendly and much easier to read.

Creating New Entries

The entries class was setup with form bindings and an event listener on the submit button, which triggers my create new entry method. It uses the form values to make a post request to the backend and instantiate new entry objects, then utilizes the responses to create entry objects on the frontend for rendering.

newEntryBindings() {
        this.newEntryForm = document.getElementById("new-entry-form")
        this.newEntryTitle = document.getElementById("new-entry-title")
        this.newEntryAuthor = document.getElementById("new-entry-author")
        this.newEntryText = document.getElementById("new-entry-text")
        this.newEntryForm.addEventListener('submit', this.createNewEntry.bind(this));
    }

    createNewEntry(event) {
        event.preventDefault()
        const entryTitle = this.newEntryTitle.value
        const entryAuthor = this.newEntryAuthor.value 
        const entryText = this.newEntryText.value

        this.adapter.createEntry(entryTitle, entryAuthor, entryText)
        .then(entry => {
            const newEntry = new Entry(entry)
            this.entries.push(newEntry)
            this.newEntryTitle.value = " "
            this.newEntryAuthor.value = " "
            this.newEntryText.value = " "
            newEntry.renderEntry()
        })
    }

Building Comments

The Comment and Comments classes were setup similarly to my Entry classes. Comment instantiates and renders comments to the DOM and Comments fetches and renders comments from the backend. Building this section was a lot of fun and a great learning experience. I learned how to display comment count by getting the number of children from the unordered list elements. It can also make the word "comment" singular or plural based on the count.

const commentCount = document.createElement("h5")
        commentCount.id = `entry-${this.id}-comment-count`
        commentCount.className = "mt-5 mb-3"
        if (commentsUl.childElementCount === 1) {
            commentCount.innerText = `${commentsUl.childElementCount} Comment`
        } else {
            commentCount.innerText = `${commentsUl.childElementCount} Comments`
        }

        commentsDiv.prepend(commentCount)

Async Issues

Later on into development, I stumbled upon a huge bug that I did not notice at first. Sometimes my comments were rendering, and other times they would fail to load. My entries were coming up as null.

I eventually found out that this was a timing issue. Initially, my application was running asynchronously in parallel. Like this:

new Entries()
new Comments()

The problem with this setup was that both classes were making fetch requests at the same time, which is not really ideal. There were also too many functions being called in my entries constructor.

My fetch requests for Entries were much larger, and the comments were coming back before the entries had finished loading. This was a major issue because the entries are parents of the comments, and without them the comments cannot render.

The solution was to add an event listener with DOMContentLoaded and a callback function that would not instantiate comments until entries are finished. I used "them" and an arrow function to make this work.

document.addEventListener("DOMContentLoaded", function() {
    new Entries().fetchAndLoadEntries().then(() => {
        new Comments()
    })
})

Polishing

After the async fix I had a complete, functional project. I began to focus on polishing and making the frontend look prettier. Bootstrap made this step very easy. I styled entire headers, forms and lists in minutes.

Future Improvements

I plan on making a few changes to what can be done with entries. Currently, entries can only be read, created and deleted. I hope to have full CRUD capability for entries in the future.

Comment count can also be refactored. Instead of getting comment count by child element count, I can store entry comments in an array and get the array count to make my code more dynamic.

Conclusion

Building this project was a huge challenge and a learning experience. Not only did I become much more confident writing JavaScript, I utilized what I learned in my previous module with Rails, but in new ways. I can now build complete applications using JavaScript, Rails and Bootstrap with CRUD features. Two months ago I would not even know where to begin. I hope to take what I have learned and create even richer projects in the future.

Rails MVC Project with RESTful Routes - Bundl

Brandon Marrero 🇺🇸 — Wed, 18 Nov 2020 00:51:31 +0000

Introduction

This is the most polished, complete project I have built to date. Bundl is a social-networking application built on the Rails framework. It is based on the popular groups app, Meetup.

Users can join and login, as well as create groups and events, post discussions, rsvp, and join groups. The goal is to allow users to find groups of people with similar interests. Groups have a name, description, location, members, events with RSVPs, and discussions.

Planning

Before I wrote a single line of code, I got out my handy notebook. I then drew diagrams of my model and attributes. Thinking about how I wanted my UX was a tremendous help during this process. I thought of it like reverse engineering. I had to build the UX the way I saw a user interacting with it in my head. With a basic understanding of my project structure, I began coding.

Building the App

Rather than taking my usual approach and starting with the User model, I decided to build my apps core component first, Groups. This is where most interactions are made in my application. Groups have a name, description, location and an owner or user. Users can view, join and leave groups, as well as access a bunch of nested components I will cover later.

# bundl/db/20201004221257_create_groups.rb

class CreateGroups < ActiveRecord::Migration[6.0]
  def change
    create_table :groups do |t|
      t.string :name
      t.text :description
      t.string :location
      t.integer :user_id
    end
  end
end

Next, I decided that groups need a topic. Topics can belong to multiple groups.

# bundl/db/20201004221451_create_topics.rb

class CreateTopics < ActiveRecord::Migration[6.0]
  def change
    create_table :topics do |t|
      t.string :title
    end
  end
end

Users should also be able to join groups. I thought that the best way to do this was with a join model called Membership. Memberships have a group_id and user_id. Using this method allowed me to create the functionality for users to join and leave groups with '@membership.destroy'.

Members should be able to view events for their groups. This is where I added the Event model, which has a group, title, description, location, start-time, and end-time.

# bundl/db/20201004221815_create_memberships.rb

class CreateMemberships < ActiveRecord::Migration[6.0]
  def change
    create_table :memberships do |t|
      t.integer :group_id
      t.integer :user_id
    end
  end
end

User Model

I created my User model using Devise. Most of the features of my application require a user account. My User model accepts a name, email and password. I then used Devise to setup users routes and users_controller for users actions.

# bundl/config/routes.rb

Rails.application.routes.draw do
     devise_for :users, path: '', path_names: { sign_in:    "login", sign_out: "logout", sign_up: "join" }
end

I decided to start building my users join and login forms, so that I could begin testing other features of my app as I build them. Devise and Simple Form make error messages much easier later. I added my view 'views/registrations/new.html.erb' and wrote the following code:

# bundl/app/views/registrations/new.html.erb

<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
     <%# <%= f.error_notification %>

     <%= f.input :name,
             required: true,
             label: "Full Name",
             input_html: { autocomplete: "name" }%>

     <%= f.input :email,
             required: true,
             autofocus: true,
             input_html: { autocomplete: "email" }%>

     <%= f.input :password,
             required: true,
             hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length),
             input_html: { autocomplete: "new-password" } %>

     <%= f.input :password_confirmation,
             required: true,
             label: "Confirm Password",
             input_html: { autocomplete: "new-password" } %>

     <%= f.button :submit, "Sign up" %>
<% end %>

The users login form is similar, but only has fields for email and password.

Groups

At this point I had my Groups model created, so I built the feature to create new groups. I added a new action to the groups controller and built the new view.

I then added validations for name, description, topic and location to ensure that the user fills out all required fields.

I created the RSVP and Discussion models, and put together the groups show page with name, description, buttons, and a members list. I wrote conditions, such as 'if @group.user == current_user,' to display advanced options to the group admin only. Group members also have more options than non-members.

The groups feature a variety of associations and nested routes. This allowed me to build unique discussions, members and events pages for each group.

resources :groups do
    resources :memberships, only: [:index], path: "/members"
    resources :discussions, only: [:index, :create, :destroy]
    resources :events, only: [:index, :show, :new]
end

Searches

What good are the tags if they cannot be used? This is where the Search model comes in. The purpose of this model is to search for groups by tags, however more search fields can be added if wanted.

Here is the form:

Every time that form is submitted, a new Search instance is created. This also means that each search result is displayed on a unique show page with the Search instance ID. This is a little more advanced than the Groups index search field that filters the results.

OAuth

The final step, as far as the backend, was setting up OAuth, specifically OAuth-Facebook, which allows users to login to your application using their Facebook account.

First I added Omniauth columns to my users table.

# bundl/db/migrate/20201105220126_create_searches.rb

class AddOmniauthToUsers < ActiveRecord::Migration[6.0]
   def change
     add_column :users, :provider, :string
     add_column :users, :uid, :string
   end
end

I then bundle installed the Omniauth-Facebook and DotEnv gems. Devise actually works with Omniauth, so I was able to add this line of code to my Devise initializer.

config.omniauth :facebook, ENV['FACEBOOK_APP_ID'], ENV['FACEBOOK_APP_SECRET'], {}

If you look at the code above, you will notice the constants, "FACEBOOK_APP_ID" and "FACEBOOK_APP_SECRET." These constants are stored in DotEnv, and hold my unique ID and secret. This prevents the information from being exposed.

Omniauth uses these codes to direct users to my Facebook app, and back to my application. It pulls the Facebook user's email and name to build their user account in the Bundl application. This is happening in the background when the user is redirected, and the information is stored to the database.

Roadblocks

There were a few headaches throughout the process of building my Rails application. The hardest part was sitting down and getting to work. Having lots of moving parts caused me to become overwhelmed. I was jumping from one feature to another and feeling unsure about where to start. This feeling slowly faded away as I got further into development.

My biggest area of struggle was forms. At times, my form field data would not pass over. I spent hours trying to understand why new groups were coming back as invalid due to not having a topic. It ended up being as simple as adding a topic_id column to my groups table and fixing the associations in my models. I had it setup as Group 'has_one :topic', when the correct association is 'belongs_to :topic'.

Final Thoughts

Building this project was a huge learning experience. I utilized everything I learned throughout the module, including associations, validations, authentications, nested fields, nested routes, displaying validations and using helper methods. I have developed a solid understanding of Rails. Here are a few key take aways from my experience:

Test your application and try to break it
Use byebug and use it often
Break down your project into small parts
Keep a tab with documentation handy

My Experience in a Coding Bootcamp After 6 Months

Brandon Marrero 🇺🇸 — Fri, 04 Sep 2020 12:29:29 +0000

Introduction

Here I am, six months into my coding Bootcamp. I had to count the months on my fingers because I could not believe how fast they went by. Many things have happened that I expected, and other things surprised me. In this article, I will cover how I learned about coding, finding a Bootcamp, and what code Bootcamp is like. This is more of a self-reflection, but I hope you can learn something from my experience.

My Passion for Creating

After some lackluster experiences with college, I decided it was time for a change. I started to think about things that I could see myself doing. Mostly fields that do not require a college degree. Initially, I thought I was going into a trade like HVAC or welding, but I remembered how interested I was in web development as a pre-teen. I always saw myself as a creator, building websites with online web builders.

There was a thrill I got from seeing people interact with my websites. One of my most memorable websites was one I built with Webs, it featured forums, chatrooms, photo/video galleries, arcade games, and user login. Friends from school would signup to hang out, chat, and play silly arcade games.

Finding a Bootcamp

When I remembered how much I enjoyed building websites, I thought about learning how to build them from scratch. After multiple failed attempts with learning on my own, I began to search for a school. I discovered there were technical schools called Bootcamps geared towards learning code, and I had to learn more. I found the perfect school that offered ISA (Income Share Agreement), 10-month programs, live/virtual classes, personal mentorship, counseling, job assistance, and a strong curriculum.

The ISA was very appealing to me because I could not afford any Bootcamp out of pocket. With ISA, I could start classes with no money down. All I needed to do was sign a contract stating that I agree to pay a percentage of my income after completing the program and finding a job.

I researched the Bootcamp for days, learning as much as I could. Most of the content I consumed were testimonials from alumni in blogs, videos, and Reddit posts. I would say that most reviews I found were positive. Graduates did not seem to have a problem finding jobs, and those who did would eventually land one. I learned that the Bootcamp could turn non-coders into developers building complete web applications. I had to sign up.

The Bootcamp

To apply, I had to fill out some basic information, and write a short essay about why I wanted to attend Bootcamp. I wrote some of what I have written in this blog post, including how passionate I am about creating and breaking things.

Within a week I was selected for a video call, where they got to learn more about me. The student advisor was interested in my personality, learning preferences, and attitude towards programming. They wanted proof that I was capable of putting in the work and self-discipline that their program requires.

The meeting went well, and I was selected to attend their online Bootcamp. I filled out paperwork, got my start date, installed the software I would need, and waited for classes to begin.

Starting Out

The online program was broken into five modules, each covering a different language or framework. It was finally time to module one, my first day of class. I was in a period they call, "The First Mile." This period allows students two weeks to complete a specified amount of lectures/assignments, to see if coding is a good fit for them. Students who fail this period are able to drop out of the Bootcamp with no penalties. We learned about the process of coding and dived into a little bit of Ruby coding.

From then on, we were learning something new each day. You definitely need to set aside time in your schedule strictly for coding. As a parttime student, I was averaging about 20-25 hours per week. Each week was expanding on what we learned previously. We also had scheduled live lectures, study groups, chatrooms, and coaching sessions each week.

Being in code Bootcamp is a hustle and grind. You are constantly learning new information very quickly. If you do not stay focused, it is easy to fall behind. One of the best things I did to help this was using what I learned. I built applications and kept stacking every feature I learned about on top of them. I also attended almost every lecture and study group in my first module.

You may also want to make some friends. I have learned so much from my peers in my cohort. Setting up study groups and working on labs together has not only been fun, but beneficial to my coding experience. I could also just message a friend whenever I felt stuck.

After The Basics

Once we covered the foundations of Ruby and built our first console application, it was time to build actual web applications. The first Ruby framework we learned about was Sinatra. This web framework allowed us to build MVC applications with views, controllers, authentication, and more. We moved really quickly on this one and started our projects after less than two months. Pretty much all of what we learned in the Ruby module was applied to this one, so make sure you keep previous material fresh in mind.

My final Sinatra project was an MVC CRUD recipes application. Users could create, view, update and delete their recipes. This application had multiple pages, user authentication, and forms. One thing I was not quite ready for was the project review. In project reviews, you are asked a lot of technical questions. They may ask how a specific part of your code works, or even about HTTP protocol. I completely stumbled when describing HTTP protocol, because I was focused solely on the code and framework. I still passed, but definitely be sure to brush up on internet protocols and other technical topics.

Fast forward to today and I am in my third module, Ruby on Rails. It is like Sinatra, yet much more advanced. Things I built in Sinatra can be done in minutes (or seconds) with Rails. I am doing a mix of front-end and back-end development. This module introduced lots of optional CSS lessons, and writing HTML with Ruby code. I can generate a form in just a few lines of Ruby. Pretty cool right?

At this point, I feel like I am actually building things. Not just "hello world" console apps, but fully functional web applications. I understand how to tie Ruby, HTML, CSS, and SQL altogether to make a working MVC application. I still have a lot to brush up on, but the foundation is there.

Final Thoughts

Has it been worth it so far? I believe it definitely has. I have gone from not understanding what the heck I am doing, to kind of understanding what I am doing.

Do not expect to enroll in Bootcamp and automatically become a full-stack developer. Everyone has to put in the effort. You are going to get out of this program what you put into it. If you put in the necessary hours per week and challenge yourself, then you will reap the rewards.

Be prepared to go through some very frustrating times and keep yourself motivated. Also, imposter syndrome is real, and it may hit you hard. The good thing is that you have a lot of support around as a Bootcamp student. Use every asset you have.

Thank you for taking the time to read my article. Would you attend a code Bootcamp? Have you or are you currently attending one? I would love to read about your experience.

Building an Advanced Search Form in Rails 6

Brandon Marrero 🇺🇸 — Mon, 31 Aug 2020 03:09:13 +0000

Introduction

A simple search form is great, but one with advanced search options can have many use cases. Can you imagine Amazon with a search form that only accepts item names? Pssh...that sounds like a nightmare to me.

I prefer to provide more options for my users. Adding more filters can help users narrow down the results and find exactly what they are looking for.

You can use gems like Ransack to build search forms much faster, but for the purpose of learning and performance we will be building this feature ourselves. Throughout the process, you will also learn how to customize Rails default pluralization. By the end, we will be able to search for Pokemon by name, type, and region.

Before We Dive In

I recommend testing the application throughout the process. You can run rails server in your terminal and visit localhost:3000 after each feature implementation and see if the application works as expected.

Getting Started

Let us begin by creating a new Rails app. Execute the following code in your command line:

rails new PokemonDB

This will set up the entire Rails directory structure that we need to run our application. Before we do our scaffold, we need to setup Pokemon to have proper pluralization. Since Pokemon is already plural, we do not want Rails to add an 's' after it.

# pokemondb/config/initializers/inflections.rb

ActiveSupport::Inflector.inflections do |inflect|
    inflect.uncountable "pokemon"
end

Now we can create our first model, Pokemon. Our model will have three strings of name, type, and region. We will generate this using a scaffold, which will generate the database and the basic MVC configuration we need. Feel free to build this without using a scaffold if you want an extra challenge.

NOTE: Rails sets attributes as strings by default. Since all of our attributes are strings, we do not need to specify the datatypes.

rails generate scaffold Pokemon name type region --force-plural

After your scaffold is built, update the Pokemon class to make 'type' an acceptable attribute for Pokemon. Rails reserves 'type' by default.

# pokemondb/app/models/pokemon.rb

class Pokemon < ApplicationRecord
    self.inheritance_column = "not_sti"
end

Be sure to follow up with rails db:migrate to update the schema. Our application will not run with pending migrations.

Updating Routes

Now we need to update our routes to change the action for the root page, indicated by a forward slash. Use the 'pokemon#index' action for the root. Update the routes file:

# pokemondb/config/routes.rb

Rails.application.routes.draw do
  root 'pokemon#index'
  resources :pokemon
end

Now our root page should look like this.

Test Your Create Form

Go ahead and click 'New Pokemon.' Create three or four Pokemon to test the form, then check the index page. This will also provide objects to work with. I prefer this method because I can test my forms and build 'seeds' at the same time.

Once you have added Pokemon, you should see them on the index page. They will be displayed in the order you created them with show, edit, and destroy links. The next step will be to add a basic search form and logic.

Search by Name

Before we build the advanced search, let us build a basic Pokemon search form to search by name. We will expand on it later.

To build this use the form_with tag in the Pokemon index file. If you are using an older version of Rails, form_tag will work just fine with a few slight differences. Add the following code to the index view above the Pokemon table.

# pokemondb/app/views/pokemon/index.html.erb

<%= form_with(url: '/pokemon', method: 'get', local: true) do %>
  <%= text_field_tag(:search) %>
  <%= submit_tag("Search") %>
<% end %>

Our form is taking in a path and method. The text_field_tag displays a textbox where users can enter a search value, while the submit tag sends the information for us to use and filter results. Here is the documentation if you would like to brush up on forms.

Basic Search Method

It is time to build the search method. Since this is database logic, it will be handled by the model. This method will find Pokemon based on a given name. If no search parameters are provided, then it will display all Pokemon. Update your 'pokemon.rb' file to look like this:

# pokemondb/app/models/pokemon.rb

class Pokemon < ApplicationRecord
    self.inheritance_column = "not_sti"

    def self.search(search)
        if search 
            where(["name LIKE ?","%#{search}%"])
        else
            all
        end
    end 
end

We will put this new class method to use by calling it in our Pokemon index. The following code will take in search params from the search form we built earlier.

# pokemondb/app/controllers/pokemon_controller.rb

def index
    @pokemon = Pokemon.search(params[:search])
end

The basic search form is now functional. I was able to find Bulbasaur! Time to make this form more useful and interesting.

Search Model

Next, we will add functionality to search for Pokemon by type and region. This is a bit more advanced and will require a separate model to handle searches. We will use rails generate, but this time for a model. This model will have name, type, and region. Be sure to run rails db:migrate after generating.

rails generate model Search name type region

Searches Controller

For our advanced search form to work properly, it will need its own controller. Make sure the controller name is pluralized. Run the following in your terminal, then update your routes.

rails generate controller searches

# pokemondb/config/routes.rb

Rails.application.routes.draw do
  root 'pokemon#index'
  resources :pokemon
  resources :searches
end

Controller Actions

The controller will have three actions and a 'search_params' private method. Our actions are show, new, and create. Here is the code.

NOTE: Older versions of rails may use .uniq rather than .distinct. Try them out to see which one throws errors.

# pokemondb/app/controllers/searches_controller.rb

class SearchesController < ApplicationController
    def show
        @search = Search.find(params[:id])
    end 

    def new 
        @search = Search.new
        @types = Pokemon.distinct.pluck(:type)
        @regions = Pokemon.distinct.pluck(:region)
    end

    def create
        @search = Search.create(search_params)
        redirect_to @search
    end 

    private

    def search_params
        params.require(:search).permit(:name, :type, :region)
    end 
end

Building a New Form

Start by creating a link to our new advanced search form. This can go directly under the standard search form in the Pokemon index view.

# pokemondb/app/views/pokemon/index.html.erb
<%= link_to "Advanced Search", new_search_path %>

You may notice that this link does not go anywhere. We need to create our views in the searches folder! Create the views new.html.erb and show.html.erb. Make sure they are in the # pokemondb/app/views/searches directory.

Now we have some empty views. Time to add some code to create new searches. This will be a form with select menus and a submit field.

# pokemondb/app/views/searches/new.html.erb</strong

<h1>Advanced Search</h1>

<%= form_with model: @search do |f| %>
    <%= f.label :name %>
    <%= f.text_field :name %>

    <%= f.label :type %>
    <%= f.select :type, options_for_select(@types), include_blank: true %><br>

    <%= f.label :region %>
    <%= f.select :region, options_for_select(@regions), include_blank: true %><br><br>

    <%= f.submit "Search" %>
<% end %>

<p><%= link_to "Back", '/pokemon' %></p>

Our advanced search view should look very clean. Try the 'Advanced Search' link on the index page to see if everything works as expected. Move on to the show view.

# pokemondb/app/views/searches/show.html.erb

<h1>Search Results</h1>
<p><%= link_to "Back", new_search_path %></p>

<% if @search.search_pokemon.empty? %>
    <p>No Pokemon were found.</p>
<% else %>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Type</th>
                <th>Region</th>
                <th colspan="3"></th>
            </tr>
        </thead>

        <tbody>
            <% @search.search_pokemon.each do |pokemon| %>
            <tr>
                <td><%= pokemon.name %></td>
                <td><%= pokemon.type %></td>
                <td><%= pokemon.region %></td>
                <td><%= link_to 'Show', pokemon %></td>
                <td><%= link_to 'Edit', edit_pokemon_path(pokemon) %></td>
                <td><%= link_to 'Destroy', pokemon, method: :delete, data: { confirm: 'Are you sure?' } %></td>
            </tr>
            <% end %>
        </tbody>
</table>
<% end %>

You may notice this table is almost identical to the one generated by the scaffold. I decided to use it since it looks clean and easy to read.

Updating the Search Model

Just like our Pokemon model, the Search model needs a method to find Pokemon. This one will be an instance method that will be called on instances of Search. We have called it in our views with .search_pokemon. It is time to build it. Keep in mind that since this model also has a 'type' attribute, we will need to make it an acceptable attribute. We have done this on the second line of the search model.

# pokemondb/app/models/search.rb

class Search < ApplicationRecord
    self.inheritance_column = "not_sti"

    def search_pokemon
        pokemon = Pokemon.all 

        pokemon = pokemon.where(['name LIKE ?', name]) if name.present?
        pokemon = pokemon.where(['type LIKE ?', type]) if type.present?
        pokemon = pokemon.where(['region LIKE ?', region]) if region.present?

        return pokemon
    end 
end

Test the Search

Everything should work properly! We should have the ability to filter Pokemon by name, type, and region. The various links and buttons we added also allow for great user-friendliness. It is nice to have a link to go back to the previous page and links to alter our Pokemon.

Run your rails server and visit localhost:3000 to see everything in action.

Thank you for reading this tutorial. I hope this can be of use to you in a future Rails project.

Why You Should Start Pair Programming

Brandon Marrero 🇺🇸 — Thu, 27 Aug 2020 18:01:25 +0000

Introduction

I spent a lot of time working independently, trying to build a foundation with Ruby, and scratching my head constantly. I finally had my first pair programming experience after the first month of my code boot camp at Flatiron School. That is where I met my good friend and programming partner, Austin. Things started to change. We both buckled down on Ruby labs with our loud birds chirping in the background. There were many great "ah-ha" moments.

I believe there is a lot we can do independently, but sometimes working with others can be very beneficial. In this blog post, we will discuss the benefits of pair programming and how to do it effectively. Let us start by explaining what pair programming is.

Definition

Pair programming consists of two programmers working together to solve problems. Typically, one programmer is the "driver," and the other is the "navigator." The driver is focused on the actual actions of building the application. This is the programmer that is typing on the keyboard and bringing the ideas to life. The navigator figures out which steps to take and the approach to building the application. They can also help catch errors that may go unnoticed by the driver. At times, the driver and navigator may swap roles to take a break from one role and even out the workload.

The Benefits

I believe there are three main benefits to pair programming. They are peer review, spreading the load, and engagement. All three of them can go a very long way.

Peer Review

Nobody writes perfect code. If you believe that you only write "clean code" and do not need to check for errors, then it is going to come back to bite you eventually. It is essential to review your code and make sure that everything works as expected. If it is a SaaS application, then this part is even more important to ensure usability and user-friendliness. The good news is that pair programming can make the process of finding and fixing errors much easier.

You can have your navigator watch over you as you write code to catch errors in realtime. This can help improve workflow and reduce the time spent fixing errors at the end. If you are unable to work together live, then review as you go.

One way you can do this is by using Github pull requests. These allow programmers to view changes committed to the external repository, review the code line by line, and discuss changes that need to be made before pushing to the main branch.

Spreading the Load

At times, programming can feel very intimidating, especially if working independently. Depending on the project, there can be many moving parts to watch. Keeping track of syntax, algorithms, gems, and everything in between can become overwhelming. We can work more efficiently and stress-free by splitting the work with our partner. Not only will productivity increase, but also the quality because you can focus on smaller parts of the project.

Engagement

Ever spent hours on a project and felt extremely bored and unmotivated? Working with a partner is much more engaging and might help reduce those feelings. Not only do you have support, but someone to chat and bond with. Doing this can provide that much-needed humility. It also helps build trust with your partner because you are relying on them and keeping each other accountable. The projects you work on together begin to feel a lot more real.

Here are a few tools you can use to stay connected:

Slack: Chat rooms organized by topic, groups, audio/video, and private messaging.
Zoom: A conference app with audio/video meeting capabilities and screen sharing.
Skype: A conference app similar to Zoom, but a little less light-weight.

Effective Pairing

Pair programming can be a waste of time if it is not done efficiently. Everyone has their preferences, but I will share a few tips that have made my experience better.

Find the Right Partner

Finding a partner is sort of like dating because there is a compatibility scale. There are certain things you want to look for in a "partner." You need a partner that you can work well with, does not cross boundaries and has similar availability. It may also be a good idea to work with someone close to your level. If you are a beginner, your best pair programming partner might not be someone who has built 30 web applications.

I met my partner in my boot camp cohort, which worked out perfectly because we were on the same module and had similar skill levels. At the same time, you want your partner to bring in different perspectives from yours. Go ahead, put yourself out there!

Make a Schedule

Set time aside that is strictly for programming. We wish we could pair while binge-watching Netflix, but that does not work too well. Especially when watching Narcos, you would just miss all the subtitles.

Be very strict in following your schedule and try not to cancel often. Making too many excuses can become tiresome for your partner and might cause them to believe you are not serious. Remember that one hour of high intensity focused work is better than four hours of less focused work. It is also much easier to find an hour to work together. Do not make your sessions too long!

Google Calendar is a great way to create a schedule that both you and your partner can view and update. Be sure the schedule works for both parties.

Switch Roles

Earlier we went over the differences between the driver and the navigator in pair programming. It is important to play both roles. Being a driver improves your skills in execution while being a navigator improves your ability to explain and break down your code. Both of these need practice.

You also need to give your partner a break from fulfilling one role. If you went on a 24-hour road trip, would you want to be the driver the entire time? Probably not. Divide the work and make things a lot more interesting and less repetitive.

One way you can do this easily is by using a Pomodoro app like TomatoTimer. It times your work sessions into 25 minute periods. You can use this timer to switch roles and take breaks. There are also many other free apps on the app store and the web.

Find a Quiet Place

It can be difficult to accomplish anything without a quiet place to work. Both you are your partner need a suitable environment free of distractions. Steer clear of the room where your three parakeets are, you will not want to be unmuting yourself every time you need to speak. I have had to do this and it distracts everyone.

Wrapping Things Up

These are just a few ways to get started on improving your pair programming experience. I hope you can utilize these tips. Do not forget to discuss your pair programming approach with your partner.

Feel free to share your approach to pair programming. What improved your experience? Did you try anything that did not work? I would love to hear your response!

Don't Get Stuck in Tutorial Hell

Brandon Marrero 🇺🇸 — Wed, 26 Aug 2020 02:22:06 +0000

Introduction

Have you repeatedly followed tutorials, yet not retain any information? Does your portfolio only consist of tutorial projects? If the answer is yes to these questions, then you might be stuck in the infinite loop known as tutorial hell. I myself have been there, and it is not a great place to be. I spent hours watching tutorials, yet not understanding the material, and then repeating those tutorials again until I just gave up.

Tutorial Hell...?

Sadly, tutorial hell seems to be one of the leading causes of people giving up on coding, but that does not have to be the case for you. I will start by giving a brief rundown of what tutorial hell is.

Tutorial hell is what many of us get trapped in when we enter the vicious cycle of watching tutorial videos. You may watch hours upon hours of coding tutorials, but when the time comes to use what you 'learned,' you feel lost. It feels like you are starting from square one. This is a normal way to feel when you are learning something new, especially if it is a challenging experience. The problem is when developers who are lost binge watch and follow more tutorials in an endless cycle.

Interviewer: "What are constants? What are some use cases?"

Interviewee in Tutorial Hell: "Ummmm..."

Tutorials Are Not Bad!

I am not trying to say tutorials are not a great way to learn. Watching a tutorial for a new tool or concept is a great way to get started, but once you watch that tutorial it is important to use other resources and the information you learned. Try to watch tutorials and implement some parts that you learned into your own projects. Deconstruct the projects you build from tutorials. Poke around with them. Just following along can have you coding blindly and not understanding what you are doing.

Getting Out

You CAN get out of tutorial hell. It simply starts with changing your approach to learning. Tutorials alone will cause you lots of confusion and grief. Minimize these feelings by trying a few new things.

Start Building

Build your own projects that you know you can finish, as well as some that push your limits and challenge the mind (you do not need to do big projects starting out). This is what I call learning through the struggle. My best learning experiences were those 'ah-ha' moments where I consistently threw everything I had at a problem. It is okay not to know, what matters is learning how to approach problems and solve them. Do not be afraid to try new things or completely break them!

Use Your Resources

There are many resources besides video tutorials that teach new concepts, show examples, and help you hit the ground running. The great thing about coding is that your idea has probably been made before. Look up your idea on Google, Github, and Stack Overflow to see if someone has already solved your problem. Many developers even breakdown their code line by line.

Here are a few resources that have helped me.

Code Wars: Master code through fun and unique challenges
Brilliant: Contains computer science challenges and other skills
Stack Overflow: A community for developers to share information and learn from each other

Code Wars and Stack Overflow are the two that I used to build a solid foundation with Ruby. I was able to think outside the box by solving Code Wars kata. I could find problems that have already been solved on Stack Overflow when code-curious or if I hit roadblocks. Stack Overflow is generally more reliable than doing a simple Google search because of their upvote system and high-quality answers. You can get some great perspective from viewing other peoples' code.

Join a Community

Join a coding community in real-life by using sites like Meetup, Facebook and Craigslist to find meetings. For the introverted folks like myself, you can still get lots of benefits from networking virtually. Discord, Twitter, Facebook and even DEV are great options. You can learn from others, find a mentor, collaborate on projects, and teach others. Do not be afraid to put yourself out there. Connect with others who have similar goals and interests. Having someone you can reach out to when you hit a road bump or just having some friends with similar interests is wholesome and invaluable. It can make things feel more real, and you less alone.

Wrapping Things Up

I hope that reading this post provided some useful information, or at least helped motivate and guide you in the right direction. I myself, only watched tutorials for a VERY long time. It was only recently that I started building and breaking things, and I still have not done anything significant. I can say building my own applications for two hours has proven to be much more effective than watching tutorials for four times as many hours. Do not be afraid of failure. Fixing our mistakes provides some of the most valuable learning experiences. Just get started!

Please feel free to leave comments and feedback. What has your experience been like learning to code? How did you escape tutorial hell? If you are still in it now, what steps will you take to get out? Do not be shy, I truly welcome your perspective!

DEV Community: Brandon Marrero 🇺🇸

Basic React Hooks: useState, useEffect, and useContext

Introduction

Class Component

Functional Equivalent

Prerequisites

useState()

useEffect()

Call When Updated

Call When Destroyed

useContext()

Creating Context

Accessing Context

Conclusion

Understanding How React Works: A Beginner's Guide

What is React?

What is the format?

What are components?

How does React flow?

Conclusion

Asynchronous Redux using Redux Thunk

Prerequisites

What is Redux Thunk?

Getting Started

How Does It Work?

React/Rails Final Bootcamp Project

Rails API

Initial Design

ReactJS

React Redux

React Router

Tailwind CSS

Class Journal - JavaScript and Rails Project

Introduction

Project Requirements

Rails Backend

JavaScript Frontend

Creating New Entries

Building Comments

Async Issues

Polishing

Future Improvements

Conclusion

Rails MVC Project with RESTful Routes - Bundl

Introduction

Planning

Building the App

User Model

Groups

Tags

Searches

OAuth

Roadblocks

Final Thoughts

My Experience in a Coding Bootcamp After 6 Months

Introduction

My Passion for Creating

Finding a Bootcamp

The Bootcamp

Starting Out

After The Basics

Final Thoughts

Building an Advanced Search Form in Rails 6

Introduction

Before We Dive In

Getting Started

Updating Routes

Test Your Create Form

Search by Name

Basic Search Method

Search Model

Searches Controller

Controller Actions

Building a New Form

Updating the Search Model

Test the Search

Why You Should Start Pair Programming

Introduction

Definition

The Benefits