DEV Community: JordanTaylorJ

Responsive Design

JordanTaylorJ — Thu, 31 Aug 2023 02:44:01 +0000

We all know that feeling after building a website; it's completed and deployed, and then you open it on your phone and the whole thing is distorted.

I recently completed a project with Tailwind CSS, a mobile-first responsive design CSS framework that helped me to navigate mobile design using breakpoints.

The Concept

Each breakpoint, five in total, represents a common screen size from small (sm) to 2xl. Using these, you can conditionally render utility classes for each breakpoint.

For example, say you have a header with some text.

<h1>Welcome</h1>

Using Tailwind utility classes we can specify some styling like font size and color.

<h1 className='text-blue text-xl'>Welcome</h1>

Next, we can add multiple utility classes for specific breakpoints.

<h1 className='text-blue text-xl sm:text-2xl lg:text-4xl'>Welcome</h1>

The breakpoint system for Tailwind CSS is mobile-first. This means that the unspecified utilities default to a mobile device (text-xl in the example above). You should think of the "sm" breakpoint as the breakpoint ABOVE the smallest. The way to target a mobile device is by not adding a prefix to your utility class.

How to Apply

When applied to text size, it's very intuitive to understand. Let's take a look at how to apply to a situation with a grid to gain a further understanding.

We'll start with a basic grid.

<div className='grid gap-12 m-6'> ... </div>

Remember that Tailwind is mobile-first. Depending on content and margins, a three column grid is likely to get distorted on a small screen. We'll start with a single column default for mobile, then specify other major breakpoints.

<div className='grid md:grid-cols-2 lg:grid-cols-3 gap-12 m-6 md:m-12'> ... </div>

Notice, I also adjusted the margin as screen size goes up. If you don't specify a specific breakpoint it will default to the next breakpoint below. In this example the breakpoints xs (no prefix) and sm will have a margin of 6. Breakpoints md, lg, xl, 2xl will all have a margin of 12.

Conditional Rendering with Breakpoints

Apart from resizing text and a grid layout, you can also choose to hide specific elements completely. In this example, I'll talk about reformatting a navigation panel from a navbar to a dropdown menu.

Here I'm using the utility class hidden as a default (mobile-first) for the navbar. At the medium breakpoint I'll add display as block.

 <nav className='hidden w-full md:block md:w-auto space-x-10'>
   <button>Home</button>
   <button>Notifications</button>
   <button>Settings</button>
</nav>

Next I'll define a menu dropdown button with the breakpoint md:hidden.

<button onClick={() => setIsOpen(!isOpen)} className="block justify-right p-2 w-10 h-10 hover:text-white md:hidden">Menu</button>

This setup allows for the navigation panel to switch at the medium breakpoint from a navbar to a dropdown menu. As one element is hidden, the other will take its place. This prevents a warped user experience on mobile but adds a fuller design/layout to a larger screen.

Try It Out!

I find it best to learn through trial an error so open up a text editor and try it out. Tailwind makes it pretty easy to get the hang of and it's really exciting to watch the browser adapt.

Happy coding!

Rails Live Coding

JordanTaylorJ — Mon, 16 Jan 2023 21:55:59 +0000

My project is a website for a book club that allows users to share books and discuss them. Each review/comment has an option to add a heart or a favorite.

The objective was to add a button to my book display page that displays the book with the highest favorite count.

My schema looks like this:

Check out my repo for more context.

Solution

In the front I added a variable favoriteBook to state, a JSX button, and the onClick with the following fetch request:

const handleFavoriteClick = () => {
    fetch('/books/favorite')
    .then(res => res.json())
    .then(res => setFavoriteBook(res))
  }

From there, I added a custom route in routes.rb.
get '/books/favorite', to: 'books#favorite'

Next, in my Book model I added a method to determine the number of favorited reviews on a book instance.

    def favorite_count
        count = 0
        self.reviews.each do |review| 
            if review.favorite == true
                count += 1
            end
        end 
        count
    end

self above refers to an instance of Book in the class Book. I started the count variable at zero, then iterated through each review to see if the favorite boolean was true. If it was, I added one to the count.

In book_serializer.rb I added :favorite_count to my attributes in order for it to be available to the frontend.

Finally, in books_controller.rb I was able to utilize the favorite_count method. I set the highest_count variable to zero and a case 'No books have been favorited' incase of a scenario where there are no favorites. I iterated through each book and determined the book with highest number of favorited reviews.

    def favorite
        highest_count = 0
        favorite_book = 'No books have been favorited.'
        Book.all.each do |book|
            if book.favorite_count > highest_count 
                highest_count = book.favorite_count
                favorite_book = book
            end
        end
        render json: favorite_book, status: :ok 
    end

Other Considerations

Routing

When I was initially fetching to the custom route I kept getting back content for books#index. I later determined that in order for my custom route to work on books_controller.rb, I needed to remove resources :books, only: [:show, :create] This only: was blocking the custom route. I ended up listing out the :show and :create routes along with :favorite.

  get '/books/show', to: 'books#show'
  post '/books', to: 'books#create'
  get '/books/favorite', to: 'books#favorite'

Controller Clean-Up

The #favorite action in books_controller.rb was originally made with only a highest_count variable, and I was trying to save the book there.

    def favorite
        highest_count = ""
        Book.all.each do |book|
            if book.favorite_count > highest_count 
                highest_count = book
            end
        end
        render json: favorite_book, status: :ok 
    end

This failed by the second iteration because I was comparing an integer to an instance of book.

The solution I made was to create two variables, one for the count and another for the book itself:

    def favorite
        highest_count = 0
        favorite_book = 'No books have been favorited.'
        Book.all.each do |book|
            if book.favorite_count > highest_count 
                highest_count = book.favorite_count
                favorite_book = book
            end
        end
        render json: favorite_book, status: :ok 
    end

This was a success, but I thought could be cleaner.
Another solution would be as follows:

    def favorite
        favorite_book = Book.new(title: 'No books have been favorited.')
        Book.all.each do |book|
            if book.favorite_count > favorite_book.favorite_count 
                favorite_book = book
            end
        end
        render json: favorite_book, status: :ok 
    end

Here, I'm comparing the favorite_count of the current highest book to the favorite_count of the book in the current iteration. I created an unsaved instance of Book with no reviews (and therefore no favorites) in order to make the first comparison.

Tips for Rails Live Coding

Determine where in the schema the information you're looking for is. In my scenario, my favorite attribute was on every individual review nested under books. I needed to calculate a count for each instance of Book before I could compare to find the highest favorite_count.
Follow the call stack. First I needed a button to press, then the routing, then an empty controller action. From there I had to determine the connection between all my ruby files (controllers, serializers, and models) to ensure I was utilizing them properly. Remember the models represent an instance of a table item. Serializers are for data display to frontend. Controller is sending out the response.
Read error messages carefully. They're helpful if you take the time to understand the feedback. Pop in a debugger or binding.pry to take a closer look at whats happening.

Happy coding!

Rails: Resources for a Secure Database

JordanTaylorJ — Wed, 30 Nov 2022 18:35:44 +0000

While building my first full stack application with rails, I learned several new skills about working with a database. This includes how to utilize gems and ruby on rails to keep the database secure. Below are my notes about the benefits of strong params, validating data, serializers, error handling, password encryption and cookies.

All code examples are from my BookClub application, built as a space to share and discuss favorite books.

Strong Params

In the controllers I used strong params to define the attributes the controller expects to receive from the frontend. I created a private method of book_params to pass to methods within the controller.

def book_params
    params.permit(:title, :author, :image)
end

With the following create action Book.create(book_params), a hash containing the attribute :person would return the error: Unpermitted parameters: :person. By only permitting the specified attributes, we can safely use the book_params hash for mass assignment.

Validations

I utilized the built in Ruby validator in my models to protect the database from invalid data. This consists of the validates keyword, an attribute, and a hash of options.

validates :username, presence: true, uniqueness: true
validates :password, presence: true, length: {in: 3..20}

These validations in the User model ensure that there are no duplicated usernames and that a password's length is between three and twenty characters.

Active Record validates will only be checked when adding or updating data via Ruby/Rails. The validations will not run with SQL code via the command line. #valid? is the only way to trigger validation without touching the database.

Serializing Associations

The book_serializer.rb defines which attributes are included in the response data. The data for each book is nested three layers deep:

{
    "id": 96,
    "title": "the Sun and Her Flowers",
    "author": "Rupi Kaur",
    "image": "https://images.unsplash.com/photo-1545239351-cefa43af60f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80",
    "reviews": [
      {
        "id": 261,
        "user_id": 83,
        "book_id": 96,
        "comment": "Impedit quia ex sunt.",
        "favorite": false,
        "user": {
          "id": 83,
          "username": "Ringo"
        }
      }
    ]
}

I utilize macros as well as the include keyword to get all three layers in our response data in order to display the has_many through relationship.

I did not include the timestamps created_at and updated_at, as the frontend will not require this information. The has_many macro is used to attach the reviews to the associated books.

class BookSerializer < ActiveModel::Serializer
  attributes :id, :title, :author, :image, :reviews
  has_many :reviews 
end

By default, AMS only nests associations one level deep. In order to override this behavior, I used the include keyword in books_controller.rb show method:

render json: books, include: 'reviews.user', status: :ok

React Error Handling

To make use of the errors from Ruby, they are rendered to the user in the frontend. All components with a POST and/or PATCH request have errors kept in state

const [errors, setErrors] = useState([]);

After a fetch, we check the response status. If it's okay, we can use the response as intended, otherwise, use setErrors with the error response to display the data.

        .then((r) => {
            if (r.ok){
                r.json().then((r) => setUser(r))
                setErrors([])
            } else {
                r.json().then((r) => setErrors(r.errors))
            }
        })

In the example below, the validation errors are displayed conditionally when invalid data is used to try to create a new user account.

Password Encryption

The macro has_secure_password comes from the bcrypt gem. It's used to hash and salt all passwords for security.
This gem requires the users table to have the column password_digest. The macro is added to the User model.

Cookies and Sessions

User authentication allows the application to keep track of who is or is not logged in. This is done by setting the user's username to a session hash when the user logs in.

First, we install middleware in our config/application.rb file:

config.middleware.use ActionDispatch::Cookies
config.middleware.use ActionDispatch::Session::CookieStore
config.action_dispatch.cookies_same_site_protection = :strict

In the application controller, I included Cookies so that the rest of our controllers can access them. I also defined the method :authorized and set it as a before_action.

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

  before_action :authorized 

  def authorized 
    return render json: {error: "Not Authorized"}, status: 
    :unauthorized unless session.include? :user_id
  end
end

This authorized method checks sessions to see if a user is currently logged in. The before_action will run the authorized method before every request to check that a user is logged in before proceeding.

Using rails generator, I created a sessions_controller rails g controller Session. Here, I define create and destroy actions for logging in and logging out.

The destroy (logout) is straight forward, simply removing the user_id from session, but the create (login) action needs to be authenticated by a password. The code user&.authenticate(params[:password]) checks that a user was found and the password in params matches what is saved in the database for that user.

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

If the user is found, we save the user.id to the sessions hash.

*** Because the authorized before action was placed in application_controller.rb, it is inherited by all the other controllers. In the sessions_controller.rb, we have to remember to skip the :authorized action for our create (login) route. We can skip :authorized any time we don't need to check that a user is logged in before proceeding with an action.
skip_before_action :authorized, only: :create

I hope these notes give you some insight as to how rails can be used to keep data secure and help you in the creation of your own database.

Happy Coding!

Ruby, Active Record, & Sinatra

JordanTaylorJ — Mon, 15 Aug 2022 01:31:00 +0000

I built a web basic API with Sinatra and Active Record to support a React frontend. Here, I go over some key takeaways from building out the server side of this application.

One to Many Relationship

The tables in this database have a one-to-many relationship. I built two tables, trails and athletes. One trail "belongs to" many athletes. Below, the entity relationship diagram shows the foreign key trail_id is in the athletes table connected to the id on trails.

Entity-Relationship Diagram:

Active Record

I inherit from the Ruby gem Object Relational Mapper, Active Record in order to define the relationship between the two classes, athlete and trail in the app/models files:

class Athlete < ActiveRecord::Base
    belongs_to :trail
end

class Trail < ActiveRecord::Base
    has_many :athletes
end

I use Rake commands to create my migration files:
bundle exec rake db:create_migration NAME=create_athletes

I define the structure of the database tables in the db/migrate files:

class CreateAthletes < ActiveRecord::Migration[6.1]
  def change
    create_table :athletes do |t|
      t.string :name
      t.string :time
      t.integer :trail_id
      t.boolean :unsupported
      t.timestamps
    end
  end
end

It's important to remember to follow Active Record's naming conventions by using snake_case for the migration file names and CamelCase for the class names as well as keeping the migrate files' timestamp intact.

It's also important to define table names as plural and class names as singular. When defining the table relationships, the singular trail belongs_to and plural athletes has_many when associating the tables.

Active Record expects these naming conventions in order to recognize the associations between the data; "convention over configuration". The migration file timestamps allow Active Record to manage version control/schema.

In the app/controllers/application_controller file, I inherit from Sinatra(Controller) in order for the frontend (View) to connect to the database (Model).

The schema.rb file shows the current version of the database. The version number corresponds to the timestamps on the migration files which is how Active Record maintains version control.

ActiveRecord::Schema.define(version: 2022_07_20_184513) do

I use dynamic routing to handle CRUD actions. For example, from the client side, a POST request would be as follows:

    const handleAddTrail = (newTrail) => {
      fetch("http://localhost:9292/trails", {
          method: 'POST',
          headers: { 
            "Content-Type": "application/json", 
          },
          body: JSON.stringify(newTrail),
        })
        .then(r => r.json())
        .then((newTrail) => handleAddTrailToTrails(newTrail))
  }

The server side:

  post '/trails' do
    trail = Trail.create(
      name: params[:name],
      location: params[:location],
      distance: params[:distance],
      elevation_gain: params[:elevation_gain]
    )
    trail.to_json(include: :athletes)
  end

In the POST request example above, it's important to remember to use include: to access associated data between tables. Otherwise, in this example, the returned newTrail object would not include an athletes array [].

Overall Thoughts on Active Record and Sinatra

Learning the code and creating a database was not an overly complicated process with these tools. The issues I was getting hung up on were with the file structure of the backend and the specificity of naming conventions.
I also started out with a lot of code in my application_controller file to handle requests before realizing that the associated data means I only needed an initial fetch from the trails table in order to also get all the data I needed from the athletes.

React BoardBuilder

JordanTaylorJ — Wed, 15 Jun 2022 18:13:35 +0000

This idea was sparked by question based forms that sort the user into a group (Find out which Harry Potter house you belong to). I had originally planned to make a site that leads you to the perfect bike for your style of riding. I quickly realized that every question would be dependent on the previous selection and formatting the data could quickly become cluttered, so I went back to the drawing board. I still liked the idea of a question form connected to a specific outcome.
The application I made is a similar idea, but applied to skateboards. This application works with you to build a complete skateboard based on what style of riding you want.

ReadMe.md

Features:

Homepage display with navigation panel
Step-by-step guide to build out your board
List created boards
Delete for each board

Tech Stack:

JavaScript React, MUI

Component Hierarchy:

Organizing Data & useState

Working with nested data proved a difficult task. I reformatted the db.json several times throughout this build to keep the code clean and minimal. I also very quickly learned the value of good event and variable names in order to better manage props.

The useState hook updates React's internal state. boards state was kept inside of the App component in order for the children components to have access via props. State for newBoard was kept inside the BoardBuilder component along with the data for each step and MUI's activeStep functionality.

Controlled Component

Using state to derive input value makes a controlled input. In React, rather than using a selected attribute on <select>, value={state} should be used for controllable props.

Below you can see the complications in making <select> a controlled input. I wasn't able to pass the part variable as a value attribute because it was outside of the scope.

I considered reformatting my db.json again, but I wanted to avoid adding a third fetch to my application. I tried to reformat to a checkbox instead, but that became an issue when I needed to restrict the selection to a single item. Eventually, I revisited the select tag with a simpler version (without using MUI).

I created a part variable in state and set value={part}. When a part is selected, handleChangePart saves it in state, and then it is passed to the callback function handleChange.

From there, the handleChange inside of the BoardBuilder component is responsible for building the newBoard object from the parts. Note the splice to make a copy of the previous state and the object key being targeted with the name value as an attribute of select.

const handleChange = (e) => {
    setNewBoard({...newBoard, [e.target.name] : e.target.value})
  };

I also set the initial state of a newBoard to the first available option so that it can't default to an empty string.

const [newBoard, setNewBoard] = useState({
    deck: 'standard',
    trucks: 'standard kingpin',
    wheels: 'skatepark',
    risers: 'risers',
    griptape: 'griptape'
});

Restful API

I use json-server for POST and DELETE requests. Like the example below, we must get the promise back from the fetch request before setting state. I used splice to make a copy, rather than modifying the original state of boards.

  const handleAddBoard = (newBoard) => {
    fetch("http://localhost:3001/completeboards", {
      method: 'POST',
      headers: { 
        "Content-Type": "application/json", 
      },
      body: JSON.stringify(newBoard),
    })
    .then(r => r.json())
    .then((data) => setBoards([...boards, data]))
  };

useEffect & Dependency Arrays

I implemented the useEffect hook twice in this application. First, to fetch boards and initially setBoards and again inside of the BoardBuilder component to fetch and setStep.

I had initially thought that boards should be the dependency array value so that when that value changes, the side effect fires. However, I realized this is not necessary because boards is saved in state and state is updated after each POST or DELETE to the boards data. If a an object is inside the dependency array, it will infinitely fetch. I used empty dependency arrays on both so that they each only run once when the component initially renders.

  useEffect(() => {
    fetch("http://localhost:3001/completeboards")
    .then(r => r.json())
    .then((data) => setBoards(data))
  }, []);

Note that the db.json should be run with --p 3001.

MUI

I worked with MUI for a consistent styling. The 'Stepper' component was used (as BoardBuilder) to map through the process of building a board. Within that, I needed to also map through the parts data inside of a Select component. I was able to clean up some of the BoardBuilder code from the original MUI formatting by adding steps into db.json and fetching it.

I also used MUI's AppBar for the navigation bar and their Card component to display the results.

Pros: The styling is consistent and clean throughout the application. It's easy to integrate and has good documentation (depending on the version, I used v5.8.4).

Cons: Similarly to working with MaterializeCSS, I had issues adding my own styling along with MUI. There is a learning curve for adding images and changing MUI's "theme". It also clutters your code quite a bit. Theres a lot of extra imports and even some items added to state.

Imports for changing theme:

import {ThemeProvider, createTheme } from '@mui/material/styles';

React Takeaways

React uses declarative code - JSX tells what to do, but not how to do it. AKA - no more document.createElement() and appending everything. 🙌
React components allow for reusable code! 👏 I only needed one BoardBuilder and one Result component and was able to map through with the data I wanted.
Setting state with a new object will cause a re-render with the updated info! No need to worry about complex DOM manipulation, again, less typing = efficiency. 👌

The overall key to React is understanding inverse data flow.

Checkout my GitHub repo to see the full code!

JavaScript Colorado Fourteeners

JordanTaylorJ — Wed, 23 Mar 2022 05:00:23 +0000

What Is It?

For my Phase I project, I built a website inspired by the peaks in Colorado above 14,000ft. As a native Coloradan, I have hiked a handful of Colorado's 14,000ft peaks (14ers) so I understand how hiking them all becomes a bucket list item for hikers.

The website was built as a way to track how many of the peaks have been hiked or "bagged" and reference the complete list of existing 14ers in CO. Basing my website around a topic I was interested in was a key factor in keeping me motivated through the process.

The Code

1. The API

I had access to a public API containing data on Colorado peaks. I used this data to populate the list of available peaks. I fetched the data from the API as soon as the home page was rendered so that the page wouldn't be waiting on a server request when rendering the data.

const APIFetch = () => {
    fetch(" ")
    .then(function(response) {
        return response.json();
    })
    .then(function(data){
        console.log('data', data);
    })
}

2. Building Navigation

The navigation bar was the only portion of the website built into the HTML file, because it would be displayed at all times. The other "page" elements within the nav bar were built and appended with JavaScript to avoid redirects.

Each section of the nav bar had a click eventListener attached to render the new page.

const homeLinkEvent = () => {
    homeLink().addEventListener('click', renderHome)

3. Button Click Events

The click events were originally built outside of the functions that build out each page, but this quickly became an issue. The data from the fetch and page render was outside of the scope of the button so I ended up writing those eventListeners and callback functions within each page load function.

Examples in my code include the renderGoal() and renderList() functions in index.js.

Takeaways

1. Materialize CSS Pros and Cons

Materialize CSS was a tool I found to quickly add a consistently formatted style to a page without having to write it all from scratch.
I used this to add most of the style to the website, including the navigation bar, the collapsible information panel, and the button styling effect.

<!-- Compiled and minified CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
     <link rel="stylesheet" href="./style.css">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- Compiled and minified JavaScript -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Using this method of styling became an issue when I needed to write some of my own formatting. My CSS formatting was overwriting Materialize formatting. I had to give my styling unique labels to differentiate between the two.

.leftJ {
    width: 25%;
  }

It's harder to tweak this type of formatting, for example, moving the button near the 14er without it opening the collapsible menu.

Overall, Materialize was perfect for what I needed, but I would recommend going all or nothing when it comes to using it to avoid overwriting the formatting.

2. Node Getters

Building "node getters" was a tip I learned from the project build videos. This was a way to minimize some the repetition in my code by assigning an HTML element to a JS variable.
For example I would frequently use this mainDiv variable to reset the main page and append new elements to it every time the nav bar was clicked.

const mainDiv = () => document.getElementById('main');

3. Loops

A final note on this project was a takeaway about looping through arrays. I wanted to make sure that a peak could only be added to the completed list a single time. This required me to have my button callback function loop through my array of completed items to check for a duplicate. I originally tried with this code:

for(let peak = 0; peak < goalList.length; peak++){
    let mtnName = div.innerText;
    if (goalList[peak] === mtnName){
        alert("You've already added this peak to your list!");
    }
    else {
        goalList.push(div.innerText);
    }
}

I was never getting an alert and nothing was being appended to my completed array but I also wasn't getting errors from the console. The loop was never being run because my goalList.length was never getting above zero. I tried many variations of this version before eventually getting stuck inside a loop.

This issue was resolved by assigning a boolean value to a variable. The loop was able to recognize the peak name as either already in the array or not in the array and then the append happens after the for loop.

const addToGoals = () => {
    let alreadyHere = false;
    for(let peak = 0; peak < goalList.length; peak++) {
        let mtnName = div.innerText;
        if (goalList[peak] === mtnName){
            alreadyHere = true;
            alert("You've already added this peak to your list!");
        }
    }
    if (alreadyHere === false) {
        goalList.push(div.innerText);
    }

Final Thoughts

There are so many resources online for learning little tricks as you go. For instance I had to look up how to enter a new line in a string. \n

At the beginning this project was daunting, but as I worked through each step all the material I've learned clicked into place.

Hello World!

JordanTaylorJ — Tue, 22 Mar 2022 00:48:56 +0000

I recently enrolled in an online coding program.

I'll be sharing my notes, thoughts, and projects on this platform as I move through the course!